Visual Composer dé WordPress page builder 

Door
in Blog

Visual Composer installeren wij op zo goed als alle websites die wij ontwikkelen. Visual Composer is namelijk dé uitkomst om simpel je WordPress website op te maken met tekst, afbeeldingen, video’s en eigenlijk alles wat je maar wilt. Met Visual Composer hoef je niet je opmaak met stortcodes of CSS te coderen, maar dat kan gewoon door ‘drag en drop’.

Wat is Visual Composer

Visual Composer is de populairste WordPress page builder plug-in. Het heeft een makkelijk te gebruiken drag en drop systeem waarmee je gemakkelijk een lay-out kunt opmaken voor elke pagina. Met drag en drop geeft het systeem de gebruiker de mogelijkheid om elementen te verslepen en zo op de goede plek in de website te zetten. Het gave hieraan is dat je helemaal geen codering vaardigheden nodig hebt. Dat betekent dat iedereen Visual Composer kan gebruiken!

Visual Composer biedt twee soorten editors; front-end en backend editor. Met deze editors kun je op twee verschillende manieren een pagina opbouwen. Hieronder lichten we ze toe.

Front-end editor

Met de front-end editor kan iedereen gemakkelijk een pagina opbouwen of aanpassingen doen aan zijn of haar website. De editor biedt namelijk makkelijke opties om elementen te bewerken in je webpagina. Deze editor maakt gebruik van het drag en drop. Een voorbeeld van hoe de front-end editor eruit ziet, is hieronder weergegeven.

Afbeelding1

Een ander voordeel van de front-end editor is dat je jouw website op verschillende soorten apparaten kunt bekijken. Je kunt bijvoorbeeld de website bekijken als hoe hij op je mobiel of tablet wordt weergegeven. Hoe dat werkt is hieronder te zien.

 

Afbeelding2

 

Backend editor

De backend editor is de editor waar wij altijd gebruik van maken. Deze zit anders in elkaar dan de fronteditor. Als je website door ons is gemaakt in WordPress, kun je inloggen in de backend van de website. Als je vervolgens je pagina gaat bewerken, krijg je Visual Composer te zien.

Het voordeel van de backend editor is dat het overzichtelijker is en het gemakkelijker werkt dan de front-end editor. Hierdoor kun je veel sneller aanpassingen maken op de website. Over het algemeen wordt de backend editor ook vaker gebruikt dan de front-end editor. Een voorbeeld van de backend editor is hieronder te zien.

 

Afbeelding3

 

Content elements

Visual Composer komt samen met meer dan veertig content elements die je direct kunt gebruiken om je pagina mee te vullen. Content elements zijn ‘blokken’ met content voor je website. Bijvoorbeeld een Facebook feed of een contactformulier. Ook is het mogelijk om zelf content elements te maken. Hiervoor heb je echter wel verstand van coderen nodig.  Als wij je website ontwikkelen, maken wij de content elements voor jullie op maat.

Als je niet zelf heel je webpagina wilt opbouwen kun je er altijd voor kiezen om een van de bestaande templates te gebruiken. Als je ervoor kiest om een van de templates van Visual Composer te gebruiken voor je webpagina hoef je niet zelf meer een indeling te maken met content elements, dit is dan al allemaal voor je gedaan. Er zijn momenteel meer dan zestig templates om uit te kiezen. Als jouw perfecte template er niet bij zit kun je altijd een template aanpassen of er zelf een maken.

Via het plusje op de pagina, kom je bij deze content elements terecht. Een voorbeeld van opties die je kunt kiezen, zie je hieronder.

 

Afbeelding5

 

Skin builder

Met de design opties van Visual Composer is het gemakkelijk de content elements in de pagina kleur te geven of te veranderen. Ook is er de mogelijkheid om Custom CSS toe te voegen zodat je nog meer een eigen twist kunt geven aan de content elements. Als je meerdere keren dezelfde stijl wilt toevoegen aan verschillende content elements is de element preset een goede optie. Met de element preset kun je een standaard stijl geven voor alle content elements. Het voordeel hieraan is dat je maar één keer je gewenste stijl ingeeft in plaats van dit elke keer opnieuw te doen bij elk content element.

Hoe werkt het?

De afbeelding hieronder laat zien wat je allemaal kunt instellen bij een content element. Stel je hebt een button opgemaakt en wilt deze vaker gebruiken in de website. Dan zou je ervoor kunnen kiezen deze button op te slaan als preset voor toekomstige nieuwe buttons. Dit kun je doen door het button element te bewerken en op instellingen te klikken. Vervolgens klik je op “save as preset”. Daarna geef je je preset een naam en ben je klaar!

 

Afbeelding4

 

Visual Composer is voor iedereen

Visual Composer is voor iedereen. Dus zowel voor de echte nerds als de gebruikers van de website. Voor gebruikers is het namelijk erg gemakkelijk om een website te kunnen ontwikkelen en aanpassen.  Voor developers biedt het ook super mooie opties om Custom content elements te maken voor zijn of haar klanten.

Recente berichten