Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Chcete prezentovať svoje funkcie alebo produkty vo forme karty divi s efektom vznášania?

Hľadáte nové kreatívne spôsoby, ako prezentovať funkcie a/alebo produkty na svojich webových stránkach? 

Ak áno, pokračujte v čítaní, pretože v tomto článku vám ukážeme, ako zobraziť funkcie na kartách pri umiestnení kurzora myši iba pomocou vstavaných možností divi. Možnosti, ktoré s týmto prístupom máte, sú nekonečné a určite vám umožnia pochopiť Divi na hlbšej úrovni. 

Efekt kurzora myši sa prejaví iba na pracovnej ploche. Na menších obrazovkách sa zobrazia vo svojich normálnych tvaroch.

Poďme!

prehľad

Pred ponorením sa do tohto návodu sa pozrime na výsledok, ktorý chceme dosiahnuť.

Karta Divi s efektom vznášania

Začnime proces tvorby s Divi

Pridajte novú sekciu

Gradient pozadia

Pridajte novú stránku alebo otvorte existujúcu stránku a pridajte novú sekciu. Otvorte nastavenia sekcie a pridajte do sekcie pozadie s prechodom.

  • Farba vľavo: #f2f2f2
  • Pravá farba: #ffffff
  • Smer gradientu: 87 stupňov
  • Ľavá pozícia: 20%
  • Pravá pozícia: 80%

vzdialenosť

Ďalej zmeňte nasledujúce nastavenia medzier:

  • Výplň (horná a dolná časť): 0 pixelov

Pridať nový riadok

Štruktúra stĺpca

Pokračujte pridaním nového riadka do sekcie pomocou nasledujúcej štruktúry stĺpcov:

Farba pozadia

Zatiaľ bez pridania modulov otvorte nastavenia riadkov a zmeňte farbu pozadia.

  • Farba pozadia: #ffffff

Veľkosť a zarovnanie

Na karte dizajn, potiahnite možnosť nadol Dimenzovanie a zmeňte nasledujúce nastavenia:

  • Použiť vlastnú šírku odkvapu: ÁNO
  • Šírka odkvapu: 1
  • Šírka: 400 pixelov
  • Zarovnanie riadkov: doľava

Veľkosť po umiestnení kurzora myši

Zmeniť možnosť Šírka v nastaveniach veľkosti kurzora. To umožní, aby sa čiara pri vznášaní rozťahovala.

  • Šírka (umiestnenie myši): 2 pixelov

vzdialenosť

Potom prejdite na nastavenia medzier v možnosti riadkovanie

  • Výplň (horná a dolná časť): 0 pixelov

Ohraničenie (počítač)

Pridajte '20px' do pravého horného rohu čiary a tiež pridajte ľavé orámovanie čiary.

  • Zaoblené rohy (počítač): 20 pixelov (pravý horný roh)
  • Šírka ľavého okraja: 20 px
  • Farba ľavého okraja: #6d44ff

Hranica pri vznášaní sa

Odstráňte pravý horný zaoblený roh „20px“ pri umiestnení kurzora myši tak, že namiesto neho pridáte „0px“.

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

Box Shadow (počítač)

Nakoniec pridajte jemný tieň.

  • Sila rozmazania rámčeka: 80 pixelov
  • Sila rozpätia tieňa rámčeka: -10px
  • Farba tieňa: rgba (0,0,0,0.11)

Vznášať sa tieň

A zmeňte farbu tieňa na úplne priehľadnú farbu pri prechode myšou.

  • Box Shadow: rgba (255,255,255,0)

Pridajte modul Blurb do riadka

Pridajte obsah

Teraz, keď sme dokončili zmenu všetkých nastavení riadkov, môžeme pokračovať a pridať do stĺpca modul Blurb. Neváhajte použiť akýkoľvek iný modul podľa vlastného výberu. 

Po pridaní modulu pridajte obsah podľa vlastného výberu.

Vyberte ikonu

Potom vyberte ikonu podľa vlastného výberu.

Nastavenia ikon

A zmeniť vzhľad ikony v nastaveniach ikony. Prejdite na kartu dizajn

  • Farba ikony: #5323ff
  • Umiestnenie obrázka/ikony: Hore
  • Šírka obrázka/ikony: 50 pixelov

Nastavenia nadpisu textu (počítač)

Potom zmeňte nastavenia titulu.

  • Písmo názvu: Poppins
  • Zarovnanie textu: na stred
  • Farba textu nadpisu: #5323ff
  • Veľkosť textu nadpisu: 25px
  • Medzera medzi písmenami: -1px
  • Výška riadku: 1 em

Nastavenia nadpisu textu umiestnite kurzorom myši

A zmeniť výšku riadku nadpisu pri umiestnení kurzora myši.

  • Výška riadku nadpisu: 1,5 em

Nastavenia textu tela (počítač)

Ďalej prejdite do nastavení hlavného textu a vykonajte nejaké zmeny. To zahŕňa aj zmenu veľkosti textu na „0 pixelov“. Pomôže nám to, aby sa hlavný text zobrazoval iba pri umiestnení kurzora myši.

  • Písmo tela: Poppins
  • Hmotnosť písma tela: svetlá
  • Zarovnanie textu: na stred
  • Farba textu tela: #000000
  • Veľkosť hlavného textu: 0 pixelov (počítač), 15 pixelov (tablet a telefón)
  • Výška riadku: 2,2 em

Nastavenia textu tela pri umiestnení kurzora myši

Ak chcete zabezpečiť, aby sa hlavný text zobrazil pri umiestnení kurzora myši, zmeňte veľkosť textu pri umiestnení kurzora myši.

  • Veľkosť hlavného textu: 15 pixelov
kurzorové karty

Medzery (počítač)

Chcete predávať svoje produkty na internete?

Stiahnite si zadarmo WooCommerce, najlepšie doplnky elektronického obchodu na predaj vašich fyzických a digitálnych produktov na WordPress a jednoduché vytvorenie vášho online obchodu. Ideálne pre začiatočníkov.

Aby sme modulu poskytli priestor, upravíme nasledujúce parametre rozstupov:

  • Výplň (horná a dolná časť): 80 pixelov
kurzorové karty

Medzera po umiestnení kurzora myši

Zmeníme nastavenia rozstupov kurzora.

  • Výplň (horná a dolná časť): 80 pixelov
  • Polstrovanie (ľavé a pravé): 20vw

Klonujte riadok 3 krát

Po dokončení úprav prvého riadka a jeho modulu Blurb môžete pokračovať a klonovať riadok toľkokrát, koľkokrát chcete.

Edit Line and Blurb Module #2

Zmeňte farbu okraja čiary

Začnime zmenou farby ľavého okraja čiary.

  • Farba ľavého okraja: #00ffcc

Upravte obsah a ikonu Blurb

Potom otvorte nastavenia modulu Blurb a zmeňte ikonu.

Zmeniť farbu ikony modulu Blurb

S farbou ikony.

  • Farba ikony: #00eda6

Zmeniť farbu nadpisu

A farba textu nadpisu.

  • Farba textu nadpisu: #00eda6

Upraviť riadok a modul Burb #3

Farba okraja čiary

Zmeňme farbu okraja ľavého riadku.

  • Farba ľavého okraja: #afebff

Upravte obsah a ikonu Blurb

Zmeňme tiež ikonu a obsah reklamy.

Zmeniť farbu ikony modulu Blurb

Zmeňte aj farbu ikony.

  • Farba ikony: #68d9ff

Zmeňte farbu textu nadpisu

A farba nadpisu tiež.

  • Farba textu nadpisu: #68d9ff

Edit Line and Blurb Module #4

Zmeňte farbu okraja čiary

V ďalšom a poslednom module zmeňte aj farbu ľavého okraja čiary.

  • Farba ľavého okraja: #dd87cf

Upravte obsah a ikonu Blurb

Otvorte vložený modul Blurb a upravte ikonu modulu a obsah.

Zmeniť farbu ikony modulu Blurb

S farbou ikony.

  • Farba ikony: #dd6aca

Zmeňte farbu textu nadpisu

A farba nadpisu tiež.

  • Farba textu nadpisu: #dd6aca
Karta Divi s efektom vznášania

prehľad

Teraz, keď sme si prešli návod, poďme sa naposledy pozrieť na výsledok.

Karta Divi s efektom vznášania

Stiahnite si DIVI teraz!!!

záver

V tomto článku sme vám ukázali, ako používať vstavané možnosti Divi iba na vytváranie kariet dostupných pri umiestnení kurzora myši. 

Tento prístup vám pomôže interaktívne zdieľať obsah o funkciách alebo produktoch. 

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.

...

%d bloggerov sa páči táto stránka: