Cara Menerapkan Warna Teks Gradien ke Salinan Anda Hanya Menggunakan Opsi Bawaan Divi

Apa pun jenis situs web yang Anda buat, menyoroti salinan dan konten tetap menjadi salah satu prioritas utama. Dengan opsi bawaan Divi, ada banyak cara untuk mencapainya. Salah satu kemungkinan yang Anda miliki adalah menerapkan warna teks gradien ke salinan Anda. Ini adalah pendekatan yang bagus untuk menambahkan warna ke situs web Anda, terutama jika Anda menjaga sisa situs web Anda tetap bersih dan minimalis. Ini membantu menyeimbangkan spasi putih dan memberi situs web Anda angin segar.

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara memberi warna gradien pada teks Anda menggunakan opsi bawaan Divi saja.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat hasilnya pada ukuran layar yang berbeda. Kami akan menunjukkan cara membuatnya bekerja menggunakan palet warna terang dan gelap. Setelah Anda mendapatkan pendekatannya, Anda dapat membuat semua jenis desain dengan teks gradien.

Mendekati

1. Memahami Divi Blend Mode

Mode campuran bekerja persis seperti yang Anda gunakan dalam perangkat lunak pengedit gambar. Mereka didasarkan pada struktur lapisan. Konkretnya, itu berarti mode campuran di Divi akan mengikuti hierarki tertentu:

• Mode campuran yang diterapkan ke modul akan memadukan modul + kolom di bawahnya
• Mode campuran yang diterapkan ke kolom akan memadukan kolom + baris di bawahnya
• Mode campuran yang diterapkan ke baris akan memadukan baris + bagian di bawahnya

Untuk tutorial ini, perlu dipahami bahwa mode campuran yang diterapkan ke modul akan menyatu dengan kolom di bawahnya. Dengan memberikan kolom latar belakang gradien dan modul yang bersangkutan mode campuran, kita dapat mengatur untuk mencapai teks berwarna gradien.

2. Memilih Antara Palet Warna yang Sepenuhnya Gelap atau Terang

Untuk membuatnya bekerja, Anda harus menggunakan palet warna yang sepenuhnya gelap atau terang. Mode campuran yang kami gunakan, mencerahkan dan menggelapkan, hanya akan memberikan hasil yang diinginkan saat Anda menggunakan warna hitam atau putih seluruhnya. Saat menggunakan warna lain, efek yang telah kita terapkan akan terlihat jelas.

3. Menghapus Semua Lebar Talang Antara Kolom & Modul

Seperti yang disebutkan di bagian pertama pendekatan, kita akan menggunakan latar belakang gradien kolom. Untuk memastikan latar belakang gradien ini tidak muncul di tempat yang tidak kita inginkan, kita akan menghapus semua lebar talang. Dengan melakukannya, kami akan memastikan bahwa tidak ada margin kustom default yang diterapkan antar modul. Untuk mengganti ruang yang hilang, kami akan menambahkan padding khusus secara manual.

4. Menggunakan Padding Alih-alih Mengubah Lebar Elemen

Dan untuk menyesuaikan lebar elemen desain, kita akan menggunakan padding kiri dan kanan khusus. Mengubah lebar dalam pengaturan ukuran akan mengubah lebar seluruh modul dan akan memungkinkan latar belakang gradien kolom muncul di sisi kiri dan kanan, yang merupakan sesuatu yang tidak kita inginkan.

Mari Mulai Berkreasi!

Berlangganan Saluran Youtube Kami

Tambahkan Bagian Baru

Warna latar belakang

Mari kita mulai! Tambahkan bagian reguler ke halaman baru atau yang sudah ada dan berikan warna latar belakang yang tepat (tergantung apakah Anda ingin membuat ulang tata letak terang atau gelap).

• Warna Latar Belakang: #ffffff (Tata Letak Terang), #000000 (Tata Letak Gelap)

Jarak

Lanjutkan dengan menambahkan beberapa bantalan khusus ke bagian tersebut.

• Padding Atas: 215px
• Padding Bawah: 215px

Tambahkan Baris #1

Struktur Kolom

Kemudian, tambahkan baris baru menggunakan struktur kolom berikut:

Kolom 2 Latar Belakang Gradien

Tambahkan latar belakang gradien ke kolom kedua dari baris. Di sinilah kita akan menempatkan judul Modul Teks di bagian selanjutnya dari tutorial.

• Warna 1: #c700ff
• Warna 2: #32f1ff
• Kolom 2 Arah Gradien: 150deg
• Kolom 2 Posisi Awal: 20%
• Posisi Akhir Kolom 2: 60%

Perekat

Ubah juga pengaturan ukuran.

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

Jarak

Dan ubah pengaturan spasi.

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

Tambahkan Modul Teks ke Kolom 2

Tambah isi

Sekarang lanjutkan dan tambahkan Modul Teks ke kolom kedua dari baris yang telah Anda tambahkan.

Warna latar belakang

Berikan modul Anda latar belakang yang benar, tergantung pada jenis tata letak yang ingin Anda buat ulang.

• Warna Latar Belakang: #ffffff (Tata Letak Terang), #000000 (Tata Letak Gelap)

Pengaturan Teks Judul

Ubah pengaturan teks heading selanjutnya.

• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #000000 (Tata Letak Terang), #ffffff (Tata Letak Gelap)
• Judul 2 Ukuran Teks: 67px (Desktop), 50px (Tablet), 40px (Telepon)
• Spasi Judul 2 Huruf: -2px

Jarak

Dan tambahkan beberapa bantalan bawah. Ingat, kami menggunakan padding bawah alih-alih margin untuk memastikan latar belakang gradien kolom tidak ditampilkan.

• Padding Bawah: 50px

Modus Campuran

Untuk membuat latar belakang gradien kolom berlaku untuk modul yang telah Anda tambahkan, terapkan mode campuran dalam pengaturan filter.

• Blend Mode: Lighten (Tata Letak Terang), Darken (Tata Letak Gelap)

Tambahkan Modul Pembagi ke Baris

Visibilitas

Modul kedua dan terakhir yang kita butuhkan di baris ini adalah Modul Pembagi.

• Tampilkan Pembagi: Ya

Warna latar belakang

Ubah warna latar belakang sesuai dengan jenis tata letak yang Anda buat ulang.

• Warna Latar Belakang: #ffffff (Tata Letak Terang), #000000 (Tata Letak Gelap)

Jarak

Untuk mengurangi lebar pembagi, kita akan menambahkan beberapa bantalan khusus ke sisi kiri dan kanan.

• Padding Kiri: 250px
• Padding Kanan: 250px

Modus Campuran

Sekali lagi, tambahkan mode campuran untuk membuat latar belakang gradien kolom terlihat.

• Blend Mode: Lighten (Tata Letak Terang), Darken (Tata Letak Gelap)

Tambahkan Baris #2

Struktur Kolom

Ke baris berikutnya! Gunakan struktur kolom berikut:

Kolom 1 Latar Belakang Gradien

Lanjutkan dengan menambahkan latar belakang gradien ke kolom pertama.

• Warna 1: #c700ff
• Warna 2: #32f1ff
• Kolom 1 Jenis Gradien: Linear
• Kolom 1 Arah Gradien: 105deg
• Kolom 1 Posisi Awal: 20%
• Posisi Akhir Kolom 1: 50%

Kolom 2 Latar Belakang Gradien

Kami juga menggunakan latar belakang gradien untuk kolom kedua.

• Warna 1: #32f1ff
• Warna 2: #c700ff
• Kolom 2 Jenis Gradien: Linear
• Kolom 2 Arah Gradien: 90deg
• Kolom 2 Posisi Awal: 40%
• Posisi Akhir Kolom 2: 60%

Kolom 3 Latar Belakang Gradien

Hal yang sama berlaku untuk kolom ketiga.

• Warna 1: #c700ff
• Warna 2: #32f1ff
• Kolom 3 Jenis Gradien: Linier
• Kolom 3 Arah Gradien: 85deg
• Kolom 3 Posisi Awal: 20%
• Posisi Akhir Kolom 3: 50%

Perekat

Ubah pengaturan ukuran berikutnya.

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

Jarak

Dan tambahkan beberapa bantalan kiri dan kanan khusus.

• Padding Kiri: 100px (Desktop & Tablet), 50px (Telepon)
• Padding Kanan: 100px (Desktop & Tablet), 50px (Ponsel)

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Saatnya mulai menambahkan modul! Tambahkan Modul Blurb ke kolom 1 dengan judul pilihan. Nanti di postingan, kita akan menggunakan modul terpisah untuk menambahkan konten isi.

Pilih Ikon

Pilih ikon pilihan.

Warna latar belakang

Dan ubah warna latar belakang Modul Blurb.

• Warna Latar Belakang: #ffffff (Tata Letak Terang), #000000 (Tata Letak Gelap)

Pengaturan Ikon

Lanjutkan dengan masuk ke pengaturan ikon dan buat beberapa perubahan di sana.

• Warna Ikon: #000000 (Tata Letak Terang), #ffffff (Tata Letak Gelap)
• Penempatan Gambar/Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 51px

Pengaturan Teks Judul

Ubah juga pengaturan teks judul.

• Judul Font Berat: Tebal
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000 (Tata Letak Terang), #ffffff (Tata Letak Gelap)
• Spasi Huruf Judul: -1px
• Tinggi Baris Judul: 1.2em

Jarak

Kemudian, buka pengaturan spasi dan tambahkan beberapa nilai margin dan padding khusus.

• Margin Bawah: 5px
• Padding Atas: 50px
• Padding Bawah: 50px
• Padding Kiri: 50px
• Padding Kanan: 50px

Modus Campuran

Last but not least, terapkan mode campuran yang benar.

• Blend Mode: Lighten (Tata Letak Terang), Darken (Tata Letak Gelap)

Tambahkan Modul Teks ke Kolom 1

Tambah isi

Kami memisahkan judul dan isi Modul Blurb menjadi dua modul untuk membuat mode campuran hanya berlaku untuk ikon dan judul. Silakan dan tambahkan Modul Teks tepat di bawah Modul Blurb yang berisi konten isi.

Warna latar belakang

Selanjutnya, tambahkan warna latar belakang.

• Warna Latar Belakang: #ffffff (Tata Letak Terang), #0c0c0c (Tata Letak Gelap)

Pengaturan Teks

Dan ubah pengaturan teks.

• Spasi Huruf Teks: 0.5px
• Tinggi Baris Teks: 2.3em
• Orientasi Teks: Justify
• Warna Teks: Gelap (Tata Letak Terang), Terang (Tata Letak Gelap)

Jarak

Untuk memberi modul ruang untuk bernafas, tambahkan beberapa nilai padding khusus dalam pengaturan spasi.

• Padding Atas: 100px
• Padding Bawah: 100px
• Padding Kiri: 70px
• Padding Kanan: 70px

Bayangan Kotak

Dan top it off, tambahkan bayangan kotak halus juga.

• Kekuatan Buram Bayangan Kotak: 56px
• Kekuatan Penyebaran Bayangan Kotak: -12px
• Warna Bayangan: rgba(0,0,0,0.3)

Clone Blurb Module & Modul Teks Dua Kali + Tempatkan di Kolom Tersisa

Last but not least, klon kedua modul yang dapat Anda temukan di kolom 1 dan tempatkan duplikatnya di dua kolom yang tersisa. Ubah konten yang sesuai juga.

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhirnya.

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara membuat teks gradien di situs web Anda menggunakan opsi bawaan Divi saja. Untuk membuat tutorial ini berfungsi, dan untuk dapat mempraktikkan pendekatan pada desain lain juga, Anda perlu melalui bagian pendekatan dari posting ini dan memahaminya saat membuat ulang desain. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!