VietNetwork.Vn

Bạn có muốn hiển thị ảnh trước và sau trong WordPress không?

Ảnh trước và sau cho phép bạn hiển thị so sánh cạnh nhau của hai hình ảnh với những khác biệt nhỏ. Điều này là hoàn hảo để hiển thị tác động của các sản phẩm và dịch vụ của bạn hoặc đơn giản là khuyến khích mọi người tương tác với nội dung của bạn.

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách thêm ảnh trước/sau vào trang web WordPress của bạn bằng hiệu ứng trượt.

Tại sao hiển thị ảnh trước và sau trong WordPress (với hiệu ứng trang trình bày)?

Hình ảnh trước và sau là một hình ảnh tương tác thường hiển thị một số loại thay đổi.

Khách truy cập có thể sử dụng thanh trượt để chuyển đổi giữa các 'phiên bản' khác nhau của hình ảnh theo cách hấp dẫn và tương tác.


Nếu bạn điều hành một cửa hàng trực tuyến bằng plugin chẳng hạn như WooCommerce thì ảnh trước và sau có thể cho thấy tác dụng của sản phẩm hoặc dịch vụ của bạn.

Bạn chỉ cần hiển thị một bức ảnh 'trước' mà khách hàng có thể liên tưởng đến và một bức ảnh 'sau' mong muốn. Điều này sẽ khiến người mua sắm muốn mua thứ đưa họ từ trạng thái 'trước' sang trạng thái 'sau'.

Nếu bạn là một nhà tiếp thị liên kết, thì việc hiển thị các bức ảnh trước và sau đầy sức thuyết phục trên trang web của bạn là một cách tuyệt vời để quảng bá các liên kết liên kết của bạn và nhận được nhiều doanh thu 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 của bạn. Kéo thanh trượt để hiển thị ảnh 'sau' là một cách dễ dàng để thu hút nhiều tương tác hơn, điều này có thể giữ chân khách truy cập trên trang web của bạn lâu hơn. Điều này cũng có thể giúp tăng số lần xem trang của bạn và giảm tỷ lệ thoát trong WordPress.

Như đã nói, hãy xem cách bạn có thể tạo ảnh trước và sau trong WordPress bằng hiệu ứng trang trình bày. Chỉ cần sử dụng các liên kết nhanh bên dưới để chuyển thẳng đến phương pháp bạn muốn sử dụng.

Phương pháp 1. Cách hiển thị ảnh trước và sau bằng plugin miễn phí (Dễ dàng)

Cách dễ nhất để tạo ảnh trước và sau ảnh là sử dụng Bộ sưu tập & Thanh trượt Ảnh Trước Sau Cuối cùng (BEA).

Plugin BEA cho phép bạn tạo các thanh trượt ngang và dọc, đồng thời tùy chỉnh hình ảnh với các nhãn 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). Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy đi tới Thanh trượt Trước và Sau »Thêm Mới trong bảng điều khiển của bạn.

Để bắt đầu, hãy nhập tên cho thanh trượt hình ảnh. Đây chỉ là để bạn tham khảo nên bạn có thể sử dụng bất cứ thứ gì có thể giúp bạn xác định nó.


Khi đã xong, bạn có thể thêm hình ảnh 'trước' bằng cách cuộn đến phần 'Hình ảnh trước'.

Tại đây, hãy nhấp vào 'Thêm hoặc Tải lên Hình ảnh', sau đó chọn ảnh từ thư viện phương tiện WordPress hoặc tải tệp mới lên từ máy tính của bạn.


Để giúp các công cụ tìm kiếm hiểu hình ảnh này và hiển thị hình ảnh đó cho đúng người, bạn nên thêm một số văn bản thay thế hình ảnh. Để thực hiện việc này, chỉ cần nhập vào trường 'Image Alt'.

Để biết thêm thông tin về văn bản thay thế, vui lòng xem hướng dẫn dành cho người mới bắt đầu về SEO hình ảnh của chúng tôi.


Khi đã xong, hãy cuộn đến phần 'Sau hình ảnh'.

Giờ đây, bạn có thể thêm hình ảnh 'sau' bằng cách thực hiện theo quy trình tương tự được mô tả ở trên. Đừng quên thêm một số văn bản thay thế vào hình ảnh này, vì nó rất quan trọng đối với WordPress SEO.


Bạn cũng có thể hiển thị một số văn bản bên dưới hình ảnh bằng cách thêm tiêu đề và mô tả.

Ví dụ: bạn có thể khuyến khích khách truy cập tương tác với thanh trượt. Điều này đặc biệt quan trọng đối với những khách truy cập có thể chưa bao giờ xem ảnh trước và sau trước đây.


Đây cũng là một cách dễ dàng để thêm một số bối cảnh vào hình ảnh.

Để thêm một số văn bản, chỉ cần nhập vào trường 'Tiêu đề thanh trượt' hoặc 'Mô tả thanh trượt'.


Bạn cũng có thể thêm URL 'Đọc thêm', URL này có thể liên kết đến bất kỳ bài đăng hoặc trang nào trên trang web WordPress của bạn hoặc thậm chí là trang web bên ngoài. Ví dụ: bạn có thể đưa khách truy cập đến trang nơi họ có thể mua sản phẩm có trong hình ảnh thanh trượt.

Liên kết này sẽ xuất hiện bên dưới hình ảnh trước/sau cũng như bên dưới bất kỳ tiêu đề hoặc mô tả thanh trượt nào bạn đang sử dụng.


Để thêm một liên kết, hãy nhập đích vào trường 'Đọc thêm liên kết'.

Sau đó, bạn có thể quyết định 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 thả xuống 'Đọc thêm mục tiêu liên kết'.


Nếu bạn đang liên kết đến một trang web khác thì chúng tôi khuyên bạn nên chọn 'Tab mới' để bạn không làm khách truy cập rời khỏi blog WordPress của mình.

Khi đã xong, bạn có thể chọn tạo thanh trượt dọc hay ngang bằng cách nhấp vào một trong các hình thu nhỏ trong phần 'Kiểu định hướng'.


Sau đó, cuộn lên đầu màn hình và nhấp vào 'Tùy chọn'.

Tại đây, bạn sẽ thấy 'Default offset' được đặt là 0,5. Điều này có nghĩa là khách truy cập nhìn thấy một nửa hình ảnh 'trước' khi trang tải lần đầu tiên.


Nếu bạn muốn hiển thị thêm hình ảnh phía trước, hãy nhập một số lớn hơn, chẳng hạn như 0,6, 0,7 hoặc cao hơn.

Nếu bạn muốn hiển thị toàn bộ hình ảnh phía trước, hãy nhập 1. Thao tác này sẽ đặt thanh trượt ở trên cùng hoặc bên phải của hình ảnh phía trước, như bạn có thể thấy trong hình ảnh sau.


Theo mặc định, plugin hiển thị nhãn 'Trước' và 'Sau' khi khách truy cập di chuột qua hình ảnh.

Bạn có thể muốn thay thế các nhãn này bằng một cái gì đó mang tính mô tả hơn.


Để thực hiện việc này, chỉ cần tiếp tục và nhập vào các trường 'Trước Nhãn' và 'Sau Nhãn'.

Theo mặc định, khách truy cập sẽ di chuyển thanh 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 đề về di chuyển hoặc họ đang sử dụng các thiết bị nhỏ hơn như điện thoại thông minh hoặc máy tính bảng.

Như đã nói, bạn có thể muốn thay đổi cách khách truy cập di chuyển thanh trượt.

Nếu bạn chọn nút 'Có' bên cạnh 'Di chuyển thanh trượt khi di chuột, thì khách truy cập có thể di chuyển thanh trượt chỉ bằng cách di chuột qua hình ảnh.


Nếu bạn chọn nút 'Có' bên cạnh 'Nhấp để di chuyển' thì khách truy cập có thể nhấp vào bất kỳ đâu trên hình ảnh để di chuyển thanh trượt đến điểm đó.

Các cài đặt 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 không phải là cách thanh trượt hoạt động. Với ý nghĩ đó, chúng tôi khuyên bạn nên sử dụng các cài đặt này một cách cẩn thận.

Tiếp theo, nhấp vào tab 'Phong cách'.


Tại đây, bạn có thể thay đổi màu sắc được sử dụng cho các nhãn, hình nền, tiêu đề, mô tả và nút đọc thêm khác nhau. Điều này có thể giúp hình ảnh trước/sau hòa hợp với chủ đề WordPress của bạn hoặc thậm chí nổi bật so với phần còn lại của thiết kế trang web của bạn.

Bạn cũng có thể thay đổi kích thước phông chữ và căn chỉnh văn bản.

Khi bạn hài lòng với cách thiết lập thanh trượt, hãy nhấp vào nút 'Xuất bản'.


Thao tác này tạo ra một mã ngắn cho phép bạn thêm hình ảnh trước/sau và thanh trượt vào bất kỳ trang, bài đăng hoặc khu vực sẵn sàng cho tiện ích nào.

Để biết thêm thông tin về cách đặt mã ngắn, vui lòng xem hướng dẫn của chúng tôi về cách thêm mã ngắn trong WordPress.


Sau khi thêm mã ngắn vào trang web của bạn, chỉ cần nhấp vào nút 'Xuất bản' hoặc 'Cập nhật' để làm cho hình ảnh trước/sau và hiệu ứng thanh trượt hoạt động.

Phương pháp 2. Cách hiển thị ảnh trước và sau bằng SeedProd (Nâng cao)

Nếu bạn chỉ muốn thêm hình ảnh trước và sau vào một trang hoặc bài đăng, thì plugin BEA có thể là một lựa chọn tốt. Tuy nhiên, nếu bạn đang sử dụng hình ảnh để quảng bá sản phẩm, dịch vụ hoặc doanh nghiệp thì chúng tôi khuyên bạn nên sử dụng SeedProd.

SeedProd là trình tạo trang WordPress kéo và thả tốt nhất. Nó đi kèm với hơn 180 mẫu tạo sẵn mà bạn có thể sử dụng để tạo trang đích có tỷ lệ chuyển đổi cao, thiết kế bán hàng, v.v.


Nó cũng có khối 'Trước sau khi chuyển đổi' được tạo sẵn mà bạn có thể sử dụng để tạo các hình ảnh trước và sau đẹp mắt mà người dùng của bạn có thể tương tác.

Chỉ cần kéo khối từ trình đơn bên trái, sau đó thả khối đó vào bất kỳ thiết kế trang nào mà bạn có thể đang làm việc trên đó, bao gồm 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 sẽ tích hợp với WooCommerce và thậm chí đi kèm với các khối Thương mại điện tử đặc biệt. Điều này là hoàn hảo nếu bạn định sử dụng hình ảnh trước và sau để quảng cáo các sản phẩm WooCommerce của mình.

Lưu ý: Có một phiên bản SeedProd miễn phí cho phép bạn tạo các trang tùy chỉnh bất kể ngân sách của bạn là bao nhiêu. Tuy nhiên, chúng tôi sẽ sử dụng phiên bản cao cấp vì nó đi kèm với khối Before After Toggle. Nó cũng tích hợp với nhiều dịch vụ tiếp thị qua email tốt nhất mà bạn có thể đã sử dụng trên trang web của mình.

Để biết thông tin về cách sử dụng SeedProd, vui lòng xem hướng dẫn của chúng tôi về  cách tạo trang tùy chỉnh trong WordPress.

Sau khi tạo một trang, thật dễ dàng để thêm hình ảnh trước và sau vào thiết kế của bạn. Trong trình chỉnh sửa trang SeedProd, chỉ cần tìm khối 'Trước Sau Chuyển đổi'.


Sau đó, bạn có thể kéo và thả khối này vào bất kỳ đâu trên thiết kế của mình để thêm nó vào bố cục trang.

Khi đã xong, chỉ cần nhấp để chọn khối 'Trước sau khi chuyển đổi'. Menu bên trái bây giờ sẽ cập nhật để hiển thị tất cả các cài đặt bạn có thể sử dụng để tạo ảnh trước và sau của mình.


Để bắt đầu, bạn cần thêm ảnh bạn muốn sử dụng làm ảnh trước. Bên dưới 'Hình ảnh trước', hãy nhấp vào 'Sử dụng hình ảnh của chính bạn' hoặc 'Sử dụng hình ảnh có sẵn' và chọn hình ảnh bạn muốn sử dụng.

Theo mặc định, SeedProd hiển thị nhãn 'Trước' phía trên hình ảnh này. Tuy nhiên, bạn có thể thay đổi điều này thành một điều gì đó mang tính mô tả hơn bằng cách nhập nó vào trường 'Trước Nhãn'.


Khi đã xong, hãy cuộn đến phần 'Sau hình ảnh'.

Giờ đây, bạn có thể thêm hình ảnh và tùy chỉnh nhãn 'Sau' mặc định bằng cách thực hiện theo quy trình tương tự được 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, hãy cuộn đến phần 'Định hướng thanh trượt' rồi nhấp vào 'Dọc' hoặc 'Ngang'.


Theo mặc định, khách truy cập sẽ di chuyển giữa hình ảnh trước và sau bằng cách kéo thanh trượt. Tuy nhiên, một số người dùng có thể thấy việc di chuyển thanh trượt dễ dàng hơn bằng cách di chuột qua hình ảnh.

Điều này đặc biệt đúng đối với những hình ảnh lớn hơn mà khách truy cập sẽ cần kéo thanh trượt một khoảng cách xa hơn.

Để thử cài đặt này, hãy bật 'Move on Hover' trong menu bên trái.

Tiếp theo, bạn có thể muốn thêm lớp phủ màu cho cả hình ảnh trước và sau. Điều này có thể giúp hình ảnh hòa trộn với phần còn lại của bảng màu hoặc nổi bật so với nền.

Bạn thậm chí có thể làm cho lớp phủ màu bán trong suốt để tạo hiệu ứng tinh tế hơn.

Để thử các màu khác nhau, hãy nhấp vào phần 'Màu lớp phủ', sau đó thực hiện các thay đổi của bạn trong cửa sổ bật lên xuất hiện.


Khi đã xong, bạn có thể tùy chỉnh thanh trượt bằng cách nhấp để mở rộng phần 'Xử lý so sánh'.

Theo mặc định, SeedProd 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, chỉ cần kéo thanh trượt 'Xử lý độ lệch ban đầu'.


Để hiển thị ít hình ảnh phía trước hơn, hãy kéo thanh trượt sang trái để nó hiển thị số thấp hơn. Để hiển thị thêm hình ảnh phía trước, hãy kéo thanh trượt sang phải, thao tác này sẽ tăng số lượng.

Tiếp theo, bạn có thể thay đổi màu của thanh trượt bằng cách sử dụng cài đặt 'Xử lý màu'.


Bạn cũng có thể làm cho tay cầm dày hơn hoặc mỏng hơn bằng cách sử dụng thanh trượt 'Độ dày tay cầm'.

Bằng cách này, bạn có thể làm cho tay cầm nổi bật hoặc tạo hiệu ứng tinh tế hơn.


Khi bạn hài lòng với tay cầm, bạn có thể muốn thay đổi vòng tròn. Bạn có thể làm cho hình tròn lớn hơn hoặc nhỏ hơn bằng cách sử dụng cài đặt 'Chiều rộng hình tròn' và thay đổi 'Bán kính hình tròn' để tạo các góc nhọn hoặc cong.

Khi bạn thực hiện các thay đổi, bản xem trước trực tiếp sẽ tự động cập nhật để bạn có thể thử các cài đặt khác nhau để xem cài đặt nào trông đẹp nhất.


Khi đã hài lòng với hình tròn, bạn có thể muốn thay đổi kích thước của các hình tam giác bên trong hình tròn đó. Ví dụ: nếu bạn đã làm cho hình tròn lớn hơn thì bạn cũng có thể muốn tăng kích thước của hình tam giác.

Để thực hiện thay đổi này, hãy kéo thanh trượt 'Kích thước hình tam giác' cho đến khi bạn hài lòng với giao diện của nó.


Khi đã xong, bạn có thể tiếp tục thêm các khối mới và tùy chỉnh nội dung trên trang SeedProd của mình.

Khi bạn hài lòng với giao diện của trang, chỉ cần nhấp vào mũi tên bên cạnh nút 'Lưu' rồi chọn 'Xuất bản'.


Bây giờ, nếu bạn truy cập trang web của mình, bạn sẽ thấy thiết kế trang của mình với hình ảnh trước và sau trực tiếp.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm ảnh trước và sau vào trang web WordPress của mình bằng hiệu ứng trượt. Bạn cũng có thể xem qua hướng dẫn của chúng tôi về các plugin bằng chứng 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.