• 主頁
  • 文章
  • 科技類
  • Elementor 3.17 中的新增功能 – 透過 AJAX、更快的網站等增強訪客體驗

Elementor 3.17 中的新增功能 – 透過 AJAX、更快的網站等增強訪客體驗

已發表: 2023-11-01

此版本引入了備受期待的循環網格 AJAX 加載，它允許您更改分頁而無需重新加載整個頁面。 它還優化圖像加載，提高網站的效能。 新的評級小部件擴展了您上傳自訂 SVG 和選擇任何評級等級的靈活性。 此外，超級選單增強功能支援水平滾動選單，不會最小化為「漢堡佈局」。

Hello Theme 已更新至版本 2.9，具有新的「設定」頁面，可讓您停用內建主題功能以提高網站的效能。

[PRO] 引入 AJAX for Loop Grid – 用於無縫內容加載

我們很高興在 GitHub 上展示第四個最受歡迎的功能：循環網格的 AJAX 載入。 AJAX（非同步 JavaScript 和 XML）的縮寫，透過在循環網格中載入新內容而無需重新載入整個頁面，使網站的訪客體驗更加流暢。

AJAX 循環網格分頁

訪客現在可以在清單的頁面之間切換，而無需重新載入整個頁面。 點擊循環網格的分頁元素只會重新載入網格的內容，從而為瀏覽產品或貼文清單的訪客提供更流暢的體驗。 AJAX 分頁還為清單的每個頁面指派自己的 URL 參數，讓訪客可以更輕鬆地儲存或分享特定清單頁面的連結。 例如，如果您正在建立食譜博客，訪客可以輕鬆瀏覽食譜列表，並分享或保存指向他們喜歡的食譜頁面的連結。

「自動滾動」控制項是 AJAX 載入的另一個功能。 當訪客變更分頁時，啟動自動捲動會自動捲動到網格頂部。 如果您使用的是分類過濾器，則可以為自動滾動效果設定偏移值，以使過濾器列保持在視圖中。

循環網格和帖子小部件的單獨分頁

在先前的版本中，更改清單的分頁會影響同一頁面上其他清單的分頁。 例如，如果循環網格和貼文小工具都放置在同一頁上，則選擇其中一個頁面的第三頁也會載入第二個頁面的第三頁。 但是，透過單獨分頁功能，訪客現在可以更改清單的分頁，而不會影響頁面上的其他循環網格和貼文小工具。 例如，在食譜部落格中，您可以新增一個顯示素食食譜的循環網格，以及顯示所有貼文清單的循環網格或貼文小工具。 訪客可以獨立更改貼文小工具或循環網格的分頁。

透過更快的 LCP 提高網站效能

Elementor 3.17 的兩項功能可加快網站的載入時間，從而使您的網站速度更快。

優化圖片載入

此版本中的首次效能更新是 Elementor 與 Chrome 合作的結果，旨在尋找提高 Elementor 建置的網站效能的機會。 此次合作涉及利用 Chrome 使用者體驗報告和 Core Web Vitals 技術報告等 Google 工具。 使用這些工具的結果之一是 Google 決定為 Elementor 的核心外掛程式貢獻「優化圖片載入」功能。

此實驗性功能透過根據影像在頁面上的位置確定影像載入的優先順序來提高前端速度。 它偵測哪個影像最有可能是「LCP 影像」（視窗中最大的內容繪製元素），並使用優先權提示來確定其載入的優先權。

該實驗還將延遲加載應用於最初未顯示在視口中的圖像，並在它們進入視圖時加載它們。 這些變更將 LCP Core Web Vital 指標提高了 5-10%，具體取決於頁面的複雜性。 因此，包含大量圖像的頁面將獲得更大的效能提升。 此功能也適用於在不包含 LCP 偵測更新的舊版 WordPress 上執行的 Elementor 網站。

古騰堡資源加載

第二個性能更新透過在不使用時排除古騰堡樣式和腳本來提高網站的前端速度。 此實驗透過偵測何時未使用 Gutenberg 建立頁面或產生其內容來改善網站的 LCP 指標。 這使得 Elementor 可以避免載入不必要的程式碼。

新的評級小工具可提高設計彈性

Elementor 3.17 引入了新的評級小部件，提供了更大的靈活性來個性化產品、內容等的視覺評級量表。 您可以使用 Font Awesome 圖示或上傳您自己的 SVG 直觀地表示您的評分。 例如，對於音樂評論，您可以使用 SVG 為新專輯評分 5 分（滿分為 5 分）。

評級小組件擴展了星級評級小組件中可用的評級範圍範圍。 現在您可以設定從零到適合您要求的任何數字的評分等級，而不是局限於 0-5 或 0-10 等級。 例如，您可以給一張專輯評分為 3 分（滿分 3 分）或 7 分（滿分 7 分）黃金唱片評級。 為了便於使用，評級量表下拉清單已替換為範圍。

此外，評級小工具透過改進的架構屬性增強了您網站的 SEO 排名。 它取代了小部件面板中的星級小部件，但您網站上的任何現有星級將不受影響。

菜單小工具的水平滾動

Elementor 3.17 在建立選單時提供了更多的設計彈性。 到目前為止，當訪客改變視窗的大小時，選單的大小會調整為「下拉佈局」（也稱為「漢堡選單」）。 透過選單小工具的新更新，您可以透過前往“響應式設定”，打開標有“斷點”的下拉式選單並選擇“無”來防止選單調整大小。

停用響應式調整大小可能會導致選單比視窗寬的情況。 在許多情況下，這可能會將某些選單項目拖放到下一行。 為了防止這種情況，3.17 還提供了啟用水平滾動的功能。 啟用後，您的選單將在任何裝置上保持其原始設計，並允許訪客水平滾動選單項，而不會破壞設計。

輔助功能改進

  • 彈出視窗：透過最初關注彈出視窗關閉按鈕而不是彈出視窗中的其他可聚焦元素，在啟用「可存取導航」選項時改善焦點管理。
  • 目錄小工具：表示目錄小工具中的最小化/最大化按鈕是使用輔助技術的訪客的互動元素。
  • 進度欄小工具：允許螢幕閱讀器將標籤與其對應的進度列正確關聯。
  • 影片播放清單小工具：將自訂 HTML 標籤指派給影片播放清單小工具中的不同元素。
  • 嵌套手風琴小工具：為使用鍵盤導航的訪客提高手風琴佈局的可訪問性。

額外更新

  1. 響應式範本設計：提高您正確顯示具有附加斷點的響應式範本設計所做的變更的能力。 在主題產生器中進行編輯時，您將不再需要重新產生 CSS 來查看對模板所做的變更。 變更將反映在您網站的編輯器和前端中。
  2. Accordion Widget FAQ Schema：透過新增 FAQ Schema 控制項來提升內容的 SEO 相容性。 FAQ 架構為頁面程式碼新增了一個專門的標記，其中包含問題和答案清單。 搜尋引擎可以讀取此標記並使用它來產生豐富的程式碼。
  3. VideoPress 整合：將 VideoPress 無縫整合到您的 Elementor 網站中。 享受 VideoPress 提供的所有功能，例如自託管影片、可在多種裝置類型上播放的轉碼影片檔案、基於裝置螢幕尺寸和可用頻寬的自適應串流、驗證私人影片的能力等等。

[Elementor AI] AI歷史 – 恢復AI產生的內容

Elementor 3.17 透過 AI 歷史記錄功能增強了 Elementor AI 上的工作流程。 此功能顯示先前使用的提示以及它們生成的圖像或文字。 您可以恢復提示及其產生的內容，以便您可以從上次中斷的地方繼續。 您可以繼續使用 AI 編輯內容、在您的網站上使用它，或從 AI 歷史記錄中永久刪除它。

雖然您無法從 AI 歷史記錄中檢索先前產生的程式碼，但由於程式碼是為特定小工具建立的，因此您可以存取用於產生它們的提示，以從歷史提示中重新產生新程式碼。 例如，您可能在處理新的背景圖像時意外關閉了瀏覽器，或者決定使用被丟棄的人工智慧產生的文字。 AI歷史記錄可讓您檢索和使用最多90天之前的提示和內容。

使用 Hello Theme 2.9 自訂主題設置

現在您可以微調 Hello 主題的設置，根據您的特定要求增強網站的效能。 Hello Theme 2.9 引入了各種令人興奮的功能，可增強導航、可讀性、SEO 等。 在此版本中，不再需要更改主題的程式碼來避免冗餘或不相關的設定。 相反，請造訪 WordPress 儀表板上的新設定頁面，您可以在其中停用描述元標記、跳過連結、頁面標題等功能。 停用這些功能會減少網站的大小並消除未使用的 CSS。

改善訪客體驗、縮短載入時間並享受更多設計彈性

Elementor 3.17 引入了多項功能來增強使用者體驗和網站效能。 一個重要的功能是循環網格的 AJAX 加載，無需重新加載整個頁面即可實現平滑的內容轉換。 此外，圖片載入優化和古騰堡資源載入可以提高網站的速度。 新的評級小部件提供靈活的視覺評級尺度，超級菜單現在包括水平滾動。 Elementor AI 還具有 AI 歷史記錄面板，可讓您存取先前的提示和產生的內容。 此外，Hello Theme 更新至版本 2.9 允許使用者更好地控制網站功能，包括停用某些內建功能的選項。

請在評論部分告訴我們您最感興趣的功能！