Tạo chữ ký tùy chỉnh là một trong những chi tiết có thể thêm tính chuyên nghiệp cho email của bạn và củng cố thương hiệu của bạn
Tạo chữ ký tùy chỉnh là một trong những chi tiết có thể thêm tính chuyên nghiệp cho email của bạn và củng cố thương hiệu của bạn. Tuy nhiên, có những phức tạp có thể phát sinh khi cố gắng tạo chữ ký do sự phức tạp của ứng dụng email. Một số HTML xảo quyệt có thể giúp giải quyết những sự cố này và tạo chữ ký email chức năng
Một trong những điều đầu tiên cần cân nhắc khi mã hóa chữ ký email HTML là bạn cần sử dụng bảng thay vì đánh dấu HTML thông thường. Lý do chính là Outlook 2007/2010/2013 sử dụng Microsoft Word để hiển thị email và theo đó, không hỗ trợ CSS phức tạp hơn
Giống như bất kỳ tệp HTML nào khác, bạn cần mở và đóng thẻ html, thẻ head và body. Ngoài ra, bạn sẽ cần một thẻ bảng chứa nội dung của email. Nói chung, bạn nên thêm chiều rộng cố định vào bảng để hạn chế chữ ký và tạo thiết kế nhất quán trên tất cả các ứng dụng email. Trong ví dụ này, chúng tôi đang sử dụng chiều rộng là 500px
Ghi chú. Sau thẻ bảng phải có thẻ tbody theo sau là thẻ tr [hàng] và td [ô]
Bạn có thể muốn bao gồm một yếu tố đồ họa chẳng hạn như logo của công ty bạn trong chữ ký. Để thực hiện việc này, hãy thêm thẻ tr có td bên trong thẻ. Td này sẽ bọc hình ảnh. Giống như trình bao bọc bảng ban đầu, td này phải có chiều rộng và chiều cao cố định theo kích thước của hình ảnh. Bên cạnh đó, hình ảnh cần được lưu trữ trên máy chủ và thẻ img phải sử dụng một đường dẫn tuyệt đối
Bây giờ là lúc để thêm thông tin của cá nhân. Cần có một hàng và ô khác cho phần tử mới này. Trên ô, thêm kiểu bạn muốn sử dụng cho văn bản và đặt chiều cao để quản lý khoảng cách giữa logo và đoạn văn sau. Trong trường hợp này, "họ phông chữ. Helvetica, Arial, sans-serif, cỡ chữ. 18px và kiểu phông chữ. bold" là CSS chính sẽ kiểm soát nội dung văn bản
Ô sẽ hoạt động như một thẻ đoạn văn, vì vậy bạn chỉ cần thêm thông tin văn bản cần thiết. Trong ví dụ này, thông tin này bao gồm tên của một nhân viên và vị trí của anh ấy trong công ty. Nếu bạn muốn có một kiểu khác cho trường vị trí, hãy thêm một thẻ em với kiểu nội tuyến sẽ chỉ áp dụng cho phần tử đó
Bạn có thể lặp lại các bước tương tự với địa chỉ, số điện thoại hoặc bất kỳ thông tin nào khác mà bạn muốn thêm. Thông tin email, liên kết trang web và liên kết truyền thông xã hội đã được đưa vào ví dụ này
Trên các liên kết, màu di chuột có thể được kiểm soát bằng cách sử dụng các sự kiện "onMouseOver" và "onMouseOut"
Tất cả cùng nhau, HTML của bạn sẽ trông giống như mã hoàn chỉnh bên dưới
Chữ ký email khá dễ dàng và có thể được sử dụng tương tự với nhiều cá nhân trong một tổ chức. Với một chút luyện tập, bạn sẽ thành thạo chữ ký email HTML và tạo thành phần thương hiệu độc đáo cho công ty của mình
Tạo kiểu email có thể cực kỳ khó chịu và khó khăn. Tìm hiểu cách nó hoạt động bằng cách xây dựng chữ ký EMail HTML + CSS của riêng bạn
5 Tháng Mười
#Xây dựng chữ ký email tùy chỉnh của bạn bằng HTML và CSS
Mệt mỏi vì gõ tên của bạn ở cuối mỗi email bạn gửi?
Trong bài viết này, bạn sẽ tìm hiểu cách xây dựng chữ ký email của riêng mình bằng HTML và CSS, đồng thời tạo kiểu chữ ký theo cách riêng của bạn
Đây là sản phẩm cuối cùng mà bạn có thể xây dựng, có các biểu tượng mạng xã hội, số điện thoại, email và trang web có thể nhấp vào và chuyển hướng mọi người đến các liên kết
Trong bài viết này, tôi sẽ chia sẻ với bạn quá trình tạo, từng bước một
Mục lục
Lấy các biểu tượng
Tạo kiểu cho các biểu tượng
Lưu trữ các biểu tượng
Viết mã HTML và CSS
Thêm chữ ký vào nhà cung cấp email
Bạn có thể làm tương tự và cho cả thế giới thấy kỹ năng mã hóa của mình từ một chữ ký email đơn giản. Hãy tham gia và bắt đầu cuộc phiêu lưu mã hóa này
Các khóa học cao cấp liên quan
CSS - Hướng dẫn hoàn chỉnh
Tìm hiểu tất cả về CSS, từ đầu. Từ những điều cơ bản cho đến những khái niệm nâng cao
JavaScript - Hướng dẫn đầy đủ
Là nhà phát triển web, bạn CẦN biết JavaScript. Khóa học A-Z được xếp hạng 5* này đã giúp bạn hoàn thành
từ chối trách nhiệm. sau khi dùng thử chữ ký trong vài tháng, có vẻ như nội dung của nó kích hoạt bộ lọc thư rác trong email, vì vậy email của bạn có thể lọt vào thư mục thư rác của người gửi, đây không phải là điều tốt nhất 😬. Nhưng hãy sử dụng bài viết này để có ý tưởng về cách sử dụng HTML và CSS và tận hưởng niềm vui
#Lấy các biểu tượngĐiều đầu tiên là tìm các biểu tượng chất lượng miễn phí tốt và nơi tốt nhất là https. //xwing. com/, vì chúng không yêu cầu bạn thêm thuộc tính vào mã của bạn khi sử dụng chúng
Trong ví dụ này, tôi sẽ chỉ thêm ba biểu tượng mạng xã hội. Twitter, LinkedIn và GitHub. Vì vậy, vấn đề là tìm kiếm chúng trong trang được cung cấp và tải xuống định dạng PNG
Sau đó, tải xuống các biểu tượng điện thoại di động, phong bì và quả địa cầu
#Tạo kiểu cho các biểu tượngTất cả các biểu tượng này đều có nền trong suốt và có màu đen. Màu này có thể đáp ứng nhu cầu của bạn, nhưng rất có thể bạn muốn sử dụng màu tùy chỉnh. Để thay đổi nó, hãy sử dụng một công cụ trực tuyến siêu đẹp
Onlinepngtools - đổi màu. Bạn có thể tải lên tệp !png của mình và thay đổi màu sắc. Ở đây, tôi đã thay đổi mặc định của black cho #f5593d
Hãy thử nghiệm với màu sắc của riêng bạn;
Hãy lặp lại bước thay đổi màu sắc này cho tất cả các biểu tượng đã tải xuống
Kích thước ban đầu của các biểu tượng khá lớn và trong bài viết này và vì chúng tôi dự định sử dụng chúng ở kích thước nhỏ, hãy giảm kích thước của nó bằng Onlinepngtools - thay đổi kích thước png. Tôi đã chọn chiều rộng mới là 100px và giữ nguyên tỷ lệ khung hình. Để thay đổi kích thước, chỉ cần thêm giá trị chiều rộng mới như thế này
#Lưu trữ các biểu tượngHình ảnh được sử dụng trong HTML phải được lưu trữ ở đâu đó. Để làm điều này, tôi đã quyết định sử dụng Firebase, vì nó có CDN tuyệt vời, vì vậy nội dung [trong trường hợp này là các biểu tượng] sẽ được phân phối cực nhanh
Chuyển đến bảng điều khiển Firebase của bạn và tạo một dự án và nhấp vào thêm dự án
Sau đó, chỉ cần làm theo 3 bước cần thiết để tạo dự án. Khi nó đã được tạo, chúng tôi muốn sử dụng tùy chọn storage từ menu bên trái
Sau đó, chỉ cần làm theo 2 bước bắt buộc mà không thay đổi bất kỳ cấu hình mặc định nào, trừ khi bạn biết mình đang làm gì
Khi bộ chứa lưu trữ đã được tạo thành công, bạn sẽ có thể tải lên biểu tượng đầu tiên của mình bằng cách nhấp vào upload file
Bạn có thể tải lên tất cả các biểu tượng cùng một lúc bằng cách chọn nhiều biểu tượng, vì vậy bạn không cần phải tải lên từng tệp riêng lẻ
Khi các biểu tượng đã được tải lên, chỉ cần lấy image address của mỗi biểu tượng bằng cách làm theo các bước sau
Nếu bạn dán địa chỉ vào trình duyệt của mình, bạn sẽ thấy điều này
Điều đó có nghĩa là biểu tượng được tạo kiểu hiện có sẵn cho toàn thế giới
#Viết mã HTML và CSSBây giờ là lúc để thể hiện tất cả sự sáng tạo của bạn
Đây là cách tiếp cận cá nhân của tôi để tạo kiểu tóc. Tôi đã chọn một chữ ký đơn giản, chỉ có 2 màu [ngoài nền trắng]
Bảng màu cho dự án này là
- lai lịch.
white - biểu tượng và chi tiết nhỏ.
#f5593d - Bức thư.
#9a9a9a
Hãy nhớ rằng đôi khi, ít hơn lại nhiều hơn, vì vậy bạn không muốn chữ ký của mình trở nên cồng kềnh với vô số màu sắc, hình ảnh và tất cả được nhồi nhét
Tôi đã tạo một tệp html có nội dung này
Esteban Munch Jones
Front End Engineer
Chủ Đề