Divi: Najlepšia WordPress tému všetkých čias!

viac Stahovanie 901.000, Divi je najobľúbenejšia WordPress tému na svete. Je kompletný, ľahko použiteľný a je dodávaný s viac než 62 bezplatnými šablónami.

Chcete zobraziť modul Hlavička v plnej šírke z divi celá obrazovka ?

Hlavičky na celú obrazovku zaberajú celú obrazovku bez ohľadu na veľkosť obrazovky návštevníka. To je skvelé na upútanie pozornosti používateľov. Našťastie je ľahké vytvoriť hlavičku na celú obrazovku pomocou modulu Hlavička s plnou šírkou de 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

Celá obrazovka modulu Divi Fullwidth Header

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íka.

Ľahko vytvorte svoje webové stránky pomocou Elementoru

Elementor vám umožňuje vytvárať Jednoducho a zadarmo akýkoľvek dizajn webovej stránky alebo blogu s profesionálnym vzhľadom. Prestaňte platiť veľa za webovú stránku, ktorú môžete urobiť sami.

  • 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 hlavičke s plnou šírkou. To zahŕňa názov, podnadpis, obsah a text tlačidla.

  • Title: Vytvorte si svoj 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

Chcete predávať svoje produkty na internete?

Stiahnite si zadarmo WooCommerce, najlepšie doplnky elektronického obchodu na predaj vašich fyzických a digitálnych produktov na WordPress a jednoduché vytvorenie vášho online obchodu. Ideálne pre začiatočníkov.

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

Celá obrazovka modulu Divi Fullwidth Header

tableta

Celá obrazovka modulu Divi Fullwidth Header

Telefón

Celá obrazovka modulu Divi Fullwidth Header

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.

...

%d bloggerov sa páči táto stránka: