Kadence blocks, zowel de gratis als de Pro versie, heeft heel veel mogelijkheden om van alles naar wens in te stellen. Toch is er, zelfs bij de Kadence blocks builder, soms behoefte aan CSS-code om een en ander aan te passen.
Kadence thema en blocks zijn apart
Omdat Kadence thema en Kadence blocks (de builder) twee aparte producten zijn, hebben we daar aparte CSS pagina’s voor gecreëerd. De CSS-code voor het Kadence thema kun je hier vinden.
Verberg knop Fullscreen Kadence video block
Het video block van Kadence blocks pro toont standaard een ‘fullscreen’ optie. Met deze CSS-code is deze optie onzichtbaar. Deze code plaats je in de Extra CSS van het thema (of een code plugin).
/* Verberg knop Fullscreen Kadence video block */
button svg.icon--not-pressed{
display: none !important;
}Kadence CSS – uitlijnen van de buttons
Als je meerdere kolommen naast elkaar hebt met een button (knop) in elke kolom, zijn er voldoende instellingen om de kolommen lijnend te krijgen, maar de knoppen niet. Of de knoppen wel, maar de tekstblokken niet. Deze CSS-code zorgt dat de knoppen met elkaar in lijn komen.
Het eerste voorbeeld met de drie kolommen is ‘standaard’, dus zonder de CSS.
Het eerste voorbeeld met de drie kolommen is ‘standaard’, dus zonder de CSS.
Belangrijk: deze code kun je het beste plaatsen in het row block van Kadence, bij advanced / custom CSS. Als je het bij Extra CSS van het thema zou plaatsen, zou de code alle kolommen en knoppen op je hele website beïnvloeden. Ook waar je dit misschien niet wenst.
/* Alignment buttons bij een row-block met meerdere kolommen - plaatsen in row block bij advanced / custom CSS*/
selector .wp-block-kadence-column .kt-inside-inner-col {
display: flex;
flex-direction: column;
flex: 1;
}
selector .wp-block-kadence-column .kt-inside-inner-col .wp-block-kadence-advancedbtn {
margin-top: auto;
}knoppen Kadence linkslijnend
Standaard kun je heel veel met de knoppen (buttons) van Kadence blocks. Er ontbreekt op dit moment één belangrijke optie. Als je een knoppen toepast met een icon aan het begin, zijn knoppen waar alles gecentreerd staat opeens lelijk en druk. Dan wil je de icons en teksten linkslijnend hebben, en heb je een probleem. Met deze code is dat in één keer opgelost. Het advies is om deze code niet in de Extra CSS van je thema te plaatsen, omdat dan alle knoppen van je hele website worden aangepast. Plaats de code in je pagina. Het Kadence Pro thema heeft die optie. Open de pagina, klik rechtsboven op de grote K knop. Onderop zie je een tab ‘Page scripts’. Daar plaats je de CSS-code voor de knoppen in. Hieronder zie je hoe het er uitziet zonder de CSS-code voor de Kadence knoppen, en hoe het er uitziet met de code.
.kt-btn-inner-text {
text-align: left;
width: 95%;
}Plaaatsen van CSS code
We gaan ervan uit dat je al weet hoe je CSS plaatst. Als je dat nog niet weet, kijk dan hier:
Gebruik je een ander thema?
De basis van de CSS-code is dan hetzelfde, alleen zijn de doelen (de classes die worden beïnvloed door de CSS-code) meestal anders.
Zoek dan de juiste classes op, via de helpdesk van je thema, Google of door het in pagina code op te zoeken, en vervang de classes in deze CSS snippets door jouw .classes.