L'en-tête est la partie de votre site qui contient le logo et la navigation. Il existe de nombreuses manières de contrôler le style de votre en-tête afin de créer un en-tête attrayant pour votre site.
Dans Editor 2.0, l'en-tête par défaut propose des mises en page prédéfinies, minimisant ainsi le risque de modifications accidentelles. Les utilisateurs peuvent choisir des mises en page avec des actions limitées, garantissant ainsi une expérience de conception ciblée et efficace. Une option d'édition avancée est également disponible pour les utilisateurs qui souhaitent davantage de personnalisation, par exemple en ajoutant des widgets ou des éléments supplémentaires, en ajoutant des sections vides ou prédéfinies et en enregistrant des sections d'en-tête pour les réutiliser. Pour plus d'informations, voir Édition avancée des en-têtes.
Astuce
Prenez notre Configuration de l'en-tête du site Cours de la Duda Academy pour en savoir plus sur les types d'en-têtes et comment les utiliser.
Pour masquer un en-tête :
-
Passez la souris sur le bas de l'en-tête, puis cliquez sur En-tête.
-
Cliquez Masquer l'en-tête de page sur, et sélectionnez l'appareil sur lequel vous souhaitez masquer l'en-tête.
Pour afficher l'en-tête :
-
Dans le panneau latéral, cliquez sur Afficher les éléments (
) icône.
-
Cliquez sur Masquericône en bas de page, puis sélectionnez Ouipour afficher l'en-tête.
Vous pouvez masquer l'en-tête de toutes les pages ou uniquement de certaines pages.
Pour masquer l'en-tête :
-
Cliquez avec le bouton droit sur l'en-tête pour ouvrir le menu contextuel.
-
Sélectionnez Masquer sur cet appareil, puis sélectionnez soit À partir de cette page uniquement ou Depuis toutes les pages.
Pour afficher l'en-tête :
-
Localisez votre en-tête dans le panneau, puis cliquez sur l'icône en forme d'œil barré à côté de celui-ci.
Note
Ces informations sont spécifiques à l'éditeur 2.0, anciennement connu sous le nom d'éditeur All-Flex. Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
La possibilité de masquer ou d'afficher des éléments dans l'en-tête vous permet de contrôler de manière précise les composants visuels sur différentes tailles d'écran, que vous souhaitiez rationaliser votre conception ou mettre en valeur certains éléments pour des appareils spécifiques.
Points importants à prendre en compte :
-
Tout élément de l'en-tête, y compris l'en-tête lui-même, peut être masqué sur n'importe quelle taille d'écran. Cela peut être fait sur le canevas ou dans le panneau Calques.
-
Les éléments inclus dans l'option d'en-tête par défaut peuvent également être masqués.
-
Les éléments masqués seront affichés comme étant désactivés avec une icône de masquage des éléments (
-
Le panneau des couches indiquera uniquement les éléments masqués pour la taille de l'écran sur lequel vous vous trouvez actuellement. Par exemple, si vous êtes sur ordinateur, cela indiquera uniquement les éléments cachés sur le bureau.
Pour masquer les éléments d'en-tête dans le panneau Calques, procédez comme suit :
-
Dans la barre d'outils supérieure, cliquez sur la taille d'écran souhaitée pour laquelle vous souhaitez masquer l'élément.
-
Cliquez sur l'élément que vous souhaitez masquer.
-
Cliquez sur l'icône de masquage de l'élément (
Pour afficher les éléments d'en-tête dans le panneau Calques, procédez comme suit :
-
Dans la barre d'outils supérieure, cliquez sur la taille d'écran souhaitée pour laquelle vous souhaitez masquer l'élément.
-
Cliquez sur l'élément que vous souhaitez afficher (il apparaîtra désactivé avec l'icône en forme d'œil barré avant d'être sélectionné).
-
Cliquez sur l'icône de masquage de l'élément (
L'en-tête rétréci est une version plus petite de l'en-tête du site, qui vous permet de conserver les informations de navigation importantes fixes sans distraire les utilisateurs lorsqu'ils font défiler une page vers le bas et sans prendre trop de place. Il agit comme une fonction d'en-tête collant mais condense la taille des logos et la taille générale de l'en-tête. Il est particulièrement utile sur les sites dont les en-têtes sont volumineux et sur les sites conçus pour un défilement prolongé
Note
L'en-tête rétréci est disponible sur ordinateur et uniquement pour tablette lorsque la disposition de l'en-tête de la barre supérieure est utilisée.
Pour activer un en-tête rétréci dans Classic Editor:
-
Passez la souris sur l'en-tête, cliquez sur En-tête, puis cliquez sur Modifier le design.
-
Dans l'onglet Rétrécir l'en-tête, cliquez sur Activer la réduction de l'en-tête basculer. Les options suivantes s'offrent à vous :
-
Afficher uniquement la ligne de navigation. N'affichez la ligne contenant la navigation que lorsque l'en-tête se rétrécit. Cette fonctionnalité n'est applicable que s'il y a plus d'une ligne dans l'en-tête.
-
Couleur de fond. Modifiez la couleur d'arrière-plan de l'en-tête rétréci. Notez que la couleur d'arrière-plan de la ligne remplace la couleur d'arrière-plan de l'en-tête qui rétrécit
-
Plus de couleurs d'en-tête sur le défilement. Spécifiez les couleurs du texte, du lien et du survol sélectionnés, des icônes, du texte des boutons, etc.
-
Taille du logo. Modifiez la taille du logo ou de l'image lorsque l'en-tête est réduit (la valeur par défaut est de 66 %
-
Modifier le logo sur le défilement. Sélectionnez un logo à afficher sur le défilement.
-
espacement des en-têtes. Ajustez le rembourrage supérieur et inférieur de l'en-tête rétractable. Vous pouvez modifier l'espacement des en-têtes par appareil.
-
Une fois que le rétrécissement de l'en-tête est activé, voici ce qui se produit :
-
L'espacement des en-têtes modifie le rembourrage haut/bas et la marge à 0. Cela ne s'applique pas aux lignes situées à l'intérieur de l'en-tête.
-
Les images de l'en-tête sont réduites au pourcentage indiqué dans la barre de taille du logo (66 % par défaut).
-
Pour gérer les modèles avec une valeur de hauteur minimale dans l'en-tête, la hauteur minimale de l'en-tête est réglée sur auto.
-
S'il y a des lignes vides avec des colonnes, les colonnes couvrent tout l'espace de la ligne.
-
Les propriétés de conception remplacent les propriétés de l'en-tête rétrécissant. Par exemple, si vous définissez un arrière-plan de ligne dans l'en-tête, l'arrière-plan de ligne s'affiche par-dessus l'arrière-plan d'en-tête rétréci
-
Les lignes vides sont affichées dans l'en-tête rétréci.
-
Si vous ne pouvez pas voir votre en-tête rétréci, c'est peut-être parce que vous ne disposez pas d'un nombre suffisant de lignes sur votre site pour pouvoir faire défiler le site vers le bas et déclencher le rétrécissement de l'en-tête. Si vous n'avez qu'une seule ligne sur la page, le site ne défilera pas.
Note
Ces informations sont spécifiques à l'éditeur 2.0, anciennement connu sous le nom d'éditeur All-Flex. Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
La fonction Scroll on Header permet de garder les éléments de navigation essentiels, tels que le logo et le menu, visibles en haut de l'écran lorsque les utilisateurs font défiler la page vers le bas. Il condense les logos et la taille générale de l'en-tête pour économiser de l'espace et faciliter l'accès à la navigation sans être intrusif. Idéal pour les sites dont les en-têtes sont volumineux ou ceux conçus pour un défilement prolongé, il améliore l'expérience utilisateur en maintenant l'accessibilité aux principales options de navigation
Il est important de noter que l'en-tête permanent doit déjà être activé pour que le défilement sur l'en-tête puisse être activé.
Pour activer le défilement sur l'en-tête :
-
Passez la souris sur l'en-tête, puis cliquez sur En-tête.
-
Cliquez Modifier le design. Le panneau Conception de l'en-tête apparaîtra.
-
Développez le Postesection, et activez le Définir comme en-tête collant basculez si ce n'est pas déjà fait.
-
Activez le Modifier l'en-tête lors du défilement basculer.
-
Configurez les options de conception suivantes :
-
Rembourrage. Définissez les valeurs initiales de l'en-tête padding-top et padding-bottom (cela n'est pas spécifique à l'
-
BG sur Scroll. Sélectionnez la couleur et l'opacité de l'arrière-plan. Les modifications apportées à n'importe quelle taille d'écran affecteront les autres.
-
Espacement sur le défilement. Définissez le rembourrage supérieur et inférieur en px, %, vh ou vw. Si vous souhaitez modifier les paramètres de taille de l'écran du bureau, vous pouvez effectuer des modifications sur tablette et mobile
-
Taille du logo. Utilisez le curseur ou la zone de texte pour spécifier la taille à laquelle le logo doit être réduit lorsque l'en-tête se rétrécit lors du défilement. La valeur par défaut est 66 %. Des modifications doivent être apportées aux tailles d'écran individuelles.
-
Afficher uniquement la section de navigation sur le défilement. Dans la section Position, activez Afficher uniquement la section de navigation sur le défilement basculez pour que seule la navigation soit visible lors du défilement. Toutes les autres sections de l'en-tête disparaîtront au fur et à mesure du défilement.
Notez que cette option n'est disponible que pour les en-têtes avancés.
-
Les modifications apportées à la section Disposition du panneau de conception de l'en-tête n'affectent pas les paramètres de position.
Vous avez la possibilité de configurer votre en-tête pour qu'il chevauche le contenu de la première ligne de la page. Cela peut créer un effet visuellement attrayant grâce auquel l'en-tête s'intègre parfaitement au contenu. Si vous le souhaitez, vous pouvez configurer l'en-tête pour qu'il chevauche la première ligne. Cela doit être activé par page.
Pour activer le chevauchement de l'en-tête avec la première ligne :
-
Passez la souris sur l'en-tête, puis cliquez sur En-tête.
-
Cliquez Modifier le design. Le panneau Conception de l'en-tête apparaîtra.
-
Développez le Postesection, et activez la bascule pour Superposez la première section de la page.
-
(Facultatif) Configurez une couleur de fond qui s'appliquera à toutes les tailles d'écran.
Les widgets ne sont pas tous compatibles et apparaissent dans l'en-tête rétréci. Si l'en-tête contient un widget qui n'est pas compatible avec l'en-tête réduit, une colonne vide apparaît à la place du widget. Vous ne pouvez pas modifier les widgets lorsque l'en-tête est réduit.
Les widgets suivants sont compatibles et s'afficheront dans un en-tête rétréci pour Classic Editor et Editor 2.0:
-
Navigation
-
Multilingue
-
Icônes sociales
-
Cliquez pour appeler
-
bouton OpenTable
-
Cliquez sur le bouton Envoyer un e-mail
-
vcita
-
bouton PayPal
-
Bouton J'aime sur Facebook
-
Images et logos
-
Panier de magasin
-
Widget de paragraphe
-
Widget de titre
-
Boutons
Un en-tête autocollant devient statique et reste en place lorsque vous faites défiler les pages de votre site.
Note
Dans Classic Editor, Les en-têtes mobiles sont toujours collants par défaut. Dans Editor 2.0, vous avez la possibilité d'activer ou de désactiver un en-tête permanent pour toutes les tailles d'écran.
Pour activer un en-tête permanent :
-
Passez la souris sur l'en-tête, cliquez sur En-tête, puis cliquez sur Modifier le design.
-
Sur le Contenu onglet, sélectionnez Définir comme en-tête collant. Si l'option En-tête rémanente n'est pas disponible, vous devez désactiver le bouton de réduction de l'en-tête dans l'onglet En-tête réduit.
Vous pouvez choisir parmi plusieurs mises en page d'en-tête flexibles prédéfinies. Si vous passez à l'une des mises en page d'en-tête flexibles prédéfinies, vous ne pouvez pas revenir à un en-tête fixe, vous pouvez uniquement basculer entre d'autres mises en page d'en-tête flexibles. Le changement de mise en page supprime également le contenu existant de la section d'en-tête. Nous vous recommandons de créer une sauvegarde avant de changer de modèle.
Pour modifier la disposition de l'en-tête :
-
Passez la souris sur l'en-tête et cliquez En-tête.
-
Sur le Design onglet, sélectionnez une nouvelle disposition d'en-tête. Si vous passez à un en-tête permanent, vous devez d'abord désactiver la bascule pour En-tête rétréci dans l'onglet Shrinking Header.
Note
Ces informations sont spécifiques à l'éditeur 2.0, anciennement connu sous le nom d'éditeur All-Flex. Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
Vous pouvez activer la mise en page d'un site de hamburgers sur ordinateur. Par défaut, la tablette et le mobile utilisent la disposition hamburger
Pour activer la mise en page du site de Hamburger, procédez comme suit :
-
Cliquez sur l'étiquette de votre en-tête et sélectionnez Modifier le préréglage dans le menu flottant. Notez qu'il en va de même, que vous ayez un en-tête Basic ou Advanced.
-
Dans le panneau de conception, Préréglages la section s'ouvrira. Sélectionnez le Hamburger icône à côté de Parcourir les préréglages du menu. Notez qu'aucune modification ne sera encore répercutée sur le canevas.
-
Sélectionnez la disposition de hamburger souhaitée. La mise en page sélectionnée s'affichera sur le canevas.
-
Lorsque vous êtes satisfait de la mise en page, quittez la fenêtre contextuelle Préréglages.
Notez que lors de la modification des préréglages, certaines personnalisations peuvent être réinitialisées. La couleur de fond et le logo resteront les mêmes.
Pour accéder au menu de conception de l'en-tête dans Classic Editor, passez la souris sur l'en-tête, cliquez sur En-tête, puis cliquez sur Design onglet.
Pour accéder au menu de conception de l'en-tête dans Editor 2.0, passez la souris sur l'en-tête, cliquez sur En-tête, puis cliquez sur Modifier le design. Le panneau de conception s'ouvrira sur le côté de la toile. Il contient les options de conception suivantes :
-
Disposition : Explorez les options de mise en page qui associent les styles de navigation principaux et de hamburger de manière cohérente, quelle que soit la taille de l'écran. Bien que les fonctionnalités des mises en page par défaut soient limitées, une option d'édition avancée améliore la flexibilité
-
Espacement: définissez les marges et le remplissage, les modifications apportées sur le bureau ayant une incidence sur les autres tailles d'écran si leur espacement reste inchangé.
-
Contexte: choisissez la couleur ou l'image d'arrière-plan, ajoutez des bordures ou des ombres et observez les changements se refléter de manière fluide sur toutes les tailles d'écran.
-
Poste: Activez un en-tête permanent avec des modifications basées sur le défilement. L'activation de l'en-tête collant sur n'importe quelle taille d'écran influence le comportement des autres.
Si l'en-tête contient une image, le logo du site sera conservé lors du déplacement entre les mises en page d'en-tête. Dans le cas où il y a plus d'une image ou si le logo est textuel, l'image du logo est conservée telle que dans la mise en page. Il est important de noter que les en-têtes entre les appareils ne sont pas connectés. Par conséquent, si vous ajoutez un logo sur le bureau, il n'est pas automatiquement ajouté aux autres types d'appareils. La seule exception est que si la disposition de l'en-tête de la barre supérieure est utilisée sur la tablette, elle héritera de toutes les modifications de logo apportées sur le bureau
Si vous supprimez le logo, ajoutez à nouveau l'image en faisant glisser l'élément d'image dans l'en-tête et définissez le lien pour revenir à la page d'accueil.
Note
Ces informations sont spécifiques à l'éditeur classique et ne concernent pas Editor 2.0 (anciennement connu sous le nom d'éditeur All-Flex). Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
Vous pouvez ajouter un menu extensible sur vos sites de bureau et de tablette, ce qui facilite la création de sites modernes dotés d'une grande flexibilité de conception. Choisissez parmi plusieurs mises en page de menu extensibles et personnalisez-les à votre guise, en ajoutant des widgets, des lignes et
La mise en page de menu extensible pour mobile offre davantage de personnalisation et permet d'afficher des widgets dans l'en-tête et un menu toujours visible.
Vous pouvez modifier la disposition de l'en-tête en une disposition prédéfinie qui inclut des boutons, cliquez pour appeler, panier de magasin, icônes sociales, et plus encore. Vous pouvez ajouter n'importe quel widget au menu extensible depuis le panneau des widgets
Pour sélectionner et configurer un en-tête et une disposition de menu extensible pour ordinateur de bureau et tablette :
-
Cliquez Disposition du site.
-
Dans le PC de bureausection, sélectionnez le Menu extensible mise en page.
-
Dans le Tablettesection, sélectionnez Menu extensible mise en page.
-
Après avoir sélectionné la mise en page de menu extensible, une icône de hamburger s'affiche dans l'en-tête de votre site. Cliquez sur le hamburger
) pour afficher le menu extensible.
-
Sur le Dispositiononglet, cliquez sur la disposition existante pour sélectionner une disposition de menu.
-
Dans l'onglet Style, vous disposez des options suivantes :
-
Entrez depuis. Haut ou Côté.
-
Effet d'entrée. Couvercle ou Poussez.
-
Largeur. Déplacez le curseur pour définir la largeur du menu extensible lorsqu'il est développé. La largeur du menu est définie en pourcentages pour s'adapter à toutes les tailles d'écran.
-
Contexte. Configurez la couleur ou l'image d'arrière-plan.
-
Fermer la couleur de l'icône. Sélectionnez une couleur pour l'icône de fermeture et la couleur d'arrière-plan de l'icône de fermeture.
-
-
Sur le Espacement onglet, modifiez le rembourrage.
Le menu extensible peut comporter jusqu'à 3 lignes, chacune étant entièrement personnalisée. Si l'ordinateur de bureau et la tablette ont la même présentation de site (tous deux extensibles ou barre supérieure), toutes les personnalisations sont identiques pour les deux. S'ils sont différents, chaque appareil doit être défini séparément.
Pour modifier l'emplacement du menu extensible dans l'en-tête :
-
Passez la souris sur l'en-tête, cliquez sur En-tête, puis sélectionnez Modifier le design.
-
Dans le Disposition section, cliquez sur Gaucheou Droite.
Pour sélectionner et configurer un en-tête et une présentation de menu extensible pour mobile :
-
Passez la souris sur l'en-tête, cliquez sur le En-têteétiquette, puis sélectionnez Modifier le design.
-
Sur le Disposition onglet, cliquez sur la disposition existante pour sélectionner une disposition de menu. L'en-tête mobile propose des mises en page qui affichent des widgets tels que des liens sociaux, des numéros de téléphone, etc. La disposition des en-têtes est fixe, vous ne pouvez donc pas ajouter de nouveaux widgets, mais vous pouvez les modifier ou les supprimer. Lorsque vous ajoutez une boutique ou que vous utilisez la fonctionnalité multilingue, d'autres options de mise en page sont disponibles, notamment les icônes du panier d'expédition de la boutique et la fonctionnalité multilingue. Si la boutique n'est pas activée ou si le mode multilingue n'est pas activé, ces mises en page n'apparaissent pas
-
Cliquez Gaucheou Droitepour la position de l'icône du menu.
-
Si ce n'est pas déjà fait, ouvrez le menu en mode mobile. Cela permet à l'éditeur de menu de s'ouvrir afin que vous puissiez modifier le menu extensible.
-
Sur le Dispositiononglet, cliquez sur la disposition existante pour sélectionner une disposition de menu. Le menu extensible propose plusieurs mises en page qui peuvent afficher les liens sociaux, les informations de contact et plus encore. Vous pouvez ajouter n'importe quel widget au menu extensible, ajouter des colonnes, trier les colonnes les unes à côté des autres ou les unes au-dessus des autres. Cependant, lorsque vous passez d'une mise en page à une autre, tout le contenu que vous avez ajouté dans le menu est supprimé, en ne reprenant que les widgets de la mise en page choisie
-
Sur le Style onglet, vous disposez des options suivantes :
-
Entrez depuis. Hautou Côté. Lorsque Top est sélectionné, déplacez le curseur de hauteur. Lorsque Side est sélectionné, déplacez le curseur de largeur.
-
Effet d'entrée. Couvercleou Poussez.
-
Note
Les widgets supplémentaires ne peuvent pas être ajoutés à l'en-tête du mobile.
Note
Ces informations sont spécifiques à l'éditeur classique et ne concernent pas Editor 2.0 (anciennement connu sous le nom d'éditeur All-Flex). Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
Pour afficher les éléments d'en-tête au-dessus des images des héros, passez la souris sur l'en-tête, cliquez sur En-tête, cliquez sur Design onglet, puis cliquez sur Superposez la première rangée. Cela donne plus de visibilité aux images de vos héros et facilite la conception de sites attrayants et tendances
Gardez les points suivants à l'esprit :
-
Pour l'en-tête.Définissez la couleur d'arrière-plan sur transparent ou sur une couleur opacifiée.
-
Pour la première rangée. Utilisez un rembourrage supérieur égal ou similaire à la hauteur de l'en-tête.
Note
Pour plus de flexibilité, ce paramètre s'applique uniquement à la page en cours. Pour l'activer sur d'autres pages, accédez à chaque page et suivez les étapes ci-dessus.
Note
Ces informations sont spécifiques à l'éditeur 2.0, anciennement connu sous le nom d'éditeur All-Flex. Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
édition avancée vous permet de personnaliser davantage l'en-tête, par exemple en ajoutant des widgets, des éléments et des sections vides ou prédéfinies. Vous pouvez également enregistrer des sections d'en-tête individuelles et les réutiliser.
Note
-
La modification de la disposition de l'en-tête (dans le panneau Conception de l'en-tête) réinitialisera toutes les modifications apportées et désactivera la modification avancée.
-
Les en-têtes étant synchronisés sur toutes les tailles d'écran, il est recommandé de vérifier toutes les tailles d'écran lorsque vous utilisez l'option d'édition avancée.
Lorsque vous utilisez l'édition avancée, il est recommandé de vérifier toutes les tailles d'écran en raison de la synchronisation des en-têtes.
Pour activer l'édition avancée, procédez comme suit :
-
Cliquez sur En-tête onglet.
-
Cliquez Modifier le design.
-
Dans la section Disposition, cliquez sur Activer l'édition avancée.
Si vous prévoyez d'afficher différents éléments sur ordinateur et mobile (par exemple, un bouton sur ordinateur et une icône sur mobile), utilisez la fonction masquer/afficher pour des transitions fluides. Pour en savoir plus, consultez Masquer ou afficher des éléments dans l'en-tête (Éditeur 2.0).
Pour désactiver l'édition avancée et réinitialiser l'en-tête, sélectionnez une autre mise en page :
-
Cliquez sur En-tête onglet.
-
Cliquez Modifier le design.
-
Dans la section Disposition, cliquez sur la flèche pour accéder aux options de mise en page.
-
Sélectionnez une autre mise en page pour désactiver l'édition avancée et réinitialiser l'en-tête. Toutes les modifications apportées à l'aide de l'édition avancée seront annulées et ne seront pas enregistrées
L'en-tête de l'Editor 2.0 étant en constante évolution, certaines fonctionnalités sont toujours en cours de révision et/ou de développement :
-
Accessibilité HTML/CSS : L'accès au HTML/CSS pour l'en-tête est une limitation permanente en raison de la technologie utilisée.