Sugarcrm支持产品指南糖市场糖市场用户指南页面设计页面
糖市场以前称为销售。

设计页面

概述

Page Builder向导允许您使用拖放编辑器快速拟合页面。访问编辑器 页面构建器向导的步骤3.

设计方法

您可以从两种设计页面中选择:

此页面的第一部分使用拖放编辑器浏览页面构建器向导,此页面的第二部分描述了代码 - 您自己的方法。

在编辑工作

编辑器由您的页面显示的主画布区域组成,其中包含一个包含样式元素的托盘,以及 Page Builder向导工具栏。编辑器canvas分为部分。在这些部分中,您可以为文本和页面元素添加块(行和列)。 

SM UG Pages Canvasandtray

添加块

每个页面由包含部分,行和列的块组成。部分是行的父容器,行是列的父容器。鼠标悬停在页面上以定位各种块:

SM UG Page块轮廓

每个页面都可以包含任意数量的部分,它跨越页面的全宽。每个部分都可以包含任意数量的行,每行最多可包含六个不同的列。行跨越980像素并包含页面中的所有列。列包含内容项。 

SM UG页面块

要在页面添加部分,行和列,请单击元素托盘中的图标并将其拖动到画布。橙色线显示在添加块的位置中的画布上。 

2020-09-30 15-10-00(1)

您还可以单击画布上的+部分按钮以添加新部分。此按钮显示在设计页面的底部以及空白页面顶部:

SM UG页面添加

部分,行和列可以具有不同的背景图像,背景颜色和大小调整选项。看看 编辑块 有关编辑块的更多部分。

添加页面元素

页面元素包括您可以添加到您的页面的各种内容类型。单击托盘中的内容元素并将其拖动到所需的位置。 

2020-09-30 15-36-09(1)

内容元素

页面构建器中提供以下内容元素。看看 编辑页面元素 有关编辑这些元素的信息部分。

文本

文本项是一个多功能组件,为页面处理样式文本,并包含许多唯一功能,包括直接在页面中嵌入表的功能。

按钮

按钮项允许您使用所有形状和大小的按钮在页面上创建要操作的呼叫。您可以使用锚链接功能链接到外部URL并创建与页面其他区域的链接。

形式

嵌入你的 表格建设者 表格直接进入您的页面。

重要的: 事件 只能在将表单与事件类型着陆页面相关联时使用类型表单。

将表单项拖到页面上时,显示占位符表单图像,而不是实际表单。要添加表单,请从上下文菜单中选择“选择”表单选项以显示先前发布的表单。此列表仅包含已完全发布的表单。 

重要的是要注意,随时您对表单进行更新,您的更改不会自动传播到包含表单的已发布页面。要在页面中嵌入新版本,请访问每个页面并使用“刷新表单到最近发布的版本”命令,然后重新发布该页面。

笔记:包含表单的任何预构建主题仅包含表示表单的占位符图像。您需要以完全定义的形式换掉此占位符 表格建设者

图像

美丽的图像是构建吸入着陆页的关键。页面构建器的图像项目允许您将这些图像添加到您的页面中。请注意,图像元素的不同之处 背景图片 您可以在块中包含。

视频

视频是一个强大的营销工具。视频项目允许营销人员直接从YouTube或Vimeo进口到画布上。添加后,视频项加载了一个简单的默认视频,您需要用您选择的视频替换。

代码块

代码块项允许您在页面中创建自己的自定义代码。如果您要添加了特定的设计,窗口小部件或演示文稿,您可以自定义自己的HTML和内联CSS。

笔记:嵌入式<script>代码块中未启用标记,并将被删除。 

水平线

水平线项是网页设计的钉,在内容之间提供不同的分离器。

垫片

垫片项可以灵活地向任何列添加垂直间距。添加后,间隔在其上下文菜单中没有任何唯一选项;然而,它确实在垫片的底部具有抓握手柄,以允许您改变其高度。

编辑块

鼠标缩小每个块以显示该块可用的编辑选项,包括:

  • 背景图片 :通过图像上传,参考外部图像或从糖市场添加背景图像。 资产库。请注意,这与使用不同 图像元素,这限于其包含的行或列的尺寸。 
  • 背景颜色 :将背景颜色添加到整个部分。
  • 编辑锚点 :将要用作文本和按钮项的链接的锚链接的对象命名。此选项仅适用于部分和行。
  • 添加 :从父级添加子元素(行或列)。此选项仅适用于具有子项的块,如部分或行。
  • 复制 :复制块及其所有内容。
  • 在移动中隐藏/显示 :隐藏或显示移动设备上的块。此功能可用于优化跨设备的设计。
  • 删除 :删除块和所有内容。

调整块大小

您可以自定义部分和行高度,更改背景图像和颜色,复制,并为移动设备设置可见性。要调整部分和行,鼠标缩小,并抓住底部的栏。向上或向下滑动以调整部分或行的大小。

SM UG Pages ResizerOW

您可以自定义列宽度,更改背景颜色,复制列,并为移动设备设置可见性。要调整列大小,请在列上鼠标左右抓住栏。向左或向右滑动以调整列的大小。

SM UG Pages ResizeColumn

笔记: 虽然编辑器中的许多功能与 电子邮件构建器2.0编辑器,调整块的调整方法在两个构建器之间不同。

编辑页面元素

有几个选项可单独编辑页面元素。

要编辑页面元素:

  1. 鼠标在页面元素上方并检查边界框左上角的标签,以确保您具有正确的元素。
  2. 单击“元素”以显示可用于该元素的编辑选项。 
    SM UG EMB编辑
  3. 将元素,拖放到画布上的另一个位置。

代码您自己的页面

如果您需要构建一个真正自定义的登录页面,则编码您自己的页面是一个很好的选择。您可以利用您为登录页面的任何现有代码,也可以从头开始。此选项提供从头开始设计整个页面的灵活性,个性化页面的每个方面都是指定的。
Codeyourow1.

创建代码页

当你 创建一个新页面 在页面构建器中,在向导的第一步中选择代码选项。

代码构建器

代码构建器分为两部分:代码编辑器和“设计预览”面板。
BlankEditorWithText.

代码编辑器

代码编辑器提供类似于其他代码编辑器的编码体验。语法突出显示,标签自动完成,并错误处理只是编辑器的功能中的一些功能,简化了编码体验。为帮助分类和组织您需要构建页面所需的代码,代码编辑器被分解为以下选项卡:

  • HTML. :这是大多数页面设计的地方,在哪里构建页面的结构和基础。
  • CSS. :您将存储所有页面样式和CSS类。
  • javascript. :对于通过JavaScript需要您的页面执行页面的任何复杂的交互或外部功能,您可以在此选项卡中代码。
设计预览面板

预览面板是您可以实时查看代码的设计,显示页面在发布之前的查找。 

代码工具栏操作

代码编辑器工具栏提供了具有特定于代码的工具的Sugar Market功能组合,以帮助您简化您的开发过程。该工具栏包括以下功能:
工具用作WithText.

  • 资产库 :开辟了资产库视图,您可以从中选择您上传到Sugar Market的任何资产,并将其直接放入您的页面中。
  • 表格建设者 :打开表单选择视图,您可以在其中获取您拥有的任何形式 表格建设者 并直接将其嵌入到您的代码中。
  • 线包装 :允许代码泄漏到下一行以允许更大的代码易读性。
  • 自动格式选择 :突出显示代码部分并选择此选项后,编辑器将自动且正确重新格式化代码。
  • 代码信息 :打开一个视图,解释编辑器的工作原理以及在尝试将代码复制和粘贴到编辑器时如何期望的内容。
粘贴代码

营销人员的典型用例是为以前构建的页面拍摄现有的代码库并将其粘贴到代码编辑器中。粘贴到我们的代码编辑器中,您可以希望它能尽可能地呈现HTML,CSS和任何JavaScript,但我们需要能够对代码的排列方式进行一些控制。当您将代码粘贴到编辑器时,将显示一条消息,通知您已将包含标记中的代码(包括标记)的某些标签已移至CSS&JavaScript选项卡,或设置中的外部样式和脚本部分。这是自动完成的,以确保您的页面将正确发布。

最后修改:2020-12-17 23:57:30