Menggunakan Kontrol Transform Divi untuk Membuat Tata Letak Modul Blurb Unik

Kontrol Transform Divi membuatnya sangat mudah untuk memposisikan dan menata elemen halaman Anda untuk membuat tata letak yang unik. Modul uraian Divi adalah salah satu elemen paling umum untuk menampilkan item di situs web. Jadi, saya pikir saya akan menunjukkan cara menggunakan efek Transform itu dengan membuat beberapa tata letak unik yang menampilkan modul uraian. Tentu, Anda dapat mencapai pemosisian serupa menggunakan margin dan padding, tetapi prosesnya akan jauh lebih terlibat dan tidak terlalu menyenangkan. Plus, kontrol transformasi memungkinkan Anda menambahkan gaya tambahan untuk menskalakan dan memutar uraian Anda untuk desain yang lebih unik.

Dalam tutorial ini, saya akan menunjukkan cara memposisikan dan memutar blurb dengan cara yang kreatif menggunakan kontrol transformasi Divi.

Mari kita mulai.

Memulai

Untuk tutorial ini, yang Anda butuhkan hanyalah Divi. Untuk mengatur semuanya, lanjutkan dan buat halaman baru. Berikan judul pada halaman Anda dan gunakan pembuat Divi di bagian depan untuk membuat halaman dari awal.

Sekarang Anda siap untuk memulai.

Membuat Desain Tata Letak Blurb #1

Dalam desain tata letak pertama ini, kita akan menyusun uraian kita menggunakan dua baris yang berbeda. Kemudian kita akan menggunakan opsi Divi Transform untuk menskalakan dan memposisikan modul uraian untuk membuat tata letak modul uraian yang unik.

Buat Baris Pertama

Untuk memulai, buat bagian reguler lalu tambahkan tata letak kolom berikut untuk baris: 1/2 1/6 1/6 1/6

Tambahkan dan Gaya Modul Teks

Di kolom 1/2 di sebelah kiri, tambahkan modul teks dengan konten berikut:

<h2>Our Services</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 pengaturan desain berikut:

Warna Latar Belakang: #ffffff
Lebar: 500 piksel
Margin Kustom (desktop): -70px kiri
Margin Kustom (tablet): tersisa 20 piksel
Padding Kustom: 20px atas, 20px bawah

Perbarui Bagian Padding

Selanjutnya, kita perlu menambahkan beberapa padding ke bagian kita. Buka pengaturan bagian dan perbarui yang berikut ini:

Padding Kustom: 20vw atas

Perbarui Pengaturan untuk Baris Pertama

Selanjutnya, perbarui pengaturan baris sebagai berikut:

Lebar Talang: 1
Padding Kustom: 10vw atas, 0px bawah
Lebar Perbatasan: 5px
Warna Perbatasan: #eeeeee

Tambahkan Baris Kedua

Selanjutnya tambahkan baris lain di bawah baris yang baru saja Anda sesuaikan. Berikan tata letak enam kolom.

Buat dan Gaya Modul Blurb

Sekarang saatnya untuk mulai membuat modul uraian yang pada akhirnya akan kita posisikan menggunakan kontrol transformasi. Tambahkan kolom modul uraian 2 dari baris pertama (atas) yang Anda buat.

Dalam pengaturan uraian, hapus konten dan perbarui teks Judul dengan kata "Layanan". Kemudian klik untuk menggunakan ikon alih-alih gambar. Untuk contoh ini, saya menggunakan ikon cloud.

Perbarui sisa pengaturan uraian sebagai berikut:

Warna Ikon: #ffffff
Ikon Lingkaran: YA
Warna Lingkaran: #5e89fb
Judul Font: Nunito
Perataan Teks Judul: Tengah
Ukuran Teks Judul: 16px
Padding Kustom: 1vw atas, 1vw bawah, 1vw kiri, 1vw kanan

Kemudian perbarui margin default di bawah ikon uraian dengan menambahkan CSS berikut ke kotak CSS Gambar Blurb di bawah tab lanjutan:

margin-bottom: 5px

Selanjutnya, salin modul uraian yang baru saja Anda buat dan tempelkan ke masing-masing kolom memastikan Anda memiliki dua modul uraian di kolom 3 baris atas dan Anda membiarkan kolom 5 dan 6 kosong di baris kedua.

Tambahkan Efek Transform ke Skala dan Posisikan Blurbs

Sekarang kita siap menggunakan kontrol transformasi untuk memposisikan dan menskalakan uraian ke dalam desain yang unik.

Pertama, buka pengaturan uraian uraian di kolom 2 baris atas dan perbarui kontrol transformasi sebagai berikut:

Transformasi Skala X-sumbu: 242%
Transformasi Skala sumbu Y: 242%

Transformasi sumbu X Terjemahkan: -96px
Transformasi Terjemahkan sumbu Y: -44px

Selanjutnya, perbarui pengaturan modul Blurb teratas di kolom 3 baris pertama sebagai berikut:

Transformasi Skala X-sumbu: 192%
Transformasi Skala sumbu Y: 192%

Transformasi sumbu X Terjemahkan: -70px
Transformasi Terjemahkan sumbu Y: -13px

Kemudian, perbarui modul uraian di kolom 4 baris atas sebagai berikut:

Transformasi Skala X-sumbu: 158%
Transformasi Skala sumbu Y: 158%

Transformasi Terjemahkan sumbu X: 33px
Transformasi Terjemahkan sumbu Y: -13px

Selanjutnya, update modul blurb bawah di kolom 3 baris atas sebagai berikut:

Transformasi Skala X-sumbu: 132%
Transformasi Skala sumbu Y: 132%

Transformasi Terjemahkan sumbu X: 89px
Transformasi Terjemahkan sumbu Y: 39px

Kemudian berikan warna latar belakang berikut untuk membuat jeda di perbatasan baris untuk elemen desain yang halus:

Warna Latar Belakang: #ffffff

Itu dia!

Untuk elemen desain tambahan, Anda dapat secara bertahap meningkatkan opasitas warna lingkaran pada setiap ikon yang digunakan di seluruh tata letak.

Penyesuaian Seluler

Untuk menyesuaikan tata letak modul uraian untuk tampilan tablet dan ponsel, kita cukup mengatur efek transformasi kembali ke keadaan semula sehingga uraian kembali ke ukuran aslinya dan akan diposisikan di dalam kolom dengan baik. Untuk melakukan ini, kita dapat menggunakan fitur multi-pilih Divi. Karena mungkin sulit untuk mengklik modul yang telah diposisikan dengan properti transformasi, ini adalah saat yang tepat untuk mengaktifkan mode grid di pengaturan builder Anda. Ini akan memungkinkan Anda untuk melihat modul uraian di posisi aslinya. Setelah Anda berada dalam mode grid, lanjutkan dan tahan ctrl atau cmd lalu klik pada masing-masing modul yang memiliki efek transformasi. Kemudian klik ikon roda gigi dari salah satu modul yang dipilih untuk membuka modal pengaturan elemen.

Di modal Pengaturan Elemen, perbarui yang berikut ini:

Transformasi Skala X-sumbu: 100%
Transformasi Skala sumbu Y: 100%

Transformasi Terjemahkan sumbu X: 0px
Transformasi Terjemahkan sumbu Y: 0px

Ini akan mengembalikan posisi asli dan skala uraian di layar tablet dan ponsel.

Hasil Akhir

Berikut adalah desain akhir.

Membuat Tata Letak Modul Blurb #2

Dalam contoh berikut ini, saya akan menunjukkan kepada Anda tata letak modul uraian yang unik menggunakan opsi skala, terjemahkan, dan putar transformasi Divi. Saya juga akan memberikan potongan CSS bonus yang menambahkan perspektif ke setiap uraian. Berikut cara melakukannya.

Buat Judulnya

Pertama, tambahkan bagian reguler baru dengan baris satu kolom. Kemudian tambahkan modul teks ke baris dengan konten berikut:

<h2>Our Process</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 sisa pengaturan modul teks sebagai berikut:

Judul 2 Font: Nunito
Judul 2 Berat Font: Semi Tebal
Judul 2 Ukuran Teks: 50px
Spasi Judul 2 Huruf: 7px
Lebar: 500 piksel

Membuat Tata Letak Blurb dengan Baris Enam Kolom

Itu mengurus judul. Sekarang saatnya menambahkan baris untuk tata letak modul uraian kita. Lanjutkan dan buat baris baru dengan tata letak enam kolom langsung di bawah baris saat ini.

Menata Modul Blurb

Di kolom pertama, tambahkan modul uraian baru dan perbarui pengaturan sebagai berikut:

Hapus teks isi di kotak konten dan perbarui teks judul dengan kata "Langkah".

Kemudian Klik untuk menggunakan ikon dan pilih ikon centang lingkaran.

Beri Blurb warna latar belakang putih sebagai berikut:

Warna Latar Belakang: #ffffff

Kemudian perbarui pengaturan desain:

Warna Ikon: #ffffff
Ikon Lingkaran: YA
Warna Lingkaran: #3d0dad
Judul Font: Nunito
Judul Font Berat: Tebal
Judul Font Gaya: TT
Perataan Teks Judul: Tengah
Spasi Huruf Judul: 4px

Kemudian, beri blurb bayangan kotak sebagai berikut:

Bayangan Kotak: Lihat Tangkapan Layar
Warna Bayangan: rgba (0,0,0,0.12)

Dan akhirnya, tambahkan efek transformasi putar ke modul uraian:

Transform Putar sumbu X: -3deg
Transform Putar sumbu Y: -10deg
Transform Putar sumbu Z: 31deg

Itu menangani modul uraian pertama kami.

Perbarui Pengaturan Baris

Sekarang sebelum kita mulai menduplikasi modul uraian kita, kita perlu memperbarui pengaturan baris sebagai berikut:

Lebar Talang: 2
Padding Kustom: 11vw atas, 0px bawah

Ini akan membantu menggunakan spasi uraian di tata letak.

Duplikasi dan Styling Sisa Blurb

Sekarang kita siap untuk menduplikasi dan menyesuaikan sisa uraian. Lanjutkan dan salin modul uraian di kolom 1 dan tempel ke semua kolom yang tersisa kecuali kolom terakhir (kolom 6). Kami akan membiarkan kolom 6 kosong untuk memberikan lebih banyak ruang bagi uraian untuk dipindahkan ke kanan.

Sekarang buka pengaturan modul uraian di kolom 2 dan perbarui yang berikut:

Warna Lingkaran: #62de9d

Transformasi Skala X-sumbu: 120%
Transformasi Skala Y-sumbu: 120%

Transformasi Terjemahkan sumbu Y: -10% (pastikan untuk mengetikkan nilai persentase di sini)

Selanjutnya, update modul blurb di kolom 3 sebagai berikut:

Warna Lingkaran: #5e89fb

Transformasi Skala X-sumbu: 140%
Transformasi Skala sumbu Y: 140%

Transformasi Terjemahkan sumbu Y: -20%
Transformasi Terjemahkan sumbu X: 10%

Perbarui modul uraian di kolom 4 sebagai berikut:

Warna Lingkaran: #2a3fc9

Transformasi Skala X-sumbu: 160%
Transformasi Skala sumbu Y: 160%

Transformasi Terjemahkan sumbu Y: -30%
Transformasi Terjemahkan sumbu X: 30%

Dan terakhir, update modul blurb di kolom 5 sebagai berikut:

Warna Lingkaran: #62de9d

Transformasi Skala X-sumbu: 180%
Transformasi Skala sumbu Y: 180%

Transformasi Terjemahkan sumbu Y: -40%
Transformasi Terjemahkan sumbu X: 55%

Seperti yang Anda lihat, masing-masing uraian akan bertambah ukurannya sebesar 20% dari kiri ke kanan. Dan nilai persentase terjemahan Transform memastikan uraian tetap berbaris dengan baik.

Karena desain meluap ke kolom terakhir (kolom 6), kami akan membiarkannya kosong. Tetapi Anda selalu dapat menambahkan uraian lain di kolom 6 jika Anda menambah ukuran baris.

Menambahkan Properti Perspektif ke Setiap Kolom

Di CSS, properti perspektif digunakan untuk memberikan elemen posisi 3D beberapa perspektif di Z-Space. Pada dasarnya ini menentukan seberapa jauh objek muncul dari pengguna saat mereka melihat layar. Properti perspektif harus diterapkan ke wadah induk yang memiliki posisi 3D yang dalam hal ini adalah modul uraian kami. Oleh karena itu, kita harus menambahkan perspektif ke setiap kolom menggunakan potongan kecil CSS sebagai berikut.

Tambahkan CSS berikut ke kotak CSS Elemen Utama Kolom untuk masing-masing dari 5 Kolom sebagai berikut:

Kolom 1 Elemen Utama:

perspective: 1000px

Kolom 2 Elemen Utama:

perspective: 1000px

Kolom 3 Elemen Utama:

perspective: 1000px

Kolom 4 Elemen Utama:

perspective: 1000px

Kolom 5 Elemen Utama:

perspective: 1000px

Dalam hal ini, perubahannya sangat halus tetapi menurut saya sepadan dengan upaya tambahan.

Berikut adalah desain tata letak modul blurb tanpa perspektif.

Dan ini dia dengan perspektif di tempatnya.

Jika Anda ingin membuat blurb tampak lebih dekat dengan pengguna, Anda dapat mengurangi nilai perspektif. Misalnya, seperti inilah tampilan uraian dengan "perspektif: 400px" yang ditambahkan ke setiap kolom.

Menambahkan Latar Belakang Pembagi ke Bagian

Untuk membuat uraian tampak berdiri di atas permukaan, kita dapat menambahkan latar belakang pembagi ke bagian tersebut. Buka pengaturan bagian dan perbarui yang berikut ini:

Gaya Pembagi Bawah: lihat tangkapan layar
Warna Pembagi Bawah: #dddddd
Tinggi Pembagi Bawah: 27vw
Pengulangan Horizontal Pembagi Bawah: 0.8x
Balik Pembagi Bawah: horizontal

Untuk menyesuaikan tata letak tampilan tablet dan ponsel, Anda perlu memilih beberapa modul uraian dan memperbarui opsi transformasi berikut dalam pengaturan Elemen untuk tampilan tablet:

Transformasi Skala X-sumbu: 100%
Transformasi Skala sumbu Y: 100%

Transformasi Terjemahkan sumbu Y: 0%
Transformasi Terjemahkan sumbu X: 0%

Hasil Akhir

Sekarang mari kita lihat hasil akhir dari layout modul blurb.

Pikiran Akhir

Dengan kontrol transformasi Divi, Anda memiliki kemampuan untuk menempatkan modul uraian Anda di area yang tepat dari halaman Anda dengan sangat mudah. Ini membuatnya menyenangkan untuk bereksperimen dan membuat tata letak modul uraian baru untuk menampilkan layanan, langkah-langkah proses, dan penggunaan lainnya yang tak terhitung jumlahnya. Saya harap tutorial ini memberi Anda sedikit inspirasi untuk menguji sendiri teknik desain ini.

Untuk inspirasi lebih lanjut, lihat 5 desain modul uraian kreatif ini.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!