1 min read

Editor Xのヘッダーのカスタマイズ方法を解説!(流行りの縦ヘッダーでおしゃれに!)

Airi Shiroma By Airi Shiroma
Editor Xのヘッダーのカスタマイズ方法を解説!(流行りの縦ヘッダーでおしゃれに!)

以前からWixエディタを使用されている方が最近では、Editor Xへと切り替える方が多くなってきていますが、操作方法や設定方法が異なるため、少し戸惑う方も多いかと思います。

サイト内でもマップのような役割を果たすヘッダーの設定も通常のWixとは少し異なります。

Editor Xでは、通常のエディタでは設定できなかったカスタマイズができたり、とても便利になっています。

今回は、Editor Xでのヘッダーのカスタマイズ方法、また流行りの縦ヘッダーの設定方法を解説していきたいと思います。

Wixエディタでのおしゃれなヘッダー作成方法は、こちらの記事をご覧ください。

Wixでおしゃれなメニューバーをコピペで簡単に作ろう!【Velo by Wix】

 

ヘッダーのカスタマイズ方法

 

今までのエディタでは、ヘッダーのカスタマイズは、スクロール・固定・隠す・フェードアウトの4種類でした。

サイト上部で透明背景にし、ページをスクロールすると白背景にするなどのカスタマイズはコードを入力する必要がありましたが、Editor Xでは、コードを入れなくても簡単にヘッダーのカスタマイズができるようになりました!

例えば…

サイト上部では、半透明背景にし、スクロールするとヘッダーの色が白半透明に変わる(固定表示)↓

Image from Gyazo

 

サイト上部では透明背景にし、下にスクロールするとヘッダーを隠し、上にスクロールすると白背景でヘッダーを表示させる(隠す表示)↓

Image from Gyazo

 

上記のようなヘッダーの表示がEditor Xでとても簡単にできちゃいます!

今回は、こちらのヘッダーのカスタマイズ方法をご紹介していきます。

Image from Gyazo

 

まず、ヘッダーをクリックして、要素設定パネルを開きます。

Image from Gyazo

 

パネル内でヘッダーを「ピン留め」に設定し「次のセクションを重ねる」にチェックを入れます。

※ここでヘッダーを「ピン留め」に設定することでスクロール効果の項目が表示されます。

※「次のセクションを重ねる」にチェックを入れることでキービジュアルにヘッダーを被せることができます。

 

ピン留めのみの設定だとWixエディタでもおなじみの固定ヘッダーになります。

Image from Gyazo

 

スクロール時に色を変える必要があるので、スクロール効果の塗りつぶし色をお好きな色にします。今回は、半透明にしたいので、白背景の50%で設定します。

Image from Gyazo

 

スクロールした際にヘッダーが隠れるようにしたいので、下記のように設定します。

切り替え:移動

方向:上

距離:100%

遅延時間:0

表示時間:0.5秒

イージニング:リニア

Image from Gyazo

 

プレビュー画面でちゃんとスクロール効果が反映されているか確認すれば完了です!

ノーコードでこんなにも簡単にヘッダーのカスタマイズができるのは嬉しいですよね♪

 

おまけ:

 

先程のスクロール効果の移動の設定だと細かくスクロール効果が選べます。

上方向に移動させるのか、下方向に移動させるのかなど…。

例えば、左方向に移動で設定すると、こうなります。

Image from Gyazo

 

かなり自由自在にカスタマイズができちゃいますよね!

イージングでもさまざまなエフェクトを選択できるので、一度試しながらあなたのサイトにぴったりな動作を選択してください。

 

流行りの縦ヘッダーのカスタマイズ方法



最近、よくいろんなウェブサイトで見るのが縦ヘッダー。縦ヘッダーを取り入れるだけでも一気におしゃれ感が増して競合との差をつけることができるデザインとも言えます。

Editor X内でもいくつかの縦ヘッダーのテンプレートがあり、とても簡単に追加・編集ができます。

ここからは、縦ヘッダーの追加方法・スマホブレークポイントの編集方法をご紹介していきます。

まずは、追加>セクション>サイドバーからお好きなデザインを選びます。

Image from Gyazo

 

ページに追加すると、ハンバーグメニューが表示されます。

クリックするとわかる通り、メニューはベクトアートなので、ライトボックスを使用してハンバーグメニューをクリックした際にサイトページの一覧を見れるように設定します。

サイトページを開くと、ライトボックスの項目が表示されるので、ここの場合は、「Menu」をクリックします。

Image from Gyazo

 

ライトボックスに画像・メニュー・テキスト・ログインボタンなどを追加して編集します。

次にハンバーグメニューとライトボックスを紐づけます。

Image from Gyazo

 

プレビューで動作の確認をします。

Image from Gyazo

 

縦ヘッダーをマスター設定にし、全画面に表示されるよう設定します。

右クリック>マスターとして設定>ヘッダーをクリック

マスターとしての設定方法

サイトマスターを開き、全てのページに表示されるようチェックを入れます。

Image from Gyazo

 

これで全てのブレークポイント、全てのページで縦ヘッダーが表示されます。

スマホで縦ヘッダーだととても使いにくいですよね。

そこで、スマホのブレークポイントのみ横ヘッダーを表示させる必要があります。

 

まず縦ヘッダーを右クリックして非表示を選択します。

追加>セクション>ヘッダーでお好きなヘッダーを選びます。

このままだと、全てのブレークポイントで横ヘッダーも表示されるため、PC・iPadでは横ヘッダーを非表示にします。

縦ヘッダーと同じ方法でマスターとして設定をし、全ページに表示されるようにします。

サイトマスターを開いて、2種類のヘッダーが有効になっているか確認します。

※1つは縦ヘッダー、もう一つは横ヘッダー

Image from Gyazo

 

プレビューでPC・iPad・スマホのブレークポイントで動作の確認を行いながら細かいデザインの調整などを行ってください♪

 

まとめ

 

Editor Xでのヘッダー(縦・横)のカスタマイズ方法を解説しましたが、Wixエディタと比べてものすごくカスタマイズ性が高いのにびっくりしたのではないでしょうか?

ブレークポイントごとにヘッダーのデザインを変えることができるので、こだわったデザインを再現できます。

 

弊社ブランドバディーズは、Wix公式パートナーの最高ランク、Legendに認定されています。マーケティングやブランディングを活かしたウェブサイト新規・リニューアル制作を行なっており、フルレスポンシブのEditor Xを使用したウェブサイト制作も可能です。

「自分でサイトを立ち上げたが、設定やデザインのレイアウトが難しいため初期設定を手伝ってほしい」

「データベースページを作成したい」

「サイトで実現したいことはあるが、どのツールを使ったらいいのかわからない」

などWixをご自身で作成したものの、問題にぶつかっているという方のご相談も承っております。

 

現在30分無料でWixに関するご相談を受け付けておりますので、こちらよりお気軽にご予約ください。

Wix無料相談受付

 

Related Articles

【解説】海外で大反響のWix「Editor X (エディタ X )」についてまとめてみた!

( 1 min read )

Tags: ブランディング, wix

Wixでおしゃれなメニューバーをコピペで簡単に作ろう!【Velo by Wix】

( 1 min read )

Tags: wix

Editor Xのサイト事例紹介!テンプレートを使ってハイクオリティーなサイトを作ろう!

( 1 min read )

Tags: wix

ジャーニーマップをダウンロード!

オンラインとオフラインでメディア戦略を立てるときにご利用ください。