フルスクリーン、トランスペアレント、またはフル幅のブルームオプトインフォームを作成する方法

今日のチュートリアルでは、Bloomを使用してフルスクリーン、透明、全幅のオプトインフォームを作成する方法を紹介します。これは、オプトインフォームをWebサイトに追加するのに役立つプラグインです。 2つのオプトインフォームの例を設計および設定するプロセスを段階的に説明します。 この投稿に注意深く従うことで、透明なオプトインフォームを自分で作成し、Bloomプラグインがインストールされている任意のWebサイトで使用できるようになります。これは、自分のWebサイトであろうとクライアントのWebサイトであろうと関係ありません。

Webサイトに1つまたは複数のオプトインフォームを配置することは、訪問者と連絡を取り合うだけでなく、訪問者との交流にも役立ちます。 結果指向のデータがもたらされるため、今日ではオプトインフォームがないWebサイトに出くわすことは困難です。 適切な時間と場所で訪問者の電子メールアドレスを取得することにより、訪問者を知り、忠実な顧客や訪問者にすることに一歩近づくことができます。

ただし、標準のオプトインフォームから離れたい場合は、代わりにフルスクリーン、透明、または全幅のオプトインフォームを選択できます。 事前に2つの例を示します。

例1

例2

ブルームを使用したフルスクリーンで透明なオプトインフォームの作成：ヒント

Bloomプラグインは、オプトインフォームのスタイルを設定し、あなたとあなたの訪問者の両方に最適な方法で視聴者を引き付けるためのさまざまな可能性を提供します。 Bloomが提供する既存のオプトインテンプレートに加えて、カスタマイズされたデザインを簡単に作成できる組み込みオプションもあります。 カスタムCSSコードを追加して、より高度な結果を取得することもできます。

ただし、CSSコードを使用してデザインを調整する場合は、機能させるために時間を無駄にしないように注意する必要があることがいくつかあります。

最初にオプトインフォームをアクティブ化する

オプトインフォームをデザインするときは、[デザイン]タブの上部にプレビューボタンがあります。 これは、設計中に作成した結果をプレビューするのに役立ちます。 組み込みのデザイン変更はプレビューでも自動的に変更されますが、CSSコードには含まれません。 [デザイン]タブの[カスタムCSS]フィールドで特定の変更を行う場合、それらの変更の一部はプレビューフォームには適用されないが、Webサイトのオプトインフォームには適用される可能性があります。

そのため、最初にオプトインフォームをアクティブにして、ページの1つに適用する必要があります。 作業中にオプトインフォームが訪問者に表示されないようにするために、訪問者と共有していない新しいページでプレビューすることができます。

（または、もちろん、ステージング/テストサイトで。）

新しいページを作成して名前を付けることから始めます。 そのページに何も入れる必要はありません。 それはただ存在しなければなりません。 オプトインフォームをデザインしているときに、[表示設定]タブに移動します。 結果を確認するたびにオプトインフォームを待つ必要がないように、遅延時間を1秒に設定します。

そのタブを下にスクロールし、[表示]オプションが表示されたら、[ページ]を選択します。 「ページ」を選択すると、Webサイトでアクティブなページのリストが表示されます。 最近作成したページを選択します。 そのページにのみオプトインフォームを表示するようにしてください。

有効化したフォームに応じて変更を加える

CSSコードで行った変更は、すべてのオプトインフォームに適用されるわけではありません。 それらは、あなたが具体的に取り組んでいるオプトインフォームにのみ適用されます。 そのため、必要なクラスのいくつかは一意になります。

この投稿の後半で、再作成する例でそれを行う方法を示します。

最初の例の作成を開始します

再作成する方法を示す最初の例は、上の印刷画面の例です。 オプトインフォームが全画面表示になっていることがわかります。 そのように見えるかもしれませんが、透明なオプトインフォームを作成し、背景色を変更しただけです。

オプトインフォームを追加する

WordPressダッシュボードに移動して新しいオプトインフォームをWebサイトに追加することから始めましょう>ブルーム>右隅にある[新しいオプチン]をクリック> [ポップアップ]を選択します。

フォームの名前を入力し、[設定]タブでメールプロバイダーを選択します。 それが完了したら、[デザイン]タブに移動できます。 これが、この投稿で焦点を当てるメインタブです。 提供されているテンプレートの1つを選択して、続行します。 私たちが作成している例では、行の最初のものを選択しています。

デザイン設定

変更を加えずに[デザイン]タブでフォームをプレビューすると、次のオプトインフォームが表示されます。

結果の外観とはかなり異なりますが、オプトインフォームの基本が同じであることに気付くでしょう。

オプトインのタイトルとメッセージ

ここで、オプトインフォームを上記の例のようにするには、[デザイン]タブ内の[Optinタイトル]と[Optinメッセージ]の標準デザイン設定に次の変更を加えることから始めます。

• テキストの色：#FFFFFF
• テキストスタイル：太字
• テキストの向き：中央

画像設定と最適なスタイリング

同じタブを下にスクロールして、画像設定、最適なスタイル、境界線のスタイルを次のように調整します。

• 画像の向き：画像なし
• 背景色：クリア
• ヘッダーフォント：Lato
• ボディフォント：ラト
• テキストの色：暗いテキスト
• コーナースタイル：四角いコーナー
• 境界線の向き：上+下の境界線
• ボーダーカラー：#FFFFFF
• ボーダースタイル：破線のボーダー

ボーダースタイル、フォーム設定、フォームスタイリング

下にスクロールし続け、フォームの設定とフォームのスタイルにも次の変更を加えます。

• フォームの向き：下部のフォーム
• 名前フィールド：名前フィールドなし
• メールテキスト：メール
• ボタンテキスト：SUBSCRIBE！
• フォームフィールドの向き：積み重ねられたフォームフィールド
• フォームフィールドコーナースタイル：丸みを帯びたコーナー
• フォームテキストの色：明るいテキスト
• フォームの背景色：クリア
• ボタンの色：＃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;
}

独自のブルームオプトインフォームに従ってコードを変更する

私たちがあなたと共有したコードでは、3つの調整を行う必要があります。 一部のCSSクラスは1つのオプトインフォームにのみ適用されるため、作業しているオプトインフォームを知る必要があります。 あなたがしなければならない唯一のことは、1つの数字を3回変更することです：

上の印刷画面で強調表示されている部分の最後の番号は6です。これは、行の6番目の番号だからです。

したがって、フォームのリスト内での位置に応じて、数を調整する必要があります。

最終結果

ここでオプトインフォームをプレビューすると、すべての変更が行われ、オプトインフォームが次のようになっていることがわかります。

ディスプレイの設定

これで、表示設定に移動し、ブルームオプトインフォームを設定するために必要な変更を加えることができます。 この投稿ではこれらのオプトインフォームのデザイン部分のみを扱うため、詳細については説明しません。

2番目の例の作成を開始します

次に紹介する例は、全画面表示ではなく全幅です。 結果を達成する方法を示すために、前の例と同じオプトインフォームを使用しますが、それにいくつかの小さな変更を加え、異なるCSSコードを追加します。

デザイン設定

組み込みのデザイン設定内で異なる方法で実行する必要があるのは3つだけです。 覚えて; 前の例で作成したオプトインフォームを使用しています。 これから説明する3つのことを除けば、最初の例と同じ組み込み設定が適用されます。 最初に行う必要があるのは、境界線の向きを「境界線なし」にすることです。

下にスクロールして、フォームテキストの色として「ダークテキスト」を選択し、ボタンの色として「＃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の1つで使用されている背景画像を置き換えることです。 以下の印刷画面でマークされている最初のURLはデスクトップに適用され、2番目のURLはタブレットと電話に適用されます。

最終結果

そして、あなたは完了です！ 2番目のオプトインフォームは次のようになります。

最終的な考え

あなたのユーザーが従事する美しいオプトインフォームを作るためにあなたがブルームで持っている可能性は無限大です。 この投稿で作成する方法を示したものは、あなたがどのように創造的になることができるかのほんの一例です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

大きなお知らせ、役立つヒント、Diviの景品を見逃さないように、必ずメールマガジンとYouTubeチャンネルを購読してください。