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

Esimerkkinosto

Käytä nostoa, jos haluat nostaa yhden asiaan esiin.

Sisältönostot

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

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

Esimerkki 2

Pitkähiuksinen nainen, jolla vaalenaruskea paita. Olkapäällä pehmopupu. Pinkki tausta.

Osaava kerhonohjaaja 1 op

Puuhailetko mielelläsi lasten kanssa? Oletko idearikas ja innostava? Oletko ehkä itse käynyt kerhoa ja haluaisit nyt jatkaa kerhonohjaajana? Tule kerhonohjaajakoulutukseen!

Lue lisää

Tapahtumatuottajavalmennus 8 op

4H-tapahtumatuottajavalmennus on sinulle, joka haluat oppia järjestämään itse tapahtuman!

Lue lisää

Nostoelementti

Lapsi istuu pöydän ääressä ja kirjoittaa. Aikuinen on vieressä. Molemmilla on valmoinen safkasankarit t-paita.

Nostoelementillä voi nostaa 1-3 asiaa esiin

Taustaväri voi olla valkoinen tai värillinen

Kaksi lasta kukkakedolla. He hymyilevät ja pitävät käsissään metallitölkistä askarreltuja lyhtyjä

Nostossa voi olla linkki

Palautteen antaminen

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 op0,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.

OpintopisteetOpetustunnitOppijan työmääräEQF-taso
0,5 op6 h13,5 h3
laskennallisestiviittellinen, 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

Oranssilla pohjalla lukee Ajokortti työelämään ja alla 4H logo
Pyöreä tapahtumatuottaja-osaamismerkki, jossa kalenterin kuva
4H-yhdistyksen puheenjohtaja

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