L'éditeur de design des modules vous ouvre de nombreuses possibilités.
Retrouvez également notre article de blog pour des idées.
Format
Le design du module existe en deux formats : Landing et Popup.
Points communs et différences ?
Les différences :
- En format Landing, le module prend toute la page web.
- En format Popup, le module est au centre de la page. Vous pouvez mettre en arrière plan : votre site, une image ou même une video.
- Seul le format Popup permet de modifier l'arrière-plan du module SPREAD.
Onglet En-tête
Dans l'onglet en-tête, vous pouvez :
- Afficher le logo de votre marque
- Mettre une image personnalisée
- Afficher un slogan / une phrase d'accroche Astuce : vous pouvez l'afficher en tant que titre ou simple texte en sélectionnant 'heading' ou 'paragraph' lors de la saisie de votre slogan.
- Gérer l'arrière-plan de l'en-tête. Astuce : si vous n'en voulez pas, choisissez un fond de couleur unie et appliquez une opacité à 0% pour le rendre totalement transparent.
- Modifier la couleur des pictogrammes "Menu" et "Croix de fermeture"
Les arrières-plans
Pour le fond de votre page, vous pouvez mettre :
Un dégradé de couleur
Vous pouvez choisir parmi une galerie de dégradés ou définir un dégradé personnalisé.
Il est possible de choisir l'orientation du dégradé. Exemples : Du haut vers le bas, de la droite vers la gauche... etc
Vous avez la main sur l'opacité du dégradé et mettre une transparence. C'est très utile en format Popup pour laisser entrevoir l'arrière-plan principal.
Une couleur unie
Vous pouvez choisir parmi une galerie de couleurs ou définir une couleur personnalisée.
Là encore, il est possible de varier l'opacité de la couleur. Très utile en mode Popup si l'on veut laisser entrevoir l'arrière-plan principal.
Une image
Une galerie d'arrière-plans est disponible mais vous pouvez aussi importer vos propres illustrations.
Astuce : L'éditeur est conçu pour ajuster automatiquement l'image sans se soucier des dimensions. Pour un rendu optimal, référez-vous aux dimensions recommandées qui sont indiquées dans l'interface.
Ajustée ? Originale ?
Ajustée : Ajuste automatiquement la taille de l'image afin d'obtenir un rendu le plus optimal possible quelle que soit la taille de l'écran tout en conservant le ratio original de l'image.
👉 Cette option hybride est utilisée par défaut sur les arrière-plans.
Originale : Conserve la taille originale de l'image peu importe la taille de l'écran.
👉 Idéal pour répéter des motifs.
Ajuster le positionnement de mon image
Il est parfois nécessaire d'ajuster le positionnement de l'arrière-plan sur le design pour obtenir le rendu désiré.
Exemple avec l'image ci-dessous
Centré sur mobile
Aligné à droite sur mobile
Un site web en arrière-plan (format Popup uniquement)
Vous pouvez afficher automatiquement votre site web en arrière plan.
Une vidéo (format Popup uniquement)
Il est possible d'insérer une vidéo derrière la popup. Ajouter une vidéo en arrière-plan permet de rendre le design plus vivant et dynamique.
Vous pouvez choisir une vidéo prédéfinie dans notre galerie ou importer la vidéo de votre choix.
Le format vidéo optimal qui est supporté par tous les navigateurs est le format .mp4.
Astuce : Ajuster l'opacité du fond de la popup pour apercevoir la vidéo derrière.
Style des textes
Faire du font pairing
Le font pairing (ou "combinaison de polices" en français) consiste à regrouper 2 polices complémentaires qui s'assemblent bien sur la même page.
Par exemple : 1 police pour les titres, 1 police pour le contenu.
Voici un exemple d'outil de font pairing basé sur une IA : https://fontjoy.com/
Gérer les couleurs des textes
À l'instar du font pairing, il est possible de paramétrer des combinaisons de couleurs pour les titres, les contenus et les liens.
Votre texte s'incruste mal avec votre image d'arrière-plan, il n'est pas très lisible, le contraste n'est pas correct ?
Voici les solutions possibles :
- Ajoutez un voile transparent sur l'image pour éclaircir ou assombrir la teinte de votre fond
Arrière-plan → Image → Ajouter une couleur
⇒ Pour éclaircir : Couleur blanche + ajouter un pourcentage de transparence
⇒ Pour assombrir : Couleur noire + ajouter un pourcentage de transparence
- Ajoutez un voile transparent derrière le texte
Styles des textes → Faire ressortir le texte de bienvenue
- Floutez l'arrière-plan derrière le texte
Styles des textes → Faire ressortir le texte de bienvenue
- Combinez le voile transparent derrière le texte et le floutage de l'arrière-plan
Boutons
Vous pouvez modifier les couleurs de tous les boutons de l'interface, y compris les boutons de connexion aux réseaux sociaux et par email.
Le favicon
Le favicon peut être personnalisé dans le menu Divers.
Couleur des éléments graphiques de l'interface (Blocs, Popup, Menu)
Pour adapter au mieux certains éléments graphiques au thème de votre design, il existe deux modes : Clair ou Sombre.
Mode clair : Les éléments prendront une apparence claire.
Idéal pour les designs dans les tons clairs.
Mode sombre : Les éléments prendront une apparence sombre.
Idéal pour les designs dans les tons sombres.
Les couleurs primaires et secondaires
Sur plusieurs pages, les éléments graphiques prennent une couleur de manière automatique. Par exemple, le bouton de partage ou les barres de progression.
L'éditeur de design s'adapte tout seul pour déterminer une couleur "primaire" au design.
En design d'interface, une couleur primaire est la couleur la plus fréquemment affichée sur l'écran et les composants de votre page.
Le bouton de partage
Le bouton de partage utilise majoritairement la couleur "secondaire" de votre design.
En plus d'une couleur primaire, SPREAD définie automatiquement une couleur secondaire.
Cette couleur permet de hiérarchiser les éléments importants (avec la couleur primaire) et les éléments moins importants (avec la couleur secondaire).
Exemple montrant la différence entre le bouton de partage et le bouton Continuer :
Les barres de progression
Les barres de progression utilisent la couleur primaire de votre design.
Résultats :
Powered by