Diviプラグインのハイライト–Diviブログエクストラ

Diviには、投稿を全幅またはグリッドレイアウトで表示するためのブログモジュールが含まれています。 それは素晴らしいモジュールであり、仕事を成し遂げます。 異なるレイアウトと機能が必要な場合はどうなりますか？ これはCSSで実行できますが、Divi BlogExtrasと呼ばれるサードパーティのプラグインを使用するとタスクがはるかに簡単になります。

Divi Blog Extrasは、Divi Extendedのサードパーティプラグインであり、ブログ投稿を表示するためのいくつかの新機能を備えた新しいモジュールをDiviBuilderに追加します。 6つの異なるレイアウトデザインが含まれ、さらにロードボタンを備えたAJAXロード機能が追加されています。 スクロールすると投稿が読み込まれ、読み込みが高速になります。 [続きを読む]ボタンと[さらに読み込む]ボタンの両方のテキストを変更できます。

このプラグインのハイライトでは、Divi Blog Extrasを見て、このプラグインで何ができるかについていくつかのアイデアを取得します。 これらの例の画像は、Unsplash.comから取得したものです。

Divi BlogExtrasのインストールと設定

通常どおりアップロードしてアクティブ化します。 その後、Divi BlogExtrasと呼ばれる新しいモジュールがDiviBuilderで利用できるようになります。 使用するには、他のモジュールと同じように、行にドロップするだけです。 オプションは標準のDiviBuilderモジュールと同じであるため、このモジュールの使用は直感的です。

コンテンツ設定にはおなじみのオプションが含まれており、6つのレイアウトの選択肢、抜粋の長さ、カテゴリの色、ボタンテキストの読み込み、注目の画像オーバーレイ、ボタンテキストの詳細、テキストの色のオプションがあります。 デザイン設定には、ヘッダー、メタ、本文のテキスト、および境界線のスタイルが含まれます。 ブロック拡張レイアウトは画像の位置を追加し、クラシックはソーシャルアイコンを追加します。 それぞれのレイアウトを詳しく見ていきましょう。

グリッド拡張

デフォルトのレイアウトであるGridExtendedは、画像とテキストが交互に表示されるブログ投稿を表示します。 ホバーすると画像が明るくなります。 カテゴリ名はボックス内に配置されます。 レスポンシブモードでは、画像が一番上に配置されます。

この例では、ホバーオーバーレイ、ホバーアイコンを追加し、続きを読むテキストを変更し、抜粋を100文字に制限し、カテゴリテキストと背景色を変更しました。 投稿のいずれかの部分にカーソルを合わせると、ホバーアニメーションが表示されます。

ボックス拡張

Box Extendedは、画像と重なるボックスに抜粋を配置し、カテゴリ名の周りのボックスを削除します。 作者の画像がメタセクションに追加されます。 画像とテキストが交互に表示されます。 これは、よりエレガントなブログレイアウトの1つです。

この例では、カテゴリのフォントと背景色を変更し、抜粋の長さを150文字に制限し、フォントを青に変更し、続きを読むボタンのテキストを変更しました。 デフォルトのホバーは、上の上の画像に見られるように画像を明るくします。

全幅

全幅では、画像が左側に配置され、抜粋が右側に配置され、左端にスタイル付きの日付が追加されます。 各投稿は線で区切られます。 カテゴリ名はメタ内に配置されます。

この例では、日付とメタ情報を無効にします。 テキストはカスタムカラーを使用しています。 続きを読み、ボタンのテキストをさらに読み込むように変更しました。 抜粋は200文字に制限されています。

すべてのレイアウトはレスポンシブです。 これがFullWidthのレスポンシブな外観です。 これは、2つのモジュールを2列の行に並べて示しています。

ブロック拡張

Block Extendedは、カードの下部にある画像とメタにカテゴリ名を追加するブロググリッドです。 カードの任意の部分にカーソルを合わせると、画像がズームします。 カードがクリック可能であることを示しているので、このタイプのマイクロインタラクションが好きです。

Block Extendedには、画像を表示するための3つのオプションがあります。 この例では、注目の画像を背景に配置し、テキストをオーバーレイに配置します。

この例では、最初の2つの選択肢の間で背景画像を交互に表示します。

全幅の背景

全幅背景は、画像のトリミングされたバージョンを全幅で表示し、メタ付きの抜粋を画像のオーバーレイに配置します。 抜粋の配置は交互になります。 メタは抜粋から線で区切られています。

この例では、画像の上に暗いオーバーレイを使用して、抜粋のオーバーレイがホバー時に同じオーバーレイを使用していないことを示しています。 この例では、セクションの背景は赤です。 ホバーすると赤い部分が透けて見えることに注意してください。 また、独自の続きを読むボタンのテキストと2ピクセルの境界線を追加しました。

クラシック

クラシックレイアウトでは、ブログの投稿がフルサイズの画像と画像の下に全幅の抜粋で表示されます。 カテゴリと日付はタイトルの上にあります。 タイトルには、画像と区別するための短い行区切り文字が含まれています。 抜粋の下には、著者の名前とコメントの数がバーで区切られています。 細くて幅の広い行区切り文字は、ポストを互いに分離します。

このレイアウトには、ソーシャルアイコンを表示するオプションがあります。 [もっと読み込む]をクリックすると（またはラベルを付けたとおり– [その他の記事を参照]）、次の投稿のセットが表示されます。これは、表示するために選択した投稿の数と同じです。 この例では、2つの投稿を表示しています。 Load Moreは、次の2つの投稿をロードします。

Divi BlogExtrasを使用して独自のレイアウトを作成する

複数のモジュールを一緒に使用して、マガジンのレイアウトを作成できます。 この単純なレイアウトには、GirdExtendedレイアウトを表示する4つのモジュールが含まれています。 各モジュールは異なるカテゴリを表示します。 真ん中の2つは、それぞれ2つの投稿を表示します。

これにより、さまざまなセクションにさまざまなカテゴリの雑誌レイアウトが作成されます。 この例は、拡張グリッドがどのようにレスポンシブに見えるかを示しています。

これはDiviBuilderのレイアウトと同じですが、全幅の背景を使用します。 レスポンシブモードの場合、オーバーレイは画像をほぼ完全にカバーします。

この例では、一番上のモジュールにクラシックレイアウトを使用し、次の2つのモジュールにグリッド拡張を使用します。 各モジュールは異なるカテゴリを表示し、カテゴリテキストに独自のスタイルを持っています。 一番上のモジュールは抜粋を表示しません。

これにより、興味深い雑誌のレイアウトが作成されます。 また、全幅を表示するように行を設定しました。 レイアウトを組み合わせて、ユニークなデザインを得ることができます。 モジュールごとに異なるカテゴリのレイアウトを作成しました。 将来のアップデートでは、モジュールにオフセット機能が追加されるため、同じカテゴリ内で複数のモジュールを使用できるようになります。

ライセンス

1つのサイトは15ドルです。 延長ライセンスは30ドルで、あなたとあなたのクライアントのために無制限のサイトで使用することができます。 生涯更新が含まれます。

このプラグインはExtraでは機能しません。

• このプラグインは、DiviExtendedのWebサイトで購入できます。

最終的な考え

Divi Blog Extrasは、ブログモジュールにちょっとした魅力を与えるために、いくつかの優れたスタイリングとデザイン機能を追加します。 また、カテゴリの背景とテキストのスタイルを設定する機能も追加されます。 ロードにAJAXを使用し、新しいロードボタンが含まれています。 独自のテキストをロードに追加したり、ボタンを読んだりすることもできます。 これらの各デザインは、標準のブログとは異なる外観をブログに与えるのに最適です。 標準のDiviBuilderブログモジュールを超えるブログデザインが必要な場合は、Divi BlogExtrasがお探しのモジュールである可能性があります。

我々はあなたから聞きたい。 Divi Blog Extrasを試しましたか？ 以下のコメントであなたの経験について教えてください。

pulsar011 / shutterstock.com経由の注目の画像