Når du viser flere opfordringer til handling på din side, kan det være nyttigt at oprette en interaktiv rulleeffekt, der forener forskellige elementer. En løsning er at gøre modulerne til faste elementer, mens de bevæger sig i deres søjlebeholder. I dagens tutorial viser vi dig, hvordan du opretter et smukt design, der håndterer denne teknik. Du vil også være i stand til at downloade JSON-filen gratis!
Lad os gå.
undersøgelse
Før vi dykker ned i vejledningen, lad os endelig se på, hvordan det fungerede med forskellige skærmstørrelser.
Lad os begynde at genskabe!
Tilføj en ny sektion
Start med at tilføje et nyt regelmæssigt afsnit til den side, du arbejder på.
afstand
Åbn sektionsindstillingerne, og skift bund- og topmargener for forskellige skærmstørrelser.
- Polstring top: 7vw (desktop), 10vw (tablet), 15vw (telefon)
- Polstring i bunden: 20vw (desktop), 7vw (tablet), 10vw (telefon)
Tilføj en ny linje
Kolonne struktur
Fortsæt med at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu, skal du åbne rækkeindstillingerne og lade det optage hele sektionens bredde. det er han også meget vigtigt aktiver indstillingen 'Udlign kolonnehøjder'. Ved at gøre dette opretter du tom plads i kolonnerne, der gør det muligt for de stationære moduler at bevæge sig frit, mens du ruller på siden.
- Brug en brugerdefineret tagrendebredde: Ja
- Tagrendebredde: 1
- Udligne kolonnehøjder: Ja
- Bredde: 100%
- Maksimal bredde: 100%
Kolonne 2 Øvre polstring
Åbn derefter indstillingerne for 2-kolonnen, og tilføj nogle øverste fyldstof på skrivebordet.
- Øvre polstring: 20vw (desktop), 0vw (tablet og telefon)
Kolonne 3 Øvre polstring
Tilføj også en brugerdefineret topfyldværdi til den tredje kolonne.
- Bedste polstring: 40vw (desktop), 0vw (tablet og telefon)
Kolonne 4 Øvre polstring
Og udfyld parametre for linjen ved også at tilføje en højere udfyldningsværdi til kolonnen 4.
- Øvre polstring: 60vw (desktop), 0vw (tablet og telefon)
Føj CTA til 1-kolonnen
Tilføj indhold
Det er tid til at begynde at tilføje moduler! Det første modul, vi skal bruge i kolonne 1, er et CTA-modul (Call to Action). Indsæt indhold de votre choix.
Link
Tilføj også et link til knappen. Dette gør det muligt for knappen at blive vist i designet.
- URL til knapets link: #
Baggrundsfarve
Skift modulets baggrundsfarve bagefter.
- Baggrundsfarve: #ffffff
Tekstindstillinger
Skift til fanen Design, og skift de generelle tekstindstillinger.
- Justering af teksten: center
- Tekstfarve: mørk
Titeltekstindstillinger
Skift også tekstindstillingerne til titlen.
- Titel Titleniveau: H3
- Teksttitel: Spektral
- Farve tekst titel: # 000000
- Teksttitelstørrelse: 2vw (desktop), 4vw (tablet), 6vw (telefon)
Indstillinger for kropstekst
Med parametrene for teksten.
- Body font: Fira Sans
- Vægt på skrifttypen: Let
- Kropsfarve på tekst: # 000000
- Kropsstørrelse: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Kropshøjde: 1.8em
Knapindstillinger
Glem ikke at style din CTA-modulknap også.
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Knappen tekstfarve: #ffffff
- Baggrundsfarve på knap: #444eff
- Bredde på knapgrænsen: 0px
- Radius af knappens kant: 50vw
- Knapskrifttype: Fira Sans
- Øvre polstring: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Polstring i bunden: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Venstre polstring: 3vw (desktop), 7vw (tablet), 13vw (telefon)
- Polstring til højre: 3vw (desktop), 7vw (tablet), 13vw (telefon)
afstand
Gå derefter til afstandsindstillingerne og tilføj tilpassede indre og nederste margener.
- Top polstring: 8vw
- Bundpolstring: 8vw
Border
Tilføj også afrundede vinkler til modulet.
- Runde hjørner: 1vw (alle hjørner)
Skyggeæske
Afslut moduldesignet ved at tilføje en subtil boksskygge.
- Kassens skygge Vandret position: 10px
- Box Shadow Blur Force: 50px
- Skygge farve: rgba (0,0,0,0,08)
CSS klasse
For at den klæbrig rulleeffekt skal fungere, bliver vi nødt til at tilføje et par linjer CSS-kode i slutningen af denne vejledning. Som forberedelse tilføjer vi en CSS-klasse til CTA-modulet.
- CSS klasse: sticky-cta
Føj et billedmodul til kolonne 1
Upload billede
Lad os gå videre til den næste og sidste mod, som vi har brug for i kolonne 1, som er et billedmod. Upload et PNG-billede efter eget valg.
tilpasning
Skift derefter billedjusteringen.
- Billedjustering: Center
dimensionering
Sørg for at tvinge også den fulde bredde på modulet.
- Tving fuldbredde: Ja
afstand
Fuldfør modulindstillingerne ved at gå til afstandsindstillingerne og tilføje tilpassede afstandsværdier for forskellige skærmstørrelser.
- Øvre margen: -5vw (tablet og telefon)
- Nederste margen: -12vw (desktop), 5vw (tablet og telefon)
- Venstre polstring: 3vw (desktop), 10vw (tablet), 25vw (telefon)
- Polstring til højre: 3vw (desktop), 10vw (tablet), 25vw (telefon)
Klon de to moduler tre gange, og anbring de resterende kolonner
Når du har afsluttet begge moduler i 1-kolonnen, kan du duplikere dem tre gange og placere duplikaterne i de resterende kolonner i rækken.
Skift billeder
Sørg for at ændre billedet i hvert duplikatbilledmodul.
Skift indholdet af CTA og baggrundsfarverne på knapperne
Skift også indhold CTA med knapbaggrundsfarver.
- CTA-modul #2: #89ffb4
- CTA-modul #3: #ff89f1
- CTA-modul #4: #ffd389
Føj CSS-klasse til billedmoduler i kolonne 1, 2 og 3
For at sikre, at den klæbrige effekt også fungerer på billeder, skal vi tilføje en CSS-klasse til billedmodulerne i kolonne 1, 2 og 3.
- CSS-klasse: klistret billede
Tilføj 2-linjen
Kolonne struktur
Det eneste, der er tilbage, er at tilføje CSS-koden. For at gøre dette skal du tilføje en ny linje.
Tilføj et kodemodul med CSS-kode
Føj et kodemodul til linjen, indsæt CSS-koden nedenfor, så er du færdig!
<style>@media only screenand (min-width: 980px) {.sticky-cta {position: sticky;position: -webkit-sticky;top: 8vw !important;}.sticky-image {position: sticky;position: -webkit-sticky;top: 28vw !important;}}</style>
undersøgelse
Nu hvor alle trin er taget, lad os tage et sidste kig på, hvad der skete med forskellige skærmstørrelser.
endelige tanker
I denne artikel har vi vist dig, hvordan du holder moduler faste i deres kolonnebeholder. Brug af denne teknik kan generere fantastiske rulleeffekter, der giver dig mulighed for at fremhæve de forskellige opfordringer til handling på din side. Du kan også downloade JSON-filen gratis! Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.
