页面设计备忘录 — Kadence模板

1、定制化CSS — 容器尺寸控制

1.0、注意:PC端、移动端的页面主容器不要加CSS,使用页面参数进行调整,主容器内的其他容器,可使用以下参数调整

1.1、“行”容器:page-shell
作用:主容器,左右留白,防止贴边,防止100%爆宽

1.2、内部布局 Row容器:inner-full-row
作用:防止 Kadence 自动按内容宽度收缩(shrink),真正撑满父容器

1.3、列宽控制:col-20,col-25,col-30,col-33,col-40,col-50,col-60,col-66,col-70,col-75,col-80,col-100
作用:控制列宽占父容器比例(%)

1.4、高度控制:h-300,h-400,h-500,h-600
作用控制容器高度(px)

1.5、布局控制:flex-center
作用:水平 + 垂直居中

1.6、布局控制:flex-between
作用:左右两端自动拉开(分布居中)
1.7、布局控制:flex-column
作用:元素纵向排列

1.8、间距控制:gap-10,gap-20,gap-30,gap-40
作用:间距控制(px)

1.9、多参数应用中间以空格隔开
如:h-300 col-25 page-shell

2、定制化CSS — 其他

2.1、响应式控制:desktop-only,mobile-only
作用:用来控制某个元素是PC端显示,还是移动端显示

2.2、悬浮卡样式:bd-support-card
作用:使容器出现黄底色的悬浮卡风格(右下投影)