---
title: Listat
description: "Listoilla on helppo esittää tietoa jäsennellysti verkkosivulla. Listat tekevät lyhyestä sisällöstä helpommin luettavaa. Listan avulla tärkeän informaation saa selkeästi esille verkkosivulla. ## Listan lisääminen Listan lisäämisessä voi käyttää kahta erilaista listaelenttiä: **Lista** tai **Icon list**. ### Lista Jos kopioit suoraan…"
url: "https://ohjeet.helpotkotisivut.fi/ohje/listat/"
updated: "2026-03-04"
category: Lohkoelementit
---

# Listat

Listoilla on helppo esittää tietoa jäsennellysti verkkosivulla. Listat tekevät lyhyestä sisällöstä helpommin luettavaa. Listan avulla tärkeän informaation saa selkeästi esille verkkosivulla.

## Listan lisääminen

Listan lisäämisessä voi käyttää kahta erilaista listaelenttiä: **Lista** tai **Icon list**.

### Lista

Jos kopioit suoraan listan esimerkiksi Wordistä, ilmestyy se sivuille peruslistaelementillä. Valitse tämä listaelementti, jos et halua listan ulkoasua erikseen muokata.

![Lista](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2022/06/lista.jpg)

### Icon list

Icon list on nimensä mukaisesti listaelementti ikoneilla.

![Icon list](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2022/06/icon-list.jpg)

Kirjoita haluamasi tekstit listaan. Enter-näppäimellä lisäät listaan aina uuden listakohteen.

![](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2022/06/image-5.png)

#### Icon listan tyylien muokkaaminen

Koko Icon List -elementti valittuna (ei yksittäinen List item), voit muokata koko listan ikoneita ja tyylittelyä sivupalkin asetuksista.

![Listan muokkaaminen 1](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2022/06/listan-muokkaaminen-1.jpg)

Sivupalkin **General-välilehdellä** voit säätää listan pastojen (List Columns) määrää ja palstojen välistä väliä (List Column Gap).

**List Vertical Spacing -kohdasta** voit säätää riviväliä listakohteiden välissä.

**List Horizontal Icon and Label Spacing -kohta** taas säätää väliä ikonin ja tekstin välissä.

**Icon Align -kohdassa** voit halutessasi säätää ikonin asettelua suhteessa tekstiin.

![Listan muokkaaminen 2](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2022/06/listan-muokkaaminen-2.jpg)

Sivupalkin **Style-välilehdellä** voit säätää listan ulkoasua ja vaihtaa ikonia.

**Icon Styling -kohdasta** voit vaihtaa listan ikonimerkkiä ja **Icon Size -kohdasta** sen kokoa. (Voit asettaa yksittäiselle listakohteelle oman ikonin valitsemalla yksittäinen **List item** aiemmin valitun Icon List -elementin sijasta.)

**Icon Color -kohdassa** voit määrittää ikonin värin.

**Text Styling -kohdassa** voit halutessasi muuttaa listan tekstityyliä, jos haluat esim. asettaa listat pienemmällä fonttikoolla.

![Listan muokkaaminen 3](https://ohjeet.helpotkotisivut.fi/wp-content/uploads/2022/06/listan-muokkaaminen-3.jpg)

## Listan tyylin kopioiminen

Jos sinulla on sivuillasi useampi Icon lista käytössä, voit helposti kopioida ja liittää loppuihin listoihin tyylin, jonka olet asettanut jo valmiiksi yhteen listaelementtiin. Lue tarkemmin: [**Tyylien kopioimisesta**](https://ohjeet.helpotkotisivut.fi/ohje/tyylien-kopioiminen/).