Siirry sisältöön
Huomaa: Tämän artikkelin käännös on tarkoitettu vain tiedoksi. Käännös on luotu automaattisesti käännösohjelmiston avulla, eikä sitä ole välttämättä tarkistettu. Näin ollen tämän artikkelin englanninkielistä versiota on pidettävä hallitsevana versiona, joka sisältää uusimmat tiedot. Voit tutustua siihen täällä.

Käytä kuvan liukusäädinmoduuleja

Päivitetty viimeksi: lokakuuta 30, 2023

Saatavilla minkä tahansa seuraavan Tilauksen kanssa, paitsi jos toisin mainitaan:

Kaikki tuotteet ja HubSpot-tilaukset

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 Markkinointi > Verkkosivusto > Verkkosivuston sivut.
    • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Markkinointi > Aloitussivut.
    • Blogi: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > 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.
    add-image-and-caption-to-image-slider
    • 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 ).

go-back-to-image-slider-overview

  • 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 Markkinointi > Verkkosivusto > Verkkosivuston sivut.
    • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Markkinointi > Aloitussivut.
    • Blogi: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > 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ä.

edit-slide-settings

  • 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 Markkinointi > Verkkosivusto > Verkkosivuston sivut.
    • Laskeutumissivut: Siirry HubSpot-tililläsi kohtaan Markkinointi > Aloitussivut.
    • Blogi: Siirry HubSpot-tililläsi kohtaan Markkinointi > Verkkosivusto > 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.
    edit-slide-settings
    • 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.
    change-image-slider-arrow-icons
    • 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.
  • arrow-left-in-image-slider
    • 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.

edit-thumbnail-images-settings

  • 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.
Oliko tästä artikkelista apua?
Tätä lomaketta käytetään vain dokumentaation palautteeseen. Lue, miten saat apua HubSpotin kanssa.