{"id":367055,"date":"2023-02-04T12:12:00","date_gmt":"2023-02-04T09:12:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367055"},"modified":"2023-03-31T19:43:52","modified_gmt":"2023-03-31T16:43:52","slug":"opas-wordpress-gutenberg-kuvalohkoon","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/opas-wordpress-gutenberg-kuvalohkoon\/","title":{"rendered":"Opas WordPress Gutenberg -kuvalohkoon"},"content":{"rendered":"\n<p>Yksi WordPressin suosituimmista sivujen rakentajista, Gutenberg sis\u00e4lt\u00e4\u00e4 valmiiden elementtien kirjaston, <a href=\"https:\/\/themewp.inform.click\/fi\/uudet-wordpressin-gutenberg-lohkot-selitetty\/\" title=\"joka tunnetaan my\u00f6s nimell\u00e4 Gutenberg-lohkot\">joka tunnetaan my\u00f6s nimell\u00e4 Gutenberg-lohkot<\/a>. Lohkot mahdollistavat sujuvan, virtaviivaisen ja helpon sivunrakennuskokemuksen, koska ne ovat uskomattoman intuitiivisia ja k\u00e4yt\u00e4nn\u00f6llisi\u00e4. T\u00e4ss\u00e4 oppaassa teemme yleiskatsauksen Gutenberg-kuvalohkosta ja kaikesta, mit\u00e4 voit tehd\u00e4 sill\u00e4.<\/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\/b3oXhjbhW6k\" frameborder=\"0\"><\/iframe><\/div>\n<h2>Oletuskuvalohko ja sen lis\u00e4\u00e4minen<\/h2>\n<p>Lyhyesti sanottuna Gutenberg Image Blockin avulla voit <strong>lis\u00e4t\u00e4 kuvan mihin tahansa sivullesi tai viestiisi<\/strong>. Jos napsautat editorissa pluspainiketta, uusi kentt\u00e4 avautuu. T\u00e4\u00e4lt\u00e4 p\u00e4\u00e4set kuvavaihtoehtoon. Kuten alla n\u00e4et, t\u00e4ss\u00e4 editorissa sinulla on erilliset vaihtoehdot Gutenberg- <a href=\"https:\/\/themewp.inform.click\/fi\/johdatus-gutenbergin-gallerialohkon-ominaisuuksiin\/\" title=\"kuvalohkon ja Gutenberg-gallerialohkon\">kuvalohkon ja Gutenberg-gallerialohkon<\/a> lis\u00e4\u00e4miseen .<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e74870f8d7.jpg\" alt=\"Opas WordPress Gutenberg -kuvalohkoon\"><\/a><\/p>\n<p>Gutenbergiss\u00e4 on kolme eri tapaa lis\u00e4t\u00e4 kuvia. Voit <strong>ladata kuvan tietokoneeltasi, valita jo olemassa olevan kuvan mediakirjastostasi tai lis\u00e4t\u00e4 sen URL-osoitteesta<\/strong>.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7489c269a.jpg\" alt=\"Opas WordPress Gutenberg -kuvalohkoon\"><\/a><\/p>\n<p>Ensi silm\u00e4yksell\u00e4 kuvalohko sis\u00e4lt\u00e4\u00e4 samat vaihtoehdot kuin klassisen editorin Lis\u00e4\u00e4 media -painike. Tarkemmin tarkasteltuna on kuitenkin selv\u00e4\u00e4, ett\u00e4 t\u00e4m\u00e4 on vain osittain totta. Gutenbergin mukana tulee joitain uusia hy\u00f6dyllisi\u00e4 vaihtoehtoja, jotka helpottavat kuvien muokkauskokemusta entisest\u00e4\u00e4n.<\/p>\n<p>Ensimm\u00e4inen on pienten sinisten pisteiden lis\u00e4\u00e4minen kuvaan. N\u00e4iden pisteiden ansiosta voit <strong>venytt\u00e4\u00e4 kuvaa ja suurentaa ja pienent\u00e4\u00e4 sen kokoa haluamallasi tavalla<\/strong>. Toinen uusi vaihtoehto on mahdollisuus kirjoittaa kuvateksti kuvan alaosaan.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748d4cd3c.jpg\" alt=\"Opas WordPress Gutenberg -kuvalohkoon\"><\/a><\/p>\n<p>L\u00f6yd\u00e4t kaikki perusasetukset aivan Image Blockin yl\u00e4puolelta. Toisaalta edistyneemm\u00e4t kuvaasetukset sijaitsevat Est\u00e4-v\u00e4lilehdess\u00e4. N\u00e4it\u00e4 ovat vaihtoehtoinen teksti, kuvan koko, linkkiasetukset ja lis\u00e4asetukset.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e748fd300e.jpg\" alt=\"Opas WordPress Gutenberg -kuvalohkoon\"><\/a><\/p>\n<ul>\n<li><strong>Vaihtoehtoinen teksti<\/strong> \u2013 t\u00e4h\u00e4n voit lis\u00e4t\u00e4 lyhyen kuvauksen kuvastasi. Voit kuitenkin j\u00e4tt\u00e4\u00e4 t\u00e4m\u00e4n kent\u00e4n tyhj\u00e4ksi, jos kuvasi ei ole sis\u00e4lt\u00f6si ydin.<\/li>\n<li><strong>Kuvakoko<\/strong> \u2013 voit muuttaa kuvan kokoa oletuskooksi, kuten pikkukuva, keskikoko, suuri ja t\u00e4ysikokoinen. Toinen vaihtoehto on lis\u00e4t\u00e4 tarkat kuvan mitat pikselein\u00e4 tai m\u00e4\u00e4ritt\u00e4\u00e4 haluttu koko prosentteina suhteessa alkuper\u00e4iseen kokoon. Jos teet virheit\u00e4, voit aina napsauttaa Reset-painiketta.<\/li>\n<li><strong>Linkkiasetukset<\/strong> \u2013 t\u00e4ss\u00e4 sinulla on nelj\u00e4 eri vaihtoehtoa: Ei mit\u00e4\u00e4n, Liitesivu, Mediatiedosto ja mukautettu URL-osoite. Ei mit\u00e4\u00e4n -vaihtoehdon avulla voit n\u00e4ytt\u00e4\u00e4 kuvan ilman linkki\u00e4, kun taas liitesivulla on linkki tietylle sivustosi sivulle, jonka tarkoituksena on tarjota tietoja kyseisest\u00e4 kuvasta. Mit\u00e4 tulee mediatiedostoon, se avaa kuvan itsest\u00e4\u00e4n. Viimeisen vaihtoehdon avulla voit lis\u00e4t\u00e4 mukautetun URL-osoitteen kuvallesi.<\/li>\n<li><strong>Advanced<\/strong> \u2013 t\u00e4h\u00e4n kentt\u00e4\u00e4n voit lis\u00e4t\u00e4 ylim\u00e4\u00e4r\u00e4isen CSS-luokan ja kirjoittaa omia mukautettuja tyylej\u00e4si.<\/li>\n<\/ul>\n<p>Muita kuvapalkin vaihtoehtoja ovat kuvan kohdistus (kohdista se vasemmalle, oikealle tai keskelle) ja Muuta lohkotyyppi\u00e4. T\u00e4m\u00e4n vaihtoehdon valitseminen antaa sinulle mahdollisuuden <strong>muuttaa lohkosi toiseksi yhteensopivaksi lohkoksi yhdell\u00e4 hiiren napsautuksella<\/strong>. Voit esimerkiksi vaihtaa lohkotyypiksi galleria, media ja teksti, kansi ja tiedosto.<\/p>\n<p><a href=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2022\/10\/post-346234-633e7492b2ebc.jpg\" alt=\"Opas WordPress Gutenberg -kuvalohkoon\"><\/a><\/p>\n<p>Jos haluat muokata kuvaa samalla tavalla kuin teit perinteisess\u00e4 WordPress-editorissa, voit tehd\u00e4 sen helposti napsauttamalla kyn\u00e4kuvaketta avataksesi kuvan WordPressin mediakirjastossa.<\/p>\n<p>T\u00e4ss\u00e4 on kaikki oletuskuvalohkosta, mutta sinun pit\u00e4isi tiet\u00e4\u00e4, ett\u00e4 siell\u00e4 on my\u00f6s joitain kehittyneempi\u00e4 vaihtoehtoja.<\/p>\n<h2>Kuvien lis\u00e4\u00e4minen Qi-lohkoilla Gutenbergille<\/h2>\n<p><a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Qi Blocks for Gutenberg<\/a> on rikas kokoelma mukautettuja Gutenberg-lohkoja, joiden avulla voit tehd\u00e4 paljon enemm\u00e4n (ja parempiin esteettisiin tuloksiin) kuin normaalisti oletuslohkoilla. Kokoelman <strong>voi ladata ilmaiseksi virallisesta WordPress-arkistosta, jolloin saat upean 48 lohkon sarjan kaikkea luovista ja esittelyelementeist\u00e4 liiketoimintaan ja hakukoneoptimointiin<\/strong>. Niille, jotka haluavat entist\u00e4 parempia vaihtoehtoja ja kehittyneempi\u00e4 ominaisuuksia, on tarjolla my\u00f6s <strong>Qi Blocks Premium -paketti, jossa on 33 lis\u00e4lohkoa<\/strong>.<\/p>\n<p>T\u00e4ll\u00e4 kertaa meit\u00e4 kiinnostava lohko on <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/single-image\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Single Image -lohko<\/a>. Luulisi, ett\u00e4 kuvien lis\u00e4\u00e4minen sivuille ja viesteihin on yksinkertaisin asia, mutta Gutenbergin Single Image -lohkon avulla voit tehd\u00e4 sen \u00e4\u00e4rimm\u00e4isen helposti miss\u00e4 tahansa sivustossasi, vaan sen <strong>mukana tulee my\u00f6s joukko ainutlaatuisia vaihtoehtoja<\/strong>. Voit esimerkiksi valita erilaisia \u200b\u200bkuvatoimintoja, s\u00e4\u00e4t\u00e4\u00e4 leveytt\u00e4, korkeutta, reunoja, kohdistusta, asettaa hiirik\u00e4ytt\u00e4ytymist\u00e4, ottaa valolaatikon k\u00e4ytt\u00f6\u00f6n ja paljon muuta.<\/p>\n<p>Toinen h\u00e4mm\u00e4stytt\u00e4v\u00e4 lohko, joka ansaitsee huomiomme t\u00e4ss\u00e4, on <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/parallax-image-showcase\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Parallax Image Showcase<\/a>, jonka avulla voit luoda kaksoiskuvaosia kuvilla, jotka liikkuvat eri nopeuksilla vierityksen aikana, luoden j\u00e4nnitt\u00e4v\u00e4n illuusion syvyydest\u00e4.<\/p>\n<p>Sitten on <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-hotspots\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Image Hotspots -lohko<\/a>, jossa on kuviin sijoitetut kuvakkeet tai muut symbolit, jotka paljastavat tietoja, kun k\u00e4ytt\u00e4j\u00e4 vie hiiren niiden p\u00e4\u00e4lle.<\/p>\n<p>Lopuksi <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/image-slider\/?campaign=GutenbergImageBlock&amp;ref=1\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Image Slider -lohko<\/a> voi auttaa sinua luomaan vaikuttavia, mukaansatempaavia liukus\u00e4\u00e4timi\u00e4 valitsemiesi kuvien kanssa, mik\u00e4 lis\u00e4\u00e4 ripauksen dynaamisuutta sivuillesi. T\u00e4m\u00e4n lohkon avulla et en\u00e4\u00e4 tarvitse monimutkaisia, vaikeasti mukautettavia liukus\u00e4\u00e4dinlaajennuksia. Saat kaiken tarvitsemasi yhdess\u00e4, intuitiivisessa ja t\u00e4ysin muokattavassa lohkossa.<\/p>\n<p>Kuten n\u00e4imme, voit tehd\u00e4 paljon Image Blockilla riippumatta siit\u00e4, k\u00e4yt\u00e4tk\u00f6 Gutenbergin mukana tulevaa oletusarvoa tai valitset kolmannen osapuolen ratkaisun, kuten Gutenbergin Qi Blocks -sovelluksen tapauksessa. Kuvat ovat eritt\u00e4in t\u00e4rkeit\u00e4 mille tahansa verkkosivustolle, koska ne voivat usein kertoa ja tehd\u00e4 paljon enemm\u00e4n kuin sanat. Gutenbergin ansiosta niiden lis\u00e4\u00e4minen viesteihisi ja sivuillesi ei ole koskaan ollut helpompaa.<\/p>\n<p>Toivomme, ett\u00e4 t\u00e4m\u00e4 artikkeli oli hy\u00f6dyllinen. Jos pidit siit\u00e4, tutustu my\u00f6s joihinkin n\u00e4ist\u00e4 artikkeleista!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>T\u00e4ss\u00e4 lyhyess\u00e4 oppaassa teemme yleiskatsauksen Gutenberg Image Blockista ja n\u00e4yt\u00e4mme sinulle kaiken, mit\u00e4 voit tehd\u00e4 t\u00e4ll\u00e4 hy\u00f6dyllisell\u00e4 vaihtoehdolla.<\/p>\n","protected":false},"author":1,"featured_media":363766,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[570],"tags":[843],"class_list":["post-367055","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\/367055","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=367055"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/367055\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/363766"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=367055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=367055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=367055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}