{"id":134331,"date":"2024-11-12T11:36:53","date_gmt":"2024-11-12T09:36:53","guid":{"rendered":"https:\/\/www.zoner.fi\/tuki\/?page_id=134331"},"modified":"2025-09-25T16:42:48","modified_gmt":"2025-09-25T13:42:48","slug":"miten-lisaan-komponentin-sivulle-zoner-kotisivukoneessa","status":"publish","type":"page","link":"https:\/\/www.zoner.fi\/tuki\/kotisivukone\/zoner\/miten-lisaan-komponentin-sivulle-zoner-kotisivukoneessa\/","title":{"rendered":"Miten lis\u00e4\u00e4n komponentin sivulle Zoner Kotisivukoneessa?"},"content":{"rendered":"\n<p>Zoner Kotisivukoneen sivut, mallit ja osiot koostuvat <strong>komponenteiksi<\/strong>\u00a0kutsutuista elementeist\u00e4. Yhdistelem\u00e4ll\u00e4 ja muokkaamalla komponentteja voit luoda ainutlaatuiset kotisivut.<\/p>\n\n\n\n<p>T\u00e4ss\u00e4 oppaassa kerromme, miten voit lis\u00e4t\u00e4 komponentin sivulle Zoner Kotisivukoneessa, sek\u00e4 miten yleisimm\u00e4t komponentit toimivat.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"#miten-lisaan-komponentin-sivulle\">Miten lis\u00e4\u00e4n komponentin sivulle?<\/a><\/li>\n\n\n\n<li><a href=\"#tekstikomponentti\">Tekstikomponentti<\/a><\/li>\n\n\n\n<li><a href=\"#kuvakomponentti\">Kuvakomponentti<\/a><\/li>\n\n\n\n<li><a href=\"#laatikkokomponentti\">Laatikkokomponentti<\/a><\/li>\n\n\n\n<li><a href=\"#painikekomponentti\">Painikekomponentti<\/a><\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"miten-lisaan-komponentin-sivulle\">Miten lis\u00e4\u00e4n komponentin sivulle?<\/h2>\n\n\n\n<p>N\u00e4et kaikki saatavilla olevat komponentit Zoner Kotisivukoneen editorin vasemmalla olevasta valikosta. Voit lis\u00e4t\u00e4 komponentin sivulle napsauttamalla sit\u00e4 valikossa ja vet\u00e4m\u00e4ll\u00e4 sen sivulle haluamaasi kohtaan. Oranssit viivat n\u00e4ytt\u00e4v\u00e4t, miten komponentti asettuu muihin komponentteihin n\u00e4hden.<\/p>\n\n\n\n<p>Kun komponentti on lis\u00e4tty, voit muokata sit\u00e4 helposti. Klikkaa komponenttia ja valitse sen j\u00e4lkeen <strong>Muokkaa<\/strong>-v\u00e4lilehti. Voit muokata komponenttia my\u00f6s kaksoisnapsauttamalla sit\u00e4, jolloin n\u00e4kyviin tulee kaksi valikkoa:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Harmaa palkki nopeita muutoksia varten.<\/li>\n\n\n\n<li>Kelluva valikko, jossa on enemm\u00e4n muokkausvaihtoehtoja.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-1-1024x618.png\" alt=\"\" class=\"wp-image-134342\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-1-1024x618.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-1-300x181.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-1-768x463.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-1.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tekstikomponentti\">Tekstikomponentti<\/h2>\n\n\n\n<p>Voit lis\u00e4t\u00e4 sivulle teksti\u00e4 tekstikomponenteilla. Jos haluat lis\u00e4t\u00e4 yksinkertaisen tekstilaatikon, napsauta Komponentit-valikossa&nbsp;<strong>Teksti<\/strong>&nbsp;ja valitse jokin tekstikappaleista. Jos haluat lis\u00e4t\u00e4 otsikon, valitse jokin valmiista otsikkovaihtoehdoista.<\/p>\n\n\n\n<p>Sinisen valikon valikoima sis\u00e4lt\u00e4\u00e4 my\u00f6s muita komponenttimalleja, kuten luetteloita ja teksti-\/kuvayhdistelmi\u00e4. Voit lajitella niit\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 sinisen valikon yl\u00e4osassa olevia v\u00e4lilehti\u00e4.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-2-1024x616.png\" alt=\"\" class=\"wp-image-134343\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-2-1024x616.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-2-300x181.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-2-768x462.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-2.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"kuvakomponentti\">Kuvakomponentti<\/h2>\n\n\n\n<p>Kuvakomponentin avulla voit lis\u00e4t\u00e4 sivulle kuvan. Valitse kuvakomponentti, jota haluat k\u00e4ytt\u00e4\u00e4, valitse kuva ja lis\u00e4\u00e4 se sivulle. Voit ladata kuvan koneeltasi tai k\u00e4ytt\u00e4\u00e4 Zoner Kotisivukoneen ilmaisia kuvia.<\/p>\n\n\n\n<p>Tutustu kuvakomponentin muokkausvaihtoehtoihin:&nbsp;<a href=\"https:\/\/www.zoner.fi\/tuki\/kotisivukone\/miten-lisaan-kuvan-zoner-kotisivukone-sivustolleni\/\">Miten lis\u00e4\u00e4n kuvan Zoner Kotisivukone -sivustolleni?<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-3-1024x616.png\" alt=\"\" class=\"wp-image-134344\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-3-1024x616.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-3-300x180.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-3-768x462.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-3.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"laatikkokomponentti\">Laatikkokomponentti<\/h2>\n\n\n\n<p>Laatikkokomponentti kuuluu laajempaan komponenttikategoriaan, jonka nimi on&nbsp;<strong>S\u00e4il\u00f6t<\/strong>. S\u00e4il\u00f6ihin voi lis\u00e4t\u00e4 useampia komponentteja.<\/p>\n\n\n\n<p>Voit esimerkiksi lis\u00e4t\u00e4 sivulle laatikon, jonka sis\u00e4ll\u00e4 on tekstikomponentti ja painike. Valitsemalla laatikkon voit siirt\u00e4\u00e4 kaikkia sen sis\u00e4lt\u00e4mi\u00e4 komponentteja kerralla.<\/p>\n\n\n\n<p>Lis\u00e4tietoja s\u00e4il\u00f6komponenteista: <a href=\"https:\/\/www.zoner.fi\/tuki\/kotisivukone\/miten-kaytan-sailokomponentteja\/\">Miten k\u00e4yt\u00e4n s\u00e4il\u00f6komponentteja?<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-4-1024x618.png\" alt=\"\" class=\"wp-image-134345\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-4-1024x618.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-4-300x181.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-4-768x463.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-4.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"painikekomponentti\">Painikekomponentti<\/h2>\n\n\n\n<p>Painikkeilla voit lis\u00e4t\u00e4 sivulle huomiota her\u00e4tt\u00e4vi\u00e4 linkkej\u00e4 ja uudelleenohjauksia. Valitse haluamasi teksti ja tyyli ja lis\u00e4\u00e4 linkki esimerkiksi ulkoiseen sijaintiin, tiedostoon tai sivustosi toiselle sivulle.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"616\" src=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-5-1024x616.png\" alt=\"\" class=\"wp-image-134346\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-5-1024x616.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-5-300x181.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-5-768x462.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-komponentin-lisaaminen-5.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Zoner Kotisivukoneen sivut, mallit ja osiot koostuvat komponenteiksi\u00a0kutsutuista elementeist\u00e4. Yhdistelem\u00e4ll\u00e4 ja muokkaamalla komponentteja voit luoda ainutlaatuiset kotisivut. T\u00e4ss\u00e4 oppaassa kerromme, miten voit lis\u00e4t\u00e4 komponentin sivulle Zoner Kotisivukoneessa, sek\u00e4 miten yleisimm\u00e4t komponentit toimivat. Miten lis\u00e4\u00e4n komponentin sivulle? N\u00e4et kaikki saatavilla olevat komponentit Zoner Kotisivukoneen editorin vasemmalla olevasta valikosta. Voit lis\u00e4t\u00e4 komponentin sivulle napsauttamalla sit\u00e4 valikossa ja &#8230; <a title=\"Miten lis\u00e4\u00e4n komponentin sivulle Zoner Kotisivukoneessa?\" class=\"read-more\" href=\"https:\/\/www.zoner.fi\/tuki\/kotisivukone\/zoner\/miten-lisaan-komponentin-sivulle-zoner-kotisivukoneessa\/\" aria-label=\"Lue lis\u00e4\u00e4 aiheesta Miten lis\u00e4\u00e4n komponentin sivulle Zoner Kotisivukoneessa?\">Lue lis\u00e4\u00e4<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"parent":137385,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_relevanssi_hide_post":"","_relevanssi_hide_content":"","_relevanssi_pin_for_all":"","_relevanssi_pin_keywords":"","_relevanssi_unpin_keywords":"","_relevanssi_related_keywords":"","_relevanssi_related_include_ids":"","_relevanssi_related_exclude_ids":"","_relevanssi_related_no_append":"","_relevanssi_related_not_related":"","_relevanssi_related_posts":"132250,130813,130464,130935,130578,132080","_relevanssi_noindex_reason":"","footnotes":""},"categories":[166],"tags":[159,158],"wf_page_folders":[],"class_list":{"0":"post-134331","1":"page","2":"type-page","3":"status-publish","5":"category-zoner-kotisivukone","6":"tag-sivut","7":"tag-yleiset"},"_links":{"self":[{"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/pages\/134331","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/comments?post=134331"}],"version-history":[{"count":5,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/pages\/134331\/revisions"}],"predecessor-version":[{"id":134574,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/pages\/134331\/revisions\/134574"}],"up":[{"embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/pages\/137385"}],"wp:attachment":[{"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/media?parent=134331"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/categories?post=134331"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/tags?post=134331"},{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/wf_page_folders?post=134331"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}