Wil je een blogpagina maken met de Blog module de Div?
Gewoonlijk wordt elk Divi-layoutpakket gepubliceerd op elegante thema's biedt een bloglay-out, waarmee u kunt creëren jouw blog snel genoeg. Maar heb je ooit willen zien hoe je zelf een van deze blogpagina's kunt maken?
In dit artikel zullen we zien hoe je een blogpagina kunt maken met Divi's Blog-module. We zullen elke instelling stap voor stap doornemen.
Laten we beginnen!
overzicht
Voordat we aan de slag gaan, laten we eerst een overzicht zien van wat we gaan maken.
Een nieuwe blogpagina maken
Maak een nieuwe pagina
Eerst maken we onze pagina aan. Klik in het WordPress-dashboard op Pages > toevoegen.
Geef de pagina een titel die voor jou logisch is.
- Titel van de pagina: Blog op Divi
Overschakelen naar Divi Builder
Klik op de paarse knop in het midden van de pagina: Gebruik Divi Builder .
Voeg een sectie toe voor de titel van de blogpagina
Pas de sectie aan
We beginnen met het eerste deel. Open Ze sectie parameters: .
Scroll naar Achtergrond en verander de kleur in #f9f3fd. Voer Blog in als het beheerderslabel. Sluit de sectie-instellingen.
- Achtergrond: #f9f3fd
- Beheerderslabel: Blog
Titel van blogpagina maken
Dan voegen we een toe lijn voor de titel. Selecteer het groene pictogram en kies de rij met één kolom.
Voeg dan een toe tekst module aan de lijn.
De module Blogtiteltekst aanpassen
Open ze Instellingen voor tekstmodule en selecteer H1. Voeg de titel Onze blog toe.
- Lettertype: Titel 1
- Tekst: Onze blog
Ga dan naar deTabblad Stijl en stel de uitlijning in op Gecentreerd. Kies voor de H1-titeltekst Cormorant Infant als lettertype en maak het vetgedrukt.
- Tekstuitlijning: gecentreerd
- Koptekst: H1
- Lettertype kop: Aalscholver Infant
- Koptekst zacht licht: vetgedrukte tekst
Stel Kleur in op #442854, Grootte op 130px en Lijnhoogte op 0,8em.
- Kleur: #442854
- Tekstgrootte bureaublad: 130px
- Lijnhoogte: 0,8em
Maak het nieuwste artikel en de sectie Call to Action
Onze sectie bestaat uit het laatste artikel en een opt-in e-mail.
Voeg een nieuwe regel toe onder onze eerste rij en selecteer het kolomontwerp 2/3 links en 1/3 rechts.
Open ze lijnparameters door op het tandwielpictogram te klikken.
Selecteer deTabblad Stijl, scroll naar tussenruimte en voeg 0px toe aan de onderste binnenmarge. Sluit Instellingen.
- Onderste interne marge: 0px
Voeg de aanbevolen blogpostmodule toe en pas deze aan
Dan voegen we een toe blog-module . Dit zal ons laatste artikel bevatten. Klik op het grijze plus-pictogram in de linkerkolom van onze nieuwe rij en voeg de Blog-module toe.
Inhoud
Sous Inhoud , voer 1 in voor het aantal berichten.
- Aantal posities: 1
Communie
Scroll naar Communie en schakel Auteur en Paginering uit. We laten de rest op hun standaardwaarden.
- Toon auteur: nee
- Paginering tonen: Nee
Aanleg
Selecteer vervolgens de Tabblad Stijl en kies Volledig scherm voor de lay-out en schakel de uitgelichte afbeeldingsoverlay uit.
- Model: Volledig scherm
- Geselecteerde afbeeldingsoverlay: uitgeschakeld
Titel tekst
Scroll naar Titel tekst . Selecteer H2 en kies Cormoran Infant. Selecteer Vet en verander de kleur in #442854.
- Kop drie invoegen: H2
- Lettertype Titel: Aalscholver Infant
- Titel zacht licht: vetgedrukte tekst
- Titel tekstkleur: #442854
Stel de lettergrootte in op 30 pixels. Verander de lijnhoogte in 1.1em.
- Grootte: 30 pixels voor desktop, 20 pixels voor tablet, 18 pixels voor telefoon
- Hoogte titelregel: 1,1 em
Het lichaam van de tekst
Scroll dan naar beneden naar Tekstgedeelte . Kies Cabine voor het lettertype, verander de kleur in #442854 en verander de regelhoogte in 1,8em.
- Politiekorps: Cabine
- Kleur hoofdtekst: #442854
- Hoogte lichaamslijn: 1,8 em
Tekstmetadata
Scroll dan naar beneden naar Tekstmetagegevens . Stel de parameters als volgt in:
- Lettertype metagegevens: Cormorant Infant
- Metagegevens Gedimd licht: Normaal
- Kopieerstijl metagegevens: Geen
- Metadata tekstkleur: #442854
- Metadata tekstgrootte: Desktop 16px, Tablet 15px, Telefoon 14px
- Metadata rijhoogte: 1,8 em
tussenruimte
Scroll dan naar beneden naar tussenruimte en verander de bovenmarge in 0vw.
- Bovenmarge: 0vw
Schaduw doos
Scroll ten slotte naar beneden naar Schaduw doos en zet het uit.
- Schaduwdoos: Uitschakelen
Module voor blog-e-mailtekst toevoegen en aanpassen
Nu gaan we naar de rechterkolom en maak de oproep tot actie via e-mail . Voeg eerst een tekstmodule toe in de rechterkolom. Klik op het grijze pluspictogram en zoek naar Tekst.
Inhoud
Selecteer Kop 2 en voer de tekst Abonneren op onze aanbiedingen in.
- Lettertype: Kop 2
- Tekst: Abonneer u op onze aanbiedingen
Koptekst
voor teksten van de titel, selecteer Center Alignment, kies H2, selecteer Cormorant Infant en stel deze in op Vet.
- Tekstuitlijning: gecentreerd
- Koptekst: H2
- Lettertype kop: Aalscholver Infant
- Kop zacht licht: vet
Verander de kleur in #442854, de grootte in 32px en de lijnhoogte in 0,95em.
- Kleur koptekst: #442854
- Grootte koptekst: 32 pixels
- Hoogte kopregel: 0,95 em
tussenruimte
Scroll ten slotte naar beneden naar tussenruimte en voeg 10 pixels toe aan de ondermarge. Sluit de instellingen van de tekstmodule.
- Ondermarge: 10px
Optin-module voor blog-e-mail toevoegen en aanpassen
Dan gaan we maak de formulier e-mailen . Voeg een E-mail Optin-module toe onder de tekstmodule in de rechterkolom.
Inhoud
Verwijder eerst de titel en hoofdtekst.
- Titel: Geen
- Hoofdtekst: geen
Scroll naar Email account en voeg uw serviceprovider toe.
Scroll dan naar beneden naar Achtergrond en deselecteer de achtergrondkleur.
- Gebruik achtergrondkleur: nee
Velden
Ga naar de Tabblad Stijl en verander de achtergrondkleur van velden in rgba(255,255,255,0) en de tekstkleur in #442854.
- Achtergrondkleurvelden: rgba(255,255,255,0)
- Tekstkleurvelden: #442854
Scroll naar beneden naar lettertype opties en verander het lettertype in cabin, de grootte in 16px en de regelhoogte in 1,8em.
- Lettertypevelden: Cabine
- Tekstgrootte velden: 16 pixels
- Hoogte veldrij: 1,8 em
Pas vervolgens de afgeronde hoek van de velden aan naar 32px, de randbreedte naar 2px en verander de randkleur naar #442854.
- Afgeronde rechthoek-besturingselementen: 32px
- Randbreedte velden: 2px
- Randkleurvelden: #442854
knoop
Scroll naar Knop en selecteer Aangepaste stijlen gebruiken voor Button . Verander de grootte in 18ps, de knopkleur in wit en de achtergrondkleur van de knop in #442854.
- Gebruik aangepaste stijlen voor de knop: Ja
- Tekstgrootte knop: 18 pixels
- Tekstkleur knop: #ffffff
- Achtergrondknop: #442854
Wijzig de randradius in 50 pixels, het lettertype in Cormorant Infant en maak het gewicht vet.
- Randstraalknop: 50px
- Lettertype-knop: Aalscholver Infant
- Soft Light-knop: vetgedrukte tekst
Laten we tot slot wat marges toevoegen. Voer 20px in voor de bovenmarge, 12px voor de opvulling boven en onder en 32px voor de opvulling links en rechts. Sluit E-mail Optin-instellingen.
- Knop bovenste marge: 20 px
- Opvulknop boven en onder: 12 px
- Knop links en rechts opvulling: 32px
Nieuwe regel toevoegen voor blogpostlijst
We gaan nu lijst met items maken van de pagina. Voeg eerst een nieuwe rij met één kolom toe onder onze vorige sectie.
Lijn instellingen
Ga naar de Tabblad Stijl en voeg 0px toe aan de Vertex Inner Margin. Sluit de lijninstellingen.
- Binnenste marge Vertex: 0px
Voeg een blogmodule toe aan uw lijn
Voeg een ... toe blog-module naar uw nieuwe regel door op het grijze pluspictogram te klikken en op Blog te klikken.
De blogpostfeed stylen
Laten we de feed voor de blogpagina wijzigen.
Inhoud van blogfeed
Open ze Instellingen blogmodule en voer 3 in voor het aantal berichten. Hiermee kunt u het aantal berichten kiezen dat op het scherm wordt weergegeven.
Een lager getal, zoals 3, stelt ons in staat om ons te concentreren op recente berichten en de paginagrootte te verkleinen. Dit is een goede keuze als je niet vaak post of de pagina schoner wilt houden. Het weergeven van meer berichten, zoals 6-9, is een goed idee als u zich wilt concentreren op de blogstroom.
- Aantal berichten: 3
Voer 1 in voor de offset. Dit vertelt Divi om te beginnen met de tweede blogpost, waardoor we niet hetzelfde artikel kunnen weergeven dat al werd weergegeven in de blogpost die erboven staat.
- Post offset nummer: 1
Communie
Scroll naar Communie . Schakel uitgelichte afbeelding, datum, categoriefragment en paginering in. Schakel de rest uit.
- Toon uitgelichte afbeelding: Ja
- Gegevens: Ja
- Categorieën: Ja
- Uittreksel: Ja
- Paginering: Ja
Achtergrond
Toegang tot Achtergrond en stel de achtergrondkleur van de rastertegel in op rgba(255,255,255,0)
- Achtergrondkleur raster raster tegel: rgba (255,255,255,0)
Lay-out en overlay
Ga dan naar de Tabblad Stijl . Laat de lay-out ingesteld op Raster. We hebben de lay-out over de volledige breedte gekozen voor de blogpost hierboven. We zullen de rasterlay-out voor deze blogfeed gebruiken, wat de standaardoptie is. Schakel de uitgelichte afbeeldingsoverlay uit.
- Lay-out: raster
- Geselecteerde afbeeldingsoverlay: uitgeschakeld
Titel tekst
voor titel tekst , selecteer H2. Kies Cormorant Infant, zet deze op Vet en voer #442854 in voor de kleur.
- Kop drie invoegen: H2
- Lettertype Titel: Aalscholver Infant
- Titel zacht licht: vetgedrukte tekst
- Titel tekstkleur: #442854
Kies 20px voor de tekstgrootte. Stel de lijnhoogte in op 1,1 em.
- Titel Tekstgrootte: Desktop 20px
- Hoogte titelregel: 1,1 em
Het lichaam van de tekst
Scroll naar Lichaamstaal en kies Cabine. Stel de kleur in op #442854.
- Politiekorps: cabine
- Kleur hoofdtekst: #442854
Stel de lijnhoogte in op 1,8 em.
- Lijnhoogte: 1,8 em
Tekstmetadata
Scroll naar Tekstmetagegevens en kies Cormorant Infant. Stel gewicht in op normaal, stijl op geen en kleur op #442854.
- Lettertype metagegevens: Cormorant Infant
- Metagegevens Gedimd licht: Normaal
- Kopieerstijl metagegevens: Geen
- Metadata tekstkleur: #442854
- Metadata Tekstgrootte: desktop 16px, tablet 15px, telefoon 14px
- Metadata rijhoogte: 1,8 em
Paginering tekst
Laten we nu naar de Opdelen . Kies voor het lettertype Cormorant Infant, selecteer Vet en verander de kleur in #442854.
- Lettertype Toon paginering: Aalscholver Infant
- Paging Soft Light weergeven: vet
- Tekstkleur Toon paginering: #442854
tussenruimte
Dan gaan we verder met de spacement en voeg bovenaan de 0vw-marge toe. Dit voorkomt dat onze module de vorige module overlapt.
- Bovenmarge: 0vw
grens
Scroll naar grens en voer 0px in voor alle vier de hoeken. Dit geeft ons onze vierkante vorm voor de kaart.
- Afgeronde rechthoek rasterlay-out: 0px
Schaduw doos
Scroll ten slotte naar beneden naar box Shadow en schakel het uit. Sluit de bloginstellingen. Het bloggedeelte is klaar.
- Schaduwdoos: geen
Voeg een nieuwe "Call to Action"-sectie toe aan de blogpagina
Dan gaan we maak de sectie "Oproep tot actie" aan van de pagina. Dit gedeelte bevat een parallax-achtergrondafbeelding op volledig scherm, contact en sociale volgende links.
Een nieuwe sectie toevoegen
Klik op het blauwe pictogram om een nieuwe reguliere sectie toevoegen onderaan de pagina.
- Sectie: Normaal
Stijl de Call to Action-sectie
Open ze sectie parameters: door op het tandwielpictogram te klikken.
Achtergrond
Scroll naar Achtergrond en kies het tabblad Afbeelding. Klik op het grijze pictogram met het label Achtergrondafbeelding.
Kies een afbeelding op volledig scherm uit uw mediabibliotheek. Selecteer Parallax-effect gebruiken en kies vervolgens CSS voor de parallax-methode.
- Achtergrond afbeelding
- Parallax-effect gebruiken: Ja
- Parallax-methode: CSS
Scrol omlaag naar Beheerderslabel en voer "Voettekst" in het veld in. Dit zal u helpen bij het bijhouden van secties.
- Beheerderstag: Voettekst
Ga dan naar de Tabblad Stijl.
- Interne marge: 10vw (boven en onder)
Voeg een nieuwe regel toe
Klik op het groene pluspictogram en een rij toevoegen aan een enkele kolom voor onze inhoud.
sizing
Open ze lijnparameters en ga naar het tabblad Stijl.
- Maximale breedte: 320 pixels
Titel tekst module
Onze Call to Action-sectie wordt gepresenteerd met een titel. Om dit te creëren, een tekstmodule toevoegen aan de lijn.
Titeltekst aanpassen
Voeg je titel toe en verander het lettertype in Kop 3.
- Lettertype: Kop 3
- Tekst: Alles over Divi
Koptekst
Ga naar de Tabblad Stijl en scroll naar Ondertitel tekst . Kies het midden voor uitlijning, selecteer H3, kies Cormorant Infant, zet het op Vet en kies wit voor kleur.
- Tekstuitlijning: Midden
- Koptekst: H3
- Lettertype kop: Aalscholver Infant
- Kop zacht licht: vet
- Kleur koptekst: #ffffff
- Tekstgrootte koptekst: 42 pixels voor desktop, 20 pixels voor tablet, 16 pixels voor telefoon
- Hoogte kopregel: 1,1 em
tussenruimte
Scroll ten slotte naar beneden naar tussenruimte en voeg 10 pixels toe aan de ondermarge. Sluit de module-instellingen.
- Ondermarge: 10px
Tekstmodule voor het adres
Nog een tekstmodule toevoegen voor uw fysieke adres.
Stijl de module Fysiek adrestekst
Adrestekst
Voeg uw adres toe als alineatekst.
- Stijl: Alinea
- Tekst: uw adres
Tekst van alinea
Ga dan naar Tekst in de Tabblad Stijl en kies Cormorant Infant, half vet, en zet het op wit.
- Lettertype: Cormorant Infant
- Tekst zacht licht: halfvet
- Tekstkleur Tekst: #ffffff
- Tekst Tekstgrootte: 28px voor desktop, 20px voor tablet, 16px voor telefoon
- Hoogte tekstregel: 1,2 em
Voeg de module toe volg ons op sociale netwerken
Onze laatste module is de module Volg ons op social media . Voeg het toe aan de onderkant van de regel.
Stileren De volg ons op sociale media module
We beginnen met de Tabblad Stijl deze keer. Selecteer Center for Module Alignment en verander de pictogramkleur in #442854.
- Module-uitlijning: midden
- Pictogramkleur: #442854
Scroll naar Bordure en voeg 23 pixels toe voor afgeronde hoeken.
- Afgeronde rechthoek: 32px
Uw sociale netwerken toevoegen en aanpassen
Ga nu terug naar de Tabblad Inhoud en voeg alle sociale netwerken toe die u wilt opnemen. Klik op het grijze pluspictogram.
Open ze instellingen voor elk van uw sociale netwerken , kies het netwerk en voeg de link toe aan je account. Stel de achtergrondkleur in op #f9f3fd. Sluit de instellingen van de submodule.
- Sociaal netwerk: jouw keuze
- Account link URL: jouw link
- Achtergrondkleur: #f9f3fd
Sla de blogpagina op en verlaat de visuele bouwer
Eindelijk, sla de pagina op in de rechter benedenhoek en selecteer Visual Builder afsluiten bovenaan de pagina. Je bent klaar om je werk te zien.
Voorbeeld blogpagina
Hier zijn onze resultaten.
Download DIVI nu!!!
Conclusie
Alstublieft ! Dit is onze kijk op hoe je een blogpagina maakt met Divi.
Divi Builder maakt het gemakkelijk om interessante lay-outs te maken en er zijn meerdere manieren om elk van de modules te gebruiken. Zoals in deze zelfstudie is onderzocht, is het mogelijk om meerdere versies van de blogmodule op dezelfde pagina te gebruiken om de blogfeed op verschillende manieren weer te geven.
Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
