Tutorial Divi: Tamaño de las imágenes en el carrusel

Una de las cosas que más me preguntan en los cursos de WordPress que hago con Divi es la relacionada a los tamaños adecuados para las diapositivas en el módulo de carrusel de Divi, también conocido como Slider, o incluso “control deslizante” y “deslizador” en la infame traducción con la que viene Divi por defecto.

Así que vamos a ello, que seguro que te vendrá de maravilla tener por ahí apuntados los tamaños a modo de referencia.

Tamaños para las imágenes de fondo del carrusel

Altura

La altura de una diapositiva viene determinada por la cantidad de texto en el contenido de tu diapositiva. Si tienes más de  una diapositiva el carrusel usará la altura de la diapositiva más alta.

Si quieres forzar a que la diapositiva tenga una altura fija puedes añadir CSS personalizado o usar el plugin Divi Booster.

Anchura

El ancho de tu diapositiva lo determina la estructura de columnas en la que está situado tu carrusel. Las imágenes de fondo de un carrusel deberían ser, al menos, del ancho de la columna en las que están situadas.

Y los anchos estándar de columna son los siguientes:

  • 1 columna: 1080 píxeles 
  • ¾ de columna: 795 píxeles
  • ⅔ de columna: 700 píxeles
  • ½ de columna: 510 píxeles
  • ⅓ de columna: 320 píxeles
  • ¼ de columna: 225 píxeles

Carruseles de ancho completo

En el caso de los carruseles (sliders) de ancho completo o añadidos a filas de ancho completo te recomiendo utilizar un ancho de imagen de 1920 píxeles, independientemente de la altura.

Carruseles de pantalla completa

Hay una casilla en todos los elementos de título denominado “Hacer que se muestre a pantalla completa“, y en este caso te recomiendo usar imágenes de 1920 píxeles de ancho por 1024 píxeles de altura.

Nota: Si usas el efecto paralaje (parallax) esto hará que tus imágenes de fondo tengan una posición fija a medida que navegas por la página, y que tus imágenes se adaptarán (en escala) a la altura del navegador.

Tamaño de las imágenes de diapositiva

Distintas son las imágenes que puedes añadir a cada diapositiva de un carrusel, que se muestran por defecto a la izquierda del texto de la diapositiva y por encima de la imagen de fondo de la diapositiva. Como ya sabrás, si no añades una imagen entonces el texto se muestra centrado.

Debido a que la altura de la diapositiva viene definida por la cantidad de texto de la misma como he comentado antes, si la imagen de tu diapositiva es lo suficientemente alta se colocará por debajo del fondo de la diapositiva, convirtiéndose en una imagen alineada al fondo.

Nota: Las imágenes de diapositiva no se mostrarán en anchos de navegador por debajo de 768 píxeles.

Dicho todo lo anterior, y como sé que lo estás deseando, aquí tienes los anchos por defecto para las imágenes de diapositiva:

  • 1 columna: 410 píxeles
  • ¾ columna: 308 píxeles
  • ⅔ columna: 260 píxeles

Nota: Las imágenes de diapositiva sólo se mostrarán en carruseles con anchos de 1 columna ⅔ columna y  ¾ columna.

¿Lo quieres aún más fácil?

Si no te gusta apuntar píxeles por los rincones, o prefieres tener una plantilla en formato PSD con los anchos de cada tamaño de imagen de fondo, pues nada, aquí te dejo una descarga de plantillas para cada uno de los tamaños de columna.

Descargar “Plantillas de imagen de fondo para carruseles en Divi” divi-image-templates.zip – Descargado 235 veces – 6 MB

Valora este artículo para mejorar la calidad del blog ...

PobreRegularEstá bienMuy buenoExcelente (2 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

ESTA WEB UTILIZA COOKIES PARA OFRECER LA MEJOR EXPERIENCIA POSIBLE. SI SIGUES NAVEGANDO DAS TU CONSENTIMIENTO PARA LA ACEPTACIÓN DE COOKIES Y NUESTRA POLÍTICA DE PRIVACIDAD más información

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar