WP Bakery Builder tips geavanceerde responsive trucs

Veel web-designers gebruiken nog steeds WP Bakery Page builder. Hier vind je enkele tips, handigheidjes en trucs die erg handig zijn.

Logo cursus traing wordpress

WP Bakery Builder tips geavanceerde responsive trucs

WP Bakery Builder geavanceerde tips en trucs

Tegenwoordig onmisbaar voor elke uitgebreidere site. (voorheen Visual Composer) is een eenvoudig te gebruiken plugin die je de mogelijkheid bied om schitterende webpagina's te bouwen, met een uitgebreid scala aan functionaliteiten.

De basisfuncties van WP Bakery Builder plugin had ik al eerder uitgelegd. Hieronder vind je enkele ander handigheidjes en trucs die erg handig zijn.


Rijen verbergen met WP Bakery Builder ivm responsive design

Je kan in de rij-instellingen onderaan bij ‘' één van de volgende waarden invullen:

vc_hidden-lg  <-- verberg rij op grote schermen
vc_hidden-md  <-- verberg rij op middelgrote schermen
vc_hidden-sm  <-- verberg rij op kleine schermen (tablet)
vc_hidden-xs  <-- verberg rij op mini schermen (mobiel)

Bekijk hieronder waar je de class kan instellen:


Voorbeelden van responsive

Ik heb hieronder enkele verschillende voorbeelden gemaakt. Je kan het testen door deze pagina op verschillende apparaten te bekijken. Dan zie je het verschil.

Responsive Voorbeeld 1
Zichtbaar op mobiel+klein+medium scherm

Visual composer met class:

vc_hidden-lg


Responsive Voorbeeld 2
Zichtbaar op mobiel+klein

Visual composer met class: vc_hidden-lg vc_hidden-md


Responsive Voorbeeld 2
Zichtbaar op mobiel+klein

Visual composer met class: vc_hidden-lg vc_hidden-md


vc_hidden-sm


Responsive Voorbeeld 4

Niet zichtbaar op heel klein scherm.
Visual composer met class: vc_hidden-sm

vc_hidden-xs


Responsive Voorbeeld 1:
Zichtbaar op Mobiel+klein scherm

Visual composer met class: vc_hidden-lg vc_hidden-md

Responsive Voorbeeld 2:
Zichtbaar op Groot scherm

Visual composer met class: vc_hidden-sm vc_hidden-xs


Kolommen verbergen

Je kan ook kolommen verbergen afhankelijk van het apparaat waarop je WordPress site bekeken wordt.


Je kan de instellingen hier live bekijken:


WP Bakery builder responsive samengevat

Voor belangrijke pagina's in WordPress waar responsive heel belangrijk is, maak ik met WP Bakery Builder meestal 2 rijen. Eén voor grote schermen en laptops en één voor tablets en mobiele telefoons. Je kan de onderstaande codes kopieëren en bij de class van een rij invoeren:


1 Voor grote schermen

1 rij alleen zichtbaar op grote schermen. Vul bij de “class” in:

vc_hidden-sm vc_hidden-xs

2 Voor kleine schermen

1 rij alleen zichtbaar op kleine schermen. Vul bij de “class” in:

vc_hidden-lg vc_hidden-md

Probeer het zelf. Als je nog vragen of opmerkingen hebt dan hoor ik het graag.


Meer WP Bakery Builder handleidingen

Meer WP Bakery Builder handleidingen vind je hier:


Meer informatie over WP Bakery Builder tips geavanceerde responsive trucsof info?

Wil je meer informatie? Veel cursisten met interesse in WP Bakery Builder tips geavanceerde responsive trucs bekeken ook de onderstaande handleidingen en artikelen:


Training of cursus ontwerp en vormgeving

WordPress design en vormgeving

Leer hoe je je WordPress website beter en kan ontwerpen en vormgeven in de speciale designcursus:
Design en ontwerpcursus voor WordPress

WordPress Bootcamp

Leer hoe je je WordPress site mooier kan maken en vormgeven in de WordPress Bootcamp spoedopleiding:
Design en ontwerp in WordPress Bootcamp

Info over WP Bakery Builder tips geavanceerde responsive trucs

Neem vrijblijvend contact op met Arthur als je nog vragen hebt over ontwerp, WP Bakery Builder tips geavanceerde responsive trucs en WordPress webdesign.

WordPress designer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven