グーテンベルクの投稿にサマリーボックスDiviレイアウトブロックを含める方法
公開: 2020-02-11貴重なブログ投稿を作成するには、時間と労力がかかります。 あなたのニッチで書くのに最適なトピックを見つけることに加えて、読者を引き付け続け、彼らが探している情報を素早く見つけられるようにすることも重要です。 さて、この種のユーザーエクスペリエンスにアプローチする良い方法は、ブログ投稿の最後、最終的な考えの直前にある視覚的な要約ボックスを共有することです。 Diviの新しいレイアウトブロックを使用すると、Diviの組み込みオプションを使用してサマリーボックスを簡単に作成できるようになりました。 このチュートリアルでは、プロセスをガイドし、レイアウトのJSONファイルを無料でダウンロードすることもできます。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
サマリーボックスDiviレイアウトブロックを無料でダウンロード
無料のヒーローサマリーボックスDiviレイアウトブロックを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトブロックJSONのインポート
レイアウトをDiviライブラリにアップロード
上記でダウンロードできたJSONファイルをインポートするには、WordPressダッシュボードのバックエンドにあるDiviライブラリに移動し、[インポートとエクスポート]をクリックします。
次に、ダウンロードフォルダー内のJSONファイルを選択し、[DiviBuilderレイアウトのインポート]をクリックします。
グーテンベルクポスト内に新しいDiviブロックブロックを追加
レイアウトがインポートされたら、グーテンベルクの投稿に移動して、新しいDiviレイアウトブロックを追加できます。
保存したレイアウトからJSONファイルをインポートする
次に、[ライブラリから読み込む]をクリックし、[保存したレイアウト]に移動して、レイアウトを選択し、概要ボックスをブログ投稿にインポートします。 それでおしまい！
再作成を始めましょう！
6番目のテーマビルダーパックの投稿テンプレートを使用する
Sixth Theme BuilderPackをダウンロードする
このチュートリアル全体で再作成する要約ボックスは、6番目の無料のテーマビルダーパックの投稿テンプレートと完全に一致します。 ブログ投稿に移動して、パック全体をダウンロードします。
Diviテーマビルダーに移動します
次に、Diviテーマビルダーに移動します。
投稿テンプレートのアップロード
右上隅のアイコンをクリックして、テーマビルダーパックの投稿テンプレートをアップロードします。 後ですべてのテーマビルダーの変更を変更してください。
既存のグーテンベルクの投稿を開くか、新しい投稿を作成します
一致する投稿テンプレートを追加したら、概要ボックスを作成します。 グーテンベルクを使用して新しい投稿を開くか作成します。
要約H2タイトルを追加
ブログ投稿の終わり近くに、新しいH2タイトルを追加します。
新しいインラインDiviブロックを追加
次に、新しいDiviレイアウトブロックを追加します。
Diviブロック内に新しいレイアウトを構築する
ブロックを追加すると、2つのオプションが表示されます。 新しいレイアウトを作成することを選択します。
セクション設定
背景色
Diviレイアウトブロックエディタ内に、セクションがあります。 そのセクションを開き、白い背景を使用します。
- 背景色：#FFFFFF
間隔
セクションの[デザイン]タブに移動し、カスタムの余白とパディングの値を追加します。
- トップマージン：100px
- 左マージン：-10％（デスクトップ）、0％（タブレットと電話）
- 右マージン：-10％（デスクトップ）、0％（タブレットと電話）
- トップパディング：0px
- ボトムパディング：0px
国境
境界線の半径も追加します。
- 左下：16px
- 右下：16px
ボックスシャドウ
微妙なボックスシャドウと一緒に。
- ボックスシャドウブラー強度：60px
- ボックスシャドウスプレッド強度：10px
- 影の色：rgba（0,0,0,0.08）
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、行がセクションコンテナの幅全体を占めるようにします。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
間隔
次に、行のデフォルトの上下のパディングを削除します。
- トップパディング：0px
- ボトムパディング：0px
列1の設定
背景色
次に、列1の設定を開き、白い背景色を使用します。
- 背景色：#FFFFFF
間隔
いくつかのカスタムパディング値も追加します。
- トップパディング：70px
- ボトムパディング：70px
- 左パディング：70px
- 右パディング：70px
ボックスシャドウ
続けて、デフォルトとホバーシャドウの色が異なる微妙なボックスシャドウを追加します。
- ボックスシャドウブラー強度：50px
- デフォルトのシャドウカラー：rgba（0,0,0,0）
- ホバーシャドウカラー：rgba（0,0,0,0.15）
ホバー変換スケール
ホバー時に、列も少し拡大縮小します。
- 右：105％
- 下：105％
ホバーZインデックス
ホバーzインデックスを追加して、列の設定を完了します。
- ホバーZインデックス：11
テキストモジュール＃1を列に追加
コンテンツボックスに番号を追加
最初のテキストモジュールから始めて、モジュールを追加します。 コンテンツボックスに番号を追加します。
グラデーションの背景
次に、グラデーションの背景を追加します。
- 色1：＃ff5e92
- 色2：＃ffd4b6
- 勾配方向：165度
テキスト設定
モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：ポピンズ
- テキストの色：#ffffff
- テキストサイズ：26px
- テキストの配置：中央
サイジング
次に幅と高さを割り当てます。
- 幅：150px
- 高さ：150px
国境
境界線の半径も追加します。
- 左下、右上、右下：100px
主な要素CSS
コンテナ内のテキストを中央に配置するには、[詳細設定]タブのモジュールのメイン要素にCSSコードを数行追加する必要があります。
display: flex; align-items: center; justify-content: center;
ポジション
そして、モジュールを再配置してモジュール設定を完了します。
- 位置：絶対
- 場所：左上
テキストモジュール＃2を列に追加
H3コンテンツを追加する
次のテキストモジュールに進みます。 お好みのH3コンテンツを追加します。
H3テキスト設定
次に、モジュールのH3テキストサイズを変更します。
- 見出し3テキストサイズ：23px
間隔
間隔の設定も変更します。
- トップマージン：100px
- 下マージン：20px
Dividerモジュールを列に追加
可視性
次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
回線設定
モジュールの[デザイン]タブに移動し、次のようにライン設定を変更します。
- 線の色：＃ff5e92
- 線のスタイル：実線
- ライン位置：上
サイジング
モジュールのサイズも変更します。
- 仕切りの重量：2px
- 幅：20％
テキストモジュール＃3を列に追加
コンテンツを追加する
次の最後のテキストモジュールに進みます。 お好みのコンテンツを追加してください。
クローンカラム
列とそのすべてのモジュールを完了したら、列全体のクローンを作成できます。
デフォルトのボックスシャドウカラーを変更する
列2の設定を開き、デフォルトの影の色を変更します。
- 影の色：rgba（0,0,0,0.06）
テキストモジュール＃1のグラデーションの背景を変更する
次に列2の最初のテキストモジュールを開き、グラデーションの背景を変更します。
- 色1：＃7e5ce6
- 色2：＃25b8ee
テキストモジュール＃1の境界線を変更する
モジュールの境界設定も変更します。
- 左上、左下、右下：100px
テキストモジュール＃1の位置を変更する
そして、[詳細設定]タブでモジュールを再配置します。
- Loaction：右上
仕切りの色を変更する
DividerModule設定を開いて続行します。 新しいカラーパレットと一致するように線の色を変更します。
- 線の色：＃7e5ce6
すべてのコンテンツを変更する
最後になりましたが、列2のすべてのモジュールコンテンツを変更してください。
セクション全体を2回クローンする
最初のセクション全体を完了したら、2回クローンを作成できます。
最初の重複セクションの間隔を変更する
最初の重複セクションの設定を開き、それに応じてマージン値を変更します。
- 左マージン：-5％（デスクトップ）、0％（タブレットと電話）
- 右マージン：-5％（デスクトップ）、0％（タブレットと電話）
2番目の重複セクションの間隔を変更する
2番目の複製も開き、すべてのマージン値を削除して、代わりに下部マージンを追加します。
- 下マージン：100px
すべてのコンテンツを変更する
最後になりましたが、すべてのモジュールコンテンツを変更してください。
レイアウトをDiviライブラリに保存して再利用します
この要約ボックスを他のブログ投稿内で使用することを計画している場合は、簡単にアクセスできるように、必ずDiviライブラリに保存してください。 それでおしまい！
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの新しいレイアウトブロックを使用して、グーテンベルクの投稿に要約ボックスを追加する方法を示しました。 要約ボックスは、訪問者が探している情報を見つけるのに役立つ優れた視覚的な方法です。 レイアウトのJSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。