Éditeur Wix : Ajouter et personnaliser des diviseurs de forme

Temps de lecture : 5 min
Ajoutez des séparateurs de forme à vos bandes et sections pour créer une mise en page intéressante et élégante. Plutôt que d'utiliser des lignes claires pour diviser le contenu, choisissez une forme (ex. Ellipse, Waves) ou importez les vôtres. Ces diviseurs peuvent être placés en haut et en bas d'une bande ou d'une section, et vous pouvez personnaliser leur design si nécessaire.
Un séparateur de forme sur un site en ligne.
Dans cet article, découvrez comment : 
Avant de commencer :
Si vous souhaitez appliquer un diviseur de forme à une bande, assurez-vous de ajouter et configurer la bande en premier.

Ajouter un séparateur avec forme

Commencez par ajouter un diviseur de forme à votre section ou bande. Vous pouvez ajouter le diviseur en haut ou en bas de votre bande / section, ou les deux. 
Vous pouvez choisir parmi toute une variété de formes, ainsi que d'autres designs dans le catalogue Wix Media. Vous pouvez également importer votre propre forme pour donner une touche personnelle à cette transition.

Pour ajouter un diviseur de forme à votre section ou bande :

  1. Sélectionnez votre section ou bande :
    • (Pour les bandes) Cliquez sur la bande dans votre Éditeur.
    • (Pour les sections) Double-cliquez sur la section dans votre Éditeur.
  2. Cliquez sur l'icône Séparateurs avec forme .
  3. Cliquez sur l'onglet Haut ou Bas pour choisir où ajouter le séparateur.
  4. Sélectionnez un diviseur à ajouter :
    • Designs suggérés : Cliquez sur l'un des styles disponibles dans le panneau.
    • Designs supplémentaires proposés par Wix :
      1. Cliquez sur + Plus de formes.
      2. (Dans le gestionnaire de médias) Sélectionnez une option dans l'onglet Médias de Wix.
      3. Cliquez sur Choisir un fichier pour l'appliquer.
    • Votre propre séparateur avec forme : 
      1. Cliquez sur + Plus de formes.
      2. (Dans le gestionnaire de médias) Sélectionnez la forme que vous souhaitez utiliser dans l'onglet Fichiers du site ou importez-en une nouvelle.
      3. Cliquez sur Choisir un fichier pour l'appliquer.
Remarque :
Il est possible d'importer et d'ajouter des fichiers SVG uniquement en tant que séparateurs avec forme personnalisés. En savoir plus sur l'importation de vos propres séparateurs
Le panneau Séparateur de formes dans l'Éditeur. Une forme d'horizon a été sélectionnée.

Personnaliser votre séparateur avec forme

Après avoir ajouté un séparateur, vous pouvez personnaliser son design à votre goût. Ajustez la hauteur, la couleur, l'opacité et les calques pour personnaliser la transition et lui donner l'aspect que vous souhaitez.
Remarque :
Les options disponibles dépendent du séparateur avec forme que vous choisissez.

Pour personnaliser votre séparateur avec forme :

  1. Sélectionnez votre section ou bande :
    • (Pour les bandes) Cliquez sur la bande dans votre Éditeur.
    • (Pour les sections) Double-cliquez sur la section dans votre Éditeur.
  2. Cliquez sur l'icône Séparateurs avec forme .
  3. Cliquez sur l'onglet Haut ou Bas pour accéder au séparateur que vous souhaitez personnaliser.
  4. Cliquez sur Personnaliser le design en bas.
  5. Choisissez comment vous souhaitez ajuster l'aspect de votre séparateur avec forme :
    • Opacité et couleur : Choisissez la couleur de votre choix pour votre intercalaire et rendez-la plus ou moins visible sur la section ou la bande.
    • Hauteur : Définissez à quelle hauteur vous souhaitez que le diviseur aille sur votre section ou bande.
    • Décalage horizontal : Repositionnez votre séparateur avec forme, en le déplaçant vers la gauche ou la droite. 
    • Effet du calque : Cliquez sur le curseur pour ajouter un effet de fondu au séparateur, puis sélectionnez une direction dans le menu déroulant :
      • Centré : L'effet est visible sur l'ensemble du séparateur.
      • Fondu vers le haut : L'effet diminue vers le haut du séparateur.
      • Fondu vers le bas : L'effet diminue vers le bas du séparateur.
    • Inverser : Inversez la forme du séparateur (verticalement).
    • Retourner : Configurez le diviseur pour qu'il s'affiche dans le sens inverse (horizontalement) sur votre bande / section.
    • Nombre de répétitions : Paramétrez le nombre de répétitions du motif sur le séparateur.
Le panneau Personnaliser le design pour un diviseur de forme dans l'Éditeur.

Créer un séparateur avec forme personnalisé

Lorsque vous importez votre propre séparateur avec forme, vous pouvez utiliser diverses options pour le personnaliser davantage. Ajustez les paramètres comme la couleur, la visibilité et l'échelle du séparateur pour créer une structure et un design uniques sur votre page. 
Remarque :
Les options disponibles dépendent du fichier que vous importez. En savoir plus sur les directives pour ajuster un séparateur de forme personnalisé

Pour personnaliser le design de votre séparateur avec forme :

  1. Sélectionnez votre section ou bande :
    • (Pour les bandes) Cliquez sur la bande dans votre Éditeur.
    • (Pour les sections) Double-cliquez sur la section dans votre Éditeur.
  2. Cliquez sur l'icône Séparateurs avec forme .
  3. Cliquez sur l'onglet Haut ou Bas pour accéder au séparateur que vous souhaitez personnaliser.
  4. Cliquez sur Personnaliser le design en bas.
  5. Choisissez comment vous souhaitez ajuster l'aspect de votre séparateur avec forme :
    • Opacité et couleur : Choisissez la couleur de votre choix pour votre intercalaire et rendez-la plus ou moins visible sur la section ou la bande.
    • Quelle est l'échelle du diviseur ? : Sélectionnez si vous souhaitez que le motif du diviseur s'étire sur la bande / section ou se répète.
    • Hauteur : Définissez à quelle hauteur vous souhaitez que le point le plus élevé de la séparation se trouve sur votre bande ou section.
    • Décalage horizontal : Définissez le décalage du diviseur par rapport aux côtés de la section / bande.
    • Retourner : Configurez le diviseur pour qu'il s'affiche dans le sens opposé (horizontalement) sur votre bande ou section.
Le panneau de design d'un diviseur de forme sur une section.

Cela vous a-t-il aidé ?

|