Wilt u een aangepaste voettekst maken in DIVI?
Een van de belangrijkste onderdelen van Divi's themabouwer is de mogelijkheid om dynamisch globale voetteksten toe te voegen aan uw webpagina's en berichten.
Nadat je een voettekst hebt ontworpen, kun je deze automatisch toevoegen aan elk type pagina of bericht dat je wilt met behulp van Divi's themabouwer.
In deze zelfstudie leiden we u stap voor stap door het proces van het maken en toevoegen van een globale voettekst aan uw Site web.
overzicht
Laten we, voordat we in de tutorial duiken, eens kijken naar de footer die we gaan ontwerpen.
Bureau
Ga naar de Divi Theme Builder en voeg een Global Footer toe
- Ga naar Divi > Theme Builder en klik op " Een globale voettekst toevoegen«
- Kiezen " Een globale voettekst maken«
Pas sectie #1 aan
Achtergrond kleur
Open de sectie die je op de pagina kunt vinden en verander de achtergrondkleur van de sectie.
- Achtergrond: #000000
tussenruimte
Overschakelen naar tabblad Style en wijzig vervolgens de afstandsinstellingen voor de sectie.
- Marge (Boven, Links en Rechts): 6vw
- Interne marge (links en rechts): 30px
grens
Voeg vervolgens links en rechts een bovenrand toe.
- Linksboven afgeronde rechthoek: 20px
- Rechtsboven afgeronde rechthoek: 20px
Schaduw doos
Neem ook een vakschaduw op in de sectie-instellingen.
- Bow Shadow Blur-sterkte: 135px
- Ondertitel Letterkleur: rgba(0,0,0,0.18)
Voeg een nieuwe regel toe aan de sectie
Structuur van de kolom
Ga verder door een rij aan uw sectie toe te voegen met behulp van de volgende kolomstructuur:
Voeg een tekstmodule toe aan de kolom
Voeg een titel toe met de grootte H2 (kop 2)
Voeg een tekstmodule in met inhoud van maat H2.
H2 tekstinstellingen
Overschakelen naar het tabblad van Style van de module en wijzig de parameters van de H2-tekst dienovereenkomstig:
- Lettertype kop: Poppins
- Gedempt licht header: semi-vet
- Tekstuitlijning: gecentreerd
- Kleur koptekst: #ffffff
- Grootte koptekst: 31px (desktop), 24px (tablet), 18px (telefoon)
- Hoogte kopregel: 1,6 em
sizing
Voeg ook een maximale breedte toe aan de module.
- Maximale breedte: 700 pixels
Knopmodule aan kolom toevoegen
Tekst toevoegen aan knop
Voeg een knopmodule toe net onder de tekstmodule in uw kolom en voer een tekst naar keuze in.
alignement
Overschakelen naar het tabblad van Style van de module en verander de uitlijning van de knop naar het midden.
- Knop uitlijning: gecentreerd
Knop instellingen
Ga verder door de knop aan te passen.
- Gebruik aangepaste stijlen voor Knop: Ja
- Tekstgrootte knop: 12px
- Tekstkleur knop: #000000
- Achtergrondknop: #FFFFFF
- Randbreedte knop: 0 pixels
Lees ook: Een blogpagina weergeven als een carrousel in DIVI
- Knoprandstraal: 100 px
- Knop letterafstand: 1 px
- Lettertype knop: Poppins
- Zachte lichtknop: half vet
- Kopieerstijlknop: TT
tussenruimte
Voeg ook aangepaste waarden voor de binnenmarge toe.
- Interne marge (boven en onder): 14px
- Binnenmarge: Links (40px); Rechts (58px)
Sectie 2
Voeg een tweede "normale" sectie toe onder de vorige.
Achtergrond kleur
Achtergrondkleur wijzigen
- Achtergrond: #ffffff
tussenruimte
Verwijder vervolgens alle interne marges (boven en onder).
- Interne marge (boven en onder): 0px
grens
Voeg ook een randradius toe aan de sectie.
- Afgeronde rechthoek (linksboven): 20px
- Afgeronde rechthoek (rechtsboven): 20px
Schaduw doos
En voltooi de sectie-instellingen door een subtiele doosschaduw toe te voegen.
- Doos Schaduwvervaging Sterkte: 135px
- Letterkleur ondertitel: rgba(0,0,0,0.18)
Voeg een nieuwe regel toe aan de sectie
Structuur van de kolom
Nadat u de sectie-instellingen hebt voltooid, voegt u een nieuwe rij toe met behulp van de volgende kolomstructuur:
sizing
Open, zonder nog modules toe te voegen, de rij-instellingen en wijzig ze als volgt:
- Aangepaste gootbreedte gebruiken: Ja
- Kolomafstand: 1
- Kolomhoogten harmoniseren: Ja
- Maximale breedte: 100%
- Maximale breedte: 100%
tussenruimte
Verwijder vervolgens de standaard binnenmarges (Boven en Onder) van de regel.
- Interne marge (boven en onder): 0px
Kolomafstand
Ga verder door kolominstellingen te openen om aangepaste opvulwaarden toe te voegen.
- Binnenmarge (boven en onder): 100px (desktop), 50px (tablet en telefoon)
- Binnenmarge (links en rechts): 100px (desktop), 50px (tablet en telefoon)
Voeg Tekst #1 module toe aan kolom
Voeg inhoud toe
We kunnen er nu modules aan toevoegen. Voeg een tekstmodule toe aan de kolom en voeg de inhoud de votre choix.
Tekst instellingen
Overschakelen naar het tabblad van Style van de module en wijzig de tekstparameters dienovereenkomstig:
- Tekstlettertype: Poppins
- Gewicht lettertype: vet
- Tekstkleur: #000000
- Tekstgrootte: 17px
- Tekstuitlijning: gecentreerd
tussenruimte
Voeg vervolgens aangepaste marges (boven en onder) toe.
- Bovenmarge: 10 px
- Ondermarge: 30px
Voeg een Separator-module toe aan de kolom
Voeg net onder de module Tekst een module Scheidingsteken toe.
zichtbaarheid
Zorg ervoor dat de optie " Scheidingsteken tonen Is ingeschakeld.
- Scheidingsteken tonen: Ja
lijn
Verander de lijnkleur in zwart.
- Labelkleur: #000000
sizing
Wijzig ook de instellingen voor het formaat van de splitter.
- Maximale breedte: 15%
- Tekstuitlijning: Midden
Voeg Tekst #2 module toe aan kolom
Voeg inhoud toe
Ga verder door nog een tekstmodule aan de kolom toe te voegen, evenals een inhoud de votre choix.
Voeg een link toe
Voeg een link toe naar de pagina waarnaar deze module moet verwijzen.
Tekst instellingen
Ga dan naar het tabblad Style en wijzig de tekstinstellingen als volgt:
- Tekstlettertype: Poppins
- Tekst met zacht licht: duidelijk
- Tekst Kleur Tekst: #777777
- Tekst Tekstgrootte: 15 px
- Tekstuitlijning: gecentreerd
tussenruimte
Voeg ook een marge toe (boven en onder).
- Marge (boven en onder): 10 px
Kloon tekstmodule #2 indien nodig
Zodra u de tweede tekstmodule hebt voltooid, kunt u deze zo vaak klonen als u wilt (afhankelijk van het aantal klikbare voettekstelementen dat u wilt opnemen).
Inhoud en links bewerken
Zorg ervoor dat u de module-inhoud en links voor elk duplicaat bewerkt.
Kloon de hele kolom twee keer
Nadat u de kolom en de bijbehorende modules hebt voltooid, kunt u deze twee keer klonen.
Achtergrondkleur kolom 2
Open vervolgens de instellingen voor kolom 2 en verander de achtergrondkleur.
- Achtergrond: #f9f9f9
Inhoud en links bewerken
Zorg ervoor dat u alle inhoud en links in elke dubbele kolom bewerkt.
Voeg een nieuwe kolom
Voeg vervolgens een vierde kolom toe aan de rij.
Achtergrond kleur
Wijzig de achtergrondkleur van de nieuwe kolom.
- Achtergrond: #0fffc7
tussenruimte
Wijzig de binnenmarges als volgt:
- Interne marge (boven en onder): 70px
- Interne marge (links en rechts): 50px
Voeg de module 'Volg ons op social media' toe aan kolom 4
Sociale netwerken toevoegen
Ga verder door een module toe te voegen " Volg ons op social media in kolom 4 en vul de sociale netwerken van uw keuze in.
Pictogramstijlen voor sociale media resetten
Klik op Rollen Elementen Stijlen resetten voor elk van de sociale netwerken.
alignement
Ga dan naar het tabblad Style en wijzig de uitlijning van de module.
- Tekstuitlijning: Midden
Pictogram instellingen
Verander ook de kleur van social media iconen.
- Pictogramkleur: #000000
E-mail Optin-module toevoegen aan kolom 4
Een mod invoegen " E-mail opt "onder de module" Volg ons op social media«
Module-inhoud en titel wissen
Email account
Voeg dan een e-mailaccount toe. Als je geen e-mailaccount toevoegt, wordt de module niet weergegeven nadat je de themabouwer hebt afgesloten.
Achtergrondkleur verwijderen
- Gebruik achtergrondkleur: Nee
Lokale instellingen
Overschakelen naar tabblad Style en wijzig de lokale instellingen als volgt:
- Achtergrondkleurvelden: rgba(0,0,0,0)
- Tekstkleurvelden: #000000
- Champs-lettertype: Poppins
- Tekstgrootte Velden: 13px
- Randbreedte velden: 1 px
Knop instellingen
Pas ook de knop van uw module aan.
- Gebruik aangepaste stijlen voor Knop: Ja
- Tekstgrootte knop: 12px
- Tekstkleur knop: #000000
- Achtergrondknop: #FFFFFF
- Randbreedte: 0px
- Knoprandstraal: 100 px
- Knop letterafstand: 1 px
- Lettertype knop: Poppins
- Dimlichtknop: half vet
- Kopieerstijlknop: TT
Zie ook: Hoe maak je een sticky contactformulier in DIVI
- Knopvulling (boven en onder): 15px
Voeg een dynamische tekstmodule toe aan kolom 4
De volgende en laatste module die we nodig hebben om dit ontwerp te voltooien, is een tekstmodule.
Activeer de optie " Dynamische inhoud gebruiken".
Selecteer vervolgens de optie " huidige datum".
En wijzig de instellingen voor dynamische inhoud als volgt:
- Voorzijde: Copyright ©
- Na: | Alle rechten voorbehouden
- Datumnotatie: Douane
- Aangepast datumformaat: 20 jaar
Tekst instellingen
Ga vervolgens naar het stijltabblad en wijzig de tekstinstellingen:
- Tekstlettertype: Poppins
- Tekst Kleur Tekst: #000000
- Tekst Tekstgrootte: 16 px
tussenruimte
Voltooi de moduleparameters door marge toe te voegen en voila!
- Bovenmarge: 50 px
Opties voor globale voettekst en themabouwer opslaan
Als u klaar bent, moet u uw werk opslaan voordat u de builder verlaat. Divi-thema.
Zodra u 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.
Download DIVI nu!!!
Conclusie
In deze zelfstudie hebben we u laten zien hoe eenvoudig het is om een ​​prachtige, aangepaste globale voettekst te maken met Divi's themabouwer.
We hopen dat deze tutorial je zal inspireren om prachtige globale voetteksten te maken voor je volgende Divi-projecten.
Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
