Class CSS stijlen maken Beaver builder

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 🙂

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:

Handleiding classes en css in WordPress

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.


Handleiding hoe aangepaste CSS-stijlen aan uw Beaver Builder-elementen toe te voegen

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


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


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


2 Verfijning | Alleen H3 veranderen van heading modules

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


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


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:


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

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.


.fl-builder-content

Zo gaat de class goed:

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


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


Videohandleiding

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



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.


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

Alle headers in een type module aanpassen

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


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

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.


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


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


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

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”


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


Leren classes maken in Beaver builder of een 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:

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