<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Arquivos Lightbox - Nano Academy</title>
	<atom:link href="https://academy.nanoincub.com.br/tag/lightbox/feed/" rel="self" type="application/rss+xml" />
	<link>https://academy.nanoincub.com.br/tag/lightbox/</link>
	<description>Tutoriais</description>
	<lastBuildDate>Wed, 18 Sep 2019 12:07:13 +0000</lastBuildDate>
	<language>pt-BR</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	

<image>
	<url>https://academy.nanoincub.com.br/wp-content/uploads/2018/04/cropped-favico-32x32.png</url>
	<title>Arquivos Lightbox - Nano Academy</title>
	<link>https://academy.nanoincub.com.br/tag/lightbox/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Efeito lightbox nas imagens do site com WP Featherlight no WordPress</title>
		<link>https://academy.nanoincub.com.br/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress/</link>
					<comments>https://academy.nanoincub.com.br/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[Paulo Felipe]]></dc:creator>
		<pubDate>Thu, 22 Aug 2019 12:09:49 +0000</pubDate>
				<category><![CDATA[Wordpress]]></category>
		<category><![CDATA[Imagens]]></category>
		<category><![CDATA[Lightbox]]></category>
		<category><![CDATA[Plugin Wordpress]]></category>
		<guid isPermaLink="false">https://academy.nanoincub.com.br/?p=733</guid>

					<description><![CDATA[<p>Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você, dessa vez iremos aprender a como inserir efeito lightbox nas imagens do site com WP Featherlight no WordPress. Essa é uma dica bem simples, porém muito importante para que o seu site forneça uma melhor experiência para o usuário. Quando [&#8230;]</p>
<p>O post <a href="https://academy.nanoincub.com.br/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress/">Efeito lightbox nas imagens do site com WP Featherlight no WordPress</a> apareceu primeiro em <a href="https://academy.nanoincub.com.br">Nano Academy</a>.</p>
]]></description>
										<content:encoded><![CDATA[<p>Salve Salve Incuber beleza? Aqui é o Paulo Felipe trazendo mais uma dica rápida pra você, dessa vez iremos aprender a como inserir efeito <strong>lightbox nas imagens do site com WP Featherlight no WordPress. </strong>Essa é uma dica bem simples, porém muito importante para que o seu site forneça uma melhor experiência para o usuário.</p>
<p>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.</p>
<p>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.</p>
<p><strong>Assista o vídeo do processo e se preferir continue a leitura e acompanhe o processo escrito</strong></p>
<p><iframe src="https://www.youtube.com/embed/tolXQxqcREA" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>
<h2>Efeito lightbox nas imagens do site com WP Featherlight no WordPress</h2>
<h3>Instalando o plugin WP Featherlight</h3>
<p>O plugin <a href="https://br.wordpress.org/plugins/wp-featherlight/" target="_blank" rel="noopener">WP Featherlight</a> 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.</p>
<p>Acesse o painel administrativo do seu site, vá no menu <strong>Plugins </strong>e em seguida clique em <strong>Adicionar novo, </strong>na barra de pesquisa digite <strong>WP Featherlight</strong>, agora é só clicar em <strong>Instalar </strong>e depois em <strong>Ativar.</strong></p>
<p><a href="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/plugin-light-box-wordpress.png"><img fetchpriority="high" decoding="async" class="alignnone size-full wp-image-734" src="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/plugin-light-box-wordpress.png" alt="Plugin Lightbox WordPress - WP Featherlight" width="555" height="167" srcset="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/plugin-light-box-wordpress.png 555w, https://academy.nanoincub.com.br/wp-content/uploads/2019/08/plugin-light-box-wordpress-300x90.png 300w" sizes="(max-width: 555px) 100vw, 555px" /></a></p>
<p>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.</p>
<h3>Criando uma galeria de fotos e configurando o Efeito Lightbox</h3>
<p>Agora meu &#8220;pácero&#8221; vamos criar uma galeria de fotos simples utilizando o editor padrão do WordPress.</p>
<p>No seu editor clique em Adicionar mídia e siga o processo abaixo:</p>
<p><a href="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/cirar-galeria-fotos-wordpress.jpg"><img decoding="async" class="alignnone size-full wp-image-735" src="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/cirar-galeria-fotos-wordpress.jpg" alt="Criando galeria de fotos WordPress" width="1296" height="555" srcset="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/cirar-galeria-fotos-wordpress.jpg 1296w, https://academy.nanoincub.com.br/wp-content/uploads/2019/08/cirar-galeria-fotos-wordpress-300x128.jpg 300w, https://academy.nanoincub.com.br/wp-content/uploads/2019/08/cirar-galeria-fotos-wordpress-768x329.jpg 768w, https://academy.nanoincub.com.br/wp-content/uploads/2019/08/cirar-galeria-fotos-wordpress-1024x439.jpg 1024w" sizes="(max-width: 1296px) 100vw, 1296px" /></a></p>
<p>1 &#8211; Clique em adicionar galeria</p>
<p>2 &#8211; Selecione as imagens que você deseja inserir em sua galeria</p>
<p>3 &#8211; Clique em <strong>Criar uma nova galeria</strong></p>
<p>Nesse momento será mostrada a janela para configurarmos a galeria:</p>
<p><a href="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/configuracoes-galeria.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-736" src="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/configuracoes-galeria.jpg" alt="Configurações gerais da galeria de fotos" width="1072" height="333" srcset="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/configuracoes-galeria.jpg 1072w, https://academy.nanoincub.com.br/wp-content/uploads/2019/08/configuracoes-galeria-300x93.jpg 300w, https://academy.nanoincub.com.br/wp-content/uploads/2019/08/configuracoes-galeria-768x239.jpg 768w, https://academy.nanoincub.com.br/wp-content/uploads/2019/08/configuracoes-galeria-1024x318.jpg 1024w" sizes="auto, (max-width: 1072px) 100vw, 1072px" /></a></p>
<p>1 &#8211; Para o efeito funcionar perfeitamente o apontamento de TODAS as imagens do site devem estar para <strong>Arquivo de mídia</strong>, conforme mostrado na imagem acima;</p>
<p>2 &#8211; Defina a quantidade de itens por linha da sua galeria de fotos;</p>
<p>3 &#8211; Clique em <strong>inserir galeria </strong>e em seguida <strong>Salve </strong>sua página e vamos ver o resultado</p>
<p>Veja abaixo como ficou o efeito no meu projeto:</p>
<p><a href="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress.jpg"><img loading="lazy" decoding="async" class="alignnone size-full wp-image-737" src="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress.jpg" alt="Efeito lightbox nas imagens do site com WP Featherlight no WordPress" width="720" height="400" srcset="https://academy.nanoincub.com.br/wp-content/uploads/2019/08/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress.jpg 720w, https://academy.nanoincub.com.br/wp-content/uploads/2019/08/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress-300x167.jpg 300w" sizes="auto, (max-width: 720px) 100vw, 720px" /></a></p>
<p>&nbsp;</p>
<p>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!</p>
<p>Assista ao vídeo do processo no topo desse tutorial para fixar ainda mais o aprendizado.</p>
<p>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:</p>
<ul>
<li>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;</li>
<li>Se esse post foi útil para você, compartilhe com a comunidade para que possa ajudar outras pessoas também;</li>
<li>Quer me fazer chorar de alegria? Se inscreva no nosso canal no <a href="https://www.youtube.com/channel/UC2Fm1adGWF1edlbunksEWCg?sub_confirmation=1" target="_blank" rel="noopener">Youtube</a> ????</li>
<li>Espero que esse tutorial tenha te ajudado a ter mais clareza sobre o processo de criar redirecionamento de página no Contact Form 7</li>
</ul>
<p>O post <a href="https://academy.nanoincub.com.br/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress/">Efeito lightbox nas imagens do site com WP Featherlight no WordPress</a> apareceu primeiro em <a href="https://academy.nanoincub.com.br">Nano Academy</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://academy.nanoincub.com.br/efeito-lightbox-nas-imagens-do-site-com-wp-featherlight-no-wordpress/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
