Elementor を使用して透明なヘッダーを作成する方法

透明なヘッダーは、サイトの外観を改善する優れた方法です。 これにより、Web サイトのデザインが際立ち、サイトの訪問者にとってよりインタラクティブに見えます。

しかし、プログラミング言語を知らなくても、Elementor を使用して WordPress で透明なヘッダーを作成できますか? 答えはイエスです！ あなたは間違いなくできます。 この記事では、Elementor 透過ヘッダーを簡単に作成する手順を示します。

透過的なヘッダーを使用する利点

魅力的な Elementor 透明ヘッダーを簡単に作成できます。 ただし、必要に応じて、さらに一歩進んで、訪問者がページ コンテンツをスクロールするときに固定することができます。 以下に利点を示します。

長い Web ページに最適

透明なスティッキー ヘッダーを使用することは、訪問者に快適なエクスペリエンスを提供するためのスタイリッシュで迅速な方法です。

ウェブサイトのナビゲーション システムをより使いやすくするのに役立ちます。 サイトのコンテンツが非常に長い場合、この利点は非常に有益です。

実用的なウェブサイトに最適

透過的なスティッキー ヘッダーは、小売サイトや e コマース サイトなどの実用的な Web サイトで最適に機能します。 これは、訪問者にページ コンテンツ上で特定のアクションを実行してもらいたいからです。

Web サイトの閲覧中にヘッダーが美しく表示されると、訪問者はより便利に閲覧できるようになります。

さらに、ヘッダーは透過的であるため、コンテンツの可読性が損なわれることはありません。 したがって、透明なヘッダーを追加すると、サイトの直帰率が低下し、訪問者を効率的に誘導するのに役立ちます。

サイトのナビゲーション機能を改善する

サイトで透明な固定ヘッダーを使用すると、訪問者がすぐに行動を起こすようになります。 特定のオプションを探す時間を節約できます。

また、ブランドのロゴをホームページのいたるところに配置する代わりに、透明なスティッキー ヘッダーにエレガントに表示できます。

Elementor Pro を使用して透明ヘッダーを作成する方法

それでは、Elementor Pro を使用して透明なヘッダーを作成およびカスタマイズする方法を学びましょう。

Elementor Pro プラグインをインストールしてアクティブ化する

サイトに Elementor Pro がまだない場合は、インストールしてアクティブ化する必要があります。

1. WordPress ダッシュボードから、[プラグイン] > [新規追加] に移動します。

2. 「Elementor」と入力してプラグインを見つけます。 Elementor Website Builder がオプションとして表示されます。
3. [今すぐインストール] ボタンと [アクティブ化] ボタンをそれぞれクリックします。
4. Elementor Pro を正常に購入したら、my.elementor.com にアクセスします。
5. 購入後のメールに記載されている情報でログインしてください。
6. 次に、プロフィールページに移動します。 右上隅にある [プラグインのダウンロード] ボタンをクリックして、.zip ファイルをコンピューターにダウンロードします。

7. サイトの WordPress ダッシュボードから、[プラグイン] > [新規追加] をクリックします。 次に、左上隅にある [プラグインのアップロード] ボタンをクリックします。
8. [ファイルの選択] ボタンをクリックします。 ダウンロードした .zip ファイルを選択します。 次に、[アクティブ化] をクリックします。
9. サイトのダッシュボードの上部に、ライセンス キーの有効化を求める通知が表示されます。

サイトのメニューを作成する

次に、まだ行っていない場合は、WordPress ダッシュボードを使用してヘッダー メニューを作成する必要があります。 以下は入門ガイドです。

1. WordPress ダッシュボードから、[外観] > [メニュー]に移動します。

2. [メニュー名]テキストボックスにメニュー名を入力します。 次に、[メニューの作成]ボタンをクリックします。
3. 左のパネルに注目してください。 ここでは、サイトのページ、投稿、カテゴリ、およびカスタム リンクをメニューに追加できます。

4. メニュー項目をドラッグ アンド ドロップして並べ替えたり、右側のパネルにサブメニューを作成したりできます。

5. 満足したら、[メニューを保存]ボタンをクリックすることを忘れないでください。

Elementor Proを使用して通常のヘッダーを作成する

1. WordPress ダッシュボードから[テンプレート] > [新規追加] に移動します。

2. ポップアップウィンドウが表示されます。 ドロップダウン メニューから Elementor ヘッダー テンプレートを選択し、その名前を [テンプレートに名前を付ける] テキストボックスに入力します。 次に、[テンプレートの作成] ボタンをクリックします。

3. Elementor テンプレート ギャラリーがポップアップで表示されます。 すべての Elementor ヘッダー スタイルをナビゲートできます。 お気に入りを選択したら、カーソルをそこに移動し、[挿入] ボタンをクリックします。 それらすべてをプレビューすることもできます。

Elementor Proを使用して透明なスティッキー ヘッダーを作成する

1. ここで、Elementor Pro を使用してヘッダーを透明にする必要があります。 これを行うには、ヘッダーの上にある 6 つのドットのボタンをクリックします。

2. [レイアウト] セクションで、 [メニュー]ドロップダウン メニューから目的のメニューを選択します。

3. [スタイル] タブに移動して、ヘッダーの背景色と透明度を変更します。 [背景] セクションで、クラシック背景タイプ (絵筆で示されます) を選択します。

4. カラーピッカーボタンをクリックします。 次に、必要な色と透明度を選択します。
5. タイポグラフィ、背景オーバーレイ、ボーダー、仕切りなど、ヘッダーの全体的な外観をさらに変更できます。 お気軽に実験してください。
6. 次に、[詳細設定] タブに移動します。 次に、モーションエフェクトセクションまでスクロールします。 スクロール効果オプションを有効にします。

7. [相対効果] ドロップダウン メニューから [ページ全体] オプションを選択します。
8. 最後に、 Stickyドロップダウン メニューから [ Top ] オプションを選択します。
9. 問題がなければ、[公開] ボタンをクリックして変更を適用します。

結果は次のようになります。

Elementor を使用して透明ヘッダーを無料で作成する方法

予算が少なく、Elementor Pro にお金をかけたくない場合は、透明なヘッダーを作成する別のプラグインが必要です。

この記事では、Essential Addons for Elementor プラグインを使用します。 これは、100 万人を超えるアクティブ ユーザーを持つ最も人気のあるウィジェット ライブラリです。

ウェブサイトを目立たせ、できるだけ魅力的なものにするために、多くのウィジェットを無料で入手できます。 透明なヘッダーを作成するためにプレミアム バージョンは必要ないことに注意してください。

Elementorプラグイン用のElementorおよびEssential Addonsをインストールしてアクティブ化する

1. WordPress ダッシュボードから、[プラグイン] > [新規追加] に移動します。

2. 「 Elementor 」と入力してプラグインを見つけます。 Elementor プラグインがオプションとして表示されます。
3. [今すぐインストール] ボタンと [アクティブ化] ボタンをそれぞれクリックします。
4. Essential Addons for Elementor プラグインを使用して上記のプロセスを繰り返します。

サイトのメニューを作成する

これについてはすでに上で説明しました。 ノウハウまでスクロールしてください。

Elementorの必須アドオンを使用して透明なスティッキー ヘッダーを作成する

1. Essential Addons > Elementsに移動します。 ここで、 Simple Menuウィジェットをアクティブにします。 [設定を保存]ボタンをクリックすることを忘れないでください。

2. 新しいページ/投稿を作成するか、Elementor で既存のページ/投稿を開きます。
3. 左下隅にある[設定]ボタン (歯車で示されます) をクリックします。 [ページ レイアウト] ドロップダウン メニューで [Elementor Canvas] を選択します。 このようにして、テーマに付属するヘッダーを取り除くことができます。

4. 九角形のアイコンをクリックして、ウィジェット メニューに戻ります。 シンプル メニューウィジェットを検索します。 目的の場所にドラッグ アンド ドロップします。

5. [一般] セクションで、[メニューの選択] ドロップダウン メニューから必要なメニューを選択します。

6. [スタイル] タブに移動して、ヘッダーの背景色と透明度を変更します。

7. [背景] セクションで、[クラシック] 背景タイプ (絵筆で示されます) を選択します。
8. カラーピッカーボタンをクリックします。 次に、必要な色と透明度を選択します。
9. タイポグラフィ、背景オーバーレイ、ボーダー、仕切りなど、ヘッダーの全体的な外観をさらに変更できます。 お気軽に実験してください。
10. 次に、[詳細設定] タブに移動します。 次に、[ポジショニング]セクションまでスクロールします。 [位置] ドロップダウン メニューで [固定] オプションを選択します。

11. 九角形のアイコンをクリックして、ウィジェット メニューに戻ります。 Spacerウィジェットを検索します。 シンプル メニューウィジェットのすぐ下にドラッグ アンド ドロップします。

12. [スペーサー]セクションで、ヘッダーの高さに合わせてスペースの値を調整します。

13. 問題がなければ、[公開] ボタンをクリックして変更を適用します。

Woostify ユーザー向けの透過的なヘッダーを作成するには?

Woositfy テーマを使用している場合は、無料版であっても、数分でサイト全体に美しい透明ヘッダーをすばやく適用できます. ノウハウを得るには、以下の手順に従ってください。

1. WordPress ダッシュボードから[外観] > [カスタマイズ] に移動します。

2. 次に、[レイアウト] > [ヘッダー透明]に移動します。

3. [透過ヘッダーを有効にする] トグルをオンに切り替えます。

4. 新しい [一般] および [デザイン] タブでは、必要に応じて新しい透明なヘッダーをカスタマイズできます。 たとえば、404、投稿などの特定のページで有効/無効にすることができます。

5. 結果に満足したら、[公開] ボタンをクリックすることを忘れないでください。

最後の言葉

Elementor の透明なヘッダーを作成することは、ユーザーがサイトをナビゲートするのに役立つスタイリッシュなアプローチです。

作成したヘッダーは完全にレスポンシブです。 したがって、この問題についてあまり心配する必要はありません。 Woostify を使用している場合は、3 番目の方法を使用する必要があります。 また、美しい透過ヘッダーを作成する場合は、最も簡単で最速の方法です。