La naissance de WordPress
Après le grand impact qu'avaient les blogs, principalement Blogger après avoir été acquis par Google En 2003, WordPress a été lancé la même année.
Ceci est nommé comme gestionnaire de contenu, axé sur la création et la conception de pages Web. À ce jour, il est toujours considéré comme un outil fondamental pour ce type de travail, en particulier dans la sphère commerciale.
Le plugin Divi
Aussi utile que WordPress puisse être, ce n'est un secret pour personne que ceux qui ont le plus de mal à gérer ce type de plateforme et à créer des pages web sont des gens qui n'ont pas connaissances en HTML et CSS.
Divi est un outil qui vient en aide, précisément, à ces personnes qui ont peu de capacité de gestion en termes de WordPress, afin qu'elles puissent être instruites petit à petit et apprendre à gérer de manière optimale cette plateforme.
Pour ceux qui connaissent déjà WordPress, c'est une option beaucoup plus simple lors de la conception des entrées sur votre blog ou votre site Web.
Le menu déroulant
Lorsque vous entrez dans Divi depuis votre téléphone mobile, cette plateforme, ainsi que la grande majorité des pages web, proposent une vue différente de celle du desktop. Cela signifie que, dans le cas où vous avez un menu sur la page Web que vous développez, il devient très étendu et éclipse le reste du dessin que vous avez élaboré.
Qui est la solution?
La première chose que vous devez vous demander est quelle solution vous souhaitez adopter. En ce qui concerne les menus déroulants, le plus Il est recommandé que les sous-menus ne soient pas affichés tant que le visiteur de la page Web ne le demande pas. De cette manière, l'expérience utilisateur lors de la visite sera plus accueillante.
Si telle est votre intention, il existe un certain nombre de des codes qu'il vous suffit de copier-coller dans Divi pour résoudre ce problème en offrant une interface beaucoup plus agréable pour ceux qui visitent votre site Web.
Le code à utiliser
Le codage nécessaire pour modifier la façon dont le menu est affiché est un peu étendu, mais efficace. Connectez-vous à Options de thème Divi, puis dans Intégration, copiez-collez le code suivant :
(fonction ($) {
fonction setup_collapsible_submenus() {
var $ menu = $ ('# mobile_menu'),
top_level_link = '#mobile_menu.menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('clic');
si ($(this).is(top_level_link)) {
$(this).attr('href', '#');
}
if (! $(this).siblings('.sub-menu').length) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} Else {
$(this).on('click', function(event) {
event.preventDefault ();
$(this).parent().toggleClass('visible');
});
}
});
}
$ (fenêtre) .load (fonction () {
setTimeout (fonction () {
setup_collapsible_submenus();
}, 700) ;
});
}) (jQuery);
#main-header.et_mobile_menu.menu-item-has-children > a { background-color: transparent; position : relative ; }
#main-header.et_mobile_menu.menu-item-has-children > a:after { text-align: center; parler : aucun ; poids de la police : normal ; variante de police : normale ; transformation de texte : aucune ; -webkit-font-smoothing : anticrénelé ; position : absolue ; }
#main-header.et_mobile_menu.menu-item-has-children > a:after { content: '4c'; haut : 13 px ; droite : 10px ; }
#main-header.et_mobile_menu.menu-item-has-children.visible > a:after { content: '4d'; }
#main-header.et_mobile_menu ul.sub-menu { display: none!important; visibilité : masqué ! important ; transition : toutes les 1.5 s d'entrée et de sortie ;}
#main-header.et_mobile_menu.visible > ul.sub-menu { display: block!important; visibilité : visible ! important ; }
Autres alternatives pour optimiser
Parmi le reste des codes qu'il est recommandé d'utiliser, est celui qui permet de fermer le menu. Si l'utilisateur qui visite votre page Web ne trouve pas ce qu'il veut dans le menu déroulant et les sous-menus, il devrait pouvoir le fermer.
Autrement, l'affichage du menu peut obscurcir la vue du reste de la page Web. Et compte tenu du fait que vous naviguez depuis votre téléphone mobile, il est fort probable que vous masquiez toute la page. Si vous voulez le supprimer, continuez à copier et coller le code suivant:
/* Changer le menu en X lorsqu'il est ouvert */
.mobile_nav.opened.mobile_menu_bar : avant {
contenu : '4d' ;
}
Maintenant que vous savez comment insérer un menu déroulant mobile dans Divi, il ne vous reste plus qu'à apprendre et tirer le meilleur parti des meilleurs plugins WordPress pour mener la création de vos pages web vers le haut.
