グーテンベルクのブログ投稿にインラインおよびアニメーションのDiviCTAレイアウトブロックを追加する方法

Webサイトでブログ投稿を作成する方法を合理化する場合、投稿内のどこかに魅力的なCTAを含めたいと思う可能性が高くなります。 現在、Diviの新しいGutenbergレイアウトブロック統合により、Gutenbergブログ投稿内のどこにでも新しいDiviビルドブロックを簡単に追加できます。 これにより、Diviの組み込みオプションを使用してカスタムDivi CTAを構築しながら、ブログ投稿コンテンツ全体をGutenberg環境内に保持できます。 両方の長所！ このチュートリアルでは、インラインでアニメーション化されたDiviCTAレイアウトブロックをグーテンベルクの投稿に追加する方法を紹介します。 Divi CTAレイアウトブロックのJSONファイルも無料で共有します！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

インライン＆アニメーションDiviCTAレイアウトブロックを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

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

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

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

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

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

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

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

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

再作成を始めましょう！

3番目のテーマビルダーパックの投稿テンプレートを使用する

サードテーマビルダーパックをダウンロードする

ゼロから作成を開始する時が来ました！ まず、私たちが再作成しているデザインは、Diviブログでリリースされた3番目のテーマビルダーパックと一致します。 投稿に移動して、このテーマビルダーパックのJSONファイルをダウンロードします。

Diviテーマビルダーに移動します

3番目のテーマビルダーパックをダウンロードしたら、Diviテーマビルダーに移動できます。

投稿テンプレートのアップロード

右上隅のアイコンをクリックして、テーマビルダーパックの投稿テンプレートをアップロードします。

次に、投稿テンプレートを選択し、[Diviテーマビルダーテンプレートのインポート]をクリックします。 テーマビルダーの変更も必ず保存してください。 この時点で、テーマビルダーパックのブログ投稿テンプレートをすべての投稿に割り当てました。

既存のグーテンベルクの投稿を開くか、新しい投稿を作成します

次のステップは、DiviCTAレイアウトブロックをグーテンベルクの投稿に追加することです。 これを行うには、既存の投稿を開くか、新しい投稿を作成します。

新しいインラインDiviブロックを追加

投稿内に入ると、新しいDiviレイアウトブロックを追加できるようになります。

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

次に、2つのオプションがあります。 [新しいレイアウトの作成]オプションを選択します。

セクション設定

間隔

Diviレイアウトブロックエディタに入ると、セクションが表示されます。 そのセクションを開き、いくつかのカスタムマージン値を追加して、セクションコンテナの周囲にスペースを作成します。

• トップマージン：50px
• 下マージン：50px
• 左マージン：-10％
• 右マージン：-10％

行＃1を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、幅と最大幅を増やします。

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

Divider＃1を列に追加します

可視性

Divider Moduleから始めて、モジュールを追加します。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

モジュールの[デザイン]タブに移動し、次のようにライン設定を変更します。

• 線の色：＃fc526e
• 線のスタイル：実線
• ライン位置：上

サイジング

サイズ設定も変更します。

• 仕切りの重量：3px
• 幅：30％
• モジュールの配置：右
• 高さ：3px

アニメーション

それに応じてアニメーション設定を変更します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーション時間：2000ms
• アニメーションの遅延：500ms
• アニメーション強度：100％
• アニメーションの開始不透明度：100％

Divider＃2を列に追加します

可視性

次のディバイダーモジュールに進みます。 ここでも、[仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

次に、モジュールの[デザイン]タブに移動し、次のようにライン設定を変更します。

• 線の色：＃e1e3e8
• 線のスタイル：実線
• ライン位置：上

サイジング

次に、モジュールのサイズ設定を変更します。

• 仕切りの重量：3px
• 高さ：3px

間隔

いくつかのカスタム間隔値も追加します。

• 左マージン：10％
• 右マージン：-20％

アニメーション

そして、次のようにアニメーション設定を変更して、モジュールの設定を完了します。

• アニメーションスタイル：スライド
• アニメーションの方向：左
• アニメーション時間：2000ms
• アニメーションの遅延：500ms
• アニメーション強度：100％
• アニメーションの開始不透明度：100％

Divider＃3を列に追加します

可視性

この行で必要な次の最後のディバイダーモジュールに進みます。 [仕切りを表示]オプションが有効になっていることを確認してください。

• 仕切りを表示：はい

ライン

次に、[デザイン]タブに移動し、次のように線の設定を変更します。

• 線の色：＃fc526e
• 線のスタイル：実線
• ライン位置：上

サイジング

モジュールのサイズも変更します。

• 仕切りの重量：3px
• 高さ：3px

間隔

間隔の設定と一緒に。

• 下マージン：100px
• 左マージン：-20％
• 右マージン：10％

アニメーション

そして、アニメーション設定を変更して、モジュールの設定を完了します。

• アニメーションスタイル：スライド
• アニメーションの方向性：右
• アニメーション時間：2000ms
• アニメーション強度：100％
• アニメーションの開始不透明度：100％

行＃2を追加

カラム構造

次の列構造を使用して、セクションに別の行を追加します。

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：70％
• 行の配置：中央

テキストモジュール＃1を列に追加

H2コンテンツを追加する

次に、選択したH2コンテンツを含む最初のテキストモジュールを行の列に追加します。

H2テキスト設定

[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。

• 見出し2のテキストの色：＃fc526e
• 見出し2テキストサイズ：28px

間隔

次に、いくつかのカスタムパディング値を追加します。

• トップパディング：50px
• ボトムパディング：50px
• 左パディング：50px

国境

左ボーダーも使用しています。

• 左ボーダー幅：2px
• 左の境界線の色：＃fc526e

アニメーション

そして、カスタムアニメーションを追加して、モジュールの設定を完了します。

• アニメーションスタイル：フリップ
• アニメーションの方向性：中央
• アニメーションの遅延：1500ms

テキストモジュール＃2を列に追加

コンテンツを追加する

前のテキストモジュールのすぐ下に、選択したコンテンツを含む別のテキストモジュールを追加します。

間隔

モジュールの[デザイン]タブに移動し、それに応じてパディング値を変更します。

• トップパディング：50px
• ボトムパディング：50px
• 右パディング：50px

国境

次に、右上の境界線を追加します。

• 右上の境界線：2px
• 右上の境界線の色：＃fc526e

アニメーション

そして、次のようにアニメーション設定を変更して、モジュールの設定を完了します。

• アニメーションスタイル：フリップ
• アニメーションの方向性：中央
• アニメーションの遅延：1700ms

ボタンモジュールを列に追加

コピーを追加

この行で必要な次の最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

ボタンの設定

モジュールの[デザイン]タブに移動し、ボタンの設定を次のように変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：13px
• ボタンのテキストの色：#ffffff
• グラデーションカラー1：＃ff5b84
• グラデーションカラー2：＃f94857
• グラデーションタイプ：線形
• 勾配方向：165度
• ボタンの境界線の幅：0px

• ボタンの境界線半径：0px
• ボタンの文字間隔：1px
• ボタンフォント：Montserrat
• ボタンのフォントの太さ：半太字
• ボタンのフォントスタイル：大文字

間隔

次に、カスタムの上部と下部のパディングを追加します。

• トップパディング：16px
• ボトムパディング：16px

アニメーション

そして、次のアニメーションを追加して、モジュールの設定を完了します。

• アニメーションスタイル：フリップ
• アニメーションの遅延：1900ms

行＃1のクローンを作成し、セクションの下部に配置します

1行目と2行目を完了したら、最初の行のクローンを作成して、セクションの下部に複製を配置できます。

仕切りの順序を変更する

最初と最後のディバイダーモジュールの場所を切り替えます。

仕切り＃1の間隔を変更する

次に、行の最初のディバイダーモジュールを開き、間隔の設定を変更します。

• トップマージン：100px
• 左マージン：10％
• 右マージン：-20％

Divider＃2の間隔を変更する

2番目のディバイダーモジュールの間隔設定も変更します。

• 左マージン：-20％
• 右マージン：10％

Divider＃3のサイズを変更する

次に、3番目のディバイダーモジュールを開き、サイズ設定で左側のモジュールの配置を使用します。

• モジュールの配置：左

Divider＃3アニメーション遅延を削除します

3番目のDividerModuleのアニメーション遅延も削除すると、設定が完了します。 Divi CTAレイアウトブロックが完了したら、変更を保存して投稿を更新してください。

• アニメーションの遅延：0ms

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの新しいGutenberg統合を活用し、インラインおよびアニメーション化されたDiviCTAレイアウトブロックをGutenbergブログ投稿に追加する方法を示しました。 これは、訪問者がブログ投稿のコンテンツを読んでいるときに、選択したCTAを強調するための優れた方法です。 Divi CTAレイアウトブロックのJSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください！

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。