Flex Editor
Laatst aangepast: 12-04-2024De Flex-editor is een product waarmee je veel elementen van je platform kunt customizen. Denk hierbij bijvoorbeeld aan het wijzigen van de volgorde, het aanpassen van kleuren, kiezen van een andere variant van een bestaand element, onzichtbaar maken van gedeeltes van de website en het toevoegen van nieuwe mogelijkheden aan de pagina's.
Om de Flex Editor te kunnen gebruiken wordt hij als addendum toegevoegd op je licentie. Vervolgens kun je de editor gebruiken op elke site onder jouw licentie. Graag aan de slag? Hiervoor kun je contact opnemen met je accountmanager.
Op 11-1-2024 hebben we hiervoor een demo gegeven. Zie hier het filmpje met meer uitleg:
Werking Flex editor
- Algemeen
- Thema instellingen
- Standaardknoppen binnen componenten
- Componenten toevoegen
- Overerving
- Hoe pas je het op een live website aan?
- Welke pagina's kun je aanpassen?
- Welke opties zitten (nog) niet in de Flex Editor?
1. Algemeen
Als de Flex Editor aan staat dan kun je hierin werken door in te loggen in het platform. Als je ingelogd bent als sitebeheerder en naar de homepage gaat, zie je aan de linkerkant een schuifje staan. Hiermee open je de Flex Editor:
In de balk zie je alle componenten die je aan kunt passen. Afhankelijk van de configuratie van de site kunnen hier meer of minder componenten staan om aan te passen (zoals Header, Omschrijving etc.).
Als je met je muis over een component beweegt heb je doorgaans tot drie opties om uit te kiezen:
- Titel component
Als je een component wil bewerken, klik je simpelweg met je muis op de titel van de component. Hierdoor ga je naar alle mogelijkheden die je hebt voor die specifieke component. - Pijltje
Als je met je muis het pijltje aanklikt en deze ingedrukt houdt, dan kun je de volgorde van de componenten wijzigen door deze naar boven over onderen te slepen. - Drie puntjes
Onder de drie puntjes vind je de mogelijkheid om een component onzichtbaar te maken. Voor de custom componenten vind je onder de drie puntjes eveneens de mogelijkheid om de component te verwijderen.
De wijzigingen die je doet, zie je direct veranderen op de plek waar je aan het werk bent. Pas als je deze publiceert, worden ze opgeslagen en verwerkt.
Vind je het lastig om het juiste component binnen de Flex Editor te vinden? Dan kan je ook op de pagina naar de component gaan die je wil aanpassen. Als je met je muis over de component beweegt, verschijnt er een kader om de component en een potloodje. Door daarop te klikken kun je de component bewerken.
2. Thema instellingen
We maken onderscheid tussen instellingen die invloed hebben op het gehele thema en instellingen per component. De thema instellingen kun je zien als globale instellingen. Hier stel je de algemene kleuren, lettertype en kleuren van de knoppen in. Om de thema instellingen aan te passen ga je naar het wereldbol icoon rechts bovenin de FlexEditor, naast het logo.
Binnen de thema instellingen kun je aan de slag gaan met aanpassen van kleuren, de belangrijkste Call-to-action buttons en het lettertype op de website. Overerving is op alle drie van toepassing. De veranderingen die je op bijvoorbeeld websiteniveau doet zie je terug op segment, project etc. Deze zijn echter per niveau aan te passen.
Ook is er de mogelijkheid om de thema instellingen Kleur en Call-to-action buttons op componentniveau te overschrijven.
Thema kleuren
Je hebt hier de mogelijkheid om de basis- en contrastkleur aan te passen en daarnaast ook voor enkele specifieke elementen kleur toe te kennen, zoals de achtergrond van de pagina, titel, tekst en hyperlink.
Daarnaast kan je tot maar liefst zeven extra kleuren toevoegen die als thema kleuren voor je website dienen. De kleuren die je hier toevoegt, kun je vervolgens ook kiezen op onderstaande niveaus en binnen componenten.
Hierdoor is je huisstijl snel en efficiënt doorgezet op het platform. Zonder veel gedoe of een verkeerde kleurcode. Bij aanpassingen binnen je huisstijl heb je op deze manier vanuit één plek op jouw platform alles binnen de kortste keren aangepast.
Call-to-action Buttons
Hier kun je de kleuren en het lettertype aanpassen van de donatie, start actie en start project knoppen.
Lettertypes
Hier wijzig je het lettertype voor de gehele site, segment of project. Afhankelijk van het niveau waarop je de aanpassing doet. Als je een ander lettertype wil kiezen, zie je meteen een preview van het lettertype.
3. Standaardknoppen binnen componenten
Bij het aanpassen van componenten kun je meerdere tabbladen hebben. Het tabblad ‘Opties’ is altijd aanwezig. Daarnaast kun je (afhankelijk van de component) de tabbladen ‘Layout’ en ‘Content’ hebben.
Layout
De layout optie zegt wat over de plaatsing en aanwezigheid van elementen binnen de component. Zo kan je in de banner kiezen om de doneer, start actie of start project knop aan of uit te zetten. Bij de metrics (het blokje met aantal acties, teams etc.) kun je kiezen of je de lege aantallen wil tonen en bij de Share buttons kun je kiezen op welke positie ze moeten staan, welke weergave het is en ze wat marges en uitlijning geven. Dit zijn voorbeelden van extra opties die je hebt bij de inhoud van de component.
Opties
De tab 'Opties' gaat over de vormgeving van de component. Hier kan je bijvoorbeeld kleur, achtergrond, ruimte tussen de verschillende componenten en elementen binnen de component aanpassen. Over het algemeen vind je hier settings die onder globaal vallen. Deze hebben betrekking op heel de component. Daarnaast zal je de titels ‘Content’ of ‘Card’ tegenkomen. Dit heeft dan betrekking op kleinere onderdelen binnen een component. Zo vind je binnen de component ‘Uitgelichte projecten’ ook een dropdown genaamd ‘Card’ terug. Je zal zien dat als je deze aanpast, dat alleen invloed heeft op de uitgelichte projecten. In dit geval zijn dit dan ‘Cards’
Als laatste vind je dropdown-menu's binnen een component met een unieke naam. Een mooi voorbeeld is ‘socials’ binnen de footer component. Zoals je merkt, zijn deze erg intuïtief als het gaat om wat je daar mee kan aanpassen.
Hier zie je het verschil tussen Globaal en Card. In dit voorbeeld is het groene gedeelte de global (dat gaat over de hele component). Card gaat over de individuele onderdelen daarvan.
Standaardknoppen- en mogelijkheden.
Er zijn een aantal standaardopties die op veel plekken in de Flex Editor voorkomen.
Achtergrond
Hier kun je een achtergrond toevoegen voor het (gedeelte van de) component die je op dat moment aanpast. Als de afbeelding een ander formaat heeft dan de component zelf, dan wordt een uitsnede in het midden gemaakt. Je kunt vervolgens bij de geavanceerde opties kiezen of je dit wil behouden of dat je een ander gedeelte van de afbeelding wil tonen. Je kunt ook kiezen voor een herhaling van een stukje van een afbeelding en instellen wat er met het formaat moet gebeuren. Er zijn daarmee veel designmogelijkheden om de achtergrond in te stellen.
Parallax
Met de instelling Parallax blijft de afbeelding op de achtergrond staan als bezoekers naar beneden scrollen. Dit synchroniseert ook met meerdere componenten die onder elkaar staan en dezelfde parallax hebben:
Op deze manier kun je een gedeelte van de pagina (meerdere componenten tegelijk) parallax maken. Het geeft meer diepte aan je website en de illusie dat elementen over elkaar heen bewegen.
Opacity
Door de opacity van de afbeelding aan te passen wordt deze doorzichtiger en kun je deze subtieler of passender maken. Bij meer doorzichtigheid wordt je achtergrond steeds meer zichtbaar. Bij het kiezen van een kleur kun je ook kiezen om deze (al dan niet deels) transparant te maken.
Padding
Met de padding kun je de lege ruimte rondom de tekst binnen een component instellen. Deze waardes kunnen voor alle vier richtingen afzonderlijk bepaald worden. Dus boven, onder, links en rechts. Door op het paperclipje te klikken kun je die verhoudingen behouden en pas je het in één keer tegelijk aan.
4. Componenten toevoegen
Via de knop "Component toevoegen" onderin kun je een component toevoegen. Deze komt dan onderaan te staan en kun je daarna naar de gewenste plek slepen. Ook kun je in de structuur zelf op het plusje klikken (zie screenshot). Je voegt de component dan direct op die plek toe.
Je kunt kiezen uit de volgende componenten:
Na het klikken op zo'n component wordt deze aangemaakt en kun je de inhoud ervan aanpassen. Via het tabblad Content voeg je extra afbeeldingen en tekstblokken toe (indien aanwezig).
5. Overerving
De Flex Editor werkt ook met overerving. Kleuren die je op een hoger niveau instelt, worden ook toegepast op lagere niveaus. En kun je op dat lagere niveau overschrijven. Met een lager niveau wordt dan bijvoorbeeld segment of project bedoeld.
Uitzonderingen zijn de custom componenten die je zelf toevoegt. Deze worden niet automatisch geërfd op een langer niveau. Custom componenten zijn specifiek voor de pagina waarop je ze toevoegt.
6. Hoe pas je het op een live website aan?
We kunnen op een website die al live staat in eerste instantie de previewmodus aanzetten. Je kunt dan als sitebeheerder vanuit het dashboard op de previewknop klikken:
Vervolgens ga je naar de voorkant en zie je de Flex Editor. Je kunt daar allerlei aanpassingen doen en publiceren (via de groene knop) en alle wijzigingen zijn alleen zichtbaar voor sitebeheerders. Op het moment dat je klaar bent kunnen we de template wijzigen naar de Flexplate (onze naam voor de Flex Editor template) en zijn de Flex Editor aanpassingen ook voor bezoekers zichtbaar. Op die manier kun je alles al geheel inrichten voordat je het live zet.
Soms komt het voor dat je bepaalde wijzigingen al wel wil doen, maar nog niet wil tonen aan bezoekers. Je kunt dan componenten toevoegen, stylen naar wens, onzichtbaar maken en publiceren. Ben je klaar om ze aan de wereld te laten zien? Dan zet je ze op zichtbaar en publiceer je deze opnieuw.
7. Welke pagina's kun je aanpassen?
Je kunt op de volgende pagina's aanpassingen doen:
- Homepage
- Segmentpagina
- Projectpagina
- Contentpagina's
Onder de contentpagina's vallen de menu-pagina's, waaronder ook contact en tips. Je kunt de inhoud van de tips niet aanpassen, maar een mogelijke workaround is om de tips-pagina niet te tonen (onzichtbaar maken) en een custom block toe te voegen met daarin je eigen tips.
8. Welke opties zitten (nog) niet in de Flex Editor?
De volgende dingen kunnen nog niet:
- wijzigingen doen op actie, team of bedrijfsniveau. En ook in de aanmeldflow en donatieflow en overzichtspagina's kun je geen wijzigingen doen.
- stijlen selecteren om te gebruiken
- een component op een specifiek moment geautomatiseerd live zetten (dit is nog een handmatige handeling)
- gebruik maken van versiebeheer, waarmee je gemakkelijk terug kunt gaan naar een eerder versie.
- eigen componenten toevoegen
- aparte varianten te maken voor verschillende devices.
- A/B testing (dit werkt nog niet met de Flex Editor)
In de toekomst kan dat mogelijk wijzigen.
FAQ
Ook interessant