Conclusiones clave
- La mampostería significa que las imágenes mantienen sus propias proporciones en lugar de recortarse en una tarjeta uniforme, por lo que una fotografía de retrato se mantiene alta.
- El widget gratuito Image Gallery de Elementor no tiene opción de mampostería. Sus controles de diseño son columnas y espacios.
- La galería de imágenes filtrables de complementos maestros tiene un interruptor de mampostería que detiene el recorte, pero el script frontal coloca los elementos en filas, por lo que las cartas altas dejan un espacio debajo de las cortas en la misma fila.
- Si desea columnas muy compactas sin espacios, las columnas CSS en un contenedor son la ruta honesta en una instalación gratuita.
- Para tomas de productos y fotografías de equipos, una cuadrícula uniforme generalmente se lee mejor que la mampostería, así que active Image Aspect Ratio.
La mampostería es el diseño donde las imágenes se sientan a su altura natural y las columnas se tambalean, la forma que Pinterest hizo familiar. Se adapta a la fotografía, donde recortar un marco de retrato en un cuadrado tira la mitad de la imagen.
Elementor puede acercarse a esto de tres maneras diferentes y no todas producen lo mismo. Uno de ellos tiene un interruptor etiquetado como Masonería que hace menos de lo que sugiere el nombre, que es la parte que vale la pena leer antes de construir.
Tabla de contenidos
Albañilería, rejilla y justificada: la diferencia
| Diseño | Qué le hace a las imágenes | Lee mejor para |
|---|---|---|
| Cuadrícula | Recorta cada imagen al mismo tamaño de tarjeta | Productos, fotos del equipo, logotipos, cualquier cosa que quieras ordenar |
| Albañilería | Mantiene la altura de cada imagen, las columnas se tambalean | Fotografía mixta, retratos junto a paisajes |
| Justificado | Mantiene las proporciones pero extiende cada fila a la misma altura | Ensayos fotográficos y hojas de contacto |
La mampostería y lo justificado protegen el cultivo original. La diferencia es en qué dirección corren las matemáticas: la mampostería fija el ancho de la columna y deja que varíe la altura, justifica fija la altura de la fila y deja que varíe el ancho.
Ruta 1: widget de la galería de Elementor (Pro)
El widget gratuito Image Gallery de Elementor tiene dos controles de diseño, columnas y espaciado, y se adapta a una tarjeta uniforme. El widget Gallery, que es Pro, tiene un control de diseño con tres valores: Grid, Justified y Masonry. Masonry existe el real, columnas llenas sin espacios y el widget Pro Portfolio también tiene su propio interruptor Masonry. Si ya tienes Pro, ese es el camino más corto y no hay nada que instalar.
Ruta 2: el interruptor de Masonry en la galería filtrable
En una instalación gratuita de Elementor, el Galería de imágenes filtrables tiene un interruptor de mampostería en su sección Configuración, junto a la relación de aspecto de la imagen y el canalón.
Con Masonry activado y Image Aspect Ratio desactivado, las imágenes mantienen sus propias proporciones, por lo que un marco de retrato permanece alto y no se recorta nada. El empaquetado de columnas es la parte que no obtienes. En la versión actual, el script que establece la cuadrícula organiza los elementos en filas, por lo que una imagen corta deja un espacio vacío debajo hasta que comienza la siguiente fila.
Esto es útil cuando sus imágenes tienen una forma más o menos similar, ya que nada se recorta y las filas permanecen ordenadas. Para el Pinterest empaquetado, consulte una instalación gratuita, la ruta 3 es la respuesta.
Ruta 3: columnas CSS en un contenedor
CSS tiene un diseño de columna que empaqueta contenido como debería hacerlo la mampostería. Coloque sus imágenes en un contenedor, agréguele algunas líneas de CSS y el navegador hará el trabajo sin script.
selector {
column-count: 3;
column-gap: 24px;
}
selector img {
width: 100%;
margin-bottom: 24px;
break-inside: avoid;
}
@media (max-width: 767px) {
selector { column-count: 2; }
}El selector la palabra clave se dirige al elemento que está editando, por lo que este fragmento va en el cuadro CSS personalizado del propio contenedor. En una instalación gratuita de Elementor, ese cuadro proviene de un complemento como Css personalizado, ya que Elementor marca su propio campo CSS personalizado como Pro.
La compensación es ordenar. Las columnas CSS se llenan de arriba a abajo en cada columna, por lo que el orden de lectura se ejecuta en la columna uno y luego en la columna dos. Para una galería nadie lee en secuencia que esté bien. Para cualquier cosa cronológica no lo es.
Tamaños de imagen que hacen que la mampostería luzca bien
- Cargue con un ancho constante. Alrededor de 1200 px es suficiente para una cuadrícula de tres columnas y mantiene la página ligera.
- Deje que las alturas varíen y mantenga los anchos iguales, ya que la mampostería funciona fijando el ancho de la columna.
- Establezca la resolución de imágenes deliberadamente. Los archivos de tamaño completo en una cuadrícula de nueve imágenes son una página lenta sin ganancia visual.
- El control deslizante Gutter responde y funciona de 0 a 40 px, por lo que puedes apretarlo en los teléfonos.
- Evite un cuadro extremo. Un único panorama muy alto entre imágenes cuadradas llama la atención sobre todo lo demás.
Cuando una cuadrícula uniforme es la mejor respuesta
Active la relación de aspecto de la imagen y obtendrá una cuadrícula uniforme, que es lo que quieren las tomas de productos, fotos de equipos y logotipos, junto con cualquier otra cosa que parezca un conjunto.
Una forma sencilla de elegir: si las imágenes se tomaron en una sesión con una configuración de cámara, recórtelas en una cuadrícula. Si provienen de diferentes tomas en diferentes orientaciones, déjeles mantener su forma.
Preguntas frecuentes
¿elementor tiene galería de mampostería?
No en el widget gratuito Image Gallery, que solo ofrece columnas y espacios. El widget de la galería de Elementor con opciones de diseño está en su lista Pro.
¿Por qué mi galería de mampostería todavía tiene huecos?
Porque la cuadrícula está dispuesta en filas en lugar de columnas empaquetadas. Las imágenes mantienen su altura natural, por lo que una imagen corta colocada en fila y alta deja espacio debajo. Las columnas CSS son la ruta hacia el verdadero embalaje.
¿La mampostería funciona con las pestañas filtrantes?
Sí. El filtrado y el diseño están separados, por lo que al hacer clic en una categoría se reduce la cuadrícula y los elementos restantes se vuelven a colocar.
¿Puedo configurar mampostería solo en dispositivos móviles?
No. El interruptor Masonry se aplica a todos los tamaños de pantalla. El control deslizante Gutter es el control que cambia por dispositivo.
¿la mampostería es mala para la velocidad de la página?
El diseño en sí es barato. Lo que le cuesta son las imágenes, así que establezca una resolución de imagen sensata en lugar de archivos de tamaño completo y recuerde que cada elemento de la galería se carga con la página.
Pensamientos finales
Tres rutas, tres resultados diferentes. El widget Gallery de Elementor Pro empaqueta las columnas por usted. El interruptor Masonry en la galería filtrable detiene el recorte y mantiene las filas, lo cual suele ser suficiente. Las columnas CSS brindan la apariencia empaquetada en una instalación gratuita, a costa del orden de lectura.
Proteger el cultivo original y mantener una cuadrícula ordenada son dos objetivos diferentes, así que elige la ruta que coincida con la que realmente tienes.
Lectura relacionada
