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

相关文章

  • shopify开店

    Shopify如何开店

    Shopify如何开店?想要使用Shopify开店的商家,首先需要创建Shopify账户、添加产品、选择主题,之后要自定义商店、添加域名、配置配送支付方式、添加页面、连接应用程序,最后则需要创建测试订单并正式启动网站进行Shopify开店。对于小白商家来说,Shopify跨境电商独立站的开店步骤会有点繁琐,所以接下来将围绕Shopify开店的具体操作过程为大家展开介绍。 Shopify如何开店一:创建Shopify帐户 访问Shopify并完成帐户设置。Shopify Basic计划从三天免费试…

    开发教程 2025年 6月 2日
  • 填写名称、在用的邮箱地址、设置密码

    Shopify企业邮箱Zoho注册登录教程

    在使用Shopify搭建跨境电商独立站的过程中,商家使用企业邮箱进行邮件营销,可以给予用户更高程度的专业感和信任度。目前Zoho邮箱因为免费的价格和较高的送达率在跨境商家中比较受欢迎,所以下文将为大家具体介绍Shopify企业邮箱Zoho注册登录教程,讲解如何注册Shopify企业邮箱Zoho并绑定网站域名。 一、注册Shopify企业邮箱Zoho免费账号 Zoho 也有中文网站,不过不提供免费版注册。所以先访问英文版网站注册账号,注册后将语言改为中文即可。填写名称、在用的邮箱地址(用于接收注册…

    开发教程 2025年 5月 12日
  • 在 WordPress 上安装插件

    将Google Analytics添加到WooCommerce简单操作指南

    为了实现跨境电商独立站的分析功能,必须将 Google Analytics 与 WooCommerce 平台集成,了解如何将Google Analytics添加到 WooCommerce将使用户能够跟踪重要指标,例如用户行为、转化率和营销活动效果,以优化网站的绩效并增强用户体验。通过正确的设置,将能够监控网站的流量并做出明智的改进以提高销售额和客户满意度。 一、Google Analytics是什么 Google Analytics是一个强大的工具,可让商家深入了解网站的流量和用户行为。通过使用…

    开发教程 2025年 4月 28日
  • WordPress教程菜鸟教程

    WordPress网站建设 WordPress建站教程

    WordPress作为是目前市场上最受欢迎的网站建设平台之一,越来越多的商家选择基于WordPress进行外贸独立站的搭建工作,但是又WordPress网站建设技术有一定的门槛,所以在建站之前需要好好学习一下,接下来为大家具体介绍WordPress建站教程,快速搭建一个独立站。 一、域名注册 域名是网站在网络上的“住址”,相当于一间房子的门牌号,用户只有知道网站的住址,才能通过域名访问到网站。域名注册是外贸独立站建站的第一步,任何一个网站都不能例外。域名注册其实非常简单,只需要确定注册的域名和注…

    开发教程 2024年 10月 16日
  • WordPress字体设置

    WordPress字体设置 WordPress怎么改字体?

    在进行WordPress独立站自定义设置时,有些商家为了追求网站的个性化,会更改WordPress的默认字体,对于一些不熟悉WordPress后台操作的用户来说想要实现该功能,可能会有一些困难,所以下文将为大家介绍使用WordPress主题定制器、全站编辑、插件和CSS代码来更改字体的具体操作以供大家参考。 WordPress怎么改字体一:使用主题定制器 1、登录 WordPress 仪表板。 2、导航到 外观- 自定义打开主题定制器。 3、进入定制器后,单击 Fonts。 4、可以单独设置站点…

    开发教程 2024年 12月 27日
  • 勾选复选框

    WordPress页面标题隐藏的4种方法

    在WordPress外贸建站过程中,有时候为了打造更具吸引力的落地页,隐藏默认页面标题往往是优化布局的关键一步。本文将详细介绍四种实用的WordPress页面标题隐藏方法,涵盖从插件、自定义CSS代码到主题定义器及页面构建器的全方位解决方案。无论是希望全局隐藏还是针对特定页面操作,都能找到适合的技巧。 WordPress页面标题隐藏方法一:WordPress插件 可以用Title Remover WordPress插件隐藏页面标题,商家只需安装并激活它,页面编辑器的页面设置面板中会出现一个标注为…

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

联系我们

0551- 62586667

邮件:service@spiderltd.com

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

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