元素主題生成器:使用拖放構建整個WordPress站點

[ad_1]

在數字上,Elementor是超過200萬個WordPress網站的活躍版,是現有最流行的WordPress頁面構建器插件之一。

但是,雖然它最初是作為頁面構建器開始的,但您現在可以使用它來構建更多不僅僅是頁面。

使用Elementor Pro – 49美元以上的高級附加組件 – 您可以構建整個WordPress主題 – 頁眉,頁腳,博客布局等。

是的 – 其含義正是您的想法 – 您可以使用Elementor的可視化拖放編輯器構建基本上100%的WordPress網站……這太棒了。

在這 元素主題建設者 回顧一下,我將向您介紹這個強大功能的工作原理以及它可以讓您做什麼。

然後,最後,我將回答您可能遇到的一些問題,例如,如果您使用Elementor主題構建器,是否仍需要關心WordPress主題。

Elementor主題構建器功能的工作原理

很像 Elementor Popup Builder的工作原理,Elementor主題構建器允許您使用完全相同的視覺,拖放界面,您可以在WordPress.org的免費Elementor插件中找到它,並將其應用於設計整個WordPress主題。

具體來說,這意味著您可以設計您的網站:

  • 頁腳
  • 存檔頁面 – 將此視為整個博客列表頁面,但您也可以為其他內容類型創建存檔頁面。
  • 單頁 – 將此視為單獨的博客文章,但您也可以為其他內容類型創建單頁。

如果您正在運營電子商務商店,您也可以設計您的WooCommerce商店和產品頁面。

從本質上講,這可以讓您使用Elementor構建整個WordPress站點。也就是說,您可以構建訪問者看到的所有內容。

為了幫助您構建實際頁面,Elementor為您提供了大量新的小部件。例如,要為您的個人博客帖子創建結構,您將獲得新的小部件來顯示帖子的標題和內容(直接從WordPress編輯器中提取)。

最後,您將能夠有條件地將這些模板應用於您網站的不同部分,這是一個非常強大的功能。例如,您可以為特定類別的帖子創建專用布局。

如果所有這些結合在一起對你來說仍然有點模糊,請不要擔心。當我與Elementor主題構建器進行實際操作時,您將更好地理解一切是如何工作的。

了解有關Elementor Theme Builder的更多信息

如何使用Elementor主題構建器

既然您已經了解了基本功能,那麼讓我們進行一些實踐/教學,我將向您展示一切是如何運作的。

這應該可以讓您更好地了解所有內容如何組合在一起,以幫助您構建WordPress網站。

讓我們從頭開始 – 我有一個基本的WordPress網站使用 阿斯特拉主題。這是使用Elementor主題構建器之前的樣子:

01編輯前的Astra主題

  • 保存

現在,當我向您介紹Elementor主題構建器的工作原理時,您將能夠看到Elementor中的每個更改如何影響此基本網站。

在Elementor主題構建器中創建新模板

Elementor主題構建器使用模板系統。要訪問此區域,請轉到模板→主題構建器→添加新項。

從那裡,您可以選擇要創建的模板類型。這是您正在設計的主題的特定部分:

  • 頁腳
  • 檔案

02選擇新模板類型

  • 保存

現在,讓我們來看看不同的部分……

建立你的標題

當您開始構建標題時,您可以選擇13個以上的預製標題模板或從頭開始構建自己的標題:

03從頭開始或選擇一個塊

  • 保存

然後,您可以使用常規Elementor介面設計標頭。你可以看到我導入了上面的一個模板:

04 Elementor界面

  • 保存

不過,有一些獨特的事情正在發生。例如,我沒有添加常規圖像小部件來添加徽標,也沒有將菜單鏈接添加為常規文本小部件。

相反,我利用這些新的Site小部件動態地從我現有的站點數據中提取內容:

05網站小部件

  • 保存

例如,Elementor從我在定製器中設置的徽標中提取站點徽標,並通過轉到外觀→菜單從我設置的實際菜單中拉出菜單鏈接。

如果編輯「導航菜單」窗口小部件,則可以看到此內容。您還可以看到Elementor將如何為您提供如何運作的選項:

06編輯導航菜單小部件

  • 保存

這是主題構建器如何工作的關鍵點。它不是靜態的。相反,主題構建器可幫助您動態提取網站的信息。

然後,當您發布模板時,您將能夠準確選擇應用該模板的位置。

例如,您可以在整個網站範圍內應用此標頭,以便它在每個頁面上充當您的標頭。或者,您可以將其定位到特定內容,這樣您就可以為不同類型的內容創建不同的標頭:

07設置顯示模板的位置

  • 保存

一旦我實現它,你可以看到Elementor如何用我剛剛在Elementor界面中創建的標題替換我的主題的現有標題:

08新標題發布

  • 保存

建立你的頁腳

我現在會快一點,因為我認為你有基本的想法。

創建頁腳與頁眉相同,您將獲得相同的站點窗口小部件選擇,以及16個預製頁腳模板供您選擇。

與標題一樣,您將能夠使用可視化拖放界面設計頁腳:

09使用拖放設計頁腳

  • 保存

然後,當您發布它時,您可以使用這些相同的規則來定位整個網站,或定位特定內容。

現在,如果我滾動到我的實時網站的底部,你可以看到Elementor如何用我剛剛設計的頁腳替換默認的Astra主題頁腳:

10用新的替換原始頁腳

  • 保存

構建您的博客存檔頁面

好的,所以你已經建立了頁眉和頁腳,但你的實際內容呢?你的帖子和頁面?

對於博客文章,這個難題有兩個部分:

  • 存檔 – 這是列出所有博客帖子的頁面的設計。

  • 單一 – 這是每個博客文章的設計。

Elementor Pro允許您創建兩者 – 讓我們從存檔開始。

要開始使用,您可以從8個以上的模板中進行選擇,也可以從頭開始。從那裡開始,基本概念是相似的,除了你會得到一組不同的小部件:

11選擇博客存檔模板

  • 保存

如果您編輯Archive Posts小部件,您將能夠控制很多布局,包括多列設計,圖像大小,元數據等。例如,您可以轉到這樣的多列卡方法:

12編輯存檔功能

  • 保存

當您發布它時,您將再次能夠控制它出現的位置。您可以將它用於所有檔案。或者,您可以為不同類型的存檔創建不同的布局,例如:

  • 作者檔案
  • 日期存檔
  • 搜索結果頁面
  • 特定類別,標籤等

現在,您可以看到Elementor如何使用我剛創建的存檔布局替換默認的Astra帖子列表:

13用新設計替換原始博客存檔

  • 保存

構建您的博客單頁

創建單個模板是類似的,但是當您創建模板以選擇帖子類型時,您將獲得一個新選項 – 比如您是否要為博客帖子或頁面構建布局:

14構建博客單頁

  • 保存

您可以選擇7種以上的模板。然後,您可以使用一組新的單個小部件來控制設計:

15從單組小部件中進行選擇

  • 保存

另一個有用的選項是能夠在您控制設計時從您的一個真實帖子中預覽數據 – 您可以看到Elementor實際上從我的網站中提取了一個真實的帖子,以幫助我可視化事物的外觀。

與其他模板一樣,您還可以為每個小部件獲得更多設置。一旦發布模板,就可以準確控制單個模板的使用位置。

例如,這將允許您為不同類別的博客帖子創建不同的模板。

建立您的WooCommerce商店

如果您有一個WooCommerce商店,您將能夠應用相同的方法來構建您的商店頁面和單個產品頁面,以及用於WooCommerce產品信息的專用小部件:

16建立您的WooCommerce商店

  • 保存

這裡的一個很棒的功能是你還可以獲得相關產品和加售的專用小部件。

構建自定義帖子類型的內容

這是一個高級概念,但是關於Elementor Pro最強大的功能之一就是您可以執行上述所有相同的操作……但是對於自定義帖子類型。

如果您不熟悉自定義帖子類型,它們基本上是一種存儲特定類型內容的方式。事實上,你的博客「帖子」實際上是一個「帖子類型」 – 你只是不這麼認為它們,因為它們默認帶有WordPress。

基本上,自定義帖子類型是WordPress從「只是一個博客平台」到「全功能內容管理系統」的重要組成部分。

使用自定義帖子類型,您可以類似地為其他內容創建「容器」。一些例子:

  • 如果要創建作業列表站點,可以為「作業」創建自定義帖子類型。
  • 如果您想創建公寓租賃網站,可以為「公寓」創建自定義帖子類型。
  • 如果要創建業務目錄,可以為「業務」創建自定義發布類型。

明白了嗎?然後,Elementor Pro可以幫助您為這些自定義帖子類型構建設計。

這真的很強大的是當你將它與下一個功能結合起來時,我將談論……

動態內容將主題建立在類固醇上

到目前為止,我一直關注Elementor主題構建器如何幫助您包含「普通」WordPress內容,例如帖子的標題。

但是,為了構建真正的自定義網站,最強大的功能之一是Elementor主題構建器的動態內容功能。

此功能允許您將自定義欄位和自定義分類中的內容動態插入Elementor模板。

如果您不熟悉自定義欄位的內容,那麼它基本上是一種存儲有關內容的「額外」信息的方法。

例如,如果您正在撰寫評論帖,則可以創建一個自定義欄位來存儲您對相關產品的評分(實際上,大多數WordPress評論插件都是這樣做的)。

您可以將這些自定義欄位添加到常規帖子或頁面。或者,您也可以將它們與我上面提到的自定義帖子類型結合起來。

例如,如果您為公寓租賃創建了自定義帖子類型,則可以進一步為每個公寓添加自定義欄位:

  • 每月租金
  • 卧室數量
  • 浴室數量
  • 地點
  • 等等。

對於這個例子,假設我實際已經實現了(使用 高級自定義欄位自定義帖子類型UI)。現在,我有一個簡單的自定義帖子類型,其中包含一些自定義欄位,如下所示:

17實施高級自定義欄位

  • 保存

現在,我想使用Elementor主題構建器來顯示所有內容。

這是它的工作原理……

首先,您可以為Apartment Rental帖子類型創建單個模板:

18選擇帖子類型

  • 保存

您可以使用常規的Elementor Single小部件來添加標題,圖像和內容:

19添加標題圖像和內容

  • 保存

但那些自定義欄位呢?你怎麼能把這些包括在設計中?

這就是Elementor的動態功能如此強大的地方。

要提取自定義欄位信息,您可以添加常規的Elementor Text Editor小部件。只有現在,您可以單擊該動態選項:

20單擊動態按鈕

  • 保存

您可以選擇ACF Field選項,這是我用來創建自定義欄位的插件。然後,您將能夠選擇每個單獨的自定義欄位,包括預先添加和附加信息的選項:

21編輯ACF欄位

  • 保存

這會動態提取自定義欄位信息,這意味著此信息將針對您添加的每個公寓租賃進行更改。

重複所有自定義欄位的過程會得到類似這樣的信息,其中所有信息都是從自定義欄位中動態提取的:

22為其他自定義欄位重複此過程

  • 保存

您還可以通過其他方式使用動態數據,例如動態設置部分的背景圖像。

而這正是Elementor主題構建器如此強大的原因!

有了它,您可以構建100%自定義WordPress網站,超出正常的帖子/頁面動態,無需編碼。

通常,構建這些類型的自定義WordPress站點至少需要一些基線技術知識。但是使用Elementor主題構建器,您可以通過拖放操作完成所有操作。

你還需要一個帶有Elementor主題構建器的WordPress主題嗎?

首先,每個WordPress網站都需要一個主題 – 這是WordPress的基本要求。所以是的,你仍然需要至少在Elementor主題構建器旁邊安裝一個主題。

我認為更相關的問題是「如果我使用Elementor主題構建器,我是否需要關心我使用哪個主題?」。

技術答案是「不」。如果您計劃將Elementor主題構建器用於所有內容,則無需關心主題。

事實上,Elementor創造了他們的 擁有超輕量級主題 它旨在與主題構建器配對。它沒有任何功能 – 它實際上只是Elementor主題構建器的輕量級基礎。

但是,我認為你應該仍然關心你的主題,即使你不需要。

以下是一些原因:

  • 全局樣式 – 您可以在主題的自定義設置設置中設置全局樣式,而不是使用Elementor從頭開始設置每個元素的樣式。這有助於確保一致的設計,並使將來更容易切換。

  • 節省時間 – 有時,您可能不希望將Elementor Pro用於所有內容。例如,您真的想要使用Elementor設計404頁面嗎?一個好的主題將為您處理基本的東西,因此您可以只使用主題構建器來實現您真正想要更改的部分。

  • 集成 – 一些主題將提供直接的插件集成,可以節省您的時間,例如與WooCommerce或LMS插件的集成。

那麼,考慮到這一點,與Elementor主題構建器配對的最佳主題是什麼?有一些不錯的選擇,但是 阿斯特拉主題 可能是大多數用例的最佳起點。

Elementor主題構建器可幫助您構建自定義WordPress站點

雖然Elementor主題構建器需要比使用預先構建的WordPress主題更多的汗水,但它使您能夠使用您使用的相同視覺,拖放界面完全自定義WordPress網站的每個方面。使用Elementor構建頁面內容。

除此之外,條件顯示規則還允許您為不同類型的內容創建不同的設計,從而進一步自定義您的網站。

最後,動態內容功能非常適用於超越基本博客或宣傳冊網站。它通過讓你動態引入自定義內容類型的內容來釋放WordPress的真正力量(我上面給你的例子實際上只是表面上看)。

無論您是想要更多地控制博客的外觀,還是想要構建自己的自定義網站或電子商務商店,Elementor主題構建器都是您為此目的找到的最佳WordPress插件之一。

此外,Elementor主題構建器是普通的49美元Elementor Pro軟體包的一部分,這意味著您還可以以相同的價格訪問所有其他Elementor Pro功能(包括Popup Builder)。

總而言之,從功能和價值的角度來看,Elementor Pro和主題構建器都是不費吹灰之力的,而且有一個原因讓Elementor在過去幾年中大受歡迎。

獲取Elementor Theme Builder

披露:此帖子包含會員鏈接。這意味著如果您進行購買,我們可能會支付一筆小額傭金。這不會花費你,但它確實幫助我們繼續發布有用的內容 – 謝謝你的支持!

  • 保存

相關文章