Quản lý giao diện – Làm việc với Widget Tab

  • Tuesday 31/03/2020

Widget Tab

I. Giao diện

widget tab 0

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.

widget tab 1

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.

widget tab 3

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

widget tab 4

– Giao diện widget

widget tab 5

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.

widget tab 6

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.

widget tab 7

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

widget tab 8

* 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.

widget tab 9

widget tab 10

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

widget tab 11

* 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.

widget tab 12

widget tab 13

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.

widget tab 14

widget tab 15

+ Đổ 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.

widget tab 16

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

widget tab 17

+ 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.

widget tab 18

+ 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

widget tab 19

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.

widget tab 20

6. Thêm widget:

widget tab 21

widget tab 22

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

7. Dữ liệu:

widget tab 23

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:

widget tab 24

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

widget tab 25

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:

widget tab 26

widget tab 29

widget tab 30

– 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

widget tab 31

widget tab 32

Thêm mới 1 tab:

 

widget tab 33

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

widget tab 34

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

widget tab 35

11. Tác vụ khác:

widget tab 27

Ẩ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

Rate this post