如何使用 WordPress 站點編輯器構建兩列單標題

我喜歡的功能之一 Automattic 的 Archeo 主題 我本周早些時候評論的是它的分屏單個帖子標題。 我喜歡作者用特色圖片塊做一些不同的事情,給用戶一些多樣性。

設計很簡單。 它是一個兩列部分,右側是圖像,左側是帖子標題和日期。

how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor 如何使用 WordPress 站點編輯器構建一個兩列的單個帖子標題分屏帖子標題和圖像。

它提醒我清除計算機上數不清的「想法」文件夾之一。 我知道我去年建造了類似的東西。 我只需要找到它。

經過一番翻找後,我終於偶然發現了它——我真的需要學習如何命名事物以使它們更容易找到:

how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-1 如何使用 WordPress 網站編輯器構建兩列單篇文章標題舊拆分後標題設計理念。

我解決問題的方法不同,我記得為什麼它會被扔進垃圾堆。 它使用媒體和文本塊而不是列。 然後,情況仍然如此,不可能在媒體和文本中使用特色圖像。

Columns 塊是不錯的第二選擇,但它在移動視圖上的堆疊方式不同,第一列始終位於頂部。 使用媒體和文本塊時,圖像優先,無論其在桌面視圖中的水平位置如何。

有一張公開票可以使用帖子的特色圖片 在媒體和文本塊內. 有一張類似的票可以使用它 封面內. 兩者都可以通過解決一個問題來解決,該問題通過允許 使用站點或發布元數據的通用塊.

至少目前,我們必須使用我們擁有的工具。

對於這個條目 用積木建造 系列,我將引導您修改二十二十二的單個帖子模板以創建類似的布局。

有些人很難在沒有發布數據的情況下可視化結果。 如以下屏幕截圖所示,編輯器具有佔位符:

how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-2 如何使用 WordPress 站點編輯器構建兩列單篇文章標題分屏帖子標題的編輯器視圖。

但是,這些佔位符將在前端進行轉換。 我們怎麼知道我們在那裡看到的內容會正確翻譯並變成如下所示?

how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-3 如何使用 WordPress 站點編輯器構建一個兩列的單個帖子標題帶有分屏標題的單個帖子的前端視圖。

即使我有時也會為這種可視化而苦苦掙扎。 用於 Post* 塊的佔位符並沒有為我提供足夠的直接反饋,所以當我構建這樣的布局時,我經常在前端刷新示例帖子。 我想注意這一點,以防它迷失方向,甚至讓其他人失望。 在您完成此操作時,可以在前端保存並檢查您的工作。

旁註:我希望看到一個添加虛擬帖子數據而不是默認佔位符的插件。

第 1 步:選擇單個帖子模板
how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-4 如何使用 WordPress 站點編輯器構建一個兩列的單個帖子標題選擇單個帖子模板。

要對所有單個帖子進行此布局更改,您必須通過管理員中的外觀 > 編輯器轉到站點編輯器。 選擇左上角的 WordPress 徽標/圖標以打開滑出式面板。 從那裡,單擊模板鏈接。 下一個屏幕應顯示可編輯模板的列表。 選擇「單個帖子」。

如果您希望將此作為可選模板,則應從 模板編輯器. 過程類似,但 UI 確實存在一些差異。

第 2 步:調整站點標題(可選)
how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-5 如何使用 WordPress 站點編輯器構建一個兩列的單個帖子標題調整標題行塊的對齊和填充。

二十二十二的標題不適用於我們正在構建的布局類型。 它的底部有大量的填充物,而且它的寬度是有限的。 您將需要進行一些更改以獲得更理想的設計。 請注意,除非您將其保存為單獨的模板部分,否則這將更改整個站點的標題。 這一步是可選的,但最終的結果會更好看。

在編輯器的 Header 區域中,選擇包含 Site Title 和 Navigation 塊的 Row 塊。 從工具欄中,選擇「全寬」對齊選項。 在右側的塊側邊欄面板中,將「填充」選項設置為 2rem 或您偏好的值。

第 3 步:創建列
how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-6 如何使用 WordPress 站點編輯器構建兩列單篇文章標題將帖子標題和帖子特色圖像塊包裝在列中。

因為二十二十二已經將帖子標題和帖子特色圖像塊組合在一起,所以這裡不需要從頭開始。 用滑鼠或鍵盤選擇兩者,單擊工具欄中的「轉換為」按鈕,然後選擇「列」選項。

如果使用具有不同布局的主題,您可以手動添加具有 50/50 設置的 Columns 塊,並在兩列中插入 Post Title 和 Post Featured Image 塊。

第 4 步:設計列
how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-7 如何使用 WordPress 站點編輯器構建兩列單篇文章標題調整列塊的對齊方式、顏色和填充。

我們已經解決了一些無聊的布局問題。 現在,你可以開始為這件東西添加你自己的藝術品牌了。 我為 Columns 塊選擇了黑色背景和白色文本。 但是,請隨意添加您想要的任何顏色。 甚至可以嘗試使用邊界選項來混合它。

現在,回到無聊的布局調整。

要使此布局起作用,您應該對 Columns 塊進行兩項更改。 首先,從工具欄中選擇「全寬」對齊。

然後,將塊側邊欄中的「填充」選項更改為 0。將其歸零允許特色圖像拉伸到邊緣。 如果您想要在它周圍留出一點空間,這不是一個硬性要求。

第 5 步:標題組
how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-8 如何使用 WordPress 站點編輯器構建兩列單篇文章標題將帖子標題塊分組並添加一些填充。

因為我們在上一步中將填充清零,所以帖子標題塊現在將與布局的一側對接。 文字在設計中總是需要空間來呼吸,所以我們需要解決我們為自己創造的這個問題。

有兩種方法可以解決這個問題。 第一種是簡單地在 Post Title 所在的 Column 塊中添加填充。這應該可以正常工作,但 WordPress 不能很好地處理這個問題(它不使用 box-sizing:border-box 用於 Column 塊)。 如果在此處添加填充,它將使左側比右側寬。 不幸的是,這是一個會產生額外工作的小怪癖。

最好的選擇是選擇帖子標題並將其轉換為組。 然後,在側邊欄中找到「填充」控制項並將其更改為 2rem 或您的首選值。

某些主題可能會糾正列填充問題,因此如果使用除二十二十二以外的其他內容,請嘗試第一個選項。

第 6 步:調整特色圖片
how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-9 如何使用 WordPress 站點編輯器構建兩列單篇文章標題從發布精選圖像塊中刪除邊距。

WordPress 和 Twenty Twenty-2 都沒有為 Post Featured Image 塊添加任何默認邊距處理。

包裝元素將回退到瀏覽器的默認值(瀏覽器通常會在頂部和底部添加一些邊距)。

為了保證圖片沒有多餘的間距,在編輯器中選中它,在側邊欄找到「Margin」設置,設置為0。

第 7 步:玩得開心
how-to-build-a-two-column-single-post-header-with-the-wordpress-site-editor-10 如何使用 WordPress 站點編輯器構建一個兩列的單個帖子標題自定義分屏帖子標題。

布局的基礎現在已經到位。 調整填充、邊距和類似設置是您必須征服的一座大山,才能做一些可能的非常酷的事情。 我不想用其餘的設計來限制人們,並且希望每個人都可以在上面進行自己的設計。

我將 Columns 塊上的垂直對齊更改為我的布局的「對齊底部」設置。 在帖子標題上方,我添加了一個帶有帖子作者姓名、帖子日期和帖子類別塊的行。 我還刪除了二十二十二在內容之前添加的分隔符。

如果您按照本教程進行操作,請分享您在評論中所做的自定義。

類別: 用積木建造

像這樣

載入中…

資源

相關文章