介紹
SP Page Builder 3引入了一個全新的前端編輯級別,其全新的前端視覺構建器。添加元素,點擊它,編輯它,看看正在改變的形式。不再浪費時間 - 添加和打開插件,添加內容,并前往你添加的前端查看?,F在,使用這個新的前端編輯器,您可以實時看到自定義設置,無需預覽自定義設置,因為一切都在眼前。
新的前端可視化構建器比以往更快。現在你可以比布加迪威龍超級跑車做的更快,你會感覺像握著方向盤。不管你做什么,都會在瞬間發生?,F在,您可以即時添加元素和內容。SP Page Builder 3的新拖放系統需要分秒來加載元素。你的工作是拖動這些東西,把它放在正確的地方,其余的工作將由編輯完成。
前端編輯器打開
您可以很容易地從SP Page Builder 3的后端訪問前端編輯器,在那里您已經創建了所有的頁面。還有幾種方法可以在前端打開編輯,一起來了解一下。
選項1
除了在SP page Builder 3的后端創建的每個頁面之外,您還將找到兩個選項。一個是預覽,它允許你預覽你的頁面,另一個是前端編輯器,它將允許你進入頁面的前端編輯。

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

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

編輯工具:了解周圍的方法
前端側邊欄
前端側邊欄是這個編輯器的核心。這使您可以添加插件,內置的部分,也可以使用這個編輯器工具做所有的樣式。

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

添加/管理列
使用此工具,可以在行中添加新列或自定義列結構。
行選項行
有幾個編輯選項。你可以進入行選項,并以你想要的方式修改行。
復制行
您可以復制正在編輯的行的副本。如果你的頁面中的兩行是相似的。您可以輕松地復制該行并進行必要的修改。
添加新行
使用此選項,您可以添加新行。單擊該選項后,將正在編輯的行下添加一個新行。
禁用行
如果要禁用任何不想顯示的原始數據,暫時可以通過單擊禁用行選項將其隱藏。您仍可以通過單擊啟用按鈕啟用它。
刪除行
如果您希望使用此選項,則可以完全刪除該行
插件編輯工具
在每個添加的插件的左上角,你會找到訪問樣式選項的工具。

編輯插件
使用此選項,您可以訪問插件編輯選項。在那里你可以添加或修改內容,并做必要的風格
復制插件
如果你想做一個重復的插件。你可以使用這個選項來做到這一點。通過點擊該選項將生成相同的插件。
禁用插件
您可以暫時禁用插件,您可以通過使用該選項。插件將被隱藏。您可以通過點擊啟用按鈕來啟用它。
父列
這個選項可以讓你做一些自定義,比如添加一個新列,編輯列的選項,列移動和許多其他的東西在這個父列。
刪除插件
你可以完全刪除這個選項的插件。
添加新行
有兩種方法可以在前端編輯器的頁面上添加新行。下面介紹了這些選項。
選項1:
在每個頁面中,都可以添加第一行。

現在你將添加行的列結構。點擊生成,行將被添加。

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

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

選擇選項頁面模板后,將打開頁面模板列表。點擊您認為最適合您的網頁的模板。

自定義列結構
SP頁面生成器列結構的工作方式與網格類似。全屏分為十二個網格。您必須根據引導網格來選擇或寫下列結構。例如,你想在你的行中有三列。在這種情況下,我們必須把屏幕分成三部分。所以根據bootstrap我們的屏幕有十二個網格。所以如果我們把它分成三列而不是每列都有四個網格。然后我們必須選擇或寫下4,4,4。這意味著我的第一列有四個網格,第二和第三列相同。

例如:2 + 2 + 2 + 2 + 2 + 2:六列
如果您需要連續創建6個大小為2的列,那么您必須先手動將您的自定義需求放在名為“custom”的文本字段中。

輸出

內置的部分
你可以無限拖放在你的網站的不同部分的設計。要找到內置的部分,請單擊前端側邊欄菜單上的sections選項卡。

部分設計
現在你可以找到以下部分的設計。
- 頂部
- 特征
- 內容
- 定價
- 觀眾獲益度
- 團隊
- 推薦
- 聯系我們
要獲得設計,請從部分的下拉列表中選擇部分。設計將相應地出現。
部分添加

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

添加章節標題和副標題
要添加該部分,點擊行編輯選項。在“常規”選項卡中,您將找到名為“標題”和“副標題”的兩個文本框。在這些文本框中添加您的標題和副標題文本。

標題和副標題的位置變化
要添加標題和副標題位置,點擊行編輯選項。在“常規”選項卡中,您可以找到“標題和副標題位置”。從下拉菜單中選擇您想要的位置。

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

添加內邊距/外邊距
要為行添加內外邊距,請單擊行編輯按鈕。現在點擊菜單中的“風格”標簽。在這里您可以找到添加所需填充內外邊距的字段。

文字顏色和背景顏色改變
要添加文本顏色和背景顏色,請轉到“樣式”選項卡。在這里你會發現兩個字段“文字顏色”和“背景顏色”。使用顏色選擇器工具選擇您想要的顏色。

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

制作背景視差
為了使你的部分背景視覺差別。轉到前端菜單的“樣式”選項卡并向下滾動。啟用選項“視差背景”,就全部設置。

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

啟用并添加視頻背景
如果你想添加一個視頻到后臺去前臺顯示,那么菜單中的“風格”選項卡。向下滾動,你會發現“啟用視頻背景”?,F在添加video視頻的鏈接或當前網站視頻的路徑

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

頂部形狀
啟用形狀
這將啟用添加形狀的選項。
形狀
有10多個形狀可以添加,選擇你想要的。
顏色
使用此選項設置形狀的顏色。
寬度
設置形狀的寬度。使用按鈕拖動進行調整。
高度
設置形狀的寬度。 使用按鈕拖動進行調整。
左右翻轉
這將翻轉設計。如果在右側,則會翻到右側。
上下翻轉
這將顛倒形狀的設計。如果向下,則會向上翻轉。

底部形狀
啟用形狀
這將啟用添加形狀的選項。
形狀
有10多個形狀可以添加,選擇你想要的。
顏色
使用此選項設置形狀的顏色。
寬度
設置形狀的寬度。使用按鈕拖動進行調整。
高度
設置形狀的寬度。使用按鈕拖動進行調整。
左右翻轉
這將翻轉設計。如果在左側,則會翻到右側。
上下翻轉
這將顛倒形狀的設計。如果向下,則會向上翻轉。

訪問插件stying
要進入插件編輯選項,點擊插件編輯按鈕。

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

插件復制
要復制插件,請單擊插件菜單中的復制插件圖標。

禁用插件
要禁用插件,請單擊插件菜單中的禁用插件圖標。

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

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

改變字體大小

字體樣式和內容對齊
您可以調整添加內容的字間距和內容對齊。首先,點擊插件編輯圖標。轉到前端編輯器的“樣式”選項卡。向下滾動,你會發現字體樣式更改選項也是對齊內容的選項。

頁面庫系統
庫系統是SP Page Builder3的最新功能?,F在,如果您有一個部分行,您希望稍后在不同的頁面中使用它。使用頁面庫系統,首先你必須保存行。保存的頁面將被存儲在庫中。只要您需要,您可以拖放已保存的部分頁面布局。
步驟1:保存部分

步驟2:給它起一個名字

步驟3:在庫中找到它

響應式
您可以使用SP Page Builder 3的前端編輯器調整網站的響應速度。您可以在編輯器的底部找到響應控制按鈕。切換到各種設備,并檢查設計。您在各種設備中所做的修改僅適用于這些設備。

元素響應
您可以對部分行中添加的元素進行響應式設計。您可以在其樣式部分找到該工具。

隱藏響應的列
您可以隱藏在各種設備的任何部分或插件內容,以解決響應性問題。為此,您需要轉到前端菜單的響應選項卡。在那里你必須根據你的設置啟用選項。

頁面選項:打開圖形
要使用打開的圖形功能,您必須點擊編輯器底部的設置圖形?,F在選擇“頁面選項”。在這里你會發現幾個選項。從他們選擇打開圖形。在這里你必須做所有的定制來使用打開的圖形功能。

自定義CSS
要添加自定義CSS,您必須點擊編輯底部的設置圖標。現在選擇“頁面選項”。在這里你會發現幾個選項。從他們中選擇自定義CSS。在這里添加您的自定義CSS。

ACL控制
要使用訪問控制功能,您必須點擊編輯底部的設置圖標?,F在選擇“頁面選項”。在這里你會發現幾個選項。從他們中選擇“發布”。在這里控制訪問。

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

前端邊欄隱藏
要隱藏前端邊欄,請單擊屏幕截圖中指示的圖標。






