Ir para o conteúdo principal

Tutorial Divi: Como usar o módulo Galeria de Imagens

Divi: o tema WordPress mais fácil de usar

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

Compartilhar uma coleção de imagens no Divi é sempre uma ótima maneira de envolver visualmente os usuários em seu conteúdo. O módulo Divi Gallery permite criar e organizar galerias em qualquer lugar do seu site. O módulo de galeria no Divi Builder está disponível em formato de grade e slider e suporta grandes galerias com paginação.

exemplo da galeria divi.png

Como adicionar um módulo de galeria à sua página

Antes de adicionar um módulo de galeria à sua página, você deve primeiro entrar no Divi Builder. Quando o tema Divi estiver instalado no seu site, você notará um botão Use o Divi Builder acima do editor sempre que você criar uma nova página. Clique neste botão para ativar o Divi Builder e acessar todos os módulos do Divi Builder. Então clique no botão Use o Visual Builder para iniciar o gerador no modo visual. Você também pode clicar no botão Use o Visual Builder quando você navega no seu site em primeiro plano, se estiver conectado ao seu painel do WordPress.

construtor divi

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página. Novos módulos só podem ser adicionados dentro das linhas. Se você iniciar uma nova página, não se esqueça de adicionar uma linha à sua página primeiro. Temos ótimos tutoriais sobre como usar os elementos de linhas e para seções de Divi.

galeria de fotos divi.png

Localize o módulo da galeria na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra "galeria", depois clicar em entrar para pesquisar e adicionar automaticamente o módulo da galeria! Depois que o módulo for adicionado, você será saudado pela lista de opções do módulo. Essas opções são separadas em três grupos principais: Conteúdo , Projeto et avançado .

Exemplo de caso de uso: Adicionando uma galeria de imagens de largura total para apresentar a fotografia.

Adicionar uma galeria à sua página de fotos é uma ótima maneira de promover seu trabalho e aumentar sua credibilidade junto aos clientes. Neste exemplo, mostrarei como você pode usar o módulo da galeria para adicionar uma galeria de imagens com um layout de grade que execute a largura total da página. As imagens não têm espaço entre elas, o que lhe dá uma apresentação prática e estética.

criando uma galeria de imagens divi.jpg

E não podemos esquecer que cada imagem abre um pop-up para percorrer as versões maiores das imagens na galeria.

lightbox divi gallery.gif

Usando o Visual Builder, adicione uma nova seção na seção de cabeçalho com uma linha de largura total ou largura total (coluna 1). Em seguida, adicione o módulo da galeria à linha.

Atualize as configurações do módulo Gallery da seguinte forma:

Opções de conteúdo

Imagens da galeria: clique na galeria atualizada e selecione as imagens que você deseja incluir na galeria. Número de imagens: 12 Mostrar título e legenda: NO Mostrar paginação: NÃO

Opções de design

Layout: Orientação da Miniatura da Grade: Paisagem Ícone do Zoom Cor: #ffffff Cor da sobreposição da rolagem: rgba (0,0,0,0.48) Seletor de ícone de focalização: padrão

divi wordpress tutorial content section.png

Salvar configurações

Agora tudo o que resta é se livrar de todo o espaço ao redor das imagens. Volte e selecione os parâmetros de linha. Na guia Design, atualize os seguintes itens:

Faça a largura total desta linha: SIM
Use a largura da medianiz personalizada: SIM
Largura da calha: 1

É importante lembrar que o valor numérico "1" para a largura da medianiz é realmente zero (sem largura).

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 600.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

configuração da lacuna do goutière.png

Salvar configurações

Isso é tudo!

Opções de conteúdo do módulo Galeria

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nesta aba.

módulo divi galery content.png

Fotos da galeria

Clique no botão dia a galeria para iniciar a biblioteca multimídia WordPress, onde você pode escolher as imagens que deseja exibir em sua galeria.

Número de imagens

Definir o número de imagens a serem exibidas por página. Quando mais imagens do que permitido em cada página são incluídas na sua galeria, a paginação aparecerá sob as imagens.

Mostrar título e legenda:

Se um título ou legenda de imagem foi adicionado, eles aparecerão sob a imagem na galeria. Se você quiser desativar esses elementos de texto, poderá fazer isso usando essa opção.

Visualizar paginação

Quando mais imagens do que permitido em cada página são incluídas na sua galeria, a paginação aparecerá sob as imagens. Se você quiser excluir a paginação, poderá desabilitar essa configuração.

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Quando você usa a exibição WireFrame no Visual Builder, esses rótulos aparecem no bloco do módulo da interface do Divi Builder.

Opções de design do módulo de galeria

Na guia Design, você encontrará todas as opções de estilo do módulo, como fontes, cores, tamanho e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi possui uma longa lista de parâmetros de design que você pode usar para alterar qualquer coisa.

galeria module zone design.png

Provisão

Por padrão, as galerias são exibidas como uma grade de imagens. Você também pode optar por exibir sua galeria como um controle deslizante de imagem.

Orientação de miniaturas

Você pode optar por ter as fotos da sua galeria no formato retrato ou paisagem. Se você alternar os modos, talvez seja necessário regenere suas miniaturas .

Ícone de cor de zoom

Quando você passa o mouse sobre um item no módulo Galeria, um ícone de sobreposição é exibido. Você pode ajustar a cor usada neste ícone usando o seletor de cores nessa configuração.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [FREE]

Sobreposição de sobreposição de cores (Hover)

Quando você passa o mouse sobre um item no módulo Galeria, uma cor de sobreposição aparece na parte superior da imagem e sob o ícone de texto e título do portfólio. Por padrão, uma cor branca semitransparente é usada. Se você quiser usar uma cor diferente, poderá ajustar a cor usando o seletor de cores nessa configuração

Ícone de seletor de sobrevoo (focalizar)

Aqui, você pode escolher um ícone personalizado para exibir quando um visitante passa por cima dos itens da galeria no módulo.

Cor do texto

Aqui você pode escolher se o texto deve ser claro ou escuro. Se você estiver trabalhando em um fundo escuro, seu texto deve estar claro. Se seu plano de fundo estiver claro, seu texto deve estar escuro.

Fonte de título

Você pode alterar a fonte do texto do título selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte do título

Aqui você pode ajustar o tamanho do texto do seu título. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Título da cor do texto

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto do título, escolha a cor desejada no seletor de cores usando essa opção.

Espaçamento das letras do título

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto do título, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha do título

A altura da linha afeta o espaço entre cada linha do texto do título Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada localizado à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Fonte da legenda

Você pode alterar a fonte do texto da legenda selecionando a fonte desejada no menu suspenso. Divi vem com dezenas de grandes fontes alimentadas pelo Google Fonts. Por padrão, o Divi usa a fonte Open Sans para todo o texto da sua página. Você também pode personalizar o estilo do seu texto usando as opções negrito, itálico, maiúsculas e sublinhadas.

Tamanho da fonte da legenda

Aqui você pode ajustar o tamanho do texto da sua legenda. Você pode arrastar o controle deslizante de intervalo para aumentar ou diminuir o tamanho do texto ou inserir o valor do tamanho de texto desejado diretamente no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Cor do texto da legenda

Por padrão, todas as cores de texto Divi aparecem em branco ou cinza escuro. Se você quiser alterar a cor do texto da legenda, escolha a cor desejada no seletor de cores usando essa opção.

espaçamento de letras legendas divi.png

Espaçamento das letras da legenda

O espaçamento das letras afeta o espaço entre cada letra. Se você quiser aumentar o espaço entre cada letra no texto da legenda, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do controle deslizante. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Altura da linha da legenda

A altura da linha afeta o espaço entre cada linha do texto da legenda Se você quiser aumentar o espaço entre cada linha, use o controle deslizante de intervalo para ajustar o espaço ou insira o tamanho de espaçamento desejado no campo de entrada à direita do cursor. Os campos de entrada suportam diferentes unidades de medida, o que significa que você pode inserir "px" ou "em" dependendo do valor do seu tamanho para alterar seu tipo de unidade.

Use a fronteira

Ativar esta opção colocará uma borda ao redor do seu módulo. Essa borda pode ser personalizada usando os seguintes parâmetros condicionais.

Cor da fronteira

Esta opção afeta a cor da sua borda. Selecione uma cor personalizada no seletor de cores para aplicá-la à sua borda.

Largura da fronteira

Por padrão, as bordas têm uma largura de 1 pixel. Você pode aumentar esse valor arrastando o controle deslizante de intervalo ou inserindo um valor personalizado no campo de entrada à direita do controle deslizante. Unidades de medida personalizadas suportadas, o que significa que você pode alterar a unidade padrão de "px" para outra coisa, como em, vh, vw etc.

Estilo da Borda

Bordas suportam oito estilos diferentes: sólido, pontilhado, pontilhado, duplo, groove, crista, inlay e start. Selecione o estilo desejado no menu suspenso para aplicá-lo à sua borda.

Opções avançadas de módulo de galeria

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a um dos muitos elementos do módulo. Você também pode aplicar classes personalizadas e IDs CSS ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css de seu tema filho.

opção antecipada do módulo de galeria divi.png

ID CSS

Digite um identificador CSS opcional para usar neste módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite as classes CSS opcionais para usar neste módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes, separadas por um espaço. Essas classes podem ser usadas em seu tema filho Divi ou na folha de estilo CSS personalizada que você adiciona à sua página ou site usando as opções de tema Divi ou as configurações da página Divi Builder.

CSS personalizado

O CSS personalizado também pode ser aplicado ao módulo e a um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual é possível adicionar folhas de estilo CSS personalizadas diretamente a cada elemento. As entradas CSS nesses parâmetros já estão agrupadas nas tags de estilo. Então, basta inserir regras CSS separadas por ponto e vírgula.

visibilidade

Esta opção permite controlar os dispositivos nos quais seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou desktops individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Outros tutoriais Divi

Este artigo contém comentários 2
  1. Olá, acho seus artigos muito interessantes.
    Eu criei uma galeria sob Divi seguindo seu conselho e tudo funciona bem, exceto que eu não sei como remover o botão direito do mouse para evitar a gravação sob minhas imagens. Você tem a solução, obrigado antecipadamente. cordialmente

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

Cool WordPress temas que eu encontrei em
E há mais temas e modelos 50 000 para você escolher!

De volta ao topo
9 ações
ação4
chilrear1
Enregistrer4
Whatsapp