上一期介绍了Elementor编辑器的基本介绍与WoodMart主题的搭配,今天我们将深入探讨如何使用Elementor编辑器与WoodMart主题进行更高级的网站设计自定义。无论您是设计新手还是寻求更精细化布局的经验者,本篇文章都将为您提供实用的步骤和技巧。
步骤:网站前端→Edit with Elementor→滑动到页脚的前面(或者某个模块的添加也可以)
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如上图,一共有四个按键,分别是添加,模版文件,ai构建,主题模版选项
一般用的最多的是第一个,第二个模版文件,除非你保存了某个模块,然后想要添加到某个位置,但这属于高阶设置了,一般新手用不上,第三个ai构建不建议用,第四个主题模版,根据主题的不一样,当然内容也不一样,上述显示的是WoodMart主题的
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
我们点击添加会得到下面的选项
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
上述显示的容器(Container)的样式选择,根据实际情况去选择
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
他们有一个明显的区别是Grid(网格)是需要设置第一个才能设置第二个格子,Flexbox(弹性盒子)则不需要,但也会有一个区别,就是如果你添加弹性盒子开始只选择了整个,没有分开,选择两格或者三个,他不能选择,除非重新添加,但如果是网格就可以自己切换多个格式,大家根据实际情况去选择
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
添加容器后,在容器(Container)的上方都会有三个按钮,分别是添加,编辑,关闭
文章的前面说过,除了网页最下端的页脚能添加之外,任何容器的添加也是能添加容器的,
第二个是编辑,关于容器(Container)的一些设置选项
第三个就是关闭了,无需多说
我们重点讲述第二个编辑,如下图
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
其他的在上一篇的文章有介绍过就不说了,如上图,这个功能新手一般用不上,但如果想容器更美观或者调节多样性就必须会,其实翻译写的很明显了,所以很容易明白,红色框有一个项目,下面有一个方向,上图显示的往下,因为你添加容器选择的是就是向下的其他都是一些方位的显示,大家根据实际情况去调整
风格也在上一篇介绍了,这里也就不多多说了
今天讲述先进的其中一个没有讲到的功能
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如上图,为了大家更好的理解,我用中文的图片来说,应该会更好理解一些,基本中文都说明了选项,大家应该对“黏“比较困惑,因为翻译是不准确的,其实就这个容器你可以选择固定顶端或者底部,或者不固定的意思
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
Transform:容器(Container)的一些特殊的效果,大家根据翻译去选择,一般是不用动的
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
容器点添加,你就可以选择模块了,左边会有容器(Layout),以及基本功能(Basic),和Elementor PRO版(Pro)的功能
每个主题的基本功能都是不一样的,如果你网站有其他的插件的话,也会在基本功能展示
但基本的功能能满足你一个网站的基本的构建,可能会不够美观,和炫彩的效果,那样就需要Pro付费版的才能实现,需要添加什么模块,点击你需要的模块拖动到容器里面就行
模块介绍:
步骤:网站前端→Edit with Elementor→容器(Container)→Heading
Heading:标题,理解为大标题,如下图,你可以设置标题文案(Title),以及链接(link)以及标题大小(HTML Tag)以及标题的方向(Alignment),标题颜色(Text Color),字体排版(Typography)大小或者字体风格,大小等等
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
步骤:网站前端→Edit with Elementor→容器(Container)→Text Editor
Text Editor:文本编辑器(如果文字多的话建议用这个,比如一些产品介绍,公司的介绍等等)如下图,文本内容,文本分列(Columns),可以理解为文本在整个容器占据多少,柱间隙(如果你没有设置文本分列,则不需要调整)
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如上图,还有一个文本编辑器风格,可以调整配色方案(Color scheme),文本的方向(Alignment),文本标题颜色(Text Color),文字排版(Tyроgraphy),内容对齐(Content align),内容宽度(Content width)
步骤:网站前端→Edit with Elementor→容器(Container)→Text Editor
image:图片展示
Choose lmage:选择一张图片,你可以选择从网站媒体库或者本地上传
Image Resolution:图片的分辨率大小,可以选择非常多的分辨率
Caption:标题,可以展示也可以不展示
Link:链接,可以展示自定义链接,或者媒体链接
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
如上图,Alignment(图片位置)Width(图片宽度),Max width(图片最大宽度),Height(图片高度)Normal(默认状态),Hover(悬停状态,鼠标点击状态)两种不同状态可以分别调整,其他根据翻译理解就行
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
步骤:容器(Container)→选择两列布局→图片选择网格的形式选择两列
如上图,如果你想实现上图的效果,你则需要用到图片(image)的Advanced(先进的)高级功能,请注意是图片(image)的,而不是容器(Container)的,需要在下图的Margin(外框)设置数值偏移,但请断开链接的符号,如果不断开则四个方向是一起变动的,如上图,一个偏左下,一个偏右上,在相对应的方向设置数值就行了
当然有一个简单的方法那就是做一张这种图片直接插入,会比我这种方法简单,大家根据需要选择
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
步骤:网站前端→Edit with Elementor→容器(Container)→Button
Button:按钮,可以跳转链接的按钮,是必不可少的一个功能,而且美观
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
Type(类型),一般是默认的,你也可以选择其他的
Text(按钮名称),根据实际情况写
Link(链接)按钮跳转链接
Icon(图标),你可以设置有图标或者没有图标的,看实际情况调整
Button lD(按钮ID),一般不用设置的
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
Position:按钮的方向
Typography:按钮排版
Text Color:文本颜色
Background Type:背景类型
Color:颜色
Normal:默认
Hover:悬停
两种不同状态分别调整
步骤:网站前端→Edit with Elementor→容器(Container)→Spacer
Spacer:垫片。你可以理解为上下两个模糊或者容器的间隙
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
步骤:网站前端→Edit with Elementor→容器(Container)→Divider
Divider:分割线
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
可以设置宽度和颜色,还有高度,他和垫片(Spacer)的区别就是功能会强大一点,垫片(Spacer)的功能只是间隙,如下图,分割线(Divider)效果会不一样
![打造个性化网站:Elementor编辑器与WoodMart主题的高级应用(05)](https://www.361sale.com/wp-content/themes/justnews/themer/assets/images/lazy.png)
更多的模块
Video:视频插入
Google Maps:地图插入
icon:图标
这些设置比较简单就不说了,大家根据翻译就能设置
这期就讲述到,我们讲述了Elementor编辑器的基本功能和一些经验分享,通过今天的教程,我们希望您能够掌握Elementor编辑器与WoodMart主题的高级应用,从而打造出既美观又功能全面的网站。下一期,我们将介绍Elementor的付费版功能,敬请期待更多专业技巧和深入指导!
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |