如何創建自定義 Elementor 博客帖子模板(簡易指南)

已發表: 2022-03-10

您是否正在尋找有關如何創建自定義 Elementor 博客文章模板的最簡單教程?

博客是提高產品知名度的最流行和最有效的方式之一。 但是,如果您想從內容營銷中獲得最大收益,則需要確保您的博客頁面具有迷人的外觀以及正確的信息。

為了使您的博客文章吸引人,您需要創建自己的自定義博客模板。 您可以使用 Elementor 實現出色的博客文章模板來吸引您的受眾。 您可以從頭開始創建 Elementor 自定義博客頁面,也可以使用預構建的模板構建一個。

在本文中,您將學習如何以最簡單的方式使用兩種方法創建 Elementor 博客文章模板。 所以,繼續閱讀……

內容隱藏
創建自定義 Elementor 博客文章模板需要安裝的插件
如何從頭開始創建 Elementor 自定義博客頁面模板
如何使用預製的 Elementor 模板創建單個帖子頁面
如何使用 ElementsKit 創建 Elementor 最新帖子頁面
最後的話

創建自定義 Elementor 博客文章模板需要安裝的插件

要使用 Elementor 頁面構建器輕鬆地在 WordPress 中創建博客文章,您將需要兩者

  • 元素(免費)
  • 和 Elementor Pro。
元素套件 gif

如何從頭開始創建 Elementor 自定義博客頁面模板

Elementor Pro 提供了從零開始創建令人驚嘆的自定義博客文章模板所需的所有必要小部件。 只需按照以下步驟創建您的單個 Elementor 帖子模板:

第 1 步:創建新的單一博客模板

首先,您需要創建一個博客模板。 為此轉到WordPress儀表板,然後導航到模板⇒添加新

如何在 Elementor 中添加新模板

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

創建 Elementor 博客帖子模板

現在您應該看到預製的佈局(稍後將介紹如何使用它)。 由於我們要從頭開始構建博客模板,請單擊右上角的十字按鈕關閉此窗口。

第 2 步:為博客文章模板選擇結構/佈局

現在,您需要為您的博客模板選擇一個結構,建議不要使用頁面的整個寬度,因為用戶很難閱讀它。 要為您的 Elementor 自定義博客頁面模板選擇結構,請單擊 + 圖標並選擇您喜歡的結構,然後單擊結構將其插入。

為自定義 Elementor 博客文章選擇結構

注意:要查看使用您正在創建的模板的博客的外觀,請從預覽動態內容選項中選擇現有博客。 要進行設置,請單擊左下角的設置選項。

然後,從“預覽動態內容”下拉列表中選擇“發布” ,在下面的第二個下拉列表中輸入您要選擇的博客名稱。 最後,點擊Apply & Preview

將博客設置為查看預覽,同時創建自定義 Elementor 博客文章

第 3 步:添加特色圖像小部件並自定義圖像樣式選項

獲得佈局後,在左側編輯器欄中,搜索“特色圖像”小部件。 找到小部件後,將其拖放到所需位置。

拖放元素或博客文章的特色圖片

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

Elementor 特色圖片小部件的內容設置

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

Elementor 功能圖像小部件的樣式設置

您還可以查看我們關於如何使用 Elementor 構建超級菜單的博客

第 4 步:添加和自定義 Elementor Post Info 小部件

在特徵圖像之後,您應該顯示可以使用Post Info 小部件執行的帖子相關信息。 就像特色圖片一樣,首先搜索帖子信息小部件,然後只需將其拖放到特色圖片小部件下方。

拖放帖子信息

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

發布信息 Elementor 小部件設置

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

發布信息 Elementor 小部件樣式設置

第 5 步:拖放帖子標題小部件並自定義

現在,搜索帖子標題小部件並將其拖放到帖子信息小部件下方。

拖放帖子標題

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

帖子標題內容設置自定義Elementor博客文章

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

elementor 帖子標題樣式設置

第 6 步:添加和自定義發佈內容小部件

現在,拖放帖子內容小部件。 ElementsKit 的帖子內容小部件代表博客帖子的主體(主要內容)。

拖放帖子內容

第 7 步:拖放社交圖標小部件以添加社交分享選項

在帖子內容之後,通過拖放添加社交圖標小部件。 社交圖標將提供在不同社交平台上分享您的博客的選項。

您可以根據需要添加/刪除任意數量的社交圖標。 此外,您可以自定義圖標的形狀、它們應顯示的列數以及對齊方式。 您還可以為每個社交圖標自定義社交平台圖標、顏色和鏈接。

Elementor 社交圖標小部件設置

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

Elementor Social Icons 設置樣式設置

第 8 步:添加作者框小部件並自定義小部件的設置

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

Elementor作者框小部件

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

Elementor 作者框小部件樣式設置

第 9 步:為分頁選項添加帖子導航小部件

Elementor Post Navigation 小部件將為讀者提供導航選項,以便他們可以切換到不同的博客。 添加帖子導航小部件,例如在編輯器上搜索之前,然後在作者框小部件之後拖放。

您可以顯示或隱藏分頁標籤或箭頭符號。 您可以獲得大約8 個以上的箭頭設計選項。 您還可以自定義上一級和下一級文本。

Elementor 帖子分頁小部件自定義博客頁面 elementor

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

Elementor 自定義博客模板帖子分頁小部件樣式設置

第 10 步:拖放帖子小部件以顯示相關帖子

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

Elementor 帖子小部件設置 Elementor 自定義博客帖子

第 11 步:添加帖子評論小部件

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

Elementor 發表評論小部件自定義博客頁面 elementor
元素套件 gif

第 12 步:更新並查看 Elementor 自定義博客頁面模板

現在所有的設計都完成了,點擊更新按鈕。 如果顯示發佈設置窗口,請單擊保存並關閉。

這是我們剛剛創建的自定義 Elementor 博客文章模板的預覽。

預覽自定義 elementor 博客文章模板

如果您發現上述方法太耗時,您可以選擇下面提到的方法,您不必從頭開始構建和設計每個部分。

您還可以查看我們的博客,了解如何通過 5 個簡單步驟在 Elementor 中添加多步驟表單

如何使用預製的 Elementor 模板創建單個帖子頁面

如果您打算為 Elementor 自定義博客頁面使用預構建的模板,只需 3 個步驟即可完成。 讓我們檢查一下:

第 1 步:從儀表板創建新的單個博客文章模板

與第一種方法一樣,您需要創建一個新的單個博客模板。 有關如何創建新模板的更多詳細信息,請向上滾動一點並查看第一種方法的第一步(如何從頭開始構建博客模板)。

創建 Elementor 博客帖子模板自定義博客頁面 elementor

第 2 步:選擇預製的 Elementor Single Post 模板

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

插入預製的博客文章模板

第 3 步:選擇預製的 Elementor Single Post 模板

模板加載後,單擊發布按鈕以保存所有新的博客模板。

這是使用預製的單個帖子模板使用 Elementor 博客帖子的博客帖子的最終外觀。

帶有預製模板的 Elementor 博客文章

如何使用 ElementsKit 創建 Elementor 最新帖子頁面

現在您已經有了一個有吸引力的單篇文章模板,是時候製作一個自定義博客列表頁面了,以便您的所有博客都以一種令人愉悅且用戶友好的方式顯示。 讓我們看看如何使用 ElementsKit 創建自定義 Elementor 最新帖子。

第 1 步:安裝和激活 ElementsKit

要創建令人驚嘆的博客列表頁面以及 Elementor 頁面構建器,您將需要 ElementsKit。 ElementsKit 是 Elementor 的一體化插件,具有 85 多個小部件和模塊,使 Web 開發比以往更容易。

在 Elementor 的插件中安裝並激活 ElementsKit
立即獲取 ElementsKit

第 2 步:啟用帖子列表相關小部件

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

啟用 ElementsKit 的帖子相關小部件

查看如何使用 ElementsKit 創建漂亮的 Elementor 一頁滾動導航

第 3 步:添加小部件並自定義

現在,轉到博客列表頁面,搜索小部件並簡單地拖放。 加載小部件後,您可以自定義相關設置以個性化您的博客列表頁面。 讓我們看看帶有一些 ElementsKit 小部件及其自定義選項的博客列表頁面會是什麼樣子。

博客文章:

使用博客文章小部件,您可以以塊格式、帶有拇指的網格和不帶拇指設計的網格顯示您的博客。 您還可以設置每行顯示的帖子數量、啟用/禁用分頁以及更多選項。 有關更多詳細信息,請查看我們的博客,了解如何顯示最近的博客文章。

Elementor 使用 ElementsKit 的最新帖子

後網格:

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

發佈網格設置元素或最新帖子

發布標籤小部件

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

發布標籤小部件設置自定義博客頁面元素或最新帖子

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

元素套件 gif

最後的話

我們已盡力為您提供有關如何以兩種方式創建自定義 Elementor 博客文章模板的簡單教程。 我們希望您發現該博客有助於構建您的自定義 Elementor 博客模板。 您可以按照這些步驟並根據您的選擇更改佈局和設計。

並且不要忘記使用 ElementsKit 小部件為您的博客列表頁面提供非凡的觸感。 ElementsKit 是 Elementor 的完美補充,請抽出時間查看該插件提供的所有令人驚嘆的小部件。

立即獲取 ElementsKit