Vil du forbedre blogginnleggene dine? Divi ved å legge til en helteseksjon i den?
Helt-seksjoner på fullskjerm ser bra ut på alle nettsider, men de er spesielt flotte på blogginnlegg.
Selv om det fremhevede bildet er fullskjerm, er det mange designalternativer for å plassere tittel og metatekst. Det er lett å gjøre med Divi Theme Builder .
I denne artikkelen vil vi se flere måter å legge til en heltedel i fullskjerm i blogginnleggsmalen din. Divi.
La oss begynne.
undersøkelsen
Her er en forhåndsvisning av hva vi skal utforme i denne opplæringen.
Les også: Divi: Hvordan bruke "Gradient Builder" for å forskjønne bildene dine
Hero-seksjon med Post Title Desktop-versjonsmodul
Hero-seksjon med Post Tittel-mobilversjonsmodul
Alternativ Hero-seksjonslayout med Post Title desktop versjonsmodul
Last ned DIVI nå!!!
Alternativ Hero-seksjonslayout med mobil Post Title-modul
Hero-seksjon med metadata Desktop-versjon
Helteseksjon med metadata mobilversjon
Last ned DIVI nå!!!
Blogginnleggsmaler for din helskjermseksjon
Du kan lage blogginnleggsmalen i Divi Theme Builder fra bunnen av eller last ned en mal fra Elegant Themes Blog. For å finne dem, søk på bloggen "gratis mal for blogginnlegg". Hvis du laster ned en mal, sørg for å pakke den ut.
For våre eksempler vil vi bruke gratis blogginnleggsmal for Divi's Fashion Designer Layout Pack . Vi bruker også layoutpakken gratis Topptekst og bunntekst motedesigner .
Last ned eller lag en mal for blogginnlegg for Hele-delen i fullskjerm
Du kan laste ned malen for blogginnlegg eller lage en fra bunnen av. Vi laster opp en, men prosessen for å lage en helskjermseksjon er den samme.
Se også: Divi: Slik bruker du masker og bakgrunnsmønstre for en helteseksjon
Metode 1: Fullskjerm-modul for posttittel
Denne metoden vil bruke PostTitle-modul . Det er et godt valg hvis du ønsker å vise all informasjon samlet. Når du har malen, velg redigeringsikonet for å åpne den.
Malen vi lastet opp har en del med det fremhevede bildet. Vi fjerner denne delen og legger til en Seksjon i full bredde på sin plass.
Velg Tittel på full bredde i listen over moduler i full bredde.
Alle elementer er valgt som standard. La dem være aktivert. Bla til Utvalgt bildeplassering og velg Over tittel.
- Utvalgt bildeplassering: Over tittel
Bla til Bakgrunnsfarge og sett fargen til #fff9f2
- Bakgrunn: #fff9f2
Titteltekst
Velg fanen Design. For titteltekst, behold H1 og velg Playfair Display. Sett den til venstrejustert og velg #34332e for fargen.
- Tittel:
- Overskriftsnivå: H1
- Font: Playfair Display
- Tekstjustering: venstrejustert
- Tekstfarge: #34332e
For tekststørrelse , sett desktopversjonen til 65px, mobilversjonen til 42px og radhøyden til 1,2em.
- Titteltekststørrelse (skrivebord): 65px (skrivebord), 42px (telefon)
- Tittellinjehøyde: 1,2 em
Metatekst
Bla til Metatekst. Velg Montserrat for fonten og sett den til medium, store bokstaver, høyrejustering for skrivebordsversjonen og venstrejustering for mobilversjonen. Velg #7b7975 for farge.
- MetaFont:
- Font: Montserrat
- Vekt: Middels
- Stil: TT
- Metatekst:
- Justering: høyre (skrivebord), venstre (telefon)
- Farge: #7b7975
Sett skriftstørrelse for desktop-versjonen på 14 px, for mobilversjonen på 10 px, bokstavavstanden på 1 px og linjehøyden på 1,6 em. Lukk innstillingene og lagre malen.
- Metatekst:
- Størrelse (skrivebord): 14px
- Størrelse (telefon): 10px
- Bokstavavstand: 1px
- Linjehøyde: 1,6 em
Tittel på bakgrunnsbildet
Hvis du bestemmer deg for at tittelen skal vises på det fremhevede bildet, bruk de samme designinnstillingene og gå tilbake til fanen Innhold.
Velg Tittel/metabakgrunnsbilde for Utvalgt bildeplassering.
- Utvalgt bildeplassering: Tittel/metabakgrunnsbilde
Bla til Bakgrunn og velg Bakgrunnsgradient. Sett venstre farge til #fff9f2, høyre farge til rgba(255,255,255,0), retning til 90 grader, startposisjon til 30 % og velg ja for å plassere gradienten over bildet av bakgrunnen. Lukk og lagre innstillingene.
- Gradientstopp:
- 30 %: #fff9f2
- 100 %: rgba(255,255,255,0)
- Gradientretning: 90 grader
- Firkantet gradient over bakgrunnsbilde: JA
Metode 2: Helskjermseksjon med metadata
Denne metoden vil bruke tekstmoduler med dynamisk innhold for informasjonen. Dette er et godt alternativ hvis du vil vise alle elementer på forskjellige steder.
Først last ned malen og slett den første delen. Vi gjenskaper modulene og innstillingene deres i venstre kolonne, men vi går gjennom dem slik at du kan konfigurere dem.
Fullskjerms helteseksjonsinnstillinger med metadata
Åpne innstillingene til seksjon og bla til Bakgrunnsbilde. Plukke ut Bakgrunnsgradient og endre innstillingene som følger:
- Gradientstopp:
- 30 %: #fff9f2
- 100 %: rgba(255,255,255,0)
- Gradientretning: 90 grader
- Firkantet gradient over bakgrunnsbilde: JA
Velg Bakgrunnsbilde og velg alternativet Bruk dynamisk innhold.
Velg Utvalgte Bilder i alternativene.
Velg fanen utformingog bla til Størrelse. Legg til 100vh til minimumshøyde. Lukk seksjonsinnstillingene.
- Min høyde: 100vh
Fullskjerms helteseksjonsinnstillinger med metadata
Deretter legger du til en dobbel kolonnerad i seksjonen.
Legg til en Tekstmodul i høyre kolonne.
For hans innhold, velg Bruk dynamisk innhold.
Velg Post/arkivtittel i listen over alternativer.
- Dynamisk innhold: Post-/arkivtittel
Gå til fanen Design.
- Overskrift:
- Tekst: H1
- Font: Playfair Display
- Tekstjustering: venstrejustert
- Tekstfarge: #34332e
For størrelsen på tekster , satt for skrivebordsversjon til 65px, for mobilversjon til 42px og radhøyde til 1,2em.
- Overskrift:
- Tekststørrelse: 65px (skrivebord), 42px (telefon)
- Linjehøyde: 1,2 em
Bla til Mellomrom og angi 50 % for topppolstring. Lukk Innstillinger.
- Polstring: 50 % (øverst)
Du kan også lese denne artikkelen på: Hvordan lage en helteseksjon med Divis topptekstmodul i full bredde
Helteseksjon med metadatakategori
Legg til en ny seksjon vanlig under Hero-delen.
Åpne innstillingene og still inn farge bakgrunn på #fff9f2. Lukk Innstillinger.
- Bakgrunnsfarge: #fff9f2
Legg deretter til en linje av 4 kolonner til den nye delen.
Helt på fullskjerm med metadatakategoritekst
Legg til en Tekstmodul i venstre kolonne.
Åpne modulinnstillingene og velg Bruk dynamisk innhold for hoveddelen av teksten.
Velg Tidligere kategorier i listen.
- Dynamisk innhold: Postkategorier
Velg fanen utforming og bla ned til Overskriftstekst. Velg H4. Velg Playfair Display for fonten og sett den til medium, store bokstaver, høyrejustering for skrivebordsversjonen og venstrejustering for telefonversjonen. Velg #7b7975 for farge.
- Overskrift:
- Tekstvisning
- Font: Playfair Display
- Skriftvekt: Middels
- Stil: TT
- Tekstjustering: Senter
- Tekstfarge: #7b7975
Sett skriftstørrelsen for skrivebordsversjonen til 14 px, for mobilversjonen til 10 px, bokstavavstand til 1 px og linjehøyde til 1,6 em. Lukk innstillingene og lagre malen.
- Overskrift 4:
- Størrelse (skrivebord): 14px
- Størrelse (telefon): 10px
- Bokstavavstand: 1px
- Linjehøyde: 1,6 em
Bla til Mellomrom og legg til 0px til bunnmargen. Lukk Innstillinger.
- Marg (bunn): 0px
Helskjermseksjon med metatekst-metadata
Deretter kopierer du kategorimodulen og drar den til neste kolonne. Hver av Meta-modulene har de samme innstillingene. Vi vil vise hvordan du lager den første modulen og deretter kopierer den to ganger for å lage de andre modulene.
Forfatter
Åpne innstillinger og slett innhold dynamisk.
Klikk på Bruk dynamisk innhold og velg Postforfatter.
- Dynamisk innhold: Innleggsforfatter
I fanen utforming, Endre følgende innstillinger.
- Overskrift 4:
- Font: Montserrat
- Skriftvekt: Middels
- Stil: TT
- Tekstjustering (skrivebord): Senter
- Tekstjustering (telefon): Venstre
- Farge: #7b7975
Parametrene til skriftstørrelse inkludere:
- Tekststørrelse: 14px (skrivebord), 10px (telefon)
- Bokstavavstand: 1px
- Linjehøyde: 1,6 em
La bunnmargin må ha 0px.
- Marg (bunn): 0px
Dato
kopi forfattermodulen og dra den til neste kolonne.
Slett det innhold dynamisk gjeldende, velg Bruk dynamisk innhold og velg Post publiseringsdato. Lukk Innstillinger.
- Dynamisk innhold: Post-publiseringsdato
commentaires
Endelig kopi Post-publiseringsdato-modulen og dra den til siste kolonne.
Som med andre moduler, fjern det dynamiske innholdet og velg Bruk dynamisk innhold .
Velg Legg inn kommentarer Antall fra dine valg.
- Dynamisk innhold: Antall innlegg
Denne gangen legger du til et mellomrom og ordet Kommentarer i feltet Etter . Lukk den lille modalen og lukk deretter innstillingene. Lagre arbeidet ditt.
- Etter: Kommentarer
Les også: Divi: Hvordan vise Fullwidth Header-modulen i fullskjerm
résultats
Hero-seksjon med Post Title Desktop-versjonsmodul
Hero-seksjon med Post Tittel-mobilversjonsmodul
Alternativ Hero-seksjonslayout med Post Title desktop versjonsmodul
Alternativ Hero-seksjonslayout med mobil Post Title-modul
Hero-seksjon med metadata Desktop-versjon
Helteseksjon med metadata for mobilversjon
Last ned DIVI nå!!!
konklusjonen
Det er det som er alt! Dette er vår titt på hvordan du legger til en helskjermseksjon i blogginnleggsmalen din. Divi.
Moduler Divi og Theme Builder tilbyr flere alternativer for å lage helteseksjoner i fullskjerm. Alle metoder fungerer veldig bra og alle har sine fordeler.
Ved å bruke disse metodene kan du legge til en helskjermseksjon i en hvilken som helst Divi-blogginnleggsmal.
Vi håper denne veiledningen vil inspirere deg til dine neste Divi-prosjekter. Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
