Websites & Trechters: Schermbreedtepreview in de bouwer

Met de schermbreedtepreview bekijk je hoe je trechter- en websitepagina’s eruitzien op verschillende schermformaten in de bouwer van Voluit Suite. Je voert een exacte breedte in pixels in, binnen het bereik van de geselecteerde desktop-, tablet- of mobiele weergave. Alleen het werkvlak in de bouwer verandert: je opgeslagen opmaak en gepubliceerde pagina blijven ongewijzigd.

Wat is de schermbreedtepreview?

Met de schermbreedtepreview stel je een exacte pixelbreedte in voor het werkvlak in de trechter- en websitebouwer.

Zo test je je ontwerp op verschillende breedtes, in plaats van alleen op één vooraf ingestelde breedte. Je blijft daarbij binnen het geselecteerde responsieve breekpunt: het schermbreedtebereik voor desktop, tablet of mobiel.

De aangepaste breedte verandert alleen de preview van het werkvlak. De geselecteerde apparaatweergave bepaalt nog steeds welke responsieve opmaak je bewerkt en opslaat.

Voorwaarden en beperkingen

De schermbreedtepreview is bedoeld om binnen de bouwer te testen hoe je pagina zich aanpast aan verschillende schermbreedtes. Houd rekening met het verschil tussen een aangepaste preview en wijzigingen in de responsieve opmaak.

Dit is belangrijk om te weten:

• De schermbreedtepreview verandert alleen de preview van het werkvlak in de bouwer.
• Je maakt hiermee geen nieuw responsief breekpunt aan.
• De geselecteerde weergave Desktop (desktop), Tablet (tablet) of Mobile (mobiel) bepaalt welke responsieve opmaak je bewerkt en opslaat.
• Aangepaste previewbreedtes gelden alleen tijdens je huidige sessie in de bouwer.
• De breedte wordt teruggezet als je de bouwer opnieuw laadt of naar een andere pagina gaat.
• Previewbreedtes worden niet opgeslagen in de paginagegevens.
• Previewbreedtes veranderen de gepubliceerde pagina niet.
• Previewbreedtes maken geen aparte responsieve opmaak aan en passen die ook niet toe.
• De ingevoerde breedte moet binnen het ondersteunde bereik van de geselecteerde apparaatweergave vallen.

Ondersteunde schermbreedtes

Elke apparaatweergave heeft een eigen bereik voor de previewbreedte. Selecteer eerst de juiste weergave en voer daarna een aangepaste breedte in.

Voer je een breedte in die buiten het bereik van de geselecteerde weergave valt? Dan verschijnt er een validatiemelding bij het invoerveld.

Zo gebruik je de schermbreedtepreview

Je vindt de schermbreedtepreview in de trechter- en websitebouwer. Open de pagina die je wilt controleren, selecteer de juiste apparaatweergave en voer de gewenste schermbreedte in.

Stap 1: Open een trechter- of websitepagina

1. Ga in je account naar Sites (sites) in het linkermenu.
2. Selecteer Trechters (Funnels) of Websites (websites).
3. Open de trechter of website die je wilt bewerken.
4. Open de betreffende stap of pagina in de bouwer.

Stap 2: Selecteer een apparaatweergave

Kies het responsieve breekpunt dat je wilt controleren:

• Desktop (desktop)
• Tablet (tablet)
• Mobile (mobiel)

De geselecteerde apparaatweergave bepaalt welke responsieve opmaak actief is terwijl je de pagina bewerkt.

Stap 3: Voer een aangepaste schermbreedte in

Naast de knoppen waarmee je tussen apparaatweergaven wisselt, vind je het veld Device Width (schermbreedte).

Voer een breedte in pixels in die binnen het ondersteunde bereik van de geselecteerde apparaatweergave valt.

Heb je bijvoorbeeld de tabletweergave geselecteerd? Voer dan een waarde tussen 768 en 1024 px in.

Stap 4: Pas de previewbreedte toe

Pas de ingevoerde breedte op een van deze manieren toe:

• Klik op Apply (toepassen).
• Druk op Enter.

Het werkvlak krijgt de opgegeven breedte. Je blijft daarbij binnen het geselecteerde responsieve breekpunt.

Stap 5: Controleer de pagina-indeling

Controleer hoe je secties, rijen, kolommen, elementen, tussenruimtes en inhoud eruitzien op de geselecteerde breedte.

Is het werkvlak breder dan de beschikbare ruimte in de bouwer? Scrol dan horizontaal om de volledige indeling te bekijken.

Stap 6: Test andere breedtes

Voer andere ondersteunde breedtes in om te controleren hoe de indeling zich binnen het geselecteerde breekpunt aanpast.

Wil je een ander breekpunt testen? Schakel dan over naar de desktop-, tablet- of mobiele weergave en voer een breedte in die bij die weergave past.

Stap 7: Zet de preview terug

Gebruik de optie om de preview te resetten. Het werkvlak keert dan terug naar de standaardbreedte van de actieve apparaatweergave.

Dit verandert niets aan de responsieve opmaak die je al hebt bewerkt of opgeslagen.

Rij- en kolombreedtes aanpassen voor desktop en tablet

In de trechter- en websitebouwer kun je rij- en kolombreedtes apart instellen voor de desktop- en tabletweergave. Standaard neemt de tabletweergave de desktopbreedtes over, totdat je ze aanpast.

Zo pas je rij- en kolombreedtes aan

1. Open een trechter- of websitepagina in de bouwer.
2. Selecteer de desktop- of tabletweergave met de knoppen voor de apparaatweergave.

3. Selecteer een rij en pas de breedte aan via de instelling Width (breedte).

   

4. Wil je in de tabletweergave de breedtes van naast elkaar liggende kolommen aanpassen? Versleep dan de greep tussen de kolommen.

   

5. Wissel tussen de desktop- en tabletweergave om je indelingen te controleren. Sla daarna je wijzigingen op.

Let op: wijzigingen in de tabletbreedtes hebben geen invloed op de desktopindeling. De ingestelde tabletbreedtes blijven behouden nadat je de pagina opslaat en de bouwer opnieuw laadt.

Belangrijke aandachtspunten:

• Breedtes overnemen: de tabletweergave neemt de rij- en kolombreedtes van de desktopweergave over totdat je ze aanpast.
• Rijbreedte voor tablet terugzetten: stel de rijbreedte voor tablet in op dezelfde waarde als voor desktop. Daarmee verwijder je de afwijkende instelling en neemt de tabletweergave de desktopbreedte weer over.
• Mobiele weergave: rijen blijven over de volledige breedte staan. De instelling voor de rijbreedte is verborgen en kolommen worden onder elkaar geplaatst.
• Bestaande pagina’s: pagina’s zonder apart ingestelde tabletbreedtes blijven ongewijzigd. Je hoeft ze niet over te zetten of aan te passen.

Veelgestelde vragen

V: Maak ik een nieuw breekpunt aan als ik een aangepaste schermbreedte invoer?

Antwoord: Nee. De schermbreedte verandert alleen de preview van het werkvlak. Desktop, tablet en mobiel blijven de responsieve breekpunten waarmee je de opmaak bewerkt en opslaat.

V: Heeft de aangepaste previewbreedte invloed op mijn gepubliceerde pagina?

Antwoord: Nee. Previewbreedtes worden niet opgeslagen in de paginagegevens. Ze hebben geen invloed op de gepubliceerde pagina of de opmaak die daarvoor wordt gegenereerd.

V: Wordt mijn aangepaste schermbreedte bewaard voor de volgende keer dat ik de bouwer open?

Antwoord: Nee. Aangepaste previewbreedtes gelden alleen voor je huidige sessie. Ze worden teruggezet als je de bouwer opnieuw laadt of naar een andere pagina gaat.

V: Wat gebeurt er als ik een breedte invoer die buiten het bereik van het geselecteerde breekpunt valt?

Antwoord: De bouwer toont een validatiemelding bij het invoerveld. Voer een breedte in die binnen het ondersteunde bereik van de geselecteerde apparaatweergave valt.

V: Kan ik een breedte bekijken die groter is dan de beschikbare ruimte in de bouwer?

Antwoord: Ja. Als het werkvlak breder is dan de beschikbare ruimte, kun je horizontaal scrollen om de volledige preview te bekijken.

V: Verandert de opmaak die ik bewerk als ik de schermbreedte aanpas?

Antwoord: Nee. De geselecteerde desktop-, tablet- of mobiele weergave bepaalt welke responsieve opmaak je bewerkt en opslaat.