Painikkeet ja kuvakkeet

Painikkeet ja linkit -toiminnolla voit lisätä osioon minkä tahansa tyyppisiä linkkejä (1). Voit lisätä painikkeen, tekstilinkin, kuvalinkin, kuvakkeen tai erottimen.

Voit kopioida (2), muokata (3) tai poistaa (4) olemassa olevan painikkeen/linkin.

Tässä artikkelissa:

1. Lisää painikkeita/linkkejä
2. Tyylipainikkeet/linkit

---

Lisää painikkeita/linkkejä

• Jos haluat lisätä minkä tahansa tyyppisen linkin osioon, napsauta + Lisää-painike vaihtoehto.

+ Lisää painike -vaihtoehto tarjoaa neljä tapaa lisätä linkki. Tämän lisäksi voit lisätä erottimia lisätäksesi tilaa painikkeiden/linkkien välille. Seuraavat vaihtoehdot ovat käytettävissä:

• Button
• Painikkeen tyyli
• Tekstilinkki
• Kuva
• ikoni
• separaattori

---

Button

Lisää painike luettelokohteeseen.

Voit päivittää:

1. Painikkeen etiketti – Määritä näkyvä teksti painikkeessasi. Käyttäjät näkevät tämän ja napsauttavat sitä.
2. Painikkeen linkki – Määritä URL-osoite tai toiminto painikkeen pitäisi aktivoitua klikattaessa.
3. Kohdeikkuna – Valitse, avautuuko linkki sama välilehti tai uusi välilehti.
4. Painikkeen tyyli – Valitse painikkeen tyyli oletukseksi (asetettu Painikkeet ja linkit Suunnittelu-osion välilehti), Solid, Outline tai Tekstilinkki.

• • Oletus: Noudattaa sivustosi teema-asetuksia.
  • Kiinteä: Lihavoitu, täytetty nappi.
  • Outline: Läpinäkyvä tausta reunuksella.
  • Tekstilinkki: Yksinkertainen, siisti, vain tekstiä sisältävä tyyli (ei nappilaatikkoa).

5. Painikkeen muoto – Aseta a mukautettu muoto jokaiselle yksittäiselle painikkeelle osiossa. Näin voit ohittaa kohdassa määritetyn yleisen painikkeen muodon. Suunnitteluasetukset, jolloin voit hallita paremmin kunkin painikkeen ulkoasua. Käytettävissä olevat muodot ovat neliö, pyöreä ja pilleri.
6. Painikkeen väri – Mukauta painikkeen värimaailmaa:

• • Oletus: Perii teeman asetukset.
  • Käänteinen: Kääntää painikkeen tekstin/taustan värin.
  • Custom: Voit valita tiettyjä tekstin ja taustan värejä.

7. Painiketeksti - Jos käytät Mukautettu painikkeen väri, voit asettaa tekstin (tunnisteen) väri täältä.
8. Painikkeen tausta – Tämä on saatavilla myös kohdassa Mukautettu, ja se asettaa painikkeen taustavärin. Yhdistä tämä tekstin väriin parhaan luettavuuden ja tyylin saavuttamiseksi.
9. Painikkeen kuvake – Lisää kuvake painikkeen otsikon viereen. Voit valita useista eri kuvakevaihtoehdoista.
10. Layout – Hallitse kuvakkeen sijaintia suhteessa etikettiin. Käytettävissä olevat asetteluvaihtoehdot ovat:

• • Otsikko + kuvake: Teksti näkyy ensin ja sen jälkeen kuvake.
  • Kuvake + otsikko: Kuvake näkyy ensin, sitten teksti.
  • Otsikko + kuvake (leveä): Teksti ja kuvake on järjestetty täyttöisemmäksi, mikä sopii leveämmille painikkeille.
  • Kuvake + otsikko (leveä): Kuvake ensin, leveämpi täyttöasettelu.

11. Kuvakkeen väri – Valitse painikekuvakkeen väri. Voit asettaa sen joko Painiketeksti väri tai Brändi väri.

---

Painikkeen tyyliasetukset

Löydät nämä asetukset osioiden Tyyli-välilehdeltä . Näiden asetusten avulla voit hienosäätää Pixpa-sivustosi painikkeiden ulkoasua, välistystä ja asettelua paremman suunnittelun hallinnan ja reagointikyvyn saavuttamiseksi:

1. Painikkeen koko – Valitse painikkeen koko (esim. Pieni, Keskikokoinen, Suuri). Tämä säätää täyttöä ja fonttikokoa suunnittelusi mukaan.
2. Painikkeiden välinen tila – Ohjaa useiden painikkeiden välistä vaakasuoraa etäisyyttä. Voit käyttää vw (viewport width) -yksiköitä responsiivisen välistyksen aikaansaamiseksi.
3. Painikkeiden yläpuolella oleva tila – Lisää pystysuoran välistyksen painikkeen/painikkeiden yläpuolelle. Tämä auttaa erottamaan ne yläpuolella olevasta sisällöstä prosentteina mitattuna.
4. Tekstilinkki – Säätää painikkeiden tekstilinkkien fonttikokoa (erityisen hyödyllinen käytettäessä ”Tekstilinkki”-tyyliä perinteisen painikkeen sijaan).
5. Kuva painikkeena (koko) – Jos käytät kuvaa perinteisen painikkeen sijaan, tämä asetus määrittää kuvan näyttökoon (pikseleinä).
6. Painikkeen leveys – Valitse, kuinka leveänä painikkeen tulisi näkyä:

• • Oletus: Vakioleveys painikkeen sisällön perusteella
  • Suuri / Erittäin suuri: Leveämmät painikkeet tehostavat käyttöä
  • Täysi leveys: Painike ulottuu koko säiliön leveydelle

---

Tekstilinkki

Lisää tekstilinkki luettelokohteeseen.

Voit päivittää:

1. - asettaa tekstimerkintä.
2. Määritä tekstilinkki.
3. Kohdeikkuna – Valitse avautuuko sivu samassa vai uudessa ikkunassa.

---

Kuva

Lisää kuva ja linkitä se mille tahansa sivulle.

• Kun olet ladannut kuvan, se näkyy tällä tavalla. Napsauta linkkiä muokataksesi sitä.

• Täältä voit:
  1. Lataa/Vaihda kuvaa.
  2. Painikkeen linkki – Määritä linkki.
  3. Kohdeikkuna – Valitse avautuuko sivu samassa vai uudessa ikkunassa.

---

Sosiaalinen kuvake

• Lisää sosiaalinen kuvake luettelokohteeseen.

Voit hallita:

1. Linkitettävä sosiaalinen kuvake.
2. Määritä sosiaalisen profiilisi polku.
3. Kohdeikkuna – Valitse avautuuko sivu samassa vai uudessa ikkunassa.

---

separaattori

Erotin - vaihtoehdolla voit lisätä painikkeiden tai linkkien väliin välistyksen.

Tämä on hyödyllistä, kun haluat luoda visuaalisen eron lähekkäin sijoitettujen painikkeiden välille. Voit lisätä erottimen Painikkeet ja linkit -paneelista aivan kuten muitakin painikkeita.

• Painikkeiden välistä etäisyyttä säätelee Toppaus – Yläosa asetus erotinpaneelissa. Tämän arvon säätäminen lisää tai vähentää lähekkäin sijoitettujen painikkeiden välistä pystysuoraa etäisyyttä.

 

---

Painikkeiden ja linkkien tyyliasetukset

Tyyliasetukset näkyvät Tyyli - välilehdellä osiota hallittaessa.

Sinulla on useita tyylivaihtoehtoja painikkeelle ja linkeille seuraavasti:

Painikkeet ja linkit

1. Määritä Välilyönti painikkeiden/linkkien välillä jotka on lisätty.
2. Määritä Välilyönti painikkeen/linkkien yläpuolella.
3. Valitse Hover Effect painikkeelle/linkeille.

Painikkeen koko 

---

esimerkki

Oletetaan, että olet lisännyt Amazonin sosiaalisen median linkin Button/Links -kohtaan ja määrittänyt kuvakkeen väriksi punaisen ja kuvakkeen taustavärin vihreän. Tällöin kuvake näyttää alla olevalta: