Membuat CTA "Memulai" yang Mengungkapkan Beberapa Opsi saat Melayang

Banyak perusahaan akan memasukkan CTA "memulai" di beranda sana. Biasanya ini adalah ajakan bertindak utama pada halaman, karena ini akan mengarahkan pengguna melalui semacam proses yang dimaksudkan. Ini bisa berupa tombol "mulai sekarang" sederhana yang menautkan ke halaman lain. Atau bisa juga bagian dari halaman yang menyertakan instruksi "memulai" dan/atau opsi berbeda yang dapat diambil pengguna untuk memulai proses yang diinginkan oleh perusahaan.

Dalam tutorial ini, kami akan menunjukkan cara membuat CTA "Memulai" yang akan menampilkan beberapa opsi "Memulai" saat mengarahkan kursor. Menggunakan Divi, kami akan mendesain bagian agar muncul sebagai tombol besar. Kemudian saat mengarahkan kursor ke tombol, opsi akan muncul seperti penggeser vertikal yang akan membuka slide berikutnya.

Desainnya elegan dan fungsinya bisa berguna dalam banyak hal.

Mari kita mulai.

Sneak Peek

Berikut ini sekilas CTA "Memulai" yang akan kita buat dalam tutorial ini.

Unduh Tata Letak Divi CTA “Memulai” GRATIS

Untuk mendapatkan desain 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 seret file json ke Divi Builder.

Langsung saja ke tutorialnya ya?

Apa yang Anda Butuhkan untuk Memulai

Untuk memulai, Anda harus memiliki yang berikut:

1. Tema Divi diinstal dan aktif
2. Halaman baru dibuat untuk membangun dari awal di ujung depan (pembuat visual)
3. Gambar yang akan digunakan untuk konten tiruan

Setelah itu, Anda akan memiliki kanvas kosong untuk mulai mendesain di Divi.

Menerapkan Desain CTA “Mulai di Sini” di Divi

Ide dasar di balik desain ini adalah untuk memindahkan konten bagian ke atas saat mengarahkan kursor ke bagian tersebut. Untuk melakukan ini, kita perlu memastikan bagian kita memiliki ketinggian tetap dengan overflow tersembunyi. Ini akan menyembunyikan opsi CTA sebelum status hover. Kemudian kita dapat menggunakan margin untuk memposisikan modul kita dan padding atas untuk memindahkan konten ke tampilan saat melayang.

Mari kita mulai dengan bagian.

Membuat Bagian

Untuk memulai, buat bagian reguler dengan baris satu kolom. Kemudian sebelum kita menambahkan modul apa pun, mari perbarui pengaturan bagian.

Buka pengaturan bagian dan perbarui yang berikut ini:

Warna Latar Belakang: #2b87da
Lebar: 90%
Lebar Maks: 1100px
Perataan Bagian: tengah
Margin: 6vw atas, 6vw bawah (hanya untuk memberikan sedikit ruang untuk bernafas)
Padding (desktop): 300px atas, 0px bawah
Padding (tablet): 0px atas, 15% bawah

Kemudian tambahkan beberapa sudut membulat. Ini akan membuat desain seperti tombol kita setiap kali kita memberi bagian ketinggian maksimal.

Sudut Bulat: 140px (desktop), 20px (arahkan kursor), 10px (tablet)

Kemudian beri bayangan kotak (lihat tangkapan layar).

Kami tidak akan menambahkan semua pengaturan yang diperlukan untuk desain akhir pada saat ini. Kita harus kembali dan memberikan ketinggian tetap dan efek melayang. Tapi untuk sekarang mari kita tambahkan kontennya.

Membuat Baris Pertama Konten

Buka pengaturan untuk satu baris kolom yang Anda buat dan perbarui yang berikut:

Lebar: 100%
Padding: 0px atas, 0px bawah, 5% kiri, 5% kanan

Di dalam satu baris kolom, tambahkan modul teks.

Kemudian tambahkan heading h2 berikut ke konten body.

<h2>Get Started Here...</h2>

Perbarui pengaturan desain sebagai berikut:

Judul 2 Font: Nunito
Judul 2 Berat Font: Tebal
Judul 2 Warna Teks: #ffffff
Judul 2 Ukuran Teks: 78px (desktop dan tablet), 46px (ponsel)
Lebar Maks: 500px
Tinggi: 300px (desktop), otomatis (tablet dan ponsel)
Margin: -300px atas (desktop), 0px atas (tablet dan ponsel)
Padding: 7% atas

Tinggi 300px dan margin atas -300px membawa modul teks ke atas untuk mengisi padding bagian atas 300px. Nanti setiap kali kita menghilangkan padding bagian atas saat mengarahkan kursor, modul teks akan menggulir ke atas di atas bagian tersebut.

Membuat Baris Kedua Konten

Baris konten kedua adalah tempat kami akan menambahkan opsi CTA kami. Lanjutkan dan tambahkan baris baru dengan tata letak tiga kolom.

Kemudian perbarui pengaturan baris sebagai berikut:

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

Kemudian tambahkan modul uraian di kolom 1.

Kemudian perbarui pengaturan blurb sebagai berikut:

Keluarkan teks isi default dan tinggalkan Judul.

Kemudian Tambahkan ikon gambar (90 X 90). Atau Anda dapat menggunakan ikon Divi biasa jika Anda mau.

Tambahkan latar belakang dan perbarui desain teks judul.

Warna Latar Belakang: #ffffff
Judul Font: Nunito
Judul Font Berat: Ultra Tebal
Judul Font Gaya: TT
Perataan Teks Judul: Tengah
Judul Teks warna: #2b87da
Ukuran Teks Judul: 14px

Sebelum kita bisa membuat blurb melingkar, pertama-tama kita perlu memberikan blurb dengan tinggi dan lebar yang sama. Kemudian kita bisa menggunakan spasi untuk menyelaraskan konten blurb dan blurb di tengah.

Lebar Konten: 200 piksel (desktop), 250 piksel (tablet)
Lebar: 250 piksel (desktop), 300 piksel (tablet)
Penyelarasan Modul: tengah
Tinggi: 250 piksel (desktop), 300 piksel (tablet)
Margin: 25px atas, 0px bawah
Padding: 50px atas (desktop), 75px atas (tablet dan ponsel)

Untuk melengkapi desain lingkaran, berikan blurb sudut membulat dan bayangan kotak.

Sudut Bulat: 50%
Bayangan Kotak: lihat tangkapan layar

Itu menangani uraian pertama kami. Untuk membuat dua berikutnya. Salin uraian dan tempel ke kolom 2 dan kolom 3. Kemudian perbarui ikon gambar untuk masing-masing. Seharusnya terlihat seperti berikut:

Sentuhan Terakhir ke Bagian

Untuk menyelesaikan desain CTA "Memulai", kita perlu memperbarui bagian ini sedikit lagi. Perbarui pengaturan bagian berikut:

Tinggi: 300px (desktop), otomatis (tablet dan ponsel)
Luapan Horisontal: tersembunyi
Overflow Vertikal: tersembunyi

Ini akan menjaga tinggi bagian tetap sama dengan konten di baris 1 dan baris 2. Menyembunyikan overflow akan membuat konten di baris 2 tetap tersembunyi sampai kita menampilkannya saat mengarahkan kursor.

Untuk menampilkan konten baris 2, kita perlu mengeluarkan padding atas bagian saat mengarahkan kursor.

Padding (arahkan kursor): 0px atas

Sekarang lihat hasilnya sejauh ini. Konten akan menggulir ke atas untuk mengungkapkan konten di baris 2 yang menunjukkan tiga opsi CTA.

Untuk membuat bagian tampak lebih seperti tombol, kita dapat menggunakan opsi transformasi untuk memperkecilnya dan kemudian mengembalikannya ke ukuran biasa saat mengarahkan kursor. Perbarui opsi transformasi berikut untuk bagian.

Skala Transform (desktop): 70%
Skala Transform (arahkan kursor): 100%
Skala Transform (tablet): 100%

Sekarang tambahkan grafik gambar latar belakang (500 X 500) untuk mengambil ukuran bagian yang tepat.

Gambar Latar Belakang: sisipkan gambar
Ukuran Gambar Latar Belakang: ukuran sebenarnya
Posisi Gambar Latar Belakang: Kanan Tengah (desktop), Kanan atas (tablet), Kiri atas (ponsel)

Menambahkan URL Tautan ke Blurb dan Menskalakannya saat Melayang

Karena uraian kami benar-benar berfungsi sebagai tombol lingkaran, kami perlu menambahkan URL tautan modul ke setiap uraian. Anda tentu saja perlu menambahkan sendiri agar sesuai dengan kebutuhan Anda.

Karena uraiannya disembunyikan di pembuat visual, alihkan mode tampilan gambar rangka dan perbarui setiap pengaturan uraian dengan URL tautan modul.

Kemudian tetap dalam mode tampilan gambar rangka dan gunakan multiselect untuk memilih ketiga uraian. Dan buka pengaturan salah satu uraian untuk memperbarui pengaturan elemen untuk ketiganya. Kemudian perbarui opsi transformasi sebagai berikut:

Skala Transform (arahkan kursor): 105%

Itu dia!

Hasil akhir

Mari kita lihat desain akhir CTA "Memulai".

Dan inilah desain pada tablet dan ponsel.

Pikiran Akhir

CTA "Memulai" sudah umum di web saat ini. Semoga tutorial ini akan membantu Anda membawanya ke level berikutnya. Dan, jangan takut untuk memikirkan beberapa cara lain untuk menggunakan fungsi ini. Pikirkan tentang itu. Anda dapat menambahkan konten apa pun yang Anda inginkan ke bagian ini!

Jangan ragu untuk membagikan pemikiran Anda di komentar di bawah.

Saya berharap mendengar kabar dari kamu.

Bersulang!