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.
Como adicionar um painel fora da tela no Elementor
Você precisa do Elementor e de um ativo Master Addons 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.
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.
- 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.
Perguntas frequentes sobre conteúdo off-canvas
O widget Conteúdo Off-Canvas é gratuito?
O conteúdo off-canvas não faz parte Master Addons 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.
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.
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
