Imagen Destacada de Ancho Completo con Divi

En esta guía vamos a ver 4 formas de lograr que la imagen destacada de tus entradas sea del ancho completo de la pantalla.
  1. Inicio
  2. Divi
  3. Guías Divi
  4. Imagen Destacada de Ancho Completo con Divi

WordPress es Mejor con Divi

Para mostrar la imagen destacada de tus publicaciones de ancho completo en WordPress con Divi necesitamos los siguientes recursos:

Cómo Mostrar la Imagen Destacada de Ancho Completo con Divi

Las imágenes destacadas de ancho completo se ven geniales en cualquier publicación de blog. Afortunadamente, son fáciles de agregar usando el Theme Builder de Divi. Hay varias formas de hacerlo, por lo que podemos elegir el método que mejor se adapte a las necesidades de cada caso.

En el video te muestro cuatro formas de agregar una imagen de ancho completo a tu plantilla de entradas del blog.

Imagen de Ancho Completo con Módulo de Imagen

En esta opción insertamos debajo del título de la entrada una nueva fila en la que añadimos un módulo de imagen de Divi que configuramos para que ocupe el ancho total de la página.

Luego utilizamos la herramienta Contenido Dinámico del módulo de imagen para mostrar la imagen destacada de la entrada.

Imagen de Ancho Completo en el Fondo de la Sección Principal

Otra opción es mostrar la imagen destacada como fondo de la sección principal de la página.

En este caso abrimos los ajustes de la sección principal, vamos a la opción Fondo y en la pestaña Imagen usamos la herramienta Contenido Dinámico para mostrar la imagen principal.

Luego podemos ajustar la altura de la sección para que la imagen se vea el tamaño más completo y añadirle también un fondo gradiente para que se lea mejor el título de la entrada, que queda sobre la imagen destacada de ancho completo.

Imagen de Ancho Completo en el Fondo del Título de la Entrada

Esta opción es similar al anterior pero usando, en lugar del fondo de la sección principal, el fondo del módulo de texto que contiene el título de la entrada.

En este caso va a ser necesario usar los rellenos del módulo de texto para separar el texto de los bordes izquierdo y derecho de la página.

Imagen de Ancho Completo con el módulo Título de Publicación de Ancho Completo

Esta última opción para mostrar una imagen destacada de ancho completo requiere utilizar una sección principal de ancho completo, no una sección regular, y luego insertar en ella un módulo que se llama Título de Publicación de Ancho Completo.

Este módulo contiene: el título de la entrada, la imagen destacada y los metadatos; y nos permite elegir cuáles de estos elementos mostrar u ocultar.

Es tan simple como insertar el módulo y automáticamente va mostrar el título de la entrada y la imagen de ancho completo.

 

Te recomiendo ver el video ya que muestro paso a paso cómo funciona cada uno de los métodos mencionados.

Cada uno de los métodos son fáciles de usar y modificar. La idea es que tengas varias opciones para que puedas usar el método que mejor se adapte a las necesidades del sitio que estás haciendo.

Jorge Baffa

Jorge Baffa

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada.