Verticaal en horizontaal uitlijnen van secties, rijen, kolommen en modules in DIVI Builder

Wanneer u een site bouwt met Divi, kan de optie om 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 wordt uitgelijnd. Het voegt een mooi vleugje symmetrische spatiëring toe aan uw inhoud, wat erg handig is bij het gebruik van meerdere kolomlay-outs. Bovendien blijft verticaal gecentreerde inhoud gecentreerd over de breedte van de browser, waardoor er geen aangepaste opvulling of marges nodig zijn om vergelijkbare responsiviteit te bereiken.

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

• Het verschil tussen Flex en Divi . begrijpen
• 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 uitlijning van inhoud voor de kolommen van uw rij
• Methode 2: Inhoud verticaal uitlijnen met behulp van Column Flex Direction
• Hoe zit het met lay-outs met slechts één kolom?
• Laatste gedachten over de verticale en horizontale uitlijning van DIVI

Het verschil tussen Flex en Divi . begrijpen

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

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

Als u toe te voegen “margin: auto” op een kolom in een rij, voor ex amp le, de inhoud van die kolom (of het nu van een of meerdere modules) wordt verticaal gecentreerd.

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

Natuurlijk heeft de flex-eigenschap veel meer toepassingen in webdesign en meer geavanceerde CSS die u in uw thema kunt gebruiken. Ik wilde het echter eenvoudig houden voor deze tutorial.

Is dit vereist?

In technische zin, nee. U kunt aangepaste spatiëring gebruiken om uw inhoud/modules verticaal binnen een kolom te plaatsen (opvulling en marge). Voor ex amp le, dan kunt u Divi's afstand mogelijkheden om centreren van de module (s) verticaal in de wachtrij om een kolom gelijk boven- en onderkant padding geven. U kunt de inhoud ook onderaan uitgelijnd maken door boven opvulling toe te voegen aan een kolom. Wanneer u meer inhoud aan uw pagina toevoegt, moet u mogelijk de tussenruimte aanpassen. Bovendien kan het moeilijk zijn om deze afstemming 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 specifieke spatiëring, denk ik dat u dit nuttig zult vinden.

Laat dit feest 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 je pagina daarna 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 Layout Pack Interior Design Company in het venster Load From Library. Kies ten slotte bij het selecteren van lay-outs de pagina Portfolio en klik op 'Deze lay-out gebruiken'.

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 Maatvoering in de ontwerpopties in en merk op dat "Kolomhoogten gelijkmaken" al actief is; Dit betekent dat de eigenschap flex (“display: flex;”) aan de rij is toegevoegd.

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

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

De inhoud onderaan uitlijnen

U kunt de margewaarde als volgt wijzigen om uw inhoud onderaan uitgelijnd te maken, zodat alle modules onder aan uw kolom worden gestapeld:

Verticale uitlijning van inhoud 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" toe te voegen aan elke kolom afzonderlijk.

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

Onthoud dat u Divi's functie Stijlen uitbreiden 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 gebalanceerd.

Het is u echter misschien opgevallen dat de achtergrondkleur van de witte kolom niet langer de hele rij dekt vanwege de toevoeging van 'marge: auto' in de kolom. U kunt dit verhelpen door de achtergrondkleur van de rij te wijzigen in wit en de rijopvulling te verwijderen. In plaats daarvan leer ik u hoe u de inhoud van uw kolom kunt centreren zonder de marge te hoeven wijzigen.

Methode 2: Inhoud verticaal uitlijnen met behulp van Column Flex Direction

We hebben de eigenschap flex gebruikt die eerst aan de rij is 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 egaliseren" op te offeren, waardoor onze kolommen (en kolomachtergronden) dezelfde grootte behouden. Om dit te bereiken, voegen we een paar regels CSS toe aan onze wachtrij, waardoor alle modules erin 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 in de rij-instellingen verwijderen.

Pas vervolgens in Kolom 2 Hoofdelement de volgende CSS toe:

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

Ik hou van deze configuratie, want als ik mijn inhoud verticaal plaats en de rij over de volledige breedte maak, blijft de inhoud gecentreerd.

Verticaal uitgelijnde vervagingen maken met verschillende hoeveelheden tekst

De inhoud van uw kolommen verticaal gecentreerd maken, kan ook helpen met blurbs. Zoals u wellicht weet, heeft niet elke blurb dezelfde hoeveelheid tekst om een ​​functie of service te beschrijven. Door deze blurbs verticaal gecentreerd te maken, kan uw lay-out er mooi uitzien.

Voor de digitale Betalingen Thuis Pagina-indeling, zal ik verticaal uitlijnen de blurbs voor deze ex amp le.

Om een ​​realistischer beeld te krijgen van het uiterlijk van een site, zal ik eerst verschillende hoeveelheden bodycontent aan de blurbs toevoegen.

Nu moet ik "Kolomhoogten gelijkmaken" 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 het gedeelte Hoofdelement van het tabblad Geavanceerd van onze rij-instellingen:

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

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

 Kolom 1 Hoofdelement CSS:

 Kolom 3 Hoofdelement CSS:

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 te centreren. Het enige wat u hoeft te doen is ervoor te zorgen dat uw tekst gelijke afstanden boven en onder (of modules) 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 fragmenten van aangepaste CSS, denk ik dat het nuttig kan zijn voor mensen die op zoek zijn naar een snelle oplossing voor een tijdrovende procedure. Aarzel niet om uw mening te delen over deze aanpak, evenals ex amp les van hoe het u tijd en moeite heeft gered in het verleden.