使用WordPress的Elements插件创建主页
没有合适的工具,即使对于有经验的Web开发人员来说,也很难为WordPress网站创建具有专业外观的静态页面。 它涉及诸如设计响应式布局,找到合适的创意资产以及获取使用它们的正确许可之类的任务。 如果您曾经尝试自己完成所有这些任务,那么我相信您会理解它们会花费多少时间和金钱。
使用Envato Elements WordPress插件 ,只需单击几下就可以执行上述所有任务。 这个独特的插件使您可以立即在WordPress管理面板中访问数百个免费模板工具包和700,000张高级免版税照片 。 通过与页面构建器插件(例如Beaver Builder或Elementor)一起使用,您可以在几分钟内为您的网站创建精美的页面。
在本教程中,我将向您展示如何使用Envato Elements WordPress插件和Elementor页面构建器插件为您的网站创建引人注目的,响应Swift的主页。
先决条件
要充分利用本教程,您需要:
- WordPress 5.1或更高版本
- Envato Elements订阅
- Envato Elements插件v1.0.6或更高版本
- Elementor插件v2.5或更高版本
登录到您的WordPress管理仪表板,并通过转到“ 页面”部分并按“ 添加新”按钮来创建新页面。
如果您看到WordPress的默认页面编辑器已打开,请单击“ 使用Elementor编辑”按钮以切换到Elementor页面构建器用户界面。
接下来,点击屏幕左下角附近的齿轮图标,以打开页面设置标签。 在这里,将页面的布局更改为Elementor Canvas 。
此时,您有一个空白页面,可以开始向其添加块。
Envato Elements插件当前提供600多种免费的块模板,它们全部被整齐地组织成直观命名的块套件。 每个块模板的设计不仅可以与其他几个块模板无缝融合,而且可以在所有屏幕尺寸上看起来都不错。
要将块添加到空白页,只需单击绿色的Envato按钮。
在本教程中,我们将为虚构的Web托管业务创建一个名为“ Purple Tech”的主页。
我们将使用的第一个块套件是Hero套件,目前有54个块。 打开它,向下滚动以找到以下模板,然后按“ 将阻止添加到页面”按钮:
如今,遵循移动优先方法是一个好主意。 因此,我建议您现在通过在浏览器中按Control-Shift-M切换到移动视图。
模板的第一个内容框是显示企业名称的标题。 单击它,然后在其“ 标题”字段中键入名称 。 (可选)您可以通过填写“ 链接”字段来使其可单击。
同样,更改“ 英雄标题”内容框,使其显示醒目的标语。
该模板还包含两个文本框,它们在宽屏幕上彼此相邻显示。 我们可以使用它们简短地谈论公司所提供的服务。 单击它们时,您会看到一个文本编辑器打开。
在第一个文本框中,使用直观的富文本编辑器创建一个项目符号列表,如下所示:
我们将使用第二个文本框讨论起价和特惠信息。 默认情况下,此处的文本对齐方式设置为Justified 。 建议您通过切换到“ 样式”选项卡并修改“ 对齐”字段将其更改为“ 左” 。 在此选项卡中,您还可以更改文本的字体系列,大小和颜色。
如果现在按“ 预览更改”按钮,则页面在大屏幕上应如下所示:
您不必局限于只更改所使用的Envato Elements块的文本内容。 您也可以更改细节,例如背景图像和颜色。
要更改英雄模板的背景图像,请打开导航器,然后选择它显示的第一部分 。
接下来,在“ 编辑部分”面板中,切换到“ 样式”选项卡,然后单击当前背景图像。
现在,您将自动进入“ 插入媒体”对话框的“ Envato元素”选项卡,可轻松访问超过700,000张高级免版税照片。 请注意,与模板和阻止工具包不同,这些照片不是免费的,因此您需要有效的Envato Elements订阅才能使用它们。
选择您喜欢的照片后,您可能必须更改背景叠加以使其更加可见。 为此,请切换到“ 背景覆盖”标签,并尝试使用“ 颜色”和“ 不透明度”字段。
作为页面的第二个块,我们将添加一个块,该块可以更详细地枚举网站提供的服务。
因此,再次单击Envato按钮,选择Features and Benefits阻止工具包,找到以下模板,然后按Add Block to Page按钮:
该模板也以标题开头。 保持其文本不变,但通过转到“ 样式”选项卡并修改“ 文本颜色”字段,将其颜色更改为紫色阴影。
在标题下方的文本区域中,将占位符文本替换为有意义的内容。 为了获得启发,您可以尝试访问一些流行的虚拟主机服务。
接下来,此块具有一种称为Icon Box的新型内容框。 顾名思义,它显示一个图标,以及标题和描述。
假设我们的虚构网站提供托管的WordPress托管,我们想谈一谈。 因此,单击图标框,然后将“ 图标”字段更改为wordpress 。 默认情况下,图标显示为圆圈内。 您可以通过修改“ 视图”和“ 形状”字段来更改此设置。
对图标的外观满意后,将适当的文本添加到“ 标题”和“ 描述”字段。
最后,我们需要更改图标框的背景颜色。 默认情况下是蓝色,我们希望它是紫色。 因此,打开导航器,展开第二部分 ,然后选择内部部分>列 。 然后切换到“ 编辑列”面板的“ 样式”选项卡并更新“ 颜色”字段。
该模板还有三个图标框。 全部更新后,第二个块应在大屏幕上看起来像这样:
Envato Elements WordPress插件有一个定价表模块套件,当前包含15个免费模块。 使用它们中的任何一个,您都可以快速显示企业提供的软件包及其包括的服务。
假设我们的示例站点提供了三种不同的托管程序包。 为了显示它们,我们将使用以下代码块:
值得一提的是,Envato Elements插件还提供了Pricing Menu模块套件。 这更适合需要显示单个项目或服务价格的页面。 因此,它是餐馆和杂货店网站的理想选择。
我们的定价模块与上一步中添加的功能模块非常相似。 它具有三个您已经熟悉的图标框。 因此,我们可以立即开始修改其内容。
您可能已经注意到,此块使用的字体是不同的。 要解决此问题,请切换到“ 样式”选项卡,然后打开“ 版式”对话框。 在这里,将Family字段设置为Quicksand ,即使用的功能块的字体系列。
每个图标框下面是一个标题框。 更改其文本后,切换到“ 高级”选项卡并打开“ 背景”部分。 在这里,您将能够更改背景颜色,使其与我们的配色方案匹配。
使用导航器是了解添加到页面中的块的内部结构的好方法。 有了它,您将看到我们当前的块包含一种称为图标列表框的新型框。
此框用于显示项目列表,并允许您单独编辑其中的每个项目。 与只能显示基本样式的列表的文本框相比,图标列表框使您可以更好地控制列表项的外观。 例如,它可以让您轻松地为列表的每个项目分配一个不同的图标。
现在,单击列表项并更改其文本内容,直到您具有如下的定价表:
作为页面的最后一个块,我们将添加以下页脚,该页脚可在页脚块工具包中找到。
此块中唯一的新元素是“ 社交图标”框,它与图标列表框几乎相同,不同之处在于,它仅将您可以使用的图标限制为流行的社交平台(如Facebook和Twitter)的品牌图标。
替换“ 关于我们和页面”部分中的占位符文本后,页脚应如下所示:
页面准备就绪。 现在,您可以继续并按“ 发布”按钮以使其在WordPress网站上可用。
结论
Envato Elements是一个巨大的创意数字资产存储库。 通过订阅它,您可以获得无限制的下载和商业权利,可以访问超过一百万个高级主题,模板,插件,图片,视频以及其他有助于网站开发的便捷项目。
访问Envato Elements,以了解更多有关其以低成本每月订阅提供的所有令人兴奋的数字资产的信息!