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

相关文章

  • htaccess文件

    .htaccess在哪里 .htaccess文件主要用于哪些目的?

    .htaccess在哪里? WordPress .htaccess文件通常位于WordPress public_html或www文件夹中,即根目录中,可以主要应用于管理永久链接结构、提高网站性能、设置重定向等目的,所以下文将基于.htaccess文件及其相关设置展开有关内容的叙述,为大家在WordPress外贸建站开发中提供一定操作指导。 一、什么是.htaccess文件 .htaccess文件是“超文本访问”的缩写,是Apache Web服务器使用的强大服务器配置文件。在WordPress上下…

    开发教程 2024年 11月 15日
  • 个人搭建摄影网站

    个人如何搭建一个摄影网站

    个人如何搭建一个摄影网站?个人搭建一个摄影网站,首先需要选择域名和托管服务,之后通过一键安装WordPress来实现独立站建站平台的顺利搭建,接着需要安装下载合适的摄影主题和插件,以保障网站的正常功能的设置与实现,最后则是通过配置电子商务功能、社交媒体账号设立和反向链接的建设,实现摄影网站的成功搭建。 一、个人如何搭建一个摄影网站 1、选择域名和托管 域名是网站的数字地址。这是潜在客户和网站访问者找到自己网站的方式。选择适合的域名以反映摄影风格、利基或品牌形象,此外域名还应该简短、令人难忘且与自…

    开发教程 2025年 8月 14日
  • 找到WordPress主题文件夹

    WordPress后台地址是什么及如何设置

    WordPress后台地址其实就是WordPress网站的后台URL,通过此URL的访问,用户管理关于WordPress独立站的文章、页面、主题、插件等一切项目。通常来说,用户设置WordPress后台地址最简单的方法是通过仪表板的设置常规部分进行更改,但有时候也可以通过wpconfig.php 文件和functions.php 文件设置WordPress后台地址。接下来本文将具体大家介绍WordPress后台地址设置的有关内容,以帮助大家在外贸建站时提供一个操作参考。 一、WordPress后…

    开发教程 2025年 2月 28日
  • WordPress搭建

    WordPress搭建购物网站教程

    大多数使用WordPress建站的商家,都会选择借助WooCommerce来搭建购物网站。WooCommerce是一款电子商务插件,使用WooCommerce可以轻松实现销售数据、库存和客户数据的一站式管理,所以本文将教大家如何借助WooCommerce将 WordPress网站变成在线购物网站。 WordPress搭建购物网站一:前提准备 从头开始创建 WooCommerce 网站需要以下三件事: 需要一个 WordPress 托管帐户,所有网站文件都将存储在此处 域名,这是网站的 Inter…

    开发教程 2025年 4月 25日
  • 建站小白必看的320个必备Web开发专业术语

    建站小白必看:30个必备Web开发专业术语

    做外贸建站的商家离不开Web开发,无论是自己学习技术开发网站还是寻找专业的外贸建站公司进行外包建站,用户都有必要了解Web开发的专业术语,不仅可以帮助商家将自己的建站需求精准传达给客户,而且可以进一步丰富自己的网站建站知识,所以接下来将基于此为大家展示建站小白必看的30个必备Web开发专业术语,以供大家参考。 一、什么是Web开发 Web开发与网站设计密切相关,通常用于网站和应用的实际构建和编程,主要是指在互联网上创建网站的过程。Web开发人员通过编写代码,使用各种编程语言来实现这一点,这些语言…

    开发教程 2024年 12月 4日
  • HTML、CSS、JS和PHP之间的关系

    HTML、PHP、CSS和JS之间的关系

    在外贸建站的过程中,要想进行独立站的开发,不可避免的会遇到网站搭建常见的四种技术,分别是HTML、PHP、CSS和JS,一提到这四种技术语言时,不少技术小白会一脸懵,所以接下来本文将为大家梳理这四种语言之间的关系,为大家外贸建站提供一些技术支撑。 HTML:HTML(Hypertext Markup Language)即超文本标记语言,是用于描述网页文档的一种标记语言。HTML其实是文本,它只是客户端语言,所以需要浏览器的解释,而且只用HTML做出来的网页是静态网页,没任何得交互功能。 CSS:…

    开发教程 2024年 9月 4日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

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

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