Samouczek: Jak stworzyć e-mail blokujący kolory

Bardzo lubimy wszystkie rzeczy kolorowe w e-mailach . Jednym ze stylów, który uwielbiamy (i często widzimy), jest blokowanie kolorów, gdzie około połowa wiadomości e-mail ma pogrubiony kolor tła, a druga połowa jest biała. To prosta technika, która sprawdza się w skrzynkach odbiorczych. W tym samouczku pokażemy, jak w kilku prostych krokach stworzyć własną wiadomość e-mail blokującą kolory. Zbadamy również, jak:

• Dodaj wiele kolorów tła HTML w wiadomości e-mail
• Utwórz wiele kolumn
• Formatuj tekst (kolor, rozmiar, wysokość linii, linki itp.)
• Wypoleruj wiadomość e-mail, dostosowując odstępy i dopełnienie

Inspiracja: wysyłka poza ekranem

Offscreen to drukowany magazyn i cotygodniowy biuletyn „z przemyślanym, skoncentrowanym na człowieku podejściem do technologii i sieci”. Jej biuletyn nazywa się Offscreen Dispatch i od dawna podziwiamy jego prosty, wyrazisty projekt. Offscreen używa tej samej techniki blokowania kolorów w każdym e-mailu, a naprawdę ładny efekt sprawia, że ​​e-mail wygląda jak strona w magazynie. Górna część — w której projektant stron internetowych Kai Brach pisze notatkę do subskrybentów — jest zawsze różowa. Reszta wiadomości jest zawsze biała. Sprawdź to:

Nie ma tu nic szczególnie wymyślnego — żadnej sztuki ani fotografii — ale dynamiczny układ, dobrze sformatowany tekst i blokowany kolorami projekt łączą ten e-mail.

Krok 1: Zbuduj strukturę

Otwórz edytor BEE w MailUp i zacznij od podstawowego pustego jednokolumnowego szablonu.

Zanim zaczniemy przeciągać elementy struktury, poświęćmy chwilę na sprawdzenie wiadomości e-mail Offscreen Dispatch i zidentyfikowanie elementów układu. Oto oznaczona wersja:

Wiadomość e-mail zmienia się między strukturami jedno- i dwukolumnowymi, co jest łatwe do złożenia w BEE.

Przeciągnij nad odpowiednimi formacjami wierszy z menu Wiersz po prawej stronie. W przypadku tego e-maila będziemy potrzebować dwóch najważniejszych opcji:

Oto jak wygląda nasza poczta e-mail z wprowadzoną strukturą wierszy:

Krok 2: Ułóż bloki treści z tekstem/obrazami

Teraz, gdy mamy już gotowe kości naszego e-maila, przeciągnij bloki zawartości, które odpowiadają typowi zawartości — tekstowi i/lub obrazowi — który chcemy umieścić w każdej sekcji. Następnie wklej tekst i przeciągnij obrazy.

Oto 1-2-3, jak umieścić swoje treści. Zaczynając od pierwszego wiersza — nagłówka — oto jak:

(1) Wciągnij strukturę dwukolumnową:

(2) Dodaj bloki tekstowe po lewej stronie; blok treści obrazu po prawej stronie:

(3) Upuść swój tekst i obraz:

Przejrzyjmy każdy wiersz, aby uporządkować zawartość.

Oto nasz e-mail z pozostałymi blokami treści:

Teraz zakończymy dodawanie tekstu:

Voila! Następnie sformatujmy.

Krok 3: Sformatuj kolory tła

Teraz czas na zabawną część. Zobacz, jak łatwo jest stworzyć efekt blokowania kolorów.

Po pierwsze, aby dopasować dokładny odcień bladego różu z wiadomości e-mail Offscreen Dispatch, użyliśmy HTML-Color-Codes.info do identyfikacji koloru z obrazu w nagłówku.

Kody kolorów HTML identyfikują kod szesnastkowy jako #F5BBA2. Aby pierwszy rząd miał właściwy kolor, będziemy:

1. Wybierz wiersz
2. Przejdź do opcji Kolor tła wiersza w menu po prawej stronie
3. Wklej kod koloru (lub wybierz ręcznie)

Jednolity kolor od krawędzi do krawędzi! Teraz uzupełnijmy blok koloru różowego. Po prostu wybierzemy kolejny wiersz i zrobimy to samo ponownie.

Teraz nasz e-mail jest zablokowany kolorami. Tak, to takie proste.

Krok 4: Sformatuj tekst

Zakończmy ten projekt e-maila kilkoma poprawkami formatowania. Zaczniemy od tekstu.

Wybierz domyślną czcionkę wiadomości e-mail

Zamiast przechodzić przez poszczególne bloki treści w celu wybrania czcionki e-maila , przejdź do menu Ustawienia po prawej stronie i wybierz czcionkę, której chcesz użyć w całej wiadomości e-mail.

Następnie możesz zmienić czcionkę nagłówka lub wybrać odpowiednie sekcje.

Dostosuj rozmiary czcionek

Dotknij dowolnego bloku tekstu i użyj menu rozwijanego, aby dostosować rozmiar czcionki.

Dostosuj kolory tekstu

Użyj tego samego menu, aby wybrać preferowane kolory. Ponownie użyj tego samego dopasowanego kodu koloru, aby uzyskać dokładny odcień, który jest potrzebny.

Sformatuj styl linku

Nie zapomnij o linkach! W tym samym menu Ustawienia, w którym wybrałeś domyślną czcionkę, możesz również sformatować styl łącza. W tym przypadku wybierzemy kolor czarny.

Podczas dodawania linków do wiadomości e-mail upewnij się, że pole „Podkreśl łącze” jest zaznaczone. (To nawet najlepsza praktyka w zakresie ułatwień dostępu do poczty e-mail !)

Wysokość linii

Upewnij się, że w tekście treści jest miejsce na oddychanie. W przypadku każdego edytowanego bloku treści dostosuj wysokość linii tekstu.

Wskazówka: zduplikuj wiersz

Jeśli spędziłeś dużo czasu na formatowaniu tekstu w określonym wierszu, możesz go po prostu zduplikować, zamiast ręcznie wprowadzać te same poprawki w innym wierszu.

Stuknij wiersz, który chcesz skopiować. Następnie kliknij obraz z podwójnym polem do końca po prawej stronie.

Twój wiersz zostanie skopiowany! Następnie po prostu przeciągnij go i chwyć ikonę kierunku po lewej stronie, aby umieścić nowy wiersz w wiadomości e-mail.

Krok 5: Dostosuj wyściółkę

Ostatni krok! I to jest ważne. Zanim skończysz e-mail, przyjrzyj się dokładnie odstępom między blokami treści. Jeśli nadal jest zbyt wiele luk – lub za mało miejsca na oddychanie gdziekolwiek indziej – bardzo łatwo jest wprowadzić poprawki.

Na przykład nadal istnieje luka między „Poza ekranem” a „Wysyłka” w nagłówku naszej wersji roboczej e-maila. Aby to zaostrzyć, dotknij dowolnego bloku treści, przewiń w dół do opcji Blokuj w menu po prawej stronie i upewnij się, że w sekcji Wypełnienie jest włączone „Więcej opcji”. Następnie możesz zmniejszyć (lub zwiększyć) dopełnienie z dowolnej strony w dowolnym fragmencie treści.

Krok 6: Wyświetl podgląd gotowego e-maila z blokowaniem kolorów!

Ok – ostatni, ostatni krok. Podczas projektowania dowolnej wiadomości e-mail wyświetlaj jej podgląd, aby upewnić się, że podoba Ci się jej wygląd zarówno na komputerze, jak i telefonie komórkowym. Oto rzut oka na to, jak kształtuje się nasz:

Zakończyć

Tworzenie wiadomości e-mail z zablokowanymi kolorami jest prostsze niż myślisz i dodaje wiele wartości wizualnej do Twojej wiadomości. Jeśli chcesz naprawdę opanować najbardziej zaawansowane sztuczki w zakresie projektowania wiadomości e-mail, od razu pobierz nasz bezpłatny przewodnik po projektowaniu wiadomości e-mail!