O que é efeito de paralaxe? Por que e como usá-lo em seu site WordPress

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


Neste artigo, consideraremos o efeito de paralaxe e os benefícios que ele pode trazer para seu site e negócios. Discutiremos como adicionar de forma rápida e fácil um efeito de paralaxe a qualquer site, página ou publicação do WordPress, com o plug-in gratuito Parallax Scroll.

O que é efeito de paralaxe?

Vinte e dezessete

O efeito paralaxe envolve uma página da web fundo movendo-se a uma taxa mais lenta 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é o tema padrão gratuito do WordPress Twenty Seventeen vem com um recurso de paralaxe. A maioria dos criadores de páginas também incorpora uma ferramenta de efeito de paralaxe, permitindo adicionar o efeito a qualquer página ou publicação 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 do uso de um efeito de paralaxe?

Existem vários benefícios no uso de um efeito de paralaxe no 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 nova, elegante e moderna. este uau efeito pode tornar seu conteúdo realmente pop e criar uma experiência interessante e interessante para o navegador.

Outro motivo importante para usar o efeito de paralaxe em seu site é ajudar quebrar uma página, particularmente 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 no site e acessar o conteúdo da maneira que você escolher..

O efeito paralaxe pode ser usado em qualquer página ou publicação de um site, mas pode ser visto particularmente em páginas iniciais, páginas de destino ou sites de uma página. O visual deslumbrante que a paralaxe cria e o efeito positivo que ela tem na experiência do usuário podem resultar na permanência dos visitantes por mais tempo no site e ajudar a melhorar as taxas de conversão do site em relação às metas.

Parallax no celular

Embora a paralaxe seja ótima para adicionar interesse visual, nem sempre funciona bem em dispositivos móveis. Como telefones e tablets geralmente usam a navegação de furto (em vez de uma rolagem como desktops), os efeitos de paralaxe podem não ser renderizados corretamente. Obviamente, isso dependerá do método e das animações usadas na sua própria seção de paralaxe, no entanto, para uma boa usabilidade, considere desativar a paralaxe em dispositivos.

Selecione um tema com efeito paralaxe

Total

Para aqueles que estão iniciando um novo projeto, selecione um tema premium que inclua um recurso de efeito de paralaxe. E se você deseja usar um efeito de paralaxe em várias páginas do seu site, não apenas na página inicial, considere um tema polivalente que acompanha um construtor de páginas avançado. Temas como Divi de Elegant Themes, Parallax by Themify e nosso próprio tema Total, todos incluem construtores de páginas que fornecem ferramentas de efeito de paralaxe.

Adicionar Sliders Parallax com o plug-in Slider Revolution WordPress

Slider Revolution Parallax

Se você deseja um controle deslizante em destaque com efeito de paralaxe, nossa principal opção é o plug-in Revolução Slider. Este plugin premium inclui centenas de opções e recursos integrados para fontes, camadas, efeitos de slider, layouts e, é claro, paralaxe.

Ativar paralaxe de revolução do slider

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

Configurações do Slider Revolution Parallax

Em seguida, edite o slide Histórico Principal para adicionar um Fonte imagem de fundo e selecione o Parallax / 3D para atribuir um nível de paralaxe. Depois, ao adicionar camadas, selecione o Parallax / 3D opção de camada para profundidade de paralaxe para adicionar movimento ao seu texto, imagem, botão e outras camadas. É tão fácil!

Quando terminar, salve o 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 Visual Composer, poderá usar o elemento Slider Revolution do construtor de páginas para selecionar e inserir rapidamente seu slider.

Adicionar seções de paralaxe com o plug-in Parallax Scroll WordPress

Pergaminho de paralaxe

Se você já possui 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. Pergaminho de paralaxe é uma opção gratuita popular que permitirá adicionar uma imagem de plano de fundo de rolagem de 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.

Agora, vamos ver como instalar e começar a usar o Parallax Scroll …

Instalando o Parallax Scroll

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

Adicionar novo plugin

Procurar Pergaminho de paralaxe, então selecione Instalar agora> Ativar.

Ativar rolagem de paralaxe

Agora você encontrará uma guia Parallax Scroll adicionada ao menu do WordPress.

Adicionando uma seção de rolagem Parallax

Para começar o Parallax Scroll, você deve primeiro criar uma nova seção de paralaxe. Para fazer isso, selecione Rolagem de paralaxe> Adicionar novo no seu menu WordPress.

Parallax Scroll Adicionar novo

Agora você pode criar sua nova seção de paralaxe …

Adicionar novo Parallax

Definindo a imagem de fundo de rolagem de paralaxe

Primeiro, você precisa definir uma imagem para o fundo de paralaxe de rolagem. Para fazer isso, clique em Definir imagem em destaque e adicione a imagem à seção Imagem em destaque.

Imagem em destaque

Pense com cuidado na imagem que você usa para cada seção do plano de fundo. Verifique se eles são relevantes para o seu site e sincronize com sua marca. Se você deseja exibir um cabeçalho ou outro conteúdo 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 chama 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. Belas imagens 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, levará as pessoas a se lembrarem e voltarem 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.

Criando um texto de cabeçalho sobre o plano de fundo paralaxe

Adicionar cabeçalho

Se você deseja criar um texto de cabeçalho com um fundo de paralaxe, insira o título da postagem. Este título aparecerá como o título do cabeçalho por cima da imagem de plano de fundo de paralaxe escolhida.

Você pode não querer um cabeçalho na sua seção de paralaxe. Se esse for o caso, você ainda deve atribuir um título a cada paralaxe, para que cada seção criada seja facilmente identificável. Você precisará selecionar para ocultar o título no Opções de rolagem de paralaxe (abordado mais adiante neste artigo), para que um cabeçalho não seja exibido na parte frontal do seu site.

Exibir qualquer conteúdo com um fundo de rolagem de paralaxe

Você pode querer que a seção de paralaxe exiba outro conteúdo sobre a imagem de fundo. Isso pode incluir qualquer coisa necessária para o seu site, de texto e imagens a códigos de acesso. Decida o que você deseja exibir e insira esse conteúdo na caixa de postagem.

Personalizando as configurações de rolagem do Parallax

Quando estiver satisfeito com o conteúdo, você precisará personalizar as configurações da seção de paralaxe para se adequar à sua página.

Opções de rolagem de paralaxe

Role para baixo até o Opções de rolagem de paralaxe. Em Estilo, você pode alterar a altura da paralaxe e o tamanho da imagem, além de selecionar Largura total para forçar o tema a exibir a imagem de plano de fundo em toda a largura da tela, se ainda não estiver.

Você também pode alterar a posição horizontal e vertical do cabeçalho no plano de fundo de paralaxe. E se você deseja ocultar o título da postagem, pode fazê-lo aqui digitando Mostrar nenhum; no Estilo do cabeçalho.

Configurações de paralaxe permitirá que você personalize como o seu rolagem de paralaxe se comporta. Isso inclui alterar a velocidade do plano de fundo de paralaxe. Experimente velocidades diferentes para ver o que funciona para o seu site e público-alvo.

Há também um Configurações para celular opção, que permite desativar a imagem de plano de fundo da paralaxe e / ou o conteúdo em celulares, se você achar que as seções da paralaxe não estão funcionando bem em dispositivos móveis.

Depois de ajustar as configurações e terminar de criar sua seção de paralaxe, clique em Publicar.

Inserindo a seção Parallax em uma postagem ou página

Em seguida, você precisa inserir sua seção de paralaxe em uma postagem ou página em seu site. Selecione Parallax Scroll no menu do WordPress.

Parallax Scroll Shortcode

Na tabela apresentada, você verá um código de acesso para a seção de paralaxe que você acabou de criar. Copie o código e abra a página ou publicação apropriada. Cole o código no conteúdo da página na posição apropriada.

Inserir código curto

Visualize as alterações e se você estiver satisfeito com sua nova seção de paralaxe, clique em Publicar. Agora você pode criar seções adicionais para dar à página ou publicar um efeito de paralaxe completo. E se você precisar fazer alterações, basta reabrir a página da seção de paralaxe e fazer as alterações necessárias.

Pensamentos finais

Se o seu tema não possui um recurso de efeito de paralaxe embutido ou se você deseja adicionar um efeito a mais do que apenas sua página inicial, o Parallax Scroll 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. Ele não apenas melhora significativamente o visual do seu site, como também ajuda a atrair o seu público, permite que ele navegue facilmente no site e acesse o conteúdo, além de aumentar o tempo gasto no site. Essa experiência aprimorada do usuário deve, no final das contas, ajudar seu site a se converter em relação às suas metas, seja para aumentar visitantes que retornam, coletar leads ou vender produtos ou serviços.

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me