Přejít k hlavnímu obsahu

Jak vytvořit plynulý přechod s efekty posunu na Divi

Divi: nejjednodušší téma WordPress k použití

Divi: Nejlepší WordPress téma všech dob!

více Stahování 701.000, Divi je nejoblíbenější téma WordPress na světě. Je kompletní, snadno použitelný a je dodáván s více než šablonami 62 zdarma. [Doporučeno]

Při navrhování své stránky služeb se chcete ujistit, že si vaši návštěvníci všimnou všech různých služeb, které poskytujete. V mnoha případech to bude jen jedna konkrétní služba, kterou hledají, ale pokud ve své struktuře služeb poskytnete efektivní způsob, je pravděpodobnější, že vaši návštěvníci budou zacházet se všemi. 

V tomto tutoriálu vám ukážeme, jak být kreativní s efekty posouvání Divi a vytvořit bezproblémový přechod služby. Můžete si také stáhnout soubor JSON zdarma!

Pojďme.

Možný výsledek

Než se ponoříme do tutoriálu, pojďme se podívat na výsledek na různých velikostech obrazovky.

Přechod mezi oddíly divi

1, znovu vytvořte strukturu prvků

Přidat oddíl # 1

vzdálenost

Začněte přidáním nové sekce na stránku, na které pracujete. Otevřete nastavení sekce a změňte hodnoty výplně na různých velikostech obrazovky.

  • Horní výplň: 80px (stolní a tablet), 0px (telefon)
  • Spodní výplň: 80px
Sekce parametrů Divi

Přidat nový řádek

Struktura sloupců

Pokračujte v přidávání nového řádku pomocí následující struktury sloupců:

dimenzování

Bez přidání dalších modulů otevřete parametry linky a v parametrech kótování použijte následující změny:

  • Použít vlastní šířku okapu: Ano
  • Šířka okapu: 1
  • Šířka: 90%
  • Maximální šířka: 1580 pixelů
Konfigurace divi mezer

vzdálenost

Poté přidejte vlastní horní a dolní okraj.

  • Horní okraj: 200px
  • Dolní okraj: 200px
Konfigurace řádkování Divi

Přidejte textový sloupec do sloupce 1

Přidat obsah H2

Je čas přidat moduly, počínaje textovým modulem ve sloupci 1. Zadejte libovolný obsah H2, který chcete.

Naše služby nabízené momentálními odborníky

Nastavení textu H2

Přejděte na kartu Návrh modulu a změňte nastavení textu H2 následujícím způsobem:

  • Hlava 2 Policie: čtvrtletní
  • Záhlaví 2 Velikost textu: 80px (na ploše), 50px (tablet), 40px (telefon)
  • Výška řádku 2 hlavy: 1.2em
Vedoucí divi policie

vzdálenost

Poté přidejte spodní okraj tabletu a telefonu.

  • Dolní okraj: 50 pixelů (pouze tablet a telefon)
Konfigurace řádkování textu Divi

Přidejte textový sloupec do sloupce 2

Přidat obsah

Pojďme k druhému sloupci. První modul, který potřebujeme, je textový modul s nějakým obsahem popisu.

Textové pole divi obsahu

Nastavení textu

Přepněte na kartu návrhu modulu a odpovídajícím způsobem změňte nastavení textu:

  • Písmo textu: kabina
  • Styl písma textu: velká písmena
  • Barva textu: # 000000
  • Velikost textu: 18 px (stolní počítač), 15 pixelů (tablet), 13 pixelů (telefon)
  • Mezery mezi písmeny: 3px (na ploše), 1px (na tabletu a telefonu)
  • Výška řádku textu: 3em
Parametr textu Divi

Do sloupce 2 přidejte separační modul

viditelnost

Další a poslední modul, který v tomto sloupci potřebujeme, je separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

  • Zobrazit oddělovač: Ano
Viditelný rozdělovač

Linka

Poté změňte barvu čáry modulu.

Vytvořte si snadno svůj web pomocí Elementoru

Elementor vám umožní snadno vytvořit jakýkoli design webových stránek s profesionálním vzhledem. Přestaňte platit drahé za to, co můžete udělat sami. [Zdarma]

  • Barva čáry: # 000000
Dělicí barva pozadí

dimenzování

Poté proveďte některé změny parametrů velikosti.

  • Hmotnost děliče: 3px
  • Šířka: 28%
Dimenzování oddělovače Divi

vzdálenost

Přidáme také horní okraj.

  • Horní okraj: 10px
Rozteč modulů oddělovače Divi

Přidat oddíl # 2

vzdálenost

Pojďme k další pravidelné části. Odstraňte výchozí horní polstrování ze sekce.

  • Horní výplň: 0px
Oddíl 2 rozteč divi

přetečení

Také skrýt přepady.

  • Horizontální přetečení: skryté
  • Vertikální přetečení: skryté
Skrýt přetečení modulu divi

Přidat nový řádek

Struktura sloupců

Pokračujte v přidávání prvního řádku pomocí následující struktury sloupců:

Vyberte rozložení divi

dimenzování

Bez přidání dalších modulů otevřete parametry linky, otevřete parametry kótování a proveďte následující úpravy:

  • Použít vlastní šířku okapu: Ano
  • Šířka okapu: 1
  • Vyrovnání výšek sloupců: Ano
  • Šířka: 90%
  • Maximální šířka: 1580 pixelů
Konfigurační oddíl žlabu

vzdálenost

Poté odeberte všechny výchozí horní a dolní výplně.

  • Horní výplň: 0px
  • Spodní výplň: 0px
Nastavení rozestupu řádkových modulů Divi 1

Nastavení sloupce 1

Barva pozadí

Poté otevřete nastavení pro sloupec 1 a změňte barvu pozadí.

  • Barva pozadí: # f7f7f7
Konfigurace pozadí modulu Divi line

vzdálenost

Dokončete nastavení sloupce přidáním vlastních hodnot výplně na různé velikosti obrazovky.

  • Horní výplň: 200px (stůl), 100px (tablet a telefon)
  • Spodní výplň: 200px (stůl), 100px (tablet a telefon)
  • Výplň vlevo: 8%
  • Pravá výplň: 8%
Nastavení sloupce modulu řádku

Nastavení sloupce 2

vzdálenost

Pokračujte otevřením nastavení ve sloupci 2. Přejděte na kartu Upřesnit a přidejte vlastní hodnoty výplně pro různé velikosti obrazovky.

  • Horní výplň: 100 px (stolní počítač), 50 pixelů (tablet a telefon)
  • Spodní výplň: 200px
  • Levé čalounění: 150 px (stůl), 0 px (tablet a telefon)
Nastavení mezer mezi moduly Divi

Do sloupce 1 přidejte separační modul

viditelnost

V prvním sloupci je prvním modulem, který potřebujeme, separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

Hledáte ty nejlepší témata a pluginy aplikace WordPress?

Stáhněte si ty nejlepší pluginy a témata aplikace WordPress na Envato a snadno si vytvořte své webové stránky. Již více než stahování 49.720.000. [EXCLUSIVE]

  • Zobrazit oddělovač: Ano
Zobrazit oddělovač divi 1

Linka

Poté změňte barvu čáry modulu.

  • Barva čáry: # 000000
Nastavení oddělovače Divi

dimenzování

Proveďte také změny parametrů velikosti.

  • Hmotnost děliče: 3px
  • Šířka: 50%
Dimenzování oddělovače Divi

Přidejte textový sloupec do sloupce 1

Přidat obsah H3

Další modul, který potřebujeme ve sloupci 1, je textový modul s obsahem H3.

Nastavení sekce obsahu Divi

Nastavení textu H3

Přepněte na kartu návrhu modulu a změňte nastavení textu H3:

  • Hlava 3 Policie: čtvrtletní
  • Barva textu položky 3: # 000000
  • Položka 3 Velikost textu: 50 pixelů (stolní), 40 pixelů (tablet), 35 pixelů (telefon)
  • Výška řádku 3 hlavy: 1.1em

Přidejte textový sloupec do sloupce 2

Přidat obsah

Ve druhém sloupci je prvním modulem, který potřebujeme, textový modul s určitým obsahem popisu.

Nastavení textového modulu Divi

Nastavení textu

Změňte nastavení textu modulu následujícím způsobem:

  • Písmo textu: kabina
  • Styl písma textu: velká písmena
  • Velikost textu: 18 px (stolní počítač), 15 pixelů (tablet), 13 pixelů (telefon)
  • Mezery mezi písmeny: 3px (na ploše), 1px (na tabletu a telefonu)
  • Výška řádku textu: 3em
Úprava písma formy Divi textu

Přidejte sloupcový modul do sloupce 2

Přidat kopii

Další a poslední modul, který potřebujeme, je tlačítkový modul. Zadejte kopii podle vašeho výběru.

Nastavení obsahu textového modulu

Nastavení tlačítek

Pak styl tlačítko.

  • Pro tlačítko použijte vlastní styly: Ano
  • Velikost textu tlačítka: 20 pixelů
  • Barva textu tlačítka: #ffffff
  • Barva pozadí tlačítka: # 000000
  • Šířka ohraničení tlačítka: 0px
Nastavení stylu tlačítka Divi
  • Tlačítko Písmo: Čtvrtletně
  • Hmotnost písma tlačítka: tučně
Nastavení barev tlačítka Divi

vzdálenost

Přidejte také vlastní polstrování.

  • Horní výplň: 50px
  • Spodní výplň: 50px
  • Levá výplň: 100px
  • Pravá výplň: 100px
Nastavení rozteče tlačítek modulu Divi

Pozice

A podle toho umístěte tlačítko:

  • Pozice: Absolutní
  • Umístění: vlevo dole
Nastavení polohy modulu Divi

Klonujte řádek tolikrát, kolikrát je třeba

Jakmile dokončíte celou řadu a všechny její moduly, můžete celou řadu naklonovat třikrát.

Klonujte divi modul

Změňte veškerý obsah

Ujistěte se, že veškerý obsah upravujete v duplikovaných řádcích.

Upravit obsah sekce divi

2. Použijte efekty posouvání

Efekty posouvání v prvním řádku

Horizontální pohyb

Jakmile dokončíte všechny řádky ve vaší sekci, je čas přidat rolovací efekty. Otevřete první řádek sekce a přidejte vodorovný pohyb.

  • Aktivujte horizontální pohyb: Ano
  • Počáteční posun: -5
  • Průměrný ofset: 0 (při 26%)
  • Koncový offset: 0
  • Efekt spouštěcího pohybu: střed prvku
Aplikujte efekty rolování divi

Zmizet a odejít

Použijte také efekt příchozí a odchozí fade.

  • Aktivace a vyblednutí: Ano
  • Počáteční krytí: 100%
  • Průměrná neprůhlednost: 100% (při 50%)
  • Konečná krytí: 0% (až 53%)
  • Efekt spouštěcího pohybu: střed prvku
Nakonfigurujte divi sekci sekce Fade Animation

Efekty rolování ve středních řadách

Vertikální pohyb

Dále přidáme efekty posouvání na všechny řádky mezi prvním a posledním řádkem sekce. Nejprve použijte svislý pohyb:

Snadno vytvořte svůj online obchod

Stáhněte si zdarma WooCommerce, nejlepší e-commerce pluginy pro prodej vašich fyzických a digitálních produktů na WordPress. [Doporučeno]

  • Aktivujte svislý pohyb: Ano
  • Počáteční posun: -4
  • Průměrný ofset: 0 (při 26%)
  • Koncový offset: 0
  • Efekt spouštění pohybu: uprostřed prvku
Konfigurace divičního rolování

Zmizet a odejít

Také aktivujte efekt zesílení a vysunutí.

  • Aktivace a vyblednutí: Ano
  • Počáteční krytí: 0%
  • Průměrná neprůhlednost: 100% (od 27% do 50%)
  • Koncový offset: 0 (při 53%)
  • Efekt spouštěcího pohybu: střed prvku
Animace prolínání divi linky

Efekty posunu na poslední řádek

Vertikální pohyb

Poté otevřete poslední řádek sekce a přidejte následující vertikální pohyb:

  • Aktivujte svislý pohyb: Ano
  • Počáteční posun: -4
  • Průměrný ofset: 0 (při 26%)
  • Koncový offset: 0
  • Efekt spouštěcího pohybu: střed prvku
Animace posouvání modulu Divi line

Zmizet a odejít

S příchozím a odchozím efektem fade a jste hotovi!

  • Aktivace a vyblednutí: Ano
  • Počáteční krytí: 0%
  • Průměrná neprůhlednost: 100% (od 27% do 50%)
  • Konečná krytí: 100% (až 53%)
  • Efekt spouštěcího pohybu: střed prvku
Nastavení animace vzhledu modulu Divi line

Konečný výsledek

Nyní, když jsme prošli všemi kroky, pojďme se konečně podívat, jak to vypadá na různých velikostech obrazovky.

Závěrečné demo

Závěrečné myšlenky

V tomto článku jsme vám ukázali, jak vytvořit krásný přechod služby s rolovacími efekty Divi. Ještě předtím, než jedno podání zmizí, začne se objevovat druhé, což dává příjemný přechod příjemný pro oko. Tento přístup vám pomůže zvýraznit každou službu na individuální úrovni. Můžete si také stáhnout soubor JSON zdarma! Máte-li jakékoli dotazy nebo návrhy, neváhejte zanechat komentář v sekci komentáře níže.

Tento článek obsahuje komentáře 0

Zanechat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinné položky jsou označeny *

Tato stránka používá společnost Akismet ke snížení nežádoucích účinků. Přečtěte si další informace o tom, jak se používají vaše komentáře.

Zpět na začátek
0 akcie
podíl
tweet
Zadat