# 57 个短代码与元素

URL: https://canvaswp.com/zh-hans/templates/shortcodes/
Updated: 2026-11-03

模板

Canvas 随附的每个内容元素都有各自的页面，所有变体集中展示，让您在动手搭建前即可查看各种选项。

[打开在线展示](https://demos.canvaswp.com/classic/) [浏览演示站点](https://canvaswp.com/zh-hans/demos/)

更新于 2026年11月3日

- [动画 （在新标签页中打开）](https://demos.canvaswp.com/classic/animations/)
- [按钮 （在新标签页中打开）](https://demos.canvaswp.com/classic/buttons/)
- [轮播 （在新标签页中打开）](https://demos.canvaswp.com/classic/carousel/)
- [Clients （在新标签页中打开）](https://demos.canvaswp.com/classic/clients/)
- [分栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/columns-grids/)
- [计数器 （在新标签页中打开）](https://demos.canvaswp.com/classic/counters/)
- [Read More （在新标签页中打开）](https://demos.canvaswp.com/classic/read-more/)
- [Ticker （在新标签页中打开）](https://demos.canvaswp.com/classic/ticker/)
- [购物车数量 （在新标签页中打开）](https://demos.canvaswp.com/classic/cart-quantity/)
- [视差元素 （在新标签页中打开）](https://demos.canvaswp.com/classic/parallax-elements/)
- [分隔线 （在新标签页中打开）](https://demos.canvaswp.com/classic/dividers/)
- [Icon Boxes （在新标签页中打开）](https://demos.canvaswp.com/classic/featured-boxes/)
- [画廊 （在新标签页中打开）](https://demos.canvaswp.com/classic/gallery/)
- [标题样式 （在新标签页中打开）](https://demos.canvaswp.com/classic/headings-dropcaps/)
- [图标列表 （在新标签页中打开）](https://demos.canvaswp.com/classic/icon-lists/)
- [渐变 （在新标签页中打开）](https://demos.canvaswp.com/classic/gradients/)
- [灯箱 （在新标签页中打开）](https://demos.canvaswp.com/classic/lightbox/)
- [项目覆盖层 （在新标签页中打开）](https://demos.canvaswp.com/classic/item-overlays/)
- [表单元素 （在新标签页中打开）](https://demos.canvaswp.com/classic/form-elements/)
- [文件上传 （在新标签页中打开）](https://demos.canvaswp.com/classic/component-uploads/)
- [Circle Stack （在新标签页中打开）](https://demos.canvaswp.com/classic/circle-stack/)
- [Video Facade （在新标签页中打开）](https://demos.canvaswp.com/classic/video-facade/)
- [滚动元素 （在新标签页中打开）](https://demos.canvaswp.com/classic/scroll-elements/)
- [Lists & Cards （在新标签页中打开）](https://demos.canvaswp.com/classic/lists-cards/)
- [地图 （在新标签页中打开）](https://demos.canvaswp.com/classic/maps/)
- [媒体嵌入 （在新标签页中打开）](https://demos.canvaswp.com/classic/media-embeds/)
- [弹出框 （在新标签页中打开）](https://demos.canvaswp.com/classic/modal-popovers/)
- [通知 （在新标签页中打开）](https://demos.canvaswp.com/classic/notifications/)
- [Pagination （在新标签页中打开）](https://demos.canvaswp.com/classic/pagination-progress/)
- [进度与技能 （在新标签页中打开）](https://demos.canvaswp.com/classic/progress-skills/)
- [Shape Dividers （在新标签页中打开）](https://demos.canvaswp.com/classic/shape-dividers/)
- [Cascading Images （在新标签页中打开）](https://demos.canvaswp.com/classic/cascading-images/)
- [代码高亮器 （在新标签页中打开）](https://demos.canvaswp.com/classic/code-highlighter/)
- [媒体操作 （在新标签页中打开）](https://demos.canvaswp.com/classic/media-actions/)
- [定价卡片 （在新标签页中打开）](https://demos.canvaswp.com/classic/pricing/)
- [Process Steps （在新标签页中打开）](https://demos.canvaswp.com/classic/process-steps/)
- [宣传框 （在新标签页中打开）](https://demos.canvaswp.com/classic/promo-boxes/)
- [引用 （在新标签页中打开）](https://demos.canvaswp.com/classic/quotes-blockquotes/)
- [图片滑块 （在新标签页中打开）](https://demos.canvaswp.com/classic/image-sliders/)
- [板块 （在新标签页中打开）](https://demos.canvaswp.com/classic/sections/)
- [Social Icons （在新标签页中打开）](https://demos.canvaswp.com/classic/social-icons/)
- [悬停动画 （在新标签页中打开）](https://demos.canvaswp.com/classic/hover-animations/)
- [AJAX Button （在新标签页中打开）](https://demos.canvaswp.com/classic/ajax-button/)
- [条件表单 （在新标签页中打开）](https://demos.canvaswp.com/classic/conditional/)
- [预加载器 （在新标签页中打开）](https://demos.canvaswp.com/classic/preloaders/)
- [提示框 （在新标签页中打开）](https://demos.canvaswp.com/classic/style-boxes/)
- [样式图标 （在新标签页中打开）](https://demos.canvaswp.com/classic/styled-icons/)
- [表格 （在新标签页中打开）](https://demos.canvaswp.com/classic/tables/)
- [Tabs （在新标签页中打开）](https://demos.canvaswp.com/classic/tabs/)
- [客户评价 （在新标签页中打开）](https://demos.canvaswp.com/classic/testimonials-twitter/)
- [缩略图 （在新标签页中打开）](https://demos.canvaswp.com/classic/thumbnails-slider/)
- [切换开关 （在新标签页中打开）](https://demos.canvaswp.com/classic/toggles-accordions/)
- [懒加载 （在新标签页中打开）](https://demos.canvaswp.com/classic/lazy-loading/)
- [Flip Cards （在新标签页中打开）](https://demos.canvaswp.com/classic/flip-cards/)
- [模式切换器 （在新标签页中打开）](https://demos.canvaswp.com/classic/color-mode-switcher/)
- [自定义光标 （在新标签页中打开）](https://demos.canvaswp.com/classic/custom-cursor/)
- [Image Compare （在新标签页中打开）](https://demos.canvaswp.com/classic/image-compare/)

每个链接都会打开线上展示站点中的真实页面，这些页面由您安装的同一套主题和区块呈现。

哪个区块

## 每个元素背后的区块

每个元素页面并排展示一个或多个 Canvas 区块及其变体。找到所需元素，插入其下方标注的区块，变体则是该区块面板中的设置项。

- **按钮**
   Button, Page Title Buttons
- **轮播**
   Carousel, Product Carousel
- **Clients**
   Clients
- **分栏**
   Column, Row
- **计数器**
   Countdown, Counter
- **Read More**
   Read More
- **Ticker**
   Ticker
- **购物车数量**
   Quantity Input
- **视差元素**
   Parallax Image
- **分隔线**
   Divider
- **Icon Boxes**
   Icon Box
- **画廊**
   Gallery
- **标题样式**
   Dropcap, Heading, Text Rotator
- **图标列表**
   Icon List
- **项目覆盖层**
   Overlay Content, Overlay Item
- **表单元素**
   Form Field
- **Circle Stack**
   Circle Stack
- **Lists & Cards**
   Link Tiles, Lists & Cards
- **地图**
   Map
- **媒体嵌入**
   Media Embed
- **弹出框**
   Modal
- **通知**
   通知
- **Pagination**
   Pagination
- **进度与技能**
   Progress Bar
- **Shape Dividers**
   Plain Image, Shape Divider
- **Cascading Images**
   Cascading Images
- **代码高亮器**
   Code Highlight
- **媒体操作**
   Background Video / Audio
- **定价卡片**
   Inline SVG, Pricing Switcher, Pricing Table
- **Process Steps**
   Process Steps
- **宣传框**
   Promo Box
- **引用**
   引言
- **图片滑块**
   Image Slider
- **板块**
   Hero, Wrapper
- **Social Icons**
   Social Icons
- **AJAX Button**
   AJAX Button
- **预加载器**
   Preloader
- **提示框**
   Alert
- **样式图标**
   Styled Icon
- **Tabs**
   Tabs
- **客户评价**
   客户评价
- **切换开关**
   Accordion, Toggle
- **Flip Cards**
   Flip Card
- **Image Compare**
   Image Compare

共享设置

## 每个元素自带的功能

### 高级面板

Canvas 会为站点上的每种区块类型添加同一个高级面板，包括核心区块和其他插件的区块：入场和离场动画、仅作用于该区块的自定义 CSS、自定义属性，以及按用户角色或设备设置的显示条件。“动画”页面展示的就是这一面板的实际效果。

### 默认设置与全局样式

按照品牌需要设置按钮，并将这些设置保存为默认值，之后插入的新按钮将自动沿用。全局样式是一组设置，您可以将其应用于整个网站，并日后在一处统一修改。

### 免费与高级内容，同属一个套餐

Canvas 共 314 个区块，其中 228 个免费，86 个为高级区块。每个套餐均包含全部区块，因此本页上的任何元素都无需升级即可使用。

- [完整区块库](https://canvaswp.com/zh-hans/blocks/)

### 为什么菜单显示“短代码”

展示页沿用了 Canvas HTML（这些页面所参照的模板）的菜单名称，其中“短代码”是该菜单对元素页面的称呼，因此使用过 HTML 模板的人能在预期的位置找到每个页面。在 Canvas for WordPress 中，它们都不是短代码。每个元素都是一个已注册的区块，其选项位于侧边栏中，并以标准区块标记保存，无需记住带方括号的标签。

- [从 Canvas HTML 迁移的内容](https://canvaswp.com/zh-hans/canvas-html-to-wordpress/)

更多模板

## 模板库中的其余内容

- [页面模板 13](https://canvaswp.com/zh-hans/templates/page-templates/)
- [作品集布局 27](https://canvaswp.com/zh-hans/templates/portfolio/)
- [博客布局 35](https://canvaswp.com/zh-hans/templates/blog/)
- [商店布局 9](https://canvaswp.com/zh-hans/templates/shop/)