ElementsKit vem com o menu Header Off-Canvas que permite criar um menu WordPress fora da tela no Elementor com o maior número de opções personalizáveis.

Para criar um menu fora da tela Elementor, 

ativar o widget de cabeçalho fora da tela >> arraste e solte o widget na área de design >> editar conteúdo fora da tela >> personalize os estilos.

Leia esta documentação para aprender os detalhes sobre como criar um menu fora da tela Elementor usando ElementsKit.

Como criar um menu WordPress fora da tela no Elementor #

Você pode criar um menu Elementor Off-Canvas usando o widget ElementsKit Header Off-Canvas. Você precisará dos seguintes plug-ins instalados em seu site WordPress.

Plug-ins necessários:

1. Elemento: Baixe o plug-in
2. ElementsKit Lite: Baixe o plug-in
3. ElementosKit Pro: Obtenha o plug-in

Etapa 1: ativar o widget Cabeçalho fora da tela #

Para usar o widget Cabeçalho fora da tela, você precisa primeiro ativá-lo. Para ativar o widget, Faça login no seu site WordPress e,

1. Navegar para ElementsKit > Widgets.
2. Encontrar Cabeçalho fora da tela e ative o widget.
3. Clique no SALVAR ALTERAÇÕES botão no canto superior direito.

Etapa 2: configurar o widget #

Agora abra o editor Elementor, então arraste e solte o widget Cabeçalho fora da tela para a área de design. 

No Contente guia, você pode 

1. Mudar o Cor de sobreposição.
2. Definir Fechar ícone de conteúdo fora da tela.
3. Escolher Tipo de menu de hambúrguer.

Existem três opções disponíveis no Menu Hambúrguer.

Tipo de menu de hambúrguer: ícone
Defina o tipo de menu como “Ícone” e selecione o ícone da biblioteca.

Tipo de menu de hambúrguer: texto
Defina o tipo de menu como “Texto” e insira um texto.

Tipo de menu de hambúrguer: ícone com texto

Defina o tipo de menu para “Ícone com texto”. Neste caso, você pode escolher um ícone, digitar texto, e definir o Posição do ícone antes ou depois do texto.

Etapa 3: edite o conteúdo fora da tela #

Você pode editar o conteúdo do menu fora da tela do WordPress usando o widget Cabeçalho fora da tela.

1. Acione o ícone Hambúrguer.
2. Clique em Editar conteúdo fora da tela.
3. Em seguida, na área de widgets, projete o conteúdo fora da tela usando widgets Elementor ou modelos prontos.
4. Clique no Atualizar botão e feche a janela da área de widgets.

Se o conteúdo não aparecer fora da tela, recarregue a página e verifique novamente.

Etapa 4: personalize os estilos #

Na guia estilo, personalize o menu fora da tela e os estilos de conteúdo. 

4.1 Fora da tela #

Na seção Fora da tela, personalize o Hamburger botão e Fechar ícone.

Para o botão Hambúrguer:

1. Escolha um Cor para o ícone e texto do menu.
2. Definir um Cor de fundo para o ícone e texto.
3. Em termos de Flutuar estilos, escolha uma cor, uma cor de fundo e uma cor de borda.
4. Ajusta a Ícone tamanho. (Esta opção aparecerá se você definir o Tipo de Menu como “Ícone” ou “Ícone com Texto”.)
5. Colocou o Tipografia de texto. (Esta opção aparecerá se você definir o Tipo de Menu como “Texto” ou “Ícone com Texto”.)

6. Escolha um Tipo de borda para o botão Hambúrguer.
7. Colocou o Largura da fronteira.
8. Escolha uma borda Cor.
9. Colocou o Alinhamento do botão para a esquerda ou para a direita ou para o centro.
10. Adicionar Sombra da caixa.
11. Ajustar Raio da Fronteira, Preenchimento, e Margem.

Para Fechar ícone da janela de conteúdo fora da tela:

Acione o off-canvas para ver as mudanças visuais do ícone Fechar.

1. Escolha um ícone Cor.
2. Definir um Cor de fundo para o ícone fechar.
3. Em termos de Flutuar estilos, escolha uma cor, uma cor de fundo e uma cor de borda.
4. Ajusta a Ícone tamanho.
5. Ajuste o ícone Tamanho da caixa.

6. Escolha um Tipo de borda para o ícone fechar.
7. Colocou o Largura da fronteira.
8. Escolha uma borda Cor.
9. Adicionar Sombra da caixa.
10. Ajustar Raio da Fronteira, Preenchimento, e Margem.

4.2 Painel fora da tela #

Personalize a área de conteúdo fora da tela na seção Painel fora da tela.

1. Ajusta a Largura do painel fora da tela.
2. Escolha o Tipo de plano de fundo e definir um plano de fundo Cor.
3. Você também pode usar um Imagem como pano de fundo.
4. Colocou o Posição do painel fora da tela à esquerda ou à direita da tela.
5. Ajuste o preenchimento do painel fora da tela.

Finalmente, você pode adicionar o menu fora da tela do WordPress no Elementor.

Assim como o widget Header Off-canvas, o ElementsKit vem com centenas de elementos avançados para Elementor. Obtenha o ElementsKit e use esses elementos para construir sites WordPress repletos de recursos.