如果你不懂设计，也没有灵感设计出一个好看的网站的话，那么套用模版是最简单的。
在套用模版之余，如果看到别人家设计好看的元素，能模仿过来的话，那就更香了。
如何使用Elementor一比一的模仿别人的网站呢？接下来我就给你剖析一下如何做！
image.png
结构
首先我们来看这个Hero image的设计结构是怎么样的，它是左右两栏布局，然后有一个背景图片：
image.png
所以我们一开始做的时候，就应该添加两栏。
左边的布局下面有两个按钮，也就是说左边的布局中还有两个栏，那这种效果应该怎么做呢？
我们可以使用Elementor元素中的「Inner section内部区段」来完成，「内部区段」可以制作栏中栏的效果：
image.png
文字
再看左边的文字布局，这里有三段文字，一般情况下，我们使用醒目的标题用「标题」元素，标题下面的描述用「文本编辑器」元素。
你看到字体有大有小，有粗有细，有白有黄，这些设置都在元素中的「样式」里面编辑：
image.png
只要你能查看到别人网站的字体样式，把他们的字体型号、字体尺寸、字体粗细（重量，官方翻译的不准确）、行高等找到，你设置成一样的就行了，copy成功！
留白
再观察一下字体与字体之间，字体与图片之间，前景与背景之间，都是有很大的空白的，这里就是留白，留白能让人看的更舒服，如果没有留白，所有的元素都挤在一起的话，你的网页就像上个世纪的设计，更像一个陈年的老报纸排版，没人会感兴趣。
怎么弄留白？
幸好，我们的Elementor给了充足的留白设置，不管是栏、元素都可以设置留白：
image.png
在每个元素的「高级设置」中，我们都能看到两个留白的设置，「外距」和「内距」，上图中加了一个底部外距，文本下方就多了48px的留白。
那「外距」和「内距」有什么区别呢？请看下图：
image.png
外距=margin，内距=padding，外距是两个互不包含的元素之间的距离，内距是两个包含元素之间的距离，也就是说外距是你和邻居家的房屋距离，内距是你到家里墙的距离，区别就是一个在墙外，一个在墙里。
而这个墙在网页设计中有个专有名词叫border，就是边框，我们给元素加了边框之后，这个元素就有了一个整体的方框了：
image.png
边框可以有4个选项可以设置：
- 边框类型，选择之后边框可以是实现、虚线。
- 宽度
- 颜色
- 边框半径，设置之后，边框的4个角变成弧形。
根据上图我们可以清晰的看到，这个元素的底部外距是48px，距离在方框之外。
配色
颜色配的好，一个网站会更有质感，一个网站的颜色不要超过三种，不过黑白色另外算，因为黑白色是基本色，不影响网站的观感。
网站的字体和背景都可以设置颜色，颜色是由一个「#」和6个16进制数字组成。
我们常见的数学进制是十进制，也就是0-9，在颜色的世界0-9不够，所以加入了ABCDEF，总共16位个数字，叫16进制，16进制最小数是000000，表示黑色，最大数是FFFFFF，表示白色。
图片
网站图片分为两种，一种是前景图片，也就是正常的图片，另一种在文本下面的，叫背景色，前景图片很好理解，拖动一个图片元素进去就行了，我们重点来说说背景图片。
image.png
背景图片一般只设置在整个大段落中，点击Elementor的六个点能进入段的编辑，然后点击「样式」就能看到背景图像了，上传一张1920*1080的大图，就能完全填充背景来。
不过还有一个问题，上传图片之后，图片如果太鲜艳，会挡住前景的文字和图片的，这时候我们还有设置一下「背景覆盖」
image.png
「背景覆盖」就在「背景」的下方，可以给背景图片加一个半透明的背景色，演示的案例设置了渐变的背景色，所以有两个颜色设置。
小结
模仿建站做到一比一的精髓就是结构、文字、留白、配色和图片，把这五点都做到了，你也可以完全copy一个网站出来。
网友评论