Hoe voegt u met Divi een afbeelding van uw logo toe aan uw header
Met behulp van de thema opties kunt u gemakkelijk een logo aan uw website toevoegen. U vindt deze functie als volgt:
Via het WordPress Dashboard > Divi > Thema opties > Tabblad Algemeen > Logo
Gebruik voor u loge niet een te groot bestand, want dit vertraagt de snelheid van uw website. Gebruik een logo met als maximale breedte van circa 120 en een maximale hoogte van 40.
Hieronder nog een korte instructievideo:
Met Divi uw logo tonen over meerdere menu’s
U kunt ook met de positie van uw logo experimenteren. Als u bijvoorbeeld in uw header twee menu’s gebruikt, dan kunt u uw logo bijvoorbeeld over zowel het eerste als het tweede menu tonen. Dit u kunt doen door een extra CSS code toe te voegen.
- In het admin menu selecteert u “Weergave”
- Vervolgens kiest u “Customizer”
- Daarna kiest u de optie “”Extra CSS
U kunt hier bijvoorbeeld de onderstaande CSS code plakken.
Onder de CSS code treft u een video-instructie aan. Hierin wordt er uitgelegd wat deze CSS code doet.
/*----------Een log meerdere menu's laten overlappen----------*/#et-info { float: right;}.et_fixed_nav #top-header { position: fixed; z-index: 9998!important;}#logo { max-height: 100px; margin-top: -30px;}.et-fixed-header #logo { max-height: 60px!important; margin-top: 0px;} @media only screen and (max-width: 980px) { #logo { max-height: 70px; margin-top: 0px;} #et-info { float: none;}}Met de CSS code die ik hierboven toon, zal uw logo over uw beide header menu’s verschijnen. Als u dit niet wilt voor al uw pagina’s, dan kunt u het ook instellen per pagina. In onderstaande video wordt beschreven hoe u het ook per pagina in kunt stellen.
In bovenstaande video wordt de maximale hoogte van uw logo op 100 procent gezet. U doet dit als volgt:
- In het admin menu selecteert u “Weergave”
- Vervolgens kiest u “Customizer”
- Daarna kiest u de optie “Koptekst en navigatie”
- Vervolgens kiest u “Primaire menubalk”
- Nu gaat u naar de regel “Logo max hoogte” en stelt u de instelilngen hiervan op 100.
In bovenstaande video wordt de volgende CSS code gebruikt:
/*----------Een log meerdere menu's laten overlappen----------*/
@media only screen and (max-width: 980px) {
#logo { min-height: 100px;
}
}
@media only screen and (max-width: 981px) {
#logo { min-height: 120px;
}
}