Comment créer un séparateur de forme personnalisé dans WordPress (2 méthodes)

Avez-vous déjà remarqué que certains sites web semblent plus attrayants à parcourir ? Il y a souvent un élément de design subtil à l'œuvre : des séparateurs de forme qui créent des transitions fluides et harmonieuses entre différentes sections.

Ces lignes courbes, angulaires ou en zigzag peuvent sembler être un détail mineur, mais elles font une énorme différence dans l'apparence professionnelle et moderne de votre site.

De plus, elles aident à structurer le contenu naturellement et à guider les yeux de vos visiteurs exactement là où vous le souhaitez.

Après avoir testé plusieurs options pour trouver les méthodes les plus fiables, nous en avons retenu deux qui donnent constamment d'excellents résultats.

Aujourd'hui, nous allons vous présenter ces deux approches simples : l'utilisation de la méthode par défaut de WordPress et SeedProd.

Pourquoi ajouter des séparateurs de forme personnalisés à votre site WordPress ?

Un séparateur de forme est un type de séparateur de section que vous ajoutez entre des blocs de contenu.

Ces séparateurs peuvent être simples, comme une ligne horizontale créée avec des blocs WordPress intégrés.

Vous pouvez utiliser ces séparateurs de base pour organiser et séparer le contenu, ce qui est particulièrement utile sur les pages qui couvrent de nombreux sujets différents.

Vous pouvez également créer des séparateurs de forme plus avancés en utilisant des plugins de constructeur de pages et d'autres logiciels de conception web. Ceux-ci peuvent mettre en évidence le contenu le plus important de votre site afin qu'il se démarque auprès des visiteurs et des clients.

L'introduction de séparateurs de forme d'aspect professionnel peut également rendre vos pages plus intéressantes et attrayantes.

Par exemple, vous pourriez les utiliser pour créer un arrière-plan unique pour votre formulaire d'inscription à la newsletter par e-mail.

Cela étant dit, voyons comment vous pouvez créer un séparateur de forme personnalisé dans WordPress. Utilisez simplement les liens rapides ci-dessous pour accéder directement à la méthode que vous souhaitez utiliser :

• Méthode 1 : Créer un séparateur de forme simple dans l'éditeur de blocs (aucun plugin requis)
• Méthode 2 : Créer un séparateur de forme personnalisé dans WordPress à l'aide d'un constructeur de pages (recommandé)
• Frequently Answered Questions: Custom Shape Dividers

Méthode 1 : Créer un séparateur de forme simple dans l'éditeur de blocs (aucun plugin requis)

La façon la plus simple d'ajouter un séparateur de forme WordPress est d'utiliser le bloc intégré Séparateur.

Cette méthode vous permet d'ajouter un séparateur de ligne horizontale entre n'importe quels blocs WordPress, puis de personnaliser la couleur et le style de la ligne.

Cette méthode ne vous permet pas d'ajouter différentes formes à WordPress et a des paramètres de personnalisation limités. Cependant, vous n'aurez pas besoin d'installer un plugin WordPress supplémentaire, c'est donc le moyen le plus simple d'ajouter un simple séparateur de forme à votre site Web.

Pour commencer, ouvrez simplement la publication ou la page où vous souhaitez ajouter un séparateur horizontal dans l'éditeur de contenu Gutenberg. Ensuite, cliquez sur le bouton « + » là où vous souhaitez placer ce séparateur.

Dans la fenêtre contextuelle, tapez « Séparateur ».

Lorsque le bon bloc apparaît, cliquez dessus pour l'ajouter à la page ou à la publication.

Pour personnaliser le bloc Séparateur par défaut, cliquez dessus, puis utilisez les paramètres du menu de droite.

Vous pouvez basculer entre la ligne par défaut, la ligne large et les points à l'aide des boutons de la section « Styles ».

Vous pouvez également changer la couleur de la ligne afin qu'elle corresponde au reste de votre thème ou de votre image de marque.

Pour ce faire, cliquez sur « Arrière-plan », puis choisissez une couleur dans la fenêtre contextuelle qui apparaît.

De plus, vous pouvez ajuster la marge du séparateur.

Plus la marge est grande, plus il y aura d'espace entre les blocs séparés.

Lorsque vous êtes satisfait de l'apparence du séparateur, vous pouvez cliquer sur le bouton « Publier » ou « Mettre à jour » pour activer la fonctionnalité de séparateur de forme.

Méthode 2 : Créer un séparateur de forme personnalisé dans WordPress à l'aide d'un constructeur de pages (recommandé)

Si vous souhaitez utiliser une forme différente et personnaliser chaque partie de vos séparateurs, nous vous recommandons d'utiliser le plugin SeedProd.

SeedProd est le meilleur plugin de constructeur de pages WordPress sur le marché, et il vous permet d'ajouter un séparateur de forme personnalisé à n'importe quelle section, ligne ou colonne à l'aide d'un simple éditeur par glisser-déposer.

Nous avons testé cet outil en profondeur dans notre environnement de démonstration et l'avons trouvé incroyablement convivial et intuitif. La création de pages est devenue un jeu d'enfant, surtout pour les nouveaux utilisateurs. Vous pouvez en savoir plus sur ce que nous avons découvert dans notre avis complet.

SeedProd dispose également de plus de 300 modèles conçus par des professionnels et de plus de 90 blocs que vous pouvez utiliser pour créer de magnifiques pages d'accueil personnalisées, des pages de destination, et plus encore.

La première chose à faire est d'installer et d'activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devez saisir votre clé de licence.

Vous pouvez trouver ces informations dans votre compte sur le site Web de SeedProd. Après avoir saisi la clé de licence, cliquez sur le bouton « Vérifier la clé ».

Une fois cela fait, allez dans SeedProd » Pages et cliquez sur le bouton « Ajouter une nouvelle page de destination ».

Après cela, il est temps de choisir un modèle de page. SeedProd propose une tonne de modèles de conception de sites Web professionnels que vous pouvez affiner pour qu'ils correspondent parfaitement à votre site Web WordPress.

Pour sélectionner un modèle, survolez-le simplement avec votre souris, puis cliquez sur l'icône « Coche ».

Ensuite, tapez un nom pour la page. SeedProd créera automatiquement une URL basée sur le titre de la page, mais vous pouvez modifier l'URL comme vous le souhaitez.

Lorsque vous êtes satisfait des informations que vous avez saisies, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Ensuite, vous serez dirigé vers l'éditeur de page par glisser-déposer, prêt à personnaliser le modèle.

L'éditeur SeedProd affiche un aperçu en direct de votre conception à droite et certains paramètres de bloc à gauche.

Le menu de gauche contient également des blocs que vous pouvez faire glisser sur votre mise en page.

Par exemple, vous pouvez faire glisser et déposer des blocs standard comme des boutons et des images ou utiliser des blocs avancés tels que le compte à rebours, des boutons de partage sur les réseaux sociaux, et plus encore.

Pour personnaliser un bloc, cliquez simplement dessus pour le sélectionner dans votre mise en page.

Le menu de gauche affichera alors tous les paramètres que vous pouvez utiliser pour configurer ce bloc. Vous pouvez également modifier les couleurs d'arrière-plan de la page, ajouter des images d'arrière-plan ou modifier la palette de couleurs et les polices pour mieux correspondre à votre marque.

SeedProd est également livré avec des « Sections », qui sont des collections de blocs souvent utilisés ensemble. Par exemple, SeedProd dispose d'une section d'en-tête, d'une image principale, d'appel à l'action, de témoignages clients, de fonctionnalités, de sections de pied de page, et plus encore.

Pour parcourir les différentes sections, cliquez simplement sur l'onglet « Sections ».

Vous pouvez déplacer les sections et les blocs dans votre mise en page en utilisant le glisser-déposer.

Si vous souhaitez supprimer un bloc, survolez-le simplement, puis cliquez sur l'icône de la corbeille lorsqu'elle apparaît.

Que vous choisissiez ou non d'utiliser une section SeedProd, vous pouvez maintenant créer un séparateur de forme personnalisé. Cliquez simplement pour sélectionner la section, la ligne ou la colonne où vous souhaitez ajouter le séparateur.

Ensuite, cliquez sur l'onglet « Avancé » dans le menu de gauche.

Maintenant, cliquez pour développer la section « Séparateur de forme ».

Pour commencer, vous pouvez choisir où afficher le séparateur de forme en sélectionnant le bouton « Haut » ou « Bas ».

Vous pouvez maintenant ouvrir le menu « Type » et choisir le séparateur de forme que vous souhaitez utiliser.

Lorsque vous sélectionnez différentes formes, l'aperçu en direct se met à jour automatiquement afin que vous puissiez essayer différents styles pour voir ce qui rend le mieux.

Après avoir choisi un séparateur de forme, vous pouvez le styliser en utilisant les nouveaux paramètres.

Pour commencer, vous pouvez cliquer sur « Couleur », puis choisir une nouvelle couleur dans la fenêtre contextuelle qui apparaît.

Une fois cela fait, vous pouvez agrandir ou réduire le séparateur en faisant glisser les curseurs « Largeur » et « Hauteur ».

Si vous avez déjà une taille spécifique en tête, vous pouvez taper ces nombres dans les cases.

Vous pouvez également essayer de retourner le séparateur en cliquant pour activer ou désactiver le commutateur « Retourner ».

Par défaut, le séparateur apparaîtra derrière le reste du contenu, de sorte que les utilisateurs puissent clairement voir tout texte, image ou autre contenu qui chevauche le séparateur.

Cependant, déplacer la forme vers l'avant peut créer des effets intéressants. Si vous souhaitez voir à quoi cela ressemble, cliquez simplement pour activer le commutateur « Mettre au premier plan ».

Pour ajouter d'autres séparateurs, suivez simplement le même processus décrit ci-dessus.

Vous pouvez même ajouter un séparateur de forme en haut et en bas d'une zone, ce qui crée souvent des résultats impressionnants et accrocheurs.

Vous pouvez continuer à travailler sur la page en ajoutant d'autres blocs et en personnalisant ces blocs dans le menu de gauche.

Lorsque vous êtes satisfait de l'apparence de la page, cliquez sur le bouton « Enregistrer ». Vous pouvez ensuite sélectionner « Publier » pour rendre cette page publique.

Comment ajouter des séparateurs de forme à un thème WordPress

L'éditeur glisser-déposer de SeedProd vous donne la liberté d'ajouter un séparateur de forme unique à n'importe quelle page. Cependant, vous voudrez peut-être parfois utiliser les mêmes séparateurs de forme sur plusieurs pages Web, voire sur l'ensemble de votre blog WordPress ou site Web.

Cela vous aidera à créer un design cohérent et peut également vous faire gagner beaucoup de temps. Dans ce cas, nous vous recommandons d'ajouter un séparateur de forme à votre thème à l'aide du constructeur de thèmes SeedProd.

Avec SeedProd, vous pouvez créer et personnaliser un thème WordPress sans écrire une seule ligne de code. 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, les articles uniques, et plus encore.

Vous pouvez ensuite personnaliser ces fichiers à l'aide de l'éditeur glisser-déposer familier. Cela inclut l'ajout de séparateurs de forme en suivant le même processus décrit ci-dessus.

Lorsque vous activez le nouveau thème à l'aide de SeedProd, il remplacera votre thème WordPress existant. Vous ne devez donc utiliser cette méthode que si vous souhaitez remplacer votre thème actuel.

Pour des instructions détaillées étape par étape, veuillez consulter notre guide sur comment créer facilement un thème WordPress personnalisé.

Questions fréquemment posées : Séparateurs de forme personnalisés

Voici quelques questions fréquemment posées par nos lecteurs concernant la création d'un séparateur de forme personnalisé :

Les séparateurs de forme affecteront-ils la vitesse de mon site ?

En général, les séparateurs de forme n'ont pas d'impact majeur sur les performances, surtout s'ils sont créés en CSS pur ou avec SeedProd. Ils sont légers et se chargent rapidement dans le navigateur.

Cependant, si vous les utilisez à l'excès ou si vous vous fiez aux fichiers image, cela pourrait légèrement augmenter les temps de chargement. Pour que votre site reste rapide :

• Utilisez un minimum de plugins.
• Préférez les SVG aux fichiers image volumineux.
• Évitez de superposer trop d'effets dans une seule section.

L'équilibre entre le design et la vitesse est essentiel pour une expérience utilisateur fluide.

Comment m'assurer que mes séparateurs de forme sont jolis sur mobile ?

La conception réactive est super importante. Si vous utilisez un constructeur de pages, la plupart vous permettront d'ajuster la visibilité, la hauteur et l'orientation du séparateur de forme séparément pour le bureau, la tablette et le mobile.

Voici quelques conseils :

• Testez vos séparateurs de forme sur différentes tailles d'écran. SeedProd facilite cela en vous permettant de prévisualiser l'apparence de votre design sur mobile directement dans le constructeur par glisser-déposer.
• Utilisez des formes plus petites ou simplifiées sur mobile.
• Évitez les formes qui rendent le texte difficile à lire ou qui chevauchent du contenu important.

Des outils comme SeedProd fournissent des contrôles réactifs qui vous permettent de peaufiner chaque version de votre site facilement.

Où puis-je trouver des SVG de séparateurs de forme prêts à l'emploi ?

Il existe de nombreuses ressources gratuites où vous pouvez télécharger des séparateurs de forme SVG préconçus. Ceux-ci fonctionnent très bien si vous souhaitez quelque chose de personnalisé sans avoir à concevoir à partir de zéro.

Voici quelques options :

• Haikei – Générateur SVG gratuit pour des formes uniques et personnalisables.
• ShapeDividers.com – Propose divers séparateurs SVG que vous pouvez copier et coller.

Une fois que vous avez téléchargé le SVG, vous pouvez le coller dans un bloc HTML personnalisé ou l'inclure dans les fichiers de votre thème, selon votre configuration.

Découvrez plus d'astuces et de conseils de conception WordPress

Vous souhaitez ajouter d'autres fonctionnalités de conception qui impressionneront les visiteurs de votre site web ? Consultez ces astuces et conseils de conception WordPress pour plus d'informations :

• Comment ajouter un effet parallax à n'importe quel thème WordPress
• Comment créer une barre de pied de page flottante « collante » dans WordPress
• Guide du débutant pour créer un menu WordPress réactif prêt pour mobile
• Comment ajouter une animation de préchargement à WordPress (étape par étape)
• Comment ajouter des majuscules ornées dans les articles WordPress
• Guide du débutant pour ajouter le mode sombre à votre site WordPress (Facile)
• Comment ajouter un arrière-plan animé dans WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment créer un séparateur de forme personnalisé dans WordPress. Vous pourriez également vouloir apprendre comment ajouter des boîtes de fonctionnalités avec des icônes dans WordPress et nos conseils d'experts sur les moyens de créer un site WordPress adapté aux mobiles.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.