如何在WordPress中創建全寬頁面(入門指南)


是否要在WordPress中創建全寬頁面,以便可以在屏幕上延伸內容?

大多數WordPress主題已經帶有內置的全角頁面模板,您可以使用該模板。 但是,如果您的主題沒有主題,則添加主題很容易。

在本文中,我們將向您展示如何輕鬆地在WordPress中創建全寬頁面,甚至無需任何代碼即可創建完全自定義的頁面佈局。

如何在WordPress中創建全寬頁面

方法1。使用您的主題的全寬模板

如果您的主題已經帶有全角頁面模板,那麼最好簡單地使用它。 幾乎所有好的WordPress主題都可以。

即使是最好的免費WordPress主題也經常帶有全角模板,因此很有可能您已經擁有一個。

首先,您需要編輯頁面或通過轉到以下頁面來創建新頁面 頁»添加新 在您的WordPress儀表板中。

在內容編輯器的右側“文檔”窗格中,您需要通過單擊旁邊的向下箭頭來展開“頁面屬性”部分。 然後,您應該會看到“模板”下拉列表。

在WordPress的“文檔”窗格中查看“頁面屬性”部分

如果您的主題有全角模板,則將在此處列出。 應將其稱為“全寬模板”:

從“模板”下拉列表中選擇全寬模板

您在此處看到的選項將根據您的主題而有所不同。 如果您的主題沒有完整寬度的頁面模板,請不要擔心。

您可以使用以下方法輕鬆添加一個。

方法2。使用插件創建全寬頁面模板

此方法最簡單,可與所有WordPress主題和頁面構建器插件一起使用。

首先,您需要安裝並激活Fullwidth Templates插件。 如果您不確定該怎麼做,請查看我們的初學者指南以安裝WordPress插件。

全寬模板插件將為您的頁面模板添加三個新選項:

使用全寬插件可用於頁面模板的不同選項

這些選項是:

  • FW無側欄:從頁面上刪除側欄,但其他所有內容保持不變
  • FW Fullwidth:刪除邊欄,標題和註釋,並將佈局拉伸到全寬
  • FW Fullwidth無頁眉頁腳:刪除FW Fullwidth所做的所有操作,以及頁眉和頁腳

如果您只想使用內置的WordPress編輯器,“ FW No Sidebar”將是最佳選擇。

使用此插件可以創建全角頁面模板,但自定義選項有限。

如果要自定義不使用任何代碼的全角模板,則需要使用頁面構建器。

方法3:使用頁面構建器插件在WordPress中設計全角頁面

如果您的主題沒有全角模板,則這是創建和自定義全角模板的最簡單方法。

它允許您輕鬆地編輯全寬頁面,並通過拖放界面為您的網站創建不同的頁面佈局。

對於這種方法,您將需要一個WordPress頁面構建器插件。 在本教程中,我們將使用Beaver Builder。 它是最好的拖放頁面構建器插件之一,它使您無需編寫任何代碼即可輕鬆創建頁面佈局。

首先,安裝並激活Beaver Builder插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

激活它後,請編輯現有頁面或創建一個新頁面。

在屏幕右側的“文檔”窗格中,轉到“頁面屬性”,然後從下拉菜單中選擇全角模板。

接下來,單擊屏幕中央的“啟動Beaver Builder”按鈕。

使用Beaver Builder插件創建全寬頁面

現在,使用Beaver Builder的拖放界面創建頁面。

Beaver Builder拖放界面

一個好的開始方法是單擊頂部的“模板”選項卡。 選擇一種預製模板作為您的全寬頁面的基礎。

選擇Beaver Builder模板之一

單擊模板以選擇它,然後頁面構建器將加載它。 然後,您可以編輯要更改的任何元素,例如圖像。

Beaver Builder佈局是使用行和模塊構建的。 每行可以有多列,並且在每行內可以添加內容模塊和窗口小部件。

要編輯佈局中的行或模塊,只需單擊它。 在這種情況下,我們正在編輯Heading模塊:

使用Beaver Builder編輯標題

Beaver Builder將在彈出窗口中打開項目詳細信息,您可以在其中編輯其設置。 您可以更改文本,更改字體和顏色,添加或更改背景圖像等等。

在Beaver Builder中編輯項目的詳細信息

您可以隨時在佈局中添加模塊和小部件。 Beaver Builder附帶了許多基本和高級內容模塊,您只需將其拖放到頁面中即可。

在Beaver Builder中添加模塊

完成編輯後,單擊頁面頂部的“完成”。 然後,您可以保存或發布草稿。

在Beaver Builder中保存或發布全寬頁面

現在,您可以訪問頁面以查看完成的全角頁面。

方法4.使用SeedProd創建完全自定義的全寬著陸頁

雖然Beaver Builder是一個整潔的解決方案,但確實有可能減慢您的網站速度。

如果要創建一個完全自定義的登錄頁面,並在其中自定義頁面的頁眉,頁腳和所有區域,則建議使用SeedProd。

它是WordPress的最佳登錄頁面插件,並且具有非常易於使用的拖放頁面構建器界面。

SeedProd頁面構建器

首先,您需要安裝並激活SeedProd插件。

激活後,只需轉到 SeedProd»頁 添加新的登錄頁面。 您可以簡單地從它們的許多預構建模板中選擇一個,或從頭開始創建自定義登錄頁面。

關於SeedProd的最好之處在於它非常快,並且具有用於訂閱者管理,電子郵件營銷服務集成等的內置轉換功能。

方法5:手動創建全角WordPress頁面模板

如果上述方法都不適合您,則此方法是不得已的方法。 它要求您編輯WordPress主題文件。 您需要對PHP,CSS和HTML有一些基本的了解。

如果您之前沒有做過,請查看我們的指南,了解如何在WordPress中復制/粘貼代碼。

在繼續之前,我們建議您創建WordPress備份或至少當前主題的備份。 如果出現問題,這將幫助您輕鬆恢復站點。

接下來,打開一個純文本編輯器(如記事本),並將以下代碼粘貼到空白文件中:


將此文件另存為 full-width.php 在你的電腦。 您可能需要將“保存類型”更改為“所有文件”,以避免將其另存為.txt文件:

將全角模板另存為.php文件

此代碼僅定義模板文件的名稱,並要求WordPress提取標頭模板。

接下來,您將需要代碼的內容部分。 使用FTP客戶端(或cPanel中的WordPress託管文件管理器)連接到您的網站,然後轉到/ wp-content / themes / your-theme-folder /。

現在您需要找到文件 page.php。 這是您主題的默認頁面模板文件。

打開該文件,然後復制所有內容 get_header() 行並將其粘貼到計算機上的full-width.php文件中。

在裡面 full-width.php 文件,找到並刪除此行代碼:

 

該行將獲取側邊欄,並將其顯示在您的主題中。 刪除它會阻止您的主題在使用全寬模板時顯示側邊欄。

您可能會在主題中多次看到此行。 如果您的主題有多個補充工具欄(頁腳小部件區域也稱為補充工具欄),那麼您將在代碼中看到每個引用一次的補充工具欄。 確定要保留的側邊欄。

如果您的主題不在頁面上顯示側邊欄,則可能在文件中找不到此代碼。

這是進行更改後整個full-width.php代碼的外觀。 您的代碼可能看起來略有不同,具體取決於您的主題。


	

接下來,上傳 full-width.php 使用FTP客戶端將文件保存到主題文件夾。

您現在已經成功創建了自定義全角頁面模板並將其上載到主題。 下一步是使用此模板創建全角頁面。

前往WordPress管理區域,並在WordPress區塊編輯器中編輯或創建新頁面。

在右側的“文檔”窗格中,查找“頁面屬性”,然後根據需要單擊向下箭頭以展開該部分。 您應該會看到一個“模板”下拉菜單,您可以在其中選擇新的“全寬”模板:

從模板下拉列表中選擇您創建的全寬模板

選擇該模板後,發布或更新頁面。

查看頁面時,您會看到側邊欄已消失,並且頁面顯示為單列。 它可能還沒有全角,但是現在您可以使用其他樣式了。

您將需要使用“檢查”工具找出主題定義內容區域所使用的CSS類。

之後,您可以使用CSS將其寬度調整為100%。 您可以通過以下方式添加CSS代碼: 外觀»定制 然後點擊屏幕底部的“其他CSS”。

在主題定制器中添加CSS

我們在測試站點中使用了以下CSS代碼:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

這是在我們的演示網站上使用“二十十六”主題的外觀。

全寬頁面預覽

如果要使用手動方法並希望進行進一步的自定義,則還可以使用CSS Hero插件,該插件使您可以通過單擊編輯器來修改CSS樣式。

但是,對於大多數用戶,我們建議您使用自己主題的全角模板,或者使用插件創建模板。

我們希望本文能幫助您學習如何輕鬆地在WordPress中創建全角頁面。 您可能還希望查看有關最佳WordPress插件的指南,以發展您的網站,以及我們與最佳WordPress LMS插件的比較,以創建和銷售課程。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。