Voor deze uitleg gebruiken we WP bakery met de toevoegingen van het Salient thema. Het kan dus zijn dat de instellingen/opties iets verschillen met die van jouw gekozen thema.
Als je een pagina opent met de WP bakery plugin actief krijg je het volgende scherm te zien:
Zoals je ziet is hier de pagebuilder nog niet geactiveerd, dit doe je door op de blauwe knop met “backend editor” te klikken. Je krijgt dan dit scherm te zien:
Je kan dan vervolgens kiezen tussen 3 opties:
Element toevoegen: Als je hierop klikt opent er een popup met daarin alle elementen die al zijn voorgeprogrammeerd
Add Text block: Deze knop voegt een standaard rij met daarin een tekstblok toe aan je pagina
Add template: Als je hierop klikt opent er een popup met daarin, als jouw thema dat heeft, een aantal voorgeprogrammeerde template pagina’s. Deze pagina’s zijn dus al voorgebouwd en kun je inladen om later aan te passen.
Kies “element toevoegen” en klik vervolgens op het blokje met “Rij” daarin. Dit is de basis van je pagina’s. Een rij is als het ware de container waar je content dan vervolgens weer in zit. Een pagina bestaat dus uit meerdere rijen onder elkaar. Nadat je een rij hebt toegevoegd zie je het volgende (hover over de plusjes om de uitleg te bekijken):
Bij het opbouwen van een rij begin je na het toevoegen van de rij eerst met het aanpassen van de rij instellingen. In deze instellingen kan je onder andere een achtergrondfoto instellen of bepalen hoeveel ruimte er aan de onder en bovenkant zit. Klik op het potloodje van de rij om deze instellingen te openen.
De rij instellingen bestaan uit meerdere tabjes, de belangrijkste hiervan is het tabje “general” Hier stel je de generale opties van je rij. Hieronder leg ik de belangrijkste functies uit.
Type: Dit bepaald hoe de content in jouw rij wordt weergegeven:
Equal height: Hiermee bepaal je of iedere kolom in de rij even hoog moet zijn of niet. Vervolgens kan je hier instellen hoe de content in de kolommen moet uitlijnen met elkaar.
Background image: Klik op het groene plusje om een achtergrondafbeelding te kiezen.
Background color: Klik op de color picker of voer een hexcode in om een achtergrondkleur in te stellen
Video Background: Activeer om een video als achtergrond in te stellen.
Padding top/bottom: Hiermee bepaal je hoeveel ruimte de rij heeft aan de onder en bovenkant. Dit is de ruimte aan de binnenkant van de rij, de rij wordt dus hoger. Margin bepaalt de ruimte aan de buitenkant van de rij, de rij wordt dus niet hoger maar voegt een marge toe aan de zijkant van de rij.
Extra class name: Vul hier de naam in van een extra class, dit kan handig zijn als je later met CSS de styling van jouw row nog aan wil passen.
Row ID: Hiermee bepaal je de ID van je rij, dit kan je later weer gebruiken in een button om naar deze rij te navigeren. Een ID moet altijd uniek zijn.
Disable row: Met deze checkbox kan je ervoor kiezen om de rij tijdelijk uit te schakelen.
Na het instellen van de rij instellingen ga je verder met de content in de rij. Dit is voor iedereen verschillend, in het volgende voorbeeld kiezen we voor een contentblok met links een blok tekst en rechts een afbeelding. In de pagebuilder ziet het er zo uit:
Aan de “voorkant” van de website ziet het er zo uit, dit kan je bekijken door op “voorbeeld” te klikken in de sidebar van WordPress:
Om het blok wat aantrekkelijker te maken kan je het gaan stylen door middel van het aanpassen van de rij instellingen. Zie hieronder een voorbeeld van hoe dezelfde blokken eruit kunnen zien na wat aanpassingen in de rij instellingen:
Tip #1
Zoals je ziet hebben we hierboven de rij verdeeld in 2 kolommen. Dit doe je door links bovenaan de rij over de ‘3 streepjes onder elkaar’ te hoveren. Hier staan staan al standaard een aantal kolom verdelingen voor je klaar. WP bakery houdt standaard een 12 koloms verdeling aan. Zit jouw gewenste kolom verdeling er niet tussen? Als je op “aangepast” klikt kan je ook nog zelf een kolom verdeling instellen.
Alle elementen inclusief rijen kan je slepen door op het element te gaan staan en dan te klikken, houdt de klik vast en sleep het element of de rij naar de gewenste plek en laat hem vervolgens weer los.
WP bakery heeft veel verschillende standaard elementen. Een groot deel van deze elementen worden alleen in hele specifieke gevallen gebruikt. Ook kan het zijn dat jouw thema nieuwe elementen toevoegt aan WP bakery. Er is een standaard groep elementen die in de industrie veel gebruikt worden en als de standaard worden beschouwt voor het opbouwen van pagina’s.
Tekstblok: Dit blok is een soort mini Word in de page builder. In dit blok kan je bijna alle standaard functionaliteiten die Word ook heeft zoals tekst bold maken, lijsten toevoegen of een titel een heading styling geven.
Enkele afbeelding: Dit element zorgt ervoor dat je een afbeelding kan toevoegen aan jouw pagina. Je kan hier kiezen tussen een afbeeldingen selecteren uit jouw media library of een nieuwe afbeelding uploaden.
Divider: Met de divider kan je een witruimte toevoegen aan je pagina. Je kan zelf bepalen hoe hoog deze witruimte is door het aantal pixels in te voeren in het invulveld.
Button: Een goede manier om gebruikers door je site te laten navigeren is door middel van buttons. Met het button element kan je een knop toevoegen aan je website. Hover over de plusjes om te kijken wat de velden doen.
Formaat: Hiermee bepaal je het formaat van je button.
Link URL: Hier bepaal je waar de button naar toe moet linken, dit kan naar zowel een interne als externe URL.
Tekst: Voer hier de tekst voor de button in.
Open link in new tab?: Kies hiervoor als je wil dat de link in nieuw tabblad wordt geopend. Dit kan handig zijn voor externe links, hiermee voorkom je dan dat de gebruiker van jouw site af is na het klikken van de button.
Style: Kies hier uit een aantal voorgeprogrammeerde stylingen van de button. Dit kan verschillen per thema.
Button color: Stel hier de achtergrondkleur van de button in, deze is standaard ingesteld op de hoofdkleur van je thema.
Button color override: Hiermee kan je de hoofdkleur vanuit het thema overschrijven en kiezen voor een een andere achtergrond kleur.
Button text color override: Hiermee kan je de standaard tekstkleur van het thema overschrijven.
Css animations: Selecteer hier een animatie voor jouw button.
Icon library: Hier kan je een icon kiezen voor in je button, denk hierbij bijvoorbeeld aan een pijltje.
Margin: Stel hier de ruimtes tussen de button en de elementen rondom de button in. Dit doe je altijd in het aantal pixels. Voorbeeld: 20px.
Extra class name: Hier kan je een extra class naam toevoegen aan jouw button. Deze kan je vervolgens weer gebruiken om in combinatie met css de styling van de button verder aan te passen.
Custom HTML / JS: Dit element kan je gebruiken als je al wat meer verstand heb van code. Hiermee kan je stukjes eigen HTML en Javascript toevoegen aan je website. Heb je zelf geen verstand van code? Dan zal je dit blok niet vaak gebruiken.
Zodra jij jouw pagina helemaal naar wens heb opgebouwd kan je deze publiceren door in de sidebar aan de rechterkant op “Publiceren” te klikken. Ben je nog niet klaar of wil je tussendoor opslaan zonder te publiceren? Dan zijn er 3 opties mogelijk:
Een pagina opbouwen in WP bakery
€ 149,99
