4.3. Thư viện

Tiện ích Thư viện cho phép bạn hiển thị một tập hợp hình ảnh theo cách hấp dẫn và có tổ chức trên landing page. Bạn có thể sử dụng gallery để giới thiệu danh mục sản phẩm, bộ sưu tập ảnh, hoặc các hình ảnh liên quan đến dịch vụ mà bạn cung cấp.

10.1. Thêm Gallery vào trang

Trong thanh sidebar, nhấp vào Tiện ích, sau đó chọn Thư viện
Nhấp và kéo tiện ích Thư viện vào trang landing page của bạn

10.2. Trình chỉnh sửa Gallery

10.2.1. Trình chỉnh sửa nội dung

Nhấp chuột vào tiện ích Gallery và chọn Content trên thanh thiết lập nhanh để mở trình chỉnh sửa nội dung Gallery

Tải ảnh lên từ máy tính

10.2.2. Trình chỉnh sửa thiết kế

Nhấp chuột vào tiện ích Thư viện và chọn Thiết trên thanh thiết lập nhanh để mở trình chỉnh sửa thiết kế Thư viện

Căn chỉnh: giúp bạn căn chỉnh Gallery theo khung chứa. Xem thêm thông tin, xem Căn chỉnh.
Kích thước: trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên trang landing page. Xem thêm thông tin, xem Kích thước.
Display on: cho phép bạn kiểm soát việc hiển thị Thư viện trên các thiết bị khác nhau bao gồm Desktop và Mobile
Thiết kế: cho phép bạn thay đổi màu nền và hiệu ứng đổ bóng của Gallery đã chọn. Xem thêm thông tin, xem Thiết kế.
Đường viền: cho phép bạn thêm và tùy chỉnh viền xung quanh của Gallery, bạn cũng có thể điều chỉnh độ bo tròn của viền. Xem thêm thông tin, xem Đường viền.
Hiển thị thư viện: Cấu hình các thiết lập chung cho gallery, bao gồm cách hiển thị hình ảnh, số lượng cột, khoảng cách giữa các hình ảnh, và các tùy chọn liên quan khác.

+ Grid: là một cách tổ chức nội dung theo dạng lưới, giúp sắp xếp các phần tử (như hình ảnh, văn bản, hoặc các widget) một cách ngăn nắp và dễ quản lý.

+ Masonry: là một kiểu bố trí lưới cho phép các phần tử (như hình ảnh) được sắp xếp theo cách không đồng đều để tối ưu hóa không gian và tạo ra một giao diện trực quan.

Spacing Between: Điều chỉnh khoảng cách giữa các phần tử

Image hover effect: Tạo hiệu ứng khi người dùng di chuột qua hình ảnh

none: Không có hiệu ứng khi di chuột qua hình ảnh

grow: Hình ảnh phóng to khi di chuột qua

shrink: Hình ảnh thu nhỏ khi di chuột qua

pulse: Hình ảnh nhấp nháy hoặc phóng to và thu nhỏ nhẹ nhàng

pulse grow: Hình ảnh nhấp nháy và phóng to khi di chuột qua

pulse shrink: Hình ảnh nhấp nháy và thu nhỏ khi di chuột qua

push: Hình ảnh đẩy ra khỏi vị trí ban đầu khi di chuột qua

pop: Hình ảnh nhảy ra ngoài khi di chuột qua

bounce in: Hình ảnh nhảy vào từ bên ngoài khi di chuột qua

bounce out: Hình ảnh nhảy ra ngoài khi di chuột qua