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.
![Aktivera ElementsKit header off canvas-widget](https://wpmet.com/wp-content/uploads/2020/04/1-Enable-ElementsKit-header-off-canvas-widget.png)
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.
![dra och släpp rubriken från dukens widget till Elementor-redigeraren](https://wpmet.com/wp-content/uploads/2023/01/2-1-drag-drop-header-off-canvas-widget.gif)
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](https://wpmet.com/wp-content/uploads/2023/01/2-2a-choose-an-icon-for-elementor-off-canvas-menu-button.png)
![ställ in text för WordPress off-canvas menyknapp i Elementor](https://wpmet.com/wp-content/uploads/2023/01/2-2b-set-text-for-elementor-off-canvas-menu-button.png)
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](https://wpmet.com/wp-content/uploads/2023/01/2-2c-choose-icon-with-text-for-off-canvas-button.png)
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.
![](https://wpmet.com/wp-content/uploads/2023/01/3-edit-off-canvas-content-in-elementor.gif)
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".)
![anpassa hamburgerknapp för WordPress off-canvas-meny i Elementor](https://wpmet.com/wp-content/uploads/2020/04/4-1a-customize-hamburger-buttons.png)
- 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.
![anpassa kant och stoppning av hamburgerknappar i off-canvas-widget](https://wpmet.com/wp-content/uploads/2020/04/4-1b-customize-border-and-hamburger-buttons.png)
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.
![anpassa off canvas stängningsknapp](https://wpmet.com/wp-content/uploads/2023/01/4-1c-customize-off-canvas-close-button.png)
- 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.
![anpassa bård och utfyllnad av duk stängningsknapp](https://wpmet.com/wp-content/uploads/2023/01/4-1d-customize-border-and-padding-off-canvas-close-button.png)
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.
![anpassa off-canvas-menyn](https://wpmet.com/wp-content/uploads/2023/01/4-2-customize-off-canvas-.gif)
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](https://wpmet.com/wp-content/uploads/2023/07/ElementsKit-CTA-Banner-Wpmet-2.gif)