明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題

布萊恩·加德納,StudioPress 的創始人和創世紀框架的共同創建者,在目錄中有一個新的塊主題,稱為 明亮模式. 該主題具有充滿活力的調色板和雅緻的漸變、14 種設計精美的塊圖案,以及隱藏在自定義塊樣式中的許多有趣的變化。

很難為許多塊主題確定一個利基,因為模式和模板使它們足夠靈活,幾乎可以服務於任何用例。 明亮模式屬於這一類。 它可以很容易地用作企業或個人網站、博客或投資組合。

如果你仔細觀察,你會發現加德納標誌性風格的微妙暗示。 它直截了當,極簡主義,對排版和間距一絲不苟。 顏色明亮但和諧平衡,因此不排除在專業環境中使用明亮模式。

Bright-mode-a-new-block-theme-with-vibrant-colors-patterns-and-custom-block-styles 明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題

Gardner 作為 OG 主題作者之一,擁有獨特的視角,從 WordPress 主題的早期開始,一切才剛剛開始。 他以革命主題幫助啟動了商業主題生態系統,並繼續將同樣的開拓精神帶入塊主題的新世界。

「去年夏天,我讀了 Justin Tadlock 寫的一篇關於塊模式和模式目錄(當時處於測試階段)的文章,」Gardner 說。 「他鏈接到它,我花了幾分鐘點擊。 最後,我看到了一個我認為很酷的圖案並點擊了「複製圖案」按鈕。 我想看看這一切是如何工作的,所以我在我的博客上打開了一篇文章並粘貼了代碼。 瞧,就在那裡。 那一刻,我知道——現代 WordPress 的潛力在我面前閃現。」

Gardner 的新主題利用模式來定義您在 演示. 明亮模式提供了一系列豐富多彩的圖案,用戶可以將它們插入到他們的網站中,包括帶有標題、文本和按鈕的封面圖像、多個推薦、不同的查詢布局以及多個頁腳和頁眉設計。 查看演示 通過示例內容查看它們的全部運行情況。

bright-mode-a-new-block-theme-with-vibrant-colors-patterns-and-custom-block-styles-1 明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題

Gardner 目前正在構建更多圖案以添加到 Bright Mode 的系列中。 他說接下來可能出現的是英雄版塊、特色框、號召性用語、鏈接頁面和投資組合模式。

「我花了幾個月的時間對明亮模式的設計進行迭代,所以我覺得有必要完成兩件事:交付它並為添加更多內容敞開大門,」加德納說。

當您第一次安裝明亮模式並單擊自定義時,它看起來不像演示。 用戶必須插入圖案以使其看起來更接近屏幕截圖。 我向 Gardner 詢問默認情況下在主頁中插入模式以匹配演示,他說這有可能在未來進行更新。

「至於默認插入模式,唯一可能有用的實例是明亮模式主頁,它只是一個歡迎模式,然後是下面的網格循環,」他說。 「當然,隨著我添加更多模式,這可能是更新的一部分。」

此主題的一個獨特功能是標題塊具有一組有趣的塊樣式,可為文本創建各種顏色漸變。

bright-mode-a-new-block-theme-with-vibrant-colors-patterns-and-custom-block-styles-2 明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題

「可訪問性和顏色對比對於這個主題的設計至關重要,以至於我什至創建了 顏色頁面,」加德納說。 鑒於許多新發布的 FSE 主題沒有任何有意的顏色處理方法,他的目標是激勵更多的主題作者將顏色作為考慮因素。 Gardner 已經確定了一組主要、次要和三次顏色,這些顏色在整個主題中用於不同的塊樣式。

Bright-mode-a-new-block-theme-with-vibrant-colors-patterns-and-custom-block-styles-3 明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題

「主要顏色、次要顏色和三次顏色都通過了 WCAG 2.0 AA 級和 WCAG AAA 級對比度測試:普通文本、大文本、圖形對象和用戶界面組件,」Gardner 說。

查看 時尚指南,您可以看到應用於按鈕、引號和社交圖標的顏色。

Bright-mode-a-new-block-theme-with-vibrant-colors-patterns-and-custom-block-styles-4 明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題

明亮模式在報價塊中提供多種不同的樣式選項。 它們可以是純色的,也可以是彩色背景或漸變背景。 沒有背景的引號也可以應用顏色漸變下劃線。 這樣做的好處是可以在每個引用的基礎上進行更改,並且不必對每個塊引用都相同。 用戶可以通過不同的設計來定製他們的報價,這會帶來很多樂趣。 其中一些如下圖所示。 當在整個站點中謹慎使用時,它們非常引人注目。

Bright-mode-a-new-block-theme-with-vibrant-colors-patterns-and-custom-block-styles-5 明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題
bright-mode-a-new-block-theme-with-vibrant-colors-patterns-and-custom-block-styles-6 明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題

Gardner 說他最喜歡這個主題的 Bright Mode 的一個方面是 Cover Block 的使用方式 單頁. 它將特色圖像拉入 Cover 塊,並為陰影和全高選項提供自定義塊樣式。 (後備只是一個帶有標題的黑色標題)。 「我覺得這似乎真的展示了現代 WordPress 的可能性。」加德納說。

Bright-mode-a-new-block-theme-with-vibrant-colors-patterns-and-custom-block-styles-7 明亮模式:具有鮮艷色彩、圖案和自定義塊樣式的新塊主題

在測試了主題之後,我驚訝於在塊樣式中有多少隱藏的寶石可以發現,以及用戶對各個方面有多少創意控制。 我唯一要改變的是確保主頁看起來與演示相似,這樣用戶就可以感覺到他們有一個可靠的起點,而無需尋找模式來重現演示。 Garnder 具有創造美觀模式的天賦,在這種情況下,他計劃的更多樣化的設置(投資組合、號召性用語等)將使明亮模式能夠在更多情況下使用。

雖然很多傳統題材作者還是有一些 抵制阻止主題獲得更多知名度 在主題目錄中,Gardner 有幸在 WP Engine 擔任開發人員倡導者的日常工作,在那裡他與社區互動並幫助用戶過渡到塊編輯器和全站點編輯。

「基本上,跟上 Gutenberg 的發展步伐以及 WordPress 的新功能是我得到報酬的工作,」Gardner 說。 「所以很自然,這使得嘗試主題變得很容易(就像我們用 ) 並回饋資源,例如我們新推出的網站 建築商. 最重要的是,我在晚上和周末的空閑時間都在深入挖掘,看看我能在多大程度上創造性地做事。」

明亮模式是他個人探索塊主題可能的結果。 它是 在 WordPress.org 上免費提供 或通過管理員內的主題安裝屏幕。 在主題的未來更新中,將會有更多的模式、模板和變體。 明亮模式是首批 100 塊主題 在目錄中,WordPress.org 今天通過了一個里程碑。

資源

相關文章