Avada Mega Menu Containers dans 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.

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.

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.

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.