Membangun Spanduk Responsif dengan Opsi Latar Belakang Baru Divi

Dalam posting terakhir saya, saya menunjukkan kepada Anda cara menata tombol menggunakan antarmuka opsi latar belakang Divi dengan melapisi modul tombol di atas latar belakang kolom dan baris. Hari ini, saya akan menunjukkan cara mendesain spanduk responsif yang dapat diklik menggunakan antarmuka opsi latar belakang Divi.

Kami akan menggunakan teknik yang sama seperti yang kami lakukan untuk latar belakang tombol dengan beberapa penyesuaian kecil. Pada dasarnya saya akan menunjukkan cara membuat tombol yang sangat besar dan mendesainnya sedikit lebih seperti spanduk. Faktor penting di sini adalah seluruh area permukaan spanduk tetap dapat diklik. Namun, perlu Anda ketahui sejak awal bahwa kita hanya bisa membuat banner sederhana menggunakan cara ini. Karena kita dibatasi oleh input teks modul tombol, kita hanya dapat membuat banner dengan satu string teks. Namun, dengan memanfaatkan opsi latar belakang kolom, kita dapat membuat beberapa spanduk yang tampak keren dalam waktu singkat menggunakan Visual Builder.

Spanduk HTML vs. Spanduk Gambar

Ada banyak keuntungan menggunakan spanduk html (spanduk yang dibuat menggunakan elemen html) dibandingkan spanduk gambar (spanduk yang dibuat sebagai satu gambar tanpa elemen html). Untuk spanduk html, teks dikenali oleh browser web (penting untuk penerjemah halaman dan pembaca layar). Mereka menskalakan dengan ukuran jendela browser sehingga selalu terlihat tajam, tidak seperti gambar yang dapat terdistorsi atau tidak terbaca. Dan mungkin aspek favorit saya menggunakan spanduk html di atas spanduk gambar adalah bahwa html sangat mudah diubah. Saya dapat mengubah teks dengan beberapa penekanan tombol alih-alih mencari kedalaman hard drive saya untuk file asli yang perlu saya edit di editor foto. Dan, saya dapat dengan cepat membuat versi lain dari spanduk untuk melakukan tes terpisah menggunakan Divi Leads.

Metode mengubah tombol menjadi spanduk ini membuka pintu untuk beberapa aplikasi bermanfaat seperti membuat pos, kategori, atau seri unggulan khusus untuk blog (atau podcast) Anda.

Mari kita mulai.

Sneak Peek

Sebelum kita resmi di kick off. Berikut adalah cuplikan spanduk yang akan kami buat di pos ini.

Menerapkan Desain dengan Divi

Berlangganan Saluran Youtube Kami

Contoh #1: Spanduk Logo

Menggunakan Visual Builder, tambahkan bagian reguler dengan satu kolom dan satu baris.

Selanjutnya tambahkan Modul Tombol ke baris.

Kemudian perbarui pengaturan modul tombol sebagai berikut:

Opsi Konten

Teks Tombol: [masukkan teks yang ingin Anda gunakan untuk pesan spanduk Anda]
URL Tombol: [masukkan URL]

Pilihan Desain

Penjajaran tombol: Tengah
Warna Teks: Cahaya
Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 32px
Lebar Batas Tombol: 0px
Font Tombol: Arvo
Ikon Tombol: [tambahkan ikon. Saya menggunakan ikon kursor]
Hanya Tampilkan Ikon Saat Arahkan Untuk Tombol: TIDAK

Opsi Lanjutan

Kita perlu mengatur lebar tombol menjadi 100% untuk mengisi lebar kolom. Kami juga perlu memperluas ketinggian tombol kami untuk menyediakan ruang yang cukup untuk konten spanduk kami. Untuk melakukan ini, masukkan CSS khusus berikut di kotak Elemen Utama:

 Width: 100%;
padding: 20px 0 200px; 

Catatan : Padding khusus di sini adalah kunci untuk menyesuaikan di mana Anda ingin teks spanduk ditampilkan. Karena perataan tombol sudah berada di tengah, yang perlu saya lakukan adalah menyesuaikan teks secara vertikal. Oleh karena itu, memberi teks tombol padding yang lebih pendek di bagian atas dan padding yang lebih panjang di bagian bawah akan menyesuaikan teks ke bagian atas spanduk.

Simpan Pengaturan

Semuanya masih putih dan tidak terlihat sekarang tapi tidak apa-apa. Kami akan menambahkan latar belakang untuk modul tombol di dalam pengaturan baris dan kolom.

Buka Pengaturan Baris tempat modul tombol Anda berada dan perbarui yang berikut ini:

Opsi Konten

Di bawah tab gambar latar belakang

Gambar Latar Belakang: [masukkan gambar]
Posisi Gambar Latar Belakang: [gunakan opsi ini untuk menyesuaikan gambar untuk spanduk Anda. Saya ingin bagian bawah gambar saya ditampilkan, jadi saya memilih "Tengah Bawah".]

Sekarang gulir ke bawah sedikit untuk memperbarui opsi latar belakang Kolom 1.

Pilih tab Column 1 Background Gradient lalu klik tombol lingkaran abu-abu dengan simbol plus putih.

Perbarui berikut ini:

Warna Gradien Latar Belakang: rgba(131,0,233,0.92), rgba(0,0,0,0.69)
Arah Gradien Kolom: 180deg
Posisi Awal Kolom: 50%
Posisi Akhir Kolom: 0%

Simpan Pengaturan

Selanjutnya kita akan menambahkan logo ke banner. Klik tab Gambar Latar Belakang dan perbarui yang berikut ini:

Latar Belakang Kolom 1 Ukuran Gambar: Ukuran Sebenarnya (logo saya berukuran 120 x 120 png)

Kolom 1 Posisi Gambar Latar Belakang: Tengah

Itu dia. Sekarang Anda memiliki spanduk sederhana yang dapat diklik dan responsif. Anda dapat menggunakan pengaturan Modul Tombol untuk menambahkan efek hover yang Anda inginkan untuk membuat spanduk menonjol.

Mari kita lakukan contoh lain.

Contoh #2: Spanduk Teks Sederhana

Untuk spanduk berikutnya, mari gandakan seluruh bagian yang menampung spanduk pertama yang baru saja Anda rancang. Ini akan menghemat waktu penyiapan.

Lalu buka pengaturan baris dan perbarui yang berikut:

Opsi Konten

Gambar Latar Belakang: [masukkan gambar baru]
Posisi Gambar Latar Belakang: Tengah
Kolom 1 Warna Gradien Latar Belakang: rgba(0,0,0,0.41), rgba(12.113.195,0.66)
Arah Gradien Kolom: 270deg

Selanjutnya klik pada kolom 1 tab background image dan hapus gambar/logo tersebut.

Simpan Pengaturan

Buka Pengaturan Modul Tombol dan perbarui yang berikut ini:

Opsi Konten

Teks Tombol: [masukkan teks untuk spanduk Anda]
URL Tombol: [masukkan URL untuk spanduk]

Pilihan Desain

Ukuran Teks Tombol: 42px
Lebar Perbatasan Tombol: 19px
Warna Batas Tombol: rgba(0,0,0,0.17)
Jarak Huruf Tombol: 8px
Font Tombol: Montserrat, Tebal (B)
Tambahkan Ikon Tombol: TIDAK
Warna Batas Arahkan Arah Tombol: rgba(0,0,0,0.46)
Tombol Arahkan Arah Batas Radius: 0px
Tombol Arahkan Jarak Huruf: 12px

Seperti yang Anda lihat, contoh spanduk ini memiliki efek melayang unik yang mengubah warna batas dan meningkatkan jarak huruf:

Cara Membuat Banner Anda Fullwidth

Untuk membuat banner ini fullwidth, yang harus Anda lakukan adalah memperbarui Pengaturan Bagian di bawah tab Desain sebagai berikut:

Padding Kustom: 0px Atas, 0px Kanan, 0px Bawah, 0px Kiri

Simpan Pengaturan

Sekarang buka Pengaturan Baris dan perbarui opsi Desain sebagai berikut:

Jadikan Baris Ini Lebar Penuh: YA
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1

Sekarang spanduk membentang lebar penuh layar di semua perangkat.

Cara Membuat Spanduk Lengket

Jika mau, Anda dapat dengan mudah membuat spanduk ini tetap (lengket), dan memperbaikinya di bagian atas jendela browser Anda. Saya akan menyarankan mengurangi padding untuk membuatnya jauh lebih pendek sehingga tidak menghalangi terlalu banyak jendela.

Untuk mengurangi ketinggian, Buka Pengaturan Modul Tombol di bawah tab Lanjutan tambahkan CSS berikut di kotak Elemen Utama :

padding: 0px 0px !important;

Sekarang untuk membuat seluruh bagian lengket, buka Pengaturan Bagian dan perbarui Opsi tab Lanjutan dengan CSS Kustom berikut di kotak Elemen Utama :

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

Sekarang seluruh bagian Anda akan menempel di bagian atas halaman dan tetap di sana saat Anda menggulir halaman ke bawah.

Spanduk semacam ini akan bekerja dengan baik untuk barang-barang promosi di halaman arahan tanpa bilah navigasi, karena spanduk tempel pada akhirnya akan menyembunyikan bilah navigasi.

Menambahkan Spanduk ke Beberapa Tata Letak Kolom

Anda juga dapat membuat spanduk pada struktur baris beberapa kolom. Ini akan berguna jika Anda ingin menampilkan beberapa item di bagian bawah halaman atau blog Anda.

Mari kita mencobanya.

Tambahkan bagian reguler lainnya dengan struktur baris kolom 1/2 1/2.

Demi waktu, lanjutkan dan salin atau duplikat modul tombol yang baru saja kita buat dan tempel atau seret ke kolom pertama.

Untuk mendapatkan desain latar belakang spanduk, kita akan menggunakan latar belakang kolom di Pengaturan Baris. Buka Pengaturan Baris dan perbarui yang berikut:

Opsi Konten

Di bawah Tab Gambar Latar Belakang

Kolom 1 Latar Belakang: [masukkan gambar latar belakang]
Kolom 1 Posisi Gambar Latar Belakang: [sesuaikan posisi gambar sesuai keinginan Anda]
Kolom 1 Campuran Gambar Latar: Multiply

Di bawah Tab Gradien Latar Belakang

Kolom 1 Warna Gradien: rgba(255,255,255,0), #e02b20
Kolom 1 Arah Gradien: 180deg
Kolom 1 Posisi Awal: 70%
Kolom 1 Posisi Akhir: 0%

Langkah terakhir adalah memperbarui Pengaturan Modul Tombol :

Opsi Konten

Teks Tombol: Seri Perjalanan

Pilihan Desain

Ukuran Teks Tombol: 32px
Lebar Perbatasan Tombol: 2px
Jarak Huruf Tombol: 0px
Warna Batas Arahkan Arahkan Tombol: #edf000
Tombol Arahkan Jarak Huruf: 0px

Opsi Lanjutan

CSS khusus di kotak Elemen Utama:

padding: 350px 0px 50px;
width: 100%;

Css kustom ini menyesuaikan padding modul Button sehingga teks berada di bawah tepat di belakang gradien latar belakang.

Jangan ragu untuk menduplikasi proses ini untuk spanduk di kolom berikutnya dan memperbarui konten sesuai keinginan Anda.

Lihat hasilnya.

Catatan : Saya tidak akan menggunakan tinggi Equalize Column saat menggunakan fungsi ini. Kolom akan membentang melewati modul tombol. Jika Anda ingin ketinggian spanduk cocok dengan sempurna, Anda mungkin harus bermain-main dengan bantalan pada modul tombol untuk melakukannya dengan benar.

Responsif?

Ya. Karena tombol dibangun di dalam struktur kolom Divi, tombol akan merespons dengan baik di semua perangkat. Untuk spanduk horizontal, saya akan berhati-hati dengan penempatan logo dan teks Anda karena mungkin tumpang tindih di ponsel.

Berikut adalah contoh tampilannya saat memperkecil ke ukuran layar yang lebih kecil:

Kompatibilitas Peramban

Saat ini, properti CSS background-blend-mode tidak didukung oleh Internet Explorer atau Edge dan Safari memiliki opsi pencampuran yang terbatas. Namun mundurnya tidak cukup dalam pengalaman saya untuk banyak kasus.

Pikiran Akhir

Saya harap Anda menikmati trik desain kecil namun berguna ini untuk membuat spanduk responsif. Selama Anda memahami batasan yang terlibat dan membuatnya tetap sederhana, Anda dapat membuat beberapa spanduk yang cukup keren. Plus, solusi ini mudah diterapkan dan disesuaikan dengan cepat.

Dan, saya yakin ada aplikasi lain yang berguna untuk ini. Saya berharap untuk mendengar ide-ide Anda di komentar.

Bersulang!