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

相关文章

  • Ubuntu系统的桌面环境

    新手指南:Ubuntu系统的基本操作和使用教程

    一、Ubuntu系统的基础操作 1、界面介绍 Ubuntu系统的桌面环境通常是基于GNOME桌面环境,它包括以下元素: 桌面:桌面是能看到的整个屏幕,可以在桌面上放置文件和文件夹。 任务栏:位于屏幕顶部的横条通常包含了应用程序启动器、系统菜单、通知区域等。 应用程序启动器:通常位于任务栏左侧,包含了常用的应用程序图标,你可以从这里启动应用程序。 通知区域:通常位于任务栏右侧,包含了系统通知、网络连接、音量控制等快捷操作。 应用程序菜单:在桌面的左上角,通常是一个“Activities”按钮,点击…

    开发教程 2024年 4月 24日
  • 搭建独立站准备

    搭建独立站要做什么准备:避坑指南

    大多数第一次外贸建站的商家,经常会疑惑搭建独立站要做什么准备,首先商家需要确定建站目标,其次要选择合适的建站方式,进行网站结构的规划,然后要确定目标关键词,最后则需要对网站进行运营维护的设置。所以本文为了让大家更好的搭建独立站,接下来将围绕以上提到的几个方面,为大家详细介绍独立站搭建的准备指南,帮助大家成功避坑。 搭建独立站要做什么准备一:建站目标的确定 在搭建外贸独立站之前,确定网站是旨在销售商品、分享个人见解、展示产品组合、提供服务或用于其他独特目的,这将有助于塑造整体结构和内容策略。 如果…

    开发教程 2025年 4月 17日
  • 单击 Theme Functions

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

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

    开发教程 2024年 12月 20日
  • 安装并激活SeedProd网站构建器插件

    WooCommerce独立站维护模式设置教程

    使用WordPress+WooCommerce搭建外贸独立站时,有时商家会进行网站的改版或更新等工作,这时为了让网站更加顺利的进行访问,就不得不启用WooCommerce独立站的维护模式,但是对于一些不熟悉WooCommerce代码知识的用户来说,此过程可谓是一头雾水,但是为了让小白都能进行独立站维护模式的设置,所以下文将基于此为大家介绍如何使用WooCommerce插件进行独立站维护模式的设置。 一、安装WooCommerce维护插件 安装并激活SeedProd WordPress插件。 导航…

    开发教程 2025年 1月 24日
  • WooCommerce短代码

    如何添加WooCommerce短代码?

    用户在使用WooCommerce进行跨境电商独立站搭建工作时,有可能会借助WooCommerce短代码实现更加醒目的页面布局,帮助商家更加直观地展示产品。那么这一步骤该如何实现呢?商家可以借助一些WooCommerce短代码示例,在WordPress编辑器中直接添加WooCommerce短代码来实现这一功能,下文将为大家具体介绍WooCommerce短代码有关知识。 一、WooCommerce短代码是什么 也许大多数人都熟悉在WordPress独立站中使用短代码,它显示为两个方括号[shortc…

    开发教程 2024年 9月 27日
  • shopify收款

    Shopify收款后如何退款

    Shopify收款后如何退款?商家可以在Shopify后台对订单的整个或单一部分进行退款,同时也可以为订单运费退款、允许超额退款等,下文将围绕这几种Shopify收款后的退款情况,一一介绍操作步骤,供大家在运营跨境电商独立站时提供方法指导。 一、Shopify收款后如何退款 1、整个退款 可以为订单中的所有商品发放全额退款。为订单退款时可以手动编辑退款总额,以向Shopify客户收取退货手续费,还可以退还任何运费。 为订单退款时可以退款至原始付款方式、商店抵扣额或两者。如果通过发放商店抵扣额退款…

    开发教程 2025年 9月 1日
联系我们

联系我们

0551- 62586667

邮件:service@spiderltd.com

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

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