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

Divi: najjednoduchšia téma pre WordPress

[/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"] STIAHNUŤ [/vcex_button][/ vc_column][/vc_row]

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.

Pri vytváraní stránky O mne pravdepodobne budete tiež chcieť predstaviť členov svojho tímu. Umožníte tak návštevníkom interakciu s ľuďmi, ktorí stoja za vašim podnikaním. Ak hľadáte spôsob, ako oživiť sekciu členov tímu na zvitku, tento návod môže byť pre vás. Vytvoríme karusel členov tímu s automatickým posúvaním, ktorý sa bude pohybovať, keď vaši návštevníci budú stránku posúvať. 

demonštrácie

Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok v rôznych veľkostiach obrazovky.

Posuňte člena tímu divi

Začiatok počatia

Pridajte novú sekciu

vzdialenosť

Začnite pridaním novej bežnej sekcie na stránku, na ktorej pracujete. Otvorte nastavenia sekcií a pridajte vlastné polstrovanie pre rôzne veľkosti obrazoviek.

  • Vrchná výplň: 200px (písací stôl), 100px (tablet a telefón)
  • Spodné čalúnenie: 200px (písací stôl), 100px (tablet a telefón)
Konfigurácia parametrov

pretečeniu

Aby sme sa uistili, že sa v našom dizajne neobjaví žiadny vodorovný posúvač, skryjeme na karte rozšírené pretečenia sekcií.

  • Horizontálny prepad: skrytý
  • Vertikálny prepad: skrytý
Konfigurácia pretečenia

Pridajte riadok č. 1

Štruktúra stĺpcov

Pokračujte v pridávaní nového riadku do sekcie pomocou nasledujúcej štruktúry stĺpcov:

Vyberte rozloženie divi

dimenzovanie

Bez pridania akýchkoľvek modulov ešte otvorte nastavenia riadkov, prepnite na kartu dizajn a zmeňte šírku a maximálnu šírku v nastaveniach veľkosti.

  • Šírka: 90%
  • Maximálna šírka: 1580 pixlov
Parameter divi line

vzdialenosť

Pridáme tiež vlastné vrchné a spodné čalúnenie.

  • Horná vypchávka: 100px
  • Spodné čalúnenie: 100px
Konfigurácia divi riadkovania

Pridajte do stĺpca textový modul

Pridajte obsah H2

Je čas pridať moduly, počnúc prvým textovým modulom. Zadajte obsah H2 podľa vášho výberu.

Zoznámte sa s tímom

Nastavenia textu H2

Prejdite na kartu Návrh modulu a zmeňte nastavenie textu H2 nasledovne:

  • Názov písma 2: Quicksand
  • Názov písma 2: polotučné
  • Farba textu položky 2: # 000000
  • Hlavička 2 Veľkosť textu: 70 px (na počítači), 50 pixelov (tablet), 40 pixlov (na telefóne)
Rozostupy textu Divi

Pridajte do kolóny separačný modul

viditeľnosť

Potom pridajte separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.

Ľ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ť oddeľovač: Áno
Zobraziť oddeľovač divi

Linka

Potom vykonajte niektoré zmeny nastavení linky.

  • Farba čiary: # edf000
  • Štýl čiary: plný
  • Pozícia riadku: hore
Štýl medzery Divi

dimenzovanie

A dokončite parametre modulu príslušnou úpravou parametrov dimenzovania:

  • Hmotnosť deliča: 20px
  • Šírka: 11%
  • Zarovnanie modulu: vľavo
  • Výška: 20px
Dimenzovanie modulu divi line

Pridajte riadok # 2

Štruktúra stĺpcov

Do ďalšieho radu! Použite nasledujúcu štruktúru stĺpcov:

Konfigurácia stĺpca Divi

dimenzovanie

Bez pridania ďalších modulov otvorte parametre linky a upravte parametre veľkosti takto:

  • Použite vlastnú šírku odkvapov: Áno
  • Šírka odkvapov: 2
  • Šírka: 100%
  • Maximálna šírka: 100%
Konfigurácia šírky odkvapu

vzdialenosť

Potom pridajte výplň vľavo a vpravo iba na menšie obrazovky.

  • Výplň doľava: 5% (iba tablet a telefón)
  • Pravá výplň: 5% (iba tablet a telefón)
Konfigurácia štýlu riadkovania

Parametre stĺpca (5x)

Teraz v ďalších troch krokoch tohto tutoriálu urobíme nejaké zmeny v stĺpcoch. Použite tri kroky na každý zo stĺpcov v riadku.

Konfigurácia parametrickej linky Divi

Gradient pozadia

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.

Najskôr do každého stĺpca pridajte gradientné pozadie.

  • Farba 1: rgba (255,255,255,0)
  • Farba 2: rgba (0,0,0,0,84)
  • Typ gradientu: lineárny
  • Počiatočná pozícia: 25%
  • Koncová pozícia: 86%
  • Umiestniť prechod nad obrázok na pozadí: Áno
Konfigurácia zadného stĺpika Divi

Obrázok pozadia

Potom nahrajte obrázok pozadia podľa vášho výberu. Tento obrázok na pozadí predstavuje každého člena tímu, takže pre každý stĺpec použite iný obrázok.

  • Veľkosť obrázka na pozadí: Obal
  • Pozícia obrázka na pozadí: Stred
Pridajte obrázok na pozadí stĺpca divi

Hlavný prvok

Dokončite nastavenia stĺpca pridaním vlastných CSS do hlavného prvku tabletu v každom stĺpci. Tieto riadky kódu CSS nám pomôžu umiestniť stĺpce jeden na druhý na tablete, namiesto dvoch vedľa seba.

šírka: 100%! dôležité; okraj: 50px 0px 50px 0px! dôležité;
Kód css divi stĺpec

Pridajte do stĺpca modul osoby

Pridajte obsah

Na zdieľanie informácií o členoch tímu použijeme modul Osoba. Pridajte prvý modul Osoba do stĺpca 1 a použite akýkoľvek požadovaný obsah.

Meno osoby divi

Odstrániť obrázok

Potom obrázok vymažte. Namiesto toho použijeme obrázok na pozadí stĺpca.

Odstrániť divi obrázok

Obrázok pozadia

Potom pridáme prekrytie obrázka ako obrázok na pozadí modulu. Ten, ktorý používame, nájdete stiahnutím priečinka na začiatku tohto tutoriálu.

  • Veľkosť obrázka na pozadí: Obal
  • Pozícia obrázka na pozadí: Stred
Konfigurácia pozadia modulu osoby

Nastavenia názvu nadpisu

Prejdite na kartu Návrh modulu a zmeňte nastavenie textu nadpisu takto:

  • Úroveň Názov: H3
  • Písmo názvu: Quicksand
  • Hmotnosť písma názvu: tučné
  • Farba textu názvu: #ffffff
  • Veľkosť textu názvu: 230%
Prispôsobenie názvu modulu Divi

Nastavenia textu tela

Zmeňte tiež nastavenia textu tela.

  • Telo písma: Open Sans
  • Farba textu tela: #ffffff
  • Výška línie tela: 2,2 em
Prispôsobenie tela Divi

Nastavenie polohy textu

Potom vykonajte niektoré zmeny nastavení textu polohy.

  • Pozícia písma: Open Sans
  • Farba textu pozície: # edf000
Divi pozícia

vzdialenosť

Dokončite nastavenia modulu pridaním vlastných hodnôt výplne do nastavení medzery.

  • Vrchná vypchávka: 70%
  • Spodná vypchávka: 10%
  • Výplň doľava: 10%
  • Pravá výplň: 10%
Rozstupy osôb medzi osobami

Duplikujte modul Osoba 4-krát

Po dokončení modulu Osoba môžete celý modul naklonovať štyrikrát.

Vložte duplikáty do zvyšných stĺpcov

Umiestnite duplicitné moduly do zvyšných štyroch stĺpcov riadku. Nezabudnite tiež upraviť obsah.

Premeňte riadok na kolotoč s automatickým posúvaním

Zmeňte veľkosť riadka # 2

Teraz, aby sa tento riadok zmenil na karusel člena tímu s automatickým posúvaním, musíme znova otvoriť nastavenia riadkov a zmeniť šírku a maximálnu šírku v nastaveniach veľkosti.

  • Šírka: 180%
  • Maximálna šírka: 220% (stôl), 100% (tablet a telefón)
Riadkovanie medzi riadkami

Pridajte vodorovný pohyb čiary 2

Dokončite nastavenia riadkov pridaním vodorovného pohybu k nastaveniam efektu posúvania na karte Rozšírené a máte hotovo!

  • Aktivujte horizontálny pohyb: Áno
  • Počiatočný posun:
    • Kancelária: 2,5
    • Tablet a telefón: 0
  • Priemerný ofset: 0 (pri 40%)
  • Koncový posun:
    • Kancelária: -25 (na 62%)
    • Tablet a telefón: 0
  • Efekt spúšťacieho pohybu: stred prvku
Konfigurácia animácie rolovania Divi

prehľad

Teraz, keď sme prešli všetkými krokmi, poďme sa konečne pozrieť na to, ako to vyzerá na rôznych veľkostiach obrazovky.

kancelária

Posuňte člena tímu divi

záverečné myšlienky

V tomto tutoriáli sme vám ukázali, ako byť kreatívni pomocou vstavaných rolovacích efektov Divi. Konkrétne sme znovu vytvorili krásny karusel členov tímu s automatickým posúvaním. Keď sa návštevníci posunú nadol po stránke, zobrazí sa ďalšia časť kolotoča.

0 akcie
podiel
tweet
Registrovať