絞れば、出てくる、アイディア。

【Elementor】ヘッダーを透過させる方法

Elementorでヘッダーを作成する際に、ヘッダーを透過させる方法を紹介します！
Elementor Header & Footer Builderを使用してヘッダーを作成し透過させることができます。
無料＆簡単にすぐできるのでぜひ参考にしてみてください！

INDEX

Elementor Header & Footer Builderをインストール
ヘッダーを作成
ヘッダーを透過させる

1. Elementor Header & Footer Builder をインストール

今回は、Elementorに無料で簡単にヘッダーを作成できる、「Elementor Header & Footer Builder （エレメンターヘッダー＆フッタービルダー）」を使用してヘッダーを透過させます。

まだ Elementor Header & Footer Builderをインストールしていない方は、ぜひweblemonの記事を参考にインストールしてみてください。

ヘッダーの作り方は↓こちらの記事をぜひご覧ください！

【Elementor】ヘッダーとフッターの作り方　【Header&Footer Builder】

2024/01/10

Elementorでプラグインを使用してヘッダーとフッターを作成する方法を紹介します。無料で簡単に作成できます。

2. Elementorでヘッダーを作成する

Elementor Header & Footer Builderをインストールしたら、ヘッダーを作成していきます。
今回はElementorでヘッダーを作成していくところから紹介します。
（ヘッダー自体の作成はこちらの記事をぜひご覧ください）

↑まず初めにレイアウトを選びます。今回は「Grid」を選択します。

↑今回は縦に３分割されたレイアウトで作成していきますので、上記画像のようなレイアウトを選択します。

↑各カラムにキャッチコピーやロゴ画像、ナビゲーションメニューなどを配置しヘッダーを作成します。

3. ヘッダーを透過させる

↑ヘッダーのコンテナを選択した状態で「スタイル」をクリックします。
その下の「色」という箇所の選択が上記画像のような表示になっていれば、背景色が設定されておらずヘッダーが透過している状態になっています。

↑ヘッダーの透過率は、色選択画面下部のスライダーで自在に調節可能です。

↑Stickey Header effects for Elementorを使えば、透過させたヘッダーを簡単に固定することができます。

ヘッダーを固定する方法は↓こちらの記事をぜひご覧ください！

Elementor無料版でヘッダーを固定する方法

2024/01/19

「Sticky Header effects for Elementor」を使用し、無料で簡単にヘッダーを固定する方法を紹介します。

まとめ😺

今回の記事では、Elementorで「Elementor Header & Footer Builder」を使用してヘッダーを作成し透過させる方法を紹介しました。
ヘッダーを作成した時点で背景色を設定しなければ、元々背景は透過している状態になっているのですが、透過率や色合いなどを調整することができます。

ヘッダーの作り方や固定方法と合わせて、ぜひ参考にしてみてください！