簡介

SP Page Builder是一個最靈活的頁面構建工具。通過鼠標拖放即可完成Joomla的頁面構建。你可以創造任何你想要的布局，不像模板那樣，把你限制在預創的模板布局中。它可以用于構建獨特的頁面。它可以使用任何Joomla模板，無論是免費或收費。它允許您輕松地在菜單中添加創建的頁面，并在里面顯示很酷的效果.。無論你是初學者、網頁設計師、或開發商業網站為客戶，或企業主管理和維護自己的網站。SP Builder的靈活性和功能意味著一件事：管理網頁內容設計變得容易。完全兼容你的Joomla！3.6 +網站。你可以從免費版本開始，如果你喜歡的話，也可以購買更高級的收費版本。

這個擴展是特別設計，以幫助您使您的網站更靈活，吸引訪客注意內部元素。我們希望本指南幫助您發現最適合您的下一個或當前項目的組件的功能。

頁面生成器和Joomla模板

SP Page Builder讓你完全自由的去選擇任何你喜歡的Joomla模板。這不是一個單一的模板或模板開發人員的承諾。我們建立了這個組件使其獨立于Joomla！的模板，不管您是否正在處理自定義、免費或商業模板。當然，不需要對現有代碼進行任何調整。優點是你可以隨意隨意更改模板。你的內容將永遠伴隨著你。

例如我們測試它：helix2框架，T3框架，Gantry，翹曲，揭露和YJ簡單網格。

如何安裝SP Page Builder

SP Page Builder 技術要求：

PHP 5.5，PHP推薦5.6 +

PHP memory_limit = 64m（在大多數情況下可以改變php.ini和.htaccess文件）

PHP upload_max_filesize = 8m以上

如果主機Web服務器啟用gzip支持PHP，可以上傳一個壓縮（ZIP）SP頁面生成器包文件將安裝Joomla！后端默認安裝程序。Joomla擴展安裝過程作為模板的同一：

下載組件到您的桌面。

然后登錄你的Joomla的儀表板。在頂部菜單中，懸停在擴展名上，然后單擊“擴展管理器”。

在“上傳包”文件中，單擊“瀏覽”并選擇上面下載的組件。

然后單擊“上載”和“安裝”。

在安裝了SP組件之后，您會得到一條消息，說明安裝過程是成功的。它也意味著你可以用它為你的新項目。

注意：通常在Web服務器本身上傳的文件大小通常有上限。這個限制是在PHP配置文件（PHP INI）可能不同的Web服務器和Web主機。限制不能改變在Joomla！有些托管公司根本不允許改變限額。允許大文件上傳可能需要增加upload_max_filesize，max_file_uploads多數在php.ini文件或主機面板post_max_size設置。值必須高于5字節為每個。有關如何安裝SP Page Builder一樣我們這里有手動錄像：https://www. youtube.com/watch？V = ue7tfmqnbqa

如何更新SP Page Builder Sp Page Builder

可以更新或升級像任何其他的Joomla擴展只是通過安裝在目前的一個新版本。但是每一次，我們強烈建議在使整個MySQL數據庫備份。這一步非常重要，特別是如果你正計劃從免費版本升級到專業版（商業版）。

一些JavaScript用于組件的新版本進行了修改，但是所用瀏覽器仍然使用舊的緩存版本不再工作的JavaScript。一定要清除瀏覽器的緩存，你的Joomla隱藏物。

請在組件更新后：

清除緩存：Joomla系統->清除緩存->清除所有（或從列表SP頁面生成器元）。

清除您的默認瀏覽器緩存。點擊刷新按鈕（或按F5）不會在這種情況下是足夠的，因為這會重新加載網頁時仍使用緩存中的舊文件。你需要使用一個“力刷新”（！）您可以通過按以下鍵組合來實現：

PC：Ctrl + F5

蘋果Mac：CMD + R

這些步驟對于從舊版本到當前版本的更新非常重要。他們幫助CMS從組件獲取最新的JavaScript和CSS庫。

如果插件在后端不正確顯示，你可以嘗試使用瀏覽器的隱身或“隱私瀏覽模式”看問題是由其他的東西比緩存引起的。

注！請不要卸載當前版本，因為您可能會丟失您的頁面條目或崩潰PB表。 如果你有類似的錯誤信息：

未知的a.hits列的字段名的SQL語句選擇張，a.title，a.alias，種A.文字，a.created_user_id，a.published，a.access，a.catid，a.ordering，a.created_time，a.created_user_id，a.language，a.hits，l.title作為language_title，ua.name作為author_name，ug.title作為access_title，c.title作為category_title從jos_sppagebuilder為左連接` jos_languages `（…） 這可能出現在您嘗試安裝新版本修復它你必須使用phpMyAdmin。使用下面的請求，將點擊列添加到表：

ALTER TABLE `#_sppagebuilder` ADD `hits` bigint(20) NOT NULL DEFAULT '0' AFTER `language`;

這里的“#”必須與您的數據庫前綴替換。

phpMyAdmin工具你會在你的主機面板上找到，也可以使用，臨時時期，自由adminer-4.2.x.php PHP腳本（從adminer。org）相反，這是一個全功能的數據庫管理。以上推薦應修復此錯誤。

更新和更新通知

如果你已經購買了Pro版本的SP Page Builder獲得更新通知和更新的可能性，只需點擊一下，你必須把您的帳戶數據設置區域。

在SP頁面生成器支持（行政區）在右上方，你會發現選項按鈕，點擊它，選擇“許可”的標簽，現在你有兩個領域：許可證密鑰和電子郵件joomshaper.com帳戶。 在擴展>更新：選擇“清除緩存”按鈕刪除所有舊的請求。現在你也可以點擊“查找更新”，如果你確信我們發布了新版本，你仍然有一個舊的安裝。

上面的步驟將幫助你解決沒有更新的可能性就像在下面的屏幕截圖的問題。

如何解決juser：：_load：無法加載用戶ID

如果在站點后端看到sp頁生成器頁時看到此錯誤，則表示刪除該項目關聯的用戶。對這個問題有多個固定但他們中的一些人需要使用PHP myadmin–我們寧愿只有100%的通用和安全的解決方案。在組件轉到“發布”選項卡。找到作者和點擊藍色圖標與配置圖標。然后從列表中選擇不同的用戶并保存更改。

嵌套類

SP Page Builder創造的每一頁（Pro）可以被分配到類別和子類別的邏輯結構。類別提供了一個有用的方式來組合相關頁面。默認情況下，沒有任何類別，你不必創建任何如果你不想。你可以添加一個類直接從SP頁面生成器»類屏幕。提供名稱，如果正在創建子類別，則選擇父類別。為你的類別，點擊addcional描述保存和關閉按鈕。

創建和分配類別時，我們認為有一個有計劃的結構是好主意。例如，部門可以基于網頁（英語，荷蘭語，德語，西班牙語）或主題部分，如產品或家庭變化的語言。

如何添加新頁面

這個模塊（塊）為基礎的系統允許你建立你的頁面視覺上沒有與海的凌亂的簡碼觸摸一行代碼或處理。可以使用列和嵌套元素創建高級布局，以及集成就緒模塊。SP Page Builder給你一個全新的工具集，用于創建和管理你的內容標簽，手風琴，圖像，視頻和更多的推薦，當然默認Joomla模塊。與此組件，它真的是拖和下降選擇元素列在一個快速和容易的方式創建頁面布局簡單。這使得您極易維護和自定義站點。

第一步，總是這樣，使用新的按鈕創建一個新的頁面，然后添加標題到這個頁面，這是唯一的強制字段。

可用的選項列表：

允許您使用鼠標在布局中移動行柱

允許您將當前行分割成列插件

允許你插入一個插件塊內從繳費清單（數量取決于SP頁面生成器版本）

選項

它包含列選項

允許您添加新的行

重復-允許您重復行

允許刪除當前行，此操作不能撤消。

列選項

每個列都有自己的選項，允許您設置幾個典型的外觀設置：

背景顏色-選擇背景顏色，默認情況下它是透明的。使用背景顏色和文本/字體顏色，使文本易于閱讀（對比）。

柱填充-允許你改變選擇的柱填料，默認值是相等的：10px 10px 10px 10px（右上左下）。

列動畫-此選項為列提供多個動畫效果。這些措施包括簡單，標準的動畫，經常使用。

動畫持續時間-設置動畫完成一個周期需要多少毫秒，這意味著動畫將運行多長時間。持續時間以毫秒為單位，較高的值表示較慢的動畫，而不是更快的。

CSS類-如果你希望為特定內容元素添加自定義樣式，然后使用此字段添加一個類的名字，然后把它在您的CSS文件。

列大小（添加列）

你可以從可用的選項（變體）中選擇網格，或者選擇自己的值，但總結必須等于12。網格在SP頁生成器是基于引導3布局。引導網格系統允許在頁面上使用的行跨越12列。

下面你可以檢查實際百分比（%）值：

12 =寬度：100%

11 =寬度：91.66%

10 =寬度：83.33%

9 =寬度：75%

8 =寬度：66.66%

7 =寬度：58.33%

6 =寬度：50%

5 =寬度：41.66%

4 =寬度：33.33%

3 =寬度：25%；

2 =寬度：16.66%

1 =寬度：8.33%

（！）記住網格列應該為一行加上十二列。

Joomla核心模塊（S）內

是的，使用默認的（核心）Joomla！在SP Page Builder的布局模塊，從組件不僅插件。

在目前的版本，你可以使用Joomla！核心模塊（比如面包屑、主菜單、登錄表單）。

即使您沒有找到您需要的模塊，您仍然可以使用模塊位置從您的模板插入該模塊上方或下方的區域創建的SP頁生成器。

如何復制一行

SP Page Builder允許您復制行設置不僅在當前編輯頁，而且在不同的網站之間，SP Page Builder已經安裝。在每一行你會發現兩個按鈕：復制和粘貼。首先是創建一個設置代碼，秒允許你插入它。

首先你要做的是點擊“復制”按鈕，等待幾秒鐘，從窗口中選擇所有的代碼，并復制到臨時內存。現在在SP頁面生成器創建一個新的行，然后單擊“粘貼”按鈕。會彈出一個漂亮的對話框，你可以方便地降低代碼的文本。

搜索引擎優化技巧和臉譜網選項

SP Page Builder已經建立在開放的圖形支持。使任何頁面成為社會圖表中的豐富對象。它采用開放式標題圖形，圖像和描述字段-這個選項會增加打開圖標簽在HTML可以幫助臉譜網和谷歌決定哪些圖像應采取。

注意：最好使用方形圖像，就像臉譜網在其中顯示的那樣.。圖像應該在任何的通常支持的圖像形式至少600px寬（JPG，PNG，GIF）。

它是如何工作的

Open Graph協議（OGP）可以使網頁變得相當于一個頁面，通過在FB的社交圖對象。信息通過源頁上的自定義meta標簽設置。打開圖表meta標簽將有助于整合您的網頁到臉譜網時，有人點擊“喜歡”按鈕或一般共享。

什么是優勢

實施開放式圖形標簽后，你將能夠提高你的臉譜網流量倍，只是因為現在總會在文字旁邊的良好形象。使用此選項允許您控制站點信息共享的方式。

典型的元標簽

填寫description和keywords字段由SP Page Builder你必須使用Joomla創建網頁！菜單管理器中你會發現SEO功能：

注：meta描述常用搜索引擎結果頁（SERPs）顯示一個特定網頁預覽。搜索引擎優化長150-160之間的字符。這些短款的機會來宣傳內容的搜索，讓他們知道是否給定的網頁包含了他們正在尋找的信息。與標題標簽一樣，重要的是每個頁面上的元描述是唯一的。

發布選項

在發布選項你可以決定如果當前頁（SP Pabe Builder）：

將被出版或不

對于什么語言-因為語言設置允許您將頁分配給所有語言或特定語言

并設置訪問規則，決定誰將能夠看到頁面，基于默認模板！國際計算語言學協會

如何將頁面視圖添加到菜單中

因為SP Page Builder是Joomla！組件可以使用擴展視圖輕松添加新的菜單項.。最后我們需要做的是添加一個新的pagelink到我們站點的菜單。在我們的情況下，我們將添加到主菜單。

在“菜單管理器”中使用“新建”按鈕創建新菜單項。

在新窗口中插入新的項目標題。這是實際的文本，將顯示在您的網站菜單。 在菜單項類型中選擇一種頁面生成器。

一個燈箱會出現讓你選擇菜單項的類型你會創造。選擇“頁面生成器”頁面。

現在需要指定要在該菜單中顯示的確切頁項。

為此，單擊“選擇頁”字段旁邊的“選擇”按鈕。

然后從列表中選擇要從已創建和發布的頁面中使用的頁面。

一旦你這樣做，點擊保存和關閉按鈕在頁面的上部。

您現在可以導航到新創建的頁面。

如何翻譯網站界面

如果英語不是你的母語，你可能想使用另一種語言的SP頁面生成器組件（S），例如：德語、意大利語、荷蘭語、俄語或suahili。我們同意翻譯是網站本地化過程的重要組成部分，并可能幫助您的客戶了解我們的工具如何工作（管理面板）。該組件包含一個文件（INI），包含了所有我們所使用的英語術語；這讓我們的用戶只能編輯為一個文件能夠轉化我們的模板在世界上的任何語言。你所要做的就是翻譯兩個文件：

語言en GB \ en-gb.com_sppagebuilder.ini（該文件包含用于聯系表單字段和推特插件的話）

管理員\語言\ en GB \ en-gb.com_sppagebuilder.ini（該文件包括所有行政用語）

記住，而不改變原始文件，你可以復制這個文件（從服務器、模板快速入門或組件包）。打開INI文件用文本編輯器能夠處理UTF-8。每個HTML將為此好。您也可以使用免費工具，如：記事本+ +如果您使用的是Windows操作系統。一個好的開始，是要確保你使用UTF-8編碼。現在，您可以將選定的條目翻譯成您的首選語言或本機語言。編輯該文件，并將等號右側的短語翻譯為新語言。每條線的左邊（等號的左邊）必須保持不變--系統需要它們。您不必翻譯所有字符串從該文件，只選擇那些你真正需要的。每個翻譯字符串必須由雙引號括起來，總是！ 然后，您必須更改文件名 來自：en-gb.com_sppagebuilder.ini ：xx-xx.com_sppagebuilder.ini 在XX是一個lang-prefix，例如ES ES–西班牙（西班牙ñOL）。 所有的短語從接觸形式和推特插件內部文件：語言en GB \ en-gb.com_sppagebuilder.ini：

#Ajax Contact#
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_NAME="Name"
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_EMAIL="Email"
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_SUBJECT="Subject"
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_MESSAGE="Message"
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_SEND="Send Message"
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_WRONG_CAPTCHA="Wrong answer! Please enter right answer."
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_SUCCESS="Email sent successfully!"
COM_SPPAGEBUILDER_ADDON_AJAX_CONTACT_FAILED="Email sent failed."
#Tweet Addon#
COM_SPPAGEBUILDER_TWEET_FOLLOWERS="Followers"
COM_SPPAGEBUILDER_TWEET_FOLLOW="Follow"
COM_SPPAGEBUILDER_SECOND="Second"
COM_SPPAGEBUILDER_SECONDS="Seconds"
COM_SPPAGEBUILDER_MINUTE="Minute"
COM_SPPAGEBUILDER_MINUTES="Minutes"
COM_SPPAGEBUILDER_HOUR="Hour"
COM_SPPAGEBUILDER_HOURS="Hours"
COM_SPPAGEBUILDER_DAY="Day"
(...)

一旦內部文件的短語已被翻譯，你可以復制你的語言文件到你的語言目錄使用FTP客戶端。這就是全部。

你可以把選定的短語也使用覆蓋功能在Joomla（頂部菜單）：擴展>語言>重寫標簽經理。但首先你得知道大字母短語，把它們從語言文件。下面是后端的例子。

在語言的不斷輸入字段插入

例如：“com_sppagebuilder_addon_ajax_contact_send”沒有引號–然后在下一場你翻譯的短語。在我們的例子中（下）我們使用聯系表格添加一個短語。

隱藏在移動設備上

是的你可以隱藏選中的元素只能從智能手機和平板設備。如果您使用的是SP Page Builder（Pro）對joomshaper模板基于HELIX3，你是幸運的，因為他們都是基于Bootstrap 3網格系統的建立。引導包括響應，移動第一流體網格系統，適當擴展到12列裝置或視口大小的增加。為了更快的移動友好的開發，您可以使用引導3類通過媒體查詢顯示和隱藏設備的內容。內容在視口切換斷點可用類的單一或組合使用。

下面你可以在插件設置窗口看到使用“隱藏的XS”類的例子。當然，你也可以在行和列類字段中使用它們。

這里是您可以在SP頁生成器頁中使用的所有類的列表，當然，如果使用的模板使用引導3。

你可以看到它是多么容易建立復雜和動態頁面與SP頁生成器和引導3網格。

在helix2模板頁面生成器

SP Page Builder不是典型的Joomla組件和特別注意的是，如果你打算把網頁建SP鉛作為你的主要要求，首頁。特別是，你需要關閉Joomla組件塊從你的布局：

在你的Joomla后端去擴展->模板管理-> shaper_templatename（基于helix2框架）。

點擊標簽“高級”-找到參數“組件區”-選擇選項“否”- >點擊保存和關閉（見截圖附后）。

重要提示：這只joomshaper的模板，基于螺旋II，所以它不會工作，如果你的模板是基于新的螺旋3。基于HELIX3你不用更改任何設置的模板，因為你不會找到一個這樣的開關了。

沒有在前端的文本塊？

如果你正確地添加了文本塊，文本區域填充了內容并保存在大多數情況下，就可以看到整個文本.。但有一個實例，當您可能沒有看到內容。

當你在文本中添加“[]”時，例如你已經寫了[按鈕]。抱歉，但SP Page Builder內部不能使用“[]”-內容區域內的括號。刪除所有，然后保存設置，您將再次看到整個文本。

如何重寫插件

插件已經內置的SP Page Builder可以很容易地覆蓋例如模塊。在Joomla模板重寫！幾乎是無限的。

這里有一些提示可以幫助你理解整個概念：

從這個文件夾：部件com_sppagebuilder \插件

選擇插件，你要修改，多使用CSS規則。

使用FTP工具復制整個選定的文件夾（與admin.php和site.php內）內使用模板：模板shaper_template sppagebuilder \插件\ \ \

現在你可以很容易地改變PHP代碼里面而不擔心下一個組件的更新將隱藏它。

如何創建一個新的插件

第一次注意到，在大多數情況下，你必須創建一個新的PHP插件。如果你沒有的話，我們建議重寫當前插件或使用一個已經是組件。另外別忘了，你可以使用任何模塊內的SP Page Builder布局，采用模塊插件。

在SP頁面生成器工具，有超過40個插件，其中一些是簡單的當別人有更復雜的結構。我們建議你開始分析像這樣簡單的一個：

部件com_sppagebuilder \插件\ empty_space

部件com_sppagebuilder \插件\ raw_html

部件com_sppagebuilder \插件\圖標

你可以看到那些與選項/少數功能基本插件。但它們都有通用的對象和代碼段。

每個插件都有自己的文件夾，只是用3文件的建立：

admin.php -包括所有的設置，語言的字符串和聲明

icon.png -只是一個圖形圖標管理區，32x32像素，PNG格式

site.php -包括基于管理員設置視圖的前端 一個新的插件需要有新的、獨特的名稱應在PHP文件確定。

在site.php上部：

AddonParser::addAddon('sp_new','sp_new_addon');
function sp_new_addon($atts, $content){

在admin.php和文件：

SpAddonsConfig::addonConfig(
    array( 
        'type'=>'content', 
        'addon_name'=>'sp_new',

結構admin.php復雜得多因為它包括前端查看所有設置。希望插件的名字，你要決定什么類型的元素，您將使用在：

彩色（顏色選擇器）

編輯器（帶有編輯工具欄的文本區域）

選擇（從確定值的選擇）

文本（用于單行輸入和接受任何形式的文本）

數字（用于數字輸入和只接受數字值）

媒體（允許插入和上傳圖像的媒體管理器）

可重復性（手風琴字段插入數據）

圖標（可怕的字體圖標選擇器）

這是從功能插件實例代碼：

         'heading_selector'=>array(
                'type'=>'select', 
                'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS'),
                'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_DESC'),
                'values'=>array(
                    'h1'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H1'),
                    'h2'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H2'),
                    'h3'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H3'),
                    'h4'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H4'),
                    'h5'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H5'),
                    'h6'=>JText::_('COM_SPPAGEBUILDER_ADDON_HEADINGS_H6'),
                    ),
                'std'=>'h3',
            ),

            'title_fontsize'=>array(
                'type'=>'number', 
                'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_FONT_SIZE'),
                'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_FONT_SIZE_DESC'),
                'std'=>''
                ),

            'title_fontweight'=>array(
                'type'=>'text', 
                'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_FONT_WEIGHT'),
                'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_FONT_WEIGHT_DESC'),
                'std'=>''
                ),

            'title_text_color'=>array(
                'type'=>'color',
                'title'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_TEXT_COLOR'),
                'desc'=>JText::_('COM_SPPAGEBUILDER_ADDON_TITLE_TEXT_COLOR_DESC'),
                ),

其中負責頁眉，字體大小，字體重量和標題顏色設置。

內部頁面組件生成器

只允許的Joomla模塊包括對你的文章內容的模塊路徑的負載組件的插件。不幸的是你不能在相同的組件。 什么是重要的是知道，SP和頁面生成器組件Joomla默認是不是讓你使用一個以上的組件在一個單一的視圖。

編輯工具條

在SP頁面生成器的所有內容的文本區，我們使用TinyMCE 4。x是所有Joomla默認的WYSIWYG編輯器！3，我們知道在某些情況下，也有少數的功能（動作按鈕在工具欄），所以如果你想改變它，你必須對SP頁面生成器核心文件編輯：管理員\組件\ com_sppagebuilder \資產\ \ helper.js JS

這個文件你可以在里面找到：快速入門（QS）或SP Page Builder（Pro）軟件包。如果你已經安裝了QS和你沒有更新組件，請從入門包帶helper.js文件。

在下面的例子中我們將告訴你如何添加兩個按鈕：字體顏色和背景顏色圖標到現有內容工具欄。

1）在helper.js文件找到節“插件：“大概會在255號線"

2）添加新列，如本例中的代碼：“文字顏色拾色器Textpattern”，

            plugins: [
            "advlist autolink autosave lists link charmap preview image",
            "searchreplace code fullscreen",
            "textcolor colorpicker textpattern",
            "media contextmenu paste"
            ],

3）然后找到符合“工具欄：“如果要幾行進一步，還應該添加新的短語：前景色背景色

4）保存在用于編輯和復制更新版本的文件服務器使用FTP工具。

5）學習如何添加更多的按鈕，請閱讀：m.askjerry.cn