Chào Anh/Chị,
Hôm nay, chúng tôi sẽ hướng dẫn Quý khách sử dụng một công cụ rất hay có tên là “Tabs” (Thẻ nội dung).
Tabs là gì? Quý khách hãy tưởng tượng nó giống như các thẻ chia mục trong một cuốn sổ hay một tập hồ sơ. Thay vì hiển thị tất cả nội dung dài dòng ra một lúc, chúng ta sẽ gom chúng vào các thẻ nhỏ. Khách truy cập muốn xem mục nào thì chỉ cần bấm vào thẻ đó, nội dung tương ứng sẽ hiện ra.
Lợi ích của việc này:
- Giúp trang web gọn gàng, đỡ rối mắt.
- Trông chuyên nghiệp và hiện đại hơn.
- Khách hàng dễ dàng tìm thấy thông tin họ cần.
Phần 1: Truy Cập Vào Chế Độ Chỉnh Sửa Trang (UX Builder)
Bước này giống như chúng ta “mở khóa” trang web để có thể sắp xếp lại mọi thứ.
Bước 1: Đăng nhập vào website
- Quý khách truy cập vào đường link quản trị (thường là ten-website-cua-ban.com/wp-admin).
- Nhập Tên người dùng và Mật khẩu đã được cung cấp, sau đó nhấn nút Đăng nhập.
Bước 2: Tìm trang cần chỉnh sửa
- Sau khi đăng nhập, Quý khách hãy mở trang web mà mình muốn tạo các thẻ nội dung (ví dụ: trang giới thiệu, trang sản phẩm chi tiết…).
- Ở phía trên cùng của màn hình, Quý khách sẽ thấy một thanh công cụ màu đen.
Bước 3: Mở trình chỉnh sửa UX Builder
- Trên thanh công cụ màu đen đó, tìm và nhấp vào chữ “Sửa trang với UX Builder”.
- Màn hình chỉnh sửa sẽ hiện ra, với cột công cụ bên trái và giao diện trang web bên phải.
Phần 2: Thêm Công Cụ “Tabs” Vào Trang
Bây giờ, chúng ta sẽ lấy công cụ tạo thẻ và đặt nó vào trang.
Bước 1: Nhấn nút “Add Elements” (Thêm thành phần)
- Ở cột công cụ bên trái, hãy nhìn xuống dưới cùng và nhấp vào nút “+ Add Elements”.
Bước 2: Tìm và chọn công cụ “Tabs”
- Một cửa sổ mới sẽ hiện ra với rất nhiều công cụ.
- Tại ô Tìm kiếm (Search) ở trên cùng, Quý khách hãy gõ chữ: tabs.
- Công cụ có tên “Tabs” (biểu tượng là các ô vuông xếp chồng) sẽ hiện ra. Hãy nhấp vào nó.
- Ngay lập tức, một bộ thẻ mẫu (thường là “Tab 1”, “Tab 2”) sẽ xuất hiện trên trang của bạn. Cột bên trái cũng sẽ hiển thị các tùy chọn để chỉnh sửa chúng.
Phần 3: Chỉnh Sửa Nội Dung và Giao Diện Cho Từng Thẻ
Đây là phần quan trọng nhất. Chúng ta sẽ cùng nhau thay đổi tên thẻ và thêm nội dung vào bên trong.
Điều cần hiểu rõ: Công cụ này có 2 phần chính:
- Tabs (Tổng thể): Là cái khung lớn chứa tất cả các thẻ.
- Tab Panel (Từng thẻ riêng lẻ): Là mỗi cái thẻ nhỏ bên trong (ví dụ: Tab 1, Tab 2). Mỗi “Tab Panel” sẽ chứa nội dung riêng của nó.
A. CHỈNH SỬA TÊN THẺ (Ví dụ: đổi “Tab 1” thành “Mô tả sản phẩm”)
- Ở cột công cụ bên trái, Quý khách sẽ thấy danh sách các thẻ đang có, ví dụ: “Tab Panel: Tab 1”, “Tab Panel: Tab 2”.
- Hãy nhấp vào dòng chữ “Tab Panel: Tab 1”.
- Các tùy chọn cho thẻ này sẽ hiện ra. Ngay ở ô đầu tiên có tên là “Title” (Tiêu đề), Quý khách hãy xóa chữ “Tab 1” đi và gõ vào tên mới mình muốn.
- Ví dụ: “Mô tả chi tiết”, “Thông số kỹ thuật”, “Hướng dẫn sử dụng”, “Đánh giá của khách hàng”…
- Làm tương tự cho “Tab 2” và các thẻ khác.
B. THÊM NỘI DUNG VÀO BÊN TRONG MỖI THẺ
Đây là bước thêm chữ, hình ảnh… vào bên trong từng thẻ.
- Chọn thẻ cần thêm nội dung: Ví dụ, Quý khách muốn thêm nội dung cho thẻ “Mô tả chi tiết”. Hãy chắc chắn rằng thẻ đó đang được chọn (đang sáng lên) trên giao diện web bên phải.
- Nhìn vào giao diện web bên phải, bên trong khu vực của thẻ đó, Quý khách sẽ thấy một nút tròn có dấu cộng “+ Thêm vào Tab Panel”. Hãy nhấp vào nút đó.
- Một cửa sổ “Add Elements” lại hiện ra. Bây giờ Quý khách có thể thêm bất cứ thứ gì vào thẻ này. Phổ biến nhất là thêm chữ viết.
- Tại ô tìm kiếm, gõ chữ text và chọn công cụ “Text”.
- Một khung soạn thảo văn bản sẽ hiện ra. Quý khách có thể:
- Gõ trực tiếp nội dung vào.
- Sao chép (copy) nội dung từ file Word rồi dán (paste) vào đây.
- Để có nhiều tùy chọn hơn (in đậm, in nghiêng, chèn link…), hãy nhấn vào nút “Open Text Editor”.
- Sau khi soạn xong nội dung, nhấn nút “Apply” (Áp dụng) ở dưới cùng.
Làm tương tự cho các thẻ khác: Cứ chọn thẻ, nhấn dấu “+”, rồi thêm nội dung (văn bản, hình ảnh…).
Phần 4: Lưu Lại Toàn Bộ Thay Đổi
Đây là bước cuối cùng để công sức của chúng ta được công khai trên website.
- Ở góc trên bên phải của màn hình, nhấp vào nút “Update” (Cập nhật) màu xanh lá cây.
- Chờ một lát cho hệ thống lưu lại.
- Để thoát khỏi chế độ chỉnh sửa, hãy nhấp vào dấu “X” ở góc trên cùng bên trái.
Và cuối cùng, đừng quên kiểm tra!
Hãy truy cập lại trang web như một khách hàng bình thường, tìm đến khu vực vừa chỉnh sửa. Nhấp qua lại giữa các thẻ để xem nội dung đã hiển thị đúng và đẹp mắt chưa nhé!
Mẹo Nhỏ
- Sắp xếp lại thứ tự các thẻ: Ở cột công cụ bên trái, Quý khách có thể dùng chuột nhấn giữ và kéo thả các dòng “Tab Panel” lên xuống để thay đổi vị trí của chúng.
- Thay đổi kiểu dáng: Nhấp vào tên của bộ thẻ tổng (“Tabs”), ở cột bên trái Quý khách có thể chọn các mục như Style (chọn kiểu hiển thị: dạng dòng kẻ, dạng nút, dạng dọc…) để thay đổi giao diện cho đẹp hơn.










