カスタムワンページテンプレートを使えば、特にブログページや商品紹介ページ、サービス詳細(xì)ページなど、コンテンツが豊富なウェブサイトのデザインをより柔軟に、クリエイティブにコントロールすることができます。この記事では、Elementor の Flexbox コンテナ機(jī)能を使用してカスタムワンページテンプレートを作成する方法を、具體的な例を交えながら説明します。

1ページテンプレートとは何ですか？

単一ページテンプレート は、WordPressでブログ記事や商品ページなどの単一のコンテンツに使用されるカスタムレイアウトファイルです。テーマの シングル.php もしかしたら singular.php ドキュメンテーションお客様のウェブサイトのニーズに応じて、ページレイアウトをデザインすることができます。.

例

例えば、あなたがブログサイトを運営しているとします。各記事ページすべて以下を含みます：

• ヘッダーセクションには、投稿タイトルと共有ボタンが表示されます。
• メインテキストセクションには、記事の內(nèi)容と付隨する畫像が表示されます。
• 右サイドバーには関連記事や広告が表示されます。

これは1ページのテンプレートで簡単に実現(xiàn)できます。

---

Flexboxコンテナを選ぶ理由

FlexboxコンテナはElementorが提供するモダンなレイアウトツールで、従來のセクションレイアウトやカラムレイアウトよりも柔軟性があります。その主な利點は次のとおりです：

1. お點前異なる畫面サイズに対応するために、水平または垂直レイアウトを簡単に実裝できます。
2. レスポンシブ?サポートモバイルでもデスクトップでも安定したパフォーマンスを発揮します。
3. パフォーマンス最適化ページロードの高速化のためにDOM階層を減らしました。

カスタム?ワンページ?テンプレートを作成する手順 (ブログページ(一例として）

次のステップでは、ブログの投稿ページをデザインすることを例に、1ページのテンプレートをゼロから作成する方法を説明します。

ステップ1：新規(guī)テンプレートの作成

1. WordPressのダッシュボードにログインし、次の場所に移動します。 テンプレート > テーマビルダー.

2. 打點 シングルページを選択し + 新しいテンプレートの追加.

3. テンプレートライブラリポップアップを閉じ、Elementorのブランクキャンバスエディタに移動します。

ステップ2：ヘッダーセクションの作成

1.タイトルコンテナの追加

打點 + アイコン 新しい Flexbox コンテナを作成し、[Single Row Layout] を選択します。

• 幅に設(shè)定します。 箱入り內(nèi)容が中心です。

• 最低高に設(shè)定します。 100pxヘッダー部分が十分に目立つようにしてください。
• アライメントコンテンツアライメントを"スペーシング".タイトルと共有ボタンをコンテナの両端に配置します。.

2.タイトルウィジェットの追加

Elementorパネルから 投稿タイトルウィジェット コンテナにドラッグ?アンド?ドロップしてください?，F(xiàn)在のページのタイトルが動的に表示されます。

• タイトルの設(shè)定
  • タイトルデフォルトでは、現(xiàn)在の記事タイトルは追加修正なしで動的に表示されます。
  • HTMLタグに設(shè)定します。 H1タイトルがSEOのベストプラクティスに沿っていることを確認(rèn)します。
  • リンクもし現(xiàn)在の投稿にタイトルをリンクさせたい場合は リンク Dynamic -> Post URL」を選択します。

3.共有ボタンの追加

そうしれいかん シェアボタンウィジェット ヘッダーの右側(cè)にドラッグ＆ドロップすると、FacebookやTwitterなどのソーシャルプラットフォームを設(shè)定できます。

をクリックし、ボタンのスタイルを調(diào)整します：

• 角丸ボタンでモダンなデザインに。

• デスクトップとモバイルの両方でクリックしやすいようにボタンのサイズを変更します。

インスタンス効果：

ユーザーが特定のブログ記事を開くと、記事タイトルと共有ボタンが上部に表示され、ユーザーがコンテンツをすばやく共有しやすくなります。

ステップ3：ボディとサイドバーレイアウトの作成

1.2カラムレイアウトの作成

打點 + アイコン 新しい Flexbox コンテナを作成し、2 列レイアウトを選択します。

• 左のコンテナは、本文を表示するために使用されます。
• 右コンテナはサイドバーコンテンツを表示するために使用されます。

2.構(gòu)成幅

• 左側(cè)の容器幅を 75%本文の表示に重點を置いています。
• 右コンテナ幅を 25%サポート情報の表示領(lǐng)域として。

ステップ4：本文の追加

1.左コンテナに投稿コンテンツを追加

そうしれいかん 投稿コンテンツウィジェット 左側(cè)のコンテナにドラッグ＆ドロップします。これにより、記事のテキストや畫像など、現(xiàn)在のページの本文コンテンツが動的に入力されます。

2.サポート機(jī)能の追加

• 例1：関連記事へのリンク
  本文の下に 埋め込みウィジェット例えば、3つの記事のタイトルを動的に表示します：

• 例2：コメント欄
  WordPressデフォルトのコメントウィジェット、またはサードパーティのプラグインを使用して、コメント機(jī)能を本文エリアに統(tǒng)合します。

ステップ 5: サイドバーコンテンツの追加

1.カタログウィジェットの追加

そうしれいかん カタログウィジェット 右側(cè)のコンテナにドラッグ＆ドロップし、見出しのレベルを設(shè)定します。

2.他のウィジェットの追加

• コール?トゥ?アクション?ボタンカタログの一番下に購読ボタンを追加します。

• 広告スペース畫像ウィジェットを使用して、広告畫像、おすすめコースやツールを配置します。

ステップ6：レスポンシブデザインの最適化

1. Elementorエディタでモバイルビューに切り替え、レイアウトを調(diào)整します：
   • サイドバーの幅を100%に設(shè)定し、本文の下に重なるようにします。

2. 見出しや本文のフォントサイズを調(diào)整し、小さな畫面のデバイスでも読みやすくします。

例

モバイルでは、カタログウィジェットは本文の下に表示され、すべてのリンクはクリック可能です。

ステップ7：表示條件を設(shè)定して保存

1. の右上をクリックします。 ポスト ボタンで表示條件を設(shè)定します：
   • テンプレートをすべてのブログ記事ページに適用します。
   • また、必要であれば、特定のカテゴリーの記事だけに適用することもできます。

2. テンプレートを保存し、効果をプレビューします。

結(jié)果例：ブログ記事ページテンプレート

以上の手順で、以下の要素を含む完全なブログ記事ページテンプレートが完成します：

• ページ上部の投稿タイトルとシェアボタン。
• メインエリアには、関連するおすすめ記事やコメントを含む本文コンテンツが表示されます。
• 右サイドバーにはカタログと広告スペースがあり、ナビゲーションとインタラクションが簡単です。

概要

ElementorのFlexboxコンテナを使えば、ブログ記事、商品ページ、サービス詳細(xì)ページ用のカスタム1ページテンプレートを簡単に作成できます。ヘッダーエリア、本文、サイドバーレイアウト、目次、ページレイアウトなど、詳細(xì)な設(shè)定手順をご覧ください。呼びかけFlexboxの強(qiáng)力な機(jī)能はレスポンシブレイアウトをサポートし、ユーザーエクスペリエンスを最適化し、DOM階層を簡素化してページの読み込み速度を向上させます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業(yè)サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨詢：1025174874
三 Eメール：info@361sale.com
④ 勤務(wù)時間: 月～金、9:30～18:30、祝日休み