Astra 主题容器布局优化:全面升级的设计选项与灵活配置

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 都为站点提供了高效、灵活的设计方案。通过这些设置,用户可以轻松实现视觉统一和独特的网页风格。

相关文章

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注