Tạo email html miễn phí

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

1. Chỉnh sửa một trong 5500 mẫu email đã chuẩn bị

2. Mã hóa của riêng bạn

3. 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