Elementor教程,零基础学会用Elementor建站

Wordpress2个月前发布 外贸先生
101 0 0

你是否刚开始尝试建站,预算又有些紧张,而寻找建站服务商的过程让你担心被忽悠,对于自学建站又感到困惑?

很多人认为建站太难了,需要懂代码、网页设计、数据库,还需要配置服务器等等,让人无从下手。曾经的不可能,现在可以轻松实现。随着互联网的发展,建站的过程已经变得不再那么困难。现在,只需要安装一款可视化页面编辑器,比如Elementor,然后跟着教程一步一步操作,即使你不懂代码,也能轻松完成建站的工作。

本文将详细介绍如何在WordPress上安装和配置Elementor插件,如何使用Elementor创建页面和布局,以及如何添加内容和样式。通过学习这些技巧,你将能够建立一个专业、功能齐全的B2B外贸公司询盘型网站,展示你的产品和服务,吸引潜在客户。

Elementor是什么?

Elementor教程,零基础学会用Elementor建站

Elementor是WordPress必备的可视化页面编辑器插件,它的拖放式功能降低了建站难度,即便你不懂代码,也能设计出精美的网站,建站像搭积木一样简单。

使用上Elementor有三个主要的版本:免费版、Pro版和Expert版。

  1. 免费版(Elementor Free):免费版包含一个可视化的实时编辑界面,可以添加文字、图片、视频,按钮等基础模块,并且能兼容其它第三方插件,对大多数人而言足够用了。

  2. Pro版(Elementor Pro):这是Elementor的付费版本,提供了更多高级功能和扩展。Elementor Pro包括额外的部件、主题构建器、动态内容、表单构建器、主题样式设置等功能,使你能够创建更复杂和功能丰富的网站。

  3. Expert版(Elementor Expert):这是Elementor的企业级版本,专为专业开发人员和机构设计。它提供了更多高级功能和工具,如全站主题构建器、动态字段、多网站管理等,使你能够更灵活地开发和管理多个网站。

特别提醒

  • 不要买破解版的任何主题或者是插件!不要等到哪天网站被黑或者挂了再追悔莫及
  • 非必要不装插件,插件越多只会影响网站的性能

如何安装Elementor?

第1步,在WordPress仪表板中,导航到“  插件”>“安装插件”。搜索Elementor并单击“  安装”。安装Elementor后,单击“  激活”

Elementor教程,零基础学会用Elementor建站

第2步:创建账号。如果你只想尝试免费版,请选择跳过此步骤。

Elementor教程,零基础学会用Elementor建站

第3步:安装主题。Elementor官方推荐了Hello主题,它是一个轻量级的WordPress主题,速度很快。不过对于新手来说,使用Astra主题更容易操作,建议跳过此步骤。

Elementor教程,零基础学会用Elementor建站

第4步:添加网站名称,即网站主页的标题。如果暂时还没有想好,可以先跳过,稍后在进行SEO优化时再填写。

Elementor教程,零基础学会用Elementor建站

第5步:上传网站Logo。同样,如果你还没有准备好Logo,可以先跳过,稍后随时上传或修改。

Elementor教程,零基础学会用Elementor建站

第6步:了解如何使用Elementor。你会看到两个向导,左侧是创建页面,右侧是导入模板。你可以自行点击查看,如果选择跳过,将直接跳转到创建页面。

Elementor教程,零基础学会用Elementor建站

至此,Elementor的安装已经完成。网站后台还会增加相关的设置选项。下一步是熟悉Elementor的操作界面和使用方法,并使用它来创建网站页面。

Elementor教程,零基础学会用Elementor建站

Elementor使用教程

使用Elementor,你可以轻松构建一个出色的网站,而无需学习任何编程知识。然而,在开始搭建网站之前,最好先了解Elementor的基本操作。考虑到这一点,我将逐步介绍如何使用Elementor。

1. 创建页面

第1步,安装插件后现在我们开始创建主页。转到“页面”选项,然后单击“新建页面”。

Elementor教程,零基础学会用Elementor建站

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

Elementor教程,零基础学会用Elementor建站

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

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

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

Elementor教程,零基础学会用Elementor建站

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

Elementor教程,零基础学会用Elementor建站

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

Elementor教程,零基础学会用Elementor建站

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

Elementor教程,零基础学会用Elementor建站

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

Elementor教程,零基础学会用Elementor建站

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

Elementor教程,零基础学会用Elementor建站

页面发布后,如果这个页面是网站的首页,你可以在WordPress后台的设置 > 阅读中将该页面设置为静态首页,并保存更改。以后访问你的域名时,将显示该页面作为首页。

2. Elementor Pro

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

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

Elementor教程,零基础学会用Elementor建站

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

Elementor教程,零基础学会用Elementor建站

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

Elementor教程,零基础学会用Elementor建站

3. 导入模板

导入模板是Elementor Pro的重要功能,它可以极大地简化网站建设流程,这也是免费版和Pro版的最大区别,也是新手能够零基础建站的关键之处。

第一步,打开Elementor页面编辑器,点击右下角的文件夹图标,进入模板库。

Elementor教程,零基础学会用Elementor建站

第二步,选择你喜欢的模板。如果遇到自己喜欢的模板,可以点击模板预览图上的放大镜图标进行预览。

Elementor教程,零基础学会用Elementor建站

第三步,点击绿色的”插入”按钮,即可一键在线导入模板。

Elementor教程,零基础学会用Elementor建站

第四步,导入模板后,将看到一系列已经制作好的模块,接下来你可以根据需要进行自定义设计。

Elementor教程,零基础学会用Elementor建站

4. 自定义设计页面

在Elementor中,可以进一步自定义每个模块,更改其内容、布局或样式,以使其符合你想要的效果。以下是具体的操作方法:

更改布局

点击蓝色虚线框上方的六个点,在”内容宽度”选项中选择相应的布局,以调整整个区块在页面中的宽度。

Elementor教程,零基础学会用Elementor建站

更改结构

同样是点击六个点,在布局选项下找到”结构”,你可以更改区块中各个模块的结构比例。

Elementor教程,零基础学会用Elementor建站

修改文字

对于文本和标题等文字类模块,只需点击相应的模块,即可修改其中的文字内容。

Elementor教程,零基础学会用Elementor建站

编辑图片

点击图片模块,你可以替换或删除图片,自定义图片尺寸、对齐方式,还可以添加链接和字幕。

Elementor教程,零基础学会用Elementor建站

修改颜色

点击要修改的模块,在样式选项中找到颜色设置选项,进行相应的修改。

Elementor教程,零基础学会用Elementor建站

删除模块

如果遇到不喜欢的区块或模块,可以右键点击鼠标进行删除操作。

Elementor教程,零基础学会用Elementor建站

响应模式

点击左下角的第四个图标,可以进入响应模式,自定义平板和手机端的页面布局。

Elementor教程,零基础学会用Elementor建站

站点设置

最后,点击左上角的菜单,设置站点的基本元素,如全局颜色、字体、主题风格、站点标识和背景等。虽然你也可以在网站建设完成后进行设置,但在开始阶段设置这些元素也没有坏处。

Elementor教程,零基础学会用Elementor建站

在站点设置中,上传自定义Logo、站点名称和网站描述等站点标识。

Elementor教程,零基础学会用Elementor建站

至此,如何自定义设计页面就介绍完了,接下来的事情无非是重复导入模板,保留你想要的,删除你不要的,并不断的改进和完善,最后把剩下的模块组合到一起变成自己想要的效果。

5. 添加页眉和页脚

设计好页面后,现在可以将它们按照分类添加到WordPress菜单中。接下来,可以使用主题生成器来添加网站的页眉和页脚。以下是详细的操作步骤:

第1步,在WordPress后台,点击”模板” > “Themebuilder”(主题生成器)。

Elementor教程,零基础学会用Elementor建站

第2步,点击”Header”(页眉)或”Footer”(页脚)旁边的”+”号。如果遇到错误,你可以尝试更换主题来解决。

Elementor教程,零基础学会用Elementor建站

第3步,点击文件夹图标,添加你选择的页眉或页脚模板。

Elementor教程,零基础学会用Elementor建站

第4步,选择你想要的页眉或页脚样式,并点击一键导入。

Elementor教程,零基础学会用Elementor建站

第5步,自定义网站的页眉和页脚中的元素。你可以修改它们的内容、布局和样式等。完成后,点击”发布”,并选择在整个站点中显示。

Elementor教程,零基础学会用Elementor建站

6. Elementor扩展

Elementor是一个强大的页面编辑器,提供了许多功能。然而,在使用过程中可能会遇到一些不完美之处,因此我们可以安装第三方主题和插件来进一步扩展其易用性。

主题扩展

我强烈推荐使用Astra主题,它具有一个巨大的优势,可以导入完整的网站模板,而不仅仅是简单的单页模板。这将使易用性和建站速度更有效率。

Elementor教程,零基础学会用Elementor建站

插件扩展

Elementor有许多出色的第三方扩展插件,如Essential Addons和Astra UAE。它们提供了上百个模块,可以帮助您更好地设计网站。

Elementor教程,零基础学会用Elementor建站

Elementor常见问题

Elementor免费吗?

是的,Elementor有免费版本,但也可以付费升级到Pro版,价格从每年59美元到399美元不等。

Elementor速度快吗?

Elementor的速度非常快,但前提是要搭配使用高效的WordPress主机。

Elementor好用吗?

是的,Elementor的编辑界面直观友好,非常适合初学者或中小型企业使用。

Elementor适合谷歌优化吗?

是的,Elementor的代码干净整洁,对搜索引擎优化(SEO)友好。许多知名的英文网站都在使用Elementor进行建设。

总结

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

© 版权声明

相关文章