Kunne du tænke dig at have en Divi Mega Menu med billeder til at illustrere indhold fra menuen? Følg vores vejledning om, hvordan du tilføjer billeder til en Mega Menu?
Vi elsker at interagere med billeder online. Med det i tankerne giver det mening at tilføje et billede til din Websted når det er muligt.
Derudover er tilføjelse af billeder i en megamenu endnu en fantastisk mulighed for at give dine brugere den interaktion, de har brug for.
Billeder forbedrer også menuen ved at fange deres opmærksomhed for yderligere at forenkle navigationsprocessen.
undersøgelse
Før vi hopper ind i denne tutorial, lad os tage et kig på det resultat, vi ønsker at opnå.
Oprettelse af mega menuen
For at komme i gang skal vi først oprette menuen.
Til dette eksempel vil vi oprette et hovedmenupunkt for overordnet, kaldet “Mega menu” med fire undermenupunkter nedenfor. Hvert af de fire undermenupunkter har tre undermenupunkter.
Gå til WordPress-dashboardet og klik derefter på Udseende> Menuer
Klik 'Opret en ny menu', giv den et navn og klik på 'Opret menu'.
Sørg for at aktivere menuegenskaben CSS Classes ved at klikke på fanen Indstillinger skærmen øverst til højre på menuskærmen og kontrollere CSS klasser.
Du kan nu tilføje dine menupunkter til den nye menu, du har oprettet.
Lad os først oprette menupunktet, der vil være overordnet for alle de andre menupunkter. Dette er linket, der viser din mega-menu, når du svæver.
For at oprette dette menupunkt skal du oprette et brugerdefineret link med følgende parametre:
- URL: http://#
- Navigations titel: Mega Menu
- CSS klasser: mega-menu
Arranger/træk nu de fire menupunkter (hver med tre egne underpunkter) for at blive underpunkter til det overordnede Mega Menu-link.
Når linkene er tilføjet til menuen, skal du rulle ned til 'Menuindstillinger' nederst på menuskærmen og vælg 'Hovedmenu' for visningsplacering. Klik til sidst videre 'Gem menu'
Sådan ser vores mega menu ud indtil videre:
Tilføjelse af billeder til megamenuen
Nu hvor menuen er klar, er det tid til at tilføje billederne.
Læs også: Hvordan flyder jeg blogindlæg i DIVI?
Få billederne
Start med at få fire billeder. Disse billeder skal relatere til de fire undermenupunkter (Om, servicelevering, vores arbejde og kontakt os).
Brug et billedredigeringsværktøj til at skalere ned og beskære hvert billede til at være 500px bredt og 300px højt.
Tilføj disse billeder til WordPress-biblioteket. Klik på Medier > Tilføj.
Træk dine billeder til siden for at tilføje dem, eller klik på 'Vælg filer'
Indsæt billeder i Mega Menu
Vend tilbage til menusiden i WordPress-dashboardet.
I dette eksempel er linket øverst i den første kolonne " Om ".
Klik på pilen til højre for elementet " Om ". Tilføj det ønskede billede ved hjælp af html-tagget i boksen Navigation Label img lige før teksten " Om ". Billedtagget skal se sådan ud:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
For at finde billedets url, gå til Medier > Mediebibliotek, klik på det billede, du vil tilføje.
I pop op-skærmen Vedhæftede detaljer, find URL'en i den højre sektion, og klik derefter 'Kopiér URL til udklipsholder'
Gå nu tilbage til menupunktet konfiguration " Om " på menusiden og udskift teksten "Indsæt billedwebadresse" ved at indsætte din billed-URL vha ctrl + v.
Før du forlader konfigurationsmulighederne for menupunktet " Om ", find CSS Classes tekstboksen og indtast klassen "mega-link".
Dette vil give os mulighed for at tilføje en brugerdefineret stil senere.
Gentag denne proces for at tilføje følgende tre billeder til hvert af undermenupunkterne med klassen "mega-link". (I dette eksempel er de resterende tre elementer "Service levering", "Vores arbejde" et " Kontakt os ".)
Resultat
Få adgang til din websted og svæv over megamenulinket. Nu skulle din mega menu se sådan ud:
Bemærk, at når du holder markøren over hvert af billederne, toner billederne ind med undermenupunktet direkte nedenfor. Dette skyldes, at billedet er en del af det link, så hvis du klikker på det, kommer du til den tilhørende URL.
Sidste hånd
Til dette sidste trin skal du tilføje noget tilpasset css til menuen for at gøre tekstskrifttypen større og centreret. Giv også en kantradius omkring billedet for at få det til at se renere ud.
Gå til WordPress-dashboardet Divi> Temaindstillinger .
Rul ned til boksen Custom CSS, indtast CSS'en nedenfor, og klik 'Gem ændringer' :
.mega-link > a {
text-align: center;
font-size: 20px !important;
text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 3px;
}
.mega-link > a img {
margin-bottom: 8px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Endelig resultat
Du er færdig!
Hvis du har fulgt alle trinene i denne tutorial, er her resultatet, du skal få.
Download DIVI nu!!!
Konklusion
Du har en Divi mega menu med billeder uden at skulle bruge et plugin. Denne type menu fungerer særligt godt til websteder. e-handel der har mange indhold og kræver produktbilleder. Vi håber, at denne tutorial vil være nyttig til dine næste Divi-projekter.
Hvis du har brug for flere elementer til at fuldføre dine hjemmesideoprettelsesprojekter, kan du også gennemse vores guide på WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Men i mellemtiden, del denne artikel på dine forskellige sociale netværk.
...
