Elementor 和 JavaScript：進階動態網站開發

f 林

11 個月前

Elementor is a famous page builder for WordPress, but by combining it with JavaScript, you can break through its basic functionality to create even more advanced interactivity and visual effects. This guide’ll explore combining Elementor with JavaScript to elevate your website development skills and create a dynamic, interactive user experience. This guide is aimed at developers with knowledge, including complex code examples and advanced techniques.

開始使用

Elementor Pro:Pro 版本的 Elementor 提供更靈活的功能和客製化選項，非常適合進階開發。
JavaScript 基礎: We’ll use vanilla JavaScript and some popular libraries to implement animations and interactive features.
WordPress 設定:您應該有一個安裝了 Elementor Pro 且運作良好的 WordPress 網站。

Let’s get started!

步驟 1：將 JavaScript 整合至 Elementor 頁面

Elementor doesn’t have a direct ‘Custom Code’ option to add JavaScript, but there are a few effective ways to do so.

使用 WPCode 外掛程式:
- 安裝 WPCode 外掛程式:您可以使用 WPCode 外掛來新增自訂 JavaScript，而不需修改主題的 functions.php 檔案。
  - 導覽到 外掛程式 > 新增中的 WordPress 面板。
  - 搜尋 WPCode 然後按一下 立即安裝那麼啟動.
- 使用 WPCode 新增 JavaScript:
  - 前往 程式碼片段 > 新增片段 中的 WordPress 面板。
  - 按一下 新增自訂程式碼 (新增片段) 並選擇 JavaScript 作為代碼類型。
  - 命名您的片段: Give your snippet a name that helps identify its purpose (e.g., “Page Load Animation Script”).
  - 插入 JavaScript 程式碼:將 JavaScript 程式碼貼到片段編輯器中。
  - 選擇位置:決定是否在標頭或頁尾. Generally, it’s recommended to load scripts in the 頁尾以確保已載入所有元素。
    - 在頁尾載入 JavaScript 可確保整個 HTML 文件都已解析且可用，減少因嘗試與頁面上尚未出現的元素互動而遇到錯誤的機會。
  - 設定插入規則:指定指令碼應該在何處執行 (例如整個網站或特定網頁)。
  - 將 JavaScript 包裝在 DOMContentLoaded:確保程式碼在頁面載入後執行，以防止出錯。
    - This ensures that all page elements are available, preventing errors caused by attempting to manipulate elements that haven’t loaded.
範例:

document.addEventListener("DOMContentLoaded", function() {
console.log(「JavaScript 在頁面載入後執行」)；
});

這個簡單的腳本可以確認您的 JavaScript 在載入頁面後是否正常執行。

在 Elementor 中使用 HTML Widget:

拖放 HTML Widget: Another way to add JavaScript is by using Elementor’s HTML widget.
- 使用 Elementor 編輯頁面並拖曳 HTML 小工具 到所需位置。
- 在 widget 中，加入以 <script 標籤。
內嵌 JavaScript:此方法可用於新增適用於特定元素或頁面部分的 JavaScript。

範例:

<script
  document.addEventListener("DOMContentLoaded", function() {
    console.log("Inline JavaScript via HTML widget")；
  });

當您希望 JavaScript 只在頁面的特定區段執行時，此方法非常有用，可讓您對功能有更多控制。

步驟 2：使用 JavaScript 加入動態互動性

整合 JavaScript 之後，我們就可以開始加入一些動態效果，例如按鈕點選和懸停效果。

新增按鈕按一下動畫:
- 建立互動按鈕:使用 Elementor 新增按鈕元素，並賦予類別以定位 (例如、 動態按鈕).
- 新增 JavaScript 來處理點選事件:使用 JavaScript 實作簡單的按一下動畫，例如調整按鈕大小或改變按鈕顏色。
範例:

document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".animated-button")；
  if (button) {
    button.addEventListener("click", function() {
      button.style.transform = "scale(1.2)"；
      button.style.backgroundColor = "#ff6347"; // 更改顏色為番茄色
      setTimeout(() => {
        button.style.transform = "scale(1)"；
        button.style.backgroundColor = ""; // 還原顏色
      }, 300);
    });
  }
});

此程式碼會在按下按鈕時放大按鈕並變更其顏色，然後在短暫延遲後恢復其原始大小和顏色。

詳細範例:假設您在 Elementor 頁面上新增一個按鈕類別為 animated button 的按鈕。使用上述程式碼，按一下按鈕就會產生短暫的放大和變色效果，讓使用者更有視覺上的吸引力。

在圖片網格中加入懸停效果:

建立影像網格:使用 Elementor 建立圖片網格，並為每張圖片指定類別名稱 (例如 image-grid-item)。
新增 JavaScript 來處理懸停事件:使用 JavaScript 新增懸停效果，例如淡入淡出，以提升使用者體驗。

範例:

document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll(".image-grid-item").forEach(item => {
    item.addEventListener("mouseenter", () => {
      item.style.opacity = "0.7"；
      item.style.transition = "opacity 0.3s ease-in-out"；
    });
    item.addEventListener("mouseleave", () => {
      item.style.opacity = "1"；
    });
  });
});

當鼠標停留在每個圖片元素上時，此程式碼會改變其不透明度，讓使用者體驗更吸引人。

詳細範例:在 Elementor 中新增圖片網格，並為每張圖片指定 image-grid-item 類別。使用此代碼，當使用者將滑鼠懸停在圖片上時，會看到微妙的漸變效果，為網站增添一層精緻感。

步驟 3：使用 JavaScript 動畫庫增強視覺效果

JavaScript 動畫函式庫 (如 GSAP) 可協助您建立複雜且流暢的動畫。

整合 GSAP 動畫庫:
- 載入 GSAP:使用 WPCode 或 HTML widget 載入 GSAP 函式庫。

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

使用 GSAP 動畫 Elementor 元件:

新增 GSAP 動畫:使用 GSAP 為 Elementor 元素加入動畫，例如在頁面載入時淡入圖片方格。

範例:

document.addEventListener("DOMContentLoaded", function() {
  gsap.from(".image-grid-item", {
    持續時間：1,
    不透明度: 0、
    y:50,
    stagger: 0.2、
    ease："power2.out"
  });
});

當頁面載入時，此代碼會讓每個圖片元素依序從底部淡入，創造出平滑且專業的過渡效果。

詳細範例:使用 Elementor 建立一個包含多張圖片的網格，並指定類別為 image-grid-item.當頁面載入時，每張圖片都會從下方平滑地淡入，一張接一張，可以非常有效地為訪客創造視覺上吸引人的體驗。

步驟 4：使用 ScrollTrigger 加入捲動動畫

捲動觸發器 是一個 GSAP 外掛程式，可讓您根據使用者的捲動動作啟動動態效果，非常適合製作動態捲動效果。

載入 ScrollTrigger 外掛程式:
- 新增捲動觸發器:載入 GSAP 後，整合 ScrollTrigger 如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

2. 建立捲動觸發動畫:

新增捲動效果:製作動畫，當使用者捲動到頁面的特定區段時就會觸發動畫。

document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger)；
  gsap.from(".section-title", {
    scrollTrigger：{
      trigger：".section-title"、
      start："top 80%", // 動畫在 section title 在視圖中時開始
      end："top 30%"、
      scrub: true
    },
    duration：1.5,
    不透明度: 0、
    y:-50,
    ease："power3.out"
  });
});

當使用者捲動到 .section-title 元素時，它會從上方滑入，創造出動態的視覺效果，為您的頁面增添活力。

詳細範例:假設您有一個類別為 section-title 的頁面或章節標題。當使用者捲動時，上述程式碼會使標題從頂部滑入，提供更流暢、更吸引人的捲動體驗。您可以自訂開始和結束觸發器，以控制動畫開始和結束的時間。

步驟 5：使用自訂 JavaScript 強化 Elementor 表單

Elementor’s form widget is very useful, but we can add more functionality with JavaScript, such as form validation or post-submission animations.

表單驗證範例:
- 將驗證加入表單欄位:使用 JavaScript 在 Elementor 表單中加入簡單的驗證。

document.addEventListener("DOMContentLoaded", function() {
  gsap.registerPlugin(ScrollTrigger)；
  gsap.from(".section-title", {
    scrollTrigger：{
      trigger：".section-title"、
      start："top 80%", // 動畫在 section title 在視圖中時開始
      end："top 30%"、
      scrub: true
    },
    duration：1.5,
    不透明度: 0、
    y:-50,
    ease："power3.out"
  });
});

詳細範例: If you’ve created a subscription form in Elementor and assigned the class 元素表單使用上述程式碼，可確保使用者在提交表單前輸入有效的電子郵件地址，減少無效輸入，並確保資料品質更高。

2. 提交後的動畫回饋:

提交後新增視覺回饋:在成功提交表單後加入動畫效果，以改善使用者體驗。

範例:

document.addEventListener("DOMContentLoaded", function() {
  const form = document.querySelector(".elementor-form")；
  if (form) {
    form.addEventListener("submit", function(event) {
      event.preventDefault(); // 防止預設提交以模擬回饋
      gsap.to(form, {
        duration：0.5,
        opacity: 0、
        onComplete: function() {
          form.reset()；
          gsap.to(form, { duration: 0.5, opacity: 1 })；
        }
      });
    });
  }
});

此程式碼會在表單提交後逐漸隱藏、重設，然後再淡入，提供使用者視覺上的提示。

詳細範例:使用 Elementor 中的表單小工具，指定類別 元素表單, 使用上述程式碼，使用者會看到表單在提交後漸漸淡出，然後再重新出現，提供流暢且具視覺吸引力的表單重設確認。

將這些功能整合到 Elementor 成為永久按鈕

若要直接在 Elementor 中存取這些 JavaScript 功能，並建立具有這些整合功能的可重用按鈕，請遵循下列步驟：

使用 Elementor Button Widget 建立按鈕:
- 使用 Elementor 在頁面上建立按鈕元素，只要拖曳 按鈕小工具 到您的頁面。
- 根據需要自訂按鈕文字、大小、樣式和其他屬性。
- 在進階索引標籤，為按鈕指定唯一的 CSS 類別 (例如、 整合式動作按鈕).此 CSS 類別將用於在 JavaScript 中識別按鈕。
新增 JavaScript 程式碼來處理按鈕功能:
- 為了讓按鈕能互動，我們需要加入 JavaScript 程式碼，以監聽按鈕事件，例如按一下或懸停。
- 使用 WPCode 外掛程式 將您的 JavaScript 全域加入整個網站：
  - 安裝並啟動 WPCode 外掛程式 從 WordPress 外掛目錄。
  - 導覽到 程式碼片段 > 新增片段.
  - 選擇 JavaScript as the code type and add the JavaScript code to handle the button’s interaction.
  - 請務必指定程式碼應該在前端並選擇執行腳本的位置（最好在頁尾以確保所有元素都已載入）。

範例代碼:

document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".integrated-action-button")；
  if (button) {
    button.addEventListener("click", function() {
      // 範例：當按下按鈕時，觸發動畫效果
      gsap.to(button, { duration: 0.5, scale: 1.2, ease: "power2.out" })；
      setTimeout(() => {
        gsap.to(button, { duration: 0.5, scale: 1 })；
      }, 500);
    });
  }
});

此程式碼監聽按鈕上的按一下事件，並使用 GSAP 觸發動畫。按鈕縮放至其大小的 1.2 倍，然後回復原始大小，為使用者創造視覺效果。

將按鈕儲存為全局 Widget:
- 設定按鈕並測試 JavaScript 功能是否運作正常後，您可以將按鈕儲存為 全球小工具 在 Elementor 中。
- 若要執行此動作，請在按鈕 widget 上按一下滑鼠右鍵，然後選擇 儲存為全局. Give the global widget a descriptive name (e.g., “Interactive Button with GSAP Animation”).
- 將其儲存為全域 widget 後，您就可以在不同頁面重複使用此按鈕，而不必每次都重新設定設定或 JavaScript 程式碼。
測試和自訂按鈕:
- 測試按鈕: Ensure that the button behaves as expected across different pages where it’s used. Make sure that clicking the button triggers the JavaScript actions correctly.
- 自訂功能:您可以透過新增更多 JavaScript 功能，例如自訂動畫、API 呼叫或與其他頁面元素互動，進一步強化按鈕的功能。
使用自訂樣式和行為使按鈕永久存在:
- 您可以使用額外的自訂 CSS 設定按鈕的樣式。使用 Elementor 的 自訂 CSS 區段或 WordPress 額外的 CSS 區段，將獨特的樣式套用至按鈕。

自訂 CSS 的範例：

.integrated-action-button {
  background-color: #ff6347；
  color: #fff；
  border-radius: 5px；
  padding：15px 30px；
  transition: background-color 0.3s ease；
}
.integrated-action-button:hover {
  background-color: #e5533d；
}

這個 CSS 片段賦予按鈕自訂的顏色和圓角邊緣，並會在懸停時變更顏色，以提供視覺回饋。
整合額外的 JavaScript 功能:
- 如果您想要新增更複雜的功能，例如提交表單、切換頁面元素或呼叫外部 API，您可以相應地擴充 JavaScript 程式碼。
- 新增控制台日誌並在按下按鈕時切換另一個元素的可見性的範例：

document.addEventListener("DOMContentLoaded", function() {
  const button = document.querySelector(".integrated-action-button")；
  const targetElement = document.querySelector(".target-element")；
  if (button && targetElement) {
    button.addEventListener("click", function() {
      // 將訊息記錄到控制台
      console.log("Button clicked, performing actions...")；
      // 切換目標元素的可見度
      targetElement.style.display = targetElement.style.display === "none" ?"block" : "none"；
    });
  }
});

按照這些步驟，您就可以在 Elementor 中建立一個內建 JavaScript 功能的按鈕，這個按鈕可以在整個網站中重複使用，提高開發工作流程的一致性和效率。這可讓您輕鬆地在 Elementor 頁面中加入進階互動和動畫，而不需要手動個別設定每個按鈕。

總結

透過結合 Elementor 與 JavaScript，您可以在 WordPress 網站上建立更先進的動態互動。這種先進的開發方式大大提升了您的頁面設計能力，幫助您的網站脫穎而出。無論是使用 vanilla JavaScript 來控制頁面元素，或是利用 GSAP 等動畫函式庫來實現流暢的過場效果，Elementor 與 JavaScript 的結合都能提供出色的使用者體驗。

有了這些詳細的範例，您就可以開始嘗試更複雜的互動和效果。希望這份指南能激發您的創意！如果您有任何問題或需要進一步的協助，歡迎隨時與我們聯繫。