Elementor è un potente strumento per la creazione di siti web che permette di realizzare layout fantastici con una semplice interfaccia drag-and-drop. Tra i suoi tanti blocchi di costruzione, la galleria base è sicuramente uno dei più utilizzati, ma che allo stesso tempo non permette una grossa personalizzazione.

In questo articolo ti spiego come dare un tocco creativo in più alla Galleria Base.

Trasforma le tue gallerie Elementor in eleganti mosaici

Per trasformare la vostra galleria in una Galleria Masonry dovrete applicare queste impostazioni al blocco di Elementor:

Galleria Base
  • Contenuto
    • Risoluzione Immagine: Pieno
    • Colonne: 1
  • Avanzato
    • Classe Extra: gallery-masonry

E successivamente, applicare questo poche linee di CSS al vostro sito:

CSS
.gallery-masonry .gallery-item img {
  width: 100%;
}

/* Mobile (Default) */
/* Scegli il numero di colonne da visualizzare su mobile. */
.gallery-masonry .gallery  {
  column-count: 2;
  column-gap: 0;
}

/* Computer */
/* Scegli il numero di colonne da visualizzare su desktop. */
@media only screen and (min-width: 768px) {
  .gallery-masonry .gallery {
    column-count: 4;
  }
}

Se avete all’interno del vostro sito più Gallerie Masonry e volete applicare impostazioni differenti invece delle classe “.gallery” generale dovrete usare l’ID che assegna automaticamente Elementor ad ogni Galleria.