Cara Menambahkan Kartu Tentang Mengambang ke Situs Divi Anda

Di hampir setiap situs web yang Anda kunjungi, elemen muncul dan menempel di halaman. Peringatan cookie dan keikutsertaan, pendaftaran email, dan kotak obrolan. Kita semua cenderung mengabaikannya di beberapa titik, menjadi buta terhadap apa pun yang coba disampaikan situs web kepada kita. Kita tinggal klik tanda X tanpa membaca. Tapi itu tidak berarti elemen-elemen semacam ini tidak berguna dan tidak memiliki tempat. Dengan Divi, Anda dapat dengan mudah membuat kartu mengambang yang menambahkan nilai ke situs Anda, menjelaskan siapa Anda sebenarnya dan apa yang dilakukan merek Anda. Mari kita lihat betapa mudahnya.

Pratinjau

Desktop

Seluler

1. Buat Template Halaman

Hal pertama yang ingin Anda lakukan adalah memutuskan halaman apa yang ingin Anda sertakan kartu mengambang ini. Anda mungkin menginginkannya di setiap halaman situs web Anda, atau Anda mungkin hanya menginginkannya di halaman arahan tertentu. Apa pun itu, Anda dapat menggunakan Divi Theme Builder untuk mengaturnya. Baik sebagai template global atau template yang hanya berlaku untuk halaman tertentu.

Gunakan Pembuat Tema untuk Membuat Template

Untuk memulai, buka Divi – Pembuat Tema di dasbor WordPress Anda. Pilih bagian Badan Kustom dari halaman tempat Anda ingin menerapkan kartu mengambang atau Badan Global untuk menerapkannya di mana saja.

Setelah Anda memuat Divi Visual Builder, pilih Mulai dari Awal saat diberi pilihan.

Tambahkan Baris 1 Kolom dan Pasang Modul Konten

Dan kemudian pilih satu baris kolom saat diminta.

Selanjutnya, Anda ingin memilih modul Post Content . Ini adalah contoh fitur konten dinamis kami. Modul menampilkan desain yang menyertai yang dibangun di dalam halaman Divi itu sendiri, artinya modul ini akan menampilkan konten yang berbeda untuk halaman yang berbeda dengan template ini. Untuk posting blog, itu akan menjadi konten blog. Untuk halaman toko, itu akan menjadi produk. Dan untuk halaman individual, konten khusus yang Anda buat menggunakan Divi.

Sesuaikan Spasi Bagian dan Baris

Dengan itu, kita perlu membuat beberapa penyesuaian jarak. Masuk ke pengaturan Bagian (batas biru di pembuat Divi) dan hapus semua bantalan atas dan bawah. Anda melakukan ini di bawah tab Desain , judul Spasi , lalu atur 0px ke Atas dan Bawah di bawah Padding .

Simpan perubahan Anda dan masukkan pengaturan Baris . Sekali lagi, atur Padding Atas dan Bawah ke 0px .

Selanjutnya, temukan heading Sizing dan aktifkan Use Custom Gutter Width dan atur nilainya menjadi 1. Selanjutnya, atur Width dan Max Width menjadi 100%.

Setelah persiapan selesai, mari kita mulai membuat kartu mengambang!

2. Tambahkan Kartu Mengambang

Tambahkan Bagian dan Baris Baru

Pertama, Anda ingin menambahkan bagian baru. Lakukan ini dengan menggulir ke bagian bawah halaman dan mengklik lingkaran + biru dan memilih Reguler ketika diminta untuk jenis bagian.

Tambahkan Modul Blurb

Ini akan menjadi bagian yang didedikasikan untuk kartu mengambang. Di dalam, kami ingin menambahkan baris kolom tunggal lainnya. Dan di dalamnya, kami ingin menggunakan modul Blurb untuk kartu mengambang itu sendiri. Modul Divi Blurb mungkin merupakan modul paling serbaguna di pembuatnya, jadi kami ingin memanfaatkan apa yang ditawarkannya untuk fitur ini.

Sesuaikan Pengaturan Bagian dan Baris

Dengan itu, kita perlu menyesuaikan bantalan dan posisi baris dan bagian ini. Jadi pertama, masuk ke pengaturan Bagian dan atur Padding Atas dan Bawah ke 0px di bawah Display – Spacing .

Kemudian, di bawah tab Lanjutan , temukan judul Posisi . Atur Indeks Z menjadi 12. Semakin tinggi angkanya, semakin jauh "depan" bagian dan isinya akan duduk. Dan karena ini adalah kartu mengambang, kami ingin kartu itu mengapung di atas semua elemen lainnya.

Terakhir, masuk ke pengaturan Row dan atur padding-nya di Atas dan Bawah ke 0px sekali lagi.

Isi Modul Blurb

Sekarang saatnya kita menata kartu itu sendiri. Masuk ke Pengaturan untuk modul Blurb. Karena ini adalah elemen yang menggambarkan bisnis Anda, Anda perlu menyebutkan secara singkat tentang apa yang dilakukan perusahaan atau merek Anda. Karena ini adalah postingan contoh, kami mengisinya dengan beberapa lorem ipsum rasa zombie. Anda dapat mengatur judul dan isi isi di bawah tab Konten .

Atur Warna Latar Belakang

Anda jelas ingin kartu mengambang cocok secara visual dengan situs Anda, jadi memilih warna latar belakang yang tepat sangat penting. Kami akan pergi dengan #ffffff (putih). Tab Content juga menampung ini, dan Anda akan menemukannya di bawah judul Background dan Paint Can .

Pilih Gambar Kartu

Modul Blurb memberi Anda opsi untuk menyertakan gambar atau ikon untuk modul, dan kami menginginkan gambar yang mewakili perusahaan kami. Sekali lagi, di bawah tab Konten , temukan Gambar dan Ikon dan cukup unggah gambar yang sesuai untuk modul Anda.

Bentuk Sudut Kartu

Selanjutnya, masuk ke tab Design dan masuk ke heading Border . Temukan opsi Rounded Corners dan atur setiap sudut pada 25px . Ini akan menghaluskan tepi yang tajam dan persegi tanpa mengubah bentuk keseluruhan kartu.

Perataan Teks

Di bawah judul Teks , atur Perataan Teks ke tengah.

Gaya Teks Judul Kartu Mengambang

Teks judul yang Anda atur default sebelumnya ke H4 . Untuk menatanya, masuk ke judul Teks Judul , pilih tab H4 , dan ubah opsi Judul berikut:

• Font: Poppins
• Berat Huruf: Tebal
• Warna Teks: # 22303f
• Ukuran Teks: 20px
• Tinggi Garis: 1.3em

Kemudian, kita perlu masuk ke pengaturan Responsiveness dan mengubah ukuran judul untuk perangkat seluler. Ubah Ukuran Teks Judul menjadi 14px .

Gaya Teks Kartu

Selanjutnya, navigasikan ke Body Text dan ubah Body Font menjadi Poppins agar sesuai dengan font judul.

Kemudian klik pada tab Tautan (ikon rantai) dan tukar Warna Teks Tautan dengan warna pelengkap untuk situs Anda. Kami memilih #97c357 .

Mengukur Tentang Kartu

Di bawah judul Sizing , tambahkan nilai berikut ke pengaturan ini:

• Lebar Gambar: 75%
• Lebar Konten: 25vw
• Lebar: 25vw
• Lebar Maks: 30vw

Di bawah pengaturan responsivitas, sesuaikan nilai berikut:

• Lebar Konten: 90vw
• Lebar: 90vw
• Lebar Maks: 95vw

Nilai-nilai ini akan memastikan kartu memenuhi seluruh lebar layar pada perangkat seluler karena kartu mengambang di sudut biasanya tidak mungkin untuk dibaca.

Spasi untuk Blurb

Judul Spasi adalah perbaikan cepat, di mana Anda perlu mengatur Margin Kiri ke 0px , Padding Atas dan Bawah ke 2vw , dan Padding Kiri dan Kanan ke 1vw.

Untuk pengaturan responsif, hanya Padding Atas dan Bawah yang akan berubah. Kami akan menetapkan ini pada 5% .

Tambahkan Bayangan Kotak

Karena kartu mengambang akan tetap berada di lokasinya, kami ingin kartu tersebut terlihat seolah-olah benar-benar melayang di atas konten Anda. Efek ini cukup sederhana dengan menambahkan bayangan kotak dasar ke modul. Opsi ini dapat ditemukan di bawah Box Shadow , dan kami memilih bayangan bawah dasar.

Menyesuaikan CSS Responsif

Sekarang adalah bagian yang menyenangkan. Kami pindah ke tab Advanced di mana kami akan membuat kartu mengambang menempel sendiri ke halaman. Untuk melakukan ini, langkah pertama kami adalah mematikan gambar yang kami tambahkan untuk desktop. Gambar dalam modul Blurb benar-benar dapat memengaruhi ukuran dan kegunaan di seluler, ditambah lagi hal lain yang harus dimuat laman.

Jadi kita ingin menambahkan display:none; di bawah bidang Gambar Blurb khusus seluler di bawah CSS Khusus .

Perbaiki dan Apung Kartu dengan Pengaturan Posisi

Akhirnya, kita akan memposisikan kartu di tempat yang kita inginkan untuk mengapung. Pertama, kami ingin menuju ke tab Advanced dan gulir ke Position . Pilih Tetap dari menu tarik-turun.

Selanjutnya, temukan opsi Lokasi . Ini adalah titik di layar di mana kartu mengambang akan tinggal. Untuk desktop, kami ingin berada di sudut bawah layar. Jadi kita klik kotak yang berkorelasi dengan itu. Kami juga ingin sedikit offset dari batas jendela, jadi kami akan mengubah Vertical Offset menjadi 3% dan Horizontal Offset menjadi 2%.

Selanjutnya, kami ingin membuat lokasi dan offset yang berbeda untuk seluler. Di atas, kami mengatur lebar kartu untuk meregangkan seluruh lebar layar. Dengan mengingat hal itu, kami akan mengubah Lokasi Tetap ke tengah bawah sehingga kartu hanya akan mengapung di bagian bawah layar setiap saat.

Selain itu, kami hanya akan mengubah Offset Vertikal untuk seluler. Tetapkan nilai ini ke 3% . Tidak perlu offset horizontal karena lebar layar ponsel dan terpusat.

Hasil Akhir

Ketika semuanya diatur dengan benar dan disesuaikan untuk situs pribadi Anda, produk akhir akan terlihat seperti ini.

Desktop

Seluler

Kesimpulan

Dengan opsi canggih Divi dan antarmuka intuitif, Anda dapat merancang dan memasang kartu mengambang di situs Anda dalam waktu singkat. Dengan memberi tahu pengguna Anda dengan siapa mereka berurusan sejak awal, Anda pasti akan mendapatkan loyalitas merek.

Untuk apa Anda menggunakan kartu mengambang di situs web Anda? Beri tahu kami di komentar!