Hướng dẫn sử dụng Widget – Sections

Chào anh/chị,

Để giúp anh/chị dễ dàng tự tay chỉnh sửa trang web của mình, bài viết này sẽ hướng dẫn chi tiết cách sử dụng một trong những công cụ quan trọng nhất: Section (Mục). 

Phần 1: Section (Mục) là gì? Tại sao nó lại quan trọng?

Hãy tưởng tượng trang web của anh/chị là một ngôi nhà lớn.

• Mỗi Section (Mục) giống như một căn phòng trong ngôi nhà đó (phòng khách, phòng ngủ, phòng bếp…).
• Mỗi căn phòng (Section) sẽ chứa đồ đạc bên trong như bàn ghế, TV, giường tủ… Những “đồ đạc” này chính là nội dung của anh/chị như: chữ viết, hình ảnh, video, nút bấm…

Tóm lại: Section là một khung lớn để chứa và phân chia các khu vực nội dung trên trang web. Anh/chị muốn thêm một khu vực giới thiệu mới? Hãy tạo một Section. Anh/chị muốn thêm một khu vực bảng giá? Hãy tạo một Section khác. Việc này giúp trang web của anh/chị trở nên gọn gàng, chuyên nghiệp và dễ nhìn hơn rất nhiều.

Phần 2: Bắt đầu như thế nào? Cách vào trình chỉnh sửa UX Builder

Trước tiên, chúng ta cần vào được khu vực chỉnh sửa đã nhé.

1. Đăng nhập vào trang quản trị website của anh/chị (thường có dạng tenmiencuaanhchi.com/wp-admin).
2. Ở cột menu bên trái, tìm và chọn mục Trang.
3. Một danh sách các trang (như Trang chủ, Giới thiệu, Liên hệ…) sẽ hiện ra. Anh/chị hãy tìm đến trang mình muốn sửa, rê chuột vào tên trang đó và nhấn vào dòng chữ “Edit with UX Builder”.

Bây giờ, anh/chị đã ở trong giao diện chỉnh sửa trực quan của UX Builder rồi!

Phần 3: Cách Thêm một Section (Mục) mới

Đây là bước tạo ra một “căn phòng” mới cho trang web.

1. Trong giao diện UX Builder, anh/chị sẽ thấy trang web của mình ở bên phải và các công cụ ở bên trái.
2. Để thêm một Section mới, hãy nhấn vào nút dấu cộng (+) ở cuối danh sách các thành phần bên trái, hoặc nhấn vào nút dấu cộng (+) trực tiếp trên trang ở vị trí anh/chị muốn thêm.
3. Một bảng các công cụ sẽ hiện ra. Anh/chị hãy tìm và nhấn vào ô có chữ Section.

Vậy là xong! Một Section trống vừa được tạo ra. Bây giờ chúng ta sẽ cùng nhau “trang trí” cho nó.

Phần 4: “Trang trí” cho Section – Các tùy chọn quan trọng nhất

Sau khi tạo Section, bảng điều khiển của nó sẽ hiện ra ở cột bên trái. Dưới đây là những tùy chỉnh quan trọng và dễ hiểu nhất.

1. Thay đổi Nền (Background)

Đây là phần giúp “sơn tường” cho căn phòng của anh/chị.

• Đổi màu nền (Color):

• • Nhấn vào ô Color.
  • Một bảng màu sẽ hiện ra. Anh/chị có thể kéo chấm tròn để chọn màu mình thích hoặc dán mã màu (ví dụ: #FFFFFF cho màu trắng) vào ô trống.

• Dùng hình ảnh làm nền (Image):

  • Nhấn vào nút Select Media ở mục Image.
  • Một cửa sổ thư viện ảnh sẽ hiện ra. Anh/chị có thể chọn ảnh có sẵn hoặc nhấn vào tab “Tải file lên” để tải ảnh từ máy tính của mình.
  • Sau khi chọn ảnh, nhấn nút “Use this image” (Sử dụng ảnh này).
• Lớp phủ màu (Overlay):
  • Đây là một lớp màu mờ phủ lên trên ảnh nền. Nó rất hữu ích khi anh/chị đặt chữ lên trên ảnh, giúp chữ dễ đọc hơn.
  • Hãy chọn một màu (thường là màu đen) và kéo thanh trượt bên cạnh để điều chỉnh độ đậm/nhạt của lớp phủ. Kéo càng sang phải, lớp phủ càng đậm.

2. Điều chỉnh Kích thước và Khoảng cách (Layout)

• Chiều cao (Height):

• • Mục này giúp anh/chị chỉnh độ cao của Section.
  • Anh/chị có thể kéo thanh trượt hoặc nhập số vào ô Height. Con số này tính bằng px (pixel).
  • Một lựa chọn rất hay là chọn “Fullscreen” (Toàn màn hình) để Section chiếm hết chiều cao màn hình, thường dùng cho banner đầu trang.

• Đệm (Padding):

  • Đây là một khái niệm rất quan trọng! Padding chính là khoảng trống bên trong của Section, là khoảng cách từ viền của Section tới nội dung (chữ, ảnh…) bên trong.
  • Nếu anh/chị thấy nội dung của mình bị dính sát vào mép trên hoặc mép dưới, hãy tăng số ở mục Padding lên (ví dụ: 30px). Điều này sẽ tạo ra “không gian để thở”, giúp thiết kế trông thoáng đãng và chuyên nghiệp hơn.

Phần 5: Thêm “Đồ đạc” (Nội dung) vào trong Section

Một Section trống thì không có giá trị. Giờ chúng ta sẽ thêm nội dung vào bên trong nó. Quy trình luôn là:

Section (Phòng) -> Row (Dàn đồ đạc) -> Column (Vị trí) -> Element (Món đồ)

1. Nhấn vào dấu cộng (+) bên trong Section mà anh/chị vừa tạo.
2. Chọn Row (Hàng). Row giúp anh/chị chia Section thành các cột.
3. Ngay sau khi thêm Row, một cửa sổ sẽ hỏi anh/chị muốn chia làm mấy cột. Ví dụ:
   • Chọn “Single Column” (Một cột) nếu muốn nội dung trải dài hết.
   • Chọn “Two Columns” (Hai cột) nếu muốn đặt hình bên trái, chữ bên phải.
   • 
4. Bây giờ, trong mỗi cột (Column), anh/chị sẽ thấy một dấu cộng (+) khác. Hãy nhấn vào đó để thêm nội dung thật sự.
5. Một bảng công cụ sẽ hiện ra. Anh/chị có thể thêm:
   • Text (Văn bản): Để viết chữ, tiêu đề, đoạn văn.
   • Image (Hình ảnh): Để chèn một bức ảnh.
   • Button (Nút bấm): Để tạo nút kêu gọi hành động (như “Xem thêm”, “Mua ngay”).
   • Và rất nhiều thứ khác!

Phần 6: Lời khuyên cuối cùng

• Đừng sợ sai! Ở góc dưới cùng bên trái có nút “Undo” (Hoàn tác) hình mũi tên quay lại. Nếu lỡ tay làm sai, anh/chị chỉ cần nhấn vào đó để quay lại bước trước. Cứ thoải mái thử nghiệm nhé!
• Luôn nhấn “Apply” và “Update”: Sau khi chỉnh sửa xong một thành phần (ví dụ như Section), hãy nhấn nút Apply (Áp dụng) ở cuối bảng điều khiển bên trái. Khi đã hài lòng với tất cả thay đổi trên trang, hãy nhấn nút Update (Cập nhật) màu xanh lam ở góc trên cùng bên trái để lưu lại tất cả.
• Bắt đầu đơn giản: Lần đầu tiên, anh/chị chỉ cần thử tạo một Section, đổi màu nền cho nó, và thêm một đoạn văn bản vào giữa. Khi đã quen, anh/chị có thể thử các tính năng phức tạp hơn.