如何使用 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