Wilt u de Divi Fullwidth Header-module schermvullend weergeven?
Kopteksten op volledig scherm beslaan het volledige scherm, ongeacht de schermgrootte van de bezoeker. Dit is geweldig om de aandacht van gebruikers te trekken. Gelukkig is het eenvoudig om met de module een header op volledig scherm te maken Header over de volledige breedte van Divi.
In dit artikel laten we u zien hoe u een koptekst over de volledige breedte maakt, deze aanpast en op volledig scherm weergeeft. U kunt deze aanpak gebruiken om een heldengedeelte op volledig scherm voor uw pagina's te maken.
Laten we beginnen.
overzicht
Laten we een voorbeeld bekijken van wat we in deze zelfstudie gaan ontwerpen.
Bureau
tablet
Telefoon
Hoe u van uw Divi-koptekst op volledige breedte een koptekst op volledig scherm kunt maken
Begin met het toevoegen van een sectie over de volledige breedte aan de pagina waaraan u werkt.
Voeg dan een toe Fullwidth Header-module naar het volledige gedeelte.
De module-instellingen worden geopend. Selecteer tabblad Design. Activeer de optie genaamd Volledig scherm maken
We hebben nu een koptekst op volledig scherm. Zo simpel is het.
Scrollpictogram inschakelen
We kunnen ook een knop toevoegen die de gebruiker vertelt naar beneden te scrollen. We moeten het echter inschakelen. Deze knop is altijd zichtbaar in de optie Volledig scherm. De optie voor de koptekst op volledig scherm komt altijd overeen met de schermhoogte van de bezoeker.
- Toon Scroll Down-knop: JA
Divi Fullwidth Fullscreen Header Voorbeeld
Fullwidth Header Module Parameters
Dit zijn de stappen voor elke sectie van de Fullwidth Header-module-instellingen.
Lees ook: Divi: Hoe achtergrondmaskers en scheidingstekens te combineren
Teksten
Alle voeg eerst de tekst toe die zichtbaar zal zijn in de koptekst over de volledige breedte. Dit omvat de titel, ondertitel, inhoud en de knoptekst.
- Titel: Creëer jouw blog met Divi
- Ondertitel: Blogpascher
- Burron #1: Samenvatting
- Knop #2: Schema
- Lichaam: (standaard)
Afbeeldingen
dan foto toevoegen. Dit wordt weergegeven aan de rechterkant van de koptekst over de volledige breedte, waardoor de tekst naar links wordt verschoven.
- Headerafbeelding: uw keuze
achtergrond
Scroll naar Achtergrond en stel de kleur in op #f6f5ee.
- Achtergrondkleur: #f6f5ee
Aanleg
Navigeer vervolgens naar het tabblad Ontwerpen.
- Volledig scherm maken: JA
Scroll naar beneden icoon
- Toon Scroll Down-knop: JA
- Scroll naar beneden Pictogramkleur: #000000 (desktop en tablet), #ffffff (telefoon)
- Scroll naar beneden Pictogramgrootte: 70px (desktop), 60px (tablet), 50px (telefoon)
Titel tekst
Vervolgens passen we de aan titel tekst.
- Koersniveau: H1
- Lettertype: Inter
- Lettergewicht: vet
- Tekstuitlijning: Midden
- Tekstkleur: #000000
- Titel Tekstgrootte: 75px (desktop), 40px (tablet), 24px (telefoon)
- Titelregel Hoogte: 1.2em
Beschrijvingstekst
Scroll dan naar beneden naar Lichaamstaal.
- Lettertype: Open Sans
- Uitlijning: Links
- Kleur: #000000
- Tekstgrootte: 16px (desktop), 15px (tablet), 14px (telefoon)
- Lijnhoogte: 1.8em
subtitel
Scroll dan naar beneden naar Ondertitel tekst.
- Lettertype: Inter
- Lettergewicht: Vet
- Stijl: TT
- Uitlijning: Midden
- Kleur: #ff5a17
- Grootte: 14px
- Letterafstand: 1px
- Lijnhoogte: 1.8em
Knop #1
Scroll dan naar beneden naar Knop een.
- Gebruik aangepaste stijlen voor knop: JA
- Tekstgrootte: 20px (desktop), 18px (tablet), 16px (telefoon)
- Tekstkleur: #000000
- Achtergrondkleur: #ffffff
- Randbreedte: 0px
- Grensstraal: 0px
- Lettertype: Inter
- Lettergewicht: Vet
- Icoon: jouw keuze
- Pictogramkleur: #000000
- Plaatsing: Rechts
- Alleen pictogram weergeven bij zweven voor knop één: NEE
Scroll ten slotte omlaag naar opties Knop één vulling.
- Vulling:
- Desktop: 20px (boven en onder), 40px (links en rechts)
- Tablet: 16px (boven en onder), 40px (links en rechts)
- Telefoon: 12px (boven en onder), 40px (links en rechts)
Knop #2
Scroll ten slotte naar beneden naar Knop Twee.
- Gebruik aangepaste stijlen voor knop twee: Ja
- Tekstgrootte: 20px (desktop), 18px (tablet), 16px (telefoon)
- Tekstkleur: #ffffff
- Achtergrondkleur: #ff5a17
- Randbreedte: 0px
- Grensstraal: 0px
- Lettertype: Inter
- Lettergewicht: Vet
Kies je favoriete icoon.
- Icoon: jouw keuze
- Pictogramkleur: #000000
- Plaatsing: links
- Alleen pictogram weergeven bij zweven voor knop twee: NEE
Scroll ten slotte naar beneden naar de opties Knop twee vulling.
- Vulling:
- Desktop: 20px (boven en onder), 40px (links en rechts)
- Tablet: 16px (boven en onder), 40px (links en rechts)
- Telefoon: 12px (boven en onder), 40px (links en rechts)
Definitieve resultaten
Zo ziet onze header over de volledige breedte eruit op desktops, tablets en telefoons.
U kunt ook raadplegen: Divi: schaduw- en zweefeffecten gebruiken om interactieve inhoud te maken
Bureau
tablet
Telefoon
Download DIVI nu!!!
Conclusie
Hier is hoe u een Fullwidth Header kunt maken met uw Divi Fullwidth Header-module.
Het proces is eenvoudig en het ziet er geweldig uit op elk apparaat. De knop toevoegen Naar beneden scrollen is een geweldige visual die gebruikers vertelt dat ze kunnen scrollen.
Het ontwerpen van een header op volledig scherm is vergelijkbaar met het ontwerpen van een Hero-sectie. Door een paar eenvoudige richtlijnen te volgen, kunt u geweldige headers op volledig scherm maken met Divi's Fullwidth Header-module.
We hopen dat deze tutorial je zal inspireren 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 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.
...
