Elementor编辑器怎么用?使用WordPress Elementor编辑器可以帮助商家实现构建页面和超级菜单等目标,此外借助编辑器Pro版本,用户还可以通过使用其内置的AI功能实现文本和代码的自定义创建。为了让各位使用Elementor编辑器进行外贸建站的站长,更加熟练地使用该编辑器,下文将围绕以上所说的Elementor编辑器怎么用的三个方面,为大家介绍具体的图文操作教程。

Elementor编辑器怎么用一:创建页面

如何创建新页面取决您是使用 Elementor Hosting 还是带有第三方主机的 Elementor 插件。

  • 如果有 Elementor 托管,请参阅下面的从 My Elementor 仪表板创建和编辑新页面。
  • 如果将 Elementor 插件与第三方主机一起使用,请参阅下面的从 WP Admin 创建和编辑新页面。

1、从 My Elementor 仪表板创建和编辑新页面

进入 My Elementor 仪表板。

进入 My Elementor 仪表板

将鼠标悬停在要创建或打开页面的站点的网站卡上,然后单击 Manage this site(管理此站点)。

单击 Manage this site

网站屏幕显示许多网站选项,包括最近访问的页面列表。滚动到要编辑的页面上,然后单击编辑图标,该页面将在 Elementor 编辑器中打开。要创建新页面,单击 Edit website 下拉列表。选择 Add a page(添加页面),该页面将在 Elementor 编辑器中打开。

2、从 WordPress Admin 创建和编辑新页面

在 WordPress Admin 中,选择页面选项卡,单击 Add New (新增)。

单击 Add New

或者是从 WordPress Admin 顶部栏中选择 New-Page,单击使用 Elementor 编辑。

单击使用 Elementor 编辑

Elementor编辑器怎么用二:创建超级菜单

选择使用 Theme Builder 创建新标题,将 Menu 小部件拖动到标题的容器中(也可以将新容器添加到标题中)。

有三个顶级菜单项,要创建它们,需要替换第 1-3 项,在 Content 选项卡中,单击 Item #1,在 Title (标题) 文本框中,键入 Home。

键入 Home

现在需要将菜单项链接到 Home 页面,可以输入主页的 URL,但最好使用动态链接,单击 dynamic tag 图标。

单击 dynamic tag 图标

对于 Dynamic link (动态链接),选择 Site-Internal URL (站点内部 URL),单击 Internal Link。

单击 Internal Link

从 Type 下拉列表中,选择 Content (内容)。

选择 Content

在 Search and Select 下,开始输入要查找的页面的名称,在本例中为 Home,当它出现时选择它,对 Our Breads 和 Our Story 页面重复此操作。

可以通过添加设计元素来美化菜单,例如在Content 选项卡的 Menu Items 下,选择 Home,单击 Dropdown Content 开关。这个开关将菜单变成一个超级菜单,允许用户将各种内容添加到菜单项中。默认情况下,项目旁边会出现一个箭头图标,点击首页,项目旁边的箭头将向下切换,并在菜单下方打开一个内容区域。

点击首页

将 Image Widget 拖动到内容区域中,选择当用户将鼠标悬停在菜单项上时将显示的图像,单击箭头关闭内容区域。

默认情况下,当访客将鼠标悬停在菜单项上时,将显示这些图像。在编辑时看不到这一点,因此必须预览页面才能看到超级菜单的运行情况。

Elementor编辑器怎么用三:AI优化

1、编写文本

更新到 Elementor 3.13 后,允许用户在插入文本时可以选择使用 AI 编写。将 Text (文本) 小部件拖动到画布上。单击 Content (内容) 选项卡的 Text Editor (文本编辑器) 部分中的 Write with AI (使用 AI 编写)。

单击 Write with AI

将打开 Elementor AI 文本窗口。

打开 Elementor AI 文本窗口

Elementor AI 将提供有关如何启动文本生成请求的几条建议。可以先单击其中一个并对其进行编辑,也可以插入自己的提示。

进行编辑

之后单击 Generate text (生成文本)即可完成步骤。

2、添加CSS代码

选择 Heading 小组件,从 Heading 构件的 Advanced 选项卡中选择 Custom CSS。

选择 Custom CSS

选择 Code with AI (使用 AI 编写代码)。

选择 Code with AI

在文本框中输入“使此标题在悬停时变为红色”。

输入“使此标题在悬停时变为红色”

注:首次使用 Elementor AI 后,带有 AI 的文本将被 Elementor AI 图标替换。

单击 Generate code (生成代码),这将添加以下 CSS 自定义代码:

将添加以下 CSS 自定义代码

推荐阅读:

《WordPress自定义页面模板如何创建?》

《如何在WordPress中创建下拉菜单?》

《WordPress外贸建站教程:WordPress导航菜单怎样设置?》

相关文章

  • Wix无损迁移到WordPress

    Wix建站如何无损迁移到WordPress:完整迁移实操指南

    Wix建站如何无损迁移到WordPress?本文梳理手动迁移、RSS导入、工具迁移、专业代迁四种方案,附带主机部署、301重定向配置、SEO保全要点。不少站长前期选用Wix搭建独立站,后期受定制、SEO、拓展性限制转向WordPress,本文接下来将讲解Wix建站无损迁移到WordPress的四种方法,帮站长轻松稳妥搬迁文章、图片等资源,最大限度规避收录与流量损耗。 从Wix简易迁移至WordPress 不少建站者初期选用Wix搭建网站,但随着业务、流量与内容扩容,大多会转向自由度更高的Word…

    开发教程 2026年 6月 3日
  • 插件设置部署操作

    WordPress建站教程:WordPress伪静态设置方法

    在WordPress外贸建站过程中,对于一些想追求网站速度优化的用户来说,会选择进行WordPress伪静态设置,使得原本复杂的网站参数变得清晰明了,让搜索引擎更易于理解和抓取,让访问者易于记忆,进而提高网站优化效果。所以将基于此为大家介绍WordPress伪静态的设置方法,以供大家参考。 WordPress伪静态设置方法一:使用插件 当用户满足以下条件时,可以使用WordPress插件WordPress Static Site Generator: 网站变化不大 不依赖动态内容(如果想使用 W…

    开发教程 2025年 1月 17日
  • 关闭WordPress主题或插件自动更新功能

    如何关闭WordPress主题或插件自动更新功能?

    通常情况下WordPress主题或插件应该保持自动更新功能,以实现维护WordPress网站安全和网站正常运行的作用,但有时这一功能可能会带来网站代码覆盖,甚至会网站崩溃的问题,所以这时候用户可以通过插入代码或者是安装Easy Updates Manager插件实现WordPress主题或插件自动更新功能的关闭,下文将为大家具体展示这一过程,希望可以助力大家外贸建站工作的顺利开展。 一、插入代码关闭WordPress主题或插件自动更新 1、通过wp-config.php文件禁用WordPress…

    开发教程 2024年 10月 31日
  • 安装WordPress幻灯片插件

    WordPress建站教程:WordPress幻灯片设置

    在外贸建站的过程中,有些商家会选择使用WordPress幻灯片为网站页面增加一定的动感和可观性,进而提高网站与访客的互动性,那么这一步骤对于一些新手用户或者不懂代码的小白来说,可能过于生涩难懂,所以下文将为大家介绍一种简易的方法为大家介绍WordPress幻灯片设置步骤。 一、安装WordPress幻灯片插件 首先进入WordPress独立站的仪表板并在左侧菜单上找到“插件”选项卡,然后单击“添加新”,然后在搜索栏中输入滑块的名称“Smart Slider 3”。 单击“立即安装”,然后单击“激…

    开发教程 2024年 10月 18日
  • WordPress文件修改

    WordPress修改最大文件限制的5种方法

    WordPress修改最大文件限制常用的方法有,functions.php文件添加代码,修改.htaccess文件,创建或更新.user.ini文件,使用WordPress的upload_size_limit过滤器等,下文将通过介绍这5种方法,帮助各位外贸建站的商家,解决因为文件上传限制拖慢网站搭建流程的问题,让站点顺利运行。 方法一:向主题functions.php文件添加代码 在主题的functions.php文件中添加代码片段可以帮助你修改WordPress中最大上传文件的大小。虽然你可以…

    开发教程 2025年 12月 26日
  • 从Shopify主题商店重新安装主题

    Shopify店铺复制全流程:高效迁移实操指南

    跨境电商独立站运营中,Shopify店铺复制是快速复刻店铺、高效迁移数据的核心方式,能避免重复搭建的繁琐与数据丢失风险。复制需先保障双店权限、订阅计划与主题匹配,再依次导出产品、顾客CSV数据,妥善处理产品图片链接,导入新店后还原应用、设置及附加内容,即可实现店铺完整复刻。下文将分步详解Shopify店铺复制的具体操作步骤。 一、准备好两个Shopify店铺 首先需要用店主账号登录原店和新店,只有这样才会拥有导出和导入存储数据的全部权限。另外确认新商店使用的是和原店相同的Shopify订阅计划,…

    开发教程 2026年 5月 4日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

工作时间:周一至周日,9:00 - 21:00,节假日不休息

在线客服
微信客服
微信客服
分享本页
返回顶部