README

Grix 简化了在 Contao 中创建和编辑基于网格的页面内容。

优势

• 内容元素也在后台的网格视图中显示
• 内容元素可以通过拖放在列和行中进行排列
• 可以单击几下更改列的 Bootstrap 特性
• 在后台快速切换预览模式的断点
• 行和列可以简单地嵌套在一起
• 已创建的内容元素可以导入到列中

Grix 在编辑模式

Grix 在预览模式

使用方法

要使用 Grix 网站构建器编辑文章，必须在文章设置中点击“启用 Grix”。完成后，Grix 编辑图标在文章列表视图中变为活跃状态（不再是灰色）。现在可以使用 Grix 编辑文章。

如果再次在文章设置中禁用 Grix，则文章的内容元素将像之前一样输出。

要使用捆绑中提供的 Bootstrap CSS 文件，必须在布局设置中激活“加载 Grix CSS 文件”复选框。

编辑网格

更改行、列和内容元素的特性

要更改行、列和内容元素的特性，必须首先选择元素。为此，请单击元素空白区域。如果选择元素，它将以橙色边框显示。如果在选择时按下“Shift”键，则可以同时选择和编辑多个元素。

选择完成后，可以在标题菜单中更改选择特性的设置。通过单击按钮标签，可以取消定义的特性。通过单击“复制”，可以将选定的元素（及其所有内容）复制。通过单击“取消”，可以取消选择。

更改行的特性

选择行（或多个）后，可以增加或减少下方的间距（rem 单位）。对于行，不可用“宽度”、“偏移”、“推”和“拉”特性 - 因此这些按钮是灰色的。

更改列的特性

选择列（或多个）后，可以使用加号/减号按钮更改“宽度”、“偏移”、“推”和“拉”特性。此外，可以将列及其所有内容元素复制。不能更改列的下间距。

更改内容元素的特性

选择内容元素（或多个）后，可以增加或减少下方的间距（rem 单位）。对于内容元素，“宽度”、“偏移”、“推”和“拉”特性不可用 - 因此这些按钮是灰色的。

为行和列分配 CSS 类

使用Grix安装时，会安装一个名为“Grix CSS”的后端模块。该模块在后台的垂直侧边栏（“布局”组）中可见。使用此模块可以创建CSS样式。这些CSS样式可以分配给网格的行和列。分配是通过行和列的齿轮图标完成的。点击此图标会打开一个弹出窗口。在弹出窗口的上方区域，可以选择之前创建的CSS样式。如果激活了CSS样式，它将以颜色突出显示。

通过拖放排列内容元素

可以通过拖放重新放置内容元素。方法是按住鼠标左键将内容元素拖动到目标位置。绿色占位符框架显示内容元素可以插入的位置。

考虑输出宽度（断点）

对行、列和内容元素的更改适用于在“输出设备”中激活的输出宽度。有四个输出宽度（断点）可供选择

• 超小设备（< 768px）
• 小设备（≥ 768px）
• 中等设备（≥ 992px）
• 大设备（≥ 1200px）

值将被继承到更高的输出宽度。也就是说，“超小设备”的更改也适用于更高的输出宽度。除非在这些输出宽度中定义了自己的值。

编辑菜单

行、列和内容元素都包含各自的编辑菜单。这些菜单出现在元素下方，背景为灰色。这些菜单中的功能因元素而异。

行编辑菜单

行编辑菜单包含以下功能（从左到右）

• 向行添加另一个列
• 在相应行下方插入另一行
• 定义输出宽度的预定义列配置的概览
• 应用预定义的列配置
• 向上或向下移动行
• 删除行

列编辑菜单

列编辑菜单包含以下功能（从左到右）

• 在列内插入一行（行和列可以任意嵌套）
• 向列中插入新的内容元素
• 将已在此文章中创建的内容元素导入到列中
• 删除列

内容元素编辑菜单

内容元素编辑菜单包含以下功能（从左到右）

• 编辑内容元素
• 在相应内容元素下方插入新的内容元素
• 删除内容元素（它仅从网格中删除，实际上并未删除）

激活预览

单击“预览”按钮将隐藏网格的UI元素。此外，将显示没有最大宽度的内容元素。这样可以得到更好的感觉，了解网格在前端的外观。在预览模式下也可以使用拖放进行排列。