Divi: Hvordan lage bloggsiden med bloggmodulen

Ønsker du å lage en bloggside med Bloggmodulen de Divi?

Vanligvis hver Divi-layoutpakke publisert på Elegant Temaer tilbyr et bloggoppsett som hjelper deg med å lage bloggen din fort nok. Men har du noen gang ønsket å se hvordan du lager en av disse bloggsidene selv? 

I denne artikkelen skal vi se hvordan du lager en bloggside med Divi sin bloggmodul. Vi vil gå gjennom hver innstilling trinn for trinn.

La oss starte!

undersøkelsen

Før vi setter i gang, la oss først se en oversikt over hva vi skal lage.

Opprett en ny bloggside

Lag en ny side

Først lager vi siden vår. Klikk på i WordPress-dashbordet sider > Legg On.

Gi siden en tittel som gir mening for deg.

• Tittel på siden: Blogg på Divi

Bytt til Divi Builder

Klikk på den lilla knappen i midten av siden: Bruk Divi Builder .

Legg til en seksjon for bloggsidetittel

Tilpass seksjonen

Vi starter med den første delen. Åpne dem seksjonsparametere .

Bla til Bakgrunn og endre fargen til #f9f3fd. Skriv inn Blog som admin-etikett. Lukk seksjonsinnstillingene.

• Bakgrunn: #f9f3fd
• Administratoretikett: Blogg

Lag bloggsidetittel

Deretter legger vi til en linje for tittelen. Velg det grønne ikonet og velg enkelt kolonnerad.

Legg deretter til en tekstmodul ved linjen.

Tilpass bloggtitteltekstmodulen

Åpne dem Tekstmodulinnstillinger og velg H1. Legg til tittelen Vår blogg.

• Font: Tittel 1
• Tekst: Bloggen vår

Gå deretter tilFanen Stil og sett justeringen til Sentrert. For H1-tittelteksten velger du Cormorant Infant som skrifttype og gjør den fet.

• Tekstjustering: Sentrert
• Overskriftstekst: H1
• Header Font: Cormorant Infant
• Myk lysoverskrift: fet tekst

Sett farge til #442854, størrelse til 130px og linjehøyde til 0,8em.

• Farge: #442854
• Skrivebordstekststørrelse: 130px
• Linjehøyde: 0,8em

Lag den siste artikkelen og oppfordringsseksjonen

Vår seksjon består av den nyeste artikkelen og en e-postmelding. 

Legg til en ny linje under vår første rad og velg kolonnedesign 2/3 venstre og 1/3 høyre.

Åpne dem linjeparametre ved å klikke på tannhjulikonet.

VelgFanen Stil, bla til avstanden og legg til 0px til den nederste indre margen. Lukk Innstillinger.

• Nedre intern margin: 0px

Legg til og tilpass den aktuelle blogginnleggsmodulen

Deretter legger vi til en blogg-modul . Dette vil inneholde vår siste artikkel. Klikk på det grå plussikonet i venstre kolonne i den nye raden og legg til bloggmodulen.

Innhold

Sous Innhold , skriv inn 1 for antall innlegg.

• Antall stillinger: 1

Elements

Bla til Elements og fjern merket for Forfatter og paginering. Vi overlater resten til standardverdiene.

• Vis forfatter: nei
• Vis paginering: Nei

Disposisjon

Velg deretter Fanen Stil og velg Fullskjerm for oppsettet og slå av det fremhevede bildeoverlegget.

• Modell: Fullskjerm
• Valgt bildeoverlegg: Deaktivert

Titteltekst

Bla til Titteltekst . Velg H2 og velg Cormoran Infant. Velg Fet og endre fargen til #442854.

• Sett inn overskrift tre: H2
• Skrifttittel: Cormorant Infant
• Mykt lys Tittel: Fet tekst
• Titteltekstfarge: #442854

Sett skriftstørrelsen til 30 piksler. Endre linjehøyden til 1.1em.

• Størrelse: 30 piksler for skrivebord, 20 piksler for nettbrett, 18 piksler for telefon
• Tittellinjehøyde: 1,1 em

Kroppen av teksten

Bla deretter ned til brødtekst . Velg Cabin for fonten, endre fargen til #442854, og endre linjehøyden til 1,8em.

• Politikorps: Hytte
• Brødtekstfarge: #442854
• Kroppslinjehøyde: 1,8 em

Tekstmetadata

Bla deretter ned til Tekstmetadata . Still inn parameterne som følger:

• Metadata-font: Cormorant Infant
• Metadata Dim lys: Vanlig
• Metadata kopistil: Ingen
• Metadata tekstfarge: #442854
• Metadata tekststørrelse: stasjonær 16px, nettbrett 15px, telefon 14px
• Metadata radhøyde: 1,8 em

avstanden

Bla deretter ned til avstanden og endre toppmargen til 0vw.

• Toppmargin: 0vw

Skyggekasse

Til slutt, bla ned til Skyggekasse og deaktiver den.

• Shadow Box: Deaktiver

Legg til og tilpass blogg-e-posttekstmodul

Nå skal vi gå til høyre kolonne og opprette Call to Action via e-post . Først legger du til en tekstmodul i høyre kolonne. Klikk på det grå plussikonet og søk etter tekst.

Innhold

Velg Overskrift 2 og skriv inn teksten Abonner på våre tilbud.

• Font: Overskrift 2
• Tekst: Abonner på våre tilbud

Overskriftstekst

for tekster av tittelen, velg Center Alignment, velg H2, velg Cormorant Infant og sett den til Fet.

• Tekstjustering: Sentrert
• Overskriftstekst: H2
• Header Font: Cormorant Infant
• Myk lyshode: fet

Endre fargen til #442854, størrelsen til 32px og linjehøyden til 0,95em.

• Topptekstfarge: #442854
• Topptekststørrelse: 32 piksler
• Topplinjehøyde: 0,95 em

avstanden

Til slutt, bla ned til avstanden og legg til 10 piksler til bunnmargen. Lukk tekstmodulinnstillingene.

• Bunnmargin: 10px

Legg til og tilpass Blog Email Optin-modul

Så går vi lage skjema e-post . Legg til en Email Optin-modul under tekstmodulen i høyre kolonne.

Innhold

Fjern først tittelen og brødteksten.

• Tittel: Ingen
• Brødtekst: ingen

Bla til Epost konto og legg til tjenesteleverandøren din.

Bla deretter ned til Bakgrunn og fjern valget av bakgrunnsfargen.

• Bruk bakgrunnsfarge: nei

felt

Gå inn i Fanen Stil og endre feltbakgrunnsfargen til rgba(255,255,255,0) og tekstfargen til #442854.

• Bakgrunnsfargefelt: rgba(255,255,255,0)
• Tekstfargefelt: #442854

Rull ned til skriftalternativer og endre fonten til cabin, størrelsen til 16px og linjehøyden til 1,8em.

• Fontfelt: Hytte
• Tekststørrelsesfelt: 16 piksler
• Feltrekkehøyde: 1,8 em

Deretter justerer du det avrundede hjørnet av feltene til 32px, kantbredden til 2px, og endrer kantfargen til #442854.

• Kontroller med avrundet rektangel: 32px
• Kantbreddefelt: 2px
• Kantfargefelt: #442854

knapp

Bla til Knapp og velg Bruk egendefinerte stiler for Button . Endre størrelsen til 18ps, knappefargen til hvit, og knappens bakgrunnsfarge til #442854.

• Bruk egendefinerte stiler for knappen: Ja
• Knappens tekststørrelse: 18 piksler
• Knapptekstfarge: #ffffff
• Bakgrunnsknapp: #442854

Endre kantradiusen til 50 piksler, skriften til Cormorant Infant, og gjør vekten fet.

• Kantradiusknapp: 50 px
• Fontknapp: Skarv spedbarn
• Myk lysknapp: fet tekst

Til slutt, la oss legge til noen marginer. Angi 20px for toppmargen, 12px for topp- og bunnutfylling og 32px for venstre og høyre utfylling. Lukk e-postvalginnstillinger.

• Toppmargknapp: 20 px
• Topp- og bunnpolstringsknapp: 12 px
• Knapp venstre og høyre polstring: 32px

Legg til ny linje for blogginnleggsliste

Vi vil nå lage en liste over elementer av siden. Først legger du til en ny enkeltkolonnerad under forrige seksjon.

Linjeinnstillinger

Gå til Fanen Stil og legg til 0px til Vertex Inner Margin. Lukk linjeinnstillinger.

• Inner Margin Vertex: 0px

Legg til en bloggmodul på linjen din

Legg til en blogg-modul til den nye linjen ved å klikke på det grå plussikonet og klikke på Blogg.

Styling av blogginnlegget

La oss endre bloggsidefeeden.

Bloggfeedinnhold

Åpne dem Bloggmodulinnstillinger og skriv inn 3 for antall innlegg. Dette lar deg velge antall innlegg som skal vises på skjermen.

Et lavere tall, for eksempel 3, lar oss fokusere på nylige innlegg og redusere sidestørrelsen. Dette er et godt valg hvis du ikke legger ut ofte eller ønsker å holde siden renere. Å vise flere innlegg, for eksempel 6-9, er en god idé hvis du vil fokusere på bloggflyt.

• Antall innlegg: 3

Skriv inn 1 for offset. Dette forteller Divi å starte med det andre blogginnlegget, som hindrer oss i å vise den samme artikkelen som allerede ble vist i blogginnlegget vist over.

• Postoffsetnummer: 1

Elements

Bla til Elements . Aktiver fremhevet bilde, dato, kategorisnutt og paginering. Deaktiver resten.

• Vis utvalgt bilde: Ja
• Data: Ja
• Kategorier: Ja
• Utdrag: Ja
• Paginering: Ja

Bakgrunn

Tilgang til Bakgrunn og sett bakgrunnsfargen for rutenettet til rgba(255,255,255,0)

• Bakgrunnsfarge for rutenettflis: rgba (255,255,255,0)

Layout og overlay

Gå deretter til Fanen Stil . La oppsettet være satt til Rutenett. Vi valgte oppsettet i full bredde for blogginnlegget over denne. Vi vil bruke rutenettoppsettet for denne bloggfeeden, som er standardalternativet. Deaktiver det fremhevede bildeoverlegget.

• Layout: Rutenett
• Valgt bildeoverlegg: Deaktivert

Titteltekst

for titteltekst , velg H2. Velg Cormorant Infant, sett den til Fet og skriv inn #442854 for fargen.

• Sett inn overskrift tre: H2
• Skrifttittel: Cormorant Infant
• Mykt lys Tittel: Fet tekst
• Titteltekstfarge: #442854

Velg 20px for tekststørrelsen. Sett linjehøyden til 1,1 em.

• Tittel Tekststørrelse: Desktop 20px
• Tittellinjehøyde: 1,1 em

Kroppen av teksten

Bla til Brødtekst og velg Hytte. Sett fargen til #442854.

• Politikorps: hytte
• Brødtekstfarge: #442854

Sett linjehøyden til 1,8 em.

• Linjehøyde: 1,8 em

Tekstmetadata

Bla til Tekstmetadata og velg Cormorant Infant. Sett vekt til normal, stil til ingen, og farge til #442854.

• Metadata-font: Cormorant Infant
• Metadata Dim lys: Vanlig
• Metadata kopistil: Ingen
• Metadata tekstfarge: #442854

• Metadata tekststørrelse: skrivebord 16px, nettbrett 15px, telefon 14px
• Metadata radhøyde: 1,8 em

Pagineringstekst

Nå videre til Paginering . Velg Cormorant Infant for skrifttypen, velg Fet og endre fargen til #442854.

• Font Vis paginering: Skarv spedbarn
• Vis personsøker mykt lys: Fet
• Tekstfarge Vis paginering: #442854

avstanden

Så går vi videre til avstand og legg til 0vw-marginen øverst. Dette forhindrer vår modul i å overlappe den forrige modulen.

• Toppmargin: 0vw

grensen

Bla til grensen og skriv inn 0px for alle fire hjørnene. Dette gir oss vår kvadratiske form for kartet.

• Avrundet rektangelnettoppsett: 0px

Skyggekasse

Til slutt, bla ned til Box Shadow og deaktiver den. Lukk blogginnstillinger. Bloggdelen er ferdig.

• Skyggeboks: ingen

Legg til en ny "Call to Action"-seksjon på bloggsiden

Så går vi opprette "Call to Action"-delen av siden. Denne delen inneholder et parallaks fullskjermsbakgrunnsbilde, kontakt og sosiale følgende lenker.

Legg til en ny seksjon

Klikk på det blå ikonet for å legge til en ny vanlig seksjon nederst på siden.

• Seksjon: Vanlig

Stil oppfordringen til handling-delen

Åpne dem seksjonsparametere ved å klikke på tannhjulikonet.

Bakgrunn

Bla til Bakgrunn og velg Bilde-fanen. Klikk på det grå ikonet merket Bakgrunnsbilde.

Velg et fullskjermbilde fra mediebiblioteket ditt. Velg Bruk parallakseeffekt, og velg deretter CSS for parallaksemetoden.

• Bakgrunnsbilde
• Bruk parallakseeffekt: Ja
• Parallaksemetode: CSS

Rull ned til Admin Label og skriv inn "Footer" i feltet. Dette vil hjelpe deg å holde styr på seksjoner.

• Admin Tag: Bunntekst

Gå deretter til Fanen Stil.

• Intern margin: 10vw (øverst og bunn)

Legg til en ny linje

Klikk på det grønne plussikonet og legge til en rad i en enkelt kolonne for innholdet vårt.

dimensjonering

Åpne dem linjeparametre og gå til kategorien Stil.

• Maksimal bredde: 320 piksler

Titteltekstmodul

Vår Call to Action-seksjon presenteres med en tittel. For å lage dette, legge til en tekstmodul ved linjen.

Tilpass titteltekst

Legg til tittelen din og endre skrifttypen til Overskrift 3.

• Font: Overskrift 3
• Tekst: Alt om Divi

Overskriftstekst

Gå til Fanen Stil og bla til Underteksttekst . Velg senter for justering, velg H3, velg Cormorant Infant, sett den til Fet og velg hvit som farge.

• Tekstjustering: Senter
• Overskriftstekst: H3
• Header Font: Cormorant Infant
• Myk lyshode: fet
• Topptekstfarge: #ffffff

• Topptekststørrelse: 42 piksler for skrivebord, 20 piksler for nettbrett, 16 piksler for telefon
• Topplinjehøyde: 1,1 em

avstanden

Til slutt, bla ned til avstanden og legg til 10 piksler til bunnmargen. Lukk modulinnstillingene.

• Bunnmargin: 10px

Tekstmodul for adressen

Legg til en annen tekstmodul for din fysiske adresse.

Stil den fysiske adressetekstmodulen

Adressetekst

Legg til adressen din som avsnittstekst.

• Stil: Avsnitt
• Tekst: din adresse

Avsnittstekst

Gå deretter til Tekst i Fanen Stil og velg Cormorant Infant, semi bold, og sett den til hvit.

• Font: Skarv Infant
• Myk lett tekst: halvfet
• Tekstfarge Tekst: #ffffff

• Tekst Tekststørrelse: 28px for skrivebord, 20px for nettbrett, 16px for telefon
• Tekstlinjehøyde: 1,2 em

Legg til modulen følg oss på sosiale nettverk

Vår siste modul er modulen Følg oss på sosiale nettverk . Legg den til nederst på linjen.

Styliser Følg oss på sosiale medier-modulen

Vi starter med Fanen Stil denne gangen. Velg Center for Module Alignment og endre ikonfargen til #442854.

• Moduljustering: Senter
• Ikonfarge: #442854

Bla til Edgeure og legg til 23 piksler for avrundede hjørner.

• Avrundet rektangel: 32px

Legg til og tilpass dine sosiale nettverk

Gå nå tilbake til Innhold-fanen og legg til eventuelle sosiale nettverk du vil inkludere. Klikk på det grå plussikonet.

Åpne dem innstillinger for hvert av dine sosiale nettverk , velg nettverket og legg til koblingen til kontoen din. Sett bakgrunnsfargen til #f9f3fd. Lukk undermodulinnstillingene.

• Sosialt nettverk: ditt valg
• Kontolink URL: din link
• Bakgrunnsfarge: #f9f3fd

Lagre bloggsiden og gå ut av den visuelle byggeren

Endelig lagre siden i nedre høyre hjørne og velg Avslutt Visual Builder øverst på siden. Du er klar til å se arbeidet ditt.

Forhåndsvisning av bloggside

Her er resultatene våre.

Last ned DIVI nå!!!

konklusjonen

Så! Dette er vår titt på hvordan du lager en bloggside med Divi. 

Divi Builder gjør det enkelt å lage interessante oppsett, og det er flere måter å bruke hver av modulene på. Som denne opplæringen har utforsket, er det mulig å bruke flere versjoner av bloggmodulen på samme side for å vise bloggfeeden på forskjellige måter.

Hvis du har noen bekymringer eller forslag, finn oss inn kommentarfeltet å diskutere det.

Du kan imidlertid også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder, ved å konsultere vår guide om WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.

Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.

...