Cara Membuat Bilah Promo Animasi untuk Template Halaman Anda di Divi

Diterbitkan: 2019-11-23

Membuat bilah promo animasi untuk templat halaman Anda di Divi dapat menjadi cara yang bagus untuk mengiklankan produk dan penawaran dengan gaya tanpa harus bergantung pada plugin. Dengan menggunakan fitur desain canggih Divi, Anda dapat membuat bilah promo secara visual saat mengedit template di Pembuat Tema Divi. Kemudian setelah template siap, bilah promo akan muncul di halaman mana pun yang telah ditetapkan ke template itu. Mudah!

Ayo masuk dan mulai!

Sneak Peek

Berikut adalah tampilan singkat dari bilah promo yang akan kita buat dalam tutorial ini.

Kami juga akan menunjukkan cara membuat bilah promo tetap (atau lengket) juga.

Unduh Template Halaman Promo Bar GRATIS

Untuk mendapatkan templat halaman bilah promo dari tutorial ini, 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 di 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.

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan tambahkan salah satu file json ke Divi Theme Builder menggunakan opsi Theme Builder Portability.

Langsung saja ke tutorialnya ya?

Berlangganan Saluran Youtube Kami

Apa yang Anda Butuhkan untuk Memulai

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

Anda juga memerlukan setidaknya satu halaman yang dibuat dengan Divi Builder untuk tujuan pengujian agar dapat menetapkan template bilah promo ke halaman tersebut untuk menampilkan hasilnya.

Setelah itu, Anda siap untuk pergi.

Membuat Animated Promo Bar di Bagian Atas Template Halaman

Membuat Template Baru

Dari Dasbor WordPress, navigasikan ke Divi > Pembuat Tema. Kemudian klik kotak “Add New Template” untuk membuat template baru.

Tetapkan template ke halaman yang Anda inginkan agar bilah promo ditampilkan.

Pada template baru, klik area “Add Custom Body” lalu pilih “Build Custom Body”.

CATATAN: Kami menambahkan bilah promo ke area tubuh templat (bukan tajuk) sehingga dapat berfungsi dengan tajuk default Divi serta tajuk khusus apa pun yang mungkin Anda tambahkan di masa mendatang.

Kemudian pilih opsi "Build From Scratch".

Menambahkan Bar Promo ke Template

Di dalam Template Layout Editor, kita dapat mulai membuat bilah promo menggunakan Divi Builder.

Mulailah dengan menambahkan baris satu kolom ke bagian reguler.

Pengaturan Baris

Sebelum menambahkan modul, perbarui pengaturan Baris sebagai berikut:

Warna Kiri Gradien Latar Belakang: #4a42ec
Warna Kanan Gradien Latar Belakang: #521d91
Arah Gradien: 90 derajat
Gunakan Lebar Talang Kustom: YA
Lebar Talang: 1
Lebar: 100%
Lebar Maks: 100%
Padding: 0px atas, 0px bawah

Itu menangani warna latar belakang dan lebar bilah promo yang kami buat.

Pengaturan Kolom

Sebelum meninggalkan pengaturan baris, klik untuk membuka pengaturan kolom. Kemudian tambahkan CSS khusus berikut ke Elemen Utama Kolom:

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

CSS ini menggunakan properti flex untuk menyelaraskan konten (atau modul) di dalam kolom untuk ditumpuk secara horizontal (berdampingan). Ini juga memusatkan modul di dalam kolom baik secara vertikal maupun horizontal. Alasan kami melakukannya dengan cara ini adalah untuk menghindari penggunaan beberapa struktur baris kolom yang akan saling bertumpuk di perangkat seluler. Dengan pengaturan ini, konten akan tetap berada dalam posisi horizontal pada semua lebar browser.

Sekarang kami siap untuk menambahkan beberapa konten ke bilah promo.

Menambahkan Modul Blurb

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

Klik ikon lingkaran abu-abu plus di dalam baris dan tambahkan modul uraian.

Untuk konten blurb, masukkan berikut ini:

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

Perbarui pengaturan desain uraian sebagai berikut:

Warna Ikon: #ff4a9e
Penempatan Gambar/Ikon: Kiri
Gunakan Ukuran Font Ikon: YA
Ukuran Font Ikon: 16px
Judul Teks Ukuran: 16px (desktop), 14px (ponsel)
Tinggi Baris Judul: 1.3em
Lebar Maks: 230px (khusus ponsel)
Padding: 10px atas
Gaya Animasi: Slide
Arah Animasi: Kanan
Penundaan Animasi: 250ms

Menambahkan Modul Tombol

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

Perbarui pengaturan desain tombol sebagai berikut:

Gunakan Gaya Kustom untuk Tombol: YA
Ukuran Teks Tombol: 15px (desktop), 13px (ponsel)
Warna Teks Tombol: #ffffff
Lebar Batas Tombol: 0px
Radius Perbatasan Tombol: 20px
Berat Huruf Tombol: Semi Tebal

Margin (desktop): tersisa 20 piksel
Margin (telepon): 10px kiri
Padding (desktop): 0px atas, 0px bawah
Padding (ponsel): 2px atas, 2px bawah, 8px kiri, 8px kanan
Gaya Animasi: Bounce
Penundaan Animasi: 1000ms

Pengaturan Bagian

Untuk melengkapi desain bilah promo, perbarui bagian yang berisi bilah promo sebagai berikut:

Padding: 0px atas, 0px bawah
Gaya Animasi: Bounce
Arah Animasi: Bawah
Durasi Animasi: 500ms
Penundaan Animasi: 250ms
Animasi Mulai Opacity: 100%
Z-Indeks: 999

Menambahkan Modul Konten Posting Lebar Penuh

Pada titik ini bilah promo siap digunakan. Tetapi karena ini adalah template, kita perlu memastikan dan menambahkan modul konten posting untuk menampilkan konten halaman menggunakan template ini.

Untuk halaman yang (atau akan) dibangun 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 modul konten posting reguler di dalam bagian reguler sehingga Anda memiliki lebar maksimal 1080px yang serupa secara default.)

Tambahkan Bagian Lebar Penuh

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

Tambahkan Modul Konten Posting Lebar Penuh

Kemudian pilih Modul Konten Posting Lebar Penuh.

Itu tentang melakukannya. Sekarang pastikan dan simpan tata letak sebelum keluar dari editor.

Kemudian simpan juga perubahan untuk pembuat tema.

Hasil Akhir

Sebelum

Sekarang di sini adalah halaman sebelum menetapkan template dengan bilah promo.

Setelah

Dan ini adalah halaman yang sama dengan template baru dengan bilah promo.

Ini dia di ponsel.

Berikut adalah animasi bilah promo pada pemuatan halaman.

Membuat Bar Promo Lengket

Untuk membuat bilah promo tetap di bawah header Divi default, kita dapat menambahkan cuplikan CSS sederhana ke bagian yang berisi bilah promo.

Buka pengaturan bagian dan tambahkan CSS berikut ke Elemen Utama di Desktop:

position: fixed;
width: 100%;

Kemudian tambahkan CSS berikut ke Elemen Utama di Tablet:

position: relative;

Sekarang lihat hasilnya.

Jangan Lupa Linknya

Setelah Anda membuat bilah promo, Anda ingin menambahkan URL tautan ke penawaran atau halaman promosi. Anda dapat menambahkan URL tautan tombol di tab konten pengaturan tombol.

Bahkan untuk konversi, Anda mungkin juga menambahkan url tautan ke seluruh baris, di bawah opsi tautan pengaturan baris.

Pikiran Akhir

Dalam tutorial ini, kami menunjukkan cara mendesain bilah promo (dari awal) menggunakan Divi Theme Builder. Bilah promo dilengkapi dengan beberapa animasi dan desain untuk membuatnya benar-benar menonjol bagi pengunjung. Anda bahkan dapat memperbaiki bilah promo saat menggulir halaman ke bawah untuk visibilitas yang lebih baik. Dan dengan kemampuan untuk mengontrol di mana bilah promo muncul di seluruh situs Anda, aplikasi ini sangat praktis.

Semoga ini akan menginspirasi Anda untuk membuat beberapa promo bar Anda sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!