10 Cara Menyenangkan Menggunakan Modul Pembagi dengan Opsi Divi Baru

Dalam tutorial Divi hari ini, kami akan berbagi dengan Anda sekilas tentang apa yang dapat Anda lakukan dengan opsi baru yang telah ditambahkan ke Divi di pembaruan sebelumnya. Lebih tepatnya; kami akan membagikan 10 cara menarik untuk menata Modul Pembagi dengan perubahan baru ini. Kemungkinannya benar-benar tidak terbatas, tetapi posting ini mungkin membantu Anda menemukan inspirasi yang Anda butuhkan untuk proyek Anda berikutnya.

Sneak Peek

Salah satu hal terbaik tentang tutorial ini adalah kenyataan bahwa kita tidak akan menggunakan CSS tambahan (atau kode apa pun dalam hal ini). Semua contoh yang akan kita buat hanya akan menggunakan opsi yang disertakan dalam Modul Pembagi. Mari kita lihat pembagi yang akan kita buat sebelum saya menunjukkan cara membuat masing-masing selangkah demi selangkah:

10 Cara Menyenangkan Menggunakan Modul Pembagi dengan Opsi Divi Baru

Berlangganan Saluran Youtube Kami

Buat Bagian yang Dapat Digunakan Kembali

Hal pertama yang harus Anda lakukan adalah membuat bagian yang akan kita gunakan di seluruh 10 contoh. Tentu saja, Anda juga dapat menggunakan pembagi dalam konteks lain, tetapi dengan membuat bagian ini terlebih dahulu, Anda akan memiliki kesempatan untuk bermain-main dengan Divi Builder Anda sendiri dan melihat mana yang Anda sukai.

Buat Halaman Baru

Mulailah dengan membuat halaman baru di dasbor WordPress Anda, mengaktifkan Divi Builder dan membuka Visual Builder.

Buat Bagian dengan Baris Tiga Kolom

Setelah Anda berada di halaman baru, buat bagian standar dan gunakan baris tiga kolom di dalam bagian standar tersebut. Kami telah menggunakan '#f4f4f4' sebagai warna latar bagian.

Tambahkan Modul Teks Pertama

Kemudian, tambahkan Modul Teks pertama ke kolom pertama dari baris. Buka pengaturan, ketik teks yang ingin Anda tampilkan dan buka tab Desain. Di dalam tab Desain, buat perubahan berikut pada subkategori Teks:

• Font Teks: Lobster
• Ukuran Font Teks: 35
• Warna Teks: #000000
• Tinggi Baris Teks: 1.7em
• Orientasi Teks: Tengah

Tambahkan Modul Teks Kedua

Setelah Anda menambahkan Modul Teks pertama, Anda dapat menambahkan yang lain tepat di bawahnya. Tambahkan teks yang ingin Anda tampilkan dan buka tab Desain. Di dalam tab Desain, pastikan modifikasi berikut berlaku:

• Font Teks: Roboto
• Ukuran Font Teks: 14
• Tinggi Baris Teks: 1.7em
• Orientasi Teks: Tengah

Kloning Modul Teks & Tempatkan di Dua Kolom Lainnya

Setelah Anda membuat dua modul teks ini, Anda juga dapat meletakkannya di dua kolom baris lainnya.

Sebelum Memulai

Kami akan membagikan 10 cara menyenangkan untuk mendesain modul pembagi Divi. Masing-masing contoh akan memiliki tiga pembagi yang selaras satu sama lain. Sebagian besar pengaturannya sama untuk ketiga modul. Kami akan mulai dengan menunjukkan kepada Anda pengaturan yang diperhitungkan untuk masing-masing dari mereka dan melanjutkan dengan menunjukkan perubahan yang perlu Anda buat pada dua pembagi lainnya. Jadi, setiap kali Anda menyelesaikan pembagi pertama, klon dan letakkan di dua kolom lainnya. Setelah Anda selesai melakukannya, Anda dapat membuat modifikasi pada dua pembagi lainnya.

Catatan: Untuk setiap pembagi, Anda harus mengaktifkan opsi 'Tampilkan Pembagi' di dalam tab Konten.

1. Segitiga Kabur

Pengaturan Modul Pembagi Pertama

Tab Konten

Di dalam tab konten, kita akan menggunakan pengaturan latar belakang berikut:

• Warna Pertama: #e09900
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Linier
• Arah Gradien: 176deg
• Posisi Awal: 13%
• Posisi Akhir: 31%

Tab Desain

Pindah ke tab Desain dan pastikan pengaturan berikut berlaku untuk subkategori Ukuran:

• Berat Pembagi: 0
• Tinggi: 25px
• Lebar: 35%
• Penyelarasan Modul: Pusat

Gulir ke bawah tab yang sama dan gunakan pengaturan animasi berikut di subkategori Animasi:

• Gaya Animasi: Slide
• Pengulangan Animasi: Sekali
• Arah Animasi: Pusat
• Durasi Animasi: 1200ms
• Intensitas Animasi: 80%

Pengaturan Modul Pembagi Kedua

Tab Konten

Di tab konten, satu-satunya hal yang perlu Anda lakukan adalah mengubah warna gradien pertama menjadi '#0c71c3'.

Tab Desain

Selanjutnya, Anda perlu menambahkan beberapa penundaan animasi '250ms' ke subkategori Animasi.

Pengaturan Modul Pembagi Ketiga

Tab Konten

Ubah warna gradien pertama menjadi '#8300e9' untuk pembagi terakhir.

Tab Desain

Penundaan animasi yang harus Anda tambahkan ke subkategori Animasi dari pembagi terakhir adalah '500ms'.

2. Bayangan Warna

Pengaturan Modul Pembagi Pertama

Tab Konten

Gunakan pengaturan latar belakang gradien berikut di tab Konten:

• Warna Pertama: #e09900
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Linier
• Arah Gradien: 180 derajat
• Posisi Awal: 0%
• Posisi Akhir: 72%

Tab Desain

Hal pertama yang harus Anda lakukan dalam tab Desain adalah mengubah warna pembagi menjadi '#000000'.

Di dalam subkategori Gaya pada tab yang sama, gunakan 'Padat' sebagai Gaya Pembagi dan 'Atas' sebagai Posisi Pembagi.

Lanjutkan menggulir ke bawah dan membuat perubahan berikut berlaku untuk subkategori Ukuran:

• Berat Pembagi: 2
• Tinggi: 20px
• Lebar: 70%
• Penyelarasan Modul: Pusat

Dan terakhir, gunakan pengaturan opsi berikut untuk subkategori Animasi:

• Gaya Animasi: Bounce
• Pengulangan Animasi: Sekali
• Arah Animasi: Pusat
• Durasi Animasi: 2000ms

Pengaturan Modul Pembagi Kedua

Tab Konten

Ubah warna gradien pertama dari latar belakang gradien menjadi '#0c71c3'.

Tab Desain

Dalam subkategori Animation, tambahkan '350ms' ke opsi Animation Delay.

Pengaturan Modul Pembagi Ketiga

Tab Konten

Buat perubahan yang sama pada pembagi ketiga tetapi gunakan warna '#8300e9' sebagai gantinya.

Tab Desain

Dan terakhir, tambahkan penundaan animasi '700ms'.

3. Seri Gradien

Pengaturan Modul Pembagi Pertama

Tab Konten

Untuk pembagi pertama, gunakan pengaturan latar belakang gradien berikut:

• Warna Pertama: #0970a0
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Linier
• Arah Gradien: 119deg
• Posisi Awal: 0%
• Posisi Akhir: 86%

Tab Desain

Di dalam tab Desain, pilih '#FFFFFF' sebagai warna pembagi Anda.

Selanjutnya, buat perubahan berikut pada subkategori Styles:

• Gaya Pembagi: Padat
• Posisi Pembagi: Berpusat Vertikal

Saat masih di tab yang sama, pastikan pengaturan berikut berlaku untuk subkategori Ukuran:

• Berat Pembagi: 3
• Tinggi: 10px
• Lebar: 25%
• Penyelarasan Modul: Kiri

Tambahkan '15px' ke padding bawah dalam subkategori Spasi juga.

Dan terakhir, gunakan pengaturan berikut untuk subkategori Animasi:

• Gaya Animasi: Slide
• Pengulangan Animasi: Sekali
• Arah Animasi: Kiri
• Durasi Animasi: 2000ms
• Intensitas Animasi: 100%

Pengaturan Modul Pembagi Kedua

Tab Konten

Pengaturan latar belakang gradien untuk pembagi kedua sedikit berbeda:

• Warna Pertama: #0970a0
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 0%
• Posisi Akhir: 100%

Tab Desain

Di dalam subkategori Sizing, ubah Module Alignment menjadi center.

Terakhir, pusatkan Arah Animasi juga.

Pengaturan Modul Pembagi Ketiga

Tab Konten

Pembagi ketiga berisi latar belakang gradien lain juga:

• Warna Pertama: rgba (255,255,255,0)
• Warna Kedua: #0970a0
• Tipe Gradien: Linier
• Arah Gradien: 119deg
• Posisi Awal: 14%
• Posisi Akhir: 100%

Tab Desain

Kami akan membuat perubahan yang sama seperti yang kami buat pada pembagi kedua tetapi menggunakan kanan alih-alih pusat.

4. Lingkaran Bergulir

Pengaturan Modul Pembagi Pertama

Tab Konten

Mulailah dengan membuat pengaturan latar belakang gradien berikut berlaku:

• Warna Pertama: #e09900
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 20%
• Posisi Akhir: 21%

Tab Desain

Hal pertama yang harus Anda lakukan di tab Desain adalah menggunakan warna '#000000' untuk pembagi.

Kemudian, pilih 'Solid' sebagai Gaya Pembagi Anda dan 'Terpusat Secara Vertikal' sebagai Posisi Pembagi Anda.

Selanjutnya, buat perubahan berikut pada subkategori Ukuran:

• Berat Pembagi: 2
• Tinggi: 50px
• Lebar: 40%
• Penyelarasan Modul: Pusat

Terakhir, subkategori Animasi memerlukan pengaturan berikut:

• Gaya Animasi: Roll
• Pengulangan Animasi: Sekali
• Arah Animasi: Pusat
• Durasi Animasi: 1500ms
• Penundaan Animasi: 850ms
• Intensitas Animasi: 60%

Pengaturan Modul Pembagi Kedua

Tab Konten

Ubah warna gradien pertama menjadi '#0c71c3'.

Tab Desain

Dan ubah Animation Delay menjadi '0ms'.

Pengaturan Modul Pembagi Ketiga

Tab Konten

Untuk pembagi terakhir, Anda hanya perlu mengubah warna latar belakang gradien pertama menjadi '#8300e9'.

5. Braket

Pengaturan Modul Pembagi Pertama

Tab Konten

Gunakan pengaturan latar belakang gradien berikut:

• Warna Pertama: #e0d1b1
• Warna Kedua: #e09900
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 36%
• Posisi Akhir: 100%

Tab Desain

Pastikan warna pembagi sama dengan warna latar bagian. Dalam hal ini, itu adalah '#f4f4f4'.

Gulir ke bawah tab desain dan gunakan 'Pusat' sebagai Gaya Pembagi Anda dan 'Atas' sebagai Posisi Pembagi Anda.

Buat pengaturan berikut berlaku untuk subkategori Ukuran:

• Berat Pembagi: 100
• Tinggi: 18px
• Lebar: 60%
• Penyelarasan Modul: Pusat

Anda juga harus menambahkan '15px' ke padding atas, kanan dan kiri.

Terakhir, gunakan pengaturan animasi berikut:

• Gaya Animasi: Zoom
• Pengulangan Animasi: Sekali
• Arah Animasi: Pusat
• Durasi Animasi: 1000ms
• Intensitas Animasi: 80%

Pengaturan Modul Pembagi Kedua

Tab Konten

Ubah warna latar belakang gradien menjadi '#87acc1' dan '#0c71c3'.

Tab Desain

Selanjutnya, ubah Animation Duration menjadi '1300ms' dan Animation Delay menjadi '250ms'.

Pengaturan Modul Pembagi Ketiga

Tab Konten

Warna gradien yang digunakan di pembagi ketiga adalah '#c9a4e8' dan '#8300e9'.

Tab Desain

Ubah Durasi Animasi menjadi '1300ms' dan Penundaan Animasi menjadi '500ms'.

6. Garis Ganda

Pengaturan Modul Pembagi Pertama

Tab Konten

Terapkan pengaturan latar belakang gradien berikut:

• Warna Pertama: #e09900
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Linier
• Arah Gradien: 179deg
• Posisi Awal: 0%
• Posisi Akhir: 45%

Tab Desain

Pilih '#000000' sebagai warna pembagi Anda.

Dalam subkategori Gaya, gunakan 'Ganda' sebagai Gaya Pembagi Anda dan 'Terpusat Secara Vertikal' sebagai Posisi Pembagi Anda.

Selanjutnya, gunakan pengaturan berikut untuk subkategori Ukuran:

• Berat Pembagi: 5
• Tinggi: 25px
• Lebar: 35%
• Penyelarasan Modul: Kiri

Terakhir, gunakan pengaturan animasi berikut:

• Gaya Animasi: Roll
• Pengulangan Animasi: Sekali
• Arah Animasi: Kiri
• Durasi Animasi: 1000ms
• Intensitas Animasi: 50%

Pengaturan Modul Pembagi Kedua

Tab Konten

Ubah warna gradien pertama menjadi '#0c71c3'.

Tab Desain

Selanjutnya, gunakan animasi yang berbeda untuk pembagi kedua:

• Gaya Animasi: Memudar
• Pengulangan Animasi: Sekali
• Durasi Animasi: 1400ms

Pengaturan Modul Pembagi Ketiga

Tab Konten

Untuk pembagi ketiga, gunakan '#8300e9' sebagai warna latar belakang gradien pertama.

Tab Desain

Satu-satunya hal yang perlu Anda ubah di tab Desain adalah Arah Animasi, yang dalam hal ini 'Kanan'.

7. Jembatan

Pengaturan Modul Pembagi Pertama

Tab Konten

Mulailah dengan menetapkan '#8300e9' ke latar belakang.

Tab Desain

Lanjutkan dengan menggunakan warna latar bagian sebagai warna pembagi Anda, yang dalam hal ini '#f4f4f4'.

Selanjutnya, gunakan 'Dotted' sebagai Gaya Pembagi Anda dan 'Top' sebagai Posisi Pembagi Anda.

Dalam subkategori Ukuran, gunakan pengaturan berikut:

• Berat Pembagi: 15
• Tinggi: 7px
• Lebar: 70%
• Penyelarasan Modul: Kiri

Kami juga membutuhkan beberapa bantalan khusus:

• Padding Atas: 7px
• Padding Kanan: -7px
• Padding Kiri: -7px

Animasi yang akan kita gunakan memiliki pengaturan berikut:

• Gaya Animasi: Slide
• Pengulangan Animasi: Sekali
• Arah Animasi: Kiri
• Durasi Animasi: 800ms
• Penundaan Animasi: 400ms
• Intensitas Animasi: 30%

Pengaturan Modul Pembagi Kedua

Tab Konten

Untuk pembagi kedua, ubah background menjadi '#0c71c3'.

Tab Desain

Kami juga akan menggunakan animasi yang berbeda:

• Gaya Animasi: Zoom
• Pengulangan Animasi: Sekali
• Arah Animasi: Pusat
• Durasi Animasi: 800ms
• Intensitas Animasi: 30%

Pengaturan Modul Pembagi Ketiga

Tab Konten

Pembagi ketiga akan menggunakan '#8300e9' sebagai warna latar belakangnya.

Tab Desain

Animasi untuk pembagi ketiga juga sedikit berbeda:

• Gaya Animasi: Zoom
• Pengulangan Animasi: Sekali
• Arah Animasi: Kanan
• Durasi Animasi: 800ms
• Penundaan Animasi: 400ms
• Intensitas Animasi: 30%

8. Keanggunan

Pengaturan Modul Pembagi Pertama

Tab Konten

Mulailah dengan menambahkan latar belakang gradien berikut ke Pembagi pertama:

• Warna Pertama: #000000
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 20%
• Posisi Akhir: 20%

Tab Desain

Gunakan warna '#8300e9' untuk pembagi Anda.

Selanjutnya, gunakan 'dotted' sebagai Gaya Pembagi Anda dan 'Terpusat Secara Vertikal' sebagai Posisi Pembagi Anda.

Kita juga membutuhkan padding atas '40px'.

Dan animasi dengan pengaturan berikut:

• Gaya Animasi: Bounce
• Pengulangan Animasi: Sekali
• Arah Animasi: Bawah
• Durasi Animasi: 1000ms

Pengaturan Modul Pembagi Kedua

Tab Desain

Untuk pembagi kedua, ubah warnanya menjadi '#0c71c3'.

Animasi akan membutuhkan beberapa perubahan juga:

• Arah Animasi: Pusat
• Durasi Animasi 1500ms

Pengaturan Modul Pembagi Ketiga

Tab Desain

Pembagi ketiga akan menggunakan '#8300e9' sebagai warnanya.

Dan akan memiliki 'Naik' sebagai Arah Animasinya.

9. Kehalusan

Pengaturan Modul Pembagi Pertama

Tab Konten

Pilih pengaturan berikut untuk latar belakang gradien:

• Warna Pertama: #8300e9
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 0%
• Posisi Akhir: 38%

Tab Desain

Dalam subkategori Ukuran, Anda memerlukan pengaturan berikut:

• Berat Pembagi: 0
• Tinggi: 4px
• Lebar: 100%

Terakhir, animasi yang akan kita gunakan memiliki pengaturan berikut:

• Gaya Animasi: Bounce
• Pengulangan Animasi: Sekali
• Arah Animasi: Atas
• Durasi Animasi 1800ms

Pengaturan Modul Pembagi Kedua

Tab Konten

Untuk pembagi kedua, ubah warna latar belakang gradien pertama menjadi '#0c71c3'.

Pengaturan Modul Pembagi Ketiga

Tab Konten

Buat perubahan yang sama pada pembagi ketiga tetapi gunakan warna ungu '#8300e9' sebagai gantinya.

10. Cahaya

Pengaturan Modul Pembagi Pertama

Tab Konten

Manfaatkan pengaturan latar belakang gradien berikut untuk rangkaian pembagi terakhir:

• Warna Pertama:
• Warna Kedua:
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 0%
• Posisi Akhir: 38%

Tab Desain

Pilih warna latar belakang bagian sebagai warna pembagi Anda juga, dalam hal ini '#f4f4f4'.

Selanjutnya, gunakan 'Dashed' sebagai Gaya Pembagi Anda dan 'Terpusat Secara Vertikal' sebagai Posisi Pembagi Anda.

Dalam subkategori Ukuran, gunakan pengaturan berikut:

• Berat Pembagi: 70
• Tinggi: 20px
• Lebar: 100%

Terakhir, kita akan menggunakan animasi dengan opsi berikut:

• Gaya Animasi: Memudar
• Pengulangan Animasi: Sekali
• Durasi Animasi: 1800ms
• Penundaan Animasi: 800ms

Pengaturan Modul Pembagi Kedua

Tab Konten

Untuk pembagi kedua, ubah warna latar belakang gradien kedua menjadi '#0c71c3'.

Tab Desain

Dan tambahkan Penundaan Animasi '250ms'.

Pengaturan Modul Pembagi Ketiga

Tab Konten

Untuk pembagi terakhir, ubah warna latar belakang gradien kedua menjadi '#8300e9'.

Tab Desain

Dan akhiri dengan menempatkan Animation Delay ke '0ms'.

Pikiran Akhir

Dengan opsi Divi baru, banyak hal kreatif baru dimungkinkan dengan pengaturan bawaan setiap modul. Dalam posting ini, kami secara khusus menunjukkan kepada Anda bagaimana opsi ini dapat membantu Anda meningkatkan desain Anda melalui Modul Pembagi. Jika Anda memiliki pertanyaan atau saran; pastikan Anda meninggalkan komentar di bagian 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!

Gambar Unggulan oleh VikiVector / shutterstock.com