WordPress初学者：中级定制

为了超越我上一个 WordPress 初学者博客中的简单基础知识，在过去的几周里，我一直在努力重新创建我们的 ProteusThemes 演示页面之一。 汽车主题的演示是具体的。 就像以前一样，我的同事给我设置了分步任务，让我走上自己的路。 这些是我迄今为止学到的最重要的一课。

图标框

图标框小部件是一种非常方便的视觉语言。 这似乎很明显，但是将您公司的电话号码放在电话图标旁边是改善网站用户体验的一种简单而有效的方法。

我的任务是将图标框添加到主页的标题中。 为此，在您的仪表板中，您需要转到外观 -> 小部件，然后在“主题边栏”中选择“标题”。

找到“标题”后，将注意力转向屏幕左侧，您将在此处看到“可用小部件”列表。 ProteusThemes：IconBox是您正在寻找的小部件。

现在你有两个选择。 您可以将小部件拖放到屏幕右侧并将其放在标题中，或者当您单击小部件时，您将看到其适用位置的下拉菜单，您只需从中选择“标题”列表并单击蓝色的“添加小部件”按钮：

您现在将看到小部件中有很多图标可供选择，出于本练习的目的，我选择了电话。 您需要做的就是给图标框一个标题并决定您希望在它旁边显示哪些信息。

在小部件菜单中的所有图标下方，您将看到“突出显示此小部件”的选项。 如果图标框中的信息特别重要并且您希望它更加突出，请勾选该框。

头版滑块

重新创建自动演示需要在主页上添加一个滑块作为功​​能。 为此，请选择Pages -> All Pages -> Home ； 进入主页的编辑器后，您需要在屏幕右侧找到“页面属性”下拉菜单。 找到它，然后将“模板”更改为“带滑块的首页”。

更改为“带滑块的首页”后，屏幕底部将出现一个名为“首页滑块”的新元，单击此处将图像和文本添加到滑块：

简码

重新创建首页滑块使我们很好地进入了短代码。 为什么？ 因为在我正在重新创建的自动演示中，滑块中有按钮。

在这一点上，重要的是要强调您确实需要安装推荐的插件。 我犯的错误是在没有激活ProteusThemes Shortcodes插件的情况下将短代码插入到“幻灯片文本”中。 如果您没有激活插件，代码本身将出现在滑块中，而不是您尝试创建的按钮中。

我们所有主题的文档中都有一个“短代码”部分，它为您提供了许多可用选项，用于您可以插入的按钮的样式和功能。 您需要做的就是将此代码复制并粘贴到滑块的“幻灯片文本”部分。 只需在代码中编辑按钮的文本以满足您的需要，就可以使用了。

您当然可以在其他地方使用简码，而不仅仅是滑块。 例如，如果您编写了一段内容营销来尝试销售某些东西，请使用简码在您的博客文章底部创建一个有效的CTA 按钮。

页面构建器

掌握SiteOrigin 的 Page Builder插件对于重新创建 Auto Demo至关重要。 我必须使用它的第一个任务是在主页标题下方创建这个带有 Popover部分的 IconBox：

为此，请转到您要编辑的页面，在我的例子中是主页。 然后你需要找到页面构建器菜单，它看起来像这样：

从这里，选择“添加行”。 然后，您将看到与该行中的列相关的选项。 您可以选择所需的列数、它们的大小比例以及是否希望它们按从左到右的大小顺序排列，反之亦然。 对于我的 IconBox Popover，我选择了 3 个大小相同的列。

现在您已经准备好列，您可以通过添加小部件开始向它们添加功能。 通过单击要添加到的列来执行此操作，一旦选择了该列，请单击上面菜单中的“添加小部件”按钮。

根据您选择的小部件，您可以向列添加更多功能。 例如，在我的“ Opening Times ” IconBox Popover 中，有必要在 IconBox Popover 中添加ProteusThemes Open Time小部件，以便在单击该列时在弹出窗口中显示相关信息。

在创建这一行 IconBox 弹出框后，我遇到的一个问题是，该行的颜色与 Auto Demo 的颜色不同，也没有扩展到我的页面的整个宽度。 解决这类问题很容易。 首先，将光标悬停在行上方的小扳手图标上，然后选择“编辑行”。 要更改颜色，下一步是从“行样式”菜单中选择“设计”，在这里您可以更改颜色和其他设计选项。

要更改行的大小，首先从“行样式”菜单中选择“布局”。 这将为您提供向行添加填充的选项。 然后，如果您希望行扩展到页面的全宽，请选择“行布局”下拉菜单并选择“全宽”。

我以完全相同的方式使用 Page Builder 来创建这些特色页面列：

为此，我没有将带有 Popover 的 Iconbox 小部件添加到列中，而是选择了ProteusThemes：Featured Page小部件。 您应该很好地尝试将不同的小部件放入列中，以真正了解页面构建器对您的有用程度。

这就是现在的全部。 看看我之前的帖子，了解一些更基本的技巧。 点击下方订阅我们的时事通讯并获取此类内容，以及更多内容直接发送到您的收件箱……

现在订阅