Recentemente, um de nossos leitores nos perguntou como adicionar efeito de paralaxe a qualquer tema WordPress.
O efeito paralaxe é uma tendência popular atualmente na web, em que uma imagem de plano de fundo rola mais lentamente do que o conteúdo de primeiro plano.
Neste tutorial, mostraremos como adicionar facilmente o efeito de paralaxe a qualquer tema do WordPress.
Mas, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog
Mas voltando ao motivo de estarmos aqui.
O que é um efeito de paralaxe?
O efeito paralaxe é uma técnica moderna de web design em que o elemento de fundo rola mais lentamente do que o conteúdo de primeiro plano. Este efeito adiciona profundidade às imagens de fundo e as torna interativas.
Descubra nossos 25 WordPress temas com paralaxe para criar um site
O efeito Parallax pode ser usado em páginas de destino, páginas de vendas ou a página inicial de um site comercial. É uma ótima maneira de destacar diferentes seções em uma página longa.
muitos temas premium para WordPress têm um efeito de paralaxe integrado em sua página inicial. Você também pode usar o efeito de paralaxe com a maioria dos plug-ins WordPress criação visual de páginas.
No entanto, nem todos os temas do WordPress oferecem um efeito de paralaxe integrado, e talvez você não queira usar um construtor de páginas visual apenas para o efeito de paralaxe.
Vamos dar uma olhada em como adicionar facilmente o efeito de paralaxe a qualquer tema do WordPress.
Método 1: adicione o efeito de paralaxe a qualquer tema WordPress usando um plugin
Este método não requer a adição de nenhum código ao seu tema WordPress. É mais fácil e recomendado para a maioria dos usuários.
A primeira coisa que você precisa fazer é instalar e ativar o plugin Fundos avançados do WordPress. Para mais detalhes, confira nosso guia passo a passo sobre como instalar um plugin do WordPress.
Depois de ativar o plugin, você precisa editar a página onde deseja adicionar o efeito de paralaxe. Você notará o novo botão "Fundos avançados do WordPress»Na barra de ferramentas do editor visual.
Clicar nele abrirá uma janela pop-up onde você pode alterar várias configurações de plano de fundo que deseja adicionar.
Em primeiro lugar, você precisa selecionar uma imagem como fundo e depois marcar a opção " Stretch".
Então você tem que clicar no botão Selecione a imagem Para baixar ou selecionar uma imagem que você deseja usar. Certifique-se de usar uma imagem grande, caso contrário, ela aparecerá pixelizada.
Depois disso, você precisa ativar o efeito Paralaxe Ao escolher um tipo de efeito de paralaxe. Existem vários estilos disponíveis que você pode experimentar. O efeito de paralaxe mais comum usado é a rolagem.
Clique no botão inserção para continuar.
O plugin adicionará um shortcode em seu editora. Ficará assim:
[nk_awb awb_type = "imagem" awb_stretch = "true" awb_image = "22" awb_image_size = "full" awb_parallax = "pergaminho" awb_parallax_speed = "0.5" awb_mouse_parallax = "true" awb_mouse_UM_mouse_parallax_size = " aqui [/ nk_awb]
Substituir " este conteúdo Por seu próprio conteúdo, salve sua página.
Você pode visitar seu site para vê-lo em ação.
Método 2: adicione o efeito "Parallax" a qualquer tema WordPress com CSS
Este método requer que você tenha algum conhecimento de "HTML / CSS", além de como os temas e plug-ins do WordPress funcionam.
Primeiro, você precisa fazer o upload para a sua biblioteca de mídia do WordPress, a imagem que deseja usar para o efeito de paralaxe visitando " mídia> Adicionar novo ".
Vá além descobrindo Como organizar os meios de comunicação em seu blog WordPress
Depois de enviar a imagem, você precisa copiar o url da imagem editando a imagem na biblioteca de mídia do WordPress.
Em seguida, você precisa adicionar o seguinte código HTML na página onde deseja exibir o efeito de paralaxe. Você também pode adicionar este código HTML ao seu Tema WordPress ou tema filho.
div class = "parallax"> Seu conteúdo aqui ...
Em seguida, você precisa adicionar o seguinte código CSS personalizado ao seu tema WordPress.
.parallax {imagem de fundo: url("https://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); altura: 100%; anexo de fundo: fixo; posição de fundo: centro; repetição em segundo plano: sem repetição; tamanho do fundo: capa; margem esquerda: -410px; margem direita: -410px; } .parallax-content { largura:50%; margem:0 próprio; cor:#FFF; preenchimento superior: 50px; }
Lembre-se de substituir o URL da imagem de fundo pela sua própria imagem.
Agora você pode salvar suas alterações e visitar seu site.
Aqui está ! Agora você pode adicionar o efeito de paralaxe ao seu site WordPress.
Descubra também alguns temas e plugins premium do WordPress
Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.
Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.
1. Doação WooCommerce
Aceite através desta extensão doações em seu site WooCommerce com valores especificados pelos clientes. Isso permitirá que eles dêem o quanto quiserem. Cada doação pode ser apresentada como qualquer produto usual de WooCommerce.
Se o cliente pular a página do carrinho ou for diretamente para o checkout sem doar, um link aparecerá acima da página de checkout para que ele possa doar.
Cada etapa do uso da Doação WooCommerce é explicada em uma documentação com capturas de tela. Basta ativar o plugin e você encontrará o campo "Adicionar doação" no carrinho.
Download | Demo | hospedagem na web
2. LinkedIn Mais
O LinkedIn Plus é um plugin para WordPress que permite exibir seu perfil do LinkedIn em seu blog. Também funciona para blogs com vários autores. Ele adiciona botões "Seguir" e "Compartilhar" às suas postagens, páginas ou widgets do WordPress.
É uma ótima maneira de adicionar todos os recursos do LinkedIn ao seu blog e validar sua marca junto aos consumidores. Dá a você a capacidade de personalizar sua aparência, definir configurações e ativar outras opções avançadas para promover seu perfil para recrutadores ou empregadores em potencial.
Download | Demo | hospedagem na web
3. YouTuber
O YouTubeR é um plugin exclusivo do WordPress que permite que você carregue vídeos do seu site no YouTube e incorpore facilmente vídeos, playlists e canais do YouTube ao seu site.
Com este plug-in, você tem a oportunidade de criar galerias de vídeos excepcionais em seu site.
Suas outras características são: a possibilidade de envie facilmente vídeos para o YouTube a partir do seu site WordPress, integração vídeos fáceis, listas de reprodução e canais do YouTube para o seu site, suporte para o Visual Composer, o rolagem infinita em listas de reprodução, excelente cache, layout responsivo, documentação detalhada e muito mais.
Download | Demo | hospedagem na web
Recursos Recomendados
Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.
- Como corrigir o erro "Não foi possível gravar no disco" no WordPress
- Como se tornar um blogueiro de sucesso e ganhar dinheiro com o WordPress
- Como publicar seus artigos por e-mail no WordPress
- Como se tornar um blogueiro de sucesso e ganhar dinheiro com o WordPress
Conclusão
Isso é tudo! Esperamos que tenha sido de grande ajuda. Não hesite em compartilhe com seus amigos em suas redes sociais favoritas.
No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.
E se você tiver alguma sugestão ou comentário, deixe-o em nossa seção Comentários.
...
