Flex Editor
Last modified: 12-04-2024The Flex editor is a product that allows you to customise many elements of your platform. Examples include changing the order, adjusting colours, choosing a different variant of an existing element, making parts of the website invisible and adding new features to pages.
To use the Flex Editor, it is added as an addendum to your licence. You can then use the editor on any site under your licence. If you would like to get started, please contact your account manager.
Operation Flex editor
- General
- Theme settings
- Default buttons within components
- Adding
- components
- How to customise on a live website
- What pages can you customise ?
- What options are not (yet) in the Flex Editor?
1. General
If the Flex Editor is on then you can work in it by logging into the platform. If you are logged in as a site administrator and go to the homepage, you will see a slider on the left. This opens the Flex Editor:
The bar shows all the components you can customise. Depending on the site's configuration, there may be more or fewer components to customise here (such as Header, Description, etc.).
When you hover your mouse over a component, you usually have up to three options to choose from:
- Component title
If you want to edit a component, simply click on the component title with your mouse. This takes you to all the options available to you for that particular component. - Arrow
If you click the arrow with your mouse and hold it down, you can change the order of the components by dragging them up over down. - Three dots
Under the three dots you will find the option to make a component invisible. For custom components, you will also find the option to delete the component below the three dots.
The changes you make will see immediate changes in the place where you are working. Only when you publish them are they saved and processed.
Finding it difficult to find the right component within the Flex Editor? Then you can also go to the component you want to modify on the page. When you move your mouse over the component, a frame appears around the component and a pencil. By clicking on it, you can edit the component.
2. Theme settings
We distinguish between settings that affect the whole theme and settings per component. You can think of the theme settings as global settings. This is where you set the general colours, font and colours of the buttons. To adjust the theme settings, go to the globe icon at the top right of the FlexEditor, next to the logo.
Within the theme settings, you can get to work customising colours, the main Call-to-action buttons and the font on the website. Inheritance applies to all three. The changes you make at, say, website level will be reflected at segment, project etc. However, these can be adjusted per level.
There is also the option to override the theme settings Colour and Call-to-action buttons at the component level.
Theme colours
Here, you have the option of adjusting the base and contrast colour, as well as assigning colour for some specific elements, such as the page background, title, text and hyperlink.
In addition, you can add up to as many as seven additional colours that serve as theme colours for your website. The colours you add here can then also be chosen at the levels below and within components.
As a result, your house style is quickly and efficiently transferred to the platform. Without much fuss or a wrong colour code. In the event of changes within your house style, you can adjust everything in no time from one location on your platform.
Call-to-action Buttons
Here you can customise the colours and font of the donation, start action and start project buttons.
Fonts
Here you change the font for the entire site, segment or project. Depending on the level at which you make the change. If you want to choose a different font, you will immediately see a preview of the font.
3. Standard buttons within components
When customising components, you can have several tabs. The 'Options' tab is always present. In addition (depending on the component), you can have the tabs 'Layout' and 'Content'.
Layout
The layout option says something about the placement and presence of elements within the component. In the banner, for instance, you can choose to turn on or off the donate, start action or start project button. For the metrics (the block with the number of actions, teams, etc.) you can choose whether to show the empty numbers and for the Share buttons you can choose what position they should be in, what view it is and give them some margins and alignment. These are examples of extra options you have with the component content.
Options
The Options tab deals with the design of the component. Here you can, for example, adjust colour, background, space between components and elements within the component. In general, you will find settings here that fall under global. These relate to the whole component. In addition, you will come across the titles 'Content' or 'Card'. These relate to smaller parts within a component. For example, within the component 'Featured projects' you will also find a dropdown called 'Card'. You will see that adjusting this will only affect the highlighted projects. In this case, these are then 'Cards
Finally, you will find dropdown menus within a component with a unique name. A great example is 'socials' within the footer component. As you notice, these are very intuitive in terms of what you can customise with them.
Here you can see the difference between Global and Card. In this example, the green part is the global (which is about the whole component). Card is about its individual components.
Standard buttons and features.
There are a number of default options that appear in many places in the Flex Editor.
Background
Here you can add a background for the (part of the) component you are currently customising. If the image has a different size than the component itself, a crop is created in the middle. You can then choose in the advanced options whether to keep this or show a different part of the image. You can also choose to repeat a piece of an image and set what to do with the size. There are thus many design options for setting the background.
Parallax
With the Parallax setting, the image remains in the background when visitors scroll down. This also synchronises with multiple components that are below each other and have the same parallax:
This way, you can parallax part of the page (several components at once). It gives more depth to your website and the illusion of elements moving on top of each other.
Opacity
Adjusting the opacity of the image makes it more transparent and allows you to make it more subtle or appropriate. With more transparency, your background becomes more and more visible. When choosing a colour, you can also choose to make it transparent (partially or not).
Padding
Padding allows you to set the empty space around the text within a component. These values can be set separately for all four directions. So top, bottom, left and right. By clicking on the paperclip you can keep those proportions and adjust it all at once.
4. Adding components
You can add a component via the "Add component" button at the bottom. This will appear at the bottom and you can then drag it to the desired location. You can also click the plus sign in the structure itself (see screenshot). You then add the component directly in that location.
You can choose from the following components:
After clicking on such a component, it is created and you can edit its content. Using the Content tab, you add additional images and text blocks (if any).
5. Inheritance
The Flex Editor also works with inheritance. Colours you set at a higher level are also applied at lower levels. And you can overwrite them on that lower level. Lower level refers to segment or project, for example.
Exceptions are the custom components you add yourself. These are not automatically inherited at a longer level. Custom components are specific to the page on which you add them.
6. How do you customise it on a live website?
We can initially turn on preview mode on a website that is already live. You can then click the preview button from the dashboard as a site administrator:
Then you go to the frontend and see the Flex Editor. You can make and save all kinds of changes there and all changes are only visible to site administrators. The moment you are ready, we can change the template to Flexplate (our name for the Flex Editor template) and the Flex Editor changes will also be visible to visitors. That way, you can set everything up completely before you put it live.
Sometimes it happens that you want to make certain changes already, but not yet show them to visitors. You can then add components, style them to your liking, make them invisible and save them. Are you ready to show them to the world? Then set them to visible and save again.
7. Which pages can you customise?
You can make adjustments on the following pages:
- Homepage
- Segment page
- Project page
- Content page
The content pages include the menu pages, which also include contact and tips. You cannot edit the content of the tips, but a possible workaround is to not show the tips page (make it invisible) and add a custom block containing your own tips.
8. What options are not (yet) in the Flex Editor?
The following things are not yet possible:
- Make changes at action, team or company level. And you cannot make changes in the sign-up flow and donation flow and overview pages either.
- Select styles to use
- Automatically put a component live at a specific time (this is still a manual operation)
- Use versioning, which allows you to easily go back to an earlier version.
- Add your own components
- Create separate variants for different devices
- A/B testing (this does not yet work with the Flex Editor)
This may change in the future.