格子布局

格子布局是显示格子(名单)内的文章(页,页面portfolio,推荐,产品和定制文章类型)的方式。事实上,格子布局是一个集后的元素,它们的位置和它们的设置,它相当于每格子项目。

2233.png

Impreza允许通过可视拖放编辑器来创造无限的格子布局,并使用它们:

  • 格子内容元素
  • 主题选项>博客>相关文章
  • 主题选项>博客>博客首页
  • 主题选项>博客>存档页
  • 主题选项>博客>搜索结果页
  • 主题选项>商店>产品格子布局>自定义
  • 文件夹小工具
  • 博客插件

管理您所有的格子布局Impreza>格子布局页:

2191.jpeg

格子布局编辑器由表示在格子中的单个项目的元件区域的。您可以移动,编辑,复制或删除每一个元素,悬停添加元素上看到的控件。

2441.png

格子布局元素

点击“加”图标来填充所需的元素的布局:

2442.png

后期图像

显示后期图像。默认情况下,它是在文章,页面,portfolio页面的“特色图片”。

  • 显示占位符时后的图像不存在 -是ON时,示出了具有基于纵横比的着色块图像尺寸值。此块需要从主题选项>颜色>内容颜色>原色的背景颜色。
  • 显示与视频,音频和图片库格式的职位媒体预览 -为ON时,显示:
    • 视频播放器,而不是用“视频”的文章的图像格式
    • 音频播放器,而不是用“音频”的文章的图像格式
    • 图像滑块代替的图像与“画廊”的文章格式
  • 使圆形图像 -为ON时,使一个圆形的图像。添加CSS属性“边界半径:50%”。
  • 图像大小 -选择可用的图像尺寸之一,阅读的图像尺寸

文章标题

显示文章标题。

HTML标签H1,H2,H3,H4,H5,H6,标题默认情况下使用:

  • 从主题选项>印刷术>所有标题的字体设置
  • 从主题选项>颜色>内容颜色>标题Colour彩色
  • 行高度等于“1.4”(在CSS文件中硬编码的时刻)

从文本颜色继承选项设置为ON时,链接把文字颜色值,即使在悬停状态。否则,它从主题选项>颜色>内容颜色>链接颜色和链接悬停颜色值。

发布日期

可见无论是创建或上次更新日期的日期。选择预定义格式中的一种或创建自己的,从网站一般设置有所不同。检查  日期和时间格式的文档

如何进行“人机友好”格式的工作?

  • X分钟前 -不到1个小时已经过去了
  • X小时前 -不到4个小时已经过去了
  • 今天在XX:XX  -超过4个小时已经过去了,但它仍然是当前日期
  • 昨天在XX:XX  -昨天,一整天
  • 2月7日在XX:XX -超过2天过去了,它仍然是一个当年
  • 2018年12月18日 -又一年

文章分类

显示posts分类。目前,它可能显示:

  • 文章标签
  • 发布分类
  • 作品分类
  • 见证分类

从文本颜色继承选项设置为ON时,链接把文字颜色值,即使在悬停状态。否则,它从主题选项>颜色>内容颜色>链接颜色和链接悬停颜色值。

发表作者

显示文章作者的姓名。这个名字是来自用户配置文件采取。

从文本颜色继承选项设置为ON时,链接把文字颜色值,即使在悬停状态。否则,它从主题选项>颜色>内容颜色>链接颜色和链接悬停颜色值。

发表评论

显示的文章的评论数,像“9条意见”。总是显示译言在现场一般设置中指定的站点语言。

从文本颜色继承选项设置为ON时,链接把文字颜色值,即使在悬停状态。否则,它从主题选项>颜色>内容颜色>链接颜色和链接悬停颜色值。

文章内容

显示文章内容。也可以让出posts摘录

当你使用或摘录内容的一部分,一个文章内容的所有HTML标签(包括简码)将被剥离。

文章自定义字段

显示后的自定义字段。您可以选择预定义的Impreza的自定义字段中的一个,或者输入特定的名称,以表明它的价值:

  • 作品页面:自定义影像-显示在格子布局选项中设定的图像,了解作品页面选项
  • 推荐:作者姓名 -显示一个见证的相关数值。
  • 推荐:作者的角色 -显示见证的相关数值。
  • 自定义字段 -显示任何自定义字段的值。

按钮

显示与定制外观的按钮。

自定义HTML

允许放置任何自定义代码在格子布局项目。添加的代码将位于内部  <DIV类= “W-HTML”> </ DIV>  元素。

卧式包装机

允许在一个行中的序列显示格子布局的元件。

立式包装

允许在一个列中显示的格子布局元件的一个在另一个的上面。

自定义链接

使用下面的示例来添加自定义链接到任何格子布局元素的链接

  • {{us_tile_link}} -用于添加自定义链接  作品
  • {{us_testimonial_link}} – 用于添加一个见证的作者链接
  • {{us_attachment_link}} – 用于自定义链接从媒体库图片

2328.png

设计选项

编辑元素时的设计方案是人人平等文章元素,可在“设计选项”选项卡中。

绝对定位 -当此设置为ON时,元素获得“的位置是:绝对的” CSS属性。这使得定位格子项考虑其大小里面的元素。

您可以为4个属性(位置,边距,边框,填充)4个维度(上,右,下,左)设置特定值。你可以使用像素,百分比,EM,REM单位。

2237.png

格子布局设置

格子布局设置影响整个格子的布局区域。

  • 设置的宽高比 -适用于所有格子项目的固定纵横比。当您切换宽高比,格子布局内的所有第一级元素得到绝对定位。它通过添加元素角落里一个红色三角形反映:
    2218.jpeg
  • 隐藏溢出的内容 -剪切元件,其可以是布局区域之外。其实,这增加了CSS属性“溢出:隐藏”。
  • 背景颜色
  • 文字颜色
  • 弯道半径
  • 阴影
  • 暗影悬停

格子布局名称

点击标题用“铅笔”图标,输入所需的名称,然后点击“保存更改”按钮:

2195.jpeg

导出/导入

您可以导出/所有的元素和设置导入任何格子布局。这是非常有用的网站之间传输格子布局。

2196.jpeg

复制/粘贴代码进入并点击“导入”按钮。当您导入另一个布局,以前所有的元素和设置将被删除。

2197.jpeg

格子布局模板

模板是格子元件的预定义布局。使用模板是一个好的开始创建自己的布局。

2198.jpeg

每个模板包括:

  1. 格子布局设置
  2. 元素位置
  3. 元素设置

当您应用模板,你以前所有的元素和设置将被删除。