ElementsKit kommer med Header Off-Canvas-menyn som lÄter dig skapa en WordPress off-canvas-meny i Elementor med det högsta antalet anpassningsbara alternativ.
För att skapa en Elementor off-canvas-meny, aktivera Header Off-Canvas-widget >> dra och slÀpp widgeten i designomrÄdet >> redigera off-canvas innehÄll >> anpassa stilarna.
LÀs den hÀr dokumentationen för att lÀra dig mer om hur du skapar en Elementor off-canvas-meny med ElementsKit.
Hur man skapar en WordPress off-canvas-meny i Elementor #
You can create an Elementor Off-Canvas menu using ElementsKit Header Off-Canvas widget. You will need the following plugins installed on your WordPress site.
NödvÀndiga plugins:
- Elementor: Ladda ner plugin
- ElementsKit Lite: Ladda ner plugin
- ElementsKit Pro: HĂ€mta plugin
Steg 1: Aktivera widgeten Header Off-Canvas #
För att anvÀnda Header Off-canvas-widgeten mÄste du först aktivera den. För att aktivera widgeten, Logga in pÄ din WordPress-webbplats och,
- Navigera till ElementsKit > Widgets.
- Hitta Header Off-Canvas och aktivera widgeten.
- Klicka pĂ„ SPARA ĂNDRINGAR knappen i det övre högra hörnet.

Steg 2: Konfigurera widgeten #
Ăppna nu Elementor-editorn dra och slĂ€pp Header Off-Canvas-widgeten till designomrĂ„det.
I den InnehÄll fliken kan du
- Ăndra ĂverlĂ€ggsfĂ€rg.
- UppsÀttning StÀng ikon av off-canvas-innehÄll.
- VĂ€lja Hamburgermenytyp.

Det finns tre alternativ tillgÀngliga med Hamburger Menu.
Hamburgermenytyp: Ikon
StÀll in menytypen pÄ "Icon" och vÀlj ikonen frÄn biblioteket.
Hamburgermenytyp: Text
StÀll in menytypen pÄ "Text" och skriv in en text.


Hamburgermenytyp: Ikon med text
StÀll in menytypen pÄ "Ikon med text". I det hÀr fallet kan du vÀlja en ikon, stiga pÄ text, och stÀll in Ikon Position till före eller efter texten.

Steg 3: Redigera off-canvas-innehÄll #
Du kan redigera WordPress off-canvas menyinnehÄll med hjÀlp av Header Off-Canvas-widgeten.
- Aktivera Hamburger-ikonen.
- Klicka pÄ Redigera innehÄll pÄ off-canvas.
- I widgetomrÄdet designar du sedan innehÄllet för off-canvas med hjÀlp av Elementor-widgets eller fÀrdiga mallar.
- Klicka pÄ Uppdatering knappen och stÀng fönstret Widget Area.
Om innehÄllet inte visas pÄ off-canvas, ladda om sidan och kontrollera igen.

Steg 4: Anpassa stilarna #
Under stilfliken, anpassa off-canvas-menyn och innehÄllsstilar.
4.1 Off-Canvas #
I avsnittet Off-Canvas anpassar du Hamburgare knapp och StÀng ikon.
För Hamburger-knappen:
- VÀlj en FÀrg för menyikonen och texten.
- StÀll in a BakgrundsfÀrg för ikonen och texten.
- I form av SvÀva stilar, vÀlj en fÀrg, bakgrundsfÀrg och kantfÀrg.
- Justera Ikon storlek. (Detta alternativ visas om du stÀller in menytyp pÄ "Ikon" eller "Ikon med text".)
- StÀll in Texttypografi. (Detta alternativ visas om du stÀller in menytyp pÄ "Text" eller "Ikon med text".)

- VÀlj en Kanttyp för Hamburger-knappen.
- StÀll in Bredd av grÀnsen.
- VĂ€lj en kantlinje FĂ€rg.
- StÀll in Inriktning av knappen till vÀnster eller höger eller mitten.
- LĂ€gg till Box Shadow.
- Justera GrÀnsradie, Stoppning, och Marginal.

För StÀng ikon av innehÄllsfönstret utanför arbetsytan:
Aktivera off-canvas för att se de visuella förÀndringarna av StÀng-ikonen.
- VĂ€lj en ikon FĂ€rg.
- StÀll in a BakgrundsfÀrg för stÀngningsikonen.
- I form av SvÀva stilar, vÀlj en fÀrg, bakgrundsfÀrg och kantfÀrg.
- Justera Ikon storlek.
- Justera ikonen Boxstorlek.

- VÀlj en Kanttyp för stÀngningsikonen.
- StÀll in Bredd av grÀnsen.
- VĂ€lj en kantlinje FĂ€rg.
- LĂ€gg till Box Shadow.
- Justera GrÀnsradie, Stoppning, och Marginal.

4.2 Off-Canvas Panel #
Anpassa innehÄllsomrÄdet utanför arbetsytan under avsnittet Off-Canvas Panel.
- Justera Bredd av off-canvas-panelen.
- VÀlj den Bakgrundstyp och sÀtt en bakgrund FÀrg.
- Du kan ocksÄ anvÀnda en Bild som bakgrund.
- StÀll in Placera pÄ panelen Off-canvas till vÀnster eller höger pÄ skÀrmen.
- Justera stoppningen pÄ off-canvas-panelen.

Slutligen kan du lÀgga till WordPress off-canvas-menyn i Elementor.
Liksom Header Off-canvas-widgeten kommer ElementsKit med hundratals avancerade element för Elementor. Skaffa ElementsKit och anvÀnd dessa element för att bygga WordPress-webbplatser med fulla funktioner.
Get ElementsKit Plugin đ
