6 Teknik Divi untuk Membuat Desain Web Datar dengan Divi

Desain web datar populer karena nilai intinya. Ini berfokus pada kegunaan dan memprioritaskan pengalaman pengguna terlebih dahulu. Itu, dalam kombinasi dengan desain yang apik dan modern, membuat situs web datar yang bagus. Setiap elemen desain pada situs web datar harus dipikirkan dengan baik sebelum ditambahkan ke halaman. Itu juga harus fokus pada menjadi sederhana namun cantik dan menarik pada saat yang sama. Jangan lupa, itu harus menarik perhatian pengunjung Anda dan membuat mereka penasaran untuk mencari tahu tentang perusahaan Anda.

Dalam posting ini, kami akan membagikan beberapa teknik membuat desain web datar dengan Divi. Ini adalah posting ketiga dalam seri posting di mana kami menangani 4 gaya situs web yang berbeda dan cara mencapainya menggunakan Divi:

1. Bersih & Abstrak
2. Minimal
3. Datar
4. Tebal & Berwarna-warni

Mari kita lakukan!

1. Jaga Bagian Pahlawan Bersih & Dapat Dimengerti

Seperti disebutkan dalam intro posting ini, kegunaan adalah aspek yang sangat penting dari gaya desain web datar. Ini memungkinkan Anda untuk langsung ke intinya dan berbagi informasi yang relevan dengan pengunjung tanpa membebani mereka. Pada saat yang sama, Anda menggunakan tata letak cantik yang sesuai dengan merek perusahaan Anda.

Ada banyak cara untuk membuat desain web datar tetapi hal yang saya perhatikan hampir di mana-mana adalah kesederhanaan bagian pahlawan. Dan desain yang sederhana pasti tidak berarti membosankan. Itu berarti Anda tidak perlu bertele-tele. Anda bisa langsung ke intinya tanpa harus melebih-lebihkan desain yang Anda buat untuk mencoba membuat pengunjung terkesan.

2. Tekankan Struktur Kotak

Hal lain yang khas tentang gaya desain web datar adalah penggunaan struktur kotak. Jika Anda tahu jalan di sekitar Divi, Anda tahu bahwa Anda dapat menemukan struktur kotak pada dasarnya di mana-mana di dalam pembangun. Mereka memberikan struktur tertentu ke situs web Anda dan memungkinkan Anda membangun kerangka kerja terlebih dahulu.

Dalam desain datar, struktur kotak biasanya ditekankan. Hal ini memungkinkan orang untuk menavigasi dengan mudah dan menemukan apa yang mereka cari hanya dalam hitungan waktu.

3. Pilih 3 Warna Cerah

Kami telah menyebutkan menggunakan struktur kotak dan bagian pahlawan sederhana sampai sekarang. Secara teori, itu terdengar membosankan, bukan? Untuk menyeimbangkan faktor kegunaan di situs web Anda, Anda dapat menghidupkannya dengan menggunakan palet warna cerah. Anda dapat menggunakan dua atau tiga warna cerah yang akan mempersonalisasi situs web Anda dan membuatnya sesuai dengan nilai-nilai perusahaan Anda.

4. Gunakan Kombinasi Warna Gradien yang Sangat Halus

Hal lain yang dapat membantu Anda memutus siklus adalah menggunakan kombinasi warna gradien yang sangat halus. Gunakan warna yang sama tetapi warna yang berbeda untuk kedua warna gradien. Salah satunya harus lebih cerah sementara yang lain memiliki perasaan yang lebih dalam. Mereka tidak akan langsung menyerang sebagai gradien bagi orang-orang tetapi itu akan membantu memberikan situs web Anda sedikit lebih dalam dan detail.

5. Gabungkan Satu Standar dengan Satu Keluarga Font Elegan

Biasanya, banyak situs web menggunakan keluarga font yang lebih elegan untuk judul dan standar untuk teks isi. Mengapa tidak mengubah segalanya? Ini pasti akan membuat perubahan. Plus, orang sering cenderung melewatkan deskripsi dan hanya membaca judul. Jika itu masalahnya, Anda ingin judul Anda semudah mungkin dibaca, bukan? Kombinasi hebat dari keluarga font menggunakan Arial untuk judul dan Georgia untuk teks isi. Georgia masih sangat mudah dibaca, hanya sedikit lebih menarik, dan memberikan kontras yang dibutuhkan untuk situs web Anda.

6. Bermain dengan Ketinggian

Tips terakhir adalah bermain-main dengan ketinggian elemen desain di halaman Anda. Anda akan terkejut betapa itu dapat berkontribusi pada keseluruhan tampilan dan nuansa situs web Anda. Anda masih mempertahankan struktur kotak yang direkomendasikan untuk desain datar, tetapi pada saat yang sama, Anda juga memberikan interaksi kepada pengunjung Anda.

Pratinjau

Kami telah melihat beberapa teknik di bagian posting sebelumnya, sekarang saatnya untuk mempraktikkan tipnya. Kami akan membuat hasil yang menakjubkan berikut langkah demi langkah:

Mari Mulai Membuat: Tambahkan Bagian Standar #1

Pengaturan Bagian

Latar Belakang Gradien

Mulailah dengan membuat halaman baru dan menambahkan bagian halaman itu. Tanpa menambahkan baris apa pun, buka pengaturan bagian. Kami menggunakan latar belakang gradien halus dengan pengaturan berikut:

• Warna 1: #5214ff
• Warna 2: #420fc1
• Tipe Gradien: Linier
• Arah Gradien: 146deg
• Posisi Awal: 30%

Jarak

Kami menambahkan beberapa padding atas dan bawah ke bagian kami juga:

• Padding Atas: 55px
• Padding Bawah: 130px

Tambahkan Baris #1

Pengaturan Baris

Struktur Kolom

Lanjutkan dengan menambahkan baris pertama Anda. Bagian ini akan, secara total, terdiri dari tiga baris yang berbeda. Untuk baris pertama, kami menggunakan struktur kolom berikut:

Perekat

Buka pengaturan baris segera dan aktifkan opsi 'Make This Row Fullwidth' di pengaturan Ukuran.

Tambahkan Modul Teks Judul

Pengaturan Teks H1

Kita hanya perlu menambahkan satu Modul Teks H1 ke baris ini. Setelah Anda menambahkan konten Anda (dan memastikan itu H1), buka pengaturan teks H1 Anda dan terapkan perubahan berikut:

• Font Judul: Arial
• Perataan Teks Judul: Kiri
• Warna Teks Judul: #FFFFFF
• Ukuran Teks Judul: 86px (Desktop), 65px (Tablet), 45px (Telepon)
• Tinggi Garis Pos: 1.2em

Tambahkan Baris #2

Pengaturan Baris

Struktur Kolom

Mari kita lanjutkan ke baris berikutnya. Kami, sekali lagi, menggunakan baris dengan satu kolom saja.

Perekat

Sebelum menambahkan modul apa pun, buka pengaturan baris Anda dan terapkan pengaturan Ukuran berikut:

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

Tambahkan Modul Pembagi

Warna

Lanjutkan dengan menambahkan Modul Pembagi ke kolom Anda. Kami menggunakan '#edf000' sebagai warna pembagi.

Perekat

Kami akan menyesuaikan pengaturan Ukuran Modul Pembagi kami berikutnya:

• Berat Pembagi: 10px
• Lebar: 64%
• Penyelarasan Modul: Kanan

Tambahkan Baris #3

Pengaturan Baris

Struktur Kolom

Last but not least, tambahkan satu baris dengan dua kolom.

Perekat

Buka pengaturan baris dan aktifkan opsi 'Make This Row Fullwidth' di pengaturan Ukuran.

Jarak

Hapus padding khusus baris dengan menambahkan '0px' ke padding atas dan bawah.

Tambahkan Modul Teks Deskripsi ke Kolom 2

Pengaturan Teks

Lanjutkan dengan menambahkan modul teks deskripsi ke kolom kedua menggunakan pengaturan teks berikut:

• Font Teks: Georgia
• Warna Teks: #FFFFFF
• Ukuran Teks: 27px (Desktop), 22px (Tablet), 18px (Telepon)
• Tinggi Baris Teks: 1.9em
• Perataan Teks: Kanan

Tambahkan Modul Tombol ke Kolom 2

Penjajaran Tombol

Sejajarkan baris Anda ke kanan dalam pengaturan Alignment Modul Teks Anda juga.

Pengaturan Tombol

Modul berikutnya dan terakhir yang perlu kita tambahkan ke bagian pahlawan kita adalah Modul Tombol. Setelah Anda menambahkan salinan, terapkan pengaturan tombol berikut ke dalamnya:

• Gunakan Gaya Kustom untuk Tombol: Ya
• Ukuran Teks Tombol: 27px
• Warna Teks Tombol: #303030
• Warna Latar Tombol: #edf000
• Lebar Batas Tombol: 0px
• Radius Perbatasan Tombol: 0px
• Font Tombol: Georgia

Tambahkan Bagian Standar #2

Pengaturan Bagian

Jarak

Kita bisa melanjutkan ke bagian kedua! Buka pengaturan bagian dan gunakan padding berikut:

• Padding Atas: 155px
• Padding Bawah: 200px

Tambahkan Baris #1

Pengaturan Baris

Struktur Kolom

Baris pertama yang akan kita tambahkan akan berisi lingkaran merah kita. Pilih struktur kolom berikut untuk baris Anda:

Kolom 1 Latar Belakang Gradien

Alih-alih mengunggah Modul Gambar, kita akan menggunakan latar belakang gradien radial kolom 1. Kami menggunakan warna merah dalam palet warna kami dalam kombinasi dengan warna yang sepenuhnya transparan.

• Warna 1: #ff3233
• Warna 2: rgba (255,255,255,0)
• Kolom 1 Jenis Gradien: Radial
• Kolom 1 Posisi Awal: 45%
• Posisi Akhir Kolom 1: 45%

Perekat

Lanjutkan dengan mengubah pengaturan Ukuran Anda:

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

Tambahkan Modul Pembagi

Sembunyikan Pembagi

Untuk memastikan latar belakang kolom kami muncul, kami akan menambahkan Modul Pembagi ke kolom pertama. Namun, kami tidak ingin pembagi muncul. Itu sebabnya kami akan menonaktifkan opsi 'Tampilkan Pembagi'.

Jarak

Dan untuk membuat latar belakang gradien kolom terlihat, kami akan menambahkan margin berikut ke Modul Pembagi:

• Atas: 150px (Desktop), 200px (Tablet & Ponsel)
• Bawah: 150px (Desktop), 200px (Tablet & Ponsel)

Kembali ke Pengaturan Baris

Tambahkan Spasi

Kami akan membuat lingkaran merah ini tumpang tindih dengan kedua bagian di halaman kami. Untuk melakukannya, kami akan membuka kembali pengaturan baris dan menambahkan beberapa margin negatif:

• Margin Atas: -350px (Desktop), -400px (Tablet & Ponsel)
• Margin Kiri: -250px (Desktop & Ponsel), -400px (Tablet)

Tambahkan Baris #2

Pengaturan Baris

Struktur Kolom

Mari kita beralih ke baris kedua. Baris ini akan berisi judul Modul Teks dan pembagi. Pilih struktur kolom berikut:

Jarak

Kurangi ruang yang dibuat baris ini dengan menggunakan '0px' untuk padding atas.

Tambahkan Modul Teks Judul

Pengaturan Teks H2

Sekarang kita dapat menambahkan modul kita. Mulailah dengan menambahkan Modul Teks H2 baru dengan pengaturan teks berikut:

• Judul 2 Font: Arial
• Judul 2 Perataan Teks: Tengah
• Warna Teks Judul: #303030
• Judul 2 Ukuran Teks: 50px (Desktop), 45px (Tablet), 32px (Ponsel)
• Pos 2 Tinggi Baris: 1.3em

Tambahkan Modul Pembagi

Warna

Tepat di bawah Modul Teks, tambahkan Modul Pembagi. Kali ini, kami ingin pembagi ditampilkan. Beri kode warna '#5214ff'.

Perekat

Ubah pengaturan Ukuran Modul Pembagi Anda selanjutnya:

• Berat Pembagi: 10px
• Lebar: 30%
• Penyelarasan Modul: Pusat

Tambahkan Baris #3

Pengaturan Baris

Struktur Kolom

Saatnya untuk membuat baris terakhir kita menggunakan empat kolom.

Salin Bagian Latar Belakang Gradien

Kami akan menggunakan latar belakang gradien yang sama seperti yang kami lakukan untuk bagian pahlawan. Jadi, untuk menghemat waktu, kami hanya akan menyalin pengaturan tersebut.

Tempel Latar Belakang Gradien di Kolom 1 & 3

Dan tempel di kolom satu dan tiga.

Perekat

Buka pengaturan Ukuran berikutnya dan buat baris Anda memenuhi seluruh lebar layar.

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

Jarak

Kami juga akan mengubah pengaturan Spasi:

• Margin Atas: 100px
• Padding Atas & Bawah: 0px

Tambahkan Modul Blurb

Pilih Ikon

Sekarang setelah kita selesai dengan pengaturan baris, kita dapat mulai menambahkan modul kita! Kita membutuhkan empat Modul Blurb, satu untuk setiap kolom. Alih-alih membuatnya secara terpisah, kita akan membuat satu dan menggandakannya setelahnya. Setelah Anda menambahkan konten uraian Anda, lanjutkan dan pilih ikon pilihan Anda.

Pengaturan Ikon

Buka pengaturan ikon Anda berikutnya dan gunakan warna ikon '#edf000'.

Pengaturan Teks

Lanjutkan dengan menggunakan pengaturan teks berikut:

• Orientasi Teks: Tengah
• Warna Teks: Cahaya

Pengaturan Teks Judul

Buka pengaturan teks judul berikutnya dan buat beberapa perubahan:

• Judul Font: Arial
• Ukuran Teks Judul: 31px
• Tinggi Baris Judul: 2.6em

Pengaturan Teks Tubuh

Demikian juga, kita akan membuat teks isi sesuai dengan tata letak yang kita buat:

• Font Tubuh: Georgia
• Ukuran Teks Tubuh: 18px
• Tinggi Garis Tubuh: 2.2em

Jarak

Dan terakhir, untuk memberi Modul Blurb Anda ruang untuk bernafas, tambahkan bantalan khusus berikut:

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

Kloning & Ubah Modul Blurb

Clone Blurb Module & Tempatkan di Kolom 2

Kloning Modul Blurb yang baru saja Anda buat dan tempatkan duplikatnya di kolom kedua.

Ubah Ikon

Hal pertama yang perlu Anda ubah adalah ikonnya.

Ubah Warna Ikon

Ubah warna ikon menjadi '#ff3233' juga.

Ubah Warna Teks

Karena kita berurusan dengan warna latar belakang putih, Anda harus mengubah warna teks menjadi 'Gelap' dalam pengaturan teks.

Jarak

Kami bermain-main dengan ketinggian Modul Blurb untuk membuat semuanya lebih menonjol. Untuk melakukannya, buka pengaturan spasi dan gunakan nilai margin atas berikut:

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

Bayangan Kotak

Untuk melengkapinya, kami juga akan menambahkan bayangan yang sangat halus:

• Kekuatan Buram Bayangan Kotak: 80px
• Kekuatan Penyebaran Bayangan Kotak: -10px
• Warna Bayangan: rgba (0,0,0,0.11)

Klon Kedua Modul Blurb & Tempatkan di Kolom Tersisa

Modul Klon

Kami sekarang memiliki dua Modul Blurb kami yang akan kami gunakan kembali untuk kolom yang tersisa. Kloning masing-masing dari mereka sekali.

Tempatkan di Kolom 3 & 4

Tempatkan Modul Blurb duplikat di kolom yang sesuai dan selesai!

Pratinjau

Sekarang kita telah melalui semua langkah, mari kita lihat hasil akhir pada ukuran layar yang berbeda.

Pikiran Akhir

Dalam posting ini, kami telah membagikan beberapa tips dan teknik membuat desain web datar dengan Divi. Desain web datar sangat populer saat ini karena memungkinkan pengunjung untuk dengan mudah menavigasi halaman dan memproses informasi lebih cepat. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan komentar di bagian komentar di bawah!