El bloque de Imagen te permite añadir imágenes a cualquier página de SeedProd. Este bloque admite la carga de imágenes desde tu biblioteca de medios, la introducción de una URL directa o el uso de imágenes generadas por IA, ofreciéndote opciones flexibles para obtener recursos visuales para tus páginas.
Más allá de simplemente mostrar una imagen, el bloque incluye opciones de enlace, controles de tamaño de imagen, estilo de borde, efectos de sombra y rotación, lo que lo convierte en un elemento de imagen completo para cualquier diseño.
Añadir el Bloque de Imagen a tus Páginas
Sigue estos pasos para añadir un bloque de Imagen a tu página de SeedProd:
Paso 1: Añadir el Bloque
En Diseño > Bloques, arrastra y suelta el bloque Imagen en la sección deseada de tu página.
Paso 2: Configurar los Ajustes de Contenido
Una vez añadido, haz clic en el bloque de Imagen para abrir su configuración. En la pestaña Contenido, configura la fuente de la imagen, el tamaño, la alineación y el enlace.
Imagen:
- Imagen: Sube o selecciona una imagen de tu biblioteca de medios de WordPress. El bloque también incluye una opción de generación de imágenes por IA para crear imágenes usando OpenAI directamente desde el editor.
- Fuente de Imagen: Introduce manualmente una URL de imagen directa, o utiliza el control de Etiquetas Dinámicas para extraer una fuente de medios dinámica, como el valor de un campo personalizado.
- Texto Alternativo: Introduce texto alternativo descriptivo para la imagen para mejorar la accesibilidad y el SEO.
- Tamaño de Imagen: Establece el ancho y la altura de la imagen en píxeles (px) o como un porcentaje (%). Deja cualquiera de los campos en blanco para mantener la relación de aspecto natural de la imagen.
- Alineación: Establece la alineación horizontal de la imagen dentro de su sección: Izquierda, Centro o Derecha. Admite valores por dispositivo para escritorio, tableta y móvil.
- Tipo de Enlace: Elige cómo se comporta la imagen al hacer clic: Enlace Personalizado abre una URL que especifiques, o Medios - Lightbox abre la imagen a tamaño completo en un lightbox superpuesto.
- Enlace: Introduce la URL de destino para el enlace de la imagen (visible cuando se selecciona Enlace Personalizado). Haz clic en el icono de configuración para revelar opciones de enlace adicionales.
- Abrir en una ventana nueva: Marca esta opción para abrir la URL enlazada en una nueva pestaña del navegador.
- No seguir: Marca esta opción para añadir un atributo
rel="nofollow"al enlace, indicando a los motores de búsqueda que no pasen la autoridad del enlace al destino.
Paso 3: Elige una plantilla (Opcional)
La pestaña Plantillas ofrece una selección de preajustes de estilo de imagen prediseñados. Haz clic en cualquier miniatura de plantilla para aplicar instantáneamente una combinación de ajustes de borde, sombra y estilo a tu imagen. Esta es una forma rápida de dar a tus imágenes un aspecto pulido y coherente sin configurar manualmente cada opción de estilo.
Paso 4: Personaliza el diseño
En la pestaña Avanzado, puedes personalizar la apariencia visual y el espaciado de tu bloque de Imagen.
Estilos:
- Ajuste de Objeto: Elige cómo la imagen llena su contenedor cuando se especifica una altura: Rellenar, Ninguno, Cubrir o Contener. Esta opción aparece solo cuando se establece un valor de altura.
- Sombra: Añade una sombra paralela detrás de la imagen. Elige entre Ninguna, Fina, Pequeña, Mediana, Grande, Extra Grande o 2X Grande.
- Rotar Imagen: Rota la imagen de 0 a 360 grados usando el deslizador.
- Borde de imagen: Añade un borde alrededor de la imagen. Establece el Estilo del borde (Sólido, Punteado o Discontinuo), el Color del borde, el Ancho del borde (Superior, Derecho, Inferior, Izquierdo de forma independiente) y el Radio del borde para redondear las esquinas, con opción de unidades px o %.
Espaciado:
- Margen: Controla el espaciado exterior alrededor de tu bloque de imagen (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
- Relleno: Ajusta el espaciado interior dentro de tu bloque de imagen (Superior, Derecho, Inferior, Izquierdo). Admite valores por dispositivo para escritorio, tableta y móvil.
Atributos:
- ID CSS: Muestra el identificador único autogenerado para tu bloque de imagen, creado automáticamente por SeedProd para estilos personalizados o para la selección con JavaScript.
- Clase Personalizada: Agregue clases CSS personalizadas para aplicar estilos específicos de su tema o CSS personalizado.
- Atributos Personalizados: Agregue cualquier atributo HTML al elemento contenedor del bloque. Ingrese cada atributo en una nueva línea usando el formato: nombre-atributo|valor.
Visibilidad del Dispositivo:
- Ocultar en escritorio: Oculta el bloque de imagen en pantallas de escritorio.
- Ocultar en tableta: Oculta el bloque de imagen en dispositivos tableta.
- Ocultar en móvil: Oculta el bloque de imagen en dispositivos móviles.
Efectos de Animación:
- Animación de entrada: Elige un efecto de animación que se reproduzca cuando el bloque de imagen aparezca en la vista, como Rebote, Fundido de entrada, Zoom de entrada, Girar de entrada y muchos más.
Paso 5: Guardar tus cambios
Una vez que hayas terminado de configurar el bloque de imagen y personalizar su apariencia, asegúrate de guardar tu trabajo.
¡Has añadido con éxito un bloque de imagen a tu página! Las imágenes son uno de los elementos más impactantes en cualquier página de destino: marcan el tono, generan confianza y dirigen la atención. Utiliza la pestaña Plantillas para obtener ajustes preestablecidos de estilo rápido, o ajusta los bordes, sombras y rotación en la pestaña Avanzado para crear exactamente el aspecto que necesitas.