nexsoft.vnHiển thị ảnh trước và sau trên WordPress mang lại khả năng so sánh và thể hiện sự khác biệt. Điều này giúp tạo thị hiếu về sản phẩm hoặc dịch vụ, cũng như thúc đẩy tương tác với nội dung trang web. Trong bài viết này, Vietnix sẽ hướng dẫn cách hiển thị ảnh trước và sau trên WordPress với hiệu ứng trượt vào trang WordPress.
Tại sao nên hiển thị ảnh trước và sau trên WordPress?
Một bức ảnh trước và sau là một hình ảnh tương tác thường thể hiện một loại thay đổi nào đó. Khách truy cập có thể sử dụng button trượt để chuyển đổi giữa các hình ảnh khác nhau, tạo được sự tương tác giữa người dùng và hình ảnh.
Nếu bạn điều hành một website bán hàng online bằng cách sử dụng một plugin như WooCommerce, thì một bức ảnh trước và sau có thể thể hiện tác động của sản phẩm hoặc dịch vụ.
Bạn chỉ cần hiển thị một ảnh ‘trước‘ có thông tin liên hệ mà khách có thể liên hệ và một ảnh ‘sau‘ thật hấp dẫn. Điều này sẽ khiến người mua muốn mua sản phẩm đưa họ từ trạng thái ‘trước‘ đến trạng thái ‘sau‘.
Nếu bạn là một nhà affiliate, việc hiển thị ảnh trước và sau độc đáo trên trang web là một cách tuyệt vời để quảng cáo liên kết và có thêm nhiều giao dịch hơn.
Ảnh trước và sau cũng có thể khuyến khích khách truy cập tương tác với nội dung. Kéo button trượt để xem ảnh ‘sau‘ là một cách dễ dàng để có thêm sự tương tác, điều này có thể giữ khách truy cập trên trang web lâu hơn, điều này cũng có thể giúp tối ưu tỷ lệ thoát trang.
Cách 1. Hiển thị ảnh trước và sau bằng plugin Ultimate Before After Image Slider & Gallery (BEA) miễn phí
Hiển thị ảnh trước và sau là một cách hiệu quả để so sánh sự thay đổi giữa hai trạng thái khác nhau. Plugin Ultimate Before After Image Slider & Gallery (BEA) cung cấp một cách đơn giản và linh hoạt để thực hiện điều này. Bạn có thể sử dụng plugin này để tạo bộ sưu tập hình ảnh trượt ngang hoặc dọc, và tùy chỉnh hình ảnh bằng các labels và màu sắc khác nhau.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Ultimate Before After Image Slider & Gallery (BEA).
Sau khi kích hoạt, vào mục Before and After Slider > Add New trong Dashboard. Để bắt đầu, nhập tên cho button trượt hình ảnh.
Các bước trên đã xong, bạn có thể thêm ảnh ‘trước‘ bằng cách cuộn xuống phần ‘Before Image‘. Ở đây, nhấp vào ‘Add or Upload Image‘, sau đó chọn một hình ảnh từ thư viện phương tiện WordPress hoặc tải lên một file mới từ máy tính.
Để giúp các công cụ tìm kiếm hiểu hình ảnh này và hiển thị cho chính xác, việc thêm văn bản alt text là ý tưởng tốt. Để thực hiện điều này, chỉ cần gõ vào trường ‘Image Alt‘. Để biết thêm thông tin về văn bản mô tả hình ảnh, bạn có thể xem hướng dẫn của Vietnix cho người mới bắt đầu về SEO hình ảnh.
Sau khi hoàn tất việc trên, cuộn xuống phần ‘After Image‘. Bây giờ bạn có thể thêm ảnh ‘sau‘ bằng cách thực hiện cùng quy trình đã hướng dẫn ở trên. Đừng quên thêm alt text, vì quan trọng cho SEO trên WordPress.
Bạn cũng có thể hiển thị một số văn bản dưới ảnh, bằng cách thêm tiêu đề và mô tả.
Điều này cũng là một cách dễ dàng để thêm một số ngữ cảnh cho hình ảnh. Để thêm văn bản, chỉ cần gõ vào các trường ‘Slider Title‘ hoặc ‘Slider Description‘.
Bạn cũng có thể thêm một URL ‘read more‘, có thể link đến bất kỳ bài viết hoặc trang nào trên trang web WordPress, hoặc thậm chí là một trang web bên ngoài.
Liên kết này sẽ xuất hiện dưới ảnh trước/sau, và cũng dưới bất kỳ tiêu đề hoặc mô tả nào của button trượt mà bạn đang sử dụng.
Để thêm link, bạn nhập địa chỉ đích vào ô ‘Read More Link‘. Sau đó, bạn có thể quyết định liệu có mở liên kết trong cùng một tab hay trong một tab mới bằng cách sử dụng menu ‘Read More Link Target‘.
Nếu bạn đang liên kết đến một trang web khác, Vietnix khuyên nên chọn ‘New tab‘ để không đẩy khách truy cập ra khỏi blog WordPress.
Sau khi hoàn tất, bạn có thể tùy chỉnh button trượt dọc hay ngang bằng cách nhấp vào một trong các hình ảnh thu nhỏ trong phần ‘Orientation Style‘.
Sau đó, cuộn lên đầu màn hình và nhấp vào ‘Options‘. Ở đây, bạn sẽ thấy ‘Default offset‘ được đặt là 0.5. Điều này có nghĩa là khi khách truy cập tải trang lần đầu, họ sẽ thấy một nửa của ảnh ‘trước‘.
Nếu muốn hiển thị nhiều ảnh ‘trước‘ hơn, bạn có thể nhập một con số lớn hơn như 0.6, 0.7 hoặc cao hơn.
Nếu bạn muốn hiển thị toàn bộ ảnh ‘trước‘, hãy nhập 1. Điều này sẽ đặt button trượt ở phía trên hoặc bên phải của ảnh ‘trước‘, như có thể thấy trong hình ảnh sau đây.
Mặc định, plugin hiển thị labels ‘trước‘ và ‘sau‘ khi khách truy cập đưa con trỏ chuột lên hình ảnh.
Để thực hiện điều này, hãy đơn giản là gõ vào các trường ‘Before Label‘ và ‘After Label‘.
Mặc định, khách truy cập sẽ di chuyển button trượt bằng cách kéo và thả. Một số người có thể thấy điều này khó khăn, đặc biệt nếu họ gặp vấn đề như đang sử dụng các thiết bị nhỏ như điện thoại thông minh hoặc máy tính bảng. Chính vì vậy, bạn có thể thay đổi cách khách truy cập di chuyển button trượt.
Nếu bạn chọn button ‘Yes‘ bên cạnh ‘Move slider on mouse hover‘, khách truy cập có thể di chuyển button trượt chỉ bằng cách di chuột qua hình ảnh.
Nếu bạn chọn button ‘Yes‘ bên cạnh ‘Click to move‘, khách truy cập có thể nhấp bất kỳ vị trí nào trên hình ảnh để di chuyển button trượt đến điểm đó.
Các thiết lập này có thể giúp tương tác với hình ảnh trước/sau dễ dàng hơn, nhưng thường thì không phải là cách mà button trượt hoạt động tốt nhất. Vì vậy, Vietnix khuyến nghị bạn nên sử dụng các thiết lập này cẩn thận.
Tiếp theo, nhấp vào tab ‘Style‘.
Ở đây, bạn có thể thay đổi màu sắc sử dụng cho các labels, backgrounds, headings, descriptions và button ‘read more‘. Điều này có thể giúp hình ảnh trước/sau hòa nhập với theme WordPress hoặc thậm chí nổi bật so với thiết kế website. Sau khi đã hoàn tất các thiết lập, hãy nhấp vào button ‘Publish‘.
Điều này tạo ra một shortcode cho phép bạn thêm hình ảnh trước/sau và button trượt vào bất kỳ trang, bài viết hoặc khu vực sẵn sàng sử dụng widget.
Để biết thêm thông tin về cách đặt shortcode, bạn có thể xem hướng dẫn của Vietnix về cách tạo shortcode trong WordPress.
Sau khi thêm shortcode vào trang web, bạn chỉ cần nhấp vào button ‘Publish‘ hoặc ‘Update‘ để đưa hình ảnh trước/sau và hiệu ứng button trượt lên trang web của mình.
Ngoài cách hiển thị ảnh trước và sau bằng plugin Ultimate Before After Image Slider & Gallery (BEA), bạn có thể tham khảo thêm:
Cách 2. cách hiển thị ảnh trước và sau bằng plugin SeedProd
Nếu bạn chỉ muốn thêm ảnh trước và sau vào một trang hoặc bài viết, thì plugin BEA có thể là một lựa chọn tốt. Tuy nhiên, nếu đang sử dụng hình ảnh để quảng cáo sản phẩm, dịch vụ hoặc doanh nghiệp, Vietnix khuyên nên sử dụng SeedProd.
SeedProd là page builder WordPress kéo và thả tốt nhất, đi kèm với hơn 180 mẫu đã sẵn có mà bạn có thể sử dụng để tạo các landing page, thiết kế bán hàng và nhiều hơn nữa.
SeedProd cũng có một block ‘Before After Toggle‘ sẵn có mà bạn có thể sử dụng để tạo ra các hình ảnh trước và sau tuyệt đẹp mà người dùng có thể tương tác.
Chỉ cần kéo block từ menu bên trái và sau đó thả vào bất kỳ thiết kế trang nào bạn đang làm việc, bao gồm cả các trang bán hàng.
Nếu bạn đang sử dụng WooCommerce để bán sản phẩm của mình, thì SeedProd tích hợp với WooCommerce và đi kèm với các block thương mại điện tử đặc biệt. Điều này sẽ khá tốt nếu bạn dự định sử dụng hình ảnh trước và sau để quảng cáo sản phẩm WooCommerce của mình
Để biết thêm thông tin về cách sử dụng SeedProd, bạn có thể xem hướng dẫn:
Sau khi tạo trang, thêm một hình ảnh trước và sau vào thiết kế là điều dễ dàng. Trong trình tạo trang SeedProd, đơn giản tìm block ‘Before After Toggle‘.
Sau đó, bạn có thể kéo và thả block này bất kỳ đâu trên thiết kế để thêm vào bố cục trang. Sau khi hoàn thành, chọn block ‘Before After Toggle‘, menu bên trái sẽ cập nhật để hiển thị tất cả các thiết lập để có thể sử dụng để tạo hình ảnh trước và sau
Đầu tiên, bạn thêm hình ảnh muốn sử dụng làm ảnh trước. Ở phần ‘Before Image‘, nhấp vào ‘Use Your Own Image‘ hoặc ‘Use a Stock Image‘ và chọn hình ảnh muốn sử dụng. Mặc định, SeedProd hiển thị một labels ‘Trước‘ phía trên hình ảnh này. Tuy nhiên, bạn có thể thay đổi nội dung mô tả chi tiết hơn bằng cách gõ vào ô ‘Before Label‘.
Sau khi hoàn tất, cuộn xuống phần ‘After Image‘. Bây giờ bạn có thể thêm một hình ảnh và tùy chỉnh labels mặc định bằng cách thực hiện cùng quy trình đã mô tả ở trên.
SeedProd có thể thêm hiệu ứng trượt dọc hoặc ngang. Để chuyển đổi giữa hai kiểu này, cuộn xuống phần ‘Slider Orientation‘, sau đó nhấp vào ‘Column‘ hoặc ‘Row‘.
Theo mặc định, bạn có thể chuyển đổi giữa hình ảnh trước và sau bằng cách kéo button trượt. Tuy nhiên, việc di chuyển nút trượt bằng việc di chuột qua hình ảnh có thể tiện lợi hơn. Để trải nghiệm chức năng này, hãy kích hoạt chế độ ‘Move on Hover‘ ở menu phía bên trái.
Đồng thời, bạn cũng có thể tăng độ nổi bật cho hình ảnh bằng cách thêm một lớp phủ màu, giúp phù hợp hoặc tạo điểm nhấn so với nền. Để thay đổi màu sắc, chỉ cần nhấp vào mục ‘Overlay Color‘ và chọn trong bảng màu.
Sau khi hoàn tất, bạn có thể tùy chỉnh button trượt để kiểm soát cách hiển thị hình ảnh trước và sau trong ‘Comparison Handle‘. Theo mặc định, SeedProd sẽ hiển thị một nửa hình ảnh trước và một nửa hình ảnh sau. Để thay đổi điều này, hãy kéo thanh trượt ‘Handle Initial Offset‘.
Để hiển thị ít hơn của hình ảnh ‘trước‘, kéo button trượt về bên trái để hiển thị một con số thấp hơn. Để hiển thị nhiều hơn của hình ảnh ‘trước‘, kéo button trượt sang phải,và tăng số cho phù hợp. Tiếp theo, bạn có thể thay đổi màu sắc của button trượt bằng các cài đặt ‘Handle Color‘.
Bạn cũng có thể làm cho button trượt dày hơn hoặc mỏng hơn bằng cài đặt ‘Handle Thickness‘.
Khi đã hài lòng với button trượt, hãy điều chỉnh hình tròn theo ý muốn. Bạn có thể tăng hoặc giảm kích thước bằng cách điều chỉnh thanh trượt ‘Circle Width‘, hoặc tạo góc nhọn hoặc cong bằng cách điều chỉnh ‘Circle Radius‘.
Khi đã hài lòng với hình tròn, bạn có thể thay đổi kích thước của tam giác bên trong hình tròn đó.
Để thực hiện thay đổi này, kéo button trượt ‘Triangle Size‘ cho đến khi bạn thầy phù hợp.
Khi đã hoàn tất trên trang SeedProd, bạn có thể tiếp tục tùy chỉnh nội dung. Khi đã hài lòng với thiết kế, hãy nhấp vào mũi tên bên cạnh nút “Save” và chọn “Publish“. Bây giờ, nếu truy cập trang web, bạn sẽ thấy thiết kế trang mới của mình đang hoạt động.
Nếu bạn đang quyết định chọn một dịch vụ hosting hàng đầu để xây dựng trang web hoặc blog cá nhân trên nền tảng WordPress, thì dịch vụ WordPress Hosting tại Vietnix là sự lựa chọn không thể bỏ qua. Đây là giải pháp chuyên biệt và tối ưu hoá cho các trang web dựa trên mã nguồn WordPress. Điều này đồng nghĩa với việc bạn sẽ trải nghiệm tốc độ và hiệu suất tối ưu, các tính năng nổi bật khi sử dụng. Chẳng hạn như:
- Tận hưởng tốc độ tải trang cực nhanh dưới 1 giây nhờ dùng ổ cứng NVMe và công nghệ LiteSpeed Enterprise.
- Hỗ trợ chuyên sâu và tư vấn tối ưu hóa tốc độ website từ các chuyên gia WordPress, sẵn sàng hỗ trợ 24/7.
- An ninh dữ liệu được đảm bảo tối đa với hệ thống sao lưu tự động 4 lần mỗi ngày, cho phép khôi phục dữ liệu nhanh chóng theo yêu cầu.
- Sự ổn định vượt trội của website được bảo đảm nhờ hạ tầng hiện đại và công nghệ Firewall anti DDoS toàn diện do chính Vietnix phát triển.
- Tạo website WordPress dễ dàng chỉ với một cú click chuột, nhờ công cụ WordPress Toolkit tích hợp sẵn.
- Nhận ngay bộ sưu tập theme và plugin WordPress bản quyền, bao gồm WP Rocket, Rank Math SEO Pro, Elementor Pro, WP Astra Growth Bundle, Divi, và nhiều hơn nữa.
Liên hệ với Vietnix để được tư vấn chi tiết về dịch vụ:
- Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
- Hotline: 1800 1093.
- Email: sales@vietnix.com.vn.
Lời kết
Vietnix hy vọng bài viết này sẽ giúp cho bạn hiểu được cách thêm hình ảnh trước và sau vào trang web WordPress của bạn với hiệu ứng trượt. Bạn cũng có thể xem qua hướng dẫn của vietnix về các plugin xác minh xã hội tốt nhất cho WordPress và cách chọn phần mềm thiết kế web tốt nhất. Chúc bạn thành công.
