Šablona Divi obsahuje ve svém builderu modul s názvem Galerie a již sám název říká k čemu slouží. Pomůže vám do stránky vložit galerii obrázků. Jednoduše s možností uživatelsky příjemného prohlížení pro návštěvníka webu a můj osobní názor je ten, že se s ní pracuje rozhodně lépe než s běžnou galerií kterou obsahuje WordPress. To je ale můj osobní názor, někdo má raději tu základní.

Pravdou ale je, že výhody modulu využije především tvůrce, z pohledu návštěvníka toho moc nepoznáte. Při práci na webu klienta jsem přemýšlel jak obrazovou galerii ozvláštnit, aby nebyla fádní a obyčejná. Autor jeho původního webu kde byly některé ukázky práce klienta udělal obrazovou galerii jako běžnou sériovou záležitost. Vzal jednoduše obrázky, naházel je do modulu Galerie a uložil. Hotovo. Práce na minutu a je vyděláno…

No tak touhle cestou se mi jít nechtělo. Říkal jsem si, jak jsou sakra udělané ty galerie, které vypadají jinak a na rozdíl od „sériových“ mi přitáhnou zrak. A jak to udělat, aby při své zvláštnosti fungovaly stejně?

No, udělat to jde třeba takhle.

Nejprve jsem si připravil obrázky. V té souvislosti mám pro vás dvě upozornění. První je, že v tomto popisu nejsou obrázky které byly použity pro klienta, ale obrázky z fotobanky (free). A druhé, důležitější upozornění, je to, že počet obrázků při použití tohoto konkrétního postupu musí být násobkem pěti. To je důležité.

Takže nejprve jsem si vytvořil v nové sekci nový řádek a do něj vložil galerii a do té vybrané obrázky. Výsledek byl očekávaný.

My ale nepotřebujeme několikastránkovou galerii a tak upravíme nastavení galerie tak, že nastavíme počet zobrazovaných obrázků na 10.

Tím se nám zobrazily všechny obrázky které jsme do galerie vložili.

Ještě si upravíme nastavení řádku ve kterém je galerie vložena a to konkrétně tak, že v části Design nastavíme vlastní mezeru mezi sloupci na 1.

K dokončení náš už čeká jen jeden krok V nastavení šablony Divi vložíme následující CSS.

/*** Uprava galerie Divi - Zabza.eu ***/
.et_pb_gallery_image.landscape img { width: 100%; }

.et_pb_gallery_item:nth-child(n+1):nth-child(odd) {
float: left;
}
.et_pb_gallery_item:nth-child(n+1):nth-child(even) {
float: right;
}
.et_pb_gallery_item:nth-child(5n+1) {
width: 50%!important;
}
.et_pb_gallery_item {
clear: inherit!important;
}
.et_pb_gallery_grid .et_pb_gallery_image {
overflow: hidden;
position: relative;
}
.et_pb_gallery_grid .et_pb_gallery_items .et_pb_gallery_item.et_pb_grid_item {
padding: .5%;
}

No a je hotovo. Výsledek můžete vidět v demo ukázce a myslím, že se docela povedl. Co vy?