Diviの概要とレビューのためのジャーナルブログキット

公開: 2019-05-30

Diviのジャーナルブログキットは、子テーマなどの機能を備えたDiviSoupによるサードパーティのレイアウトです。レイアウト自体はDiviの建物で作成されており、スライダー、カテゴリ、ホバー効果のあるブログフィードが含まれており、エレガントなブログページを作成できます。また、スタイル付きのサイドバーと、子テーマに追加するデフォルトのカスタムブログ投稿デザインも備えています。新しい機能は、インポートするか、単純なコピーアンドペーストで子テーマに追加されます。

ブログキットには、3つの異なるブログとアーカイブページのレイアウトが含まれています。含まれているCSSをテーマオプションまたは子テーマのCSSエディターに貼り付けることで、レイアウトを全幅、グリッド、またはインラインの間で変更できます。アーカイブ、カテゴリ、タグ、作成者、および検索結果のページは、ブログページと同じレイアウトに従います。 FontAwesomeの統合も含まれています。

ブログキットには、すべてのファイルとその使用方法の説明が含まれています。この記事では、Journal Blog Kitをインストールして、使いやすさを確認し、その機能を確認します。

Divi用のジャーナルブログキットのインストール

ダウンロードしたファイルを解凍します。内部には、ブログページレイアウトとカスタマイザー設定用のJSONファイル、read meファイル、CSS、PHP、JS、ウィジェットファイル（これらは子テーマにあるファイルの種類）を含むいくつかのファイルがあります。。

手動で行われるため、指示に従ってファイルをインストールする方法を確認することをお勧めします。幸いなことに、指示はよく書かれており、プロセスは難しくありません。子テーマを使用する必要があります（空白の場合でも）。 PHPファイルを親テーマに追加すると、テーマが更新されたときに上書きされます。

これがレイアウトであり、ファイルを手動でインストールすることの利点は、現在の子テーマで機能することです。これらの新機能を追加するために、子テーマを置き換える必要はありません。

Diviドキュメント用のジャーナルブログキット

ドキュメントへのリンクは、ダウンロードファイルに含まれています。ファイルをクリックすると、ブログキットのサポートページに移動します。このページには、検索機能、インストール手順、カスタマイズ手順、およびサポートへのリンクがあります。カスタマイズ手順は、色、レイアウトの列数、および抜粋の長さを変更する方法を示しています。

インストール手順をクリックして、手順に従います。これには、特定の場所へのコードのコピーと貼り付け、FTPを介したファイルのアップロード、プラグインを介したファイルのインポートが含まれます。各手順について詳しく説明します。手順を完了するには数分かかります。

Diviブログページのジャーナルブログキット

ブログキットには、ブログページのレイアウトがJSONファイルとして含まれています。このレイアウトは、Diviライブラリではなくページ自体にインポートする必要があります。ページ自体は、投稿スライダー、6つの召喚状モジュール、およびブログとサイドバーのある行を使用します。これは、使用するCSSによって表示が異なります。各レイアウトの機能とレイアウトを見てみましょう。

Diviスライダーとカテゴリーのジャーナルブログキット

投稿スライダーは、垂直ドットナビゲーションを左側に配置し、抜粋を右側に表示します。抜粋はテキストを中央に配置し、不透明度を低くしているため、スライダーの注目の画像が透けて見えます。投稿の表示ボタンも含まれています。スライドすると、画像がフェードインし、抜粋が下から上にスライドします。

召喚状モジュールは、特定のカテゴリのアーカイブページへのリンクとして機能します。モジュールにカーソルを合わせると、ボタンの色が白いテキストの黒い背景から黒いテキストの白い背景に変わり、黒い境界線が追加されます。大胆な黄色が大好きです。これは、カテゴリナビゲーションをページに追加するための興味深い方法です。

色は、カスタマイザーのスタイルをインポートすることで得られます。使用する必要がなく、簡単に色を変えることができます。元のカスタマイザースタイルにアクセスしたい場合は、最初にそれをエクスポートする必要があります。

Divi全幅レイアウトのジャーナルブログキット

これが全幅CSSを使用したブログのレイアウトです。注目の画像はホバーでズームします。抜粋の最初の単語にドロップキャップを追加します。カテゴリとドロップキャップは黄色でスタイリングされています。続きを読むボタンは、レイアウトに一致するようにスタイル設定されています。

Diviグリッドレイアウト用のジャーナルブログキット

グリッドレイアウトでは、カテゴリの下に2つの投稿が1行で表示されます。注目画像のズームオンホバー、黄色のカテゴリとドロップキャップ、ボタンのスタイリングなど、全幅レイアウトと同じスタイリングが含まれています。

Diviインラインレイアウト用のジャーナルブログキット

インラインCSSは、左側に画像、右側にテキストを含むブログ投稿を表示します。他のレイアウトのスタイルと機能が含まれています。この例では、リストの下部にスクリーンショットを撮り、スタイル付きの[古いエントリ]ボタンを表示しました。この同じボタンがすべてのレイアウト内に表示されます。

Diviサイドバーのジャーナルブログキット

ウィジェット設定をインポートすると、いくつかのスタイル付きウィジェットを含むサイドバーが作成されます。サイドバーには、タイトル、写真、説明が記載された自己紹介セクションと、検索、カテゴリ、アーカイブ、タグ、最近の投稿のセクションが含まれています。各セクションは、レイアウトに一致するようにスタイル設定されています。タイトルの両側にある黄色い線が好きです。カテゴリとアーカイブはドロップダウンボックスです。タグはスタイル付きリンクです。

Divi個別投稿レイアウト用のジャーナルブログキット

FTP経由で投稿ファイルをテーマのファイルにアップロードすると、DiviビルダーではなくWordPressで作成された個々のブログ投稿にもスタイルが設定され、多くの新機能が追加されます。機能には、カテゴリ、タイトル、日付、コメントの数、投稿の上のタグが含まれます。ポストにはスタイル付きのドロップキャップがあります。

投稿に続いて、スタイル付きの作成者ボックス、投稿ナビゲーション、関連する投稿、およびスタイル付きのコメントボックスがあります。コメントはカスケードされ、返信が別のコメントへの返信であることを示すスタイル付きアイコンが含まれます。個々のセクションには、タイトル付きのスタイル付きの黄色い線が含まれています。

Divi価格のジャーナルブログキット

Diviのジャーナルブログキットは49.00ポンドです。それはあなたがそれを使用するために必要なすべてのファイルと指示を含みます。

Journal Blog Kitは、開発者のWebサイトから購入できます。

Diviのジャーナルブログキット

DiviのJournalBlog Kitは、ブログページと投稿に多くのスタイリング機能を追加します。 Diviビルダーで作成しなくても、ブログ投稿のスタイルを設定できるのが気に入っています。ブログだけに焦点を当てたキットも見てうれしいです。ブログは必ずしも十分な注目を集めるとは限りません。

ファイルは手動でインストールする必要がありますが、特定の種類のファイルがどこにあるかを示し、WordPressの動作に関する情報を提供するため、これは良い演習だと思います。ファイルの追加は、実際には思ったより簡単です。コードを追加するのに問題はありませんでした。

レイアウトの1つの子テーマファイルにCSSを追加してから、そのコードを削除し、他のレイアウトのテーマオプションにCSSを追加しました。どちらも期待どおりに機能しました。 CSS、JS、PHP、およびインポートされたすべてのファイルは、最初の試行で完全に機能しました。元のデザインまたは別のデザインに戻るには、子テーマを変更してCSSを削除するだけです。

レイアウトに子テーマスタイルの機能があるのは興味深いことです。どんな子テーマやレイアウトでも使えるので気に入っています。 Diviにいくつかの新しいブログ機能を追加することに興味がある場合は、Journal BlogKitを確認することを強くお勧めします。

我々はあなたから聞きたい。 Diviのジャーナルブログキットを試しましたか？ 以下のコメントであなたがそれについてどう思うか教えてください。

M.Stasy /shutterstock.com経由の注目の画像