Cara Membuat CTA "Memperluas" seperti Tema Elegan

Diterbitkan: 2017-05-14

Elegant Themes baru-baru ini mengubah desain situs web mereka untuk menyertakan beberapa fitur yang patut ditiru. Pada postingan sebelumnya, saya menulis tentang bagaimana menerapkan desain blog Tema Elegan dan menduplikasi menu utama. Tapi, untuk postingan kali ini, saya akan menunjukkan cara menduplikasi call to action (CTA) Tema Elegan. CTA ini terletak di bagian bawah dekat footer situs web Elegant Themes. Apa yang istimewa dari CTA ini adalah fungsionalitas tambahan yang memicu animasi setelah pengguna menggulir ke elemen.

Hari ini, saya akan menunjukkan cara untuk menduplikasi tidak hanya gaya CTA ini tetapi juga fungsi animasi. Ini dilakukan dengan menggunakan Modul Kode Divi dengan beberapa CSS khusus dan beberapa baris JavaScript. Namun, Anda dapat dengan mudah memperluas fungsionalitas animasi yang sama pada modul Divi mana pun.

Mari kita mulai.

Menerapkan Desain Dengan Divi

Membangun Ajakan Bertindak Menggunakan Modul Kode

Menggunakan Visual Builder, tambahkan bagian reguler baru dengan kolom baris lebar penuh.

Selanjutnya tambahkan Modul Kode ke baris Anda.

Di bawah Pengaturan Kode Umum, tambahkan html berikut ke bagian konten. 

<div class="cta-info">

<h3>401,632 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web</h3>

<p>We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!</p>

<a href="ENTER URL HERE" id="sign">Sign Up Today</a>

</div>

Html ini akan berfungsi sebagai konten untuk CTA Anda. Anda akan melihat judul utama CTA dibungkus dengan tag h3. Sub-judul dibungkus dengan tag p standar. Dan tautan (segera menjadi tombol) memiliki ID CSS yang disebut "tanda".

Juga div dengan kelas "cta-info" membungkus konten. Hal ini penting untuk tujuan styling nanti.

Simpan perubahan

Sekarang kita perlu menambahkan ID CSS baru ke bagian baru Anda. Klik ikon pengaturan bagian untuk membuka pengaturan bagian.

Di bawah tab CSS di Pengaturan Bagian, tambahkan ID CSS "cta-section" dan simpan perubahan perubahan Anda.

Selanjutnya kita perlu menambahkan ID CSS ke baris Anda. Klik pada ikon pengaturan baris.

Di bawah tab CSS, perbarui pengaturan baris dengan ID CSS baru yang disebut "cta-row".

Simpan perubahan

Itu saja yang kita butuhkan untuk tata letak CTA. Dengan konten kami di tempat dan ID CSS kami, kami siap untuk menambahkan beberapa CSS khusus.

Menambahkan CSS Kustom

Buka Divi → Penyesuai Tema → CSS tambahan (atau Anda dapat memperbarui file style.css tema anak Anda secara langsung). Di dalam kotak kode, tambahkan CSS berikut: 

/* Animated Call To Action */

/*** style CTA section and row when waypoint is not triggered ***/
#cta-section {
    padding: 0 80px;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;
}
#cta-row {
    margin: 80px auto 0 auto;
    padding: 80px 0;
    max-width: 100%;
    background-color: #6c17dc;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    box-shadow: 0px 10px 50px #939fa9;
    transition: all .8s ease;
    -moz-transition: all .8s ease;
    -webkit-transition: all .8s ease;

}
/*** Style CTA section and row once waypoint toggles animate-cta class ***/
#cta-section.animate-cta {
    padding: 46px 0 66px 0;
    overflow: hidden;
}
.animate-cta #cta-row {
    margin: 0 auto 0 auto;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    background-color: #4843d2;
    width: inherit;
}
/*** style button ***/

#sign {
    display: inline-block;
    width: 246px;   
    color: #fff;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 600;
    background-color: #f92c8b;
    padding: 20px 40px;
    margin-top: 30px;
    border-radius: 60px;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    transition: all .8s ease;
    -webkit-transition: all .8s ease;
    -webkit-transition: all .8s ease;
    box-shadow: 0px 5px 20px #231f92;
    -moz-box-shadow: 0px 5px 20px #231f92;
    -webkit-box-shadow: 0px 10px 50px #231f92;
}
#sign:hover {
    background-color: #2cc2e6;
    box-shadow: 0px 20px 80px #1b1867;
    -moz-box-shadow: 0px 20px 80px #1b1867;
    -webkit-box-shadow: 0px 20px 80px #1b1867;
}

/*** style content within the code module ***/

.cta-info{
    color: #fff;
    text-align: center;
    margin: 0 auto !important;
    max-width: 1080px;
    padding: 50px;
}
.cta-info h3 {
    color: #fff;
    font-size: 35px;
    line-height: 1.3em;
}

Sekarang CTA Anda mulai terlihat. Yang tersisa untuk kita lakukan adalah menambahkan skrip pendek untuk memberi CTA efek animasi yang menarik begitu CTA terlihat di viewport browser Anda saat menggulir.

Menambahkan Skrip Waypoint untuk Menganimasikan CTA Saat Menggulir ke Elemen

Salah satu cara termudah untuk memicu fungsi saat Anda menggulir ke elemen di halaman Anda adalah dengan menggunakan pustaka JavaScript yang disebut Waypoints. Karena Divi sudah dilengkapi dengan Waypoint yang diinstal (yay!), yang perlu kita lakukan hanyalah menyertakan skrip yang menggunakan library.

Buka Divi → Opsi Tema → Integrasi dan rekatkan skrip berikut di bagian “Tambahkan kode ke kepala blog Anda”.

<script>
jQuery(document).ready(function(){
	jQuery('#cta-section').waypoint(function() {
		jQuery('#cta-section').toggleClass('animate-cta');
	}, {offset: '80%'});
});
</script>

Skrip ini menambahkan fungsi yang akan mengaktifkan kelas yang disebut "animate-cta" saat Anda menggulir ke bagian CTA (dengan ID CSS "cta-section"). Perhatikan bagian kode yang menunjukkan offset sebagai 80%. Ini berarti fungsi akan dipicu ketika bagian atas CTA adalah 80% dari bagian atas jendela browser. Jika Anda ingin menunda fungsi untuk memicu ketika CTA mencapai bagian tengah halaman, Anda dapat mengubah nilai offset menjadi sekitar 50%. Namun, jika CTA Anda akan berada di bagian paling bawah halaman, Anda harus tetap menggunakan nilai yang mendekati 80% – 90%. Ini karena CTA Anda mungkin tidak pernah mencapai bagian tengah jendela browser Anda saat menggulir dan, oleh karena itu, tidak akan dipicu.

Itu dia!

Sekarang mari kita lihat proyek yang sudah selesai.

Menambahkan Fungsi CTA ke Modul lain

Jika Anda ingin menambahkan fungsionalitas CTA ini ke modul lain dalam Divi Builder, ini cukup mudah dilakukan. Berikut adalah langkah-langkah untuk Anda mulai:

  1. Buat bagian standar dengan baris lebar penuh (kolom tunggal).
  2. Di Pengaturan Bagian, di bawah CSS, tambahkan ID CSS "cta-section".
  3. Di Pengaturan Baris, di bawah CSS, tambahkan ID CSS "cta-row" DAN tambahkan Kelas CSS Kolom "cta-column".
  4. Masukkan CSS khusus berikut:
    5.  .cta-column.et_pb_column:last-child {
 margin: 0 auto;
 margin-right: auto !important;
 max-width: 1080px;
 float: none;
}
  5. Tambahkan modul apa pun yang Anda inginkan ke baris (mis. Modul Ajakan Bertindak) dan gayakan sesuai dengan itu. Anda mungkin ingin menambahkan latar belakang transparan ke modul Anda sehingga tidak tumpang tindih dengan warna latar belakang bagian CTA Anda.

Catatan Penting: Anda tidak dapat menambahkan lebih dari satu CTA dengan fungsi ini per halaman.

Pikiran Akhir

Menduplikasi CTA Tema Elegan adalah fitur yang berguna untuk ditambahkan ke proyek apa pun di masa mendatang. Itu menarik perhatian pembaca tanpa terlalu sombong. Menggunakan Modul Kode memberi pengembang lebih banyak fleksibilitas untuk menambahkan html khusus dalam CTA. Dan, fungsi animasi waypoint tidak terbatas pada Modul Kode. Anda juga dapat menambahkan ID CSS yang diperlukan ke bagian, baris, dan kolom mana pun untuk membuat CTA dengan modul apa pun menggunakan Divi Builder.

Saya berharap untuk mendengar dari Anda di komentar di bawah.

Bersulang!