Websites & Trechters: De vernieuwde rechterzijbalk in de bouwer

In dit artikel lees je over de vernieuwde rechterzijbalk in de trechter- en websitebouwer van Voluit Suite. De instellingen voor elementen zijn verdeeld over drie tabbladen: Algemeen (General), Stijlen (Styles) en Animaties (Animations). Zo vind je sneller de instellingen die je nodig hebt. Je ontdekt wat je in elk tabblad kunt aanpassen en hoe inklapbare panelen en onthouden tab- en paneelstatussen je helpen om vlotter te werken.

De voordelen van de vernieuwde zijbalk

De vernieuwde indeling maakt het aanpassen van de stijl en lay-out van elementen overzichtelijker.

• Sneller bij instellingen: vind instellingen voor inhoud, stijl en animaties in aparte tabbladen.
• Een opgeruimde werkruimte: inklapbare panelen groeperen instellingen, zodat je alleen ziet wat je nodig hebt.
• Een consistente ervaring: de zijbalk onthoudt tijdens je bewerksessie welk tabblad en welke panelen je het laatst hebt gebruikt.
• Een moderne, rustige interface: aangepaste witruimte, typografie en pictogrammen zorgen voor een overzichtelijkere weergave.
• Prettiger werken: de duidelijke indeling helpt je sneller te werken, of je nu net begint of al ervaring hebt met de bouwer.

De tabbladen in de vernieuwde zijbalk

De instellingen voor elementen staan in drie tabbladen die zich aanpassen aan het geselecteerde element. Wissel tussen de tabbladen om inhoud, opmaak en animaties aan te passen zonder door panelen te hoeven zoeken die je niet nodig hebt.

1. Tabblad Algemeen

In het tabblad Algemeen pas je de inhoud en het gedrag van een element aan. Bovenaan staat het veld Elementnaam (Element Name), waarmee je een laag een andere naam geeft. Je kunt bijvoorbeeld 'Kop' wijzigen in 'Hoofdtitel' om je lagen overzichtelijker te ordenen.

Daaronder vind je de Elementopties (Element Options). Deze verschillen per element en kunnen bijvoorbeeld tekstvelden voor koppen, URL-velden voor knoppen en links, alternatieve tekst voor afbeeldingen en labels voor formuliervelden bevatten. Bij Elementacties (Element Actions) stel je interacties in, zoals Klikken (On click), Navigeren naar URL (Navigate to URL), Formulier verzenden (Submit form) of Lightbox openen (Open lightbox).

Verderop staan de typografie-instellingen. Je kiest het lettertype (Font Family), past de tekengrootte (Font Size) en het lettergewicht (Font Weight) aan en stelt de dekking (Opacity) in. Ook kun je de regelhoogte (Line Height), tekenafstand (Letter Spacing), tekstomzetting (Text Transform, bijvoorbeeld hoofdletters of kleine letters), rotatie en scheefstand aanpassen. Met de kleurinstellingen (Color Controls) kies je kleuren voor de achtergrond, tekst, links en pictogrammen via de kleurenkiezer of een eigen hexadecimale waarde.

2. Tabblad Stijlen

In het tabblad Stijlen pas je de lay-out en weergave van een element aan voor verschillende apparaatformaten. Met Marge (Margin) en Opvulling (Padding) regel je de ruimte buiten en binnen het element. Bij Rand (Border) stel je de breedte, stijl (doorgetrokken, gestreept of gestippeld), hoekradius en kleur in.

Met Uitlijning (Align) pas je de uitlijning van tekst of objecten aan. In het paneel Zichtbaarheid (Visibility) kun je het element afzonderlijk tonen of verbergen op desktop, tablet of mobiel. Voor tekstelementen kun je in het paneel Tekstschaduw (Text Shadow) een schaduw instellen met horizontale en verticale verschuiving, vervaging en kleur. Onderaan staan Aangepaste klasse (Custom Class) en CSS-selector (CSS Selector), waarmee je het element kunt voorzien van een kenmerk voor eigen opmaak of scripts.

3. Tabblad Animaties

In het tabblad Animaties stel je bewegingseffecten in voor ondersteunde elementen. De beschikbare opties zijn afhankelijk van het element dat je selecteert.

Voor ondersteunde elementen kun je het volgende instellen:

• Animatie bij binnenkomst (Entrance Animation): laat een element bewegen wanneer het in beeld komt.
• Oneindige herhaling (Infinite Loop): laat ondersteunde animaties doorlopend herhalen.
• Animatie bij aanwijzen (Hover Animation): selecteer een knop (Button) om ingebouwde effecten bij aanwijzen te bekijken en toe te passen.

Selecteer voor een animatie bij aanwijzen een effect en kies daarna Animatie aanpassen (Adjust Animation) om instellingen aan te passen, zoals Duur (Duration), Vertraging (Delay), Versnellingscurve (Easing) en opties die specifiek zijn voor het effect.

Afhankelijk van het gekozen effect kun je ook de schaal (Scale), hoek (Angle), afstand (Distance), vulkleur (Fill Color), randkleur (Border Color), randdikte (Border Thickness), vervaging (Blur) of spreiding (Spread) aanpassen.

Let op: de beschikbare instellingen in de zijbalk hangen af van het geselecteerde element. Knoppen kunnen bijvoorbeeld opties voor animaties bij aanwijzen bevatten. Andere elementen kunnen andere opties voor animatie, opmaak of validatie tonen.

Inklapbare panelen

De instellingen binnen elk tabblad zijn gegroepeerd in inklapbare panelen. Zo houd je de interface overzichtelijk.

• Je kunt panelen afzonderlijk openen of sluiten.
• De status van panelen blijft behouden terwijl je de bewerksessie voortzet.
• Minder gebruikte of geavanceerde instellingen kun je dicht laten voor een rustigere weergave.

Dat geeft je meer overzicht, vooral wanneer je aan uitgebreide pagina's werkt.

De tab- en paneelstatus blijft behouden

De vernieuwde zijbalk onthoudt tijdens je bewerksessie welke tabbladen en panelen je gebruikt.

• Tabblad onthouden: het laatst gebruikte tabblad blijft geselecteerd wanneer je tussen elementen wisselt.
• Paneelstatus onthouden: ingeklapte of geopende panelen behouden hun status wanneer je naar een ander element gaat.
• Nieuwe elementen: wanneer je een nieuw element toevoegt, zijn alle panelen standaard geopend.

Je hoeft hierdoor panelen en tabbladen minder vaak opnieuw te openen tijdens het ontwerpen.

Verbeteringen aan de interface en vormgeving

De vernieuwde zijbalk heeft een rustige, moderne vormgeving die aansluit op de andere verbeteringen in Voluit Suite.

• Minder visuele drukte door een verbeterde indeling en meer overzicht.
• Een consistente stijl en tussenruimte tussen bedieningselementen.
• Duidelijkere typografie en eenvoudigere pictogrammen.
• Een uniforme vormgeving in de hele bouwer.

Deze aanpassingen helpen je om je aandacht bij het ontwerpen van trechters en websites te houden.

Veelgestelde vragen

V: Heeft deze update invloed op bestaande trechters of de opmaak van mijn website?

Antwoord: Nee. Bestaande ontwerpen blijven ongewijzigd. Alleen de bewerkingsinterface is aangepast.

V: Verandert er iets aan mijn eerdere instellingen?

Antwoord: Nee. Alleen de indeling van de zijbalk verandert. De instellingen van je elementen blijven behouden.

V: Heeft de nieuwe zijbalk invloed op de prestaties?

Antwoord: Ja. De indeling is geoptimaliseerd voor soepelere navigatie en snellere aanpassingen.

V: Verschillen de animatie-instellingen per geselecteerd element?

Antwoord: Ja. De beschikbare opties hangen af van het geselecteerde element. Knoppen kunnen bijvoorbeeld opties voor animaties bij aanwijzen bevatten, naast ondersteunde animaties bij binnenkomst en oneindige herhaling.