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".

gọi hành động divi 1

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.

Tạo mẫu trang

Chỉ định mẫu cho trang hoặc các trang mà bạn muốn hiển thị thanh quảng cáo.

Gán một mẫu trang cho các trang

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".

Thêm nội dung tùy chỉnh

Sau đó chọn tùy chọn “Build From Scratch”.

Xây dựng từ đầu

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.

Phần dòng đơn

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.

Nội dung mặt hà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
Cấu hình dòng Divi

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.

Lựa chọn một phần divi mới

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.

Chọn một cột divi

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;

Tùy chỉnh phần

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
Tham số dòng Divi

Thêm mô-đun gọi hành động

Bên trong hàng, thêm mô-đun Gọi hành độ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 #]
Tùy chỉnh ưu đãi mô-đun divi

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 đó.

Xóa màu nền
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
Tùy chỉnh mô-đun phông chữ gọi hành động divi

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.

Mô-đun thông tin bong bóng Divi

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)
Thêm một biểu tượng divi
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 độ
Tùy chỉnh biểu tượng divi
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;

Tùy chỉnh phong cách mô-đun css divi

Kết quả

Đây là kết quả cho đến nay.

Kết quả đạt được bây giờ

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.

Tạo phần divi kép

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;

Sửa đổi căn chỉnh phần divi

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;

Thêm mã divi

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.

Thanh trượt ở trên cùng bên phải

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.

Kết quả cuối cùng divi

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.

Thêm mã js divi

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>

Thêm mã jquery

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 đó.