Divi-rijen en rij-opties

Rijen zijn de verschillende kolomlay-outs 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 tutorial zullen we slechts enkele van de functies bespreken en hoe ze kunnen worden gebruikt om een ​​aantal zeer unieke lay-outs te maken. Met name instellingen voor rijen kunnen worden gebruikt om de verscheidenheid aan lay-outs die met de Divi Builder zijn gebouwd aanzienlijk te vergroten, omdat deze de structuur creëren waarin uw modules zijn ondergebracht.

De inhoudsinstellingen

Achtergrond kleur

Achtergrondafbeeldingen kunnen op een hele rij worden toegepast. Standaard hebben rijen een transparante achtergrondkleur.

Achtergrond afbeelding

Achtergrondafbeeldingen kunnen op de hele rij worden toegepast.

Achtergrondvideo MP4

Achtergrondvideo’s kunnen op rijen worden toegepast. Als u een achtergrondvideo wilt toepassen, moet u zowel een MP4- als WEBM-video uploaden en de video’s hier invoeren.

Achtergrondvideo Webm

Achtergrondvideo’s kunnen op rijen worden toegepast. Als u een achtergrondvideo wilt toepassen, moet u zowel een MP4- als WEBM-video uploaden 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 achtergrondpositie onjuist.

Hoogte 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.

Video onderbreken

Schakel deze optie in als u wilt dat video’s worden onderbroken wanneer erop wordt geklikt.

Kolom achtergrondkleur

Voor elke kolom in een rij kunt u een unieke achtergrondkleur toewijzen.

Kolom achtergrondafbeelding

Voor elke kolom in een rij kunt u een unieke achtergrondafbeelding toewijzen.

Beheerderslabel

Dit zal het label van de module in de bouwer veranderen voor gemakkelijke identificatie. Wanneer u de WireFrame-weergave in Visual Builder gebruikt, verschijnen deze labels in het moduleblok in de Divi Builder-interface.

De ontwerpinstellingen

Gebruik Parallax-effect

Als u een parallax-effect voor uw rij-achtergrondafbeelding wilt gebruiken, kunt u hier inschakelen en vervolgens de gewenste parallax-methode kiezen.

Kolom Parallax-effect

Hier kunt u kiezen of u het parallax-effect wilt gebruiken voor de achtergrondafbeelding van een specifieke kolom in uw rij.

Maak deze rij over de volledige breedte

Als deze optie is ingeschakeld, wordt de volledige breedte van het browservenster verlengd (vergelijkbaar met een sectie met volledige breedte). Dit is een geweldige manier om coole kolomlay-outs met volledige breedte te maken.

Gebruik aangepaste breedte

U kunt ook een aangepaste breedte aan een rij toewijzen. Als u bijvoorbeeld wat variatie aan de stroom van de pagina wilt toevoegen en een bepaalde rij groter wilt maken dan de rest, kunt u hier een aangepaste breedtewaarde invoeren

Gebruik aangepaste gootbreedte

Gootbreedte past de afstand tussen kolommen aan. Er zijn 4 gootbreedtes, variërend van geen tot groot. Als de gootbreedte op 1 wordt ingesteld, is er geen ruimte tussen de kolommen. In combinatie met de optie Fullwidth Row kan dit effecten creëren die vergelijkbaar zijn met de FullWidth Portfolio-module.

Kolomhoogten gelijk maken

Dit is een geweldige optie, vooral handig wanneer u achtergrondkleuren op afzonderlijke kolommen hebt toegepast. Als u deze optie inschakelt, moeten alle kolommen in de rij dezelfde hoogtewaarde hebben.

Aangepaste opvulling

Als u de opvulling van de rij wilt aanpassen, kunt u dit hier doen.

Aangepaste marge

Als u de marge van de rij wilt aanpassen, kunt u dit hier doen.

Aangepaste opvulling van kolommen

Als u de opvulling van een specifieke kolom in uw rij wilt aanpassen, kunt u dit hier doen.

Kolom Aangepaste marge

Als u de marge van een specifieke kolom in uw rij wilt aanpassen, kunt u dit hier doen.

De geavanceerde instellingen

CSS ID

U kunt een CSS-ID aan de rij toewijzen als u deze in uw stylesheet of met ankerlinks wilt targeten.

CSS KLASSE

U kunt een CSS-klasse aan de rij toewijzen als u deze in uw stylesheet wilt targeten.

Kolom CSS ID

U kunt een CSS-ID toewijzen aan een specifieke kolom in uw rij als u deze wilt targeten in uw stylesheet of met ankerlinks.

Kolom CSS KLASSE

U kunt een CSS-klasse toewijzen aan een specifieke kolom in uw rij als u deze in uw stylesheet wilt targeten.

Voordat

Voer hier CSS in om toe te passen: vóór de hoofdrij div.

Hoofdelement

Voer hier CSS in om toe te passen op de hoofdrij div.

Na

Voer hier CSS in om toe te passen: na de hoofdrij div.

Kolom eerder

Voer hier CSS in om toe te passen: vóór de opgegeven kolom div.

Hoofdelement kolom

Voer hier CSS in om toe te passen op de opgegeven kolomdiv.

Kolom na

Voer hier CSS in om toe te passen: na de opgegeven kolom div.

Zichtbaarheid

Met deze optie kunt u bepalen op welke apparaten uw rijmodule wordt weergegeven. U kunt ervoor kiezen om uw module afzonderlijk uit te schakelen op tablets, smartphones of desktopcomputers. 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.

Laten we enkele instellingen een proefrit geven

Nu we alle instellingen hebben doorlopen, laten we er een paar in combinatie testen om u te laten zien wat mogelijk is wanneer elke instelling creatief wordt gebruikt. In dit voorbeeld zal ik de instelling Fullwidth Row aanraken als een inleiding. De optie om een ​​rij ‘Fullwidth’ te maken, is een van de meest veelzijdige opties in de set. Hiermee wordt de breedte van de rij uitgebreid tot de rand van de browser, vergelijkbaar met een sectie met volledige breedte. In tegenstelling tot een Fullwidth-sectie kunnen FullWidth-rijen echter kolomstructuren hebben en kunnen ze elke module huisvesten! In het onderstaande voorbeeld heb ik een rij met 4 kolommen gemaakt en een vierkante afbeelding aan elke kolom toegevoegd. Vervolgens heb ik de “Make Row Fullwidth” ingeschakeld om de rij uit te breiden tot de randen van het browservenster.

docs afbeelding

Vervolgens verkleinde ik de “Gootbreedte” tot “1” om de afstand tussen de kolommen in de rij te verwijderen.

docs afbeelding

Uiteindelijk heb ik de opvulling boven en onder de rij verwijderd door de waarden voor “Aangepaste opvulling” bovenaan en onderaan te wijzigen in “0.”
docs afbeelding

Het resultaat is een volledige transformatie van de rij, waardoor onze normale rij met 4 kolommen met afbeeldingen verandert in een volledige en volledige afbeeldingsgalerij die er prachtig uitziet tegen het groene gedeelte eronder. Ditzelfde effect kan ook worden gemaakt met behulp van aangepaste kolomachtergrondkleuren en tekstgebaseerde modules. De mogelijkheden zijn eindeloos!