Có một lời kêu gọi hành động trên trang web của bạn là một trong những cách ít xâm phạm nhất để thu hút sự chú ý của bạn. khách. Hầu hết họ sẽ bỏ qua CTA hoặc đóng nó để tiếp tục duyệt trang, nhưng đôi khi bạn sẽ thu phục được họ. Một slide kêu gọi hành động sẽ rất hiệu quả đối với khuyến khích về bất kỳ thứ gì trên trang đích.
Trong hướng dẫn này, chúng tôi sẽ thiết kế lời kêu gọi hành động có thể đóng và có thể thêm vào bất kỳ góc nào của trang bằng Trình tạo chủ đề Divi. Khi việc này hoàn tất, bạn sẽ có tùy chọn để khuyến khích sản phẩm và ưu đãi đặc biệt của bạn ở bất kỳ đâu trên trang mà không cần phải sử dụng plugin.
Hãy bắt đầu!
khảo sát
Đây là một cái nhìn nhanh về bốn CTA được chèn mà chúng tôi sẽ thêm vào bốn góc của mẫu trang. Tất nhiên, bạn sẽ không cần phải triển khai cả bốn cùng một lúc. Lưu ý cách có thể đóng từng cái bằng cách nhấp vào biểu tượng "x", sau đó bạn có thể chọn bật lại CTA bằng cách nhấp vào biểu tượng "dấu cộng".
Những gì bạn cần để bắt đầu
Để bắt đầu, bạn sẽ cần phải để cài đặt và kích hoạt chủ đề Divi . Đảm bảo rằng bạn có phiên bản Divi mới nhất.
Bạn cũng sẽ cần ít nhất một trang được tạo bằng Divi Builder cho mục đích thử nghiệm để gán mẫu mới cho trang này để hiển thị kết quả.
Tạo lời gọi hành động trượt, với mẫu trang trong Divi
Tạo một mô hình mới
Từ bảng điều khiển WordPress, đi tới Divi> Trình tạo chủ đề. Sau đó bấm vào ô "Thêm mẫu mới" để tạo mẫu mới.
Chỉ định mẫu cho trang hoặc các trang mà bạn muốn hiển thị thanh quảng cáo.
Trên mô hình mới, nhấp vào khu vực "Thêm nội dung tùy chỉnh", sau đó chọn "Tạo nội dung tùy chỉnh".
Sau đó chọn tùy chọn “Build From Scratch”.
Tạo phần nội dung xuất bản
Phần của nội dung bài đăng là một phần cần thiết của bất kỳ mẫu trang nào để hiển thị nội dung trang thực hoặc bài đăng được nhúng trong Divi hoặc WordPress. Chúng tôi sẽ thêm phần này vào mẫu trước khi tạo lời kêu gọi hành động đầu tiên để chèn.
Thêm một hàng vào một cột
Để bắt đầu, thêm một hàng của cột vào phần thông thường.
Thêm một mô-đun nội dung xuất bản
Sau đó thêm một mô-đun nội dung xuất bản lên dòng.
Cài đặt dòng
Sau đó cập nhật các tham số dòng như sau:
- Chiều rộng: 100%
- Chiều rộng tối đa: 100%
- Đệm: cao 0px, thấp 0px
Tạo lời kêu gọi hành động trên cùng bên trái
Bây giờ mô-đun nội dung bài đăng của chúng tôi đã sẵn sàng, chúng tôi đã sẵn sàng bắt đầu thêm lời gọi hành động đầu tiên của mình để chèn vào góc trên cùng bên trái của mẫu trang.
Thêm một phần
Mỗi lời gọi hành động mới sẽ được tạo với một phần hoàn toàn mới. Điều này sẽ cho phép bạn thêm bất kỳ bố cục hoặc mô-đun nào cần thiết để thiết kế lời gọi hành động.
Thêm một phần thông thường mới vào bố cục mẫu.
Thêm một hàng vào một cột
Sau đó, cung cấp cho phần một hàng một cột.
Cài đặt phần
Kéo (hoặc di chuyển) phần phía trên phần nội dung bài đăng và cập nhật cài đặt phần như sau:
- Gradient nền màu bên trái:
- Gradient nền bên phải:
- Hiển thị gradient phía trên hình ảnh: CÓ
- Hình nền: [chèn hình ảnh]
- Chiều rộng: 320px
- Ký quỹ: còn lại 320px
- Đệm: cao 0px, thấp 0px
- Phong cách hoạt hình: Trang trình bày
- Hướng hoạt ảnh: phải
- Độ trễ hoạt ảnh: 2000 ms
Sau đó, chuyển đến tab nâng cao và thêm lớp CSS và chỉ mục Z sau:
- Lớp CSS: slide-in-cta
- Chỉ số Z: 999
Và thêm đoạn mã CSS tùy chỉnh sau phần tử chính:
position: fixed;top: 80px;left: -320px;
Lớp CSS là cần thiết để chúng ta có thể nhắm mục tiêu phần bằng mã sau này. CSS tùy chỉnh sẽ định vị phần trên cùng bên trái của mẫu trang ở vị trí cố định (hoặc cố định). Vị trí “left: -320 pixel” sẽ di chuyển toàn bộ phần (rộng 320 pixel) ra bên ngoài cửa sổ trình duyệt (ra khỏi chế độ xem của chúng tôi). Nhưng chúng ta có lề trái là 320 pixel để đưa nó trở lại chế độ xem. Lý do nó được xây dựng theo cách này là chúng ta có thể bật hoặc tắt giá trị ký quỹ khi bạn nhấp vào biểu tượng "x". Điều này sẽ làm cho CTA trượt vào và khuất tầm nhìn.
Cài đặt dòng
Bây giờ, cập nhật các tham số dòng như sau:
- 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%
- Đệm: cao 0px, thấp 0px
Thêm mô-đun gọi hành động
Bên trong hàng, thêm mô-đun Gọi hành động.
Cài đặt lời kêu gọi hành động
Sau đó, cập nhật cài đặt gọi hành động.
Nội dung
- Tiêu đề: [nhập văn bản bạn chọn]
- Nút: [nhập văn bản bạn chọn]
- Thân bài: [nhập văn bản bạn chọn]
- URL liên kết nút: [nhập URL thực hoặc #]
Sau đó, loại bỏ màu nền mặc định để hiển thị nền của phần chúng ta đã thêm trước đó.
Thông số thiết kế (văn bản, nút và điền)
Trên tab Thiết kế, cập nhật những điều sau:
- Phông chữ: Lato
- Tiêu đề Phông chữ: Nặng
- Chiều cao dòng tiêu đề: 1,3 em
- Cảnh sát cơ thể: Lato
- Trọng lượng phông chữ cơ thể: đậm
- Sử dụng kiểu tùy chỉnh cho nút: CÓ
- Kích thước văn bản nút: 15px
- Độ rộng đường viền nút: 0px
- Khoảng cách chữ cái nút: 1px
- Phông chữ: Lato
- Trọng lượng phông chữ: nặng
- Kiểu phông chữ: TT
- Nút đệm: 12 pixel ở trên cùng, 12 pixel ở dưới cùng, 32 pixel ở bên trái, 32 pixel ở bên phải
- đệm: 40 pixel ở trên cùng, 40 pixel ở dưới cùng, 40 pixel ở bên trái, 40 pixel ở bên phải
Thêm biểu tượng mở và đóng bằng mô-đun Blurb
Sau khi gọi hành động xong, chúng ta cần tạo nút biểu tượng dùng để mở và đóng lệnh gọi hành động trượt. Để tạo điều này, hãy thêm một mô-đun làm nổi bật bên dưới mô-đun gọi hành động.
Cài đặt văn bản trình bày
Cập nhật các thông số thiết kế sau.
Nội dung
- xóa tiêu đề và nội dung mặc định
- Sử dụng biểu tượng: CÓ
- Biểu tượng: khác (xem ảnh chụp màn hình)
Conception
- Màu biểu tượng: # 000000
- Sử dụng kích thước phông chữ biểu tượng: CÓ
- Kích thước phông chữ biểu tượng: 40 pixel
- Chiều rộng: 40px
- Chiều cao: 40px
- Góc làm tròn: 50%
- Biến đổi trục quay Z: 135 độ
Cài đặt nâng cao
Trong tab nâng cao, thêm lớp CSS sau:
- Lớp CSS: slide-in_target
Sau đó, thêm CSS tùy chỉnh này vào phần tử chính.
position: absolute;bottom: 0px;right: -40px;
Thêm CSS tùy chỉnh sau vào hình ảnh Blurb.
margin-bottom: 0px;
Kết quả
Đây là kết quả cho đến nay.
Hãy nhớ rằng chúng tôi vẫn cần thêm một số mã để thêm chức năng đóng và mở khi bạn nhấp vào biểu tượng "x". Chúng tôi sẽ thêm mã sau khi tạo lời kêu gọi hành động ở mỗi góc trong số bốn góc của mô hình.
Tạo lời kêu gọi hành động ở trên cùng bên phải
Với lời gọi hành động đầu tiên được tích hợp, chúng tôi có thể tăng tốc quá trình tạo phần còn lại của các CTA bằng cách sao chép phần đã được tạo. Tiếp theo, chúng ta sẽ tạo một lời kêu gọi hành động trong slide cho góc trên cùng bên phải.
Phần trùng lặp
Triển khai chế độ hiển thị khung dây, sau đó sao chép phần CTA ở trên cùng bên trái.
Cập nhật cài đặt phần
Sau đó cập nhật các tham số phần mới như sau:
- lề: 320px đúng
- hướng hoạt ảnh: trái
Sau đó, cập nhật CSS tùy chỉnh trong phần tử chính bằng cách thay thế “left” bằng “right”. Đây là toàn bộ đoạn trích:
position: fixed;top: 80px;right: -320px;
Cập nhật các tham số của mô-đun Blurb
Sau đó, mở cài đặt mô-đun Blurb và cập nhật đoạn mã CSS tùy chỉnh trong phần tử chính bằng cách thay thế “phải” bằng “trái”. Đây là toàn bộ đoạn trích:
position: absolute;bottom: 0px;left: -40px;
Kết quả
Bây giờ, bạn sẽ thấy lời gọi hành động dưới dạng trang chiếu ở trên cùng bên phải của mẫu trang.
Thực hiện các thao tác tương tự cho phần còn lại của phần “Phía dưới bên phải”, “Phía dưới bên trái”. Bạn cũng sẽ cần điều chỉnh mã CSS cho từng mô-đun để có kết quả tương tự như sau.
Thêm các đoạn mã jQuery và CSS tùy chỉnh bằng mô-đun mã
Đối với bước cuối cùng, chúng ta cần thêm một số jQuery và CSS tùy chỉnh để chúng ta có thể có được chức năng mở và đóng từng CTA của slide.
Thêm một mô-đun mã
Thêm mô-đun mã vào một trong các phần của bản trình bày.
Dán mã
Sau đó mở cài đặt mã và dán đoạn mã sau vào vùng mã.
<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target {transform: none !important;background: rgba(0,0,0,0.2);} .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); }); });})( jQuery ); </script>
cuối cùng suy nghĩ
Với Divi, việc tạo lời kêu gọi hành động hoàn toàn không khó. Và vì bạn có thể sử dụng trình tạo chủ đề để thêm lời gọi hành động vào mẫu trang, bạn sẽ có nhiều quyền kiểm soát hơn đối với những trang nào sẽ hiển thị các CTA đó.
Tuyệt vời, bài viết này! Đây chính xác là những gì tôi đang tìm kiếm!
Merci beaucoup.
Một câu hỏi phụ nhỏ, có phải CTA này chỉ tự động mở ở một nơi nhất định khi cuộn trên trang không?
Bonne journée!