Elementor-Off-Canvas-Widget für Slide-Out-Panels und Menüs (Pro)
Off-Canvas Content ist ein Master Addons Pro Widget, das einen Button auf der Seite platziert und ein Panel öffnet, wenn ein Besucher darauf klickt Das Panel zeigt eine gespeicherte Elementor-Vorlage an, so können Sie ein Menü, ein Kontaktformular, Filter oder eine Promo darin platzieren und dieselbe Vorlage auf anderen Seiten wiederverwenden Wählen Sie, wo das Panel erscheint, wie es animiert und wie der Button aussieht Besucher schließen es mit dem Close-Icon, indem Sie auf das Overlay klicken oder indem Sie Esc drücken.
Free Elementor hat kein Off-Canvas-Widget Elementor Pro hat in Version 3.22 eines hinzugefügt und benötigt die eingeschalteten Flexbox-Container und verschachtelten Elemente. Dieses Widget ist die Master Addons Pro-Option: Es öffnet jede gespeicherte Vorlage von jeder Seite hinter einer Schaltfläche, die Sie einmal stylen.
So fügen Sie ein Off-Canvas-Panel in Elementor hinzu
Sie benötigen Elementor und einen aktiven Master Add-dons Pro Lizenz.
- Gehe zu Vorlagen, gespeicherte Vorlagentemplate erstellen, den Panel-Inhalt erstellen und veröffentlichen.
- Bearbeiten Sie die Seite, suchen Sie nach Off-Canvas-Inhalt Und ziehen Sie es dorthin, wo die Schaltfläche erscheinen soll.
- in Wählen Sie Vorlage, wählen Sie die von Ihnen gespeicherte Vorlage aus.
- Wählen Sie einen Position und die Breite oder Höhe einstellen.
- Wählen Sie eine Eingangsanimation und Dauer.
- Legen Sie die Schaltfläche Titel oder Symbol fest und gestalten Sie dann die Schaltfläche, den Header und den Container auf der Registerkarte Stil.
Siehe die Einstellungen für Inhalte außerhalb von Leinwand Leitfaden für jede Option.
Off-Canvas Content im Überblick
| Einstellung | Was es tut |
|---|---|
| Inhaltsquelle | Eine gespeicherte Elementorvorlage: Seite, Abschnitt oder Container (der Dropdown listet jedes Bibliothekselement außer Kits auf) |
| Positionen | Rechts, Links, Oben, Unten, Mitte, Relativ (ein Dropdown unter der Schaltfläche) |
| Eingangsanimation | Fade, Slide oder Grow; Relative Unterstützungen Fade nur |
| Eingangstyp | Cover schiebt das Panel über die Seite; Push bewegt die Seite quer Push wird für Oben, Links und Rechts angeboten |
| Größe | Breite in px, % oder vw für Links, Rechts, Mitte und Relativ; Höhe in px, % oder vh für Oben, Unten, Mitte und Relativ; beide pro Gerät |
| Schließt mit | Das Symbol schließen, ein Klick auf das Overlay, oder die Esc-Taste; Eingabe oder Leerzeichen auf dem fokussierten Schließ-Symbol funktioniert ebenfalls |
| Extras | Standardmäßig geöffnet, Animationsdauer in Sekunden, Header-Titel mit Reverse Header, Bildlaufsperre im geöffneten Zustand, eine stilfähige Trigger-Taste mit Text, Symbol oder beidem |
| Öffnet ab | Nur die eigene Schaltfläche des Widgets (kein CSS-Selektor oder externer Trigger) |
| Bedürfnisse | Elementor (kostenlos oder Pro) plus Master Addons Pro |
Position, Größe und Animation des Panels
Position Angebote Rechts, Links, Oben, Unten, Mitte und Relativ Linke, Rechte und Mittlere Paneele erhalten eine Breite in px, % oder vw, und Ober, Unter - und Mittelpaneele erhalten eine Höhe in px, % oder vh, jeweils einstellbar pro Gerät. Eingangsanimation Fade, Slide oder Grow ist, und nur Fade mit Relative arbeitet Links, Rechts - und Obertafeln haben auch eine Eingangstyp Von Cover oder Push. Stellen Sie die Animationsdauer In Sekundenschnelle und einschalten Standardmäßig geöffnet Wenn das Panel geöffnet beginnen sollte.
Cover und Push sind die beiden Eingangstypen Mit Cover gleitet das Panel über die Seite und das Overlay dimmt, was sich dahinter befindet Bei Push bewegt sich die ganze Seite um die Breite des Panels, so bleibt der Inhalt neben dem Menü sichtbar Push ist für Top, Left und Right Panels erhältlich; Bottom, Middle und Relative immer abdecken.
- Ein linkes oder rechtes Panel mit Ihrem Site-Menü für kleinere Bildschirme.
- Ein Top-Panel für eine kurze Ankündigung oder ein Suchformular.
- Ein mittleres Panel als einfaches Modal für ein Anmeldeformular.
Auslöser für Knopf-, Kopf- und Behälterstyling
Die Trigger-Taste kann einen Titel, ein Symbol oder beides mit den Einstellungen Symbolabstand und Ausrichten anzeigen. Stylen Sie seine Farbe, Hintergrundfarbe und Randfarbe für Normal und Hover, plus Box Shadow, Typografie, SVG-Größe, Polsterung, Randtyp und Randradius. Im Inneren des Panels, der Kopfzeile Abschnitt stilisiert das Symbol schließen und den optionalen Header-Titel, und Reverse Header vertauscht ihre Plätze Die Container Abschnitt stellt den Panelhintergrund, die Umrandung, die Polsterung, die Overlay-Farbe sowie die Scrollbar-Farbe und -Breite ein.
- Eine nur für Symbole zugängliche Hamburger-Schaltfläche in einer Kopfzeile.
- Ein Text-Button “Kontaktieren Sie uns”, der ein Formular öffnet.
- Eine Marken-Overlay-Farbe, die die Seite hinter dem Panel dimmt.
Elementor Pro-Canvas- und Master-Addons außerhalb von Canvas
Am häufigsten wird ein Off-Canvas-Menü verwendet, dieses Widget baut das Menü nicht selbst auf, daher legt man zuerst ein Menü-Widget in eine Vorlage, wenn man nur das Menü benötigt, die Master-Addons Nav-menü Widget hat auch ein Hamburger-Layout mit einem Off-Canvas-Typ in Pro, der den Vorlagenschritt überspringt Verwenden Sie Off-Canvas-Inhalte, wenn das Panel mehr als ein Menü enthalten sollte, wie ein Logo, Kontaktdaten und soziale Links.
| Merkmal | Elementor Pro Off-Canvas | Master Addons Off-Canvas-Inhalte |
|---|---|---|
| Preis | Benötigt Elementor Pro | Benötigt Master Addons Pro |
| Panel-inhalt | Im Widget im Bearbeitungsmodus integriert | Eine gespeicherte Elementor-Vorlage, die Sie wiederverwenden können |
| Wie es sich öffnet | Jede Schaltfläche oder jeder Link, der die Off-Canvas-Aktion verwendet | Der Widget-eigene Trigger-Button |
| Position | Horizontaler und vertikaler Start, Mitte oder Ende | Rechts, Links, Oben, Unten, Mitte oder Relativ |
| Animation | Eingangs - und Ausgangsanimationen | Fade, Slide oder Grow, mit Abdeckung oder Push |
| Schließend | Overlay und Esc, jedes kann ausgeschaltet werden; kann das Blättern der Seite sperren | Symbol schließen, überlagern klicken oder Esc |
| Eingebauter Header | Nein | Kopftitel und Schließsymbol |
| Standardmäßig öffnen | Keine Widget-Einstellung | Ja |
Elementor Pro gewinnt, wenn ein beliebiger Link auf der Seite das Panel öffnen soll oder wenn Sie Beenden-Animationen wünschen Master Addons passt, wenn auf vielen Seiten eine Vorlage hinter einem vorgefertigten Button erscheinen soll Für ein Suchpanel sehen Sie sich auch die Suchen Widget.
So erstellen Sie ein Off-Canvas-Menü in Elementor
Am häufigsten wird ein Off-Canvas-Menü verwendet, das Widget erstellt das Menü nicht selbst, sodass Sie zuerst ein Menü-Widget in einer Vorlage platzieren.
- Erstellen Sie eine gespeicherte Vorlage und fügen Sie ein Menü-Widget hinzu, beispielsweise die kostenlosen Master-Add-ons Nav-menü Auf ein vertikales Layout eingestellt.
- Veröffentlichen Sie die Vorlage.
- Fügen Sie in Ihrem Header Off-Canvas-Inhalte hinzu und wählen Sie diese Vorlage aus.
- Stellen Sie die Position auf links oder rechts, die Breite auf etwa 320 px und die Eingangsanimation auf Folie ein.
- Schalten Sie Titel anzeigen aus, schalten Sie das Symbol anzeigen ein und wählen Sie ein Balkensymbol aus, damit die Schaltfläche wie ein Hamburger aussieht.
- Verwenden Sie die responsive Sichtbarkeit von Elementor, um diese Schaltfläche nur auf Tablet und Mobilgeräten anzuzeigen, wenn der Desktop-Header sein normales Menü beibehält.
Verwandte Widgets: Nav-menü Für das Menü im Panel ist die Mega-Menü Erweiterung für große Header-Menüs Popup-builder Für zeitgesteuerte oder austrittswillige Schichten Tabs Zum Wechseln von Inhalten an Ort und Stelle und Anzeigebedingungen Auslöser nur auf ausgewählten Seiten anzuzeigen.
Vollbildmenü in Elementor
Ein Vollbildmenü ist die mittlere Position mit der Breite auf 100 vw und der Höhe auf 100 vh. Legen Sie eine Vorlage mit einem großen vertikalen Menü darin, wählen Sie den Eingang Fade, damit die Ebene an Ort und Stelle erscheint, und geben Sie dem Behälter einen soliden Hintergrund, so dass nichts durchschaut Das Close-Symbol sitzt im Panel-Header, und die Esc-Taste schließt die Ebene ebenso.
Ein Detail aus dem Stylesheet: Panels sind auf 90% des Viewports verkappt, so dass ein 100-vw-mal-100-vh-Panel rundum einen Rand hinterlässt Fügen Sie diese Regel im benutzerdefinierten CSS der Seite hinzu, um die Kappe zu entfernen:
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
Das Schritt-für-Schritt mit Screenshots ist in So erstellen Sie ein Vollbildmenü in Elementor.
Ausrutschendes Seitenmenü (Seitenleistennavigation)
Bei einem Seitenmenü Position nach links oder rechts und die Breite in px, etwa 320 px für ein Menü und 400 px für ein Panel mit Kontaktdaten einstellen Wählen Sie Push, wann die Seite zur Seite gehen soll und bleibt lesbar, oder Cover, wenn das Panel oben sitzen soll Die Vorlage kann die Nav-menü Widget in seiner vertikalen Anordnung, ein Logo, ein paar Kontaktlinien und eine Schaltfläche.
Eine Sidebar, die ständig sichtbar bleibt, ist ein anderer Job Baue das mit einem zweispaltigen Containerlayout auf und behalte dieses Widget für das Panel, das auf Anfrage hineingleitet Die Elementor-Seitenmenüanleitung Bedeckt beides.
Beispiele für Off-Canvas-Panels
Öffnen Sie jede Demo unten, um zu sehen, wie sich das Panel bewegt: ein rechtes Kontaktpanel, ein linkes Menü, das die Seite hinüberschiebt, ein Dropdown-Panel, das die relative Position verwendet, eine Ansageleiste von der Oberkante, ein unteres Blatt mit Öffnung Stunden und ein Vollbildmenü, das aus der Mittelposition aufgebaut ist.
Häufig gestellte Fragen zu Inhalten außerhalb der Leinwand
Ist das Off-Canvas Content Widget kostenlos?
Nr. Off-Canvas-Inhalte sind Teil von Master Add-dons Pro. Das kostenlose Plugin enthält es nicht.
Wie füge ich Inhalte zum Off-Canvas-Panel hinzu?
Erstellen Sie den Inhalt zuerst als gespeicherte Elementor-Vorlage, z. B. als Menü, Formular oder Promo. Wählen Sie dann diese Vorlage im Dropdown für ausgewählte Vorlagen des Widgets aus. Sie können eine Vorlage in mehreren Panels wiederverwenden.
Soll ich ein Off-Canvas-Panel oder ein Popup verwenden?
Verwenden Sie ein Off-Canvas-Panel für die Navigation und für Inhalte, die ein Besucher durch Klicken anfordert, wie ein Menü, Filter oder Kontaktdaten Verwenden Sie ein Popup für zeitgesteuerte oder Exit-Intent-Nachrichten und für Formulare, die unterbrechen sollten. Beide Sperrseiten scrollen im geöffneten Zustand.
Wie ändere ich die Animationsgeschwindigkeit?
Animationsdauer im Reiter Inhalt einstellen Der Wert ist in Sekunden angegeben, mit 0,6 als Standard und einem Bereich von 0 bis 15. Niedrigere Werte öffnen das Panel schneller Die Einstellung gilt für jede Eingangsanimation und sowohl für Cover als auch für Push.
Warum öffnet sich mein Off-Canvas-Panel nicht?
Drei Dinge prüfen Vorlage auswählen muss auf eine veröffentlichte Vorlage zeigen, ansonsten druckt das Panel statt Inhalt einen Hinweis aus, Auslöser muss die eigene Schaltfläche des Widgets sein, denn kein anderes Element kann es öffnen Und Open by Default sollte ausgeschaltet sein, es sei denn, man möchte es auf Last öffnen.
Kann ich damit ein Off-Canvas-Menü aufbauen?
Ja. Legen Sie ein Menü-Widget wie die Master-Addons Nav-menü Wählen Sie es in einer gespeicherten Vorlage in Off-Canvas Content aus, setzen Sie Position nach links oder rechts und verwenden Sie ein Balkensymbol für die Schaltfläche Für ein Menü allein hat das Nav Menu Hamburger Layout in Pro einen eigenen Off-Canvas-Typ.
Verlangsamt der Panel-Inhalt meine Seite?
Die Vorlage wird beim Laden in die Seite gerendert, dann ausgeblendet, bis auf die Schaltfläche geklickt wird Ein Panel mit ein paar Widgets fügt wenig Gewicht hinzu, aber schwere Schieberegler oder Videos darin laden mit der Seite, also halten Sie Panelvorlagen leicht.
Kann ich das Panel über mein eigenes Header-Symbol öffnen?
Nein. Das Panel öffnet sich nur über die Schaltfläche, die das Widget rendert, sodass ein vorhandenes Symbol oder ein Menülink es nicht auslösen kann. Für ein Header-Menü, das über ein Hamburger-Symbol geöffnet wird, verwenden Sie stattdessen das Hamburger-Layout des Nav-Menüs mit dem Offcanvas-Typ.
Gibt es ein kostenloses Off-Canvas-Widget für Elementor?
Das kostenlose Plugin von Elementor hat keine Elementor Pro enthält ein Off-Canvas-Widget ab Version 3.22, wenn Flexbox Container und Nested Elements eingeschaltet sind Off-Canvas Content ist Teil von Master Addons Pro und öffnet jede gespeicherte Vorlage, was das Pro-Widget nicht tut.
Trendige Elementor-Widgets und -Erweiterungen
Erstellen Sie anspruchsvolle Websites in kürzerer Zeit.
Glasmorphie
Container-extras
Muster
![Master Addons Post/Page Duplicator-Erweiterung für Elementor: MA Duplicator Zeilenlink in der WordPress Pages-Liste, der eine Landing Page erstellt - [Duplicated #128] Entwurf](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post-/Seitenduplikator
