Leer zelf Classes en CSS stijlen maken in Beaver builder. Dit bespaard ontzettent veel tijd en houdt je website op orde. Lees de handleiding voor gevorderden.

Zelf Classes en CSS stijlen maken in Beaver builder

Na diverse reviews en tests van de page builders (paginabouwers) van WordPress, heb ik ontdekt dat Beaver Builder duidelijk mijn favoriet is. Dit omdat het geschikt is voor webbouwers die het perfect willen doen, zoals ik 🙂
Bekijk de reviews van Page builders:

Het Beaver Builder-team heeft het gemakkelijk gemaakt om aangepaste CSS-stijlen toe te voegen aan je Beaver Builder-elementen. Zoals met elk CMS systeem, kun je veel meer doen met Beaver Builder als je CSS goed begrijpt, en de software moedigt dit aan, in plaats van te proberen ervoor te compenseren. Het is wel van belang dat je weet hoe classes werken. Lees eventueel eerst de onderstaande handleidingen.

CSS aanpassen in WordPress

Je moet eerst wat basisprincipes weten van CSS.

• Wat is de CSS code die ik nodig heb?
• Hoe achterhaal ik de CSS code?
• Kan ik zelf CSS code maken?
• Waar zit ik deze code neer?

De basis van CSS aanpassen in WordPress leer je hier:
CSS aanpassen en toevoegen voor beginners of volg onze CSS training op maat.

Om Beaver Builder-lay-outs te stylen met uw eigen aangepaste CSS, moet u weten hoe u onderliggende elementen kunt aanspreken, omdat je over het algemeen CSS-klassen toevoegt aan Beaver Builder-modules, niet aan de onderliggende HTML-elementen erin.

---

Aangepaste CSS-stijl aan Beaver Builder-element toevoegen

• Klik op “Page Builder” om de bewerkingsmodus van Beaver Builder in te schakelen en selecteer het Beaver Builder-element (module) waaraan u wilt werken.
• Voeg op het tabblad ‘Geavanceerd’ van die module een CSS-klasse toe. U heeft geen opening nodig. teken, dus om een moduleklasse my-class te geven, typt u gewoon “my-class” in het veld “Class”.
• Open vervolgens dezelfde pagina in een nieuw browsertabblad en ga naar “Aanpassen”> “Extra CSS”.
• Gebruik de Inspector van uw browser om op intelligente wijze de elementen te targeten die u wilt wijzigen. Voor veel Beaver Builder-modules richt u zich in feite op elementen (zoals -tags in het videovoorbeeld) die verschillende lagen diep in de modules met de aangepaste klasse zelf zijn.

En klaar! Geniet van het gemak en de vrijheid van een echt goede paginabuilder, plus de focus en kracht van directe CSS-bewerking. En als je dat nog niet hebt gedaan, probeer dan Beaver Builder – je zult blij zijn dat je dat hebt gedaan.

Stijl toevoegen aan bestaand page builder element of module

Om een class of stijl toe te voegen aan bestaand page builder element open je het element of module en ga je naar geavanceerd. Daar zie je class staan. Vul daar de naam van je class in. In dit voorbeeld een class die “kader1” heet:

---

Handleiding Class CSS stijlen maken Beaver builder

De onderstaande video legt dit mooi uit en leidt u snel door het efficiënt toevoegen van CSS-stijlen aan Beaver Builder-elementen – zowel aan Beaver Builder-modules als aan de HTML-elementen in die modules.

---

---

Voorbeelden Class CSS stijlen met Beaver builder modules

In de onderstaande voorbeelden laat ik zien hoe je met een stijl en class zelf in 1 keer al je typografie kan aanpassen.

---

1 Alle headings veranderen van heading modules

Dus H1 t/m H6

<br>
.fl-module-content .fl-node-content .uabb-heading .uabb-heading-text  {<br>
color: #a1bf0b !important;<br>
font-size: 300% !important;<br>
margin: 10px 2px 0px 2px;<br>
text-align: center;<br>
}<br>

---

2 Verfijning | Alleen H3 veranderen van heading modules

Nu alleen de H3 headings verfijnen. Dus H1, H2, H4, H5, H6 niet:

<br>
.h3 .fl-module-content.fl-node-content .uabb-heading .uabb-heading-text  {<br>
color: #a1bf0b !important;<br>
font-size: 300% !important;<br>
margin: 10px 2px 0px 2px;<br>
text-align: center;<br>
}<br>

---

3Verfijning | Met zelf gemaakte class H3 veranderen van heading modules

Nu alleen de H3 headings verfijnen die je zelf een class hebt gegeven.
Je kan zelf een class aanmaken bij elke module in het tabje ‘geavanceerd’, het laatste tabje.
In het onderstaande voorbeeld heb ik een class ‘titel‘ toegevoegd, die rood moet worden:

<br>
.titel h3   {<br>
color: #ff0000 !important;<br>
font-size: 300% !important;<br>
margin: 10px 2px 0px 2px;<br>
text-align: center;<br>
font-family: 'Red Hat Text', sans-serif;<br>
font-weight: 100;<br>
}<br>

Waarom werkt deze class en stijl niet?

Normaal gesproken werkt dit, alleen omdat de H3 in een Beaver builder module zit, moet je het onderstaande toevoegen aan je CSS.

<br>
.fl-builder-content<br>

Zo gaat de class goed:

Met fl-builder-content wordt alle CSS herkend binnen de Beaver Builder. Heel essentieel dus. Zo werkt het optimaal:

<br>
.fl-builder-content .titel h3  {<br>
color: #ff0000 !important;<br>
font-size: 300% !important;<br>
margin: 10px 2px 0px 2px;<br>
text-align: center;<br>
font-family: 'Red Hat Text', sans-serif;<br>
font-weight: 100;<br>
}<br>

---

Videohandleiding

Hieronder staat het ook nog aardig uitgelegd door mijn engels collega:

https://youtu.be/LBJRpEn35vI

---

Praktijkvoorbeeld CSS van Beaver builder aanpassen

Voorbeeld van de CSS aanpassen van de Infobox module van de Ultimate Beaver builder plugin add-on:
Handleiding Ultimate Beaver builder plugin add-on

Modules aanpassen met CSS

Je kan modules aanpassen met CSS. Je verandert dan alle modules over je hele website. In het kopje ‘Zelf Classes maken voor modules’ leg ik uit hoe je specifieke modules kan wijzigen.

---

Alle platte tekst in de module aanpassen

Alle platte tekst in de module aanpassen, dus door je hele website. Dus voor alle modules.

<br>
.uabb-infobox-content .uabb-infobox-text p {<br>
font-size: 110% !important;<br>
margin: 10px 2px 0px 2px;<br>
text-align: center;<br>
}<br>

Alle headers in een type module aanpassen

Alle headers in de module aanpassen, dus door je hele website, in 1 specifieke module (info box)

<br>
.fl-builder-content .uabb-infobox-title {<br>
color: #E7DB6C;<br>
}<br>

Alle h3 kopteksten in alle modules aanpassen

Je kan ook alle kopteksten in alle modules aanpassen. In het onderstaande voorbeeld worden alle h3 teksten rood.

<br>
.fl-builder-content h3  {<br>
color: #ff0000;<br>
}<br>

---

Zelf Classes maken voor modules

Enkele headers in een type module aanpassen met eigen gemaakte class

Enkele headers in de module aanpassen, dus door je hele website, in 1 specifieke module (info box) met een eigen gemaakte class

<br>
.fl-builder-content .uabb-module-content h3.geel {<br>
color: #D7D46F;<br>
}<br>

Class maken voor platte tekst in de module

Wil je bijvoorbeeld een stijl aanmaken voor de platte tekst in de module.
Maak een class aan, bijvoorbeeld “groot-en-rood”

<br>
.fl-builder-content .groot-en-rood p  {<br>
color: #ff0000 !important;<br>
font-size: 130% !important;<br>
margin: 10px 2px 0px 2px;<br>
text-align: center;<br>
font-family: 'Red Hat Text', sans-serif;<br>
font-weight: 100;<br>
}<br>

---

Leren classes maken in Beaver builder of andere page builder

Bij een WordPress cursus voor gevorderden, kan ik voorbeelden laten zien van een uitgebreide set van Classes die je kan gebruiken in het CSS van je WordPress website. Gevorderde WordPress cursussen:

• Online WordPress cursus volgen op afstand vanuit huis
• WordPress Bootcamp all-in one spoedcursus
• WordPress Designcursus ontwerp en vormgevingstraining
• WordPress Pop-up Bootcamp spoedcursus op maat
• Designcursus WordPress voor ontwerpers en vormgevers

---

Meer handleidingen over WordPress beaver builder

Succes met het maken van je Classes en stijlen in CSS met Beaver Builder