Komponentit: kuinka luot sisältöä?

Täältä löydät tietoa eri komponenteista ja siitä, miten niitä voidaan käyttää aalto.fi-sivustolla. Tämä tekstin osa on ingressi/johdanto (Lead text). Ingressi on lyhyt ja ytimekäs sisällön esittely, joka näytetään artikkelin alussa.

"Text paragraph" -komponentti

Text paragraph on komponentti leipätekstille. Leipäteksti voi sisältää seuraavia muotoiluja:

"Title" = Otsikko h2

"Subtitle" = Alaotsikko h3

Normaalia tekstiä boldattuna ja linkit. Linkit voidaan esittää myös linkkiä korostavalla tyylillä, jolloin linkin alle tulee pieni sininen viiva = link highlight style

Taulukko (taulukon otsikko)
Ensimmäinen solu (otsikkorivi) Toinen solu (otsikkorivi)
Kolmas solu Neljäs solu
Viides solu Kuudes solu
  • Listaus
  • Kaksi
  1. Numerolista
  2. Kaksi

Lainaus eli "Quote" -komponentti

Lainauksia voidaan käyttää nostamalla esiin yksittäinen ajatus tai lause. Lainauksen tulee olla lyhyt, esim. yksi lause, joka on maksimissaan 120 merkkiä välilyönteineen. Lainaus voi sisältää kuvan. Alla näet vaihtoehtoja lainauksesta ilman kuvaa ja kuvan kanssa. 

Tämä on lainaus ilman kuvaa

Lainauksen lähde eli usein nimi, titteli ja organisaatio
Aalto University / donate

Tämä on lainaus kuvan kanssa

Lainauksen lähde eli esimerkiksi henkilön nimi, titteli ja organisaatio

Korostukset eli "Highlights"-komponentti

Highlights-komponentteja voidaan käyttää samalla tavalla kuin lainauksia, eli "Quotes"-komponentteja.

Molemmat komponentit ovat hyviä tapoja painottaa jotain artikkelin asiasisältöjä. Higlights-komponenteissa teksti on lyhyt kuten lainauksissa, maksimissaan 120 merkkiä välilyönteineen. Alla näet esimerkkejä molemmista vaihtoehdoista. Huomaathan, että Hihglight-komponenttia ei käytetä otsikointiin, vaan niihin käytetään Drupalissa valmiiksi tyyliteltyjä otsikoita. Näin siksi, että hakukoneet etsivät sisältöä vain edellä mainituista otsikkotyyleistä.

"Listing"-komponentti

Listing-komponentti on tekstikomponentti, johon voi kirjoittaa kategorioita/otsikoista ja niistä lisätietoja. Komponentissa on kaksi esitystapaa: haitari (accordion) tai tuplakolumni (double column). Accordion-versiossa tekstit näkyvät menuna, josta käyttäjä voi klikata eri kategorioita ja nähdä lyhyen kuvauksen kyseisestä aiheesta. Double column -versiossa kaikki tieto näkyy käyttäjälle suoraan ilman klikkaamista. Kategoria näkyy vasemman puoleisessa kolumnissa ja otsikko oikean puoleisessa. Voit editoida näiden kategorioiden otsikoita, kuvaustekstejä, linkkejä ja linkkitekstejä. Alla on esimerkki Listingista, jossa on kaksi eri kategoriaa, molemmilla esitystavoilla. Nämä molemmat tekstit voivat sisältää perinteistä tekstin muotoilua.

Listing (double column) ensimmäinen kategoria

Kuvaus ensimmäiselle asialle.

Toinen kategoria

Kuvaus toiselle asialle.

Kuva tekstilllä eli "Image with text" -komponentti

Image with text -komponentilla voit esittää sisältöä visuaalisesti.

Image with text -komponentissa kuvan voi sijoittaa joko vasemmalle tai oikealle. Suositeltavaa on, että kuvien sijoittelua käytetään sivuilla vuorotahdissa, eli esimerkiksi ensin vasemmalla, sitten oikealla ja taas vasemmalla jne.

Three students working on laptops in the Design Factory kitchen / photo by Aalto University, Unto Rautio

Kuva oikealla

Tämä on Image with text -komponentti, jossa kuva on oikealla.

Three students working on laptops in the Design Factory kitchen / photo by Aalto University, Unto Rautio

Kuva vasemmalla

Tämä on Image with text -komponentti, jossa kuva on vasemmalla.

Yksittäinen kuva eli “Single Image” -komponentti

“Single image”-komponenttia voidaan käyttää silloin kun halutaan lisätä kuva leipätekstin keskelle. ”Single Image” ei sisällä tekstiä, ainoastaan kuvan ja mahdollisen kuvatekstin.

“Single Images” -komponentit näyttävät samalta kuin alla oleva kuva.

Example of single image

Artikkelisivulla kuvilla on kolme eri kokovaihtoehtoa: Large, Medium ja Extra Large.

Alla oleva kuva esittää sitä, miten koot eroavat toisistaan.

Example of single image sizes

Mediagalleria eli “Media Gallery” -komponentti

“Media Gallery” -komponentti on tapa näyttää kuvia galleriassa. Tämä komponentti sisältää gallerian kuvauksen, jonka lisäksi jokaisella kuvalla voi olla oma kuvateksti. Alla esimerkki galleriasta.

"Media Slider" -komponentti

“Media Slider” -komponenttia voidaan käyttää kun halutaan esittää monta kuvaa tai tekstiä yhden tietyn aiheen tai otsikon alla. Komponentin vasemmalla puolella sijaitsee teksti ja oikealla puolella kuva. Sisältöä voidaan selata nuolen kärjistä.

Slidereilla on kolme tapaa esittää sisältöä: small, medium ja large. S-koko sovittaa valitun kuvan automaattisesti ympyrän muotoon. M-koko taas jättää alkuperäisen kuvan muodon ympyrän sisään . L-koko esittää kuvat ilman ympyrää.

Alla voit nähdä esimerkit slidereideista eri koissa: small, medium ja large.

Slider - small
Tämä on Slider-komponentti koolla: Small.
Media slider - medium
Tämä on Slider-komponentti koolla: Medium.
Example of Slider: large
Tämä on Slider-komponentti koolla: Large.

Videoklippi eli “Video Clip” -komponentti

Video clip -komponentilla artikkeliin voidaan yhdistää videoita niin ulkoisista kuin sisäisistäkin lähteistä.

Alla esimerkki videoklipistä.

Liitteet eli “Attachments” -komponentti 

Artikkeleihin voi lisätä liitteitä käyttäen "attachments"-komponenttia. Tiedostolle antamasi nimi "Name" näkyy noston yhteydessä. Alla esimerkki liitteestä.

Liftups-ohjeistus ja esimerkkejä

Liftup-komponenttien esittely yhdessä paikassa. Ota ne omaksesi ja paranna niiden avulla sisältöjesi näkyvyyttä ja visuaalisuutta.

Click to guidelines
Screenshot of the different components used as liftups at aalto.fi

"Manual liftups" -komponentti

“Manual liftups”-komponenttia voidaan käyttää, kun halutaan samaan aikaan esittää monta asiaa joko HUBin etusivulla tai sisältösivulla. ”Manual liftup” sisältää kolme esitystapaa: small, medium ja accordion.

Small-kokoa käytetään kun halutaan esittää pelkkä tekstilinkki. Medium-koossa näkyvät myös kuva ja lyhyt esittelyteksti. Accordionia, eli haitaria tulee käyttää linkeille, joilla on edellistä pidemmät esittelytekstit.

Manual liftupin haitari on lähellä listingin-komponentin.haitaria, mutta esittää linkkien lisäksi nostettujen artikkelien pääkuvat.

Alta näet kaikki kolme esitystapaa.

Manual liftup: small -koko

Liftup eli nosto.

Mikä on Platform?

Platform-yhteistyöalustat tukevat monialaista ja tieteidenvälistä tutkimusta ja opetusta Aalto-yliopiston tutkimuksen avainalueilla. Platformit järjestävät vuosittain useita teematapaamisia, jotka tarjoavat sidosryhmille ja Aalto-yliopiston tutkijoille mahdollisuuksia yhteistyöhön ja verkostoitumiseen.

People discussing

Aalto Digi Platform

Digi Platformin ydin on digitaalisuus, ja sen fokusalueisiin kuuluvat nousevat teknologiat, digipalvelut, big data sekä robotiikka niin tieteissä, taiteissa kuin liiketoiminnassakin.

Aalto University / CYBER / kuva: Aki-Pekka Sinikoski

Aalto Living+ Platform

Living+ tukee monitieteellistä tutkimusta ihmislähtöisistä elinympäristöistä, joka on yksi Aalto-yliopiston keskeisistä tutkimusalueista.

Aalto Living+ Platform banner image including the title Living+.

Aalto Health Platform

Health Platform tukee ja kehittää Aalto-yliopiston terveyden ja hyvinvoinnin alan toimijoiden ja Aallon yhteistyötä tieteen, tekniikan, muotoilun ja liiketoiminnan aloilla.

An Aalto pen lying on the page of a study book, students working in the background / photo by Aalto University, Aino Huovio

Manual liftup -komponentin näyttömuoto medium

Manual liftups -komponentin näyttömuotoa medium on editoitu, jotta komponentti esittää siihen valitut linkkinostot oikeassa suhteessa. Tämä komponentin editointi myös pienentää siinä hyödynnettyjen linkkinostojen väliin jäävää tilaa, sillä nostot täyttävät medium-näyttömuodossa olevan taustatilan mahdollisimman hyvin. Ks. alla olevat esimerkit.

Manual liftup: medium -koko, teema: –None–

Liftup eli nosto

People discussing

Mikä on Platform?

Platform-yhteistyöalustat tukevat monialaista ja tieteidenvälistä tutkimusta ja opetusta Aalto-yliopiston tutkimuksen avainalueilla. Platformit järjestävät vuosittain useita teematapaamisia, jotka tarjoavat sidosryhmille ja Aalto-yliopiston tutkijoille mahdollisuuksia yhteistyöhön ja verkostoitumiseen.

Tutkimus ja taide
Aalto University / CYBER / kuva: Aki-Pekka Sinikoski

Aalto Digi Platform

Digi Platformin ydin on digitaalisuus, ja sen fokusalueisiin kuuluvat nousevat teknologiat, digipalvelut, big data sekä robotiikka niin tieteissä, taiteissa kuin liiketoiminnassakin.

An Aalto pen lying on the page of a study book, students working in the background / photo by Aalto University, Aino Huovio

Aalto Health Platform

Health Platform tukee ja kehittää Aalto-yliopiston terveyden ja hyvinvoinnin alan toimijoiden ja Aallon yhteistyötä tieteen, tekniikan, muotoilun ja liiketoiminnan aloilla.

Aalto tutkimusyhteistyö

Tutkimusyhteistyö ja innovaatiot

Tutkimusyhteistyö käynnistyy usein yhteisprojektista, mutta se voi myös kasvaa pitkäjänteiseksi strategiseksi kumppanuudeksi.

Yritysyhteistyö
Väre / aula / kuva: Mikko Raskinen

Väre

Väre-rakennus sijaitee osoitteessa Otaniementie 14, ja se kokoaa kaikki Taiteiden ja suunnittelun korkeakoulun laitokset saman katon alle. Rakennuksen aukioloajat ovat: ma-to klo 7.45-21.00, pe 7.45-20.00, la 9-17, su suljettu

Toimipisteet

Manual liftup: medium -koko, teema: Dark

Liftup eli nosto

People discussing

Mikä on Platform?

Platform-yhteistyöalustat tukevat monialaista ja tieteidenvälistä tutkimusta ja opetusta Aalto-yliopiston tutkimuksen avainalueilla. Platformit järjestävät vuosittain useita teematapaamisia, jotka tarjoavat sidosryhmille ja Aalto-yliopiston tutkijoille mahdollisuuksia yhteistyöhön ja verkostoitumiseen.

Tutkimus ja taide
Aalto University / CYBER / kuva: Aki-Pekka Sinikoski

Aalto Digi Platform

Digi Platformin ydin on digitaalisuus, ja sen fokusalueisiin kuuluvat nousevat teknologiat, digipalvelut, big data sekä robotiikka niin tieteissä, taiteissa kuin liiketoiminnassakin.

Aalto Living+ Platform banner image including the title Living+.

Aalto Living+ Platform

Living+ tukee monitieteellistä tutkimusta ihmislähtöisistä elinympäristöistä, joka on yksi Aalto-yliopiston keskeisistä tutkimusalueista.

An Aalto pen lying on the page of a study book, students working in the background / photo by Aalto University, Aino Huovio

Aalto Health Platform

Health Platform tukee ja kehittää Aalto-yliopiston terveyden ja hyvinvoinnin alan toimijoiden ja Aallon yhteistyötä tieteen, tekniikan, muotoilun ja liiketoiminnan aloilla.

Aalto-yliopisto/Aino Huovio

Aalto CareerWeb – rekrytoi opiskelija

Autamme työnantajia tavoittamaan Aalto-yliopiston opiskelijoita julkaisemalla työ- ja harjoittelupaikkoja sekä opinnäytetyö- ja projektitoimeksiantoja.

Palvelut
Environmental Engineering. Photo: Mikko Raskinen/ Aalto University

Kestävä kehitys

Aalto-yliopisto on sitoutunut edistämään kestävää kehitystä osana tutkimusta ja opetusta. Kestävä kehitys on avaintekijä myös kampuksen kehittämisessä ja muussa yliopiston toiminnassa.

Hakijapalvelut_aalto_yliopisto_kuva_pinssit

Hakijapalvelut

Täältä löydät lisätietoa Aalto-yliopiston hakijapalveluista.

Näytös18 - image of the university's fashion show of 2018. Models walking on the catwalk with the audience sitting on either side of it./ Photo: Mikko Raskinen

Aalto-yliopiston näkemykselliset nuoret osaajat näyttävät maailmalle, minne muotiala on menossa

Kevään muotitapahtumat ovat vakiinnuttaneet asemansa maailman muoti-, vaatetus- ja tekstiilialoilla.

Uutiset

IT-palvelut

Aallon IT-pavelut on palveluyksikkö, joka tukee yliopiston toimintaa tukemalla käyttäjien tarpeita koskien informaatiojärjestelmiä, verkostoja ja IT-laitteita läpi Aallon.

Palvelut

Manual liftup: medium -koko, teema: Bright

Liftup eli nosto, jossa vain yksi sisältötyyppi, joka on tässä esimerkissä Uutiset-hubi.

Artwork in Dipoli. Photo by Aalto University / Mikko Raskinen

Uutiset

Aalto-yliopiston julkaisemat uutiset.

Manual liftup haitari, eli “Accordion”

Liftup eli nosto.

Automaattinen uutisnosto eli "automatic news liftup"-komponentti

  • Valitse komponentti: "Add content: automatic news liftup"

  • Täytä "Category", "Primary tags" ja "Relates to" -kentät oikeiden uutisteemojen valitsemiseksi.

  • Lopuksi paina "Save"

  • Sivulta löytyy nyt kaikki uutisartikkelit valittujen tägien/suodattimien mukaisesti

  • Jos relevantti uutisartikkeli puuttuu, saattaa siitä puuttua informaatiota (category / primary tags / secondary tags / relates to)

Alla olevassa esimerkissä automaattinen uutisnosto näyttää ainoastaan uutisartikkelit, jotka liittyvät “Collaboration” HUBiin. Toisin sanoen tämä automaattinen nosto näyttää ainoastaan uutiset, joiden yhteydessä on valittu "Relates to" Collaboration HUB.

Screenshot of the article lift-up component example showing four images side-by-side with lead text.
aalto.fi / automatic news article liftup, relates to

Automaattinen tapahtumanosto eli "automatic events liftup"-komponentti

  • Valitse komponentti: "Add content: automatic events liftup"
  • Täytä "Category", "Primary tags" ja "Relates to" -kentät oikeiden tapahtumien valitsemiseksi
  • Lopuksi paina "Save"
  • Sivulta löytyy nyt kaikki tapahtumat valittujen tägien/suodattimien mukaisesti
  • Jos relevantti tapahtuma ei näy, saattaa siitä puuttua informaatiota (category / primary tags / secondary tags / relates to)

Paluu Aalto.fi-ohjeisiin

 

Article liftup - events

Sosiaalinen media eli “Social media” -komponentti

Social media -komponentti sisältää otsikon, pienen tekstin ja ulkoiset URLit sosiaalisen median kanaviin. Voit editoida otsikkoa ja tekstiä, jotta se sopii parhaiten juuri sinun sivullesi. Esimerkit alla:

"Social media title", eli otsikko: Seuraa meitä

"Horizontal divider" -komponentti

"Horizontal divider" -komponenttia voidaan käyttää jakana, kun halutaan esimerkiksi erottaa kaksi leipätekstiä toisistaan, eli "Horizontal divider":in voi sijoittaa esimerkiksi kahden "Text paragraph":in väliin. Alla oleva viiva on esimerkki "Horizoltal divider"-komponentista.

Pikalinkit eli “Quicklinks” -komponentti

Pikalinkkejä voidaan käyttää kun halutaan korostaa sivun tärkeimpiä linkkejä. Komponentti sisältää otsikon, linkit ja lyhyen kuvaustekstin. Lisäksi voit lisätä kuvia linkkeihin.

Kun käytät pikalinkkejä, käytä aina kolmea linkkiä. Komponentti ei toimi, jos käytät enemmän tai vähemmän kuin kolmea linkkiä. Käytä tätä komponenttia vain yhden kerran yhdellä sivulla. Alla olevista esimerkeistä voit nähdä esimerkkejä komponentin käytöstä.

Ikonit (keltaiset pikkukuvat) löytyvät valmiiksi aalto-fi -sivustolta. Lisää kuva "quicklink item" -kohdasta, josta löydät kaikki ikonivaihtoehdot kirjoittamalla hakukenttään "icon". Tällä hetkellä sivustolla on valittavissa 30 erilaista ikonia.

"Single liftups" -komponentti

Single liftup -komponentin avulla voidaan nostaa toiselta sisäiseltä sivulta kuva ja johdantoteksti. Single liftupilla on kolme erilaista esitysmuotoa: small, medium ja large. Alla olevista esimerkeistä näet kaikki vaihtoehtoiset koot.

Screenshot of how to display content with the Single liftup component.

"Automatic research outputs"-komponentti

Tätä komponenttia voi käyttää, jos haluaa tuoda sivulle tutkimusryhmän julkaisuja (research outputteja).

Ohjeet löydät täältä

"HUB description" -komponentti

HUB description esittelee HUBin tekstipätkällä ja kuvalla. Sillä on kaksi kokovaihtoehtoa: medium ja large. Tätä komponenttia voi käyttää vain hubeissa. Alla oleva kuva esittelee kaksi koko vaihtoehtoa.

Example of HUB description component: medium
Example of HUB description component: large

Hero magazine eli pääkuvan käyttö

Hero magazine -pääkuvaa käytetään ainoastaan aalto.fi etusivulla ja koulujen aloitussivuilla.

Tekstiosuus pidetään lyhyenä, tiiviinä ja tavoitteellisena.

Hero Magazine

People liftups

Jos haluat lisätä tietyn tutkimusryhmän jäsenet sivuille, katso ohjeet:

Tutkimusryhmä: kuinka luot sivun?

Laitoksen henkilöstölistaus 

Laitoksen henkilökunnan henkilölistaus on helppo tehdä People liftups -komponentilla.
Tässä esimerkki siitä, kuinka se tehdään:

  1. kirjaudu Aalto People -palveluun ja etsi ko. laitoksen sivu
  2. kopioi URLista ID-numero (ks. alla oleva kuva) ja kopioi siitä numero: 47178
example – People liftups, departments

3. Lisää aalto.fi-sivulla komponentti People liftups ja ID-nro sille varattuun kenttään: Aalto People organisational unit ID.

example 2 – people liftups, departments

4. Lopuksi tallenna ja henkilölistaus on valmis, kuten alla olevassa kuvassa.

Huom. Jos henkilöllä on henkilöprofiili sekä ACRIS- että Aalto People -tietokannoissa, henkilön tiedot noudetaan ACRIS-tietokannasta. ACRIS-tietoja voi editoida vain ko. henkilö itse, Aalto People -tiedot liittyvät HR-tietohin.

example 3 – people liftups, departments

Lisää henkilöitä yksitellen

Voit lisätä Aalto-yliopiston henkilöstön tietoja sivuille myös yksitellen, jos heidän tietonsa löytyvät Aalto People -tietokannasta. Käytä People Liftups -sisältökomponenttia, klikkaa "Select profiles", kirjoita etsimäsi henkilön sukunimi ja paina "Apply". Valittuasi henkilön voit lisätä myös muita aaltolaisia.

Tutustu aaltolaisiin:

Robert Salven

Robert Salven

Viestintäpalvelut
Viestintäpäällikkö
Jaakko Salavuo

Jaakko Salavuo

Viestintäpalvelut
Viestintäjohtaja
Kati Hagros

Kati Hagros

Tietotekniikkapalvelut
Chief Digital Officer
Tätä palvelua tarjoaa:

Viestintäpalvelut

Löysitkö tästä tarvitsemasi tiedon? Jos et, ota meihin yhteyttä.
  • Julkaistu:
  • Päivitetty:
Jaa
URL kopioitu