Les termes de la mise en page WordPress démystifiés (référence rapide)

Comprendre les termes de mise en page de WordPress peut s’avérer délicat pour les débutants. En travaillant sur votre site, vous pourriez rencontrer des termes utilisés par les développeurs/développeuses qui semblent déroutants au début.

Nous avons vu de nombreux utilisateurs/utilisatrices de WordPress se débattre avec ces mots techniques, mais une fois que vous avez saisi leur signification, il devient beaucoup plus facile de naviguer sur votre site WordPress. Connaître les bons termes vous aidera également à communiquer plus efficacement avec les développeurs/développeuses et les designers.

Dans ce guide, nous allons décomposer les termes de mise en page WordPress les plus couramment utilisés. Avec cette référence rapide, vous vous sentirez plus confiant dans la gestion de la mise en page de votre site comme un pro.

Pourquoi apprendre les termes de mise en page de WordPress ?

Les thèmes WordPress contrôlent l’apparence et la mise en page de votre site. En fonction de votre thème, vous pouvez le personnaliser de multiples façons.

Vous pouvez personnaliser les thèmes qui supportent l’éditeur de site complet en visitant la page Apparence  » Éditeur.

Si vous utilisez un thème classique (un thème qui ne supporte pas actuellement l’éditeur de site complet), vous pouvez le personnaliser en visitant la page Apparence  » Personnaliser.

Le client/cliente de personnalisation du thème s’ouvre et se présente comme suit :

Tous les meilleurs thèmes WordPress disposent d’options permettant de modifier la conception de votre site à l’aide du personnalisateur de thème ou de l’éditeur de site complet, mais vos facultés sont limitées en fonction du thème.

Vous pouvez utiliser des extensions de constructeur de page WordPress comme SeedProd pour encore plus de flexibilité.

Outil de personnalisation, SeedProd vous permet de créer facilement des mises en page personnalisées à l’aide d’outils simples de type « glisser-déposer », sans avoir à écrire le moindre code.

SeedProd dispose également de dizaines de modèles que vous pouvez utiliser comme points de départ. Il supporte WooCommerce, ce qui vous aide à créer des mises en page pour votre stock en ligne.

Cependant, lorsque vous créez la mise en page d’un site, il se peut que vous rencontriez des termes peu familiers dans le domaine de la conception de sites web.

La connaissance de ces termes relatifs à la mise en page d’un site web vous aidera à comprendre les éléments constitutifs de la conception d’un site WordPress, ce qui vous permettra de créer plus facilement n’importe quel design que vous pouvez imaginer.

Démystifions ces termes courants de la mise en page WordPress pour apprendre ce qu’ils signifient et comment les utiliser. Voici une liste rapide des concepts et des termes que nous expliquerons dans cet article :

Comprendre une mise en page typique de WordPress

La plupart des sites utilisent une mise en page très familière. Elle ressemble à peu près à ceci :

La partie supérieure d’un site s’appelle l’en-tête, suivie d’une zone de contenu, puis d’un pied de page en bas de la page.

La mise en page peut varier en fonction de la page vue par l’utilisateur/utilisatrice.

Par exemple, une page de blog WordPress peut comporter une colonne latérale à côté de la zone de contenu.

Cette mise en page de base est complétée par d’autres éléments, que nous aborderons ultérieurement dans cet article.

Examinons d’abord plus en détail chacune de ces sections principales.

En-tête dans la Mise en page WordPress

L’en-tête d’une mise en page WordPress est la partie supérieure d’une page. Il contient généralement le logo de votre site, le titre, les menus de navigation, un formulaire de recherche et d’autres éléments importants que vous souhaitez que les utilisateurs/utilisatrices voient en premier.

Voici à quoi ressemble la section de l’en-tête sur WPBeginner.

Outil de personnalisation en-tête dans les thèmes WordPress

De nombreux thèmes WordPress populaires incluent des fonctionnalités supplémentaires permettant de personnaliser la zone d’en-tête de votre mise en page WordPress, ce qui est parfois appelé un en-tête personnalisé.

Si vous utilisez un thème bloc avec support de l’éditeur de site, vous pouvez modifier l’en-tête en cliquant sur la zone de l’en-tête dans l’éditeur de site.

À partir de là, vous pouvez personnaliser l’en-tête à votre guise. Vous pouvez modifier les couleurs et le menu de navigation et ajouter des blocs tels que la recherche, le logo du site, des boutons, et plus encore.

Vous trouverez les réglages de l’en-tête personnalisé sous l’onglet « Options de l’en-tête » pour les thèmes classiques.

En fonction de votre thème WordPress, vous pourrez peut-être ajouter une image pleine largeur à l’en-tête avec un slogan ou un bouton d’appel à l’action.

Certains thèmes WordPress vous permettent de modifier la position du logo, les menus de navigation et les images d’en-tête.

Outil de personnalisation de l’arrière-plan dans WordPress

Certains thèmes WordPress vous permettent également de modifier facilement la couleur d’arrière-plan ou d’utiliser une image d’arrière-plan pour votre site.

Si vous utilisez un thème avec le support de l’éditeur de site, vous pouvez modifier la couleur d’arrière-plan en allant dans « Modifications » dans l’éditeur de site complet.

Il suffit de choisir l’option « Couleurs » dans le panneau Styles.

Ensuite, vous pouvez cliquer sur « Arrière-plan » pour choisir une couleur d’arrière-plan pour votre site.

Pour les thèmes classiques, les réglages dépendent des fonctionnalités de votre thème.

De nombreux thèmes classiques sont dotés d’un support d’arrière-plan personnalisé. Vous trouverez ces réglages dans les options « Couleurs » ou « Image d’arrière-plan » du personnalisateur de thème.

Souvent, ces options sont enfouies dans d’autres onglets, et vous devrez chercher pour les trouver.

Pour plus de modifications, vous pouvez consulter nos guides sur l’ajout d’une image d’arrière-plan dans WordPress ou sur la modification de la couleur d’arrière-plan dans WordPress.

Zone de contenu dans WordPress

La zone de contenu est située juste après l’en-tête dans la mise en page d’un site. C’est là que s’affiche le contenu principal de la page.

Dans le cas d’une page d’accueil personnalisée, la section du contenu peut comprendre un appel à l’action suivi de services ou de produits, de témoignages et d’autres informations importantes.

Les magasins en ligne utilisent généralement cette zone pour promouvoir les ventes en cours, les fonctionnalités mises en avant, les articles les plus vendus, etc.

En revanche, un site riche en contenu, tel qu’un blog ou un site de magazine, peut utiliser une mise en page à forte teneur en contenu.

Il affichera les derniers e-mails avec des extraits et des images, présentera un formulaire d’inscription à la lettre d’information pour constituer une liste d’e-mails ou utilisera des zones de découverte de contenu pour aider les utilisateurs/utilisatrices à trouver d’autres façons de passer du temps sur le site.

Voici à quoi ressemble la mise en page du blog de WPBeginner.

Il présente nos contenus les plus populaires avec un appel à l’action pour que les utilisateurs/utilisatrices s’inscrivent à notre liste d’e-mails. (Voir : autres méthodes utilisées pour développer notre liste d’e-mails)

Par défaut, WordPress utilise une mise en page de blog affichant vos publications les plus récentes en première page de votre site.

Vous pouvez toutefois modifier ce Réglage et utiliser n’importe quelle page comme page d’accueil de votre site.

Allez dans Réglages «  Page de lecture et sélectionnez « Une page statique » sous l’option « Votre page d’accueil s’affiche ».

Ensuite, vous pouvez choisir une page à utiliser comme page d’accueil et une autre pour votre page de blog.

Pour plus de détails, consultez notre guide sur la création d’une page distincte pour vos publications de blog dans WordPress.

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.

Vous pouvez maintenant modifier la page que vous avez choisie comme page d’accueil et créer une page d’accueil personnalisée.

Les colonnes latérales dans les mises en page WordPress

Comme leur nom l’indique, les colonnes latérales apparaissent généralement à droite ou à gauche de la zone de contenu.

Dans WordPress, les colonnes latérales sont également des zones prêtes à accueillir des widgets. Cela signifie que vous pouvez ajouter des widgets à cette zone et afficher des éléments tels que des archives, des formulaires d’inscription à la newsletter, des catégories, des contenus populaires, etc.

Pour modifier vos colonnes latérales, rendez-vous sur la page Apparence  » Widgets. À partir de là, vous pouvez ajouter des blocs à vos colonnes latérales et les modifier à votre guise.

Cependant, tous les thèmes WordPress ne sont pas livrés avec des zones prêtes à accueillir des widgets ou des colonnes latérales.

Si vous ne voyez pas de menu Widgets sous Apparence, c’est que votre thème ne supporte pas les colonnes latérales ou n’a pas de zones prêtes à accueillir des widgets.

Zone de pied de page dans les mises en page WordPress

La zone de pied de page apparaît sous la zone de contenu au bas d’une mise en page.

Si vous utilisez un thème WordPress avec le support de l’éditeur/éditrice de site, vous pouvez modifier la zone du pied de page en cliquant dessus.

Vous pouvez également modifier la zone du pied de page en cliquant sur « Compositions » dans la navigation de l’éditeur du site. La zone du pied de page apparaît sous l’élément de menu « Parties du modèle ».

Lors de la modification de la zone du pied de page dans l’éditeur du site, vous pouvez ajouter des blocs pour afficher différents éléments.

Par exemple, vous pouvez ajouter une liste de vos pages les plus importantes, afficher un menu de navigation, ajouter un formulaire de contact, etc.

Si vous utilisez un thème classique, il y a de fortes chances qu’il soit doté d’une zone de widgets en pied de page.

Il suffit de se rendre sur la page Apparence  » Widgets et de rechercher une zone de widgets de pied de page.

À l’instar de l’éditeur de sites, vous pouvez utiliser des blocs pour ajouter différents éléments aux widgets de pied de page de votre thème.

Vous vous demandez ce qu’il faut mettre dans le pied de page de votre site ? Consultez notre liste de contrôle des éléments à ajouter au pied de page de votre site WordPress.

Autres éléments d’une mise en page WordPress

Ensuite, nous examinerons certains des composants d’une mise en page WordPress que vous pouvez ajouter à vos sections d’en-tête, de contenu, de colonne latérale ou de pied de page. Ce sont les éléments de base qui vous aident à créer une mise en page fonctionnelle.

Menus de navigation dans WordPress

Les menus de navigation ou menus sont des listes horizontales ou verticales de liens. La plupart des sites comportent au moins un menu de navigation principal dans la zone d’en-tête.

Toutefois, certains sites utilisent plusieurs menus de navigation dans l’en-tête.

WordPress vous permet également d’afficher des menus de navigation sous forme de widgets. Ces menus apparaissent sous la forme d’une liste verticale de liens, et vous pouvez les placer dans les colonnes latérales ou dans les zones de widget du pied de page.

Pour plus de détails, consultez notre guide sur l’ajout de menus de navigation dans WordPress.

Utilisation de Widgets dans une Mise en page WordPress

Si votre thème WordPress supporte les widgets, alors vous pouvez les utiliser pour réorganiser la mise en page de votre site. De plus, avec les widgets de bloc, votre thème peut désormais également utiliser des blocs dans les zones de widgets.

Vous pouvez ajouter des widgets aux zones prêtes à recevoir des widgets ou aux colonnes latérales de votre site WordPress. Certains thèmes WordPress sont livrés avec plusieurs zones prêtes à accueillir des widgets ou des blocs.

WordPress est livré avec plusieurs widgets et blocs intégrés que vous pouvez utiliser. De nombreuses extensions populaires de WordPress fournissent également leurs propres widgets et blocs.

Par exemple, vous pouvez utiliser des widgets/blocs pour ajouter des listes de publications populaires, un formulaire de contact, des bannières publicitaires, des flux de réseaux sociaux, etc.

Vous pouvez voir tous ces widgets en visitant la page Apparence  » Widgets dans la zone d’administration de WordPress.

Note : Si votre thème ne comporte pas de zones de widgets, il se peut que vous ne voyiez pas la page « Widgets » dans la zone d’administration de WordPress.

Pour plus de détails, consultez notre guide sur l ‘ajout et l’utilisation de widgets dans WordPress.

Utilisation de blocs dans les mises en page WordPress

WordPress utilise l’éditeur de blocs pour écrire du contenu, gérer les zones de widgets ou modifier votre site. Il utilise des blocs pour tous les éléments web courants, d’où son nom d’éditeur/éditrices de blocs.

Cet éditeur est conçu pour vous aider à créer de belles mises en page pour vos publications et pages WordPress à l’aide de blocs.

Il existe différents types de blocs pour les éléments les plus courants de tout type de contenu. Par exemple, vous pouvez ajouter des paragraphes, des titres, des images, des galeries, des contenus vidéo embarqués, des colonnes, des tableaux, etc.

Cela vous permet de créer des mises en page différentes pour chaque article ou page de votre site WordPress sans installer d’extension ou modifier votre thème.

Images mises en avant dans les mises en page WordPress

Si vous visitez la page d’accueil de WPBeginner, vous remarquerez des miniatures à côté de chaque titre d’article. C’est ce qu’on appelle les images mises en avant.

WordPress vous permet de définir des images mises en avant pour vos publications et vos pages. Votre thème WordPress utilise ensuite ces images dans différentes parties de votre site.

Pour en savoir plus, consultez notre guide sur l ‘ajout d’images fonctionnalité en avant dans WordPress.

Images de couverture dans WordPress

Une image de couverture est généralement une image large utilisée comme photo de couverture pour une nouvelle section d’un article de blog ou d’une page.

Vous pouvez l’ajouter à votre publication ou à votre page à l’aide du bloc Couverture. Le bloc Couverture vous permet également d’utiliser une couleur d’arrière-plan au lieu d’une image.

Pour en savoir plus, consultez notre guide détaillé sur la différence entre l’image de couverture et l’image mise en avant.

Utilisation des compositions dans l’éditeur WordPress

Les Mises en page sont des compositions de blocs pré-arrangés que vous pouvez utiliser pour ajouter rapidement différentes sections à vos mises en page.

Vous pouvez utiliser des compositions pour rédiger du contenu et modifier des publications et des pages.

De même, vous pouvez utiliser des compositions dans l’éditeur de site complet dans votre thème WordPress et la mise en page de votre site.

Lancez simplement l’éditeur/éditrices du site et vous verrez des compositions dans les options « Design ».

Chaque composition est une collection de blocs triés dans un ordre particulier afin d’obtenir des compositions couramment utilisées.

Votre thème WordPress peut contenir plusieurs compositions. Vous pouvez également trouver d’autres compositions dans la Bibliothèque des compositions de WordPress.

Vous souhaitez enregistrer vos sections de motifs ? Vous enregistrez vos propres compositions de blocs sous forme de compositions et vous les réutilisez ultérieurement.

Il s’agit d’une fonctionnalité relativement nouvelle, de sorte qu’un ensemble limité de compositions est disponible. Cependant, au fur et à mesure que d’autres thèmes et plugins WordPress ajouteront leurs compositions à l’éditeur de blocs, davantage d’options seront disponibles.

Vous pouvez consulter notre guide sur l’utilisation des compositions de blocs dans WordPress pour en savoir plus.

Ajout de publicités dans la mise en page WordPress

Les boutons jouent un rôle important dans la conception et la mise en page des sites modernes. Ils fournissent aux utilisateurs un appel à l’action clair, ce qui vous aide à développer votre activité et vos conversions.

L’éditeur de blocs par défaut est livré avec un bloc Bouton que vous pouvez utiliser dans n’importe quelle publication ou page de WordPress ou à l’intérieur de l’éditeur de site.

Votre thème WordPress peut également inclure des réglages de boutons d’appel à l’action dans le personnalisateur de thème. La plupart des extensions de constructeurs de pages WordPress les plus populaires incluent également des boutons dans différents styles.

Vous pouvez même ajouter des boutons « click-to-call » dans WordPress à l’ aide d’une extension.

Pour plus de détails, consultez notre guide sur l’ajout de boutons d’appel à l’action dans WordPress.

Outil de personnalisation des CSS dans les mises en page WordPress

LeCSS est le langage de style utilisé pour créer des sites web. Votre thème WordPress et vos extensions sont livrés avec leurs propres règles CSS, mais de temps en temps, vous pouvez vouloir modifier de petites choses comme la couleur du texte, la taille de la police ou la couleur de l’arrière-plan.

C’est là qu’intervient le CSS personnalisé. WordPress vous permet d’enregistrer plus facilement vos propres règles CSS personnalisées.

Si vous utilisez un thème avec le support de l’éditeur/éditrices de site, il vous suffit d’aller sur la page Apparence  » Éditeur pour lancer l’éditeur de site.

Cliquez sur n’importe quel modèle pour commencer à le modifier, puis cliquez sur le bouton « Style » dans le coin supérieur droit de l’écran.

Le panneau « Styles » s’affiche dans la colonne de droite. Défilez vers le bas et cliquez sur l’onglet « Additional CSS ».

Une zone de texte s’affiche, dans laquelle vous pouvez ajouter votre code CSS supplémentaire.

N’oubliez pas de cliquer sur le bouton « Enregistrer » pour stocker vos modifications.

Si vous utilisez un thème WordPress classique, vous pouvez ajouter votre CSS personnalisé dans le personnalisateur du thème.

Il suffit de se rendre sur la page Apparence  » Personnalisation, puis de cliquer sur l’onglet  » CSS supplémentaires « .

À partir de là, vous pouvez ajouter vos règles CSS personnalisées, et vous pourrez les voir appliquées dans la Prévisualisation directe.

Ajouter des CSS personnalisés dans WordPress à l’aide d’une extension

Normalement, si vous utilisez les méthodes par défaut, votre code CSS personnalisé est enregistré avec les Réglages de votre thème. Modifier votre thème désactivera votre code CSS personnalisé.

Une meilleure façon de stocker votre CSS personnalisé dans WordPress est d’utiliser l’extension WPCode. Il s’agit de la meilleure extension d’extraits de code WordPress, vous permettant d’ajouter facilement des extraits de code personnalisés sans casser votre site.

Tout d’abord, vous devez installer et activer l’extension WPCode. Pour plus de détails, consultez notre guide sur l ‘installation d’une extension WordPress.

Une fois activé, rendez-vous dans la section  » Code Snippets  » + Ajouter nouveau à partir du tableau de bord WordPress.

Survolez ensuite l’option « Ajouter votre code personnalisé (nouvel extrait) » dans la bibliothèque d’extraits de code et cliquez sur le bouton « Utiliser l’extrait ».

Ensuite, en haut de la page, ajoutez un titre à votre extrait CSS personnalisé. Il peut s’agir de n’importe quoi qui vous aide à identifier le code.

Ensuite, écrivez ou collez votre CSS personnalisé dans le champ « Prévisualisation du code » et définissez le « Type de code » en choisissant l’option « Extrait CSS » dans le menu déroulant.

Ensuite, défilez jusqu’à la section  » Insertion  » et sélectionnez la méthode  » Auto-Insert  » si vous souhaitez exécuter le code sur l’ensemble de votre site WordPress.

Vous pouvez choisir la méthode ‘Shortcode’ si vous souhaitez uniquement exécuter le code sur des pages ou des publications spécifiques.

Enfin, revenez en haut de la page, basculez le commutateur sur « Actif » et cliquez sur le bouton « Enregistrer l’extrait ».

Vous enregistrez ainsi votre extrait de code CSS personnalisé.

Pour en savoir plus sur ce Sujet, consultez notre guide complet sur la façon d’ajouter des CSS personnalisés dans WordPress.

Mises en page dans les constructeurs de pages WordPress

La Version la plus simple pour construire des mises en page WordPress personnalisées pour vos pages d’atterrissage est d’utiliser un constructeur de page WordPress.

Nous vous recommandons d’utiliser SeedProd. C’est l’extension de constructeur de page WordPress la plus conviviale pour les débutants sur le marché.

D’autres constructeurs de pages utilisent des termes similaires pour désigner des outils et des fonctionnalités communs.

Utiliser des modèles dans les constructeurs de pages WordPress

Les modèles sont le moyen le plus rapide de créer une mise en page web. Tous les plugins de constructeurs de pages populaires sont livrés avec un tas de modèles prêts à l’emploi que vous pouvez utiliser comme point de départ.

Par exemple, SeedProd propose des modèles pour différents types de pages, notamment des pages d’atterrissage, des pages de vente, des pages 404, des pages « coming soon », etc.

Modules et blocs dans les constructeurs de pages WordPress

Tout comme les blocs de l’éditeur WordPress par défaut, les plugins de constructeurs de pages utilisent également des blocs.

Certains constructeurs de pages peuvent les appeler modules ou éléments, mais il s’agit essentiellement de la même chose.

Cependant, les plugins de constructeurs de pages sont livrés avec plus de blocs que l’éditeur par défaut. Par exemple, SeedProd inclut des blocs pour les témoignages, des blocs WooCommerce, Google Maps, des formulaires de contact, des embeds Facebook, et plus encore.

Vous pouvez utiliser les blocs pour créer vos propres mises en page, les déplacer et expérimenter pour déterminer ce qui fonctionne le mieux pour votre entreprise.

Utiliser des sections dans vos mises en page WordPress

Semblable à la fonctionnalité « Réglages » de l’éditeur par défaut, une section est un ensemble de blocs regroupés pour créer instantanément des zones communes d’un site.

Par exemple, vous pouvez généralement utiliser une section d’en-tête, une image de héros, des tableaux de prix, etc.

Différents plugins de constructeurs de pages WordPress peuvent utiliser des termes différents pour les désigner. Par exemple, SeedProd les appelle des sections, et Beaver Constructeur les appelle des lignes et des colonnes enregistrées.

Ressources en prime

Voici quelques ressources supplémentaires pour les débutants qui couvrent les bases de la conception de WordPress de manière plus détaillée :

• Comment ajouter du contenu factice pour le développement de thèmes dans WordPress
• L’aide-mémoire des thèmes WordPress pour les débutants
• Comment trouver les fichiers à modifier dans un thème WordPress ?
• Guide du débutant sur la hiérarchie des modèles WordPress (Cheat Sheet)
• Comment créer facilement un thème WordPress personnalisé (sans aucun code)

Nous espérons que cet article vous a aidé à découvrir les termes utilisés dans les mises en page WordPress. Vous pouvez également consulter notre guide pour apprendre WordPress gratuitement en une semaine ou mettre en favoris notre Glossaire WordPress, un dictionnaire de termes WordPress adapté aux débutants.

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.