Hoe Page Builder Sandwich te gebruiken

Geschreven door

in

,

Page Builder Sandwich is niet zoals je typische page builder, het is ongecompliceerd en eenvoudig te gebruiken.

Je kunt de onderstaande video bekijken voor een korte rondleiding.

Waar is de editor?

Maak eerst een nieuwe pagina, bericht of CPT aan. Bezoek vervolgens je nieuwe bericht of een bestaand bericht in je frontend. PBS is 100% frontend, je hoeft niet te knutselen in de backend.

Er zou een knop “Page Builder Sandwich” bovenaan je pagina moeten staan (op je beheerbalk), klik daarop om te beginnen met bewerken. Je zou het tekstbalkgedeelte vanaf de bovenkant moeten zien verschijnen en het paneel voor het toevoegen van elementen vanaf de zijkant. Het inhoudsgebied van je thema is nu je editor!

Je kunt met PBS alleen losse pagina’s bewerken. Je kunt geen lijst met blogberichten of een 404-pagina bewerken, aangezien die door je thema worden gemaakt. Berichten, pagina’s en custom post types zijn prima.

Je inhoud bewerken

En nu komt het geweldige deel.. zodra je in de frontend en in de editor bent, klik je op een willekeurige tekst in je inhoud of klik je in je inhoudsgebied en begin je met typen! In tegenstelling tot andere page builders stelt PBS je in staat om inhoud direct te bewerken zonder dat je door pop-upvensters hoeft te navigeren.

Je inhoud opmaken / Dingen er mooi uit laten zien

dcb1615380 file 9OtagMFi2c

Tijdens het bewerken wordt het gebied aan de bovenkant de Tekstopmaakbalk genoemd. Deze balk bevat alle opmaakhulpmiddelen die je zult gebruiken voor het stylen van tekst, zoals: kleuren, vetgedrukt, cursief, uitlijningen, links toevoegen, opsommingstekens en meer. Beweeg over elke knop om te ontdekken wat het hulpmiddel doet.

Elementen toevoegen

ecfd309bb2 file yDqiNEv73s

Beweeg je muis over de knop Elementen toevoegen linksboven in het scherm om het Element toevoegen-paneel weer te geven. Je kunt ook gewoon je muis naar de linkerkant van het scherm bewegen om het te laten verschijnen.

Om een element in te voegen, houd je de muisknop op een element ingedrukt en sleep je het naar je inhoudsgebied. Het gebied waar het element geplaatst zou worden, wordt gemarkeerd. Laat je muisknop los om het element te plaatsen.

Elementen stylen en aanpassen

Beweeg je muis over elk gewenst element in je inhoud en er verschijnen omlijningen en werkbalken overheen.

0046713cb7 file YU6nUCc7jYJe kunt met je muis over de randen van de omlijningen bewegen om de marges tussen elementen te vergroten/verkleinen.

Je kunt ook op een knop op de werkbalk klikken om snelle acties op het element uit te voeren. Door op het tandwiel-icoon op de werkbalk te klikken, open je de Eigenschappeninspector die meer opties bevat.

5c220b4ac9 file Odem5RLPok

De Eigenschappeninspector

3e7e48b754 file INy1v5z9Oz

De eigenschappeninspector geeft je meer controle over het uiterlijk van je elementen. Je kunt veel zaken toevoegen zoals schaduwen, animaties, kaartkleuren wijzigen, randstraal (border-radius) en nog veel meer.

Je hebt ook toegang tot de eigenschappen van de bovenliggende elementen (parents). Als je bijvoorbeeld een afbeelding in een kolom hebt geplaatst en de eigenschappeninspector hebt geopend, kun je toegang krijgen tot de eigenschappen van de afbeelding, de kolom waarin deze zich bevindt en de rij waarin de kolom zich bevindt.

De eigenschappeninspector bevat veel verschillende instellingen voor verschillende elementen, dus zorg ervoor dat je ze allemaal bekijkt.

Shortcodes gebruiken

Page Builder Sandwich toont je daadwerkelijke shortcodes in de frontend, en je kunt ze ook gemakkelijk bewerken!

edee730340 file TqfWB9yv3y

Als je je shortcodes uit je hoofd kent, kun je shortcodes invoegen door ze rechtstreeks in je inhoud te typen. Maar als je ze niet allemaal uit je hoofd kent (wie doet dat nou?), toont de inspector alle shortcodes die beschikbaar zijn op je site. Sleep een Shortcode-knop vanuit de inspector naar je inhoudsgebied en zoek degene die je wilt invoegen, klik erop om deze in te voegen.

Shortcodes worden omgezet in werkelijke inhoud in de frontend; om ze te bewerken, kun je ze selecteren en hun attributen in de inspector bekijken. Of voor meer controle kun je dubbelklikken op de shortcode om deze in onbewerkte vorm (raw) te bewerken. Nadat je je bewerkingen hebt uitgevoerd, wordt je shortcode bijgewerkt om de wijzigingen weer te geven.

Je inhoud opnieuw rangschikken

Je kunt alles aanklikken en verslepen en overal naartoe verplaatsen met PBS. Wanneer je iets sleept, beweeg het dan over een ander element op de pagina; je kunt ze zowel boven als onder andere inhoud verplaatsen.

Je werk opslaan

ae0cf6f413 file

Zodra je tevreden bent met je ontwerp, klik je gewoon op de knop Opslaan linksboven op je pagina. Dat is alles!