Divi: Tema WordPress terbaik sepanjang masa!

lebih 901.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis.

Membuat bar promosi animasi untuk template halaman Anda di Divi dapat menjadi cara yang bagus untuk mengiklankan produk dan penawaran yang bergaya tanpa harus bergantung pada plugin. Dengan menggunakan fitur desain canggih Divi, Anda dapat membuat bilah promosi secara visual saat mengedit templat di Divi Theme Creator. Kemudian, saat templat sudah siap, bilah promosi akan muncul di halaman mana pun yang ditetapkan ke templat itu. 

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.

Tambahkan model divi baru

Tetapkan templat ke halaman tempat bilah promosi ditampilkan.

Halaman beranda Divi

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.

Tambahkan model tubuh

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.

Tambahkan baris ke kolom di divi

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.

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda membuat Mudah dan Gratis desain situs web atau blog apa pun dengan tampilan profesional. Berhentilah membayar banyak untuk situs web yang dapat Anda lakukan sendiri.

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;

Kustomisasi kode css

CSS ini menggunakan properti flex untuk menyelaraskan konten (atau modul) di kolom untuk ditumpuk secara horizontal (berdampingan). Ini juga memusatkan modul di kolom secara vertikal dan horizontal. Alasan kami melakukan ini adalah untuk menghindari penggunaan beberapa struktur baris kolom yang akan menumpuk satu sama lain pada perangkat seluler. Dengan konfigurasi ini, konten akan tetap diratakan secara horizontal di semua lebar browser.

Kami sekarang siap untuk menambahkan konten 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.

Tambahkan bagian kedua modul ringkasan

Untuk konten teks presentasi, masukkan informasi berikut:

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

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.

Modul tombol Divi

Apakah Anda ingin menjual produk Anda di internet?

Unduh WooCommerce secara gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress dan dengan mudah membuat toko online Anda. Sempurna untuk pemula.

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
Sesuaikan modul tombol divi
  • 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
Sesuaikan jarak modul tombol divi

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
Sesuaikan modul animasi divi

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.

Buat bagian pembuat divi lebar penuh

Tambahkan modul konten dalam format Fullwidth

Kemudian pilih modul Konten Posting Fullwidth.

Isi artikel lebar penuh divi

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

Simpan tata letak divi

Kemudian simpan perubahan untuk pembuat tema.

Pembuat tema divi

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:

Masuk ke bagian yang diperbaiki

Kemudian tambahkan kode CSS berikut ke elemen tablet utama:

position: relative;

Tambahkan kode css ke bagian divi

Sekarang periksa hasilnya.

Hasil animasi Divi

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

final pikiran

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