Kuvaluettelo-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 kuvaluettelo?
  2. Kuvaluettelo-osion lisääminen sivulle
  3. Lisää ja muokkaa luettelokohteita
  4. Listakohteiden järjestys
  5. Luettelon kohteiden poistaminen
  6. Osion asettelun muuttaminen
  7. Tyylivaihtoehdot
  8. Karusellityyli
  9. 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ää kuvaluettelo -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 Lista (1) luokkaa ja napsauta Kuvalista välilehti (2), josta voit valita erilaisia ​​asetteluja kuvaluettelosta (3).

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

  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 kuvaluetteloa (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 kuva (1) luettelon kohdasta. Voit myös asettaa Kuvan korostusväri täältä, joka näkyy kuvan osoittimena.
  • 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.

  • Napsauta linkin rakennustyökalun kuvaketta Otsikko Linkki (5) linkin rakennustyökalun avaaminen linkittääksesi luettelon otsikon mille tahansa sivulle. Tietää enemmän noin Linkkien rakentaja.
  • Aseta linkki avautumaan kohdassa a uusi välilehti tai samassa välilehdessä (6).
  • Lisää minkä tahansa tyyppisiä Linkki (7) luettelon kohtaan. Voit lisätä painikkeen/kuvalinkin/sosiaalisen kuvakkeen/tekstilinkin. Lisätietoja.
  • Säästä (8) muutokset.


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

Poistettua luettelokohdetta ei voi palauttaa.


Osion asettelu

  • Klikkaa Hallitse kuvaluetteloa (1) -painiketta.
  • Valitse Layout (2) -välilehti.
  • valita (3) osastosi asettelu ja Säästä (4) 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 Hallitse kuvaluetteloa (1) painiketta.
  • Valitse Tyyli (2) Tab.
  • Muuta osioelementtien tyyliä ja Tallenna (3) muutoksesi.


Sinulla on useita tyylivaihtoehtoja osiolle: 

kohdetta 

  1. Päättäkää Näytä kohteet in rivejä ja sarakkeita or karuselli 
    • 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.
  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.
  5. Valitse Sisällön järjestys eli ensin näytettävät luettelokohteiden kuvat tai niihin liittyvä teksti.
  6. Kohdistaa Sisältö vaakasuunnassa kuvaluettelossa. Voit asettaa ne kohdistetuiksi vasemmalle, oikealle tai keskelle.
  7. Kohdistaa Sisältö vertikaalisesti kuvaluettelossa. Voit asettaa ne ylä-, keski- ja alareunaan kohdistetuiksi.

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

  1. Päättäkää Kierrä karuselli vai ei.
  2. Valitse karusellin tapauksessa Navigointiohjaimet. Voit valita joko Ei säätimiä, Nuolia – Alhaalla keskellä/Oikealla ylhäällä/Oikealla alhaalla, Chevronilla tai Pisteitä.

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ä).

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.

Image Hoverissa 

  1. Valitse Kuva Hover Color olla korostusväri tai olla määritelty. Jos olet valinnut korostusvärija määritä sitten sameus.
  2. Jos olet valinnut määritä väri -vaihtoehto ja aseta sitten Pohjan leijunnan väri ja peittävyys luettelon kohteille.
  3. - asettaa elementit osion luettelokohteiden väri.
  4. Päättäkää Animoi luettelokohteen kuvat vie hiiri napsauttamalla Kyllä. Tarkista tämä ominaisuus live-sivulla.
  5. Valitse Animaatiotyyli kuville, kun osoitin on niiden päällä.

Koko & Tila 

  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 (%).

teksti 

  1. Klikkaa Muuta tekstin tyyliä -painiketta vieraillaksesi Malli ja hallita kirjasinkokojasi ja tyylejäsi. 
  2. - asettaa Otsikko osion luettelokohteiden kirjasintyyli.
  3. - asettaa Alaotsikko osion luettelokohteiden kirjasintyyli.
  4. Aseta oletusarvo Kuvaus osion luettelokohteiden kirjasintyyli.

Kortit 

  1. Katso, miten korttien hallintaan.

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.

  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: 


Etkö löydä etsimääsi?

Ota yhteyttä Pixpa-asiantuntijaan.