Unduh Desain Spanduk Penjualan Serbaguna GRATIS untuk Divi

Memiliki spanduk penjualan multiguna pasti akan berguna (dan menghemat waktu Anda) selama masa-masa penting tahun ini ketika promosi menjadi hal yang populer. Itu sebabnya kami menawarkan spanduk penjualan serbaguna ini untuk Divi sebagai unduhan GRATIS! Spanduk penjualan ini dapat dengan mudah disesuaikan agar sesuai dengan kebutuhan Anda hanya dengan beberapa penyesuaian teks dan gambar latar belakang. Mendesain spanduk penjualan di Divi cukup mudah sehingga Anda tidak perlu puas dengan spanduk gambar yang sering terlihat sedikit kasar di web. Jadi, selain unduhan gratis, saya akan menunjukkan cara mendesain spanduk penjualan di Divi dari awal.

Mari kita mulai!

Apa yang Termasuk?

Berikut adalah intip desain banner penjualan yang disertakan dalam unduhan.

Unduh Desain Spanduk Penjualan GRATIS

Untuk mendapatkan desain spanduk penjualan secara gratis, 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!

Memuat Tata Letak ke Perpustakaan Divi

Setelah Anda mengunduh file, unzip. Anda akan menemukan bahwa itu berisi file bernama "sales-banner-design.json". Inilah yang akan Anda muat ke perpustakaan Divi Anda. Sekarang buka dashboard wordpress Anda dan arahkan ke Divi > Divi Library. Kemudian klik tombol impor di bagian atas halaman. Dari jendela pop-up portabilitas, pilih tab Impor dan pilih file sales-banner-design.json. Kemudian klik tombol Impor Tata Letak Pembuat Divi.

Sekarang untuk mengimpor tata letak ke halaman Anda, cukup buat halaman baru dan terapkan pembuat visual. Kemudian pilih “Choose a Premade Layout”. Dari popup beban dari perpustakaan, pilih tab "Tata Letak Tersimpan Anda" dan kemudian klik pada tata letak Desain Spanduk Penjualan dari daftar. Itu dia!

Cara Membuat Banner Penjualan dari Awal di Divi

Menambahkan Latar Belakang Bagian

Untuk memulai, buat halaman baru. Setelah Anda memberi judul pada halaman Anda, gunakan pembuat visual dan pilih opsi "Bangun Dari Awal". Kemudian tambahkan bagian baru dengan satu baris kolom.

Sebelum Anda mulai menambahkan modul apa pun ke baris, berikan bagian Anda warna gradien latar belakang (Warna tidak menjadi masalah pada saat ini. Kami hanya membutuhkan warna latar belakang untuk melihat semua elemen desain putih yang akan kami gunakan untuk penjualan kami spanduk.)

Menyesuaikan Baris untuk Spanduk Penjualan

Sebelum kita menambahkan modul kita ke baris, pertama-tama berikan baris kita lebar khusus 700px dan keluarkan spasi atas atau bawah sehingga baris kita akan duduk dengan baik di atas baris lain yang akan kita tambahkan di bawahnya. Buka pengaturan baris dan perbarui yang berikut:

Lebar Kustom: 700px
Lebar selokan: 1
Margin Kustom: 0px atas, 0px, bawah
Padding kustom: 0px atas, 0px bawah

Sekarang duplikat baris dua kali sehingga Anda memiliki total tiga baris identik. Ini akan digunakan untuk membangun spanduk penjualan kami.

Menambahkan Bingkai Batas Atas dengan Teks Berdekatan

Untuk membangun spanduk penjualan kami, kami mulai dengan batas atas dengan beberapa teks di sebelah kiri. Untuk melakukan ini kita akan menggunakan modul pembagi dan modul teks. Pertama, buat modul teks baru dan tambahkan beberapa kata konten di kotak konten.

Konten: “Hanya Online”

Lanjutkan ke tab desain dan perbarui yang berikut:

Berat Font Teks: Tebal
Gaya Font Teks: TT
Warna Teks Teks: rgba(255,255,255,0.9)
Ukuran Teks Teks: 15px
Spasi Huruf Teks: 2px
Tinggi Baris Teks: 1em
Lebar: 22% (desktop), 25% (tablet), 40% (ponsel pintar)
Penyelarasan Modul: kiri
Margin Kustom: 0px atas, -15px bawah
Padding Kustom: 0px atas, 0px bawah

Margin kustom ini agak prematur karena pembagi kami belum ditambahkan, tetapi perlu untuk menyelaraskan teks sehingga berbatasan sempurna dengan pembagi yang akan segera ditambahkan.

Sekarang tambahkan modul pembagi di bawah modul teks di baris yang sama. Kemudian perbarui pengaturan pembagi sebagai berikut:

Warna: rgba (255,255,255,0.9)
Posisi pembagi: bawah
Berat pembagi: 15px
Tinggi: 15px
Lebar: 78% (desktop), 75% (tablet), 60% (ponsel pintar)
Penyelarasan Modul: Kanan
Margin Kustom: 0px atas, 0px bawah
Padding Kustom: 0px atas, 0px bawah

Tentu saja, Anda perlu menyesuaikan lebar perbatasan Anda tergantung pada lebar modul teks Anda saat menyesuaikan desain untuk kebutuhan Anda sendiri.

Selanjutnya kita perlu menambahkan satu modul pembagi lagi untuk menghubungkan pembagi kita ke batas kanan baris yang akan kita rancang selanjutnya.

Untuk ini, duplikat modul pembagi dan perbarui yang berikut ini:

Lebar: 15px
Margin Kustom: -1px bawah

Menambahkan bingkai batas bawah dengan Teks Berdekatan

Untuk membuat bingkai batas bawah, kita dapat menggunakan elemen yang sama yang kita buat di bingkai batas atas baris atas kita. Hanya saja kali ini kita akan mulai dengan modul pembagi lebar 15px. Lanjutkan dan salin modul pembagi 15px dan tempel ke baris ketiga (bawah). Kemudian perbarui perataan modul ke kiri, bukan ke kanan.

Selanjutnya, salin modul pembagi yang lebih panjang dari baris atas dan tempel di bawah pembagi 15px di baris bawah. Kemudian sesuaikan hal berikut:

Lebar: 75% (desktop), 70% (tablet), 50% (smartphone)
Penyelarasan Modul: kiri

Terakhir, salin modul teks di baris atas dan tempel di bawah dua modul pembagi di baris bawah. Kemudian perbarui yang berikut ini:

Konten: “Mulai 1 November”
Lebar: 25% (desktop), 30% (tablet), 50% (ponsel pintar)
Penyelarasan Modul: Kanan
Margin khusus: -15px atas, 0px bawah
Padding Kustom: tersisa 15px

Menambahkan Modul Teks ke Baris Tengah

Sekarang kita siap untuk mulai menambahkan modul teks ke baris tengah kita yang akan menampung teks banner penjualan utama kita. Kami akan menumpuk tiga modul teks di atas satu sama lain. Silakan dan tambahkan modul teks pertama ke baris tengah.

Kemudian perbarui yang berikut ini:

Konten: “Semuanya Diskon 20%”
Warna Latar Belakang: rgba(255,255,255,0.9)

Berat Font Teks: Semi Tebal
Gaya Font Teks: TT
Warna Teks Teks: #000000
Ukuran Teks Teks: 34px (desktop), 20px (smartphone)
Spasi Huruf Teks: 2px
Tinggi Baris Teks: 1em
Orientasi Teks: Tengah
Padding Kustom: 2vw atas, 2vw bawah, 5vw kiri, 5vw kanan

Memberi teks warna hitam di atas latar belakang putih sangat penting untuk memaksimalkan efek mode campuran layar yang memungkinkan teks menyatu dengan latar belakang bagian. Kami akan menambahkan mode campuran layar ke baris nanti.

Sekarang duplikat modul teks untuk memulai desain modul teks berikutnya. Kemudian perbarui konten dengan html berikut:

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

Penataan sebaris hanya menambahkan batas hitam di sekitar teks judul. Sekali lagi, warna hitam akan bekerja dengan mode campuran layar untuk mengekspos latar belakang bagian dengan teks.

Kemudian perbarui yang berikut ini:

Judul 2 Berat Font: Tebal
Judul 2 Gaya Font: TT
Judul 2 Warna Teks: #000000
Judul 2 Ukuran Teks: 100px (desktop), 80px (tablet), 60px (smartphone)
Spasi Judul 2 Huruf: 2px
Margin Kustom: 0px atas
Padding Kustom: 0px atas, 0px bawah

Untuk modul teks terakhir, duplikat modul teks pertama di baris tengah ini dan tempel di bawah modul teks kedua.

Kemudian perbarui yang berikut ini:

Konten: “Belanja Sekarang”
Gaya Font Teks: TT, U (digarisbawahi)
Margin Kustom: 0px atas
Padding Kustom: 1vw atas, 2vw bawah

Menata Baris Tengah

Fase terakhir dari desain ini adalah menambahkan batas ke baris tengah dan efek mode campuran layar. Untuk melakukan ini, buka pengaturan baris tengah dan perbarui yang berikut ini:

Padding Kustom: 15px kiri, 15px kanan
Lebar Batas Kanan: 15px
Warna Batas Kanan: rgba(255.255.255,0.9)
Lebar Batas Kiri: 15px
Warna Batas Kiri: rgba(255.255.255,0.9)
Mode Campuran: Layar

Mode perpaduan layar memungkinkan teks untuk memadukan gambar latar belakang untuk ditampilkan melalui teks untuk efek yang keren!

Lihat hasil akhirnya.

Menambahkan Tautan ke Spanduk Penjualan Anda

Karena ini adalah spanduk penjualan, Anda ingin memaksimalkan ruang yang dapat diklik pada spanduk untuk meningkatkan konversi. Untuk melakukan ini, Anda dapat menambahkan tautan ke seluruh baris tengah. Cukup buka pengaturan baris tengah dan masukkan URL tautan baris untuk mengarahkan ulang ke halaman yang Anda inginkan.

Menambahkan Latar Belakang Bagian Berbeda untuk Desain Unik

Dengan desain spanduk penjualan baru ini, Anda dapat dengan mudah memperbarui gambar latar belakang untuk membuat desain yang unik.

Berikut adalah beberapa contoh.

Pikiran Akhir

Saya harap desain spanduk penjualan ini berguna untuk semua promosi web yang dibutuhkan sepanjang tahun. Desain dibuat untuk berfungsi sebagai spanduk penjualan serbaguna yang dapat dengan mudah diperbarui dengan teks baru dan gambar latar belakang bagian untuk tampilan yang benar-benar baru. Anda bahkan dapat menambahkan latar belakang video juga!

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!