OHJEARTIKKELI

Kuinka käyttää HTML-lohkoeditoria MultiLipi-visuaalisessa editorissa

MultiLipi
MultiLipi•27. lokakuuta 2026•
5 min lue
Kuinka käyttää HTML-lohkoeditoria MultiLipi-visuaalisessa editorissa
Edistynyt visuaalinen muokkausLähdetiedostojen muutoksia ei vaadita

MultiLipin HTML-lohkoeditori antaa sinulle rakenteellisen hallinnan käännetyille verkkosivuille suoraan visuaalisen editorin sisällä. Korvaa olemassa oleva merkintäkieli, lisää lokalisoidut bannerit ja toimintakehotteet, piilota lohkoja yhdeltä kieleltä ja käytä tallennettuja HTML-pätkiä uudelleen työnkulussasi.

Tämä on hyödyllistä, kun käännetty sivu vaatii muutakin kuin tekstimuutoksen – esimerkiksi markkinakohtaisen kampanjan, lokalisoidun toimintakehotteen, erilaisen osiorakenteen tai sisältöä, jonka tulisi näkyä vain yhdelle kohderyhmälle. Jos olet uusi tässä työtilassa, aloita MultiLipi-visuaalisen editorin oppaasta ja käännöseditorin yleiskatsaus.

Mitä opit

1Avaa HTML-lohkoeditori
2Valitse oikea verkkosivun elementti
3Selaa elementtihierarkiaa
4Korvaa olemassa oleva HTML-sisältö
5Lisää HTML-koodia elementin eteen tai taakse
6Piilota lohkoja yhdeltä kieleltä
7Luo ja käytä uudelleen tallennettuja koodinpätkiä
8Esikatsele, tallenna ja palauta turvallisesti

1. Mikä on HTML-lohkoeditori?

Rakenteellinen hallinta tietylle käännetylle kielelle ja sivulle.

HTML-lohkoeditori on edistynyt ominaisuus MultiLipi-alustan visuaalisessa editorissa. Sen sijaan, että muutokset rajoittuisivat näkyvään tekstiin tai CSS-tyyleihin, voit muokata valitun elementin HTML-koodia erillisen paneelin kautta.

  • Korvaa englanninkielinen osio täysin mukautetulla hindinkielisellä osiolla.
  • Lisää lokalisoitu mainosbanneri tuotekuvauksen eteen.
  • Lisää markkinakohtainen toimintakehote (CTA) olemassa olevan kappaleen jälkeen.
  • Piilota osio, joka ei ole merkityksellinen tietylle kieliryhmälle.
  • Käytä samaa mainosmerkintää uudelleen useilla käännetyillä sivuilla.
OminaisuusMitä se tekee
KäännäMuuttaa käännettyä tekstiä valitussa sisällössä
TyyliSäätää valitun elementin visuaalista esitystapaa
HTML-lohkoKorvaa, lisää tai piilottaa kielikohtaisen HTML-koodin
Mukautettu CSSSoveltaa CSS-pohjaisia esitystavan muutoksia

2. Avaa HTML-lohkoeditori

Valitse kieli, kohdista elementti ja avaa sen HTML-hallintatyökalut.

1
Kirjaudu sisään MultiLipi-koontinäyttö-palveluun, avaa kyseinen verkkosivustoprojekti ja käynnistä visuaalinen editori.
2
Valitse haluamasi käännetty kieli. Tarkista kielenhallinta or käytettävissä olevat kielet jos kieltä ei ole vielä määritetty.
3
Vie hiiri verkkosivun esikatselun päälle ja valitse tarkka elementti, jota haluat mukauttaa. MultiLipi saattaa tunnistaa sen muodossa DIV, H1, P, tai SPAN.
4
Valitse HTML kelluvassa työkalupalkissa. Tyylieditori avautuu siten, että HTML-lohko välilehti on aktiivinen.
MultiLipi Visuaalinen editori, jossa verkkosivun elementti on valittuna ja Käännä-, Tyyli- ja HTML-toiminnot ovat näkyvissä

MultiLipi Visuaalinen editori, jossa verkkosivun elementti on valittuna ja Käännä-, Tyyli- ja HTML-toiminnot ovat näkyvissä

Kuva 1.1 — Visuaalinen editori: valittu verkkosivun elementti, jossa on Käännä-, Tyyli- ja HTML-toiminnot.

Kelluva työkalupalkki erottaa sisällön kääntämisen, visuaalisen tyylin ja HTML-rakenteen toisistaan. Käytä Tyyli-toimintoa tai seuraa mukautetun CSS:n opasta, jos haluat tehdä vain esitystapaan liittyviä muutoksia; käytä HTML-toimintoa, kun itse merkintäkieltä on muutettava.

MultiLipi HTML-lohkoeditori, joka näyttää valitun elementin, HTML-sisältökentän sekä Esikatselu- ja Tallenna HTML -ohjaimet

MultiLipi HTML-lohkoeditori, joka näyttää valitun elementin, HTML-sisältökentän sekä Esikatselu- ja Tallenna HTML -ohjaimet

Kuva 1.2 — HTML-lohkoeditori: valittu elementti, HTML-sisältökenttä ja tallennusohjaimet.

3. Käyttöliittymän ymmärtäminen

Lue nykyinen tunniste, välilehdet, hierarkia ja ylätason laajuus ennen muokkaamista.

01

Elementin tunnistaminen

Valittu tunniste – kuten DIV tai H1 – näkyy paneelin yläosassa.

02

Editorin välilehdet

Visuaalinen-välilehti hoitaa tyylittelyn, HTML-lohko-välilehti hoitaa merkintäkielen ja Mukautettu CSS -välilehti hoitaa esitystapasäännöt.

03

Elementin hierarkia

Murupolku, kuten html > body > main > div, näyttää valitun elementin sijainnin.

04

Ylätason navigointi

Ylätason navigointi siirtää valinnan ulospäin sisältävään elementtiin, kun tarvitset laajemman laajuuden.

4. Ymmärrä HTML-muokkaustoiminnot

Valitse, korvataanko sisäpuoli vai lisätäänkö merkintöjä valinnan viereen.

MultiLipi HTML-lohkon toimintojen pudotusvalikko, joka näyttää vaihtoehdot Korvaa sisäinen sisältö, Lisää ennen elementtiä ja Lisää elementin jälkeen

MultiLipi HTML-lohkon toimintojen pudotusvalikko, joka näyttää vaihtoehdot Korvaa sisäinen sisältö, Lisää ennen elementtiä ja Lisää elementin jälkeen

Kuva 1.3 — HTML-lohkon toimintojen pudotusvalikko: korvaa sisäinen sisältö, lisää ennen ja lisää jälkeen.

4.1 Korvaa sisäinen sisältö (innerHTML)

Tämä korvaa valitun elementin lapset säilyttäen samalla ulomman valitun elementin. Se on oikea valinta otsikon korvaamiseen, sisältölohkon uudelleenrakentamiseen tai erilaisen lokalisoidun esitystavan luomiseen.

HTML
<!-- Alkuperäinen valittu säiliö -->
<div>
  <h2>Tervetuloa myymäläämme</h2>
  <p>Tutustu uusimpiin tuotteisiimme.</p>
</div>

<!-- Uusi sisäinen HTML -->
<h2>Tervetuloa myymäläämme</h2>
<p>Tutustu uusimpiin tuotteisiimme.</p>

4.2 Lisää ennen elementtiä

Lisää mukautetun merkinnän välittömästi valinnan eteen poistamatta sen olemassa olevaa sisältöä. Käytä tätä lokalisoiduille ilmoituksille, johdannoille, kampanjabannereille tai markkinakohtaisille selityksille.

HTML
<div class="localized-banner">
  <p>Erikoistarjouksia suomalaisille asiakkaillemme</p>
</div>

4.3 Lisää elementin jälkeen

Lisää merkinnän välittömästi valitun elementin jälkeen. Se toimii hyvin yhteystietopainikkeille, aiheeseen liittyvälle sisällölle, tuotesuosituksille ja lokalisoiduille toimintakehotuksille.

HTML
<div class="localized-cta">
  <a href="/contact/">Ota yhteyttä tiimiimme</a>
</div>

5. Muokkaa HTML-koodia käännetyn verkkosivun sisällä

Syötä kelvollinen merkintä, tarkista tulos ja tallenna tuetun työnkulun kautta.

1
Valitse otsikko, kappale, säilö tai muu elementti, jota haluat muokata.
2
Avaa HTML-lohko kelluvasta työkalupalkista tai Tyylieditori-välilehdeltä.
3
Valitse Korvaa sisäinen sisältö, Lisää ennen elementtiä tai Lisää elementin jälkeen.
4
Syötä tai muokkaa merkintää HTML CONTENT -kentässä.
5
Napsauta Esikatselu ja tarkista typografia, välistys, asettelu, linkit ja responsiivinen toiminta.
6
Napsauta Tallenna HTML ja varmista sitten, että tallennettu muutos näkyy sivun esikatselussa.
HTML
<div class="custom-section">
  <h2>Tervetuloa globaalille alustallemme</h2>
  <p>
    Tutustu tuotteisiimme ja palveluihimme
    haluamallasi kielellä.
  </p>
</div>

Yleisiä elementtejä ovat otsikot, kappaleet, säiliöt, span-elementit, korostukset, linkit ja listat. Määritä terminologia, jonka tulisi pysyä johdonmukaisena käännöksissä, käyttämällä MultiLipi sanastosääntöjä sen sijaan, että tekisit manuaalisia HTML-muutoksia toistuvasti. Käytä kuvien ja visuaalisen lokalisoinnin kohdalla erillistä mediakäännösten työnkulkua.

6. Piilota lohko tietyltä kieleltä

Poista markkinoiden kannalta epärelevantti sisältö yhdestä käännetystä versiosta.

The Piilota tällä kielellä ohjaus piilottaa valitun lohkon vain parhaillaan muokattavalta kieleltä. Tämä voi olla tarkoituksenmukaista markkinakohtaisen tarjouksen, saatavilla olevan tuotteen tai vaihtoehtoisen lokalisoidun esittelyn kohdalla.

1
Avaa käännetty verkkosivu visuaalisessa editorissa.
2
Valitse elementti tai pääsäiliö, jonka haluat piilottaa.
3
Avaa HTML-lohko-välilehti.
4
Ota käyttöön Piilota tällä kielellä.
5
Tallenna ja tarkista tulos samassa kieliversiossa.

7. Luo ja hallitse uudelleenkäytettäviä HTML-pätkiä

Tallenna toistuva merkintätapa kerran ja valitse se sitten koodinpätkäkirjastostasi.

Uudelleenkäytettävät HTML-koodinpätkät tarjoavat WPCode-tyylisen kirjaston toistuville bannereille, ilmoituksille, toimintakehotuksille (CTA), tuotelohkoille ja mukautetuille asetteluille. Avaa HTML-koodinpätkät, valitse sitten + Uusi koodinpätkä or Luo ensimmäinen koodinpätkä.

MultiLipi Uudelleenkäytettävien HTML-koodinpätkien hallinta, joka näyttää koodinpätkäkirjaston, Uusi koodinpätkä -painikkeen ja tyhjän tilan

MultiLipi Uudelleenkäytettävien HTML-koodinpätkien hallinta, joka näyttää koodinpätkäkirjaston, Uusi koodinpätkä -painikkeen ja tyhjän tilan

Kuva 1.4 — Uudelleenkäytettävät HTML-koodinpätkät: koodinpätkäkirjasto, Uusi koodinpätkä ja tyhjä tila.
HTML
<div class="global-promo">
  <h3>Tutustu palveluihimme</h3>
  <p>Tutustu kansainvälisille yrityksille suunniteltuihin ratkaisuihin.</p>
  <a href="/contact/">Ota yhteyttä</a>
</div>

Tallennuksen jälkeen palaa HTML-lohkoon ja käytä Lisää tallennettu koodinpätkä.... Lähellä oleva + Hallitse -linkki avaa koodinpätkien hallinnan uudelleen.

8. Mukauta yksittäisiä otsikoita ja elementtejä

Säilytä semanttiset tunnisteet samalla kun muutat niiden lokalisoitua sisäistä merkintää.

Mukauttaaksesi H1-otsikkoa, valitse itse otsikko, vahvista että valittu tunniste on H1, valitse Korvaa sisäinen sisältö, muokkaa merkintää, esikatsele ja tallenna.

MultiLipi HTML-lohkoeditori muokkaamassa H1-otsikon sisäistä HTML-koodia

MultiLipi HTML-lohkoeditori muokkaamassa H1-otsikon sisäistä HTML-koodia

Kuva 1.5 — HTML-lohkoeditori: H1-otsikon muokkaaminen mukautetulla HTML-sisällöllä.
HTML
<span>LLM-optimointi pidemmälle</span>:
Tekniikka tekoälyn näkyvyyden takana

9. Esikatselu, tallennus, palautus ja dynaaminen sisältö

Ymmärrä, miten muokkaustila vaikuttaa käännökseen ja ladattuun sisältöön.

Esikatselu

Tarkista sisäkkäiset merkinnät, linkit, välistys ja asettelu ennen tallentamista.

Tallenna HTML

Säilytä nykyinen muutos tuetun muokkaustyönkulun kautta.

Palauta

Käytä käytettävissä olevaa palautustoimintoa ja varmista sen tarkka laajuus.

10. Parhaat käytännöt HTML-mukauttamiseen

Pidä paikalliset muutokset tarkkoina, kelvollisina, responsiivisina ja turvallisina.

  • Valitse pienin mahdollinen elementti, jolla saavutetaan haluttu lopputulos.
  • Suosi lisäämistä, kun alkuperäisen sisällön tulee säilyä.
  • Pidä tunnisteet kelvollisina, suljettuina ja oikein sisäkkäisinä.
  • Testaa lokalisoidut linkit sen sijaan, että olettaisit /contact/-osoitteen toimivan oikein jokaisella kielellä.
  • Vältä epäluotettavia skriptejä, tapahtumankäsittelijöitä ja tuntematonta upotuskoodia.
  • Tarkista työpöytä- ja mobiilinäkymän hallintatyökalut ennen tallentamista.
  • Käytä katkelmia toistuville rakenteille ja sanastosääntöjä toistuvalle terminologialle.
  • Älä piilota kriittisiä toimintoja vain lokalisoidun asettelun yksinkertaistamiseksi.

Oikealta vasemmalle (RTL) luettavia asetteluja varten tarkista RTL-kielten tuki. Jos vierailijoiden tulisi päätyä automaattisesti sopivaan kieliversioon, määritä vierailijan kielen uudelleenohjaus. Massasisällön käsittelyssä käännösten tuonti- ja vientiopas voi olla tehokkaampi kuin HTML-elementtien muokkaaminen yksitellen.

11. Yleisten ongelmien vianmääritys

Diagnosoi laajuus-, toiminto-, syntaksi- ja käännöstilaongelmat.

01

HTML-lohko-välilehti ei näy

Valitse muokattava verkkosivun elementti, valitse sitten HTML sen kelluvasta työkalupalkista tai avaa HTML-lohko tyylieditorista.

02

Sisältö katosi korvaamisen jälkeen

Olet todennäköisesti korvannut emosäiliön lapsielementit. Palauta tarvittaessa, valitse pienempi elementti ja yritä uudelleen.

03

Lisätty HTML on väärässä paikassa

Vahvista sekä Ennen/Jälkeen-toiminto että valittu kohde. Emonavigoinnin muutokset vaikuttavat lisäysalueeseen.

04

Sama otsikko näkyy kahdesti

Korvaa olemassa olevan otsikon sisältö sen sijaan, että lisäisit toisen otsikon sen viereen.

05

Mukautettu HTML näyttää virheelliseltä

Tarkista syntaksi, sulkutunnisteet, sivuston nykyinen CSS, emoelementin mitat ja responsiivinen näkymän käyttäytyminen.

06

Dynaaminen sisältö ei ole saatavilla

Lopeta muokkaus, anna käännöksen ja dynaamisen latauksen valmistua ja aloita muokkaus uudelleen.

07

Uudelleenkäytettävä koodinpätkä puuttuu

Vahvista, että se on tallennettu HTML-koodinpätkiin tai + Hallitse-valikkoon, ja avaa sitten Lisää tallennettu koodinpätkä uudelleen.

08

Piilotettu lohko on edelleen näkyvissä

Tarkista valittu säilö, nykyinen kieli, tallennettu tila ja mahdollinen viivästetty dynaaminen renderöinti.

12. HTML-lohkoeditorin tarkistuslista

Viimeinen tarkistus ennen lokalisoidun HTML-muutoksen viimeistelyä.

Oikea käännetty verkkosivu on auki
Aiottu elementti ja tunniste on valittu
Emoelementin hierarkia ja laajuus ovat oikein
Asianmukainen muokkaustoiminto on valittu
Vaadittu lapsisisältö on säilytetty
Lisätty HTML on oikeassa paikassa
Kielen näkyvyys on tarkoituksellinen
Uudelleenkäytettävät koodinpätkät on tallennettu
Merkintätapa on validi ja turvallisesta lähteestä
Linkit ja painikkeet toimivat
Työpöytä- ja mobiiliesikatselut näyttävät oikeilta
Tallenna HTML -toimintoa käytettiin ja se vahvistettiin

Usein kysytyt kysymykset

Nopeat vastaukset yleisiin HTML-lohkoeditorin työnkulkuihin.

Mikä on MultiLipi-alustan HTML-lohkoeditori?
Se on visuaalinen muokkaustyökalu, jolla voi korvata tai lisätä HTML-koodia, hallita kielikohtaisten lohkojen näkyvyyttä ja käyttää uudelleenkäytettäviä tekstinpätkiä käännetyillä verkkosivuilla.
Tarvitsenko koodauskokemusta?
HTML-kielen perustuntemus on suositeltavaa. Yksinkertaisissa muokkauksissa voi hyödyntää olemassa olevaa merkintäkieltä, mutta monimutkaiset korvaukset vaativat ymmärrystä rakenteesta ja sisäkkäisyydestä.
Voinko lisätä HTML-koodia poistamatta olemassa olevaa sisältöä?
Kyllä. Käytä toimintoja "Lisää elementin ennen" tai "Lisää elementin jälkeen" sen sijaan, että korvaisit sisällön.
Voinko piilottaa osion yhdeltä kieleltä?
Kyllä. Valitse sopiva lohko ja ota käyttöön Piilota tällä kielellä nykyiselle käännetylle sivulle.
Voinko luoda uudelleenkäytettäviä HTML-pätkiä?
Kyllä. Avaa HTML-pätkät, luo ja tallenna pätkä, ja valitse se sitten editorin kohdasta Lisää tallennettu pätkä.
Muuttaako tämä verkkosivustoni alkuperäistä lähdekoodia?
Käsittele näitä MultiLipi-hallittuina käännetyn sivun muokkaustoimintoina. Käyttöliittymä ei osoita, että muutokset kirjoitettaisiin takaisin alkuperäiseen CMS-järjestelmääsi tai lähdekoodivarastoon.
Miksi käännös on keskeytetty muokkauksen aikana?
Keskeyttäminen pitää valitun sisällön vakaana. Jos kyseessä on vasta ladattu dynaaminen sisältö, lopeta muokkaus, anna käännöksen valmistua ja aloita muokkaus sitten uudelleen.

Oletko valmis mukauttamaan?

Rakenna parempi lokaloitu käyttökokemus

Aloita pienimmästä sopivasta elementistä, esikatsele jokainen rakenteellinen muutos ja tallenna vasta, kun olet tarkistanut tuloksen sekä työpöytä- että mobiilikoossa.

Oliko tämä artikkeli hyödyllinen?

Tässä artikkelissa

Jaa

Valmis maailmanvalloitukseen?

Keskustellaan siitä, kuinka MultiLipi voi muuttaa sisältöstrategiasi ja auttaa sinua tavoittamaan globaalit yleisöt tekoälypohjaisella monikielisellä optimoinnilla.

Täytä lomake, niin tiimimme ottaa sinuun yhteyttä 24 tunnin kuluessa.