Gần đây, chúng tôi đã xuất bản các bài đăng trên blog về các xu hướng thiết kế email mới nhất và hướng dẫn về cách tạo chiến dịch email đầu tiên của bạn, trong đó, tóm lại, chúng tôi đã chỉ ra những yếu tố mà một email nên chứa
Trong bài đăng này, chúng tôi sẽ đi sâu vào chi tiết để chỉ ra cách tạo email đầu tiên của bạn với trình tạo mẫu email Stripo
Các cách để bắt đầu xây dựng một email
Có ba cách để tạo mẫu email đầu tiên của bạn với Stripo
Chỉnh sửa một trong 5500 mẫu email đã chuẩn bị
Mã hóa của riêng bạn
Bắt đầu từ đầu
Để sử dụng bất kỳ tùy chọn nào đã nói ở trên, trong tab “Email”, bạn cần nhấn nút “Mẫu mới”
kéo cấu trúc 1 cột vào mẫu của bạn;
thả khối Hẹn giờ cơ bản vào đó;
- nhấp chuột trái vào vùng chứa này trong mẫu email để kích hoạt bảng cài đặt hoạt động với bộ hẹn giờ;
đặt ngày kết thúc và thời gian chính xác;
- đặt màu nền hẹn giờ phù hợp nhất với thiết kế email của bạn;
thay đổi kích thước và màu sắc của các số nếu cần. Ban đầu, Stripo áp dụng các tham số mà bạn đã chỉ định khi thực hiện cài đặt chung;
bật nút “Hiển thị ngày” nếu bạn muốn người nhận xem còn bao nhiêu ngày. Nếu không, họ sẽ chỉ nhìn thấy giờ và phút. “5 ngày 20 giờ” dễ hiểu hơn “140 giờ”;
- thay đổi kiểu ngày nếu cần. Theo mặc định, chúng tôi sử dụng “. ” [dấu hai chấm] để phân biệt ngày với giờ, phút, giây. Bạn cũng có thể đặt “-” và “/”;
- chuyển nút “nhãn số” để hiển thị tên “ngày”, “giờ”, “phút” và “giây” dưới các số tương ứng;
- đặt màu, loại phông chữ và kích thước cho nhãn;
bật/tắt nút “Hình ảnh hẹn giờ đã hết hạn”;
tải lên hình ảnh [như được giải thích trong đoạn tương ứng] sẽ được hiển thị cho khách hàng sau khi hết giờ. Đây là tùy chọn, nhưng chúng tôi thực sự khuyên bạn nên làm điều đó — điều này sẽ giúp bạn thông báo cho người nhận rằng phiếu giảm giá đã hết hạn và họ không thể sử dụng nó nữa;
chèn liên kết URL sẽ đưa người nhận đến trang web của bạn hoặc đến một trang cụ thể trên trang web của bạn khi bạn mô tả chi tiết ưu đãi giá trị. Liên kết này cũng sẽ được áp dụng cho “Hình ảnh hẹn giờ đã hết hạn”;
chỉ định văn bản thay thế cho khả năng truy cập
Vui lòng tìm thêm ý tưởng và ví dụ đầy cảm hứng trong bài đăng trên blog của chúng tôi Cách thêm đồng hồ đếm ngược vào email của bạn
14. Thêm miếng đệm
Spacer, hay còn gọi là dải phân cách, không thúc đẩy chuyển đổi hoặc bất kỳ thứ gì khác. Đây chỉ là một yếu tố trang trí, làm cho email trông có cấu trúc và dẫn đến nhận thức tốt hơn và dễ dàng hơn về nội dung email
Cách đặt dấu cách trong email với Stripo
kéo cấu trúc 1 cột vào mẫu email HTML của bạn;
thả khối "Spacer";
nhấp đúp để kích hoạt bảng cài đặt;
đặt màu của nó;
để đặt “độ dày” của miếng đệm của bạn — bạn cần đặt “số” trong phần “Dòng” - tăng/giảm số;
bạn cũng cần phải chọn phong cách của dòng của bạn. Nó có thể là nét liền, nét đứt và chấm;
đặt chiều rộng - chiều rộng ở đây được đo bằng %, không phải bằng pixel
chỉ định căn chỉnh miếng đệm. Theo mặc định, căn giữa được đặt. Nếu bạn thích, vui lòng thay đổi nó trong phần “căn chỉnh”;
chuyển đổi nút "bộ đệm đáp ứng" để bộ đệm hiển thị chính xác trên thiết bị di động;
nếu cần, hãy đặt phần đệm
15. Chèn mạng xã hội
Biểu tượng mạng xã hội, hay còn gọi là biểu tượng mạng xã hội, có thể đặt ở mọi nơi. trong menu, ở chân trang hoặc đâu đó ở giữa email — bất cứ nơi nào bạn thấy phù hợp
Cách thêm biểu tượng mạng xã hội với Stripo
kéo khối cơ bản “Xã hội” trong mẫu của bạn;
nhấp đúp vào nó trong mẫu của bạn để kích hoạt bảng cài đặt;
theo mặc định, bạn sẽ thấy 4 biểu tượng. Nếu chúng không đủ, hãy nhấp vào nút “dấu cộng” để thêm các biểu tượng bổ sung vào email của bạn;
trong bảng cài đặt, bên cạnh biểu tượng mạng xã hội, hãy bật nút “thêm” để bắt đầu làm việc với mạng xã hội cụ thể này;
chèn các liên kết URL tương ứng;
nhập Tiêu đề và Văn bản thay thế;
đặt kiểu cho các biểu tượng này;
đặt kích thước của chúng;
và cuối cùng đặt phần đệm và thụt lề giữa các biểu tượng
Điều quan trọng cần lưu ý
Trong bài đăng này, chúng tôi trình bày cách đồng bộ hóa thông tin bạn đã chỉ định trong tài khoản cá nhân của mình với trình chỉnh sửa — sau khi bạn đặt đúng thông tin liên hệ trong tài khoản của mình, bạn sẽ chỉ cần kéo màu đen cơ bản “Xã hội” vào mẫu, Sau đó,
Trình duyệt của bạn không hỗ trợ thẻ video HTML5
16. Xây dựng chân trang email
Chân trang email thường chứa thông tin liên hệ, như địa chỉ trang web của bạn, lý do tại sao bạn liên hệ với người nhận, liên kết đến tài khoản mạng xã hội của bạn ẩn sau các biểu tượng mạng xã hội, liên kết hủy đăng ký và tên của người chịu trách nhiệm về bản tin . Cái sau là tùy chọn, nhưng tất cả các yếu tố trước nó là bắt buộc
Cách xây dựng chân trang email với Stripo
Đây là một yếu tố phức tạp của email. Để xây dựng một, bạn cần phải
kéo một cấu trúc với số lượng cột cần thiết;
nhập bản sao vào các cột/khối này;
chỉnh sửa bản sao;
chèn liên kết tương ứng vào tùy chọn hủy đăng ký;
thêm biểu tượng mạng xã hội
Lấy cảm hứng từ những ý tưởng cho một email hiệu quả trong bài đăng trên blog này
17. Màu nền và hình ảnh
Nền được áp dụng cho các vùng chứa/sọc riêng lẻ [còn gọi là hàng] giúp bạn thu hút sự chú ý của người nhận vào các yếu tố nhất định. Hình nền được áp dụng cho toàn bộ email làm cho thiết kế của bạn trông hoàn chỉnh và thống nhất
Trong ví dụ này, chúng ta sẽ áp dụng màu nền cho cấu trúc
Đặt màu nền cho cấu trúc
Tên thương hiệu của tôi trong logo được viết bằng màu trắng. Theo mặc định, tất cả các email đều có nền trong suốt, rất có thể người nhận của tôi sẽ không thể đọc được logo của tôi nói gì. Đó là lý do tại sao tôi cần đặt màu nền cho cấu trúc này
Cách đặt màu nền cho cấu trúc
nhấp vào bất kỳ phần tử nào trong cấu trúc này trong mẫu;
ở bên trái trong bảng cài đặt, nhấp vào nút “đến vùng chứa”;
nhấp vào nút “để cấu trúc”;
trong trường “màu nền của cấu trúc”, nhập hoặc chọn màu bạn thích
Trình duyệt của bạn không hỗ trợ thẻ video HTML5
Ghi chú. bạn làm tương tự để đặt màu nền cho toàn bộ email
Cách đặt hình nền cho toàn bộ email
Hình nền sẽ chỉ được hiển thị trên các thiết bị máy tính để bàn. Nó sẽ không được hiển thị trên điện thoại di động
trong tab Cài đặt chung, bật nút “Hình nền”;
thêm hình ảnh — trong phần “Thêm hình ảnh”, chúng tôi đã mô tả cách chèn/thêm/tải hình ảnh lên mẫu bằng Stripo;
thiết lập vị trí của nó;
nhấp vào nút “lặp lại” nếu bạn muốn hình ảnh của mình được áp dụng cho toàn bộ email bất kể thời lượng là bao lâu
Điều quan trọng cần lưu ý
Một số ứng dụng email, như Outlook, có thể không hiển thị hình nền. Do đó, chúng tôi khuyên bạn cũng nên đặt màu nền, tương tự như hình nền, cho toàn bộ email
18. Viết dòng tiêu đề
Khoảng một phần ba người nhận đánh giá xem có nên mở email hay không dựa trên dòng tiêu đề
Bạn có thể đặt một cái trong ESP của mình hoặc làm điều đó với Stripo
Cách viết dòng chủ đề cho email của bạn với Stripo
phía trên mẫu bạn đang làm việc, hãy nhấp vào biểu tượng “Cài đặt”;
trong menu thả xuống, hãy nhập dòng chủ đề và văn bản tiêu đề trước của bạn;
Trình duyệt của bạn không hỗ trợ thẻ video HTML5
19. Cài đặt để hiển thị email trên thiết bị di động
Có, trong tab Cài đặt chung, bạn đã đặt tùy chọn của mình. Tuy nhiên, chúng chỉ áp dụng cho máy tính để bàn. Bạn cũng cần chỉ định tùy chọn của mình cho điện thoại di động. Tại sao bạn?
Bởi vì, ví dụ, kích thước phông chữ của bạn là 14 px, nhưng nó có vẻ nhỏ đối với điện thoại di động, 16 px sẽ thích hợp hơn ở đây
Nhưng, giả sử, đối với khu vực thông tin/chân trang, 12px là đủ
Và điều quan trọng là phải cho phép "toàn chiều rộng" cho các nút trên điện thoại di động
Đừng để khách hàng của bạn bỏ lỡ các nút. ]
Cách đặt tùy chọn cho chế độ xem trên thiết bị di động
- Trong bảng cài đặt, nhấp vào tab “Giao diện”;
nhấp vào tab "chế độ xem trên thiết bị di động";
- đặt tùy chọn của bạn cho kích thước tiêu đề, cho kích thước văn bản trong các vùng nội dung khác nhau và kích thước văn bản trong các nút
20. Xây dựng email AMP
Vào tháng 3 năm 2019, Gmail đã triển khai AMP cho email. Giờ đây, email AMP được hỗ trợ rộng rãi bởi nhiều ứng dụng email nổi tiếng trên máy tính để bàn và thậm chí trên điện thoại di động bằng ứng dụng Gmail trên Android, iOS và qua Mail. ru
Trình duyệt của bạn không hỗ trợ thẻ video HTML5
Thông thường, xây dựng email AMP là một quá trình tốn nhiều thời gian. Nhưng Stripo cung cấp các khối AMP kéo và thả. Băng chuyền AMP và đàn accordion AMP
Cách tạo Stripo email AMP
- kéo một khối cần thiết vào mẫu của bạn;
- điền nó vào với nội dung của bạn
Quan trọng
Khối AMP không hoạt động trong mẫu của bạn. Để kiểm tra xem nó hoạt động như thế nào, bạn cần vào chế độ Xem trước
Nếu bạn muốn thêm bất kỳ phần tử AMP nào khác vào mẫu của mình, vui lòng tham khảo bài đăng trên blog này để tìm hiểu cách thực hiện với Stripo
21. Các yếu tố email tùy chọn
Để làm cho email của bạn hiệu quả hơn hoặc làm cho thiết kế của chúng sinh động hơn, bạn có thể thêm một số yếu tố sau
Các yếu tố tương tác trong email
Yếu tố tương tác là xu hướng của năm 2019. Chúng tăng gấp đôi chuyển đổi không chỉ để giải trí mà còn để cung cấp thông tin và chức năng
Trong bài đăng trên blog “6 ví dụ về nội dung tương tác trong email” của chúng tôi, chúng tôi đã chỉ ra một chút chi tiết về cách xây dựng và thêm tính tương tác trong email của bạn với Stripo
Trình duyệt của bạn không hỗ trợ thẻ video HTML5
Do các kỹ thuật tiên tiến, bạn có thể xây dựng với chúng tôi
Do trình chỉnh sửa mã HTML mở của chúng tôi và khối cơ bản HTML, bạn có thể nhúng bất kỳ loại phần tử tương tác nào mà bạn đã tạo bằng công cụ của bên thứ ba
Điều quan trọng cần đề cập
Xin lưu ý rằng một số yếu tố mà bạn xây dựng bằng công cụ của bên thứ ba có thể không phản hồi. Để kiểm tra điều này, bạn sẽ cần kiểm tra email của mình
Trình tạo chú thích quảng cáo Gmail
Tính năng này cho phép thông báo cho người nhận về kích thước của phiếu giảm giá, về thời gian bán hàng và thậm chí cho phép cung cấp cho người nhận hình ảnh xem trước mà không cần mở email của chúng tôi. Hoạt động trên thiết bị di động
Bạn có thể dễ dàng tạo mã chú thích bằng cách sử dụng Trình tạo chú thích quảng cáo của chúng tôi
Email hỗ trợ AMP
Email do AMP cung cấp sẽ cho phép người nhận của bạn thêm sản phẩm vào giỏ hàng, chọn và mua vé trực tuyến, v.v.
Google vừa phát hành AMP cho email, nhưng bạn đã có thể tạo email AMP với Stripo
22. Xem trước và kiểm tra email của bạn
Luôn xem trước và kiểm tra email của bạn trước khi gửi cho người nhận.
Cách xem trước email của bạn với Stripo
nhấp vào nút xem trước” phía trên mẫu để xem bản xem trước trên thiết bị di động và máy tính để bàn của email của bạn
Nếu bạn đã tạo email AMP, bạn cũng có thể xem trước email đó
Chỉ cần nhấp vào tab thích hợp
Nếu mã HTML AMP của bạn có lỗi, thậm chí như thiếu lỗi, trình xác thực mã AMP của chúng tôi sẽ cảnh báo bạn
Chỉ cần nhấp vào nút màu đỏ này để tìm ra lỗi chính xác mà mã của bạn gặp phải
Cách gửi email kiểm tra với Stripo
- nhấp vào nút "kiểm tra";
trong cửa sổ bật lên, nhập địa chỉ email của bạn và đồng nghiệp của bạn — phân tách chúng bằng dấu phẩy;
nhấp vào “gửi”
Trình duyệt của bạn không hỗ trợ thẻ video HTML5
Trong bài đăng trên blog này, chúng tôi đã trình bày chi tiết lý do và cách xem trước, kiểm tra và nhận liên kết có thể chia sẻ email của bạn với Stripo để nhận được sự chấp thuận của đồng nghiệp và khách hàng
Cách xem trước email của bạn trên tất cả các môi trường phổ biến
Giờ đây, bạn đã xem trước các phiên bản email dành cho thiết bị di động và máy tính để bàn, giờ đây bạn đã gửi một email kiểm tra cho chính mình để phát hiện và khắc phục tất cả các vấn đề nhỏ có thể xảy ra, bạn cũng nên xem email này chính xác cách mà những người đăng ký của bạn sẽ đảm bảo với bạn .
Do sự tích hợp của chúng tôi với Email on Acid, giờ đây bạn có thể xem trước email của mình trên hơn 90 kết hợp ứng dụng email và thiết bị phổ biến trực tiếp trong Stripo
Để xem trước email của bạn trong tất cả các môi trường này, vui lòng
- nhấp vào nút "kiểm tra" phía trên mẫu email HTML của bạn;
- trong menu thả xuống, nhấp vào "Chạy kiểm tra email";
- trong một cửa sổ mới, bạn sẽ thấy ảnh chụp màn hình email của mình trong tất cả các môi trường này
Xin lưu ý rằng bạn có thể chọn — chọn và bỏ chọn — ứng dụng email và thiết bị cho các thử nghiệm của mình
Stripo cũng cho phép bạn xem tất cả các bài kiểm tra trước đó
Để biết thêm thông tin về cách xem trước/kiểm tra email của bạn bằng công cụ kiểm tra email nhúng của chúng tôi, vui lòng tham khảo bài đăng trên blog của chúng tôi
22. Xuất email sang ESP của bạn
Ý tôi là sau khi email của bạn hoàn tất — đã được kiểm tra và đánh bóng, bạn có thể dễ dàng gửi nó đến ESP của mình
Stripo được tích hợp với khoảng 50 ESP và ứng dụng email Gmail và Outlook
Điều này có nghĩa là bạn có thể chuyển email của mình tới bất kỳ email nào chỉ bằng 1 cú nhấp chuột
Nếu các tùy chọn này vẫn chưa đủ, hãy tải xuống email của bạn dưới dạng tệp HTML và nhập vào ESP mà bạn hiện đang sử dụng
Và điều quan trọng nữa, Stripo cho phép bạn tải xuống email của mình dưới dạng tệp PDF
Cách xuất email của bạn từ Stripo
- nhấp vào nút “Xuất” phía trên mẫu;
trong menu thả xuống, nhấp vào tùy chọn phù hợp với bạn;
xong
Quan trọng
Khi xuất email sang ESP lần đầu tiên, bạn sẽ được yêu cầu nhập thông tin đăng nhập và mật khẩu vào tài khoản của mình với ESP này
Chúng tôi làm điều đó để cung cấp đồng bộ hóa tài khoản của ESP mà bạn sử dụng với tài khoản của mình với Stripo. Tuy nhiên, chúng tôi không lưu trữ, cũng như không thể xem mật khẩu của bạn với các hệ thống đó
Mẹo nhỏ giúp giảm đáng kể thời gian tạo email khi làm việc với Stripo
Có rất nhiều trong số họ, ở đây tôi chỉ muốn đề cập đến một vài trong số họ
nút hoàn tác
Nút đơn giản này giúp bạn hủy bỏ một/một vài thao tác trước đó
Nó ngăn chúng tôi xây dựng lại phần tử email từ đầu
lập phiên bản
Nó cho phép xem ai và khi nào thực hiện các thay đổi đối với email của chúng tôi. Và điều quan trọng hơn — cho phép khôi phục mọi phiên bản email của bạn
Nó ngăn chúng tôi xây dựng email từ đầu [trong trường hợp chúng tôi không thích những thay đổi cuối cùng được thực hiện đối với email]
Khi bạn nhấp vào nút "ma thuật" này, bạn sẽ thấy tất cả các phiên bản của email, tất cả ngày và tên của những người đã thực hiện thay đổi
Sao chép và di chuyển các phần tử
Đây là một cách rất thuận tiện và nhanh chóng để sử dụng các yếu tố tương tự trong email
Chẳng hạn, bạn đã thiết kế một khoảng cách hoàn toàn phù hợp với email của mình và bạn muốn sử dụng nó trên email này. Không cần phải xây dựng lại nhiều lần. Bạn chỉ cần nhấp vào biểu tượng sao chép trong “Bảng điều khiển”
sau đó bạn “di chuyển” phần tử đã sao chép. Đây chính là nó
Trình duyệt của bạn không hỗ trợ thẻ video HTML5
Lưu trữ mô-đun
Bạn có thể lưu vào thư viện cá nhân của mình tất cả các loại nội dung để sử dụng thêm — phần tử, khối, vùng chứa, mô-đun và sọc
Để lưu một cái, bạn chỉ cần kích hoạt phần tử này, sau đó nhấp vào nút “lưu” trong “Bảng điều khiển”. Hệ thống sẽ yêu cầu bạn đặt tên cho thành phần này trong bảng cài đặt để dễ tìm kiếm
Bằng cách lưu các mô-đun theo cách này, bạn có thể tạo toàn bộ email chỉ bằng cách kéo các mô-đun vào mẫu của mình
Trình duyệt của bạn không hỗ trợ thẻ video HTML5
Chúng tôi khuyên bạn nên lưu trữ và sử dụng lại các yếu tố sau. đầu trang, chân trang, thông tin liên hệ và vùng chứa có các phần tử thông minh. Cái trước sẽ không thay đổi, cái sau sẽ yêu cầu bạn chèn một liên kết mới