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.
Free Elementor har ingen off-canvas widget. Elementor Pro tilføjede en i version 3.22, og det har brug for Flexbox Containers og Nested Elements funktioner slået til. Denne widget er Master Addons Pro mulighed: den åbner enhver gemt skabelon, fra enhver side, bag en knap, du styler en gang.
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.
- på 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.
Off-Canvas indhold på et øjeblik
| Indstilling | Hvad det gør |
|---|---|
| Indholdskilde | En gemt Elementor-skabelon: side, sektion eller beholder (rullemenuen viser alle bibliotekselementer undtagen sæt) |
| Positioner | Højre, Venstre, Top, Bund, Midten, Relativ (en dropdown under knappen) |
| Indgangsanimation | Fade, Slide eller Grow; Relative understøtter kun Fade |
| Indgangstype | Cover glider panelet over siden; Push flytter siden henover. Push tilbydes for Top, Venstre og Højre |
| Størrelse | Bredde i px, % eller vw for venstre, højre, mellem og relativ; Højde i px, % eller vh for top, bund, mellem og relativ; begge pr. enhed |
| Lukker med | Luk ikonet, et klik på overlejringen eller Esc-tasten; Enter eller Space på det fokuserede luk-ikon virker også |
| Ekstra | Åbn som standard, Animationsvarighed på få sekunder, overskriftstitel med Omvendt overskrift, siderullelås, mens den er åben, en stilbar udløserknap med tekst, ikon eller begge dele |
| Åbner fra | Widgettens egen knap kun (ingen CSS-vælger eller ekstern trigger) |
| Behov | Elementor (gratis eller Pro) plus Master Addons Pro |
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.
Cover og Push er de to Entrance Typer. Med Cover panelet glider over siden og overlay dæmper hvad der er bag det. Med Push hele siden bevæger sig på tværs af bredden af panelet, så indholdet forbliver synlig ved siden af menuen. Push er tilgængelig for Top, Venstre og Højre paneler; Bund, Midten og Relativ altid dække.
- 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 overskrift 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 Indhold
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.
| særpræ | Elementor Pro off-canvas | Master Addons Off-Canvas indhold |
|---|---|---|
| værdi | 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 |
| livlighed | 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 | ingen | 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å ransage 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.
Relaterede widgets: nav menu for menuen inde i panelet, den Mega Menu udvidelse til store header menuer, Popup Builder for tidsindstillede eller exit-intent lag, Faner til at skifte indhold på plads, og Visningsbetingelser for kun at vise udløseren på valgte sider.
Fuldskærmsmenu i Elementor
En fuldskærmsmenu er Mellempositionen med Bredden sat til 100vw og Højden til 100vh. Sæt en skabelon med en stor lodret menu indeni, vælg Fade-indgangen, så laget vises på plads, og giv beholderen en solid baggrund, så intet viser sig igennem. Luk-ikonet sidder i paneloverskriften, og Esc-tasten lukker også laget.
En detalje fra stylesheet: paneler er begrænset til 90% af viewporten, så et 100vw af 100vh panel efterlader en margen hele vejen rundt. Tilføj denne regel i sidens Brugerdefinerede CSS for at fjerne hætten:
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
Trin-for-trin med skærmbilleder er inde sådan opbygges en fuldskærmsmenu i Elementor.
Slide-out sidemenu (sidebar navigation)
For en sidemenu skal du indstille Position til venstre eller højre og Bredden i px, omkring 320 px for en menu og 400 px for et panel med kontaktoplysninger. Vælg Skub, når siden skal flytte til side og forblive læsbar, eller Dæk, når panelet skal sidde på toppen. Skabelonen kan holde nav menu widget i sit lodrette layout, et logo, et par kontaktlinjer og en knap.
En sidebjælke, der forbliver synlig hele tiden, er et andet job. Byg det med et to-søjlet containerlayout, og behold denne widget til panelet, der glider ind efter anmodning. Den Elementor sidemenu guide dækker begge.
Off-canvas panel eksempler
Åbn hver demo nedenfor for at se panelet flytte: et højre kontaktpanel, en venstre menu, der skubber siden på tværs, et dropdown panel, der bruger den relative position, en meddelelseslinje fra den øverste kant, et nederste ark med åbningstider og en fuldskærmsmenu bygget fra midterpositionen.
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.
Skal jeg bruge et off-canvas panel eller en popup?
Brug et off-canvas panel til navigation og til indhold, som en besøgende beder om ved at klikke på, såsom en menu, filtre eller kontaktoplysninger. Brug en popup til tidsindstillede eller exit-intent meddelelser og til formularer, der skal afbryde. Begge lås side ruller, mens de er åbne.
Hvordan ændrer jeg animationshastigheden?
Indstil animationsvarighed i fanen Indhold. Værdien er i sekunder, med 0,6 som standard og et interval fra 0 til 15. Lavere værdier åbner panelet hurtigere. Indstillingen gælder for hver indgangsanimation og for både Cover og Push.
Hvorfor åbner mit off-canvas panel ikke?
Kontroller tre ting. Vælg Skabelon skal pege på en udgivet skabelon, ellers udskriver panelet en meddelelse i stedet for indhold. Udløseren skal være widgetens egen knap, fordi intet andet element kan åbne den. Og Åbn efter standard skal være slukket, medmindre du vil have den åben ved belastning.
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.
Kan jeg åbne panelet fra mit eget headerikon?
Nej. Panelet åbnes kun fra den knap, widgetten gengiver, så et eksisterende ikon eller menulink kan ikke udløse det. For en overskriftsmenu, der åbnes fra et hamburgerikon, skal du i stedet bruge Nav Menu-widgettens Hamburger-layout med Offcanvas-typen.
Er der en gratis off-canvas widget til Elementor?
Elementors gratis plugin har ingen. Elementor Pro indeholder en Off-Canvas widget fra version 3.22, når Flexbox Containers og Nested Elements er tændt. Off-Canvas Content er en del af Master Addons Pro og åbner enhver gemt skabelon, hvilket Pro-widgetten ikke gør.
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/sideduplikator
