Hero-komponentit hubien aloitussivuilla
Hero-komponenttivaihtoehdot (kevääseen 2026 saakka)
Hero magazine -komponentti (versio tulossa keväällä 2026)
Hero magazine -komponentissa on suuri kuva ja tilaa otsikolle, tekstille ja linkeille. Kuten nimessä oleva "lehti" viittaa, komponentti antaa sivulle toimituksellisen tunnelman, jos käytössä on useampi kuin yksi osio. Kuvan asettelu vaihtelee automaattisesti oikealta vasemmalle. Voit myös valita taustavärin jokaiselle osiolle erikseen.
Katso esimerkkejä eri Hero magazine -variaatioista alla olevissa kuvissa.
Ohjeet
Voit luoda joko yhden Hero magazine -osion tai luoda jopa kolme osiota. Ole tarkka kuvien ja värivalintojen suhteen, jotta ne sopivat yhteen.
Kun haluat luoda uuden Hero magazine -komponentin tai muokata olemassa olevaa, käytä seuraavia kenttiä ja toimintoja halutun yhdistelmän luomiseksi. Jokainen kenttä valitaan/luodaan osiokohtaisesti:
- Otsikko (Title): Kirjoita osion otsikko
- Yhteenveto (Summary): Kirjoita yhteenveto, joka näkyy otsikon alla, enintään 140 merkkiä
- Kuva (Image): Valitse osiolle kuva. Paras kuva on sellainen, jossa tärkein sisältö on keskellä. Katso alla olevasta kuvasta ohje, miten kuva rajautuu erikokoisilla näytöillä (pöytäkone, tabletti ja mobiili).
- Linkin URL-osoite ja linkkiteksti: Voit lisätä enintään 4 linkkiä. Ne voivat olla joko sivuston sisäisiä linkkejä, jotka löydät kirjoittamalla ko. sivun nimen, johon haluat linkittää, tai voit liittää URL-osoitteen ulkopuoliseen sivustoon.
- Teema (Theme): Valitse yksittäisen osion taustaväri. Oletusarvoisesti osiot perivät Hubin brändivärin (Branding-kenttä), joka on valittu aivan muokkauslomakkeen yläosasta.
- Osioiden järjestyksen säätäminen komponentin sisällä: Kun useita osioita on lisätty, järjestystä voi muokata vetämällä osiot haluttuun järjestykseen. Tekstin ja kuvan järjestys (vasen tai oikea) määräytyy automaattisesti kohteiden järjestyksen perusteella.
Kuvasuhteet Hero magazinessa käytetyissä kuvissa
Käytä kuvitusta, jossa pääsisältö on kuvan keskellä. Huomioi, että pöytäkoneella kuva näytetään suhteessa 5:4, mobiililaitteilla kuvaa leikataan hieman ylhäältä ja alhaalta. Tablettikokoisilla näytöillä kuva on mukautuva ja voi tekstimäärästä riippuen leikkautua paljon pystysuorempaan muotoon.
Emme suosittele tekstin tai päivämäärien käyttöä kuvissa, vaan sisällyttämään ne otsikkoihin ja tekstiin.
Hub description
Ohjeet ja esimerkit
Komponentin valinnoissa on vain version valinta: Medium tai Large. Muut kentät täytetään sivun perustiedoissa (Basic information -osio).
Hubin nimi: Nimi näkyy sivun yläosassa. Nimi on tärkein sisältö hakukoneille.
Slogan: Slogan näytti aiemmin hubin otsikolta, ja on nyt kooltaan ja merkitykseltään toissijainen otsikko. Sen rooli on nyt täydentää hubin nimeä ja lisätä kontekstia. Slogan ei ole pakollinen ja sen voi jättää tyhjäksi.
Pääkuva: Kuva näkyy sivulla sekä nostoissa, kun hub-sivua linkitetään muualle aalto.fi:ssä.
Kuvaus (Description): Tämä on tekstiosio, joka näkyy sloganin alla molemmissa tämän komponentin versioissa. Voit lisätä linkkejä käyttämällä Link highlight -tyyliä saavuttaaksesi saman visuaalisen tyylin kuin esimerkeissä.
Huomaa, että Lead text -kenttä ei näy hub-sivulla.
Hero text with links
Tämä on yksinkertaisin hero-komponenttivaihtoehto. Taustaväri periytyy hubin Branding-kentän mukaisesti. Voit lisätä maksimissaan 4 linkkiä oikeanpuoleiseen sarakkeeseen täydentämään otsikkoa ja kuvaustekstiä. Linkit voi jättää myös tyhjäksi.
Ohjeet
Hubin nimi: Hubin nimi näkyy taustaväri-alueen yläpuolella, ja se lisätään hubin muokkaussivun Perustiedot-osioon.
Otsikko (Title): Tämä lisätään komponenttiin. Esimerkkikuvassa yllä fraasi "Maailmanluokan tutkimus, jolla on suuri vaikutus" on otsikko. Otsikko on pakollinen kenttä.
Kuvaus ( Listing description): Tämä teksti näkyy otsikon alla. Kuvausteksti on myös pakollinen.
Linkkien otsikko (Links heading): Jos haluat lisätä enemmän kontekstia linkeille, voit lisätä otsikon. Esimerkkikuvassa teksti "Tutkimus, jolla on suuri vaikutus" on tämä otsikko. Otsikko on valinnainen ja sen voi jättää pois.
Linkkikohtaiset kentät (max 4 linkkiä)
URL: Voit lisätä URL-osoitteen tai sisäisen linkin. Voit alkaa kirjoittamaan sen sivun nimeä, johon haluat linkittää.
Linkkiteksti: Tämä teksti näkyy sivuston vierailijoille. Jos lisäät linkin, linkkitekstin kirjoittaminen on pakollista. Se voi yksinkertaisesti olla sivun nimi, johon linkität.
Hero video
Ohjeet lisätään tälle sivulle pian. Sillä välin voit tutustua vanhaan ohjesivuun.
Brändivärit komponenteissa
Lisää brändivärejä, mukaan lukien koulujen värejä, sivujen ylätunnisteeseen ja tiettyihin komponentteihin. Brändivalinta on laajennettu koulujen värien käytöstä kattamaan myös pääbrändivärit.
Lisää Drupal-ohjeita
Komponentit: kuinka luot sisältöä?
Täältä löydät tietoa eri komponenteista ja siitä, miten niitä voi käyttää aalto.fi-sivustolla.
Liftups-komponentit
Eri liftup-komponenttien avulla voit luoda visuaalisia linkityksiä muuhun sisältöön tai lisätä sivullesi henkilöiden yhteystietoja.
Sosiaalisen median komponentit
Kaksi komponenttivaihtoehtoa nostaa esiin esimerkiksi koulusi sosiaalisen median kanavia: Social media simple tai Social media banner
Tekstikomponentit viestisi tehostamiseksi
Drupal-viestintäalusta tarjoaa monia vaihtoehtoja, joiden avulla korostaa ja visualisoida tekstiä. Lue lisää tekstinostojen ja lainausten hyödyntämisestä viestisi välittämisessä.
Quicklinks- ja Highlight quicklinks -pikalinkkikomponentit
Pikalinkkikomponentteja voi käyttää kiinnittämään huomiota tärkeimpiin eteenpäin linkkauksiin.
