WPBakery - WordPress Visual Composer Intro

Page Builders worden langzaam aan een trend in WordPress-land. Met behulp van zo’n Page Builder maak je een pagina door de pagina in te delen in rijen en aan die rijen blokken met bepaalde functionaliteit toe te voegen.

Standaard is WordPress prima geschikt om eenvoudige blog-berichten aan te maken met tekst en wat afbeeldingen. Wil je een pagina aanmaken met verschillende kolommen of een nog specifiekere layout dan wordt alles al wat ingewikkelder. Zeker als het gekozen thema geen kolommen ondersteund. Afbeeldingen kunnen slechts of rechts, links of gecentreerd geplaatst worden met behulp van de standaard editor van WordPress. De TinyMCE Advanced plugin voegt al meer extra functionaliteit toe aan de editor, maar nog steeds is het niet eenvoudig om een mooie indeling te krijgen.

“Page Builders” bieden dan de uitkomst. Een pagina kan eenvoudig worden opgebouwd uit blokken die op de pagina geplaatst worden. Afhankelijk van de desbetreffende Page Builder zijn er meer of minder zgn. building-blocks voorhanden.

“Visual Composer” is veruit de meest gebruikte en wordt door meer en meer commercieel verkrijgbare thema’s gratis meegeleverd.

Eenmaal gewend aan het werken met Visual Composer wil je eigenlijk niets anders meer. Het enige nadeel (tot zover) is dat alles, op  de achtergrond, wordt opgebouwd uit shortcodes. Die shortcodes moeten door WordPress weer omgezet worden naar HTML en dat geeft een vertragende factor bij het opbouwen van de pagina. Heb je een goede hosting-provider zal de bezoeker daar ook weer niet veel van merken.

Heb je eenmaal je website met Visual Composer gemaakt, zit je er enigszins aan vast. Alle content is namelijk verstrikt in die shortcodes. Wil je in de toekomst switchen naar een thema welke Visual Composer niet ondersteund, dien je alle content (pagina’s) opnieuw te moeten aanmaken.

De voordelen wegen, naar onze mening, op tegen de nadelen. De opbouw van een pagina is stukken eenvoudiger en je hebt veel meer directe controle over de styling. Tevens zorgt Visual Composer ervoor dat je content direct “Responsive” is en er dus goed uitziet op een tablet en mobieltjes. In slechts sommige gevallen dienen er kleine aanpassingen gedaan te worden om het volledig responsive te krijgen.

De volgende introductie video is van de makers van Visual Composer:

Standaard heeft Visual Composer erg veel functies om een pagina mee op te bouwen, cq. in te delen:

Alle contentblokken (elementen) zijn weer opgedeeld in categorieën (tabbladen). Heb je een thema waarbij Visual Composer is meegeleverd is het mogelijk dat er meer functies zijn toegevoegd door de thema-bouwer. Extra functies zijn weer toe te voegen met Visual Composer Add-Ons.

Bij het aanmaken of wijzigen van een pagina heb je nu de keuze uit een Backend en Frontend -editor:

Kies je voor de “Frontend” -optie kun je de pagina opbouwen in een soort van “live” omgeving. Je ziet dus wat je aan het doen bent; terwijl in de “Backend” -optie, je de pagina maakt in het dashboard.

Het is altijd mogelijk om tussen beide opties te switchen.

In de Frontend-editor heb je ook nog de mogelijkheid om even snel te bekijken hoe de pagina eruit zal zien op een tablet of smartphone:

De keuze tussen Backend of Frontend is een persoonlijk iets. Hier zullen we verder gaan in de Backend mode.

De pagina opbouw dient geheel in rijen te worden opgebouwd. Dit is een geheel andere werkwijze dan we gewend zijn en daardoor is het in het begin handig om op papier een schets te maken van wat je op je pagina wilt tonen en dan de rijen één voor één (te schetsen) aan te maken en te vullen met de diverse contentblokken verdeeld over kolommen.

Rij Toevoegen
Start je met een nieuwe pagina (of bericht) dien je dus als eerste en rij toe te voegen:

Je krijgt dan het functie-overzicht zoals eerder getoond en daar kies je voor een “Rij”.

Heb je een rij toegevoegd kun je die weer onderverdelen in kolommen. Dat is mogelijk voordat je contentblokken toevoegt en is later ook aan te passen:

Je hebt hier de keuze uit een aantal standaard voorgedefinieerde kolomindelingen en je hebt de optie om een “aangepaste” indeling te maken.

Kies je voor een aangepaste indeling dan dien je de indeling dusdanig in te stellen dat het geheel weer 100% wordt (zie eventueel kolommen op je pagina voor een toelichting).

We kiezen hier, als voorbeeld, voor 2/3 + 1/3.

In de eerste kolom plaatsen we dan een tekstblok en in de tweede kolom een afbeelding. Dat doe je door op het “+” -teken te klikken in iedere kolom:

Het functieoverzicht wordt dan weer getoond en daar kies je dan als eerste voor een tekstblok:

Je krijgt dan de standaard editor (in dit voorbeeld met TinyMCE Advanced), je kunt dan de tekst bewerken en zodra je op “Save changes” klikt zal het tekstblok in de rij verschijnen.

Dat doe je dan ook voor de tweede kolom en daar kiezen voor het contentblok “Enkele afbeelding”:

Voor nu hebben we gekozen voor een afbeelding via de Media library en zullen later een uitgebreidere beschrijving geven van dit contentblok en de mogelijkheden. Klik nu ook op “Save changes” en de afbeelding zal aan de rij in de tweede kolom toegevoegd worden.

De rij ziet er dan nu zo uit:

Klik je nu op de grote “+” onder de rij kun je weer een extra rij toevoegen en zo bouw je dan de pagina op.

Kolom/Rij bewerken

In de gemaakte rij met de diverse kolommen en elementen heb je nu de volgende opties:

 

1 – Kolom Opties (van links naar rechts):

• via de “+” heb je mogelijkheid om een extra blok aan de kolom toe te voegen;
• met de tweede optie (potlood) kun je de kolom instellingen aanpassen;
• via de derde (prullenbak) heb je de optie op de gehele kolom te verwijderen.

2 – Rij Opties (van links naar rechts):

• via de eerste optie om de rij te minimaliseren voor een beter rij-overzicht op de pagina-editor;
• met de tweede optie (potlood) kun je de rij instellingen aanpassen;
• via de derde heb je de optie op de gehele rij, inclusief contentblokken en instellingen, te dupliceren;
• en via de laatste kun je de gehele rij, inclusief content verwijderen.

3 – Extra contentblok aan de kolom toevoegen.

Rij instellingen

Voor de rij zijn er weer erg veel extra instellingen beschikbaar. Al die instellingen worden dan van toepassing op de gehele rij.

Zo zijn er:

• animaties in te stellen;
• de ruimte tussen de verschillende kolomen;
• hoe de kolommen getoond moeten worden (boven, midden, onder);
• hoe breed en hoog de rij moet zijn;
• parallax en/of video achtergrond;
• achtergrondkleur of afbeelding;
• de rij kan tijdelijk uitgeschakeld worden;
• aangepaste CSS;
• en nog veel meer.

Kolom instellingen

Voor de kolom zijn er ook nog extra instellingen mogelijk, zoals:

• marges, links, rechts, boven en onder;
• achtergrondkleur of afbeelding;
• animaties;
• aangepaste CSS.

Contentblok instellingen

Hover je met de muis over een contentblok, bijvoorbeeld het afbeeldingsblok; dan krijg je weer extra mogelijkheden:

Je hebt hier de mogelijkheid om de het blok te verplaatsen, te bewerken, te dupliceren of te verwijderen.

Kies je hier voor bewerken, krijg je alle mogelijkheden die dat contentblok te bieden heeft:

Je hebt bijvoorbeeld de optie om de afbeelding te stylen me een rand, schaduw, als circle, etc. Er is ook de mogelijkheid om een link toe te voegen, extra CSS toe te voegen, de uitlijning in te stellen of een animatie toe te voegen.

Design Opties

Ieder contentblok, rij en kolom, heeft ook nog een extra tabblad “Design Opties” welke te vinden is bij de instellingen van dat element.

Hier heb je dan nog de mogelijkheid om:

• • de marge en padding in te stellen;
  • een rand om het element in te stellen;
  • de randkleur en eventueel een “ronding” aan te geven;

• een achtergrond kleur en/of afbeelding in te stellen;
• met “Simplify controls” zet je de marge, border en padding op eenvoudige instellingen.

(Sommige links hieronder zijn affiliate links)

Visual Composer heeft standaard al erg veel mogelijkheden, maar is ook weer uitbreidbaar met diverse Add-Ons. Die zijn te verkrijgen via de plugin directory van WordPress.org en er zijn er veel te verkrijgen via Codecanyon.net

Met Visual Composer kun je dus op een eenvoudige en snelle manier een pagina indelen en opbouwen. Daarnaast krijg je volledige controle over ieder element wat je aan de pagina toevoegt zonder dat je daarvoor programmeer-kennis nodigt hebt.

Wat ons betreft, is Visual Composer de page builder met een veel belovende lange toekomst. Een “must-have” plugin voor iedereen die een professioneel uitziende pagina wil bouwen, met veel controle over de elementen.

We zullen dan ook nog veel schrijven over deze plugin en extra diep ingaan op de (extra) mogelijkheden.

Op het moment van het schrijven van dit artikel kost de plugin $ 34,- en is te verkrijgen: Visual Composer via Code Canyon

Heb je vragen naar aanleiding van dit artikel, stuur ons dan een mail op: info@qwain.nl of geef een reactie via onderstaand reactie-formulier.

We verzorgen ook trainingen speciaal voor WordPress Design en WPBakery. Voor meer info, bekijk dan deze pagina: WordPress Trainingen.

Op de hoogte blijven van alle WordPress Nieuwtjes, Tips & Tricks… schrijf je dan in voor onze Nieuwsbrief en volg ons op Facebook .

 

Overige Artikelen