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

  • Tuesday 31/03/2020

I. Giao diện Widget Slider

1. Tác dụng

– Giúp Quý Khách thêm các hiệu ứng cho phần nội dung hiển thị thêm sinh động và đa dạng hóa các thiết kế trên website giúp website Quý Khách bắt mắt và thu hút người xem.

2. Thêm Widget

– Quý Khách chọn thêm widget từ nút thêm widget.

– Chọn widget Slider để bắt đầu thêm Slider vào trang web.

– Quý Khách chọn nội dung mà Slider sẽ lấy để hiển thị lên website.

– Tiếp theo, Quý Khách lựa chọn giao diện Slider hiển thị với 3 mấu giao diện có sẵn của hệ thống.

II. Cấu hình chung – Tùy chỉnh hiển thị Widget Slider

Widget Slider cũng có cấu hình chung cùng với các tùy chỉnh widget tương tự với các dạng widget khác. Quý Khách có thể tham khảo các tùy chỉnh này tại :

[Web30s – v.3] [Page-Editor] Làm việc với Thiết lập giao diện Widget

III. Cấu hình Widget Slider

1. Mục Thiết Kế

– Ngoài mẫu có sẵn Quý Khách có thể thay đổi thiết lập mẫu giao diện slider theo mong muốn trong “Tùy chỉnh giao diện”.

 * Nền

Quý Khách cài đặt màu nền cho Widget Slider trên website với:

+ Màu nền:

– Mặc định: sẽ hiển thị màu trắng.

– Màu cơ bản: Quý khách sẽ có bản màu chuẩn phổ thông để chọn lựa hoặc tự điều chỉnh tham số màu chuẩn RGB hoặc HEXA. Ngoài ra, còn có các thiết lập overlay để phủ lớp màu khác lên màu chính (dạng transparent – trong suốt).

– Hình ảnh: Quý khách sử dụng hình ảnh làm nền cho Widget Slider. Ngoài ra, còn có các thiết lập nâng cao cho hình nền hiển thị; Nền cho ảnh; Các kiểu thể hiển ảnh như vừa khung, nằm trong khung, v.v…

– Màu Gradient: là dạng màu chuyển sắc, Quý khách có thể thiết lập nhiều lớp chuyển màu tùy nhu cầu.

+ Màu nền:

– Khi Quý Khách lựa chọn thiết lập “Màu cơ bản” trong phần màu nền Quý Khách thêm vào mã màu muốn có cho giao diện Widget Slider.

+ Overlay: Quý Khách có thể tùy chỉnh màu mờ cho Widget Slider, đè lên màu đang có. Giúp Quý Khách xem trước các màu chỉnh sửa cũng như khôi phục lại màu khi muốn phục hồi tránh quên mã màu trước đó.

* Đổ bóng

– Thiết lập đổ bóng cho khung Widget Slider.

+ Màu sắc: Thiết lập màu sắc của bóng widget.

+ Kiểu đổ bóng: hiện tại có thể chọn 2 dạng là:

 Đổ bóng trong: đổ bóng ở bên trong widget hình hộp.

 Đổ bóng ngoài: đổ bóng ở bên ngoài widget hình hộp.

+ Độ phủ ngang: tăng giảm độ rộng ngang qua của bóng đổ về phía trái.

+ Độ phủ dọc: tăng- giảm độ rộng dọc của bóng đổ về phía dưới.

+ Độ mờ: tăng – giảm độ mờ cho bóng đổ.

+ Độ phủ rộng: tăng- giảm độ phủ ngang- dọc cho bóng đổ.

* Đường viền

– Chỉnh đường viền cho khung bao ngoài của Widget.

+ Đường viền: lựa chọn “Không” hoặc “Sử dụng” để xuất hiện dường viền cho Widget Slider.

+ Kiểu: Kiểu dáng của đường viền ngoài như: nét đậm, nét đứt,…

+ Màu: Màu sắc của đường  viền ngoài.

+ Độ rộng :

Tất cả: kích thước cả đường viền khung widget.

Bên phải: kích thước đường viền khung bên phải.

Bên trái: kích thước đường viền khung bên trái.

Bên trên: kích thước đường viền khung bên trên.

Bên dưới: kích thước đường viền khung bên dưới.

 * Căn lề

–  Căn lề các đoạn nội dung chữ viết trong Widget Slider.

+ Căn lề :

Tất cả: căn lề đoạn nội dung với khung widget.

Căn phải: căn kích thước cách khung bên phải.

Căn trái: căn kích thước cách khung bên trái.

Căn trên: căn kích thước cách khung bên trên.

Căn dưới: căn kích thước cách khung bên dưới.

 * Bo góc

– Thiết lập bo tròn góc cho khung widget.

+ Bo góc:

Tất cả: bo tròn tất cả các góc.

Bo góc phải trên: Bo tròn cạnh góc phải phía trên khung widget.

Bo góc phải dưới: Bo tròn cạnh góc phải phía dưới khung widget.

Bo góc trái trên: Bo tròn cạnh góc trái phía trên khung widget.

Bo góc trái dưới: Bo tròn cạnh góc trái phía dưới khung widget.

2. Mục Hiệu Ứng

– Quý Khách chọn hiệu ứng xuất hiện của Widget Slider khi tải trang website.

 – Gồm các mục hiệu ứng:

 + Khởi tạo: xuất hiện của Widget khi tải trang website (mặc định).

 + Rê chuột: xuất hiện của Widget khi rê chuột vào widget.

 + Nhấp chuột : xuất hiện của Widget khi nhấp chuột vào widget.

IV. Giao diện cột Widget Slider

– Sử dụng khi Quý Khách sử dụng mẫu giao diện gồm các cột. Các chức năng thiết lập như cấu hình widget.

V. Giao diện thumbnails

– Thiết lập hình ảnh thumbnail( hình ảnh thu gọn) của widget slider.

– Với các thiết lập:

+ Căn lề dưới: khoảng cách lề dưới giữa hình và nội dung dưới thumbnail.

+ Kích thước chiều cao: chỉnh và thiết lập kích thước chiều cao cảu hình ảnh thumbnail.

VI. Giao diện icon chuyển slide

– Thiết lập hiển thị của nút chuyển slide.

–  Quý Khách có thể thiết kế lại icon chuyển slide theo ý muốn.

Gồm các thiết lập:

+ Tổng quan: thiết lập kích thước chiều cao và rộng cho icon chuyển slide.

+ Biểu tưởng: thiết lập hình ảnh icon chuyển slide.

+ Vị trí: thiết lập vị trí nằm của icon trên widget slider.

+ Nền, Bo góc, Đường viền : thiết lập giao diện cho khung của icon với các tham số tương tự trong thiết kế widget.

VII. Giao diện phân trang

Đang cập nhật…

VIII. Thêm Widget

– Trong Widget Slider Quý Khách có thể tùy chỉnh thêm các widget để tăng sự phong phú cho nội dung Slider của Quý Khách.

IX. Thiết lập dữ liệu

– Quý Khách thay đổi dữ liệu mà widget slider đang lấy và chuyển qua dữ liệu mà Quý Khách muốn hiển thị ra website.

X. Cấu hình Widget

1. Cấu hình:

– Quý Khách thiết lập cho Widget Slider thời gian và hiệu ứng chuyển động slider mà Quý Khách mong muốn.

2. Thumbnail

– Trong phần thiết lập Thumbnail này, Quý Khách thiết lập số cột thumbnail của slider, khoảng cách giữa các thumbnail và tốc đọ chuyển giữa các thumbnail khi có hiệu ứng chạy.

XI. Cấu hình sự kiện

– Thiết lập các sự kiện cho slide khi clip Click hoặc Hover vào hình ảnh thumbnail.

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