Diviプラグインのハイライト：コンテンツインテンス

公開: 2017-10-08

Divi Builderには、カテゴリに基づいて全幅またはグリッドレイアウトで投稿を表示するブログモジュールが含まれています。ブログのレイアウトをもっと細かく制御したいと思ったことはありませんか？ ContentIntenseと呼ばれるサードパーティのプラグインに興味があるかもしれません。

Content Intenseは、ブログモジュールに新しい外観を与えるために、新しいレイアウトとスタイリング機能を追加するBeSuperflyのプラグインです。これは標準のブログモジュールに基づいているため、使い慣れた機能がすべて含まれています。

（プラグインは開発者のWebサイトから入手できます。）

このプラグインのハイライトでは、機能を見て、ページ上でどのように表示されるかを確認します。 Extraにもロードします（もちろん、Diviとも互換性があります）。

ContentIntenseのインストール

他のプラグインと同じように、コンテンツインテンスをアップロードしてアクティブにします。プラグインがアクティブ化されると、ダッシュボードの[設定]内にContent Intense PluginActivationという新しいメニュー項目が表示されます。これをクリックしてAPIキーとメールアドレスを入力し、変更を保存します。

コンテンツインテンスモジュール

ContentIntenseと呼ばれる新しいモジュールがDiviBuilderに追加されます。

[コンテンツ]タブでは、投稿のみ、ページのみ、またはページと投稿、表示する番号、カテゴリ、オフセット番号を表示できます。注目の画像、メタ（セパレーターを選択できる）、抜粋、ナビゲーション、背景を表示します。ご覧のとおり、設定のオプションの数を大幅に単純化しすぎています。

最もユニークな機能の1つは、WordPressカテゴリがページに追加されることです。ページを表示することを選択した場合、カテゴリを選択するとページが選択されます。

[デザイン]タブでは、5つのレイアウトのいずれかを選択し、オーバーレイを有効にし、ヘッダーテキスト、本文テキスト、およびメタテキストを調整できます。また、境界線、ボタン、間隔、およびアニメーションを調整します。

Advanced thanにはボタン関係機能が含まれているため、リンクのrel属性の値を指定できます。これは、ブックマークの作成、nofollowへのリンクの設定などに最適です。

コンテンツインテンスデフォルト設定

デフォルト設定では、注目の画像が表示され、作成者のGravatarが画像の下部に重なっています。続いて、投稿メタ、タイトル、行、投稿の抜粋、ホバーアニメーション付きの続きを読むボタンが続きます。目立つようにセクションに背景を追加しました。

この例では、メタセパレータにアスタリスクを追加し、抜粋数を270から100に変更し、[続きを読む]ボタンを中央のテキストに置き換えました。日付の代わりに、投稿が公開されたのはどれくらい前かを示します。コメント数を無効にしました。

これは、テキストの背後の背景に色を追加します。また、ボタンを右に移動し、抜粋を150に設定しました。

5つの異なるレイアウトがあります。これまで見てきた例では、アバター付きの3列、垂直レイアウトのAtlasを使用しています。それぞれのレイアウトを見てみましょう。デフォルト設定を使用しています。

これはアルプスです。これは、1列の水平方向の交互レイアウトです。テキストの背景は、セクションで選択した背景色と一致します。これらは、ボタンのホバー効果を備えたフラットカードです。

これは、投稿の注目画像を背景として使用する3列の垂直レイアウトであるヒマラヤです。また、ボタンアニメーションを使用します。このテキストは、調整しないと見づらくなります。これは後でオーバーレイで修正します。

これはロッキー山脈です–ホバー効果のある3列の垂直レイアウト。また、注目の画像を背景として配置します。ホバー効果により、完全な抜粋と続きを読むボタンが表示されます。テキストを読みやすくするために、いくつかの調整を行います。

これはアンデスです–アバター付きの1列の垂直レイアウト。注目の画像のトリミングされたバージョンを使用し、小さな線を使用してメタを分離し、大きな線を使用して投稿を分離します。

ページの下部にナビゲーションボタンが表示されます。それらを無効にするか、独自のテキストを追加できます。それらは他のボタンのスタイリングを採用しているので、あなたがもっと読むボタンをスタイリングするとき、あなたはこれらもスタイリングしました。ボタンの代わりにテキストを使用することもできます。

例–アトラスのあるアルプス

このブログレイアウトは、2つのContentIntenseモジュールを使用して作成しました。 1つ目は、ナビゲーションなしでアルプスのレイアウトを使用します。 2番目のモジュールはAtlasを使用します。オフセットを1に設定したので、最初のモジュールと同じ画像が表示されません。フォントの色をArimo（私のお気に入り）に調整しました。ボタンはグラデーションを使用しています。ホバーすると、単色になり、文字間隔が広がります。ナビゲーションボタンが一致します。

例–アルプス

私は交互のレイアウトに夢中です。変更のないアルプスの外観が大好きなので、少し調整を加えました。赤い境界線と赤いオーバーレイを追加し、ボタンとヘッダーの色を変更しました。また、フォントをDosisに変更し、太字にしました。これは、ホバー時のオーバーレイを示しています。

私は実際に国境がない方が好きです。これはホバーのボタンを示しています。

例–アンデス

この例では、6つの異なるContent Intenseモジュールを使用しています。これらはすべてAndesを使用しており、それぞれが前のモジュールより1つオフセットされています。オーバーレイを使用してセクションに背景を追加しました。ヘッダーフォントはComfortaaです。最後のモジュールはナビゲーションを使用します。ボタンをテキストに変更しました。

通常の単一カラムの設計を見てみましょう。ホバーオーバーレイも追加しました。それ以外はすべてデフォルトです。

例–ヒマラヤ

これは、テキストの後ろにオーバーレイがあるヒマラヤを使用しています。メタを無効にし、テキストを明るい色に変更し、ボタンのスタイルを白に変更し、ボタンのフォントを12ポイントに減らしました。ヘッダーテキストはBitterです。私が含めた唯一のアニメーションは、ボタンホバー用です。これにより、優れたCTAまたはサービスを説明するページへのリンクが作成されます。

例–ロッキー

ロッキーの見た目が大好きです。テキストを表示してボタンを読むホバーアニメーションを備えた素晴らしいシャドウ効果があります。テキストオーバーレイを配置することもできましたが、画像を覆いたくありませんでした。代わりに、テキストをライトに変更しました。また、メタとボタンの色を変更し、セパレーターをダッシュに変更しました。

もちろん、オーバーレイは見栄えがします。黒のオーバーレイを追加し、不透明度を変更して、画像の少しが透けて見えるようにしました。左上隅の日付もオーバーレイを使用します。ボタンをテキストに変更し、右に移動しました。カードの下部にある3つの点と線が好きです。それは視覚的なフレアのタッチを追加する小さなディテールです。

例–追加

Content Intenseは、Extraでうまく機能します。アンデスを使用した場所では、わずかな調整を行うだけで済みました。私の例では、テキスト領域に白い背景を配置しました。白いテキストを使用したので、単に暗いテキストに変更しました。上記の例はロッキーです。唯一の違いは、続きを読むリンクのテキストの色でした。

ダウンロード可能なスタイル

アニメーションはCSSを介して追加できます。開発者のWebサイトには、ホバー時にテキストを移動する上記のアニメーションなど、開発者が作成したいくつかのアニメーションが表示されます。このスタイルや他のスタイルは、JSONファイルでそれらからダウンロードできます。

ライセンスとドキュメント

2つのライセンスから選択します（どちらも再販はできません）。

標準ライセンス：単一のWebサイトで使用します。開発プロジェクト用に1つ、ライブプロジェクト用に1つ含まれています。
無制限ライセンス：個人用とクライアント用の両方の無制限のWebサイトで使用できます。

更新は自動的に行われます。 Content Intenseは、開発者のWebサイトから入手できます。

ドキュメントは開発者のウェブサイトで証明されています。調整を行い、途中でデモを提供します。

最終的な考え

Content Intenseにはいくつかの優れたレイアウト機能があり、将来さらに多くのレイアウトが追加される予定なので、これはほんの始まりにすぎません。各レイアウトは、モジュールの調整でスタイルを設定し、CSSでさらにカスタマイズできます。直感的に使用できます。ブログの外観を変えることに興味がある場合は、ContentIntenseが探しているプラグインである可能性があります。

我々はあなたから聞きたい。 Content Intenseを試しましたか？ 以下のコメントでそれについてのあなたの経験について知らせてください。

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