Personnaliser Astra et Astra Pro avec le customizer (outil de personnalisation)

Gérer les options générales d’Astra

Une fois Astra installé et activé, vous pouvez commencer à le personnaliser en définissant des options générales.

Vous pourrez ainsi, surtout dans la version Astra Pro, ajouter ou supprimer des fonctionnalités au Customizer.

Rendez-vous dans Apparence > Options d’Astra

Les modules d’Astra Pro

Sur cette page, on peut activer ou désactiver les modules d’Astra Pro :

Attention : ces modules rendent le thème plus lourd donc plus lent à charger. Ne les activez donc que si vous avez vraiment besoin de leurs options.

Plus d’infos dans cet article :

Le thème WordPress Astra Pro et ses modules enrichissent ses fonctionnalités

Les extensions gratuites d’Astra

On peut aussi activer ou désactiver les extensions gratuites d’Astra.

Elles sont assez explicites pour se passer de commentaires.

L’import / export des réglages de l’outil de personnalisation permet de faire des réglages expérimentaux puis de revenir aux réglages précédents, ou encore de transférer des réglages d’un site à un autre.

Les widgets d’Astra n’apparaitront que si l’option est activée ; cette fonctionnalité très utile permet d’ajouter des widgets dans l’entête, le pied de page et la colonne latérale.

Personnaliser Astra avec le Customizer de WordPress

Ouvrir le Customizer / outil de personnalisation

Entrons maintenant dans le vif de la personnalisation d’Astra.

Pour entrer dans le Customizer, cliquez sur Personnaliser dans la barre du haut de l’administration de WordPress.

Les icones d’Astra

Dans son interface Astra utilise un jeu d’icônes qui ont toujours la même fonction :

permet d’éditer l’élément directement : une zone du header ou du footer, etc

réinitialise l’élément à la valeur par défaut

réglage en mode responsive, sur téléphone, tablette ou ordinateur

lie ou délie toutes les valeurs

détermine l’unité :

px = pixels

em = valeur CSS de l’élément de base du document : si par exemple l’élément body a une font-size de 18px, alors 1em = 18px, 2em = 36px, etc ; ce réglage permet donc de fixer les valeurs en rapport avec une valeur de base

% = pourcentage de l’élément conteneur (par ex 10% de la largeur de l’écran)

Ce sont les mêmes unités px em rem % vh et vw que dans Elementor. 

Les réglages globaux : typographie, couleurs, conteneur, mise en page, boutons

Comme leur nom l’indique, ils vont concerner tout le site.

Ils consistent essentiellement en une série de réglages CSS. Le CSS est un langage qui détermine l’apparence des éléments d’une page web.

Voyons ces réglages un par un.

Typographie

Choix de police

On peut d’abord choisir la police de caractère du corps, c’est à dire de l’élément CSS body.

Un menu déroulant donne accès à des dizaines de polices Google Font, et à des polices « système », considérées comme universelles car utilisées sur Windows et Mac.

Si vous souhaitez utiliser d’autres polices, Astra recommande deux autres plugins :

• Custom Adobe font (typekit) pour des polices Adobe
• Custom font pour n’importe quelle autre police

Variantes

Ce réglage permet d’associer une variante normal, italique, gras, à une propriété de graisse : par exemple, on peut définir l’italique comme ayant une graisse de 300, et le gras avec une graisse de 500.

Taille

La taille va définir la propriété font-size de l’élément CSS body, et servir de base à toutes les définitions de propriétés en termes de em.

Elle définit donc la taille standard du texte normal, et de tout élément exprimé en em.

Graisse

La graisse désigne l’épaisseur des caractères.

Par défaut elle est de 400.

300 est plus fin, 100 est très fin. 700 est l’épaisseur ordinaire du gras mais on peut élever cette valeur pour obtenir du très gras à 900, ou la diminuer à 500 ou 600.

Transformation

Ce réglage permet de gérer 4 styles de texte :

• Aucun = Le texte sera normal, identique à la manière dont on l’a tapé, avec et sans majuscules
• Capitaliser = Le Texte Aura Des Majuscules A Tous Ses Mots
• Majuscule = LE TEXTE SERA EN MAJUSCULES
• minuscule = le texte sera en minuscules même si on a tapé des majuscules

En général on mettra le réglage à Aucun, mais on utilisera ce réglage par exemple pour mettre des titres en majuscules.

Hauteur de ligne

Définit la hauteur d’une ligne, produisant un texte plus ou moins aéré.

Marge inférieure de paragraphe

Définit la taille de l’espace laissé après chaque paragraphe.

Famille de police de titre

Le réglage précédent a défini le texte « normal ». Ce réglage-ci définit uniquement les titres, les éléments HTML H1 H2 H3 H4 H5 H6.

Le réglage de chaque titre permettra de contredire cette instruction.

On peut donc définir par exemple que :

• le body sera en police Roboto
• les titres seront en Lato
• sauf le titre H2 qui sera en Roboto

Le réglage « hériter » / inherit permet de définir que le réglage sera identique au réglage du niveau supérieur de l’élément.

H1 H2 H3 H4 H5 H6

Chaque niveau de titre HTML est réglable séparément, avec les mêmes paramètres.

Couleurs

Les définitions de couleur, élément par élément, se font soit par le sélectionneur de plages de couleur, soit grâce à une gamme globale qui assure qu’on choisira toujours exactement la même couleur de la palette.

Pour définir une couleur globale il suffit de cliquer dessus, de pointer dans la zone de couleurs, ou de taper le code hexadécimal d’une couleur ; cette couleur deviendra ensuite sélectionnable dans chaque réglage de couleur partout dans l’interface de personnalisation d’Astra.

Quand une couleur globale a été attribuée, une icone en forme de globe se superpose à la couleur.

Couleur du thème = couleur des éléments du thème : boutons, couleur de fond du texte sélectionné

Couleur de lien = couleur des liens (a en CSS)

Couleur de lien au survol = couleur des liens (a:hover en CSS)

Couleur de titre = couleur des titres H1-H6

Couleur du texte = couleur du texte normal de l’élément p du body

Conteneur

La notion de conteneur désigne la maquette du site, son cadre, notamment sa largeur.

Le conteneur contient 2 éléments :

• le contenu
• la colonne latérale

En version Astra Pro, les réglages de conteneur vont permettre de définir séparément la maquette de chaque type de page.

Disposition du site

4 dispositions sont possibles :

• Pleine largeur = le conteneur prendra toute la largeur disponible de l’écran
• Largeur max = le conteneur sera limité par la largeur de conteneur
• Padded = le conteneur prend la largeur de l’écran, moins les marges qu’on définit
• Fluide =  le conteneur prend la largeur de l’écran moins des marges droite et gauche

Largeur de conteneur

Permet de définir la largeur absolue du conteneur en pixels, donc la largeur relative de ses éléments.

(Astra explique dans sa doc son système de conteneurs.)

Mise en page

Ce réglage global sera hérité par défaut dans les réglages de chaque type de page, qui restent modifiables un par un :

• Mise en page des pages = s’applique aux « pages » WordPress
• Mise en page des articles de blog = s’applique aux articles de blog mais également aux pages d' »archive » ( = de catégorie)
• Mise en page des archives = s’applique aux autres pages d’archives, c’est-à-dire de catégories, d’étiquettes ou d’auteur)
• Mise en page WooCommerce = s’applique aux pages produit et catégorie de produit

Les valeurs possibles sont :

• Encadré – Tout = Tout le conteneur, y compris le header et le footer, a une marge en haut, en bas, à gauche et à droite
• Encadré – Contenu seulement = Seule la zone du contenu et de la colonne latérale est encadrée
• Pleine largeur – Espacé = Le conteneur prend la largeur de conteneur définie
• Pleine largeur – Etiré = Le conteneur prendra toute la largeur de l’écran

Boutons

Tous ces réglages sont intuitifs je pense.