Inleiding
In deze handleiding nemen we je door de page builder. Je leert hoe je de page builder gebruikt, evenals de instellingen, elementen, overzichten en overige functies configureert. Voor feedback, vragen of onduidelijkheden kan je contact opnemen met ByTomorrow via de contactgegevens onderaan de handleiding.
Inhoudsopgave
- Page builder introductie
- Pagina instellingen
- Titel, tekst en opmaak toevoegen
- Afbeeldingen en video’s toevoegen
- Overzicht blokken toevoegen
- Lay-out pagina aanpassen
1. Page builder introductie
Op de page builder bouw je de pagina’s die op je platform komen. Zoals het er hier uitziet is niet hoe het er uiteindelijk uit komt te zien. Als je wil bekijken hoe het eruit komt te zien, kan je rechts bovenin op preview page klikken.
De vormgeving van de pagina verander je bij de website-instellingen. Bij page builder bepaal je alleen welke elementen er op je pagina’s komen.
Links bovenin zie je al je pagina’s; hier kan je pagina’s weergeven, bewerken en kopiëren of een nieuwe pagina toevoegen. Je kan hier ook de namen van de pagina’s veranderen. De naam die je hier invult voor de pagina, is ook de naam die in de navigatiebalk op je platform te zien is.
Links staan vier knoppen, deze gebruik je om de pagina’s te maken. De pagina’s richt je in door elementen toe te voegen aan de pagina, deze voeg je toe door op het knopje voor het desbetreffende element te klikken.
Ieder nieuw element dat je toevoegt, komt onder de elementen die er al staan. Als je de positie van het element wil verplaatsen, kan je dit doen door te slepen. Je kan elementen ook weer verwijderen, dat doe je door op de pagina op het element te klikken. Dan verschijnt de deleteknop, waarmee je het element kan verwijderen door erop te klikken.
2. Pagina instellingen
Bij de pagina instellingen kan je als eerste een “page slug” invullen. Dit komt achter de URL van de pagina te staan. Bij de homepage moet dit altijd “index” zijn. Voor de andere pagina’s kan je dit veranderen. Je kan hier ook een andere URL invullen, dan worden mensen die in de navigatiebalk op deze pagina klikken, naar de site van de URL gestuurd. Als je wilt dat deze in een nieuw tabblad geopend wordt, moet je onder options “Open in new tab” aanvinken.
Daarnaast staat er bij options nog “Enable hero carousel”. Hiermee kan je een van de on demand video’s bovenaan je pagina zetten. Dit doe je door onder “Asset” de video te selecteren die je bovenaan de pagina wilt hebben. Let op: je kan hier alleen een video selecteren die bij je on demand video’s staat. Daarna kies je bij “Mode” of je wilt dat de ingestelde achtergrond, de thumbnail of een geüploade foto weergegeven wordt.
Over de video komt een titel en een ondertitel. Deze kan aangepast worden door op de titel te klikken.
Als je bij button op “Enable button” klikt, komt er een klikbare knop op de video. Als mensen op deze knop klikken, worden ze naar de video die gelinkt staat gestuurd. Als dit aangeklikt is, kan je bij “Button text” de tekst die op de knop staat aanpassen.
Als je een schaduw toe wil voegen aan de tekst die over de video staat, klik je bij text shadow op “Enable text shadow”. Hierdoor verschijnt “Text shadow color”, waar je de kleur van de schaduw bij de tekst kunt aanpassen.
3. Titel, tekst en opmaak toevoegen
Titel
Wanneer je op deze knop drukt voeg je een titel en een ondertitel toe aan je pagina. Deze zijn direct aan te passen door erop te klikken. Door op “Configure text” te klikken kan je de titel veranderen, je kan dan de bestaande tekst selecteren en veranderen in de titel van de pagina. Door op “Configure a lead” te klikken kan je de ondertitel aanpassen, je kan dan de bestaande tekst selecteren en veranderen in de ondertitel van de pagina.
Tekst
Wanneer je op deze knop drukt voeg je een tekstvak toe aan je pagina. Deze is direct aan te passen door erop te klikken. In het tekstvak staat een ‘Lorem ipsum’ tekst, als je hierop klikt kan je alle tekst selecteren en weghalen. Daarna kan je de tekst die op je pagina moet komen in het tekstvak plaatsen.
Als het tekstvak geselecteerd is, komt er een menu waarin je de tekst aan kan passen.
Hyperlink
Via dit menu kan je een hyperlink aan een stuk tekst toevoegen. Dit doe je door het stuk tekst te selecteren waarvan je wil dat het naar een andere pagina linkt. Wanneer je op de “insert/edit link” knop drukt, komt er een venster in beeld waarin de link toegevoegd kan worden.
Allereerst voer je de URL in van de pagina waarnaar gelinkt moet worden. Op de tweede regel staat de tekst die je geselecteerd hebt. Bij ‘titel’ kan je een titel aan de link toevoegen, deze verschijnt als mensen met de muis over de gelinkte tekst zweven. Tot slot kies je of de link geopend moet worden in het huidige tabblad of in een nieuw tabblad.
Opmaak tekst
In dit menu kan je de gehele tekst, of delen van de tekst, dikgedrukt of schuingedrukt maken. Ook kan je (delen van) de tekst arceren. Als je op die knop klikt, verschijnen 22 kleuren die gebruikt kunnen worden voor het arceren van tekst. Als je een andere kleur wil gebruiken voor het arceren van de tekst kan dat ook, door rechtsonder op het plaatje van het schilderspalet te drukken. Er opent dan een nieuw venster waarin de kleur veranderd kan worden.
Je kan de kleur veranderen op drie manieren. Als eerste kan je een kleur kiezen door in het vlak en de balk ernaast te slepen met je muis. Als je een specifieke kleur wil hebben, kan je die krijgen door de RGB-kleurcode of de HEX-code in te voeren. Dat zijn de andere twee manieren om de kleur te veranderen.
Nadat je de juiste kleur geselecteerd hebt, druk je rechtsonder op save. Deze kleur wordt nu gebruikt om de tekst te arceren. Ook wordt de kleur toegevoegd aan het venster met arceerkleuren. Hierdoor kan je gemakkelijker steeds dezelfde kleur gebruiken voor het arceren.
Als je de arcering bij een tekst weg wil halen, selecteer je de tekst weer en druk je in het arceer venster op het witte vakje met de rode streep erdoorheen. De arcering is dan weggehaald.
Tekst uitlijnen
Ook kan je in dit menu de uitlijning van de tekst veranderen. Je kan selecteren of de tekst links, in het midden of rechts uitgelijnd moet worden. Ook kan je de tekst laten uitvullen, de tekst komt dan zowel links als rechts tot de rand.
Lettertype veranderen
Tot slot kan je in dit menu een lettertype selecteren. Het lettertype dat je hier kiest overschrijft het lettertype dat je als algemeen font bij het website uiterlijk hebt gekozen. Dat betekent dat de tekst verandert in het lettertype dat je hier selecteert, als je een ander lettertype kiest.
4. Afbeeldingen en video’s toevoegen
In het afbeeldingen menu kan je een video of een afbeelding met tekst toevoegen.
Om een video toe te voegen klik je op “Video blok”, er verschijnt dan een balk op je pagina met daarin de tekst “This will render a video on the normal website with ID 0”. Om een video op de website te krijgen, moet je de ID veranderen naar de ID van een video. Dit doe je door op de balk te klikken. Achter “video_id” kan je vervolgens de ID van je video invullen.
Je video ID vind je in het on demand menu. Daar staat een overzicht van al je video’s, met bij iedere video een URL. De ID van de video is alles achter de ~ tot en met de = in de link.
Dit kan je selecteren en kopiëren om het achter “video_id” te plakken in de page builder.
Als je een afbeelding met tekst toe wil voegen klik je op “Image 1” als je een afbeelding aan de rechterkant wilt, met tekst aan de linkerkant, klik je op “Image 2”, als je een afbeelding aan de linkerkant wilt, met tekst aan de rechterkant, klik op je op “Image 3”. Nadat je dit gedaan hebt, kan je de teksten aan passen door op de tekst te klikken en deze te selecteren. Daarna kan je de tekst plaatsen die je er wilt hebben staan.
Om een afbeelding te uploaden klik je op de afbeelding die er staat, en klik je vervolgens onderin op “Kies bestand”. Je kan dan uit je bestanden een afbeelding uploaden. Deze komt dan op je pagina te staan.
5. Overzicht blokken toevoegen
Now live
Als je deze toevoegt aan je pagina, krijg je een overzicht van alle evenementen die momenteel live zijn.
Live event overzicht
Als je deze toevoegt aan je pagina, wordt er een overzicht weergegeven van alle live events die op je platform staan.
Advertisement overview
Als je deze toevoegt aan je pagina, kun je een advertentie selecteren die vervolgens op je pagina wordt getoond.
On demand video overview
Als je deze toevoegt aan je pagina, wordt er een overzicht weergegeven van alle on demand video’s die op je platform staan. Ook hier kun je een tag toevoegen. Alle video’s met de gekozen tag worden vervolgens weergeven.
Tag overview
Als je deze toevoegt aan je pagina, wordt er een overzicht weergegeven van alle video’s met een bepaalde tag die op je platform staan. Wanneer je een on demand video uploadt, kan je een tag aan deze video toevoegen.
Als je een tag overview op je pagina geplaatst hebt, kan je erop klikken. Onder in het blok verschijnt dan een regel met een knop waarop “Select a tag” staat, als je daarop klikt verschijnt een dropdown menu. In dit menu kan je de tag selecteren waarvan je wil dat de video’s getoond worden.
Daarnaast heb je de optie om “Enable carrousel” aan- of uitvinken. Als je dit aanzet, worden de video’s in een carrousel getoond. Als je meer dan vier video’s hebt, komen ze één voor één langs. Mits je meer dan vier video’s hebt met een bepaalde tag, komen deze op de volgende regel. Ingeval je dit uitzet blijven de video’s staan.
Dynamic overview
Als je deze toevoegt aan je pagina, kan je zelf video’s uit je on demand video’s kiezen die getoond zullen worden.
Zodra je een dynamic overview op je pagina geplaatst hebt, kan je erop klikken. Onder in het blok verschijnt dan een menu, met daarin een menu waarin je kan typen. In dit menu kan je de on demand video’s selecteren die je wil tonen. Typ de asset die je zoekt en klik op de video. Nadat je de video geselecteerd hebt, klik je op “Add asset”. De video verschijnt dan in de dynamic overview. Onder in het menu verschijnt dan de titel van de video en een remove-knop om de video weer weg te halen.
Ook staat er een balkje waarin een datum ingevuld kan worden, de datum die hier ingevuld wordt, is de datum waarop de overview live komt.
Daarnaast heb je de optie om “Enable carrousel” aan- of uitvinken. Als je dit aanzet, worden de video’s in een carrousel getoond. Als je meer dan vier video’s hebt, komen ze één voor één langs. Mits je meer dan vier video’s hebt met een bepaalde tag, komen deze op de volgende regel. Ingeval je dit uitzet blijven de video’s staan.
6. Lay-out pagina aanpassen
Binnen het platform kun je eenvoudig de opbouw van je pagina aanpassen door elementen te slepen en neer te zetten. Alle toegevoegde onderdelen, zoals video’s, foto’s, blokken, tekstvakken en titels, zijn flexibel te verplaatsen.
Door een element met de muis vast te pakken en naar de gewenste positie te slepen, bepaal je zelf de volgorde waarin de inhoud op de pagina wordt weergegeven. Tijdens het slepen zie je direct waar het element geplaatst zal worden, waardoor aanpassen snel en overzichtelijk blijft.
Deze manier van werken maakt het mogelijk om zonder technische kennis:
- De structuur van je pagina te wijzigen
- Inhoud logisch te ordenen
- De nadruk te leggen op belangrijke onderdelen
Met het slepen van elementen pas je de volgorde van je pagina eenvoudig aan en creëer je in korte tijd een overzichtelijke en aantrekkelijke layout.
Contact opnemen
Heb je feedback, vragen of onduidelijkheden? Of wil je weten hoe je jouw JUMP-pagina naar het volgende niveau kan brengen? Mail dan naar p.vanmil@bytomorrow.nl
Of neem contact met ons op via ons contactformulier: https://bytomorrow.nl/#contactform