Chceli by ste si vytvoriť originálne Divi menu v podobe otočného kolieska pri vznášaní?
Vytvorenie otáčajúceho sa kolieska ponuky pri umiestnení kurzora myši je zábavný spôsob, ako na svojom zariadení predviesť užitočné odkazy webové stránky. Bol by to skvelý spôsob, ako poskytnúť viacero výziev na akciu v hlavičke, aby ste používateľov nasmerovali tam, kam potrebujú. A tiež by to bolo skvelé menu podkategórie váš blog.
V tomto návode vám ukážeme, ako vytvoriť otočné koliesko ponuky pri umiestnení kurzora myši v Divi. Dá sa to dosiahnuť pomocou kombinácie vstavaných možností Divi a niektorých vlastných úryvkov css.
prehľad
Predtým, ako sa pustíme do tohto návodu, pozrime sa na výsledok, ktorý chceme dosiahnuť.
Stiahnite si DIVI teraz!!!
Vytvorte novú stránku pomocou Divi Builder
Ak chcete začať, budete potrebovať nasledovné:
Na hlavnom paneli WordPress prejdite na Stránky> Pridať nové vytvoriť novú stránku.
Dajte tomu názov, ktorý vám dáva zmysel, a kliknite Použite Divi Builder
potom kliknite na tlačidlo Začnite stavať (Stavať od nuly)
Potom budete mať prázdne plátno, aby ste mohli začať navrhovať v Divi.
Dizajn otočného kolieska ponuky v Divi
Vytvorte sekciu a riadok 1
V predvolenom nastavení pridajte riadok s nasledujúcou štruktúrou stĺpcov.
Potom pridajte textový modul do riadku s nasledujúcim obsahom.
Potom aktualizujte dizajn textu takto:
- Písmo textu: Share Tech
- Medzera medzi písmenami textu: 1px
- Veľkosť textu nadpisu 2: 8vw
Pridajte riadok 2 a vytvorte koleso
Ďalej musíme pridať nový riadok do stĺpca pod riadkom 1.
Predtým, ako začneme pridávať naše textové moduly pre naše odkazy, musíme našu linku navrhnúť ako koleso. Na vytvorenie nášho dizajnu kolies bude v rade potrebných veľa optimalizácií.
Čítajte tiež: Ako odhaliť obsah po umiestnení kurzora myši na oddeľovač sekcií v Divi
Ak chcete začať, otvorte nastavenia riadka 2 a aktualizujte nasledujúce:
- Farba pozadia: #02366b
- Farba prechodu ľavého pozadia: rgba (0,0,0,0.45)
- Pravá farba prechodu pozadia: #02366b
- Typ prechodu: Kruhový
- Radiálny smer: Stred
- Počiatočná pozícia: 36%
- Koncová pozícia: 0 %
- Použiť vlastnú šírku odkvapu: ÁNO
- Šírka odkvapu: 1
- Šírka: 500 pixelov
- Maximálna šírka: 500 pixelov (stolný počítač), automaticky (tablet a telefón)
- Výška: 500 pixelov (stolný počítač), automaticky (tablet a telefón)
- Výplň (počítač): 0px (horná a dolná časť)
- Výplň (tablet a telefón): 20 pixelov (hore, dole a vľavo)
- Marža (telefón): -10 % (vpravo)
Musíme nastaviť výšku aj šírku čiary na 500 pixelov, aby to bol dokonalý štvorec. To nám umožní dať mu dokonalý kruhový tvar pomocou možnosti Divi zaoblených rohov (polomer okraja).
- Zaoblené rohy: 50 %
Ďalej môžeme pridať ďalšiu úroveň dizajnu kruhu pomocou tieňa rámčeka takto:
- Sila rozmazania rámčeka: 0px
- Sila rozprestretia rámčeka: 210 pixelov
- Farba tieňa: rgba (2,54,107,0.66)
Ďalej pridáme malý úryvok CSS na vertikálne vycentrovanie obsahu nášho riadka. Pod záložkou pokročilý, pridajte nasledujúci vlastný CSS do hlavného prvku.
display:flex;align-items:center;
Pridávanie odkazov
Každý odkaz v kolese bude vytvorený pomocou modulu text. Celkovo vytvoríme šesť modulov text. Päť z modulov text bude obsahovať odkazy na koliesko a druhý bude obsahovať názov ponuky.
Začnite vytvorením nového modulu „Text“.
Potom aktualizujte nastavenia textu takto:
- Body: „Prvok 1“
- Písmo textu: Share Tech
- Farba textu: #ffffff
- Veľkosť: 16 pixelov (predvolené), 20 pixelov (umiestnenie kurzora myši)
- Medzera medzi písmenami: 1px
- Výška riadku textu: 60 pixelov
- Šírka: 250 pixelov (stolný počítač), automatická (tablet a telefón)
- Výška: 60px
- Výplň (vľavo): 20 pixelov
Nastavenia zatiaľ uložte. Potom 4-krát duplikujte textový modul, aby ste vytvorili celkom 5 textových modulov.
Umiestnenie textových odkazov/modulov
Teraz sme pripravení umiestniť naše prepojenia pozdĺž obvodu kolesa. Za týmto účelom aktualizujeme každý modul text s možnosťami transformácie, ktoré posúvajú/prekladajú a otáčajú modul na mieste.
Objavte tiež: Ako vytvoriť mriežku stĺpca tekutiny pri vznášaní sa v divi
Aby ste to uľahčili, nasaďte režim zobrazenia drôtového modelu a označte textové moduly začínajúce odkazom 1 hore až odkazom 5 dole.
Odkaz 1
Začneme úpravou odkazu 1. Otvorte nastavenia modulu Text pre odkaz 1 a aktualizujte nasledovné:
- Transformovať preklad (os Y): 120 px (počítač), 0 px (tablet a telefón)
- Transformácia Rotácia (os Z): 60 stupňov (počítač), 0 px (tablet a telefón)
- Pôvod: 50 % (vpravo uprostred)
Odkaz 2
Otvorte nastavenia textového modulu pre odkaz 2 a aktualizujte nasledovné:
- Premeniť
- Preložiť (os Y): 60 pixlov (počítač), 0 pixlov (tablet a telefón)
- Rotácia osi Z: 30 stupňov (stolný počítač), 0 pixelov (tablet a telefón)
- Pôvod: 50 % (vpravo uprostred)
Odkaz 3
Keďže modul Text pre odkaz 3 je v strede, môžeme ho nechať na mieste.
Odkaz 4
Otvorte nastavenia textového modulu pre odkaz 2 a aktualizujte nasledovné:
- Transformácia:
- Preložiť os Y: -60 pixelov (počítač), 0 pixelov (tablety a telefóny)
- Rotácia osi Z: -30 stupňov (stolný počítač), 0px (tablet a telefón)
- Pôvod: 50 % (vpravo uprostred)
Odkaz 5
Otvorte nastavenia textového modulu pre odkaz 2 a aktualizujte nasledovné:
- Transformácia:
- Preložiť os Y: -120 pixelov (počítač), 0 pixelov (tablety a telefóny)
- Rotácia osi Z: -60 stupňov (stolný počítač), 0px (tablet a telefón)
- Pôvod: 50 % (vpravo uprostred)
Teraz sa pozrime na doterajší výsledok. Všimnite si, ako odkazy/texty v textových moduloch dokonale prechádzajú po obvode kruhu.
Pridaný štítok menu
Ak chcete pridať označenie ponuky, budeme musieť pridať ďalší textový modul k piatim textovým modulom, ktoré už máme. Pokračujte a pridajte nový textový modul nad odkaz 1.
Potom aktualizujte obsah tela nasledujúcim spôsobom:
Menu
Potom na urýchlenie návrhu skopírujte štýly modulu Text pre odkaz 3 a prilepte tieto štýly modulu do nového modulu Text.
Potom aktualizujte nasledovné:
- Výška riadku textu: 300 pixelov (počítač), 20 pixelov (tablet a telefón)
- Výška: obnovenie predvoleného nastavenia (auto)
- Transformácia rotácie (os Z): 180 stupňov (stolný počítač), 0 stupňov (tablet a telefón)
- Pôvod transformácie: 50 % (vpravo uprostred)
Po dokončení musíme dať modulu Text Label Text absolútnu pozíciu. Ak to chcete urobiť, pridajte do hlavného prvku nasledujúci vlastný CSS:
position: absolute!important;
Teraz zistite výsledok. Mali by ste vidieť, že položka ponuky je hore nohami napravo od kolieska.
Pridaný efekt rotujúceho vznášania na čiaru/koleso
Ak chcete do riadka pridať efekt otočného kurzora, aktualizujte nastavenia riadka takto:
- Transformácia rotácie (os Z): 180 stupňov (počítač), 0 stupňov (umiestnenie kurzora myši), 0 stupňov (tablet a telefón)
Potom aktualizujte nastavenia prechodu takto:
- Trvanie prechodu: 450 ms
- Prechod rýchlostnej krivky: Jednoduché nastupovanie
Teraz sledujte, ako sa koleso otáča, keď sa nad ním vznášate.
Vytvorenie rozloženia v dvoch stĺpcoch pre sekciu
V súčasnosti sa rozloženie skladá z dvoch jednostĺpcových radov naskladaných na sebe. Na horizontálne zarovnanie dvoch čiar však môžeme použiť vlastnosť flex css.
Na tento účel môžeme do sekcie pridať malý úryvok vlastného CSS. Akonáhle to urobíme, budeme musieť trochu upraviť rozostupy, aby boli veci v poriadku.
Otvorte nastavenia sekcie a pridajte nasledujúci vlastný css do hlavného prvku:
display:flex;
Aktualizujte riadkovanie 1
Potom aktualizujte veľkosť a medzery v riadku 1 takto:
- Šírka: 40 % (počítač)
- Marža (počítač): zostáva 5 %.
Konečný výsledok
Teraz sa pozrime na konečný výsledok.
Stiahnite si DIVI teraz!!!
Alternatívny dizajn polovičného kolesa
Pekný alternatívny dizajn je skryť pravú polovicu kolesa na vonkajšej strane sekcie tak, aby boli odkazy skryté a potom odhalené pri vznášaní.
Ak to chcete urobiť, pokračujte a duplikujte celú sekciu obsahujúcu výkres, ktorý sme práve vytvorili.
V sekcii duplikátov aktualizujte parametre v riadku 1 takto:
- Šírka: 70 % (stolný počítač)
Potom aktualizujte parametre v riadku 2, aby ste vytlačili koleso zo sekcie takto:
- Okraj: -250 pixelov vpravo
Musíme použiť -250px, pretože celková šírka kolieska je 500px a chceme skryť presne polovicu riadku.
Potom nastavte viditeľnosť sekcie na skrytú nasledovne:
- Horizontálne pretečenie: Skryté
- Vertikálne pretečenie: Skryté
Toto je konečný výsledok.
Stiahnite si DIVI teraz!!!
záver
Otočné článkové koleso je jedným z tých štýlových dizajnových prvkov, ktoré dokážu zaujať Návštevníci s jemným a jedinečným efektom vznášania. A je celkom úžasné, ako ľahko sa dá tento dizajn urobiť pomocou vstavaných nastavení dizajnu Divi.
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.
...
