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.
So fügen Sie ein Off-Canvas-Panel in Elementor hinzu
Sie benötigen Elementor und einen aktiven Master Addons 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.
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.
- 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 Off-Canvas vs Master Addons Off-Canvas Content
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.
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 Addons 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.
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.
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
