如何在WordPress中創建警報欄(3種簡單方法)


您是否要向您的WordPress網站添加警報欄?

警報欄或通知欄是一種使訪問者了解重要更新,特惠,新產品發布等的好方法。

在本文中,我們將向您展示如何通過3種簡單的解決方案在WordPress中創建警報欄。

為您的WordPress網站創建警報欄

為什麼要在WordPress中創建警報欄?

警報欄是一種讓訪問者了解任何重要信息的好方法。 這可能是正在進行的銷售活動,可能會更新您的營業時間,也可能會更改您的服務。

您還可以使用警報欄來告知訪客特殊優惠,例如買一送一的免費優惠。 如果您運行在線商店,這是一個不錯的選擇。

使用警報欄比在首頁上發佈公告要好。 您的警報欄可能會突出顯示在整個網站的每個頁面的頂部。

在WordPress中創建警報欄很容易。 我們將介紹2個最好的通知欄插件,以及使用HTML和CSS代碼的手動方法。 只需單擊下面的鏈接即可直接跳至每個選項:

方法1:使用OptinMonster創建警報欄

OptinMonster是市場上最好的轉換優化軟件。 它可以幫助您將更多的網站訪問者轉換為訂閱者和客戶。

它帶有漂亮的燈箱彈出窗口,歡迎墊,倒數計時器和其他動態疊加層,可幫助您增加網站的訂戶和銷售量。

您也可以使用OptinMonster為您的網站創建一個警報欄。 這是我們要創建的一個:

在OptinMonster中創建的警報欄

OptinMonster內部有很多預構建的模板。 這使得在幾分鐘之內創建看起來不錯的警報欄非常容易。

首先,您需要訪問OptinMonster網站並註冊一個帳戶。

接下來,您需要安裝並激活OptinMonster WordPress插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

此插件將您的WordPress網站連接到OptinMonster應用。

激活後,您需要輸入許可證密鑰。 您可以在OptinMonster網站上的帳戶區域中找到它。

在您的WordPress儀表板中,單擊OptinMonster菜單。 然後,您需要點擊“連接您的帳戶”按鈕。 只需按照屏幕上的提示將您的WordPress網站連接到您的OptinMonster帳戶即可。

將您的WordPress網站連接到您的OptinMonster帳戶

連接OptinMonster後,只需轉到 OptinMonster»廣告活動 在您的WordPress儀表板中。 繼續並點擊“創建新廣告系列”按鈕:

在OptinMonster中創建新的廣告系列

您將被帶入OptinMonster廣告系列創建工具。 在這裡,您需要選擇“浮動欄”作為您的廣告系列類型。

選擇警報欄的浮動欄廣告系列類型

接下來,您將看到一系列的廣告系列模板。 只需選擇您要使用的模板。 您只需要將鼠標移到它上面,然後單擊“使用模板”按鈕將其選中。

我們將在警報欄中使用“促銷”模板:

將促銷模板用於警報欄

接下來,系統將提示您為模板命名,並選擇要在其上使用的網站。 OptinMonster應該已經在此處填寫了您網站的名稱和URL。

為您的OptinMonster廣告系列命名

為廣告系列命名後,請點擊“開始構建”按鈕。

現在,您將看到廣告系列編輯器。 您可以在此處設計廣告系列。

您將看到默認情況下,警報欄出現在屏幕底部。 要將其移至屏幕頂部,請點擊左側的“浮動設置”。

更改警報欄的浮動設置

接下來,只需單擊滑塊即可將浮動條移動到頁面頂部:

浮動條現在位於頁面頂部

要更改浮動條上的文本,只需單擊要更改的區域。 編輯器將在左側打開。 只需在此處輸入任何文本即可。

編輯警報欄的文本

您還可以更改字體,文本的大小和顏色等。

要更改倒數計時器,只需單擊它,然後單擊“倒數”標籤。 然後繼續輸入所需的結束日期和時間。

編輯提醒欄的倒數計時器

如果願意,您還可以將計時器設置為常綠倒數而不是靜態倒數。 為您網站的每個訪問者分別設置了常綠倒計時。

繼續並根據需要對警報欄進行許多更改。 一旦滿意,別忘了單擊屏幕頂部的“保存”按鈕。

保存您的OptinMonster廣告系列

接下來,您需要轉到“顯示規則”標籤,以選擇警報欄在網站上顯示的時間和地點。 默認規則是在訪問者進入頁面5秒鐘後顯示警報欄。

我們將其更改為0秒,因此警報欄會立即顯示。 只需將“秒”倒計時更改為0:

更改警報欄的顯示規則

然後,點擊“下一步”按鈕,並在下一個屏幕上將操作保留為“顯示廣告系列視圖:優化”。 再次單擊“下一步”,您將看到一個摘要。

警報欄的顯示規則摘要

感到滿意後,只需單擊屏幕頂部的“保存”按鈕,然後單擊“發布”標籤。 單擊“狀態”滑塊將其設置為“活動”。

在OptinMonster界面中打開警報欄

最後一步是在您的網站上激活廣告系列。 點擊WordPress信息中心中的OptinMonster標籤,然後點擊“刷新廣告系列”按鈕

點擊按鈕刷新您的OptinMonster廣告系列

然後,您會在此處看到您的廣告系列。

您的OptinMonster廣告系列應在WordPress信息中心中列出

只需訪問您網站上的任何頁面,您就會看到您的廣告系列正在運行:

在OptinMonster中創建的警報欄

方法2:使用SeedProd創建警報欄

製作警報欄的另一種方法是使用SeedProd WordPress插件。 SeedProd以WordPress的“即將推出”和維護模式頁面而聞名。

SeedProd還有一個Notification Bar插件,您可以在註冊任何付費軟件包時獲得。

首先,您需要訪問SeedProd網站並註冊一個帳戶。 接下來,轉到您帳戶內的“下載”頁面,然後下載Notification Bar Pro插件:

從SeedProd下載Notification Bar Pro

然後,您需要在網站上安裝並激活Notification Bar Pro插件。 有關更多詳細信息,請參閱有關如何安裝WordPress插件的分步指南。

安裝後,您會看到一個頁面,需要在其中輸入許可證密鑰。 您可以在您的SeedProd帳戶中找到它。

輸入Notification Bar Pro的許可證密鑰

接下來,前往 設置»通知欄專業版 您將在此處開始創建通知欄。 只需輸入名稱,然後單擊“創建欄”按鈕即可。

在SeedProd中創建通知欄

現在,您將看到SeedProd通知欄編輯器。 首先,通知欄將在屏幕頂部顯示為橙色條:

通知欄的編輯界面

要將文本添加到通知欄,請點擊左側的“號召性用語和按鈕”標籤。 只需輸入您要使用的文本。 如果要添加號召性用語按鈕,可以輸入按鈕的文本和鏈接:

編輯通知欄的文本

默認情況下,文本的字體和大小與WordPress主題中的主要文本相同。 要使其更大,只需單擊“版式”選項卡。

在這裡,您可以為欄本身的文本和按鈕文本設置所需的任何字體和大小。

更改通知欄的版式設置

如果需要,可以在“顏色”選項卡中更改欄和按鈕的顏色。

您甚至可以在通知欄中添加其他元素,例如電子郵件選擇,倒數計時器,單擊通話按鈕,甚至鏈接到您的社交資料。

當您對通知欄感到滿意時,請單擊“啟用/禁用欄”選項卡,然後切換到“啟用欄”選項。 最後,點擊屏幕頂部的“保存”按鈕。

啟用通知欄使其生效
您的通知欄現在將出現在您的網站上:

通知欄實時顯示在我們的網站上

方法3:使用自定義HTML / CSS手動創建警報欄

如果您不想使用OptinMonster或Notification Bar Pro怎麼辦? 在這種方法中,我們將向您展示如何使用HTML和CSS代碼創建通知欄。

注意: 我們不建議初學者使用此方法。 如果您是WordPress的新手,或者對將代碼添加到站點感到不自信,那麼建議您改用上述插件方法之一。

首先,您將需要為警報欄複製並粘貼一些自定義CSS代碼。 只需轉到 外觀»定制器 信息中心中的頁面,然後點擊底部的“其他CSS”標籤。

在主題定制器中輸入其他CSS

現在,繼續並將以下CSS代碼複製並粘貼到該框中:

.alertbar { 
    background-color: #ff0000; 
    color: #FFFFFF; 
    display: block; 
    line-height: 45px;
    height: 50px; 
    position: relative; 
    text-align: center; 
    text-decoration: none; 
    top: 0px; 
    width: 100%;
    z-index: 100;
}

複製該代碼後,它應如下所示。 只需單擊頁面頂部的“發布”按鈕即可保存CSS代碼。

主題定制器中顯示的其他CSS

接下來,您需要將警報欄文本的HTML代碼添加到您的站點。

最好的方法是安裝並激活免費的“插入頁眉和頁腳”插件。

注意: 插入頁眉和頁腳是WPBeginner自己的插件之一。 我們創建它的目的是使添加腳本,HTML代碼以及更多內容到您的網站頁面變得非常容易。

激活插件後,轉到 設置»插入頁眉和頁腳 在您的WordPress管理員中。 只需將以下HTML代碼行複制並粘貼到“正文中的腳本”框中:

We are currently closed due to Covid-19.

在插入頁眉和頁腳的“正文中的腳本”框中,該代碼應如下所示:

使用插入頁眉和頁腳插件添加HTML代碼

當然,您可以將警報文本更改為您喜歡的其他任何內容。 完成後,請不要忘記單擊頁面底部的“保存”按鈕。

現在,您可以訪問您的站點以查看警報欄。 它應顯示在每個頁面的頂部,如下所示:

CSS警報欄位於網站上

小費: 在一些WordPress主題中,警報欄可能與菜單重疊。 您可以將條形的高度更改為40px或30px,以避免出現這種情況。 您還需要相應地減小行高,以使文本在欄中垂直居中。

我們希望本文能幫助您學習如何在WordPress中創建警報欄。 您可能還會喜歡我們與最佳WordPress拖放頁面構建器的比較,以幫助您在無需編寫任何代碼的情況下進一步自定義網站,以及我們的最佳WooCommerce插件列表,以提高您的商店銷售額。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。