{"id":367189,"date":"2023-02-18T11:32:00","date_gmt":"2023-02-18T08:32:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367189"},"modified":"2023-05-08T14:36:49","modified_gmt":"2023-05-08T11:36:49","slug":"kuinka-rakentaa-reagoiva-elementor-wordpress-verkkosivusto","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-rakentaa-reagoiva-elementor-wordpress-verkkosivusto\/","title":{"rendered":"Kuinka rakentaa reagoiva Elementor WordPress -verkkosivusto"},"content":{"rendered":"\n

Kun useimmat k\u00e4ytt\u00e4j\u00e4t k\u00e4ytt\u00e4v\u00e4t Interneti\u00e4 mobiililaitteilla, onko verkkosivustollasi todella varaa olla reagoimatta?<\/p>\n

Mit\u00e4 responsiivinen suunnittelu oikeastaan \u200b\u200bon?<\/h2>\n

Responsiivinen tarkoittaa siis verkkosivuston yhteydess\u00e4 sit\u00e4, ett\u00e4 sivusto reagoi eri kuvasuhteisiin<\/strong>, eli se ei n\u00e4yt\u00e4 samalta eri laitteilla, vaan sen sijaan mukautuu vierailijan laitteeseen<\/strong>. Vuonna 2019 enemm\u00e4n k\u00e4ytt\u00e4ji\u00e4 on k\u00e4ytt\u00e4nyt Interneti\u00e4 mobiililaitteillaan<\/a> kuin p\u00f6yt\u00e4tietokoneilla, mutta mobiilil\u00e4ht\u00f6inen suunnittelu<\/a> \u2013 k\u00e4yt\u00e4nt\u00f6 rakentaa verkkosivustoja ensisijaisesti mobiilik\u00e4ytt\u00e4ji\u00e4 ajatellen \u2013 on ollut olemassa jo paljon pidemp\u00e4\u00e4n.<\/p>\n

Responsiivisen Elementor-suunnittelun avulla muutat periaatteessa kaikkien verkkosivustosi komponenttien kokoa ja j\u00e4rjestelet uudelleen sopimaan eri tavalla j\u00e4rjestetylle n\u00e4yt\u00f6lle<\/strong> \u2013 p\u00f6yt\u00e4koneelle, tabletille (768px) ja mobiililaitteelle (360px) \u2013 etk\u00e4 menet\u00e4 mit\u00e4\u00e4n laadusta. Ja WordPress onkin suosituin sis\u00e4ll\u00f6nhallintaj\u00e4rjestelm\u00e4, ei ole ihme, ett\u00e4 niin monet kehitt\u00e4j\u00e4t yritt\u00e4v\u00e4t tehd\u00e4 responsiivisia WordPress-teemoja<\/a>, vaikka t\u00e4m\u00e4k\u00e4\u00e4n ei ole takuuta.<\/p>\n

Kuinka p\u00e4\u00e4sen Elementorin erilaisiin asetteluihin?<\/h2>\n

L\u00f6yd\u00e4t n\u00e4yt\u00f6n kuvakkeen vasemmasta alakulmasta<\/strong>. Sen valitseminen avaa esikatselualivalikon. Sielt\u00e4 l\u00f6yd\u00e4t esikatseluvaihtoehdot tablet- ja mobiiliasetteluille.<\/p>\n

\"Kuinka<\/a><\/p>\n

Ty\u00f6p\u00f6yt\u00e4n\u00e4kym\u00e4 on oletusarvo, mutta voit muuttaa sen helposti. Sinun tulee huomata, ett\u00e4 kun muutat esikatseluasi, muutokset sopivat pienemp\u00e4\u00e4n ja erilaiseen laitteeseen<\/strong>, jossa on eri kuvasuhde, jotta saat k\u00e4sityksen siit\u00e4, milt\u00e4 verkkosivustosi asettelu n\u00e4ytt\u00e4\u00e4 kaikilla laitteilla.<\/p>\n

\"Kuinka<\/a><\/p>\n

T\u00e4rke\u00e4 asia, joka sinun on muistettava, on, ett\u00e4 riippumatta siit\u00e4, mill\u00e4 tavalla muutat kosmeettisia suunnitteluvaihtoehtojasi tabletti- tai mobiilitilassa, ty\u00f6p\u00f6yt\u00e4tila ja ulkoasu eiv\u00e4t muutu<\/strong>. N\u00e4in mink\u00e4\u00e4n asettelun ty\u00f6st\u00e4si ei koskaan katoa.<\/p>\n

Mit\u00e4 elementtej\u00e4 voin s\u00e4\u00e4t\u00e4\u00e4?<\/h2>\n

Ennen kuin mit\u00e4\u00e4n muuta, selvennet\u00e4\u00e4n vain yksi asia \u2013 voit s\u00e4\u00e4t\u00e4\u00e4 jokaista alla n\u00e4kyv\u00e4ll\u00e4 kuvakkeella merkitty\u00e4 elementti\u00e4. N\u00e4ille elementeille voimme itsen\u00e4isesti s\u00e4\u00e4t\u00e4\u00e4 arvoja jokaiselle elementille erikseen p\u00f6yt\u00e4kone-, tabletti- ja mobiiliformaateille.<\/p>\n

\"Kuinka<\/a><\/p>\n

Tapa, jolla vierailijat n\u00e4kev\u00e4t tekstielementit, on eritt\u00e4in t\u00e4rke\u00e4\u00e4. Jos fonttisi eiv\u00e4t ole mobiiliyst\u00e4v\u00e4llisi\u00e4, vierailijasi saattavat kokea verkkosivuston lukukelvottomana<\/strong>, mik\u00e4 puolestaan \u200b\u200bvaikuttaa SEO:si (hakukoneoptimointiin). Koska vierailijasi ker\u00e4\u00e4v\u00e4t paljon tietoa yksinkertaisesti tekstist\u00e4, t\u00e4m\u00e4 on asia, jota et voi sivuuttaa. Luettava verkkosivusto n\u00e4ytt\u00e4\u00e4 siistilt\u00e4, \u200b\u200bsiistilt\u00e4 ja ammattimaiselta.<\/p>\n

Katso vaikka t\u00e4m\u00e4 tunnustus:<\/p>\n

\"Kuinka<\/a><\/p>\n

T\u00e4m\u00e4 n\u00e4ytt\u00e4\u00e4 t\u00e4ydelliselt\u00e4 ty\u00f6p\u00f6yt\u00e4asetelmassa, varsinkin laajalla n\u00e4yt\u00f6ll\u00e4. Mutta pienemm\u00e4ss\u00e4 laitteessa, varsinkin pystysuunnassa katsottuna, kaikki vaakasuuntaa suosivat tekstiosat n\u00e4ytt\u00e4v\u00e4t tasoittuneilta ja lukukelvottomalta<\/strong>.<\/p>\n

Voit korjata sen valitsemalla laitteen, jonka asettelua haluat muuttaa. Jos olet tyytyv\u00e4inen oletusasetukseen (ty\u00f6p\u00f6yt\u00e4), sinulla on viel\u00e4 joitain s\u00e4\u00e4t\u00f6j\u00e4 tablet-laitteille ja matkapuhelimille.<\/p>\n

Kuten kaikilla elementeill\u00e4, tekstielementill\u00e4 on attribuutteja. Ensimm\u00e4inen asia, joka tulee muistaa, on HTML-tunniste. \u00c4l\u00e4 muuta HTML – tunnistetta<\/strong>. N\u00e4m\u00e4 ovat eritt\u00e4in t\u00e4rkeit\u00e4 SEO:lle, ja kun ne on m\u00e4\u00e4ritetty hyvin, niit\u00e4 ei pid\u00e4 muuttaa. Jos haluat muuttaa tekstin kokoa, haluat tarkastella Tyyli-v\u00e4lilehte\u00e4.<\/strong><\/p>\n

\"Kuinka<\/a><\/p>\n

Etsi typografiaasetukset. Siell\u00e4 voit muuttaa fonttia, sen kokoa, painoa, rivin korkeutta ja kirjainv\u00e4li\u00e4. Jos haluat muuttaa tekstisi tasausta, l\u00f6yd\u00e4t sen valitsemalla Sis\u00e4lt\u00f6-v\u00e4lilehden.<\/p>\n

\"Kuinka<\/a><\/p>\n

Muista, ett\u00e4 jotkin muutokset \u2013 kuten Transform Uppercase \u2013 n\u00e4kyv\u00e4t my\u00f6s muissa laitteissa<\/strong>. Typografiavaihtoehdot ovat laitekohtaisia. T\u00e4rke\u00e4 huomioitava seikka on my\u00f6s se, ett\u00e4 tekstielementtej\u00e4 tulee s\u00e4\u00e4t\u00e4\u00e4 suhteessa.<\/strong> Haluat kiinnitt\u00e4\u00e4 huomiota kaikkien tekstielementtien mittasuhteisiin.<\/p>\n

Suhteellisesti muokattu osa n\u00e4ytt\u00e4\u00e4 t\u00e4lt\u00e4:<\/p>\n

\"Kuinka<\/a><\/p>\n

Elementor rakentaa sis\u00e4ll\u00f6llesi perusrakenteen osioiden tai rivien avulla<\/strong>. Siksi rivin korkeus on eritt\u00e4in t\u00e4rke\u00e4. Kun rivin korkeus on asetettu, sit\u00e4 voidaan s\u00e4\u00e4t\u00e4\u00e4 jokaiselle laitteelle<\/strong>. Mit\u00e4 haluat tarkkailla, on elementin sis\u00e4ll\u00f6n ja rivin reunan v\u00e4linen et\u00e4isyys.<\/p>\n

\"Kuinka<\/a><\/p>\n

Se, mik\u00e4 voi n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 p\u00f6yt\u00e4koneella, vie paljon pystysuoraa tilaa mobiilissa ja tabletissa. Voit s\u00e4\u00e4t\u00e4\u00e4 rivin korkeutta valitsemalla rivin ja valitsemalla sitten muokkausvaihtoehdon<\/strong>.<\/p>\n

\"Kuinka<\/a><\/p>\n

Valitse sitten Asettelu-v\u00e4lilehti ja s\u00e4\u00e4d\u00e4 Minimikorkeus-liukus\u00e4\u00e4dint\u00e4 haluamallasi tavalla. Sinulla voi olla eri korkeuksia eri n\u00e4ytt\u00f6asetteluille<\/strong>. T\u00e4m\u00e4 on erityisen t\u00e4rke\u00e4\u00e4, jos muutat my\u00f6s kirjasinkokoja.<\/p>\n

\"Kuinka<\/a><\/p>\n

Marginaalit ja t\u00e4yte<\/h3>\n

Sinun on my\u00f6s pidett\u00e4v\u00e4 mieless\u00e4 marginaalit ja pehmusteet. Marginaali on elementtien v\u00e4linen tila, kun taas t\u00e4yte on elementin reunojen ja sen sis\u00e4ll\u00f6n v\u00e4linen tila<\/strong>. Riippumatta siit\u00e4, oletko rakentanut verkkosivustosi tyhj\u00e4st\u00e4 tai ty\u00f6skenteletk\u00f6 valmiin mallin<\/a> parissa Elementorille<\/strong>, sinulla ei pit\u00e4isi olla vaikeuksia navigoida elementeiss\u00e4. Jokaisella valitun osan elementill\u00e4 on sininen reunus \u2013 siirr\u00e4 hiiren osoitin elementin p\u00e4\u00e4lle, niin n\u00e4et sen reunan<\/strong>. T\u00e4m\u00e4 on hyv\u00e4 tapa saada tuntumaa osion rakenteeseen.<\/p>\n

\"Kuinka<\/a><\/p>\n

Valitse elementti ja valitse sitten Lis\u00e4asetukset-v\u00e4lilehti. T\u00e4ytett\u00e4 ja marginaaleja varten on nelj\u00e4 vaihtoehtoa: ylh\u00e4\u00e4lt\u00e4, oikealta, alhaalta ja vasemmalta<\/strong>. T\u00e4h\u00e4n voit sy\u00f6tt\u00e4\u00e4 t\u00e4yte- ja marginaaliarvot. Alivalikon oikealla puolella<\/strong> oleva linkkikuvake lukitsee ne toisiinsa n\u00e4hden: voit valita, ett\u00e4 niill\u00e4 kaikilla on sama arvo tai eri arvo kullekin marginaalille tai t\u00e4yteaineelle.<\/p>\n

\"Kuinka<\/a><\/p>\n

Sarakkeiden luominen<\/a> voi aiheuttaa n\u00e4ytt\u00f6ongelmia, jos sit\u00e4 ei ole optimoitu eri laitteille. Ensisijaiset asetukset riippuvat sarakkeiden m\u00e4\u00e4r\u00e4st\u00e4 ja niiden sis\u00e4ll\u00f6st\u00e4<\/strong>.<\/p>\n

\"Kuinka<\/a><\/p>\n

Oletuksena Elementor pinoaa sarakkeet p\u00e4\u00e4llekk\u00e4in mobiililaitteissa<\/strong>. T\u00e4m\u00e4 tarkoittaa, ett\u00e4 sarakkeita ei squalled yhteen ja ett\u00e4 niiden sis\u00e4lt\u00f6 pysyy luettavissa.<\/p>\n

\"Kuinka<\/a><\/p>\n

Voit helpottaa sarakkeiden k\u00e4ytt\u00f6\u00e4 mobiilik\u00e4ytt\u00e4jien silmiss\u00e4 k\u00e4\u00e4nt\u00e4m\u00e4ll\u00e4 sarakkeiden j\u00e4rjestyksen mill\u00e4 tahansa rivill\u00e4<\/strong> \u2013 valitse osio, sitten Lis\u00e4asetukset-v\u00e4lilehti, Responsiivinen-alivalikko ja vaihda K\u00e4\u00e4nteiset sarakkeet -valitsin tablet- ja mobiiliasettelulle. kuten haluttu.<\/p>\n

\"Kuinka<\/a><\/p>\n

Jos valitset elementin esimerkiksi ty\u00f6p\u00f6yt\u00e4n\u00e4kym\u00e4st\u00e4 ja valitset sitten Lis\u00e4asetukset-v\u00e4lilehden, valitset Responsiiviset-alivalikon, n\u00e4et kolme n\u00e4yt\u00e4\/piilota-kytkint\u00e4: mobiililaitteille, tableteille ja p\u00f6yt\u00e4koneille. N\u00e4it\u00e4 voit k\u00e4ytt\u00e4\u00e4 elementtien tai osien n\u00e4ytt\u00e4miseen tai piilottamiseen sen mukaan, mill\u00e4 laitteilla niit\u00e4 tarkastellaan. N\u00e4m\u00e4 vaihtoehdot ovat k\u00e4yt\u00e4nn\u00f6llisi\u00e4 vain joidenkin elementtien tai osien kohdalla, joita vierailijat saattavat pit\u00e4\u00e4 ep\u00e4kiinnostavina tai ylim\u00e4\u00e4r\u00e4isin\u00e4 k\u00e4ytt\u00e4m\u00e4ns\u00e4 laitteen mukaan, mutta voit halutessasi asettaa sen avulla kolme t\u00e4ysin erilaista sivua.<\/p>\n

Siin\u00e4 se on: verkkosivujen ulkoasun mukauttaminen mobiililaitteille ja tableteille \u2013 ja p\u00e4invastoin \u2013 ei ole koskaan ollut n\u00e4in helppoa. Ja muista, ett\u00e4 responsiivinen Elementor-verkkosivustojen rakentaminen on vain yksi Elementorin monista ominaisuuksista. Autamme sinua tutkimaan niit\u00e4.<\/p>\n

: wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Luo responsiivinen Elementor-verkkosivusto vain muutamalla helpolla vaiheella parhaan k\u00e4vij\u00e4kokemuksen saavuttamiseksi.<\/p>\n","protected":false},"author":1,"featured_media":363491,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[570],"tags":[843],"class_list":["post-367189","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpressin-perusteet","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/367189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=367189"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/367189\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/363491"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=367189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=367189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=367189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}