Hoe voegt u met Divi een afbeelding van uw logo toe aan uw header

12 september 2020

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;

}

}

Gerelateerde berichten

DIVI AI

Met Divi AI is het supermakkelijk en leuk om een geweldige website te maken. Je wordt geïnspireerd door de kracht van AI terwijl Divi AI mooie lay-outs, interessante inhoud en geweldige afbeeldingen voor je maakt, precies wanneer je ze nodig hebt! Of je nu een hele...

Lees meer

Divi shortcodes

Met behulp van de Divi builder (Nederlandse vertaling in WordPress is Divi Themabouwer) kunt u heel gemakkelijk pagina's ontwerpen. Dit wordt echter nog gemakkelijker met behulp van de Divi shortcodes.Visual Builder shortcodes Pagina shortcodes Ongedaan maken: Ctrl+Z...

Lees meer

Elegant Themes Divi – Contactformulier module

Met behulp van de Divi contactformulier module van Elegant Themes kunt u overal op uw website of webshop een contactformulier invoegen. Hieronder word de Divi contactformulier module van Elegant Themes uitgelegd.5 manieren om uw contactformulier op te maken Het Divi...

Lees meer

Blader door berichten

Pin It on Pinterest

Share This