Cara Menambahkan Ajakan Bertindak Slide-In yang Dapat Ditutup ke Setiap Sudut Template Halaman Anda di Divi

Memiliki ajakan bertindak slide-in di situs Anda adalah salah satu cara yang paling tidak mencolok untuk mendapatkan perhatian pengunjung Anda. Sebagian besar waktu mereka hanya akan mengabaikan CTA atau menutupnya untuk melanjutkan penjelajahan halaman, tetapi terkadang Anda akan memenangkannya. Ajakan bertindak slide-in akan berfungsi dengan baik untuk mempromosikan apa saja di halaman arahan.

Dalam tutorial ini, kita akan mendesain ajakan bertindak slide-in yang dapat ditutup yang dapat ditambahkan ke setiap sudut halaman menggunakan Divi Theme Builder. Setelah selesai, Anda akan memiliki kemampuan untuk mempromosikan produk dan penawaran khusus Anda di mana saja di halaman tanpa harus menggunakan plugin.

Mari kita mulai!

Sneak Peek

Berikut ini sekilas tentang empat CTA slide-in yang akan kita tambahkan ke keempat sudut template halaman. Tentu saja, Anda tidak perlu menerapkan keempatnya sekaligus. Perhatikan bagaimana masing-masing dapat ditutup dengan mengklik ikon "x" dan kemudian Anda dapat memilih untuk mengaktifkan kembali CTA terbuka dengan mengklik ikon "plus".

Unduh Templat Halaman Divi Ajakan Bertindak Slide-In GRATIS

Untuk mendapatkan Template Halaman dari tutorial ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan tambahkan salah satu file json ke Divi Theme Builder menggunakan opsi Theme Builder Portability.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus menginstal dan mengaktifkan Tema Divi. Pastikan Anda memiliki Divi versi terbaru.

Anda juga memerlukan setidaknya satu halaman yang dibuat dengan Divi Builder untuk tujuan pengujian agar dapat menetapkan template baru ke halaman tersebut untuk menampilkan hasilnya.

Setelah itu, Anda siap untuk pergi.

Membuat Ajakan Bertindak Slide-In yang Dapat Ditutup untuk setiap sudut templat halaman Anda di Divi

Membuat Template Baru

Dari Dasbor WordPress, navigasikan ke Divi > Pembuat Tema. Kemudian klik kotak “Add New Template” untuk membuat template baru.

Tetapkan template ke halaman yang Anda inginkan agar bilah promo ditampilkan.

Pada template baru, klik area “Add Custom Body” lalu pilih “Build Custom Body”.

Kemudian pilih opsi "Build From Scratch".

Membuat Bagian Konten Posting

Bagian konten posting adalah bagian penting dari templat halaman apa pun untuk menampilkan konten sebenarnya dari halaman atau posting yang dibangun di Divi atau WordPress. Kami akan menambahkan ini ke template kami sebelum membuat ajakan bertindak slide-in pertama kami.

Tambahkan Baris Satu Kolom

Untuk memulai, tambahkan baris satu kolom ke bagian reguler.

Tambahkan Modul Konten Posting

Kemudian tambahkan modul konten posting ke baris.

Pengaturan Baris

Setelah itu, perbarui pengaturan baris sebagai berikut:

• Lebar: 100%
• Lebar Maks: 100%
• Padding: 0px atas, 0px bawah

Membuat Ajakan Bertindak Slide-In Kiri Atas

Sekarang modul konten posting kami sudah siap, kami siap untuk mulai menambahkan ajakan bertindak slide-in pertama kami ke sudut kiri atas templat halaman.

Tambahkan Bagian

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

Tambahkan bagian reguler baru ke tata letak template.

Tambahkan Baris Satu Kolom

Kemudian berikan bagian itu satu baris kolom.

Pengaturan Bagian

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

• Warna Kiri Gradien Latar Belakang:
• Warna Kanan Gradien Latar Belakang:
• Tampilkan Gradien Gambar Di Atas: YA
• Gambar Latar Belakang: [masukkan gambar]
• Lebar: 320 piksel
• Margin: 320px kiri
• Padding: 0px atas, 0px bawah
• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Penundaan Animasi: 2000ms

Kemudian lompati tab lanjutan dan tambahkan Kelas CSS dan indeks Z berikut:

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

Dan tambahkan cuplikan CSS khusus berikut ke Elemen Utama:

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

Kelas CSS diperlukan agar kita dapat menargetkan bagian dengan kode nanti. CSS khusus akan memposisikan bagian di kiri atas templat halaman dalam posisi tetap (atau lengket). Posisi "kiri: -320px" harus memindahkan seluruh bagian (yang lebarnya 320px) di luar jendela browser. Tapi kami memiliki margin kiri 320px untuk mengembalikannya ke tampilan. Alasan mengapa ini dibuat dengan cara ini adalah agar kita dapat mengaktifkan dan menonaktifkan nilai margin saat mengklik ikon “x”. Ini akan menyebabkan CTA meluncur masuk dan keluar dari tampilan.

Pengaturan Baris

Sekarang mari kita perbarui pengaturan baris sebagai berikut:

• Gunakan Lebar Talang Kustom: YA
• Lebar Talang: 1
• Lebar: 100%
• Padding: 0px atas, 0px bawah

Tambahkan Modul Ajakan Bertindak

Di dalam baris, tambahkan Modul Ajakan Bertindak.

Pengaturan Panggilan untuk Bertindak

Kemudian perbarui pengaturan ajakan bertindak.

Isi

• Judul: [masukkan teks pilihan]
• Tombol: [masukkan teks pilihan]
• Isi: [masukkan teks pilihan]
• URL Tautan Tombol: [masukkan url aktual atau #]

Selanjutnya, hapus warna latar belakang default untuk mengungkapkan latar belakang bagian yang kami tambahkan sebelumnya.

Pengaturan Desain (Teks, tombol, dan bantalan)

Di bawah tab desain, perbarui yang berikut ini:

• Judul Font: Lato
• Judul Font Berat: Berat
• Tinggi Baris Judul: 1.3em
• Font Tubuh: Lato
• Berat Huruf Tubuh: Tebal
• Gunakan Gaya Kustom untuk Tombol: YA
• Ukuran Teks Tombol: 15px
• Lebar Batas Tombol: 0px
• Jarak Huruf Tombol: 1px
• Font Tombol: Lato
• Berat Huruf Tombol: Berat
• Gaya Font Tombol: TT
• Tombol Padding: 12px atas, 12px bawah, 32px kiri, 32px kanan
• padding: 40px atas, 40px bawah, 40px kiri, 40px kanan

Tambahkan Ikon Buka dan Tutup dengan Modul Blurb

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

Pengaturan Blurb

Perbarui pengaturan desain berikut.

Isi

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

Desain

• Warna Ikon: #000000
• Gunakan Ukuran Font Ikon: YA
• Ukuran Font Ikon: 40px
• Lebar: 40px
• Tinggi: 40px
• Sudut Bulat: 50%
• Transformasi Putar sumbu Z: 135deg

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.

Ingatlah bahwa kita masih perlu menambahkan beberapa kode untuk menambahkan fungsionalitas tutup dan buka saat mengklik ikon “x”. Kami akan menambahkan kode setelah kami membuat ajakan bertindak di masing-masing dari empat sudut template.

Membuat Ajakan Bertindak Slide-In Kanan Atas

Dengan ajakan bertindak slide-in pertama yang dibuat, kita dapat mempercepat proses pembuatan sisa CTA dengan menduplikasi bagian yang sudah dibuat. Selanjutnya, kita akan membuat ajakan bertindak slide-in untuk sudut kanan atas.

Bagian Duplikat

Terapkan mode tampilan gambar rangka dan kemudian duplikat bagian CTA kiri atas.

Perbarui Pengaturan Bagian

Kemudian perbarui pengaturan bagian baru sebagai berikut:

• margin: 320px kanan
• arah animasi: kiri

Kemudian perbarui CSS khusus di Elemen Utama dengan mengganti "kiri" dengan "kanan". Berikut cuplikan lengkapnya:

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

Perbarui Pengaturan Modul Blurb

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

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

Hasil

Sekarang Anda akan melihat ajakan bertindak slide-in di kanan atas templat halaman.

Membuat Ajakan Bertindak Slide-In Kiri Bawah

Bagian Duplikat

Untuk membuat ajakan bertindak slide-in di sudut kiri bawah templat halaman, duplikat bagian CTA kiri atas di bagian atas tata letak halaman. Beri label bagian duplikat "CTA Kiri Bawah" lalu pindahkan ke bawah bagian konten posting.

Perbarui Pengaturan Bagian

Kemudian buka bagian setting update elemen utama CSS dengan mengganti “top:80px” dengan “bottom:0px”. Berikut cuplikan terakhirnya:

position: fixed;
bottom: 0px;
left: -320px;

Perbarui Pengaturan Modul Blurb

Kemudian perbarui CSS elemen utama Modul Blurb dengan mengganti "bottom: 0px" dengan "top: 0px". Berikut cuplikan terakhirnya:

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

Hasil

Sekarang lihat ajakan bertindak slide-in kiri bawah di halaman langsung.

Membuat Ajakan Bertindak Slide-In Kanan Bawah

Bagian Duplikat

Untuk membuat ajakan bertindak slide-in kanan bawah, duplikat bagian CTA kanan atas dan pindahkan bagian duplikat di bawah bagian konten posting.

Perbarui Pengaturan Bagian

Buka pengaturan bagian dan perbarui CSS elemen utama dengan mengganti "top: 80px;" dengan "bawah: 0px;". Berikut cuplikan terakhirnya:

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

Perbarui Pengaturan Modul Blurb

Kemudian buka pengaturan modul blurb dan perbarui elemen utama CSS dengan mengganti “bottom: 0px;” dengan "atas: 0px;". Berikut cuplikan terakhirnya:

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

Hasil

Sekarang lihat ajakan bertindak slide-in kanan bawah di halaman langsung.

Menambahkan Cuplikan Kode jQuery dan CSS Kustom menggunakan Modul Kode

Untuk langkah terakhir, kita perlu menambahkan beberapa jQuery dan CSS khusus sehingga kita bisa mendapatkan fungsionalitas buka dan tutup untuk setiap CTA slide-in.

Tambahkan Modul Kode

Tambahkan modul kode ke salah satu bagian dalam tata letak.

Tempel Kode

Kemudian buka pengaturan kode dan rekatkan kode berikut ke dalam kotak 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>

Pikiran Akhir

Dengan Divi, membuat ajakan bertindak slide-in tidak sulit sama sekali. Dan karena Anda dapat menggunakan pembuat tema untuk menambahkan ajakan bertindak ke templat halaman, Anda akan memiliki kontrol lebih besar atas halaman apa yang akan menampilkan CTA tersebut. Jangan ragu untuk meningkatkan penundaan animasi untuk bagian CTA sehingga pengguna akan melihat animasi slide-in CTA sedikit kemudian (atau lebih cepat) setelah pemuatan halaman. Anda juga dapat menggunakan prospek Divi dan mengaktifkan pengujian terpisah untuk meningkatkan konversi CTA tersebut dan mencari tahu sudut mana yang akan memiliki konversi terbaik.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!