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 ajouter un séparateur de ligne horizontale dans WordPress (3 méthodes)

L’Ajout d’une ligne horizontale à votre publication ou page WordPress est un moyen efficace d’améliorer la lisibilité. Ces lignes aident à décomposer les longues publications en sections gérables, ce qui garantit que votre contenu reste attrayant.

Les séparateurs horizontaux sont également parfaits pour attirer l’attention sur des annonces ou des promotions importantes. Ils séparent clairement les différentes parties de votre page, ce qui permet aux lecteurs de suivre plus facilement.

Dans ce guide, nous allons vous présenter 3 méthodes faciles pour ajouter des séparateurs de lignes horizontales dans WordPress. Nous partagerons également quelques alternatives aux séparateurs de lignes horizontales.

How to add a horizontal line in WordPress

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

Il faut uniquement quelques secondes aux internautes pour décider de quitter votre page. Selon l’appareil, les navigateurs peuvent afficher votre publication de blog sous la forme de longs murs de texte.

De nombreux Lecteurs quitteront le site si le contenu est trop difficile à lire, même si l’article de blog est plein de valeur.

L’ajout d’un séparateur de ligne horizontal pourrait être tout ce qu’il faut pour que votre contenu soit lu.

Un séparateur de ligne horizontal peut aider à améliorer la lisibilité et, en fin de compte, à stimuler l’engagement des utilisateurs/utilisatrices dans vos publications et pages de blog. Au-delà, il peut mettre en évidence les points clés, ce qui aide à souligner les citations ou les transitions importantes au sein de votre contenu.

Puisqu’il s’agit ici d’un guide complet sur la façon d’ajouter un séparateur de ligne horizontale dans WordPress, vous trouverez peut-être utile d’utiliser notre table des matières pour trouver la méthode que vous souhaitez utiliser :

Vous êtes prêts ? Entrons dans le vif du sujet.

Méthode 1 : Ajout d’une ligne horizontale dans l’éditeur de blocs de 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’endroit où vous souhaitez que la ligne se trouve.

Adding a new block where you want your horizontal line

Sélectionné ensuite le bloc « Séparateur » dans la section « Éléments de mise en page ».

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

Find and add the Separator block

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

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

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

Vous pouvez modifier son apparence en cliquant sur la ligne pour sélectionner son bloc. Le panneau de modification « Bloc » s’ouvre alors sur le côté droit de l’écran.

Click on the Separator block to select it and edit the settings

Pour modifier le style de votre ligne, il vous suffit de cliquer sur la petite flèche située à côté de Modifiés. Vous verrez alors les différentes options.

Vous pouvez modifier la ligne horizontale pour qu’elle devienne l’une de ces lignes si vous le souhaitez :

  • Une ligne large qui couvre toute la largeur du contenu de votre publication.
  • Trois points sont affichés au centre de votre publication.
The different styles available for the Separator block

Note : Dans certains thèmes WordPress, la ligne large et la ligne par défaut couvrent toute la largeur de votre publication.

Vous pouvez également modifier la couleur de votre ligne horizontale dans les Réglages « Couleur ». Il vous suffit de cliquer sur l’une des options proposées ou d’utiliser le lien « Couleur personnalisée » pour choisir n’importe quelle couleur.

Change the color of the horizontal line

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

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

A horizontal line that's been modified to be wide and blue

Méthode 2 : Ajout d’une ligne horizontale dans l’éditeur WordPress Classic

Si vous utilisez encore les éditeurs/éditrices classiques, ne vous inquiétez pas : vous pouvez toujours ajouter des lignes horizontales de base.

Pour ce faire, il vous suffit de modifier une publication ou une page existante ou d’en créer une nouvelle. Si vous voyez uniquement une rangée de boutons dans la barre d’outils au-dessus de l’éditeur de message, cliquez sur l’icône de barre d’outils commutateur à droite :

Click the Toolbar Toggle button to see the second row of icons

Cela ouvre la deuxième ligne d’affilée de boutons, qui comprend l’option de ligne horizontale.

Maintenant, allez-y et mettez un saut de ligne entre les paragraphes à l’endroit où vous voulez que la ligne horizontale aille. Vous pouvez alors cliquer sur l’icône « Ligne horizontale ». C’est la deuxième en partant de la gauche sur la deuxième ligne :

The horizontal line button in the classic WordPress editor

Une fois ajouté, vous verrez apparaître une ligne horizontale gris clair.

Il couvrira toute la largeur de votre publication comme ceci :

A horizontal rule created using the classic editor

Ajout manuel d’une ligne de séparation horizontale à l’aide de HTML

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

Si c’est le cas, vous pouvez simplement le faire en utilisant l’identifiant HTML hr dans votre contenu :

<hr>

Cela ajoutera le séparateur de ligne horizontale au contenu de votre publication.

Méthode 3 : Ajouter un saut de page dans les formulaires WordPress en utilisant WPForms

Et si vous voulez placer une pause non pas dans une publication ou une page, mais dans un formulaire de contact WordPress? C’est également possible !

Nous allons utiliser WPForms pour cela.

Tout d’abord, vous devez télécharger, installer et activer l’extension WPForms. Si vous n’êtes pas sûr de savoir comment faire, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Ensuite, vous pouvez aller dans WPForms  » Add New depuis votre Tableau de bord WordPress.

Creating a new form using WPForms

Dans l’écran suivant, vous saisirez un nom pour votre formulaire, puis vous 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, il vous suffit de passer le curseur de votre souris sur le modèle et de cliquer sur le bouton pour créer votre formulaire.

Creating a quote form in WPForms

Ensuite, défilons vers le bas de l’onglet « Ajouter des champs » sur le côté gauche jusqu’à la section « Champs fantaisie ».

Ensuite, vous pouvez faire glisser et déposer l' »Avancée de la page » à l’endroit de votre choix sur le formulaire. Nous le plaçons juste avant la case « Demande ».

Adding a page break in WPForms

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

Vous pouvez modifier le libellé « Suivant » si vous le souhaitez et ajouter un bouton « Précédent » pour permettre aux utilisateurs/utilisatrices de passer à la deuxième page du formulaire.

Il suffit de cliquer sur le champ du saut de page pour le modifier.

Editing the page break field in WPForms

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.

Cliquez sur le bouton « Contenu embarqué » à côté du bouton « Enregistrer » pour Premiers pas. Cela ouvrira une fenêtre prompte où vous pourrez créer une nouvelle publication ou page ou modifier une publication ou page existante.

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

WPForms' embed prompt window

L’étape suivante consiste à choisir parmi les pages disponibles et à cliquer sur « Let’s Go ! ».

Vous serez alors redirigé vers l’éditeur de contenu de WordPress.

À partir de là, cliquez simplement sur l’icône  » +  » pour ajouter un nouveau bloc à votre publication ou à votre page et trouvez 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 module à votre page.

Adding the WPForms block to your page or post

Une option vous permet maintenant de sélectionner votre formulaire.

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

Choose your form from the dropdown list

Une fois que vous avez fait cela, vous pouvez publier la publication ou la page. Et c’est tout !

Maintenant, si vous visitez la publication ou la page, vous pouvez voir le formulaire en action.

The form with a page break on the website

Astuce bonus : Autres séparateurs que vous pouvez utiliser dans vos publications et pages

L’éditeur de blocs par défaut de WordPress vous permet d’ajouter plusieurs types de séparateurs à vos publications et à vos pages.

Outre le séparateur de lignes horizontales, les autres options de l’ensemble de blocs « Éléments de mise en page » comprennent les blocs « Espacement », « Plus » et « Saut de page ».

Le bloc d’écartement

Le bloc « Spacer » vous permet d’ajouter un espace blanc entre les blocs. Par exemple, si vous souhaitez ajouter un léger espace à la fin de votre publication avant une offre spéciale, vous pouvez utiliser le bloc « Spacer ».

Voici à quoi cela ressemble lorsque vous créez votre publication dans l’éditeur de blocs :

The Spacer block in the block editor

Vous pouvez personnaliser la hauteur de l’espaceur pour qu’il s’adapte mieux à votre zone de contenu.

Et voici comment l’espaceur pourrait apparaître sur votre site :

How the spacer block appears in a page or post

Le bloc More

Si votre thème affiche des articles complets sur la page principale de votre blog au lieu d’extraits, l’ajout d’un lien « Plus » inactive votre publication à cet endroit.

Il est donc nécessaire que les internautes cliquent pour en savoir plus.

The More block in the post editor

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

Et voici comment cela pourrait apparaître sur votre site pour les internautes :

The Read More block in a post on the site

Vous pouvez en savoir plus à ce sujet dans nos guides sur la façon d’utiliser correctement le bloc more et sur la façon de personnaliser facilement des extraits dans WordPress.

Le bloc de saut de page

La fonction ‘Saut de page’ vous permet de diviser les longs articles de blog en plusieurs pages, mais vous ne pouvez en aucun cas la personnaliser. Voici à quoi cela ressemble lorsque vous créez votre publication :

The page break block shown in the block editor

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

Voici comment cela pourrait apparaître sur votre site :

The page break as it appears on a site

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

Nous espérons que ce tutoriel vous a aidé à apprendre comment ajouter des séparateurs de lignes horizontales dans WordPress. Si vous souhaitez ajouter plus d’éléments de conception et de mise en page à vos publications et pages, consultez notre article sur les meilleurs constructeurs de pages WordPress par glisser-déposer ou lisez notre article de blog sur la façon de créer un séparateur de forme personnalisé sur WordPress.

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

4 commentairesLaisser une réponse

  1. Jiří Vaněk

    May I ask you, if its possible to make dividier horizontal, instead fo vertical?

    • WPBeginner Support

      For that you would want to create columns and then you would use css to add the border property to the columns.

      Administrateur

  2. Shoaib

    Does using hr tags between article affect SEO?

    • WPBeginner Support

      It would depend on how they are being used but for the most part they should not have a major effect.

      Administrateur

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.