Hoe maak je een hamburger menu in wordpress met elementor

Wordpress

Heden ten dage heeft de overgrote meerderheid van de WordPress thema’s een responsive menu. Het menu verandert automatisch in een hamburger icoontje wanneer u uw website benadert via smartphone of andere apparaten met een kleiner scherm. Is het mogelijk om een hamburger menu te hebben wanneer u uw website benadert via desktop? Natuurlijk. U kunt een hamburger menu maken om het gewone horizontale menu op uw website te vervangen.

Dit bericht zal u laten zien hoe u een hamburger menu in WordPress kunt maken met Elementor. In het geval je het nog niet wist, Elementor is een pagina bouwer plugin voor WordPress. Het heeft een theme builder functie waarmee je een WordPress thema kunt maken zonder te coderen. Een van de thema elementen die u kunt maken met Elementor is de header. De header die u met Elementor maakt, vervangt de header van uw actieve thema.

Er zijn twee manieren om een hamburger menu in WordPress te maken met Elementor.

Merk op dat de theme builder functie alleen beschikbaar is op de Elementor Pro . Lees: Elementor Free vs Elementor Pro .

1. Maak een hamburger menu in WordPress met Elementor met behulp van Nav Menu

Nav Menu is een van de ontwerp elementen beschikbaar op Elementor. Dit element zal een van de bestaande menu’s op uw WordPress site gebruiken, afhankelijk van uw instelling. Daarom kun je, voordat je Nav Menu gebruikt om een hamburger menu te maken, eerst een menu maken voor het geval je er nog geen hebt. Ga naar Afbeelding -> Menu’s om een menu te maken.

Als u al een menu heeft, ga dan naar Templates -> Theme Builder .

Op de Theme Builder pagina, klik op de Header tab gevolgd door de Add New knop om een nieuwe header te maken.

Er zal een pop-up verschijnen. Geef uw koptekst een naam en klik op de knop CREATE TEMPLATE om te beginnen met het maken van uw koptekst.

U kunt de koptekst maken door gebruik te maken van een van de beschikbare sjablonen of helemaal opnieuw maken. In dit voorbeeld gebruiken we een van de beschikbare templates.

Alle header templates die door Elementor worden aangeboden bevatten het Nav Menu element. Je moet dit element activeren om verdere aanpassingen te maken. Klik simpelweg op een van de menu items om dit element te activeren. Of, u kunt het Nav Menu ook activeren door er op te klikken in het Navigator paneel.

Als het Nav Menu actief is, ga dan naar het elementen paneel (paneel aan de linkerkant) om het menu aan te passen. Onder de Content tab, stel de Layout in op Dropdown en Toggle Button op Hamburger .

Het Nav Menu haalt standaard het hoofdmenu van uw WordPress site op (het header menu). U kunt het veranderen via de Menu optie (bovenste op de schermafbeelding hierboven).

U kunt zowel de grootte als de kleur van het hamburger icoon veranderen op de Style tab. Ga naar de Toggle Button sectie om dit te doen.

Klik op de PUBLISH knop om uw header te publiceren. Bij de volgende stap wordt u gevraagd om de voorwaarde toe te voegen. Klik gewoon op de ADD CONDITION knop om er een toe te voegen. Normaal gesproken heeft een website dezelfde header op alle pagina’s, dus u kunt gewoon alles standaard laten (Gehele site) en op de SAVE & CLOSE knop klikken.

2. Maak een hamburger menu in WordPress met Elementor met behulp van popup

Aternatief kunt u ook een hamburger menu in WordPress met Elementor maken door gebruik te maken van de popup. U kunt gebruik maken van de popup builder functie van Elementor om een schermvullend menu te maken zoals het volgende.

  • Maak de pop

Op de eerste plaats moet u een popup maken om de menu-items weer te geven. Om uw menu er aantrekkelijker uit te laten zien, kunt u een schermvullende popup maken (zoals de popup hierboven). Ga naar Templates -> Popups om een popup te maken.

Klik op de Add New knop om een nieuwe popup te maken.

Geef uw popup een naam en klik op de CREATE TEMPLATE knop.

Ook hier kunt u de popup maken van een template of van niets. In dit voorbeeld, zullen we de popup vanaf nul maken. Voordat we beginnen met het maken van de popup, willen we een aantal instellingen maken om de popup op volledig scherm te laten verschijnen.

In de Layout sectie onder het Instellingen tabblad, verander de breedte eenheid van PX in VW en stel de waarde in op 100. Verander ook de Height optie in Fit To Screen .

Als u een entree animatie voor uw popup wilt toepassen, kunt u er een selecteren in de Entrance Animation sectie.

Omdat uw popup in een volledig-scherm mode zal verschijnen, wilt u misschien ook een sluit-knop toevoegen. Zorg ervoor dat de optie Sluitknop is ingeschakeld.

U kunt de sluitknop aanpassen op de Sluitknop sectie onder het Stijl tabblad.

Nu kunt u beginnen met het maken van de popup. Klik op de plus knop op het Elementor canvas/editor en selecteer een structuur. In dit voorbeeld gebruiken we de enkele kolom structuur.

Voordat je begint met het toevoegen van een element, verander je de Content Width in Full Width en Height in Fit To Screen .

Verander ook de achtergrond in het Achtergrond gedeelte onder het Stijl tabblad.

In dit voorbeeld, zullen we vier menu items op de popup tonen. We zullen vier kolommen gebruiken om elk item te plaatsen. Voeg het Inner Section element toe.

Dupliceer een van de kolommen in de inner section twee keer zodat je vier kolommen hebt.

Voeg het Heading element toe aan de eerste kolom en verander de titel in overeenstemming met het label van het menu item dat je wilt, “HOME” bijvoorbeeld. Voeg de link toe aan het Link element. Om dit element aan te passen, kunt u naar het Style tabblad gaan.

Herhaal de bovenstaande stappen op de kolommen 2, 3, en 4 – respectievelijk – en pas zowel het label van het menu item als de link aan. U kunt het Spacer element boven en onder de menu items toevoegen als u dat wilt. Je kunt ook de breedte van de binnenste sectie die de menu-items bevat aanpassen.

Je kunt ook andere elementen aan je menu toevoegen, zoals social media knoppen of een call-to-action knop. Speel gewoon wat in het elementen paneel totdat je tevreden bent met het resultaat.

Als je klaar bent, klik je op de PUBLISH knop om je popup te publiceren.

In de popup die verschijnt, selecteert u Geavanceerde regels en klikt u op de knop Opslaan & sluiten .

  • Maak de menuknop

Als u klaar bent met de popup, kunt u beginnen met het maken van de koptekst. We voegen een knop toe aan de koptekst om de popup te laten verschijnen. Om een header te maken, ga naar Templates -> Theme Builder . Ga op de pagina Theme Builder naar het tabblad Header en klik op de knop Add New om een nieuwe header te maken.

Geef uw header een naam en klik op de knop CREATE TEMPLATE om te beginnen met het maken van de header. Nogmaals, u kunt de koptekst maken op basis van een sjabloon of vanaf nul. Deze keer maken we de header vanaf nul.

Voeg een nieuwe sectie toe door op de plus knop op het Elementor canvas te klikken. Je kunt elke structuur kiezen volgens het concept van de header die je wilt maken. In dit voorbeeld gebruiken we een één-koloms structuur. Voeg een knop toe aan de header door het Button element te verslepen.

Verander de standaard knop tekst in iets als “MENU” elk woord dat je wilt. Je kunt het ook leeg laten als je alleen het hamburger icoontje wilt laten zien. Op de Link sectie onder de Content tab, stel in op Popup en selecteer de popup die u hierboven heeft gemaakt.

Stel het pictogram op de Icon sectie en zoek naar een pictogram genaamd “bars”.

Tot hier, heeft u met succes uw hamburger knop gemaakt. U kunt spelen met het elementen paneel om uw menu aan te passen, zoals het veranderen van de achtergrond, het instellen van de padding en ga zo maar door. Voeg ook andere elementen toe als je wilt. Als je klaar bent, klik je op de PUBLISH knop om je header te publiceren.

YouTube video: Hoe maak je een hamburger menu in WordPress met Elementor


Rate article