By Categories: pôle webTags: , , 415 wordsTotal Views: 45Daily Views: 1

Avada Méga Menu

Comment le créer avec des containers.

Qui n’a pas eu à coder d’innombrables divs composés de ul li afin d’avoir le menu parfait pour son site ? Ce fut bien évidemment notre cas avant de découvrir l’astuce que nous allons vous partager aujourd’hui.

Les Widgets

Pour commencer, nous avons codé notre méga menu dans une fonction native de WordPress : les « widgets », accessibles via l’onglet « apparence » dans la barre latérale.

Comme tout bon dev emplit d’enthousiasme, nous nous mîmes à égrener ici une nav, là un ul et sa constellation de li, afin de façonner le Graal des temps modernes.

Cependant, outre le temps excessivement long passé à développer notre code, il s’avère que celui-ci peut devenir compliqué à maintenir, notamment lorsque l’on a besoin de faire une modification nécessitant de remanier nos blocs, telle que l’ajout d’une colonne par exemple.

Il peut de plus arriver des bugs d’affichage lié à des feuilles de styles qui se superposent, engendrant des recalcules pouvant causer du CLS (Cumulative Layout Shift), ce qui nous pénalise au niveau des signaux web vitaux de Google, et donc du SEO.

Avada

Or, en cherchant un moyen de rendre nos modifications futures plus fluides, nous nous sommes rendu compte que nous pouvions tirer parti de la puissance d’Avada.

Effectivement, il est possible lorsque l’on crée un nouvel élément via la librairie d’Avada, que ce soit un container ou autre, de récupérer le code généré par notre builder. Il nous suffira alors de copier-coller celui-ci dans la fonction Widget de WordPress en tant que custom HTML, pour qu’il puisse être interprété et affiché côté front.

Widget

Widget

Édition du Custom HTML avec notre code Avada

Cela nous permet donc de profiter de la flexibilité et du confort d’Avada, ainsi que de la bibliothèque et des réglages généraux tels que la typographie ou les couleurs.

Avada réglages

Avada

Options globales

Pour conclure

Grâce à cette technique, il nous suffit dorénavant de faire nos modifications via Avada Live puis de transférer le code directement dans le Widget associé le voir s’exécuter.

Non seulement nous gagnons du temps lors de modifications sur le menu, mais nous gagnons aussi en performance côté CSS, tout en profitant des qualités et du confort d’utilisation d’Avada.

Nous sommes une équipe très dévouée.

Nous sommes une entreprise numérique à service complet.

De par notre pluralité, nous pouvons vous accompagner sur l’ensemble de vos projets informatiques.