Структура листа: макети, елементи та приклади

Редактор Blocks дає змогу без зусиль і без жодного рядка коду створювати найрізноманітніші шаблони листів: від суто текстових (як-от лист про звільнення) до яскравих дизайнерських (як-от різдвяний лист)! Читайте далі, щоб дізнатися, як із порожніх блоків і елементів зібрати гарний лист і зберегти готові блоки на майбутнє.

Навіщо порожні блоки й елементи під час дизайну шаблону листа

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

Щоб спробувати порожні блоки й елементи, відкрийте редактор (візьміть готовий шаблон із нашої галереї або порожній шаблон) і перейдіть на вкладку «Блоки» чи «Елементи». Далі просто перетягуйте порожні блоки й елементи, щоб створити дизайн листа, не торкаючись коду!

Із порожніми блоками й елементами ви витрачаєте менше часу на виробництво листів і отримуєте добре структурований шаблон, у якому є все, щоб рекламувати ваш продукт: логотип, контакти, упорядкований текст, зрозумілі заклики до дії, банер розсилки тощо. З Blocks ви не забудете про жоден важливий елемент листа.

Що таке порожні блоки в Blocks?

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

У Blocks порожні блоки — це вільні місця, куди згодом можна додати елементи листа (зображення, текст, кнопки тощо). Порожні блоки допомагають тримати шаблон в порядку й будувати його так, як вам потрібно.

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

Крок 1: виберіть структуру

Крок 2: перетягніть структуру туди, де вона потрібна.

Коли порожні блоки додано, настав час заповнити їх елементами.

Що таке елементи в Blocks?

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

Крок 1: виберіть елемент

Крок 2: перетягніть елемент на вільне місце структури

Які елементи є в колекції та як ними користуватися

Наша колекція елементів містить усі основні частини шаблону листа (хоч це рекламний лист, вітальний, лист з опитуванням чи будь-який інший):

• Зображення. Перетягніть цей елемент і завантажте своє зображення (JPG, PNG, GIF або WEBP) чи вставте посилання на нього у властивостях елемента праворуч. А можна скористатися функціями ШІ в Blocks і згенерувати ідеальне зображення для шаблону.

• Текст. Додавши цей елемент у шаблон, редагуйте текст так само, як у MS Word чи Google Docs: змінюйте шрифт, розмір, колір та інші параметри.
• Хедер. Цей елемент автоматично форматується як заголовок.
• Кнопка. Налаштувавши кнопку у властивостях елемента праворуч, не забудьте додати URL цільової сторінки.

• Списки. Виберіть один із двох видів списку, щоб структурувати текст: нумерований або маркований. Відредагуйте текст і додайте до списку власні зображення.
• Дільник. Цей елемент відокремлює розділи листа один від одного. Налаштовується він так само, як і інші елементи.
• Спейсер. Додає порожній простір між елементами шаблону. Завдяки йому в дизайні листа з’являється більше «повітря».
• Соцмережі. Цей елемент містить логотипи найпопулярніших соцмереж. Додайте власні посилання у властивостях елемента праворуч, щоб заохотити підписників стежити за вами й на інших майданчиках.
• Таблиця. У таблицю можна додавати текст і зображення.
• Зворотний відлік. Додає таймер зворотного відліку, який показує, скільки часу лишилося до розпродажу чи події.
• Відео. Додає прев’ю відео, з якого підписник одним кліком переходить до самого ролика.
• Карусель і Акордеон. Інтерактивні AMP-елементи: карусель дає підписникам гортати зображення, а акордеон ховає вміст у розгортувані розділи.

Коли ви додали й розставили в шаблоні всі потрібні елементи, не забудьте натиснути «Зберегти» або скористатися поєднанням клавіш Ctrl+S.

Як зберегти елементи листа на майбутнє

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

Щоб зберегти елемент листа, виконайте кілька простих кроків:

1. Наведіть курсор на елемент листа, який хочете зберегти. Ліворуч від елемента з’явиться панель;

2. Виберіть «Зберегти блоки»;

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

Як знайти збережений блок листа

Усі збережені блоки зберігаються в колекції. Знайти їх можна на вкладці «Блоки», у розділі «Збережені блоки»: шукайте за ключовими словами або користуйтеся фільтрами.

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

Підсумки

Порожні блоки й елементи допомагають заощадити ресурси на виробництві листів і скласти всі частини листа в охайний шаблон. З Blocks дизайн листа — це просто:

1. Перетягніть потрібну структуру;
2. Перетягніть елементи в порожні блоки;
3. Налаштуйте елементи листа на свій смак;
4. Збережіть блоки на майбутнє й створюйте нові шаблони листів за лічені хвилини.