Menggunakan Garis Kolom untuk Menekankan Kisi Desain Divi Anda

Struktur elemen bawaan Divi dapat digunakan dengan cara tradisional untuk menentukan dan menata berbagai bagian, baris, kolom, dan modul. Namun, mereka juga dapat digunakan secara kreatif untuk menyempurnakan struktur desain di halaman Anda. Dalam tutorial ini, kami akan menunjukkan cara menggunakan kerangka kolom untuk menekankan kisi desain Divi Anda. Kami akan mendedikasikan baris dengan posisi absolut untuk membuat garis luar kolom latar belakang yang indah dan menggabungkannya dengan baris lain di bagian kami. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

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

Desktop

Seluler

Unduh Tata Letak Garis Besar Kolom GRATIS

Untuk mendapatkan tata letak garis besar kolom gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah. 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!

Mari Mulai Berkreasi!

Tambahkan Bagian Baru

Meluap

Mulailah dengan menambahkan bagian baru ke halaman yang sedang Anda kerjakan. Buka pengaturan bagian dan atur luapan ke tersembunyi. Ini akan membantu memastikan bahwa tidak ada yang melebihi wadah bagian, khususnya garis besar kolom yang akan kita tambahkan nanti di tutorial.

• Luapan Horisontal: Tersembunyi
• Overflow Vertikal: Tersembunyi

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul apa pun, buka pengaturan baris dan ubah pengaturan ukuran sebagai berikut:

• Lebar: 100%
• Lebar Maks: 100%
• Penjajaran Baris: Kanan

Jarak

Selanjutnya, kami akan mendorong baris ke sisi kanan halaman di desktop menggunakan beberapa pengaturan ukuran khusus.

• Margin Atas: 200px
• Padding Kiri: 47% (Desktop), 6% (Tablet), 10% (Ponsel)
• Padding Kanan: 6% (Tablet), 10% (Ponsel)

Berbatasan

Kami akan menyelesaikan pengaturan baris umum dengan menambahkan batas atas dan bawah.

• Lebar Batas Atas & Bawah: 4px
• Warna Batas Atas & Bawah: #bdffed

Pengaturan Kolom 1

Jarak

Setelah Anda menyelesaikan pengaturan baris umum, buka pengaturan kolom pertama dan tambahkan beberapa nilai spasi khusus.

• Padding Atas: 12%
• Padding Bawah: 12%
• Padding Kiri: 3%
• Padding Kanan: 3%

Pengaturan Kolom 2

Jarak

Buka pengaturan kolom kedua berikutnya dan gunakan pengaturan spasi berikut untuk itu:

• Padding Atas: 12%
• Padding Bawah: 12%
• Padding Kiri: 5% (Desktop), 20% (Tablet), 15% (Ponsel)
• Padding Kanan: 5% (Desktop), 20% (Tablet), 15% (Ponsel)

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H2

Saatnya menambah modul, dimulai dengan Modul Teks yang berisi Konten H2 di kolom 1.

Pengaturan Teks H2

Pindah ke tab desain modul dan ubah pengaturan teks H2 yang sesuai:

• Judul 2 Font: Kode Sumber Pro
• Judul 2 Berat Font: Tebal
• Judul 2 Warna Teks: rgba(35,38,211.0.46)
• Judul 2 Ukuran Teks: 4vw (Desktop), 60px (Tablet), 50px (Telepon)
• Spasi Judul 2 Huruf: 5px

• Heading 2 Text Shadow Panjang Horizontal: 0,05em
• Judul 2 Teks Bayangan Panjang Vertikal: 0,07em
• Judul 2 Warna Bayangan Teks: #bdffed

Gerak Vertikal

Kami akan menambahkan beberapa gerakan vertikal juga.

• Aktifkan Gerakan Vertikal: Ya
• Mulai Offset: 2
• Offset Tengah: 0
• Offset Akhir: -2
• Pemicu Efek Gerak: Elemen Tengah

Tambahkan Modul Teks #2 ke Kolom 2

Tambah isi

Tambahkan Modul Teks lain tepat di bawah yang sebelumnya dan masukkan beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Kode Sumber Pro
• Warna Teks: rgba (35,38,211,0,76)
• Ukuran Teks: 15px
• Tinggi Baris Teks: 2em

Gerak Vertikal

Kami akan menggunakan beberapa gerakan vertikal untuk modul ini juga.

• Aktifkan Gerakan Vertikal: Ya
• Mulai Offset: 2
• Offset Tengah: 0
• Offset Akhir: -2
• Pemicu Efek Gerak: Elemen Tengah

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul terakhir yang kita butuhkan di kolom 1 adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Pindah ke tab desain modul dan gaya tombol sebagai berikut:

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Warna Teks Tombol: #2326d3
• Radius Perbatasan Tombol: 0px

• Font Tombol: Kode Sumber Pro
• Tampilkan Ikon Tombol: Ya
• Penempatan Ikon Tombol: Kiri
• Hanya Tampilkan Ikon Saat Arahkan ke Tombol: Tidak

Jarak

Kemudian, tambahkan beberapa nilai padding khusus.

• Padding Atas: 20px
• Padding Bawah: 20px
• Padding Kiri: 50px
• Padding Kanan: 50px

Gerak Vertikal

Dan selesaikan pengaturan modul dengan menambahkan beberapa gerakan vertikal.

• Aktifkan Gerakan Vertikal: Ya
• Mulai Offset: 2
• Offset Tengah: 0
• Offset Akhir: -2
• Pemicu Efek Gerak: Elemen Tengah

Tambahkan Modul Gambar ke Kolom 2

Unggah Gambar Rasio 1:1

Di kolom 2, satu-satunya modul yang kita butuhkan adalah Modul Gambar. Unggah gambar dengan rasio 1:1.

Perekat

Pindah ke tab desain modul dan paksakan lebar penuh pada gambar.

• Paksa Lebar Penuh: Ya

Berbatasan

Kami akan mengubah gambar menjadi lingkaran dengan menambahkan beberapa sudut membulat berikutnya.

• Semua Sudut: 50vw

Bayangan Kotak

Kemudian, kita akan menambahkan bayangan kotak.

• Posisi Horizontal Bayangan Kotak: 30px
• Posisi Vertikal Bayangan Kotak: 30px
• Warna Bayangan: rgba (38,255,197,0.3)

Gerak Vertikal

Dan kita akan menyelesaikan pengaturan modul dengan menambahkan beberapa gerakan vertikal.

• Aktifkan Gerakan Vertikal: Ya
• Mulai Offset: -2
• Offset Tengah: 0
• Offset Akhir: 2
• Pemicu Efek Gerak: Elemen Tengah

Klon Seluruh Baris Dua Kali

Setelah Anda menyelesaikan baris pertama, Anda dapat mengkloningnya dua kali.

Ubah Semua Konten & Gambar

Pastikan Anda mengubah semua konten dan gambar duplikat.

Tambahkan Margin Bawah ke Baris Terakhir

Dan buka pengaturan baris terakhir, buka pengaturan spasi dan tambahkan beberapa margin bawah.

• Margin Bawah: 200px

Dedikasikan Baris Baru (di Atas Bagian) untuk Garis Besar Kolom

Struktur Kolom

Sekarang kita memiliki baris umum di tempat, saatnya untuk menambahkan garis kolom. Untuk melakukannya, kami akan menambahkan baris baru ke bagian atas bagian kami menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris, buka tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1
• Samakan Tinggi Kolom: Ya
• Lebar: 90%
• Lebar Maks: 100%

Jarak

Kami juga menghapus semua padding atas dan bawah default.

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

Posisi

Kemudian, lanjutkan ke tab lanjutan dan posisikan ulang seluruh baris. Dengan menyetel posisi ke absolut, kami akan menghapus ruang penampung yang digunakan oleh baris di dalam halaman.

• Posisi: Absolut
• Lokasi: Pusat Atas

Semua Lebar Elemen Utama Kolom CSS

Setelah pengaturan baris umum diterapkan, saatnya untuk mulai menata kolom. Pertama, tambahkan beberapa lebar khusus ke setiap kolom menggunakan satu baris Kode CSS di dalam elemen utama baris. Ini akan membantu kita menjaga struktur kolom pada ukuran layar yang lebih kecil.

width: 20% !important;

Pengaturan Kolom 1

Jarak

Kemudian, buka pengaturan kolom 1 dan ubah nilai padding di berbagai ukuran layar.

• Padding Atas: 150vh (Desktop), 250vh (Tablet & Ponsel)
• Padding Bawah: 150vh (Desktop), 250vh (Tablet & Ponsel)

Berbatasan

Tambahkan batas kiri juga.

• Lebar Batas Kiri: 5px
• Warna Batas Kiri: #bdffed
• Gaya Batas Kiri: Putus-putus

Pengaturan Kolom 2

Warna latar belakang

Selanjutnya, kita akan membuka pengaturan kolom 2 dan menambahkan warna latar belakang.

• Warna Latar Belakang: #b5fff1

Berbatasan

Kami akan menggunakan batas kanan juga.

• Lebar Batas Kanan: 4px
• Warna Tepi Kanan: #bdffed
• Gaya Perbatasan Kanan: Padat

Pengaturan Kolom 3

Berbatasan

Di kolom ketiga, kami akan menggunakan batas kanan dengan pengaturan berikut:

• Lebar Batas Kanan: 4px
• Warna Batas Kanan: rgba (35,38,211,0,12)
• Gaya Perbatasan Kanan: Putus-putus

Pengaturan Kolom 4

Berbatasan

Kemudian, kami akan membuka pengaturan kolom 4 dan mengubah pengaturan perbatasan yang sesuai:

• Lebar Batas Kanan: 4px
• Warna Tepi Kanan: #bdffed
• Gaya Perbatasan Kanan: Padat

Kolom 5 Pengaturan

Berbatasan

Kami akan menyelesaikan pengaturan kolom dengan menambahkan batas kanan ke kolom 5 juga.

• Lebar Batas Kanan: 4px
• Warna Batas Kanan: rgba (35,38,211,0,12)
• Gaya Perbatasan Kanan: Putus-putus

Tambahkan Modul Pembagi ke Kolom 1 & 2

Visibilitas

Di pratinjau seluler di awal posting ini, Anda dapat melihat hasil yang sedikit berbeda dari pada desktop. Kami hanya mengizinkan kerangka kolom 1 dan 2 kolom muncul dengan menambahkan Modul Pembagi ke kolom tertentu tersebut. Pastikan Anda menyembunyikan kedua pembagi di pengaturan visibilitas dan selesai!

• Tampilkan Pembagi: Tidak

Pratinjau

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

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara berkreasi dengan kolom bawaan Divi. Lebih khusus lagi, kami telah menunjukkan kepada Anda cara menggunakan kerangka kolom untuk menekankan kisi desain Divi Anda. Pendekatan ini membantu membuat desain yang unik tanpa memerlukan perangkat lunak pengedit gambar tambahan. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.