Tutoriels de paramétrage du thème WoodMart En-tête collant et menu transparent

Utiliser le thème WoodMartCréer un site webLa plupart du temps, de nombreuses personnes souhaitent conserver le menu en haut lors du défilement et afficher un effet visuel transparent en haut de la page. Cette conception aura l'air plus avancée et améliorera également la hiérarchie visuelle globale. Cet article vous guidera pas à pas dans le processus de création d'un en-tête collant à l'aide de la fonctionMenu transparentL'installation est facile à gérer pour un novice sans avoir à écrire de code.

I. Que sont les en-têtes collants et les menus transparents ?

• collantpied de page(En-tête autocollant)Lorsque l'utilisateur fait défiler la page vers le bas, la barre de navigation supérieure reste toujours fixée en haut de l'écran pour permettre une navigation rapide.
• Menu transparentLa barre de menu elle-même n'a pas de couleur d'arrière-plan, l'arrière-plan est affiché directement sur l'image du haut de la page ou d'un autre contenu, généralement utilisé pour la scène de la grande image de la page d'accueil, l'effet visuel est plus moderne.

II. travaux préparatoires

Assurez-vous que vous utilisez la dernière version Thèmes WoodMartLe constructeur d'en-tête intégré a été activé. Cette fonctionnalité permet de personnaliser la mise en page des en-têtes, y compris les effets collants et transparents.

Saisissez le chemin d'accès au backend :

WordPress Backend > WoodMart > Header Builder

III. activer les en-têtes collants

• Ouvrir le créateur d'en-tête éditeur (logiciel).
• Dans la vue Structure, sélectionnez la disposition de l'en-tête que vous utilisez actuellement.
• Localisez la zone de réglages correspondant à la zone supérieure (Top / Main) et cliquez pour ouvrir le panneau de réglages.

• Dans l'option "Collant", sélectionnez "Coller au défilement" ou "Glisser après le défilement" (en fonction de l'option "Collant"). Choisissez de toujours coller ou de n'apparaître qu'après défilement vers le bas).
• Cliquez sur Enregistrer et actualisez la page pour obtenir un aperçu.

Quatrièmement, définir l'effet de transparence du menu

Le menu transparent s'applique généralement à la page d'accueil comportant une grande image en haut de la scène. Si la barre de menu n'est pas transparente, elle couvrira l'image d'arrière-plan, ce qui nuira à la beauté du site. La méthode de réglage est la suivante :

• Dans le Créateur d'en-tête, sélectionnez la zone de navigation principale actuelle.

• Ouvrez les paramètres de l'arrière-plan et sélectionnez "Transparent" ou mettez la transparence de la couleur de l'arrière-plan à 0.

• Ensuite, dans l'éditeur de pages (par exemple à l'aide de la commande Elementor peut-être WPBakery), assurez-vous d'ajouter une image d'arrière-plan pleine largeur au premier écran de la page d'accueil et placez-la sous le calque de contenu.

• Si vous avez besoin d'un menu transparent pour la page d'accueil, vous pouvez utiliser l'"affichage conditionnel" dans Header Builder pour activer le menu transparent pour la page d'accueil uniquement, et conserver le style par défaut pour les autres pages.
• Après la conception, cliquez sur PublierLe paramètre Conditions d'affichage s'affiche. Le réglage des conditions d'affichage s'affiche :

V. Optimiser le texte de navigation et les couleurs du logo

Parce que l'arrière-plan est transparent.navigateurLe texte du menu et le logo peuvent ne pas être visibles sur un fond clair s'ils sont de couleur foncée. La solution est la suivante :

• Ajoutez une classe CSS supplémentaire à la page d'accueil, par exemple .transparent-header. ;
• Définir la couleur (par exemple, blanc) du texte de navigation et du logo dans cette classe ;
• Vous pouvez changer l'image du logo avec l'état "Sticky", de sorte que le style avant et après le défilement soit unifié.

Exemple CSS :

.transparent-header .site-logo img {
  content : url('path/logo-white.png') ;
}

.transparent-header .main-nav > li > a {
  colour : #fff ; }
}

VI. dépannage des problèmes courants

• Une navigation inefficace ? Vérifiez si la fonction "sticky" est désactivée sur mobile ou si elle entre en conflit avec certains plugins.
• L'effet de transparence ne fonctionne pas ? Vérifiez que l'arrière-plan de la zone où se trouve la barre de navigation n'est pas transparent ou qu'il n'est pas couvert par un autre style de calque.

VII. résumé

WoodMart fournit un puissantEn-tête personnaliséFonctionnalité, l'effet visuel de la navigation collante et transparente peut être facilement réalisé sans plugins tiers. La mise en page raisonnable, associée à la conception détaillée de la grande image de la page d'accueil et du commutateur de défilement, peut créer une expérience de site web professionnelle et avancée.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨询：1025174874
(iii) Courriel : [email protected]
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.