[Web30s – v.3] [Page-Editor] Làm việc với Widget Tab

  • Tuesday 31/03/2020

Widget Tab

I. Giao diện

Sau khi chọn vào widget Tab, sẽ hiển thị 1 box cấu hình.

Quý khách sẽ lựa chọn Loại dữ liệu, có 11 lựa chọn là Mặc địnhmột số lựa chọn theo dữ liệu trang.

1. Mặc định:

Phần này có giao diện như ảnh, Quý khách chọn vào nút Chọn hình ảnh sẽ mở cửa sổ Quản lý tập tin, Quý khách nhấp đúp vào ảnh cần chèn để chèn vào cột.

2. Các dữ liệu trang:

Các lựa chọn này sẽ lấy các dữ liệu được nhập trong quản trị website.

Ví dụ: danh mục sản phẩm thì mỗi tab sẽ là 1 danh mục

 

*** Tab có thể hiển thị theo hình thức dọc hoặc ngang như ở phần Dịch vụ mới trên trang chủ của demo031010.web30s.vn

II. Các nút cấu hình

Sau khi chèn widget vào thì đang có hiển thị 9 nút cấu hình cho widget này, từ trái sang phải là Trượt, Lên trên, Xuống dưới, Nhân bản (Ctrl + D), Giao diện, Dữ liệu, Xóa, Cấu hình, Tác vụ khác.

1. Trượt:

Nếu Quý khách có thiết lập nút Cấu hình > Cấu hình chung > Kích cỡ > Chiều cao co dãn theo nội dung được bật thì icon này mới hiện lên.

Quý khách sẽ chọn và giữ chuột vào icon này widget sẽ trượt lên xuống theo chiều dọc, để thay đổi thông số vị trí trên, thông số vị trí trái vẫn giữ nguyên.

2. Lên trên:

Quý khách chọn icon này thì widget sẽ di chuyển lên hiển thị ở đầu đoạn.

3. Xuống dưới:

Quý khách chọn icon này thì widget sẽ di chuyển lên hiển thị ở cuối đoạn.

4. Nhân bản (Ctrl + D):

Tạo mới 1 widget hình ảnh có cấu hình giống y như widget hình ảnh đã chọn nhân bản.

5. Giao diện:

Gồm 3 cấu hình Giao diện widget, Giao diện tab, Giao diện nội dung

– Giao diện widget

Hiện tại đang có 1 mẫu sẵn, Quý khách có thể chọn vào Tùy chỉnh để tạo giao diện khác.

Phần tùy chỉnh giao diện có 2 tab là Thiết kế và Hiệu ứng

– Thiết kế:

+ Nền:

* Không: Chọn vào sẽ tab sẽ trong suốt.

* Màu cơ bản: Chọn 1 màu để phủ cho tab

* Hình ảnh:

Gắn 1 hình ảnh làm nền tab, đang có sẵn 6 ảnh nền.

Quý khách chọn vào Tùy chỉnh để chèn ảnh khác.

Overlay: tạo 1 lớp nền màu mỏng phủ hết Tab

* Màu Gradient: Hiển thị theo các dải màu nối nhau theo nhiều lớp, ví dụ như lớp 1 nhạt nhất lớp cuối là đậm nhất.

Quý khách có thể tạo dải màu riêng khi chọn vào nút Tùy chỉnh.

*** Quý khách xem thêm cấu hình phần nền tại đây.

+ Đổ bóng:

Có 2 loại là:

* Đổ bóng bên ngoài: tạo 1 bóng sau widget nằm ở góc phải dưới theo 1 màu sắc.

* Đổ bóng bên trong: tạo 1 bóng bên trong khung widget.

+ Đường viền: có 2 lựa chọn Không và Sử dụng

+ Căn lề: nội dung sẽ thụt vào so với mép khung widget theo thông số được cấu hình.

+ Bo góc: 4 góc ảnh sẽ bo góc tròn theo số px Quý khách đang đặt, nếu kích thước ảnh đang hiển thị là hình vuông và đặt tất cả theo só 150px thì ảnh sẽ bo lại thành hiển thị tròn.

– Hiệu ứng

Một số hiệu ứng mẫu

Quý khách có thể tạo hiệu ứng mới khi chọn vào nút Tùy chỉnh.

6. Thêm widget:

Gắn thêm widget khác vào 1 tab của widget Tab.

7. Dữ liệu:

Phần này Quý khách dùng để đổi dữ liệu khác cho widget cho tab hiện tại.

8. Chọn tab:

Phần này Quý khách sẽ chọn 1 tab đang muốn chỉnh sửa dữ liệu.

9. Xóa:

Khi chọn vào sẽ xóa widget.

10. Cấu hình

Gồm có Cấu hình chungCấu hình widget

Cấu hình chung

Quý khách tham khảo thiết lập cấu hình chung của 1 widget tại đây.

Cấu hình widget

– Hiển thị dọc:

– Phần tử tab giãn cách vừa khung rộng: chiều độ rộng tab sẽ rộng ra bằng độ dài của chiều dài tab chia cho số tab

Thêm mới 1 tab:

 

– Khóa tính năng: khi bật thì ở website không chọn sang được tab này.

– Biểu tượng: chèn biểu tượng hiển thị ở trước tên tab

11. Tác vụ khác:

Ẩn widget: dùng để tạm tắt hiển thị widget.

Trên đây là hướng dẫn Quý khách làm quen với các thao tác Widget Hình hộp.

Cảm ơn Quý khách đã sử dụng dịch vụ của PA Việt Nam!

P.A Việt Nam – Web30s