Divi: Hur man skapar bloggsidan med Bloggmodulen

Vill du skapa en bloggsida med Bloggmodulen de Divi?

Vanligtvis varje Divi-layoutpaket som publiceras på Elegant Teman erbjuder en blogglayout som hjälper dig att skapa din blogg snabb nog. Men har du någonsin velat se hur man skapar en av dessa bloggsidor själv? 

I den här artikeln kommer vi att se hur du skapar en bloggsida med Divis Bloggmodul. Vi kommer att gå igenom varje inställning steg för steg.

Låt oss börja!

undersökningen

Innan vi börjar, låt oss först se en översikt över vad vi ska skapa.

Skapa en ny bloggsida

Skapa en ny sida

Först skapar vi vår sida. Klicka på i WordPress-instrumentpanelen sidor > Add On.

Ge sidan en titel som är vettig för dig.

• Sidans titel: Blogg på Divi

Byt till Divi Builder

Klicka på den lila knappen i mitten av sidan: Använd Divi Builder .

Lägg till ett avsnitt för bloggsidans titel

Anpassa avsnittet

Vi börjar med det första avsnittet. Öppna dem sektionsparametrar .

Bläddra till Bakgrund och ändra färgen till #f9f3fd. Ange Blog som adminetikett. Stäng avsnittsinställningarna.

• Bakgrund: #f9f3fd
• Adminetikett: Blogg

Skapa bloggsidans titel

Sedan lägger vi till en Ligne för titeln. Välj den gröna ikonen och välj den enstaka kolumnraden.

Lägg sedan till a textmodul vid linjen.

Anpassa modulen Bloggtiteltext

Öppna dem Textmodulinställningar och välj H1. Lägg till rubriken Vår blogg.

• Teckensnitt: Titel 1
• Text: Vår blogg

Gå sedan tillFliken Stil och ställ in justeringen till Centrerad. För H1-titeltexten väljer du Cormorant Infant som teckensnitt och gör det fetstilt.

• Textjustering: Centrerad
• Rubriktext: H1
• Header Font: Cormorant Infant
• Mjukt ljus rubrik: fet text

Ställ in färg på #442854, storlek till 130px och linjehöjd till 0,8 em.

• Färg: #442854
• Skrivbordstextstorlek: 130px
• Linjehöjd: 0,8em

Skapa den senaste artikeln och avsnittet om uppmaning

Vår sektion består av den senaste artikeln och ett opt-in-e-postmeddelande. 

Lägg till en ny rad under vår första rad och välj kolumndesign 2/3 vänster och 1/3 höger.

Öppna dem linjeparametrar genom att klicka på kugghjulsikonen.

VäljFliken Stil, bläddra till avstånd och lägg till 0px till den nedre inre marginalen. Stäng Inställningar.

• Nedre intern marginal: 0px

Lägg till och anpassa den utvalda blogginläggsmodulen

Sedan lägger vi till en blogg-modul . Detta kommer att innehålla vår sista artikel. Klicka på den grå plusikonen i den vänstra kolumnen i vår nya rad och lägg till bloggmodulen.

Innehåll

Sous Innehåll , ange 1 för antalet inlägg.

• Antal positioner: 1

Element

Bläddra till Element och avmarkera Författare och paginering. Vi lämnar resten på deras standardvärden.

• Visa författare: nej
• Visa paginering: Nej

Disposition

Välj sedan Fliken Stil och välj Helskärm för layouten och stäng av den utvalda bildöverlagringen.

• Modell: Helskärm
• Vald bildöverlagring: Inaktiverad

Titeltext

Bläddra till Titeltext . Välj H2 och välj Cormoran Infant. Välj Fet och ändra färgen till #442854.

• Infoga rubrik tre: H2
• Typsnittstitel: Skarvspädbarn
• Mjukt ljus Titel: Fet text
• Rubrikens textfärg: #442854

Ställ in teckenstorleken till 30 pixlar. Ändra linjehöjden till 1.1 em.

• Storlek: 30 pixlar för dator, 20 pixlar för surfplatta, 18 pixlar för telefon
• Titelradshöjd: 1,1 em

Textens kropp

Scrolla sedan ner till kropp text . Välj Cabin för typsnittet, ändra färgen till #442854 och ändra linjehöjden till 1,8em.

• Poliskåren: Stuga
• Brödtextfärg: #442854
• Kroppslinjehöjd: 1,8 em

Textmetadata

Scrolla sedan ner till Text Metadata . Ställ in parametrarna enligt följande:

• Metadatateckensnitt: Cormorant Infant
• Metadata Dimljus: Vanligt
• Metadata Kopieringsstil: Ingen
• Metadata textfärg: #442854
• Metadatatextstorlek: Desktop 16px, surfplatta 15px, telefon 14px
• Metadata radhöjd: 1,8 em

avstånd

Scrolla sedan ner till avstånd och ändra den övre marginalen till 0vw.

• Toppmarginal: 0vw

Skugga låda

Till sist, scrolla ner till Skugga låda och inaktivera den.

• Shadow Box: Inaktivera

Lägg till och anpassa bloggens e-posttextmodul

Nu ska vi gå till höger kolumn och skapa uppmaningen via e-post . Lägg först till en textmodul i den högra kolumnen. Klicka på den grå plusikonen och sök efter text.

Innehåll

Välj Rubrik 2 och skriv in texten Prenumerera på våra erbjudanden.

• Teckensnitt: Rubrik 2
• Text: Prenumerera på våra erbjudanden

Rubrik

Pour le texter av titeln, välj Center Alignment, välj H2, välj Cormorant Infant och ställ in den på Fet.

• Textjustering: Centrerad
• Rubriktext: H2
• Header Font: Cormorant Infant
• Mjuk ljus rubrik: fet

Ändra färgen till #442854, storleken till 32px och linjehöjden till 0,95em.

• Rubrikens textfärg: #442854
• Rubriktextstorlek: 32 pixlar
• Rubrikradshöjd: 0,95 em

avstånd

Till sist, scrolla ner till avstånd och lägg till 10 pixlar till den nedre marginalen. Stäng inställningarna för textmodulen.

• Nedre marginal: 10px

Lägg till och anpassa Blog Email Optin-modulen

Sedan går vi skapa formen e-post . Lägg till en Email Optin-modul under textmodulen i den högra kolumnen.

Innehåll

Ta först bort rubriken och brödtexten.

• Titel: Ingen
• Brödtext: ingen

Bläddra till Email konto och lägg till din tjänsteleverantör.

Scrolla sedan ner till Bakgrund och avmarkera bakgrundsfärgen.

• Använd bakgrundsfärg: nej

fält

Gå in i Fliken Stil och ändra fältens bakgrundsfärg till rgba(255,255,255,0) och textfärgen till #442854.

• Bakgrundsfärgfält: rgba(255,255,255,0)
• Textfärgfält: #442854

Scrolla ner till teckensnittsalternativ och ändra typsnittet till cabin, storleken till 16px och linjehöjden till 1,8em.

• Teckensnittsfält: Stuga
• Textstorleksfält: 16 pixlar
• Fältradshöjd: 1,8 em

Justera sedan det rundade hörnet på fälten till 32px, kantbredden till 2px och ändra kantfärgen till #442854.

• Rundade rektangelkontroller: 32px
• Kantbreddsfält: 2px
• Kantfärgsfält: #442854

knapp

Bläddra till Knapp och välj Använd anpassade stilar för Button . Ändra storleken till 18ps, knappfärgen till vit och knappens bakgrundsfärg till #442854.

• Använd anpassade stilar för knappen: Ja
• Knappens textstorlek: 18 pixlar
• Knappens textfärg: #ffffff
• Bakgrundsknapp: #442854

Ändra ramradien till 50 pixlar, teckensnittet till Cormorant Infant och gör vikten fet.

• Kantradieknapp: 50px
• Teckensnittsknapp: Skarvspädbarn
• Knapp för mjukt ljus: fet text

Låt oss slutligen lägga till några marginaler. Ange 20px för toppmarginalen, 12px för topp- och bottenutfyllnad och 32px för vänster- och högerutfyllnad. Stäng inställningar för e-postopt.

• Toppmarginalknapp: 20 px
• Topp- och bottenstoppningsknapp: 12 px
• Knapp vänster och höger stoppning: 32px

Lägg till ny rad för blogginläggslistan

Vi kommer nu skapa en lista med objekt av sidan. Lägg först till en ny rad med en kolumn under vårt tidigare avsnitt.

Linjeinställningar

Gå till Fliken Stil och lägg till 0px till Vertex Inner Margin. Stäng linjeinställningar.

• Innermarginal Vertex: 0px

Lägg till en bloggmodul till din linje

Lägg till en blogg-modul till din nya rad genom att klicka på den grå plusikonen och klicka på Blogg.

Styling av blogginläggsflödet

Låt oss ändra bloggsidans flöde.

Bloggflödesinnehåll

Öppna dem Bloggmodulinställningar och ange 3 för antalet inlägg. Detta låter dig välja hur många inlägg som ska visas på skärmen.

Ett lägre antal, till exempel 3, gör att vi kan fokusera på senaste inlägg och minska sidstorleken. Detta är ett bra val om du inte gör inlägg ofta eller vill hålla sidan renare. Att visa fler inlägg, till exempel 6-9, är en bra idé om du vill fokusera på bloggflödet.

• Antal inlägg: 3

Ange 1 för offset. Detta säger till Divi att börja med det andra blogginlägget, vilket hindrar oss från att visa samma artikel som redan visades i blogginlägget som visas ovanför.

• Postförskjutningsnummer: 1

Element

Bläddra till Element . Aktivera utvald bild, datum, kategoriutdrag och sidnumrering. Inaktivera resten.

• Visa utvald bild: Ja
• Data: Ja
• Kategorier: Ja
• Utdrag: Ja
• Paginering: Ja

Bakgrund

Tillgång till Bakgrund och ställ in rutnätets bakgrundsfärg till rgba(255,255,255,0)

• Bakgrundsfärg för rutnätsplatta: rgba (255,255,255,0)

Layout och overlay

Gå sedan till Fliken Stil . Lämna layouten inställd på Grid. Vi valde layouten i full bredd för blogginlägget ovanför det här. Vi kommer att använda rutnätslayouten för detta bloggflöde, vilket är standardalternativet. Inaktivera den utvalda bildöverlagringen.

• Layout: Rutnät
• Vald bildöverlagring: Inaktiverad

Titeltext

Pour le titeltext , välj H2. Välj Cormorant Infant, ställ in den på Fet och ange #442854 för färgen.

• Infoga rubrik tre: H2
• Typsnittstitel: Skarvspädbarn
• Mjukt ljus Titel: Fet text
• Rubrikens textfärg: #442854

Välj 20px för textstorleken. Ställ in linjehöjden till 1,1 em.

• Titel Textstorlek: Desktop 20px
• Titelradshöjd: 1,1 em

Textens kropp

Bläddra till Kropp text och välj Cabin. Ställ in färgen på #442854.

• Poliskåren: Stuga
• Brödtextfärg: #442854

Ställ in linjehöjden till 1,8 em.

• Linjehöjd: 1,8 em

Textmetadata

Bläddra till Text Metadata och välj Cormorant Infant. Ställ in vikt på normal, stil till ingen och färg till #442854.

• Metadatateckensnitt: Cormorant Infant
• Metadata Dimljus: Vanligt
• Metadata Kopieringsstil: Ingen
• Metadata textfärg: #442854

• Metadata Textstorlek: stationär 16px, surfplatta 15px, telefon 14px
• Metadata radhöjd: 1,8 em

Pagineringstext

Låt oss nu gå till Paginering . För typsnittet välj Cormorant Infant, välj Fet och ändra färgen till #442854.

• Teckensnitt Visa paginering: Skarv spädbarn
• Visa personsökning mjukt ljus: fet
• Textfärg Visa paginering: #442854

avstånd

Sedan går vi vidare till mellanrum och lägg till 0vw-marginalen överst. Detta förhindrar att vår modul överlappar den föregående modulen.

• Toppmarginal: 0vw

gräns

Bläddra till gräns och ange 0px för alla fyra hörnen. Detta ger oss vår fyrkantiga form för kortet.

• Rundade rektangelrutnätslayout: 0px

Skugga låda

Till sist, scrolla ner till Box skugga och inaktivera den. Stäng blogginställningar. Bloggdelen är klar.

• Skugglåda: ingen

Lägg till en ny "Call to Action"-sektion på bloggsidan

Sedan går vi skapa avsnittet "Call to Action". av sidan. Det här avsnittet innehåller en parallax fullskärmsbakgrundsbild, kontakta och sociala följande länkar.

Lägg till ett nytt avsnitt

Klicka på den blå ikonen för att lägga till en ny vanlig sektion på botten av sidan.

• Avsnitt: Vanlig

Style avsnittet Uppmaning

Öppna dem sektionsparametrar genom att klicka på dess kugghjulsikon.

Bakgrund

Bläddra till Bakgrund och välj fliken Bild. Klicka på den grå ikonen märkt Bakgrundsbild.

Välj en helskärmsbild från ditt mediebibliotek. Välj Använd parallaxeffekt och välj sedan CSS för parallaxmetoden.

• Bakgrundsbild
• Använd parallaxeffekt: Ja
• Parallaxmetod: CSS

Scrolla ner till Admin Label och ange "Footer" i fältet. Detta hjälper dig att hålla reda på avsnitt.

• Admin Tag: Sidfot

Gå sedan till Fliken Stil.

• Intern marginal: 10vw (topp och botten)

Lägg till en ny rad

Klicka på den gröna plusikonen och lägga till en rad i en enda kolumn för vårt innehåll.

dimensionering

Öppna dem linjeparametrar och gå till fliken Stil.

• Maximal bredd: 320 pixlar

Rubriktextmodul

Vår Call to Action-sektion presenteras med en titel. För att skapa detta, lägga till en textmodul vid linjen.

Anpassa titeltext

Lägg till din titel och ändra teckensnittet till Rubrik 3.

• Teckensnitt: Rubrik 3
• Text: Allt om Divi

Rubrik

Gå till Fliken Stil och bläddra till Undertext . Välj centrum för justering, välj H3, välj Cormorant Infant, ställ in den på Fet och välj vit som färg.

• Textjustering: Center
• Rubriktext: H3
• Header Font: Cormorant Infant
• Mjuk ljus rubrik: fet
• Rubrikens textfärg: #ffffff

• Rubriktextstorlek: 42 pixlar för dator, 20 pixlar för surfplatta, 16 pixlar för telefon
• Rubrikradshöjd: 1,1 em

avstånd

Till sist, scrolla ner till avstånd och lägg till 10 pixlar till den nedre marginalen. Stäng modulinställningarna.

• Nedre marginal: 10px

Textmodul för adressen

Lägg till ytterligare en textmodul för din fysiska adress.

Style modulen fysisk adresstext

Adresstext

Lägg till din adress som stycketext.

• Stil: Stycke
• Sms: din adress

Stycketext

Gå sedan till Text i Fliken Stil och välj Cormorant Infant, semi bold, och ställ in den på vit.

• Typsnitt: Skarv Infant
• Mjuk lätt text: halvfet
• Textfärg Text: #ffffff

• Text Textstorlek: 28px för stationär dator, 20px för surfplatta, 16px för telefon
• Textradshöjd: 1,2 em

Lägg till modulen följ oss på sociala nätverk

Vår sista modul är modulen Följ oss på sociala nätverk . Lägg till det längst ner på raden.

Stylisera Följ oss på sociala medier-modulen

Vi börjar med Fliken Stil den här gången. Välj Center for Module Alignment och ändra ikonens färg till #442854.

• Modulinriktning: Center
• Ikonfärg: #442854

Bläddra till Bordure och lägg till 23 pixlar för rundade hörn.

• Rundad rektangel: 32px

Lägg till och anpassa dina sociala nätverk

Gå nu tillbaka till Fliken Innehåll och lägg till alla sociala nätverk du vill inkludera. Klicka på den grå plusikonen.

Öppna dem inställningar för vart och ett av dina sociala nätverk , välj nätverket och lägg till länken till ditt konto. Ställ in bakgrundsfärgen till #f9f3fd. Stäng undermodulinställningarna.

• Socialt nätverk: ditt val
• Kontolänk URL: din länk
• Bakgrundsfärg: #f9f3fd

Spara bloggsidan och avsluta den visuella byggaren

Hur som helst, spara sidan i det nedre högra hörnet och välj Avsluta Visual Builder överst på sidan. Du är redo att se ditt arbete.

Förhandsgranskning av bloggsidan

Här är våra resultat.

Ladda ner DIVI nu!!!

Slutsats

Så ! Det här är vår titt på hur man skapar en bloggsida med Divi. 

Divi Builder gör det enkelt att skapa intressanta layouter, och det finns flera sätt att använda var och en av modulerna. Som den här handledningen har utforskat är det möjligt att använda flera versioner av bloggmodulen på samma sida för att visa bloggflödet på olika sätt.

Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.

Men under tiden dela den här artikeln på dina olika sociala nätverk.

.