Thanh bên dính cực kỳ hiệu quả trong việc thu hút sự chú ý của khách mà không bị xâm phạm hoặc làm mất tập trung. Bí quyết là đưa một hoặc hai phần tử vào thanh bên “vẫn hiển thị” hoặc cố định ở một bên của nội dung của bài đăng khi người dùng cuộn trang. Đây là một giải pháp thay thế mới mẻ cho bố cục thanh bên truyền thống vì nó mang lại ấn tượng về bố cục toàn chiều rộng hiện đại (không có thanh bên), với lợi ích là hiển thị các lời kêu gọi hành động quan trọng ở cạnh trang khi cần thiết.
Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm lời gọi hành động cố định vào mẫu bài đăng blog bằng Trình tạo chủ đề Divi. Ứng dụng của bố cục này là đáng kể. Nó sẽ hoạt động cho hầu hết mọi trang hoặc mẫu bài đăng. Thêm vào đó, bạn không phải giới hạn bản thân trong các CTA; bạn có thể chọn thêm (các) mô-đun Divi mà bạn chọn.
Những gì bạn cần để bắt đầu
Để bắt đầu, bạn phải để cài đặt và kích hoạt chủ đề Divi . Đảm bảo bạn có phiên bản Divi mới nhất.
Bạn cũng sẽ cần ít nhất một tin nhắn được tạo bằng Divi Builder để thử nghiệm để hiển thị kết quả mong muốn.
Sau đó, bạn đã sẵn sàng để rời đi.
khảo sát
Dưới đây là tổng quan nhanh về các ACT dính đã được thêm vào mẫu bài đăng blog trong Divi.
Cách thêm lời gọi hành động cố định vào mẫu bài đăng blog của bạn trong Divi
Thêm mẫu xây dựng chủ đề
Bước đầu tiên là nhập mẫu được xác định trước của chúng tôi trên trang web của chúng tôi. Chúng tôi sẽ sử dụng mẫu ấn phẩm Divi Theme Builder Pack # 1.
Để bắt đầu, hãy điều hướng đến Divi > Trình tạo chủ đề. Nhấp vào biểu tượng tính di động ở trên cùng bên phải của trang. Trong phương thức tính di động, hãy chọn tab nhập và chọn tệp divi-theme-builder-pack-1-post-template.json từ thư mục. Nếu bạn hiện đã cài đặt các mẫu trên trang web của mình, hãy nhớ bỏ chọn bất kỳ tùy chọn nào có thể ghi đè lên các mẫu hiện tại của bạn. Sau đó nhấp vào nút nhập khẩu.
Xây dựng mẫu bài đăng blog
Sau khi mẫu được nhập, chúng tôi đã sẵn sàng thêm các CTA mới của mình vào thanh bên dính vào bố cục mẫu. Để thực hiện việc này, hãy nhấp vào biểu tượng chỉnh sửa cho vùng cơ thể tùy chỉnh.
Đã thêm bố cục thanh bên kép để giữ CTA thanh bên
Trong Model Layout Editor, tìm hàng chứa mô-đun Xuất bản. nội dung và thay thế bố cục cột bằng cấu trúc cột một phần năm x ba phần năm x một phần năm (1/5 3/5 1/5). Điều này sẽ cho phép chúng ta giữ cột ở giữa cho nội dung của bài đăng trong khi cung cấp hai phần ở hai bên cho CTA hấp dẫn của chúng tôi.
Sau khi thay đổi cấu trúc cột, kéo mô-đun xuất bản nội dung vào cột trung tâm.
Cập nhật thông số dòng
Mở cài đặt dòng và cập nhật các tùy chọn thiết kế sau:
- Sử dụng chiều rộng máng tùy chỉnh: CÓ
- Chiều rộng máng xối: 2
- Chiều rộng: 100% (máy tính để bàn), 90% (máy tính bảng)
- Chiều rộng tối đa: 1500px
Điều này sẽ cung cấp cho chúng tôi phòng chúng tôi cần cho cấu hình thanh bên đôi của chúng tôi.
Cập nhật cài đặt cột 1
Sau đó mở cài đặt cột 1 và cung cấp cho cột này một lớp CSS tùy chỉnh:
- Lớp CSS: dính-cta
Thêm thanh bên CTA vào cột bên trái
Hiện chúng tôi đã sẵn sàng cho lời kêu gọi hành động đầu tiên. Thêm lời gọi vào mô-đun hành động ở cột bên trái.
Cách điệu thanh bên CTA
Cập nhật các cài đặt như sau:
Nội dung
- Nút: «Bấm vào đây»
- Nội dung: “Nội dung của bạn ở đây. Chỉnh sửa hoặc xóa văn bản này trực tuyến hoặc trong cài đặt nội dung của mô-đun. ”
- URL của liên kết của nút: #
Thiết kế văn bản cơ thể
- Phông chữ cơ thể: Montserrat
- Trọng lượng phông chữ: bán đậm
- Nội dung văn bản: Căn lề phải
- Màu cơ thể của văn bản: # 444444
- Kích thước văn bản cơ thể: 22px (máy tính để bàn), 18px (máy tính bảng)
- Chiều cao cơ thể: 1.3em
Bouton
- Kích thước văn bản nút: 14px
- Màu văn bản nút: #ffffff
- Màu nền của nút: # 6148df
- Chiều rộng của đường viền nút: 0px
- Bán kính của nút: 80px
- Trọng lượng phông chữ: đậm
- Kiểu phông chữ: TT
- Đệm các nút: 12px ở trên cùng, 12px ở phía dưới, 22px ở bên trái, 22px ở bên phải
Chiều rộng, căn chỉnh, đệm và lề đường
- Chiều rộng: 100%
- Chiều rộng tối đa: 320px
- Sắp xếp mô-đun: đúng
- Đệm: 10px ở bên trái, 10px ở bên phải
- Chiều rộng của đường viền trên cùng: 10px
- Màu của đường viền trên cùng: #eeeeee
- Chiều rộng của đường viền dưới cùng: 10px
- Màu của viền dưới: #eeeeee
Thêm thanh bên CTA vào cột bên phải
Để tạo CTA cho cột bên phải, hãy sao chép CTA mà chúng tôi vừa tạo và dán vào cột ngoài cùng bên phải. Sau đó cập nhật cài đặt cho bản sao như sau:
- Căn chỉnh thân văn bản: trái
- Sắp xếp mô-đun: bên trái
Cập nhật cài đặt cột 3
Đối với CTA này trong cột bên tay phải, chúng tôi sẽ thêm một lề trên vào cột để thiết lập vị trí bắt đầu của thanh bên CTA ở điểm thấp hơn của trang.
Bắt đầu bằng cách mở các tham số của cột 3 và thêm cùng một lớp CSS mà chúng ta đã thêm vào cột 1:
- Lớp CSS: dính-cta
Sau đó, thêm CSS tùy chỉnh sau vào phần tử chính:
Văn phòng
margin-top: 50%
tablette
margin-top: 0%
Điều này sẽ cung cấp cho chúng tôi một điểm bắt đầu khác cho CTA cố định trên cột bên phải, là 50% chiều rộng hàng. Hãy điều chỉnh giá trị này nếu cần cho bài đăng trên blog của bạn.
Thêm CSS tùy chỉnh vào mẫu bằng mô-đun mã
Để có được vị trí "cố định" cho các CTA thanh bên, chúng ta cần thêm CSS tùy chỉnh. Để thực hiện việc này, hãy tạo một mô-đun mã mới trong mô-đun xuất bản nội dung (hoặc bất kỳ nơi nào trên trang).
Sau đó, dán CSS sau vào hộp mã:
<style> @media only screen and (min-width: 980px) {#page-container { overflow-y:visible !important; } .sticky-cta {position: sticky !important;position: -webkit-sticky !important;top: calc(50vh - 130px) !important;}}</style>
Phần bù trên cùng trong mã này là phép tính định vị CTA căn giữa theo chiều dọc của trang khi cuộn. 50vh là một nửa chiều cao của cửa sổ trình duyệt và 130px bằng một nửa chiều cao của CTA. Nếu CTA của bạn cao hơn hoặc thấp hơn, bạn sẽ cần điều chỉnh 130 pixel lên hoặc xuống.
Lưu cài đặt
Khi bạn đã hoàn tất, lưu bố cục của mẫu.
Và sau đó lưu cài đặt trình tạo chủ đề
Kết quả cuối cùng
Để xem kết quả cuối cùng, hãy truy cập một bài viết blog bằng cách sử dụng mẫu.
Và đây là cách mà các CTA dính sẽ bị kẹt khi cuộn. Bạn có thể thấy cách nó hoạt động tốt nhất cho nội dung dài hơn.
cuối cùng suy nghĩ
Những lời kêu gọi hành động bên dính này là một giải pháp thay thế mới mẻ cho thanh bên truyền thống. Chúng hoạt động tốt cho thiết kế tối giản vì chúng ít xâm phạm hơn và không làm cho bài viết trở nên lộn xộn. Ngoài ra, bạn có thể đặt CTA thấp hơn trên trang để nó xuất hiện dần dần và dính vào cuộn, làm cho nó dễ nhìn thấy hơn đối với mọi người. khách. Và đừng quên. Bạn có thể thay thế CTA bằng bất kỳ mô-đun Divi nào hoặc tổ hợp các mô-đun để tạo bất kỳ thứ gì bạn muốn. Bạn cũng có thể chọn chỉ giữ một CTA ở một bên. Nó dường như có nhiều ứng dụng.
