Käytä kuvan liukusäädinmoduuleja

Voit käyttää kuvien liukusäädinmoduulia useiden kuvien näyttämiseen samassa moduulissa. Voit asettaa kuvat kiertämään automaattisesti tai tukea kävijöitä vaihtamaan kuvien välillä manuaalisesti.

Diojen lisääminen ja muokkaaminen kuvaliukumoduuleissa

1. Siirry sisältöön:

   • Verkkosivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Verkkosivuston sivu.
   • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
   • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > Blogi.
2. Napsauta sisällön nimeä.
3. Napsauta sisältöeditorissa vasemman sivupalkin add Lisää-kuvaketta .
4. Laajenna Media-luokka napsauttamalla sitä, napsauta Image Slider -moduulia ja vedä se paikalleen.
5. Vie hiiren kursori vasemmassa sivupalkissa dian päälle ja napsauta edit Muokkaa-kuvaketta lisätäksesi kuvan kyseiseen diaan:
   
   • Valitse Kuva-osiossa Lataa kuva valitsemalla kuva tietokoneeltasi tai Selaa kuvia valitsemalla kuva tiedostotyökalusta. Voit luoda kuvan valitsemalla Generate with AI.
   • Kirjoita kuvateksti-kenttään kuvateksti , joka näkyy kuvan alla. Jos haluat näyttää kuvan ilman kuvatekstiä, poista oletusteksti.
   
   • Voit lisätä diaan linkin:
     • Napsauta Linkki kohteeseen -pudotusvalikkoa ja valitse linkkityyppi.
     • Määritä linkin kohde avautuvassa kentässä. Lue lisää linkkien kanssa työskentelystä HubSpotissa.
     • Jos haluat pitää sisällön auki ja saada linkin avautumaan uuteen ikkunaan, kytke Avaa linkki uudessa ikkunassa -kytkin päälle.
     • Jos haluat yksilöidä linkin määränpään hakukoneille, ettei se ole osa verkkosivustoasi, valitse Ei seuraa -valintaruutu.
   • Tallenna muutokset tähän diaan valitsemalla Käytä muutoksia .
6. Palaa moduulin yleiskatsaukseen valitsemalla sivupalkkieditorin yläosassa Image slider (Kuvan liukusäädin ).

7. Jos haluat lisätä lisää dioja, siirrä hiiren kursori eri dian päälle ja napsauta edit Muokkaa-kuvaketta .
8. Viimeistele muutokset napsauttamalla Käytä muutoksia.

Muokkaa asetuksia kuvien liukusäädinmoduuleille

1. Siirry sisältöön:

   • Verkkosivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Verkkosivuston sivu.
   • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
   • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > Blogi.
2. Napsauta sisällön nimeä.
3. Napsauta sisältöeditorissa Image slider -moduulia.
4. Muokkaa moduulin asetuksia sivupalkkieditorissa valitsemalla Asetukset .
5. Laajenna Dio-osio napsauttamalla sitä, jotta voit muokata dia-asetuksia:
   • Kirjoita Slides per page (Dioja per sivu ) -kenttään niiden diojen määrä , jotka näkyvät kerrallaan kuvasliderissäsi. Voit näyttää enintään viisi diaa kerrallaan. Kun valitaan useita dioja kerrallaan, kuvatekstejä ja pikkukuvia ei näytetä.
   • Valitse Kuvakoko-kentässä kuvasuhdevaihtoehto. Oletusarvoisesti kuvat näkyvät ladatun kuvasuhteensa mukaisesti. Jos haluat vakioida yhden kuvasuhteen kaikissa kuvissa, valitse Pakota kuvasuhde. Tämä saattaa aiheuttaa joidenkin kuvien näkymisen vääristyneenä.
   • Jos haluat lisätä tai poistaa kuvatekstejä dioihin, valitse Näytä kuvatekstit -valintaruutu. Oletusarvoisesti Näytä kuvatekstit -valintaruutu on valittuna.
   • Valitse kuvatekstien sijainti avattavasta valikosta.

6. Laajenna Movement (Liike ) -osio napsauttamalla sitä, jotta voit muokata dian siirtymävaihtoehtoja:
   • Voit määrittää, miten diat siirtyvät, valitsemalla siirtymävaihtoehdon (esim. Fade).
   • Jos haluat, että diat toistuvat, kun viimeinen dia on saavutettu, valitse Loop slides -valintaruutu.
   • Jos haluat, että diat kiertävät automaattisesti, valitse Autoplay (Automaattinen toisto ) -valintaruutu. Jos sinulla on vähemmän dioja kuin Slides per page (Dioja per sivu ) -asetuksessa, jaksottamista ei voi tapahtua.
7. Laajenna Navigointi-osio napsauttamalla sitä, jotta voit muokata navigointiasetuksia:
   • Jos haluat näyttää nuolia, joiden avulla kävijät voivat siirtyä manuaalisesti diojen välillä, valitse Näytä navigointinuolet -valintaruutu.
   • Jos haluat näyttää kuvien pikkukuvat navigoinnin alla, valitse Näytä pikkukuvat -valintaruutu.
   • Jos haluat näyttää kuvien alla pisteitä, jotka näyttävät diojen kokonaismäärän ja antavat kävijöiden valita tietyn kuvan, valitse Näytä piste-navigointi.
8. Kun olet valmis, valitse Käytä muutoksia.

Muokkaa tyylejä kuvan liukusäädinmoduuleihin

Voit muokata kuvaliukumoduulien tyylejä, mukaan lukien diojen, navigoinnin ja liukusäätimen tyyliä.

1. Navigoi sisältöön:

   • Verkkosivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Verkkosivuston sivu.
   • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Sisältö > Aloitussivut.
   • Blogi: Siirry HubSpot-tililläsi kohtaan Sisältö > Blogi.
2. Napsauta sisällön nimeä.
3. Napsauta sisältöeditorissa kuvien liukumoduulia.
4. Napsauta sivupalkkieditorissa Tyylit-välilehteä.
5. Jos haluat jatkaa kuvaliukumoduulin tyylien muokkaamista, valitse Slides, Navigation tai Slider.

Muokkaa diojen tyylejä

Voit muokata tyylejä, jotka koskevat sitä, miten kuvat näytetään dioissa:

1. Napsauta Dioja.
2. Laajenna Kuvat-osio napsauttamalla sitä.
3. Kirjoita pikseliarvot Corner radius -kenttään. Mitä suurempi arvo on, sitä pyöristetyimmiltä kulmat näyttävät.
4. Kun olet valmis, napsauta Käytä muutoksia.

Voit muokata tyylejä sille, miten kuvatekstit näytetään dioissa:

1. Napsauta kuvatekstit.
2. Laajenna Tausta-osio napsauttamalla sitä.
   • Jos haluat lisätä marginaalit kuvatekstien ylä- tai alapuolelle, kirjoita pikselin arvot Margin above (Marginaali yläpuolella ) ja Margin below (Marginaali alapuolella ) -kenttiin.
   • Jos haluat lisätä pehmusteita kuvateksteihin, syötä pikseliarvo Pehmuste-kenttään . Jos haluat lisätä erilliset arvot kummallekin puolelle, napsauta Muokkaa erikseen ja syötä sitten pikselin arvot kenttiin.
   • Jos haluat lisätä taustavärin kuvateksteihin, kirjoita heksadesimaaliarvo Color (Väri ) -osion ensimmäiseen kenttään tai napsauta värinvalitsinta ja valitse väri. Mukautettuja värejä voi lisätä Lisäasetukset-välilehdeltä .
   • Voit määrittää taustavärin läpinäkyvyyden syöttämällä prosenttiarvon Väri-osan toiseen kenttään. Läpinäkyvyys 100 % on läpinäkymätön, kun taas läpinäkyvyys 0 % ei näy.
3. Laajenna Teksti-osio napsauttamalla sitä.
   • Jos haluat vaihtaa kirjasintyypin, napsauta Select font (Valitse fontti ) -pudotusvalikkoa ja valitse fontti.
   • Jos haluat muuttaa fonttikokoa, napsauta Size (Koko ) -pudotusvalikkoa ja valitse fonttikoko.
   • Jos haluat muuttaa fontin väriä, napsauta värivalitsinta ja valitse väri. Mukautettuja värejä voidaan lisätä Lisäasetukset-välilehdeltä .
   • Jos haluat muuttaa fontin painoa, napsauta bold fontin painon kuvaketta lihavoidaksesi, italicIcon kursivoidaksesi tai underlineIcon alleviivataksesi tekstiä.
4. Kun olet valmis, napsauta Käytä muutoksia.

Navigoinnin tyylien muokkaaminen

Voit muokata tyylejä navigointia varten, mukaan lukien liukusäätimen nuolet, pisteet ja automaattinen toisto -painike sekä pikkukuvien navigointi. Käytettävissä olevat tyylivaihtoehdot riippuvat kuvien liukumäkimoduulin navigointia koskevista asetuksista.

Liukusäätimen nuolet

1. Napsauta Navigation (Navigointi) -painiketta.
2. Laajenna Slider arrows -osio napsauttamalla sitä.
3. Kirjoita hexa-arvo Taustaväri-osioon. Voit myös napsauttaa värivalitsinta ja valita värin. Mukautettuja värejä voi lisätä Lisäasetukset-välilehdeltä.
4. Jos haluat määrittää taustavärin läpinäkyvyyden, kirjoita prosentuaalinen arvo Taustaväri-osan toiseen kenttään. Esimerkiksi läpinäkyvyys 100 % on läpinäkymätön, kun taas läpinäkyvyys 0 % ei näy.
5. Jos haluat korvata vasemman ja oikean nuolen kuvakkeet, valitse Vasen kuvake- ja Oikea kuv ake -kenttien yläpuolella oleva Korvaa. Valitse oikeassa paneelissa kuvake.
6. Jos haluat määrittää vasemman ja oikean kuvakkeen värin, kirjoita heksadesimaaliarvo Kuvakkeen väri -osion ensimmäiseen kenttään. Voit myös napsauttaa värivalitsinta ja valita värin. Mukautettuja värejä voi lisätä Lisäasetukset-välilehdeltä.
7. Jos haluat määrittää kuvakkeen taustavärin läpinäkyvyyden, syötä prosenttiarvo Kuvakkeen väri -osion toiseen kenttään. Esimerkiksi 100 %:n läpinäkyvyys on läpinäkymätön, kun taas 0 %:n läpinäkyvyys ei näy.
8. Kun olet valmis, napsauta Käytä muutoksia.

Pisteet ja automaattinen toisto -painike

1. Laajenna Pisteet ja automaattinen toisto -painike -osio napsauttamalla sitä.
2. Kirjoita väriosion ensimmäiseen kenttään heksadesimaaliarvo tai napsauta värinvalitsinta ja valitse väri. Mukautettuja värejä voi lisätä Lisäasetukset-välilehdeltä.
3. Kun olet valmis, napsauta Käytä muutoksia.

Pienoiskuvien navigointi

1. Laajenna Pienoiskuvien navigointi -osio napsauttamalla sitä.
2. Jos haluat muokata taustaväriä, kirjoita heksadesimaaliarvo Nuoli taustaväri -osion ensimmäiseen kenttään tai napsauta värivalitsinta ja valitse väri. Mukautettuja värejä voi lisätä Lisäasetukset-välilehdeltä .
3. Jos haluat muokata taustavärin läpinäkyvyyttä, syötä prosenttiarvo Nuoli taustaväri -osion toiseen kenttään. Läpinäkyvyys 100 % on läpinäkymätön, kun taas läpinäkyvyys 0 % ei näy.
4. Jos haluat korvata vasemman ja oikean nuolen kuvakkeet, napsauta Korvaa vasemman nuolen kuvakkeen ja oikean nuolen kuvakkeen kenttien yläpuolella olevaa Korvaa . Valitse oikeassa paneelissa kuvake.

5. Jos haluat muokata vasemman ja oikean nuolen kuvakkeiden väriä, kirjoita heksadesimaaliarvo Nuolikuvakkeen täyttöväri -osion ensimmäiseen kenttään. Voit myös napsauttaa värivalitsinta ja valita värin. Mukautettuja värejä voi lisätä Lisäasetukset-välilehdeltä .
6. Jos haluat määrittää nuolen läpinäkyvyyden, syötä prosenttiarvo Kuvakkeen väri -osion toiseen kenttään. Esimerkiksi 100 %:n läpinäkyvyys on läpinäkymätön, kun taas 0 %:n läpinäkyvyys ei näy.
7. Voit muokata pikkukuvien suhdetta, leveyttä ja pyöristettyjä kulmia:
   • Laajenna Pikkukuvakuvat-osio napsauttamalla sitä.
   • Jos haluat määrittää kaikkiin pikkukuviin käytettävän kuvasuhteen, napsauta kuvasuhteen pudotusvalikkoa ja valitse kuvasuhde.
   • Jos haluat määrittää kaikille pikkukuville käytettävän leveyden, kirjoita pikselin arvo Leveys-kenttään .
   • Voit määrittää, kuinka pyöristetyt pikkukuvien kulmat näkyvät, syöttämällä pikseliarvon Radius-kenttään . Mitä suurempi arvo on, sitä pyöristetyimmiltä kulmat näyttävät.
8. Kun olet valmis, napsauta Käytä muutoksia.

Muokkaa liukusäätimen tyylejä

1. Napsauta Slider (Liukusäädin).
2. Laajenna Spacing-osio napsauttamalla sitä.
3. Voit lisätä marginaalit liukusäätimen ylä- ja alapuolelle syöttämällä pikselin arvot Margin above (Marginaali yläpuolella ) ja Margin below (Marginaali alapuolella ) -kenttiin.
4. Jos haluat lisätä liukusäätimelle pehmusteen, syötä pikseliarvo Padding-kenttään . Jos haluat lisätä erilliset arvot kummallekin puolelle, napsauta Muokkaa erikseen ja syötä sitten pikselin arvot kenttiin.
5. Kun olet valmis, valitse Käytä muutoksia.