Tutorial Divi: Todo lo que debes saber sobre los tamaños y uso de imágenes en cada módulo

WordPress artículo tamaño de la imagen

Todo el mundo parece amar a nuestro otro post sobre el cambio de la relación de aspecto de las imágenes Divi, pero ese tutorial sólo muestra cómo hacerlo en el módulo de imagen. En este tutorial, vamos a utilizar la misma matemática, el mismo código, y el mismo proceso para cambiar la relación de aspecto de la imagen de la Galería Divi utilizando el Módulo de Galería Divi. Pronto se puede añadir cualquier combinación de paisaje, retrato, o imágenes de tamaños impares a la galería, y se convertirán automáticamente uniforme.

NOTA: Es posible que desee también echa un vistazo a un tutorial similar, pero muy diferente llamado Cómo detener Divi Image Crop. Que uno realmente hacer la galería utilizar la relación de aspecto original de la imagen cargada en su lugar.

La mayoría de nosotros estamos familiarizados con las relaciones de aspecto de imagen o vídeo. Muchas veces nuestros dispositivos se hacen a estas proporciones también. El primer número en la relación es el ancho, y el segundo número es la altura. Como se puede ver en los ejemplos CSS a continuación, el truco CSS funciona con relleno y utiliza un porcentaje. Básicamente, el porcentaje es la altura dividida por la anchura. Para calcular qué porcentaje utilizar en el CSS para las relaciones de aspecto de los elementos de la galería de imágenes Divi, basta con utilizar esta fórmula matemática.

¿Cuáles son los mejores tamaños de imagen para Divi?

En un diseño de 1 columna, la imagen debe tener una anchura de 1080px para estar optimizada. En un diseño de 1/2 columna, cada imagen debe tener 510px de ancho para ser optimizada. En un diseño de 1/3 columna, cada imagen debe tener 320px de ancho para ser optimizada. En un diseño de 1/4 de columna, cada imagen debe tener 225px de ancho para ser optimizada.

  Cómo desactivar la animación por defecto de las galerías de imágenes de Divi

¿Cuál es el mejor tamaño de imagen para Divi deslizador de ancho completo?

Basándonos en los tamaños de pantalla estándar, recomendamos que sus imágenes midan al menos 1280px por 768px.

WordPress cambiar imagen miniatura

Por ejemplo, puede añadir una máscara redonda, triangular o de estrella. En resumen, todo es posible. Y eso es lo que le propongo descubrir en este nuevo tutorial : cómo aplicar máscaras a sus imágenes con Divi…

De hecho, es la propiedad CSS border-radius que simplemente redondea las esquinas de una imagen. Si su imagen original es cuadrada, será fácil hacerla perfectamente redonda aplicando un border-radius del 100% y la buena noticia es que Divi le permite hacer esto en 2 clics:

Si nos fijamos en la imagen de arriba, se puede ver rápidamente que el uso de la propiedad de borde-radio en una imagen de relación horizontalNo se puede obtener una imagen redonda. Su imagen se convertirá en ovalada y eso es bastante lógico.

La respuesta viene… Ya que no puedes obtener una imagen redonda a partir de una imagen apaisada, puedes utilizar otra característica de Divi: añadir un degradado a la imagen… Un degradado poco habitual, por supuesto, ¡pero un degradado al fin y al cabo!

Divi Mask le permite hacer precisamente eso con formas preconfiguradas y editables o con formas personalizadas (importación de imágenes SVG). Añade un nuevo módulo al Constructor Divi con estilos únicos para imágenes y fondos.

Inicio de sesión en Elegant themes

Estamos seguros de que con el tiempo veremos la introducción de aún más ajustes nuevos, pero por ahora, creemos que no tiene (todavía) la capacidad de configurar los ajustes necesarios para crear un diseño de interfaz o efectos particulares.

  Establecer varias imágenes destacadas a la vez

Soporte: Puedes estar seguro de que el soporte está siempre a mano y que podremos guiarte en la medida de lo posible si necesitas ayuda con cualquier CSS personalizado que hayamos incluido en nuestros diseños, plantillas o secciones.

Para la mayoría de los usuarios y casos de uso, esto es perfectamente aceptable, ya que aún puede realizar cambios en varios ajustes, alternar entre las vistas de escritorio, tableta y móvil y publicar su página para lograr el aspecto de las demostraciones.

Las secciones interactivas (3-7 solamente) son la excepción porque dependen de jQuery para ocultar o mostrar elementos. El Constructor Visual renderiza el código jQuery en el front-end haciendo imposible ver las Secciones, Filas o Módulos ocultos. Para esas secciones necesitará acceder a la Vista por Capas o al Modo Wireframe para editarlas.

Acceder a la Vista por Capas o al modo Wireframe le da acceso a la estructura de su página y sección, mostrando todos los elementos en una lista jerárquica organizada y anidada que muestra claramente la estructura de su página.

Relación de aspecto de la imagen css

Originalmente, el código que utilizamos para personalizar las miniaturas del módulo de blog de Divi era un poco como usar un mazo para romper una nuez. Utilizamos este método porque, en ese momento, no podíamos conseguir que las imágenes se recortaran sin él, y ese era el diseño que queríamos para el blog.

Desde entonces, con la ayuda de Robert Staddon, de Abundant Designs, hemos podido averiguar cuál era la causa del problema. Si echas un vistazo a los comentarios del tutorial original, verás cómo la aportación de Robert nos ayudó a dar con esta nueva solución mejorada, así que ¡gracias de nuevo, Robert!

  Insertar imágenes de Instagram en WordPress

El método antiguo sustituye todo el shortcode del módulo blog por una versión personalizada, lo que está bien si quieres tener un control total sobre el diseño, pero es un poco complicado sólo para cambiar el tamaño de las imágenes. El nuevo método utiliza los filtros de WordPress, que Elegant Themes incorporó en el shortcode original, para cambiar el tamaño de las imágenes con una simple función.

Este nuevo método también se puede aplicar para personalizar el índice y la página de archivo, así como las miniaturas de una sola entrada utilizando diferentes etiquetas de filtro, que he incluido en el código de abajo. Simplemente elimina o comenta los filtros si no quieres usarlos.