Osioiden lisääminen, siirtäminen ja koon säätäminen vetämällä

Moduuli 3: Tekstit, kuvat ja osiot · Lukuaika: 10 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat rakentaa sivun osioista. Osaat lisätä osion valitsimella tai chatissa, siirtää, kopioida ja poistaa osioita, säätää välejä ja kokoja vetämällä sekä valita jokaiselle osiolle sarakkeet, kulmat, taustan ja näkyvyyden mobiilissa.

Keskeiset käsitteet: osio, Osiot, Lisää osio, muoto, Osio alapuolelle, kolme mallia, Tee tekoälyllä, Muokkaa osiota, Väli, Väli kohteiden välillä, Sarakkeet, Kulmat, Piilota mobiilissa, kahva, Oma HTML

Sivu on pino osioita

Sivustosi jokainen sivu koostuu osioista: vaakasuuntaisista kaistoista, jotka ovat allekkain. Ylimpänä on yleensä Hero (iso avaus, jossa on otsikko, teksti ja painike). Sen alla voi olla esimerkiksi Kortit palveluistasi, Arvostelut, Aukioloajat ja alimpana Yhteystiedot. Sivustoeditorissa on 35 osiotyyppiä, ja jokaisesta on yksi tai useampi muoto: sama sisältö eri tavalla aseteltuna.

Kun ajattelet sivua näin, rakennat paremman sivun. Laita tärkein tieto ylös, yksi aihe osiota kohden, ja lopeta siihen, mitä kävijän pitää tehdä (soittaa, lähettää sähköpostia, pyytää tarjous). Schildersbedrijf Examplen etusivu näyttää tältä: Hero, jossa on ”Pyydä tarjous”, Kortit kolmesta palvelusta, Kuva ja teksti työtavasta, Arvostelut, Kysymykset ja Yhteystiedot.

Osion lisääminen: kolme tapaa

1. Valitse itse valitsimesta (maksuton)

Avaa sivupalkista paneeli Osiot tai napsauta esikatselussa Osio alapuolelle. Painike on valitun osion työkalupalkissa ja myös +-merkityllä viivalla, joka tulee näkyviin, kun liikutat osoitinta kahden osion välissä. Esikatselun alla on lisäksi Lisää osio.

Valitsin näyttää osiotyypit ryhmissä: Suositut, Avaus ja otsikko, Teksti ja tarina, Palvelut ja tuotteet, Hinnat ja tarjoukset, Luottamus ja tiimi, Kuvat ja video, Käytännön tiedot, Yhteystiedot ja toimintakehotus ja Oma koodi ja widgetit. Mukana on hakukenttä (”Hae, esimerkiksi arvostelut, hinnat tai tiimi”). Näet jokaisen tyypin esikatseluna omassa ilmeessäsi. Napsauta tyyppiä nähdäksesi sen muodot ja valitse yksi painikkeella Lisää. Jos et tullut valitsimeen tietyn osion kautta, sivustoeditori kysyy ”Mihin ... lisätään?”: napsauta sivullasi vihreää viivaa tai valitse Alkuun tai Loppuun. Voit myös vetää osion suoraan paneelista sivullesi.

Tämä on maksutonta. Uusi osio tulee esimerkkiteksteillä, jotka muokkaat sen jälkeen itse (oppitunti 3.2) tai annat tekoälyn täyttää (oppitunti 3.1). Tärkeää: niin kauan kuin sivustollasi on tällaista esimerkkitekstiä, sivustoeditori ei julkaise sivustoasi. Saat silloin ilmoituksen ”Sivustollasi on vielä esimerkkitekstiä. Täytä se ensin tai poista osio.”

2. Pyydä chatissa: kolme mallia

Jos kirjoitat chattiin ”Haluan osion, jossa on työtapamme neljässä vaiheessa”, tekoäly näyttää ensin kolme sopivaa mallia osiokirjastosta omassa ilmeessäsi. Valitse painikkeella Tämä malli tai napsauta Anna tekoälyn valita. Sen jälkeen tekoäly täyttää osion sisällöllä ehdotuksena. Koska sivulle tulee uusi osio, tämä maksaa 2 muokkausta.

Jos sanot, että jotain pitää lisätä olemassa olevaan osioon (”laita aukioloajat yhteystieto-osioon”), tai mainitset palvelun, kuten Spotify tai Calendly, ja annat linkin, sivustoeditori ohittaa kolme mallia: silloin on selvää, mitä haluat.

3. Teetä oma osio

Eikö etsimääsi löydy? Valitsimen yläosassa on Tee oma osio tekoälyllä. Kuvaile, mitä kävijöiden pitää voida tehdä, esimerkiksi hintalaskuri tai lyhyt visa, ja napsauta Tee tekoälyllä. Se maksaa 2 muokkausta, koska sivulle tulee uusi osio.

Siirtäminen, kopioiminen ja poistaminen

Vie osoitin osion päälle. Näkyviin tulee työkalupalkki, jossa on Muokkaa tekoälyllä, Siirrä ylös, Siirrä alas, Monista, Osio alapuolelle ja Poista, sekä kahva, jolla osion voi vetää (”Vedä tämä osio toiseen paikkaan”). Kun valitset Poista, sivustoeditori kysyy ensin ”Oletko varma?”. Myös rivin yksittäisiä osia, kuten yhtä korttia tai yhtä arvostelua, voi vetää, monistaa ja poistaa.

Kaikki nämä painikkeet ovat maksuttomia. Jokainen toiminto luo uuden version (”Osio siirretty (versio ...)”), joten vahingossa poistetun osion saat takaisin kohdasta Versiot (oppitunti 3.5). Poistaminen chatissa annettavalla ohjeella sen sijaan maksaa muokkauksen, joten käytä painiketta.

Kokojen säätäminen vetämällä

Vie esikatselussa osoitin osion, kuvan tai tekstin päälle, niin näkyviin tulee kahvoja. Vetäminen on maksutonta, eikä siinä käytetä tekoälyä:

• Osion alareuna: enemmän tai vähemmän tilaa osion ylä- ja alapuolelle.
• Hero: korkeammaksi tai matalammaksi.
• Kuva: leveämmäksi tai kapeammaksi, korkeammaksi tai matalammaksi (muoto), pyöreämmät tai suoremmat kulmat sekä tarkennuspiste (oppitunti 3.3).
• Tekstilohko: leveämmäksi tai kapeammaksi (oikea reuna).
• Otsikko: suuremmaksi tai pienemmäksi sekä sen alla oleva tila.
• Korttirivi tai sarakkeet: koko rivin leveys.

Kaksoisnapsauta kahvaa, niin oletuskoko palaa. Herossa sivustoeditori valitsee silloin korkeuden taas itse.

Miksi vetäminen on parempi kuin pyyntö ”tee siitä isompi”: näet heti, mitä tapahtuu, se ei maksa mitään eikä tekoäly muuta samalla tekstejä.

Muokkaa osiota: yhden osion asetukset

Napsauta osiota ja valitse Muokkaa osiota. Avautuu ikkuna, jossa on:

Niiden alla ovat samat painikkeet kuin työkalupalkissa (Siirrä ylös, Siirrä alas, Monista, Osio alapuolelle, Poista), ja kohdan ”Tai pyydä tekoälyltä jotain muuta:” alla on tekstikenttä tekoälyohjeelle, joka koskee vain tätä osiota.

Muutama vinkki. Vaihtele taustoja (vaalea pinta, ei mitään, sävy), jotta kävijät näkevät, missä aihe päättyy. Käytä korttirivissä enintään kolmea tai neljää saraketta, koska puhelimessa ne asettuvat kuitenkin allekkain. Käytä Piilota mobiilissa -asetusta säästeliäästi: älä koskaan piilota yhteystietojasi tai mitään, mitä mobiilikävijä tarvitsee. Jos haluat tarkistaa, miltä sivu näyttää, valitse yläpalkista Puhelin.

Oma HTML

Ryhmässä Oma koodi ja widgetit on myös Oma HTML: osio, johon liität itse HTML:ää ja halutessasi CSS:ää. Kun osio on lisätty, muokkaat sitä osion painikkeella Muokkaa HTML:ää. Värit ja fontit noudattavat ilmettäsi muuttujien, kuten var(--acc), var(--tekst) ja var(--kop-font), avulla. CSS koskee vain tätä osiota.

Rajoitukset ovat tarkoituksellisia: skriptit, iframet ja lomakkeet eivät toimi tässä. Toisen palvelun soittimeen, kalenteriin, karttaan tai lomakkeeseen käytät Widgetiä (oppitunti 4.3). Oma HTML on niille, jotka osaavat HTML:ää. Kaikille muille tavalliset osiot ja tekoäly ovat nopeampi tie.

Sudenkuopat

• Esimerkkitekstin jättäminen valitsimesta lisättyyn osioon: silloin et voi julkaista sivustoa.
• Liikaa osioita. Pitkää, kymmenen osion sivua ei lueta. Poista se, mikä ei tuo mitään lisää. Sivulla voi olla enintään 40 osiota, mutta niin montaa et koskaan tarvitse.
• Välien säätäminen chatissa. Se maksaa muokkauksia ja on epätarkempaa kuin vetäminen.
• Katsominen vain tietokoneella. Sarakkeet, välit ja piilottaminen toimivat puhelimessa eri tavalla.
• Poistaminen chatissa, vaikka Poista-painike on maksuton.

Sivustoeditorissa: näin teet sen

1. Napsauta esikatselussa Osio alapuolelle tai avaa Osiot.
2. Valitse ryhmä, tyyppi ja muoto ja napsauta Lisää.
3. Korvaa esimerkkitekstit itse tai tekoälyn avulla.
4. Siirrä osiota painikkeilla Siirrä ylös ja Siirrä alas tai kahvalla. Monista tai poista työkalupalkista.
5. Säädä väliä vetämällä alareunasta. Kaksoisnapsauta palataksesi oletukseen.
6. Avaa Muokkaa osiota säätääksesi taustaa, sarakkeita, kulmia, heron korkeutta ja asetusta Piilota mobiilissa.
7. Tarkista näkymässä Puhelin.

Yhteenveto

• Sivu on pino osioita: 35 osiotyyppiä, joista jokaisesta on yksi tai useampi muoto.
• Lisääminen valitsimesta on maksutonta ja tuo esimerkkitekstiä, joka pitää korvata ennen julkaisua. Chatissa saat kolme mallia, ja se maksaa 2 muokkausta.
• Siirtäminen, monistaminen, poistaminen ja kokojen vetäminen ovat maksuttomia. Kahvan kaksoisnapsautus palauttaa oletuksen.
• Muokkaa osiota säätää taustan, välin, kohteiden välisen välin, sarakkeet, kulmat, heron korkeuden ja asetuksen Piilota mobiilissa.
• Oma HTML on mahdollinen, mutta ilman skriptejä, iframeja ja lomakkeita. Niitä varten on widget.

Tietovisa

Tehtävä

Tehtävä D3.4: Yksi osio lisää, yksi pois. Paranna etusivusi rakennetta painikkeilla ja kahvoilla ilman turhia tekoälyohjeita.

Tarkistuslista:

• [ ] etusivusi osiot kirjoitettu ylös ylhäältä alas;
• [ ] yksi osio lisätty valitsimesta ja kaikki esimerkkiteksti korvattu;
• [ ] yksi osio, joka ei tuonut mitään lisää, poistettu tai yhdistetty painikkeella Poista;
• [ ] yksi osio siirretty painikkeella Siirrä ylös, Siirrä alas tai kahvalla;
• [ ] vähintään yhden osion väliä säädetty vetämällä ja kerran palautettu kaksoisnapsautuksella;
• [ ] taustaa tai sarakkeita muutettu kohdassa Muokkaa osiota;
• [ ] sivu katsottu näkymässä Puhelin.

Kysymykset:

1. Millainen osioidesi järjestys oli ennen ja jälkeen, ja miksi valitsit tämän järjestyksen?
2. Minkä osion poistit, ja miksi kävijä ei nyt kaipaa sitä?
3. Montako muokkausta tämä tehtävä sinulle maksoi, ja mikä vaihe olisi chatissa maksanut muokkauksia?

Kun olet valmis, näet esimerkkivastauksen: järjestys Hero, Luvut, Kortit, Arvostelut, Yhteystiedot muuttui järjestykseksi Hero, Kortit, Kuva ja teksti (työtapa), Arvostelut, Kysymykset, Yhteystiedot, jotta palvelut ovat heti avauksen alla. Luvut-osio poistettiin, koska luvut olivat keksittyjä. Tehtävä maksoi 0 muokkausta, kun taas poistaminen tai uusi osio chatissa olisi maksanut 1 tai 2.

Lisälukemista

• Ilmainen kurssi Löydettävyys verkossa 3.2: Otsikot ja sivun rakenne
• Ilmainen kurssi Löydettävyys verkossa 4.2: Mobiili ensin ja viewport
• Sitebuilder ja AI Builder: kumman valitset ja miten avaat sen?