本文详尽介绍了如何使用WordPress的Elementor插件来创建和编辑网页内容，涵盖从页头设计到 Banner、标题样式、Columns元素、图像、文本编辑器、视频、按钮、分隔线、谷歌地图、图标、文章发布、Portfolio和Gallery等功能的使用方法，适合初学者快速掌握Elementor页面构建技巧。
本文来教大家怎么使用Wordpress Elementor页面编辑器插件来自由创建我们的网页内容。很多同学在面对建站的时候，一开始都是热血沸腾信心满满的，等到实际上手的时候就会发现有很多问题都是无法解决的，希望本篇Elementor插件使用指南能够帮助到你。
目录
修改项目二：站点标题也就是“site title”进行相关的设置
内容部分设置完成之后，我们再到菜单的样式中去进行相关的配置，相关操作如下：
第一种：纯色页头背景（这种是最简单也是最常见的页头背景效果）
第一步：将Elementor编辑器中的“标题”元素拖动到内容编辑块中
第一步：将Elementor编辑器中的谷歌地图功能添加到内容编辑版块
第二步：将Elementor编辑器中的谷歌地图主体功能进行相关的设置
第三步：将Elementor编辑器中的谷歌地图样式功能进行相关的设置
第一步：将Elementor的portfolio元素添加到内容编辑版块
第二步：对Elementor的portfolio元素进行主体功能设置
第三步：对Elementor的portfolio元素进行样式功能设置
第一步：将Elementor的Gallery元素添加到内容编辑版块
第二步：Elementor的Gallery元素主体功能内容设置
第三步：Elementor的Gallery元素样式功能内容设置
Elementor插件的按照及其功能介绍
首先，在自己的外贸网站后台中，找到插件选项然后再点击添加新的插件，在搜索框中输入“Elementor”，页面跳转如下：
第一个出现的结果就是我们想要的，我们可以看到这款插件的安装量已经达到了3百多万，有4290个评论，我仔细看了一下这里面的部分评论，基本上是好评居多，5星好评有4008个，1星差评只有80个，这对300多万的安装量来说已经难能可贵了。我们点击“Install Now”按钮进行安装，安装完成后，点击“Activate”按钮进行激活。页面跳转如下：
Elementor很贴心的放了一个插件功能介绍视频，如果之前接触过这方面内容或者本身对网站建设有较强能力的同学可以忽略，不过，还是建议大家都先看一下它的视频内容，毕竟视频内容只有不到3分钟的时长。我们来实操讲解一下这款功能的相关应用。点击视频下方的左边蓝色“Create your first page”按钮，页面跳转如下：
我们可以看到最左侧是它的工具菜单栏，有点类似于wordpress的经典编辑器，右边是我们需要代编辑的网站页面。我们先来看一下这个elementor插件都有哪些功能：
我们在上图中可以清楚的看到，elementor的功能和wordpress的经典编辑器差不多，主要分为基本功能，一般功能，wp基本功能三大部分。如果细说的话功能方面还是wp的经典编辑器更全面。当然这是免费版本，还有付费版本应该有更多的功能设置，这里先不展开讨论，我们主讲的这这款插件的具体操作方法。
先点击页面右边的红色加号按钮，创建一个新的待编辑网站页面，出现了一个网页块选择器，如下图所示：
我们可以根据自己的建站思路来进行选择，比方说我们先做一个网站的全宽图片轮播块，那就先选择第一行第一个，页面跳转如下：
我们点击最左边的菜单栏中头部“编辑部分”右边的那个功能块，然后在一般功能中选择图像轮播，鼠标左键按住拖动到编辑界面右边的新增编辑块中，界面如下图所示：
鼠标移动到右边新增编辑框中的图像轮播功能，点击右上角的铅笔图标，然后最左边的内容编辑区块就可以对该图像轮播区块进行具体的设置了，我们来实际操作一下：
我们这里没有预先对图片进行裁切，所以在右边的效果示意图中感觉参差不齐，同学们在建站之前需要备好对应的资料。在编辑工具的左侧，我们可以自定义设置图片的长宽像素值，一般情况下1200*500px是一个比较好的选择。幻灯片显示页数这里选择的是3张，太多的图片没有太大意义，毕竟客户不可能仅凭三张图片就来和你合作。
图像拉伸是在图片尺寸小于我们预设的1200*500px的情况下，工具自动给图片进行拉伸以达到全宽覆盖的效果，但是会影响画面，严重的会导致图像扭曲。导航就是图片的滑动方式，可以选择图片的左右箭头点击滑动，也可以是选择图片底部的小圆点进行滑动，或者两个全部选择都没关系。
链接设置是很有必要的，作为首页的轮播图一般放置的是最想表达的东西，可以是公司实力或者是热卖产品，以此吸引客户点击到对应的页面中。我们可以在链接选项中选择“自定义网址”，然后在下方的链接地址栏中输入对应的链接。下面的附加选项因为没有截图就简单的说一下，这是对该轮播图像的设置功能的额外补充，包括：鼠标移动到图像上时，图片会暂停轮播功能直到鼠标移开图片。
自动播放功能是不需要鼠标点击图像移动按钮的前提下，自动进行图片轮播展示。我们还可以在自动播放速度中调整图片轮播展示的循环速度，这对于某些图片上有大量内容和文字需要一定时间进行阅读理解的图片来说是很好的一个选择。具体相关细节，同学们可以在实际操作中进行掌握，这里不再赘述。
轮播图片功能做好之后，我们再看一下文字编辑方面的操作。还是点击右边的块编辑区域，点击加号然后生成一个新的待编辑区块，如下图所示：
拖动左边的文本编辑器到右边的待编辑块中，左侧是直接编辑工具栏，右边也可以进行编辑，相对来说左边的文字编辑栏的功能要更加齐全，特别是文字颜色的功能，在以往的worepress 经典编辑器中是没有这个功能的。我们可以对文字进行H标签的处理，可以为文字添加链接使其成为锚文本，如果有多段内容，还可以用段落的形式进行分点分类化编辑。另外如果对文字编辑有更高要求的，比方说文字的大小，我们可以点击视觉效果旁边的“文本”按钮进行编辑，注意这里是代码编辑区域，如果要调整字体大小，则需要添加代码style=”font-size:(这里填入你需要的字体大小像素值)px”。
在完成图像轮播和文字编辑后，我们就完成了最简单的网页编辑工作，点击网页左下角的“发布”按钮即可查看实际效果。
如何用Elementor设计网站页头
我们按照网页从上往下的布局方式来对整个Elementor建站系列内容进行撰写，作为网站的头部内容，页头的设计也是至关重要的。
第1步：创建网站页头的模板
在Wordpress左侧的菜单栏中点击“模板”—“添加新模板”（如上图所示），点击之后，屏幕上会出现一个弹窗，如下图所示：
在上图中选择“模板类型”为—“Header”，然后将我们新选择的这个Header页头模板命名为“页头”（当然，这里的命名是你自己随意的，只要你自己不会混淆就行）。在完成了这两个步骤的操作之后，Elementor编辑器会自动将页面跳转到它的模板库中，如下图所示：
我们注意到，每个模板的右上角都有一个“PRO”的标志，这就意味着这些都是付费的模板，必须使用付费版本Elementor Pro才能使用这些模板。如果你不在乎这点费用，可以在插件里激活付费版，使用起来更方便。
因为模板库中所有的模板都是需要付费的，如果你只想使用免费版的，这里的模板就没有作用了（当然你可以大体的参考一下他们的设计风格）。看起来用Elementor创建自定义的页头的路子已经走不通了，那咋办？不急，看我们接下来的操作。
点击右上角的关闭按钮去关闭掉这个Elementor提供的页头模板库，这时候页面上出现了这个内容，如下图所示：
上图中区域1就是我们需要编辑的页头内容区域，区域2是可以让我们使用的编辑页头内容的元素，箭头所指的椭圆部分“Content Area”可以视作为一个分隔线，上面部分是页头，下面部分是页面的主体内容。那么我们今天就是要重点对区域1进行编辑操作。
第2步：对页头的logo和站点标题内容进行编辑
首先，我们要考虑一个问题，在页头的编辑版块上我们要放置哪些内容？
常见的内容有：网站logo，网站标题，网站的主菜单，网站的搜索框等等，索性这些东西都不用我们自己去写代码，Elementor编辑器已经为我们封装好了相关功能，我们只需要拖动上图区块2中相关元素到区块1中进行处理即可。假设我们要做这样一个页头，那么根据事先的规划，我们需要先将页头的整个版块分成3个部分的布局，那么接下来我们继续进行操作。
按照上图的两个操作步骤，我们就将页头版块平均划分成了三个部分，脑子转的快的同学可能会说平均分配，那如果其中某个板块，特别是首页主菜单的内容需要占据的宽度比较多，那咋办？别急！Elementor编辑器提供了两个方案给大家去处理一个大内容板块下几个小内容板块的宽度占比的问题。
版块宽度调整方法一：
先点击上图中的1然后在箭头所指的2，也就是栏宽度数值框中填入你想要的宽度百分百（直接填数字，不用加%符号）。注意这个数值不是一经写入就固定不变的，后期你可以对不满意的宽度进行数值调整。
版块宽度调整方法二：
这个方法就很简单了，用鼠标靠近两个子版块的分隔线，然后用鼠标进行拖动即可，我们可以从上图中看到，随着我们鼠标的拖动，两个版块占页头版块之间的宽度比例会实时的变动，这样的设置能够让我们更加直观的将我们需要的子版块宽度值设定到我们需要的宽度。从这种小细节上就能够看出Elementor的开发团队确实是在用心做事！
言归正传，我们继续来操作页头的内容设计操作。
首先，我们先将网站logo和网站的标题放到第一个子内容版块中，注意，网站logo和网站的标题需要事先上传。
网站的logo需要在“外观”—“自定义”中的进行上传，网站的标题需要在“设置”—“常规”中进行修改（因为这两部分不是今天的核心内容，所以这里不展开实操讲解，在后续的Elementor系列教程中会详细进行讲解！）
我们将Elementor元素编辑台中的Site Logo元素和Site Title分别按住鼠标左键拖动到第一个子内容板块中，这时候在页头的编辑版块中就出现了我们的网站logo和站点标题，这里我随便找了一个图片作为网站logo，并为这个logo配置了一句话作为网站标题。注意：当我们需要将站点标题添加到logo的下方的时候，我们需要拖动site title这个元素然后移动到logo的下方，等出现一个蓝色的占位条的时候，鼠标才能松开（如下图中的左图所示），否则就会出现问题，拖动完成之后，会出现这样的一个局面，如下图中的右图所示：
这样的排版非常难看，我们就需要对logo和站点标题进行样式方面的设置和修改。
修改项目一：调整logo的大小
在“图像”选项中，我们调整第一个“宽度”值就够了，当我们拖动滑动条的时候，对应的logo就会实时的变换大小，知道出现一个令我们满意的尺寸即可。注意，当我们更改“宽度”值大小或者拖动宽度的滑动条的时候，logo图片的高度也是同比例放大缩小的，如果你需要有特殊需求，不想高度随着宽度同比例变大变小，那么在下面的高度选项中进行单独设置即可！
如果你想logo的图片再增加点特殊的“活力”，你可以在上图右侧的“悬停”项目中进行相关设定，这里的“悬停”指的是当鼠标在前端页面上移动到该logo位置的时候，会出现的一些效果。为了进行效果说明，简单的将不透明度设置为0.1，悬停动画效果设置为“Shrink”。这样当我鼠标移动上去的时候，会出现一个简单的“特效”。
如果你想要为这个logo设置一个外边框，那么在“边框类型中”选择，实现或者虚线，如果选择实线边框，你还可以在“宽度”和“颜色”中分别设置外框线的粗细与颜色。（备注：上图右侧因为没有选择边框线，所以这里没有这两个属性选项。）
“边框半径”指的是如果刚才我们选择了实线或者虚线做为外边框线，那么默认状态下，外边框现的4个角都是直角，有时候太过于锋锐，看起来不舒服，你可以设置边框半径为5或者10（这个数值随意调整），这样就会将外边框线的4个角设置为圆角，看起来更加舒适一些！
修改项目二：站点标题也就是“site title”进行相关的设置
上图就是我们点击页头中的site title元素之后出现在Elementor编辑器中的操作界面。我们从左到右分为3个区块进行实操讲解。
首先是“标题”，点击“Site Title”之后，会弹出三个选项文本框，分别是“之前”、“之后”和“回滚”。因为站点标题是默认调用事先我们在“设置”—“常规”中添加的站点标题，如果我们希望在页头中为站点标题额外再添加一些文字内容，就可以选择这里的之前或者之后文本框，输入你需要添加的文字内容。至于这个“回滚”不用管。
“链接”指的是单鼠标点击这个站点标题之后跳转的页面，默认情况下就是“site URL”，也就是我们的默认网站首页。点击右边的“设置”图标，这时候会弹出一个“链接选项”的窗口。里面有两个选项可以进行操作，分别是“在新窗口中打开”和“添加链接属性”。前者很好理解，不过一般我们都不会勾选，这个没必要在新窗口中打开首页了。第二个难理解一点，所谓的属性，一般都要成对出现，类似于代码中的键值对，也就是key=value的样式。比方说rel=dofollow这样子。这里不建议同学们去进行额外的操作了，以免弄巧成拙！
“尺寸”是指网站标题的文字大小，一般我们不再这里进行相关配置，因为它的调整后结果不能达到我们的期望值。
“HTML标签”，如果说这是你的首页页头的话，你可以将它设置为H1，但是考虑到我们不会为每一个页面都做专门的页头，所以这里一般建议用的是H2。
“对齐”：一般情况下，我们选择居中对齐即可。
“文本颜色”：默认情况下，字体都黑色（除非你在主题的基础设置中将文字颜色的全局设置为其他颜色），如果你设置了一个页头粉红色的背景，那么搭配黑色站点标题文字可能会不是很协同，这时候你可以点击文本颜色，在色彩选择区域选择你需要的文本颜色，或者填写你需要的十六进制颜色数值代码。
“排版”这个功能非常重要，几乎所有的Elementor中的元素，涉及到字体修改的，都需要在“样式”中的“排版”功能中进行修改。这个功能我将在下面详细讲解。
“文本阴影”指的是为站点标题或者其他文字添加阴影的效果，一般用处不是很大。
“混合模式”指的文本主体和文本阴影之间的融合效果，一般情况下，我们选择系统默认样式即可，没必要弄的那么花里胡哨。
文本的“排版”功能细节：
首先是“字体类型”：点击默认之后会跳出来很多字体供你选择，一般我们选择常规的就好，比如Arial这种，当然你也可以需要选择自己喜欢的字体。
“尺寸”是设置字体的大小，有四种调整大小的单位值可以供我们选择，分别是PX、EM、REM、VW，我们一般选用前两个，常用的是px也就是像素。因为可以精确到1像素，这就是为什么我前面说不喜欢在区块1中的“尺寸”功能去调整文字大小的根本原因。
“重量”指的就是文字的粗细，数值从100-900，如果你想设置最粗，那么用Bold来设置文字粗细即可。
“转换”指的是文字的大小写，有4种选择，分别是全部字母为大写，全部字母为小写，单词首字母大写，常规（也就是你输入的字母大小写形态）。
“样式”：指的是字体算法处于斜体状态，这个也没什么好说的。
“装饰”：指的是文字的下划线这些附属，有上划线，中划线（也叫做删除线），下划线等几个选项。特别是当我们设置特价活动的时候，删除线是我们很好的选择。
“行高”：指的是站点标题文字中的上一行与下一行之间的间距，你可以用px也可以用em来做单位进行设置。即使你不懂这两个单位代表什么意思也没关系，Elementor编辑器都能够实时的展现你调整的行间距大小，直到你调整到自己满意为止！
“字母间距”：指的就是站点标题中每一个字母之间的距离，和上面的行高是相同的设置，这里就不再赘述了。
第3步：对页头的导航菜单内容进行编辑
首先，拖动“Nav Menu”元素到我们一开始设置的三个子版块中的中间版块。
事先声明一下，这个“Nav Menu”元素是需要我们在网站上线创建相关的页面，然后将这些页面通过菜单先自定义一个菜单才能进行展示的，否则你拖动该元素到页头上进行操作的话是没有内容显示的。
“布局”：有三种布局样式，分别是横向布局、纵向布局和折叠菜单。一般我们选择最常见的横向布局，也就是它这里说的“卧式布局”。
“对齐”：指的是页头导航的对齐方式，有四种对齐方式，分别是左对齐、居中对齐、右对齐和两端对齐，我们一般选择”居中对齐”。
“指针”：指的是当鼠标移动到菜单选项上的时候出现的效果，一共有4种显示效果，如下图所示：
根据自己需要的进行选择即可，我个人比较喜欢用“背景样式”，当然很多人也不会刻意在这里进行样式调整，所以选择默认即没有特殊样式即可！
“动画”：这个功能和上面的“指针”功能差不多，功能是当鼠标移动到菜单文字上的时候，文字本身发生的动态效果，也是有6种样式可供选择，为了节省文字篇幅，这里就不展开讲解了。
“子菜单指示器”：指的是主菜单下的二级菜单表现形式，因为我没有设置子菜单，所以这里没法进行展示，同学们自己去操作一下即可。
“移动下拉菜单”：指的是页面显示器的宽度断点，有手机和平板两个选项。不过这里我们不用刻意去进行设置，因为在Astra主题中，我们默认使用的是折叠菜单。如果你这里选择了平板电脑断点为小于1025像素，那么你就要对“对齐位置”、“切换按钮”和“切换对齐”这三个选项进行相关的配置了。
内容部分设置完成之后，我们再到菜单的样式中去进行相关的配置，相关操作如下：
“排版”：排版的文字部分在上面已经讲过了，这里不再赘述。我们讲一下“Normal”、“Hover”和“Active”这三个选项。
“Normal”指的是菜单的文字正常显示的颜色、“Hover”指的是当我们鼠标移动到菜单文字上尚未点击的时候，菜单文字显示的颜色、“Active”指的是当我们点击这个菜单之后，该菜单文字所显示的颜色。
“主菜单的距离调整”，如下图所示：
上图中的1/2/3分别对应的是“Horizontal Padding”、“Vertical Padding”和“Space Between”之间的间隙距离调整。
“dropdown”：指的是下拉菜单的样式调整，因为相关操作和主菜单的样式调整是大同小异的，所以这里不再赘述！
第4步：对页头的搜索框功能进行编辑
拖动搜索框按钮到版块中的第三个子版块上面。
“skin”：指的是搜索框的外在表现形式，有三种选择，分别是“classic”、“minimal”和“Full Screen”三种，一般常见的是第一和第二种，第三种比较少见，但是效果比较炫酷，如下图所示：
我个人比较偏好第三种，但是前两者还是最常见，同学们可以自己设计的需要进行取舍。
“Placeholder”：指的是搜索框的占位符，就是上图中样式3效果中的“Search”文字，你可以将预设文字设置成“what are you looking for?”或者其他的你自己喜欢的预设文字。
“Toggle”：指的是这个搜索图标在搜索框中的相关设置，有两个属性。
“Alignment”指的是这个搜索图标在搜索框中靠左、居中、靠右的位置选择。
“size”指的就是这个搜索图标的尺寸大小。
做完了搜索框的内容相关设置，我们接下来对搜索框的样式进行配置：
“Overlay Color”：指的是搜索时候的背景覆盖颜色，如果同学们选择了样式3效果，那么上图中“search”背后的颜色就可以自定义进行选择。我用了黑色作为搜索框的覆盖背景，然后调整了背景的不透明度。这样既能看到一定的页面内容，也能够减少页面内容对搜索行为的影响。
“normal”和“hover”之两个选项修改的是搜索时候占位符（预设文字），以及搜索框的边框颜色。可以根据自己需要进行配置，一般情况下建议对这两者都进行颜色配置，以区分鼠标有没有点击到该搜索框上。
“Border Size”：指的是搜索框的边框线粗细。
“Border Radius”：指的是外边框线的四个角圆弧度，数值越大，边角越圆润。
“Toggle”：指的是对这个搜索图标的相关调整，大小、颜色、背景色、边框、边框半径等。同样也有normal和hover两个效果的配置，这里就不展开讲解了。
做完了以上三个版块的内容配置之后，我们来看一下具体的效果，看看哪些地方需要我们进行细节上的调整，如下图所示：
我们看到，logo和主菜单还有搜索功能并没有处在同一个水平线上，而且背景色彩就是一个纯白色显得很单调，接下来，我们对这两个问题进行细节的调整。
首先来调整三个版块的位置：
如上图所示操作，我们就能将页头三个子版块的内容垂直居中对齐了。接下来我们对页头的背景颜色进行修改。
还是按照上图中点击箭头所指的1位置，然后在右边的样式中进行设置，如下图所示：
我们可以看到，页头背景可以有4种不同的效果进行呈现，分别是单一色彩背景或者图片背景、渐变色背景、视频背景和幻灯片背景。接下来我会操作前三种效果给同学们进行了解。
第一种：纯色页头背景（这种是最简单也是最常见的页头背景效果）
第二种：图片做页头背景
这里涉及到的修改项目会比较多，我们特意没有写出来详细的操作过程，同学们自己去尝试操作，如果你会了这个操
最低0.47元/天 解锁文章
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
