Ohjeita sisällönsyöttäjälle

Huom! Tätä sivua ei ole tarkoitettu julkaistavaksi ja se on tallennettu luonnoksena.

Lue myös Rakennusohjeet sisällöntuottajille -ohje (keskeneräinen) 4H-akatemian rakennusohjeet sisällöntuottajille.docx (aukeaa OneDriveen)

Otsikot (tämä on otsikko 2)

Käytä aina otsikkotyylejä, jos kyseessä on otsikko. Älä käytä Otsikko 1 -tyyliä, koska se on tarkoitettu vain sivun pääotsikoksi.

Otsikko 3

Otsikko 4

Lista

Lista voi olla ”pallolista” tai numeroitu. Yhdessä listassa voi olla vain joko palloja tai numeroita.

• pallo
• pallo

1. yksi
2. kaksi
3. kolme

Nostot

Nostoja voi tehtä eri tavoin. Elementtien nimet ovat työkaluissa aika saman tapaisia: Nosto, sisältönostot, nostoelementti.

Nosto

Sisältönostot

Tällä voi nostaa esiin tehtäviä, koulutuksia tai sivuja.

Tehtävät nostetaan esiin ympyränä! Koulutukset nostetaan esiin suorakulmana!

Nostoelementti

Lomakkeet

Lomakkeet tehdään ENSIN lomaketyökalulla, jonka jälkeen valmis lomake upotetaan sivulle, koulutukseen tai tehtävään. Valmis lomake lisätään GRAVITY FORMS -työkalulla.

Kuvan lisääminen lomakkeeseen

HTML koodi:

<figure class="gform_image">
<img loading= "lazy" src="verkko-osoite" alt="Kirjoita tähän kuvaus kuvan sisällöstä" />
</figure>

Hae kuvan osoite: mediakirjasto → valitse kuva ja avaa sen hallinta
→ klikkaa ”Kopioi verkko-osoite leikepöydälle”
→ Liitä verkko-osoite html koodin kohtaan src=” ”
Huom! verkko-osoitteen täytyy sisältää myös https:// alkuosa
Huom! varmista että osoite on heittomerkkien sisällä.
→ Kirjoita kuvalle alt-teksti kohtaan alt=” ”
Huom! Alt-teksti ei tule tässä tapauksessa automaattisesti kuvan hallinnasta.
Huom! Varmista, että tekstisisältö on heittomerkkien sisällä.
Huom! Itse tekstisisältö ei voi sisältää heittomerkkejä.
Jos kyseessä on tunnista kuvasta tehtävä, saavutettavuuden kannalta alt-teksti on kirjoitettava niin,
että se sisältää tarpeeksi vihjeitä tunnistamista varten tekstimuodossa.

Gravityforms linkin muuttaminen nappulaksi visan vahvistuskentässä

Luo tekstieditorin graafisessa näkymässä linkki
Vaihda tekstieditori teksti näkymään
Lisää teksti class=”button” linkin koodiin heti tekstin <a perään ennen kohtaa href=
Tallenna

esim.
<a class="button" href="https://4h-akatemia.fi/testisivu/">Kokeile uudelleen</a>

Linkki lomakkeeseen

Annan luvan käyttää tietojani tietosuojaselosteen mukaisesti. Lisää ennen linkkisanaa koodinpätkä <a href=”verkko-osoite”/”> ja lisää keskelle haluamasi osoite.

Siis näin: <a href=”https://4h-akatemia.fi/4h-akatemian-nettisivujen-tietosuojaseloste/”>

Taulukot

Taulukkoon olisi mahdollisuuksien mukaan hyvä lisätä otsikkorivi. Otsikkorivin voi lisätä, kun taulukko elmentti on valittuna, vasemman reunan valikosta täppäämällä kohta Otsikkorivi

Tämä on oikein tehty eli otsikkorivi lisätty:

Osaava kerhonohjaaja	Osaava kerhonohjaaja 4H-toiminnassa
0,5 op	0,5 op
7 opetustuntia eli 1 päivä	7 opetustuntia eli 1 päivä

Tässä esimerkikssa ei ole otsikkoriviä vaan tekstit on vain tummennettu markkaamaan otsikkoa. Tämä ei riitä ruudunlukulaitetta käyttäville, sillä se ei ole silloin teknisesti oikein tehty ja koodi muodostuu eri tavalla.

Opintopisteet	Opetustunnit	Oppijan työmäärä	EQF-taso
0,5 op	6 h	13,5 h	3
		laskennallisesti	viittellinen, ei tutkinto

Tiedostot

WP:ssä maksimikoko tiedostoille on 1.5mb, joten suosittelen pienentämään PDF-tiedostoa esim. Small PDF-työkalun avulla. Tässä linkki mitä itse olen käyttänyt vastaavissa tilanteissa: https://smallpdf.com/compress-pdf (Päivi Red&Bluelta)

Kuvat ja linkit

Tässä alla olevassa esimerkissä ongelma on se että kuvaan on lisätty linkki. Tällöin ruudunlukulaite lukee linkin tilalla kuvan alt-tekstin ja se saattaa aiheuttaa sekaannusta

Tässä on vaihtoehtoinen selkeämpi toteutustapa jossa linkki on kuvan sijasta lisätty kuvatekstiin kuvan alle

Galleria on yksi mahdollisuus lisätä kuvia

• 

• 

• 

• 

Videot

YouTube -video näkyy upotettuna, kun videon osoitteen kopioi tekstikenttään omaan lohkoon. https://www.youtube.com/watch?v=TamQ__rdCyo&t=26s

https://www.youtube.com/watch?v=TamQ__rdCyo&t=26s