[新] 网页设计中的互动圈:如何在 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 插件、网页设计教程、提示和技巧等的更多信息。
