Friday , October 4 2024

Hướng dẫn sử dụng Image Gallery trong Visual Composer

Trong Visual Composer ngoài Image Carousel chúng ta còn một phần tử mạnh mẽ hơn đó chính là Image GalleryỞ bài trước tôi đã hướng dẫn cho bạn biết cách sử dụng Image Carousel trong Visual Composer, với Image Gallery cách dùng cũng tương tự Image Carousel nhưng cũng có chút khác biệt, tôi sẽ hướng dẫn chi tiết cách sử dụng Image Gallery trong Visual Composer như sau:

Để thêm một phần tử Image Gallery bạn chỉ cần nhấn vào dấu + ở giữa dòng/cột, dấu + lớn thêm ROW mới hoặc dấu cộng nhỏ ở trên/dưới mỗi cột

add single image

Sau đó bạn tìm và chọn phần tử Image Gallery

image gallery

Tiếp theo là màn hình cài đặt của Image Gallery hiện ra, bạn bỏ qua Widget title, đến phần Gallery type có 4 kiểu hiển thị cho bạn chọn (tôi hay dùng Nivo Slider):

Flex slider fade: Gallery hiển thị kiểu slide chuyển động hiệu ứng fade, sử dụng jquery flex slider.
Flex slider slide: Gallery hiển thị kiểu slide chuyển động trượt ngang, sử dụng jquery flex slider.
Nivo slider: Gallery hiển thị kiểu slide chuyển động với hiệu ứng ngẫu nhiên, sử dụng jquery nivo slider.
Image Grid: Gallery hiển thị dạng ô theo từng dòng và cột.

Auto rotate là thời gian chuyển động 1 slide, mặc định là 3 giây 1 lần chuyển.

Image Source bạn chọn nguồn ảnh:

Media Library: Là chọn hình ảnh có sẵn từ thư viện, bạn có thể upload ảnh từ máy tính của bạn lên web.
External link: Là điền URL ảnh từ một nguồn web khác.

Khi chọn Image Source là Media library thì bạn click vào Images ngay bên dưới (có hình dấu + xanh) để chọn nhiều hình ảnh từ thư viện.

Image size có nhiều kích thước khác nhau như “thumbnail”, “medium”, “large”, “full” thậm chí bạn có thể điền kích thước tùy chỉnh như 200×100Bạn điền là full nhé (viết thường nhé).

Phần On click action là sự kiện khi bạn click vào ảnh:

None: Là không làm gì cả.
Link to large image: Là click vào ảnh thì bạn sẽ xem được ảnh có kích thước lớn hơn.
Open prettyPhoto: Là click vào ảnh thì bật một popup ở giữa màn hình để xem ảnh lớn.
Open custom link: Là khi click vào ảnh thì chuyển hướng tới 1 URL khác, mỗi URL trên 1 dòng.

image gallery settings general

Và thuộc tính cuối cùng là Extra class name bạn có thể điền class do bạn tự viết hoặc nhúng css trong phần PPO Settings -> Theme Options

Chuyển sang tab Design Options bạn sẽ thấy không khác gì những phần trước đã học, ở đây bạn có thể thiết lập các thuộc tính tương tự như Column Settings, Row Settings, Text Block Settings…

image gallery settings

Và cuối cùng là nhấn nút Save Changes  để lưu lại các thuộc tính cài đặt cho Image Carousel sau đó lưu trang rồi ra ngoài xem kết quả

image gallery display

Bây giờ thì bạn hãy thực hành và cho tôi nhìn thấy kết quả của bạn đi nào. Chúc bạn thành công!

About Ngo Thang IT

Check Also

Hướng dẫn tạo mã CSR và Private Key trong PHP

Để tạo được chứng chỉ SSL chúng ta cần có CSR và Private Key, trong …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Đăng Ký Nhận Tin Qua Email

Nhận thông tin bổ ích về WordPress, Hosting, Thủ thuật website, Download miễn phí....và các phần quà hấp dẫn qua email.

* là bắt buộc