O efeito de paralaxe é um recurso de design extremamente popular que é comumente usado em sites WordPress. Este efeito especial tem destaque no mundo dos jogos há anos, mas mais recentemente passou para o design da web. E até agora esta grande tendência não parece estar indo a lugar nenhum, se é que está sendo mais amplamente utilizada do que nunca. Então, o que é o efeito de paralaxe e por que você deve considerar usá-lo em seu site WordPress?

Neste artigo, consideraremos o que é um efeito de paralaxe e os benefícios que ele pode trazer para o seu site e negócios. Em seguida, discutiremos como adicionar de maneira rápida e fácil um efeito de paralaxe a qualquer site, página ou postagem do WordPress, com um tema ou plug-in.

O que é efeito de paralaxe?

O efeito de paralaxe envolve o plano de fundo de uma página da Web movendo-se a uma taxa mais lenta do que o primeiro plano . Isso cria uma ilusão de profundidade na página, dando ao conteúdo um efeito 3D à medida que os espectadores rolam para baixo.

A maioria dos temas premium do WordPress agora vem com efeito de paralaxe embutido em sua página inicial. Até mesmo o tema padrão gratuito do WordPress Twenty Seventeen vem com um recurso de paralaxe. A maioria dos construtores de páginas também incorpora uma ferramenta de efeito de paralaxe, permitindo que você adicione o efeito a qualquer página ou postagem em seu site. E, claro, existem vários plugins do WordPress que você pode instalar para adicionar elementos de efeito de paralaxe ao seu site.

Quais são os benefícios de usar um efeito de paralaxe?

Há uma série de benefícios em usar um efeito de paralaxe em seu site WordPress. O primeiro, e mais óbvio, é o aspecto visual de um efeito de paralaxe. Um efeito de paralaxe é esteticamente agradável , dando ao seu site uma aparência fresca, elegante e moderna. Esse efeito uau pode tornar seu conteúdo realmente pop e criar uma experiência de navegador empolgante e interessante.

Outro motivo importante para usar o efeito de paralaxe em seu site é ajudar a dividir uma página , principalmente uma página inicial, em partes legíveis. Use esse efeito para enfatizar as diferentes seções e tipos de conteúdo que você deseja exibir. Isso pode ajudar a promover diferentes aspectos do seu site, iluminar informações importantes e incentivar os usuários a navegar em seu site e acessar o conteúdo da maneira que você escolher.

O efeito de paralaxe pode ser usado em qualquer página ou postagem de um site, mas é visto com mais frequência em páginas iniciais, páginas de destino ou sites de uma página. Os visuais impressionantes que a paralaxe cria e o efeito positivo que ela tem na experiência do usuário podem fazer com que os visitantes permaneçam em seu site por mais tempo e ajudar a melhorar as metas de taxa de conversão do site.

Considerações ao usar paralaxe

Embora existam benefícios, existem alguns pontos-chave que você deve ter em mente ao adicionar seções de paralaxe ao seu site.

Escolhendo Imagens de Fundo

Pense cuidadosamente sobre a imagem que você usa para cada seção de plano de fundo. Certifique-se de que eles sejam relevantes para o seu site e sincronizem com a sua marca. Se você for exibir um cabeçalho ou conteúdo adicional por cima dessa imagem de fundo, considere usar uma cor de bloco ou padrões sutis em vez de uma foto ou um gráfico que chame a atenção. Isso pode ajudar a garantir que sua imagem funcione e promova seu conteúdo, em vez de distraí-lo.

Se você optar por usar fotografias, as imagens precisam ser de alta qualidade. Imagens bonitas e atraentes podem ajudar a dar ao seu site uma aparência profissional e única. Esses recursos visuais criarão uma forte impressão em seu público, o que, por sua vez, fará com que as pessoas se lembrem e retornem ao seu site. Há uma grande variedade de sites de ações dos quais você pode baixar imagens de alta qualidade. Confira nossa coleção de sites de fotos gratuitas e premium, onde você encontrará rapidamente fotografias impressionantes para seus fundos de paralaxe.

Paralaxe no celular

Embora a paralaxe seja ótima para adicionar interesse visual, ela nem sempre funciona bem em dispositivos móveis. Como os telefones e tablets normalmente usam a navegação por furto (em vez de uma rolagem como desktops), os efeitos de paralaxe podem não ser renderizados corretamente. Claro, isso dependerá do método e das animações que você usa para sua própria seção de paralaxe. No entanto, para usabilidade, você pode querer considerar desabilitar a paralaxe nos dispositivos.

Paralaxe e acessibilidade

Além da usabilidade reduzida em dispositivos móveis, a paralaxe também pode apresentar alguns desafios de acessibilidade. Como a paralaxe é baseada em movimento, ela pode aumentar a dificuldade de leitura e apresentar problemas de compatibilidade de navegador ou dispositivo (como mencionado, especialmente em dispositivos móveis). Além disso, à medida que as camadas se movem, podem criar problemas de contraste complicando ainda mais a legibilidade. Por essas razões, você deve ter um cuidado extra na criação de seções de paralaxe em seu site.

Selecione um tema com efeito de paralaxe

Para aqueles que estão começando um novo projeto, você deve selecionar um tema premium que inclua um recurso de efeito de paralaxe. E se você quiser usar um efeito de paralaxe em várias páginas do seu site, não apenas na página inicial, considere um tema multiuso que vem com um construtor de páginas avançado.

Temas como Divi de Elegant Themes , Parallax by Themify e nosso próprio Total Multipurpose WordPress Theme , todos incluem construtores de páginas que fornecem ferramentas de efeito de paralaxe.

Adicionar fundos de paralaxe com total

Para dar uma ideia de como a paralaxe pode funcionar com temas, abaixo está um guia de como adicionar um fundo de paralaxe a uma linha com o tema Total. O Total usa o WPBakery para a construção de páginas de frontend, mas muitos outros construtores de páginas do WordPress incluem opções semelhantes.

Primeiro, você precisará inserir uma linha e adicionar conteúdo a ela. Em seguida, clique no ícone de lápis para editar sua linha. Como o design que criamos acima não está encaixotado e não inclui uma barra lateral, selecionamos a opção “Esticar linha” para garantir que nosso plano de fundo paralaxe preencha a linha completamente (observação – Total também inclui uma opção de tela cheia que você pode ativar se você deseja que sua linha e fundo de paralaxe preencham completamente a janela do navegador).

Em seguida, na seção Parallax, você pode adicionar facilmente uma imagem de fundo e definir uma velocidade de rolagem para o efeito de paralaxe (quanto maior o número, mais a imagem se moverá, o que também pode exigir uma imagem grande).

O Total também oferece uma opção avançada de paralaxe com mais configurações para ativar/desativar o efeito no celular, escolher o estilo da imagem (capa, fixa ou repetir), definindo a direção do efeito e, claro, a velocidade.

Você também pode usar as configurações de sobreposição em uma guia para garantir contraste suficiente entre o plano de fundo da linha e o conteúdo (adicionamos uma sobreposição branca à nossa imagem). Quando terminar, certifique-se de salvar suas alterações de linha, bem como sua página.

Adicionar controles deslizantes de paralaxe com revolução deslizante

Se você quiser um controle deslizante em destaque com um efeito de paralaxe, nossa melhor escolha é o plug-in Slider Revolution . Este plugin premium inclui centenas de opções e recursos integrados para fontes, camadas, efeitos deslizantes, layouts e, claro, paralaxe.

Ativar paralaxe de revolução deslizante

Primeiro instale o plug-in e, em seguida, importe um modelo de slider ou comece a criar seu próprio slider do zero (você pode ler nosso guia completo do Slider Revolution para obter mais detalhes).

Em seguida, edite o slide Main Background para adicionar uma imagem de fundo Source e selecione a guia Parallax/3D para atribuir um nível de parallax. Então, ao adicionar camadas, selecione a opção de camada Parallax/3D para profundidade de paralaxe para adicionar movimento ao seu texto, imagem, botão e outras camadas. É tão fácil!

Quando terminar, salve seu controle deslizante e use o código de acesso para inseri-lo em qualquer postagem ou página. Ou se você estiver usando um construtor de páginas como o WPBakery (anteriormente Visual Composer) , poderá usar o elemento Slider Revolution do construtor de páginas para selecionar e inserir rapidamente seu controle deslizante.

Adicione seções de paralaxe com o plug-in gratuito de fundos avançados do WordPress

Se você já tem um tema e ele não inclui uma opção de efeito de paralaxe embutida, considere usar um plugin do WordPress para fazer o trabalho. Advanced WordPress Backgrounds (AWB para abreviar) é uma opção gratuita popular que permitirá que você adicione uma imagem de fundo de rolagem paralaxe a diferentes elementos em uma página ou postagem do seu site. Adicione um plano de fundo de rolagem a um único elemento, um texto de cabeçalho ou uma seção completa contendo qualquer conteúdo, tudo usando um código de acesso simples.

Então, vamos agora dar uma olhada em como instalar e começar a usar o Advanced WordPress Backgrounds com paralaxe.

Instalando o AWB

Para instalar o plug-in, faça login no painel do WordPress como administrador e selecione Plugins > Adicionar novo no menu.

Procure por Planos de fundo avançados do WordPress e selecione Instalar agora > Ativar .

Com o AWB, como você adiciona um fundo de paralaxe dependerá de qual editor do WordPress você está usando – Gutenberg, Classic ou um construtor de páginas de terceiros como o WPBakery. Não importa qual você use, o AWB oferece várias opções fáceis para:

• Fundos de mídia de cor, imagem ou vídeo
• Tamanho de exibição de mídia (capa, contém ou padrão)
• Posição da mídia em segundo plano, com porcentagens para alinhar seu plano de fundo (exemplo: 50% 50% ao centro)
• Seletor de cores de sobreposição, usando o seletor Alpha para tornar sua cor mais ou menos transparente
• Parallax Scroll, Scale e Opacity com velocidade e opção para habilitar no celular
• Paralaxe do mouse (que faz com que o plano de fundo mude ligeiramente de acordo com os movimentos do mouse)

Além disso, você também encontrará uma guia AWB adicionada ao menu de configurações do WordPress. É aqui que você pode escolher uma configuração de visibilidade global para desativar efeitos de paralaxe (e vídeos) para dispositivos móveis, bem como navegadores específicos.

AWB Gutemberg

Os fundos avançados do WordPress são totalmente compatíveis com o Gutenberg e até incluem seu próprio bloco personalizado para você usar.

Para começar, você precisará inserir o bloco AWB. Em seguida, clique para adicionar outros blocos ao seu conteúdo no AWB.

Quando terminar, clique no bloco AWB e, em seguida, clique na guia “Bloquear” no menu à direita. É aqui que você pode adicionar e editar as opções de plano de fundo do seu bloco.

Editor Clássico AWB

Com o Editor Clássico, o AWB usa um código de acesso para adicionar um plano de fundo de paralaxe. Portanto, você precisará primeiro criar seu conteúdo, destacar a seção que deseja ter como plano de fundo e clicar no ícone AWB no editor.

Escolha sua imagem de fundo e comece a rolar para baixo para adicionar o restante de suas opções. Por exemplo, adicionando uma cor de sobreposição e um tipo de paralaxe. Quando terminar, clique em “inserir”.

O shortcode ficará mais ou menos assim:

[nk_awb awb_type=”image” awb_image=”1234″ awb_image_size=”full” awb_image_background_size=”cover” awb_image_background_position=”50% 50%” awb_parallax=”scroll” awb_parallax_speed=”0.5″]Aqui é onde o conteúdo dentro do seu fundo de paralaxe vai.[/nk_awb]

O editor clássico pode ser um pouco menos amigável neste caso. Como o AWB é um shortcode, você não pode visualizar suas configurações de plano de fundo no editor.

AWB com WPBakery

Por último – os fundos avançados do WordPress também funcionam com o construtor de páginas WPBakery. Usá-lo aqui é simples, pois eles adicionaram uma guia às configurações de linha.

Basta clicar na guia “Backgrounds (AWB)” para criar e personalizar seu próprio plano de fundo de paralaxe em qualquer linha.

Considerações finais sobre efeitos de paralaxe

Se o seu tema não tiver um recurso de efeito de paralaxe integrado ou se você quiser adicionar um efeito a mais do que apenas sua página inicial, tente um plug-in. Slider Revolution ou o Advanced WordPress Backgrounds gratuito são ótimos. Qualquer um permitirá que você crie rapidamente seções de paralaxe para adicionar às suas páginas ou postagens.

Como você viu, adicionar um efeito de paralaxe ao seu site pode valer muito a pena. Isso não apenas pode melhorar muito o visual do seu site, mas também ajudará a atrair seu público, permitir que eles naveguem facilmente em seu site e acessem o conteúdo, além de aumentar o tempo que passam em seu site. Essa experiência aprimorada do usuário deve ajudar seu site a converter em relação às metas. Se você pretende aumentar os visitantes recorrentes, coletar leads ou vender produtos ou serviços.

Você adicionará um efeito de paralaxe à sua página inicial, página de destino, postagem ou outro lugar? Por favor, compartilhe seus pensamentos nos comentários abaixo.