8 Teknik Membuat Website Minimal dengan Divi

Situs web minimal telah berkembang menjadi sangat populer selama beberapa tahun terakhir. Mereka memungkinkan Anda untuk fokus memberi pengunjung Anda perasaan segar dan bersih saat bernavigasi. Gaya desain web minimal dipengaruhi oleh gaya desain interior Skandinavia. Anda pasti pernah melihat gambar ruang keluarga Skandinavia di seluruh internet. Dengan mengurangi furnitur dan menggunakan sebagian besar warna putih atau abu-abu, cahaya dan ketenangan bebas memasuki ruangan. Itulah tepatnya yang dilakukan situs web minimal. Mereka fokus untuk memberi pengunjung Anda perasaan tenang sehingga mereka dapat fokus pada konten yang Anda bawa tanpa kewalahan.

Ini adalah posting kedua dalam seri posting di mana kami akan 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. Lebih Sedikit Lebih Banyak

Hal pertama yang harus Anda ingat saat membuat situs web minimal adalah mencoba mengurangi elemen desain yang Anda gunakan di situs web Anda. Daripada menggunakan lebih banyak, cobalah untuk mendapatkan yang terbaik dari beberapa elemen yang Anda gunakan.

Anda akan terkejut betapa banyak yang bisa Anda dapatkan dari desain Anda dengan menyempurnakan elemen desain Anda sedemikian rupa sehingga menjadi pelengkap. Menggunakan lebih sedikit elemen di situs web Anda juga memungkinkan Anda menyimpan ikhtisar dan menyampaikan pesan Anda dengan cara yang lebih konsisten dan jelas.

2. Margin dan Padding adalah Sahabat Terbaik Anda

Situs web minimal biasanya memiliki banyak ruang kosong. Spasi pada halaman dan posting Anda memungkinkan pengunjung untuk bernapas selama kunjungan mereka di situs web Anda. Mereka memberikan rasa ketenangan dan memungkinkan Anda untuk fokus pada konten yang ingin Anda bagikan.

Cara terbaik untuk menambahkan spasi putih ke situs web Anda adalah dengan menggunakan warna latar belakang putih dan/atau abu-abu muda yang dikombinasikan dengan padding dan/atau margin ekstra. Jangan takut untuk bermain-main dengan nilai-nilai yang berbeda untuk melihat hasil apa yang muncul darinya.

3. Gunakan Satu Warna Aksen

Jika Anda ingin menjaga situs web Anda seminimal mungkin, Anda juga harus menghindari penggunaan terlalu banyak warna berbeda. Bersikaplah senetral mungkin dengan menggunakan banyak warna putih dan abu-abu. Gunakan warna yang lebih gelap untuk konten tertulis Anda. Dan untuk membuat desain Anda sedikit lebih edgy, pilih satu warna aksen. Warna ini biasanya akan sama dengan yang Anda gunakan di logo Anda.

4. Baik Gambar atau Ilustrasi – Bukan Keduanya

Secara umum, disarankan untuk memilih antara gambar atau ilustrasi kehidupan nyata saat Anda membuat situs web. Menggunakan keduanya pada saat yang sama benar-benar dapat memperumit situs web Anda dan mencampuradukkan gaya situs web yang berbeda, yang merupakan sesuatu yang pasti ingin Anda hindari.

Ada satu pengecualian sekalipun. Jangan ragu untuk menggunakan gambar dalam kombinasi dengan ilustrasi ikon di Modul Blurb Anda misalnya. Jika mereka minimal dan mendukung konten di halaman Anda, Anda siap melakukannya.

5. Pertimbangkan Menggunakan Modul Teks Alih-alih Modul Tombol untuk CTA

Pernahkah Anda mencoba menggunakan Modul Teks alih-alih Modul Tombol? Anda pasti harus. Meskipun Modul Tombol memberi Anda sebagian besar opsi yang biasa Anda gunakan di Visual Builder, ia memiliki kecenderungan untuk menambahkan batas ke semua sisi tombol Anda. Dengan Modul Teks, Anda dapat menghindarinya. Anda cukup membuat salinan Anda dapat diklik dan menambahkan batas bawah seperti yang Anda lihat di layar cetak di bawah ini.

6. Pembagi Dapat Membantu Menyeimbangkan Spasi

Jika Anda ingin menambahkan sentuhan modern ke situs web Anda, Anda pasti harus mencoba menggunakan beberapa pembagi di situs web Anda dan menatanya agar sesuai dengan tata letak Anda yang lain.

Mereka cenderung menghubungkan elemen desain yang berbeda satu sama lain dan menciptakan hasil yang koheren.

7. Gunakan Bentuk Sederhana dan Halus

Ini adalah salah satu favorit saya. Terkadang, kita cenderung mengabaikan fitur yang paling sering kita gunakan, seperti latar belakang gradien. Tentu, menggunakan gambar latar belakang memiliki daya tariknya sendiri, tetapi apakah Anda pernah mencoba menggunakan latar belakang gradien radial dengan cara yang halus? Ini memungkinkan pengunjung Anda untuk fokus pada tajuk utama Anda dan membantu Anda memicu tindakan.

8. Gunakan Animasi Halus (Jika Dibutuhkan)

Last but not least, situs web minimal biasanya menjadi lebih baik saat menggunakan animasi yang halus. Dan ketika kami mengatakan halus, yang kami maksud adalah sangat halus. Anda akan terkejut betapa halusnya sebuah efek dapat terlihat hanya dengan mengurangi Intensitas Animasi secara drastis. Selama animasinya halus, Anda dapat menambahkannya ke elemen apa pun dan itu tidak akan memengaruhi keterbacaan dan pengalaman pengguna situs web Anda.

Pratinjau

Sekarang setelah kita mempelajari semua teknik, mari kita mulai mempraktikkannya. Kami akan membuat ulang contoh berikut langkah demi langkah:

Mari Mulai Membuat: Tambahkan Bagian Standar Baru

Pengaturan Bagian

Jarak

Untuk membuat contoh di atas, kita membutuhkan total dua bagian. Mari kita mulai dengan menambahkan yang pertama ke halaman baru atau yang sudah ada dan menambahkan Spasi berikut ke dalamnya:

• Padding Atas & Bawah: 50px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris baru yang berisi satu kolom.

Latar Belakang Gradien Kolom

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

• Warna #1: #ffffff
• Warna #2: #efefef
• Tipe Gradien Kolom: Radial
• Arah Radial Kolom: Pusat
• Posisi Awal Kolom: 40%
• Posisi Akhir Kolom: 40%

Perekat

Kemudian, tambah lebar baris dengan membuat perubahan berikut pada pengaturan Ukuran:

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

Jarak

Terakhir, tambahkan Spasi berikut ke baris Anda juga:

• Padding Atas & Bawah: 0px
• Padding Atas & Bawah Kolom: 250px
• Padding Kiri Kolom: 150px (Desktop), 20px (Tablet), 0px (Telepon)

Modul Teks Pertama

Pengaturan Teks

Setelah Anda mengubah pengaturan baris Anda, Anda dapat mulai menambahkan modul yang Anda butuhkan. Kita akan mulai dengan modul teks deskripsi singkat menggunakan pengaturan teks berikut:

• Berat Font Teks: Semi Tebal
• Gaya Font Teks: Huruf Besar
• Spasi Huruf Teks: 8px

Animasi

Kami juga menambahkan animasi yang sangat halus ke tata letak ini, dimulai dengan Modul Teks ini. Buka pengaturan Animasi dan tambahkan animasi berikut:

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Intensitas Animasi: 5%

Modul Teks Kedua

Pengaturan Teks H1

Tepat di bawah Modul Teks sebelumnya, lanjutkan dan tambahkan Modul Teks H1 yang berisi pengaturan teks H2 berikut:

• Font Judul: Georgia
• Warna Teks Judul: #666666
• Ukuran Teks Judul: 78px (Desktop), 50px (Tablet), 40px (Telepon)
• Spasi Surat Judul: 3px

Jarak

Kami akan membuat ruang di sekitar modul ini dengan menggunakan pengaturan Spasi berikut:

• Margin Atas & Bawah: 100px
• Margin Kiri: 100px (Desktop & Tablet), 20px (Telepon)
• Padding Kiri: 40px

Berbatasan

Kami juga membutuhkan batas kiri jadi lanjutkan dan tambahkan batas kiri dengan pengaturan berikut:

• Lebar Batas Kiri: 6px
• Warna Batas Kiri: #d67787

Modul Teks Tombol

Tambahkan Tautan

Alih-alih menggunakan Modul Tombol, kami menggunakan Modul Teks yang akan kami tambahkan tautannya. Tambahkan CTA Anda dan tautan di dalam kotak Konten.

Pengaturan Teks Tautan

Kemudian, terapkan pengaturan teks Tautan berikut ke Modul Teks Anda:

• Berat Huruf Tautan: Semi Tebal
• Gaya Font Tautan: Miring & Huruf Besar
• Perataan Teks Tautan: Kiri
• Warna Teks Tautan: #666666
• Jarak Huruf Tautan: 8px

Perekat

Karena kita akan menggunakan batas bawah, nanti, kita juga akan mengurangi Lebar Modul Teks ini:

• Lebar: 46%
• Penyelarasan Modul: Kiri

Jarak

Dan untuk memastikan batas bawah tidak terlalu dekat dengan teks kita, kita juga akan menambahkan padding bawah '10px'.

• Padding Bawah: 10px

Berbatasan

Sekarang kita dapat melanjutkan dengan menambahkan batas bawah menggunakan pengaturan berikut:

• Lebar Batas Bawah: 1px
• Warna Batas Bawah: #666666

Animasi

Kami juga menambahkan animasi halus:

• Gaya Animasi: Slide
• Arah Animasi: Kanan
• Penundaan Animasi: 100ms
• Intensitas Animasi: 5%

Tambahkan Modul Pembagi

Visibilitas

Modul terakhir yang kita perlukan di baris ini adalah Modul Pembagi. Pastikan Anda membiarkan opsi 'Tampilkan Pembagi' diaktifkan.

Warna

Kami menggunakan warna yang sama untuk pembagi ini seperti yang kami lakukan untuk batas kiri judul Modul Teks: '#d67787'.

Perekat

Buka pengaturan Sizing selanjutnya dan ubah Divider Weight menjadi '2px'.

Jarak

Kami akan mendorong Modul Pembagi ke kanan menggunakan pengaturan Spasi berikut:

• Margin Kiri: 200px
• Margin Kanan: -100px

Animasi

Last but not least, kami akan menyertakan Animasi berikut:

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Penundaan Animasi: 150ms
• Intensitas Animasi: 5%

Tambahkan Bagian Standar Kedua

Pengaturan Bagian

Jarak

Kita sudah selesai dengan bagian pertama sehingga sekarang kita dapat melanjutkan dan menambahkan bagian baru tepat di bawah yang sebelumnya. Buka pengaturan bagian dan tambahkan margin berikut ke dalamnya:

• Margin Atas & Bawah: 80px

Tambahkan Baris Baru

Struktur Kolom

Lanjutkan dengan menambahkan baris dengan struktur kolom berikut:

Perekat

Kemudian, buka pengaturan baris dan tingkatkan lebar baris Anda menggunakan pengaturan berikut:

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

Jarak

Kita juga perlu menambahkan beberapa padding kolom 2:

• Kolom 2 Padding Kiri: 100px (Desktop), 0px (Tablet & Ponsel)

Tambahkan Modul Gambar ke Kolom 1

Unggah Gambar

Kita sekarang dapat mulai menambahkan modul ke dua kolom kita. Mulailah dengan menambahkan Modul Gambar ke kolom pertama Anda dan unggah gambar pilihan.

Jarak

Kami akan menambah lebar Modul Gambar dengan menambahkan margin kanan negatif:

• Margin Kanan: -100px

Bayangan Kotak

Kami juga akan menggunakan bayangan kotak berikut untuk membuat elemen desain tambahan pada halaman:

• Posisi Horizontal Bayangan Kotak: 100px
• Posisi Vertikal Bayangan Kotak: 100px
• Kekuatan Penyebaran Bayangan Kotak: -14px
• Warna Bayangan: #efefef

Modul Teks Tombol Klon & Tempatkan Di Bawah Modul Gambar

Cari & Kloning Modul Teks Tombol

Kita akan menggunakan kembali ketiga Modul Teks dari bagian pertama dimulai dengan tombol Modul Teks. Silakan dan mengkloningnya.

Tempatkan Di Bawah Gambar

Kemudian, letakkan tepat di bawah Modul Gambar di kolom pertama.

Kloning Modul Teks Pertama di Bagian Pertama & Tempatkan di Kolom 2

Cari & Kloning Modul Teks

Modul Teks berikutnya yang kita perlukan adalah yang pertama di bagian kita. Silakan dan kloning yang ini juga.

Tempatkan di Kolom 2

Alih-alih menempatkannya di kolom pertama, letakkan di kolom kedua.

Modul Teks Judul Klon & Tempatkan di Kolom 2

Cari & Kloning Modul Teks

Terakhir, kita juga akan menggunakan kembali judul Modul Teks.

Tempatkan di Kolom 2

Setelah Anda mengkloningnya, letakkan di kolom kedua dari baris baru Anda.

Ubah Konten menjadi H2

Ubah konten di kotak konten Anda menjadi H2.

Pengaturan Teks H2

Kemudian, tambahkan pengaturan berikut ke pengaturan teks H2 Anda:

• Judul 2 Font: Georgia
• Judul 2 Warna Teks: #666666
• Judul 2 Ukuran Teks: 58px
• Spasi Judul 2 Huruf: 3px

Tambahkan Modul Teks Deskripsi

Pengaturan Teks

Di bawah judul Modul Teks, kita akan menambahkan deskripsi Modul Teks dengan pengaturan teks berikut:

• Berat Font Teks: Ringan
• Spasi Huruf Teks: 1px

Perekat

Silakan dan ubah Ukuran Modul Teks ini:

• Lebar: 70%
• Penyelarasan Modul: Kanan

Tambahkan Modul Pembagi #1

Visibilitas

Modul berikutnya yang kita perlukan adalah Modul Pembagi. Pastikan opsi Perlihatkan Pembagi diaktifkan.

Warna

Ubah warna pembagi Anda menjadi '#666666'.

Jarak

Tambahkan beberapa Spasi berikutnya:

• Margin Atas: 100px
• Margin Kiri: 400px (Desktop), 300px (Tablet), 200px (Telepon)
• Margin Kanan: -100px

Animasi

Dan tentu saja, kita juga akan menggunakan animasi yang halus:

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Intensitas Animasi: 5%

Tambahkan Modul Pembagi #2

Visibilitas

Last but not least, kita akan menambahkan Modul Pembagi lainnya. Sekali lagi, pastikan opsi Show Divider diaktifkan.

Warna

Ubah warna pembagi Anda menjadi '#d67787'.

Perekat

Gunakan '2px' untuk Pembagi Berat.

Jarak

Dan tambahkan pengaturan Spasi berikut:

• Margin Kiri: 200px (Desktop & Tablet), 150px (Telepon)
• Margin Kanan: -100px

Animasi

Untuk menyelesaikannya, tambahkan animasi halus ke pembagi Anda:

• Gaya Animasi: Slide
• Arah Animasi: Kiri
• Penundaan Animasi: 100ms
• Intensitas Animasi: 5%

Pratinjau

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

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda beberapa teknik Divi yang hebat tentang cara membuat situs web minimal. Ini adalah posting kedua dari seri tentang cara membuat gaya desain yang indah terjadi menggunakan kreativitas Anda dan beberapa opsi bawaan terbaik Divi. Dalam posting berikutnya, kami akan berbagi teknik tentang cara mencapai gaya desain yang lebih menakjubkan. Jika Anda memiliki pertanyaan atau saran, pastikan Anda meninggalkan bagian komentar di bawah!