O Bloco de Galeria Avançada permite incorporar facilmente galerias de imagens únicas ou múltiplas em suas páginas SeedProd. Este bloco oferece controle total sobre como suas imagens são apresentadas, com opções de colunas, espaçamento, sobreposições e efeitos interativos.
Se você está exibindo um portfólio, fotos de produtos, criando uma galeria de fotos ou destacando membros da equipe, o Bloco de Galeria Avançada oferece a flexibilidade e as opções de estilo necessárias para criar coleções de imagens visualmente impressionantes que engajam seus visitantes.
Adicionando o Bloco de Galeria Avançada às Suas Páginas
Siga estas etapas para adicionar um bloco de Galeria Avançada à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Galeria Avançada na seção desejada da sua página.
O bloco Galeria Avançada está localizado em Design > Avançado e pode ser arrastado para qualquer seção da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Após adicionar, clique no bloco Galeria Avançada para abrir suas configurações. Na aba Conteúdo, você pode adicionar imagens e configurar como sua galeria é exibida.
Imagens da Galeria:
- Tipo: Escolha entre o modo de exibição Único (uma imagem) ou Múltiplo (galeria de imagens)
- Imagem / Escolher Nova Imagem: Para o tipo Único, clique para selecionar uma imagem da sua biblioteca de mídia
- Adicionar Imagens da Galeria: Para o tipo Múltiplo, clique para selecionar várias imagens de uma vez para criar sua galeria. Você pode selecionar quantas imagens precisar
Selecione Único para exibir uma imagem, ou Múltiplo para criar uma galeria de várias imagens.
Clique em Adicionar Imagens da Galeria para selecionar várias imagens da sua biblioteca de mídia.
Configurações:
- Coluna: Defina o número de colunas na grade da sua galeria. Mais colunas criam um layout mais compacto, enquanto menos colunas dão mais destaque a cada imagem
- Espaçamento: Controle o espaço entre as imagens na sua galeria. Ajuste este valor para criar layouts mais compactos ou mais espaçados
- Link: Escolha para onde as imagens serão vinculadas quando clicadas. As opções incluem Nenhuma (sem link), Arquivo de Mídia (abre a imagem em tamanho real) ou URL Personalizado (vincula a uma página específica)
- Proporção: Selecione as proporções para suas imagens. As opções incluem 1:1 (quadrado), 3:2, 4:3, 9:16 (retrato), 16:9 (paisagem) e 21:9 (ultralargo). Isso garante que todas as imagens sejam exibidas de forma consistente
- Tamanho da Imagem: Escolha qual versão do tamanho de suas imagens exibir: Miniatura, Média ou Grande. Tamanhos maiores mostram mais detalhes, mas carregam mais lentamente
Sobreposição:
- Sobreposição de Fundo: Ative ou desative uma sobreposição de cor que aparece sobre suas imagens. Isso ajuda o texto e as informações a se destacarem
- Título: Escolha o que exibir como sobreposição de título nas imagens. As opções incluem Nenhuma, Título, Legenda, Texto Alt ou Descrição dos metadados da sua imagem
- Descrição: Escolha o que exibir como sobreposição de descrição. As opções incluem Nenhuma, Título, Legenda, Texto alternativo ou Descrição
- Cor do Texto: Defina a cor do texto da sobreposição para garantir bom contraste e legibilidade
- Cor de Fundo: Escolha a cor do fundo da sobreposição que aparece atrás do texto
- Tipografia do Cabeçalho: Personalize as propriedades da fonte para títulos da sobreposição, incluindo família da fonte, tamanho, peso e estilo
A seção Configurações permite personalizar colunas, espaçamento, links, proporção, tamanho da imagem e opções de sobreposição.
Etapa 3: Personalizar o Design
Na aba Avançado, você pode personalizar a aparência visual do seu bloco de Galeria Avançada:
Estilos:
- Sombra da Imagem: Adicione efeitos de sombra às suas imagens para dar profundidade. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, X Grande, 2X Grande ou Sombra de Queda Inferior
- Borda da Imagem: Habilite bordas ao redor das imagens da sua galeria
- Raio da Borda: Controle o arredondamento dos cantos das imagens. Valores mais altos criam cantos mais arredondados, enquanto zero cria cantos afiados
- Estilo da Borda: Escolha a aparência da borda: Sólida (linha contínua), Pontilhada (pequenos pontos) ou Tracejada (traços curtos)
- Cor da Borda: Selecione a cor para as bordas das suas imagens
- Largura da Borda: Defina a espessura individual da borda para cada lado (Superior, Direita, Inferior, Esquerda). Isso permite criar efeitos de borda exclusivos
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de galeria (Superior, Direita, Inferior, Esquerda). Isso determina quanto espaço aparece entre a galeria e os elementos circundantes
- Preenchimento: Ajuste o espaçamento interno do seu bloco de galeria (Superior, Direita, Inferior, Esquerda). Isso cria espaço entre o conteúdo da galeria e suas bordas
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de galeria. Este ID é criado automaticamente pelo SeedProd para estilização personalizada ou segmentação por JavaScript
- Classe Personalizada: Adicione classes CSS personalizadas para aplicar estilos específicos do seu tema ou CSS personalizado.
- Atributos Personalizados: Adicione quaisquer atributos HTML ao elemento wrapper da galeria. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor (por exemplo, data-galeria|portfólio)
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco de galeria em telas de desktop
- Ocultar no Tablet: Oculte o bloco de galeria em dispositivos tablet
- Ocultar no Celular: Oculte o bloco de galeria em dispositivos móveis
Efeitos de Animação:
- Animação de Entrada: Escolha entre vários efeitos de animação que são reproduzidos quando a galeria entra em foco. As opções incluem Bounce, Fade In, Zoom In, Rotate In e muitos outros. Isso adiciona interesse visual e chama a atenção para sua galeria
A aba Avançado oferece opções para sombras de imagem, bordas, espaçamento, atributos, visibilidade do dispositivo e efeitos de animação.
Etapa 4: Salve Suas Alterações
Depois de terminar de configurar o bloco Galeria Avançada e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Galeria Avançada à sua página! Este bloco poderoso permite que você exiba galerias de imagens únicas ou múltiplas com controle total sobre layout, estilo e efeitos interativos. Experimente diferentes layouts de colunas, proporções e estilos de sobreposição para criar uma galeria que combine perfeitamente com sua marca e envolva seu público.