Bij het maken van uw globale koptekst zijn er veel dingen waarmee u rekening moet houden. De elementen die u in uw koptekst plaatst, zouden u moeten helpen bezoekers om gemakkelijk te navigeren. Om de tijd die mensen besteden aan browsen te verminderen, kiezen veel webdesigners voor een vaste koptekst, waardoor bezoekers om onmiddellijk toegang te krijgen tot andere pagina's of publicaties. Dit is erg handig, maar bij het maken van een vaste header komt een groot deel van de hoogte van uw viewport overeen bezoekers is bezet, waardoor minder dan inhoud om in één keer weer te geven. Als je niet klaar bent om dit offer te brengen, weet dan dat dat niet nodig is. U kunt profiteren van de voordelen van een vaste koptekst door uw algemene koptekst te laten zien wanneer uw bezoekers naar boven scrollen en deze te verbergen wanneer ze naar beneden scrollen. Vandaag begeleiden we u bij het verbergen en onthullen van uw globale header met behulp van Divi's Theme Builder.

overzicht

Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.

1. Ga naar Divi Theme Builder en voeg een nieuwe sjabloon toe

Begin door naar de Divi Theme Builder te gaan.

Begin met het maken van een algemene koptekst

Klik daar op "Een algemene koptekst toevoegen" en selecteer "Een algemene koptekst maken".

2. Begin met het maken van een algemene koptekst

Sectie-instellingen

Achtergrondkleur

In de sjablooneditor zie je een sectie. Open deze sectie en verander de achtergrondkleur.

• Achtergrondkleur: #ffffff

sizing

Ga naar het ontwerptabblad en wijs een breedte van 100% toe aan uw volgende sectie.

• Breedte: 100%

tussenruimte

Voeg ook aangepaste bovenste en onderste vulling toe.

• Bovenvoering: 2vw
• Vulling onderkant: 2vw

Schaduw doos

We zullen ook een subtiele schaduw op onze sectie toepassen.

• Box Shadow Blur Strength: 50 px
• Schaduwkleur: rgba (0,0,0,0,08)

CSS ID

Later in deze tutorial hebben we wat aangepaste code nodig om het scroll-effect te laten optreden. Om ons hierop voor te bereiden, voegen we een CSS-ID toe aan de sectie.

• CSS-ID: algemene koptekstsectie

Hoofdelement

We maken van de sectie ook een vaste koptekst door twee regels CSS-code toe te voegen aan het hoofdsectie-element.

position: fixed;top: 0;

Z Index

Nu om ervoor te zorgen dat onze sectie bovenaan de pagina verschijnt of inhoud van het bericht zullen we ook de z-index in de zichtbaarheidsinstellingen verhogen.

• Z Index: 99999

Voeg een nieuwe regel toe

Kolomstructuur

Nadat u alle sectieparameters hebt voltooid, gaat u verder met het toevoegen van een nieuwe regel aan de sectie met de volgende kolomstructuur:

sizing

Open de rij-instellingen zonder nog een module toe te voegen en laat de rij de volledige breedte van het scherm beslaan.

• Gebruik een aangepaste gootbreedte: Ja
• Dakgootbreedte: 1
• Kolomhoogten gelijk maken: Ja
• Breedte: 100%
• Max breedte: 100%

tussenruimte

Verwijder ook alle standaard bovenste en onderste vulling.

• Bovenste vulling: 0 px
• Vulling onderkant: 0px

Hoofdelement

centreer het inhoud van de kolom en zorg ervoor dat de kolommen op kleinere schermformaten naast elkaar kunnen blijven staan ​​door twee regels CSS-code toe te voegen aan het hoofdelement van de rij.

display: flex;align-items: center;

Voeg de volgmodule voor sociale media toe aan kolom 2

Sociale netwerken toevoegen

Het is tijd om modules toe te voegen, te beginnen met een module voor het volgen van sociale media in kolom 1. Voeg de sociale netwerken toe die u wilt weergeven.

Reset individuele sociale media stijlen

Ga door met het opnieuw instellen van de stijlen van elk sociaal netwerk op een individueel niveau.

Voeg een individuele sociale netwerkruimte toe

U moet ook de instellingen voor elk sociaal netwerk afzonderlijk openen en ondervulling toevoegen in de afstandsinstellingen.

• Vulling onderkant: 0.5vw

alignement

Zodra je de onderste opvulling aan elk sociaal netwerk afzonderlijk hebt toegevoegd, ga je terug naar de algemene instellingen van je mod. Schakel over naar het ontwerptabblad en wijzig de uitlijning van de module.

• Uitlijning van de module: midden

Standaard pictograminstellingen

Wijzig ook de pictogramkleur in de pictograminstellingen.

• Pictogramkleur: # 000000

Hover-pictograminstellingen

En verander de kleur van het zweefpictogram.

• Pictogramkleur: # c2ab92

grens

Voltooi de moduleparameters door een onderrand toe te voegen aan de randparameters.

• Breedte onderrand: 1 px
• Kleur onderrand: # 000000

Voeg een menumodule toe aan kolom 2

Selecteer het menu

Laten we naar de volgende kolom gaan! Voeg een menumodule toe en selecteer een menu naar keuze.

Logo downloaden

Upload vervolgens een logo in de module.

Achtergrondkleur verwijderen

En verwijder de achtergrondkleur.

Aanleg

Schakel vervolgens over naar het tabblad Ontwerp en zorg ervoor dat de volgende instellingen van toepassing zijn op de lay-out:

• Stijl: gecentreerd
• Richting van het vervolgkeuzemenu: omlaag

Standaard menutekst

Ga verder door de menutekstinstellingen als volgt te wijzigen:

• Kleur actieve link: # c2ab92
• Menulettertype: Aalscholver Garamond
• Tekstkleur: # 000000
• Menutekstgrootte: 1vw (desktop), 2vw (tablet), 3vw (telefoon)

Zweeft menutekst

Wijzig de menutekst bij aanwijzen.

• Menutekstkleur: # c2ab92

Drop-down menu

Wijzig vervolgens de kleur van de vervolgkeuzelijst in de vervolgkeuzemenu-instellingen.

• Kleur van de regel in het vervolgkeuzemenu: # 000000

pictogrammen

We veranderen ook de kleur van het hamburgermenupictogram in de pictograminstellingen.

• Kleur hamburgermenupictogram: # 000000

sizing

Ga verder met het wijzigen van de maximale logo-breedte op verschillende schermformaten in de formaatinstellingen.

• Maximale logobreedte: 5vw (bureau), 10vw (tablet), 13vw (telefoon)

CSS Link-menu

En voltooi de module-instellingen door twee regels CSS-code toe te voegen aan de module-menukoppeling op het tabblad Geavanceerd.

padding-bottom: 1vw;border-bottom: 1px solid #000;

Voeg een tekstmodule toe aan de 3-kolom

Voeg een kopie toe

Laten we naar de laatste module gaan! Daar is de enige module die we nodig hebben een tekstmodule.

Voeg een link toe

Deze module zal dienen als een CTA. Voeg een link naar keuze toe.

• Module link URL: #

Standaard tekstinstellingen

Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:

• Tekstlettertype: Aalscholver Garamond
• Tekstkleur: # 000000
• Tekstgrootte: 1vw (desktop), 2vw (tablet), 3vw (telefoon)

Beweeg tekstinstellingen

Wijzig de kleur van de tekst bij het aanwijzen.

• Tekstkleur: # c2ab92

sizing

Ga verder met het wijzigen van de grootte van de module op verschillende schermformaten.

• Breedte: 12vw (desktop), 18vw (tablet), 22vw (telefoon)
• Uitlijning van de module: midden

tussenruimte

En voeg wat opvulling aan de onderkant toe in de afstandsinstellingen.

• Vulling onderkant: 0.5vw

grens

Voltooi de moduleparameters door een onderrand toe te voegen.

• Breedte onderrand: 1 px
• Kleur onderrand: # 000000

Voeg een codemodule toe aan de 2-kolom

Voer JQuery en CSS-code in

Zodra je alle mods in de rij hebt gestyled, is het tijd om het effect onthullen / verbergen te laten plaatsvinden. Om dit te doen, moeten we aangepaste code toevoegen aan een codemodule die we in kolom 2 plaatsen. Deze code werkt op elke sectie die u toevoegt, ongeacht hoe u uw koptekst of de modules ontwerpt. die u gebruikt, zorg er dan voor dat u de CSS-ID aan uw sectie hebt toegevoegd. Plaats JQuery-code tussen scripttags en CSS-code tussen stijltags zoals weergegeven in het onderstaande afdrukscherm.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. Sla de generatorwijzigingen op en geef het resultaat weer

Nadat u de algemene koptekst hebt voltooid, slaat u alle wijzigingen op en bekijkt u het resultaat op uw Site web!

overzicht

Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.

Final gedachten

In dit artikel hebben we u laten zien hoe u uw globale koptekst kunt weergeven wanneer u omhoog scrolt en deze kunt verbergen wanneer u omlaag scrolt. Dit is een populaire en effectieve manier om uw bezoekers te helpen gemakkelijk te navigeren zonder een deel van hun raamhoogte in te nemen. U kunt het JSON-bestand ook gratis downloaden! Als u vragen of suggesties heeft, kunt u een reactie achterlaten in de opmerkingen hieronder.