Er zijn verschillende manieren om aangepaste CSS toe te voegen, maar er zijn kleine variaties in het gedrag bij elke methode.

CSS aanpassen met de Customizer Customize > Extra CSS

Deze methode past de CSS-code overal op uw site toe: dus Beaver Builder en niet-Beaver Builder inhoudelijke gebieden en elk thema. Je kan CSS toevoegen aan je WordPress website op deze plek:

• WordPress > Weergave > Customizer > CSS

Het Customize > Extra CSS tabblad in Customizer is eigenlijk een WordPress optie, het is niet voorzien in het Beaver Builder Thema. Hoewel de Customize > Extra CSS tab bestaat in elke WordPress-installatie, is de daar geplaatste code themaspecifiek. Deze verdwijnt als je van thema wisselt en komt terug als je terugkeert naar het oude thema. Als u code wilt migreren naar een nieuw thema, kopieer en plak het dan handmatig.

CSS aanpassen voor cursisten

Speciaal voor cursisten heb ik een basisset van CSS regels gemaakt die je kan inplakken in je website als je met het Astra WordPress thema werkt.
Je kan CSS toevoegen aan je website in de customizer:

• WordPress > Weergave > Customizer > CSS

/*===================
Volgend vorige bericht weg:
===================*/
.single .post-navigation a {
display: none;
}
/*===================
Classes Arthur
===================*/
p.inleiding {
font-size: 140%;
font-weight: 600;
color: #8FBC8F;
line-height: 160%;
}
p.klein {
font-size: 85%;
}
p.mini {
font-size: 70%;
}
/*===================
Ruimte om container
===================*/
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single {
background-color: #fff;
border-bottom: 1px solid #eee;
margin: 0;
padding: 1.34em 2.67em;
}
.ast-separate-container .ast-archive-description, .ast-separate-container .ast-author-box {
margin: 0;
padding: 0.9em 2.67em 0.6em;
background-color: #f6f6f6;
}
.ast-archive-description .ast-archive-title {
font-size: 1.3rem;
color: #999;
}
/*===================
Achtergrondkleur post content
===================*/
.ast-separate-container .ast-article-post, .ast-separate-container .ast-article-single {
background-color: none;
}
/*===================
Achtergrondkleur header
===================*/
.main-header-bar {
background-color: #f2f2f2;
}
/*===================
Footer minder hoog
===================*/
.footer-adv-overlay {
padding-top: 30px;
padding-bottom: 30px;
}
/*===================
Op mobiel - kolommen breed
===================*/
@media only screen and (min-width: 100px) and (max-width: 768px) {
.fl-col-small { min-width: 100%;}
}
}

---

Globale CSS voor content gebiedsindelingen

U kunt site-wide regels toevoegen in uw Beaver Builder bewerkingsscherm. De regels zijn alleen van toepassing op het contentgedeelte van elke pagina, ongeacht of de pagina of het bericht is gebouwd met Beaver Builder. Gebruik deze locatie niet voor CSS-regels die van toepassing zijn op gebieden die door uw thema worden gecontroleerd, zoals koptekst, footer (voettekst) en sidebar (zijbalk).
Dus alleen op het witte gedeelte van de onderstaande afbeelding.

Zie dit artikel voor een schema van waar het inhoudsgebied zich op een pagina of bericht bevindt.

Deze methode is erg handig wanneer je aangepaste ID of class selector namen toevoegt aan individuele rijen, kolommen of modules op een pagina, omdat je de Beaver Builder editor niet hoeft te verlaten om de regel toe te voegen en ze nog steeds site-breed van toepassing zijn, en je de site-brede regels kunt zien vanaf elke Beaver Builder bewerkingspagina. Zie de links naar handledingen onderaan deze pagina hoe je dit kunt doen.

Aan de andere kant kan je er de voorkeur aan geven om al je regels op een enkele plaats te bewaren, zodat je ze later gemakkelijk kunt vinden. In dat geval kun je een van de andere onderstaande methoden gebruiken.

Het toevoegen van een site-brede CSS-code voor content area lay-outs:

• Klik op de titelbalk in de linkerbovenhoek om het menu Tools te openen en klik vervolgens op Global settings
• Op het tabblad CSS voert u uw CSS-code in.
• Klik op Save en bekijk het resultaat.
  Deze code verschijnt nu in Tools > Global settings op elke Page Beaver-pagina, maar de CSS-regels zijn van toepassing op alle inhoudsgebieden van uw site, ongeacht of ze zijn gebouwd met Beaver Builder.

Je ziet een groene stip naast het menu-item Global Settings in het menu Tools om je eraan te herinneren dat je aangepaste code hebt. Omdat het globaal is, kunt u deze code op elke Beaver Builder-bewerkingspagina bewerken.

Zelf class of stijl toevoegen of maken page builder element of module

Dit is niet direct voor beginners. Lees de Beaver builder handleiding gevorderden”>gevorderden handleiding class maken. Om een class of stijl toe te voegen aan bestaand page builder element open je een bestaand element of module en ga je naar “geavanceerd”. Daar zie je dan class staan. Vul daar de naam van je class in die je zelf moet maken met dezelfde naam. Ik leg dit altijd uit tijdens een designcursus of bootcamp. In dit voorbeeld een class die “kader1” heet:

---

Meer handleidingen over CSS en beaver builder

Meer handleidingen over CSS en beaver builder vind je hieronder:

Meer handleidingen over CSS in WordPress

Meer handleidingen over beaver builder

• Livemesh Addons Beaver WordPress page builder plugin
• WP Beaver Builder training pagina’s bouwen met WP plugin
• Ultimate Beaver builder add-on plugin voor extra modules
• Pagina kopieren WordPress Bakery Beaver Elementor builder
• Beeldvullende pagina maken foto volledige breedte scherm
• Beaver Builder margin padding rij kolom ruimte
• Class CSS stijlen maken WP Beaver page builder gevorderden

CSS tips voor gevorderden Beaver builder

Volle hoogte module binnen volle hoogte rij

Plaats gewoon een class (stijl) op de kolom waar die modules zich bevinden en gebruik de CSS snippet hieronder. In dit geval is de toegevoegde klasse col-full-height.

.col-full-height .fl-col-content {
    min-height: 100vh;
}