Potřeba k vytvoření průhledného plovoucího menu divi ?
Hledáte způsob, jak umístit vaše celkové záhlaví nad hlavní části vašich stránek? V tutoriálu divi Dnes vám přesně ukážeme, jak na to.
Vytvoříme úžasné globální záhlaví od začátku (pomocí konstruktoru témata de divi) a na lištu nabídek použijeme plovoucí efekt.
Pojďme.
přehled
Než se ponoříme do tohoto tutoriálu, pojďme se rychle podívat na výsledek, kterého chceme dosáhnout.
Přejděte do Divi's Theme Builder a přidejte novou šablonu
Allez na Divi > Theme Builder.
Vytvořte globální záhlaví s Divi Theme Builder
Klikněte na „Přidat globální záhlaví“ a pokračujte výběrem „Vytvořit globální záhlaví“.
Nastavení sekce
Barva pozadí
Jakmile jste v editoru šablon, všimnete si sekce na stránce. Otevřete tuto sekci a změňte barvu pozadí na zcela průhlednou barvu. To umožní zobrazit vše pod sekcí.
- Pozadí: rgba(0,0,0,0)
dimenzování
Poté přejděte na kartu Styl sekce a změňte maximální šířku.
- Maximální šířka (viz snímek obrazovky): 100 %
vzdálenost
Odstraňte také všechny výchozí horní a dolní vnitřní okraje.
- Vertex vnitřního okraje: 0px
- Spodní vnitřní okraj: 0px
Z-index
A aby sekce zůstala nad vším obsah Ze sekce hrdina budeme muset zvýšit z-index v nastavení viditelnosti.
- Z-index: 99999
Přidat nový řádek
Struktura kolony
Jakmile dokončíte nastavení sekce, můžete přidat nový řádek pomocí následující struktury sloupců:
dimenzování
Bez přidání jakýchkoli modulů otevřete nastavení řádku a změňte nastavení velikosti následovně:
- Harmonizovat výšky sloupců: Ano
- Maximální šířka: 100%
- Maximální šířka: 100%
vzdálenost
Poté přidejte vlastní vnitřní okraje (nahoře a dole).
- Špičkový vnitřní okraj: 2vw
- Spodní vnitřní okraj: 0vw
Hlavní prvek
Dále přejděte na kartu Upřesnit a ujistěte se, že sloupce zůstávají na menších obrazovkách vedle sebe přidáním jednoho řádku kódu CSS do prvku hlavního řádku.
display: flex;
Sloupec 2
Barva pozadí
Pokračujte otevřením nastavení sloupce 2 a změňte barvu pozadí na poloprůhlednou.
- Barva pozadí: rgba (255,255,255,0.71)
Hranice
Přidejte také spodní ohraničení sloupce.
- Šířka spodního okraje: 2px
- Barva tlačítka a spodního okraje: #f4583f
Stínová krabička
A vytvořte plovoucí efekt přidáním jemného stínu rámečku.
- Shadow Box: [Zobrazit snímek]
- Počáteční pozice: 20px
- Síla rozostření luku: 50px
- Síla rozprostření stínu rámečku: -20px
- Barva písma titulků: rgba(0,0,0,0.23)
Přidejte Image modul do sloupce 1
Stáhnout logo
Jakmile dokončíte nastavení řádků a sloupců, je čas přidat moduly, počínaje obrázkovým modulem ve sloupci 1. Nahrajte logo s průhledným pozadím.
zarovnání
Přejděte na kartu Styl modulu a změňte zarovnání.
- Zarovnání obrazu: Na střed
dimenzování
Změňte také šířku modulu v nastavení velikosti.
- Maximální šířka: 8 vw (stolní počítač), 14 vw (tablet), 21 vw (telefon)
Přidejte modul nabídky do sloupce 2
Vyberte nabídku
Pojďme k dalšímu sloupci. Jediný modul, který potřebujeme, je modul Menu. Vyberte si nabídku dle vlastního výběru.
Odstraňte barvu pozadí
Poté přejděte do nastavení pozadí a odstraňte barvu pozadí.
Dispozice
Přejděte na kartu Styl modulu a změňte rozvržení.
- Styl: Střed
- Rozbalovací nabídka: dolů
Text menu
Také upravte nastavení textu nabídky.
- Písmo nabídky: Mulish
- Barva textu nabídky: #6f6666
- Nabídka velikosti textu: 1vw (stolní počítač), 2vw (tablet), 3vw (telefon)
Rozbalovací nabídka
Poté změňte nastavení z rozevírací nabídky.
- Barva rozbalovacího řádku: #f4583f
ikony
Stejnou barvu použijte pro barvu ikony nabídky hamburgeru v nastavení ikony.
- Barva ikony menu hamburger: #f4583f
vzdálenost
Dokončete nastavení modulu přidáním horního a spodního odsazení v nastavení mezer.
- Špičkový vnitřní okraj: 1,5 vw
- Spodní vnitřní okraj: 1,5 vw
Přidejte modul Tlačítko do sloupce 3
Přidat text na tlačítko
Přejdeme k dalšímu a poslednímu sloupci. Přidejte modul Button s textem dle vlastního výběru.
zarovnání
Poté změňte zarovnání modulu.
- Zarovnání tlačítek: na střed
Nastavení tlačítek
Pokračujte odpovídajícím přizpůsobením tlačítka:
- Použít vlastní styly pro tlačítko: Ano
- Velikost textu tlačítka: 0,9 vw (počítač), 1,5 vw (tablet), 2,5 vw (telefon)
- Barva textu tlačítka: #ffffff
- Tlačítko pozadí: #f4583f
- Šířka okraje tlačítka: 0 pixelů
- Barva ohraničení tlačítka: #f4583f
- Tlačítko Poloměr okraje: 0 pixelů
- Písmo tlačítka: Mulish
- Tlačítko ztlumit světlo: Tučný text
vzdálenost
Dokončete nastavení modulu přidáním vlastní výplně na různé velikosti obrazovky.
- Horní a spodní vnitřní okraj: 1vw (stolní počítač), 2vw (tablet), 3vw (telefon)
- Levý a pravý vnitřní okraj: 2vw (stolní počítač), 3vw (tablet), 4vw (telefon)
Další parametry sekce
Výchozí hlavní prvek
Jakmile dokončíte obecné přizpůsobení, zbývá udělat ještě jednu věc; umístěte sekci nad obsah vaší stránky. K tomu budeme muset přidat dva řádky kódu CSS do hlavního prvku sekce.
position: absolute;
top: 0;
Hlavní prvek na houpačce
Nezapomeňte přidat stejné řádky kódu CSS do možnosti přechodu hlavního prvku. Tím zabráníte blikání sekce, jakmile na ni najedete.
position: absolute;
top: 0;
Uložte změny konstruktoru a zobrazte výsledek
Po dokončení sekce můžete uložit globální záhlaví a zobrazit výsledek na svém webu!
přehled
Nyní, když jsme prošli všemi kroky, pojďme se naposledy podívat na výsledek.
Stáhnout DIVI hned!!!
Proč investovat do čističky vzduchu?
Tak ! To je pro tento článek vše. Ukázali jsme vám, jak vytvořit plovoucí a průhledný panel nabídek pomocí Divi's Theme Builder. Záhlaví je umístěno nad první částí vaší stránky nebo příspěvku.
Chcete-li se seznámit s Divi's Theme Builder, můžete si také přečíst náš článek na Jak vytvořit globální záhlaví pomocí Divi's Theme Builder
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.
...
