[vc_row content_placement="middle" css=".vc_custom_1508940533685{background-color: #f8f6f6 !important;}" el_id="themeforestpro"][vc_column width="3/4" css=".vc_custom_1502759058885px0px !important;border-bottom-width: 0px !important;padding-bottom: 0px !important;}"][vc_column_text]

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

[/vc_column_text][/vc_column][vc_column width="1/4"][vcex_button url="https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&tid1=divibeforepostmobile" target="blank" size="small" align="center" color="green" font_family="Raleway" font_weight="600" style="flat" custom_color="#ffffff" custom_hover_color="#ffffff"] STÁHNOUT [/vcex_button][/ vc_column][/vc_row]

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

více Stahování 901.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.

Při vytváření stránky About budete pravděpodobně chtít představit také členy svého týmu. Přitom umožníte návštěvníkům komunikovat s lidmi, kteří stojí za vaším podnikáním. Pokud hledáte způsob, jak oživit sekci členů týmu ve svitku, může být tento návod pro vás. Vytvoříme karusel člena týmu s automatickým posouváním, který se bude pohybovat při procházení stránky návštěvníky. 

Demonstrace

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

Začátek početí

Přidejte novou sekci

vzdálenost

Začněte přidáním nové běžné sekce na stránku, na které pracujete. Otevřete nastavení sekce a přidejte vlastní výplň pro různé velikosti obrazovky.

  • Horní výplň: 200px (stůl), 100px (tablet a telefon)
  • Spodní výplň: 200px (stůl), 100px (tablet a telefon)

přetečení

Abychom se ujistili, že se v našem designu neobjeví žádný vodorovný posuvník, skryjeme přetečení sekcí na kartě Upřesnit.

  • Horizontální přetečení: skryté
  • Vertikální přetečení: skryté

Přidat řádek # 1

Struktura sloupců

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

dimenzování

Bez přidání jakýchkoli modulů ještě otevřete nastavení řádků, přepněte na kartu Návrh a změňte šířku a maximální šířku v nastavení velikosti.

  • Šířka: 90%
  • Maximální šířka: 1580 pixelů

vzdálenost

Přidáme také vlastní horní a dolní výplň.

  • Horní výplň: 100px
  • Spodní výplň: 100px

Do sloupce přidejte textový modul

Přidat obsah H2

Je čas přidat moduly, počínaje prvním textovým modulem. Zadejte obsah H2 podle vašeho výběru.

Nastavení textu H2

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

  • Název písma 2: Quicksand
  • Název písma 2: polotučné
  • Barva textu položky 2: # 000000
  • Záhlaví 2 Velikost textu: 70px (na ploše), 50px (tablet), 40px (telefon)

Přidejte do sloupce separační modul

viditelnost

Poté přidejte separační modul. Zkontrolujte, zda je povolena možnost „Zobrazit oddělovač“.

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

Elementor vám umožní tvořit Snadno a zdarma jakýkoli design webových stránek nebo blogu s profesionálním vzhledem. Přestaňte platit hodně za web, který si můžete udělat sami.

  • Zobrazit oddělovač: Ano

Linka

Poté proveďte některé změny v nastavení linky.

  • Barva čáry: # edf000
  • Styl čáry: pevná
  • Pozice řádku: Horní

dimenzování

A dokončete parametry modulu příslušnou úpravou parametrů kótování:

  • Hmotnost děliče: 20px
  • Šířka: 11%
  • Zarovnání modulu: vlevo
  • Výška: 20px

Přidejte řádek # 2

Struktura sloupců

Do dalšího řádku! Použijte následující strukturu sloupců:

dimenzování

Bez přidání dalších modulů otevřete parametry linky a upravte parametry velikosti takto:

  • Použít vlastní šířku okapu: Ano
  • Šířka okapu: 2
  • Šířka: 100%
  • Maximální šířka: 100%

vzdálenost

Poté přidejte výplň vlevo a vpravo pouze na menších obrazovkách.

  • Výplň vlevo: 5% (pouze tablet a telefon)
  • Pravá výplň: 5% (pouze tablet a telefon)

Parametry sloupce (5x)

Nyní v příštích třech krocích tohoto kurzu provedeme některé změny ve sloupcích. Použijte tři kroky na každý ze sloupců v řádku.

Přechodové pozadí

Chcete prodávat své produkty na internetu?

Stáhněte si zdarma WooCommerce, nejlepší pluginy pro e-commerce pro prodej vašich fyzických a digitálních produktů na WordPress a snadné vytvoření vašeho online obchodu. Ideální pro začátečníky.

Nejprve do každého sloupce přidejte pozadí s přechodem.

  • Barva 1: rgba (255,255,255,0)
  • Barva 2: rgba (0,0,0,0,84)
  • Typ přechodu: lineární
  • Počáteční pozice: 25%
  • Koncová pozice: 86%
  • Umístěte přechod na obrázek pozadí: Ano

Obrázek na pozadí

Poté nahrajte obrázek na pozadí podle vašeho výběru. Tento obrázek na pozadí představuje každého člena týmu, takže pro každý sloupec použijte jiný obrázek.

  • Velikost obrázku na pozadí: Obálka
  • Pozice obrázku na pozadí: Střed

Hlavní prvek

Dokončete nastavení sloupce přidáním vlastního CSS do hlavního prvku tabletu každého sloupce. Tyto řádky kódu CSS nám pomohou umístit sloupce jeden pod druhý na tabletu, místo aby byly dva vedle sebe.

šířka: 100%! důležité; okraj: 50px 0px 50px 0px! důležité;

Do sloupce přidejte modul osoby

Přidat obsah

Ke sdílení informací o členech týmu použijeme modul Osoba. Přidejte první modul Person do sloupce 1 a použijte jakýkoli obsah, který chcete.

Odstranit obrázek

Poté obrázek smažte. Místo toho použijeme obrázek na pozadí sloupce.

Obrázek na pozadí

Poté přidáme překryvný obrázek jako obrázek na pozadí modulu. Ten, který používáme, najdete stažením složky na začátku tohoto tutoriálu.

  • Velikost obrázku na pozadí: Obálka
  • Pozice obrázku na pozadí: Střed

Nastavení textu nadpisu

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

  • Úroveň titulu: H3
  • Písmo názvu: Quicksand
  • Hmotnost písma nadpisu: tučně
  • Barva textu nadpisu: #ffffff
  • Velikost textu nadpisu: 230%

Nastavení textu těla

Změňte také nastavení textu těla.

  • Body písmo: Open Sans
  • Barva textu těla: #ffffff
  • Výška linie těla: 2,2 em

Nastavení textu polohy

Poté proveďte některé změny nastavení textu polohy.

  • Pozice písma: Otevřít Bezpatky
  • Barva textu pozice: # edf000

vzdálenost

A dokončete nastavení modulu přidáním vlastních hodnot výplně do nastavení mezer.

  • Horní výplň: 70%
  • Dolní výplň: 10%
  • Výplň vlevo: 10%
  • Pravá výplň: 10%

Duplikujte modul Osoba 4krát

Jakmile dokončíte modul Osoba, můžete celý modul klonovat čtyřikrát.

Umístěte duplikáty do zbývajících sloupců

Umístěte duplicitní moduly do zbývajících čtyř sloupců řádku. Nezapomeňte také upravit obsah.

Proměňte řádek v kolotoč s automatickým posuvem

Změňte velikost řádku 2

Nyní, abychom tento řádek změnili na karusel členů týmu s automatickým posouváním, musíme znovu otevřít nastavení řádku a změnit šířku a maximální šířku v nastavení velikosti.

  • Šířka: 180%
  • Maximální šířka: 220% (stůl), 100% (tablet a telefon)

Přidat vodorovný pohyb linky # 2

Dokončete nastavení čáry přidáním vodorovného pohybu k nastavení efektu posouvání na kartě Upřesnit a jste hotovi!

  • Aktivujte horizontální pohyb: Ano
  • Počáteční posun:
    • Kancelář: 2,5
    • Tablet a telefon: 0
  • Průměrný ofset: 0 (při 40%)
  • Koncový offset:
    • Kancelář: -25 (na 62%)
    • Tablet a telefon: 0
  • Efekt spouštěcího pohybu: střed prvku

přehled

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

Kancelář

Závěrečné myšlenky

V tomto tutoriálu jsme vám ukázali, jak být kreativní s integrovanými efekty posouvání Divi. Konkrétně jsme znovu vytvořili krásný karusel členů týmu s automatickým posouváním. Jak se návštěvníci posouvají dolů po stránce, zobrazí se další část karuselu.

0 akcie
podíl
tweet
Zadat