Vill du ha en Divi Mega-meny med bilder för att illustrera innehåll från menyn? Följ vår handledning om hur man lägger till bilder till en Mega-meny?

Vi älskar att interagera med bilder online. Med det i åtanke är det vettigt att lägga till en bild till din webbplats när det är möjligt. 

Dessutom är att lägga till bilder i en megameny ytterligare ett utmärkt tillfälle att ge dina användare den interaktion de behöver.

Bilder förbättrar också menyn genom att fånga deras uppmärksamhet för att ytterligare förenkla navigeringsprocessen.

undersökningen

Innan vi hoppar in i den här handledningen, låt oss ta en titt på resultatet vi vill uppnå.

Mega Menu Divi med bilder

Skapande av megamenyn

För att komma igång måste vi först skapa menyn. 

För det här exemplet skapar vi ett huvudmenyalternativ som heter “Mega meny” med fyra undermenyalternativ nedan. Var och en av de fyra undermenyalternativen har tre undermenyalternativ.

Gå till WordPress-instrumentpanelen och klicka sedan på Utseenden> Menyer

Mega Menu Divi med bilder

Klicka på "Skapa en ny meny", ge den ett namn och klicka på "Skapa meny".

Se till att aktivera menyegenskapen CSS Classes genom att klicka på fliken Tillbehör skärmen längst upp till höger på skärmen Menyer och kontrollera CSS klasser.

Du kan nu lägga till dina menyalternativ till den nya menyn du skapade.

Låt oss först skapa menyalternativet som kommer att vara överordnat till alla andra menyalternativ. Det här är länken som visar din megameny när du svävar.

För att skapa detta menyalternativ, skapa en anpassad länk med följande parametrar:

  • URL: http://#
  • Navigeringstitel: Mega Menu
  • CSS-klasser: megameny

Ordna/dra nu de fyra menyalternativen (var och en med tre egna underpunkter) för att bli underposter till den överordnade Megameny-länken.

När länkarna har lagts till i menyn, scrolla ner till 'Réglages du meny' längst ned på menyskärmen och välj 'Huvudmeny' för visningsplats. Slutligen, klicka på 'Spara meny'

Så här ser vår megameny ut hittills:

Mega Menu Divi med bilder

Lägger till bilder till megamenyn

Nu när menyn är klar är det dags att lägga till bilderna.

Läs också: Hur flyter jag blogginlägg i DIVI?

Få bilderna

Börja med att få fyra bilder. Dessa bilder bör relatera till de fyra undermenyalternativen (Om, Serviceleverans, Vårt arbete och Kontakta oss).

Använd en fotoredigerare för att skala ner och beskära varje bild till 500px bred och 300px hög.

Lägg till dessa bilder till WordPress-biblioteket. Klicka på Media > Lägg till.

hur man lägger till bilder till en megameny

Dra dina bilder till sidan för att lägga till dem eller klicka på 'Välj filer'

hur man lägger till bilder till en megameny

Infoga bilder i Mega-menyn

Återgå till menysidan i WordPress-instrumentpanelen.

I det här exemplet är länken högst upp i den första kolumnen " Handla om "

Klicka på pilen till höger om objektet " Handla om ". I rutan Navigationsetikett lägger du till önskad bild med hjälp av html-taggen img direkt före texten " Handla om ". Bildtaggen ska se ut så här:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
hur man lägger till bilder till en megameny

För att hitta webbadressen till bilden, gå till Media > Mediebibliotekklickar du på bilden du vill lägga till. 

I popup-skärmen Bilaga detaljer, hitta webbadressen i det högra avsnittet och klicka sedan "Kopiera URL till urklipp"

hur man lägger till bilder till en megameny

Gå nu tillbaka till menyalternativets konfiguration " Handla om " på menysidan och byt ut texten "Infoga bildadress" genom att klistra in din bild-URL med ctrl + v.

hur man lägger till bilder till en megameny

Innan du avslutar konfigurationsalternativen för menyalternativet " Handla om ", hitta textrutan CSS Classes och ange klassen "mega-link".

Detta gör att vi kan lägga till en anpassad stil senare.

Upprepa denna process för att lägga till följande tre bilder till var och en av undermenyalternativen med klassen "mega-länk". (I det här exemplet är de återstående tre objekten "Tjänsteleverans", "Vårt arbete" et " Kontakta oss ".)

Resultat

Gå till din webbplats och håll muspekaren över megamenylänken. Nu ska din megameny se ut så här:

Mega Menu Divi med bilder

Observera att när du håller muspekaren över var och en av bilderna tonas bilderna in med undermenyn direkt nedan. Detta beror på att bilden är en del av den länken, så om du klickar på den kommer du till den associerade webbadressen.

Sista handen

För det här sista steget, lägg till lite anpassad css till menyn för att göra textteckensnittet större och centrerat. Ge även en ramradie runt bilden för att få den att se renare ut.

Gå till i WordPress-instrumentpanelen Divi> Temalternativ . 

Rulla ner till rutan Anpassad CSS, ange CSS nedan och klicka 'Spara ändringar' :

.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; 
 
}

Slutresultat

Du är klar!

Om du har följt alla steg i denna handledning, här är resultatet du bör få.

Mega Menu Divi med bilder

Ladda ner DIVI nu!!!

Slutsats

Du har en Divi megameny med bilder utan att behöva använda ett plugin. Denna typ av meny fungerar särskilt bra för webbplatser. e-handel som har mycket innehåll och kräver produktbilder. Vi hoppas att denna handledning kommer att vara användbar för dina nästa Divi-projekt.

Om du behöver fler element för att slutföra dina webbplatsskapande projekt, bläddra också i vår guide på WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Men under tidendela den här artikeln på dina olika sociala nätverk.

.