Precisa criar galeria de imagens com guias em Elementor ?

Como sempre dizemos, Elementor é mais do que apenas um plugin de construtor de páginas. É um plugin versátil que pode substituir vários tipos de WordPress plugins de uma vez. Um dos plugins que podem ser substituídos por Elementor é o plugin da galeria de imagens.

Com Elementor, você não precisa instalar nenhum plugin adicional para crie uma galeria de imagens no seu site WordPress. Existem dois widgets oferecidos pelo Elementor para a criação de uma galeria de imagens: Galeria Básica e Galeria.

O widget Basic Gallery - disponível no Elementor Free - permite criar uma galeria de imagens básica, enquanto o widget Gallery permite criar uma galeria de imagens mais avançada, incluindo uma galeria de imagens com guias.

Isso é ótimo se você deseja criar uma galeria em um site de fotografia. Neste artigo, vamos mostrar como criar uma galeria de imagens com guias no Elementor.

Como criar uma galeria de imagens com guias no Elementor

O widget Galeria está disponível na versão pro do Elementor. Portanto, certifique-se de atualizar seu Elementor para a versão pro, se não tiver. Existem muitos benefícios que você obterá usando o Elementor Pro, incluindo a capacidade de criar um tema WordPress sem codificação.

Leia também: Como criar uma galeria de imagens com guias no Elementor

Neste exemplo, criaremos uma galeria de fotos de paisagem. As fotos estão divididas em três tipos: montanha, mar e cachoeira. Vamos criar três guias para abrigar cada tipo de paisagem, além de uma guia para exibir todas as fotos.

Para começar, crie uma nova página e edite-a com Elementor. Você também pode editar uma página existente. Adicione uma seção e arraste o widget da Galeria para ela.

Como criar uma galeria de imagens com guias no Elementor

Sob o bloco Configurações sob a guia Contente, defina a opção Formato defende Múltiplo.

Por padrão, sua galeria contém apenas uma guia. Para adicionar uma nova aba, basta clicar no botão ADICIONE UM ELEMENTO.

Veja também: Como criar uma barra de progresso gradiente no Elementor

Abra um dos itens (guias). Defina o rótulo da guia no campo Título. Clique no botão de adição para selecionar as imagens que deseja adicionar à guia.

Selecione as imagens da sua biblioteca de mídia do WordPress. Se você não tiver um, basta baixá-los. Clique no botão Crie uma nova galeria -> Inserir galeria para adicionar a galeria à guia.

Como criar uma galeria de imagens com guias no Elementor

Abra os outros itens (guias) e repita as etapas acima para definir o rótulo da guia e adicionar as imagens.

Personalize a galeria

Depois de adicionar imagens a cada guia, você pode personalizar sua galeria. No bloco Configurações você pode definir o layout, a altura da linha, o espaço entre as imagens e o tamanho da imagem. Também existe uma opção para ativar o recurso Lazy Load.

Abra o bloco Barra de Filtro para definir o rótulo da guia principal (a guia "Todos"), o ponteiro e a animação.

Abra o bloco Sobreposição para ativar a sobreposição. Você pode exibir o título e a descrição da imagem ao passar o mouse sobre uma imagem, definindo o título e a descrição.

Se você deseja exibir o título e a descrição ao passar o mouse, você precisa editar a imagem individual na galeria e adicionar o parâmetro que você definiu (texto alternativo, título, legenda ou descrição).

Abra a aba Style para personalizar sua galeria. Existem 4 blocos que você pode abrir: Imagem, Sobreposição, Conteúdo e Barra de Filtro.

Imagem

Este bloco permite que você defina a cor da borda da imagem, cor da borda de apontamento, largura da borda, raio da borda, filtro CSS e animação de apontamento.

Como criar uma galeria de imagens com guias no Elementor

Sobreposição

Este bloco permite que você defina a cor de sobreposição, cor de sobreposição de foco, modo de mesclagem e animação de foco.

Conteúdo

Este bloco permite que você personalize o conteúdo da imagem. Conteúdo refere-se ao título e à descrição da imagem. Você pode definir o alinhamento, a posição vertical, o preenchimento, a cor do texto e a tipografia (estilo da fonte, família da fonte e tamanho da fonte).

Barra de Filtro

Este bloco permite que você personalize o filtro. Você pode definir o alinhamento, a cor normal, a cor de apontamento, a cor ativa, a cor do texto, o espaço entre as guias e a tipografia.

Você pode manipular essas configurações até que esteja satisfeito com o resultado. Feito isso, clique no botão PUBLICAR / ATUALIZAR na parte inferior do painel esquerdo para publicar ou atualizar sua página.

Obtenha o Elementor Pro agora!

Conclusão

Aqui está ! É isso neste artigo que mostra como criar uma galeria de imagens com guias no Elementor. Se você tiver alguma dúvida sobre como chegar lá fdeixe-nos saber no Comentários.

No entanto, você também pode consultar nossos recursos, 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 ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.

...