Trình chèn html cho gmail
|
Hôm nay, tôi sẽ chỉ cho bạn cách tạo “email HTML” và gửi chúng trong Gmail. Lợi ích của việc này là bạn có thể thiết kế các chiến dịch email, sau đó chỉnh sửa và gửi chúng trực tiếp trong Gmail, dưới dạng một chiến dịch hoặc chỉ như một phần của thư điện tử thông thường Show
Và khi bạn đã hoàn thành việc đó, bạn có thể lưu email HTML của mình làm mẫu để sử dụng lại Tại sao nhập HTML vào Gmail "không hoạt động"Nếu bạn lấy mã HTML và dán mã “thô” vào cửa sổ soạn thư của Gmail, nó sẽ không hiển thị bất kỳ thứ gì khác — nó sẽ chỉ xuất hiện dưới dạng mã HTML. Vì vậy, bản thân HTML sẽ không giúp bạn định dạng hình dạng hoặc giao diện của email Vì vậy, tôi sẽ chỉ cho bạn cách giải quyết vấn đề đó Cách gửi email HTML bằng GmailCó ba cách bạn có thể tải cửa sổ Soạn thư Gmail bằng HTML tùy chỉnh của mình
Kỹ thuật yêu thích của tôi là #2 vì nó mang lại cho tôi nhiều quyền kiểm soát nhất và không yêu cầu tiện ích mở rộng. Mọi tiện ích mở rộng bạn thêm vào Gmail sẽ làm giao diện chật chội hơn một chút lựa chọn 1. Sao chép/dán HTML đã kết xuất vào Cửa sổ Soạn thư của GmailCửa sổ Gmail Compose không cho phép bạn chỉnh sửa HTML “đằng sau” thư. Điều này trái ngược với nhà cung cấp dịch vụ email như Mailchimp hoặc Constant Contact, trong đó bạn có thể chỉnh sửa HTML thô. Vì vậy, kỹ thuật dưới đây là một cách để khắc phục giới hạn Gmail đó. Khi bạn đã viết HTML của mình, quy trình về cơ bản chỉ là sao chép và dán. Bạn tạo trang của mình bằng HTML, tải nó vào trình duyệt, sao chép nội dung của trình duyệt rồi dán vào cửa sổ soạn thư của Gmail. Theo HTML “kết xuất”, ý tôi là HTML trông như thế nào trong trình duyệt, với màu sắc, phông chữ và hình ảnh tại chỗ Hãy chạy qua một ví dụ nhanh về điều đó Tạo và gửi email HTML của bạn trong GmailBước 1. Viết HTML của bạnĐối với ví dụ này, tôi đang sử dụng một số HTML soạn sẵn được điều chỉnh cho mục đích của chúng tôi. HTML có thể được viết trực tiếp hoặc có thể được soạn bằng công cụ soạn thảo HTML. Gmail hơi kén chọn những gì nó sẽ cho phép dưới dạng HTML trong email, vì vậy đây là một vài nguyên tắc quan trọng ) as well as embedded CSS in the head. For more details about exactly what you can and should use in Gmail, see this page. Note: Gmail changed their support for CSS in 2016, so older posts online may claim they don’t support things they actually do. The post I linked to is up to date with that change. | – Một số thẻ HTML có thể không được hỗ trợ. Danh sách này (có thể không hoàn toàn hiện tại) hiển thị các thẻ HTML được hỗ trợ và một số thẻ không được hỗ trợ – Gmail không hỗ trợ phông chữ web. Vì vậy, hãy sử dụng các phông chữ tiêu chuẩn mà họ cung cấp hoặc nếu bạn muốn một phông chữ khác cho thứ gì đó như logo, hãy tạo một hình ảnh của văn bản đó. Sau đó, trong HTML, liên kết đến hình ảnh đó được lưu trữ trực tuyến, đó là điều tôi đã làm cho biểu trưng “Sách của Binkman” trong email mẫu của tôi bên dưới – Tất cả hình ảnh phải được lưu trữ trực tuyến ở đâu đó — chúng không thể được đưa vào email. Bạn có thể lưu trữ hình ảnh trên Imgur, Amazon Web Services, Google Docs (nếu bạn có thể nhận được liên kết trực tiếp tới hình ảnh) hoặc bất kỳ nơi nào khác dành cho việc lưu trữ hình ảnh – Sử dụng bảng để tổ chức hiển thị nội dung là cách được khuyến nghị cho email HTML. Tuy nhiên, ngay cả khi sử dụng bảng, vẫn có những vấn đề cần chú ý – Google Tài liệu để soạn thảo có thể có vấn đề. Mặc dù có các hướng dẫn về cách sử dụng Google Docs để tạo email HTML mà không cần viết mã, nhưng khi dùng thử, tôi thấy rằng những gì hiển thị trên Google Docs không chính xác như những gì xuất hiện trong email (e. g. , nội dung nào đó được căn giữa trong Google Tài liệu đã được căn trái trong email) – Giữ cho nó đơn giản. Bởi vì những gì Gmail sẽ hỗ trợ hơi khó đoán, nên tốt nhất là giữ mọi thứ khá đơn giản về mặt HTML. (Đó cũng có thể là một ý tưởng hay từ quan điểm của người nhận. Không ai cần một email quá phức tạp. ) Giữ mọi thứ đơn giản cũng giúp ứng dụng email của người nhận hiển thị mọi thứ như bạn dự định, đặc biệt khi nói đến thiết kế email đáp ứng – Tạo mẫu. Khi bạn đã định dạng tệp HTML của mình, hãy lưu tệp dưới dạng mẫu bên ngoài Gmail. Sau đó, trong tương lai, bạn có thể sử dụng mẫu đó để thiết lập email mới chỉ bằng cách thay thế một vài từ mà không phải tạo lại mã HTML để định cấu hình bố cục, vị trí logo, v.v. – Hãy nhớ rằng, Gmail là một sản phẩm đang trong quá trình hoàn thiện. Gmail liên tục thay đổi, vì vậy các bài đăng trên blog hoặc câu trả lời trực tuyến từ vài năm trước đã lỗi thời. Nếu bạn đang nghiên cứu cách làm bất cứ điều gì với HTML và Gmail, hãy cố gắng tìm nội dung được viết gần đây nhất có thể  Bước 2. Hiển thị trang HTML được hiển thị trong trình duyệtTôi đã sử dụng Chrome và vừa mở (Ctrl-O). tệp html trên máy tính của tôi Bước 3. Mở cửa sổ Gmail Compose và dán nó vào vùng văn bản chínhEmail HTML sẽ xuất hiện trong cửa sổ soạn thư. Kiểm tra kỹ (bao gồm cuộn xuống dưới cùng) xem mọi thứ có phù hợp không trước khi bạn gửi email Bước 4. Gửi kết hợp thư của bạn với GMass. Như thường lệ, chỉ cần nhấn nút GMass màu đỏ.Đó là nó. Điểm hay của phương pháp này là khi bạn lưu tệp HTML dưới dạng mẫu, các email HTML trong tương lai của bạn sẽ có giao diện nhất quán và tạo “diện mạo thương hiệu” trong email của bạn. Nó cũng giúp bạn tiết kiệm rất nhiều thời gian để tạo email HTML mới và bạn không phải tạo bất kỳ tệp CSS bên ngoài nào Tất nhiên, kỹ thuật này có thể được kết hợp với bất kỳ cách nào khác để sử dụng GMass, chẳng hạn như từ bảng tính Google Tài liệu hoặc thậm chí là một phần của chuỗi email tự động
Lựa chọn 2. Dán mã HTML vào Gmail bằng Công cụ dành cho nhà phát triển của ChromeKỹ thuật này là hack Gmail và Chrome. Bạn nhấp chuột phải vào cửa sổ Soạn thư Gmail, tìm phần HTML có liên quan của thành phần hộp, sau đó dán mã HTML của bạn vào Đầu tiên, nhấp chuột phải vào bất kỳ đâu trong hộp Soạn thư và chọn Kiểm tra Sau đó, Chrome sẽ tự phân tách và mở ra một ngăn hiển thị HTML của hộp Soạn thư và một phần sẽ được đánh dấu
Tìm “div” được đánh dấu là “contenteditable=true”, sau đó nhấp chuột phải và chọn Chỉnh sửa dưới dạng HTML Phần bên trong thẻ “div” là phần bạn nên thay thế bằng mã HTML tùy chỉnh của mình Ở đây tôi có mã HTML tùy chỉnh của mình trong trình soạn thảo văn bản Sublime Nhưng đây cũng là dành cho bạn, trong trường hợp bạn muốn tự mình thử sao chép/dán cái này <h1>This is my headline</h1> <p>This is my first paragraph.</p> <p style="font-weight: bold;">Here is some bold text.</p> <p>Here is an image of a sun:</p> <br> <img src="https://image.shutterstock.com/image-vector/sad-sun-exhausted-heat-vector-260nw-200226281.jpg"> Cuối cùng, đây là mã của tôi được dán vào và ngay sau khi tôi nhấp chuột đi, cửa sổ Soạn thảo sẽ chứa đầy phiên bản HTML đã kết xuất Tùy chọn 3. Sử dụng tiện ích mở rộng của Chrome để gửi Email HTML trong GmailCó một số tiện ích mở rộng của Chrome bổ sung trình chỉnh sửa HTML mượt mà vào cửa sổ Soạn thư của Gmail để bạn có thể chỉnh sửa HTML đằng sau hậu trường theo cách dễ sử dụng. Trong Tùy chọn 2, bạn cũng đang chỉnh sửa HTML đằng sau hậu trường — nhưng thực hiện trực tiếp bằng cách hack mã đằng sau trang HTML. Tiện ích mở rộng của Chrome cho phép bạn làm điều tương tự nhưng làm cho toàn bộ quy trình mã HTML trở nên dễ dàng hơn Tiện ích mở rộng của Chrome 1. Trình chỉnh sửa HTML miễn phí cho Gmail của cloudHQ Đây là trình soạn thảo HTML mạnh mẽ nhất vì nó cũng bao gồm các công cụ thiết kế WYSIWIG. Một điều khó chịu đi kèm với tiện ích mở rộng này là nó yêu cầu bạn phải tạo một tài khoản với chúng. Họ không yêu cầu quyền truy cập OAuth vào tài khoản Gmail của bạn, nhưng họ yêu cầu đặc quyền Đăng nhập bằng Google. Điều đó vốn dĩ không khiến dữ liệu tài khoản của bạn gặp rủi ro, nhưng điều đó thật khó chịu vì chức năng này có thể được thực hiện ở phía máy khách Nhấp vào biểu tượng của tiện ích mở rộng ở cuối cửa sổ Soạn thư Công cụ thiết kế email của họ trông như thế này Công cụ thiết kế chiếm cửa sổ Soạn thảo cho đến khi bạn nhấp vào “Đóng Trình chỉnh sửa. ” Bạn cũng có thể xem video của họ để xem tiện ích mở rộng của họ đang hoạt động Tiện ích mở rộng của Chrome 2. GMass Tiện ích mở rộng Chrome của riêng tôi bao gồm chức năng “HTML” để bạn có thể xem và đặt HTML vào cửa sổ Soạn thư Khởi chạy hộp Cài đặt và nhấp vào “HTML. ” Dán vào HTML của bạn Nhấn OK và xem điều kỳ diệu xảy ra Lưu ý rằng để chỉ sử dụng chức năng soạn thảo HTML của GMass, bạn không cần đăng ký gói trả phí Tiện ích mở rộng của Chrome 3. Trình chèn HTML cho Gmail Đây là một tiện ích mở rộng tiện lợi và là một trong những tiện ích yêu thích của tôi vì nó không yêu cầu bất kỳ quyền truy cập OAuth nào vào tài khoản Gmail của tôi. Nó hoạt động hoàn toàn ở phía máy khách mà không gửi bất kỳ thông tin nào trở lại máy chủ Bạn có thể sử dụng nó trong 3 bước đơn giản
Vì vậy, như bạn có thể thấy, bạn có thể tạo các mẫu cơ bản cho email hàng loạt mà không cần học cách sử dụng công cụ dành cho nhà phát triển hoặc thuê một nhà thiết kế mẫu email. Bạn thậm chí không cần biết cách viết mã từ đầu nếu bạn có thể sao chép và dán phiên bản HTML của một email hiện có |
