Avec Astra, vous pouvez créer votre en-tête à l’aide de l’outil de personnalisation.
Cet en-tête apparaîtra dès lors sur toutes les pages de votre page.
Cependant il est possible de personnaliser chaque page.
Voici donc un tutoriel pour installer une bannière d’en-tête personnalisée sur une page.
La première chose à faire bien entendu est de créer une page, et lui donner un titre.
Notre bannière sera créée à partir de l’image mise en avant de votre page, et nous utiliserons cette image
Personnalisation de l’en-tête d’une page en quatre étapes, c’est parti !
Etape 1 – Installation de l’image
Installez votre image à mettre en avant.
La désactivation de la visibilité du site n’est utile que si dans votre image mise en avant le titre apparaît déjà, ce qui est le cas ici.
Si vous vous rendez en FO, vous allez constater que vous voyez d’une part l’en-tête de votre site, et, en-dessous, votre image mise en avant.
Il s’agit donc de mettre cette image mise en avant A LA PLACE de l’image de bannière d’en-tête. Ce n’est pas très compliqué.
Nous allons donc jouer avec la fonctionnalité d’en-tête transparent proposée par Astra.
Etape 2 – La transparence d’en-tête
Retournez en BO de votre page et ouvrez le menu Astra (en haut à droite), puis Advanced Settings.
Sur la fenêtre pop-up qui s’ouvre, désactivez :
- l’en-tête principal, c’est celui qui contient votre image d’en-tête
- l’en-tête du dessous c’est celui qui contient votre menu. Si nous ne le désactivons pas, nous conserverons, certes le menu, mais il sera alors placé au-dessus de notre image de bannière, donc peu visible, ce qui n’est pas souhaitable. Peu importe, nous allons en créer un autre en trois clics un peu plus tard.
Voici donc le résultat en Front Office. Vous pouvez constater que :
- l’image mise en avant a glissé en haut de page
- que le menu a par contre disparu
- il ne reste que le fil d’Ariane, et la partie haute de l’en-tête
Par ailleurs, force est de constater que l’image étant de la même couleur que le fond de la page, tout cela n’est pas très esthétique !
Nous allons donc installer un menu à cette triste page.
Etape 3. Installer un menu
Retournez en BO de votre page.
Cherchez le bloc « Navigation » (vous pouvez aussi taper simplement « menu »).
Installez le bloc « Navigation ».
Vous allez constater qu’instantanément il apparaît sur votre page.
Le menu étant installé, passons à sa mise en forme.
Etape 4. Mise en forme du menu
Ouvrez maintenant la sidebar de mise en forme de la page et des blocs.
Vous constatez qu’à partir de cette sidebar vous pouvez :
- modifier le menu en supprimant ou ajoutant des pages qui n’apparaisseraient pas, et donc personnaliser totalement le menu (par exemple vous pourriez retirer dudit menu la page sur laquelle le visiteur se trouve)
- Régler la mise en forme de ce menu. Et c’est précisément ce que nous allons faire pour créer la démarcation entre l’en-tête et le contenu de la page et pour mettre ce menu en valeur.
Si vous avez bien défini la largeur de votre page ainsi que la sidebar, alors vous devriez avoir ce résultat.
Nous avons bien une image de bannière, et un menu. Il ne reste plus qu’à rédiger.
FELICITATIONS !
C’est fini, vous avez installé une bannière personnalisée sur votre page.
Mais ce n’est pas tout !
WordPress vous permet de mémoriser les blocs que vous avez personnalisé, et la manipulation est très simple.
Les blocs réutilisables et compositions personnelles
Créer un bloc réutilisable
Sélectionnez le bloc que vous souhaitez enregistrer.
Cliquez sur les trois petits points, et sélectionnez « Créer une composition ou un bloc réutilisable.
Une fenêtre pop-up s’ouvre : donnez un nom (explicite !) à votre bloc réutilisable.
Maintenant il reste à utiliser ce bloc personnalisé sur n’importe quelle page.
Utiliser les compositions personnelles
Dans la zone de recherche des blocs, cliquez sur le symbole à l’extrême droite.
Vos blocs réutilisables apparaissent.
Il vous suffit dès lors de cliquer sur celui que vous désirez, et il s’installe automatiquement. Inutile de refaire les manipulation de mise en forme.
Bien entendu, vous pouvez modifier à votre guise le bloc une fois installé.
Cette manipulation est possible sur tous les blocs que vous avez personnalisé, et même sur des compositions, c’est à dire des ensemble de blocs…