WordPress初學者：中級定制

為了超越我上一個 WordPress 初學者博客中的簡單基礎知識，在過去的幾周里，我一直在努力重新創建我們的 ProteusThemes 演示頁面之一。 汽車主題的演示是具體的。 就像以前一樣，我的同事給我設置了分步任務，讓我走上自己的路。 這些是我迄今為止學到的最重要的一課。

圖標框

圖標框小部件是一種非常方便的視覺語言。 這似乎很明顯，但是將您公司的電話號碼放在電話圖標旁邊是改善網站用戶體驗的一種簡單而有效的方法。

我的任務是將圖標框添加到主頁的標題中。 為此，在您的儀表板中，您需要轉到外觀 -> 小部件，然後在“主題邊欄”中選擇“標題”。

找到“標題”後，將注意力轉向屏幕左側，您將在此處看到“可用小部件”列表。 ProteusThemes：IconBox是您正在尋找的小部件。

現在你有兩個選擇。 您可以將小部件拖放到屏幕右側並將其放在標題中，或者當您單擊小部件時，您將看到其適用位置的下拉菜單，您只需從中選擇“標題”列表並單擊藍色的“添加小部件”按鈕：

您現在將看到小部件中有很多圖標可供選擇，出於本練習的目的，我選擇了電話。 您需要做的就是給圖標框一個標題並決定您希望在它旁邊顯示哪些信息。

在小部件菜單中的所有圖標下方，您將看到“突出顯示此小部件”的選項。 如果圖標框中的信息特別重要並且您希望它更加突出，請勾選該框。

頭版滑塊

重新創建自動演示需要在主頁上添加一個滑塊作為功能。 為此，請選擇Pages -> All Pages -> Home ； 進入主頁的編輯器後，您需要在屏幕右側找到“頁面屬性”下拉菜單。 找到它，然後將“模板”更改為“帶滑塊的首頁”。

更改為“帶滑塊的首頁”後，屏幕底部將出現一個名為“首頁滑塊”的新元，單擊此處將圖像和文本添加到滑塊：

簡碼

重新創建首頁滑塊使我們很好地進入了短代碼。 為什麼？ 因為在我正在重新創建的自動演示中，滑塊中有按鈕。

在這一點上，重要的是要強調您確實需要安裝推薦的插件。 我犯的錯誤是在沒有激活ProteusThemes Shortcodes插件的情況下將短代碼插入到“幻燈片文本”中。 如果您沒有激活插件，代碼本身將出現在滑塊中，而不是您嘗試創建的按鈕中。

我們所有主題的文檔中都有一個“短代碼”部分，它為您提供了許多可用選項，用於您可以插入的按鈕的樣式和功能。 您需要做的就是將此代碼複製並粘貼到滑塊的“幻燈片文本”部分。 只需在代碼中編輯按鈕的文本以滿足您的需要，就可以使用了。

您當然可以在其他地方使用簡碼，而不僅僅是滑塊。 例如，如果您編寫了一段內容營銷來嘗試銷售某些東西，請使用簡碼在您的博客文章底部創建一個有效的CTA 按鈕。

頁面構建器

掌握SiteOrigin 的 Page Builder插件對於重新創建 Auto Demo至關重要。 我必須使用它的第一個任務是在主頁標題下方創建這個帶有 Popover部分的 IconBox：

為此，請轉到您要編輯的頁面，在我的例子中是主頁。 然後你需要找到頁面構建器菜單，它看起來像這樣：

從這裡，選擇“添加行”。 然後，您將看到與該行中的列相關的選項。 您可以選擇所需的列數、它們的大小比例以及是否希望它們按從左到右的大小順序排列，反之亦然。 對於我的 IconBox Popover，我選擇了 3 個大小相同的列。

現在您已經準備好列，您可以通過添加小部件開始向它們添加功能。 通過單擊要添加到的列來執行此操作，一旦選擇了該列，請單擊上面菜單中的“添加小部件”按鈕。

根據您選擇的小部件，您可以向列添加更多功能。 例如，在我的“ Opening Times ” IconBox Popover 中，有必要在 IconBox Popover 中添加ProteusThemes Open Time小部件，以便在單擊該列時在彈出窗口中顯示相關信息。

在創建這一行 IconBox 彈出框後，我遇到的一個問題是，該行的顏色與 Auto Demo 的顏色不同，也沒有擴展到我的頁面的整個寬度。 解決這類問題很容易。 首先，將光標懸停在行上方的小扳手圖標上，然後選擇“編輯行”。 要更改顏色，下一步是從“行樣式”菜單中選擇“設計”，在這裡您可以更改顏色和其他設計選項。

要更改行的大小，首先從“行樣式”菜單中選擇“佈局”。 這將為您提供向行添加填充的選項。 然後，如果您希望行擴展到頁面的全寬，請選擇“行佈局”下拉菜單並選擇“全寬”。

我以完全相同的方式使用 Page Builder 來創建這些特色頁面列：

為此，我沒有將帶有 Popover 的 Iconbox 小部件添加到列中，而是選擇了ProteusThemes：Featured Page小部件。 您應該很好地嘗試將不同的小部件放入列中，以真正了解頁面構建器對您的有用程度。

這就是現在的全部。 看看我之前的帖子，了解一些更基本的技巧。 點擊下方訂閱我們的時事通訊並獲取此類內容，以及更多內容直接發送到您的收件箱……

現在訂閱