标题生成器

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

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

标题拖放编辑器＃

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

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

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

标头元素＃

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

• 文本显示任何自定义文本。您可以更改其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或更小时显示状态

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

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

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

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

标题名称＃

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

标头模板＃

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

每个头文件模板包括：

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

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

标题导出/导入＃

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

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

网页

添加新页面

转到页面>添加新

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

点击添加元素按钮

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

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

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

 

页面选项

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

标题选项＃

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

标题＃

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

粘头＃

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

透明标题＃

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

标题阴影＃

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

粘滞标题初始位置＃

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

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

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

删除页面上的标题＃

选择此选项时，此页面上不显示标题（采用HTML语义）。

标题栏选项＃

覆盖全局标题栏选项。

说明＃

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

标题栏大小＃

选择标题栏大小：

• 小
• 中
• 大
• 巨大

标题栏颜色风格＃

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

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

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

面包屑＃

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

背景图像＃

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

背景图像大小＃

选择背景图像大小（填充区域，适合区域，初始）。

背景图片重复＃

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

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

背景图像位置＃

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

视差效应＃

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

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

覆盖颜色＃

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

侧边栏选项＃

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

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

删除此页面上的侧边栏	侧边栏在右边	侧边栏在左边

页脚选项＃

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

页脚＃

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

删除页面上的页脚＃

选择此选项时，页面上不显示页脚（使用HTML语义）。

 

博客

通过WordPress设置的博客页面＃

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

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

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

博客布局＃

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

经典	平面	瓷砖	牌

小圆圈图像	小方形图像	最新帖子	紧凑

作品集

组合页面

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

组合页面选项

标题，标题栏，边栏，页脚选项＃

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

网格布局选项＃

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

说明＃

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

自定义背景颜色＃

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

自定义文本颜色＃

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

自定义尺寸＃

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

1×1 – 默认大小

2×1 – 双倍宽度的尺寸

1×2 – 尺寸与双高度

2×2 – 双倍大小

悬停的图像＃

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

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

组合元素

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

设置基本选项：

点击选择项目操作：

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

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

启用筛选，然后选择所需的筛选条样式（查看演示页面：样式2，样式3）。

作品集类别

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

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

类别通常用于过滤。

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

 

格子

网格布局

网格布局可在Impreza 5中获得

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

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

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

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

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

网格布局元素＃

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

张贴图像＃

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

• 当图像不存在时显示占位符 – 当显示时，显示基于图像大小值的宽高比的彩色块。此块从主题选项>颜色>内容颜色>原色获取背景颜色。
• 显示视频，音频和图库格式文章的媒体预览 – 何时打开，显示：
  • 视频播放器，而不是用于“视频” 格式的帖子的图像
  • 音频播放器，而不是“音频” 格式的帖子的图像
  • 图片滑块而不是“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单位。

网格布局设置＃

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

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

网格布局名称＃

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

导出/导入＃

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

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

网格布局模板＃

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

每个模板都包含：

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

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

 

元素

行/部分

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

列内容位置＃

连续排列的所有列具有相同的高度（当选择Top，Middle或Bottom时）：

列布局＃

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

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

默认 框 

行高＃

选择行高。

等于内容高度

小垫子

中等填充

大垫子

巨大的填充物

全屏

垂直排列全屏幕中心内容

列差距＃

设置列之间的空白空间。

全宽度内容＃

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

默认行示例：

全宽度内容示例：

行颜色样式＃

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

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

背景图像＃

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

背景图像大小＃

选择所需的图像大小。

背景图像重复＃

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

背景图像位置＃

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

视差效应＃

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

背景视频＃

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

背景滑块＃

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

背景覆盖＃

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

粘滞行＃

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

以宽度禁用粘滞行＃

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

行/部分ID ＃

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

禁用行＃

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

额外的类名称＃

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

 

页面滚轮

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

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

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

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

禁用宽度滚动＃

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

滚动速度（毫秒）＃

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

显示导航点＃

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

点样式＃

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

点的位置＃

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

点大小＃

设置这个值来改变导航点的相对大小，你可以使用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在软件包中有以下翻译：

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

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

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

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

我们在每个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的语言编辑器添加自己的语言变体（如加拿大法语或墨西哥西班牙语）。您可以在同一个域（在语言目录中），子域或完全不同的域中安排不同的语言内容。

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

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

重要的WPML组件＃

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

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

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

标题中的语言切换器＃

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

 

高级修改

页面样式自定义指南

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

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

在哪里写网页的CSS代码＃

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

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

造型特定的元素＃

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

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

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

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

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

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

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

要实现这样的事情：

 

使用子主题

子主题  用于应用对主要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规则之后。

为特定页面定制CSS ＃

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

全球自定义HTML和JavaScript ＃

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

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

为特定页面定制HTML和JavaScript ＃

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

 

Google Analytics事件跟踪

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

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

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

按钮：自定义CSS类的示例＃

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

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

然后在它下面添加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>

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

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

联系人：内部组件的示例＃

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

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

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

记住这个类，在联系人元素下面添加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检查器查找表单类。

我们将使用表单容器的类，’.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”字段中使用它们：

隐藏＃

该类通过将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元素（不是内行）。

重置边距＃

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

默认设置：

使用“重置边距”类：

remove_bg_xs ＃

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