この記事では、Elementorプラグインを使ってサイトメニューに検索アイコンを追加.

Elementorの検索アイコンとは何ですか？

Elementorの検索アイコンは、Elementorプラグインが提供する"検索フォーム"ウィジェットです。このウィジェットを使うと、サイトのどこにでも新しいウィジェットを追加することができます。ヘッダー、フッター、サイドバー) 検索バーの設(shè)置サイトのヘッダーやフッターに設(shè)置することで、ユーザーはサイトのどのページからでもこの機(jī)能にアクセスでき、ナビゲーションや検索が非常に容易になります。

ウィジェットは柔軟性が高く、プレースホルダーテキスト、アイコン、ボックスシャドウ、ボーダー、アイコンの位置、タイポグラフィ設(shè)定などをカスタマイズできます。さらに、異なるスクリーンサイズ用にカスタマイズできます (デスクトップ、タブレット、攜帯電話)が最適に設(shè)定され、すべての機(jī)器においてグッドインジケータ.

Elementorの検索アイコンをウェブサイトのメニューに追加する方法

このチュートリアルでは、Elementorの無料版とプロフェッショナル版ウィジェットそして、あらかじめデザインされたページでデモンストレーションを行います。

ステップ 1: Elementor 検索フォームウィジェットの追加

まず、ウェブサイトのメニューに検索オプションがないことを確認(rèn)してください。メニューエリアに新しい列を追加して検索アイコンを配置します。

1. Elementorエディタを開きます。左側(cè)のウィジェットパネルから"検索フォーム「ウィジェット

2. ウィジェットのドラッグ＆ドロップ検索フォームウィジェットをナビゲーションメニューの右カラムにドラッグ＆ドロップします。

こうして、メニューに検索フォームが追加されました。

ステップ2：検索スキンの設(shè)定

Elementorは検索フォームの外観をデザインするために3つの異なるスキンから選択することができます：

1. 聖典これは最も基本的なデザインで、通常はすっきりとしたレイアウトに適用されます。
2. 最小限シンプルで洗練された、モダンなウェブサイトに最適なスキンです。
3. フルスクリーンこのスキンを使用すると、ユーザーが検索ボックスをクリックすると、検索ボックスが全畫面表示に拡大されるため、コンテンツが豊富なサイトに最適です。

ウェブサイトのスタイルに応じて、適切なスキンを選択し、コンテンツセクションにプレースホルダーテキストを追加します。

ステップ 3: 検索ボタンコンテンツの管理

コンテンツエリアでは、検索ボタンをアイコンとして設(shè)定するか、テキストとして設(shè)定するかを選択できます。この例では、ボタンをアイコンに設(shè)定し、アイコンのサイズと位置をカスタマイズできるようにしています。

1. アイコンの種類を選択ボタンのコンテンツでは、アイコンを主な表現(xiàn)方法として選びました。
2. アイコンのサイズ変更メニューデザインに基づき、アイコンは他のメニュー項(xiàng)目と調(diào)和するようリサイズされます。

ステップ 4: フォームの入力フィールドのスタイルのカスタマイズ

検索フォームをさらに裝飾するには、"タイプ"セクションで入力フィールドのスタイルを調(diào)整できます。

1. レイアウトを修正ウェブサイト全體のデザインに合わせて、入力フィールドのフォント、フォントサイズ、テキストカラーを変更できます。
2. 背景とボーダーの設(shè)定入力フィールドの背景色、ボーダー色、ボックスシャドウなどをカスタマイズできます。
3. ボーダー半徑の追加枠線の半徑を設(shè)定することで、検索ボックスの角を丸くし、視覚効果を高めることができます。

ステップ 5: スタイルボタン

検索ボタンのスタイルは、「スタイル」セクションでカスタマイズすることもできます。

1. ボタンの色の変更ボタンの文字色と背景色を設(shè)定して、ページ上で目立たせることができます。
2. アイコンの位置を調(diào)整ボタンアイコンの位置は、フォーム全體のデザインと調(diào)和するよう、必要に応じて調(diào)整してください。

ステップ6：レイアウト領(lǐng)域に余白を加える

詳細(xì)設(shè)定では、マージンやインナーマージンを追加するなど、ウィジェットのレイアウトを調(diào)整し、検索フォームが他のメニュー項(xiàng)目と揃うようにすることができます。

• 余白の追加ウィジェットの上部に適切なマージンを追加し、検索フォームをメニューの他のコンテンツと整列できるようにします。

ステップ 7: Elementorの検索アイコンをモバイル対応にする

検索フォームがデバイス間で一貫して動(dòng)作するようにするには、Elementor の "応答モード「オプション

1. 畫面サイズの切り替え: Elementorパネルの上部で、異なるスクリーンサイズを切り替えて、検索フォームのレイアウトを個(gè)別に最適化できます。
2. ウィジェットのサイズ変更と再配置攜帯電話、タブレット、デスクトップで良好に表示されるように、畫面サイズに応じてウィジェットのサイズと位置を調(diào)整します。

注意: ウィジェットを削除すると、すべての畫面サイズで消えてしまうので、削除しないでください。ウィジェットを削除する代わりに、特定の畫面サイズで非表示にすることができます。

ステップ 8: 検索バーのプレビュー

すべての設(shè)定が完了したら、新しくデザインされたナビゲーションメニューをプレビューしてください。検索フォームがすべてのデバイスで期待通りに表示され、機(jī)能することを確認(rèn)してください。

よくある質(zhì)問

1. Elementorの検索フォームウィジェットは無料ですか？
   • いいえ。検索フォームウィジェットはElementorの高度なウィジェットでプロフェッショナル版オファー
2. WordPressの検索バーをカスタマイズするには？
   • Elementorやその他のプラグインを使用して、WordPressウェブサイトに検索バーを追加し、カスタマイズすることが可能です。詳細(xì)な手順については、関連するチュートリアルを參照してください。
3. Elementorで検索結(jié)果ページを作成?編集するには？
   • 検索結(jié)果ページは、Elementorのテーマビルダー機(jī)能を使って簡(jiǎn)単に作成?編集できます。次のページへテンプレート -> テーマビルダー -> 検索その結(jié)果、既製のテンプレートを選択するだけです。

はんけつをくだす

検索機(jī)能はウェブサイトのユーザーエクスペリエンスを向上させる重要なツールです。サイトのメニューに検索アイコンを追加することで、ユーザーが探しているものを見つけやすくし、使いやすさとコンバージョン率を向上させることができます。Elementorは、特定のニーズに応じてカスタマイズできる強(qiáng)力な検索フォームウィジェットを提供しており、検索フォームがサイト全體のスタイルと一貫していることを保証します。

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