Galerie obrázků jsou oblíbeným cílem většiny webových stránek. A v mnoha případech může být nejlepší udržovat tyto galerie obrázků veselé a statické a nechat obrázky působit svou magií.
Ale přidejte posuvný efekt posouvání puzzle galerie obrázků (jak to uděláme v tomto tutoriálu), může dát nadčasovou klasiku svěží nádech.
V tomto tutoriálu vám ukážeme, jak vytvořit jednoduché rozvržení, které odhalí galerii obrázků s efektem posouvání skládačky na Divi.
Klíčem je pochopit, jak velikost obrázků souvisí s hodnotami svislého a vodorovného posunutí každého efektu posouvání, aby se obraz posunul přesně o jeden bod. Po dokončení je ale výsledný pohybový efekt ostrý a přesný, protože se jedinečným způsobem postupně sestavuje a odhaluje galerii obrázků.
Možný výsledek
Tady je přehled rozložení galerie obrázků s efektem posouvání posuvné logiky, který v tomto kurzu vytvoříme.
Vytváření sekce záhlaví
Chcete-li začít, vytvořme sekci rychlého záhlaví, která uživateli řekne, aby posouval stránku, aby si prohlédl galerii, a úžasnými efekty posouvání.
Přidejte řádek
Přidejte řádek jednoho sloupce do výchozí sekce.
Přidat textový modul
Do sloupce / řádku přidejte nový textový modul.
V nastavení textu aktualizujte obsah těla následujícím textem:
<h1>Image Gallery</h1>
Nastavení textového modulu
Na kartě Návrh aktualizujte textový návrh následujícím způsobem:
- Písmo názvu: Roboto
- Hmotnost písma nadpisu: tučně
- Styl písma názvu: TT
- Zarovnání textu záhlaví: Střed
- Velikost textu záhlaví: 50px (desktop), 40px (tablet a telefon)
- Mezery mezi titulky: 4px
Přidejte ikonu modulu Blurb
Jakmile je text na místě, přidejte nový textový prezentační modul pod textový modul.
Poté odeberte veškerý název a tělo z výchozího obsahu a pomocí ikony šipky dolů vyberte.
Nastavení textu prezentace
Poté aktualizujte nastavení textu prezentace novou barvou a opakující se animací snímku.
- Barva ikony: # ffb500
- Styl animace: Snímek
- Směr animace: dolů
- Intenzita animace: 20%
- Opakování animace: smyčka
Výplň sekce
Chcete-li v sekci ponechat prostor pro posouvání, aktualizujte výplň takto:
- Výplň: 20vh výše, 50vh níže
Zde používáme jednotku délky vh, která je relativní k výšce okna prohlížeče, aby se řádně přizpůsobily mezery napříč všemi velikostmi prohlížeče.
Vytvoření galerie obrázků s rolovacími efekty
Nyní, když je naše sekce záhlaví hotová, jsme připraveni vytvořit skutečnou galerii obrázků s posuvnými efekty posouvání puzzle. Celá galerie se bude skládat ze tří řádků po 4 obrázcích / sloupcích v každém řádku, aby se vytvořilo celkem 12 obrázků. Po dokončení však můžete do rozložení snadno přidat další řádky a obrázky.
Vytvoření sekce a linie
Přidejte novou sekci
Začněme přidáním nové pravidelné sekce pod nadpisovou sekci.
Přidejte řádek
Poté do oddílu přidejte řádek se čtyřmi sloupci.
Nastavení linky
V nastavení linky aktualizujte následující:
- Šířka okapu: 1
- Šířka: 100%
- Maximální šířka: 1200 px (stolní), 600 px (tablet), 300 px (telefon)
Jak šířka řádku určuje velikost obrázku
Šířka řádku je pro tento design velmi důležitá, protože bude určovat šířku každého ze čtyř sloupců. Jakmile nastavíme šířku okapu na 1, mezi obrázky již nebude žádný okraj.
A když nastavíme maximální šířku na 1200px, rozvržení čtyř sloupců způsobí, že každý ze sloupců / obrázků bude mít šířku přesně 300px (1200px / 4 = 300px).
Protože každý z obrázků je čtvercový, víme, že výška každého obrázku bude také 300 pixelů. Pokud to nechceme, nemusíme to tak udržovat.
Mohli bychom se například rozhodnout mít rozložení se třemi sloupci s obrázky 400 x 400 pixelů. Znalost šířky obrazu (300 pixelů) a výšky (také 300 pixelů) bude klíčem k pozdějšímu vytvoření efektu posouvání.
Přidávání obrázků
Přidat obrázek 1
Obrázek 1 Efekty posouvání
Vztah mezi velikostí obrázku a posunutím efektu posunutí
Při použití efektu svislého a vodorovného posouvání je důležité pochopit, co představuje zadaná číselná hodnota. V tomto příkladu máme posunutí začátku svislého pohybu -3. Toto -3 je ve skutečnosti -300px (nebo 300px dolů), což je šířka obrázku.
Když uživatel posouvá, offset poté dosáhne 0 (výchozí pozice). To je to, co vytváří efekt posouvání, který přesune obraz přesně na jeden blok / snímek. Horizontální pohyb začíná na 3 (300 pixelů zprava) a zastaví se ve své výchozí poloze. Kombinace těchto dvou efektů vytváří jedinečný dvoudílný rolovací efekt.
Přidat obrázek 2
Po přidání efektů posouvání k obrázku 1. Přidejte nový obrázek do sloupce 2.
Tento statický obraz ponecháme bez jakéhokoli efektu posouvání.
Přidat obrázek 3
Poté přidejte další modul obrázku do sloupce 3 a modul aktualizujte o nový obrázek.
Obrázek 3 Efekty posouvání
V části Nastavení obrázku aktualizujte následující efekty posouvání:
Na kartě Horizontální pohyb ...
- Aktivujte horizontální pohyb: ANO
- Počáteční posun: -3 (v 0% okna)
- Průměrný offset: 0 (při 15% výřezu)
- Konec posunutí: 0 (při 100% výřezu)
Přidat obrázek 4
Chcete-li vytvořit poslední obrázek, zkopírujte obrázek 1 a vložte jej do sloupce 4.
V nastavení obrázku nahrajte nový obrázek.
Obrázek 4 Efekty posouvání
Poté aktualizujte následující efekty posouvání:
Na kartě Vertikální pohyb ...
- Aktivujte svislý pohyb: ANO
- Počáteční posun: 3 (v 0% okna)
- Průměrný posun: 0 (při 15% - 28% výřezu)
- Konec posunutí: 0 (při 40% výřezu)
Na kartě Horizontální pohyb ...
- Aktivujte horizontální pohyb: ANO
- Počáteční posun: 3 (v 0% okna)
- Průměrný offset: 3 (při 28% výřezu)
- Konec posunutí: 0 (při 40% výřezu)
Duplicitní řádek
Nyní, když jsou efekty posouvání obrázků prováděny pro první řádek, stačí duplikovat řádek a vytvořit více obrázků a jejich odpovídajících efektů posouvání. V tomto příkladu pojďme duplikovat řádek dvakrát, abychom vytvořili celkem tři řádky.
Podle potřeby vyměňte a znovu uspořádejte obrázky
Poté můžeme obrázky přesouvat pomocí funkce drag and drop, kam chceme. Zde můžete být kreativní a sledovat, jak se budou pohyblivé obrázky posouvat. A jakmile jsou obrázky na svém místě, můžete nahradit obsah modulu obrázků novými obrázky, které splňují potřeby Webové stránky.
Konečné úpravy
Viditelnost řezu
Vzhledem k tomu, že se naše obrázky pravděpodobně rozšíří mimo sekci / okno, skryjeme přetečení, abychom jej trochu vyčistili. Otevřete nastavení sekce a aktualizujte následující:
- Horizontální přetečení: skryté
- Vertikální přetečení: skryté
Výplň sekce
Chceme, aby byl efekt vertikálního posouvání horního obrázku (který sahá nad část) viditelný i přes skryté přetečení. Pojďme tedy přidat horní a dolní výplň rovnou výšce obrázku (300 pixelů).
Výsledek zatím
Právě teď se zde můžeme zastavit, pokud chcete zachovat design galerie bez mezer mezi obrázky. Výsledek zatím vypadá takto. Všimněte si, jak se obrázky pohybují svisle a vodorovně přesně o jeden blok / snímek.
Přidání prostoru mezi obrázky
Protože jsme nastavili šířku okapu na 1, mezi našimi sloupy nebo obrázky již nemáme okraj. Abychom znovu vytvořili podobné mezery, můžeme do každého rámečku přidat výplň.
To nám umožní vytvořit potřebné mezery, aniž by byla ohrožena funkčnost efektů posouvání. To je možné, protože přidání polstrování k obrázku nezvýší šířku ani výšku kontejneru s obrázkem. Podobný efekt můžete mít také pomocí okrajů.
Polstrování obrázku 1
Otevřete nastavení obrázku 1 a aktualizujte následující:
- Výplň: 10 pixelů nahoře, 10 pixelů dole, 10 pixelů vlevo, 10 pixelů vpravo
Rozšiřte výplň na všechny obrázky
Před uložením klikněte pravým tlačítkem na možnost odsazení a vyberte možnost „Rozšířit odsazení“. V rozbalovacím okně Rozbalit styly kliknutím na tlačítko Rozšířit rozšíříte tuto výplň na všechny obrázky na stránce.
Konečný výsledek
Zde je výsledek veškeré práce, kterou jsme dosud provedli.
Závěrečné myšlenky
Efekt posouvání posuvných hlavolamů uvedený v tomto článku nám přináší více než jedinečný design galerie obrázků. Rovněž poukazuje na to, že horizontální a vertikální posunutí pohybu lze použít pro přesnější posouvání efektů.
Nebojte se prozkoumat různé varianty tohoto rozložení změnou posunů a smícháním umístění obrázků.
Můžete také změnit počet sloupců, pokud pochopíte, jak se změní velikost sloupce / obrázku a jak aktualizovat posunutí efektu posouvání o odpovídající hodnotu.
Některé doporučené zdroje
Pravděpodobně najdete tyto ressources zajímavé, protože vám také umožní vytvářet fotogalerie na vašem WordPress blog.
- 10 zásuvných modulů pro vytváření fotogalerií na WordPress
- Jak vytvořit galerii fotografií pomocí pluginu Envira
- 5 WordPress pluginy pro vytvoření fotogalerií
- Jak používat modul galerie obrázků v Divi
