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导航菜单怎样设置?

相关文章

  • 安装激活WPForms

    外贸独立站建站教程:联系我们页面创作步骤

    联系我们页面是外贸独立站的“沟通桥梁”,直接影响访客信任度与转化效率。对于一些行业而言,简洁真诚的欢迎语搭配核心联系信息,能快速打消访客顾虑。精准呈现电话、多用途邮箱、实体地址(如有)、营业时间及社交媒体链接,是建立沟通基础的关键。下文将详细拆解必备信息清单与WordPress平台联系表单的实操步骤。 一、创建联系我们页面时必须包含的重要信息 一般来说,可以先说欢迎词,解释为什么访客应该联系你,并说明你如何帮助解决访客的问题。不需要很长,只要加几句简短的话就够了。 假设你为男性定制钱包。在页面开…

    开发教程 2026年 3月 17日
  • WordPress文件修改

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

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

    开发教程 2025年 12月 26日
  • 点击电子邮件路由

    外贸免费企业邮箱注册流程

    做外贸时,拥有一个外贸企业邮箱,是与海外客户建立联系的重要渠道。那么新入门的小白该如何在预算有限的情况下,注册一个免费的外贸企业邮箱呢?实际上只需一个域名、Cloudflare、Resend和Gmail,即可免费搭建专属邮箱。本文手把手教你完成从域名注册到收发邮件的外贸邮箱注册全流程,轻松实现专业的海外营销对外沟通。 一、外贸免费企业邮箱搭建准备条件 域名比如“kedeng.com”。如果你还没有域名,可以去Gname或其他平台购买一个,便宜的域名一年也就十美元左右。 Cloudflare账户:…

    开发教程 2026年 2月 20日
  • 单击 Theme Functions

    Woocommerce商城设置注册页面详细指南

    在使用Woocommerce和WordPress进行外贸建站时,大多数站长会选择通过自定义顾客登录和注册页面来增强用户体验,以更好的收集顾客信息,以做好网站的运营推广。所以下文将基于Woocommerce商城设置注册页面这一问题为各位站长具体介绍其中的详细过程,以供不熟悉操作的商家提供一个过程参考。 一、使用hooks设置Woocommerce商城注册页面 WooCommerce hooks提供了一种灵活且安全的方式来自定义Woocommerce商城注册页面,而无需直接编辑主题文件。 1、登录到…

    开发教程 2024年 12月 20日
  • woocommerce关闭价格

    WooCommerce怎么关闭价格显示

    WooCommerce关闭价格显示可以通过WholesaleX插件或者代码实现,本文主要列举了通过这两种方法实现对所有用户和根据用户角色关闭WooCommerce价格显示的教程,以供大家在搭建跨境电商独立站时参考。 一、对所有用户关闭WooCommerce价格 1、使用插件 正确安装并激活WholesaleX插件后,进入设置部分,点击“价格”选项。 这里可以看到两个选项: 显示登录以查看产品列表页面的价格:启用此选项后,商品价格会从商店和档案页面隐藏,并显示“登录查看价格”的文字。 显示登录查看…

    开发教程 2025年 12月 12日
  • WooCommerce8 PDF发票插件

    WooCommerce商城独立站发票设置教程

    一个值得海外客户信赖的跨境电商独立站,发票功能的设置是提升消费者信任感的关键步骤。但不少卖家卡在WooCommerce发票设置环节,不知道怎么装插件、配信息、定模板。这篇教程就手把手教你从安装发票插件,到通用信息配置、发票规则设定,再到个性化模板定制,帮商家速搞定独立站发票管理。 一、安装WooCommerce发票插件 登录WordPress账户。 从WordPress仪表盘中导航到插件-添加新插件。 搜索“WooCommerce PDF发票插件”。 点击“立即安装”按钮安装插件,然后激活插件。…

    开发教程 2026年 1月 12日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

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

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