Wix ヘルプ

Wix Harmony エディタ:セクションの背景をカスタマイズする

7分
セクションの背景はページの雰囲気を設定し、訪問者の視線を誘導したり、スクロールする際の訪問者の体験を向上させることができます。サイトのブランドに合わせて細部まで調整したセクションをデザインしましょう。ライブラリから単色、画像、動画を選択し、奥行きを与えるためのエフェクトを適用することができます。
Wix Harmony エディタで「背景を変更」オプションが表示されたスクリーンショット
参考:
さまざまな既製のレスポンシブ対応セクションから選択して、デザインにかかる時間を節約しましょう。新しいセクションを追加する際は、すべてのセクションを表示して、必要なテンプレートを選択することができます。

セクションの背景を変更する

セクションの背景を変えて、ページのデザインと操作性をすばやく変更します。スタイルに合わせて色、画像、動画を選択して、注目を集めましょう。

セクションの背景を変更する方法:

  1. エディタに移動します。
  2. 該当するセクションを選択します。
  3. 「背景を変更」をクリックします。
  4. 背景の種類を選択し、必要に応じてカスタマイズします:
モバイル表示に関する注意点:

モバイルでは、デスクトップに影響を与えることなく、セクションの背景を別の単色またはグラデーションに変更することができます。画像と動画の背景は共有されているため、デスクトップからのみ変更できます。


セクションの背景をアニメーション化する

スクロールアニメーションの背景を追加して、セクションに動きを与えましょう。訪問者がページを上下に移動する際、アニメーションは動的で魅力的なエフェクトを生成します。「パララックス」、「3D」、「ズーム」などのオプションを試して、スタイルに合わせて設定を調整してください。

セクションの背景をアニメーション化する方法:

  1. エディタに移動します。

  2. 該当するセクションを選択します。

  3. 「アニメーション」アイコン  をクリックします。

  4. アニメーションを選択します。

  5. (オプション)「カスタマイズ」をクリックして、アニメーション設定を微調整します:

    • スクロール時のプレビュー:「プレビュー」アイコン  をクリックし、訪問者がスクロールした際にアニメーションがどのように再生されるかをプレビューします。

    • ズーム:スライダーをドラッグして、どの程度ズームインまたはズームアウトするかを調整します。

    • 方向:利用可能なオプションを使用してアニメーションの方向を調整します(例:時計回りや反時計回り、イン / アウトなど)

    • 速度:スライダーをドラッグして、アニメーションの動きを調整します。

    • スケーリング:スライダーをドラッグして、背景がどの程度フェードバックするかを決定します。

    • 角度:アニメーションの回転角度を設定します。

    • ストレッチ:アニメーションの奥行きと 3D 感を設定します。

    • アニメーションタイプ:アニメーションがフェードインまたはフェードアウトするかを選択します。

注意:
  • 利用可能なアニメーションは、セクションションに追加する背景の種類(色、画像、動画)によって異なります。
  • カスタマイズ設定は、選択したアニメーションによって異なります。