使用Elementor加快設計過程的提示

眾所周知,Elementor是當今WordPress社區中最好的頁面生成器之一。而且,它不再只是頁面構建器。 Elementor的發展如此之快,以至於即使沒有免費的基本WordPress主題,您也可以設計功能全面的網站,而無需編寫任何代碼!

儘管Elementor提供了許多選項和自定義功能,但我們經常會錯過該插件的較小細節和部分,這些細節和部分可能會對網站的設計過程產生重大影響。

使用Elementor設計網頁已經非常簡單快捷,但是如果您想加快設計過程,那麼您來對地方了。在本文中,您將學習如何通過充分利用帶有第三方工具的編輯器來使用Elementor加快設計過程。

從預製模板開始

預製模板可以加快項目的開發速度。從頭開始設計新頁面需要花費時間,而且經常會不斷調整頁面的布局和樣式,而浪費時間。這正是模板派上用場的地方。 Elementor的模板庫是加快設計過程的絕佳資源。即使您不使用預製模板,也可以始終使用模板庫作為靈感。只需單擊一下即可輕鬆將模板直接導入到頁面中。

Elementor模板可分為兩部分。首先,例如,當您想要從上到下導入預製頁面時,可以導入包含其所有內容的完整頁面(如「關於」或「聯繫」頁面)。第二個選項是如果您只想導入設計的一個部分或模塊。例如,如果您喜歡服務,英雄,與我們聯繫或訂閱這些部分之一,則可以執行此操作。

網上有大量免費的優質模板集。

Envato市場

Envato市場

Envato市場 可能不僅是Elementor模板而且是WordPress主題和插件的最受歡迎的市場。

TemplateMonster

TemplateMonster

TemplateMonster 是高質量模板資產的另一提供商,他們還提供了一些免費模板。

Elementor模板庫

Elementor模板庫

Elementor模板庫 –是Elementor的本機模板倉庫,新的Free和Premium模板經常出現。

使用熱鍵

如果您僅用滑鼠來使用Elementor,請停止!花10分鐘學習簡碼,這將為您節省大量時間並加快網站的設計過程。除了簡單的複製和粘貼外,您還可以使用更高級的自定義快捷方式。它們非常有用,特別是如果您要在面板和預覽模式之間導航或切換到移動編輯時。

以下列出了可以大大提高網站設計速度的快捷方式:

動作

撤消 Ctrl / Cmd + Z 撤消頁面上所做的任何更改
重做 Ctrl / Cmd + Shift + Z 重做頁面上所做的任何更改
複製 Ctrl / Cmd + C 複製部分,列或小部件
Ctrl / Cmd + V 粘貼節,列或小部件
粘貼樣式 Ctrl / Cmd + Shift + V 粘貼欄目,欄目或小部件的樣式
刪除 刪除 刪除已編輯的節/列/小部件
重複 Ctrl / Cmd + D 複製已編輯的節/列/窗口小部件
保存 Ctrl / Cmd + S 將頁面保存到修訂歷史記錄

面板/預覽 Ctrl / Cmd + P 在面板和預覽視圖之間切換
移動編輯 Ctrl / Cmd + Shift + M 在台式機,平板電腦和移動設備視圖之間切換
歷史 Ctrl / Cmd + Shift + H 轉到歷史記錄面板
航海家 Ctrl / Cmd +我 打開導航器
模板庫 Ctrl / Cmd + Shift + L 打開我們的模板庫模式
鍵盤快捷鍵 Ctrl / Cmd +嗎? 打開鍵盤快捷鍵幫助窗口
放棄 退出 打開設置並跳至退出至儀錶板

頁面的自定義CSS

您是否知道每個頁面都有自定義CSS?是的,但是請注意,此功能僅包含在Elementor Pro版本中。作為解決方法,我將向您展示如何為每個頁面添加自定義CSS。如果您只想在頁面級別添加小型自定義專業版,則此技巧將為您節省金錢。

為此,您只需要利用HTML小部件和其中的這段代碼即可:

看一下這個例子:

自定義代碼

Elementor Finder搜索欄

通常,在進行頁面設計時,您想跳到其他頁面,設置,銷售頁面或其他任何地方,並且如果您:保存頁面>返回儀錶板>打開頁面,可能會很費時。 >搜索您要打開的頁面。如果您不得不一次又一次地這樣做,則會浪費大量時間和精力。

幸運的是,Elementor具有內置的解決方案,可以簡化並加快設計過程。您不必使用所有麻煩,而只需使用Elementor Finder。您可以通過在搜索欄中搜索來直接跳到任何設置,模板,頁面或主題部分。可以通過在WordPress儀錶板中的任意位置單擊Cmd / Ctrl + E鍵來訪問Finder。觀看此視頻,了解您可以使用Finder進行的所有操作。

使用導航器

導航器是一個導航樹窗口,可輕鬆訪問頁面構建器中的每個元素。這個小窗口使您可以瀏覽元素並輕鬆拖放小部件。

對於長頁面或具有複雜多層設計的頁面,以及對於組合了Z索引,減去頁邊距,絕對位置等的元素,導航器特別有用。它使您可以訪問可能位於其他元素後面的元素句柄。

您可以通過以下三種簡單方法之一訪問Navigator:

  1. 右鍵單擊任何元素,然後單擊「導航器」。這將自動將您重定向到導航樹中的特定元素。
  2. 點擊面板頁腳中的元素按鈕。
  3. 使用Cmd / Ctrl + I鍵盤快捷鍵。

觀看此視頻以觀看實際操作:

導航器還具有其他功能,例如,命名小部件,摺疊和擴展小部件,浮動或停靠面板以及顯示或隱藏小部件。您可以在他們的網站上看到完整的評論 文件資料

定義調色板

通常,在設計網站時,我們遵循設計者創建的設計模式。該圖案通常包含在整個站點上重複的顏色的組合。這些是應保持不變的品牌顏色。這意味著每次我們在頁面上添加新的小部件時,我們都必須複製粘貼顏色代碼,或者我們必須記住要在小部件設置中應用顏色代碼。這樣做可能很耗時。幸運的是,Elementor為我們提供了解決方案。

您可以在「顏色選擇器」設置中定義品牌顏色,並在每次訪問小部件樣式的顏色選項時重複使用它們。只需選擇一個預設調色板或定義自己的自定義顏色即可節省設計時的時間。

看一下這個視頻:

預製和可重複使用的小部件樣式和模板

Elementor是最好的頁面構建器之一,但是您是否考慮過默認按鈕和醜陋按鈕?標籤?菜單?還是其他任何小部件?這些默認的小部件看起來像是幾年前設計的,或者,也許您想重複使用在項目B中的項目A中設置樣式的小部件?

目前,您無法使用Elementor保存和重用小部件樣式用於以後的項目。幸運的是,免費 WunderWP 插件提供了解決此問題的幾種方法。

首先,WunderWP包含許多預置的小部件樣式供您使用。單擊即可獲得標題,畫廊,按鈕,分隔線,輪播,表格,價格表等的現成樣式。只需將Elementor小部件拖動到頁面上,選擇現成的WunderWP小部件樣式並開始添加內容。

WunderWP預設

使用WunderWP,您還可以在Elementor中輕鬆保存和重用自己的窗口小部件樣式。很簡單:對小部件進行樣式化,將其保存到WunderWP Cloud(免費!),以後再用於類似的小部件。這適用於簡單和複雜的小部件。例如,您可以使用它來保存包含不同印刷值的標題小部件,或保存具有自定義陰影的圖像小部件。

WunderWP自定義樣式

模板也是如此–您可以將創建的全部或部分模板保存到WunderWP Cloud。該模板將在其中,因此,準備就緒後,您可以輕鬆地將其插入頁面或網站中。這樣,您只需構建一次即可,從而節省了大量時間。

WunderWP自定義模板

或者,您可以利用WunderWP的現成內容模板,現在,有超過50個現成的版塊模板,例如聯繫方式,號召性用語,頁眉,頁腳,服務,關於,團隊,服務,倒計時等等。目的。

WunderWP預製模板

包起來

直到現在,毫無疑問,Elementor還是其中之一 最好的WordPress頁面構建器 在那裡。幾乎每天都會添加新的工具和功能,以簡化並加快設計過程並加快項目交付時間。

您認為哪一條是最有用的提示,而您以前從未知道過哪一條?也許您還知道這裡沒有提到的內容?請與他人分享。

相關文章