欢迎光临
我们一直在努力

Elementor 教程:0 编程基础也能学会的网站建设

Elementor 是WordPress 必备的可视化页面构建器插件,他是拖放式的功能降低了建站难度,即便你不会代码,也能制作出精美的网站,使用 Elementor 就像搭积木一样搭建属于你的网站。

elementor

Elementor 和 Elementor PRO 的区别

功能 Elementor(免费版) Elementor Pro(付费版)
页面构建器 拖放式页面编辑器 拖放式页面编辑器,功能更强大
模板 提供基础模板 提供更多高级模板和全站模板
主题构建器 支持自定义网站头部、脚部、单页面、存档页面等
弹出窗口构建器 支持创建和设计弹出窗口(Pop-up Builder)
WooCommerce 集成 基本支持(需要额外插件) 完全支持,允许设计和自定义 WooCommerce 商店页面
自定义字体和排版 基本排版和字体样式 更多字体选项、动态字体样式和排版控制
高级设计功能 基本背景样式、色彩和间距 更多背景选项(渐变、视频背景)、动效、交互式元素(如悬停效果)
Global Widget(全局小工具) 允许创建和复用全局小工具
表单功能 基本表单功能(仅限字段和样式) 高级表单(多个字段、提交操作、与第三方工具集成等)
动态内容 支持动态内容(例如来自数据库、博客文章、用户数据等)
自定义CSS 支持自定义CSS编辑
支持与更新 基本支持 优先支持、定期更新、访问最新功能

Elementor 安装

elementor-install

在 WordPress 后台搜索 Elementor 安装并启用后, 左侧栏目上就会出现 Elementor 相关的内容介绍、功能组件及设置。

elementor-pro-install

正版的 Elementor  PRO 购买后会提供压缩文件包, 可以通过 WordPress 后台插件 – 上传插件 进行安装。

Elementor 基础设置

elementor-setting-1
elementor-setting-2

禁用 Google 字体,加快网站访问速度。

elementor-setting-3

全部激活开启 Elementor 特性的功能。

elementor-style

当要套用第三方提供的主题时, 需要同步一下 CSS 样式文件。

elementor-banben

当更新了 Elementor 新版本遇到问题时,可以点击版本控制回到上一个版本。

Elementor 教程

创建页面并用 Elementor 打开页面的步骤省略了。Elementor 教程从构建页面、基础设置开始讲起。

elementor-silde-view-add-text-button-step1

首次打开 Elementor 时看到界面。从左侧拖拽 “ 容器 ” 到中间 “ + ” 号中。

Elementor 页面结构

elementor-page

如图所示,假设当前你要编辑的页面是一篇博客的内容文章,可以遵循这样的结构。

elementor-new-page

点击左上角的 “ 结构导航 ”。 你接下去在页面中添加的内容都会在结构中显示。 简介和为什么要学结构是两个板块,分别用2个容器来分割。 在段落2中嵌套容器用来补充说明,需要注意 H 标签的使用。

Elementor 网格布局

elementor-grid-style-1024x543-1

点击选中某个 “ 容器 ”,可以把布局设置成网格,并且还可以控制行数和列数。

elementor-grid-style2

如果你现在每个图片下面加上标题和时间,就需要每个网格内再套一层容器。如果先要查看效果先点右上角的 “发布” 按钮,再点一下右侧向下箭头中的 “查看页面”。

elementor-more-grid
elementor-more-grid2

Elementor 预设了许多网格的样式,基本上可以满足大部分的需求。

elementor-more-grid4
elementor-more-grid3

你也可以通过 Elementor 提供的模版库中去挑选你喜欢的样式。Elementor 页面编辑有三种:根据自己喜好随意摆放。第二种:使用模版库的预设模块。第三种:由设计师设计好页面,程序猿按设计要求做页面。你会选择哪种呢?

Elementor 基本组件

基本组件主要由 9 个模块组成: 标题 、 图片、 描述、 视频 、按钮 、 分割线是我最常用的几个小部件。间距 、 谷歌地图、图标很少用。

标题组件

一个页面中只会出现 H1 标题, 其他的型号的 H 标题则根据页面的层次有规则的设置。

elementor-page
h-set1
h-set2
h-set3

图1:可以设置点击标题跳转的外链, 标题的类型。
图2:可以设置对齐的方式、 字体的样式大小颜色等。
图3:可以设置标题的动态的效果、位置、或更高级的自定义方式。
前2种方式使用的比较多,第3种需要你花更多的时间去研究了。

图片组件

WordPress 图片上传很方便,可以直接把图片文件拖拉到网站内容编辑中。 我一般都是在本地优化好图片尺寸和大小后再上传的。图片大小对网页打开速度还是影响很大的,做运维服务的人一定要注意优化图片。《关于本地图片优化方式》本站有教程可以点击查看。

image-alt

另外图片的 Alt 设置也很重要,也能够影响 SEO 的表现。对于复杂的图片机器也会很难识别, 需要你提供 Alt 描述来告诉他们。

文本编辑器组件

Elementor 内置的文本编辑器把最主要的一些功能都都包含在了里面。想要把段落内容编辑的更好看办法肯定是有的,但是不推荐这样做哦。例如: 字体加粗、 斜体、 列表、 外链、对齐这些基本的功能用好就可以了。

视频组件

视频组件其实用的也很多,尤其是对于外贸企业客户展示自己产品时, 经常会用视频来进行展示。视频组件使用方法也非常简单,只需要把里面的链接进行替换就可以了。强烈推荐不要把视频放在你的服务器上,不仅会占用服务器大量的空间,而且打开的速度会超级慢(因为视频打开是需要加载和流量的),最好的方式就是开通 Youtube 账号把视频放在第三方平台,网站内容只要改下链接就可以了。

按钮组件

添加按钮的目的是为了点击之后跳到另外个页面,一般会在产品页面加上 “联系我们” 的按钮。在内容文章如果要推荐访问其他文章一般用锚文本。 比如像这样: 本站有关于锚文本的介绍,点击查看。

赞(0)
未经允许不得转载:WP之家 » Elementor 教程:0 编程基础也能学会的网站建设

登录

找回密码

注册