よくデザインされた検索結(jié)果ページは、訪問者が素早く目的のコンテンツを見つけ、時(shí)間を節(jié)約し、サイト內(nèi)での閲覧を促進(jìn)します。

エレメンタル?プロ これは、そのようなページを?qū)g裝するためのコアツールです。テーマビルダー、カスタムテンプレート、高度なコントロールをサポートし、検索體験全體をより柔軟にする。次はその方法を説明する。

カスタム検索結(jié)果ページとは何ですか？

カスタム検索結(jié)果ページは、キーワードにマッチしたブログ、商品、記事、サービス、その他のコンテンツを表示するために使用されます。タイトル、畫像、フィルター、その他のモジュールを自由に追加して、より視覚的に魅力的で機(jī)能的なページにすることができます。

一般的な使用シナリオ

• Eコマース：検索＋フィルターを組み合わせ、ターゲット商品を素早く表示
• ブログ: タグ、カテゴリー、作者で記事を絞り込む
• ナレッジベース：ドキュメント検索へのクイックアクセスを提供します。
• サービス?プラットフォーム：価格、評(píng)価、地域の異なるサービスをフィルタリングする
• 教育ウェブサイト：コース、テキスト、學(xué)習(xí)リソースの検索

準(zhǔn)備用具

ウェブサイトがインストールされていることを確認(rèn)する：

• エレメンタ
• エレメンタル?プロ

次に作成作業(yè)が始まる。

ステップ1：Elementor Pro Theme Builderを開く

• バックステージにログイン
• Templates > Theme Builder」に進(jìn)む。

• 検索結(jié)果 "モジュールを見つけ、"新しいテンプレートを追加 "をクリックする。

システムは、後続のコンポーネントのために空白のキャンバスを入力する。

ステップ2：タイトルと説明のブロックを追加する

• プラス記號(hào)をクリックして、新しいリージョンを作成する。

• Title "コンポーネントを入力ページにドラッグ＆ドロップする。キャプション

• スタイルでフォント、色、位置を調(diào)整する

次に、"Text Editor "コンポーネントを追加し、説明テキストを入力します。タイプ.

ステップ3：検索ボックスの追加

• 検索フォーム」コンポーネントをドラッグする。

• 詳細(xì)設(shè)定＞余白」で左右の余白を設(shè)定し、幅をコントロールする。

• スタイルでフォント、背景、ボーダー、角丸を調(diào)整。

検索ボタンと検索ボックスの角丸を別々に設(shè)定することで、統(tǒng)一感のあるビジュアルを?qū)g現(xiàn)。

ステップ4：有効にするリアルタイム検索官能性

• コンテンツ」タブに切り替える
• 結(jié)果セクションのライブ結(jié)果オプションを開く。
• 表示する試合數(shù)の上限を設(shè)定する

ステップ5：ライブ結(jié)果テンプレートの作成

• テンプレートを作成」をクリックして、新しいキャンバスを入力します。

• 橫列構(gòu)造の選択

• 注目畫像コンポーネントをドラッグし、中サイズに設(shè)定し、角を丸く調(diào)整する。

• 記事タイトル」コンポーネントをドラッグし、フォントと色を設(shè)定します。

• テンプレートの保存

このテンプレートは、検索中に表示される各コンテンツのフォーマットを決定します。

ステップ6：検索結(jié)果にテンプレートを適用する

メインページに戻り、ライブ結(jié)果モジュールで保存したテンプレートを選択します。

この時(shí)點(diǎn)で、表示する項(xiàng)目數(shù)やソート方法などを設(shè)定することができる。

ステップ7：リアルタイムの結(jié)果スタイルのカスタマイズ

スタイル＞結(jié)果で設(shè)定：

• コンテキストカラー
• ボーダーと角丸
• インナーマージン
• カラム幅とプロジェクト間隔

キーワードのテスト入力が終わると、入力ボックスの下にリアルタイムの表示結(jié)果が表示される。

ステップ 8: Article Archive コンポーネントの追加

• 新しい段落エリアを作成する
• Archive Posts "コンポーネントをドラッグする。

このコンポーネントは、現(xiàn)在のサイトで公開されているすべての記事の內(nèi)容を表示します。

ステップ9：記事の表示方法を設(shè)定する

コンテンツ」に設(shè)定：

• 列數(shù)、畫像位置、解像度

• タイトル、要約、メタ情報(bào)、"続きを読む "の表示
• 文字?jǐn)?shù)とメタ情報(bào)フィールド（日付、コメントなど）の比較

• セットアップタブウィンドウモードとアライメント

ステップ10：記事リストを美しくする

スタイル」で設(shè)定：

• 柱の間隔と配列

• 畫像の余白と角丸

• タイトル、アブストラクト、メタ情報(bào)のフォントと色

• ページネーション?ボタンのスタイルはホバー効果

すべての設(shè)定が完了すると、ページコンテンツはサイト全體のスタイルにより近くなります。

ステップ 11: 保存とプレビュー

保存してフロントエンドのプレビューに行き、キーワードを入力して検索をクリックすると、上にリアルタイムの検索結(jié)果が表示され、下に全記事アーカイブのリストが表示されます。

よくある質(zhì)問：ページの表示がわかりにくい？

検索をクリックした後、ページが空白になったり、誤った構(gòu)造になっていることがある。アーカイブページテンプレート

解決策

• テンプレート > テーマビルダー」に戻る。
• アーカイブ」テンプレートの作成
• プレゼンテーションを設(shè)定し、保存して修正できるようにする。

概要

利用する エレメンタル?プロ 高機(jī)能でプロフェッショナルな検索結(jié)果ページを簡(jiǎn)単に構(gòu)築できます。検索ボックスであれ、リアルタイムの結(jié)果表示であれ、記事アーカイブコンテンツであれ、あなたのサイトのニーズに合わせて高度にカスタマイズ可能です。熟練すれば、次のようなアプリケーションシナリオを拡張することもできます。ディレクトリページ、フィルターページ、ナレッジセンターなどのページの作成。

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