Titulli juaj është një nga pjesët më të rëndësishme të faqes tuaj kryesore. Kjo është zakonisht ajo që shihni së pari, dhe për këtë arsye ajo që përcakton përshtypjen e parë. Si çdo përshtypje tjetër e parë, edhe ju dëshironi që ajo të jetë e mirë. Tani, nëse jeni duke kërkuar një mënyrë krijuese për të paraqitur titullin tuaj, ju do të kënaqeni me këtë tutorial pasi ne do t'ju tregojmë se si të shtoni animacione të bllokut të tekstit CSS në titullin tuaj dhe gjithashtu mund të shkarkoni skedarin JSON të paraqitjes falas!

studim

Para se të zhyteni në tutorial, le të hedhim një vështrim në rezultatin në madhësi të ndryshme të ekranit.

Punë praktike të paraparë për animacionin e titullit

Le të fillojmë modelimin

Shtoni seksionin # 1

Sfondi i gradientit

Filloni duke shtuar një seksion të rregullt në një faqe të re ose në faqen ku po punoni. Hapni cilësimet e seksionit dhe aplikoni sfondin e mëposhtëm të gradientit:

  • Ngjyra 1: # f0f2b
  • Ngjyra 2: # c10b1a
  • Lloji i gradientit: linear
  • Drejtimi i gradientit: 63deg
Konfigurimi i seksioneve divi

ndarje

Kaloni në skedën e dizajnit të seksionit dhe zbatoni vlerat e mëposhtme të personalizuara nga lart dhe në fund në madhësi të ndryshme të ekranit

  • Mbushja e sipërme: 7vw (desktop), 20vw (tabletë), 25vw (telefon)
  • Mbushja e poshtme: 7vw (tavolinë), 20vw (tabletë), 25vw (telefon)
Konfigurimi i ndarjes së seksionit Divi

kufi

Shtoni gjithashtu një kufi në seksion.

  • Gjerësia e kufirit: 2vw (sipër, majtas, djathtas)
  • Gjerësia e poshtme e kufirit: 0vw
  • Ngjyra e kufirit: #ffffff
Konfigurimi i kufirit të seksionit Divi

Shto një rresht të ri

Struktura e kolonës

Vazhdoni të shtoni një rresht të ri në seksion duke përdorur strukturën e kolonës së mëposhtme:

Konfigurimi i paraqitjes së kolonës Divi

sizing

Hapni parametrat e linjës dhe modifikoni parametrat e dimensionimit në përputhje me rrethanat:

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%
Konfigurimi i gjerësisë së kolonës Divi

Shtoni një modul teksti në kolonë

Shto përmbajtje H1

Pastaj shtoni një modul teksti me një titull H1 të zgjedhur tuaj.

Shtoni një modul teksti në kolonën 1 divi

Shtoni etiketa Div për secilën fjalë në titullin H1

Kaloni në skedën e tekstit të kopjes tuaj të titullit dhe shtoni një ndarje të ndryshme për secilën fjalë në titullin tuaj. ID-ja e CSS duhet të jetë e ndryshme për secilën fjalë.

Gati

Ndërtoni
E bukur
Uebfaqe?

Shtoni etiketat e modulit të tekstit divi

Cilësimet e tekstit H1

Kaloni në skedën e dizajnit të modulit dhe ndryshoni përkatësisht cilësimet e tekstit H1:

  • Shkronja e titullit: Sans pune
  • Pesha e shkronjave të titullit: e mesme
  • Ngjyra e tekstit të kokës: #ffffff
  • Madhësia e tekstit të kokës: 4vw (desktop), 5vw (tabletë), 6vw (telefon)
  • Lartësia e vijës së kokës: 1,4 em
Titulli i parametrit 1 divi

ndarje

Pastaj ndryshoni vlerat e diferencës në madhësi të ndryshme të ekranit.

  • Kufiri i majtë: 20vw (tavolinë dhe tablet), 15vw (telefon)
  • Marzhi i duhur: 35vw (desktop), 20vw (tabletë), 15vw (telefon)
Konfigurimi i ndarjes së modulit të tekstit Divi

Shtoni një modul kodi në kolonë

Vendosni kodin CSS

Në mënyrë që animacioni i bllokut të tekstit të zbatohet në titullin tonë, do të na duhet disa kod CSS. Ne do ta shtojmë këtë kod CSS në një modul të ri të kodit.

<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>

Ngjit kodin e divit css

ndarje

Kaloni në skedën e dizajnit të modulit dhe hiqni të gjitha mbushjet e paracaktuara të poshtme.

  • Marzhi i poshtëm: 0px
Personalizoni magjitë e modulit divi

Shtoni një modul butoni në kolonë

Shto një kopje

Moduli tjetër që na duhet është një modul butoni. Vendosni një kopje të zgjedhjes suaj.

Bëni një kopje të modulit boton divi

Cilësimet e butonit

Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e butonit në përputhje me rrethanat:

  • Përdorni stilet me porosi për butonin: Po
  • Madhësia e tekstit të butonit: 1vw (desktop), 2vw (tablet), 3vw (telefon)
  • Ngjyra e tekstit të butonit: #ffffff
  • Ngjyra e sfondit të butonit: # 000000
  • Gjerësia e kufirit të butonit: 0px
Parametri i modulit të butonit Divi
  • Font butoni: Sans pune
Ndrysho fontin e butonit divi

ndarje

Pastaj shkoni te cilësimet e ndarjes dhe aplikoni vlera të personalizuara të marzheve dhe mbushjeve në madhësi të ndryshme të ekranit.

  • Marzhi i lartë: 3vw (zyra),
  • Kufiri i majtë: 20vw (tavolinë dhe tablet), 15vw (telefon)
  • Mbushja e sipërme: 1.2vw (desktop), 2vw (tabletë), 4vw (telefon)
  • Mbushja e poshtme: 1.2vw (tavolinë), 2vw (tabletë), 4vw (telefon)
  • Mbushja e majtë: 1.8vw (desktop), 3vw (tabletë), 6vw (telefon)
  • Mbushja e duhur: 1.8vw (tavolinë), 3vw (tabletë), 6vw (telefon)
Konfigurimi i hapësirës së butonit Divi

gjallëri

Personalizoni gjithashtu cilësimet e animacionit.

  • Stili i animacionit: Rrokullisje
  • Drejtimi i animacionit: poshtë
  • Vonesa e animacionit: 2000 ms
  • Intensiteti i animacionit: 100%
  • Perde e fillimit të animacionit: 100%
  • Lakorja e shpejtësisë së animacionit: lehtësi-marrje
  • Përsëritja e animacionit: një herë
Përshtatja e animacionit në modulin e tekstit

Shtoni seksionin # 2

Vazhdoni duke shtuar një seksion të ri të rregullt vetëm nën atë të mëparshëm.

Shtoni një seksion të ri divi

ndarje

Hapni cilësimet e seksionit dhe hiqni mbushjen e sipërme të paracaktuar.

  • Mbushja e sipërme: 0px
Konfiguroni ndarjen e ndarjes divi

Shto një rresht të ri

Struktura e kolonës

Vazhdoni të shtoni një rresht të ri duke përdorur strukturën e kolonës së mëposhtme:

Shtoni një kolonë të re ndarëse të seksioneve

sizing

Pa shtuar më shumë module, hapni parametrat e linjës dhe lëreni që linja të zërë tërë gjerësinë e enës së seksionit.

  • Gjerësia: 100%
  • Gjerësia maksimale: 100%
Seksioni i madhësisë divi

Shtoni një modul teksti në kolonë

Shto përmbajtje

Më pas, shtoni një modul teksti me a përmbajtje përshkrimi i zgjedhjes suaj.

Cilësimet e tekstit të modulit Divi

Ngjyrë e sfondit

Shtoni një ngjyrë të bardhë në sfond.

  • Ngjyra e sfondit: #ffffff
Konfigurimi i ngjyrës së shkronjave Divi

Cilësimet e tekstit

Kaloni në skedën e dizajnit të modulit dhe ndryshoni rregullimet e tekstit në përputhje me rrethanat:

  • Shkronja e tekstit: Sans Work
  • Ngjyra e tekstit: # 9b9b9b
  • Madhësia e tekstit: 1vw (desktop), 2vw (tabletë), 3vw (telefon)
  • Lartësia e vijës së tekstit: 2.6em
Konfigurimi i shkronjave të titullit Divi

ndarje

Shtoni gjithashtu vlera të personalizuara të hapësirës në madhësi të ndryshme të ekranit.

  • Marzhi i lartë: -5vw (desktop), -20vw (tablet), -27vw (telefon)
  • Marzhi i majtë: 20vw (tavolinë), 13vw (tabletë), 8vw (telefon)
  • Marzhi i duhur: 20vw (desktop), 13vw (tabletë), 8vw (telefon)
  • Mbushja e sipërme: 5vw (desktop), 7vw (tablet dhe telefon)
  • Mbushja e poshtme: 5vw (tavolinë), 7vw (tablet dhe telefon)
  • Mbushja e majtë: 3vw (desktop), 5vw (tabletë), 6vw (telefon)
  • Mbushja e duhur: 3vw (tavolinë), 5vw (tabletë), 6vw (telefon)
Konfigurimi i ndarjes së seksionit të modulit Divi

Kuti me hije

Dhe plotësoni cilësimet e modulit duke aplikuar një hije delikate të kutisë. Kjo eshte!

  • Fuqia e turbullimit të hijes së kutisë: 50px
  • Ngjyra e hijes: rgba (0,0,0,0,1)
Moduli i tekstit divi i konfigurimit të hijes

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

Punë praktike për rezultatet përfundimtare

Mendimet e fundit

Në këtë artikull, ne ju treguam se si të shtoni animacione të bllokut të tekstit CSS në titullin tuaj. Importantshtë e rëndësishme të siguroheni që titulli juaj është i dukshëm dhe të lexohet që nga fillimi, duke shtuar animacione në titullin tuaj patjetër që mund të ndihmojë! Ju gjithashtu keni qenë në gjendje të shkarkoni skedarin JSON të paraqitjes falas. Nëse keni ndonjë pyetje ose sugjerim, mos ngurroni të lini një koment në seksionin e komenteve më poshtë.

Përkthyer nga: ElegantThemes