Er zijn verschillende manieren om aangepaste CSS toe te voegen, maar er zijn kleine variaties in het gedrag bij elke methode.
IN DEZE HANDLEIDING:
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
- Verloop gradient achtergrondkleur overlay maken met CSS en page builder
- Easy Google Fonts plug-in Fonts en lettertypes voor WordPress
- Zelf simpel HTML en CSS maken leren in WordPress voor beginners
- CSS website maken aanpassen met Yellow Pencil WordPress plug-in
- CSS aanpassen Beaver builder basis voor beginners
- Typografie stijlen | css, class, span opmaakstijlen maken WordPress website
- CSS Element inspecteren WordPress aanpassen browser
Meer handleidingen over beaver builder
- Class CSS stijlen maken WP Beaver page builder gevorderden
- WP Beaver Builder training webpagina bouwen WordPress plugin
- Pagina bericht kopieren WordPress Bakery, Beaver, Elementor page builder
- Beaver Builder margin padding rij kolom ruimte
- Livemesh Addons Beaver WordPress page builder plugin
- Veel gestelde vragen | FAQ | Beaver builder en Elementor page builder
- CSS aanpassen Beaver builder basis voor beginners
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;
}