Elementor Pro制作博客網(wǎng)站 [05] 使用 Theme Builder 管理站點(diǎn)部分

時間：2023-05-05 04:51:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-05-05 04:51:02 來源：網(wǎng)站運(yùn)營

Elementor Pro制作博客網(wǎng)站 [05] 使用 Theme Builder 管理站點(diǎn)部分：

https://www.zhihu.com/video/1596888452875878400在上一課中，我們熟悉了 Elementor Editor 并學(xué)習(xí)了如何使用全局樣式自定義我們的網(wǎng)站。

在本課中，我們將熟悉 Elementor Theme Builder，這是一個以直觀直觀的方式管理所有站點(diǎn)部分的單一位置。

通過單擊菜單圖標(biāo)并選擇主題生成器，從使用 Elementor 編輯的任何頁面訪問主題生成器。

主題構(gòu)建器顯示我們網(wǎng)站的所有部分，并允許我們編輯頁眉、頁腳、帖子模板、頁面模板等。模板名稱旁邊的綠點(diǎn)表示此模板處于活動狀態(tài)，可供訪問者訪問。通過每個網(wǎng)站部分的預(yù)覽，它讓我們可以鳥瞰整個網(wǎng)站。由于我們?yōu)槲覀兊木W(wǎng)站使用了一個工具包，因此所有這些模板都已與其一起導(dǎo)入。涼爽的！

左側(cè)的面板讓我們快速了解各種類型的站點(diǎn)部分。
單擊特定模板，將向我們展示包含更多信息的更大預(yù)覽。

例如，讓我們看一下存檔模板。
我們可以通過單擊此處編輯模板，這將直接帶我們進(jìn)入 Elementor Editor。

一些工具包包括針對相同網(wǎng)站部分的多個選項(xiàng)，讓我們可以自由地設(shè)計(jì)我們認(rèn)為合適的網(wǎng)站樣式。我們的工具包包含多個存檔模板，我們可以使用它們來顯示不同類型的存檔，例如一個存檔模板用于類別，另一個用于標(biāo)簽。

由于 Xander 計(jì)劃在一個類別下發(fā)布他的所有文章，我們將繼續(xù)刪除任何不需要的模板。單擊此處刪除此模板。偉大的！

要為特定站點(diǎn)部分添加新模板，請單擊此處的加號圖標(biāo)，這會將我們直接帶到編輯器。

或者，我們可以單擊右上角的加號圖標(biāo)，這將提示我們選擇站點(diǎn)部分模板。
單擊“i”圖標(biāo)會顯示有關(guān)該部分的更多具體信息，包括專門的視頻和幫助文章。

使用我們學(xué)到的知識，我們將繼續(xù)對我們網(wǎng)站的不同部分進(jìn)行一些調(diào)整，從標(biāo)題開始。

讓我們看看這里需要更改什么。Xander 的徽標(biāo)看起來有點(diǎn)小，因此我們需要更改其大小。我們還需要連接菜單彈出窗口。

讓我們從徽標(biāo)開始。單擊徽標(biāo)小部件，對其進(jìn)行編輯。從這里的圖標(biāo)我們可以看出它是動態(tài)的，并顯示我們之前設(shè)置的圖像作為我們的網(wǎng)站標(biāo)志。

轉(zhuǎn)到樣式，我們將在其中更改徽標(biāo)的寬度。接下來，我們將切換到響應(yīng)式視圖以確?；諛?biāo)在不同設(shè)備上看起來不錯。

我們將從平板電腦視圖開始。如果我們不為響應(yīng)式設(shè)置輸入值，它將獲取我們在更大的設(shè)備視圖中輸入的值。
這是因?yàn)樵诖蠖鄶?shù)情況下， Elementor 中的響應(yīng)式編輯是從較大的視口或屏幕尺寸繼承到較小的視口。

所以，正如我們在這里看到的，Tablet 視圖繼承了 Desktop 視圖的值，顯示為灰色。

接下來，我們將切換到移動視圖。使用頂部的響應(yīng)欄在設(shè)備之間輕松導(dǎo)航，或使用鍵盤快捷鍵 Command 或 Control +Shift+M。

這個值不同于 Desktop 和繼承的 Tablet 寬度，因?yàn)樗呀?jīng)由 Kit 的創(chuàng)建者手動預(yù)設(shè)。我們將更改寬度值，但正如我們所見，這里沒有太大差異。這是因?yàn)?logo 大小受列寬的限制，這在 Kit 中也已預(yù)先設(shè)置。所以讓我們調(diào)整列，通過單擊它，并增加列寬值。

現(xiàn)在我們改變了這一列的大小，標(biāo)志有空間擴(kuò)展到它的全寬，但是為了顯示給定的寬度，剩下的列被壓低了。通過單擊剩余的列并更新其寬度來解決此問題。

接下來我們將編輯菜單。單擊菜單圖標(biāo)。您會注意到此圖標(biāo)還使用動態(tài)鏈接，這次鏈接到現(xiàn)有的彈出窗口。讓我們通過單擊扳手圖標(biāo)確保它連接到正確的彈出窗口，然后在彈出窗口下鍵入“菜單”并選擇正確的彈出窗口。再次單擊扳手圖標(biāo)將其關(guān)閉。

單擊更新以保存我們的更改。現(xiàn)在標(biāo)題已經(jīng)完成，讓我們看一下菜單彈出模板，看看它是否需要任何更改。

使用 Finder 可以輕松訪問它，而無需退出 Elementor Editor。正如我們所見，該模板還使用了徽標(biāo)小部件。在右側(cè)，我們會找到導(dǎo)航菜單小部件，它從我們在課程前面創(chuàng)建的菜單中提取鏈接。

這個菜單看起來很棒，讓我們繼續(xù)瀏覽網(wǎng)站的頁腳。我們將再次使用 Finder，這次是導(dǎo)航到“頁腳”。向下滾動一點(diǎn)，讓我們看看我們需要在此處更改的內(nèi)容。

我們需要用 Xander 的副本更新標(biāo)題……和文本編輯器小部件，并更改此圖像。我們還將了解如何將表單小部件連接到電子郵件營銷服務(wù)。然后在底部，我們將更新標(biāo)題小部件中的信用額度，并添加我們的社交媒體鏈接。

因此，我們將從選擇標(biāo)題開始，然后更改標(biāo)題……和文本編輯器小部件內(nèi)容。接下來我們將選擇另一張照片。如您所見，我們這里沒有圖像小部件，所以讓我們看看這個圖像是如何顯示的。選擇它，我們可以看到它在一個列中。我們將單擊“樣式”選項(xiàng)，從這里我們可以看到該列使用圖像作為背景，因此我們需要做的就是單擊圖像并選擇不同的照片。偉大的！

接下來，我們將選擇表單小部件。在提交后的操作下，我們可以選擇將此表單鏈接到不同的時事通訊服務(wù)，例如 Mailchimp 或 MailerLite。要了解有關(guān)將您的電子郵件營銷服務(wù)集成到 Elementor 表單中的更多信息，請查看說明中的鏈接。

選擇標(biāo)題小部件以更新信用額度。與鏈接一樣，標(biāo)題字段也可以使用動態(tài)標(biāo)簽。它設(shè)置為顯示當(dāng)前日期，通過單擊扳手圖標(biāo)，我們可以看到它顯示當(dāng)前年份，由字母 Y 表示。酷。

我們將展開“高級”部分，并更改出現(xiàn)在版權(quán)符號之后的文本。最后但同樣重要的是，我們不要忘記在更新之前添加我們的社交媒體鏈接！

就是這樣！現(xiàn)在您知道如何使用 Elementor 的一種主題生成器，在一個地方設(shè)計(jì)和管理您的所有站點(diǎn)部分。在我們繼續(xù)之前，請花一些時間探索工具包中包含的 Theme Builder 和模板。然后繼續(xù)并刪除任何非活動模板，由灰色狀態(tài)點(diǎn)指示。
在下一課中，我們將介紹博客的本質(zhì)：創(chuàng)建和管理新帖子！所以點(diǎn)擊繼續(xù)觀看。到時候那里見！

請?jiān)L問我的主頁https://wpeyes.com，找到更多文章與教程。