{"id":2278,"date":"2022-07-14T19:26:08","date_gmt":"2022-07-14T17:26:08","guid":{"rendered":"https:\/\/jdm.pl\/blog\/?p=2278"},"modified":"2022-07-14T19:26:09","modified_gmt":"2022-07-14T17:26:09","slug":"okladka-w-wordpressie-jak-korzystac","status":"publish","type":"post","link":"https:\/\/jdm.pl\/blog\/okladka-w-wordpressie-jak-korzystac\/","title":{"rendered":"Ok\u0142adka w WordPressie – jak korzysta\u0107?"},"content":{"rendered":"\n

Czym jest ok\u0142adka oraz dlaczego nie zast\u0119puje ona zdj\u0119cia lub obrazka wyr\u00f3\u017cniaj\u0105cego, t\u0142umaczyli\u015bmy w artykule Obrazek wyr\u00f3\u017cniaj\u0105cy a ok\u0142adka w WordPressie<\/em><\/a>. Najkr\u00f3cej ujmuj\u0105c ok\u0142adka jest elementem blokowym, kt\u00f3ry pozwala nam doda\u0107 zdj\u0119cie lub t\u0142o wraz z umieszczonym na nim napisem do podstrony lub wpisu blokowego. <\/p>\n\n\n\n

Dzi\u015b poka\u017cemy kilka mo\u017cliwo\u015bci wykorzystania ok\u0142adek w Gutenbergu, aby zainsprowa\u0107 do korzystania z tego ciekawego bloku. Przeprowadzimy krok po kroku: od dodania w\u0142a\u015bciwego bloku po uzyskanie po\u017c\u0105danego efektu. Pami\u0119tajmy, \u017ce to, jak cz\u0119sto skorzystamy z ok\u0142adki zale\u017cy od wizji naszej strony. Nie ka\u017cdy blok Gutenberga musimy u\u017cywa\u0107, ale warto na pewno pozna\u0107 ich dzia\u0142anie. Zw\u0142aszcza, je\u017celi w przysz\u0142o\u015bci chcemy doskonali\u0107 si\u0119 w zarz\u0105dzaniu stronami opartymi o WordPressa.<\/p>\n\n\n\n

Ok\u0142adka w WordPressie \u2013 praktyczne przyk\u0142ady<\/h2>\n\n\n\n

Na pocz\u0105tku musimy doda\u0107 blok Ok\u0142adka \u2013 przed edycj\u0105 b\u0119dzie si\u0119 on prezentowa\u0142 tak:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

Ok\u0142adka w Gutenbergu bez obrazka w tle<\/h2>\n\n\n\n

Je\u017celi nie chcemy dodawa\u0107 obrazka, mo\u017cemy wykorzysta\u0107 kilka z mo\u017cliwo\u015bci kolorystycznych. Na przyk\u0142ad b\u0142\u0119kitne t\u0142o:<\/p>\n\n\n\n

<\/span>
\n

B\u0142\u0119kitne t\u0142o ok\u0142adki… <\/p>\n<\/div><\/div>\n\n\n\n

A co, kiedy chcemy u\u017cy\u0107 niestandardowego koloru t\u0142a lub gradientu? Z pomoc\u0105 przychodzi menu w panelu bocznym, gdzie po dodaniu elementu blokowego Ok\u0142adka<\/em>, mo\u017cemy modyfikowa\u0107 t\u0142o:<\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/span>
\n

W\u0142asny kolor t\u0142a<\/p>\n<\/div><\/div>\n\n\n\n

Gradient w tle ok\u0142adki<\/h2>\n\n\n\n

Mo\u017cemy wybra\u0107 tak\u017ce gradient – w tym celu nale\u017cy go zaznaczy\u0107 na g\u00f3rze koloru t\u0142a (kt\u00f3ry wybieramy w panelu bocznym):<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

a nast\u0119pnie okre\u015bli\u0107 z jakich kolor\u00f3w ma si\u0119 sk\u0142ada\u0107 oraz czy ma by\u0107 radialny czy liniowy. <\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
<\/span>
\n

W\u0142asny kolor t\u0142a – gradient radialny<\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

Je\u017celi zdecydujemy si\u0119 na gradient liniowy, dodatkowo mo\u017cemy wybra\u0107 odpowiednie nachylenie:<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
<\/span>
\n

W\u0142asny kolor t\u0142a – gradient liniowy, 121 st.<\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

Kiedy wybra\u0107 kolor zamiast obrazka w tle ok\u0142adki? Zawsze wtedy, kiedy uznamy, \u017ce dzi\u0119ki temu nasza podstrona lub wpis zyska na czytelno\u015bci oraz estetyce. Zdj\u0119cia nie s\u0105 wcale wymagane, a to jedynie opcja bloku. <\/p>\n\n\n\n

Tekst w bloku Ok\u0142adka<\/h2>\n\n\n\n

Tekst w bloku ok\u0142adka jest po prostu osadzonym blokiem akapitu. Ma wi\u0119c wszystkie funkcje, jakie znamy z tego bloku – kolor tekstu, wielko\u015b\u0107 itp.<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n

Pami\u0119tajmy, \u017ce klikaj\u0105c trzy kropki, uzyskamy dodatkowe opcje np. inicja\u0142<\/p>\n\n\n

\n
\"\"<\/a><\/figure>\n<\/div>\n\n\n
<\/span>
\n

Ok\u0142adka b\u0142\u0119kitne t\u0142o, kolor tekstu bia\u0142y, rozmiar tekstu 20, inicja\u0142. <\/p>\n<\/div><\/div>\n\n\n\n

Ok\u0142adka z obrazem w tle<\/h2>\n\n\n\n

Zamiast jednolitego t\u0142a, mo\u017cemy wybra\u0107 obraz. B\u0119dzie on automatycznie przydymiony, aby tekst sta\u0142 si\u0119 wyra\u017aniejszy:<\/p>\n\n\n\n

<\/span>\"\"
\n

Ok\u0142adka z kotem w tle <\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

Wybieraj\u0105c t\u0142o pod postaci\u0105 zdj\u0119cia, zyskujemy kilka opcji dodatkowych, kt\u00f3re zobaczymy w menu bocznym bloku. S\u0105 to:<\/p>\n\n\n\n