Comment donner du style à mon site Web avec des paramètres globaux ?

Donner du style à votre site Web avec des paramètres globaux

Les paramètres globaux servent à personnaliser l’apparence de votre site, et les modifications que vous effectuez ici se refléteront sur l'ensemble de votre site Web. Les options disponibles sont la typographie (vos polices de caractères), les couleurs, le conteneur et les boutons. Ces paramètres seront automatiquement utilisés (par défaut) pour tout le contenu de votre site Web, à l'exception des éléments sur lesquels vous apportez des modifications individuelles.

Typographie

Peut-être que parfois vous ne le remarquerez même pas, mais l'utilisation de superbes polices sur un site Web peut faire une énorme différence. Cette section des paramètres vous permet de décider quelles polices vous souhaitez utiliser pour différents éléments, la taille des polices, leurs poids, etc.

Commençons par choisir une famille de polices pour votre site Web. Cela devrait être la famille dominante pour votre site Web (bien que vous puissiez en utiliser plusieurs sur votre site Web).

Typographie de base

Si vous n'avez pas encore de police prédéterminée, passez un peu de temps à parcourir les polices et choisir la bonne. Vous pouvez le faire en cliquant sur le menu déroulant “Famille de police” et en faisant défiler la liste des choix ou en tapant le nom dans le champ de recherche.

La sélection est vaste, car à côté des polices système, vous pouvez choisir n'importe laquelle des polices Google, le plus grand répertoire de polices Web gratuites et open source. La liste peut êtreencore élargie avec nos plugins :

Custom Adobe Fonts (Typekit) pour intégrer des polices Adobe ;
Custom Fonts vous permettra d'utiliser toutes les polices personnalisées dont vous avez besoin. Téléchargez simplement le fichier de police et il sera ajouté à la liste des polices.

Maintenant, une fois que vous avez sélectionné votre famille de polices, passons aux détails. La sélection de toutes les variantes vous fera gagner du temps et des clics Si vous choisissez par
exemple la variante "700 italique", chaque fois que vous marquez votre texte en italique, il se verra automatiquement attribué le poids 700.

Ensuite, définissez la taille du texte par défaut (en pixel), le poids et, si nécessaire, la transformation du texte (par exemple, mettre en majuscule chaque mot sur votre site Web).

Les deux dernières options influenceront l'espace occupé par votre texte. La hauteur de ligne définira la hauteur de chaque ligne de texte, tandis que la marge inférieure du paragraphe déterminera l'espace ajouté au bas de chaque paragraphe. Vous pouvez définir ces valeurs en saisissant la valeur de taille ou en déplaçant le curseur vers la gauche et vers la droite.

En-têtes

Les en-têtes aident les visiteurs de votre site Web à comprendre l'importance des différentes pages ou sections de publication. La plateforme WordPress utilise par défaut des titres de H1 à H6.

Le titre le plus important sur chaque page ou publication est H1, et il devrait fournir aux moteurs de recherche les informations sur cette page ou ce contenu de publication (de quoi s'agit-il). Ainsi, il ne devrait y en avoir qu'un seul sur chaque publication ou page.

D'autres balises de titre peuvent être utilisées au besoin. Plus le numéro de titre est élevé, moins il est important. Ainsi, le titre H6, s'il est utilisé, marque le contenu le moins important.

Vous pouvez définir dans la section “Typographie”, presque toutes les options de base pour chaque en-tête séparément, en leur donnant un aspect spécifique et optimisé.

Couleurs

Une fois que vous avez défini votre typographie, il est temps de lui donner de la couleur. Ici, vous pouvez définir votre jeu de couleurs pour rendre votre contenu attrayant et créer l'ambiance que vous désirez. Utilisées de la bonne manière, les couleurs en disent long sur le type de site Web qu'elles consultent et sur la marque elle-même.

Voici un bref résumé de ce que fait chaque option de couleur :

Couleur du texte: Couleur du corps du texte (soit le texte inclu en format “paragraphe” sur vos pages et dans votre contenu) et des descriptions sur le site Web.
Couleur du thème: Couleur de tous les éléments du thème tels que les boutons, la couleur d'arrière-plan du texte sélectionné, etc.
Couleur du lien: Couleur de tout le texte auquel un lien a été ajouté.
Couleur de survol du lien: Couleur de tout le texte auquel un lien a été ajouté lorsqu'il est survolé avec le curseur (ce qui est appelé “couleur de survol”).

Pour changer une couleur, cliquez sur le cercle coloré à côté du nom du type de couleur. Vous pourrez choisir visuellement votre couleur en cliquant sur le sélecteur de couleur et en réglant l'opacité (transparence) si vous en avez besoin. Vous pouvez également ajouter la valeur de couleur aux formats HEX, HSL ou RVB.

Pour supprimer les modifications et rétablir la couleur par défaut, cliquez sur le bouton "Clear" ou cliquez sur l'icône "Revenir aux paramètres par défaut".
Vous avez également la possibilité de définir l'arrière-plan pour l'ensemble du site Web :

Arrière-plan: Vous avez le choix entre trois options : Couleur, Dégradé ou Image. Quelle que soit l'option que vous choisissez, elle sera appliquée comme arrière-plan au corps sur l'ensemble du site.

Vous pouvez également définir à la fois la couleur et l'image. Dans ce cas, assurez-vous d'ajuster l'opacité (moins de 100%) de la couleur pour rendre l'image visible, car la couleur sera utilisée en superposition.

Conteneur

Il est maintenant temps de définir quelques paramètres pour le contenu de votre site Web. Un conteneur est la zone où tout votre contenu est affiché sur chaque page ou publication.

La zone de contenu et la barre latérale font toutes deux parties du conteneur. La zone de contenu est techniquement appelée le conteneur principal, tandis que la barre latérale est le conteneur
secondaire.

Largeur du contenu

Cette valeur définira la largeur maximale de votre conteneur. Cela définira la quantité d'espace que votre contenu et vos barres latérales (si vous les définissez) occuperont sur les pages et les
publications.

Disposition

En définissant la disposition du conteneur, vous choisirez comment votre contenu, votre barre latérale et vos widgets, votre en-tête, votre pied de page et l'arrière-plan de votre site Web
s'assembleront sur votre site Web. Vous avez accès à 4 types de dispositions de conteneur :

Encadrer / tout: cette mise en page affichera les conteneurs individuels et les widgets apparaîtront dans des boîtes. Cela laisse de l'espace sur tous les côtés autour de chaque boîte. Ainsi, vous pourrez voir l'arrière-plan du site Web.
Encadrer / Contenu seulement: avec cela, seul votre contenu apparaît dans le format en boîte, tandis que la barre latérale et les widgets sont affichés sur un fond uni.
Pleine largeur / Espacé: cela définira votre contenu et votre barre latérale dans un seul conteneur. Ce conteneur s'affichera dans une largeur de conteneur, laissant l'espace sur le côté gauche et droit.
Pleine largeur / étiré: en utilisant cette disposition, votre contenu et votre barre latérale seront affichés dans un seul conteneur, étiré d'un bord à l'autre de votre écran.

Ex2-Theme vous permet de définir une mise en page différente sur l'ensemble du site Web, en fonction de vos besoins:

Mise en page: la mise en page sélectionnée ici sera définie par défaut pour l'ensemble du site Web. L'option de mise en page sélectionnée sera alors automatiquement utilisée sur l’ensemble des éléments du site à part celles que vous choisirez de personnaliser séparément. Vous pouvez toutefois modifier la mise en page pour les types de publication suivants si nécessaire :

Mise en page: pour les pages
Disposition des articles de blog: pour les archives de blog et les pages d'articles de blog uniques
Mise en page des archives: toutes les archives

De plus, selon les autres extensions que vous pourriez utiliser sur votre site Web, vous trouverez les options pour définir la mise en page de leurs pages dédiées, par exemple, WooCommerce Layout ou LearnDash Layout.

Boutons

La dernière option globale est utilisée pour définir l'apparence par défaut des boutons de site Web. Nous allons faire un bref aperçu des options disponibles et à quoi elles servent :

Couleur du texte: définissez la couleur normale et de survol du texte du bouton ;
Couleur d'arrière-plan: définissez la couleur normale et la couleur de survol du bouton (arrière-plan);
Largeur de la bordure: si vous souhaitez ajouter une bordure à vos boutons, définissez simplement la largeur de la bordure ici ;
Couleur de la bordure: définissez la couleur normale et de survol de la bordure du bouton ;
Rayon de la bordure: l'ajout d'un rayon rendra vos boutons plus arrondis ; au fur et à mesure que vous augmentez la valeur du rayon, vos boutons changeront de forme du rectangle vers le cercle.
Police du bouton: les paramètres de typographies disponibles ici seront appliqués uniquement au texte du bouton.
Marges internes: cela ajoutera une marge interne à votre bouton ; une marge plus grande rendra votre bouton plus grand.

Remarques finales à propos des paramètres globaux :

Les options avec une icône "édition réactive" à côté peuvent être modifiées séparément pour l’affichage sur ordinateur de bureau, sur tablette et sut téléphone mobile. L'application de
modifications dans chaque type d’affichage modifiera les paramètres uniquement pour le type en question.

À l’opposé, les modifications de paramètres dans les options n’ayant pas d’icône "édition réactive" appliqueront les mêmes changements à tous les types d’affichage.

Veuillez garder à l'esprit que certaines options globales pourraient ne pas s’appliquer à votre contenu car elles peuvent être remplacées par les paramètres que vous définissez dans l’éditeur de page. Cela dépendra du choix d'outil de construction de page utilisé pour concevoir votre site Web.

Mis à jour le : 20/03/2023