Impreza主题基础操作

格子

72 views 2019年2月24日 2019年3月4日 imaiko 0

网格布局

网格布局可在Impreza 5中获得

网格布局是一种显示网格(列表)内的帖子(页面,投资组合页面,推荐书,自定义帖子类型)的方式。
实际上,网格布局是一组后置元素,它们的位置和设置,对应于每个网格项目。

2233.png

Impreza允许通过可视化拖放编辑器创建无限的网格布局,并将其用于:

  • 网格内容元素
  • 主题选项>博客>相关帖子
  • 主题选项>博客>博客主页
  • 主题选项>博客>存档页面
  • 主题选项>博客>搜索结果页面
  • Portfolio widget
  • 博客小部件

在Impreza> Grid Layouts页面上管理所有网格布局:

2191.jpeg

网格布局编辑器由代表网格中单个项目的元素区域组成。您可以移动,编辑,复制或删除每个元素,将鼠标悬停在添加的元素上以查看控件。

2194.jpeg

网格布局元素#

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

2193.jpeg

张贴图像#

显示帖子图片。默认情况下,它是帖子,页面,投资组合页面中的“精选图片”。

  • 当图像不存在时显示占位符 – 当显示时,显示基于图像大小值的宽高比的彩色块。此块从主题选项>颜色>内容颜色>原色获取背景颜色。
  • 显示视频,音频和图库格式文章的媒体预览 – 何时打开,显示:
    • 视频播放器,而不是用于“视频” 格式的帖子的图像
    • 音频播放器,而不是“音频” 格式的帖子的图像
    • 图片滑块而不是“Gallery” 格式的帖子的图片
  • 启用圆形图像 – 开启时,制作圆形图像。添加CSS属性“border-radius:50%”。
  • 图像大小 – 选择一个可用的图像大小,阅读有关图像大小。
  • 自定义宽度 – 设置自定义宽度,在大多数情况下为可选。

帖子标题#

显示帖子标题。

当HTML标签为h1,h2,h3,h4,h5,h6时,默认使用标题:

  • 所有字体设置从主题选项>版式>标题
  • 颜色来自主题选项>颜色>内容颜色>标题颜色
  • 行高等于“1.4”(此刻硬编码在CSS文件中)

当继承文本颜色选项为ON时,即使在悬停状态下,链接也会获取文本颜色值。否则,它会从主题选项>颜色>内容颜色>链接颜色和链接悬停颜色获取值。

发布日期#

显示发布日期。您可以选择创建日期或上次更新日期。您还可以自定义日期(和时间)格式,与网站常规设置不同。检查日期和时间格式的文件。

邮政分类#

显示后分类。目前可以显示:

  • 邮政标签
  • 发布类别
  • 投资组合类别
  • 见证分类

当继承文本颜色选项为ON时,即使在悬停状态下,链接也会获取文本颜色值。否则,它会从主题选项>颜色>内容颜色>链接颜色和链接悬停颜色获取值。

发布作者#

显示帖子作者的名字。该名称取自用户配置文件。

当继承文本颜色选项为ON时,即使在悬停状态下,链接也会获取文本颜色值。否则,它会从主题选项>颜色>内容颜色>链接颜色和链接悬停颜色获取值。

发表评论#

显示发表评论的数量,如“9条评论”。始终将翻译后的字词显示为网站常规设置中指定的网站语言。

当继承文本颜色选项为ON时,即使在悬停状态下,链接也会获取文本颜色值。否则,它会从主题选项>颜色>内容颜色>链接颜色和链接悬停颜色获取值。

发布内容#

显示发布内容。还允许显示帖子摘录。

当您使用摘录或内容的一部分时,发布内容的所有HTML标记(包括简码)都将被剥离。

发布自定义字段#

显示帖子的自定义字段。您可以选择预定义的Impreza自定义字段之一或输入特定名称以显示其值:

  • 标题栏:说明 – 显示在页面选项中设置的图像,阅读有关标题栏选项。
  • 标题栏:背景图像 – 显示页面选项中设置的图像,阅读标题栏选项。
  • 投资组合页面:悬停时的图像-显示在网格布局的选项中设置的图像,阅读关于图块选项。
  • 证言:作者姓名 – 显示证言的相关价值。
  • 证言:作者角色 – 显示证言的相关价值。
  • 自定义字段 – 显示任何自定义字段的值。

按钮#

显示具有自定义外观的按钮。

自定义HTML #

允许在网格布局项目中放置任何自定义代码。添加的代码将位于  <div class =“w-html”> </ div>  元素内。

水平包装#

允许在一行中按顺序显示网格布局元素。

垂直包装#

允许在一列中上下显示网格布局元素。

设计选项#

所有Post元素的设计选项均相同,并且在编辑元素时可在“设计选项”选项卡中找到。

绝对定位 – 当设置为ON时,元素获取“position:absolute”CSS属性。这允许将元素放置在栅格项目内而不考虑其大小。

您可以为4个属性(位置,边距,边框,填充)的4个维度(顶部,右侧,底部,左侧)设置特定值。你可以使用px,%,em,rem单位。

2237.png

网格布局设置#

网格布局设置会影响整个网格布局区域。

  • 设置纵横比 – 适用于所有网格项目的固定纵横比。当您打开纵横比时,网格布局内的所有第一级元素都将获得绝对定位。这是通过在元素角上添加一个红色三角形来体现的:
    2218.jpeg
  • 隐藏溢出内容 – 裁剪可能位于版面区域之外的元素。实际上,这增加了CSS属性“overflow:hidden”。
  • 链接 – 设置整个网格布局区域的链接。链接设置后,所有网格布局元素都不可点击。
  • 背景颜色
  • 文本颜色
  • 角落半径
  • 阴影
  • 悬停的阴影

网格布局名称#

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

2195.jpeg

导出/导入#

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

2196.jpeg

将代码复制/粘贴到并点击“导入”按钮。导入其他布局时,所有以前的元素和设置都将被删除。

2197.jpeg

网格布局模板#

该模板是网格元素的预定义布局。使用模板是创建自己的布局的好开始。

2198.jpeg

每个模板都包含:

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

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

网格元素

网格元素在Impreza 5中可用

网格内容元素允许显示具有可定制外观的帖子列表(页面,投资组合页面,证明书,自定义帖子类型)。它与网格布局有关。

网格元素可通过WPBakery Page Builder在每个页面上使用:

2219.jpeg

添加元素后,您可以像WPBakery Page Builder的其他内容元素一样更改其设置。

2220.jpeg

转至外观选项卡以选择所需的网格布局并更改默认的后期图像大小。

2221.jpeg

转到“ 过滤器”选项卡以启用按类别过滤的项目。目前,过滤仅适用于帖子,投资组合页面,见证。

2222.jpeg

转到“ 响应选项”选项卡,根据屏幕宽度调整网格行为:

2223.jpeg

 

帮到你了吗?