LiveCanvas Review - 開發人員友好的 WordPress 頁面構建器

在這篇評論中，我們研究了一個帶有內置 HTML 和 CSS 編輯器的 WordPress 頁面構建器插件：LiveCanvas。

雖然有許多可用於 WordPress 的頁面構建器插件，但這個插件旨在通過盡可能對開發人員友好來在競爭中脫穎而出。

不僅如此，這個頁面構建器的輸出是純 HTML 和 CSS。 多虧了這一點，與其他一些頁面構建器插件相比，您的頁面應該加載得更快並且對 SEO 更友好。

在 LiveCanvas 的這篇評論中，我們涵蓋了該工具的所有最佳功能，以幫助您確定這是否是適合您網站的 WordPress 頁面構建器插件。

讓我們開始吧…

LiveCanvas 插件適用於誰？

任何想要完全控制其 WordPress 網站設計的人都應該發現 LiveCanvas 是一個有趣的插件。

但是，LiveCanvas 有許多功能，開發人員和編碼人員應該會發現它們非常有用。 這些功能有助於將 LiveCanvas 與競爭對手區分開來。 感謝我們稍後在本評論中更詳細地介紹的 HTML 和 CSS 編輯器，您可以使用此 WordPress 插件對網站的外觀進行大量控制。

因此，如果您想創建自定義 WordPress 網站，或將具有自定義設計的頁面添加到您的網站，LiveCanvas 可能是您的插件。

LiveCanvas 使用它自己的主題——UnderStrap 的自定義子主題。 這意味著兩件事：良好的站點性能和將 Bootstrap 4 作為底層 CSS 框架。

LiveCanvas WordPress 插件功能

由於 LiveCanvas 是一個強大的 WordPress 頁面構建器插件，它具有許多功能。 以下是此工具的一些亮點，可幫助您確定它是否適合您。

為了快速了解該插件，該視頻為您提供了 LiveCanvas 功能的快速演練。

開發人員友好的頁面構建器插件

此頁面構建器對開發人員友好的功能之一是 LiveCanvas 代碼編輯器。 使用插件創建頁面設計時，您可以快速查看底層 HTML 和 CSS。 您不僅可以查看此代碼，還可以通過用戶友好的編輯器對其進行編輯。

與許多其他 WordPress 頁面構建器插件相比，這為您提供了更多的自由。 多虧了這一點，您應該能夠為您的 WordPress 網站創建真正自定義和獨特的設計，同時使用現成的插件。

但是，如果您不是開發人員並且對編輯底層 HTML 和 CSS 沒有興趣，您可以只使用 LiveCanvas 的前端 WYSIWYG 界面來構建您的頁面。

大量現成內容

雖然 LiveCanvas 肯定會吸引任何想要創建完全自定義的 WordPress 網站的人，但它也附帶了一些漂亮的現成內容。

大量部分觸手可及 - 您可以組合和混合以輕鬆創建自定義網頁。

評論是。

所有這些現成的部分都是完全可編輯的，因此您可以隨時使用它們或自定義它們以使其成為您自己的。 它們只是 HTML5 代碼塊——使用 Bootstrap 4。

此內容涵蓋的部分類型的一些示例包括英雄部分、功能面板、圖庫網格和號召性用語面板。 您還可以添加團隊成員個人資料面板、定價表部分和推薦顯示。 每種類型都有多種變體，因此無論您的設計偏好和要求是什麼，您都應該能夠找到適合您網站的內容。

由於時尚的現成內容部分，您應該會發現使用 LiveCanvas 可以輕鬆快速地構建您的頁面。

前端頁面構建器界面

像許多 WordPress 最好的現代頁面構建器插件一樣，LiveCanvas 有一個前端界面。 這意味著您的所有定制工作都是通過 WYSIWYG 編輯器進行的。 過去，對於大多數此類插件，這項工作將在您的 WordPress 網站的後端進行。 這很不方便，因為您正在處理的頁面視圖與訪問者在發佈內容時看到的版本完全不同。

由於 LiveCanvas 具有前端界面，因此您可以在處理頁面時很好地了解頁面上線時的外觀。 這消除了保存您的工作、在新的瀏覽器選項卡中預覽您的頁面以及切換選項卡以查看它上線時的外觀的需要。 多虧了這一點，與使用帶有後端編輯器的頁面構建器相比，您可以使用 LiveCanvas 更快地創建自定義頁面設計。

以下是 LiveCanvas 頁面構建器界面的一些最佳功能：

編輯歷史

為了給您更多的創作自由和工作能力而不必擔心犯錯，LiveCanvas 具有撤消功能。 這讓您可以恢復到以前版本的自定義頁面設計，如果您看起來不像您認為的那樣。 現在您可以充滿信心地進行試驗，因為您知道您犯的任何錯誤都可以迅速改正。

簡單的 HTML 和 CSS 編輯

正如之前在 LiveCanvas 評論中提到的，這個頁面構建器插件有一個代碼編輯器。

與其他一些流行的 WordPress 頁面構建器插件不同，LiveCanvas 可以輕鬆編輯頁面的底層 HTML 和 CSS。 多虧了這一點，您可以更好地控制內容的外觀。 您可以隨時查看 HTML，然後對其進行更改。 這些更改將立即應用於您的頁面，從而輕鬆控制您的內容設計。

使用 LiveCanvas，代碼編輯器界面可以更輕鬆地編輯 HTML 和 CSS。 當您打開 HTML 編輯器時，所有代碼的格式都清晰且對齊。 顏色用於使代碼更易於閱讀。 您還可以輕鬆折疊和折疊代碼，以更清晰地查看您正在編輯的部分。

如果您需要調整代碼編輯器窗口的大小，那也很容易。 只需拖動窗口的邊緣即可根據需要將其縮小或放大。 LiveCanvas 代碼編輯器的另一個真正令人印象深刻的功能是自動完成功能。 這將幫助您更快地編寫代碼並通過自動完成提出建議來減少錯誤。 代碼編輯器的另一個有用方面是它能夠通過添加您忘記包含的任何結束標記來修復您的代碼。

LiveCanvas 編輯器也可以幫助您避免在編輯頁面的 HTML 和 CSS 時不知所措。 為此，代碼編輯器會從視圖中隱藏所有 HTML 和 CSS，除了您正在編輯的特定元素。 這使您可以專注於您正在處理的頁面部分，而不會分心或迷失在頁面代碼的其餘部分。

即使您對 HTML 知之甚少，或一無所知，此功能仍然很有用。 由於網上有很多 HTML 片段，您可以將這些示例複製並粘貼到 LiveCanvas 頁面設計中。 因此，您可以向您的頁面添加更多元素，例如您在網上找到的號召性用語按鈕。 或者，如果您確實了解一些 HTML，那麼您一定會喜歡將您自己的 HTML 添加到您的頁面的輕鬆方式。

製作自己的積木：塊和截面庫

在 LiveCanvas 中，您可以選擇將自己的 HTML 塊保存到本地庫中，以便在您的頁面中輕鬆重用。 這是一個很好的節省時間的功能——它絕對是創建多個自定義頁面或網站的人會喜歡的。

實際上，有兩個獨立的庫，Sections 和 Blocks：Sections 用於那些大的、全寬的、大型的現成元素。 塊用於進入網格內的項目 - 因此通常不是全寬。

如果您過去使用過其他 WordPress 頁面構建器並發現您的內容看起來都非常相似，則此功能可以幫助您構建自己的自定義模塊庫，使您的設計具有完全原創的外觀 – 並滿足您高度特定的需求.

創建自定義頁腳

一些 WordPress 頁面構建器只允許您編輯帖子和頁面區域。 但是，LiveCanvas 的情況並非如此。 如果您想為您的 WordPress 網站創建自定義頁腳，您可以使用 LiveCanvas 來完成。 您不僅限於向頁腳添加小部件。 相反，您可以通過 LiveCanvas 內容編輯器及其對處理自定義 HTML 的支持向其中添加任何內容。

快速訪問庫存圖片

在創建自定義網站或頁面時，您可以使用 LiveCanvas 快速將庫存圖像插入到您的佈局中。 由於與 Unsplash 的集成，您可以瀏覽他們免費使用的大型圖像庫。 找到您喜歡的一個後，您可以快速將其插入到您的頁面中。 所有這些都發生在 LiveCanvas 編輯界面內部。

頁面動畫效果 *********

為了幫助您的內容吸引訪問者的注意力，LiveCanvas 可以輕鬆地向您的頁面添加動畫。 在 LiveCanvas 的後端設置頁面中選中一個選項，就會將 Animate On Scroll 庫添加到站點中。 在 LiveCanvas 編輯器中，您可以為每個元素分配各種動畫，如淡入淡出、翻轉、滑動和縮放，同時控制動畫的持續時間和延遲。

通用短代碼支持

LiveCanvas 使您能夠將任何短代碼插入到您的自定義頁面設計中。 這允許在 LiveCanvas 驅動的頁面中集成任何類型的第三方插件和功能，並提供方便的實時 ajax 預覽，因此您可以立即看到短代碼的輸出是什麼樣的。

由於 WordPress 有很多短代碼插件可用，您可以快速增加可以插入到使用 LiveCanvas 創建的自定義頁面中的元素數量，從而成倍地擴展您的創意選項。

一個夢幻般的補充主題

LiveCanvas 確實帶有推薦的、補充的入門 WordPress 主題：CustomStrap。

作為速度和可靠性的保證，很高興知道 CustomStrap 是 UnderStrap 的子主題，UnderStrap 是最受好評和純 Bootstrap 4 驅動的入門主題。

CustomStrap 具有內置的 SCSS 編譯器，因此您可以即時重建並自定義 Bootstrap 的 CSS 以擁有您的特定調色板，並賦予其獨特的樣式——所有這些都來自 WordPress 定制器界面，無需在您的系統上安裝極客的 npm 包。通過命令行的機器。

一些設計師認為 Bootstrap 網站看起來都一樣。 CustomStrap 不會發生這種情況——您擁有數千種字體、顏色、樣式的組合。

CustomIt 還允許啟用響應式排版功能，這在當今的移動優先世界中非常有用。

但是，您不會被一種選擇所困。 LiveCanvas 將適用於任何基於 Bootstrap 4 的 WordPress 主題。 如果您有自己的基於 Bootstrap 4 的自定義主題，您將能夠無縫運行 LiveCanvas 插件來構建您的自定義頁面。

沒有供應商鎖定

正如本 LiveCanvas 評論前面所述，您可以輕鬆訪問和編輯由編輯器的可視界面生成的 HTML 和 CSS。 雖然這為您的頁面提供了更大的創作自由，但它還有另一個好處。

由於 LiveCanvas 為其頁面設計生成乾淨的 HTML 和 CSS，如果您禁用該插件，您的頁面設計仍將正常工作。 這意味著您不會像使用其他頁面構建器插件那樣終生使用 LiveCanvas。

即使插件被禁用，您仍然可以訪問和編輯頁面 HTML 和 CSS 以對其進行更改。 您將無法通過 LiveCanvas 用戶界面或代碼編輯器進行更改，除非您重新激活該插件。

LiveCanvas 插件用戶體驗

為了讓您了解此頁面構建器的用途，我們 LiveCanvas 評論的這一部分將探索該插件的用戶體驗。

如前所述，LiveCanvas 應該適用於任何基於 Bootstrap 4 的 WordPress 主題。 但是，該插件還帶有自己的入門主題，您可以使用它來代替來自其他來源的主題。

無論您選擇哪種主題，在您的站點上安裝插件後，您都可以輸入 LiveCanvas 許可證密鑰以啟用自動更新。

要開始為您的 WordPress 網站創建自定義頁面設計，只需從 WordPress 儀表板中創建一個新頁面即可。

該插件向頁面編輯器添加了一個面板，使您能夠為該內容打開 LiveCanvas 編輯器。

啟用 LiveCanvas 編輯器

為特定頁面啟用 LiveCanvas 後，您可以開始使用內容編輯器來創建自定義設計。

向頁面添加部分後，您可以在該部分中插入一些內容。 由於 LiveCanvas 帶有許多預先構建的部分，因此您可以快速開始構建頁面。

現成的頁面部分

您可以添加到頁面的不同元素都井井有條，可以輕鬆找到您要查找的內容。 將一個添加到頁面後，您可以開始通過實時編輯器對其進行自定義。

內聯文本編輯

由於 LiveCanvas 具有在線文本編輯功能，您只需單擊文本區域並開始輸入即可添加您自己的內容。

如果您想編輯頁面上的另一種類型的元素，例如圖像，也同樣簡單。 為此，請單擊該元素，然後該項目的控件將顯示在側欄中。 然後，您可以通過側邊欄面板控件自定義該元素。

智能手機和平板電腦視口

在頁面上工作時，您可以隨時更改視口的大小。 這樣做可以讓您很好地了解您的內容在一系列設備上的外觀。 這包括小屏幕智能手機、平板電腦和其他預設視口。

HTML 和 CSS 編輯

如前所述，LiveCanvas 的主要功能之一是 HTML 和 CSS 編輯器。 您可以隨時切換到 HTML 編輯器，只需單擊頁面元素（例如行），然後單擊相應的菜單項即可。

為避免混淆，HTML 編輯器只顯示您正在編輯的元素的 HTML。 此外，只要您對 HTML 進行任何更改，它就會應用到您的頁面，以便您可以看到編輯的結果。

希望這能讓您了解此頁面構建器插件的工作原理。 現在讓我們來看看定價信息。

LiveCanvas WordPress 插件定價信息

LiveCanvas 是一個高級插件，可用於兩個定價計劃：

• 優點：每年 79 美元，可獲得 1 年的更新和支持。
• 終身：199 美元，終身獲得更新和支持。

無論您選擇哪個選項，您都可以根據需要在任意數量的網站上使用 LiveCanvas。 這包括您為客戶創建的任何網站。

LiveCanvas 回顧最後的想法

LiveCanvas 具有許多最流行的 WordPress 頁面構建器插件中的最佳功能。 這包括現代拖放界面、精選的現成內容以及大量自定義控件。

但是，它還具有用戶友好的 HTML 和 CSS 編輯器，可讓您更好地控制頁面設計。

因此，如果您正在尋找靈活且對開發人員友好的 WordPress 頁面構建器插件，LiveCanvas 是一個不錯的選擇。

訪問 LiveCanvas 網站以了解有關此頁面構建器插件的更多信息。