Дизайн Структура How-to
~ 6 хв читати
2 коментарі
19491 перегляди
оцінити
06 листопада 2017

Використання смуг для оптимального оформлення листа

Stripo / Blog / Використання смуг для оптимального оформлення листа

Що таке смуги і навіщо вони потрібні?

Одна з найважливіших цілей Stripo — прискорити процес створення повторного листа. Для цього ми реалізували бібліотеку блоків, що позбавляє вас від потреби повторно створювати одні і ті ж елементи від листа до листа.

Наприклад, можна зберегти окремо кожен елемент футера або шапки, а при подальшому створенні листа швидко скласти з них такий самий елемент. Але є шлях простіше — просто зберегти у бібліотеку смугу, яка зберігає в собі вже готовий елемент цілком.

Смуга — область емейл-листа, яка зберігає в собі структури, контейнери і базові блоки. Нижче розглянемо як працювати із смугами і яке застосування їм можна знайти з точки зору дизайну.

stripo-priklad-liniy

Як працювати зі смугами?

Розглянемо як працюють смуги на прикладі шаблону з нашої бібліотеки. Коли ви відкрили шаблон, то відразу можна помітити, що смуги визначають логіку листа, розбиваючи його на завершені секції.

Зберігаючи ці структурні елементи у бібліотеку, при верстанні наступного листа буде досить додати в лист збережену смугу і підставити актуальні дані.

Для редагування доступні чотири поля:

  • Колір фону смуги;
  • Колір фону контенту;
  • Зображення у фоні;
  • Приховувати на мобiльних.

На перший погляд здається, що доступних налаштувань занадто мало. Але це саме той випадок, коли «less is more» і доступні налаштування дозволяють повністю міняти зовнішній вигляд листа. Як саме, дивиться нижче.

rozumni-bloki-linii

Як можна використовувати смуги?

Що таке смуги і навіщо вони потрібні ми вже розібралися, а тепер потрібно зрозуміти, як же вони допоможуть нам у створенні унікального і привабливого листа.

Кастомізація загального фону

Напевно ви стикалися з тим, що в кожному редакторі можна задати фон листа, який буде відображатися в більшості поштовиків. Але на момент, коли потрібно зробити акцент на конкретному блоці або зробити частину фону, наприклад, чорним, а другу білим зазвичай починаються проблеми і саме тоді ми вперше залазимо в код. У Stripo ж ця проблема вирішується двома кліками:

  1. Натискаєте на смугу;
  2. Обираєте колір.

На прикладі нижче завдання стояло виділити блок з промокодом і акцентувати на ньому увагу. Було вирішено зробити цей блок частиною фону, що дозволило його органічно вписати і при цьому не зіпсувати зовнішній вигляд листа.

prikladi-stripo-design

Не можна сказати, що використання синього кольору тільки на фоні контейнера виглядає зовсім вже погано, але вихід за рамки стандартних 600 пікселів — це ще один крок до наближення зовнішнього вигляду листа до стилю сайту.

Ще один варіант кастомізації фону з’являється, коли у фірмовому стилі використовуються патерни різного кольору і їх потрібно комбінувати між собою.

Один з варіантів вирішення — заздалегідь підготувати зображення, поставити його на фон і сподіваються, що ваші одержувачі будуть відкривати листа саме так, як ви хочете і ніяк інакше. Однак, так не буває, а вгадати з підготовленим зображенням практично неможливо. Проблема вирішується маніпуляціями в коді або ми можемо просто створити смуги на потрібних нам блоках листа і поставити їм зображення фоном.

В цьому випадку ви рятуєтеся від потреби заздалегідь готувати зображення і вгадувати як лист буде бачити читач. Тепер потрібний фон буде відображатися однаково добре для будь-якого розширення.

toys-email-ua-stripo

Розширення банера

Бувають моменти, коли для сайту було намальовано прекрасний банер і статистика показує, що на нього клікають частіше за все. З’являється природне бажання зробити розсилку з цією пропозицією і, природно, хочеться використовувати саме це зображення. Але біда в тому, що банер був намальований для сайту і для письма він дуже широкий. Якщо такий банер просто вставити до листа, то швидше за все текст стане нечитабельним і вся краса зводиться нанівець.

Положення можна врятувати, якщо правильно обрізати зображення. Ми залишаємо в 600 пікселів все найважливіше і логічно завершене, а решту частини банера вставляємо як фон в смугу. У підсумку ви отримуєте банер, який буде відображатися на мобільних пристроях логічно зрозумілим, а на робочому столі читачі розсилки побачать повноцінний банер, як і на вашому сайті.

linii-email-ua-stripo

А часом нам просто хочеться зробити так, щоб фон став продовженням банера і ніс в собі тільки естетичне задоволення, без інформаційної складової. На прикладі нижче, фон банера — градієнт. Це могло б створити дискомфорт при перегляді листа, якби ви просто поставили на фон білий або червоний колір. Але за допомогою смуг можна ставити на фон такий же градієнт і лист виглядає як єдине ціле і кожен елемент тільки доповнює один одного.

linii-email-ua-stripo-antoska

Важливо запам’ятати

Пам’ятайте кілька важливих моментів, які потрібно враховувати при роботі з смугами, щоб використовувати їх максимально ефективно.

  • Смуги відображаються точно так же, як і звичайний суцільний фон. З цього випливає, що вони будуть видні тільки на екранах, ширина яких перевищує 600 пікселів;
  • Додаючи власні стилі важливо пам’ятати, що смуга — це батьківський елемент для всіх контейнерів, структур і базових блоків, які в ньому зберігаються, тому можливо якісь стилі будуть успадковані, що може негативно позначитися на зовнішньому вигляді листа і його адаптивності;
  • Параметр «Колір фону контенту», який ви задаєте в смузі не перекриває колір фону, який ви задаєте в структурі. Щоб змінювати колір структури зі смуги потрібно в настройках контейнера виставити прозорий фон;
  • При адаптації стороннього шаблону потрібно керуватися покроковою інструкцією, щоб в результаті отримати адаптований і повністю редагований шаблон, готовий для експорту в вашу ESP.

Matt David Harvey 5 місяців тому

Can we get rid of the space between the structure of the email and the end sides of the email at all? I want my email content to be to the left of the email I send out, not in the centre.

Ганна Кузнєцова прокоментував Matt David Harvey 4 місяці тому

Hello, Matt. Thank you for your question. Yes, you can do it in a few steps: 1. Left-click the text in your template. Above the template, in the settings panel, choose a necessary alignment (left, in our case). 2. Make sure you are working with a structure, not container https://prnt.sc/qk0s4o 3. On the side panel, remove all the "Left" paddings. https://prnt.sc/qk0tax 4. There's a slight chance you might need to set the alignment again. Hope this helps.

Вас також може зацікавити

← Попередні статті Наступні статті →
15 травня · 14 хв читати
Дизайн підпису в емейлах: 10 кращих прикладів 2019 року

Підписи емейлів допомагають нам будувати бізнес і справляти позитивне враження на клієнтів. Оскільки це останній елемент, який отримувач бачить в емейлі, ми маємо робити персональні підписи креативними і такими, що запам’ятовуються. Тож нумо знайомитися із найкращими прикладами підписів та їх правильним використанням в електронних листах і шаблонах розсилок. Варто згадати, що для будь-якого бізнесу потрібні стримані професійні підписи з докладною контактною інформацією, в той час як дизайнери можуть дозволити собі більш креативні та оригінальні підписи. Спеціалістам з інших сфер також необхідно...

Дизайн Маркетинг Шаблон
28 квітня · 18 хв читати
Ліпші шрифти для емейлів: Поради використання

Однією з найяскравіших проблем в процесі створення електронного листа є вибір шрифту. Розмір, колір, форма, відстань … Чи має значення? Так, це так, але найголовніше – вибрати той, який легко читати, всі інші функції шрифту незначні. Дивіться наше коротке відео про шрифти, їх різновиди, як застосувати декоративні шрифти у редакторі Stripo. Та головне – як підібрати “той самий” шрифт для ваших шаблонів емейл-повідомлень: При виборі шрифту для вашого листа є два варіанти. Перший варіант – вибір веб-безпечного шрифту, який є стандартним...

Дизайн Шаблон
Будьте завжди в курсі останніх новин у сфері email-маркетингу