{"id":367015,"date":"2023-02-04T12:38:00","date_gmt":"2023-02-04T09:38:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=367015"},"modified":"2023-03-31T19:28:14","modified_gmt":"2023-03-31T16:28:14","slug":"przewodnik-po-bloku-obrazu-wordpress-gutenberg","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/pl\/przewodnik-po-bloku-obrazu-wordpress-gutenberg\/","title":{"rendered":"Przewodnik po bloku obrazu WordPress Gutenberg"},"content":{"rendered":"\n<p>Jeden z najpopularniejszych kreator\u00f3w stron dla WordPressa, Gutenberg zawiera bibliotek\u0119 gotowych element\u00f3w, <a href=\"https:\/\/themewp.inform.click\/pl\/wyjasnienie-nowych-blokow-wordpressa-gutenberga\/\" title=\"zwanych inaczej blokami Gutenberga\">zwanych inaczej blokami Gutenberga<\/a>. Bloki pozwalaj\u0105 na p\u0142ynne, usprawnione i \u0142atwe tworzenie stron, poniewa\u017c s\u0105 niezwykle intuicyjne i praktyczne. W tym przewodniku dokonamy przegl\u0105du bloku obrazu Gutenberga i wszystkiego, co mo\u017cesz z nim zrobi\u0107.<\/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>Domy\u015blny blok obrazu i jak go doda\u0107<\/h2>\n<p>W skr\u00f3cie, Gutenberg Image Block pozwala <strong>doda\u0107 obraz w dowolnym miejscu na stronie lub w po\u015bcie<\/strong>. Je\u015bli klikniesz przycisk plusa w edytorze, otworzy si\u0119 nowe pole. Tutaj mo\u017cesz uzyska\u0107 dost\u0119p do opcji Obraz. Jak wida\u0107 poni\u017cej, w tym edytorze masz r\u00f3wnie\u017c osobne opcje dodawania bloku obrazu Gutenberg i <a href=\"https:\/\/themewp.inform.click\/pl\/wprowadzenie-do-funkcji-bloku-galerii-gutenberg\/\" title=\"bloku galerii Gutenberg\">bloku galerii Gutenberg<\/a>.<\/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=\"Przewodnik po bloku obrazu WordPress Gutenberg\"><\/a><\/p>\n<p>W Gutenbergu istniej\u0105 trzy r\u00f3\u017cne sposoby dodawania zdj\u0119\u0107. Mo\u017cesz <strong>przes\u0142a\u0107 obraz z komputera, wybra\u0107 ju\u017c istniej\u0105cy obraz z Biblioteki multimedi\u00f3w lub wstawi\u0107 go z adresu URL<\/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=\"Przewodnik po bloku obrazu WordPress Gutenberg\"><\/a><\/p>\n<p>Na pierwszy rzut oka blok obrazu zawiera te same opcje, co przycisk Dodaj multimedia w klasycznym edytorze. Jednak po bli\u017cszym przyjrzeniu si\u0119 wida\u0107, \u017ce jest to tylko cz\u0119\u015bciowo prawda. Istnieje kilka nowych przydatnych opcji, kt\u00f3re s\u0105 dostarczane z Gutenbergiem, kt\u00f3re jeszcze bardziej u\u0142atwi\u0105 edycj\u0119 zdj\u0119\u0107.<\/p>\n<p>Pierwszy to dodanie ma\u0142ych, niebieskich kropek na Twoim obrazie. Dzi\u0119ki tym kropkom mo\u017cesz <strong>rozci\u0105gn\u0105\u0107 obraz oraz zwi\u0119kszy\u0107 lub zmniejszy\u0107 jego rozmiar w dowolny spos\u00f3b<\/strong>. Kolejn\u0105 now\u0105 opcj\u0105 jest mo\u017cliwo\u015b\u0107 napisania podpisu na dole obrazu.<\/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=\"Przewodnik po bloku obrazu WordPress Gutenberg\"><\/a><\/p>\n<p>Wszystkie podstawowe ustawienia mo\u017cna znale\u017a\u0107 tu\u017c nad blokiem obrazu. Z drugiej strony bardziej zaawansowane ustawienia obrazu znajduj\u0105 si\u0119 w zak\u0142adce Blok. Nale\u017c\u0105 do nich tekst alternatywny, rozmiar obrazu, ustawienia \u0142\u0105cza i zaawansowane.<\/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=\"Przewodnik po bloku obrazu WordPress Gutenberg\"><\/a><\/p>\n<ul>\n<li><strong>Alt Text<\/strong> \u2013 tutaj mo\u017cesz doda\u0107 kr\u00f3tki opis swojego obrazu. Mo\u017cesz jednak pozostawi\u0107 to pole puste, je\u015bli obraz nie jest g\u0142\u00f3wnym elementem tre\u015bci.<\/li>\n<li><strong>Rozmiar obrazu<\/strong> \u2013 istnieje mo\u017cliwo\u015b\u0107 zmiany rozmiaru obrazu na rozmiary domy\u015blne, takie jak miniatura, \u015bredni, du\u017cy i pe\u0142ny rozmiar. Inn\u0105 alternatyw\u0105 jest dodanie dok\u0142adnych wymiar\u00f3w obrazu w pikselach lub okre\u015blenie \u017c\u0105danego rozmiaru w procentach w stosunku do oryginalnego rozmiaru. Je\u015bli pope\u0142nisz jakiekolwiek b\u0142\u0119dy, zawsze mo\u017cesz klikn\u0105\u0107 przycisk Resetuj.<\/li>\n<li><strong>Ustawienia \u0142\u0105cza<\/strong> \u2013 tutaj masz cztery r\u00f3\u017cne opcje: Brak, Strona za\u0142\u0105cznika, Plik multimedialny i niestandardowy adres URL. Opcja Brak umo\u017cliwia wy\u015bwietlenie obrazu bez linku, podczas gdy Strona z za\u0142\u0105cznikami prowadzi do okre\u015blonej strony w witrynie, kt\u00f3ra ma na celu dostarczenie informacji o danym obrazie. Je\u015bli chodzi o plik multimedialny, sam otwiera obraz. Ostatnia opcja umo\u017cliwia dodanie niestandardowego adresu URL do obrazu.<\/li>\n<li><strong>Zaawansowane<\/strong> \u2013 w tym polu mo\u017cesz doda\u0107 dodatkow\u0105 klas\u0119 CSS i pisa\u0107 w\u0142asne niestandardowe style.<\/li>\n<\/ul>\n<p>Dodatkowe opcje paska obrazu obejmuj\u0105 wyr\u00f3wnanie obrazu (wyr\u00f3wnaj go do lewej, prawej lub do \u015brodka) i Zmie\u0144 typ bloku. Wybranie tej opcji daje mo\u017cliwo\u015b\u0107 <strong>przekszta\u0142cenia Twojego bloku w inny kompatybilny blok za pomoc\u0105 jednego klikni\u0119cia mysz\u0105<\/strong>. Na przyk\u0142ad mo\u017cesz zmieni\u0107 typ bloku na galeri\u0119, media i tekst, ok\u0142adk\u0119 i plik.<\/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=\"Przewodnik po bloku obrazu WordPress Gutenberg\"><\/a><\/p>\n<p>Je\u015bli chcesz edytowa\u0107 sw\u00f3j obraz w taki sam spos\u00f3b, jak w klasycznym edytorze WordPress, mo\u017cesz to \u0142atwo zrobi\u0107, klikaj\u0105c ikon\u0119 o\u0142\u00f3wka, aby otworzy\u0107 obraz w bibliotece multimedi\u00f3w WordPress.<\/p>\n<p>To wszystko, co dotyczy domy\u015blnego bloku obrazu, ale powiniene\u015b wiedzie\u0107, \u017ce istnieje r\u00f3wnie\u017c kilka bardziej zaawansowanych opcji.<\/p>\n<h2>Dodawanie obraz\u00f3w za pomoc\u0105 blok\u00f3w Qi dla Gutenberga<\/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\">Bloki Qi dla Gutenberga<\/a> to bogata kolekcja niestandardowych blok\u00f3w Gutenberga, kt\u00f3re pozwalaj\u0105 zrobi\u0107 o wiele wi\u0119cej (i uzyska\u0107 lepsze wyniki estetyczne) ni\u017c normalnie robisz z domy\u015blnymi blokami. Kolekcj\u0119 <strong>mo\u017cna pobra\u0107 bezp\u0142atnie z oficjalnego repozytorium WordPressa, co daje wspania\u0142y zestaw 48 blok\u00f3w do wszystkiego, od element\u00f3w kreatywnych i prezentacyjnych, po biznes i SEO<\/strong>. Dla tych, kt\u00f3rzy chc\u0105 jeszcze lepszych opcji i bardziej zaawansowanych funkcji, dost\u0119pny jest r\u00f3wnie\u017c <strong>pakiet Qi Blocks Premium z 33 dodatkowymi blokami<\/strong>.<\/p>\n<p>Tym razem interesuj\u0105cy nas blok to blok <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<\/a>. Mo\u017cna by pomy\u015ble\u0107, \u017ce dodawanie obraz\u00f3w do stron i post\u00f3w jest najprostsz\u0105 rzecz\u0105, jaka istnieje, ale blok pojedynczego obrazu dla Gutenberga pozwala nie tylko robi\u0107 to z najwi\u0119ksz\u0105 \u0142atwo\u015bci\u0105, w dowolnym miejscu w witrynie, ale tak\u017ce <strong>zawiera szereg ekskluzywnych opcje<\/strong>. Na przyk\u0142ad mo\u017cesz wybra\u0107 r\u00f3\u017cne dzia\u0142ania na obrazach, dostosowa\u0107 szeroko\u015b\u0107, wysoko\u015b\u0107, obramowanie, wyr\u00f3wnanie, ustawi\u0107 zachowanie najechania, w\u0142\u0105czy\u0107 lightbox i wiele wi\u0119cej.<\/p>\n<p>Kolejnym niesamowitym blokiem, kt\u00f3ry zas\u0142uguje na nasz\u0105 uwag\u0119, jest <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>, kt\u00f3ry pozwala tworzy\u0107 sekcje podw\u00f3jnego obrazu z obrazami poruszaj\u0105cymi si\u0119 z r\u00f3\u017cnymi pr\u0119dko\u015bciami podczas przewijania, tworz\u0105c ekscytuj\u0105c\u0105 iluzj\u0119 g\u0142\u0119bi.<\/p>\n<p>Nast\u0119pnie jest <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\">blok Image Hotspots<\/a>, z ikonami lub innymi symbolami umieszczonymi na obrazach, ujawniaj\u0105cymi informacje, gdy u\u017cytkownik najedzie na nie.<\/p>\n<p>Wreszcie, <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\">blok Image Slider<\/a> mo\u017ce pom\u00f3c w tworzeniu imponuj\u0105cych, wci\u0105gaj\u0105cych suwak\u00f3w z wybranymi obrazami, dodaj\u0105c odrobin\u0119 dynamiki Twoim stronom. Dzi\u0119ki temu blokowi nie potrzebujesz ju\u017c skomplikowanych, trudnych do dostosowania wtyczek suwak\u00f3w. Dostajesz wszystko, czego potrzebujesz w jednym, intuicyjnym i ca\u0142kowicie konfigurowalnym bloku.<\/p>\n<p>Jak widzieli\u015bmy, z blokiem obrazu mo\u017cna zrobi\u0107 wiele, niezale\u017cnie od tego, czy u\u017cywasz domy\u015blnego, kt\u00f3ry jest dostarczany z Gutenbergiem, czy zdecydujesz si\u0119 na rozwi\u0105zanie innej firmy, jak w przypadku Qi Blocks dla Gutenberga. Obrazy s\u0105 bardzo wa\u017cne dla ka\u017cdej witryny, poniewa\u017c cz\u0119sto mog\u0105 powiedzie\u0107 i zrobi\u0107 o wiele wi\u0119cej ni\u017c s\u0142owa. Dzi\u0119ki Gutenberg dodawanie ich do swoich post\u00f3w i stron nigdy nie by\u0142o \u0142atwiejsze.<\/p>\n<p>Mamy nadziej\u0119, \u017ce ten artyku\u0142 okaza\u0142 si\u0119 pomocny. Je\u015bli Ci si\u0119 spodoba\u0142o, zapoznaj si\u0119 r\u00f3wnie\u017c z niekt\u00f3rymi z tych artyku\u0142\u00f3w!<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\u0179r\u00f3d\u0142o nagrywania:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/wpklik.com\" class=\"external external_icon\">wpklik.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>W tym kr\u00f3tkim przewodniku dokonamy przegl\u0105du bloku obrazu Gutenberga i poka\u017cemy wszystko, co mo\u017cesz zrobi\u0107 dzi\u0119ki tej przydatnej opcji.<\/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":[572],"tags":[847],"class_list":["post-367015","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-podstawy-wordpressa","tag-affiai-pl"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/367015","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/comments?post=367015"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/posts\/367015\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media\/363766"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/media?parent=367015"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/categories?post=367015"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/pl\/wp-json\/wp\/v2\/tags?post=367015"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}