Kunne du tænke dig at forbedre dine blogindlæg? Divi ved at tilføje en Hero-sektion til den?
Hero-sektioner i fuld skærm ser godt ud på enhver webside, men de er især gode til blogindlæg.
Selvom det fremhævede billede er i fuld skærm, er der masser af designmuligheder til at placere titlen og metateksten. Det er nemt at gøre med Divi Theme Builder .
I denne artikel vil vi se flere måder at tilføje en helte-sektion i fuld skærm til din blogindlægsskabelon. Divi.
Lad os starte.
undersøgelse
Her er en forhåndsvisning af, hvad vi vil designe i denne øvelse.
Læs også: Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder
Hero-sektion med Post Title Desktop-versionsmodul
Hero-sektion med Post Title-mobilversionsmodul
Alternativt Hero sektionslayout med Post Title desktop version modul
Download DIVI nu!!!
Alternativt Hero-sektionslayout med mobilt Post Title-modul
Hero-sektion med metadata Desktop-version
Hero sektion med metadata mobil version
Download DIVI nu!!!
Blogindlægsskabeloner til din heltesektion i fuld skærm
Du kan oprette blogindlægsskabelonen i Divi Theme Builder fra bunden eller download en skabelon fra Elegant Themes Blog. Søg på bloggen for at finde dem "gratis blogindlæg skabelon". Hvis du downloader en skabelon, skal du sørge for at udpakke den.
Til vores eksempler vil vi bruge gratis blogindlægsskabelon til Divi's Fashion Designer Layout Pack . Vi bruger også layoutpakken gratis Sidehoved og sidefod Modedesigner .
Download eller opret din blogindlægsskabelon til din helte-sektion i fuld skærm
Du kan downloade din blogindlægsskabelon eller oprette en fra bunden. Vi uploader en, men processen for at oprette en helte-sektion i fuld skærm er den samme.
Se også: Divi: Sådan bruger du masker og baggrundsmønstre til en heltesektion
Metode 1: Fullscreen Post Title-modul
Denne metode vil bruge PostTitle modul . Det er et godt valg, hvis du vil vise alle oplysningerne samlet. Når du har din skabelon, skal du vælge redigeringsikonet for at åbne den.
Skabelonen, vi uploadede, har en sektion med det fremhævede billede. Vi fjerner denne sektion og tilføjer en Fuld bredde sektion på sin plads.
Vælg Fuld bredde Post titel på listen over moduler i fuld bredde.
Alle elementer er valgt som standard. Lad dem være aktiveret. Rul til Udvalgt billedplacering og vælg Over titel.
- Udvalgt billedplacering: Over titel
Rul til Baggrundsfarve og sæt farven til #fff9f2
- Baggrund: #fff9f2
Titeltekst
Vælg fanen Design. For titeltekst, behold H1 og vælg Playfair Display. Indstil den til venstrejusteret og vælg #34332e for farven.
- Titel:
- Overskriftsniveau: H1
- Skrifttype: Playfair Display
- Tekstjustering: venstrejusteret
- Tekstfarve: #34332e
Til tekststørrelse , indstil desktopversionen til 65px, mobilversionen til 42px og rækkehøjden til 1,2em.
- Titeltekststørrelse (desktop): 65px (desktop), 42px (telefon)
- Titellinjehøjde: 1,2 em
Meta tekst
Rul til Meta tekst. Vælg Montserrat for skrifttypen, og indstil den til medium, store bogstaver, højrejustering for desktopversionen og venstrejustering for mobilversionen. Vælg #7b7975 for farve.
- MetaFont:
- Skrifttype: Montserrat
- Vægt: Medium
- Stil: TT
- Metatekst:
- Justering: højre (skrivebord), venstre (telefon)
- Farve: #7b7975
Indstil skriftstørrelse for desktopversionen ved 14 px, for mobilversionen ved 10 px, bogstavafstanden ved 1 px og linjehøjden ved 1,6 em. Luk dine indstillinger og gem din skabelon.
- Metatekst:
- Størrelse (skrivebord): 14px
- Størrelse (telefon): 10px
- Bogstavafstand: 1px
- Linjehøjde: 1,6 em
Titel på baggrundsbillede
Hvis du beslutter dig for, at titlen skal vises på det valgte billede, skal du bruge de samme designindstillinger og gå tilbage til fanen Indhold.
Vælg Titel/metabaggrundsbillede for Udvalgt billedplacering.
- Udvalgt billedplacering: Titel/metabaggrundsbillede
Rul til Baggrund og vælg Baggrundsgradient. Indstil venstre farve til #fff9f2, højre farve til rgba(255,255,255,0), retning til 90 grader, startposition til 30% og vælg ja for at placere gradienten over billedet af baggrunden. Luk og gem dine indstillinger.
- Gradientstop:
- 30 %: #fff9f2
- 100 %: rgba(255,255,255,0)
- Gradientretning: 90 grader
- Firkantet gradient over baggrundsbillede : JA
Metode 2: Fuldskærms heltesektion med metadata
Denne metode vil bruge tekstmoduler med dynamisk indhold for informationen. Dette er en god mulighed, hvis du ønsker at vise alle elementer forskellige steder.
Først skal du downloade skabelonen og slette den første sektion. Vi genskaber modulerne og deres indstillinger i venstre kolonne, men vi gennemgår dem, så du kan konfigurere dem.
Indstillinger for fuldskærmshelteafsnit med metadata
Åbn indstillingerne for sektion og scroll til Baggrundsbillede. Vælg Baggrundsgradient og ændre indstillingerne som følger:
- Gradientstop:
- 30 %: #fff9f2
- 100 %: rgba(255,255,255,0)
- Gradientretning: 90 grader
- Firkantet gradient over baggrundsbillede : JA
Vælg Baggrundsbillede og vælg indstillingen Brug dynamisk indhold.
Vælg Udvalgte billede i mulighederne.
Vælg fanen Designog scroll til dimensionering. Tilføj 100vh til minimumshøjden. Luk sektionsindstillingerne.
- Min højde: 100vh
Indstillinger for fuldskærmshelteafsnit med metadata
Tilføj derefter en række med to kolonner til sektionen.
Tilføj en Tekstmodul i højre kolonne.
For hans indhold, vælg Brug dynamisk indhold.
Vælg Post/arkivtitel på listen over muligheder.
- Dynamisk indhold: Post-/arkivtitel
Gå til fanen Design.
- Overskrift:
- Tekst: H1
- Skrifttype: Playfair Display
- Tekstjustering: venstrejusteret
- Tekstfarve: #34332e
Til størrelsen af tekster , indstillet til desktopversion til 65px, for mobilversion til 42px og rækkehøjde til 1,2em.
- Overskrift:
- Tekststørrelse: 65px (skrivebord), 42px (telefon)
- Linjehøjde: 1,2 em
Rul til Mellemrum og indtast 50 % for toppolstring. Luk Indstillinger.
- Polstring: 50% (øverst)
Du kan også læse denne artikel om: Sådan opretter du en heltesektion med Divi's Header-modul i fuld bredde
Heltesektion med metadatakategori
Tilføj et nyt afsnit almindelig under Hero-sektionen.
Åbn dens indstillinger og indstil farve baggrund på #fff9f2. Luk Indstillinger.
- Baggrundsfarve: #fff9f2
Tilføj derefter a linje af 4 kolonner til den nye sektion.
Helt på fuld skærm med metadatakategoritekst
Tilføj en Tekstmodul i venstre kolonne.
Åbn modulindstillingerne og vælg Brug dynamisk indhold for tekstens brødtekst.
Vælg Tidligere kategorier på listen.
- Dynamisk indhold: Indlægskategorier
Vælg fanen Design og rul ned til Overskriftstekst. Vælg H4. Vælg Playfair Display for skrifttypen og indstil den til medium, store bogstaver, højrejustering for desktopversionen og venstrejustering for telefonversionen. Vælg #7b7975 for farve.
- Overskrift:
- Tekstvisning
- Skrifttype: Playfair Display
- Skrifttypevægt: Medium
- Stil: TT
- Tekstjustering: Center
- Tekstfarve: #7b7975
Indstil skriftstørrelsen for desktopversionen til 14 px, for mobilversionen til 10 px, bogstavafstand til 1 px og linjehøjde til 1,6 em. Luk dine indstillinger og gem din skabelon.
- Overskrift 4:
- Størrelse (skrivebord): 14px
- Størrelse (telefon): 10px
- Bogstavafstand: 1px
- Linjehøjde: 1,6 em
Rul til Mellemrum og tilføj 0px til bundmargenen. Luk Indstillinger.
- Margen (bund): 0px
Fuldskærms heltesektion med metatekstmetadata
Kopier derefter kategorimodulet og træk det til næste kolonne. Hvert af Meta-modulerne har de samme indstillinger. Vi vil vise, hvordan man opretter det første modul og derefter kopiere det to gange for at oprette de andre moduler.
Forfatter
Åbn indstillinger og slet indhold dynamisk.
Klik Brug dynamisk indhold og vælg Postforfatter.
- Dynamisk indhold: Postforfatter
I fanen Design, Skift følgende indstillinger.
- Overskrift 4:
- Skrifttype: Montserrat
- Skrifttypevægt: Medium
- Stil: TT
- Tekstjustering (skrivebord): Center
- Tekstjustering (telefon): Venstre
- Farve: #7b7975
Parametrene for skriftstørrelse omfatte:
- Tekststørrelse: 14px (desktop), 10px (telefon)
- Bogstavafstand: 1px
- Linjehøjde: 1,6 em
La bundmargen skal have 0px.
- Margen (bund): 0px
Dato
kopi forfattermodulet og træk det til næste kolonne.
Slet det indhold Dynamique nuværende, vælg Brug dynamisk indhold og vælg Efterudgivelsesdato. Luk Indstillinger.
- Dynamisk indhold: Efterudgivelsesdato
kommentarer
Endelig kopi modulet Post Publish Date, og træk det til den sidste kolonne.
Som med andre moduler skal du fjerne det dynamiske indhold og vælge Brug dynamisk indhold .
Vælg Indsend kommentarer Antal fra dine valg.
- Dynamisk indhold: Antal indlæg
Denne gang tilføjer du et mellemrum og ordet Kommentarer i feltet Efter . Luk den lille modal og luk derefter indstillingerne. Gem dit arbejde.
- Efter: Kommentarer
Læs også: Divi: Sådan får du vist Fullwidth Header-modulet i fuld skærm
résultats
Hero-sektion med Post Title Desktop-versionsmodul
Hero-sektion med Post Title-mobilversionsmodul
Alternativt Hero sektionslayout med Post Title desktop version modul
Alternativt Hero-sektionslayout med mobilt Post Title-modul
Hero-sektion med metadata Desktop-version
Helteafsnit med metadata for mobilversion
Download DIVI nu!!!
Konklusion
Det er det hele! Dette er vores kig på, hvordan du tilføjer en helte-sektion i fuld skærm til din blogindlægsskabelon. Divi.
Moduler Divi og Theme Builder tilbyder flere muligheder for at oprette helte-sektioner i fuld skærm. Alle metoder fungerer meget godt, og alle har deres fordele.
Ved at bruge disse metoder kan du tilføje en helte-sektion i fuld skærm til enhver Divi blogindlægsskabelon.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
