Hola emprendedora, hoy me estreno en el Perro de Papel y en primer lugar, quería dar las gracias a Celia por cederme un hueco para escribir un post aquí. En realidad es el primer post colaborativo, así que estoy muy nerviosa y espero que te guste.

He querido escribir este post porque a menudo el tema de las imágenes resulta un tema preocupante para muchas de vosotras.

Dicho esto y cómo no quiero enrollarme mucho,  porque este post es bastante completo y quiero que prestes atención, ya que va a resolver muchas preguntas que te haces cuando estás preparando contenido visual para subir a Divi. Y es que seguro que te has preguntado más de una vez:

¿ Cual es el tamaño correcto para subir imágenes a Divi?

¿ Será el mismo tamaño cuando subo una imagen para mis entradas del blog, que cuando subo una imagen de fondo para mi cabecera?.

Si no tienes en cuenta el tamaño correcto a la hora de preparar tus imágenes para subirlas a Divi pueden pasar varias cosas:

  • Que la imagen no quede nítida.
  • Que la imagen se corte o no se vea cuando usamos diferentes dispositivos móviles.
  • Que pese demasiado y ralentice la velocidad de carga de tu web o blog.

Así que allá voy, a explicarte o facilitarte una guía para en cuenta las medidas cada vez que prepares tus imágenes para subirlas DIVI.

Y al final del post un regalo: Hoja de ruta descargable para que la tengas a mano cuando estés preparando tus imágenes + plantillas.

La verdad es que es muy sencillo añadir imágenes a Divi, el problema está en cuál es el tamaño adecuado para subir en cada módulo. Pero si que quiero que abras un poco tu mente y que tengas en cuenta, que no hay un tamaño fijo siempre igual, básicamente porque  cada web es diferente y en muchas ocasiones tendrás que adaptar el módulo manualmente, lo cual no quiere decir que tienes que tener una bases mínimas de conocimiento para subir tus imágenes a divi.

 

¿Cual es la relación de aspecto que usa DIVI?

 

Voy a empezar a explicarte conceptos básicos y en el siguiente punto seguiré con el tamaño correcto para las  imágenes en  diferentes módulos, los que yo creo que son más importantes que conozcas.

Divi utiliza básicamente 3 relaciones de aspecto que tienes que entender: Relación 16: 9, relación 4: 3 y relación 3: 4. Aunque las dos relaciones de aspecto más usadas son 16:9 y 4:3.

La relación de aspecto 4:3 es el tamaño de pantalla estándar de las viejas televisiones y esas pantallas cuadradas de los ordenadores antiguos.

Los televisores y pantallas más modernas, de alta definición tienen la relación de aspecto 16:9, muestra una visualización más ancha, son cómo las televisiones que tenemos hoy en día en nuestras casas, más anchas que largas.

Y la relación de aspecto 3:4 que es útil para mostrar retratos en Divi.

escala de imágenes en divo

 

En los ajustes por defecto que trae Divi, viene preestablecido que el ancho sea de 1080 px y una anchura de canal de 3px. Esto siempre puedes cambiarlo en el personalizador de temas y en la configuración de DIVI, pero cómo no suele cambiarse, este manual está basado en ese ancho.

Como norma importante fíjate siempre que tus imágenes tengan al menos de ancho la columna en la que esté, cómo mínimo.

Y siempre ten en cuenta el ancho, porque la altura no es tan importante, solo debes tener en cuenta la relación de aspecto de la imagen que vas a subir.

La siguiente imagen te muestra que medidas en ancho  que usa divi en cada columna cuando añades el módulo imagen:

el ancho de los módulos de imagen en divi

 

En la imagen anterior no te especifíco  la altura, sin embargo si quieres que tús imágenes sean visibles en todos los dispositivos móviles y tablet correctamente y sin que se corten cuando usas el módulo de imagen en alguna columna, si que tienes que tener en cuenta las siguientes dimensiones con respecto a su anchura y altura:

 

  • Para una imagen con un una relación de aspecto 16:9 ( cómo los televisores actuales, más ancha que larga, panorámica), debes tener en cuenta los siguientes tamaños en píxeles ( px) (anchura x altura):

 

1 columna: 1080 x 608

columna ¾: 795 x 447

columna ⅔: 700 x 394

columna ½: 510 x 287

columna ⅓: 320 x 181

columna ¼: 225 x 128

 

  • Para una imagen con un una relación de aspecto 4:3 ( imágenes cuadradas, como los televisores antiguos), debes tener en cuenta los siguientes tamaños en píxeles ( px) (anchura x altura):

 

1 columna: 1080 x 810

columna ¾: 795 x 597

columna ⅔: 700 x 526

columna ½: 510 x 384

columna ⅓: 320 x 241

columna ¼: 225 x 170

 

¿Qué dimensiones tengo que usar en la imágenes para diferentes módulos?

 

Módulo Imagen

 

Cuando añadas un módulo de imagen, solo tienes que seguir la relación de aspecto que te he explicado en el apartado anterior. Es decir, si tienes una imagen con una relación de aspecto 4:3 y estás utilizando una fila con una distribución de 4 columnas, para cada columna tienes que subir una imagen que tenga un tamaño de 225px por 170px.

Sin embargo, sabes que cuando la web la visualizas en dispositivos móviles, en pantallas más pequeñas que 1080 px,  estas 4 columnas pasan a ser dos, y se quedaría un espacio entre columnas demasiado grande:

columnas de imágenes en divi

 

No está mal ¿verdad?pero si afinamos un poquito más podemos conseguir quitar ese espacio entre columna para dejarlo con el siguiente aspecto:

columna imágenes optimizadas divi

 

Dicho esto, si quieres  quitar ese espacio, las medidas cambian un poco y deberías utilizar otras, si quieres claro,  que todas las imágenes llenen el máximo ancho de la columna y se vea mejor en cualquier dispositivo, recomiendo que uses la siguientes medidas:

 

Para una imagen con relación de aspecto 16:9:

  • 1 columna: 1080 x 608
  • columna ⅔: 770 x 433
  • columna ¾: 770 x 433
  • columna ½: 770 x 433
  • columna ⅓: 770 x 433
  • columna ¼: 370 x 208

 

Para una imagen con relación de aspecto 4:3:

  • 1 columna: 1080 x 810
  • columna ⅔: 770 x 578
  • columna ¾: 770 x 578
  • columna ½: 770 x 578
  • columna ⅓: 770 x 578
  • columna ¼: 370 x 278

 

Imágenes de fondo para el Deslizador y Post slider

 

imagen deslizador divi

 

En el módulo deslizador de divi se usan imágenes de fondo que tengan al menos el ancho de la columna en la que se encuentra, así que solo tendrás que utilizar el tamaño para cada  ancho de  la columna como te he especificado en el apartado anterior.

La altura de la imagen de fondo deslizante siempre será determinada por la cantidad de contenido, por lo que puede ser que  necesites ajustar la altura  manualmente dependiendo del contenido que hayas añadido.

 

Ten en cuenta las siguientes medidas de imagen con una relación de aspecto estándar de  16: 9 para este módulo:

 

1 columna: 1080 x 608

¾ de la columna: 795 x 447

⅔ columna: 700 x 394

½ columna: 510 x 287

⅓ columna: 320 x 181

¼ columna: 225 x 128

 

Ten en cuenta las siguientes medidas de imagen con una relación de aspecto estándar de 4: 3 para este módulo:

 

1 columna: 1080 x 810

¾ de la columna: 795 x 597

⅔ columna: 700 x 526

½ columna: 510 x 384

⅓ columna: 320 x 241

¼ columna: 225 x 170

 

Ya sabes que el aspecto de nuestras imágenes en nuestra web, cambia cuando las  visualizamos en diferentes dispositivos ( móvil, tablet, pantalla de escritorio), por lo tanto, si quieres que las imágenes se vean “perfectas” en todos los dispositivos y que el control deslizante abarque el ancho de las columnas, utiliza las siguientes medidas:

 

Parar relación de aspecto de 16:9:

 

1 columna: 1080 x 608

⅔ columna: 770 x 433

¾ de la columna: 770 x 433

½ columna: 770 x 433

⅓ columna: 770 x 433

¼ columna: 370 x 208

 

Para relación de aspecto de 4:3:

 

1 columna: 1080 x 810

⅔ columna: 770 x 578

¾ de la columna: 770 x 578

½ columna: 770 x 578

⅓ columna: 770 x 578

¼ columna: 370 x 278

 

Imagen de fondo de lo deslizantes de ancho completo

imagen fondo completo divi

 

Basándonos en los tamaños estándar de de pantalla te recomiendo que tus imágenes sean al menos de 1280px de ancho. Pero si quieres que en monitores más grandes se muestre correctamente, es recomendable establecer una imagen de fondo con unas dimensiones como mínimo de 1920px de anchura.

Te recuerdo que la altura de los slider o deslizadores siempre va a depender del cantidad de contenido que le introduzcas.

Imagen destacada para el Deslizador y Post slider

 

Imagen destacada para el Deslizador y Post slider

 

Para que esta imagen se ajuste tanto a monitores de sobremesa cómo dispositivos móviles, te recomiendo que las imágenes de la diapositiva, tengan al menos las siguientes anchuras para:

1 de la columna: 450px

¾ de la columna: 330px

⅔ columna: 320px

 

IMPORTANTE: ten en cuenta siempre que las imágenes de este módulo,  solo se van a mostrar cuando se vean en pantallas superiores a 768 px.

 

Lightbox,Capa emergente o imágenes cuando se visualizan en mesa de luz.

 

¿Que es eso de lightbox,mesa de luz o capa emergente?

Son las imágenes que se muestran en ancho completo cuando pulsas encima de una miniatura o una imagen, por ejemplo en una galería de fotos y en el módulo imagen (opción capa emergente).

 

ancho imágenes lightbox divi

 

Si usas la opción de capa emergente cuando agregas un módulo de imagen, un tamaño recomendable para que se vea bien en todos los dispositivos, en especial. para los monitores de gran tamaño debe de ser  1500 x 844 px .

Y en el módulo de galería, cuando se agranda la imagen(mesa de luz), las dimensiones son las mismas,  1500 x 844 recomendadas para que subas . Y en la disposición de rejilla divi crea automáticamente una versión más pequeña (400px de ancho) de la galería.

 

Imágenes destacadas en el módulo blog

 

En este módulo tienes  dos opciones de diseño para mostrar tus entradas; Ancho Completo y Disposición de rejilla.

 

ancho imagenes blog divi

 

Ancho completo

El ancho de la imagen es igual al ancho de la columna. Por ejemplo si estás usando una columna para mostrar tus últimas entradas, esa imagen debería tener una anchura como la columna, al menos 1080px. Pero si usas una comuna de ⅔ para mostrar tus entradas, con un sidebar a la derecha, tu imagen destacada debería de ser al menos de 700 px:

 

Aqui te pongo las medidas, dependiendo de las columnas que uses.

1 columna: 1080

¾ de la columna: 795

⅔ columna: 700

½ columna: 510

⅓ columna: 320

¼ columna: 225

 

Disposición rejilla

Aquí no tengo mucho que decir, porque no tienes que preocuparte por esto, ya que divi crea automáticamente una miniatura de la imagen destacada de tu entrada.

 

Módulo anuncio

 

ancho imagen anuncio divi

 

Para insertar una imagen en el módulo anuncio, solo tienes que seguir las dimensiones que te expliqué anteriormente. Tanto si pones la fila en ancho completo, como si la pones en ancho normal, lo mejor es tener en cuenta las siguientes medidas:

 

  • 1 columna: 550px
  • columna ½: 510px
  • columna ⅓: 320px
  • columna ¼: 225px

 

Módulo Persona

imagen módulo persona divi

 

El módulo persona de divi usa una relación de aspecto 3:4.  Pero por si usas otra relación de aspecto, te pongo aquí las medidas:

 

  • 3:4 – 600 x 800 (recomendado para retratos)
  • 16:9 – 600 x 338
  • 4:3 – 600 x 400

 

 

Módulo Testimonios

 

imagenes testimonios divi

 

La imagen del retrato del módulo testimonios va a depender de la configuración de este módulo. Sin embargo divi crea por defecto una anchura y altura de 90 x 90 px, con relación de aspecto 1:1.

También puedes personalizar los ajustes de la imagen de retrato en la Configuración del módulo, en la pestaña Diseño. Pero siempre mantén una proporción igual en Anchura y Altura del retrato, por ejemplo 100 x 100  y asegurate que el radio del borde del retrato este a 100 si quieres usar imágenes circulares.

 

Conclusión

 

No hay una medida exacta para las imágenes para todos los sitios web y tamaños de pantalla. Pero si que es importante que entiendas la estructura de columnas que usa  Divi.

Para que tengas una guía a la hora de preparar tus imágenes y subirlas a Divi, te he preparado una hoja de ruta descargable e imprimible a modo resumen,  de  las dimensiones recomendadas para Divi. Y también plantillas para tus imágenes  con los tamaños en photoshop (pincha en la imagen de abajo para poder descargar).

 

plantilla medidas imágenes en divi

 

En este artículo no he puesto todos los módulos, pero están caso todos o los que yo creo que son más importantes para ti y por supuesto esta información no me la he inventado, esta sacada directamente de ElegantThemes.

Así que si me he dejado alguno que te interesa conocer no dudes en dejarme tu comentario abajo y me encantará responderte.

Que pases un feliz día.

Irene

Francisca Irene Design

 

*Imagen principal del post vía Shutterstock*

Te encantará:

The following two tabs change content below.

Celia

Diseñadora, Mentora y Formadora Online at El Perro de Papel
Mamá y emprendedora a tiempo completo. Ayudo a otras mujeres y madres soñadoras a emprender un negocio online de éxito para conciliar su vida personal y profesional.Si este artículo te ha gustado, sigue aprendiendo conmigo en mi reto gratis de 14 días para conectar con tu mejor versión CLICK AQUÍ.Y AQUÍ tienes mi curso premium para mamás emprendedoras que quieren hacer realidad su idea genial, mano a mano, conmigo.¡Que tengas un feliz día, soñadora!

¿CANSADA DE TRABAJAR TANTAS HORAS SIN VER LOS RESULTADOS ESPERADOS?

Te regalo mi CURSO GRATIS DE 5 DÍAS para mamás emprendedoras que quieren conciliar su vida personal y profesional sin volverse locas ni renunciar a sus sueños.

¡Bienvenida! Ahora revisa tu correo ;)

Pin It on Pinterest

Share This