Cara Membuat Transisi Bagian yang Indah Menggunakan Fitur Desain Baru Divi

Dalam tutorial Divi ini, kami akan menunjukkan kepada Anda cara membuat transisi bagian yang indah menggunakan tidak lain dari opsi Divi bawaan.

Bagian adalah dasar dari semua konten yang Anda bagikan di situs web Anda. Setiap bagian adalah bab dan berpindah dari satu bagian ke bagian lain adalah bagian dari proses bercerita. Membuat transisi ini semulus mungkin akan menekankan pesan yang Anda coba sampaikan. Untuk membantu Anda dengan itu, kami akan menunjukkan kepada Anda bagaimana Anda dapat membuat transisi bagian yang indah untuk proyek situs web Anda berikutnya.

Sneak Peek

Sebelum menyelami semua transisi bagian yang berbeda satu per satu, mari kita lihat apa yang dapat Anda harapkan:

Cara Membuat Transisi Bagian yang Indah Menggunakan Fitur Desain Baru Divi

Berlangganan Saluran Youtube Kami

Buat Ulang Bagian

Kita akan mulai dengan membuat ulang dua bagian yang akan kita gunakan di semua contoh. Dalam dua bagian ini, kami telah menggunakan padding yang diperlukan untuk mendapatkan yang terbaik dari transisi. Namun, jika Anda menggunakan bagian dengan ketinggian yang berbeda, mungkin Anda harus sedikit menyesuaikan latar belakang gradien yang digunakan untuk mencocokkan bagian dengan sempurna.

Buat Bagian Pertama

Mulailah dengan membuat bagian standar pertama dan memilih baris lebar penuh.

Pengaturan Bagian

Kita akan membutuhkan padding atas dan bawah '300px' yang dapat Anda tambahkan di dalam subkategori Spasi pada tab Desain.

Modul Teks Pertama

Kemudian, kita akan menambahkan Modul Teks ke baris lebar penuh kita. Ketik teks yang ingin Anda tampilkan dan buka tab Desain. Di dalam tab Desain, gunakan pengaturan berikut untuk subkategori Teks:

• Font Teks: Comfortaa
• Ukuran Font Teks: 50
• Tinggi Baris Teks: 1.7em
• Orientasi Teks: Tengah

Modul Teks Kedua

Lakukan hal yang sama untuk Modul Teks kedua tetapi gunakan pengaturan berikut sebagai gantinya:

• Font Teks: Comfortaa
• Ukuran Font Teks: 16
• Tinggi Baris Teks: 1.7em
• Orientasi Teks: Tengah

Modul Tombol

Terakhir, kita juga akan menambahkan Modul Tombol. Mulailah dengan memilih perataan tengah di tab Desain.

Kemudian, buka subkategori Tombol, aktifkan opsi 'Gunakan Gaya Kustom untuk Tombol' dan pilih '20' sebagai Ukuran Teks Tombol.

Saat masih dalam subkategori Tombol, gunakan latar belakang gradien berikut untuk tombol:

• Warna Pertama: #2b87da
• Warna Kedua: #29c4a9
• Tipe Gradien: Linier
• Arah Gradien: 162deg
• Posisi Awal: 0%
• Posisi Akhir: 100%

Buat Bagian Kedua

Tambahkan bagian standar lain tetapi pilih baris tiga kolom sebagai gantinya.

Pengaturan Bagian

Bagian kedua akan menggunakan padding '300px' untuk bagian atas dan bawah juga.

Modul Blurb

Selanjutnya, kita akan menambahkan Modul Blurb ke kolom pertama dari baris. Setelah Anda memutuskan teks yang ingin ditampilkan, gulir ke bawah tab Konten, aktifkan opsi 'Gunakan Ikon' dan pilih ikon.

Setelah Anda selesai melakukannya, lanjutkan ke tab Desain dan gunakan pengaturan berikut untuk Subkategori Ikon:

• Warna Ikon: #515151
• Penempatan Gambar/Ikon: Atas
• Gunakan Ukuran Font Ikon: Ya
• Ukuran Font Ikon: 55px

Kemudian, pastikan pengaturan berikut berlaku untuk subkategori Teks Header:

• Font Header: Comfortaa
• Perataan Teks Tajuk: Tengah
• Ukuran Font Tajuk: 18

Dan terakhir, ini adalah pengaturan untuk Subkategori Teks Tubuh:

• Font Tubuh: Comfortaa
• Perataan Teks Tubuh: Tengah
• Ukuran Huruf Tubuh: 14
• Tinggi Garis Tubuh: 1.7em

Modul Blurb Klon

Setelah Anda membuat Modul Blurb, klon dua kali dan letakkan di dua kolom baris lainnya.

1. Diagonal Sepanjang Jalan

Sekarang setelah kita membuat bagian, saatnya untuk mulai menambahkan transisi bagian. Contoh pertama kami akan menunjukkan cara membuat terdiri dari garis diagonal sederhana.

Pengaturan Latar Belakang Gradien Bagian Pertama

Buka pengaturan bagian pertama dan tambahkan latar belakang gradien berikut:

• Warna Pertama: #dddddd
• Warna Kedua: #f7f7f7
• Tipe Gradien: Linier
• Arah Gradien: 183 derajat
• Posisi Awal: 85%
• Posisi Akhir: 70,05%

Pengaturan Latar Belakang Gradien Bagian Kedua

Bagian kedua akan membutuhkan pengaturan latar belakang gradien berikut sebagai gantinya:

• Warna Pertama: #f7f7f7
• Warna Kedua: #dddddd
• Tipe Gradien: Linier
• Arah Gradien: 183 derajat
• Posisi Awal: 85%
• Posisi Akhir: 69,05%

Hapus Padding Atas Bagian Kedua

Hal terakhir yang perlu Anda lakukan untuk contoh ini adalah menghapus bantalan atas dari bagian kedua.

2. Temui aku di tengah jalan

Contoh berikutnya yang ingin kami bagikan adalah yang sangat elegan di mana dua latar belakang gradien yang berlawanan digunakan. Dengan menggunakan efek ini, bagian-bagian tersebut terasa seperti saling mengikuti.

Pengaturan Latar Belakang Gradien Bagian Pertama

Untuk bagian pertama, kita akan membutuhkan pengaturan latar belakang gradien berikut:

• Warna Pertama: rgba (255,255,255,0)
• Warna Kedua: rgba(224,43,32,0.07)
• Tipe Gradien: Radial
• Arah Radial: Kiri Atas
• Posisi Awal: 60%
• Posisi Akhir: 50%

Pengaturan Latar Belakang Gradien Bagian Kedua

Bagian kedua akan menikmati latar belakang gradien berikut:

• Warna Pertama: rgba (255,255,255,0)
• Warna Kedua: rgba(224,43,32,0.33)
• Tipe Gradien: Radial
• Arah Radial: Kanan Bawah
• Posisi Awal: 58%
• Posisi Akhir: 50%

3. Penggabungan

Contoh berikutnya sedikit berbeda dari yang lain. Ini akan membutuhkan bagian tambahan di antara kedua bagian untuk mencapai hasil yang dapat Anda lihat pada gambar di bawah.

Pengaturan Latar Belakang Gradien Bagian Pertama

Untuk bagian pertama Anda, Anda akan membutuhkan latar belakang gradien berikut:

• Warna Pertama: rgba (12.113.195.0.19)
• Warna Kedua: rgba (255,255,255,0.39)
• Tipe Gradien: Radial
• Arah Radial: Kiri Bawah
• Posisi Awal: 50%
• Posisi Akhir: 50%

Pengaturan Latar Belakang Gradien Bagian Kedua

Untuk bagian kedua, kita akan menggunakan pengaturan latar belakang gradien berikut:

• Warna Pertama: rgba(224,43,32,0.17)
• Warna Kedua: rgba (255,255,255,0.39)
• Tipe Gradien: Radial
• Arah Radial: Kanan Atas
• Posisi Awal: 50%
• Posisi Akhir: 50%

Tambahkan Bagian Standar Baru di Antara

Setelah Anda menambahkan latar belakang gradien ke kedua bagian, saatnya untuk menambahkan bagian tepat di antara keduanya.

Tambahkan Warna Latar Belakang Gradien ke Bagian Baru

Bagian baru itu akan membutuhkan latar belakang gradien juga, menggunakan pengaturan berikut:

• Warna Pertama: rgba (12.113.195.0.19)
• Warna Kedua: rgba(224,43,32,0.17)
• Tipe Gradien: Linier
• Arah Gradien: 92deg
• Posisi Awal: 43%
• Posisi Akhir: 62%

4. Terbalik

Kemudian, kami juga memiliki transisi bagian yang tidak mencolok seperti yang lain tetapi masih berhasil menambahkan sentuhan halus ke bagian Anda.

Pengaturan Latar Belakang Gradien Bagian Pertama

Latar belakang gradien untuk bagian pertama adalah sebagai berikut:

• Warna Pertama: #f2f2f2
• Warna Kedua: rgba(104.153.193.0.58)
• Tipe Gradien: Radial
• Arah Radial: Kanan Bawah
• Posisi Awal: 7,9%
• Posisi Akhir: 7,9%

Pengaturan Latar Belakang Gradien Bagian Kedua

Dan latar belakang gradien kedua akan membutuhkan pengaturan latar belakang gradien berikut:

• Warna Pertama: rgba(104.153.193.0.58)
• Warna Kedua: #f2f2f2
• Tipe Gradien: Radial
• Arah Radial: Kanan Atas
• Posisi Awal: 8%
• Posisi Akhir: 8%

5. Petunjuk

Contoh kelima terlihat sedikit lebih bersih dan minimalis daripada yang lain. Anda dapat melihat transisi dalam dua cara dengan melihat penunjuk atau lingkaran (atau keduanya).

Pengaturan Latar Belakang Gradien Bagian Pertama

Gunakan latar belakang gradien berikut untuk bagian pertama:

• Warna Pertama: #f4f4f4
• Warna Kedua: #ffffff
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Awal: 88%
• Posisi Akhir: 88,05%

Pengaturan Latar Belakang Gradien Bagian Kedua

Terakhir, terapkan pengaturan latar belakang gradien berikut ke bagian kedua:

• Warna Pertama: rgba(43,135,218,0)
• Warna Kedua: rgba (12.113.195.0.43)
• Tipe Gradien: Radial
• Arah Radial: Bawah
• Posisi Awal: 87%
• Posisi Akhir: 87%

6. Teka-teki

Contoh terakhir pasti membuat bagian-bagian itu terasa seperti milik bersama.

Pengaturan Latar Belakang Gradien Bagian Pertama

Buka pengaturan bagian pertama dan gunakan latar belakang gradien berikut:

• Warna Pertama: rgba (160.181.193.0.46)
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Awal: 56,3%
• Posisi Akhir: 43%

Pengaturan Latar Belakang Gradien Bagian Kedua

Kemudian, gunakan pengaturan latar belakang gradien berikut untuk bagian kedua:

• Warna Pertama: rgba (242.242.242,0)
• Warna Kedua: rgba (160.181.193.0.46)
• Tipe Gradien: Radial
• Arah Radial: Atas
• Posisi Awal: 56%
• Posisi Akhir: 40%

Ubah Padding Bagian Pertama

Untuk membuat kedua bagian lebih pas, kita akan mengubah padding atas dan bawah dari bagian pertama menjadi '150px'.

Hapus Padding Atas Bagian Kedua

Terakhir, kita juga akan menghapus padding atas dari bagian kedua.

Pikiran Akhir

Transisi bagian membantu menghubungkan bagian yang berbeda dan tujuannya. Dalam posting ini, kami telah membagikan 6 contoh yang dapat Anda buat ulang dengan menggunakan opsi bawaan Divi. Jika Anda memiliki pertanyaan atau saran; jangan ragu untuk 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 NikVector / shutterstock.com