Elementor 是 WordPress 的著名頁面建構工具，但透過結合 JavaScript，您可以突破其基本功能，創造更先進的互動性和視覺效果。本指南將探討如何將 Elementor 與 JavaScript 相結合，以提升您的網站開發技巧，並創造出動態、互動的使用者體驗。本指南針對具有相關知識的開發人員，包括複雜的程式碼範例和進階技術。

開始使用

• Elementor Pro:Pro 版本的 Elementor 提供更靈活的功能和客製化選項，非常適合進階開發。
• JavaScript 基礎:我們會使用 vanilla JavaScript 和一些常用的函式庫來實現動畫和互動功能。
• WordPress 設定:您應該有一個安裝了 Elementor Pro 且運作良好的 WordPress 網站。

讓我們開始吧！

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

Elementor 沒有直接的「自訂程式碼」選項來新增 JavaScript，但有幾種有效的方法。

1. 使用 WPCode 外掛程式:
   • 安裝 WPCode 外掛程式:您可以使用 WPCode 外掛來新增自訂 JavaScript，而不需修改主題的 functions.php 檔案。
     • 導覽到 外掛程式 > 新增 中的 WordPress 面板。
     • 搜尋 WPCode 然後按一下 立即安裝那麼 啟動.
   • 使用 WPCode 新增 JavaScript:
     • 前往 程式碼片段 > 新增片段 中的 WordPress 面板。
     • 按一下 新增自訂程式碼 (新增片段) 並選擇 JavaScript 作為代碼類型。
     • 命名您的片段:為您的片段命名，以協助識別其目的（例如，「頁面載入動畫腳本」）。
     • 插入 JavaScript 程式碼:將 JavaScript 程式碼貼到片段編輯器中。
     • 選擇位置:決定是否在 標頭 或 頁尾.一般而言，建議在 頁尾 以確保已載入所有元素。
       • 在頁尾載入 JavaScript 可確保整個 HTML 文件都已解析且可用，減少因嘗試與頁面上尚未出現的元素互動而遇到錯誤的機會。
     • 設定插入規則:指定指令碼應該在何處執行 (例如整個網站或特定網頁)。
     • 將 JavaScript 包裝在 DOMContentLoaded:確保程式碼在頁面載入後執行，以防止出錯。
       • 這可確保所有頁面元素都可用，避免因嘗試操作尚未載入的元素而導致錯誤。
   範例:

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

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

在 Elementor 中使用 HTML Widget:

• 拖放 HTML Widget:另一種新增 JavaScript 的方式是使用 Elementor 的 HTML widget。
  • 使用 Elementor 編輯頁面並拖曳 HTML 小工具 到所需位置。
  • 在 widget 中，加入以 <script 標籤。
• 內嵌 JavaScript:此方法可用於新增適用於特定元素或頁面部分的 JavaScript。

範例:

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

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

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

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

1. 新增按鈕按一下動畫:
   • 建立互動按鈕:使用 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) 可協助您建立複雜且流暢的動畫。

1. 整合 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 外掛程式，可讓您根據使用者的捲動動作啟動動態效果，非常適合製作動態捲動效果。

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

1. 載入 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 的表單 widget 非常實用，但我們可以使用 JavaScript 新增更多功能，例如表單驗證或提交後動畫。

1. 表單驗證範例:
   • 將驗證加入表單欄位:使用 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"
  });
});

詳細範例:如果您在 Elementor 中建立了一個訂閱表單，並指定了類別 元素表單使用上述程式碼，可確保使用者在提交表單前輸入有效的電子郵件地址，減少無效輸入，並確保資料品質更高。

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 功能，並建立具有這些整合功能的可重用按鈕，請遵循下列步驟：

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

範例代碼:

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 倍，然後回復原始大小，為使用者創造視覺效果。

1. 將按鈕儲存為全局 Widget:
   • 設定按鈕並測試 JavaScript 功能是否運作正常後，您可以將按鈕儲存為 全球小工具 在 Elementor 中。
   • 若要執行此動作，請在按鈕 widget 上按一下滑鼠右鍵，然後選擇 儲存為全局.為全局 widget 賦予描述性的名稱 (例如：「Interactive Button with GSAP Animation」)。
   • 將其儲存為全域 widget 後，您就可以在不同頁面重複使用此按鈕，而不必每次都重新設定設定或 JavaScript 程式碼。
2. 測試和自訂按鈕:
   • 測試按鈕:確保在使用按鈕的不同頁面上，按鈕的行為符合預期。確保按一下按鈕可正確觸發 JavaScript 動作。
   • 自訂功能:您可以透過新增更多 JavaScript 功能，例如自訂動畫、API 呼叫或與其他頁面元素互動，進一步強化按鈕的功能。
3. 使用自訂樣式和行為使按鈕永久存在:
   • 您可以使用額外的自訂 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；
}

1. 這個 CSS 片段賦予按鈕自訂的顏色和圓角邊緣，並會在懸停時變更顏色，以提供視覺回饋。
2. 整合額外的 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 的結合都能提供出色的使用者體驗。

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