介紹

SP Page Builder 3引入了一個全新的前端編輯級別，其全新的前端視覺構(gòu)建器。添加元素，點擊它，編輯它，看看正在改變的形式。不再浪費時間 - 添加和打開插件，添加內(nèi)容，并前往你添加的前端查看。現(xiàn)在，使用這個新的前端編輯器，您可以實時看到自定義設(shè)置，無需預(yù)覽自定義設(shè)置，因為一切都在眼前。

新的前端可視化構(gòu)建器比以往更快。現(xiàn)在你可以比布加迪威龍超級跑車做的更快，你會感覺像握著方向盤。不管你做什么，都會在瞬間發(fā)生。現(xiàn)在，您可以即時添加元素和內(nèi)容。SP Page Builder 3的新拖放系統(tǒng)需要分秒來加載元素。你的工作是拖動這些東西，把它放在正確的地方，其余的工作將由編輯完成。 

前端編輯器打開

您可以很容易地從SP Page Builder 3的后端訪問前端編輯器，在那里您已經(jīng)創(chuàng)建了所有的頁面。還有幾種方法可以在前端打開編輯，一起來了解一下。

選項1

除了在SP page Builder 3的后端創(chuàng)建的每個頁面之外，您還將找到兩個選項。一個是預(yù)覽，它允許你預(yù)覽你的頁面，另一個是前端編輯器，它將允許你進(jìn)入頁面的前端編輯。

選項2

通過在SP Page Builder 3的后端編輯器中單擊該頁面打開頁面。在編輯器頂部，您將看到“前端編輯器”選項。點擊它來到前端編輯器。

選項3

在每個角落的預(yù)覽版中，有一個名為“編輯頁面”的選項。在單擊該選項后，編輯器將打開。記住，您必須登錄才能使用此選項。

編輯工具：了解周圍的方法

前端側(cè)邊欄

前端側(cè)邊欄是這個編輯器的核心。這使您可以添加插件，內(nèi)置的部分，也可以使用這個編輯器工具做所有的樣式。

行編輯工具  

在每一行的左上角，您可以找到訪問樣式選項的工具。

添加/管理列
使用此工具，可以在行中添加新列或自定義列結(jié)構(gòu)。

行選項行
有幾個編輯選項。你可以進(jìn)入行選項，并以你想要的方式修改行。

復(fù)制行
您可以復(fù)制正在編輯的行的副本。如果你的頁面中的兩行是相似的。您可以輕松地復(fù)制該行并進(jìn)行必要的修改。

添加新行
使用此選項，您可以添加新行。單擊該選項后，將正在編輯的行下添加一個新行。

禁用行
如果要禁用任何不想顯示的原始數(shù)據(jù)，暫時可以通過單擊禁用行選項將其隱藏。您仍可以通過單擊啟用按鈕啟用它。

刪除行
如果您希望使用此選項，則可以完全刪除該行

插件編輯工具

在每個添加的插件的左上角，你會找到訪問樣式選項的工具。

編輯插件

使用此選項，您可以訪問插件編輯選項。在那里你可以添加或修改內(nèi)容，并做必要的風(fēng)格

復(fù)制插件

如果你想做一個重復(fù)的插件。你可以使用這個選項來做到這一點。通過點擊該選項將生成相同的插件。

禁用插件

您可以暫時禁用插件，您可以通過使用該選項。插件將被隱藏。您可以通過點擊啟用按鈕來啟用它。

父列

這個選項可以讓你做一些自定義，比如添加一個新列，編輯列的選項，列移動和許多其他的東西在這個父列。

刪除插件

你可以完全刪除這個選項的插件。

添加新行

有兩種方法可以在前端編輯器的頁面上添加新行。下面介紹了這些選項。

選項1：
在每個頁面中，都可以添加第一行。

現(xiàn)在你將添加行的列結(jié)構(gòu)。點擊生成，行將被添加。

選項2：
您可以在每行的底部找到行加載項選項。

模板頁面

有30多個內(nèi)部模板頁面，您可以在您的網(wǎng)頁上使用。要找到這些模板，請單擊SP Page Builder前端底部菜單中名為“Tools”的選項。工具選項點擊“頁面模板”查看可用的模板。

選擇選項頁面模板后，將打開頁面模板列表。點擊您認(rèn)為最適合您的網(wǎng)頁的模板。

自定義列結(jié)構(gòu)

SP頁面生成器列結(jié)構(gòu)的工作方式與網(wǎng)格類似。全屏分為十二個網(wǎng)格。您必須根據(jù)引導(dǎo)網(wǎng)格來選擇或?qū)懴铝薪Y(jié)構(gòu)。例如，你想在你的行中有三列。在這種情況下，我們必須把屏幕分成三部分。所以根據(jù)bootstrap我們的屏幕有十二個網(wǎng)格。所以如果我們把它分成三列而不是每列都有四個網(wǎng)格。然后我們必須選擇或?qū)懴?,4,4。這意味著我的第一列有四個網(wǎng)格，第二和第三列相同。

例如：2 + 2 + 2 + 2 + 2 + 2：六列

如果您需要連續(xù)創(chuàng)建6個大小為2的列，那么您必須先手動將您的自定義需求放在名為“custom”的文本字段中。

輸出

內(nèi)置的部分

你可以無限拖放在你的網(wǎng)站的不同部分的設(shè)計。要找到內(nèi)置的部分，請單擊前端側(cè)邊欄菜單上的sections選項卡。

部分設(shè)計

現(xiàn)在你可以找到以下部分的設(shè)計。

• 頂部
• 特征
• 內(nèi)容
• 定價
• 觀眾獲益度
• 團(tuán)隊
• 推薦
• 聯(lián)系我們

要獲得設(shè)計，請從部分的下拉列表中選擇部分。設(shè)計將相應(yīng)地出現(xiàn)。

部分添加

部分修改

有幾個選項可以用來部分修改。在這里，我們將風(fēng)格的標(biāo)題部分。要訪問樣式，您必須使用行和插件中的常規(guī)選項。點擊行編輯按鈕來訪問行編輯選項。對于插件，點擊插件編輯按鈕。

訪問行樣式

添加章節(jié)標(biāo)題和副標(biāo)題 

要添加該部分，點擊行編輯選項。在“常規(guī)”選項卡中，您將找到名為“標(biāo)題”和“副標(biāo)題”的兩個文本框。在這些文本框中添加您的標(biāo)題和副標(biāo)題文本。

標(biāo)題和副標(biāo)題的位置變化 

 要添加標(biāo)題和副標(biāo)題位置，點擊行編輯選項。在“常規(guī)”選項卡中，您可以找到“標(biāo)題和副標(biāo)題位置”。從下拉菜單中選擇您想要的位置。

布局全寬

要使布局全寬單擊行編輯選項。在“常規(guī)”選項卡中，您必須啟用全寬按鈕。

添加內(nèi)邊距/外邊距

要為行添加內(nèi)外邊距，請單擊行編輯按鈕。現(xiàn)在點擊菜單中的“風(fēng)格”標(biāo)簽。在這里您可以找到添加所需填充內(nèi)外邊距的字段。

文字顏色和背景顏色改變  

要添加文本顏色和背景顏色，請轉(zhuǎn)到“樣式”選項卡。在這里你會發(fā)現(xiàn)兩個字段“文字顏色”和“背景顏色”。使用顏色選擇器工具選擇您想要的顏色。

背景圖像的改變 

 要更改背景圖像，請轉(zhuǎn)到側(cè)邊欄菜單的“樣式”選項卡。向下滾動，看到選項“背景圖像”。在這個選項中，使用媒體管理器來上傳背景圖像。

制作背景視差

為了使你的部分背景視覺差別。轉(zhuǎn)到前端菜單的“樣式”選項卡并向下滾動。啟用選項“視差背景”，就全部設(shè)置。

添加顏色疊加

要添加疊加層，請在樣式選項卡中找到“疊加層”選項。使用顏色選擇器來選擇顏色。另外，您可以選擇調(diào)整顏色的不透明度。

啟用并添加視頻背景 

如果你想添加一個視頻到后臺去前臺顯示,那么菜單中的“風(fēng)格”選項卡。向下滾動，你會發(fā)現(xiàn)“啟用視頻背景”。現(xiàn)在添加video視頻的鏈接或當(dāng)前網(wǎng)站視頻的路徑

啟用形狀

要首先添加形狀，您必須啟用形狀。要啟用它，請轉(zhuǎn)到前端菜單的樣式選項卡。在那里為頂部和底部啟用形狀。如果只想在頂部添加形狀，只需啟用頂部形狀即可。

頂部形狀 

啟用形狀

這將啟用添加形狀的選項。

形狀

有10多個形狀可以添加，選擇你想要的。

顏色

使用此選項設(shè)置形狀的顏色。 

寬度

設(shè)置形狀的寬度。使用按鈕拖動進(jìn)行調(diào)整。

高度

設(shè)置形狀的寬度。 使用按鈕拖動進(jìn)行調(diào)整。

左右翻轉(zhuǎn)

這將翻轉(zhuǎn)設(shè)計。如果在右側(cè)，則會翻到右側(cè)。 

上下翻轉(zhuǎn)

這將顛倒形狀的設(shè)計。如果向下，則會向上翻轉(zhuǎn)。

底部形狀 

啟用形狀

這將啟用添加形狀的選項。

形狀

有10多個形狀可以添加，選擇你想要的。

顏色

使用此選項設(shè)置形狀的顏色。

寬度

設(shè)置形狀的寬度。使用按鈕拖動進(jìn)行調(diào)整。

高度

設(shè)置形狀的寬度。使用按鈕拖動進(jìn)行調(diào)整。

左右翻轉(zhuǎn)

這將翻轉(zhuǎn)設(shè)計。如果在左側(cè)，則會翻到右側(cè)。

上下翻轉(zhuǎn)

這將顛倒形狀的設(shè)計。如果向下，則會向上翻轉(zhuǎn)。

訪問插件stying 

要進(jìn)入插件編輯選項，點擊插件編輯按鈕。 

插件添加

這將教你如何添加一個插件。

插件復(fù)制 

要復(fù)制插件，請單擊插件菜單中的復(fù)制插件圖標(biāo)。

禁用插件 

要禁用插件，請單擊插件菜單中的禁用插件圖標(biāo)。

實時編輯

你不必去任何地方添加文本或修改它。你可以在前臺做所有的事情。

字體的變化 

 現(xiàn)在您可以輕松更改文本的字體系列。要做到這一點,點擊插件編輯圖標(biāo)。在這里你可以找到更改字體系列的選項。從谷歌字體列表中選擇你想要的字體。

改變字體大小

字體樣式和內(nèi)容對齊 

 您可以調(diào)整添加內(nèi)容的字間距和內(nèi)容對齊。首先，點擊插件編輯圖標(biāo)。轉(zhuǎn)到前端編輯器的“樣式”選項卡。向下滾動，你會發(fā)現(xiàn)字體樣式更改選項也是對齊內(nèi)容的選項。

頁面庫系統(tǒng)

庫系統(tǒng)是SP Page Builder3的最新功能。現(xiàn)在，如果您有一個部分行，您希望稍后在不同的頁面中使用它。使用頁面庫系統(tǒng)，首先你必須保存行。保存的頁面將被存儲在庫中。只要您需要，您可以拖放已保存的部分頁面布局。

步驟1：保存部分

步驟2：給它起一個名字

步驟3：在庫中找到它 

響應(yīng)式

您可以使用SP Page Builder 3的前端編輯器調(diào)整網(wǎng)站的響應(yīng)速度。您可以在編輯器的底部找到響應(yīng)控制按鈕。切換到各種設(shè)備，并檢查設(shè)計。您在各種設(shè)備中所做的修改僅適用于這些設(shè)備。

元素響應(yīng)

您可以對部分行中添加的元素進(jìn)行響應(yīng)式設(shè)計。您可以在其樣式部分找到該工具。

隱藏響應(yīng)的列

您可以隱藏在各種設(shè)備的任何部分或插件內(nèi)容，以解決響應(yīng)性問題。為此，您需要轉(zhuǎn)到前端菜單的響應(yīng)選項卡。在那里你必須根據(jù)你的設(shè)置啟用選項。

頁面選項：打開圖形

要使用打開的圖形功能，您必須點擊編輯器底部的設(shè)置圖形。現(xiàn)在選擇“頁面選項”。在這里你會發(fā)現(xiàn)幾個選項。從他們選擇打開圖形。在這里你必須做所有的定制來使用打開的圖形功能。

自定義CSS

要添加自定義CSS，您必須點擊編輯底部的設(shè)置圖標(biāo)。現(xiàn)在選擇“頁面選項”。在這里你會發(fā)現(xiàn)幾個選項。從他們中選擇自定義CSS。在這里添加您的自定義CSS。

ACL控制

要使用訪問控制功能，您必須點擊編輯底部的設(shè)置圖標(biāo)。現(xiàn)在選擇“頁面選項”。在這里你會發(fā)現(xiàn)幾個選項。從他們中選擇“發(fā)布”。在這里控制訪問。

撤銷重做

你可以無限次的撤銷和重做。無論你的錯誤是什么，你可以通過點擊撤消按鈕恢復(fù)以前的定制，如果你撤消任何東西，并想要回到你已經(jīng)定制的東西，你可以輕松地使用重做按鈕來做到這一點。這兩個按鈕都在前端編輯器菜單的底部。

前端邊欄隱藏

要隱藏前端邊欄，請單擊屏幕截圖中指示的圖標(biāo)。