Montezuma (Masonry) Galerie

Die Standard-Galerie von Divi ist nicht besonders schön, viel besser sieht ein Masonry-Galerie aus. Um diese ohne Plugin zu gestalten sind vier Schritte notwendig.

All diese Maßnahmen funktionieren jedoch nur, wenn ein Child-Theme installiert ist.

Als erstes müssen wir WordPress beibringen, dass es in der Vorschau Hoch- und Querformate anzeigt.

Dazu fügen wir folgenden Code in die „functinos.php“ ein.

Für die "functions.php"

function wpc_remove_height_cropping($height) {
	return '9999';
}
function wpc_remove_width_cropping($width) {
	return '9999';
}
 
add_filter( 'et_pb_gallery_image_height', 'wpc_remove_height_cropping' );
add_filter( 'et_pb_gallery_image_width', 'wpc_remove_width_cropping' );

Als zweites folgendes CSS in die „style.css“ des Child-Themes.

Hierbei ist zu beachten, dass die „Row“in der die Galerie ist, die richtige Klasse hat. In diesem Fall ist die Klasse „.cb-gallery-masonry“.

Für die "style.css" des Child-Themes

/* 
Masonry Gallery
*/
 
.cb-gallery-masonry .et_pb_gallery .et_pb_gallery_items {
  column-count: 3; /* number of columns for desktop */
  column-gap: 10px; /* column spacing */
}
 
@media only screen and (max-width: 1200px) {
  .cb-gallery-masonry .et_pb_gallery .et_pb_gallery_items {
    column-count: 2; /* number of columns for tablet devices */
  }
}
@media only screen and (max-width: 767px) {
  .cb-gallery-masonry .et_pb_gallery .et_pb_gallery_items {
    column-count: 1; /* number of columns for mobile devices */
  }
}
 
.cb-gallery-masonry .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
  width: 100%;
  margin: 0px 0px 10px 0 !important; /* replace 10px to change row spacing */
  float: none !important;
}

Du möchtest mehrere Galerien, die sich in der Anzahl der Bilder nebeneinander unterscheiden, auf einer Website erstellen, dann benutze diesen CSS-Code.

Verschieden breite Galerien

/* 
Masonry Gallery mehrere Breiten
*/
 

/*====SECHS BILDER NEBENEINANDER====*/


.sechs-bilder .et_pb_gallery .et_pb_gallery_items {
  column-count: 6; /* number of columns for desktop */
  column-gap: 10px; /* column spacing */
}
 
@media only screen and (max-width: 1200px) {
  .sechs-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 5; /* number of columns for tablet devices */
  }
}

@media only screen and (max-width: 980px) {
  .sechs-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 4; /* number of columns for tablet devices */
  }
}
@media only screen and (max-width: 767px) {
  .sechs-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 2; /* number of columns for mobile devices */
  }
}
 
.sechs-bilder .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
  width: 100%;
  margin: 0px 0px 10px 0 !important; /* replace 10px to change row spacing */
  float: none !important;
}

/*====FÜNF BILDER NEBENEINANDER====*/


.fuenf-bilder .et_pb_gallery .et_pb_gallery_items {
  column-count: 5; /* number of columns for desktop */
  column-gap: 10px; /* column spacing */
}
 
@media only screen and (max-width: 1200px) {
  .fuenf-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 4; /* number of columns for tablet devices */
  }
}

@media only screen and (max-width: 980px) {
  .fuenf-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 3; /* number of columns for tablet devices */
  }
}
@media only screen and (max-width: 767px) {
  .fuenf-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 2; /* number of columns for mobile devices */
  }
}
 
.fuenf-bilder .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
  width: 100%;
  margin: 0px 0px 10px 0 !important; /* replace 10px to change row spacing */
  float: none !important;
}

/*====VIER BILDER NEBENEINANDER====*/


.vier-bilder .et_pb_gallery .et_pb_gallery_items {
  column-count: 4; /* number of columns for desktop */
  column-gap: 10px; /* column spacing */
}
 
@media only screen and (max-width: 980px) {
  .vier-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 3; /* number of columns for tablet devices */
  }
}
@media only screen and (max-width: 767px) {
  .vier-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 2; /* number of columns for mobile devices */
  }
}
 
.vier-bilder .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
  width: 100%;
  margin: 0px 0px 10px 0 !important; /* replace 10px to change row spacing */
  float: none !important;
}


/*====DREI BILDER NEBENEINANDER====*/


.drei-bilder .et_pb_gallery .et_pb_gallery_items {
  column-count: 3; /* number of columns for desktop */
  column-gap: 10px; /* column spacing */
}
 
@media only screen and (max-width: 980px) {
  .drei-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 2; /* number of columns for tablet devices */
  }
}
@media only screen and (max-width: 767px) {
  .drei-bilder .et_pb_gallery .et_pb_gallery_items {
    column-count: 2; /* number of columns for mobile devices */
  }
}
 
.drei-bilder .et_pb_gallery .et_pb_gallery_items .et_pb_gallery_item {
  width: 100%;
  margin: 0px 0px 10px 0 !important; /* replace 10px to change row spacing */
  float: none !important;
}