<style type="text/css"> .wpb_animate_when_almost_visible { opacity: 1; }</style>
外贸建站教程

本案例通过TheGem主题文件来演示

作者推荐的主题还有Betheme,Impreza,The7和TheGem!

本文更新于2017年底,wordpress和这些主题将来可能会发生变化,本文仅供参考
请不要忘记评分TheGem并留下一个很好的审查,这对我们和我们的主题意味着很多。

安装

安装WordPress的

要安装这个主题,你必须有一个已经安装的WordPress的工作版本。如果您需要安装WordPress的帮助,请按照这里的说明:http:  //codex.wordpress.org/Installing_WordPress

要求

要使用TheGem,您必须运行WordPress 3.9或更高版本我们用Mac,Windows和Linux测试了它。它已经过Chrome,Firefox,Safari,Opera,Internet Explorer 10+的测试

下载thegem

从themeforest.net 下载TheGem.zip文件并解压缩。在这个zip文件中,你有你需要的一切:

TheGem_theme.zip

你需要上传到你的WordPress的主要zip文件,以安装TheGem(见下文)。在这个zip文件中你会发现这个主题。注意:不要压缩此文件。不要上传你从ThemeForest得到的整个TheGem.zip文件,只能上传TheGem_theme.zip

Child_Theme
在这里你会发现TheGem的小孩主题

Demo_Sliders
我们在演示网站上使用的所有

Demo_Default_Widgets
在我们的演示网站上用于页面
带有演示内容的XML文件,您可以使用它来在WordPress的中手动导入内容。

 

在WORDPRESS ADMIN中安装THEGEM

  1. 打开外观主题→交通
  2. 点击“添加新主题”并点击上传链接
  3. 找到你的硬盘上的文件“TheGem_theme.zip”,点击立即安装按钮
  4. 安装主题后,点击“激活”

主题激活

安装主题后,您需要使用购买代码激活它。点击这里“激活”

你将被自动重定向到TheGem的欢迎页面。

在这里你需要激活TheGem的副本。要做到这一点,请按照以下步骤进行:

  1. 转到Themeforest上的TheGem支持页面(https://themeforest.net/item/thegem-creative-multipurpose-wordpress-theme/16061685/support [ ^ ])
  2. 下面您将看到“购买代码”部分。选择并复制您在此处看到的购买代码:

            3     将复制的购买代码粘贴到TheGem的激活字段中,然后单击“激活”按钮。下面你会看到一节

或者,您可以通过Themeforest上的“下载”页面下载您的购买代码(https://themeforest.net/downloads [ ^ ])。这里点击TheGem的“Download”按钮,选择“License certificate&purchase code”,

之后,打开下载的文件,选择并复制购买代码,粘贴在主题的激活字段,然后点击“激活”按钮。

安装插件

为了使TheGem正常工作,您需要安装一些有用的插件。所有这些插件都包含在TheGem中,你不需要购买额外的!

主题安装成功后,您将收到以下有关安装所需插件和推荐插件的消息:

  1. 点击“开始安装插件”
  2. 检查所有插件,选择“安装”,然后点击“应用”
必需的插件

为了充分使用TheGem,请注意,在主题安装期间安装以下插件(请参阅上面的安装说明):

  • THEGEM THEME ELEMENTS -所有TheGem的功能,功能,简码和自定义帖子类型
  •  视觉合成器 -领先的视觉drg'n'drop页面建设者的WordPress
  • 页面小部件 -用于创建侧边栏内容的灵活和强大的插件
  • Black Studio TinyMCE Widget -  基于本地WordPress TinyMCE编辑器的新“Visual Editor”窗口小部件类型
推荐插件

另外,您可以利用以下推荐插件丰富您的TheGem体验:

  • THEGEM IMPORT -一键导入主要多功能
    演示网站的演示内容
  • LAYERSLIDER -真棒多层幻灯片插件
  • REVOLUTION SLIDER -领先的WordPress插件
  • MAILCHIMP 注册 - mailchimp通讯注册表单
  • 联系 表单 7 -用于管理联系人和反馈表单的最受欢迎的插件之一
  • MailChimp的简易表单 -  让您可以
    轻松地在您网站的任何地方生成并显示邮件列表选择表单(除了Mailchimp Native
    Plugin外)
  • ZillaLikes -添加“喜欢”功能到您的文章和页面

就这样!现在你已经准备好继续使用TheGem,安装在你的WP上。

替代方法:通过FTP上传THEGEM

如果您希望通过FTP安装主题,请按以下步骤操作:

  1. 解压TheGem_theme.zip
  2. 通过FTP客户端登录到您的主机空间
  3. 将解压缩的TheGem_theme.zip的全部内容上传 您的wordpress安装下的wp-content / themes /文件夹中。
  4. 一旦你上传了主题,你可以打开外观→主题页面,并从列表中激活主题。之后,你需要安装和激活插件如上所述。

安装儿童主题

如果您打算修改主要父主题(php,js,style.css)的源代码,我们强烈建议安装此子主题并在此子主题内进行修改,以避免任何可能的问题和安装更新TheGem未来的主要主题。您可以在“Child_Theme”文件夹中找到此子主题- 请检查TheGem_child.zip

子主题的安装与安装主父主题(请参阅上面的说明)的工作方式相同。

重要提示:如果没有安装主要主题,请勿尝试安装儿童主题 - 这将不会导致结果

导入演示内容

注意:由于TheGem中的侧边栏和小部件插件的具体实现,您无法导入自定义侧边栏的演示边栏内容。
注意:确保wp-content> uploads文件夹是可写入的

一键导入演示内容

TheGem带有“TheGem import”插件,可以从主要的多功能演示站点(http://codex-themes.com/TheGem/导入整个演示内容。这里有三个导入选项:

- 完整的演示导入
- 导入选定的演示概念
- 部分演示导入

完整的演示导入

如果您希望导入所有演示数据,包括所有文章,页面,投资组合等,以及所有媒体文件(如图像,视频等),只需单击一次即可使用此选项。

 

 

1.在WordPress管理中进入“TheGem Import”
2.点击按钮“导入主演示内容”
3.导入过程开始。导入时不要关闭活动的浏览器选项卡。完整演示内容的导入过程可能需要30分钟到1小时,因为媒体下载和上传以及生成图像缩略图。
4.等到进口的100%完成。之后,你可以关闭这个标签。

请注意:完全导入和生成图像缩略图可能需要30分钟到1小时,具体取决于您的服务器/主机配置。

部分演示导入

使用此选项,您可以分别导入所有帖子/页面和媒体内容。例如,如果您希望在不导入所有演示媒体的情况下快速导入演示内容,则这很有用。如果您不想导入我们的演示图片和视频,可以点击“无媒体导入内容”。此导入运行速度非常快,并在几分钟内完成。如果您只想导入媒体演示内容(或者在“导入无媒体内容”后添加演示图像和视频),则可以点击“仅导入媒体演示内容”。
 

导入选定的演示概念

轻量级导入选项。在这里,您可以选择一个演示导入的目的主题。如果您只对一种特殊用途感兴趣(例如只有商业主页)并且不需要任何其他演示,则这很有用。此导入将只安装选定主题的主页以及演示网站(关于我们,服务等)的“页面”类别的演示页面和“元素”类别的演示页面(给你所有的例子)不同的简码和元素)。请注意:这个导入最适合新安装的WordPress。

要继续导入选定的演示概念,请选择相应的选项卡并单击导入,选择要导入的主题。

注:为了使用一键式导入程序,请确保WordPress插件“WordPress导入程序”已停用

设置菜单

演示内容导入后,下一步将是设置演示菜单的菜单位置:

进入“外观 - >菜单”页面,选择“管理位置”选项卡。这里选择以下

  • 对于前主菜单 - >主
  • 对于页脚菜单 - >页脚
  • 对于   顶部区域菜单 - >顶区

最后点击“保存更改”

选择主页

下一步是为您的网站选择您选择的主页。进入“设置 - >阅读”,选择一个静态页面选项作为首页显示,从“首页”选择框中选择   “主页:代理光源” 页面。保存您的更改。

导入演示滑块

1.转到您的wp管理员中的“Revolution Slider”部分

2.在仪表板屏幕上,点击“导入滑块”选项

3.选择你想从你的硬盘导入的滑块。浏览到解压缩的TheGem文件夹,你会在这里找到“Demo_Sliders”子文件夹。在这里,您可以看到演示页面中使用的所有滑块。滑块与相应的演示页面具有相同的名称。
如果您希望导入“Business 02”页面上使用的滑块,请选择“Business_02.zip”。

4.点击“导入滑块”并等待,直到滑块将被导入。

第一步

如果您希望更改导入的演示内容的默认预设,那么安装TheGem之后的第一件事就是对您的网站进行一些主要的常规设置。转到外观 - 主题选项获取TheGem的管理面板。我们从第一组设置开始 - 一般

注意:在对主题设置进行任何更改之后,请不要忘记点击“保存更改”以保存您的选择。

主题选项

TheGem有一个主题选项的高级管理面板,它提供了大量的选项和设置来定制您的网站。
外观 - >主题选项,你会得到TheGem管理面板。所有设置都按逻辑部分进行组织,并简要说明他们所做的事情。很多这些设置是自我解释的。

要记住的事情:
  • 始终点击“保存更改”以使您的设置生效
  • 通过点击“重置选项”,您可以将所有设置重置为皮肤默认设置
  • 您可以随时通过管理面板中的“备份”选项进行备份和/或恢复您的设置所以你可以自由地尝试所有的TheGem选项,而不用担心会丢失一些
  • 请注意:为了确保主题选项的正确工作(保存您的样式更改),您可能在您的网站上使用的所有缓存插件应该更好地停用。完成更改后,可以再次激活此缓存插件。

主题布局

您可以选择页面的全角方格布局默认情况下,TheGem使用全宽布局。如果您喜欢使用盒装版本,则可以进一步配置常规网站背景的颜色或图像。

要配置背景颜色,请在TheGem管理面板的左侧选择“颜色”,然后使用“背景和主要颜色”面板中的  “背景颜色为装饰的布局”字段选择适当的装箱背景颜色。

要配置背景图像,请在TheGem管理面板左侧选择“背景”,然后在这里使用“背景为装箱的布局”字段上传您的背景图像。或者,您可以通过在“盒式布局的背景图案”中选择一种包含的图案,

标志大小

TheGem是视网膜准备好了。所以为了使您的标志在现代视网膜显示器上显得清晰,我们建议您为视网膜屏幕准备标志图像。这很简单:只需在您的网站上(在非视网膜屏幕上)选择标准的标志尺寸,并使其大三倍。例如:如果你的“普通”标志应该是200×100像素,你的视网膜标志应该是600×300像素。

一些标志大小的建议

在我们的演示网站上我们使用以下尺寸:

  • 桌面的宽度为164 px(对于视网膜= 492 px)
  • 手机的132 px宽度(=视网膜的396 px)

标志位置

在TheGem你有多个选项来定位你的网站上的标志。您可以将其设置为在菜单上方向左或向右显示菜单,或者在主导航中居中。请检查下一部分的进一步细节。

设置导航

TheGem中有三个嵌入式菜单:

顶级主菜单: 网站页眉中的主要导航
页脚菜单: 网站页脚中的导航
顶部区域菜单:网站顶部区域栏中的附加导航位置(请参见下文)

要编辑主菜单,请执行以下操作:

  1.  转到外观→菜单
  2.  选择“顶级主菜单”
  3.  通常编辑你的菜单

顶部区域

在TheGem中,您可以使用主菜单区域上方的顶部区域栏来显示一些其他信息,例如您的联系人,链接到社交个人资料,额外的元导航和CTA按钮。

设置顶部区域

联系人数据

为了定义应该出现在顶部栏的联系人数据,请在主题选项中进入“联系人&社交活动→顶部联系人”在这里,您可以设置顶部区域的联系信息。

之后,转到主题选项中的“标题 - >顶部区域”部分,并通过选中“显示联系人”字段来激活顶部区域的联系人:

社会概况

要设置链接到您的社交个人资料,请转到联系人和社交→社交在主题选项。在这里你必须选择社交网络,你有你的个人资料; 之后,您可以输入这个配置文件的URL。

之后,进入主题选项中的“标题 - >顶部区域”部分,通过选中“显示社交”字段来激活顶部区域的社交活动:

导航在顶部地区

您也可以使用顶部区域来显示其他导航/菜单。为此:

  1. 转到外观→菜单
  2. 位置字段中选择“顶部区域菜单”
  3. 通常编辑你的菜单
CTA按钮

另外,您还可以在顶部区域插入一些CTA按钮:

转到主题选项中的“标题 - >顶部区域”部分在这里您可以输入按钮文本以及按钮链接

禁用顶部区域

如果您不希望网站上有顶部区域栏,您可以通过主题选项中的“页眉 - >顶部区域”部分并在“顶部区域样式”  字段中选择“禁用” 来轻松禁用它 

您也可以禁用顶部区域栏通过垂直滚动来修复 - 通过激活“禁用固定顶部区域”(参见下图,1)

您也可以选择仅禁用移动设备的顶部区域,方法是激活“禁用移动设备的顶部区域”(请参见下图2)

顶部区域样式

为了设置您喜欢的顶部区域样式,请转到主题选项的“标题→顶部区域”部分。
在这里你有以下选项:

1.顶部区域样式
您可以在3种预设样式之间进行选择以显示顶部区域条。您可以使用其他主题选项自定义此样式(请参阅下文)。

注意:在选择其中一个样式并保存主题选项后,您为菜单所做的自定义设置将被此默认样式覆盖。

2.顶部区域对齐
顶部区域内的内容对齐。

顶部区域的颜色与背景

为了设置顶部区域的颜色,请在主题选项中转到“颜色→顶部区域颜色”在这里,您可以为主要导航和子导航设置任何颜色,包括整个顶部区域的背景颜色。如果要为顶部区域设置一些背景图像,请转到“背景→背景图像”,然后将背景图像上传到“顶部区域背景“

设置主页

使您的一般网站设置后的下一步是设置您的主页 - 您的网站的首页。

  1. 进入“设置 - >阅读”
  2. 选择一个静态页面选项作为您的首页显示
  3. 从“主页”选择框中选择一个页面,该页面应该是您的主页
  4. 保存您的更改

备份设置

在TheGem管理面板中,您可以轻松地将所有主题配置保存为备份,以便稍后恢复,如果出现问题并且想要恢复以前的主题设置状态。转到外观 - 主题选项,然后在TheGem管理面板中选择“备份”为了备份您的设置,只需点击“备份设置”如果您想恢复以前的备份,请点击“恢复设置”如果您希望将当前的设置保存在硬盘的本地,请复制下面文本框的内容并将其粘贴到文本编辑器中 - 如果您想稍后恢复这些设置,只需从文本编辑器中复制此“代码”将其粘贴在文本框中,然后点击“导入设置”

PAGES

页面类型/模板

TheGem提供以下页面模板:

默认模板

这是大多数内容页面和组合项目的主要模板。它用于以全角模式或侧边栏显示页面内容。

博客页面

显示博客文章的模板

重定向子页面

这是用来从这个页面自动重定向到拳头子页面。如果您希望将网站访问者从顶级菜单选项重定向到第一个子级菜单选项,则此模板对于导航非常有用。

添加新的页面

您可以通过点击页面➜添加新的左侧wordpress
面板添加新的页面到您的网站
在这里你有以下内容字段:

标题(1)

页面标题=页面内容的标题

视觉作曲家(2)

Visual Composer的后端和前端编辑器控件。

所见即所得编辑器主要内容(3)

在这里你输入你的网页的内容。

页面选项(4)

更多页面选项可用于配置页面。

自定义/花哨的页面标题

检查所见即所得编辑器下的“页面标题”设置块。在这里你可以做出如下:

  • 为页面标题设置样式
  • 启用/禁用显示页面标题
  • 添加替代自定义页面标题(可选使用HTML格式)
  • 添加摘录/字幕
  • 为页面标题和页面摘录设置字体颜色
  • 启用/禁用面包屑
  • 为页面标题区域添加自定义背景
  • 添加图标
  • 为页面标题-h4设置视频背景

让我们仔细看看这些设置。

为页面标题设置样式

在“页面标题”设置中检查“样式和对齐”组设置

  • 启用页面标题:在这里您可以启用或禁用页面页面的显示
  • 对齐:设置页面标题的对齐方式。请注意:如果你添加一些图标到你的页面标题(见下面),它的位置取决于这个设置。例如“居中”表示您的标题,副标题以及您的图标将位于页面标题区域内部等。
  • 填充顶部:为页面标题设置顶部填充
  • 填充底部:为页面标题设置底部填充

替代页面标题(可选的HTML格式)

如果你想为你的页面添加一些替代页面标题(显示它,而不是你已经输入上面的WordPress的默认页面标题)和optionall使用一些HTML代码格式化这个页面标题,你可以使用这个选项:

要启用此自定义页面标题,请激活“使用丰富内容标题”复选框,您将看到另一个wysiwyg编辑器,您可以在其中输入页面标题。

注意:在这里您可以使用任何html格式和所有TheGem简码您希望。

添加页面摘录/字幕

要在您的页面标题区域显示一些摘录/字幕,请使用此字段

“标题和摘录”设置

颜色,标题和副标题的宽度和边距

要更改页面标题和摘要的字体颜色以及设置其宽度和页边距,请使用“标题和摘要”部分中的以下设置

启用/禁用面包屑

默认情况下,面包屑启用并显示在页面标题区域。如果您希望隐藏/禁用breadcrubms,请在“标题和摘要”设置中使用此选项

设置自定义背景

在TheGem中,您可以使用页面标题区域的背景颜色或背景图像。检查  “背景”部分:

  • 背景图片:在这里你可以设置页面标题栏的背景图片。您可以通过点击其中一个预定义样式/图像来选择,也可以上传自己的图像
  • 背景颜色:如果您不希望使用图像作为标题的背景,
    在这里您可以使用colorpicker选择一些颜色

添加页面标题的图标

除了页面标题和字幕之外,还可以插入要在页面标题区域显示的图标。检查  页面标题”设置中的“图标”部分

  • 图标包:选择您想从中选择图标的图标包
  • 图标:在这里您可以从“图标包”中选择的字体图标集中选择一个图标只需点击“显示图标代码”,选择并复制你想插入的图标的代码,并粘贴在这里的代码
  • 图标颜色:在这里选择标题图标的主要字体颜色
  • 图标颜色2:如果你想让你的图标双色,在这里你可以选择你的图标的第二个字体颜色
  • 图标样式:需要双色图标 - 在这里您可以定义图标上的分色角度
  • 图标背景颜色:选择图标的背景颜色
  • 图标边框颜色:选择图标的边框颜色
  • 图标形状:在这里你可以选择不同的图标形状
  • 图标大小:图标应显示在哪个大小上

为页面标题设置视频背景

页面标题”设置的“视频背景”部分,您可以选择设置一些视频在页面标题的背景中播放:

  • 视频背景类型:选择您的视频来源 - 自托管html5视频,youtube或vimeo视频
  • 链接到视频或视频ID:在这里您可以输入HTML5视频的URL或使用相应的YouTube或视频视频的视频ID
  • 视频背景宽高比:在这里你可以定义这个视频的纵横比
  • 视频覆盖颜色:如果你想要一些覆盖,在这里你可以选择颜色
  • 视频叠加不透明度(0 - 1):为您的视频叠加选择不透明度
  • 视频海报:选择要在移动设备上显示的封面图片而不是视频

透明页面标题

如果您希望在某个页面上单独设置透明页眉(透明意味着:您的主菜单区域将直接位于具有透明背景的页面上方),请在页面选项中检查  “页面页眉”设置:

  • 标题上的透明菜单此设置启用页眉上的透明菜单
  • 标题不透明度(0-100%):设置透明标题的不透明度
  • 使用Light Menu&Logo:如果您在页面的英雄部分使用了一些黑色图像,则此选项可让您为主菜单和徽标使用不同的颜色(例如“白色”)。为了设置主要菜单和徽标的浅色版本,请转到主题选项(对于徽标:“常规→标识”)中的“颜色→菜单颜色”
  • 隐藏顶部区域:如果您不想在某个页面上显示顶部区域栏,只需激活此复选框即可

添加页面侧边栏

使用“页面侧边栏”页面选项,您可以添加右侧或左侧边栏到您的页面

  • 边栏位置:在这里你可以选择,你希望有你的边栏
  • 粘滞边栏:使用此选项,您可以定义是否希望通过垂直滚动来固定边栏

如果你想添加额外的边栏到你的页面,你需要使用Visual Composer。对于这种情况下,请添加以下VC元素到您的网页:

  1. 添加VC元素,选择“Widgetised Sidebar”
  2. 这里选择你想添加的附加边栏

添加自定义边栏小部件

要添加一些自定义小部件到您的页面的边栏,请检查“页面小部件”页面选项。只有在“页面边栏”部分中启用了侧边栏后,此选项才是相关的在这里,您可以选择是否要使用默认侧边栏(通过选择“默认”设置)或自定义侧边栏在您的网页上。默认侧边栏是您在“外观→小工具”中添加的小部件集合如果您想在某些页面上自定义这些小部件(使用其他小部件而不是默认设置),请选择“自定义”选项。

要轻松定制您的页面边栏,您可以简单地将所选小部件从“可用小部件”面板拖放到“页面边栏”面板。有关详细信息,请参阅侧边栏。

注:对于使用Visual Composer插入的其他侧边栏,请相应地使用“VC页边栏01”和“VC页边栏02”。

添加滑块

TheGem带有三个真棒滑块:Revolution Slider,Layer Slider和Nivo Slider。要在页面顶部启用其中一个滑块,请使用“页面幻灯片”页面选项:

启用其中一个滑块后,如果创建幻灯片,系统会提示您从列表中选择幻灯片。

启用页面预加载器

如果您希望为页面启用页面预加载器,请使用“页面预加载器页面选项

默认情况下,页面预加载器被禁用。

如果您希望为您的网站的所有页面和帖子启用页面预加载,请转到主题选项→常规→主题布局,在这里您有一个选项“启用页面预加载器”

延迟加载和底部边距

在此选项中,您可以激活或取消激活页面内容元素的延迟加载动画。同样在这里,您可以将页面的底部“粘”到页脚而没有任何间隙。

建设页面

在TheGem中构建页面的最简单方法是使用Visual Composer的前端编辑器在这里,您可以完全控制内容的布局以及所有简码及其选项。Visual Composer是一个很好的工具,通过简单的拖放不同的内容和页面元素,在后台或前端模式中“即时”创建页面布局和内容。Visual Composer是一个必需的插件,应该在TheGem的主题安装过程中安装(参见“安装TheGem”一

元素/简码

视觉作曲家

Visual Composer是用于在WordPress中构建页面,文章等的最佳拖放式可视化编辑器。如果您对Visual Composer不熟悉,我们建议您查看以下视频:

Visual Composer入门:

https://www.youtube.com/watch?v=XJz_XWiOK78
https://www.youtube.com/watch?v=ngDEopRPHoA

Drag'n'drop解释:

https://www.youtube.com/watch?v=XJz_XWiOK78https://www.youtube.com/watch?v=ngDEopRPHoA

克隆元素:

https://www.youtube.com/watch?v=dn5TqabaBMk

行和列:

https://www.youtube.com/watch?v=dtAAx_r9oLM

创建和重新使用模板:

https://www.youtube.com/watch?v=waZqhu8tlo4

https://vc.wpbakery.com/video-tutorials/  你可以找到一些其他有用的视频教程。
https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress下,您可以找到完整的文档。

请注意,TheGem中的Visual Composer已针对此主题进行了优化,因此您在此处的所有内容元素和简码都与TheGem相关。所有的TheGem元素你可以在Visual Composer中的“The Gem”标签中找到:

默认情况下,Visual Composer为Pages,Portfolio,Products,Posts&News启用; 但是,如果您需要,也可以为其他帖子类型启用它。要做到这一点去“Visual Composer”,并作出选择。

要开始创建新的页面布局,您可以选择后端前端编辑器。我们建议使用前端编辑器,因为它是一个真正的“你看到的是你得到”的方式来建立你的网页。点击“前端编辑器”

您将切换到Visual Composer前端编辑器:

在这里你可能想要通过点击“添加元素”来添加一个新的内容元素。之后,将显示所有内容元素的概览。

您可以开始在页面中添加一个新的内容行; 选择“行”。您将切换到您的页面添加行元素。现在,您可以编辑其属性,例如列数和布局。

通过这种方式,您可以添加和编辑所有其他元素; 你可以将它们相互结合,然后拖放它们。

请检查TheGem:提供的所有内容元素的详细概述。

行和列

每个页面/后期构建过程都是从添加行和列开始的,定义您的块布局。请参阅此视频教程:https//www.youtube.com/watch?v = dtAAx_r9oLM

空间和利润率

TheGem中有三种主要的方法来控制空间,边距和填充。

分频器简码

这是一个本地的TheGem简码。你可以在这里找到它

有了这个元素,您可以非常精确地管理水平边距和填充。使用这个简码的优点是,它显示你使用虚线区域插入空格。这个简码的另一个有用的功能是插入漂亮的彩色内容分隔符。

样式:选择分隔符的样式。如果您希望使用分隔线设置水平页边距,请使用预先选择的“1px”样式

颜色:选择您的分隔符的颜色。

保证金顶部:在px中设置顶部保证金。

注意:您也可以使用负值(即-27)来减少边距!

保证金底部:在px中设置底部保证金。注意:您也可以使用负值(即-27)来减少边距!

使用“设计选项”

在Visual Composer中,您可以切换到“行或列”属性中的“设计选项”选项卡,在这里您还可以设置边距和填充:

使用“空白”简码

文本块

要添加一些文本块到您的页面,使用“文本块”元素:

这个元素添加了一个所见即所得的编辑器,以通常舒适的方式插入/格式化文本块。

纽扣

要在内容的任何位置添加一些按钮,请使用“按钮”元素:

在这里你有以下选项:

按钮文本:键入文本,它应该出现在您的按钮上

URL(链接):定义您的按钮的链接

位置:定义此按钮的位置和对齐

样式: TheGem按钮包括两个基本样式 - 平面(实心填充)和轮廓(像鬼)

大小:选择你的buttonText的大小重量:按钮文本的字体重量

没有大写字母:通过选中此复选框,可以禁用按钮文本的大写字母样式

边框半径:定义按钮圆角的半径

文本颜色:选择按钮文本的字体颜色

悬停文字颜色:选择按钮文字的悬停字体颜色

背景颜色:选择按钮的背景颜色填充

悬停背景颜色:为悬停状态下的按钮选择背景颜色填充

分隔符样式:此选项使您可以在按钮的左侧和右侧启用行分隔符

图标包:如果你想在你的按钮中使用一些图标,在这里你可以定义图标包,你想选择你的图标

图标:在这里您可以从“图标包”中选择的字体图标集中选择一个图标。只需点击“显示图标代码”,选择并复制你想插入的图标的代码,并粘贴在这里的代码

图标位置:选择图标的位置 - 按钮文本的左侧或右侧选择标题图标的主要字体颜色

启用延迟加载:在这里,您可以启用按钮的延迟加载动画

图标

TheGem提供了三个简码,用于在您的内容中插入按钮。

图标

此简码在您的内容的任何位置插入一个独立的图标

图标包:如果你想在你的按钮中使用一些图标,在这里你可以定义图标包,你想选择你的图标

图标:在这里您可以从“图标包”中选择的字体图标集中选择一个图标。只需点击“显示图标代码”,选择并复制你想插入的图标的代码,并粘贴在这里的代码

形状:在这里你可以选择不同的图标形状

样式:需要双色图标 - 在这里您可以定义图标上的分色角度

颜色:为您的图标选择字体

颜色2:如果你想让你的图标变成双色,在这里你可以选择你图标的第二种字体颜色

背景颜色:选择图标的背景颜色

边框颜色:选择图标的边框颜色

大小:您的图标应显示在哪个大小上

链接和链接目标:如果你想链接你的图标,请输入一个URL

居中:如果您希望将此图标自动居中插入的内容块,请激活此选项

图标顶部边距&图标底部边距:在这里您可以定义按钮的顶部和底部边距,以像素为单位

与文本的图标

这简码是相当类似的图标上述短代码,但它提供了一个选项,以插入一个文本框,使用图标启动和控制图标和文本的位置,边距和补非常精确。所有设置都与图标简码的设置非常相似(请参阅上文)。插入这个元素之后,你可以在这个简码内预先加入或附加文本块。

与标题的图标

这个短代码与上面介绍的Icon短代码非常相似,但它提供了一个选项,可以将一些标题与图标结合使用。所有设置都与图标  简码的设置非常相似(请参阅上文)。
所有图标元素演示

风格和花哨的文本框

风格化的盒子可以用来突出一些内容部分,吸引访客对一些重要事实的关注,以促进某些东西。有了这个简码,你可以轻松地定制你的盒子的颜色。要在您的内容中插入样式框,请使用文本框简码:

样式:如果您希望在文本框中包含标题栏,或者您希望创建图片框(图片放置在文本框的上方),则可以选择,

内容文本颜色:文本框中文本的字体颜色,选择或输入颜色代码,例如。#FFFFFF。

内容背景颜色:在这里你可以选择你的文本背景的颜色

内容背景图片:如果您想使用图片作为文本框的背景,您可以在这里从媒体库中选择此图片

背景风格:选择显示背景图像的风格

背景水平位置:选择背景图像的水平位置背景垂直位置:选择背景图像的垂直位置

视差:如果你想使用视差,启用视差效果

如果启用:

视差类型:选择您希望使用的视差类型

视差叠加颜色:为视差区域选择叠加颜色

填充顶部:以像素为单位设置全宽度区域的顶部填充

填充底部:以像素为单位设置全宽度区域的底部填充

填充左侧:以像素为单位设置全宽度区域的左侧填充。注意:如果你
想避免任何填充到左侧

填充,请将填充设置为“0” 填充右侧:以像素为单位设置全宽度区域的右侧填充。注意:如果
您想避免任何填充到右侧
,请将此填充设置为“0”
边框颜色: CTA 边框的颜色

边框宽度(px): CTA边框的宽度

边界半径(px): CTA边界圆角的半径

矩形角:如果你愿意,你可以选择CTA的边框的角落,这应该保持非圆形,就像这里

顶部和底部风格:选择,你喜欢用什么样的花式风格在CTA的顶部或底部。默认花哨样式被禁用

居中:选择是否希望将图标/图像/按钮置于CTA容器内

启用延迟加载:在这里,您可以启用按钮的延迟加载动画

如果您选择在文本框中使用标题,

您可以在“标题”选项卡中设置以下设置:

图标包:如果你想在你的文本框的标题中使用图标,在这里你可以定义图标包,你想从哪里选择你的图标。

图标:通过单击显示图标代码来选择您希望在文本框标题中使用的图标所有可用图标的概述将打开。选择您想要插入的图标的代码,复制它,关闭概览并将其粘贴到“Icon”字段中。

图标形状:选择图标的形状

图标样式:在TheGem中,您可以使用双色图标。在这个“样式”字段中,您可以选择双色图标中的分色角度。通过默认情况下只用一种颜色将被应用。

图标颜色:使用颜色选择器或输入十六进制值来选择图标的主要字体颜色

图标颜色2:如果您想使用双色图标,请选择图标的第二种字体颜色。然后,您的图标将以两种颜色(颜色/颜色2)显示,按上面在“ 样式”字段中选择的角度分割

图标背景颜色:使用颜色选择器或者输入十六进制值来选择图标背景的颜色

图标边框颜色:使用颜色选择器或者输入十六进制值来选择图标边框的颜色

图标大小:选择图标的大小

标题区:在这里你可以输入你的文本框的标题。注意:您可以在这里使用任何HTML或简码。

标题文本颜色:文本框标题的字体颜色

标题背景颜色:文本框中标题区域的背景颜色插入文本框后,只需单击文本框上方的“+”符号即可开始填充内容。

100%宽度和视差区域

通过使用“全宽容器”短代码,您可以在页面上的任何位置插入和设置具有可选视差的100%宽度区域,并将任何内容和简码添加到此区域。要插入全宽容器,从TheGem的简码列表中选择这个元素:

颜色:选择您要在全宽度区域中插入的文本内容的字体颜色

背景颜色:选择全宽区域的背景颜色

背景图片:选择一些图片作为Fullwidth容器的背景图片。对于视差区域,我们建议使用1920 x 1200像素分辨率的大图像

背景风格:选择显示背景图像的风格

背景水平位置:选择背景图像的水平位置背景垂直位置:选择背景图像的垂直位置

视差:如果你想使用视差,启用视差效果

如果启用:

视差类型:选择您希望使用的视差类型

视差叠加颜色:为视差区域选择叠加颜色

填充顶部:以像素为单位设置全宽度区域的顶部填充

填充底部:以像素为单位设置全宽度区域的底部填充

填充左侧:以像素为单位设置全宽度区域的左侧填充。注:如果您想避免任何填充到左侧,请将此填充设置为“0”

填充右侧:以像素为单位设置全宽度区域的右侧填充。注:如果您想避免任何填充到右边,请将此填充设置为“0”

容器:如果您不想以100%宽度布局显示全宽区域内的内容,即显示限于主网站内容宽度的内容宽度,请启用此选项

顶部和底部样式标记:选择是否显示样式标记和位置在添加完全宽度容器后,只需单击其上的“+”符号即可添加任何内容元素:

视频背景

要在100%全宽度区域中插入视频背景,请使用以下选项的“全宽容器”

背景视频类型:选择您的视频的来源

链接到视频或视频ID:在这里您可以输入HTML5视频的URL或使用相应的YouTube或视频视频的视频ID

视频长宽比:在这里你可以定义这个视频的纵横比

视频覆盖颜色:如果你想要一些覆盖,在这里你可以选择颜色

视频叠加不透明度(0 - 1):为您的视频叠加选择不透明度

号召性用语和提醒框

要在您的内容中插入CTA /警报框,请使用Alert Box / CTA简码:

图标包:如果你想在你的CTA块中使用图标,在这里你可以定义图标包,你想从哪里选择你的图标。请注意:如果您希望使用图像而不是图标,请从此选择框中选择“图像”,然后从媒体库中选择图像:

图标:点击“ 显示图标代码”,选择您想要在CTA中使用的图标。所有可用图标的概述将打开。选择您想要插入的图标的代码,复制它,关闭概览并将其粘贴到“Icon”字段中。

图标形状:选择图标的形状请注意,如果您决定使用图片而不是图标,则此形状也适用于您的CTA图片

图标样式:在TheGem中,您可以使用双色图标。在这个“样式”字段中,您可以选择双色图标中的分色角度。通过默认情况下只用一种颜色将被应用。

图标颜色:使用颜色选择器或输入十六进制值来选择图标的主要字体颜色

图标颜色2:如果您想使用双色图标,请选择图标的第二种字体颜色。然后,您的图标将以两种颜色(颜色/颜色2)显示,按上面在“ 样式”字段中选择的角度分割

图标背景颜色:使用颜色选择器或者输入十六进制值来选择图标背景的颜色

图标边框颜色:使用颜色选择器或者输入十六进制值来选择图标边框的颜色

图标大小:选择图标的大小

文字颜色:选择CTA文字的颜色

背景颜色:您可以使用背景颜色为您的CTA的背景

背景图片:如果您希望使用图片作为CTA的背景,您可以从媒体库中选择此图片

背景风格:选择显示背景图像的风格

背景水平位置:选择背景图像的水平位置

背景垂直位置:选择背景图像的垂直位置

边框颜色: CTA borderBorder的颜色宽度(px):CTA边框的宽度

边界半径(px): CTA边界圆角的半径

矩形角:如果你愿意,你可以选择CTA的边框的角落,这应该保持非圆形,就像这里

顶部和底部风格:选择,你喜欢用什么样的花式风格在CTA的顶部或底部。默认花哨样式被禁用

居中:选择是否希望将图标/图像/按钮置于CTA容器内

在CTA /警报箱中插入按钮时,请使用警报箱/ CTA简码中的“按钮1”“按钮2”标签

请注意:在这里您有与“按钮”简码中所有相同的按钮选项 - 描述参见上面的“按钮”

风格的画廊

请参阅章节画廊中的画廊详细说明。
TheGem有许多不同的图库类型,您可以通过插入图库元素来在内容中显示图像

图库:在这里你可以选择一个图库来显示,你已经在你的wp管理中的“图库”下创建

图库类型:在这里您可以选择图库的类型。您可以选择:

  • 滑块 - 滑块的形式与下面的缩略图栏
  • 网格 - 经典网格形式的画廊

根据您选择的画廊类型,您有不同的选项。

网格画廊:

布局:选择您的网格画廊的布局

样式:对于网格图库:在这里选择网格的样式

空白大小(px):在这里,您可以在网格图库中的图像之间设置空隙大小。无间隙设置为“0”。

悬停类型:在这里选择onhover样式

边框样式:在网格视图中选择图像边框的样式。

标题:如果您想将标题插入到您的图库中,请使用此字段并输入图库的标题。

加载动画:为您的图库项目(图像)设置加载动画。

对于滑动标志:

布局:选择滑块库的布局全宽意味着滑块库中的主要图像将比例更宽; 半尺寸意味着在带有侧边栏和列的页面上使用,这里是滑块中主图像的比例更为平方

禁用缩略图栏:使用此选项,您可以隐藏滑块库中主图像下方显示的缩略图栏如果禁用,您可以选择是否启用分页功能

自动滚动:在这里,您可以设置画廊滑块的自动滚动速度(以毫秒为单位)。如果您想禁用自动滚动,留空

与文本的地图

地图与文本短代码可以帮助您轻松发布您的谷歌地图,以TheGem的方式风格,并可选择增强与地图上方的内容层:

背景颜色:这里可以为地图上方的内容容器设置背景颜色

地图高度:以像素为单位的地图高度

单块嵌入iframe:在这个领域,你应该粘贴一个谷歌地图嵌入代码,你已经在谷歌地图中创建。只需按照简码对话框中所述的步骤操作即可

灰度:如果你想在灰度显示你的谷歌地图,你可以在这里设置

容器:如果您不希望以100%宽度显示地图(如果已将其添加到全宽容器中),请选择此选项

滚动停用地图缩放:此选项对触摸设备特别有用。如果启用,您添加的地图将不会在iframe内滚动

圆角:可以将圆角的颜色添加到您的地图

添加地图后,您可以开始在其中插入内容。只需点击“+”符号打开一个简码对话框。

新闻和博客

有了这个元素,你可以插入你的新闻或博客文章列表在内容的任何地方,在许多不同的外观风格中选择。

帖子类型:选择,你想在这个列表中发布哪些帖子类型 - 博客文章或/和新闻

样式:选择展示您的博客/新闻列表的设计风格
您可以选择以下样式:

有关不同博客/新闻列表样式的示例,请访问我们的演示网站→ 主菜单“博客”

选择类别:您可以通过单击“选择类别”选项卡为您的博客/新闻列表选择类别

分页:应该使用哪种分页风格

  • 正常:使用页码的经典分页
  • 加载更多:通过选择此选项,您的下一篇文章将通过点击“加载更多”按钮加载请注意:选择此选项后,会出现新的设置选项卡“加载更多按钮”,您可以根据需要设置此加载更多按钮的样式
  • 无限滚动:通过垂直滚动在新闻/帖子列表中延迟加载帖子
  • 禁用分页:在这里您可以选择禁用任何分页

加载动画:选择列表中显示博客/新闻帖子的动画效果

忽略粘性帖子:使用这个选项,你可以忽略在帖子/新闻列表顶部的粘性帖子的显示

在标题中隐藏日期:此设置允许您在博客/新闻列表的帖子标题中隐藏日期

隐藏作者:这个设置允许你在博客/新闻列表中隐藏作者

隐藏评论:这个设置允许你在博客/新闻列表中隐藏评论数量

隐藏喜欢:这个设置允许你在博客/新闻列表中隐藏喜欢的文章

定价表

定价表简码有助于您在内容中以不同的样式插入样式定价表。

在您的页面中插入定价表包括三个步骤。

步骤1.定义价格表元素

从短代码列表中选择“定价表”简码。在这里你将得到以下选项来设置:

样式:为您的定价表选择八种预定义样式之一

按钮图标:在定价表中的按钮上显示的图标。

点击“保存更改”之后,点击添加的定价表元素中的“+”符号开始插入定价列

步骤2.插入一个列

选择“定价表列”定价表中插入一个新列:

首选:如果您希望为定价栏设置标记标签,您可以在这里写一个简短的文字,如“NEW!”。

突出显示:如果您希望突出显示/强调此列,请选择此选项

列的宽度:在这里你可以设置你的列的宽度 - 它应该是更宽的3列在行或更窄的4列在行

顶级选择颜色:设置“顶级选择”文本标签的字体颜色

顶级选择背景:为您的“首选”文本标签设置背景颜色

点击“保存更改”插入您的定价列

步骤3.插入列的内容

现在您可以开始填写内容的定价列。要做到这一点点击添加的定价列中的“+”符号,并选择您想要添加的内容元素。

专栏的标题

使用此元素,您可以为定价列的标题定义内容及其样式:

列标题:输入定价列的标题

列副标题:输入您的定价列的副标题。请注意:这个字幕不适用于所有的风格。在少数风格中是隐藏的

价格背景颜色:为标题区域中的价格选择背景颜色

价格背景图片:或者,您也可以在这里为价格列标题区域中的价格选择背景图片

货币:键入要显示的货币符号

价格:输入要显示的价格时间段:输入价格的时间段,即“每月”

样式:如果您希望为标题,副标题,价格和时间段使用默认样式,或者您想要自定义颜色,可以选择此处:

列的行

在添加标题,价格等列标题后,您可以添加不同的行和描述

要添加具有列描述的新行,请点击已经添加的标题下方的“+”

并选择“列的行”

之后,你会得到一个所见即所得的编辑器,你可以开始输入你的描述。保存后,您可以多次克隆该行,以获取具有相同内容的其他行 - 填充列的行最简单的方法是:

柱子的徒步旅行者

最后,您可能需要使用一些按钮来添加页脚区域到您的定价列。为了做到这一点,请选择以下元素:

您将看到一个设置对话框,您可以在其中自定义定价列按钮的外观(请参阅上文“按钮”一节中的说明

专栏的标题

有时在您的定价行中使用一些额外的标题是有用的,例如:

要做到这一点,使用“列的额外标题”元素,

用内容填充它,并将其移动到您希望获得的定价列中的位置。

投资组合

TheGem带有不同的风格,通过使用投资组合(网格)或投资组合滑块(用于滑块)简短代码在您的内容页面上显示您的投资组合项目 

组合网格

选择投资组合:选择您想要显示的投资组合。点击“Select Portfolios”选项卡:

布局:为您的投资组合概览选择一个网格布局。如果您希望将您的投资组合显示为经典清单,请选择1x列清单

样式:选择网格样式。对于网格,您可以在对齐,砌体或metro网格样式之间进行选择

列100%宽度(1920x屏幕):如果您以前选择了100%宽度布局,在这里您可以设置许多列以1920像素屏幕分辨率

空白大小(px):在这里,您可以在网格图库中的图像之间设置空隙大小。无间隙设置为“0”。

显示标题:在这里您可以选择如何显示投资组合项目的标题和描述。您可以选择将其显示在项目的特色图片下,或者将鼠标悬停在精选图片上

背景风格:如果您在之前的“显示标题”字段中选择了“页面上”,您可以在此处选择项目标题和说明的标题的背景风格,该风格显示在项目的特色图像

悬停类型:选择您希望在您的投资组合网格中使用的悬停类型:请注意:如果选择“渐变”或“圆形覆盖”,项目标题和说明将显示在项目的特色图像上,如果“显示标题“被选中。
分页:选择要应用的分页样式。您可以选择:

  • 正常:经典编号的分页
  • 加载更多:通过选择此选项,您的下一篇文章将通过点击“加载更多”按钮加载请注意:选择此选项后,会出现新的设置选项卡“加载更多按钮”,您可以根据需要设置此加载更多按钮的样式
  • 无限滚动:通过垂直滚动在新闻/帖子列表中延迟加载帖子

加载动画:选择列表中显示博客/新闻帖子的动画效果

每页项目数:在这里,您可以定义在一个页面上应该一次显示多少个项目组合项目。

显示日期和设置:选择是否希望在网格概览中显示日期和投资组合类别

禁用共享按钮:通过激活此选项,您可以禁用网格概览中的一个共享面板

激活过滤器:选择是否希望在投资组合网格上方显示过滤条

标题:如果您想将标题插入到您的投资组合概览中,请使用此字段并输入您的投资组合的标题。

激活喜欢:选择,如果你想激活你的投资组合项目喜欢/喜欢按钮

激活排序:选择是否要在投资组合概览中为您的投资组合项目激活排序选项。请注意:默认排序是按日期,降序

最大。网格中的行高(px):仅当选择“Metro样式”时,此设置才会显示。定义地铁网格中一行的最大高度对于选择城市地铁外观可能是有用的。

最大。网格中的行高(px):仅当选择“Metro样式”时,此设置才会显示。定义地铁网格中一行的最大高度来选择最佳的地铁流动可能是有用的。

1x列表组合

如果你想显示你的投资组合概览作为一个典型的一列列表中,选择“1个列的列表”中的  “布局”的投资组合简码的选项

在这种情况下,您有以下附加设置:

布局版本:在这里您可以选择“全幅”布局(在这种情况下,投资组合项目将更宽)或“与侧边栏”(投资组合项目的比例将更加quatratic)。

标题位置:标题和项目的标题和说明应放置在项目的特色图像的左侧,向右或以曲折的方式组合

组合滑块

展示您的投资组合的另一种方法是使用“投资组合滑块”简码

标题:如果您想将标题插入到您的投资组合概览中,请使用此字段并输入您的投资组合的标题。

布局:为您的投资组合滑块选择一个布局

列100%宽度(1920x屏幕):如果您之前选择了100%宽度布局,您可以在这里设置许多列以1920x屏幕分辨率

所有其他设置与上述组合网格的设置相似。

风格的图像

在TheGem你可以发布你的图像与令人敬畏的边框和框架效果,使他们看起来很棒,站出来。要做到这一点使用Styled Image简码:

宽度:以像素为单位的图像宽度

高度:以像素为单位的图像高度

选择图像:通过单击选择或输入图像URL从媒体库中选择图像

Alt:输入图像的Alt-Attribute

边框样式:在页面上设置图片的边框/框架样式。

位置:在这里你可以选择你的图片附近的文字对齐

禁用灯箱:如果您希望在灯箱中禁用全尺寸图像,请激活此复选框

风格的桌子

要插入样式表,请使用“表格”简码。

风格:选择你想使用的风格

内容:在这里你可以像往常一样编辑你的表格

用于响应的行标题:选择如何在移动设备上显示行

风格简约

要插入样式列表,请使用“样式列表”简码。

类型:选择您想要在列表中使用的项目符号图标

颜色:为你的子弹选择一种颜色

内容:在这里你可以像往常一样编辑你的列表

TABS&TOURS

选项卡和浏览对于按照其主题含义分组您的内容非常有用,并以紧凑的用户友好的形式显示在页面上。

TABS

为了在你的内容中插入标签,点击标签简码。该元素位于Visual Composer的“内容”选项卡中

您的标签将立即添加到您的页面。

现在你可以开始编辑它的设置。只需点击“标签”面板上的“编辑”图标:

风格: TheGem带有四种不同的标签样式,您可以在这里选择

形状:选择标签形状。

颜色:  选择标签颜色。请注意:如果您想使用TheGem预制颜色,请
在此处选择“TheGem”

间距:选择标签间距。

间隙:选择标签间隙。

位置:选择标签导航位置。

对齐:选择选项卡部分标题对齐。

自动播放:在几秒钟内选择自动旋转制表符

活动部分:输入活动部分号码

分页风格:选择分页风格。

为了编辑一个部分的标题和属性,点击“部分”面板上的“编辑”图标:

之后,您可以通过点击相应选项卡上的“加号”来插入任何内容。

我是文本块。点击编辑按钮来改变这个文本。Lorem ipsum dolor sit amet,consectetur adipiscing elit。U tell tell,lu lu lu lu lu lu pul pul pul pul pul pul pul pul pul pul pul pul pul pul pul pul pul pul

TOURS

游览是垂直的制表符。他们以同样的方式工作。为了在您的内容中插入旅游点击旅游简码。

您的旅游将立即添加到您的页面。现在,您可以按照
相同的方式开始编辑其设置(如上所述)。

TEAMS

团队短代码是在您的页面内容中呈现您的团队的完美功能。使用团队
简码:

您的旅游将立即添加到您的页面。现在,您可以按照
相同的方式开始编辑其设置(如上所述)。

风格:选择风格来显示你的球队

列:选择要在团队网格中显示的列数

感言

推荐短代码是一个很好的呈现你的客户对你和你的工作的意见。

要选择要显示的褒奖,点击“选择褒奖集”标签,并激活
相应的复选框。

风格:选择显示您的证言集的风格

图像尺寸:选择要显示的推荐图像的尺寸

Fullwith:如果您希望以全角布局显示个人鉴定,请选择此选项

自动滚动:以毫秒为单位选择自动滚动速度。如果您不想
自动滚动,留空

COUNTERS

在你的页面插入计数器包括两个步骤。

步骤1。

从短代码列表选择“计数器”短代码。计数器框将立即添加到您的页面

另外,您可以为您的柜台进行一般设置:

风格:选择显示柜台的风格。TheGem来与两个水平的柜台样式和一个垂直

列:用于水平计数器。在这里你可以选择一行中的列数

启用延迟加载:在这里,您可以为您的计数器激活延迟加载动画

数字格式:选择在计数器中显示数字的格式

垂直计数器

垂直计数器如下所示:

您可以进行以下设置:

连接器颜色:选择垂直连接器的颜色

团队人员:在这里你可以选择一个团队人员在上面显示。如果“无”,团队成员框将不会显示。

第2步。

现在点击添加的计数器框上的“+”符号。然后点击“计数器”简码

您将获得以下设置对话框:

从:开始编号开始计算动画,例如0

要:完成计数动画的最后一个数字,例如100

文字:标题显示在数字下

后缀:你可以用它来显示一些符号或单位的数字

背景颜色:为您的计数器元素选择背景颜色

数字颜色:选择数字的字体颜色

文字颜色:为标题/文字选择字体颜色

URL(链接):您可以通过在此处定义链接来链接一个计数器元素

要为您的计数器元素设置一些图标,请点击上面的“图标”标签:

在这里你有所有相同的设置,如“图标”  简码(上面解释)

TOGGLES&ACCORDION

手风琴可以发布不同的附加内容,分为不同的部分。通过这种方式,您可以使用简洁的形式发布大量信息,而不会浪费页面的大小,并吸引访客对文章中的某些特殊点的注意。

为了在您的内容中插入标签,请点击“ Accordions shortcode”。该元素位于Visual Composer的“内容”选项卡中

您的手风琴将立即添加到您的页面。现在你可以开始编辑它的设置。只需点击“手风琴”面板上的“编辑”图标即可

在这里,您可以按照“制表符和游览”短代码的方式进行常规手风琴设置(参见上文)

为了编辑一个手风琴部分的设置,点击“部分”面板上的“编辑”图标:

之后,您可以通过单击相应选项卡上的“加号”符号,在手风琴部分插入任何内容。

DROPCAPS

使用Dropcap shortocode插入一个dropcap:

字母:输入您的dropcap的符号(数字,字母等)

形状:选择你的dropcap的形状

风格:选择你的dropcap的风格

颜色:使用此选项可以自定义dropcap的默认字体颜色

边框颜色:使用此选项自定义dropcap的默认边框颜色

背景颜色:使用此选项可以自定义dropcap的默认背景颜色

引用文本

要在您的页面中插入带引号的文本,请使用引用文本简码:

内容:选择显示引用文本的样式

影片

在TheGem中,您可以轻松地将您的视频媒体插入到主要内容的任何位置或小部件中 - 无论您希望如何。您可以选择使用YouTube,VIMEO或自主视频。您可以设置视频容器的大小,并选择你想要的边框/框架

YOUTUBE&VIMEO视频

宽度:以像素为单位的视频宽度

高度:以像素为单位的视频高度

视频长宽比:在这里你可以定义这个视频的纵横比

Video_id: Youtube视频ID,类似Js9Z8UQAA4E。您可以在YouTube网址中找到视频ID

边框样式:在页面上为您的视频设置边框/框架样式。

位置:在您的内容中设置您的视频的位置

自己托管的视频

对于自托管的html5视频,除了针对youtube和vimeo所述的一般视频设置外,您还有以下选项:

高度:以像素为单位的视频高度

mp4或flv格式的视频URL:从媒体库中选择您的视频或输入视频的URL地址

海报图片:从媒体库中为您的视频选择预览/封面图片

样式:在页面上为您的视频设置边框/框架样式。

位置:在您的内容中设置您的视频的位置

QUICKFINDERS

请参阅“快速查找器”一章中有关快速查找器的详细说明

要在您的页面内容中插入快速搜索,请使用“ 快速搜索”简码

要选择要显示的快速搜索设置,请单击上面的“选择快速搜索”,然后激活相应快速搜索设置上的复选框。

风格: TheGem带有许多不同风格的显示你的快速发现。在这里你可以选择其中之一。

>对于“默认样式”:

标题重量:你可以选择你想要的项目的标题粗体或这个

>对于“经典盒子”,“标示盒子”,“绑定盒子”,“绑定标示盒子”,“标签盒子”:

列数:选择快速搜寻框一行中的列数

盒子样式:从三种不同的盒子样式中选择

框背景颜色:为一个快速搜索项目框选择背景颜色

对齐:选择框内的文本和图标对齐方式

图标位置:选择框内的图标位置

标题重量:你可以选择你想要的项目的标题粗体或这个

激活按钮:如果您想激活快速搜索项目中的按钮,请激活此复选框。请注意:只有通过定义URL /链接的快速搜索项才会显示按钮(请参阅“快速搜索”部分中的详细说明)如果激活按钮,则可以按照通常的方式对按钮进行样式设置(请参阅“按钮”一节中的说明

如果您希望为快速查找项目设置/定义悬停样式,请点击上面的“悬停”标签:

对于“垂直风格”:

请注意:您应该使用相同图标/图像大小的快速查找项目来正确显示垂直快速寻找器。否则,可能会出现连接器的一些视觉问题。

标题重量:你可以选择你想要的项目的标题粗体或这个

连接器颜色:选择垂直连接器的颜色

CLIENTS

“客户”一章中查看客户的详细描述

要将客户端概览插入到您的页面内容中,请使用客户端简码:

要选择要显示的客户端集,请单击“选择客户端集”并激活相应的复选框。

样式:选择是否将客户显示为网格或滑块/旋转木马

自动滚动:在这里您可以启用自动滚动并以毫秒为单位定义自动滚动速度

行数:如果您选择“网格”来显示您的客户,您可以在这里选择这个网格的行数

列:如果您选择“网格”来显示您的客户,您可以在这里选择这个网格的列数

DIAGRAMS

使用此简码在您的内容中插入图表

标题:定义您的图表的标题

摘要:为您的图定义摘要文本

类型:选择要显示的图表类型 - 线条/条形或圆形。

内容:在这里你可以通过编辑短代码来编辑图表的内容


{"title":"Skill1","amount":"70","color":"#ff0000"}
{"title":"Skill2","amount":"70","color":"#ffff00"}
{"title":"Skill3","amount":"70","color":"#ff00ff"}
{"title":"Skill4","amount":"70","color":"#f0f0f0"}

  • 标记   {gem_skill} 定义了一个参数/值/技能在图中显示。您可以根据需要添加尽可能多的值/技能
  • 标签[skill]中的属性“标题”定义了该参数/技能的标签/标题
  • 属性“颜色”定义了图表中用来表示该参数/技能的颜色
  • 属性“数量”定义了该参数/技能的百分比值

样式:选择显示水平(线)图的三种预制样式之一

侧面的类型

TheGem中有四个主要的侧边栏可以使用:

  • 主页侧栏:这个侧栏用于普通页面,组合页面,新闻和帖子页面
  • VC页面侧栏01和VC页面侧栏02:附加的侧边栏,可用于Visual Composer(简码:Widgetised侧边栏)在页面上添加多个侧边栏
  • 页脚小部件区域:这个侧栏用于页面的页脚区域,帖子等

这个侧边栏可以用作:

  • 默认侧边栏您可以定义侧边栏的默认内容(小部件),只需激活默认边栏即可在整个网站中使用。如果你愿意,许多页面总是使用相同的侧边栏与相同的小部件,你创建一个默认的侧边栏。
  • 自定义的侧边栏您可以将单个小部件分别添加到任意页面上的页面或页脚侧边栏,因此,不同的页面具有不同的侧边栏内容

定义默认侧面

要为页面边栏定义默认小部件,请转到“ 外观”小部件

在左侧,你可以看到大面板可用的小工具 - 所有这些小工具,你可以在你的网页上使用侧边栏(关于小工具的描述见小工具)。在右侧,您会看到四个侧边栏面板 - 主页边栏,VC页面侧边栏页脚小部件边栏。现在,您可以开始填充所需小部件的侧边栏 - 只需将所选小部件从“ 可用小部件”拖放到“ 页边栏”(或者如果您将小部件脚注填充到“ 页脚小部件区域”面板)即可。现在,所有拖到侧栏面板的小部件都会自动在您添加到页面中的所有默认侧边栏中使用。

自定义页面侧边栏

如果您想在页面上使用自定义的侧边栏,只需使用页面或项目组合页面中“页面小部件”面板中的设置即可在这里,您应该选择“ 自定义”(如果您创建新页面,则默认选择),然后将所选的小部件从“ 可用 小组件”面板拖放到“ 侧栏”面板。设置/填充小部件后,不要忘记点击每个小部件底部的[保存],以保存这个定制的侧边栏的小部件设置!有关所有可用小部件的详细说明,请参阅部件一章

添加侧面

要添加页面边栏,请转到页面选项中的“页面边栏”,然后选择侧边栏的位置:左侧或右侧。另外,如果你想让你的边栏变得粘稠,请激活“粘滞边栏”复选框。

如果你想添加几个边栏到你的页面,你可以在视觉作曲家中使用“Widgetised Sidebar”简码。在这里,你可以选择,你想使用哪个边栏和页面上的哪个位置。

WIDGETS DEMO

您可以在此页面上找到所有TheGem小部件的演示:    WIDGETS DEMO

视觉编辑

这是一个全功能的所见即所得编辑器,您可以使用它来在页面的侧边栏中创建一些信息框。与任何Richt文本编辑器一样,您可以使用任何格式或任何媒体内容以及所有TheGem简码。

文本

文本是一个简单的文本框/信息框,您可以用来突出显示一些简要的事实/信息为您的页面文章。在这里,你没有任何编辑器来格式化你的文本 - 你只能通过HTML代码来完成。

图片框

Picturebox就像你的页面的图像信息框。使用这个小部件,您可以从媒体库中选择一个图像插入到您的侧边栏中,或者从您的电脑上载它 - 带有自己的标题,自己的描述和自己的链接。

项目信息/定制图标

这个小部件特别适用于项目/产品页面,联系页面或任何页面,您希望强调一些简单的事实,使用单独的字段和漂亮的图标。

这个小部件有两种设计风格可供选择。这个小部件由十个字段组成。在每个领域你可以定义:

Field的标题:就像Field Field的标签

值:此标签的值

字段的图标:  此标签的图标要定义所需的图标,只需点击“显示图标代码”,找到你需要的图标,复制图标代码,并粘贴在这个领域。

PROJECT SLIDER

这个小部件是有用的显示您的投资组合在页面边栏紧​​凑的形式工作。只需输入此小部件的标题(例如“最新作品”),选择要显示的文件夹(集),并定义要显示的行数。

子菜单

子菜单小部件根据页面在网站结构中的位置自动生成页面上的子菜单导航。在小部件设置中,您可以选择要为其构建子菜单的菜单。

TEAMS

如果您希望在某些页面上显示您的团队成员,请使用此小组件。只需点击复选框选择一个或多个团队集。如果你有几个人,他们会在页面上显示,淡入/淡出效果。您可以定义以毫秒为单位的自动滚动速度。有关添加和分组团队成员的详细信息,请参阅团队章节

感言

就像你的团队成员一样,你可以在页面边栏中显示你的客户的推荐。只需点击复选框,选择一个或多个证明集。如果你在集合中有几个推荐,他们将显示在页面上,淡入/淡出效果。在TheGem中,有两种不同的侧边栏显示推荐的风格。您可以在“样式”选择框中进行选择。您也可以定义自动滚动速度,以毫秒为单位。

框图

图表对于展示任何技能,发展,份额和比率都是必不可少的。TheGem有一个内置的小部件来显示两种不同的图表:酒吧和圆形。条形图是动画的,圆形图表在鼠标悬停时是交互式的:

  • 类型:在这里,您可以选择要显示哪种图表 - 线条/条形图或圆形。
  • 技巧:在这个块中,你定义一个digram的值,标签和颜色。
  • 添加技能:为了给你的图增加一个值,点击“添加技能”并填写相应的字段。

FLICKR / PHOTOSTREAM

图表对于展示任何技能,发展,份额和比率都是必不可少的。TheGem有一个内置的小部件来显示两种不同的图表:酒吧和圆形。条形图是动画的,圆形图表在鼠标悬停时是交互式的:

  • 使用这个小部件,您可以在页面边栏中显示来自Flickr的照片流。为了激活照片流,你应该输入相应配置文件的flickr ID(你可以在这里找到你的flickr ID:HTTP : //IDGETTR.COM/你也可以定义你想在这个widget中显示的图片数量 - 通过在项目中设置它们

FACEBOOK

要在侧栏添加facebook插件,请使用此小部件。只需输入你的Facebook个人资料页面的网址,就完成了

推特

在页面边栏中显示您最近的推文。要启用这个小部件,你应该首先在你的网站创建你的twitter应用程序
HTTP://DEV.TWITTER.COM/APPS

创建并启用您的Twitter应用程序后,在小部件设置中键入以下值以激活此小部件:使用者密钥,使用者密码,访问令牌,访问令牌密码,Twitter ID。

在“ 推文数量 ”字段中您可以定义要在边栏中显示的最近推文数量。

新闻

就像在自定义最近的帖子/热门帖子,你可以选择在这里显示你的消息

自定义菜单

在侧边栏中创建自定义导航菜单。像在子菜单小部件中一样,您只应选择在外观➜菜单下创建的菜单

联系

显示您在主题选项中定义的联系信息

社交

显示带有社交个人资料链接的社交图标。您可以在“主题选项”→“联系人和社交”中定义您的社交个人资料(请参阅上面的说明)

MAILCHIMP注册

将简报注册表单添加到您的侧边栏

投资组合

什么是组合

投资组合是TheGem中非常有用的自定义帖子类型,旨在创建和突出特殊内容,与通常的页面和帖子不同。投资组合可以用来发布/演示:

项目/案例研究

投资组合可以帮助您在某些项目中强调公司活动的结果,或者通过提供服务将您获得的成功案例/案例研究告知客户:

  • 你可以描述一下你已经实现了什么样的项目
  • 你可以插入图像画廊与一些项目outtakes /结果 
  • 您可以添加项目说明,关注您的技能和提供的服务
  • 您可以发布视频等媒体内容,向客户展示项目的发展
  • 你可以介绍开发团队,负责这个项目等...
项目/案例研究

与项目和案例研究一样,您可以使用投资组合来突出显示贵公司向客户提供的产品和服务。您可以创建产品说明(产品组合项目),并将其组织成不同的产品组/类别(产品组合),这些产品可以在导航或产品过滤器中使用。

媒体内容(视频,图片)

不要浪费你的客户的时间,并告诉他们你可以 - 只需点击一下!投资组合让您可以发布不同的媒体类型,并在美丽的概览中进行访问。来自youtube,vimeo,您自己托管的视频的视频图片或时尚灯箱中的全尺寸图片 - 所有这些都可以使用不同的投资组合类型完成。

内容可视化导航

或者您可以使用投资组合为您的网站访问者提供有关您的文章,页面,帖子的更好的概述。TheGem中的投资组合概述的不同布局对于在您的网站内容中创建舒适的导航非常有帮助

为了理解它是如何工作的,了解投资组合的性质是非常重要的。

投资组合包括两个主要部分:

  • 组合项目
  • 投资组合集

投资组合项目

投资组合项目是自定义帖子 一个投资组合项目就像一个页面或一个博客帖子 - 这是专门用于表示您的工作,产品,项目等的单个职位。

添加新项目

您可以使用左侧的wordpress菜单或现有投资组合项目列表上方的按钮(添加新项目)创建新的投资组合项目,

投资组合类型

您可以使用不同类型的投资组合项目来演示/发布您的内容:

组合页面

这是一个描述/显示您的项目,案例研究,产品等自定义单一职位。它像一个页面工作:你可以把标题,描述和图像的项目,插入画廊,幻灯片,相关项目等。创建新的投资组合项目后,这种类型是默认选择的。

内部链接

您的投资组合项目可能是您网站上某个其他页面的链接 - 这对于将访问者从一些概览重定向到特定文章非常有用,而不是与概述位于同一网站类别中。

外部链接

您可以使用任何外部网址将访问者重定向到其他网站。这对于在网上展示创建的项目,或者在外部网站上展示一些画廊,或者在线杂志上的一些新闻稿,都是有用的。

全尺寸的图像

使用这个为了显示您的访客每点击一些全尺寸的图像。通过这种方式,您可以像使用图库一样使用投资组合 - 在总览中,访问者可以看到图像的缩略图,单击该图标可打开包含原始全尺寸图像的Lightbox图层。

YouTube视频

如果你想要显示你的访问者一些youtube视频,只需点击一下 - 使用这种类型的投资组合项目。通过在投资组合概览中点击这个项目,vistor获取带有youtibe视频的lightbox图层 - 立即在您的网站页面上显示,而无需重定向到YouTube网站。

YouTube视频

作为YouTube视频类型的投资组合项目,以相同的方式使用它。

自主视频

如果您将所有视频直接保存在wordpress媒体库中,并希望直接从这里流式传输,请使用此类投资组合项目。在这种情况下,就像YouTube或VIMO视频一样,您的访问者可以通过视频播放器获取图层,直接从媒体库中流式传输视频内容

为了定义组合项目的类型,请使用组合项目中面板常规设置中的组合项目类型

  • 投资组合页面:您可以通过输入您的内容并选择页面选项开始编辑您的页面(请参阅下面的说明)
  • 内部链接:使用该字段链接到其他页面或视频ID,输入您希望将访问者重定向到的页面的相对URL(没有域名,例如/content/page.html)
  • 全尺寸图片:在这种情况下,精选图片的全尺寸图片将显示在灯箱图层中
  • YouTube视频:使用该字段链接到其他页面或视频ID,以输入您要显示的YouTube视频的YouTube视频ID(例如YE7VzlLtp-4,您可以在YouTube视频的网址中找到该视频)
  • Vimeo视频:使用该字段链接到其他页面或视频ID,以输入您要显示的vimeo视频的视频ID(例如,1084537,您可以在vimeo视频的网址中找到)
  • 自托管视频:使用该字段链接到其他页面或视频ID,以在媒体库中输入视频的相对URL。你可以找到视频的网址,如果你去媒体库,选择视频,看看它的属性
注意:您可以通过单击“添加一个
类型” 来为多个类型分配一个项目

指定投资组合

为了定义,到投资组合设置投资组合项目所属,应选择
面板中的相应组合组设置在右侧。

如果您的投资组合项目适合多个不同的投资组合,则可以进行多项选择。

当然,您可以通过点击添加新的设置从这里创建一个新的投资组合

定义排序

通过在右侧面板的“排序”字段中输入订单号,可以在一个集合中定义组合项目的排序顺序

注意:如果您的投资组合项目属于多个投资组合集合,则所有投资组合项目将与在此字段中输入的订单位置相同。

内容元素和选项

布局/模板

通常投资组合页面与普通页面具有相同的布局和模板设置。要激活投资组合页面上的侧边栏,只需在“页面边栏”设置中选择想要的边栏位置(左侧或右侧)

编辑内容/使用简码

就像任何页面一样,您可以通过在WYSIWYG编辑器中输入标题和正文来开始编辑您的投资组合页面。您可以选择使用Visual Composer(后端和/或前端编辑器)以任何TheGem的简码创建您的投资组合页面(请参阅
简码一章中的码说明)。

进行一般设置
  • 100%的页面布局:通过激活这个复选框,您可以为您的投资组合
    页面定义100%的宽度布局
  • 显示为突出显示:此选项对于制作投资组合概览的打包风格很有用。包装概览包含不同的项目组合(其特色图片),突出显示 - 与正常项目组合相比,它们具有更大的尺寸(双倍尺寸)。如果您希望以高亮显示您的投资组合项目(双倍大小的精选图像),您可以激活此选项。接下来,在选择框“突出显示类型”中,您可以选择突出显示的项目(其特色图像)应具有的方向。“平方”表示特征图像将具有普通项目图像的双倍宽度和双倍高度。“水平”意味着您的图像将具有双倍宽度,“垂直”是投影组合概览中常规商品特色图像的两倍高度。
  • 概览标题:在这里,您可以输入您的投资组合页面的替代标题,以在投资组合概览(网格和滑块)中显示 - 如果您的投资组合页面的标题非常长,则不适用于项目框在portolio概述。
  • 项目预览按钮链接:如果你想在你的项目页面上添加一些项目预览按钮,在这里你可以输入按钮应该链接的URL。注意:该按钮也将用于组合概览的“一列”风格。
  • 项目预览按钮文本:在这里你可以输入你的按钮的标题
  • 返回到概览网址:在这里,您可以使用您的投资组合集定义概览页面的网址,在投资组合页面上的此图标应该链接到该页面 屏幕(129)
  • 投资组合项目类型:您可以在此定义投资组合项目的类型(请参阅
    上面的说明

投资组合

投资组合集合是投资组合项目的类别或组,对构建投资组合项目非常有用。通过这种方式,您可以创建不同范围的活动作为不同的投资组合,并将您的项目/产品/案例研究/评论/媒体内容(比如说您的投资组合项目)分配到这些不同的活动范围。

添加新的组合套件

您可以创建新的投资组合集,方法是在左边的wordpress菜单中进入“ 投资组合”➜设置

之后,你已经在创建新的投资组合页面。在表格的右侧,您会看到所有现有投资组合集合的列表 - 您可以通过单击相应投资组合集合的标题来编辑其属性。

名称

在这里输入你的投资组合的名称。此名称将用于投资组合项目中的可用投资组合列表(请参阅上文)。注意:在您使用上面的过滤器发布投资组合概览的情况下,此名称也将在投资组合概览中用作过滤器名称。

金属块

slu is是这个名字的用户友好版本。S is是重要的,因为它被用在简码组合中所以不要忘记填写它,如果你正在创建新的投资组合。

 

描述

只是简单的描述你的设置,通常不需要

图标

如果你想用一些漂亮的图标装饰你的过滤器,只需点击  显示图标代码,选择你的图标,复制它的代码,并将其粘贴在图标字段。

订购

在这里你可以设置你的投资组合的排序顺序位置。有了这个领域,你可以对你的投资组合进行排序。

这就是所有 - 不要忘记通过点击添加新集来提交您的更改

发行投资组合

在一个页面中插入投资组合非常简单。按照“简码 - 投资组合”一章中的详细说明使用Visual Composer和“ Portfolios”

定制产品风格

就像TheGem主题的所有其他元素一样,您可以使用TheGem的主题选项面板轻松地自定义您的投资组合风格。要打开管理面板,请转到外观➜主题选项。

FONTS

您可以自定义用于在投资组合概览中显示一个投资组合项目的标题文本和描述文本的字体。要做到这一点去“ 字体 ”,并使用以下面板:

组合标题字体

组合描述字体

在这里你可以选择标准的字体以及大量的谷歌字体和他们的风格

COLORS

为了定制所有主要组合的颜色导航到“颜色”,并打开“投资组合颜色”面板。

以下颜色设置可以自定义:

投资组合概览标题文字

概述中的投资组合项目标题文本的颜色(内部内容)。

投资组合概述说明文字

投资组合项目的描述文字在概述(内部内容)中的颜色。

寻求颜色

要更改用于导航的浏览器按钮的颜色,请在内容的投资组合概览中转到“ 颜色 ”并打开“项目符号,图标,投影和分页”面板。然后使用以下选项:

QUICKFINDERS

什么是QUICKFINDER

Quickfinders是用于帮助用户在网站上导航或突出显示产品或服务的一些特殊优点/特性的图标和/或图像。所以,快速发现者可以被认为有两种方式:

导航支持

除了经典的菜单导航之外,您还可以使用一些带有标题和简短描述的图标或缩略图形式的子页面的图形表示。它可以帮助您的网站访问者快速找到他们需要的子页/小节/信息。

优点/属性概述

如果您想在网页上说明您的产品或服务的一些特别亮点,您可以使用图标形式的快速查找来吸引访客对另一个页面内容中的关键问题的关注

像投资组合一样,Quickfinders包含两个主要部分:

快速查找项目

快速查找设置

QUICKFINDER项目

添加新的QUICKFINDER项目

您可以使用左侧的wordpress菜单或现有快速查找项目列表上方的按钮创建新的快速查找项目。通过创建一个新的快速查找器项目,您应该填写以下内容字段:

标题

这是quickfinder项目的标题,将在总览中的quickfinder项目下显示

描述

将在标题下显示的短文本

链接

如果您想链接您的快速查找项目,请在此处输入与此快速查找项目关联的网址

按钮文本

如果你想在说明文字下面显示一些按钮,在这里你可以定义这个按钮的标签/文字。

标题文字颜色

如果你想在说明文字下面显示一些按钮,在这里你可以定义这个按钮的标签/文字。

说明文字颜色

在这里,您可以自由定义项目描述的字体颜色。默认情况下,颜色设置为“主题选项”中定义的颜色(请参见下文)

图标包:  

选择您想要从中选择图标的图标包

图标:  

在这里您可以从“图标包”中选择的字体图标集中选择一个图标。只需点击“显示图标代码”,选择并复制你想插入的图标的代码,并粘贴在这里的代码

图标颜色:

如果你想让你的图标变成双色,在这里你可以为你的图标选择第二种字体颜色

图标颜色2:

如果你想让你的图标变成双色,在这里你可以为你的图标选择第二种字体颜色

图标样式:

需要双色图标 - 在这里你可以定义你的图标上的分色角度

图标背景颜色:

选择你的图标的背景颜色

图标边框颜色:

选择你的图标的边框颜色

图标形状:

在这里你可以选择不同的图标形状。注意:如果您选择使用精选图片作为您的快速搜索元素,则此图案也将应用于您的图片

图标大小:

您的图标应显示在哪个大小上。注意:如果您选择使用精选图片作为快速查找元素,则此大小也将应用于您的图片

精选图片

在TheGem中,您可以自由选择是否使用图像或图标来描绘您的快速查找器项目。如果您希望为图像快速查找器插入图像,请使用此字段“精选图像”。在这里,您可以上传/选择用于描述页面概览中快速查找项目的图像。在这里你可以使用任何你想要的图形。

Quickfinders

在这里,您可以将给定的快速查找器项目分配给一些现有的或新的快速查找器(见下文)

指定QUICKFINDER SETS

为了定义这个快速寻找器属于哪一个快速寻找器,你应该在右侧面板“快速寻找器”中选择相应的快速寻找器组。
如果您的快速查找项目适合多个不同的快速搜索设置,则可以进行多项选择。当然你也可以通过点击“添加新套件”从这里创建一个新的快速查找器。

定义排序

可以通过在右侧面板的“排列顺序”字段中输入订单编号来定义一组快速查找器项目的排序顺序注意:如果您的快速查找器属于多个快速查找器组,则所有这些快速查找器将与在此字段中输入的顺序位置相同。

QUICKFINDER SETS

“快速查找设置”是快速查找项目的类别或组,用于对快速查找项目进行分组/结构化。实际上,以其他方式说,快速搜索设置是您希望在您的页面中插入的快速搜索。因此,您可以在一个快速查找器导航中组织不同的子页面或不同的服务/产品亮点作为快速查找项目,并将其发布到页面上。

添加新QUICKFINDER SET

您可以创建新的快速搜索设置,方法是在左侧的wordpress菜单中进入Quickfinders(➜)设置

之后,你已经在创建新的快速搜索设置页面。在表格的右侧,您会看到所有现有的快速搜索设置列表 - 您可以通过单击相应设置的标题来编辑它们的属性。

通过编辑快速搜索设置你有以下领域:

名称

在这里输入您的快速搜索设置的名称。这个名字将被用在快速查找器中的可用快速搜索列表中(见上)

金属块

slu is是这个名字的用户友好版本。S is是重要的,因为它在短码“快速搜索”中使用。所以如果你正在创建新的快速搜索设置,请不要忘记填写它。

描述

只是简单的描述你的设置,通常不需要

发布QUICKFINDERS

在页面中插入快速搜索非常简单。使用Visual Composer和“Quickfinders”简码在章节   “Shortcode - Quickfinders”

FONTS

您可以自定义用于在快速查找中显示一个快速查找项目的标题文本和描述文本的字体。要做到这一点去“字体”,并使用以下面板:

快速查找标题字体 - 注意:在TheGem中有两种快速标题样式 - 粗体和细体(短码“快速发现”可以选择使用哪一种)
快速查找说明字体

在这里你可以选择标准的字体以及大量的谷歌字体和他们的风格

COLORS

为了设置快速搜索标题和描述的默认颜色,导航到“ 颜色 ”并打开“ 快速搜索颜色 ”面板。

快速查找标题文本

快速查找项目的标题文本默认颜色在概述里面的内容

快速查找说明文本

快速查找项目描述文本的默认颜色

GALLERIES&SLIDERSHOWS

画廊是任何商业网站的重要组成部分。他们可以用一组图像来说明某些主题或信息,并将它们组合在一个缩略图的完整概览中,并附有完整的一键式灯箱。在TheGem中,您可以灵活地使用不同种类的画廊。

在页面上发布相关内容

在页面中插入画廊非常简单。使用Visual Composer和“Styled Gallery”简码,如“简码 - 样式库”一章中所述

幻灯片

幻灯片对于在页面的标题部分使用漂亮而有吸引力的关键视觉来挑逗一些特殊的信息,亮点,促销和活动。例如,您可以在您的主页上使用幻灯片,立即吸引访客的注意力,并直接引导他们到所需的信息/页面。在幻灯片中,您可以将视觉信息(使用一些有吸引力的图像)与短信(使用一些重要的标语)结合起来,并将其与您喜欢的页面链接起来。

TheGem提供三种不同类型的滑块

图库标题字体 - 注意:在TheGem中,图库标题有两种样式 - 粗体和细体(取决于所选的悬停)

图库描述字体

滑动革命

由Themepunch创建的WordPress的高级和最流行的滑块。您可以找到有关如何设置和使用此滑块的文档https://www.themepunch.com/revslider-doc/slider-revolution-documentation/

使用Slider Revolution创建滑块/幻灯片后,如何将其发布/插入到页面中有两个选项。

选项1:使用页面选项发布

要将滑块插入页面顶部,请使用页面选项中的“页面幻灯片”设置:

图库标题字体 - 注意:在TheGem中,图库标题有两种样式 - 粗体和细体(取决于所选的悬停)

图库描述字体

首先在“幻灯片类型”选择框中选择“革命滑块”。之后,您可以从“Select Revolution Slider”选择框中选择所需的滑块。

选项2:使用简码发布

另一种方法是使用Visual Composer使用“Revolution Slider”简码。通过这种方式,您可以将滑块插入页面内容的任何位置。

LAYERSLIDER

LayerSlider是由Kreatura Media创建的高级wordpress滑块插件。您可以在LayerSlider WP管理区中找到有关如何设置和使用此滑块的文档。请注意,此文档是基于上下文的,因此帮助主题会根据您选择的Layeslider管理页面而改变。您可以使用页面右上角的“帮助”菜单项访问不同的帮助主题。

使用Slider Revolution创建滑块/幻灯片后,如何将其发布/插入到页面中有两个选项。

选项1:使用页面选项发布

要将滑块插入页面顶部,请使用页面选项中的“页面幻灯片”设置:

首先在“ 幻灯片类型选择框中选择“图层滑块” 之后,您可以从“ 选择图层滑块选择框中选择 desiredslider。

选项2:使用简码发布

另一种方法是在Visual Composer中使用“图层滑块”简码。通过这种方式,您可以将滑块插入页面内容的任何位置。

NIVOSLIDER

使用像滑块革命和LayerSlider这样的优质滑块的优势是视觉效果,它带给你的幻灯片的力量。然而,对于更简单的Nivoslider来说,理解,设置和管理起来更为复杂。如果您只需要五个简单的
步骤就可以制作出精彩的幻灯片,那么您可以使用此滑块。

NivosliderTheGem的内置滑块插件。它由两个主要元素组成:

幻灯片

幻灯片

第1步:创建新的幻灯片

您可以通过在左侧的wordpress菜单中进入幻灯片➜幻灯片来创建新的幻灯片之后,您已经在创建新幻灯片的页面上。在桌面的右侧,您可以看到所有现有幻灯片的列表 - 您可以通过点击

相应的幻灯片。通过编辑幻灯片,您有以下字段:

名称

在这里输入您的幻灯片的名称。此名称将在幻灯片和页面选项中的可用幻灯片列表中使用(请参阅上文)

金属块

slu is是这个名字的用户友好版本。

描述

只是简单的描述你的设置,通常不需要

点击“添加新的幻灯片”后,新的幻灯片将被保存。

步骤2.添加新的幻灯片

您可以使用左侧的wordpress菜单或现有列表上方的按钮创建新的幻灯片。

通过创建一个新的幻灯片,你应该填写以下内容字段:

标题

这是幻灯片的标题,可以幻灯片显示在幻灯片中

摘抄

这是一个描述文本,可以在幻灯片的标题下的幻灯片中显示

幻灯片设置:幻灯片链接

在这里你可以链接你的幻灯片与一些内部或外部的网页/网址

幻灯片设置:滑动文字位置

在这里,您可以定义文本(标题和摘录)是否应显示在您的幻灯片上,如果是 - 在哪个位置:

  • 无:幻灯片上不会显示任何文字
  • 左图:文字将显示在幻灯片图像的左侧
  • 右:文字将显示在幻灯片图像的版权上

精选图片

在这里,您可以通过媒体库选择幻灯片的图像

步骤3.分配幻灯片到幻灯片

在这里,您可以选择幻灯片,这个幻灯片属于哪里。您可以将多个幻灯片分配到幻灯片,因此将显示在不同的幻灯片中。当然,您可以通过点击“添加新的幻灯片”来创建一个新的幻灯片,

步骤4.确定排序

通过在右侧面板的“Sort Order”字段中输入订单号码,可以在幻灯片中定义幻灯片的排序顺序。注意:如果您的幻灯片属于多个幻灯片,则所有这些幻灯片都是相同的在此字段中输入的顺序位置。

第5步:在页面上发布幻灯片

您可以使用“页面幻灯片”面板下的页面选项在页面上插入幻灯片。

幻灯片类型:选择Nivoslider作为您想要在页面上插入的滑块类型

选择幻灯片:之后,选择您之前创建的幻灯片。

定义NIVOSLIDER设置

您可以使用TheGem(管理面板)的主题选项面板为幻灯片显示定义不同的参数,如更改效果,可见性时间等。要打开管理面板,请转到外观➜主题选项。在这里您应该选择“NivoSlider选项”来获得幻灯片设置。
可以定义以下参数:

影响

选择您想用于滑动/图像更改的效果

为切片效果选择切片的数量

箱子列&箱子行

选择数量的行和列作为箱子效果

动画速度(x 100毫秒)

幻灯片效果的动画速度

暂停时间(x 1000毫秒)

在链接到另一个方向导航之前,一张幻灯片将显示多长时间

箭头将被用作导航符号

控制导航

幻灯片页脚中的小单选按钮将显示为导航符号

定制NIVOSLIDER风格

您可以使用TheGem(AdminPanel)的主题选项面板轻松自定义您的幻灯片样式。要打开管理面板,请转到外观➜主题选项。

您可以自定义用于在幻灯片中显示幻灯片图像上的标题文本和摘录/说明文字的字体。要做到这一点去“字体”,并使用以下面板:

NivoSlider标题字体

NivoSlider说明字体

自定义颜色

为了自定义幻灯片的文字颜色,使用TheGem的style.css中的设置(在这里找到:wp-content \ themes \ TheGem \ style.css

搜索以下字符串,为幻灯片上的标题和说明定义颜色:

.slideshow .nivocaption .title {
backgroundcolor: #000;
backgroundcolor: rgba(0, 18, 28, 0.77);
color: #f1f5f8;
}
.slideshow .nivocaption .description {
backgroundcolor: #fff;
backgroundcolor: rgba(241, 245, 248, 0.77);
color: #0b1217;
}

客户,团队,个人鉴定

CLIENTS

“客户”对于展示您的“名人堂”非常有用:您为其制作项目的客户/客户,提供服务等。通常的方法是显示客户徽标/身份的概览。

不过,您可以使用任何图像来描绘您的客户 - 标志,图标,照片等

与“快速寻找”类似,客户端由两个主要部分组成:

客户端

添加新的客户

“客户”对于展示您的“名人堂”非常有用:您为其制作项目的客户/客户,提供服务等。通常的方法是显示客户徽标/身份的概览。

不过,您可以使用任何图像来描绘您的客户 - 标志,图标,照片等

与“快速寻找”类似,客户端由两个主要部分组成:

客户端

您可以使用左侧的wordpress菜单或现有客户列表上方的按钮来创建新的客户端。通过创建新的客户端项目,您应该填写以下内容字段:

标题

这是你的客户的名字

客户端图像

在这里,您可以上传图片,描绘您的客户(徽标或照片)

客户端设置

在这里你可以输入页面的URL,它应该和这个客户端相关联

客户端设置

在这里,您可以将给定的客户端分配给一些现有的或新的客户端设置(见下文)。为了定义此客户项目所属的集合,您应该在面板“ 集合 ”的右侧选择相应的集合如果您的客户项目适合多个不同的集合,您可以做出多项选择。当然你可以通过点击“ 添加新的设置从这里创建一个新的客户端

排序

通过在右侧面板的排列顺序字段中输入订单编号,可以在一个集合中定义客户项目的排序顺序注意:如果您的客户物品属于多个快速寻找装置,则所有这些物品将与在此字段中输入的订单位置相同。

在页面上发布客户

在一个页面中插入客户端非常简单。使用Visual Composer和“客户”简码,详见“简码 - 客户”一章

球队

加入新的团队人员

要将新人添加到您的团队中,请转到团队➜在左侧的wordpress菜单中添加新人员。您将获得添加新人的页面。在这里你可以定义:

标题
是一个人的标题,它只在wordpress管理员的实习中使用,例如在个人列表中

文本编辑器

在这里你可以输入一些关于你的人的简要描述或引用的文字。此文本将以团队风格之一显示

在“ 个人设置”中,您可以定义可见的公开设置,这些设置将在网站上显示在个人信息中:

  • 名字:人的名字
  • 职位:人员在您的团队/公司中的职位
  • 电话:直接联系电话号码
  • 电子邮件:电子邮件地址直接联系。如果您不想直接在您的网页上显示电子邮件,可以通过选择“隐藏电子邮件”选项来隐藏它 - 在这种情况下,而不是电子邮件地址,将显示联系人的链接
  • 链接:在这里你可以链接你的团队人员
  • 社交简介:在这里您可以输入个人社交简介的链接
分配给团队

右侧的面板中,您可以选择此人属于您公司的哪个团队。您可以通过转到“Team➜设置”或直接点击“添加新设置”来创建新的团队如果此人在多个团队中工作,则可以进行多项选择

精选图片是您联系人的图片,在展示团队的同时将在网站上展示。点击“设置精选图片”,从媒体库或本地硬盘中选择您的个人图片。

加入新的团队

在左侧的wordpress菜单中添加新的团队使用Team➜团队集合是团队。在这里你可以定义以下数据:

名称

团队的名字。用于团队的小部件,您可以在其中选择要显示的团队

金属块

团队短代码中使用slu so,所以一定要正确填写该领域的友好版本的
团队的名称

描述

团队简要说明,仅用于实习
完成团队数据填写完成后,单击“添加新套件”,即可完成 - 新团队将出现在右侧表格的可用团队列表中。

在页面上发布团队

在一个页面中插入团队非常简单。使用Visual Composer和“团队”简码,
详见章节
“简码 - 团队”

团队的小工具

您还可以在您的网站的页面边栏或博客文章边栏中发布/显示您的团队。

要激活团队小部件,请转到下面页面选项中的“页面边栏”面板,从“可用小部件”列表中选择团队 小部件,并将其粘贴到右侧面板“页面边栏”然后点击它的标题打开这个小部件“团队”现在你可以使用一般的标题填充你的小部件 - 这是你的小部件的标题,例如“大客户”。在总标题下,您可以选择您想要在团队小部件中显示的小组集。您可以选择多个小组来显示。

当你完成设置你的小部件,请不要忘记点击小部件底部的“保存”按钮,以保存您的内容。只有在保存小部件后,才能发布文章。

感言

要添加新的见证,请转到见证➜在左侧的wordpress菜单中添加新的见证你会得到一个页面添加新的推荐。在这里你可以定义:

标题

这是一个证书的标题,这是实习生只为wordpress管理员,例如在证词列表中

文本编辑器

在这里你可以输入引用的文字或关于你的推荐的简要描述。它会显示在你的见证页面上

在“ 推荐设置”中,您可以定义可见的公开设置,该设置将显示在
网站上的推荐信息中:

  • 姓名:谁写了这个证言的人的名字
  • 职位:这个人在你公司的职位
  • 公司:您的客户的公司名称
  • 链接到公司:您的客户网站的URL
见证集

右侧的“证明设置”面板中,您可以选择,这个证明所属的证言集。您可以通过进入“ 推荐”➜设置新的设置,或者直接点击  “添加新设置”。如果这个证明书应该被分配到多个集合,你可以做出多个选择。

“精选影像”是您的证言联系人的图片,
在展示团队的同时将在网站上显示。

添加新的证书集

为了在特定的网站页面上显示它,证明集是有用的在一组中集合一些专题相关的证明书。例如,如果您正在编辑具有某些行业特定产品/服务描述的页面,那么显示该行业的一系列推荐信息将是有益的。

要添加新的证言集使用证言➜设置在左侧的wordpress菜单。在这里您可以
定义以下数据:

名称

集合的名字。用于推荐小部件,您可以在其中选择要显示的推荐集

金属块

slug是集合名称的URL友好版本

描述

当你完成填充设置的数据后点击“添加新设置”,你就完成了 - 你的新证明集将在右表的可用集列表中显示。

在页面上发布证明

在页面中插入褒奖非常简单。使用Visual Composer和“褒奖”
简码,详见“简码 -褒奖

见证的小工具

就像你的团队成员一样,你可以在页面边栏中显示你的客户的推荐。只需点击复选框,选择一个或多个证明集。如果你在集合中有几个推荐,他们将显示在页面上,淡入/淡出效果。在TheGem中,有两种不同的侧边栏显示推荐的风格。您可以在“样式”选择框中进行选择。当你完成设置你的小部件,请不要忘记点击小部件底部的“保存”按钮,以保存您的内容。只有在保存小部件后,才能发布文章。

博客和新闻

添加新的博客帖子

就像在任何WordPress的安装,你可以创建新的博客文章,通过选择“职位”,然后  “添加新的”在左侧wordpress菜单。添加新博客帖子的页面将打开。在这里你有:

标题

您的博客文章的标题

文本编辑器

你的博客文章的内容。在这里,您可以使用Visual Composer使用所有的TheGem简码

博客项目设置

  • 精选图片:在这里,您可以选择是否希望在您的文章中显示您的精选内容
对于视频发布:

这是一组视频博客文章的设置。如果您选择右侧的格式设置中的“视频”,它们将被应用

  • 视频类型:选择您的视频来源 - 自托管html5视频,
    youtube或vimeo视频
  • 链接到视频或视频ID:在这里您可以输入HTML5
    视频的URL 或使用相应的YouTube或视频视频的视频ID
  • 视频背景宽高比:在这里你可以定义
    这个视频的纵横比
引用帖子:

这是一组视频博客文章的设置。如果您选择右侧的格式设置中的“视频”,它们将被应用

  • 引用文字:您可以使用丰富的内容(HTML格式,TheGem简码)在WYSIWYG编辑器中创建报价
  • 引用作者:在这里键入作者的名字
  • 背景颜色:定义此报价的背景颜色
  • 作者和链接颜色:选择显示作者姓名的字体颜色并链接到此处
对于音频发布:

这是一个音频博客文章的设置。如果
在右侧的格式设置中选择“音频”,将会应用这些设置

  • 音频:在这里您可以选择音频文件的音轨
对于图库文章:

这是一个图库博客文章的设置。如果您
在右侧的格式设置中选择“图库”,它们将被应用

  • 图库:选择您想要显示的图库(从“图库”下创建的图库中选择- 请参阅上面的说明)
页面标题

在这里,您可以为您的博客文章标题设置多个选项,包括摘录。它的工作方式与页面相同(请参阅“页面 - >自定义/花式页面标题”一章

页眉

各种设置张贴标题。详情请参阅 - “页面 - >透明页面标题”

页边栏和页面小部件

在帖子中启用边栏的设置。有关详细信息,请参阅 -  “页面 - >启用侧边栏”以及侧边栏和小工具”

分类

在这里,您可以定义邮件类别所属的邮件。您可以通过点击“添加新类别”来添加新的博客类别在  文章类别中,或直接在类别面板中添加。

标签

在这个面板中,你可以标记你的帖子。此功能对于“标签云”小部件和博客搜索很有用

精选图片

如果您想在自己的博客文章中添加一些标题图片,这些图片将出现在博客文章列表和博客文章顶部,请使用“设置精选图片”从媒体库中选择图片或从您的图片上传硬盘

粘滞的职位

此外,您可以通过选中“将此帖贴到首页”选项来设置您的博客文章是否应在博客列表中突出显示/强调

完成后,点击“发布”发布您的博客文章

在页面上发布博客列表

在页面中插入博客列表非常简单。使用Visual Composer和“新闻与博客”简码,详见“简码 - 新闻与博客”

一般的博客设置

为了定制一些博客设置使用TheGem的主题选项。转到外观➜主题选项,你会得到我们的管理面板。这里选择“Blog&News”来获得博客选项:

显示作者

在这里,您可以定义是否在您的博客文章中显示作者的信息

摘录长度

在列表页面的博客摘录中显示的符号数量

添加新闻

新闻与标准博客文章非常相似。这种自定义posttype的主要目的是以清晰的用户友好的方式将公司的新闻与公司的博客分开。当然,你总是可以创建一个特殊的博客类别,如“新闻”,并将其作为新闻列表,但为什么要把博客与新闻混为一谈?更好的方法是使用“新闻”类型。

您可以通过选择“新闻”,然后在左侧的wordpress菜单中的“添加新闻”来创建新的“新闻”文章。添加新的“新闻”帖子的页面将打开。

在这里,您可以定义所有相同的设置,如“ 页面部分所述
除了通常的页面设置之外,您还有以下设置:

新闻集

在这里你可以定义你的新闻发布到哪些新闻集。您可以在新闻➜新闻集中添加新集或直接点击新闻集面板中的“添加新闻集”

精选图片

如果您想在自己的新闻文章中添加一些标题图片,这些图片将出现在新闻列表中,请使用  “设置精选图片”从媒体库中选择图片或从您的硬盘上传图片

完成后点击“发布”发布你的新闻

在一页上发布新闻列表

在页面中插入新闻列表非常简单。使用Visual Composer和“新闻与博客”简码,详见“简码 - 新闻与博客”

EXTRAS

WPML

如果您需要使您的网站多语言,WPML可能是最好的解决方案。WPML是一组插件,可让您轻松地翻译其他语言的网站。TheGem经过了仔细的测试,与WPML完全兼容。为了使用WPML,你需要在这里购买
这个插件许可证http://wpml.org/purchase/
在WPML.org网站上你可以找到关于使用这个插件的非常详细的文档,查看这个链接http:// wpml .org / documentation / getting-started-guide /。购买WPML后,您将获得WPML团队的免费支持,您可以在这里使用他们的支持论坛  http://wpml.org/forums/forum/english-support/

下面你会发现使用WPG和TheGem的一些具体方面。

第一步/安装WMPL

1.安装并激活以下核心WPML插件:

  • WPML多语言CMS
  • WPML字符串翻译
  • WPML翻译管理

2.转到“WPML->语言”并进行初始WPML设置。在这里http://wpml.org/documentation/getting-started-guide/检查WPML文档的一般描述对于“语言URL格式”,我们建议选择第一个选项“目录中的不同语言”。为了得到这个正常的工作,你将需要调整你的WP网站根目录在FTP上的.htaccess文件,如下所示:

# BEGIN WP

RewriteEngine在
RewriteBase /
RewriteCond%{REQUEST_FILENAME}!-f
RewriteCond%{REQUEST_FILENAME}!-d
RewriteRule。/index.php [L]

#结束WP

语言切换器

要在顶层菜单中启用语言选择器,请转至“WPML - >语言”部分的“语言切换器选项”,并进行以下选择:

使用THEGEM风格的国家标志

TheGem提供了一套国旗,采用适合TheGem设计的平面样式。你可以找到PSD文件夹中的所有标志,“标志”。您可以使用这些标志在languge选择器中显示它们。

去做这个:

1.转到“WMPL - >语言”,在这里查找“网站语言”,然后点击“编辑语言”。你会得到这个网页:

在这里,您可以使用“标志”列中的“上传标志”选项来上传TheGem标志。由于WPML将所有标志图像调整为其默认尺寸,因此您需要覆盖这些自动调整大小,方法是使用文件夹“wp-content /上传/标志“在您的主机上

翻译

转到“页面” - >“所有页面”您可以在每个页面旁边看到每种活动语言的列,并带有铅笔图标(用于“编辑翻译”)或“+”图标(用于“添加翻译”)。使用这些图标,您可以添加此页面的新语言版本或编辑现有的语言版本。最简单的方法是编辑原始语言页面,在这里检查“翻译”框中的“重复”复选框,然后单击“重复”。通过这种方式,您可以使用原始语言的所有内容创建其他语言版本的页面副本,以便您轻松翻译它

您可能会对批量重复的页面和帖子感兴趣。要使用此功能,请转至WPML->翻译管理,然后从翻译仪表板中选择您想要的过滤器(页面/帖子),然后单击“显示”。选择您要翻译或复制的页面或帖子(您可以通过单击“标题”页眉或页脚旁边的复选框来选择全部):

然后,在页面底部,选择要翻译或复制的语言,然后选择“提交文档”:

一般来说,使用WPML,您可以随时在“ 翻译 ”或“ 复制 ”内容之间进行选择如果你做的是前者,但是想从原始文件导入内容,你总是可以使用按钮来从他们的编辑页面“复制原始内容” 如果你选择后者,你可以随时选择“独立翻译”,以便保存编辑。试试两个程序,看看哪一个更适合您的工作流程。

QUICKFINDERS,投资组合,个人鉴定,团队等

TheGem带有丰富的自定义帖子类型,如投资组合,快速查找,推荐等,以及自定义分类法。为了获得与帖子和页面类似的翻译/复制界面和工作流程(请参阅上面的描述),您需要转到WPML->翻译管理,然后选择“多语言内容设置”选项卡。在页面的底部你会看到:

您需要选择“翻译”您想要翻译的自定义帖子类型。

翻译菜单

WPML可以同步菜单。这意味着,如果某些条目(例如某些页面,帖子或类别)位于英文菜单中,则WPML可以为指向这些页面,帖子或类别的翻译版本的其他语言生成并保持同步菜单。注意:在同步菜单之前,请确保已经翻译了所有希望以新语言版本显示的页面。只有翻译的页面才会被同步!外观 - >菜单,看看顶部的“同步菜单”链接。

通过点击它你会得到以下屏幕:

通过点击页面底部的同步按钮(其侧面的信息传说),您将看到一组可以翻译的菜单项; 全部选中,然后继续应用更改。同步操作后,您可以从WordPress的“外观 - >菜单”单独编辑每种语言的菜单。

主题特定字符串

在翻译您的网站内容之后,您可能有兴趣翻译一些主题特定的短语或单词,如“下一步”按钮或“跟随和联系我们”区域中的“跟随我们”标题。要做到这一点,请按照以下步骤进行:
转到“WPML - >主题和插件本地化”
在第一部分“选择如何本地化主题”选择“按WPML翻译”,然后“保存”在“选择如何获取WordPress的核心翻译“选择”我将下载WordPress的翻译和保存.wp文件在wp-includes / languages“,然后”保存“

在“主题中的字符串”部分的底部,您会发现一个复选框“如果在.mo文件中找到了加载翻译”。(它不会覆盖现有的翻译)“ - 激活并点击”扫描主题的字符串“

WOOCOMMERCE

TheGem与WooCommerce完全兼容,并包含模板集成。要开始创建您的在线商店,您需要在http://www.woothemes.com/woocommerce/上安装免费的WooCommerce插件这个关于使用WooCommerce的文档只涵盖了你需要开始的主题特定点。要获得有关使用WooCommerce的完整文档,请使用以下链接:

WooCommerce文档

WooComerce社区论坛

WooComerce内置简码

第一步/设置WOOCOMMERCE

1.安装并激活以下插件:

WooCommerce

2.安装WooCommerce时,点击紫色栏中“安装WooCommerce页面”按钮来安装所有的默认页面。WooCommerce自动创建必要的页面。如果您需要将页面重新分配到不同的WooCommerce页面指定,可以在WooCommerce设置页面中进行。

3.转到“WooCommerce->设置”,并进行初始WooCommerce设置。检查WooCommerce文档的一般描述在这里http://docs.woothemes.com/documentation/plugins/woocommerce/woocommerce-user-guide/ getting-started /。

添加产品

遵循WooCommerce文档中描述的步骤

  • 点击WP菜单中的“产品 - 添加产品”
    在页面顶部为您的产品输入一个名称
  • 将产品描述文本输入到帖子内容字段中,这将是所有的产品信息。
  • “产品数据”框是你输入的所有产品的详细信息(价格,SKU,运输和更多)。
  • “产品短描述”框,这将是短期介绍副本旁边的主图像显示。
  • 设置您的主要“精选图像”在右侧精选图像框。这必须为每个产品完成。
  • 要使用图片库,请在“产品库”框中插入更多图片
  • 输入所有数据后,点击“发布”,该项目将显示在您的主要商店页面上。

一个网页

在TheGem中,您可以选择创建单页网站。这是一个像这样的网站:http//codex-themes.com/thegem/app-one-pager/如果你点击上面的主菜单项,你会被略微向下滚动到所需的部分。

制作一页网站的过程非常简单,包括两个步骤:

步骤1

按照上面的建立页面” 部分所述创建页面

在创建页面时,请选择您想要成为主页面的部分,并通过主菜单进行链接。使用Visual Composer的“行”元素,点击“编辑行设置”,使用“行ID”字段插入本节的“锚点”/唯一块标识符,就像这样:

第2步

在编辑您的页面时,请转到页面设置中的“其他选项”,并激活复选框“Page as One-Pager”

第3步

完成构建页面之后,保存更改并转至外观 - >菜单。这里使用“链接”类型的菜单项来使您的主菜单。请注意,作为“URL”,您应该在之前步骤1中的“行”设置中使用相应的“行ID”。在完成构建页面后,保存所做的更改并转到“ 外观” - >“菜单”。这里使用“链接”类型的菜单项来使您的主菜单。请注意,作为“URL”,您应该在之前步骤1 中的“行”设置中使用相应的“行ID”

垂直滑块

创建全宽滚动页面:
示例:
http : //codex-themes.com/thegem/splash-fullscreen-vertical-slider-1/
http://codex-themes.com/thegem/splash-fullscreen-vertical-slider-2 /

1.编辑页面时,转到页面设置中的“其他选项”,并激活复选框“页面作为全屏垂直滑块”

2.要创建一个全屏幻灯片,在Visual Composer中添加一行,在行设置中添加“滚动块”类

对于您希望创建的所有其他幻灯片,请参阅第2页。

就这样

巨型菜单

TheGem内置两种不同风格的超级菜单。借助此功能,您可以创建具有分组结构的令人惊叹的令人印象深刻的弹出菜单,以提高可用性。

步骤1

外观 - >菜单。按照“菜单/导航”部分所述创建菜单 -

注:为了制作大型菜单,您的菜单结构必须包含最小值。3个级别,你的:

1.第一级代表你的主菜单项

2.第二级将是分组子菜单项的标题

3.第三级将包含实际的子菜单项目

第2步

现在打开你的第一级菜单项。在这里,您可以为您的大型菜单进行一般设置。您将看到以下选项:

启用超级菜单

有了这个选项,你可以启用这个菜单项的大菜单。

巨型菜单样式

在这里你可以选择两种风格的超级菜单外观

巨型菜单砌体风格

默认情况下,TheGem中的大型菜单已经对齐网格。使用此选项,您可以启用砌体网格

列数

在这里,您可以定义要在您的大型菜单中显示的列数

背景图

如果你想在你的大菜单中使用背景图像,在这里你可以定义这个图像。

位置

在这里,您设置您之前选择的背景图像的位置

填充

在这些领域,您可以为您的大型菜单设置填充

第3步

现在打开你的第二级菜单项。

图标

如果你想为你的子菜单标题设置一个图标,你可以在这里通过选择图标代码并粘贴到这个字段中。

列宽

在大型菜单布局中定义第一列的宽度

不要链接

如果您不想让您的子菜单标题可点击,您可以在此停用它

不要显示

如果你不想显示子菜单标题,在这里你可以隐藏它

这个项目应该开始一个新的行

如果启用,此选项会将此子菜单标题移动到您的大型菜单布局中的新行

步骤4

最后一步 - 转到第三级菜单项。

图标

如果你想为你的菜单项设置一个图标,你可以在这里选择图标代码并粘贴到这个区域

标签

这个选项可以让你添加一些突出的标记/标签,如“新”,“热”等菜单项。

就这样。现在使其余的菜单项相同,并保存你的大菜单。

移动菜单

遵循WooCommerce文档中描述的步骤

  • 点击WP菜单中的“产品 - 添加产品”
    在页面顶部为您的产品输入一个名称
  • 将产品描述文本输入到帖子内容字段中,这将是所有的产品信息。
  • “产品数据”框是你输入的所有产品的详细信息(价格,SKU,运输和更多)。
  • “产品短描述”框,这将是短期介绍副本旁边的主图像显示。
  • 设置您的主要“精选图像”在右侧精选图像框。这必须为每个产品完成。
  • 要使用图片库,请在“产品库”框中插入更多图片
  • 输入所有数据后,点击“发布”,该项目将显示在您的主要商店页面上。

TheGem将菜单自动转换为响应式样式,因此您无需在此处进行特殊设置。唯一可能的是,在响应式菜单中,所有菜单项都具有子菜单项,默认情况下是不可点击的。所以如果你点击这个菜单项,就会打开子菜单而不加载实际的页面。

如果你不需要这种行为的一些菜单项(即你希望使它们可点击),使用此菜单项(在“外观 - >菜单”)中的选项:

使点击移动

如果启用,在移动设备上单击此菜单项后,您将在移动菜单中看到“显示此页面”的附加选项这样,您的网站访问者可以决定是否希望看到该页面或进一步浏览子菜单项。

添加您自己的图标

TheGem带有三个强大的图标包(材料设计图标,字体真棒和优雅的图标),总共有超过2.500个图标。但是,您始终可以选择添加其他图标包 - 您自己的。为此,您需要使用主题中包含的子主题“TheGem_child_user_icons”。继续如下:

  • 第1步:安装儿童主题

安装并激活主题包中的TheGem_child_user_icons ”子主题。
有关安装说明,请参阅“安装”

  • 第2步:创建您自己的图标包。

您可以使用任何在线服务,允许创建图标字体,例如https://icomoon.io/app/#/select

1.创建你自己的图标包。有关如何执行此操作的详细信息,请参阅icomoon的文档https://icomoon.io/#docs

2.准备完图标包后,点击“生成字体”

可选地,您可以重置包装中的图标的编号,以使其编号

3. 重要提示:在图标包的设置中,您需要将字体名称定义为“ UserPack

4.之后,点击“Download”下载带有图标字体“UserPack”的zip压缩文件。下载后在一个单独的文件夹下解压,以获得相应的woff,svg,ttf,oet字体文件

5.通过FTP将解压后的woff,svg,ttf,oet文件上传到子主题的文件夹“fonts / UserPack”。您将步骤1中安装并激活的子主题“ TheGem_child_user_icons ”中找到该文件夹

完成后,您将在用于选择图标包的选择框中获得一个附加的图标包“UserPack”:

就这样