Flex Editor
Dernière modification: 12-04-2024Le Flex Editor est un produit qui vous permet de personnaliser de nombreux éléments de votre plateforme. Par exemple la modification de l'ordre, l'ajustement des couleurs, choisir une variante pour un élément existant, rendre certaines parties du site web invisibles et ajouter de nouvelles fonctionnalités aux pages.
Fonctionnement du Flex Editor
- Généralités
- Paramètres du thème
- Boutons par défaut dans les composants
- Ajout de composants
- L'héritage
- Comment personnaliser sur un site web réel
- Quelles pages pouvez-vous personnaliser?
- Quelles options ne se trouvent pas (encore) dans l'éditeur Flex?
1. Généralités
Si le Flex Editor est activé, vous pouvez y accéder en vous connectant à la plateforme. Si vous êtes connecté en tant qu'administrateur de site et que vous vous rendez sur la page d'accueil, vous verrez un curseur sur la gauche. Celui-ci ouvre le Flex Editor :
La barre affiche tous les composants que vous pouvez personnaliser. Selon la configuration du site, il peut y avoir plus ou moins de composants à personnaliser ici (comme l'en-tête, la description, etc.).
Lorsque vous passez votre souris sur un composant, vous avez généralement le choix entre trois options :
- Titre du composant
Si vous souhaitez modifier un composant, il vous suffit de cliquer sur son titre à l'aide de votre souris. Vous accédez alors à toutes les options disponibles pour ce composant. - Flèche
Si vous cliquez sur la flèche avec votre souris et que vous la maintenez enfoncée, vous pouvez modifier l'ordre des composants en les faisant glisser vers le haut ou vers le bas. - Trois points
Sous les trois points, vous trouverez l'option permettant de rendre un composant invisible. Pour les composants personnalisés, vous trouverez également l'option de supprimer le composant sous les trois points.
Les modifications que vous apportez se traduisent par des changements immédiats à l'endroit où vous travaillez. Ce n'est que lorsque vous les publiez qu'elles seront sauvegardées et traitées.
Vous avez du mal à trouver le bon composant dans le Flex Editor ? Dans ce cas, rendez vous sur le composant que vous souhaitez modifier sur la page. Lorsque vous passez votre souris sur le composant, un cadre apparaît autour de celui-ci, ainsi qu'un crayon. En cliquant dessus, vous pouvez modifier le composant.
2. Paramètres du thème
Nous distinguons les paramètres qui affectent l'ensemble du thème et les paramètres par composant. Vous pouvez considérer les paramètres du thème comme des paramètres globaux. C'est là que vous définissez les couleurs générales, la police et les couleurs des boutons. Pour ajuster les paramètres du thème, cliquez sur l'icône du globe en haut à droite du Flex Editor, à côté du logo.
Dans les paramètres du thème, vous pouvez personnaliser les couleurs, les principaux boutons d'appel à l'action (call-to-action) et la police de caractères du site web. L'héritage s'applique à ces trois éléments. Les modifications que vous apportez, par exemple, au niveau du site web seront répercutées au niveau du segment, du projet, etc. Toutefois, il est possible de les adapter à chaque niveau.
Il est également possible de remplacer les paramètres du thème Couleur et call-to-action au niveau du composant.
Couleurs du thème
Ici, vous avez la possibilité d'ajuster la couleur de base et de contraste, ainsi que d'attribuer une couleur à certains éléments spécifiques, comme l'arrière-plan de la page, le titre, le texte et l'hyperlien.
En outre, vous pouvez ajouter jusqu'à sept couleurs supplémentaires qui serviront de couleurs de thème pour votre site web. Les couleurs que vous ajoutez ici peuvent également être choisies aux niveaux inférieurs et à l'intérieur des composants.
Ainsi, votre charte graphique est rapidement et efficacement transférée sur la plateforme, facilement et sans codes de couleur erronés. En cas de modification de votre charte graphique, vous pouvez tout adapter en un clin d'œil à partir d'un seul endroit sur votre plateforme.
Call-to-action
Vous pouvez ici personnaliser les couleurs et la police des boutons de don, de démarrage d'une action et de démarrage d'un projet.
Polices de caractères
Vous pouvez ici modifier la police de caractères pour l'ensemble du site, du segment ou du projet, en fonction du niveau auquel vous effectuez la modification. Si vous souhaitez choisir une autre police, vous verrez immédiatement un aperçu de la police.
3. Boutons par défaut dans les composants
Lors de la personnalisation des composants, vous pouvez disposer de plusieurs onglets. L'onglet « Options » est toujours présent. En plus, en fonction du composant, vous pouvez avoir les onglets « Disposition » et « Contenu ».
Mise en page
L'option de mise en page indique l'emplacement et la présence des éléments dans le composant. Dans la bannière, par exemple, vous pouvez choisir d'activer ou de désactiver les boutons « faire un don », « démarrer une action » ou « démarrer un projet ». Pour les indicateurs (le bloc avec le nombre d'actions, d'équipes, etc.), vous pouvez choisir d'afficher ou non les chiffres vides et pour les boutons Partager. Vous pouvez choisir leur position, leur affichage et leur donner des marges et un alignement. Ce sont des exemples d'options supplémentaires dont vous disposez avec le contenu du composant.
Options
L'onglet Options concerne la conception du composant. Vous pouvez, par exemple, modifier la couleur, l'arrière-plan, l'espace entre les composants et les éléments à l'intérieur du composant. En général, vous trouverez ici des paramètres globaux. Ils concernent l'ensemble du composant. En outre, vous trouverez les titres « Contenu » ou « Carte ». Ils se rapportent à des parties plus petites d'un composant. Par exemple, dans le composant « Projets en vedette », vous trouverez également une liste déroulante intitulée « Carte ». Vous constaterez que le réglage de cette option n'affectera que les projets mis en évidence. Dans ce cas, il s'agit de « cartes ».
Enfin, vous trouverez des menus déroulants dans un composant portant un nom unique. Un bon exemple est « socials » dans le composant « footer ». Comme vous le remarquez, ces menus sont très intuitifs en termes de personnalisation.
Vous pouvez voir ici la différence entre Global et Card. Dans cet exemple, la partie verte est la partie globale (qui concerne l'ensemble du composant). La carte concerne les composants individuels.
Boutons et fonctions par défaut
Un certain nombre d'options par défaut apparaissent à de nombreux endroits dans le Flex Editor.
Contexte
Vous pouvez ici ajouter un arrière-plan pour le composant (ou la partie du composant) que vous êtes en train de personnaliser. Si l'image a une taille différente de celle du composant lui-même, un rognage est créé au milieu. Vous pouvez ensuite choisir dans les options avancées de conserver ce rognage ou d'afficher une autre partie de l'image. Vous pouvez également choisir de répéter une partie de l'image et définir ce qu'il convient de faire avec la taille. Il existe donc de nombreuses possibilités de conception pour définir l'arrière-plan.
Parallaxe
Avec le paramètre Parallaxe, l'image reste en arrière-plan lorsque les visiteurs font défiler la page vers le bas. Ce paramètre permet également de synchroniser plusieurs composants situés en dessous les uns des autres et présentant la même parallaxe :
De cette façon, vous pouvez parallaxer une partie de la page (plusieurs éléments à la fois). Cela donne plus de profondeur à votre site web et une illusion d'éléments se déplaçant les uns sur les autres.
Opacité
L'ajustement de l'opacité de l'image la rend plus transparente et vous permet de la rendre plus subtile ou plus marquée. Avec plus de transparence, votre arrière-plan devient de plus en plus visible. Lorsque vous choisissez une couleur, vous pouvez également choisir de la rendre transparente (partiellement ou non).
Espacement
L'espacement permet de définir l'espace vide autour du texte, à l'intérieur d'un composant. Ces valeurs peuvent être définies séparément pour les quatre directions (haut, bas, gauche et droite). En cliquant sur le trombone, vous pouvez conserver ces proportions et les ajuster en une seule fois.
4. Ajout de composants
Vous pouvez ajouter un composant en cliquant sur le bouton « Ajouter un composant » en bas de page. Celui-ci apparaîtra en bas et vous pourrez alors le faire glisser à l'endroit souhaité. Vous pouvez également cliquer sur le signe plus dans la structure elle-même (voir capture d'écran). Vous ajoutez alors le composant directement à cet endroit.
Vous pouvez choisir parmi les composants suivants :
Après avoir cliqué sur un tel composant, celui-ci est créé et vous pouvez en modifier le contenu. L'onglet Contenu permet d'ajouter des images et des blocs de texte supplémentaires (le cas échéant).
5. L'héritage
Le Flex Editor fonctionne également avec l'héritage. Les couleurs définies à un niveau supérieur sont également appliquées aux niveaux inférieurs. Vous pouvez aussi les écraser au niveau inférieur. Le niveau inférieur fait référence à un segment ou à un projet, par exemple.
Les exceptions sont les composants personnalisés que vous ajoutez vous-même. Ceux-ci ne sont pas hérités automatiquement à un niveau supérieur. Les composants personnalisés sont spécifiques à la page sur laquelle vous les ajoutez.
6. Comment le personnaliser sur un site web réel ?
Nous pouvons d'abord activer le mode de prévisualisation sur un site web qui est déjà en ligne. En tant qu'administrateur du site, vous pouvez ensuite cliquer sur le bouton de prévisualisation dans le tableau de bord :
Ensuite, vous vous rendez sur le front-end et vous voyez l'éditeur Flex. Vous pouvez y apporter et enregistrer toutes sortes de modifications, qui ne sont visibles que par les administrateurs du site. Dès que vous êtes prêt, nous pouvons changer le modèle en Flexplate (notre nom pour le modèle de le Flex Editor) et les changements du Flex Editor seront également visibles pour les visiteurs. Ainsi, vous pouvez tout configurer complètement avant de le mettre en ligne.
Il arrive parfois que vous souhaitiez apporter certaines modifications, mais que vous ne les montriez pas encore à vos visiteurs. Vous pouvez alors ajouter des composants, les styliser à votre guise, les rendre invisibles et les enregistrer. Êtes-vous prêt à les montrer au monde entier ? Rendez-les alors visibles et enregistrez-les à nouveau.
7. Quelles sont les pages que vous pouvez personnaliser ?
Vous pouvez effectuer des ajustements dans les pages suivantes :
- Page d'accueil
- Page du segment
- Page du projet
- Page de contenu
Les pages de contenu comprennent les pages de menu, qui comprennent également les pages de contact et de conseils. Vous ne pouvez pas modifier le contenu des conseils, mais une solution possible consiste à ne pas afficher la page des conseils (la rendre invisible) et à ajouter un bloc personnalisé contenant vos propres conseils.
8. Quelles sont les options qui ne figurent pas (encore) dans le Flex Editor ?
Les éléments suivants ne sont pas encore possibles :
- Apporter des modifications au niveau de l'action, de l'équipe ou de l'entreprise.
- Modifier les flux d'inscription et de dons ni les pages de présentation.
- Vous pouvez sélectionner des styles à utiliser pour mettre automatiquement en ligne un composant à un moment précis (il s'agit toujours d'une opération manuelle).
- Utiliser le contrôle de version, qui vous permet de revenir facilement à une version antérieure.
- Ajouter vos propres composants en créant des variantes distinctes pour différents appareils.
Cees options pourraient être disponibles à l'avenir.
Questions fréquentes
Peut également vous intéresser :