[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼的圈子
已發表: 2021-12-29一個文本繁重的網站可能看起來沒有吸引力。 如果您的網站包含過多的文本和較少的視覺組件,您可以使用 Essential Addons 的交互式圓圈,並以有吸引力的圓形圖案顯示您的內容。 讓我們深入了解如何使用這個神奇的小部件在最小的空間內展示大量內容。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 1 Interactive circle](/uploads/article/3362/b127AGIAc85woExQ.jpeg)
為什麼您的網站上需要交互式圓圈小部件?
對於網頁設計師來說,使網站更具交互性並同時從用戶端方便變得具有挑戰性。 如果網站包含大量基於文本的內容,那麼以正確的方式呈現就變得更加困難。
研究表明,幾乎38% 的人會停止使用任何設計佈局不吸引人的網站。 在這種情況下,您網站的流量也取決於您的網站設計。 讓我們探索在 WordPress 網站中使用 Essential Addons 的交互式圓形小部件有效設計基於文本的內容的所有好處。
您的網站內容的動畫演示
即使您的網站包含大量基於文本的內容,您也可以以引人注目的方式展示它以吸引訪問者並讓他們輕鬆查看。 展示您的網站材料的不同模式很常見,因此一點點動作可能會幫助您吸引訪問者的興趣。 使用 Essential Addons 的Interactive Circle小部件,您可以使用動畫模式展示基於文本的內容,並使該部分看起來更有吸引力。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 2 Interactive Circle](/uploads/article/3362/UeKw9VefTWnUut87.gif)
為您的網站設計交互式和響應式設計
如果您的網站缺乏響應式設計,用戶可能很難在搜索引擎上找到您的網站、閱讀內容或瀏覽您的網站。 這可能是由於佈局缺陷、圖像質量不佳、文本太小或信息圖表過多導致您的網站看起來雜亂無章。 如果您使用的是台式機或筆記本電腦,則可以通過單擊並拖動角來調整此窗口的大小。
使用 Essential 插件的交互式圓形小部件可以更輕鬆地為您的網站創建動態設計。 無論您的網站訪問者可能使用哪種設備訪問您的網站,如果您使用此小部件來呈現基於文本的內容,您的設計都不會中斷。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 3 Interactive Circle](/uploads/article/3362/FIiI4WFSzosHXGe8.gif)
交互式圓圈小部件創建漂亮的網站
您可以使用此小部件以吸引人的圓周運動顯示基於文本的內容,從而吸引網站用戶的注意力。 例如,如果您希望提供內容菜單,則可以使用交互式圓圈來呈現內容,同時還可以節省空間。 以這種方式,一個簡單的基於文本的內容會顯得更加迷人和誘人。 讓我們看看您可以如何輕鬆地通過 Essential Addons 插件開始使用 Interactive Circle 小部件。
您需要通過 Essential Addons 使用 Interactive Circle 的東西
Elementor :要使用 Interactive Circle Widget,您必須首先安裝並激活 Elementor,然後您就可以開始了。
Elementor 的基本插件:您必須在您的網站上安裝並激活Elementor 的基本插件才能使用“互動圈”小部件。
第 1 步:激活 Essential Addons Interactive Circle 小部件
讓我們使用Essential Addons的“Interactive Circle ”小部件讓您的網站更具交互性和吸引力。 您需要做的就是確保您使用的是該插件的最新版本。
必須在 Elementor 中啟用 Interactive Circle 小部件。 轉到 WordPress 儀表板中的 Essential Addons Elements 並確保打開了“ Interactive Circle ”小部件。 為確保您的更改得到保存,請單擊“保存設置”按鈕。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 4 Interactive Circle](/uploads/article/3362/XJSYMkrfykXadpql.gif)
在Elementor的“元素”選項卡中查找“交互圈”小部件。 將元素拖放到要顯示基於文本的內容的任何位置。
第 2 步:開始自定義您的內容設置
此小部件可讓您自定義默認內容並添加您自己的內容。 在常規選項卡中,您可以從選項中設置任何佈局。 Interactive Circle 小部件帶有4 種預設佈局。 玩轉佈局,看看哪一個最適合您的基於文本的內容。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 6 Interactive Circle](/uploads/article/3362/A6lYDIEa3xPFkdyd.gif)

您還可以選擇 EA Interactive Circle 小部件中的按鈕是否應顯示圖標或文本。 要隱藏或顯示圖標和文本,請分別切換“按鈕”設置下的“顯示圖標”和“顯示文本”選項。 這個小部件對於許多自定義非常方便。 您可以根據自己的喜好從選項中進行選擇並創建自己的圓形菜單。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 7 Interactive Circle](/uploads/article/3362/MJTc9P0s0CY7hZc1.gif)
使用此小部件最重要的部分是,您可以提供自己的內容並根據需要添加更多循環選項。 您可以在“內容”設置下使用 EA Interactive Circle 小部件添加要顯示的項目數量。 只需單擊“ +添加項目”按鈕即可添加新項目。 同樣,您可以從設置中刪除或複制項目。 但是,為了設計起見,一次最多只能添加 8 個選項; 否則,序列將被破壞。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 8 Interactive Circle](/uploads/article/3362/LVLt9W3WTPZWHcwQ.png)
共有三個選項卡: “按鈕”、 “內容”和“樣式”。 您可以為項目添加圖標並從“按鈕”選項卡上的“短標題”輸入字段編輯標題。 同樣,您可以從“內容”選項卡向您的項目添加內容,您可以從“樣式”選項卡向您的項目添加背景顏色。
您可以從“附加設置”選項中獲得額外的設置選項,以幫助您使您的 EA Interactive Circle 小部件更具動態性。 您可以在“鼠標事件”選項中的“單擊”和“懸停”交互之間進行選擇。 您還可以使用“附加設置”選項添加時尚且引人注目的動畫。 如下圖所示,共有三種不同的動畫樣式可供選擇。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 9 Interactive Circle](/uploads/article/3362/WWTev3o82M6LibVm.gif)
第 3 步:為基於文本的交互式內容設置樣式
EA Interactive Circle 小部件帶有許多樣式選項。 這個選項可以對任何人的互動圈子產生很大的影響。 通過更改背景顏色、文本圖案或顏色、圓圈寬度以及填充或合併,您可以更改外觀。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 10 Interactive Circle](/uploads/article/3362/577uwuYVXV6foC9p.gif)
您可以從“項目”設置中更改 EA 互動圈中每個項目的排版。 每個項目的寬度和圖標大小也可以調整。 您還可以更改背景顏色、文本顏色、圖標顏色和許多其他內容。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 11 Interactive Circle](/uploads/article/3362/Ul7JQideYKcbNXzN.gif)
如果您對互動圈子的外觀感到滿意,您現在可以發布您的頁面。 看看我們為這個主題製作的 Elementor 互動圈。
![[新] 網頁設計中的互動圈:如何在 Elementor 中創建一個無需編碼 12 Interactive Circle](/uploads/article/3362/ajP3cjXs6LAzvRe9.gif)
如您所見,Elementor 的基本插件允許創建一個宏偉的互動圈,並將您的網頁變成一種非常簡單的更迷人的方式。
最後,我們堅信持續改進的價值。 考慮到這一點,我們正在努力為您提供出色的 Elementor 新基本插件更新,以便您使用 Elementor 獲得更好的網站設計體驗。
那麼,你有什麼損失呢? 盡快更新到 Essential Addons 5.0,以利用所有新的高級小部件和擴展,包括 Interactive Circle 小部件。
自己嘗試一下,如果您有任何問題,請聯繫我們的支持團隊。 訂閱我們的博客或加入我們友好的Facebook 社區,了解有關最新 Elementor 插件、網頁設計教程、提示和技巧等的更多信息。
