WP Bakery Builder | Geavanceerde tips, trucs en responsive instellingen

Tegenwoordig onmisbaar voor elke uitgebreidere site. WP Bakery builder (voorheen Visual Composer) is een eenvoudig te gebruiken page builder 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 ivm responsive design

Je kan in de rij-instellingen onderaan bij ‘class’ éé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


Demotekst

Ook als je geen professionele webdesigner bent, heb je veel aan deze handige WordPress plugin. Je kunt er namelijk heel gemakkelijk je eigen pagina lay-outs mee maken.

Responsive Voorbeeld 2
Zichtbaar op mobiel+klein

Visual composer met class: vc_hidden-lg vc_hidden-md


Demotekst

Je maakt in een paar minuten een professionele webpagina die goed aansluit bij de huisstijl van je bedrijf

Responsive Voorbeeld 3

Niet zichtbaar op klein scherm.
Visual composer met class:

vc_hidden-sm


Demotekst

Ook als je geen professionele webdesigner bent, heb je veel aan deze handige WordPress plugin. Je kunt er namelijk heel gemakkelijk je eigen pagina lay-outs mee maken.

Responsive Voorbeeld 4

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

vc_hidden-xs


Demotekst

Ook als je geen professionele webdesigner bent, heb je veel aan deze handige WordPress plugin. Je kunt er namelijk heel gemakkelijk je eigen pagina lay-outs mee maken.

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 responsive instellingen hier live bekijken:


Samengevat

Ik maak met WP Bakery Builder meestal 2 rijen:

Voor grote schermen

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

vc_hidden-sm vc_hidden-xs

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.


Ook interessant