{"id":51785,"date":"2023-01-04T07:00:18","date_gmt":"2023-01-04T15:00:18","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=51785"},"modified":"2025-05-26T11:22:41","modified_gmt":"2025-05-26T18:22:41","slug":"dodaj-animacje-lottie","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/","title":{"rendered":"Jak doda\u0107 animacje Lottie do swojej strony"},"content":{"rendered":"\n<p>Przyci\u0105gaj\u0105ce wzrok obrazy i filmy to \u015bwietny spos\u00f3b, aby zrobi\u0107 wra\u017cenie na odwiedzaj\u0105cych strony internetowe. Jednak\u017ce prawie ka\u017cda strona u\u017cywa ich do poprawy <a href=\"https:\/\/www.dreamhost.com\/blog\/pl\/czym-jest-doswiadczenie-uzytkownika\/\" target=\"_blank\" rel=\"noopener\">do\u015bwiadczenia u\u017cytkownika (UX)<\/a>. Dlatego dodanie tych standardowych wizualizacji do twoich stron ju\u017c nie wystarczy, aby wyr\u00f3\u017cni\u0107 twoj\u0105 witryn\u0119 spo\u015br\u00f3d t\u0142umu.<\/p>\n\n\n\n<p>Na szcz\u0119\u015bcie mo\u017cesz doda\u0107 animacje Lottie do swojej strony, aby uzyska\u0107 przewag\u0119 konkurencyjn\u0105. <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">LottieFiles<\/a> oferuje darmow\u0105 bibliotek\u0119 animacji, kt\u00f3re mo\u017cesz \u0142atwo doda\u0107 do swojej witryny. Nast\u0119pnie mo\u017cesz ich u\u017cy\u0107, aby zwi\u0119kszy\u0107 zaanga\u017cowanie u\u017cytkownik\u00f3w i ulepszy\u0107 <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-design-a-website\/\" target=\"_blank\" rel=\"noopener\">design swojej strony<\/a>.<\/p>\n\n\n\n<p>W tym po\u015bcie przyjrzymy si\u0119 bli\u017cej kilku kluczowym korzy\u015bciom zwi\u0105zanym z u\u017cywaniem animacji Lottie na Twojej stronie. Nast\u0119pnie poka\u017cemy Ci trzy proste sposoby na dodanie tych element\u00f3w wizualnych. Zacznijmy!<\/p>\n\n\n\n<h2 id=\"h-the-benefits-of-adding-lottie-animations-to-your-site\" class=\"wp-block-heading\"><b>Korzy\u015bci z dodania animacji Lottie do Twojej strony<\/b><\/h2>\n\n\n\n<p>Chocia\u017c filmy i obrazy mog\u0105 sprawi\u0107, \u017ce Twoja strona internetowa b\u0119dzie bardziej anga\u017cuj\u0105ca, tego rodzaju materia\u0142y wizualne s\u0105 widoczne wsz\u0119dzie w internecie. Z drugiej strony, animacje mog\u0105 da\u0107 Ci unikaln\u0105 przewag\u0119.<\/p>\n\n\n\n<p>Ponadto przewiduje si\u0119, \u017ce <a href=\"https:\/\/www.statista.com\/topics\/9725\/animation-industry\/#dossierKeyfigures\" target=\"_blank\" rel=\"noopener\">globalny rynek przemys\u0142u animacyjnego<\/a> wzro\u015bnie o 60% w ci\u0105gu najbli\u017cszych dziewi\u0119ciu lat. Oznacza to, \u017ce je\u015bli zaczniesz z nich korzysta\u0107 ju\u017c teraz, mo\u017cesz wyprzedzi\u0107 rosn\u0105cy trend.<\/p>\n\n\n\n<p>W rzeczywisto\u015bci 61% marketer\u00f3w u\u017cy\u0142o interaktywnej tre\u015bci jako taktyki anga\u017cowania cyfrowego w zesz\u0142ym roku. Inne strategie obejmowa\u0142y GIF-y, kt\u00f3re r\u00f3wnie\u017c mo\u017cna wykorzysta\u0107 do wy\u015bwietlania animacji.<\/p>\n\n\n\n<p><a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">Animacje Lottie<\/a> s\u0105 doskona\u0142ym wyborem, g\u0142\u00f3wnie ze wzgl\u0119du na ich ma\u0142e rozmiary plik\u00f3w:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"954\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage.png\" alt=\"Strona g\u0142\u00f3wna witryny LottieFiles\" class=\"wp-image-38495 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-300x143.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-1024x489.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-768x367.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-website-homepage-1536x733.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-600x286.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1200x573.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-730x348.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1460x697.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-784x374.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1568x748.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-877x419.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-website-homepage-1754x837.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/954;\" \/><\/figure><\/div>\n\n\n<p>Tak naprawd\u0119 te pliki s\u0105 <i>600%<\/i> mniejsze ni\u017c GIFy \u2013 Mo\u017cesz doda\u0107 je do swojej strony bez obci\u0105\u017cania jej. To mo\u017ce pozwoli\u0107 na zachowanie pozytywnego UX.<\/p>\n\n\n\n<p>Jeszcze lepiej, animacje Lottie mog\u0105 by\u0107 ca\u0142kowicie dostosowane do <a href=\"https:\/\/www.dreamhost.com\/blog\/pl\/jak-stworzyc-przewodnik-po-stylu-marki-dla-strony\/\" target=\"_blank\" rel=\"noopener\">Twojej to\u017csamo\u015bci marki<\/a>. Co wi\u0119cej, jest to przyst\u0119pne rozwi\u0105zanie, poniewa\u017c LottieFiles oferuje najobszerniejsz\u0105, darmow\u0105 bibliotek\u0119 animacji. Uzyskasz dost\u0119p do tysi\u0119cy element\u00f3w interfejsu u\u017cytkownika, postaci i ilustracji.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-how-to-add-lottie-animations-to-your-site-3-ways\" class=\"wp-block-heading\"><b>Jak doda\u0107 animacje Lottie do Twojej strony (3 sposoby)<\/b><\/h2>\n\n\n\n<p>Teraz, gdy znasz korzy\u015bci p\u0142yn\u0105ce z u\u017cywania animacji Lottie, przyjrzyjmy si\u0119 trzem sposobom dodawania ich do Twojej strony.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-1-add-your-animation-with-oembed\"><b>Metoda 1: Dodaj swoj\u0105 animacj\u0119 za pomoc\u0105 oEmbed<\/b><\/h3>\n\n\n\n<p>Dodawanie animacji Lottie za pomoc\u0105 oEmbed jest najprostsz\u0105 metod\u0105 opisan\u0105 w tym poradniku. Jedyn\u0105 wad\u0105 jest to, \u017ce nie b\u0119dziesz m\u00f3g\u0142 edytowa\u0107 ustawie\u0144 animacji ani ustawi\u0107 ich tak, aby reagowa\u0142y na interakcje u\u017cytkownik\u00f3w.<\/p>\n\n\n\n<p>Aby rozpocz\u0105\u0107 t\u0119 metod\u0119, przejd\u017a do <a href=\"https:\/\/lottiefiles.com\/featured\" target=\"_blank\" rel=\"noopener\">biblioteki animacji LottieFiles<\/a>, aby znale\u017a\u0107 idealn\u0105 animacj\u0119 dla swojej strony. Po znalezieniu projektu, kt\u00f3ry Ci si\u0119 podoba, kliknij na animacj\u0119 i po prostu skopiuj adres URL oEmbed (musisz by\u0107 zalogowany na darmowe konto, aby to zrobi\u0107):<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1002\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url.jpg\" alt=\"Znajd\u017a adres URL oEmbed w LottieFiles\" class=\"wp-image-38493 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-300x150.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-1024x513.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-768x385.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-copy-oembed-url-1536x770.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-600x301.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1200x602.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-730x366.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1460x732.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-784x393.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1568x786.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-877x440.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-copy-oembed-url-1754x879.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1002;\" \/><\/figure><\/div>\n\n\n<p>Nast\u0119pnie przejd\u017a do WordPressa i otw\u00f3rz stron\u0119 lub post, gdzie chcesz umie\u015bci\u0107 swoj\u0105 animacj\u0119. Nast\u0119pnie po prostu dodaj nowy blok Gutenberg <i>Embed<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"828\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress.png\" alt=\"Blok osadzony w WordPress\" class=\"wp-image-38485 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-300x124.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-1024x424.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-768x318.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-block-in-wordpress-1536x636.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-600x249.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1200x497.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-730x302.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1460x605.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-784x325.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1568x649.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-877x363.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-block-in-wordpress-1754x727.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/828;\" \/><\/figure><\/div>\n\n\n<p>Teraz wklej URL oEmbed, kt\u00f3ry skopiowa\u0142e\u015b ze strony Lottie:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"616\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block.png\" alt=\"Wklej URL Lottie oEmbed do bloku WordPress Embed\" class=\"wp-image-38496 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-300x92.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1024x316.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-768x237.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1536x473.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-600x185.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1200x370.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-730x225.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1460x450.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-784x242.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1568x483.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-877x270.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-lottie-html-code-into-custom-html-wordpress-block-1754x541.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/616;\" \/><\/figure><\/div>\n\n\n<p>Naci\u015bnij przycisk <i>Embed<\/i>, aby potwierdzi\u0107 dzia\u0142anie.<\/p>\n\n\n\n<p>W tym momencie powiniene\u015b zobaczy\u0107 animacj\u0119 na swojej stronie:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"838\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress.jpg\" alt=\"Umie\u015b\u0107 swoj\u0105 animacj\u0119 Lottie w WordPress\" class=\"wp-image-38486 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-300x126.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-1024x429.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-768x322.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-in-wordpress-1536x644.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-600x252.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1200x503.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-730x306.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1460x612.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-784x329.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1568x657.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-877x368.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-in-wordpress-1754x735.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/838;\" \/><\/figure><\/div>\n\n\n<p>Jak wspomnieli\u015bmy wcze\u015bniej, nie b\u0119dziesz m\u00f3g\u0142 dostosowa\u0107 animacji po dodaniu jej do strony lub posta WordPress. Dlatego kluczowe jest, aby dokona\u0107 wszystkich edycji, kt\u00f3re chcesz, wcze\u015bniej, gdy nadal jeste\u015b na stronie Lottie.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-2-add-your-animation-using-the-lottie-block-for-gutenberg-plugin\"><b>Metoda 2: Dodaj swoj\u0105 animacj\u0119 za pomoc\u0105 <\/b><a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\"><b>Lottie block for Gutenberg<\/b><\/a><b> Plugin<\/b><\/h3>\n\n\n\n<p>Chocia\u017c metoda oEmbed jest najprostsza, u\u017cywanie wtyczki Lottie block dla Gutenberg r\u00f3wnie\u017c jest bardzo \u0142atwe. Co wi\u0119cej, pozwala na natychmiastowy podgl\u0105d wszelkich zmian wprowadzanych w projektach.<\/p>\n\n\n\n<p>Na pocz\u0105tek, przejd\u017a do <i>Plugins <\/i>&gt; <i>Add New <\/i>aby zainstalowa\u0107 i aktywowa\u0107 <a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\">blok Lottie dla Gutenberga<\/a> w WordPressie:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1857\" height=\"602\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin.png\" alt=\"Blok Lottie dla pluginu Gutenberg\" class=\"wp-image-38490 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin.png.webp 1857w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-300x97.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1024x332.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-768x249.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1536x498.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-600x195.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1200x389.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-730x237.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1460x473.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-784x254.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1568x508.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-877x284.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-blocks-for-gutenberg-plugin-1754x569.png.webp 1754w\" data-sizes=\"(max-width: 1857px) 100vw, 1857px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1857px; --smush-placeholder-aspect-ratio: 1857\/602;\" \/><\/figure><\/div>\n\n\n<p>Mo\u017cesz nast\u0119pnie zalogowa\u0107 si\u0119 na swoje konto LottieFiles lub stworzy\u0107 konto za darmo.<\/p>\n\n\n\n<p>Nast\u0119pnie dodaj nowy blok w edytorze Gutenberg. Wyszukaj blok <i>Lottie<\/i> i dodaj go do swojej strony:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"776\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block.png\" alt=\"Wyszukaj blok Lottie w WordPress\" class=\"wp-image-38500 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-300x116.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-1024x398.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-768x298.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/wordpress-lottie-block-1536x596.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-600x233.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1200x466.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-730x283.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1460x567.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-784x304.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1568x609.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-877x340.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/wordpress-lottie-block-1754x681.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/776;\" \/><\/figure><\/div>\n\n\n<p>Tutaj znajdziesz trzy sposoby na dodanie animacji Lottie w WordPress:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kliknij na <i>Discover animation <\/i>, aby przegl\u0105da\u0107 bibliotek\u0119 LottieFiles (b\u0119dziesz potrzebowa\u0107 konta, aby to zrobi\u0107).<\/li>\n\n\n\n<li>Wybierz <i>Media Library <\/i>, aby znale\u017a\u0107 animacj\u0119, kt\u00f3r\u0105 wcze\u015bniej przes\u0142a\u0142e\u015b.<\/li>\n\n\n\n<li>Naci\u015bnij <i>Insert from url<\/i>, aby wklei\u0107 link JSON.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Je\u015bli wybierzesz ostatni\u0105 metod\u0119, mo\u017cesz znale\u017a\u0107 link JSON na stronie internetowej Lottie:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1127\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url.jpg\" alt=\"Lottie JSON URL\" class=\"wp-image-38491 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1024x577.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-768x433.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1536x866.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1200x677.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-730x412.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1460x823.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-784x442.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1568x884.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-877x494.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1754x989.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1127;\" \/><\/figure><\/div>\n\n\n<p>Po dodaniu animacji do swojej strony, mo\u017cesz podejrze\u0107 projekt w Gutenberg:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"836\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg.png\" alt=\"Podgl\u0105d animacji fioletowej sowy w Gutenberg\" class=\"wp-image-38498 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-300x125.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-1024x428.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-768x321.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/preview-lottie-animation-in-gutenberg-1536x642.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-600x251.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1200x502.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-730x305.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1460x611.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-784x328.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1568x656.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-877x367.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/preview-lottie-animation-in-gutenberg-1754x734.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/836;\" \/><\/figure><\/div>\n\n\n<p>Teraz w ustawieniach <i>Bloku<\/i> mo\u017cesz dostosowa\u0107 swoj\u0105 animacj\u0119. Na przyk\u0142ad mo\u017cesz nada\u0107 jej przezroczyste t\u0142o, zmieni\u0107 wymiary lub uruchomi\u0107 animacj\u0119 za pomoc\u0105 r\u00f3\u017cnych akcji. Mo\u017cesz r\u00f3wnie\u017c u\u017cy\u0107 pluginu do <a href=\"https:\/\/www.youtube.com\/watch?v=i2LP34t__Yc\" target=\"_blank\" rel=\"noopener\">dodania animacji Lottie jako t\u0142a WordPress<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-method-3-add-your-animation-with-html-and-javascript\"><b>Metoda 3: Dodaj swoj\u0105 animacj\u0119 za pomoc\u0105 HTML i JavaScript<\/b><\/h3>\n\n\n\n<p>Dodawanie twojej animacji Lottie za pomoc\u0105 HTML i JavaScript jest nadal stosunkowo \u0142atwe, ale to najbardziej z\u0142o\u017cona metoda. Ponadto, nie jeste\u015b w stanie zobaczy\u0107 aktualizacji w czasie rzeczywistym.<\/p>\n\n\n\n<p>Zamiast tego musisz prze\u0142\u0105cza\u0107 si\u0119 mi\u0119dzy Gutenbergiem a swoj\u0105 stron\u0105 internetow\u0105, aby zobaczy\u0107 podgl\u0105d zmian. Mimo to mo\u017cesz chcie\u0107 skorzysta\u0107 z tej metody, je\u015bli jeste\u015b <a href=\"https:\/\/www.dreamhost.com\/blog\/pl\/ucz-sie-html\/\" target=\"_blank\" rel=\"noopener\">zaznajomiony z HTML<\/a> i szukasz zaawansowanych opcji dostosowania.<\/p>\n\n\n\n<p>Aby rozpocz\u0105\u0107 t\u0119 metod\u0119, kliknij na animacj\u0119 w bibliotece LottieFiles i skopiuj link do pliku Lottie JSON:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1127\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url.jpg\" alt=\"Lottie JSON URL\" class=\"wp-image-38491 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-300x169.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1024x577.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-768x433.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-json-url-1536x866.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-600x338.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1200x677.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-730x412.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1460x823.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-784x442.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1568x884.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-877x494.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-json-url-1754x989.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1127;\" \/><\/figure><\/div>\n\n\n<p>Nast\u0119pnie przewi\u0144 w d\u00f3\u0142, a\u017c zobaczysz \u201eUse animation in\u2026\u201d i wybierz <i>&lt;html&gt;<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"852\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html.jpg\" alt=\"Osadzanie animacji Lottie za pomoc\u0105 HTML\" class=\"wp-image-38487 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html.jpg.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-300x128.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-1024x436.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-768x327.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/embed-lottie-animation-using-html-1536x655.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-600x256.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1200x511.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-730x311.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1460x622.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-784x334.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1568x668.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-877x374.jpg.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/embed-lottie-animation-using-html-1754x748.jpg.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/852;\" \/><\/figure><\/div>\n\n\n<p>To przeniesie ci\u0119 do Odtwarzacza Web LottieFiles:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1016\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview.png\" alt=\"Podgl\u0105d LottieFiles Web Player\" class=\"wp-image-38494 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-300x152.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-1024x520.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-768x390.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottiefiles-web-player-preview-1536x781.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-600x305.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1200x610.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-730x371.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1460x742.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-784x398.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1568x797.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-877x446.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottiefiles-web-player-preview-1754x891.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1016;\" \/><\/figure><\/div>\n\n\n<p>Tutaj mo\u017cesz wybra\u0107 kolor t\u0142a, okre\u015bli\u0107 rozmiar i pr\u0119dko\u015b\u0107 animacji oraz wi\u0119cej.<\/p>\n\n\n\n<p>Teraz odznacz pole wyboru <i>Controls <\/i>i zobaczysz, \u017ce na dole ekranu zosta\u0142 wygenerowany pewien kod HTML:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"1082\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation.png\" alt=\"Kod HTML dla Twojej animacji LottieFiles\" class=\"wp-image-38488 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-300x162.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-1024x554.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-768x416.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/html-code-for-lottiefiles-animation-1536x831.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-600x325.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1200x650.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-730x395.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1460x790.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-784x424.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1568x849.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-877x475.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/html-code-for-lottiefiles-animation-1754x949.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/1082;\" \/><\/figure><\/div>\n\n\n<p>Skopiuj lini\u0119 kodu, kt\u00f3ra zaczyna si\u0119 od \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;lottie-player&gt;<\/span>\u201d i ko\u0144czy na \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;\/lottie-player&gt;<\/span>\u201d. Nast\u0119pnie, w WordPress, dodaj nowy blok <i>Custom HTML<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"858\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor.png\" alt=\"Dodawanie nowego bloku HTML w edytorze WordPress\" class=\"wp-image-38482 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-300x129.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-1024x440.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-768x330.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-custom-html-block-wordpress-editor-1536x659.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-600x258.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1200x515.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-730x313.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1460x627.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-784x337.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1568x673.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-877x376.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-custom-html-block-wordpress-editor-1754x753.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/858;\" \/><\/figure><\/div>\n\n\n<p>Wklej HTML, kt\u00f3ry skopiowa\u0142e\u015b z LottieFiles i kliknij na <i>Zapisz Szkic<\/i> w prawym g\u00f3rnym rogu:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"483\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block.png\" alt=\"Wklej kod HTML Lottie do bloku HTML WordPressa\" class=\"wp-image-38497 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-300x72.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1024x247.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-768x186.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1536x371.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-600x145.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1200x290.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-730x176.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1460x353.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-784x189.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1568x379.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-877x212.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/paste-oembed-lottie-url-into-wordpress-block-1754x424.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/483;\" \/><\/figure><\/div>\n\n\n<p>Twoja animacja jeszcze nie zadzia\u0142a. Najpierw musisz za\u0142adowa\u0107 plik JavaScript Lottie Player w WordPressie.<\/p>\n\n\n\n<p>Aby to zrobi\u0107, wr\u00f3\u0107 do LottieFiles Web Player i skopiuj tag skryptu, kt\u00f3ry zaczyna si\u0119 od \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;script&gt;<\/span>\u201d i ko\u0144czy na \u201c<span style=\"font-family: 'courier new', courier, monospace;\">&lt;\/script&gt;<\/span>\u201d:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"925\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file.png\" alt=\"Plik JavaScript Lottie Player\" class=\"wp-image-38492 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-300x139.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-1024x474.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-768x355.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-player-javascript-file-1536x711.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-600x278.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1200x555.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-730x338.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1460x676.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-784x363.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1568x726.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-877x406.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-player-javascript-file-1754x812.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/925;\" \/><\/figure><\/div>\n\n\n<p>Teraz przejd\u017a do WordPress i zainstaluj <a href=\"https:\/\/wordpress.org\/plugins\/custom-css-js\/\" target=\"_blank\" rel=\"noopener\">wtyczk\u0119 Simple Custom CSS and JS<\/a>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"585\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin.png\" alt=\"Zainstaluj wtyczk\u0119 Simple Custom CSS and JS\" class=\"wp-image-38499 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-300x88.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-1024x300.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-768x225.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/simple-custom-css-js-plugin-1536x450.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-600x176.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1200x351.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-730x214.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1460x427.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-784x229.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1568x459.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-877x257.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/simple-custom-css-js-plugin-1754x513.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/585;\" \/><\/figure><\/div>\n\n\n<p>Po aktywacji przejd\u017a do panelu pluginu i wybierz <i>Dodaj kod HTML<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"573\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin.png\" alt=\"Dodaj kod HTML za pomoc\u0105 wtyczki Simple Custom CSS and JS\" class=\"wp-image-38483 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-300x86.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1024x294.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-768x220.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1536x440.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-600x172.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1200x344.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-730x209.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1460x418.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-784x225.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1568x449.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-877x251.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-html-code-with-simple-custom-css-and-js-plugin-1754x503.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/573;\" \/><\/figure><\/div>\n\n\n<p>Mo\u017cesz nada\u0107 swojemu kodowi tytu\u0142, na przyk\u0142ad \u201eDodaje odtwarzacz Lottie\u201d. Nast\u0119pnie wklej znacznik skryptu w edytorze i kliknij na <i>Publikuj<\/i>:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"662\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html.png\" alt=\"Dodaj odtwarzacz Lottie do WordPress za pomoc\u0105 niestandardowego HTML\" class=\"wp-image-38484 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-300x99.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1024x339.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-768x254.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1536x509.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-600x199.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1200x397.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-730x242.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1460x484.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-784x260.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1568x519.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-877x290.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/add-lottie-players-to-wordpress-custom-html-1754x581.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/662;\" \/><\/figure><\/div>\n\n\n<p>Teraz wr\u00f3\u0107 na stron\u0119, na kt\u00f3rej wstawi\u0142e\u015b sw\u00f3j kod HTML. Powiniene\u015b zobaczy\u0107 swoj\u0105 animacj\u0119 Lottie, gdy prze\u0142\u0105czysz si\u0119 na podgl\u0105d:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1999\" height=\"846\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress.png\" alt=\"Animacja Lottie dodana do WordPressa za pomoc\u0105 HTML i JavaScript\" class=\"wp-image-38489 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress.png.webp 1999w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-300x127.png 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-1024x433.png 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-768x325.png 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/lottie-animation-added-to-wordpress-1536x650.png 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-600x254.png.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1200x508.png.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-730x309.png.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1460x618.png.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-784x332.png.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1568x664.png.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-877x371.png.webp 877w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/01\/lottie-animation-added-to-wordpress-1754x742.png.webp 1754w\" data-sizes=\"(max-width: 1999px) 100vw, 1999px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1999px; --smush-placeholder-aspect-ratio: 1999\/846;\" \/><\/figure><\/div>\n\n\n<p>Je\u015bli animacja jest za du\u017ca lub za ma\u0142a, mo\u017cesz zmieni\u0107 domy\u015blne parametry w kodzie HTML, gdzie jest napisane <i><span style=\"font-family: 'courier new', courier, monospace;\">style= \u201cwidth: X; height: X;\u201d<\/span>.<\/i><\/p>\n\n\n\n<h2 id=\"h-add-lottie-animations-to-your-site-today\" class=\"wp-block-heading\"><b>Dodaj Animacje Lottie do Swojej Strony Ju\u017c Dzi\u015b<\/b><\/h2>\n\n\n\n<p>Poniewa\u017c obrazy i filmy pojawiaj\u0105 si\u0119 na prawie ka\u017cdej stronie internetowej, ich dodanie na Twojej stronie prawdopodobnie nie sprawi, \u017ce Twoje projekty b\u0119d\u0105 si\u0119 wyr\u00f3\u017cnia\u0107. Jednak mo\u017cesz doda\u0107 animacje Lottie na swojej stronie, aby zaimponowa\u0107 odwiedzaj\u0105cym, odzwierciedli\u0107 swoj\u0105 mark\u0119 i zwi\u0119kszy\u0107 zaanga\u017cowanie.<\/p>\n\n\n\n<p>Podsumowuj\u0105c, oto trzy sposoby na dodanie <a href=\"https:\/\/lottiefiles.com\/\" target=\"_blank\" rel=\"noopener\">animacji Lottie<\/a> do twojej strony:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Dodaj animacje Lottie z wykorzystaniem oEmbed.<\/li>\n\n\n\n<li>Dodaj animacje Lottie u\u017cywaj\u0105c <a href=\"https:\/\/wordpress.org\/plugins\/lottiefiles\/\" target=\"_blank\" rel=\"noopener\">wtyczki Lottie dla Gutenberg<\/a>.<\/li>\n\n\n\n<li>Dodaj animacje Lottie za pomoc\u0105 HTML i JavaScript.<\/li>\n\n\n<\/ol>\n\n\n\n<p>Inny spos\u00f3b na wyr\u00f3\u017cnienie Twojej strony od reszty to projektowanie niestandardowych stron, kt\u00f3re s\u0105 unikalne dla Twojej marki. W DreamHost mo\u017cemy zbudowa\u0107 dla Ciebie stron\u0119, kt\u00f3ra jest jedyna w swoim rodzaju, <a href=\"https:\/\/www.dreamhost.com\/blog\/pl\/jak-zoptymalizowac-swoja-strone-pod-katem-urzadzen-mobilnych\/\" target=\"_blank\" rel=\"noopener\">przyjazna dla urz\u0105dze\u0144 mobilnych<\/a> i zoptymalizowana pod k\u0105tem wyszukiwarek. Sprawd\u017a <a href=\"https:\/\/www.dreamhost.com\/pl\/uslugi-profesjonalne\/projekt\/niestandardowy-projekt-strony\/\" target=\"_blank\" rel=\"noopener\">nasze plany projektowania stron<\/a> ju\u017c dzi\u015b!<\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Zdob\u0105d\u017a Pi\u0119kn\u0105 Stron\u0119, z Kt\u00f3rej B\u0119dziesz Dumny\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Nasi projektanci stworz\u0105 od podstaw przepi\u0119kn\u0105 stron\u0119 idealnie dopasowan\u0105 do Twojej marki.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/pl\/uslugi-profesjonalne\/projekt\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Dowiedz si\u0119 Wi\u0119cej                    <\/a>\n\n  <\/div>\n<\/div>\n\n\n<p><script src=\"https:\/\/unpkg.com\/@lottiefiles\/lottie-player@latest\/dist\/lottie-player.js\"><\/script><\/p>\n\n\n\n","protected":false},"excerpt":{"rendered":"<p>Przyci\u0105gaj\u0105ce wzrok obrazy i filmy to \u015bwietny spos\u00f3b, aby zrobi\u0107 wra\u017cenie na odwiedzaj\u0105cych stron\u0119 internetow\u0105. Jednak\u017ce prawie ka\u017cda strona internetowa wykorzystuje je do poprawy do\u015bwiadczenia u\u017cytkownika (UX). Dlatego dodanie tych standardowych wizualizacji do swoich stron nie wystarczy, aby wyr\u00f3\u017cni\u0107 swoj\u0105 witryn\u0119 spo\u015br\u00f3d t\u0142umu. Na szcz\u0119\u015bcie mo\u017cesz doda\u0107 animacje Lottie na swojej stronie, aby [\u2026]<\/p>\n","protected":false},"author":1058,"featured_media":38502,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-the-benefits-of-adding-lottie-animations-to-your-site\",\"Korzy\u015bci z dodania animacji Lottie do Twojej strony\"],[\"h-how-to-add-lottie-animations-to-your-site-3-ways\",\"Jak doda\u0107 animacje Lottie do Twojej strony (3 sposoby)\"],[\"h-add-lottie-animations-to-your-site-today\",\"Dodaj Animacje Lottie do Swojej Strony Ju\u017c Dzi\u015b\"]]","hide_toc":false,"footnotes":""},"categories":[14462,14456,14458],"tags":[],"class_list":["post-51785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-centrum-dewelopera-pl","category-projektowanie-stron-pl","category-wordpress-pl"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Jak doda\u0107 animacje Lottie do swojej strony - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jak doda\u0107 animacje Lottie do swojej strony\" \/>\n<meta property=\"og:description\" content=\"Przyci\u0105gaj\u0105ce wzrok obrazy i filmy to \u015bwietny spos\u00f3b, aby zrobi\u0107 wra\u017cenie na odwiedzaj\u0105cych stron\u0119 internetow\u0105. Jednak\u017ce prawie ka\u017cda strona internetowa wykorzystuje je do poprawy do\u015bwiadczenia u\u017cytkownika (UX). Dlatego dodanie tych standardowych wizualizacji do swoich stron nie wystarczy, aby wyr\u00f3\u017cni\u0107 swoj\u0105 witryn\u0119 spo\u015br\u00f3d t\u0142umu. Na szcz\u0119\u015bcie mo\u017cesz doda\u0107 animacje Lottie na swojej stronie, aby [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-04T15:00:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T18:22:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"598\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Jak doda\u0107 animacje Lottie do swojej strony - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/","og_locale":"en_US","og_type":"article","og_title":"Jak doda\u0107 animacje Lottie do swojej strony","og_description":"Przyci\u0105gaj\u0105ce wzrok obrazy i filmy to \u015bwietny spos\u00f3b, aby zrobi\u0107 wra\u017cenie na odwiedzaj\u0105cych stron\u0119 internetow\u0105. Jednak\u017ce prawie ka\u017cda strona internetowa wykorzystuje je do poprawy do\u015bwiadczenia u\u017cytkownika (UX). Dlatego dodanie tych standardowych wizualizacji do swoich stron nie wystarczy, aby wyr\u00f3\u017cni\u0107 swoj\u0105 witryn\u0119 spo\u015br\u00f3d t\u0142umu. Na szcz\u0119\u015bcie mo\u017cesz doda\u0107 animacje Lottie na swojej stronie, aby [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-01-04T15:00:18+00:00","article_modified_time":"2025-05-26T18:22:41+00:00","og_image":[{"width":900,"height":598,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"Jak doda\u0107 animacje Lottie do swojej strony","datePublished":"2023-01-04T15:00:18+00:00","dateModified":"2025-05-26T18:22:41+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/"},"wordCount":1261,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","articleSection":["Centrum Dewelopera","Projektowanie Stron","WordPress"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/","name":"Jak doda\u0107 animacje Lottie do swojej strony - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","datePublished":"2023-01-04T15:00:18+00:00","dateModified":"2025-05-26T18:22:41+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/01\/Adding-Lottie-Animations-Feature.jpg","width":900,"height":598,"caption":"How to Add Lottie Animations to Your Site"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/pl\/dodaj-animacje-lottie\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"Jak doda\u0107 animacje Lottie do swojej strony"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"pl","translations":{"pl":51785,"en":38481,"de":57473,"pt":57470,"es":38507,"uk":57457,"ru":57494,"it":67915,"fr":69417,"nl":69439},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=51785"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51785\/revisions"}],"predecessor-version":[{"id":62548,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/51785\/revisions\/62548"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/38502"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=51785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=51785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=51785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}