Chcete být kreativní vytvořením rozbalitelného lepivého menu při umístění kurzoru myši divi ?
V tomto tutoriálu vám ukážeme, jak vytvořit rozšiřitelné lepivé menu při umístění kurzoru myši od Divi's Mechanic Layout Pack .
Postaráme se o dva různé vzorové návrhy, které můžete znovu vytvořit od začátku a aplikovat na jakýkoli typ Webové stránky které tvoříte!
Nabídka se zobrazí po najetí myší na plochu a aktivuje se po kliknutí na mobilních zařízeních.
Pojďme!
přehled
Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek na různých velikostech obrazovky.
Příklad 1
Stolní počítač
Mobilní aplikace
Stáhnout DIVI hned!!!
Příklad 2
Stolní počítač
Mobilní aplikace
Stáhnout DIVI hned!!!
Obecné kroky
Zakázat pevnou navigaci
Přístup k možnostem motivu Divi
Začneme několika obecnými kroky. Tyto kroky jsou pro oba příklady stejné a jsou nezbytné k dosažení požadovaného výsledku.
Pokud máte v úmyslu použít rozšiřující se pevnou nabídku v dolní části stránky, možná budete chtít vynechat hlavní lištu nabídky v horní části.
Čtěte také: Jak vytvořit vlastní překryvné obrázky v Divi
K tomu budete muset jít divi >> Možnosti motivu z řídicího panelu WordPress
Zakázat pevnou navigaci
Tam budete muset deaktivovat "Pevný navigační panel" abyste se ujistili, že v horní části stránky nezbývá žádné místo.
- Pevná navigační lišta: Vypnuto
Skrýt lištu hlavní nabídky na stránce
Otevřete nastavení stránky
Přejděte na stránku, na kterou chcete přidat rozbalitelnou pevnou nabídku, a otevřete nastavení stránky.
Přidejte vlastní CSS
Skryjte hlavní nabídku přidáním následujících řádků kódu CSS na stránku.
#main-header {
display: none;
}
Přidejte novou sekci na konec stránky
Bez ohledu na to, který příklad chcete znovu vytvořit, některé základní kroky zůstávají stejné. Prvním krokem je přidání běžné sekce do spodní části stránky.
vzdálenost
Otevřete nastavení sekce a změňte následující nastavení na kartě Design pod opcí Vzdálenost.
- Výplň (nahoře a dole): 0 pixelů
Přidat nový řádek
Struktura kolony
Pokračujte přidáním nového řádku pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů otevřete nastavení linky a změňte následující nastavení na kartě Design pod opcí Rozměry
- Použít vlastní šířku okapu: ANO
- Šířka žlabu: 1
- Šířka: 100 %
- Max. šířka: 100 %
vzdálenost
Poté odstraňte všechna výchozí horní a spodní vycpávka pod možností Vzdálenost.
- Výplň (nahoře a dole): 0 pixelů
Hlavní prvek
Umožňujeme, aby se celý řádek držel na konci naší stránky přidáním dvou jednoduchých řádků kódu CSS do prvku hlavního řádku.
bottom: 0px;
position: fixed;
Z-index
A zajistíme, aby řádek (a modul Text, který přidáme v dalších krocích) zůstal nad vším obsah stránky zvýšením indexu Z, možnost Rozbalit Pozice.
- Z-index: 99
Přidejte modul kódu do sloupce
Přidejte kód CSS mezi značky stylu
Poslední částí obecných kroků je přidání modulu Code do nového řádku. CSS kód, který přidáme do tohoto modulu Code, nám pomůže dosáhnout efektu odhalení při najetí myší.
Viz také: Jak vytvořit nabídku rotujícího kola na Hover v Divi
Do modulu vložte následující řádky kódu CSS:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Příklad designu #1
Přidejte do sloupce modul Text
Přidat obsah
Nyní, když jsme prošli všemi kroky, můžeme se začít soustředit na dva různé příklady designu, počínaje prvním!
Přidejte modul Text do sloupce řádku. V oblasti obsah, použijeme k zobrazení textu styl odstavce '≡Menu'.
Všechny položky nabídky pak umístíme do neuspořádaného seznamu. Přidáme také odkaz na každý z nadpisů stránek jednotlivě.
Výchozí barva pozadí
Přejděte do nastavení pozadí modulu a změňte barvu pozadí.
- Pozadí: #ffffff
Barva pozadí při najetí myší
Změňte tuto barvu pozadí při najetí myší.
- Pozadí (Hover): rgba (255,255,255,0.83)
Přechodové pozadí
A také přidat výchozí pozadí s přechodem.
- Barva vlevo: rgba (255,255,255,0)
- Správná barva: #ffffff
- Pozice vpravo: 60 %
Výchozí nastavení textu
Pokračujte přechodem na kartu Design a změna nastavení textu.
- Písmo textu: Khand
- Tloušťka písma: Tučné
- Barva textu: #021827
- Velikost textu: 3vh
- Orientace: Střed
Nastavení textového kurzoru myši
Změňte některá nastavení textu při umístění kurzoru.
- Barva textu (Hover: rgba(255,255,255,0)
- Velikost textu (přejetí myší): 0vh
Nastavení textu odkazu
Dále přejděte do nastavení textu odkazu a změňte barvu textu odkazu.
- Barva textu odkazu: #000000
Výchozí nastavení seznamu (počítač)
Přepněte na výchozí nastavení textu seznamu a upravte jej podle potřeby. Ujistěte se, že pro velikost textu ve výchozím stavu používáte '0px'.
- Neuspořádaný seznam Písmo: Khand
- Seznam Styl písma: TT
- Zarovnání textu seznamu: na střed
- Barva neuspořádaného textu: rgba (255,255,255,0)
- Velikost textu neuspořádaného seznamu: 0 px
- Hmotnost textu seznamu: 0 em
- Pozice stylu neuspořádaného seznamu: Uvnitř
Nastavení seznamu ukazatelů myši
Poté změňte některé hodnoty při umístění kurzoru, aby se položky nabídky mohly zobrazovat.
- Barva textu seznamu (umístění kurzoru): #000000
- Velikost textu neuspořádaného seznamu (umístění myši): 2vh
- Výška textu neuspořádaného seznamu (přejetí myší): 2,1 em
Výchozí mezera (počítač)
Poté přejděte na nastavení mezer (volba Vzdálenost) a dát tvar modulu Text.
- Okraj (levý a pravý): 45vw (stolní počítač), 39vw (tablet), 33vw (telefon)
- Polstrování (nahoře a dole): 2vw (stolní počítač), 4vw (tablet), 6vw (telefon)
Hover mezery
Upravte tyto stejné hodnoty při najetí myší.
- Okraj (levý a pravý): 14vw
- Polstrování (nahoře a dole): 8vw
Výchozí ohraničení (počítač)
Přejděte do nastavení ohraničení a ujistěte se, že každý ze zaoblených rohů má hodnotu '0px'.
Hranice při vznášení
Povolte možnosti umístění kurzoru na zaoblené rohy a změňte hodnoty vlevo nahoře a vpravo nahoře.
- Vlevo nahoře: 50vw
- Vpravo nahoře: 50vw
Stínová krabička
Pokračujte tím, že modulu dáte hloubku pomocí stínu rámečku. Tím zajistíte, že menu nezůstane na stránce bez povšimnutí.
- Síla rozostření rámečků: 1000 pixelů
- Barva stínu: rgba (0,0,0,0.68)
CSS třídy
Do modulu také přidáváme třídu CSS.
- CSS Třída: dt-menu
Přechody
Nakonec snižte dobu trvání přechodu v nastavení přechodů.
- Délka přechodu: 100 ms
Příklad designu #2
Přidejte do sloupce modul Text
Přidat obsah
Pojďme k druhému příkladu! Zde opět doplníme '≡Menu' pomocí stylu odstavcového textu a položek nabídky pomocí neuspořádaného seznamu. Přidáme také odkaz na každou z položek nabídky jednotlivě.
Výchozí barva pozadí (počítač)
Přejděte do nastavení pozadí a změňte barvu pozadí.
- Pozadí: #ffffff
Barva pozadí při najetí myší
Při najetí myší změňte barvu pozadí.
- Pozadí (umístění myši): #f71535
Výchozí nastavení textu (počítač)
Poté přejděte na kartu Design a provést nějaké změny ve vzhledu textu.
- Písmo textu: Khand
- Tloušťka písma: Tučné
- Barva textu: #021827
- Velikost textu: 3vh
Nastavení textu kurzorem
Změňte tato nastavení při umístění kurzoru myši.
- Barva textu (umístění myši): rgba (255,255,255,0)
- Velikost textu (přejetí myší): 0vh
Nastavení textu odkazu
Přejděte do nastavení textu a změňte barvu textu odkazu.
- Barva textu odkazu: #ffffff
Výchozí nastavení textu seznamu
Změňte také nastavení návrhu neuspořádaných položek seznamu.
- Neuspořádaný seznam Písmo: Khand
- Neuspořádaný seznam Styl písma: TT
- Zarovnání textu seznamu: na střed
- Barva textu neuspořádaného seznamu: rgba(255,255,255,0)
- Velikost textu seznamu: 0px
- Výška řádku neuspořádaného seznamu: 0 em
- Pozice stylu neuspořádaného seznamu: Uvnitř
Nastavení seznamu ukazatelů myši
A změňte některé z těchto hodnot při najetí myší.
- Barva textu neuspořádaného seznamu: #ffffff
- Velikost textu seznamu: 2vh
- Výška řádku neuspořádaného seznamu: 2,1 em
Výchozí mezera (počítač)
Poté přejděte do nastavení rozteče a dejte modulu prostor.
- Marže (vpravo): 88 vw (stolní počítač a tablet), 71 vw (telefon)
- Výplň (horní): 6 vw (stolní počítač), 10 vw (tablet), 18 vw (telefon)
- Polstrování (dole): 4 vw (stolní počítač), 10 vw (tablet), 12 vw (telefon)
- Levé polstrování: 1vw
Hover mezery
Změňte hodnoty při najetí myší.
- Marže (vpravo): 59vw
- Polstrování: (nahoře) 13vw, (dole) 8vw, (vlevo)1vw, (pravé)13vw
Hranice
A abychom vytvořili tento čtvrtkruhový design, změníme pravý horní okraj v nastavení ohraničení.
- Vpravo nahoře: 50vw
Stínová krabička
Přidáme také rámeček stínu pro vytvoření hloubky na stránce.
- Síla rozostření rámečku: 1000 pixelů
- Barva stínu: rgba (0,0,0,0.68)
CSS třídy
Dále do záložky přidáme třídu CSS pokročilý.
- CSS Třída: dt-menu
Přechody
A zkraťte dobu trvání přechodu na kartě pokročilý vytvořit rychlý přechod.
- Délka přechodu: 100 ms
přehled
Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.
Příklad č. 1
Kancelář
Mobilní aplikace
Stáhnout DIVI hned!!!
Příklad č. 2
Stolní počítač
Mobilní aplikace
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
V tomto článku jsme vám ukázali, jak vytvořit rozšiřitelné lepivé menu pomocí z Divi Mechanic Layout Pack. Pokryli jsme dva různé příklady designu, které můžete upravit a použít na jakýkoli typ Webové stránky které tvoříte!
Doufáme, že vás tento tutoriál inspiruje pro vaše další projekty. divi. 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.
...
