Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment créer un Séparateur de forme personnalisé dans WordPress (2 façons)

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

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

Les Séparateurs peuvent organiser votre contenu d’une manière attrayante et captivante. Ils peuvent également mettre en évidence le contenu le plus important de votre site afin que les internautes et les clients/clientes ne passent pas à côté d’informations cruciales.

Dans cet article, nous allons vous afficher comment créer un séparateur de forme personnalisé dans WordPress.

How to create a custom shape divider in WordPress

Pourquoi créer des Séparateurs de formes personnalisés dans WordPress ?

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

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

A custom shape divider, created using the built-in WordPress tools

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 à l’aide d’extensions de constructeurs 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 internautes et des clients/clientes.

A custom shape divider, created using SeedProd

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

Vous pouvez par exemple les utiliser pour créer un arrière-plan unique pour le formulaire d’inscription à votre lettre d’information par e-mail.

How to create a custom shape divider using SeedProd

Ceci étant dit, voyons comment vous pouvez créer un séparateur de forme personnalisé dans WordPress. Il suffit d’utiliser les liens rapides ci-dessous pour passer directement à la méthode que vous souhaitez utiliser :

Méthode 1 : Créer un Séparateur de forme simple dans l’Éditeur de blocs (Aucune extension nécessaire)

La manière la plus simple de créer un séparateur de forme personnalisé sur WordPress est d’utiliser le bloc Separator intégré.

Cette méthode vous permet d’ajouter un séparateur de ligne horizontal entre tous les blocs WordPress et de personnaliser la couleur et le style de la ligne.

A custom divider created using the WordPress block editor

Cette méthode ne vous permet pas d’ajouter des formes différentes à WordPress et a des réglages de personnalisation limités. Cependant, vous n’aurez pas besoin d’installer une extension WordPress supplémentaire, c’est donc le moyen le plus simple d’ajouter un Séparateur de forme simple à votre site.

Pour Premiers pas, il suffit d’ouvrir 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’endroit où vous souhaitez placer ce séparateur.

Adding a Separator block to WordPress

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

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

Add a custom shape divider to a WordPress website

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

Les boutons de la section « Styles » vous permettent de passer d’un style à l’autre : par défaut, ligne large ou points.

Adding different line styles in WordPress

Vous pouvez également modifier la couleur de la ligne pour qu’elle s’harmonise avec le reste de votre thème ou de votre marque.

Pour ce faire, cliquez sur « Arrière-plan », puis choisissez une couleur dans la fenêtre surgissante.

How to style the Separator block in WordPress

En outre, vous pouvez ajuster la marge externe du séparateur.

Plus la marge externe est importante, plus il y aura d’espace entre les blocs séparés.

Adjusting the Separator block's margins in the block editor

Lorsque vous êtes satisfait de l’aspect du séparateur, vous pouvez cliquer sur le bouton « Publier » ou « Mettre à jour » pour mettre en direct la fonctionnalité du séparateur de formes.

Si vous souhaitez utiliser une forme différente et personnaliser chaque partie de vos séparateurs, nous vous recommandons d’utiliser l’extension SeedProd.

SeedProd est le meilleur plugin de constructeur de page 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 drag-and-drop.

Creating a custom shape divider in WordPress

Il est également livré avec plus de 300 modèles professionnellement conçus et plus de 90 blocs que vous pouvez utiliser pour créer de magnifiques pages d’accueil personnalisées, des pages d’atterrissage, et plus encore.

Note : Il existe une version gratuite de SeedProd disponible sur WordPress.org, mais nous utiliserons la version Pro car elle est livrée avec une large plage de diviseurs de forme.

La première chose à faire est d’installer et d’activer l’extension SeedProd. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Lors de l’activation, vous devez saisir votre clé de licence.

Adding a license key to the SeedProd page builder

Vous trouverez ces informations dans votre compte sur le site de SeedProd. Après avoir saisi/saisie la clé de licence, cliquez sur le bouton ‘Vérifier la clé’.

Ceci fait, allez dans SeedProd  » Pages et cliquez sur le bouton  » Ajouter une nouvelle page d’atterrissage « .

How to create a new landing page design using SeedProd

Après cela, il est temps de choisir un modèle de page. SeedProd dispose d’une tonne de modèles de conception de sites professionnels que vous pouvez peaufiner pour qu’ils s’adaptent parfaitement à votre site WordPress.

Pour sélectionner un modèle, il suffit de survoler le modèle avec la souris et de cliquer sur l’icône « Coche ».

Choosing a page design template for your WordPress website

Ensuite, allez-y et 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 modifications saisies, cliquez sur le bouton « Enregistrer et commencer à modifier la page ».

Creating a custom landing page using SeedProd

Ensuite, vous serez dirigé vers le constructeur de page par glisser-déposer, prêt à personnaliser le Modèle.

L’éditeur SeedProd affiche une Prévisualisation directe de votre dessin à droite et quelques Réglages de blocs à gauche.

The SeedProd drag and drop page builder

Le menu de gauche propose é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 tels que des boutons et des images ou utiliser des blocs avancés tels que le compte à rebours, les boutons de partage des réseaux sociaux, et plus encore.

Adding blocks to a WordPress page builder

Pour personnaliser un bloc, il suffit de cliquer pour le sélectionner dans votre mise en page.

Le menu de gauche affiche alors tous les réglages que vous pouvez utiliser pour définir ce bloc. Vous pouvez également modifier les couleurs d’arrière-plan de la page, ajouter des images d’arrière-plan ou modifier le jeu de couleurs et les polices pour mieux correspondre à votre marque.

Customizing the background color in WordPress

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

Pour consulter les différentes sections, il suffit de cliquer sur l’onglet « Sections ».

Adding a Section to a custom page template

Vous pouvez déplacer des sections et des blocs dans votre mise en page par glisser-déposer.

Si vous souhaitez supprimer un bloc, il vous suffit de le survoler, puis de cliquer sur l’icône de la corbeille lorsqu’elle apparaît.

Deleting blocks from a custom page design

Que vous choisissiez ou non d’utiliser une section SeedProd, vous pouvez désormais créer un séparateur de forme personnalisée. Il vous suffit de cliquer pour sélectionner la section, la ligne ou la colonne où vous souhaitez ajouter le séparateur.

Cliquez ensuite sur l’onglet « Avancé » dans le menu de gauche.

SeedProd's 'Advanced' settings

Cliquez ensuite sur pour déplier la section « Séparateur de formes ».

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

Adding a custom divider to the bottom of a WordPress block

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

Au fur et à mesure que vous sélectionnez différentes formes, la Prévisualisation directe se met à jour automatiquement, ce qui vous permet d’essayer différents styles pour voir ce qui vous convient le mieux.

Adding custom shape dividers to a custom landing page

Après avoir choisi une forme de séparateur, vous pouvez la définir à l’aide des nouveaux Réglages.

Pour commencer, vous pouvez cliquer sur « Couleur » et choisir une nouvelle couleur dans la fenêtre surgissante.

Adding a color to a custom shape divider in WordPress

Une fois cette étape franchie, 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 chiffres dans les cases.

Create a custom shape divider in WordPress

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

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

Cependant, le fait de déplacer la forme vers l’avant peut créer des effets intéressants. Si vous souhaitez voir ce que cela donne, il vous suffit de cliquer pour activer le commutateur « Ramener à l’avant ».

Bringing the custom shape divider to the front

Pour ajouter d’autres Séparateurs, il suffit de suivre la même procédure que celle décrite ci-dessus.

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

Adding multiple custom shape dividers to a single section

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’aspect de la page, cliquez sur le bouton « Enregistrer ». Vous pouvez ensuite sélectionner « Publier » pour rendre cette page En direct.

Publishing a custom shape divider

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

L’éditeur Avancée/éditrices de SeparProd vous donne la liberté d’ajouter un diviseur de forme unique à n’importe quelle page. Cependant, il peut arriver que vous souhaitiez utiliser les mêmes séparateurs de forme sur plusieurs pages web ou même sur l’ensemble de votre blog ou site WordPress.

Cela vous aidera à créer un design cohérent et peut également vous faire enregistrer une tonne de temps. Dans ce cas, nous vous recommandons d’ajouter un Séparateur de forme à votre thème en utilisant le Constructeur de thème SeedProd.

Avec SeedProd, vous pouvez créer et personnaliser un thème WordPress sans écrire de code. Il crée tous les fichiers qui composent votre thème, y compris la colonne latérale, l’en-tête, le pied de page, les publications uniques, et plus encore.

The SeedProd theme builder

Vous pouvez ensuite personnaliser ces fichiers à l’aide de l’outil familier de construction par glisser-déposer. Vous pouvez notamment ajouter des Séparateurs de forme en suivant le même processus que celui décrit ci-dessus.

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

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

Découvrez d’autres conseils et astuces de conception de WordPress

Vous souhaitez ajouter d’autres fonctionnalités de conception qui impressionnent les internautes ? En savoir plus sur ces conseils et astuces de conception WordPress :

Nous espérons que ce tutoriel vous a aidé à apprendre comment créer un séparateur de forme personnalisé sur WordPress. Vous voudrez peut-être aussi apprendre comment ajouter des boîtes de fonctionnalité avec des icônes dans WordPress et nos astuces d’experts sur les façons de créer un site WordPress adapté aux mobiles.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

Un commentaireLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.