Séparateurs de forme : créez des transitions élégantes entre vos sections

Empilez deux sections de couleurs différentes et vous obtenez une frontière nette : une ligne horizontale parfaitement droite. C'est propre, mais c'est aussi ce que font tous les sites. Pour donner un peu de relief et de personnalité à vos pages, WebAcappella Fusion propose les séparateurs de forme — les fameux shape dividers que l'on voit sur les sites modernes : une vague, une courbe ou un triangle qui adoucit le passage d'une section à l'autre.

Bonne nouvelle : il n'y a rien à coder, rien à dessiner. Tout se règle dans l'inspecteur de votre section, en quelques clics. Dans ce tutoriel, on voit où ça se trouve, comment ajouter votre premier séparateur, et surtout l'astuce de couleur qui fait toute la différence.

Qu'est-ce qu'un séparateur de forme ?

Un séparateur de forme est une découpe décorative placée sur le bord haut ou bas d'une section. Au lieu d'une transition rectiligne entre votre bandeau bleu et la section blanche qui suit, vous obtenez par exemple une vague : la couleur d'une section semble « déborder » sur l'autre selon une forme douce.

Chaque section dispose de deux séparateurs indépendants : un en haut et un en bas. Vous pouvez n'en activer qu'un, les deux, et leur donner des formes ou des couleurs différentes. C'est ce qui permet de créer des enchaînements variés tout au long d'une page.

Où le trouver dans WebAcappella Fusion

Le séparateur de forme est un réglage de section (la « boîte » qui contient vos blocs de contenu). Pour y accéder :

1. Sélectionnez la section dont vous voulez habiller le bord (cliquez sur une zone vide de la section, pas sur un élément à l'intérieur).
2. Ouvrez l'inspecteur de la section sur le côté.
3. Cliquez sur l'onglet Séparateur de forme (l'icône en forme de vague).
4. Vous y trouvez deux groupes de réglages : Séparateur du haut et Séparateur du bas.

Ajouter votre premier séparateur, étape par étape

Prenons le cas le plus courant : vous voulez une vague entre une section colorée et la section blanche située juste en dessous.

1. Sélectionnez la section du haut et ouvrez l'onglet Séparateur de forme.
2. Dans Séparateur du bas, activez l'option Activé.
3. Choisissez une forme dans la liste (commencez par « Vague » ou « Vague douce »).
4. Réglez la couleur du séparateur sur la couleur de fond de la section suivante — c'est l'astuce clé, on y revient juste après.
5. Ajustez la hauteur pour donner plus ou moins d'ampleur à la vague.

Et voilà : la section blanche du dessous semble remonter dans la section colorée en suivant une vague. Aucune image, aucun export, aucun code.

L'astuce qui change tout : la couleur

C'est l'erreur de débutant la plus fréquente, alors autant la régler tout de suite. Pour obtenir l'effet « deux sections qui s'imbriquent », la couleur du séparateur doit correspondre au fond de la section voisine, pas à celui de la section qui le porte.

Si vos sections utilisent les couleurs dynamiques du thème, pensez à reprendre la même teinte : ainsi, le jour où vous changez la palette de votre site, le séparateur reste cohérent avec le reste.

Les formes disponibles

WebAcappella Fusion propose onze formes, de la plus sobre à la plus marquée. À choisir selon le ton de votre site :

• Vagues : Vague et Vague douce — l'option passe-partout, idéale pour un rendu fluide et organique.
• Courbes : Courbe et Courbe asymétrique — une transition arrondie, élégante et discrète.
• Angles : Triangle, Triangle asymétrique, Inclinaison et Zigzag — pour un style plus graphique, dynamique ou « tech ».
• Décoratives : Montagnes, Gouttes et Nuages — des formes plus thématiques, à manier avec parcimonie.

Aller plus loin : les réglages avancés

Une fois la forme et la couleur posées, plusieurs options vous permettent d'affiner le rendu :

• Hauteur : l'amplitude verticale de la forme. Plus elle est haute, plus l'effet est prononcé.
• Largeur (%) et position horizontale : agrandissez le motif au-delà de 100 % pour ne montrer qu'une portion de la forme, puis choisissez quelle partie est visible (gauche, centre, droite).
• Couches : superposez jusqu'à trois exemplaires de la forme, avec une opacité décroissante, pour un joli effet de profondeur.
• Retournement horizontal / vertical : inversez le sens de la forme pour varier d'une section à l'autre.
• Superposition du contenu : activée, le séparateur se pose par-dessus le contenu sans ajouter de hauteur à la section ; désactivée, la section s'agrandit pour lui laisser la place.

Trois conseils pour ne pas en faire trop

• Restez cohérent : une ou deux familles de formes sur l'ensemble du site suffisent. Alterner vagues, zigzags et nuages sur la même page brouille le message.
• La sobriété paie : un séparateur doit accompagner la lecture, pas la voler. En cas de doute, baissez la hauteur.
• Vérifiez toujours sur mobile : prévisualisez vos pages en taille téléphone avant de publier, et masquez les séparateurs encombrants si besoin.

En résumé

• Les séparateurs de forme se règlent dans l'onglet dédié de l'inspecteur de section, en haut et/ou en bas.
• La couleur du séparateur doit reprendre le fond de la section voisine pour créer l'effet de découpe.
• Onze formes disponibles, de la vague discrète au zigzag graphique, plus des réglages de hauteur, largeur, couches et retournement.
• Pensez au rendu mobile : un séparateur peut être masqué sur petit écran.
• Tout est visuel, sans aucune ligne de code.

Les séparateurs de forme sont l'un de ces petits détails qui font qu'un site « fait pro » sans effort supplémentaire. Une vague bien placée, la bonne couleur, et vos pages gagnent immédiatement en allure.