Cara Menggunakan Opsi Transform untuk Mendesain Latar Belakang Pembagi Bagian yang Unik di Divi

Gaya pembagi bagian bawaan Divi selalu menjadi cara yang populer (dan sederhana) untuk menambahkan desain latar belakang yang kreatif ke halaman Anda. Tidak hanya menyediakan cara cepat dan indah untuk memecah konten halaman, itu juga dapat menambahkan tekstur latar belakang abstrak untuk membedakan situs web Anda. Dan dengan dirilisnya opsi transformasi Divi, ada lebih banyak hal keren yang dapat Anda lakukan dengan pembagi bagian tersebut.

Dalam tutorial ini, saya akan menunjukkan cara menggunakan opsi transformasi untuk mendesain latar belakang pembagi bagian yang unik di Divi.

Mari kita mulai.

Sneak Peek

Berikut ini adalah cuplikan desain yang dapat Anda buat dalam tutorial ini.

Unduh Layout Contoh Latar Belakang Pembagi Bagian GRATIS

Untuk meletakkan tangan Anda pada contoh latar belakang pembagi bagian ini, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

Untuk mengimpor tata letak ke halaman Anda, cukup ekstrak file zip dan seret file json ke Divi Builder.

Sekarang mari kita ke tutorialnya ya?

Mulai

Untuk memulai tutorial ini, yang Anda butuhkan hanyalah Tema Divi dan gambar untuk digunakan sebagai contoh konten. Kami akan membangun desain dari awal. Yang perlu Anda lakukan adalah membuat halaman baru dan menerapkan pembuat Divi di ujung depan. Kemudian Anda siap untuk pergi.

Membuat Latar Belakang Bentuk Abstrak dengan Pembagi Bagian

Contoh pertama ini adalah cara yang sangat keren untuk membuat beberapa latar belakang bentuk abstrak untuk konten Anda. Pada dasarnya, ini melibatkan penyesuaian bagian kosong dengan pembagi dan memposisikan pembagi bagian itu di mana saja pada halaman di belakang konten lain.

Berikut cara melakukannya.

Membuat Bagian Konten

Sebelum kita mulai menambahkan pembagi bagian ke halaman kita, pertama-tama mari kita tambahkan beberapa contoh konten. Buat bagian reguler baru dengan baris dua kolom.

Tambahkan Modul Teks

Kemudian tambahkan modul teks ke kolom 1 dengan konten tiruan berikut:

<h2>About Divi Meetups</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings</p>

Kemudian perbarui desain sebagai berikut:

Ukuran Teks Teks: 16px
Tinggi Baris Teks: 1.9em
Judul 2 Font: Roboto
Judul 2 Berat Font: Ringan
Judul 2 Ukuran Teks: 50px (desktop), 40px (tablet), 32px (ponsel)
Pos 2 Tinggi Baris: 1.4em

Tambahkan Modul Gambar

Selanjutnya tambahkan modul gambar ke kolom 2 dan unggah gambar yang ingin Anda tampilkan. Dalam contoh ini saya menggunakan gambar dari salah satu paket tata letak kami yaitu 800px kali 1156px.

Kemudian sesuaikan lebar dan perataan gambar sebagai berikut:

Lebar: 80% (desktop), 70% (tablet)
Penyelarasan Modul: Kiri

Tambahkan Padding ke Kolom 1

Dengan teks dan gambar kita di tempat, kita perlu menambahkan beberapa padding atas ke kolom 1 untuk menurunkan modul teks kita. Buka pengaturan baris dan perbarui yang berikut:

Kolom 1 Padding Kustom (desktop): 250px atas
Kolom 1 Padding Kustom (tablet): 50px atas

Menambahkan Bagian Atas dengan Pembagi Bagian

Pada titik ini, kami siap untuk menambahkan desain pembagi bagian pertama kami. Untuk melakukan ini, kita perlu membuat bagian baru. Jadi lanjutkan dan buat bagian reguler baru (jangan tambahkan kolom ke bagian karena kita tidak membutuhkannya) dan seret ke atas bagian yang berisi teks dan gambar kita.

Kemudian berikan bagian dan latar belakang transparan dan pembagi atas dengan memperbarui yang berikut:

Warna Latar Belakang: rgba(0,0,0,0)
Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi: rgba(120.168.193.0.45)
Tinggi Pembagi: 500 piksel (desktop), 400 piksel (tablet), 300 piksel (ponsel)

Selanjutnya, buka tab lanjutan dan atur nilai Z Index menjadi 1 agar tetap berada di atas bagian di bawahnya.

Kemudian perbarui ukuran dan jarak bagian sebagai berikut:

Lebar: 500 piksel (desktop), 400 piksel (tablet), 320 piksel (ponsel)
Perataan Bagian: Tengah
Margin Kustom: -100px
Padding Kustom: 100px atas, 100px bawah

Perhatikan bahwa lebarnya sama dengan tinggi pembagi yang kita tambahkan sebelumnya (500px untuk desktop, 400px untuk tablet, dan 320px untuk ponsel). Ini akan memberi kita desain persegi yang sempurna untuk pembagi bagian kita. Penting juga untuk mengecilkan lebar dan tinggi pembagi untuk menyesuaikan tablet dan ponsel karena jika Anda tidak melakukannya, bagian tersebut akan miring dan merusak desain atau menyebabkan overflow pada viewport browser.

Padding khusus hanya untuk memberi bagian ketinggian sehingga kita tidak perlu menyesuaikan nilai translasi transformasi sebanyak mungkin nanti.

Sekarang setelah kita memiliki desain bagian, kita dapat menggunakan opsi transformasi untuk memposisikan dan memutar pembagi bagian di mana pun kita menginginkannya di halaman.

Perbarui berikut ini:

Transformasi Terjemahkan sumbu X (desktop): -100%
Transformasi Terjemahkan sumbu Y (desktop): 200%

Transformasi Terjemahkan sumbu X (tablet): -50%
Transformasi Terjemahkan sumbu Y (desktop): 100%

Transform Putar sumbu Z: -45deg

Salin dan Tempel Bagian

Kami akan menambahkan satu lagi desain pembagi bagian ke halaman. Tetapi untuk memulai desain, gunakan mode tampilan gambar rangka dan salin bagian atas (dengan gaya pembagi bagian) dan tempel di bawah bagian yang berisi teks dan gambar.

Perbarui Pengaturan Bagian

Kemudian perbarui margin khusus sebagai berikut:

Margin Kustom: -100px bawah

Selanjutnya kita dapat mengecilkan ukuran bagian menggunakan opsi transform scale sebagai berikut:

Skala Transform (sumbu X dan Y): 50%

Menggunakan transform translate, kita dapat memindahkan bagian ke atas dan ke kanan sebagai berikut:

Transformasi Terjemahkan sumbu X (desktop): -20%
Transformasi Terjemahkan sumbu Y (desktop): -100%

Transformasi Terjemahkan sumbu X (tablet): 80%

Transformasi Terjemahkan sumbu X (tablet): 30%

Sekarang putar bagian sebagai berikut:

Transformasi Putar sumbu Z (desktop): 225 derajat

Transform Rotate Z-axis (tablet): -225deg

Hasil Akhir

Mari kita lihat hasil akhirnya. Perhatikan bagaimana bagian-bagian tersebut diposisikan ulang pada tablet dan ponsel untuk desain yang indah.

Dan berikut adalah beberapa contoh dari Gaya Pembagi yang berbeda menggunakan tata letak yang sama. Jangan ragu untuk bereksperimen dengan berbagai gaya dan rotasi Anda sendiri.

Membuat Pembagi Bagian Horizontal

Opsi transformasi Divi juga memungkinkan kita untuk memutar pembagi bagian untuk membuat desain pembagi bagian horizontal. Ini dapat memberikan latar belakang yang unik untuk konten halaman Anda.

Berikut cara melakukannya.

Gandakan Bagian dengan Konten Mock

Untuk contoh ini, kita dapat menggunakan bagian konten yang sama yang kita buat untuk contoh pertama di atas. Silakan salin dan tempel bagian di bagian bawah halaman.

Perbarui Bagian Konten

Selanjutnya, buka pengaturan bagian untuk bagian yang digandakan dan perbarui yang berikut ini:

Padding Kustom (desktop): 80px atas, 80px bawah
Padding Kustom (tablet): 0px atas

Membuat Pembagi Bagian Horizontal

Untuk membuat pembagi bagian horizontal, pertama buat bagian reguler baru tepat di atas bagian konten.

Kemudian perbarui yang berikut ini:

Warna Latar Belakang: rgba(0,0,0,0)
Gaya Pembagi Atas: lihat tangkapan layar
Warna Pembagi Atas: rgba(120,168,193,0.45)
Tinggi Pembagi Atas: 80vw
Balik Pembagi Atas: vertikal

Untuk memastikan kita dapat melihat pembagi bagian di atas bagian di bawahnya, kita perlu memperbarui Indeks Z menjadi 1.

Selanjutnya kita perlu memberi bagian kita lebar dan jarak khusus sebagai berikut:

Lebar: 800 piksel
Perataan Bagian: kiri
Margin Kustom: -100px atas
Padding Kustom: 100px atas, 100px bawah

Lebar bagian (800px) akan menjadi tinggi bagian setelah diputar untuk berfungsi sebagai pembagi bagian horizontal. Jadi, Anda mungkin perlu menyesuaikan ketinggian ini tergantung pada jumlah konten yang Anda miliki di bagian di bawahnya.

Sekarang kita siap untuk memposisikan dan memutar bagian menggunakan opsi transformasi sebagai berikut:

Transformasi Terjemahkan sumbu X: -50%
Transformasi Terjemahkan sumbu Y: 250%

Transform Putar sumbu Z: -90deg

Hasil Akhir

Berikut adalah hasil akhir dari desain tersebut.

Dan berikut adalah beberapa contoh gaya pembagi yang berbeda menggunakan tata letak yang sama.

Membungkus

Selalu ada ruang untuk lebih banyak ide tentang cara menambahkan desain unik ke situs web Anda. Dengan opsi transformasi Divi dan pembagi bagian yang mudah dirancang, Anda dapat melakukan beberapa hal yang cukup kreatif. Mudah-mudahan, contoh dalam tutorial ini akan menginspirasi Anda untuk membuat beberapa latar belakang pembagi bagian untuk membawa putaran baru yang segar pada proyek Anda berikutnya.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!