Element使用

Element使用

一、入门介绍

Element最基本的元素是段，Section（Grid），通常一个页面包含多个段；如果要做一个Banner大图，首先得添加一个段，这个段里面的额结构是两个栏，栏里面包含多个元素可以有文本编辑器标题等；段Section一般用来设置背景颜色或背景图，以及控制整个段的高度、内部栏的宽度，如果想单独修改某个栏的边框可以直接输入百分比的数字。或者手动调整。
添加元素：点击左边导航栏右上角的九宫格图标，该元素只能放在栏里面，不能放在外面空白区域。如果栏内添加标题元素，想改变元素内容颜色，可以点击添加标题的右上角的🖊编辑符号，还可改宽度。
Section(Grid)-Column(Container)-Element

常用的字体设置只有四个：1.颜色，2.尺寸，3.粗细，4.行间距
高级设置（Advanced）：点击栏最下方设备转换图标，进入手机界面模式，这个时候在右边修改元素时能看到手机符号，这时的修改仅针对于手机界面，不会改变电脑和平板界面的布局元素大小颜色等。解除同步修改的链接就可以单独修改某个方向的边距。
在motion里面可以修改该元素出现或消失的动画效果。在同一个网页这种动画越多，网页加载速度越慢。

二、分支主题

网站的主色调一般用作图标，按键，一部分标题等。在设计网站之前先找到你想要的主色调，网址：bidewang.co/wpthemes
在确定主色调之后，可以用在线小工具获取颜色的代码：imagecolorpicker.com
获取颜色编号之后，打开sit setting，改变全局颜色，主要，次要文本什么的

三、首页banner大图

网页打开的第一眼这个位置的呈现叫banner；
"banner"通常指网页顶部或侧边的广告横幅。这些横幅广告通常用于推广产品、服务或网站。背景覆盖颜色定好之后记得调透明度，这样后面的图片才会显示出来。

四、首页-产品精选分类

最显眼的位置可以吸引用户进入购物页面

五、修改表单样式添加自定义CSS代码

点击自定义，Additional CSS，//.ct-service-box:hover p,
.ct-service-box:hover h3,
.ct-service-box:hover .fas {
	color: #ffffff!important;
	transition: color .3s;
}

然后点击发布，改代码就可以生效了

六、另存为模板

保存模板，填写模板名称，点击保存
也可以保存单个模块，点击需要保存的模块右键点击，另存为（Save as Template）
注意：保存模块只能选中其中一个段，如果有多个段可以分开保存

七、显示最新文章

需要下载插件：Essential Addons，ctrl+f输入Post Grid，启用该元素。如此才能将文章在首页显示