O bloco Carrossel de Imagens permite exibir uma apresentação de slides rotativa de imagens em sua página SeedProd. Cada slide suporta uma legenda opcional, texto de cabeçalho, subcabeçalho e um botão de call-to-action — tornando-o um bloco flexível para galerias de fotos, vitrines de imagens em destaque e seções hero no estilo banner.
O carrossel suporta reprodução automática, setas de navegação, exibição em lightbox, sobreposições de imagem e conteúdo de banner por slide com tipografia totalmente personalizável e efeitos de animação.
Adicionando o Bloco de Carrossel de Imagens às Suas Páginas
Siga estas etapas para adicionar um bloco de Carrossel de Imagens à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Carrossel de Imagens na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco Carrossel de Imagens para abrir suas configurações. A aba Conteúdo é organizada em duas seções: Imagens do Carrossel e Configurações do Carrossel.
Imagens do Carrossel:
Esta seção lista todos os slides do seu carrossel. Clique em uma linha de slide para expandir suas configurações individuais, ou arraste os slides para reordená-los. Você também pode duplicar ou excluir qualquer slide usando os ícones que aparecem ao passar o mouse.
- Imagem: Faça upload ou selecione uma imagem da sua biblioteca de mídia do WordPress para este slide, ou insira um URL de imagem direto.
- Legenda: Insira um texto de legenda opcional que aparece abaixo da imagem quando as legendas estão ativadas.
- Mostrar Texto de Cabeçalho: Ative para revelar os campos de texto de cabeçalho e subcabeçalho que são exibidos como uma sobreposição no slide.
- Cabeçalho: Insira o texto do título exibido na sobreposição do slide (visível quando Mostrar Texto de Cabeçalho está ativado).
- Subcabeçalho: Insira o texto do subtítulo exibido abaixo do cabeçalho na sobreposição do slide (visível quando Mostrar Texto de Cabeçalho está ativado).
- Mostrar Botão: Ative para adicionar um botão de call-to-action na sobreposição do slide.
- Texto do Botão: Insira o rótulo do botão (visível quando Mostrar Botão está ativado).
- Link do Botão: Insira o URL para o qual o botão se vincula. Clique no ícone de configurações para revelar as opções Abrir em Nova Janela e No Follow.
Clique em + Adicionar Imagens na parte inferior da lista para adicionar um novo slide ao seu carrossel.
Configurações do Carrossel:
- Modo de Cor da Navegação: Escolha a cor das setas e pontos de navegação — Escuro ou Claro — para garantir que contrastem com suas imagens.
- Slides a Mostrar: Defina quantos slides são visíveis por vez — de 1 a 6.
- Reprodução Automática: Ative ou desative a reprodução automática para controlar se os slides avançam automaticamente.
- Velocidade de Reprodução Automática: Defina o atraso entre as transições de slides em segundos (visível quando Reprodução Automática está ativada).
- Mostrar Legenda: Ative para exibir o texto da legenda abaixo de cada slide.
- Mostrar Navegação: Ative ou desative as setas e pontos de navegação.
- Cor de Sobreposição da Imagem: Adicione uma cor de sobreposição sobre cada imagem do slide usando o seletor de cores.
- Opacidade da Sobreposição da Imagem: Defina a opacidade da sobreposição de 0 (transparente) a 1 (totalmente opaco).
- Alinhamento da Legenda: Defina o alinhamento horizontal do texto da legenda — Esquerda, Centro ou Direita.
Configurações do Banner do Carrossel:
- Posição Vertical: Defina a posição vertical do conteúdo do cabeçalho/botão de sobreposição no slide como uma porcentagem de 0 a 100.
- Posição Horizontal: Defina a posição horizontal do conteúdo da sobreposição como uma porcentagem de 0 a 100.
- Cor do Botão do Banner: Defina a cor de fundo do botão de call-to-action em cada slide.
- Tamanho do Botão: Escolha o tamanho do botão do banner — Pequeno, Médio, Grande, X Grande ou 2X Grande.
- Raio do Botão do Banner: Defina o raio da borda do botão do banner de 0 a 100px para controlar o arredondamento dos cantos.
- Alinhamento do Texto do Cabeçalho: Defina o alinhamento horizontal do texto do cabeçalho da sobreposição — Esquerda, Centro ou Direita. Suporta valores por dispositivo.
- Alinhamento do Texto do Subcabeçalho: Defina o alinhamento horizontal do texto do subcabeçalho da sobreposição — Esquerda, Centro ou Direita. Suporta valores por dispositivo.
- Alinhamento do Botão do Carrossel: Defina o alinhamento horizontal do botão da sobreposição — Esquerda, Centro ou Direita. Suporta valores por dispositivo.
Etapa 3: Escolha um Modelo (Opcional)
A aba Modelos oferece predefinições de estilo pré-projetadas para o seu carrossel. Clique em qualquer miniatura de modelo para aplicar instantaneamente uma combinação de estilo de borda, sombra e imagem a todos os slides do seu carrossel.
Etapa 4: Personalize o Design
Na aba Avançado, você pode personalizar a tipografia, o estilo da imagem e o espaçamento do seu bloco de Carrossel de Imagens.
Estilos:
- Tipografia da Legenda: Ajuste a família da fonte, peso, tamanho, altura da linha, espaçamento entre letras e transformação de texto da legenda. Suporta valores por dispositivo.
- Cor da Legenda: Defina a cor do texto para as legendas.
- Tipografia do Cabeçalho do Banner: Ajuste as configurações de fonte para o texto do cabeçalho da sobreposição do slide.
- Cor do Cabeçalho do Banner: Defina a cor do texto para o cabeçalho da sobreposição do slide.
- Tipografia do Subcabeçalho do Banner: Ajuste as configurações de fonte para o texto do subcabeçalho da sobreposição do slide.
- Cor do Subcabeçalho do Banner: Defina a cor do texto para o subcabeçalho da sobreposição do slide.
- Tipografia do Botão do Banner: Ajuste as configurações de fonte para o texto do botão da sobreposição do slide.
Estilos de Imagem do Slider:
- Sombra: Adicione uma sombra projetada a cada imagem do slide. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, X Grande ou 2X Grande.
- Borda da Imagem: Adicione uma borda ao redor de cada imagem do slide, com controle de Raio da Borda para arredondar os cantos.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Carrossel de Imagens (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
- Espaçamento interno: Ajuste o espaçamento interno do seu bloco Carrossel de Imagens (Superior, Direito, Inferior, Esquerdo). Suporta valores por dispositivo para desktop, tablet e mobile.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Carrossel de Imagens, criado automaticamente pelo SeedProd para estilização personalizada ou segmentação de 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 do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do Dispositivo:
- Ocultar no Desktop: Oculte o bloco Carrossel de Imagens em telas de desktop.
- Ocultar no Tablet: Oculte o bloco Carrossel de Imagens em dispositivos tablet.
- Ocultar no Mobile: Oculte o bloco Carrossel de Imagens em dispositivos mobile.
Efeitos de Animação:
- Animação de Entrada: Escolha um efeito de animação para quando o bloco carrossel rolar para a visualização.
- Efeitos de Animação do Cabeçalho: Escolha uma animação para o texto do cabeçalho da sobreposição do slide à medida que cada slide aparece.
- Efeitos de Animação do Subcabeçalho: Escolha uma animação para o texto do subcabeçalho da sobreposição do slide.
- Efeitos de Animação do Botão: Escolha uma animação para o botão da sobreposição do slide.
Etapa 5: Salvar suas alterações
Depois de terminar de configurar o bloco Carrossel de Imagens e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco Carrossel de Imagens à sua página! Carrosséis são uma ótima maneira de exibir várias imagens em um formato compacto e envolvente. Use as configurações de banner para adicionar texto de sobreposição e chamadas para ação em cada slide, ou mantenha-o simples como uma galeria de imagens limpa. Experimente com velocidades de reprodução automática, estilos de navegação e sobreposições de imagem para criar um carrossel que se ajuste perfeitamente à sua página.