CSS aanpassen Beaver builder basis voor beginners

Logo cursus traing wordpress

CSS aanpassen Beaver builder basis voor beginners

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

CSS aanpassen met de Customizer Customize > Extra CSS

Deze methode past de CSS-code overal op uw site toe: dus 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-, 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 (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 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 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 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

CSS tips voor gevorderden Beaver builder

Volle hoogte module binnen volle hoogte rij

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

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

Meer informatie over CSS aanpassen Beaver builder basis voor beginnersof info?

Wil je meer weten? Veel cursisten met interesse in CSS aanpassen Beaver builder basis voor beginners bekeken ook de onderstaande handleidingen en artikelen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je website sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over CSS aanpassen Beaver builder basis voor beginners?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, CSS aanpassen Beaver builder basis voor beginners en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven