Guide étape par étape pour personnaliser les styles de Mega Menu avec Avada Fusion Builder

Vous souhaitez que le menu de navigation soit plus professionnel et attrayant lorsque vous créez un site web avec le thème Avada ? Alors vous devriez certainement essayerPersonnaliser le Mega Menu Avada's Fusion BuilderIl nous permet de personnaliser facilement Méga menu Concevoir, sans programmation, des structures de menu hiérarchiques et visuellement riches. Cet article vous guidera pas à pas tout au long du processus.

I. Comprendre le rôle du Mega Menu Avada

Avant de commencer à le créer, clarifions ce qu'est le Mega Menu. Il s'agit d'une forme de navigation plus avancée qu'un menu déroulant ordinaire, que l'on trouve généralement dans les grands sites de commerce électronique ou les sites Web basés sur le contenu. Ses avantages sont les suivants :

• Afficher plusLa mise en page multi-colonnes est prise en charge, ce qui permet d'afficher simultanément des catégories, des images, des boutons, etc.
• Améliorer l'expérience de l'utilisateurLes utilisateurs peuvent naviguer rapidement à travers les panneaux principaux sans avoir à cliquer plusieurs fois.
• Une vision plus forteLes icônes, arrière-plans et séparateurs Fusion rendent la navigation moins monotone.

Avada propre Caractéristiques du Mega Menuintégrer Fusion Builder Les capacités d'édition visuelle du système permettent des effets typographiques arbitraires.

Activer la fonction Mega Menu

• Connectez-vous au backend de WordPress et allez à Avada → Options → Menu.
• Faites défiler l'écran vers le bas pour vous assurer que l'option Activer le Mega Menu Avada Ouvert.
• Après avoir sauvegardé les paramètres, allez à Apparence → Menu (Apparence → Menus)pour trouver le menu principal que vous souhaitez modifier.

• Cliquez sur la flèche à droite de l'élément de menu pour développer les options.
• tique Utiliser le Mega MenuLe méga-menu peut être activé pour cet élément.

Modifier la disposition du Mega Menu avec Fusion Builder

1. ouvrir l'écran d'édition du méga-menu

entrer dans Avada Après avoir défini le menu, cliquez sur "Mega Menu Columns". Modifier avec Fusion Builder Le système ouvre une interface d'édition visuelle. Le système ouvre une interface d'édition visuelle où vous pouvez librement ajouter des blocs comme si vous construisiez une page.

2. ajouter une disposition en colonnes

Dans Fusion Builder, vous avez le choix :

• 1/2 + 1/2 disposition(répartis équitablement entre la gauche et la droite)
• 1/3 + 1/3 + 1/3 disposition(adapté à l'affichage de plusieurs classifications)
• 1/4 + 1/4 + 1/4 + 1/4 Mise en page(adapté à l'affichage d'un contenu riche)

Cliquez sur le signe "+" pour ajouter une structure de lignes et de colonnes. Chaque colonne peut être définie individuellement en ce qui concerne l'arrière-plan, les marges et l'alignement.

IV. ajouter des modules de contenu au Mega Menu

1) Insertion de liens de menu

utiliser Élément de menu pour ajouter des liens vers différentes pages ou catégories. Prise en charge des combinaisons d'icônes et de texte pour une navigation plus intuitive.

2. ajouter des images ou des icônes

insérable Image Élément Afficher des vignettes de produits ou des logos de marques. Élément d'icône Ajouter de petites icônes pour améliorer la reconnaissance.

3. bouton Ajouter

bâton Élément de boutonBoutons CTA (par exemple, "Voir maintenant", "En savoir plus"). Permet de personnaliser les couleurs, les coins arrondis, les animations au survol, etc.

4. ajouter un titre ou une description

dépense ou frais Bloc de texte Ajoutez des titres de groupe pour faciliter la description des différentes colonnes. La taille de la police, la couleur et l'espacement peuvent être ajustés pour maintenir l'uniformité visuelle.

V. Paramètres de style personnalisés

1. définir l'arrière-plan et les couleurs

Dans les paramètres de la ligne ou de la colonne, recherchez l'option Options d'arrière-plan.. Choisissez parmi des couleurs unies, des dégradés ou téléchargez une image d'arrière-plan. Si vous souhaitez rendre le menu semi-transparent, réglez le paramètre Opacité Valeur.

2) Ajustements de l'espacement et de l'alignement

existent Conception → Espacement Vous pouvez personnaliser les marges intérieures supérieure, inférieure, gauche et droite dans l'onglet Paramètres Alignement pour les centrer ou les déplacer vers la gauche afin de maintenir la cohérence de l'ensemble.

3. polices de caractères et bordures

style calligraphique en Typographie Paramètres dans le module, avec la possibilité de choisir la police principale du site ou une police personnalisée. Ajouter des bordures fines ou des ombres à chaque bloc de menu pour rendre la hiérarchie plus claire.

Sixièmement, définir l'effet réactif

Un bon Mega Menu doit être aussi performant sur mobile. C'est possible avec Fusion Builder :

• spectacle (un billet) Options réactives.
• Permet d'afficher ou non le contenu du menu Masquer ou Afficher sur un appareil particulier.
• Ajustez la taille de la police, les marges intérieures et la hauteur des lignes pour les petits écrans.

suggestionMobile : il est recommandé de conserver une structure simple, de masquer certains éléments décoratifs et de ne conserver que les éléments de navigation essentiels.

VII. prévisualisation et optimisation

Une fois la modification terminée, cliquez sur Sauvegarder les modifications → Menu de mise à jour Enregistrez tous les paramètres. Ensuite, ouvrez votre site web et passez votre souris sur le menu principal pour voir si l'effet Mega Menu fonctionne correctement. Si vous rencontrez des problèmes, vous pouvez vérifier les points suivants :

• L'image est-elle chargée correctement ?
• Cohérence de l'affichage du menu dans différents navigateurs
• L'animation du survol est-elle fluide ?
• Le menu réduit se développe-t-il correctement sur mobile ?

VIII. problèmes communs et solutions

1) Impossible d'afficher le Mega Menu ?
Vérifiez que l'option "Utiliser le méga menu" est activée dans les paramètres du menu et que l'emplacement correct du thème a été attribué à ce menu.

2. images mal alignées ou se chevauchant ?
Vérifiez le ratio de largeur de colonne et les paramètres de marge intérieure de Fusion Builder pour éviter de dépasser la largeur du conteneur.

3. exception au menu réactif ?
Allez dans Avada Options → Menu → Responsive, régénérez le cache et testez à nouveau.

résumés

élaborer Avada Méga menu Il peut améliorer l'efficacité de la navigation et l'image de marque, augmenter le temps de séjour des visiteurs et le taux d'interaction avec les pages, et apporter une contribution positive aux performances du site web en matière de référencement.

Pour configurer facilement le méga menu, suivez les étapes suivantes dans l'ordre :

1. Activer la fonction Mega MenuActivé dans Avada → Options → Menu.
2. Edition visuelle avec Fusion BuilderLes modules de texte : Sélectionnez la disposition des colonnes, ajoutez des liens, des images, des boutons et des modules de texte.
3. Personnalisation Ajustement du styleLes outils d'aide à la décision : Créez un style visuel uniforme avec des paramètres d'arrière-plan, de police, d'espacement et de bordures.
4. Optimiser les performances réactivesLes objectifs sont les suivants : assurer une structure propre et un chargement fluide sur les téléphones portables et les tablettes.
5. Essais et optimisationLes résultats de l'évaluation sont les suivants : vérification du chargement des images, de la fluidité de l'animation et de la compatibilité avec différents navigateurs.

Il suffit d'un peu de patience pour le configurer, et chaque réglage fin donnera au site un aspect plus avancé et une plus grande facilité d'utilisation !

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.