Saavutettavuus

Koulutuksen sisältö

Tässä koulutuksessa opetetaan käyttämään WordPressin tarjoamia perus työkaluja, joilla voidaan luoda ja muokata sivuja sekä blogeja.

Taito United on kehittänyt kuusi erilaista räätälöityä komponenttia, joilla voidaan toteuttaa sivustoille uniikit ulkoasut. Näitä ovat: ZigZag wrapper, Image swiper, Video wrapper, Box swiper, Clickable card, Content box ja Text.

Tämän sivun tarkoituksena on toimia koulutuksen aikana eri komponenttien ja niiden asetusten esittelysivuna sekä koulutuksen jälkeen muistinvirkistyksenä.

ZigZag wrapper. ZigZag wrapperillä voidaan toteuttaa erilaiset sahalaitakuviolliset taustat palvelussa. Wrapperi on luonteeltaan suorakulmio, jonka ylä- ja alasahalaidat voidaan erikseen määrittää sen asetuksista. Sen lisäksi sen taustaväri on muutettavissa heksadesimaaliarvon tai väripaletin mukaan. Wrapperin koko on muutettavissa säätämällä top padding ja bottom padding -arvoja, joilla määritetään wrapperin korkeutta venyttäen joko ylä- tai alalaitaa.

Alla on esitettynä ZigZag wrapper kahdella eri taustavärillä. Vihreässä on havaittavissa tekstisisältöä. Pastillin sinisessä on esitettynä Image swiper, jota käyttäjä voi hiirellä tai mobiilissa sormella selata vaakasuunnassa sisällön selaamiseen. Imae swiperista lisää ZigZag wrapperin jälkeen.

Wrapperi tarjoaa käyttäjälle mahdollisuuden täyttää wrapperin sisusta millä tahansa editorin komponentilla. Sen voi lisätä helposti painamalla plussakuvaketta tyhjän sisustan valinnan jälkeen tai tässä tapauksessa olemassa olevan tekstin takia painamalla Enter-näppäintä.

Alla on esitetty Image swiper

Seuraavaksi on vuorossa on Video wrapper, jolla voidaan tehdä sivustolle sellaisia videoupotuksia, joilla on taustavärillä varustettu otsikko. Taustaväri, tekstin väri, lihavointi ja kursivointi ovat otsikolle käytettävissä.

Video wrapper on lisäyksen jälkeen tyhjä: sille tulee lisätä oikeaan alareunaan ilmestyvän plussapainikkeen avulla asianomainen mediantoistokomponentti. Työkalun avulla voidaan etsiä upotukset -kohdasta asianomainen media, esim. YouTube, jonka voi nähdä esimerkki Video wrapperin alapuolella.

Tältä tämä näyttää alkuun ilman upotusta

Mitä itsetunto on?

Seuraavaksi esittelemme Box swiperin. Tällä työkalulla voidaan luoda etusivulla esiintyviä vedettäviä laatikoita, joita käytetään yhtenä sivunavigoinnin tukena. Box swiperin asetuksista voidaan määritellä: mitä kahta eri väriä käytetään ruudukon värjäämisessä, käytetäänkö mobiilinäkymässä kahdella vai yhdellä rivillä laatikoita, kuinka monta laatikkoa esitetään kerralla ja mistä sivukategoriasta linkit laatikoille tuodaan. Jokaista laatikkoa voidaan mieltää yhdeksi sivuksi, jonka asetuksista haetaan sen kyseisen sivun kuvake esitettäväksi laatikon sisällä.

Seuraavaksi esittelemme Clickable card -komponentin, jolla voidaan tehdä kortin näköisiä laatikoita, jotka ovat taustakuvalla, otsikolla ja kuvauksella varustettuja, klikattavia linkkikortteja. Komponentin asetuksista voidaan määrittää otsikon väri, taustakuva ja linkki, mihin kortin klikkaus vie. Linkkiä kirjoitettaessa on muistettava kirjoittaa linkki https:// alkuisesti!

Seuraavaksi esittelemme Content boxin. Se toimii tekstilaatikkona, jolle on annettu valmiiksi nätti laatikkomainen esitys, missä sisältö on laatikkoon nähden keskitetty. Laatikolle voidaan antaa useita eri parametrejä asetuksissa: laatikon väriä voi vaihtaa, sen koko neljässä eri suunnassa voidaan muuttaa ja sen sijaintia sivulla voidaan neljässä eri suunnassa myös muuttaa.

Tässä on tekstiä

Viimeinen räätälöity komponentti on Text-komponentti. Sen avulla voidaan luoda tekstisisältöä sivulle pienellä poikkeuksella; enter-painike ei poista käyttäjää komponentista.

Tässä on Text-komponentti. Se on tekstinkirjoittamista varten, tosin enter painikkeella
ei poistuta komponentista. Tämä komponentti tuo enemmän varmuutta sellaisille tilanteille, missä liitetään pitkiä leipätekstejä, joissa esiintyy rivinvaihtoja. Tulevaisuudessa tällä komponentilla tullaan mitä todennäköisimmin luomaan esim. valmiita otsikkopohjia

Alla esitetään lisähuomioita ja muita kohtia

Sivustolla saatetaan haluta jakaa sisältö palstoihin ja esittää rinnakkain sisältöä. Rinnaikkainesitys voidaan saavuttaa käyttämällä advanced column -komponenttia, minkä jälkeen käyttäjä voi itse valita suhteen komponenttien tilankäytölle toisiinsa nähden. Suosittelemme käyttämään kahden palstan suhteissa arvoja 65 / 35.

Tässä on tekstiä yhdellä palstalla. Tässä on tekstiä yhdellä palstalla. Tässä on tekstiä yhdellä palstalla. Tässä on tekstiä yhdellä palstalla.

<em>Mitä on itsetunto?</em>

Tässä on tekstiä toisella palstalla. Tässä on tekstiä toisella palstalla. Tässä on tekstiä toisella palstalla. Tässä on tekstiä toisella palstalla.

Linkin saa lisättyä tekstieditorin pienestä työkalupalkista Nyyti ry

Vasen palsta

Oikea palsta

Mitä on itsetunto?

Kuvan voi lisätä käyttämällä image-komponenttia. Huomioittehan kuvia lisätessänne, että Alt text (alternative text tai vaihtoehtoinen teksti) on lisättävä kuvalle joko sen lisäämisen yhteydessä tai komponentin asetuksista. Kyseessä on saavutettavuuteen liittyvä vaatimus kuville.

Saavutettavuus

Joillain sivuilla voi esiintyä laatikkomaisia välilehtiä. Välilehtiä voidaan luoda käyttämällä Tabs-komponenttia. Tyyliksi valitkaa ensimmäinen vaihtoehto. Tabs komponentissa on useita asetuksia. Ensiksi, valitkaa Content Settings ja asettakaa molemmissa värivaihtoehdoissa värien kohdalla alpha-väri 0. Tämä asettaa taustan ja rajat läpinäkyviksi. Alpha-väri on se arvo, jonka kohdalla lukee A (väripaletissa näkyy Hex, R, G, B ja A).

Tämän jälkeen asetetaan Tab Title Color Settings -pudotusvalikosta väriarvot välilehdille normal, hover ja active, aloittaen normalista. Normalille asetetaan musta, valkoinen, musta. Hoverille ja activelle annetaan valkoinen, musta ja musta. Muistakaa jokaisen yksittäisen välilehden päivityksen jälkeen painaa Update ja poistua asetuksista ennen toisen vaihtamista. Muuten asetukset eivät tallennu. Tämä on valitettavasti WordPressin ongelma.

Näiden asetusten jälkeen voitte muuttaa välilehtien otsikkoa ja kirjata jokaisen otsikon alle omaa sisältöä. Voitte pienestä sinisistä valinnoista välilehtien yläpuolella vaihtaa otsikoiden keskinäistä järjestystä tai poistaa otsikon.

Saavutettavuus

Tämä kuva näkyy vain ensimmäisen välilehden ollessa auki

Tämä teksti näkyy vain toisessa välilehdessä

Tämä video on vain kolmannelle välilehdelle

Tässä ensimmäinen palsta

Tässä toinen palsta