カスタムElementorブログ投稿テンプレートを作成する方法（最も簡単な方法）

ブログは、製品の認知度を高めるための最も人気があり効果的な方法の 1 つです。ただし、コンテンツ マーケティングのメリットを最大限に享受したい場合は、ブログ ページの魅力的な外観と適切な情報を確保する必要があります。

ブログ投稿を魅力的なものにするには、独自のカスタム ブログ テンプレートを作成する必要があります。また、Elementor を使用すると、視聴者を惹きつける優れたブログ投稿テンプレートを作成できます。 Elementor カスタム ブログ ページを作成できます 最初から作成することも、事前に構築されたテンプレートを使用して作成することもできます。

この記事では、次のことを学びます 2 つの方法を使用してカスタム Elementor ブログ投稿テンプレートを作成する方法 できるだけ簡単な方法で。それでは、読み続けてください…

カスタム ブログ投稿テンプレートとは何ですか?

カスタム ブログ投稿テンプレートは、Web サイト上の単一のブログ投稿の外観と構造を強化するために作成された、事前にデザインされたレイアウトです。デフォルトのテンプレートを使用する代わりに、ブログ投稿のデザインをカスタマイズできます。ウェブサイト全体に一貫性のあるユニークな外観を提供します。 

たとえば、次のように利用できます。 Elementor とアドオン 例: エレメントキット WordPress でカスタムのブログ投稿テンプレートを作成します。 Elementor の単一投稿テンプレートには、次のような特定の配置が含まれる場合があります。 テキスト、画像、ヘッダー、ボタン、その他の要素。 Elementor のドラッグ アンド ドロップ機能を使用して、さまざまなブログ投稿にわたって一貫した外観を維持するのは簡単です。

カスタム Elementor ブログ投稿テンプレートをデザインする必要がある理由

Elementor ブログ投稿テンプレートを追加するだけでなく 美的魅力を高める あなたのコンテンツの。を確立する上でも重要な役割を果たします。 ユニークなブランドアイデンティティ。 

elementor で単一投稿テンプレートを作成する方法のチュートリアルに進む前に、カスタム Elementor ブログ投稿テンプレートを設計する重要性を探ってみましょう。 

✨ ユニークなブランディング

カスタムの Elementor ブログ投稿テンプレートをデザインすると、次のことが可能になります。 ブランド独自の要素を取り入れています。  色、ロゴ、タイポグラフィを追加して、コンテンツに一貫した視覚的アイデンティティを作成できます。

たとえば、次のように使用できます。 ブランドの特徴的な配色とロゴ テンプレート内に配置してブランド認知を強化します。

👌プロフェッショナルな外観

Elementor カスタム テンプレートは、ブログ投稿のよりプロフェッショナルな外観に貢献します。思慮深いデザイン要素により、美しさが向上し、コンテンツが読者にとって視覚的に魅力的なものになります。

このためには、次のものを選択する必要があります。 クリーンでモダンなデザイン 厳選されたフォントと画像を使用して、要素または単一投稿テンプレートにプロフェッショナルな外観を与えます。

🚀 ユーザーエクスペリエンスの向上

適切に設計された Elementor テンプレートは、全体的なユーザー エクスペリエンスを向上させます。どうやって？ 

さて、カスタム要素記事テンプレートが提供するのは、 レイアウトとデザインの一貫性。また、ナビゲーションとコンテンツの利用がより直観的になります。

そのためには、明確な見出し、整理されたコンテンツ、およびテンプレート内での簡単なナビゲーションを確保して、読者の全体的な読書エクスペリエンスを向上させる必要があります。

🤩 さまざまなコンテンツタイプへの適応性

カスタムElementorブログ投稿テンプレート 柔軟性を提供する また、提示するコンテンツの種類に基づいてデザインを調整することもできます。

Elementor では、さまざまなコンテンツ形式に対応できる単一の投稿テンプレートを設計する必要があります。たとえば、視覚的に豊かなレイアウト、マルチメディア投稿、または長文記事に適した構造化されたフォーマットがあらかじめ設計された Elementor ブログ ページを設計できます。

⏰ 時間効率

カスタムテンプレート 時間を節約する、特にコンテンツを頻繁に作成するクリエイターにとってはそうです。 Elementor を使用すると、WordPress でブログ ページを簡単に作成および編集でき、最初から始めなくても洗練された外観を維持できます。

また、それらを作ることもできます 再利用可能なテンプレート 好みの書式設定、スタイル、構造要素など。

カスタムの Elementor ブログ投稿テンプレートを作成するためにインストールする必要があるプラグイン

Elementor ページビルダーを使用して WordPress でカスタムブログ投稿を簡単に作成するには、次のものが必要です。

• エレメンター（無料）

• エレメンター プロ.

カスタム Elementor ブログ投稿テンプレートを作成する方法: ステップバイステップ ガイド

Elementor Pro は、素晴らしいカスタム ブログ投稿テンプレートを最初から作成するために必要なすべてのウィジェットを提供します。 elementor を使用して wordpress にブログ投稿を追加する方法については、以下の手順に従ってください。🤩

ステップ 1: 新しい単一ブログ テンプレートを作成する

まず、Elementor を使用して単一のブログ テンプレートを作成する必要があります。そのためには、WordPress ダッシュボードに移動し、次の場所に移動します。 テンプレート ⇒ 新規追加 

次に、「新規追加」ボタンをクリックします。新しいウィンドウが開いたら、選択します 単一の投稿 ドロップダウンからテンプレートのタイプとして、 名前を付けてください 選択してクリックします テンプレートの作成.

これで、事前に作成されたレイアウトが表示されるはずです (その使用方法については後で説明します)。 Elementor ブログ テンプレートを最初から作成するので、 をクリックします。 右上の十字ボタン をクリックしてこのウィンドウを閉じます。

ステップ2: ブログ投稿テンプレートの構造/レイアウトを選択する  

ここで、ブログ テンプレートの構造を選択する必要があります。ユーザーが読みにくくなるため、ページの幅全体を使用しないことをお勧めします。

Elementor でカスタム ブログ ページ テンプレートの構造を選択するには、 + アイコンをクリックします 好きなものを選択してください 構造をクリックして挿入します。

注記： 作成しているテンプレートでブログがどのように表示されるかを確認するには、 動的コンテンツをプレビューする オプション。これを設定するには、 設定 左下隅にあるオプション。

次に、選択します 役職 から 動的コンテンツのプレビュー ドロップダウンとして選択し、下の 2 番目のドロップダウンに選択するブログの名前を入力します。最後に、をクリックします 適用してプレビューする.

ステップ 3: アイキャッチ画像ウィジェットを追加し、画像スタイル オプションをカスタマイズする

レイアウトを取得したら、左側のエディター バーで「注目の画像」ウィジェットを検索します。ウィジェットを見つけたら、目的の場所にドラッグ アンド ドロップします。

ウィジェットが読み込まれたら、画像のサイズ、配置、キャプション、リンク、ライトボックスのオプションをカスタマイズします。

スタイル設定を変更するには、 「スタイル」タブ。ここで私を変更できますメイジの高さ、幅、不透明度、境界線、半径など。

👉👉 で私たちのブログもチェックしてください Elementor でメガメニューを構築する方法

ステップ 4: Elementor ブログ投稿情報ウィジェットを追加してカスタマイズする

アイキャッチ画像の後には、投稿関連情報を表示する必要があります。 投稿情報ウィジェット。まずはアイキャッチ画像のように、 投稿情報を検索する ウィジェットでは、単純に ドラッグアンドドロップ アイキャッチ画像ウィジェットの下。

Elementor エディターの [コンテンツ] タブでは、次のことができます。 レイアウトをデフォルトまたはインラインに設定します。 あなたはできる 作成者、日付、時刻、コメントのオプションを編集/削除します。あなたもすることができます カスタムフィールドを追加する 投稿情報ウィジェットへの投稿 + 新規追加ボタンをクリックします。

再度、「スタイル」タブに移動して、次のようなスタイル設定をカスタマイズします。 リスト間のスペース、配置、アイコンの色とサイズ、テキストの色、タイポグラフィ。  

ステップ 5: 投稿タイトル ウィジェットをドラッグ アンド ドロップしてカスタマイズする 

今、 投稿タイトルを検索する ウィジェットと ドラッグアンドドロップ ブログ投稿情報ウィジェットの下にあります。

カスタマイズできます サイズ、HTML タグ、投稿タイトル タグの配置。

[スタイル] タブには、カスタマイズするオプションがあります。 テキストの色、タイポグラフィ、テキストのストローク、テキストの影、およびブレンド モード。

ステップ 6: 投稿コンテンツ ウィジェットを追加してカスタマイズする

今、 投稿コンテンツウィジェットをドラッグアンドドロップします。 ElementsKit のブログ投稿コンテンツ ウィジェットは、ブログ投稿の本文 (メイン コンテンツ) を表します。

ステップ 7: ソーシャル アイコン ウィジェットをドラッグ アンド ドロップして、ソーシャル共有オプションを追加します

投稿内容の後に、 ソーシャルアイコンウィジェットを追加する ドラッグアンドドロップで。ソーシャル アイコンは、さまざまなソーシャル プラットフォームでブログを共有するためのオプションを提供します。

あなたはできる ソーシャルアイコンの数に応じて追加/削除 あなたが望むように。さらに、カスタマイズすることもできます アイコンの形状、アイコンが表示される列の数、および配置。 あなたもすることができます 各ソーシャル アイコンのソーシャル プラットフォーム アイコン、色、リンクをカスタマイズします。

「スタイル」タブに移動して、 アイコンのサイズ、色、パディング、間隔、境界線の種類。

ステップ 8: 著者ボックス ウィジェットを追加し、ウィジェットの設定をカスタマイズする

を検索してください ボックスを作成し、ソーシャル アイコンの後にウィジェットをドラッグ アンド ドロップします。必要に応じて、ソースのドロップダウンからカスタム作成者を追加することもできます。プロフィール写真、表示名、経歴の表示/非表示を選択できます。 HTML タグ、リンク、レイアウトなどの他の設定もカスタマイズできます。 位置合わせ。

「スタイル」タブに移動して、次のようなオプションをカスタマイズします。 画像のサイズ、枠線、色、著者名、略歴などのタイポグラフィ。

ステップ 9: ページネーション オプションのポスト ナビゲーション ウィジェットを追加する

エレメンター ポストナビゲーションウィジェット 読者にナビゲーション オプションを提供して、別のブログに切り替えることができます。投稿ナビゲーション ウィジェットを追加するには、エディタ上で検索する前と同様に、著者ボックス ウィジェットの後にドラッグ アンド ドロップします。

どちらでもできます ページネーションラベルを表示または非表示にする または矢印記号。あなたは歩き回ります 8 種類以上の矢印のデザイン オプション。 あなたもすることができます 前および次のレベルのテキストをカスタマイズします。

cを変更できますラベル、タイトル、矢印、枠線の色とタイポグラフィー 通常ビューとホバービューの両方で。

ステップ 10: 投稿ウィジェットをドラッグ アンド ドロップして関連投稿を表示します

関連する投稿を紹介するために、 Elementor 投稿ウィジェット。そのため、投稿ウィジェットを投稿ナビゲーション ウィジェットの後にドラッグ アンド ドロップします。このウィジェットを使用すると、次のことができます 肌の色の変更、列数、ページごとの投稿数、画像の位置、 など、さらに多くの設定があります。 dを変更することもできます異なるレイアウト スタイル、ボックス、画像、コンテンツ。

ステップ 11: コメント投稿ウィジェットを追加する

ユーザーが投稿にコメントできるオプションを提供するには、投稿コメント ウィジェットを追加する必要があります。 「コメントの投稿」ウィジェットを検索し、ブログの「投稿」ウィジェットの下にドラッグ アンド ドロップします。

ステップ 12: Elementor カスタム ブログ ページ テンプレートを更新して表示する

これですべてのデザインが完了しましたので、 更新ボタンをクリックします。公開設定ウィンドウが表示された場合は、 をクリックします。 保存して閉じます。

これは、作成したばかりのカスタム Elementor ブログ テンプレートのプレビューです。

上記の方法では時間がかかりすぎる場合は、Elementor ブログ テンプレートを構築するために各セクションを最初から構築および設計する必要がない、以下で説明する方法を選択できます。

👉👉 ブログでもご覧いただけます 5つの簡単なステップでElementorにマルチステップフォームを追加する方法

既製のElementorブログテンプレートを使用して単一投稿ページを作成する方法

Elementor カスタム ブログ ページに事前に構築されたテンプレートを使用する場合は、わずか 3 つのステップで実行できます。方法を確認してみましょう:

ステップ1: ダッシュボードから新しい単一ブログ投稿テンプレートを作成する

最初の方法と同様に、新しい単一のブログ テンプレートを作成する必要があります。新しいテンプレートの作成方法の詳細については、 少し上にスクロールして、最初のメソッドの最初のステップを確認してください (ブログテンプレートを最初から構築する方法)。

ステップ2: 既製のElementorシングルポストテンプレートを選択する

[テンプレートの作成] をクリックすると、多数のカスタム シングル投稿テンプレートを含む Elementor ライブラリ ウィンドウが表示されます。ここでは、任意の単一投稿ブロックを選択できます。 好みのテンプレートにマウスを移動し、「挿入」をクリックします。

ステップ3: 既製のElementorシングルポストテンプレートを選択する

テンプレートがロードされたら、 公開ボタンをクリックします 新しいブログ テンプレートをすべて保存します。

ここでは、既製の単一投稿テンプレートを使用した Elementor ブログ投稿を使用したブログ投稿の最終的な外観を示します。

👉👉 チェックアウトもできます マルチ通貨スイッチャーをElementor WooCommerce Webサイトに追加する方法

ElementsKit を使用して Elementor の最新投稿ページを作成する方法

魅力的な 1 つのブログ投稿テンプレートを作成したので、カスタム ブログ リスト ページを作成して、すべてのブログが目に心地よい、使いやすい方法で表示されるようにします。 ElementsKit を使用してカスタム Elementor の最新投稿を作成する方法を見てみましょう。

ステップ 1: ElementsKit をインストールしてアクティブ化する

素晴らしいブログのリスト ページを作成するには、Elementor ページ ビルダーとともに ElementsKit が必要です。 ElementsKit は、 Elementor 用のオールインワン プラグイン 85 以上のウィジェットとモジュールを使用して、Web 開発をこれまでより簡単にします。

ステップ 2: 投稿リスト関連のウィジェットを有効にする

有効化したら、投稿関連のウィジェットをオンにして投稿リスト ページを構築する必要があります。 ElementsKit には、ブログ投稿、投稿グリッド、投稿リスト、投稿タブ ウィジェットなどのブログ リストを表示するためのいくつかのウィジェットが用意されています。、など。  使用したいウィジェットを有効にすることができます。

👉👉 美しいものを作成する方法をチェックしてください ElementsKit を使用した Elementor の 1 ページ スクロール ナビゲーション

ステップ 3: ウィジェットを追加してカスタマイズする

次に、ブログ一覧ページに移動し、ウィジェットを検索し、ドラッグ アンド ドロップするだけです。ウィジェットが読み込まれたら、関連設定をカスタマイズしてブログ リスト ページをカスタマイズできます。 

いくつかの ElementsKit ウィジェットとそのカスタマイズ オプションを使用して、ブログ リスト ページがどのように見えるかを見てみましょう。

ブログ投稿: 

ブログ投稿ウィジェットを使用すると、ブログを次のように表示できます。 ブロック形式、サム付きグリッド、およびサムなしグリッドのデザイン1行あたりに表示する投稿数の設定、ページ区切りの有効化/無効化、その他多くのオプションも設定できます。詳細については、当社のブログをご覧ください。 最近のブログ投稿を表示する方法.

ポストグリッド:

ポスト グリッド プラグインを使用すると、ブログ リストに表示するカテゴリのブログをカスタマイズできます。表示する投稿の数と各行の列番号を選択することもできます。詳細については、当社の ドキュメンテーション.

投稿タブ:

とともに 「投稿」タブ ウィジェットでは、ポスト グリッドや追加のカテゴリ タブなどのすべてのカスタマイズ オプションを利用できます。このオプションを使用すると、ユーザーは次のことを行うことができます。 任意のカテゴリ タブにカーソルを置くと、その特定のカテゴリのブログのみが表示されます。

ウィジェットを選択し、好みに応じてカスタマイズしたら、 更新ボタンをクリックして公開します。  これで、Elementor の最新の投稿を魅力的に表示するページが完成したはずです。

結論: カスタム Elementor ブログ投稿テンプレートを作成する

私たちは、簡単なチュートリアルを提供するために最善を尽くしました。 カスタムの Elementor ブログ投稿テンプレートを作成する方法。 WordPress サイトでカスタム ブログ テンプレートを構築する際にこのブログが役立つことを願っています。手順に従って、レイアウトやデザインを好みに応じて変更できます。

ElementsKit ウィジェットを使用して、ブログ リスト ページに特別なタッチを与えることも忘れないでください。 ElementsKit は Elementor を完全に補完するものです。 このアドオンが提供する素晴らしいウィジェットをすべてチェックする時間を作ってください。