美文网首页独立站
Elementor建站教学三——如何使用Elementor一比一

Elementor建站教学三——如何使用Elementor一比一

作者: KeenTalk | 来源:发表于2021-05-03 12:20 被阅读0次

    如果你不懂设计,也没有灵感设计出一个好看的网站的话,那么套用模版是最简单的。

    在套用模版之余,如果看到别人家设计好看的元素,能模仿过来的话,那就更香了。

    如何使用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一个网站出来。

    相关文章

      网友评论

        本文标题:Elementor建站教学三——如何使用Elementor一比一

        本文链接:https://www.haomeiwen.com/subject/dpsfdltx.html