Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > HTML/CSS > Hướng dẫn xây dựng mẫu HTML cho email
Hướng dẫn xây dựng mẫu HTML cho email
Nguyễn Trung Hiếu
Share Code Web Company 2013

Hướng dẫn xây dựng mẫu HTML cho email

Chào các bạn, ngày nay thì việc marketing cho email dần trở lên quan trọng hơn đối với những người làm marketer online, và nhờ vào quảng cáo trên email, các bạn cũng có thể tìm kiếm được nhiều khách hàng tiềm năng. Thế nhưng thiết kế một email như thế nào cho chuyên nghiệp, gây sức hút của người dùng thì lại là một vấn đề “hơi khó”. Và vấn đề đó sẽ được mình giới thiệu với các bạn trong bài học ngày hôm nay.

Demo mẫu email bằng HTML

Đây là sản phẩm sau khi các bạn học xong bài này 😀
build HTML email template
Bắt tay vào học nào

Nguyên liệu cần có trong bài học

Và bạn bắt đầu một email HTML bằng doctype sau

Thiết kế khung chính

Cũng giống như thiết kế web, bạn thiết kế khung chứa nội dung bằng HTMl dưới dạng bảng trong thẻ body như sau

email design
Thiết kế cấu trúc của email. Theo như demo, chúng ta sẽ có 3 hàng, tương ứng với 3 row, chúng ta thêm mắm thêm muối như sau

insert row to table of email HTML template
Thêm thuộc tính mầu vào từng row cho đẹp và dễ nhìn.

background for row table
Chúng ta chèn cái ảnh làm header cho email mà bên trên các bạn đã download, các bạn cũng có thể sử dụng các bức ảnh được thiết kế bởi chính mình sao cho nó chuyên nghiệp và đẹp mắt là OK

image for header's table

Thiết kế nội dung

Ở row 2, chúng ta tiếp tục tạo bảng với 3 row nữa

more row in table
Ở row thứ 3 chúng ta chia làm 2 cột, và fill nội dung theo ý muốn vào bên trong

fill content in row's table
Vậy là cũng hòm hòm rồi đấy!

Phần footer

Phần này chúng ta thêm một table với 2 cột. Mỗi cột có code như sau

Cột phải

Cột trái

footer
Vậy là cơ bản chúng ta đã thiết kế xong một mẫu HTML cho email rồi, giờ chỉ là việc style cho nó đỡ “lởm” hơn mà thôi, ví dụ như tô đậm một số điểm nhấn, bỏ viền của table đi, đổi màu chữ….

Download code

Gợi ý - Liên hệ thiết kế web

Nếu bạn có nhu cầu thiết kế web, hay tùy chình lại theme này theo ý muốn của bạn, bạn có thể liên hệ ngay với tôi, tôi sẽ giúp bạn thực hiện những điều bạn muốn trong thời gian ngắn nhất, và giá cả rẻ nhất

Click ngay!!


Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}