Met Divi zijn zelfs blogs een module en kan uw “blog” overal op uw computer worden geplaatst Site web en in verschillende formaten. U kunt blog- en zijbalkmodules combineren om klassieke blogontwerpen te maken. 1 kolom, 2 kolom of 3 kolom kan worden gemaakt met behulp van de blog- en zijbalkmodule.

preview blog divi module blog.png

Een blogmodule toevoegen aan uw pagina

Voordat u een blogmodule aan uw pagina kunt toevoegen, moet u eerst de Divi Builder openen. Zodra de Divi-thema geïnstalleerd op uw Site web, je ziet een knop Gebruik Divi Builder boven de berichteditor wanneer u een nieuwe pagina maakt. Door op deze knop te klikken, kunt u Divi Builder activeren, waarmee u toegang krijgt tot alle Divi Builder-modules. Klik vervolgens op de knop Gebruik Visual Builder om de generator in visuele modus te starten. U kunt ook op de knop klikken Gebruik Visual Builder wanneer u door uw bladert Site web upstream als u bent ingelogd op uw WordPress-dashboard.

knop divi bouwmodule blog divi.png

Eenmaal ingevoerd in Visual Builder, kunt u op de grijze plusknop klikken om een ​​nieuwe module aan uw pagina toe te voegen. Nieuwe modules kunnen alleen binnen rijen worden toegevoegd. Als u een nieuwe pagina begint, vergeet dan niet eerst een rij aan uw pagina toe te voegen. We hebben geweldige tutorials over het gebruik van de elementen van lignes en secties door Divi.

add blog module divi builder.png

Zoek de blogmodule in de lijst met modules en klik erop om deze aan uw pagina toe te voegen. De lijst met modules is doorzoekbaar, wat betekent dat u ook het woord "blog" kunt typen en vervolgens op enter kunt klikken om de blogmodule automatisch te zoeken en toe te voegen! Zodra de module is toegevoegd, wordt u begroet met de lijst met module-opties. Deze opties zijn onderverdeeld in drie hoofdgroepen: Inhoud , Ontwerpfase et vergevorderd .

Gebruik het geval van de blogmodule met een rasterlay-out in een gespecialiseerde sectie met een rechterzijbalk

Voor dit voorbeeld voeg ik een blogmodule toe aan een blogpagina. Deze blogpagina heeft een volledige koptekst met een zoekmodule hieronder. Onder de zoekmodule zal ik een gespecialiseerde sectie toevoegen met de blogmodule aan de linkerkant en een zijbalksectie aan de rechterkant. De zijbalk aan de rechterkant bevat een widget voor recente berichten, een e-mailoptin-module en een persoonsmodule.

Dit is hoe de voorbeeldpagina eruit ziet.

voorbeeld van pagina divi.jpg

Merk op dat de blogmodule zich in een rasterlay-out bevindt aan de linkerkant van het speciale gedeelte.

Laten we beginnen.

Gebruik de visuele builder om een ​​gespecialiseerde sectie toe te voegen met de volgende lay-out:

layout specialiteit divi.png

U wordt gevraagd om een ​​kolom of een rij met twee kolommen aan de linkerkant toe te voegen. Kies rij 1 kolom.

seletion zone divi builder.png

Voeg vervolgens de blogmodule toe aan de regel.

gebruik de module blog.png

Werk de bloginstellingen als volgt bij:

Inhoud opties

Posten Nummer: 6
Meer informatie Knop: AAN
Toon paginering: NO
Achtergrondkleur raster: #ffffff

Ontwerpopties

Lay-out: raster
Gebruik slagschaduw: AAN
Overlay-kleurpictogram: #ffffff
Hover Overlay Color: rgba (224,153,0,0.51) Header
politie:
Koptekst lettergrootte: 21px
Tekstkleur koptekst: # 333333
Letterafstand: 1px
Hoogte koprij: 1.2 em
Rand: JA
Kleur van de rand: # f0f0f0
Breedte van de rand: 1px
Randstijl: effen

Opties AVANCEES

Aangepaste CSS (knop Meer lezen):

kleur: # e09900;
kijkblok;
text-align: center;
margin-top: 10px;
border: 1px solid #ccc;
opvulling: 5px;
Teksttransformatie: hoofdlettergebruik;
letter spacing: 1px;

blog instellingen divi.png

De geavanceerde aangepaste CSS-knop voor de knop Meer lezen creëert een aangepaste look die overeenkomt met het ontwerp.

ontwerpartikelen blokkeren divi.jpg

In het rechterzijbalkgedeelte van de specialistische sectielay-out moet u een zijbalkmodule toevoegen die de widget voor recente berichten invoegt. Hieronder moet u een e-mailoptin-module toevoegen. En vervolgens onder Email Optin, moet u de Persoonsmodule met auteursinformatie toevoegen.

Dat is het!

Opties voor bloginhoud

Op het tabblad Inhoud vindt u alle inhoud van de module, zoals tekst, afbeeldingen en pictogrammen. Dat alles controleert wat verschijnt in uw module zal altijd op dit tabblad staan.

blogmodule divi.png

Artikelnummer (aantal items)

Stel het aantal berichten in dat u wilt weergeven. U heeft berichten nodig voor alles wat in deze module verschijnt.

Selecteer de categorieën die u in de berichtfeed wilt opnemen. Alle berichtcategorieën die u heeft gemaakt, verschijnen hier zodat u ze kunt selecteren / deselecteren.

Categorieën inbegrepen

Kies de categorieën die u in de feed wilt opnemen.

Metadatumformaat

Stel hier de datumnotatie in die u in uw blogberichten wilt weergeven. De standaardlay-out is M j, Y-formaat (6 januari 2014) Zie het WordPress codex op datumnotaties voor meer opties.

Inhoud

Als u volledige inhoud toont, worden uw berichten op de indexpagina niet afgekapt. Show Snippet geeft alleen uw fragmenttekst weer.

Offset nummer

Kies het aantal berichten dat u wilt compenseren. Als je compenseert met bijvoorbeeld 3 posts, worden de eerste drie posts in je blogfeed niet weergegeven.

Toon uitgelichte afbeelding

Met deze optie kunt u kiezen of u miniaturen wilt weergeven in uw blogmodule.

Lees meer knop

Hier kunt u instellen of u de "lees meer" -link na het fragment wel of niet wilt weergeven.

Toon auteur

Kies of je de auteur van elk blogbericht wel of niet wilt weergeven in het metabox van het bericht onder de titel van het bericht.

Datum weergeven

Kies of u de datum wilt weergeven waarop elk artikel is gemaakt in het vak Item Meta onder de berichttitel.

elementen om divi module blog.png weer te geven

Categorieën weergeven

Kies of u de berichtcategorieën wel of niet wilt weergeven in het bericht-metagebied onder de publicatietitel.

Toon het aantal reacties

Kies of je het aantal reacties al dan niet wilt weergeven in het post-metavak onder de titel van het bericht.

Paginering bekijken

Kies of u paginering voor deze feed wilt weergeven. Om genummerde paging in te schakelen, moet u de plug-in installeren WP-pagina Navi .

Administratie label

Hierdoor wordt het modulelabel in de generator gewijzigd voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok van de Divi Builder-interface.

Blog ontwerpopties

Op het tabblad Ontwerpen vindt u alle stijlopties voor de module, zoals lettertypen, kleuren, grootte en spatiëring. Op dit tabblad kunt u het uiterlijk van uw module wijzigen. Elke Divi-module heeft een lange lijst met ontwerpinstellingen die u kunt gebruiken om vrijwel alles aan te passen.

ontwerp optie divi builder module blog.png

Aanleg

U kunt ervoor kiezen om uw blogberichten in een raster- of een volledige breedte-indeling weer te geven.

Opgelegd beeld

Als deze optie is ingeschakeld, worden een kleur en een overlay-pictogram weergegeven wanneer een bezoeker met de muis over de geselecteerde afbeelding van een bericht beweegt.

Overlay pictogram kleur

Hier kunt u een aangepaste kleur instellen voor het overlay-pictogram.

Omslagkleur zweven

Hier kunt u een aangepaste kleur voor de overlay definiëren.

Hover Icon Picker

Hier kunt u een aangepast pictogram voor de overlay definiëren.

Tekstkleur

Si jouw blog op een lichte achtergrond wordt geplaatst, moet de tekstkleur op “Donker” worden ingesteld. Visum, ja jouw blog op een donkere achtergrond wordt geplaatst, moet de tekstkleur op “Licht” worden ingesteld.

Header lettertype

U kunt het lettertype van uw koptekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Lettergrootte koptekst

Hier kunt u de grootte van uw koptekst aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Kleur koptekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw koptekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

Tussenruimte koptekst

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw koptekst wilt vergroten, gebruikt u de intervalschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

configuratieafstand header divi.png

Hoogte koprij

Rijhoogte is van invloed op de ruimte tussen elke rij van uw koptekst.Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Lichaamsdoopvont

U kunt uw hoofdlettertype wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

Tekst lettergrootte

Hier kunt u de grootte van uw hoofdtekst aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Tekstkleur hoofdtekst

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw hoofdtekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

Afstand van hoofdletters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw hoofdtekst wilt vergroten, gebruikt u de intervalschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Hoogte van de lichaamslijn

De regelhoogte is van invloed op de ruimte tussen elke regel met hoofdtekst. Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de intervalschuifregelaar om de ruimte aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Metas-lettertype

U kunt het lettertype van uw metatekst wijzigen door het gewenste lettertype te selecteren in het vervolgkeuzemenu. Divi wordt geleverd met tientallen geweldige lettertypen, mogelijk gemaakt door Google Fonts. Divi gebruikt standaard het Open Sans-lettertype voor alle tekst op uw pagina. U kunt ook de stijl van uw tekst aanpassen met opties voor vet, cursief, hoofdletters en onderstrepen.

sectie meta data diiv builder.png

Metas lettergrootte

Hier kunt u de grootte van uw metatekst aanpassen. U kunt de intervalschuifregelaar slepen om de grootte van uw tekst te vergroten of te verkleinen, of u kunt de gewenste waarde voor de tekstgrootte rechtstreeks invoeren in het invoerveld rechts van de schuifregelaar. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Tekstkleur voor meta

Standaard worden alle tekstkleuren in Divi weergegeven in wit of donkergrijs. Als u de kleur van uw metatekst wilt wijzigen, kiest u met deze optie de gewenste kleur uit de kleurkiezer.

Spatiëring van meta-letters

Letterafstand is van invloed op de ruimte tussen elke letter. Als u de ruimte tussen elke letter van uw metatekst wilt vergroten, gebruikt u de intervalschuifregelaar om de spatie aan te passen of voert u de gewenste afstand in het invoerveld rechts van de schuifregelaar in. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Meta-lijnhoogte

Rijhoogte is van invloed op de ruimte tussen elke rij in uw metatekst.Als u de ruimte tussen elke rij wilt vergroten, gebruikt u de bereikschuifregelaar om de ruimte aan te passen of voert u de grootte van de gewenste afstand in het veld in rechts van de cursor. De invoervelden ondersteunen verschillende maateenheden, wat betekent dat u "px" of "em" kunt invoeren, afhankelijk van uw maat, om het type eenheid te wijzigen.

Gebruik de rand

Als u deze optie inschakelt, wordt een rand rond uw module geplaatst. Deze rand kan worden aangepast met behulp van de volgende voorwaardelijke parameters.

Kleur van de rand

Deze optie heeft invloed op de kleur van uw rand. Selecteer een aangepaste kleur uit de kleurkiezer om deze op uw rand toe te passen.

Breedte van de rand

Standaard zijn de randen 1 pixel breed. U kunt deze waarde verhogen door de bereikschuifregelaar te slepen of een aangepaste waarde in het invoerveld rechts van de schuifregelaar in te voeren. Ondersteunde maateenheden op maat, wat betekent dat u de standaardeenheid kunt wijzigen van "px" in iets anders, bijv. Em, vh, vw enz.

Randstijl

Randen ondersteunen acht verschillende stijlen, waaronder: massief, gestippeld, gestippeld, dubbel, groef, rand, inzet en begin. Selecteer de gewenste stijl in het vervolgkeuzemenu om deze op uw rand toe te passen.

Geavanceerde blogopties

Op het tabblad Geavanceerd vindt u opties die meer ervaren webontwerpers nuttig kunnen vinden, zoals aangepaste CSS- en HTML-kenmerken. Hier kunt u aangepaste CSS toepassen op elk van de vele elementen van de module. U kunt ook aangepaste CSS-klassen en ID's toepassen op de module, die kunnen worden gebruikt om de module aan te passen in het style.css-bestand van uw child-thema.

geavanceerd gedeelte van de blog.png-module

CSS ID

Voer een optionele CSS-ID in om voor deze module te gebruiken. Een ID kan worden gebruikt om een ​​aangepaste CSS-stijl te maken of om naar bepaalde secties van uw pagina te linken.

CSS-klasse

Voer de optionele CSS-klassen in die voor deze module moeten worden gebruikt. Een CSS-klasse kan worden gebruikt om aangepaste CSS-styling te maken. U kunt meerdere klassen toevoegen, gescheiden door een spatie. Deze lessen kunnen worden gebruikt in uw Divi-thema Onderliggende of in aangepaste CSS die u aan uw pagina of website toevoegt met behulp van Divi Theme Options of Divi Builder Page Settings.

Aangepaste CSS

Aangepaste CSS kan ook worden toegepast op de module en alle interne elementen van de module. In het gedeelte Aangepaste CSS vindt u een tekstveld waar u CSS rechtstreeks aan elk element kunt toevoegen. CSS-items in deze instellingen zijn al ingesloten met stijltags. U hoeft dus alleen maar CSS-regels in te voeren, gescheiden door puntkomma's.

zichtbaarheid

Met deze optie kunt u de apparaten bedienen waarop uw module verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende mods op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.

Dat is het voor deze tutorial.