Dans ce guide, nous allons voir comment créer l’header du site web.
Qu’est-ce que l’header?
L’header est la partie supérieure du site web qui est répétée sur toutes les pages du site, généralement à l’intérieur de cette section, nous retrouvons le logo du site et le menu de navigation.
Maintenant, il ne nous reste plus qu’à voir en quelques étapes simples comment créer notre header.
Étape 1 : Créons l’Header
Tout d’abord, rendons-nous dans la rubrique Blocs globaux présente à l’intérieur du menu principal de Framework360 en suivant les étapes suivantes :
Site Web > Blocs Globaux
A l’intérieur de cette section, nous retrouverons tous les contenus qui peuvent être créés une fois et ensuite rappelés sur toutes les pages du site web que nous souhaitons.
À ce stade, pour créer l’header , nous n’aurons qu’à cliquer sur le bouton en haut à droite Ajouter. Une fois dans la page de création du bloc global, dirigeons-nous vers la section Type et sélectionnons comme type Header, comme montré sur la figure :
Étape 2 : Personnalisons notre header
À ce stade, toujours dans l’écran de création du bloc global, nous allons personnaliser le contenu de notre header à travers le Visual Builder de Framework360.
Dans notre exemple, nous allons créer un header dans lequel seront présents le logo du site et le menu de navigation.
Tout d'abord, cliquons sur Ajouter une ligne et créons à l’intérieur de la ligne deux colonnes (une dans laquelle nous insérerons le logo et l’autre dans laquelle nous insérerons le menù de navigation).
À ce stade, allons chercher à l’intérieur du Visual Builder le contenu Logo site et faisons-le glisser dans la première colonne créée. Ensuite, toujours dans le Visual Builder, cherchons le contenu Navbar, faisons-le glisser sur la deuxième colonne et sélectionnons à l’intérieur de l’écran de personnalisation du Navbar le Menù Principal.
À ce stade, cliquons sur le bouton en haut à droite Enregistrer
Étape 3 : Créons le Menù Principal
Si nous n’avons pas encore créé le Menù Principal , nous remarquerons que dans la partie droite de notre header , rien n’apparaîtra :
Pour créer le Menu Principal nous devrions nous rendre dans la rubrique Menu présente à l’intérieur du menu principal de Framework360 en suivant les étapes suivantes :
Site Web > Menu
À ce stade, cliquons sur le Menu Principal qui est inséré automatiquement par Framevork360 pour le modifier.
Une fois dans l'écran de modification, nous ne devrions rien faire d'autre que de faire glisser les éléments que nous voulons afficher dans le menu principal de la colonne de gauche Page à la colonne de droite Ordre du Menu comme montré sur l'image :
À ce stade, il ne nous reste plus qu'à cliquer sur le bouton Enregistrer en haut à droite et notre En-tête sera complété !
