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日
  • 根目录找到.htaccess文件

    301重定向怎么设置?

    301重定向使用户在外贸建站时经常会遇到的一种重定向技术,站长通常会通过编辑.htaccess文件或者return语句等方法来实现网页地址的迁移,以避免404错误的出现,诚然了解301重定向的相关设置有利于网站的正常运行,进而提升用户访问体验和提高网站搜索排名,所以下文将为大家介绍如何设置301重定向,为大家搭建外贸网站提供一些准备。 一、Apache网站服务器301重定向 在网站的根目标找到如下这个文件: 如果没有找到这个文件?有以下两种可能: 网站没有.htaccess文件。可以使用 Not…

    开发教程 2024年 9月 13日
  • CSS网站设计

    如何进行CSS的网站设计与开发?

    各位站长在外贸建站时,可以通过变换生成、掌握Calc()函数、Box-Sizing等方式设计出更丰富的网站页面。CSS作为与HTML相辅相成的网站开发工具,可以极大程度上,减少前端技术人员代码编写的负担,帮助网站形成一个良好的网站布局。所以,本文接下来将和大家分享在CSS设计中存在的一些巧思,让各位站长更好的进行Web开发工作。 一、图像必须匹配站点的颜色方案 颜色方案使得管理工作流程变得复杂。站长可能会使用高分辨率,如灰度PNG,并使用CSS滤镜添加色调。该方式可以将肖像匹配到事件方案,并且可…

    开发教程 2024年 7月 10日
  • WooCommerce产品排序

    WooCommerce产品排序调整:三个方法提升用户体验感

    在WooCommerce上进行销售时,为了提高客户购物体验,需要对WooCommerce产品排序进行调整,这对于提升销量和转化率都是非常有帮助的。外贸建站商家可以通过手动调整、修改默认、使用PHP代码片段插件三种方法调整WooCommerce产品排序,有需要的朋友可以多多了解一下。 WooCommerce产品排序调整是什么 WooCommerce是一个基于WordPress的开源电子商务平台,它能够将WordPress网站转变为功能完整的在线商店,支持销售实体商品、数字产品及订阅服务等,并提供产…

    开发教程 2026年 7月 29日
  • WordPress添加JS和CSS样式表

    WordPress教程:WordPress添加JS和CSS样式表

    对于一些使用WordPress进行外贸建站的商家来说,大部分人会通过在WordPress中添加JS代码和CSS样式表,以增强网站的交互性和观赏性,但对于一些不了解代码知识的商家可谓是天方夜谭,所以本文接下来将为大家讲解WordPress添加JS和CSS样式表的具体教程。 一、WordPress添加JS和CSS样式表的常见错误 许多WordPress插件和主题开发人员都犯了直接将脚本或内联CSS添加到插件和主题中的错误,有些人错误地使用wp_head函数来加载脚本和样式表。 <?php ad…

    开发教程 2024年 9月 11日
  • 将Etsy产品导入Shopify

    如何将Etsy产品导入Shopify:新手指南

    如何将Etsy产品导入Shopify?主要有手动CSV导入以及通过第三方App同步两种方法。随着业务规模扩大,许多卖家选择这条转型之路,来打造专属于自己的跨境电商独立站。无论是想免费亲力亲为,还是追求省时高效的自动化同步,都能找到最适合的解决方案。接下来,将详细拆解这三种导入方法的具体操作步骤,助里商家轻松开启建站第一步。 Etsy 是建立手工或创意业务的绝佳平台,但随着业务发展,它的诸多限制可能会阻碍店铺成长。因此,多商家正在学习如何将 Etsy 产品导入 Shopify,以扩展成为独立的品牌…

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

联系我们

0551- 62586667

邮件:service@spiderltd.com

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

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