如何創建自定義 Elementor 博客帖子模板(簡易指南)
已發表: 2022-03-10您是否正在尋找有關如何創建自定義 Elementor 博客文章模板的最簡單教程?
博客是提高產品知名度的最流行和最有效的方式之一。 但是,如果您想從內容營銷中獲得最大收益,則需要確保您的博客頁面具有迷人的外觀以及正確的信息。
為了使您的博客文章吸引人,您需要創建自己的自定義博客模板。 您可以使用 Elementor 實現出色的博客文章模板來吸引您的受眾。 您可以從頭開始創建 Elementor 自定義博客頁面,也可以使用預構建的模板構建一個。
在本文中,您將學習如何以最簡單的方式使用兩種方法創建 Elementor 博客文章模板。 所以,繼續閱讀……
創建自定義 Elementor 博客文章模板需要安裝的插件
要使用 Elementor 頁面構建器輕鬆地在 WordPress 中創建博客文章,您將需要兩者
- 元素(免費)
- 和 Elementor Pro。

如何從頭開始創建 Elementor 自定義博客頁面模板
Elementor Pro 提供了從零開始創建令人驚嘆的自定義博客文章模板所需的所有必要小部件。 只需按照以下步驟創建您的單個 Elementor 帖子模板:
第 1 步:創建新的單一博客模板
首先,您需要創建一個博客模板。 為此轉到WordPress儀表板,然後導航到模板⇒添加新

並單擊添加新按鈕。 新窗口打開後,從下拉列表中選擇Single Post作為模板類型,提供您選擇的名稱,然後單擊Create Template 。

現在您應該看到預製的佈局(稍後將介紹如何使用它)。 由於我們要從頭開始構建博客模板,請單擊右上角的十字按鈕關閉此窗口。
第 2 步:為博客文章模板選擇結構/佈局
現在,您需要為您的博客模板選擇一個結構,建議不要使用頁面的整個寬度,因為用戶很難閱讀它。 要為您的 Elementor 自定義博客頁面模板選擇結構,請單擊 + 圖標並選擇您喜歡的結構,然後單擊結構將其插入。

注意:要查看使用您正在創建的模板的博客的外觀,請從預覽動態內容選項中選擇現有博客。 要進行設置,請單擊左下角的設置選項。
然後,從“預覽動態內容”下拉列表中選擇“發布” ,在下面的第二個下拉列表中輸入您要選擇的博客名稱。 最後,點擊Apply & Preview 。

第 3 步:添加特色圖像小部件並自定義圖像樣式選項
獲得佈局後,在左側編輯器欄中,搜索“特色圖像”小部件。 找到小部件後,將其拖放到所需位置。

加載小部件後,自定義圖像大小、對齊方式、標題、鏈接和燈箱選項。

要更改樣式設置,請導航到樣式選項卡。 在這裡您可以更改圖像的高度、寬度、不透明度、邊框、半徑等。

您還可以查看我們關於如何使用 Elementor 構建超級菜單的博客
第 4 步:添加和自定義 Elementor Post Info 小部件
在特徵圖像之後,您應該顯示可以使用Post Info 小部件執行的帖子相關信息。 就像特色圖片一樣,首先搜索帖子信息小部件,然後只需將其拖放到特色圖片小部件下方。

在 Elementor Editor 內容選項卡上,您可以將佈局設置為默認或內聯。 您可以編輯/刪除作者、日期、時間和評論選項。 您還可以通過單擊 + 添加新按鈕將自定義字段添加到發布信息小部件。

再次,轉到樣式選項卡以自定義樣式設置,例如列表之間的間距、對齊方式、圖標顏色和大小、文本顏色和排版。

第 5 步:拖放帖子標題小部件並自定義
現在,搜索帖子標題小部件並將其拖放到帖子信息小部件下方。

您可以自定義帖子標題標籤的大小、HTML 標籤和對齊方式。

在樣式選項卡上,您將找到自定義文本顏色、版式、文本筆觸、文本陰影和混合模式的選項。

第 6 步:添加和自定義發佈內容小部件
現在,拖放帖子內容小部件。 ElementsKit 的帖子內容小部件代表博客帖子的主體(主要內容)。

第 7 步:拖放社交圖標小部件以添加社交分享選項
在帖子內容之後,通過拖放添加社交圖標小部件。 社交圖標將提供在不同社交平台上分享您的博客的選項。
您可以根據需要添加/刪除任意數量的社交圖標。 此外,您可以自定義圖標的形狀、它們應顯示的列數以及對齊方式。 您還可以為每個社交圖標自定義社交平台圖標、顏色和鏈接。

導航到樣式選項卡以更改圖標大小、顏色、填充、間距、邊框類型。

第 8 步:添加作者框小部件並自定義小部件的設置
搜索 Author Box ,然後將小部件拖放到社交圖標之後。 如果需要,您還可以從源下拉列表中添加自定義作者。 您可以選擇如何/隱藏個人資料圖片、顯示名稱和傳記。 您還可以自定義其他設置,例如HTML 標籤、鏈接、佈局、對齊。


導航到樣式選項卡以自定義選項,例如圖像大小、邊框、顏色和作者姓名、傳記等的排版。

第 9 步:為分頁選項添加帖子導航小部件
Elementor Post Navigation 小部件將為讀者提供導航選項,以便他們可以切換到不同的博客。 添加帖子導航小部件,例如在編輯器上搜索之前,然後在作者框小部件之後拖放。
您可以顯示或隱藏分頁標籤或箭頭符號。 您可以獲得大約8 個以上的箭頭設計選項。 您還可以自定義上一級和下一級文本。

您可以更改普通視圖和懸停視圖的標籤、標題、箭頭和邊框的顏色和版式。

第 10 步:拖放帖子小部件以顯示相關帖子
為了展示相關帖子,我們將使用Elementor Posts 小部件。 因此,在帖子導航小部件之後拖放帖子小部件。 使用此小部件,您可以更改皮膚顏色、設置列數、每頁帖子數、圖像位置以及更多設置。 您還可以更改佈局、框、圖像和內容的不同樣式。

第 11 步:添加帖子評論小部件
要為您的用戶提供對您的帖子發表評論的選項,您需要添加帖子評論小部件。 搜索帖子評論小部件並將其拖放到帖子小部件下方。


第 12 步:更新並查看 Elementor 自定義博客頁面模板
現在所有的設計都完成了,點擊更新按鈕。 如果顯示發佈設置窗口,請單擊保存並關閉。
這是我們剛剛創建的自定義 Elementor 博客文章模板的預覽。

如果您發現上述方法太耗時,您可以選擇下面提到的方法,您不必從頭開始構建和設計每個部分。
您還可以查看我們的博客,了解如何通過 5 個簡單步驟在 Elementor 中添加多步驟表單
如何使用預製的 Elementor 模板創建單個帖子頁面
如果您打算為 Elementor 自定義博客頁面使用預構建的模板,只需 3 個步驟即可完成。 讓我們檢查一下:
第 1 步:從儀表板創建新的單個博客文章模板
與第一種方法一樣,您需要創建一個新的單個博客模板。 有關如何創建新模板的更多詳細信息,請向上滾動一點並查看第一種方法的第一步(如何從頭開始構建博客模板)。

第 2 步:選擇預製的 Elementor Single Post 模板
單擊“創建模板”後,您將看到包含許多自定義單個帖子模板的 Elementor 庫窗口。 在這裡,您可以選擇您喜歡的任何單個帖子塊。 將鼠標懸停在您喜歡的模板上,單擊插入。

第 3 步:選擇預製的 Elementor Single Post 模板
模板加載後,單擊發布按鈕以保存所有新的博客模板。
這是使用預製的單個帖子模板使用 Elementor 博客帖子的博客帖子的最終外觀。

如何使用 ElementsKit 創建 Elementor 最新帖子頁面
現在您已經有了一個有吸引力的單篇文章模板,是時候製作一個自定義博客列表頁面了,以便您的所有博客都以一種令人愉悅且用戶友好的方式顯示。 讓我們看看如何使用 ElementsKit 創建自定義 Elementor 最新帖子。
第 1 步:安裝和激活 ElementsKit
要創建令人驚嘆的博客列表頁面以及 Elementor 頁面構建器,您將需要 ElementsKit。 ElementsKit 是 Elementor 的一體化插件,具有 85 多個小部件和模塊,使 Web 開發比以往更容易。

第 2 步:啟用帖子列表相關小部件
激活後,您需要打開帖子相關小部件以構建帖子列表頁面。 ElementsKit 提供了許多小部件來顯示您的博客列表,其中包括博客帖子、帖子網格、帖子列表、帖子選項卡小部件等。您可以啟用要使用的小部件。

查看如何使用 ElementsKit 創建漂亮的 Elementor 一頁滾動導航
第 3 步:添加小部件並自定義
現在,轉到博客列表頁面,搜索小部件並簡單地拖放。 加載小部件後,您可以自定義相關設置以個性化您的博客列表頁面。 讓我們看看帶有一些 ElementsKit 小部件及其自定義選項的博客列表頁面會是什麼樣子。
博客文章:
使用博客文章小部件,您可以以塊格式、帶有拇指的網格和不帶拇指設計的網格顯示您的博客。 您還可以設置每行顯示的帖子數量、啟用/禁用分頁以及更多選項。 有關更多詳細信息,請查看我們的博客,了解如何顯示最近的博客文章。

後網格:
使用 post grid 插件,您可以自定義要在博客列表中顯示的類別博客。 您還可以選擇要顯示的帖子數以及每行應具有的列號。 有關更多詳細信息,請查看我們的文檔。

發布標籤小部件
使用Post Tab小部件,您可以獲得所有自定義選項,例如 Post Grid 以及額外的類別選項卡。 使用此選項,用戶只需將鼠標懸停在任何類別選項卡上,即可僅查看該特定類別的博客。

一旦您選擇了您的小部件並根據您的選擇進行自定義,請單擊更新按鈕進行發布。 現在你應該有一個頁面,以誘人的方式顯示最近的 Elementor 最新帖子。

最後的話
我們已盡力為您提供有關如何以兩種方式創建自定義 Elementor 博客文章模板的簡單教程。 我們希望您發現該博客有助於構建您的自定義 Elementor 博客模板。 您可以按照這些步驟並根據您的選擇更改佈局和設計。
並且不要忘記使用 ElementsKit 小部件為您的博客列表頁面提供非凡的觸感。 ElementsKit 是 Elementor 的完美補充,請抽出時間查看該插件提供的所有令人驚嘆的小部件。