Table des matières
Le module Mises en page personnalisées / Site builder (anciennement nommé Custom Layouts) du thème Astra Pro ajoute la possibilité de créer des maquettes pour les différents types de page, ou d’ajouter des blocs de contenu n’importe où sur un site en suivant des règles de placement, grâce aux « hooks« .
Comment activer les mises en page personnalisées
Vous devez d’abord avoir installé le thème Astra et son plugin Astra Pro.
Ensuite, quand on active le module Mises en page personnalisées sur la page Apparence > Options d’Astra, cela fait apparaître une page Apparence > Astra > Site builder.
On peut alors créer ou éditer des mises en page (= des maquettes) pour ces éléments :
- l’en-tête
- le pied-de-page
- la page 404
- le contenu d’une page
- des « hooks« , des éléments intégrables n’importe où dans l’interface
Comment créer une mise en page personnalisée avec Site builder
Rendez-vous donc sur la page Apparence > Astra > Site builder, puis cliquez sur le bouton « Add new ».
Ensuite, choisissez un des 5 types de maquette ou d’usage.
Cela crée une sorte de page d’édition ordinaire, qu’on peut éditer sous Gutenberg, Elementor, ou autre.
Cliquez sur l’icone Astra en haut à droite de l’interface pour faire apparaitre les options d’affichage de cette mise en page personnalisée.
Les options varient suivant le type de maquette, mais certaines sont communes à toutes :
Display and User Role Settings
- Display on : choisissez le type des pages sur lesquelles ce Custom Layout devra s’afficher
- Add exclusion : excluez certaines pages
- User roles : affichez ce Custom Layout pour certains rôles et pas pour d’autres (admin, éditeur, auteur, abonné…)
Responsive Visibility
- choisissez d’afficher cet élément sur ordinateur, tablette et / ou mobile.
Time Duration Settings
- choisissez d’afficher cet élément à certaines dates (par exemple pour annoncer une opération commerciale, ou dire que vous êtes en vacances, ou tout autre message temporairement valide)
Créer un en-tête personnalisé
Choisissons l’option en-tête / header.
Sachez d’abord que cet en-tête remplacera l’en-tête normal et toutes ses personnalisations sur les pages où vous aurez demandé de l’afficher.
Cliquez maintenant sur les options d’Astra sur la page de votre en-tête personnalisé en mode édition normal (et pas en mode édition sous Elementor ou autre).
Sticky Settings
- Stick : décidez si votre en-tête personnalisé doit être fixe ou pas
- Shrink : si votre en-tête est fixe, vous pouvez ajouter cet effet de rétrécissement qui diminue les marges haut et bas quand on scrolle
- Stick On : décidez si cet en-tête doit s’afficher sur ordinateur, tablette, ou mobile.
Créer un pied de page personnalisé
Le Custom Footer ou pied de page personnalisé a les options de tous les éléments Site builder, plus deux options particulières :
Sticky Settings
- Stick : décidez si votre pied de page personnalisé doit être fixe ou pas
- Stick on : décidez si ce pied de page personnalisé s’affichera sur ordinateur, tablette et mobile
Créer une page 404 personnalisée
La page 404 personnalisée, ou Custom 404 a les options générales, plus les options suivantes :
404 Page Display Settings
- Disable Primary Header : désactive l’en-tête principal
- Disable Footer Bar : désactive le pied de page normal
Créer et placer un bloc Site builder
Créer le bloc Site builder
On va d’abord aller sur l’onglet Astra / Site builder, puis cliquer sur Add new.
Cela va nous ouvrir une interface d’édition. On y crée notre contenu, avec l’éditeur classique de WordPress ou avec notre constructeur de page habituel (Elementor, Gutenberg, etc). On sauvegarde.
Si on a utilisé un constructeur de page, on doit revenir à l’onglet Mises en page personnalisées, trouver notre contenu, puis l’ouvrir en mode normal (donc sans passer par le constructeur de page). En bas, on va trouver Un réglage « paramètres de disposition personnalisée ».
Si on a utilisé l’éditeur classique, on est déjà sur la bonne page pour éditer les « paramètres de disposition personnalisée ».
Là donc, dans le menu déroulant, on sélectionne « hooks » : cela ouvre plein de nouvelles options à remplir.
Elles vont nous permettre de placer notre contenu à des endroits précis de notre site !
Placer le bloc Site builder sur un « hook »
Un « hook » en code informatique est un bout de code exécutable, pour accomplir une certaine action : par exemple aller chercher des données et les afficher.
Avec Astra, ce concept de hook signifie qu’on va pouvoir aller placer finement nos blocs de contenu (custom layouts) sur nos pages, nos articles, à divers endroits, et en fonction de règles définies.
Les options particulières de ce custom hook sont les suivantes :
- Action : cette option est mal nommée… elle vous sert à indiquer la position à laquelle sera affiché le résultat du code, dans votre mise en page. Astra donne la liste des positions possibles sur cette page
- Priority : la priorité d’affichage, au cas où plusieurs hooks ont été placés dans la même « action » = position : celui qui a la priorité la plus haute (genre 1, plutôt que 2) sera placé avant
- Spacing : ajoute une marge interne (padding) à l’élément inséré
On va par exemple pouvoir placer
- un menu de navigation sur tous les articles d’une catégorie donnée (on définira alors la règle « all singulars » de cette catégorie, dans les réglages du hook)
- un bandeau pub sur les articles d’une catégorie : c’est ce que je fais ici même, sur cette page, tout en haut : la section « Astra Pro, un thème d’excellence » sur fonds rose, est un custom layout qui s’applique à tous les articles de la catégorie « Astra »)
- une annonce, sur tel ou tel type de page : sur toutes les pages, ou sur tous les articles, ou uniquement sur les pages de catégorie, etc
- une offre commerciale ou un bon de réduction sur toutes les pages de type produit, ou uniquement sur certains produits
- etc etc
Bref, c’est très pratique et je l’utilise abondamment sur mon site !
Shortcodes
Notre bloc site builder a aussi un shortcode, un code court, qu’on peut trouver sur l’onglet Mises en page personnalisées.
Il suffit de le copier, et d’aller le coller n’importe où dans une page : cela aura pour effet d’importer automatiquement tout le contenu à cet endroit de la page ! Magique. (Cela fonctionne exactement comme un modèle Elementor, en fait.)
Créer un élément site builder (« inside page / post content »)
Astra pro permet d’insérer un élément sous certaines conditions directement à l’intérieur de pages ou d’articles.
Ce type de bloc Site builder a les options générales, plus les options particulières suivantes :
Location Settings
- After a certain number of blocks : vous pouvez insérer votre bloc après un certain nombre d’autres blocs – pour garantir que cet élément sera bien intégré au contenu
- Before certain number of Heading blocks : vous pouvez insérer votre bloc avant un certain nombre de bloc titre, par exemple avant le 3è titre H2 (mais ceci ne marche qu’avec les blocs titre, pas avec les titres tout court présents dans un bloc texte)
Conclusion
En résumé, les éléments / blocs Site builder, permettent de créer et ajouter automatiquement du contenu à certains endroits définis de la maquette d’un site, en suivant des règles conditionnelles, par type de page, et par catégorie.
Qu'avez-vous pensé de cet article ?
Cliquez sur une étoile pour donner votre avis
Avis moyen 4.1 / 5. Nombre d'avis donnés 11
Soyez le premier à donner votre avis