Bước 4: Xây dựng bố cục trang chủ (Box)

Chuyên đề chinh phục quản trị website nền tảng Onwing bước 4 với chủ đề xây dựng bố cục trang chủ bao gồm các nội dung như tên keyname của mỗi theme, cách thêm nội dung hiển thị tại các box, cách thêm ảnh cho box, xây dựng link liên kết đến các bài viết hoặc trang web khác mình mong muốn

08/10/2020 03:19:05 40

Với mỗi trang website, trang chủ là mặt tiền trưng bày kinh doanh cho shop/ cửa hàng / doanh nghiệp của bạn. Vì vậy, việc tinh tế trong bố cục hiển thị trang chủ sao cho bắt mắt và câu từ sao cho xúc tích sẽ giúp bạn giữ chân khách hàng cao hơn.

Khi sử dụng nền tảng Onwing, việc thay đổi giao diện trang chủ sẽ trở nên dễ dàng hơn rất nhiều. Đặc biệt, người dùng (chủ sở hữu website) tự thực hiện được mà không cần nhờ đến lập trình viên hay nhà cung cấp website như các nền tảng cũ khác.

Trong bài viết này, BNS hướng dẫn bạn bố cục nội dung trang chủ bằng các Box của theme_01 chi tiết như sau:

1. Tên của các Keyname hiển thị vị trí của Theme_01 như sau:

[img]//media.onwing.net/file/a3319669445[/img]

Gợi ý: (tên keyname viết thường, không in hoa)

- Số 1: home_slide - Đây là tên keyname hiển thị ở vị trí slide trang chủ

- Số 2: home_service - Đây là tên keyname hiển thị ở vị trí sản phẩm/dịch vụ chính phía dưới trang chủ (khuyến khích tạo 3 hoặc 4 keyname này cho 3 hoặc 4 sản phẩm hoặc dịch vụ hoặc ngành nghề chính mà bạn đang kinh doanh)

- Số 3: home_news - Đây là tên keyname hiển thị ở khu vực phía dưới home _service (Theo mẫu theme_01, thì khu vực này cần tạo 3 box có tên keyname này. Khuyến khích nội dung và tiêu đề cho box này là những dịch vụ/ ưu thế nổi trội của bạn so với đối thủ cạnh tranh giúp bạn tăng khả năng ra quyết định mua hàng từ khách hàng của bạn)

- Số 4: home_customer - Đây là tên keyname hiển thị khu vực Khách hàng tiêu biểu (Khuyến khích tạo 3 - 4 khách hàng tiêu biểu)

- Số 5: home_orther_service - Đây là tên keyname hiển thị khu vực dưới home_customer (Khuyến khích tạo 4 box có tên keyname này)

- Một số mẫu web, bạn có thể tham khảo như : http://brandnewsoft.com, http://phanmemgymyoga.com

 

2. Box hiển thị trang chủ theo theme mặc định (Tên keyname tùy theo mẫu theme)

[img]//media.onwing.net/file/a2419610888[/img]

Gợi ý:

- Số 1: Website - Bấm chọn menu quản trị

- Số 2: Box - Bấm chọn danh sách quản lý các box

- Số 3: Icon "+" - Thêm Box mới

- Số 4: Home_news - Tên keyname (tên chỉ vị trí hiển thị của box đang tạo). 

- Số 5: Edit - Vào sửa chữa, bổ sung/ điều chỉnh Box đã tạo (hình ảnh/ nội dung / customfields)

- Số 6: General - Tab nhập thông tin cho Box bạn muốn hiển thị

 

3. Box hiển thị nâng cao (Tạo Smartbox, công nghệ nổi bật chỉ có trên nền tảng Onwing)

a. Tạo Box DL cho smartbox

[img]//media.onwing.net/file/a691584775[/img]

Gợi ý:

- Số 1: Website - Bấm chọn menu quản trị

- Số 2: Box - Bấm chọn danh sách quản lý các box DL

- Số 3: Theme/content/thiet-ke-web - Tên keyname cho theme_01 (Lưu ý: Mỗi theme có tên keyname khác nhau)

- Số 4: Câu lệnh lập trình - Đây là đoạn code tạo tên keyname cho smartbox mà tao muốn tạo ở bước tiếp theo (bước 3b)

 

b. Thiết lập tùy chỉnh custom smartbox

[img]//media.onwing.net/file/a3898680640[/img]

Gợi ý:

- Số 1: Website - Bấm chọn menu quản trị

- Số 2: Box - Bấm chọn danh sách quản lý các box

- Số 3: Thực hiện các lệnh custome cho smartbox tại khu vực customefield

 

***Định nghĩa các lệnh cơ bản:

Phân loại:

_div_css: gọi css cho div chứa nó (giá trị: ngôn ngữ css)

_div_wrap: đưa vào khung tiêu chuẩn (giá trị: 0 hoặc 1)

1. Basic (hiển thị cở bản / normal)

A> Gọi mặc định:

*Các hàm thường dùng trong list

_view: Gọi các nội dung như

+ h1, h2, h3

+ name, image, start, price, priceoff

_css:

+ Gọi cấu hình cho CSS

+ Các tham số tùy chỉnh hình:

_image_position: left, right

_image_width: độ rộng của hình, số nguyên từ 1 đến 9 (Tương đương số 1 là 10%.... số 9 là 90%)

_image_iwidth: Sử dụng khi không dùng _image_position. Các thông số tùy chỉnh giống _image_width

 

B> Gọi theo custome:

_view_custom: (Khác _view là không có gọi hình, để bạn tự custom)

+ h1, h2, h3

+ name, image, start, price, priceoff

 

2. List (cách gọi danh sách ra)

_sub_position: left, right

_sub_width:

_sub_content_css:

_sub_info_css:

_e_view:

_e_view_custom:

_e_image_position:

_e_image_width:

_e_image_iwidth:

_e_css:

_e_attr:

_have_content: giá trị 1 hoặc 0 (1 là hiển thị box gọi, 0 là không hiển thị box gọi)

3. Slide (Gọi hiển thị slide)

_sub_position: left, right

_sub_width:

_sub_content_css:

_sub_info_css:

_slide_content_css:

_slide_content_background_css:

4. Box DL (Gọi 1 box dl ra)

_sub_position: left, right

_sub_width:

_sub_content_css:

_sub_info_css:

_have_content: giá trị 1 hoặc 0 (1 là hiển thị box gọi, 0 là không hiển thị box gọi)

5. Box DLS (Danh danh sách các box DL/ nhiều box DL)

_sub_position: left, right

_sub_width:

_sub_content_css:

_sub_info_css:

 

Ví dụ mẫu:

_view: 

_image_position:

_div_wrap:

_image_width:

_sm_type: 

_list_query:

_have_content:

_list_inline:

_e_view:

_sub_position

_sub_width:

_effect_scroll:

_e_effect_scroll:

_e_css:

_list_auto_height:

_list_li_css:

_div_css:

_list_ob:

_box_dls: