impreza-wpbakery-dev

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

WordPress Development: Impreza Theme + WPBakery Page Builder

WordPress开发：Impreza主题 + WPBakery Page Builder

Overview

概述

This skill enables you to transform designs into production-ready WordPress code using the Impreza theme (by UpSolution) and WPBakery Page Builder. Impreza is a multipurpose WordPress theme with a customized WPBakery implementation, offering 63+ content elements, Live Builder, and extensive WooCommerce integration.

Current Versions (as of 2026):

Impreza Theme: 8.43.1 (February 2, 2026)
WPBakery: 8.7.2 (October 27, 2025)
PHP: 8.3 fully supported
WordPress: 6.6+ required

此技能可让你借助Impreza主题（由UpSolution开发）和WPBakery Page Builder将设计转换为可投入生产的WordPress代码。Impreza是一款多用途WordPress主题，定制化适配WPBakery，提供63+种内容元素、Live Builder（实时构建器）以及深度WooCommerce集成。

当前版本（截至2026年）：

Impreza主题：8.43.1（2026年2月2日）
WPBakery：8.7.2（2025年10月27日）
PHP：完全支持8.3版本
WordPress：要求6.6及以上版本

Quick Reference

快速参考

Task	Approach
Design → Code	Use shortcode syntax with Impreza elements
Responsive Layout	Use Design settings with device-specific controls
Custom Styling	Combine Design settings + Custom CSS classes
Dynamic Content	Use ACF integration + Grid Layouts
Performance	Enable "Disable extra features of WPBakery" option

任务	实现方式
设计 → 代码	使用Impreza元素的短代码语法
响应式布局	使用带设备专属控制的设计设置
自定义样式	结合设计设置 + 自定义CSS类
动态内容	使用ACF集成 + 网格布局
性能优化	启用“禁用WPBakery额外功能”选项

Architecture & Dual Builder System

架构与双构建器系统

Live Builder (Recommended)

Live Builder（推荐使用）

Impreza's native visual editor with real-time WYSIWYG editing:

Activation: Theme Options > Advanced > Theme Modules
Features: Section Templates, Favorite Sections, drag-and-drop interface
Performance: No frontend CSS/JS overhead when element not used
Interchangeable: Full compatibility with WPBakery-created content

Impreza原生可视化编辑器，支持实时WYSIWYG编辑：

激活方式：主题选项 > 高级 > 主题模块
功能：区块模板、收藏区块、拖拽式界面
性能：未使用的元素不会产生前端CSS/JS开销
互通性：与WPBakery创建的内容完全兼容

WPBakery Page Builder

Bundled, customized version optimized for Impreza:

Backend Editor: Schematic layout view for content-rich pages
Frontend Editor: Classic WYSIWYG interface
Modifications: Impreza adds custom options, disables non-compatible features
Classic Mode: Direct shortcode editing

CRITICAL: Both builders are fully interchangeable - pages created in one can be edited in the other.

为Impreza优化的捆绑定制版本：

后端编辑器：适用于内容丰富页面的示意图布局视图
前端编辑器：经典WYSIWYG界面
定制修改：Impreza新增了自定义选项，禁用了不兼容的功能
经典模式：直接编辑短代码

重要提示：两个构建器完全互通——在其中一个中创建的页面可在另一个中编辑。

Core Structure: Rows, Columns & Sections

核心结构：行、列与区块

Row/Section Element (

vc_row

)

行/区块元素 (

vc_row

)

The foundational container for all layouts.

Basic Syntax:

[vc_row]
  [vc_column width="1/1"]
    <!-- Content here -->
  [/vc_column]
[/vc_row]

Full-Width Section:

[vc_row el_class="separate-section" full_width="stretch_row"]
  [vc_column]
    <!-- Full-width content (Revolution Slider, Google Maps, etc.) -->
  [/vc_column]
[/vc_row]

Common Row Parameters:

```
gap
```
- Column spacing:
```
0px
```
,
```
10px
```
,
```
20px
```
,
```
30px
```
,
```
40px
```
,
```
60px
```
```
columns_type
```
- Layout:
```
default
```
,
```
boxes
```
(with background),
```
small
```
(reduced padding)

height

- Row height:

default

auto

small

medium

large

huge

full

(100vh)

```
valign
```
- Vertical alignment:
```
top
```
,
```
middle
```
,
```
bottom
```
```
content_placement
```
- Content alignment:
```
top
```
,
```
middle
```
,
```
bottom
```

color_scheme

- Color scheme:

default

alternate

primary

secondary

custom

```
bg_color
```
- Background color (hex or color name)
```
bg_image
```
- Background image URL
```
bg_size
```
- Background size:
```
cover
```
,
```
contain
```
,
```
initial
```

bg_repeat

- Background repeat:

repeat

no-repeat

repeat-x

repeat-y

```
bg_attachment
```
- Background attachment:
```
scroll
```
,
```
fixed
```
(parallax base)
```
parallax
```
- Enable parallax:
```
vertical
```
,
```
horizontal
```
,
```
still
```
,
```
fixed
```
```
parallax_speed
```
- Parallax speed factor:
```
0.1
```
to
```
2.0
```
(default
```
1
```
)
```
parallax_reverse
```
- Reverse parallax direction:
```
yes
```
,
```
no
```

Advanced Row Features:

[vc_row 
  gap="30px" 
  height="large" 
  valign="middle" 
  color_scheme="alternate"
  bg_image="https://example.com/bg.jpg"
  bg_size="cover"
  parallax="vertical"
  parallax_speed="0.5"
  css=".vc_custom_xxxxx{padding-top:80px;padding-bottom:80px;}"
]
  [vc_column width="1/2"]
    <!-- Left column -->
  [/vc_column]
  [vc_column width="1/2"]
    <!-- Right column -->
  [/vc_column]
[/vc_row]

所有布局的基础容器。

基础语法：

[vc_row]
  [vc_column width="1/1"]
    <!-- 内容放置于此 -->
  [/vc_column]
[/vc_row]

全宽区块：

[vc_row el_class="separate-section" full_width="stretch_row"]
  [vc_column]
    <!-- 全宽内容（如Revolution Slider、谷歌地图等） -->
  [/vc_column]
[/vc_row]

常见行参数：

```
gap
```
- 列间距：
```
0px
```
,
```
10px
```
,
```
20px
```
,
```
30px
```
,
```
40px
```
,
```
60px
```
```
columns_type
```
- 布局类型：
```
default
```
（默认）、
```
boxes
```
（带背景）、
```
small
```
（减少内边距）
```
height
```
- 行高：
```
default
```
（默认）、
```
auto
```
（自动）、
```
small
```
（小）、
```
medium
```
（中）、
```
large
```
（大）、
```
huge
```
（超大）、
```
full
```
（100vh）
```
valign
```
- 垂直对齐：
```
top
```
（顶部）、
```
middle
```
（居中）、
```
bottom
```
（底部）
```
content_placement
```
- 内容对齐：
```
top
```
（顶部）、
```
middle
```
（居中）、
```
bottom
```
（底部）
```
color_scheme
```
- 配色方案：
```
default
```
（默认）、
```
alternate
```
（交替）、
```
primary
```
（主色）、
```
secondary
```
（辅助色）、
```
custom
```
（自定义）
```
bg_color
```
- 背景颜色（十六进制值或颜色名称）
```
bg_image
```
- 背景图片URL
```
bg_size
```
- 背景尺寸：
```
cover
```
（覆盖）、
```
contain
```
（容纳）、
```
initial
```
（初始）
```
bg_repeat
```
- 背景重复：
```
repeat
```
（重复）、
```
no-repeat
```
（不重复）、
```
repeat-x
```
（水平重复）、
```
repeat-y
```
（垂直重复）
```
bg_attachment
```
- 背景附着方式：
```
scroll
```
（滚动）、
```
fixed
```
（固定，视差基础）
```
parallax
```
- 启用视差：
```
vertical
```
（垂直）、
```
horizontal
```
（水平）、
```
still
```
（静止）、
```
fixed
```
（固定）
```
parallax_speed
```
- 视差速度系数：
```
0.1
```
至
```
2.0
```
（默认
```
1
```
）
```
parallax_reverse
```
- 反转视差方向：
```
yes
```
（是）、
```
no
```
（否）

高级行功能示例：

[vc_row 
  gap="30px" 
  height="large" 
  valign="middle" 
  color_scheme="alternate"
  bg_image="https://example.com/bg.jpg"
  bg_size="cover"
  parallax="vertical"
  parallax_speed="0.5"
  css=".vc_custom_xxxxx{padding-top:80px;padding-bottom:80px;}"
]
  [vc_column width="1/2"]
    <!-- 左侧列 -->
  [/vc_column]
  [vc_column width="1/2"]
    <!-- 右侧列 -->
  [/vc_column]
[/vc_row]

Column Layouts (

vc_column

)

列布局 (

vc_column

)

Standard Grid System:

```
1/1
```
- Full width (100%)
```
1/2
```
- Half width (50%)
```
1/3
```
,
```
2/3
```
- Third layouts
```
1/4
```
,
```
3/4
```
- Quarter layouts
```
1/5
```
,
```
2/5
```
,
```
3/5
```
,
```
4/5
```
- Fifth layouts
```
1/6
```
,
```
5/6
```
- Sixth layouts

Column Parameters:

```
width
```
- Column width (see grid system above)

offset

- Left offset:

vc_col-sm-offset-1

through

vc_col-sm-offset-11

```
align
```
- Text alignment:
```
left
```
,
```
center
```
,
```
right
```
```
valign
```
- Vertical alignment:
```
top
```
,
```
middle
```
,
```
bottom
```
```
bg_color
```
- Column background color
```
text_color
```
- Text color scheme:
```
primary
```
,
```
secondary
```
,
```
custom
```

Responsive Column Example:

[vc_column width="1/3" width_md="1/2" width_sm="1/1"]
  <!-- Desktop: 33.33%, Tablet: 50%, Mobile: 100% -->
[/vc_column]

标准网格系统：

```
1/1
```
- 全宽（100%）
```
1/2
```
- 半宽（50%）
```
1/3
```
,
```
2/3
```
- 三分之一布局
```
1/4
```
,
```
3/4
```
- 四分之一布局
```
1/5
```
,
```
2/5
```
,
```
3/5
```
,
```
4/5
```
- 五分之一布局
```
1/6
```
,
```
5/6
```
- 六分之一布局

列参数：

```
width
```
- 列宽（参考上述网格系统）

offset

- 左侧偏移：

vc_col-sm-offset-1

至

vc_col-sm-offset-11

```
align
```
- 文本对齐：
```
left
```
（左）、
```
center
```
（居中）、
```
right
```
（右）
```
valign
```
- 垂直对齐：
```
top
```
（顶部）、
```
middle
```
（居中）、
```
bottom
```
（底部）
```
bg_color
```
- 列背景颜色
```
text_color
```
- 文本配色：
```
primary
```
（主色）、
```
secondary
```
（辅助色）、
```
custom
```
（自定义）

响应式列示例：

[vc_column width="1/3" width_md="1/2" width_sm="1/1"]
  <!-- 桌面端：33.33%，平板端：50%，移动端：100% -->
[/vc_column]

Design Settings (Universal)

通用设计设置

All Impreza elements support unified Design settings:

Spacing:

```
padding
```
- Internal spacing (top right bottom left)
```
margin
```
- External spacing (top right bottom left)

Syntax:

10px 20px 10px 20px

or CSS calc/vars:

calc(var(--base-padding) * 2)

Colors & Backgrounds:

```
bg_color
```
- Background color
```
bg_image
```
- Background image URL
```
text_color
```
- Text color
```
border_color
```
- Border color
```
border_radius
```
- Border radius:
```
0px
```
to
```
100px
```

Visibility:

```
hide_on_desktop
```
- Hide on desktop:
```
yes
```
,
```
no
```
```
hide_on_laptop
```
- Hide on laptops:
```
yes
```
,
```
no
```
```
hide_on_tablet
```
- Hide on tablets:
```
yes
```
,
```
no
```
```
hide_on_mobile
```
- Hide on mobiles:
```
yes
```
,
```
no
```

Custom Classes & IDs:

```
el_class
```
- Custom CSS class
```
el_id
```
- Custom HTML ID

Device-Specific Design:

<!-- Mobile-only padding override -->
[us_hwrapper 
  padding="40px" 
  padding_mobiles="20px"
]
  <!-- Content -->
[/us_hwrapper]

所有Impreza元素均支持统一的设计设置：

间距：

```
padding
```
- 内边距（上右下左）
```
margin
```
- 外边距（上右下左）

语法：

10px 20px 10px 20px

或CSS计算/变量：

calc(var(--base-padding) * 2)

颜色与背景：

```
bg_color
```
- 背景颜色
```
bg_image
```
- 背景图片URL
```
text_color
```
- 文本颜色
```
border_color
```
- 边框颜色
```
border_radius
```
- 边框圆角：
```
0px
```
至
```
100px
```

可见性：

```
hide_on_desktop
```
- 桌面端隐藏：
```
yes
```
（是）、
```
no
```
（否）
```
hide_on_laptop
```
- 笔记本端隐藏：
```
yes
```
（是）、
```
no
```
（否）
```
hide_on_tablet
```
- 平板端隐藏：
```
yes
```
（是）、
```
no
```
（否）
```
hide_on_mobile
```
- 移动端隐藏：
```
yes
```
（是）、
```
no
```
（否）

自定义类与ID：

```
el_class
```
- 自定义CSS类
```
el_id
```
- 自定义HTML ID

设备专属设计示例：

<!-- 移动端专属内边距覆盖 -->
[us_hwrapper 
  padding="40px" 
  padding_mobiles="20px"
]
  <!-- 内容 -->
[/us_hwrapper]

Impreza Content Elements (63+ Available)

Impreza内容元素（63+种可用）

Text & Typography

文本与排版

Heading (

us_heading

)

标题 (

us_heading

)

[us_heading 
  tag="h2"
  title="Your Heading Text"
  size="2rem"
  align="center"
  color="primary"
  font_weight="700"
]

Parameters:

```
tag
```
- HTML tag:
```
h1
```
,
```
h2
```
,
```
h3
```
,
```
h4
```
,
```
h5
```
,
```
h6
```
,
```
p
```
,
```
div
```
```
title
```
- Heading text
```
size
```
- Font size (CSS units):
```
1.5rem
```
,
```
32px
```
,
```
clamp(1.5rem, 4vw, 3rem)
```
```
align
```
- Alignment:
```
left
```
,
```
center
```
,
```
right
```
```
color
```
- Color:
```
primary
```
,
```
secondary
```
,
```
custom
```
, hex color
```
font_weight
```
- Weight:
```
300
```
,
```
400
```
,
```
600
```
,
```
700
```
,
```
900
```

transform

- Text transform:

none

uppercase

lowercase

capitalize

```
icon
```
- Icon name (Font Awesome):
```
fas|star
```
,
```
far|heart
```

[us_heading 
  tag="h2"
  title="你的标题文本"
  size="2rem"
  align="center"
  color="primary"
  font_weight="700"
]

参数：

```
tag
```
- HTML标签：
```
h1
```
,
```
h2
```
,
```
h3
```
,
```
h4
```
,
```
h5
```
,
```
h6
```
,
```
p
```
,
```
div
```
```
title
```
- 标题文本
```
size
```
- 字体大小（CSS单位）：
```
1.5rem
```
,
```
32px
```
,
```
clamp(1.5rem, 4vw, 3rem)
```
```
align
```
- 对齐方式：
```
left
```
（左）、
```
center
```
（居中）、
```
right
```
（右）
```
color
```
- 颜色：
```
primary
```
（主色）、
```
secondary
```
（辅助色）、
```
custom
```
（自定义）、十六进制颜色
```
font_weight
```
- 字重：
```
300
```
,
```
400
```
,
```
600
```
,
```
700
```
,
```
900
```
```
transform
```
- 文本转换：
```
none
```
（无）、
```
uppercase
```
（大写）、
```
lowercase
```
（小写）、
```
capitalize
```
（首字母大写）
```
icon
```
- 图标名称（Font Awesome）：
```
fas|star
```
,
```
far|heart
```

Text (

us_text

)

文本 (

us_text

)

[us_text text="Your paragraph content here" size="1rem"]

[us_text text="你的段落内容" size="1rem"]

Message Box (

us_message

)

消息框 (

us_message

)

[us_message 
  color="primary"
  icon="fas|info-circle"
  closing="1"
]
  Important information for users.
[/us_message]

Message Types:

```
color
```
-
```
success
```
(green),
```
attention
```
(yellow),
```
error
```
(red),
```
info
```
(blue)

[us_message 
  color="primary"
  icon="fas|info-circle"
  closing="1"
]
  给用户的重要信息。
[/us_message]

消息类型：

```
color
```
-
```
success
```
（绿色）、
```
attention
```
（黄色）、
```
error
```
（红色）、
```
info
```
（蓝色）

Buttons & CTAs

按钮与CTA

Button (

us_btn

)

按钮 (

us_btn

)

[us_btn 
  text="Learn More"
  link="url:https%3A%2F%2Fexample.com|title:Learn%20More|target:_blank"
  style="raised"
  color="primary"
  size="medium"
  icon="fas|arrow-right"
  iconpos="right"
]

Button Parameters:

```
text
```
- Button label

link

- URL (encoded):

url:https%3A%2F%2Fexample.com|title:Title|target:_blank

```
style
```
- Style:
```
raised
```
,
```
flat
```
,
```
outlined
```
```
color
```
- Color:
```
primary
```
,
```
secondary
```
,
```
light
```
,
```
dark
```
,
```
custom
```
```
size
```
- Size:
```
small
```
,
```
medium
```
,
```
large
```
```
icon
```
- Icon:
```
fas|arrow-right
```
,
```
far|heart
```
```
iconpos
```
- Icon position:
```
left
```
,
```
right
```
```
align
```
- Alignment:
```
left
```
,
```
center
```
,
```
right
```

[us_btn 
  text="了解更多"
  link="url:https%3A%2F%2Fexample.com|title:Learn%20More|target:_blank"
  style="raised"
  color="primary"
  size="medium"
  icon="fas|arrow-right"
  iconpos="right"
]

按钮参数：

```
text
```
- 按钮标签

link

- URL（已编码）：

url:https%3A%2F%2Fexample.com|title:Title|target:_blank

```
style
```
- 样式：
```
raised
```
（凸起）、
```
flat
```
（扁平）、
```
outlined
```
（描边）
```
color
```
- 颜色：
```
primary
```
（主色）、
```
secondary
```
（辅助色）、
```
light
```
（浅色）、
```
dark
```
（深色）、
```
custom
```
（自定义）
```
size
```
- 尺寸：
```
small
```
（小）、
```
medium
```
（中）、
```
large
```
（大）
```
icon
```
- 图标：
```
fas|arrow-right
```
,
```
far|heart
```
```
iconpos
```
- 图标位置：
```
left
```
（左侧）、
```
right
```
（右侧）
```
align
```
- 对齐方式：
```
left
```
（左）、
```
center
```
（居中）、
```
right
```
（右）

Call to Action (

us_cta

)

呼叫按钮 (

us_cta

)

[us_cta 
  title="Ready to Get Started?"
  message="Join thousands of satisfied customers today."
  btn_label="Sign Up Now"
  btn_link="url:https%3A%2F%2Fexample.com%2Fsignup"
  btn_style="raised"
  color_bg="primary"
]

[us_cta 
  title="准备好开始了吗？"
  message="立即加入数千名满意客户的行列。"
  btn_label="立即注册"
  btn_link="url:https%3A%2F%2Fexample.com%2Fsignup"
  btn_style="raised"
  color_bg="primary"
]

Images & Media

图片与媒体

Single Image (

us_image

)

单张图片 (

us_image

)

[us_image 
  image="12345"
  size="full"
  align="center"
  lightbox="1"
  has_ratio="1"
  ratio="16x9"
]

Parameters:

```
image
```
- Image ID or URL
```
size
```
- WordPress size:
```
thumbnail
```
,
```
medium
```
,
```
large
```
,
```
full
```
```
align
```
- Alignment:
```
left
```
,
```
center
```
,
```
right
```
```
lightbox
```
- Enable lightbox:
```
1
```
,
```
0
```
```
ratio
```
- Aspect ratio:
```
1x1
```
,
```
4x3
```
,
```
16x9
```
,
```
21x9
```
,
```
2x3
```
,
```
3x2
```
```
has_ratio
```
- Force aspect ratio:
```
1
```
,
```
0
```

[us_image 
  image="12345"
  size="full"
  align="center"
  lightbox="1"
  has_ratio="1"
  ratio="16x9"
]

参数：

```
image
```
- 图片ID或URL
```
size
```
- WordPress尺寸：
```
thumbnail
```
（缩略图）、
```
medium
```
（中等）、
```
large
```
（大）、
```
full
```
（原图）
```
align
```
- 对齐方式：
```
left
```
（左）、
```
center
```
（居中）、
```
right
```
（右）
```
lightbox
```
- 启用灯箱：
```
1
```
（是）、
```
0
```
（否）
```
ratio
```
- 宽高比：
```
1x1
```
,
```
4x3
```
,
```
16x9
```
,
```
21x9
```
,
```
2x3
```
,
```
3x2
```
```
has_ratio
```
- 强制宽高比：
```
1
```
（是）、
```
0
```
（否）

Gallery (

us_gallery

)

图片集 (

us_gallery

)

[us_gallery 
  ids="123,456,789"
  columns="3"
  gap="20px"
  type="masonry"
  lightbox="1"
]

Gallery Types:

```
type
```
-
```
default
```
,
```
masonry
```
,
```
carousel
```
,
```
slider
```

[us_gallery 
  ids="123,456,789"
  columns="3"
  gap="20px"
  type="masonry"
  lightbox="1"
]

图片集类型：

```
type
```
-
```
default
```
（默认）、
```
masonry
```
（瀑布流）、
```
carousel
```
（轮播）

Image Slider (

us_image_slider

)

图片滑块 (

us_image_slider

)

[us_image_slider 
  ids="123,456,789"
  arrows="1"
  nav="dots"
  autoplay="1"
  autoplay_period="5"
  fullscreen="1"
  ratio="16x9"
]

[us_image_slider 
  ids="123,456,789"
  arrows="1"
  nav="dots"
  autoplay="1"
  autoplay_period="5"
  fullscreen="1"
  ratio="16x9"
]

Video (

vc_video

)

视频 (

vc_video

)

[vc_video 
  link="https://www.youtube.com/watch?v=xxxxx"
  el_aspect="16-9"
]

[vc_video 
  link="https://www.youtube.com/watch?v=xxxxx"
  el_aspect="16-9"
]

Interactive Elements

交互元素

Accordion (

us_accordion

)

手风琴 (

us_accordion

)

[us_accordion]
  [us_accordion_item 
    title="First Section"
    active="1"
  ]
    Content of first section.
  [/us_accordion_item]
  [us_accordion_item title="Second Section"]
    Content of second section.
  [/us_accordion_item]
[/us_accordion]

Parameters:

```
active
```
- Initially open:
```
1
```
(first item),
```
0
```
(none)
```
title
```
- Section title
```
icon
```
- Custom icon

[us_accordion]
  [us_accordion_item 
    title="第一部分"
    active="1"
  ]
    第一部分内容。
  [/us_accordion_item]
  [us_accordion_item title="第二部分"]
    第二部分内容。
  [/us_accordion_item]
[/us_accordion]

参数：

```
active
```
- 默认展开：
```
1
```
（第一个项）、
```
0
```
（无）
```
title
```
- 部分标题
```
icon
```
- 自定义图标

Tabs (

us_tabs

)

标签页 (

us_tabs

)

[us_tabs 
  layout="default"
  align="center"
]
  [us_tab title="Tab 1" active="1"]
    First tab content.
  [/us_tab]
  [us_tab title="Tab 2"]
    Second tab content.
  [/us_tab]
[/us_tabs]

Tab Layouts:

```
layout
```
-
```
default
```
,
```
modern
```
,
```
trendy
```
,
```
timeline
```

[us_tabs 
  layout="default"
  align="center"
]
  [us_tab title="标签页1" active="1"]
    第一个标签页内容。
  [/us_tab]
  [us_tab title="标签页2"]
    第二个标签页内容。
  [/us_tab]
[/us_tabs]

标签页布局：

```
layout
```
-
```
default
```
（默认）、
```
modern
```
（现代）、
```
trendy
```
（潮流）、
```
timeline
```
（时间线）

Popup (

us_popup

)

弹窗 (

us_popup

)

[us_popup 
  show_on="click"
  trigger_id="open-popup-btn"
]
  Popup content goes here.
[/us_popup]

Popup Triggers:

```
show_on
```
-
```
load
```
,
```
click
```
,
```
selector
```
```
trigger_id
```
- Element ID to trigger popup

[us_popup 
  show_on="click"
  trigger_id="open-popup-btn"
]
  弹窗内容。
[/us_popup]

弹窗触发方式：

```
show_on
```
-
```
load
```
（页面加载）、
```
click
```
（点击）、
```
selector
```
（选择器）
```
trigger_id
```
- 触发弹窗的元素ID

Counters & Progress

计数器与进度条

Counter (

us_counter

)

计数器 (

us_counter

)

[us_counter 
  initial="0"
  target="1500"
  prefix="$"
  suffix="+"
  duration="2"
  color="primary"
  size="3rem"
]

[us_counter 
  initial="0"
  target="1500"
  prefix="$"
  suffix="+"
  duration="2"
  color="primary"
  size="3rem"
]

Progress Bar (

us_progbar

)

进度条 (

us_progbar

)

[us_progbar 
  count="75"
  title="WordPress Development"
  style="thin"
  color="primary"
]

[us_progbar 
  count="75"
  title="WordPress开发"
  style="thin"
  color="primary"
]

Icons & Iconbox

图标与图标框

Single Icon (

us_icon

)

单个图标 (

us_icon

)

[us_icon 
  icon="fas|rocket"
  size="3rem"
  color="primary"
  link="url:https%3A%2F%2Fexample.com"
]

[us_icon 
  icon="fas|rocket"
  size="3rem"
  color="primary"
  link="url:https%3A%2F%2Fexample.com"
]

Iconbox (

us_iconbox

)

图标框 (

us_iconbox

)

[us_iconbox 
  icon="fas|check-circle"
  title="Feature Title"
  style="default"
  iconpos="top"
  img="12345"
]
  Feature description text goes here.
[/us_iconbox]

Iconbox Styles:

```
style
```
-
```
default
```
,
```
circle
```
,
```
outlined
```
```
iconpos
```
-
```
top
```
,
```
left
```
```
color
```
-
```
primary
```
,
```
secondary
```
,
```
custom
```

[us_iconbox 
  icon="fas|check-circle"
  title="功能标题"
  style="default"
  iconpos="top"
  img="12345"
]
  功能描述文本。
[/us_iconbox]

图标框样式：

```
style
```
-
```
default
```
（默认）、
```
circle
```
（圆形）、
```
outlined
```
（描边）
```
iconpos
```
-
```
top
```
（顶部）、
```
left
```
（左侧）
```
color
```
-
```
primary
```
（主色）、
```
secondary
```
（辅助色）、
```
custom
```
（自定义）

Social Links

社交链接

[us_socials 
  items="%5B%7B%22type%22%3A%22facebook%22%2C%22url%22%3A%22https%3A%2F%2Ffacebook.com%2Fyourpage%22%7D%2C%7B%22type%22%3A%22twitter%22%2C%22url%22%3A%22https%3A%2F%2Ftwitter.com%2Fyouraccount%22%7D%5D"
  style="colored"
  size="1.5rem"
]

Available Networks: facebook, twitter, instagram, linkedin, youtube, pinterest, tiktok, discord, telegram, whatsapp, email

[us_socials 
  items="%5B%7B%22type%22%3A%22facebook%22%2C%22url%22%3A%22https%3A%2F%2Ffacebook.com%2Fyourpage%22%7D%2C%7B%22type%22%3A%22twitter%22%2C%22url%22%3A%22https%3A%2F%2Ftwitter.com%2Fyouraccount%22%7D%5D"
  style="colored"
  size="1.5rem"
]

支持的平台： facebook, twitter, instagram, linkedin, youtube, pinterest, tiktok, discord, telegram, whatsapp, email

Contact & Forms

联系与表单

Contact Form (

us_cform

)

联系表单 (

us_cform

)

[us_cform 
  receiver_email="info@example.com"
  fields="%5B%7B%22type%22%3A%22text%22%2C%22label%22%3A%22Name%22%2C%22required%22%3A%221%22%7D%2C%7B%22type%22%3A%22email%22%2C%22label%22%3A%22Email%22%2C%22required%22%3A%221%22%7D%2C%7B%22type%22%3A%22textarea%22%2C%22label%22%3A%22Message%22%2C%22required%22%3A%221%22%7D%5D"
  button_text="Send Message"
]

Field Types:

```
text
```
- Single-line text
```
email
```
- Email validation
```
textarea
```
- Multi-line text
```
select
```
- Dropdown
```
checkbox
```
- Checkbox
```
radio
```
- Radio buttons

Contact Form 7 Integration:

[contact-form-7 id="1234"]

[us_cform 
  receiver_email="info@example.com"
  fields="%5B%7B%22type%22%3A%22text%22%2C%22label%22%3A%22Name%22%2C%22required%22%3A%221%22%7D%2C%7B%22type%22%3A%22email%22%2C%22label%22%3A%22Email%22%2C%22required%22%3A%221%22%7D%2C%7B%22type%22%3A%22textarea%22%2C%22label%22%3A%22Message%22%2C%22required%22%3A%221%22%7D%5D"
  button_text="发送消息"
]

字段类型：

```
text
```
- 单行文本
```
email
```
- 邮箱验证
```
textarea
```
- 多行文本
```
select
```
- 下拉框
```
checkbox
```
- 复选框
```
radio
```
- 单选按钮

Google Maps (

us_gmaps

)

Contact Form 7集成：

[us_gmaps 
  address="1600 Amphitheatre Parkway, Mountain View, CA"
  latitude="37.4220"
  longitude="-122.0841"
  zoom="15"
  height="450px"
  marker="1"
]

[contact-form-7 id="1234"]

Testimonials

谷歌地图 (

us_gmaps

)

[us_testimonial 
  author="John Doe"
  company="Acme Corp"
  rating="5"
  img="12345"
]
  "Amazing product! Highly recommend to anyone looking for quality service."
[/us_testimonial]

[us_gmaps 
  address="1600 Amphitheatre Parkway, Mountain View, CA"
  latitude="37.4220"
  longitude="-122.0841"
  zoom="15"
  height="450px"
  marker="1"
]

Person Card (

us_person

)

客户评价

[us_person 
  name="Jane Smith"
  role="CEO & Founder"
  image="12345"
  email="jane@example.com"
  phone="+1-555-0123"
  socials="%5B%7B%22type%22%3A%22linkedin%22%2C%22url%22%3A%22https%3A%2F%2Flinkedin.com%2Fin%2Fjanesmith%22%7D%5D"
]
  Short bio about the person.
[/us_person]

[us_testimonial 
  author="John Doe"
  company="Acme Corp"
  rating="5"
  img="12345"
]
  "产品太棒了！强烈推荐给所有追求优质服务的人。"
[/us_testimonial]

Separators & Spacers

个人卡片 (

us_person

)

Separator (

us_separator

)

—

[us_separator 
  type="default"
  size="medium"
  icon="fas|star"
]

Separator Types:

```
type
```
-
```
default
```
,
```
fullwidth
```
,
```
short
```
,
```
invisible
```
```
size
```
-
```
small
```
,
```
medium
```
,
```
large
```
,
```
huge
```

[us_person 
  name="Jane Smith"
  role="CEO & Founder"
  image="12345"
  email="jane@example.com"
  phone="+1-555-0123"
  socials="%5B%7B%22type%22%3A%22linkedin%22%2C%22url%22%3A%22https%3A%2F%2Flinkedin.com%2Fin%2Fjanesmith%22%7D%5D"
]
  个人简短介绍。
[/us_person]

Vertical Wrapper (

us_hwrapper

)

分隔符与间隔符

—

分隔符 (

us_separator

)

Horizontal container with vertical alignment control:

[us_hwrapper 
  valign="middle"
  wrap="1"
]
  <!-- Inline elements with vertical centering -->
[/us_hwrapper]

[us_separator 
  type="default"
  size="medium"
  icon="fas|star"
]

分隔符类型：

```
type
```
-
```
default
```
（默认）、
```
fullwidth
```
（全宽）、
```
short
```
（短款）、
```
invisible
```
（不可见）
```
size
```
-
```
small
```
（小）、
```
medium
```
（中）、
```
large
```
（大）、
```
huge
```
（超大）

Vertical Wrapper (

us_vwrapper

)

水平容器 (

us_hwrapper

)

Vertical stacking container:

[us_vwrapper]
  <!-- Stacked elements -->
[/us_vwrapper]

带垂直对齐控制的水平容器：

[us_hwrapper 
  valign="middle"
  wrap="1"
]
  <!-- 垂直居中的行内元素 -->
[/us_hwrapper]

Dynamic Content & Grid Layouts

垂直容器 (

us_vwrapper

)

Post Grid (

us_grid

)

—

Display posts, custom post types, or WooCommerce products in customizable grids.

Basic Post Grid:

[us_grid 
  post_type="post"
  items_qty="9"
  columns="3"
  items_gap="30px"
  pagination="ajax"
  filter="1"
  filter_taxonomy="category"
]

Parameters:

post_type

post

page

product

portfolio

us_testimonial

, or custom post type

```
items_qty
```
- Number of items to show
```
columns
```
- Grid columns:
```
1
```
,
```
2
```
,
```
3
```
,
```
4
```
,
```
5
```
,
```
6
```
```
items_gap
```
- Gap between items:
```
0px
```
to
```
60px
```
```
type
```
- Grid type:
```
grid
```
,
```
masonry
```
,
```
carousel
```
```
pagination
```
- Pagination:
```
regular
```
,
```
ajax
```
,
```
load_more
```
,
```
infinite
```
```
filter
```
- Enable filter:
```
1
```
,
```
0
```

filter_taxonomy

- Filter by:

category

post_tag

product_cat

, custom taxonomy

```
orderby
```
- Order by:
```
date
```
,
```
title
```
,
```
rand
```
,
```
menu_order
```
,
```
modified
```
```
order
```
- Sort direction:
```
DESC
```
,
```
ASC
```

Grid with Custom Query:

[us_grid 
  post_type="post"
  taxonomy_category="featured,news"
  items_qty="6"
  columns="3"
  img_size="large"
  title_size="1.5rem"
  meta="date,author,comments"
  excerpt_length="20"
]

WooCommerce Product Grid:

[us_grid 
  post_type="product"
  items_qty="12"
  columns="4"
  show_add_to_cart="1"
  show_price="1"
  filter="1"
  filter_taxonomy="product_cat"
  orderby="popularity"
]

垂直堆叠容器：

[us_vwrapper]
  <!-- 堆叠元素 -->
[/us_vwrapper]

Grid Layouts (Templates)

动态内容与网格布局

—

文章网格 (

us_grid

)

Create reusable grid item templates at Templates > Grid Layouts.

Using Custom Layout:

[us_grid 
  post_type="post"
  items_layout="12345"
  items_qty="9"
  columns="3"
]

以可定制的网格展示文章、自定义文章类型或WooCommerce产品。

基础文章网格：

[us_grid 
  post_type="post"
  items_qty="9"
  columns="3"
  items_gap="30px"
  pagination="ajax"
  filter="1"
  filter_taxonomy="category"
]

参数：

```
post_type
```
-
```
post
```
（文章）、
```
page
```
（页面）、
```
product
```
（产品）、
```
portfolio
```
（作品集）、
```
us_testimonial
```
（客户评价）或自定义文章类型
```
items_qty
```
- 显示的项目数量
```
columns
```
- 网格列数：
```
1
```
,
```
2
```
,
```
3
```
,
```
4
```
,
```
5
```
,
```
6
```
```
items_gap
```
- 项目间距：
```
0px
```
至
```
60px
```
```
type
```
- 网格类型：
```
grid
```
（网格）、
```
masonry
```
（瀑布流）、
```
carousel
```
（轮播）
```
pagination
```
- 分页方式：
```
regular
```
（常规）、
```
ajax
```
（异步）、
```
load_more
```
（加载更多）、
```
infinite
```
（无限滚动）
```
filter
```
- 启用筛选：
```
1
```
（是）、
```
0
```
（否）
```
filter_taxonomy
```
- 筛选分类：
```
category
```
（文章分类）、
```
post_tag
```
（文章标签）、
```
product_cat
```
（产品分类）、自定义分类法
```
orderby
```
- 排序依据：
```
date
```
（日期）、
```
title
```
（标题）、
```
rand
```
（随机）、
```
menu_order
```
（菜单顺序）、
```
modified
```
（修改时间）
```
order
```
- 排序方向：
```
DESC
```
（降序）、
```
ASC
```
（升序）

带自定义查询的网格：

[us_grid 
  post_type="post"
  taxonomy_category="featured,news"
  items_qty="6"
  columns="3"
  img_size="large"
  title_size="1.5rem"
  meta="date,author,comments"
  excerpt_length="20"
]

WooCommerce产品网格：

[us_grid 
  post_type="product"
  items_qty="12"
  columns="4"
  show_add_to_cart="1"
  show_price="1"
  filter="1"
  filter_taxonomy="product_cat"
  orderby="popularity"
]

Post List (

us_post_list

)

网格布局（模板）

Alternative to grid with different styling options:

[us_post_list 
  query_args="post_type=post&posts_per_page=5&category_name=news"
  show_thumbnails="1"
  show_date="1"
  show_author="1"
]

在模板 > 网格布局中创建可复用的网格项模板。

使用自定义布局：

[us_grid 
  post_type="post"
  items_layout="12345"
  items_qty="9"
  columns="3"
]

User List (

us_user_list

)

文章列表 (

us_post_list

)

Display team members or users:

[us_user_list 
  role="author"
  items_qty="8"
  columns="4"
  show_avatar="1"
  show_bio="1"
]

网格的替代方案，提供不同的样式选项：

[us_post_list 
  query_args="post_type=post&posts_per_page=5&category_name=news"
  show_thumbnails="1"
  show_date="1"
  show_author="1"
]

WooCommerce Integration

用户列表 (

us_user_list

)

Product Elements

—

Single Product (

us_single_product

)

—

[us_single_product 
  product_id="123"
  show_title="1"
  show_price="1"
  show_add_to_cart="1"
  show_rating="1"
]

展示团队成员或用户：

[us_user_list 
  role="author"
  items_qty="8"
  columns="4"
  show_avatar="1"
  show_bio="1"
]

Products Carousel

WooCommerce集成

—

产品元素

—

单个产品 (

us_single_product

)

[us_grid 
  post_type="product"
  type="carousel"
  items_qty="8"
  columns="4"
  arrows="1"
  dots="1"
  autoplay="1"
]

[us_single_product 
  product_id="123"
  show_title="1"
  show_price="1"
  show_add_to_cart="1"
  show_rating="1"
]

Add to Cart Button

产品轮播

[us_add_to_cart 
  product_id="123"
  style="raised"
  color="primary"
]

[us_grid 
  post_type="product"
  type="carousel"
  items_qty="8"
  columns="4"
  arrows="1"
  dots="1"
  autoplay="1"
]

WooCommerce Pages

加入购物车按钮

Impreza allows custom WooCommerce page templates via Grid Layouts:

Product Page: Customize with Page Template Builder
Cart Page: Custom layout via Templates
Checkout Page: Custom design options
My Account: Full customization support
Thank You Page: Custom success page

[us_add_to_cart 
  product_id="123"
  style="raised"
  color="primary"
]

Advanced Features

WooCommerce页面

Reusable Blocks (

us_page_block

)

—

Create reusable content blocks at Templates > Reusable Blocks.

Usage:

[us_page_block id="1234"]

Exclude Rows/Columns:

[us_page_block 
  id="1234"
  exclude_rows_columns="inside"
]

Options:

```
none
```
- Keep all structure
```
inside
```
- Remove rows/columns inside block
```
around
```
- Remove rows/columns around block

Use in Menus: Add reusable blocks as menu items for mega menus or custom navigation.

Impreza允许通过网格布局自定义WooCommerce页面模板：

产品页面：使用页面模板构建器自定义
购物车页面：通过模板自定义布局
结账页面：自定义设计选项
我的账户：完全支持自定义
感谢页面：自定义成功页面

Custom HTML & Code

高级功能

Custom HTML Element

可复用区块 (

us_page_block

)

[us_html]
<div class="custom-component">
  <!-- Your custom HTML -->
</div>
[/us_html]

在模板 > 可复用区块中创建可复用内容块。

使用方式：

[us_page_block id="1234"]

排除行/列：

[us_page_block 
  id="1234"
  exclude_rows_columns="inside"
]

选项：

```
none
```
- 保留所有结构
```
inside
```
- 移除区块内部的行/列
```
around
```
- 移除区块外部的行/列

在菜单中使用： 将可复用区块添加为菜单项，用于 mega menu 或自定义导航。

JavaScript Execution

自定义HTML与代码

—

自定义HTML元素

[us_html]
<script>
// Your JavaScript code
jQuery(document).ready(function($) {
  // Initialize custom functionality
});
</script>
[/us_html]

[us_html]
<div class="custom-component">
  <!-- 你的自定义HTML -->
</div>
[/us_html]

ACF (Advanced Custom Fields) Integration

JavaScript执行

Impreza natively supports ACF custom fields in:

Grid Layouts
Dynamic Values
Page Templates

Display ACF Field:

[us_text 
  text="{{post:acf_field_name}}"
]

ACF Repeater in Grid: Use Grid Layout Builder to display ACF repeater fields in custom layouts.

[us_html]
<script>
// 你的JavaScript代码
jQuery(document).ready(function($) {
  // 初始化自定义功能
});
</script>
[/us_html]

Display Logic

ACF（高级自定义字段）集成

Show/hide elements based on conditions:

Logged-in Users Only:

[us_iconbox 
  title="Member Dashboard"
  show_if="{{user:logged_in}}"
]
  Exclusive content for members.
[/us_iconbox]

Device-Specific:

[us_image 
  image="12345"
  hide_on_mobile="yes"
]

Conditional Display:

User logged in/out
Page types (archive, single, front page)
Date ranges
User roles
Custom conditions

Impreza原生支持在以下场景中使用ACF自定义字段：

网格布局
动态值
页面模板

显示ACF字段：

[us_text 
  text="{{post:acf_field_name}}"
]

网格中的ACF repeater： 使用网格布局构建器在自定义布局中展示ACF repeater字段。

Responsive Design Best Practices

显示逻辑

Device Breakpoints

—

Impreza uses these breakpoints:

Desktop: 1280px+
Laptop: 1024px - 1279px
Tablet: 768px - 1023px
Mobile: < 768px

根据条件显示/隐藏元素：

仅登录用户可见：

[us_iconbox 
  title="会员中心"
  show_if="{{user:logged_in}}"
]
  会员专属内容。
[/us_iconbox]

设备专属显示：

[us_image 
  image="12345"
  hide_on_mobile="yes"
]

条件显示场景：

用户登录/未登录
页面类型（归档、单页、首页）
日期范围
用户角色
自定义条件

Responsive Strategies

响应式设计最佳实践

1. Column Width Adjustments

设备断点

[vc_row]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    <!-- Desktop: 33%, Tablet: 50%, Mobile: 100% -->
  [/vc_column]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    <!-- Responsive columns -->
  [/vc_column]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    <!-- Auto-stack on mobile -->
  [/vc_column]
[/vc_row]

Impreza使用以下断点：

桌面端：1280px+
笔记本端：1024px - 1279px
平板端：768px - 1023px
移动端：< 768px

2. Device-Specific Padding/Margin

响应式策略

—

1. 列宽调整

[us_hwrapper 
  padding="60px"
  padding_tablets="40px"
  padding_mobiles="20px"
]
  <!-- Content with responsive spacing -->
[/us_hwrapper]

[vc_row]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    <!-- 桌面端：33%，平板端：50%，移动端：100% -->
  [/vc_column]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    <!-- 响应式列 -->
  [/vc_column]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    <!-- 移动端自动堆叠 -->
  [/vc_column]
[/vc_row]

3. Hide on Devices

2. 设备专属内边距/外边距

<!-- Desktop-only image -->
[us_image 
  image="12345"
  hide_on_tablet="yes"
  hide_on_mobile="yes"
]

<!-- Mobile-only CTA -->
[us_btn 
  text="Call Now"
  hide_on_desktop="yes"
  hide_on_laptop="yes"
]

[us_hwrapper 
  padding="60px"
  padding_tablets="40px"
  padding_mobiles="20px"
]
  <!-- 带响应式间距的内容 -->
[/us_hwrapper]

4. Responsive Typography

3. 按设备隐藏

[us_heading 
  title="Responsive Heading"
  size="clamp(1.5rem, 4vw, 3rem)"
]

Use CSS clamp() for fluid typography:

```
clamp(min, preferred, max)
```
Example:
```
clamp(1.5rem, 4vw, 3rem)
```
scales between 1.5rem and 3rem

<!-- 仅桌面端显示的图片 -->
[us_image 
  image="12345"
  hide_on_tablet="yes"
  hide_on_mobile="yes"
]

<!-- 仅移动端显示的CTA -->
[us_btn 
  text="立即致电"
  hide_on_desktop="yes"
  hide_on_laptop="yes"
]

5. Image Aspect Ratios

4. 响应式排版

[us_image 
  image="12345"
  has_ratio="1"
  ratio="16x9"
  ratio_tablets="4x3"
  ratio_mobiles="1x1"
]

[us_heading 
  title="响应式标题"
  size="clamp(1.5rem, 4vw, 3rem)"
]

使用CSS clamp()实现流体排版：

```
clamp(min, preferred, max)
```
示例：
```
clamp(1.5rem, 4vw, 3rem)
```
在1.5rem到3rem之间缩放

Performance Optimization

5. 图片宽高比

Essential Settings

—

Navigate to Impreza > Theme Options > Advanced Settings > Website Performance:

[us_image 
  image="12345"
  has_ratio="1"
  ratio="16x9"
  ratio_tablets="4x3"
  ratio_mobiles="1x1"
]

1. Disable Extra WPBakery Features

性能优化

—

关键设置

✅ ALWAYS ENABLE (unless you specifically need Grid Builder)

Theme Options > Advanced Settings > Website Performance
☑ Disable extra features of WPBakery Page Builder

This prevents WPBakery from loading heavy CSS/JS on frontend, improving load times significantly.

导航至Impreza > 主题选项 > 高级设置 > 网站性能：

2. Assets Optimization

1. 禁用WPBakery额外功能

Theme Options > Advanced Settings > Website Performance
☑ Optimize CSS Output
☑ Optimize JavaScript Output
☑ Lazy Load Images
☑ Minify HTML Output

✅ 务必启用（除非你明确需要网格构建器）

主题选项 > 高级设置 > 网站性能
☑ 禁用WPBakery Page Builder的额外功能

这可防止WPBakery在前端加载冗余的CSS/JS，显著提升加载速度。

3. Icon Library

2. 资源优化

Load only icons actually used:

Theme Options > Advanced Settings > Icon Sets
☑ Load only used icons (automatic detection)

主题选项 > 高级设置 > 网站性能
☑ 优化CSS输出
☑ 优化JavaScript输出
☑ 图片懒加载
☑ 压缩HTML输出

4. Google Fonts

3. 图标库

Avoid loading unused fonts:

Theme Options > Typography
- Set "Regular Text" to Arial (web-safe)
- Set headings to system fonts or minimal Google Fonts
- Or upload custom WOFF2 fonts locally

仅加载实际使用的图标：

主题选项 > 高级设置 > 图标集
☑ 仅加载已使用的图标（自动检测）

Code-Level Optimization

4. 谷歌字体

Use Inline Critical CSS

—

<!-- In theme functions.php or child theme -->
<?php
add_action('wp_head', 'custom_critical_css', 1);
function custom_critical_css() {
    echo '<style>
        /* Critical above-the-fold CSS */
        .header { /* styles */ }
        .hero { /* styles */ }
    </style>';
}
?>

避免加载未使用的字体：

主题选项 > 排版
- 将“常规文本”设置为Arial（网页安全字体）
- 将标题设置为系统字体或少量谷歌字体
- 或本地上传自定义WOFF2字体

Defer Non-Critical CSS

代码层面优化

—

使用内联关键CSS

<!-- Use Custom Code area in Impreza -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

<!-- 在主题functions.php或子主题中 -->
<?php
add_action('wp_head', 'custom_critical_css', 1);
function custom_critical_css() {
    echo '<style>
        /* 首屏关键CSS */
        .header { /* 样式 */ }
        .hero { /* 样式 */ }
    </style>';
}
?>

Lazy Load Background Images

延迟加载非关键CSS

[vc_row 
  bg_image=""
  el_class="lazy-bg"
  css=".lazy-bg{background-image:none;}"
]

Then use JavaScript to load on scroll.

<!-- 使用Impreza中的自定义代码区域 -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Image Optimization

懒加载背景图片

Use WebP format (with JPG fallback)
Compress before upload (TinyPNG, Squoosh)
Use appropriate sizes:
- Full-width hero: 1920px width
- Grid items: 800px width
- Thumbnails: 400px width
Enable lazy loading: Impreza has built-in lazy load
Use CDN: Cloudflare, CloudFront, or similar

[vc_row 
  bg_image=""
  el_class="lazy-bg"
  css=".lazy-bg{background-image:none;}"
]

然后使用JavaScript在滚动时加载。

Caching Strategy

图片优化

Recommended Plugins:

WP Rocket (premium) - most comprehensive
Hummingbird - WPMU DEV (works great with Impreza)
WP Super Cache - free alternative

Settings:

Page caching: ✅ Enable
Object caching: ✅ Enable
Database optimization: ✅ Enable
GZIP compression: ✅ Enable
Browser caching: ✅ Enable
Minification: ✅ Enable (HTML, CSS, JS)
Lazy loading: ✅ Enable

使用WebP格式（同时提供JPG降级选项）
上传前压缩（使用TinyPNG、Squoosh）
使用合适尺寸:
- 全宽英雄图：1920px宽度
- 网格项：800px宽度
- 缩略图：400px宽度
启用懒加载：Impreza内置懒加载功能
使用CDN：Cloudflare、CloudFront或类似服务

Design-to-Code Workflow

缓存策略

From Visual Design

—

Step 1: Analyze Layout Structure

—

Identify:

Number of sections/rows
Column layouts per row
Element types (heading, text, button, image, etc.)
Spacing and alignment
Color scheme
Typography (sizes, weights)

推荐插件：

WP Rocket（付费）- 功能最全面
Hummingbird - WPMU DEV出品（与Impreza兼容性极佳）
WP Super Cache - 免费替代方案

设置：

页面缓存：✅ 启用
对象缓存：✅ 启用
数据库优化：✅ 启用
GZIP压缩：✅ 启用
浏览器缓存：✅ 启用
压缩：✅ 启用（HTML、CSS、JS）
懒加载：✅ 启用

Step 2: Create Row Structure

设计转代码工作流

—

从可视化设计转换

—

步骤1：分析布局结构

[vc_row gap="30px" height="medium"]
  [vc_column width="1/2"]
    <!-- Left content -->
  [/vc_column]
  [vc_column width="1/2"]
    <!-- Right content -->
  [/vc_column]
[/vc_row]

确定：

区块/行的数量
每行的列布局
元素类型（标题、文本、按钮、图片等）
间距与对齐方式
配色方案
排版（尺寸、字重）

Step 3: Add Content Elements

步骤2：创建行结构

Map design elements to Impreza shortcodes:

Headlines →
```
[us_heading]
```
Paragraphs →
```
[us_text]
```
Buttons →
```
[us_btn]
```
Images →
```
[us_image]
```
Icons →
```
[us_icon]
```
or
```
[us_iconbox]
```

[vc_row gap="30px" height="medium"]
  [vc_column width="1/2"]
    <!-- 左侧内容 -->
  [/vc_column]
  [vc_column width="1/2"]
    <!-- 右侧内容 -->
  [/vc_column]
[/vc_row]

Step 4: Apply Styling

步骤3：添加内容元素

Use Design settings for:

Colors:
```
color="primary"
```
or hex values
Spacing:
```
padding="40px"
```
,
```
margin="20px"
```
Backgrounds:
```
bg_color="#f5f5f5"
```
Custom classes:
```
el_class="custom-section"
```

将设计元素映射到Impreza短代码：

标题 →
```
[us_heading]
```
段落 →
```
[us_text]
```
按钮 →
```
[us_btn]
```
图片 →
```
[us_image]
```
图标 →
```
[us_icon]
```
或
```
[us_iconbox]
```

Step 5: Make Responsive

步骤4：应用样式

Add device-specific parameters:

Column widths:
```
width_md="1/2"
```
,
```
width_sm="1/1"
```

Spacing:

padding_tablets="30px"

padding_mobiles="20px"

Visibility:
```
hide_on_mobile="yes"
```

使用设计设置实现：

颜色：
```
color="primary"
```
或十六进制值
间距：
```
padding="40px"
```
,
```
margin="20px"
```
背景：
```
bg_color="#f5f5f5"
```
自定义类：
```
el_class="custom-section"
```

From Figma Design

步骤5：实现响应式

Step 1: Export Design Specs

—

Extract colors (hex values)
Note font sizes and weights
Measure spacing (padding, margins)
Identify breakpoints
Export images in optimal sizes

添加设备专属参数：

列宽：
```
width_md="1/2"
```
,
```
width_sm="1/1"
```

间距：

padding_tablets="30px"

padding_mobiles="20px"

可见性：
```
hide_on_mobile="yes"
```

Step 2: Map Figma Components to Impreza

从Figma设计转换

—

步骤1：导出设计规范

Figma Element	Impreza Shortcode
Frame/Section	`[vc_row]`
Auto Layout	`[vc_column]` with grid
Text heading	`[us_heading]`
Text body	`[us_text]`
Button	`[us_btn]`
Image	`[us_image]`
Icon	`[us_icon]`
Card	`[us_iconbox]` or custom with `[us_hwrapper]`

提取颜色（十六进制值）
记录字体尺寸与字重
测量间距（内边距、外边距）
确定断点
以最佳尺寸导出图片

Step 3: Implement Design System

步骤2：将Figma组件映射到Impreza

Create reusable components:

Define color palette in Theme Options
Set up typography styles
Create button presets
Build section templates

Figma元素	Impreza短代码
帧/区块	`[vc_row]`
自动布局	带网格的 `[vc_column]`
文本标题	`[us_heading]`
正文文本	`[us_text]`
按钮	`[us_btn]`
图片	`[us_image]`
图标	`[us_icon]`
卡片	`[us_iconbox]` 或带 `[us_hwrapper]` 的自定义组件

Step 4: Build Shortcode

步骤3：实现设计系统

[vc_row 
  bg_color="#FFFFFF"
  padding="80px 0"
  padding_tablets="60px 0"
  padding_mobiles="40px 0"
]
  [vc_column width="1/1"]
    [us_heading 
      tag="h2"
      title="Features That Matter"
      size="2.5rem"
      size_tablets="2rem"
      size_mobiles="1.75rem"
      align="center"
      color="#1A1A1A"
      font_weight="700"
    ]
    [us_text 
      text="Discover powerful tools designed for success"
      size="1.125rem"
      align="center"
      color="#666666"
    ]
  [/vc_column]
[/vc_row]

[vc_row 
  gap="30px"
  padding="0 0 80px 0"
]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    [us_iconbox 
      icon="fas|zap"
      title="Lightning Fast"
      style="circle"
      iconpos="top"
      color="primary"
    ]
      Optimized for speed and performance from day one.
    [/us_iconbox]
  [/vc_column]
  <!-- Repeat for other features -->
[/vc_row]

创建可复用组件：

在主题选项中定义调色板
设置排版样式
创建按钮预设
构建区块模板

From Written Description

步骤4：编写短代码

Example Input:

—

"Create a hero section with a large heading, subheading, two CTAs side by side, and a background image with overlay"

[vc_row 
  bg_color="#FFFFFF"
  padding="80px 0"
  padding_tablets="60px 0"
  padding_mobiles="40px 0"
]
  [vc_column width="1/1"]
    [us_heading 
      tag="h2"
      title="重要功能"
      size="2.5rem"
      size_tablets="2rem"
      size_mobiles="1.75rem"
      align="center"
      color="#1A1A1A"
      font_weight="700"
    ]
    [us_text 
      text="专为成功设计的强大工具"
      size="1.125rem"
      align="center"
      color="#666666"
    ]
  [/vc_column]
[/vc_row]

[vc_row 
  gap="30px"
  padding="0 0 80px 0"
]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    [us_iconbox 
      icon="fas|zap"
      title="闪电般快速"
      style="circle"
      iconpos="top"
      color="primary"
    ]
      从第一天起就为速度和性能优化。
    [/us_iconbox]
  [/vc_column]
  <!-- 重复添加其他功能 -->
[/vc_row]

Output Code:

从文字描述转换

—

输入示例：

[vc_row 
  height="large"
  valign="middle"
  bg_image="https://example.com/hero-bg.jpg"
  bg_size="cover"
  bg_attachment="fixed"
  color_scheme="dark"
  parallax="vertical"
  parallax_speed="0.3"
]
  [vc_column width="1/1" align="center"]
    [us_heading 
      tag="h1"
      title="Transform Your Business Today"
      size="3.5rem"
      size_tablets="2.5rem"
      size_mobiles="2rem"
      color="#FFFFFF"
      font_weight="700"
    ]
    [us_text 
      text="Join thousands of companies already succeeding with our platform"
      size="1.25rem"
      color="#FFFFFF"
      margin="0 0 30px 0"
    ]
    [us_hwrapper 
      valign="middle"
      wrap="1"
    ]
      [us_btn 
        text="Get Started Free"
        style="raised"
        color="primary"
        size="large"
        el_class="hero-btn"
      ]
      [us_btn 
        text="Watch Demo"
        style="outlined"
        color="light"
        size="large"
        icon="fas|play"
        el_class="hero-btn"
        margin="0 0 0 20px"
      ]
    [/us_hwrapper]
  [/vc_column]
[/vc_row]

"创建一个英雄区块，包含大标题、副标题、两个并排的CTA按钮，以及带遮罩的背景图片"

Common Patterns & Templates

输出代码：

Hero Section (Full Height with CTA)

—

[vc_row 
  height="full"
  valign="middle"
  bg_image="URL_HERE"
  bg_size="cover"
  color_scheme="dark"
]
  [vc_column width="1/1" align="center"]
    [us_heading 
      tag="h1"
      title="Your Main Headline"
      size="clamp(2rem, 5vw, 4rem)"
      color="#FFFFFF"
    ]
    [us_text 
      text="Compelling subheadline goes here"
      size="1.25rem"
      color="#FFFFFF"
    ]
    [us_btn 
      text="Call to Action"
      style="raised"
      color="primary"
      size="large"
    ]
  [/vc_column]
[/vc_row]

[vc_row 
  height="large"
  valign="middle"
  bg_image="https://example.com/hero-bg.jpg"
  bg_size="cover"
  bg_attachment="fixed"
  color_scheme="dark"
  parallax="vertical"
  parallax_speed="0.3"
]
  [vc_column width="1/1" align="center"]
    [us_heading 
      tag="h1"
      title="立即转型你的业务"
      size="3.5rem"
      size_tablets="2.5rem"
      size_mobiles="2rem"
      color="#FFFFFF"
      font_weight="700"
    ]
    [us_text 
      text="加入数千家已使用我们平台取得成功的企业"
      size="1.25rem"
      color="#FFFFFF"
      margin="0 0 30px 0"
    ]
    [us_hwrapper 
      valign="middle"
      wrap="1"
    ]
      [us_btn 
        text="免费开始使用"
        style="raised"
        color="primary"
        size="large"
        el_class="hero-btn"
      ]
      [us_btn 
        text="观看演示"
        style="outlined"
        color="light"
        size="large"
        icon="fas|play"
        el_class="hero-btn"
        margin="0 0 0 20px"
      ]
    [/us_hwrapper]
  [/vc_column]
[/vc_row]

Feature Grid (3 Columns)

常见模式与模板

—

英雄区块（全高带CTA）

[vc_row gap="30px"]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    [us_iconbox 
      icon="fas|rocket"
      title="Fast Performance"
      iconpos="top"
    ]
      Lightning-fast load times guaranteed.
    [/us_iconbox]
  [/vc_column]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    [us_iconbox 
      icon="fas|shield-alt"
      title="Secure Platform"
      iconpos="top"
    ]
      Enterprise-grade security measures.
    [/us_iconbox]
  [/vc_column]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    [us_iconbox 
      icon="fas|headset"
      title="24/7 Support"
      iconpos="top"
    ]
      Always here when you need us.
    [/us_iconbox]
  [/vc_column]
[/vc_row]

[vc_row 
  height="full"
  valign="middle"
  bg_image="URL_HERE"
  bg_size="cover"
  color_scheme="dark"
]
  [vc_column width="1/1" align="center"]
    [us_heading 
      tag="h1"
      title="你的主标题"
      size="clamp(2rem, 5vw, 4rem)"
      color="#FFFFFF"
    ]
    [us_text 
      text"引人注目的副标题"
      size="1.25rem"
      color="#FFFFFF"
    ]
    [us_btn 
      text="立即行动"
      style="raised"
      color="primary"
      size="large"
    ]
  [/vc_column]
[/vc_row]

Testimonial Section

功能网格（3列）

[vc_row 
  bg_color="#F8F9FA"
  padding="80px 0"
]
  [vc_column width="1/1"]
    [us_heading 
      title="What Our Clients Say"
      align="center"
      size="2.5rem"
    ]
  [/vc_column]
[/vc_row]
[vc_row 
  gap="30px"
  bg_color="#F8F9FA"
  padding="0 0 80px 0"
]
  [vc_column width="1/3" width_md="1/1"]
    [us_testimonial 
      author="John Doe"
      company="Acme Corp"
      rating="5"
    ]
      "Excellent service and outstanding results!"
    [/us_testimonial]
  [/vc_column]
  <!-- Repeat for more testimonials -->
[/vc_row]

[vc_row gap="30px"]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    [us_iconbox 
      icon="fas|rocket"
      title="极速性能"
      iconpos="top"
    ]
      保证闪电般的加载速度。
    [/us_iconbox]
  [/vc_column]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    [us_iconbox 
      icon="fas|shield-alt"
      title="安全平台"
      iconpos="top"
    ]
      企业级安全措施。
    [/us_iconbox]
  [/vc_column]
  [vc_column width="1/3" width_md="1/2" width_sm="1/1"]
    [us_iconbox 
      icon="fas|headset"
      title="7*24支持"
      iconpos="top"
    ]
      随时为你提供帮助。
    [/us_iconbox]
  [/vc_column]
[/vc_row]

Pricing Table (3 Tiers)

客户评价区块

[vc_row gap="30px"]
  [vc_column width="1/3" width_md="1/1"]
    [us_pricing_table 
      title="Starter"
      price="$29"
      period="/month"
      features="10 Users|50GB Storage|Email Support"
      button_text="Get Started"
      button_link="url:signup"
    ]
  [/vc_column]
  [vc_column width="1/3" width_md="1/1"]
    [us_pricing_table 
      title="Professional"
      price="$79"
      period="/month"
      featured="1"
      features="50 Users|500GB Storage|Priority Support|Advanced Analytics"
      button_text="Start Free Trial"
      button_link="url:trial"
    ]
  [/vc_column]
  [vc_column width="1/3" width_md="1/1"]
    [us_pricing_table 
      title="Enterprise"
      price="$199"
      period="/month"
      features="Unlimited Users|Unlimited Storage|24/7 Support|Custom Integration"
      button_text="Contact Sales"
      button_link="url:contact"
    ]
  [/vc_column]
[/vc_row]

[vc_row 
  bg_color="#F8F9FA"
  padding="80px 0"
]
  [vc_column width="1/1"]
    [us_heading 
      title="客户怎么说"
      align="center"
      size="2.5rem"
    ]
  [/vc_column]
[/vc_row]
[vc_row 
  gap="30px"
  bg_color="#F8F9FA"
  padding="0 0 80px 0"
]
  [vc_column width="1/3" width_md="1/1"]
    [us_testimonial 
      author="John Doe"
      company="Acme Corp"
      rating="5"
    ]
      "服务出色，效果显著！"
    [/us_testimonial]
  [/vc_column]
  <!-- 重复添加更多评价 -->
[/vc_row]

Image + Text Split (50/50)

定价表（3档）

[vc_row gap="60px" valign="middle"]
  [vc_column width="1/2" width_md="1/1"]
    [us_image 
      image="IMAGE_ID"
      size="full"
      ratio="16x9"
      has_ratio="1"
    ]
  [/vc_column]
  [vc_column width="1/2" width_md="1/1"]
    [us_heading 
      tag="h2"
      title="Why Choose Us"
      size="2.5rem"
    ]
    [us_text 
      text="We provide innovative solutions that drive real results for your business."
    ]
    [us_btn 
      text="Learn More"
      style="raised"
      color="primary"
    ]
  [/vc_column]
[/vc_row]

[vc_row gap="30px"]
  [vc_column width="1/3" width_md="1/1"]
    [us_pricing_table 
      title="入门版"
      price="$29"
      period="/月"
      features="10用户|50GB存储|邮件支持"
      button_text="开始使用"
      button_link="url:signup"
    ]
  [/vc_column]
  [vc_column width="1/3" width_md="1/1"]
    [us_pricing_table 
      title="专业版"
      price="$79"
      period="/月"
      featured="1"
      features="50用户|500GB存储|优先支持|高级分析"
      button_text="免费试用"
      button_link="url:trial"
    ]
  [/vc_column]
  [vc_column width="1/3" width_md="1/1"]
    [us_pricing_table 
      title="企业版"
      price="$199"
      period="/月"
      features="无限用户|无限存储|7*24支持|自定义集成"
      button_text="联系销售"
      button_link="url:contact"
    ]
  [/vc_column]
[/vc_row]

Blog Post Grid

图片+文字分栏（50/50）

[us_grid 
  post_type="post"
  items_qty="9"
  columns="3"
  columns_tablets="2"
  columns_mobiles="1"
  items_gap="30px"
  img_size="large"
  title_size="1.5rem"
  excerpt_length="20"
  meta="date,author,comments"
  pagination="load_more"
  filter="1"
  filter_taxonomy="category"
]

[vc_row gap="60px" valign="middle"]
  [vc_column width="1/2" width_md="1/1"]
    [us_image 
      image="IMAGE_ID"
      size="full"
      ratio="16x9"
      has_ratio="1"
    ]
  [/vc_column]
  [vc_column width="1/2" width_md="1/1"]
    [us_heading 
      tag="h2"
      title="为什么选择我们"
      size="2.5rem"
    ]
    [us_text 
      text="我们提供创新解决方案，为你的业务带来真实成果。"
    ]
    [us_btn 
      text"了解更多"
      style="raised"
      color="primary"
    ]
  [/vc_column]
[/vc_row]

Contact Section with Form

博客文章网格

[vc_row 
  gap="60px"
  padding="80px 0"
]
  [vc_column width="1/2" width_md="1/1"]
    [us_heading 
      title="Get in Touch"
      size="2.5rem"
    ]
    [us_text 
      text="Have questions? We'd love to hear from you."
    ]
    [us_iconbox 
      icon="fas|phone"
      title="+1 (555) 123-4567"
      iconpos="left"
    ]
    [/us_iconbox]
    [us_iconbox 
      icon="fas|envelope"
      title="info@example.com"
      iconpos="left"
    ]
    [/us_iconbox]
  [/vc_column]
  [vc_column width="1/2" width_md="1/1"]
    [us_cform 
      receiver_email="info@example.com"
      button_text="Send Message"
    ]
  [/vc_column]
[/vc_row]

[us_grid 
  post_type="post"
  items_qty="9"
  columns="3"
  columns_tablets="2"
  columns_mobiles="1"
  items_gap="30px"
  img_size="large"
  title_size="1.5rem"
  excerpt_length="20"
  meta="date,author,comments"
  pagination="load_more"
  filter="1"
  filter_taxonomy="category"
]

Troubleshooting

带表单的联系区块

Common Issues & Solutions

—

Issue: Shortcodes Visible on Frontend

—

Cause: Content not processed by WordPress Solution:

php

// Process shortcodes in custom areas
echo do_shortcode('[your_shortcode]');

[vc_row 
  gap="60px"
  padding="80px 0"
]
  [vc_column width="1/2" width_md="1/1"]
    [us_heading 
      title"联系我们"
      size="2.5rem"
    ]
    [us_text 
      text"有问题？我们很乐意倾听你的声音。"
    ]
    [us_iconbox 
      icon="fas|phone"
      title="+1 (555) 123-4567"
      iconpos="left"
    ]
    [/us_iconbox]
    [us_iconbox 
      icon="fas|envelope"
      title="info@example.com"
      iconpos="left"
    ]
    [/us_iconbox]
  [/vc_column]
  [vc_column width="1/2" width_md="1/1"]
    [us_cform 
      receiver_email="info@example.com"
      button_text="发送消息"
    ]
  [/vc_column]
[/vc_row]

Issue: Columns Not Responsive

故障排除

—

常见问题与解决方案

—

问题：短代码在前端可见

Cause: Missing width parameters for devices Solution: Always add device-specific widths:

[vc_column width="1/3" width_md="1/2" width_sm="1/1"]

原因：内容未被WordPress处理 解决方案：

php

// 在自定义区域处理短代码
echo do_shortcode('[your_shortcode]');

Issue: Background Image Not Showing

问题：列不响应式

Cause: Incorrect image URL or missing row height Solution:

[vc_row 
  bg_image="https://full-url-here.jpg"
  bg_size="cover"
  height="medium"  <!-- Add explicit height -->
]

原因：缺少设备专属宽度参数 解决方案：始终添加设备专属宽度：

[vc_column width="1/3" width_md="1/2" width_sm="1/1"]

Issue: Parallax Not Working

问题：背景图片不显示

Cause: Conflicting CSS or JavaScript Solution:

Clear all caches
Disable conflicting plugins
Check
```
bg_attachment="scroll"
```
is not set

[vc_row 
  parallax="vertical"
  parallax_speed="0.5"
  bg_attachment=""  <!-- Leave empty for parallax -->
]

原因：图片URL错误或未设置行高 解决方案：

[vc_row 
  bg_image="https://完整URL.jpg"
  bg_size="cover"
  height="medium"  <!-- 添加明确高度 -->
]

Issue: Icons Not Displaying

问题：视差效果不生效

Cause: Icon library not loaded Solution: Check Theme Options > Advanced Settings > Icon Sets

☑ Font Awesome 5 Pro (included with Impreza)

原因：CSS或JavaScript冲突 解决方案：

清除所有缓存
禁用冲突插件
检查是否设置了
```
bg_attachment="scroll"
```

[vc_row 
  parallax="vertical"
  parallax_speed="0.5"
  bg_attachment=""  <!-- 留空以启用视差 -->
]

Issue: Custom CSS Not Applying

问题：图标不显示

Cause: Specificity issues or caching Solution:

css

/* Use !important sparingly */
.custom-class {
    color: #FF0000 !important;
}

/* Or increase specificity */
.vc_row .custom-class {
    color: #FF0000;
}

原因：图标库未加载 解决方案：检查主题选项 > 高级设置 > 图标集

☑ Font Awesome 5 Pro（Impreza内置）

Issue: Form Submissions Not Sending

问题：自定义CSS不生效

Cause: Email configuration Solution:

Install WP Mail SMTP plugin
Configure SMTP settings
Test email delivery
Check spam folders

原因：优先级问题或缓存 解决方案：

css

/* 谨慎使用!important */
.custom-class {
    color: #FF0000 !important;
}

/* 或提高优先级 */
.vc_row .custom-class {
    color: #FF0000;
}

Issue: Slow Page Load

问题：表单提交无法发送

Cause: Unoptimized assets Solution:

Enable Disable extra features of WPBakery
Use caching plugin (WP Rocket, Hummingbird)
Optimize images (WebP, compression)
Enable lazy loading
Minimize plugins

原因：邮箱配置问题 解决方案：

安装WP Mail SMTP插件
配置SMTP设置
测试邮箱投递
检查垃圾邮件文件夹

Custom CSS Integration

问题：页面加载缓慢

Adding Custom Styles

—

Global Custom CSS

—

Navigate to Impreza > Theme Options > Custom CSS:

css

/* Custom button hover effect */
.us-btn-container .us-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* Custom heading underline */
.us-heading .us-heading-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-primary);
    margin: 20px auto 0;
}

/* Responsive utilities */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

原因：资源未优化 解决方案：

启用禁用WPBakery额外功能
使用缓存插件（WP Rocket、Hummingbird）
优化图片（WebP、懒加载）
最小化HTTP请求
启用GZIP压缩

Element-Specific CSS

自定义CSS集成

—

添加自定义样式

—

全局自定义CSS

Use

el_class

parameter:

[us_heading 
  title="Custom Styled Heading"
  el_class="custom-heading-style"
]

Then in Custom CSS:

css

.custom-heading-style {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

导航至Impreza > 主题选项 > 自定义CSS：

css

/* 自定义按钮悬停效果 */
.us-btn-container .us-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* 自定义标题下划线 */
.us-heading .us-heading-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--color-primary);
    margin: 20px auto 0;
}

/* 响应式工具类 */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

CSS Variables (Custom Properties)

元素专属CSS

Impreza uses CSS variables for theming:

css

:root {
    --color-primary: #1E88E5;
    --color-secondary: #FF6F00;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --base-padding: 20px;
}

/* Use in elements */
.custom-section {
    padding: calc(var(--base-padding) * 2);
    color: var(--color-primary);
    font-family: var(--font-heading);
}

使用

el_class

参数：

[us_heading 
  title="自定义样式标题"
  el_class="custom-heading-style"
]

然后在自定义CSS中：

css

.custom-heading-style {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Animation Classes

CSS变量（自定义属性）

css

/* Fade in on scroll */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Pulse effect */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-effect {
    animation: pulse 2s infinite;
}

Impreza使用CSS变量进行主题定制：

css

:root {
    --color-primary: #1E88E5;
    --color-secondary: #FF6F00;
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Open Sans', sans-serif;
    --base-padding: 20px;
}

/* 在元素中使用 */
.custom-section {
    padding: calc(var(--base-padding) * 2);
    color: var(--color-primary);
    font-family: var(--font-heading);
}

JavaScript Integration

动画类

Custom JavaScript

—

Add to Impreza > Theme Options > Custom Code > Before </body>:

javascript

<script>
jQuery(document).ready(function($) {
    
    // Smooth scroll to anchor
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        var target = $(this.getAttribute('href'));
        if(target.length) {
            $('html, body').stop().animate({
                scrollTop: target.offset().top - 100
            }, 1000);
        }
    });
    
    // Number counter animation
    $('.us_counter').each(function() {
        var $this = $(this);
        var countTo = $this.attr('data-count');
        $({ countNum: 0 }).animate({
            countNum: countTo
        }, {
            duration: 2000,
            easing: 'swing',
            step: function() {
                $this.text(Math.floor(this.countNum));
            },
            complete: function() {
                $this.text(this.countNum);
            }
        });
    });
    
    // Parallax mouse effect
    $('.parallax-mouse').on('mousemove', function(e) {
        var x = (e.pageX / $(window).width()) - 0.5;
        var y = (e.pageY / $(window).height()) - 0.5;
        $(this).find('.parallax-layer').css({
            'transform': 'translate(' + (x * 30) + 'px, ' + (y * 30) + 'px)'
        });
    });
    
});
</script>

css

/* 滚动时淡入 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* 脉冲效果 */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.pulse-effect {
    animation: pulse 2s infinite;
}

Intersection Observer (Scroll Animations)

JavaScript集成

—

自定义JavaScript

javascript

<script>
// Fade in elements on scroll
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -100px 0px'
};

const observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
        }
    });
}, observerOptions);

document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});
</script>

<style>
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
</style>

添加到Impreza > 主题选项 > 自定义代码 > 结束</body>前：

javascript

<script>
jQuery(document).ready(function($) {
    
    // 平滑滚动到锚点
    $('a[href^="#"]').on('click', function(e) {
        e.preventDefault();
        var target = $(this.getAttribute('href'));
        if(target.length) {
            $('html, body').stop().animate({
                scrollTop: target.offset().top - 100
            }, 1000);
        }
    });
    
    // 数字计数器动画
    $('.us_counter').each(function() {
        var $this = $(this);
        var countTo = $this.attr('data-count');
        $({ countNum: 0 }).animate({
            countNum: countTo
        }, {
            duration: 2000,
            easing: 'swing',
            step: function() {
                $this.text(Math.floor(this.countNum));
            },
            complete: function() {
                $this.text(this.countNum);
            }
        });
    });
    
    // 鼠标视差效果
    $('.parallax-mouse').on('mousemove', function(e) {
        var x = (e.pageX / $(window).width()) - 0.5;
        var y = (e.pageY / $(window).height()) - 0.5;
        $(this).find('.parallax-layer').css({
            'transform': 'translate(' + (x * 30) + 'px, ' + (y * 30) + 'px)'
        });
    });
    
});
</script>

Version Control & Deployment

Intersection Observer（滚动动画）

Export/Import Pages

—

Export Single Page:

—

Edit page in WPBakery Backend Editor
Click "Classic Mode" tab
Copy all shortcode content
Save to version control

javascript

<script>
// 滚动时淡入元素
const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -100px 0px'
};

const observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
            observer.unobserve(entry.target);
        }
    });
}, observerOptions);

document.querySelectorAll('.animate-on-scroll').forEach(el => {
    observer.observe(el);
});
</script>

<style>
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
</style>

Import Page:

版本控制与部署

—

导出/导入页面

—

导出单个页面：

Create new page
Switch to "Classic Mode"
Paste shortcode content
Update to Frontend/Backend editor
Publish

在WPBakery后端编辑器中编辑页面
点击“经典模式”标签
复制所有短代码内容
保存到版本控制系统

Reusable Templates

导入页面：

Create at Templates > Section Templates:

Save frequently used sections
Export/import across sites
Version control JSON exports

创建新页面
切换到“经典模式”
粘贴短代码内容
切换到前端/后端编辑器
发布

Child Theme Development

可复用模板

Always use child theme for customizations:

style.css:

css

/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0.0
*/

functions.php:

php

<?php
add_action('wp_enqueue_scripts', 'impreza_child_enqueue_styles');
function impreza_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'),
        wp_get_theme()->get('Version')
    );
}

// Custom shortcodes
add_shortcode('custom_element', 'custom_element_function');
function custom_element_function($atts) {
    $atts = shortcode_atts(array(
        'title' => 'Default Title',
        'color' => '#000000'
    ), $atts);
    
    return '<div class="custom-element" style="color:' . esc_attr($atts['color']) . '">' 
           . esc_html($atts['title']) 
           . '</div>';
}
?>

在模板 > 区块模板中创建：

保存常用区块
跨站点导出/导入
对JSON导出进行版本控制

Security Best Practices

子主题开发

Sanitization & Escaping

—

Always sanitize user inputs:

php

// Sanitize text input
$clean_text = sanitize_text_field($_POST['input']);

// Sanitize URL
$clean_url = esc_url($_POST['url']);

// Sanitize email
$clean_email = sanitize_email($_POST['email']);

// Escape output
echo esc_html($user_content);
echo esc_attr($attribute_value);
echo esc_url($url);

始终使用子主题进行定制：

style.css:

css

/*
Theme Name: Impreza Child
Template: Impreza
Version: 1.0.0
*/

functions.php:

php

<?php
add_action('wp_enqueue_scripts', 'impreza_child_enqueue_styles');
function impreza_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'),
        wp_get_theme()->get('Version')
    );
}

// 自定义短代码
add_shortcode('custom_element', 'custom_element_function');
function custom_element_function($atts) {
    $atts = shortcode_atts(array(
        'title' => '默认标题',
        'color' => '#000000'
    ), $atts);
    
    return '<div class="custom-element" style="color:' . esc_attr($atts['color']) . '">' 
           . esc_html($atts['title']) 
           . '</div>';
}
?>

Nonce Verification

安全最佳实践

—

清理与转义

php

// Add nonce to form
wp_nonce_field('custom_form_action', 'custom_form_nonce');

// Verify nonce
if (!wp_verify_nonce($_POST['custom_form_nonce'], 'custom_form_action')) {
    wp_die('Security check failed');
}

始终清理用户输入：

php

// 清理文本输入
$clean_text = sanitize_text_field($_POST['input']);

// 清理URL
$clean_url = esc_url($_POST['url']);

// 清理邮箱
$clean_email = sanitize_email($_POST['email']);

// 转义输出
echo esc_html($user_content);
echo esc_attr($attribute_value);
echo esc_url($url);

SQL Injection Prevention

Nonce验证

php

global $wpdb;

// WRONG
$results = $wpdb->get_results("SELECT * FROM table WHERE id = " . $_GET['id']);

// RIGHT
$results = $wpdb->get_results($wpdb->prepare(
    "SELECT * FROM table WHERE id = %d",
    $_GET['id']
));

php

// 向表单添加nonce
wp_nonce_field('custom_form_action', 'custom_form_nonce');

// 验证nonce
if (!wp_verify_nonce($_POST['custom_form_nonce'], 'custom_form_action')) {
    wp_die('安全检查失败');
}

Accessibility (a11y) Guidelines

SQL注入防护

ARIA Labels

—

[us_btn 
  text="Submit"
  aria_label="Submit contact form"
]

[us_icon 
  icon="fas|search"
  aria_label="Search icon"
]

php

global $wpdb;

// 错误写法
$results = $wpdb->get_results("SELECT * FROM table WHERE id = " . $_GET['id']);

// 正确写法
$results = $wpdb->get_results($wpdb->prepare(
    "SELECT * FROM table WHERE id = %d",
    $_GET['id']
));

Keyboard Navigation

无障碍（a11y）指南

—

ARIA标签

Ensure all interactive elements are keyboard accessible:

css

.us-btn:focus,
.us-iconbox:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

[us_btn 
  text="提交"
  aria_label="提交联系表单"
]

[us_icon 
  icon="fas|search"
  aria_label="搜索图标"
]

Color Contrast

键盘导航

Maintain WCAG AA standards (4.5:1 for normal text):

css

/* Good contrast */
.text-primary {
    color: #1E88E5; /* on white background */
}

/* Check contrast ratios at: */
/* https://webaim.org/resources/contrastchecker/ */

确保所有交互元素可通过键盘访问：

css

.us-btn:focus,
.us-iconbox:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

Alt Text for Images

颜色对比度

[us_image 
  image="12345"
  alt="Descriptive alt text for screen readers"
]

遵循WCAG AA标准（常规文本4.5:1）：

css

/* 良好对比度 */
.text-primary {
    color: #1E88E5; /* 在白色背景上 */
}

/* 检查对比度比率： */
/* https://webaim.org/resources/contrastchecker/ */

Semantic HTML

图片替代文本

Use proper heading hierarchy:

[us_heading tag="h1" title="Main Page Title"]
[us_heading tag="h2" title="Section Title"]
[us_heading tag="h3" title="Subsection Title"]

[us_image 
  image="12345"
  alt="供屏幕阅读器使用的描述性替代文本"
]

SEO Optimization

语义化HTML

Schema Markup

—

Impreza includes automatic Schema.org markup. Enhance with custom schemas:

html

[us_html]
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Your Business Name",
  "image": "https://example.com/logo.jpg",
  "@id": "https://example.com",
  "url": "https://example.com",
  "telephone": "+1-555-0123",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "City",
    "addressRegion": "State",
    "postalCode": "12345",
    "addressCountry": "US"
  }
}
</script>
[/us_html]

使用正确的标题层级：

[us_heading tag="h1" title="页面主标题"]
[us_heading tag="h2" title="区块标题"]
[us_heading tag="h3" title="子区块标题"]

Meta Tags

SEO优化

—

Schema标记

Set in Impreza > Theme Options > SEO or use Yoast SEO/Rank Math plugin.

Impreza包含自动Schema.org标记。可通过自定义标记增强：

html

[us_html]
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "你的企业名称",
  "image": "https://example.com/logo.jpg",
  "@id": "https://example.com",
  "url": "https://example.com",
  "telephone": "+1-555-0123",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "123 Main St",
    "addressLocality": "城市",
    "addressRegion": "州",
    "postalCode": "12345",
    "addressCountry": "US"
  }
}
</script>
[/us_html]

Heading Structure

元标签

Maintain proper hierarchy:

One H1 per page (page title)
H2 for main sections
H3 for subsections
Never skip levels

在Impreza > 主题选项 > SEO中设置，或使用Yoast SEO/Rank Math插件。

Performance = SEO

标题结构

Page speed impacts rankings
Use caching, optimization plugins
Optimize images (WebP, lazy load)
Minimize HTTP requests
Enable GZIP compression

保持正确的层级：

每页一个H1（页面标题）
H2用于主区块
H3用于子区块
不要跳过层级

Quick Tips & Tricks

性能 = SEO

1. Copy Sections from Demos

—

Visit Impreza demo sites → Right-click section → Inspect → Find

vc_row

→ Copy entire shortcode → Paste in your page

页面速度影响排名
使用缓存和优化插件
优化图片（WebP、懒加载）
最小化HTTP请求
启用GZIP压缩

2. Use Section Templates

快速技巧与窍门

—

1. 从演示站点复制区块

Save commonly used sections to Templates > Section Templates → Reuse across pages

访问Impreza演示站点 → 右键点击区块 → 检查 → 找到

vc_row

→ 复制整个短代码 → 粘贴到你的页面中

3. Global Color Palette

2. 使用区块模板

Define colors once in Theme Options > Colors → Use across all elements

将常用区块保存到模板 > 区块模板 → 跨页面复用

4. Custom Fonts

3. 全局调色板

Upload WOFF2 fonts at Theme Options > Typography > Uploaded Fonts → Faster than Google Fonts

在主题选项 > 颜色中一次性定义颜色 → 应用到所有元素

5. Sticky Elements

4. 自定义字体

[vc_column el_class="sticky-sidebar"]
  <!-- Sidebar content -->
[/vc_column]

CSS:

css

@media (min-width: 1024px) {
    .sticky-sidebar {
        position: sticky;
        top: 100px;
    }
}

在主题选项 > 排版 > 上传字体中上传WOFF2字体 → 比谷歌字体更快

6. Custom Cursor

5. 粘性元素

css

body {
    cursor: url('cursor.png'), auto;
}
a:hover {
    cursor: url('pointer.png'), pointer;
}

[vc_column el_class="sticky-sidebar"]
  <!-- 侧边栏内容 -->
[/vc_column]

CSS:

css

@media (min-width: 1024px) {
    .sticky-sidebar {
        position: sticky;
        top: 100px;
    }
}

7. Scroll Progress Bar

6. 自定义光标

javascript

<script>
window.addEventListener('scroll', function() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.querySelector('.progress-bar').style.width = scrolled + "%";
});
</script>

<style>
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #f1f1f1;
    z-index: 9999;
}
.progress-bar {
    height: 3px;
    background: var(--color-primary);
    width: 0%;
}
</style>

css

body {
    cursor: url('cursor.png'), auto;
}
a:hover {
    cursor: url('pointer.png'), pointer;
}

8. Lazy Load Background Images

7. 滚动进度条

[vc_row 
  el_class="lazy-bg"
  data-bg="https://example.com/image.jpg"
]

JavaScript:

javascript

document.addEventListener('DOMContentLoaded', function() {
    var lazyBgs = document.querySelectorAll('.lazy-bg');
    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var bg = entry.target.dataset.bg;
                entry.target.style.backgroundImage = 'url(' + bg + ')';
                observer.unobserve(entry.target);
            }
        });
    });
    lazyBgs.forEach(function(bg) {
        observer.observe(bg);
    });
});

javascript

<script>
window.addEventListener('scroll', function() {
    var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
    var scrolled = (winScroll / height) * 100;
    document.querySelector('.progress-bar').style.width = scrolled + "%";
});
</script>

<style>
.progress-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #f1f1f1;
    z-index: 9999;
}
.progress-bar {
    height: 3px;
    background: var(--color-primary);
    width: 0%;
}
</style>

Resources & Documentation

8. 懒加载背景图片

Official Resources

—

Impreza Documentation: https://help.us-themes.com/impreza/
WPBakery Knowledge Base: https://kb.wpbakery.com/
Impreza Support: https://support.us-themes.com/
Changelog: https://help.us-themes.com/impreza/changelog/

[vc_row 
  el_class="lazy-bg"
  data-bg="https://example.com/image.jpg"
]

JavaScript:

javascript

document.addEventListener('DOMContentLoaded', function() {
    var lazyBgs = document.querySelectorAll('.lazy-bg');
    var observer = new IntersectionObserver(function(entries) {
        entries.forEach(function(entry) {
            if (entry.isIntersecting) {
                var bg = entry.target.dataset.bg;
                entry.target.style.backgroundImage = 'url(' + bg + ')';
                observer.unobserve(entry.target);
            }
        });
    });
    lazyBgs.forEach(function(bg) {
        observer.observe(bg);
    });
});

Recommended Plugins

资源与文档

—

官方资源

WP Rocket - Caching & performance
Smush - Image optimization
Yoast SEO / Rank Math - SEO optimization
WP Mail SMTP - Email deliverability
UpdraftPlus - Backups
Wordfence - Security

Impreza文档：https://help.us-themes.com/impreza/
WPBakery知识库：https://kb.wpbakery.com/
Impreza支持：https://support.us-themes.com/
更新日志：https://help.us-themes.com/impreza/changelog/

Learning Resources

Community

学习资源

ThemeForest Comments: Product support & discussion
WordPress.org Forums: General WordPress help
Stack Overflow: Coding questions

WordPress Codex：https://codex.wordpress.org/
WPBakery教程：https://wpbakery.com/features/
Impreza视频教程：内置在主题仪表板中

Best Practices Summary

社区

DO:

—

✅ Use Impreza's performance optimization settings ✅ Always create responsive layouts with device-specific settings ✅ Leverage built-in elements before custom code ✅ Use Live Builder for best performance ✅ Test on multiple devices and browsers ✅ Optimize images before upload ✅ Use caching plugins ✅ Create child theme for customizations ✅ Use section templates for reusable content ✅ Follow semantic HTML structure ✅ Implement proper heading hierarchy ✅ Add alt text to all images ✅ Sanitize all user inputs ✅ Use CSS variables for theming ✅ Document custom code

ThemeForest评论区：产品支持与讨论
WordPress.org论坛：通用WordPress帮助
Stack Overflow：编码问题

DON'T:

最佳实践总结

—

建议：

❌ Load unnecessary Google Fonts ❌ Use inline styles excessively ❌ Forget device-specific responsive settings ❌ Skip image optimization ❌ Use too many heavy plugins ❌ Modify parent theme files directly ❌ Ignore caching configuration ❌ Overcomplicate layouts with excessive nesting ❌ Use outdated PHP functions ❌ Hardcode values that should be dynamic ❌ Ignore accessibility guidelines ❌ Skip security best practices ❌ Forget to test thoroughly before launch

✅ 使用Impreza的性能优化设置 ✅ 始终创建带设备专属设置的响应式布局 ✅ 优先使用内置元素，再考虑自定义代码 ✅ 使用Live Builder以获得最佳性能 ✅ 在多设备和浏览器上测试 ✅ 上传前优化图片 ✅ 使用缓存插件 ✅ 创建子主题进行定制 ✅ 使用区块模板复用内容 ✅ 遵循语义化HTML结构 ✅ 实现正确的标题层级 ✅ 为所有图片添加替代文本 ✅ 清理所有用户输入 ✅ 使用CSS变量进行主题定制 ✅ 记录自定义代码

Conclusion

不建议：

This skill equips you to transform any design—whether described, visual, or from Figma—into production-ready WordPress code using the Impreza theme and WPBakery Page Builder. Follow the patterns, use the comprehensive element library, optimize for performance, and always prioritize responsive design and accessibility.

Remember: Impreza's strength lies in its flexibility and optimization. Use the Live Builder for the best performance, leverage built-in elements, and only use custom code when absolutely necessary.

❌ 加载不必要的谷歌字体 ❌ 过度使用内联样式 ❌ 忘记设置设备专属响应式参数 ❌ 跳过图片优化 ❌ 使用过多重型插件 ❌ 直接修改父主题文件 ❌ 忽略缓存配置 ❌ 过度嵌套使布局复杂化 ❌ 使用过时的PHP函数 ❌ 硬编码应动态设置的值 ❌ 忽略无障碍指南 ❌ 跳过安全最佳实践 ❌ 上线前不进行全面测试

Version History

总结

v1.0.0 (2026-02-19): Initial comprehensive skill release
- Complete element reference
- Responsive design patterns
- Performance optimization
- Design-to-code workflows
- Best practices & security
- 63+ Impreza elements documented
- WPBakery 8.7.2 compatibility
- Impreza 8.43.1 compatibility

此技能让你能够将任何设计——无论是文字描述、可视化设计还是Figma设计——转换为可投入生产的WordPress代码，使用Impreza主题和WPBakery Page Builder。遵循这些模式，使用全面的元素库，优化性能，并始终优先考虑响应式设计和无障碍。

记住：Impreza的优势在于其灵活性和优化能力。使用Live Builder获得最佳性能，充分利用内置元素，仅在绝对必要时使用自定义代码。

—

版本历史

—

v1.0.0（2026-02-19）：初始完整版技能发布
- 完整元素参考
- 响应式设计模式
- 性能优化
- 设计转代码工作流
- 最佳实践与安全
- 63+种Impreza元素文档
- WPBakery 8.7.2兼容性
- Impreza 8.43.1兼容性

impreza-wpbakery-dev

Original

Translation

WordPress Development: Impreza Theme + WPBakery Page Builder

WordPress开发：Impreza主题 + WPBakery Page Builder

Overview

概述

Quick Reference

快速参考

Architecture & Dual Builder System

架构与双构建器系统

Live Builder (Recommended)

Live Builder（推荐使用）

WPBakery Page Builder

WPBakery Page Builder

Core Structure: Rows, Columns & Sections

核心结构：行、列与区块

Row/Section Element (vc_row)

行/区块元素 (vc_row)

Column Layouts (vc_column)

列布局 (vc_column)

Design Settings (Universal)

通用设计设置

Impreza Content Elements (63+ Available)

Impreza内容元素（63+种可用）

Text & Typography

文本与排版

Heading (us_heading)

标题 (us_heading)

Text (us_text)

文本 (us_text)

Message Box (us_message)

消息框 (us_message)

Buttons & CTAs

按钮与CTA

Button (us_btn)

按钮 (us_btn)

Call to Action (us_cta)

呼叫按钮 (us_cta)

Images & Media

图片与媒体

Single Image (us_image)

单张图片 (us_image)

Gallery (us_gallery)

图片集 (us_gallery)

Image Slider (us_image_slider)

图片滑块 (us_image_slider)

Video (vc_video)

视频 (vc_video)

Interactive Elements

交互元素

Accordion (us_accordion)

手风琴 (us_accordion)

Tabs (us_tabs)

标签页 (us_tabs)

Popup (us_popup)

弹窗 (us_popup)

Counters & Progress

计数器与进度条

Counter (us_counter)

计数器 (us_counter)

Progress Bar (us_progbar)

进度条 (us_progbar)

Icons & Iconbox

图标与图标框

Single Icon (us_icon)

单个图标 (us_icon)

Iconbox (us_iconbox)

图标框 (us_iconbox)

Social Links

社交链接

Contact & Forms

联系与表单

Contact Form (us_cform)

联系表单 (us_cform)

Google Maps (us_gmaps)

Contact Form 7集成：

Testimonials

谷歌地图 (us_gmaps)

Person Card (us_person)

Row/Section Element (
`vc_row`
)

行/区块元素 (
`vc_row`
)

Column Layouts (
`vc_column`
)

列布局 (
`vc_column`
)

Heading (
`us_heading`
)

标题 (
`us_heading`
)

Text (
`us_text`
)

文本 (
`us_text`
)

Message Box (
`us_message`
)

消息框 (
`us_message`
)

Button (
`us_btn`
)

按钮 (
`us_btn`
)

Call to Action (
`us_cta`
)

呼叫按钮 (
`us_cta`
)

Single Image (
`us_image`
)

单张图片 (
`us_image`
)

Gallery (
`us_gallery`
)

图片集 (
`us_gallery`
)

Image Slider (
`us_image_slider`
)

图片滑块 (
`us_image_slider`
)

Video (
`vc_video`
)

视频 (
`vc_video`
)

Accordion (
`us_accordion`
)

手风琴 (
`us_accordion`
)

Tabs (
`us_tabs`
)

标签页 (
`us_tabs`
)

Popup (
`us_popup`
)

弹窗 (
`us_popup`
)

Counter (
`us_counter`
)

计数器 (
`us_counter`
)

Progress Bar (
`us_progbar`
)

进度条 (
`us_progbar`
)

Single Icon (
`us_icon`
)

单个图标 (
`us_icon`
)

Iconbox (
`us_iconbox`
)

图标框 (
`us_iconbox`
)

Contact Form (
`us_cform`
)

联系表单 (
`us_cform`
)

Google Maps (
`us_gmaps`
)

谷歌地图 (
`us_gmaps`
)

Person Card (
`us_person`
)

个人卡片 (
`us_person`
)

Separator (
`us_separator`
)

Vertical Wrapper (
`us_hwrapper`
)

分隔符 (
`us_separator`
)

Vertical Wrapper (
`us_vwrapper`
)

水平容器 (
`us_hwrapper`
)

垂直容器 (
`us_vwrapper`
)

Post Grid (
`us_grid`
)

文章网格 (
`us_grid`
)

Post List (
`us_post_list`
)

User List (
`us_user_list`
)

文章列表 (
`us_post_list`
)

用户列表 (
`us_user_list`
)

Single Product (
`us_single_product`
)

单个产品 (
`us_single_product`
)

Reusable Blocks (
`us_page_block`
)

可复用区块 (
`us_page_block`
)