Hoe u uw logo tijdens het scrollen in het Divi-thema kunt wijzigen

Vandaag gaan we je laten zien hoe een stapsgewijze handleiding over hoe je je Divi-logo tijdens het scrollen kunt wijzigen, wanneer je vaste koptekst in het logo verandert in een ander. Deze methode werkt op alle browsers, maar vereist meer handmatig werk. Er zijn veel manieren om dit te doen, bijvoorbeeld met behulp van CSS, maar dit werkt niet in alle browsers, dus wat doe je? Ga door met lezen om een ​​kogelvrije methode te vinden. Je kunt de onderstaande video bekijken of verder lezen.

Het idee is dat we twee logo's aan onze site toevoegen en deze verbergen / tonen afhankelijk van de scroll.

1) Maak een Childtheme 

Het eerste wat u moet doen, is een kindthema maken, zodat we enkele wijzigingen kunnen aanbrengen in ons header.php-bestand. Je kunt ons kindthema downloaden met alle wijzigingen aan het einde van dit bericht of je kunt er zelf een maken met behulp van onze gids hier.

Het belangrijkste dat u hier moet doen, is het header.php-bestand van het Divi-thema kopiëren en in uw onderliggende thema plakken. Als je dit eenmaal hebt gedaan, zou je themastructuur eruit moeten zien:

divi-kind-thema

- functies.php

- header.php

- style.css

2) Wijzig uw header.php-bestand

Nu heb je dit, zoek in je header.php-bestand de klassenaam “logo_container” - dit is waar je logo is ondergebracht. Kopieer de afbeeldingstag en voeg een klasse toe aan beide om onderscheid te maken tussen de logo's. Ik heb "hoofdlogo" en "vast logo" toegevoegd zodat ik wat CSS kan gebruiken om te verbergen. Verder heb ik de id van mijn vaste logo gewijzigd in 'fixed-logo' omdat het best is om niet meerdere ID's met dezelfde namen te hebben. Hieronder ziet u hoe de code eruit zal zien als u klaar bent.

<img class="main-logo" src="<?php echo esc_attr( $logo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />
<img class="fixed-logo" src="/wp-content/uploads/2019/09/email-logo.png" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" id="fixed-logo" data-height-percentage="<?php echo esc_attr( et_get_option( 'logo_height', '54' ) ); ?>" />

Zoals je kunt zien, heb ik de afbeeldingstag gedupliceerd, klassen toegevoegd en een van de ID's gewijzigd. Ik veranderde ook de tweede afbeelding src in een ander logo dat ik heb geüpload naar mijn mediabibliotheek. U kunt hetzelfde doen - verander eenvoudig de code “/wp-content/uploads/2019/09/email-logo.png” met de URL van uw afbeelding.

3) Voeg wat CSS toe om de logo's te verbergen / tonen

We hebben nu twee logo's naast elkaar op onze site. We moeten het vaste logo in eerste instantie verbergen en vervolgens, wanneer u scrolt, het hoofdlogo verbergen en het vaste weergeven. Gelukkig voegt Divi de klassenaam “et-fixed-header” toe aan de header wanneer je naar beneden scrolt. We kunnen dit gebruiken om de logo's te verbergen / tonen. De onderstaande code doet dit voor ons. Zoals je kunt zien, gebruik ik display: none en display: inline-block die respectievelijk de logo's verbergen en tonen.

/* Main logo show */
#logo.main-logo {
	display: inline-block;
}
/* Fixed logo hide */
#fixed-logo.fixed-logo {
	display: none;
}
/* Fixed main logo hide */
.et-fixed-header #logo.main-logo{
	display: none;
}
/* Fixed logo show */
.et-fixed-header #fixed-logo.fixed-logo{
	display: inline-block;
}

#fixed-logo {
    display: inline-block;
    float: none;
    max-height: 54%;
    margin-bottom: 0;
    vertical-align: middle;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    -webkit-transform: translate3d(0, 0, 0);
}

Een ding om te vermelden is omdat we ons vaste logo hebben gewijzigd om geen id van "logo" te hebben maar "fixed-logo" - de CSS die Divi toevoegt aan het logo zal er niet zijn op de vaste. Dus we hebben dit handmatig toegevoegd.

En dat is het!

Dit is alles wat er is, je hebt nu een logo dat verandert wanneer je bladert. Je kunt het onderliggende thema downloaden met de link aan de rechterkant of het zelf maken, hoe dan ook, ik weet dat je hier veel plezier mee zult hebben.

  • 1 gebruikers vonden dit artikel nuttig
Was dit antwoord nuttig?

Gerelateerde artikelen

50+ prelaunch checks

50+ website lanceringscontroles om te maken in Divi / WordPress 15 okt. 2019  In de loop der...

Divi Globale standaard instellingen

Hoe de Global Defaults in Divi Theme gebruiken? In plaats van te beginnen met de...