Navrhovanie zvýraznení obrázkov a textu je klasická dizajnérska technika, ktorú možno použiť na okorenenie obsah webovej stránky. Navyše, Divi uľahčuje vytváranie týchto odrazov priamo z Divi Builder bez toho, aby ste museli používať editor fotografií.
V tomto tutoriáli vám ukážem, ako navrhnúť odrazy pre obrázky v Divi. Kľúčom k odrazom je použitie možnosti Diviho transformácie na vytvorenie zrkadlovej verzie položky. Potom môžete pridať vlastné prekrytie, ktoré vám ukážem, ako sa používa s textovým modulom.
Začnime!
prehľad
Tu je prehľad návrhov, ktoré vytvoríme v tomto návode.
Čo potrebujete, aby ste začali
Ak chcete začať, všetko, čo potrebujete, je Divi. Uistite sa, že Divi téma je nainštalovaný a aktívny. Budeme vytvárať naše návrhy od začiatku pomocou Divi Builder na front-ende (vizuálny tvorca). Pre tento tutoriál budete potrebovať aj nejaké fiktívne obrázky (obrázok na pozadí približne 1920 pixelov x 600 pixelov a ďalší obrázok približne 500 pixelov x 350 pixelov).
Keď ste pripravení, prejdite na hlavný panel WordPress a prejdite na Stránky> Pridať. Dajte svojej novej stránke názov a nasaďte si aplikáciu Divi Builder na klientskom rozhraní. Vyberte možnosť „Vytvoriť od začiatku“. Teraz ste pripravení vyraziť!
Základná myšlienka vytvárania odrazu obrazu a textu v Divi
Základná myšlienka vytvárania reflexných vzorov v Divi obsahuje tri kroky:
- Vytvorte modul s obrázkom alebo textom
- Duplikujte modul a pomocou transformačnej mierky vytvorte zrkadlový obraz alebo text
- Pridajte k zrkadlovému prvku prechodové prekrytie pomocou rozdeľovača alebo absolútne umiestneného textového modulu.
Táto technika návrhu sa neobmedzuje iba na jednotlivé moduly. Pomocou tejto metódy, ktorá je užitočná na vytváranie jedinečných návrhov hlavičiek, môžete vlastne do Divi pridať odrazy do celých riadkov. Odraz pridáme do riadku nášho návrhu odrazu textu neskôr v tomto tutoriále. Zatiaľ však začnime vytvorením odrazu obrazu.
Ako vytvoriť odraz obrazu
Ak chcete vytvoriť odraz obrazu, začnime vytvorením novej pravidelnej sekcie s jedným stĺpcom.
Potom do riadku pridajte obrazový modul.
Stiahnite požadovaný obrázok z knižnice médií do modulu obrázkov. Potom aktualizujte nasledujúce nastavenia obrázka:
Maximálna šírka: 600px
Zarovnanie modulu: stred
Vlastná marža: 0px dole
Vytvorte zrkadlový obraz
Aby sme vytvorili efekt odrazu, je potrebné najskôr vytvoriť duplikát kópie obrázka priamo pod obrázkom.
Ak to chcete urobiť, duplikujte obrazový modul. Potom aktualizujte nastavenia duplicitného obrázka nasledovne:
Nepriehľadnosť: 40%
Miera transformácie osi X: -100%
Vlastnosť Transformovať mierku je to, čo kúzlom prevráti obraz vertikálne a horizontálne, aby sa vytvorila zrkadlová verzia obrázka.
To podporuje základný dizajn odrazu. K dolnému obrázku však môžeme pridať ďalšie prekrytie gradientu, aby sa vytvoril realistickejší obraz odrazu.
Pridajte prechodovú vrstvu pomocou textového modulu
Na pridanie prechodového prekrytia na náš spodný obrázok môžeme použiť textový modul. Textovému modulu môžeme dať absolútnu polohu tak, aby bol nad spodným obrázkom. Ďalej môžeme do textového modulu pridať pozadie s prechodom. Použitie textového modulu (namiesto oddeľovača) vám poskytne ďalšiu možnosť pridávania obsah v prípade potreby neskôr cez odrazový obrázok.
Pokračujte ďalej a vytvorte textový modul pod spodným obrázkom.
Vymaž to obsah predvolene tak, že textový modul je prázdny.
Potom aktualizujte nastavenia textového modulu nasledovne:
Ľavý gradient pozadia Farba: rgba (255,255,255,0)
Pozadie gradient vpravo Farba: #ffffff
Šírka: 100%
Výška: 50%
Potom pridajte do hlavného prvku nasledujúci vlastný kód CSS:
pozícia: absolútne! dôležité; vrchná časť: 50%;
Toto absolútne umiestnenie textového modulu prekrýva textový modul na spodnej polovici riadku.
Pridáva sa farba pozadia
Ak nechcete mať biele pozadie, môžete na vytvorenie odrazového vzoru v celej šírke použiť iné farby pozadia.
Ak to chcete urobiť, otvorte nastavenia linky a aktualizujte nasledujúce informácie:
Farba pozadia: #000000
Šírka: 100%:
Max Šírka: 100%;
Vlastné polstrovanie: 0px vysoké, 0px dole
Pozrime sa teraz na výsledok.
Odrazy môžu vyzerať naozaj skvele, ak si nájdete čas na ich správny dizajn. Našťastie má Divi outils uspieť. Existujú aj iné metódy na vykonávanie odrazov CSS, ale bohužiaľ im zvyčajne chýba podpora zo strany prehliadačov. Návrhy v tomto návode budú vyzerať skvele vo všetkých prehliadačoch.
Našiel som odrazy, ktoré vyzerajú skvele v hlavičkách stránok a pri prezentácii obrázkov pre položku z portfólia. A som si istý, že existuje veľa ďalších implementácií.
To je pre tento tutoriál všetko, dúfam, že vám umožní pridať úvahy na vašom webe WordPress pomocou interných funkcií Divi.
