Wilt u uw DIVI Blog-pagina weergeven als een raster met meerdere kolommen?
Divi's Blog-module kan blogberichten weergeven in een volledige breedte of rasterlay-out. Als u de rasterlay-out kiest, is het maximale aantal kolommen dat u kunt hebben drie.
In deze tutorial, met slechts een paar CSS-fragmenten, jouw blog zal veranderen in een prachtige rasterindeling met meerdere kolommen. Bovendien zijn de kolommen soepel en responsief in alle browserformaten, zodat u zich geen zorgen hoeft te maken over het bijwerken van die mediaquery's of responsieve instellingen.
U kunt ook ons ​​artikel raadplegen om te weten Hoe maak je een blogpagina aan met de DIVI Blog-module.
overzicht
Laten we, voordat we aan deze tutorial beginnen, eerst kijken naar het resultaat dat we willen bereiken.
Download DIVI nu!!!
Een blogmodule configureren met een indeling op volledig scherm
De Blog-module van DIVI kan worden gebruikt om overal op uw blog een blog toe te voegen Site web. Het maakt het maken van een blogpagina in Divi heel eenvoudig. Het enige wat u hoeft te doen is een Blog-module aan de pagina toe te voegen met behulp van de Divi Builder.
Voor deze zelfstudie gaan we een vooraf gemaakte bloglay-out gebruiken van een van gratis lay-outpakketten van DIVI die al een Blog-module met een basisstijl bevat.
Om de vooraf gemaakte bloglay-out te laden:
- Maak een nieuwe pagina vanuit het WordPress-dashboard
- Geef het een relevante naam en klik op 'Gebruik Divi Builder'
- Klik op "Kies lay-out"
- Typ in de zoekbalk 'Fashion Designer' en kies de lay-out 'Fashion Designer Blog Page'
- Zorg ervoor dat u Bloglay-out kiest en klik vervolgens op "Kies lay-out"
Zodra de lay-out is geladen, zoekt u de blogmodule die wordt gebruikt om blogberichten weer te geven en opent u de instellingen.
Aantal berichten instellen
Update in de bloginstellingen de inhoud om het aantal berichten te beperken tot 10. (Dit is voornamelijk om esthetische redenen, aangezien ons raster uiteindelijk twee rijen van vijf blogposts zal bevatten.)
- Aantal posities: 10
Selecteer indeling op volledig scherm
Aangezien we onze blog in kolommen gaan opmaken met behulp van CSS Grid, moeten we ervoor zorgen dat de lay-out van de Blog-module is 'Volledig scherm' (niet 'Raster'). Dit zorgt ervoor dat blogberichten verticaal worden gestapeld in hun normale paginavolgorde.
Om de lay-out van de Blog-module te wijzigen, opent u de module-instellingen en opent u onder het tabblad Stijl het vervolgkeuzemenu Sjabloon en selecteer Volledig scherm .
Nu zal elke blogpost de volledige breedte van de kolom (of bovenliggende container) beslaan.
Laten we een rand toevoegen aan blogposts. Werk de randopties als volgt bij:
- Randbreedte: 1px
- Randkleur: rgba (150,104,70,0.35)
Een aangepaste CSS-klasse toevoegen aan de Blog-module
Om deze specifieke blogmodule (niet een andere) effectief te targeten met onze CSS, moeten we onze module een aangepaste CSS-klasse geven. Voeg op het tabblad Geavanceerd de volgende CSS-klasse toe:
- CSS-klasse: et-blog-css-grid
De lay-out met meerdere kolommen maken met CSS Grid
Nu onze blogmodule is ingesteld met een lay-out op volledig scherm, zijn we klaar om onze aangepaste CSS toe te voegen.
We gaan een codemodule invoegen onder de blogmodule om CSS aan de pagina toe te voegen.
Voeg in het code-invoervak ​​de benodigde stijltags toe om eventuele CSS-code die aan een pagina is toegevoegd, in te pakken.
Plak het volgende CSS-codefragment in de stijltags:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
De eerste regel van CSS presenteert de inhoud (of modules) in rastervorm.
display: grid;De tweede regel van CSS definieert het rasterkolommodel.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));De derde rij bepaalt de afstand tussen rasteritems.
gap : 20px ;Op dit punt is het responsieve raster met vijf kolommen klaar voor gebruik. Als u geen paginering of randen voor uw blogberichten wilt gebruiken, kunt u hier stoppen.
Hier is het resultaat tot nu toe.
Pas rasteritems aan
Vervolgens kunnen we een paar regels CSS toevoegen die gericht zijn op de rasterelementen, zodat ze zijn uitgelijnd met de bovenkant van elke rij en wat opvulling hebben.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Paginering van raster verwijderd
Als u momenteel paginering actief heeft in de blogmodule, wordt deze behandeld als het laatste rasterelement in het CSS-raster. Om de paginering volledig uit het raster te verwijderen, kunnen we deze een absolute positie geven en direct onder de blogmodule plaatsen. Voeg hiervoor de volgende CSS toe:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Laten we het resultaat tot nu toe zien!
Tip: pas de grootte van alle aanbevolen afbeeldingen (of miniaturen) aan
Op dit punt merk je misschien de inconsistentie in de hoogte van de afbeeldingen op elke blogpost. Als je wilt dat ze allemaal dezelfde hoogte hebben, kun je daar ook extra CSS voor gebruiken.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
Met een interne topmarge van 56,25% zouden we voor al onze afbeeldingen een beeldverhouding van 16:9 moeten krijgen.
Voel je vrij om de opvulling op de afbeeldingscontainer aan te passen om de gewenste beeldverhouding voor je afbeelding te krijgen.
Eindresultaat
En hier is een laatste preview van onze Blog-module met onze nieuwe kolommen en raster. En zoals we kunnen zien, reageert het raster volledig.
Download DIVI nu!!!
Conclusie
Het is gebeurd ! We hebben je in deze tutorial laten zien hoe je je blogberichten in kolommen kunt rangschikken.
We hebben de hele Divi Blog-module kunnen herstructureren tot een vloeiende lay-out met vijf kolommen. Ik hoop dat dit je tijd bespaart en je meer opties geeft om mooie blogpagina's te maken. U kunt ook overleggen Een blogpagina maken met Divi's Blog-module
Zie ook 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.
