WordPress首页设置

首页设置

接下来，我们进行商店首页的装修设置

3.4.1创建首页页面

我们鼠标移动到页面，然后点击新页面

我们输入首页的名称，然后点击发布

3.4.2使用elementor编辑

然后我们点击使用elementor编辑，通过插件去进行布局的设置

首次进来会出现这个界面，我们点击x掉

A. elementor编辑器介绍

a.基本逻辑

接下来我们首先给大家介绍一下该插件的操作逻辑，我们可以看到，在左侧菜单中，有许多小部件，我们点击拖动，即可添加到中间的布局中

我们可以看到这里有很多的部件，但是普通会员可以使用的部件是有限的，还有很多锁上的部件，是需要我们开通会员才能使用的

比如说我们添加一个标题，我们点击标题，移动到中间的展示区

可以看到在展示区已经显示了我们刚刚添加的标题，我们可以对它的内容进行更改，比如它的内容、样式等等

部件可以被封装在容器中，也可以独立存在

被封装的部件可以在容器中被统一更改，比如布局、样式等等

我们可以看到，下面还有一个锁上的动画标题小部件，这个需要充值会员才能使用

然后我们可以对文字的样式进行更改

高级设置中包含的功能较多，甚至还可以设置自定义的样式

b. elementor相关设置

我们点击最左上的图标，可以看到出现了以下选项

主题生成器

首先是主题生成器，它将网页的结构清晰的分成了每个小板块，方便我们进行针对性的设置，但这是会员功能，所以我们不做赘述

历史

然后是历史功能，我们对界面进行操作之后，所有的操作都会记录在这里，我们点击就可以返回到当时的操作进行

用户首选项

这个地方是一些关于elementor的相关设置

键盘快捷键

这个界面展示了关于elementor的相关快捷键的使用方式

c.站点设置

我们可以看到，在最上面，有一个叫做站点设置的图标，我们点击之后，左侧菜单会出现各种各样的设置，这些设置属于全局应用的，控制了我们的整个站点，我们可以在这里对它进行修改

d.结构

我们可以看到，在最上面，有一个叫做结构的图标，我们点击之后，界面的右侧就会出现一个窗口，这里显示了我们添加的所有组件，如果我们添加了多个组件，想要快速访问某一个组件，就需要用到这个窗口

我们在窗口中点击想要编辑的组件，就会直接访问该组件

e.响应模式

这三个图标是响应模式的页面设置展示，我们点击即可展示我们的网页在相关设备上的装修效果

比如这是在平板上的效果

这是在手机上的效果

响应模式的展示非常重要，能够让我们清晰的看到我们的界面在不同设备上的展示效果

f.发布相关设置

在左上角的发布按钮处，我们可以对页面进行相关的设置，比如保存草稿、另存为模板、预览界面等等

比如我们点击了预览之后，就可以看到我们现在的装修效果，我们在对页面进行更改之后，必须要点击发布，才能使得我们的商店页面中同步更新

B. 编辑器装修流程

好的，在了解了编辑器的基本使用逻辑之后，我们开始进行装修设置

a.页面设置

我们点击顶栏中的设置按钮，进入页面设置部分

打开隐藏标题的开关，然后将页面布局选择为全宽

然后点击加号按钮回到添加部件的界面

b.顶部部件设置

顶部容器设置

我们首先添加一个容器，点击容器拖动到界面上

点击样式，设置一下容器的颜色

在这里我们可以看到，容器的背景可以设置多种模式，在这里我们选择渐变色

然后我们在这里设置一下我们想要的渐变颜色和渐变类型

我们可以在这里输入颜色代码，也可以在选择器里拖动小圆点，选择自己想要的颜色

然后我们在容器里添加一个标题文字

我们将文字的内容改成 HOT PRODUCTS（热销产品）

然后再点击样式，更改一下文字的颜色和排版

我们点击这个小画笔，将字号改成18

然后再点击下面的颜色按钮，将颜色更改成白色

我们再添加一个标题文本，我们点击部件拖动到页面上，当屏幕上原有的文字下方出现一个淡紫色的方框之后

我们再放开鼠标，这样，就可以把文字标题添加到上一个文字标题的下面

我们将文字的内容改成 UV PROTECTION（防紫外线）

然后再点击样式进行更改，我们这里更改了字体的大小和粗细

再更改一下文字的颜色

在编辑的时候，我们还可以选中这个标题，右击它，会发现出现了一个弹窗

我们点击复制到此对象下

可以看到，屏幕上出现了同样的文本标题部件

我们更改一下文字内容，更改成 SUNGLASSES（太阳眼镜）

我们点击样式，将文字变得更大

我们这里更改了字体大小，将字体像素的单位选择成了vw

顶部按钮容器

我们再在顶部添加一个容器，用来放置按钮

我们点击按钮部件，移动到页面上

可以看到，我们能够在左侧菜单中对按钮的文字、颜色和链接等内容进行修改

我们更改一下按钮的文字，更改为 handpicked

然后点击一下链接的设置按钮，我们可以在输入框中输入想要这个按钮点击之后跳转的链接

记得必须将在新窗口中打开勾选上，这样，我们点击按钮之后，才会重新创建一个窗口，并且打开这个链接

然后我们更改一下按钮的样式

我们这里更改了文本颜色和背景颜色，还添加了一个边框，做了一个白底黑字的按钮效果

我们可以看到样式中标准的旁边还有一个悬停的样式，这是我们鼠标移动到按钮上时，按钮的样式

我们可以点击设置一个黑底白字的效果，设置好之后就是这个样子

我们点击复制到此对象下，再添加一个按钮

我们可以看到屏幕上出现了两个按钮，但是是竖着的，我们想要它横排

我们点击左上的结构按钮，可以看到在右侧已经出现了结构的窗口，我们点击容器

我们在方向中选择行-水平，可以看到，容器内的按钮已经并排在一起了

顶部图片设置

我们再添加一张图片在顶部部分

我们点击这里可以进入选择图像

插入后，我们可以看到图像是这样展示的，我们的图片太大了，我们先更改一下它的大小，然后还需要调整一下它的位置

我们在样式中调整一下图片的宽度

然后点击高级设置，对图片的外距进行更改

我们将外距调整成这样，发现图片变大了，再回到样式中更改一下

更改成新的适配大小

然后再回到高级设置里调整位置

好的，设置成这样之后，我们发现页面的边距太小，我们点击包含了标题和图像的容器，进去更改

修改成功之后可以看到页面的边距已经非常简洁好看了，我们再调整一下眼镜贴图的大小和位置

调整大小

调整位置

这部分较为空旷，我们再添加一个分割线的组件

然后设置一下它的颜色和粗细

c.免运费、退款保障等区域的设置

在这个部分，我们需要添加以下四个区域的设置，分别为

• 免运费
• 退款保障
• 在线客服
• 付款方式

免运费图标设置

我们点击拖动添加一个新的容器到页面上

我们在左上角的搜索框中搜索一下图标，我们需要添加的是图标框

我们将它拖动到容器内添加

可以看到，在左侧的菜单里，我们能够对图标框内的图标、标题、描述等进行修改，甚至还可以给图标添加一个链接

使得用户在点击图标之后，能够跳转到对应的界面了解政策的全部内容

我们点击图标库，搜索一个和免运费相关的图标

我们搜索ship，然后选择这个车子样式的图标，点击插入

然后再在样式里更改一下图标的颜色

我们还可以给图标添加一些样式，我们在视图这里选择框架

然后在新出现的下拉栏中选择圆形

然后调整一下外框和这部分的格式

这时，我们可以看到外侧的圆框是灰色的，我们点击样式里的图标选项，重新设置一下颜色

我们再回到内容里，更改标题和描述

我们输入好之后，点击样式对文字的格式进行更改

我们进入样式点击内容，可以在这里更改文字的样式

我们在排版里调整一下文字的大小间距等即可

然后我们再添加三个类似的组件，我们点击页面中的免运费图标，右击之后再次点击复制到此对象下

我们重复操作三次

然后点击容器，调整内容宽度，在方向中选择横向，再更改一下主轴对齐方式

退款保障图标设置

然后我们再依次按照前面的操作逻辑更改一下新增的三个部分的图标和文字

首先是退款保障设置，我们先更改下文字

然后在图标库里搜索 money ，选择之后点击插入

在线客服图标设置

首先更改下文字

然后在图标库里搜索 team ，选择之后点击插入

付款方式图标设置

首先更改下文字

然后在图标库里搜索 card ，选择之后点击插入

区域最后调整

这样我们就全部更改好了，我们做好这个部分之后，可以再看看是否有不满意的地方，再更改一下

比如我们觉得它太紧凑了

我们在布局的容器里，更改了一下间距，使得页面看起来更加清爽简洁

然后再在高级设置里更改一下内距

C.商品系列展示区域设置

首先我们先给大家看一下这个板块的最终设计效果，然后再教大家一步步如何设计出这样的效果

我们可以看到，该部分是由三个区域组成的，中间两个容器作为一个容器，然后两侧各自两个容器

容器结构设置

我们在这里，需要将三个容器嵌入进一个主容器

我们先添加一个主容器

然后再拖动一个容器放置在这个容器之内

完成操作之后，我们在右侧的结构中，选中这个被嵌入的副容器

右击之后，选择复制到此对象下

我们重复操作，直到主容器内存在三个副容器

我们点击主容器，将方向改为行

再将内容宽度改为全宽度

然后点击第一个副容器，更改一下它的宽度

将内容宽度改为全宽度，宽度设置成25%

然后我们选中第二个容器

将内容宽度改为全宽度，宽度设置成42%

我们选中第三个容器

将内容宽度改为全宽度，宽度设置成25%

第一个副容器设置

我们先更改第一个副容器的颜色，点击样式-背景-颜色

将颜色更改成我们喜欢的颜色

然后在容器内添加一个文字组件

我们输入我们想要展示的文字

再打开内容，在里面修改一下文字的大小和粗细

再更改一下颜色

然后再加入一个文本组件进来

然后输入成我们想要的展示的文字

接下来，更改一下这段文字的格式和颜色

我们先更改字体的大小和粗细，这部分的文字可以比上面的文字大一些，然后更细一些

我们再把字体颜色也更改成白色

我们再在这个容器里添加一个软件，我们可以回到最上面，复制这个按钮

因为我们想要的按钮规格是一样的，所以直接复制这个组件是最方便的，在设计网页的过程中，我们应该及时减少重复性的操作

复制成功之后，我们直接粘贴到刚刚的文字下面

可以看到，我们已经成功的把这个组件粘贴到第一个副容器内了

然后我们再更改一下按钮的文字内容

更改好之后，我们开始对第一个副容器做调整

我们点击第一个副容器，在左侧菜单中做调整

先设置一下间距,我们点击高级设置，看到内距

我们根据自己想要的版式对内聚进行调整

然后点击样式-边框-边框圆角，在这里输入数值，将副容器框变得更圆滑美观

这里我们将圆角设置成了50px

然后我们再在第一个副容器中加入一个图片丰富一下容器

然后我们选择一个图片放置在这里

放置好之后是这样，我们再来调整一下图片的位置

然后点击高级设置，定位选择绝对，水平方向向右，垂直方向向下

然后我们先做到这里，剩下的在后面优化

第二个副容器

我们在第二个副容器内添加一个容器

然后更改一下它的颜色

再将它的边框圆角也设置成50

然后再在容器中设置一下两段文字

然后再将上面的按钮也复制一个到这个容器内，并且更改一下它的文字内容

然后再添加一个图片进来

上传我们准备好的图片

然后点击高级设置，将它的定位改成绝对，水平方向改成向右，垂直方向改成向下

我们可以看到图片太大了，我们再样式里更改一下图片的大小，图像-宽度

调整好了之后，我们再回到高级设置里，调整偏移数值

然后我们再调整一下该容器的内距

这个副容器内，我们要添加两个子容器，所以我们直接将该容器复制，粘贴到此副容器下

我们在结构中右击该容器，然后点击复制到此容器下

可以看到已经复制好了，然后我们设置一下这两个容器的间距

我们点击第二个副容器，然后调整一下间距的数值

这样操作下来，我们就已经基本确认这个部分的结构了

我们可以回到第一个容器的图片设置，更改一下它的偏移数值

我们再回到第二个子容器，更改一下它的背景颜色

现在由于我们的背景颜色太浅，按钮看不清，我们可以将按钮改成黑底白字，悬停时改成白底黑字

更改好之后就是这样

然后我们再更改一下文字和图片内容，更改好之后就是这样

第三个副容器

我们的第三个副容器设计逻辑是需要保持和第一个一样的，我们先调整一下这个容器的间距，然后再复制它

将它粘贴到第三个副容器中

粘贴之后我们看到出现了这样的问题，我们撤销一下操作，删除第三个容器

然后再粘贴就行

然后我们更改一下这个容器的内容，更改好之后就是这样

接下来，我们对这整个区域设置一下内距

然后再将容器设置一下居中

然后再调整一下该区域的内距

D.产品展示区域设置

接下来我们需要做一个产品展示区域的设置

在这个部分，我们需要做出一个展示两行四列的产品展示列表

我们首先添加一个容器到页面上

然后再加入一个分割线部件到容器内

然后我们点击这个文字图标，再在弹出的新的文本窗口中输入我们想要展示的标题名称

然后将分割线的宽度设置为35%

我们再点击样式-文本

在这里更改一下文本的颜色和字体的粗细大小

在样式-分割线里更改一下分割线的粗细和间距

再更改下文本的对齐方式

这时候我们发现，文本内容不是最靠左侧的，我们点击容器，更改一下布局

我们将内容宽度改成全布局即可

然后我们再添加一个文本在标题之下，介绍一下这个分类

我们在搜索栏搜索文本，然后选择文本编辑器拖动到页面上

我们更改一下文本内容

然后再更改一下文本的大小和粗细等等

我们可以发现，两个文本间隔太远，那么我们点击封装了这两个文本的容器，更改一下间距

然后我们再在下面添加简码部件，实现调用产品展示的界面

我们在搜索框搜索简码，然后选择这个部件拖动到页面上，置于文本之下

然后我们在代码框中粘贴一段代码

[products limit=”8″ columns=”4″ category=”太阳镜”]

这段代码的意思是，创建一个产品展示菜单，总共展示8个产品，每行4个，最后的文本是产品分类的名称

我们在使用的时候，更改下产品分类的名称，然后直接将代码粘贴进去就行

我们浏览界面可以看到，两个区域距离太近，我们来调整一下内距

我们点击容器，更改一下内距即可

我们可以发现，页面的文本距离产品展示列表也较近，我们再来调整一下

我们点击文本编辑器，然后更改一下它的内距即可

E.广告区域设置

接下来我们进行广告区域的设置

我们先添加一个容器到界面上

然后再在这个容器内添加两个子容器

我们再点击主容器，将水平方向改成行

然后我们再更改一下主容器的背景颜色

我们再添加一个文本标题，作为展示的广告词

我们更改一下文字内容

再更改一下文字的格式

再放置一个购买按钮到这里，我们直接从上面的容器中复制粘贴过来即可

我们再点击一个这个子容器，将它的对齐方式改成主轴对齐

我们开始设置第一个子容器

我们拖动一个文本标题进来

然后更改一下文字内容

更改一下文字的字号

我们再添加一个文本标题在这下面

我们更改一下文本内容

这里引用了一个换行的代码，如果我们在文本标题中需要换行的话

需要输入：<br>

然后再更改一下文本的大小格式

更改一下文本的颜色

再添加一个图片在标题下面

更改一下图片内容

接下来更改下图片的位置，我们这里更改了图片的外距

以及图片的水平方向、绝对定位数值

但是我们可以看到，图片遮挡住了页面底部的文字，我们接下来需要更改一下该容器的内距

我们更改了一下内外距的数值

可以看到现在的底部广告界面已经优化完毕，没有再遮挡底部文字了

F.产品展示区域2设置

我们再添加一个产品展示区域，丰富一下网站内容

我们可以直接将上面做好的产品展示区域复制下来，然后更改一下文字和需要展示的产品分类即可、

我们选中这部分的主容器后，点击复制

然后粘贴到最下面的页面上

可以看到，产品展示区域已经被粘贴到下方了，我们更改一下内容

[products limit=”4″ columns=”4″ category=”children’s sunglasses”]

我们这里还做了一个代码的更改，将需要展示的产品列表更改成了四个

大家在涉及的过程中，也可以根据自己的需求去进行更改

G.客户评价区域

接下来我们来加入最后一个部分：客户评价区域

我们拖入一个容器到页面上

更改一下容器的背景颜色

然后更改一下容器的内距

再加入一个子容器

更改一下子容器的背景颜色

我们在结构中选中这个子容器，点击复制到此对象下，重复两次，使得该区域内有三个子容器

然后再点击主容器，将方向改成行

第一个子容器设置

我们在第一个子容器中加入一个图像

然后更改一下图像

可以看到图像是有些大的，我们调整一下图像的宽度

我们再添加一个组件，在搜索框中搜索推荐信，将其拖动到图像下方

拖动进来之后我们可以看到，该组件是有一个设计师部分的图像展示的

而通常这个部分的图像都是人像，这里我们给大家推荐一个虚拟人像照片生成网站

https://this-person-does-not-exist.com/zh#google_vignette

在这个网站我们只需要更改一些约束条件，然后点击刷新图像，就可以生成人像图片

然后我们就对这部分的文字和图像进行更改即可

简单的修改了下文字和图片之后，我们还可以再在下方加入一个评分组件

我们在搜索框搜索评分，然后将其拖动到我们的推荐信组件下

我们可以在这里修改评级标准，然后我们选择组件的对齐方式为居中

在样式里，我们还可以更改图标的大小、间距、颜色等等

然后我们再来对该容器做一下布局的调整

我们首先将间距设置为0

然后调整了一下组件的内距

调整好布局之后，在样式-边框-边框圆角里

我们调整了一下数值，将组件设置成了圆角

第二、三个子容器设置

对于第二、三个子容器的设置，从头开始操作是比较麻烦的，我们可以先删除这两个子容器，然后直接复制我们做好的第一个子容器，再去对其进行更改即可

更改好之后就像这样

这里大家可能会疑惑，为什么图片和文字没有水平对齐

这是因为我们在处理图片的时候，没有统一图片的规格大小，所以导致图片，没有水平对齐

大家只需要在处理的时候，统一图片的规格即可

可以看到，一二张图片是不对齐的，但是二三张图片是对齐的

到此为止，我们就完成了所有区域的设置

H.不同响应界面的适配度修改

虽然我们已经完成了所有区域的设置，但是当我们点击浏览手机端的首页效果时，可以看到不同的部件都有明显的错位

我们点击这个手机端之后，再继续进行部件的位置更改，是不会影响电脑端的显示的，所以接下来，我们需要针对手机端展示首页界面的适配度进行更改

顶部部件修改

我们先对顶部部件进行更改，我们选中子容器，更改一下它的内距

这时我们发现，这个图像是展示不全的，我们再更改一下图像的位置

我们先更改图像的大小

我们将排序更改成开端，然后更改一下内距和外距

这样设置之后，用户一进入我们的网页，就可以看到我们的产品图片和标题

免运费、退款保障等区域的修改

我们可以看到现在这个区域是已经以列方式呈现的，并且都是居中显示，非常美观

所以我们不再更改这个区域

商品系列展示区域修改

我们先更改一下主容器的内距

然后选择第一个子容器，更改一下它的最小高度

我们可以看到第二个副容器中的子容器是非常美观的，只是图片位置较差

所以我们更改一下该图片的偏移值

第二个子容器也是图像的问题，我们更改一下它的偏移值

更改好之后就是这样

最后一个副容器，我们也更改一下它的最小高度即可

产品展示区域修改

接下来我们修改产品展示区域设置，我们可以看到，页面错位非常严重

我们点击高级设置，修改一下内距

第一行文字过于拥挤，我么再点击分割线组件进行修改

我们这里将宽度修改成了100%

可以看到，即使修改成了100%，我们的分割线还是展示不完整，我们再点击高级设置

将定位修改成绝对，再更改一下偏移数值

可以看到分割线已经展示完整了，但是距离下方文字过近，我们点击文本编辑器更改一下

先将定位改为绝对，然后修改一下偏移数值

然后再点击简码，在高级设置-布局里修改一下外距，使得页面布局规整美观

广告区域修改

接下来我们设置一下广告区域

点击高级设置-布局，修改一下内距和外距

我们可以发现这部分的图片已经看不见了，我们点击修改一下

先在样式里修改一下图像的大小，发现还是看不见图片

再点击高级设置，我们修改水平方向为向左，就可以看到图像了

然后再根据前面的修改步骤，调整图片为一个美观的展示方式就可以了

我们这里二次修改了图像的大小和偏移数值

然后再调整下广告字体的大小

产品展示区域2修改

这一部分和我们上一个产品展示区域的排版设置一样的，我们可以直接复制它的格式粘贴到这里

我们点击上面 那个已经改好了的容器，然后点击复制

然后在下面找到我们需要粘贴的产品展示区域2，选择粘贴格式

可以看到容器部分的格式已经修改好了，我们再一一的把其他组件的格式粘贴过来就好了

更改标题

更改产品描述

简码部分

都粘贴好之后，如果有不协调的地方，我们再根据自身的喜好更改一下即可

客户评价区域修改

最后一个区域是居中显示的，只是展示的容器较大，我们只需要更改一下内距即可

点击主容器，高级设置-布局，然后修改一下内距即可

手机端修改完成之后，我们可以再如法炮制的设计一下平板端，大家按照之前的方法进行喜欢的版式修改就行