En bref : Comment ajouter un séparateur de forme dans WordPress
Un séparateur de forme est un graphique SVG qui permet d'ajouter des transitions visuelles entre les sections d'une page. Aucune connaissance en programmation n'est requise avec SeedProd.
- Installez SeedProd: souscrivez à une formule payante, installez le plugin et saisissez votre clé de licence.
- Ouvrez l'éditeur visuel – Créez ou modifiez une page d'accueil ou un modèle de thème.
- Rechercher les séparateurs de forme: cliquez sur n'importe quelle section, accédez à l'onglet « Avancé », puis ouvrez le panneau « Séparateurs de forme ».
- Personnaliser – Choisissez parmi 18 formes, puis définissez la couleur, la largeur et la hauteur.
- Option sans plugin – Utilisez plutôt le bloc « Séparateur » de WordPress pour créer une simple ligne horizontale.
La plupart des thèmes WordPress ne proposent pas de fonctionnalité intégrée permettant d'ajouter des séparateurs graphiques entre les sections. Ces séparateurs créent des transitions visuelles épurées qui aident à guider les visiteurs dans la page, sans recourir à des animations trop lourdes.
Pas besoin de savoir coder ni de posséder des compétences en conception pour les ajouter, que vous gériez le site d'une petite entreprise, un portfolio ou un blog. Dans ce guide, je vais vous montrer deux façons d'ajouter un séparateur de forme dans WordPress.
Qu'est-ce qu'un séparateur de section dans WordPress ?
Un séparateur de section, parfois appelé séparateur de forme, est un élément de conception que vous pouvez utiliser pour diviser votre contenu WordPress. Il ajoute une transition visuelle entre les sections afin que votre page soit plus structurée et plus facile à suivre.
Vous pouvez placer des intercalaires au-dessus ou au-dessous des blocs de contenu pour séparer les sujets ou mettre en évidence les zones importantes de la page.
Les séparateurs sont disponibles dans différents styles, tels que les séparateurs de forme SVG, les séparateurs de ligne ou de texte, et les conceptions personnalisées. La plupart d'entre eux peuvent être adaptés aux couleurs et à la mise en page de votre marque pour une présentation soignée.
Comment ajouter des diviseurs fantaisistes à votre site WordPress
SeedProd vous permet d'ajouter des séparateurs de forme à n'importe quelle section de WordPress grâce à son panneau « Shape Dividers » intégré, sans avoir à écrire une seule ligne de code.
Vous pouvez choisir parmi 18 styles SVG et personnaliser la couleur, la largeur, la hauteur et la position.
Méthode 1 : Créer des séparateurs de sites Web avec SeedProd
Pour cette méthode, je vais utiliser SeedProd afin d'ajouter des séparateurs en forme de motifs à votre site WordPress.
SeedProd est l'un des meilleurs constructeurs de sites web pour WordPress. Il vous permet de créer des thèmes WordPress personnalisés, des pages d'atterrissage et des mises en page de sites Web réactifs sans code.
Il est livré avec des centaines de modèles prédéfinis, de nombreux éléments de contenu et un éditeur visuel facile à utiliser pour personnaliser vos pages WordPress.
L'une des fonctionnalités que j'utiliserai dans ce guide est l'outil « Shape Dividers » intégré à SeedProd. Il permet d'ajouter en quelques clics de jolis séparateurs en forme à n'importe quel article ou page, sans avoir besoin de coder.
Suivez les étapes ci-dessous pour ajouter des séparateurs de formes à WordPress avec SeedProd.
Installer et activer le plugin WordPress SeedProd
Tout d'abord, cliquez ici pour démarrer avec SeedProd et téléchargez le plugin sur votre ordinateur. Ensuite, téléchargez le fichier .zip du plugin sur votre site WordPress.
Vous pouvez suivre ce guide sur l'installation d'un plugin WordPress si vous avez besoin d'aide.
Remarque :il existe une version gratuite de SeedProd, mais j'utiliserai la version premium de SeedProd pour la fonctionnalité « Shape Divider ».
Après avoir installé et activé SeedProd, allez dans SeedProd " Settings et entrez votre clé de licence du plugin.
Vous pouvez trouver votre clé de licence en vous connectant au site web de SeedProd et en regardant dans la section Téléchargements.
Créer un thème WordPress ou une page d'atterrissage
Il y a deux façons d'utiliser les séparateurs de section dans SeedProd.
Vous pouvez créer un nouveau thème WordPress et ajouter des séparateurs de formes à différentes parties du thème. Vous pouvez également créer une page d'atterrissage autonome et ajouter des séparateurs de formes à une seule page.
Voici les instructions pour configurer les deux :
Thème WordPress
Le constructeur de thème de SeedProd vous permet de créer un nouveau thème WordPress grâce à son éditeur par glisser-déposer.
Il crée tous les fichiers qui composent votre thème, y compris la barre latérale, l'en-tête, le pied de page, l'article unique, etc. Vous pouvez ensuite personnaliser chaque fichier visuellement, sans code.
Lorsque vous activerez votre nouveau thème, il écrasera votre thème WordPress existant. Ne choisissez donc cette option que si vous êtes prêt à perdre votre thème existant.
Suivez ce tutoriel pour créer un thème WordPress personnalisé avec SeedProd.
Page d'atterrissage
Le constructeur de pages d'atterrissage de SeedProd vous permet d'utiliser son interface par glisser-déposer pour créer des pages d'atterrissage uniques sur WordPress. Vous pouvez entièrement personnaliser le design, mais il n'écrasera pas votre thème existant, contrairement à la version du constructeur de thème.
C'est une bonne solution si vous souhaitez conserver votre thème WordPress actuel tout en utilisant la fonction de diviseur de forme.
Suivez ce guide étape par étape pour créer une page d'atterrissage dans WordPress.
Après avoir créé un thème WordPress ou une page d'atterrissage, vous pouvez passer à l'étape suivante.
Personnalisez votre design avec un séparateur de section
Pour ajouter des séparateurs de forme dans WordPress, modifiez un modèle de thème ou une page d'accueil, ce qui ouvrira l'éditeur visuel de SeedProd. Dans ce tutoriel, je vais modifier la page d'accueil de mon thème WordPress personnalisé.
Une fois que vous êtes dans l'éditeur visuel, vous devez trouver une zone de la page où vous voulez ajouter votre séparateur de forme. SeedProd vous permet d'ajouter des séparateurs de forme aux sections, aux colonnes et aux lignes.
Cliquez sur la section ou la ligne de votre choix pour ouvrir son panneau de configuration sur le côté gauche. À l'intérieur de ce panneau, cliquez sur l'onglet "Avancé" pour obtenir davantage d'options de personnalisation.
Vous verrez l'en-tête Diviseurs de forme au bas du panneau. Cliquez sur l'en-tête pour ouvrir les paramètres des séparateurs de forme.
Tout d'abord, vous pouvez choisir d'ajouter un séparateur en haut ou en bas de votre section.
Vous pouvez ensuite cliquer sur le menu déroulant pour sélectionner 18 formes différentes pour votre séparateur.
Après avoir sélectionné une forme, SeedProd affichera des paramètres supplémentaires pour personnaliser l'apparence de la forme.
Par exemple, vous pouvez :
- Modifier la couleur de la forme
- Choisissez une largeur et une hauteur personnalisées
- Retourner la forme
- Ramener la forme à l'avant
Vous pouvez suivre les mêmes étapes pour ajouter un séparateur de forme au bas d'une section.
Voici quelques exemples supplémentaires des différents effets que vous pouvez créer avec les séparateurs de formes de SeedProd :
Montagnes
Vagues
Courbe
Faites des essais avec différents séparateurs de sites web jusqu'à ce que vous soyez satisfait de l'aspect de l'ensemble.
Les séparateurs de forme SeedProd sont adaptatifs par défaut. Si vous souhaitez en masquer un sur certains appareils, utilisez les paramètres de visibilité des blocs dans l'onglet « Avancé ».
Publiez vos séparateurs fantaisie sur WordPress
Maintenant que les séparateurs de formes sont en place, vous pouvez publier votre nouveau dessin.
Si vous créez un thème WordPress, vous pouvez le publier en allant sur SeedProd Theme Builder et en cliquant sur le bouton "Enable SeedProd Theme" (activer le thème SeedProd) pour le mettre en position "Yes" (oui).
Il suffit de cliquer sur la flèche déroulante du bouton Enregistrer et de cliquer sur Publier pour les pages d'atterrissage.
Vous pouvez maintenant visiter votre site web et voir vos séparateurs de section en action. Voici un exemple de notre site de démonstration avec des séparateurs de section sur la section de l'image de fond du héros :
Ajouter des icônes et des séparateurs de texte avec SeedProd
Si les séparateurs de sections fantaisistes ne conviennent pas aux besoins de votre site web, vous pouvez également utiliser le bloc Divider de SeedProd pour ajouter une ligne de texte et des séparateurs d'icônes à votre site WordPress.
Le principe est le même que précédemment, mais au lieu de choisir une option sur les lignes, les colonnes ou les sections, vous devrez faire glisser le bloc Diviseur sur votre page.
À partir de là, vous pouvez cliquer sur une liste déroulante pour choisir une ligne de séparation en forme d'icône, comme celle-ci :
Ou un séparateur de texte similaire à cet exemple :
Vous avez donc maintenant 2 façons de créer des séparateurs attrayants dans WordPress avec SeedProd. Ensuite, regardons comment ajouter des séparateurs sans plugin.
Méthode 2 : Créer un séparateur de section dans WordPress sans plugin
Vous pouvez également utiliser les paramètres intégrés de WordPress pour ajouter des séparateurs à votre site. Cette méthode est utile si vous ne souhaitez pas installer de plugins WordPress supplémentaires.
Cependant, les options de personnalisation sont plus limitées. Par exemple, vous ne pouvez qu'ajouter différents styles de ligne et modifier la couleur d'arrière-plan pour chaque saut de ligne.
Je vous recommande d'utiliser la méthode 1 pour bénéficier d'options de personnalisation avancées. Suivez les étapes ci-dessous pour ajouter une ligne horizontale servant de séparateur de section dans WordPress sans plugin.
Ajouter une ligne horizontale dans l'éditeur de blocs de WordPress
Pour ajouter un séparateur de section horizontal à l'aide de l'éditeur de blocs de WordPress, ouvrez un article ou une page et cliquez sur l'icône plus (+) à l'endroit où vous souhaitez placer votre séparateur.
Ensuite, tapez "Séparateur" dans le champ de recherche et cliquez sur le bloc Séparateur.
Après avoir ajouté le bloc à votre page, vous verrez un séparateur horizontal entre chaque section de texte.
Vous pouvez modifier le style d'intercalaire en cliquant sur Défaut, Ligne large ou Points dans le panneau de droite.
Vous pouvez également modifier la couleur d'arrière-plan du séparateur dans le même panneau.
Lorsque vous êtes satisfait de l'aspect de votre page, mettez-la à jour ou publiez-la pour voir les résultats.
Ajouter une ligne horizontale dans l'éditeur classique de WordPress
Suivez ces instructions pour ajouter des séparateurs de section à votre site web en utilisant l'éditeur classique de WordPress.
Modifiez un message ou une page existant(e) ou créez-en un(e) nouveau(elle). Si vous ne voyez pas tous les paramètres de l'éditeur, cliquez sur l'icône Basculer la barre d'outils.
Ensuite, cliquez sur l'endroit de votre page où vous souhaitez ajouter votre séparateur. Cliquez ensuite sur l'icône Ligne horizontale.
Votre ligne de séparation horizontale sera en noir et blanc ou en gris clair et couvrira l'ensemble de votre article ou de votre page comme suit :
FAQ sur les séparateurs de sections dans WordPress
Comment ajouter un séparateur de forme à une page WordPress sans utiliser de code ?
Ouvrez n'importe quelle section dans l'éditeur visuel de SeedProd, cliquez sur l'onglet « Avancé », puis faites défiler jusqu'au panneau « Séparateurs de forme ». Choisissez parmi 18 formes SVG, définissez la couleur, la largeur et la hauteur, puis publiez. Aucun CSS ni code n'est nécessaire.
Le séparateur de forme de SeedProd fonctionne-t-il sur n'importe quelle page ou n'importe quel article ?
Oui. Les séparateurs de forme fonctionnent sur n'importe quelle section ou ligne dans l'éditeur visuel de SeedProd, que vous créiez une page d'accueil ou un thème WordPress complet. Vous pouvez ajouter un séparateur en haut ou en bas de n'importe quelle section.
La fonctionnalité de séparation par forme est-elle disponible dans la version gratuite de SeedProd ?
Non. Les séparateurs de forme sont une fonctionnalité premium. Vous devez disposer d'un abonnement payant à SeedProd pour accéder au panneau « Séparateurs de forme » dans les paramètres avancés.
Puis-je utiliser des séparateurs de forme avec mon thème WordPress actuel ?
Oui, à une condition. Si vous utilisez le générateur de pages d'accueil de SeedProd, votre thème actuel reste inchangé et seules les pages d'accueil utilisent les séparateurs de forme. Si vous activez le générateur de thèmes de SeedProd, celui-ci remplace entièrement votre thème actuel.
Quelle est la différence entre un séparateur de forme et un bloc séparateur dans WordPress ?
Un bloc de séparation (le bloc natif de WordPress) ajoute une simple ligne horizontale entre les zones de contenu. Un séparateur de forme est un graphique SVG pleine largeur, tel que des vagues ou des courbes, qui s'étend sur toute la largeur de la section. Les séparateurs de forme sont plus distinctifs visuellement et entièrement personnalisables dans SeedProd.
SeedProd et votre petite entreprise
Nous espérons que cet article vous a aidé à apprendre à ajouter un séparateur de section sur WordPress. Avec le puissant constructeur de sites web SeedProd, la création de séparateurs de formes fantaisistes est un jeu d'enfant.
Voici quelques articles connexes qui pourraient vous être utiles :
- Comment créer une page de blog sur WordPress
- Comment ajouter une boîte d'auteur dans WordPress
- Comment ajouter une barre latérale personnalisée à WordPress
Merci de votre lecture ! Nous aimerions connaître votre avis, alors n'hésitez pas à participer à la conversation sur YouTube, X et Facebook pour obtenir d'autres conseils et contenus utiles pour développer votre entreprise.
