グーテンベルクのブログ投稿にDiviEmailOptinを追加する方法

Divi Layout Blockは、Divi Builderの強力なデザイン機能をWordPressのデフォルトのブロックエディター（Gutenberg）にもたらす多くの便利な方法への扉を開きます。 これにより、使い慣れたGutenbergブロックインターフェイスを使用してブログ投稿コンテンツの大部分を記述し、カスタムデザインまたは機能が必要な場所にDiviレイアウトを挿入できます。 Divi Layout Blockには、Divi Builder内で構築できるものなら何でも含めることができますが、EmailOptinのようにシンプルで不可欠なものを含めるのにも最適です。

このチュートリアルでは、Divi Layout Blockを使用して、美しいDivi EmailOptinをGutenbergブログ投稿に追加する方法について説明します。

始めましょう！

スニークピーク

レイアウトを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトブロックJSONのインポート

レイアウトをDiviライブラリにアップロード

上記でダウンロードできたJSONファイルをインポートするには、WordPressダッシュボードのバックエンドにあるDiviライブラリに移動し、[インポートとエクスポート]をクリックします。

次に、ダウンロードフォルダー内のJSONファイルを選択し、[DiviBuilderレイアウトのインポート]をクリックします。

グーテンベルクポスト内に新しいDiviブロックブロックを追加

レイアウトがインポートされたら、グーテンベルクの投稿に移動して、新しいDiviレイアウトブロックを追加できます。

保存したレイアウトからJSONファイルをインポートする

次に、[ライブラリからロード]をクリックし、[保存したレイアウト]に移動してレイアウトを選択し、DiviCTAレイアウトブロックをブログ投稿にインポートします。 それでおしまい！

以上です！

チュートリアルに取り掛かりましょう。

グーテンベルクのブログ投稿にDiviEmailOptinを追加する

ブログ投稿を作成または編集する

まず、新しいブログ投稿を作成するか、既存のブログ投稿を編集する必要があります。 この例では、いくつかの見出しブロックと段落ブロックを使用して、投稿のタイトルと本文にモックコンテンツを追加しましょう。 次に、注目の画像を追加し、Diviページ設定の下のページレイアウトに「サイドバーなし」を選択します。

インラインDiviレイアウトブロックを追加

投稿の大部分を作成したら、投稿コンテンツ領域内の任意の場所に新しいDiviレイアウトブロックを追加するだけです。 投稿の内容に明らかに関心のある有資格のリードを獲得するために、投稿の終わり近くに追加することができます。

追加するには、メールオプチンを追加する領域にカーソルを合わせ、青いプラスアイコンをクリックして新しいブロックを追加します。 ポップアップブロックリストで、DiviLayoutブロックを選択します。

Diviレイアウトブロック内に新しいレイアウトを構築する

Divi Layout Blockを選択すると、「BuildNewLayout」または「LoadfromLibrary」のいずれかを選択できます。 メールオプチンを最初から作成する必要があるため、[新しいレイアウトを作成]オプションを選択します。

セクションデザイン

レイアウトブロックエディター内で、投稿に含めるメールオプチンのデザインを開始できます。 このエディターでデザインしたものはすべて、投稿のDivi LayoutBlock領域に表示されます。

開始するには、すでにそこにあるデフォルトセクションのセクション設定を開きます。

背景グラデーション

次に、次のように背景グラデーションを追加します。

• 背景グラデーションの左の色：＃ff9945
• 背景のグラデーションの正しい色：＃f86a4c

仕切り

次に、次のように[デザイン]タブと上部と下部のセクション仕切りに移動します。

• トップディバイダースタイル：スクリーンショットを参照
• トップディバイダーカラー：＃f86a4c
• トップディバイダー水平リピート：0.8x

• ボトムディバイダースタイル：スクリーンショットを参照
• ボトムディバイダーカラー：＃ff9945
• ボトムディバイダー水平リピート：0.8x
• ボトムディバイダーフリップ：水平および垂直

マージンとボーダー

仕切りを配置したら、セクションの上下に少し余裕を持たせ、次のように境界線とアニメーションで仕上げます。

• マージン：上20px、下20px
• 丸みを帯びた角：30px
• ボーダー幅：2px
• ボーダーカラー：＃ff9945
• アニメーションスタイル：フリップ

列の追加と行幅の設定

セクションが完成したので、行に1列の構造を追加します。

次に、次のように行設定を更新します。

• 幅：100％
• 最大幅：100％

メールオプチンを構築する

Eメールオプチンモジュールを追加する

次に、メールオプチンモジュールを行に追加します。

オプトインコンテンツをメールで送信

メールオプチンのコンテンツ設定については、以下を更新してください。

• タイトル：「毎週無料のヒントを入手！」
• 本文：[デフォルトのモックコンテンツを保持]
• Mailchimpリスト：[リストを追加]
• 単一名フィールドを使用：はい
• 背景色を使用：いいえ

メールオプチンデザイン

田畑

[デザイン]タブにジャンプし、以下を更新してメールオプチンフィールドをデザインします。

• レイアウト：右側にボディ、左側にフォーム
• フィールドの背景色：＃f86a4c
• フィールドテキストの色：#ffffff
• フィールドフォント：IBM Plex Sans
• フィールドテキストサイズ：18px
• フィールド文字間隔：2px
• フィールドラインの高さ：2em

題名

タイトルテキストの設定を次のように更新します。

• タイトルフォント：IBM Plex Sans Condensed
• タイトルフォントの太さ：半太字
• タイトルテキストの色：#ffffff
• タイトルテキストサイズ：60px（デスクトップ）、30px（電話）
• タイトル行の高さ：1.2em（デスクトップ）、1.6（電話）

ボタン

ボタンについては、以下を更新します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストの色：＃ff9945
• ボタンの背景のグラデーション左の色：＃ff9945
• ボタンの背景のグラデーションの右の色：#ffffff
• グラデーション方向：90度
• 終了位置：34％
• ボタンの境界線の幅：0px
• ボタンの文字間隔：2px
• ボタンフォント：IBM Plex Sans
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：TT
• ボタンのパディング：上15px、下15px

パディング

最後に、次のパディングを追加します。

• パディング：左5％、右5％

最終結果

Divi Layout Editor内でレイアウトの設計が完了したら、レイアウトを確認して保存します。 次に、投稿を保存して、ライブページでメールオプチンのプレビューを確認できるようにします。 これがどのように見えるかです。

これは、投稿を下にスクロールしたときのメールオプチンのわずかなアニメーションです。

最終的な考え

グーテンベルクの投稿にメールオプチンを追加することは、Divi LayoutBlockで驚くほど簡単になりました。 完全に機能する（そして使いやすい）電子メールオプチンを数秒で追加できるだけでなく、Divi Builderを使用して、カスタムデザイン、ホバーエフェクト、およびアニメーションを追加することもできます。 プラグインを使用せずにこれすべて！

コメントでお返事をお待ちしております。

乾杯！