如何使用 Divi 创建中等风格的博客

已发表: 2017-07-06

在今天的 Divi 博客文章中，我们将分享一些关于如何以与 Medium 博客相同的风格创建自己的博客网站的重要技巧。

众所周知，Medium 是最常用的博客平台之一。他们不仅拥有庞大的博客社区，他们定期与受众互动，而且他们的博客平台也提供了非常好的用户体验。这正是每个博主想要的。他们希望确保以清晰的方式在读者感到舒适的环境中传递信息。

但是，在 Medium 上写博客有其局限性。例如，没有涉及 SEO 的好处。通过创建您自己的博客（受 Medium 博客风格的启发），您可以延续他们对 Medium 博客已有的熟悉感，并将其带到您自己的网站。

让我们开始吧

订阅我们的 YouTube 频道

我们将向您展示创建 Medium 风格博客的最重要部分，我们还将向您展示如何创建一些重要部分。例如; 如何制作可用于所有帖子的中等风格的博客帖子模板。模板如下所示：

我们还将向您展示如何添加 Worth The Read 和 Highlight and Share 插件，使其看起来更加相似。 The Worth The Read 结果如下所示：

而Highlight and Share会产生如下效果：

创建一个像中型博客一样的简单菜单

在访问 Medium 网站时，您可以清楚地注意到的一件事是菜单的简单性。没有太多可用的选项可以立即使访问者更容易导航。访问者可以浏览主页上突出显示的博客文章，并从那里继续逗留。

菜单元素

选择一个与您网站其余部分的简单性相匹配的徽标，并通过在您的菜单中给它一个小尺寸来确保它的微妙。您绝对不希望徽标压倒您在网站上共享的内容。

接下来，不要在导航中包含太多页面。由于您的网站都是关于博客的，因此主页可能就足够了。如果您想告诉访问者更多关于您自己的信息，您也可以考虑添加一个关于页面。

继续，包括一个搜索图标，以便人们可以使用几个关键字轻松搜索您的博客文章。这完全取决于您正在制作的内容并使其易于查找。

对于上面的示例，我们对主题定制器中的主菜单栏使用了以下设置：

菜单高度：54
标志最大高度：37
文字大小：18

使用带有对比度和简单字体的调色板

Medium 博客在其整个平台上使用三种主要颜色，使内容易于阅读。虽然这两种颜色看起来像是黑色和白色，但它们在眼睛上会稍微柔和一些。第三个是浅灰色但可读的颜色。对主题定制器中的主菜单栏进行以下调整，以更改主菜单中使用的颜色和字体：

字体：Source Sans Pro
文字颜色：rgba(0,0,0,.44)
活动链接颜色：rgba(0,0,0,.44)
背景颜色：#fbfcfd

包括搜索图标

此外，要在主菜单中包含搜索图标，请转到标题和导航 > 标题元素 > 显示搜索图标。

禁用固定导航栏

Medium 博客所做的另一件事是将导航栏保持在页面顶部。这样，访问者在阅读时不会不必要地被打扰。要禁用 Divi 网站上的固定导航栏，请转到 WordPress 面板 > Divi > 主题选项 > 常规设置 > 禁用固定导航栏。

按类别设置主页博客模块的样式

接下来，您要按类别设置网站主页的样式。根据您创建的博客，您可以在主页中创建不同的部分，以满足访问者最喜欢阅读的内容。我们建议至少使用以下类别：流行、最新和建议。您可以通过在 WordPress 菜单中“帖子”的“类别”页面中创建不同的类别，并将每个帖子分配给帖子本身内的一个或多个类别，将博客帖子分配到这些类别。

您真正想做的另一件事是使主页中的不同博客模块和部分易于理解。为此，您可以使用 Divi 构建器中的标准博客网格，或者您可以搜索更高级的内容。我们在下面列出了您可以考虑使用的三个插件。

Divi 文章卡片插件

Divi 文章卡片插件是一个免费插件，在 Divi 100 期间在我们的博客上共享。该插件中使用的样式很干净，并且具有很好的悬停效果。这是一个简单的效果，但它可以为您的博客创造额外的小触感。

该插件完全免费，只需前往帖子下载即可！

Divi 自定义博客模块

另一个创建漂亮博客模块布局的插件是 Divi 自定义博客模块。通过将特色图片放在左侧，这篇文章比上一篇更类似于 Medium 博客文章。

该插件的价格为 20 美元。

Divi 博客额外内容

最后一个可以帮助您使您的博客看起来更像 Medium 博客的插件是 Divi Blog Extras。这个插件还有很多不同的博客模块布局，可以帮助你构建你的中型博客。

该插件的单站点许可证零售价为 15 美元，扩展许可证零售价为 30 美元。

创建博客帖子模板

Medium 对所有创建的帖子都有标准的博客帖子格式。设计的重点是帖子的本质：内容。正在使用的博客文章格式与网站的其余部分一致：简单。它通过使用可以在整个帖子中插入的书面内容和媒体的组合来切入正题。

Divi 提供了同样的可能性。您可以使用 Divi builder 提供的不同模块，使您的博客文章尽可能简单或精致。这是我们将向您展示如何逐步创建的示例布局：

分区帖子设置

首先添加一个新帖子，给它一个标题并激活 Divi 构建器。接下来，确保 Divi Post 设置如下：

页面布局：全宽
点导航：关闭
滚动前隐藏导航：默认
文章标题：隐藏

作者（桌面）

为了进行布局，我们将切换到 Visual Builder。首先添加一个包含两行的新部分。继续向第一列添加一个图像模块，向第二列添加两个文本模块。打开该部分的设置并添加选择“#fbfcfd”作为背景颜色。

图像模块

打开图像模块，在“内容”选项卡中上传图像，然后在“设计”选项卡中将“图像对齐”设置为“左”。继续，将“-5%”添加到“设计”选项卡的“间距”子类别中的“顶部边距”和“25%”到左边距。

之后，将以下代码添加到高级选项卡的自定义 CSS 子类别中的主元素：

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

第一个文本模块

在 Content 选项卡的 Content Box 中添加作者姓名，并对 Design 选项卡的 Text 子类别进行以下调整：

文本方向：左
文字字体：Source Sans Pro
文字字体大小：18
文字颜色：rgba(0,0,0,0.8)
文本行高：1.7em

向下滚动相同的选项卡，将“-3%”添加到顶部边距，将“-70%”添加到左边距。

第二个文本模块

在第二个文本模块中输入标语，并对设计选项卡的文本子类别进行以下调整：

文本方向：左
文字字体：Source Sans Pro
文字字体大小：14
文字颜色：rgba(0,0,0,0.44)
文本行高：1.7em

此外，向下滚动相同的选项卡并将“-5%”添加到“间距”子类别中的“上边距”和“-70%”到左边距。

行可见性

最后，打开行设置并在高级选项卡的可见性子类别中禁用手机和平板电脑上的行。

作者（手机）

使用全角行将另一行添加到同一部分。继续克隆上一行中的图像模块和文本模块并将它们放在全角行中。当有人在手机或平板电脑上打开页面时，我们必须对每个模块进行一些修改，使它们在屏幕上居中。

图像模块

打开图像模块并将图像对齐设置为“居中”。

第一个文本模块

打开第一个文本模块并将“设计”选项卡的“文本”子类别中的“文本方向”更改为“居中”。

向下滚动相同的选项卡，删除左边距并保留顶部边距。

第二个文本模块

此外，对第二个文本模块做同样的事情。将文本方向置于“中心”并删除“内容”选项卡的“间距”子类别中的左边距。

行可见性

最后，打开行设置并禁用桌面行。

帖子标题模块

由于我们在 Divi 帖子设置中禁用了帖子标题，因此我们将在我们之前使用的同一部分中的全角行中添加一个帖子标题模块。

在内容选项卡的元素子类别中，我们可以选择要显示的元素。由于我们已经提到了作者，因此我们禁用了除标题之外的所有内容。

此外; 对“设计”选项卡的“文本”和“标题文本”子类别进行以下调整：

文字方向：居中
标题字体：Source Sans Pro
标题字体样式：粗体
标题字体大小：47px（桌面）、40（平板）、35（手机）
标题文字颜色：rgba(0,0,0,0.8)

全角图像

我们将添加的第一个全角图像是特色图像的表示。添加一个全角部分，在其中放置一个全角图像模块，然后在“内容”选项卡中上传图像。就这么简单。

文本模块

继续，我们将创建用于博客文章的文本模块。添加一个带有全角行的标准部分，并在其中放置一个文本模块。在此示例中，我们使用“Cardo”字体系列而不是“Georgia”，因为“Cardo”是内置字体系列。

此外，打开文本模块的设置，在内容框中键入一些示例文本，然后转到设计选项卡。在文本子类别中，进行以下调整：

文本方向：左
文字字体：Cardo
文字字体大小：25px（桌面）、19px（平板电脑）、17px（手机）
文字颜色：rgba(0,0,0,0.8)
文本行高：1.8em

向下滚动相同的选项卡，将“800px”添加到“大小调整”子类别中的“最大宽度”，并将“10%”添加到“间距”子类别中的左边距。

视频模块

可以为您的博客文章增加附加值的最后一件事是集成视频。为此，您必须使用文本模块克隆先前制作的部分，并将您拥有的全部内容划分到两个文本模块之间。在这两个部分之间，我们将添加另一个带有全角行的部分。在全角行中，我们将添加一个视频模块。

后端的结构应该是这样的：

除了添加 URL 之外，我们没有对视频模块做任何调整。

保存模板

您可以通过克隆和更改内容来重新使用不同的部分来适应您正在创建的博客文章。完成后，您可以通过单击“保存到库”并为其命名来保存博客帖子模板。

下次要使用模板时，只需单击“从库加载”并加载模板。

值得一读

创建 Medium 博客的一个典型事情是阅读某篇博文需要几分钟的时间。这通常出现在页面的开头，并为用户提供并估计他们完成阅读所需的时间。在时间最宝贵的时代，这有助于人们决定是否要阅读博客文章。

Well Done Marketing 的免费 WordPress 插件可以帮助您实现这一目标。您可以在我们链接的页面上下载它或在插件中搜索它。这个插件的好处是你可以选择你想要阅读时间出现的位置；页面、帖子或两者兼而有之。您还可以选择位置和格式。

下载插件并激活它后，单击其菜单中的“阅读进度”选项。继续并进行您需要进行的更改。放置阅读时间通常仅用于帖子，因此大多数人可能只会选择该选项。

在样式选项卡中，您可以选择要使用的样式。确保使用与标题相同的字体。如果您想进行任何额外的修改，您还可以添加自定义 CSS 代码。

突出显示和分享

Medium 的另一个非常典型的事情是可以突出显示、分享或评论它，如果你喜欢它。它通过让它与正在阅读它的人互动来为博客文章提供附加值。我们找到了一个插件，可以帮助您做类似的事情；也可以免费使用的突出显示和共享插件。

您可以通过转到“设置”>“突出显示并分享”>“启用您想要使用的社交媒体渠道”来决定人们可以在哪些社交媒体渠道上分享。

包起来

阅读完这篇文章后，你应该能够开始构建你的 Medium 风格的博客，其中包含一些与 Medium 最相关的部分。你有很多方法可以像 Medium 博客一样保持简单，但仍然注入一些个人风格。如果您有任何问题或建议；请确保您在下面的评论部分发表评论，以便我们与我们出色的 Divi 社区保持联系！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

特色图片由朱莉娅蒂姆/shutterstock.com