O bloco Carrossel de imagens permite exibir uma apresentação de slides rotativa de imagens na 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 imagens e conteúdo de banner por slide com tipografia e efeitos de animação totalmente personalizáveis.
Adicionando o bloco Carrossel de imagens às suas páginas
Siga estas etapas para adicionar um bloco de carrossel de imagens à sua página SeedProd:
Passo 1: Adicione 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
Depois de adicionado, clique no bloco Carrossel de imagens para abrir suas configurações. A guia Conteúdo está 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 slides 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: Carregue ou selecione uma imagem da sua biblioteca de mídia do WordPress para este slide ou insira uma URL direta da imagem.
- Legenda: Insira o texto opcional da legenda que aparecerá abaixo da imagem quando as legendas estiverem ativadas.
- Mostrar texto do cabeçalho: ative para revelar os campos de texto do cabeçalho e subtítulo que são exibidos como uma sobreposição no slide.
- Cabeçalho: insira o texto do cabeçalho exibido na sobreposição do slide (visível quando a opção Mostrar texto do cabeçalho está ativada).
- Subtítulo: Insira o texto do subtítulo exibido abaixo do título na sobreposição do slide (visível quando a opção Mostrar texto do título está ativada).
- Botão Mostrar: 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 a opção Mostrar botão estiver ativada).
- Link do botão: insira a URL para a qual o botão direciona. Clique no ícone de configurações para revelar as opções Abrir em nova janela e Não seguir.
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 eles contrastem com suas imagens.
- Slides a exibir: defina quantos slides serão exibidos de uma 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 intervalo entre as transições de slides em segundos (visível quando a 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 os pontos de navegação.
- Cor da sobreposição de imagem: adicione uma sobreposição de cor sobre cada imagem do slide usando o seletor de cores.
- Opacidade da sobreposição de 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 carrossel:
- Posição vertical: defina a posição vertical do conteúdo do cabeçalho/botão sobreposto 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, Extragrande ou 2X Grande.
- Raio do botão do banner: defina o raio da borda do botão do banner de 0 a 100 px para controlar o arredondamento dos cantos.
- Alinhamento do texto do cabeçalho: defina o alinhamento horizontal do texto sobreposto do cabeçalho — Esquerda, Centro ou Direita. Suporta valores por dispositivo.
- Alinhamento do texto do subtítulo: defina o alinhamento horizontal do texto sobreposto do subtítulo — Esquerda, Centro ou Direita. Suporta valores por dispositivo.
- Alinhamento do botão do carrossel: defina o alinhamento horizontal do botão de sobreposição — Esquerda, Centro ou Direita. Suporta valores por dispositivo.
Etapa 3: Escolha um modelo (opcional)
A guia Modelos oferece predefinições de estilo pré-concebidas 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: Personalizar o design
Na guia Avançado, você pode personalizar a tipografia, o estilo da imagem e o espaçamento do seu bloco Carrossel de imagens.
Estilos:
- Tipografia da legenda: ajuste a família de fontes, a espessura, o tamanho, a altura da linha, o espaçamento entre letras e a transformação do texto da legenda. Suporta valores por dispositivo.
- Cor da legenda: defina a cor do texto das legendas.
- Tipografia do cabeçalho do banner: ajuste as configurações da fonte para o texto do cabeçalho sobreposto ao slide.
- Cor do cabeçalho do banner: defina a cor do texto para o cabeçalho da sobreposição do slide.
- Tipografia do subtítulo do banner: ajuste as configurações da fonte para o texto do subtítulo da sobreposição do slide.
- Cor do subtítulo do banner: defina a cor do texto para o subtítulo da sobreposição do slide.
- Tipografia do botão do banner: ajuste as configurações da fonte para o texto do botão de sobreposição do slide.
Estilos de imagem do controle deslizante:
- Sombra: Adicione uma sombra projetada a cada imagem do slide. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande ou 2X Grande.
- Borda da imagem: adicione uma borda ao redor de cada imagem do slide, com o controle Raio da borda para arredondar os cantos.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco Carrossel de imagens (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: ajuste o espaçamento interno do seu bloco Carrossel de imagens (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- CSS ID: Exibe o identificador exclusivo gerado automaticamente para o seu bloco Image Carousel, 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 do bloco. Insira cada atributo em uma nova linha usando o formato: nome-do-atributo|valor.
Visibilidade do dispositivo:
- Ocultar na área de trabalho: oculte o bloco Carrossel de imagens nas telas da área de trabalho.
- Ocultar no tablet: oculte o bloco Carrossel de imagens em dispositivos tablet.
- Ocultar no celular: oculte o bloco Carrossel de imagens em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha um efeito de animação para quando o bloco do carrossel for exibido.
- Efeitos de animação do cabeçalho: escolha uma animação para o texto do cabeçalho sobreposto ao slide à medida que cada slide aparece.
- Efeitos de animação do subtítulo: escolha uma animação para o texto do subtítulo sobreposto ao slide.
- Efeitos de animação do botão: escolha uma animação para o botão de sobreposição do slide.
Etapa 5: Salve 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! Os carrosséis são uma ótima maneira de exibir várias imagens em um formato compacto e envolvente. Use as configurações do banner para adicionar texto sobreposto e chamadas para ação em cada slide ou mantenha-o simples como uma galeria de imagens limpa. Experimente velocidades de reprodução automática, estilos de navegação e sobreposições de imagens para criar um carrossel que se adapte perfeitamente à sua página.