As páginas da web são uma janela para qualquer mundo. Em um ou vários você pode obter qualquer tipo de informação graças às pessoas por trás de cada um deles desenvolvendo conteúdo interessante e útil. Tudo graças à criação de páginas web em WordPress e à ajuda do criador de páginas Divi.
Os blogs atingiram o pico de popularidade entre 2001 e 2002, atingindo um recorde histórico de atualizações e melhorias estavam surgindo.
O nascimento do WordPress
Depois do grande impacto que os blogs estavam tendo, principalmente o Blogger depois de ser adquirido pelo Google Em 2003, o WordPress foi lançado no mesmo ano.
Isso é chamado de gestor de conteúdos, focado na criação e design de páginas da web. Até hoje, ainda é considerada uma ferramenta fundamental para esse tipo de trabalho, principalmente na área comercial.
O plugin Divi
Por mais útil que o WordPress possa ser, não é segredo que quem tem maior dificuldade em lidar com este tipo de plataforma e criar páginas 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 possam ser instruídas aos poucos e aprender a manejar de forma otimizada esta plataforma.
Para quem já conhece o WordPress, é uma opção muito mais fácil na hora de desenhar os posts do seu blog ou site.
Menú desdobrável
Quando você entra no Divi do seu celular, esta plataforma, assim como a grande maioria das páginas da web, oferece uma visão diferente do desktop. Isso significa que, caso você tenha um menu na página da web que está desenvolvendo, torna-se muito extenso e ofusca o resto do design que você fez.
Qual é a solução?
A primeira coisa que você deve se perguntar é qual solução deseja adotar. Quando se trata de menus suspensos, o mais Recomenda-se que os submenus não sejam exibidos até que o visitante do site os solicite. Desta 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 resolver este problema proporcionando uma interface muito mais agradável para quem pode estar visitando o seu site.
O código a ser usado
A codificação necessária para modificar a forma como o menu é exibido é um tanto extensa, mas eficaz. Introduzir o Opções de tema Divie, em Integração, copie e cole o seguinte código:
# 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 {font-family: ‘ETmodules’; alinhamento de texto: centro; falar: nenhum; peso da fonte: normal; variante da fonte: normal; transformação de texto: nenhum; -webkit-font-smoothing: suavizado; posição: absoluta; }
# main-header .et_mobile_menu .menu-item-has-children> a: após {font-size: 16px; conteúdo: ‘ 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 outros códigos que são recomendados para uso, está aquele que feche o menu. Se o usuário que está visitando seu site não encontrar o que deseja no menu suspenso e nos submenus, ele poderá fechá-lo.
Caso contrário, a exibição do menu pode obscurecer a visualização do restante da página da web. E tendo em conta que está a navegar a partir do seu telemóvel, é muito provável que esteja a obscurecer toda a página. Se quiser excluí-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 que você precisa fazer é conhecer e aproveitar ao máximo os melhores plug-ins do WordPress para levar a criação de suas páginas da web ao topo.
