如何創建全屏、透明或全寬 Bloom 選擇加入表單

已發表: 2017-09-10

在今天的教程中，我們將向您展示如何使用 Bloom 創建全屏、透明和全寬的選擇加入表單，Bloom 是一個幫助您向網站添加選擇加入表單的插件。我們將逐步指導您完成設計和設置兩個示例選擇加入表單的過程。通過仔細閱讀這篇文章，您將能夠自己製作透明的選擇加入表格，並在任何安裝了 Bloom 插件的網站上使用它——無論是您自己的網站還是客戶的網站。

在您的網站上擁有一個或多個選擇加入表單不僅可以幫助您與訪問者保持聯繫，還可以幫助您與他們互動。由於它帶來了以結果為導向的數據，現在很難遇到一個沒有選擇加入表格的網站。通過在正確的時間和地點獲得訪問者的電子郵件地址，您將更接近了解他們並使他們成為忠實的客戶和/或訪問者。

但是，如果您不想使用標準的選擇加入表單，您可以選擇全屏、透明或全寬的選擇加入表單。我們將提前向您展示這兩個示例。

示例 1

示例 2

使用 Bloom 創建全屏和透明的選擇加入表單：提示

Bloom 插件提供了多種可能性來設計您的選擇加入表單並以最適合您和您的訪問者的方式吸引您的觀眾。除了 Bloom 提供的現有選擇加入模板之外，還有內置選項可以輕鬆創建自定義設計。您還可以添加自定義 CSS 代碼以獲得更高級的結果。

然而，當試圖通過 CSS 代碼對設計進行一些調整時，您應該記住一些事情，這樣您就不會浪費時間試圖使事情發揮作用。

首先激活選擇加入表格

在設計選擇加入表單時，“設計”選項卡頂部有一個預覽按鈕。這有助於您在設計時預覽您正在製作的結果。雖然內置的設計更改也會在預覽中自動更改，但這並不適用於 CSS 代碼。如果您通過“設計”選項卡中的“自定義 CSS”字段進行某些更改，則其中一些更改可能不適用於預覽表單，但適用於您網站上的選擇加入表單。

這就是為什麼您必須首先激活選擇加入表單，然後將其應用於您的一個頁面。為了確保您的訪問者在您仍在處理它時不會遇到選擇加入表單，您可以在尚未與訪問者共享的新頁面上預覽它。

（或者，當然，在登台/測試站點上。）

首先創建一個新頁面並為其命名。您不必在該頁面中放入任何內容；它必須存在。在設計選擇加入表單時，請轉到“顯示設置”選項卡。將延遲時間設置為 1 秒，這樣您就不必每次想要檢查結果時都等待選擇加入表單。

選擇參加

向下滾動該選項卡，當您遇到“顯示在”選項時，選擇“頁面”。選擇“頁面”後，您將看到網站上活動頁面的列表。選擇您最近創建的頁面。確保僅在該頁面上顯示選擇加入表單。

選擇參加

根據您激活的表單進行更改

您對 CSS 代碼所做的更改不適用於所有選擇加入的表單；它們僅適用於您正在專門處理的選擇加入表格。這就是為什麼我們需要的一些類是獨一無二的。

在這篇文章的後面，我們將向您展示如何為我們正在重新創建的示例做到這一點。

開始創建第一個示例

透明的選擇加入表格

我們向您展示如何重新創建的第一個示例是上面打印屏幕中的示例。您可以看到選擇加入表單似乎是全屏的。儘管看起來像這樣，但我們只製作了一個透明的選擇加入表單並更改了背景顏色。

添加選擇加入表格

讓我們開始向您的網站添加一個新的選擇加入表單，方法是轉到您的WordPress 儀表板 > Bloom > 單擊右上角的“新選擇”> 選擇“彈出”。

鍵入表單的名稱，然後在“設置”選項卡中選擇您的電子郵件提供商。完成後，您可以轉到“設計”選項卡。這是我們將在這篇文章中關注的主要選項卡。選擇提供的模板之一併繼續。對於我們正在製作的示例，我們選擇行中的第一個。

選擇參加

設計設置

當您在“設計”選項卡中預覽表單而不進行任何修改時，您將看到以下選擇加入表單：

選擇參加

它看起來與結果看起來完全不同，但您也可以注意到選擇加入表單的基礎是相同的。

選擇加入標題和消息

現在，為了讓我們的選擇加入表單看起來像我們上面展示的示例，首先對“設計”選項卡中的 Optin 標題和 Optin 消息的標准設計設置進行以下修改：

文字顏色：#FFFFFF
文字樣式：粗體
文字方向：居中

選擇參加

圖像設置和選擇樣式

向下滾動相同的選項卡並對圖像設置、Optin 樣式和邊框樣式進行以下調整：

圖像方向：無圖像
背景顏色：透明
標題字體：Lato
正文字體：Lato
文字顏色：深色文字
角樣式：方角
邊框方向：頂部 + 底部邊框
邊框顏色：#FFFFFF
邊框樣式：虛線邊框

選擇參加

邊框樣式、表單設置和表單樣式

繼續向下滾動並對錶單設置和表單樣式進行以下修改：

形式方向：底部形式
名稱字段：無名稱字段
電子郵件文本：電子郵件
按鈕文字：訂閱！
表單字段方向：堆疊表單字段
表單字段角樣式：圓角
表格文字顏色：淺色文字
表格背景顏色：透明
按鈕顏色：#6a18a0
按鈕文字顏色：淺色

選擇參加

表單邊緣樣式

您必須對選擇加入表單進行的最後一次手動更改是選擇表單邊緣樣式，在這種情況下，它是一條直線。

自定義 CSS

最後，我們需要對錶單進行一些 CSS 修改以將所有內容設置到位。將以下代碼行複制並粘貼到自定義 CSS 字段中：

.et_bloom .et_bloom_popup:after{
background: -webkit-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -o-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: -moz-linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important;
background: linear-gradient(rgba(129, 83, 177, 0.98) 50%, rgba(177,194,233,0.80) 50%) !important; }

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content
{ background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(33,97,160,0.5), 2px 2px 1px rgba(33,97,160,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_light .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

選擇參加

根據您自己的 Bloom Opt-in 表單更改代碼

在我們與您共享的代碼中，您必須進行三處調整。一些 CSS 類僅適用於一種選擇加入表單，這就是為什麼我們需要知道我們正在處理哪種選擇加入表單。您唯一需要做的就是將一個數字更改三遍：

選擇參加

上面打印屏幕中突出顯示部分末尾的數字是 6，因為它是該行中的第 6 個：

選擇參加

因此，根據它在表單列表中的位置，您必須調整數字。

最後結果

如果您現在預覽您的選擇加入表單，您會注意到所有修改都已完成，您的選擇加入表單如下所示：

選擇參加

顯示設置

您現在可以轉到“顯示”設置並進行所需的修改以設置您的 Bloom 選擇加入表單。我們不打算深入細節，因為這篇文章將只處理這些選擇加入表單的設計部分。

開始創建第二個示例

選擇參加

我們將向您展示的下一個示例不是全屏而是全角。為了演示我們如何實現結果，我們將使用與前一個示例相同的選擇加入表單，但對其進行一些小的更改並添加不同的 CSS 代碼。

設計設置

在內置的設計設置中，我們只需要做三件不同的事情。記住; 我們正在使用我們在上一個示例中創建的選擇加入表單。除了我們將要提到的三件事外，與第一個示例相同的內置設置也適用。您要做的第一件事是將邊界方向設置為“無邊界”。

向下滾動並為表單文本顏色選擇“深色文本”，並使用“#724501”作為按鈕顏色。

選擇參加

自定義 CSS

最後，我們需要向自定義 CSS 框添加一些 CSS 代碼行：

@media only screen and (min-width: 981px){ 
.et_bloom .et_bloom_popup:after{ 
margin-top: 12% !important; 
height: 50% !important; 
background: url(""); 
border-top: 3px solid #b29470 !important; border-bottom: 3px solid #b29470 !important; 
box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-webkit-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
-moz-box-shadow: 0px 1px 30px 0px rgba(46, 50, 50, 0.92); 
}
.et_bloom .et_bloom_form_container .et_bloom_close_button {
right: -250px !important;
top: -20% !important;
}}

@media only screen and (max-width: 981px){
.et_bloom .et_bloom_popup:after{
background: url("");
} }

.et_bloom .et_bloom_form_container .et_bloom_popup_input {
background: #FFFFFF !important;
}

.et_bloom .et_bloom_form_container {
background-color: none !important;
background: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_form_container .et_bloom_form_header .et_bloom_header_text_dark {
background: none !important;
}

.et_bloom .et_bloom_form_container.et_bloom_form_right {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header {
background-color: none !important;
background: none !important;
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 {
font-size: 50px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_optin_6 .et_bloom_form_container p {
font-size: 30px !important;
text-shadow: -1px -1px 1px rgba(114,69,1,0.5), 2px 2px 1px rgba(114,69,1,0.5);
}

.et_bloom .et_bloom_form_container.et_bloom_form_text_dark .et_bloom_form_content input {
text-align: center !important;
color: #FFFFFF !important;
}

.et_bloom .et_bloom_bottom_stacked p.et_bloom_popup_input {
width: 50% !important; margin-left: 25%;
}

.et_bloom .et_bloom_form_container.et_bloom_rounded button {
width: 50% !important;
margin-left: 25%;
}

.et_bloom .et_bloom_form_container .et_bloom_form_content {
padding: 0 0 40px 0 !important;
}

選擇參加

替換背景圖像

您需要做的最後一件事是替換 wp-content 文件夾或其他地方的其中一個 URL 正在使用的背景圖像。在下面的打印屏幕中標記的第一個 URL 適用於台式機，第二個適用於平板電腦和手機。

選擇參加

最後結果

你完成了！您的第二個選擇加入表格現在應如下所示：

選擇參加

最後的想法

使用bloom製作精美的選擇加入表單的可能性是無窮無盡的。我們在這篇文章中向您展示的製作方法只是您可以獲得多少創意的一個例子。如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

請務必訂閱我們的電子郵件通訊和 YouTube 頻道，這樣您就不會錯過重大公告、有用提示或 Divi 免費贈品！