De mogelijkheid om verticaal uit te lijnen inhoud bij het maken van een site met Divi kan een handige aanvulling zijn op uw ontwerptool. Soms vereist een bepaalde bepaling dat de inhoud is op verschillende manieren verticaal uitgelijnd (gecentreerd, onder, boven). De meest voorkomende behoefte is om je te centreren inhoud verticaal.
Het biedt een heerlijk vleugje symmetrische tussenruimte die handig is bij het gebruik van meerdere kolomlay-outs voor uw inhoud. Bovendien blijft verticaal gecentreerde inhoud gecentreerd op verschillende browserbreedten, waardoor het gedoe met het toepassen van aangepaste opvulling of marges om een vergelijkbare responsiviteit te bereiken, wordt geëlimineerd.
In deze zelfstudie laat ik u zien hoe u een paar kleine CSS-fragmenten aan een kolom toevoegt om de inhoud verticaal uit te lijnen. Ik ga een aantal van de vooraf gemaakte lay-outs gebruiken van Divi voor voorbeelden hoe u dit kunt doen. Als u niet veel weet over CSS, hoeft u zich geen zorgen te maken. Het is vrij eenvoudig om binnen enkele seconden op uw eigen lay-outs toe te passen.
Inzicht in Flex en Divi
De eigenschap css Flex (of Flexbox) is gewoon een manier om items in horizontale en / of verticale stapels te plaatsen (net als een tafel). Behalve, in tegenstelling tot traditionele tabellen, kunt u met de eigenschap flex kaders maken die zich aanpassen aan de grootte van de inhoud die erin staat.
Divi gebruikt de eigenschap flex wanneer u 'Kolomhoogten gelijk maken' als rijparameter selecteert. Dit zorgt er eenvoudigweg voor dat de grootte van uw kolommen zich aanpast aan de grootte van de kolom met de meeste inhoud. En aangezien “Equalize Column Heights” flexibiliteit voor de rijcontainer mogelijk maakt, kunt u hier eenvoudig van profiteren door CSS aan uw kolommen toe te voegen om de inhoud van elke kolom (of gebied) aan te passen.
Als u bijvoorbeeld "margin: auto" toevoegt aan een kolom in een rij, wordt de inhoud van die kolom (of het nu een of meer modules zijn) verticaal gecentreerd.
Als u bovendien "align-items: center" toevoegt aan uw regel, worden al uw kolommen (en hun inhoud) verticaal gecentreerd.
Natuurlijk zijn er veel andere toepassingen voor de Flex-eigenschap in webdesign, evenals meer geavanceerde CSS die u op uw thema kunt toepassen. Maar voor deze tutorial wilde ik het simpel houden.
Is het echt nodig?
Technisch gezien niet. U kunt uw inhoud / modules verticaal uitlijnen in een kolom met behulp van aangepaste afstanden (opvulling en marge). U kunt bijvoorbeeld de afstandsopties van Divi gebruiken om een kolom te geven die gelijk is aan de opvulling aan de boven- en onderkant om de module (s) verticaal in de kolom te centreren. U kunt ook alleen opvulling aan de bovenkant aan een kolom toevoegen om de inhoud aan de onderkant uit te lijnen. Het is echter mogelijk dat u de afstand moet aanpassen wanneer u uw pagina bijwerkt met meer inhoud. Bovendien kan het moeilijk zijn om deze uitlijning over verschillende browserbreedten te behouden.
Dus als u op zoek bent naar een oplossing om inhoud verticaal uit te lijnen zonder na te denken over aangepaste spatiëring, denk ik dat u dit nuttig zult vinden.
Laten we beginnen!
Laad de vooraf gedefinieerde lay-out op uw pagina
Om te beginnen gebruik ik de lay-out uit het portfolio van Interior Design Company Portfolio. Om deze lay-out op uw pagina te krijgen, maakt u een nieuwe pagina. Geef je pagina dan een titel. Klik op "Gebruik Divi Builder" en vervolgens op "Gebruik Visual Builder". Selecteer vervolgens de optie "Kies een basislay-out". Selecteer vervolgens de layoutkit Interior Design Company in het pop-upvenster Laden uit bibliotheek. Selecteer ten slotte de Portfolio-pagina uit de lijst met lay-outs en klik op "Gebruik deze lay-out".
Zodra de lay-out op uw pagina is geladen, bent u klaar om te gaan.
Methode 1: inhoud verticaal uitlijnen met behulp van flexibele en automatische marge
Open de regelinstellingen voor de tweede regel van de pagina (die direct onder de regel met de paginatitel). Open onder Ontwerpinstellingen de formaatoptiegroep en merk op dat "Kolomhoogten egaliseren" al actief is. Dit betekent dat de regel nu de eigenschap flex (“display: flex;”) heeft toegevoegd.
Ga nu naar de instellingen van het tabblad Geavanceerd voor dezelfde rij en voeg het volgende css-fragment toe onder het invoervak van het hoofdelement van kolom 2.
margin: auto; |
Nu is de inhoud van de tweede kolom verplaatst om verticaal gecentreerd te worden.
Maak lagere inhoud uitgelijnd
Als u uw inhoud onderaan wilt uitlijnen zodat alle modules onderaan uw kolom worden gestapeld, kunt u de margewaarde als volgt aanpassen:
margin: auto 0; |
Verticale uitlijning van inhoud voor alle kolommen in uw rij
In plaats van "margin: auto" aan elke kolom afzonderlijk toe te voegen, kunt u de inhoud van alle kolommen in uw rij ook verticaal centreren door het volgende fragment toe te voegen aan het hoofdelement van uw rijinstellingen.
align-items: center; |
Of als u wilt dat alle inhoud van uw kolommen onderaan wordt uitgelijnd, kunt u dit fragment toevoegen:
align-items: flex-end; |
En vergeet niet dat u kunt profiteren van Divi's Extend Styles-functie door met de rechtermuisknop op het hoofdelement te klikken met uw CSS-fragment en te klikken op "Hoofdelement uitbreiden".
Breid dit hoofd-css-element vervolgens uit naar alle lijnen van de pagina (of sectie) om alle inhoud van elke kolom van de pagina verticaal te centreren.
Nu is alles verticaal gecentreerd.
Maar het is je misschien opgevallen dat de achtergrondkleur van de witte kolom niet langer de volledige hoogte van de rij beslaat. Dit komt doordat we "margin: auto" aan de kolom hebben toegevoegd. Om dit probleem op te lossen, kunt u de achtergrondkleur van de lijn in wit veranderen en de vulling van de lijn verwijderen. Maar in plaats daarvan laat ik u een manier zien om uw kolominhoud te centreren zonder de marge te wijzigen.
Methode 2: Lijn de inhoud verticaal uit met de buigrichting van de kolom
Bij de eerste methode hebben we gebruik gemaakt van de flex-eigenschap die aan de rij is toegevoegd. Dit maakte van elk van onze kolommen een "flexibele doos" die verticaal kon worden uitgelijnd door simpelweg de marge aan te passen.
Maar er is ook een flexibele manier om onze kolominhoud uit te lijnen zonder het effect "Kolomhoogte gelijk maken" te verliezen, waardoor onze kolommen (en kolomachtergronden) dezelfde grootte blijven. Om dit te doen, voegen we een paar regels CSS toe aan onze kolom, zodat alle modules in de kolom verticaal worden gestapeld en vervolgens gecentreerd.
Laten we teruggaan naar onze regel in het vorige voorbeeld. Open rij-instellingen en verwijder alle aangepaste css die je daar hebt door met de rechtermuisknop op aangepaste CSS te klikken en te klikken op "Aangepaste CSS-stijlen opnieuw instellen".
Voeg vervolgens de volgende CSS toe onder de 2-kolom, hoofdelement:
weergave: flex; flex-richting: kolom; justify-content: center;
Of, als ik de inhoud onderaan wil uitlijnen, vervang dan gewoon "Justify the content: center" door "justify the content: flex-end".
Het mooie van deze opstelling is dat als mijn inhoud verticaal is gecentreerd en de rijbreedte is bereikt, de inhoud gecentreerd blijft.
Maak blurbs (Samenvatting) met verschillende hoeveelheden verticaal uitgelijnde tekst
Het verticaal gecentreerd maken van uw kolominhoud kan ook handig zijn voor blurbs. Zoals u weet, zullen niet alle blurbs de exacte hoeveelheid tekst bevatten die wordt gebruikt omschrijven functie of dienst. Door deze blurbs verticaal te centreren, kunt u een prachtig ontwerp voor uw lay-out creëren.
Voor dit voorbeeld ga ik de blurbs verticaal uitlijnen met de lay-out van de startpagina van Digital Payments.
Ik zal eerst verschillende hoeveelheden hoofdtekst aan de blurbs toevoegen om een meer realistische weergave te geven van hoe een site eruit zou kunnen zien.
Nu moet ik naar de regelinstellingen gaan en "Kolomhoogtes harmoniseren".
Nu kan ik mijn CSS-fragmenten toevoegen om mijn inhoud uit te lijnen en het ontwerp aan te passen.
Op het tabblad Geavanceerd van uw rij-instellingen kunnen we de inhoud van onze kolommen verticaal centreren door het volgende toe te voegen onder Hoofdelement:
align-items: center; |
Of verander het door het te volgen om ze uit te lijnen.
align-items: flex-end; |
U kunt ook uw aangepaste CSS-stijlen opnieuw instellen en de volgende aangepaste marges toevoegen om de eerste kolom onderaan en de derde uitgelijnde kolom bovenaan uit te lijnen.
1 kolom CSS hoofdelement:
margin: auto auto 0; |
3 kolom CSS hoofdelement:
margin: 0 auto auto; |
Hoe zit het met lay-outs met één kolom?
Technisch gezien heb je geen CSS-fragment of flex nodig om je kolominhoud verticaal te centreren. Het enige dat u hoeft te doen, is ervoor zorgen dat u een gelijke afstand boven en onder uw inhoud (of modules) heeft. Meestal hebben gebruikers verticale inhoud nodig die is gecentreerd op lay-outs met meerdere kolommen, omdat ze willen dat aangrenzende inhoud perfect uitgelijnd is.
Dat is alles voor deze zelfstudie die u laat zien hoe u elementen op dezelfde regel op Divi kunt uitlijnen.
