Noget indhold tjener en plads på siden. Resten, en menu, en FAQ-liste, en kontaktformular, fungerer bedre gemt væk, indtil nogen beder om det. Den Off-Canvas Content widget i Master Addons Pro skjuler enhver Elementor-skabelon bag en knap og glider den ind fra siden, toppen eller bunden af skærmen, når besøgende klikker.
Du vælger en gemt skabelon, placerer udløserknappen og vælger, hvordan panelet kommer ind. Denne vejledning følger widgetten fra panelet Elementer til et fungerende ofte stillede spørgsmål om udskridning på live-siden.
Hvad Off-Canvas Content widget gør #
Widgetten placerer en udløserknap på din side og linker den til et skjult panel. Panelets indhold er enhver skabelon fra dit Elementor-bibliotek, så en mobilmenu, en mega FAQ, en vognoversigt eller en tilmeldingsformular fungerer alle på samme måde. Når en besøgende klikker på knappen, glider panelet eller falmer ind over siden med en dæmpet overlejring bagved og et tæt ikon i dens overskrift.
Alt sker i én widget: udløseren, panelet, animationen og stylingen. Ingen separat popup-plugin, ingen skabelon-shortcodes.
Før du starter #
- WordPress med Elementor installeret og aktiv.
- Master Addons Pro installeret med en aktiv licens, da Off-Canvas Content er en Pro-widget. Ny i plugin'et? Se den installationsvejledning.
- En gemt Elementor skabelon til at vise inde i panelet. Byg en under Skabeloner i dit dashboard først; demoen her bruger en færdiglavet FAQ sektion.
Sådan tilføjes Off-Canvas Content-widgetten #
I Elementor-editoren skal du søge i Elementer panel til Off-Canvas indhold, eller rul til afsnittet Mastertilføjelser, og træk det over på siden. En blå udløserknap mærket Klik Her vises på lærredet. Selve panelet forbliver skjult, indtil du vælger en skabelon og åbner den.
Vælg skabelonen og sæt panelet op #
The Content sektion indeholder kerneindstillingerne for panelet.
- Vælg Skabelon: den Elementorskabelon panelet viser. Enhver gemt sektion eller sideskabelon vises i denne dropdown.
- Overskrift Titel og titel: tænd panelhovedet og skriv dets etiket, såsom “Udforsk ofte stillede spørgsmål”. Luk ikonet bor i samme overskrift.
- Position: hvilken kant panelet kommer fra. Mere om dette nedenfor.
- Bredde: hvor bredt panelet er i px, % eller vw, 300px som standard. Paneler fra toppen eller bunden bruger en Højde kontrol i px, % eller vh i stedet.
- Entréanimation og indgangstype: hvordan panelet ankommer. Fade, Slide eller Grow for animationen, Cover eller Push for typen. Cover lægger panelet over siden; Push skubber siden til side for at gøre plads.
- Animationsvarighed: indgangshastigheden på sekunder, 0,6 som standard.
- Åbn som standard: start siden med panelet allerede åbent. Praktisk under design, da du kan style panelet uden at klikke på udløseren efter hver ændring.
Konfigurer udløserknappen #
The Button gruppe i samme fane styrer udløseren. Vis titel og Title indstil etiketten; demoen omdøber den fra Klik her til ofte stillede spørgsmål. Juster placerer knappen til venstre, i midten eller til højre i sin kolonne.
Vis ikon tilføjer et ikon ved siden af etiketten, og Vælg Ikon åbner Elementor ikonbiblioteket, så du kan vælge fra Font Awesome eller et hvilket som helst ikonsæt, du har installeret. Ikon Afstand indstiller afstanden mellem ikon og tekst.
Vælg, hvor panelet glider fra #
The Position dropdown tilbyder seks muligheder: Højre, venstre, øverst, nederst, mellem og relativ.
Højre og venstre er de klassiske skuffepaneler. Vælg en, og editoren forhåndsviser den med det samme: panelet glider ind med din skabelon indeni, overskrift øverst, luk ikon klar.
Top og Bottom bytter kontrolelementet Bredde ud med et Højde skyder målt i viewport højde. En top bar ved 30vh fungerer som en slank annonceringsskuffe.
Midten centrerer panelet som en modal. Relativ forankrer panelet til selve udløserknappen, med en Distance kontrol for mellemrummet, som gør widgetten til en afsløring i dropdown-stil. Én note fra selve panelet: kun Fade-animationen fungerer med den relative position.
Indstil bredde- og indgangsanimationen #
Tilbage på en sideposition udvider demoen panelet til 500 pixels og skifter Indgang Animation at glide med Indgangstype på Push. Med Push skifter sideindholdet over, når panelet kommer ind i stedet for at blive dækket. Hold varigheden omkring et halvt sekund; langsommere begynder at føles som at vente.
Style panelet #
The Style tab har tre sektioner: Button, Header, og Container.
Button #
Styles udløseren: baggrund, tekstfarve, typografi, kant og udfyldning, med Normal og Hover stater. Demoen gør standard blå til en mørk navy, der matcher siden.
Header #
Styles strimlen øverst på det åbne panel.
- Omvendt overskrift: bytter titel- og lukikonsiderne, så X'et bevæger sig fra højre mod venstre.
- Polstring: plads omkring headerindholdet.
- Luk ikon: farve, baggrund, kantfarve, skriftstørrelse, boks størrelse, og kant til X-knappen. Hold boks størrelse på 24 eller mere, hvis dit publikum er for det meste på telefoner; en 12 pixel tap mål er let at gå glip af.
Container #
Styles panelets krop og hvad der omgiver den.
- Baggrundsfarve, Border Color, Box Shadow, Border Type, Border Radius, Polstring: selve paneloverfladen.
- Overlay Baggrundsfarve: farvetonen over resten af siden, mens panelet er åbent. En mørk overlejring trækker fokus til panelet.
- Rullepanel: farve og bredde på rullepanelet til paneler, der er højere end skærmen.
Resultatet på siden #
På live-siden sidder knappen, hvor du placerede den. Et klik glider panelet ind fra den valgte kant, dæmper siden bagved og viser din skabelon med overskriften og lukkeikonet øverst. Besøgende lukker den med X'et, ved at klikke på overlejringen eller ved at trykke på Esc.
Almindelige brugstilfælde #
- Mobile og sekundære menuer det glider ind fra siden uden at trænge overskriften.
- FAQ og hjælpepaneler ligesom demoen, holde svar et klik væk på destinationssider.
- Kontakt- eller tilbudsformularer der åbner over siden i stedet for at bo på en separat.
- Vogn- og kontoskuffer på shopsider, ved hjælp af en indkøbskurv eller konto widget fra WooCommerce eller et andet plugin.
- Annonceringsbjælker fra øverste kant ved hjælp af Top position med en lille højde.
Tips til et bedre off-canvas panel #
- Byg skabelonen først. Widgetten viser kun gemte skabeloner, så design panelindholdet under Skabeloner, før du trækker widgetten ind.
- Match bredde til indholdet. 300 pixels passer til en menu; formularer og FAQ-lister trækker vejret bedre omkring 450 til 500.
- Brug Push sparsomt. Det ser slående ud, men at skifte hele siden kan føles springende på langt indhold. Cover med en mørk overlay er den roligere standard.
- Husk den Relative regel. Kun Fade-animationen virker, når Position er indstillet til Relativ.
- Tjek panelet på mobil. Et panel på 500 pixel er bredere end mange telefoner; indstil en mindre bredde for det mobile breakpoint med den responsive kontrol.
Ofte stillede spørgsmål #
Hvad er Off-Canvas Content widget i Master Addons?
Det er en Elementor-widget, der skjuler en gemt skabelon bag en udløserknap og glider den ind som et panel, når der klikkes på den. Den håndterer knappen, panelpositionen, indgangsanimationen, overlejringen og luk-ikonet i én widget.
Kan jeg vise nogen Elementor skabelon i panelet?
Ja. Rullemenuen Vælg skabelon viser hver gemt skabelon i dit Elementor-bibliotek. Menuer, FAQ-sektioner, formularer og fulde brugerdefinerede layout indlæses alle inde i panelet nøjagtigt som designet.
Hvilke retninger kan panelet åbne fra?
Seks positioner er tilgængelige: Højre, Venstre, Top, Bund, Midterste og Relativ. Sidepaneler bruger en Bredde, top- og bundpaneler bruger en viewport Højde, og Relativ forankrer panelet til udløserknappen med en Afstandskontrol.
Hvad er forskellen mellem Cover og Push?
Cover glider panelet hen over siden, mens en overlejring dæmper baggrunden. Skub flytter sideindholdet til side for at gøre plads til panelet. Cover er den sikrere standard; Skub er mere dramatisk, men skifter hele layoutet.
Kan panelet uden for lærredet åbnes automatisk?
Ja. Tænd for Åbn som standard i indstillingerne for Indhold, og panelet begynder at åbne, når siden indlæses. Besøgende kan lukke den med tæt-ikonet ved at klikke på overlejringen eller med Esc-tasten, og genåbne den med udløserknappen.
Indpakning #
Widgetten Off-Canvas Content forvandler enhver gemt skabelon til et slide-out panel: Vælg skabelonen, placer udløserknappen, vælg kanten og animationen, og style alt fra knappen til rullepanelet. Den parrer naturligt med Nav Menu widget til mobil navigation og med formular widgets til klik-til-kontakt paneler. Gennemse det fulde sæt af Master Addons widgets og udvidelser for at se, hvad der ellers sendes i kassen, se Off-Canvas Content widget side for demoer og en sammenligning med Elementor Pro Off-Canvas widget, og tjek prissætning side til Pro planer.
