グーテンベルクの投稿全体にDiviが作成したハイライトされた引用を追加する方法
公開: 2020-02-14ブログ投稿を書くとき、誰かを引用したり、通常の段落で使用されている文を強調したりしたいと思うことがよくあります。 これで、グーテンベルクエディター内で、すぐに見積もりブロックを追加できますが、それは潜在的に必要なほどの設計の自由度を提供しません。 Diviのレイアウトブロックを使えば、それはもう問題ではありません。 他の場所でグーテンベルク環境を維持しながら、Diviを使用して特定のブロックを簡単に構築できます。 このチュートリアルでは、Diviを使用してブログ投稿にインラインで強調表示された引用符を追加する方法を示します。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
例1
デスクトップ
モバイル
例2
デスクトップ
モバイル
Diviが作成したハイライトされた見積もりレイアウトを無料でダウンロード
Diviが作成した無料のハイライトされた見積もりレイアウトを手に入れるには、まず下のボタンを使用してそれらをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
https://youtu.be/zScpa4-I7-8
私たちのYoutubeチャンネルを購読する
レイアウトブロックJSONのインポート
レイアウトをDiviライブラリにアップロード
上記でダウンロードできたJSONファイルをインポートするには、WordPressダッシュボードのバックエンドにあるDiviライブラリに移動し、[インポートとエクスポート]をクリックします。
次に、ダウンロードフォルダー内のJSONファイルを選択し、[DiviBuilderレイアウトのインポート]をクリックします。
グーテンベルクポスト内に新しいDiviブロックブロックを追加
レイアウトがインポートされたら、グーテンベルクの投稿に移動して、新しいDiviレイアウトブロックを追加できます。
保存したレイアウトからJSONファイルをインポートする
次に、[ライブラリから読み込む]をクリックし、[保存したレイアウト]に移動してレイアウトを選択し、強調表示された見積もりレイアウトをブログ投稿にインポートします。 それでおしまい！
一般的な手順
シンプルでUXに優しいブログ投稿テンプレートを使用する
テンプレートをダウンロード
このチュートリアルのスタイルを定義するために、前の投稿の投稿テンプレートを使用します。 その投稿に移動し、テンプレートをダウンロードします。
Diviテーマビルダーに移動します
次に、Diviテーマビルダーに移動します。
投稿テンプレートのアップロード
右上隅のアイコンをクリックし、[インポート]タブに移動して、このチュートリアルの最初のステップでダウンロードした投稿テンプレートをインポートします。
既存のグーテンベルクの投稿を開くか、新しい投稿を作成します
投稿テンプレートを設定したら、新しいグーテンベルクの投稿を作成するか、既存の投稿を開くことができます。
新しいインラインDiviブロックを追加
投稿内のどこかに新しいDiviブロックを追加します。
Diviブロック内に新しいレイアウトを構築する
ブロックを追加すると、2つのオプションが表示されます。 「BuildNewLayout」と書かれているものを選択してください。
例1を再作成する
セクション設定
間隔
Diviレイアウトブロックエディタに入ると、セクションが表示されます。 最初のサンプルデザインを再作成するには、セクション設定を開き、それに応じてマージン値を変更します。
- トップマージン：50px
- 下マージン：50px
- 左マージン：-5％
- 右マージン：-5％
国境
次のセクションに左の境界線を追加します。
- 左ボーダー幅：2px
- 左ボーダーの色：＃000000
アニメーション
そして、次のアニメーション設定を使用します。
- アニメーションスタイル：スライド
- アニメーションの方向：下
- アニメーション時間：1500ms
- アニメーション強度：200％
- アニメーションの開始不透明度：100％
- アニメーション速度曲線：イーズインアウト
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
行設定を開き、それに応じてサイズ設定を変更します。
- 幅：90％
- 最大幅：100％
アニメーション
次のようにアニメーション設定を変更して、行設定を完了します。
- アニメーションスタイル：フェード
- アニメーションの遅延：1500ms
- アニメーション速度曲線：イーズインアウト
列にテキストモジュールを追加
H3コンテンツを挿入
必要なモジュールはテキストモジュールだけです。 H3で強調表示された引用コンテンツを挿入します。
H3テキスト設定
次のようにH3テキスト設定を変更して、モジュール設定を完了します。
- H3フォントスタイル：斜体
- H3テキストサイズ：2.1rem（デスクトップ）、1.5rem（タブレット）、1.3rem（電話）
- H3ラインの高さ：1.5em
例2を再作成する
セクション設定
間隔
代わりに、2番目の設計例を再作成しますか？ セクション設定を開き、間隔の値を次のように変更します。
- トップマージン：50px
- 下マージン：50px
- 左マージン：-5％
- 右マージン：-5％
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次に、次の列構造を使用して新しい行を追加します。
サイジング
モジュールをまだ追加せずに、行設定を開き、行がセクションコンテナの幅全体を占めるようにします。
- 幅：100％
- 最大幅：100％
テキストモジュール＃1を列に追加
コンテンツを追加する
最初のテキストモジュールから始めて、モジュールを追加します。 コンテンツボックスに見積もりを追加します。
テキスト設定
[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：プレイフェアディスプレイ
- テキストの色：#eaeaea
- テキストサイズ：500px
- テキスト行の高さ：0em
間隔
トップマージンも追加しています。
- トップマージン：150px
アニメーション
次に、アニメーションの設定を変更します。
- アニメーションスタイル：フリップ
- アニメーションの方向性：中央
- アニメーションの遅延：500ms
- アニメーション強度：200％
- アニメーション速度曲線：イーズインアウト
ポジション
位置設定も変更して、見積もりが行コンテナの左上隅に配置されるようにします。
- 位置：絶対
- 場所：左上
テキストモジュール＃2を列に追加
H3コンテンツを追加する
次のテキストモジュールに進みます。 H3で強調表示された見積もりコンテンツをコンテンツボックスに追加します。
H3テキスト設定
モジュールの[デザイン]タブに移動し、H3テキスト設定を次のように変更します。
- 見出し3フォントスタイル：斜体
- 見出し3テキストサイズ：2.6rem（デスクトップ）、1.7rem（タブレット）、1.3rem（電話）
- 見出し3行の高さ：1.4em
間隔
さまざまな画面サイズにまたがるカスタムマージン値も追加します。
- トップマージン：150px
- 下マージン：150px
- 左マージン：150px（デスクトップ）、70px（タブレット）、30px（電話）
- 右マージン：150px（デスクトップ）、70px（タブレット）、30px（電話）
アニメーション
そして、次のようにアニメーション設定を変更して、モジュール設定を完了します。
- アニメーションスタイル：フェード
- アニメーションの遅延：2000ms
- アニメーション速度曲線：イーズインアウト
テキストモジュール＃3を列に追加
コンテンツを追加する
次の最後のモジュール、つまり別のテキストモジュールに進みます。 コンテンツボックスに引用記号を追加します。
テキスト設定
モジュールの[デザイン]タブに移動し、テキスト設定を変更します。
- テキストフォント：プレイフェアディスプレイ
- テキストの色：#eaeaea
- テキストサイズ：500px
- テキスト行の高さ：0em
- テキストの配置：右
アニメーション
次に、次のアニメーション設定を使用します。
- アニメーションスタイル：フリップ
- アニメーションの方向性：中央
- アニメーションの遅延：1000ms
- アニメーション強度：200％
- アニメーション速度曲線：イーズインアウト
ポジション
そして、見積もりが行コンテナの右下隅に配置されていることを確認してください。
- 位置：絶対
- 場所：右下
見積もりレイアウトをDiviライブラリに保存して再利用します
選択した見積もりレイアウトが完成したら、Diviライブラリに保存して、今後の投稿にも使用できるようにしてください。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
例1
デスクトップ
モバイル
例2
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのレイアウトブロックを使ってクリエイティブになる方法を紹介しました。 具体的には、グーテンベルクのブログ投稿全体にアニメーションで強調表示された引用を追加する方法を示しました。 デザインの可能性は無限大ですが、始めることができる2つの例を提供しました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。