如何使用Elementor和OceanWP创建WordPress网站

OceanWP是市场上最受欢迎的免费主题之一。它集成了许多WordPress页面构建器插件，通过简单的拖放操作为您提供了大量设计完整WordPress网站的方法。

在这篇文章中，我们将重点介绍如何使用Elementor WordPress插件来构建一个包含OceanWP的WordPress站点。让我们开始吧。

安装和设置

首先安装主题。即使您之前从未安装过WordPress主题，它也相当简单。首先转到WordPress.org的OceanWP主题，然后下载获取OceanWP。

导航到网站仪表盘外观→主题。

单击页面顶部的“ 添加新项”按钮，然后单击下一页上的“上传主题”按钮。

单击下一页上的选择文件，然后选择您下载的ZIP文件夹。单击立即安装以安装主题。

主题安装应该没有任何麻烦。单击“ 激活”。

您将再次被重定向到主要主题页面。您会注意到以当前年份命名的其他主题已停用。至少保留其中一个默认主题。如果您的主题出现任何问题，您将需要它进行测试。

安装必需的插件

OceanWP主题最适合使用一些额外的插件来正常运行。其中一个是Elementor，一个用于WordPress的免费拖放页面构建器插件，但我们稍后会谈到它。但是，Ocean Extra也是必需的。

激活主题后，主题页面上应该有通知。单击此通知附带的Begin Installing Plugin链接以安装Ocean Extra。

单击下一页上的“ 安装 ”。

该插件应自动安装和激活。

继续，单击回到仪表盘。

安装Elementor

为了使“如何使用Elementor创建WordPress站点”作为我们教程的一部分，我们需要安装并激活Elementor WordPress插件。

导航到插件→添加新插件。

在搜索框中输入“elementor”，然后安装并激活Elementor.com的Elementor Page Builder插件。

您可能需要的任何其他插件都依赖于您安装的演示，如果您选择安装它。我们来谈谈OceanWP演示。

OceanWP演示

我们所有的演示都与Elementor兼容，但这里是需要 Elementor的演示，这意味着它们不会在没有Elementor的情况下以预览的方式运行：

• 超级健身房
• 瑜伽
• 教练
• 商店
• 旅行
• 律师
• 健身俱乐部
• 女用贴身内衣裤
• 建筑师
• 时尚
• 简单

选择演示

导入演示简化了构建网站的过程，特别是如果您是WordPress的新手。它们以“您所看到的就是您所获得的”样式工作，因为它们允许您将完全开发的设计导入您的站点。您真正需要做的就是更改内容以匹配您的品牌，并真正制作您自己的演示。

如果我们的演示中没有代表您的利基，请尝试选择最合适的一个。例如，我们的建筑师和时尚演示将适合建立作品的服务型企业，例如自由摄影师、自由平面设计师或创意机构。

编辑OceanWP演示

单击WordPress管理区域左上角的站点标题以访问站点的前端，然后单击使用Elementor编辑。

或者，您可以转到页面→所有页面，然后单击与主页关联的“使用Elementor编辑”链接。

您将看到Elementor编辑器，看起来就像Architect演示中一样。

从这里开始编辑很容易。如果您想要更改“WELCOME TO ARCHITECT！”文本，只需单击它即可打开该元素的编辑器。您可以在文本编辑器中更改文本。

打开样式编辑器以更改元素的颜色、字体和其他方面。

只需确保单击绿色的“保存”按钮，否则您所做的所有更改都将丢失。

如果要更改背景图像或徽标，请单击X，然后选择“ 查看页面”。

这将在新选项卡中打开页面的前端，并删除Elementor编辑器。单击“ 自定义”。

单击Architect徽标附近的铅笔图标。

单击“ 更改徽标”将徽标上载到站点。

如果要从 Elementor编辑器返回后端的页面编辑器，请单击X，然后选择“ 转到仪表板”。

从头开始

如前所述，OceanWP与Elementor 100％兼容。因此，您可以使用Elementor的拖放编辑器创建自己的设计。如果您不想创建自己的设计，您甚至可以导入Elementor模板并简单地更改内容。

这样，假设您在您的站点上安装了OceanWP主题和Elementor插件。让我们来看看如何做到这一点。

使用Elementor构建主页

创建一个新页面并将其命名为Home。

向下滚动到OceanWP设置部分，然后选择100％全宽作为内容布局。

打开“ 标题”部分，然后启用“ 顶栏”和“ 标题”。如果您决定不需要它们，可以稍后禁用它们。

打开标题部分，然后禁用它。这可确保页面标题“Home”不会显示在顶部。

打开“ 页脚”部分，然后启用“ 页脚窗口小部件”区域和“ 版权区域”。同样，如果您决定不使用它们，可以稍后禁用它们。

更新页面以保存我们所做的更改，然后转到设置→阅读，将首页显示设置更改为静态页面，然后选择Home页面。

确保保存更改。然后，转到外观→自定义以打开实时主题定制器。您将看到一个空的网站。

自定义顶栏

单击顶部栏以打开顶部栏设置部分。单击“ 常规”，以便我们可以首先添加背景颜色。我们还将文本颜色更改为白色。

您可以将背景颜色设置为与您的品牌相匹配的背景颜色。您可以使用W3Schools的HTML Color Picker等工具，或者只使用Google“html color picker”来使用Google搜索出的工具。

完成后单击后退按钮，然后打开顶部栏的“ 内容”部分。我将在本教程中使用一些Font Awesome图标。如果您想继续，请继续将其复制并粘贴到文本编辑器中。

如果要在对方的社交媒体帐户中添加链接，请打开顶部栏的“ 社交”部分，然后添加所有相关链接。您还应该更改社交链接颜色。

如果您不喜欢顶栏左侧和右侧的填充（间距），请启用顶栏全宽设置，并使用右侧和左侧填充设置设置您自己的填充。

单击“ 保存并发布”以保存更改。

WordPress标题设计

接下来是标题，你可以在这里做很多事情。让我们从徽标开始，转到标题→徽标。单击选择徽标，然后上载徽标。您可以看到我们建议维度为164 x 45像素。知道您也可以使用主题构建器设计标题。

如果您上传较大的尺寸，则可以上传，以全宽裁剪，并更改“ 最大宽度”设置。

接下来，您需要创建一个菜单，以便在头部添加一个菜单。如果您是WordPress的新手，请创建一些名为博客、关于和联系的页面，并使用WordPress中的该指南来学习如何创建菜单。

然后，返回自定义程序，转到菜单→菜单位置，然后选择主菜单下的菜单。

这是一个非常简单的标题，对于大多数人来说绰绰有余，但是如前所述，使用OceanWP的标题可以做很多事情。例如，如果您不想要顶部栏但仍希望保持链接到您网站顶部附近的社交媒体帐户，您可以返回页面编辑器，禁用顶部栏，重新打开自定义程序，转到页眉→菜单社交并在那里启用它们。

您还可以更改图标的样式。

建立页脚

您还可以向OceanWP的页脚小部件区域添加页脚小部件以完成页脚。

使用Elementor构建自定义页面

完成页眉和页脚后，您可以开始向页面添加内容，特别是在页眉和页脚之间。返回主页的页面编辑器，然后单击使用Elementor编辑。

从这里，您可以使用Elementor的部分和内容元素来构建自己的页面布局和设计。

导入元素或模板

或者，如果您不想学习如何创建和构建自己的设计，则可以导入元素或模板。这些模板的工作方式与OceanWP演示的工作方式非常相似。您可以选择自己喜欢的设计，导入它，并使用简单的点击操作来根据自己的喜好更改内容。

单击添加模板。

有六个免费的主页模板可供选择，但只要您有要推广的服务或产品，着陆网页模板也适用于主页。将鼠标悬停在要用于主页的模板上，然后单击“ 插入”。

这是我们现在拥有的：

现在，您可以将鼠标悬停在任何元素上进行编辑。

如果要更改背景图像，请单击“ 部分”按钮。

您可以在“ 样式”部分下找到图像编辑器。

与往常一样，请确保在退出编辑器之前单击“ 保存 ”以确保保存更改。

OceanWP核心扩展套件

OceanWP提供免费和高级扩展，您可以使用它们来扩展主题的功能。其中一个扩展称为Elementor Widgets。该扩展为Elementor编辑器添加了六个新的小部件，它们是：

• 警报消息小组件
• 博客轮播小工具
• 博客网格小工具
• 时事通讯小工具
• 定价小工具
• Skillbar小工具

这些小部件为您提供了使用已有元素的新方法，但有些内容，例如Blog Grid（您可以在这里学习如何创建博客）、Newsletter和Pricing小部件，都是新的。

Elementors Widget扩展单站点官方许可证的费用为39美元，五个站点许可证的费用为59美元，20个站点许可证的费用为79美元。但是，您可以通过购买会员资格来节省购买此扩展以及OceanWP提供的所有其他扩展的费用。