Diviプラグインのハイライト–Diviカスタムブログモジュール

公開: 2017-05-29

Diviのブログモジュールでは、あらゆる種類のカスタマイズが可能です。レイアウト、フォントスタイル、境界線、オーバーレイ、コンテンツなどの標準的な調整の他に、CSSを使用してさらに調整することができます。独自にコーディングせずに外観を変更していくつかの機能を追加したい場合はどうなりますか？ Diviカスタムブログモジュールと呼ばれるサードパーティのプラグインが必要な場合があります。

Diviカスタムブログモジュール（現在はDTSブログモジュールプロと呼ばれています）は、ソーシャルメディアタグ、メタおよびカテゴリの背景色など、新しいスタイルと機能を提供する新しいモジュールをDiviBuilderに追加します。全幅レイアウトとグリッドレイアウトの両方で機能します。独自のCSSを追加して、さらにカスタマイズします。 12の新しいカスタマイザーオプションが追加されているため、リアルタイムで色を調整できます。また、サイドバーに配置する3つの新しいウィジェットも含まれています。

この記事では、Diviカスタムブログモジュールプラグインを見て、何ができるかを確認します。いくつかのサンプルブログ投稿を作成したので、それがどのように機能するかを確認できます。ブログ投稿の画像はUnsplash.comからのものです。

インストールと設定

他のプレミアムプラグインと同じように、プラグインをアップロードしてアクティブ化します。有効にすると、ダッシュボードにDiviカスタムモジュールと呼ばれる新しいメニュー項目が表示されます。

このメニューでは、ブログスニペットに追加できる追加のアイテムを選択できます。

DCMオプションを使用すると、ブログスニペットに表示されるソーシャルメディアと電子メールアイコンを有効または無効にできます。

DCMオプション–カスタムメタを使用すると、作成者、日付、コメントのカスタムメタフィールドを有効または無効にできます。

これらのオプションをすべて例に含めました。

ブログレイアウトの作成

サンプルのブログ投稿を表示するページを作成し、モジュールを配置しました。元のDiviモジュール（単にBlogと呼ばれる）とCustom –Blogと呼ばれる新しいモジュールの2つのブログモジュールがあることに注意してください。 [カスタム]-[ブログ]を選択します。

レイアウト、投稿番号、カテゴリ、メタ、ページネーション、オフセット、注目の画像、画像オーバーレイ、フォントスタイル、境界線、アイコンなど、これまでに使用したすべてのブログ機能がここにあります。ブログのレイアウトと同じレベルの制御を備えた標準のDiviブログモジュールと同じように設計します。

追加された機能を確認するために、最初に標準のブログモジュールを表示します。グリッドレイアウトを選択し、その他はすべてデフォルトのままにしました。注目の画像、著者名、日付、カテゴリ、コメント数、記事の抜粋が含まれています。それはきれいで、見栄えがします。

これは、同じ設定でDiviカスタムブログモジュールを使用したブログレイアウトです。カテゴリ名を左上隅に移動し、投稿名を中央に配置して色付きのボックス内に配置し、ダッシュボードメニューで選択したソーシャル共有ボタンを追加し、投稿スニペットの下にメタ情報を移動します。

これが拡大図です。ソーシャルアイコンにカーソルを合わせると、アイコンの色と背景色が入れ替わります。そのため、アイコンは白になり、背景色はソーシャルネットワークのブランド色になります。この例では、Google +アイコンにカーソルを合わせています。ボタンをクリックすると、記事を共有できるソーシャルネットワークに移動します（他のソーシャル共有ボタンと同じように）。

これは、最新の投稿を表示するだけの通常のホームページ（Divi Builderを使用しない）です。背景に画像、標準のWordPress投稿、サイドバーに通常のWordPressウィジェットを備えた垂直ナビゲーションを使用しています。比較のためにこれを見せたかったのです。

これは、Diviカスタムモジュールがアクティブな通常のWordPress投稿レイアウトを示しています。このページはDiviBuilderで作成されていませんが、Diviカスタムブログモジュールを使用して、同じ追加コンテンツをすべて含む全幅レイアウトで投稿を表示します。

投稿は、左側の画像、スタイル付きの背景のないタイトル、ソーシャルフォローボタン、スニペットとともに垂直に積み重ねられます。モジュールを使用するのと同じように、カテゴリは左上隅にあり、メタ情報は下部にあります。

3つの新しいウィジェット

プラグインはまた、3つの新しいウィジェットを追加します。

DCM-概要–名前、タイトル、位置、画像、説明、およびソーシャルネットワーク。

Divichildの最新の投稿–タイトル、投稿数、カテゴリ。

Divichildの人気のある投稿–タイトル、投稿数、カテゴリ。

Diviカスタムブログモジュールと同様に、ウィジェットはテーマカスタマイザーでスタイルを設定できます。

標準のWordPressホームページに配置されたときのウィジェットを見てみましょう。ウィジェットはモジュールの色で囲まれています。 Aboutウィジェットは、グリッド内で表示した場合、モジュールと同様のレイアウトデザインを使用します。

テーマカスタマイザー

もちろん、フォントや色は心ゆくまで変更でき、標準のブログモジュールと同じようにアイコン付きのオーバーレイを追加できます。テーマカスタマイザーを使用して、さらに多くのカスタマイズを行うことができます。

Diviカスタムブログレイアウトと呼ばれる新しいカスタマイズがテーマカスタマイザーに追加されます。ここでは、モジュールとウィジェットのタグ、背景、フォント、アイコン、リンクの色を調整できます。ウィジェットは個別に調整することも、すべて一緒に調整することもできます。

この例では、背景、アイコン、フォントの色を調整しました。すべての調整をリアルタイムで確認できます。

テーマカスタマイザーで行ったすべての調整を含むブログモジュールを全幅で見てみましょう。これは全幅レイアウトを使用しています。調整には、カテゴリタグの色、メタモジュールの背景とフォントの色、投稿のタイトルの背景、ウィジェットの背景とソーシャルアイコンの色、およびすべてのウィジェットのタイトルの色が含まれます。

これはグリッドレイアウトを使用しています。どちらのブログカードスタイルも見栄えがします。

ライセンス

ライセンスにより、プラグインを無制限のWebサイトで、あなたとあなたのクライアントが好きなだけ使用できるようになります。 Diviカスタムブログモジュールは非常に使いやすく、ドキュメントは必要ありません。 DiviモジュールとThemeCustomizerを使用できる場合は、このサードパーティのプラグインを使用できます。

これはプレミアムプラグインです。購入するには、次のリンクをたどってください：Diviカスタムブログモジュール

最終的な考え

追加の要素はすべて、投稿スニペットに新しい外観を与えますが、それは視覚的なものだけではありません。追加は実際に便利です。もちろん、色やフォントを調整して、ブランドやトピックに完全に合わせることができます。

私は特に、各投稿に追加されたソーシャル共有ボタンと、ソーシャルフォローボタンを備えたAboutウィジェットが好きです。最新の投稿ウィジェットと人気のある投稿ウィジェットはさらにフレアを追加し、スタイルを一致させたり、個別にスタイルを設定したりできるようにします。

Diviカスタムブログモジュールはシンプルですが、モジュールとウィジェットの間にかなりのカスタマイズを追加して、ブログの見栄えを良くします。ブログページやサイドバーにいくつかの新機能を追加したい場合は、このプラグインを一見の価値があります。

ご連絡をお待ちしております！ Diviカスタムブログモジュールを試しましたか？ コメントであなたの経験について教えてください。

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