När du visar flera uppmaningar på din sida kan det vara bra att skapa en interaktiv rullningseffekt som förenar olika element. En lösning är att förvandla modulerna till fasta element medan de flyttas i sin kolonnbehållare. I dagens handledning visar vi dig hur du skapar en vacker design som hanterar denna teknik. Du kommer också att kunna ladda ner JSON-filen gratis!
Låt oss gå.
undersökningen
Innan vi dyker in i handledningen, låt oss ta en sista titt på hur det ser ut med olika skärmstorlekar.
Låt oss börja återskapa!
Lägg till en ny sektion
Börja med att lägga till en ny vanlig sektion på sidan du arbetar med.
avstånd
Öppna sektionsinställningar och ändra nedre och övre marginaler för olika skärmstorlekar.
- Toppstoppning: 7vw (dator), 10vw (surfplatta), 15vw (telefon)
- Klädsel längst ner: 20vw (skrivbord), 7vw (surfplatta), 10vw (telefon)
Lägg till en ny rad
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna linjeinställningarna och låt den ta upp hela sektionens bredd. han är också mycket viktigt aktivera alternativet 'Utjämna kolumnhöjder'. Om du gör detta skapas ett tomt utrymme i kolumnerna som gör att fasta moduler kan röra sig fritt medan du rullar på sidan.
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
- Utjämna kolumnhöjder: Ja
- Bredd: 100%
- Maximal bredd: 100%
Kolumn 2 Toppstoppning
Öppna sedan inställningarna för kolumn 2 och lägg till lite toppstoppning på skrivbordet.
- Övre stoppning: 20vw (skrivbord), 0vw (surfplatta och telefon)
Kolumn 3 Toppstoppning
Lägg också till ett anpassat topputfyllnadsvärde i den tredje kolumnen.
- Bästa stoppning: 40vw (dator), 0vw (surfplatta och telefon)
Kolumn 4 Toppstoppning
Och slutför radparametrarna genom att även lägga till topputfyllnadsvärdet i kolumn 4.
- Övre stoppning: 60vw (skrivbord), 0vw (surfplatta och telefon)
Lägg till CTA i kolumn 1
Lägg till innehåll
Det är dags att börja lägga till moduler! Den första modulen vi behöver i kolumn 1 är en CTA-modul (Call to Action). Föra in innehåll som du väljer.
Lien
Lägg även till en länk till knappen. Detta gör att knappen visas i designen.
- URL till knappens länk: #
Bakgrundsfärg
Ändra bakgrundsfärgen på modulen efteråt.
- Bakgrundsfärg: #ffffff
Textinställningar
Växla till fliken Design och ändra de allmänna textinställningarna.
- Justering av texten: centrum
- Textfärg: mörk
Titeltextinställningar
Ändra också textinställningarna för titeln.
- Titel Titelnivå: H3
- Texttitel: Spectral
- Färgtexttitel: # 000000
- Texttitelstorlek: 2vw (skrivbord), 4vw (surfplatta), 6vw (telefon)
Inställningar för kroppstext
Med inställningar för brödtext.
- Kroppstypsnitt: Fira Sans
- Teckensnittets vikt: Lätt
- Kroppsfärgad text: # 000000
- Kroppsstorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Kroppshöjd: 1.8em
Knappinställningar
Glöm inte att styla din CTA-moduls knapp också.
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Knapptextfärg: #ffffff
- Knappens bakgrundsfärg: #444eff
- Bredden på knappgränsen: 0px
- Radius för knappens kant: 50vw
- Knapptypsnitt: Fira Sans
- Övre stoppning: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Klädsel längst ner: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
- Vänster stoppning: 3vw (skrivbord), 7vw (surfplatta), 13vw (telefon)
- Höger stoppning: 3vw (dator), 7vw (surfplatta), 13vw (telefon)
avstånd
Gå sedan till avståndsinställningar och lägg till anpassad utfyllnad och bottenmarginaler.
- Topp stoppning: 8vw
- Botten stoppning: 8vw
gräns
Lägg även till rundade hörn till modulen.
- Rundade hörn: 1vw (alla hörn)
Skugga låda
Avsluta moduldesignen genom att lägga till en subtil boxskugga.
- Boxens skugga Horisontell position: 10px
- Box Shadow Blur Force: 50px
- Skuggfärg: rgba (0,0,0,0,08)
CSS klass
Nu, för att den klibbiga rullningseffekten ska fungera, kommer vi att behöva lägga till några rader med CSS-kod i slutet av denna handledning. Som förberedelse kommer vi att lägga till en CSS-klass till CTA-modulen.
- CSS-klass: sticky-cta
Lägg till en bildmodul i kolumn 1
Ladda upp bild
Låt oss gå vidare till nästa och sista modul vi behöver i kolumn 1, som är en bildmodul. Ladda upp en valfri PNG-bild.
uppriktning
Ändra justeringen av bilden nästa.
- Bildjustering: Center
dimensionering
Se till att tvinga full bredd på modulen också.
- Full bredd Styrka: Ja
avstånd
Slutför modulinställningarna genom att komma åt avståndsinställningar och lägga till anpassade avståndsvärden för olika skärmstorlekar.
- Toppmarginal: -5vw (surfplatta och telefon)
- Nedre marginal: -12vw (dator), 5vw (surfplatta och telefon)
- Vänster stoppning: 3vw (skrivbord), 10vw (surfplatta), 25vw (telefon)
- Höger stoppning: 3vw (dator), 10vw (surfplatta), 25vw (telefon)
Klona de två modulerna tre gånger och placera de återstående kolumnerna
När du har slutfört båda modulerna i kolumn 1 kan du duplicera dem tre gånger och placera duplikaten i de återstående kolumnerna på raden.
Ändra bilder
Se till att ändra bilden i varje duplicerad bildmodul.
Ändra CTA-innehåll och knappbakgrundsfärger
Ändra också innehåll CTA med knapp bakgrundsfärger.
- CTA-modul #2: #89ffb4
- CTA-modul #3: #ff89f1
- CTA-modul #4: #ffd389
Lägg till CSS-klass till bildmoduler i kolumn 1, 2 och 3
Nu, för att se till att den klibbiga effekten också fungerar på bilder, måste vi lägga till en CSS-klass till bildmodulerna i kolumn 1, 2 och 3.
- CSS-klass: sticky-image
Lägg till 2-raden
Kolumnstruktur
Allt som återstår är att lägga till CSS-koden. För att göra detta, lägg till en ny rad.
Lägg till kodmodul med CSS-kod
Lägg till en kodmodul på raden, infoga CSS-koden nedan och du är klar!
<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ökningen
Nu när alla steg har tagits, låt oss ta en sista titt på vad som hände med olika skärmstorlekar.
Avslutande tankar
I den här artikeln visade vi hur du håller moduler fixerade i deras kolumnbehållare. Att använda den här tekniken kan generera fantastiska rullningseffekter så att du kan visa upp de olika uppmaningarna på din sida. Du kunde också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarsfältet nedan.
