El bloque Imagen te permite añadir imágenes a cualquier página de SeedProd. Este bloque admite la carga de imágenes desde tu biblioteca multimedia, la introducción de una URL directa o el uso de imágenes generadas por IA, lo que te ofrece opciones flexibles para obtener elementos 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, estilos de bordes, efectos de sombra y rotación, lo que lo convierte en un elemento de imagen con todas las funciones 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 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 Imagen para abrir su configuración. En la pestaña Contenido, configura la fuente, el tamaño, la alineación y el enlace de la imagen.
Imagen:
- Imagen: Sube o selecciona una imagen de tu biblioteca multimedia de WordPress. El bloque también incluye una opción de generación de imágenes mediante IA para crear imágenes utilizando OpenAI directamente desde el editor.
- Fuente de la imagen: introduzca manualmente una URL de imagen directa o utilice el control Etiquetas dinámicas para extraer una fuente multimedia dinámica, como el valor de un campo personalizado.
- Texto alternativo: Introduzca un texto alternativo descriptivo para la imagen con el fin de mejorar la accesibilidad y el posicionamiento SEO.
- Tamaño de la imagen: Establezca el ancho y alto de la imagen en píxeles (px) o como porcentaje (%). Deje 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, centrada o derecha. Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Tipo de enlace: elige cómo se comporta la imagen al hacer clic en ella: el enlace personalizado abre una URL que tú especificas, o el medio (lightbox) abre la imagen a tamaño completo en una ventana emergente.
- Enlace: Introduzca la URL de destino para el enlace de la imagen (visible cuando se selecciona Enlace personalizado). Haga clic en el icono de configuración para mostrar opciones de enlace adicionales.
- Abrir en una nueva ventana: Marque esta opción para abrir la URL vinculada en una nueva pestaña del navegador.
- No seguir: Marque esta opción para añadir un
rel="nofollow"atribuir al enlace, indicando a los motores de búsqueda que no transfieran la autoridad del enlace al destino.
Paso 3: Elija una plantilla (opcional)
La pestaña Plantillas ofrece una selección de ajustes preestablecidos de estilos de imagen prediseñados. Haga clic en cualquier miniatura de plantilla para aplicar al instante una combinación de ajustes de borde, sombra y estilo a su imagen. Esta es una forma rápida de dar a sus imágenes un aspecto pulido y coherente sin tener que configurar manualmente cada opción de estilo.
Paso 4: Personalizar el diseño
En la pestaña Avanzado, puedes personalizar el aspecto visual y el espaciado de tu bloque de imagen.
Estilos:
- Ajustar objeto: elige cómo se rellena el contenedor de la imagen cuando se especifica una altura: Rellenar, Ninguno, Cubrir o Contener. Esta opción solo aparece cuando se establece un valor de altura.
- Sombra: añade una sombra detrás de la imagen. Elige entre Ninguna, Muy fina, Pequeña, Mediana, Grande, Muy grande o 2 veces más grande.
- Girar imagen: Gire la imagen entre 0 y 360 grados utilizando el control deslizante.
- Borde de la 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 e izquierdo de forma independiente) y el radio del borde para redondear las esquinas, con la opción de elegir entre unidades px o %.
Espaciado:
- Margen: controla el espacio exterior alrededor del bloque de imagen (superior, derecho, inferior, izquierdo). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
- Relleno: ajusta el espacio interior dentro del bloque de imagen (superior, derecho, inferior, izquierdo). Admite valores por dispositivo para ordenadores de sobremesa, tabletas y móviles.
Atributos:
- CSS ID: Muestra el identificador único generado automáticamente para tu bloque de imagen, creado automáticamente por SeedProd para personalizar el estilo o la orientación de JavaScript.
- Clase personalizada: añade clases CSS personalizadas para aplicar estilos específicos de tu tema o CSS personalizado.
- Atributos personalizados: añade cualquier atributo HTML al elemento contenedor del bloque. Introduce cada atributo en una nueva línea utilizando el formato: nombre-del-atributo|valor.
Visibilidad del dispositivo:
- Ocultar en el escritorio: Ocultar el bloque de imagen en las pantallas del escritorio.
- Ocultar en tableta: Ocultar el bloque de imagen en dispositivos tableta.
- Ocultar en dispositivos móviles: Ocultar 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 se desplace hacia la vista, como Rebotar, Fundido de entrada, Acercar, Girar y muchos más.
Paso 5: Guarde los cambios
Una vez que haya terminado de configurar el bloque Imagen y personalizar su apariencia, asegúrese de guardar su trabajo.
¡Has añadido correctamente un bloque de imagen a tu página! Las imágenes son uno de los elementos más impactantes de cualquier página de destino: marcan el tono, generan confianza y dirigen la atención. Utiliza la pestaña Plantillas para aplicar ajustes preestablecidos de estilo rápidos, o ajusta los bordes, las sombras y la rotación en la pestaña Avanzado para crear exactamente el aspecto que necesitas.