Bạn có muốn tạo chữ ký email HTML chuyên nghiệp tương thích với Outlook, Apple Mail, Gmail và nhiều ứng dụng email khác không? . Trong hướng dẫn này, bạn sẽ tìm hiểu cách tạo một chữ ký email đẹp trông bắt mắt và siêu chức năng
Trước khi chúng tôi bắt đầu, bạn nên biết rằng việc tạo chữ ký email theo cách thủ công đôi khi có thể là một công việc tốn thời gian và tẻ nhạt. Chúng tôi luôn khuyên bạn nên sử dụng trình tạo chữ ký email vì đó là cách nhanh nhất và dễ dàng nhất để có một chữ ký email tuyệt vời. Tuy nhiên, nếu bạn muốn tự tạo chữ ký email, hãy tiếp tục đọc
1. Tải xuống mẫu chữ ký email
Cách tốt nhất để tạo chữ ký email HTML là bắt đầu với một mẫu và sau đó sửa đổi nó cho phù hợp với nhu cầu của bạn
Chúng tôi có một danh sách lớn các mẫu chữ ký email miễn phí mà bạn có thể tải xuống và sử dụng vì lý do chính xác này
MẪU CHỮ KÝ EMAIL
Chọn mẫu chữ ký email phù hợp
Khi duyệt qua các mẫu của chúng tôi, điều quan trọng là phải xem xét một số điều
- Nhìn vào bố cục của mẫu – Tương đối dễ dàng để thay đổi những thứ như hình ảnh, màu sắc, phông chữ, v.v. Tuy nhiên, thường khó thay đổi vị trí của các phần tử hơn. Khi chọn một mẫu chữ ký email phù hợp, bạn phải luôn kiểm tra xem bố cục có đúng [đại khái] không. Điều này có nghĩa là kiểm tra vị trí của hình ảnh, biểu tượng xã hội, văn bản, khoảng cách và đường viền
- Bố cục ngang hoặc dọc – Có chữ ký email tương thích với thiết bị di động là rất quan trọng trong thời đại ngày nay. Bố cục dọc hoạt động tốt hơn cho thiết bị di động. Tuy nhiên, nếu bạn không có quá nhiều thông tin trong chữ ký email của mình và có thể giữ nó hẹp hơn khoảng 400 pixel, bạn có thể sử dụng bố cục ngang.
- Kích thước bố cục tổng thể – Mặc dù việc chỉnh sửa những thứ góp phần vào kích thước tổng thể của bố cục là tương đối dễ dàng, nhưng sẽ dễ dàng hơn nếu bạn sử dụng một mẫu đã có phông chữ, cỡ chữ, độ rộng đường viền, khoảng cách chính xác, v.v. Mẫu đã chọn càng gần với chữ ký email cuối cùng của bạn thì bạn càng ít phải chỉnh sửa
Các thành phần của tệp mẫu đã tải xuống
Dưới đây là các thành phần của tệp ZIP mẫu chữ ký email đã tải xuống
- mẫu. html – Đây là tệp chính chúng tôi sẽ sử dụng để tạo chữ ký email HTML của bạn trong hướng dẫn này. Nó chứa mã HTML rút gọn cần thiết để chữ ký email của bạn hiển thị chính xác
- hướng dẫn. txt – Đây là một tệp văn bản có một số thông tin về mẫu đã tải xuống bên trong nó
2. Cài đặt một số chương trình và thiết lập một số thứ
Bạn sẽ cần một vài ứng dụng để có thể tạo chữ ký email của mình một cách chính xác. Ngay cả khi bạn có một số ứng dụng thay thế, để đảm bảo tính nhất quán, chúng tôi khuyên bạn nên sử dụng các ứng dụng sau vì chúng phù hợp với các bước trong hướng dẫn này
Google Chrome
Định dạng thay đổi một chút giữa các trình duyệt cho chữ ký email, vì vậy chúng tôi sẽ gắn bó với Chrome
TẢI GOOGLE CHROME
Trình soạn thảo văn bản tuyệt vời
Nó giúp chỉnh sửa mã dễ dàng thông qua nhiều phím tắt và định dạng
TẢI SUBLIME TEXT EDITOR
Hiển thị phần mở rộng tệp
Hầu hết các tệp trên máy tính đều có phần mở rộng trong tên tệp, nhưng chúng bị tắt theo mặc định trong Windows. Máy tính của bạn liên kết các loại tệp với các ứng dụng khác nhau trên máy tính của bạn. Ví dụ, mở một tệp có tên là tệp. html có thể mở nó trong Internet Explorer, Chrome, trình soạn thảo Sublime Text hoặc có thể là Notepad. Chúng tôi sẽ cần có thể xem phần mở rộng tệp vì nhiều lý do
Chỉ cần mở File Explorer > View > Đánh dấu vào “Phần mở rộng tên tệp”
3. Giới thiệu cần thiết về HTML
Mục tiêu của phần này là giúp bạn làm quen với HTML, CSS, tất cả các thuật ngữ khác nhau và cả các bảng HTML. Với kiến thức này, bạn sẽ có thể tạo chữ ký email chỉ trong vài phút
Chúng tôi không giả định bất kỳ kiến thức nào trước đó ở đây vì vậy có một chút công bằng để trình bày, nhưng hướng dẫn này khá ngắn gọn. Cách tốt nhất để bắt đầu viết/chỉnh sửa mã HTML là tiến hành chậm rãi và cẩn thận. Sai lầm tỷ lệ thuận với các giả định
Vui lòng xem qua Tài liệu tham khảo HTML này nếu bạn không chắc chắn về cách thức hoạt động của một thẻ cụ thể hoặc tác dụng của nó
Thuật ngữ
- Tag – the component name that is inside the angle brackets []. For example, this is the table tag:
- Element – the content within the opening and closing tags, including the tags themselves. For example, This is some text
- Attribute – the attribute is inside the tag brackets []. For example, this is the border attribute inside the table element:
- Attribute Value – the value assigned to the attribute. For example, the border attribute value in this case is set to zero:
- Phần tử gốc– phần tử bên ngoài chứa phần tử hiện tại
- Phần tử con – phần tử bên trong là hậu duệ trực tiếp của phần tử hiện tại
- Phần tử anh chị em– bất kỳ phần tử nào có cùng phần tử cha với phần tử hiện tại
- CSS Property – the first part [before the colon] of the attribute value inside the style attribute. For example, the property in this case is padding-bottom:
- CSS Property Value – the second part [after the colon] of the attribute value inside the style attribute. For example, the property value in this case is 4px:
Cấu trúc HTML – Thành phần dạng cây
In the context of HTML email signatures, all tags come in pairs, except for
Các thẻ cũng có thể có các thuộc tính gắn liền với chúng làm thay đổi hành vi của thẻ theo một cách nào đó. Khi tạo chữ ký email HTML của bạn, chúng tôi sẽ thêm các thuộc tính để kiểm soát kiểu chữ ký và khả năng tương thích với nhiều ứng dụng email
Trong ngữ cảnh chữ ký email [không phải tất cả HTML], thuộc tính thẻ luôn được viết sau tên thẻ trong thẻ mở, luôn có tên thuộc tính, theo sau là dấu bằng và sau đó là dấu ngoặc kép, với một số thông tin nằm giữa dấu ngoặc kép
This is a sentence which will be shown using the Verdana size 12 font.
Trong mã ví dụ trên, bạn có thể thấy cấu trúc dạng cây của HTML, trong đó các thẻ được lồng bên trong các thẻ khác. Bạn cũng sẽ nhận thấy rằng một số thẻ có thuộc tính và giá trị, trong khi những thẻ khác thì không
Bảng HTML – Cơ sở của bố cục chữ ký email
Firstly, it’s important to understand that around 95% of the HTML code in an email signature is related to tables. So, when you create an HTML email signature, you’re mostly going to be dealing with
, ,
, and elements. These are the “core scaffolding” elements required to make a fully functioning email signature. Giải thích ngắn gọn về các phần tử liên quan đến bảng HTML
…
– This is the table.- … – This is the table body and always sits directly inside the table element. Easy!
… – Stands for Table Row.… – Stands for Table Data. This is the equivalent of a column and can be used to hold a single image, some text, or even another table – yes, tables can be nested.
Bạn sẽ cần làm quen với một số đặc điểm của bảng để biết cách sắp xếp mã HTML cho chữ ký email mới của mình. Một số điều có vẻ tầm thường, nhưng nếu bạn thấy mình đang xem HTML của mình và mọi thứ không xuất hiện như bạn mong đợi, chỉ cần tự hỏi bản thân xem liệu tất cả các điểm được nêu bên dưới đã được tuân thủ hay chưa và bạn sẽ thấy rõ mình đã sai ở đâu
Một số hướng dẫn liên quan đến cấu trúc bảng HTML
- Bàn luôn là hình vuông hoặc hình chữ nhật nhưng không thể có hình chữ L
- Mọi cột bên trong bất kỳ hàng cụ thể nào đều có cùng chiều cao với mọi cột khác bên trong hàng đó
- Mỗi cột bên trong bất kỳ cột cụ thể nào có cùng chiều rộng với mọi cột khác bên trong cột đó
- Các cột phải được đặt trực tiếp bên trong các hàng
- Các hàng phải được đặt trực tiếp bên trong thân bảng
- Thân bàn phải được đặt trực tiếp bên trong bàn
MEGHAN DUNLOP Project Manager Flame Tree Creative Trong mã ví dụ trên, có một phần tử bảng, có 3 hàng và mỗi hàng có một cột bên trong và mỗi cột có một khoảng bên trong nó. Một số thẻ có các thành phần kiểu dáng xác định kiểu dáng của dữ liệu bên trong chúng
CSS – Tạo kiểu chữ ký email
CSS là viết tắt của Cascading Style Sheets và mặc dù chữ ký email HTML không sử dụng CSS theo nghĩa truyền thống nơi các kiểu được xác định bằng các lớp, chúng vẫn sử dụng các thuộc tính CSS. Nếu bạn không chắc chắn về cách một thuộc tính CSS cụ thể hoạt động hoặc tác dụng của nó, hãy xem Tài liệu tham khảo CSS này
Since most email clients don’t support the use of tags, this makes it impossible to define and use stylesheets within HTML email signatures. This also means that you cannot use CSS media queries to define styles for various devices and viewport sizes. For example, a simple CSS media query could make all the fonts bigger/smaller when the email signature is viewed on mobile devices. This would be handy to have in the modern world. This leaves only one option when it comes to email signatures and CSS, which is to define styles inline for each relevant element.
CSS styles flow down the HTML tree, which means if you define a style on a
element, it will be applied to the child element unless that element has the same CSS property defined on itself, in which case it will use the CSS property value of the element, rather than its parent element. Các thuộc tính CSS được phân tách bằng dấu chấm phẩy [;]. Điều này có nghĩa là bạn có thể có nhiều thuộc tính CSS trong một thuộc tính kiểu miễn là bạn phân tách chúng bằng dấu chấm phẩy
MEGHAN DUNLOP Project Manager Flame Tree Creative Trong đoạn mã ví dụ trên, bạn sẽ nhận thấy rằng một số thuộc tính CSS [và giá trị của chúng] được lặp lại trong các phần tử con mặc dù phần tử cha có cùng thuộc tính và giá trị được xác định. Bạn có thể nghĩ rằng điều này được chỉ định quá mức và không hiệu quả, nhưng điều này thực sự được thực hiện vì lý do tương thích với ứng dụng email. Bằng cách đó, chữ ký email của bạn trông đẹp mắt cho dù nó được xem trên ứng dụng email nào
4. Mẹo để làm việc với tệp HTML
Để tạo chữ ký email, bạn sẽ cần phải chỉnh sửa HTML thoải mái, điều này đôi khi có thể rất khó chịu
Dưới đây là một số lời khuyên hữu ích sẽ làm cho cuộc hành trình trở nên dễ chịu hơn nhiều
Giữ cho cả Chrome và Sublime Windows luôn mở
Khi sửa đổi tệp HTML chữ ký của bạn, khả năng xem nhanh các thay đổi đối với chữ ký email của bạn là điều tối quan trọng. Bạn có thể đạt được điều này bằng cách mở cả Sublime và Chrome cùng lúc
Chỉ cần đặt từng cửa sổ cạnh nhau để bạn có thể thấy cả hai theo ảnh chụp màn hình bên dưới. Điều này làm cho việc chỉnh sửa mã HTML dễ dàng hơn nhiều
Sử dụng tính năng Kiểm tra của Chrome
Chrome có một tính năng rất hữu ích được gọi là Kiểm tra. Nó hiển thị cho bạn tất cả các thành phần của tài liệu HTML [trong trường hợp này là chữ ký email] được hiển thị. Nó cũng cho bạn thấy những thuộc tính CSS nào được áp dụng cho từng phần tử
Bạn có thể sử dụng tính năng Kiểm tra để sửa đổi và kiểm tra mọi thứ trực tiếp trong Chrome [chẳng hạn như màu sắc, phông chữ và thậm chí cả chính HTML] trước khi thực hiện các thay đổi đối với tệp HTML
Quan trọng. Mọi thay đổi bạn thực hiện trong Chrome không được lưu vào tệp HTML và sẽ hoàn nguyên sau khi bạn làm mới trang. Do đó, điều quan trọng là phải ghi nhớ hoặc viết ra những thay đổi bạn đã thử nghiệm trong Chrome mà bạn muốn triển khai trong tệp HTML của mình
Để sử dụng tính năng Kiểm tra, nhấp chuột phải vào bất kỳ phần nào của chữ ký email [ví dụ:. tên, chức danh công việc, hình ảnh] và nhấp vào Kiểm tra
Thao tác này sẽ mở cửa sổ Kiểm tra nơi bạn có thể nhấp [hoặc di chuột] vào các thành phần cụ thể để xem cách chúng tương tác với mọi thứ khác
Điều quan trọng là bạn phải cảm thấy thoải mái khi sử dụng tính năng Kiểm tra của Chrome khi tạo chữ ký email
Thay đổi thuộc tính CSS trong Chrome
Để thêm/thay đổi thuộc tính CSS của bất kỳ phần tử nào
- Nhấp chuột phải vào một phần tử cụ thể mà bạn muốn thay đổi các thuộc tính CSS và chọn Kiểm tra
- Trong phần Kiểu, bạn sẽ thấy tất cả các thuộc tính CSS khác nhau được áp dụng cho thành phần đó, chẳng hạn như “cỡ chữ. 12px;”
- Bạn có thể thêm các thuộc tính CSS bổ sung [có thể ghi đè lên các thuộc tính hiện có] bằng cách đặt chúng vào phần tử. phần phong cách hoặc bạn có thể sửa đổi thuộc tính CSS hiện có bằng cách chỉ cần nhấp vào giá trị của nó và thay đổi nó. Để hoàn tất chỉnh sửa, chỉ cần nhấn Enter trên bàn phím của bạn hoặc nhấp vào khoảng trắng
Chỉnh sửa HTML trong Chrome
Để chỉnh sửa HTML trong Chrome
- Nhấp chuột phải vào một phần tử cụ thể mà bạn muốn thay đổi HTML và chọn Kiểm tra
- Trong cửa sổ Thành phần chính hiển thị tất cả HTML, nhấp chuột phải vào phần được đánh dấu [nếu đây là phần bạn muốn thay đổi] và chọn Chỉnh sửa dưới dạng HTML
- Bạn có thể thay đổi HTML bằng cách nhập trực tiếp vào vùng văn bản hoặc bạn có thể xóa phần đó của HTML bằng cách chọn tất cả và xóa phần đó. Sau khi các thay đổi của bạn hoàn tất, chỉ cần nhấp vào bên ngoài hộp chỉnh sửa
Sử dụng phím tắt
Những phím tắt này sẽ tăng tốc đáng kể quy trình làm việc của bạn
- CTRL + F [Tìm] – Khi tạo chữ ký email HTML, CTRL + F là bạn của bạn. Không thực sự, nó là. Tại sao phải tìm kiếm thứ gì đó theo cách thủ công khi bạn có thể tìm thấy nó bằng cách sử dụng CTRL + F? . Sử dụng nó
- CTRL + R [Làm mới trong Chrome] – Khi bạn tự tin chỉnh sửa mã HTML chữ ký email của mình, bạn có xu hướng thực hiện các thay đổi khá nhanh và đôi khi việc nhấp vào nút làm mới trong trình duyệt của bạn theo cách thủ công để tải lại các thay đổi bạn đã thực hiện trở nên khó khăn . Cách nhanh hơn là chỉ cần nhấn CTRL + R trong Chrome để tải lại tệp
- CTRL + H [Find and Replace in Sublime] – Đôi khi bạn sẽ cần thực hiện cùng một thay đổi ở nhiều nơi [ví dụ:. phông chữ/màu sắc] và đây là lúc tính năng Tìm và Thay thế của Sublime phát huy tác dụng. Bạn phải luôn sử dụng Thay thế, thay vì Thay thế Tất cả. Thay thế một phiên bản tại một thời điểm giúp giảm khả năng mắc lỗi
- CTRL + S [Save in Sublime] – Khá rõ ràng, nhưng đáng nói vì đôi khi nó bị lãng quên
- CTRL + Z [Hoàn tác trong Sublime] – Đôi khi mắc lỗi, sử dụng hoàn tác để lùi lại một số bước
- CTRL + SHIFT + Z [Làm lại trong Sublime] – Bạn muốn tiến lên một vài bước?
Đừng để bị bắt bởi Impostrophes
Bạn sẽ nhận thấy rằng một số phần của mã HTML sử dụng dấu nháy đơn. Ví dụ: khi chỉ định thuộc tính CSS thuộc họ phông chữ, đôi khi giá trị phông chữ sử dụng dấu ngoặc kép đơn mà bạn sẽ cần đặc biệt chú ý
Điều này đặc biệt có vấn đề khi bạn sao chép mã HTML từ internet vì cách chuyển đổi dấu nháy đơn giữa WordPress và trình soạn thảo văn bản chẳng hạn như Sublime
Đối với bạn, những gì trông giống như một dấu nháy đơn, thực sự có thể là một dấu nháy đơn. Không chắc chắn những gì một impostrophe là?
Bạn có thể thấy sự khác biệt trong các dấu nháy đơn?
Các sự cố do dấu nháy đơn gây ra đôi khi rất khó khắc phục
Tất cả mã phục vụ một mục đích
Nguyên tắc chung khi sửa đổi HTML. Nếu bạn không hiểu tại sao nó ở đó, đừng chạm vào nó
Bạn có thể nhận thấy rằng một số mã HTML/CSS mà chúng ta sẽ làm việc có thể chứa các phần lạ/trùng lặp/bổ sung có vẻ không cần thiết. Tuy nhiên, sau hơn một thập kỷ thử nghiệm chữ ký email, chúng tôi đã phát triển hiểu biết sâu sắc về cách các ứng dụng email hiển thị HTML. Vì vậy, bạn có thể yên tâm rằng những bit HTML/CSS kỳ lạ này chắc chắn cần thiết để làm cho chữ ký email của bạn tương thích với càng nhiều ứng dụng email càng tốt
HTML rút gọn
Tất cả các tệp HTML mẫu của chúng tôi đều được thu nhỏ để giảm tổng số ký tự trong HTML. Chúng tôi làm điều này vì nó mang lại một số lợi ích, nhưng chủ yếu là vì Gmail có giới hạn 10.000 ký tự cho chữ ký email của họ
HTML rút gọn
HTML chưa được rút gọn
Nếu bạn đang cài đặt chữ ký email này trong Gmail, chúng tôi khuyên bạn nên để mẫu được rút gọn, ngay cả khi sửa đổi mã HTML. Mặt khác, nếu bạn đang cài đặt chữ ký này trong một ứng dụng email khác, vui lòng sử dụng công cụ làm đẹp HTML trực tuyến để làm cho mã HTML dễ đọc hơn
Quan trọng. Nếu bạn làm đẹp code HTML, đừng minify nó sau khi đã chỉnh sửa template xong. Quy trình rút gọn của chúng tôi rất độc đáo [vì lý do tương thích với ứng dụng email] và nếu bạn rút gọn mã HTML một lần nữa, nó có thể sẽ phá vỡ một số phần trong chữ ký email của bạn
Làm quen với quy trình làm việc
Để tạo chữ ký email mà không hoàn toàn mất trí, bạn sẽ cần làm quen với quy trình chỉnh sửa tệp HTML
Sử dụng quy trình công việc này sẽ giúp việc kiểm tra dễ dàng hơn nhiều và sẽ đảm bảo bạn có cơ hội tốt hơn để nắm bắt mọi vấn đề khi chúng phát sinh
5. Bắt đầu
Các phần tiếp theo trình bày chi tiết quy trình cần tuân theo để tạo chữ ký email HTML bằng cách sửa đổi mẫu đã tải xuống của bạn. Mục đích là giúp bạn đủ quen thuộc với việc tùy chỉnh chữ ký email để nhanh chóng tạo ra thiết kế đáng tin cậy của riêng mình để sau đó bạn có thể dễ dàng điều chỉnh nó cho từng nhân viên trong tổ chức của mình
1. Giải nén tệp ZIP mẫu chữ ký email đã tải xuống – Bạn có thể tạo một thư mục mới hoặc chọn một khu vực hiện có trên máy tính của mình để giải nén các tệp mẫu
2. mở mẫu. html trong Google Chrome – Bạn có thể chỉ cần nhấp đúp để mở tệp trong Chrome. Nếu bạn không thể, hãy nhấp chuột phải vào nó và chọn Mở bằng > Google Chrome. Khi nó mở, bạn sẽ có thể thấy một chữ ký hoàn chỉnh bao gồm cả hình ảnh. Giữ tệp mở trong Chrome vì đó là nơi bạn sẽ kiểm tra xem chữ ký của mình trông như thế nào bất cứ khi nào bạn thực hiện bất kỳ thay đổi nào đối với mã HTML
3. mở mẫu. html trong Sublime Text Editor – Trong khi Chrome đang mở, nhấp chuột phải vào tệp và chọn Open with > Sublime Text Editor. Một tùy chọn khác là kéo và thả tệp vào Sublime Text Editor
4. Sử dụng các phần bên dưới để tạo chữ ký email của bạn – Đọc các phần có liên quan của hướng dẫn này bên dưới dựa trên những gì bạn đang cố gắng đạt được. Ví dụ: nếu bạn muốn thay đổi một số phông chữ, hãy đọc phần này, nếu bạn đang cố thay đổi hình ảnh, hãy đọc phần này, v.v.
6. Văn bản [bao gồm màu sắc, phông chữ, kích thước, trọng lượng, kiểu dáng]
- Phông chữ an toàn trên web – Trước khi thay đổi bất kỳ phông chữ nào, bạn nên làm quen với các phông chữ an toàn trên web
- Phông chữ dự phòng – Hiểu được thời điểm và lý do sử dụng phông chữ dự phòng là rất quan trọng
Ghi chú. Trước khi thêm bất kỳ văn bản mới nào, bạn cần thêm một hàng và/hoặc cột mới vào bảng HTML hiện có. Vui lòng kiểm tra phần để được hướng dẫn
- In Sublime, locate the new
element you have created. - Place this code inside your
element: New Text
- Mã cập nhật của bạn sẽ trông như thế này.
New Text - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Đi qua phần của chúng tôi để thay đổi văn bản mới của bạn
Thay đổi văn bản
- Trong Chrome, tìm văn bản bạn muốn thay đổi và ghi lại văn bản đó
- Trong Sublime, nhấn CTRL + F và nhập văn bản đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Khi bạn đã tìm thấy văn bản mình muốn thay đổi, chỉ cần tô sáng văn bản đó và nhập văn bản mới sẽ thay thế văn bản đó
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Thay đổi màu văn bản
- Trong Chrome, tìm văn bản bạn muốn thay đổi, ghi lại văn bản đó, nhấp chuột phải vào văn bản đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'color' và sẽ có một giá trị màu được gán cho thuộc tính đó được hiển thị ở định dạng thập lục phân [ví dụ:. #354052]. Nhấp vào hộp màu bên cạnh để mở công cụ chọn màu và chọn màu bạn muốn thay đổi văn bản thành. Bạn sẽ nhận thấy sự thay đổi màu sắc trên văn bản trong chữ ký email của mình khi bạn thay đổi nó trong bộ chọn màu – điều này rất hữu ích để chọn màu phù hợp
- Khi bạn đã chọn màu, hãy xác nhận màu đó bằng cách nhấn Enter trên bàn phím của bạn. Ghi lại giá trị màu thập lục phân mới
- Trong Sublime, nhấn CTRL + F và nhập văn bản mà bạn đã ghi chú trước đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the text, it should be inside an or [if hyperlinked] element which has a style attribute and some CSS properties inside it. Find the ‘color’ property and change the hexadecimal value for it to the one you noted down earlier.
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Thay đổi phông chữ
- Trong Chrome, tìm văn bản bạn muốn thay đổi, ghi lại văn bản đó, nhấp chuột phải vào văn bản đó và nhấp vào Kiểm tra
- Xem qua danh sách các phông chữ an toàn trên web mà bạn có thể sử dụng và chọn một trong số chúng
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'họ phông chữ' và sẽ có một giá trị được phân tách bằng dấu phẩy được gán cho thuộc tính đó [ví dụ:. Arial, Helvetica, sans-serif]. Nhấp vào giá trị để chỉnh sửa nó. Thay đổi phần đầu tiên của giá trị cho phông chữ chính, phần thứ hai cho phông chữ dự phòng và phần thứ ba cho phông chữ dự phòng chung của họ. Vì vậy, nếu trước đó giá trị là “Arial, Helvetica, sans-serif” và bạn muốn thay đổi phông chữ thành Tahoma, thì giá trị mới sẽ là “Tahoma, Helvetica, sans-serif”. Bạn sẽ nhận thấy sự thay đổi phông chữ trên văn bản trong chữ ký email của mình khi bạn thay đổi nó – điều này rất hữu ích để chọn đúng phông chữ
- Khi bạn đã chọn phông chữ, hãy xác nhận phông chữ đó bằng cách nhấn Enter trên bàn phím của bạn. Ghi lại giá trị phông chữ mới
- Trong Sublime, nhấn CTRL + F và nhập văn bản mà bạn đã ghi chú trước đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the text, it should be inside an or [if hyperlinked] element which has a style attribute and some CSS properties inside it. Find the ‘font-family’ property and change the value for it to the one you noted down earlier.
- To increase email client compatibility for your email signature, you should also change the same ‘font-family’ property for the parent
element, only if the is the only element inside it and there aren’t others. - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Thay đổi cỡ chữ
- Trong Chrome, tìm văn bản bạn muốn thay đổi, ghi lại văn bản đó, nhấp chuột phải vào văn bản đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là ‘font-size’ và sẽ có một giá trị pixel được gán cho thuộc tính đó [ví dụ:. 14. 0px]. Nhấp vào giá trị để nhập giá trị mới vào giá trị đó theo cách thủ công hoặc nhấn các phím lên/xuống trên bàn phím để tăng/giảm kích thước phông chữ. Bạn sẽ nhận thấy kích thước phông chữ thay đổi trên văn bản trong chữ ký email của mình khi bạn thay đổi nó – điều này hữu ích cho việc chọn phông chữ có kích thước phù hợp
- Khi bạn đã chọn kích thước phông chữ, hãy xác nhận nó bằng cách nhấn Enter trên bàn phím của bạn. Ghi lại giá trị cỡ chữ mới
- Trong Sublime, nhấn CTRL + F và nhập văn bản mà bạn đã ghi chú trước đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the text, it should be inside an or [if hyperlinked] element which has a style attribute and some CSS properties inside it. Find the ‘font-size’ property and change the value for it to the one you noted down earlier.
- To increase email client compatibility for your email signature, you should also change the same ‘font-size’ property for the parent
element, only if the is the only element inside it and there aren’t others. - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Thay đổi độ dày phông chữ [Bật/tắt chữ đậm]
- Trong Chrome, tìm văn bản bạn muốn thay đổi, ghi lại văn bản đó, nhấp chuột phải vào văn bản đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'phông chữ' và sẽ có một giá trị số được gán cho thuộc tính đó [ví dụ:. 400]. Nhấp vào giá trị để nhập giá trị mới vào đó theo cách thủ công.
Đối với cân nặng bình thường, hãy nhập '400'.
Đối với trọng lượng in đậm, hãy nhập '700'.
Bạn sẽ nhận thấy độ đậm của phông chữ thay đổi trên văn bản trong chữ ký email của mình khi bạn thay đổi nó – điều này hữu ích cho việc chọn độ dày phông chữ phù hợp. - Sau khi bạn đã chọn độ dày phông chữ, hãy xác nhận bằng cách nhấn Enter trên bàn phím của bạn. Ghi lại giá trị trọng lượng phông chữ mới
- Trong Sublime, nhấn CTRL + F và nhập văn bản mà bạn đã ghi chú trước đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the text, it should be inside an or [if hyperlinked] element which has a style attribute and some CSS properties inside it. Find the ‘font-weight’ property and change the value for it to the one you noted down earlier.
- To increase email client compatibility for your email signature, you should also change the same ‘font-weight’ property for the parent
element, only if the is the only element inside it and there aren’t others. - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Thay đổi kiểu phông chữ [bật/tắt chữ nghiêng]
- Trong Chrome, tìm văn bản bạn muốn thay đổi, ghi lại văn bản đó, nhấp chuột phải vào văn bản đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'font-style' và sẽ có một giá trị được gán cho thuộc tính đó [ví dụ:. thông thường]. Nhấp vào giá trị để nhập giá trị mới vào đó theo cách thủ công.
Đối với kiểu thông thường, hãy nhập 'bình thường'.
Đối với kiểu chữ nghiêng, hãy nhập 'italic'.
Bạn sẽ nhận thấy kiểu phông chữ thay đổi trên văn bản trong chữ ký email của mình khi bạn thay đổi kiểu phông chữ đó – điều này hữu ích để chọn kiểu phông chữ phù hợp. - Khi bạn đã chọn kiểu phông chữ, hãy xác nhận nó bằng cách nhấn Enter trên bàn phím của bạn. Ghi lại giá trị kiểu phông chữ mới
- Trong Sublime, nhấn CTRL + F và nhập văn bản mà bạn đã ghi chú trước đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the text, it should be inside an or [if hyperlinked] element which has a style attribute and some CSS properties inside it. Find the ‘font-style’ property and change the value for it to the one you noted down earlier.
- To increase email client compatibility for your email signature, you should also change the same ‘font-style’ property for the parent
element, only if the is the only element inside it and there aren’t others. - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Trong Chrome, tìm văn bản bạn muốn xóa và ghi lại văn bản đó
- Trong Sublime, nhấn CTRL + F và nhập văn bản đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Khi bạn đã tìm thấy văn bản mình muốn xóa, bạn sẽ muốn xóa toàn bộ phần tử cùng với văn bản bạn muốn xóa bên trong nó và nếu văn bản được siêu liên kết, phần tử . Ví dụ.
Text to Remove
For example:Text to Remove
Note: Removing the and/or element[s] won’t remove other table-related code such as the surrounding
, , , andelements that may no longer be needed. If you want to remove these, please follow the instructions in the section.
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
7. Hình ảnh [bao gồm các biểu tượng xã hội, kích thước]
- Tải xuống các biểu tượng xã hội miễn phí – Nếu bạn đang tìm cách thêm/thay đổi các biểu tượng xã hội, thì có sẵn một thư viện khổng lồ các biểu tượng xã hội miễn phí để bạn sử dụng
- Định dạng hình ảnh – Không phải tất cả các định dạng hình ảnh đều được tạo như nhau. Tìm hiểu định dạng hình ảnh bạn nên sử dụng trong chữ ký email của mình
- Tránh hình ảnh mờ/có điểm ảnh – Tìm hiểu cách tránh hình ảnh bị mờ hoặc có điểm ảnh trong chữ ký email
lưu ý 1. Trước khi thêm một hình ảnh mới, bạn cần thêm một hàng và/hoặc cột mới vào bảng HTML hiện có. Vui lòng kiểm tra phần để được hướng dẫn
Lưu ý 2. Trước tiên, bạn sẽ cần tìm một dịch vụ lưu trữ hình ảnh của mình trên internet. Bạn có thể sử dụng công ty lưu trữ web của riêng mình hoặc một dịch vụ như Google Drive cho việc này. Bạn sẽ cần một URL cho hình ảnh của mình để sử dụng nó trong chữ ký email của bạn
- Lưu ý kích thước của hình ảnh mới của bạn tính bằng pixel [chiều rộng x chiều cao]
- In Sublime, locate the new
element you have created. - Place this code inside your
element: - Mã cập nhật của bạn sẽ trông như thế này.
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Đi đến phần của chúng tôi nếu bạn cần thay đổi hình ảnh mới của mình
Thay đổi hình ảnh
Ghi chú. Trước tiên, bạn sẽ cần tìm một dịch vụ lưu trữ hình ảnh của mình trên internet. Bạn có thể sử dụng công ty lưu trữ web của riêng mình hoặc một dịch vụ như Google Drive cho việc này. Bạn sẽ cần một URL cho hình ảnh của mình để sử dụng nó trong chữ ký email của bạn
- Lưu ý kích thước của hình ảnh mới của bạn tính bằng pixel [chiều rộng x chiều cao]
- Trong Chrome, tìm hình ảnh bạn muốn thay đổi, nhấp chuột phải vào hình ảnh đó và nhấp vào Kiểm tra
- In the Elements section, you will see the element highlighted. Note down the URL value in the src attribute.
- Trong Sublime, nhấn CTRL + F và nhập giá trị URL được ghi chú đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the element you want to change, simply update the value in the src attribute to your new image URL.
- If your new image is a different size from the old image, you will need to update the following attributes in the element:
width="[1/3 of the noted new image width]" height="[1/3 of the noted new image height]"
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Thay đổi kích thước hình ảnh
- Trong Chrome, tìm hình ảnh bạn muốn thay đổi, nhấp chuột phải vào hình ảnh đó và nhấp vào Kiểm tra
- In the Elements section, you will see the element highlighted. Note down the URL value in the src attribute.
- The element has height and width attributes. To change the image size, simply double-click on either value, type the new value in, and press Enter on your keyboard. However, you will want to update the height and width while maintaining the aspect ratio of the image. You can use an aspect ratio tool to calculate your new image dimensions based on the old image’s height and width.
- Once you have worked out the new dimensions, change the height and width attribute values in the element in Chrome to make sure it looks correct.
- Trong Sublime, nhấn CTRL + F và nhập giá trị URL được ghi chú vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the element you want to change, simply update the height and width attribute values to your newly calculated dimensions.
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Trong Chrome, tìm hình ảnh bạn muốn xóa, nhấp chuột phải vào hình ảnh đó và nhấp vào Kiểm tra
- In the Elements section, you will see the element highlighted. Note down the URL value in the src attribute.
- Trong Sublime, nhấn CTRL + F và nhập URL đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Khi bạn đã tìm thấy hình ảnh muốn xóa, bạn sẽ muốn xóa toàn bộ phần tử
Lưu ý. Việc xóa phần tử - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
8. Dấu phân cách [bao gồm màu sắc, chiều rộng/chiều cao]
Ghi chú. Trước khi thêm dấu phân cách mới, bạn cần thêm một hàng và/hoặc cột mới vào bảng HTML hiện có. Vui lòng kiểm tra phần để được hướng dẫn
- In Sublime, locate the new
element you have created. - Thêm thuộc tính style sau vào phần tử
Dành cho dải phân cách dọc.style="border-collapse:collapse;background-color:#e87021;width:2px;vertical-align:super;padding:0px!important;"
Đối với dải phân cách ngang
MEGHAN DUNLOP Project Manager Flame Tree Creative - Mã được cập nhật của bạn sẽ trông như thế này [đối với dấu phân cách dọc].
MEGHAN DUNLOP Project Manager Flame Tree Creative - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Đi tới phần của chúng tôi nếu bạn cần thay đổi dấu phân cách mới của mình
Thay đổi màu phân cách
- Trong Chrome, tìm dấu phân cách bạn muốn thay đổi, nhấp chuột phải vào dấu phân cách đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'background-color' và sẽ có một giá trị màu được gán cho thuộc tính đó được hiển thị ở định dạng thập lục phân [ví dụ:. #e87021]. Ghi lại giá trị màu thập lục phân hiện tại và bất kỳ thuộc tính hoặc thuộc tính CSS nào khác xung quanh nó để giúp tìm kiếm dễ dàng hơn sau này.
Nhấp vào hộp màu bên cạnh để mở bộ chọn màu và chọn màu bạn muốn thay đổi dấu phân cách thành. Bạn sẽ nhận thấy sự thay đổi màu sắc trên dấu tách trong chữ ký email của mình khi bạn thay đổi nó trong bộ chọn màu – điều này rất hữu ích để chọn đúng màu. - Khi bạn đã chọn màu, hãy xác nhận màu đó bằng cách nhấn Enter trên bàn phím của bạn. Ghi lại giá trị màu thập lục phân mới
- Trong Sublime, nhấn CTRL + F và nhập giá trị màu thập lục phân cũ mà bạn đã ghi lại trước đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the separator, it should be an
element with no child elements inside it, and it should have a style attribute and some CSS Properties inside it. Find the ‘background-color’ property and change the hexadecimal value for it to the new one you noted down earlier. - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Thay đổi chiều rộng/chiều cao của dấu phân cách
- Trong Chrome, tìm dấu phân cách bạn muốn thay đổi, nhấp chuột phải vào dấu phân cách đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'background-color' và sẽ có một giá trị màu được gán cho thuộc tính đó được hiển thị ở định dạng thập lục phân [ví dụ:. #e87021]. Ghi lại giá trị màu thập lục phân đó và bất kỳ thuộc tính hoặc thuộc tính CSS nào khác xung quanh nó để giúp tìm kiếm dễ dàng hơn sau này.
Bạn cũng sẽ thấy một Thuộc tính CSS có tên là ‘chiều rộng’ hoặc ‘chiều cao’ và sẽ có một giá trị pixel được gán cho thuộc tính đó [ví dụ:. 2px]. Nhấp vào giá trị để nhập giá trị mới vào giá trị đó theo cách thủ công hoặc nhấn phím lên/xuống trên bàn phím để tăng/giảm chiều rộng hoặc chiều cao. Bạn sẽ nhận thấy sự thay đổi chiều rộng/chiều cao trên dấu tách trong chữ ký email của mình khi bạn thay đổi nó – điều này hữu ích để chọn đúng chiều rộng/chiều cao. - Khi bạn đã chọn chiều rộng/chiều cao, hãy xác nhận bằng cách nhấn Enter trên bàn phím của bạn. Ghi lại chiều cao/chiều rộng mới
- Trong Sublime, nhấn CTRL + F và nhập giá trị màu thập lục phân mà bạn đã ghi lại trước đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the separator, it should be an
element with no child elements inside it, and it should have a style attribute and some CSS properties inside it. Find the ‘width’ or ‘height’ property [whichever one you changed] and change the pixel value for it to the new one you noted down earlier. - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Trong Chrome, tìm dấu phân cách bạn muốn xóa, nhấp chuột phải vào dấu phân cách đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'background-color' và sẽ có một giá trị màu được gán cho thuộc tính đó được hiển thị ở định dạng thập lục phân [ví dụ:. #e87021]. Ghi lại giá trị màu thập lục phân đó
- Trong Sublime, nhấn CTRL + F và nhập giá trị màu thập lục phân đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Khi bạn đã tìm thấy dấu phân cách mà mình muốn xóa, bạn sẽ muốn xóa toàn bộ phần tử
Lưu ý. Xóa phần tử - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
9. khoảng cách
Ghi chú. Trước khi thêm một không gian mới, bạn cần thêm một hàng và/hoặc cột mới vào bảng HTML hiện có. Vui lòng kiểm tra phần để được hướng dẫn
- In Sublime, locate the new
element you have created. - Thêm thuộc tính style sau vào phần tử
Dành cho không gian dọc.MEGHAN DUNLOP Project Manager Flame Tree Creative Đối với không gian ngang
MEGHAN DUNLOP Project Manager Flame Tree Creative - Mã được cập nhật của bạn sẽ trông như thế này [đối với không gian dọc].
MEGHAN DUNLOP Project Manager Flame Tree Creative - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Đi tới phần của chúng tôi nếu bạn cần thay đổi dấu phân cách mới của mình
Thay đổi chiều rộng/chiều cao của không gian
- Trong Chrome, tìm không gian bạn muốn thay đổi, nhấp chuột phải vào không gian đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'padding-right' [chiều rộng] hoặc 'padding-bottom' [chiều cao] và sẽ có một giá trị pixel được gán cho thuộc tính đó [ví dụ:. 20px]. Ghi lại giá trị pixel đó và mọi thuộc tính hoặc thuộc tính CSS khác xung quanh nó để dễ tìm hơn sau này.
Nhấp vào giá trị để nhập giá trị mới vào giá trị đó theo cách thủ công hoặc nhấn phím lên/xuống trên bàn phím để tăng/giảm chiều rộng hoặc chiều cao. Bạn sẽ nhận thấy chiều rộng/chiều cao của khoảng trắng thay đổi trong chữ ký email của mình khi bạn thay đổi nó – điều này hữu ích để chọn đúng chiều rộng/chiều cao. - Khi bạn đã chọn chiều rộng/chiều cao, hãy xác nhận bằng cách nhấn Enter trên bàn phím của bạn. Ghi lại chiều cao/chiều rộng mới
- Trong Sublime, nhấn CTRL + F và nhập giá trị pixel cũ mà bạn đã ghi lại trước đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the space, it should be an
element and it should have a style attribute and some CSS properties inside it. Find the ‘padding-right’ or ‘padding-bottom’ property [whichever one you changed] and change the pixel value for it to the new one you noted down earlier. - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Trong Chrome, xác định vị trí không gian bạn muốn xóa, nhấp chuột phải vào không gian đó và nhấp vào Kiểm tra
- Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'padding-right' [chiều rộng] hoặc 'padding-bottom' [chiều cao] và sẽ có một giá trị pixel được gán cho thuộc tính đó [ví dụ:. 20px]. Ghi lại giá trị pixel đó và mọi thuộc tính hoặc thuộc tính CSS khác xung quanh nó để dễ tìm hơn sau này
- Trong Sublime, nhấn CTRL + F và nhập giá trị pixel đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Khi bạn đã tìm thấy khoảng trống bạn muốn xóa, nó phải là một phần tử
Nếu phần tử
Nếu phần tử
Lưu ý. Xóa phần tử - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
10. siêu liên kết
- Siêu liên kết và chữ ký email – Thông tin thêm về thời điểm sử dụng siêu liên kết trong chữ ký email
- Liên kết nhấp để gọi – Chúng là gì, lợi ích của chúng và cách liên kết nhấp để gọi hoạt động
- Theo dõi các liên kết được nhấp – Tìm hiểu cách thiết lập Google Analytics để theo dõi các liên kết được nhấp của bạn
Thêm một siêu liên kết văn bản
- Trong Chrome, tìm văn bản bạn muốn thêm siêu liên kết vào và ghi chú lại
- Trong Sublime, nhấn CTRL + F và nhập văn bản đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the text, it should be inside an element which has a style attribute and some CSS properties inside it.
- Add the following element surrounding the text, but inside the element, and change the href attribute to your chosen hyperlink URL:
MEGHAN DUNLOP Project Manager Flame Tree Creative - Cut the style attribute and all the CSS properties from the element and paste it into the element.
- Add the following CSS property and value to the style attribute of the element:
MEGHAN DUNLOP Project Manager Flame Tree Creative - Mã cập nhật của bạn sẽ trông như thế này.
MEGHAN DUNLOP Project Manager Flame Tree Creative - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Đi tới phần của chúng tôi nếu bạn cần thay đổi siêu liên kết mới của mình
Thêm một siêu liên kết hình ảnh
- Trong Chrome, tìm hình ảnh bạn muốn thêm siêu liên kết vào, nhấp chuột phải vào hình ảnh đó và nhấp vào Kiểm tra
- In the Elements section, you will see the element highlighted. Note down the URL value in the src attribute.
- Trong Sublime, nhấn CTRL + F và nhập URL được ghi chú đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Add the following element surrounding the element, and change the href attribute to your chosen hyperlink URL:
MEGHAN DUNLOP Project Manager Flame Tree Creative - Mã cập nhật của bạn sẽ trông như thế này.
MEGHAN DUNLOP Project Manager Flame Tree Creative - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
- Đi tới phần của chúng tôi nếu bạn cần thay đổi siêu liên kết mới của mình
Thay đổi siêu liên kết văn bản
Ghi chú. Để thay đổi văn bản hiển thị của siêu liên kết, hãy xem phần của chúng tôi
- Trong Chrome, tìm văn bản bạn muốn thay đổi siêu liên kết, nhấp chuột phải vào văn bản đó và nhấp vào Kiểm tra
- In the Elements section, you will see the element highlighted. Note down the URL value in the href attribute.
- Trong Sublime, nhấn CTRL + F và nhập giá trị URL đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the element you want to change, simply update the value in the href attribute to your new URL.
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Thay đổi siêu liên kết hình ảnh
Ghi chú. Để thay đổi hình ảnh hiển thị của một siêu liên kết, hãy xem phần của chúng tôi
- Trong Chrome, tìm hình ảnh mà bạn muốn thay đổi siêu liên kết, nhấp chuột phải vào hình ảnh đó và nhấp vào Kiểm tra
- In the Elements section, you will see the element highlighted. Look at the parent element, and note down the URL value in the href attribute.
- Trong Sublime, nhấn CTRL + F và nhập giá trị URL đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the element you want to change, simply update the value in the href attribute to your new URL.
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Loại bỏ một siêu liên kết văn bản
- Trong Chrome, tìm văn bản bạn muốn xóa siêu liên kết, nhấp chuột phải vào văn bản đó và nhấp vào Kiểm tra
- In the Elements section, you will see the element highlighted. Note down the URL value in the href attribute.
- Trong Sublime, nhấn CTRL + F và nhập giá trị URL đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the element you want to remove, add the following element surrounding the text, but inside the element:
MEGHAN DUNLOP Project Manager Flame Tree Creative - Cut the style attribute and all the CSS properties from the element and paste it into the element.
- Remove the following CSS property and value from the style attribute of the element:
MEGHAN DUNLOP Project Manager Flame Tree Creative - Mã cập nhật của bạn sẽ trông như thế này.
MEGHAN DUNLOP Project Manager Flame Tree Creative - Remove the element’s opening and closing tags.
- Mã bạn nên để lại là thế này.
MEGHAN DUNLOP Project Manager Flame Tree Creative - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Loại bỏ một siêu liên kết hình ảnh
- Trong Chrome, tìm hình ảnh bạn muốn xóa siêu liên kết, nhấp chuột phải vào hình ảnh đó và nhấp vào Kiểm tra
- In the Elements section, you will see the element highlighted. Look at the parent element, and note down the URL value in the href attribute.
- Trong Sublime, nhấn CTRL + F và nhập URL được ghi chú đó vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Once you have found the element you want to remove, simply remove the element entirely [don’t forget to remove the closing tag]. However, be sure not to remove the child element, otherwise your image will not be visible anymore.
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
11. Cách trình bày
- Bảng HTML – Nên hiểu rõ về nó trước khi sửa đổi bố cục chữ ký email
- Trong Chrome, tìm một vùng trống nơi bạn muốn thêm hàng mới, nhấp chuột phải vào hàng đó và nhấp vào Kiểm tra
- In the Elements section, you should see a
element highlighted. If you don’t, you will need to locate the parent element and click on it to highlight it. - Bạn sẽ cần ghi lại mọi thông tin liên quan mà bạn có thể sử dụng để tìm phần tử
Phần tử con
Phần tử con
Không có phần tử con. Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'padding-right' [chiều rộng] hoặc 'padding-bottom' [chiều cao] và sẽ có một giá trị pixel được gán cho thuộc tính đó [ví dụ:. 20px]. Ghi lại giá trị pixel đó và mọi thuộc tính hoặc thuộc tính CSS khác xung quanh nó để dễ tìm hơn sau này.- Trong Sublime, nhấn CTRL + F và nhập giá trị được lưu ý từ bước trên vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Sau khi bạn đã tìm thấy phần tử
Ví dụ.MEGHAN DUNLOP Project Manager Flame Tree Creative Bạn muốn chèn mã hàng mới [bên dưới] ngay sau thẻ đóng
- Bạn sẽ cần ghi lại mọi thông tin liên quan mà bạn có thể sử dụng để tìm phần tử
- Thêm thuộc tính style sau vào phần tử
- Thêm thuộc tính style sau vào phần tử
- Place this code inside your
- To add a new row, add the following
element:
MEGHAN DUNLOP Project Manager Flame Tree Creative - Nhấn CTRL + S để lưu vào Sublime
- Bạn sẽ cần vào bên trong hàng mới của mình trước khi có thể thêm bất kỳ hình ảnh hoặc văn bản nào vào hàng đó
- Trong Chrome, tìm hàng bạn muốn xóa, nhấp chuột phải vào hàng đó và nhấp vào Kiểm tra
- In the Elements section, you should see a
element highlighted. If you don’t, you will need to locate the parent element and click on it to highlight it. - Bạn sẽ cần ghi lại mọi thông tin liên quan mà bạn có thể sử dụng để tìm phần tử
Phần tử con
Phần tử con
Không có phần tử con. Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'padding-right' [chiều rộng] hoặc 'padding-bottom' [chiều cao] và sẽ có một giá trị pixel được gán cho thuộc tính đó [ví dụ:. 20px]. Ghi lại giá trị pixel đó và mọi thuộc tính hoặc thuộc tính CSS khác xung quanh nó để dễ tìm hơn sau này.- Trong Sublime, nhấn CTRL + F và nhập giá trị được lưu ý từ bước trên vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Khi bạn đã tìm thấy phần tử
Ví dụ.MEGHAN DUNLOP Project Manager Flame Tree Creative - To remove a row, you will want to delete the whole
element from the opening tag to the closing tag, including everything inside it.
- Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
Ghi chú. Nếu bạn vừa tạo một hàng mới, bạn có thể chuyển sang bước 6
- Trong Chrome, tìm một vùng trống mà bạn muốn thêm một cột mới, nhấp chuột phải vào cột đó và nhấp vào Kiểm tra
- In the Elements section, you should see a
element highlighted. If you don’t, you will need to locate the parent element and click on it to highlight it. - Bạn sẽ cần ghi lại mọi thông tin liên quan mà bạn có thể sử dụng để tìm phần tử
Phần tử con
Phần tử con
Không có phần tử con. Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'padding-right' [chiều rộng] hoặc 'padding-bottom' [chiều cao] và sẽ có một giá trị pixel được gán cho thuộc tính đó [ví dụ:. 20px]. Ghi lại giá trị pixel đó và mọi thuộc tính hoặc thuộc tính CSS khác xung quanh nó để dễ tìm hơn sau này.- Trong Sublime, nhấn CTRL + F và nhập giá trị được lưu ý từ bước trên vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- Khi bạn đã tìm đúng phần tử
Ví dụ.MEGHAN DUNLOP Project Manager Flame Tree Creative Bạn muốn chèn mã cột mới [bên dưới] ngay sau thẻ đóng
- Bạn sẽ cần ghi lại mọi thông tin liên quan mà bạn có thể sử dụng để tìm phần tử
- To add a new column, add the following
element: MEGHAN DUNLOP Project Manager Flame Tree Creative - Nhấn CTRL + S để lưu vào Sublime
- Bây giờ bạn có thể , , hoặc bên trong cột mới của mình
Ghi chú. Nếu đây là cột cuối cùng trong một hàng, bạn có thể muốn thay thế
- Trong Chrome, tìm cột bạn muốn xóa, nhấp chuột phải vào cột đó và nhấp vào Kiểm tra
- In the Elements section, you should see a
element highlighted. If you don’t, you will need to locate the parent element and click on it to highlight it. - Bạn sẽ cần ghi lại mọi thông tin liên quan mà bạn có thể sử dụng để tìm phần tử
Phần tử con
Phần tử con
Không có phần tử con. Trong phần Kiểu, bên dưới phần tử. style, bạn sẽ thấy một thuộc tính CSS có tên là 'padding-right' [chiều rộng] hoặc 'padding-bottom' [chiều cao] và sẽ có một giá trị pixel được gán cho thuộc tính đó [ví dụ:. 20px]. Ghi lại giá trị pixel đó và mọi thuộc tính hoặc thuộc tính CSS khác xung quanh nó để dễ tìm hơn sau này.- Trong Sublime, nhấn CTRL + F và nhập giá trị được lưu ý từ bước trên vào thanh tìm kiếm bật lên, sau đó nhấp vào Tìm
- To remove a column, you will want to delete the whole
element from the opening tag to the closing tag, including everything inside it. - Nhấn CTRL + S để lưu trong Sublime và CTRL + R để làm mới trong Chrome
kết thúc lên
Mặc dù hướng dẫn này dài và rất kỹ lưỡng, nhưng hy vọng bạn đã học được cách tạo chữ ký email HTML chuyên nghiệp và đầy đủ chức năng
Khi bạn đã tạo xong chữ ký email, hãy xem hướng dẫn cài đặt của chúng tôi để được trợ giúp cài đặt chữ ký vào ứng dụng email của bạn
Chủ Đề
- Bạn sẽ cần ghi lại mọi thông tin liên quan mà bạn có thể sử dụng để tìm phần tử
- Bạn sẽ cần ghi lại mọi thông tin liên quan mà bạn có thể sử dụng để tìm phần tử
- Place this code inside your