7 Teknik Membuat Website Tebal & Berwarna dengan Divi

Menggunakan gaya desain yang berani dan penuh warna untuk situs web Anda adalah cara yang bagus untuk membuat situs web Anda menonjol. Ini akan membantu Anda membawa getaran positif ke situs web Anda dan meskipun tidak sesuai dengan jenis situs web apa pun, itu pasti cocok untuk banyak dari mereka.

Dalam posting ini, kami akan menunjukkan kepada Anda 7 teknik Divi yang berbeda tentang cara membuat desain web yang berani dan penuh warna menggunakan opsi bawaan Divi saja. Pertama, kita akan membahas teknik yang berbeda dan setelah itu kita akan membuat ulang contoh yang sesuai dengan deskripsi.

Ini adalah posting terakhir dalam seri posting di mana kami telah menangani 4 gaya situs web yang berbeda dan cara mencapainya menggunakan Divi:

1. Bersih & Abstrak
2. Minimal
3. Datar
4. Tebal & Berwarna-warni

Mari kita lakukan!

Berlangganan Saluran Youtube Kami

1. 'Ubah' Baris menjadi Bagian Dengan Kolom

Teknik pertama yang dapat Anda gunakan untuk membuat desain web yang berani dan penuh warna adalah mengubah baris menjadi beberapa bagian. Dengan menghapus semua padding default antara bagian dan baris, Anda tidak akan meninggalkan perbedaan yang jelas di antara keduanya. Ini, dalam kombinasi dengan menghapus lebar talang, memungkinkan Anda memiliki dua kolom yang ditekan bersama.

2. Gradien + Tekstur Latar Belakang

Menggunakan latar belakang gradien di situs web Anda dapat memberikan hasil yang menakjubkan. Tetapi yang membantu Anda memberdayakan warna-warna ini, terlebih lagi, adalah menggabungkannya dengan latar belakang bertekstur. Untuk menjaga keseimbangan, gunakan kombinasi ini untuk satu kolom saja. Jaga agar kolom kedua tetap bersih dan ringan untuk sentuhan modern.

3. Warna Gradien Semitransparan + Pembagi Bagian Bawah

Setelah Anda mengubah baris menjadi bagian, Anda juga dapat menambahkan pembagi bagian ke latar belakang kolom. Untuk memastikan pembagi terlihat, tanpa tumpang tindih konten, gunakan warna gradien yang sedikit transparan untuk kolom Anda.

4. Tumpang Tindih Kolom Horisontal dari Modul

Anda sering melihat situs web menggunakan tumpang tindih vertikal. Tumpang tindih horizontal, di sisi lain, lebih jarang digunakan meskipun dapat memberikan hasil yang benar-benar menakjubkan. Untuk mencapai hasil seperti ini, penting untuk mengetahui bahwa elemen di kolom kanan memiliki keunggulan hierarkis untuk elemen di kolom kiri. Anda tidak dapat mencapai hasil yang sama jika Anda menempatkan elemen Anda di kolom kiri.

5. Pisahkan Salinan untuk Penjajaran Sempurna

Tidak ada yang lebih memuaskan daripada memiliki keselarasan yang sempurna. Ini adalah salah satu prinsip desain utama yang membedakan desain yang baik dari desain yang buruk. Untuk memastikan keselarasan ini sempurna saat tumpang tindih dua kolom, coba pisahkan salinan Anda menjadi Modul Teks yang berbeda. Ini akan memungkinkan Anda untuk membuat perataan sempurna dengan membuat margin kiri negatif cocok dengan kata atau kalimat itu secara khusus.

6. Gabungkan Warna Teks Hitam dan Semitransparan

Untuk menambahkan aspek tebal ke situs web Anda, gunakan ukuran font besar untuk salinan yang Anda bagikan bersama dengan Berat Font Teks yang sangat tebal. Dan untuk menyeimbangkan keberanian, Anda dapat beralih antara menggunakan warna teks hitam dan yang semitransparan. Ini akan membantu Anda menciptakan kedalaman dan variasi yang cukup di situs web Anda.

7. Hindari Bayangan Kotak di Atas atau Bawah untuk Menyatukan Bagian

Anda dapat dengan mudah menyatukan dua bagian di halaman Anda dengan bermain-main dengan opsi bayangan kotak. Hal pertama yang pertama, gunakan bayangan kotak yang sangat halus. Itu berarti menggunakan kekuatan blur yang cukup, kekuatan penyebaran negatif dan warna bayangan kotak yang sangat ringan. Setelah Anda membuat bayangan kotak halus Anda, bermain-main dengan posisi vertikal. Untuk bagian pertama di halaman Anda, pastikan Anda memindahkan posisi vertikal hingga bayangan kotak tidak muncul di bagian bawah bagian Anda. Hal yang sama berlaku untuk bagian terakhir, tetapi sebagai gantinya, pastikan itu tidak muncul di bagian atas.

Pratinjau

Sekarang kita telah melalui semua teknik yang berbeda, saatnya untuk mempraktikkannya. Kami akan membuat ulang desain berikut:

Mari Mulai Membuat: Tambahkan Bagian Standar #1

Pengaturan Bagian

Pembagi Atas

Tambahkan halaman baru dengan bagian standar dan buka pengaturan bagian segera. Hal pertama yang kita perlukan adalah pembagi atas:

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: rgba (0,0,0,0.13)
• Tinggi Pembagi: 900px
• Flip Pembagi: Vertikal
• Pengaturan Pembagi: Isi Bagian Bawah

Pembagi Bawah

Lanjutkan dengan menambahkan pembagi bawah yang serupa juga.

• Gaya Pembagi: Temukan di Daftar
• Warna Pembagi: rgba (0,0,0,0.13)
• Tinggi Pembagi: 900px
• Pengaturan Pembagi: Isi Bagian Bawah

Jarak

Selanjutnya, beri bagian margin dan hapus padding default.

• Margin Atas & Bawah: 50px
• Margin Kiri & Kanan: 50px
• Padding Atas & Bawah: 0px
• Padding Kiri & Kanan: 0px

Sudut Bulat

Kemudian, buka pengaturan Border dan tambahkan beberapa sudut membulat.

• Kiri Atas: 20px
• Kanan Atas: 20px

Bayangan Kotak

Kami menggunakan bayangan kotak halus di bagian atas bagian kami dengan membuat penyesuaian berikut:

• Posisi Vertikal Bayangan Kotak: -23px
• Kekuatan Buram Bayangan Kotak: 37px
• Kekuatan Penyebaran Bayangan Kotak: -29px
• Warna Bayangan: rgba (0,0,0,0.22)
• Posisi Bayangan Kotak: Bayangan Luar

Tambahkan Baris Baru

Struktur Kolom

Bukannya kita sudah selesai mengubah pengaturan bagian, kita bisa melanjutkan dengan menambahkan baris dengan dua kolom.

Kolom 1 Latar Belakang Gradien

Tanpa menambahkan modul apa pun, kita akan membuka pengaturan baris. Hal pertama yang perlu kita lakukan di sana adalah menambahkan latar belakang gradien ke kolom pertama kita.

• Warna 1: rgba(255,191,0,0,76)
• Warna 2: rgba(153,0,255,0.87)

Kolom 1 Gambar Latar Belakang Tekstur

Kami akan menggabungkan latar belakang gradien ini dengan latar belakang bertekstur. Gambar yang saya gunakan adalah bagian dari Paket Tata Letak Meetup Divi. Simpan gambar berikut ke desktop Anda dengan mengklik kanan dan menyimpannya (ini adalah file png dengan tekstur putih, Anda tidak akan dapat melihat tampilannya sampai Anda membukanya di komputer dan/atau menggunakannya di situs web Anda ):

Setelah Anda mengunggah gambar ke Perpustakaan Media Anda, pastikan Anda memilih 'pas' sebagai Ukuran Gambar Latar Kolom 1 juga.

Warna Latar Kolom 2

Selanjutnya, beri kolom kedua Anda warna latar belakang '#F7F7F7'.

Perekat

Kita akan 'mengubah' baris kita menjadi bagian dengan membuatnya memenuhi seluruh lebar bagian.

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Seiring dengan membuat baris mengambil seluruh lebar bagian, kita juga harus menghapus bantalan atas dan bawah bagian kita.

• Padding Atas & Bawah: 0px

Tambahkan Modul Pembagi ke Kolom 1

Sembunyikan Pembagi

Mari mulai menambahkan modul! Hal pertama yang kita perlukan adalah Modul Pembagi di kolom pertama. Kami hanya menggunakan modul ini untuk membuat ruang yang kami butuhkan di kolom pertama. Kami sebenarnya tidak ingin itu muncul. Setelah Anda menambahkan modul, pastikan Anda menonaktifkan opsi 'Show Divider'.

Jarak

Buka pengaturan Spasi berikutnya dan tambahkan padding khusus berikut ke pembagi:

• Padding Atas: 200px (Desktop & Tablet), 150px (Ponsel)
• Padding Bawah: 200px (Desktop & Tablet), 150px (Ponsel)

Tambahkan Modul Teks #1 ke Kolom 2

Tambahkan Salinan

Sekarang kita dapat melanjutkan ke kolom kedua. Di sini, kita akan menjatuhkan tiga Modul Teks kita yang berbeda dan membuatnya tumpang tindih di kedua kolom. Jika Anda ingin membuat modul tumpang tindih dengan dua kolom atau lebih, Anda harus selalu menempatkannya di kolom yang ada di sebelah kanan. Begitulah cara kerja struktur hierarkis. Tambahkan Modul Teks pertama Anda dan tambahkan beberapa salinan.

Pengaturan Teks

Buka pengaturan teks berikutnya dan terapkan perubahan berikut:

• Berat Font Teks: Sangat Tebal
• Gaya Font Teks: Huruf Besar
• Warna Teks: #000000
• Ukuran Teks: 250px (Desktop), 200px (Tablet), 100px (Telepon)
• Tinggi Baris Teks: 0.75em

Jarak

Kami juga akan membutuhkan beberapa margin. Margin kiri negatif yang kita gunakan cocok dengan salinan yang kita pilih. Jika Anda ingin membuatnya bekerja dengan teks lain juga, Anda harus bermain-main dengan nilai ini. Ubah sampai Anda melihat awal karakter sejajar dengan transisi kolom.

• Margin Atas: 200px (Desktop), -250px (Tablet), -120px (Telepon)
• Margin Kiri: -279px (Desktop), 5% (Tablet & Ponsel)

Modul Teks Klon Dua Kali

Klon #1

Ubah Teks

Kami telah membuat Modul Teks pertama kami dan untuk menghemat waktu, kami akan mengkloningnya dua kali dan membuat beberapa perubahan. Hal pertama yang perlu Anda ubah tentang Modul Teks kedua adalah salinannya.

Ubah Spasi

Salinan yang kita gunakan di sini berbeda, jadi itu berarti kita perlu mengubah margin kiri. Perhatikan bagaimana kita juga menggunakan angka desimal untuk membuat Modul Teks sejajar dengan sempurna. Singkirkan margin atas juga.

• Margin Kiri: -360.7px (Desktop), 5% (Tablet & Ponsel)

Klon #2

Ubah Teks

Ubah juga salinan Modul Teks ketiga Anda.

Ubah Warna Teks

Dan untuk membuat desain lebih menonjol, kita akan mengubah warna teks modul ini menjadi 'rgba(0,0,0,0.19)'.

Ubah Spasi

Kami menghapus margin atas untuk modul ini dan menambahkan beberapa margin bawah sebagai gantinya. Margin kiri negatif juga berbeda.

• Margin Bawah: 200px
• Margin Kiri: -410px (Desktop), 5% (Tablet & Ponsel)

Tambahkan Bagian Standar #2

Pengaturan Bagian

Jarak

Kita sudah selesai dengan bagian pertama, saatnya untuk melanjutkan ke bagian berikutnya! Setelah Anda menambahkan bagian standar baru, buka pengaturan Spasi dan buat perubahan berikut:

• Margin Atas & Bawah: 50px
• Margin Kiri & Kanan: 50px
• Padding Atas & Bawah: 0px
• Padding Kiri & Kanan: 0px

Sudut Bulat

Lanjutkan dengan menambahkan beberapa sudut membulat bawah:

• Kiri Bawah: 20px
• Kanan Bawah: 20px

Bayangan Kotak

Tambahkan Box Shadow ke bagian bawah juga.

• Posisi Vertikal Bayangan Kotak: 47px
• Kekuatan Buram Bayangan Kotak: 37px
• Kekuatan Penyebaran Bayangan Kotak: -29px
• Warna Bayangan: rgba (0,0,0,0.22)
• Posisi Bayangan Kotak: Bayangan Luar

Tambahkan Baris Baru

Struktur Kolom

Selanjutnya, tambahkan baris dengan tiga kolom ke bagian baru Anda.

Perekat

Kami juga 'mengubah' baris ini menjadi bagian:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya

Jarak

Dan kami akan menghapus padding atas dan bawah default.

• Padding Atas & Bawah: 0px

Tambahkan Modul Blurb #1 ke Kolom 1

Pilih Ikon

Secara total, kita akan membutuhkan tiga Modul Blurb. Satu untuk setiap kolom. Kami akan memulai dengan menambahkan satu di kolom pertama dan setelah selesai, kami akan mengkloningnya dan menempatkannya di kolom yang tersisa. Ini akan membantu kita menghemat waktu. Setelah Anda menambahkan konten ke Modul Blurb Anda, pilih ikon pilihan di pengaturan Gambar & Ikon.

Latar Belakang Gradien

Kita akan membuatnya tampak seperti ikon yang tumpang tindih di bagian atas Modul Blurb dengan menggunakan latar belakang gradien untuk itu:

• Warna 1: rgba (255,255,255,0)
• Warna 2: #A21DF9
• Posisi Awal: 20%
• Posisi Akhir: 20%

Gambar Latar Belakang Tekstur

Kami menggabungkan latar belakang gradien dengan latar belakang bertekstur yang sama seperti yang kami gunakan di bagian sebelumnya.

Pengaturan Ikon

Ubah pengaturan ikon selanjutnya:

• Warna Ikon: #000000
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 85px

Pengaturan Teks

Lanjutkan dengan mengubah pengaturan teks.

• Orientasi Teks: Tengah
• Warna Teks: Cahaya

Pengaturan Teks Judul

Kemudian, kita akan menggunakan pengaturan berikut untuk menata judul uraian kita:

• Judul Font Berat: Ultra Tebal
• Gaya Font Teks: Huruf Besar
• Ukuran Teks Judul: 46px

Pengaturan Teks Tubuh

Dan pengaturan berikut untuk teks isi:

• Berat Huruf Tubuh: Ringan
• Ukuran Teks Tubuh: 18px

Jarak

Last but not least, kami akan memberi Modul Blurb kami ruang untuk bernafas dengan menambahkan bantalan khusus:

• Padding Atas: 50px
• Padding Bawah: 100px
• Padding Kiri & Kanan: 50px

Modul Blurb Klon Dua Kali & Tempatkan di Kolom Tersisa

Klon #1

Ubah Ikon

Setelah selesai memodifikasi Modul Blurb, klon dua kali. Setelah Anda melakukannya, tempatkan duplikat di kolom yang tersisa. Kemudian, buka Modul Blurb di kolom kedua Anda dan ubah ikon yang sedang digunakan.

Ubah Latar Belakang Gradien

Lanjutkan dengan mengubah warna background gradien kedua menjadi '#D47A9A'.

Klon #2

Ubah Ikon

Lakukan hal yang sama untuk Modul Blurb di kolom terakhir.

Ubah Latar Belakang Gradien

Untuk modul ini, kami menggunakan '#F3BF3E' sebagai warna latar belakang gradien kedua.

Pratinjau

Jika Anda telah mengikuti setiap langkah di atas, Anda seharusnya telah mencapai hasil berikut pada ukuran layar yang berbeda:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat situs web yang berani dan penuh warna menggunakan opsi bawaan Divi saja. Pertama, kami telah melalui beberapa teknik Divi yang dapat Anda tangani dan setelah itu, kami telah membuat ulang contoh yang cocok dari awal. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!