O efeito parallax é uma tendência de design web onde uma imagem de fundo rola mais devagar que o conteúdo em primeiro plano. Isso cria a ilusão de profundidade e movimento, gerando uma experiência de usuário mais interativa em seu site.
Um efeito parallax é uma ótima maneira de chamar a atenção dos visitantes. Ele atrai as pessoas, as incentiva a permanecer mais tempo e confere ao seu site um visual elegante e profissional que pode aumentar o engajamento e as conversões.
Neste artigo, mostraremos como adicionar facilmente um efeito parallax a qualquer tema do WordPress. Exploraremos vários métodos, incluindo o uso de plugins e código personalizado, para oferecer opções flexíveis.
💡 Resposta Rápida: Adicione um Efeito Parallax no WordPress
Com pressa? Aqui estão as 2 maneiras mais fáceis de adicionar um efeito parallax no WordPress:
1. Método Mais Fácil (Recomendado): Use o plugin Advanced WordPress Backgrounds. Esta é a melhor opção para iniciantes, pois funciona com qualquer tema e não requer código.
2. Método Manual: Use CSS Personalizado. Este é o melhor para desenvolvedores que desejam aplicar o efeito a um contêiner específico sem usar um plugin.
O que é um Efeito Parallax?
O efeito parallax é uma técnica de design web onde o fundo rola mais devagar do que o conteúdo em primeiro plano. Isso cria uma ilusão de profundidade e faz com que seu site pareça mais imersivo e interativo.
Você pode usar o efeito parallax em várias partes do seu site para destacar conteúdo ou contar uma história. Aqui estão os lugares mais comuns para usá-lo:
- Páginas de Destino: Para guiar o olhar do usuário em direção aos botões de call-to-action.
- Conteúdo Longo: Para quebrar grandes blocos de texto e manter os leitores engajados.
- Páginas de Vendas: Para exibir os recursos do produto de forma dinâmica.
- Páginas Iniciais: Para criar uma forte primeira impressão para o seu negócio.
Muitos temas premium do WordPress vêm com um efeito parallax integrado em sua página inicial. Você também pode usar este efeito na maioria dos plugins de construtor de páginas do WordPress.
No entanto, nem todos os temas possuem esse recurso, e você pode não querer usar um construtor de páginas para criar layouts de página personalizados apenas para um efeito parallax.
Dito isso, vamos ver como adicionar facilmente um efeito de fundo parallax a qualquer tema do WordPress. Cobriremos alguns métodos diferentes, e você pode usar os links rápidos abaixo para pular para o que deseja usar:
Método 1: Adicionar Efeito Parallax ao Tema do WordPress Usando Plugin
Este método não requer a adição de nenhum código ao seu tema do WordPress. É fácil e recomendado para a maioria dos usuários.
Primeiro, você precisa instalar e ativar o plugin Advanced WordPress Backgrounds. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, visite a página Configurações » AWB no painel do WordPress. Aqui, você pode marcar as caixas para os navegadores ou dispositivos onde não deseja exibir o efeito parallax.
Por exemplo, se você não quiser mostrar o efeito parallax para usuários em dispositivos móveis, você pode marcar essa caixa. Efeitos parallax às vezes podem afetar o desempenho da rolagem em telas menores, então desativá-lo para usuários móveis é frequentemente uma boa ideia.
Depois disso, clique no botão ‘Salvar Alterações’ para armazenar suas configurações.
Em seguida, abra uma página ou postagem de sua preferência no editor de blocos Gutenberg.
Uma vez lá, clique no botão ‘+’ para adicionar um bloco no canto superior esquerdo da tela para abrir o menu de blocos.
A partir daqui, você precisa encontrar e adicionar o bloco Background (AWB) à postagem.
Agora abra o painel de blocos no lado direito da tela e mude para a aba ‘Image’ se desejar adicionar uma imagem como fundo parallax.
Depois disso, clique no botão ‘Select Image’ para abrir a biblioteca de mídia. Você também pode clicar no botão ‘Use featured image’ para adicionar automaticamente a imagem destacada como fundo.
Você pode até adicionar uma cor de fundo ou vídeo para o efeito, mudando para essas abas.
Ao adicionar uma imagem, você pode ajustar seu ponto focal no painel do bloco e configurar o tamanho do plano de fundo. No entanto, recomendamos deixar o tamanho do plano de fundo como ‘Cobrir’.
Em seguida, você pode usar o controle deslizante para alterar a opacidade da imagem.
Depois de fazer isso, role para baixo até a guia ‘Parallax’ e expanda-a.
A partir daqui, você pode escolher seu tipo de parallax no menu suspenso. Assim que escolher uma opção, as alterações serão aplicadas automaticamente no editor de blocos, onde você poderá testá-las.
Em nosso exemplo, estamos usando ‘Opacidade + Rolagem’.
Depois de adicionar o efeito, clique no botão ‘+’ no bloco AWB para abrir o menu de blocos.
Agora você pode adicionar um parágrafo, imagem, vídeo, citação ou qualquer outro bloco que desejar. Este bloco será exibido com o efeito parallax.
Finalmente, clique no botão ‘Update’ ou ‘Publish’ na parte superior para salvar suas configurações.
Agora, você pode visitar seu site WordPress para ver o efeito parallax em ação.
Método 2: Adicionar Efeito Parallax ao Tema do WordPress Com CSS
Se você quiser adicionar um efeito parallax sem usar um plugin, então este método é para você. Ele requer a adição de CSS personalizado ao seu tema e a inserção manual de HTML onde você deseja que o efeito apareça.
Primeiro, você precisará carregar a imagem que deseja usar na sua biblioteca de mídia do WordPress, visitando a página Mídia » Adicionar Novo Arquivo de Mídia.
Ao fazer isso, você deve copiar o URL da imagem clicando nela e abrindo a janela de ‘Detalhes do anexo’.
Depois de fazer isso, você deve adicionar código CSS personalizado aos arquivos do seu tema. No entanto, o menor erro ao digitar o código pode quebrar seu site e torná-lo inacessível.
É por isso que recomendamos o uso de WPCode. É o melhor plugin de snippets de código para WordPress do mercado que torna super seguro e fácil adicionar código personalizado, incluindo CSS.
Primeiro, você precisa instalar e ativar o plugin WPCode. Para instruções detalhadas, consulte nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Observação: O WPCode também tem um plano gratuito que você pode usar. No entanto, optar pelo plano premium pode desbloquear recursos como uma biblioteca de snippets de código na nuvem, lógica condicional e muito mais.
Após a ativação, visite a página Code Snippets » + Add Snippet no painel do WordPress e clique no botão ‘Use Snippet’ na opção ‘Add Your Custom Code (New Snippet)’.
Isso o levará à página ‘Create Custom Snippet’, onde você pode começar adicionando um título para seu código personalizado.
Depois disso, escolha a opção ‘CSS Snippet’ no menu suspenso Code Type à direita.
Em seguida, adicione o seguinte código CSS personalizado na caixa ‘Code Preview’:
.parallax {
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
.parallax-content {
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px;
}
Depois de fazer isso, certifique-se de substituir o URL de exemplo na linha background-image: url do código pelo URL da sua imagem.
Esta imagem será usada como fundo do efeito parallax em todo o seu site.
Em seguida, role para baixo até a seção ‘Insertion’ e escolha o modo ‘Auto Insert’.
O snippet será executado automaticamente em seu site assim que você adicionar algum código HTML a ele.
Finalmente, role de volta para o topo da página e alterne o switch ‘Inactive’ para ‘Active’.
Em seguida, clique no botão ‘Save Snippet’ para armazenar suas configurações.
Agora é hora de você abrir o post ou página do WordPress onde você deseja adicionar o efeito parallax.
Uma vez lá, clique no botão ‘+’ para adicionar um bloco e abrir o menu de blocos. Em seguida, pesquise e selecione o bloco HTML Personalizado.
Agora, você precisa colar o seguinte código HTML no bloco:
<div class="parallax">
<div class="parallax-content">
Your content goes here...
</div>
</div>
Você pode então voltar facilmente para o editor de blocos visual clicando no link ‘Sair do Editor de Código’ no topo.
Depois disso, adicione o restante do conteúdo para a página ou post no editor de blocos visual.
Finalmente, clique no botão ‘Atualizar’ ou ‘Publicar’ para salvar suas configurações.
Agora, simplesmente visite seu blog WordPress para ver o efeito parallax em ação.
💡Dica Profissional: Se você quer apenas uma imagem parallax simples em uma postagem específica, você não precisa de um plugin ou código. Você pode usar o bloco Padrão de Capa do WordPress e ativar a configuração ‘Fundo Fixo’ nas configurações do bloco.
Bônus: Adicionar Vídeo do YouTube como Fundo em Tela Cheia no WordPress
Além do efeito parallax, você também pode adicionar um vídeo do YouTube como fundo em tela cheia no WordPress.
Isso pode proporcionar uma experiência imersiva para seus usuários e aumentar o apelo visual do seu site WordPress. Um vídeo do YouTube em tela cheia como fundo pode evocar emoções e criar uma conexão mais profunda com seu público.
Por exemplo, se você estiver realizando um sorteio em seu site, então você pode usar um vídeo do YouTube como fundo para tornar a página mais emocionante e incentivar os usuários a participar do concurso.
Da mesma forma, se você tem uma organização de caridade sem fins lucrativos, então você pode usar fundos de vídeo para exibir o impacto, a missão de sua organização e as histórias dos indivíduos ou comunidades que você atende. Você pode até mesmo mostrar histórias de sucesso no fundo de vídeo em tela cheia.
Para mais detalhes, você pode ver nosso tutorial sobre como adicionar um vídeo do YouTube como fundo em tela cheia no WordPress.
Esperamos que este artigo tenha ajudado você a aprender como adicionar um efeito parallax a qualquer tema WordPress facilmente. Você também pode querer ver nosso guia para iniciantes sobre como adicionar rolagem infinita ao seu site WordPress e nossa lista das melhores alternativas ao Canva para gráficos de sites.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Jiří Vaněk
Gosto do efeito parallax porque, quando adicionado a um site com uma certa atenção aos detalhes, ele pode criar um efeito verdadeiramente bonito. No entanto, pessoalmente, sempre consegui criar esse efeito apenas com o Elementor, onde era fácil para mim. Em sites sem Elementor, tive que desistir desse efeito porque não sabia como alcançá-lo. O Advanced WordPress Backgrounds parece uma ótima solução para meus sites sem Elementor, e com certeza ficarei feliz em tentar trabalhar com este plugin.
Mrteesurez
Eu ouvi falar do efeito parallax, mas não entendi como ele realmente funciona. Este guia é útil, pois o explicou claramente com a implementação. Gostaria de experimentá-lo. Obrigado.
WPBeginner Support
Glad we could help show what the effect is
Admin
Christer
Talvez eu seja burro, mas o que devo inserir em "seu próprio conteúdo aqui" no shortcode? O conteúdo é a postagem ou o quê?
Chris
WPBeginner Support
Você inseriria o conteúdo que gostaria naquela página.
Admin
Saswata Baksi
Posso adicionar isso ao código do cabeçalho da postagem, ou seja, antes do título em postagens individuais?
WPBeginner Support
Você provavelmente gostaria de um cabeçalho fixo para o que parece que você está querendo, caso contrário, você precisaria entrar em contato com o suporte do seu tema específico para essa personalização.
Admin
Jessica
Por que não mostrar um exemplo ao vivo (URL) do efeito parallax? Eu nem consigo imaginá-lo.
WPBeginner Support
Thanks for your feedback, we’ll certainly take this into consideration for any updates to this article
Admin
Andres
Olá e obrigado por este guia.
Eu implementei a Solução #2 no meu site, está funcionando muito bem, exceto pelo fato de que não está funcionando no celular. Existe algum problema conhecido com isso?
Obrigado
Chris
Oi, eu tentei essa segunda solução de código, mas não é responsiva e é penalizada pelo Google.
Eu tentei algumas correções, principalmente usando quebras de mídia e mexendo nas margens, mas não consigo fazer funcionar.
Ou
Como você desabilita no celular?
Obrigado antecipadamente
Chris
WPBeginner Support
No momento, não temos o CSS recomendado para detectar dispositivos móveis.
Admin
Alex
Eu amo este plugin, no entanto, estou tentando criar uma imagem de fundo de altura total que se ajuste a toda a tela, independentemente do tamanho da janela do navegador aberta. Então, assim que a janela for carregada, posso rolar para ver o resto da minha página da web. Vejo que a demonstração nK usa funciona desta forma:
Estou me perguntando qual CSS ou configurações adicionais preciso usar para criar este efeito.
Muito obrigado!
gayana
Adicionei o plugin parallax. Tenho o Símbolo que estava na imagem, mas não estou entendendo onde adicionar o código. Adicionei isso em CSS personalizado em aparência. Não estou vendo nenhuma imagem ou efeitos.
David
Em vez de repetir isso para cada página/post, posso fazer isso uma vez usando a caixa CSS Adicional?
Quero o efeito parallax em todo o site.
Obrigado
Mahdi Sadeghi
That was Awesome
Thank You.
Thomas Greenbank
Se eu usar o plugin para isso, tenho que deixá-lo ativo, ou posso desativar o plugin depois de configurar o efeito parallax?
WPBeginner Support
Olá Thomas,
Você terá que continuar usando o plugin enquanto quiser manter os efeitos de fundo parallax.
Admin
Ed
Existe uma maneira de tornar o fundo (seu URL) uma variável que pode ser definida quando o HTML relacionado é adicionado a uma postagem? A alternativa de ter vários segmentos de CSS personalizados (.parallaz1, .parallax2, .....) para cobrir cada fundo possível é, na melhor das hipóteses, difícil de gerenciar.
Um novato em CSS tentando aprender. Aponte-me para um ou dois sites e eu descobrirei sozinho, mas no momento nem sei o que procurar.
Obrigado
Ed
WPBeginner?
Alguém??
WPBeginner Support
Olá Ed,
Você pode adicionar classes CSS usando Campos Personalizados. Você pode atribuir um campo personalizado a um artigo e, em seguida, nos arquivos do seu tema, procurar pelos metadados personalizados e usá-los como sua classe CSS.
Admin