Tùy Chỉnh Bố Cục Trang với Các Phần Tùy Chỉnh và Bộ Chứa Nội Dung (Chỉ Dành cho Chủ Đề OS 3.0)

Khi các thành phần dựng sẵn của chủ đề không hoàn toàn phù hợp với ý tưởng thiết kế của bạn, Mục tùy chỉnh và Khung nội dung mang đến cho bạn sự linh hoạt để xây dựng chính xác những gì bạn cần. Bằng cách kết hợp các khối xây dựng cơ bản, như Văn bản, Hình ảnh và Nút bấm, bên trong các khung bố cục linh hoạt, bạn có thể tạo ra các bố cục trang độc đáo và trải nghiệm thương hiệu đặc trưng mà không cần viết mã.

Hướng dẫn này giải thích cách tinh chỉnh các thành phần hiện có, xây dựng một thành phần tùy chỉnh từ đầu và áp dụng các quy tắc bố cục chính để tối ưu hóa thiết kế trang cửa hàng của bạn.

Khái niệm cốt lõi: Mục, Khối và Khung nội dung

Trước khi bắt đầu thiết kế, điều quan trọng là phải hiểu cấu trúc phân cấp của một trang web, vì điều này ảnh hưởng trực tiếp đến logic bố cục hình ảnh của bạn.

Phân cấp Mục và Khối

• Mục: Mô-đun cốt lõi của một trang xác định cấu trúc tổng thể và chức năng.
  
• Khối: Một đơn vị có thể tái sử dụng trong một mục, chẳng hạn như nút bấm hoặc hình ảnh.
  
• Logic phân cấp: Các cài đặt áp dụng cho khung chứa cha ảnh hưởng trực tiếp đến bố cục của các phần tử con "cấp một". Hiểu được mối quan hệ này giúp bạn xác định nên điều chỉnh lớp nào khi thay đổi căn chỉnh hoặc hướng (ví dụ: ngang so với dọc).
  

Khung nội dung là gì?

Khung nội dung không chứa nội dung cụ thể riêng biệt; nó hoạt động như một "khung bố cục" rất linh hoạt:

• Lưu trữ nội dung (Sử dụng các khối có thể tái sử dụng): Khung chứa đóng vai trò là điểm tập hợp các khối xây dựng cơ bản. Bạn có thể đặt nhiều khối có thể tái sử dụng khác nhau (như Văn bản, Hình ảnh, Nút bấm, v.v.) vào trong khung như "nội dung".
  

• Logic bố cục linh hoạt (Bố cục Flex): Khung chứa sử dụng logic bố cục linh hoạt. Hãy tưởng tượng nó như một khung vô hình cho phép bạn tự do điều chỉnh hướng nội dung (ngang/dọc), căn chỉnh và quy tắc xuống dòng.
  

  Lưu ý: Các thành phần dành riêng cho trang, chẳng hạn như mô-đun Trang sản phẩm, không thể được thêm vào Khung nội dung. Xem "Hạn chế và Những lưu ý quan trọng đối với Khung nội dung" bên dưới để biết chi tiết.

Trường hợp dành cho người mới: Tinh chỉnh các thành phần hiện có

Bạn không phải lúc nào cũng phải bắt đầu từ đầu. Bạn có thể sử dụng khả năng bố cục của Khung nội dung để điều chỉnh tinh chỉnh các thành phần chính thức hiện có (ví dụ, Danh sách hình ảnh với văn bản, So sánh hình ảnh, v.v.).

Logic Ứng Dụng Bố Cục: Nơi Tìm Cài Đặt

Khi điều chỉnh bố cục thành phần, hãy theo logic này để nhanh chóng tìm đúng cài đặt:

• Ứng dụng từ trên xuống (Cấp cha điều khiển cấp con): Hầu hết các cài đặt bố cục (chẳng hạn như căn chỉnh, khoảng cách và hướng) áp dụng cho các phần tử "cấp tiếp theo" bên trong khung.
  

• Logic tự áp dụng (Nút cuối cùng điều khiển chính nó): Nếu một khối là cấp cuối cùng trong hệ thống phân cấp (chẳng hạn như một nút hoặc văn bản đơn lẻ) và có các tùy chọn bố cục riêng, các cài đặt đó sẽ áp dụng trực tiếp cho chính khối đó.

  Mẹo: Để tối ưu hóa nhanh bố cục của một khối cụ thể, hãy tìm các cài đặt bố cục trong khung cha của khối đó, hoặc trong cài đặt riêng của khối. Ví dụ, để thay đổi cách sắp xếp một nhóm thẻ, hãy nhấp vào khung cha của nhóm thẻ và điều chỉnh các cài đặt trong bảng điều khiển của nó.

Các Điều Chỉnh Bố Cục Thông Dụng cho Khung Nội Dung

Khung nội dung hỗ trợ các điều chỉnh bố cục thông dụng sau:

• Thay đổi Hướng Bố Cục: Sử dụng logic bố cục linh hoạt của khung để chuyển các khối có thể tái sử dụng từ hàng ngang sang cột dọc.
• Tối ưu Căn Chỉnh và Gói: Tinh chỉnh cách các phần tử căn chỉnh trong không gian hoặc đặt quy tắc tự động gói khi không gian màn hình bị giới hạn.
• Điều chỉnh Khoảng cách: Thay đổi Lề và Đệm giữa các phần tử để tạo ra vẻ ngoài chặt chẽ hơn hoặc rộng rãi hơn.

Trường Hợp Nâng Cao: Xây Dựng Thành Phần Độc Đáo (Từng Bước)

Nếu chủ đề của bạn không cung cấp thành phần cụ thể bạn cần, bạn có thể xây dựng nó từ đầu bằng cách sử dụng Mục tùy chỉnh. Các bước dưới đây hướng dẫn tạo "Lưới Tính Năng" — một thành phần với tiêu đề trên cùng, ba thẻ tính năng đặt cạnh nhau, và một nút ở dưới cùng.

Để xây dựng thành phần này, hãy làm theo các bước sau:

1. Phân tích cấu trúc bố cục. Bố cục tổng thể là một cột dọc, nhưng phần giữa chứa ba thẻ là một hàng ngang, và các phần tử bên trong mỗi thẻ được sắp xếp theo cột dọc.
   
2. Trong Trình chỉnh sửa Chủ đề, nhấp vào + Thêm thành phần dưới Mẫu, sau đó thêm một Phần tùy chỉnh.
   
   • Trong phần này, thêm ba Khung nội dung (dành cho Tiêu đề, Nhóm thẻ, và Nút).
     
   • Sau đó đặt hướng bố cục của phần thành Dọc.
     
3. Thêm một thành phần Tiêu đề vào Khung nội dung thứ nhất.
   
   • Sau đó, thêm một thành phần Nút vào Khung nội dung thứ ba.
     
4. Vào Khung nội dung thứ hai và thêm ba khung nội dung cấp con (mỗi thẻ một khung).
   
   • Chuyển hướng bố cục của khung này sang Ngang để các thẻ nằm cạnh nhau.
     
   • Chọn từng khung con trong ba khung và thay đổi chiều rộng từ Tự động thành 33% để chia đều không gian.
     
5. Bên trong khung thẻ thứ nhất, thêm lần lượt Hình ảnh, Tiêu đề, Văn bản, và Nút.
   
   • Đặt căn chỉnh của khung thành Trái.
     
   • Sau đó điều chỉnh Khoảng cách dòng trong khung cha để tạo khoảng cách cân đối giữa các phần tử.
     
6. Khi thẻ đầu tiên đã có hình dáng như bạn muốn, hãy nhân đôi container đó hai lần, sau đó thay thế hình ảnh và văn bản trong hai thẻ còn lại để hoàn thành thành phần.
   

Hạn chế và Những Lưu ý Quan trọng về Bộ chứa Nội dung

Tương thích Thành phần với Bộ chứa Nội dung

Chỉ các khối có thể tái sử dụng mới có thể được thêm vào Bộ chứa nội dung. Việc có sẵn phụ thuộc vào việc mô-đun là đa năng hay dành riêng cho trang cụ thể:

• Thành phần đa năng (có thể sử dụng trên nhiều trang): Các mô-đun cơ bản có thể sử dụng trên hầu hết các khu vực của trang web, như Văn bản, Tiêu đề, Nút, Hình ảnh, Thẻ sản phẩm và Blog (hơn 30 loại có sẵn).
• Thành phần dành riêng cho trang (sử dụng hạn chế): Tính năng được thiết kế riêng cho một số loại trang nhất định. Ví dụ, mô-đun Trang sản phẩm chỉ dành riêng cho Trang sản phẩm và không thể thêm vào Bộ chứa nội dung.

Tập trung Nội dung Tĩnh cho Bộ chứa Nội dung

Bộ chứa nội dung lý tưởng cho bố cục tĩnh. Chúng không hỗ trợ tự nhiên các hiệu ứng hoạt hình phức tạp hoặc logic, chẳng hạn như banner tự động phát được xây dựng bằng thành phần Hình ảnh banner.

Giới hạn Khối Trang cho Các Phần Tùy chỉnh

Mỗi trang có giới hạn 50 Khối.