Elementor Off-Canvas Widget para Painéis e Menus Slide-Out (Pro)
Conteúdo Off-Canvas é um widget Master Addons Pro que coloca um botão na página e abre um painel quando um visitante clica nele O painel mostra um modelo Elementor salvo, para que você possa colocar um menu, um formulário de contato, filtros ou uma promo dentro dele e reutilizar o mesmo modelo em outras páginas Escolha onde o painel aparece, como ele anima e como fica o botão Os visitantes fecham com o ícone fechar, clicando na sobreposição ou pressionando Esc.
O Elementor Livre não tem widget fora da tela O Elementor Pro adicionou um na versão 3.22, e ele precisa dos recursos do Flexbox Containers e do Nested Elements ligados Este widget é a opção Master Addons Pro: ele abre qualquer modelo salvo, de qualquer lado, atrás de um botão que você estiliza uma vez.
Como adicionar um painel fora da tela no Elementor
Você precisa do Elementor e de um ativo Complementos mestres Pro licença.
- Ir para Modelos, Modelos salvos, crie um modelo, construa o conteúdo do painel e publique-o.
- Edite a página, procure por Conteúdo Off-Canvas e arraste-o para onde o botão deve aparecer.
- Em Selecione Modelo, escolha o modelo que você salvou.
- Escolha a Posição e defina a largura ou altura.
- Escolha uma Animação de Entrada e duração.
- Defina o botão Título ou ícone e, em seguida, estilize o botão, o cabeçalho e o contêiner na guia Estilo.
Veja o Configurações de conteúdo off-Canvas guia para cada opção.
Visão geral do conteúdo off-canvas
| Configuração | O que faz |
|---|---|
| Fonte conteúdo | Um modelo Elementor salvo: página, seção ou contêiner (o menu suspenso lista todos os itens da biblioteca, exceto kits) |
| Posições | Direita, Esquerda, Superior, Inferior, Médio, Relativo (um dropdown sob o botão) |
| Entrada animação | Desvanecer-se, Deslizar ou Crescer; Relativo suporta apenas Fade |
| Tipo entrada | A capa desliza o painel sobre a página; o Push move a página através O Push é oferecido para Cima, Esquerda e Direita |
| Tamanho | Largura em px, % ou vw para Esquerda, Direita, Médio e Relativo; Altura em px, % ou vh para Superior, Inferior, Médio e Relativo; ambos por dispositivo |
| Fecha com | O ícone fechar, um clique na sobreposição ou a tecla Esc; Enter ou Space no ícone fechar focado também funciona |
| extras | Abrir por Padrão, Duração da Animação em segundos, título do cabeçalho com Cabeçalho Reverso, bloqueio de rolagem de página enquanto aberto, um botão de disparo estilizável com texto, ícone ou ambos |
| Abre de | Somente o botão do próprio widget (sem seletor CSS ou gatilho externo) |
| Necessidades | Elementor (gratuito ou Pro) mais Master Addons Pro |
Posição, Tamanho e Animação do Painel
Posição oferece Direita, Esquerda, Superior, Inferior, Médio e Relativo Os painéis Esquerdo, Direito e Médio obtêm uma Largura em px, % ou vw, e os painéis Superior, Inferior e Médio obtêm uma Altura em px, % ou vh, cada um ajustável por dispositivo. Entrada Animação é Fade, Slide ou Grow, e apenas Fade funciona com RelativeOs painéis Esquerdo, Direito e Superior também possuem um Entrada Tipo de Capa ou Empurrar. Defina o Animação Duração em segundos, e liga Abrir por Omissão se o painel deve começar aberto.
Capa e Empurrão são os dois Tipos de Entrada Com Cobrir o painel desliza sobre a página e a sobreposição escurece o que está por trás dele Com Empurrar toda a página se move através da largura do painel, de modo que o conteúdo permanece visível ao lado do menu Empurrar está disponível para os painéis Superior, Esquerdo e Direito; Inferior, Médio e Relativo sempre cobrem.
- Um painel esquerdo ou direito com o menu do site para telas menores.
- Um painel superior para um breve anúncio ou formulário de pesquisa.
- Um painel do meio como um modal simples para um formulário de inscrição.
Botão de gatilho, cabeçalho e estilo de contêiner
O botão de disparo pode mostrar um Título, um ícone ou ambos, com configurações de Distância de Ícones e Alinhamento Estilo sua Cor, Cor de Fundo e Cor de Fronteira para Normal e Hover, além de Sombra de Caixa, Tipografia, Tamanho SVG, Preenchimento, Tipo de Borda e Raio de Borda Dentro do painel, o Cabeçalho a seção estiliza o ícone de fechamento e o título opcional do cabeçalho, e o cabeçalho reverso troca seus lugares. O Recipiente a seção define o fundo do painel, a borda, o preenchimento, a cor da sobreposição e a cor e largura da barra de rolagem.
- Um botão de hambúrguer somente de ícone em um cabeçalho.
- Um botão de texto “Contact us” que abre um formulário.
- Uma cor de sobreposição de marca que escurece a página atrás do painel.
Elementor Pro Off-Canvas vs Master Addons Conteúdo Off-Canvas
Um menu fora da tela é o uso mais comum Este widget não constrói o menu em si, então você coloca um widget de menu em um modelo primeiro Se você só precisa do menu, os Complementos Mestres Menu NAV o widget também tem um layout Hamburger com um tipo fora da tela no Pro, que pula a etapa de modelo Use Conteúdo Fora da Tela quando o painel deve conter mais do que um menu, como um logotipo, detalhes de contato e links sociais.
| Característica | Elementor Pro Off-Canvas | Conteúdo off-canvas Master Addons |
|---|---|---|
| Preço | Precisa do Elementor Pro | Precisa de Master Addons Pro |
| Conteúdo do painel | Construído dentro do widget no Modo de Edição | Um modelo Elementor salvo que você pode reutilizar |
| Como ele abre | Qualquer botão ou link usando a ação Off-Canvas | O próprio botão de disparo do widget |
| Posição | Início, Centro ou Fim horizontal e vertical | Direita, Esquerda, Superior, Inferior, Médio ou Relativo |
| Animação | Animações de entrada e saída | Desvanecer, Deslizar ou Crescer, com Capa ou Empurrar |
| Encerramento | Overlay e Esc, cada um pode ser desligado; pode bloquear a rolagem da página | Fechar ícone, sobrepor clique ou Esc |
| Cabeçalho incorporado | Não | Título do cabeçalho e ícone de fechamento |
| Abrir por omissão | Não é uma configuração de widget | Sim |
Elementor Pro ganha quando qualquer link na página deve abrir o painel ou quando você quer animações de saída Master Addons se encaixa quando um modelo deve aparecer atrás de um botão pronto em muitas páginas Para um painel de pesquisa, veja também o Procurar Widget.
Como construir um menu fora do painel no Elementor
Um menu fora da tela é o uso mais comum O widget não constrói o menu em si, então você coloca um widget de menu em um modelo primeiro.
- Crie um modelo salvo e adicione um widget de menu, como os complementos mestres gratuitos Menu NAV definir para uma disposição vertical.
- Publicar o modelo.
- No seu cabeçalho, adicione Conteúdo Off-Canvas e selecione esse modelo.
- Defina a posição para a esquerda ou direita, largura para cerca de 320 px e animação de entrada para deslizar.
- Desligue Mostrar título, ligue Mostrar ícone e escolha um ícone de barras para que o botão pareça um hambúrguer.
- Use a visibilidade responsiva do Elementor para mostrar este botão apenas no tablet e no celular se o cabeçalho da área de trabalho mantiver seu menu normal.
Widgets relacionados: Menu NAV para o menu dentro do painel, o Menu Mega extensão para menus de cabeçalho grandes, Construtor Popup para camadas cronometradas ou de intenção de saída, Guias para alternar o conteúdo no local e Condições de exibição para mostrar o gatilho apenas nas páginas escolhidas.
Menu em tela cheia no Elementor
Um menu em tela cheia é a posição do Meio com a Largura definida como 100 vw e a Altura para 100 vh Coloque um modelo com um grande menu vertical dentro dele, escolha a entrada Fade para que a camada apareça no lugar e dê ao contêiner um fundo sólido para que nada apareça. O ícone próximo fica no cabeçalho do painel e a tecla Esc fecha a camada também.
Um detalhe da folha de estilo: os painéis são tampados em 90% da janela de visualização, de modo que um painel de 100 vw por 100 vh deixa uma margem em toda a volta Adicione esta regra no CSS personalizado da página para remover a tampa:
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
O passo a passo com capturas de tela está em como construir um menu em tela cheia no Elementor.
Menu lateral deslizante (navegação na barra lateral)
Para um menu lateral, defina Posição para Esquerda ou Direita e a Largura em px, em torno de 320 px para um menu e 400 px para um painel com detalhes de contato Escolha Empurre quando a página deve se afastar e permanecer legível, ou Cubra quando o painel deve ficar no topo O modelo pode segurar o Menu NAV widget em seu layout vertical, um logotipo, algumas linhas de contato e um botão.
Uma barra lateral que fica visível o tempo todo é um trabalho diferente Construa isso com um layout de contêiner de duas colunas e mantenha esse widget para o painel que desliza a pedido O Guia de menu lateral do elementor cobre ambos.
Exemplos de painéis fora da tela
Abra cada demonstração abaixo para ver o painel se mover: um painel de contato direito, um menu esquerdo que empurra a página, um painel suspenso que usa a posição relativa, uma barra de anúncio na borda superior, uma folha inferior com abertura horas e um menu de tela inteira construído na posição intermediária.
Perguntas frequentes sobre conteúdo off-canvas
O widget Conteúdo Off-Canvas é gratuito?
O conteúdo off-canvas não faz parte Complementos mestres Pro. O plugin gratuito não o inclui.
Como adiciono conteúdo ao painel fora da tela?
Construa o conteúdo como um modelo de Elementor salvo primeiro, como um menu, formulário ou promo Em seguida, escolha esse modelo no menu suspenso Selecionar modelo do widget Você pode reutilizar um modelo em vários painéis.
Devo usar um painel fora da tela ou um pop-up?
Use um painel fora da tela para navegação e para conteúdo que um visitante pede clicando, como um menu, filtros ou detalhes de contato Use um pop-up para mensagens cronometradas ou de intenção de saída e para formulários que devem interromper Ambos os rolagem de página de bloqueio enquanto aberto.
Como altero a velocidade da animação?
Definir Duração da Animação na guia Conteúdo O valor é em segundos, com 0,6 como padrão e um intervalo de 0 a 15 Valores mais baixos abrem o painel mais rapidamente A configuração se aplica a todas as animações de entrada e tanto para Cover quanto para Push.
Por que meu painel fora da tela não abre?
Marque três coisas Selecione Template deve apontar para um modelo publicado, caso contrário, o painel imprime um aviso em vez de conteúdo O gatilho deve ser o próprio botão do widget, porque nenhum outro elemento pode abri-lo E Open by Default deve estar desligado, a menos que você queira que ele seja aberto no carregamento.
Posso construir um menu fora da tela com ele?
Sim. Coloque um widget de menu como os complementos mestres Menu NAV em um modelo salvo, selecione-o em Conteúdo Off-Canvas, defina Posição para Esquerda ou Direita e use um ícone de barras para o botão Somente para um menu, o layout Nav Menu Hamburger no Pro tem seu próprio tipo off-canvas.
O conteúdo do painel atrasa minha página?
O modelo é renderizado na página quando ele carrega, depois escondido até que o botão seja clicado Um painel com alguns widgets adiciona pouco peso, mas sliders pesados ou vídeos dentro dele carregam com a página, portanto, mantenha os modelos do painel leves.
Posso abrir o painel a partir do meu próprio ícone de cabeçalho?
Não. O painel abre apenas a partir do botão que o widget renderiza, portanto, um ícone existente ou link de menu não pode acioná-lo. Para um menu de cabeçalho que abre a partir de um ícone de hambúrguer, use o layout Hamburger do widget Nav Menu com o tipo Offcanvas.
Existe um widget off-canvas gratuito para Elementor?
O plugin gratuito do Elementor não tem nenhum Elementor Pro inclui um widget Off-Canvas da versão 3.22 quando os Contêineres Flexbox e Elementos Aninhados estão ligados O conteúdo Off-Canvas faz parte do Master Addons Pro e abre qualquer modelo salvo, o que o widget Pro não faz.
Widgets e extensões de elementos de tendência
Construa sites sofisticados em menos tempo.
Glassmorphismo
Contêiner Extras
Padrões
![Extensão Master Addons Post/Page Duplicator para Elementor: MA Link de linha Duplicator na lista de páginas WordPress criando uma página de destino - rascunho [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de postagem/página
