{"id":14128,"date":"2025-04-17T08:40:56","date_gmt":"2025-04-17T07:40:56","guid":{"rendered":"https:\/\/help.expertsender.com\/?post_type=ecdp&#038;p=14128"},"modified":"2025-04-23T12:32:54","modified_gmt":"2025-04-23T11:32:54","slug":"jak-dziala-edytor-kodu-html","status":"publish","type":"ecdp","link":"https:\/\/help.expertsender.com\/pl\/ecdp\/jak-dziala-edytor-kodu-html\/","title":{"rendered":"Jak dzia\u0142a edytor kodu HTML?"},"content":{"rendered":"\n<p>Edytor kodu HTML to zaawansowane narz\u0119dzie, kt\u00f3re pozwala tworzy\u0107 niestandardowe tre\u015bci marketingowe bez ogranicze\u0144 edytora drag&amp;drop. Jest idealny, gdy potrzebujesz pe\u0142nej kontroli nad wygl\u0105dem i funkcjonalno\u015bci\u0105 tre\u015bci w kampaniach.<\/p>\n\n\n\n<p>Dzi\u0119ki niemu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Osadzisz zaawansowane elementy interaktywne, takie jak karuzele produkt\u00f3w czy formularze.<\/li>\n\n\n\n<li>Dodasz w\u0142asne style i skrypty dla wyj\u0105tkowych do\u015bwiadcze\u0144 u\u017cytkownika.<\/li>\n\n\n\n<li>Precyzyjnie sformatujesz tre\u015bci zgodnie z koncepcj\u0105 marketingow\u0105 i identyfikacj\u0105 wizualn\u0105 Twojej marki.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"interfejs-edytora\">Interfejs edytora<\/h2>\n\n\n\n<p>Edytor kodu sk\u0142ada si\u0119 z trzech g\u0142\u00f3wnych obszar\u00f3w, kt\u00f3re umo\u017cliwiaj\u0105 wygodne tworzenie i edytowanie tre\u015bci:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Przestrze\u0144 robocza <\/strong>\u2013 to miejsce, w kt\u00f3rym wpisujesz kod. <\/li>\n\n\n\n<li><strong>Podgl\u0105d<\/strong> \u2013 dynamicznie wy\u015bwietla efekt wprowadzonych zmian. Ka\u017cda modyfikacja w kodzie jest od razu widoczna, co u\u0142atwia testowanie i dostosowywanie tre\u015bci.<\/li>\n\n\n\n<li><strong>Pasek narz\u0119dzi<\/strong> \u2013 zawiera dodatkowe funkcje wspieraj\u0105ce prac\u0119 nad kodem:\n<ul class=\"wp-block-list\">\n<li><strong>Prze\u0142\u0105cznik HTML-CSS-JS <\/strong>&#8211; umo\u017cliwia szybkie przej\u015bcie mi\u0119dzy edycj\u0105 kodu w r\u00f3\u017cnych j\u0119zykach. Nie jest on dost\u0119pny w edytorze wiadomo\u015bci e-mail i edytorze tre\u015bci e-mail w scenariuszach.<\/li>\n\n\n\n<li><strong>Biblioteka medi\u00f3w<\/strong> \u2013 zapewnia dost\u0119p do wcze\u015bniej przes\u0142anych obraz\u00f3w, ikon i innych zasob\u00f3w wizualnych.<\/li>\n\n\n\n<li><strong>Tre\u015bci dynamiczne<\/strong> \u2013 umo\u017cliwia dostosowanie projektowanych tre\u015bci do odbiorcy w zale\u017cno\u015bci od danych, takich jak cechy systemowe i niestandardowe.<\/li>\n\n\n\n<li><strong>Fragmenty kodu<\/strong> (dost\u0119pna tylko dla formularzy) \u2013 zawiera gotowe fragmenty kodu, np. pola do wprowadzania danych, dodawanie zg\u00f3d i przycisk\u00f3w.<\/li>\n\n\n\n<li><strong>Rekomendacje <\/strong>(je\u015bli tw\u00f3j plan to uwzgl\u0119dnia) \u2013 zawiera ustawienia wy\u015bwietlania polecanych produkt\u00f3w oraz dodatkowe filtry.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>Dzi\u0119ki temu mo\u017cesz na bie\u017c\u0105co sprawdza\u0107 wygl\u0105d i dzia\u0142anie e-maili, baner\u00f3w, pop-up\u00f3w czy formularzy przed ich wdro\u017ceniem.<\/p>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"konwersja-tresci-z-D&amp;D-do-html\">Konwersja tre\u015bci z edytora drag&amp;drop do edytora kodu<\/h2>\n\n\n\n<p>Je\u015bli chcesz u\u017cy\u0107 tre\u015bci stworzonej w edytorze drag&amp;drop, wystarczy, \u017ce zaznaczysz t\u0119 opcj\u0119 podczas duplikacji danej tre\u015bci. Tak ten proces b\u0119dzie wygl\u0105da\u0142 w przypadku wiadomo\u015bci e-mail<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Przejd\u017a do <strong>Kampanie <\/strong>&gt;<strong> E-mail<\/strong>.<\/li>\n\n\n\n<li>Znajd\u017a w tabeli tre\u015b\u0107, kt\u00f3rej chcesz u\u017cy\u0107 w edytorze kodu HTML.<\/li>\n\n\n\n<li>Kliknij opcj\u0119 <strong>Duplikuj<\/strong>.<\/li>\n\n\n\n<li>Wprowad\u017a now\u0105 nazw\u0119 wiadomo\u015bci.<\/li>\n\n\n\n<li>Zaznacz opcj\u0119 <strong>Konwertuj wiadomo\u015b\u0107 na format edytora kodu<\/strong>.<\/li>\n\n\n\n<li>Kliknij <strong>Zduplikuj i edytuj<\/strong>, je\u015bli chcesz przej\u015b\u0107 do edycji wiadomo\u015bci. Je\u015bli nie chcesz edytowa\u0107 wiadomo\u015bci w tym momencie, kliknij <strong>Tylko zduplikuj<\/strong>.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tresci-dynamiczne\">Stosowanie tre\u015bci dynamicznych w edytorze HTML<\/h2>\n\n\n\n<p>Tre\u015bci dynamiczne o uproszczonej sk\u0142adni u\u0142atwi\u0105 Ci personalizacj\u0119 tre\u015bci tworzonych w edytorze kodu HTML. Z jej pomoc\u0105 wygodnie wy\u015bwietlisz tre\u015bci na podstawie cech systemowych, cech klienta lub rekomendowane produkty.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"rodzaje-tresci-dynamicznych\">Dost\u0119pne rodzaje tre\u015bci dynamicznych<\/h3>\n\n\n\n<p>W edytorze kodu mo\u017cesz korzysta\u0107 z nast\u0119puj\u0105cych kategorii tre\u015bci dynamicznych:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Cechy systemowe<\/strong> \u2013 podstawowe dane klient\u00f3w, takie jak:\n<ul class=\"wp-block-list\">\n<li>imi\u0119 i nazwisko<\/li>\n\n\n\n<li>adres e-mail<\/li>\n\n\n\n<li>numer telefonu<\/li>\n\n\n\n<li>data ostatniej aktywno\u015bci<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Cechy niestandardowe klienta<\/strong> \u2013 unikalne cechy, kt\u00f3re definiujesz samodzielnie w <strong>Ustawienia <\/strong>&gt;<strong> Klienci <\/strong>&gt;<strong> Cechy klient\u00f3w<\/strong>.<\/li>\n\n\n\n<li><strong>Kontakt<\/strong> \u2013 dane kontaktowe klient\u00f3w, np. adres e-mail lub numer telefonu.<\/li>\n\n\n\n<li><strong>Tre\u015b\u0107 <\/strong>\u2013 umo\u017cliwiaj\u0105 wy\u015bwietlanie:\n<ul class=\"wp-block-list\">\n<li>zawarto\u015bci spoza ECDP<\/li>\n\n\n\n<li>tre\u015bci z innych miejsc w systemie na podstawie ID (np. konkretnego banneru)<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"formularze-fragmenty-kodu\">Fragmenty kodu dla formularzy<\/h2>\n\n\n\n<div class=\"infobox infobox-yellow\">\n  <div class=\"infobox-inner\">\n    <div class=\"infobox-icon\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 8.62988C12.4142 8.62988 12.75 8.96567 12.75 9.37988V13.1199C12.75 13.5341 12.4142 13.8699 12 13.8699C11.5858 13.8699 11.25 13.5341 11.25 13.1199V9.37988C11.25 8.96567 11.5858 8.62988 12 8.62988Z\" fill=\"currentColor\"\/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9939 15.375C11.9956 15.375 11.9973 15.375 11.999 15.375C12.0238 15.375 12.0483 15.3762 12.0725 15.3786C12.5566 15.4197 12.999 15.8152 12.999 16.375C12.999 16.6701 12.8662 16.9159 12.7031 17.0791C12.5399 17.2422 12.2941 17.375 11.999 17.375C11.4255 17.375 10.999 16.8997 10.999 16.375C10.999 15.845 11.4067 15.4141 11.9271 15.3775C11.9475 15.3759 11.9681 15.375 11.989 15.375C11.9906 15.375 11.9923 15.375 11.9939 15.375Z\" fill=\"currentColor\"\/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.3559 4.5009C12.7442 3.42451 11.2053 3.42989 10.6034 4.4984L10.6015 4.50185L2.95204 17.9156C2.34706 18.9735 3.11079 20.2903 4.32998 20.2903H19.65C20.8644 20.2903 21.6305 18.965 21.0286 17.9168L21.0276 17.9151L13.4395 4.61952C13.4081 4.58298 13.38 4.54329 13.3559 4.5009ZM14.5885 3.63986C13.3595 1.67728 10.4533 1.71162 9.29754 3.76042C9.2972 3.76102 9.29686 3.76162 9.29652 3.76222L1.64993 17.171C1.64984 17.1711 1.64976 17.1713 1.64967 17.1714C0.473119 19.2295 1.95934 21.7903 4.32998 21.7903H19.65C22.0132 21.7903 23.5071 19.2223 22.3299 17.1707C22.3297 17.1704 22.3296 17.1701 22.3294 17.1699L14.6804 3.76755C14.6541 3.72162 14.6233 3.67887 14.5885 3.63986Z\" fill=\"currentColor\"\/><\/svg>    <\/div>\n    <div class=\"infobox-content\">\n                    <div class=\"infobox-text\">\n          <p>Zalecamy korzystanie z gotowych fragment\u00f3w kodu zamiast pisania ich od podstaw. Zapewni to nie tylko poprawne dzia\u0142anie formularza, ale r\u00f3wnie\u017c w\u0142a\u015bciw\u0105 integracj\u0119 z systemem oraz zgodno\u015b\u0107 z najlepszymi praktykami.<\/p>\n        <\/div>\n          <\/div>\n  <\/div>\n<\/div>\n\n\n\n<p>Tworzenie formularzy w kodzie HTML mo\u017ce by\u0107 wyzwaniem, dlatego przygotowali\u015bmy gotowe fragmenty kodu, kt\u00f3re znacznie uproszcz\u0105 ten proces.<\/p>\n\n\n\n<p>S\u0105 to gotowe do u\u017cycia szablony, z pomoc\u0105 kt\u00f3rych zbudujesz formularz dopasowany do Twoich potrzeb.<\/p>\n\n\n\n<p>Fragmenty kodu s\u0105 dost\u0119pne na pasku narz\u0119dzi pod przyciskiem `&lt;\/&gt;` (Fragmenty kodu) podczas edycji formularza.<\/p>\n\n\n\n<p>W bibliotece znajdziesz nast\u0119puj\u0105ce elementy:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Cechy systemowe<\/strong> \u2013 gotowe pola do zbierania podstawowych danych klienta:\n<ul class=\"wp-block-list\">\n<li>imi\u0119 i nazwisko,<\/li>\n\n\n\n<li>data urodzenia,<\/li>\n\n\n\n<li>adres e-mail,<\/li>\n\n\n\n<li>numer telefonu,<\/li>\n\n\n\n<li>p\u0142e\u0107.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Cechy klienta<\/strong> \u2013 pola do zbierania danych istotnych dla Twojego biznesu. \n<ul class=\"wp-block-list\">\n<li>Aby z nich skorzysta\u0107, najpierw dodaj cechy w <strong>Ustawienia <\/strong>&gt;<strong> Klienci <\/strong>&gt;<strong> Cechy klient\u00f3w.<\/strong><\/li>\n\n\n\n<li>Przyk\u0142ady: rozmiar ubrania, preferowany rodzaj produkt\u00f3w, hobby.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Zgody<\/strong> \u2013 pola wyboru dla zg\u00f3d marketingowych:\n<ul class=\"wp-block-list\">\n<li>Dodaj je wcze\u015bniej w <strong>Ustawienia <\/strong>&gt;<strong> Zgody <\/strong>&gt;<strong> Zgody<\/strong>.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Przyciski<\/strong> \u2013 gotowy kod przycisku do wys\u0142ania formularza:\n<ul class=\"wp-block-list\">\n<li>Mo\u017cesz \u0142atwo dostosowa\u0107 jego wygl\u0105d i tre\u015b\u0107.<\/li>\n\n\n\n<li>Zawiera niezb\u0119dne atrybuty zapewniaj\u0105ce poprawne dzia\u0142anie.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"niezbedne-elementy-formularza\">Niezb\u0119dne elementy formularza<\/h3>\n\n\n\n<p>Aby formularz dzia\u0142a\u0142 poprawnie, musi zawiera\u0107:<\/p>\n\n\n\n<p>1. <strong>Co najmniej jedno pole kontaktowe<\/strong> \u2013 adres e-mail lub numer telefonu:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Pole to musi by\u0107 oznaczone jako wymagane.<\/li>\n\n\n\n<li>System wykorzysta te dane do identyfikacji klienta<\/li>\n<\/ul>\n\n\n\n<p>2. <strong>Przycisk wys\u0142ania <\/strong>\u2013 przycisk, kt\u00f3ry:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zbiera dane z formularza.<\/li>\n\n\n\n<li>Przesy\u0142a je do systemu.<\/li>\n<\/ul>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"template":"","ecdp-category":[],"class_list":["post-14128","ecdp","type-ecdp","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/14128","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp"}],"about":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/types\/ecdp"}],"author":[{"embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":7,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/14128\/revisions"}],"predecessor-version":[{"id":14174,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/14128\/revisions\/14174"}],"wp:attachment":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/media?parent=14128"}],"wp:term":[{"taxonomy":"ecdp-category","embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp-category?post=14128"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}