Cara Membuat Hamparan Latar Belakang Gradien Dengan Pengaturan Latar Belakang Divi

Diterbitkan: 2017-06-13

Dalam tutorial hari ini, kita akan menjelajahi kemungkinan baru dan elegan yang dibawa oleh fitur desain latar belakang Divi baru ke situs web Anda dan lebih khusus lagi; dengan menggunakan overlay latar belakang gradien.

Dengan pembaruan latar belakang baru ini, banyak opsi baru telah ditambahkan ke pembuat Divi yang akan membantu Anda memenuhi kebutuhan Anda saat mendesain situs web Anda sendiri atau untuk klien. Opsi baru ini memungkinkan Anda untuk bermain-main dengan tampilan dan nuansa situs web Anda.

Sebelum rilis pembaruan ini, sebagian besar perubahan-yang sekarang dapat dilakukan di dalam pembuat Divi-harus dilakukan melalui kode CSS khusus. Membuat perubahan desain pada latar belakang Anda kini menjadi lebih mudah dari sebelumnya. Dengan beberapa klik sederhana, Anda dapat membuat latar belakang yang indah untuk semua bagian berbeda dari situs web Anda.

Contoh Hamparan Latar Belakang Gradien

Kami telah membuat tiga bagian dengan gambar sebelum dan sesudah yang akan menunjukkan kepada Anda bagaimana opsi baru dapat meningkatkan keseluruhan perasaan yang dicerminkan oleh situs web Anda dan memberikan faktor "je ne sais quoi" tertentu padanya.

Bagian Pahlawan

Beginilah tampilan bagian pahlawan saat menambahkan gambar latar saja:

Dan ini adalah bagaimana hasil akhir kita akan terlihat ketika kita telah menambahkan overlay latar belakang gradien ke gambar latar belakang yang sama yang digunakan pada gambar di atas:

Bagian Blurb

Beginilah tampilan bagian uraian saat menggunakan latar belakang satu warna:

Dan seperti inilah hasil akhirnya ketika kita menambahkan overlay latar belakang gradien ke latar belakang pola:

Bagian Harga

Beginilah tampilan bagian harga saat kami menggunakan satu warna (dalam nada yang lebih terang dan lebih gelap):

Dan seperti inilah hasil akhirnya setelah menggunakan overlay latar belakang gradien:

Masing-masing dari mereka memiliki pengaturan yang berbeda dan kami akan menunjukkan kepada Anda dengan tepat–dan langkah demi langkah–cara membuat tampilan ini sehingga Anda dapat menggunakannya di situs web Anda sendiri.

Langkah demi Langkah: Bagian Pahlawan

Untuk bagian pertama dari posting ini, kami membuat ulang bagian pahlawan. Contoh ini akan mencerminkan bagaimana fitur desain latar belakang dapat mengubah warna yang digunakan dalam gambar. Dan meskipun kami telah menggunakan hamparan latar belakang gradien, perubahan yang kami buat sangat halus. Kami menambahkan kesan nada yang lebih gelap pada gambar dalam kombinasi dengan warna langit yang berbeda.

Mulai Membuat

Mari kita mulai dengan membuat halaman baru di situs WordPress Anda. Sekarang, tambahkan bagian standar ke halaman itu dengan baris lebar penuh. Selanjutnya, tempatkan modul yang berbeda di baris Anda. Kami menggunakan dua Modul Teks dan satu Modul Tombol.

Pengaturan Modul Teks Pertama

Modul Teks pertama adalah tempat judul bagian pahlawan Anda akan muncul. Ketik teks yang ingin Anda tampilkan di kotak konten di dalam subkategori Teks pada tab Konten dan lanjutkan ke tab Desain.

Di dalam tab Desain, buat modifikasi berikut pada subkategori Teks:

Orientasi Teks: Tengah
Ukuran Font Teks: 30
Warna Font Teks: #FFFFFF

Pengaturan Modul Teks Kedua

Sekarang, buka Modul Teks berikutnya dan masukkan teks di kotak konten juga. Selanjutnya, buka tab Desain dan buat modifikasi berikut pada subkategori Teks:

Orientasi Teks: Tengah
Ukuran Font Teks: 16
Warna Font Teks: #FFFFFF

Gulir ke bawah tab yang sama dan tambahkan '500px' ke Max Width di subkategori Sizing dan '2%' ke Bottom Margin di subkategori Spacing.

Pengaturan Tombol

Last but not least, buka pengaturan Modul Tombol. Ketik CTA yang ingin Anda tautkan ke tombol Anda di subkategori Teks pada tab Konten dan buka tab Desain.

Di dalam tab Desain, buat penyesuaian berikut pada subkategori Tombol:

Gunakan Gaya Kustom untuk Tombol: Ya
Ukuran Teks Tombol: 20
Warna Teks Tombol: #FFFFFF
Warna Latar Tombol: rgba(0,0,0,0)
Lebar Perbatasan Tombol: 2
Warna Batas Tombol: #FFFFFF
Radius Perbatasan Tombol: 7

Sekarang, buka bagian baris dan buat penyesuaian berikut di subkategori spasi modul Desain:

Margin Atas: 15%
Margin Bawah: 10%

Pengaturan Hamparan Latar Belakang Gradien

Sekarang kita sampai pada bagian yang menyenangkan; menambahkan overlay latar belakang gradien ke gambar latar belakang. Silakan dan buka pengaturan bagian. Selanjutnya, buka subkategori Latar Belakang dan mulai dengan menambahkan latar belakang gradien.

Untuk contoh yang kami buat, kami menggunakan pengaturan berikut:

Warna Pertama: #3730ff
Warna Kedua: #e02b20
Tipe Gradien: Linier
Arah Gradien: 272deg
Posisi Awal: 40%
Posisi Akhir: 100%

Sekarang, buka tab gambar latar belakang dan tambahkan gambar pilihan Anda. Kami sengaja memilih gambar yang berisi langit untuk meningkatkan efek yang kami coba buat.

Sekarang, gulir ke bawah tab yang sama. Pusatkan gambar latar belakang dan aktifkan opsi Multiply di menu tarik-turun Campuran gambar latar. Anda juga memiliki banyak pilihan lain yang dapat membantu Anda mencapai hasil yang Anda inginkan.

Dan, di sana Anda memiliki hasil akhir:

Langkah demi Langkah: Bagian Blurb

Contoh kedua yang akan kami tunjukkan cara membuat adalah bagian uraian. Kami ingin tetap fokus pada konten uraian, itu sebabnya kami tidak memilih latar belakang sibuk tetapi latar belakang pola.

Pola latar belakang yang digunakan dalam contoh ini berasal dari Toptal. Anda dapat mengunduh pola yang Anda suka untuk menggunakannya untuk semua jenis tujuan – termasuk yang komersial. Jangan lupa untuk memberi kredit mereka di sumber situs web Anda seperti yang diceritakan di FAQ mereka.

Kami juga membuat ikon uraian sedikit transparan untuk membuat warna gradien muncul. Meskipun setiap blurb memiliki pengaturan yang sama, warna yang muncul melalui ikon sedikit berbeda dan sejalan dengan warna gradien yang kita gunakan.

Mulai Membuat

Mulailah dengan menambahkan bagian standar ke halaman baru atau halaman yang sudah ada. Di dalam bagian itu, kita membutuhkan baris dengan tiga kolom.

Lanjutkan dengan menambahkan Modul Blurb di kolom pertama baris. Kami akan menggunakan pengaturan modul uraian yang sama di setiap kolom. Itu sebabnya kita hanya perlu membuat modul blurb sekali dan mengkloningnya untuk dua kolom lainnya.

Pengaturan Blurb

Buka pengaturan Modul Blurb dan ketik judul dan konten di subkategori Teks pada tab konten. Pindah ke tab Desain dan buat penyesuaian berikut pada subkategori Gambar & Ikon:

Warna Ikon: rgba(255,255,255,0.36)
Ikon Lingkaran: Ya
Warna Lingkaran: rgba (255,255,255,0)
Tampilkan Batas Lingkaran: Ya
Warna Perbatasan Lingkaran: rgba(255,255,255,0.36)
Penempatan Gambar/Ikon: Atas
Gunakan Ukuran Font Ikon: Ya
Ukuran Font Ikon: 96px

Gulir ke bawah tab yang sama dan letakkan Orientasi Teks ke 'Tengah' di subkategori Teks.

Lanjutkan menggulir dan buka subkategori Teks Header. Silakan dan gunakan pengaturan berikut:

Ukuran Font Tajuk: 18
Warna Teks Tajuk: #FFFFFF
Tinggi Garis Tajuk: 1em

Sekarang, satu-satunya yang tersisa untuk diubah adalah subkategori Teks Tubuh. Pastikan pengaturan berikut berlaku:

Ukuran Huruf Tubuh: 14
Warna Teks Tubuh: #FFFFFF
Tinggi Garis Tubuh: 1.5em

Jangan lupa untuk mengkloning Modul Blurb dua kali, letakkan di dua kolom lainnya yang tersisa dan ubah konten yang sesuai.

Pengaturan Baris

Buka pengaturan baris dan buka subkategori Spasi di tab Desain. Satu-satunya hal yang harus Anda lakukan adalah mengubah margin atas dan bawah menjadi '5%'.

Pengaturan Hamparan Latar Belakang Gradien

Last but not least, kita akan menambahkan gambar latar belakang dengan gradien overlay. Buka pengaturan bagian Anda dan buka subkategori Latar Belakang dari tab Konten.

Selanjutnya, buat perubahan berikut pada opsi gradien:

Warna Pertama: #52009b
Warna Kedua: #0edeed
Tipe Gradien: Radial
Arah Radial: Kanan
Posisi Awal: 28%
Posisi Akhir: 100%

Pindah ke opsi latar belakang, unggah pola pilihan dan buat perubahan berikut:

Posisi Gambar Latar Belakang: Tengah
Pengulangan Gambar Latar Belakang: Ulangi (tergantung pada pola Anda)
Campuran Gambar Latar Belakang: Kalikan

Itu dia! Anda sekarang harus memiliki hasil yang menakjubkan berikut:

Langkah demi Langkah: Bagian Harga

Contoh terakhir dari posting ini adalah bagian harga. Di bagian ini, kami ingin menunjukkan kepada Anda bahwa Anda dapat menggunakan latar belakang gradien di mana-mana. Ini tidak hanya dibuat untuk digunakan di bagian tetapi juga di kolom. Kami hanya akan menggunakan latar belakang gradien untuk dua kolom dan melakukan overlay latar belakang gradien untuk kolom kedua.

Alasan mengapa kami melakukan ini adalah untuk menekankan paket harga unggulan. Kami menggunakan warna yang lebih intens daripada di dua kolom lainnya dan kami juga menambahkan latar belakang pola. Kombinasi dua hal ini meningkatkan peluang untuk menarik orang ke paket harga unggulan Anda, yang paling ingin Anda promosikan.

Mulai Membuat

Mulailah dengan menambahkan bagian standar baru ke halaman baru atau yang sudah ada di situs web Anda. Bagian membutuhkan baris dengan tiga kolom. Modul yang akan kita gunakan sama untuk setiap kolom dan berisi pengaturan yang sama. Itu sebabnya kita akan membuatnya untuk kolom pertama dan mengkloningnya ke dua kolom lainnya setelahnya.

Pengaturan Modul Teks Pertama

Tambahkan Modul Teks baru ke kolom pertama, tambahkan jenis paket harga ke kotak konten di subkategori Teks dari tab konten dan lanjutkan ke tab Desain.

Terapkan perubahan berikut ke subkategori Teks dari tab Desain:

Orientasi Teks: Tengah
Ukuran Font Teks: 24
Warna Font Teks: #FFFFFF
Tinggi Baris Teks: 1.5em

Gulir ke bawah tab yang sama dan buat modifikasi berikut pada subkategori Spasi:

Margin Atas: 50px
Margin Bawah: 20px

Pengaturan Modul Teks Kedua

Tambahkan Modul Teks lain ke kolom yang sama. Tuliskan harga paket di kotak konten di dalam subkategori Teks dari tab Konten dan lanjutkan ke tab Desain.

Di tab Desain, buat penyesuaian berikut:

Orientasi Teks: Tengah
Ukuran Font Teks: 82px
Warna Font Teks: #FFFFFF
Tinggi Baris Teks: 1.1em

Gulir ke bawah tab yang sama dan tambahkan '10px' ke margin bawah.

Pengaturan Modul Teks Ketiga

Untuk Modul Teks terakhir kami, tambahkan teks ke kotak konten di subkategori Teks pada tab Konten. Lalu, buka tab Desain dan buat perubahan berikut pada subkategori Teks:

Orientasi Teks: Tengah
Ukuran Font Teks: 16
Warna Font Teks: #FFFFFF
Tinggi Baris Teks: 1.1em

Gulir ke bawah tab yang sama dan tambahkan '33px' ke margin bawah di subkategori Spasi.

Pengaturan Tombol

Modul berikutnya yang akan kita tambahkan ke kolom ini adalah Modul Tombol. Ketik CTA yang ingin Anda tampilkan di kotak konten di dalam subkategori Teks dari tab Konten dan lanjutkan ke tab Desain.

Di dalam tab Design, letakkan Button Alignment di subkategori Alignment ke 'Center' dan buat perubahan berikut pada subkategori Button:

Gunakan Gaya Kustom untuk Tombol: Ya
Ukuran Teks Tombol: 13
Warna Teks Tombol: #FFFFFF
Warna Latar Tombol: rgba(255,255,255,0.11)
Lebar Perbatasan Tombol: 2
Warna Batas Tombol: #FFFFFF
Radius Perbatasan Tombol: 4
Jarak Huruf Tombol: 1

Pengaturan Pembagi

Terakhir, kita akan menambahkan pembatas ke kolom untuk menciptakan ruang. Pilih 'Jangan Tampilkan Pembagi' di tab Konten dan buka tab desain tempat Anda meletakkan '25px' di bidang ketinggian.

Sekarang setelah kami menambahkan semua modul, pastikan Anda mengkloningnya dan meletakkannya di kolom lain juga.

Pengaturan Hamparan Latar Belakang Gradien

Untuk contoh ini, kita akan menggunakan dua pengaturan latar belakang yang berbeda untuk kolom yang berbeda. Kolom pertama dan terakhir akan sama dan kolom kedua akan sedikit berbeda.

Buka pengaturan baris dan terapkan perubahan berikut ke opsi gradien kolom pertama dan ketiga dalam subkategori Latar Belakang dari tab Konten:

Warna Pertama: rgba (10.122.178.0.57)
Warna Kedua: rgba(142,0,142,0.47)
Kolom 1 Jenis Gradien: Radial
Kolom 1 Arah Radial: Kiri Atas
Kolom 1 Posisi Awal: 0
Posisi Akhir Kolom 1: 100%

Selanjutnya, buka Kolom 2 dan buat perubahan berikut pada opsi gradien:

Warna Pertama: #0a7ab2
Warna Kedua: #8e008e
Kolom 2 Jenis Gradien: Linear
Kolom 2 Arah Gradien: 180deg
Kolom 2 Posisi Awal: 0
Kolom 2 Posisi Akhir: 100

Pindah ke opsi gambar latar belakang, unggah gambar latar belakang dan ubah pengaturan:

Kolom 2 Posisi Gambar Latar: Kiri Atas
Kolom 2 Pengulangan Gambar Latar: Ulangi
Kolom 2 Campuran Gambar Latar Belakang: Kalikan

Pikiran Akhir

Contoh yang kami tunjukkan kepada Anda di posting blog ini hanyalah sebagian kecil dari hasil yang bisa Anda dapatkan saat menggunakan fitur desain latar belakang yang baru. Dalam posting mendatang, kami pasti akan menangani contoh lain juga yang akan membantu Anda membuat desain hebat untuk situs web yang Anda buat. Jika Anda memiliki pertanyaan, komentar atau saran; tinggalkan komentar di kolom komentar di bawah!

Pastikan untuk berlangganan buletin email dan saluran YouTube kami sehingga Anda tidak akan pernah melewatkan pengumuman besar, tip bermanfaat, atau Divi freebie!