Vzhľadom k tomu, nové možnosti veľkosti divi Keď boli uvoľnené, existuje niekoľko návodov, ktoré vám ukážu, ako vytvoriť odhalenie vznášania. V týchto tutoriáloch je obsah maskovaný bol umiestnený vertikálne. V niektorých prípadoch však možno budete chcieť vytvoriť horizontálne odhalenie. V tomto návode vám ukážeme, ako odkryť obrázky pomocou mriežok a možností pretečenia. divi. Robiť túto prácu si vyžaduje trochu iný prístup. Použijeme rad jedného stĺpca a umiestnime všetky moduly pod seba. Pri vznášaní zmeníme stĺpec na vodorovnú mriežku. Môžete si tiež zadarmo stiahnuť súbor JSON!
Poďme.
prehľad
Predtým, ako sa ponoríme do tutoriálu, poďme sa rýchlo pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
Začnime znova!
Pridajte novú sekciu
Začnite pridaním novej pravidelnej sekcie na stránku, na ktorej pracujete.
Pridať nový riadok
Štruktúra stĺpcov
Pokračujte v pridávaní nového riadka pomocou nasledujúcej štruktúry stĺpca:
Predvolené pozadie prechodu
Bez pridania ďalších modulov otvorte parametre linky a pridajte nasledujúce pozadie gradientu:
- 1 farba: #b1ffc4
- Farba 2: #ffffff
- Typ gradientu: Radiálny
- Radiálny smer: stred
- Počiatočná pozícia: 28%
- Koncová pozícia: 28%
Lietanie nad gradientom pozadia
Pozastavením zmeníte pozadie gradientu.
- 1 farba: #b1ffc4
- Farba 2: #ffffff
- Typ gradientu: Radiálny
- Radiálny smer: vľavo
- Počiatočná pozícia: 5%
- Koncová pozícia: 5%
vzdialenosť
Prejdite na nastavenie medzery a potom zmeňte hodnoty výplne a okrajov.
- Najlepšie padding: 0px
- Spodné čalúnenie: 0px
- Horný okraj: 50px
- Dolný okraj: 50px
Predvolená hranica
Pridajte polomer ohraničenia 50 pixelov do pravého horného a dolného pravého rohu.
Hover Horder
Rohy uveďte do polohy „0px“.
Predvolený tieň
Potom pridajte jemný tieň poľa pomocou nasledujúcich parametrov:
- Box Shadow Blur Force: 50px
- Farba tieňa: rgba (0,0,0,0.09)
Shadow Box Hover
Keď preletíte, odstráňte tieň z políčka a farbu tieňa nahraďte úplne priehľadnou farbou.
- Farba tieňa: rgba (0,0,0,0)
Pridajte do stĺpca textový modul
Pridajte obsah H2
Je čas začať pridávať moduly, počnúc textovým modulom. Zadajte obsah H2 podľa vlastného výberu.
Nastavenia textu H2
Prepnite na kartu Dizajn a zodpovedajúcim spôsobom zmeňte nastavenie textu H2:
- Názov 2 Písmo: Acme
- Názov štýlu písma 2: Podčiarknuté
- Názov 2 Farba podčiarknutia: #00ff3f
- Názov 2 Farba textu: #000000
- Názov 2 Veľkosť textu: 3vw
vzdialenosť
Potom pridajte vlastné hodnoty výplne.
- Najlepšie vypchávky: 6vw
- Spodné čalúnenie: 7vw
- Ľavá výplň: 2vw
Pridajte do stĺpca obrazový modul
Nahrať obrázok
Druhý modul, ktorý v tomto stĺpci potrebujeme, je obrazový modul. Nahrajte obrázok krajiny podľa vášho výberu.
Svetelný box
Potom v nastaveniach odkazu aktivujte možnosť lightbox.
- Otvorené v prehliadači: áno
dimenzovanie
A vynútiť na obrázok celú šírku v nastaveniach veľkosti. Takto zabezpečíte, že obraz zostane citlivý pri všetkých veľkostiach obrazovky.
- Force Fullwidth: Áno
Klonovanie obrazového modulu dvakrát
Po dokončení prvého obrazového modulu ho môžete skopírovať dvakrát.
Zmeniť obrázky
Zmeňte obrázky v dvoch duplikátoch. Uistite sa, že obrázky, ktoré odovzdáte, majú rovnakú veľkosť ako prvý obrázok.
Pridajte do riadku efekt prevrátenia
dimenzovanie
Teraz, keď sme dokončili základné nastavenia riadkov a podov, je čas vytvoriť efekt vznášania! Začneme zmenou výšky a šírky čiary a skrytím prepadov. Otvorte nastavenia veľkosti riadkov a vykonajte nasledujúce zmeny:
- Použite vlastnú šírku odkvapov: Áno
- Šírka odkvapov: 1
- Šírka: 20%
- Maximálna šírka: 100%
- Výška: 15.9vw
vznášajúce
Počas pohybu kurzora zmenšite šírku na „100%“. Toto umožní, aby sa obrázky zobrazili po umiestnení kurzora myši.
- Šírka: 100%
viditeľnosť
Prepnite na ďalšiu pokročilú kartu a skryte pretečenia. Tým sa zabezpečí, že obrázky budú maskované pred Návštevníci umiestnite kurzor myši (desktop) alebo kliknite (tablet/mobil) na textový modul.
- Horizontálny prepad: skrytý
- Vertikálny prepad: skrytý
prechody
V parametroch prechodu tiež meníme trvanie prechodu.
- Trvanie prechodu: 0ms
Prvok prevrátenia hlavného stĺpca
Ak chcete vytvoriť mriežku vznášania, otvoríme nastavenia stĺpca, prejdeme na kartu Rozšírené možnosti a do hlavného prvku vznášania umiestnime nasledujúce riadky kódu CSS:
displej: mriežka; stĺpce šablóny mriežky: 20% 25% 25% 25%; medzera mriežky: 10px;
Riadok sa klonuje dvakrát
Keď dokončíte prvý riadok, môžete ho klonovať koľkokrát chcete. Pre tento konkrétny príklad návrhu riadok naklonujeme dvakrát.
Upravte gradientné pozadie riadku 1
Zmeňte farbu prvého prechodu na pozadí prechodu druhého riadku.
- 1 farba: # ffdc96
Zmeňte pozadie prechodu na čiare 2
To isté urobte pre tretí riadok.
- 1 farba: # b7c7ff
Zmeňte kópiu textového modulu a farbu podčiarknutia dvoch duplikátov
Pokračujte zmenou farby podčiarknutia duplikátov textového modulu spolu s kópiou a máte hotovo!
- Podčiarknutá farba # 1: # ffaa00
- Podčiarknutá farba # 2: # 0037ff
záverečné myšlienky
V tomto návode sme vám ukázali, ako zobraziť obrázky vo vodorovných mriežkach s prechodom pomocou možností pretečenia. divi. Obrázky sa odhalili po umiestnení kurzora myši na plochu a kliknutí na tablete/telefóne. Hoci sme odhalili obrázky, môžete ich odhaliť obsah podľa vášho výberu úpravou parametrov v generátore. Dúfame, že vás tento tutoriál inšpiruje k vytvoreniu vlastných alternatívnych návrhov vznášacej mriežky! Ak máte nejaké otázky alebo návrhy, nezabudnite zanechať komentár v sekcii komentárov nižšie!
