Creación de un sitio web personalizado: Uso avanzado del editor Elementor y del tema WoodMart (05)

上一期介绍了Elementor编辑器的基本介绍与WoodMart主题的搭配，今天我们将深入探讨如何使用Elementor编辑器与WoodMart主题进行更高级的网站设计自定义。无论您是设计新手还是寻求更精细化布局的经验者，本篇文章都将为您提供实用的步骤和技巧。

步骤：网站前端→Edit with Elementor→滑动到页脚的前面（或者某个模块的添加也可以）

如上图，一共有四个按键，分别是添加，模版文件，ai构建，主题模版选项

一般用的最多的是第一个，第二个模版文件，除非你保存了某个模块，然后想要添加到某个位置，但这属于高阶设置了，一般新手用不上，第三个ai构建不建议用，第四个主题模版，根据主题的不一样，当然内容也不一样，上述显示的是WoodMart主题的

我们点击添加会得到下面的选项

上述显示的容器（Container）的样式选择，根据实际情况去选择

他们有一个明显的区别是Grid（网格）是需要设置第一个才能设置第二个格子，Flexbox（弹性盒子）则不需要，但也会有一个区别，就是如果你添加弹性盒子开始只选择了整个，没有分开，选择两格或者三个，他不能选择，除非重新添加，但如果是网格就可以自己切换多个格式，大家根据实际情况去选择

添加容器后，在容器（Container）的上方都会有三个按钮，分别是添加，编辑，关闭

文章的前面说过，除了网页最下端的页脚能添加之外，任何容器的添加也是能添加容器的，

第二个是编辑，关于容器（Container）的一些设置选项

第三个就是关闭了，无需多说

我们重点讲述第二个编辑，如下图

其他的在上一篇的文章有介绍过就不说了，如上图，这个功能新手一般用不上，但如果想容器更美观或者调节多样性就必须会，其实翻译写的很明显了，所以很容易明白，红色框有一个项目，下面有一个方向，上图显示的往下，因为你添加容器选择的是就是向下的其他都是一些方位的显示，大家根据实际情况去调整

风格也在Artículo anterior介绍了，这里也就不多多说了

今天讲述先进的其中一个没有讲到的功能

如上图，为了大家更好的理解，我用中文的图片来说，应该会更好理解一些，基本中文都说明了选项，大家应该对“黏“比较困惑，因为翻译是不准确的，其实就这个容器你可以选择固定顶端或者底部，或者不固定的意思

Transform：容器（Container）的一些特殊的效果，大家根据翻译去选择，一般是不用动的

容器点添加，你就可以选择模块了，左边会有容器（Layout），以及基本功能（Basic），和Elementor PRO版（Pro）的功能

每个主题的基本功能都是不一样的，如果你网站有其他的插件的话，也会在基本功能展示

但基本的功能能满足你一个网站的基本的构建，可能会不够美观，和炫彩的效果，那样就需要Pro付费版的才能实现，需要添加什么模块，点击你需要的模块拖动到容器里面就行

模块介绍：

步骤：网站前端→Edit with Elementor→容器（Container）→Heading

Heading：标题，理解为大标题，如下图，你可以设置标题文案（Title），以及链接（link）以及标题大小（HTML Tag）以及标题的方向（Alignment），标题颜色（Text Color），字体排版（Typography）大小或者字体风格，大小等等

步骤：网站前端→Edit with Elementor→容器（Container）→Text Editor

Text Editor：文本编辑器（如果文字多的话建议用这个，比如一些产品介绍，公司的介绍等等）如下图，文本内容，文本分列（Columns），可以理解为文本在整个容器占据多少，柱间隙（如果你没有设置文本分列，则不需要调整）

如上图，还有一个文本编辑器风格，可以调整配色方案（Color scheme），文本的方向（Alignment），文本标题颜色（Text Color），文字排版（Tyроgraphy），内容对齐（Content align），内容宽度（Content width）

步骤：网站前端→Edit with Elementor→容器（Container）→Text Editor

image：图片展示

Choose lmage：选择一张图片，你可以选择从网站媒体库或者本地上传

Image Resolution：图片的分辨率大小，可以选择非常多的分辨率

Caption：标题，可以展示也可以不展示

Link：链接，可以展示自定义链接，或者媒体链接

如上图，Alignment（图片位置）Width（图片宽度），Max width（图片最大宽度），Height（图片高度）Normal（默认状态），Hover（悬停状态，鼠标点击状态）两种不同状态可以分别调整，其他根据翻译理解就行

步骤：容器（Container）→选择两列布局→图片选择网格的形式选择两列

如上图，如果你想实现上图的效果，你则需要用到图片（image）的Advanced（先进的）高级功能，请注意是图片（image）的，而不是容器（Container）的，需要在下图的Margin（外框）设置数值偏移，但请断开链接的符号，如果不断开则四个方向是一起变动的，如上图，一个偏左下，一个偏右上，在相对应的方向设置数值就行了

当然有一个简单的方法那就是做一张这种图片直接插入，会比我这种方法简单，大家根据需要选择

步骤：网站前端→Edit with Elementor→容器（Container）→Button

Button：按钮，可以跳转链接的按钮，是必不可少的一个功能，而且美观

Type（类型），一般是默认的，你也可以选择其他的

Text（按钮名称），根据实际情况写

Link（链接）按钮跳转链接

Icon（图标），你可以设置有图标或者没有图标的，看实际情况调整

Button lD（按钮ID），一般不用设置的

Position：按钮的方向

Typography：按钮排版

Text Color：文本颜色
Background Type：背景类型
Color：颜色

Normal：默认
Hover：悬停

两种不同状态分别调整

步骤：网站前端→Edit with Elementor→容器（Container）→Spacer

Spacer：垫片。你可以理解为上下两个模糊或者容器的间隙

步骤：网站前端→Edit with Elementor→容器（Container）→Divider

Divider：分割线

可以设置宽度和颜色，还有高度，他和垫片（Spacer）的区别就是功能会强大一点，垫片（Spacer）的功能只是间隙，如下图，分割线（Divider）效果会不一样

更多的模块

Video：视频插入

Google Maps：地图插入

icon：图标

这些设置比较简单就不说了，大家根据翻译就能设置

这期就讲述到，我们讲述了Elementor编辑器的基本功能和一些经验分享，通过今天的教程，我们希望您能够掌握Elementor编辑器与WoodMart主题的高级应用，从而打造出既美观又功能全面的网站。下一期，我们将介绍Elementor的付费版功能，敬请期待更多专业技巧和深入指导！