Quản lý giao diện – Cấu hình Xem Video bằng popup

Hướng dẫn cấu hình tạo một danh sách phân trang hiển thị các dữ liệu Để có thể tạo được một popup video xem nhanh và cách thực hiện điều chỉnh lại thông tin trên các mẫu giao diện của Web30s. Bài hướng dẫn dưới đây sẽ hỗ trợ cho Quý khách thực hiện thao tác.

1. Thực hiện tạo Popup xem nhanh Video.

Quý khách thực hiện truy cập vào phần Quản lý giao diện => Thiết lập giao diện. Màn hình sẽ hiển thị ra trang thiết kế tùy chỉnh.

Để tạo được Popup, Quý khách chọn vào Thanh công cụ dọc ở bên trái màn hình của trang chỉnh sửa giao diện >> chọn chức năng Popup và thực hiện ấn nút thêm mới Popup.

Quý khách thao tác đúng màn hình sẽ hiển thị các mẫu có sẵn của giao diện để Quý khách tự do lựa chọn mẫu để điều chỉnh.

2. Tạo Widget Video và dán đường dẫn cho video popup.

Thực hiện bổ sung thêm Widget vào Popup

Tìm và chọn Widget Video tại mục Cơ Bản => Video

Thực hiện chọn theo thông tin Loại dữ liệu là Dữ liệu Widget và dữ liệu kết nối là đường dẫn Video. 

Kết quả của việc thêm Widget video sẽ như ảnh dưới đây. Tuy nhiên, Quý khách sẽ thực hiện thêm cầu hình kích thước chiều cao rộng và vị trí của Widget video. Hiện tại Video đang bị lệch khung popup nên sẽ cần được điều chỉnh. 

Quý khách thực hiện chọn Video sau đó mới vào bánh răng của Widget Cấu hình => Cấu hình chung và thêm thông tin như sau.

Giải thích về các lựa chọn và thông tin cấu hình trên. Trong đó:

• Tính năng Chiều cao co giãn theo nội dung cho phép Widget luôn được hiện thị trên dòng, Thành phần sẽ hiển thị theo kích thước chiều cao.
• Chiều rộng: 100% , để Widget lắp đầy toàn bộ khung của Popup cho dù ở bất kỳ màn hình thiết bị nào. 
• Chiều cao: 300px, Đối với Youtube thì kích thước tự động (auto) không phù hợp để cho popup vì khung mặc định quá nhỏ, sẽ yêu cầu 1 kích thước vừa phải cụ thể ví dụ như 300px, Quý khách không thích có thể tăng kích thước nhưng tối đa nên là 500px để Popup không bị tràn khi truy cập các thiết bị di động

Sau khi chọn theo thông tin trên Quý khách có thể đóng cửa sổ cấu hình chung. Các thông số được lưu tự động nên Quý khách không cần thao tác thêm. 

Sau đó, để thao tác không nhầm lẫn, Quý khách thực hiện click chọn vùng nền đen bên ngoài sau đó mới thực hiện chọn bánh răng (Cấu hình) => Cấu hình chung.

Thực hiện điều theo kích cỡ và vị trí tương ứng theo thông tin sau.

Giải thích về các lựa chọn và thông tin cấu hình trên. Trong đó:

• Chiều rộng: 500px, để Widget có khung cố định hiển thị
• Chiều cao: auto, do Widget video đã là khung có cố định kích thước popup nên mặc định popup sẽ tự động thực hiện co giãn dựa vào thông số Widget video.
• Vị trí khoảng cách trên từ trên màn hình mà thành phần được hiển thị. Ở đây 30px để popup có khoảng cách.

Sau khi đã điều chỉnh theo thông tin trên Quý khách có thể thực hiện Lưu lại phần tùy chỉnh của Popup. 

3. Điều chỉnh dữ liệu thành phần dữ liệu cho Widget.

Popup dữ liệu đã có, hiện sẽ cần thực hiện triển khai khung giao diện cho popup thể mỗi khi click vào mỗi phần tử dữ liệu sẽ tự động hiển thị được video được chọn. 

Trước tiên sẽ cần 1 khung giao diện tùy vào người thiết kế và vị trí sử dụng Quý khách sẽ cần Widget phù hợp để có thể đưa các dữ liệu trong quản trị ra ngoài giao diện. Cụ thể ở đây có 2 Widget phục vụ tính năng này là  tạo danh sách phân trang/slider

Trong khuôn khổ bài viết, việc tạo Widget danh sách phân trang/slider Quý khách có thể xem bài hướng dẫn: 

• Làm việc với Widget slider
• Làm việc với Widget Danh sách phân trang

Bài viết ở đây chỉ tạo một khung thông tin mẫu giao diện cơ bản. Trong đó Widget Danh sách phân trang sẽ gồm có 3 thành phần: 

1. Widget hình ảnh : dùng để lấy thông tin hình ảnh 
2. Widget tiêu đề : đùng để lấy thông tin tiêu đề 
3. Nút: Dùng để tạo sự kiện mở popup video

Khung giao diện hiện đã có, Quý khách sẽ chỉ cần gắn sự kiện cho nút bằng cách click vào Widget nút chọn Cấu hình => Cấu hình sự kiện.

Quý khách thực hiện thiết lập thông tin như sau.

Sự kiện của nút khi click vào là Mở Popup và chọn đối tượng tương tác là Popup đã tạo ở mục 1.

Sau đó Quý khách có thể tắt phần thiết lập này và ấn nút lưu trang ở góc phải màn kiểm tra lại trang.

Trên đây là hướng dẫn thực hiện tạo Video xem nhanh bằng popup. Trong trường hợp Quý khách không thực hiện được hoặc làm sai thông tin nào Quý khách có thể liên hệ với Kỹ thuật qua tổng đài 1900 9477

Quý khách hàng có thể tham khảo thêm các chương trình khuyến mãi hấp dẫn của P.A Việt Nam tại đây.