O bloco Galeria Avançada permite incorporar facilmente galerias de imagens únicas ou múltiplas nas suas páginas SeedProd. Este bloco oferece controle total sobre a forma como as suas imagens são apresentadas, com opções para colunas, espaçamento, sobreposições e efeitos interativos.
Quer você esteja apresentando um portfólio, exibindo fotos de produtos, criando uma galeria de fotos ou destacando membros da equipe, o bloco Galeria avançada oferece a flexibilidade e as opções de estilo necessárias para criar coleções de imagens visualmente impressionantes que envolvem seus visitantes.
Adicionando o bloco Galeria avançada às suas páginas
Siga estas etapas para adicionar um bloco Galeria Avançada à sua página SeedProd:
Passo 1: Adicione 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
Depois de adicioná-lo, clique no bloco Galeria avançada para abrir suas configurações. Na guia Conteúdo, você pode adicionar imagens e configurar como sua galeria será 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 à 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 com 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 em sua galeria. Ajuste este valor para criar layouts mais compactos ou mais espaçosos.
- Link: Escolha para onde as imagens serão direcionadas quando clicadas. As opções incluem Nenhum (sem link), Arquivo de mídia (abre a imagem em tamanho real) ou URL personalizado (direciona para uma página específica).
- Proporção da imagem: 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 (ultra-wide). Isso garante que todas as imagens sejam exibidas de forma consistente.
- Tamanho da imagem: escolha qual versão de tamanho das suas imagens exibir: miniatura, médio ou grande. Tamanhos maiores mostram mais detalhes, mas carregam mais lentamente.
Sobreposição:
- Sobreposição de fundo: alterne para ativar ou desativar 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 Nenhum, Título, Legenda, Texto alternativo ou Descrição a partir dos metadados da 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 sobreposto para garantir um 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 sobrepostos, incluindo família, tamanho, espessura e estilo da fonte.
A seção Configurações permite personalizar colunas, espaçamento, links, proporção da imagem, tamanho da imagem e opções de sobreposição.
Etapa 3: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual do seu bloco 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, Extragrande, 2X Grande ou Sombra inferior.
- Borda da imagem: ative as bordas ao redor das imagens da sua galeria
- Raio da borda: controla a curvatura dos cantos da imagem. 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 das bordas da sua imagem
- Largura da borda: defina a espessura individual da borda para cada lado (superior, direito, inferior, esquerdo). Isso permite criar efeitos de borda exclusivos.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco de galeria (superior, direito, inferior, esquerdo). Isso determina quanto espaço aparece entre a galeria e os elementos ao redor.
- Preenchimento: ajuste o espaçamento interno do seu bloco de galeria (superior, direito, inferior, esquerdo). Isso cria um 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. Esse ID é criado automaticamente pelo SeedProd para personalização de estilo ou segmentação 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-gallery|portfolio)
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculte o bloco da galeria nas telas da área de trabalho
- Ocultar no tablet: Oculta o bloco da galeria em dispositivos tablet.
- Ocultar no celular: Oculte o bloco da 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 é exibida. As opções incluem Saltar, Aparecer gradualmente, Ampliar, Girar e muitas outras. Isso adiciona interesse visual e chama a atenção para sua galeria.
A guia Avançado oferece opções para sombras, bordas, espaçamento, atributos, visibilidade do dispositivo e efeitos de animação das imagens.
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 Galeria Avançada à sua página! Este poderoso bloco permite exibir galerias de imagens únicas ou múltiplas com controle total sobre o 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.