WP Bakery Builder geavanceerde tips en trucs

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 met WP Bakery Builder 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

---

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 responsive 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: