1. 主页
  2. 主题
  3. Impreza主题-文档2

Impreza主题-文档2

标题生成器

标题生成器插件允许使用可视化拖放编辑器更改网站标题。当你激活你的主题时,将它安装在Impreza> Addons页面上。

管理Impreza> Headers页面上的所有标题:

2090.jpeg

标题拖放编辑器#

2085.jpeg

编辑器由3行组成:Top,Main,Bottom,每个都有3个单元格:左,中,右。每行代表网站标题区域,它有自己的设置和颜色。顶部和底部区域是可选的,可以在侧面设置中关闭。每个单元格代表一个包含相应位置的标题元素的容器,例如,右侧的单元格将在网站标题的右侧显示其元素。

您可以移动,编辑,复制或删除每个元素,将鼠标悬停在添加的元素上以查看控件。

当您需要隐藏某个元素时,使用“隐藏元素”区域,但保留其设置和内容。例如,当您想要更改不同标题状态的标题外观时。

标头元素#

点击一个“加号”图标来添加一个新元素到任何单元格。在打开的窗口中,您可以看到所有可用元素:

2083.jpeg

  • 文本显示任何自定义文本。您可以更改其3种状态的字体大小,应用链接,设置自定义颜色并添加自定义图标。此外,您可以设置字体来源并启用换行。您可以在“文本”字段中使用<strong>,<br>,<a> HTML标签。
  • 该图显示了媒体库中的任何自定义图像。您可以更改其高度为6种情况,应用链接,为透明标题设置不同的图像。
  • 菜单显示在外观> 菜单页面上创建的WordPress菜单。您可以将多个菜单添加到一个标题中。
  • 链接菜单与之前的菜单元素相同,但有一定的局限性。链接菜单不显示子项目,不突出显示活动菜单项目,并且不能转换为“汉堡包”菜单。
  • 搜索显示搜索字段。您可以选择4个预定义布局之一。当WooCommerce插件被激活时,您也可以打开“Search Shop Products only”选项。
  • 下拉菜单显示文本链接,通过鼠标点击链接或点击触摸屏显示下拉框。您可以更改3种状态的下拉尺寸。此外,您可以将Dropdown设置为语言切换器,它支持WPML,Polylang,qTranslate X插件。
  • 社交链接显示社交网站的图标列表。您可以更改其3种状态的大小,设置基本和悬停样式。
  • 按钮显示一个按钮。您可以选择按钮样式,更改3种状态的按钮大小,设置自定义颜色,添加自定义图标。默认颜色值来自Impreza>主题选项> 颜色 >“主要颜色”和“次要颜色”。
  • 购物车只有在WooCommerce插件被激活时才可用。您可以设置购物车图标及其大小。
  • 自定义HTML允许在标题中放置任何自定义代码。添加的代码将位于<div class =“w-html”> </ div>元素内。
  • 垂直包装允许在一列中将标题元素一个在另一个之上定位,而不管标题的方向如何。
    • 垂直方向的垂直方向不能直接添加垂直包裹
    • 您可以将垂直包装添加到水平包装中
    • 您可以选择垂直包装内部元素的水平对齐
  • 水平包装允许在一行中依次定位标题元素,而不管标题的方向如何。
    • 如果水平方向具有水平方向,则不能将水平方向包裹器直接添加到标题中
    • 您可以将垂直包装添加到垂直包装中
    • 您可以选择水平包装本身的水平对齐
    • 水平包装中的所有元素总是以垂直居中
    • 即使头部没有足够的可用空间,水平包装器中的所有元素也总是放在一行中

标题设置#

标题设置会影响整个标题外观。它们在全局标题设置,顶部区域,主区域和底部区域分开。

头状态#

标题状态是网站标题的响应状态,与屏幕宽度有关,并具有可调整的断点。使用标题状态可以改善小屏幕上的标题外观。

Impreza有3个默认标题状态:

  • 默认 – 当屏幕宽度为901px或更大时显示状态
  • 平板电脑 – 当屏幕宽度从900px到601px包含时显示状态
  • 手机 – 当屏幕宽度为600px或更小时显示状态

标题状态由相关标签表示:

2086.jpeg

打开“ 平板电脑”和“ 移动设备”选项卡以调整这些响应断点:

2123.jpeg

2124.jpeg

使用标题状态时需要了解两点:

  1. 标题元素和标题设置的位置可能会在不同标题状态下有所不同。
    • 在任何状态下移动任何标题元素时,此元素不会在其他两种状态下移动。
    • 当您更改任何状态的任何标题设置时,这些设置在其他两种状态下都不会更改。
  2. 标题元素的内容和设置在不同标题状态下不会有差异。
    • 当您在任何状态下添加新的标题元素时,此元素将自动添加到其他两个状态中到同一个单元格中。
    • 当您在任何状态下编辑任何标题元素时,这些设置也会针对其他两种状态进行更改。
    • 当您在任何状态下删除任何标题元素时,此元素将在其他两种状态中被删除。

标题名称#

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

2093.jpeg

标头模板#

标题模板是标题的预定义布局。使用标题模板是创建自己的网站标题的好开始。

2087.jpeg

每个头文件模板包括:

  1. 标题设置包括平板电脑和手机状态
  2. 标题元素位置包括平板电脑和手机状态
  3. 标题元素内容
  4. 标题元素设置

当您应用标题模板时,您以前的标题元素和设置将被删除。

标题导出/导入#

您可以导出/导入任何标题及其所有元素和设置。此选项可用于在站点之间传输标题。

2088.jpeg

只需将代码复制/粘贴到textarea中,然后单击Import Header按钮。当您导入另一个标题时,您以前的标题元素和设置将被删除。

2089.jpeg

1

Impreza的设置低于4.6版本

什么是标题生成器?

标题生成器是一个独特的Impreza插件,允许您使用可视化拖放构建器修改网站标题。您可以在Addons页面上安装Header Builder 。只有激活了主题,才能安装和使用Header Builder 。

激活后,标题构建器位于Impreza>主题选项选项卡之一上:

6aIi9J5.png

标题拖放编辑器

标题生成器的主要部分是一个可视化拖放编辑器:

48sED05.png

编辑器由3行(顶部,主要,底部)组成,每行3个单元(左,中,右)。每行代表网站标题区域,它有自己的设置和颜色。顶部和底部区域是可选的。每个单元格代表一个包含相应位置的标题元素的容器(例如,右侧的单元格将显示其网站标题右侧的元素)。

您可以通过相关的“加号”按钮将新元素添加到任何单元格中。在弹出窗口中,您可以看到所有可用的元素:

qksktNx.png

您可以移动,编辑或删除每个元素(将鼠标悬停在其上以查看选项):

b6UW32I.png

当您需要隐藏某些元素,但保留其设置和内容(例如,当您想在不同标题状态下更改标题外观)时,使用“隐藏元素”区域。

标题元素

标题元素是灵活的预置元素,可以放入标题中。每个标题元素都有自己的设置。

文本

文本元素显示任何自定义文本。您可以更改其字体大小(3种),应用链接,设置自定义颜色并添加自定义图标。此外,您可以设置字体来源并启用换行。

您可以在“文本”字段中使用<strong>,<br>,<a>标签。

图片

图像元素显示来自媒体库的任何自定义图像。您可以更改其高度(6种情况),应用链接,为透明标题设置不同的图像。

主菜单

主菜单元素显示在菜单页面上设置的主菜单。

您只能将一个主菜单元素放入标题中。

附加菜单

附加菜单元素显示在菜单页面上创建的任何菜单。附加菜单不显示菜单子项目,并且不突出显示活动菜单项目。

搜索字段

搜索字段元素显示搜索字段(令人惊讶!)。您可以更改其文本占位符并选择4个字段布局之一。当启用WooCommerce插件时,您还可以激活“仅在商店产品中搜索”选项。

您只能将一个搜索字段元素放置到您的标题中。

落下

下拉元素显示文本链接,该链接通过鼠标点击链接来显示下拉框(或点击触摸屏)。您可以更改下拉尺寸(3例)。此外,您可以将Dropdown设置为语言切换器,它支持WPML插件。

社交链接

社交链接元素显示流行社交网站的图标列表。您可以更改其大小(3种),选择基本和悬停样式。

按键

按钮元素显示按钮(令人惊讶!)。您可以选择按钮样式,更改按钮大小(3种),设置自定义颜色,添加自定义图标。该按钮的默认颜色取自样式选项的“菜单按钮”颜色值。

大车

购物车元素只有在WooCommerce插件被激活时才可用。您可以设置购物车图标及其大小。

您只能将一个购物车元素放入您的标题中。

自定义HTML

自定义HTML允许在标题中放置任何自定义代码。添加的代码将位于<div class =“w-html”> </ div>元素内。

垂直包装

垂直包装允许在一列中将标题元素一个在另一个之上定位,而不管标题的方向如何。

  • 垂直方向的垂直方向不能直接添加垂直包裹
  • 您可以将垂直包装添加到水平包装中
  • 您可以选择垂直包装内部元素的水平对齐

水平包装

水平包装允许在一行中依次定位标题元素,而不管标题的方向如何。

  • 如果水平方向具有水平方向,则不能将水平方向包裹器直接添加到标题中
  • 您可以将垂直包装添加到垂直包装中
  • 您可以选择水平包装本身的水平对齐
  • 水平包装中的所有元素总是以垂直居中
  • 即使头部没有足够的可用空间,水平包装器中的所有元素也总是放在一行中

标题设置

默认情况下,标题设置会影响所有网站页面上的标题外观。有以下选项:

  • 全局标题设置
    • 方向
    • 粘滞的标题
    • 滚动断点
    • 透明标题
    • 标题宽度
    • 元素对齐
    • 标题阴影
  • 顶部区域设置
    • 显示区域
    • 面积高度
    • 粘滞区域高度
    • 全宽度内容
  • 主区域设置
    • 面积高度
    • 粘滞区域高度
    • 全宽度内容
    • 背景图
    • 背景图像大小
    • 背景图片重复
    • 背景图像附件
    • 背景图像位置
  • 底部区域设置
    • 显示区域
    • 面积高度
    • 粘滞区域高度
    • 全宽度内容

标头状态

标题状态是与屏幕宽度相关的网站标题的响应状态。使用标题状态可以改善小屏幕上的标题外观。

Impreza有3个标题状态:

  • 默认 – 当屏幕宽度为901px或更大时显示状态
  • 平板电脑 – 当屏幕宽度从900px到601px包含时显示状态
  • 手机 – 当屏幕宽度为600px或更小时显示状态

标题状态由界面中的相应选项卡表示:

SfOz83H.png

使用标题状态时需要了解两点:

  1. 标题元素和标题设置的位置可能会在不同标题状态下有所不同。
    • 在任何状态下移动任何标题元素时,此元素不会在其他两种状态下移动。
    • 当您更改任何状态的任何标题设置时,这些设置在其他两种状态下都不会更改。
  2. 标题元素的内容和设置在不同标题状态下不会有差异。
    • 在任何状态下添加新的标题元素时,此元素将自动添加到其他两种状态(位于同一单元格中)。
    • 当您在任何状态下编辑任何标题元素时,这些设置也会针对其他两种状态进行更改。
    • 当您在任何状态下删除任何标题元素时,此元素将在其他两种状态中被删除。

标题模板

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

CWhicTP.png

每个头文件模板包括:

  1. 标题设置(包括平板电脑和手机状态)
  2. 标题元素的位置(包括平板电脑和手机状态)
  3. 标题元素的内容(虚拟)
  4. 标题元素的设置

当您应用任何标题模板时,所有当前的标题元素和设置都将被擦除。

网页

添加新页面

转到页面>添加新

50.png

输入标题并将WPBakery Page Builder切换到后端编辑器

2186.jpeg

点击添加元素按钮

2182.jpeg

选择所需的元素并点击它将其添加到您的页面

2183.jpeg

如果您需要/想要手动编辑短代码/代码,您可以将WPBakery Page Builder切换到经典模式

2184.jpeg

2185.jpeg

一旦添加了所有元素,请不要忘记保存更改。

 

页面选项

这些选项可以在页面编辑器的右侧(RTL网站的左侧)找到。

标题选项#

当Header Builder停用时,您可以覆盖标题位置,也可以在特定页面上将其删除,所有其他选项由Header Builder提供。

2024.jpeg

标题#

在Impreza>标题中应用通过标题生成器创建的任何标题。

粘头#

覆盖此页面的全局“ 粘滞页眉 ”选项的值,以及特定页眉状态的值。

透明标题#

覆盖此页面的全局“ 透明标题 ”选项的值,以及特定标题状态的值。

标题阴影#

除去特定页面上的阴影,此选项仅隐藏阴影以显示初始状态。

粘滞标题初始位置#

为页面选择粘性标题的起始位置。该选项仅适用于水平定向标题。

注意:仅在以下情况下应用“在第一个内容行下方”和“在第一个内容行底部”值:

  • 该页面没有标题栏
  • 该页面没有侧边栏
  • 屏幕宽度大于900px

删除页面上的标题#

选择此选项时,此页面上不显示标题(采用HTML语义)。

标题栏选项#

覆盖全局标题栏选项。

2025.jpeg

说明#

添加说明,该说明将显示在页面标题旁边。

1454.jpg

标题栏大小#

选择标题栏大小:

  • 巨大

标题栏颜色风格#

选择一种预定义的颜色样式:

  • 内容颜色
  • 备用内容颜色
  • 主要的bg和白色文本
  • 中学bg和白色文本
  • 顶部页脚颜色
  • 底部页脚颜色

所有这些颜色样式都可以在主题选项颜色中更改。

面包屑#

选择是否在此页面上显示或隐藏面包屑。

背景图像#

从媒体库中选择一个图像,或上传新的​​图像作为此特定页面上标题栏的背景。

背景图像大小#

选择背景图像大小(填充区域,适合区域,初始)。

背景图片重复#

选择标题栏背景图像的重复方式:

  • 重复
  • 水平
  • 垂直
  • 没有

背景图像位置#

设置背景图像的位置,此时有9个值可用。

视差效应#

选择一个预定义的视差效果:

  1. 没有
  2. 垂直视差
  3. 垂直反转视差
  4. 水平视差
  5. 固定

覆盖颜色#

选择所需的叠加颜色,它会出现在背景图像上方。

侧边栏选项#

侧边栏是一个特殊区域,用于网站页面显示任何小工具区域。

选择特定页面的边栏位置和内容(请参见下面的屏幕截图),这些选项会覆盖边栏位置主题选项。

2026.jpeg

删除此页面上的侧边栏 侧边栏在右边 侧边栏在左边
1439.jpg 1447.jpg 1446.jpg

页脚选项#

覆盖特定页面的全局页脚选项。

2027.jpeg

页脚#

选择将在特定页面上显示的所需页脚。

删除页面上的页脚#

选择此选项时,页面上不显示页脚(使用HTML语义)。

设置一个页面

第1步:创建一个新页面。添加新行并追加您需要的内容。

1346.jpg

第2步:点击铅笔图标编辑这一行。填写行ID字段,该字段必须没有前导散列。

1910.jpeg

第3步:导航到外观>菜单并创建一个新菜单。然后将自定义链接添加到菜单中的这些行,每个链接将如下所示:http: //yoursite.com/#textblock1。请注意,链接不能只是“textblock1”,而是“#textblock1”(带前导散列)。这些链接将充当页面上行的平滑滚动链接,并直接导向这些行。

62.png

 

博客

博客文章列表

使用WPBakery页面生成器的网格元素显示帖子网格。

1通过WPBakery页面生成器元素的博客页面,适用于5.x版之前的Impreza

通过WordPress设置的博客页面#

创建一个新页面,进入设置>阅读。

257.png

将创建的页面设置为“帖子页面”:

258.png

要更改外观,请导航到主题选项>博客选项,并更改与“博客主页”部分相关的选项。

博客布局#

Impreza包含8种不同的布局,用于显示博客文章列表。另外,您可以创建自己的网格布局。

经典 平面 瓷砖
2102.jpeg 2103.jpeg 2104.jpeg 2105.jpeg
小圆圈图像 小方形图像 最新帖子 紧凑
2106.jpeg 2107.jpeg 2108.jpeg 2109.jpeg

作品集

组合页面

投资组合页面与常规页面有所不同,具有更多选项并且可以在网格内容元素中显示。您可以添加,编辑,删除投资组合页面,通过相关的管理菜单指定类似常规帖子的类别:

1968.jpeg

组合页面选项

标题,标题栏,边栏,页脚选项#

对于每个组合页面,您可以应用所有常规页面描述的页面选项。

网格布局选项#

以下选项可用于网格布局。

2235.png

说明#

“ 描述 ”字段已移至Impreza 5.0中的“ 摘录 ”字段

自定义背景颜色#

此选项设置网格项目的颜色,对应于投资组合页面。它将覆盖网格布局背景颜色选项。

自定义文本颜色#

此选项设置网格项目的颜色,对应于投资组合页面。它将覆盖网格布局文本颜色选项。

自定义尺寸#

此选项按比例放大网格项目的大小,该项目对应于投资组合页面。检查“黑冰岛”格子项目的例子:

1×1 – 默认大小
1768.jpeg

2×1 – 双倍宽度的尺寸
1769.jpeg

1×2 – 尺寸与双高度
1770.jpeg

2×2 – 双倍大小
1771.jpeg

悬停的图像#

您可以为投资组合页面设置额外的图像,这可以在网格布局中使用。

在Impreza版本4中,此选项用于组合元素的“样式1”和“样式18”。

组合元素

要显示投资组合页面,请使用投资组合内容元素,该内容元素可通过WPBakery Page Builder(以前称为Visual Composer)在每个页面上提供:

1947.png

设置基本选项:

1935.jpeg

点击选择项目操作:

1890.jpeg

  • 导航到商品页面 – 默认点击操作时,您将被重定向到商品页面。
  • 在弹出菜单中打开项目的页面 – 项目的内容将显示在弹出窗口中。看看下面的例子:例1,例2,例3,例4。
  • 在弹出菜单中打开项目的特色图片 – 项目的特色图片将显示在弹出窗口中。看看下一个例子。

通过相应的选项卡自定义投资组合网格外观。Impreza包含18种网格拼贴及其悬停效果。

1936.jpeg

启用筛选,然后选择所需的筛选条样式(查看演示页面:样式2,样式3)。

1970.jpeg

作品集类别

您可以在相应的管理页面添加,编辑和删除投资组合类别:

1971.jpeg

您可以在创建新投资组合页面时设置类别。

1372.jpg

类别通常用于过滤。

362.png

在组合元素设置中,您可以选择将在此网格中显示的类别。

1371.jpg

 

格子

网格布局

网格布局可在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

 

元素

点击“铅笔”图标编辑列设置:

2178.jpeg

一般选项#

您可以将所需的文本颜色值应用到此列,选择所需的动画类型,添加一个Extra类名称并在自定义CSS中引用它。

2258.jpeg

设计选项#

您可以将所需的背景颜色值应用于此列,输入边距,边框和填充的自定义值。阅读官方文档了解更多信息。

2259.jpeg

响应选项#

您可以指定列宽或标记复选框以在不同设备上隐藏此列。阅读官方文档了解更多信息。

2260.jpeg

2252.jpeg  大屏幕 – 宽度超过1200像素
2253.jpeg 中等屏幕 – 992px – 1199px的宽度
2254.jpeg 小屏幕 – 宽度为768px – 991px
2257.jpeg 超小屏幕 – 宽度小于767px

行/部分

点击“铅笔”图标来编辑行设置:

2226.jpeg

列内容位置#

连续排列的所有列具有相同的高度(当选择Top,Middle或Bottom时):

列布局#

  • 默认 – 列有25px(左右)内部填充
  • 框 – 列具有相对于屏幕宽度的预定义填充。此布局适用于具有背景的列。

您可以在主演示中看到列示例。

默认 1522.jpg框 1525.jpg

行高#

选择行高。

等于内容高度1513.jpg

小垫子1512.jpg

中等填充1511.jpg

大垫子1514.jpg

巨大的填充物1515.jpg

全屏1516.jpg

垂直排列全屏幕中心内容

1518.jpg

列差距#

设置列之间的空白空间。

1870.jpeg

全宽度内容#

选中此复选框可将内容拉伸至全宽。

默认行示例:

721.png

全宽度内容示例:

719.png

行颜色样式#

选择4种预定义颜色样式之一或设置自定义颜色。

选择自定义颜色可激活其他选项:

2227.jpeg

背景图像#

您可以设置自定义部分背景图片或将其保留为空。

背景图像大小#

选择所需的图像大小。2228.jpeg

背景图像重复#

选择如何重复背景图像或选择不重复2229.jpeg

背景图像位置#

选择背景图像出现的位置。2230.jpeg

视差效应#

选择三种视差效果之一或禁用它。2231.jpeg

背景视频#

将您的视频文件上传到WordPress媒体库,并添加一个链接到相应的字段。

背景滑块#

选择您的Revolution Slider并将其用作背景。请注意,设置为背景时,所有滑块控件都不可访问。

背景覆盖#

您可以选择叠加颜色及其不透明度。

2232.jpeg

粘滞行#

您可以在滚动期间将任何行设置为固定在页面的顶部,可用于大于900px的屏幕宽度。

1885.jpeg

以宽度禁用粘滞行#

您可以将此值减小到300px,以在小屏幕上使用粘滞行。

1932.jpeg

行/部分ID #

此选项有助于为一个页面导航创建菜单。

禁用行#

打开此选项可在网站的公开面上隐藏此行。

额外的类名称#

为CSS自定义的此行设置额外的类名称。

 

页面滚轮

2238.jpeg

页面滚动器允许通过鼠标滚轮或触摸屏上的滑动手势在页面部分/行之间跳转。例

将页面滚动器添加到页面中时,它会自动考虑此页面的所有行并启用它们之间的滚动。

  • 无论行设置如何,页面上的每一行都会参与
  • 内行不参与(仅[vc_row],而不是[vc_inner_row])
  • 行中的行也参与滚动,但它们不形成导航点

注意:为避免重叠导航点的问题,您需要将页面滚动条元素添加到页面的最后一行,但不要将其定位在单独的行中,只需将其添加到已有元素的最后一行即可。

2239.jpeg

禁用宽度滚动#

此选项允许通过屏幕宽度禁用某些设备上的页面滚动条。您可以将其设置为300px,以使Page Scroller可在包括手机在内的所有设备上工作。

滚动速度(毫秒)#

该选项设置行之间的滚动间隔。

显示导航点#

此选项允许启用双面导航点,这有助于指示多行。每个导航点都与此页面的一行有关。例1,例2。

点样式#

选择一种预定义的导航点样式。看例子:

1920.jpeg1921.jpeg1922.jpeg1923.jpeg

点的位置#

选择导航点的右侧或左侧位置。

点大小#

设置这个值来改变导航点的相对大小,你可以使用px,em,rem和%。默认值是10px。

圆点颜色#

使用颜色选择器应用所需的导航点颜色。默认点颜色从主题选项>颜色>内容颜色获得“文本颜色”值。

支持的插件

WPBakery Page Builder (formerly Visual Composer)

Revolution Slider

CodeLights

Ultimate Addons for Visual Composer

WooCommerce

Contact Form 7

Gravity Forms

主题翻译

翻译主题

Impreza在软件包中有以下翻译:

  • 德语
  • 俄语
  • 意大利
  • 法国
  • 西班牙语
  • 巴西葡萄牙语
  • 荷兰
  • 土耳其

当您在设置>常规中的“网站语言”选项中更改语言时,会自动应用翻译:

245.png

所有这些语言的翻译都是由我们的客户在这个合作项目中完成的。通过添加您的电子邮件和名称加入该项目,之后您可以:

  • 将未翻译的字符串与其他人翻译成您的语言
  • 更新或修复现有的翻译字符串
  • 下载您的语言的翻译文件

我们在每个Impreza更新中更新此项目的所有翻译。

我需要将Impreza翻译成其他语言?#

如果上面列表中没有您的语言,你可以在本地翻译主题:

  1. 下载并安装POEdit。
  2. 找到default.po文件在/ Impreza / framework / languages文件夹中,将其复制并通过翻译所需的字符串进行编辑。
  3. 用ISO代码名称保存文件。例如,带有西班牙语的文件应该命名为es_ES。
  4. 安装Impreza-child主题。
  5. 通过FTP访问您的服务器,并将语言文件(包括.po和.mo)上传到该语言的语言文件夹 Impreza-child主题(位于wp-content / themes / Impreza-child / languages),如果它不存在,您应该创建文件夹。
  6. 在管理员信息中心转到设置>常规,然后在“ 网站语言 ”选项中选择所需的语言(如上面的截图所示)。

与主题一起使用WPML

使用WPML可以轻松运行带有单个WordPress安装的多语言网站。它带有超过40种语言。您还可以使用WPML的语言编辑器添加自己的语言变体(如加拿大法语或墨西哥西班牙语)。您可以在同一个域(在语言目录中),子域或完全不同的域中安排不同的语言内容。

2190.jpeg

Impreza与WPML 100%兼容,阅读官方WPML指南:使用Impreza主题和WPML构建多语言网站。

在WPML网站上查找入门指南中的更多信息。

重要的WPML组件#

您可以使用这些附加插件来增强您的站点翻译过程,所有以下附件都是WPML多语言CMS软件包的一部分:

翻译管理。有了这个组件,您可以将更多的组织带入您网站的翻译过程。您可以在一个地方查看所有类型的翻译状态信息内容。此外,您可以管理团队中的人员或通过翻译仪表板使用翻译服务。更多信息在这里:使用指南和功能概述。

字符串翻译。该组件可帮助您翻译任何不属于帖子,页面或分类标准的内容。这包括网站的标语,管理员屏幕中的一般文本,小部件标题和许多其他文本。更多的信息在这里:模块激活&第一步骤和slu translation翻译

标题中的语言切换器#

Impreza包含特殊的Dropdown标题元素,它支持WPML,因此您可以在Header Builder中设置语言切换器。

1998.jpeg

374.png

 

高级修改

页面样式自定义指南

你需要有基本的CSS知识才能使用指南。否则,您可能需要先学习CSS。

您可以使用CSS语言创建特定的样式修改

在哪里写网页的CSS代码#

最有可能的是,您正在使用Impreza附带的WPBakery Page Builder(Visual Composer)插件。点击WPBakery Page Builder编辑器顶部的特殊按钮,插入相关代码:

2187.jpeg

将代码插入到显示的字段中,保存更改并预览页面/帖子以查看更改。

1461.png

造型特定的元素#

几乎每个元素都有一个称为“Extra class name”的特殊字段,可用于识别页面上的此特定元素:

1462.png

只需输入一些独特的类名称,然后,您就可以为其添加自定义CSS样式:

1463.png

造型特定元素的内部标签#

假设我们想在这个按钮的内部设计一个星形图标:

1464.png

我们需要编辑它并添加一些独特的类名,如下所示:

1465.png

在FireFox中打开页面(如果您没有FireFox,请安装它 – 至少为了开发目的)。FireFox需要FireBug插件(如果你没有它,可以在这里安装)。在具有自定义类名称的元素中查找所需的标记:

1466.png

所以我们可以像这样写一个相关标签的样式:

1467.png

要实现这样的事情:

1468.png

 

使用子主题

子主题  用于应用对主要Impreza主题的CSS样式或功能的更改,并且希望继续接收主要主题更新。

您可以按照您安装主Impreza 主题的相同方式安装Child主题- 通过FTP或通过WordPress管理面板。它带有空白文件,因此您应该将自定义代码直接添加到子主题文件中,以使更改显示在您的网站上。这些更改在Impreza更新期间不会被覆盖。

如果您没有计划修改主题,则没有使用子主题的缺点。儿童主题只是我们提供的选择 – 这不是强制性的。

您还可以通过整个站点或特定页面的主题选项应用自定义CSS,HTML,JavaScript代码,阅读相应的文章,这些更改在Impreza更新期间不会被覆盖。

我们不建议通过儿童主题覆盖模板,因为它们会经常更改,并且您的自定义有可能在更新后停止工作,并且应该将更改重新应用到主要主题文件的新副本。如果您依赖重写的模板,请将模板文件的副本从/ Impreza / framework / templates /移动到/ Impreza-child / templates /文件夹,以便进行更改。

 

应用自定义CSS,HTML和JavaScript

全局自定义CSS #

要通过CSS自定义主题,您可以使用位于Impreza >主题选项>自定义代码>自定义CSS上的“自定义CSS”字段。来自该字段的代码将被添加到主题选项生成的样式中,放在所有其他主题CSS规则之后。

1853.jpeg

为特定页面定制CSS #

请阅读“  页面样式自定义指南”  了解详细信

全球自定义HTML和JavaScript #

当您想要为网站的所有页面添加一些脚本或其他元素时,可以使用位于Impreza>主题选项>自定义代码>自定义HTML中的 “自定义HTML”字段。

1854.jpeg

此字段中的代码将添加到您网站的页脚部分。您可以在<script> </ script>标记中使用JavaScript代码。此外,您可以将Google Analytics或其他跟踪代码添加到此字段中。

为特定页面定制HTML和JavaScript #

您可以使用Raw HTML和Raw JS元素,通过WPBakery Page Builder(以前称为Visual Composer)将自定义代码附加到特定页面。

1562.jpg

 

Google Analytics事件跟踪

您可以将GA事件追踪添加到几乎任何以Impreza主题呈现的元素。在大多数情况下,您只需将其他类添加到元素中,并添加一个简单的JS代码片段,其代码将发送事件信息。

本指南不包含您的网站的基本Google Analytics设置。如果您需要基本设置的信息,请访问此页面。另外,如果您是GA Events的新成员,请阅读本指南。

我们描述了3个应用于主题元素的事件跟踪示例:

按钮:自定义CSS类的示例#

您可以在一个页面上有很多按钮,并且您可能需要为按钮添加少量事件追踪。这就是将事件附加到特定按钮很重要的原因。幸运的是,大多数主题元素在其设置中都有“额外类名”字段,因此您可以区分需要的元素。

因此,作为第一步,创建一个新按钮,设置想要的URL,标签和其他参数,然后添加独特的类到’Extra class name’字段中:

1590.png

然后在它下面添加Raw JS元素并向其添加以下代码:

<script type="text/javascript"> 
jQuery(document).ready(function(){
  jQuery('.ga-sample-btn').on('click', function() {
    ga('send', 'event', 'Buttons', 'click', 'Sample Button');
  });
});
</script>

使用这些元素的行将如下所示:

1599.png

现在,如果您保存页面并单击该按钮,它将发送名为’按钮’的类别的GA事件,名为’click’的动作和名为’Sample Button’的标签。

联系人:内部组件的示例#

让我们尝试一些更复杂的事情:我们将发送GA事件不是针对整个元素,而是针对其组件。

与前面的示例相同,首先创建一个新的“联系人”元素。填充字段并添加独特的类,因为有时您可能会有这样的元素:

1591.png

您可能会注意到,我们添加了手机链接,因此当它被点击时,手机应用程序可能会被打开。现在保存页面并在浏览器的新选项卡中查看结果。然后,使用Web检查器,您可以找到可用于onClick JS事件附件的内部组件类:

1597.png

记住这个类,在联系人元素下面添加Raw JS,并用以下代码填充它:

<script type="text/javascript"> 
jQuery(document).ready(function(){
  jQuery('.ga-sample-contacts .w-contacts-item.for_email a').on('click', function() {
    ga('send', 'event', 'Contacts', 'click', 'Email');
  });
  jQuery('.ga-sample-contacts .w-contacts-item.for_phone a').on('click', function() {
    ga('send', 'event', 'Contacts', 'click', 'Phone');
  });
});
</script>

如您所见,我们正在为2 GA事件发送添加代码 – 一个用于电子邮件,一个用于电话。我们正在使用我们添加的独特类,然后是所需组件的类,然后使用’a’标签名称,因为电话和电子邮件都是用链接表示的。

联系表格:表格的一个例子提交#

在这个例子中,我们想要证明你可以附加GA事件发送不仅仅是一个简单的点击,而是几乎所有发生在你的页面上的JS事件。有时候知道您的联系表格提交了多少次(这包括甚至是提交时的情况,但由于验证错误而未发送),并将其与收到的实际电子邮件进行比较。

在这个例子中,我们不会为表单添加一个唯一的类,因为通常页面上只有一个Contact Form元素。但是,如果您需要,您可以将自定义类添加到您的表单并将其用于您的JS代码。

因此,首先添加表单,填写字段,保存并更新页面。然后在新的浏览器选项卡中查看该页面,并使用Web检查器查找表单类。

1596.png

我们将使用表单容器的类,’.w-form.for_cform’。考虑到这一点,用以下代码添加Raw JS:

<script type="text/javascript"> 
jQuery(document).ready(function(){
  jQuery('.w-form.for_cform form').on('submit', function() {
    ga('send', 'event', 'Contact Forms', 'send', 'Sample Form');
  });
});
</script>

现在,每次用户点击表单按钮时,它都会发送包含“联系表单”类别,“发送”操作和“样本表单”标签的GA事件。

CSS助手类

CSS助手类是有用的分配给主题元素一些特定的外观和行为,这些不包含在选项中。

Globle类#

全局类可以应用于任何主题元素。他们通常在内容元素的“Extra class name”字段中使用它们:

1908.png

隐藏#

该类通过将display:none!重要的 CSS属性赋予它来完全隐藏所需的元素。

vc_hidden-lg
vc_hidden-md
vc_hidden-sm
vc_hidden-xs #

这些类通过分配display:none来隐藏所需的元素!对于不同的屏幕宽度,重要的 CSS属性:

  • vc_hidden-lg – 屏幕宽度超过1120px
  • vc_hidden-md – 在992和1199px之间的屏幕宽度
  • vc_hidden-sm – 在768和991px之间的屏幕宽度
  • vc_hidden-xs – 屏幕宽度低于767px

align_left
align_right
align_center
align_justify #

这些类通过分配文本对齐 CSS属性来强制所需元素(及其内部元素)的文本对齐。

align_center_xs #

该类强制文本对齐到所需元素(及其内部元素)的“中心”,仅在屏幕宽度768px以下。

text_thin #

该类通过指定font -weight:300 CSS属性来更改所需元素(及其内部元素)的文本字体粗细。

text_bold #

该类通过分配font -weight:700 CSS属性来更改所需元素(及其内部元素)的文本的字体粗细。

highlight_primary #

该类通过指定颜色 CSS属性将主要文本颜色应用于所需元素(及其内部元素),值将从主题选项>颜色>内容颜色>主要颜色。

highlight_secondary #

该类通过指定颜色 CSS属性将辅助文本颜色应用于所需元素(及其内部元素),值将从主题选项>颜色>内容颜色>辅助颜色。

highlight_faded #

该类通过指定颜色 CSS属性将淡化文本颜色应用于所需元素(及其内部元素),值将从主题选项>颜色>内容颜色>淡化颜色。

highlight_white #

该类通过分配颜色将白色文本颜色应用于所需元素(及其内部元素):#fff CSS属性。

highlight_black #

该类通过分配颜色将黑色文本颜色应用于所需元素(及其内部元素):#000 CSS属性。

highlight_primary_bg
highlight_secondary_bg
highlight_faded_bg
highlight_dark_bg
highlight_light_bg #

当需要使用背景色突出显示某些文本时,这些类是有用的。这些类应用display:inline-block; 填充:0.5rem 1rem; CSS属性和相关的颜色值。

行类#

行类可以通过“Extra class name”字段应用于Row元素(不是内行)。

重置边距#

当您使用“默认”列布局时,此类将列与背景对齐,请查看下面的示例:

默认设置:
1902.jpeg

使用“重置边距”类:
1903.jpeg

remove_bg_xs #

此类隐藏行背景图像屏幕宽度低于768px。

更新于 2018年12月4日

帮到你了吗?

相关文章