HTML构建器入门指南

感谢您购买LAPUS可视化HTML构建器以及模板。 本文档将介绍一些HTML构建器的基本情况,并引导你使用构建器。 如果你在使用过程中遇到其它问题,可以请通过点击右上角的按钮发送邮件与我们联系。


1. 快速入门 - HTML构建器的工作原理概述


运行HTML5构建器

在Web浏览器(推荐使用Chrome)中打开src/builder/builder.html文件,单击页面中心的“新建页面”按钮。 如果您没有看到此按钮,或者浏览器卡在了加载屏幕上,请检查浏览器设置中是否启用了本地存储。 有时禁用第三方cookie也会禁用存储。

添加内容

默认情况下,当你打开构建器时,左侧的页面组件侧边栏会自动打开。 点击侧边栏中的“+”,可以添加所需页面组件。通过单击组件缩略图将组件添加到您的页面。同时,将一个组件添加到页面后,它也将被添加到侧栏中的布局地图中。 您可以尝试添加一些不同的内容组件,并通过在侧栏的布局图中上下拖动标题来对其进行重新排序。

导出

将页面组件添加到页面并编辑内容后, 您可以点击侧边栏底部的“获取HTML”按钮,获取当前页面的HTML源码。 或者直接将页面.html文件下载下来。下载后的HTML可以直接复制到页面模板目录(src)下即可双击查看,例如。 'my-page.html'并将其放置在根模板目录(src)中。


2. 组件管理

2.1 添加页面组件:
点击侧栏中“页面组件”标签上的加号按钮,可打开页面组件列表面板进行组件添加。 可通过单击组件的缩略图将其添加到页面中(见图2.1.1)。 此外,通过单击顶部的“组件分类”按钮可以对组件类型进行分类和过滤(例如,选择“Cards”将显示具有卡片类型页面组件)

图2.1.1单击缩略图可将该组件添加到页面布局中

2.2 页面组件排序:
若需要重新排列页面上的各个组件,只需在侧边栏中的布局图中上下拖动该组件的标题(见图2.2.1)。

图2.2.1上下拖动组件可重新排列布局的顺序

2.3 重命名组件:
当创建包含整页导航的页面时,我们需要对组件进行重命名。 要重命名组件,请在侧栏中单击其标题并更改文本(请参见图2.3.1)。 您会注意到进行更改时会出现一个导航图标,这表示这部分现在可以作为页面内部导航组件使用了。 (了解更多: 4.1)

图2.3.1单击组件标题进行重命名-这样可以在“编辑链接”面板中设置页内导航

2.4 删除页面组件:
要从页面中删除某个组件,请将鼠标悬停在侧边栏的布局图的标题上方,可看到右侧有一个红叉图标,单击图标删除该组件。


3. 编辑内容

3.1 编辑文本
单击页面上的任何文本元素即可出现编辑光标,您可以在其中编辑该元素的文本(见图3.1.1)。 同样支将文本粘贴到任何元素中。

图3.1.1单击页面上的文本进行编辑文本

3.2 编辑图片
重要说明:构建器会在模板的'img'目录(而不是builder / img目录)中查找图像。 如果添加的图像不在“ img”文件夹中,则会出现错误,提醒您将图像文件放至src/img文件夹,然后刷新页面。

HTML构建器模板中的许多组件都包含有可编辑的图像。 需编辑图像,请右键单击该元素,然后在上下文菜单中单击“编辑图像”(参见图3.2.1),该图演示“编辑图像”面板。

在这里,您可以手动输入“ src”值(无论是本地的还是网络上的其他地方)以及图像的“ alt”值。 (见图3.2.2)
要从“ img”目录中选择图像,请单击“切换选择器”按钮,然后重新选择您的图片。
完成后单击“保存”-您可以看到更换后的的图像会立即显示在页面上。

请注意:构建器不会自动调整图像大小或裁剪图像,请参阅随附图像的图像尺寸作为指导。

图3.2.1右键单击图像以编辑图像路径
图3.2.2右键单击图像以编辑图像路径

3.3 编辑图标
要编辑图标,请右键单击它,然后从上下文菜单中选择“编辑图标”(参见图3.3.1),此时会出现图标选择器面板。 在这里,选择要使用的图标,然后单击“完成”(见图3.3.2)。

图3.3.1右键单击图标以编辑图像路径
图3.3.2右键单击图标以编辑图像路径

3.4 编辑链接
右键单击链接进行编辑,然后从上下文菜单中选择“编辑链接”(见图3.4.1)-此时将会出现“编辑链接”面板。 在这里,您可以编辑链接的“ href”值以及“target”值。 进行更改,然后单击“保存”进行提交。 (见图3.4.2)

图3.4.1右键单击链接以编辑链接路径
图3.4.2输入所需的href值并选择一个target。 如果您有页内链接(请参见图2.3.1),则在此框顶部可以选择它们

3.5 拷贝内容
构建器支持您通过右键单击某个元素,并从上下文菜单中选择“克隆”来克隆内容(请参见图3.5.1)。 这样可以精确复制元素,例如对于一些例如“Service”等页面组件(重复现实多块相同组件)特别有用。

图3.5.1右键单击一个元素以将其克隆

3.6 删除、恢复内容
构建器支持通过右键单击从上下文删除内容(见图3.6.1)。 通过单击布局图左下角的“撤回”按钮可以恢复该内容(见图3.6.2), 点击“撤回”后,您可以在页面上再次看到带红色边框标记的被删除内容(请参见图3.6.3),点击红框内的内容即可恢复,并正常显示在页面上。

恢复完已删除的内容后,请确保再次单击垃圾箱按钮,避免组件出现在奇怪的位置。 所有垃圾内容将与您的页面一起保存,但最终会在HTML文档中删除。

图3.6.1右键单击一个元素以将其删除
图3.6.2单击“撤回”按钮以显示已删除的内容。
图3.6.3在显示已删除项目的情况下,左键单击褪色的已删除项目进行还原

3.7 调整列宽
大多数组件元素(例如Service,pricing,text等组件)都允许您编辑列宽。 如果您想要与原始布局不同的特定数量的元素,可以通过这个来实现。 要调整元素的宽度,请右键单击它,然后从上下文菜单中选择“增加列宽度”或“减少列宽度”。

友情提醒: 使用 ctrl + [ 减小列宽的,使用 ctrl + ] 增加列宽


4. 社交功能

4.1 添加Instagram feed:
一些构建器自带模板有集成的Instagram feed部分。 要更改显示的供稿,请首先将该部分添加到页面,然后右键单击它并选择“编辑Instagram供稿”,然后键入想要显示的所需Instagram用户名。

图4.1.1输入要显示的Instagram用户的名称,然后单击“保存”

4.2 添加Twitter feed:
一些构建器自带模板有集成的Twitter feed部分。 要更改显示的供稿,您需要在Twitter帐户的“设置”页面中创建一个Twitter小部件。

添加之前,请转到您的Twitter帐户的“设置”页面,然后单击“小部件”。 单击“新建”,然后单击“创建小部件”。 完成后,返回“窗口小部件”页面,然后在新创建的窗口小部件上单击“编辑”。 从这里,您需要将小部件ID复制到网址栏中。 窗口小部件ID是/ widgets /之后和/ edit之前的长数字字符串,并将其粘贴到“编辑Twitter Feed”模式的“窗口小部件ID”框中。

图4.2.1在此框中输入您的Twitter小部件ID,以将提要链接到您的帐户

4.3 将表单与MailChimp链接
一些构建器自带的模板随附启用MailChimp的表单。 您将在“添加部分”面板中看到某些表单具有MailChimp和Campaign Monitor徽标。

要将表单与MailChimp链接,请先将相关表单添加到您的页面,然后右键单击它,然后单击“嵌入邮件列表表单”。

  • 开始之前,您需要转到MailChimp网站上的帐户,然后从“列表”标签中选择相关列表。
  • 进入后,点击“注册表格”,然后点击“嵌入式表格”
  • 您选择代码的相关表格将取决于您选择的表格样式。 “嵌入邮件列表表单”小部件将指示您需要复制的表单代码。
  • 复制表单代码并将其粘贴到“嵌入邮件列表表单”模式中的“表单嵌入代码”字段中,然后单击“保存”


图4.3.1在此字段中输入从MailChimp复制的表单代码

4.4 将表格与Campaign Monitor链接
一些构建器自带模板随附启用了Campaign Monitor的表单。 您将在“添加部分”面板中看到某些表单具有MailChimp和Campaign Monitor徽标。

要将表单与Campaign链接,请首先将相关表单添加到您的页面,然后右键单击它,然后单击“嵌入邮件列表表单”。

  • 您需要从此处转到Campaign Monitor网站上的帐户,然后从“列表和订阅者”标签中选择相关列表。
  • 在此处后,点击边栏中的“增加受众群体”,然后点击“将表单复制/粘贴到您的网站”
  • 点击“获取代码”并将其复制到剪贴板
  • 将表单代码粘贴到“嵌入式邮件列表表单”模式中的“表单嵌入代码”字段中,然后单击“保存”


图4.4.1在该框中输入您从Campaign Monitor网站复制的代码,然后单击“保存”


5. 导航管理

5.1 添加菜单:
要添加菜单,请从边栏中的“导航样式”下拉菜单中选择一种导航样式。

图5.1.1从列表中选择一个导航样式以将该菜单添加到您的页面

5.2 保存菜单:
当您第一次在菜单项上编辑文本时,系统将提示您命名并保存该导航(请参见图5.2.1)。 完成后,此导航将显示在侧栏的“导航样式”下拉列表中,然后您可以在创建的其它页面上使用此导航。

图5.2.1为此导航输入一个名称-现在将在所有页面上使用该名称,并在刷新页面后将其保存

5.3 管理菜单链接:
创建菜单可以是克隆(或删除,如果需要的话)现有菜单项,随后按实际情况更改详细信息(文本和href)。 默认情况下,您的模板将带有所有可用的菜单选项(例如下拉菜单等)。

5.4 页内导航
如果要创建“单页面”网站或需要内部链接的页面,请按照以下过程操作以确保正确的“平滑滚动”导航功能:

  • 在侧边栏的布局图中适当地命名各节(请参见图2.3.1)。 重命名某个部分时,您会注意到旁边有一个链接图标-这表示该部分现在可以作为内部链接选项使用
  • 在菜单中编辑链接时,您会看到一个选择选项“选择页内导航链接”(见图5.5.1)。 从菜单中选择适当的部分,您会注意到“ href”值已为您填写。 点击保存提交
图5.5.1从此下拉列表中选择链接,以使其通过平滑滚动连接到页面内链接


6. 页尾设置

页尾设置与导航类似。 通过从侧栏中的“页脚样式”下拉菜单中选择一个选项,将页脚添加到页面中(见图5.1.1)。

第一次更改页脚上的文本时,系统将提示您命名并保存页脚(见图5.1.2)。 完成后-您保存的页脚将显示在“页脚样式”下拉菜单中。 这样可以轻松在多个页面上使用相同的页脚。

图5.1.1选择页脚样式以将其添加到页面的底部
图5.1.2给页脚起一个名字,然后可以在创建的任何页面上使用它


7. 保存&加载页面

7.1 保存页面
要保存页面供以后使用,请单击侧边栏左上角的页面图标,打开选项面板,然后单击“页面另存为”(见图7.1.1)。 为页面命名,然后单击“保存”(见图7.1.2)。 现在,您将看到页面显示在页面选项卡中-随时单击页面图标可返回此页面。

注意:所有内容更改(例如文本,图像,图标,页面标题,部分标题等)始终保存为当前页面名称。

图7.1.1保存页面供以后使用
图7.1.2为页面添加名称,然后单击“保存”

7.2 加载页面
加载HTMLPAGE时,系统将提示您启动新页面或加载上一页(如果存在的话)。 点击“加载页面标题”将加载之前保存的页面。 要选择其他保存的页面,请单击侧边栏左上角的页面图标,打开“页面”选项卡,然后选择适当的页面(见图7.2.1)。

图7.2.1单击所需的页面进行加载

7.3 删除页面 要删除页面,请打开选项面板,将鼠标悬停在相应页面上,您会看到一个十字图标出现在右上角。 单击此按钮删除页面。


8. 导出HTML

获取HTML 构建器可以即时生成HTML,因此您可以随时单击“获取HTML”按钮来检索完整且功能正常的HTML文档(见图8.1.1)。

单击侧栏“内容”或“样式”选项卡底部的“获取HTML”按钮,将出现“您的代码”面板(见图8.1.2)。 在这里,您可以复制页面HTML。

图8.1.1单击“获取HTML”按钮以获取当前页面的代码
图8.1.2将代码复制到文本编辑器,并将其另存为.html文件,然后在Web浏览器中查看

保存HTML文件 使用文本编辑器粘贴页面的代码,并将其保存为HTML文件(例如,my-new-page.html)。 将此文件需放置在模板根目录(src)内(不是builder所在目录)

预览你的页面 请在浏览器中打开HTML进行查看。 :)


9. 导入、导出页面.lapus项目文件

导出页面

从构建器2.0开始,支持导出页面,以便以后可以将它们导入构建器并进行修订/更新。 如果多人协作,可以将文件导出为.lapus,发送给其协作者,其他用户可以通过导入.lapus文件对页面进行修改。

要导出页面,请先保存页面(如7.1中所述),然后将鼠标悬停在“页面”标签中的页面标题上。 单击绿色下载图标以导出页面。 该页面应立即从浏览器下载为.lapus文件。 另外,当您将鼠标悬停在页面标签底部的“导出”按钮上时,可以通过单击“ .lapus”按钮将所有保存的页面导出到单个.lapus文件中。

图9.1.1通过单击绿色下载图标导出.lapus页面



导入页面

要导入页面,请单击“页面”选项卡上的“导入”按钮。 浏览您的.lapus文件,然后单击“打开”。 导入后,将显示一个模态并带有一个导入提示。
注意:您不能导入其他第三方构建器中导出的文件。

页面导入后,需在左侧边栏“页面管理”中,单击页面标题即可将其加载到主页区域并继续编辑。

图9.1.2导入.lapus页面,然后单击其标题以加载它