Chcete použiť efekty tieňa a vznášania? divi vytvárať obsah interaktívne a vyniknite webové stránky ?
Uistite sa, že vaše webové stránky odlíšiť sa od podobných webových stránok môže byť ťažké. Ale akonáhle sa tam dostanete, takmer vždy to stojí za námahu a myšlienku, ktorá do toho vstúpila.
Ukážeme vám, ako vytvoriť obsah interaktívne pri vytváraní webových stránok s divi.
Poďme!
prehľad
Predtým, ako sa ponoríme do tohto návodu, pozrime sa v krátkosti na výsledok, ktorý môžete očakávať.
Stolný počítač
Mobilné
Začnime s realizáciou s Divi!
Pozri tiež: Divi: Ako vytvoriť ponuku rotujúceho kolesa pri umiestnení kurzora myšil
Pridajte novú sekciu
Farba pozadia
Vytvorte novú stránku alebo otvorte existujúcu a pridajte na ňu bežnú sekciu. Otvorte nastavenia sekcie a zmeňte farbu pozadia.
- Pozadie: #03006d
vzdialenosť
Potom prejdite na nastavenia rozstupov sekcií a zmeňte ich takto:
- Výplň (horná a dolná časť): 50 pixelov
Pridať nový riadok
Štruktúra stĺpca
Pokračujte pridaním nového riadku do sekcie pomocou nasledujúcej stĺpcovej štruktúry.
dimenzovanie
Potom prejdite na nastavenia veľkosti a nechajte čiaru vyplniť celú šírku obrazovky.
- Použiť vlastnú šírku odkvapu: ÁNO
- Šírka odkvapu: 1
- Šírka: 100 %
vzdialenosť
Zmeňme aj nasledujúce nastavenia medzier:
- Výplň (vpravo): 9vw (stolný počítač), 5vw (tablet a telefón)
- Výplň (vpravo): 5VW (tablet a telefón)
Pridajte textový modul do stĺpca 1
Pridajte obsah
Po dokončení úprav nastavení riadkov pridajte prvý textový modul do stĺpca 1.
Pridajte prvý znak ako text odseku. Potom obsah ktorý chcete zobraziť ako text zoznamu.
Nastavenia textu (počítač)
Potom prejdite na kartu dizajna zmeniť predvolené nastavenia textu odseku. Uistite sa, že používate rovnakú farbu pre text sekcie a pozadie.
- Hmotnosť písma: Ultra Bold
- Farba textu: #03006d
- Veľkosť textu: 27vw (stolný počítač), 0vw (tablet a telefón)
- Výška riadku: 1,1 em
- Textový tieň: Pozrite si záber
- Sila rozmazania tieňa: 0,01 em
- Farba tieňa: #ffffff
- Zarovnanie textu: doľava
Nastavenia textu kurzorom myši
Aby sme vytvorili pekný efekt vznášania, budeme musieť zmeniť tieto nastavenia textu odstavca.
- Farba textu (umiestnenie myši): #ffffff
- Farba tieňa (vznášanie): rgba (255,255,255,0)
Nastavenia zoznamu (počítač)
Pokračujte prechodom na nastavenia záznamu.
- Hmotnosť písma: Svetlá
- Farba textu zoznamu: #ffffff
- Veľkosť textu zoznamu: 0 pixelov (počítač), 18 pixelov (tablet a telefón)
- Pozícia štýlu: Kruh
- Pozícia štýlu neusporiadaného zoznamu: Vonku
- Nezoradené odsadenie položky zoznamu: 0px
Nastavenia textu zoznamu pri umiestnení kurzora myši (umiestnenie kurzora myši)
Chceme, aby sa text zoznamu zobrazil pri umiestnení kurzora myši. Z tohto dôvodu zmeníme veľkosť textu pri umiestnení kurzora myši.
- Veľkosť textu neusporiadaného zoznamu (umiestnenie kurzora myši): 18 pixelov
vzdialenosť
Pokračujte tak, že prejdete na nastavenia rozstupov modulov a vykonajte nejaké zmeny aj tam.
- Okraj (dole): 50 pixelov (tablet a telefón)
- Okraj (vpravo): -4vw (stolný počítač), 0vw (tablet a telefón)
Naklonujte textový modul 4-krát a umiestnite duplikáty do zostávajúcich stĺpcov
Teraz, keď sme dokončili úpravu prvého modulu v stĺpci 1, naklonujte modul štyrikrát. Potom umiestnite každý z duplikátov do zostávajúcich stĺpcov. Každý z duplikátov upravíme tak, aby zodpovedal tomu, čo chceme.
Zmeňte textový modul v stĺpci 2
upraviť obsah
Otvorte duplikát v stĺpci 2 a upravte obsah.
Zmeňte rozstup
Ďalej prejdite na nastavenia medzier a zmeňte hodnoty vlastných okrajov.
- Okraj (dole): 50 pixelov (tablet a telefón)
- Okraj (ľavý a pravý): -2vw (stolný počítač), 0vw (tablet a telefón)
- Pravý okraj: -2vw (stolný počítač), 0vw (tablet a telefón)
Zmeňte textový modul v stĺpci 3
upraviť obsah
Zmeňte aj obsah duplikátu v stĺpci 3.
Zmeňte rozstup
S nastavením medzier na karte návrh.
- Marža (vľavo): 2,5 vw
- Marža (vpravo): 1,5 vw
Upravte textový modul v stĺpci 4
upraviť obsah
Pokračujte otvorením nastavení modulu Text v stĺpci 4 a upravte obsah aj tam.
Zmeňte rozstup
Ďalej prejdite na kartu Návrh a upravte hodnoty vlastných okrajov v nastaveniach medzier.
- Okraj (vľavo): -6vw
- Okraj (vpravo): 2vw
Upravte textový modul v stĺpci 5
Obsah
Uvoľnite miesto pre posledný duplikát. Upravte obsah v oblasti obsahu.
Zmeňte rozstup
S vlastným nastavením medzier.
- Okraj (vľavo): -7vw
- Okraj (vpravo): 3vw
prehľad
Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.
Čítajte tiež: divi : Ako prispôsobiť ikony košíka a vyhľadávania v module „Ponuka plnej šírky“.
kancelária
Mobilné
Stiahnite si DIVI teraz!!!
záver
Vieme, aké dôležité je zabezpečiť, aby vaše webové stránky sa odlišuje od iných webových stránok. Vďaka vstavaným možnostiam Divi môžete byť kreatívni, ako len chcete.
Tento článok je príkladom toho, ako môžete vytvoriť interaktívny obsah po umiestnení kurzora myši.
Dúfame, že vás tento návod inšpiruje pre vaše ďalšie Divi projekty. Ak máte nejaké obavy alebo návrhy, nájdite nás v časť s komentármi diskutovať o tom.
Môžete sa tiež poradiť naše zdroje, ak potrebujete viac prvkov na realizáciu svojich projektov tvorby internetových stránok, konzultujte nášho sprievodcu na internete Tvorba blogu WordPress alebo jeden na Divi: najlepšia téma WordPress všetkých čias.
Ale medzičasom zdieľajte tento článok na rôznych sociálnych sieťach.
...
