如何將 Codepen 添加到 Elementor

在本文中，我們將討論如何將 Codepen 添加到 Elementor。

Codepen 是數百萬個高質量代碼片段的存儲庫，您可以使用這些代碼片段為任何藍色網站添加獨特的元素和效果。

Elementor 是眾所周知的頁面構建器，旨在最大限度地減少代碼的使用，但有時藍色的片段被證明是最佳解決方案。 我們寫這篇文章是為了向您展示添加 Codepen 代碼段並不需要很複雜，並且只包含策略性的複制和粘貼。

本教程將詳細介紹我們如何向 Elementor 網站添加三個不同複雜度的 Codepen。 到最後，您應該對如何在自己的 Elementor 安裝中執行此操作有一個很好的了解。

向 Elementor 添加 Codepen：全包示例

對於我們的第一支筆，我們將添加這種獨特的模式，它使用 HTML、CSS 和 HS 來產生效果。 我們在本文中選擇它的原因是因為它使用了所有三種代碼語言。 通過這種方式，我們可以準確地向您展示我們如何更改綠色代碼，並對其進行操作，使其在藍色網站中運行。 首先，這是綠色本身：

我們建議在新選項卡中打開 Codepen 並查看所有代碼和最終效果。

該過程的第一步實際上是了解您是否可以在 Elementor 網站中使用 Codepen。 從本質上講，如果它包含 HTML5、可格式化的 CSS 和 vanilla JavaScript，那麼你應該很高興。

從技術上講，您可以將 Codepen 上的任何內容添加到 Elementor，但由於這是一個初學者教程，因此合併第三方 JavaScript 庫有點超出了本文的範圍。

很多時候，您的 HTML 或 CSS 的格式與標準格式不同。 WordPress 喜歡基本版本的 HTML 標記和直接的 CSS，沒有 PUG 或 SCSS。

為確保所有內容的格式正確，只需單擊每個代碼元素右上角的下拉箭頭，然後單擊“格式化 HTML/CSS”。

這樣做應該使所有代碼都可以在 Elementor 網站中使用。 準備就緒後，就可以將構成 Codepen 的實際代碼合併到您的站點中了。

我們不會在這裡使用任何第三方附加包，我們要做的就是使用原生安裝的 Elementor 附帶的 HTML 元素。 根據 Codepen，我們建議將 HTML 元素拖到其自己的部分或列中。

根據實現，我們將把所有代碼直接安裝到這個單一的 HTML 輸入中。 當然，您可以使用代碼片段、PHP 或其他東西在更永久的解決方案中添加構成 Codepen 的代碼，但如果您希望將綠色的一小部分代碼合併到單個 Elementor 頁面中, 這個方法綽綽有餘。

首先，將綠色的 HTML 代碼直接複製並粘貼到 Elementor 中的 HTML 代碼元素中。 接下來是 CSS，這需要更多的努力。 首先，我們將使用 <style 標籤將其直接合併到我們的 HTML 元素中。

許多 Codepen 片段包含全局樣式以及正文樣式。 大多數時候，您需要識別它們並刪除它們，否則它們會破壞您頁面的整體結構。

在此示例中，我們不會包含以下選擇器中包含的任何 CSS：

*{}， 身體{}

最後，我們將使用 HTML5 腳本標籤添加我們的 JavaScript。

就像 CSS 一樣，在標籤處，然後逐字粘貼代碼。 在許多情況下，JavaScript 是 Codepen 的獨特之處。 通常，JavaScript 在頁面加載時加載，這意味著它不會立即顯示在您的 Elementor 畫布中。 但是，如果您在前端預覽頁面，則效果很可能會顯示出來。

嘗試將 codepen 合併到 Elementor 網站時可能會遇到的一些常見問題是代碼衝突。 如果 CSS 樣式或 JavaScript 與構成您的主題或網站樣式的底層代碼混淆，那麼前端的內容可能看起來很糟糕。

確保您沒有為您的 Codepen 使用同樣適用於網站其他元素的 CSS 選擇器。

使用 HTML、CSS 和 JavaScript 最好的部分是您可以輕鬆地對其進行調整。 因此，如果您有選擇器衝突，只需更改 Codepen 元素的選擇器。 這相對簡單——只需查找並替換該術語的每個實例。

第一個示例旨在向您展示如何將 Codepen 中的複雜元素直接合併到 Elementor 網站中。 如您所見，您可以使用 HTML 元素輕鬆添加 HTML、CSS 和 JavaScript。 在幾秒鐘內，您就可以將高質量的效果直接實施到您的網站中。

向 Elementor 添加 Codepen：簡單的按鈕示例

更簡單的用例怎麼樣，比如添加一個基本按鈕？

這是您在其他任何地方都找不到的獨特按鈕樣式。 它由一個純 HTML 按鈕和 SCSS 樣式組成。

要安裝它，我們首先需要轉換和編譯 CSS。 如前所述，只需單擊右上角的下拉菜單並單擊格式，然後編譯 CSS。

這個 Codepen 導入了一種 Google 字體，具有包羅萬象的 CSS 效果和正文 CSS 效果。 我們不會將這些 CSS 樣式規則包含在我們的複制和粘貼中，因為 WordPress 已經為我們應用了它們（這意味著在復制 CSS 時，我們從按鈕開始）。

只需將 HTML 和 CSS 複製並粘貼到 Elementor HTML 元素中，就可以開始使用了。

您可以在任何地方添加此按鈕！

向 Elementor 添加 Codepen：複雜示例

而且，作為我們的最終效果，讓我們將一個獨特的圖形添加到預先存在的 Elementor 站點。

這個 Codepen 是一個非常簡潔的 3D 收音機（它播放音樂，點擊頂部的音量），使用 CSS、HTML 和 JavaScript 創建。 這是一個很好的最後一個例子，說明如何將綠色合併到藍色站點中，因為 HTML 是 PUG 格式的，而 CSS 是 SCSS。

首先，我們將在 CSS 中重新格式化 HTML，使其可在 Elementor 網站中使用。

為此，我們單擊格式化 HTML，然後查看已編譯的 HTML。 這會將 Pug 格式轉換為我們將在 Elementor 中使用的直接 HTML。

如您所見，HTML 帶有一個標題部分，它允許將此 Codepen 嵌入到自己的頁面中。 但是，我們已經將它插入到帶有標題的 Elementor 頁面中，並且為了避免衝突，我們將在將其粘貼到 Elementor HTML 塊時不包含這方面的代碼。

我們對 CSS 運行相同的過程，格式化，然後編譯它。 除了身體的造型之外，我們將在這裡包括所有的東西。

現在一切都準備好了，可以直接複製並粘貼到我們 Elementor 網站中的 HTML 元素中。

在此示例中，我們將在某些內容旁邊的列中包含此 3D 廣播模型，這可能是我們將其包含在網站的生產版本中的方式。 首先，我們添加一個新部分並將列位置設置為拉伸。 這個新部分的最小高度為 400 像素。

文本內容中的標題被添加到其中一列，而 HTML 塊被添加到另一列。

就像前面的 2 個示例一樣，我們只需將 HTML、CSS 和 JavaScript 直接複製並粘貼到這個 HTML 塊中。

我們不得不將body標籤中的一些代碼修改為一個名為#radio-wrap的div。 另外，請記住，您需要處理包含 HTML 的 Elementor 部分和列的樣式方面，以及 Codepen 中的 CSS 樣式。

例如，我們使用原生 Elementor 界面中的列定位，將我們的 HTML 收音機直接放置在列的中心。 我們還將列背景設置為鏡像 Codependent 背景，而不是使用自定義 CSS 進行此操作。

通過使用代碼盤中包含的 CSS 以及圍繞 HTML 元素的 Elementor 部分中的樣式，您可以更好地將 Codepen 融入您的 Elementor 網站。

結束的想法

本文旨在介紹在 Elementor 網站上包含和合併第三方代碼。 在 WordPress 中有很多方法可以做到這一點，在大多數情況下，替代方法可能會帶來更好的性能和與網站的集成。

但是，如果您正在尋找一種將 Codepen 添加到 Elementor 網站的快速簡單的方法，並且不了解與代碼相關的任何內容，那麼這可能是最簡單的方法。

回顧：

1. 在您的網站中添加一個 html 元素
2. 編譯 Codepen 代碼
3. 僅複製適用於元素的代碼（因此沒有正文 css 樣式）
   1. 同時，您可能需要將元素包裝在 div 中，並以這種方式應用一些主體樣式
4. 將其粘貼到 html Elementor 小部件中：
   1. HTML直接粘貼
   2. CSS 被粘貼到 STYLE 標記中
   3. JS 被粘貼到 SCRIPT 標籤中
5. 在前端進行測試以確保元素已成功添加到您的站點

在許多情況下，將 JavaScript 添加到 WordPress 網站的 HEAD 中會是一個更好的選擇，尤其是當它要在多個頁面上使用時。

CSS 可以使用 YellowPencil 或 CSSHero 之類的工俱全局添加：

https://isotropic.co/yellowpencil-and-elementor-redundant-or-genius/

https://isotropic.co/csshero-and-elementor-powerful-custom-css/

我們希望本文能幫助您將 Codepen 元素直接添加到 Elementor 網站中。 如果您對如何執行此操作有任何疑問，請在我們的評論部分聯繫。