{"id":231787,"date":"2021-12-02T16:26:00","date_gmt":"2021-12-02T13:26:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=231787"},"modified":"2022-05-16T10:14:11","modified_gmt":"2022-05-16T07:14:11","slug":"9-yksinkertaista-suunnittelusaantoa-jotka-tekevat-sivustostasi-kauniimman","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/9-yksinkertaista-suunnittelusaantoa-jotka-tekevat-sivustostasi-kauniimman\/","title":{"rendered":"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman"},"content":{"rendered":"<p>&quot;Pid\u00e4n suunnittelusta.&quot;<\/p>\n<p>Olen kuullut sen monta kertaa ennenkin.<\/p>\n<p>Tunnen monia ihmisi\u00e4, jotka yll\u00e4pit\u00e4v\u00e4t verkkosivustoja ja luovat hienoa sis\u00e4lt\u00f6\u00e4, mutta v\u00e4itt\u00e4v\u00e4t, ettei heill\u00e4 ole suunnittelumakua.<\/p>\n<p>H\u00f6lynp\u00f6ly!<\/p>\n<p>Uskon, ett\u00e4 kuka tahansa voi ter\u00e4v\u00f6itt\u00e4\u00e4 silm\u00e4ns\u00e4 suunnitteluun, mutta jos sinulla olisi v\u00e4h\u00e4n apua, t\u00e4m\u00e4 viesti on sinua varten.<\/p>\n<p>T\u00e4st\u00e4 opetusohjelmasta l\u00f6yd\u00e4t 9 suunnittelun perusperiaatetta, joita voit soveltaa kaikkeen, mit\u00e4 teet.<\/p>\n<p>Olen kirjoittanut n\u00e4m\u00e4 vinkit ollakseen mahdollisimman hy\u00f6dyllisi\u00e4, jotta ne on helppo ottaa k\u00e4ytt\u00f6\u00f6n verkkosivustollasi.<\/p>\n<p>Tutustu t\u00e4h\u00e4n luetteloon aina, kun sinun on teht\u00e4v\u00e4 suunnitteluvalinta, ja lupaan, ett\u00e4 lopputulos on hieman kauniimpi.<\/p>\n<p>Aloitetaan\u2026<\/p>\n<h2>1 \u00c4l\u00e4 koskaan k\u00e4yt\u00e4 v\u00e4rillist\u00e4 teksti\u00e4<\/h2>\n<p>Jos et tied\u00e4 mit\u00e4 olet tekem\u00e4ss\u00e4, v\u00e4rillinen teksti on yleens\u00e4 rumaa ja vaikeasti luettavaa.<\/p>\n<p>Nyrkkis\u00e4\u00e4nt\u00f6n\u00e4 on, <strong>ett\u00e4 tekstist\u00e4 tulee aina musta tai valkoinen<\/strong>.<\/p>\n<p>Jos verkkosivustollasi on v\u00e4rillist\u00e4 teksti\u00e4, sinun kannattaa k\u00e4ytt\u00e4\u00e4 sen sijaan v\u00e4ri\u00e4 l\u00e4hell\u00e4.<\/p>\n<p>T\u00e4ss\u00e4 on mit\u00e4 tarkoitan.<\/p>\n<h3>Esimerkki #1<\/h3>\n<p>T\u00e4ss\u00e4 painikkeessa on sininen teksti ja vaaleanharmaa tausta. Se n\u00e4ytt\u00e4\u00e4 litte\u00e4lt\u00e4 ja teksti ylitt\u00e4\u00e4 painikkeen muodon:<\/p>\n<p>Jos k\u00e4\u00e4nn\u00e4n v\u00e4rej\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4 sinist\u00e4 taustaa ja vaaleaa teksti\u00e4, se n\u00e4ytt\u00e4\u00e4 paljon paremmalta:<\/p>\n<p>Ja kun puhumme painikkeista\u2026<\/p>\n<p>Jos painikkeellasi on v\u00e4rillinen tausta, se n\u00e4ytt\u00e4\u00e4 melkein aina parhaalta valkoisen tekstin kanssa.<\/p>\n<p>Musta teksti n\u00e4ytt\u00e4\u00e4 yleens\u00e4 kamalalta v\u00e4rin p\u00e4\u00e4ll\u00e4, ellei t\u00e4m\u00e4 v\u00e4ri ole todella vaalea tai vain vaaleampi harmaa:<\/p>\n<p>Jos k\u00e4yt\u00e4t yleisesti v\u00e4rillist\u00e4 teksti\u00e4 viesteiss\u00e4si, arvostat seuraavan esimerkin ideoita.<\/p>\n<h3>Esimerkki #2<\/h3>\n<p>Toisena esimerkkin\u00e4 viestiss\u00e4si voi olla v\u00e4rillist\u00e4 teksti\u00e4, koska haluat sen erottuvan joukosta, kuten t\u00e4m\u00e4:<\/p>\n<p>T\u00e4m\u00e4 teksti ei n\u00e4yt\u00e4 hyv\u00e4lt\u00e4, koska se on sininen!<\/p>\n<p>On olemassa esteettisesti miellytt\u00e4v\u00e4mpi\u00e4 tapoja saada huomiota v\u00e4reill\u00e4. Puhumattakaan, tietyt v\u00e4rit (kuten sininen) saavat tekstin n\u00e4ytt\u00e4m\u00e4\u00e4n linkilt\u00e4.<\/p>\n<p>Toinen tapa saada huomiota v\u00e4reill\u00e4 on tehd\u00e4 tekstist\u00e4 valkoinen ja taustasta sininen:<\/p>\n<p>T\u00e4ss\u00e4 on paljon v\u00e4rej\u00e4, joten k\u00e4yt\u00e4 s\u00e4\u00e4steli\u00e4\u00e4sti!<\/p>\n<p>Tai voit alentaa kyll\u00e4isyytt\u00e4 niin, ett\u00e4 tausta on hyvin vaalea ja sitten tehd\u00e4 tekstist\u00e4 musta, jotta se n\u00e4ytt\u00e4\u00e4 hienovaraisemmalta:<\/p>\n<p>Musta teksti n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 vaalealla taustalla.<\/p>\n<p>Tai voit j\u00e4tt\u00e4\u00e4 tekstin mustaksi ja lis\u00e4t\u00e4 hieman v\u00e4ri\u00e4 reunukseksi tekstin ymp\u00e4rille:<\/p>\n<p>T\u00e4m\u00e4 on yksinkertaisempi ilme, joka saa silti huomiota.<\/p>\n<p>Tai voit yhdist\u00e4\u00e4 taustan ja reunuksen:<\/p>\n<p>T\u00e4m\u00e4 on toinen houkutteleva tapa k\u00e4ytt\u00e4\u00e4 v\u00e4rej\u00e4.<\/p>\n<p>Yhteenvetona v\u00e4rillisen tekstin s\u00e4\u00e4nn\u00f6ist\u00e4:<\/p>\n<p>Sinun tulisi k\u00e4ytt\u00e4\u00e4 v\u00e4rillist\u00e4 taustaa tai v\u00e4rillist\u00e4 reunusta tekstin ymp\u00e4rill\u00e4 sen sijaan, ett\u00e4 muuttaisit tekstin v\u00e4ri\u00e4. Lis\u00e4ksi valkoinen n\u00e4ytt\u00e4\u00e4 aina paremmalta v\u00e4rillisill\u00e4 taustoilla, ellei v\u00e4ri ole hyvin vaalea.<\/p>\n<p>Nyt valitaan v\u00e4rit, joita k\u00e4yt\u00e4t.<\/p>\n<p>Tiet\u00e4kseni minun piti kirjoittaa hieman CSS:\u00e4\u00e4 lis\u00e4t\u00e4kseni reunukset yll\u00e4 oleviin kappaleisiin. Gutenbergill\u00e4 ei ole viel\u00e4 rajavaihtoehtoa. Voit lis\u00e4t\u00e4 reunuksia jo <a href=\"http:\/\/link.competethemes.com\/elementor-design-tips\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Elementor-<\/a> widgeteill\u00e4.<\/p>\n<h2>2 K\u00e4yt\u00e4 v\u00e4ripalettia<\/h2>\n<p>V\u00e4rien valitseminen lennossa on iso aloittelijavirhe.<\/p>\n<p>Aina kun k\u00e4yt\u00e4t v\u00e4rej\u00e4 verkkosivustollesi, sinun tulee <strong>aina valita v\u00e4ri paletistasi<\/strong>.<\/p>\n<p>Paletin avulla voit yksinkertaisesti valita olemassa olevista v\u00e4reist\u00e4si ja tied\u00e4t, ett\u00e4 lopputulos n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4 ja &quot;tuotemerkilt\u00e4&quot; ilman vaivaa.<\/p>\n<p>Ja t\u00e4ss\u00e4 on asia\u2026<\/p>\n<p>Olen ollut web-suunnittelija vuosia ja kamppailen edelleen mukavien v\u00e4ripalettien luomisen kanssa.<\/p>\n<p>Ja siksi min\u00e4 pet\u00e4n \ud83d\ude09<\/p>\n<p>En koskaan luo omia v\u00e4ripalettejani. Sen sijaan l\u00f6yd\u00e4n upean v\u00e4ripaletin, joka on jo tehty, ja sitten muokkaan sit\u00e4 vastaamaan suunnittelutarpeitani.<\/p>\n<p>Salainen resurssi v\u00e4ripalettien l\u00f6yt\u00e4miseen on <a href=\"https:\/\/colorhunt.co\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Color Hunt<\/a>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbc684325.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbc684325.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>T\u00e4ll\u00e4 mahtavalla verkkosivustolla on j\u00e4senyhteis\u00f6, joka luo ja jakaa suunnittelemiaan v\u00e4ripaletteja.<\/p>\n<p>Jos selaat kotisivua, l\u00f6yd\u00e4t loputtoman luettelon kauniista paletteista, joista valita. Napsauttamalla mit\u00e4 tahansa palettia p\u00e4\u00e4set sen sivulle, jossa asiaan liittyv\u00e4t paletit on lueteltu alla.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbc8a511a.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbc8a511a.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Rehellisesti sanottuna on hauskaa selata paletteja ja saada ideoita ja inspiraatiota sivustollesi.<\/p>\n<p>Jos sinulla on jo jokin s\u00e4vy mieless\u00e4, voit valita ensin v\u00e4rin hakupalkin avulla.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcacb74b.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcacb74b.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Saatavilla on my\u00f6s valmiita avainsanoja, kuten &quot;l\u00e4mmin&quot; ja &quot;kylm\u00e4&quot; sopivien palettien l\u00f6yt\u00e4miseksi.<\/p>\n<p>Kun valitset haluamasi paletin ja otat v\u00e4rit k\u00e4ytt\u00f6\u00f6n sivustollasi, tulet h\u00e4mm\u00e4stym\u00e4\u00e4n, kuinka paljon sill\u00e4 on merkityst\u00e4.<\/p>\n<p>N\u00e4iden kahden ensimm\u00e4isen vinkin pit\u00e4isi huijata vierailijasi ajattelemaan, ett\u00e4 olet v\u00e4rej\u00e4 k\u00e4ytt\u00e4v\u00e4 suunnittelumestari.<\/p>\n<p>Nyt puhutaan fonteista!<\/p>\n<h2>3 K\u00e4yt\u00e4 vain 1 tai 2 fonttia<\/h2>\n<p>V\u00e4rit tulee valita paletistasi. Fontit ovat samanlaisia.<\/p>\n<p>Sinun tulisi valita yksi tai kaksi fonttia ja k\u00e4ytt\u00e4\u00e4 niit\u00e4 sitten uudelleen kaikkeen.<\/p>\n<p>Usein, kun WordPress-k\u00e4ytt\u00e4j\u00e4t oppivat vaihtamaan fontteja sivustollaan, he haluavat yht\u00e4kki\u00e4 k\u00e4ytt\u00e4\u00e4 niit\u00e4 kaikkia!<\/p>\n<p>Olen esimerkiksi n\u00e4hnyt ihmisten vaihtavan yhden kappaleen kirjasinta, jotta se erottuu julkaisussa. Se on huono idea. Jos tarvitset teksti\u00e4 erottuaksesi joukosta viestiss\u00e4, voit:<\/p>\n<ul>\n<li>Lis\u00e4\u00e4 fontin painoa (lihavoituna)<\/li>\n<li>Suurenna kirjasinkokoa<\/li>\n<li>Lis\u00e4\u00e4 v\u00e4ri\u00e4<\/li>\n<\/ul>\n<p>Mit\u00e4 tulee kirjasimiin, sinun tulee <strong>valita yksi tai kaksi koko sivustollesi<\/strong>, ja jos uskot tarvitsevasi enemm\u00e4n, harkitse t\u00e4t\u00e4\u2026<\/p>\n<p>Google suunnitteli Roboto-fontin (jota sin\u00e4kin voit k\u00e4ytt\u00e4\u00e4 \u2013 se on <a href=\"https:\/\/fonts.google.com\/specimen\/Roboto\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google Fontsissa<\/a> ), ja he k\u00e4ytt\u00e4v\u00e4t t\u00e4t\u00e4 kirjasinta kaikkialla.<\/p>\n<p>He k\u00e4ytt\u00e4v\u00e4t sit\u00e4 Google.comissa, Youtubessa, Gmailissa, Google Docsissa ja Chromessa \u2013 kirjaimellisesti kaikki heid\u00e4n tuotteet k\u00e4ytt\u00e4v\u00e4t t\u00e4t\u00e4 yht\u00e4 fonttia koko tekstille.<\/p>\n<p>Joten jos olet vakuuttunut, ett\u00e4 tarvitset useamman kuin yhden kirjasimen kauniiseen verkkosivustoon, mieti uudelleen!<\/p>\n<h2>4 K\u00e4yt\u00e4 suosittua sans serif -fonttia<\/h2>\n<p>Minulla on sinulle toinen pikakuvake.<\/p>\n<p>Sen sijaan, ett\u00e4 selaat satoja kirjasimia, suosittelen, ett\u00e4 valitset verkon menestyneimmist\u00e4 fonteista.<\/p>\n<p>T\u00e4m\u00e4 l\u00e4hestymistapa takaa, ett\u00e4 sivustosi n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4.<\/p>\n<p>Voit tehd\u00e4 t\u00e4m\u00e4n siirtym\u00e4ll\u00e4 <a href=\"https:\/\/fonts.google.com\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Google Fonts<\/a> -sivustolle, josta l\u00f6yd\u00e4t etusivulta noussut kirjasimet.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcd25332.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcd25332.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Tarkenna tuloksia napsauttamalla avattavaa Kategoriat-valikkoa ja poistamalla valinnat kaikista muista paitsi Sans Serif -vaihtoehdoista.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcf5158d.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbcf5158d.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Jos valitset jonkin luetelluista fonteista nyt, sivustosi n\u00e4ytt\u00e4\u00e4 upealta.<\/p>\n<p>Muista, ett\u00e4 suurin osa verkkosivustosi tekstist\u00e4 n\u00e4kyy viesteiss\u00e4si, joten <strong>fontin t\u00e4rkein ominaisuus<\/strong> on, ett\u00e4 sit\u00e4 on helppo lukea.<\/p>\n<p>Kaikki suosituimmat sans serif -fontit ovat suosittuja, koska ne ovat sek\u00e4 luettavia ett\u00e4 houkuttelevia. Ja jos mietit\u2026<\/p>\n<p><strong>T\u00e4t\u00e4 min\u00e4kin teen!<\/strong><\/p>\n<p>Kun suunnittelen uusia teemoja, k\u00e4yn yleens\u00e4 Google Fontsissa ja etsin inspiraatiota trendaavista kirjasimista.<\/p>\n<p>Kun haluan lis\u00e4t\u00e4 suunnitteluun hieman enemm\u00e4n luonnetta, k\u00e4yt\u00e4n t\u00e4t\u00e4 seuraavaa taktiikkaa.<\/p>\n<p>T\u00e4m\u00e4 verkkosivusto k\u00e4ytt\u00e4\u00e4 my\u00f6s yht\u00e4 suosittua sans serif -fonttia nimelt\u00e4 Proxima Nova, joka on saatavana Adobe Typekitiss\u00e4.<\/p>\n<h2>5 K\u00e4yt\u00e4 otsikoissa n\u00e4ytt\u00f6fonttia<\/h2>\n<p>Jos olet tyytyv\u00e4inen yhteen fonttiin, voit ohittaa t\u00e4m\u00e4n taktiikan.<\/p>\n<p>Mutta jos sinusta tuntuu, ett\u00e4 luovuutesi vaikeutuu hieman n\u00e4in yksinkertaisen valinnan vuoksi, voit tehd\u00e4 n\u00e4in\u2026<\/p>\n<p><strong>K\u00e4yt\u00e4 n\u00e4ytt\u00f6fonttia sivustosi otsikoissa.<\/strong><\/p>\n<p>Ensimm\u00e4inen valitsemasi fontti on suunniteltu luettavaksi pieniss\u00e4 koossa, mutta n\u00e4ytt\u00f6fontti on suunniteltu erityisesti suurille kokoille (kuten suurille n\u00e4yt\u00f6ille, ymm\u00e4rr\u00e4tk\u00f6?).<\/p>\n<p>Tosiasia on, ett\u00e4 n\u00e4ytt\u00f6fontit ovat usein eritt\u00e4in tyylikk\u00e4it\u00e4, joten niiden liiallinen k\u00e4ytt\u00f6 voi saada sivustosi n\u00e4ytt\u00e4m\u00e4\u00e4n karmealta.<\/p>\n<p>Otsikot ovat t\u00e4ydellinen paikka k\u00e4ytt\u00e4\u00e4 n\u00e4ytt\u00f6fontteja, koska:<\/p>\n<ul>\n<li>Ne ovat aina suuria<\/li>\n<li>Niit\u00e4 k\u00e4ytet\u00e4\u00e4n s\u00e4\u00e4steli\u00e4\u00e4sti<\/li>\n<\/ul>\n<p>Jos haluat, voit k\u00e4ytt\u00e4\u00e4 n\u00e4ytt\u00f6fonttia uudelleen my\u00f6s sivustosi otsikossa (tai logossa).<\/p>\n<p>L\u00f6yd\u00e4t sivustollesi n\u00e4ytt\u00f6fontin k\u00e4ym\u00e4ll\u00e4 uudelleen Google Fontsissa, mutta t\u00e4ll\u00e4 kertaa muuta luokat sis\u00e4llytt\u00e4m\u00e4\u00e4n vain n\u00e4ytt\u00f6kirjasimia, kuten t\u00e4m\u00e4:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd17935f.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd17935f.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>N\u00e4et heti trendaavista kirjasimista, kuinka paljon monipuolisempia n\u00e4ytt\u00f6fontteja on tarjolla.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd3839b9.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd3839b9.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Google Fontsissa on t\u00e4ll\u00e4 hetkell\u00e4 noin 300 n\u00e4ytt\u00f6fonttia, joten pid\u00e4 hauskaa selaamisesta ja muista valita vain yksi!<\/p>\n<p>T\u00e4ss\u00e4 on toinen tekstipohjainen suunnitteluvinkki, joka tekee verkkosivustostasi kauniimman.<\/p>\n<p>Jos et tied\u00e4 kuinka muuttaa fonttia verkkosivustollasi, <a href=\"https:\/\/themewp.inform.click\/fi\/fonttien-vaihtaminen-wordpressissa-helppo-tapa\/\" title=\"seuraa t\u00e4t\u00e4 opetusohjelmaa\">seuraa t\u00e4t\u00e4 opetusohjelmaa<\/a>.<\/p>\n<p>Kaikista t\u00e4ss\u00e4 viestiss\u00e4 luetelluista suunnitteluvinkeist\u00e4 t\u00e4m\u00e4 on helpoin toteuttaa.<\/p>\n<p>Katso Kilpailevat teemat -valikkoa:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd58ccc4.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd58ccc4.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Valikon kohdat ovat oikeasuhteisia ja tasaisesti sijoitettuja, mik\u00e4 tekee siit\u00e4 hyv\u00e4n n\u00e4k\u00f6isen.<\/p>\n<p>Kun luot valikkoa, sinun tulee <strong>tehd\u00e4 jokaisesta valikon kohdasta yksi sana<\/strong>. Syy l\u00f6ytyy v\u00e4lily\u00f6nnist\u00e4.<\/p>\n<p>Katso esimerkiksi, kuinka tasaisesti valikon kohdat ovat New York Timesissa.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd7ab322.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd7ab322.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>On helppo selata aiheita ja erottaa ne toisistaan.<\/p>\n<p>Kun lis\u00e4\u00e4t sanoja valikon kohtaan, se h\u00e4iritsee t\u00e4t\u00e4 v\u00e4lily\u00f6nti\u00e4. Valikkokohdasta tulee paljon pidempi kuin muut ja sanojen v\u00e4lit luovat suunnitteluun ep\u00e4tasaisuutta.<\/p>\n<p>Alla olevassa kuvakaappauksessa olen lis\u00e4nnyt v\u00e4\u00e4rennettyj\u00e4 valikkokohtia NYT-valikkoon useilla sanoilla. Katso kuinka h\u00e4mment\u00e4v\u00e4 valikosta tulee:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd98dfd4.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbd98dfd4.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Valikkokohtien sis\u00e4ll\u00e4 olevia tiloja on vaikea erottaa valikon kohtien v\u00e4lisist\u00e4<\/p>\n<p>Vaikka yhden sanan valikon kohdat toimivat parhaiten, on hyv\u00e4 k\u00e4ytt\u00e4\u00e4 toisinaan toista sanaa, jos sinun on pakko. Varmista vain, ett\u00e4 valikon kohtien v\u00e4liss\u00e4 on paljon enemm\u00e4n tilaa kuin valikon kohtien sanojen v\u00e4liss\u00e4.<\/p>\n<p>Wistia k\u00e4ytt\u00e4\u00e4 valikkokohdissa kahta sanaa ja se n\u00e4ytt\u00e4\u00e4 hyv\u00e4lt\u00e4, koska valikkokohtien v\u00e4liss\u00e4 on niin paljon tilaa:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbdbf3389.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbdbf3389.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Pitkien valikon kohtien lyhent\u00e4minen vie vain muutaman minuutin ja tekee verkkosivustostasi v\u00e4litt\u00f6m\u00e4sti houkuttelevamman.<\/p>\n<p>Ja jos et tiennyt t\u00e4t\u00e4, voit tehd\u00e4 valikon nimikkeist\u00e4 erilaisia \u200b\u200bkuin sivujen otsikot. T\u00e4m\u00e4 video opettaa sinulle, miten voit luoda mukautettuja valikkoja ja muuttaa valikon tunnisteita:<\/p>\n<div class=\"sds-iframe-wrapper fitvidsignore\" style=\"position:relative;padding-top:56.25%;max-width:100%;\"><iframe allowfullscreen style=\"position:absolute;top:0;left:0;width:100%;height:100%;\" src=\"\/\/www.youtube.com\/embed\/mE8i3jX-i7E\" frameborder=\"0\"><\/iframe><\/div>\n<p>Seuraavat vinkit auttavat sinua tekem\u00e4\u00e4n sis\u00e4ll\u00f6st\u00e4si houkuttelevampaa.<\/p>\n<h2>7 Tasapainota teksti median kanssa<\/h2>\n<p>Jos haluat sivustosi n\u00e4ytt\u00e4v\u00e4n upealta, itse sis\u00e4ll\u00f6n on oltava kaunista.<\/p>\n<p>Tutki suosittujen verkkosivustojen, kuten Buzzfeedin, Washington Postin tai Bloomberg Businessweekin, sis\u00e4lt\u00f6\u00e4, niin l\u00f6yd\u00e4t samat mallit.<\/p>\n<p>He hajottavat jatkuvasti teksti\u00e4 kuvilla, kartoilla, videoilla, lainauksilla, twiiteill\u00e4 ja muilla visuaalisilla elementeill\u00e4.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbde8fc89.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbde8fc89.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>T\u00e4m\u00e4 Buzzfeed-luettelo sis\u00e4lt\u00e4\u00e4 kuvia, jakopainikkeita, linkkej\u00e4 ja otsikoita l\u00e4hes jokaisen kappaleen j\u00e4lkeen<\/p>\n<p>Kutsun sit\u00e4 <strong>4 kappaleen s\u00e4\u00e4nn\u00f6ksi.<\/strong><\/p>\n<p>Kun muokkaat viestej\u00e4si, muista <strong>sis\u00e4llytt\u00e4\u00e4 visuaalinen elementti noin joka nelj\u00e4s kappale<\/strong>.<\/p>\n<p>Tavoitteena on pit\u00e4\u00e4 sis\u00e4lt\u00f6 visuaalisesti kiinnostavana, jotta siit\u00e4 ei tule yksitoikkoista ja tyls\u00e4\u00e4 lukijan selattaessa tavallista kappaletta kappaleen j\u00e4lkeen. Visuaaliset elementit tekev\u00e4t sis\u00e4ll\u00f6st\u00e4 my\u00f6s informatiivisemman ja hauskempaa luettavaa.<\/p>\n<p>Harjoittelemalla opit tekem\u00e4\u00e4n t\u00e4m\u00e4n luonnollisesti kirjoittaessasi, mutta voit aina selata viesti\u00e4si sen valmistumisen j\u00e4lkeen ja l\u00f6yt\u00e4\u00e4 paikkoja, joihin voit lis\u00e4t\u00e4 uusia visuaaleja.<\/p>\n<p>Voit hajottaa pitk\u00e4n sarjan kappaleita lis\u00e4\u00e4m\u00e4ll\u00e4:<\/p>\n<ul>\n<li>Kuvat<\/li>\n<li>Lohkolainaukset<\/li>\n<li>Videot<\/li>\n<li>Upotetut twiitit<\/li>\n<li>Mainokset<\/li>\n<li>Taulukot<\/li>\n<li>Uudet otsikot<\/li>\n<li>Listat \ud83d\ude09<\/li>\n<\/ul>\n<p>On my\u00f6s hyv\u00e4 idea k\u00e4ytt\u00e4\u00e4 lihavointia t\u00e4rkeiss\u00e4 tekstin osissa huomion her\u00e4tt\u00e4miseksi ja visuaalisen kiinnostuksen lis\u00e4\u00e4miseksi.<\/p>\n<p>Ja vain selv\u00e4ksi: sinun ei tarvitse sis\u00e4llytt\u00e4\u00e4 visuaalista elementti\u00e4 tarkalleen joka nelj\u00e4s kappale. T\u00e4m\u00e4 on vain hyv\u00e4 arvio, jota voit k\u00e4ytt\u00e4\u00e4, kun hallitset t\u00e4m\u00e4n tekniikan.<\/p>\n<p>Koska olen juuri k\u00e4skenyt sinua sis\u00e4llytt\u00e4m\u00e4\u00e4n viesteihisi paljon kuvia, t\u00e4ss\u00e4 on vinkki, miten voit tehd\u00e4 sen oikein.<\/p>\n<h2>8 Tasaa kuvat keskelle<\/h2>\n<p>WordPressin kuvilla voi olla jokin seuraavista kohdistuksista:<\/p>\n<ul>\n<li>Aivan<\/li>\n<li>Vasen<\/li>\n<li>Keskusta<\/li>\n<\/ul>\n<p>Kun lis\u00e4\u00e4t kuvia viesteihisi, <strong>k\u00e4yt\u00e4 aina keskitasausta<\/strong>.<\/p>\n<p>Teknisesti kuvan kohdistus on &quot;ei mit\u00e4\u00e4n&quot; ennen kuin keskit\u00e4t sen, ja sekin on hyv\u00e4.<\/p>\n<p>Lis\u00e4ksi <strong>varmista, ett\u00e4 kuva on yht\u00e4 leve\u00e4 kuin postitse sis\u00e4lt\u00f6\u00e4<\/strong>.<\/p>\n<p>T\u00e4ll\u00e4 tavalla n\u00e4yt\u00e4n kaikki kuvani viesteiss\u00e4ni, ja useimmat julkaisijat tekev\u00e4t sen my\u00f6s t\u00e4ll\u00e4 tavalla.<\/p>\n<p>Jos valitset tasauksen vasemmalle tai oikealle, kuva &quot;kelluu&quot; toiselle puolelle, joten teksti kiertyy sen ymp\u00e4rille seuraavasti:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbe0d96ed.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbe0d96ed.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>&quot;Float&quot; on CSS-ominaisuuden nimi, jota k\u00e4ytet\u00e4\u00e4n tekstin kiert\u00e4miseen kuvien ymp\u00e4rille.<\/p>\n<p>Viimeinen tekstirivi, joka on l\u00e4hes kokonaan kuvan alapuolella, n\u00e4ytt\u00e4\u00e4 aina hankalalta, mutta on toinenkin syy, miksi t\u00e4m\u00e4 ei ole en\u00e4\u00e4 suosittu tyyli.<\/p>\n<p>Se voi n\u00e4ytt\u00e4\u00e4 kamalalta mobiilissa:<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbe4272bf.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbe4272bf.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Bloggaajat leijuivat t\u00e4llaisissa viesteiss\u00e4\u00e4n kuvia, mutta se oli silloin, kun verkkosivustoilla oli yksi ennalta m\u00e4\u00e4ritetty leveys ja niit\u00e4 katseltiin vain tietokoneilla.<\/p>\n<p>Nyt sis\u00e4lt\u00f6si on mukauduttava n\u00e4yt\u00f6n kokoihin 400 pikselist\u00e4 2 560 pikseliin.<\/p>\n<p>Olet luultavasti jo valinnut reagoivan teeman, mutta teemasi ei est\u00e4 sinua kellumasta kuvista, koska se on sinun valintasi.<\/p>\n<p>Sanon, ett\u00e4 kohdista kaikki kuvasi keskelle, niin ne n\u00e4ytt\u00e4v\u00e4t hyv\u00e4lt\u00e4 kaikissa laitteissa. Niinkin helppoa.<\/p>\n<p>Jos haluat hieman monipuolisempaa, voit k\u00e4ytt\u00e4\u00e4 <a href=\"https:\/\/themewp.inform.click\/fi\/wordpressin-lohkoeditorin-kayttaminen-gutenbergin-olennainen-opas\/\" title=\"Gutenbergiin\">Gutenbergiin<\/a> lis\u00e4tty\u00e4 uutta laajakuvatyyli\u00e4 (vaatii teematuen):<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbe66be2c.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbe66be2c.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Minulla on viimeinen vinkki kuviesi ja muun median n\u00e4ytt\u00e4miseksi upeilta.<\/p>\n<h2>9 Laita mediasi sarakkeisiin<\/h2>\n<p>N\u00e4en t\u00e4m\u00e4n monilla teemak\u00e4ytt\u00e4jieni verkkosivustoilla.<\/p>\n<p>Kun lis\u00e4\u00e4t useita mediakohteita (kuvia, \u00e4\u00e4nt\u00e4, videoita), ne pinotaan per\u00e4kk\u00e4in.<\/p>\n<p>Se toimii hyvin, mutta se ei ole paras tilank\u00e4ytt\u00f6. K\u00e4ytt\u00e4jien on vieritett\u00e4v\u00e4 todella pitk\u00e4lle p\u00e4\u00e4st\u00e4kseen kuvista eteenp\u00e4in, he voivat katsella vain yht\u00e4 kuvaa kerrallaan, eiv\u00e4tk\u00e4 he tied\u00e4, kuinka monta kuvaa on j\u00e4ljell\u00e4 vierityksen aikana.<\/p>\n<p><strong>Jos lis\u00e4\u00e4t v\u00e4hint\u00e4\u00e4n kolme kuvaa per\u00e4kk\u00e4in, k\u00e4yt\u00e4 galleriaa<\/strong>.<\/p>\n<p>Kun k\u00e4yt\u00e4t sen sijaan galleriaa, voit tarkastella kaikkia kuvia kerralla ilman vieritt\u00e4mist\u00e4.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbe9ef114.png\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-222525-6171cbe9ef114.png\" alt=\"9 yksinkertaista suunnittelus\u00e4\u00e4nt\u00f6\u00e4, jotka tekev\u00e4t sivustostasi kauniimman\"><\/a><\/p>\n<p>Ja tied\u00e4n mit\u00e4 ajattelet nyt\u2026<\/p>\n<p>&quot;Se on mukavaa, mutta haluan kuvien n\u00e4kyv\u00e4n t\u00e4t\u00e4 suurempina.&quot;<\/p>\n<p>Sit\u00e4 varten valolaatikko on. Voit <a href=\"https:\/\/www.competethemes.com\/blog\/add-lightbox-wordpress\/\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">asentaa lightbox-laajennuksen, jonka<\/a> j\u00e4lkeen vierailijat voivat napsauttaa kuvaa galleriassa n\u00e4hd\u00e4kseen suuremman koko n\u00e4yt\u00f6n version.<\/p>\n<p>Nyt sen sijaan, ett\u00e4 vierailijat joutuisivat selaamaan kaikkia kuvia, he voivat n\u00e4hd\u00e4 ne kaikki kerralla houkuttelevassa galleria-asettelussa. Lis\u00e4ksi, kun he napsauttavat kuvaa, valolaatikko n\u00e4ytt\u00e4\u00e4 kuvan suurempana kuin jos se olisi vain lis\u00e4tty viestiin.<\/p>\n<p>Toisin sanoen gallerian k\u00e4ytt\u00f6 antaa sinulle molempien maailmojen parhaat puolet.<\/p>\n<p>Galleria-lohkon avulla on helppo sis\u00e4llytt\u00e4\u00e4 kuvagallerioita, ja voit k\u00e4ytt\u00e4\u00e4 Sarake-lohkoa \u00e4\u00e4ni- ja videoupotussarakkeiden (ja mink\u00e4 tahansa muun sis\u00e4ll\u00f6n) luetteloimiseen.<\/p>\n<p>Column-lohkosta tuli juuri entist\u00e4kin helpompi k\u00e4ytt\u00e4\u00e4 WP 5.3:ssa, ja voit seurata t\u00e4t\u00e4 <a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-lisata-sarakkeita-wordpress-viesteihin-gutenbergin-avulla\/\" title=\"opasta sarakkeiden lis\u00e4\u00e4misest\u00e4 viesteihin\">opasta sarakkeiden lis\u00e4\u00e4misest\u00e4 viesteihin<\/a> saadaksesi vaiheittaiset ohjeet.<\/p>\n<p>Aina kun l\u00f6yd\u00e4t viestiisi upotetun pitk\u00e4n luettelon mediaa, tied\u00e4t, ett\u00e4 on t\u00e4ydellinen aika hy\u00f6dynt\u00e4\u00e4 sarakkeita.<\/p>\n<h2>Tee kauniimpi verkkosivusto<\/h2>\n<p>N\u00e4iden 9 suunnittelus\u00e4\u00e4nn\u00f6n avulla olet valmis luomaan kauniimman verkkosivuston.<\/p>\n<p>Parasta on, ett\u00e4 n\u00e4iden periaatteiden toteuttaminen ei vie kauan. Pelkk\u00e4 tieto siit\u00e4, mit\u00e4 tehd\u00e4, on puoli voittoa.<\/p>\n<p>Jos haluat aloittaa oikealla jalalla, varmista, ett\u00e4 <a href=\"https:\/\/themewp.inform.click\/fi\/kuinka-valita-wordpress-teema-josta-pidat\/\" title=\"valitset teeman\">valitset teeman<\/a>, joka saa sis\u00e4ll\u00f6st\u00e4si n\u00e4ytt\u00e4m\u00e4\u00e4n upealta ja olet hyv\u00e4ll\u00e4 tiell\u00e4 kohti parempaa estetiikkaa.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/www.competethemes.com\" class=\"external external_icon\">www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8221;Pid\u00e4n suunnittelua.&#8221; Jos olet joskus sanonut niin, t\u00e4m\u00e4 viesti on sinulle. Noudata n\u00e4it\u00e4 9 yksinkertaista s\u00e4\u00e4nt\u00f6\u00e4 saadaksesi kaiken sivustosi n\u00e4ytt\u00e4m\u00e4\u00e4n paremmalta.<\/p>\n","protected":false},"author":1,"featured_media":19783,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[550],"tags":[843],"class_list":["post-231787","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mukauta-wordpress","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/231787","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=231787"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/231787\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/19783"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=231787"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=231787"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=231787"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}