使用画布定制记录详情页面

可以通过画布视图自定义记录在模块列表中的显示方式。您可以添加记录图像，使用自定义按钮来表示字段，为字段标签设置特定的字体样式或大小，更改字段类型的对齐方式等等。这些定制仅局限于列表视图。

您可以根据喜好在画布详情页面自定义记录详情页。为每个字段添加背景颜色，按不同的顺序排列，使用自定义按钮代替字段名，使用不同的字体样式等等。该视图在所有模块中都可用，包括自定义模块。

Zoho CRM 认证画布设计师
我们有一批已认证的画布设计师名单，他们可以帮助您为您的企业设计和实施定制的画布模板。您可在此查看设计师的名单。

可用性

需要的权限

具有定制权限的用户可以定制记录详情页面。

画布详情页面构建器中的组件

与模块列表视图类似，您可以使用画布定制记录详情页面。详情页面构建器有以下组件:

元素：它由呈现在布局中的各种组件组成:分栏、标签、表格、文本、图标和曲线。
数据：它由将在布局中显示的组件列表组成：字段、相关列表、链接和操作（动作）（如编辑、提交、下一步等按钮）。
样式：您可以在这里更改字体、字体大小、背景颜色、边框、阴影、半径、内边距、外边距和插入背景图像。可以通过在画布构建器中选择所需的元素来应用这些更改。选项根据所选元素的不同而异。
可重用组件 : 元素，样式和数据可以从以前的模板中保存下来作为可以重用的组件。这些组件一旦保存，就能在不同模块中重复使用，这些字段将在CRM中自动映射。

注意：
最多可以从五个查找模块中添加字段作为您画布页面的组成部分。查找模块中的分栏、图片上传和文件上传字段不能添加到画布页面。但是，当您添加 ‘全部字段’ 视图时，它们将被包含在内。

定制记录详情页面

您可以在图库中选择预设的模板，并根据需求进行定制，或者在设计工具的帮助下从头创建模板。

要定制记录详情页面：

进入设置 > 定制 > 画布 > 详情视图。

点击创建新的详情页面。

在创建自定义记录页面，从下拉列表中选择模块和布局。

点击创建。

点击画布左侧栏中的元素。
请参阅元素和组件。

拖放分栏，标签，表格，文本，图片，图标和曲线至空白区域。

添加所需样式。
请参阅为元素添加样式。

您可在上方菜单栏中执行以下操作。

撤销或重做修改。

预览画布再保存。

全屏查看。

命名画布。

了解组件

元素

在“元素”下，有以下组件：

分栏：分栏是一个出现在记录详情页的空间或区块。

您可以从布局中插入字段到分栏，或者插入位置图像，或者把它作为一个横幅来显示一些信息等。
拖动边框以调整“分栏”的大小。
点击图标复制分栏。
您可以右键单击该分栏，单击“插入”以添加字段，固定组件或流动组件、复制样式、粘贴样式或删除。
添加样式元素。(阅读更多关于样式的内容)。

标签页：标签页允许您将字段和相关列表安排至不同页面。这是为用户提供简单导航和有序展示的最佳方式。例如，在下面的图片中，三个标签页：产品、附件和时间轴都在一个分栏中。通过单击+图标，您可以添加更多字段或相关列表作为标签页。

在左侧面板中，您可以输入标签页名称，然后单击+图标添加更多标签页。
将鼠标悬停在标签页上，单击关闭图标删除标签页。
将鼠标悬停在标签页上，看到双箭头图标时，拖动标签页来改变位置。
在标签页内右击可更改相关列表、固定或流动组件、复制或粘贴相关列表样式、锁定、删除等。
您可以插入样式元素，如图像，背景颜色等等。（阅读关于样式的更多内容）。
您可以将属于同一主题的多个标签页组合在一起。例如，像"未关闭的活动"、"已关闭的活动"、"已邀请的会议"和"即将执行的动作"这些标签页可以组合在名为"活动"的子标签页下。
您也可以在这些操作上执行单展开和多展开等操作。
多展开功能允许您同时打开多个子标签页，您可以通过选择多展开操作工具来实现。换句话说，当您点击另一个子标签页时，这个子标签页的子菜单不会折叠。
当您选择单展开选项时，只有其关联的子菜单会展开或折叠。例如，当您展开一个子标签页然后点击另一个时，之前的子标签页菜单会在下一个展开之前折叠。

表格：表格可用于以表格格式显示记录。例如，在下面的图片中，产品名称、描述、主要存储是布局中显示为行和列的字段。表格格式可以节省详情页面的空间。您可以选择列表和静态表格模板，或选择新的可定制表格模板。

将鼠标悬停在行和列上，并单击+或-图标来添加或删除行和列。
右击一行可更改字段、固定或流动组件、复制或粘贴样式或删除字段。
拖动边框调整表格的大小。
为行和列添加颜色。
为文本添加颜色。
为您的表格添加图片。

文本：添加一个文本框，在详情页面中输入内容，例如，在分栏之前添加标题，或者添加备注、免责声明等。

拖动边框可调整文本框的大小。
右击可复制、固定或流动组件或删除文本框。

图片：图片元素可用于在详情页面添加图片组件。例如，您可以添加一个图片组件，并将其设置为特定记录的个人资料图片。

您可以拖放图片元素至画布，并将其与现有元素对齐。
您将看到上传图片选项。

您可以从设备上浏览并添加图片，或从我的图片中选择，或者添加URL。
添加图片后，您可以调整其大小，样式，如边框，阴影，半径和填充等。

图标：使用图标来表示字段，而不是传统的文本标签。例如，下图中姓名和手机是图标而不是文字表示的。

在图标栏上滚动，可以上下移动，选择图标。
点击图标复制，删除或更改。
拖动边框可增加或减少图标大小。

伸缩方框: 在记录详情视图中使用伸缩元素来控制布局及其在用户界面中的响应性。该元素允许您动态组织数据并提升用户体验。只需将伸缩项目拖放到画布中即可开始设计。伸缩元素有三种类型。
网格布局：网格组件是一个数据容器，带有矩形网格，您可以在其中按正确的比例定位数据和元素。除了作为视觉指南外，网格组件还具有以下属性，使其具有响应性和动态性：

调整网格大小
隐藏网格
调整网格间隙
添加断点宽度

调整网格大小：您可以确定网格的宽度和高度，单位可以是计数或像素。基于计数的调整将保持元素宽度和/或高度中的网格数量相同。为了保持配置的网格数量，数据将被拉伸或缩小。然而，基于像素的调整将通过网格的跨度来保持数据的分辨率。

隐藏网格：网格仅在设计时显示，画布在记录中渲染时不会显示网格。但是，如果您希望，即使在设计时也可以隐藏网格。但是，请注意，在网格组件中隐藏网格不会将其转换为分栏；相反，它将显示网格，以便您放置数据时能够正确对齐数据。

调整网格间隙大小：网格间隙或间距是每个网格之间的空间。调整此空间将在网格上放置的元素之间留出空间。您可以同时调整两侧的间隙，也可以根据需要单独调整列和行的间隙。

断点宽度：画布上对齐的元素在实时渲染时会按照设计方向显示。如果要在不同设备上查看模板，可以为画布上放置的每个网格组件启用断点宽度。启用断点宽度后，您可以进行以下操作：

调整宽度并确定元素应在何种分辨率下断行。
在断点模式下，选择单个组件并自定义其突出显示和可见性：

您可以确定顺序
添加或更改背景
添加或更改边框
调整阴影、半径、填充。
调整组件在指定屏幕尺寸下的显示或隐藏。

完成后，您可以在默认模式和响应式模式下预览您的设计。

固定和流动组件

每个元素（分栏、页签、文本、表格）都有一个选项，可以将其设置为固定或流动组件。通过选择固定组件，您可以限制元素的大小不根据用户的屏幕变化。另一方面，选择流动组件将允许元素根据用户屏幕大小调整自身大小。

例如，如果您认为为某个分栏插入的背景图像可能会溢出到特定的屏幕之外，那么最好将其设置为流动组件，以便根据用户的屏幕调整大小。

对元素应用样式

样式，如背景颜色、填充、字段标签对齐、边框、边距等，可以应用到所有元素。还可以使用样式选项自定义页面背景。有些选项是特定于元素的。

页面的样式选项

页面定制包括：

背景
填充
高度
宽度
适应屏幕

背景

从调色板或颜色选择器中选择背景色。你也可以直接输入颜色的HEX 代码。
选择图片复选框，然后点击上传图片。在弹出的窗口中，您可以从设备上传图片，选择之前上传的图片，或使用 URL 添加图片。

图片大小 - 图片大小可以使用三个选项来定义。

等比缩放 - 该选项将调整图像的大小以适应页面，同时保持宽高比不变。
原始 - 该图像将保留原来的大小。
拉伸平铺 - 该选项将拉伸图像以填充页面的长度和宽度，而不考虑纵横比。

图片重复 - 如果背景图像的大小很小，不能覆盖整个页面，则可以使用图片重复选项。这将让你重复图像多次，并完全填充背景。可选择以下重复类型：

X - 图片将沿着X轴重复。
Y - 图片将沿着Y轴重复。
两者同时 - 图片将沿着页面的X轴和Y轴重复。
不重复 - 这可以防止图片重复。

选择渐变复选框来创建背景中多种颜色之间的平滑过渡。如果你在一条直线上选择多种颜色，那么位置可以调整，以促使所有颜色完美融合。

填充

填充确定内容周围的空白处。若要修改，请选择元素并单击填充复选框。

增加填充： 可以通过向右拖动滑块来增加填充。还可以像素为单位指定填充。
所有的填充相同：“所有的填充相同”复选框将应用您在元素的所有四个边框的配置。您可以取消勾选此复选框，并为元素的所有四个边定义不同的边距。

高度和宽度

通过输入像素值来调整页面的高度和宽度，或者您可以勾选自动，这样屏幕就会自动调整。

适应屏幕

页面将根据用户屏幕的长度和宽度展开和调整。

分栏的样式选项

可以使用以下选项定制分栏：

背景-选项与页面相同。
边框
阴影
半径
填充 - 选项与页面上可用的选项相同。
高度和宽度 - 选项与页面上可用的选项相同。
深度

边框

点击边框复选框，执行以下操作:

调整宽度：拖动滑块，增加边框的大小。您还可以以像素为单位输入边框值。
样式：从下拉列表中选择边框样式。
颜色：从调色板中选择边框的颜色，或输入颜色代码。
所有的边界相同：选中此选项，将边框设置应用到该分栏的所有四个边。您可以清除此复选框，并为每个边定义不同的宽度、样式和颜色。

阴影

点击阴影复选框并执行以下操作：

X - 根据这个值，阴影会水平移动(向左或向右)。一个正的“X”值将把阴影放置在元素的右侧。负值将把阴影推到左边。
Y - 基于该值，阴影将垂直移动(顶部或底部)。一个正的“Y”值将把阴影放在顶部，一个负的“Y”值将把它推到底部。
虚化 - 定义阴影的锐度。如果虚化为0，阴影将是锐利的。值越高，锐度就越小。
延展 - 调整阴影的大小，正的延展值将增大阴影，负的延展值将缩小阴影。
颜色 - 可以从颜色选择器中选择边框颜色。

半径

通过定义半径来显示圆角。单击“半径”复选框，执行以下操作：

增加半径：拖动滑块增加半径或在方框中输入数值。
所有的半径相同：选中此选项，为四个角设置相同半径圆角。您可以取消选中，并为每个角设置不同半径的圆角。

边距

在详情页面中定义元素的位置。若要添加边距填充，请选择元素并单击填充复选框。

增加边距：将滑块向右拖动，可以增加边距。还可以像素为单位指定边距。
所有的边距相同：“所有的边距相同”复选框应用于元素所有四个边距的配置。您可以取消选择此复选框，并为元素的所有四个边定义不同的边距。

标签页的样式选项

该标签页可以使用以下选项进行定制：(以上提到的背景，边框，半径，填充和边距)。

状态
背景
边框
半径
填充
边距
图标

状态

定制标签页，使其在每个状态下都不同。例如，当标签页处于活动状态时，背景颜色、边距或背景图像可能不同，类似地，当标签页处于悬停状态时，边框可以设置为蓝色，以便清晰区分。每个状态的意思是：

活跃 - 当标签页被选中时。
悬停 - 当您将鼠标悬停在标签页名字上时。
正常 - 当标签页不活动或不悬停时。

您还可以更改字体、字体大小、颜色、大小写、删除线或设置文本对齐方式为左、中或右。
通过单击构建器中的标签页，并在激活状态下的文本栏中输入标签页的名称来命名标签页。

独特的标签页样式

除了上述样式选项外，您还可以为标签页应用独特的样式。只需为选定的标签页启用独特风格选项，您就可以为所有三种状态（正常、活跃和悬停）的标签页选择独特的样式/格式。

注意

添加到标签页元素的相关列表不能被重命名。
单击 + 图标以添加更多的标签页。
右击标签页以插入更多字段、固定或流动组件或删除标签页。您也可以单击“关闭”图标来删除某个标签页。
将鼠标悬停在标签页名称旁边的三条线图标（），当您看到双面箭头时，将标签页拖放到所需的位置。

图标

标签页可以用图标来表示。右键单击标签名，然后单击显示图标查看并选择图标。

添加图标后，右键单击以隐藏或更改图标并隐藏标签页名称。

表格、文本、图标和行的样式选项

对于表格、文本、图标和行，常见的样式选项是：

边框
阴影
半径
填充
深度

除此之外，您还可以在文本、图标和行中执行以下自定义操作。

文本：您还可以更改字体、字体大小、颜色、大小写、删除线或设置文本对齐方式为左、中或右。

图标：可以自定义图标颜色、背景颜色、背景图像、边框、阴影、半径、填充和深度。

曲线：您可以将线条设置为水平或垂直，调整厚度、样式和颜色。

字段标签的样式选项

字段标签可以使用样式选项来定制，也可以从页签中选择选项。

更改字体、字体大小、颜色、大小写、删除线或设置文本对齐方式为左、中或右。
将标签对齐到左、上、右、下。
更改背景颜色、半径、内边距和外边距。
右键单击标签可更改字段、隐藏标签、将标签移动到左侧或顶部、固定或流动组件、复制样式并删除字段。

自定义 CSS 属性

自定义属性允许您对画布中的任何元素应用额外的 CSS 样式。您可以从支持 CSS 属性的列表中选择并分配值——无需编写代码。

注意：

每个元素最多可添加 25 个属性。
适用于列表视图、详情视图和表单视图。
支持字段、相关列表、链接、分栏、标签页、网格、表格、按钮、文本和曲线等元素。

要使用此选项，请选择元素，在自定义属性部分下点击添加，并从下拉列表中选择属性。输入相应的值以应用字体粗细、背景颜色、间距等样式。

更改将在构建页面和查看页面中反映出来。

伸缩组件的样式选项

伸缩项目对齐

您可以将伸缩元素内的项目对齐到左上角、上中、右上角、左、中、右、左下角、下中、右下角。

伸缩项间隙

您可以在伸缩元素内的项目之间添加间隙，以使您的布局看起来更加均匀。对于垂直伸缩元素，选择"行之间的垂直间隙"，对于水平伸缩元素，选择"项目之间的水平间隙"。可选：

自定义- 在父级元素内为每个子项间提供特定空间
介于之间 - 在子项和父元素之间提供相等的间距。
均匀 - 仅在元素内的子项之间提供相等的间距。
周围 - 子项和父元素周围提供更多的空间。

伸缩项目紧缩

用来调整父级伸缩元素的大小，使其适应内部子项，而不是让子项扩展以填充父级伸缩元素的空间。选择：

紧缩宽度 - 用于调整父级伸缩元素的宽度
紧缩高度 - 用于调整父级伸缩元素的高度
同时使用以调整父级伸缩元素的大小，使子项均匀分布。

子伸缩项

将不同的元素作为子伸缩项添加到伸缩项中，以设计您的画布布局。要添加这些元素，将元素拖放到伸缩项中，双击它以添加样式和预设。

- 您可以将子项对齐到左侧、居中或右侧，并在父级伸缩元素内水平或垂直拉伸这些子项，或两者同时拉伸。

- 项目最小/最大宽度 - 您可以选择为项目的最小和最大宽度设置限制，以便在组件调整大小时，项目的宽度将根据设定的限制进行调整。当您为项目设置宽度时，还可以选择自动选择或设置一个断点，在此断点上下方，子项目无法调整大小。

伸缩组件工具

自动适应：此工具可用于使伸缩组件根据组件大小自动水平调整或垂直拉伸。这意味着组件内的项目将重新定位或调整大小，并保持组件内所有项目的默认最小宽度。如果组件被调整大小，则其内的项目将被换行到下一行以保持一致性。

自动列宽：使用此工具，伸缩组件将根据列数排列项目。列数将根据项目的最小宽度变化。这可以防止重叠，而无需手动调整。您可以选择每行应有多少个项目，还可以设置项目最小宽度。

注意：您不能同时为选定组件选择自动适应和自动列宽工具。这样做将自动取消选择其中一个选项。

填充宽度：此工具允许伸缩组件伸展并占据其容器的全部宽度。请注意，此工具仅适用于垂直伸缩组件。

转换为伸缩：您可以使用此工具将元素转换为伸缩组件。只需选择一个元素并点击 Shift+A 以选择多个元素。右键点击选中的元素，然后点击转换为伸缩。

替换为分栏 / 替换为伸缩：此工具允许您将分栏元素替换为伸缩组件，或将伸缩组件替换为分栏元素。只需右键点击一个元素，根据下方所示替换为分栏或替换为伸缩。当您用伸缩组件替换分栏时，它会自动替换为垂直分栏；如果需要，您可以将其更改为水平分栏。

移动伸缩组件：您可以使用键盘箭头键将伸缩组件移动到画布上的所需位置。

网格组件的样式选项

除了组件的系统标准样式选项，如背景、边框、阴影、深度、半径、填充、宽度和高度、可见性和自定义属性外，画布中还提供了特定于网格的属性。

当您在画布中选择网格组件时，将显示以下样式选项：

断点宽度：这是一个切换开关，启用后可以让您在缩小时固定断点宽度。当渲染屏幕调整到设置的断点宽度时，您可以应用所需的样式选项到这些网格组件上。
您可以拖动画布中的把手来固定所需的宽度，或者以像素为单位指定宽度大小。
智能网格：组件中的每个网格单元都是自适应的。您可以通过保持像素来使这些单个网格单元适应您的数据，或者保留数据以适应网格单元的数量，而不管整体组件的高度和宽度如何。

如果您以像素为单位保持高度和宽度，那么当您扩展组件时，新的像素将填充组件的宽度。如果您缩小，内容将优先考虑，并阻止您进一步缩小。
如果您以计数方式保持高度和宽度，无论您扩展或缩小多少，网格单元的计数将保持不变，导致放置在顶部的数据缩小。
这种智能网格属性使网格能够适应您放入的数据。

这种灵活性将帮助您放置画布组件，而不会重叠或变形。

此外，在编辑时，您也可以隐藏网格，但如果这些网格单元格不是起引导作用，而是阻碍画布的设计视图，则仍需遵循网格属性。
此外，如果您想调整网格间隙或网格单元格之间的间隙，可以通过在智能网格下查找网格间隙选项来实现。默认情况下，所有网格的间隙都会调整。但是，如果您想垂直或水平地改变单元格的间隙，可以通过点击两侧网格间隙复选框来实现。

在网格组件之间转换

为了在设计和采用适合您偏好和节奏的组件时提供灵活性，画布为您提供以下选项：

替换为网格：您可以通过单击将组件（如分栏和伸缩）替换为网格。您只需单击要替换的组件，右键单击鼠标或触摸板的属性，然后选择“替换为网格”。
将多个组件转换为网格：如果您想替换或转换画布中的多个组件（仅限分栏和伸缩），请拖动选择这些组件，然后右键单击，在属性中查看转换为网格的选项。选择该选项将使所有选定的组件转换为网格组件。您还可以使用快捷键：Command/ctrl+select+shift+select。

使用画布规则进行条件样式设置

画布中的条件样式是一个选项，允许您根据特定条件对画布中的元素进行样式设置。例如，您可以设计一个货币字段“旅行套餐成本”，如果值超过 10000，则显示为红色，以指示该交易对销售代表的重要性。同样，如果值小于 10000，该字段可以显示为绿色。同样，您可以创建多个这样的条件，这些条件将作为画布规则列出。

要创建画布规则

在画布构建器 中，选择一个元素。
点击"+"图标。
点击创建画布规则。
在打开的画布规则 弹窗中，指定条件。
点击保存。
画布规则将被创建并选中。点击应用。
在该元素的样式选项卡中，您将有一个以该规则名称命名的子选项卡。您在此配置的任何样式都只有在画布规则的条件下才会应用于该元素。

注意

画布规则可以在该模块的多个画布页面中重复使用。您可以通过导航到设置> 定制 >画布来管理它们。在此处，点击更多图标(...)并选择管理画布规则。您可以在此处编辑和删除画布规则。
您也可以通过点击+创建画布规则在此处创建画布规则。

应用现有画布规则

在画布构建器 中，选择一个元素。
点击"+"图标。
在打开的画布规则弹出窗口中，从列表中选择所需的规则，然后点击应用。
这样，所选的画布规则将应用于该元素。选择带有画布规则名称的子选项卡后进行样式更改。

将样式选项添加到预设中

通过在画布中选择元素并右键单击，可以将样式选项添加到预设中。

这允许您在整个画布上统一设置元素的样式，而无需每次都重新创建和编辑它们。

以下是可以添加到预设中的样式选项：

文本，标签和值。

字段

分栏和页面

标签页

相关列表

表格

按钮

注意：

您最多可添加25个样式至预设。

应用预设中的样式选项

添加样式至预设中后，您可以在画布中选择元素，在自定义下选择样式并应用。

另外，您也可以使用图库中的样式。

管理可重用组件

样式，元素，数据构成了布局结构。如果您保存所需组件至可重用组件，您可以通过简单拖放开始使用并创建新的模板。节省了重新创建组件的时间。

在模板中添加组件之前，您也可以将鼠标悬停于组件上来预览。

例如，下图中，分栏被保存至可重用组件，当管理员想添加像下图这样的片段时，不用每次都创建一个新的，该片段可以保存至可重用组件中，并在不同模板中重复使用。

另外，您也可以从图库中选择预设的组件，并添加至画布。

注意：

您最多可保存25个预设组件至可重用组件。

一个组件可以在不同模块重复利用。为一个模块创建的字段将自动与另一个模块的字段映射并显示。

如果字段无法匹配，将显示所选模块中可用的类似字段类型。如果该字段类型在目标模块中不可用，将显示为N/A。在这两种情况下，你都可以通过右击组件来改变字段类型。

导出和导入画布模板

导出画布模板

一旦您创建了画布模板，您可以使用唯一密钥将其共享给您的组织中的用户或另一个 CRM 组织中的用户。该密钥是一个字母数字代码，可以传输您的模板的界面。

注意：

您可以使用支持画布的 Zoho CRM 版本将模板导出到任何组织。
在共享模板时，仅会传输 UI 功能，如元素、组件和样式。模板分配的值、图像和规则不会被传输。
您可以在不同模块中使用模板密钥。换句话说，如果您从为线索创建的模板中导出代码，您可以使用相同的代码将模板导入到其他模块。UI 将被传输，导入模块中的字段将自动被画布采用。
无论模板是为哪个模块创建的，您一次最多可以生成 10 个导出密钥。如果您已达到该限制，可以从导出历史中删除任何现有的模板代码，并获取新的导出密钥。
每个唯一的导出密钥仅从创建之日起七天内有效。
您可以使用“管理密钥”选项在导出历史中跟踪您的活动密钥。它列出了过去七天内的所有导出代码。