Tento návod jsem vložil rovnou do dvou kategorií. Je totiž jak o práci se sekcí tak o práci s modulem, takže pro lepší hledání…

Při práci pro klienty se někdy setkávám se zapeklitými požadavky. Tento byl navíc přes jednu zahraniční agenturu a to bývají někdy opravdu lahůdky. Byl zde speciální požadavek, aby na webu…

… byla na pozadí fotografie kanceláře a v té by se zobrazovaly jednotlivé komponenty firemních nabídek a po najetí myší by tam toho bylo víc a odklik na stránku s podrobným popisem služby.

No není to hezké zadání?

Po chvíli komunikace jsme došli k tomu, že půjde o obrazovou mřížku ve které budou upoutávky, které se budou při najetí myší překlápět. Šablona Divi obsahuje modul Blurb – Upoutávka a tak bylo z čeho vycházet.

Pro ukázku si připravíme upoutávku na šest věcí, služeb nebo čehokoli podobného. Přirozeně ve skutečnosti se nemusíte počtem omezovat.

Nejprve si připravíme grafické podklady. V našem případě to bude celkem osm obrázků. Šest nám bude sloužit pro jednotlivé služby které budou prezentovány a dva jako pozadí. Pro tento případ jsem vybral náhodné obrázky z fotobanky a upravil je pro potřebu ukázky.

Pro pozadí jsem zvolil obrázek o rozměrech 1920×1080 px, který jsem v základní variantě ponechal tak jak byl a vytvořil si jeho kopii o stejných rozměrech a maximálně jí zesvětlil, tak aby na obrázku byl ještě viditelný obsah.

Pro služby jsem pak použil šest obrázků o rozměrech 800×500 px.

A jak postupovat dál?

Nejprve vytvoříme novou stránku, kde požadované komponenty mají být a nastavíme jí rozvržení na plnou šířku. Vložíme novou sekci ve které bude vše potřebné a můžeme do ní vložit i například text nad obrazovou mřížku a podobně.

V nastavení sekce pak provedeme následující důležité kroky v části Obsah:

• vložíme jako pozadí obrázek pozadí který jsme si upravili na maximální zesvětlení (viz výše)
• zaškrtneme použití parallax efektu
• jako paralaxní metodu zvolíme CSS

V sekci vytvoříme řádek se třemi sloupci.

V nastavení řádku je nutné provést úpravy. Nikoli v jednotlivých sloupcích, ale globálně pro celý řádek. Proveďte je jednoduše podle tabulky níže.

Obsah	Design	Pokročilé
Pozadí: vložte obrázek pro pozadí, neupravenou verzi	Vlastní mezera ve sloupci: Ano	CSS třída: blurbs_grid
Použít parallax efekt: Ano	Šířka mezery mezi sloupci: 1
Paralaxní metoda: CSS	Maximální šířka: 80%
	Rozestupy, vnitřní odsazení: 0 0 0 0

Do prvního sloupce vložíme modul Upoutávka a jeho nastavení provedeme podle následující tabulky.

Obsah	Design	Pokročilé
Nadpis: Název položky,služby apod.	Nadpis text: zarovnání na střed	CSS třída: blurb_active
Pozadí: nastavit barvu rgba(0,0,0,0.58)	Nadpis barva textu: #ffffff
	Nadpis vellikost textu: 26px
	Rozestupy, vnitřní odsazení nahoře a dole: 75px
	Styl rámečku: první volba
	Šířka okraje rámečku: 2px
	Barva ohraničení: #ffffff

Nyní přidáme do tohoto sloupce pod tento modul upoutávky další modul Upoutávka a nastavíme ho podle následující tabulky.

Obsah	Design	Pokročilé
Nadpis: Stejný jako v modulu výše	Nadpis text: zarovnání na střed	CSS třída: blurb_hover
Tělo textu: vložíme kód pod tabulkou, symbol křížku nahradíme příslušným odkazem	Nadpis barva textu: #ffffff
Pozadí: vložíme obrázek určený pro položku	Nadpis vellikost textu: 26px
	Rozestupy, vnitřní odsazení nahoře a dole: 75px
	Styl rámečku: první volba
	Šířka okraje rámečku: 2px
	Barva ohraničení: #ffffff

Nyní oba moduly překopírujeme do dalších dvou sloupců a upravíme vložené texty a obrázek pozadí podle potřeb. Pak zkopírujeme řádek a provedeme stejné potřebné úpravy.

Když je hotovo a stránka je uložena přejdeme do nastavení šablony Divi > Nastavení šablony > Všeobecné > Přizpůsobené CSS, kam vložíme následující CSS:

/*** Obrazova mrizka s upoutavkami - Zabza.eu ***/

.blurbs_grid .et_pb_column_1_3 .et_pb_blurb_content {
display: flex;
justify-content: center;
flex-direction: column;
height: 200px;
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover,
.blurbs_grid .et_pb_column_1_3:hover .blurb_active {
-webkit-transition: all .3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}

.blurbs_block .et_pb_column_1_3:hover .blurb_active {
visibility:hidden;
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover {
top:0;
opacity:0;
position:absolute;
visibility:hidden;
width: 100%;
}

.blurbs_grid .et_pb_column_1_3:hover .blurb_hover {
visibility:visible;
opacity:1;
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover a {
background-color: #2ea3f2; /* Pozadi tlacitka */
color: #fff; /* Barva textu tlacitka */
padding: 7px 15px;
text-transform: uppercase;
box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.25);
margin-top:15px;
display: inline-block;
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover a:hover {
background-color: #0073aa; /* Pozadi tlacitka pri najeti mysi */
}

.blurbs_grid .et_pb_column_1_3 .blurb_hover .et_pb_blurb_container {
margin-top: 52px;
}

A to je vše. Na výsledek se můžete podívat na demo stránce. Pozn. pro ukázku byly použity obrázky z free fotobanky, nejde o přesnou kopii od klienta které zmiňuji na začátku.

Demo