O Bloco de Imagem permite adicionar imagens a qualquer página do SeedProd. Este bloco suporta o upload de imagens da sua biblioteca de mídia, a inserção de um URL direto ou o uso de imagens geradas por IA — oferecendo opções flexíveis para obter recursos visuais para suas páginas.
Além de simplesmente exibir uma imagem, o bloco inclui opções de link, controles de dimensionamento de imagem, estilo de borda, efeitos de sombra e rotação — tornando-o um elemento de imagem completo para qualquer layout.
Adicionando o Bloco de Imagem às Suas Páginas
Siga estas etapas para adicionar um bloco de Imagem à sua página SeedProd:
Etapa 1: Adicionar o Bloco
Em Design > Blocos, arraste e solte o bloco Imagem na seção desejada da sua página.
Etapa 2: Configurar as Definições de Conteúdo
Uma vez adicionado, clique no bloco de Imagem para abrir suas configurações. Na aba Conteúdo, configure a origem da imagem, tamanho, alinhamento e link.
Imagem:
- Imagem: Faça o upload ou selecione uma imagem da sua biblioteca de mídia do WordPress. O bloco também inclui uma opção de geração de imagem por IA para criar imagens usando OpenAI diretamente do editor.
- Origem da Imagem: Insira manualmente um URL direto de imagem ou use o controle de Tags Dinâmicas para puxar uma fonte de mídia dinâmica, como o valor de um campo personalizado.
- Texto Alternativo: Insira um texto alternativo descritivo para a imagem para melhorar a acessibilidade e o SEO.
- Tamanho da Imagem: Defina a largura e a altura da imagem em pixels (px) ou como uma porcentagem (%). Deixe qualquer um dos campos em branco para manter a proporção natural da imagem.
- Alinhamento: Defina o alinhamento horizontal da imagem dentro de sua seção — Esquerda, Centro ou Direita. Suporta valores por dispositivo para desktop, tablet e celular.
- Tipo de Link: Escolha como a imagem se comporta quando clicada — Link Personalizado abre um URL que você especifica, ou Mídia – Lightbox abre a imagem em tamanho real em um lightbox de sobreposição.
- Link: Insira o URL de destino para o link da imagem (visível quando Link Personalizado é selecionado). Clique no ícone de configurações para revelar opções de link adicionais.
- Abrir em Nova Janela: Marque esta opção para abrir o URL vinculado em uma nova aba do navegador.
- No Follow: Marque esta opção para adicionar um atributo
rel="nofollow"ao link, informando aos mecanismos de busca para não repassar a autoridade do link para o destino.
Etapa 3: Escolha um Modelo (Opcional)
A aba Modelos oferece uma seleção de predefinições de estilo de imagem pré-projetadas. Clique em qualquer miniatura de modelo para aplicar instantaneamente uma combinação de configurações de borda, sombra e estilo à sua imagem. Esta é uma maneira rápida de dar às suas imagens um visual polido e consistente sem configurar manualmente cada opção de estilo.
Etapa 4: Personalize o Design
Na aba Avançado, você pode personalizar a aparência visual e o espaçamento do seu bloco de Imagem.
Estilos:
- Ajuste do Objeto: Escolha como a imagem preenche seu contêiner quando uma altura é especificada — Preencher, Nenhum, Cobrir ou Conter. Esta opção aparece apenas quando um valor de altura é definido.
- Sombra: Adiciona uma sombra projetada atrás da imagem. Escolha entre Nenhuma, Fio, Pequena, Média, Grande, X Grande ou 2X Grande.
- Girar Imagem: Gire a imagem de 0 a 360 graus usando o controle deslizante.
- Borda da Imagem: Adiciona uma borda ao redor da imagem. Defina o Estilo da Borda (Sólida, Pontilhada ou Tracejada), Cor da Borda, Largura da Borda (Superior, Direita, Inferior, Esquerda independentemente) e Raio da Borda para arredondar os cantos — com uma escolha de unidades px ou %.
Espaçamento:
- Margem: Controle o espaçamento externo ao redor do seu bloco de Imagem (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: Ajuste o espaçamento interno dentro do seu bloco de Imagem (Superior, Direita, Inferior, Esquerda). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- ID CSS: Exibe o identificador exclusivo gerado automaticamente para o seu bloco de Imagem, 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: Oculta o bloco de Imagem em telas de desktop.
- Ocultar no Tablet: Oculta o bloco de Imagem em dispositivos tablet.
- Ocultar no Celular: Oculta o bloco de Imagem em dispositivos móveis.
Efeitos de Animação:
- Animação de Entrada: Escolha um efeito de animação que é reproduzido quando o bloco de Imagem entra na tela, como Bounce, Fade In, Zoom In, Rotate In e muitos outros.
Etapa 5: Salvar suas alterações
Depois de terminar de configurar o bloco de Imagem e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de Imagem à sua página! Imagens são um dos elementos mais impactantes em qualquer landing page — elas definem o tom, constroem confiança e direcionam a atenção. Use a aba Templates para predefinições de estilo rápidas, ou ajuste bordas, sombras e rotação na aba Avançado para criar exatamente o visual que você precisa.