Buat bilah promosi animasi untuk templat halaman Anda di Divi dapat menjadi cara yang bagus untuk mengiklankan produk dan penawaran menarik tanpa harus bergantung pada plugin. Menggunakan fitur desain canggih Divi, Anda dapat membuatnya secara visual promosi saat Anda mengedit templat di Divi Theme Builder. Kemudian, setelah modelnya siap, bilahnya promosi akan muncul di halaman mana pun yang ditetapkan untuk templat ini. 

Kami juga akan menunjukkan kepada Anda cara membuat bilah promosi diperbaiki (atau lengket).

Apa yang Anda butuhkan untuk memulai

Untuk memulai, Anda harus untuk menginstal dan mengaktifkan tema Divi . Pastikan Anda memiliki Divi versi terbaru.

Anda juga membutuhkan setidaknya satu halaman yang dibuat dengan Divi Builder untuk tujuan pengujian, yang akan dipengaruhi oleh templat bilah promosi.

Buat bar promosi animasi di bagian atas template halaman

Buat template baru

Dari dasbor WordPress, buka Divi> Generator tema. Kemudian klik kotak "Tambahkan template baru" untuk membuat template baru.

Tetapkan templat ke halaman tempat bilah promosi ditampilkan.

Pada templat baru, klik pada kotak "Tambahkan Tubuh Kustom" dan pilih "Bangun Tubuh Kustom".

CATATAN: kami menambahkan bilah promosi ke area tubuh model (bukan tajuk) sehingga dapat bekerja dengan tajuk default Divi serta semua tajuk kustom yang bisa Anda tambahkan nanti.

Kemudian pilih opsi "Build From Scratch".

Menambahkan bilah promosi ke model

Di editor tata letak template, kita dapat mulai membuat bilah promosi menggunakan Divi Builder.

Mulailah dengan menambahkan baris satu kolom ke bagian biasa.

Pengaturan saluran

Sebelum menambahkan modul, perbarui parameter Baris sebagai berikut:

• Gradien latar belakang kiri: # 4a42ec
• Gradien latar belakang kanan: # 521d91
• Arah Gradien: 90deg
• Gunakan lebar selokan khusus: YA
• Lebar selokan: 1
• Lebar: 100%
• Lebar maksimum: 100%
• Pelapis: 0px di bagian atas, 0px di bagian bawah

Ini mendukung warna latar belakang dan lebar bilah promosi yang kita buat.

Parameter kolom

Sebelum keluar dari pengaturan baris, klik untuk membuka pengaturan kolom. Kemudian tambahkan CSS khusus berikut ke elemen kolom utama:

display: flex;align-items: center;justify-content: center;

CSS ini menggunakan properti flex untuk menyelaraskan isi (atau modul) di kolom untuk ditumpuk secara horizontal (berdampingan). Ini juga memusatkan modul di kolom secara vertikal dan horizontal. Alasan kami melakukannya dengan cara ini adalah untuk menghindari penggunaan beberapa struktur baris kolom yang akan bertumpuk satu sama lain di perangkat seluler. Dengan konfigurasi ini, isi akan tetap sejajar secara horizontal di seluruh lebar browser.

Kami sekarang siap untuk menambahkan isi ke bilah promosi.

Tambahkan modul Blurb

Untuk konten contoh promosi ini, kami akan menyertakan modul presentasi dengan ikon kecil dan blog teks dengan tombol di sebelah kanan (seperti bilah promosi di Elegantthemes.com).

Klik pada lingkaran abu-abu ditambah ikon di dalam baris dan tambahkan modul presentasi.

Untuk konten teks presentasi, masukkan informasi berikut:

• Judul: [masukkan teks promosi]
• Gunakan ikon: YA
• Ikon: ikon hadiah (lihat tangkapan layar)

Perbarui pengaturan desain presentasi sebagai berikut:

• Warna Ikon: # ff4a9e
• Gambar / lokasi ikon: kiri
• Gunakan ukuran font ikon: YA
• Ikon Ukuran Huruf: 16px
• Ukuran Judul Teks: 16px (desktop), 14px (telepon)
• Baris judul Hewight: 1.3em
• Lebar maks: 230px (hanya telepon)
• Padding: 10px Atas
• Gaya Animasi: Slide
• Arah animasi: benar
• Penundaan animasi: 250ms

Menambahkan modul tombol

Kemudian tambahkan modul tombol di bawah modul Blurb. Karena properti flex, modul akan muncul di sebelah kanan uraian bukan di bawah.

Perbarui parameter desain tombol sebagai berikut:

• Gunakan gaya khusus untuk Tombol: YES
• Ukuran teks tombol: 15px (desktop), 13px (telepon)
• Warna teks tombol: #ffffff
• Lebar batas tombol: 0px
• Radius batas tombol: 20px
• Berat font: setengah tebal

• Margin (desktop): 20px di sebelah kiri
• Margin (telepon): 10px di sebelah kiri
• Pelapis (kantor): 0px di bagian atas, 0px di bagian bawah
• Padding (telepon): 2px di atas, 2px di bawah, 8px di kiri, 8px di kiri
• Gaya Animasi: Bounce
• Penundaan animasi: 1000ms

Pengaturan bagian

Untuk menyelesaikan desain bilah promosi, perbarui bagian yang berisi bilah promosi sebagai berikut:

• Pelapis: 0px di bagian atas, 0px di bagian bawah
• Gaya Animasi: Bounce
• Arah animasi: Bawah
• Durasi animasi: 500ms
• Penundaan animasi: 250ms
• Animasi Mulai opacity: 100%
• Z-Index: 999

Menambahkan modul penerbitan konten penuh-lebar

Pada titik ini, bilah promosi sudah siap. Tetapi karena ini adalah template, kita perlu memastikan bahwa kita menambahkan modul posting konten untuk menampilkan konten halaman menggunakan template ini.

Untuk halaman yang dibuat (atau yang akan dibuat) menggunakan Divi Builder, Anda akan ingin menggunakan modul konten posting lebar penuh untuk memaksimalkan area konten.

(CATATAN: Untuk halaman yang menggunakan editor default, Anda akan ingin menggunakan mod konten posting standar di bagian biasa untuk mencapai lebar maksimum yang sama dari 1080px secara default.)

Tambahkan bagian lebar penuh

Di bawah bagian yang berisi bilah promosi Anda, tambahkan bagian lebar penuh.

Tambahkan modul konten dalam format Fullwidth

Kemudian pilih modul Konten Posting Fullwidth.

Kurang lebih itu. Sekarang pastikan dan simpan tata letak sebelum keluar dari editor.

Kemudian simpan perubahan untuk pembuat tema.

Hasil akhir

Sebelum

Sekarang di sini adalah halaman sebelum menetapkan model dengan bilah promosi.

Setelah

Dan di sini adalah halaman yang sama dengan template baru dengan bilah promo.

Buat bilah promosi lengket

Agar bilah promosi sesuai dengan tajuk bawaan Divi, kami dapat menambahkan potongan CSS sederhana ke bagian yang berisi bilah promo.

position: fixed;width: 100%;

Buka pengaturan bagian dan tambahkan kode CSS berikut ke elemen desktop utama:

Kemudian tambahkan kode CSS berikut ke elemen tablet utama:

position: relative;

Sekarang periksa hasilnya.

Untuk konversi sebelumnya, Anda juga dapat menambahkan URL link ke seluruh baris, di bawah opsi link Pengaturan baris.

final pikiran

Dalam tutorial ini, kami menunjukkan cara mendesain bilah promo (dari awal) menggunakan Divi Theme Builder. Bilah promosi dilengkapi dengan banyak animasi dan desain untuk membuatnya benar-benar terlihat pengunjung. Anda bahkan dapat memperbaiki bilah promo saat Anda menggulir ke bawah halaman untuk lebih banyak visibilitas. Dan dengan kemampuan untuk mengontrol di mana bilah promosi ditempatkan di situs Anda, aplikasi ini sangat nyaman.