Vil du oprette en blogside med Blog modulet de Divi?
Normalt hver Divi-layoutpakke udgivet på Elegant Temaer tilbyder et bloglayout, som hjælper dig med at oprette din blog Hurtigt nok. Men har du nogensinde ønsket at se, hvordan du selv opretter en af disse blogsider?
I denne artikel vil vi se, hvordan du opretter en blogside med Divi's Blog-modul. Vi vil gennemgå hver indstilling trin for trin.
Lad os starte!
undersøgelse
Inden vi går i gang, lad os først se et overblik over, hvad vi skal lave.
Opret en ny blogside
Opret en ny side
Først opretter vi vores side. Klik på i WordPress-dashboardet Sider > Add On.
Giv siden en titel, der giver mening for dig.
- Sidens titel: Blog på Divi
Skift til Divi Builder
Klik på den lilla knap i midten af siden: Brug Divi Builder .
Tilføj en sektion til blogsidetitel
Tilpas sektionen
Vi starter med det første afsnit. Åbn dem sektionsparametre .
Rul til Baggrund og skift farven til #f9f3fd. Indtast Blog som admin-etiket. Luk sektionsindstillingerne.
- Baggrund: #f9f3fd
- Admin Label: Blog
Opret blogsidetitel
Så tilføjer vi en linje for titlen. Vælg det grønne ikon, og vælg den enkelte kolonnerække.
Tilføj derefter a tekstmodul ved linjen.
Tilpas modulet blogtiteltekst
Åbn dem Indstillinger for tekstmodul og vælg H1. Tilføj titlen Vores blog.
- Skrifttype: Titel 1
- Tekst: Vores blog
Gå derefter tilFanen Stil og indstil justeringen til Centreret. Til H1-titelteksten skal du vælge Cormorant Infant som skrifttype og gøre den fed.
- Tekstjustering: Centreret
- Overskriftstekst: H1
- Overskriftsskrifttype: Skarvspædbarn
- Blødt lys overskrift: Fed tekst
Indstil farve til #442854, størrelse til 130px og linjehøjde til 0,8 em.
- Farve: #442854
- Desktop tekststørrelse: 130px
- Linjehøjde: 0,8 em
Opret den seneste artikel og opfordring til handling sektion
Vores sektion består af den seneste artikel og en opt-in-e-mail.
Tilføj en ny linje under vores første række og vælg kolonnedesignet 2/3 til venstre og 1/3 til højre.
Åbn dem linjeparametre ved at klikke på tandhjulsikonet.
VælgFanen Stil, rul til afstand og tilføj 0px til den nederste indre margen. Luk Indstillinger.
- Bund intern margin: 0px
Tilføj og tilpas det fremhævede blogindlægsmodul
Så tilføjer vi en blog-modul . Dette vil indeholde vores sidste artikel. Klik på det grå plus-ikon i venstre kolonne i vores nye række, og tilføj blogmodulet.
Indhold
under Indhold , indtast 1 for antallet af indlæg.
- Antal positioner: 1
Elementer
Rul til Elementer og fjern markeringen af Forfatter og sideinddeling. Vi overlader resten til deres standardindstillinger.
- Vis forfatter: nej
- Vis paginering: Nej
Disposition
Vælg derefter Fanen Stil og vælg Fuld skærm for layoutet og deaktiver den fremhævede billedoverlejring.
- Model: Fuld skærm
- Valgt billedoverlejring: Deaktiveret
Titeltekst
Rul til Titeltekst . Vælg H2 og vælg Cormoran Infant. Vælg Fed og skift farven til #442854.
- Indsæt overskrift tre: H2
- Skrifttypetitel: Skarvspædbarn
- Soft Light Titel: Fed tekst
- Tekstfarve på titel: #442854
Indstil skriftstørrelsen til 30 pixels. Skift linjehøjden til 1.1 em.
- Størrelse: 30 pixels til desktop, 20 pixels til tablet, 18 pixels til telefon
- Titellinjehøjde: 1,1 em
Tekstens krop
Rul derefter ned til brødtekst . Vælg Cabin for skrifttypen, skift farven til #442854, og skift linjehøjden til 1,8em.
- Politikorps: Kahyt
- Brødtekstfarve: #442854
- Kropslinjehøjde: 1,8 em
Tekst metadata
Rul derefter ned til Tekst Metadata . Indstil parametrene som følger:
- Metadataskrifttype: Skarvspædbarn
- Metadata Dæmpet lys: Almindelig
- Metadata kopistil: Ingen
- Metadata tekstfarve: #442854
- Metadata tekststørrelse: Desktop 16px, Tablet 15px, Telefon 14px
- Metadata rækkehøjde: 1,8 em
afstand
Rul derefter ned til afstand og ændre den øverste margen til 0vw.
- Topmargin: 0vw
Skyggeæske
Rul til sidst ned til Skyggeæske og deaktiver det.
- Shadow Box: Deaktiver
Tilføj og tilpas blog-e-mail-tekstmodul
Nu skal vi flytte til højre kolonne og oprette Call to Action via e-mail . Tilføj først et tekstmodul i højre kolonne. Klik på det grå plus-ikon og søg efter tekst.
Indhold
Vælg Overskrift 2 og indtast teksten Abonner på vores tilbud.
- Skrifttype: Overskrift 2
- Tekst: Abonner på vores tilbud
Overskriftstekst
for tekster af titlen, vælg Center Alignment, vælg H2, vælg Cormorant Infant og indstil den til Fed.
- Tekstjustering: Centreret
- Overskriftstekst: H2
- Overskriftsskrifttype: Skarvspædbarn
- Blødt lys overskrift: Fed
Skift farven til #442854, størrelsen til 32px og linjehøjden til 0,95em.
- Sidehovedtekstfarve: #442854
- Sidehovedtekststørrelse: 32 pixels
- Header line højde: 0,95 em
afstand
Rul til sidst ned til afstand og tilføje 10 pixels til bundmargenen. Luk tekstmodulets indstillinger.
- Bundmargen: 10px
Tilføj og tilpas Blog Email Optin-modul
Så går vi oprette formular e-mail . Tilføj et Email Optin-modul under tekstmodulet i højre kolonne.
Indhold
Fjern først titlen og brødteksten.
- Titel: Ingen
- Brødtekst: ingen
Rul til Email konto og tilføj din tjenesteudbyder.
Rul derefter ned til Baggrund og fravælg baggrundsfarven.
- Brug baggrundsfarve: nej
felter
Gå ind i Fanen Stil og ændre felternes baggrundsfarve til rgba(255,255,255,0) og tekstfarven til #442854.
- Baggrundsfarvefelter: rgba(255,255,255,0)
- Tekstfarvefelter: #442854
Rul ned til skrifttype muligheder og ændre skrifttypen til kabine, størrelsen til 16px og linjehøjden til 1,8em.
- Fontfelter: Kabine
- Tekststørrelsesfelter: 16 pixels
- Markrækkehøjde: 1,8 em
Juster derefter det afrundede hjørne af felterne til 32px, kantbredden til 2px, og skift kantfarven til #442854.
- Afrundede rektangelkontroller: 32px
- Kantbredde felter: 2px
- Kantfarvefelter: #442854
knap
Rul til Knap og vælg Brug brugerdefinerede stilarter til Button . Skift størrelsen til 18ps, knapfarven til hvid, og knapbaggrundsfarven til #442854.
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 18 pixels
- Knap Tekstfarve: #ffffff
- Baggrundsknap: #442854
Skift kantradius til 50 pixels, skrifttypen til Cormorant Infant, og gør vægten fed.
- Kantradiusknap: 50px
- Fontknap: Skarvspædbarn
- Blødt lys-knap: Fed tekst
Lad os endelig tilføje nogle marginer. Indtast 20px for den øverste margen, 12px for den øverste og nederste polstring og 32px for den venstre og højre polstring. Luk indstillinger for e-mailopt.
- Topmarginknap: 20 px
- Top og bund polstringsknap: 12 px
- Knap venstre og højre polstring: 32px
Tilføj ny linje til blogindlægsliste
Det vil vi nu oprette en liste over elementer af siden. Tilføj først en ny række med en enkelt kolonne under vores forrige afsnit.
Linieindstillinger
Gå til Fanen Stil og tilføj 0px til Vertex indre margin. Luk linjeindstillinger.
- Indre margin toppunkt: 0px
Tilføj et blogmodul til din linje
Tilføj en blog-modul til din nye linje ved at klikke på det grå plus-ikon og klikke på Blog.
Styling af blogindlægsfeedet
Lad os ændre blogsidefeedet.
Blog feed indhold
Åbn dem Blogmodulindstillinger og indtast 3 for antallet af indlæg. Dette giver dig mulighed for at vælge antallet af indlæg, der skal vises på skærmen.
Et lavere tal, såsom 3, giver os mulighed for at fokusere på seneste indlæg og reducere sidestørrelsen. Dette er et godt valg, hvis du ikke skriver ofte eller ønsker at holde siden renere. At vise flere indlæg, såsom 6-9, er en god idé, hvis du vil fokusere på blogflow.
- Antal indlæg: 3
Indtast 1 for offset. Dette fortæller Divi at starte med det andet blogindlæg, som forhindrer os i at vise den samme artikel, som allerede blev vist i blogindlægget vist over det.
- Post offset nummer: 1
Elementer
Rul til Elementer . Aktiver fremhævet billede, dato, kategoriuddrag og paginering. Deaktiver resten.
- Vis udvalgt billede: Ja
- Data: Ja
- Kategorier: Ja
- Uddrag: Ja
- Sideinddeling: Ja
Baggrund
Adgang til Baggrund og indstil gitterflisens baggrundsfarve til rgba(255,255,255,0)
- Baggrundsfarve for gitterflise: rgba (255,255,255,0)
Layout og overlay
Gå derefter til Fanen Stil . Lad layoutet være indstillet til Grid. Vi valgte layoutet i fuld bredde til blogindlægget over dette. Vi vil bruge gitterlayoutet til dette blogfeed, som er standardindstillingen. Deaktiver den fremhævede billedoverlejring.
- Layout: Gitter
- Valgt billedoverlejring: Deaktiveret
Titeltekst
for titeltekst , vælg H2. Vælg Cormorant Infant, indstil den til Fed og indtast #442854 for farven.
- Indsæt overskrift tre: H2
- Skrifttypetitel: Skarvspædbarn
- Soft Light Titel: Fed tekst
- Tekstfarve på titel: #442854
Vælg 20px for tekststørrelsen. Indstil linjehøjden til 1,1 em.
- Titel Tekststørrelse: Desktop 20px
- Titellinjehøjde: 1,1 em
Tekstens krop
Rul til Brødtekst og vælg Kabine. Indstil farven til #442854.
- Politikorps: kahyt
- Brødtekstfarve: #442854
Indstil linjehøjden til 1,8 em.
- Linjehøjde: 1,8 em
Tekst metadata
Rul til Tekst Metadata og vælg Cormorant Infant. Indstil vægt til normal, stil til ingen, og farve til #442854.
- Metadataskrifttype: Skarvspædbarn
- Metadata Dæmpet lys: Almindelig
- Metadata kopistil: Ingen
- Metadata tekstfarve: #442854
- Metadata tekststørrelse: desktop 16px, tablet 15px, telefon 14px
- Metadata rækkehøjde: 1,8 em
Sideinddelingstekst
Lad os nu gå til Paginering . For skrifttypen vælg Cormorant Infant, vælg Fed og skift farven til #442854.
- Font Vis sideinddeling: Skarv spædbarn
- Vis personsøgning blødt lys: Fed
- Tekstfarve Vis paginering: #442854
afstand
Så går vi videre til afstand og tilføj 0vw-margenen øverst. Dette forhindrer vores modul i at overlappe det forrige modul.
- Topmargin: 0vw
grænse
Rul til grænse og indtast 0px for alle fire hjørner. Dette giver os vores kvadratiske form til kortet.
- Afrundet rektangelgitterlayout: 0px
Skyggeæske
Rul til sidst ned til Box Shadow og deaktiver det. Luk blogindstillinger. Blogafsnittet er færdigt.
- Skyggeboks: ingen
Tilføj en ny "Call to Action"-sektion til blogsiden
Så går vi oprette sektionen "Call to Action". af siden. Dette afsnit indeholder et parallaks fuldskærms baggrundsbillede, kontakt og sociale følgende links.
Tilføj et nyt afsnit
Klik på det blå ikon for at tilføje en ny almindelig sektion nederst på siden.
- Afsnit: Almindelig
Stil sektionen Call to Action
Åbn dem sektionsparametre ved at klikke på dets tandhjulsikon.
Baggrund
Rul til Baggrund og vælg fanen Billede. Klik på det grå ikon mærket Baggrundsbillede.
Vælg et fuldskærmsbillede fra dit mediebibliotek. Vælg Brug parallakseeffekt, og vælg derefter CSS for parallaksemetoden.
- Baggrundsbillede
- Brug parallakseeffekt: Ja
- Parallax metode: CSS
Rul ned til Admin Label og indtast "Footer" i feltet. Dette vil hjælpe dig med at holde styr på sektioner.
- Admin Tag: Sidefod
Gå derefter til Fanen Stil.
- Intern margin: 10vw (top og bund)
Tilføj en ny linje
Klik på det grønne plus-ikon og tilføje en række til en enkelt kolonne for vores indhold.
dimensionering
Åbn dem linjeparametre og gå til fanen Stil.
- Maksimal bredde: 320 pixels
Titeltekstmodul
Vores Call to Action-sektion præsenteres med en titel. For at skabe dette, tilføje et tekstmodul ved linjen.
Tilpas titeltekst
Tilføj din titel og skift skrifttypen til Overskrift 3.
- Skrifttype: Overskrift 3
- Tekst: Alt om Divi
Overskriftstekst
Gå til Fanen Stil og scroll til Underteksttekst . Vælg center for justering, vælg H3, vælg Cormorant Infant, indstil den til Fed og vælg hvid som farve.
- Tekstjustering: Center
- Overskriftstekst: H3
- Overskriftsskrifttype: Skarvspædbarn
- Blødt lys overskrift: Fed
- Sidehovedtekstfarve: #ffffff
- Sidehovedtekststørrelse: 42 pixels til desktop, 20 pixels til tablet, 16 pixels til telefon
- Header line højde: 1,1 em
afstand
Rul til sidst ned til afstand og tilføje 10 pixels til bundmargenen. Luk modulindstillingerne.
- Bundmargen: 10px
Tekstmodul til adressen
Tilføj endnu et tekstmodul for din fysiske adresse.
Stil det fysiske adressetekstmodul
Adressetekst
Tilføj din adresse som afsnitstekst.
- Stil: Afsnit
- Tekst: din adresse
Afsnitstekst
Gå derefter til Tekst i Fanen Stil og vælg Cormorant Infant, semi fed, og sæt den til hvid.
- Skrifttype: Cormorant Infant
- Blød let tekst: halvfed
- Tekstfarve Tekst: #ffffff
- Tekst Tekststørrelse: 28px til desktop, 20px til tablet, 16px til telefon
- Tekstlinjehøjde: 1,2 em
Tilføj modulet følg os på sociale netværk
Vores sidste modul er modulet Følg os på sociale medier . Tilføj det til bunden af linjen.
Stiliser Følg os på sociale medier-modulet
Vi starter med Fanen Stil denne gang. Vælg Center for Module Alignment og skift ikonfarven til #442854.
- Moduljustering: Center
- Ikonfarve: #442854
Rul til Bordure og tilføj 23 pixels for afrundede hjørner.
- Afrundet rektangel: 32px
Tilføj og tilpas dine sociale netværk
Gå nu tilbage til Fanen Indhold og tilføje eventuelle sociale netværk, du vil inkludere. Klik på det grå plus-ikon.
Åbn dem indstillinger for hvert af dine sociale netværk , vælg netværket og tilføj linket til din konto. Indstil baggrundsfarven til #f9f3fd. Luk undermodulindstillingerne.
- Socialt netværk: dit valg
- Kontolink URL: dit link
- Baggrundsfarve: #f9f3fd
Gem blogsiden og afslut den visuelle builder
Endelig gemme siden i nederste højre hjørne og vælg Afslut Visual Builder øverst på siden. Du er klar til at se dit arbejde.
Forhåndsvisning af blogside
Her er vores resultater.
Download DIVI nu!!!
Konklusion
Så! Dette er vores kig på, hvordan man opretter en blogside med Divi.
Divi Builder gør det nemt at skabe interessante layouts, og der er flere måder at bruge hvert af modulerne på. Som denne vejledning har udforsket, er det muligt at bruge flere versioner af blogmodulet på samme side for at vise blogfeedet på forskellige måder.
Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved 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.
...
