Chcete zobraziť modul Divi Fullwidth Header na celej obrazovke?
Hlavičky na celú obrazovku zaberajú celú obrazovku bez ohľadu na veľkosť obrazovky návštevník. To je skvelé na upútanie pozornosti používateľov. Našťastie je jednoduché pomocou modulu vytvoriť hlavičku na celú obrazovku Hlavička s plnou šírkou z Divi.
V tomto článku vám ukážeme, ako vytvoriť hlavičku s plnou šírkou, prispôsobiť ju a zobraziť na celej obrazovke. Tento prístup môžete použiť na vytvorenie ľubovoľnej sekcie hrdinu na celú obrazovku pre svoje stránky.
Začnime.
prehľad
Pozrime sa na ukážku toho, čo navrhneme v tomto návode.
kancelária
tableta
Telefón
Ako urobiť z hlavičky Divi Fullwidth hlavičku na celú obrazovku
Začnite pridaním sekcie v plnej šírke na stránku, na ktorej pracujete.
Potom pridajte a Modul hlavičky s plnou šírkou do sekcie v plnej šírke.
Otvoria sa nastavenia modulu. Vyberte kartu dizajn. Aktivujte možnosť tzv Urobiť celú obrazovku
Teraz máme hlavičku na celú obrazovku. Je to také jednoduché.
Povoliť ikonu posúvania
Môžeme pridať aj tlačidlo, ktoré používateľovi povie, aby sa posunul nadol. Musíme to však povoliť. Toto tlačidlo je vždy viditeľné v režime celej obrazovky. Možnosť hlavičky na celú obrazovku vždy zodpovedá výške obrazovky návštevník.
- Zobraziť tlačidlo rolovania nadol: ÁNO
Príklad hlavičky Divi Fullwidth na celú obrazovku
Parametre modulu hlavičky s plnou šírkou
Tu sú kroky pre každú sekciu nastavení modulu Fullwidth Header.
Prečítajte si tiež: Divi: Ako skombinovať masky pozadia a oddeľovače
Texty
Všetko najprv pridajte text ktorý bude viditeľný v celej šírke hlavičky. To zahŕňa názov, podnadpis, obsah a text tlačidla.
- Názov: Vytvoriť váš blog s Divi
- Podtitul: Blogpascher
- Burron #1: Zhrnutie
- Tlačidlo č. 2: Plán
- Telo: (predvolené)
snímky
potom pridať obrázok. Toto sa zobrazí na pravej strane hlavičky s plnou šírkou a posunie text doľava.
- Obrázok hlavičky: vaša voľba
pozadia
Prejdite na položku pozadia a nastavte farbu na #f6f5ee.
- Farba pozadia: #f6f5ee
dispozície
Ďalej prejdite na kartu Návrh.
- Prepnúť na celú obrazovku: ÁNO
Posuňte ikonu nadol
- Zobraziť tlačidlo rolovania nadol: ÁNO
- Farba ikony rolovania nadol: #000000 (stolný počítač a tablet), #ffffff (telefón)
- Veľkosť ikony rolovania nadol: 70 pixelov (počítač), 60 pixelov (tablet), 50 pixelov (telefón)
Názov textu
Ďalej upravíme text nadpisu.
- Úroveň nadpisu: H1
- Písmo: Inter
- Hrúbka písma: tučné
- Zarovnanie textu: Stred
- Farba textu: #000000
- Veľkosť textu nadpisu: 75 pixlov (počítač), 40 pixlov (tablet), 24 pixlov (telefón)
- Výška riadku nadpisu: 1.2 em
Popisný text
Potom prejdite nadol na BodyText.
- Písmo: Open Sans
- Zarovnanie: doľava
- Farba: #000000
- Veľkosť textu: 16 pixlov (počítač), 15 pixlov (tablet), 14 pixlov (telefón)
- Výška riadku: 1.8 m
podtitul
Potom prejdite nadol na Text titulkov.
- Písmo: Inter
- Hrúbka písma: tučné
- Štýl: TT
- Zarovnanie: Stred
- Farba: #ff5a17
- Veľkosť: 14px
- Medzera medzi písmenami: 1px
- Výška riadku: 1.8 m
Tlačidlo #1
Potom prejdite nadol na Tlačidlo jeden.
- Použiť vlastné štýly pre tlačidlo: ÁNO
- Veľkosť textu: 20 pixlov (počítač), 18 pixlov (tablet), 16 pixlov (telefón)
- Farba textu: #000000
- Farba pozadia: #ffffff
- Šírka orámovania: 0px
- Polomer okraja: 0px
- Písmo: Inter
- Hrúbka písma: tučné
- Ikona: vaša voľba
- Farba ikony: #000000
- Umiestnenie: Vpravo
- Zobraziť ikonu pri umiestnení kurzora myši iba na tlačidlo XNUMX: NIE
Nakoniec prejdite nadol na možnosti Tlačidlo One Polstrovanie.
- Vypchávka:
- Desktop: 20 pixelov (hore a dole), 40 pixelov (vľavo a vpravo)
- Tablet: 16 pixelov (hore a dole), 40 pixelov (vľavo a vpravo)
- Telefón: 12px (hore a dole), 40px (ľavý a pravý)
Tlačidlo #2
Nakoniec prejdite nadol na Tlačidlo dva.
- Použiť vlastné štýly pre tlačidlo XNUMX: Áno
- Veľkosť textu: 20 pixelov (počítač), 18 pixelov (tablet), 16 pixelov (telefón)
- Farba textu: #ffffff
- Farba pozadia: #ff5a17
- Šírka orámovania: 0px
- Polomer okraja: 0px
- Písmo: Inter
- Hrúbka písma: tučné
Vyberte si svoju obľúbenú ikonu.
- Ikona: vaša voľba
- Farba ikony: #000000
- Umiestnenie: vľavo
- Zobraziť ikonu pri umiestnení kurzora myši iba na tlačidlo XNUMX: NIE
Nakoniec prejdite nadol na možnosti Dve polstrovanie tlačidiel.
- Vypchávka:
- Desktop: 20 pixelov (hore a dole), 40 pixelov (vľavo a vpravo)
- Tablet: 16 pixelov (hore a dole), 40 pixelov (vľavo a vpravo)
- Telefón: 12px (hore a dole), 40px (ľavý a pravý)
Konečné výsledky
Takto vyzerá naša hlavička v plnej šírke na stolných počítačoch, tabletoch a telefónoch.
Môžete sa tiež poradiť: Divi: Ako používať efekty tieňa a vznášania na vytváranie interaktívneho obsahu
kancelária
tableta
Telefón
Stiahnite si DIVI teraz!!!
záver
Tu je náš pohľad na to, ako vytvoriť hlavičku s plnou šírkou pomocou modulu Divi hlavička s plnou šírkou.
Proces je jednoduchý a vyzerá skvele na akomkoľvek zariadení. Pridanie tlačidla Posunúť nadol je skvelý vizuál, ktorý používateľom hovorí, že môžu rolovať.
Navrhovanie hlavičky na celú obrazovku je podobné ako navrhovanie sekcie Hrdina. Dodržiavanie niekoľkých jednoduchých pokynov vám môže pomôcť vytvoriť úžasné hlavičky na celú obrazovku s modulom Divi Fullwidth Header.
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.
...
