見出し画像

Wix セクション機能 | 動画で解説しました

YouTubeで動画を見る>>

こんにちは!
大阪府和泉市のホームぺージ制作会社 ACTONEの和田英也です!

今回はWixに新しく登場した機能「セクション」について解説させていただきます!

直近のアップデートでWixは新エディタとなり、ページは自動的に「セクション」と呼ばれるコンテンツのブロックに分割され、サイトのコンテンツを簡単に整理することができるようになりました。

これまではエディタの中でテキストやボタンといったパーツを直置きしていたのですが、今後は全て、セクションを設置してからそれらの編集作業をする仕様になりました。

それでは早速実際の画面を見ながら説明をしていきたいと思います!

セクション追加

セクション編集画面

今まではセクションという概念がなくて、エディタ上にパーツを直置きしていく感じでしたが、今後はまずセクションを置いてから、そこにパーツを置いていくことになります。

背景画像の選択

セクションは背景を編集することができます。
色や画像、動画などを自由に導入、編集してセクションに背景を追加していきましょう。

セクション設定が出来たら、その上に今まで通りテキストやデータを載せていくことができます。

セクションの追加

「セクションを追加」ボタンでセクションの追加も可能です。
テンプレートもいくつか出てきますが、空のセクションも選択できます。

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

続いてパーツを載せたセクションに、ストリップ機能と同じくスクロールエフェクトを設定していきましょう。
スクロールエフェクトでは、サイトを実際にスクロールしながら見た時の背景の効果を設定できます。

スクロールエフェクトの編集

編集画面には、様々なエフェクトイメージが載っているのでご自身のサイトのテイストに合わせて自由にアレンジを楽しめます。

どのような動きをするかはエフェクトイメージで大まかに見て、その後、プレビュー画面でしっかりとチェックしましょう。

セクションの名前付け

ここからは新しい機能のご紹介。
セクションには名前を付けることができます。

セクションの名前付け

名前を付けるメリットはセクションのリンク先を設定できる点です。

今までは必ずアンカーをつけなければいけませんでしたが、リンク先にセクションを設定することによってこの手間が省かれます。

またセクション単位でエディタを管理できるので、セクションの移動も容易にできる仕様になっています。

セクションのクイック編集

セクションのクイック編集

セクションのクイック編集機能を使えば、セクション内のタイトルやテキスト編集、画像編集などの一元管理をすることができます。

ボタンパーツのクイック編集

さらに、テキストやボタンパーツのテキストや文字の編集も全てこのクイック編集機能を使ってできるので、従来よりも手間が省けて大変便利になりました。

セクションの複製

他にもクイック編集機能でレイアウト調整やセクションの複製もできるので、ぜひ使ってみてください。

ページ背景の設定

ページ背景についてですが、従来はセクションという概念がなかったので、ページ背景に画像を設定して、区切りごとにストリップをおいていましたが、このセクションの更に下地になる背景や画像を設定できるようになりました。

ページ背景の設定

ページ背景の設定はサイトデザインから行うことができます。
ここで好きな色や、画像、動画などを選択して編集していきましょう。

背景画像についてもスクロールエフェクトなどの細かい設定ができるので色々試してみてください。

スクロールエフェクト応用テクニック

ここでスクロールエフェクトを使ったちょっとしたテクニックをご紹介します。

背景色の違う二枚の画像

Ctrl+Dもしくは右クリックで複製を選択し、同じセクションを二つ作ります。
さらに上の画像のように形状が同じで背景色の違う画像を二つ用意します。

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

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

まとめ

以上、Wixの新しい機能であるセクションについての解説でした!
ぜひ参考にしてみてください!

動画解説版はコチラ

YouTubeで動画を見る>>

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

Wix Tech Salon

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

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


読んでいただき、ありがとうございます! 下のシェアボタンから感想をシェアして頂くとすごく嬉しいです!^^ 嬉しい感想はRTさせていただきます!