Manche Inhalte verdienen sich einen Platz auf der Seite Der Rest, ein Menü, eine FAQ-Liste, ein Kontaktformular, funktioniert besser versteckt, bis jemand danach fragt Die Off-Canvas-Inhalts-Widget In Master Addons Pro Versteckt jede Elementorvorlage hinter einer Schaltfläche und schiebt sie von der Seite, oben oder unten auf dem Bildschirm hinein, wenn Besucher klicken.
Sie wählen eine gespeicherte Vorlage aus, platzieren die Trigger-Taste und wählen aus, wie das Panel eintritt. Diese Anleitung folgt dem Widget aus dem Elements-Panel zu einem funktionierenden Slide-out-FAQ-Panel auf der Live-Seite.
Was das Off-Canvas Content Widget bewirkt #
Das Widget platziert einen Trigger-Button auf Ihrer Seite und verknüpft ihn mit einem versteckten Panel Der Inhalt des Panels ist eine beliebige Vorlage aus Ihrer Elementor-Bibliothek, daher funktionieren ein mobiles Menü, eine Mega-FAQ, eine Warenkorbzusammenfassung oder ein Anmeldeformular alle auf die gleiche Weise Wenn ein Besucher auf den Button klickt, gleitet oder blendet das Panel über die Seite mit einem gedimmten Overlay dahinter und einem Close-Symbol in der Kopfzeile.
Alles geschieht in einem Widget: dem Trigger, dem Panel, der Animation, und dem Styling Kein separates Popup-Plugin, keine Template-Shortcodes.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master Addons Pro Mit aktiver Lizenz installiert, da Off-Canvas Content ein Pro Widget ist Neu im Plugin? siehe die Installationsführung.
- Eine gespeicherte Elementor-Vorlage, die im Panel angezeigt werden soll. Erstellen Sie zuerst eine unter Vorlagen in Ihrem Dashboard; Die Demo hier verwendet einen vorgefertigten FAQ-Bereich.
So fügen Sie das Off-Canvas Content Widget hinzu #
Suchen Sie im Elementor-Editor nach Elemente Panel für Off-Canvas-Inhalt, oder scrollen Sie zum Abschnitt Master Addons, und ziehen Sie ihn auf die Seite Ein blauer Trigger-Button mit der Bezeichnung Klicken Sie hier erscheint auf der Leinwand Das Panel selbst bleibt verborgen, bis Sie eine Vorlage auswählen und öffnen.
Wählen Sie die Vorlage aus und richten Sie das Panel ein #
Die Inhalt Abschnitt enthält die Kerneinstellungen für das Panel.
- Wählen Sie Vorlage: Die Elementor-Vorlage zeigt das Panel In diesem Dropdown wird jede gespeicherte Abschnitt - oder Seitenvorlage angezeigt.
- Titel und Titel der Überschrift: Schalten Sie den Panel-Header ein und geben Sie dessen Beschriftung ein, wie z.B. “FAQ erkunden” Das Symbol schließen lebt im selben Header.
- Position: Von welcher Kante das Panel stammt Mehr dazu weiter unten.
- Breite: Wie breit das Panel standardmäßig in px, % oder vw, 300 px ist Panels von oben oder unten verwenden eine Höhe Kontrolle stattdessen in px, % oder vh.
- Eingangsanimation und Eingangstyp: Wie das Panel ankommt Fade, Slide oder Grow für die Animation, Cover oder Push für den Typ Cover legt das Panel über die Seite; Push schiebt die Seite beiseite, um Platz zu schaffen.
- Animationsdauer: Die Eintrittsgeschwindigkeit in Sekunden, standardmäßig 0,6.
- Standardmäßig geöffnet: Seite mit bereits geöffnetem Panel starten Handlich beim Entwerfen, da man das Panel nach jeder Änderung ohne Klick auf den Auslöser stylen kann.
Konfigurieren Sie die Trigger-Taste #
Die Knopf Gruppe im selben Tab den Auslöser steuert. Titel anzeigen und Titel Label setzen; die Demo benennt es von Click Here in Frequently Asked Question um. Ausrichten Platziert die Schaltfläche links, in der Mitte oder rechts in ihrer Spalte.
Symbol anzeigen Fügt neben dem Etikett ein Symbol hinzu und Symbol auswählen Öffnet die Elementor-Symbolbibliothek, damit Sie aus Font Awesome oder einem beliebigen von Ihnen installierten Symbolsatz auswählen können. Symbolabstand Legt die Lücke zwischen Symbol und Text fest.
Wählen Sie aus, woher das Panel gleitet #
Die Position Dropdown bietet sechs Möglichkeiten: Rechts, Links, Oben, Unten, Mitte und Relativ.
Rechts und Links sind die klassischen Schubladenfelder Wählen Sie eine aus und der Editor gibt sofort eine Vorschau: Das Panel gleitet mit Ihrer Vorlage hinein, Kopf oben, Symbol schließen bereit.
Oben und unten tauschen den Breitenregler gegen a Höhe Schieber in Sichtfensterhöhe gemessen Eine obere Leiste bei 30 vh funktioniert wie eine schlanke Ansageschublade.
Mitte zentriert das Panel wie ein Modal Relativ verankert das Panel am Auslöseknopf selbst, mit einem Entfernung Kontrolle für die Lücke, die das Widget in eine Enthüllung im Dropdown-Stil verwandelt Eine Anmerkung aus dem Panel selbst: nur die Fade-Animation funktioniert mit der Relativposition.
Legen Sie die Breite und Eingangsanimation fest #
Zurück auf einer Seitenposition erweitert die Demo das Panel auf 500 Pixel und schaltet das Eingangsanimation Mit dem rutschen Eingangstyp Auf Push. bei Push verschiebt sich der Seiteninhalt beim Betreten des Panels um, anstatt abgedeckt zu sein Halte die Dauer etwa eine halbe Sekunde; langsamer fängt an zu warten.
Stil das Panel #
Die Stil Tab hat drei Abschnitte: Knopf, Kopfzeile, und Container.
Knopf #
Stilt den Auslöser: Hintergrund, Textfarbe, Typografie, Rand und Auffüllung, mit Normal - und Hover-Zuständen Die Demo verwandelt das Standardblau in eine dunkle Marine, die zur Seite passt.
Kopfzeile #
Stilt den Streifen oben auf der offenen Platte.
- Reverse Header: Vertauscht den Titel und schließt Symbolseiten, sodass sich das X von rechts nach links bewegt.
- Polsterung: Leerzeichen um den Header-Inhalt.
- Symbol schließen: Farbe, Hintergrund, Randfarbe, Schriftgröße, Boxgröße und Rand für die X-Taste Halten Sie die Boxgröße bei 24 oder mehr, wenn Ihre Zielgruppe hauptsächlich auf Telefonen ist; Ein 12-Pixel-Tap-Ziel ist leicht zu übersehen.
Container #
Stilt den Plattenkörper und das, was ihn umgibt.
- Hintergrundfarbe, Randfarbe, Kastenschatten, Randtyp, Randradius, Polsterung: Die Paneeloberfläche selbst.
- Overlay-Hintergrundfarbe: Die Tönung über den Rest der Seite, während das Panel geöffnet ist Eine dunkle Überlagerung lenkt den Fokus auf das Panel.
- Bildlaufleiste: Farbe und Breite der Bildlaufleiste für Platten, die höher als der Bildschirm sind.
Das Ergebnis auf der Seite #
Auf der Live-Seite sitzt der Button da, wo Sie ihn platziert haben Ein Klick schiebt das Panel vom gewählten Rand her hinein, dimmt die Seite dahinter, zeigt Ihre Vorlage mit dem Header und dem oben liegenden Schließsymbol an Besucher schließen es mit dem X, indem sie auf das Overlay klicken oder indem sie Esc drücken.
Häufige Anwendungsfälle #
- Mobile und sekundäre Menüs Das von der Seite hineinrutscht, ohne den Kopf zu verdrängen.
- FAQ und Hilfspaneele Wie bei der Demo, wenn Sie die Antworten einen Klick von den Zielseiten entfernt halten.
- Kontakt - oder Angebotsformulare Die über die Seite öffnen, anstatt auf einer separaten zu leben.
- Warenkorb - und Kontoschubladen Auf Shopseiten, mit einem Warenkorb - oder Konto-Widget von WooCommerce oder einem anderen Plugin.
- Ankündigungsbalken Von der Oberkante aus mit der oberen Position mit kleiner Höhe.
Tipps für ein besseres Off-Canvas-Panel #
- Erstellen Sie zuerst die Vorlage. Das Widget listet nur gespeicherte Vorlagen auf, also entwerfen Sie den Panel-Inhalt unter Vorlagen, bevor Sie das Widget hineinziehen.
- Breite dem Inhalt zuordnen. 300 Pixel passen zu einem Menü; Formulare und FAQ-Listen atmen besser um 450 bis 500.
- Sparsam mit Push umgehen. Es sieht auffällig aus, aber das Verschieben der ganzen Seite kann sich bei langen Inhalten sprunghaft anfühlen. Das Cover mit einem dunklen Overlay ist die ruhigere Voreinstellung.
- Denken Sie an die Relativregel. Nur die Fade-Animation funktioniert, wenn Position auf Relativ gesetzt ist.
- Überprüfen Sie das Panel auf Mobilgeräten. Ein 500-Pixel-Panel ist breiter als viele Telefone; Legen Sie mit der responsiven Steuerung eine kleinere Breite für den mobilen Haltepunkt fest.
Häufig gestellte Fragen #
Was ist das Off-Canvas Content Widget in Master Addons?
Es handelt sich um ein Elementor-Widget, das eine gespeicherte Vorlage hinter einer Trigger-Taste verbirgt und beim Anklicken als Panel hineinschiebt, es behandelt die Schaltfläche, die Panel-Position, die Eingangsanimation, das Overlay, und das Schließ-Symbol in einem Widget.
Kann ich eine Elementor-Vorlage im Panel anzeigen?
Ja. Im Dropdown-Format für ausgewählte Vorlagen wird jede gespeicherte Vorlage in Ihrer Elementor-Bibliothek aufgeführt. Menüs, FAQ-Abschnitte, Formulare und vollständige benutzerdefinierte Layouts werden alle genau wie geplant innerhalb des Panels geladen.
Aus welchen Richtungen kann das Panel geöffnet werden?
Es stehen sechs Positionen zur Verfügung: Rechts, Links, Oben, Unten, Mitte und Relativ. Seitenteile verwenden eine Breite, Ober- und Unterteile verwenden eine Ansichtsfensterhöhe und Relativ verankert das Feld mit einer Distanzsteuerung am Auslöseknopf.
Was ist der Unterschied zwischen Cover und Push?
Cover schiebt das Panel über die Seite, während ein Overlay den Hintergrund dimmt Push schiebt den Seiteninhalt beiseite, um Platz für das Panel zu schaffen Cover ist die sicherere Voreinstellung; Push ist dramatischer, verschiebt aber das gesamte Layout.
Kann sich das Off-Canvas-Panel automatisch öffnen?
Ja. Schalten Sie in den Inhaltseinstellungen auf Standard öffnen ein und das Panel startet beim Laden der Seite geöffnet Besucher können es mit dem Symbol schließen, indem sie auf das Overlay oder mit der Esc-Taste klicken, und mit der Trigger-Taste wieder öffnen.
Einwickelnd #
Das Off-Canvas Content Widget verwandelt jede gespeicherte Vorlage in ein Slide-Out-Panel: Wählen Sie die Vorlage aus, platzieren Sie die Trigger-Taste, wählen Sie den Rand und die Animation und stylen Sie alles von der Taste bis zur Bildlaufleiste Es passt sich auf natürliche Weise mit der an Nav-menü Widget für die mobile Navigation und mit Formular-Widgets für Click-to-Contact-Panels Durchsuchen Sie den kompletten Satz von Master Addons Widgets und Erweiterungen Um zu sehen, was sonst noch in der Box versendet wird, siehe die Off-Canvas-Inhalts-Widget-Seite Für Demos und einen Vergleich mit dem Elementor Pro Off-Canvas-Widget, und überprüfen Sie die Preisseite für Pro-Pläne.
