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.

Lisää ja muokkaa dioja kuvien liukumäkimoduuleissa

• 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.
• Vie hiiren kursori sisällön päälle ja valitse sitten Muokkaa.
• Napsauta sisältöeditorissa vasemmassa sivupalkissa olevaa add Add -kuvaketta.
• Laajenna Media-luokka napsauttamalla sitä, napsauta Image Slider -moduulia ja vedä se paikalleen.
• 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.
  • 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 napsauttamalla sitä.
    • 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 napsauttamalla Käytä muutoksia .
• Palaa moduulin yleiskatsaukseen valitsemalla sivupalkkieditorin yläosassa Image slider (Kuvan liukusäädin ).

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

Muokkaa asetuksia kuvan liukusäädinmoduuleille

• 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.
• Vie hiiren kursori sisällön päälle ja valitse sitten Muokkaa.
• Napsauta sisältöeditorissa kuvien liukumoduulia.
• Muokkaa moduulin asetuksia sivupalkin editorissa valitsemalla Asetukset .
• Laajenna Dio-osio napsauttamalla sitä muokataksesi dia-asetuksia:
  • Kirjoita Slides per page (Dioja per sivu) -kenttään niiden diojen määrä , jotka näkyvät kerrallaan kuvien liukusäätimessä. Voit näyttää enintään viisi diaa kerrallaan. Kun valitaan useita dioja kerrallaan, kuvatekstejä ja pikkukuvia ei näytetä.
  • Valitse Kuvan koko -osiossa kuvasuhdevaihtoehto. Oletusarvoisesti kuvat näkyvät käyttäen omaa kuvasuhdettaan. Jos haluat vakioida yhden kuvasuhteen kaikissa kuvissa, valitse Pakota kuvasuhde. Tämä saattaa aiheuttaa joidenkin kuvien näkymisen vääristyneenä.

• Laajenna Liike-osiota napsauttamalla sitä, jotta voit muokata dian siirtymävaihtoehtoja:
  • 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, kiertoa ei voi tapahtua.
• Laajenna Navigointi-osiota napsauttamalla sitä, jotta voit muokata navigointivaihtoehtoja:
  • 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.
• Viimeistele muutokset valitsemalla Käytä muutoksia.

Muokkaa kuvagallerian moduulien tyylejä

• 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.
• Vie hiiren kursori sisällön päälle ja valitse sitten Muokkaa.
• Napsauta sisältöeditorissa kuvien liukumoduulia.
• Napsauta sivupalkkieditorissa Tyylit-välilehteä.
• Voit määrittää, miten pyöristetyt kuvien kulmat näkyvät, valitsemalla Dioja ja laajentamalla sitten Kuvat-osiota . Kirjoita pikseliarvot Kulman säde -kenttään. Mitä suurempi arvo on, sitä pyöristetyimmiltä kulmat näyttävät.
  • Jos haluat lisätä marginaalit kuvatekstien ylä- tai alapuolelle, laajenna Tausta-osio napsauttamalla sitä ja syötä sitten pikseliarvot Marginaali ylä- ja 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.
  
  • Voit muokata kuvatekstien fonttia laajentamalla Teksti-osiota napsauttamalla, napsauttamalla sitten Valitse fontti -pudotusvalikkoa ja valitsemalla fontin.
  • 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ä .
  • Voit muuttaa fontin painoa napsauttamalla bold fontin painon kuvaketta lihavoidun, kursivoidun tai alleviivatun tekstin kohdalla.Voit muokata kuvatekstien ulkoasua napsauttamalla Dioja ja napsauttamalla sitten Kuvatekstit:
• Voit muokata liukusäätimen nuolien ulkoasua:
  • Napsauta Navigointi.
  • Laajenna Slider arrows -osio napsauttamalla sitä.
  • Jos haluat määrittää vasemman ja oikean kuvakkeen taustavärin, kirjoita hexa-arvo 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ä .
  • Voit määrittää taustavärin läpinäkyvyyden syöttämällä prosenttiarvon Taustaväri-osan toiseen kenttään. Läpinäkyvyys 100 % on läpinäkymätön, kun taas läpinäkyvyys 0 % ei näy.
  • Voit korvata vasemman ja oikean nuolen kuvakkeet valitsemalla Vasen kuvake- ja Oikea kuv ake -kenttien yläpuolella olevan Korvaa-kohdan . Valitse oikeassa paneelissa kuvake.
  
  • Jos haluat määrittää vasemman ja oikean kuvakkeen värin, kirjoita heksadesimaaliarvo Kuvakkeen väri -osion ensimmäiseen kenttään tai napsauta värivalitsinta ja valitse väri. Mukautettuja värejä voi lisätä Lisäasetukset-välilehdeltä .
  • Jos haluat määrittää taustavärin läpinäkyvyyden, syötä prosenttiarvo kuvakkeen väriosion toiseen kenttään. Läpinäkyvyys 100 % on läpinäkymätön, kun taas läpinäkyvyys 0 % ei näy.
• Voit muuttaa kuvien alla olevien pisteiden ja automaattisen toiston painikkeen ulkonäköä:
  • Napsauta Navigointi.
  • Laajenna Pisteet ja automaattinen toisto -painike -osio napsauttamalla sitä.
  • 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ä .
• Voit muuttaa pikkukuvien navigoinnin ulkoasua:
  • Napsauta Navigointi.
  • Laajenna pikkukuvien navigointiosio napsauttamalla sitä.

• • Jos haluat määrittää vasemman ja oikean nuolen kuvakkeiden taustavärin, kirjoita kuusiokirjainarvo Nuolien 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ä .
  • Voit määrittää taustavärin läpinäkyvyyden syöttämällä prosenttiarvon 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.
  • Jos haluat korvata vasemman ja oikean nuolen kuvakkeet, napsauta Vaihda vasemman nuolen kuvakkeen ja oikean nuolen kuvakkeen yläpuolella olevia kenttiä. Valitse oikeassa paneelissa kuvake.
• 
  • Voit määrittää vasemman ja oikean nuolen kuvakkeiden värin syöttämällä heksanarvon Nuolikuvakkeen täyttöväri -osion ensimmäiseen kenttään tai napsauttamalla värivalitsinta ja valitsemalla värin. Mukautettuja värejä voi lisätä Lisäasetukset-välilehdeltä .
  • Voit määrittää nuolen läpinäkyvyyden syöttämällä prosenttiarvon kuvakkeen väri -osion toiseen kenttään. Läpinäkyvyys 100 % on läpinäkymätön, kun taas läpinäkyvyys 0 % ei näy.
  • Laajenna Pienoiskuvat-osio napsauttamalla sitä.
  • Jos haluat määrittää kaikkiin pikkukuviin käytettävän kuvasuhteen, napsauta Kuvasuhde-pudotusvalikkoa ja valitse kuvasuhde.
  • Jos haluat määrittää kaikille pikkukuville käytettävän leveyden, kirjoita pikselin arvo Leveys-kenttään .
  • Jos haluat määrittää, kuinka pyöristetyt pikkukuvien kulmat näkyvät, syötä pikseliarvo Radius-kenttään . Mitä suurempi arvo on, sitä pyöreämmiltä kulmat näyttävät.

• Voit muokata liukusäätimen väliä:
  • Napsauta Slider.
  • Laajenna Spacing-osio napsauttamalla sitä.
  • 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.
  • 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.