Rubrik Off-canvas

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 #

NödvÀndiga plugins:

  1. Elementor: Ladda ner plugin
  2. ElementsKit Lite: Ladda ner plugin
  3. 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,

  1. Navigera till ElementsKit > Widgets.
  2. Hitta Header Off-Canvas och aktivera widgeten.
  3. Klicka pĂ„ SPARA ÄNDRINGAR knappen i det övre högra hörnet.
Aktivera ElementsKit header off canvas-widget

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 

  1. Ändra ÖverlĂ€ggsfĂ€rg.
  2. UppsÀttning StÀng ikon av off-canvas-innehÄll.
  3. VĂ€lja Hamburgermenytyp.
dra och slÀpp rubriken frÄn dukens widget till Elementor-redigeraren

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.

vÀlj en ikon för WordPress off-canvas menyknapp i Elementor
Menytyp: Ikon
stÀll in text för WordPress off-canvas menyknapp i Elementor
Menytyp: 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.

vÀlj ikon med text för WordPress off canvas menyknapp
Mneu

Steg 3: Redigera off-canvas-innehÄll #

Du kan redigera WordPress off-canvas menyinnehÄll med hjÀlp av Header Off-Canvas-widgeten.

  1. Aktivera Hamburger-ikonen.
  2. Klicka pÄ Redigera innehÄll pÄ off-canvas.
  3. I widgetomrÄdet designar du sedan innehÄllet för off-canvas med hjÀlp av Elementor-widgets eller fÀrdiga mallar.
  4. 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:

  1. VÀlj en FÀrg för menyikonen och texten.
  2. StÀll in a BakgrundsfÀrg för ikonen och texten.
  3. I form av SvÀva stilar, vÀlj en fÀrg, bakgrundsfÀrg och kantfÀrg.
  4. Justera Ikon storlek. (Detta alternativ visas om du stÀller in menytyp pÄ "Ikon" eller "Ikon med text".)
  5. StÀll in Texttypografi. (Detta alternativ visas om du stÀller in menytyp pÄ "Text" eller "Ikon med text".)
anpassa hamburgerknapp för WordPress off-canvas-meny i Elementor
  1. VÀlj en Kanttyp för Hamburger-knappen.
  2. StÀll in Bredd av grÀnsen.
  3. VĂ€lj en kantlinje FĂ€rg.
  4. StÀll in Inriktning av knappen till vÀnster eller höger eller mitten.
  5. LĂ€gg till Box Shadow.
  6. Justera GrÀnsradie, Stoppning, och Marginal.
anpassa kant och stoppning av hamburgerknappar i off-canvas-widget

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.

  1. VĂ€lj en ikon FĂ€rg.
  2. StÀll in a BakgrundsfÀrg för stÀngningsikonen.
  3. I form av SvÀva stilar, vÀlj en fÀrg, bakgrundsfÀrg och kantfÀrg.
  4. Justera Ikon storlek.
  5. Justera ikonen Boxstorlek.
anpassa off canvas stÀngningsknapp
  1. VÀlj en Kanttyp för stÀngningsikonen.
  2. StÀll in Bredd av grÀnsen.
  3. VĂ€lj en kantlinje FĂ€rg.
  4. LĂ€gg till Box Shadow.
  5. Justera GrÀnsradie, Stoppning, och Marginal.
anpassa bÄrd och utfyllnad av duk stÀngningsknapp

4.2 Off-Canvas Panel #

Anpassa innehÄllsomrÄdet utanför arbetsytan under avsnittet Off-Canvas Panel.

  1. Justera Bredd av off-canvas-panelen.
  2. VÀlj den Bakgrundstyp och sÀtt en bakgrund FÀrg.
  3. Du kan ocksÄ anvÀnda en Bild som bakgrund.
  4. StÀll in Placera pÄ panelen Off-canvas till vÀnster eller höger pÄ skÀrmen.
  5. Justera stoppningen pÄ off-canvas-panelen.
anpassa off-canvas-menyn

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 👇

ElementsKit Elementor-tillÀgg

Vad Àr dina kÀnslor
Updated on januari 1, 2025