Làm cách nào để tạo email html tùy chỉnh?
|
Nếu bạn chưa quen với việc phát triển email, công việc tùy chỉnh mẫu có vẻ quá sức. Nhưng đừng lo lắng. Chúng tôi đã viết blog này để hướng dẫn bạn cách thực hiện các thay đổi về mỹ phẩm và văn bản cho một mẫu Show
Những kỹ thuật này có thể được sử dụng với bất kỳ mẫu miễn phí nào mà chúng tôi cung cấp trong Trung tâm tài nguyên của chúng tôi. Với mục đích của blog này, chúng tôi sẽ tùy chỉnh mẫu Coffee Shop. Chúng tôi sẽ thay đổi mẫu từ chủ đề quán cà phê thành mẫu quảng cáo nhà hàng sushi. Nhấp vào hình ảnh bên dưới để xem toàn bộ email trông như thế nào, trước và sau
Bước 1. Mở tệp HTMLBạn sẽ cần một trình soạn thảo văn bản để làm việc. Không sử dụng Word cho việc này. Bạn có thể sử dụng Notepad (hoặc TextEdit trên Mac) cho mục đích này. Tôi thực sự thích Notepad++, miễn phí và có nhiều tính năng tuyệt vời Bạn cũng có thể sử dụng Trình chỉnh sửa email hoàn toàn mới của chúng tôi để thực hiện toàn bộ hướng dẫn này. Chỉ cần chọn “Chọn mẫu” và chọn mẫu Quán cà phê từ danh sách. Trình chỉnh sửa sẽ hiển thị cho bạn bản xem trước trực tiếp mã của bạn và cũng cho phép kiểm tra ngay lập tức
Bước 2. Cắt các phần không mong muốnĐiều đầu tiên bạn muốn làm là xác định bất kỳ phần không mong muốn nào có trong mẫu bạn đang sử dụng. Trong mẫu này, mỗi phần được tích hợp vào một bảng duy nhất, vì vậy chúng tôi sẽ muốn xóa toàn bộ bảng để loại bỏ phần đó Mỗi mẫu được mã hóa khác nhau, vì vậy bạn sẽ phải đánh giá chính xác những gì cần xóa trong từng trường hợp. Bạn có thể cần xóa một hàng, ô trong bảng hoặc toàn bộ bảng để loại bỏ các phần không mong muốn. Sử dụng nhận xét để hướng dẫn bạn khi bạn cố gắng tìm phần đầu và phần cuối của một phần không mong muốn. Trong trường hợp này, mẫu Coffee Shop được nhận xét tốt giúp dễ dàng xác định phần đầu và phần cuối của mỗi khối nội dung Nhận xét HTML trông như thế này
Đối với ví dụ này, chúng tôi sẽ cắt khối nội dung 3 cột (xuất hiện ngay phía trên chân trang), cũng như dải phân cách đứng trước nó |
Hãy tiếp tục và cắt hai phần đó. Hãy chắc chắn rằng bạn cũng cắt bỏ các bình luận, vì chúng sẽ không cần thiết
Bước 3. Thay đổi hình ảnh
Bây giờ chúng ta sẽ thay thế các hình ảnh bằng hình ảnh cho nhà hàng sushi của chúng ta. Hãy bắt đầu với logo. Bạn có thể tìm thấy hình ảnh logo trong mã bằng cách sử dụng Ctrl+F và tìm kiếm “Logo. ”
Thẻ hình ảnh sẽ trông như thế này
![Làm cách nào để tạo email html tùy chỉnh?]()
Thuộc tính “src” là thứ kiểm soát hình ảnh được hiển thị. Sau khi lưu trữ hình ảnh của bạn, bạn sẽ muốn sử dụng đường dẫn tuyệt đối hoặc URL để hiển thị hình ảnh trong email của mình
Miễn là logo mới của bạn có cùng kích thước, tất cả những gì bạn phải thay đổi là thuộc tính src của hình ảnh. Bạn có thể sử dụng biểu trưng có các kích thước khác nhau, chỉ cần đảm bảo thay đổi kiểu chiều rộng nội tuyến. Logo mới của chúng tôi sẽ trông như thế này
![Làm cách nào để tạo email html tùy chỉnh?]()
Bạn sẽ muốn thay đổi thuộc tính src cho phần còn lại của hình ảnh trong mẫu. Chỉ cần đảm bảo rằng mỗi hình ảnh được lưu ở cùng kích thước với bản gốc
Bạn cũng có thể sử dụng hình ảnh được lưu theo cùng tỷ lệ (hình ảnh 400×200 ở vị trí 200×100) miễn là bạn đặt chiều cao và chiều rộng mà bạn muốn nó hiển thị bằng cách sử dụng các thuộc tính HTML. Điều này sẽ cho phép bạn sử dụng hình ảnh võng mạc cho thiết bị iOS. Ví dụ dưới đây hiển thị mã bạn cần để đặt hình ảnh hiển thị ở chiều rộng 200px, mặc dù được lưu ở chiều rộng 400px
![Làm cách nào để tạo email html tùy chỉnh?]()
Bước 4. Tùy chỉnh màu sắc
Bây giờ hình ảnh đã được thay thế, đã đến lúc sửa màu. Tông màu đất được sử dụng cho email quán cà phê của chúng tôi trông không đẹp lắm với tất cả những hình ảnh sushi tươi sáng này
Chúng tôi sẽ bắt đầu bằng cách thay đổi màu nền của email. Màu nền trong email được đặt chủ yếu bằng kiểu màu nền và thuộc tính bgcolor. Để thực hiện thay đổi này, hãy tìm thẻ nội dung của email. Thẻ body theo sau thẻ đóng. Bạn có thể thấy màu nền được đặt thành #4d3e39. Màu nền đôi khi được đặt ở nhiều nơi, thường là để hiển thị nhất quán trên tất cả các ứng dụng email. Trong trường hợp này, màu được đặt ở ba vị trí (ở cuối mỗi dòng)
Hãy thay đổi cả ba thứ đó thành một thứ tốt đẹp, phong phú #9e3212
Bây giờ chúng ta sẽ chỉnh sửa màu nền của cột nội dung chính của email. Tìm kiếm nhận xét "bắt đầu nội dung chính" trong mã. Đây là bảng chứa hầu hết nội dung của email và giới hạn nó ở một cột trung tâm. Như bạn có thể thấy, màu này được đặt thành #ded6bf
Hãy thay đổi điều này thành thứ gì đó phù hợp hơn với bảng màu mới của chúng ta, chẳng hạn như #EBF1E5
________số 8
Sử dụng Ctrl+H để thay thế tất cả các phiên bản của #ded6bf bằng #EBF1E5
Bây giờ chúng tôi sẽ muốn chỉnh sửa màu văn bản, cụ thể là các tiêu đề. Màu văn bản được đặt bằng cách sử dụng kiểu màu. Hiện tại, các tiêu đề là #222. Hãy thay đổi chúng để phù hợp với màu sushi mới của chúng ta. Màu cam như #fe7c24 sẽ rất nổi bật. Tìm từng tiêu đề trong email và chỉnh sửa kiểu màu như sau
Discover our distinctive blends
Cuối cùng, hãy thay đổi màu nút. Chúng tôi đã sử dụng #db7447, nhưng hãy làm sáng nó lên tới #fe7c24 để phù hợp với các tiêu đề của chúng tôi. Màu nút ở đây được đặt thành bgcolor, màu nền và màu đường viền
...more code here...
...more code here...
0
Bước 5. Thay đổi phông chữ
Ngăn xếp phông chữ (hoặc kiểu họ phông chữ) xác định văn bản phông chữ nào sẽ nằm trong đó, cũng như một số phông chữ dự phòng có thể chấp nhận được cho những khách hàng không có phông chữ ưa thích của bạn. Cách dễ nhất để chỉnh sửa ngăn xếp phông chữ là tìm một ví dụ về nó trong email, sau đó sử dụng Ctrl+H để thay thế mọi phiên bản của nó. Trong mẫu Coffee Shop, ngăn xếp phông chữ tiêu đề trông như thế này
...more code here...
...more code here...
1
Tìm kiếm chuỗi này trong email bằng cách sử dụng Ctrl+H, sau đó thay thế bằng
...more code here...
...more code here...
Chúng tôi sẽ không thay đổi phông chữ đoạn văn cho hướng dẫn này vì phông chữ này đã hoạt động tốt với mẫu
Bước 6. Chỉnh sửa văn bản
Đây là một bước khá dễ dàng. Bạn sẽ muốn xác định các khối văn bản trong mã email và tắt văn bản có nội dung bạn muốn. Tất cả các văn bản còn lại phải ở trong đoạn văn hoặc thẻ neo (liên kết). Chúng tôi sẽ muốn chỉnh sửa mọi khối văn bản trong mẫu, nhưng tôi sẽ chỉ sử dụng khối đầu tiên làm ví dụ
Trong bài viết 1, bạn sẽ tìm thấy dòng tiêu đề “Khám phá các hỗn hợp đặc biệt của chúng tôi”. Nó trông như thế này trong mã
...more code here...
...more code here...
Hãy thay đổi điều đó để đọc, “Hãy thử cuộn sushi khổng lồ mới của chúng tôi. ”
...more code here...
...more code here...
Bạn cũng có thể muốn thêm văn bản tiêu đề trước. Hãy tìm bình luận “PREHEADER TEXT HERE”. Mã sẽ trông như thế này
...more code here...
...more code here...
Hãy thay đổi điều đó thành "$ 2 Rolls - Sushi Happy Hour 4-6pm Hàng ngày". Đừng quên xóa các thẻ bình luận. Nếu văn bản được nhận xét, nó sẽ không xuất hiện dưới dạng tiêu đề trước
...more code here...
...more code here...
Bước 7. Thay đổi điểm đến liên kết
Cuối cùng, hãy xem xét việc thay đổi href của liên kết neo. Href kiểm soát URL của trang mà liên kết trỏ đến. Chúng tôi sẽ sử dụng một nút làm ví dụ
...more code here...
...more code here...
Phần được liên kết của nút này là thẻ “a” hoặc thẻ neo
...more code here...
...more code here...
Chúng tôi sẽ chỉnh sửa href để trỏ trang này đến một trang mới
...more code here...
...more code here...
Bây giờ liên kết trỏ đến nhà hàng, giúp thúc đẩy lưu lượng truy cập ở đó
Phần kết luận
Bây giờ chúng tôi có một mẫu phù hợp với màu sắc và phông chữ thương hiệu của một công ty khác. Bằng cách tránh thay đổi cấu trúc của mẫu càng nhiều càng tốt, mẫu vẫn sẽ hiển thị một cách đáng tin cậy
Tuy nhiên, bất cứ khi nào bạn thực hiện các thay đổi đối với mẫu, tốt nhất bạn nên kiểm tra. Không có một cách nhanh chóng và đáng tin cậy để làm điều đó? . Thông qua nền tảng của chúng tôi, bạn có thể kiểm tra mẫu của mình trong nhiều loại ứng dụng email và thiết bị di động trong vài giây
Làm được nhiều việc hơn trong thời gian ít hơn với Email trên Acid
Ngừng chuyển đổi qua lại giữa các nền tảng trong quá trình triển khai trước và QA. Với Email on Acid, bạn có thể tìm và khắc phục tất cả sự cố ở một nơi. Kiểm tra kỹ mọi thứ từ nội dung đến khả năng truy cập và khả năng cung cấp. Ngoài ra, với Xem trước email chính xác trên các ứng dụng khách và thiết bị phổ biến nhất, bạn có thể tự tin cung cấp email hoàn hảo mọi lúc
Bắt đầu miễn phí
Tác giả. Email về nhóm axit
Nhóm nội dung Email on Acid được tạo thành từ các nhà tiếp thị kỹ thuật số, người tạo nội dung và những người chuyên sâu về email.
Kết nối với chúng tôi trên LinkedIn, theo dõi chúng tôi trên Facebook và tweet tại @EmailonAcid trên Twitter để biết thêm nội dung thú vị và các hội nghị tuyệt vời về tiếp thị qua email.
Tác giả. Email về nhóm axit
Nhóm nội dung Email on Acid được tạo thành từ các nhà tiếp thị kỹ thuật số, người tạo nội dung và những người chuyên sâu về email.
Kết nối với chúng tôi trên LinkedIn, theo dõi chúng tôi trên Facebook và tweet tại @EmailonAcid trên Twitter để biết thêm nội dung thú vị và các hội nghị tuyệt vời về tiếp thị qua email.
2 suy nghĩ về "Cách tùy chỉnh mẫu email HTML trong 7 bước"
Dennis Brown nói.
Hướng dẫn tuyệt vời, Geoff – thực sự hữu ích;
Email HTML tùy chỉnh là gì?
Mẫu email HTML được mã hóa tùy chỉnh cho phép bạn tạo trải nghiệm được chia sẻ, tinh tế, có chủ đích giữa email và các kênh khác của bạn , giúp xây dựng .Cách tốt nhất để tạo email từ nội dung HTML hiện có là gì?
Dán HTML. Sử dụng mã HTML hiện có để tạo email của bạn. .Nhấp vào +TạoNhấp vào Tin nhắn EmailChọn MẫuChọn tab Đã lưuChọn một mẫu và nhấp vào Chọn. .Xác định các thuộc tính của email
