O bloco 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 uma URL direta 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 tamanho da imagem, estilos 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:
Passo 1: Adicione 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
Depois de adicionar, clique no bloco Imagem para abrir suas configurações. Na guia Conteúdo, configure a fonte, o tamanho, o alinhamento e o link da imagem.
Imagem:
- Imagem: Carregue ou selecione uma imagem da sua biblioteca de mídia do WordPress. O bloco também inclui uma opção de geração de imagens por IA para criar imagens usando o OpenAI diretamente do editor.
- Fonte da imagem: insira manualmente uma URL direta da imagem ou use o controle Tags dinâmicas para inserir uma fonte de mídia dinâmica, como um valor de 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 em porcentagem (%). Deixe 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 comportará quando clicada — Link personalizado abre um URL especificado por você, ou Mídia – Lightbox abre a imagem em tamanho real em uma caixa de luz sobreposta.
- Link: insira o URL de destino para o link da imagem (visível quando a opção Link personalizado estiver selecionada). Clique no ícone de configurações para revelar opções adicionais de link.
- Abrir em nova janela: marque esta opção para abrir o URL vinculado em uma nova guia do navegador.
- Não seguir: Marque esta opção para adicionar um
rel="nofollow"atribuir ao link, informando aos mecanismos de pesquisa para não transferir a equidade do link para o destino.
Etapa 3: Escolha um modelo (opcional)
A guia Modelos oferece uma seleção de predefinições de estilos de imagem pré-concebidos. 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 uma aparência elegante e consistente sem configurar manualmente cada opção de estilo.
Etapa 4: Personalizar o design
Na guia Avançado, você pode personalizar a aparência visual e o espaçamento do seu bloco Imagem.
Estilos:
- Ajustar objeto: escolha como a imagem preenche seu contêiner quando uma altura é especificada — Preencher, Nenhum, Cobrir ou Conter. Essa opção aparece apenas quando um valor de altura é definido.
- Sombra: Adicione uma sombra atrás da imagem. Escolha entre Nenhuma, Fina, Pequena, Média, Grande, Extragrande ou 2X Grande.
- Girar imagem: Gire a imagem de 0 a 360 graus usando o controle deslizante.
- Borda da imagem: adicione uma borda ao redor da imagem. Defina o estilo da borda (sólida, pontilhada ou tracejada), a cor da borda, a largura da borda (superior, direita, inferior e esquerda independentemente) e o raio da borda para arredondar os cantos — com a opção de unidades px ou %.
Espaçamento:
- Margem: controle o espaçamento externo ao redor do seu bloco de imagem (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
- Preenchimento: ajuste o espaçamento interno do seu bloco de imagem (superior, direito, inferior, esquerdo). Suporta valores por dispositivo para desktop, tablet e celular.
Atributos:
- CSS ID: Exibe o identificador único gerado automaticamente para o seu bloco de imagem, 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 Imagem nas telas da área de trabalho.
- Ocultar no tablet: Oculte o bloco Imagem em dispositivos tablet.
- Ocultar no celular: oculte o bloco de imagem em dispositivos móveis.
Efeitos de animação:
- Animação de entrada: escolha um efeito de animação que seja reproduzido quando o bloco de imagem for exibido, como Saltar, Aparecer gradualmente, Ampliar, Girar e muitos outros.
Etapa 5: Salve suas alterações
Depois de terminar de configurar o bloco Imagem e personalizar sua aparência, certifique-se de salvar seu trabalho.
Você adicionou com sucesso um bloco de imagem à sua página! As imagens são um dos elementos mais impactantes em qualquer página de destino — elas definem o tom, criam confiança e direcionam a atenção. Use a guia Modelos para predefinições de estilo rápidas ou ajuste bordas, sombras e rotação na guia Avançado para criar exatamente a aparência que você precisa.