De Divi Volle Breedte Header Module

De header-module met volledige breedte maakt het eenvoudig om prachtige, kleurrijke headers toe te voegen aan de bovenkant van uw pagina’s (of waar dan ook op uw pagina, als u dat wilt). Deze modules kunnen alleen binnen secties over de volledige breedte worden geplaatst.

volledige breedte header-module

 

Hoe u een header-module voor de volledige breedte aan uw pagina kunt toevoegen

Voordat u een header-module met volledige breedte aan uw pagina kunt toevoegen, moet u eerst in Divi Builder springen. Nadat het Divi-thema op uw website is geïnstalleerd, ziet u elke keer dat u een nieuwe pagina bouwt een knop Divi Builder gebruiken boven de berichteditor. Als u op deze knop klikt, wordt Divi Builder ingeschakeld en hebt u toegang tot alle modules van Divi Builder. Klik vervolgens op de knop Visual Builder gebruiken om de builder in Visual Mode te starten. U kunt ook klikken op de knop Visual Builder inschakelen tijdens het browsen op uw website aan de voorkant als u bent aangemeld bij uw WordPress-dashboard.

volledige breedte header-module

Nadat u Visual Builder hebt ingevoerd, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe fullwidth-modules kunnen alleen binnen fullwidth-secties worden toegevoegd. Als u een nieuwe pagina start, vergeet dan niet eerst een sectie met volledige breedte aan uw pagina toe te voegen. We hebben een aantal geweldige tutorials over het gebruik van Divi’s sectie- elementen.

volledige breedte header-module

Zoek de header-module met volledige breedte in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De modulelijst kan worden doorzocht, wat betekent dat u ook het woord ‘fullwidth header’ kunt typen en vervolgens op enter kunt klikken om de fullwidth header-module automatisch te zoeken en toe te voegen! Nadat de module is toegevoegd, wordt u begroet met de lijst met opties van de module. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerp en Geavanceerd .

Gebruiksvoorbeeld: een koptekst voor een volledige breedte toevoegen aan een pagina Over

Voor dit voorbeeld ga ik je laten zien hoe je de Fullwidth Header Module kunt gebruiken om een ​​header toe te voegen met aangepaste tekst en een achtergrondafbeelding.

volledige breedte header-module

Alle Fullwidth-modules zijn alleen beschikbaar bij gebruik van Fullwidth-secties. Voeg met behulp van Visual Builder een nieuwe sectie voor de volledige breedte in. Voeg vervolgens een persoonsmodule toe aan de sectie.

volledige breedte header-module

Werk de instellingen voor de header van de volledige breedte als volgt bij:

Inhoud opties

Titel: Over ons
Ondertitel Tekst: We doen dingen anders …
URL van achtergrondafbeelding: [voeg een afbeelding van 1920 x 800 in]
Achtergrond overlay Kleur: rgba (0,0,0,0.2)

Ontwerpopties

Tekst- en logo-oriëntatie: Midden
Tonen Omhoog scrollen Knop: JA
Pictogram: [selecteer pictogram]
Omlaag pictogramkleur: # fcbf00
Omlaag pictogramgrootte: 50px
Tekstkleur: Lichte
titel Tekstkleur: # fcbf00 Titellettertype
: Open Sans, Bold, Hoofdletters
Titel lettertypegrootte: 60 px (bureaublad), 40 px (tablet), 30 px (telefoon)
Lettertypegrootte subkop : 25 px

Geavanceerde opties (aangepaste CSS)

Hoofdelement:
vulling: 100 px 0;

volledige breedte header-module

Dat is het!

volledige breedte header-module

Fullwidth Header Content Options

Op het tabblad inhoud vindt u alle inhoudselementen van de module, zoals tekst, afbeeldingen en pictogrammen. Alles wat bepaalt wat er in uw module verschijnt, vindt u altijd op dit tabblad.

volledige breedte header-module

Titel

Voer hier uw paginatitel in.

Tekst ondertitels

Als u een subkop wilt gebruiken, voegt u deze hier toe. Uw subkop verschijnt onder uw titel in een klein lettertype.

Knop # 1 tekst

Voer de tekst voor de knop in.

Knop # 2 tekst

Voer de tekst voor de knop in.

Inhoud

Hier kunt u de inhoud definiëren die onder de kop- en titeltekst wordt geplaatst.

Knop # 1 URL

Voer de URL voor de knop in.

Knop # 2 URL

Voer de URL voor de knop in.

Logo-afbeeldings-URL

Upload de gewenste afbeelding of typ de URL naar de afbeelding die u wilt weergeven.

URL van koptekstafbeelding

Upload de gewenste afbeelding of typ de URL naar de afbeelding die u wilt weergeven.

URL van achtergrondafbeelding

Indien gedefinieerd, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een ​​achtergrondafbeelding te verwijderen, verwijdert u eenvoudig de URL uit het instellingenveld. Achtergrondafbeeldingen verschijnen boven achtergrondkleuren, wat betekent dat uw achtergrondkleur niet zichtbaar is wanneer een achtergrondafbeelding wordt toegepast.

Achtergrond kleur

Definieer een aangepaste achtergrondkleur voor uw module, of laat leeg om de standaardkleur te gebruiken.

Achtergrond overlay kleur

Kies een achtergrondoverlay-kleur die bovenop de achtergrondafbeelding wordt geplaatst. Semi-transparante backhround overlay-afbeeldingen kunnen coole effecten creëren wanneer ze boven achtergrondafbeeldingen worden geplaatst.

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

Fullwidth Header Design Options

Op het ontwerptabblad vindt u alle stijlopties van de module, zoals lettertypen, kleuren, grootte en afstand. Dit is het tabblad dat u zult gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles te wijzigen.

volledige breedte header-module

Tekst- en logo-oriëntatie

Dit bepaalt hoe uw tekst wordt uitgelijnd binnen de module.

Maak volledig scherm

Hier kunt u kiezen of de koptekst wordt uitgebreid tot volledig scherm.

Gebruik Parallax-effect

Indien ingeschakeld, hebben uw achtergrondafbeeldingen een vaste positie als uw schuifbalk, waardoor een leuk parallaxachtig effect ontstaat.

Parallax-methode

Definieer de methode die wordt gebruikt voor het parallax-effect.

Knop Bladeren omlaag tonen

Hier kunt u kiezen of de knop omlaag scrollen wordt weergegeven.

Icoon

Kies een pictogram om weer te geven voor de knop omlaag scrollen.

Scroll naar beneden pictogramkleur

Standaard neemt het pictogram voor omlaag scrollen de kleur van uw koptekst over (wit of grijs). U kunt deze kleur wijzigen door de kleur in deze optie aan te passen met de kleurkiezer.

Scroll naar beneden pictogramgrootte

Gebruik deze instelling om het pictogram voor omlaag scrollen onderaan uw koptekst te vergroten of te verkleinen.

Afbeelding verticale uitlijning

Dit regelt de oriëntatie van de afbeelding in de module.

Tekst kleur

Hier kunt u de waarde van uw tekst kiezen. Als u met een donkere achtergrond werkt, moet uw tekst licht zijn. Als u met een lichte achtergrond werkt, moet uw tekst donker zijn.

Verticale tekstuitlijning

Deze instelling bepaalt de verticale uitlijning van uw inhoud. Uw inhoud kan verticaal worden gecentreerd of onderaan worden uitgelijnd.

Titel lettertype

U kunt het lettertype van uw titeltekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Titel lettergrootte

Hier kunt u de grootte van uw titeltekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Titel tekstkleur

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw titeltekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Titel Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw titeltekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte van titelregel

Lijnhoogte heeft invloed op de ruimte tussen elke regel van uw titeltekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Inhoudslettertype

U kunt het lettertype van uw inhoudstekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Inhoud lettergrootte

Hier kunt u de grootte van uw inhoudstekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Tekstkleur inhoud

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw inhoudstekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Inhoud Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw inhoudstekst wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte inhoudslijn

Lijnhoogte beïnvloedt de ruimte tussen elke regel van uw inhoudstekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Subhoofdlettertype

U kunt het lettertype van uw subtekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Subkop lettergrootte

Hier kunt u de grootte van uw subteksttekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks in het invoerveld rechts van de schuifregelaar invoeren. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Tekstkleur subkop

Standaard worden alle tekstkleuren in Divi wit of donkergrijs weergegeven. Als u de kleur van uw subtekst wilt wijzigen, kiest u met deze optie de gewenste kleur in de kleurenkiezer.

Subhead Letter Spacing

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw subtekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Hoogte subkoplijn

De hoogte van de regel beïnvloedt de ruimte tussen elke regel van uw subteksttekst. Als u de ruimte tussen elke regel wilt vergroten, gebruikt u de schuifregelaar voor bereik om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Tekst max. Breedte

Gebruik deze instelling om de maximale breedte van de tekst in de kopmodule te verkleinen. Een waarde van 50% zorgt er bijvoorbeeld voor dat de tekst nooit meer is dan 50% van de breedte van de totale koptekstmodule.

Gebruik aangepaste stijlen voor knop

Als u deze optie inschakelt, worden verschillende instellingen voor knopaanpassing onthuld die u kunt gebruiken om het uiterlijk van de knop van uw module te wijzigen.

Knop Tekstgrootte

Deze instelling kan worden gebruikt om de tekst binnen de knop te vergroten of te verkleinen. De knop wordt geschaald naarmate de tekst wordt vergroot en verkleind.

Tekstkleur knop

Standaard nemen knoppen uw themaaccentkleur aan zoals gedefinieerd in de Thema-aanpassing. Met deze optie kunt u een aangepaste tekstkleur toewijzen aan de knop in deze module. Selecteer uw aangepaste kleur met de kleurenkiezer om de kleur van de knop te wijzigen.

Knop Achtergrondkleur

Knoppen hebben standaard een transparante achtergrondkleur. Dit kan worden gewijzigd door de gewenste achtergrondkleur in de kleurenkiezer te selecteren.

Knoprandbreedte

Alle Divi-knoppen hebben standaard een rand van 2 px. Deze rand kan met deze instelling worden vergroot of verkleind. Randen kunnen worden verwijderd door een waarde van 0 in te voeren.

Knoprandkleur

Standaard nemen knopranden de kleur van het themaaccent aan zoals gedefinieerd in de Thema-aanpassing. Met deze optie kunt u een aangepaste randkleur toewijzen aan de knop in deze module. Selecteer uw aangepaste kleur met de kleurenkiezer om de randkleur van de knop te wijzigen.

Knop Randradius

Randradius beïnvloedt hoe afgerond de hoeken van uw knoppen zijn. Standaard hebben knoppen in Divi een kleine randradius die de hoeken met 3 pixels rond maakt. U kunt dit verlagen tot 0 om een ​​vierkante knop te maken of aanzienlijk verhogen om knoppen met ronde randen te maken.

Knop Letterafstand

Letterspatiëring beïnvloedt de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw knoptekst wilt vergroten, gebruikt u de bereikschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende meeteenheden, wat betekent dat u “px” of “em” kunt invoeren volgens uw maatwaarde om het eenheidstype te wijzigen.

Knop lettertype

U kunt het lettertype van uw knoptekst wijzigen door het gewenste lettertype in het vervolgkeuzemenu te selecteren. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het lettertype Open Sans voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met de opties vet, cursief, hoofdletters en onderstrepen.

Knoppictogram toevoegen

Uitgeschakeld deze instelling verwijdert pictogrammen van uw knop. Standaard geven alle Divi-knoppen een pijlpictogram weer bij zweven.

Knop pictogram

Als pictogrammen zijn ingeschakeld, kunt u deze instelling gebruiken om te kiezen welk pictogram u in uw knop wilt gebruiken. Divi heeft verschillende pictogrammen om uit te kiezen.

Knop pictogram kleur

Als u deze instelling aanpast, verandert de kleur van het pictogram dat op uw knop verschijnt. Standaard is de pictogramkleur dezelfde als de tekstkleur van uw knoppen, maar met deze instelling kunt u de kleur onafhankelijk aanpassen.

Plaatsing van knoppictogrammen

U kunt ervoor kiezen om uw knoppictogram links of rechts van uw knop weer te geven.

Alleen pictogram weergeven bij aanwijzen voor knop

Standaard worden knoppictogrammen alleen weergegeven bij zweven. Als u wilt dat het pictogram altijd verschijnt, schakelt u deze instelling uit.

Knop Zweef tekstkleur

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur zal overgaan van de basiskleur die in de vorige instellingen is gedefinieerd.

Knop Aanwijzer achtergrondkleur

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur zal overgaan van de basiskleur die in de vorige instellingen is gedefinieerd.

Knop Zweef de randkleur

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze kleur gebruikt. De kleur zal overgaan van de basiskleur die in de vorige instellingen is gedefinieerd.

Knop Beweeg Border Radius

Wanneer de knop met de muis van een bezoeker wordt verplaatst, wordt deze waarde gebruikt. De waarde gaat over van de basiswaarde die in de vorige instellingen is gedefinieerd.

Knop Hover Letter Spacing

Wanneer de knop met de muis van een bezoeker wordt verplaatst, wordt deze waarde gebruikt. De waarde gaat over van de basiswaarde die in de vorige instellingen is gedefinieerd.

Fullwidth Header Geavanceerde opties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID’s toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw kindthema.

volledige breedte header-module

CSS ID

Voer een optionele CSS-ID in die voor deze module moet worden gebruikt. Een ID kan worden gebruikt om aangepaste CSS-stijlen te maken of om koppelingen naar bepaalde delen van uw pagina te maken.

CSS-klasse

Voer optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi Child-thema of in de aangepaste CSS die u toevoegt aan uw pagina of uw website met behulp van de Divi Theme Options of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS rechtstreeks aan elk element kunt toevoegen. CSS-invoer in deze instellingen is al ingepakt in stijltags, dus u hoeft alleen CSS-regels in te voeren gescheiden door puntkomma’s.

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw module wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.