• 主頁
  • 文章
  • 主題
  • 如何將粘性側邊欄 CTA 添加到 Divi 中的博客帖子模板

如何將粘性側邊欄 CTA 添加到 Divi 中的博客帖子模板

已發表: 2019-11-27

粘性側邊欄 CTA 在吸引訪問者的注意力方面非常有效，而且不會霸道或分散注意力。 訣竅是在側邊欄中包含一個或兩個元素，當用戶向下滾動頁面時，這些元素“粘住”或固定在帖子內容的一側。 這是傳統側邊欄佈局的一種令人耳目一新的替代方案，因為它提供了現代全寬（無側邊欄）佈局的感覺，並在必要時在頁面一側展示重要的 CTA。

在本教程中，我們將向您展示如何使用 Divi Theme Builder 將粘性側邊欄 CTA 添加到博客文章模板。 這種佈局的應用是深遠的。 它幾乎適用於任何頁面或帖子模板。 另外，您不必局限於 CTA； 您可以選擇添加您喜歡的任何 Divi 模塊。

讓我們開始吧！

免費下載粘性側邊欄 CTA 模板

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

下載文件
免費下載

免費下載

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

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

要將佈局導入您的頁面，只需提取 zip 文件並使用 Theme Builder Portability 選項將 json 文件之一添加到 Divi Theme Builder 中。

讓我們進入教程好嗎？

你需要什麼開始

首先，您需要安裝並激活 Divi 主題。 確保您擁有最新版本的 Divi。

您還需要至少一篇使用 Divi Builder 創建的帖子用於測試目的，以顯示預期結果。

之後，您就可以開始了。

搶先看

以下是已添加到 Divi 中的博客文章模板的粘性側邊欄 CTA 的快速瀏覽。

粘性側邊欄 CTA

如何在 Divi 中將粘性側邊欄 CTA 添加到您的博客帖子模板

添加主題生成器模板

第一步包括將我們的預製模板導入到我們的網站。 我們將使用 Divi Theme Builder Pack #1 中的帖子模板。

首先，導航到 Divi > Theme Builder。 單擊頁面右上角的便攜性圖標。 在可移植性模式中，選擇導入選項卡並從文件夾中選擇 divi-theme-builder-pack-1-post-template.json 文件。 如果您的站點上當前安裝了任何模板，請確保取消選中任何可能覆蓋您當前模板的選項。 然後點擊導入按鈕。

粘性邊欄

構建博客帖子模板

導入模板後，我們準備開始將新的粘性側邊欄 CTA 添加到模板佈局中。 為此，請單擊自定義正文區域的編輯圖標。

粘性側邊欄 CTA

添加雙側邊欄佈局以容納側邊欄 CTA

在模板佈局編輯器中，找到包含帖子內容模塊的行，並將列佈局更改為五分之一五分之三五分之一（1/5 3/5 1/5）列結構。 這將允許我們保留帖子內容的居中列，同時在兩側為我們的粘性側邊欄 CTA 提供兩個部分。

粘性邊欄

更改欄目結構後，將帖子內容模塊拖到中心欄目。

更新行設置

打開行設置並更新以下設計選項：

  • 使用自定義裝訂線寬度：是
  • 天溝寬度：2
  • 寬度：100%（桌面），90%（平板電腦）
  • 最大寬度：1500px

粘性邊欄

這將為我們提供雙側邊欄設置所需的空間。

更新第 1 列設置

接下來，打開第 1 列的設置並為該列指定一個自定義 CSS 類：

  • CSS 類：sticky-cta

粘性側邊欄 CTA

向左列添加側邊欄 CTA

現在我們已準備好迎接第一次行動呼籲。 將號召性用語模塊添加到最左側的列。

粘性邊欄

設計側邊欄 CTA

更新設置如下：

內容
  • 按鈕：“點擊這裡”
  • 正文：“您的內容在這裡。 內聯或在模塊內容設置中編輯或刪除此文本。”
  • 按鈕鏈接網址：#

粘性邊欄

正文設計
  • 正文字體：蒙特塞拉特
  • 正文字體粗細：半粗體
  • 正文對齊：右
  • 正文顏色：#444444
  • 正文大小：22px（桌面），18px（平板）
  • 車身線高：1.3em

粘性側邊欄 CTA

按鈕
  • 按鈕文字大小：14px
  • 按鈕文字顏色：#ffffff
  • 按鈕背景顏色：#6148df
  • 按鈕邊框寬度：0px
  • 按鈕邊框半徑：80px
  • 按鈕字體粗細：粗體
  • 按鈕字體樣式：TT
  • 按鈕填充：頂部 12 像素，底部 12 像素，左側 22 像素，右側 22 像素

粘性邊欄

寬度、對齊方式、填充和邊框
  • 寬度：100%
  • 最大寬度：320px
  • 模塊對齊：右
  • 填充：左 10 像素，右 10 像素
  • 頂部邊框寬度：10px
  • 頂部邊框顏色：#eeeeee
  • 底部邊框寬度：10px
  • 底部邊框顏色：#eeeeee

粘性側邊欄 CTA

將側邊欄 CTA 添加到右列

要為右側的列創建 CTA，請複制我們剛剛創建的 CTA 並將其粘貼到最右側的列中。 然後按如下方式更新副本的設置：

  • 正文對齊方式：左
  • 模塊對齊方式：左

正確的 CTA

更新第 3 列設置

對於右欄中的此 CTA，我們將向該列添加一些上邊距，以便在頁面下方的某個點建立側邊欄 CTA 的起始位置。

首先，打開第 3 列的設置並添加我們添加到第 1 列的相同 CSS 類：

  • CSS 類：sticky-cta

然後將以下自定義 CSS 添加到主元素：

桌面

margin-top: 50%

藥片

margin-top: 0%

div 帖子模板

這將為我們提供右列上的粘性 CTA 的不同起點，它等於行寬的 50%。 您可以根據自己的博客文章的需要隨意調整此值。

利潤

使用代碼模塊將自定義 CSS 添加到模板

為了獲得側邊欄 CTA 的“粘性”定位，我們需要添加一些自定義 CSS。 為此，請在帖子內容模塊（或頁面上的任何位置）下創建一個新的代碼模塊。

div 帖子模板

然後將以下 CSS 粘貼到代碼框中： 

<style> 
@media only screen and (min-width: 980px) {
  #page-container { 
    overflow-y:visible !important; } 
  .sticky-cta {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: calc(50vh - 130px) !important;
  }
  }
</style>

粘性邊欄

此代碼中的頂部偏移量是在滾動時將 CTA 垂直居中放置在頁面上的計算。 50vh 基本上是瀏覽器窗口高度的一半，130px 大約是 CTA 高度的一半。 如果您的 CTA 具有更大/更小的高度，則需要向上或向下調整 130px。

保存設置

完成後，保存模板佈局。

div 帖子模板

然後保存主題構建器設置

粘性邊欄

最後結果

要查看最終結果，請訪問使用該模板的博客文章。

粘性側邊欄 CTA

這就是粘性側邊欄 CTA 將如何粘在滾動條上的方式。 您可以看到這對於較長的帖子內容如何最有效。

粘性側邊欄 CTA

這是在移動顯示器上。

divi 博客帖子模板

最後的想法

這些粘性側邊欄 CTA 是傳統側邊欄的令人耳目一新的替代品。 它們非常適合極簡設計，因為它們不那麼具有侵入性，並且不會給帖子帶來雜亂的感覺。 此外，您可以將 CTA 放置在頁面下方更遠的位置，使其逐漸出現並固定在滾動條上，使其對訪問者更加突出。 不要忘記。 您可以用任何 Divi 模塊或模塊組合替換 CTA，以創建幾乎任何您想要的東西。 您也可以選擇只在一側保留一個 CTA。 它似乎有很多應用程序。

我希望這將有助於改進您在帖子模板上顯示 CTA 的方式。

如需更多靈感，請查看我們關於粘性元素的類似帖子。

我期待在評論中收到您的來信。

乾杯!