如何使用Beaver Builder網(wǎng)頁設(shè)計器完成定制化網(wǎng)頁設(shè)計？

時間：2022-08-07 05:51:01 | 來源：網(wǎng)站運營

時間：2022-08-07 05:51:01 來源：網(wǎng)站運營

想知道如何在WordPress完成定制化網(wǎng)頁設(shè)計嗎？

就能讓你在無需編寫任何代碼的情況下輕松創(chuàng)出網(wǎng)頁，本文將帶你了解Beaver Builder網(wǎng)頁設(shè)計器并展示如何用WordPress完成定制化網(wǎng)頁設(shè)計。

應(yīng)當(dāng)使用定制化網(wǎng)頁設(shè)計的原因

一般優(yōu)質(zhì)的WordPress主題都自帶含有各種頁面設(shè)計的網(wǎng)站。但有時候，內(nèi)置的布局并不能讓你如愿以償。




你可以用WordPress的子主題創(chuàng)建一個模板，再加入你設(shè)計的頁面模板，這時候你需要用到許多有關(guān)PHP、HTML和CSS方面的知識。




這是Beaver Builder網(wǎng)頁設(shè)計器的來源。它是WordPress的一個拖放式網(wǎng)頁設(shè)計器，它可以幫助您創(chuàng)建自己的自定義頁面布局，無需編寫任何代碼。

Beaver Builder網(wǎng)頁設(shè)計器綜述

Beaver Builder網(wǎng)頁設(shè)計器的使用非常便捷、簡單。它的優(yōu)秀性能之一是能創(chuàng)建出專業(yè)美觀的網(wǎng)頁，與所有的WordPress主題兼容共同運行，還有各式各樣的模塊可供你拖放到你的網(wǎng)頁。你可以自行想象去創(chuàng)建自己期望的頁面。




這是Beaver Builder網(wǎng)頁設(shè)計器的視圖，我們將向你展示如何使用WordPress里的Beaver Builder網(wǎng)頁設(shè)計器創(chuàng)建自定義頁面布局。




讓我們開始講解吧！

用Beaver Builder網(wǎng)頁設(shè)計器創(chuàng)建定制化網(wǎng)頁

在WordPress中點擊頁面 ? 新建頁面，即可創(chuàng)建一個新的頁面。你會在WordPress編輯器上看到一個創(chuàng)建新頁面的標(biāo)簽頁。













點擊“Beaver Builder”按鈕啟動Beaver Builder網(wǎng)頁設(shè)計器。




如果這是你首次使用網(wǎng)頁設(shè)計器，你會看到一個彈出的迎接窗口為你提供指導(dǎo)。




點擊No Thanks按鈕跳過指導(dǎo)部分。我們將帶領(lǐng)你體驗設(shè)計器的性能，因而你不需要其它指導(dǎo)。




接著點擊頂部的模板按鈕。







點擊顯示模板




網(wǎng)頁設(shè)計器內(nèi)置的專用設(shè)計模板能使你馬上進(jìn)入創(chuàng)建網(wǎng)頁的狀態(tài)。




不用擔(dān)心定制模板的問題，你還是可以如愿以償?shù)厝ザㄖ?，只不過這個方式能夠讓你建站更快。







選擇模板




當(dāng)你選定一個設(shè)計時，網(wǎng)頁設(shè)計器會在預(yù)覽窗口為你自動下載。無論你把鼠標(biāo)移動到哪個項目上，設(shè)計器都能使其高亮。




點擊高亮項目的下拉圖標(biāo)進(jìn)行編輯。







編輯圖標(biāo)




網(wǎng)頁設(shè)計器會顯示彈出不同設(shè)置的窗口供你編輯。你可以隨意改變文本、顏色、背景、字體、內(nèi)外邊距等。




你也可以選定一個項目現(xiàn)場預(yù)覽和拖拽移動它。




網(wǎng)頁設(shè)計器的網(wǎng)頁設(shè)計布局是基于行，你可以通過它的拖放功能來重新排列行，你也可以刪除或添加一個新的行。




點擊行布局菜單，并選定你需要的欄數(shù)。







編輯行




設(shè)計器會把行添加到新建網(wǎng)站上的預(yù)覽框。你可以使用初級或高級模塊、小部件來添加項目到行。




這些模塊能幫你添加這些普遍使用的對象，如按鈕、標(biāo)題、文本、圖像、幻燈片、音頻、視頻等。




選定你所添加的項目，并將它拖動到行，點擊編輯它的屬性。




你還可以保存此行或模塊，以便稍后在其它頁面重復(fù)使用。只需在編輯行和模塊時點擊Save as按鈕即可。







保存模板




網(wǎng)頁編輯完成后，點擊“完成”按鈕。屆時設(shè)計器會彈出一個窗口，用于選擇發(fā)布或保存草稿。







保存或發(fā)布




你可以在你的WordPress網(wǎng)站為其它頁面重復(fù)整個頁面布局。你只需要打開帶有頁面編輯器的頁面，點擊頂部菜單欄的工具按鈕。




設(shè)計器會彈出一個窗口，您可以保存該頁面作為模板，或者快速創(chuàng)建一個相同布局的重復(fù)頁面。







保存模板

管理Beaver Builder網(wǎng)頁設(shè)計器中的頁面模板

網(wǎng)頁設(shè)計器賦予無限的網(wǎng)站使用它。但你如何從你的WordPress的網(wǎng)站移動一個頁面模板到另一個頁面模板呢？




Beaver Builder網(wǎng)頁設(shè)計器開發(fā)者在定制化上傳中創(chuàng)建了模板。它默認(rèn)是隱藏的，但是你可以通過設(shè)置Settings ? Page Builder 讓它可見，然后再點擊模板標(biāo)簽。




簡單的復(fù)選框旁邊有“啟用模板管理”選項,點擊保存模板設(shè)置按鈕。







管理頁面模板




你會看到有個新的項目菜單模板出現(xiàn)在WordPress系統(tǒng)管理欄。你保存為模板的所有頁面設(shè)計都顯示在這個頁面上。




由于它是一個自定義的類型，您可以很容易地輸出一服客網(wǎng)頁設(shè)計器在WordPress模板使用內(nèi)置的導(dǎo)出功能。




訪問Tools ? Export頁面并選中模板。點擊下載導(dǎo)出的文件，WordPress會為你發(fā)送一個XML文件下載。。







導(dǎo)出模板




現(xiàn)在登錄到你需要導(dǎo)入模板的WordPress網(wǎng)站，訪問Settings ? Import頁面并點擊WordPress。




網(wǎng)站會要求你下載并安裝WordPress importer plugin，然后便可上傳XML模板文件并將它導(dǎo)入。




介紹先到這里，希望這篇文章能幫助你在WordPress使用Beaver Builder網(wǎng)頁設(shè)計器建出定制化的頁面。




若你喜歡這篇文章，請訂閱我們的博客。

本文在WP站長博客 首發(fā)！