WoodMart 首页幻灯片与内容区块搭建

一、创建首页与设置静态首页

在搭建任何内容之前，你得先有一个”页面”来承载这些内容，然后告诉 WordPress：”这个页面就是我的首页。”

🆕 1.1 新建首页页面

1. 登录 WordPress 后台
2. 进入 页面（Pages）→ 新建页面（Add New）
3. 输入页面标题，比如 Homepage 或 首页
4. 点击 使用 Elementor 编辑（Edit with Elementor） 按钮，进入 Elementor 可视化编辑界面

⚠️ 如果你没看到 Edit with Elementor 按钮，检查一下 Elementor 插件是否已安装并激活。WoodMart 8.x 默认推荐使用 Elementor 作为页面编辑器。

进入 Elementor 后，你会看到一个空白画布。接下来所有的幻灯片、Banner、产品区块都会拖到这里。

🏠 1.2 设置首页为静态首页（Static Front Page）

页面建好了，但 WordPress 默认首页显示的是最新文章列表，不是你刚创建的页面。需要手动切换：

1. 进入 设置（Settings）→ 阅读（Reading）
2. 找到 首页显示（Your homepage displays） 选项
3. 选择 一个静态页面（A static page）
4. 在 首页（Homepage） 下拉框中选择你刚创建的 Homepage 页面
5. 在 文章页（Posts page） 下拉框中选择你的博客页面（如果有的话，没有就留空）
6. 点击 保存更改（Save Changes）

👉 设置完成后，访问你的网站根域名，看到的就不再是博客文章列表，而是你即将搭建的首页了。

---

二、创建 WoodMart 幻灯片（Slider）

幻灯片是首页视觉冲击力最强的区域，通常放在页面最顶部、Header 下方。WoodMart 自带一套轻量级 Slider 系统，不需要额外安装 Revolution Slider 等第三方插件就能用。

🎬 2.1 新建 Slide 并归入 Slider

先理清两个概念：Slide 是单张幻灯片，Slider 是幻灯片组（一个轮播）。WoodMart 里 Slide 是一种独立的内容类型，创建后再把它归入某个 Slider：

1. 在 WordPress 后台左侧顶级菜单找到 Slides（幻灯片），点击 Add New（新增）
2. 输入 Slide 名称（仅用于后台识别，如 Home - Slide 1）
3. 在编辑区用你习惯的页面编辑器（Elementor / WPBakery）搭建这张幻灯片的内容——标题、副标题、按钮都是编辑器里的元素，自由排版
4. 在编辑界面的 Slider 选项卡中，把这张 Slide 归入一个幻灯片组：选择已有 Slider，或输入新名称（如 Home Main Slider）创建新组
5. 在 页面属性（Page Attributes） 的 Order（排序）字段中填写数字，控制这张 Slide 在组内的播放顺序

💡 命名建议带页面和位置信息，比如 Slider 组叫 Home - Hero Slider。一个站点可能有多个 Slider（首页顶部、分类页 Banner、促销活动页等），名称清晰能省掉后面翻找的时间。

🖼️ 2.2 单张 Slide 的背景与对齐设置

每张 Slide 除了页面编辑器里的内容，还有一组专属设置项：

• 特色图片（Featured Image）：作为这张幻灯片的主背景图
• Image（图片）：以 img 标签形式输出背景图。相比传统的 CSS 背景，浏览器可以优先加载它并启用 srcset 按设备选择合适尺寸，对 LCP（最大内容绘制时间）更友好——官方推荐方式
• Background image（背景图片）：以 CSS 背景形式输出，属于旧式选项，支持分别为平板和手机设置不同的背景图
• Background color（背景色）：图片加载前的兜底背景色
• 内容对齐：分别设置内容在幻灯片中的垂直和水平对齐方式（靠左、居中、靠右等）
• Full-width content：让内容区域占满整个幻灯片宽度（文字贴边）
• Content no space：去掉内容区块的内边距
• Animation（动画）：内容进入时的出现动画，如淡入、滑入等

⚠️ 背景图片的文件大小建议控制在 300KB 以内，可以用 TinyPNG 等工具压缩后再上传。首页第一屏的图片直接影响 LCP 指标，图片太大会拖慢首屏加载——这也是官方建议优先用 Image 选项输出背景图的原因。

🎛️ 2.3 Slider 全局设置

一个 Slider 组里的 Slide 都添加完成后，编辑这个 Slider（Slides 菜单下的幻灯片组列表），配置全局播放行为：

设置项	说明	建议
Autoplay（自动播放）	是否自动切换到下一张 Slide	开启
切换效果	Slide 切换时的过渡方式：slide（滑动）或 fade（淡入淡出）	fade 更柔和
导航样式	前进/后退箭头和分页指示器的样式与显隐	保留箭头和圆点
高度（分设备）	分别为桌面、平板、手机设置幻灯片高度	桌面 600–700px，移动端 300–400px
Stretch Slider（拉伸幻灯片）	将 Slider 宽度拉伸为全屏宽度	首页 Hero 区建议开启

🔑 关于 Stretch Slider：这个选项和 Elementor 中 Section（分区）的宽度设置有冲突关系。官方文档明确说明：包含 Slider 元素的 Section 必须设为 Default（默认） 宽度，而不是 Full Width（全宽）。要让 Slider 实现全宽效果，应该在这里开启 Stretch Slider，而不是在 Elementor 里把 Section 拉成全宽。否则 Slider 可能显示异常。

---

三、将 Slider 添加到首页

Slider 创建好了，现在要把它放到首页上。这一步通过 Elementor 的 WoodMart Slider 元素完成。

🧩 3.1 在 Elementor 中插入 Slider 元素

1. 回到首页的 Elementor 编辑界面
2. 在左侧元素面板中找到 [XTemos] 分类
3. 拖拽 Slider 元素到画布中
4. 在元素设置面板的 Slider 下拉框中，选择你之前创建的 Home Main Slider

💡 WoodMart 在 Elementor 中的自定义元素都以 [XTemos] 前缀分组。如果你找不到，可以在元素搜索框中直接输入 Slider 搜索。

↔️ 3.2 全宽 Slider 的正确做法

上一节提到过，这里再强调一遍操作步骤，因为这几乎是新手最容易踩的坑：

1. 拖入 Slider 元素后，不要把所在的 Section 设为 Full Width
2. 确保 Section 的 Width 设置为 Default
3. Slider 的全宽效果通过 Slider 设置中的 Stretch Slider 选项来实现
4. 如果你需要内容也全宽（不只是图片全宽，文字也贴边），再在对应 Slide 的设置中开启 Full-width content

⚠️ 如果你发现 Slider 左右有白边、或者箭头位置不对，第一个要检查的就是 Section 宽度设置——大概率是被设成了 Full Width 或 Full Screen，改回 Default 就好。

---

四、添加 Banner 与促销横幅

Slider 下方通常会接一组 Banner，用来展示促销活动、分类入口或品牌信息。WoodMart 提供了两种 Banner 元素：单张 Promo Banner 和多张 Banners Carousel。

📣 4.1 Promo Banner（促销横幅）

Promo Banner 是一张带文字和悬停效果的图片横幅，常用于：

• 促销活动入口（如 “Summer Sale – Up to 50% Off”）
• 分类导航（如 “Shop New Arrivals”）
• 品牌故事区块

操作步骤：

1. 在 Elementor 元素面板中找到 [XTemos] Promo Banner
2. 拖入页面，放置在 Slider 下方或两个产品区块之间
3. 主要配置项：
4. 图片（Image）：上传横幅背景图片
5. 标题（Title） 与 副标题（Subtitle）：叠加在图片上的文字
6. 按钮文字（Button Text） 与 链接（Link）：点击跳转地址
7. 悬停效果（Hover Effect）：鼠标悬停时的动画，比如 Zoom In（图片放大）、Fade（淡入遮罩）、Slide Up（文字上滑）等
8. 文字颜色（Text Color）：根据背景图片明暗调整，确保可读性
9. 遮罩颜色（Overlay Color）：在图片上叠加一层半透明颜色，提升文字对比度

💡 常见布局：在 Slider 下方放一个 3 列的 Section，每列放一个 Promo Banner，分别指向不同分类或活动页。视觉上整齐，用户一眼就能看到三个核心入口。

🎠 4.2 Banners Carousel（横幅轮播）

如果你有多个 Banner 想要展示但不想占太多纵向空间，可以用 Banners Carousel 把它们做成横向轮播：

1. 找到 [XTemos] Banners Carousel 元素，拖入页面
2. 逐个添加 Banner 项（每个项的配置方式与 Promo Banner 相同）
3. 设置轮播参数：每屏显示数量、自动播放、箭头导航等

💡 Banners Carousel 适合用在”品牌展示”或”多活动并行”场景。比如你有 6 个品牌合作要展示，用轮播比排成 6 格更节省空间。

---

五、添加产品区块

产品区块是电商首页的核心。WoodMart 的 Products 元素支持两种布局：Grid（网格）和 Carousel（轮播），几乎能满足所有产品展示需求。

🔲 5.1 Products 元素 —— 网格布局（Grid）

网格布局是最常见的产品展示方式，产品卡片排列成整齐的行列。

操作步骤：

1. 在 Elementor 中找到 [XTemos] Products (grid or carousel)，拖入页面
2. 在 General 标签页中，将 Grid or carousel 设为 Grid
3. 核心配置项：

配置项	说明	建议值
Element Title（区块标题）	显示在产品网格上方的标题	如 “Featured Products”
Data Source（数据来源）	决定展示哪些产品，见 5.3 详解	按需选择
Items per page（每页显示数）	一次加载多少个产品	8–12 个
Columns（列数）	一行显示几个产品（可选 1/2/3/4/6 列）	桌面端 4 列
Space between products（产品间距）	卡片之间的间距	20px 或 30px
Pagination（分页方式）	产品数量超出时的加载方式	Load more button（加载更多按钮）

1. 切换到 Design 标签页配置视觉选项：
2. Products Hover（产品悬停效果）：鼠标悬停在产品卡片上时的交互效果，WoodMart 提供多种内置效果，比如显示快速查看按钮、添加到购物车按钮上滑等
3. Images size（图片尺寸）：建议使用 medium 或自定义尺寸如 400x400，保持卡片比例一致
4. Sale countdown（促销倒计时）：如果产品设置了促销价格和结束时间，可以在此开启倒计时显示
5. Highlighted products（高亮产品）：给特定产品加上醒目的高亮样式，用于主推款

🔄 5.2 Products 元素 —— 轮播布局（Carousel）

轮播布局让产品横向滑动展示，适合用在”新品上市””畅销商品”等区块，能在有限空间内展示更多产品。

操作步骤：

1. 同样使用 [XTemos] Products (grid or carousel) 元素
2. 将 Grid or carousel 设为 Carousel
3. 此时会出现 Carousel Settings 标签页，关键配置如下：

配置项	说明	建议值
Slides per view（每屏显示数）	同时显示几个产品	桌面端 4 个
Slider speed（切换速度）	Slide 切换动画时长，单位毫秒	300ms
Slider autoplay（自动播放）	是否自动滚动到下一组产品	开启
Slider loop（循环）	滑到最后是否回到开头	开启
Hide pagination control（隐藏分页指示器）	是否隐藏底部圆点	保留显示
Hide prev/next buttons（隐藏箭头按钮）	是否隐藏左右箭头	保留显示
Center mode（居中模式）	当前 Slide 始终居中显示	关闭（常规轮播不需要）
Scroll per page（按页滚动）	箭头点击时一次翻一整页还是单个产品	开启（按页滚动更符合用户预期）

💡 实践建议：一个首页通常用 1–2 个 Grid 区块展示主力产品，再用 1–2 个 Carousel 区块展示”新品””畅销”等辅助产品线。两种布局交替使用，页面节奏感更好。

🗂️ 5.3 数据来源与筛选

Products 元素的 Data Source（数据来源）决定了区块里展示哪些产品，这是电商首页内容策略的核心：

数据来源	说明	适用场景
All products（所有产品）	展示全部产品，按排序规则排列	不推荐用于首页，产品太多没重点
Featured products（推荐产品）	在产品列表中标记了星标的产品	首页主推区块
Sale products（促销产品）	有原价和促销价的产品	折扣活动专区
Products with NEW label（带”新品”标签的产品）	在产品设置中勾选了 Add “NEW” label 的产品	新品上市区块
Bestsellers（畅销产品）	按销量排序展示	热销榜区块
List of ID（指定产品 ID）	手动输入产品 ID 列表	精准控制展示哪些产品

⚠️ 使用 “Products with NEW label” 前，需要先在 WoodMart → Theme Settings → Shop → Product labels 中开启 “New” label on products 选项，然后在每个产品编辑页的 Product Settings 中手动勾选 Add “NEW” label。两步都做了才会生效。

按分类或标签筛选：

除了按产品类型筛选，你还可以用 Categories or tags 选项进一步缩小范围：

• 选择一个或多个分类（Categories），区块只展示这些分类下的产品
• 或者选择一个或多个标签（Tags），区块只展示带这些标签的产品
• 分类和标签不能同时使用，只能选其一
• 但分类可以和产品类型组合使用，比如”Featured products + Clocks 分类”= 钟表分类下的推荐产品

排序控制（Data Settings 标签页）：

• Order by：按日期、标题、价格、随机、菜单顺序等排序
• Sorting：升序（ASC）或降序（DESC）
• Offset：跳过前 N 个产品，用于避免多个区块展示重复产品
• Exclude：按标题排除特定产品

💡 Offset 是一个很实用但容易被忽略的参数。假设你首页有两个 Products 区块都选了 Featured products，第一个区块显示前 8 个，第二个区块设 Offset 为 8，就自动从第 9 个开始展示，两个区块不会出现重复产品。

---

六、添加产品分类区块

产品分类区块（Product Categories）以图片卡片形式展示分类入口，用户点击后进入对应分类的 Shop 页面。这是首页导航的重要补充。

📂 6.1 Product Categories 元素配置

1. 在 Elementor 中找到 [XTemos] Product Categories，拖入页面
2. 主要配置项：

配置项	说明
Categories（分类选择）	选择要展示的分类，可多选
Layout（布局样式）	WoodMart 提供多种预设样式（Style 1–6），还有 Carousel（轮播）、Masonry Grid（瀑布流）等特殊布局
Columns（列数）	一行显示几个分类卡片
Hide products count（隐藏产品数量）	是否隐藏每个分类下”XX products”的数字
Categories style（分类样式）	控制卡片的视觉效果，包括阴影、间距、悬停效果等

1. 常见布局选择建议：
2. Style 1：标准网格，分类图片 + 名称 + 产品数量，最通用
3. Style 2–6：不同的间距、阴影、文字位置变体，根据你的首页设计风格选择
4. Carousel：分类横向轮播，适合分类数量多但空间有限的场景
5. Masonry Grid：瀑布流布局，不同分类卡片高度不等，视觉更活泼

💡 实践建议：选 4–6 个核心分类展示在首页，不要把所有分类都放上来。用户面对太多选择反而容易跳出。如果分类超过 8 个，考虑用 Carousel 布局或者只展示一级分类。

---

七、添加促销与辅助区块

除了产品本身，首页还需要一些”调味”区块来制造紧迫感、展示品牌内容和社交证明。

⏳ 7.1 Countdown Timer（倒计时）

倒计时区块用于限时促销活动，制造紧迫感促使用户尽快下单。

1. 在 Elementor 中找到 [XTemos] Countdown Timer，拖入页面
2. 配置项：
3. Due Date（截止时间）：设置倒计时的结束日期和时间
4. Style（样式）：倒计时数字的展示风格
5. Show days / hours / minutes / seconds：分别控制显示哪些时间单位

⚠️ 倒计时结束后，计时器会显示 00:00:00。如果你做的是周期性促销，记得在活动结束后及时更换 Due Date 或移除这个区块。长期显示 00:00 的倒计时会让用户觉得网站没人维护。

📝 7.2 Blog Posts（博客文章）

如果你的独立站有博客内容（SEO 文章、使用教程、品牌故事等），在首页展示最新文章可以提升内容曝光率。

1. 找到 [XTemos] Blog 元素，拖入页面
2. 配置项：
3. Blog Design（博客设计样式）：控制文章卡片的视觉风格
4. Items per page（显示数量）：展示几篇文章，建议 3–4 篇
5. Columns（列数）：一行几篇文章
6. Order by（排序方式）：按日期、热门程度等排序

📸 7.3 Instagram

展示 Instagram 图片可以增加品牌社交感和信任度。

1. 找到 [XTemos] Instagram 元素，拖入页面
2. 需要先在 WoodMart → Theme Settings → Instagram 中配置 Instagram API Token
3. 配置项包括显示数量、列数、图片间距等

💡 Instagram 元素需要 API 配置才能正常工作。如果暂时没有 Instagram 商业账号，可以先跳过这个区块，不影响其他内容搭建。

---

八、响应式设置

跨境电商的流量有相当比例来自移动端。首页在手机上的表现直接影响转化率，所以响应式（Responsive）设置不是可选项，是必做项。

📱 8.1 在 Elementor 中切换设备视图

Elementor 提供了三个设备视图，可以针对不同设备分别调整布局：

1. 在 Elementor 编辑器底部找到设备切换图标
2. 三个选项分别是：
3. Desktop（桌面端）：默认视图，宽度 1025px 以上
4. Tablet（平板端）：宽度 768px–1024px

5. Mobile（移动端）：宽度 767px 以下

6. 点击切换到 Tablet 或 Mobile 后，你看到的画面就是对应设备上的预览效果

🔢 8.2 针对不同设备调整列数

这是响应式设置中最常用的操作。比如桌面端产品网格显示 4 列，但手机屏幕太窄，4 列挤在一起卡片会小到看不清。

操作方法：

1. 选中 Products 元素
2. 切换到 Mobile 视图
3. 在 Columns 设置项中，你会看到一个手机图标，点击它后设置的值只对移动端生效
4. 将移动端列数改为 1 或 2

常见响应式列数配置建议：

区块类型	桌面端	平板端	移动端
Products Grid	4 列	3 列	1–2 列
Product Categories	4 列	3 列	2 列
Promo Banner（并排）	3 列	2 列	1 列
Blog Posts	3 列	2 列	1 列

👁️ 8.3 调整间距与隐藏区块

除了列数，还有两个常用的响应式调整：

调整间距（Padding / Margin）：

1. 选中 Section 或元素
2. 在 高级（Advanced） 标签页中找到 Padding 或 Margin 设置
3. 切换到 Mobile 视图后，可以单独设置移动端的间距
4. 常见做法：桌面端 Section 上下间距 60px，移动端改为 30px，避免手机上留白过大

在特定设备上隐藏区块：

1. 选中某个元素或 Section
2. 在 高级（Advanced） 标签页找到 响应式（Responsive） 选项
3. 开启 在移动端隐藏（Hide On Mobile） 或 在平板端隐藏（Hide On Tablet）

💡 什么时候需要隐藏区块？比如你有一个复杂的 Banners Carousel 在桌面端效果很好，但在手机上滑动体验差，不如直接隐藏，用一个简洁的单列 Promo Banner 替代。再比如 Countdown Timer 在手机上显示太挤，可以选择隐藏或单独调整样式。

---

九、动画效果设置

适度的动画能让首页”活起来”，但过度的动画会拖慢加载速度、干扰用户体验。动画设置遵循一个原则：有节制地使用，让每个动画都有目的。

✨ 9.1 进入动画（Entrance Animation）

进入动画是元素出现在用户视口（Viewport）时的播放效果。用户向下滚动页面时，区块以动画方式”出现”，而不是一开始就全部静态展示。

设置方法：

1. 选中任意 WoodMart 元素（如 Products、Promo Banner 等）
2. 在 高级（Advanced） 标签页找到 入场动画（Entrance Animation） 选项
3. Elementor 提供多种动画效果：Fade In（淡入）、Fade In Up（向上淡入）、Zoom In（放大淡入）等
4. 设置 动画时长（Animation Duration）：建议 300–600ms，太短看不到效果，太长显得卡顿
5. 设置 动画延迟（Animation Delay）：如果同一行有多个元素，可以给每个设不同的延迟值（如 0ms、100ms、200ms），制造依次出现的瀑布效果

💡 进入动画的心理作用：当用户滚动到一个产品区块时，产品卡片依次淡入出现，会让用户”注意到”这个区块。比起一次性加载所有内容，适度的进入动画能引导用户的视线节奏。

🖱️ 9.2 悬停动画（Hover Animation）

悬停动画是鼠标移到元素上时的交互反馈，主要靠 WoodMart 元素自身的 Hover 设置实现，不需要在 Elementor 高级设置中额外配置。

Products 元素的悬停效果：

在 Products 元素的 Design 标签页中，Products Hover 选项决定了产品卡片的悬停交互。WoodMart 内置多种悬停效果，常见的包括：

• 显示快速查看（Quick View）按钮
• 添加到购物车（Add to Cart）按钮上滑出现
• 产品图片缩放
• 显示对比（Compare）和心愿单（Wishlist）按钮

Promo Banner 的悬停效果：

在 Promo Banner 元素中，Hover Effect 选项控制鼠标悬停时的视觉效果：

• Zoom In：背景图片轻微放大，制造”靠近”的感觉
• Fade：叠加一层半透明遮罩，让文字更突出
• Slide Up：文字内容向上滑动，露出更多信息

⚠️ 动画使用建议：一个页面不要所有元素都加进入动画，选 3–5 个关键区块即可；悬停动画在移动端没有意义（手机没有 hover 状态），桌面端调好后记得在手机上检查一遍实际观感。

---

小结

回顾一下整篇教程的核心流程：

1. 在 页面 → 新建页面 创建首页，用 Elementor 编辑
2. 在 设置 → 阅读 中将首页设为静态页面
3. 在后台 Slides 菜单中逐张创建 Slide（页面编辑器搭内容 + 背景图 + 对齐设置），归入同一个 Slider 组并排序
4. 编辑 Slider 组，配置自动播放、切换效果、导航样式、分设备高度
5. 在 Elementor 中拖入 Slider 元素并选择创建好的 Slider；全宽效果通过 Stretch Slider 实现，不要把 Section 设为 Full Width
6. 用 Promo Banner 和 Banners Carousel 添加横幅促销区块
7. 用 Products (grid or carousel) 添加产品区块，选择数据来源（Featured / Sale / Bestsellers 等），配置列数、间距、悬停效果
8. 用 Product Categories 添加分类入口区块，选择合适的布局样式
9. 按需添加 Countdown Timer、Blog、Instagram 等辅助区块
10. 切换 Elementor 的设备视图，针对平板和移动端单独调整列数、间距，必要时隐藏不适合小屏的区块
11. 为关键区块设置进入动画，为产品卡片和 Banner 设置悬停效果，保持节制