Маркетинг Структура How-to
~ 4 хв читати
14986 перегляди
оцінити
08 вересня 2017

Базові блоки редактора Stripo.email

Stripo / Blog / Базові блоки редактора Stripo.email

Зазвичай до базових блоків відносять:

  • зображення (про зображення я вже робив пост);
  • текст;
  • кнопку;
  • роздільник.

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

Відео

Коротко: в емейл-повідомлення можна просто вставити посилання на відео, а зображення, кнопочка «Play» і альтернативний текст підтягнуться самі по собі.

Stripo-Video-Basic-Block

Детальніше: є кілька способів додати відео прямо до листа, щоб воно програвалася прямо всередині листа, хоча це працює лише за підтримки HTML5 і не завжди рекомендується, тому що «листи люблять тишу».

Ідеальним варіантом є вставляти зображення з відео з кнопкою «Play» з альтернативним текстом. Додавши компонент, можна вставити посилання на відео, а ми самі збігаємо до Youtube, отримаємо зображення, застосуємо до нього одну з кнопок, яку можна вибрати, отримаємо назву відео та підготовлене зображення з відео вставимо до листа. Виходить дуже швидко і здорово.

Хотілося б додати ще можливість поміняти зображення, вставивши своє, але це ми додамо трохи пізніше.

Зараз ми підтримуємо Youtube і Vimeo.

Соц. мережі

Коротко: вибираєте стиль картинок, вказуйте які профілі додавати і блок зформується автоматично.

Stripo-Basic-Block-Social-Network

Найчастіше у листів є блок«стежте за нами в соц. мережах» із перерахуванням іконок і посилань в різному стилі. Великі або маленькі, але неодмінно послідовність іконок з посиланнями.

Якщо в профілі вказані посилання на профілі компанії то вони будуть сформовані автоматично, а якщо немає або потрібно вказати інші, то це завжди можна зробити вручну.

Меню

Коротко: додавайте, видаляйте пункти меню, виділяйте акції, керуйте роздільниками і стилями меню. З зображеннями або без. Все дуже просто.

Stripo-Basic-Block-Social-Network

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

Хотілося б ще додати вертикальне меню, для тих типів меню, які зазвичай додають до футеру.

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

Лічильник зворотного відліку (очікуємо релізу на протязі декількох місяців)

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

Раніше ми користувалися motionmail як окремим сервісом, а тепер вирішили інтегрувати різні сервіси для віджетів в листах. Подивимося які компоненти будуть найбільш популярні і зробимо свої власні, якщо в цьому буде сенс. Таких компонентів може бути багато: персоналізація зображень в листі, HTML5 відео в листі, різні фішки realtime email або, як багато хто говорить, agile mail.

Банер

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

Stripo-Banner-Basic-Block

Я не уявляю як ми жили без цього компонента раніше! Є особливе бажання додати його і на редагування будь-якого зображення. Як же мені хотілося б, щоб до картки товару іноді можна було прикріпити лейбочку «розпродаж» або «знижка 20%» просто по властивості товару. Але це вже буде окрема функціональність.

Коли додамо цей компонент, напевно, розпишу його окремо.

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

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

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

← Попередні статті Наступні статті →
04 жовтня · 16 хв читати
Розмір емейл шаблону: Висота і Ширина елеметів листа

Це самий об’ємний пост, який ми коли-небудь публікували, тому що не достатньо лише двох речень або навіть двох абзаців, щоб пролити світло на всю тему. Стандартний розмір шаблону електронного листа для ширини становить 600 пікселів для настільних комп’ютерів, а також 320 пікселів для вертикального і 480 пікселів для горизонтального перегляду на мобільних пристроях. Висота не обмежена і залежить від довжини вмісту. Це все! Кілька років тому ширина 600 пікселів була обов’язковим стандартом і не мала альтернатив. На даний момент 600 пікселів –...

Шаблон How-to
Featured Image_Dynamic Emails
15 вересня · 11 хв читати
Створюємо динамічні листи менш ніж за 10 хвилин

На сьогодні динамічний контент є найефективнішим з інструментів, що доступні email-маркетологам. За допомогою динамічних листів ми можемо: доставляти контент в режимі реального часу, тримаючи підписників в курсі подій. Ми використовуємо його в дайджест-розсилках, щоб надсилати тільки свіжі публікації блогу; в промо-листах, щоб повідомляти всіх одержувачів, коли закінчиться термін дії акції, тощо; персоналізувати контент, щоб зробити розсилки максимально релевантними. З його допомогою ми персоналізуємо пропозиції промо-листів відповідно до індивідуальних уподобань, попередніх покупок, геолокації, за статевою ознакою тощо, а також використовуємо динамічний...

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