Memiliki ajakan bertindak di situs Anda adalah salah satu cara yang paling tidak mengganggu untuk menarik perhatian Anda pengunjung. Seringkali mereka hanya mengabaikan CTA atau menutupnya untuk terus menjelajahi halaman, tetapi terkadang Anda akan memenangkan hati mereka. Slide ajakan bertindak akan sangat cocok untuk itu memajukan apa saja di halaman arahan.

Dalam tutorial ini, kami akan merancang ajakan bertindak yang dapat ditutup yang dapat ditambahkan ke sudut mana pun halaman menggunakan Divi Theme Builder. Setelah ini selesai, Anda akan memiliki opsi untuk melakukannya memajukan produk dan penawaran khusus Anda di mana saja di halaman tanpa harus menggunakan plugin.

Mari kita mulai!

penelitian

Berikut sekilas empat CTA yang disisipkan yang akan kita tambahkan ke empat sudut template halaman. Tentu saja, Anda tidak perlu menerapkan keempatnya secara bersamaan. Perhatikan bagaimana masing-masing dapat ditutup dengan mengklik ikon "x", kemudian Anda dapat memilih untuk mengaktifkan kembali CTA dengan mengklik ikon "plus".

Apa yang Anda butuhkan untuk memulai

Untuk memulai, Anda harus melakukannya untuk menginstal dan mengaktifkan tema Divi . Pastikan Anda memiliki Divi versi terbaru.

Anda juga akan membutuhkan setidaknya satu halaman yang dibuat dengan Divi Builder untuk tujuan pengujian agar dapat menetapkan templat baru ke halaman ini untuk menampilkan hasilnya.

Pembuatan ajakan bertindak geser, dengan templat halaman di Divi

Penciptaan model baru

Dari dasbor WordPress, buka Divi> Generator tema. Kemudian klik kotak "Tambahkan template baru" untuk membuat template baru.

Tetapkan template ke halaman atau halaman di mana Anda ingin menampilkan bar promosi.

Pada model baru, klik pada area "Add a custom body" lalu pilih "Create a custom body".

Kemudian pilih opsi "Build From Scratch".

Pembuatan bagian konten publikasi

Bagian dari isi posting adalah bagian penting dari templat halaman apa pun untuk menampilkan isi halaman atau postingan asli yang tertanam di Divi atau WordPress. Kami akan menambahkan ini ke template kami sebelum membuat ajakan bertindak pertama untuk disisipkan.

Tambahkan baris ke kolom

Untuk memulai, tambahkan baris kolom ke bagian reguler.

Tambahkan modul konten penerbitan

Kemudian tambahkan modul isi publikasi ke baris.

Pengaturan saluran

Setelah itu perbarui parameter garis sebagai berikut:

• Lebar: 100%
• Lebar maks: 100%
• Padding: 0px tinggi, 0px rendah

Membuat ajakan bertindak di kiri atas

Sekarang kita memiliki modul konten posting kita di tempatnya, kita siap untuk mulai menambahkan ajakan bertindak pertama kita untuk disisipkan di sudut kiri atas template halaman.

Tambahkan bagian

Setiap ajakan bertindak baru akan dibuat dengan bagian baru. Ini akan memungkinkan Anda menambahkan tata letak atau modul apa pun yang diperlukan untuk merancang ajakan bertindak.

Tambahkan bagian reguler baru ke tata letak template.

Tambahkan baris ke kolom

Kemudian berikan bagian tersebut sebaris kolom.

Pengaturan bagian

Seret (atau pindahkan) bagian di atas bagian konten posting dan perbarui pengaturan bagian sebagai berikut:

• Gradien latar belakang warna kiri:
• Gradien latar belakang kanan:
• Tampilkan gradien di atas gambar: YA
• Gambar latar belakang: [masukkan gambar]
• Lebar: 320px
• Margin: 320px tersisa
• Padding: 0px tinggi, 0px rendah
• Gaya Animasi: Slide
• Arah animasi: benar
• Penundaan animasi: 2000 ms

Kemudian lompat ke tab lanjutan dan tambahkan kelas CSS berikut dan indeks Z:

• Kelas CSS: slide-in-cta
• Indeks Z: 999

Dan tambahkan cuplikan CSS khusus mengikuti elemen utama:

position: fixed;top: 80px;left: -320px;

Kelas CSS diperlukan agar kita dapat menargetkan bagian dengan kode nanti. CSS khusus akan memposisikan bagian kiri atas template halaman dalam posisi tetap (atau melekat). Posisi "kiri: -320 piksel" harus memindahkan seluruh bagian (yang lebarnya 320 piksel) ke luar jendela browser (jadi keluar dari pandangan kita). Tapi kami memiliki margin kiri 320 piksel untuk menampilkannya kembali. Alasan pembuatannya seperti ini adalah karena kita dapat mengaktifkan atau menonaktifkan nilai margin saat Anda mengklik ikon "x". Ini akan menyebabkan CTA meluncur masuk dan keluar dari pandangan.

Pengaturan saluran

Sekarang, perbarui parameter garis sebagai berikut:

• Gunakan lebar selokan khusus: YA
• Lebar selokan: 1
• Lebar: 100%
• Padding: 0px tinggi, 0px rendah

Tambahkan modul ajakan bertindak

Di dalam baris, tambahkan modul Ajakan Bertindak.

Pengaturan ajakan bertindak

Kemudian perbarui setelan ajakan bertindak.

Isi

• Judul: [masukkan teks pilihan Anda]
• Tombol: [masukkan teks pilihan Anda]
• Badan: [masukkan teks pilihan Anda]
• URL tautan tombol: [masukkan URL aktual atau #]

Kemudian hapus warna latar belakang default untuk menampilkan latar belakang bagian yang kita tambahkan sebelumnya.

Parameter desain (teks, tombol, dan isi)

Pada tab Desain, perbarui yang berikut ini:

• Font judul: Lato
• Judul Huruf Berat: Berat
• Tinggi baris judul: 1,3 em
• Polisi Tubuh: Lato
• Berat fonta badan: tebal
• Gunakan gaya khusus untuk tombol: YES
• Ukuran teks tombol: 15px
• Lebar batas tombol: 0px
• Penempatan huruf tombol: 1px
• Fon tombol: Lato
• Tombol font berat: berat
• Gaya font tombol: TT
• Tombol bantalan: 12 piksel di bagian atas, 12 piksel di bagian bawah, 32 piksel di sebelah kiri, 32 piksel di sebelah kanan
• padding: 40 piksel di bagian atas, 40 piksel di bagian bawah, 40 piksel di sebelah kiri, 40 piksel di sebelah kanan

Tambahkan ikon buka dan tutup dengan modul Blurb

Setelah ajakan bertindak selesai, kita perlu membuat tombol ikon yang digunakan untuk membuka dan menutup geser ajakan bertindak. Untuk membuatnya, tambahkan modul uraian di bawah modul ajakan bertindak.

Pengaturan teks presentasi

Perbarui parameter desain berikut.

Isi

• hapus judul default dan teks isi
• Gunakan ikon: YA
• Ikon: lebih (lihat tangkapan layar)

Pembuahan

• Warna Ikon: # 000000
• Gunakan ukuran font ikon: YA
• Ukuran font ikon: 40 piksel
• Lebar: 40px
• Tinggi: 40px
• Sudut membulat: 50%
• Ubah rotasi sumbu Z: 135 derajat

Pengaturan lanjutan

Di bawah tab lanjutan, tambahkan kelas CSS berikut:

• Kelas CSS: slide-in_target

Kemudian tambahkan CSS khusus ini ke elemen utama.

position: absolute;bottom: 0px;right: -40px;

Tambahkan CSS khusus berikut ke gambar Blurb.

margin-bottom: 0px;

Hasil

Inilah hasilnya sejauh ini.

Perlu diingat bahwa kami masih perlu menambahkan beberapa kode untuk menambahkan fungsionalitas tutup dan buka saat Anda mengeklik ikon "x". Kami akan menambahkan kode setelah membuat ajakan bertindak di masing-masing dari empat sudut model.

Pembuatan ajakan bertindak di kanan atas

Dengan ajakan bertindak pertama di dalamnya, kami dapat mempercepat proses pembuatan CTA lainnya dengan menduplikasi bagian yang sudah dibuat. Selanjutnya, kita akan membuat ajakan bertindak slide untuk sudut kanan atas.

Bagian duplikat

Terapkan mode tampilan wireframe, lalu duplikat bagian CTA di kiri atas.

Perbarui pengaturan bagian

Kemudian perbarui parameter bagian baru sebagai berikut:

• margin: 320px benar
• arah animasi: kiri

Kemudian perbarui CSS khusus di elemen utama dengan mengganti "kiri" dengan "kanan". Berikut kutipan lengkapnya:

position: fixed;top: 80px;right: -320px;

Perbarui parameter modul Blurb

Kemudian buka pengaturan modul Blurb dan perbarui cuplikan CSS khusus di elemen utama dengan mengganti "kanan" dengan "kiri". Berikut kutipan lengkapnya:

position: absolute;bottom: 0px;left: -40px;

Hasil

Anda sekarang akan melihat ajakan bertindak sebagai slide di kanan atas template halaman.

Lakukan operasi yang sama untuk sisa bagian "Kanan Bawah", "Kiri Bawah". Anda juga perlu menyesuaikan kode CSS untuk masing-masing modul agar mendapatkan hasil yang serupa dengan berikut ini.

Menambahkan cuplikan jQuery dan CSS khusus menggunakan modul kode

Untuk langkah terakhir, kita perlu menambahkan beberapa jQuery dan CSS kustom sehingga kita bisa mendapatkan fungsionalitas untuk membuka dan menutup setiap CTA slide.

Tambahkan modul kode

Tambahkan modul kode ke salah satu bagian presentasi.

Rekatkan kodenya

Kemudian buka pengaturan kode dan tempel kode berikut ke dalam area kode.

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

final pikiran

Dengan Divi, sama sekali tidak sulit untuk membuat ajakan bertindak. Dan karena Anda dapat menggunakan pembuat tema untuk menambahkan ajakan bertindak ke templat halaman, Anda akan memiliki kontrol lebih besar atas halaman mana yang menampilkan CTA tersebut.