本页的内容

样式管理器允许您自定义您的网站的外观和感觉而不写入任何代码 。 点击您在网站上看到的任何元素并更改其颜色、字体、间隔、阴影等。 您可以为光模式和暗模式创建不同的样式,测试移动设备上事物的外观,并将更改应用到特定的页面或整个站点.

把它想成一个坐在你网站顶端的视觉编辑器,让你指向并点击,让设计立刻改变.

[相克:翻出一页.

如何来到这里

导航到 行政小组 > 模板 > 样式管理器

理解此页

当您第一次打开样式管理器时,您将看到两个主要区域并列:

左面板:样式编辑器

这是您的控制面板, 有不同样式选项的七个标签 :

• 颜色 - 文本颜色和背景(包括梯度)
• 类型 - 字体、大小和文本格式
• 间距 - 铺垫和边际
• 边框 - 边框样式、宽度、颜色和阴影
• 版式 - 显示设置、定位和弹性框
• 效果 - 不透明、变形和过滤器
• 大小 - 宽度、高度和宽度比率

当您在您的站点上选择一个元素时, 此面板会显示当前样式, 让您更改它们 。

右面板: 现场预览

在预览窗口中显示您实际的网站 。 你可以这样:

• 导航到不同的页面
• 单击元素来选择和样式
• 在桌面、平板电脑和移动视图之间切换
• 在光和暗模式之间切换
• 看到你的改变,当你做他们

顶端控件

标题栏包括:

• 轻模式/ 暗模式 按钮 - 选择您正在编辑的模式
• 全部保存 - 保存所有样式变化
• 全部重置 - 删除所有自定义样式并开始新的

共同任务

如何样式元素

这是你用来完成所有造型任务的基本工作流程。

1. 点击 编辑模式 按钮。
2. 屏幕上方出现绿色"编辑模式活性"指示器.
3. 将鼠标移动到预览中的元素上 - 它们会用蓝色的大纲突出显示 。
4. 单击一个元素来选择它。
5. 您可以在左面板上方看到关于选定元素的信息 。
6. 使用标签( Colors, Ttypography等)来改变其外观 。
7. 注意您的更改立即出现在预览中 。
8. 当你对变化感到高兴时,点击 保存更改 在左面板下方。

[出:选-并-编-取].

如何改变颜色

在选择元素后 :

1. 点击 颜色 选项卡。
2. 扩展 文本颜色 以修改文本颜色。
3. 单击颜色表(彩色平方)打开取色器。
4. 在文本字段中选择颜色或键入十六进制码.
5. 元素在预览中立即更新 。

要改变背景 :

1. 在那个 颜色 选项卡,扩展 背景情况 节。
2. 选择 固态 用于单一颜色或 渐变 为了一种颜色混合。
3. 对于固态背景,单击颜色表并选择颜色。
4. 检查 透明 如果你根本不想要背景的话。

[相克相克:取色相相相克相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相

如何创建渐变背景

渐变将多种颜色平稳地融合在一起.

1. 选择您的元素并跳转到 颜色 选项卡。
2. 扩展 背景情况 并单击 渐变 按钮。
3. 点击 8 个方向按钮中的一个选择方向( 或输入自定义角度) 。
4. 你会看到至少两个颜色站。 点击每个颜色表选择颜色 。
5. 调整位置滑动器( 0- 100% ) 以控制每个颜色出现的地方 。
6. 点击 + 添加停止 用于在梯度中添加更多颜色。
7. 点击颜色站旁边的 X 按钮将其删除( 您必须至少保留 2 个) 。
8. 修改时注意梯度预览栏的更新。

[弹出:梯度-建

如何更改字体和文字

选择文本或带有文本的任何元素后 :

1. 点击 类型 选项卡。
2. 扩展 字体家族大小( S)。 。 。 。
3. 从中选择字体 字体家族 下降(Roboto、Inter、蒙特塞拉特等)。
4. 设定 字体大小 使用数字输入并选择单位(px、rem、em或%)。
5. 选择一个 字体重量 使文本更薄或更粗壮(400是正常的,700是黑体的)。

文本格式化:

1. 扩展 文本格式 节。
2. 单击对齐按钮对齐左、中、右或正则 。
3. 选择 文本转换 使文本UPPERCASE、小写或资本化。
4. 选择 文本装饰 添加下划线、断线或上划线。

[相片:打字-选

如何添加间距

间距控制着元素周围和内部的空地.

1. 选择您的元素并单击 间距 选项卡。
2. 扩展 铺垫 并输入数字,以在元素内添加空间。
3. 扩展 边距 并输入数字,以添加元素外的空格。

如何添加边框和阴影

在选择元素后 :

1. 点击 边框 选项卡。
2. 扩展 边框 以定制边界。
3. 选择一个 边框样式 ("索利德","达什德","多特德"等.
4. 设定 边框宽度 在像素中。
5. 点击 边框颜色 监视选择颜色。
6. 设定 边框半径 转来转去

要添加阴影:

1. 扩展 框阴影 节。
2. 点击阴影预设按钮(None, SM, MD, LG, XL)用于常见阴影样式.
3. 键入自定义阴影值 自定义阴影 字段。

[相克相克:边相相克相克相克.

B. 如何样式化重置效果

当有人将鼠标移动到元素上时(如按钮)会触发Hover效应.

1. 选择要添加悬浮效果的元素 。
2. 寻找 状态选择器 在元素信息下方的栏。
3. 点击 标题: 按钮。
4. 选择器显示更新显示您正在编辑悬浮样式 。
5. 更改 - 尝试更改背景颜色或添加变换 。
6. 将鼠标移到预览中的元素上,以看到悬浮效果 。
7. 点击 保存更改 当完成。

[相克相克:相克相克相克. ]

光和暗模式的单独样式

您的站点在光线模式和黑暗模式中可以看起来不同.

1. 点击 轻型模式 在标题中编辑灯光模式样式。
2. 选择元素并按要求自定义 。
3. 点击 保存更改 每个元素。
4. 点击 黑暗模式 在标题中切换到暗模式编辑。
5. 预览会自动切换到暗模式,这样你就可以看到自己在编辑什么.
6. 选择相同的元素并将其自定义为暗模式。
7. 保存您的暗模式变化 。

如何将样式应用到特定页面

默认情况下,样式适用于您的整个网站。 但是,你可以制作只出现在某些页面上的风格.

样式管理器自动检测您正在查看的哪一页 :

要应用特定页面样式:

1. 使用预览导航到您要自定义的页面。
2. 点击 编辑模式 并选择该页面上的元素。
3. 让你的风格改变。
4. 点击 保存更改。 。 。 。
5. 这些样式将只适用于该特定页面。

如何重置样式

重置单一元素 :

1. 选择要重置的元素 。
2. 点击 重置元素 在左面板下方。
3. 点击确认  在弹出。
4. 该元素的所有自定义样式被删除 。
5. 元素恢复到原来的外观.

重置所有设备 :

1. 点击 全部重置 在头部。
2. 仔细读取警告 - 这将删除所有自定义样式 。
3. 点击  以确认。
4. 您整个网站的所有自定义样式都被删除 。
5. 您的站点恢复默认的外观 。

预览控件

导航工具栏

预览上方的工具栏允许您浏览并控制预览 :

设备预览

在预览页头点击这些按钮, 测试您的样式在不同的屏幕大小上如何显示 :

预览会用阴影边框缩小到选定的大小, 这样您就可以看到移动用户将如何查看您的网站 。

[Screenshot:反应灵敏的-预告-模式]

暗模式切换

预览页头中的月亮图标切换到光和暗模式之间的预览. 这与主标题中的模式按钮不同 :

• 页眉模式按钮 - 控制你是什么风格的沙文(轻或暗)
• 预览月球按钮 - 控制你的观察模式

理解样式标签

左面板中的每个标签都注重不同的视觉属性.

颜色标签

• 文本颜色 - 元素内的文字颜色
• 背景情况 - 固体颜色、梯度或透明背景
• 渐变构建器 - 创建有多个颜色站的平滑颜色组合

类型标签

• 字体家族 - 从专业网络字体中选择
• 字体大小 - 有弹性单位的文本大小(px、rem、em、%)
• 字体重量 - 文本多细或粗体
• 线高 - 文本行之间的间距
• 字母间距 - 单个字母之间的间隔
• 文本格式 - 对齐、资本化、下划线等。

间距标签

• 铺垫 - 元素内的空间(内容和边界之间)
• 边距 - 元素外空间(元素与相邻之间)

边框标签

• 边框样式 - 固态、破碎、圆点或装饰线条
• 边框宽度 - 边界有多厚?
• 边框颜色 - 边线颜色
• 边框半径 - 转角多圆
• 框阴影 - 抛出阴影来创造深度

布局标签

• 显示 - 元素如何表现(块、内衬、弹性、网格等)
• 职位 - 元素的位置(静态、相对、绝对等)
• 缩写框 - 在行或行中安排儿童元素的控制

效果标签

• 不透明度 - 元素的透明度(0%=无形,100%=固体)
• 变形 - 缩放、旋转或移动元素
• 过滤器 - 模糊、亮度、对比度和灰度效应

大小标签

• 宽度 - 元素有多宽
• 高度 - 元素有多高? - 高吗?
• 最小/ 最大宽度( H) - 规模限制
• 对象适合 - 图像和视频如何在容器内组合
• 外观比率 - 维持比例(平方分,16:9等)

新用户提示

解决问题

预览不装入或显示空白页

你看到的东西: 右面板为空,为白色,或显示出错误 。

如何修补:

1. 点击 刷新 按钮。
2. 检查您的站点是否通过打开新浏览器标签来工作 。
3. 如果站点工作但预览不工作, 请联系您的站点管理员 - 这可能是一个配置问题 。

点击时我无法选择元素

你看到的东西: 点击预览中的元素不起作用.

如何修补:

1. 确保 编辑模式 按钮(cursor图标)以绿色显示。
2. 尝试使用刷新按钮刷新预览 。
3. 一些非常小的元素(小于5x5像素)无法被选中 - 尝试点击附近的元素.

现场没有我的改动

你看到的东西: 更改显示在预览中,但不显示在实际的站点上.

如何修补:

1. 确保您点击 保存更改 在左面板下方(不仅仅是保存全部).
2. 清除您的浏览器缓存并刷新现场 。
3. 如果您正在以不同模式( 浅色 vs 暗色) 查看该网站, 请切换模式以查看您的更改是否适用于此 。

过度效应不起作用

你看到的东西: {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}但是你徘徊时什么也没有发生

如何修补:

1. 确保您点击 标题: 按钮。
2. Hover effects只与鼠标合作 - 移动用户不会看到它们.
3. 请检查date=中的日期值 (帮助) 校对:Soup

颜色看起来不对,或者不符合我选的

你看到的东西: 取色器显示一种颜色,但元素显示另一种颜色。

如何修补:

1. 再次单击该元素重新选择并刷新当前颜色值。
2. 确保您正在编辑正确的属性 - 文本颜色与背景是分开的 。
3. 保存并刷新预览以查看最终结果 。

我不能保存我的修改( 保存按钮是灰色的)

你看到的东西: 保存全部并重置全部按钮被禁用并灰出 。

如何修补:
页面上方的橙色横幅表示启用了演示模式. Demo模式阻止了保存更改. 如果您需要保存更改, 请联系您的站点管理员以禁用演示模式 。

我的梯度没有出现

你看到的东西: 您创建了梯度, 但元素仍然显示一个坚实的颜色 。

如何修补:

1. 确保您点击 渐变 按钮(不是固态),在背景部分。
2. 请检查date=中的日期值 (帮助) 至少有两个不同颜色的颜色站点 。
3. 保存您的更改并刷新预览 。

相关页面

本指南供ComusThumbz网站所有人和运营商使用. 它专注于使用"样式管理器"接口来自定义您的站点的外观而无需编码.