Wil je je blogposts verbeteren? Divi door er een Hero-sectie aan toe te voegen?
Heldensecties op volledig scherm zien er geweldig uit op elke webpagina, maar ze zijn vooral geweldig op blogposts.
Hoewel de weergegeven afbeelding schermvullend is, zijn er tal van ontwerpopties voor het plaatsen van de titel en metatekst. Het is gemakkelijk te doen met de Divi Thema Builder .
In dit artikel zullen we verschillende manieren zien om een Hero-sectie op volledig scherm toe te voegen aan je blogberichtsjabloon. Divi.
Laten we beginnen.
overzicht
Hier is een voorbeeld van wat we in deze zelfstudie gaan ontwerpen.
Lees ook: Divi: Hoe gebruik je de "Gradient Builder" om je afbeeldingen mooier te maken
Hero-sectie met Posttitel Desktop-versiemodule
Heldensectie met module Posttitel mobiele versie
Alternatieve Hero-sectielay-out met Post Title-desktopversiemodule
Download DIVI nu!!!
Alternatieve lay-out van Hero-sectie met module voor mobiele posttitel
Heldensectie met metadata Desktopversie
Heldensectie met metadata mobiele versie
Download DIVI nu!!!
Blogpost-sjablonen voor uw Hero-sectie op volledig scherm
U kunt de sjabloon voor blogposts maken in Divi Theme Builder helemaal opnieuw of download een sjabloon van de Elegant Themes-blog. Zoek in de blog om ze te vinden "gratis blogpost-sjabloon". Als u een sjabloon downloadt, zorg er dan voor dat u deze uitpakt.
Voor onze voorbeelden gebruiken we de gratis blogberichtsjabloon voor Divi's Fashion Designer Layout Pack . Wij maken ook gebruik van het layoutpakket en is gratis Kop- en voettekst Modeontwerper .
Download of maak je blogberichtsjabloon voor je Hero-sectie op volledig scherm
U kunt uw blogberichtsjabloon downloaden of er een helemaal opnieuw maken. We zullen er een uploaden, maar het proces voor het maken van een Hero-sectie op volledig scherm is hetzelfde.
Zie ook: Divi: maskers en achtergrondpatronen gebruiken voor een heldensectie
Methode 1: Module Posttitel op volledig scherm
Deze methode gebruikt de PostTitle-module . Het is een goede keuze als u alle informatie bij elkaar wilt weergeven. Zodra u uw sjabloon hebt, selecteert u het bewerkingspictogram om het te openen.
De sjabloon die we hebben geüpload, heeft een sectie met de uitgelichte afbeelding. We zullen deze sectie verwijderen en een toevoegen Sectie over de volledige breedte op zijn plaats.
Selecteer Titel van bericht op volledige breedte in de lijst met modules over de volledige breedte.
Alle items zijn standaard geselecteerd. Laat ze ingeschakeld. Scroll naar Uitgelichte afbeelding plaatsing en selecteer Boven titel.
- Plaatsing uitgelichte afbeelding: boven titel
Scroll naar Achtergrond kleur en stel de kleur in op #fff9f2
- Achtergrond: #fff9f2
Titel tekst
Selecteer het tabblad Ontwerp. Houd voor titeltekst H1 en kies Playfair Display. Zet het op Links uitgelijnd en kies #34332e voor de kleur.
- Titel:
- Koersniveau: H1
- Lettertype: Playfair Display
- Tekstuitlijning: links uitgelijnd
- Tekstkleur: #34332e
de lettergrootte , stel de desktopversie in op 65px, de mobiele versie op 42px en de rijhoogte op 1,2em.
- Titeltekstgrootte (desktop): 65px (desktop), 42px (telefoon)
- Hoogte titelregel: 1,2 em
Metatekst
Scroll naar Metatekst. Selecteer Montserrat als lettertype en stel het in op medium, hoofdletters, rechts uitgelijnd voor de desktopversie en links uitgelijnd voor de mobiele versie. Kies #7b7975 voor kleur.
- MetaFont:
- Lettertype: Montserrat
- Gewicht: gemiddeld
- Stijl: TT
- Metatekst:
- Uitlijning: rechts (desktop), links (telefoon)
- Kleur: #7b7975
Definieer de lettertypegrootte voor de desktopversie op 14 px, voor de mobiele versie op 10 px, de letterafstand op 1 px en de regelhoogte op 1,6 em. Sluit uw instellingen en sla uw sjabloon op.
- Metatekst:
- Grootte (bureaublad): 14px
- Grootte (telefoon): 10px
- Letterafstand: 1px
- Lijnhoogte: 1,6 em
Titel op achtergrondafbeelding
Als u besluit dat u de titel op de uitgelichte afbeelding wilt laten verschijnen, gebruikt u dezelfde ontwerpinstellingen en gaat u terug naar het tabblad Content.
Selecteer Titel/meta-achtergrondafbeelding voor Uitgelichte afbeelding plaatsing.
- Plaatsing uitgelichte afbeelding: titel/meta-achtergrondafbeelding
Scroll naar Achtergrond en selecteer Achtergrond verloop. Stel linkerkleur in op #fff9f2, rechterkleur op rgba(255,255,255,0), richting op 90 graden, startpositie op 30% en kies ja om het verloop boven de achtergrondafbeelding te plaatsen. Sluit en sla uw instellingen op.
- Gradiëntstops:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Gradiëntrichting: 90 graden
- Vierkant verloop boven achtergrondafbeelding: JA
Methode 2: Hero-sectie op volledig scherm met metadata
Deze methode gebruikt tekstmodules met dynamische inhoud voor de informatie. Dit is een goede optie als u alle items op verschillende plaatsen wilt weergeven.
Download eerst de sjabloon en verwijder de eerste sectie. We zullen de modules en hun instellingen opnieuw maken in de linkerkolom, maar we lopen er doorheen zodat u ze kunt configureren.
Instellingen heldensectie op volledig scherm met metadata
Open de instellingen van de sectie en scroll naar Achtergrond afbeelding. Selecteer Achtergrond verloop en wijzig de instellingen als volgt:
- Gradiëntstops:
- 30%: #fff9f2
- 100%: rgba(255,255,255,0)
- Gradiëntrichting: 90 graden
- Vierkant verloop boven achtergrondafbeelding: JA
Selecteer Achtergrond afbeelding en kies de optie Gebruik dynamische inhoud.
Kiezen Uitgelichte Afbeelding bij de opties.
Selecteer het tabblad Designen scroll naar Afmetingen. Voeg 100vh toe aan de minimale hoogte. Sluit de sectie-instellingen.
- Minimale hoogte: 100vh
Instellingen heldensectie op volledig scherm met metadata
Voeg vervolgens een rij met dubbele kolommen toe aan de sectie.
Voeg een ... toe Tekst module in de rechterkolom.
Voor zijn inhoud, selecteer Gebruik dynamische inhoud.
Kiezen Titel bericht/archief in de lijst met opties.
- Dynamische inhoud: titel van bericht/archief
Ga naar tabblad Design.
- rubriek:
- Tekst: H1
- Lettertype: Playfair Display
- Tekstuitlijning: links uitgelijnd
- Tekstkleur: #34332e
Voor de maat van teksten , ingesteld voor desktopversie op 65px, voor mobiele versie op 42px en rijhoogte op 1,2em.
- rubriek:
- Tekstgrootte: 65px (desktop), 42px (telefoon)
- Lijnhoogte: 1,2 em
Scroll naar Spacing en voer 50% in voor opvulling bovenaan. Sluit Instellingen.
- Vulling: 50% (bovenkant)
U kunt dit artikel ook lezen op: Een heldensectie maken met Divi's Fullwidth Header-module
Hero-sectie met metadatacategorie
Een nieuwe sectie toevoegen regelmatig onder de Hero-sectie.
Open de instellingen en stel de couleur achtergrond op #fff9f2. Sluit Instellingen.
- Achtergrondkleur: #fff9f2
Voeg dan een toe lijn van 4 kolommen naar de nieuwe sectie.
Held op volledig scherm met metadatacategorietekst
Voeg een ... toe Tekst module in de linkerkolom.
Open de module-instellingen en selecteer Gebruik dynamische inhoud voor de kern van de tekst.
Selecteer Eerdere categorieën in de lijst.
- Dynamische inhoud: berichtcategorieën
Selecteer het tabblad Design en scrol omlaag naar Koptekst. Selecteer H4. Kies Playfair Display voor het lettertype en stel het in op medium, hoofdletters, rechts uitlijnen voor de desktopversie en links uitlijnen voor de telefoonversie. Kies #7b7975 voor kleur.
- rubriek:
- Tekstweergave
- Lettertype: Playfair Display
- Lettertypegewicht: Gemiddeld
- Stijl: TT
- Tekstuitlijning: Midden
- Tekstkleur: #7b7975
Stel de lettergrootte voor de desktopversie in op 14 px, voor de mobiele versie op 10 px, letterafstand op 1 px en regelhoogte op 1,6 em. Sluit uw instellingen en sla uw sjabloon op.
- Rubriek 4:
- Grootte (bureaublad): 14px
- Grootte (telefoon): 10px
- Letterafstand: 1px
- Lijnhoogte: 1,6 em
Scroll naar Spacing en voeg 0px toe aan de ondermarge. Sluit Instellingen.
- Marge (onder): 0px
Heldengedeelte op volledig scherm met metadata van metatekst
Kopieer vervolgens de categoriemodule en sleep deze naar de volgende kolom. Elk van de Meta-modules heeft dezelfde instellingen. We laten zien hoe u de eerste module maakt en deze vervolgens twee keer kopieert om de andere modules te maken.
Auteur
Open instellingen en verwijder de inhoud dynamisch.
Klik op Gebruik dynamische inhoud en kies Post auteur.
- Dynamische inhoud: auteur plaatsen
Op het tabblad Design, Wijzig de volgende instellingen.
- Rubriek 4:
- Lettertype: Montserrat
- Lettertypegewicht: Gemiddeld
- Stijl: TT
- Tekstuitlijning (bureaublad): midden
- Tekstuitlijning (telefoon): Links
- Kleur: #7b7975
De parameters van lettertypegrootte omvatten:
- Tekstgrootte: 14px (desktop), 10px (telefoon)
- Letterafstand: 1px
- Lijnhoogte: 1,6 em
La de ondergrens moet 0px hebben.
- Marge (onder): 0px
Datum
exemplaar de module Auteur en sleep deze naar de volgende kolom.
Verwijder het inhoud dynamique actueel, kies Gebruik dynamische inhoud en selecteer Publicatiedatum posten. Sluit Instellingen.
- Dynamische inhoud: post-publicatiedatum
commentaires
Eindelijk, kopiëren de module Postpublicatiedatum en sleep deze naar de laatste kolom.
Net als bij andere modules, verwijdert u de dynamische inhoud en selecteert u Gebruik dynamische inhoud .
Kiezen Aantal reacties plaatsen uit je keuzes.
- Dynamische inhoud: Aantal reacties geplaatst
Voeg deze keer een spatie toe en het woord Opmerkingen in het veld Na . Sluit de kleine modal en sluit vervolgens de instellingen. Sla je werk op.
- Na: Opmerkingen
Lees ook: Divi: de Fullwidth Header-module op volledig scherm weergeven
Resultaten
Hero-sectie met Posttitel Desktop-versiemodule
Heldensectie met module Posttitel mobiele versie
Alternatieve Hero-sectielay-out met Post Title-desktopversiemodule
Alternatieve lay-out van Hero-sectie met module voor mobiele posttitel
Heldensectie met metadata Desktopversie
Hero-sectie met metadata van de mobiele versie
Download DIVI nu!!!
Conclusie
Dat is alles ! Dit is onze kijk op hoe je een Hero-sectie op volledig scherm kunt toevoegen aan je blogberichtsjabloon. Divi.
Modules Divi en Theme Builder bieden verschillende opties voor het maken van heldensecties op volledig scherm. Alle methoden werken heel goed en hebben allemaal hun voordelen.
Met deze methoden kunt u een Hero-sectie op volledig scherm toevoegen aan elk Divi-blogberichtsjabloon.
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.
Aarzel niet om ook onze gids te raadplegen over 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.
...