JustNews主题设置宽屏BANNER(全宽/宽屏横幅)的方法:

JustNews主要通过幻灯片可视化编辑器专题Banner实现宽屏效果。下面是具体操作:

1. 首页幻灯片设置为宽屏(最常用)

  1. 后台进入 主题设置 > 首页设置
  2. 在 幻灯图片 模块中添加图片:
    • 上传大尺寸横幅图(推荐 1920px 宽度 或更大,高度 400-600px 左右)。
    • 设置标题、链接。
  3. 保存后,幻灯片默认会全宽/宽屏显示(主题响应式设计,PC端会拉满宽度)。

提示:如果想更灵活,切换到自定义首页(可视化编辑器)添加焦点图/轮播模块,里面可以直接控制宽度为全宽。

2. 使用可视化编辑器添加宽屏Banner(推荐,最灵活)

JustNews 5.0+ 支持强大可视化编辑器:

  1. 主题设置 > 首页设置,切换到可视化编辑器模式。
  2. 拖拽添加 图片模块Banner模块 或 焦点图模块
  3. 在模块设置中:
    • 选择 全宽/宽屏布局(或 Container 设置为 Full Width)。
    • 上传大图作为背景或图片。
    • 可添加文字、按钮、链接等。
  4. 保存并预览。

参考官方可视化编辑器教程:https://www.wpcom.cn/docs/themer/visual-editor.html

3. 专题页顶部宽屏Banner

  • 进入 文章 > 专题,新建或编辑专题。
  • 上传 Banner图片(大尺寸横幅)。
  • 设置 Banner高度 和 Banner文字颜色
  • 该Banner会在专题列表顶部以宽屏形式显示。

4. 其他位置添加宽屏Banner

  • 顶部/头部:通过 主题设置 > 头部设置 或高级菜单添加图片。
  • 自定义页面:新建页面 → 使用可视化编辑器或 Gutenberg 编辑器插入全宽图片区块(Align → Full Width)。
  • 全局CSS调整(如果默认不是全宽): 在 外观 > 自定义 > 附加CSS 添加:
    .banner, .slider, .home-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: auto;
        margin-right: auto;
    }

注意事项

  • 图片尺寸:宽屏Banner建议 1920px+ 宽度,高度根据需要(避免过高影响加载)。
  • 缓存:修改后清缓存 + Ctrl+F5 硬刷新。
  • 移动端:主题自适应,但大图在手机上会自动缩放,建议测试效果。
  • 如果首页是默认首页,优先在首页设置里调整;如果是自定义首页,用可视化编辑器更自由
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。