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

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Heldensectie met module Posttitel mobiele versie

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Alternatieve Hero-sectielay-out met Post Title-desktopversiemodule

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Download DIVI nu!!!

Alternatieve lay-out van Hero-sectie met module voor mobiele posttitel

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Heldensectie met metadata Desktopversie

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Heldensectie met metadata mobiele versie

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

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

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Heldensectie met module Posttitel mobiele versie

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Alternatieve Hero-sectielay-out met Post Title-desktopversiemodule

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Alternatieve lay-out van Hero-sectie met module voor mobiele posttitel

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Heldensectie met metadata Desktopversie

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

Hero-sectie met metadata van de mobiele versie

verbeter uw Divi-blogposts door een Hero-sectie toe te voegen

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.

...