Menguasai rasio emas dalam desain

Desain Anda terlihat hampir benar, tetapi ada sesuatu yang terasa tidak aktif. Jaraknya tampak canggung. Proporsi tidak berhasil. Anda menyesuaikan margin dan bantalan, tetapi rasa ketidakseimbangan yang mengganggu itu tetap ada. Bagian yang hilang mungkin rasio emas.

Prinsip matematika ini telah memandu desain hebat selama berabad -abad. Dan, mata kita secara alami lebih suka rasio spesifik ini. Sebagian besar desainer melewatkan rasio emas atau salah menemani mereka karena betapa sulitnya retak. Namun, dengan pembangun halaman seperti Divi 5, Anda dapat menerapkan proporsi sempurna tanpa perhitungan yang kompleks.

Mari kita cari tahu lebih banyak.

Apa rasio emasnya?

Rasio emas sama dengan kira -kira

1.618.

Dari mana asalnya? Anda mendapatkan nomor ini ketika Anda membagi garis menjadi dua bagian, di mana bagian yang lebih panjang dibagi dengan bagian yang lebih pendek sama dengan seluruh garis yang dibagi dengan bagian yang lebih panjang.

Anda dapat menghitung rasio emas menggunakan urutan Fibonacci. Mulailah dengan 0 dan 1. Tambahkan mereka untuk mendapatkan 1. Kemudian tambahkan 1 dan 1 untuk mendapatkan 2. Terus tambahkan dua angka terakhir: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144. Ketika Anda membagi angka yang lebih besar dengan angka sebelumnya, Anda semakin dekat dengan 1.618.

Rasio ini muncul di mana -mana di alam. Spiral biji bunga matahari mengikutinya. Kerang nautilus tumbuh menggunakan proporsi ini. Bahkan wajah Anda kemungkinan mengikuti pengukuran rasio emas antara fitur Anda. Ketika sesuatu mengikuti rasio ini, otak Anda mengenalinya secara alami menyenangkan.

Gambar milik: Lucas dan Dynamic Wang di Unsplash dan Milena Carolina Dos Santos Mangueira

Simbol φ (PHI) mewakili rasio matematika unik yang ditemukan orang Yunani kuno sekitar 300 SM. Mereka menyebutnya sebagai "proporsi ilahi," percaya itu mengungkapkan keseimbangan visual dan keindahan khusus.

Mengapa penting: dari bangunan lama hingga desain web

Orang -orang Yunani menggunakan rasio ini untuk kuil Parthenon, dan piramida Mesir mengikuti pengukuran ini. Seniman seperti Leonardo da Vinci mempelajari proporsi ini selama bertahun -tahun. Da Vinci menggambar "pria vitruvian" yang terkenal, menunjukkan rasio emas dalam tubuh manusia.

Gambar representasional

Desainer yang mapan masih menggunakan ini. Logo Apple menggunakan proporsi rasio emas. Logo Burung Twitter yang dulu mengikuti pengukuran ini. Majalah menempatkan konten penting di tempat rasio emas, bukan tepat di tengah.

Gambar milik: Widewalls & Design Shack

Para ilmuwan mempelajari mengapa orang menyukai bentuk rasio emas. Pemindaian otak menunjukkan lebih banyak aktivitas di area kesenangan ketika orang melihat persegi panjang rasio emas. Ini melekat pada manusia karena ini terjadi di semua budaya dan usia.

Otak Anda memproses proporsi ini lebih cepat daripada rasio lain, yang berarti pengalaman pengguna yang lebih baik. Ketika proporsi situs web terlalu jauh dari 1,618, pengunjung merasa tidak nyaman dan pergi lebih cepat.

Rasio menciptakan keseimbangan tanpa merata dengan sempurna. Simetri yang sempurna bisa terlihat membosankan di situs web. Rasio emas memberikan asimetri yang cukup untuk menciptakan minat visual sambil mempertahankan penampilan yang bersih dan profesional yang diharapkan.

Mengapa desain Anda terasa "mati" (dan bagaimana rasio memperbaikinya)

Anda hanya menghabiskan berjam -jam menyempurnakan tata letak Anda. Warnanya tepat. Font bekerja bersama. Tapi sesuatu yang masih terasa tidak aktif. Sidebar tampak terlalu lebar. Headernya terlihat agak sempit. Area konten tidak mengalir dengan sisanya.

Ini adalah pengalaman umum. Banyak desainer menyesuaikan ukuran berdasarkan apa yang terasa tepat saat ini. Mungkin Anda mengatur konten utama menjadi 70 persen dan bilah sisi hingga 30 persen. Angka -angka ini terdengar masuk akal, tetapi mereka tidak selalu terlihat alami.

Mata kita mencari keseimbangan dan pola yang akrab. Ketika proporsi tidak benar, seluruh desain terasa canggung, bahkan jika Anda tidak dapat menjelaskan alasannya. Ini mungkin bukan kesalahan besar, hanya detail kecil yang mengganggu Anda.

Masalah sebenarnya sering proporsi. Ketika tata letak mengabaikan apa yang terasa seimbang, otak Anda memperhatikan. Sesuatu terasa tidak aktif, bahkan jika Anda tidak dapat meletakkan jari Anda di atasnya.

Betapa salahnya rasio sabotase pengalaman pengguna

Proporsi yang buruk membuat segalanya terlihat aneh. Otak Anda mengharapkan bentuk dan ukuran tertentu untuk berjalan dengan baik. Bayangkan bagian pahlawan yang mengambil tepat setengah dari layar Anda. Itu terlihat kaku dan canggung.

Sekarang, pertimbangkan satu yang menggunakan 43 persen atau 67 persen dari ruang. Itu terlihat tidak seimbang dan berantakan.

Ini dapat melukai situs web Anda. Orang -orang memutuskan dengan sangat cepat jika mereka mempercayai apa yang mereka lihat. Jika halaman terlihat, mereka mungkin berpikir bisnis Anda tidak dapat dipercaya. Desain yang berantakan membuat orang percaya pekerjaan Anda tidak bagus.

Rasio emas dapat membantu memperbaikinya. Alih -alih membuat bagian pahlawan Anda 70 persen, cobalah 61,8 persen, meninggalkan bagian berikutnya 38,2 persen terlihat.

Angka -angka ini tidak acak. Mereka mengikuti pola khusus yang disebut 1.618 yang Anda lihat di alam, seperti bunga dan cangkang. Mata Anda tahu pola ini dan merasa tenang saat mereka melihatnya.

Caranya adalah bagaimana bagian -bagian berhubungan satu sama lain. Semuanya terasa benar jika ukuran header Anda cocok dengan area konten Anda menggunakan rasio emas. Footer, menu, dan konten Anda mulai cocok bersama daripada terlihat seperti berjuang untuk ruang.

Cara menghitung proporsi rasio emas

Anda tidak membutuhkan matematika mewah. Ingatlah 62 dan 38. Angka -angka ini bertambah hingga 100, sehingga mereka bekerja sebagai persentase.

Pisahkan ruang apa pun dengan memberikan 62% ke bagian yang lebih besar dan 38% untuk bagian yang lebih kecil. Situs web Anda lebar 1000 piksel. Buat konten utama Anda 620 piksel. Letakkan sidebar Anda di 380 piksel. Rasio emas yang sempurna.

Mendapat bagian setinggi 500 piksel. Area utama Anda mendapat 310 piksel. Sisanya menerima 190 piksel.

Aturan cepat untuk bagian situs web

Bagian Pahlawan harus mengambil sekitar 60% dari apa yang dilihat orang terlebih dahulu. Sisanya masuk ke pratinjau konten utama Anda. Buat kartu 60% setinggi mereka. Kartu selebar 300 piksel menjadi setinggi 180 piksel.

Tombol bekerja dengan cara yang sama. Lebar 100 piksel berarti ketinggian 60 piksel. Kolom teks Anda selebar 600 piksel. Berhentilah menambahkan konten di sekitar 370 piksel ke bawah. Kemudian tambahkan bagian Anda berikutnya.

Apakah itu terlihat benar?

Mundur dari layar Anda. Bagian -bagiannya harus terasa seimbang sekarang. Mata Anda mengalir dengan lancar dari bagian ke bagian. Jika Anda terus menatap satu tempat, proporsinya mungkin tidak aktif.

Situs web populer menggunakan pemisahan 62/38 yang sama ini di mana -mana. Anda akan mulai melihat polanya begitu Anda tahu apa yang harus dicari. Matematika tetap tersembunyi, tetapi harmoni visual segera menonjol.

Kesalahan Rasio Emas Umum Desainer

Sebagian besar desainer tahu rasio emas ada dan ingin menggunakannya. Di sinilah mereka biasanya berjuang.

Kesalahan terbesar adalah menerapkan rasio secara acak tanpa sistem. Anda menggunakan rasio emas untuk header Anda, pertiga untuk kisi konten Anda, dan persentase acak untuk footer Anda. Pilih satu pendekatan dan gunakan secara konsisten di seluruh desain Anda.

Banyak desainer putaran 1.618 dengan angka mudah seperti 1.5 atau 1.7. Otak Anda memperhatikan perbedaan antara 62% dan 60%, dan kesenjangan kecil itu mempengaruhi harmoni visual yang Anda kerjakan.

Masalah umum lainnya adalah elemen rasio ketidakcocokan. Misalnya, Anda dapat membuat bagian pahlawan proporsional yang sempurna tetapi kemudian menambahkan galeri gambar yang menggunakan rasio jarak yang sama sekali berbeda. Pemutusan visual memecah aliran yang Anda buat.

Beberapa desainer menerapkan rasio emas untuk teks tanpa mempertimbangkan kenyamanan membaca. Panjang garis yang mengikuti proporsi matematika yang sempurna mungkin melebihi lebar baca yang nyaman. Keterbacaan menjadi prioritas daripada ketepatan matematika.

Desainer web juga sering mengabaikan responsif. Proporsi desktop yang terlihat seimbang dapat terasa sempit atau diregangkan pada layar yang lebih kecil. Rasio emas membutuhkan aplikasi yang berbeda di seluruh ukuran perangkat.

Banyak pembangun halaman default ke tata letak sewenang -wenang yang mengabaikan harmoni proporsional. Kisi-kisi tiga kolom standar menggunakan pemisahan 33/33/33, bukan rasio yang lebih alami.

Kesalahan yang paling terbatas adalah meninggalkan pendekatan setelah upaya awal. Rasio emas bekerja paling baik ketika diterapkan secara sistematis di seluruh struktur tata letak Anda, bukan sebagai penyesuaian yang terisolasi.

Mengapa banyak pembangun halaman mengabaikan rasio emas?

Pembangun halaman tumbuh di sekitar pemikiran programmer. Pengembang menyukai angka yang membelah dengan bersih. Dua belas kolom, empat bagian, lima puluh lima puluh perpecahan.

Banyak perusahaan pembangun benar -benar percaya pengguna harus mengontrol pilihan desain mereka sendiri. Mereka tidak ingin mendorong teori estetika tertentu pada orang yang mungkin lebih suka pendekatan yang berbeda. Beberapa desainer membenci rasio emas dan lebih suka sistem proporsi lainnya. Mengapa memaksa satu prinsip matematika ketika kreativitas tumbuh subur pada opsi?

Masalah teknis yang sebenarnya lebih berantakan daripada filosofi desain. Rasio emas membuat desimal aneh yang pecah pada perangkat yang lebih tua. Cobalah membangun jaringan responsif di mana satu kolom lebar 61,8%. Persentase bersih seperti 25% atau 33% berperilaku dapat diprediksi di setiap perangkat.

Sebagian besar perusahaan pembangun halaman dimulai sebagai solusi teknis, bukan alat desain. Mereka dibangun di sekitar tata letak logis yang sistematis yang bekerja dengan andal.

Pengguna jarang mengeluh tentang proporsi. Mereka mengeluh tentang tata letak seluler yang rusak dan waktu pemuatan yang lambat. Prioritas perusahaan mengikuti umpan balik pengguna yang sebenarnya, bukan teori desain.

Beberapa pembangun khawatir tentang pemula yang luar biasa. Pengguna baru sudah menghadapi lusinan pilihan tata letak, dan menambahkan pertimbangan matematika mungkin menakuti orang yang hanya menginginkan sesuatu yang bersih dan profesional.

Membangun proporsi yang sempurna dengan Divi 5

Sebelum kita menyelami seluk-beluk tentang bagaimana Divi 5 mengubah desain rasio emas dari sakit kepala matematika menjadi kesederhanaan point-and-klik, mari kita mengambil jalan memutar pendek dan memahami apa yang membuat Divi menjadi pilihan untuk desainer WordPress yang menginginkan hasil profesional tanpa mimpi buruk pengkodean.

Apa itu Divi?

Divi adalah pembangun halaman WordPress yang dirancang untuk orang -orang yang peduli dengan desain visual tanpa kompromi pada fitur.

Anda dapat menyeret dan menjatuhkan lebih dari 200 modul di sekitar, mengubah teks, dan memilih warna baru. Semuanya terjadi tepat di halaman Anda, jadi Anda melihat dengan tepat apa yang akan dilihat pengunjung.

Tema ini dikemas dengan 2000+ tata letak yang sudah dibuat sebelumnya. Ini bukan templat dasar tetapi desain lengkap untuk restoran, fotografer, konsultan, dan lusinan bisnis lainnya. Pilih satu yang sesuai dengan gaya Anda dan sesuaikan dari sana.

Jika Anda menjual produk secara online, Divi menyertakan 20+ modul yang dibuat khusus untuk toko. Halaman produk Anda akan terlihat profesional dan benar -benar membantu mengubah browser menjadi pembeli.

Bangun situs web tanpa sakit kepala

Pembuat tema memungkinkan Anda mendesain setiap bagian dari situs Anda. Anda dapat membuat header khusus yang cocok dengan merek Anda, membangun tata letak blog yang unik, dan bahkan membuat 404 halaman Anda terlihat luar biasa.

Divi Ai membawa kenyamanan AI langsung ke kanvas desain Anda. Anda dapat menghasilkan teks,

gambar,

kode,

dan seluruh bagian halaman menggunakan divi ai.

Anda bahkan dapat mengedit foto yang ada dengan hanya menggambarkan apa yang Anda butuhkan.

Situs Quick Divi Memecahkan Wajah Situs Web Masalah Terbesar yang Dibangun: Menatap halaman kosong tanpa tahu harus mulai dari mana. Anda dapat memilih dari situs starter profesional, yang memiliki templat situs web profesional, dibuat oleh tim desain kami, dan menampilkan gambar dan karya seni unik yang tidak akan Anda temukan di tempat lain.

Atau biarkan Divi Ai membangun tata letak khusus berdasarkan deskripsi bisnis Anda.

Situs web yang dihasilkan AI ini bukan hanya gambar gambar. Ini akan berisi judul, salinan, dan gambar yang relevan sesuai deskripsi Anda. Anda dapat meminta Divi AI untuk menghasilkan semua gambar, menggunakan satu dari Unsplash, atau menggunakan placeholder sehingga Anda dapat menggantinya sendiri.

Anda bahkan dapat memilih font dan warna Anda dan membiarkan AI berjalan dengan mereka. Dan tentu saja, situs web tetap dapat diedit seperti situs web biasa, sehingga Anda dapat mengubah apa pun yang Anda butuhkan sesuai selera Anda.

Dapatkan Divi

Divi 5: Langkah selanjutnya

Membangun situs web harus terasa alami, seperti ide -ide membuat sketsa di atas kertas. Anda memiliki visi, dan alat Anda harus membantu menghidupkannya tanpa menghalangi. Itulah yang mendorong kita untuk membangun kembali Divi dari bawah ke atas sepenuhnya.

Divi 5, tersedia hari ini sebagai alpha dan siap digunakan di situs web baru , mewakili bertahun -tahun mendengarkan apa yang Anda butuhkan saat membuat situs web. Bukan lonceng dan peluit atau fitur yang tidak ada yang benar -benar digunakan siapa pun, tetapi perbaikan nyata yang membuat pekerjaan Anda lebih cepat dan lebih menyenangkan. Kami menyimpan semua yang Anda sukai tentang Divi dan membawanya ke tingkat berikutnya.

Kami membangun kembali semuanya dari awal menggunakan alat web baru. Halaman memuat lebih cepat sekarang, dan kontrol bekerja lebih baik. Anda dapat menjaga desain Anda tetap sama di seluruh situs Anda tanpa pekerjaan tambahan.

Apa yang ditingkatkan? Apa yang baru?

• Kerangka Kerja Lengkap Membangun kembali menyingkirkan kode pendek lama. Semuanya berjalan pada kode berbasis blok baru yang memuat lebih cepat dan bekerja lebih baik.
• Pengeditan satu klik memungkinkan Anda mengklik bagian mana pun dari halaman Anda untuk segera mengeditnya. Tidak ada lagi perburuan ikon kecil atau menggali melalui menu.
• Breakpoint yang dapat disesuaikan memberi Anda tujuh ukuran layar untuk dikerjakan, bukan tiga. Anda dapat mengubah masing -masing agar sesuai dengan kebutuhan Anda yang tepat.
• Dukungan Unit Lanjutan memungkinkan Anda menggunakan calc (), clamp (), min (), max (), dan semua unit CSS baru tepat di pembangun.
• Variabel desain memungkinkan Anda menyimpan warna, font, ukuran, gambar, teks, dan tautan di satu tempat. Ubah mereka sekali, dan mereka akan memperbarui di mana -mana di situs Anda.
• Preset grup opsi memungkinkan Anda menyimpan dan menggunakan kembali gaya untuk perbatasan, font, bayangan, dan jarak. Ini bekerja di berbagai bagian situs Anda.
• Baris bersarang memungkinkan Anda memasukkan barisan di dalam baris lain. Anda dapat membangun tata letak yang kompleks tanpa bagian khusus.
• Grup modul menggabungkan beberapa modul menjadi satu unit. Ini membuat tata letak yang kompleks lebih mudah dikelola. Anda juga dapat membuat modul khusus Anda.
• Ruang kerja multi-panel memungkinkan Anda menempatkan panel di mana Anda menginginkannya. Anda dapat bekerja dengan beberapa pengaturan yang terbuka pada saat yang sama.
• Manajemen atribut memberi Anda kontrol yang tepat saat Anda menyalin, menempel, dan mengatur ulang gaya, konten, dan preset di antara bagian yang berbeda.
• Mode terang/gelap memungkinkan Anda memilih tema yang lebih mudah di mata Anda saat Anda bekerja.
• Penskalaan kanvas memungkinkan Anda mengubah ukuran area kerja Anda untuk melihat bagaimana situs Anda terlihat di layar yang berbeda. Tidak perlu beralih mode pratinjau.
• Peningkatan kinerja membuat halaman memuat lebih cepat, tampil lebih cepat, dan merasa lebih halus saat Anda membangun.

Coba Divi 5 hari ini

Divi 5 sekarang tersedia untuk proyek situs web baru. Kami membangunnya kembali dari bawah ke atas untuk membuat alur kerja Anda lebih cepat dan lebih mudah. Unduh Public Alpha dan coba di situs baru Anda berikutnya untuk melihat perbaikan. Ini gratis untuk semua anggota Divi, baru dan lama.

Kami menyarankan menggunakannya hanya untuk situs baru sementara kami meningkatkan sistem migrasi untuk situs Divi 4 yang ada. Jika Anda mulai segar, sekarang adalah waktu yang tepat untuk mencoba antarmuka yang diperbarui dan kinerja yang lebih baik.

Cara menggunakan rasio emas menggunakan divi 5

Cukup mengatakan. Mari kita selam secara mendalam dan lihat bagaimana kita dapat menerapkan rasio emas di situs web Anda menggunakan Divi 5 dan, lebih baik lagi, bagaimana mereka dapat distandarisasi sehingga Anda tidak harus berjuang dengan matematika setiap kali Anda membuat bagian atau halaman baru.

Variabel desain memungkinkan Anda menyimpan dan menggunakan kembali nilai -nilai di seluruh situs Anda. Mereka membentuk DNA identitas visual situs Anda. Divi 5 memiliki enam jenis: warna, font, gambar, string teks, tautan, dan angka. Masing -masing memiliki peran tertentu:

• Variabel warna memiliki warna merek, latar belakang, warna teks, dan warna lain yang digunakan di seluruh situs.
• Variabel font menjaga font konsisten untuk judul, teks tubuh, dan elemen khusus.
• Variabel gambar menyimpan grafik umum seperti logo atau pola latar belakang agar mudah digunakan.
• Variabel string teks menyimpan konten yang dapat digunakan kembali seperti slogan, kontak, dan catatan hukum.
• Variabel tautan menjaga URL yang sering Anda gunakan, seperti media sosial atau halaman utama.
• Variabel nomor pengukuran dalam piksel, persentase, EMS, REMS, dan unit viewport dan bekerja dengan fungsi CSS seperti calc () untuk menjaga proporsi tepat di layar apa pun.

Menyiapkan variabel rasio emas Anda

Buka dasbor Divi 5 Anda dan temukan ikon Variable Manager di bilah sisi kiri.

Klik untuk membuka panel Variabel. Tambahkan warna, font, gambar, teks, dan variabel tautan Anda.

Kemudian, buka tab Numbers untuk membuat variabel rasio emas Anda. Mulailah dengan menambahkan variabel angka ini:

Variabel Tipografi

• Ukuran H1: Clamp (47px, 4.7VW, 76px)
  • Minimum 47px: Bahkan pada ponsel terkecil (lebar 320px), H1 Anda tetap cukup besar untuk membangun hierarki. Apa pun yang lebih kecil kehilangan dampak sebagai judul utama.
  • 4.7VW Nilai Tengah: Unit lebar viewport ini membuat skala teks dengan lancar. Pada lebar layar 1000px, 4.7VW = 47px. Pada 1600px, tumbuh menjadi 75px
  • 76px Maksimum: Kami mendapatkan ini dengan mengalikan 18px × 1.618 tiga kali (18 × 1.618 × 1.618 × 1.618 = 76.244px)
• Ukuran H2: Clamp (29px, 3.5VW, 47px)
  • 29px Minimum: Menjaga H2 terasa lebih kecil dari H1 di ponsel sambil tetap dapat dibaca
  • Penskalaan 3.5VW: Penskalaan yang lebih kecil secara proporsional dari H1 untuk mempertahankan hierarki
  • 47px Maksimum: Tepat 76px ÷ 1.618 = 47.122px
• Ukuran H3: Clamp (18px, 2.9VW, 29px)
  • 18px Minimum: Cocokkan ukuran teks tubuh di ponsel untuk menghemat ruang vertikal
  • Penskalaan 2.9VW: tumbuh lebih lembut daripada judul yang lebih besar
  • 29px Maksimum: Justru 47px ÷ 1.618 = 29.124px
• Ukuran H4: klem (14px, 2.2vw, 22.4px): Lanjutkan membagi ~ 29px ÷ 1.618 = 17.994px, tetapi kami menetapkan minimum menjadi 22.4px untuk keterbacaan
• Ukuran H5: Penjepit (13px, 1.8VW, 18px): Ukuran font dasar kami 18px sangat cocok dalam skala di sini
• Ukuran Teks Tubuh: Penjepit (16px, 1.6VW, 18px): Basis standar 18px yang semuanya berasal dari semua perhitungan

Fungsi klem () memungkinkan teks mengubah ukuran dengan lancar di antara layar. Dibutuhkan tiga nilai: ukuran terkecil untuk ponsel, nilai tengah untuk penskalaan, dan yang terbesar untuk desktop. Kami menggunakan Viewport Width (VW) di tengah karena membuat teks tumbuh secara bertahap karena layar menjadi lebih besar. Tidak ada lompatan mendadak di antara ukuran.

Di desktop, kami tetap menggunakan rasio emas yang sempurna. Layar seluler membutuhkan penyesuaian kecil agar teks dapat dibaca. Perhitungan murni mungkin menyarankan 11px untuk beberapa judul, tetapi itu menyegarkan mata pengunjung Anda. Menetapkan minimum praktis seperti 14px mempertahankan harmoni visual rasio emas sambil memastikan semua orang dapat dengan nyaman membaca konten Anda. Hubungan proporsional tetap utuh; Mereka baru saja bergeser sedikit untuk keterbacaan.

Variabel jarak

Setiap nilai berlipat ganda sebelumnya dengan tepat 1.618:

• Space XS: Clamp (8px, 1VW, 10px)
  • Mengapa 10px Base: Ini adalah bantalan target sentuh nyaman terkecil di ponsel. Kebijaksanaan industri merekomendasikan target sentuh minimum 44px, dan padding 10px di semua sisi, ditambah konten membawa Anda ke sana. Lebih kecil dari 10px membuat elemen terasa sempit.
  • Mengapa 8px Minimum: Di ponsel di bawah lebar 360px, bahkan 10px bisa terasa terlalu luas. Kami turun ke 8px untuk memaksimalkan ruang konten sambil menjaga elemen dapat dibedakan.
  • Mengapa 1VW: Menumbuhkan jarak secara proporsional dan memberi Anda tepat 10px pada lebar layar 1000px
• Space Small: Clamp (13px, 1.6VW, 16.18px): Ideal untuk bantalan tombol dan bentuk spasi bidang.
• Space Medium: Clamp (21px, 2.6VW, 26.18px): Bagus untuk jarak antara blok konten terkait.
• Space Large: Clamp (34px, 4.2VW, 42.36px): Membuat ruang bernafas di antara bagian -bagian utama saat penskalaan dengan ukuran layar.
• Space XL: Clamp (55px, 6.8VW, 68.54px): Bagus untuk bantalan atas/bawah pada bagian pahlawan dan blok fitur utama. Bagian pahlawan membutuhkan bantalan substansial bahkan di ponsel. Di bawah 50px, konten pahlawan terasa sempit di tepi.
• Space XXL: Clamp (89px, 11vw, 110.89px): Gunakan hemat. Mungkin untuk bagian khusus yang membutuhkan ruang bernafas dramatis.

Variabel tata letak

• Lebar kolom primer: 61.803%
  • Bagaimana kita mendapatkannya: Bagi 1 dengan 1.618 = 0.61803 (atau 61.803%)
  • Gunakan ini untuk area konten utama Anda di tata letak dua kolom apa pun
• Lebar kolom sekunder: 38.197%
  • Gunakan untuk kolom sidebar Anda di baris yang sama
  • Berasal dari 100% - 61,803% = 38,197%
• Lebar Max Kontainer: 1165px
  • Teks menjadi sulit dibaca saat garis membentang di luar 72 karakter,
    • dan dengan asumsi 10px sebagai ukuran teks minimum, lebar pembacaan optimal (720px) × rasio emas (1.618) = 1165px
  • Berlaku untuk bagian atau baris utama Anda yang memegang konten Anda
• Rasio Tinggi Emas: Calc (100% / 1.618)
  • Ini dapat digunakan sebagai nilai di Heights untuk grup modul/modul, seperti gambar, kotak ajakan bertindak, bagian pahlawan, kartu anggota tim, dll.
  • Ini akan membuat persegi panjang alih -alih kotak atau bentuk acak. Otak Anda menemukan proporsi ini secara alami menarik, seperti foto berbingkai sempurna.
  • Bagaimana kita mendapatkan ini? Rasio emas mengatakan bahwa jika lebar = 1,618, maka tinggi = 1. Jadi jika lebar = 100%, maka tinggi = 100%÷ 1,618 = 61,8%. Formula ini melakukan matematika itu secara otomatis.

Simpan variabel -variabel ini di Manajer Variabel Divi 5. Kemudian, gunakan di mana saja dengan mengklik ikon Variabel di sebelah bidang lebar, tinggi, atau maks. Setelah pengaturan awal, tidak diperlukan matematika. Juga, tidak ada label variabel ini yang diperbaiki; Anda dapat menukar label dengan sesuatu yang masuk akal.

Membuat bagian pahlawan dengan rasio emas

Mari Bangun Bagian Pahlawan untuk halaman arahan buku, terinspirasi oleh salah satu desain koleksi situs pemula, menggunakan variabel rasio emas yang baru saja kami buat. Dan itulah bagian yang menyenangkan. Anda dapat mengambil variabel yang dihitung dengan cermat dan menyaksikan bagaimana mereka mempengaruhi bagian pahlawan nyata.

Mulailah dengan membuat bagian baru di pembangun visual Divi 5. Atur ketinggian menggunakan variabel rasio tinggi emas Anda. Ini membuat otak Anda alami untuk dikenali sebagai hal yang menyenangkan.

Tambahkan variabel ruang XL Anda ke bantalan atas dan bawah. Ini menyediakan ruang bernapas yang cukup di ponsel sambil berkembang dengan tepat di desktop.

Untuk latar belakang bagian, Anda memiliki dua opsi utama menggunakan variabel desain Anda:

Opsi 1: Latar Belakang Warna Solid

• Klik bidang warna latar belakang dan pilih variabel warna utama Anda dari dropdown. Ini membuat bagian pahlawan Anda konsisten dengan identitas merek Anda. Jika warna utama Anda terlalu terang untuk kontras teks, gunakan variabel warna sekunder Anda sebagai gantinya. Pastikan warna apa pun yang Anda pilih memberikan kontras yang cukup untuk teks Anda tetap dapat dibaca. Mengikuti inspirasi kami, kami akan menambahkan gradien latar belakang dan warna primer dengan pemberhentian 72% dan pada 90 °.

Opsi 2: Latar Belakang Gambar

• Terapkan variabel gambar pahlawan Anda (jika Anda membuat satu) melalui bidang gambar latar belakang. Klik ikon Variabel di sebelah pengaturan gambar latar belakang dan pilih variabel gambar yang Anda simpan. Saat menggunakan gambar latar belakang, tambahkan overlay untuk keterbacaan teks. Atur warna overlay ke variabel warna utama Anda dan sesuaikan opacity menjadi 40-60%. Ini menggelapkan gambar yang cukup untuk membuat teks putih renyah dan mudah dibaca.
• Anda juga dapat menggunakan variabel warna sekunder Anda untuk overlay jika lebih kontras gambar latar belakang yang Anda pilih.

Membuat tata letak dua kolom

Tambahkan baris dengan dua kolom.

Atur lebar kolom kiri ke variabel lebar kolom utama Anda dan kolom kanan ke variabel lebar kolom sekunder Anda. Kami juga akan menyalakan opsi "Equalize Column Heights". Kemudian, variabel lebar container max akan diterapkan untuk menjaga konten yang dapat dibaca pada layar yang lebih besar. Ini mencegah garis teks dari peregangan terlalu lebar, terutama di layar yang lebih luas.

Kami juga akan mengaktifkan "menggunakan lebar talang kustom" dan mengaturnya ke 1. Ini akan membantu kami menggunakan jarak rasio emas antara modul kami.

Terapkan variabel medium ruang Anda di kanan kolom pertama dan bantalan kiri kolom kedua untuk menambahkan ruang pernapasan di antara kolom. Ini menciptakan pemisahan yang cukup antara kolom tanpa membuatnya merasa terputus.

Kolom yang lebih besar akan menampung pesan utama dan ajakan bertindak. Kolom yang lebih kecil dapat berisi gambar pahlawan sederhana atau tetap kosong untuk desain yang bersih dan berfokus pada teks.

Menyiapkan tipografi yang mengalir

Di kolom utama Anda, tambahkan dua modul heading.

Atur yang pertama ke H5 dan terapkan variabel ukuran H5. Dalam contoh ini, modul teks ini membawa konten "penulis terlaris." Kami juga akan menggunakan warna sekunder untuk teks ini dan menerapkan gaya font huruf besar. Kami juga akan menerapkan font tubuh ke teks untuk membuatnya khas dan meningkatkan beratnya menjadi tebal.

Atur yang kedua ke H1 dan terapkan variabel ukuran H1 Anda. Ini menjadi judul utama Anda. Dalam contoh ini, kami akan menggunakan nama penulis, yang ditambahkan sebelumnya, sebagai variabel desain. Jika Anda kekurangan ide, Anda dapat menggunakan Divi AI untuk membantu Anda dengan teks heading yang bagus.

Di bawah itu, tambahkan modul teks untuk paragraf pendukung Anda. Terapkan variabel ukuran teks tubuh Anda dan variabel warna. Simpan ini ke 2-3 kalimat menjelaskan proposisi nilai inti Anda. Untuk contoh ini, kami akan menambahkan pengantar singkat ke penulis kami. Anda juga dapat menggunakan Divi AI untuk membantu Anda dengan salinannya di sini.

Ruang elemen -elemen ini menggunakan media ruang Anda sebagai margin antara tajuk dan paragraf.

Kemudian, tambahkan modul tombol di bawah teks Anda. Oleskan warna Anda. Kami menggunakan variabel desain warna utama dan teks tombol.

Tambahkan variabel medium ruang Anda ke bantalan kiri dan kanan dan ruang kecil ke atas dan bawah untuk dimensi tombol. Ini menciptakan tombol yang sebanding dengan teks Anda tanpa menjadi kebesaran. Gunakan ruang Anda variabel besar sebagai margin atas untuk memisahkannya dari paragraf.

Teks tombol harus menggunakan variabel ukuran teks tubuh Anda untuk mempertahankan konsistensi dengan teks paragraf Anda. Kami juga akan menerapkan variabel desain tautan tombol yang kami tambahkan sebelumnya.

Menata kolom yang tepat

Kolom kanan dapat menahan apa saja dari gambar ke bentuk onboarding. Jika menggunakan gambar di kolom yang lebih kecil, tetap sederhana. Foto tim Anda, kantor Anda, atau ilustrasi bersih berfungsi dengan baik. Jangan terlalu memikirkan penempatan gambar: Pusat secara normal di dalam kolom. Untuk contoh ini, kami akan memasukkan variabel desain gambar dari buku terbaru. Dan juga menambahkan bayangan kotak untuk membuatnya menonjol.

Kami juga akan menyesuaikan lebar gambar menjadi sekitar 90% sehingga terlihat lebih selaras.

Untuk situs web konsultasi, kadang -kadang meninggalkan kolom kanan kosong menciptakan tampilan yang lebih bersih dan lebih profesional yang menempatkan fokus penuh pada pesan Anda.

Hasilnya

Berikut ini adalah hasilnya:

Gunakan penskalaan kanvas Divi 5 untuk menguji penampilan pahlawan Anda di berbagai ukuran layar. Fungsi klem () dalam variabel Anda harus menangani respons secara otomatis.

Sementara variabel rasio emas memberikan harmoni proporsional yang sangat baik, Anda mungkin memerlukan penyesuaian kecil berdasarkan konten spesifik Anda. Berita utama mungkin membutuhkan teks yang sedikit lebih kecil. Tagline pendek dan punchy bisa menangani ukuran yang lebih besar. Beberapa gaya merek membutuhkan jarak yang lebih ketat atau lebih longgar.

Keindahan variabel desain adalah bahwa perubahan ini hanya membutuhkan dua klik. Buka Variable Manager, sesuaikan ukuran H1 Anda atau ruang variabel besar, dan saksikan shift berlaku secara instan di seluruh situs Anda.

H1 Anda harus tetap menonjol tetapi dapat dibaca di ponsel (minimum 47px). Jarak Anda seharusnya terasa murah hati tetapi tidak berlebihan pada ukuran layar apa pun. Perpecahan dua kolom memberi Anda tata letak profesional klasik yang bekerja dengan baik untuk bisnis layanan di mana kepercayaan dan kejelasan lebih penting daripada elemen desain yang mencolok.

Mempertahankan rasio emas di seluruh lokasi dengan preset grup opsi

Variabel desain menangani angka, tetapi preset grup opsi memastikan mereka digunakan secara konsisten di seluruh situs.

Bangun bagian pertama Anda menggunakan variabel yang kami buat. Dapatkan tipografi, jarak, dan tata letak yang tepat. Kemudian klik ikon preset di sebelah setiap grup penataan (tipografi, jarak, perbatasan, dll.) Dan simpan sebagai preset grup opsi.

Ini menciptakan blok desain yang dapat digunakan kembali yang sudah mengandung proporsi rasio emas Anda. Alih -alih mulai dari awal, oleskan preset ini setiap kali Anda menambahkan bagian atau modul baru.

Ketika Anda perlu menyesuaikan proporsi di seluruh situs, ubah variabel sekali. Setiap prasetel menggunakannya di seluruh situs Anda secara instan. Tidak ada perburuan melalui halaman individual untuk melakukan perubahan.

Rasio emas Anda tetap konsisten tanpa pekerjaan manual.

Matematika untuk desain yang indah, Divi 5 membuatnya mudah

Perasaan yang mengganggu itu ketika tata letak terlihat "hampir benar" akhirnya masuk akal. Anda tidak pilih -pilih: Otak Anda mengambil hubungan proporsional yang terasa tidak aktif.

Rasio emas memberi Anda titik awal yang andal, tetapi sebagian besar pembangun membuat Anda menghitung setiap saat. Sistem variabel desain Divi 5 mengubahnya sepenuhnya. Hitung proporsi 1.618 Anda sekali, simpan sebagai variabel, lalu klik untuk menerapkannya di mana saja di situs Anda.

Perlu menyesuaikan jarak di lima puluh halaman? Ubah satu variabel alih -alih mengedit setiap halaman secara individual. Ingin tipografi yang konsisten yang mengikuti rasio emas? Atur nilai klem () Anda sekali dan saksikan skala dengan sempurna di semua perangkat.

Matematika bekerja di mana -mana, tetapi Divi 5 sebenarnya membuatnya praktis untuk digunakan secara konsisten.