Transformer le module Shop de Divi en cartes dynamiques de produit sur mobile

Transformujte modul Divi Shop do dynamických máp produktov na mobilných zariadeniach

[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]

Keď vytvoríte vstupnú stránku pre konkrétne produkty, či už ide o nové uvedenie na trh alebo predaj, na ktorý sa chystáte, je veľká šanca, že v určitom okamihu budete modul Shop používať. Modul Divi's Shop umožňuje dynamicky extrahovať produkty z doplnku WooCommerce a upravovať ich štýl pomocou vstavaných možností Divi. 

Teraz je modul obchodu predvolene dodávaný s niekoľkými štruktúrami stĺpcov, ktoré sa pri menšej veľkosti obrazovky prekladajú do dvoch stĺpcov. To znamená, že čím viac produktov sa rozhodnete zobraziť, tým viac sa vyžaduje vertikálne posúvanie, aby ste sa dostali na ďalšiu časť svojej vstupnej stránky.

V modernom webdizajne je často používanou technikou na obmedzenie vertikálneho posúvania a zobrazovania prvkov podľa preferencií vašich návštevníkov použitie magnetických kariet. V tomto tutoriáli vám ukážeme, ako transformovať modul obchodu Divi na dynamické mapy produktov na menších veľkostiach obrazovky bez použitia doplnku. 

Začneme prípravou rôznych prvkov našej produktovej sekcie a na aktiváciu efektu zametania použijeme malé množstvo kódu CSS. Je to skvelý spôsob, ako sa na svojej vstupnej stránke pochváliť širokou škálou produktov bez toho, aby ste ohromili svojich návštevníkov. 

Možný výsledok

Predtým, ako sa ponoríme do tutoriálu, pozrime sa na výsledok. Magnetické karty produktu aktivujeme iba na tabletoch a mobiloch. Na pracovnej ploche ponechávame štruktúru stĺpcov, ktorú sme určili v module Obchod.

1. Nakonfigurujte WooCommerce a produktové stránky

Pred vstupom do časti Divi tohto tutoriálu je dôležité, aby bol na vašom webe nainštalovaný a aktivovaný doplnok WooCommerce. Ak ste to ešte neurobili, pridajte viac produktov v závislosti od počtu produktov, ktoré chcete zobraziť v module Shop.

2. Vytvorte novú stránku a stiahnite si rozvrhnutie stránky

Vytvorte novú stránku

Akonáhle sú produkty na svojom mieste, pridajte do svojho backendu WordPress novú stránku. Zadajte názov svojej stránky, zverejnite ju a aktivujte program Divi Visual Builder.

Stiahnite si rozloženie cieľovej stránky

Po prechode na novú stránku prejdite na svoje prednastavené rozloženia a stiahnite si rozloženie vstupnej stránky pre písacie potreby. Aj keď používame toto konkrétne rozloženie, môžete slobodne použiť akékoľvek iné rozloženie, ktoré chcete, pokiaľ do tohto rozloženia pridáte alebo nájdete modul obchodu.

3. Upravte obchodnú časť

Vyhľadajte sekciu pomocou modulu Obchod

Ak sa posunieme nadol na našu novú stránku, ktorú sme vytvorili pomocou rozloženia domovskej stránky papiernictva, narazíme na sekciu s modulom obchodu. Túto časť použijeme v ďalších krokoch tohto tutoriálu.

Nastavenie linky

Responzívne dimenzovanie

Začnite otvorením nastavení riadkov v riadku obsahujúcom modul Obchod. Ako sme už spomínali, na pracovnej ploche ponechávame rovnaký dizajn, karty s potiahnutím produktu aktivujeme iba na menších veľkostiach obrazovky. 

Ak chcete vytvoriť zážitok bez námahy, umožníme riadku dotknúť sa ľavej a pravej strany obrazovky zmenou šírky v nastaveniach veľkosti.

  • Použite vlastnú šírku odkvapov: 1
  • Šírka: 80% (na počítači), 100% (na tablete a telefóne)

viditeľnosť

Zabezpečíme tiež, aby nič nepresahovalo riadkový kontajner nastavením nastavení viditeľnosti na skryté.

  • Horizontálny prepad: skrytý
  • Vertikálny prepad: skrytý

Nastavenia obchodného modulu

Vyberte počet produktov a štruktúru stĺpcov podľa vášho výberu

Ďalej otvoríme nastavenia modulu Obchod. Zmeny, ktoré urobíme v našom kóde CSS (ktoré pridáme neskôr), závisia od počtu produktov, ktoré zobrazujeme. 

Začneme tým, že vám ukážeme, ako zmeniť obchodný modul s 8 produktmi na produktové karty. Pre pracovnú plochu môžete zvoliť ľubovoľné rozloženie stĺpcov.

  • Počet produktov: 8
  • Rozloženie stĺpcov: 4 stĺpce

Responzívne dimenzovanie

Pre zväčšenie veľkosti nášho modulu v obchode zmeníme parametre dimenzovania na karte dizajn. Upozorňujeme, že to robíme iba pre tablet a telefón.

  • Šírka: 100% (na počítači), 250% (na tablete a telefóne)
  • Maximálna šírka: 100% (stôl), 250% (tablet a telefón)

Triedu CSS

Do nášho modulu obchodu tiež pridáme triedu CSS. Neskôr, keď pridáme kód CSS, môžeme transformovať modul Shop, ktorý nesie iba túto triedu CSS. Inými slovami, ak chcete, aby sa ďalší modul Shop zobrazoval v normálnom stave, vynechanie tejto triedy CSS vám to umožní.

  • Trieda CSS: karty so švihnutím produktu

Reaktívne prepady

Nastavenia linky doplníme zmenou nastavení viditeľnosti na rôznych veľkostiach obrazovky. Ako vidíte v nastaveniach, chceme, aby sa efekt rolovania vyskytoval iba na menších veľkostiach obrazovky.

  • Horizontálny prepad: skrytý (stôl), posúvanie (tablet a telefón)
  • Vertikálny prepad: skrytý

Pridajte modul kódu do modulu Obchod

Po úprave modulu Obchod môžete pridať modul kódu tesne pod.

Pridajte do modulu kód CSS

Nasledujúci kód CSS automaticky zmení náš obchodný modul 8 produktov na reaktívne magnetické karty:

<style> @media all and (max-width: 980px) { .product-swipe-cards ul.products {display: grid !important;grid-template-columns: repeat(8, 8.8%) !important;grid-column-gap: 0.7%;} .product-swipe-cards .woocommerce ul.products::before {content: none;display: block;} .product-swipe-cards.et_pb_shop ul.products li.product {width: 100% !important;} .product-swipe-cards .woocommerce {width: 255% !important;margin-left: 5%;} .product-swipe-cards::-webkit-scrollbar {display: none;} .product-swipe-cards {-ms-overflow-style: none;} } </style>

Porovnať rôzne účty produktov

Ak teraz chcete do modulu obchodu pridať menej (alebo viac) produktov, kód sa na dvoch miestach mierne zmení. Obidve tieto umiestnenia musia byť zmenené manuálne, aby sa dosiahol požadovaný výsledok. Zmeňme napríklad počet produktov v našom obchodnom module na „4“.

  • Počet produktov: 4

Keď sa vrátime k nášmu kódu, musíme urobiť dve zmeny. Najskôr budeme musieť upraviť stĺpce šablóny mriežky. Namiesto 8 používame 4 (rovnaké číslo ako náš počet produktov). Zvyšujeme tiež percentuálnu veľkosť, ktorú tieto výrobky zaberajú v našich produktových listoch (čím viac výrobkov, tým menej miesta).

stĺpce mriežky-šablóny: opakujte (4, 14%)! dôležité;

Potom tiež zmeníme šírku nádoby, do ktorej sú výrobky umiestnené. Pre 4 výrobky to predstavuje 150%. Tieto hodnoty nie sú pevne dané, získavajú sa hraním a hľadaním harmónie medzi stĺpcami mriežkového modelu a šírkou kontajnera. 

Ak chcete nájsť správne vyváženie, prepnite na mobilné zobrazenie vo vnútri nástroja Visual Builder a starostlivo sledujte hodnoty pri prezeraní výsledku týchto zmien.

width: 150%!important;

Pridajte snímku k posunu

Ak chcete posunúť dojem používateľa v dizajne karty prejdenia prstom o krok ďalej, môžete tiež pridať snímku rolovania. Zachytenie posúvania umožňuje vašim návštevníkom posúvať sa pohľadom upretým na začiatok nového produktu.

 To znamená, že ich skenovanie nemusí byť presné, v určitom okamihu prevezme kontrolu rolovania a zobrazenie upravujúce jeho polohu vo vnútri bočného rolovacieho mechanizmu. 

Ak chcete povoliť posúvanie snímania na kartách potiahnutia produktu, pridajte ku každému produktu osobitne v kóde CSS riadok kódu CSS (pozri tlačovú obrazovku nižšie).

scroll-snap-zarovnať: začať

Taktiež aktivujeme zachytávanie zvitkov v našom obchodnom module pridaním nasledujúceho riadku kódu CSS:

typ posuvníka: x povinný údaj

Opätovným použitím dielenského modulu môžete zobraziť ďalšie kategórie

Raz naklonovať celý riadok

Po dokončení prvej sady kariet na prejdenie prstom môžete celý riadok klonovať raz.

Odstráňte modul kódu v duplikovanom riadku

Pokiaľ váš modul obchodu obsahuje rovnakú triedu CSS ako predchádzajúca, urobí to modul kódu. Pokračujte a odstráňte kódový modul z duplicitného riadku.

Klonujte duplikát tak, ako chcete

A duplikujte tento riadok toľkokrát, koľkokrát je to potrebné, v závislosti od počtu balíčkov kariet, ktoré chcete zobraziť, na svojej vstupnej stránke!

4. Uložte zmeny stránky a pozrite si výsledky na mobilnom zariadení

Uistite sa, že keď skončíte s pridávaním kariet posúvania produktu, uložte svoju stránku pred ukončením programu Visual Builder a ste hotoví!

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.

záverečné myšlienky

V tomto článku sme si ukázali, ako zmeniť integrovaný modul Divi Shop na magnetické karty produktu na menších veľkostiach obrazovky. Na pracovnej ploche sme ponechali pôvodnú štruktúru stĺpcov priradenú modulu Shop. 

Používanie máp posúvania produktov vám umožňuje pridávať nekonečné produkty do mechanizmu horizontálneho posúvania bez toho, aby ste ohromili návštevníkov, ktorí sa pohybujú vo zvislom smere.

Toto je trend, ktorý sa často používa v modernom dizajne webových stránok, pretože sa zameriava na správanie používateľov a uľahčuje prístup k širokej škále prvkov na menších obrazovkách.

 Tieto produktové listy môžete použiť na ľubovoľnej stránke, ale je to zvlášť užitočné pre všetky vstupné stránky produktov, ktoré vytvoríte. Tiež ste si mohli zadarmo stiahnuť súbor JSON s rozložením! 

Ak máte akékoľvek otázky alebo návrhy, neváhajte zanechať komentár v sekcii komentárov nižšie.

Comment ajouter un compteur animé au défilement sur Divi

Ako pridať animované počítadlo k posúvaniu na Divi

[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]

Animované počítadlá čísel sú na webe populárne ako spôsob zobrazovania číselných údajov na zvýraznenie hodnoty služieb, prípadových štúdií atď. Divi má vyhradený modul počítadla čísel, pomocou ktorého je možné ľahko generovať animované počítadlá čísel.

V tomto tutoriále vám však ukážeme, ako vytvoriť digitálne počítadlá, ktoré sa pri posúvaní animujú pomocou Divi. Pomocou možností polohy Divi a posúvacích efektov navrhneme jednoduché rozloženie pre zobrazenie dátumu s posúvacími číslami.

Časť 1: Vytvorenie nadpisovej časti

V tejto prvej časti vytvoríme jednoduchý názov pre rozloženie.

Najskôr do sekcie pridajte riadok jedného stĺpca.

Potom do riadku pridajte nový textový modul.

Aktualizujte obsah textového modulu nasledujúcim spôsobom:

Uložiť dátum

Potom aktualizujte štýl textu hlavičky takto:

  • Nadpis 2 Písmo: Prata
  • Položka 2 Veľkosť textu: 130 pixelov (stolné počítače), 70 pixelov (tablety), 40 pixlov (telefóny)

Časť 2: Vytvorenie počítadiel s pohyblivou animáciou

V tejto ďalšej časti vytvoríme tri počítadlá, ktoré budú animovať posúvané čísla, kým sa nezastavia, aby sa zobrazil dátum (mesiac, deň a rok). Každé počítadlo bude zostavené z celkom 5 textových modulov a oddeľovacieho modulu. Prvý textový modul bude slúžiť ako štítok počítadla (t. J. Mesiac, deň, rok). Nasledujúce štyri textové moduly budú obsahovať každý iný iný počet (prebieha), ktorý sa bude animovať pri rolovaní pomocou posunov vertikálneho pohybu v Divi. Spodný separačný modul pomôže skryť pretečenie čísel.

Tu je návod.

Pridajte druhý riadok

Pod existujúci riadok pridajte do stĺpca ďalší riadok.

Nastavenie linky

Pred pridaním modulu aktualizujte parametre riadku takto:

  • Šírka odkvapov: 1
  • Výplň: vysoká 0px, nízka 0px

Parametre stĺpca

Potom otvorte nastavenia stĺpcov a aktualizujte výplň nasledovne:

  • Výplň (stola): 100px nízka
  • Výplň (tablet a telefón): 0px nízka

Pridajte textový modul

Potom do stĺpca pridajte textový modul.

Obsah / štítok

K obsahu textového modulu pridajte slovo „mesiac“.

Nastavenia textového dizajnu

Po pridaní obsahu aktualizujte nastavenia dizajnu nasledovne:

  • Farba pozadia: #ffffff
  • Písmo textu: Talk
  • Veľkosť textu: 40px
  • Výška riadku textu: 2em
  • Šírka: 100%
  • Výplň: 20 pixelov hore, 20 pixelov dole, 20 pixelov vľavo, 20 pixelov vpravo
  • Šírka dolného okraja: 5px
  • Farba dolného okraja: #eeeeee
poloha

Potom na karte Rozšírené aktualizujte možnosti pozícií takto:

  • Pozícia: relatívna
  • Z index 1

Pridajte textový modul pre prvé vydanie

Len čo bude prvý textový modul na mieste, môžeme začať pridávať čísla, ktoré sa budú pohybovať na zvitku. Ak chcete pridať prvé číslo, pridajte do existujúceho textového modulu „Mesiac“ nový textový modul.

Pridajte číslo / obsah

Potom aktualizujte štítok textového modulu tak, aby čítal „num1“ pre ľahšiu orientáciu. Potom aktualizujte obsah číslom „01“.

Dizajnové nastavenie pre číslo

Na karte Dizajn aktualizujte nasledujúce informácie:

  • Písmo textu: Prata
  • Farba textu: # 8ab2d3
  • Veľkosť textu: 70px
  • Rozstup písmen: 4px
  • Výška riadku textu: 1.5m
  • Výplň: 20px vľavo

POZNÁMKA: Čísla majú veľkosť textu 70px a výšku riadku 1.5m, čo znamená, že celková výška textového modulu bude takmer 100px. Toto je dôležité mať na pamäti, kedykoľvek začneme pridávať kompenzácie vertikálneho pohybu. Napríklad pridanie vertikálneho posunu „1“ do textového modulu presunie textový modul presne o 100 pixlov, čo je výška textového modulu.

Posuňte efekty pre prvé číslo

Do textového modulu pridajte nasledujúce efekty posúvania.

Na karte Vertikálny pohyb aktualizujte nasledujúce informácie:

  • Povoliť vertikálny pohyb: ÁNO
  • Počiatočný posun: 1 (pri 10%)
  • Priemerný ofset: 0 (pri 20%)
  • Koncový posun: -1 (pri 30%)

Na karte Fade In and Fade Out aktualizujte nasledujúce položky:

  • Aktivujte zoslabovanie a vypínanie: ÁNO
  • Počiatočná opacita: 0% (pri 10%)
  • Priemerná opacita: 100% (pri 20%)
  • Konečná opacita: 0% (až 30%)

Nezabudnite nastaviť spúšťač efektu pohybu v hornej časti klipu:

  • Spúšťač pohybových efektov: vrchná časť prvku

Vytvorte textový modul pre druhé číslo

Duplikujte prvé číslo

Po vytvorení prvého čísla ho duplikujte, aby ste vytvorili textový modul druhého čísla. Potom aktualizujte štítok v zobrazení vrstiev pre lepšiu orientáciu.

Aktualizujte číslo / obsah

Otvorte parametre druhého digitálneho textového modulu a aktualizujte obsah číslom „02“.

Aktualizovať pozíciu

Potom aktualizujte možnosti pozícií nasledovne:

  • Pozícia: Absolútna
  • Vertikálne odsadenie: 126 px

Aktualizujte efekty posúvania

Potom aktualizujte posúvacie efekty nasledujúcim spôsobom:

Na karte Vertikálny pohyb aktualizujte nasledujúce položky:

  • Počiatočný posun: 1 (pri 20%)
  • Priemerný ofset: 0 (pri 30%)
  • Koncový posun: -1 (pri 40%)

Na karte Fade In and Fade Out aktualizujte nasledujúce položky:

  • Počiatočná opacita: 0% (pri 20%)
  • Priemerná opacita: 100% (pri 30%)
  • Konečná opacita: 0% (až 40%)

Vytvorte textový modul pre tretie vydanie

Duplikujte druhé číslo

Ak chcete vytvoriť textový modul pre tretie číslo, duplikujte textový modul pre druhé číslo.

Aktualizujte číslo / obsah

Aktualizujte obsah číslom „03“.

Aktualizujte efekty posúvania

Potom aktualizujte posúvacie efekty:

Na karte Vertikálny pohyb aktualizujte nasledujúce položky:

  • Počiatočný posun: 1 (pri 30%)
  • Priemerný ofset: 0 (pri 40%)
  • Koncový posun: -1 (pri 50%)

Na karte Fade In and Fade Out aktualizujte nasledujúce položky:

  • Počiatočná opacita: 0% (pri 30%)
  • Priemerná opacita: 100% (pri 40%)
  • Konečná opacita: 0% (až 50%)

Vytvorte textový modul pre štvrté vydanie

Tretie duplicitné vydanie

Ak chcete vytvoriť štvrté číslo pre posúvacie počítadlo, duplikujte textový modul pre tretie číslo.

Aktualizujte číslo / obsah

Aktualizujte obsah číslom „04“.

Aktualizujte efekty posúvania

Potom aktualizujte posúvacie efekty:

Na karte Vertikálny pohyb aktualizujte nasledujúce položky:

  • Počiatočný posun: 1 (pri 40%)
  • Priemerný ofset: 0 (pri 50%)
  • Koncový posun: 0 (pri 60%)

Na karte Fade In and Fade Out aktualizujte nasledujúce položky:

  • Počiatočná opacita: 0% (pri 40%)
  • Priemerná opacita: 100% (pri 50%)
  • Konečná opacita: 100% (až 60%)

Pridajte dolný oddeľovač

Pod posledný modul textu pridajte nový modul oddeľovača. Toto sa použije na skrytie dolného pretečenia posúvaného textu v zobrazení.

Potom zvoľte NO, aby ste zobrazili oddeľovač.

Nastavenie štýlu a polohy

Aktualizujte návrh oddeľovača takto:

  • Farba pozadia: #ffffff
  • Šírka: 100%
  • Výška: 100px
  • Šírka horného okraja: 5px

Na karte Spresnenie aktualizujte nasledujúce položky:

  • Deaktivovať: telefón a tablet
  • Pozícia: Absolútna
  • Umiestnenie: vľavo dole

DÔLEŽITÉ: Priestor, ktorý zaberá oddeľovač, bol vytvorený skôr pridaním dolnej výplne 100 pixelov do stĺpca. Ak nepridáte túto výplň, oddeľovač prekrýva číslice.

Vytvorenie ďalších počítadiel a stĺpcov

Duplikujte stĺpec 1 a aktualizujte obsah

Ak chcete vytvoriť nové počítadlo, duplikujte stĺpec 1. Týmto sa automaticky vytvorí druhý stĺpec so všetkými prvkami na mieste.

Potom stačí len aktualizovať obsah všetkých textových modulov novými textami a číslami.

Duplikujte stĺpec 2 a aktualizujte obsah

Po aktualizácii obsahu všetkých textových modulov v stĺpci 2 duplikujte stĺpec 2 a vytvorte tretie počítadlo pre daný rok. Potom podľa potreby aktualizujte obsah každého textového modulu.

Konečný výsledok

Toto je konečný výsledok.

Ďalšie zdroje

záverečné myšlienky

Toto jednoduché rozloženie s animovanými posúvačmi čísel by malo byť užitočné na zobrazovanie digitálnych údajov novým a jedinečným spôsobom. Neváhajte sa zbaviť konceptu dátumu a použite pulty na čokoľvek, o čom môžete snívať!

Comment créer des tiroirs animés sur Divi

Ako vytvoriť animované zásuvky na Divi

[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]

Zásuvky päty sú užitočným doplnkom každej webovej stránky, pretože ukladajú ďalší obsah, ktorý je pre používateľov ľahko prístupný. Zásuvky päty sú kontajnery webového obsahu (napríklad sekcia Divi), ktoré sa dajú otvoriť a zavrieť kliknutím na tlačidlo alebo umiestnením kurzora myši nad ňu. Je to ako mať trochu ukrytého pre prémiový obsah.

V tomto tutoriále navrhneme plávajúcu zásuvku päty v Divi. Zásuvku päty pridáme do celkovej oblasti päty šablóny webovej stránky, aby bola zásuvka päty prístupná na celom webe s normálnym obsahom päty.

V rámci procesu, ktorý použijeme, je možné ktorúkoľvek sekciu Divi (a jej obsah) previesť do zásuvky päty v priebehu niekoľkých minút.

Ako pridať šablónu zásuvky päty na vaše stránky Divi

Pridaním tejto šablóny nahradíte predvolenú šablónu webových stránok (ak ju máte) na svojej stránke Divi. Navrhujeme, aby ste ho pridali na testovacie stránky, aby ste na živom webe nič nepokazili.

Ak chcete importovať model zásuvky s pevnou pätou na svoj vlastný web, rozbaľte stiahnutý súbor zip a získajte prístup k súboru JSON.

Potom choďte na dashboard WordPress a choďte na Divi> Theme Builder.

Potom kliknite na ikonu prenosnosti v pravom hornom rohu stránky.

V okne prenositeľnosti vyberte súbor JSON, ktorý ste práve rozbalili, a vyberte možnosť „Pred importom stiahnuť zálohu“, pre prípad, že ste predtým v predvolenej šablóne webu mali niečo, čo ste nemali nechcel vymeniť.

Potom kliknite na tlačidlo Importovať.

Nakoniec uložte zmeny do generátora motívov a zobrazte živú stránku, aby ste videli pevný pätu.

Teraz k tutoriálu, dobre?

Časť 1: Pridanie globálnej päty

Generátor témy Divi vám umožňuje nahradiť predvolenú pätu novou a to aktualizáciou predvolenej šablóny webovej stránky.

Ak chcete vytvoriť globálnu pätu, prejdite na hlavný panel WordPress a prejdite na ikonu Divi> Tvorca tém. Potom kliknite na priestor „Pridať globálnu pätu“ v rámci predvolenej šablóny webovej stránky.

Potom z rozbaľovacieho zoznamu vyberte možnosť „Vytvoriť globálnu pätu“.

Pridajte preddefinované rozloženie do globálneho rozloženia päty

Týmto sa nasadí editor rozloženia modelu, kde budete okamžite vyzvaní k trom možnostiam, ako chcete začať stavať. Vyberte možnosť „Vybrať preddefinované rozloženie“.

V rozbaľovacom okne Načítať z knižnice nájdite rozloženie vstupnej stránky pre písacie potreby. Potom kliknite na „Použiť toto rozloženie“.

Odstráňte nežiadúci obsah z predpripraveného rozloženia

Po načítaní rozloženia v editore rozbaľte rozbaľovacie okno Vrstvy kliknutím na ikonu vrstiev v ponuke nastavení. Potom odstráňte všetky časti rozloženia okrem posledných dvoch.

Presuňte a označte dve sekcie

Po odstránení sekcií by ste mali mať dve sekcie, jedna s názvom „Päta“ a druhá s názvom „Ako to funguje“. Posuňte sekciu Päta do hornej časti rozloženia.

Zmeňte znenie v dolnej časti na „Zásuvka päty“. Toto bude sekcia, ktorú použijeme ako obsah nášho päty zásuvky.

Časť 2: Vytvorenie pevnej zásuvky päty

Teraz, keď sme určili jednu z častí ako pätu a druhú ako zásuvku päty, sme pripravení začať stavať našu pevnú zásuvku päty. Začnime vytvorením ikonky, ktorú použijeme na prepnutie zásuvky päty.

Vytvorenie tlačidla zásuvky päty

Pridať nový riadok

V dolnej časti päty pridajte do stĺpca nový riadok.

Nový riadok označte štítkom „Tlačidlo zásuvky“, pretože to je riadok, ktorý bude obsahovať tlačidlo, ktorým sa prepína otvorenie a zatvorenie zásuvky. Potom posuňte čiaru do hornej časti časti.

Riadkové vypchávky

Pred pridaním modulu otvorte nastavenia riadkov a aktualizujte výplň nasledovne:

  • Výplň: vysoká 0px, nízka 0px

Čalúnenie sekcie

Potom otvorte nastavenia v časti Zásuvka päty a aktualizujte výplň nasledujúcim spôsobom:

Aby sme vytvorili klikateľné tlačidlo, ktoré prepína zásuvku päty, použijeme modul reklamy s ikonou. A my mu dáme jedinečný tvar kvapky vody kombináciou štvorcového tvaru nádoby Blurb pod s ikonou kruhu.

Tu je návod.

Pridajte modul Blurb

Pridajte riadok s textom prezentácie do riadku „Tlačidlo zásuvky“ v hornej časti sekcie.

Blurb content / icon

Ďalej odstráňte predvolený nadpis a obsah tela a vyberte ikonu šípky, ktorá smeruje do ľavého horného rohu (pozri snímku obrazovky). Používame ikonu čiastočne otočenej, pretože ju budeme otáčať neskôr.

Blurb dizajn

Potom uveďte text prezentácie takto:

  • Farba pozadia: # 081540

Potom aktualizujte parametre návrhu nasledovne:

  • Farba ikony: #eeeeee
  • Ikona kruhu: ÁNO
  • Farba kruhu: # 081540
  • Použiť veľkosť písma ikony: ÁNO
  • Veľkosť písma ikony: 17 pixelov
Veľkosť prezentačného textu

Teraz dajte modulu výšku a šírku nasledovne:

  • Šírka: 30px
  • Výška: 30px

To spôsobí, že ikona kruhu pretečie do textového kontajnera a vytvorí tvar kvapky vody.

Blur Position

Potom poskytnite prezentačnému textu absolútnu polohu v hornej časti sekcie.

  • Pozícia: Absolútna
  • Umiestnenie: Horné centrum
Nastavenia transformácie poruchy

Teraz môžeme pomocou možností transformácie otočiť ikonu / reklamu hore a umiestniť ju tesne nad kontajner sekcie. Keď teraz skryjeme sekciu pod oknom prehliadača, ikona zostane viditeľná / dá sa na ňu kliknúť.

Aktualizujte nasledujúce položky:

  • Os Transform Translate X: -50%
  • Transformácia osi Y preklad: -250%
  • Transformácia rotácie osi Z: -45 stupňov

Potom odstráňte predvolenú animáciu ikony:

  • Animácia obrázka / ikony: žiadna animácia

Budeme používať JQuery na prepínanie zásuvky, takže musíme zamerať text / ikonu ako klikateľný prvok s triedou CSS, ktorú použijeme neskôr v kóde. Pridajte nasledujúcu triedu CSS:

  • Trieda CSS: cieľová zásuvka

Nastavenia sekcie zásuvky päty

Teraz pomocou možnosti preložiť transformáciu skryjeme sekciu „Zásuvka päty“. Otvorte nastavenia sekcie a aktualizujte nasledujúce položky:

  • Os transformácie a prekladu Y: 100%

Krása použitia transformácie tu je, že percentuálne hodnoty sú založené na skutočnej veľkosti položky. 100% na osi Y bude teda priamo relatívnych k výške úseku (bez ohľadu na to, aký je v danom okamihu). Inými slovami, prvok sa presunie nadol o presnú vzdialenosť ako jeho vlastná výška.

Ak chcete znova zobraziť zásuvku päty, budeme musieť zvrátiť transformačný preklad, ktorý sme práve pridali do sekcie. Aby sme to dosiahli, budeme musieť na element zamerať triedu CSS a zakázať transformáciu prekladu kliknutím na ikonu (vrátiť celú sekciu do pôvodnej polohy).

Pridajte do sekcie zásuvky päty triedu CSS

Na kartu rozšírené pridajte nasledujúcu triedu CSS:

  • Trieda CSS: has-transform

Sekcia zásuvky päty Pevná poloha

V poslednom kroku musíme upraviť zásuvku päty tak, aby (s ikonou) plávala v dolnej časti okna prehliadača.

Pozíciu sekcie Zásuvka päty aktualizujte nasledovne:

  • Poloha: pevná
  • Umiestnenie: vľavo dole
  • Z Index: 13

Vypnite mobilný obsah

Pretože budete mať obmedzené množstvo obsahu päty v zásuvke, do ktorého sa zmestí tablet aj telefón (z dôvodu obmedzenej výšky obrazovky), budete musieť vypnúť / skryť nepodstatné položky na displeji. V tomto príklade skryjeme stredný riadok rozloženia sekcie.

Otvorte nastavenia od druhého po posledný riadok v sekcii Zásuvka päty. Na karte rozšírené aktualizujte možnosť viditeľnosti a vypnite tak linku v telefóne a tablete.

Pridáva sa vlastný kód

Ak chcete do zásuvky päty pridať funkčnosť klikania a prepínania, musíme na stránku pridať vlastné CSS a JQuery. Za týmto účelom vytvorte nový modul kódu pod modulom Blurb použitým pre tlačidlo.

Potom vložte nasledujúci kód do oblasti kódu:

.has-transform, .drawer-target {transition: all 400ms ease-in-out;} .toggle-drawer-animation {transform: none !important;}.toggle-icon-animation {transform: rotate(-135deg) !important;}  .drawer-target {cursor: pointer;}(function($) {$(document).ready(function(){$('.drawer-target').click(function(){$(this).toggleClass('toggle-icon-animation');      $('.has-transform').toggleClass('toggle-drawer-animation');   });    });})( jQuery );   

Uložte zmeny

Pred opustením editora nezabudnite rozloženie uložiť.

Uložte tiež zmeny v generátore tém.

Konečný výsledok

Teraz môžeme prejsť na ľubovoľnú stránku vášho webu a pozrieť si konečný výsledok.

záverečné myšlienky

Dúfam, že plávajúca zásuvka päty vám pomôže zábavným a prístupným spôsobom propagovať obsah. Ako každú zásuvku môžete do nej naplniť takmer všetko, na čo si spomeniete.

Ďalšie zdroje

Tu je zoznam návodov, ktoré vám môžu pomôcť dosiahnuť viac s vnútornými funkciami Divi.

Preložené z: elegantný témy

Créer une section de contact flottante avec des effets de défilement sur Divi

Vytvorte plávajúcu sekciu kontaktov s posúvacími účinkami na Divi

[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]

Každá webová stránka potrebuje sekciu s kontaktmi, ale to neznamená, že musíte zvoliť štandardný dizajn. Pomocou posúvacích efektov Divi môžete vytvoriť plávajúcu sekciu kontaktov, ktorá vynikne. Vylepšite svoju interakciu s používateľom pomocou vertikálneho rolovacieho rozloženia sekcie kontaktov, ktoré pozve návštevníkov na interakciu s vašim kontaktným formulárom. V tomto článku vám ukážeme, ako vytvoriť plávajúcu časť kontaktov s plnou šírkou, ktorú môžete pridať na ľubovoľnú stránku. Pomocou nástroja na vytváranie tém Divi ho môžete dokonca pridať do hornej časti päty celého webu.

Ďalej nájdete bezplatný súbor na stiahnutie s rozložením JSON, ktorý si môžete stiahnuť vo svojej vlastnej knižnici Divi. Zahrnuli sme tiež šablónu PSD, ktorá vám pomôže znovu vytvoriť pozadie mapy, ako aj kolík mapy SVG, aby ste si ho mohli prispôsobiť svojimi vlastnými farbami.

Vytvorte štruktúru prvkov

V tomto dizajne použijeme obrázok na pozadí, ktorý na Google Mape predstavuje miesto, ktoré chcete zvýrazniť. Môžete to urobiť pomocou aplikácie Photoshop alebo iného editora obrázkov.

Pridajte novú sekciu

Teraz je čas začať vytvárať sekciu plávajúcich kontaktov pomocou nástroja Divi Builder! Prvá vec, ktorú urobíme, je otvorenie novej alebo existujúcej stránky a pridanie novej sekcie.

Na karte obsah pridajte pozadie mapy, ktorú ste vytvorili vo Photoshope.

  • Obrázok na pozadí: vaša upravená mapa

vzdialenosť

Ďalej upravte nastavenia medzery sekcií na karte dizajn.

  • Horný a dolný okraj: 50 h
  • Spodné čalúnenie: 0vw

viditeľnosť

Potom nastavte prepady na viditeľné.

  • Horizontálny a vertikálny prepad: viditeľný

poloha

Nakoniec nastavte index Z sekcie na 10.

  • Z Index: 10

Pridať nový riadok

Štruktúra stĺpcov

Teraz je čas pridať pár vecí. Najskôr pridajte riadok s 2 stĺpcami.

dimenzovanie

Otvorte parametre linky a upravte veľkosť podľa nasledujúceho postupu.

  • Šírka
    • Kancelária: 90%
    • Tablet a telefón: 80%
  • Maximálna šírka: 90%

viditeľnosť

Kliknite na kartu rozšírené a potom upravte pretečenia.

  • Horizontálny a vertikálny prepad: viditeľný

poloha

Dokončite nastavenia riadku úpravou nastavení polohy.

  • Pozícia: relatívna
  • Počiatočný posun: ľavý horný
  • Vertikálne posunutie
    • Pracovná plocha: -8vw

Nastavenia stĺpca 1

pozadia

Pred pridaním modulov musíme upraviť jednotlivé stĺpce. Pridajte farbu pozadia do stĺpca 1.

  • Jednofarebné: # 25274d

riadkovanie

Ďalej upravte nastavenie medzier.

  • Vrchné a spodné čalúnenie
    • Stolné počítače a tablety: 7vw
  • Čalúnenie vľavo a vpravo
    • Pracovná plocha: 3vw
    • Tablet a telefón: 6 Vw

Hranice

Potom pridajte niektoré zaoblené rohy do nastavení okrajov.

  • Zaoblené rohy: 10px všetky štyri rohy

Efekty posúvania

V neposlednom rade použite určitý zvislý pohyb v nastaveniach efektov posúvania. Pomôže nám to vytvoriť plávajúci efekt.

  • Efekty posunutej transformácie: Vertikálny pohyb
  • Vertikálny pohyb / pracovná plocha
    • Počiatočný posun: 4
    • Stredná korekcia: 0 (pri 50%)
    • Koncový ofset: -4
  • Vertikálny pohyb / tablet a telefón
    • Počiatočný posun: 4
    • Stredná odchýlka: 0 (pri 40% a 60%)
    • Koncový posun: -3
  • Efekt spúšťacieho pohybu: stred prvku

Nastavenia stĺpca 2

poloha

Teraz prejdime k parametrom druhého stĺpca. Podľa toho upravte nastavenie polohy.

  • Pozícia: relatívna
  • Počiatok odsadenia: vľavo hore
  • Vertikálne odsadenie
    • Kancelária: 25vw

Posúvacie efekty

Do tohto stĺpca pridávame aj vertikálny pohyb.

  • Efekty transformácie posunu: vertikálny pohyb
  • Definujte vertikálny / desktopový pohyb
    • Počiatočný posun: 2
    • Priemerný ofset: 0 (pri 50%)
    • Koncový posun: -2
  • Definujte vertikálny pohyb / tablet a telefón
    • Počiatočný posun: 0
    • Priemerný ofset: 0 (pri 50%)
    • Koncový posun: -2
  • Spúšťač pohybových efektov: vrchná časť prvku

Pridajte textový stĺpec do stĺpca 1

Obsah

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

Text nadpisu

Prejdite na kartu Dizajn a text H2 upravte nasledujúcim spôsobom.

  • Úroveň Názov: H2
  • Písmo: Palanquin Dark
  • Hmotnosť písma: tučné
  • Štýl písma: TT
  • Farba: žltá # ffd868
  • veľkosť
    • Kancelária: 5vw
    • Tablet: 10vw
    • Telefón: 12vw
  • Riadkovanie písmen: 4px

Pridajte modul kontaktného formulára do stĺpca 1

Obsah

Pod textový modul pridajte kontaktný formulár. Toto sú polia, ktoré používame:

  • názov
  • E-mail
  • materiál
  • správa

Ochrana spam

Pred stylingom modulu kontaktného formulára. aktivujte ochranu proti spamu a pripojte svoj účet ReCaptcha.

  • Použite službu ochrany proti spamu: Áno
  • Poskytovateľ služieb: ReCaptcha
  • Vyberte účet

poľa

Prepnite na kartu dizajn a upravte štýl polí nasledujúcim spôsobom.

  • Farba pozadia: Tmavo modrá # 25274d
  • Farba textu: svetlo šedá # d1d1d1
  • Farba pozadia zamerania: tmavo modrá # 25274d
  • Farba textu zaostrenia: svetlo šedá # d1d1d1
  • Písmo: Palanquin
  • Štýl: TT
  • Veľkosť textu
    • Kancelária: 0.9vw
    • Tablet: 2vw
    • Telefón: 3vw
  • Riadkovanie písmen: 1px

gombík

Potom štylizujte tlačidlo.

  • Vlastné štýly: Áno
  • Veľkosť textu: 20px
  • Farba textu: tmavo modrá # 25274d
  • Farba pozadia: žltá # ffd868
  • Polomer okraja: 7 pixlov
  • Farba ikony: Tmavo modrá # 25274d
  • Horný okraj: 5px

dimenzovanie

Potom upravíme parametre veľkosti.

  • Šírka: 100%
  • Maximálna šírka: 100%

vzdialenosť

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

  • Vrchná vypchávka: 4vw

hraničné

Dokončite parametre modulu prispôsobením parametrov hranice.

  • Vstupy so zaoblenými rohmi: 6 pixlov v štyroch rohoch
  • Štýly orámovania: všetky štyri strany
  • Šírka vstupného okraja: 2px
  • Záznamy Farba okraja: žltá # ffd868

Pridajte modul sledovania sociálnych médií do stĺpca 2

Obsah

Prejdite do stĺpca 2 a pridajte modul sociálnych médií. Využite všetky sociálne siete, ktoré potrebujete.

  • facebook
  • cvrlikání
  • linkedin

Spojenie

Pred stylingom pridajte odkazy do príslušných sietí.

Kontext článku

Teraz otvorte prvú sociálnu sieť a zmeňte farbu pozadia.

  • Farba: Tmavomodrá # 25274d

Ikona prvku

Na karte dizajn toho istého prvku zmeňte nastavenie ikony nasledovne.

  • Farba: žltá # ffd868
  • Veľkosť písma ikony
    • Stôl a tablet: 31 px
    • Telefón: 26 px

Riadkovanie položiek

Potom pridajte malý okraj, aby ste od seba oddelili ikony.

  • Pravý okraj: 1vw

Skopírujte a prilepte štýly položiek

Ak chcete upraviť štýl zostávajúcich sociálnych sietí, vráťte sa do hlavného okna obsahu a skopírujte štýly prvkov z prvej ikony. Potom prilepte štýly prvkov na zvyšné sociálne siete.

zarovnanie

Prepnite na hlavnú kartu dizajnu a uistite sa, že je modul zarovnaný doľava.

  • Zarovnanie modulu: vľavo

dimenzovanie

Potom upravte veľkosť modulu.

  • Šírka: 100%

vzdialenosť

Vymažte tiež všetky predvolené výplne.

  • Vrchná, spodná, ľavá a pravá výplň: 0vw

hraničné

Nakoniec v nastaveniach ohraničenia pridajte zaoblené rohy. Týmto sa upravia hranice všetkých ikon naraz.

  • zaoblené rohy
    • Vľavo a vpravo hore: 7 pixelov
    • Vľavo a vpravo dole: 0px

Pridajte textový stĺpec do stĺpca 2

Obsah

V rámci modulu sociálnych médií pridajte ďalší textový modul. Pridajte obsah podľa vášho výberu. Pridali sme dve adresy, telefónne číslo a e-mail. Tučným písmom označte nadpis každej položky veľkými písmenami.

  • Všeobecné Oblasť: 1587 Sukhumvit Soi 21, Bangkok, Thajsko.
  • Miesto predaja : Emporium Mall, 2. poschodie
  • telefón: (321) 564 2398
  • e-mail: [chránené e-mailom]

kontext

Zmeňte farbu pozadia modulu.

  • Farba: Tmavomodrá # 25274d

Texty

Prepnite na kartu dizajn a upravte štýl textu.

  • Písmo: Palanquin
  • Farba: žltá # ffd868
  • Veľkosť: 18px

vzdialenosť

Pridajte tiež vlastné hodnoty medzery.

  • Horný okraj
    • Kancelária: -60px
    • Tablet a telefón: -50 pixelov
  • Vrchná, spodná, ľavá a pravá výplň
    • Kancelária: 3vw
    • Tablet: 6vw
    • Telefón: 8vw

hraničné

A modul dokončite pridaním zaoblených rohov v nastaveniach ohraničenia. To je všetko!

  • Zaoblené rohy: 10 pixelov vpravo hore, vľavo dole a vpravo dole.

prehľad

Teraz, keď sme dokončili nové vytváranie plávajúcich kontaktov, sa pozrite na výsledok na rôznych veľkostiach obrazovky.

Dodatočné zdroje

Jeho zdroje môžu dopĺňať to, čo ste práve čítali. Môžu byť použité dodatočne alebo tými, ktorí nemajú tému Divi.

Dokončiť

Pomocou nových rolovacích efektov Divi sa každé štandardné rozloženie zmení na pekný dizajn. Vytvorením vlastného pozadia získate väčšiu kontrolu nad vzhľadom hotového dizajnu. Ak máte akékoľvek otázky alebo návrhy, zanechajte komentár v sekcii komentárov nižšie!

Comment créer une animation de défilement d’arrière-plan de texte coloré avec Divi

Ako vytvoriť farebnú textovú animáciu na pozadí pomocou Divi

[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]

Vytvorenie animácie posúvania pozadia textu je jedinečný spôsob, ako pridať farebné animované textúry k textu vášho webu, keď používateľ posúva stránku. Keď ste sa naučili niekoľko kľúčových techník, proces je s Divi prekvapivo ľahký.

V tomto tutoriáli použijeme iba silu vstavaných nastavení Divi na vytvorenie 3 jedinečných návrhov, ktoré obsahujú farebnú animáciu posúvania pozadia textu. Ukážeme vám dokonca, ako vytvoriť tmavú verziu každého dizajnu pre úplne nový vzhľad.

Začnime!

Možný výsledok

Tu je prehľad návrhov, ktoré dnes postavíme.

Dizajn 1: Prechod na pozadí textu s efektom vodorovného posúvania

Tento prvý dizajn bude obsahovať efekt horizontálneho posúvania, ktorý animuje farebný oddeľovač za textovým modulom pomocou filtra na obrazovke.

Pridajte stĺpec

Ak chcete začať, do predvolenej sekcie pridajte riadok s jedným stĺpcom.

Pridajte textový modul

Potom do stĺpca pridajte nový textový modul.

Obsah

Pre obsah stĺpca vložte nasledujúci kód HTML do oblasti obsahu:

Formátovanie textu

Potom aktualizujte návrh textu nasledovne:

  • Farba pozadia: #ffffff
  • Štýl písma textu: TT
  • Farba textu: # 000000
  • Veľkosť textu: 100 px (na pracovnej ploche), 40 px (na telefóne)
  • Riadkovanie textu: 0.15em
  • Výška riadku textu: 1em
  • Zarovnanie textu: stred
  • Písmo názvu: Merriweather
  • Hmotnosť písma názvu: tučné
  • Štýl písma názvu: TT
  • Zarovnanie textu hlavičky: na stred
  • Farba textu hlavičky: # 000000
  • Veľkosť textu hlavičky: 200px (stolný počítač), 80px (telefón)
  • Riadkovanie písmen názvu: 0.15em
  • Výška nadpisu: 1em

Výplň a filter

Teraz musíme do textového modulu pridať nejaké polstrovanie a filter obrazovky. Aby tento dizajn fungoval, je potrebný filter, ktorý umožňuje, aby sa za textom zobrazovali farby / mody pozadia.

Ak chcete pridať výplň a filter, aktualizujte nasledujúce informácie:

  • výplň: vysoká 15px, nízka 20px
  • Režim prelínania: obrazovka

Poznámka: Režim prelínania obrazovky funguje najlepšie s čiernym textom na bielom pozadí. Ak by sme chceli použiť biely text na čiernom pozadí, použili by sme režim Viacnásobné prelínanie.

Horný a dolný oddeľovač

Po dokončení nášho textového modulu pridajte niektoré oddeľovače (nad a jeden pod textový modul) pre ďalší konštrukčný prvok.

Pridajte dolný oddeľovač

Pridajte nový textový modul pod textový modul.

Vyššie nastavenie separácie

Otvorte nastavenia oddeľovača a výberom položky NO zobrazte oddeľovač.

Potom aktualizujte pozadie a poskytnite rozdeľovaču rovnaký režim prelínania ako textový modul, a to nasledovne:

  • Farba pozadia vľavo: # 000000
  • Farba pozadia s prechodom vpravo: #ffffff
  • Smer sklonu: 90deg
  • Počiatočná pozícia: 48%
  • Koncová pozícia: 0%
  • Režim prelínania: obrazovka

Potom aktualizujte výšku rozdeľovača na obrazovke telefónu takto:

  • Výška: 15px (telefón)

Pridajte horný oddeľovač

Ak chcete vytvoriť horný rozdeľovač, duplikujte predchádzajúci spodný rozdeľovač a presuňte ho nad textový modul pomocou oblasti zobrazenia vrstiev.

Potom obráťte farby na pozadí s prechodom.

Aktualizujte parametre linky

Akonáhle sú naše horné a dolné oddeľovače na mieste, aktualizujte parametre linky nasledovne:

  • Šírka žľabu: 1 (na odstránenie spodných okrajov medzi modulmi)
  • Maximálna šírka: 600 pixlov (na zachovanie koherentného dizajnu na pracovnej ploche a tablete)
  • Zarovnanie čiary: stred
  • Výplň: vysoká 0px, nízka 0px
  • Horizontálny prepad: skrytý
  • Vertikálny prepad: skrytý

Vytvorte oddeľovač farby pozadia animovaného textu

Posledným prvkom tohto prvého dizajnu je oddeľovač, ktorý použijeme na animáciu farby pozadia textu na zvitku. Za týmto účelom pridajte nový separačný modul pod spodný rozdeľovač.

Potom zvoľte NO, aby ste zobrazili oddeľovač.

Nastavenia rozdeľovača pozadia

Aktualizujte oddeľovač pomocou pozadia s prechodom takto:

  • Farba pozadia vľavo: # e02b20
  • Farba gradientu na pravom pozadí: # 8300e9
  • Smer sklonu: 90deg
  • Počiatočná pozícia: 30%
  • Koncová pozícia: 70%

Chceme, aby výška oddeľovača bola dostatočne vysoká na to, aby zafarbil všetok náš text v textovom module a horný a dolný oddeľovač. Pre tento dizajn nastavte výšku na 400 pixelov.

  • Výška: 400px

Potom dajte rozdeľovaču absolútnu pozíciu, aby sa umiestnil priamo nad ostatné moduly. Pomocou indexu Z umiestnite rozdeľovač za ostatné moduly.

  • Pozícia: Absolútna
  • Z index: -1
Efekty rozdeľovača pozadia

Keď je oddeľovač v polohe, musíme iba presunúť oddeľovač za text pomocou efektov posuvu Divi. Pre tento dizajn pridáme do zvitku vodorovný pohyb.

Aktualizujte nasledujúce položky:

Na karte Horizontálny pohyb ...

kancelária

  • Aktivujte horizontálny pohyb: ÁNO
  • Počiatočný posun: 6 (pri 20%)
  • Priemerný ofset: 0 (pri 40% -60%)
  • Koncový posun: -6 (pri 80%)

Telefón

  • Počiatočný posun: 3
  • Koncový posun: -3

Nezabudnite tiež nastaviť spúšťač pohybového efektu uprostred klipu:

  • Efekt spúšťacieho pohybu: stred prvku

Pridajte medzery medzi sekciami

Ak chcete vytvoriť dočasný posúvací priestor na testovanie návrhu, do oddielu pridajte nasledujúci text:

  • Marža: 80 Vh nad, 80 Vh pod

záverečné myšlienky

Návrhy animácií pozadia textu zobrazené v tomto článku by v skutočnosti fungovali dobre ako statické návrhy bez pohybu pridania na zvitok. Ďalšie rolovacie efekty však skutočne posúvajú dizajn na úplne novú úroveň. Nebojte sa experimentovať s ďalšími farbami a efektmi!

Teším sa na vaše komentáre.

Na vaše zdravie!

Comment créer une barre de pied de page fixe avec Divi

Ako vytvoriť pevnú pätu pomocou Divi

[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]

Opravené pruhy päty môžu byť praktickým spôsobom, ako udržať dôležité informácie o vašom webe vpredu a v strede, keď používateľ interaguje s obsahom vašej stránky na akomkoľvek zariadení. 

Rovnako ako v prípade formátu Divi, pruh päty zvyčajne existuje ako statický prvok v dolnej časti stránky za hlavným obsahom päty. Zahŕňajú veci ako text autorských práv a ikony sociálnych médií. 

Ak však neskryjete obsah pruhu päty v dolnej časti stránky, môžete vytvoriť vlastný pruh päty, ktorý sa bude pohybovať v dolnej časti obrazovky, kým sa používateľ posúva.

V tomto výučbe navrhneme plne prispôsobenú pevnú lištu päty pomocou generátora tém Divi. To sa vám bude hodiť, aby ste tieto malé, ale dôležité časti obsahu mali neustále na očiach.

Možný výsledok

Tu je prehľad pevnej päty, ktorú budeme navrhovať.

Ako pridať šablónu s pevným pätom na stiahnutie na svoje stránky Divi

UPOZORNENIE!: Pridanie tejto šablóny nahradí predvolenú šablónu webovej stránky (ak ju máte) na vašom webe Divi. Navrhujeme, aby ste ho pridali na testovacie stránky, aby ste na živom webe nič nepokazili.

Ak chcete importovať šablónu s pevnou pätou na svoju vlastnú webovú stránku, rozbaľte stiahnutý súbor zip a získajte prístup k súboru JSON.

Potom choďte na dashboard WordPress a choďte na Divi> Theme Builder.

Potom kliknite na ikonu prenosnosti v pravom hornom rohu stránky.

V okne prenositeľnosti vyberte súbor JSON, ktorý ste práve rozbalili, a vyberte možnosť „Pred importom stiahnuť zálohu“, pre prípad, že ste predtým v predvolenej šablóne webu mali niečo, čo ste nemali nechcel vymeniť.

Potom kliknite na tlačidlo Importovať.

Nakoniec uložte zmeny do generátora motívov a zobrazte živú stránku, aby ste videli pevný pätu.

Teraz k tutoriálu, dobre?

Časť 1: Pridanie globálnej päty

Generátor témy Divi vám umožňuje nahradiť predvolenú pätu novou a to aktualizáciou predvolenej šablóny webovej stránky.

Ak chcete vytvoriť globálnu pätu, prejdite na hlavný panel WordPress a prejdite na ikonu Divi> Tvorca tém. Potom kliknite na priestor „Pridať globálnu pätu“ v rámci predvolenej šablóny webovej stránky.

Potom z rozbaľovacieho zoznamu vyberte možnosť „Vytvoriť vlastnú pätu“.

Týmto sa nasadí editor rozloženia modelu, kde budete okamžite vyzvaní k trom možnostiam, ako chcete začať stavať. Vyberte možnosť „Budovať od nuly“.

Časť 2: Vytvorenie pevnej päty

Teraz, keď upravujeme z editora rozloženia šablón, môžeme začať navrhovať pevnú lištu päty. Po dokončení budete mať pevnú lištu päty s tromi stĺpcami, ktoré sú pripravené na obsah.

Pridajte k riadku rozloženie s tromi stĺpcami

Najskôr do riadku pridajte rozloženie troch stĺpcov.

Výška prierezu

Po pridaní troch stĺpcov dáme sekcii definovanú výšku. To je dôležité pre vytvorenie priestoru v dolnej časti stránky, kde bude nakoniec pevná linka končiť. Odstránime tiež predvolené horné a spodné polstrovanie.

Ak chcete nastaviť výšku a výplň, otvorte nastavenia sekcie a aktualizujte nasledujúce informácie:

  • Výška: 85px
  • Výplň: vysoká 0px, nízka 0px

Nastavenie linky

Teraz, keď je naša sekcia pripravená, sme pripravení prispôsobiť riadok tak, aby slúžil ako pevná lišta päty. Otvorte nastavenia riadkov a aktualizujte nasledujúce položky:

kontext

  • Farba pozadia: # 1a1e36

Veľkosť a rozstup

  • Šírka odkvapov: 1
  • Šírka: 100%
  • Maximálna šírka: 100%
  • Výplň: 0px hore, 0px dolu, 3% vľavo, 3% vpravo

Vlastné CSS

Aj keď je riadok pevný, chceme, aby sa výška riadku zhodovala s výškou nadradenej časti, aby riadok správne obsahoval priestor v spodnej časti stránky. A chceme sa ubezpečiť, že obsah riadku zostane zvisle zarovnaný. Za týmto účelom pridajte do hlavného prvku riadku nasledujúce vlastné CSS:

kancelária

výška: zdediť! dôležité; displej: flex; zarovnané položky: stred;

Telefón

výška: zdediť! dôležité; zobrazenie: blok;

Pevné polohovanie

Aby bola čiara pevná tak, aby plávala v dolnej časti obrazovky, musíme jej dať pevnú pozíciu v dolnom stredovom mieste nasledovne:

  • Poloha: pevná
  • Poloha: dolný stred

Časť 2: Vytvorenie obsahu pevnej päty

V tomto okamihu máme pevnú lištu päty pripravenú na obsah. Do každého z troch stĺpcov môžeme pridať akýkoľvek požadovaný obsah. Ale keďže sa jedná o „lištu“ päty, ktorá je obmedzená na výšku 85 pixelov, musíme obmedziť množstvo obsahu. Z tohto dôvodu do stĺpca 4 pridáme malú ponuku s dynamickým logom a 1 položky ponuky. V stĺpci 2 pridáme text chránený autorskými právami s dynamickým aktuálnym rokom. V stĺpci 3 pridáme tri ikony sledovania sociálnych médií.

Pridajte ponuku do stĺpca 1

V stĺpci 1 pridajte modul ponuky.

Vyberte ponuku

Potom vyberte jedno z ponúk, ktoré ste už vytvorili na svojom webe. Nezabudnite udržiavať položky ponuky na hodnote 4 alebo menej.

Pridajte logo stránky ako dynamický obsah

Do ponuky loga dynamicky pridáme logo webu. Podržte kurzor nad oblasťou náhľadu loga a kliknite na ikonu „Použiť dynamický obsah“. Potom z rozbaľovacieho zoznamu vyberte logo webu.

Odstrániť pozadie

Potom odstráňte predvolené pozadie ponuky, aby bolo priehľadné.

menu design

V tomto okamihu sme pripravení pridať do ponuky nejaký dizajn. V prípade tohto dizajnu to ponecháme jednoduché a malé. Aktualizujte nasledujúce parametre návrhu:

  • Ponuka písiem: Overpass
  • Farba textu ponuky: # b59c61
  • Obrázok sépia: 100%
  • Maximálna výška loga: 50 px

Pridajte text autorských práv do stĺpca 2

Po nastavení ponuky prejdite do stĺpca 2 a pridajte text autorských práv.

Pridajte textový modul

Pridajte nový textový modul do stĺpca 2.

Dynamicky pridajte aktuálny dátum s textom pred a za text

Tu budeme kreatívni s dynamickým obsahom, aby sme zobrazili aktuálny rok v texte chránenom autorskými právami. To zabezpečí, že sa rok bude automaticky aktualizovať po celú dobu životnosti stránky.

Kliknite na ikonu „Použiť dynamický obsah“ a v zozname vyberte možnosť „Aktuálny dátum“.

V rozbaľovacom okne Aktuálny dátum aktualizujte nasledujúce údaje:

  • pred:
  • 01Copyright &copy;
  • after:
  • 01| Tous Droits Reservés
  • date Format : custom
  • Vlastný formát dátumu : 20 rokov

Formátovanie textu

Aktualizujte text a okraje nasledovne:

  • Písmo textu: Overpass
  • Farba textu: # b59c61
  • Zarovnanie textu: stred
  • Okraj (iba telefón): 10 pixelov hore, 10 pixelov dole

Toto podporuje text chránený autorskými právami.

Do stĺpca 3 pridajte ikony sledovania sociálnych médií

V stĺpci 3 pridajte modul sledovania sociálnych médií.

Pridajte sociálne siete

Na karte Obsah pridajte na web potrebné sociálne siete. Pre tento dizajn používame tri z nich.

Nastavenia sledovania sociálnych médií

Ďalej aktualizujte nastavenia dizajnu pre všetky ikony sledovania sociálnych médií takto:

  • Zarovnanie modulu: priame (stolný počítač a tablet), stred (telefón)
  • Farba ikony: # 1a1e36
  • Použite vlastnú veľkosť ikony: ÁNO
  • Veľkosť písma ikony: 16px (stolný počítač a tablet), 14px (telefón)

Aktualizujte nastavenia sociálnych médií

Ak chcete aktualizovať vzhľad ikony individuálnej sociálnej siete, otvorte nastavenia pre prvú sieť a aktualizujte nasledujúce položky:

  • Farba pozadia: #ffffff
  • Výplň: 8 pixelov napravo, 8 pixelov naľavo
  • Zaoblené rohy: 8px

Rozšírte nastavenia sociálnych médií na všetkých

Potom otvorte ponuku ďalších nastavení pre prvú sieť a vyberte možnosť „ Rozšíriť štýly položiek "v zozname. V rozbaľovacom okne Rozšíriť štýly vyberte možnosť Rozšíriť štýly v časti „ Tento stĺpec „A kliknite predĺžiť .

Tým sa rozšíri návrh na ďalšie ikony v stĺpci.

záverečné myšlienky

Pridanie pevnej lišty päty má v niektorých prípadoch zmysel. Výška lišty je dostatočne malá, aby nerozptyľovala mobil alebo nezaberala príliš veľa miesta v mobile. A dáva vám možnosť pridávať dôležité výzvy na akciu pre lepšie konverzie a plynulejší používateľský zážitok.

Pre tento dizajn je priestor v dolnej časti stránky vytvorený nastavením pevnej výšky pre oddiel a následným povolením, aby pevná čiara zdedila výšku oddielu (aj keď je pevná). 

Ostatné zdroje

Tu je zoznam ďalších zdrojov, ktoré vám môžu pomôcť pri navrhovaní vašich webových stránok s Divi.