Kako oblikovati lepljivi odsek junaka na pomiku z Divi

Rifat Divi Tutorials Mar 2, 2022

Odseki junakov se obravnavajo kot projekcijski del spletne strani. Iz tega razloga lastniki spletnih mest uporabljajo ta razdelek kot orožje za pritegnitev pozornosti obiskovalcev. Če na svojem spletnem mestu iščete interaktivno lepljivo animacijo razdelka junakov, vam Divi nudi hrbet. Zahvaljujoč možnostim Sticky Divi , ker je z njim zelo enostavno narediti učinek pomikanja po razdelku ustvarjalnega junaka.

Danes bomo videli, kako lahko uporabimo vizualno prijeten učinek drsenja v razdelku junakov našega spletnega mesta WordPress. V prvem delu vadnice si bomo ogledali celotno zasnovo, v naslednjem delu pa bomo dodali učinke. Torej začnimo brez odlašanja.

Design Outline

Preden nadaljujemo, si oglejmo, kako bo videti naš končni dizajn.

Ustvarite okvir za oblikovanje

Dodatek novega razdelka

Barva ozadja

Na začetku se bomo bolj osredotočili na oblikovanje dizajna. Kasneje v drugem delu bomo uporabili lepljive učinke. Zdaj ustvarite novo stran in ji dodajte nov razdelek. Odprite nastavitve tega razdelka in dodajte barvo ozadja.

Ustvarite neverjetna spletna mesta

Z najboljšim brezplačnim graditeljem strani Elementor

Začni zdaj
  • Barva ozadja: rgba(53,44,43,0.17)

Razmik

Pojdimo na zavihek načrtovanja tega razdelka in spremenimo vrednosti, kot sledi.

  • Zgornje oblazinjenje: 13vh
  • Spodnje odmikanje 0px

Vrstica 1 Dodajanje

Struktura stolpcev

Zdaj dodajte novo vrstico z uporabo naslednje strukture stolpcev.

Dimenzioniranje

Zdaj dodajte nastavitve vrstice in se premaknite na zavihek načrtovanja, da spremenite nastavitev velikosti, kot je spodaj.

  • Uporabite širino žleba po meri: Da
  • Širina žleba: 2
  • Izenačite višino stolpcev: 2
  • Širina: namizje - 800 x 025, zavihek in telefon - 900 x 025
  • Največja širina: 2580 slikovnih pik

Razmik

Zdaj bomo odstranili vso oblazinjenje od zgoraj in spodaj. Torej je zgornji in spodnji odmik 0px.

Nastavitev za stolpec 1 (vrstica 1)

Razmik

V tem trenutku odprite nastavitev za stolpec 1 in spremenite nastavitve razmika.

  • Zgornje oblazinjenje - namizje 25vh, Tab & Telefon 10vh
  • Spodnje oblazinjenje - namizje 25vh, Tab & Telefon 10vh
  • 5% Oblazinjenje na levi in ​​desni strani.

Nastavitev za stolpec 2 (vrstica 1)

Slika ozadja

Nato svojemu izboru iz nastavitev stolpca 2 dodajte sliko ozadja.

  • Velikost slike ozadja: naslovnica
  • Položaj slike ozadja: Center

Vidnost

Da bi se prepričali, da bo to delovalo na manjših zaslonih, se bomo premaknili na zavihek Napredno v drugem stolpcu in onemogočili vidnost za tablične računalnike in telefone.

Dodajanje besedilnega modula v stolpec 1 (vrstica 1)

Vsebina glave

Zdaj bomo dodali module. Začnimo z besedilnim modulom v stolpcu 1. Dodajte poljubno H1 vsebino, ki vam je všeč!

Nastavitve besedila H1

Zdaj spremenite nastavitve besedila H1 na zavihku načrtovanja modulov.

  • Pisava naslova: Crimson Text
  • Velikost besedila naslova: namizje 6vh, tablica 50px, telefon 40px
  • Višina naslovne vrstice: 1,2 em

Modul delilnika dodajanje v stolpec 1 (vrstica 1)

Vidnost

Čas je, da našemu prvemu stolpcu dodamo delilni modul. Omogočite tudi možnost razdelka za prikaz.

vrstica

Zdaj preklopite na zavihek načrtovanja modulov in spremenite nastavitve linije.

  • Barva črte: #35241f

Dimenzioniranje

Spremenite vrednosti v nastavitvah velikosti.

  • Teža delilnika: 5px
  • Širina: 21%
  • Višina: 5px

Opis Vsebina

Zdaj bomo dodali zadnji modul, ki ga potrebujemo, v stolpec 1 in to je še en besedilni modul. Tam dodajte nekaj opisa.

Nastavitve besedila

Spremenite nastavitve besedila modulov, kot sledi.

  • Pisava besedila: Karla
  • Velikost besedila: 18px
  • Višina vrstice besedila: 2,1 em

Vrstica 2 Dodajanje

Struktura stolpcev

Da bi ta vpliv deloval, je potrebno preprosto dodati povsem novo vrstico pod primarno, pod isti razdelek. Ta vrstica bo potrebovala barvo ozadja ter zadostno višino in širino, da se lahko prva vrstica prilega pod njo. Uporabljamo naslednjo strukturo stolpcev.

Barva ozadja

Zdaj dodajte barvo ozadja v vrstico.

  • Barva ozadja: #35241f

Dimenzioniranje

Spremenite vrednosti v nastavitvah velikosti na zavihku načrtovanje.

  • Širina: 100%
  • Največja širina: 3000 slikovnih pik

Razmik

Za nastavitev razmika spremenite vrednosti podobno.

  • Zgornje oblazinjenje: namizje - 30vh, Tab & Telefon - 0vh.
  • Spodnje oblazinjenje: 30vh
  • Levo oblazinjenje: 10%
  • Desno oblazinjenje: 10%

Slikovni modul v stolpcu 1 (vrstica 2)

Naložite sliko (samo za mobilne naprave in zavihke)

Zdaj bomo prvemu stolpcu dodali slikovni modul. Ali se spomnite, da smo onemogočili vidnost slike za tablične računalnike in telefon ? Ta slikovni modul bo nadomestil sliko, ki je bila uporabljena v prvi vrstici pri manjših velikostih zaslona. Uporabite sliko samo za tablice in telefon!

Premaknite se na pogled tablic in mobilnih naprav ter dodajte sliko.

Razmik

Pomaknite se na zavihek načrtovanja modulov in spremenite spodnji rob, kot sledi.

  • Spodnji rob: namizje 0px, tablica & Telefon 50px

Modul delilnika dodajanje v stolpec 1 (vrstica 2)

Vidnost

Zdaj pod sliko dodajte nov modul delilnika in omogočite možnost »Pokaži delilnik«.

vrstica

Preklopite na zavihek oblikovanja modula in spremenite barvo črte.

  • Barva vrstice: #ffffff

Dimenzioniranje

Spremenite tudi nastavitev velikosti v razdelku za načrtovanje.

  • Teža delilnika: 5px
  • Višina: 5px

Dodajanje besedilnega modula v stolpec 1 (vrstica 2)

Vsebina glave

Dodajte nov besedilni modul z nekaj vsebine H2.

Nastavitve besedila glave

Spremenite nastavitve besedila H2, kot sledi

  • Pisava naslova 2: škrlatno besedilo
  • Barva besedila naslova 2: #ffffff
  • Velikost besedila naslova 2: namizje 6vh, tablica 50px, telefon 40px.

Dodajanje besedilnega modula v stolpec 2 (vrstica 2)

Opis Vsebina

Edini modul, ki ga bomo dodali v stolpec 2, je besedilni modul, kjer bo nekaj opisne vsebine.

Nastavitve besedila

Spremenite nastavitev besedilnih modulov, kot je prikazano spodaj.

  • Pisava besedila: Karla
  • Teža pisave besedila: navadna
  • Velikost besedila: namizje 30px, tablica & Telefon 18px
  • Višina vrstice besedila: 2,2 em
  • Barva besedila: Svetla

Uporabite lepljive učinke

Spremenite vrednosti indeksa vrstice Z

1. vrstica

Zdaj, ko smo usmerili osnovo našega dizajna, se bomo zdaj osredotočili na nadaljnji korak, da ustvarimo učinek naslovnice junaka. Odprite nastavitve prve vrstice in spremenite indeks Z v naprednem zavihku.

  • Z indeks: 1

2. vrstica

Spremenite vrednost indeksa Z druge vrstice. Vrednost mora biti višja od prve vrstice.

  • Z indeks: 2

Učinek lepljenja v 1. vrstici

Zdaj še enkrat odprite nastavitev prve vrstice in uporabite lepljivi učinek z naprednega zavihka. Njegova obvezna spodnja meja lepljivosti je nastavljena na razdelek.

Lepljiva nastavitev za stolpec 1 (barva ozadja)

Zdaj, ko je bila celotna vrstica lepljiva, bomo na podrejene elemente vrstice uporabili nekaj lepljivega učinka. Odprite nastavitve stolpca 1 in uporabite naslednjo lepljivo barvo ozadja.

  • Barva lepljivega ozadja: #edeaea

Lepljiva nastavitev za stolpec 1 (Sticky Transform Skew)

Zdaj se pomaknite na zavihek načrtovanja in uporabite naslednjo vrednost lepljive poševnosti.

  • Nagib na lepljivem dnu: -4 stopinje

Lepljiva nastavitev za stolpec 2 (Sticky Transform Skew)

Uporabite isto vrednost lepljive poševnosti iz nastavitev pretvorbe za stolpec 2.

  • Nagib na lepljivem dnu: -4 stopinje

Lepljive nastavitve za besedilni modul x2 (Sticky Transform Skew)

Smo pri zaključnem delu našega oblikovanja. Zasnovo in učinek bomo dokončali tako, da spremenimo spodnjo vrednost nagiba za oba besedilna modula v stolpcu 1 v lepljivem stanju. To bo izravnalo poševno vrednost lepljivega stolpca za krmarjenje.

  • Nagib na lepljivem dnu: 4 stopinje

Končni rezultat

Ker smo šli skozi vse korake in naredili, kar smo zahtevali, bo naš končni izdelek videti takole.

Zadnje besede

Divi ima veliko možnosti, kako narediti spletno stran lepšo od drugih. Naša današnja vadnica je odličen način za prikaz kratkih opisov, storitev in še veliko več! Če imate kakršna koli vprašanja ali predloge, pustite komentar v razdelku za komentarje. Tudi če se vam je ta vadnica zdela v pomoč, bo delitev odlična!