Menggunakan Opsi Transform Divi untuk Membuat Konten Bagian yang Diperluas di Arahkan

Hari ini, kita akan menyoroti opsi desain skala transformasi yang hadir dengan opsi transformasi baru Divi. Lebih dari itu, kita akan membuat ulang desain yang menakjubkan yang memungkinkan bagian diperluas saat melayang dengan cara yang elegan.

Anda dapat menggunakan desain ini untuk semua jenis situs web yang Anda buat. Ini akan membantu Anda berbagi konten yang relevan dengan cara yang terstruktur dan minimal. Di akhir tutorial ini, Anda akan dapat mengunduh seluruh tata letak halaman secara gratis.

Mari kita lakukan!

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Mari Mulai Berkreasi!

Tambahkan Bagian #1

Jarak

Mulailah dengan membuat halaman baru. Tambahkan bagian reguler pertama Anda ke halaman, buka pengaturan bagian dan hapus semua bantalan atas dan bawah default dalam pengaturan spasi.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar layar.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Hapus semua padding atas dan bawah default juga. Kami melakukan ini untuk membatasi ruang yang akan digunakan oleh baris dan bagian.

• Padding Atas: 0px
• Padding Bawah: 0px

Tambahkan Modul Pembagi

Visibilitas

Satu-satunya modul yang kita butuhkan di baris ini adalah Modul Pembagi. Di akhir tutorial ini, kita akan mengubah pembagi menjadi pembagi vertikal yang akan menghubungkan semua bagian yang akan datang. Setelah Anda menambahkan Modul Pembagi, pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Kemudian, buka tab desain dan ubah warna pembagi menjadi hitam.

• Warna: #000000

Perekat

Ubah juga nilai ukuran.

• Berat Pembagi: 1px
• Tinggi: 0px

Jarak

Dan tambah panjang pembagi dengan menambahkan beberapa margin kiri dan kanan negatif.

• Margin Kiri: -135vw (Desktop), -300vw (Tablet), -340vw (Telepon)
• Margin Kanan: -135vw (Desktop), -300vw (Tablet), -340vw (Telepon)

Tambahkan Bagian #2

Warna latar belakang

Ke bagian reguler berikutnya! Setelah Anda menambahkan bagian baru, buka pengaturan bagian dan tambahkan warna latar belakang putih seluruhnya.

• Warna Latar Belakang: #ffffff

Jarak

Kemudian, buka pengaturan jarak dan tambahkan beberapa bantalan atas dan bawah khusus.

• Padding Atas: 5vw
• Padding Bawah: 5vw

Perbatasan Default

Tambahkan batas ke bagian juga.

• Lebar Perbatasan: 1px
• Warna Perbatasan: #000000

Arahkan Perbatasan

Dan hapus lebar perbatasan saat melayang.

• Lebar Perbatasan: 0px

Bayangan Kotak Default

Kami juga menambahkan bayangan kotak di hover. Untuk melakukan itu, kita harus menambahkan yang default terlebih dahulu. Untuk memastikan bayangan kotak tidak muncul secara default, kami menggunakan warna bayangan yang sepenuhnya transparan.

• Kekuatan Buram Bayangan Kotak: 80px
• Warna Bayangan: rgba(0,0,0,0)

Arahkan Bayangan Kotak

Ubah warna bayangan pada hover menggunakan kode warna berikut:

• Warna Bayangan: rgba (0,0,0,0.13)

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar bagian.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Modul Teks

Tambahkan Konten H2

Saatnya mulai menambahkan modul! Modul pertama yang kita butuhkan adalah Modul Teks dengan beberapa konten H2.

Pengaturan Teks H2

Buka tab desain dan ubah pengaturan teks H2 sesuai dengan preferensi Anda sendiri.

• Judul 2 Font: Abril Fatface
• Judul 2 Perataan Teks: Tengah
• Judul 2 Warna Teks: #000000
• Judul 2 Ukuran Teks: 7vw

Jarak

Tambahkan beberapa nilai margin khusus juga.

• Margin Bawah: 5vw
• Margin Kiri: 5vw
• Margin Kanan: 5vw

Tambahkan Modul Pembagi

Visibilitas

Modul berikutnya dan terakhir yang kita butuhkan di baris ini adalah Modul Pembagi. Pastikan opsi 'Tampilkan Pembagi' diaktifkan.

• Tampilkan Pembagi: Ya

Warna

Kemudian, buka tab desain dan ubah warna pembagi menjadi hitam.

• Warna: #000000

Tambahkan Baris #2

Struktur Kolom

Ke baris kedua! Gunakan struktur kolom berikut:

Perekat

Kami, sekali lagi, memastikan baris memenuhi seluruh lebar layar dengan memodifikasi pengaturan ukuran di tab desain.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Jarak

Kami juga sedikit mengecilkan ukuran baris dengan menambahkan beberapa bantalan kiri dan kanan khusus dalam pengaturan jarak.

• Padding Kiri: 10vw
• Padding Kanan: 10vw

Menampilkan

Untuk memastikan ketiga kolom muncul bersebelahan pada ukuran layar yang lebih kecil, kita akan menambahkan satu baris kode CSS ke elemen utama baris.

display: flex;

Tambahkan Modul Blurb ke Kolom 1

Tambah isi

Lanjutkan dengan menambahkan Modul Blurb ke kolom pertama dari baris. Masukkan beberapa konten pilihan Anda.

Pilih Ikon

Pilih ikon berikutnya.

Pengaturan Ikon

Kemudian, buka tab desain dan ubah warna ikon.

• Warna Ikon: #000000

Pengaturan Teks Judul

Pindah ke pengaturan teks judul dan ubah pengaturan sesuai dengan preferensi Anda sendiri.

• Judul Font: Abril Fatface
• Perataan Teks Judul: Tengah
• Warna Teks Judul: #000000
• Judul Teks Ukuran: 1.5vw (Desktop), 2.5vw (Tablet), 3.5vw (Telepon)
• Tinggi Baris Judul: 2em

Pengaturan Teks Tubuh

Lakukan hal yang sama untuk pengaturan teks isi.

• Font Tubuh: Buka Sans
• Perataan Teks Tubuh: Tengah
• Warna Teks Tubuh: #666666
• Ukuran Teks Tubuh: 0.8vw (Desktop), 1.5vw (Tablet), 2vw (Telepon)
• Tinggi Garis Tubuh: 2em

Jarak

Last but not least, tambahkan beberapa margin kiri dan kanan kustom ke Modul Blurb.

• Margin Kiri: 2vw
• Margin Kanan: 2vw

Modul Blurb Klon Dua Kali & Tempatkan di Kolom Tersisa

Setelah Anda selesai menyesuaikan Modul Blurb, Anda dapat melanjutkan dan mengkloningnya dua kali. Tempatkan duplikat di dua kolom baris yang tersisa.

Tambahkan Baris #3

Struktur Kolom

Ke baris berikutnya dan terakhir. Pilih struktur kolom berikut untuk itu:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan biarkan baris memenuhi seluruh lebar bagian dengan mengubah pengaturan ukuran.

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Lebar: 100%
• Lebar Maks: 100%

Tambahkan Modul Tombol

Tambah isi

Satu-satunya modul yang kita butuhkan di sini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Penyelarasan

Lalu, buka tab desain dan ubah perataan tombol.

• Penjajaran Tombol: Tengah

Pengaturan Tombol

Ubah pengaturan tombol selanjutnya.

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 1.5vw (Desktop), 2.5vw (Tablet & Telepon)
• Warna Teks Tombol: #000000
• Lebar Perbatasan Tombol: 1px
• Warna Batas Tombol: #000000
• Radius Perbatasan Tombol: 1px
• Font Tombol: Buka Sans
• Berat Huruf: Sangat Tebal

Jarak

Dan buat bentuk untuk tombol menggunakan beberapa nilai margin dan padding kustom.

• Margin Atas: 5vw
• Padding Atas: 2vw
• Padding Bawah: 2vw
• Padding Kiri: 10vw
• Padding Kanan: 10vw

Tambahkan Pengaturan Transform ke Bagian #2

Tambahkan Skala Transformasi Default ke Bagian #2

Sekarang setelah kita selesai membuat dan memodifikasi dua bagian yang telah kita tambahkan ke halaman kita, kita dapat mulai menerapkan opsi transformasi. Buka bagian #2 dan tambahkan beberapa nilai skala transformasi kustom.

• Bawah: 60% (Desktop), 90% (Tablet & Ponsel)
• Kanan: 60% (Desktop), 90% (Tablet & Ponsel)

Arahkan Skala Transformasi ke Bagian #2

Ubah nilai-nilai ini saat mengarahkan kursor. Perhatikan bagaimana kami menggunakan nilai yang sama seperti yang kami lakukan untuk ukuran layar yang lebih kecil. Melakukan ini akan memastikan efek hover hanya akan terjadi pada ukuran layar yang lebih besar.

• Bawah: 90%
• Kanan: 90%

Bagian Klon Dua Kali

Kemudian, kloning bagian kedua dua kali (atau hingga sebanyak yang Anda inginkan).

Tambahkan Transform Rotate to Divider Module di Bagian #1

Dan ubah pembagi yang telah Anda tambahkan ke bagian pertama dengan bermain-main dengan nilai transform rotate.

• Kiri: 90 derajat

Unduh Tata Letak Bagian yang Memperluas secara GRATIS

Untuk meletakkan tangan Anda pada tata letak bagian yang diperluas, 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!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam tutorial ini, kami telah menyoroti opsi skala transformasi yang hadir dengan opsi transformasi baru Divi. Selain itu, kami telah membuat ulang desain menakjubkan yang memungkinkan efek hover masuk akal dan meningkatkan pengalaman pengguna secara keseluruhan yang dimiliki orang-orang saat mengunjungi halaman. Di akhir tutorial, Anda juga dapat mengunduh seluruh tata letak secara gratis. Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah!