Elementor编辑器深入解析：打造个性化的WoodMart主题网站（04）

上一期我们讲述了如何设置Woodmart主题的海报（banner），这期我们讲述Elementor编辑器来装修Woodmart主题，我们将深入探讨如何使用Elementor编辑器来进一步自定义和优化您的WoodMart主题。通过本篇教程，学习如何利用Elementor的多功能模块，打造一个既美观又实用的网站前端。

如上图进入编辑模式

每个模版会里面有不同的模块，如下图，这是其中一个模块的截图，但实际的应用不是说每个模块都合适

如下图，这是同样的模版，但是是另外一个效果

是不是觉得好看了许多，不是那么单调但又有自己的个性

接下来我们来讲述Elementor编辑器各个功能的效果和具体的方法。

我们先来讲解下上图的模版整个布局，我们进入到模版的编辑页面右边会看到整个布局，如下图

如上图布局都是Container（容器）组成的，容器里面才有各个模块

如上图，比如由标题和分类模块两个实现的，在右边的就会对应的显示，Elementor编辑器，比较适合新手，但如果你想调整的更美观更好看，也是需要一定经验的

我们拿两个比较有特殊的模块，来举例，如下图

从上图来看，这是一个海报或者图片加一个产品展示的模块对吧，布局是1:3，其实就是两个容器里面加入了模块

先看左边，如下图方框符号是容器（Container），笔符号是模块的编辑，这是一个Promo Banner（促销横幅）模块

步骤：网站前端→选择对应的模块→方框（容器）Container

进入容器，我们能看到容器的一些设置，如下图

有三大设置，如下图

Layout：布局

Style：风格

Advanced：高级设置（先进的）

Container Layout：容器的样式，分为弹性盒子和网格（红色框）

Content Width：容器的布局，分为居中和全宽，全宽就是全屏，根据翻译和实际效果就能明白了（黄色框）

Width：整个容器的宽度。（蓝色框）

Min Height：整个容器的高度（蓝色框）

可以看到蓝色框调整后面可以根据百分比调整或者像素调整，但还有其他的，一共四种格式，最常用还是我说的那两种，大家根据实际情况来调整，同时还能看到设备图案，说明是可以根据每个设备单独调整的，如果自适应不是很理想，可以去调整

Gaps：柱子，可以理解为容器之前的间隙（绿色框）

如上图，Style（风格）

这里容器调整的就是Background（背景)色了,其他的暂时不需要动

如上图，Advanced：高级设置（先进的）

Layout→Margin：调节外框的偏移

Layout→Padding：调节内框的偏移

一般是不需要调整的，如果需要样式不一样，或者填充则需要调整，也就是需要更好的效果，但不建议新手弄，可能会导致电脑端感觉好，但其他设备出现乱遭的感觉

Responsive：响应式，你可以使这个模块，在所以设备上显示，或者只显示在某个设备上，非常的灵活，甚至你可以设置两个一样的，但针对不同设备的，已到达非常好的效果，也会避免自适应或者调整到不效果的一种解决办法

以上就是容器（Container）基本的使用，容器基本的内容都差不多，会有细微的差别，但模块就不一样，区别都会很大

下面我们讲述下这个模块

General：一般的，这个模块显示就可以插入链接(link)

Background：背景

Source：背景来源

choose imae：选择图片，但前提你的来源是选择图片，可以去媒体库或者上传图片

Banner height：模块的高度

Image Position：显示图片的位置

如上图，Content（内容）

分别对应右边模块的位置，这个比较简单就不一样讲述了，大家也可以根据翻译理解

Style：风格，这里可以处理每一个部件的样式，就是使得他们更美观，比如标题描述按钮，以及模块更多的效果，大家根据翻译去理解

Advanced：高级设置（先进的），基本和容器一样，但新手不需要去调整

接下里我们讲述右边

步骤：网站前端→对应的容器（方框图标）或者模块（笔符号）

如上图显示，他是由一个容器里面加入了标题模块和按钮模块，容器的下方加入了一个产品模块

如上图，触碰标题会出现笔符号进入编辑，按钮模块也是一样的，如下图

如上图，意思根据翻译理解，非常好理解。通过本期的详细介绍，相信您对Elementor编辑器在自定义WoodMart主题中的应用有了更加深入的理解。我们展示了如何通过不同的模块和容器来增强网站的视觉效果和功能。请期待我们的下一篇文章，我们将继续探索更多基础模块和容器的使用技巧，帮助您进一步提升网站设计。感谢您的阅读，我们下期再见！