EN
Haetaan ...

Kuvat-osio

Käytä Kuvaluettelo-osiota, kun haluat näyttää joukon kuvia ja asiaankuuluvaa tekstiä.

Tämän osion avulla voit helposti linkittää verkkosivuston eri sivuja tai lisätä linkkejä, joihin haluat lisätä kuvan ja kuvauksen jokaiselle linkille.

Tässä artikkelissa:

  1. Mikä on Kuvat-osio?
  2. Kuvien lisääminen -osio
  3. Lisää ja muokkaa luettelokohteita
  4. Listakohteiden järjestys
  5. Luettelon kohteiden poistaminen
  6. Hallinnoi elementtejä
  7. Osion asettelun muuttaminen
  8. Tyylivaihtoehdot
  9. Karusellityyli
  10. Elävä esimerkki

Kuvalista

Kuvaluettelo on kokoelma kuvia, joihin voit lisätä kuvauksen kuvalle ja lisätä linkin tai painikkeen, joka yhdistää sen mihin tahansa muuhun verkkosivuston sivuun tai mihin tahansa muuhun linkkiin.

Lisää kuvia -osio

  • Sivulle voidaan lisätä osio. Voit joko lisätä osion jo olemassa olevalle sivulle tai luo uusi sivu verkkosivustosi sisällä.
  • Sivullasi, Klikkaa sininen + kuvake lisätä a Uusi jakso sivullesi.

  • Näet nyt osion luokat vasemmalla puolella.
  • Valitse Sisältö (1) kategoria ja napsauta kuvat välilehti (2), josta voit valita erilaisia ​​asetteluja että Kuvalista (3).

  • Valitse mikä tahansa osion asettelu ja lisää se sivullesi napsauttamalla sitä.

Huomautuksia

  1. Voit hallita osan leveyttä kohdasta osion asetukset ja sisällön leveys alkaen sisällön tyyliin.
  2. Ihanteellinen kuvan koko, joka sinun on ladattava tähän osioon, riippuu sarakkeiden määrästä. Tietää enemmän.
  3. Pidä otsikot, tekstitykset ja kuvaukset lyhyinä ja selkeinä.
  4. Napsauta kuvauskentässä enter -painiketta antaaksesi rivinvaihdon ja Shift + Enter -painiketta aloittaaksesi aivan seuraavalta riviltä.

Lisää ja muokkaa luettelokohteita

Lisää luettelokohde

Kun olet lisännyt osion:

  • Klikkaa Muokkaa sisältöä (1) -painiketta avataksesi luettelokohdepaneelin.

  • Klikkaa Lisää kohde (2) -painiketta lisätäksesi uuden luettelokohteen.
  • Voit valita Dkopioi tai poista (3) luettelon kohteet.

Muokkaa luettelokohdetta

Napsauta luettelokohdetta, jota haluat muokata. Se avaa tietyt luettelokohteen muokkausvaihtoehdot.

Täältä voit:

  • Lataa / poista ensisijainen ja toissijainen kuva (1)
    Voit ladata a Toissijainen kuva yhdessä Ensisijainen kuva jokaiselle luettelokohdalle. Kun käyttäjä vie hiiren kohteen päälle, näytetään toissijainen kuva, joka korvaa ensisijaisen kuvan. Lisäksi voit asettaa Kuvan korostusväri, joka näkyy kuvan osoittimessa.
  • Lisää Otsikko (2), Tekstitys (3)ja Kuvaus (4) luettelon kohdan.
  • Et välttämättä löydä tekstityksen ja kuvauksen vaihtoehtoa tietyistä luettelokohteista riippuen valitsemastasi asettelusta.
    Tarkista ennen kuvauksen lisäämistä tätä artikkeli.

5. Toimi napsautuksella

Voit mukauttaa yksittäisten kohteiden napsautuskäyttäytymistä Kuvalista osio. Alla ovat käytettävissä olevat vaihtoehdot:

  • Siirry linkkiin
    Tämän vaihtoehdon valitseminen avaa Linkkien rakentaja, jonka avulla voit lisätä hyperlinkin tähän kohteeseen. Linkki voi ohjata käyttäjät verkkosivustosi toiselle sivulle tai ulkoiselle URL-osoitteelle. Tietää enemmän noin Linkkien rakentaja.
  • Avaa Lightboxissa
    Tämä vaihtoehto näyttää kohteen suurennettuna Lightbox katsella napsautettaessa. Tässä tilassa Alaotsikko ja Tuotetiedot kohteeseen liitetty ei näy ruudukkonäkymässä, mutta näkyy Lightbox-tilassa.
  • Ei toimintoa
    Valitse tämä vaihtoehto, jos haluat tehdä kohteen napsauttamattoman. Kun kohde on valittuna, kohteen napsauttaminen ei käynnistä mitään toimintoa.

6. Avaa linkki uudessa ikkunassa: Aseta linkki avautumaan kohdassa a uusi välilehti tai samassa välilehdessä. Tämä näkyy vasta kun Siirry linkkiin -vaihtoehto on valittu alta Toimi klikkauksella valikosta.

7. Painikkeet ja kuvakkeet: Lisää minkä tahansa tyyppisiä Linkki luettelon kohtaan. Voit lisätä painikkeen/kuvalinkin/sosiaalisen kuvakkeen/tekstilinkin. Lisätietoja.

8. Kortin tyylin ohitus

Voit ohittaa yleiset korttityyliasetukset osion kautta Tyyliasetukset ja mukauta kunkin kohteen korttia erikseen Kuvaluettelo-osiossa. Tämän avulla voit käyttää ainutlaatuisia tyylejä eri luettelokohdissa paremman mukauttamisen varmistamiseksi.

Lisätietoja Tietoja Kortit-vaihtoehdosta dynaamisessa osiossa.

9. Muodon tyylin ohitus

Käytä Ohita-vaihtoehtoa määrittääksesi jokaiselle kuvalle eri muodon erikseen Kuvaluettelo-osiossa, mikä antaa sinulle paremman hallinnan jokaisen kohteen visuaaliseen tyyliin. Lisätietoja Tietoja Muotoilevasta Maskista.

10. Tallenna: Kun olet tehnyt mukautukset, tallenna muutokset.

Huomautuksia

  • Enable Kortit vaihtoehto Tyyliasetukset ohittaa ja mukauttaa yksittäisten kohteiden kortteja.
  • Enable Muotoileva naamio vaihtoehto Tyyliasetukset muotoilla muodot erikseen kullekin kohteelle.

Katso kuvaluettelokohteen muokkaaminen toiminnassa:

Sekvenssiluettelon kohteet

  • Voit helposti vetämällä ja pudottamalla luettelon kohteita muuttaaksesi järjestystä.

Katso kuvaluettelon kohteiden järjestys toiminnassa: 

Poista luettelokohde

Kun olet lisännyt luettelokohteen, voit muokata ja poistaa sitä.

  • Klikkaa Poista -kuvaketta kuvaluettelokohteen vieressä.
  • Tne, napsauta Poista -painiketta vahvistusponnahdusikkunassa.
  • Lopuksi, säästää muutoksesi.

Katso kuvaluettelokohteen poistaminen toiminnassa: 

Huomautuksia

Poistettuja luettelokohteita ei voi palauttaa.

Hallitse kuvaluettelon osia

Kuvaluettelo-osio sisältää Elementit-välilehti jonka avulla voit hallita osion eri elementtien näkyvyyttä helposti. Yksinkertaisten vaihtokytkimien avulla voit ottaa käyttöön tai poistaa käytöstä tiettyjä elementtejä ilman, että sinun tarvitsee poistaa tai muokata itse elementtejä.

  • Klikkaa Muokkaa sisältöä (1) -painiketta.

  • Valitse elementit (2) -välilehti.
  • Kun olet tehnyt muutokset, paina Säästä (3) -painiketta.

Osion asetukset

  1. Näytä otsikko: Ota käyttöön tai poista käytöstä kuvaluettelo-osion otsikon näkyvyys.
  2. Näytä painikkeet: Hallitse, näytetäänkö painikkeet osatasolla.

Kohteet Asetukset

  1. Näytä kuva: Muuta kuvien näkyvyyttä.
  2. Näytä Otsikko: Hallitse, näytetäänkö otsikko.
  3. Näytä tekstitys: Ota tekstitykset käyttöön tai poista ne käytöstä.
  4. Näytä kuvaus: Hallitse tuotekuvausten näkyvyyttä.
  5. Näytä painikkeet: Päätä, näytetäänkö yksittäisten kohteiden painikkeet.

Osion asettelu

  • Klikkaa Muokkaa sisältöä (1) -painiketta.

  • Valitse Layout (2) -välilehti.
  • valita asettelu osastollesi ja Säästä (3) muutokset.

 

Pro Tip

Voit luoda täysleveän osion / välilehtiluettelon osion valitsemalla minkä tahansa asettelun välillä 25–29.

Huomautuksia

  • Voit helposti lisätä sivullesi välilehtiluettelon.
  • Sinulla on mahdollisuus valita vaaka- tai pystysuora välilehtiasettelu.
  • Se auttaa tekemään vertailuun perustuvan osion.

Muotoile osastosi tyyli

  • Valitse Muokkaa sisältöä (1) painiketta.

  • Valitse Tyyli (2) Tab.
  • Muuta osioelementtien tyyliä ja Tallenna (3) muutoksesi.

Sinulla on useita tyylivaihtoehtoja osiolle: 

  1. Näytön asetukset
  2. Mobiili näyttö
  3. suuntaus
  4. Tekstin koko
  5. Väli
  6. Osion otsikko
  7. Kuvien asetukset
  8. Muotoileva naamio
  9. Image Hover Options
  10. Kuvan reuna
  11. Korttivaihtoehdot
  12. Varjon asetukset
  13. Painikkeet ja linkit

näyttö 

  1. Päättäkää Näytä kohteet in rivit ja sarakkeet / karuselli / esittely
    • Jos olet valinnut rivejä ja sarakkeita vaihtoehto, luettelon kohteet järjestetään riveihin ja sarakkeisiin. Tässä tapauksessa sinun on määritettävä rivien ja sarakkeiden määrä.
    • Jos olet valinnut karuselli vaihtoehto, luettelon kohteet esitetään diaesityksenä. Tietää enemmän.

    • Showcase tarjoaa tyylikkään ja interaktiivisen karusellityylisen asettelun, jonka avulla voit näyttää kuviasi yksi kerrallaan sujuvilla siirtymillä ja tehosteilla. Tämä asettelu lisää sivustollesi modernin ja mukaansatempaavan käyttökokemuksen. Lisätietoja.

  2. - asettaa Kolumnien numerot kuvaluetteloa varten. Voit valita 1–10 sarakkeesta.
  3. Määritä Pylväiden välinen tila luettelon kohteista.
  4. Määritä Tila rivien välissä luettelon kohteista.

Jos karusellivaihtoehto valitaan vaiheessa 1, näet seuraavat lisävaihtoehdot:

  1. Ota Smooth Scrolling käyttöön: Mahdollistaa kohteiden jatkuvan vierityksen karusellissa saumattoman ja visuaalisesti houkuttelevan kokemuksen saamiseksi.
  2. Automaattinen liuku: Kiertyy automaattisesti diojen läpi ilman käyttäjän toimia.
  3. Näytä automaattisen toiston edistyminen: Näyttää edistymisen ilmaisimen, kun automaattinen toisto on aktiivinen paremman näkyvyyden parantamiseksi.
  4. Automaattisen toiston viive: Asettaa aikavälin kunkin diasiirtymän välillä, kun automaattinen toisto on käytössä.
  5. Karuselli Loop: Mahdollistaa diojen jatkuvan silmukan, joten karuselli käynnistyy uudelleen saumattomasti viimeisen dian jälkeen.
  6. Karuselliohjaimet: Valitse Navigointiohjaimet. Voit valita vaihtoehdoista Ei säätimiä, Nuolet – alhaalla keskellä/Oikealla ylhäällä/Oikealla alhaalla, Chevron, Pisteet ja Vaakasuora vieritys.
  7. Häivyttää reunat: Käytä hienovaraista haalistumista karusellin reunoihin. Se parantaa käyttökokemusta sekoittamalla kuvia pehmeästi, kun ne tulevat näkymään tai poistuvat siitä.

Jos vaiheessa 1 on valittu Esittely-vaihtoehto, näet seuraavat lisäasetukset:

  1. Vaikutukset: Valitse viidestä animaatiotehosteesta: Häivytys, Käännä, Kortit, Coverflow (Kallistettu) tai Coverflow (Litteä) hallitaksesi kuvien siirtymiä.
  2. Ota käyttöön tasainen vieritys: Mahdollistaa kohteiden jatkuvan vierittämisen esittelyssä saumattoman ja visuaalisesti miellyttävän käyttökokemuksen takaamiseksi.
  3. Automaattinen liuku: Vaihda kuvien välillä automaattisesti ilman käyttäjän toimia.
  4. Näytä automaattisen toiston edistyminen: Näyttää edistymisilmaisimen automaattisen toiston ollessa aktiivinen paremman näkyvyyden takaamiseksi.
  5. Automaattisen toiston viive: Aseta diojen välinen aika, kun automaattinen toisto on aktiivinen. Voit valita minkä tahansa arvon 1–10 sekunnin väliltä.
  6. Karusellisilmukka: Ota tämä käyttöön, jos haluat silmukoida karusellia loputtomasti, mikä mahdollistaa jatkuvan toiston.
  7. Karusellin ohjaimet: Karusellin säätimet -asetuksella voit valita, miten käyttäjät liikkuvat dioissa. Voit käyttää esimerkiksi nuolia (alhaalla keskellä, yläoikealla, alakulmassa oikealla), pisteitä tai ei säätimiä ollenkaan.

Mobiili näyttö

  1. Aseta numero Ruudukon sarakkeet mobiililaitteille. Voit asettaa sen enintään 3 sarakkeeksi.
  2. Määrittele Väli ruudukoiden välillä (pikseleinä).

Laitekohtainen sarakeasettelu Studion asetuksista:

suuntaus

  1. Kohdistaa Sisältö vaakasuunnassa kuvaluettelossa. Voit asettaa ne kohdistetuiksi vasemmalle, oikealle tai keskelle.
  2. Kohdistaa Sisältö vertikaalisesti kuvaluettelossa. Voit asettaa ne ylä-, keski- ja alareunaan kohdistetuiksi.
  3. Valitse Sisällön järjestys eli ensin näytettävät luettelokohteiden kuvat tai niihin liittyvä teksti.

Tekstin koko

  1. Klikkaa Muuta tekstin tyyliä -painiketta vieraillaksesi Design ja hallita kirjasinkokojasi ja tyylejäsi. 
  2. - asettaa Otsikko osion luettelokohteiden kirjasintyyli.
  3. - asettaa Alaotsikko osion luettelokohteiden kirjasintyyli.
  4. Aseta oletusarvo Tuotetiedot osion luettelokohteiden kirjasintyyli.
  5. Ota tämä asetus käyttöön animoi mitä tahansa numeroita Läsnä Otsikko ja Alaotsikko kentät. Kun tämä on käytössä, numeeriset arvot näkyvät dynaamisen laskenta-animaation kanssa, mikä tekee niistä visuaalisesti houkuttelevampia.

Väli

  1. Määritä Kuvan leveys luettelon kohteille.
  2. Määritä Sisällön leveys luettelon kohteille.
  3. Määritä Välilyönti osion otsikon alla px.
  4. Määritä Kuvien alla tilaa luettelon kohdista (%).
  5. Määritä Välilyönti otsikoiden alla luettelon kohdista (%).
  6. Määritä Tekstityksen alla tilaa luettelon kohdista (%).

Osion otsikko

  1. Tasaa vaakatasossa osion otsikkoteksti. Voit asettaa sen vasemmalle, keskelle ja oikealle.
  2. Ota käyttöön/poista käytöstä Jakaja osion otsikon ja osion sisällön välillä.
  3. - asettaa jakajan paksuus (pikselinä).
  4. Määritä Jakajan väri värivalitsimesta.
  5. Valitse Jakaja Tyyli avattavasta valikosta.
  6. - asettaa Otsikon leveys määrittääksesi osion otsikon leveyden, alkaen vähintään 50 prosentista.

kuvat 

  1. Valitse Imaagi Crop luettelon kohteille. Voit asettaa kuviksi neliö, ympyrä, vaaka, muotokuva ja alkuperäinen.
  2. Valitse luettelon kohteiden kummallekin puolelle yhteinen kulman säde tai eri kulman säde ja aseta numero (pikselinä) Corner Radius luettelon kohteen kuvista. Tietää enemmän.

Kärki

Käyttäen kulman säde -kentässä voit luoda eri muotoisia luettelokohdekuvia. Jos määrität tässä 500 px, kuvat näkyvät ympyrän muodossa.

  • Jos olet valinnut jaetut kulmat, voit asettaa kulman kulman eri säteen.

Muotoileva naamio

  1. Muotonaamio: Ota tämä kytkin käyttöön, jos haluat käyttää muotomaskia Kuvaluettelo-osion kuvissa. Kun valittu muoto on otettu käyttöön, se leikkaa kuvan visuaalisesti kyseiseen muotoon.
  2. Valitse muoto: Valitse useista ennalta määritetyistä muodoista, joita voit käyttää kuviisi. Tämän avulla voit tyylitellä sisältöäsi luovasti näyttämällä kuvia ainutlaatuisissa muodoissa, kuten pyöristetyssä, vinoneliössä, pudotuksessa jne.
  3. Venyttää: Ota tämä asetus käyttöön venyttääksesi valittua muotoa niin, että se sopii paremmin kuvasäiliöön. Tämä varmistaa, että muoto täyttää käytettävissä olevan tilan suhteellisesti, mikä parantaa visuaalista kohdistusta erikokoisten näyttöjen välillä.

Huomautuksia

  • Stretch-vaihtoehto riippuu asettelusta – Se ei välttämättä näy tietyissä asetteluissa. Asetteluissa, joissa teksti, kuten otsikko tai alaotsikko, näytetään kuvan päällä, koko Shape Mask -vaihtoehto ei ehkä ole käytettävissä.
  • Stretch-asetus riippuu useista tekijöistä - mukaan lukien kuvan koko, suuntausja rajausasetukset määritetty Tyyli-välilehdellä.
  • Jos Kuvan rajaus -asetuksena on Alkuperäinen, kuvan todelliset mitat määräävät, venytetäänkö se pysty- vai vaakasuunnassa.

Image Hoverissa 

  1. Valitse Kuva Hover Color olla korostusväri tai olla määritelty. Jos olet valinnut korostusvärija määritä sitten sameus. Voit määrittää korostusvärin jokaiselle tuotteelle alkaen Muokkaa kohdetta paneeli.
  2. Jos olet valinnut määritä väri -vaihtoehto ja aseta sitten Päällystyksen väri ja peittävyys.
  3. - asettaa Peittotekstin väri joka näkyy osoittimessa.
  4. Päättäkää Animoi luettelokohteen kuvat vie hiiri napsauttamalla Kyllä. Tarkista tämä ominaisuus live-sivulla.
  5. Valitse Animaatiotyyli kuville, kun kohdistin on niiden päällä.
  6. Valitse, haluatko sallia kuvien siirto leijuu vai ei.
  7. Valitse Siirtymistyyli hover siirtymistä varten. Käytettävissä olevat vaihtoehdot ovat Fade ja Flip.

Kuvan reuna

  1. Ota reuna käyttöön / poista käytöstä kuvien ympärille vaihtamalla.
  2. Valitse, onko sinulla a yhteinen raja kuvien kaikilla puolilla tai voit määrittää rajat erikseen kummallekin puolelle.
  3. Määritä leveys rajasta. Jos se on asetettu arvoon 0, reuna ei tule näkyviin. Voit myös asettaa reunuksen leveyden erikseen kuvan kummallekin puolelle.
  4. Valitse Reunuksen väri värivalitsimesta.
  5. Valitse haluamasi Reunuksen tyyli avattavasta valikosta.
  6. Määrittele reunuksen leveys matkapuhelimelle kohdistamalla se työpöydälle valitun leveyden mukaan.

Kortit

varjo

  1. näyttö – Valitse, näytetäänkö luettelon kohteiden takana oleva varjo aina vai vain hiiren päällä.
  2. Tyyli – Valitse olemassa olevista esiasetuksista tai luo mukautettu varjo.
    Jos olet valinnut mukautetun vaihtoehdon, käy tässä Box Shadow Generator luodaksesi mukautetun varjon. Lopuksi kopioi ja liitä laatikko varjo CSS.
  3. Jos olet valinnut esiasetusvaihtoehdon, niin Valitse Varjotyylit avattavasta valikosta.

Painikkeet ja linkit

  1. Katso, miten hallita tyyliä Painikkeet ja linkit.
  2. Säästä kaikki tyyli muuttuu.

Karusellityyli

Karusellityyli näyttää luettelon kohteet diaesityksenä eli luettelon kohteet jaetaan toistensa jälkeen.

Katso, miten karusellityyli toimii: 

Tässä on live-kuvaluettelo:

Katso live-esittelysivusto. 

Katso, miten Corner Radius toimii: 

Tagged:

Etkö löydä etsimääsi?

Ota yhteyttä Pixpa-asiantuntijaan.

Ota yhteyttä