Alguns conteúdos ganham um lugar na página O resto, um menu, uma lista de FAQ, um formulário de contato, funciona melhor escondido até que alguém peça Widget de conteúdo off-canvas em Master Addons Pro esconde qualquer modelo de Elementor atrás de um botão e desliza-o pela lateral, parte superior ou inferior da tela quando os visitantes clicam.
Você escolhe um modelo salvo, coloca o botão de disparo e escolhe como o painel entra Este guia segue o widget do painel Elementos até um painel de perguntas frequentes deslizante funcional na página ao vivo.
O que o widget Conteúdo Off-Canvas faz #
O widget coloca um botão de disparo em sua página e o vincula a um painel oculto O conteúdo do painel é qualquer modelo da sua biblioteca Elementor, portanto, um menu móvel, um mega FAQ, um resumo do carrinho ou um formulário de inscrição funcionam da mesma maneira. Quando um visitante clica no botão, o painel desliza ou desaparece sobre a página com uma sobreposição escurecida atrás dele e um ícone próximo em seu cabeçalho.
Tudo acontece em um widget: o gatilho, o painel, a animação e o estilo Sem plugin pop-up separado, sem códigos de acesso de modelo.
Antes de começar #
- WordPress com Elementor instalado e ativo.
- Master Addons Pro instalado com uma licença ativa, uma vez que o Conteúdo Off-Canvas é um widget Pro. Novo no plugin? veja o guia instalação.
- Um modelo Elementor salvo para mostrar dentro do painel Construa um em Modelos em seu painel primeiro; a demonstração aqui usa uma seção de perguntas frequentes pronta.
Como adicionar o widget Conteúdo Off-Canvas #
No editor Elementor, pesquise no Elementos painel para Conteúdo Off-Canvas, ou vá até a seção Complementos Mestres, e arraste-o para a página Um botão de disparo azul rotulado Clique Aqui aparece na tela O painel em si permanece oculto até que você escolha um modelo e o abra.
Escolha o modelo e configure o painel #
O Conteúdo seção mantém as configurações principais para o painel.
- Selecione Modelo: o modelo Elementor que o painel mostra Qualquer seção salva ou modelo de página aparece neste menu suspenso.
- Título e título do cabeçalho: ligue o cabeçalho do painel e digite seu rótulo, como “Explore FAQ” O ícone fechar vive no mesmo cabeçalho.
- Posição: de qual borda vem o painel Mais sobre isso abaixo.
- Largura: quão largo é o painel em px, % ou vw, 300 px por padrão Os painéis de cima ou de baixo usam a Altura controle em px, % ou vh.
- Animação de entrada e tipo de entrada: como chega o painel Desvanecer, Deslizar ou Crescer para a animação, Capa ou Empurrar para o tipo A capa coloca o painel sobre a página; Empurrar empurra a página para o lado para abrir espaço.
- Duração da animação: a velocidade de entrada em segundos, 0,6 por padrão.
- Abrir por Predefinição: inicie a página com o painel já aberto. Handy ao projetar, pois você pode estilizar o painel sem clicar no gatilho após cada alteração.
Configurar o botão de disparo #
O Botão grupo na mesma guia controla o gatilho. Mostrar Título e Título defina o rótulo; a demo renomeia de Clique aqui para perguntas frequentes. Alinhar coloca o botão à esquerda, no centro ou à direita em sua coluna.
Mostrar ícone adiciona um ícone ao lado do rótulo e Selecione Ícone abre a biblioteca de ícones do Elementor para que você possa escolher entre Font Awesome ou qualquer conjunto de ícones que você tenha instalado. Distância Ícone define a lacuna entre o ícone e o texto.
Escolha de onde o painel desliza #
O Posição dropdown oferece seis opções: Direita, Esquerda, Superior, Inferior, Média e Relativa.
Direita e Esquerda são os painéis de gaveta clássicos Escolha um e o editor visualiza imediatamente: o painel desliza com seu modelo dentro, cabeçalho na parte superior, ícone próximo pronto.
Top e Bottom trocam o controle Largura por a Altura controle deslizante medido em altura de janela de visualização Uma barra superior em 30 vh funciona como uma gaveta de anúncio fino.
O meio centraliza o painel como um modal Relativo ancora o painel ao próprio botão de disparo, com um Distância controle para a lacuna, que transforma o widget em uma revelação no estilo dropdown Uma nota do próprio painel: apenas a animação Fade funciona com a posição Relativa.
Defina a largura e a animação de entrada #
De volta à posição lateral, a demonstração amplia o painel para 500 pixels e alterna o Entrada Animação para deslizar com o Entrada Tipo no Push. Com o Push, o conteúdo da página muda conforme o painel entra em vez de ser coberto Mantenha a duração em torno de meio segundo; mais lento começa a parecer esperar.
Estilo o painel #
O Estilo tab tem três seções: Botão, Cabeçalho, e Recipiente.
Botão #
Estila o gatilho: fundo, cor do texto, tipografia, borda e preenchimento, com estados Normal e Hover A demonstração transforma o azul padrão em uma marinha escura que corresponde à página.
Cabeçalho #
Estiliza a tira na parte superior do painel aberto.
- Cabeçalho reverso: troca o título e fecha os lados do ícone, para que o X se mova da direita para a esquerda.
- Preenchimento: espaço em torno do conteúdo do cabeçalho.
- Ícone Fechar: cor, fundo, cor da borda, tamanho da fonte, tamanho da caixa e borda para o botão X. Mantenha o tamanho da caixa em 24 ou mais se o seu público estiver principalmente em telefones; um alvo de toque de 12 pixels é fácil de perder.
Recipiente #
Estila o corpo do painel e o que o rodeia.
- Cor de fundo, cor da borda, sombra da caixa, tipo de borda, raio da borda, preenchimento: a própria superfície do painel.
- Cor de fundo sobreposta: a tonalidade sobre o resto da página enquanto o painel está aberto Uma sobreposição escura puxa o foco para o painel.
- Barra de rolagem: cor e largura da barra de rolagem para painéis mais altos que a tela.
O resultado na página #
Na página ao vivo, o botão fica onde você o colocou Um clique desliza o painel a partir da borda escolhida, escurece a página atrás dele e mostra seu modelo com o cabeçalho e o ícone de fechamento no topo Os visitantes o fecham com o X, clicando na sobreposição ou pressionando Esc.
Casos de uso comum #
- Menus móveis e secundários que deslizam para dentro do lado sem aglomerar o cabeçalho.
- FAQ e painéis de ajuda como a demonstração, mantendo as respostas a um clique de distância nas páginas de destino.
- Formulários de contato ou cotação que abrem sobre a página em vez de viverem numa separada.
- Gavetas de carrinhos e contas nas páginas da loja, usando um carrinho ou widget de conta do WooCommerce ou outro plugin.
- Anúncio barras da borda superior usando a posição superior com uma pequena altura.
Dicas para um melhor painel fora da tela #
- Construa o modelo primeiro. O widget lista apenas modelos salvos, portanto, projete o conteúdo do painel em Modelos antes de arrastar o widget.
- Combine a largura com o conteúdo. 300 pixels combinam com um menu; formulários e listas de perguntas frequentes respiram melhor em torno de 450 a 500.
- Use empurrar com moderação. Parece impressionante, mas mudar toda a página pode parecer saltitante em conteúdo longo A capa com uma sobreposição escura é o padrão mais calmo.
- Lembre-se da regra Relativa. Apenas a animação Fade funciona quando Position está definido como Relativo.
- Verifique o painel no celular. Um painel de 500 pixels é mais largo que muitos telefones; defina uma largura menor para o ponto de interrupção móvel com o controle responsivo.
Perguntas frequentes #
O que é o widget de conteúdo off-canvas em Master Addons?
É um widget Elementor que esconde um modelo salvo atrás de um botão de disparo e desliza-o como um painel quando clicado Ele lida com o botão, a posição do painel, a animação de entrada, a sobreposição e o ícone de fechamento em um widget.
Posso mostrar algum modelo Elementor no painel?
Sim. O menu suspenso Selecionar modelo lista todos os modelos salvos em sua biblioteca Elementor. Menus, seções de perguntas frequentes, formulários e layouts personalizados completos são carregados dentro do painel exatamente como projetado.
De quais direções o painel pode abrir?
Seis posições estão disponíveis: Direita, Esquerda, Superior, Inferior, Médio e Relativo Os painéis laterais usam uma Largura, os painéis superior e inferior usam uma Altura da janela de visualização e Relativo ancora o painel ao botão de disparo com um controle de Distância.
Qual é a diferença entre Cover e Push?
A capa desliza o painel sobre a página enquanto uma sobreposição escurece o fundo O push move o conteúdo da página para o lado para abrir espaço para o painel A capa é o padrão mais seguro; o push é mais dramático, mas muda todo o layout.
O painel fora da tela pode abrir automaticamente?
Sim. Ativar Abrir por Padrão nas configurações de Conteúdo e o painel começa a abrir quando a página é carregada Os visitantes podem fechá-la com o ícone de fechamento clicando na sobreposição ou com a tecla Esc, e reabri-la com o botão de disparo.
Embrulhando #
O widget Conteúdo Off-Canvas transforma qualquer modelo salvo em um painel deslizante: escolha o modelo, coloque o botão de disparo, escolha a borda e a animação e estilize tudo, desde o botão até a barra de rolagem Ele combina naturalmente com o Menu NAV widget para navegação móvel e com widgets de formulário para painéis clique-para-contato Navegue pelo conjunto completo de Widgets e extensões Master Addons para ver o que mais envia na caixa, veja o Página de widget de conteúdo off-Canvas para demonstrações e uma comparação com o widget Elementor Pro Off-Canvas, e verifique o página preços para planos Pro.
