Elementor Off-Canvas Widget til Slide-Out paneler og menuer (Pro)
Off-Canvas Content er en Master Addons Pro-widget, der placerer en knap på siden og åbner et panel, når en besøgende klikker på den. Panelet viser en gemt Elementor-skabelon, så du kan sætte en menu, en kontaktformular, filtre eller en promo inde i den og genbruge den samme skabelon på andre sider. Vælg, hvor panelet vises, hvordan det animerer, og hvordan knappen ser ud. Besøgende lukker den med tæt-ikonet, ved at klikke på overlejringen eller ved at trykke på Esc.
Sådan tilføjes et panel uden for lærred i Elementor
Du har brug for Elementor og en aktiv Master Addons Pro licens.
- Gå til Skabeloner, Gemte skabeloner, oprette en skabelon, opbygge panelindholdet og udgive det.
- Rediger siden, søg efter Off-Canvas indhold og træk den derhen, hvor knappen skal vises.
- In Vælg Skabelon, vælge den skabelon, du har gemt.
- Vælg en Position og indstil Bredde eller Højde.
- Vælg en indgangsanimation og varighed.
- Indstil knappen Titel eller ikon, og stil derefter knappen, overskriften og beholderen på fanen Stil.
Se den Indstillinger for indhold uden for lærred guide til enhver mulighed.
Panelets position, størrelse og animation
Position tilbyder Højre, Venstre, Top, Bund, Midterste og Relativ. Venstre, Højre og Midterste paneler får en Bredde i px, % eller vw, og Top, Bund og Midterste paneler får en Højde i px, % eller vh, hver justerbar pr. enhed. Indgang Animation er Fade, Slide eller Grow, og kun Fade arbejder med Relative. Venstre, Højre og Top paneler har også en Indgangstype af Cover eller Push. Indstil den Animation Varighed på få sekunder, og tænd Åbn som standard hvis panelet skal begynde at åbne.
- Et venstre eller højre panel med din webstedsmenu til mindre skærme.
- Et toppanel til en kort annoncering eller søgeformular.
- Et midterpanel som en simpel modal til en tilmeldingsformular.
Udløserknap, Header og Container Styling
Udløserknappen kan vise en Titel, et ikon eller begge dele, med Ikonafstand og Juster indstillinger. Style dens Farve, Baggrundsfarve og Kantfarve for Normal og Hover, plus Kasseskygge, Typografi, SVG Størrelse, Polstring, Kanttype og Kantradius. Inde i panelet, den Header sektion styler tæt-ikonet og den valgfri overskriftstitel, og Omvendt overskrift bytter deres pladser. Den Container sektion indstiller panelets baggrund, kant, polstring, overlejringsfarve og rullebjælkens farve og bredde.
- En hamburgerknap, der kun er ikon, i en overskrift.
- En “Kontakt os” tekstknap, der åbner en formular.
- En mærket overlejringsfarve, der dæmper siden bag panelet.
Elementor Pro Off-Canvas vs Master Addons Off-Canvas Content
En off-canvas menu er den mest almindelige brug. Denne widget bygger ikke selve menuen, så du placerer en menu widget i en skabelon først. Hvis du kun har brug for menuen, Master Addons Nav Menu widget har også et Hamburger layout med en off-canvas type i Pro, som springer skabelon trinnet over. Brug Off-Canvas Content når panelet skal holde mere end en menu, såsom et logo, kontaktoplysninger og sociale links.
| Feature | Elementor Pro Off-Canvas | Master Addons Off-Canvas indhold |
|---|---|---|
| Price | Behov Elementor Pro | Behov Master Addons Pro |
| Panelindhold | Bygget inde i widgetten i Redigeringstilstand | En gemt Elementor-skabelon, du kan genbruge |
| Hvordan det åbner | Enhver knap eller link ved hjælp af Off-Canvas-handlingen | Widgettens egen udløserknap |
| Position | Vandret og lodret Start, Center eller Slut | Højre, Venstre, Top, Bund, Mellem eller Relativ |
| Animation | Ind- og udgangsanimationer | Fade, glide eller vokse, med dækning eller skub |
| Lukning | Overlay og Esc, hver kan slås fra; kan låse siderulning | Luk ikon, overlejringsklik eller Esc |
| Indbygget header | No | Overskriftstitel og luk ikon |
| Åbn som standard | Ikke en widget-indstilling | Ja |
Elementor Pro vinder, når et link på siden skal åbne panelet, eller når du vil have exit-animationer. Master Addons passer, når en skabelon skal vises bag en færdiglavet knap på mange sider. For et søgepanel, se også Search widget.
Sådan opbygger du en Off-Canvas Menu i Elementor
En off-canvas menu er den mest almindelige brug. Widgetten bygger ikke selve menuen, så du placerer en menu widget i en skabelon først.
- Opret en gemt skabelon og tilføj en menu widget, såsom de gratis Master Addons Nav Menu indstil til et lodret layout.
- Udgiv skabelonen.
- Tilføj Off-Canvas-indhold i din overskrift, og vælg den skabelon.
- Indstil position til venstre eller højre, bredde til omkring 320px og indgangsanimation til at glide.
- Sluk Vis titel, tænd Vis ikon og vælg et søjleikon, så knappen ligner en hamburger.
- Brug Elementors responsive synlighed til kun at vise denne knap på tablet og mobil, hvis skrivebordsheaderen holder sin normale menu.
Ofte stillede spørgsmål til indhold uden for lærredet
Er Off-Canvas Content widget gratis?
Nej. Off-Canvas Content er en del af Master Addons Pro. Det gratis plugin inkluderer det ikke.
Hvordan tilføjer jeg indhold til panelet uden for lærredet?
Byg indholdet som en gemt Elementor skabelon først, såsom en menu, formular eller promo. Vælg derefter den skabelon i widgets Vælg skabelon dropdown. Du kan genbruge en skabelon i flere paneler.
Kan jeg bygge en off-canvas menu med det?
Ja. Sæt en menu widget såsom Master Addons Nav Menu i en gemt skabelon skal du vælge den i Off-Canvas Content, indstille Position til venstre eller højre og bruge et søjleikon til knappen. For en menu alene har Nav Menu Hamburger layoutet i Pro sin egen off-canvas type.
Sænker panelindholdet min side?
Skabelonen gengives på siden, når den indlæses, og skjules derefter, indtil der klikkes på knappen. Et panel med et par widgets tilføjer lidt vægt, men tunge skydere eller videoer inde i den indlæses med siden, så hold panelskabeloner lette.
Trending Elementor Widgets & Udvidelser
Byg sofistikerede websteder på kortere tid.
Glasmorfisme
Container ekstraudstyr
Mønstre
![Master Addons Post/Page Duplicator udvidelse til Elementor: MA Duplicator række link i WordPress Pages liste oprettelse af en Landing Page - [Duplikeret # 128] udkast](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
