Adicionando Lightbox ao site WordPress: Guia definitivo para iniciantes

Lightbox é um dos muitos recursos interessantes e populares para um site baseado em imagens. Mas nem todo mundo sabe como adicionar lightbox a um site WordPress, especialmente um iniciante. Portanto, trazemos este guia para iniciantes para ajudá-los a adicionar lightbox a sites WordPress.

O que é Lightbox e como adicioná-lo?

Lightbox é uma galeria de imagens modal que exibe sua imagem e vídeo criando um pop-up em tela inteira e escurecendo o resto da página . Por exemplo:

Este efeito bonito e sofisticado é extremamente útil para um portfólio, fotografia ou qualquer site baseado em imagens. Ele permite que você visualize a imagem com clareza e torna seu site mais notável .

Normalmente, existem 3 maneiras de ter uma mesa de luz para um site WordPress:

• Adicionando shortcode
• Instalando um plugin
• Usando um tema compatível com lightbox.

Para iniciantes, sugerimos que você deve usar um plugin ou encontrar um tema com esse recurso pronto em mente, porque adicionar shortcode é apenas para usuários avançados.

Exibir Lightbox se o seu tema for compatível

Não há nada a dizer se o seu tema já exibe a mesa de luz para galeria / imagens. Mas sabemos que muitos temas precisam de mais alguns passos para mostrá-los. Por exemplo, este tema ePortfolio suportava lightbox, mas você precisa vincular a galeria ao arquivo de mídia para mostrar a lightbox.

Normalmente, existem duas opções: link para arquivo de mídia ou página de anexo . Quando você vincula imagem / galeria a uma página de anexo, uma nova página separada contendo apenas a imagem será aberta quando você clicar na imagem. Se você criar um link para um arquivo de mídia, ele mostrará apenas a imagem, não a página, assim:

Aqui está o guia para fazer isso.

Primeiro, vá para o Editor de postagem e clique na galeria.

Se você usar o Editor de Gutenberg, olhe para a barra lateral direita, você verá a seção Link para .

Para uma única imagem, você deve clicar neste ícone na barra de ferramentas:

Enquanto no Editor Clássico, a seção Link para aparece quando você cria ou edita uma galeria e uma única imagem.

Em seguida, escolha Arquivo de mídia e clique em Inserir galeria para finalizar. Ao atualizar ou publicar o post, clique nesse galeria / imagem, você vai ver que a mesa de luz está em execução.

Se o seu tema suporta lightbox, esta ação pode habilitar a lightbox para a galeria / imagem que você deseja. Caso contrário, não haverá nenhuma mesa de luz.

No entanto, a configuração pode ser diferente com temas diferentes. Por exemplo, alguns podem exigir que você trabalhe no Customizador, alguns podem exigir que você insira um link para a página de anexo em vez do arquivo de mídia. Portanto, você deve verificar o tema com atenção .

Qualquer que seja o tema que você use, ainda é necessário saber como vincular uma galeria / imagem a um arquivo de mídia, pois será útil adicionar um lightbox usando um plugin abaixo.

Adicionando Lightbox usando um plug-in

Na verdade, adicionar uma mesa de luz não é nem um pouco difícil. Ao pesquisar a palavra-chave “plugin lightbox”, você verá uma série de plug-ins para este efeito. No que diz respeito à nossa pesquisa, classificamos os plug-ins em dois tipos: os plug-ins complicados e os plug-ins simples para adicionar lightbox.

Quanto aos plug-ins complicados, existem opções muito mais sofisticadas para personalizar altamente o lightbox, como tamanho da imagem, cor da borda, estilos de lightbox, ... Por exemplo, o Responsive Lightbox & Gallery e FooBox Image Lightbox têm mais ferramentas de personalização. Mas é mais difícil de usar se você for um iniciante. Além disso, o resultado não é tão diferente de um simples plugin. É por isso que preferimos usar um plugin simples como o Simple Lightbox .

Este plugin é fácil de usar, bastante popular com mais de 200.000 instalações ativas e classificado com 160 cinco estrelas. Além disso, o design do lightbox é bom.

Etapa 1: instalar e ativar o plugin Simple Lightbox

Em seu Dashboard> Plugin> Add New , você só precisa digitar “lightbox simples” e clicar em Instalar o plugin, e então ativá- lo.

Etapa 2: configurar o plugin Simple Lightbox

Em Plug - in> Plug-ins instalados , clique em Configuração na guia Lightbox simples .

Guia de ativação da configuração de Lightbox simples

A guia Ativação permite habilitar / desabilitar alguns parâmetros. A caixa mais importante que você deve marcar é Habilitar Funcionalidade do Lightbox , que habilita o lightbox para sua galeria. Se você não escolher esta caixa, as outras seções não terão sentido.

O resto das caixas são opcionais para você. Você pode marcar para exibir a mesa de luz em sua página inicial, postagens individuais, páginas, páginas de arquivo, widgets e menus.

Certifique-se de que deseja realmente uma mesa de luz para as seções corretas, pois muitas mesas de luz podem tornar seu site um pouco chamativo.

Guia de agrupamento da configuração de Lightbox simples

Rolando para baixo, há a guia Agrupamento . Ele decidirá como você exibe a lightbox na forma de um controle deslizante ou de uma única imagem.

Itens do grupo: marque para exibir sua imagem / galeria como um controle deslizante, o que permite que você navegue de uma para a próxima imagem. Somente quando você ativa este recurso, as outras seções desta guia podem ter efeito. Caso contrário, outras seções de agrupamento não funcionam.

Agrupar itens por postagem: ao marcar esta caixa, você agrupa todos os itens de uma única postagem a um controle deslizante de lightbox . Faça isso quando quiser agrupar apenas as imagens / galerias dentro de uma postagem e excluir outras imagens / galerias de outras postagens, widgets e menus.

Agrupar itens da galeria separadamente, Agrupar itens de widget separadamente e Agrupar itens de menu separadamente: marque cada um deles para agrupar itens em uma galeria de uma única postagem, itens em um widget ou itens de menu, respectivamente . Isso significa que você só pode navegar para os próximos itens na mesma galeria, widget ou menu no controle deslizante do lightbox. Achamos que você deve fazer isso quando não quiser bagunçar lightboxes em diferentes partes, o que pode confundir seus visitantes.

Guia da interface do usuário da configuração de caixa de luz simples

A guia da IU possui seções para modificar o estilo do lightbox. Preste atenção a isso se quiser personalizar sua exibição lightbox.

Tema: Existem 2 estilos para a sua mesa de luz. Basta escolher aquele que se adapta ao seu gosto.

Estilo escuro

Estilo leve

Redimensione o lightbox para caber na janela: recomendo ativar esta seção para ter uma boa exibição. Caso contrário, a imagem é em tela cheia e você não pode ver a imagem inteira assim.

Habilitar animações: marque para habilitar o efeito de carregamento.

Desmarque para desativar o efeito, tornando a navegação mais rápida.

Iniciar apresentação de slides automaticamente: deixe-o passar para a próxima imagem automaticamente ao ativar esta seção.

Duração do slide: se você ativar a seção de apresentação de slides automática acima, poderá escolher a duração do slide aqui.

Percorrer os itens: deseja repetir os itens após uma rodada de um slide? Se sim, clique nesta caixa.

Opacidade da sobreposição (0 - 1): Você pode modificar a opacidade da sobreposição do plano de fundo. Quanto mais baixa for a opacidade, mais claro você poderá ver a postagem que está atrás. Por exemplo, definimos a opacidade como 0,1 para que o fundo possa ser visto com bastante clareza.

Habilitar título padrão: você pode escolher exibir o título da imagem clicando nesta caixa. Aqui está como o título é mostrado.

Guia de etiqueta do Lightbox simples

Finalmente, esta guia permitirá que você altere o rótulo de cada botão. Mas essas seções não têm efeito a menos que você adicione um código de acesso ao editar o tema. Portanto, neste tutorial para iniciantes, você não precisa lidar com esta guia.

Quando tiver concluído todas as configurações do plugin Simple Lightbox, clique em Salvar alterações na guia Rótulo .

Etapa 3: vincular imagens / galeria ao arquivo de mídia para exibir o Lightbox

Para decidir qual imagem / galeria adicionar lightbox, você deve inserir o link do arquivo de mídia para essa imagem / galeria. Se você não adicionar um link para o arquivo de mídia, o lightbox não poderá ser mostrado.

Basta seguir o guia que mencionamos na seção “Exibir caixa de luz se o seu tema for compatível”. Veja, dissemos que você definitivamente deve saber como fazer se quiser usar o plugin Simple Lightbox.

As últimas palavras

Acima estão a maneira mais fácil de adicionar lightbox ao seu site WordPress. Especialmente se você for um iniciante, usar o plugin Simple Lightbox é uma maneira simples e eficaz. Dependendo da sua demanda, do seu site e da sua estética, você pode escolher diferentes plugins de lightbox para ter o resultado mais desejável. Ou você pode escolher encontrar um tema WordPress que suporte lightbox e configurá-lo para exibir esse efeito.

Se você quiser mais instruções sobre plug-ins de lightbox complicados, deixe um comentário abaixo e continue nos seguindo.