所有大博客都有的 10 個設計元素

已發表: 2011-10-18

每當您創建新事物時，無論是產品、服務還是網站，首先要看看其他人在您之前創建了什麼。

為了幫助您為博客設計奠定基礎，我列出了幾乎所有大型博客共有的 10 個設計元素，以及如何在 WordPress 博客上實現它們。

10 大博客

為了給你一些硬數據，我選擇使用 Mashable、TechCrunch、The Next Web、GigaOM、Seth's Blog、Copyblogger、Problogger、KISSmetrics 博客、Freelance Switch 和 The Oatmeal 作為這篇文章的示例。

標題

這些網站中有十分之九的標題高度為 100 像素或更低。其中大多數包括徽標和搜索欄。

標誌 (10/10)

所有這十個博客的左上角都有自己的徽標，並將其超鏈接到主頁。

Gigaom 標誌頁眉

GigaOM.com 徽標位於左上角，它鏈接到主頁。

如何實現超鏈接標誌：大多數 WordPress 主題（即 WooThemes、Thesis、Genesis 等）允許您通過主題的設計設置上傳標誌並自動鏈接主頁。

搜索框 (6/10)

十個大博客中有六個在標題右側有一個搜索框。 Seth's Blog 和 Copyblogger 將他們的搜索欄放在側邊欄的頂部。 KISSmetrics 博客和 The Oatmeal 沒有搜索機制。

TheNextWeb.com 的搜索框位於標題的右側。

如何實現搜索框：您可以將搜索欄作為小部件放置在主題的外觀 > 小部件區域中。如果您沒有小部件標題，這是搜索框的 php：

<?php get_search_form(); ?>

將它放在 header.php 或主題的自定義 php 文件中。如果您不熟悉 php，請將其放在小部件區域內側邊欄頂部附近。

內容區

十個大博客中有八個的左側是內容區域，右側是側邊欄。以下是內容區域中一些更常見的設計元素。

社交按鈕（滑塊）（10/10）

所有大型博客都包含社交分享按鈕，其中 Facebook 的 Like/Share 和 Twitter 的 Tweet 最受歡迎。 Google 的 +1 和 LinkedIn 的分享按鈕也很受歡迎。 Digg、StumbleUpon 和 Reddit 按鈕不再像以前那樣頻繁地列出。

Mashable 和 TechCrunch 在內容左側都有社交滑塊，當您向下滾動頁面時，這些滑塊會向下滑動。收入日記也有這個。

TechCrunch.com 的共享圖標位於左邊距，它們向下滾動頁面。

如何實現社交按鈕：如果您不想將按鈕硬編碼到您的主題中，我推薦 Like、Easy Twitter Button 和 WordPress Google +1 Button 插件。使用 Sharebar 插件將滾動社交滑塊放在內容的左側。

後頁腳號召性用語 (5/10)

一半的大型博客在帖子底部都有非常具體的號召性用語。通常，號召性用語是訂閱或購買。

其他五個博客只是鼓勵您分享、評論或點擊廣告。不管怎樣，他們都有行動號召。

TheOatmeal.com 的號召性用語通常是購買 The Oatmeal 書。

如何實現後頁腳號召性用語：由於每個主題的工作方式不同，因此很難在此處給出具體說明。您所要做的就是在內容區域底部和評論區域上方將一塊 HTML 連接到您的主題中。

側邊欄

側邊欄通常大約是內容區域寬度的一半，正如我之前提到的，大多數側邊欄都在右側。

側邊欄選擇加入 (8/10)

十個網站中有八個在其側邊欄中有選擇加入，其中五個位於頂部。 免費更新和訂閱這兩個詞是最流行的頭條新聞和號召性用語。

Copyblogger.com 的選擇加入位於側邊欄的頂部，標題為免費更新和號召性用語，加入我們。

如何實現側邊欄選擇加入：每個主要的電子郵件營銷提供商都有某種形式的生成 HTML 的表單構建器。將 HTML 嵌入文本小部件並將其放在側邊欄的頂部。您可能必須使用 CSS 才能讓它看起來像您想要的那樣。

社交媒體鏈接 (9/10)

十個博客中有九個提供指向其社交媒體資料的鏈接，其中 Twitter 和 Facebook 最受歡迎。其他值得注意的是 YouTube、LinkedIn、StumbleUpon、Flickr 和 Tumblr。

Mashable.com 的側邊欄包含 Like Box、+1、Follow、LinkedIn、YouTube、Stumble 和 RSS。

如何實現社交媒體鏈接：您可以在此處創建 Facebook Like Box。或者，您可以在此處獲取免費的社交媒體圖標來製作您自己的按鈕。

產品/廣告 (9/10)

十個中有九個在側邊欄上宣傳他們的產品或廣告，其中五個同時具有這兩種功能。 TheOatmeal.com 沒有這樣做的唯一原因是因為他主要將產品作為號召性用語。

Seth Godin 在側邊欄列出了他所有的書籍，最新的在頂部。

如何添加產品和廣告：在側邊欄展示您的產品就像編寫 HTML 並將其放置在任意文本小部件中一樣簡單。要在側邊欄展示輪播廣告，我推薦使用 OIOpublisher 插件。

頁腳

傳統上，頁腳被用作列出指向您網站每個角落的鏈接的地方。但是大多數網站現在都選擇了更簡約的頁腳設計。

類別或其他鏈接 (5/10)

在具有更強大頁腳的五個大型博客中，它們都將類別鏈接或其他鏈接列為額外的導航菜單區域。

Problogger.net 在頁腳中列出了所有類別，以幫助訪問者瀏覽內容。

如何實現頁腳鍊接：很多 WordPress 主題都有小部件頁腳。如果是這樣，請使用 Text 小部件將 HTML 放置在您的頁腳中。與帖子頁腳號召性用語類似，這裡很難給出詳細說明，因為每個主題都不同。