Rij lay-out opties zijn beschikbaar op elke pagina die u maakt met Beaver Builder. Voor elementor geldt hetzelfde.

Handleiding rij aanmaken in WordPress met beaver builder

Klik in de rechterbovenhoek op + (plus teken) om het inhoudsvenster bloot te leggen en klik vervolgens op de tab Rows.

Om te beginnen met het werken aan een nieuwe lay-out, sleep een rijlay-out naar keuze naar de pagina.

Klik om te vergroten

---

Beweeg de muis over de rij die u net op de pagina hebt gesleept om een set van pictogrammen te zien die de beschikbare acties voor die rij weergeven, zoals weergegeven in de volgende schermafbeelding.

• Verplaats de rij door op het pictogram Move te klikken en het te slepen.
• Bewerk de instellingen door te klikken op het pictogram Row-instellingen.
• Dupliceer de rij.
• Kolombreedtes opnieuw instellen voor de hele rij of Rijbreedte opnieuw instellen , waardoor de rij wordt aangepast aan de globale instelling.
  Zie dit artikel over hoe u een aangepaste globale standaard rijbreedte kunt instellen.
• Verwijder de rij.

---

Let op verschil instellingen rij en module in Beaver Builder

Een veel gemaakte, maar begrijpelijke fout is het verwisselen van de rij-instellingen en module-instellingen. Deze lijken namelijk erg op elkaar.
Voor het aanpassen van de rij-instellingen moet je het bovenste sleuteltje gebruiken. Voor het aanpassen van de module-instellingen moet je het onderste sleuteltje gebruiken. Zie de voorbeelden hieronder:

---

Rij-instellingen

Styletab

Klik op het pictogram Row-instellingen voor een rij om het tabblad Style weer te geven. U kunt de volgende wijzigingen aanbrengen op het tabblad Style.

Row en content breedte en max breedte velden

Wanneer u een rij aan uw lay-out toevoegt, zijn de initiële breedte-instellingen de standaardinstellingen in Tools > Global settings. Als u verschillende standaardinstellingen wilt, stel uw eigen globale standaard rijbreedtes in.

In het veld Width stel je de rijbreedte in op Full width of Fixed.

Voor rijen met een vaste breedte kiest u een maximale rijbreedte in het veld Fixed width. Maximale breedte betekent dat de rij minder breed kan worden als het scherm kleiner wordt dan de maximale breedte, maar niet breder kan worden als het scherm groter wordt.

Kies voor rijen met een volledige breedte of de Content breedte Full width of Fixed. Als de inhoudsbreedte Vast is, kies dan een maximale breedte voor de inhoud. Voor meer informatie over de volledige breedte, de vaste breedte en de maximale breedte, zie dit artikel over de lay-outs voor de volledige breedte en de vaste breedte van de rij.

Row height

Stel de rijhoogte in op een van de volgende waarden:

• Default (standaard)
  De rijhoogte wordt automatisch aangepast aan de inhoud van de rij.
• Volledige hoogte
  De rij past in het browservenster. Je kunt de inhoud uitlijnen naar Top, Center, of Bottom.
• Minimale rijhoogte
  Stel de gewenste waarde in voor de minimale hoogte. Gebruik dit in gevallen waarin u wilt dat de rijhoogte groter is dan de standaard hoogte, maar minder dan de volledige hoogte van het browservenster. U kunt ook de verticale uitlijning van de inhoud in de rij kiezen: Top, Center, of Bottom.

Kleurensectie

Overschrijf de standaard kleurinstellingen voor tekst, link en koptekstkleuren.

Tip: Waarom het handig is om de tekstkleur in de rij-instellingen te wijzigen in plaats van in de module-instellingen. Stel dat je standaard tekstkleur zwart is, maar je wilt een donkere achtergrond voor je rij, dus je wilt dat alle tekst in de rij in het wit wordt weergegeven. Door de tekstkleur op de rij in te stellen, hoeft u deze niet voor elke module in te stellen. Bovendien, wanneer u modules verplaatst, zal elke module die naar die rij verplaatst wordt automatisch de juiste kleur tekst hebben. Als u de tekstkleur in een rij wijzigt, kunt u dat nog steeds opheffen door een andere tekstkleur in een module in te stellen.

Achtergrond sectie

Creëer en stijl een van de volgende soorten rij-achtergronden. Elke keuze opent een sectie met instellingen voor dat type achtergrond.

• Niet
• Kleur
• Gradiënt
• Foto (veel gebruikt door cursisten)
• Video. Meer op Beaver builder video-instellingen en -tips.

Betaalde versie van Beaver builder

• Embedded code. Gebruik html om inhoud zoals video’s van andere bronnen of sliders van andere plugins in te sluiten met behulp van sneltoetsen.
• Slideshow
• Parallax
  Zie het artikel over parallax rij-achtergronden.

Background overlay sectie

Dit gedeelte verschijnt als je Foto, Video, Slideshow of Parallax als achtergrondtype kiest. U kunt een kleurenoverlapping selecteren en de ondoorzichtigheid manipuleren om meer of minder van de onderliggende achtergrond weer te geven.

Gewoonlijk wordt een dekkingslaag van de achtergrond gebruikt met een semitransparante witte of zwarte kleur om de leesbaarheid van de inhoud boven op de rijachtergrond te verbeteren, maar in sommige gevallen wordt een semitransparante kleur gebruikt voor het ontwerpeffect.

Bordersectie

U kunt een rij rijtje toevoegen. Met of zonder rand, u kunt een hoekrondering (radius) en een schaduweffect toevoegen. Zie het artikel over randen en het artikel over radius- en schaduweffecten.

Meer handleidingen over afgeronde hoeken, CSS en border-radius instellen:

Top shape, Bottom shape-secties

Wijs een vorm toe aan de boven- of onderrand van de rij. Zie het artikel over de overlays van de rijvorm.

---

Geavanceerde tab

Er zijn alle gebruikelijke Geavanceerde tabbladinstellingen voor marges en opvulling, zichtbaarheid, animaties en geavanceerde HTML-instellingen.

Tussenruimte (Margin en padding)

Voor rijen en kolommen kunt u de standaardmarge en opvulwaarden wijzigen. Voor modules kunt u alleen de standaard margewaarden wijzigen.
Beaver Builder | margin padding kolom instellingen

Vergrendelen en ontgrendelen van de tussenruimte-instellingen

U kunt de vier instellingen voor de kantmarge en de opvulling vergrendelen, zodat u in elk veld één waarde kunt invoeren en alle vier de instellingen (links, boven, rechts, onder) die waarde weergeven. Klik op het Lock icoontje, omcirkeld in oranje, om de instellingen te vergrendelen en klik nogmaals om het slotje te verwijderen:

Voeg specifieke afstandsinstellingen toe voor de grootte van het apparaat

Met behulp van het blauw omcirkelde pictogram kunt u instellingen voor elke apparaatgrootte toevoegen of Beaver Builder de kleinere apparaten automatisch laten behandelen. Begin met dit artikel voor informatie over marges en opvulling voordat u begint met het maken van individuele wijzigingen op het tabblad Geavanceerd.

Zichtbaarheidsgedeelte

In het veld Breakpoint kunt u de weergave van de rij, kolom of module beperken tot bepaalde apparaatafmetingen. Zie dit artikel voor meer informatie over globale en aangepaste breekpunten.

In het veld Weergave kunt u kiezen om de rij, kolom of module altijd weer te geven, nooit, of alleen om gebruikers in te loggen of uit te loggen. Als u Beaver Themer hebt geïnstalleerd, kunt u ook voorwaardelijke logica gebruiken voor veel meer opties die bepalen wanneer de rij, kolom of module wordt weergegeven.

Animatiegedeelte (fade)

U kunt een toegangsanimatie toewijzen, die de eerste keer dat de pagina wordt geladen en de rij, kolom of module in beeld komt, activeert. De standaardinstelling is Geen.

Als u een ingangsanimatie kiest, stelt u de vertraging in (hoe lang voordat de animatie start, in seconden) en een duur (hoe lang de animatie duurt, in seconden).

---

Kiezen tussen nieuwe rijen of rij lagen

Rijen kunnen lagen van kolommen bevatten, zoals weergegeven in deze screenshot, waarbij één rij drie verticale lagen heeft met een verschillend aantal kolommen in elke rij.

Tip: Voor nog complexere lay-outs kunt u kolommen binnen kolommen hebben. Voor meer informatie over hoe kolommen werken, zie het kolomindelingoverzicht. Maar u kunt ook elk van deze kolomlagen in een andere rij zetten, zoals in deze schermafbeelding:

Wat bepaalt wanneer je een nieuwe rij in je lay-out start? Er is geen harde en snelle regel, maar hier zijn enkele overwegingen:

• U wilt een achtergrondkleur, afbeelding of video instellen voor een bepaalde rij in uw lay-out. Maak een aparte rij voor die sectie.
• U wilt een bepaalde rij opslaan om deze ergens anders opnieuw te gebruiken.
• Je hebt inhoudsdelen op je pagina die je later misschien wilt herpositioneren – als ze in aparte rijen staan, kun je ze gemakkelijk verplaatsen door te slepen.
• U wilt gebruik maken van de marge van de rij of de opvulmogelijkheden om een blok inhoud binnen een rij te positioneren of de rij ten opzichte van andere rijen te positioneren.
• In plaats van een thema zijbalk wilt u een Sidebar-module of een andere module toevoegen die meerdere rijen lijkt te overspannen. Om dit gebied het uiterlijk van een zijbalk te geven, heb je een enkele rij met kolomlagen nodig, zoals in deze snelle mockup die een enkele rij met twee kolommen laat zien. De linkerkolom bevat twee kopjes kolomlagen , en de rechterkolom bevat de sidebar.

---

Kolom instellingen

Voor de kolommen gelden bijna dezelfde settings als voor de rijen. Bijvoorbeeld de achtergrondkleur, breedte, hoogte, margin, padding, etc.
Beaver Builder | margin padding kolom instellingen

---

Rij aanmaken met elementor

Voor elementor werkt het min of meer hetzelfde als bovenstaand. Ik ben bezig met het maken van een handleiding hoe je met Elementor een rij met kolommen kan maken.

---

Leer meer over WordPressen webdesign bij een designtraining

---

Meer handleidingen over beaver builder page builder

• WP Beaver Builder training pagina’s bouwen met WP plugin
• Livemesh Addons Beaver WordPress page builder plugin
• Beeldvullende pagina maken foto volledige breedte scherm
• Pagina kopieren WordPress Bakery Beaver Elementor builder
• Class CSS stijlen maken WP Beaver page builder gevorderden
• Veel gestelde vragen | FAQ | Beaver builder en Elementor page builder
• CSS aanpassen Beaver builder basis voor beginners