De menumodule op volledig scherm op Divi maakt het gemakkelijk om prachtige gekleurde kopteksten toe te voegen bovenaan uw pagina's (of waar dan ook op uw website, als u dat wilt). Deze modules kunnen alleen in secties over de volledige breedte worden geplaatst.

Hoe de Divi-menumodule Volledig scherm toe te voegen

Voordat u een menumodule Volledig scherm aan uw pagina kunt toevoegen, moet u eerst naar Divi Builder springen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Klik op deze knop om Divi Builder te activeren en toegang te krijgen tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Visual Builder inschakelen wanneer u door uw bladert Site web op de voorgrond als u bent ingelogd op uw WordPress-dashboard.

Nadat u Visual Builder heeft geopend, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules voor volledig schermmenu kunnen alleen worden toegevoegd in secties over de volledige breedte. Als u een nieuwe pagina begint, vergeet dan niet eerst een sectie over de volledige breedte aan uw pagina toe te voegen.

Zoek de koptekstmodule op volledig scherm in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "koptekst op volledig scherm" kunt typen en vervolgens op "Enter" kunt klikken om de koptekstmodule op volledig scherm automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet door de lijst met moduleopties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

Gebruiksvoorbeeld: een koptekst op volledig scherm toevoegen aan een pagina Over

Voor dit voorbeeld laat ik je zien hoe je de Fullwidth header-module kunt gebruiken om een ​​header met aangepaste tekst en een achtergrondafbeelding toe te voegen.

Alle modules op volledig scherm zijn alleen beschikbaar als u secties op volledig scherm gebruikt. Voeg met Visual Builder een nieuw gedeelte op volledig scherm in. Voeg vervolgens een Persoonsmodule toe aan de sectie.

Werk de koptekstinstellingen op het volledige scherm als volgt bij:

Inhoud opties

Titel: Over ons Ondertiteltekst: We doen dingen anders ... URL van achtergrondafbeelding: [voeg afbeelding van 1920 x 800 in] Overlay-achtergrondkleur: rgba (0,0,0,0.2 , XNUMX)

Ontwerpopties

Oriëntatie van tekst en logo: Middelste knop Omlaag bladeren Knop: JA Pictogram: [pictogram selecteren] Pictogram omlaag bladeren Kleur: # fcbf00 Pictogram bladeren: 50px Tekstkleur: Licht Tekstkleur: # fcbf00 Lettertype Titel: Open zonder, vet, hoofdletters Titel Lettergrootte: 60px (desktop), 40px (tablet), 30px (telefoon) Ondertiteling Lettergrootte: 25px

Geavanceerde opties (aangepaste CSS)

Hoofdelement:
bekleding: 100px 0;

Dat is het!

Inhoudsopties voor koptekst op volledig scherm

Op het inhoudstabblad vind je alle inhoudselementen van de module, zoals tekst, afbeeldingen en iconen. Dat alles controleert wat verschijnt in uw module, vindt u altijd op dit tabblad.

Titel

Voer hier de titel van uw pagina in.

Tekst van de ondertiteling

Als je een ondertitel wilt gebruiken, voeg deze dan hier toe. Uw bijschrift wordt in een klein lettertype onder uw titel weergegeven.

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 koptekst wordt geplaatst en de titeltekst.

Knop URL 1

Voer de URL van de knop in.

Knop URL 2

Voer de URL van de knop in.

Logo afbeelding url

Upload je gewenste afbeelding of typ de URL van de afbeelding die je wilt bekijken.

URL van koptekstafbeelding

Upload je gewenste afbeelding of typ de URL van de afbeelding die je wilt bekijken.

URL van achtergrondafbeelding

Indien ingesteld, wordt deze afbeelding gebruikt als achtergrond voor deze module. Om een ​​achtergrondafbeelding te verwijderen, verwijdert u gewoon de URL uit het instellingenveld. De achtergrondafbeeldingen verschijnen bovenop de achtergrondkleuren, wat betekent dat de achtergrondkleur niet zichtbaar is wanneer een achtergrondafbeelding wordt toegepast.

Achtergrondkleur

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

Achtergrond overlay kleur

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

Administratie label

Hierdoor wordt het modulelabel in de constructor gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.

Ontwerpopties voor de volledige breedte van de header

Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Dit is het tabblad dat u gaat gebruiken om het uiterlijk van uw module te wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om alles te wijzigen.

Tekst- en logo-oriëntatie

Dit bepaalt hoe uw tekst wordt uitgelijnd in de module.

Maak een volledig scherm

Hier kunt u kiezen of de koptekst wordt vergroot tot volledige schermgrootte.

Gebruik het Parallax-effect

Indien ingeschakeld, hebben uw achtergrondafbeeldingen een vaste positie zoals uw scroll, waardoor een leuk parallax-effect ontstaat.

Parallax-methode

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

Knop omlaag tonen weergeven

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

icon

Kies een pictogram om weer te geven voor de knop Scroll naar beneden.

Scroll naar beneden Kleur pictogram

Standaard neemt het dropdown-pictogram 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 schuiven dat onder aan uw koptekst wordt weergegeven, groter of kleiner te maken.

Verticale beelduitlijning

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

Tekstkleur

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

Verticale uitlijning van de tekst

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 te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor 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 verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Titel tekstkleur

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

Afstand van titelletters

Letterafstand is van invloed op 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte van de titelregel

Regelhoogte is van invloed op de ruimte tussen elke regel van uw titeltekst. 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 in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Inhoud lettertype

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

Lettergrootte van de inhoud

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

Inhoud tekstkleur

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

Inhoudsbrieven uit elkaar plaatsen

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw inhoudstekst 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte van de inhoudsregel

Rijhoogte is van invloed op de ruimte tussen elke rij van uw inhoudstekst.Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Ondertitellettertype

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

Grootte van het ondertitel-lettertype

Hier kunt u de grootte van uw bijschrifttekst aanpassen. U kunt de bereikschuifregelaar slepen om de grootte van uw tekst te vergroten of verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Tekstkleur ondertiteling

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

Afstand tussen ondertitel letters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter in uw bijschrifttekst 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Hoogte van de ondertitelregel

De regelhoogte is van invloed op de ruimte tussen elke regel van uw bijschrifttekst. Als u de ruimte tussen elke rij 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Maximale tekstbreedte

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

Gebruik aangepaste stijlen voor de knop

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

Knop tekstgrootte

Deze instelling kan worden gebruikt om de grootte van de tekst in de knop te vergroten of te verkleinen. De knop past zich aan naarmate de tekst groter en kleiner wordt.

Knop tekstkleur

Standaard nemen de knoppen de accentkleur van uw thema aan, zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste tekstkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de knopkleur te wijzigen.

Knop achtergrondkleur

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

Randbreedte-knop

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

Knooprandkleur

Standaard nemen knopranden de accentkleur van uw thema over zoals gedefinieerd in de Theme Customizer. Met deze optie kunt u een aangepaste randkleur toewijzen aan de knop van deze module. Selecteer uw aangepaste kleur met behulp van de kleurkiezer om de kleur van de knoprand te wijzigen.

Knoop de randradius

De straal van de rand heeft invloed op de rondheid van de hoeken van uw knoppen. Standaard hebben de knoppen in Divi een kleine randradius die de hoeken met 3 pixels rond maakt. U kunt deze waarde verlagen tot 0 om een ​​vierkante knop te maken of aanzienlijk verhogen om knoppen met ronde randen te maken.

Afstand van knopletters

Letterafstand is van invloed op 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 maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maatwaarde, om het type eenheid te wijzigen.

Knop lettertype

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

Voeg een knoppictogram toe

Uitgeschakeld, deze instelling verwijdert pictogrammen van uw knop. Standaard geven alle Divi-knoppen een pijlpictogram weer op de muisaanwijzer.

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.

Kleur pictogram knop

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

Pictogramplaatsingstoets

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

Alleen pictogram weergeven wanneer u over de knop beweegt

Standaard worden knoppictogrammen alleen weergegeven tijdens het zweven. Schakel deze instelling uit als u wilt dat het pictogram altijd wordt weergegeven.

Knop Tekstkleur verbergen

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

Achtergrondkleur van knop met aanwijsknop (zweefknopkleur)

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

Knop Randkleur overzetten (zwevende randkleur)

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

Knop Randstraal zweven

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.

Knop voor het markeren van afstanden van notities

Wanneer de knop met de muis van een bezoeker wordt bewogen, wordt deze waarde gebruikt. De waarde zal veranderen van de basiswaarde die is gedefinieerd in de vorige instellingen.

Geavanceerde koptekstopties over de volledige breedte

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 elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's op de module toepassen, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

CSS ID

Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een ​​aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.

CSS-klasse

Voer de optionele CSS-klassen in die u voor deze module wilt gebruiken. Een CSS-klasse kan worden gebruikt om aangepaste CSS-stijlen te maken. Je kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze klassen kunnen worden gebruikt in uw Divi-kindthema of in de aangepaste CSS-stylesheet die u aan uw pagina of website toevoegt. Site web met behulp van Divi-themaopties of Divi Builder-pagina-instellingen.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en elk van de interne onderdelen van de module. In de sectie Aangepaste CSS vindt u een tekstveld waar u aangepaste CSS-stijlpagina's rechtstreeks aan elk element kunt toevoegen. CSS-vermeldingen in deze instellingen zijn al verpakt in stijltags. Voer dus gewoon de CSS-regels in, gescheiden door puntkomma's.

zichtbaarheid

Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken, of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DIVI THEMA [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DOWNLOAD DE TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Andere Divi-zelfstudies

• 5 websites voor restaurant gebruik Divi thema
• Tekst toevoegen aan een Divi WooCommerce-product
• Hoe de menukleur tussen Divi-pagina's te veranderen
• Hoe de rasters van een blog personaliseren met Divi
• Hoe de rol Divi editor op WordPress
• Een Divi-schuifregelaar op volledig scherm maken
• Hoe de kleur van menu's tussen Divi-pagina's te veranderen
• Functies die u waarschijnlijk niet kent over Divi
• Divi Builder gebruiken op WordPress
• Hoe de Divi-scrolmodule video te gebruiken
• Hoe de Divi Builder Flip-module te gebruiken
• Hoe een getuigenismodule op Divi Builder toe te voegen
• Hoe de Divi-tekstmodule te gebruiken
• Hoe maak je een schuifregelaar op Divi
• Hoe u een Divi-gebruikersrol kunt bewerken
• Hoe de Divi Social Media-module te gebruiken
• Hoe de shopmodule te gebruiken met het thema WordPress Divi
• Hoe de Divi zijbalkmodule te gebruiken
• Hoe de Divi Price Table-module te gebruiken
• Hoe de titelmodule van Divi-publicaties te gebruiken
• Hoe een videomodule van Divi toe te voegen
• Hoe de artikelnavigatiemodule te gebruiken
• Hoe de Divi-zoekmodule te gebruiken
• Hoe de Divi wallet-module te gebruiken
• Hoe de persoonsmodule op Divi Builder te gebruiken
• De walletmodule gebruiken met Divi-filter
• De schuifregelaarmodule op de volledige breedte gebruiken
• Hoe de Divi Builder-beeldmodule te gebruiken
• De navigatiemodule op de volledige breedte van Divi Builder gebruiken
• Hoe de afbeeldingengalerij-module te gebruiken
• Hoe de Divi Builder kaartmodule met volledige breedte te gebruiken
• Hoe de Divi Full Width Portfolio Module te gebruiken
• Hoe de Divi header-module over de volle breedte te gebruiken
• Hoe de Divi Counter-module te gebruiken
• De schuifregelaar voor artikelen gebruiken in Divi Builder
• Hoe de Divi Email Optin-module te gebruiken