Comment ajouter un séparateur de forme à WordPress (Aucune programmation requise) 

La plupart des thèmes WordPress n'incluent pas de moyen intégré pour ajouter des séparateurs de forme entre les sections. Les séparateurs de forme créent des transitions visuelles nettes qui aident à guider les visiteurs sur la page, sans animations lourdes.

Vous n'avez pas besoin de compétences en programmation ou en design pour les ajouter, que vous gériez un site de petite entreprise, un portfolio ou un blog. Dans ce guide, je vais vous montrer deux façons d'ajouter un séparateur de forme à WordPress.

Vous pouvez placer des séparateurs au-dessus ou en dessous des blocs de contenu pour séparer les sujets ou mettre en évidence des zones importantes de la page.

Les séparateurs existent en différents styles, tels que les séparateurs de forme SVG, les séparateurs basés sur des lignes ou du texte, et les designs personnalisés. La plupart peuvent être stylisés pour correspondre aux couleurs de votre marque et à votre mise en page pour un aspect soigné.

Comment ajouter des séparateurs fantaisie à votre site WordPress

SeedProd vous permet d'ajouter des séparateurs de forme à n'importe quelle section dans WordPress via son panneau intégré Séparateurs de forme, sans code nécessaire.

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 site Web avec SeedProd

J'utiliserai SeedProd pour ajouter des séparateurs de forme à votre site WordPress pour cette méthode.

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 de destination et des mises en page de sites Web réactifs sans code.

Il est livré avec des centaines de modèles pré-faits, de nombreux éléments de contenu et un éditeur visuel facile à glisser-déposer pour personnaliser vos pages WordPress.

L'une des fonctionnalités que j'utiliserai dans ce guide est les séparateurs de forme fantaisie intégrés de SeedProd. Ils vous permettent d'ajouter des séparateurs de forme attrayants à n'importe quel article ou page en quelques clics, sans programmation requise.

Suivez les étapes ci-dessous pour ajouter des séparateurs de forme à WordPress avec SeedProd.

Installer et activer le plugin WordPress SeedProd

Tout d'abord, cliquez ici pour commencer avec SeedProd et téléchargez le plugin sur votre ordinateur. Ensuite, téléversez le fichier .zip du plugin sur votre site Web WordPress.

Vous pouvez suivre ce guide sur l'installation d'un plugin WordPress si vous avez besoin d'aide.

Note : 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 » Paramètres et entrez votre clé de licence de plugin.

Vous pouvez trouver votre clé de licence en vous connectant au site Web de SeedProd et en consultant la section Téléchargements.

Créez un thème WordPress ou une page de destination

Il existe 2 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 forme à différentes parties du thème. Ou vous pouvez créer une page de destination autonome et ajouter des séparateurs de forme à une seule page.

Voici les instructions pour configurer les deux :

Thème WordPress

Le constructeur de thèmes de SeedProd vous permet de créer un nouveau thème WordPress avec son éditeur 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, le billet unique, etc. Vous pouvez ensuite personnaliser chaque fichier visuellement, sans code.

Lorsque vous activez votre nouveau thème, il remplacera votre thème WordPress existant. Choisissez donc cette option uniquement si vous êtes satisfait de perdre votre thème existant.

Suivez ce tutoriel pour créer un thème WordPress personnalisé avec SeedProd.

Page de destination

Le constructeur de pages de destination de SeedProd vous permet d'utiliser son interface glisser-déposer pour créer des pages de destination uniques dans WordPress. Vous pouvez personnaliser entièrement le design, mais cela n'écrasera pas votre thème existant, contrairement à la version du constructeur de thèmes.

C'est une bonne solution si vous souhaitez conserver votre thème WordPress actuel tout en utilisant la fonctionnalité de séparateur de forme.

Suivez ce guide étape par étape pour créer une page de destination dans WordPress.

Après avoir créé un thème WordPress ou une page de destination, vous pouvez passer à l'étape suivante.

Personnalisez votre design avec un séparateur de section

Pour ajouter des séparateurs de forme à WordPress, modifiez un modèle de thème ou une page de destination, ce qui ouvre l'éditeur visuel de SeedProd. Je vais modifier la page d'accueil de mon thème WordPress personnalisé dans ce tutoriel.

Une fois dans l'éditeur visuel, vous devrez trouver une zone de la page où vous souhaitez ajouter votre séparateur de forme. SeedProd vous permet d'ajouter des séparateurs de forme aux sections, colonnes et lignes.

Cliquez sur la section ou la ligne choisie pour ouvrir son panneau de paramètres sur le côté gauche. Dans ce panneau, cliquez sur l'onglet avancé pour voir plus d'options de personnalisation.

Vous verrez l'en-tête Séparateurs de forme en bas du panneau. Cliquez sur l'en-tête pour ouvrir les paramètres du séparateur 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 :

• Changez la couleur de la forme
• Choisissez une largeur et une hauteur personnalisées
• Retournez la forme
• Amenez la forme au premier plan

Vous pouvez suivre les mêmes étapes pour ajouter un séparateur de forme en bas d'une section.

Voici quelques exemples supplémentaires des différents effets que vous pouvez créer avec les séparateurs de forme de SeedProd :

Montagnes

Vagues

Courbe

Expérimentez avec différents séparateurs de site Web jusqu'à ce que vous soyez satisfait de l'apparence de tout.

Les séparateurs de forme SeedProd sont réactifs par défaut. Si vous avez besoin d'en masquer un sur des appareils spécifiques, utilisez les paramètres de visibilité des blocs dans l'onglet Avancé.

Publiez vos séparateurs fantaisie dans WordPress

Maintenant que vos séparateurs de forme sont en place, vous pouvez publier votre nouvelle conception.

Si vous créez un thème WordPress, vous pouvez le publier en accédant au constructeur de thèmes SeedProd et en cliquant sur le bouton « Activer le thème SeedProd » sur Oui.

Cliquez simplement sur la flèche déroulante du bouton Enregistrer et cliquez sur Publier pour les pages de destination.

Vous pouvez maintenant visiter votre site Web en direct et voir votre séparateur de section en action. Voici un exemple de notre site de démonstration avec des séparateurs de section sur notre image d'arrière-plan de héros :

Ajout d'icônes et de séparateurs de texte avec SeedProd

Si les séparateurs de section fantaisie ne conviennent pas aux besoins de votre site Web, vous pouvez également utiliser le bloc Séparateur de SeedProd pour ajouter une ligne de séparateurs d'icônes et de texte à votre site WordPress.

Le principe est le même qu'auparavant, mais au lieu de choisir une option sur les lignes, les colonnes ou les sections, vous devrez faire glisser le bloc Séparateur sur votre page.

À partir de là, vous pouvez cliquer sur une boîte déroulante pour choisir un séparateur de ligne d'icônes comme celui-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, examinons l'ajout de 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 ajouter que différents styles de ligne et modifier la couleur d'arrière-plan de chaque saut de ligne.

Je suggère d'utiliser la méthode 1 pour des options de personnalisation avancées. Suivez les étapes ci-dessous pour ajouter un séparateur de section de ligne horizontale dans WordPress sans plugin.

Ajout d'une ligne horizontale dans l'éditeur de blocs WordPress

Pour ajouter un séparateur de section horizontal à l'aide de l'éditeur de blocs WordPress, ouvrez un article ou une page et cliquez sur l'icône plus (+) là où vous souhaitez que votre séparateur soit.

Ensuite, tapez « Séparateur » dans la zone 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 du séparateur 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'apparence de tout, mettez à jour ou publiez votre page pour voir les résultats.

Ajout d'une ligne horizontale dans l'éditeur classique WordPress

Suivez ces instructions pour ajouter des séparateurs de section à votre site Web à l'aide de l'éditeur classique WordPress.

Modifiez un article ou une page existant ou créez-en un nouveau. 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 séparateur de ligne horizontale sera noir et blanc ou d'un gris clair et couvrira l'intégralité de votre article ou de votre page comme ceci :

FAQ sur les séparateurs de section dans WordPress

Comment ajouter un séparateur de forme à une page WordPress sans code ?

Ouvrez n'importe quelle section dans l'éditeur visuel de SeedProd, cliquez sur l'onglet Avancé, et 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 ou code requis.

Le séparateur de forme de SeedProd fonctionne-t-il sur n'importe quelle page ou article ?

Oui. Les séparateurs de forme fonctionnent sur n'importe quelle section ou ligne à l'intérieur de l'éditeur visuel de SeedProd, que vous construisiez une page de destination 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éparateur de forme est-elle disponible dans la version gratuite de SeedProd ?

Non. Les séparateurs de forme sont une fonctionnalité premium. Vous aurez besoin d'un plan SeedProd payant 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 existant ?

Oui, avec une réserve. Si vous utilisez le constructeur de pages de destination de SeedProd, votre thème existant reste en place et seule la page de destination utilise des séparateurs de forme. Si vous activez le constructeur de thèmes de SeedProd, il 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 séparateur (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, comme des vagues ou des courbes, qui s'étend sur tout le bord 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 comment ajouter un séparateur de section à WordPress. Avec le puissant constructeur de sites Web par glisser-déposer de SeedProd, la création de séparateurs de forme 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 serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.