Ben je bekend met het maken van prachtige websites met Divi ? U moet waarschijnlijk weten dat de rasterlay-out een kernfunctie is van de Divi Builder. Meestal begint u met het maken van een rij en kiest u ervoor om meerdere kolommen voor die rij te maken. Met de kolom op zijn plaats, voegt u daar modules toe. We kunnen dingen verder brengen door meer rasters voor die modules toe te voegen.
In deze tutorial zullen we onderzoeken hoe we de rasterlay-out van Divi kunnen uitbreiden door CSS-rasterlay-outs voor Divi-modules te maken met een enkele kolom. Het CSS-raster is (met behulp van CSS Flex ) erg populair om responsieve rasters te maken voor inhoud met slechts een paar CSS-regels. We kunnen dan al onze modules zo indelen dat ze responsief zijn. Beschouw dit als een extra lay-out voor modules die u aan een Divi-kolom kunt toevoegen. Het goede punt hier is dat al onze geneste modules dezelfde hoogte en breedte hebben zonder dat er opvulling en hoogtewaarden hoeven te worden ingesteld.
Eindresultaat voorbeeld
Laten we, voordat u begint, eens kijken wat u aan het einde van deze zelfstudie kunt bereiken.
Een aangepaste CSS-rasterlay-out maken voor Divi-modules
Deel 1: De modules toevoegen aan een Divi-kolom
Een van de eerste dingen die we moeten doen, is onze modules indelen in rasterlay-outs. We zullen alle modules die we willen gebruiken aan onze kolom toevoegen. Laten we beginnen met het maken van een nieuwe rij met één kolom naar de standaard reguliere sectie.
Maak geweldige websites
Met de beste gratis paginabuilder Elementor
Begin nu
De modules maken
Binnen de kolommen voegen we de tekstmodule toe. We zullen dan de inhoudsinstellingen als volgt wijzigen:
- Voeg een H2-kop toe boven de alineatekst
- Achtergrondkleur: #444444
We zullen ook de ontwerpinstellingen als volgt bijwerken:
- Tekstlettertype: Poppins
- Tekstkleur: Licht
- Selecteer het tabblad H2 onder Koptekst
- Kop 2 Lettertypestijl: TT
- Vulling: 10% boven, 10% onder, 10% links 10% rechts
OPMERKING : Om het heel eenvoudig te maken, blijven we meerdere tekstmodules gebruiken met verschillende achtergrondkleuren om het onderscheid tussen elke module te laten zien.
Schakel over naar de lagenweergave en maak de volgende tekstmodule als volgt aan:
- Dupliceer de tekstmodule.
- Open de tekstinstellingen voor de dubbele module.
- De achtergrondkleur bijwerken
- Achtergrondkleur: #4c6085
U kunt dit proces herhalen om de derde tekstmodule als volgt te maken:
- Dupliceer de vorige tekstmodule.
- Open de tekstinstellingen voor de dubbele module.
- De achtergrondkleur bijwerken
- Achtergrondkleur: #39a0ed
We herhalen het proces nog een keer om de vierde tekstmodule als volgt te maken:
- Dupliceer de vorige tekstmodule.
- Open de tekstinstellingen voor de dubbele module.
- De achtergrondkleur bijwerken
- Achtergrondkleur: #13c4a3
Om de volgende vier modules te maken, gebruikt u de multiselect-functie om alle vier de modules te selecteren. Kopieer en plak vervolgens de modules in dezelfde kolom om in totaal acht tekstmodules te maken.
Deel 2: Laten we de CSS-rasterlay-out voor de modules maken
Nu al onze modules zijn toegevoegd, laten we daar een raster voor maken.
Rij-instellingen
Voor dit voorbeeld gebruiken we een lay-out met één kolom, zodat we ons moduleraster in een lay-out over de volledige breedte kunnen weergeven. Nu moeten we de rij-instellingen bijwerken om ervoor te zorgen dat de rij de volledige breedte van de pagina inneemt. We moeten ook de standaard gootbreedte verwijderen, zodat er geen extra marges aan onze modules worden toegevoegd.
Open de rij-instellingen en werk het volgende bij:
- Gootbreedte: 1
- Breedte: 100%
- Max-breedte: 100%
CSS-raster aan de kolom toevoegen om de rasterlay-out voor de modules te maken
Dit is een belangrijke stap in de zelfstudie die de lay-out voor de modules maakt met behulp van de eigenschap CSS Grid.
Om dit te doen, gaan we drie regels CSS toevoegen aan de kolom die de lay-out van onze modules zullen bepalen.
Open de kolominstellingen en plak onder het tabblad Geavanceerd de volgende CSS in het hoofdelement:
display:grid;grid-template-columns: 25% 25% 25% 25%;grid-auto-rows: auto;
De eerste regel van CSS geeft de inhoud (of modules) weer volgens de CSS- rastermodule.
weergave:raster
Op de tweede regel van CSS definiëren we de kolomsjabloon van het raster. In dit geval heeft ons raster vier kolommen met een breedte van 25%.
raster-sjabloon-kolommen: 25% 25% 25% 25%
De derde regel vermeldt de rijen die automatisch worden gegenereerd. Dit betekent dat de hoogte van elke rij wordt bepaald door de verticale hoogte van de inhoud (of modules) binnen de rij.
raster-auto-rijen: auto
Rasterindeling aanpassen op mobiel
Nu moeten we indien nodig ook de rasterlay-out op mobiele apparaten aanpassen.
Om dat te kunnen doen, hoeven we alleen wat CSS toe te voegen aan zowel tablet als mobiel die het aantal kolommen en de breedte van elke kolom verandert.
In dit voorbeeld gaan we de rasterlay-out voor de modules op tablets wijzigen in twee kolommen die elk 50% breed zijn.
Laten we de responsieve opties openen en het tablettabblad onder het hoofdelement selecteren en de volgende CSS plakken:
display:grid;grid-template-columns: 50% 50%;grid-auto-rows: auto;
Voor telefoonweergave willen we een lay-out met één kolom. Plak hiervoor de volgende CSS onder het tabblad Telefoon Hoofdelement:
display:grid;grid-template-columns: 100%;grid-auto-rows: auto;
Deel 3: Wijzigingen aanbrengen in de rastermodules
Een nieuwe module aan het raster toevoegen en hoe deze reageert
Nu we elke module aan het raster hebben, als we meer modules toevoegen, wordt de andere naar rechts geduwd en worden nieuwe rijen gemaakt. Aangezien we toch nog een module nodig hebben voor deze lay-out, dupliceer je de eerste tekstmodule om te zien hoe de andere modules zich aanpassen binnen het raster.
Hoe Grid reageert op modules met verschillende hoeveelheden inhoud
Ondertussen hebben alle modules dezelfde hoeveelheid inhoud, dus we kunnen niet echt zien hoe het raster modules met verschillende hoogtes zal verwerken. Om te zien hoe dit werkt, wijzigt u de hoeveelheid alineatekst binnen elke module. Merk op dat de modules dezelfde hoogte zullen behouden als de module met de meeste inhoud in dezelfde rij. Vanaf nu wordt de rijhoogte ook bepaald door de module met de meeste inhoud (of verticale hoogte).
De positie van modules op het raster wijzigen
De items van het CSS-raster kunnen worden gepositioneerd met behulp van het ingebouwde nummeringssysteem op de rastermodule. Elke lijn op het raster staat voor een nummer. Voor de kolommen beginnen de regelnummers bij 1 en lopen horizontaal door. Elk regelnummer staat aan het begin en einde van elke kolom. Dus voor onze kolomstructuur begint het regelnummer bij 1 aan de linkerkant van de eerste kolom en eindigt bij 5 aan de rechterkant van de vierde kolom. En aangezien we drie rijen hebben, beginnen de regelnummers voor rijen bij 1 bovenaan de eerste rij en tot 4 onderaan de derde rij.
Als we de positie van een module (of rasteritem) in CSS Grid willen wijzigen, kunnen we instellen waar we een bepaalde module in het raster willen plaatsen. Als u dit doet, wordt de standaardplaatsing van de module in het raster overschreven.
Voor dit voorbeeld verplaatsen we de eerste tekstmodule naar een andere positie. Daarvoor hoeven we alleen maar twee regels CSS aan de module toe te voegen.
Open de instellingen voor de eerste tekstmodule en plak de volgende aangepaste CSS in het hoofdelement:
grid-column: 2/4;grid-row: 2/3;
De eerste regel van CSS definieert de positie van de module horizontaal door de module te laten beginnen op kolomregel 2 en eindigen op kolomregel 4.
rasterkolom: 2/4
De tweede regel van CSS definieert de positie van de module (of rasteritem) verticaal door de module te laten beginnen op rijregel 2 en eindigen op rijregel 3.
rasterrij: 2/3
Voor tablet- en telefoonweergave brengen we de module terug naar de oorspronkelijke locatie. Dit is handig om uw hoofdkop bovenaan de pagina te houden.
Selecteer daarvoor het tablet-tabblad onder de responsieve optie voor het hoofdelement en plak de volgende CSS:
grid-column: auto;grid-row: auto;
Nu gaat de positie van de module terug naar de oorspronkelijke (automatische) stroom van de rasteritems.
Laten we doorgaan en nog een paar modules (of rasteritems) plaatsen met behulp van deze methode.
We plaatsen nu de derde tekstmodule (nu in de tweede kolom van de bovenste rij) op een nieuwe ingestelde locatie binnen het raster. Deze nieuwe positie begint op kolomregel 1 en eindigt op kolomregel 2 en begint ook op rijregel 2 en eindigt op rijregel 4.
Open hiervoor de instellingen voor de derde tekstmodule en plak de volgende aangepaste CSS in het hoofdelement:
grid-column: 1/2;grid-row: 2/4;
We kunnen nu de positie voor mobiel wijzigen door de volgende CSS voor tablet toe te voegen:
grid-column: auto;grid-row: auto;
Voor onze laatste wijziging plaatsen we de zevende module op een nieuwe setlocatie binnen het raster. Deze nieuwe positie begint op kolomregel 4 en eindigt op kolomregel 5 en begint ook op rijregel 2 en eindigt op rijregel 4.
Laten we daarvoor de instellingen voor de zevende tekstmodule openen en de volgende aangepaste CSS in het hoofdelement plakken:
grid-column: 4/5;grid-row: 2/4;
Plak nu de volgende CSS voor tabletweergave.
grid-column: auto;grid-row: auto;Inhoud van module (of rasteritem) uitlijnen met centreren
Je bent waarschijnlijk de instructie beu, maar als we hier stoppen, missen we een handige manier om onze module-inhoud verticaal uit te lijnen (of te centreren). Het verticaal gecentreerd hebben van module-inhoud is een leuke functie van een rasterlay-out omdat het alles symmetrischer en esthetischer maakt.
Daarom kunnen we een CSS-fragment toevoegen dat de flex CSS-eigenschap gebruikt om de inhoud uit te lijnen en te rechtvaardigen naar het midden. We moeten dit fragment aan elk van de modules toevoegen. We kunnen multi-select gebruiken om alle modules (of rasteritems) te selecteren die nog geen aangepaste CSS voor het hoofdelement hebben (omdat we die modules niet willen overschrijven met aangepaste posities). Open vervolgens de elementinstellingen door de instellingen voor een van de geselecteerde modules te openen. Plak onder het tabblad Geavanceerd de volgende CSS op het hoofdelement:
display:flex;flex-direction:column;align-items:center;justify-content:center;
We kunnen nu afzonderlijk teruggaan naar onze andere drie modules (module #1, #3 en #7) en hetzelfde CSS-fragment toevoegen naast de CSS die werd gebruikt om de module een aangepaste positie op het raster te geven. Zorg ervoor dat u het CSS-fragment toevoegt onder de bestaande CSS voor zowel desktop als tablet.
Eindresultaat
Hier is hoe wat we tot nu toe hebben gedaan eruit ziet.
Kun je zien hoe de modules (of rasteritems) zich soepel aanpassen aan verschillende browserbreedtes voor een mooi responsief ontwerp.
Echt voorbeeld met verschillende modules en ontwerpen
Als u een echt voorbeeld wilt zien van dit rastersysteem, dan kunt u verschillende modules gebruiken. Hier is wat u kunt maken met behulp van die techniek. Dit is beschikbaar in het Fitness Gym Layout Pack.
Nu helemaal van jou
In deze zelfstudie hebben we gewerkt aan het maken van een CSS-rasterlay-out voor Divi-modules. Hoewel het proces afhankelijk is van wat aangepaste CSS, is het verrassend genoeg niet zo veel, gezien de krachtige resultaten die we ermee kunnen behalen. Het is fijn om de lay-out van al je modules op kolomniveau te kunnen regelen wanneer dat nodig is voor meer unieke Divi-lay-outs. Als je een CSS-verslaafde bent en verder wilt duiken, bekijk dan deze complete gids om meer mogelijkheden te bekijken.
We zullen blij zijn om te zien hoe succesvol je bent in het opmerkingengedeelte.
