文章分类: Zalify Theme - Zalify 主题

怎么使用 Custom CSS 调整产品标题的字号?

这篇文档教你使用 Custom CSS 去修改几乎所有你可以修改的网站样式


例子:怎么调整产品标题的字号?


  1. 在产品页模板里面的 -> product page -> Custom CSS




  1. 加上这段代码


.product-meta__title {
font-size: 20px;
}


  1. 保存


举一反三,给别的页面元素做一些样式调整


这个需要懂一些 HTML/CSS 的知识,可以在 https://www.w3schools.com/css 这里免费学习


打开开发者调试工具,使用快捷键 Ctrl+Shift+I 或 F12(Windows)或 Cmd+Opt+I(Mac)



  • 虚线箭头:元素选择器,用来选取页面的某个元素
  • 电脑手机:设备模拟器,用来模拟各种手机端设备
  • Elements:页面元素内容,也是 HTML 的内容


点击虚线箭头,然后鼠标移动到某个页面元素上,你就能看到在一个浮窗中显示你当前鼠标对应位置的元素信息



把开发者工具当做一个样式调试工具


如果我们希望标题的下方空间更小,这里我们修改它的 margin-bottom


  1. 选中标题后,在 Elements 里面的右侧配置栏可以找到一个 ➕ 加号图标
  2. 当你选中了某个元素的情况下,点击➕会直接出现一段代码


  1. 你在大括号里面的区域即可开始编辑代码




  1. 要标题修改下方空间,这里需要修改 margin-bottom 属性,直接写 margin-bottom: 10px


  1. 把这段代码完整的复制到 product page -> Custom CSS 里面,保存。


原理大概是这样,但是需要大量 CSS 的基础知识和实践,有很复杂的需求建议不要自己操作,可以购买我们的定制服务 25 美金/小时

更新于: 13/09/2024

这篇文章有帮助吗?

分享您的反馈意见

取消

谢谢!