Chào anh/chị,

Hôm nay, chúng tôi sẽ hướng dẫn anh/chị cách làm cho các mục trên trang web trở nên rõ ràng và đẹp mắt hơn bằng cách sử dụng Tiêu đề (Title) và Đường kẻ phân cách (Divider).

Hãy tưởng tượng trang web của anh/chị là một cuốn sách hay một tờ báo.

• Tiêu đề (Title) chính là tên của các chương, các mục lớn. Nó giúp người đọc biết phần nội dung sắp tới sẽ nói về cái gì (ví dụ: “Sản Phẩm Mới Về”, “Thông Tin Liên Hệ”).
• Đường kẻ phân cách (Divider) giống như một thước kẻ hay một dấu ngắt trang, giúp tạo ra một khoảng nghỉ, phân chia các phần nội dung khác nhau để bố cục trang web trông gọn gàng, chuyên nghiệp hơn.

Phần 1: Mở trình chỉnh sửa trang web (UX Builder)

Như thường lệ, chúng ta cần vào khu vực chỉnh sửa trước.

Bước 1: Đăng nhập vào trang quản trị

• Anh/chị truy cập vào đường link quản trị: tenmiencuabạn.com/wp-admin
• Nhập Tên người dùng và Mật khẩu mà chúng tôi đã cung cấp.

Bước 2: Tìm và mở trang cần chỉnh sửa

1. Trong menu màu đen bên trái, anh/chị tìm và bấm vào mục “Trang” (Pages).
2. Tìm đến trang mà anh/chị muốn thêm tiêu đề hoặc đường kẻ (ví dụ: Trang Giới thiệu).
3. Rê chuột vào tên trang và bấm nút “Edit with UX Builder”.

Phần 2: Hướng dẫn sử dụng khối “Title” (Tạo Tiêu Đề)

Giờ chúng ta sẽ tạo “tên chương” cho các phần nội dung nhé.

Bước 1: Thêm khối “Title” vào trang

1. Ở cột công cụ bên trái, anh/chị bấm vào nút có dấu cộng + Add Elements.
2. Trong bảng hiện ra, gõ chữ “Title” vào ô tìm kiếm.
3. Khi khối Title hiện ra, anh/chị hãy bấm vào nó.

Một tiêu đề mẫu với chữ “Lorem Ipsum is simply dummy text” sẽ xuất hiện trên trang, và cột bên trái sẽ là nơi để chúng ta tùy chỉnh nó.

Bước 2: Chỉnh sửa các thông tin cho Tiêu đề

Cột bên trái là bảng điều khiển của anh/chị. Dưới đây là giải thích từng mục:

• Text (Tiêu đề):
  • Đây là nơi quan trọng nhất. Anh/chị xóa dòng chữ mẫu và gõ vào tiêu đề mình muốn.
  • Ví dụ: “VỀ CHÚNG TÔI”, “ĐỘI NGŨ CỦA CHÚNG TÔI”, “KHÁCH HÀNG NÓI GÌ”.
• Style (Kiểu dáng):
  • Đây là các kiểu trang trí có sẵn cho tiêu đề. Anh/chị cứ bấm thử từng cái để xem hiệu ứng nhé!
    • Center: Chữ ở giữa.
    • Center with line: Chữ ở giữa, có một đường kẻ ngang ngắn bên dưới. Đây là kiểu rất hay được dùng.
    • Left: Chữ căn lề trái.
    • Left with line: Chữ căn lề trái và có đường kẻ.
    • Normal: Kiểu đơn giản nhất.
• Sub Title (Tiêu đề phụ):
  • Đây là một dòng chữ nhỏ hơn nằm bên dưới tiêu đề chính để giải thích thêm.
  • Ví dụ: Nếu Tiêu đề chính là “SẢN PHẨM NỔI BẬT”, Tiêu đề phụ có thể là “Những mẫu mã được yêu thích nhất trong tháng”.
• Icon (Biểu tượng):
  • Thêm một biểu tượng nhỏ xinh trước tiêu đề cho sinh động. Anh/chị có thể gõ tên biểu tượng bằng tiếng Anh vào đây (ví dụ: star – ngôi sao, heart – trái tim, user – người dùng).
• Width (Độ rộng của đường kẻ):
  • Nếu anh/chị chọn kiểu có đường kẻ (ví dụ: “Center with line”), mục này dùng để chỉnh đường kẻ đó dài hay ngắn. Anh/chị cứ để mặc định là được.
• Size (Kích thước chữ):
  • Dùng để chọn độ lớn cho chữ tiêu đề (H1, H2, H3,…). Anh/chị nên chọn H2 hoặc H3 cho các tiêu đề trong trang để đẹp và chuẩn nhất.

Phần 3: Hướng dẫn sử dụng khối “Divider” (Tạo Đường Kẻ Phân Cách)

Bây giờ, chúng ta sẽ dùng “thước kẻ” để phân chia các khu vực trên trang web.

Bước 1: Thêm khối “Divider” vào trang

1. Vẫn ở trong giao diện UX Builder, anh/chị bấm vào nút + Add Elements.
2. Gõ chữ “Divider” vào ô tìm kiếm.
3. Khi khối Divider hiện ra, anh/chị hãy bấm vào nó.

Một đường kẻ ngang mỏng sẽ xuất hiện trên trang web. Cột bên trái sẽ hiện ra các tùy chọn để chỉnh sửa đường kẻ này.

Bước 2: Tùy chỉnh Đường kẻ phân cách

• Width (Độ rộng):
  • Đây là độ dài của đường kẻ. Anh/chị nhập số phần trăm vào.
    • 100%: Đường kẻ sẽ dài hết chiều ngang của khu vực đó.
    • 50%: Đường kẻ chỉ dài bằng một nửa.
    • 20%: Một đường kẻ rất ngắn, thường dùng để trang trí.
• Height (Độ dày):
  • Đây là độ dày/mỏng của đường kẻ. Anh/chị nhập số vào, đơn vị là px.
    • 1px: Rất mỏng, tinh tế (thường dùng nhất).
    • 3px: Dày hơn, rõ ràng hơn.
• Margin (Khoảng cách lề):
  • Đây là một mục RẤT QUAN TRỌNG. Nó tạo ra “khoảng thở” cho đường kẻ, giúp nó không bị dính sát vào các nội dung bên trên và bên dưới.
  • Anh/chị tìm đến mục Margin, ở ô Top (Trên) và Bottom (Dưới), hãy nhập một con số (ví dụ: 30px). Anh/chị sẽ thấy đường kẻ được đẩy ra xa, trông thoáng đãng và đẹp hơn hẳn.
• Color (Màu sắc):
  • Anh/chị có thể đổi màu cho đường kẻ tại đây. Tuy nhiên, màu xám nhạt mặc định thường là lựa chọn an toàn và tinh tế nhất.

Phần 4: Lưu lại tất cả thay đổi

Sau khi đã tạo xong tiêu đề và đường kẻ ưng ý, anh/chị tuyệt đối đừng quên lưu lại nhé!

1. Đầu tiên, bấm nút “Apply” hoặc “Update” ở góc dưới cùng bên trái để lưu cài đặt cho khối anh/chị vừa chỉnh sửa.
2. Sau đó, để lưu toàn bộ trang, hãy bấm vào nút “Update” màu xanh lá cây ở góc trên cùng bên phải màn hình.

Khi nút Update mờ đi, nghĩa là mọi thứ đã được lưu thành công. Anh/chị có thể thoát ra và xem thành quả của mình!

Mẹo nhỏ:

• Một công thức phổ biến để trình bày một mục mới là: Tiêu đề (Title) -> Nội dung (Văn bản, hình ảnh…) -> Đường kẻ phân cách (Divider). Cấu trúc này giúp người đọc dễ theo dõi.
• Hãy giữ sự nhất quán! Nếu anh/chị đã chọn một kiểu Tiêu đề cho mục này, hãy dùng cùng kiểu đó cho các mục tương tự khác trên trang.