Osiot ja sivut

Sivu koostuu osioista, esimerkiksi herosta tai tuoterivistä.

Missä: Suunnittelutyökalun välilehdet Sections ja Pages.

#Lisää osio

Kolme reittiä avaa saman kirjaston:

• Add section osiolistassa tai välilehti Library. Osio sijoittuu valitun osion jälkeen ja tulee valituksi. Ilman valintaa se sijoittuu viimeiseksi.
• Kahden osion välissä työtilassa. Pidä osoitinta kahden osion välissä. Näkyviin tulee viiva ja plusmerkki. Napsauta plusmerkkiä. Kirjasto kertoo, mihin osio sijoittuu, esimerkiksi "Lands between Hero and Product grid".
• ⌘K › Add a section to this page.

Kirjastossa on hakukenttä ja kategoriat. Usean osion malli lisätään kokonaisena omassa järjestyksessään valitsemaasi kohtaan.

Uudessa osiossa ja mallissa on esimerkkiteksti kaupan kielellä: ruotsiksi, kun kaupan kieli on ruotsi, muuten englanniksi. Esimerkkiteksti ei lupaa mitään toimituksesta, palautuksista tai maksamisesta. Kirjoita omat ehtosi. Video ja somelinkit ovat tyhjiä, kunnes lisäät omat osoitteesi.

Kuvat valitset painikkeella Choose image, joka avaa mediakirjaston. Voit myös liittää osoitteen.

#Siirrä, kopioi ja poista

• Vedä riviä välilehden Sections listassa siirtääksesi osiota. Vain siellä voi vetää. Työtilassa valitulla osiolla on painikkeet ▲ ▼ Dup Del.
• ⋯ Actions valitulla rivillä avaa osion valikon. Rivin napsautus hiiren oikealla painikkeella avaa saman valikon. Rivillä on muuten vain merkki ON/OFF.
• Valikon Delete poistaa osion. Ilmoitus kertoo, mitä poistettiin, esimerkiksi "Removed Hero", ja siinä on painike Undo. Delete-näppäin tekee saman. Askelpalautin ei.
• Jokainen rivi on nimetty osion otsikon, nimen tai ensimmäisen tekstirivin mukaan.

Valikko ylhäältä alas:

Sivu ilman osioita näkyy suunnittelutyökalussa tyhjänä tekstin kera. Kauppa näyttää silloin vakiosivun.

#Tarkastelija

Osion napsautus avaa ensin kohdan Content: otsikon, tekstin, kuvan ja painikkeen tekstin. Tekstin kaksoisnapsautus muokkaa sitä työtilassa. ⏎ tallentaa ja Esc peruu. Muotoillun tekstin kaksoisnapsautus avaa sen sijaan tekstieditorin, katso Muotoiltu teksti.

Osiossa, jossa on paljon asetuksia, on neljä ryhmää:

Osio, jossa on vähän asetuksia, näyttää listan ilman ryhmiä. Selitykset ovat rivillä säätimen alla.

Open the deep inspector näyttää välilehden Design: värit, marginaalit, typografian, reunat, varjot ja oman CSS:n näyttökoon ja tilan mukaan. Valinta on voimassa istunnon loppuun. Osio, jossa on Width ja Per screen size, näyttää siellä leveyden ja sarakkeet viittauksena kohtaan Content. Oma CSS kohdassa Advanced ulottuu osioon kuten ennenkin. Leveys tai enimmäisleveys, jonka osion oma tyyli asetti aiemmin, näkyy siellä, kunnes poistat sen. Se ohittaa asetuksen Width.

#Leveys

Width on ensimmäisenä kohdassa Layout jokaisessa osiossa paitsi Spacerissa. Custom componentissa se on omassa paneelissa kohdassa LAYOUT yhdessä kohdan Show on kanssa. Text pages -pohjan osiossa Page text on sen sijaan Reading width, katso Sivupohjat.

• Leveyttä kapeammalla näytöllä sisältö on näyttö miinus sivumarginaali: puhelimessa 16 px, tabletilla 24 px ja tietokoneella 32 px.
• Leveys on sama kaikilla näytöillä. 1440 px leveällä näytöllä XL, 2XL ja Full näyttävät samalta.
• FAQ, Paragraph, Newsletter ja Form alkavat leveydestä XS, Callout leveydestä S ja Video leveydestä M. Kuvabanneri seuraa tyyliä: Boldissa Full ja Classicissa Page. Muut osiot alkavat leveydestä Page.
• Vanhalla leveydellä tallennettu kuvabanneri näyttää sen kentässä: Narrow on S ja Wide on 2XL. Mitään ei kirjoiteta uudelleen.
• Kun kuvabannerilla on oma leveys, painikkeiden alla oleva Follow the style (…) palauttaa tyylin leveyden. Myös vanha leveys poistuu.
• Videosoitin täyttää osion leveyden videon muodossa. Se ei ole koskaan korkeampi kuin 85 % näytöstä, joten leveä tai pystysuuntainen video voi olla osiota kapeampi.
• Kategoriasivun suodattimien vieressä olevassa sarakkeessa jokainen osio täyttää sarakkeen.

Kun osio on valittuna, työtila näyttää viivaimen ja sivumarginaalin. Katso Design ja variantit.

#Näyttökoon mukaan

Per screen size kohdassa Layout näyttää Desktop, Tablet ja Mobile rinnakkain. Mobile on enintään 640 px, Tablet 641–1024 px ja Desktop 1025 px:stä alkaen.

• Tyhjä arvo näkyy harmaana muodossa auto. Sarakkeet lasketaan arvosta Desktop: tabletilla enintään 3 ja puhelimessa 2. Testimonials, Collection list ja kaksisarakkeinen tuoteruudukko ovat puhelimessa yksisarakkeisia.
• Tyhjä korkeus seuraa viereistä näyttöä: Tablet seuraa arvoa Desktop ja Mobile arvoa Tablet.
• Oma arvo on musta. × auto palauttaa arvon auto.
• Viimeistä näyttöä kohdassa Show on ei voi kytkeä pois. Silmä välilehdellä Sections piilottaa osion kaikilla näytöillä.
• Kun ensimmäinen osio on piilotettu jollakin näytöllä, seuraava siellä näkyvä osio tulee sen paikalle: sen yläpuolella ei ole väliä, ja Full-banneri on heti ylätunnisteen alla.
• Kullakin näytöllä latautuvat ensin sen näytön ensimmäisen kuvia sisältävän osion kuvat. Jollakin näytöllä piilotetun osion kuvia ei ladata sillä näytöllä.
• Napsautus kohdassa Desktop, Tablet tai Mobile vaihtaa työtilan sinne, kuten ylärivin laitepainikkeet. Näytettävän näytön sarakkeella on musta kehys.
• Osio, joka on piilotettu näytettävällä näytöllä, on työtilassa harmaa kaistale. Sen voi valita. Preview ja kauppa eivät näytä sitä.

#Koko ja muoto

Jokaisessa asetuksessa on esivalintoja painikkeina. Custom ottaa oman arvon.

Asetus, jota et ole valinnut, näyttää osion oletuksen, ja sen nimen vieressä lukee default. Kun oletus tulee tyylistä, siinä lukee follows the style. Kun olet valinnut jotain muuta, Follow the style (…) palauttaa tyylin valinnan.

Virheellinen oma arvo ohitetaan. Osio käyttää silloin esivalintaa.

Tekstillisessä kuvabannerissa on myös Text align, Text position ja Button style. Text align on keskitetty tai vasemmalle tasattu tummalla liukuvärillä vasemmalta. Text position on Center, Top tai Bottom. Button style on Primary (teeman painikeväri), Light (valkoinen painike) tai Outline.

#Categories-osio

Osio Categories näyttää kategoriat ruutuina, joissa on kuva ja nimi, esimerkiksi otsikon "Shop by category" alla.

Missä: Valitse osio. Kenttä Categories on kohdassa What it shows.

• Yksi rivi kategoriaa kohden: kuva, nimi, ↑ ↓ ja ×. Rivien järjestys on järjestys kaupassa.
• + Add a category… lisää kategorian viimeiseksi. Luettelo näyttää koko puun. Alakategoria näkyy yläkategoriansa kanssa, esimerkiksi "Vaatteet › Takit". Valitut kategoriat on merkitty in the list, eikä niitä voi valita uudelleen. Kategoriat, joilla ei ole tuotteita kaupassa, on merkitty no products.
• × poistaa kategorian osiosta ja osion oman kuvan sille. ⌘Z kumoaa.
• Kun pidät osoitinta rivin päällä, kategorian ruutu saa työtilassa katkoviivakehyksen.

Tyhjä luettelo on automaattinen: ruutu Automatic näyttää kaikki ylimmän tason kategoriat, joilla on tuotteita, järjestyksessä kohdasta Products › Categories. Kategoria, jonka tuotteet ovat sen alakategorioissa, on mukana. Pick them myself tekee niistä rivejä, joita voit järjestää ja joille voit antaa omat kuvat. Jos valitset sen sijaan kategorian kohdasta Add a category…, osio näyttää vain sen.

Poistettu kategoria näkyy muodossa Not found, ja rivillä on vain ×. Jos muutat kategorian slugia hallinnassa, rivi seuraa mukana. Jos yhtäkään valituista kategorioista ei ole enää jäljellä, kauppa ei näytä osiota.

#Ruudun kuva

Rivi näyttää, mikä kuva ruudussa on:

• Change image avaa mediakirjaston. Valitsemasi kuva koskee vain osiota. Kategorian kuva ei muutu. Jos kategorialla ei ole kuvaa, painike on Choose image.
• ↺ Use category image poistaa osion oman kuvan.
• Osion omat kuvat ovat luonnoksessa ja tulevat näkyviin, kun julkaiset. Kategorian oman kuvan vaihdat kohdassa Products › Categories, katso Kategoriat. Se tulee näkyviin, kun tallennat, ja suunnittelutyökalu näyttää sen seuraavan kerran, kun se latautuu.

#Muotoiltu teksti

Rich text, Paragraph, osioiden Image + text ja Callout teksti, korttien teksti osiossa Cards sekä vastaukset osiossa FAQ ovat muotoiltua tekstiä. Niissä on sama editori kuin tuotekuvauksessa.

• Kaksoisnapsauta tekstiä työtilassa tai paina tarkastelijassa Edit text. Editori avautuu tekstin päälle.
• Työkalurivillä on otsikot, lihavointi, kursiivi, luettelot, linkit, kuvat, taulukot ja video. Kuvat tulevat mediakirjastosta.
• Linkki vie kohteeseen Product, Page tai Address. Tuotteen linkki seuraa tuotetta, kun tuotteen osoite muuttuu.
• Teksti tallentuu kirjoittaessasi. Done tai Esc sulkee editorin.
• Kun Advanced on päällä, editorissa on myös HTML-näkymä.

Ennen editoria kirjoitettu teksti näkyy kuten ennenkin. Siitä tulee muotoiltua tekstiä, kun muutat sitä editorissa ensimmäisen kerran.

#Kortit

Cards näyttää kortissa kuvan, otsikon, tekstin ja linkit. Käytä sitä pelaajille, henkilökunnalle, eduille tai palstoille.

1. Lisää Cards kirjastosta. Osiossa on valmiina kolme korttia.
2. Lisää kortteja painamalla tarkastelijassa Add card. Siirrä korttia vetämällä sen riviä.
3. Avaa kortin rivi ja paina Choose picture. Täytä Alt text, kun kuva kertoo jotain, mitä otsikko ei kerro.
4. Kaksoisnapsauta otsikkoa tai tekstiä työtilassa ja kirjoita. Teksti avautuu myös kortin rivin painikkeella Edit text.
5. Lisää linkit kohtaan Links: osoite ja teksti kullekin linkille, enintään 6.

Sarakkeet näyttöä kohden ovat kohdassa Layout › Per screen size, kuten muissa ruudukoissa.

Linkki Instagramiin, Facebookiin, TikTokiin, YouTubeen, LinkedIniin tai X:ään näkyy palvelun merkkinä, esimerkiksi IG. Muista linkeistä tulee painikkeita, joissa on linkin teksti. Tyhjä kortti ei näy kaupassa.

Osio Collection list ei ole enää kirjastossa. Sivulla jo oleva näkyy kuten ennenkin. Sen tarkastelijassa on Convert to Cards, joka tekee samoista kohteista osiot Heading ja Cards.

#FAQ

FAQ näyttää kysymyksiä. Kaupassa kysymyksen napsautus avaa sen vastauksen.

1. Lisää FAQ kirjastosta. Osiossa on valmiina kaksi kysymystä.
2. Lisää kysymyksiä painamalla tarkastelijassa Add question. Siirrä kysymystä vetämällä sen riviä.
3. Avaa kysymyksen rivi ja kirjoita kysymys kohtaan Question. Voit myös kaksoisnapsauttaa kysymystä työtilassa. Vastaus pysyy auki tai kiinni, kun kirjoitat.
4. Paina Edit answer. Vastaus on muotoiltua tekstiä, katso Muotoiltu teksti.

• Kysymys, jossa ei ole tekstiä, ei näy kaupassa.
• Rivi kysymystä kohden kirjoitettu FAQ, kysymys | vastaus, näkyy kuten ennenkin. Tarkastelija näyttää sen kysymykset, ja ensimmäinen muutos tallentaa ne listana.

#Tuotenosto

Product showcase näyttää yhden tuotteen tai valitsemasi listan: ison kuvan, hinnan, lyhyen tekstin ja painikkeen.

Lyhyt teksti on tuotteen Short description, muuten kuvauksen ensimmäinen kappale. Palkit ovat tuotteen Bar-ominaisuudet, kukin omalla asteikollaan, kuten tuotesivulla. Tuote, jolla ei ole Bar-ominaisuutta, näyttää vapaat ominaisuutensa Speed, Spin, Control, Power, Feel ja Hardness arvolla 0–100. Katso Ominaisuudet. Tyhjä Button label antaa tekstin Shop now, ruotsinkielisessä kaupassa Handla nu.

#Tausta

Jokaisella osiolla on Background välilehdellä Content. Se lisää osion taakse värillisen kaistan.

Värit tulevat kohdasta Theme › Colours. Kaista ulottuu aina näytön reunasta reunaan. Osion sisältö säilyttää leveytensä. Kaksi peräkkäistä osiota, joilla on sama tausta, muodostavat yhden kaistan. Kaupan pääväriset painikkeet saavat Brand-kaistalla kaistan värit toisin päin. Osio, joka ei näytä kaupassa mitään, ei saa kaistaa.

Välilehti Design näyttää osiolle tekstin Background: set in Content. Sinne aiemmin asetettu täyttö säilyy, kunnes painat Clear the old fill.

#Sivut

Välilehti Pages näyttää kaupan sivut. Ryhmän Templates pohjat avautuvat kuten Home, ja niissä on lukittuja osioita, katso Sivupohjat. Rivin ratas avaa sivun asetukset. Valikossa ⋯ on Duplicate ja Delete. Sivun luominen on kuvattu sivulla Design ja variantit.

#Mitä tallennetaan milloin

• Sivun osiot ovat teemaluonnoksessa ja julkaistaan, kun julkaiset.
• Sivun asetukset ovat voimassa kaupassa heti, kun muutat niitä. Paneeli kertoo, etteivät ne ole osa luonnosta.
• Asetusten rivi Menu muuttaa valikon linkkejä. Se odottaa julkaisua (Publish) kuten muukin ulkoasu.

Omalla sivulla olevat tuoteosiot, kuten tuoteruudukko, uutuudet ja myydyimmät, näyttävät samat tuotteet kuin etusivulla.

#Asetukset

Sivulla, jolla on osioita mutta ei asetuksia, on listassa painike Set up. Se antaa sivulle osoitteen ja tilan.

Varoitus: Ajastus ohjaa sitä, milloin sivu näkyy, ei sen sisältöä. Julkaise teema ennen ajankohtaa. Muuten näkyviin tulee tyhjä sivu.

#Poista sivu

Paina valikon ⋯ kohtaa Delete ja sitten ikkunan punaista painiketta. Enter ei vahvista. Poisto poistaa sivun, sen luonnoksen ja kaikki sen versiot.

#Sivukohtainen koodi

Paneelissa Code on sivun oma CSS, JS ja <head>-koodi. Paneeli näkyy, kun Advanced on päällä. Katso Oma CSS ja head-koodi.