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
- Lebar Gambar: 75%
- Lebar Konten: 25vw
- Lebar: 25vw
- Lebar Maks: 30vw
- Lebar Konten: 90vw
- Lebar: 90vw
- Lebar Maks: 95vw
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!