1. Tổng quan
- Bài viết này sẽ giúp bạn bắt đầu thiết kế bố cục, màu sắc và nội dung của một mẫu Email mới thông qua công cụ Email Builder.
- Lợi ích: Chủ động linh hoạt tuỳ chỉnh giao diện Header, Body, Footer thông qua các thao tác kéo thả cấu trúc khối. Cho phép lưu trữ dễ dàng để tạo ra các template chiến dịch có tính ứng dụng cao.
- Đối tượng sử dụng: Marketer
2. Giải thích Thuật ngữ & Thông số
- Khối (Block): Các thành phần nội dung nhỏ nhất (Văn bản, Hình ảnh, Nút bấm) để kéo vào bố cục.
- Bố cục (Layout): Các dải hàng phân chia số lượng cột (1 cột, 2 cột…) đóng vai trò làm khung xương chứa các Khối nội dung.
- Menu bar: Thanh công cụ tiện ích dọc bên trên hỗ trợ người dùng thao tác nhanh với mẫu email hiện tại.
- Side menu: Bảng điều hướng tuỳ chỉnh tính năng chi tiết thường nằm kế bên.
3. Điều kiện tiên quyết (Prerequisite)
- Bài viết trước: Tổng Quan Và Hướng Dẫn Truy Cập Email Builder
- Phân quyền: JOURNEY_BUILDER > Marketing > Mẫu thông điệp > Mẫu E-mail. Xem hướng dẫn phân quyền truy cập RBAC tại đây.
4. Các bước thực hiện
4.1. Tổng quát giao diện thiết kế
Giao diện mẫu email có 3 phần chính: Hiển thị nội dung email; Menu bar; Side menu.
4.1.1. Hiển thị nội dung mẫu email
Là giao diện giúp người dùng nhìn thấy nội dung mẫu email. Nội dung email cần có đầy đủ 3 khối Header – Body – Footer.
Để tạo nội dung hiển thị trên mẫu email, chọn các khối trong tab Thêm nội dung để tạo layout phù hợp.
4.1.2. Menu bar
Menu bar là công cụ hỗ trợ người dùng thao tác với mẫu email hiện tại, bao gồm các lựa chọn:
- Undo & redo.
- Chọn chế độ di chuyển/ chế độ sửa
- Xem email hiển thị trên các desktop và mobile.
- Đổi mẫu email
- Xem trước
- Gửi email thử nghiệm.
- Xuất file html
4.1.3. Side menu
Side menu gồm 2 nhóm: Thêm nội dung và Cài đặt chung
a. Thêm nội dung
Side menu Thêm nội dung gồm có 3 tab: Khối, Bố cục và Thư viện
b. Khối
Tab Khối gồm những công cụ để đưa nội dung vào email.
Người dùng có thể kéo thả các thành tố vào email mà không cần tạo trước bố cục, hoặc tạo khung nội dung email sử dụng tab Bố cục trước khi sử dụng Khối.
Để sử dụng thành phần trong tab Khối, chọn kiểu định dạng content muốn sử dụng và kéo, thả vào phần giao diện hiển thị.
Người dùng có thể tuỳ chỉnh phần hiển thị của thành tố theo side menu bên phải theo nhu cầu (nếu cần)
Đối với các thành tố chứa nội dung dạng chữ (gồm Tiêu đề, Văn bản, Bảng, Danh sách), người dùng có thể thay đổi nội dung chữ bằng cách nhấn đúp chuột vào thành tố, và tuỳ chỉnh hiển thị của nội dung bằng thanh công cụ ở trên.
c. Bố cục
Tab Bố cục giúp cho người dùng xây dựng bố cục email của mình. Email builder của MOBIO có nhiều dạng khối khác nhau, được định dạng sẵn để tạo bố cục trong email.
Người dùng có thể tạo bố cục bằng cách sử dụng Mẫu có sẵn, hoặc sử dụng các khối Mặc định để tạo bố cục
Bước 1: Người dùng chọn khối có số cột phù hợp để tạo layout, và kéo thả khối đó vào phần hiển thị nội dung
Bước 2: Thực hiên các thao tác cơ bản cho khối tại thanh công cụ (nếu cần).
- Chuyển lựa chọn khối trong sang chọn khối bên ngoài
- Di chuyển (Move)
- Nhân đôi (Duplicate)
- Lưu mẫu khối
- Xóa khối
Bước 3: Tuỳ chỉnh khối trên side menu bên phải theo nhu cầu (nếu cần)
Bước 4: Chọn tab Khối ở side menu bên trái, kéo các khối phù hợp vào layout
d. Cài đặt chung
Mục Cài đặt chung cho phép người dùng tuỳ chỉnh hiển thị của email, bao gồm tuỳ chỉnh nền và khoang nội dung.
4.2. Đổi tên và Lưu trữ mẫu email
Sau khi sửa mẫu email:
- Ấn Lưu & Thoát để lưu mẫu email này
- Ấn Hủy bỏ để hủy bỏ phần vừa chỉnh sửa.
- Ấn nút chỉnh sửa cạnh tên mẫu email để thay đổi tên mẫu email
5. Quy tắc vận hành & Use case
- Tab “Cài đặt chung” (thuộc Side Menu) dùng để thiết lập thuộc tính background tĩnh cho toàn Email, đồng thời quy định độ rộng tối đa chuẩn của khoang nội dung nhằm đáp ứng khi rơi vào chế độ dàn trang trên Smartphone.
6. Các câu hỏi thường gặp (FAQ)
- Có bắt buộc phải xây dựng Bố cục Layout trước khi thêm các Khối văn bản/ảnh không?
Theo nguyên tắc hệ thống “Bố cục bao bọc Khối”, hệ thống vẫn cho phép kéo thả khối mà không cần kéo dàn layout trước. Khối lúc đó sẽ hiểu là một bộ dải cột đơn định hình mặc định. Tuy nhiên, khuyến khích Marketer nên setup “Bố cục” nhằm tối ưu hoá chia đoạn, sắp cột gọn gàng và chuẩn Responsive.