ElementsKit kommer med Header Off-Canvas-menuen, der lader dig oprette en WordPress off-canvas-menu i Elementor med det højeste antal tilpasningsmuligheder.

For at oprette en Elementor off-canvas menu, aktiver Header Off-Canvas-widget >> træk og slip widgetten i designområdet >> redigere off-canvas indhold >> tilpasse stilene.

Læs denne dokumentation for at lære detaljerne om, hvordan du opretter en Elementor off-canvas-menu ved hjælp af ElementsKit.

Sådan opretter du en WordPress off-canvas-menu 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ødvendige plugins:

1. Elementor: Download plugin'et
2. ElementsKit Lite: Download plugin'et
3. ElementsKit Pro: Hent plugin'et

Trin 1: Aktiver Header Off-Canvas-widgetten #

For at bruge Header Off-canvas-widgetten skal du først aktivere den. For at aktivere widgetten, Log ind på dit WordPress-websted og,

1. Naviger til ElementsKit > Widgets.
2. Find Header Off-Canvas og aktiver widgetten.
3. Klik på GEM ÆNDRINGER knappen i øverste højre hjørne.

Trin 2: Konfigurer widgetten #

Åbn nu Elementor-editoren træk og slip Header Off-Canvas-widgetten til designområdet. 

I den Indhold fanen, kan du 

1. Skift Overlay farve.
2. Sæt Luk ikon af off-canvas-indhold.
3. Vælge Hamburger menutype.

Der er tre muligheder tilgængelige med Hamburger Menu.

Hamburger Menu Type: Ikon
Indstil menutypen til "Ikon", og vælg ikonet fra biblioteket.

Hamburger Menu Type: Tekst
Indstil menutypen til "Tekst", og indtast en tekst.

Hamburgermenutype: Ikon med tekst

Indstil menutypen til "Ikon med tekst". I dette tilfælde kan du vælge en ikon, gå ind tekst, og indstil Ikonposition til før eller efter teksten.

Trin 3: Rediger indhold uden for lærredet #

Du kan redigere WordPress off-canvas-menuindholdet ved hjælp af Header Off-Canvas-widgetten.

1. Udløs Hamburger-ikonet.
2. Klik på Rediger indhold på off-canvas.
3. I widgetområdet skal du designe indholdet til off-canvas ved hjælp af Elementor-widgets eller færdiglavede skabeloner.
4. Klik på Opdatering knappen og luk vinduet Widget Area.

Hvis indholdet ikke vises på off-canvas, skal du genindlæse siden og tjekke igen.

Trin 4: Tilpas stilene #

Under stilfanen kan du tilpasse menuen og indholdsstilene uden for lærredet. 

4.1 Off-Canvas #

Tilpas sektionen Off-Canvas Hamburger knap og Luk ikon.

Til Hamburger-knappen:

1. Vælg en Farve for menuikonet og teksten.
2. Indstil a Baggrundsfarve for ikonet og teksten.
3. Med hensyn til Svæv stilarter, skal du vælge en farve, baggrundsfarve og kantfarve.
4. Juster Ikon størrelse. (Denne mulighed vises, hvis du indstiller menutype til "Ikon" eller "Ikon med tekst".)
5. Indstil Tekst typografi. (Denne mulighed vises, hvis du indstiller menutype til "Tekst" eller "Ikon med tekst".)

6. Vælg en Border Type for Hamburger-knappen.
7. Indstil Bredde af grænsen.
8. Vælg en kant Farve.
9. Indstil Justering af knappen til venstre eller højre eller i midten.
10. Tilføje Box Shadow.
11. Justere Grænseradius, Polstring, og Margin.

Til Luk ikon af indholdsvinduet uden for lærredet:

Udløs off-canvas for at se de visuelle ændringer af Luk-ikonet.

1. Vælg et ikon Farve.
2. Indstil a Baggrundsfarve for lukkeikonet.
3. Med hensyn til Svæv stilarter, skal du vælge en farve, baggrundsfarve og kantfarve.
4. Juster Ikon størrelse.
5. Juster ikonet Æske størrelse.

6. Vælg en Border Type for lukkeikonet.
7. Indstil Bredde af grænsen.
8. Vælg en kant Farve.
9. Tilføje Box Shadow.
10. Justere Grænseradius, Polstring, og Margin.

4.2 Off-Canvas Panel #

Tilpas indholdsområdet uden for lærredet under sektionen Off-Canvas Panel.

1. Juster Bredde af off-canvas panelet.
2. Vælg Baggrundstype og sæt en baggrund Farve.
3. Du kan også bruge en Billede som baggrund.
4. Indstil Position af panelet Off-canvas til venstre eller højre på skærmen.
5. Juster polstringen på off-canvas-panelet.

Endelig kan du tilføje WordPress off-canvas-menuen i Elementor.

Ligesom Header Off-canvas-widgetten kommer ElementsKit med hundredvis af avancerede elementer til Elementor. Få ElementsKit og brug disse elementer til at bygge WordPress-websteder med fuld af funktioner.

Get ElementsKit Plugin 👇