O nascimento do WordPress
Depois do grande impacto que os blogs estavam tendo, principalmente o Blogger depois de ter sido adquirido pelo Google Em 2003, o WordPress foi lançado no mesmo ano.
Isso é nomeado como gestor de conteúdos, focado na criação e design de páginas web. Até hoje, ainda é considerado uma ferramenta fundamental para esse tipo de trabalho, principalmente na área comercial.
O plug-in Divi
Por mais útil que o WordPress possa ser, não é segredo que quem tem mais dificuldade em gerenciar esse tipo de plataforma e criar páginas da web são pessoas que não têm conhecimento de HTML e CSS.
Divi é uma ferramenta que vem para ajudar, precisamente, àquelas pessoas que têm pouca capacidade de gestão em termos de WordPress, para que se possam instruir pouco a pouco e aprender a gerir de forma otimizada esta plataforma.
Para quem já tem conhecimento do WordPress, é uma opção muito mais fácil na hora de projetar as entradas do seu blog ou site.
Menú desdobrável
Quando você entra no Divi do seu celular, essa plataforma, assim como a grande maioria das páginas da web, oferece uma visualização diferente da área de trabalho. Isso significa que, caso você tenha um menu na página que está desenvolvendo, torna-se muito extenso e ofusca o resto do design que você elaborou.
Qual é a solução?
A primeira coisa que você deve se perguntar é qual solução você deseja adotar. Quando se trata de menus suspensos, o mais Recomenda-se que os submenus não sejam exibidos até que o visitante da página da web solicite. Dessa forma, a experiência do usuário durante a visita será mais acolhedora.
Se essa é sua intenção, há uma série de códigos que você só precisa copiar e colar no Divi para resolver este problema fornecendo uma interface muito mais agradável para quem estiver visitando seu site.
O código a ser usado
A codificação necessária para modificar a forma como o menu é exibido é um pouco extensa, mas eficaz. Faça login em Opções de tema Divi, depois para Integração, copie e cole o seguinte código:
(função ($) {
function setup_collapsible_submenus() {
var $ menu = $ ('# mobile_menu'),
top_level_link = '#mobile_menu.menu-item-has-children > a';
$menu.find('a').each(function() {
$(this).off('click');
if ($(this).is(top_level_link)) {
$(this).attr('href', '#');
}
if (! $(this).siblings('.sub-menu').length) {
$(this).on('click', function(evento) {
$(this).parents('.mobile_nav').trigger('click');
});
Else {}
$(this).on('click', function(evento) {
event.preventDefault ();
$(this).parent().toggleClass('visible');
});
}
});
}
$ (janela) .load (função () {
setTimeout (function () {
setup_collapsible_submenus();
}, 700);
});
}) (jQuery);
#main-header.et_mobile_menu.menu-item-has-children > a { background-color: transparent; posição: relativa; }
#main-header.et_mobile_menu.menu-item-has-children > a:after { text-align: center; falar: nenhum; peso da fonte: normal; variante de fonte: normal; transformação de texto: nenhum; -webkit-font-smoothing: suavizado; posição: absoluta; }
#main-header.et_mobile_menu.menu-item-has-children > a:after { content: '4c'; topo: 13px; direita: 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; visibilidade: oculto! importante; transição: todos os 1.5s facilitam a entrada;}
#main-header.et_mobile_menu.visible > ul.sub-menu { display: block!important; visibilidade: visível! importante; }
Outras alternativas para otimizar
Entre os demais códigos que se recomenda usar, está aquele que permite fechar o menu. Se o usuário que estiver visitando sua página da Web não encontrar o que deseja no menu suspenso e nos submenus, ele poderá fechá-la.
Caso contrário, a exibição do menu pode obscurecer a visualização do restante da página da web. E levando em consideração que você está navegando pelo celular, é mais provável que esteja obscurecendo a página inteira. Se você quiser removê-lo, copie e cole o seguinte código:
/* Muda o menu para X quando aberto */
.mobile_nav.opened.mobile_menu_bar:antes de {
conteúdo: '4d';
}
Agora que você sabe como inserir um menu suspenso móvel no Divi, tudo o que você precisa fazer é aprender e aproveitar ao máximo os melhores plugins do WordPress para levar a criação de suas páginas da web ao topo.
