5 Contoh Tata Letak Bagian Gaya Editorial yang Dibuat dengan Divi

Opsi Divi baru menawarkan banyak kemungkinan. Modul, baris, dan kolom, lebih dari sebelumnya, saling memberdayakan di jalan menuju desain web yang menakjubkan dan ramah pengguna. Salah satu hal yang dapat dilakukan adalah membuat bagian gaya editorial yang luar biasa. Dan itulah yang akan kami tunjukkan kepada Anda di pos ini; 5 tata letak bagian gaya editorial berbeda yang dapat Anda gunakan dalam situs web yang berbeda. Bagian terbaik? Postingan dibuat dengan menggunakan pengaturan yang tepat untuk setiap modul, baris dan kolom saja.

Mari kita lihat lima contoh yang akan kami tunjukkan cara membuatnya.

Contoh Pertama

Desktop

Seluler

Contoh Kedua

Desktop

Seluler

Contoh Ketiga

Desktop

Seluler

Contoh Keempat

Desktop

Seluler

Contoh Kelima

Desktop

Seluler

5 Contoh Tata Letak Bagian Gaya Editorial yang Dibuat dengan Divi

Berlangganan Saluran Youtube Kami

Mulai Membuat Contoh Pertama

Mari kita mulai dengan membuat tata letak gaya editor pertama kita.

Tambahkan Bagian Baru

Tambahkan halaman baru, aktifkan Divi Builder dan alihkan ke Visual Builder. Setelah Anda berada di Visual Builder, tambahkan bagian standar.

Tambahkan Baris Tiga Kolom

Dalam bagian standar itu, kita akan membutuhkan baris tiga kolom.

Latar Belakang Gradien

Buka pengaturan baris dan tambahkan latar belakang gradien berikut ke dalamnya:

• Warna Pertama: #636363
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Radial
• Arah Radial: Pusat
• Posisi Awal: 0%
• Posisi Akhir: 47%

Warna Latar Kolom 2

Kita juga perlu mengatur '#d8d8d8' sebagai Warna Latar Kolom 2.

Perekat

Pindah ke tab Desain dan gunakan pengaturan berikut untuk subkategori Ukuran:

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

Jarak

Buka subkategori Spacing dan tambahkan '50px' ke padding atas, kanan, bawah dan kiri kolom kedua.

Modul Gambar Kolom Pertama

Latar Belakang Gradien

Tambahkan gambar ke kolom pertama baris dan gunakan latar belakang gradien berikut untuk itu:

• Warna Pertama: rgba (255,255,255,0)
• Warna Kedua: #086191
• Tipe Gradien: Linier
• Arah Gradien: 107deg
• Posisi Awal: 60%
• Posisi Akhir: 60%

Penyelarasan

Buka tab Desain, gunakan Perataan Gambar kiri dan aktifkan opsi 'Selalu Pusatkan Gambar di Seluler'.

Jarak

Kemudian, buka subkategori Spasi dan gunakan pengaturan margin dan padding berikut:

• Margin Atas: 100px (Desktop), 0px (Tablet & Ponsel)
• Padding Atas: 20px
• Padding Bawah: 20px

Modul Teks Kolom Kedua

Pengaturan Teks

Selanjutnya, tambahkan Modul Teks ke kolom kedua dari baris. Buka tab Desain dan gunakan pengaturan berikut untuk subkategori Teks:

• Ukuran Font Teks: 12px
• Warna Teks: #000000
• Orientasi Teks: Tengah

Perekat

Buka subkategori Sizing, gunakan Width '84%' dan pilih bagian tengah Module Alignment.

Jarak

Terakhir, tambahkan '50px' ke margin atas dan bawah.

Modul Gambar Kolom Ketiga

Latar Belakang Gradien

Tambahkan Modul Gambar lain ke kolom ketiga dan gunakan latar belakang gradien berikut:

• Warna Pertama: #a36100
• Warna Kedua: rgba (255,255,255,0)
• Tipe Gradien: Linier
• Arah Gradien: 73 derajat
• Posisi Awal: 40%
• Posisi Akhir: 40%

Penyelarasan

Buka tab Desain, pilih Perataan Gambar kiri dan aktifkan opsi 'Selalu Pusatkan Gambar di Seluler'.

Jarak

Terakhir, tambahkan margin dan padding khusus berikut:

• Margin Atas: 300px (Desktop), 0px (Tablet & Ponsel)
• Padding Atas: 20px
• Padding Bawah: 20px

Hasil

Mari kita lihat lagi hasilnya di desktop:

Dan di ponsel:

Mulai Membuat Contoh Kedua

Contoh kedua terlihat seperti ini di desktop:

Tambahkan Bagian Baru

Pertama, tambahkan bagian standar baru.

Tambahkan Baris Dua Kolom

Kemudian, tambahkan baris dua kolom ke dalamnya.

Warna Latar Kolom 2

Buka pengaturan baris dan tambahkan '#ededed' sebagai Warna Latar Kolom 2.

Perekat

Buka tab Desain dan buat perubahan berikut berlaku untuk subkategori Ukuran:

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

Modul Gambar Kolom Pertama

Penyelarasan

Tambahkan Modul Gambar ke kolom pertama, gunakan Perataan Gambar kiri dan aktifkan opsi 'Selalu Pusatkan Gambar di Seluler'.

Jarak

Buka subkategori Spasi dan gunakan pengaturan berikut:

• Margin Atas: 100px (Desktop), 0px (Tablet & Ponsel)
• Padding Atas: 0px
• Padding Bawah: 0px

Modul Teks Kolom Kedua

Pengaturan Teks

Kemudian, tambahkan Modul Teks ke kolom kedua dan terapkan pengaturan berikut ke subkategori Teks:

• Font Teks: Lato
• Ukuran Font Teks: 12px
• Warna Teks: #000000
• Tinggi Baris Teks: 2.2em
• Orientasi Teks: Tengah

Perekat

Buka subkategori Ukuran dan terapkan Lebar '75%'.

Jarak

Terakhir, pastikan pengaturan berikut berlaku untuk subkategori Spasi:

• Margin Atas: 120px (Desktop), -80 (Tablet & Ponsel)
• Margin Kiri: -240px (Desktop), 80 (Tablet), 45 (Ponsel)
• Padding Atas, Kanan, Bawah & Kiri: 50px (Desktop & Tablet), 20px (Telepon)

Hasil

Setelah selesai, Anda akan melihat desain berikut di desktop:

Dan di ponsel:

Mulai Membuat Contoh Ketiga

Selanjutnya, kita memiliki contoh berikut yang terlihat seperti ini:

Tambahkan Bagian Baru

Sekali lagi, tambahkan bagian standar baru.

Tambahkan Baris Dua Kolom

Struktur kolom yang kita perlukan untuk baris ini adalah sebagai berikut:

Warna Latar Kolom 1

Buka pengaturan baris dan gunakan '#e8e8e8' sebagai Warna Latar Kolom 1.

Kolom 2 Latar Belakang Gradien

Gradient Background yang dibutuhkan untuk kolom kedua adalah sebagai berikut:

• Warna Pertama: #e8e8e8
• Warna Kedua: rgba (255,255,255,0)
• Kolom 2 Jenis Gradien: Linear
• Kolom 2 Arah Gradien: 147deg
• Kolom 2 Posisi Awal: 25%
• Kolom 2 Posisi Akhir: 9%

Perekat

Buka subkategori Ukuran dan gunakan pengaturan berikut:

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

Jarak

Terakhir, tambahkan '70px' ke padding atas dan bawah kolom pertama.

Modul Gambar Kolom Pertama

Penyelarasan

Tambahkan Modul Gambar ke kolom pertama, gunakan Perataan Gambar kiri dan aktifkan opsi 'Selalu Pusatkan Gambar di Seluler'.

Jarak

Buka subkategori Spasi dan tambahkan '-300px' ke margin kiri.

Modul Teks Kolom Kedua

Warna latar belakang

Tambahkan Modul Teks ke kolom kedua dan gunakan '#3d3d3d' sebagai warna latar belakang.

Pengaturan Teks

Buka tab Desain dan gunakan pengaturan berikut untuk subkategori Teks:

• Font Teks: Lato
• Ukuran Font Teks: 12px
• Warna Teks: #FFFFFF
• Tinggi Baris Teks: 2.2em
• Orientasi Teks: Tengah

Perekat

Buka subkategori Ukuran dan gunakan '75%' untuk Lebar.

Jarak

Terakhir, gunakan pengaturan berikut untuk subkategori Spasi:

• Margin Atas: 130px (Desktop), -200 (Tablet & Ponsel)
• Margin Kiri: -180px (Desktop), 80 (Tablet), 50 (Ponsel)
• Padding Atas, Kanan, Bawah & Kiri: 50px (Desktop & Tablet), 20px (Telepon)

Hasil

Setelah selesai, hasilnya di desktop akan terlihat seperti ini:

Dan seperti ini di ponsel:

Mulai Membuat Contoh Keempat

Contoh keempat yang akan kita buat terlihat seperti ini:

Tambahkan Bagian Baru

Mulailah dengan menambahkan bagian standar ke halaman yang sedang Anda kerjakan.

Tambahkan Baris Dua Kolom

Kemudian, tambahkan baris dua kolom ke dalamnya.

Perekat

Buka subkategori Ukuran dan buat perubahan berikut:

• Gunakan Lebar Kustom: Ya
• Lebar Kustom: 60%
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Modul Gambar Pertama Kolom Pertama

Penyelarasan

Tambahkan Modul Gambar ke kolom pertama, gunakan Perataan Gambar kanan dan aktifkan opsi 'Selalu Pusatkan Gambar di Seluler'.

Perekat

Pergi ke subkategori Ukuran Modul Gambar itu, gunakan Lebar '89%' dan pilih Penyelarasan Modul yang tepat.

Visibilitas

Buka tab Lanjutan dan nonaktifkan Modul Gambar di ponsel dan tablet. Kami akan melakukan ini untuk 3 Modul Gambar yang sedang digunakan. Anda dapat memutuskan sendiri mana yang ingin Anda tampilkan di tablet dan ponsel, dalam kasus kami, itu akan menjadi gambar di sudut kanan atas.

Modul Gambar Kedua Kolom Pertama

Penyelarasan

Tambahkan Modul Gambar lain, gunakan Perataan Gambar yang tepat dan aktifkan opsi 'Selalu Pusatkan Gambar di Seluler'.

Berbatasan

Gulir ke bawah dan manfaatkan perbatasan berikut:

• Gunakan Perbatasan: Ya
• Warna Perbatasan: #FFFFFF
• Lebar Perbatasan: 5px
• Gaya Perbatasan: Padat

Visibilitas

Terakhir, buka tab Advanced dan nonaktifkan Image Module di ponsel dan tablet.

Modul Gambar Pertama Kolom Kedua

Penyelarasan

Tambahkan Modul Gambar berikutnya ke kolom kedua, gunakan Perataan Gambar kiri dan aktifkan opsi 'Selalu Pusatkan Gambar di Seluler'.

Berbatasan

Gulir ke bawah, buka subkategori Perbatasan dan buat pengaturan berikut berlaku:

• Gunakan Perbatasan: Ya
• Warna Perbatasan: #FFFFFF
• Lebar Perbatasan: 4px
• Gaya Perbatasan: Padat

Modul Gambar Kedua Kolom Kedua

Penyelarasan

Tambahkan Modul Gambar terakhir ke kolom kedua, gunakan Perataan Gambar kiri dan aktifkan opsi 'Selalu Pusatkan Gambar di Seluler'.

Perekat

Kemudian, buka subkategori ukuran, gunakan Lebar '89%' dan pilih Penyelarasan Modul kiri.

Visibilitas

Nonaktifkan Modul Gambar ini di ponsel dan tablet juga.

Tambahkan Baris Satu Kolom

Setelah Anda menyelesaikan baris sebelumnya, lanjutkan dan tambahkan yang lain. Kali ini, baris hanya membutuhkan satu kolom.

Perekat

Buka tab Desain pada pengaturan baris, aktifkan opsi 'Gunakan Lebar Kustom' dan gunakan '581px' sebagai Lebar Kustom.

Modul Teks

Warna latar belakang

Tambahkan Modul Teks ke baris baru itu dan pilih 'rgba(255.255.255.0.92)' sebagai warna latar belakang.

Pengaturan Teks

Pindah ke tab Desain dan buat pengaturan berikut berlaku untuk subkategori Teks:

• Font Teks: Lato
• Ukuran Font Teks: 12px
• Warna Teks: #000000
• Tinggi Baris Teks: 2.2em
• Orientasi Teks: Tengah

Perekat

Kemudian, buka subkategori Sizing, tambahkan '75%' ke Width dan pilih bagian tengah Module Alignment.

Jarak

Terakhir, buat pengaturan berikut berlaku untuk subkategori Spasi:

• Margin Atas: -580px (Desktop), -200 (Tablet & Ponsel)
• Margin Kiri: – 180px (Desktop), 80 (Tablet), 50 (Ponsel)
• Padding Atas, Kanan, Bawah & Kiri: 50px

Hasil

Setelah selesai, Anda akan dapat menyaksikan hasil berikut di desktop:

Dan berikut ini di ponsel:

Mulai Membuat Contoh Kelima

Contoh terakhir yang akan kami tunjukkan kepada Anda cara membuat ulang adalah sebagai berikut:

Tambahkan Bagian Lebar Penuh

Mulailah dengan menambahkan bagian lebar penuh ke halaman Anda.

Modul Gambar Lebar Penuh

Di dalam bagian Fullwidth itu, tambahkan Modul Gambar Fullwidth.

Tambahkan Bagian Baru

Tepat di bawah bagian sebelumnya, tambahkan bagian lain. Kali ini, bagiannya harus standar, bukan lebar penuh.

Tambahkan Baris Tiga Kolom

Tambahkan baris tiga kolom ke bagian standar baru itu.

Warna Latar Kolom 1, 2 & 3

Buka pengaturan baris dan tetapkan warna latar belakang berikut ke kolom:

• Kolom 1: #eaeaea
• Kolom 2: rgba(12.113.195.0.17)
• Kolom 3: rgba(131,0,233,0.09)

Perekat

Buka tab Desain dan buat perubahan berikut pada subkategori Ukuran:

• Jadikan Baris Ini Lebar Penuh: Ya
• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 1

Jarak

Kemudian buka subkategori Spacing, tambahkan '-60px' ke margin atas dan '50px' ke padding bawah setiap kolom.

Modul Teks Kolom Pertama

Warna latar belakang

Lanjutkan dengan menambahkan Modul Teks ke Kolom Pertama dan menggunakan 'rgba(255.255.255.0.89)' sebagai warna latar belakangnya.

Pengaturan Teks

Buka tab Desain dan buat pengaturan berikut berlaku untuk subkategori Teks:

• Font Teks: Lato
• Ukuran Font Teks: 12px
• Warna Teks: #000000
• Tinggi Baris Teks: 2.2em
• Orientasi Teks: Tengah

Berbatasan

Buka subkategori Perbatasan dan gunakan pengaturan berikut:

• Gunakan Perbatasan: Ya
• Warna Perbatasan: #FFFFFF
• Lebar Perbatasan: 17px
• Gaya Perbatasan: Padat

Perekat

Kemudian, gunakan Lebar '75%' dan pilih Penyelarasan Modul tengah dalam subkategori Ukuran.

Jarak

Terakhir, buka subkategori Spasi dan buat pengaturan berikut berlaku:

• Margin Atas: -300px (Desktop), 0px (Tablet & Ponsel)
• Padding Atas, Kanan, Bawah, Kiri: 50px (Desktop & Tablet), 20px (Telepon)

Modul Teks Klon Dua Kali & Tempatkan di Dua Kolom Lainnya

Silakan dan klon Modul Teks dua kali. Kemudian, tempatkan masing-masing klon di dua kolom yang tersisa.

Ubah Spasi Modul Teks Kolom Kedua

Kita harus mengubah Margin Atas Modul Teks yang ditempatkan di kolom kedua menjadi '-220px'.

Ubah Spasi Modul Teks Kolom Ketiga

Jumlah yang sama untuk Modul Teks di kolom ketiga tetapi nilainya malah '-140px'.

Hasil

Dan di sini Anda memiliki hasilnya di desktop:

Dan di ponsel:

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda beberapa tata letak bagian gaya editorial yang indah dan menyenangkan yang dapat Anda gunakan di seluruh situs web Anda sendiri. Contoh-contoh ini menunjukkan betapa fleksibelnya pilihan Divi dan seberapa kreatif Anda bisa mendapatkannya. Jika Anda memiliki pertanyaan atau saran; pastikan Anda 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 Julia Tim / shutterstock.com