Comment créer mon en-tête avec le thème Ex2?

Créez votre en-tête

L'en-tête est la section supérieure de votre site Web, affichée sur toutes (ou presque toutes) les pages et les publications. C'est quelque chose que chaque visiteur du site Web voit en premier... votre chance d'avoir une bonne première impression.

C'est un endroit où les visiteurs peuvent rencontrer votre marque, votre offre ou votre idée, et être d'abord ravis et intrigués pour explorer davantage votre site Web.

Le thème Ex2 est livré avec un générateur d'en-têtes par glisser-déposer. Il s'agit d'un outil parfait pour créer de superbes en-têtes rapidement et sans effort, sans aucun codage. Ici, vous pourrez ajouter et personnaliser votre logo, le titre et la balise de votre site, votre style d'en-tête, vos menus, vos boutons, vos icônes sociales et bien plus encore.

Vous avez toute liberté pour positionner les éléments en les faisant simplement glisser vers n'importe quelle position dans l'en-tête, aussi simple que cela.

Constructeur d'en-tête: Onglet Général

L'onglet Général est votre vue par défaut lors de l'ouverture du générateur d'en-tête. Vous avez ici un aperçu de la configuration de votre en-tête.

Pour activer la transparence, activez l'option "Activer sur tout le site". Cela ouvrira également des options supplémentaires pour désactiver l'en-tête transparent pour une page ou des types de
publication spécifiques.

Une section “Activer sur” vous permet de choisir d'activer l'en-tête transparent uniquement sur les ordinateurs de bureau, uniquement les appareils mobiles, ou encore sur les deux
(bureau + mobile).

L’option “Logo différent pour l'en-tête transparent” est utile si votre logo parait bien sur l'en-tête standard mais pas autant avec un modèle transparent. Vous pouvez activer cette option et définir un logo différent à utiliser pour l'en-tête transparent.

Il est également possible de définir la largeur du logo de l'en-tête transparent. Selon le logo que vous utilisez, vous voudrez peut-être ajouter un logo pour les écrans Retina (densité de pixels plus élevée) qui devrait être au moins 2 fois plus grand ou plus. Cliquez simplement sur "Logo différent pour les appareils Retina" et téléchargez votre logo Retina.

Onglet Design

Sous l'onglet Conception, vous trouverez des options pour styliser votre en-tête transparent. Vous pourrez définir le titre du site, l'arrière-plan, le menu, le sous-menu et les couleurs. En outre, il existe des options pour définir la superposition d'arrière-plan et la bordure inférieure. La bordure inférieure est définie par défaut sur 0px et n'est donc pas visible.

L'augmentation de la valeur de la bordure (1px ou plus) la fera apparaître sur le frontend, et vous aurez également la possibilité de définir la couleur de la bordure inférieure.

Gardez à l'esprit que ces paramètres ne s'appliquent qu'à votre en-tête transparent. Si vous utilisez votre en-tête habituel sur certaines pages, ces paramètres ne seront pas appliqués ici.

Constructeur d'en-tête: Design

L'onglet Design est utilisé pour définir l'espacement de votre en-tête
La largeur définit la quantité totale d'espace que vos widgets d'en-tête utiliseront
La pleine largeur étalera vos widgets d'en-tête d'un bord à l'autre de l'écran
La largeur du contenu limite l'affichage de vos widgets d'en-tête en utilisant la largeur de votre contenu.
L'arrière-plan de votre en-tête s'étendra toujours d'un bord à l'autre de l'écran.
La marge ajoute de l'espace sur un ou plusieurs côtés de votre en-tête. Cela ajoutera de l'espace à la fois à la zone et à l'arrière-plan de vos widgets d'en-tête.

Éditeur visuel d'en-tête

L'en-tête se compose de trois sections distinctes que vous pouvez voir dans la zone de création d'en-tête visuel. Vous pouvez utiliser les trois sections pour ajouter n'importe quel élément à n'importe quelle position.

Ces trois rubriques sont :

En-tête principal: cet en-tête est la section du milieu. Il est le plus souvent utilisé pour ajouter vos éléments les plus importants tels que le logo, le menu principal ou la recherche,
le panier et le compte.
Au-dessus de l'en-tête: cet en-tête est la section supérieure et il est affiché au-dessus de l'en-tête principal sur votre site Web. Il peut être utilisé pour vos éléments secondaires,
comme le menu secondaire, ou des éléments comme les icônes sociales, les boutons d'appel à l'action, etc. Vous pouvez également utiliser le code HTML pour ajouter par exemple la
période de remise actuelle, les dernières nouvelles ou une notification pour les visiteurs du site Web.
Sous l'en-tête: cet en-tête est la section inférieure et il est affiché sous l'en-tête principal de votre site Web. L'utilisation de cet en-tête est la même que celle de l'en-
tête ci-dessus.

L'objectif principal des en-têtes au-dessus et en dessous est d'éviter d'encombrer l'en-tête principal. Ils étendent la zone disponible pour ajouter tous les éléments et informations dont vous avez besoin dans votre en-tête, ainsi que pour fournir un certain niveau de hiérarchisation.

Vous pouvez personnaliser chaque section en cliquant sur l'icône « rouage » sur le côté gauche des sections. Chaque section comporte deux onglets :

Général

Hauteur: définissez la hauteur de chaque en-tête séparément.

Design

Taille de la bordure inférieure (et couleur): si vous devez séparer votre en-tête d'une autre section ou du contenu d'un site Web, vous pouvez ajouter une bordure inférieure en définissant la taille de votre bordure. Une fois que vous avez défini la taille de votre bordure, une option supplémentaire apparaîtra (Bottom Border Color) pour choisir la couleur de la bordure.

Arrière-plan: définissez la couleur d'arrière-plan de l'en-tête.
Bordure: ajoutez une bordure sur un ou plusieurs côtés de l'en-tête. Cela ajoutera de l'espace entre les bords de la section d'en-tête et le contenu.
Marge: ajoutez une marge sur un ou plusieurs côtés de l'en-tête. Cela ajoutera de l'espace entre cet en-tête et d'autres zones du site Web (autres en-têtes, contenu de page/publication, bords d'écran, etc.).

Chaque en-tête peut être personnalisé séparément pour le bureau et le mobile et peut avoir différents éléments ajoutés pour chaque vue. La position des éléments peut également être modifiée.

Menu hors-champ

Le menu hors-champ sert à modifier le menu pour les appareils mobiles (téléphones et tablettes). Ce menu est activé en cliquant sur le bouton “bascule dans le menu mobile” identifié par une icône représentant un téléphone.

Pour modifier ce menu, passez à la fenêtre d’édition de l'affichage sur tablette ou mobile. Vous pouvez ajouter des éléments à ce menu et définir leur ordre de la même manière que vous modifiez d'autres sections d'en-tête. Pour y accéder, il suffit de cliquer sur l'icône représentant un engrenage, à la gauche des diverses sections. Cela ouvrira les onglets suivants :

Général

Type d'en-tête: définissez le type de canevas désactivé sur Flyout (menu volant depuis le côté droit ou gauche d'un écran), plein écran ou déroulant.
Cible déroulante: choisissez si vous voulez que vos sous-menus s'ouvrent en cliquant sur l'icône de flèche vers le bas (Icône) ou en cliquant sur un élément de menu entier (lien).
Alignement du contenu: alignez les widgets de la section Off Canvas sur Gauche, Centre ou Droite.

Design

Espacement des éléments intérieurs: ajouter de l'espace entre les éléments ;
Arrière-plan: définissez la couleur d'arrière-plan.

Élément d'en-tête

Identité et logo du site

Il s'agit de l'élément Identité et logo de votre site (précédemment nommé "Logo"). Dans l'onglet Général, vous pouvez ajouter votre logo, définir la largeur du logo et ajouter un logo différent pour les appareils Retina.

À l'aide de cet élément, à côté de Logo, vous pouvez définir le titre de votre site, le slogan du site et l'icône de votre site (favicon). Ces informations sont également affichées en haut de l'onglet de votre site Web dans votre navigateur. L'onglet Design est utilisé si vous souhaitez ajouter une marge à cet élément.

Menu primaire

Ici, vous trouverez les éléments de menu ajoutés à votre menu principal (Tableau de bord >Apparence > Menus). L'onglet Général vous propose plusieurs options de sous-menu : largeur du sous-menu, animation du conteneur (l'animation utilisée lors du développement d'un sous-menu), séparateur d'éléments (ajoute ou supprime un séparateur entre les éléments du sous-menu).

Vous pouvez également décider si vous souhaitez définir vos éléments de menu sur Empiler sur mobile. Il s'agit de la configuration la plus courante pour les menus mobiles. Les éléments de menu seront empilés les uns sur les autres.

L'onglet Design vous permettra de définir le style de survol du menu, de styliser votre conteneur de sous-menu, de définir les couleurs du texte et de l'arrière-plan, la police du menu, l'espacement des manu et la marge.

Chercher

L'ajout de cet élément ajoutera une fonction de recherche à votre en-tête. Vous pouvez définir la taille de l'icône, la couleur de l'icône et la marge.

Social (en-tête)

Vous pouvez ajouter vos icônes de réseaux sociaux à l'aide de cet élément. Vous pouvez gérer vos icônes de médias sociaux à l'aide de l'onglet Général Vous pouvez choisir les icônes
en ajouter ou les supprimer. L'onglet Design contient les options de style des icônes.

Bouton

Ceci est utilisé pour ajouter un bouton personnalisé à votre en-tête. Ajoutez le texte, le lien et le style (onglet Conception) le bouton ici.

Menu secondaire

Vous pouvez ajouter un autre menu (secondaire) à votre en-tête si vous en avez besoin. Vous pouvez également l'utiliser si vous souhaitez diviser votre menu principal en deux menus distincts.
Par exemple, si vous souhaitez créer un en-tête avec un logo positionné au centre, avec vos éléments de menu à côté sur les côtés gauche et droit.

Vous pouvez personnaliser ce menu de la même manière que le menu principal.

HTML

Utilisez cet élément pour ajouter du code HTML ou des shortcodes.

Widget

Ceci est utilisé pour ajouter l'un des widgets du site Web (Tableau de bord > Apparence > Widgets) à votre en-tête.

Bouton à bascule

Le bouton bascule (également connu sous le nom d'icône ou de bouton hamburger) est utilisé pour développer le menu de votre tablette/mobile. Ainsi, cet élément n'est disponible que sur les vues tablette ou mobile.

L'onglet Général vous permettra de choisir l'icône du bouton et la taille de l'icône, d'ajouter une étiquette de menu (texte à côté de l'icône) si vous en avez besoin et le style du bouton bascule. Les options de style se trouvent dans l'onglet Design : Couleur de l'icône, Couleur d'arrière-plan, Rayon de la bordure et Marge.

Compte

Si vous avez des plugins comme LearnDash ou WooCommerce actifs, vous pouvez ajouter le raccourci du compte utilisateur à l'aide de cet élément.

Panier

Cela ajoutera une icône de panier (WooCommerce) à votre en-tête. Ensuite, définissez si le titre du panier doit également être affiché, ou uniquement l'icône du panier, et si vous souhaitez également afficher un total du panier (onglet Général). Vous pouvez également styliser votre chariot et votre plateau de chariot (onglet Design)

Mis à jour le : 20/03/2023