Moet een globale koptekst maken voor uw website met Divi?
Een globale kop verschijnt overal op uw Site web, tenzij je een andere kop aan een pagina of bericht hebt toegewezen.
Laten we beginnen!
overzicht
Hier is een voorbeeld van de globale header die we gaan ontwerpen.
Configureer je hoofdmenu
Begin met het maken van uw menu in de weergave-instellingen van uw WordPress-site.
Open de optie Theme Builder onder Divi
In de opties van Divi-thema, klik op Themabouwer. Eenmaal daar ziet u een website-sjabloon Standaard.
Een globale kop toevoegen en maken
Le website-sjabloon standaard is waar u kunt beginnen met het maken van uw aangepaste globale koptekst, globale hoofdtekst en globale voettekst. Klik op "Globale koptekst toevoegen" en ga verder door op "Globale koptekst bouwen" te klikken om het proces te starten.
Sectie-instellingen
sizing
Open de sectie-instellingen die u op de pagina vindt, in het tabblad Stijl, wijzig de afmetingen op verschillende schermformaten.
- Maximale breedte: 100%
- Maximale breedte: 1280px (voor pc en tablet), 100% (voor mobiel)
tussenruimte
Alle bovenste en onderste interne marges verwijderen
- Binnenste marge Vertex: 0px
- Onderste interne marge: 0px
grens
Voeg nu een randradius toe aan de linker- en rechterbenedenhoek van de sectie.
- Linksonder: 50px
- Rechtsonder: 50px
Schaduw doos
Laten we ook een subtiele doosschaduw toevoegen.
- Doos Schaduwvervaging Sterkte: 60px
- Letterkleur ondertitel: rgba(0,0,0,0.13)
zichtbaarheid
- Horizontale overloop: zichtbaar
- Verticale overloop: zichtbaar
Wijs een nieuwe regel toe aan de kop
Nu we de algemene sectie-instellingen hebben voltooid, kunnen we beginnen met het toevoegen van rijen. In totaal hebben we twee lijnen nodig; een die is gewijd aan de koptekst en een waarmee menu-items kunnen worden weergegeven. We beginnen met de koptekst door een nieuwe rij toe te voegen met behulp van de volgende kolomstructuur:
Lijn instellingen
Achtergrondinstellingen
Zonder modules aan de lijn toe te voegen, opent u de lijninstellingen en wijzigt u de achtergrondkleur.
- Achtergrond: #38383F
sizing
Wijzig vervolgens de lijnafmetingsparameters.
- Gebruik aangepaste gootbreedte: JA
- Kolomafstand: 1
- Maximale breedte: 100%
- Maximale breedte: 100%
bekijkt
Laten we er nu voor zorgen dat de kolommen naast elkaar verschijnen op kleinere schermen door deze regel CSS-code toe te voegen aan het hoofdrij-element.
01
display: flex;
Afbeeldingsmodule toevoegen in kolom 1
Logo downloaden
Nadat u de rij-instellingen hebt voltooid, is het tijd om modules toe te voegen. Voeg een afbeeldingsmodule toe aan kolom 1 en upload uw logo.
alignement
Ga naar het tabblad Stijl en lijn de afbeelding links uit.
sizing
Wijzig ook de Breedte van de module.
tussenruimte
Voeg ook aangepaste margewaarden toe.
Voeg de module voor het volgen van sociale media toe in kolom 2
Sociale netwerken toevoegen
Laten we naar de tweede kolom gaan. Daar hebben we een trackingmodule voor sociale media nodig. Voeg de sociale netwerken van uw keuze toe. U kunt zoveel sociale media toevoegen als u wilt.
Achtergrondkleur sociaal netwerk
Open vervolgens elk sociaal netwerk afzonderlijk en verander de achtergrondkleur in een volledig transparante kleur.
- Achtergrondkleur: rgba (0,0,0,0)
alignement
Ga terug naar de normale module-instellingen en wijzig vervolgens de volledige uitlijning van de module.
icon
Wijzig ook de pictograminstellingen.
- Pictogramkleur: #FFFFFF
- Aangepaste pictogramgrootte gebruiken: Ja
- Lettergrootte pictogram: 16px (pc en tablet), 12px (telefoon)
tussenruimte
Voeg een bovenmarge toe.
Voeg de knopmodule toe in kolom 3
Ga naar de derde kolom en voeg een Button-module toe met een tekst naar keuze.
alignement
Wijzig de uitlijning van de knop op het tabblad Stijl.
Knop Instellingen
Pas de knopinstellingen als volgt aan:
- Gebruik aangepaste stijlen voor de knop: Ja
- Tekstgrootte knop: 12px (desktop), 10px (tablet), 8px (telefoon)
- Tekstkleur knop: #ffffff
- Achtergrondknop: #ffae25
- Breedte knoprand: 0 pixels
- Rand Radius-knop: 0 pixels
- Knop letterafstand: 5 px (desktop), 3 px (tablet en telefoon)
- Lettertype-knop: Geen openen
- Soft Light-knop: vetgedrukte tekst
- Kopieer knopstijl: TT
tussenruimte
Pas de margewaarden aan.
Wijs een nieuwe regel toe aan de menubalk
Nadat u de regel voor de globale kop hebt ingevuld, kunt u net daaronder nog een regel toevoegen.
Lijn instellingen
sizing
Zonder nog modules toe te voegen, opent u de lijninstellingen en wijzigt u de formaatinstellingen op het tabblad Stijl.
tussenruimte
Verwijder vervolgens alle onder- en bovenmarges.
Voeg een menumodule toe aan de kolom
Selecteer menu
Voeg vervolgens een menumodule toe aan de kolom en selecteer het menu dat u in het eerste deel van deze zelfstudie hebt gemaakt.
Aanleg
Schakel over naar het tabblad Stijl en wijzig de lay-outinstellingen als volgt:
Links
Wijzig ook de kleur van de actieve link op het tabblad Stijl.
- Actieve linkkleur: #ffae25
Drop-down menu
Doe hetzelfde voor de lijnkleur van het vervolgkeuzemenu in de instellingen van het vervolgkeuzemenu.
- Kleur vervolgkeuzelijst: #ffae25
icon
- Kleur hamburgermenupictogram: #ffae25
Menutekst
Met instellingen voor menutekst.
- Lettertype menu: Prata
- Kleur menutekst: #000000
Koptekst en menubalk bovenaan laten staan
Sectie-instellingen openen
Zodra je de tweede rij hebt voltooid, hoef je alleen maar ervoor te zorgen dat de sectie bovenaan onze pagina's en berichten blijft staan. Om dit te doen, openen we de sectie-instellingen opnieuw.
Aangepaste CSS toevoegen aan hoofdelement
Vervolgens gaan we naar het tabblad geavanceerd en voegen we een paar regels CSS-code toe aan het hoofdelement van de sectie.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Opties voor globale koptekst en themabouwer opslaan
Nadat u het volledige ontwerp van de algemene koptekst hebt voltooid, moet u het ontwerp opslaan voordat u de sjabloonlay-out verlaat. Als u eenmaal uit de sjabloonlay-out bent, slaat u uw volledige wijzigingen in de themabouwer op en bent u klaar!
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer naar het resultaat kijken.
Conclusie
In dit artikel hebben we u laten zien hoe u een aangepaste globale header kunt maken met de nieuwe themabouwer van Divi. Deze tutorial laat zien hoe eenvoudig het is om prachtige headers te maken en deze op uw geheel toe te passen Site web of specifieke aangepaste berichttypen.
We hopen dat het je helpt bij het aanpassen van je website met Theme Builder.
Als je vragen of suggesties hebt, laat dan een reactie achter in de opmerkingen sectie hieronder.
...
