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

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

Elegant Themes Divi – Knop module

Met behulp van de Divi knop module van Elegant Themes kunt u overal op uw website of webshop knoppen toevoegen. Met behulp van deze module kunt u elke knop weer een ander uiterlijk geven. Op de volgende websites kunt u handige css codes voor de divi button module...

Lees meer

Elegant Themes Divi – Nummer tellen module

Met behulp van de Divi nummer tellen module van Elegant Themes kunt u overal op uw website of webshop getallen tonen. Deze getallen zien er visueel mooi uit en zijn een verrijking van uw website.In de video hieronder wordt de Divi nummer tellen module van Elegant...

Lees meer

Blader door berichten

Pin It on Pinterest

Share This