[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 navrhovaní stránky svojich služieb sa chcete uistiť, že si vaši návštevníci všimnú všetky rôzne služby, ktoré poskytujete. V mnohých prípadoch to bude iba jedna konkrétna služba, ktorú hľadajú, ale ak poskytnete efektívny spôsob vo svojej štruktúre služieb, je pravdepodobnejšie, že vaši návštevníci ošetria všetky. 

V tomto tutoriáli vám ukážeme, ako byť kreatívni s efektmi rolovania Divi a ako vytvoriť plynulý prechod služby. Môžete si tiež zadarmo stiahnuť súbor JSON!

Poďme.

Možný výsledok

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

Prechod medzi oddielom divi

1, znovu vytvoriť štruktúru prvkov

Pridajte časť # 1

vzdialenosť

Začnite pridaním novej sekcie na stránku, na ktorej pracujete. Otvorte nastavenia sekcie a zmeňte hodnoty výplne na rôznych veľkostiach obrazovky.

  • Vrchná výplň: 80px (stolné a tablety), 0px (telefón)
  • Spodné čalúnenie: 80px
Sekcia parametrov Divi

Pridať nový riadok

Štruktúra stĺpcov

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

dimenzovanie

Bez pridania ďalších modulov otvorte parametre linky a vykonajte nasledujúce zmeny parametrov dimenzovania:

  • Použite vlastnú šírku odkvapov: Áno
  • Šírka odkvapov: 1
  • Šírka: 90%
  • Maximálna šírka: 1580 pixlov
Konfigurácia rozstupov Divi

vzdialenosť

Potom pridajte vlastný horný a dolný okraj.

  • Horný okraj: 200px
  • Dolný okraj: 200px
Konfigurácia divi riadkovania

Pridajte textový stĺpec do stĺpca 1

Pridajte obsah H2

Je čas pridať moduly, počnúc textovým modulom v stĺpci 1. Zadajte požadovaný obsah H2.

Naše služby ponúkané odborníkmi v danom okamihu

Nastavenia textu H2

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

  • Hlava 2 Polícia: štvrťročne
  • Hlavička 2 Veľkosť textu: 80 pixelov (stolné počítače), 50 pixelov (tablety), 40 pixlov (telefóny)
  • Výška čiary 2 hlavy: 1.2em
Vedúca divi polícia

vzdialenosť

Potom pridajte dolný okraj do tabletu a do telefónu.

  • Dolný okraj: 50 pixelov (iba tablet a telefón)
Konfigurácia rozstupov textu Divi

Pridajte textový stĺpec do stĺpca 2

Pridajte obsah

Prejdime k druhému stĺpcu. Prvý modul, ktorý potrebujeme, je textový modul s určitým obsahom popisu.

Textové pole divi obsahu

Nastavenia textu

Prepnite na kartu návrhu modulu a podľa toho zmeňte nastavenie textu:

  • Písmo textu: kabína
  • Štýl písma textu: veľké písmená
  • Farba textu: # 000000
  • Veľkosť textu: 18 px (na počítači), 15 pixelov (tablet), 13 pixlov (telefón)
  • Medzery v texte: 3px (na počítači), 1px (na tablete a telefóne)
  • Výška riadku textu: 3em
Parameter textu Divi

Pridajte separačný modul do stĺpca 2

viditeľnosť

Ďalším a posledným modulom, ktorý v tomto stĺpci potrebujeme, je separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.

  • Zobraziť oddeľovač: Áno
Viditeľný rozdeľovač

Linka

Potom zmeniť farbu čiary modulu.

Ľ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.

  • Farba čiary: # 000000
Rozdeľovač farebné pozadie

dimenzovanie

Potom vykonajte niektoré zmeny parametrov veľkosti.

  • Hmotnosť deliča: 3px
  • Šírka: 28%
Dimenzovanie oddeľovača Divi

vzdialenosť

Pridáme tiež horný okraj.

  • Horný okraj: 10px
Rozstup modulov oddeľovača Divi

Pridajte časť # 2

vzdialenosť

Prejdime k ďalšej pravidelnej časti. Odstráňte z časti predvolené horné polstrovanie.

  • Horná vypchávka: 0px
Oddiel 2 rozostupy divi

pretečeniu

Tiež skryte prepady.

  • Horizontálny prepad: skrytý
  • Vertikálny prepad: skrytý
Skryť pretečenie modulu divi

Pridať nový riadok

Štruktúra stĺpcov

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

Vyberte rozloženie súboru divi

dimenzovanie

Bez pridania ďalších modulov otvorte parametre linky, získajte prístup k parametrom dimenzovania a vykonajte nasledujúce úpravy:

  • Použite vlastnú šírku odkvapov: Áno
  • Šírka odkvapov: 1
  • Vyrovnajte výšky stĺpcov: Áno
  • Šírka: 90%
  • Maximálna šírka: 1580 pixlov
Sekcia divi konfigurácie žľabu

vzdialenosť

Potom odstráňte všetky predvolené vrchné a spodné čalúnenie.

  • Horná vypchávka: 0px
  • Spodné čalúnenie: 0px
Nastavenia rozstupov riadkových modulov Divi 1

Nastavenia stĺpca 1

Farba pozadia

Potom otvorte nastavenia pre stĺpec 1 a zmeňte farbu pozadia.

  • Farba pozadia: # f7f7f7
Konfigurácia pozadia modulu Divi Line

vzdialenosť

Dokončite nastavenia stĺpca pridaním vlastných hodnôt výplne pre rôzne veľkosti obrazovky.

  • 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)
  • Výplň doľava: 8%
  • Pravá výplň: 8%
Nastavenia stĺpca riadkového modulu

Nastavenia stĺpca 2

vzdialenosť

Pokračujte otvorením nastavení v stĺpci 2. Prejdite na kartu rozšírené a pridajte vlastné hodnoty výplne pre rôzne veľkosti obrazovky.

  • Vrchné čalúnenie: 100px (stolné počítače), 50px (tablety a telefóny)
  • Spodné čalúnenie: 200px
  • Čalúnenie vľavo: 150 px (stôl), 0 px (tablet a telefón)
Nastavenia rozstupov modulu Divi

Pridajte separačný modul do stĺpca 1

viditeľnosť

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.

V prvom stĺpci je prvým modulom, ktorý potrebujeme, separačný modul. Uistite sa, že je povolená možnosť „Zobraziť oddeľovač“.

  • Zobraziť oddeľovač: Áno
Zobraziť oddeľovač divi 1

Linka

Potom zmeniť farbu čiary modulu.

  • Farba čiary: # 000000
Nastavenia oddeľovača Divi

dimenzovanie

Vykonajte tiež zmeny parametrov veľkosti.

  • Hmotnosť deliča: 3px
  • Šírka: 50%
Dimenzovanie oddeľovača Divi

Pridajte textový stĺpec do stĺpca 1

Pridajte obsah H3

Ďalší modul, ktorý potrebujeme v stĺpci 1, je textový modul s obsahom H3.

Nastavenie sekcie obsahu Divi

Nastavenia textu H3

Prejdite na kartu návrhu modulu a zmeňte nastavenie textu H3:

  • Hlava 3 Polícia: štvrťročne
  • Farba textu položky 3: # 000000
  • Položka 3 Veľkosť textu: 50 pixelov (stolné počítače), 40 pixelov (tablety), 35 pixlov (telefóny)
  • Výška čiary 3 hlavy: 1.1em

Pridajte textový stĺpec do stĺpca 2

Pridajte obsah

V druhom stĺpci, prvý modul, ktorý potrebujeme, je textový modul s určitým obsahom popisu.

Nastavenie textového modulu Divi

Nastavenia textu

Zmeňte nastavenia textu modulu takto:

  • Písmo textu: kabína
  • Štýl písma textu: veľké písmená
  • Veľkosť textu: 18 px (na počítači), 15 pixelov (tablet), 13 pixlov (telefón)
  • Medzery v texte: 3px (na počítači), 1px (na tablete a telefóne)
  • Výška riadku textu: 3em
Úprava písma formy Divi text

Pridajte stĺpcový modul do stĺpca 2

Pridajte kópiu

Ďalším a posledným modulom, ktorý potrebujeme, je tlačidlový modul. Zadajte kópiu podľa vášho výberu.

Nastavenie obsahu textového modulu

Nastavenia tlačidiel

Potom štýl tlačidlo.

  • Pre tlačidlo použite vlastné štýly: Áno
  • Veľkosť textu tlačidla: 20 pixlov
  • Farba textu tlačidla: #ffffff
  • Farba pozadia tlačidla: # 000000
  • Šírka okraja tlačidla: 0px
Nastavenie štýlu tlačidla Divi
  • Písmo tlačidla: štvrťročne
  • Hmotnosť písma tlačidla: tučné
Nastavenia farieb tlačidla Divi

vzdialenosť

Pridajte tiež vlastné čalúnenie.

  • Horná vypchávka: 50px
  • Spodné čalúnenie: 50px
  • Ľavé čalúnenie: 100px
  • Pravá výplň: 100px
Nastavenia rozstupov tlačidiel modulu Divi

poloha

A podľa toho premiestnite tlačidlo:

  • Pozícia: Absolútna
  • Umiestnenie: vľavo dole
Nastavenie polohy modulu Divi

Klonujte riadok toľkokrát, koľkokrát je to potrebné

Po dokončení celého riadku a všetkých jeho modulov môžete celý riadok naklonovať trikrát.

Klonujte divi modul

Zmeňte všetok obsah

Nezabudnite upravovať všetok obsah v duplikovaných riadkoch.

Upraviť obsah divi sekcie

2. Použite posúvacie efekty

Efekty posúvania v prvom riadku

Horizontálny pohyb

Po dokončení všetkých riadkov v sekcii je čas pridať efekty rolovania. Otvorte prvý riadok sekcie a pridajte vodorovný pohyb.

  • Aktivujte horizontálny pohyb: Áno
  • Počiatočný posun: -5
  • Priemerný ofset: 0 (pri 26%)
  • Koncový posun: 0
  • Efekt spúšťacieho pohybu: stred prvku
Použite efekty rolovania divi

Stmievanie a zoslabovanie

Použite tiež efekt stmievania prichádzajúcich a odchádzajúcich.

  • Aktivácia stmievania a vypínania: Áno
  • Počiatočná opacita: 100%
  • Priemerná opacita: 100% (pri 50%)
  • Konečná opacita: 0% (až 53%)
  • Efekt spúšťacieho pohybu: stred prvku
Nakonfigurujte divi sekciu fade animation

Efekty posúvania v strednom riadku

Vertikálny pohyb

Ďalej pridáme efekty rolovania na všetky riadky medzi prvým a posledným riadkom sekcie. Najprv použite vertikálny pohyb:

  • Aktivujte vertikálny pohyb: Áno
  • Počiatočný posun: -4
  • Priemerný ofset: 0 (pri 26%)
  • Koncový posun: 0
  • Efekt spúšťania pohybu: stred prvku
Konfigurácia anulácie rolovania Divi

Stmievanie a zoslabovanie

Taktiež aktivujte efekt stmievania.

  • Aktivácia stmievania a vypínania: Áno
  • Počiatočná opacita: 0%
  • Priemerná opacita: 100% (od 27% do 50%)
  • Koncový posun: 0 (pri 53%)
  • Efekt spúšťacieho pohybu: stred prvku
Animácia slabnutia linky Divi

Efekty posúvania na poslednom riadku

Vertikálny pohyb

Potom otvorte posledný riadok sekcie a pridajte nasledujúci vertikálny pohyb:

  • Aktivujte vertikálny pohyb: Áno
  • Počiatočný posun: -4
  • Priemerný ofset: 0 (pri 26%)
  • Koncový posun: 0
  • Efekt spúšťacieho pohybu: stred prvku
Animácia rolovania modulu Divi line

Stmievanie a zoslabovanie

S efektom prichádzajúcich a odchádzajúcich fade a máte hotovo!

  • Aktivácia stmievania a vypínania: Áno
  • Počiatočná opacita: 0%
  • Priemerná opacita: 100% (od 27% do 50%)
  • Konečná opacita: 100% (až 53%)
  • Efekt spúšťacieho pohybu: stred prvku
Nastavenia animácie vzhľadu modulu Divi line

Konečný výsledok

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.

Záverečné demo

záverečné myšlienky

V tomto článku sme vám ukázali, ako vytvoriť nádherný prechod na službu pomocou posúvacích efektov Divi. Ešte predtým, ako jedno podanie zmizne, sa začne objavovať druhé, ktoré poskytne pekný prechod lahodiaci oku. Tento prístup vám pomôže vyzdvihnúť každú službu na individuálnej úrovni. Môžete si tiež zadarmo stiahnuť súbor JSON! Ak máte akékoľvek otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.

0 akcie
podiel
tweet
Registrovať