掌握設計中的黃金比率

已發表: 2025-06-15

您的設計看起來幾乎是正確的,但是有些感覺崩潰了。間距似乎很尷尬。比例不起作用。您可以調整邊緣和填充物,但仍然存在這種不平衡感。缺失的物品可能是黃金比率。

這個數學原則已經引導了數百年的出色設計。而且,我們的眼睛自然更喜歡這些特定比率。大多數設計師都跳過了黃金比率或誤用它們,因為破裂有多困難。但是,使用Divi 5這樣的頁面構建器,您可以在沒有復雜計算的情況下應用完美的比例。

讓我們了解更多。

目錄
  • 1什麼是黃金比率?
    • 1.1為什麼重要:從舊建築物到網頁設計
  • 2為什麼您的設計感覺“關閉”(以及比率如何解決此問題)
    • 2.1比率有多麼錯誤的破壞用戶體驗
    • 2.2如何計算黃金比例
    • 2.3網站零件的快速規則
    • 2.4看起來對嗎?
  • 3個常見的黃金比率錯誤設計師製造
    • 3.1為什麼許多頁面建築商忽略了黃金比率?
  • 4與Divi 5建立完美的比例
    • 4.1什麼是Divi?
    • 4.2 Divi 5:下一步
    • 4.3如何使用Divi 5使用黃金比率
  • 5數學到美麗的設計,Divi 5使它變得容易

什麼是黃金比率?

黃金比率大約等於

1.618。

它來自哪裡?當您將一條線分為兩個部分時,您會得到這個數字,其中較長的部分除以較短的零件等於整個行除以較長的部分。

一條線中的黃金比率的表示

您可以使用斐波那契序列計算黃金比率。從0和1開始。將它們添加到獲得1。然後將1和1添加到獲得2。請繼續添加最後兩個數字:1、2、3、5、8、13、34、34、55、89、144。當您將任何較大數字除以上一個數字時,您將接近1.618。

斐波那契序列的視覺呈現

這個比例在自然界中無處不在。葵花籽螺旋遵循它。使用這些比例,甲基殼會生長。即使您的臉也可能遵循您的功能之間的黃金比率測量。當某事遵循這個比例時,您的大腦就會意識到它自然令人愉悅。

在幾個對像上的斐波那契序列的可視化表示

圖像提供:盧卡斯和動態王在Unsplash和Milena Carolina dos Santos Mangueira

符號φ(PHI)代表了古希臘人在公元前300年左右發現的獨特數學比率。他們將其稱為“神聖比例”,認為它揭示了特殊的視覺平衡和美麗。

為什麼重要:從舊建築物到網頁設計

希臘人將這種比率用於帕台農神廟,埃及金字塔遵循這些測量值。像Leonardo da Vinci這樣的藝術家多年來研究了這些比例。達芬奇(Da Vinci)繪製了著名的“維特魯維亞人”(Vitruvian Man),顯示了人體中的黃金比例。

Vibonacci序列在Vitruvian Man上的視覺呈現(代表)

代表性圖像

成熟的設計師仍然使用此功能。蘋果的徽標使用黃金比例。以前的Twitter鳥徽標遵循這些測量值。雜誌將重要的內容放在黃金比率的位置,而不是在中心。

Apple和Twitter徽標上斐波那契序列的視覺呈現

圖像提供:寬壁和設計棚屋

科學家研究了為什麼人們喜歡黃金比例的形狀。當人們查看黃金比率矩形時,腦部掃描在愉悅區域顯示更多活動。這是人類固有的,因為這在所有文化和年齡中都發生。

您的大腦處理這些比例的速度比其他比率更快,這意味著更好的用戶體驗。當網站比例距離1.618的比例太遠時,訪問者會感到不舒服,然後離開。

該比率創造了平衡,而沒有完全完美。完美的對稱性在網站上看起來很無聊。黃金比率提供了足夠的不對稱性,可以在保持用戶期望的干淨,專業外觀的同時創造視覺興趣。

為什麼您的設計感覺“偏離”(以及比率如何解決此問題)

您只是花了幾個小時來完善佈局。顏色恰到好處。字體一起工作。但是有些事情仍然感到沮喪。側邊欄似乎太寬了。標頭看起來有些局促。內容區域不會隨剩餘而流動。

這是一個普遍的經歷。許多設計師根據此刻的感覺調整大小。也許您將主要內容設置為70%,將側邊欄設置為30%。這些數字聽起來很合理,但是它們並不總是自然的。

我們的眼睛尋找平衡和熟悉的模式。當比例不太正確時,即使您無法解釋原因,整個設計也會感到尷尬。這可能不是一個大錯誤,只是一個使您感到不安的小細節。

真正的問題通常是比例。當佈局忽略感覺平衡時,您的大腦會注意到。即使您無法將手指放在上面,也會感到有些不適。

比率有多麼錯誤的破壞用戶體驗

不良比例使事情看起來很奇怪。您的大腦期望某些形狀和大小會很好地融合在一起。想像一個英雄部分,佔用您屏幕的一半。它看起來僵硬而尷尬。

現在,考慮一種使用43%或67%的空間。看起來不平衡和混亂。

這可能會傷害您的網站。人們是否相信自己所看到的,很快就會決定。如果頁面看不見,他們可能會認為您的業務是不可信的。凌亂的設計使人們相信您的工作不好。

黃金比率可以幫助解決此問題。不用使您的英雄第70%,而是嘗試61.8%,而下一節可見38.2%。

這些數字不是隨機的。他們遵循一種特殊的圖案,稱為1.618,您在自然界中看到,如花和貝殼中。您的眼睛知道這種模式,當他們看到它時會感到鎮定。

訣竅是零件之間的關係。如果您的標頭尺寸使用黃金比率與您的內容區域匹配,一切都會感覺正確。您的頁腳,菜單和內容開始融合在一起,而不是看起來像為太空而戰。

如何計算黃金比例

您不需要花哨的數學。只需記住62和38即可。這些數字總計100,因此它們作為百分比工作。

通過將62%的空間分為較大的零件,將任何空間拆分到較小的部分。您的網站寬1000像素。使您的主要內容620像素。將側邊欄放置在380像素。完美的黃金比率。

有一個500像素高的部分。您的主要區域有310像素。其餘的收到190像素。

網站零件的快速規則

英雄部分應首先佔用大約60%的人。其餘的將轉到您的主要內容預覽。使卡及其寬的60%高60%。一張300像素範圍的卡變為180像素。

按鈕以相同的方式工作。 100像素的寬度表示高度為60像素。您的文本列為600像素寬。停止向下添加約370像素的內容。然後添加您的下一部分。

看起來對嗎?

從屏幕退後一步。零件現在應該保持平衡。您的眼睛從各個部分順利流動。如果您一直盯著一個地方,那麼比例可能會偏離。

流行的網站在各處使用這些相同的62/38分裂。一旦知道要尋找什麼,您就會開始看到圖案。數學保持隱藏,但是視覺和諧立即脫穎而出。

普通的黃金比率錯誤設計師製造

大多數設計師都知道存在黃金比率並希望使用它。他們通常在這裡掙扎。

最大的錯誤是在沒有系統的情況下隨機應用比率。您為標題使用黃金比率,用於內容網格的三分之二,並且頁腳隨機百分比。選擇一種方法,並在設計中始終如一地使用它。

許多設計師將1.618輪迴到1.5或1.7等簡易數字。您的大腦注意到62%至60%之間的差異,而較小的差距會影響您努力創建的視覺和諧。

另一個常見的問題是比率元素不匹配。例如,您可能會創建一個比例完美的英雄部分,但添加了使用完全不同的間距比的圖像庫。視覺斷開連接破壞了您建立的流程。

一些設計師將黃金比率應用於文本,而無需考慮閱讀舒適度。遵循完美數學比例的線長度可能會超過舒適的閱讀寬度。可讀性比數學精度優先。

網頁設計人員也經常忽略響應能力。看起來平衡的桌面比例會在較小的屏幕上感到局促或伸展。黃金比率需要跨設備尺寸的不同應用。

許多頁面構建者默認為忽略比例和諧的任意佈局。標準的三列網格使用33/33/33分裂而不是更自然的比率。

最有限的錯誤是在初次嘗試後放棄該方法。當您在佈局結構中系統地應用時,黃金比率效果最好,而不是孤立的調整。

為什麼許多頁面建築商忽略了黃金比率?

頁面構建者圍繞程序員思考而成長。開發人員喜歡乾淨分裂的數字。十二列,四個部分,五十張分裂。

許多建築商公司真正相信用戶應該控制自己的設計選擇。他們不想將特定的審美理論推向可能喜歡不同方法的人。一些設計師討厭黃金比率,更喜歡其他比例係統。當創造力在選項上蓬勃發展時,為什麼要強迫一個數學原則?

真正的技術問題比設計理念更混亂。黃金比例會產生奇怪的小數,從而破壞了較舊的設備。嘗試構建一個響應式網格,其中一列寬度為61.8%。清潔百分比在每個設備上都可以預見的是25%或33%。

頁面建設者的優先級

大多數頁面構建器公司都是作為技術解決方案而不是設計工具開始的。它們圍繞著可靠的系統,邏輯的佈局建立。

用戶很少抱怨比例。他們抱怨移動佈局破裂和加載時間緩慢。公司優先級遵循實際用戶反饋,而不是設計理論。

一些建築商擔心壓倒性的初學者。新用戶已經面臨數十個佈局選擇,並且增加數學考慮可能會嚇到那些只想要清潔和專業的人。

用Divi 5建立完美的比例

在我們深入研究Divi 5如何將黃金比率設計從數學頭痛轉變為單點點擊簡單性之前,讓我們簡短地繞行,了解是什麼使Divi成為想要專業成績的WordPress Designers首選而沒有編碼噩夢。

什麼是Divi?

Divi是WordPress頁面構建器,專為關心視覺設計的人們而不損害功能而設計。

Divi新主頁的屏幕截圖

您可以將超過200個模塊拖放,更改文本並選擇新的顏色。一切都發生在您的頁面上,因此您可以準確地看到訪問者會看到的。

該主題帶有2000多個預製佈局。這些不是基本模板,而是針對餐館,攝影師,顧問和其他數十家業務的完整設計。選擇適合您的風格並從那裡進行自定義的一種。

Divi一些可用佈局的屏幕截圖

如果您在線銷售產品,Divi包括20多個專門為商店製作的模塊。您的產品頁面看起來很專業,實際上可以幫助將瀏覽器轉換為買家。

Divi的一些WooCommerce模塊的屏幕截圖

建立沒有頭痛的網站

主題構建器使您可以設計網站的每個部分。您可以創建與您的品牌相匹配的自定義標題,建立獨特的博客佈局,甚至使您的404頁看起來很棒。

使用Divi主題構建器可以製作的內容的屏幕截圖

Divi AI將AI的便利性帶入您的設計畫布中。您可以生成文本,

圖像,

代碼,

和整個頁面段使用Divi AI。

您甚至可以通過描述所需的內容來編輯現有照片。

Divi快速站點解決了最大的問題網站構建者面對的:盯著空白頁面而不知道從哪裡開始。您可以從我們的設計團隊創建的專業網站模板中選擇專業的入門網站,並具有您在其他任何地方找不到的獨特圖像和藝術品。

或者讓Divi AI根據您的業務描述構建自定義佈局。

這個AI生成的網站不僅僅是線框。根據您的描述,它將包含相關標題,副本和圖像。您可以要求Divi AI生成所有圖像,使用Unsplash或使用佔位符,以便您自己替換它們。

您甚至可以預選字體和顏色,並讓AI與它們一起運行。當然,這些網站仍然像普通網站一樣可以編輯,因此您可以根據自己的口味來調整所需的內容。

得到Divi

Divi 5:下一步

構建網站應該感覺自然,就像在紙上繪製想法一樣。您有一個遠見,您的工具應該有助於使它栩栩如生,而不會阻礙。這正是促使我們完全從頭開始重建Divi的原因。

Divi 5今天可作為Alpha提供,並準備在新網站上使用,代表了多年聆聽創建網站時需要的內容。它不是鐘聲和哨子或沒有人真正使用的功能,而是真正的改進,可以使您的工作更快,更有趣。我們將您喜歡的一切都保留在Divi上,並將其提升到一個新的水平。

我們使用新的Web工具從頭開始重建所有內容。現在頁面加載速度更快,並且控件效果更好。您可以在整個網站上保持相同的設計,而無需額外的工作。

有什麼改善?什麼是新的?

  • 完整的框架重建擺脫了舊的短碼。一切都以新的基於塊的代碼運行,該代碼加載速度更快,效果更好。
  • 一單擊的編輯使您可以單擊頁面的任何部分以立即進行編輯。不再需要尋找小圖標或挖掘菜單。
  • 可自定義的斷點可為您提供七個屏幕尺寸,而不是三個屏幕尺寸。您可以更改每個人以滿足您的確切需求。
  • 高級單元支持使您可以使用calc(),clamp(),min(),max()和構建器中的所有新CSS單元。
  • 設計變量可讓您在一個地方節省顏色,字體,尺寸,圖像,文本和鏈接。更改一次,它們將在您的網站上到處更新。
  • 選項組預設可讓您保存和重用樣式的邊界,字體,陰影和間距。這些在您網站的不同部分之間起作用。
  • 嵌套行讓您將行放入其他行中。您可以在沒有特殊部分的情況下構建複雜的佈局。
  • 模塊組將幾個模塊組合成一個單元。這使得複雜的佈局更容易管理。您還可以製作自定義模塊。
  • 多面板工作區可讓您將面板放置在想要的位置。您可以同時使用幾個設置。
  • 當您複製,粘貼和重置樣式,內容和不同部分之間的預設時,屬性管理為您提供精確的控制。
  • 輕/暗模式可讓您在工作時選擇更容易在眼睛上的主題。
  • 帆布縮放使您可以調整工作區域大小,以查看您的網站在不同屏幕上的外觀。無需切換預覽模式。
  • 績效改進會使您在建造時更快地加載頁面,更快地顯示並感覺更順暢。

今天嘗試Divi 5

Divi 5現在可用於新的網站項目。我們從頭開始重建它,以使您的工作流程更快,更容易。下載公共alpha並在下一個新網站上嘗試以查看改進。對於所有新舊成員來說都是免費的。

我們建議僅在改善現有Divi 4個站點的遷移系統時僅用於新站點。如果您開始新鮮,現在是嘗試更新的界面和更好性能的好時機。

下載Divi 5了解有關Divi 5的更多信息

如何使用Divi 5使用黃金比率

足夠說。讓我們深入研究,看看如何使用Divi 5在您的網站中實現黃金比例,更好的是,它們如何被標準化,因此每次創建新的部分或頁面時,您都不必在數學上爭奪數學。

設計變量可讓您在網站上保存和重複使用值。它們構成了您網站的視覺標識DNA。 Divi 5有六種類型:顏色,字體,圖像,文本字符串,鏈接和數字。每個人都有特定的角色:

  • 顏色變量具有品牌顏色,背景,文本顏色和其他範圍內使用的色調。
  • 字體變量使字體在標題,文本和特殊元素方面保持一致。
  • 圖像變量存儲常見圖形,例如徽標或背景模式,以便於使用。
  • 文本字符串變量保存可重複使用的內容,例如口號,聯繫人和法律說明。
  • 鏈接變量可讓您經常使用的URL,例如社交媒體或關鍵頁面。
  • 數字變量在像素,百分比,EMS,REMS和視口單元中處理測量值,並使用CCSS函數(例如Calc(),以將比例保持在任何屏幕上。

設置黃金比率變量

打開Divi 5儀表板,並在左側欄中找到變量管理器圖標。

單擊它打開變量面板。添加您的顏色,字體,圖像,文本和鏈接變量。

然後,轉到“數字”選項卡以創建黃金比率變量。首先添加這些數字變量:

版式變量
  • H1尺寸:夾具(47px,4.7VW,76px)
    • 最低47px:即使在最小的手機(320px寬)上,您的H1也足夠大以建立層次結構。任何較小的東西都會失去影響作為主要標題。
    • 4.7VW中間值:此視口寬度單元使文本比例平滑。在1000px屏幕寬度,4.7VW = 47px。在1600px時,它增長到75px
    • 最大76px:我們通過將18px×1.618乘以三次(18×1.618×1.618×1.618 = 76.244px)來獲得此功能
  • H2尺寸:夾具(29px,3.5VW,47px)
    • 最低29px:在保持可讀性的同時,在移動設備上保持H2小於H1
    • 3.5VW縮放:比H1比例縮放比例小,以維持層次結構
    • 最大47px:正好76px÷1.618 = 47.122px
  • H3尺寸:夾具(18px,2.9VW,29px)
    • 最低18px:匹配手機上的身體文本大小以節省垂直空間
    • 2.9VW縮放:比大標題更輕輕地生長
    • 最大29px:精確47px÷1.618 = 29.124px
  • H4尺寸:夾具(14px,2.2VW,22.4px):繼續除以〜29px÷1.618 = 17.994px,但我們將最低設置為22.4px,以確保可讀性
  • H5尺寸:夾具(13px,1.8VW,18px):我們的基本字體尺寸18px非常適合此處的規模
  • 身體文本大小:夾具(16px,1.6VW,18px):所有計算均源自

夾具()函數使文本在屏幕之間平穩調整。它需要三個值:手機的最小尺寸,縮放縮放的中間值,最大的桌面值。我們在中間使用視口寬度(VW),因為它會隨著屏幕變大,文本會逐漸生長。尺寸之間沒有突然的跳躍。

在桌面上,我們堅持完美的黃金比率。移動屏幕需要少量調整以保持文本可讀。純計算可能建議一些標題為11px,但這會使您的訪客眼睛震驚。設置諸如14px之類的實用最低限度可以保留黃金比率的視覺和諧,同時確保每個人都可以舒適地閱讀您的內容。比例關係保持完整;他們只是略微移動以獲得可讀性。

間距變量

每個值將上一個乘以1.618:

  • 太空XS:夾具(8PX,1VW,10PX)
    • 為什麼10px基礎:這是移動設備上最小的舒適觸摸目標填充。行業智慧建議四方面的最低觸摸目標和10px填充,並將內容帶到您那裡。小於10px使元素感到局促。
    • 為什麼最小8px:在360px以下的手機上,即使是10px也會感覺太寬敞。我們下降到8px,以最大程度地提高內容空間,同時保持元素可區分。
    • 為什麼1VW:按比例地增長間距,並在1000px屏幕寬度時給您10px
  • 空間小:夾具(13px,1.6VW,16.18px):非常適合按鈕填充和表單場間距。
  • 空間介質:夾具(21px,2.6VW,26.18px):非常適合在相關內容塊之間間距。
  • 大空間:夾具(34px,4.2VW,42.36px):在主要部分之間在屏幕尺寸縮放時在主要部分之間創建呼吸空間。
  • Space XL:夾具(55px,6.8VW,68.54px):非常適合英雄部分和主要特徵塊上的頂部/底部填充。英雄部分即使在移動設備上也需要大量填充。低於50px,英雄內容在邊緣局限於局限。
  • Space XXL:夾具(89px,11VW,110.89px):很少使用。也許對於需要戲劇性呼吸室的特殊部分。

在Divi設計變量中添加間距變量

佈局變量
  • 主柱寬度:61.803%
    • 我們如何獲得它:將1除以1.618 = 0.61803(或61.803%)
    • 在任何兩列佈局中,將其用於您的主要內容區域
  • 次級列寬度:38.197%
    • 在同一行中用於側邊欄列
    • 來自100% - 61.803%= 38.197%
  • 容器最大寬度:1165px
    • 當線路超過72個字符時,文本很難閱讀,
      • 並假設10px是最小文本大小,最佳讀取寬度(720px)×黃金比率(1.618)= 1165px
    • 申請您​​的主體或持有您內容的行
  • 黃金高度比率:計算(100% / 1.618)
    • 這可以用作模塊/模塊組高度的值,例如圖像,呼籲行動框,英雄部分,團隊成員卡等。
    • 這將創建矩形而不是正方形或隨機形狀。您的大腦發現這些比例自然具有吸引力,就像一張完美的照片一樣。
    • 我們如何得到這個?黃金比例說,如果寬度= 1.618,則高度= 1。因此,如果寬度= 100%,則高度= 100%÷1.618 = 61.8%。此公式會自動執行數學。

在Divi設計變量中添加佈局變量

將這些變量保存在Divi 5的變量管理器中。然後,通過單擊寬度,高度或最大寬度字段旁邊的變量圖標來使用它們。初始設置後,不需要數學。同樣,這些變量標籤都沒有固定。您可以將標籤換成有意義的東西。

創建具有黃金比率的英雄部分

讓我們使用我們剛剛創建的黃金比率變量來啟發一本書的登陸頁面,為書的著陸頁構建一個英雄部分。那是有趣的部分。您可以採用那些經過精心計算的變量,並觀察它們如何影響真正的英雄部分。

將用於創建具有黃金比例的英雄部分的靈感

首先在Divi 5的Visual Builder中創建一個新部分。使用黃金高度比變量設置高度。這使您的大腦很自然地識別出令人愉悅的。

將您的空間XL變量添加到頂部和底部填充。這為移動設備提供了足夠的呼吸空間,同時在桌面上適當擴展。

對於本節背景,您使用設計變量有兩個主要選項:

選項1:純色背景

  • 單擊背景顏色字段,然後從下拉列表中選擇主顏色變量。這使您的英雄部分符合您的品牌標識。如果您的主要顏色太輕而無法進行文本對比,請改用輔助顏色變量。確保您選擇的任何顏色都提供足夠的對比度,以使您的文本保持可讀性。跟上我們的靈感,我們將以72%的停止和90°的速度添加背景和原色的梯度。

添加規定的背景梯度

選項2:圖像背景

  • 通過背景圖像字段應用您的英雄圖像變量(如果創建一個)。單擊背景圖像設置旁邊的變量圖標,然後選擇保存的圖像變量。使用背景圖像時,為文本可讀性添加覆蓋層。將覆蓋顏色設置為主顏色變量,並將不透明度調整為40-60%。這使圖像變得足夠變暗,使白色文本清晰易讀。
  • 如果輔助變量更好地對比您選擇的背景圖像,則也可以將輔助顏色變量用於覆蓋層。
創建兩列佈局

添加一個帶有兩個列的行。

添加一排帶有兩個列

將左列寬度設置為主列寬度變量,將右列設置為輔助列寬度變量。我們還將打開“均衡列高度”選項。然後,將應用容器最大寬度變量,以使內容可在較大的屏幕上讀取。這樣可以防止文本線伸展太寬,尤其是在較寬的屏幕上。

我們還將啟用“使用自定義的排水溝寬度”並將其設置為1。這將幫助我們使用模塊之間的黃金比率間距。

應用定制的天溝寬度

將您的空間介質變量應用於第一列的右側和第二列的左填充,以在列之間添加呼吸空間。這會在列之間產生足夠的分離,而不會使它們感到斷開。

較大的列將包含您的主要消息和通話行動。較小的列可以包含一個簡單的英雄圖像或保持空的,以進行乾淨,以文字為中心的設計。

設置流動的排版

在主列中,添加兩個標題模塊。

將第一個設置為H5並應用H5尺寸變量。在此示例中,該文本模塊帶有“最暢銷的作者”內容。我們還將為此文本使用輔助顏色,並應用大寫字體樣式。我們還將將身體字體應用到文本上,以使其具有獨特性並將其重量增加到粗體。

將第二個設置為H1並應用您的H1大小變量。這成為您的主要標題。在此示例中,我們將使用作者的名稱,該名稱已添加為設計變量。如果您缺乏想法,則可以使用Divi AI來幫助您使用出色的文本。

在此下方,為您的支持段落添加文本模塊。應用您的身體文本大小變量和顏色變量。將其保留為2-3個句子,以解釋您的核心價值主張。在此示例中,我們將為作者添加簡短的介紹。您也可以使用Divi AI來幫助您在此處使用該副本。

這些元素使用您的空間介質作為標題和段落之間的邊距。

將空間中等黃金比率應用於文本模塊

然後,在文本下方添加一個按鈕模塊。應用您的顏色。我們使用的是主要顏色設計變量和按鈕文本。

在佈局中添加一個按鈕模塊

將您的空間介質變量添加到左右填充物,並將空間添加到頂部和底部以進行按鈕尺寸。這會創建一個與您的文本成正比的按鈕,而不會超大。使用您的空間大變量作為頂部邊距,將其與段落分開。

將黃金比率和邊距添加到按鈕模塊

按鈕文本應使用您的身體文本大小變量,以保持與段落文本的一致性。我們還將應用我們之前添加的按鈕鏈接設計變量。

造型正確的專欄

右列可以容納從圖像到入門形式的任何東西。如果在較小的列中使用圖像,請保持簡單。您的團隊,辦公室或乾淨插圖的照片效果很好。不要過度思考圖像放置:中心通常在列內。對於此示例,我們將包括最近一本書的圖像設計變量。並添加一個盒子陰影以使其脫穎而出。

我們還將調整圖像的寬度約為90%,因此看起來更加對齊。

將寬度應用於圖像以使其更加對齊

對於諮詢網站,有時將正確的專欄空排出會產生更清潔,更專業的外觀,從而完全專注於您的消息。

結果

以下結果是:

創建具有黃金比率的英雄部分的最終結果

使用Divi 5的帆布縮放來測試您在不同屏幕尺寸的英雄外觀。變量中的夾具()函數應自動處理響應能力。

儘管黃金比例變量可提供出色的比例和諧,但您可能需要根據特定內容進行少量調整。長標題可能需要稍小的文字。簡短,有力的標語可以處理更大的尺寸。一些品牌風格要求更緊密或更鬆散的間距。

設計變量的優點在於,這些更改僅需兩次點擊。打開變量管理器,調整您的H1大小或空間大變量,然後觀察偏移立即在整個網站上應用。

您的H1應該保持突出,但在移動設備上可讀(最低47px)。在任何屏幕尺寸上,您的間距應感到寬敞,但不會過分。兩列拆分為您提供了經典的專業佈局,它對服務業務的效果很好,在那裡,信任和清晰度比華麗的設計元素重要。

保持範圍內的黃金比率,並具有期權組預設

設計變量處理數字,但是選項組預設確保它們在整個站點中持續使用。

使用我們創建的變量構建第一部分。獲取版式,間距和佈局完全正確。然後單擊每個樣式組旁邊的預設圖標(排版,間距,邊框等),然後將它們保存為選項組預設。

如何創建黃金比率選項組預設

這會創建可重複使用的設計塊,這些設計塊已經包含了您的黃金比例。每次添加新的部分或模塊時,都不會從頭開始,而是將這些預設應用。

當您需要調整範圍內的比例時,請更改一次變量。使用它的每個預設都會立即在整個網站上進行更新。沒有狩獵單個頁面進行更改。

沒有手動工作,您的黃金比率保持一致。

數學到美麗的設計,Divi 5使它變得容易

當佈局看起來“幾乎正確”時,這種na的感覺終於有意義。您並不是很挑剔:您的大腦正在恢復感覺的比例關係。

黃金比率為您提供了一個可靠的起點,但是大多數建築商都可以使您每次進行數學。 Divi 5的設計變量系統完全更改。一次計算您的1.618比例,將它們保存為變量,然後單擊網站上的任何地方應用它們。

需要調整五十頁的間距嗎?更改一個變量,而不是單獨編輯每個頁面。是否需要遵循黃金比率的一致版式?將夾具()值設置一次,並觀察它們在所有設備中完美擴展。

數學到處都可以使用,但是Divi 5實際上使使用始終如一地使用是實際的。

下載Divi 5了解有關Divi 5的更多信息