Tento výukový program je doplňkem výukového programu, který jsme vytvořili před několika dny. Skutečně jsme vám ukázali, jak přidat rolující text do sloupce divi. Dnes vám ukážeme, jak použít stejnou techniku, přidat sekci „super hrdina“ (výraz používaný pro dzapsat velká oblast webové stránky určená k upoutání pozornosti a zvýraznění určitých prvků).

Začněme.

Přidejte předdefinované rozvržení

Chcete-li přidat rozvržení na stránku, otevřete nabídku nastavení ve spodní části nástroje pro tvorbu divi a klikněte na symbol plus. Ve vyskakovacím okně Načíst z knihovny vyberte Balíček rozvržení Job Recruiter. Poté kliknutím použijte rozložení domovské stránky.

Model šablony divi

Odstraňte další obsah s rozvržením

Jakmile se prezentace načte na stránku, nasaďte zobrazení drátového modelu a odeberte vše obsah prezentace, kromě záhlaví v plné šířce a části těsně pod ním.

Sekce úpravy designu divi

Vytváření animace textu výběru

Jak vidíte, slovo „najal“ se již používá jako velký textový designový prvek v textovém modulu ve druhé části. Chystáme se proměnit tento textový modul na designový prvek reagujícího textového reproduktoru. Klíčem k tomu, aby textový obdélník reagoval, je zajistit, aby řádkový a textový modul pokrývaly celou šířku okna prohlížeče. Můžeme to udělat pomocí 100% šířky. Pak můžeme použít délkovou jednotku vw pro velikost textu. Díky tomu bude text vhodný pro šířku prohlížeče. Poté použijeme stejné principy, které jsme dříve použili k ilustraci našeho příkladu jednoduchého rolování textu.

Zde je návod, jak to udělat.

Aktualizujte parametry linky

Jak již bylo zmíněno dříve, řádka musí být 100%, aby návrh tohoto responzivního výběru textu fungoval. To umožňuje našemu textovému modulu používat jednotky délky vw vzhledem k šířce prohlížeče. Protože naše předdefinované rozvržení již obsahuje čáru se 100% šířkou, nemusíme nic dělat.

Konfigurace šířky modulu Divi Line

Ostatní nastavení však musíme upravit následovně.

  • Marže: -24vw dolů
  • Transformovat přeložit osu Y: -24vw
  • Horizontální přetečení: skryté
  • Vertikální přetečení: skryté

Konfigurace nastavení linky Divi

Záporný dolní okraj má odstranit záporný prostor, který zbyl pokaždé, když přesuneme řádek pomocí příkazu transform translate. A musíme skrýt přetečení řádků pro náš efekt výběru textu.

Aktualizujte návrh textu textového modulu

Nyní vše, co musíte udělat, je aktualizovat textový modul a převést jej na velký prvek návrhu textu.

Otevřete textový modul a aktualizujte následující:

  • Barva textu textu: rgba (255,255,255,0.16)
  • Velikost textu: 36vw
  • Marže: -100% vlevo, 100% vpravo

Velikost textu používá jednotku délky vw, takže text dobře odpovídá šířce prohlížeče.

Konfigurace textového modulu Divi

Přidejte animaci do textového modulu

  • Styl animace: Snímek
  • Směr animace: vlevo
  • Délka animace: 10000 XNUMX ms
  • Intenzita animace: 100%
  • Animace křivky rychlosti: lineární
  • Opakovaná animace: Smyčka

Konfigurace animace textu DiviKonečný návrh

Nyní zkontrolujte konečný návrh.

Najal animaci diviZávěrečné myšlenky

Textová pole mohou být užitečným nástrojem pro webdesign. Nejsou omezeny na fungování pouze jako tickery. Mohou také přidat zajímavý animační prvek do vašeho webového designu. A nejlepší na tom je divi usnadňuje vytváření a navrhování všech druhů krásných věcí. Doufám, že vám tento tutoriál pomůže vytvořit jednoduché výběrové texty, kdykoli je budete potřebovat.

Doufám, že se vám ozvete v komentářích.

K vašemu zdraví!