Aikajana-osio

Tämän aikajanaosion avulla käyttäjät voivat näyttää projektin virstanpylväät ja tehtävät kronologisessa järjestyksessä.

Tämä on erityisen hyödyllistä korostaa projektin edistymistä, havainnollistaa hakuprosesseja, esitellä saavutuksia, kuten palkintoja, ja tarjota muita mukautettavia vaihtoehtoja.

Se tarjoaa jäsennellyn ja visuaalisesti houkuttelevan tavan esittää tietoa aikajanan muodossa, mikä parantaa käyttökokemusta ja sitoutumista.

Tässä artikkelissa:


Lisää osio sivullesi

  • 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.
  • Klikkaa Aikajana välilehti (1), josta voit valita erilaisia ​​asetteluja aikajanan (2) osiosta.
  • Osio lisätään nyt sivulle. Klikkaa Säästä (3) -painiketta säilyttääksesi muutokset.


Lisää ja muokkaa luettelokohteita

Lisää luettelokohde

Kun olet lisännyt osion:

  • Klikkaa Muokkaa aikajanaa (1) -painiketta avataksesi luettelokohdepaneelin.

  • Klikkaa Lisää kohde (2) -painiketta lisätäksesi uuden luettelokohteen.
  • Voit valita Kopioi tai poista (3) luettelon kohteet.
  • Määritä a Otsikko (4) aikajanaosion osalta.

Muokkaa luettelokohdetta

Napsauta luettelokohdetta, jota haluat muokata. Se avaa kyseisen 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.

Huomautuksia

Ennen kuvauksen lisäämistä, lue tämä artikkeli.

5. Toiminto napsautuksella – otsikko ja kuva

Voit mukauttaa yksittäisten kohteiden napsautustoimintoja Aikajana - osiossa. Käytettävissä olevat vaihtoehdot ovat seuraavat:

  • 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 uuteen välilehteen tai samaan välilehteen. Tämä näkyy vain, kun Siirry linkkiin -vaihtoehto on valittu Toiminto napsautettaessa -valikosta.

7. Painikkeet ja linkit: Lisää minkä tahansa tyyppisiä linkkejä listan kohteeseen. Voit lisätä painikkeen/kuvalinkin/sosiaalisen median kuvakkeen/tekstilinkin. Lue lisää.

8. Kortin tyylin ohitus

Voit ohittaa yleiset korttityyliasetukset osion tyyliasetuksissa ja mukauttaa kunkin kohteen korttia erikseen Aikajana-osiossa. Näin voit käyttää ainutlaatuisia tyylejä eri luettelokohteissa paremman mukauttamisen takaamiseksi.

Lue lisää korttivaihtoehdoista dynaamisessa osiossa.

9. Muodon tyylin ohitus

Käytä Ohita-vaihtoehtoa määrittääksesi jokaiselle kuvalle eri muodon erikseen Aikajana-osiossa, mikä antaa sinulle paremman hallinnan jokaisen kohteen visuaaliseen tyyliin. Lue lisää Muotomaskista.

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


Sekvenssiluettelokohteet


Aikajanan osan elementtien hallinta

Aikajana-osiossa on Elementit-välilehti , jonka avulla voit hallita osion eri elementtien näkyvyyttä helposti. Yksinkertaisten kytkimien avulla voit ottaa käyttöön tai poistaa käytöstä tiettyjä elementtejä poistamatta tai muokkaamatta niitä itse.

  • Klikkaa Muokkaa aikajanaa (1) -painiketta.

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

Osion asetukset

  1. Näytä otsikko: Ota aikajanaosion otsikon näkyvyys käyttöön tai poista se käytöstä.
  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.


Muuta osion asettelua

  • Napsauta Muokkaa aikajanaa -painiketta avataksesi osion muokkauspaneelin.
  • Valitse Layout Tab.
  • Täältä voit helposti muuttaa osion asettelua, vaikka se olisi lisätty sivulle.

Kun vaihdat asettelua, näet osioihin liittyvät asettelut ylhäällä.

Näiden lisäksi voit valita asettelun muista osioista Lisää asetteluja -otsikon alta.


Tyyliasetukset

  • Valitse Muokkaa kuvaluetteloa painiketta.
  • Valitse Tyyli (1) Tab.
  • Muuta osioelementtien tyyliä ja Tallenna (2) muutoksesi.

Sinulla on useita tyylivaihtoehtoja osiolle: 

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

Näytä vaihtoehto

  1. Määritä Tila rivien välissä luettelon kohteista.


suuntaus

  1. Kohdistaa teksti vaakasuunnassa osiossa. Voit asettaa ne tasatuiksi vasemmalle, oikealle tai keskelle.
  2. Kohdistaa Sisältö vertikaalisesti osiossa. Voit asettaa ne tasaamaan ylös, keskelle ja alas.
  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ä Välilyönti osion otsikon alla px.
  3. Määritä Tila kuvien yläpuolella luettelon kohdista (%).
  4. Määritä Tilaa tilanjakajan ympärillä luettelokohteiden vaakasuunnassa (prosentteina).
  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.


Aikajanan tyyliasetukset

  1. Ota tämä käyttöön, jos haluat, että osiossa on joka toinen kohde Vaihtoehtoinen (vastakkainen puoli.
  2. Valitse Suunta kohteista.
  3. Määritä Jakolinjan leveys jaksoa varten.
  4. Määritä Peruslinja (tausta) Jakajan väri.
  5. Määritä Aktiivinen linja (korostettu) Jakajan väri.


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.


Muotoileva naamio

  1. Muotonaamio: Ota tämä kytkin käyttöön lisätäksesi muotomaskin kuvaan aikajana-osiossa. Kun tämä kytkin on käytössä, valittu muoto leikkaa kuvan visuaalisesti kyseiseen muotoon.
  2. Valitse muoto: Valitse useista ennalta määritetyistä muodoista, joita voit käyttää kuvaasi. Tämän avulla voit tyylitellä sisältöäsi luovasti näyttämällä kuvan ainutlaatuisessa muodossa, kuten pyöristetyssä, vinoneliössä, pudotuksessa jne.

Huomautuksia

  • Shape Mask -vaihtoehto riippuu asettelusta – Se ei välttämättä näy asetteluissa, joissa tekstiä, kuten otsikkoa tai alaotsikkoa, näytetään kuvan päällä.
  • Stretch-asetus riippuu useista tekijöistä – mukaan lukien Tyyli-välilehdellä määritetyt Kuvakoko-, Tasaus- ja Rajausasetukset.
  • Jos Kuvan rajaus -asetuksena on Alkuperäinen, kuvan todelliset mitat määräävät, venytetäänkö se pysty- vai vaakasuunnassa.


Kuvan osoitin

  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. Päättäkää Animoi luettelokohteen kuvat vie hiiri napsauttamalla Kyllä. Tarkista tämä ominaisuus live-sivulla.
  4. Valitse Animaatiotyyli kuville, kun kohdistin on niiden päällä.
  5. Valitse, haluatko sallia kuvien siirto leijuu vai ei.
  6. 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


Etkö löydä etsimääsi?

Ota yhteyttä Pixpa-asiantuntijaan.

Pixpa Studio on juuri uudistettu. Päivitämme parhaillaan kaikkien ohjeartikkeleiden kuvakaappauksia.