Elementor v2.4 : 響應式背景圖控制, 客製化設定 & 更多

Contents

原文: Elementor v2.4: Responsive Background Image, Custom Settings & More Soft & Share 為 Elementor 聯盟，獲授權翻譯

Elementor v2.4 引入了專注於改善用戶體驗的功能：移動控制背景圖、自訂背景大小和位置、安全模式以進行故障排除等。

採用響應式背景控制，你的圖在任何裝置上都完美呈現

我們一直以靈活的設計能力自豪。但是，讓背景圖位置恰到好處對於 Elementor 用戶來說一直是個挑戰。如果你曾經建立過一個網站，你可能遇到過這個常見問題：在行動設備上，你想要聚焦狗的臉，但最終只顯示它的尾巴。隨著最新版本的 Core v2.4，我們將推出一整套功能，以幫助使用者自訂任何設備的背景圖像。滿足響應式背景圖的控制。

新版本的 Elementor 將讓使用者可以完全控制桌面、平板電腦和行動裝置上的背景圖控制元件。此控制元件包括背景圖控制元件上的裝置特定設定（圖、位置、附件、重複和大小）。現在，你終於可以為每台裝置設定不同的位置。為桌面設定“中心”，為行動設定“中心”，如此所有裝置所顯示的圖都在相似的區域。你還可以為每個裝置指定不同的大小。為桌面設定 ‘cover’，為行動設定 ‘contains’。

之前這對許多使用者來說是一個巨大的痛苦，我相信他們會欣賞這新功能的(歡迎使用^_^)。

除了尺寸和位置，我們還添加了為每台裝置設定完全不同的圖的選項。就裝置特定大小和位置是第一個額外的響應控制元件。我們將其再更進一步，增加了自訂尺寸和位置，讓你有更加靈活的設計體驗。

自訂背景圖像大小與位置

以前，你必須使用 3 種背景圖像大小設定：自動( auto )、封面( cover )或包含( contain )。類似之前的，你只需定義一般背景圖的位置，如“左上角( Top Left )”。

現在我們新增兩個新的自訂控制元件：背景圖大小和背景圖位置。使用自訂背景圖位置，你可以在 X 和 Y 軸上手動設定所需的背景圖位置。這樣，你現在可以選擇設定背景圖對齊的精確度。除了位置，你還可以設定自訂背景圖大小。為背景圖設定精確寬度。

在響應式設計方面，這些設定，自訂背景大小和位置尤為重要。使用這些自訂的設定可以特別將圖於桌面、平板電腦和行動裝置做重點聚焦。

響應式的邊框控制

除了背景圖，我們還添加了為每個裝置設定不同邊框圓角( border-radius )和邊框寬度( border width )的功能。

經常使用的跨裝置的邊框狀況是當你在桌面有一個連結多欄的對齊橫列資料時，此邊框在行動裝置上變得多餘，因為本來橫向對齊內容的每一直欄將自動到下一列。在這種情況下，顯而易見的選擇是從行動佈局中刪除邊框。幸運的是，新的響應邊框功能可以很容易地實現。在行動裝置上不會再有那些奇怪的“孤立的邊界”！

安全模式 – 排除故障的簡單方法

在 Elementor，我們關心為使用者提供無瑕疵和流暢的體驗。有成千上萬的外掛( plugins )和主題(themes)，有數百萬種組合可以將它們設定在一起運作。這些組合導致不可避免的衝突，有的與 Elementor 相關有的不相關。我們不斷嘗試為使用者減少這些問題，以建立更好的工作流程。當使用者無法載入編輯器時，會出現重複出現的問題。這個問題已經被賦予了很多名稱：白屏當機、無法編輯、載入卡住……

我們的解決方案：運用安全模式

你們中的一些人可能還記得 Windows 曾經有一個安全模式選項，證明有助於修復 Windows 中發生的很多錯誤。

我們為 Elementor 創建了一個類似的解決方案。

從現在開始，如果你遇到一個永無止境的載入頁面，你將有一個按鈕來打開“安全模式”。將“安全模式”視為一種安全環境，它將 Elementor 和 WordPress 與可能導致錯誤的主題和外掛隔離開來。

使用安全模式，將暫時解決超過 80％的載入問題。

安全模式開啟，一切正常載入？ 這意味著錯誤的原因可能是你採用的主題( theme)或其中一個外掛(plugins)。繼續並逐個停用它們以找到有問題的那個。 安全模式開啟，仍然沒有載入？ 這意味著你應該從其他方面來尋找解決方案，很有可能是客製的程式碼或託管相關的問題。安全模式將每個 Elementor 使用者變成迷你 Sherlock Holmes(偵探福爾摩斯)。 ‘Elementor-y，親愛的 Watson！“

開啟安全模式會影響我的網站嗎？”

請放心，安全模式不會對你的網站訪問者產生任何影響。他們將像往常一樣使用你的網站，你的網站將顯示你的正常主題設計，以及所有已安裝的外掛。唯一改變的是 Elementor 編輯器載入過程在沒有任何啟用的外掛或主題的情況下完成。對於 Elementor 使用者而言，安全模式是一個巨大的進步，可以獲得更加穩定、無縫且無差錯的使用者體驗。

外部影片

在 2.1 版中，我們添加了將自託管的影片添加到影片小部件( video widget )的選項。為什麼只能選擇 YouTube 和 Vimeo 呢？這託管影片很昂貴。所以現在我們還添加了使用外部連結添加影片的選項。如此有兩個優勢：你可以嵌入來自 Coverr 等其他服務的影片。你可以將影片檔託管在更便宜的影片託管服務上，並將其添加到你的網站。

“Read More” 標籤( Tag )和小部件( Widget )

在 Elementor 新增 WordPress 的 “Read More” 標籤是我們首要收到的請求之一。這是一個小小的要求，但終於，我們實現了。”Read More” 是你想新增到部落格文章中的標記，其將轉換為歸檔文章顯示文字的截斷點。這允許你在主部落格頁面上顯示你文章的預覽文字。

現在，你可以輕鬆地在文字編輯器小部件( widget )中新增 “Read More” 標記，或者作為單獨的小部件新增。我們還添加了一個 “Read More” 小部件，你可以將它放在兩個文字編輯器小部件( text editor widgets )之間，這樣你的存檔頁面就會顯示一個摘要，可以準確地在你想要的位置截斷。

請注意：此小部件僅影響在標準 WordPress 存檔頁面中使用 “the_content” 的主題。它不會影響 Elementor 設計的歸檔樣板( archive templates )。