Wix セクションの使い方

YouTubeで視聴する>>

こんにちは！

Wixパートナーレベル最上位 レジェンドを取得しています

合同会社アクトワン代表 和田英也です！

今回はWix セクションの使い方というテーマで解説致します！

ここまでのブログ記事では、Wixの大まかな使い方と、 編集画面や初期設定について解説してきましたが、今回よりそれぞれのパーツの具体的な使用方法について解説していきます。

セクションはサイト上にあらゆるパーツを置くための下地のようなもので、全てのパーツはまず、このセクションをエディタ上に置くことから始まります。

それでは早速始めましょう！

▼ 目次

セクションの背景を設定する

セクションの追加方法

スクロールエフェクトの設定

セクションに名前をつけて管理

クイック編集機能について

レイアウト調整

セクションの複製

セクションURLの発行

スクロールエフェクトを使ったテクニック

動画解説版はコチラ

Wix Tech Salon

セクションの背景を設定する

エディタを開いた状態でバーの左側に"セクション"があります。

Wixではセクションを置いた上に様々なパーツを置いていくことになります。

では、このセクションでは一体何ができるかというと、まずはセクションの背景を変更することができます。

これは後に解説するストリップでも同じです。

背景には色や画像、動画も選べます。

例えば、赤枠のような背景画像を設定します。

するとこのようにセクションに背景が追加されます。

コンテンツのボリュームによって高さも調節していきましょう。

そしてこのセクションの上に文字を置いていきます。

セクションの追加方法

セクションを追加する時はセクションの下にある"セクションを追加"ボタンです。

様々なデザインのテンプレートがありますが、空のセクションもあります。

スクロールエフェクトの設定

パーツをのせたセクションにはスクロールエフェクトを設定することができます。

スクロールエフェクトとは、私たちは実際のサイトを見るときに画面をスクロールしていきますよね。

その時のセクションの背景の動きを設定することができます。

矢視のアイコンの背景を選択します。

すると様々なスクロールエフェクトが表示されます。

代表的なスクロールエフェクトに"パララックス"と"リヴィール"があります。

パララックスはリヴィールと違って背景が固定されるイメージではありますが、スクロールから僅かに遅れて動く効果があり、立体感や奥行きを演出します。

YouTube動画ではパララックスやリヴィールの視覚効果もみることができるので、ぜひご確認ください。

他のスクロールエフェクトがどのような動きをするのかも、アイコンから確認することができます。

セクションに名前をつけて管理

ここからはセクションならではの機能なのですが、セクションには名前を付けることができます。

名前を入れるメリットは、セクションはリンク先として設定することができます。

ページのアンカーとしてセクションを選べるようになっているので、リンク先にセクションを設定しておくことで、メニューバーにセクションを表示させ、クリックしたユーザーを選択したセクションに遷移させることができるんですね。

またセクション単位でエディタを管理することができるので、セクション自体の移動も簡単にできます。

クイック編集機能について

セクションを選択した状態で"クイック編集"を押すと、

先ほど編集したタイトルや背景などの内容を一元管理することができます。

さらにクイック編集が便利なのは、セクション内にテキストやボタンなどの様々なパーツがある場合に、見出しや段落になる箇所をクイック編集で編集することができます。

ここでテキスト自体の書き換えや全ての文字編集が可能です。

テキストだけでなく、ボタンパーツの内容やリンク先の設定などもクイック編集できます。

クイック編集からさらにテキストなどを追加、編集することも可能です。

レイアウト調整

レイアウトを押すと、レイアウトのテンプレートが出てきます。

セクションのテンプレートの中で区切りのあるようなものを選択してみます。

この区切りはセクション自体が分割されたのではなく、中にストリップというパーツが追加された状態です。

ストリップはカラムによって2つの領域に区切られていますが、そういったことをしたい場合はストリップを設定しなければいけません。

よって、セクションとは、あくまで下地となるものを作成する時に設置するといった感じです。

セクションの複製

既存のセクションは複製可能です。

セクションを選択した状態でCtrl＋Dもしくは、右クリックで"複製"です。

すると、同じセクションが追加されます。

都度セクションを設定していると工数がかかってしまうので、こうしたことから工数を削減していきましょう。

セクションURLの発行

YouTube動画を出した時点ではこちらの機能がなかったので、紹介できていませんでしたが、セクションにURLを発行する機能がリリースされました！

エディタ上でセクションを選択し、セクションのタブにマウスオーバーすると、右端に[T]と出ますので、ここから"セクション名を変更"に進みます。

セクションの名前を設定する箇所の下に"URLサフィックスを入力してください"と出ますので、ここでセクションのURLを設定できます。

こちらで設定したURLを開くと、ページだけでなく、セクションがある箇所に遷移します。

スクロールエフェクトを使ったテクニック

このようなスクロールによって、中心の画像が変化するエフェクトを作ります。

まずは複製によって同じセクションを2つ作ります。

さらに上の画像のように形状が同じで背景色の違う画像を2つ用意します。

2つのセクションの背景にそれぞれの画像を設定し、それぞれのスクロールエフェクトを"リヴィール"にします。

こうすると、リヴィールの効果で、中央のアイコンの色が徐々に変化していくような面白い効果を作ることができます！

以上がセクションの使い方の解説となります。

動画解説版はコチラ

YouTubeで視聴する>>

チャンネル登録・高評価・動画に対するコメントなどよろしくお願いいたします！

Wix Tech Salon

アクトワンではWixクリエイターを中心としたオンラインサロンを運営しております！

Wixの知識のシェアや、ビジネスの課題解決、メンバー同士の交流を目的にしています。 ご興味がある方はぜひ覗いてみてください!

Wix Tech Salon >>