Rich text editorin käyttäminen sisältöön

Shopifyn rich text editorin avulla voit muotoilla verkkokaupassa näkyvää sisältöä.

Vinkki

Kun käytät rich text editoria, voit luoda uuden kappaleen painamalla enter tai return. Jos haluat lisätä rivinvaihdon pakottamatta uutta kappaletta, pidä painettuna shift-näppäintä ja paina sitten enter tai return.

Missä rich text editoria käytetään

Rich text editorilla voit lisätä tai muokata tekstiä monissa kaupan osa-alueissa:

• Tuotekuvaukset
• Kokoelmien kuvaukset
• Blogiviestit
• Sivut
• Kaupan käytännöt

Jos käytät Online Store 2.0 -teemaa, voit lisätä sivuillesi tai malleihin rich text -osia teemaeditoria käyttämällä.

HTML-sisällön lisääminen rich text editorin avulla

Huomio

Jos käytät HTML-koodia rich text editorissa, se voi aiheuttaa näyttövirheitä myyntipaikassasi. Sisällön kopioiminen toisesta sivustosta voi myös lisätä ei-toivottua HTML-koodia, joka voi aiheuttaa näyttövirheitä. Voit klikata </> Näytä HTML -painiketta tarkastellaksesi HTML-koodia ja poistaaksesi kaikki ei-toivotut HTML-koodit tai HTML-koodit, jotka aiheuttavat näyttövirheen, kuten marginaalien ulkopuolella olevan tekstin.

Rich text editoria käyttämällä voit syöttää HTML-sisältöä blogipostauksiin, sivuille sekä tuote- ja kokoelmakuvauksiin.

Voit tarkastella sisällön HTML-koodia rich text editorissa klikkaamalla </> Näytä HTML -painiketta.

HTML-näkymässä rich text editorilla voi tehdä monenlaisia muokkauksia. HTML-koodilla voi lisätä kuvia, videoita tai taulukoita sekä korjata ongelmia tai hienosäätää tyyliä asettelussa ja sisällössä.

Mediapienoisohjelman upottaminen

Jos haluat upottaa videon tai musiikkia pienoisohjelmana, sinulla täytyy olla videoon tai musiikkiin käyttöoikeudet jossakin palvelussa, kuten Youtube, Vimeo tai SoundCloud. Nämä palvelut luovat upotuskoodin, jonka voit kopioida ja liittää rich text editoriin Shopify Adminissa.

Tee näin:

1. Etsi upotettavan median upotuskoodi.

2. Valitse koko upotuskoodi klikkaamalla sitä ja painamalla ctrl + A PC:ssä tai command + A Macissa.

3. Kopioi upotuskoodi painamalla ctrl + C PC:ssä tai command + C Macissa.

4. Klikkaa Shopify Adminin rich text editorissa Näytä HTML -painiketta sen muokattavan sisällön kohdalla.

5. Liitä upotuskoodi painamalla ctrl + V PC:ssä tai command + V Macissa.

6. Klikkaa Tallenna.

Tekstin muotoileminen rich text editorilla

Muotoilu-painikkeesta pääset nopeasti luomaan kappaleita, otsikoita tai kappalelainauksia. Oikeanlaisen muotoilun ja otsikkotasojen käyttö auttaa vierailijoita ja hakukoneita verkkosivusi sisällön lukemisessa.

Jos haluat valita tekstin muodon, korosta teksti ja klikkaa sitten Muotoilu-painiketta.

Muotoiluasetukset

• Kohta

• Otsikko (1-6)

• Blockquote

Tekstin lihavointi

Jos haluat lihavoida tekstiä, korosta teksti ja klikkaa Lihavoitu-painiketta.

Tekstin kursivointi

Jos haluat kursivoida tekstiä, korosta teksti ja klikkaa Kursivoitu-painiketta.

Alleviivaa tekstiä

Jos haluat alleviivata tekstiä, valitse teksti ja klikkaa Alleviivaa-painiketta.

Luettelomerkkien lisääminen

Jos haluat lisätä luettelomerkkejä, klikkaa Lista luettelomerkeillä -painiketta.

Voit luoda luettelomerkityn listan ensimmäisen kohdan kirjoittamalla. Jos haluat luoda uusia luettelon kohtia, paina enter- tai return-näppäintä. Voit lopettaa luettelon painamalla enter- tai return-näppäintä kahdesti.

Numeroidun luettelon luominen

Voit luoda numeroidun luettelon klikkaamalla Numeroitu luettelo -painiketta.

Voit luoda numeroidun luettelon ensimmäiset kohdat kirjoittamalla. Jos haluat luoda uusia luettelon kohtia, paina enter- tai return-näppäintä. Voit lopettaa luettelon painamalla enter- tai return-näppäintä kahdesti.

Tekstin sisentäminen

Jos sisennät kappaletta, sen vasemmalle puolelle jätetään marginaali. Jos haluat sisentää kappaletta, klikkaa Sisennä-painiketta.

Tekstin sisennyksen poistaminen

Kappaleen sisennyksen poistaminen poistaa kaikki kappaleen sisennetyt marginaalit. Jos haluat poistaa kappaleen sisennyksen, klikkaa Poista sisennys -painiketta.

Tekstin tasaaminen

Jos haluat tasata tekstiä, valitse teksti, klikkaa Tasaus-painiketta ja valitse Vasen tasaus, Keskitys tai Oikea tasaus.

Tekstin värien muuttaminen rich text editorilla

Tee näin:

1. Korosta teksti ja klikkaa Väri-painiketta.

2. Muuta korostetun tekstin väriä klikkaamalla jotain väriä tai antamalla hex-koodi.

Tekstin taustavärien muuttaminen

Tee näin:

1. Korosta teksti ja klikkaa Väri-painiketta.

2. Klikkaa Tausta-välilehteä.

3. Muuta korostetun tekstin tausta klikkaamalla jotain väriä tai antamalla jokin hex-koodi.

Muotoilun poistaminen rich text editorissa

Voit poistaa tekstin tai kuvien muotoilun korostamalla sisällön ja sen jälkeen Poista muotoilu -painiketta.

Taulukoiden lisääminen rich text editorilla

Rich text editorilla voit lisätä taulukoita blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmien kuvauksiin. Luotuasi taulukon voit sijoittaa siihen tekstiä, kuvia tai jopa videoita.

Tee näin:

1. Klikkaa rich text editorissa Lisää taulukko -painiketta.

2. Klikkaamalla Lisää taulukko saat luotua taulukon, jossa on yksi rivi ja yksi sarake.

Kun olet luonut taulukon, voit muuttaa taulukon rivejä ja sarakkeita klikkaamalla uudelleen Lisää taulukko -painiketta:

• Lisää rivi yläpuolelle: Jos haluat lisätä rivin yläpuolelle uuden rivin, aseta kohdistin riville ja klikkaa tätä painiketta.
• Lisää rivi alapuolelle: Jos haluat lisätä rivin alapuolelle uuden rivin, aseta kohdistin riville ja klikkaa tätä painiketta.
• Lisää sarake ennen: Jos haluat lisätä sarakkeen edelle uuden sarakkeen, aseta kohdistin sarakkeeseen ja klikkaa tätä painiketta.
• Lisää sarake jälkeen: Jos haluat lisätä sarakkeen jälkeen uuden sarakkeen, aseta kohdistin sarakkeeseen ja klikkaa tätä painiketta.
• Poista rivi: Aseta kohdistin riville, jonka haluat poistaa, ja klikkaa sitten tätä painiketta.
• Poista sarake: Aseta kohdistin sarakkeeseen, jonka haluat poistaa, ja klikkaa sitten tätä painiketta.
• Poista taulukko: Aseta kohdistin mihin tahansa taulukon kohtaan ja poista sitten koko taulukko klikkaamalla tätä painiketta.

Linkkien lisääminen rich text editorilla

Rich text editorilla voi lisätä linkkejä (hyperlinkkejä) blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmien kuvauksiin. Linkit voivat ohjata asiakkaita Shopify-verkkokauppaasi ja muille verkkosivuille, tai voit lisätä sähköpostiviestejä avaavia tai puheluja aloittavia linkkejä asiakkaiden yhteydenpidon nopeuttamiseksi.

Tee näin:

1. Korosta teksti tai kuva, jonka haluat muuttaa linkiksi.
2. Klikkaa Lisää linkki.

3. Syötä linkin URL-kohdeosoite Linkki kohteeseen -kenttään.

   • Jos haluat luoda linkin ulkopuoliseen verkkosivuun, joka ei kuulu Shopify-kauppaan, kirjoita ensin https:// ja sitten verkko-osoite, esimerkiksi https://www.example.com.
   • Jos haluat osoittaa linkin Shopify-verkkokaupan sivulle, kirjoita lyhyt URL-osoite, esimerkiksi /collections/summer-collection.
   • Jos haluat luoda linkin, joka avaa sähköpostiviestin, kirjoita ensin mailto: ja sitten sähköpostiosoite, esimerkiksi mailto:example@example.com.
   • Jos haluat luoda linkin, joka soittaa puhelun, kirjoita ensin tel: ja sitten puhelinnumero, esimerkiksi tel:+0-123-456-7890.

4. Syötä Linkin otsikko -kenttään lyhyt kuvaus linkistä.

5. Valitse Avaa tämä linkki -valikosta, miten haluat linkin avautuvan.

   • samassa ikkunassa: Linkki avataan käyttäjän nykyisessä selaimen välilehdessä tai ikkunassa.
   • uudessa ikkunassa: Linkki avataan uudessa selaimen välilehdessä tai ikkunassa.

6. Voit muuntaa korostetun tekstin linkiksi klikkaamalla Lisää linkki.

Sisäisten ja ulkoisten linkkien lisääminen rich text editorilla

Linkkejä Shopify-kaupan sivuille kutsutaan sisäisiksi linkeiksi. Voit luoda sisäisiä linkkejä lyhyiden URL-osoitteiden avulla. Esimerkiksi URL-osoite /collections osoittaa kaupan kokoelmat-sivulle.

Jos haluat osoittaa linkin verkkokaupan tietylle sivulle, kuten kokoelma- tai tuotesivulle, käytä URL-osoitteen muotoa /page-type/page-handle. Jos olet esimerkiksi luonut kokoelman nimeltä Summer Collection, voit osoittaa linkin kokoelmaan käyttämällä URL-osoitetta /collections/summer-collection.

Huomaa

Voit tarkistaa tuotteen, kokoelman, sivun tai blogin käyttönimen siirtymällä sen pääsivulle Shopify Adminissa, etsimällä Hakukoneluettelo-osion ja klikkaamalla Muokkaa.

Linkkejä Shopify-kaupan ulkopuolisille verkkosivuille kutsutaan ulkoisiksi linkeiksi. Ulkoiset linkit on syötettävä kokonaisuudessaan, ja niiden alku on aina http://.

Tiedoston linkin lisääminen sivun sisältöön

Kun olet ladannut tiedoston sivulle, voit linkittää sen rich text -editorissa sisältöön, jolloin se on ladattavissa tuotteen tai kokoelman kuvauksesta, verkkosivulta tai blogipostauksesta.

Huomaa

URL-osoitteen alkuosan täytyy olla http://cdn.shopify.com/. Jos alkuosa on http://static.shopify.com, vaihda se muotoon http://cdn.shopify.com.

Tee näin:

Kuvien lisääminen rich text editorilla

Voit lisätä kuvan kolmella eri tavalla käyttämällä rich text editoria:

• Lataamalla kuvia
• Valitsemalla tuotekuvista
• Käyttämällä kuvan julkista URL-osoitetta.

Huomaa

Vaikka jokaiseen tuotteeseen (mukaan lukien sen versiot) voi liittää vain 250 kuvaa, voit käyttää kaupan muissa osissa rajattomasti kuvia.

Kuvien lataaminen

Tee näin:

1. Klikkaa rich text editorissa Lisää kuva -painiketta.

2. Klikkaa Lisää kuva -valintaikkunassa Lähetetyt kuvat -välilehteä.

3. Klikkaa Lataa tiedosto.

4. Valitse tietokoneestasi WebP-, HEIC-, SVG-, GIF-, JPEG- tai PNG-kuvatiedosto.

5. Valitse lataamasi kuva klikkaamalla sitä.

6. Valitse Koko-valikosta koko, jossa kuva näytetään. Jos haluat lisätä kuvan muuttamatta sen näyttökokoa, valitse Alkuperäinen.

7. Lisää kuva rich text editoriin klikkaamalla Lisää kuva.

Tuotekuvista valitseminen

Tee näin:

1. Klikkaa rich text editorissa Lisää kuva -painiketta.

2. Klikkaa Lisää kuva -valintaikkunassa Tuotekuvat-välilehteä.

3. Klikkaa kuvaa, jonka haluat lisätä.

4. Valitse Koko-valikosta koko, jossa kuva näytetään. Jos haluat lisätä kuvan muuttamatta sen näyttökokoa, valitse Alkuperäinen.

5. Lisää tuotekuva rich text editoriin klikkaamalla Lisää kuva.

Kuvan URL-osoitteen käyttäminen

Voit lisätä kuvan käyttämällä sen julkista URL-osoitetta seuraavasti:

1. Klikkaa rich text editorissa Lisää kuva -painiketta.

2. Klikkaa Lisää kuva -valintaikkunassa URL-välilehteä.

3. Syötä kuvatiedoston julkisesti saatavilla oleva URL-osoite.

4. Lisää kuva rich text editoriin sen alkuperäisessä koossa klikkaamalla Lisää kuva.

Kuvan siirtäminen ja kuvakoon muuttaminen rich text editorissa

Kun kuva on lisätty tuotteen tai kokoelman kuvaukseen, verkkosivulle tai blogiin, voit siirtää sen toiseen kohtaan sisällössä.

Tee näin:

1. Klikkaa Shopify Adminissa tuotetta, kokoelmaa, verkkosivua tai blogipostausta, jossa siirrettävä tai muutettava kuva sijaitsee.
2. Klikkaa kuvaa rich text editorissa.

3. Tee jompikumpi seuraavista toimenpiteistä:

   • Voit siirtää kuvaa klikkaamalla kuvaa ja vetämällä sen toiseen kohtaan Sisältö-kentässä.
   • Voit muuttaa kuvan kokoa klikkaamalla ja vetämällä jotakin kulmista.

4. Klikkaa Tallenna.

Kuvan muokkaaminen rich text editorissa

Rich text editorissa voit muuttaa kuvan kokoa, tekstin rivitystä ja kuvan tasausta. Voit myös muokata kuvan URL-osoitetta ja lisätä tai muuttaa vaihtoehtoista tekstiä.

Tee näin:

1. Avaa Muokkaa kuvaa -valintaikkuna kaksoisklikkaamalla kuvaa rich text editorissa.

2. Muokkaa kuvaa koko- ja tasausasetusten avulla:

   • Jos haluat muuttaa kuvan kokoa, valitse kokoasetus.
   • Jos haluat parantaa verkkokaupan hakukoneoptimointia ja esteettömyyttä, lisää tai muokkaa kuvan vaihtoehtoista tekstiä.
   • Jos haluat lisätä välin, syötä pikselimäärä, jonka verran haluat lisätä väliä kummallekin puolelle.
   • Jos haluat muuttaa kuvan tasausta, tee valinta kuvakkeista, jotka esittävät vasenta ja oikeaa tasausta sekä keskitystä.
   • Jos haluat lisätä tekstin rivityksen, valitse Rivitä teksti kuvan ympärille.

3. Tallenna muutokset klikkaamalla Tallenna.

Videoiden lisääminen rich text editorin avulla

Rich text editorin avulla voit lisätä tai upottaa videoita blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmien kuvauksiin.

Jos haluat upottaa luomasi videon, sinun on ensin ladattava se videoalustalle, kuten YouTubetai Vimeo.

YouTube ei anna poistaa aiheeseen liittyviä videoita käytöstä, mutta voit määrittää aiheeseen liittyvien videoiden lähteeksi saman kanavan kuin viimeksi toistetulla videolla.

Tee näin:

1. Kopioi videon URL-osoite painamalla ctrl + C PC:llä tai command + C Macilla.

Vinkki

Jos teemanasi on Brooklyn tai Supply, voit kopioida videon upotuskoodin Youtube- tai Vimeo-palvelusta ja siirtyä vaiheeseen 7. Teema skaalaa upotetut videot automaattisesti.

1. Siirry Embed Responsively -palveluun. Embed Responsively on työkalu, josta saat parannellun upotuskoodin videollesi.

Huomaa

Joissakin iPhone-malleissa saattaa esiintyä toisto-ongelmia, jos laitteella katsotaan pystysuunnassa videoita, jotka on upotettu käyttämällä Embed Responsively -koodia.

1. Valitse Embed Responsively -palvelussa videosivusto, jossa video sijaitsee.

2. Liitä aiemmin kopioimasi videon URL-osoite Embed Responsively -palvelun Page URL (Sivun URL) -kenttään painamalla ctrl + V PC:llä tai command + V Macilla.

3. Klikkaa Upota. Embed Responsively luo sinulle upotuskoodin.

4. Jos video on peräisin YouTubesta ja haluat näyttää vain saman YouTube-kanavan aiheeseen liittyviä videoita, etsi videon URL-osoite upotuskoodista. Kopioi ja liitä ?rel=0 loppuun lainausmerkkien sisälle.

5. Kopioi kaikki Embed code (Upotuskoodi) -kentässä oleva koodi.

6. Klikkaa Shopify Adminissa rich text editorin Lisää video -painiketta.

7. Liitä upotuskoodi Lisää video -valintaikkunan kenttään.

8. Klikkaa Lisää video.

9. Kun olet valmis, tallenna muokatun kohteen muutokset klikkaamalla Tallenna.

Vinkki

Voit luoda upotuskoodin suoraan YouTube-palvelusta, mutta upotettu video ei skaalaudu yhtä hyvin eri kokoisille näytöille.

Äänitiedostojen lisääminen rich text editorin avulla

Rich text editorin avulla voit lisätä tai upottaa äänitiedostoja blogipostauksiin, sivuille, tuotekuvauksiin ja kokoelmien kuvauksiin.

Tee näin:

1. Valitse Shopify Administa Asetukset ja sitten Tiedostot.
2. Lataa lisättävä tai kauppaan upotettava äänitiedosto klikkaamalla lataa tiedostoja.
3. Avaa Verkkokauppa-osasta sen sivun tai blogipostauksen rich text editor, jossa haluat käyttää äänitiedostoa.
4. Upota soitin sivulle kopioimalla koodi <div id="player"><audio controls="controls"> ja liittämällä se rich text editoriin.

5. Kopioi seuraava koodi:

   • <source src="https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3" type="audio/mpeg" /></div>

6. Liitä tämä koodi rich text editoriin soittimen koodin perään ja korvaa sitten https://cdn.shopify.com/s/files/1/0220/2378/files/example.mp3 sillä URL-osoitteella, jonka loit äänitiedostolle, kun latasit sen Shopifyhin. Voit etsiä äänitiedoston URL-osoitteen milloin tahansa Tiedostot-sivulta.

7. Klikkaa Tallenna.

8. Klikkaamalla Näytä voit varmistaa äänitiedoston toimivan oikein.

Vinkki

Voit upottaa äänitiedostojen koodin suoraan Soundcloudista, mutta palvelun soitin ei välttämättä toimi oikein kaikilla laitteilla. Lisätietoja on Soundcloudin ohjekeskuksessa.

Sisäisten kommenttien lisääminen tai poistaminen rich text editorissa

Voit käyttää kommenttitunnisteita <!-- ja --> sisäiselle tekstille, jota et halua julkaista kaupassa.

Tee näin:

1. Klikkaa rich text editorissa Näytä HTML -painiketta.

2. Lisää sisäinen kommentti syöttämällä tunnisteet <!-- ja --> piilotettavana pidettävän tekstin ympärille. Esimerkiksi: <!--yourtext-->.

3. Klikkaa Tallenna.

Kommenttitunnisteiden sisällä olevat HTML-tunnisteet tallennetaan sisäisenä tekstinä. Jotta HTML-tunnisteet toimisivat oikein, sinun on poistettava kommenttitunnisteet <!-- ja --> niiden ympäriltä.