Deseja criar um menu de tela inteira em Elementor ? Se assim for, este artigo irá mostrar-lhe como. Não há add-on necessário para criar um menu de tela cheia em Elementor. Tudo o que você precisa é Elementor Pro.
A versão pro doElementor vem com um construtor de pop-up que permite criar belos pop-ups. Você pode usar esse recurso para criar um menu de tela inteira no Elementor.
Se você não vê o que queremos falar hoje, confira este vídeo.
Como criar um menu de tela cheia no Elementor?
Antes de começar, certifique-se de ter atualizou seu Elementor para a versão pro. Quando estiver pronto, vá para Modelos -> Pop-ups. Crie um novo modelo pop-up clicando no botão Adicionar novo.
Dê um nome ao seu modelo pop-up e clique no botão CRIAR UM MODELO.
Elementor oferece dezenas de modelos pop-up para você escolher. Neste tutorial, criaremos o modelo do zero. Portanto, basta fechar a biblioteca de modelos para abrir o editor Elementor.
Antes de começar a criar o modelo pop-up, defina primeiro o layout. Para fazer isso, abra as configurações da janela pop-up clicando no ícone de engrenagem no canto inferior esquerdo.
No bloco Layout, sob a guia parametros, defina a largura para 100 VWs e a altura Ajustar a tela. Você também pode definir efeitos de animação de entrada e saída.
Depois de definir o layout, comece a criar o modelo adicionando uma nova seção. Você pode adicionar quaisquer elementos que desejar ao modelo. Para adicionar itens de menu, você pode usar o widget Menu de navegação ou o widget Lista de ícones.
Veja também: Como definir a posição personalizada para o menu móvel no Elementor
Neste guia, usaremos o widget Lista de ícones.
Edite cada item da lista. Você pode adicionar o rótulo do item de menu no campo texto e adicione o link no campo Penhor.
Vá para a guia Style para estilizar listas. Você pode definir o espaço entre os itens da lista e o alinhamento no Bloco de Lista. Para definir o tamanho e a cor do ícone (se você usar ícones), abra o bloco Ícone. Para definir a tipografia (tamanho da fonte, família da fonte, estilo da fonte) e a cor do texto dos itens da lista, você pode abrir o bloco Texto.
Se desejar, você pode alterar o plano de fundo da seção. Para personalizar o botão fechar pop-up, abra as configurações pop-up novamente e vá para a guia Style. Abra o bloco botão fechar e você verá algumas opções para personalizar o botão Fechar, como cor de fundo, tamanho e posição.
Quando terminar de criar o modelo pop-up, clique no ícone de seta ao lado do botão PUBLICAR e selecione Termos de exibição.
Defina onde deseja que o pop-up apareça clicando no botão ADICIONE UMA CONDIÇÃO e clique no botão PRÓXIMA para definir o gatilho.
Ative a opção no clique e clique SALVAR FECHAR.
Modelo de chamada pop-up
Quando o modelo pop-up estiver pronto, você poderá chamá-lo. Como você deseja criar um menu de tela inteira, pode criar um cabeçalho com Elementor ou modificar um cabeçalho existente.
Leia este post para saber mais sobre como criar um cabeçalho personalizado com Elementor.
Você pode chamar o modelo pop-up que acabou de criar com qualquer widget Elementor que tenha a opção de adicionar um link, como um botão, ícone, caixa de ícone, texto, imagem etc.
Neste tutorial, usamos o widget Icon Box. Selecione o widget para entrar no modo de edição. Na aba Conteúdo No painel esquerdo, encontre o campo no qual deseja adicionar o link.
Defina o link como dinâmico e selecione Pop-up.
Selecione o modelo pop-up que você acabou de criar clicando no ícone de chave inglesa.
Publique/atualize seu modelo de cabeçalho.
Obtenha o Elementor Pro agora !!!
Conclusão
Aqui ! É isso neste artigo que mostra como criar um menu de tela cheia no Elementor. Se você tiver alguma dúvida sobre como chegar lá, informe-nos dentro Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
