/ / Jak utworzyć list HTML: instrukcje krok po kroku

Jak utworzyć wiadomość e-mail w formacie HTML: instrukcje krok po kroku

Почтовые рассылки являются важной частью kampanie marketingowe. Tworzenie dla nich wiadomości e-mail przypomina tworzenie prostych stron internetowych. Jednocześnie należy wziąć pod uwagę pewne ważne różnice. W szczególności wysyłanie listów HTML będzie skuteczne tylko wtedy, gdy same zostaną poprawnie skomponowane technicznie, a ich treść i styl będą zgodne z Twoimi celami. Jednocześnie panuje opinia, że ​​laik nie poradzi sobie z tym zadaniem. W tym artykule znajdują się szczegółowe instrukcje krok po kroku dotyczące pisania i wysyłania listu HTML.

List HTML

Funkcje tworzenia

Współczesny człowiek otrzymuje średnio codziennie5-6, a czasem do 10 e-maili. Oznacza to, że masz mniej niż sekundę, aby zwrócić uwagę adresata, zanim przejdzie do czytania kolejnej korespondencji. W przeciwnym razie Twój mailing w formacie HTML będzie całkowicie nieskuteczny i będziesz po prostu marnował swój czas.

Jeden z niuansów, które zwiększają Twoje szanseprzyciągnięcie uwagi potencjalnych klientów lub innych odbiorców docelowych to tworzenie korespondencji dostosowanej do urządzeń mobilnych. W końcu większość osób, do których adresowana jest poczta, korzysta zapewne z nich znacznie częściej niż z komputerów stacjonarnych i laptopów.

W tym celu można zastosować np. „responsywny design”, który łatwo dopasowuje się do wielkości ekranu.

Jaki powinien być szablon listu

Przy składaniu dokumentu przeznaczonego do wysłania do korespondentów należy przestrzegać następujących wymagań:

  • Powinien być wystarczająco wąski, to znaczy nie powinien przekraczać zakresu 500-600 pikseli, co zapewni prawidłowe wyświetlanie tekstu i innych treści na urządzeniach dowolnego typu.
  • Musisz użyć wystarczająco dużej czcionki dla wszystkich informacji tekstowych, ponieważ na urządzeniach z systemem iOS litera HTML będzie niewygodna do odczytania, jeśli rozmiar czcionki jest mniejszy niż 13 pikseli.
  • Elementy, które można kliknąć, muszą być wystarczająco duże i odizolowane od najbliższych linków. W takim przypadku adresat może je łatwo aktywować za pierwszym razem.

wysyłanie e-maili w formacie HTML

Przygotowanie

Przed opracowaniem wiadomości e-mail w formacie HTML należy:utwórz nowy folder na jednym z dysków i nazwij go, na przykład „Mailings”. Musisz także pobrać i zainstalować program Dreamweaver CS3. Ten produkt firmy Adobe jest jednym z najprostszych narzędzi do projektowania witryn internetowych i doskonale nadaje się do tworzenia listy mailingowej w formacie HTML.

Utwórz i zapisz dokument

Przed napisaniem części tekstowej listu musisz:

  • Otwórz popularny program do tworzenia HTML Dreamweaver CS3 (DW);
  • utwórz dokument wybierając jako typ "Transitional HTML 4.01";
  • zapisz plik z rozszerzeniem ".html";
  • znajdź polecenie edycji w górnym menu;
  • odznacz pole wyboru „Użyj CSS zamiast tagów HTML”.

Instrukcja krok po kroku

Przyjrzyjmy się teraz, jak utworzyć wiadomość e-mail w formacie HTML. Dla tego:

  • Otwieraj kolejno karty w menu„Wstaw” i „Tabela” i ustaw wymagane parametry tabeli. Na przykład wiersze — 2, kolumny — 1, szerokość — 700, nagłówek — góra. Granice można ustawić lub można się bez nich obejść, określając 0.
  • Utwórz nagłówek listu. Ponieważ wiadomość HTML jest przeznaczona dla większej liczby odbiorców, użyj operatora [first_name], zastępując żądaną nazwę odbiorcy.
  • W dolnym oknie „Właściwości” ustaw żądane parametry dla czcionki, rozmiaru i koloru tekstu tytułu oraz koloru tła.
  • „Wyjdź” z obszaru tytułowego. Na dole ekranu ustaw parametry kursora „Środek” i „Środek”.
  • Wstawiamy gotowy tekst listu lub „piszemy” go bezpośrednio w programie DW, wybierając żądany rodzaj i wielkość czcionki, a także położenie tekstu na stronie.

Tworzenie linków hipertekstowych

Spróbujmy ulepszyć e-mail w formacie HTMLprofesjonalny i zaawansowany. W tym celu ukryjemy linki hipertekstowe w treści. Aby to zrobić, musisz wybrać miejsce w tekście, które wybrałeś jako łącze hipertekstowe. W lewym rogu u góry ekranu należy "otworzyć" odpowiednią ikonę i wstawić link do wyskakującego okienka. W takim przypadku nie zapomnij zaznaczyć pola wyboru „_blank”, aby link otworzył się w nowym oknie, a adresat po jego obejrzeniu nie stracił dostępu do listu głównego.

jak wysłać e-mail w formacie HTML

Jak wstawić zdjęcia

Zazwyczaj e-mail w formacie HTML kończy się nadane kontaktowe, najlepiej ze zdjęciem autora lub odpowiednim zdjęciem tematycznym. Można go pobrać z Internetu lub wstępnie załadować w Internecie, ponieważ będzie potrzebny adres URL tego obrazu. Najlepszym sposobem na to jest skorzystanie z jednej z bezpłatnych usług.

Aby zaaranżować tak ładne zakończenie:

  • wstaw na dole litery, w głównej tabeli, kolejną z 3 kolumnami i parametrem dla granicy 0 pikseli;
  • umieść kursor w miejscu stołu, w którym chcą zobaczyć obraz;
  • zaznacz w dolnym oknie „W środku” i „Wzdłuż górnej krawędzi” dla każdej sekcji;
  • wybierz zakładkę „Wstaw” w górnym menu;
  • klikamy napis „Obraz” iw rozwijanym menu wklejamy skopiowany adres;
  • naciśnij "OK" 2 razy.

wysyłanie poczty HTML

Zobacz

Teraz, gdy już wiesz, jak utworzyć wiadomość e-mail w formacie HTML,należy upewnić się, że adresat widzi je we właściwej formie. Aby to zrobić, przed przesłaniem musisz wyświetlić podgląd swojej grafiki w programie Dreamweaver CS3. Aby to zrobić, musisz kliknąć ikonę kuli ziemskiej w górnym środkowym menu. Jeśli zamiast liter na ekranie pojawi się bełkot, należy ustawić automatyczne kodowanie w ustawieniach przeglądarki.

Kodowanie

Z sekcji „Projekt” i przejdź do części kodu – „Kod”. W oknie, które się otworzy, zaznacz i skopiuj wszystko między tagami <body> i </body>. Zapisujemy plik. Następnie wklej kod HTML.

jak wstawić HTML do e-maila

Wysyłanie e-maila w formacie HTML

Aby newsletter otworzyć „Smartresponder” (SR). Następnie:

  • wybierz lub utwórz nowy list wypełniając wiersze „Nazwa” i „Adres nadawcy”.
  • wypełnij wiersz „Temat listu”;
  • zaznacz kod HTML w lewym górnym menu;
  • wklej kod skopiowany w programie DW-code do dużego pola „Źródło”;
  • sprawdzić poprawność wyświetlania za pomocą narzędzia „Podgląd”;
  • usuń wersję tekstową listu;
  • przetestuj go pod kątem spamu za pomocą przycisku o tej samej nazwie znajdującego się obok przycisku „Wyślij”.

Kilka popularnych szablonów

Korzystanie z frameworka bardzo pomagaaby przyspieszyć proces tworzenia listu i uczynić go bardziej dostępnym dla programisty, który wciąż uczy się podstaw tworzenia dokumentów internetowych. Najpopularniejsze szablony to:

  • Cerber... Ten zestaw tak zwanych responsywnych szablonówumożliwia tworzenie e-maili wyświetlanych normalnie zarówno w aplikacji mobilnej Gmail, jak i w Outlooku. Pozwala na używanie bloków kodu HTML pojedynczo lub poprzez ich łączenie.
  • Atrament Jest przygotowaniem listów, których mailingi są niemal uniwersalne i kompatybilne z dowolnymi urządzeniami i klientami.
  • Naprawdę prosty szablon wiadomości e-mail w formacie HTML. Szablon pozwala na bardzo szybkie i łatwe tworzenie listów mailingowych. To prawda, że ​​będą miały niezwykle prosty, jednokolumnowy projekt, który zawiera wezwanie do działania.

e-mail w formacie HTML

Jak wstawić kod HTML do wiadomości e-mail

Rozważmy teraz nieco inny problem. Aby wstawić kod HTML do wiadomości e-mail, takiej jak Gmail, za pomocą przeglądarki Google Chrome, jak w poniższym przykładzie, należy:

  • nacisnąć przycisk „F12” lub wybrać odpowiednią sekwencję poleceń w menu;
  • w oknie, które otworzy się z kodem bieżącej strony klienta Gmail, znajdź miejsce, w którym ma zostać wstawiona litera HTML, kliknij prawym przyciskiem myszy i wybierz „Edytuj jako HTML”.
  • wklej skopiowany kod HTML;
  • naciśnij kombinację dwóch klawiszy „Ctrl” i „Enter”.

W tym samym celu możesz pobrać prosty wza pomocą programu Mozilla Thunderbird. Za jego pomocą możesz stworzyć list, a następnie najpierw wybrać „Wstaw”, a następnie „HTML” i tam wstawić swój kod mailingowy.

Narzędzia

Wtyczka e-biuletyn WordPress umożliwiaprofesjonalnie zarządzaj mailingami i subskrybentami. Co więcej, oba są wykonywane bezpośrednio przez panel administracyjny WordPressa. Ta okoliczność zapewnia pełną kontrolę i jest całkowicie bezpłatna, co jest dobrą wiadomością.

Innym prostym narzędziem jest Bulletproofobrazy tła, czyli proste narzędzie, które pozwala uzyskać kod obrazu tła generowanych wiadomości e-mail. Z jego pomocą możesz znacznie upiększyć swoją korespondencję. Aby zaprojektować list, wystarczy określić adres URL obrazu tła, który Ci się podoba i jego kolor zastępczy, a także czy te parametry mają być zastosowane do całej treści listu HTML, czy są przeznaczone tylko dla jednej z tabel komórki. W efekcie otrzymasz gotowy kod, który musisz skopiować i wkleić do swojego szablonu.

Konstruktor wiadomości e-mail w formacie HTML

Teraz wiesz, jak wysłać wiadomość e-mail w formacie HTML.Jego tworzenie nie jest szczególnie trudne, zwłaszcza jeśli korzysta się z gotowych szablonów, których nie brakuje w sieci. Dlatego nawet ci, którzy nie mają specjalnej wiedzy, z łatwością poradzą sobie z tym zadaniem.

Podobało mi się:
0
Popularne posty
Duchowy rozwój
Jedzenie
tak