使用Elementor仿站页面结构，结合少量的css代码，可以实现多种样式的页面框架布局。使用Wordpress的时候尽可能的减少安装第三方插件来实现不同的页面需求，减少网站额外的脚本负载；尽量都通过Elementor自身来仿站完成实现，是比较好的做法。
结构拆解
这里祥助以仿亚马逊的一个大图切换模块为演示，Heading标题区域半透明悬浮在背景图上，用Elementor Pro的Tabs元素尽量模块的放置，不用安装第三方插件模板来实现样式。
我们可以观察亚马逊的这个展示不同的大图的模块，是展示蓝牙音箱Speaker类别的产品，并且基于产品多不同功能特性和应用场景，彰显对应的设计图。从页面的结构上分析的话， 它的展示逻辑是：
- 模块的顶端，鼠标可点击切换，点击后对应的Background image背景图也会随之切换。
- 背景图的上方有半透明类的悬浮文本
- 左右滑动箭头，点击箭头，也会自动切换背景图的模块（这个需要写js来联动调用，篇幅问题祥助这篇文章暂时不演示，只做实现样式效果）
所以我们仿站页面的思路也可以拆分为下面的几个拆解结构：
- 顶端需要实现不同的顶端文本栏，鼠标点击即可切换不同的模块，展示不同的背景图，类似于Tabs切换的结构
- 不同的背景图上方有文本层，可添加text，heading或其他需要的内容
所以思路也比较清晰了，我们可以使用Elementor Pro的Tabs元素，来实现这个需求，首先我们需要启用Tabs元素的附带支持function。打开WordPress后台-左侧菜单-Elementor-Settings-Features-Nested Elements，将这个功能设置为Active，保存
仿站步骤
这里祥助以测试站为演示案例，我们插入一个Tabs选项卡元素，并完成如下设置：
- 编辑Tabs元素-Style，将Normal，Hover和Active的background-color都设置为：#00000000，避免鼠标悬浮产生其他不适应的颜色
- Tabs元素界面-Style-Tabs-Padding，设置top和bottom都为30，left和right都为0，让heading部分有上下的空间
- 插入几个Tabs内容，每个内容规范命名好对应的文案，方便后面自己辨识每个tabs放什么背景图和内层文本
- Tabs的自定义类名设置为：product_feature_tabs，这样可以避免干扰页面后面插入的其他不需要这个效果的tabs
接下来在Tabs元素的custom css栏输入如下样式代码，完成tabs的样式设置
.product_feature_tabs .e-n-tabs-heading{
background-color:#00000088;
z-index:2;
}
.product_feature_tabs .e-n-tabs-content{margin-top:-70px;}
@media (max-width: 768px) {
.product_feature_tabs .e-n-tabs-content{margin-top:-40px;}
}
核心思路：代码其中-70px，-40px，不同设备类型自己按实际情况调试，因为之前步骤设置了top和bottom的各30px，加上元素自带了10 px的padding环绕间距，所以写的是-70px把整个背景图，往上提上去就实现了整个背景覆盖的样式
- 接下来给每个Tabs子项目设置不同的背景图，并添加各自的container子容器，按正常手法去优化样式
- 设置背景色半透明，以及容器的width，padding等参数
- 添加text，heading等需要的元素到子容器
自适应优化
以上祥助操作的设备类型是Desktop标准的PC端，对其他设备类型平板横屏，平板竖屏，手机横屏，手机竖屏等设备类型需要手动进行参数优化。
思路也很简单，每个tabs item的min-height和子容器宽度，text和heading的字号等，这些都是标准的elementor操作手法，大家可按自己喜好优化合适的参数。
