Jak vytvořit obrazovou mřížku s upoutávkami
Publikováno 28. 11. 2019
V kategorii Divi moduly | Divi sekce

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.

ObsahDesignPokročilé
Pozadí: vložte obrázek pro pozadí, neupravenou verziVlastní mezera ve sloupci: AnoCSS třída: blurbs_grid
Použít parallax efekt: AnoŠířka mezery mezi sloupci: 1
Paralaxní metoda: CSSMaximá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.

ObsahDesignPokročilé
Nadpis: Název položky,služby apod.Nadpis text: zarovnání na středCSS 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.

ObsahDesignPokročilé
Nadpis: Stejný jako v modulu výšeNadpis text: zarovnání na středCSS třída: blurb_hover
Tělo textu: vložíme kód pod tabulkou, symbol křížku nahradíme příslušným odkazemNadpis barva textu: #ffffff
Pozadí: vložíme obrázek určený pro položkuNadpis 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

1 komentář

  1. jiří

    Prima tip který se mi zrovna moc hodil. Díky za něj a i ty další.
    Jiří

    Odpovědět

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