Astra 主题近期更新了容器布局选项,简化了原有的选择,并增加了更多的自定义功能。通过提供不同的布局选项,Astra 让用户能够根据需求轻松地创建视觉冲击力强、功能丰富的网站页面。
新增容器布局选项
Astra 之前的五种容器布局被精简为三种,分别是:
1. Normal(标准宽度)
容器宽度为 1200px
适合大多数网站,提供均衡的布局效果,能够清晰地展示内容。
2. Narrow(窄版布局)
容器宽度为 750px
适用于内容较少或需要紧凑设计的页面,带来精致、集中的视觉效果。
3. Fullwidth(全宽布局)
容器宽度为 100%,覆盖整个浏览器窗口。
适合视觉效果强烈的页面,能够提供更为广阔的展示空间。
设置容器布局
容器布局可以通过全局设置或页面设置来调整:
全局设置
在 外观 > 自定义 > 全局 > 容器 中选择适用于整个网站的布局类型,设置为默认布局。
页面设置
每个页面也可以独立设置布局。页面设置优先于全局设置。例如,如果全局设置为全宽布局,但某页面设置为窄版布局,最终页面将应用窄版布局。
修改页面设置
编辑页面时,点击页面右上角的 Astra 图标进入设置,选择合适的容器布局。
组合侧边栏样式与容器布局
Astra 允许用户结合容器布局和侧边栏样式进行设计。比如:
选择“Normal”布局,并将“容器样式”设置为“Boxed”,再将“侧边栏样式”设置为“Unboxed”。
这种组合提供了极大的灵活性,能够根据需求调整页面的结构和外观。
全宽布局(Full Width Layout)
全宽布局旨在提供更具沉浸感和空间感的设计。其容器宽度为 100%,内容将无缝覆盖整个浏览器窗口。
特点:
整个页面内容会扩展到浏览器的全宽,适合需要大面积展示内容的页面。
为用户提供更加宽广的视觉体验,适合创意网站或视觉效果突出的网站。
设置路径:
进入 WordPress 后台,依次进入:外观 > 自定义 > 全局 > 容器
页面设置与全局设置:
在全局设置中选择布局,适用于整个网站。
如果需要为特定页面应用不同布局,可以在页面设置中进行调整。页面设置优先级更高,因此,页面设置将覆盖全局设置。
在编辑页面时,点击页面右上角的 Astra 图标,进入设置面板,选择适合的容器布局。
内容盒装布局(Content Boxed Layout)
内容盒装布局适用于需要突出显示网站内容区域的场景,如博客和内容导向型网站。
特点:
只有主容器(Primary Container)采用盒装格式,内容区域呈现固定宽度。
侧边栏容器(Secondary Container)保持原样,背景为纯色。
适合希望内容区域更为突出的页面,侧边栏不占据页面主要视觉。
设置路径:
进入 WordPress 后台,依次进入:外观 > 自定义 > 全局 > 容器
其他说明:
可以为特定页面或文章设置内容盒装布局,通过页面的Meta 设置进行单独配置。
容器的宽度依赖于站点布局设置,可根据需要调整。
如果使用 Astra Pro 插件,还可以在 颜色与背景模块 中找到更多设置选项,如背景色的自定义。若没有 Astra Pro 插件,也可以通过 自定义 CSS 添加背景图。
结论
Astra 主题的容器布局优化为网站设计提供了更多的可能性,从全局设置到页面独立设置,用户可以根据不同的内容展示需求选择合适的布局方式。无论是标准、窄版还是全宽布局,甚至是内容盒装布局,Astra 都为站点提供了高效、灵活的设计方案。通过这些设置,用户可以轻松实现视觉统一和独特的网页风格。