Een aangepaste voettekst maken met Divi Builder

Rifat T Apr 11, 2022

Als resultaat van de Divi Theme Builder is een nieuw tijdperk in het maken van websites begonnen. Met deze nieuwe functionaliteit kunt u dynamisch globale voetteksten toevoegen aan uw pagina's en artikelen. Om een ​​voettekst aan een pagina of bericht toe te voegen, gebruik je gewoon Divi 's Theme Builder (die bij het Divi-thema wordt geleverd). In dit artikel laten we u nu zien hoe u een globale voettekst maakt en aan uw website toevoegt. Bovendien kunt u het JSON-bestand gratis downloaden!

Voorbeeld

Laten we eerst eens kijken hoe de globale voettekst eruitziet op schermen van verschillende formaten voordat we aan de slag gaan.

Ontwerpprocedure:

Log eerst in op uw WordPress-dashboard. Navigeer in je Divi Theme Options naar de Theme Builder.

Daar hebt u de mogelijkheid om een ​​reeds bestaande globale voettekst te gebruiken of een geheel nieuwe voettekst te maken met behulp van de Divi-bibliotheek. In deze les gaan we een geheel nieuwe voettekst maken, dus ga je gang en selecteer optie één.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Sectie nr. 1

BG-kleur

Tijd om nu creatief aan de slag te gaan! Open de sectie op de pagina en wijzig de achtergrondkleur van de sectie.

  • Achtergrondkleur: #000000

Spatiëring

Werk vervolgens de sectie-afstand bij volgens de volgende waarden.

  • Bovenmarge: 6vw
  • Linkermarge: 6vw
  • Rechtermarge: 6vw
  • Linkervulling: 30px
  • Rechter vulling: 30px

Grens

De volgende stap is het toevoegen van een rand aan de bovenkant, links en rechts.

  • Linksboven: 20px
  • Rechtsboven: 20px

Doos Schaduw

Een box-schaduw moet ook worden opgenomen in de sectie-instellingen.

  • Box Shadow Blur-sterkte: rgba(0,0,0,0.18)
  • Schaduwkleur: rgba (0,0,0,0.18)

Nieuwe rij toevoegen

Voeg nu een nieuwe rij met één kolom toe aan de sectie.

Nieuwe tekstmodule toevoegen

Voeg vervolgens een tekstmodule toe en voeg een kopie toe aan die module.

H2 Tekstinstellingen

Wijzig indien nodig de H2-tekstinstellingen in het ontwerptabblad van de module:

  • Kop 2 Lettertype: Poppins
  • Kop 2 Lettergewicht: Half vet
  • Kop 2 Tekstuitlijning: Midden
  • Kop 2 Tekstkleur: #ffffff
  • Kop 2 Tekstgrootte: 31px (desktop), 24px (tablet), 18px (telefoon)
  • Kop 2 Regelhoogte: 1.6em

Grootte van tekstmodule

De module moet ook een maximale breedte hebben.

  • Maximale breedte: 700px

Knopmodule toevoegen

Voeg net onder de tekstmodule een knopmodule toe en vul deze met elke gewenste kopie.

Knop uitlijning

Wijzig de knopuitlijning naar het midden op het ontwerptabblad van de module.

  • Knop Uitlijning: Midden

Knop Instellingen

Laten we nu de knop stylen.

  • Gebruik aangepaste stijlen voor knop: Ja
  • Tekstgrootte knop: 12px
  • Knoptekstkleur: #000000
  • Achtergrondkleur knop: #FFFFFF
  • Breedte knoprand: 0px
  • Knoprandstraal: 100px
  • Knop Letterafstand: 1px
  • Lettertype knop: Poppins
  • Gewicht knoplettertype: Half vet
  • Knop Lettertypestijl: Hoofdletters

Knopafstand

Het is tijd om wat aangepaste opvulling toe te voegen.

  • Bovenste vulling: 14px
  • Bodemvulling: 14px
  • Linker vulling: 40px
  • Rechter vulling: 58px

Sectie nr. 2

Achtergrond kleur

Het volgende normale hoofdstuk is hier! Selecteer een witte achtergrondkleur voor de sectie.

  • Achtergrondkleur: #ffffff

Spatiëring

Verwijder alle demping van de boven- en onderkant.

  • Top vulling: 0px
  • Bodemvulling: 0px

Grens

Aan de sectie moet ook een grensradius worden toegevoegd.

  • Linksboven: 20px
  • Rechtsboven: 20px

Doos Schaduw

Beëindig nu het bewerken van de sectie door een kaderschaduw toe te voegen.

  • Doos Schaduwvervaging Sterkte: 135px
  • Schaduwkleur: rgba (0,0,0,0.18)

Nieuwe rij toevoegen

U kunt nu een nieuwe rij aan uw sectie toevoegen door deze instructies te volgen:

Rijgrootte

Open de rij-instellingen en schakel de rij in om het hele scherm te beslaan zonder extra modules toe te voegen.

  • Aangepaste gootbreedte gebruiken: Ja
  • Gootbreedte: 1
  • Kolomhoogten egaliseren: Ja
  • Breedte: 100%
  • Maximale breedte: 100%

Rijafstand

Verwijder de opvulling van de rij aan de boven- en onderkant.

  • Top vulling: 0px
  • Bodemvulling: 0px

Kolomafstand

Ga naar de kolominstellingen en voeg specifieke opvulwaarden toe voor de verschillende schermbreedtes.

  • Top padding: 100px (desktop), 50px (tablet & telefoon)
  • Bodemvulling: 100px (desktop), 50px (tablet & telefoon)
  • Linker vulling: 50px
  • Rechter vulling: 50px

Tekstmodule 1

Het is nu of nooit voor module-toevoegingen! Voeg een standaard tekstmodule toe aan kolom 1 en vul deze met wat je maar wilt.

Tekstinstellingen

Wijzig indien nodig de tekstinstellingen in het ontwerptabblad van de module:

  • Tekstlettertype: Poppins
  • Gewicht lettertype: vet
  • Tekstkleur: #000000
  • Tekstgrootte: 17px
  • Tekstuitlijning: Midden

Spatiëring

De volgende stap is het toevoegen van enkele unieke boven- en ondermarges.

  • Bovenmarge: 10px
  • Ondermarge: 30px

Zichtbaarheid scheidingsmodule

Scheidingsmodules kunnen net onder de tekstmodule worden toegevoegd als de optie 'Toon scheidingslijn' is aangevinkt.

  • Show Divider: Ja

Lijn

Verander nu de kleur.

  • Lijnkleur: #000000

Maatvoering

De maatvoering van de verdeler kan ook worden gewijzigd.

  • Breedte: 15%
  • Module-uitlijning: midden

Tekstmodule 2

Tekstmodules kunnen nu aan de kolom worden toegevoegd.

Koppeling

Voeg een URL toe naar de pagina waarnaar u deze module wilt verwijzen.

Tekstinstellingen

Pas op het tabblad Ontwerpen de tekstinstellingen als volgt aan:

  • Tekstlettertype: Poppins
  • Tekst Lettertype Gewicht: Licht
  • Tekstkleur: #7777777
  • Tekstgrootte: 15px
  • Tekstuitlijning: Midden

Spatiëring

Voeg ook wat ruimte aan de boven- en onderkant van de pagina toe.

  • Bovenmarge: 10px
  • Ondermarge: 10px

Tekstmodule 2 klonen

Het is mogelijk om de tweede tekstmodule in de kolom een ​​onbeperkt aantal keren te klonen zodra deze klaar is met bouwen (afhankelijk van het aantal klikbare voettekstitems dat u wilt opnemen).

Koppelingen wijzigen

Zorg ervoor dat u voor elk exemplaar de inhoud en links van de module bijwerkt.

Kolom tweemaal klonen

Je kunt een kolom twee keer klonen als je klaar bent met het bouwen ervan en al zijn modules.

Kolom 2 BG-kleurverandering

Je kunt een kolom twee keer klonen als je klaar bent met het bouwen ervan en al zijn modules.

  • Kolom 2 Achtergrondkleur: #f9f9f9

Nieuwe kolom toevoegen

Er moet dan een vierde kolom worden toegevoegd.

Achtergrond kleur

Kleur de achtergrond van de nieuwe kolom in.

  • Achtergrondkleur: #0fffc7

Spatiëring

Naast de opvulwaarden in de kolom.

  • Top vulling: 70px
  • Bodemvulling: 70px
  • Linker vulling: 50px
  • Rechter vulling: 50px

Pictogram voor sociale media

Voeg een Social Media Follow Module toe aan kolom 4 om de tabel te voltooien.

Uitlijning

Pas op het tabblad Ontwerpen de positie van de module aan.

  • Module-uitlijning: midden

Icoon

Pas nu de pictogramkleur aan.

  • Pictogramkleur: #000000

E-mailmodule

Blijf doorgaan door een opt-in-module voor e-mail in kolom 4 in te voegen en vervolgens de titel en hoofdinhoud te verwijderen. Koppel vervolgens een persoonlijk e-mailaccount. Als het e-mailaccount niet is toegevoegd, wordt de module niet weergegeven zodra u de builder afsluit.

Verwijder ook BG uit de e-mailmodule.

Velden instellen

Ga naar het tabblad ontwerpen en maak de volgende aanpassingen aan de velden:

  • Achtergrondkleur van velden: rgba(0,0,0,0)
  • Velden Tekstkleur: #000000
  • Velden lettertype: Poppins
  • Velden Tekstgrootte: 13px
  • Randbreedte velden: 1px
  • Randkleur van velden: #000000

Knop

Verander nu de knopstijl.

  • Gebruik aangepaste stijlen voor knop: Ja
  • Tekstgrootte knop: 12px
  • Knoptekstkleur: #000000
  • Achtergrondkleur knop: #FFFFFF
  • Breedte knoprand: 0px
  • Knoprandstraal: 100px
  • Knop Letterafstand: 1px
  • Lettertype knop: Poppins
  • Gewicht knoplettertype: Half vet
  • Knop Lettertypestijl: Hoofdletters
  • Top vulling: 15px
  • Bodemvulling: 15px

Dynamische tekstmodule toevoegen

Ten slotte moeten we een tekstmodule toevoegen om dit ontwerp te voltooien. Selecteer in het inhoudsvak de optie dynamische inhoud. Breng vanaf daar de volgende wijzigingen aan.

  • Dynamische inhoud: huidige datum
  • Voor: Copyright ©
  • Na: | Alle rechten voorbehouden
  • Datumnotatie: Aangepast
  • Aangepaste datumnotatie: 20 jaar

Tekstinstellingen

Wijzig de volgende instellingen op het tabblad Ontwerpen.

  • Tekstlettertype: Poppins
  • Tekstkleur: #000000
  • Tekstgrootte: 16px

Spatiëring

Je bent klaar met de instellingen van de module als je wat bovenmarge toevoegt.

  • Bovenmarge: 50px

Laatste voorbeeld

Laten we een laatste blik werpen op de resultaten op verschillende schermformaten nu we alle processen hebben voltooid.

Afsluitende gedachten

In deze handleiding hebben we je geleerd hoe je de nieuwe Theme Builder van Divi kunt gebruiken om een ​​verbluffende, aangepaste globale voettekst te maken. Met behulp van de Theme Builder en de ingebouwde modules en ontwerpopties van Divi kunt u binnen enkele uren prachtige websites maken. Het is ons doel dat u deze tutorial gebruikt om in de toekomst een aantal mooie globale voetteksten van Divi te maken. Voel je vrij om vragen of opmerkingen achter te laten in de commentaarsectie hieronder!

Divi WordPress Theme