Cara Menggunakan Divi untuk Memandu Orang Melalui Berbagai Langkah Lengket

Saat mencoba meyakinkan pengunjung untuk menjangkau melalui situs web Anda, memberi mereka insentif yang tepat adalah kuncinya. Saat memikirkan insentif, ajakan bertindak yang jelas dan tak tertahankan langsung muncul di benak Anda. Tetapi CTA biasanya merupakan bagian terakhir dari proses akuisisi. Kemungkinan besar Anda akan membangun jalan Anda ke sana dengan menunjukkan nilai perusahaan Anda. Salah satu cara terbaik untuk melakukannya adalah dengan membagikan pendekatan dan proposisi nilai unik Anda. Jika Anda sedang mencari cara yang mulus untuk merancang pendekatan Anda, Anda akan menyukai tutorial ini. Hari ini, kami akan menunjukkan kepada Anda cara menyertakan berbagai langkah tempel yang berubah saat orang menggulir dan membaca. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letak Sticky Steps secara GRATIS

Untuk meletakkan tangan Anda pada tata letak langkah lengket gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. 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!

1. Buat Desain Bagian

Tambahkan Bagian Reguler

Latar Belakang Gradien

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian itu dan terapkan latar belakang gradien:

• Warna 1: #ffffff
• Warna 2: #e5e5e5
• Tipe Gradien: Linier
• Arah Gradien: 150deg

Gambar latar belakang

Unggah gambar latar belakang berikutnya. Anda dapat menemukan yang kami gunakan sepanjang tutorial ini di folder unduhan yang dapat Anda temukan di awal posting ini. Anda dapat menggunakan gambar latar belakang secara gratis dan tanpa batasan apa pun.

• Ukuran Gambar Latar Belakang: Sesuai
• Posisi Gambar Latar Belakang: Kiri Atas

Jarak

Hapus padding bawah default bagian dengan menambahkan "0px".

• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama ke bagian menggunakan struktur kolom berikut:

Warna latar belakang

Tanpa menambahkan modul, buka pengaturan baris dan ubah warna latar belakang.

• Warna Latar Belakang: rgba(130,100,239,0.09)

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran yang sesuai:

• Samakan Tinggi Kolom: Ya
• Penjajaran Baris: Pusat

Jarak

Terapkan beberapa nilai spasi kustom juga.

• Margin Atas: 5%
• Padding Atas: 0px
• Padding Bawah: 0px
• Padding Kiri: 5%
• Padding Kanan: 5%

Berbatasan

Kemudian, buka pengaturan perbatasan dan gunakan beberapa sudut membulat.

• Semua Sudut: 10px

Meluap

Kami juga mengubah overflow baris menjadi terlihat. Ini akan memastikan bahwa segala sesuatu yang melampaui penampung baris tidak akan disembunyikan.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Pengaturan Kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 5%
• Padding Bawah: 5%

Pengaturan Kolom 2

Latar Belakang Gradien

Selanjutnya, kita akan menambahkan latar belakang gradien ke kolom 2.

• Warna 1: #7b47ff
• Warna 2: #6929aa
• Tipe Gradien: Linier
• Arah Gradien: 158deg

Jarak

Kami akan menambahkan beberapa bantalan khusus ke kolom itu juga.

• Padding Atas: 5%
• Padding Bawah: 5%
• Padding Kiri: 5%
• Padding Kanan: 5%

Berbatasan

Seiring dengan beberapa sudut membulat.

• Semua Sudut: 10px

Transformasi Skala

Dan kami akan meningkatkan ukuran kolom dalam pengaturan transformasi dengan menerapkan nilai skala transformasi berikut:

• Keduanya: 107%

Tambahkan Modul Teks ke Kolom 1

Tambahkan Konten H3

Saatnya menambahkan modul, dimulai dengan Modul Teks di kolom 1. Masukkan beberapa konten H3 pilihan Anda.

Pengaturan Teks H3

Pindah ke tab desain modul dan ubah pengaturan teks H3 yang sesuai:

• Judul 3 Font: Poppins
• Judul 3 Warna Teks: #6929aa
• Judul 2 Ukuran Teks: 35px
• Spasi Judul 3 Huruf: -1px

Tambahkan Modul Pembagi ke Kolom 1

Visibilitas

Selanjutnya, kita akan membuat Modul Pembagi ke kolom 1. Pastikan opsi “Tampilkan Pembagi” diaktifkan.

• Tampilkan Pembagi: Ya

Garis

Pindah ke tab desain modul dan ubah warna garis.

• Warna Garis: #f5ca4e

Perekat

Ubah juga pengaturan ukuran.

• Berat Pembagi: 6px
• Lebar: 20%
• Tinggi: 6px

Berbatasan

Selesaikan pengaturan modul dengan memasukkan beberapa sudut membulat di pengaturan perbatasan.

• Semua Sudut: 20px

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Di kolom 2, satu-satunya modul yang kita butuhkan adalah Modul Teks dengan beberapa konten deskripsi.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks sebagai berikut:

• Font Teks: Tampilan Playfair
• Ukuran Teks: 16px
• Tinggi Baris Teks: 2.1em

Jarak

Selesaikan pengaturan modul dengan menambahkan beberapa nilai padding khusus.

• Padding Atas: 5%
• Padding Bawah: 5%
• Padding Kiri: 5%
• Padding Kanan: 5%

Klon Seluruh Baris Sebanyak yang Dibutuhkan

Setelah Anda menyelesaikan baris pertama, Anda dapat mengkloningnya sebanyak yang Anda inginkan, tergantung pada seberapa banyak info yang ingin Anda bagikan tentang langkah pertama Anda.

Ubah Semua Salin

Pastikan Anda mengubah semua salinan dalam baris duplikat.

2. Tambahkan Step Row Bar ke Bawah Bagian

Tambahkan Baris Baru

Struktur Kolom

Sekarang setelah kita memiliki semua baris penjelas di tempatnya, kita dapat menambahkan bilah baris langkah lengket kita. Tambahkan baris baru menggunakan struktur kolom berikut:

Latar Belakang Gradien

Buka pengaturan baris dan gunakan latar belakang gradien.

• Warna 1: #ffdf51
• Warna 2: #e5ac49
• Tipe Gradien: Linier
• Arah Gradien: 150deg

Perekat

Pindah ke tab desain baris dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Penjajaran Baris: Pusat

Jarak

Terapkan beberapa nilai spasi kustom berikutnya.

• Margin Atas: 5%
• Padding Atas: 0px
• Padding Bawah: 0px

Berbatasan

Kemudian, buka pengaturan perbatasan dan tambahkan beberapa sudut membulat.

• Semua Sudut: 10px

Bayangan Kotak

Terapkan juga bayangan kotak berikut:

• Kekuatan Buram Bayangan Kotak: 50px
• Warna Bayangan: rgba (0,0,0,0.13)

Meluap

Kemudian, navigasikan ke tab lanjutan dan atur overflow menjadi terlihat.

• Luapan Horisontal: Terlihat
• Luapan Vertikal: Terlihat

Spasi Kolom 2

Selanjutnya, buka pengaturan kolom 2 dan gunakan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 1%
• Padding Bawah: 1%

Spasi Kolom 3

Kami menambahkan beberapa bantalan atas dan bawah khusus ke kolom 3 juga.

• Padding Atas: 2%
• Padding Bawah: 2%

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Saatnya menambahkan modul ke bilah baris langkah lengket kami. Tambahkan Modul Teks ke kolom 1 dan sebutkan langkahnya di kotak konten.

Latar Belakang Gradien

Selanjutnya, terapkan latar belakang gradien.

• Warna 1: #7b47ff
• Warna 2: #6929aa
• Tipe Gradien: Linier
• Arah Gradien: 158deg

Pengaturan Teks

Pindah ke tab desain modul dan gaya teks yang sesuai:

• Font Teks: Poppins
• Berat Font Teks: Tebal
• Warna Teks: #ffffff
• Ukuran Teks: 27px

Perekat

Buat beberapa perubahan pada pengaturan ukuran juga.

• Lebar: 60%
• Penyelarasan Modul: Pusat

Jarak

Kemudian, tambahkan beberapa bantalan atas dan bawah khusus ke pengaturan jarak.

• Padding Atas: 20px
• Padding Bawah: 20px

Berbatasan

Tambahkan beberapa sudut membulat ke pengaturan perbatasan berikutnya.

• Semua Sudut: 10px

Bayangan Kotak

Kami juga menggunakan bayangan kotak halus.

• Warna Bayangan: rgba(0,0,0,0.3)

Ubah Terjemahan

Dan kami akan menyelesaikan pengaturan modul dengan sedikit memposisikan ulang modul menggunakan pengaturan terjemahan transformasi Divi.

• Kanan: -20px

Tambahkan Modul Teks ke Kolom 2

Tambahkan Konten H2

Di kolom 2, kami menambahkan Modul Teks dengan beberapa konten H2 yang menjelaskan langkah yang kami lakukan.

Pengaturan Teks H2

Pindah ke tab desain modul dan gaya pengaturan teks H2 sebagai berikut:

• Judul 2 Font: Poppins
• Judul 2 Berat Font: Sedang
• Judul 2 Perataan Teks:
  • Desktop: Kiri
  • Tablet & Telepon: Pusat
• Judul 2 Warna Teks: #6d40ed
• Spasi Judul 2 Huruf: -1px

Jarak

Tambahkan beberapa bantalan atas dan bawah khusus juga.

• Padding Atas: 5%
• Padding Bawah: 5%

Tambahkan Modul Teks ke Kolom 3

Tambah isi

Ke kolom berikutnya dan terakhir. Tambahkan Modul Teks dengan beberapa konten deskripsi.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Tampilan Playfair
• Berat Font Teks: Tebal
• Warna Teks: rgba(109,64,237.0.46)
• Ukuran Teks: 20px
• Perataan Teks:
  • Desktop: Kiri
  • Tablet & Telepon: Pusat

3. Terapkan Efek Lengket ke Baris Baris Langkah

Pengaturan Baris Lengket

Sekarang setelah desain bilah baris langkah lengket kami telah selesai, saatnya untuk membuatnya menempel ke bawah. Buka pengaturan baris, buka tab lanjutan dan terapkan pengaturan posisi lengket berikut:

• Posisi Lengket: Menempel ke Bawah
• Offset Bawah Lengket: 1px
• Batas Lengket Atas: Bagian
• Offset Dari Elemen Lengket Sekitarnya: Ya
• Default Transisi dan Gaya Lengket: Ya

Filter Baris Lengket

Dalam keadaan default, kami tidak ingin bilah baris terlihat. Namun, setelah menjadi lengket, kami ingin itu muncul. Untuk mewujudkannya, kami akan memodifikasi filter opacity di pengaturan filter:

• Bawaan: 0%
• Lengket: 100%

4. Gunakan Kembali Seluruh Bagian untuk Langkah Selanjutnya

Bagian Klon Sesering yang Dibutuhkan

Sekarang bagian pertama kami, yang didedikasikan untuk langkah #1, telah dibuat, kami dapat menggunakan kembali seluruh bagian berdasarkan jumlah langkah yang kami miliki.

Ubah Semua Salinan di Bagian Duplikat

Pastikan Anda mengubah semua salinan di bagian duplikat. Itu dia!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan desain pendekatan situs web Anda. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menggunakan opsi tempel Divi untuk membuat bilah langkah tempel berbeda yang akan membantu pengunjung Anda menavigasi melalui berbagai bagian pendekatan Anda. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.