En-têtes – Duda Support

L'en-tête est la zone de votre site réservée au logo et à la navigation. Il existe de nombreuses façons de modifier le style de votre en-tête afin de le rendre plus attrayant.

Dans l'Éditeur 2.0, l'en-tête par défaut propose des mises en page prédéfinies, ce qui minimise le risque de modifications accidentelles. Les utilisateurs peuvent choisir des mises en page avec des actions limitées, ce qui garantit une expérience de conception ciblée et efficace. Une option d'édition avancée est également disponible pour les utilisateurs souhaitant une personnalisation plus poussée, permettant l'ajout de widget ou d'éléments supplémentaires par rapport aux mises en page prédéfinies. Pour plus d'informations, reportez-vous à la section Édition avancée de l'en-tête.

Réduction de l'en-tête

L'en-tête réduit est une version plus petite de l'en-tête du site, qui vous permet de conserver les informations de navigation importantes sans distraire les utilisateurs lorsqu'ils font défiler la page et sans occuper trop d'espace. Il s'agit d'une fonction d'en-tête collant, mais qui condense la taille des logos et la taille générale de l'en-tête. Il est particulièrement utile pour les sites qui ont de grands en-têtes et les sites conçus pour un long défilement.

Remarque

L'en-tête réduit est disponible sur les ordinateurs de bureau et les tablettes uniquement si vous utilisez la disposition de l'en-tête de la barre supérieure.

Pour activer la réduction de l'en-tête dans l'Éditeur classique:

hover sur l'en-tête, cliquez sur En-tête, puis sur Modifier la conception.
Dans l'onglet Réduire l'en-tête, cliquez sur l'option Activer la réduction de l'en-tête. vous disposez des options suivantes :
- Afficher uniquement la ligne de navigation. N'affichez que la ligne de navigation lorsque l'en-tête se rétrécit. Cette fonction n'est applicable que si l'en-tête comporte plus d'une ligne.
- Couleur d'arrière-plan. Modifiez la couleur d'arrière-plan de l'en-tête qui se rétrécit. Notez que la couleur d'arrière-plan de la ligne prévaut sur la couleur d'arrière-plan de l'en-tête qui se rétrécit.
- Plus de couleurs d'en-tête sur le défilement. Spécifiez les couleurs du texte, du lien sélectionné et de hover, des icônes, du texte des boutons, etc.
- Taille du logo. Modifiez la taille à laquelle le logo ou l'image se réduit lorsque l'en-tête se rétrécit (la valeur par défaut est de 66 %).
- Changez le logo sur le rouleau. Sélectionnez un logo à afficher sur le défilement.
- Espacement de l'en-tête. Ajustez le rembourrage supérieur et inférieur de l'en-tête qui se rétrécit. Vous pouvez modifier l'espacement des en-têtes par dispositif.

Une fois que l'en-tête de rétrécissement est activé, il se produit ce qui suit :

L'espacement de l'en-tête modifie l'espacement haut/bas et la marge à 0. Cela ne s'applique pas aux lignes à 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 traiter les modèles proposant une hauteur d'en-tête minimale, la hauteur d'en-tête minimale est réglée sur Auto.
S'il existe des lignes vides comportant des colonnes, les colonnes occuperont tout l'espace de la ligne.
Les propriétés de design prévalent sur les propriétés de l'en-tête réduit. 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 au-dessus de l'arrière-plan de l'en-tête réduit.
Les lignes vides s'affichent dans l'en-tête réduit.
Si vous ne parvenez pas à visualiser votre en-tête réduit, vérifiez d'abord que votre site présente suffisamment de lignes pour que vous puissiez faire défiler la page vers le bas et déclencher l'en-tête réduit. Si votre page ne possède qu'une ligne, il sera impossible de faire défiler le site.

widget Compatible avec les en-têtes rétractables

Tous les sites widget ne sont pas compatibles et apparaissent dans l'en-tête qui se rétrécit. Si vous avez un widget dans l'en-tête qui n'est pas compatible avec le rétrécissement de l'en-tête, une colonne vide apparaît à la place du widget. Vous ne pouvez pas éditer widget lorsque l'en-tête est réduit.

Les widget suivants sont compatibles et s'afficheront dans un en-tête réduit pour l'Éditeur classique et l'Éditeur 2.0 :

Navigation
Multilingue
Icônes
Bouton Click to Call (Cliquer pour appeler)
Bouton OpenTable
Bouton Click to Email (Cliquer pour envoyer un e-mail)
vCita
Bouton PayPal
Bouton j’aime
Images et logos
Panier de la boutique
Paragraphe widget
Widget titre
Boutons

Défilement sur l'en-tête (réduction de l'en-tête) pour l'éditeur 2.0

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 l'éditeur, voir Comment identifier la version de l'éditeur utilisée par votre site.

La fonction de défilement sur l'en-tête de l'éditeur 2.0 permet aux éléments de navigation essentiels, tels que le logo et le menu, d'être visibles en haut de l'écran lorsque l'utilisateur fait défiler la page. Il condense les logos et la taille générale de l'en-tête pour gagner de l'espace et assurer un accès facile à la navigation sans être intrusif. Idéal pour les sites comportant de grands en-têtes ou conçus pour un défilement prolongé, il améliore l'expérience de l'utilisateur en maintenant l'accessibilité aux principales options de navigation.

Activer le défilement sur l'en-tête

Il est important de noter que l'en-tête collant doit déjà être activé avant que le défilement de l'en-tête puisse être activé.

Pour activer le défilement sur l’en-tête :

hover sur l'en-tête et cliquez sur En-tête.
Cliquez sur Modifier la conception. Le panneau Conception de l'en-tête apparaît.
Développez la section Position et activez la case à cocher Définir comme en-tête collant si elle n'est pas déjà activée.
Activez la bascule Modifier l'en-tête lors du défilement.
Configurez les options de conception suivantes :
- Rembourrage. Définissez les valeurs initiales de padding-top et padding-bottom des en-têtes (ceci n'est pas spécifique à l'option d'en-tête collant).
- BG sur le parchemin. Sélectionnez la couleur et l'opacité de l'arrière-plan. Les modifications apportées à l'une des tailles d'écran se répercutent sur les autres.
- Espacement sur le rouleau. Définissez le remplissage supérieur et inférieur en px, %, vh ou vw. Si vous souhaitez ignorer les paramètres de taille d'écran de desktop, vous pouvez effectuer des modifications sur les tablettes et les téléphones portables.
- Taille du logo. Utilisez le curseur ou la zone de texte pour spécifier la taille à laquelle le logo se réduit lorsque l'en-tête se rétrécit lors du défilement. La valeur par défaut est 66%. Les modifications doivent être effectuées en fonction de la taille de l'écran.

Les modifications apportées dans la section Mise en page du panneau de conception d'en-tête n'affectent pas les paramètres de position.

Overlap Editor 2.0 En-tête avec First

Dans l'Éditeur 2.0, vous avez la possibilité de faire en sorte que l'en-tête se superpose au contenu de la première page. Cela peut créer un effet visuel attrayant où l'en-tête s'intègre parfaitement au contenu. Si vous le souhaitez, vous pouvez faire en sorte que l'en-tête chevauche la première ligne. Cette fonction doit être activée pour chaque page.

Pour activer l'en-tête de superposition avec la première ligne :

hover sur l'en-tête et cliquez sur En-tête.
Cliquez sur Modifier la conception. Le panneau Conception de l'en-tête apparaît.
Développez la section Position , et activez la bascule pour la section Chevauchement 1 à la page.
(Facultatif) Configurez une couleur d'arrière-plan qui s'appliquera à toutes les tailles d'écran.

En-têtes collants

Un en-tête collant devient statique et reste en place lorsque vous faites défiler les pages de votre site.

Remarque

Les en-têtes mobiles sont toujours collants par défaut.

Pour activer un en-tête collant :

hover sur l'en-tête, cliquez sur En-tête, puis sur Modifier la conception.
Dans l'onglet Contenu, sélectionnez Définir comme en-tête collant. Si l'option d'en-tête collant n'est pas disponible, vous devez désactiver l'option de réduction de l'en-tête dans l'onglet Réduction de l'en-tête.

Un en-tête collant qui n'est pas un en-tête rétrécissant

Pour apprendre à créer un en-tête fixe qui ne rétrécit pas, regardez cette vidéo :

Dispositions de l'en-tête

Vous pouvez choisir parmi plusieurs modèles d'en-têtes flexibles préconçus. Si vous passez à l'une des dispositions d'en-tête flexibles prédéfinies, vous ne pouvez pas revenir à un en-tête fixe, vous ne pouvez passer que d'une disposition d'en-tête flexible à l'autre. Le changement de mise en page supprime également le contenu existant dans la section de l'en-tête. Nous vous recommandons de créer une sauvegarde avant de changer de présentation.

Pour modifier la mise en page d'un en-tête :

hover sur l'en-tête et cliquez sur En-tête.
Dans l'onglet Conception, sélectionnez une nouvelle disposition d'en-tête. Si vous passez à un en-tête collant, vous devez d'abord désactiver la fonction de réduction de l'en-tête dans l'onglet Réduction de l'en-tête.

Conception de l'en-tête

Pour accéder au menu de conception de l'en-tête dans l'Éditeur classique, hover sur l'en-tête, cliquez sur En-tête, puis sur l'onglet Conception.

Pour accéder au menu de conception de l'en-tête dans l'Éditeur 2.0, hover sur l'en-tête, cliquez sur En-tête, puis sur Modifier la conception. Le panneau de conception s'ouvre sur le côté de la toile. Il contient les options de conception suivantes :

Mise en page : Explorez les options de mise en page qui associent les styles de navigation supérieure et de hamburger de manière cohérente en fonction de la taille de l'écran. Alors que les mises en page par défaut ont des capacités limitées, une option d'édition avancée permet d'accroître la flexibilité.
Espacement: Définissez les marges et l'espacement, les modifications apportées à l'adresse desktop ayant une incidence sur les autres tailles d'écran si leur espacement n'est pas modifié.
Arrière-plan: Choisissez la couleur ou l'image d'arrière-plan, ajoutez des bordures ou des ombres, et constatez que les changements sont répercutés de manière transparente sur toutes les tailles d'écran.
Position: Activez un en-tête collant 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 sur d'autres écrans.

Logo de l'en-tête

Si l'en-tête contient une image, le logo du site sera conservé lors du changement de mise en page. En présence de plusieurs images, ou si le logo est constitué de texte, l'image du logo restera la même que dans la mise en page. Il est important de noter que les en-têtes entre les appareils ne sont pas connectés, donc si vous ajoutez un logo sur l'ordinateur de 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 une tablette, elle héritera de tout changement de logo effectué sur l'ordinateur de bureau.

Si vous supprimez le logo, réintroduisez l'image en faisant glisser l'élément image dans l'en-tête et définissez le lien pour revenir à la page d'accueil. Pour plus d'informations, voir widget: Image.

En-tête et menu extensible

Note

Ces informations sont spécifiques à l'éditeur classique et ne concernent pas l'éditeur 2.0 (anciennement connu sous le nom d'éditeur All-Flex). Pour identifier la version actuelle de l'éditeur, voir Comment identifier la version de l'éditeur utilisée par votre site.

Vous pouvez ajouter un menu extensible sur les sites desktop et les sites pour tablettes, ce qui facilite la création de sites modernes dotés d'une grande souplesse de conception. Choisissez parmi plusieurs modèles de menus extensibles et personnalisez-les à votre guise en ajoutant widget, des lignes et des colonnes.

Le menu extensible pour mobile offre davantage de possibilités de personnalisation et permet d'afficher widget dans l'en-tête ainsi qu'un menu toujours visible.

Vous pouvez modifier la disposition de l'en-tête en fonction d'une disposition prédéfinie qui inclut des boutons, des appels téléphoniques, un panier store, des icônes sociales, etc. Vous pouvez ajouter n'importe quel site widget au menu extensible à partir du panneau widget.

desktop et Tablet Header and Expandable Menu

Sélectionner et configurer un en-tête et une disposition de menu extensible pour desktop et les tablettes :

Dans le panneau latéral, cliquez sur Thème, puis sur Mise en page du site.
Dans la section desktop sélectionnez la présentation du menu extensible.
Dans la section Tablette , sélectionnez la présentation de menu extensible.
Après avoir sélectionné le menu extensible, une icône de hamburger s'affiche dans l'en-tête du site. Cliquez sur l'icône hamburger () pour afficher le menu extensible.
Dans l'onglet Disposition , cliquez sur la disposition existante pour sélectionner une disposition de menu.
L'onglet Style vous permet d'accéder aux options suivantes :
- Entrez à partir de. Sélectionnez le haut ou le côté.
- Effet d'entrée. Sélectionnez Couvrir ou Pousser.
- 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 pourcentage pour s'adapter à toutes les tailles d'écran.
- Contexte. Configurez la couleur ou l'image d'arrière-plan.
- Couleur de l'icône de fermeture. Sélectionnez une couleur pour l'icône de fermeture et la couleur d'arrière-plan de l'icône de fermeture.
Dans l'onglet Espacement , modifiez l'espacement.

Le menu extensible peut comporter jusqu'à 3 lignes personnalisables. Si le site est agencé de la même façon sur les affichages ordinateur et tablette (soit menu extensible, soit barre supérieure), les modifications s'appliqueront aux deux. Si en revanche la mise en page du site est différente, chaque affichage doit être configuré 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 la conception.
Dans la section Disposition, cliquez sur Gauche ou Droite.

En-tête mobile et menu extensible

Pour sélectionner et configurer un en-tête et une disposition de menu extensible pour les mobiles :

hover au-dessus de l'en-tête, cliquez sur l'étiquette En-tête , puis sélectionnez Modifier la conception.
Dans l'onglet Disposition, cliquez sur la disposition existante pour sélectionner une disposition de menu. L'en-tête mobile propose des mises en page qui affichent widget tels que des liens sociaux, des numéros de téléphone, etc. Les dispositions de l'en-tête sont fixes, vous ne pouvez donc pas ajouter de nouveaux widget, mais vous pouvez les modifier ou les supprimer. Lorsque vous ajoutez un site store ou que vous utilisez la fonction multilingue, d'autres options de mise en page sont disponibles, notamment les icônes du panier d'expédition store et la fonction multilingue. Si vous n'avez pas activé store ou le multilinguisme, ces modèles n'apparaissent pas.
Cliquez à gauche ou à droite pour définir la position de l'icône du menu.
Si ce n'est pas déjà le cas, ouvrez le menu en vue mobile. Cela permet d'ouvrir l'éditeur de menu afin que vous puissiez modifier le menu extensible.
Dans l'onglet Disposition , cliquez sur la disposition existante pour sélectionner une disposition de menu. Le menu extensible propose plusieurs mises en page permettant d'afficher les liens sociaux, les informations de contact et bien d'autres choses encore. Vous pouvez ajouter n'importe quelle adresse widget au menu extensible, ajouter des colonnes, trier les colonnes les unes à côté des autres ou les unes sur les autres. Cependant, lorsque vous passez d'une présentation à l'autre, vous supprimez tout le contenu que vous avez ajouté dans le menu, en ne conservant que le site widget dans la présentation choisie.
Dans l'onglet Style, vous disposez des options suivantes :
- Entrez à partir de. Sélectionnez le haut ou le 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. Sélectionnez Couvrir ou Pousser.

Remarque

Il n'est pas possible d'ajouter des widget supplémentaires à l'en-tête mobile.

Afficher les éléments de l'en-tête au-dessus de l'image principale

Note

Pour afficher les éléments de l'en-tête au-dessus des images du héros, hover sur l'en-tête, cliquez sur En-tête, cliquez sur l'onglet Conception, puis cliquez sur Chevauchement de la première ligne. Cela donne plus de visibilité à vos images héroïques et facilite la conception de sites attrayants et branchés.

Gardez alors à l'esprit les points suivants :

Pour l'en-tête. Définissez la couleur d'arrière-plan comme étant transparente ou une couleur avec opacité.
Pour la première ligne. Utilisez un rembourrage supérieur égal ou similaire à la hauteur de l'en-tête.

Remarque

Pour plus de souplesse, ce paramètre ne s'applique qu'à la page en cours. Pour l'activer sur d'autres pages, accédez à chaque page et suivez les étapes ci-dessus.

Edition avancée de l'en-tête (Editor 2.0)

Note

L'édition avancée peut être activée pour l'en-tête afin d'accéder à davantage d'options de personnalisation, telles que la possibilité d'ajouter davantage de widget et d'éléments. La modification de la présentation de l'en-tête (dans le panneau Conception de l'en-tête) annule toutes les modifications apportées et désactive l'édition avancée.

Remarque

Comme les en-têtes se synchronisent entre les tailles d'écran, il est recommandé de vérifier toutes les tailles d'écran lors de l'utilisation de l'option d'édition avancée.

Activer l'édition avancée de l'en-tête

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 :

Cliquez sur l'onglet En-tête .
Cliquez sur Modifier la conception.
Dans la section Mise en page, cliquez sur Activer l'édition avancée.

Si vous prévoyez d'afficher des éléments différents sur desktop et sur mobile (par exemple, un bouton sur desktop et une icône sur mobile), utilisez la fonction de masquage/affichage pour des transitions transparentes. Pour en savoir plus, consultez la section Masquer ou désassembler des éléments dans l'en-tête (Éditeur 2.0).

Désactiver l'édition avancée de l'en-tête et réinitialiser l'en-tête

Pour désactiver l'édition avancée et réinitialiser l'en-tête, sélectionnez une autre mise en page :

Cliquez sur l'onglet En-tête.
Cliquez sur Modifier la conception.
Dans la section Mise en page, 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. Toute modification effectuée à l'aide de l'édition avancée sera annulée et ne sera pas sauvegardée.

Masquer ou démasquer l'en-tête

Pour masquer un en-tête sur une page :

hover sur le bas de l'en-tête et cliquez sur En-tête.
Cliquez sur Masquer l'en-tête de la page et sélectionnez le périphérique sur lequel vous souhaitez masquer l'en-tête. Dans l'Éditeur 2.0, cela permet de masquer l'en-tête sur toutes les pages.

Pour afficher l'en-tête masqué :

Dans le panneau latéral, cliquez sur l'icône Masquer les éléments () sous Paramètres.
Cliquez sur l'icône Masquer dans le pied de page et sélectionnez Oui pour masquer l'en-tête.

Masquer ou démasquer des éléments dans l'en-tête (Editor 2.0)

Note

Dans l'Éditeur 2.0, la possibilité de masquer ou d'effacer des éléments dans l'en-tête vous offre un contrôle granulaire des composants visuels sur différentes tailles d'écran, que vous souhaitiez rationaliser votre conception ou mettre l'accent sur certains éléments pour des appareils spécifiques.

Points importants à connaître :

Tout élément de l'en-tête, y compris l'en-tête lui-même, peut être masqué quelle que soit la taille de l'écran. Vous pouvez le faire sur la toile ou depuis 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 qui sont masqués apparaissent comme désactivés avec une icône d'élément masqué ().
Le panneau des calques n'indiquera que les éléments cachés pour la taille d'écran sur laquelle vous vous trouvez. Par exemple, si vous êtes sur desktop, il n'indiquera que les éléments cachés sur desktop.

Pour masquer les éléments de l'en-tête dans le panneau Calques :

Dans la barre d'outils supérieure, cliquez sur la taille d'écran souhaitée sur laquelle vous souhaitez masquer l'élément.
Cliquez sur Calques dans la barre d'outils latérale.
Cliquez sur l'élément que vous souhaitez masquer.
Cliquez sur l'icône de masquage de l'élément ().

Pour masquer les éléments de l'en-tête dans le panneau Calques :

Dans la barre d'outils supérieure, cliquez sur la taille d'écran souhaitée sur laquelle vous souhaitez masquer l'élément.
Cliquez sur Calques dans la barre d'outils latérale.
Cliquez sur l'élément que vous souhaitez masquer (il sera désactivé par l'icône de l'œil barré avant d'être sélectionné).
Cliquez sur l'icône de masquage de l'élément ().

Limites de l'en-tête dans l'éditeur 2.0

L'en-tête de Editor 2.0 faisant l'objet d'un développement continu, certaines fonctionnalités sont encore en cours de révision et/ou de développement :

Accessibilité HTML/CSS : L'accès à HTML/CSS pour l'en-tête est une limitation permanente en raison de la technologie utilisée.