Úprava galerie Divi
Publikováno 9. 3. 2020
V kategorii Divi moduly
Použité štítky: CSS, modul galerie

Š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?

DEMO

0 komentářů

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Buďte v obraze

Jednou za týden, zpravidla v neděli v dopoledních hodinách, vám pošleme přehled nových článků.
S vašimi daty nakládáme maximálně zopodvědně a uchováváme je v bezpečí. Slouží výhradně k zasílání novinek z našeho webu.

Buďte jednoduše v obraze

Jednou týdně vám pošleme přehled nových článků abyste nemuseli nic hledat a měli všechno najednou pohromadě. Stačí jen vložit email, odeslat a potvrdit ve zprávě kterou vám obratem zašleme odběr novinek.

Přihlášení k odběru novinek proběhlo v pořádku.

Sdílet na Pinterestu

Sdílej