Hoe u secties, rijen, kolommen en modules verticaal en horizontaal uitlijnt in DIVI Builder

Wanneer u een site bouwt met Divi, kan de optie om de inhoud verticaal uit te lijnen een waardevolle aanvulling zijn op uw ontwerptoolkit. Afhankelijk van de lay-out moet de inhoud mogelijk op verschillende manieren verticaal worden uitgelijnd (gecentreerd, onder, boven). De meest voorkomende behoefte is dat uw materiaal verticaal uitgelijnd is. Het voegt een mooi vleugje symmetrische spatiëring toe aan uw inhoud, wat erg handig is bij het gebruik van meerdere kolomindelingen. Bovendien blijft verticaal gecentreerde inhoud gecentreerd over de breedte van de browser, waardoor er geen aangepaste opvulling of marges nodig zijn om een ​​vergelijkbare responsiviteit te bereiken.

In deze les leer ik je hoe je de inhoud in elke kolom verticaal uitlijnt met behulp van een paar eenvoudige regels CSS. Voor demonstratiedoeleinden zal ik verschillende geprefabriceerde lay-outs van Divi gebruiken. U hoeft zich geen zorgen te maken als u niet bekend bent met CSS. Binnen enkele seconden kunt u dit op uw ontwerp toepassen.

• Het verschil begrijpen tussen Flex en Divi
• Is dit vereist?
• Voeg de vooraf geconfigureerde lay-out toe aan uw pagina.
• Methode 1: Inhoud verticaal uitlijnen met Flex en Auto Margin
• De inhoud onderaan uitlijnen
• Verticale inhoudsuitlijning voor de kolommen van uw rij
• Methode 2: Inhoud verticaal uitlijnen met behulp van de kolomflexrichting
• Hoe zit het met lay-outs met slechts één kolom?
• Laatste gedachten over de verticale en horizontale uitlijning van DIVI

Het verschil begrijpen tussen Flex en Divi

Het Flex (of Flexbox) CSS-attribuut is slechts een middel om items in horizontale en verticale stapels te rangschikken (een beetje zoals een tabel). In tegenstelling tot typische tabellen kunt u met de flexfunctie echter vakken bouwen die “flexibel” zijn naar de grootte van de inhoud die ze bevatten.

Divi gebruikt het flex-attribuut wanneer u “Kolomhoogten gelijk maken” als rij-instelling kiest. Simpel gezegd zorgt dit ervoor dat de grootte van al uw kolommen zich aanpast aan de grootte van de kolom met de meeste informatie. Omdat “Kolomhoogten gelijk maken” de flex voor de rijcontainer activeert, kunt u hiervan gebruik maken door CSS aan uw kolommen toe te voegen om de inhoud van elke kolom (of vak) te wijzigen.

Als u amp “margin: auto” aan een willekeurige kolom in een rij toevoegt, wordt de inhoud van die kolom (of het nu om één of meerdere modules gaat) verticaal gecentreerd.

Al uw kolommen (en hun inhoud) worden verticaal gecentreerd als u “align-items: center;” toevoegt. naar jouw rij.

Natuurlijk heeft de flex-eigenschap nog veel meer toepassingen in webontwerp en meer geavanceerde CSS die u in uw thema kunt gebruiken. Voor deze tutorial wilde ik het echter simpel houden.

Is dit vereist?

In technische zin niet. U kunt aangepaste spatiëring gebruiken om uw inhoud/modules verticaal binnen een kolom te positioneren (opvulling en marge). U kunt amp de spatiëringsopties van Divi gebruiken om de module(s) verticaal binnen de wachtrij te centreren, zodat een kolom een ​​gelijke opvulling aan de boven- en onderkant krijgt. U kunt de inhoud ook onderaan uitlijnen door opvulling aan de bovenkant van een kolom toe te voegen. Wanneer u meer inhoud aan uw pagina toevoegt, moet u mogelijk de spatiëring aanpassen. Bovendien kan het problematisch zijn om deze uitlijning over meerdere browserformaten te handhaven.

Dus als u op zoek bent naar een manier om informatie verticaal uit te lijnen zonder dat u zich zorgen hoeft te maken over de specifieke spatiëring, dan denk ik dat u dit nuttig zult vinden.

Laten we dit feest maar beginnen!

Voeg de vooraf geconfigureerde lay-out toe aan uw pagina.

Ik ga beginnen met de pagina-indeling van de portfolio van het interieurontwerpbedrijf. Maak een nieuwe pagina om deze lay-out op uw pagina te hebben. Geef daarna uw pagina een naam. Selecteer “Gebruik Divi Builder” en vervolgens “Gebruik Visual Builder” in het vervolgkeuzemenu. Kies vervolgens 'Kies een vooraf gemaakte lay-out' in het vervolgkeuzemenu. Selecteer vervolgens het Interior Design Company Layout Pack in het venster Laden uit bibliotheek. Kies ten slotte bij het selecteren van lay-outs de Portfolio-pagina en klik op 'Gebruik deze lay-out'.

U bent klaar om te beginnen nadat de lay-out op uw pagina is geladen.

Methode 1: Inhoud verticaal uitlijnen met Flex en Auto Margin

Open de rij-instellingen voor de tweede rij (die direct onder de rij met de paginatitel). Schakel de optiegroep Grootte instellen in de ontwerpopties open en merk op dat "Kolomhoogten gelijk maken" al actief is; Dit betekent dat de eigenschap flex (“display: flex;”) aan de rij is toegevoegd.

Ga onder het invoervak ​​Hoofdelement van Kolom 2 naar de tabbladinstellingen Geavanceerd voor dezelfde rij en voeg het volgende CSS-fragment toe.

De inhoud van de tweede kolom is nu verplaatst naar verticaal gecentreerd.

01	marge: automatisch;

De inhoud onderaan uitlijnen

U kunt de margewaarde als volgt wijzigen om uw inhoud onderaan uit te lijnen, zodat alle modules onderaan uw kolom worden gestapeld:

01	marge: automatisch 0;

Verticale inhoudsuitlijning voor de kolommen van uw rij

U kunt de inhoud van alle kolommen in uw rij verticaal centreren door het volgende fragment toe te voegen aan het hoofdelement van uw rij-instellingen, in plaats van 'marge: auto' aan elke kolom afzonderlijk toe te voegen.

01	items uitlijnen: centreren;

U kunt dit fragment ook gebruiken als u wilt dat alle informatie in uw kolommen onderaan wordt uitgelijnd:

01	uitlijnitems: flex-end;

Houd er rekening mee dat u de functie Extend Styles van Divi kunt gebruiken door met de rechtermuisknop op het hoofdelement met uw CSS-fragment te klikken en 'Hoofdelement uitbreiden' te selecteren.

Om vervolgens alle inhoud van elke kolom op de pagina verticaal te centreren, past u het hoofdelement CSS toe op alle rijen op de pagina (of sectie).

Alles is nu verticaal in balans.

Het is u echter wellicht opgevallen dat de witte achtergrondkleur van de kolom niet langer de hele rij bedekt, omdat aan de kolom 'marge: auto' is toegevoegd. U kunt dit verhelpen door de rijachtergrondkleur in wit te veranderen en de rijopvulling te verwijderen. In plaats daarvan leer ik u hoe u de inhoud van uw kolom kunt centreren zonder dat u de marge hoeft te wijzigen.

Methode 2: Inhoud verticaal uitlijnen met behulp van de kolomflexrichting

We gebruikten de flex-eigenschap die eerst aan de rij was toegevoegd. Als gevolg hiervan werd elk van onze kolommen een ‘flexbox’ die verticaal kon worden uitgelijnd door de marge te wijzigen.

We kunnen echter flex-richting gebruiken om de tekst van onze kolom uit te lijnen zonder het effect 'Kolomhoogte gelijk maken' op te offeren, waardoor onze kolommen (en kolomachtergronden) dezelfde grootte behouden. Om dit te bereiken, voegen we een paar regels CSS aan onze wachtrij toe, waardoor alle modules daarin verticaal worden gestapeld en vervolgens worden gecentreerd.

Laten we terugkeren naar de rij van het vorige amp . Door met de rechtermuisknop op Aangepaste CSS te klikken en 'Aangepaste CSS-stijlen opnieuw instellen' te selecteren, kunt u eventuele aangepaste CSS verwijderen in de Rij-instellingen.

Pas vervolgens in het hoofdelement van kolom 2 de volgende CSS toe:

010203

weergave: flex;flex-richting: kolom;justify-inhoud: midden;

Wijzig “justify-content: center” in “justify-content: flex-end” om de inhoud onderaan uit te lijnen.

Ik vind deze configuratie leuk, want als ik mijn inhoud verticaal positioneer en de rij over de volledige breedte maak, blijft de inhoud gecentreerd.

Verticaal uitgelijnde schetsen maken met verschillende hoeveelheden tekst

Het verticaal gecentreerd maken van de inhoud van uw kolommen kan ook helpen bij het maken van korte teksten. Zoals u wellicht weet, zal niet elke tekst evenveel tekst bevatten om een ​​functie of dienst te beschrijven. Door deze samenvattingen verticaal gecentreerd te maken, kan uw lay-out er prachtig uitzien.

Voor de lay-out van de startpagina voor digitale betalingen zal ik de tekstteksten voor dit amp verticaal uitlijnen.

Om een ​​realistischer beeld te krijgen van het uiterlijk van een site, voeg ik eerst verschillende hoeveelheden hoofdinhoud toe aan de korte teksten.

Nu moet ik "Kolomhoogten gelijk maken" in de rij-instellingen.

Nu kan ik mijn tekst uitlijnen en het ontwerp aanpassen met behulp van CSS-fragmenten.

We kunnen de inhoud van onze kolommen verticaal centreren door het volgende toe te voegen aan de sectie Hoofdelement van het tabblad Geavanceerd van onze Rij-instellingen:

01	items uitlijnen: centreren;

Wijzig dit in het volgende om ze onderaan uit te lijnen.

01	uitlijnitems: flex-end;

U kunt de eerste kolom ook onderaan uitlijnen en de derde kolom bovenaan uitlijnen door uw aangepaste CSS-stijlen opnieuw in te stellen en de volgende aangepaste marges toe te voegen.

 Kolom 1 Hoofdelement CSS:

01	marge: auto auto 0;

 Kolom 3 Hoofdelement CSS:

01	marge: 0 auto auto;

Hoe zit het met lay-outs met slechts één kolom?

U hebt geen CSS-fragment of flex nodig om uw inhoud met één kolom verticaal gecentreerd te krijgen. Het enige wat u hoeft te doen is ervoor te zorgen dat uw tekst boven en onder (of modules) gelijke afstanden heeft. De meeste consumenten hebben verticaal gecentreerde inhoud nodig op lay-outs met veel kolommen, omdat ze willen dat het aangrenzende materiaal correct wordt uitgelijnd.

Laatste gedachten over de verticale en horizontale uitlijning van DIVI

Hoewel deze oplossing afhankelijk is van een paar kleine stukjes aangepaste CSS, denk ik dat het nuttig kan zijn voor mensen die op zoek zijn naar een snelle oplossing voor een tijdrovende procedure. Deel gerust uw mening over deze aanpak, evenals amp van hoe het u in het verleden tijd en moeite heeft bespaard.