Pular para o conteúdo

Como criar um slide com o Revolution Slider no WordPress

Paulo Felipe
Por Paulo Felipe,
Front-end na Nano Incub.
Publicado em 26 de setembro de 2018

Fala Incuber beleza? Aqui é o Paulo Felipe com mais um tutorial pra você.

Se você está interessado em envolver os visitantes do seu site WordPress com apresentações de slides que contenham imagens, textos e vídeos. Então este Tutorial é para você!

A partir de agora você irá aprender como criar um slide com o Revolution Slider no WordPress e cativar os visitantes do seu site de uma maneira simples, prática e funcional.

Essa série será um projeto prático com o Revolution Slider composto por 4 vídeos nos quais aprenderemos a:

  • Criar um slider e sua principais configurações;
  • Criar um slide com imagens, textos, animações, timeline da animação e movimentos parallax;
  • Criar um slide com vídeo de background, textos e botão de ação;
  • Utilizar o recurso de transições de slides;
  • Como configurar e ajustar o slide em notebooks, tablets e celulares.

Para agilizar o seu aprendizado e proporcionar mais proveito no que interessa, eu preparei um pacote com algumas imagens entre backgrounds e elementos em png para você treinar e seguir esse tutorial com mais facilidade. Clique no botão abaixo e receba o seu material exclusivo.

Agora que você já baixou as suas imagens, abra o seu painel do WordPress, instale o seu Revolution Slider e vamos começar!!

Parte 01 – Configurações gerais de um slider – Revolution Slider

Nesse primeiro vídeo nós iremos passar pelas principais configurações de um slider deixando-o estruturado e pronto para receber os slides com imagens, textos, animações e vídeos.

Principais pontos abordados nesse vídeo:

  • Conhecendo os tipos de sliders;
  • Aprendendo a definir o tamanho do slider em todos os dispositivos;
  • Como fazer as configurações padrões dos slides como por exemplo: Duração, transição, background e progress bar;
  • Como configurar os controles de navegações do slider;
  • Como ativar o parallax para criar efeitos de movimentos nos elementos,
  • Inserindo o slider em páginas do site.

Parte 02 – Como criar um slide com o Revolution Slider que tenha elementos animados, transições e parallax

Agora que já definimos as configurações gerais do Slider é hora de criarmos o nosso primeiro slide. Essa parte é muito legal, pois aqui você aprenderá a dar vida para o seu slide e fazer as coisas acontecerem.

Ao final dessa segunda parte você aprenderá:

  • Como criar um slide;
  • Como inserir elementos no slide (imagens e textos);
  • Como animar entrada e saída dos elementos no slide;
  • Como criar um parallax em um elemento que se move de acordo com o mouse,
  • Como trabalhar com a timeline do Revolution Slider.

Maravilha, espero que você esteja gostando e entendendo os vídeos até aqui. Lembre-se, caso você esteja com alguma dúvida deixe nos comentários que eu responderei o mais rápido possível! Te desejo foco para continuar e vamos nessa, estou com você!

Parte 03 – Como criar um slide com vídeo background, textos animados e botões – Revolution Slider

Depois de aprender a trabalhar com elementos e criar um slide bem legal é hora de subir um nível, vamos aprender a como inserir um vídeo de background em seu slide e colocar texto e botão com link sob o vídeo para assim causar um impacto visual enorme no visitante do seu site.

Nessa terceira parte você aprenderá:

  • Como inserir um vídeo de background no slide;
  • Como criar um botão,
  • Como inserir links.

Muito bem, agora vamos para a última parte do nosso projeto.

Parte 4 – Como configurar os slides em notebooks, tablets e celulares (mobile) – Revolution Slider

Nos dias de hoje, de nada adianta você ter um slide muito legal com animações vídeos e tudo mais se ele não for responsivo. Nessa última parte do nosso projeto vamos aprender como configurar os elementos dos slides no mobile.


É isso ai querido Incuber, chegamos ao fim de mais um projeto prático, e como você pode notar projetos assim mesmo que simples demandam planejamento e tempo para serem criados, e para saber se estamos no caminho certo, o seu feedback é muito importante para nós. Deixe o seu comentário sobre o que você achou do projeto, suas dúvidas e sugestões, somente assim conseguiremos melhorar cada vez mais a qualidade dos artigos aqui no blog.

  • Se você ficou com alguma dúvida ou deseja acrescentar algum ponto no tutorial deixe nos comentários;
  • Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também,
  • Quer me fazer chorar de alegria? Se inscreva no nosso canal no Youtube ????

Um abraço e até o próximo post!

Compartilhe esse post

Deixe o seu comentário, dúvida ou sugestão de novos tutoriais