12素晴らしいDiviブログのレイアウト
公開: 2020-03-02Diviはブログの優れたテーマです。 独自のブログと投稿のレイアウトを作成して、ブログを目立たせるための独自のデザインを作成できます。 もちろん、始めるためのブログのレイアウトはたくさんあります。 この記事では、次のDiviデザインに役立つ12の素晴らしいDiviブログレイアウトを見ていきます。
ブログのレイアウトは、ブログページ、個々の投稿、アーカイブページ、または上記のすべてに焦点を当てることができるため、探しているものを見つけるのに役立つように、レイアウトをセクションに分割しました。 レイアウトは、セクション内で特定の順序ではありません。
ブログレイアウトパック(テーマビルダー)
これらのレイアウトには、テーマビルダーでブログページ、カテゴリページ、アーカイブと検索ページ、および個々のブログ投稿を作成するために使用するすべてのものが含まれています。
1.Diviブログキット

Divi Blog Kitには、ブログ投稿、ブログページ、カテゴリアーカイブ、および検索結果ページ用の6つのレイアウトが含まれています。 ブログページには、1、2、および3列のブログモジュールのレイアウトが含まれています。 ブログページには、サイドバー付きの2つの列があります。 レイアウトには、オフホワイトの背景と赤いタイトル、続きを読むボタン、メタテキストがあります。 サイドバーには、目立つようにベージュの背景が含まれています。 サイドバーのカテゴリは黒いボタンで作成されます。 サイドバーには、サムネイルとニュースレターフォームを含む最近の投稿が表示されます。 レイアウトには、各ページのタイトルが付いた全幅の画像も含まれています。
価格:$ 25 | 詳しくは
2.ブログテンプレート

ブログテンプレートには、ブログページ、カテゴリページ、および個々の投稿ページを作成するための3つのレイアウトが付属しています。 お問い合わせページも付いています。 ブログのレイアウトには、スタイル付きのサイドバーとカスタムフッターが含まれています。 デザインには、レイアウトとサイドバーのセクションタイトル全体に青いハイライトがあります。 ブログページの上部には、最新の投稿、サイドバー付きの注目の投稿、気に入った記事(サムネイル付きの記事が4つ含まれています)、フッターが表示されます。
価格:$ 29 | 詳しくは
ブログページのレイアウト
これらはブログページ自体のレイアウトです。 ヘッダー、フッター、サイドバー、ブログセクションなどが含まれます。
3.旅行ライフスタイルブログキットバンドル

Travel Lifestyle Blog Kit Bundleには、Journal、Nomad、Coastの3つの異なるブログレイアウトキットが含まれています。 各キットには、メインのブログページ、投稿ナビゲーション付きの単一の投稿レイアウトが含まれています。 投稿には、作成者ボックス、関連する投稿、およびタグがあります。 彼らのデザインは、カテゴリーに焦点を当て、スタイル付きのサイドバーを含むブログや雑誌のレイアウトを作成します。 キットには、全幅、インライン、およびグリッドレイアウト用の3つのCSSファイルが含まれています。 その他の機能には、サイドバーとウィジェットのスタイル設定、JS、カスタマイザー設定、ウィジェット設定が含まれます。 スタイリングは、すべてのアーカイブページ、カテゴリページ、および検索ページに拡張されます。 デザインは、含まれているコードを介してすべてのブログページに拡張されるため、テーマビルダーを使用せずにDiviテーマビルダーと同様のことを行います。
価格:£120 | 詳しくは
4.Diviブログページのレイアウト

Diviブログページレイアウトには、ヘッダーの独自のデザインがあります。 ブログのタイトルと下向きのスタイル付き仕切りの背景画像が表示されます。 これと重複するのは、注目の画像とタイトルを含む最新のブログ投稿です。 ホバーするとタイトルが上がります。 次の2つのブログ投稿は、この下に表示され、その後にカスタムフッターが続きます。 フッターには、上向きのスタイル付き仕切りが含まれています。 フッターには明るい灰色の背景が含まれています。
価格:無料| 詳しくは
5.ブログ

ブログには、ブログ用に10種類のレイアウトが用意されています。 レイアウトには、いくつかのデザインの複数のバージョンがあります。 それらには、リスト、グリッド、スライダー、タイムライン、全幅、および石積みのレイアウトが含まれます。 リストには、投稿が1つの列に表示されます。 グリッドには、さまざまなカードスタイルとホバー効果があります。 スライダーには、さまざまなスタイルのナビゲーションとテキストオーバーレイが表示されます。 全幅は、交互のレイアウトで、またはオーバーレイにテキストを含むグリッド内の画像として投稿を表示します。 タイムラインには、投稿が交互のレイアウトまたはスタイル付きリストで表示されます。 ブログの組積造のレイアウトでは、投稿が5行のカードとして表示されます。 ほとんどの場合、ホバー時に緑色のハイライトが含まれます。
価格:$ 20 | 詳しくは
6. Magnewz

Magnewzは、ブログのカテゴリを使用して雑誌のレイアウトを作成します。 赤、黄、青の3色があります。 最新の投稿は、スライダー内のレイアウトの上部に表示されます。 この下には、2つの列が続く一連の画像があります。 左側の列が最も大きく、最新の投稿が表示されます。 右の列は、テキスト、埋め込みビデオ、画像などの他のコンテンツ用です。 ブログ投稿のセクションがこれに続き、その後、連絡フォームと交互のレイアウトで最新の投稿に一致する別のセクションがあります。
価格:49.95ドル| 詳しくは
7.エレガントなブログページ


エレガントなブログページには、CSSとJavaScriptを使用した投稿とサイドバーのカスタムスタイルが含まれています。 ページ上部のスライダーに最新の投稿が表示されます。 注目のカテゴリには、画像と行に重なるタイトルのあるカテゴリが表示されます。 ブログの投稿はこの下に表示され、最新の投稿が1列に表示され、その後に最近の投稿が2列に表示されます。 このセクションには、スタイル付きのサイドバーがあります。 投稿セクションとサイドバーのタイトルには、レイアウトとは一線を画す背景も含まれています。 投稿カテゴリは投稿画像の下に配置され、画像に切り込まれます。 背景は黄褐色で、タイトルの背景は濃い色になっています。
価格:無料| 詳しくは
8.ピクシーブログのレイアウト

Pixie BlogLayoutはPixieBundleの一部であり、個別に入手できます。 オーバーレイに、背景画像付きのスタイル付きヘッダーとスタイル付き境界線付きのタイトルが表示されます。 最新の6つのブログ投稿は、この下の2つの列に配置されています。 それらには、注目の画像、タイトル、カテゴリ、そしてスタイル付きボックス内の下部にあるメタが含まれます。 画像には、スタイル付きの境界線と、ホバーで詳細を読むためのリンクが表示されます。 投稿の下には、全幅のメールフォームがあります。 フッターは、サービス、ページ、およびソーシャルメディアへのリンクを提供します。
価格:無料| 詳しくは
ブログアーカイブのレイアウト
これらのレイアウトはアーカイブページに焦点を合わせています。 検索結果やカテゴリページに最適です。
9.より良いブログページ

Better Blog Pageには、ブログアーカイブ用に15種類のデザインがあります。 いくつかの異なるレイアウトで投稿を表示します。 1つ目は、片側に画像があり、反対側にテキストが交互に配置された単一の列です。 もう1つは、投稿に同じデザインを使用していますが、交互のレイアウトは含まれていません。 この同じデザインは、日付やメタ情報のさまざまなタイプのスタイリング、またはテキストの反対側の画像でも使用されます。 1列に投稿されたデザインがたくさんあります。 いくつかのレイアウトでは、投稿が2列で表示されます。 1つ目は、タイトルと抜粋をオーバーレイで示しています。 2つ目は、投稿をスタイル付きカードとして表示します。
価格:$ 15 | 詳しくは
10.アーカイブ結果

アーカイブ結果は、子テーマに追加できるカスタムarchive.phpファイルとsearch.phpファイル、およびそれらのスタイルを設定するためのコードが付属する無料のレイアウトです。 また、無料のカスタムシングルポストレイアウトと併用して、すべてのアーカイブページで統一されたデザインを作成することもできます。 デザインは、スタイル付きのサイドバーを備えた2列の投稿を示しています。 投稿には、スタイル付きの境界線、メタ、ボタンが含まれます。 このページには、スタイル付きナビゲーションも含まれています。 サイドバーのタイトルは、投稿ボタンに一致するようにスタイル設定されています。 サイドバー内の各投稿には、投稿の境界線に一致するスタイル付きの線が含まれています。
価格:無料| 詳しくは
ブログ投稿のレイアウト
これらは、ブログ投稿自体のレイアウトです。
11.シングルポストレイアウト

単一投稿レイアウトには、コンテンツをさまざまな方法で表示する5つの投稿テンプレートが含まれています。 1つ目は、左側のカテゴリを除いて、注目の画像を表示します。 タイトル、メタ、ソーシャルボタンがこの横にあり、その後にコンテンツが続きます。 2つ目は、注目の画像を全幅で表示し、タイトルとカテゴリをオーバーレイで表示します。 コンテンツはこれと重複しており、著者の情報を含む列が含まれています。 3つ目は、ソーシャルボタンを配置して注目の画像と重ね合わせ、コンテンツを1つの列に表示し、その上に作成者の画像を表示します。 4つ目は、注目の画像のタイトルにスタイリングを追加します。 5つ目は、注目の画像と重なる右側のサイドバーに作成者の情報を追加します。
価格:$ 25 | 詳しくは
12. JoPostのレイアウト

Jo Post Layoutsには、ブログ投稿用の3つの投稿デザインが付属しています。 1つ目は、注目の画像の一部を全幅で表示し、画像の下部でタイトルを重ねています。 そのタイトルとメタは中央に配置されています。 これに続いて、コンテンツ、グラフィック、およびスタイル付きボタンのあるコメントセクションがあります。 2つ目は、片側のスタイル付きボックス内にタイトルを表示し、反対側のそれと重なる注目の画像を表示します。 これに続いて、コンテンツとスタイル付きコメントセクションがあります。 3番目のレイアウトでは、タイトルを2色の背景の上に配置し、その後に引用符、コンテンツとコメントのセクションを配置します。
価格:$ 8 | 詳しくは
終わりの考え
これが、12の素晴らしいDiviブログレイアウトの見方です。 彼らは見栄えが良く、どんなブログにも多くのスタイルを追加します。 ブログ、アーカイブ、投稿のレイアウトの多くは、テーマビルダーでも使用できます。
さらに多くのブログレイアウトについては、DiviBuilderで利用できるElegantThemesの無料レイアウトを確認してください。 それらのほとんどすべてにブログページが含まれています。 テーマビルダーパックを検索すると、ETブログのエレガントなテーマからテーマビルダーのページをさらに見つけることができます。
我々はあなたから聞きたい。 これらの素晴らしいDiviブログレイアウトのいずれかを試しましたか? コメントでそれらについてどう思うか教えてください。
asch_asch /shutterstock.com経由の注目の画像
