标题生成器
标题生成器插件允许使用可视化拖放编辑器更改网站标题。当你激活你的主题时,将它安装在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或更小时显示状态
标题状态由相关标签表示:
打开“ 平板电脑”和“ 移动设备”选项卡以调整这些响应断点:
使用标题状态时需要了解两点:
- 标题元素和标题设置的位置可能会在不同标题状态下有所不同。
- 在任何状态下移动任何标题元素时,此元素不会在其他两种状态下移动。
- 当您更改任何状态的任何标题设置时,这些设置在其他两种状态下都不会更改。
- 标题元素的内容和设置在不同标题状态下不会有差异。
- 当您在任何状态下添加新的标题元素时,此元素将自动添加到其他两个状态中到同一个单元格中。
- 当您在任何状态下编辑任何标题元素时,这些设置也会针对其他两种状态进行更改。
- 当您在任何状态下删除任何标题元素时,此元素将在其他两种状态中被删除。
标题名称#
点击带有“铅笔”图标的标题并输入所需的名称,然后点击保存更改按钮:
标头模板#
标题模板是标题的预定义布局。使用标题模板是创建自己的网站标题的好开始。
每个头文件模板包括:
- 标题设置包括平板电脑和手机状态
- 标题元素位置包括平板电脑和手机状态
- 标题元素内容
- 标题元素设置
当您应用标题模板时,您以前的标题元素和设置将被删除。
标题导出/导入#
您可以导出/导入任何标题及其所有元素和设置。此选项可用于在站点之间传输标题。
只需将代码复制/粘贴到textarea中,然后单击Import Header按钮。当您导入另一个标题时,您以前的标题元素和设置将被删除。
Impreza的设置低于4.6版本
什么是标题生成器?
标题生成器是一个独特的Impreza插件,允许您使用可视化拖放构建器修改网站标题。您可以在Addons页面上安装Header Builder 。只有激活了主题,才能安装和使用Header Builder 。
激活后,标题构建器位于Impreza>主题选项选项卡之一上:
标题拖放编辑器
标题生成器的主要部分是一个可视化拖放编辑器:
编辑器由3行(顶部,主要,底部)组成,每行3个单元(左,中,右)。每行代表网站标题区域,它有自己的设置和颜色。顶部和底部区域是可选的。每个单元格代表一个包含相应位置的标题元素的容器(例如,右侧的单元格将显示其网站标题右侧的元素)。
您可以通过相关的“加号”按钮将新元素添加到任何单元格中。在弹出窗口中,您可以看到所有可用的元素:
您可以移动,编辑或删除每个元素(将鼠标悬停在其上以查看选项):
当您需要隐藏某些元素,但保留其设置和内容(例如,当您想在不同标题状态下更改标题外观)时,使用“隐藏元素”区域。
标题元素
标题元素是灵活的预置元素,可以放入标题中。每个标题元素都有自己的设置。
文本
文本元素显示任何自定义文本。您可以更改其字体大小(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或更小时显示状态
标题状态由界面中的相应选项卡表示:
使用标题状态时需要了解两点:
- 标题元素和标题设置的位置可能会在不同标题状态下有所不同。
- 在任何状态下移动任何标题元素时,此元素不会在其他两种状态下移动。
- 当您更改任何状态的任何标题设置时,这些设置在其他两种状态下都不会更改。
- 标题元素的内容和设置在不同标题状态下不会有差异。
- 在任何状态下添加新的标题元素时,此元素将自动添加到其他两种状态(位于同一单元格中)。
- 当您在任何状态下编辑任何标题元素时,这些设置也会针对其他两种状态进行更改。
- 当您在任何状态下删除任何标题元素时,此元素将在其他两种状态中被删除。
标题模板
标题模板是标题元素的预定义布局。使用标题模板是创建自己的网站标题的好开始。
每个头文件模板包括:
- 标题设置(包括平板电脑和手机状态)
- 标题元素的位置(包括平板电脑和手机状态)
- 标题元素的内容(虚拟)
- 标题元素的设置
当您应用任何标题模板时,所有当前的标题元素和设置都将被擦除。
网页
添加新页面
转到页面>添加新
输入标题并将WPBakery Page Builder切换到后端编辑器
点击添加元素按钮
选择所需的元素并点击它将其添加到您的页面
如果您需要/想要手动编辑短代码/代码,您可以将WPBakery Page Builder切换到经典模式
一旦添加了所有元素,请不要忘记保存更改。
页面选项
这些选项可以在页面编辑器的右侧(RTL网站的左侧)找到。
标题选项#
当Header Builder停用时,您可以覆盖标题位置,也可以在特定页面上将其删除,所有其他选项由Header Builder提供。
标题#
在Impreza>标题中应用通过标题生成器创建的任何标题。
粘头#
覆盖此页面的全局“ 粘滞页眉 ”选项的值,以及特定页眉状态的值。
透明标题#
覆盖此页面的全局“ 透明标题 ”选项的值,以及特定标题状态的值。
标题阴影#
除去特定页面上的阴影,此选项仅隐藏阴影以显示初始状态。
粘滞标题初始位置#
为页面选择粘性标题的起始位置。该选项仅适用于水平定向标题。
注意:仅在以下情况下应用“在第一个内容行下方”和“在第一个内容行底部”值:
- 该页面没有标题栏
- 该页面没有侧边栏
- 屏幕宽度大于900px
删除页面上的标题#
选择此选项时,此页面上不显示标题(采用HTML语义)。
标题栏选项#
覆盖全局标题栏选项。
说明#
添加说明,该说明将显示在页面标题旁边。
标题栏大小#
选择标题栏大小:
- 小
- 中
- 大
- 巨大
标题栏颜色风格#
选择一种预定义的颜色样式:
- 内容颜色
- 备用内容颜色
- 主要的bg和白色文本
- 中学bg和白色文本
- 顶部页脚颜色
- 底部页脚颜色
所有这些颜色样式都可以在主题选项颜色中更改。
面包屑#
选择是否在此页面上显示或隐藏面包屑。
背景图像#
从媒体库中选择一个图像,或上传新的图像作为此特定页面上标题栏的背景。
背景图像大小#
选择背景图像大小(填充区域,适合区域,初始)。
背景图片重复#
选择标题栏背景图像的重复方式:
- 重复
- 水平
- 垂直
- 没有
背景图像位置#
设置背景图像的位置,此时有9个值可用。
视差效应#
选择一个预定义的视差效果:
- 没有
- 垂直视差
- 垂直反转视差
- 水平视差
- 固定
覆盖颜色#
选择所需的叠加颜色,它会出现在背景图像上方。
侧边栏选项#
侧边栏是一个特殊区域,用于网站页面显示任何小工具区域。
选择特定页面的边栏位置和内容(请参见下面的屏幕截图),这些选项会覆盖边栏位置主题选项。
删除此页面上的侧边栏 | 侧边栏在右边 | 侧边栏在左边 |
---|---|---|
![]() |
![]() |
![]() |
页脚选项#
覆盖特定页面的全局页脚选项。
页脚#
选择将在特定页面上显示的所需页脚。
删除页面上的页脚#
选择此选项时,页面上不显示页脚(使用HTML语义)。
设置一个页面
第1步:创建一个新页面。添加新行并追加您需要的内容。
第2步:点击铅笔图标编辑这一行。填写行ID字段,该字段必须没有前导散列。
第3步:导航到外观>菜单并创建一个新菜单。然后将自定义链接添加到菜单中的这些行,每个链接将如下所示:http: //yoursite.com/#textblock1。请注意,链接不能只是“textblock1”,而是“#textblock1”(带前导散列)。这些链接将充当页面上行的平滑滚动链接,并直接导向这些行。
博客
博客文章列表
使用WPBakery页面生成器的网格元素显示帖子网格。
通过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”。
- 链接 – 设置整个网格布局区域的链接。链接设置后,所有网格布局元素都不可点击。
- 背景颜色
- 文本颜色
- 角落半径
- 阴影
- 悬停的阴影
网格布局名称#
点击带有“铅笔”图标的标题并输入所需的名称,然后点击“保存更改”按钮:
导出/导入#
您可以使用所有元素和设置导出/导入任何网格布局。在网站之间传输网格布局非常有用。
将代码复制/粘贴到并点击“导入”按钮。导入其他布局时,所有以前的元素和设置都将被删除。
网格布局模板#
该模板是网格元素的预定义布局。使用模板是创建自己的布局的好开始。
每个模板都包含:
- 网格布局设置
- 元素的位置
- 元素设置
当您应用模板时,您之前的所有元素和设置都将被删除。
网格元素
网格元素在Impreza 5中可用
网格内容元素允许显示具有可定制外观的帖子列表(页面,投资组合页面,证明书,自定义帖子类型)。它与网格布局有关。
网格元素可通过WPBakery Page Builder在每个页面上使用:
添加元素后,您可以像WPBakery Page Builder的其他内容元素一样更改其设置。
转至外观选项卡以选择所需的网格布局并更改默认的后期图像大小。
转到“ 过滤器”选项卡以启用按类别过滤的项目。目前,过滤仅适用于帖子,投资组合页面,见证。
转到“ 响应选项”选项卡,根据屏幕宽度调整网格行为:
元素
列
点击“铅笔”图标编辑列设置:
一般选项#
您可以将所需的文本颜色值应用到此列,选择所需的动画类型,添加一个Extra类名称并在自定义CSS中引用它。
设计选项#
您可以将所需的背景颜色值应用于此列,输入边距,边框和填充的自定义值。阅读官方文档了解更多信息。
响应选项#
您可以指定列宽或标记复选框以在不同设备上隐藏此列。阅读官方文档了解更多信息。
![]() |
![]() |
![]() |
![]() |
行/部分
点击“铅笔”图标来编辑行设置:
列内容位置#
连续排列的所有列具有相同的高度(当选择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翻译成其他语言?#
如果上面列表中没有您的语言,你可以在本地翻译主题:
- 下载并安装POEdit。
- 找到default.po文件在/ Impreza / framework / languages文件夹中,将其复制并通过翻译所需的字符串进行编辑。
- 用ISO代码名称保存文件。例如,带有西班牙语的文件应该命名为es_ES。
- 安装Impreza-child主题。
- 通过FTP访问您的服务器,并将语言文件(包括.po和.mo)上传到该语言的语言文件夹 Impreza-child主题(位于wp-content / themes / Impreza-child / languages),如果它不存在,您应该创建文件夹。
- 在管理员信息中心转到设置>常规,然后在“ 网站语言 ”选项中选择所需的语言(如上面的截图所示)。
与主题一起使用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。