Rijen zijn de verschillende kolomopstellingen die in secties kunnen worden geplaatst. Net als modules hebben rijen verschillende instellingen die toegankelijk zijn door op het instellingenpictogram linksboven in de rij te klikken. In deze zelfstudie bespreken we enkele van de functies en hoe ze kunnen worden gebruikt om een ​​aantal zeer unieke lay-outs te maken. Met name regelinstellingen kunnen worden gebruikt om de verscheidenheid aan lay-outs die zijn gemaakt met Divi Builder, omdat ze de structuur creëren waarin uw modules worden gehost.
Inhoudsinstellingen
Achtergrondkleur
Achtergrondafbeeldingen kunnen op een hele rij worden toegepast. Standaard hebben de lijnen een transparante achtergrondkleur.
Achtergrond afbeelding
Achtergrondafbeeldingen kunnen op een hele rij worden toegepast.
MP4 achtergrondvideo
de videos achtergronden kunnen op lijnen worden toegepast. Als u achtergrondvideo wilt toepassen, moet u MP4- en WEBM-video uploaden en de videos hier.
Web achtergrondvideo
de videos achtergronden kunnen op lijnen worden toegepast. Als u achtergrondvideo wilt toepassen, moet u MP4- en WEBM-video downloaden en de video's hier invoeren.
Breedte achtergrondvideo
Nadat je video's zijn geüpload, moet je hier de breedte van je video invoeren. Het moet gelijk zijn aan de werkelijke breedte van de video, anders is de positie van de achtergrond onjuist.
Hoogte van achtergrondvideo
Nadat je video's zijn geüpload, moet je hier de hoogte van je video invoeren. Het moet gelijk zijn aan de werkelijke hoogte van de video, anders is de achtergrondpositie onjuist.
Videopauze
Schakel deze optie in als u wilt dat video's worden onderbroken wanneer erop wordt geklikt.
Kolom achtergrondkleur
Voor elke kolom op rij kunt u een unieke achtergrondkleur toewijzen.
Kolom achtergrondafbeelding
Voor elke kolom op een rij kunt u een unieke achtergrondafbeelding toewijzen.
Beheerderslabel
Hierdoor verandert het modulelabel in de generator voor gemakkelijke identificatie. Bij gebruik van de WireFrame-weergave in Visual Builder, verschijnen deze labels in het moduleblok van de interface Divi Bouwer.
Ontwerp parameters
Gebruik het parallax-effect
Als u het parallax-effect wilt gebruiken voor uw lijnachtergrondafbeelding, kunt u hier inschakelen en vervolgens de gewenste parallax-methode kiezen.
Column parallax-effect
Hier kunt u kiezen of u het parallax-effect wel of niet wilt gebruiken voor de achtergrondafbeelding van een specifieke kolom in uw rij.
Maak deze regel over de volledige breedte
Als deze optie is ingeschakeld, beslaat de lijn de volledige breedte van het browservenster (vergelijkbaar met een sectie over de volledige breedte). Dit is een geweldige manier om een ​​aantal coole kolomlay-outs over de volledige breedte te maken.
Gebruik aangepaste breedte
U kunt ook een aangepaste breedte aan een lijn toewijzen. Als u bijvoorbeeld variatie aan de paginafeed wilt toevoegen en een rij groter wilt maken dan de rest, kunt u hier een aangepaste waarde voor breedte invoeren
Gebruik de aangepaste gootbreedte
De breedte van de goot bepaalt de afstand tussen de kolommen. Er zijn 4 gootmaten, beginnend bij 0. De definitie het instellen van de gootbreedte op 1 resulteert in geen openingen tussen kolommen. In combinatie met de optie Volledige breedte kan dit effecten creëren die vergelijkbaar zijn met de module Volledig scherm Portfolio.
Kolomhoogten gelijk maken
Dit is een geweldige optie, vooral handig als u achtergrondkleuren op afzonderlijke kolommen hebt toegepast. Als u deze optie inschakelt, moeten alle kolommen in de rij dezelfde hoogte hebben.
Aangepaste opvulling
Als u de vulling van de lijn wilt aanpassen, kunt u dit hier doen.
Aangepaste marge
Als u de marge van de lijn wilt aanpassen, kunt u dit hier doen.
Aangepaste kolomopvulling
Als u de opvulling van een specifieke kolom in uw rij wilt aanpassen, kunt u dat hier doen.
Aangepaste kolommarge
Als u de marge van een specifieke kolom in uw rij wilt aanpassen, kunt u dat hier doen.
Geavanceerde instellingen
CSS ID
U kunt een CSS-ID aan de rij toewijzen als u deze in uw stylesheet of met ankerkoppelingen wilt targeten.
CSS-klasse
U kunt een CSS-klasse aan de lijn toewijzen als u deze in uw stijlblad wilt targeten.
CSS kolom ID
U kunt een CSS-ID aan een specifieke kolom in uw rij toewijzen als u deze wilt targeten in uw stylesheet of met ankerkoppelingen.
CSS-klassenkolom
U kunt een CSS-klasse aan een specifieke kolom in uw rij toewijzen als u deze in uw stijlblad wilt targeten.
Avant
CSS-invoer hier om toe te passen: vóór de hoofdlijn div.
Hoofdelement
CSS-invoer hier om toe te passen op de hoofdlijn div.
Après
CSS-invoer hier om toe te passen: na de hoofdlijn div.
Voorste kolom
Voer hier CSS in om toe te passen: vóór de opgegeven kolom div.
Hoofdkolomelement
Voer hier CSS in om toe te passen op de opgegeven div-kolom.
Kolom na
CSS-invoer hier om toe te passen: na de opgegeven div-kolom.
zichtbaarheid
Met deze optie kunt u de apparaten bedienen waarop uw lijnmodule verschijnt. U kunt ervoor kiezen om uw module afzonderlijk op tablets, smartphones of desktops te deactiveren. Dit is handig als u verschillende modules op verschillende apparaten wilt gebruiken of als u het mobiele ontwerp wilt vereenvoudigen door bepaalde elementen van de pagina te verwijderen.
De tutorial in de praktijk brengen
Nu we alle instellingen hebben doorlopen, laten we er een paar testen om u te laten zien wat er mogelijk is wanneer elke instelling creatief wordt gebruikt. In dit voorbeeld zal ik de instelling Rij op volledig scherm behandelen als inleiding. De optie om een ​​rij op volledig scherm te maken is een van de meest veelzijdige opties van de set. Hierdoor wordt de breedte van de lijn verlengd tot aan de rand van de browser, zoals een sectie Volledig scherm (of Volledige breedte). In tegenstelling tot een Fullwidth-sectie kunnen FullWidth-rijen echter kolomstructuren hebben en elke module bevatten! In het onderstaande voorbeeld heb ik een rij met 4 kolommen gemaakt en een vierkante afbeelding aan elke kolom toegevoegd. Vervolgens heb ik "Maak deze lijn volledige breedte" ingeschakeld om de lijn uit te breiden tot de randen van het browservenster.
Daarna heb ik de "Goot" -grootte verkleind tot "1" om de afstand tussen de kolommen in de rij te verwijderen.
Ten slotte heb ik de vulling boven en onder de regel verwijderd door de bovenste en onderste waarden met een "Aangepaste vulling" -optie te wijzigen in "0".
Het resultaat is een complete rijtransformatie, waarbij onze normale rij van 4 kolommen met afbeeldingen wordt getransformeerd in een beeldgalerij over de volledige breedte die er verbluffend uitziet in vergelijking met het groene gedeelte hieronder. Ditzelfde effect kan ook worden gecreëerd met behulp van aangepaste kolomachtergrondkleuren en op tekst gebaseerde mods. De mogelijkheden zijn eindeloos!
