> ## Documentation Index
> Fetch the complete documentation index at: https://foliant-help.iforiti.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Vaihda visuaalisen tilan ja koodin välillä

> Muunna koodipohja lohkoiksi, muokkaa visuaalisen pohjan koodia ja katso, mitä työllesi tapahtuu, kun vaihdat takaisin.

Jokainen pohja on pohjimmiltaan Liquidia ja HTML:ää. **Visuaalinen**-editori rakentaa koodin puolestasi lohkoista ja asiakirjan tyyleistä. **Koodi**-editori näyttää itse koodin. Vaihdat tilaa editorin yläreunan **Visuaalinen**- ja **Koodi**-välilehdillä. Foliant ei koskaan hävitä koodia, kun vaihdat tilaa: kaikki, mitä se ei pysty muuttamaan tavalliseksi lohkoksi, säilytetään **Mukautettu Liquid** -lohkona.

## Ennen kuin aloitat

**Visuaalinen**-välilehden saatavuus riippuu tilauksestasi. Jos tilauksesi ei sisällä sitä, välilehdellä näkyy tilaus, johon se kuuluu, ja koodieditori toimii tavalliseen tapaan. Katso [Visuaalisen editorin saatavuus tilauksittain](https://foliant-help.iforiti.com/fi/template-editor/visual-editor-plans.md).

## Muunna koodipohja lohkoiksi

1. Avaa pohja editorissa. Se avautuu **Koodi**-tilassa.
2. Napsauta **Visuaalinen**-välilehteä. **Muunna visuaaliseksi** -ikkuna avautuu.
3. Valitse, miten aloitat:

| Vaihtoehto | Mitä tapahtuu |
| - | - |
| **Aloita lohkoasettelusta** | Valitse **Asettelu** (esimerkiksi **Lasku**, **Lähetyslista** tai **Palautuslomake**) ja napsauta **Käytä lohkoasettelua**. Nykyinen koodisi korvataan tällä asettelulla. Ennen tallennusta **Hylkää** palauttaa koodisi. Tallennuksen jälkeen se säilyy versiohistoriassa. |
| **Säilytä koodini Mukautettu Liquid -lohkona** | Napsauta **Säilytä koodini**. Koodisi säilyy, ja voit lisätä uusia lohkoja sen ympärille. Foliant muuttaa tunnistamansa osiot (kuten ylätunnisteen, osoitteet, tuotetaulukon tai summat) tavallisiksi lohkoiksi, kun ne tulostavat samat tilauksen tiedot. Kaikki muu säilyy paikallaan Mukautettu Liquid -lohkoina. |

4. Tarkista sivu ja tallenna.

Tarjolla olevat asettelut riippuvat pohjasta: yksi asiakirja tilausta kohden (Lasku, Hyvityslasku, Tarjous, Lähetyslista, Palautuslomake, Kauppalasku, Ostotilaus, Yleinen tilausasiakirja, Lähetystarra, Kuitti) tai yksi asiakirja kaikista valituista tilauksista (Keräilylista, Tilausyhteenveto). Kun käytät jonkin asiakirjatyypin asettelua pohjassa, jolla ei ole tyyppiä, pohja saa tämän tyypin. Esimerkiksi laskuasettelulla tehty pohja numeroidaan laskuna.

## Näytä tai muokkaa visuaalisen pohjan koodia

1. Napsauta visuaalisessa pohjassa **Koodi**-välilehteä. Näet kohdan **Käännetty Liquid**: koodin, jonka Foliant luo lohkoistasi ja asiakirjan tyyleistä. Sitä voi vain lukea.
2. Jos haluat muuttaa sitä, napsauta **Muokkaa koodia**. Siitä lähtien koodieditori on käytössä, ja tallennus tallentaa koodisi.
3. Kun tallennat, Foliant lukee lohkot takaisin koodistasi, joten pohja pysyy visuaalisena.

Voit myös avata yksittäisen lohkon käännetyn koodin: valitse lohko ja napsauta sen **Sisältö**-välilehdellä **Näytä käännetty Liquid**.

## Vaihda takaisin visuaaliseen tilaan koodin muokkauksen jälkeen

Napsauta **Visuaalinen**-välilehteä. Foliant lukee lohkot koodistasi:

* Lohkot, joiden koodia et muuttanut, palaavat ennalleen.
* Jos osa koodista ei enää vastaa lohkoaan tai se on kirjoitettu minkään lohkon ulkopuolelle, **Vaihdetaanko takaisin visuaaliseen tilaan?** -ikkuna luettelee nämä osat kohdassa **Mukautettuna Liquidina säilytetyt osat** syineen:
  * **Muokattu koodi**: lohkon koodi muuttui, joten siitä tulee Mukautettu Liquid -lohko.
  * **Kirjoitettu lohkojen ulkopuolelle**: uutta koodia, jonka lisäsit lohkojen väliin.
* Jatka napsauttamalla **Vaihda visuaaliseen tilaan** tai jatka koodin muokkausta napsauttamalla **Pysy Liquidissa**.

Mitään ei poisteta, ja voit kumota vaihdon. Sinun täytyy korjata koodivirheet ennen kuin voit vaihtaa tilaa.

## Korvaa pohja aloituspohjalla

Yläpalkin **Korvaa aloituspohjalla…** korvaa kaiken editorin sisällön aloituspohjalla tai designilla. Aloituspohjat ovat koodipohjia, joten visuaalisesta pohjasta tulee koodipohja. Mikään ei muutu ennen kuin tallennat, ja **Hylkää** palauttaa aiemman sisällön.

## Hyvä tietää

* Mukautettu Liquid -lohkoja voi siirtää, muotoilla ja niille voi asettaa ehtoja kuten muillekin lohkoille. Niiden koodi tulostuu täsmälleen kirjoitetussa muodossa.
* Muunnos tehdään pohjakohtaisesti, ja vain silloin, kun valitset sen.
* Ostetusta designista tehdyt pohjat käyttävät design-editoria, eikä niitä voi vaihtaa tässä visuaaliseen tilaan tai koodiin.

## Aiheeseen liittyvät artikkelit

* [Avaa pohjaeditori](https://foliant-help.iforiti.com/fi/template-editor/editor-overview.md)
* [Muokkaa pohjan koodia](https://foliant-help.iforiti.com/fi/template-editor/code-editor.md)
* [Lohkojen opas](https://foliant-help.iforiti.com/fi/template-editor/block-catalogue.md)
* [Visuaalisen editorin saatavuus tilauksittain](https://foliant-help.iforiti.com/fi/template-editor/visual-editor-plans.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.