Hoe maak je een megamenu in Elementor - DeLaatbusiness

Hoe maak je een megamenu in Elementor

3 min


94

Megamenu’s zijn één ding om de gebruiker gemakkelijker te maken bij het navigeren door een zeer complexe en grote website, zoals een e-commercewinkel met waarschijnlijk honderden categorieën en tags om uit te kiezen. 

Het opzetten van een megamenu is echter niet zo eenvoudig als het lijkt. Hoewel het maken van eenvoudige menu’s zelfs zonder Elementor haalbaar is, kunt u Elementor nog steeds gebruiken om mooie en elegante megamenu’s te maken die aan uw behoeften voldoen.

In deze tutorial zullen we dit doen: 

Aangepast Elementor Mega Menu 11b

Keer nu terug naar je toetsenbord zodat we verder kunnen gaan met onze tutorial! 

Stap 1: Om het Elementor Mega-menu te maken, is onze eerste stap om naar het WordPress-dashboard te gaan, ga vervolgens naar Uiterlijk en zoek naar de knop Menu’s.

Aangepast Elementor Mega-menu 1

Stap 2: Laten we vervolgens een nieuw menu maken in het belang van deze Mega Menu-zelfstudie .

Stap 3: Het maken van een nieuw menu moet voor zichzelf spreken en duidelijk zijn.

Aangepast Elementor Mega-menu 3

Stap 4: Aangezien we allemaal verschillende websites hebben om te werken, met verschillende sets pagina’s en doeleinden, is dit deel aan jou. Houd er rekening mee dat het maken van een megamenu ook logisch moet zijn, aangezien dit het primaire doel is . Dit wordt de structuur van mijn Mega Menu.

Aangepast Elementor Mega-menu 4

Stap 5: Om te beginnen met het maken van ons aangepaste Elementor Mega Menu, maak je een nieuwe (tijdelijke) pagina aan om ons Elementor megamenu te bekijken. Voeg een nieuwe sectie toe waar u het menu gaat plaatsen.

Aangepast Elementor Mega-menu 5

Stap 6: Kies een paginastructuur. Alles is goed voor deze tutorial .

Aangepast Elementor Mega-menu 6

Stap 7: Zoek in het linkerdeelvenster de widget voor het nav-menu en sleep deze naar de kolom .

Aangepast Elementor Mega-menu 7

Stap 8: Kies op het tabblad Inhoud van de Nav Menu Widget het menu dat u wilt weergeven.

Aangepast Elementor Mega-menu 8

Stap 9: Zoals je hieronder kunt zien, is dit de standaardstijl van het nav-menu, om die vervolgkeuzemenu groter te maken, zullen we wat aangepaste CSS aan dit menu toevoegen.

Aangepast Elementor Mega-menu 9

Stap 10: Verkrijg de id of klasse van elk element hieronder om een ​​aangepaste stijl aan elkaar toe te voegen.

Aangepast Elementor Mega-menu 10

Nadat je de id of klasse van de bovenstaande elementen hebt gekregen, probeer je deze stijl toe te passen.

Pas deze stijl toe op de  lijstklasse:

ul # sm-15760584023977324-2 {
    breedte: 1000px! belangrijk;
    left: -155px! belangrijk;
}

Pas deze stijl toe op de klasse Lijstitems:

ul # sm-15760584023977324-2 li {
    display: inline-blok;
}

Pas deze stijl toe op de lijstitempijl:

ul # sm-15760584023977324-2 li span.sub-pijl {
    Geen weergeven;
}

Pas deze stijl toe op de klasse Lijstitems:

ul # sm-15760584023977324-4, ul # sm-15760584023977324-6, ul # sm-15760584023977324-8 {
    margin: -52px 0 0 0! belangrijk;
    display: block! belangrijk;
}

Pas deze stijl toe op de zwevende lijst met itemklasse :

.ul # sm-15760584023977324-4 li a: hover, ul # sm-15760584023977324-6 li a: hover, ul # sm-15760584023977324-8 li a: hover {
    achtergrondkleur: transparant
    ;
    kleur: # ed2a5b;
}

En nu zijn we klaar!

Aangepast Elementor Mega-menu 11

Bedankt dat je zo ver bent gekomen! 🙂


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format