Como criar um menu Elementor fora da tela sem codificação (4 etapas fáceis)

Um menu fora da tela embelezará a IU do seu site. Além disso, também é capaz de reter visitantes ou clientes em seu site. Além disso, um menu fora da tela do Elementor também abre as portas para diversas oportunidades de negócios.

Portanto, adicioná-lo ao seu site torna-se a maior necessidade se você não deseja comprometer a UI e a UX do seu site. Felizmente, existem opções para adicionar o menu fora da tela Elementor no WordPress, que é totalmente gratuito.

Você pode adotar qualquer um deles. Embora usar o ElementsKit seja a opção mais adequada e fácil, pois permite adicionar um menu fora da tela em poucos segundos.

Então, vamos explorar o processo mais simples de adicionar um menu fora da tela usando ElementsKit. Mas, antes disso, faça um breve resumo sobre esse menu fora da tela e sua importância.

O que é um menu fora da tela no Elementor?

Um menu fora da tela é um menu suspenso isso aparece da lateral do seu site clicando em um ícone, imagem ou texto. Este é um menu moderado que aumenta a experiência do usuário de um site em dispositivos móveis ou telas pequenas, pois você pode simplificar a seção do cabeçalho usando-o.

Por que usar o menu fora da tela do Elementor?

A principal vantagem deste menu fora da tela é que ele pode economize muito espaço em seu site que você precisa exibir o menu de cabeçalho. Portanto, no caso de exibir sites com melhor UI em telas pequenas, você deverá exigir esse menu fora da tela.

No entanto, você pode promover descontos especiais neste menu fora da tela. Além disso, apresentar descontos no menu fora da tela poderá chamar a atenção dos visitantes do seu site.

Além disso, também é adequado para exibir certas seções no menu fora da tela. Por exemplo, você pode mostrar determinados produtos com desconto e tornar sua promoção mais marcante e convertível.

Desde mais da metade dos visitantes do site usar dispositivos móveis para visitar um site, você deve utilizar este menu fora da tela em seu site para multiplique suas oportunidades de negócios. Além disso, o propósito do menu fora da tela será cumprido se for utilizado por usuários móveis.

Junto com isso, um menu fora da tela também traz outros benefícios. Você pode usá-lo para vários fins e dar direção para seus objetivos de negócios utilizando-o adequadamente.

Como você conhece todas as oportunidades do menu fora da tela, vamos mergulhar no processo de adicioná-lo ao seu site seguindo o método mais fácil.

Etapas para criar o menu fora da tela do Elementor

Independentemente de ter inúmeras vantagens em usar o menu fora da tela do Elementor, você precisará de alguns segundos para adicioná-lo ao seu site WordPress. Além disso, é 100% grátis para adicionar o menu fora da tela Elementor usando Kit de Elementos. Porque você encontrará um widget gratuito dedicado chamado “Header Offcanvas” no ElementsKit.

Adicionar um menu fora da tela usando este widget não exigirá nenhuma codificação. Além disso, você pode personalizar este menu como desejar, sem quaisquer limitações. Além disso, você pode adicionar um menu fora da tela seguindo o método mais fácil, que consiste em apenas 4 etapas. Passar pela 4 etapas fáceis e adicione um menu fora da tela para o seu site WordPress:

Passo 1: Instale um plugin de menu fora da tela.

Para aproveitar as vantagens do widget de menu fora da tela do ElementsKit, você deve instalá-lo primeiro. Para instalar o plugin do menu fora da tela, clique em Adicionar novo opção em Plugins e procure por ElementsKit na caixa de pesquisa. Depois de ver o ElementsKit, pressione Instalar agora botão e ativar mais tarde.

Etapa 2: Habilite o widget de cabeçalho fora da tela.

Na segunda etapa, você precisa visite ElementsKit >> ElementsKit e clique nos WIDGETS seção.

Na área de widgets, habilite o widget “Cabeçalho Offcanvas” e pressione o botão SALVAR ALTERAÇÕES botão.

Etapa 3: Adicionar Elementor fora do menu da tela.

Agora é hora de adicionar um menu fora da tela ao seu site Elementor. Fazer isso, clique em Adicionar novo opção em Postagens e dê um título para o posto. Depois disso, clique em Editar com Elementor botão para adicionar o menu fora da tela no WordPress.

Isso irá redirecioná-lo para o painel do Elementor, onde você precisa procure o widget Header Offcanvas e depois de encontrá-lo, arraste e solte no sinal de mais ícone.

Agora, clique no ícone de hambúrguer para adicionar menus ou itens ao menu fora da tela.

Então clique em Editar conteúdo opção e adicione itens como desejar ao seu menu. Isso o levará ao área de widgets de onde você pode adicionar itens diferentes ao menu fora da tela para adicionar variações.

Por exemplo, procure pelo menu vertical e arraste e solte no ícone de adição, assim como o widget fora da tela do cabeçalho. Depois disso, siga o mesmo processo para adicionar quaisquer itens ao menu fora da tela.

Depois de adicionar um widget de menu vertical, selecione o cardápio você deseja mostrar no menu fora da tela do Elementor e personalizá-lo de acordo. Quando todas as suas personalizações estiverem concluídas, clique em Atualizar botão.

Depois de adicionar itens ao cabeçalho fora do menu da tela, você pode personalizar e atualizar as seguintes áreas:

• Cor da sobreposição: A partir daqui, escolha a cor do menu fora da tela.
• Tipo de cardápio: Você encontrará ícones, texto e ícones com opções de texto. Selecione o que deseja exibir no lugar do menu fora da tela do cabeçalho.
• Ícone: Se você escolher o ícone no Tipo de Menu, esta seção ficará visível de onde você deverá selecionar um ícone.

Ao lado da guia Conteúdo, você encontrará uma guia de estilo. Clique na guia Estilo e personalize os itens abaixo para o seu menu fora da tela:

• Cor.
• Cor de fundo.
• Passe o mouse sobre a cor.
• Cor de fundo ao passar o mouse.
• Cor da borda para pairar.
• Tamanho do ícone.
• Tipo de borda.
• Alinhamento.
• Sombra da caixa.
• Raio da borda.
• Preenchimento.
• Margem.

Depois de editar fora da tela; você tem que edite a largura, o tipo de plano de fundo, a posição e o preenchimento do painel fora da tela. Finalmente, pressione o botão Publicar botão quando terminar a personalização.

Etapa 4: análise final do menu do cabeçalho fora da tela.

Aqui está a visão geral ou exemplo de seu menu fora da tela preparado com ElementsKit. No entanto, você pode adicionar mais variações personalizando o menu fora da tela na área do widget.

Comece com o menu fora da tela do cabeçalho

Usar um menu fora da tela tornará seu site mais interativo e envolvente pois pode economizar muito espaço em seu site WordPress. Além disso, é perfeito para ter melhor UI e UX em telas pequenas. No entanto, adicionar um menu fora da tela é super fácil e rápido.

Tudo o que você precisa é adotar as quatro etapas acima e você estará pronto para aproveitar os excelentes benefícios e oportunidades do menu de cabeçalho fora da tela. Acima usamos o ElementsKit, pois oferece a opção mais fácil de adicionar este menu.

Junto com ele, você encontrará muitos recursos se usar o ElementsKit. Como é um complemento tudo-em-um para Elementor que tem todas as opções para tornar seu site perfeito e competitivo. Portanto, utilize o melhor plugin para adicionar menu fora da tela ao seu site Elementor.