Wix Studio エディタ:セクションを追加・管理する

読了時間:6分
セクションはすべてのページを構成する要素です。セクションを使用して関連するコンテンツをまとめ、整理され、構造化されたプロフェッショナルなページを作成します。
各ページに必要なだけセクションを追加します。白紙のセクション、もしくはあらかじめデザイン済みでフルカスタマイズ可能なセクションを追加することができます。セクションはブラウザの全幅にまたがり、高さは自由に調整することができます。
この記事では、以下の項目について説明します:
マスターセクションを作成する:
同じセクションを複数のページに表示させるには、マスターセクションとして設定します。

デザイン済みセクションを追加する

デザイン済みの完全にレスポンシブなセクションから選び、サイトやクライアントのニーズに合わせてカスタマイズします。これらのセクションは、どのビューポイントでも見栄え良く表示されるよう構成されています。

デザイン済みセクションを追加する方法:

  1. エディタ左側で「要素を追加 をクリックします。
  2. セクション」をクリックします。
  3. セクションのカテゴリーをクリックし、追加可能なデザインを表示します。
  4. セクションをページにドラッグします。
  5. 必要に応じてセクションをカスタマイズします:
    • 要素をクリックしてコンテンツをカスタマイズする。
    • 背景を変更する。
    • 画像とテキストを独自のものに置き換える。
今後使用するためにデザインを保存する:
エディタでセクションを選択し、「その他のアクション」アイコン をクリックします。次に「アセットとして保存」をクリックすると、要素を追加」パネルの「アセット」タブにこのデザインが保存されます。

空のセクションを追加する

完全に空白のセクションを追加して、一からデザインすることができます。該当するページに移動し、「セクションを追加」アイコン  をクリックします。
キャンバス上のセクション間に「セクションを追加」アイコンが表示されているスクリーンショット。

空のセクションを追加する方法:

  1. エディタで該当するサイトページに移動します。
  2. 該当するセクションの上か下で「セクションを追加」アイコン  をクリックします。
  3. (オプション)複数のセルを含むレイアウトを選択して、コンテンツを整理します。
  4. パーツを追加してセクションのデザインを開始します。
クリックして適用できるグリッドセルのレイアウトを示す、空白の新しいセクションのスクリーンショット

セルを使用してセクションを整理する

セクションにセルを追加して、レスポンシブで構造化されたレイアウトを作成します。要素を別々のセルに配置することで、すべての画面で所定の位置に留まります。レイアウトを選択し、要素をセル内にに移動します。セルはいつでも分割したり、新しく追加することができます。

セクションにグリッドを適用する方法:

  1. エディタで該当するセクションを選択します。
  2. セクション上部の「空白 」ドロップダウンをクリックします。
セクションを選択すると開くツールバーと、利用可能なレイアウトのドロップダウンのスクリーンショット。
  1. 行、列、コラージュなど、レイアウトを選択します。
    ヒント:レイアウトはドロップダウンからいつでも変更できます。要素は移動しません。
  2. 要素を該当するセルにドラッグします。
  3. (オプション)セクションにさらにセルを追加するか、既存のセルを分割します:

ページセクションを並べ替える

サイトの作成中に、コンテンツの構造・構成を変更すべきと判断した場合、セクションの便利な並べ替え・移動機能をいつでも利用することができます。

ページセクションを並べ替える方法:

  1. エディタで該当するセクションを選択します。
  2. セクション上の「その他のアクション」アイコン  をクリックします。
  3. 上に移動」または「下に移動」をクリックします。
「上に移動」と「下に移動」がハイライトされています

セクションを削除する

セクションはいつでも削除できます。セクションを削除すると、すべてのブレイクポイントでページからセクションが削除されます。
注意:
ストア、イベント、ブログなどのアプリを含むセクションを削除することはできません。

セクションを削除する方法:

  1. エディタで該当するセクションを選択します。
  2. セクション上の「その他のアクション」アイコン  をクリックします。
  3. 削除」をクリックします。
代わりにセクションを非表示にしたい場合:
非表示」をクリック現在のブレイクポイントからセクションを非表示にすることができます。非表示にしたセクションは、レイヤーパネルで確認することができ、そこで再度表示することができます。
セクションの「削除」がハイライトされています

お役に立ちましたか?

|