网站搭建

站点和页面布局 |🛠️

全面介绍 Cargo 网站和页面布局设计方法

Cargo 中文网用户福利

我们为中文用户整理了 Cargo 会员折扣购买方案,适合准备订阅或续费 Cargo 的用户。

查看 Cargo 会员优惠

所有合集

站点建置站点和页面的布局主要由以下两个菜单控制:默认页面设置本地页面设置。默认页面设置适用于站点的所有页面;本地页面设置会覆盖单个页面的默认设置。

默认页面设置

默认页面设置适用于所有页面,包括新创建的页面,除非某个页面应用了本地页面设置。

本地页面设置

本地页面设置仅适用于当前页面,并会覆盖默认页面设置。复制带有本地页面设置的页面时,这些设置会保留下来。

当某个设置在本地被修改时,会显示一个红色的菱形标记⬥,表示该设置与默认设置不同。要重置,点击该菱形标记即可。

背景颜色

背景颜色的控制项存在于默认本地两种设置菜单中。页面背景控制整个页面的背景颜色(可以在单独的页面上覆盖),而内容背景仅设置页面宽度所限定区域的背景颜色。内容背景位于页面背景之上,当颜色不透明度改变时,两者可以相互叠加,产生不同的视觉效果。

与其他这些设置一样,默认页面设置中的背景选项适用于站点的每个页面,而本地页面设置中的背景选项仅适用于当前页面。要移除背景颜色,打开颜色选择器,然后点击带有红色斜线的方格。

边框边框可以在站点级别和页面级别应用。同样,这些边框可以在单个页面上进行本地覆盖。页面边框为每个页面单独添加边框,包括与其他页面相邻显示的页面(当页面被固定(Pinned)堆叠(Stacked)时),而站点边框应用于整个站点,环绕着站点中的所有页面。

每个边框菜单都有“宽度”(Width)和“圆角”(Radius)选项。点击“···”图标可以单独调整“上”(Top)、“右”(Right)、“下”(Bottom)和“左”(Left)四个方向的属性。

图层效果

图层效果菜单(在本地页面设置中)包含用于调整页面与其下方页面在视觉上的交互效果的选项。这些效果可用于被固定(Pinned)叠加(Overlaid)或具有背景(Backdrop)或背景颜色的页面。

点击此处阅读有关图层效果的更多信息

  • --

其他站点范围的选项可在“站点设置”菜单中找到:

图像设置

图像设置菜单包含更改图像默认显示方式的选项(这些设置可以在单个图像上进行覆盖)。

在大多数情况下,图像不允许超出其容器的宽度。其容器始终是由列(Columns)、图库(Gallery)或页面组成。因此,如果页面宽度是 100%,图像也会是 100%。当图像被添加到一组列或一个图库时,它会根据相应功能配置的设置缩放至指定宽度。

  • 按宽度缩放(Scale by Width):图像被限制在选定的宽度内,高度会根据比例自动调整。
  • 按高度缩放(Scale by Height):图像会扩展至其容器的宽度,但高度被限制在选定的值。这对于小型图像(如图标或徽标)非常有用。
  • 缩放填充(Scale to Fit):图像会缩放至视口可用尺寸的某个百分比。

其他图像效果,如边框(Border)和阴影(Drop Shadow),也可以在此处应用(同样,可以通过右键单击图像并打开效果(Effects)菜单来覆盖单个图像的设置)。

点击此处阅读有关图像的更多信息

快速查看设置

点击此处阅读有关快速查看(Quick View)的更多信息

活动链接

当使用文本链接进行站点导航时,可以对这些链接进行样式设置,以指示当前所在的页面。可以选择一种颜色,或点击“</>”图标添加诸如加粗(font-weight: bold;)和下划线(text-decoration: underline;)等其他样式。默认情况下,指向“首页”(Home)的链接不包含在内。勾选“应用于首页链接”(Apply to Home link)选项即可将其包含在内。

颜色滤镜

颜色滤镜会添加一个叠加层,应用于所有站点内容,包括图像、文本和视频等。这可用于微妙地调整整体配色方案:使其柔和、增强、反相或变为单色。