{"id":134347,"date":"2024-11-12T11:38:24","date_gmt":"2024-11-12T09:38:24","guid":{"rendered":"https:\/\/www.zoner.fi\/tuki\/?page_id=134347"},"modified":"2025-09-25T16:42:46","modified_gmt":"2025-09-25T13:42:46","slug":"miten-kaytan-sailokomponentteja","status":"publish","type":"page","link":"https:\/\/www.zoner.fi\/tuki\/kotisivukone\/zoner\/miten-kaytan-sailokomponentteja\/","title":{"rendered":"Miten k\u00e4yt\u00e4n s\u00e4il\u00f6komponentteja?"},"content":{"rendered":"\n<p>Zoner Kotisivukoneen s\u00e4il\u00f6komponentit ovat k\u00e4tevi\u00e4 rakennuspalikoita. Voit k\u00e4ytt\u00e4\u00e4 niit\u00e4 taustakuvina ja suunnitteluelementtein\u00e4, tai voit muodostaa s\u00e4il\u00f6n avulla useampia komponentteja sis\u00e4lt\u00e4v\u00e4n ryhm\u00e4n.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"617\" src=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-1-1024x617.png\" alt=\"\" class=\"wp-image-134353\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-1-1024x617.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-1-300x181.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-1-768x463.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-1.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h_01HMGMFW14WPKVTTP2ZYSD3GQ1\">Erilaiset s\u00e4il\u00f6komponentit<\/h2>\n\n\n\n<p>S\u00e4il\u00f6j\u00e4 on&nbsp;<strong>nelj\u00e4<\/strong> erilaista:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nauhakomponentti<\/li>\n\n\n\n<li>Laatikkokomponentti<\/li>\n\n\n\n<li>Ympyr\u00e4komponentti<\/li>\n\n\n\n<li>Osoitinaktivointiruutukomponentti<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_01GD32JSVTGMRS01JKTESYM8QQ\"><strong>Nauhakomponentti<\/strong><\/h3>\n\n\n\n<p>Nauhakomponentti kattaa aina sivun koko leveyden. K\u00e4yt\u00e4 sit\u00e4 esimerkikski taustana tai bannerina.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-2-1024x614.png\" alt=\"\" class=\"wp-image-134354\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-2-1024x614.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-2-300x180.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-2-768x460.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-2.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_01GD32K70B265DB2QN1SKCYGC3\"><strong>Laatikkokomponentti<\/strong><\/h3>\n\n\n\n<p>Laatikkokomponentilla voit muodostaa komponenteista yhten\u00e4isen ryhm\u00e4n, jota voi siirt\u00e4\u00e4 helposti. Laatikkoon lis\u00e4tyt komponentit pysyv\u00e4t yhdess\u00e4 my\u00f6s mobiilin\u00e4kym\u00e4ss\u00e4. Laatikkoa voi k\u00e4ytt\u00e4\u00e4 my\u00f6s taustana.<\/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-sailokomponentti-3-1024x616.png\" alt=\"\" class=\"wp-image-134355\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-3-1024x616.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-3-300x181.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-3-768x462.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-3.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_01GD32KJ1K5FVVVPWD84N7TTKD\"><strong>Ympyr\u00e4komponentti<\/strong><\/h3>\n\n\n\n<p>Ympyr\u00e4komponentti toimii samalla tavalla kuin laatikko.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"620\" src=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-4-1024x620.png\" alt=\"\" class=\"wp-image-134356\" srcset=\"https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-4-1024x620.png 1024w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-4-300x182.png 300w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-4-768x465.png 768w, https:\/\/www.zoner.fi\/tuki\/wp-content\/uploads\/2024\/10\/kotisivukone-sailokomponentti-4.png 1500w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h_01GD32KTQ30V7DTRQXXZC2J6BC\"><strong>Osoitinaktivointiruutukomponentti<\/strong><\/h3>\n\n\n\n<p>Osoitinaktivointiruudun avulla voit luoda interaktiivisia elementtej\u00e4 sivustollesi. Jos vierailija pit\u00e4\u00e4 hiiren osoitinta ruudun p\u00e4\u00e4ll\u00e4, se toistaa valitun efektin.<\/p>\n\n\n\n<p>Kun ved\u00e4t osoitinaktivointiruudun ty\u00f6tilaasi, n\u00e4et kaksi v\u00e4lilehte\u00e4 sen p\u00e4\u00e4ll\u00e4:&nbsp;<strong>oletus<\/strong>&nbsp;ja&nbsp;<strong>osoitinaktivointi<\/strong>. Ensimm\u00e4inen niist\u00e4 on ruudun oletusn\u00e4kym\u00e4, ja toinen on se, joka n\u00e4ytet\u00e4\u00e4n, kun hiiren osoitin on ruudun p\u00e4\u00e4ll\u00e4.<\/p>\n\n\n\n<p>Voit muokata kumpaakin n\u00e4kym\u00e4\u00e4 erikseen. Lis\u00e4\u00e4 kuvia, tekstikentti\u00e4, painikkeita ja muuta luodaksesi ainutlaatuisen tehosteen. Lis\u00e4\u00e4 viel\u00e4 jokin osoitinaktivointitehoste napsauttamalla&nbsp;<strong>Muokkaa osoitinaktivointiruutua<\/strong>&nbsp;-v\u00e4lilehte\u00e4 ja valitsemalla sitten<strong>&nbsp;osoitinaktivointitehoste<\/strong>&nbsp;n\u00e4kyviin tulevasta kelluvasta valikosta.<\/p>\n\n\n\n<p><strong>Vinkki<\/strong>: Jos haluat n\u00e4hd\u00e4, miten osoitinaktivointiruutu toimii, siirry&nbsp;<strong>Esikatselu<\/strong>-tilaan ja pit\u00e4\u00e4 osoitinta ruudun p\u00e4\u00e4ll\u00e4. Huomaa, ett\u00e4 hover-efekti on k\u00e4ytett\u00e4viss\u00e4 vain tietokoneissa, koska se vaatii hiiren. Mobiililaitteilla se ei toimi.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Zoner Kotisivukoneen s\u00e4il\u00f6komponentit ovat k\u00e4tevi\u00e4 rakennuspalikoita. Voit k\u00e4ytt\u00e4\u00e4 niit\u00e4 taustakuvina ja suunnitteluelementtein\u00e4, tai voit muodostaa s\u00e4il\u00f6n avulla useampia komponentteja sis\u00e4lt\u00e4v\u00e4n ryhm\u00e4n. Erilaiset s\u00e4il\u00f6komponentit S\u00e4il\u00f6j\u00e4 on&nbsp;nelj\u00e4 erilaista: Nauhakomponentti Nauhakomponentti kattaa aina sivun koko leveyden. K\u00e4yt\u00e4 sit\u00e4 esimerkikski taustana tai bannerina. Laatikkokomponentti Laatikkokomponentilla voit muodostaa komponenteista yhten\u00e4isen ryhm\u00e4n, jota voi siirt\u00e4\u00e4 helposti. Laatikkoon lis\u00e4tyt komponentit pysyv\u00e4t yhdess\u00e4 &#8230; <a title=\"Miten k\u00e4yt\u00e4n s\u00e4il\u00f6komponentteja?\" class=\"read-more\" href=\"https:\/\/www.zoner.fi\/tuki\/kotisivukone\/zoner\/miten-kaytan-sailokomponentteja\/\" aria-label=\"Lue lis\u00e4\u00e4 aiheesta Miten k\u00e4yt\u00e4n s\u00e4il\u00f6komponentteja?\">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":"130464,131541,130964,132261,1066,130813","_relevanssi_noindex_reason":"","footnotes":""},"categories":[166],"tags":[158],"wf_page_folders":[],"class_list":{"0":"post-134347","1":"page","2":"type-page","3":"status-publish","5":"category-zoner-kotisivukone","6":"tag-yleiset"},"_links":{"self":[{"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/pages\/134347","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=134347"}],"version-history":[{"count":3,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/pages\/134347\/revisions"}],"predecessor-version":[{"id":134747,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/pages\/134347\/revisions\/134747"}],"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=134347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/categories?post=134347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/tags?post=134347"},{"taxonomy":"wf_page_folders","embeddable":true,"href":"https:\/\/www.zoner.fi\/tuki\/wp-json\/wp\/v2\/wf_page_folders?post=134347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}