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

Juxaposed button divi

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".

Met behulp van de themabouwer

Maak een algemene koptekst

Ga verder door te klikken op "Build Global Header".

Hoofd configuratie

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
Divi Space-configuratie

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
Z-index configuratie

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:

Layout configuratie

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%
Afmeting configuratie

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)
Divi line-instellingen

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;

Divi-lijnstijlconfiguratie

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
Kolomrand configuratie

Z Index

Verhoog ook de z-index van de kolom.

  • Z Index: 11
Geavanceerde instellingen voor kolomconfiguratie

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%;

Kolomstijlconfiguratie 1

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.

Selectie menu module

Logo downloaden

Upload vervolgens een logo.

Divi logo configuratie

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
Menu-indeling

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
Divi menu configuratie

Vervolgkeuzemenu

Breng ook wijzigingen aan in de tekstinstellingen in het vervolgkeuzemenu.

  • Achtergrondkleur vervolgkeuzemenu: #ffffff
  • Kleur van de regel in het vervolgkeuzemenu: # ef6f49
Divi drop-down menu configuratie

pictogrammen

Verander vervolgens de kleur van het hamburgermenupictogram.

  • Kleur hamburgermenupictogram: # 000000
Divi menu icoon configuratie

sizing

Voeg ook een maximale logobreedte toe aan de maatparameters.

  • Maximale logobreedte: 9vw (bureau), 12vw (tablet), 15vw (telefoon)
Divi menu dimensie configuratie

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;

Code toevoegen css menu divi

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>

Aangepaste CSS-code divi-kolom

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.

Kopieer de divi-knopmodule

Voeg een link toe

Voeg vervolgens een link naar de knopmodule toe.

Knop link configuratie

alignement

Schakel over naar het tabblad Moduleontwerp en verander de uitlijning van de knoppen.

  • Knopuitlijning: rechts
Configuratie van uitlijning van knopmodule

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
Divi-stijl knopinstellingen
  • Knoprandradius: 0 px
  • Afstand tussen knopletters: 2 px
  • Knoplettertype: Montserrat
  • Gewicht lettertype knop: Semi vetgedrukt
  • Knopletterstijl: hoofdletters
Pas het lettertype van de divi-knop aan

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)
Divi-knopruimte-instellingen

Module voor kloonknop

Nadat u de eerste knopmodule hebt voltooid, kloont u deze.

Divi-module sleuf

Link bewerken

Open de duplicaatknoppenmodule en verander de URL.

Divi-knop link configuratie

Verander de uitlijning

Verander ook de uitlijning van de module.

  • Knopuitlijning: links
Divi-knop uitlijning

Wijzig knopinstellingen

Breng ook wijzigingen aan in de knopinstellingen.

  • Knoptekstkleur: #ffffff
  • Achtergrondkleur knop: # ef6f49 (standaard), # e06945 (hover)
Kleuraanpassing van knoppen

Beweeg transformatieschaal

Voltooi de knopinstellingen door een zweefeffect voor de transformatieschaal toe te voegen.

  • Rechts: 110%
  • Laag: 110%
Divi-knop transformatie

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!

Wijzigingen opslaan
Hoofd configuratie divi

overzicht

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

Eindresultaat van de demo

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.