WordPress页面构建插件Elementor使用教程

Elementor是一款功能强大的WordPress页面构建器插件,它提供直观的可视化界面,让用户可以通过简单的拖放操作设计和生成网页,无需深入了解编程知识。本教程将结合Astra免费主题和Elementor插件,设计和制作一个简单的B2B外贸公司询盘型网站,来展示产品和服务,吸引潜在客户。

为什么推荐使用Elementor

我曾经尝试过多款可视化编辑器,如WPBakery和Visual Composer,但在众多方面,Elementor无疑是更加优秀的选择。

以下是Elementor的一些优点:

  • 简洁的编辑方式:Elementor提供现代化且简洁的编辑界面,使用户可以轻松创建专业的网站页面。
  • 免费版:即使是免费版本的Elementor,也提供了丰富的功能和模块,足以满足大部分用户的需求。
  • 支持任何WordPress主题:Elementor对中文的支持良好,而且可以与任何WordPress主题兼容,使其更具灵活性和适用性。
  • 轻量化:即使是Elementor Pro版本,安装包总大小仅为3MB,这意味着它不会给网站带来过多的负担,有助于保持网站速度和性能。
  • 用户数量庞大:Elementor在WordPress插件中心拥有100万以上的活跃安装用户,超过90%的用户给予了五星好评,这反映了其受欢迎程度和用户满意度。
  • 专业的开发和售后团队:Elementor拥有专业的开发团队和售后支持团队,确保用户在使用过程中能够得到及时的帮助和支持。

安装Elementor

第1步,在WordPress菜单栏中找到“  插件”>“安装插件”。搜索Elementor并单击“  安装”。安装Elementor后,单击“  激活”

WordPress页面构建插件Elementor使用教程

安装Astra主题

在WordPress菜单栏中找到”主题”选项,点击”安装主题”,然后搜索Astra并一键安装并启用。

WordPress页面构建插件Elementor使用教程WordPress页面构建插件Elementor使用教程

Astra主题启用后,接下来我们安装 Astra 提供的模板主题。在菜单栏选择外观 Astra →安装导入插件

WordPress页面构建插件Elementor使用教程

在引导页时,我们直接点击下方 Build Your Website Now 按钮,选择支持 Elementor 页面构造器。WordPress页面构建插件Elementor使用教程WordPress页面构建插件Elementor使用教程

选择免费主题模版

Starter Templates 提供了各种类型的网页模板,我们根据自己的需求选择非PREMIUM 模板,这里我们以下方箭头的模板为例。
WordPress页面构建插件Elementor使用教程

点击箭头所指的模板,进入模板预览界面,这里提供了Logo 修改及预览,我们直接跳过,后续可以在我们网站里自己重新设置。
WordPress页面构建插件Elementor使用教程

跳过后,选择模板预设额度颜色和主题,这些后续都可以修改,所以不必太过纠结。
WordPress页面构建插件Elementor使用教程

设置完字体、颜色后我们点击 CONTINUE时,需要我们填写一些个人使用情况,如实填写后点击 Submit&Build My Website。

WordPress页面构建插件Elementor使用教程

等待模板安装,安装完成后会有提示,接下来我们在点击 View Your Website时,就可以看到我们的网站就像和模板一模一样啦。

WordPress页面构建插件Elementor使用教程

Elementor使用教程

主题模板导入完成后,我们可以进入到网站具体的页面来进行细节的调整。

编辑页面

进入到首页后,我们可以在顶部看到 使用 Elementor 编辑,点击按钮后,就可以进入首页的编辑界面。

WordPress页面构建插件Elementor使用教程

整个编辑界面主要分为2块,1是元素的菜单模块,2预览模块,页面上的元素我们可以通过添加元素,新增文字、图片、按钮等。在1元素的菜单模块调整样式、文案等。也可以在2预览模块中右键点击某个元素进行删除。

WordPress页面构建插件Elementor使用教程

当然你想要插入整块元素可以在某个块的上方点击+号按钮,新增一整个块进行页面元素的创建、编辑。

WordPress页面构建插件Elementor使用教程

通过不断对页面进行编辑和改造,我们就可以将模板上的信息修改为自己企业的信息,包括公司介绍、联系方式、服务内容,展示产品信息等。基本页面设置完成,就能够得到一个基础的B2B外贸企业站啦

创建页面

1、在WordPress菜单栏中找到“页面”选项,然后单击“新建页面”。

WordPress页面构建插件Elementor使用教程

第2步,在WordPress后台新建页面,然后点击最上方的使用 Elementor 编辑按钮。

WordPress页面构建插件Elementor使用教程

第3步,熟悉Elementor编辑器的结构,它由三个部分组成:工具栏、可视化界面和导航器。

  • 工具栏:包含可拖放的模块,如区块、图片、文字、按钮等。
  • 可视化界面:实时反映页面的变化,方便编辑页面内容。
  • 导航器:以垂直方式显示页面元素的排版,便于调整模块的顺序。

通过熟悉这三个部分,可以更好地使用Elementor编辑器,轻松创建和定制网站。

WordPress页面构建插件Elementor使用教程

第4步,点击加号选择所需的结构,确定在同一行或同一列中放置多少个区块。

WordPress页面构建插件Elementor使用教程

接下来,从左侧的工具栏中将所需的模块拖放到右侧的区块中,例如标题、图片和按钮。

WordPress页面构建插件Elementor使用教程

第5步,点击右侧的蓝色虚线框,选择已添加的模块,并对其内容进行修改。

WordPress页面构建插件Elementor使用教程

第6步,点击左下角的设置,将页面布局修改为全宽,以后可以单独调整每个区块的宽度。

WordPress页面构建插件Elementor使用教程

然后,使用预览功能查看页面的实际样式,确认无误后点击发布。这样,页面就成功创建了。

WordPress页面构建插件Elementor使用教程

Elementor Pro

Elementor Pro中,除了免费版的基本功能外,还增加了许多高级功能,其中最有用的是模板和主题生成器。此外,Pro版还提供了更多的模块、着陆页面和弹出窗口等功能。接下来,我将介绍如何使用Elementor Pro

第一步,首先在Elementor官网购买Elementor Pro,并在网站后台添加插件。你可以上传安装文件,然后点击立即安装并启用。

WordPress页面构建插件Elementor使用教程

第二步,安装完成后,在右上角会显示一个激活提示,请点击”连接并激活”按钮。

WordPress页面构建插件Elementor使用教程

第三步,检查激活状态。如果显示为”Active”,表示已成功激活,你可以随后进行在线更新,并导入大量付费模板。

WordPress页面构建插件Elementor使用教程

Elementor常见问题

Elementor免费吗?

是的,Elementor有免费版本可供使用。免费版本提供了基本的功能和模块,适合一般用户的简单网站设计需求。另外,Elementor也提供付费的Pro版本,价格从每年59美元到399美元不等,Pro版本提供了更多高级功能和模块,适合需要更多定制和功能的用户。

Elementor速度快吗?

Elementor本身是一个轻量级的插件,因此加载速度相对较快。然而,为了确保最佳性能,建议搭配高效的WordPress主机使用如,以确保网站的整体速度和性能。

Elementor好用吗?

是的,Elementor的编辑界面设计直观友好,易于上手,适合初学者或中小型企业使用。它提供了丰富的模块和功能,使用户可以轻松创建各种类型的网站页面,而无需编写代码。

Elementor适合谷歌优化吗?

Elementor的代码结构清晰简洁,生成的页面也相对干净,这有助于搜索引擎对网站内容的索引。因此,Elementor是对搜索引擎优化(SEO)友好的工具。许多知名的网站都在使用Elementor来构建其网站,包括一些SEO要求严格的网站

总结

总而言之,无论是建立个人博客、外贸B2B网站还是B2C,Elementor都是一个强大而灵活的工具,它简化了网站设计的过程。无论你是初学者还是专业人士,Elementor都将成为你实现网站设计目标的有力助手。

延伸阅读:

最新Elementor无法加载等常见问题及解决方法汇总

© 版权声明

相关文章