Chtěli byste si vytvořit originální Divi menu v podobě otočného kolečka na vznášet se?
Vytvoření rotujícího kolečka nabídky při umístění kurzoru je zábavný způsob, jak předvést užitečné odkazy na vašem počítači Webové stránky. Byl by to skvělý způsob, jak v záhlaví poskytnout více výzev k akci, které uživatele nasměrují tam, kam potřebují. A bylo by to také skvělé menu podkategorie váš blog.
V tomto tutoriálu vám ukážeme, jak vytvořit otočné kolečko nabídky při najetí myší v Divi. To lze provést pomocí kombinace vestavěných možností Divi a některých vlastních úryvků css.
přehled
Než se pustíme do tohoto tutoriálu, podívejme se na výsledek, kterého chceme dosáhnout.
Stáhnout DIVI hned!!!
Vytvořte novou stránku pomocí Divi Builder
Chcete-li začít, budete potřebovat následující:
Z řídicího panelu WordPress přejděte na Stránky> Přidat nové vytvořit novou stránku.
Dejte tomu název, který vám dává smysl, a klikněte Použijte Divi Builder
poté klikněte na tlačítko Začněte stavět (Sestavte od nuly)
Poté budete mít prázdné plátno, abyste mohli začít navrhovat v Divi.
Návrh otočného menu v Divi
Vytvořte sekci a řádek 1
Ve výchozím nastavení přidejte řádek s následující strukturou sloupců.
Poté přidejte textový modul na řádek s následujícím obsahem.
Dále aktualizujte návrh textu následovně:
- Písmo textu: Share Tech
- Mezera mezi písmeny textu: 1px
- Velikost textu nadpisu 2: 8vw
Přidejte řádek 2 a vytvořte kolo
Dále musíme přidat nový řádek do sloupce pod řádkem 1.
Než začneme přidávat naše textové moduly pro naše odkazy, musíme naši linku navrhnout jako kolo. Aby bylo možné vytvořit náš design kola, na řadě bude potřeba mnoho optimalizací.
Čtěte také: Jak odhalit obsah na rozdělovači sekce Hover v Divi
Chcete-li začít, otevřete nastavení řádku 2 a aktualizujte následující:
- Barva pozadí: #02366b
- Barva přechodu levého pozadí: rgba(0,0,0,0.45)
- Pravá barva přechodu pozadí: #02366b
- Typ přechodu: Kruhový
- Radiální směr: Střed
- Výchozí pozice: 36 %
- Koncová pozice: 0 %
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Šířka: 500px
- Maximální šířka: 500 pixelů (počítač), automaticky (tablet a telefon)
- Výška: 500 pixelů (počítač), automaticky (tablet a telefon)
- Odsazení (počítač): 0px (nahoře a dole)
- Výplň (tablet a telefon): 20 pixelů (nahoře, dole a vlevo)
- Marže (telefon): -10 % (vpravo)
Musíme nastavit výšku i šířku čáry na 500 pixelů, aby to byl dokonalý čtverec. To nám umožní dát mu dokonalý kruhový tvar pomocí možnosti Divi zaoblených rohů (poloměr okraje).
- Zaoblené rohy: 50 %
Dále můžeme přidat další úroveň návrhu kruhu pomocí stínu rámečku následovně:
- Síla rozostření rámečku: 0px
- Síla rozložení stínu krabice: 210 pixelů
- Barva stínu: rgba (2,54,107,0.66)
Dále přidáme malý úryvek CSS, který svisle vycentruje obsah našeho řádku. Pod záložkou pokročilý, přidejte do hlavního prvku následující vlastní CSS.
display:flex;align-items:center;
Přidávání odkazů
Každý odkaz v kole bude vytvořen pomocí modulu Text. Vytvoříme celkem šest modulů Text. Pět modulů Text bude obsahovat odkazy na kolo a druhý bude obsahovat název nabídky.
Začněte vytvořením nového modulu „Text“.
Dále aktualizujte nastavení textu následovně:
- Body: "Prvek 1"
- Písmo textu: Share Tech
- Barva textu: #ffffff
- Velikost: 16px (výchozí), 20px (umístění kurzoru)
- Mezera mezi písmeny: 1px
- Výška řádku textu: 60px
- Šířka: 250 pixelů (počítač), automaticky (tablet a telefon)
- Výška: 60px
- Výplň (vlevo): 20 pixelů
Nastavení prozatím uložte. Poté 4krát duplikujte textový modul, abyste vytvořili celkem 5 textových modulů.
Umístění Textové odkazy/moduly
Nyní jsme připraveni umístit naše články podél obvodu kola. Za tímto účelem aktualizujeme každý modul Text s možnostmi transformace, které pohybují/překládají a otáčí modul na místě.
Objevte také: Jak vytvořit mřížku sloupce tekutiny při vznášení v divi
Chcete-li to usnadnit, aktivujte režim drátového zobrazení a označte textové moduly počínaje odkazem 1 nahoře až po odkaz 5 dole.
Odkaz 1
Začneme úpravou odkazu 1. Otevřete nastavení modulu Text pro odkaz 1 a aktualizujte následující:
- Transformovat překlad (osa Y): 120 px (počítač), 0 px (tablet a telefon)
- Transformace Rotace (osa Z): 60 stupňů (počítač), 0 px (tablet a telefon)
- Původ: 50 % (vpravo uprostřed)
Odkaz 2
Otevřete nastavení textového modulu pro odkaz 2 a aktualizujte následující:
- Změnit
- Přeložit (osa Y): 60 pixelů (počítač), 0 pixelů (tablet a telefon)
- Rotace osy Z: 30 stupňů (počítač), 0 pixelů (tablet a telefon)
- Původ: 50 % (vpravo uprostřed)
Odkaz 3
Vzhledem k tomu, že modul Text pro odkaz 3 je uprostřed, můžeme jej ponechat na místě.
Odkaz 4
Otevřete nastavení textového modulu pro odkaz 2 a aktualizujte následující:
- Přeměnit:
- Přeložit osa Y: -60px (počítač), 0px (tablet a telefon)
- Rotace osy Z: -30 stupňů (počítač), 0px (tablet a telefon)
- Původ: 50 % (vpravo uprostřed)
Odkaz 5
Otevřete nastavení textového modulu pro odkaz 2 a aktualizujte následující:
- Přeměnit:
- Přeložit osa Y: -120px (počítač), 0px (tablet a telefon)
- Rotace osy Z: -60 stupňů (stolní počítač), 0px (tablet a telefon)
- Původ: 50 % (vpravo uprostřed)
Nyní se podívejme na dosavadní výsledek. Všimněte si, jak odkazy/texty v textových modulech dokonale probíhají po obvodu kruhu.
Přidán popisek menu
Chcete-li přidat štítek nabídky, budeme muset přidat další textový modul k pěti textovým modulům, které již máme. Pokračujte a přidejte nový textový modul nad odkaz 1.
Dále aktualizujte obsah těla následujícím způsobem:
Menu
Poté pro urychlení návrhu zkopírujte styly modulu Text pro odkaz 3 a vložte tyto styly modulu do nového modulu Text.
Poté aktualizujte následující:
- Výška řádku textu: 300 pixelů (počítač), 20 pixelů (tablet a telefon)
- Výška: obnovit výchozí nastavení (auto)
- Transformace Rotace (osa Z): 180 stupňů (počítač), 0 stupňů (tablet a telefon)
- Počátek transformace: 50 % (vpravo uprostřed)
Jakmile je hotovo, musíme dát modulu Text Label Text absolutní pozici. Chcete-li to provést, přidejte do hlavního prvku následující vlastní CSS:
position: absolute!important;
Nyní zjistěte výsledek. Měli byste vidět, že položka nabídky je vzhůru nohama napravo od kolečka.
Přidán efekt rotujícího vznášení na čáru/kolečko
Chcete-li do řádku přidat efekt otočného najetí, aktualizujte nastavení řádku následovně:
- Transformace Rotace (osa Z): 180 stupňů (počítač), 0 stupňů (přejetí myší), 0 stupňů (tablet a telefon)
Dále aktualizujte nastavení přechodu následovně:
- Délka přechodu: 450 ms
- Přechod rychlostní křivky: Snadný nástup a výstup
Nyní sledujte, jak se kolo otáčí, když na něj najedete.
Vytvoření dvousloupcového rozvržení sekce
V současné době se rozvržení skládá ze dvou jednosloupcových řad naskládaných na sebe. Můžeme však použít vlastnost flex css k vodorovnému zarovnání dvou čar.
K tomu můžeme do sekce přidat malý úryvek vlastního CSS. Až to bude hotové, budeme muset trochu upravit rozestupy, aby bylo vše v pořádku.
Otevřete nastavení sekce a přidejte následující vlastní css do hlavního prvku:
display:flex;
Aktualizujte řádkování 1
Dále aktualizujte velikost a mezery řádku 1 následovně:
- Šířka: 40 % (počítač)
- Marže (počítač): zbývá 5 %.
Konečný výsledek
Nyní se podívejme na konečný výsledek.
Stáhnout DIVI hned!!!
Alternativní provedení polokola
Zajímavým alternativním provedením je skrytí pravé poloviny kola mimo sekci tak, aby byly spoje skryty a následně odhaleny při visení.
Chcete-li to provést, pokračujte a duplikujte celou sekci obsahující výkres, který jsme právě vytvořili.
V sekci duplikátů aktualizujte parametry na řádku 1 následovně:
- Šířka: 70 % (počítač)
Dále aktualizujte nastavení v řádku 2 tak, aby se kolo vysunulo ze sekce:
- Okraj: -250 pixelů vpravo
Potřebujeme použít -250px, protože celková šířka kolečka je 500px a chceme skrýt přesně polovinu řádku.
Poté nastavte viditelnost sekce na skryté následovně:
- Horizontální přetečení: Skryté
- Vertikální přetečení: Skryté
Zde je konečný výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Otočné článkové kolo je jedním z těch stylových designových prvků, které mohou zapojit Návštěvníci s jemným a jedinečným efektem vznášení. A je docela úžasné, jak snadno lze tento design provést pomocí vestavěných nastavení designu Divi.
Doufáme, že vás tento tutoriál inspiruje pro vaše další Divi projekty. Pokud máte nějaké obavy nebo návrhy, najděte nás v sekci komentářů diskutovat o tom.
Můžete se také poradit naše zdroje, pokud potřebujete více prvků k realizaci vašich projektů vytváření internetových stránek, nahlédněte do našeho průvodce na internetu Vytvoření blogu WordPress nebo ten, který je zapnutý Divi: nejlepší téma WordPress všech dob.
Mezitím sdílejte tento článek na různých sociálních sítích.
...
