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;

}

}

Reacties zijn welkom

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Gerelateerde berichten

Gratis stijlpagina voor uw Divi global presets

Als u net begint met het maken van uw website of webshop, dan is het belangrijk dat u nadenkt over de lay-out van uw website. Welke kleuren gaat u gebruiken. Wat voor vormen gaat u gebruiken. Welk lettertype gaat u gebruiken. Het werkt dan ook erg prettig als je...

Lees meer

Divi themabouwer Lay-outs importeren of exporteren

Binnen Divi is het mogelijk om opgeslagen secties, rijen, modules of zelfs hele pagina's en berichten op te slaan in de Divi bibliotheek. Dit kan handig als u regelmatig een bepaalde lay-out wilt gebruiken. Divi biedt u ook de mogelijkheid om lay-outs te importeren of...

Lees meer

Blader door berichten

Pin It on Pinterest

Share This

Deel mijn website met uw familie, vrienden en collega's.

Uw familie, vrienden of collega's vinden het fijn als u hun informeert over handige tips, gratis materiaal en leuke informatie.