WordPress設計自定義變得容易


如果您是想在不接觸CSS的情況下自定義WordPress網站設計的眾多初學者之一,那麼您很幸運。 適用於WordPress的CSS Hero插件使您無需觸摸任何一行代碼即可進行設計自定義。 在此更新的CSS Hero評論中,我們將向您展示如何使用CSS Hero來定制您的網站,以及為什麼我們認為它是每個WordPress初學者都應該嘗試的插件之一。

CSS Hero評論

我們的CSS Hero評論

CSS Hero是一個高級WordPress插件,可讓您無需編寫任何代碼即可設計自己的WordPress主題(無需HTML或CSS)。

您可以撤消更改,這對初學者非常有用。 所有更改都保存為其他樣式表,這意味著您可以升級WordPress主題而不必擔心丟失更改。

如果您是設計師或開發人員,則同樣會發現CSS Hero。 它與所有流行的WordPress主題和框架均能很好地工作。 您可以快速更改子主題,然後將其導出以在客戶的網站上使用。

在進行設計定制時,CSS Hero可以為您節省大量時間和挫敗感。

通常,由於單擊和單擊設計定制插件的尺寸過大,我們對此非常懷疑。 但是,CSS Hero從一開始就給我們留下了深刻的印象。

如果您要我們提供誠實的CSS Hero評論,那麼我們將給它5星(滿分5星)。

如何使用CSS Hero自定義您的WordPress主題

首先,您需要安裝並激活CSS Hero插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

它是一個高級WordPress插件,單個站點的價格從29美元起(考慮到時間和麻煩,這完全值得投資,可以節省您的時間)。

使用CSS Hero優惠券代碼: 初學者 獲得34%的特別折扣。 如果您購買的是PRO計劃,那麼相同的代碼將給您40%的折扣。

激活後,您將被重定向以獲取CSS Hero License密鑰。 只需按照屏幕上的說明進行操作,然後單擊幾下即可將您重定向到您的站點。

CSS Hero的目標是為您提供一個WYSIWG(所見即所得)界面來編輯主題。 登錄後只需訪問您的網站,您就會在WordPress管理欄中註意到CSS Hero按鈕。

CSS Hero按鈕

單擊該按鈕會將您的站點轉換為實時預覽。 現在,您將能夠看到CSS Hero工具欄。

CSS Hero實時編輯器

接下來,只需單擊您網站上的任何元素,CSS Hero就會為您顯示主題用於該特定元素的CSS屬性。

元素屬性

這些將包括所選元素的通用CSS屬性,例如背景,版式,邊框,間距等。 您可以單擊任意項以將其展開,然後使用簡單的用戶界面編輯CSS屬性。

編輯屬性

進行更改時,您會注意到自定義CSS神奇地出現在下面。 如果您正在學習CSS,那麼在實時預覽中查看如何對結果應用不同的CSS更改會很有用。

使用CSS Hero編輯不同元素的樣式

在為您的網站查找免版稅圖片時遇到麻煩? CSS Hero帶有內置的Unsplash集成,可讓您瀏覽,搜索和使用網站設計中的精美照片。

在網站的設計中使用免版稅圖片

CSS Hero還附帶了一些現成的摘要,您可以將其應用於網站上的不同元素。 只需切換到左列中的“片段”選項卡。

CSS英雄現成的片段

當您對網站進行更改時,CSS Hero將自動保存這些更改,但不會將其發布。 要將這些更改應用於實時網站,您需要單擊“保存並發布”按鈕。

保存並發布您的更改

如何撤消CSS Hero中的更改

CSS Hero的最佳功能之一是能夠隨時撤消所做的任何更改。 CSS Hero保留您對主題所做的所有更改的歷史記錄。 只需單擊CSS Hero工具欄中的歷史記錄按鈕即可查看更改列表。

CSS Hero歷史

您可以單擊日期和時間來查看您的網站當時的狀況。 如果要恢復到該狀態,則只需保存或從該點繼續編輯。

這並不意味著您在那之後所做的更改會消失。 它們仍將被存儲,您也可以還原到該時間。 沒有比這更簡單的了。

但是,如果您只想還原對特定項目所做的更改,該怎麼辦?

在這種情況下,您無需使用歷史記錄工具。 只需單擊要還原的元素,然後單擊重置按鈕。

重置單個元素

這會將項目更改回由WordPress主題定義的默認設置。

在CSS Hero中為移動設備自定義您的網站

Web設計中最具挑戰性的方面是設備兼容性。 您需要確保您的網站在所有設備和屏幕尺寸上看起來同樣令人眼花亂。 Web設計人員使用各種工具來測試瀏覽器和設備的兼容性。 幸運的是,CSS Hero帶有內置的預覽工具。

只需單擊CSS Hero工具欄中的桌面圖標,然後單擊設備類型。 您可以從移動設備,平板電腦和台式設備中進行選擇。 預覽區域將變為您選擇的設備。

在不同的設備模式下編輯

現在,您可以在預覽移動設備的同時對其進行編輯。 此工具對於調整手機和平板電腦的主題設計特別有用。

CSS Hero主題兼容性

CSS Hero官方網站上的兼容主題列表越來越多。 此列表包括許多最好的免​​費WordPress主題。 它還具有來自CSSIgniter,Themify,StudioPress等商店的最受歡迎的高級主題。

主題兼容性列表中沒有的主題呢?

CSS Hero具有一項稱為“火箭模式自動檢測”的功能。 如果您使用的主題不包含在主題兼容性列表中,則CSS Hero將自動開始使用火箭模式。

火箭模式會嘗試從主題中自行猜測CSS選擇器。 在大多數情況下,這都是完美的。 如果您的主題遵循WordPress編碼標準,那麼您幾乎可以編輯所有內容。

您可能還需要聯繫主題開發人員,並要求他們提供與CSS Hero的兼容性。

哪些插件與CSS Hero兼容?

CSS Hero已定期通過頂級WordPress插件進行兼容性測試。 這包括聯繫表單插件,流行的頁面構建器,WooCommerce等。

如果您使用的WordPress插件生成的輸出無法被CSS Hero編輯,那麼您可以要求插件作者對此進行修復。 他們真的不需要做太多工作就能提供與CSS Hero的兼容性。

我們希望您發現我們的CSS Hero評論有用。 您可能還想看看我們為初學者提高WordPress速度和性能的最終指南。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。