如何在博客帖子模板中包含全高固定側邊欄

已發表: 2020-07-09

選擇在您的博客文章中添加側邊欄完全取決於您。一些博主選擇根本不使用側邊欄。本教程適用於那些喜歡使用側邊欄但想讓它看起來有點不同的人。通常，側邊欄是靜態定位的，但如果帖子內容很長，這意味著讀者必須向上滾動才能看到側邊欄。

在此博客帖子模板設計中，我們創建了一個全高固定側邊欄，可在向下滾動帖子內容時保持原位。在重新創建教程時，請在瀏覽器中打開兩個選項卡：一個用於主題構建器，另一個用於博客文章預覽。通過這種方式，您可以隨時查看更改。

讓我們開始吧！

預覽

在開始之前，我們先來看看全高固定側邊欄。

桌面

固定側邊欄

移動的

固定側邊欄

免費下載全高固定側邊欄模板

要使用免費的全高固定側邊欄模板，您首先需要使用下面的按鈕下載它。要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

您已成功訂閱。請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

創建側邊欄小部件

在開始使用全高固定側邊欄模板之前，創建一個自定義側邊欄小部件。稍後，我們會將其包含在模板內的側邊欄中。

打開小部件生成器

單擊“外觀”並選擇“小部件”。

將元素添加到側邊欄小部件

將“最近的帖子”和“類別”元素拖到側邊欄小部件中。

在小部件中調整元素設置

選擇僅顯示 3 個最近的帖子並添加標題。也為類別小部件添加標題，完成後不要忘記在兩個框中單擊“保存”。

最近的帖子標題：閱讀更多：
分類標題：瀏覽

固定側邊欄

2. 開始使用主題生成器

打開主題生成器/添加新模板

是時候開始重新創建固定的全高側邊欄模板了！首先，打開您的主題構建器並添加一個新模板。

設置模板設置

在模板設置中，選擇“所有博客文章”。如果您喜歡將模板用於特定類別或標籤，請相應地修改模板設置。

添加自定義正文

然後，單擊“添加自定義正文”。

固定側邊欄

選擇構建自定義主體

我們將從頭開始重新創建此模板，因此請繼續選擇“構建自定義主體”。

從頭開始構建

進入可視化構建器後，再次選擇從頭開始構建的選項。

使用全高固定側邊欄重新創建模板

部分設置

背景

在模板編輯器中打開現有部分並添加漸變背景。

背景漸變
- 顏色 1：白色 #ffffff
- 顏色 2：淺灰色 #eaeaea

間距

也添加一些填充。

頂部填充：55px

添加新行

列結構

現在添加具有 3/4 – 1/4 列結構的行。

固定側邊欄

漿紗

如下調整行的大小。

自定義天溝寬度：2
寬度：
- 台式機和平板電腦：90%
- 電話：100%
最大寬度：
- 桌面：1920px
最小高度：100vh

第 1 列設置

間距

在添加模塊之前，請調整列設置。首先是第 1 列。

左右填充
- 平板電腦：2%
- 電話：8%

第 2 列設置

背景

然後，為第 2 列添加背景顏色。

背景顏色：白色#ffffff

間距

也包括一些間距。

左右填充
- 台式機：3%
- 平板電腦和手機：14%

邊界

接下來給列圓角。

圓角
- 平板電腦和台式機：15px

自定義 CSS

移至高級選項卡並向主元素添加一些 CSS 代碼行。這將幫助我們在桌面上創建全高側邊欄。

主要元素
- 最小高度：100%

min-height: 100%;

固定側邊欄

位置

最後但並非最不重要的是，要創建固定側邊欄效果，請向列添加固定位置。

位置
- 桌面：固定
- 平板電腦和手機：默認
位置：右上角

固定側邊欄

添加帖子標題模塊 #1

元素

是時候添加模塊了！從第 1 列中的第一個帖子標題模塊開始，並僅啟用標題。

節目名稱：是

固定側邊欄

動態背景圖片

然後，轉到背景設置並將特色圖像用作動態背景圖像。

固定側邊欄

標題文字

設置標題文本設置的樣式。

標題字體：Bai Jamjuree
標題字體樣式：大寫
標題文字顏色：#e98074
標題文字大小：
- 桌面：45px
- 平板電腦：35px
- 電話：25px
標題字母間距：3px
標題行高度：1.3em

固定側邊欄

間距

然後，添加一些自定義的頂部和底部填充。

頂部填充：20%
底部填充：20%

固定側邊欄

邊界

也包括一些圓角。

所有角：15px

固定側邊欄

標題 CSS

並通過在高級選項卡中向模塊的標題元素添加三行 CSS 代碼來完成模塊設置。

background-color: rgba(255,255,255,0.56);
padding-top: 2%;
padding-bottom: 2%;

固定側邊欄

添加帖子標題模塊 #2

元素

現在添加另一個帖子標題模塊。選擇以下元素。

元
作者
帖子分類

元文本

打開設計選項卡並設置元文本樣式。

字體: Bai Jamjuree
重量：中等
顏色：灰色#8e8d8a
尺寸
- 桌面：20px
- 平板電腦和手機：15px
字母間距：2px

漿紗

也調整大小。

寬度：90%
模塊對齊：居中

固定側邊欄

間距

以一定的間距完成此模塊的設置。

頂部填充：15px

固定側邊欄

添加帖子內容模塊

背景

接下來添加一個白色背景的帖子內容模塊。

背景顏色：白色#ffffff

文本

現在，設置正文的樣式。

字體：拉托
顏色：灰色#8e8d8a
尺寸：16px

標題文字

繼續設置所有標題文本樣式。

H1
- 字體: Bai Jamjuree
- 重量：中等
- 顏色: 珊瑚色#e98074
- 尺寸
  - 桌面：45px
  - 平板電腦：33px
  - 電話：30px
- 字母間距：1px
H2
- 字體: Bai Jamjuree
- 重量：中等
- 顏色: 珊瑚色#e98074
- 尺寸
  - 桌面：35px
  - 平板電腦和手機：25px
- 字母間距：1px
H3
- 字體: Bai Jamjuree
- 重量：常規
- 顏色：深灰色#606060
- 尺寸
  - 桌面：25px
  - 平板電腦和手機：22px
- 字母間距：1px
H4
- 字體: Bai Jamjuree
- 重量：常規
- 顏色：深灰色#606060
- 尺寸
  - 桌面：22px
  - 平板電腦：20px
  - 電話：18px
- 字母間距：1px
H5
- 字體: Bai Jamjuree
- 重量：中等
- 顏色：深灰色#606060
- 尺寸：16px
- 字母間距：1px
H6
- 字體: Bai Jamjuree
- 重量：常規
- 顏色：深灰色#606060
- 尺寸：16px
- 字母間距：1px