Jak tworzyć niestandardowe szablony Mailchimp, które faktycznie działają idealnie?

Opublikowany: 2021-06-22

Kodowanie każdej wiadomości e-mail od zera trwa zbyt długo, więc posiadanie sprawdzonego szablonu wiadomości e-mail wielokrotnego użytku może zdziałać cuda w zakresie wydajności przepływu pracy. Ale tworzenie własnego szablonu może być również przygodą samą w sobie — nawet dla Mailchimp, drugiego najpopularniejszego dostawcy usług poczty e-mail (ESP) według naszego raportu o stanie dostawców usług poczty e-mail.

Możesz mieć preferowany sposób tworzenia wiadomości e-mail, ale jeśli chodzi o niestandardowe szablony dla Mailchimp, ważne jest przestrzeganie kilku bardzo szczegółowych wskazówek, aby nie tracić godzin na działanie szablonu. I mówię to, sam straciłem wiele godzin!

Kiedy przeprowadzę Cię przez proces tworzenia niestandardowego szablonu Mailchimp, pamiętaj, że sposób, w jaki ustrukturyzujesz kod, sposób tworzenia przycisków, a nawet rozmiar zdjęć, wszystko musi być rozwiązane za pomocą technicznego punktu widzenia Mailchimp.

Właśnie dlatego współpracowaliśmy z Mailchimp i innymi ekspertami w tym poście na blogu, aby upewnić się, że Twoje szablony Mailchimp rzeczywiście będą działały idealnie.

Różnica między gotowymi szablonami Mailchimpa a szablonami niestandardowymi

Mailchimp ma pokaźną bibliotekę szablonów, których możesz użyć do tworzenia e-maili. Każdy z nich można edytować za pomocą edytora „przeciągnij i upuść” i wielu modułów poczty e-mail do wyboru do układania treści.

Po co więc tworzyć własny szablon?

Szablony Mailchimp są wysoce edytowalne, dzięki czemu każda marka może ich używać z własnymi kolorami i stylami marki. Może to utrudnić monitorowanie ich wykorzystania i zachowanie spójności tożsamości marki w każdym e-mailu. Utworzenie niestandardowego szablonu zapewnia, że wiele stylów, które wbudujesz w szablon, nie zostanie zmienionych.

Ponadto środowisko edycji szablonów niestandardowych jest inne. Nie ma edytora „przeciągnij i upuść”. Zamiast tego utwórz moduły i elementy, które można powielać, przełączać lub usuwać w zależności od implementowanego języka szablonu. To kolejny sposób na zabezpieczenie się przed niechcianymi układami i edycją.

Jak zakodować niestandardowy szablon Mailchimp

Gotowy do stworzenia własnego szablonu wiadomości e-mail Mailchimp? Czytaj dalej, aby uzyskać porady i wskazówki, których potrzebujesz, aby zrobić to dobrze.

Pomyśl o swoich celach i użytkownikach końcowych

Zanim zaczniesz, ważne jest, aby najpierw pomyśleć o celu szablonu i ludziach, którzy będą z niego korzystać. Na przykład możesz potrzebować szablonu z dużą ilością szczegółów i elastyczności. Lub może być prosty i łatwy do przyjęcia dla mniej technicznych członków Twojego zespołu.

Joolz Joseph, konsultant ds. marketingu e-mailowego i motywator marketingu, mówi:

Joolz Józef

„Zadaj sobie pytanie: „Co chcemy przez to osiągnąć?”

Czy jest to szablon typu catch-all, którego można używać do wielu typów wiadomości e-mail, więc wymaga dużej elastyczności z różnymi blokami? A może coś bardziej sztywnego, takiego jak szablon promocyjny, seria onboardingowa lub newsletter?

Szablon z wieloma blokami, które można dostosować, ma wielką zaletę, ale czasami 2 lub 3 krótsze szablony są łatwiejsze do zarządzania dla osób, które mogą być przytłoczone wieloma opcjami.

Ta krótka uwaga na początku umożliwia zbudowanie szablonu z myślą o celu i użytkowniku końcowym.

Na przykład szablon promocyjny musi koncentrować się na głównym celu i wezwaniu do działania (CTA), podczas gdy biuletyn może zawierać wiele różnych CTA.

To wszystko musi znaleźć odzwierciedlenie w projekcie szablonu. Ułatwi to również osobie prowadzącej promocję upuszczanie odpowiednich treści, jeśli ich opcje są ograniczone!

Wykonanie jednego szablonu, który uchwyci każdą możliwość, może skutkować otrzymaniem wiadomości e-mail, która jest markowa, ale nie tak skuteczna, jak mogłaby być, więc warto najpierw zrobić ten krok wstecz i spojrzeć na to, co chcesz osiągnąć i jakiego rodzaju szablon (lub szablony) najlepiej w tym pomogą”.

Dzięki Joolz za wskazówkę! Gdy znasz cele swojego szablonu, możesz przejść do budowania.

Osadź styl CSS

Jedną z pierwszych rzeczy, o których warto wspomnieć, jest to, że Mailchimp automatycznie wbudowuje osadzone style CSS podczas zapisywania szablonu na platformie. Rozpoczynając pracę programistyczną, może być łatwiej osadzić wszystkie swoje style i ograniczyć rozrost kodu.

Twórz rzędy modułów

Kiedy tworzysz strukturę kodu, pomyśl o blokach, które chciałbyś, aby były edytowalne, zwłaszcza te, które chcesz mieć możliwość zmiany kolejności. Te klocki powinny znajdować się w rzędach, na przykład:

<!--modules that can be re-ordered-->
<!--module 1-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 1-->
<!--module 2-->
<tr>
<td>
<!--module code here-->
</td>
</tr>
<!--//module 2-->

Po zamknięciu tabeli nadrzędnej nie będzie można zmienić kolejności wierszy poza tym punktem.

Rozważ ograniczenia przycisków

Istnieje wiele sposobów na zakodowanie przycisku. Jednak tylko wyściełany przycisk będzie działał w Twoim niestandardowym szablonie Mailchimp. Dzieje się tak, ponieważ wiele stylów zastosowanych do znaczników kotwic edytowalnych przycisków jest usuwanych automatycznie. Format kodu VML i wszelkie rozpiętości umieszczone w tagu kotwicy również mogą zostać dostosowane.

Metoda z dopełnieniem przycisku oznacza, że tylko tekst przycisku będzie można kliknąć, ponieważ musisz zastosować dopełnienie i inne style przycisków do nadrzędnej komórki tabeli. Obszerna dokumentacja Mailchimp zawiera więcej szczegółów na temat kodu przycisku (i innych ograniczeń poczty e-mail HTML, jeśli jesteś ciekawy).

Używaj obrazów o dokładnych rozmiarach do edytowalnych symboli zastępczych

Podobnie jak przyciski, obrazy gubią trochę kodu, gdy są edytowalne. Tym razem usuwane są atrybuty HTML określające szerokość i wysokość. Outlook opiera się na nich, a środowisko edycji Mailchimp wyrenderuje również rzeczywisty rozmiar obrazu, dopóki nie wstawisz tych atrybutów z powrotem za pomocą edytora.

To sprawia, że używanie obrazów siatkówki, czyli obrazów o dwukrotnie większym rozmiarze, które mają być zmniejszone w wiadomości e-mail, jest trochę trudne.

Zalecam używanie obrazów 1x dla dowolnych symboli zastępczych, które kodujesz w swoim szablonie. Następnie, gdy szablon jest używany w kampanii, zmień swój symbol zastępczy na obraz 2x (obraz siatkówki), określając szerokość i wysokość w zakładce ustawień edytora obrazów.

Zastosuj język szablonów Mailchimp

Aby zdefiniować edytowalne obszary w szablonie, musisz zaimplementować język szablonów Mailchimp. Dostępna jest obszerna dokumentacja, która przedstawia elementy, które należy uwzględnić, w zależności od rodzaju tworzonego szablonu.

W przypadku wysoce konfigurowalnych szablonów, które mogą być używane przez wiele marek, możesz edytować style CSS. Aby to zrobić, postępuj zgodnie z przewodnikiem Mailchimp na temat edytowalnych stylów.

Na potrzeby tego przewodnika przyjrzymy się, jak utworzyć szablon, który ogranicza możliwość edycji tylko do zawartości. Aby to zrobić, musimy dodać następujący język do elementów HTML w szablonie:

mc:edit służy do udostępniania akcji edycji treści dla określonego elementu w szablonie. Upewnij się, że używasz unikalnej nazwy dla każdego wystąpienia tego w szablonie.

mc:hideable służy do zapewnienia akcji ukrywania/pokazywania określonego elementu w szablonie.

mc:label to opcjonalny znacznik używany do nazwania edytowalnej sekcji w aplikacji.

mc:repeatable służy do wykonania akcji powielania określonego elementu w szablonie.

mc:variant służy do przełączania się między dyskretnymi blokami HTML.

Aby uzyskać bardziej szczegółowe informacje na temat języka szablonów Mailchimp, to jest mój dokument.

Dołącz tagi scalające Mailchimp

Istnieje wiele tagów scalania, które można wykorzystać w szablonach i kampaniach. Tagi, które polecam zastosować to:

*|MC_PREVIEW_TEXT|*
Dodaj ten tag scalania tekstu podglądu do swojej kompilacji, aby upewnić się, że podczas konfigurowania kampanii treść dodana do pola tekstowego podglądu zostanie wstrzyknięta do e-maila. Hack tekstu podglądu, który zwykle dodajemy do wiadomości e-mail Litmus, aby utworzyć białe znaki, gdy nasz tekst podglądu nie działa w Mailchimp. Nie bój się. Mailchimp udokumentował idealny sposób na zrobienie tego dla niestandardowych szablonów.

*|UNSUB|*
W nagłówku i/lub stopce szablonu dodaj ten tag scalania do linku rezygnacji z subskrypcji, aby użytkownicy mogli usunąć się z listy, jeśli zdecydują się na to. Dodatkowo jest to wymóg prawny, więc na pewno nie chcesz o tym zapomnieć.

*|UPDATE_PROFILE|*
Daj subskrybentom możliwość aktualizacji swoich informacji lub zarządzania preferencjami.

*|ARCHIWUM|*
Dodaj ten tag scalania do łącza „wyświetl online”, aby umożliwić innym użytkownikom wyświetlanie wiadomości e-mail w przeglądarce internetowej.

Jak dodać szablon do Mailchimp

Teraz, gdy masz już zakodowany szablon, możesz go uruchomić.

Przejdź do „Kampanie > Szablony wiadomości e-mail” i kliknij przycisk „Utwórz szablon”, aby zaimportować szablon.

Najłatwiejszym sposobem wprowadzenia szablonu do Mailchimp jest przesłanie pliku zip zawierającego kod HTML i obrazy, ponieważ Mailchimp będzie zarządzać ścieżkami obrazów za Ciebie.

Mailchimp: wybierz punkt początkowy dla swojego szablonu

Po nazwaniu szablonu i przejściu do pliku zip szablon otworzy się w edytorze szablonów. Tutaj możesz wprowadzać poprawki, uzyskiwać dostęp do studia treści, w którym przechowywane są obrazy i inne zasoby, oraz testować renderowanie szablonu.

Gdy skończysz w tym edytorze, możesz zapisać i zamknąć, a szablon będzie gotowy do użycia.

Upewnij się, że Twój szablon działa w Mailchimp

Istnieje wiele typowych błędów HTML, więc dobrze jest sprawdzić, jak wygląda edycja w Mailchimp, zanim wyślesz ją do swojego zespołu, klientów lub innych osób. Aby to zrobić, przejdź do „Utwórz” w menu głównym, a następnie wybierz „e-mail” i pozostań przy „zwykłej kampanii”.

Możesz dodać niektóre szczegóły kampanii, takie jak wiersz tematu i tekst podglądu. Umożliwi to sprawdzenie, czy tag scalania i kod tekstu podglądu zostały poprawnie zaimplementowane.

Po kliknięciu przycisku „Zaprojektuj wiadomość e-mail” będziesz mógł wybrać szablon, którego chcesz użyć. Znajdź swój niestandardowy szablon na karcie „Zapisane szablony”.

Wybierz szablon w Mailchimp

Po wybraniu szablonu zostaniesz przeniesiony do środowiska edycji Mailchimp, w którym możesz przetestować wszystkie edytowalne sekcje.

Aby edytować edytowalny element, po prostu kliknij go, a po prawej stronie pojawi się okienko edycji.

Edycja elementu w szablonie Mailchimp

Uwaga : czasami zmiana kolejności moich bloków treści nie działa, więc jeśli po kliknięciu bloku nie widzisz ikony ze strzałką w górę iw dół, spróbuj zduplikować blok, który chcesz zmienić. Możesz usunąć niechciany dodatkowy blok po przeciągnięciu bloku, który chcesz przenieść do nowej lokalizacji.

Zmiana kolejności bloków w szablonie Mailchimp

Nie zapomnij przetestować renderowania wiadomości e-mail

Jak zawsze bardzo ważne jest, aby zobaczyć, jak różni klienci poczty e-mail renderują Twój szablon, zwłaszcza po użyciu go do utworzenia kampanii e-mail.

To dzięki takim testom zidentyfikowałem problemy z moimi szablonami i natknąłem się na niektóre dziwactwa Mailchimpa w usuwaniu kodu. Możesz łatwo testować zarówno w edytorach kampanii, jak i szablonów, przechodząc do „Podglądu” i „Wyślij testową wiadomość e-mail” do swojej skrzynki odbiorczej lub adresu testowego Lakmus, aby uzyskać dokładne, zautomatyzowane testy przed wysłaniem.

Litmus i Mailchimp integrują się również na kilka sposobów, aby pomóc Ci przetestować wiadomości e-mail tak dokładnie i skutecznie, jak to tylko możliwe. Przejdź do „Wejdź w tryb podglądu” i wybierz zakładkę „Skrzynka odbiorcza”, aby uruchomić testowanie wiadomości e-mail z wykorzystaniem narzędzia Litmus w podglądzie skrzynki odbiorczej w programie Mailchimp. Z planem Litmus Plus lub Enterprise zyskujesz dostęp do dodatkowych testów i integracji oszczędzających czas, w tym możliwość testowania kluczowych elementów przed wysłaniem podczas tworzenia z rozszerzeniem Litmus w Chrome i synchronizowania wiadomości e-mail między Litmus i Mailchimp.

Uzyskaj gotowe niestandardowe szablony

Jeśli szukasz edytowalnych szablonów Mailchimp, których możesz użyć od razu, wspieramy Cię.

Darmowy szablon Mailchimp zbudowany w lakmusie

Aby pomóc Ci zacząć, stworzyliśmy niestandardowy szablon Mailchimp zoptymalizowany pod kątem trybu ciemnego. Ma powtarzalne wiersze, blok zmiennej treści i przycisk przyjazny dla Mailchimp.

Pobierz nasz szablon Mailchimp →

darmowy szablon wiadomości e-mail Mailchimp autorstwa Litmus

Pobierz darmowy szablon Mailchimp zbudowany przez Litmus (plik .zip). Następnie zajrzyj do kodu, aby zobaczyć, w jaki sposób zastosowaliśmy kod szablonu Mailchimp, aby stworzyć mini wersję naszych darmowych szablonów e-mail Subskrybent Love do edycji w Mailchimp.

Szablony e-maili tworzone przez partnerów Mailchimp

Aby uzyskać jeszcze więcej opcji, sprawdź Mailchimp Marketplace z pięknymi szablonami wiadomości e-mail zaprojektowanymi przez partnerów serwisowych Mailchimp.

Szablony Mailchimp w Mailchimp Marketplace

Możesz wyszukiwać szablony wiadomości e-mail na podstawie celu marketingowego, niezależnie od tego, czy jest to wprowadzanie nowych subskrybentów, czy promowanie nowego produktu. Wybierz i kup idealny dla siebie szablon, a następnie zacznij dostosowywać go do swojej marki. Nie wymaga instalacji ani kodowania.

Twój idealny, niestandardowy szablon Mailchimp jest w zasięgu ręki

Niezależnie od tego, czy kodujesz własny, edytowalny szablon, czy dostosowujesz szablon innej osoby, jesteś na dobrej drodze do wydajniejszego procesu tworzenia wiadomości e-mail — i takiego, któremu możesz zaufać, aby tworzyć e-maile zgodne z marką i wolne od błędów.

grafika e-maila z zielonym znacznikiem wyboru i uśmiechniętą buźką

Upewnij się, że Twój szablon Mailchimp wygląda świetnie

Wyświetlaj podgląd wiadomości e-mail w ponad 90 klientach poczty e-mail, aplikacjach i urządzeniach za pomocą Litmus, aby zapewnić subskrybentom markowe, bezbłędne wrażenia. Za każdym razem.

Uzyskaj bezpłatną wersję próbną Litmusa →