(↑Pinterestでシェアお願いします!)

Elementor Proでヘッダーを透明化する方法

執筆者 | 更新日 2020年07月19日 | Elementor Proの使い方 | コメント0件

Elementorのサイトでヘッダーを透明化させたいと考えていませんか? この記事では、Elementor Proのテーマビルダーを使って、ヘッダーを作成し、そのヘッダーを透明化する方法をご紹介していきます。さらには、スティッキーヘッダーで、スクロールの途中からヘッダーの背景を半透明にする方法もご紹介していますので、ぜひチェックしてみてください。

重要この記事で使用するElementor Proは有料のプラグインになります。こちらの公式サイトで契約を済ませてください。
チェック!Elementor Proの使い方を網羅的に学びたい方は、『Elementor Proの使い方:完全ガイド』をご覧ください。

Elementor Proでヘッダーを透明化する手順

最初は、シンプルにヘッダーを透明化させる方法をご紹介していきます。

Step1. テーマビルダーでヘッダーを作成する

まずは、テーマビルダーでヘッダーを作成します。

ヘッダーの背景を透明化する

このとき、背景の色は透明に設定しておきます。2本のバーの内、下のバーのつまみを一番左まで持っていくと、透明化することができます。

Step2. ヘッダーのZ-Indexを調節する

「マージン」を0に設定し「Z

「高度な設定」の「Z-Index」を「5」に設定します。

Step3. ページのマージンとZ-Indexを調節する

Elementor Proでヘッダーの透明化(マージンの上とZ

次に、ページに移動して、トップのセクションを設定していきます。「高度な設定」に移動し、「マージン」の「上」を「-117」ほどに設定します。この数値は、必ずしも同じとは限らないので、外観をチェックして、もし変な場合は微調整してみてください。あとは、「Z-Index」を「O」に設定して完了です。

Elementor Proでヘッダーを透明化する

これで、上の画像のようにヘッダーを透明化することができます。

Step4. ヘッダーを固定化する

スティッキーにする場合は「Sticky」を「上」に設定

あとは、必要があれば、ヘッダーを固定化しましょう。ヘッダーのセクションに移動し「高度な設定」の「Motion Effects」で「Sticky」を「上」に設定します。

Elementor Proでヘッダーを透明化固定化する 1

これで、上の画像のようにヘッダーを透明化、さらに固定化することができます。

Elementor Proでスティッキーヘッダーを途中から半透明にする手順

ここからは、ヘッダーを固定化した場合に、スクロールした際に途中から背景を半透明にする方法をご紹介していきます。もちろん、半透明でなくても、がっつり色をつけてしまってもOKです。

Step1. ヘッダーにCSSを追加する

ヘッダーにCSSを追加する

まずは、「高度な設定」の「カスタム CSS」に移動します。 そしたら、上記のコードを追加します。「0, 0, 0, 0.80」の部分はカラーコードになっていますので、好きな色を設定してみてください。16進数のカラーコードを追加したい場合は、「rgba(0, 0, 0, 0.80)」の部分を「#カラーコード」に切り替えてみてください。

Step2. ヘッダーの上部にセクションを追加する

Elementor Proでヘッダー上部にセクションを追加する

次に、作成したヘッダーの上にセクションを追加します。ヘッダーセクションにカーソルを置くと、水色の枠が表示されるので、そこのプラスボタンをクリックします。そして、赤いプラスボタンをクリックし、カラムを選択してセクションを追加します。カラムの数は1カラムでOKです。

Step3. ヘッダー上部のセクションでマージン・パディング・CSS クラスを設定する

ヘッダー上部の設定を変更する

  • マージン:0
  • パディング:0
  • CSS クラス:elementor-sticky–active

最後に、上記のように設定をして完了です。

Elementor Proでヘッダーを途中から半透明にする

すると、このように、最初はヘッダーの背景が透明になっていますが、途中から半透明に色が切り替わります。

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Elementor Proの使い方

無料でElementor Proの使い方を

網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?