Het hebben van duidelijke oproepen tot actie op uw pagina's is een noodzaak voor de meeste websites. En wat is een betere manier om de aandacht te vestigen op enkele van uw belangrijkste CTA's dan door ze in uw koptekst te plaatsen?
In de tutorial van vandaag laten we u zien hoe u twee knoppen naast elkaar kunt toevoegen aan uw globale koptekst met behulp van de Button Builder. thema's van Divi. Eén van de knoppen is primair, de andere secundair. Je kunt ook het globale header JSON-bestand gratis downloaden!
overzicht
Laten we, voordat we in de tutorial duiken, het resultaat snel bekijken op verschillende schermformaten.
Bureau
1. Open Divi Theme Builder en maak een algemene koptekst
Ga naar Divi Theme Builder
Begin door naar Divi Theme Builder te gaan en klik op "Een algemene koptekst toevoegen".
Maak een algemene koptekst
Ga verder door te klikken op "Build Global Header".
2. Bouw een algemeen headerontwerp
Voeg een nieuw gedeelte toe
tussenruimte
Eenmaal in de sjablooneditor ziet u een sectie. Open sectie-instellingen en verwijder alle standaard boven- en ondervulling.
- Bovenste vulling: 0 px
- Vulling onderkant: 0px
Z Index
Zorg er ook voor dat u de z-index van de sectie verhoogt in de zichtbaarheidsinstellingen. Dit zal ervoor zorgen dat de inhoud globale header verschijnt bovenaan de hele pagina en post de inhoud.
- Z Index: 99999
Voeg een nieuwe regel toe
Kolomstructuur
Nadat u de sectie-instellingen hebt voltooid, voegt u een nieuwe rij toe aan de sectie met behulp van de volgende kolomstructuur:
sizing
Zonder modules toe te voegen, opent u de lijnparameters en laat u de lijn de volledige breedte van de sectiecontainer innemen.
- Gebruik een aangepaste gootbreedte: Ja
- Dakgootbreedte: 1
- Kolomhoogten gelijk maken: Ja
- Breedte: 100%
- Max breedte: 100%
tussenruimte
Wijzig ook de vulwaarden links en rechts van de regel.
- Vulling links: 2vw (bureau), 10vw (tablet en telefoon)
- Vulling rechts: 2vw (bureau), 10vw (tablet en telefoon)
Hoofdelement
Alles centreren inhoud kolommen, voegen we deze twee regels CSS-code toe aan het hoofdelement van de rij.
display: flex;align-items: center;
Verwijder desktopweergave-eigenschap op tablet en mobiel.
display: block;
Kolom 1
grens
Ga door met het openen van de instellingen in kolom 1 en voeg alleen een rechterrand toe op het bureaublad.
- Rechterrandbreedte: 1 px (bureau), 0 px (tablet en telefoon)
- Kleur rechterrand: # d8d8d8
Z Index
Verhoog ook de z-index van de kolom.
- Z Index: 11
Kolom 2
Hoofdelement
Open vervolgens de instellingen voor kolom 2 en voeg de volgende regels CSS-code toe aan het hoofdkolomelement om er twee kolommen van te maken.
display: grid;grid-template-columns: 50% 50%;
Voeg een menumodule toe aan kolom 1
Selecteer het menu
Het is tijd om modules toe te voegen! Voeg een menumodule toe aan kolom 1 en selecteer een menu naar keuze.
Logo downloaden
Upload vervolgens een logo.
Aanleg
Schakel over naar het tabblad moduleontwerp en zorg ervoor dat de volgende lay-outinstellingen van toepassing zijn:
- Stijl: links uitgelijnd
- Richting van het vervolgkeuzemenu: omlaag
Menutekst
Wijzig vervolgens de instellingen voor de menutekst.
- Kleur actieve link: # ef6f49
- Menulettertype: Montserrat
- Gewicht van het lettertype van het menu: Semi vetgedrukt
- Menulettertypestijl: hoofdletters
- Menu tekst kleur: # 333333 (standaard), # ef6f49 (hover)
- Menutekstgrootte: 0.7vw (desktop), 1.8vw (tablet), 2.5vw (telefoon)
- Menu-letterafstand: 1 px
Vervolgkeuzemenu
Breng ook wijzigingen aan in de tekstinstellingen in het vervolgkeuzemenu.
- Achtergrondkleur vervolgkeuzemenu: #ffffff
- Kleur van de regel in het vervolgkeuzemenu: # ef6f49
pictogrammen
Verander vervolgens de kleur van het hamburgermenupictogram.
- Kleur hamburgermenupictogram: # 000000
sizing
Voeg ook een maximale logobreedte toe aan de maatparameters.
- Maximale logobreedte: 9vw (bureau), 12vw (tablet), 15vw (telefoon)
CSS-logomenu
En voltooi de module-instellingen door een regel CSS-code toe te voegen aan het menu-logo op het tabblad Geavanceerd.
margin-right: 10vw;
Voeg een codemodule toe aan de 1-kolom
Voeg een aangepaste CSS-code toe aan de module
De volgende en laatste module die we nodig hebben in kolom 1 is een codemodule. Voeg de volgende regels CSS-code toe om de ruimte tussen menu-items aan te passen:
<style>.et-menu>li {padding-left: 1.5vw !important;padding-right: 1.5vw !important;}</style>
Voeg de eerste knopmodule toe aan kolom 2
Voeg een kopie toe
Laten we naar de volgende module gaan! Voeg de eerste knopmodule toe en voer een kopie naar keuze in.
Voeg een link toe
Voeg vervolgens een link naar de knopmodule toe.
alignement
Schakel over naar het tabblad Moduleontwerp en verander de uitlijning van de knoppen.
- Knopuitlijning: rechts
Knop instellingen
Style ook de knop.
- Gebruik aangepaste stijlen voor de knop: Ja
- Tekstgrootte knop: 0.8vw (desktop), 1.7vw (tablet), 2.5vw (telefoon)
- Tekstkleur knop: # 000000
- Achtergrondkleur knop: # edeef0 (standaard), # d6d7d8 (hover)
- Knoprandbreedte: 0 px
- Knoprandradius: 0 px
- Afstand tussen knopletters: 2 px
- Knoplettertype: Montserrat
- Gewicht lettertype knop: Semi vetgedrukt
- Knopletterstijl: hoofdletters
tussenruimte
Voltooi de module-instellingen door aangepaste opvulwaarden toe te voegen aan verschillende schermformaten.
- Bovenste vulling: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Vulling onderzijde: 1vw (bureau), 2vw (tablet), 3vw (telefoon)
- Linker opvulling: 2vw (desktop), 4vw (tablet), 6vw (telefoon)
- Vulling rechts: 2vw (bureau), 4vw (tablet), 6vw (telefoon)
Module voor kloonknop
Nadat u de eerste knopmodule hebt voltooid, kloont u deze.
Link bewerken
Open de duplicaatknoppenmodule en verander de URL.
Verander de uitlijning
Verander ook de uitlijning van de module.
- Knopuitlijning: links
Wijzig knopinstellingen
Breng ook wijzigingen aan in de knopinstellingen.
- Knoptekstkleur: #ffffff
- Achtergrondkleur knop: # ef6f49 (standaard), # e06945 (hover)
Beweeg transformatieschaal
Voltooi de knopinstellingen door een zweefeffect voor de transformatieschaal toe te voegen.
- Rechts: 110%
- Laag: 110%
3. Sla de wijzigingen in de themagenerator en het voorbeeldresultaat op
Zodra uw algemene koptekst is voltooid, slaat u alle wijzigingen op die zijn aangebracht in de themabouwer 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 deze zelfstudie hebben we u laten zien hoe u twee knoppen naast elkaar aan uw algemene koptekst kunt toevoegen met behulp van de themabouwer van Divi.
Een van de knoppen die we hebben toegevoegd is primair, de andere is secundair. Door knoppen aan uw algemene koptekst toe te voegen, kunt u enkele van de belangrijkste CTA's in uw Site web. Je kon het JSON-bestand ook gratis downloaden! Als je vragen hebt, kun je een reactie achterlaten in het commentaargedeelte hieronder.