Thanh Sticky tiếp tục là một phần phổ biến của thiết kế web. Chúng tuyệt vời để thúc đẩy chuyển đổi bằng cách giữ cho lời gọi hành động trở nên hiệu quả mà không bị xâm phạm như cửa sổ bật lên.
Trong trường hợp sử dụng này, chúng tôi sẽ thiết kế một thanh dính cho các sản phẩm WooCommerce sử dụng mô-đun Woo từ Divi. Thanh dính có thể bao gồm bất kỳ mô-đun nào Divi. Đối với hướng dẫn này, chúng tôi sẽ tạo một thanh cố định bao gồm nút "Thêm vào giỏ hàng" để nó vẫn hiển thị khi người dùng cuộn xuống trang. Ngoài ra, chúng tôi cũng sẽ tạo thanh thông báo giỏ hàng để người dùng sẽ luôn thấy nút “xem giỏ hàng” sau khi nhấp vào nút “thêm vào giỏ hàng”.
Các yếu tố thanh dính này sẽ giúp tăng cường chuyển đổi bằng cách giữ các CTA quan trọng này trong tầm nhìn.
khảo sát
Dưới đây là bản xem trước của những gì chúng tôi sẽ thiết kế trong hướng dẫn này.
Phần 1: Thiết kế thanh kết dính trên trang sản phẩm
Chúng tôi sẽ sử dụng một sản phẩm mô phỏng đơn giản cho ví dụ này, vì vậy bạn cần tạo một sản phẩm mới hoặc chỉnh sửa một sản phẩm hiện có. Thông tin sản phẩm không quan trọng đối với hướng dẫn này. Đảm bảo bạn có những điều cơ bản như tiêu đề sản phẩm, giá cả, mô tả, hình ảnh, v.v.
Khi một sản phẩm đơn giản đã sẵn sàng, hãy nhấp để chỉnh sửa sản phẩm ở phần phụ trợ và triển khai Divi Builder trên trang sản phẩm. Trong Cài đặt trang Divi, chọn “Toàn bộ băng thông” cho bố cục, sau đó nhấp vào “Xây dựng trên mặt trước”.
Trang sản phẩm sẽ trông như thế này.
Bên dưới hàng đầu tiên có chứa đường dẫn và thông báo giỏ hàng, hãy thêm một hàng mới với bố cục một cột.
Cài đặt dòng
Trước khi thêm các mô-đun, cập nhật cài đặt dòng như sau:
- Màu nền: # 333333
- Sử dụng chiều rộng máng tùy chỉnh: CÓ
- Chiều rộng máng xối: 1
- Chiều rộng: 100%
- Upholstery: 0px Trên cùng, 0px Dưới cùng
Làm cho đường dính
Để tạo sự cố định cho dòng, hãy thêm mã CSS tùy chỉnh sau vào phần tử màn hình chính:
position: -webkit-sticky !important; position: sticky !important; top: 50px;
Sau đó thêm mã CSS sau vào cùng một thành phần chính cho màn hình máy tính bảng:
top: 0px;
Nếu bạn không quen thuộc với thuộc tính css "position: stick", thì đây là loại kết hợp giữa vị trí cố định và vị trí tương đối nơi phần tử (trong trường hợp này là dòng) sẽ cuộn theo vùng chứa cho đến khi nó đạt đến vị trí được chỉ định ở đầu hoặc cuối trang (hoặc phần bù được chỉ định). Trong ví dụ này, chúng tôi đặt offset thành 50px từ đầu cửa sổ trình duyệt (chừa chỗ cho chiều cao của tiêu đề cố định mặc định trên màn hình). Sau đó, trên máy tính bảng, độ lệch được thay đổi thành "top: 0px" để sửa đường / thanh kết dính ở đầu trình duyệt trên thiết bị di động.
Lưu ý: Bỏ qua bất kỳ lỗi nào bạn thấy khi thêm CSS vào hộp. Mã sẽ hoạt động tốt.
Sau khi bạn CSS, hãy cập nhật chỉ mục Z như sau:
- Chỉ số Z: 10
Bây giờ dòng sẽ trở nên dính khi người dùng cuộn qua trang sản phẩm.
Cột CSS tùy chỉnh
Trước khi bạn bắt đầu điền vào dòng nội dung, chúng ta cần đảm bảo rằng mô-đun bên trong hàng một cột của chúng ta sẽ căn chỉnh theo chiều ngang thay vì theo chiều dọc. Chúng ta có thể sử dụng thủ thuật CSS đơn giản để thực hiện việc này với thuộc tính flex. Mở cài đặt cột và thêm CSS tùy chỉnh sau vào thành phần chính:
display:flex; align-items:center;
Điều này quan tâm đến thiết kế đường dính của chúng tôi. Bây giờ chúng ta cần điền vào dòng nội dung.
Thêm một tiêu đề Woo
Thêm một mô-đun tiêu đề Woo mới vào cột dòng dính.
Sau đó cập nhật các cài đặt như sau:
- Tiêu đề văn bản màu: #ffffff
- Kích thước tiêu đề văn bản: 28px (máy tính để bàn), 20px (máy tính bảng), 16px (điện thoại)
- Chiều rộng: 30%
- Upholstery: 2vw ở phía trên, 2vw ở phía dưới, 2vw ở bên trái, 2vw ở bên phải
Thêm giá Woo
Sau đó thêm mô-đun giá Woo bằng cách nhấp vào biểu tượng dấu cộng màu xám xuất hiện khi bạn di chuột qua mô-đun tiêu đề woo bạn vừa tạo.
Sau đó cập nhật cài đặt Woo Price như sau:
- Kích thước văn bản giá: 28px (máy tính để bàn), 20px (máy tính bảng), 16px (điện thoại)
- Chiều rộng: 30%
- Upholstery: 2vw ở phía trên, 2vw ở phía dưới, 2vw ở bên trái, 2vw ở bên phải
- Chiều rộng của đường viền bên phải: 1px
- Màu của đường viền bên phải: #777777
- Chiều rộng của đường viền bên trái: 1px
- Màu viền trái: #777777
Thêm mô-đun Thêm vào giỏ hàng
Đối với phần tử cuối cùng của nội dung, hãy thêm mô-đun Woo Add to Cart ngay sau mô-đun Woo Price.
Sau đó cập nhật các cài đặt như sau:
Đơn giản hóa yếu tố Thêm vào giỏ hàng bằng cách ẩn trường số lượng và số lượng hàng tồn kho trên thiết bị di động.
- Trường số lượng hiển thị: TẮT (máy tính bảng)
- Hiển thị chứng khoán: TẮT
- Căn chỉnh văn bản: đúng
- Sử dụng kiểu tùy chỉnh cho Nút: CÓ
- Kích thước văn bản nút: 18px (máy tính bảng), 14px (điện thoại)
- Màu văn bản nút: #ffffff
- Màu nền của nút: #0c71c3
- Chiều rộng của đường viền nút: 0px
- Chiều rộng: 40%
- Upholstery: 2vw ở bên trái, 2vw ở bên phải
Kết quả
Chúng ta hãy xem nó trông như thế nào trên trang trực tiếp.
Phần 2: Tạo một thanh thông báo giỏ
Tạo một thanh thông báo giỏ hàng bằng keo thực sự bao gồm một vài bước đơn giản, nhưng kết quả có thể cực kỳ hiệu quả. Như bạn có thể đã biết, thông báo giỏ hàng chỉ xuất hiện khi người dùng nhấp vào nút "Thêm vào giỏ hàng". Nhưng bước tiếp theo quan trọng trong quá trình mua hàng sẽ đưa người dùng đến trang thanh toán. Vì vậy, khi thông báo giỏ hàng xuất hiện dưới dạng thanh dính ở cuối cửa sổ, người dùng sẽ dễ nhìn thấy hơn.
Để tạo thanh dính thông báo giỏ hàng, trước tiên hãy tạo một hàng một cột mới ở cuối trang sản phẩm. Sau đó cập nhật cài đặt hàng như sau:
- Chiều rộng: 100%
- Upholstery: 0px ở trên cùng, 0px ở phía dưới
Làm cho dòng dính bằng cách thêm CSS tùy chỉnh sau vào phần tử chính:
position: -webkit-sticky !important; position: sticky !important; bottom: 0px;
Lưu ý: Như chúng tôi đã làm trước đây, bạn có thể bỏ qua các lỗi xuất hiện khi thêm thuộc tính vị trí: dính.
Hàng sẽ dính vào dưới cùng của cửa sổ khi cuộn lên.
Sau đó cập nhật chỉ mục z để giữ nó ở nền trước, như sau:
- Chỉ số Z: 10
Thêm mô-đun thông báo giỏ
Khi bạn đã tạo dòng, thêm mô-đun Woo Cart vào dòng và cập nhật cài đặt như sau:
- Kích thước văn bản (điện thoại): 15px
- Ký quỹ: 0em ở phía dưới
Đó là nó ! Bạn có muốn xóa mục cảnh báo giỏ hàng mặc định ở đầu trang hay không là tùy thuộc vào bạn, nhưng bạn nên bỏ mục đó để có chuyển đổi tốt hơn.
Kết quả cuối cùng
Đây là kết quả cuối cùng có thể trông như thế nào.
cuối cùng suy nghĩ
Hy vọng rằng bài viết này sẽ giúp chúng ta hiểu được cách tạo thanh dính cho các trang sản phẩm của mình trong Divi. Chúng tôi đã trình bày cách tạo một thanh dính bao gồm tiêu đề sản phẩm, giá và nút Thêm vào giỏ hàng. Và chúng tôi cũng đã hướng dẫn cách tạo một thanh dính. Cả hai điều này sẽ làm cho quá trình mua dễ dàng hơn và thúc đẩy chuyển đổi. Và chúng tôi thậm chí không cần một plugin!
