Quando inserimos uma imagem com link para ela mesma em nosso site WordPress por padrão ao clicar na imagem o usuário será direcionado para o link da imagem do servidor perdendo totalmente o acesso ao site, o efeito lightbox faz com que a imagem seja mostrada em tamanho maior, porém sem sair do site e se for uma galeria de fotos você já terá os botões de navegações sem precisar configurar nada.

Agora que você já viu um geralzão do que vamos aprender, pegue o seu café, coloque uma música da sua preferência, tome uma respiração profunda e vamos ao processo.

Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito

Efeito lightbox nas imagens do site com WP Featherlight no WordPress

Instalando o plugin WP Featherlight

O plugin WP Featherlight será o nosso escolhido para inserir o efeito lightbox em nosso site, eu gosto bastante desse plugin por ele ser bem leve, simples, não faz requisições no banco de dados e faz o que tem que fazer de uma maneira bem objetiva.

Acesse o painel administrativo do seu site, vá no menu Plugins e em seguida clique em Adicionar novo, na barra de pesquisa digite WP Featherlight, agora é só clicar em Instalar e depois em Ativar.

Maravilha, agora que o seu plugin está instalado e ativado, navegue no seu painel administrativo até a página que você deseja inserir uma foto/galeria e vamos fazer as configurações necessárias. No meu exemplo eu vou criar uma galeria de fotos, porém funciona também apenas com uma foto.

Criando uma galeria de fotos e configurando o Efeito Lightbox

Agora meu “pácero” vamos criar uma galeria de fotos simples utilizando o editor padrão do WordPress.

No seu editor clique em Adicionar mídia e siga o processo abaixo:

1 – Clique em adicionar galeria

2 – Selecione as imagens que você deseja inserir em sua galeria

3 – Clique em Criar uma nova galeria

Nesse momento será mostrada a janela para configurarmos a galeria:

1 – Para o efeito funcionar perfeitamente o apontamento de TODAS as imagens do site devem estar para Arquivo de mídia, conforme mostrado na imagem acima;

2 – Defina a quantidade de itens por linha da sua galeria de fotos;

3 – Clique em inserir galeria e em seguida Salve sua página e vamos ver o resultado

Veja abaixo como ficou o efeito no meu projeto:

E aqui finalizamos mais um tutorial, espero que você tenha obtido mais clareza e aprendido a fazer o processo de inserir efeito lightbox nas imagens do site com WP Featherlight no WordPress e se ficou alguma dúvida é só deixar nos comentários que eu terei o maior prazer em ajudar!

Assista ao vídeo do processo no topo desse tutorial para fixar ainda mais o aprendizado.

Por último e não menos importante segue o fluxo do que é necessário fazer para sair dessa postagem com a consciência de que você fez o melhor que podia fazer para ajudar o blog a alcançar cada vez mais pessoas:

• Se você ficou com alguma dúvida, deseja acrescentar algum ponto no tutorial ou quer compartilhar como o conteúdo te ajudou é só deixar 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 ????
• Espero que esse tutorial tenha te ajudado a ter mais clareza sobre o processo de criar redirecionamento de página no Contact Form 7

O post Efeito lightbox nas imagens do site com WP Featherlight no WordPress apareceu primeiro em Nano Academy.

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.

Baixar arquivos facilitadores >>

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!

O post Como criar um slide com o Revolution Slider no WordPress apareceu primeiro em Nano Academy.