Cách sử dụng tiện ích thư viện ảnh – Gallery

1. Các tiện ích Widgets trong Elementor

Widgets hay các tiện ích trong ngữ cảnh của Elementor (và rộng hơn là WordPress) là các khối nội dung có thể tái sử dụng, được thiết kế để thực hiện một chức năng hoặc hiển thị một loại thông tin cụ thể.

Khi bạn nhấp vào một widget trong khu vực chỉnh sửa chính, các tùy chọn chỉnh sửa cho widget đó sẽ xuất hiện trong Bảng điều khiển (Panel) bên trái. Mỗi widget thường có 3 tab chính:

• Content (Nội dung): Tùy chỉnh nội dung của widget (ví dụ: văn bản của tiêu đề, nguồn ảnh, URL nút bấm, v.v.).
• Style (Kiểu hiển thị): Tùy chỉnh giao diện (ví dụ: màu sắc, phông chữ, kích thước, căn chỉnh, border, shadow, v.v.).
• Advanced (Nâng cao): Các tùy chọn nâng cao như:
  • Margin & Padding: Khoảng cách bên ngoài và bên trong phần tử.
  • Z-index: Thứ tự hiển thị của các lớp phần tử.
  • CSS ID & CSS Classes: Dùng để tùy chỉnh CSS bổ sung.
  • Motion Effects (Hiệu ứng chuyển động): Ví dụ: hiệu ứng cuộn (scroll effects), hiệu ứng vào (entrance animation).
  • Background: Màu nền, hình ảnh nền, gradient.
  • Border: Đường viền.
  • Positioning: Vị trí của phần tử (mặc định, tương đối, tuyệt đối, cố định).
  • Responsive: Ẩn/hiện phần tử trên các thiết bị khác nhau.
  • Custom CSS (Elementor Pro): Viết CSS tùy chỉnh.

2. Tiện ích thư viện ảnh là gì ?

Tiện ích Thư viện ảnh (Gallery) trong Elementor là một công cụ tuyệt vời để hiển thị bộ sưu tập hình ảnh trên trang web của bạn một cách hấp dẫn và có tổ chức. Nó cho phép bạn tạo các bố cục thư viện khác nhau và tùy chỉnh cách hình ảnh được hiển thị.

3. Các bước sử dụng tiện ích thư viện ảnh

I. Nội dung (Content)

Đây là nơi bạn chọn hình ảnh, thiết lập bố cục và các tùy chọn hiển thị cơ bản cho thư viện.

A. Cài đặt (Settings)

• Kiểu (Type): Chọn kiểu thư viện bạn muốn sử dụng. Các tùy chọn phổ biến có thể là:
  • Single (Đơn lẻ): Hiển thị các hình ảnh dưới dạng một lưới đơn giản.
  • Masonry: Bố cục hình ảnh theo dạng “khối xây” (gạch), các hình ảnh có chiều cao khác nhau sẽ được sắp xếp để tối ưu hóa không gian.

• Thêm hình ảnh (Add Images): Nhấp vào đây để mở thư viện media của WordPress và chọn các hình ảnh bạn muốn thêm vào thư viện. Sau khi chọn, bạn có thể kéo và sắp xếp lại thứ tự của chúng.
• Order By (Sắp xếp theo): Chọn cách sắp xếp các hình ảnh trong thư viện (Mặc định, Tên, ID, Ngẫu nhiên, v.v.).
• Lazy Load: Bật/tắt tải chậm hình ảnh để cải thiện hiệu suất trang web.

B. Layout (Bố cục)

• Columns (Cột): Chọn số cột bạn muốn hiển thị hình ảnh (ví dụ: 1, 2, 3, 4).
• Khoảng cách (Spacing): Điều chỉnh khoảng cách giữa các hình ảnh trong thư viện (Mặc định, Tùy chỉnh).
• Link To (Liên kết đến): Khi nhấp vào hình ảnh, nó sẽ dẫn đến đâu?
  • Tập tin Media (Media File): Mở hình ảnh gốc (thường là trong Lightbox).
  • URL Tùy chỉnh (Custom URL): Dẫn đến một liên kết tùy chỉnh bạn đã đặt cho từng hình ảnh.
  • Không (None): Không có liên kết.
• Lightbox: Gạt nút sang phải để bật hiệu ứng Lightbox khi nhấp vào hình ảnh, cho phép người dùng xem ảnh lớn trong một cửa sổ bật lên.
• Aspect Ratio (Tỷ lệ khung hình): Đặt tỷ lệ khung hình cho tất cả các hình ảnh để đảm bảo sự đồng nhất (ví dụ: 1:1, 4:3, 16:9).
• Độ phân giải hình ảnh (Image Resolution): Chọn kích thước của hình ảnh được tải (ví dụ: Medium – 300 x 300, Large, Full).

C. Overlay (Lớp phủ)

• Title (Tiêu đề): Chọn loại tiêu đề sẽ hiển thị khi di chuột qua hình ảnh (Tiêu đề, Chú thích, v.v.).
• Description (Mô tả): Chọn loại mô tả sẽ hiển thị khi di chuột qua hình ảnh.
• Animation (Hoạt ảnh): Chọn hiệu ứng hoạt ảnh cho lớp phủ khi di chuột qua.

II. Kiểu hiển thị (Style)

Đây là nơi bạn tùy chỉnh giao diện của thư viện ảnh.

A. Images (Hình ảnh)

• Khoảng cách (Spacing): Tùy chỉnh lại khoảng cách nếu bạn đã chọn “Custom” ở phần Nội dung.
• Border Type (Loại đường viền): Thêm đường viền cho mỗi hình ảnh.
• Border Width (Độ dày đường viền): Độ dày của đường viền.
• Border Color (Màu đường viền): Màu của đường viền.
• Border Radius (Bán kính bo tròn): Bo tròn góc của hình ảnh.
• Box Shadow (Bóng đổ): Thêm bóng đổ cho hình ảnh.

B. Overlay (Lớp phủ)

• Background Color (Màu nền): Màu nền của lớp phủ khi di chuột qua.
• Text Color (Màu văn bản): Màu chữ của tiêu đề và mô tả trên lớp phủ.
• Typography (Phông chữ): Tùy chỉnh phông chữ cho tiêu đề và mô tả trên lớp phủ.

III. Nâng cao (Advanced)

Tab này cung cấp các tùy chọn nâng cao hơn để kiểm soát bố cục, hiệu ứng và khả năng đáp ứng của toàn bộ tiện ích Thư viện ảnh.

1. Bố cục (Layout):

• Margin (Lề): Khoảng cách bên ngoài tiện ích Thư viện ảnh với các phần tử khác xung quanh.
• Padding (Khoảng đệm): Khoảng đệm bên trong tiện ích.
• Width (Chiều rộng): Đặt chiều rộng của toàn bộ tiện ích Thư viện ảnh.
• Position (Vị trí): Mặc định, Relative, Absolute, Fixed (các tùy chọn định vị nâng cao).
• Z-index: Xác định thứ tự xếp lớp của tiện ích nếu nó chồng lên các phần tử khác.

2. CSS ID & CSS Classes:

• Cho phép bạn thêm ID hoặc class CSS tùy chỉnh để tác động đến tiện ích bằng mã CSS riêng.

3. Hiệu ứng chuyển động (Motion Effects):

• Entrance Animation (Hoạt ảnh khi vào): Chọn hiệu ứng xuất hiện cho toàn bộ tiện ích Thư viện ảnh khi trang được tải.
• Hover Animation (Hoạt ảnh di chuột qua): Hiệu ứng chuyển động cho toàn bộ tiện ích khi di chuột qua.
• Scrolling Effects (Hiệu ứng cuộn): Tạo các hiệu ứng khi người dùng cuộn trang.
• Mouse Effects (Hiệu ứng chuột): Tạo các hiệu ứng khi di chuột qua tiện ích.

4. Nền (Background):

• Bạn có thể thêm màu nền, hình nền hoặc gradient cho toàn bộ vùng chứa tiện ích Thư viện ảnh.

5. Đường viền (Border):

• Tùy chỉnh kiểu đường viền, độ dày, màu sắc và bán kính bo tròn cho toàn bộ vùng chứa tiện ích.

6. Mặt nạ (Mask):

• Áp dụng một hình dạng mặt nạ để tạo hiệu ứng đặc biệt cho tiện ích.

7. Khả năng đáp ứng (Responsive):

• Ẩn trên máy tính để bàn (Hide On Desktop), Ẩn trên máy tính bảng (Hide On Tablet), Ẩn trên thiết bị di động (Hide On Mobile): Cho phép bạn ẩn tiện ích Thư viện ảnh trên các loại thiết bị khác nhau nếu cần.

8. Thuộc tính (Attributes):

• Cho phép bạn thêm các thuộc tính HTML tùy chỉnh cho thẻ tiện ích.

9. CSS tùy chỉnh (Custom CSS) (chỉ có trong Elementor Pro):

• Cho phép bạn viết mã CSS trực tiếp để tùy chỉnh giao diện và hành vi của tiện ích một cách nâng cao.