https://peda.net/id/3cb45ed7a4c 2024-11-17T12:03:46+02:00 https://peda.net/:static/533/peda.net.logo.bg.svg <div class="license">Tämän sivun lisenssi <a rel="license" href="https://peda.net/info">Peda.net-yleislisenssi</a></div> https://peda.net/id/3cb5c17fa4c 2024-09-13T19:45:54+03:00 Hero-osio on verkkosivuston tärkein ja näkyvin alue, joka sijaitsee yleensä heti sivun yläosassa ja etusivulla. Se on ensimmäinen asia, jonka kävijät näkevät saapuessaan sivustolle, joten sen tehtävänä on tehdä vahva ensivaikutelma ja houkutella käyttäjät tutkimaan sivustoa lisää. Hero-osion pääelementit ovat usein suurikokoinen kuva, video tai grafiikka, jota täydentää houkutteleva pääotsikko, alaotsikko ja toimintakehote (call-to-action, CTA). 2024-11-17T12:03:46+02:00 https://peda.net/id/3cb666e4a4c 2024-09-13T18:26:36+03:00 <p>Hero-osion rakentaminen alkaa luomalla perusrakenne, johon voit lisätä eri elementtejä.</p> <ul> <li>Avaa verkkosivustosi Etusivu ja siirry editoriin.</li> <li>Klikkaa plus-kuvaketta (+) luodaksesi uuden osion.</li> <li>Valitse osionrakenteeksi Flexbox ja kaksi säiliötä.</li> <li>Vasemmalta paneelista muokkaa pääsäiliötä 700px (pikseli) korkuiseksi.</li> <li>Mene paneelista Tyyli &gt; Tausta &gt; Background Type &gt; Classic &gt; ja valitse värinpoimijasta haluamasi väri säiliölle.</li> </ul> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cb712e3a4c 2024-09-13T19:37:52+03:00 <p>Otsikko on keskeinen osa hero-osiota, ja sen tulee olla selkeä ja houkutteleva.</p> <ul> <li>Avaa vimpain-valikko vasemmalta.</li> <li>Vedä otsikko-vimpain sisäosioon.</li> <li>Kirjoita otsikko (<b>Otsake/Header</b>), kuten &quot;Markkinointi ratkaisut&quot; ja keskitä se Tyylit -asetuksista Tasaus &gt; Keskitys.</li> <li>Muokkaa otsikon tyyliä ja väriä Tyylit-välilehdellä vasemmalla, valitse väri ja fontti, joka on sinulle mieluinen, mutta jätä se kuitenkin pieneksi (näe esimerkkikuvia moduulin lopussa).</li> <li>Vedä otsikko vasemmanpuoleiseen säiliöön.</li> </ul> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cb8047ea4c 2024-09-13T19:40:54+03:00 <p>Johdanto: Otsikon alapuolelle lisättävä teksti antaa lisätietoja ja kontekstia hero-osioon.</p> <ul> <li>Klikkaa &quot;monista&quot; vimpaimesta joka sisältää otsikko -tekstiä.</li> <li>Lisää lyhyt kuvaus otsikon alle tekstinä, kuten &quot;Tutustu palveluihimme ja löydä sinulle sopiva ratkaisu.&quot;</li> <li>Valitse Sisältö osiosta HTML-tagiksi H1 (Header tagit menevät alhaalta ylös tärkeysjärjestyksessä ja tämä vaikuttaa esim. sivuston näkyvyyteen hakukoneissa joten yritä aina valita mahdollisimman sopiva HTML-tagi, esim. H1 tärkeille otsikoille, H2 alaotsikoille jne.)</li> <li>Muokkaa tekstin typografiaa Tyylit -välilehdellä ja tee siitä paksumpi ja isompi.</li> </ul> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cb8ca27a4c 2024-09-13T19:40:02+03:00 <p>Toimintopainike ohjaa kävijöitä sivuston tärkeille alueille, kuten yhteydenottosivulle.</p> <ul> <li>Vedä <b>Button</b> (painike)-vimpain tekstin alapuolelle.</li> <li>Kirjoita painikkeeseen teksti, esimerkiksi &quot;Lue lisää&quot;.</li> <li>Määritä painikkeen tyyli tyylit-välilehdellä. Voit myös määrittää painikkeen muita ominaisuuksia kuten värejä ja suurennusefektit.<strong><br/> </strong></li> </ul> 2024-11-17T12:03:46+02:00 https://peda.net/id/3cc05e60a4c 2024-09-14T20:26:36+03:00 <div class="main"> <div class="content enclose"> <p>Moni moduuli sisältää erillisen videonurkan. Löydät sen oikealta tietokonenäkymästä ja alhaalta mobiilinäkymästä. Videonurkan sisällöt ovat moduulin aiheeseen liittyviä ja tarjoavat syvällisiä katsauksia asiantuntijoilta. Nämä videot tarjoavat mahdollisuuden syventää ymmärrystäsi moduulin aihepiiristä,<span> </span><b>mutta niiden katsominen ei ole pakollista kurssin suorittamisen tai keskeisten asioiden oppimisen kannalta.</b><span> </span>YouTube-videot voidaan tarvittaessa kääntää myös kotimaisille kielille videon asetuksista.<br/> <br/> <br/> <b>Video &quot;hero&quot; -osiosta ja sen suunnittelusta:</b><br/> </p><div class="youtube"><iframe loading="lazy" width="640" height="360" src="https://www.youtube.com/embed/LJbkLdtEW00?rel=0&amp;modestbranding=1&amp;hl=fi" allowfullscreen="allowfullscreen"></iframe><div><a href="https://www.youtube.com/watch?v=LJbkLdtEW00" title="https://www.youtube.com/watch?v=LJbkLdtEW00" target="_blank" rel="nofollow ugc noopener">https://www.youtube.com/watch?v=LJbkLdtEW00</a></div> </div> <br/> <br/> <br/> <br/> <br/> <br/> <p></p> </div> </div> 2024-11-17T12:03:46+02:00