Unduh 5 Gaya Latar Belakang yang Cerah untuk Postingan Blog Divi Anda

Diterbitkan: 2018-10-25

Kami di sini dengan unduhan Divi gratis lainnya! Kali ini, kami memberi Anda 5 gaya latar belakang hidup yang berbeda yang dapat Anda gunakan untuk posting blog di situs web Anda. Anda dapat dengan mudah menggabungkan gaya latar belakang ini di situs web yang sama untuk memberikan tampilan dan nuansa berbeda pada berbagai posting blog yang Anda terbitkan. Selain menawarkan Anda semua gaya latar belakang yang dinamis ini secara gratis, kami juga akan memandu Anda dalam membuat template posting blog yang dapat Anda gunakan kembali untuk setiap posting blog yang Anda buat dan publikasikan di situs web Anda.

Mari kita lakukan!

Pratinjau

Mari kita mulai dengan melihat 5 hasil yang berbeda dan tampilan pada ukuran layar yang berbeda.

gaya latar belakang yang hidup

Unduh Gaya Latar Belakang yang Cerah GRATIS

Untuk mendapatkan gaya latar belakang yang semarak, 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

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!

Palet Warna

Untuk setiap gaya latar belakang, Anda dapat menemukan palet warna di bawah ini. Kami akan merujuk ke nomor warna di seluruh tutorial jadi pilih gaya latar belakang dan palet yang ingin Anda buat dan mulai dari sana.

Palet #1

gaya latar belakang yang hidup

  • Warna #1: #886DFC
  • Warna #2: #7C56BD
  • Warna #3: #372C66

Palet #2

gaya latar belakang yang hidup

  • Warna #1: #42bcb2
  • Warna #2: #9CFEF0
  • Warna #3: #a8baf7

Palet #3

gaya latar belakang yang hidup

  • Warna #1: #96b2ff
  • Warna #2: #d999ff
  • Warna #3: #357ff4

Palet #4

gaya latar belakang yang hidup

  • Warna #1: #B981FF
  • Warna #2: #24EEFA
  • Warna #3: #be7bf2

Palet #5

gaya latar belakang yang hidup

  • Warna #1: #e02b20
  • Warna #2: #f6ff56
  • Warna #3: #db241e

Buat Posting Baru

Tambahkan Detail & Aktifkan Divi Builder

Mari kita mulai dari awal! Tambahkan halaman baru ke situs WordPress Anda, tambahkan judul halaman Anda, unggah gambar unggulan dan aktifkan Divi Builder.

gaya latar belakang yang hidup

Pengaturan Halaman Divi

Sebelum beralih ke Visual Builder, buat beberapa perubahan pada kotak Pengaturan Halaman Divi di kanan atas halaman tempat Anda berada. Ini akan memastikan Anda sepenuhnya bekerja dengan Divi untuk membuat tata letak posting blog. Jika Anda berencana untuk menggunakan kembali template di situs web Anda, Anda harus ingat untuk mengubah pengaturan ini setiap kali Anda membuat posting blog baru.

  • Tata Letak Halaman: Lebar Penuh
  • Judul Postingan: Sembunyikan

gaya latar belakang yang hidup

Beralih ke Visual Builder

Anda sekarang dapat beralih ke Visual Builder.

gaya latar belakang yang hidup

Setelah Anda melakukannya, tiga opsi akan muncul di layar Anda. Klik tombol biru untuk mulai membangun dari awal.

gaya latar belakang yang hidup

Buat Desain Postingan Blog

Tambahkan Bagian #1

Gambar latar belakang

Mari mulai membuat template! Mulailah dengan bagian kosong di bagian atas. Buka pengaturan bagian, buka pengaturan latar belakang dan unggah gaya latar belakang pilihan. Anda dapat menemukan semua 5 variasi dengan masuk ke folder unduhan > Hero .

  • Ukuran Gambar Latar Belakang: Sampul
  • Posisi Gambar Latar Belakang: Tengah Atas

gaya latar belakang yang hidup

Jarak

Untuk memungkinkan gambar latar belakang muncul sepenuhnya, bermain-main dengan padding bagian atas.

  • Padding Atas: 660px

gaya latar belakang yang hidup

Tambahkan Bagian #2

Jarak

Tepat di bawah bagian yang baru saja Anda tambahkan, lanjutkan dan tambahkan yang lain. Buka pengaturan, buka pengaturan spasi dan hapus semua bantalan kustom default.

  • Padding Atas: 0px
  • Padding Bawah: 0px

gaya latar belakang yang hidup

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

gaya latar belakang yang hidup

Jarak

Hapus semua padding default di bagian bawah bagian berikutnya.

  • Padding Bawah: 0px

gaya latar belakang yang hidup

Tambahkan Modul Judul Posting

Elemen

Saatnya mulai menambahkan modul! Di baris ini, kita hanya membutuhkan Modul Judul Postingan. Setelah Anda menambahkannya, pilih elemen yang ingin Anda tampilkan.

gaya latar belakang yang hidup

Pengaturan Teks Judul

Kemudian, buka pengaturan teks judul dan buat beberapa perubahan.

  • Judul Font: Abril Fatface
  • Perataan Teks Judul: Tengah
  • Ukuran Teks Judul: 73px (Desktop), 50px (Tablet), 40px (Telepon)

gaya latar belakang yang hidup

Pengaturan Teks Meta

Pengaturan teks meta perlu dimodifikasi juga.

  • Perataan Teks Meta: Tengah
  • Warna Teks Meta: Warna #1 (Temukan di Palet)
  • Ukuran Teks Meta: 18px
  • Tinggi Garis Meta: 3em

gaya latar belakang yang hidup

Tambahkan Bagian #3

Gambar latar belakang

Bagian terakhir pada halaman ini akan berisi konten posting blog dan CTA. Mulailah dengan mengunggah gaya latar belakang pilihan Anda. Anda dapat menemukan variasinya dengan membuka folder unduhan > Body . Setelah Anda mengunggah gambar latar belakang, buat beberapa perubahan pada pengaturan latar belakang.

  • Ukuran Gambar Latar Belakang: Ukuran Sebenarnya
  • Posisi Gambar Latar Belakang: Tengah Atas
  • Pengulangan Gambar Latar Belakang: Spasi

gaya latar belakang yang hidup

Jarak

Hapus semua padding atas default bagian ini untuk menghilangkan semua spasi putih antara bagian ini dan yang sebelumnya.

  • Padding Atas: 0px

gaya latar belakang yang hidup

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

gaya latar belakang yang hidup

Warna latar belakang

Tambahkan warna latar belakang yang sedikit transparan ke baris berikutnya.

  • Warna Latar Belakang: rgba(255,255,255,0.86)

gaya latar belakang yang hidup

Jarak

Hapus juga bantalan kustom default di sini.

  • Padding Atas: 0px
  • Padding Bawah: 0px

gaya latar belakang yang hidup

Tambahkan Modul Teks

Tambah isi

Lanjutkan dengan menambahkan Modul Teks ke baris yang telah Anda tambahkan. Di sini, Anda dapat menambahkan semua konten posting blog yang Anda inginkan dan menggunakan gaya teks yang berbeda untuk mendapatkan hasil yang diinginkan. Di layar cetak di bawah ini, kami menggunakan judul dan paragraf.

gaya latar belakang yang hidup

Pengaturan Teks

Buka pengaturan teks dan buat beberapa perubahan di sana.

  • Ukuran Teks: 21px (Desktop), 18px (Tablet), 15px (Ponsel)
  • Tinggi Baris Teks: 2em

gaya latar belakang yang hidup

Pengaturan Judul

Pengaturan teks judul perlu dimodifikasi juga.

  • Font Judul: Abril Fatface
  • Ukuran Teks Judul: 46px (Desktop), 40px (Tablet), 30px (Ponsel)
  • Judul Garis Tinggi: 1.5em

gaya latar belakang yang hidup

Jarak

Tambahkan beberapa nilai padding kustom berikutnya.

  • Padding Atas: 80px
  • Padding Bawah: 80px
  • Padding Kiri: 80px (Desktop), 40px (Tablet), 30px (Ponsel)
  • Padding Kanan: 80px (Desktop), 40px (Tablet), 30px (Telepon)

gaya latar belakang yang hidup

Bayangan Kotak

Untuk menyelesaikannya, tambahkan bayangan kotak halus ke Modul Teks. Ini akan membawa beberapa kedalaman ke template posting blog.

  • Kekuatan Buram Bayangan Kotak: 80px
  • Kekuatan Penyebaran Bayangan Kotak: -14px

gaya latar belakang yang hidup

Tambahkan Baris #2

Struktur Kolom

Lanjutkan dengan menambahkan baris baru tepat di bawah baris sebelumnya menggunakan satu kolom.

gaya latar belakang yang hidup

Jarak

Hapus semua padding kustom default dari baris ini juga.

  • Padding Atas: 0px
  • Padding Bawah: 0px

gaya latar belakang yang hidup

Tambahkan Modul Optin Email

Tambah isi

Kemudian, tambahkan CTA Anda. Kami menggunakan Modul Email Optin. Setelah Anda menambahkannya, ubah kontennya.

gaya latar belakang yang hidup

bidang

Kami hanya menggunakan alamat email dalam modul ini, jadi lanjutkan dan nonaktifkan nama depan dan nama belakang di pengaturan bidang.

gaya latar belakang yang hidup

Latar Belakang Gradien

Lanjutkan dengan menambahkan latar belakang gradien ke Modul Email Optin.

  • Warna 1: Warna #2 (Temukan di Palet)
  • Warna 2: Warna #3 (Temukan di Palet)
  • Arah Gradien: 144deg

gaya latar belakang yang hidup

Tata Letak

Kemudian, ubah tata letak modul.

  • Tata Letak: Tubuh Di Atas, Bentuk Di Bawah

gaya latar belakang yang hidup

Pengaturan Teks

Ubah juga pengaturan teks.

  • Orientasi Teks: Tengah
  • Warna Teks: Cahaya

gaya latar belakang yang hidup

Pengaturan Teks Judul

Selanjutnya, buka pengaturan teks judul dan buat beberapa perubahan.

  • Judul Font: Abril Fatface
  • Ukuran Teks Judul: 54px (Desktop), 40px (Tablet), 35px (Telepon)

gaya latar belakang yang hidup

Pengaturan Tombol

Ubah juga tampilan tombol.

  • Lebar Batas Tombol: 0px
  • Radius Perbatasan Tombol: 0px
  • Gaya Font: Garis Bawah
  • Gaya Garis Bawah: Ganda

gaya latar belakang yang hidup

Jarak

Terakhir, gunakan nilai padding kustom yang berbeda dalam pengaturan spasi Modul Optin Email.

  • Padding Atas: 100px
  • Padding Bawah: 100px
  • Padding Kiri: 300px (Desktop), 50px (Tablet & Ponsel)
  • Padding Kanan: 300px (Desktop), 50px (Tablet & Ponsel)

gaya latar belakang yang hidup

Simpan Tata Letak di Perpustakaan Divi untuk Digunakan Kembali

Satu-satunya yang tersisa untuk dilakukan adalah menyimpan tata letak di Perpustakaan Divi. Dengan begitu, Anda juga dapat menggunakannya kembali untuk halaman lain! Anda juga dapat mengakses posting blog sebagai halaman yang ada saat membuat halaman baru.

gaya latar belakang yang hidup

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir yang telah kita buat.

gaya latar belakang yang hidup

Pikiran Akhir

Dalam posting ini, kami telah membagikan beberapa gaya latar belakang yang menakjubkan dan bersemangat dengan Anda yang dapat Anda unduh secara gratis. Selain itu, kami juga telah memandu Anda membuat template posting blog dari awal. Jangan ragu untuk menggunakan gaya latar belakang ini untuk templat posting blog yang Anda desain sendiri. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!