L’aperçu du design montre sur une seule page chaque bloc qui porte un style du produit. Cet article vous apprend à régler un style pour tout le site, à fixer la taille de base de vos pages et à vérifier le mode sombre.
Avant de commencer
- L’aperçu est réservé aux administrateurs du site.
- L’aperçu montre des blocs témoins, un exemple de chaque bloc stylé, et non vos pages. Il sert à juger l’apparence du site entier.
- Vos réglages ne sont enregistrés qu’à votre clic sur Appliquer ce design à tout le site, dans le catalogue de design.
Ouvrir l’aperçu
- Dans le menu de l’administration, ouvrez Apparence puis Aperçu. L’éditeur s’ouvre sur la page Aperçu du design.
- Pour parcourir ses sections, faites défiler la page. Pour aller à l’une d’elles, ouvrez la vue en liste.
La page est reconstruite à chaque ouverture. Elle ne se publie pas, n’a pas d’adresse et ne devient jamais une page du site.
Parcourir les sections
Chaque section montre les blocs qui portent un style du produit. Les exemples sont ceux d’un site de services quelconque, pour que vous regardiez l’allure et non le texte.
| Section | Blocs témoins |
|---|---|
| Typographie | Les six niveaux de titre, un surtitre, un paragraphe, un lien, une signature, une liste à puces et une liste numérotée. |
| Boutons | Les boutons principal, secondaire et tertiaire. |
| Cartes | Trois cartes au style Carte : Conseil, Réalisation et Suivi. |
| Fil d’Ariane | Un fil d’Ariane à trois niveaux, la page lue en dernier. |
| Accordéon | Un accordéon de trois questions, la première ouverte. |
| Formulaires | Des champs texte, e-mail et message, une liste déroulante, des boutons radio, des cases à cocher, un interrupteur, les boutons d’étape et le bouton d’envoi. |
| Onglets | Une barre d’onglets et ses panneaux. |
| Médias | Une image et sa légende, un slider de trois diapositives et un carrousel de trois cartes. |
| Icônes | Un téléphone, une enveloppe, un repère de lieu et une horloge. |
| Tableaux | Un Tableau de WordPress et un Tableau avancé. |
| Séparateur | Des séparateurs debout entre deux colonnes et couchés entre deux rangées. |
| Lecteur de PDF | Une page factice. |
| Navigation | Un Menu et son sous-menu, un Sommaire et une Liste des pages. |
| Sélecteurs | Le Sélecteur de langue, la Suggestion de langue et les sélecteurs Apparence et animations. |
Les phrases en italique présentent les blocs et ne se règlent pas. Chaque section porte le style Section et fait 1 280 px de large au plus.
Régler un style depuis un bloc témoin
Un bloc témoin porte le même style que les blocs de vos pages. Quand vous appliquez le design, un style modifié ici change sur tous les blocs du site qui le portent.
- Cliquez sur un bloc témoin, par exemple une carte de la section Cartes.
- Dans la colonne de droite, ouvrez l’onglet Styles et changez un réglage, par exemple la bordure. Les trois cartes et celles du carrousel suivent.
- Au-dessus de la page, cliquez sur Ouvrir le catalogue de design.
- En bas du catalogue, cliquez sur Appliquer ce design à tout le site puis sur Oui, appliquer. Le style Carte reçoit votre réglage.
Ici, vous voyez sur tous les composants l’effet d’un réglage commun. Un arrondi confortable sur un bouton peut être trop marqué sur un champ de formulaire.
Vous choisissez une palette, une typographie ou un composant dans la barre latérale du catalogue. Adopter un design du catalogue le détaille.
Régler la taille de base de la page
Toutes les tailles de texte livrées sont en rem : elles se calculent sur la taille de la page. Changer cette taille fait grandir ou rétrécir tout le texte du site dans les mêmes proportions.
La taille de la page est portée par le style Page du bloc Corps de page, celui qui enveloppe tous les blocs témoins. Par défaut, elle vaut 1rem.
| Réglage du visiteur | Taille de base 1rem | Taille de base fixe, par exemple 16px |
|---|---|---|
| Zoom du navigateur | Tout grossit. | Tout grossit. |
| Taille de texte par défaut du navigateur | Le texte suit. | Sans effet. |
| Taille du texte du téléphone | Firefox sur Android agrandit. Safari sur iPhone et Chrome sur Android, non. | Même effet. |
1rem vaut 16 px pour presque tous les visiteurs. Une personne qui a demandé à son navigateur d’écrire plus grand voit votre site plus grand.
Fixer la taille de base
Une taille fixe garde votre mise en page telle que vous l’avez dessinée, par exemple un grand titre qui doit tenir sur une ligne.
- Dans la vue en liste, sélectionnez Corps de page.
- Dans l’onglet Styles, panneau Typographie, cliquez sur le + de Taille du texte. Créez une taille de
16px. Si elle existe déjà, choisissez-la dans la liste. - Sur la ligne du style Page, cliquez sur le crayon Mettre à jour. Laissez le groupe Typographie coché puis cliquez sur Oui, mettre à jour.
- Dans le catalogue de design, cliquez sur Appliquer ce design à tout le site puis sur Oui, appliquer.
Pour revenir à 1rem, cliquez sur la corbeille Supprimer de la ligne du style Page puis sur Oui, réinitialiser. Appliquez ensuite le design.
Passer l’aperçu en mode sombre
- Dans la barre d’outils de l’éditeur, cliquez sur le bouton Aperçu en mode sombre, à côté du bouton d’aperçu par appareil. Toute la page passe en sombre.
- Pour revenir au clair, cliquez sur le même bouton, devenu Aperçu en mode clair.
Chaque mode montre la page d’un visiteur qui l’a choisi. Le réglage de votre ordinateur n’y joue aucun rôle. Le mode sombre reste choisi d’une visite à l’autre sur ce navigateur.
Un bloc dont la couleur n’a pas de valeur sombre garde la même couleur dans les deux modes. Sur un site réglé sur Clair ou Sombre, le bouton n’apparaît pas : la page reste dans ce mode.
Connaître les limites de l’aperçu
- Vous ne pouvez ni ajouter, ni retirer, ni déplacer de bloc témoin.
- Les images sont des exemples, le lecteur de PDF affiche une page factice et la liste des pages montre cinq entrées d’exemple.
- Les blocs sans style du produit n’y figurent pas, par exemple une liste de contenus ou une modale.
- Vous voyez un seul état à la fois, survol, focus ou actif, en choisissant son onglet dans l’onglet Styles.
- La page n’a ni onglet de référencement ni onglet de langue.