Comment ajouter un séparateur de ligne horizontale dans WordPress (3 méthodes)

Avez-vous déjà publié un article de blog WordPress qui semblait bien à première vue, mais qui était difficile à lire une fois que vous l'aviez parcouru ? De longs blocs de texte peuvent submerger les lecteurs et les faire perdre intérêt, même si le contenu est précieux.

Parfois, il suffit d'une simple ligne horizontale pour améliorer le flux du contenu. Ces séparateurs divisent le texte pour qu'il paraisse plus organisé et plus facile à suivre. Ils aident également à mettre en évidence des annonces importantes, des promotions ou des transitions entre les sections d'une manière naturelle.

Dans ce tutoriel, nous vous présenterons trois méthodes simples pour ajouter des séparateurs de ligne horizontale dans WordPress.

De cette façon, vous pouvez rendre vos articles soignés et professionnels avec un minimum d'effort. 🙌

Pourquoi devriez-vous ajouter un séparateur de ligne horizontale dans WordPress ?

Un séparateur de ligne horizontale divise les sections, rend votre contenu plus facile à parcourir et maintient l'intérêt des lecteurs.

Au-delà de la lisibilité, les lignes horizontales sont également utiles pour attirer l'attention sur des points clés, mettre en évidence des citations, ou créer des transitions fluides entre les idées.

Dans l'ensemble, les visiteurs décident en quelques secondes s'ils restent sur votre page ou s'ils la quittent. Sur de nombreux appareils, votre article de blog peut apparaître comme un long mur de texte, ce qui peut être écrasant à lire.

Une simple ligne horizontale peut changer cela. ✅

Puisqu'il s'agit d'un guide complet sur la façon d'ajouter un séparateur de ligne horizontale dans WordPress, vous pouvez utiliser notre table des matières pour trouver la méthode que vous souhaitez utiliser :

• Method 1: Adding a Horizontal Line in the WordPress Block Editor
• Method 2: Adding a Horizontal Line in the WordPress Classic Editor
• Méthode 3 : Diviser un long formulaire en plusieurs pages avec WPForms
• Bonus Separators You Can Use in Your Posts and Pages
  • Le bloc Espaceur
  • Le bloc Plus
  • Le bloc Saut de page
• Foire aux questions sur l'ajout de lignes horizontales dans WordPress
• Continuez à apprendre : Conseils pour gérer vos articles et pages WordPress

Prêt ? Allons-y.

Méthode 1 : Ajouter une ligne horizontale dans l'éditeur de blocs WordPress

Pour ajouter une ligne horizontale à l'aide de l'éditeur de blocs WordPress, vous pouvez cliquer sur l'icône '+' pour ajouter un nouveau bloc là où vous souhaitez que la ligne apparaisse.

Ensuite, sélectionnons le bloc 'Séparateur' dans la section 'Éléments de mise en page'.

Vous pouvez le trouver facilement en utilisant la barre de recherche.

Une fois ajouté, vous verrez votre séparateur de ligne horizontale dans la zone de contenu.

Styliser la ligne horizontale dans l'éditeur de blocs WordPress

Par défaut, le diviseur horizontal est une ligne gris pâle au centre de votre article ou page.

Vous pouvez modifier son apparence en cliquant sur la ligne pour sélectionner son bloc. Ensuite, le panneau d'édition 'Bloc' s'ouvrira sur le côté droit de votre écran.

Pour changer le style de votre ligne, cliquez sur la petite flèche à côté de 'Styles'. Vous verrez alors les différentes options.

Vous pouvez changer la ligne horizontale pour l'une de celles-ci si vous le souhaitez :

• Une ligne large qui couvre toute la largeur du contenu de votre article.
• Trois points sont affichés au centre de votre publication.

Vous pouvez également modifier la couleur de votre ligne horizontale dans les paramètres « Couleur ».

Cliquez simplement sur l'une des options affichées ou utilisez le lien 'Couleur personnalisée' pour choisir n'importe quelle couleur.

Si vous souhaitez revenir à la couleur grise par défaut, cliquez simplement sur le bouton « Effacer » sous les options de couleur.

Ici, notre ligne horizontale est bleue et utilise le style « large ».

Méthode 2 : Ajouter une ligne horizontale dans l'éditeur classique de WordPress

Si vous utilisez l'éditeur classique (souvent activé avec un plugin), vous pouvez toujours ajouter facilement des lignes horizontales.

Pour ce faire, modifiez simplement une publication ou une page existante ou créez-en une nouvelle. Si vous ne voyez qu'une seule rangée de boutons dans la barre d'outils au-dessus de l'éditeur de publication, cliquez sur l'icône « Basculer la barre d'outils » sur la droite :

Cela ouvrira la deuxième rangée de boutons, qui comprend l'option de ligne horizontale.

À partir de là, la première chose à faire est de placer votre curseur sur une nouvelle ligne où vous souhaitez insérer la ligne horizontale.

Vous pouvez ensuite cliquer sur l'icône « Ligne horizontale ». C'est la deuxième à partir de la gauche sur la deuxième rangée :

Une fois ajoutée, vous verrez une ligne horizontale gris clair.

Elle couvrira toute la largeur de votre publication comme ceci :

Ajout manuel d'une ligne horizontale à l'aide de HTML

Dans de rares cas, vous devrez peut-être ajouter manuellement un séparateur de ligne horizontale dans votre contenu WordPress.

Si c'est le cas, vous pouvez simplement le faire en utilisant la balise HTML <hr> dans votre contenu :

<hr>

Vous pouvez ajouter cette balise dans la vue 'Texte' de l'éditeur classique ou dans un bloc 'HTML personnalisé' dans l'éditeur de blocs.

C'est un moyen rapide d'ajouter un séparateur lorsque vous travaillez avec du code.

Méthode 3 : Diviser un long formulaire en plusieurs pages avec WPForms

Parfois, il faut diviser un long formulaire pour le rendre moins intimidant pour les utilisateurs. Au lieu d'une ligne visuelle, vous pouvez diviser votre formulaire en plusieurs pages. Nous vous montrerons comment faire cela en utilisant notre constructeur de formulaires de contact WordPress préféré, WPForms.

En fait, WPForms est l'outil que nous aimons et utilisons nous-mêmes, nous vous recommandons donc vivement de le considérer. Pour plus d'informations sur le plugin, consultez notre guide complet de revue WPForms !

Tout d'abord, vous devrez télécharger, installer et activer le plugin WPForms. Si vous ne savez pas comment faire, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Ensuite, vous pouvez aller dans WPForms » Ajouter nouveau depuis votre tableau de bord WordPress.

Sur l'écran suivant, vous entrerez un nom pour votre formulaire, puis choisirez un modèle.

Pour ce tutoriel, nous allons utiliser le modèle « Formulaire de demande de devis ».

Après avoir choisi un modèle, vous pouvez simplement passer le curseur de votre souris sur le modèle et cliquer sur le bouton pour créer votre formulaire.

Ensuite, faisons défiler l'onglet « Ajouter des champs » sur le côté gauche jusqu'à la section « Champs fantaisie ».

Ensuite, vous pouvez faire glisser et déposer le « Saut de page » où vous le souhaitez sur le formulaire. Nous le plaçons juste avant la boîte « Demande ».

Vous verrez que le formulaire est maintenant divisé en 2 parties. WPForms a automatiquement ajouté un bouton « Suivant », également.

Vous pouvez modifier l'étiquette « Suivant » si vous le souhaitez, et vous pouvez ajouter un bouton « Précédent » pour que les utilisateurs accèdent à la deuxième page du formulaire.

Cliquez simplement sur le champ de saut de page pour le modifier.

Une fois que vous avez terminé, vous pouvez enregistrer le formulaire en cliquant sur le bouton « Enregistrer » en haut à droite.

Il est maintenant temps d'ajouter le formulaire à votre site web.

Cliquez sur le bouton « Intégrer » juste à côté du bouton « Enregistrer » pour commencer. Cela ouvrira une fenêtre contextuelle où vous pourrez créer un nouvel article ou une nouvelle page, ou modifier un article ou une page existant(e).

Pour ce tutoriel, nous choisirons l'option « Sélectionner une page existante ».

L'étape suivante consiste à choisir parmi les pages disponibles et à cliquer sur « C'est parti ! »

Vous serez ensuite redirigé vers l'éditeur de contenu de WordPress.

À partir de là, cliquez simplement sur l'icône « + » pour ajouter un nouveau bloc à votre article ou à votre page et recherchez le bloc « WPForms ». Vous pouvez utiliser la barre de recherche ou regarder dans la section « Widgets ».

Une fois que vous l'avez trouvé, cliquez dessus pour ajouter le bloc à votre page.

Vous verrez maintenant une option pour sélectionner votre formulaire.

Choisissez le formulaire que vous venez de créer dans la liste déroulante.

Une fois que vous avez fait cela, vous pouvez publier l'article ou la page. Et c'est tout !

Maintenant, si vous visitez l'article ou la page, vous pouvez voir le formulaire en action.

Bonus Séparateurs que vous pouvez utiliser dans vos articles et pages

Outre une ligne horizontale, l'éditeur de blocs WordPress propose d'autres blocs utiles pour vous aider à organiser votre contenu et à améliorer la mise en page. Examinons quelques excellentes alternatives.

Le bloc Espaceur

Le bloc « Espaceur » vous permet d'ajouter un espace blanc entre les blocs.

Par exemple, si vous souhaitez un léger espace à la fin de votre article avant un lead magnet, vous pouvez utiliser « Espaceur ».

Voici à quoi il ressemble lorsque vous créez votre article dans l'éditeur de blocs :

Vous pouvez personnaliser la hauteur de l'espaceur pour mieux l'adapter à votre zone de contenu.

Et voici à quoi l'espaceur pourrait ressembler sur votre site :

Le bloc Plus

Si votre thème affiche les articles complets sur votre page de blog principale au lieu d'extraits, l'ajout d'un lien « Lire la suite » coupera votre article à ce point.

Cela obligera les visiteurs à cliquer pour lire la suite.

L'image ci-dessus montre ce que vous verrez dans l'éditeur de contenu.

Et ci-dessous, voici à quoi cela pourrait apparaître sur votre site pour les visiteurs :

Vous pouvez en savoir plus à ce sujet dans nos guides sur comment utiliser correctement le bloc Plus et comment personnaliser facilement les extraits dans WordPress.

Le bloc Saut de page

« Saut de page » divise un long article de blog en plusieurs pages (une technique appelée pagination).

Le bloc lui-même n'a pas d'options de style dans l'éditeur, donc son apparence est contrôlée par votre thème WordPress. Voici à quoi il ressemble lorsque vous rédigez votre article :

Ensuite, « Saut de page » utilisera les numéros de page et permettra aux lecteurs de choisir la page à laquelle ils souhaitent accéder.

Voici à quoi il pourrait ressembler sur votre site WordPress :

Pour plus de détails, vous pouvez consulter notre guide sur la façon de diviser les articles WordPress en plusieurs pages.

Chacune de ces options pourrait être une bonne alternative à l'ajout d'une ligne horizontale dans WordPress, en fonction de votre objectif.

Foire aux questions sur l'ajout de lignes horizontales dans WordPress

Quel est le tag HTML pour une ligne horizontale ?

Le tag HTML pour une ligne horizontale est <hr>, ce qui signifie « règle horizontale ». Vous pouvez ajouter ce tag dans l'éditeur de code pour insérer manuellement un séparateur de ligne standard.

Comment puis-je personnaliser la ligne horizontale dans WordPress ?

L'éditeur de blocs WordPress dispose de paramètres intégrés qui vous permettent de modifier le style et la couleur de la ligne. Pour des personnalisations plus avancées, comme l'ajustement de l'épaisseur ou la création de designs uniques, vous utiliseriez généralement du CSS personnalisé.

Puis-je utiliser une image au lieu d'une ligne comme séparateur ?

Absolument. L'utilisation d'une image personnalisée comme séparateur peut ajouter une touche unique et personnalisée à votre contenu. Pour un contrôle créatif encore plus poussé, un plugin de création de pages comme SeedProd vous permet de concevoir des diviseurs de section personnalisés sans aucun code.

Continuez à apprendre : Conseils pour gérer vos articles et pages WordPress

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des séparateurs de ligne horizontale dans WordPress.

Si vous souhaitez ajouter plus d'éléments de conception et de mise en page à vos articles et pages, consultez nos articles sur :

• Les meilleurs constructeurs de pages WordPress par glisser-déposer
• Comment créer un séparateur de forme personnalisé dans WordPress
• Comment afficher une liste des articles mis à jour en dernier dans WordPress
• Comment ajouter des statuts de publication personnalisés pour les articles de blog dans WordPress
• Comment créer des types de publication personnalisés dans WordPress
• Comment protéger une page ou un article par mot de passe dans WordPress

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.