Skip to content

领航主题卡片内容区块如何从3列改为4列

领航主题的卡片内容区块默认在页面上以3列显示,这对于大多数企业展示产品、服务或案例来说已经足够。但如果你希望在首页或内页同时展示更多信息,例如4项核心业务、4个产品系列或4个优势亮点,将卡片列数改为4列会让页面布局更紧凑、信息密度更高。

得益于领航主题基于Gutenberg块构建的灵活架构,你不需要写一行代码就能完成这个调整。下面我带你用三步操作完成。

操作步骤

  1. 新建页面,添加卡片内容区块样板
    在后台新建一个页面,点击“添加区块样板”,从领航主题提供的企业级样板库中找到“卡片内容”(Content Card)并插入页面。插入后,选择“编辑样板”进入详细编辑界面。
  2. 复制一个卡片,生成第4个卡片
    在编辑器中,找到包含3个卡片的“组”(Group)块。点击该组右上角的三个点(更多选项),选择“创建副本”。这样你就得到了一个新的组,里面同样包含3个卡片。现在你有了6个卡片,但我们需要的是4个卡片一行,所以下一步是关键。
  3. 修改CSS类,将列数从3改为4
    点击上一级组(即包含所有卡片的大容器),在右侧区块面板中找到“高级”选项卡下的“CSS类”输入框。在这里输入 columns-4(如果默认是 columns-3,直接替换即可)。保存并退出编辑,预览页面就会发现卡片已经自动排成4列了。

图文示例

另外,领航主题还提供了超过40个企业级区块样板,欢迎在主题选项和演示页面中深入了解。

为什么选择4列卡片?

  • 信息更丰富:在首屏展示4个核心卖点,用户一目了然。
  • 对称美观:4列在宽屏设备上能形成均匀的网格,视觉平衡感强。
  • 适配多种内容:适用于产品系列、服务项目、案例展示、团队介绍等场景。

领航主题的卡片区块内置了响应式设计,改成4列后,在手机和平板上会自动调整为2列或单列,无需额外设置。这正是轻量WordPress企业主题的灵活之处——用Gutenberg块快速搭建符合业务需求的页面。

如果你正在为制造业、外贸公司搭建官网,需要快速生成专业、多语言的企业站点,不妨试试领航主题。除了卡片区块,你还将获得博客、产品、案例等模板,以及内置的SEO优化和速度优化功能。

总结一下:通过复制卡片组并修改CSS类,你可以在领航主题中轻松实现4列卡片布局。希望这个简单的教程能帮你做出更高效的工业制造业企业官网。

想了解更多领航主题的建站技巧?欢迎查看我们的博客文章,持续更新企业建站实战内容。