ウィジェット > パネル は、エブリサイトでページを構成するための基本となるウィジェットのカテゴリです。

テキストや画像、ボタンなどの部品を配置したり、レイアウトを調整したりするために利用します。


この記事では、パネルカテゴリに含まれる各ウィジェットの概要や利用シーンを紹介します。



シンプルパネル

公式ドキュメント:

https://docs.everysite.net/widget/panel/simple_panel.html


最も基本的なパネルウィジェットです。

他のウィジェットを配置するためのコンテナとして利用でき、さまざまな画面で利用されています。


活用例

  • トップページ

  • お知らせ表示

  • メニュー画面

  • 説明文の掲載

  • 各種コンテンツの配置


サンプル



参考記事



影付きパネル

公式ドキュメント:

https://docs.everysite.net/widget/panel/shadowed_panel.html


影付きのデザインを持つパネルです。

カード型のレイアウトを簡単に作成できます。


活用例

  • 商品紹介

  • サービス紹介

  • カード型メニュー

  • おすすめコンテンツ表示


サンプル


参考記事



画像背景パネル

公式ドキュメント:

https://docs.everysite.net/widget/panel/image_panel.html


背景画像を設定できるパネルです。

画像を活かした印象的なページを作成できます。


活用例

  • トップページのメインビジュアル

  • キャンペーンページ

  • ランディングページ

  • バナー表示


サンプル


参考記事



折りたたみパネル

公式ドキュメント:

https://docs.everysite.net/widget/panel/foldable_panel.html


クリック操作で表示・非表示を切り替えられるパネルです。

画面をすっきり見せながら多くの情報を掲載できます。展開時はアコーディオンのように、下に配置される要素を押し下げて(重ならずに)表示されます。


活用例

  • FAQ

  • よくある質問

  • 規程・ルール集

  • 詳細情報の表示


サンプル


参考記事



ドロップダウンパネル

公式ドキュメント:

https://docs.everysite.net/widget/panel/dropdown_panel.html


クリック操作で表示・非表示を切り替えられるパネルです。

画面をすっきり見せながら多くの情報を掲載できます。展開時はドロップダウンのように、下に配置される要素に重なって表示されます。


活用例

  • FAQ

  • よくある質問

  • 製品ラインナップ紹介

  • 操作ガイド・ヘルプページ


サンプル


参考記事



空白パネル

公式ドキュメント:

https://docs.everysite.net/widget/panel/empty_panel.html


余白を確保するためのパネルです。

レイアウト調整や画面の見やすさ向上に利用します。


活用例

  • ウィジェット間の余白調整

  • レイアウト調整

  • スペーサーとして利用


サンプル


参考記事



まとめ

やりたいこと

おすすめウィジェット

基本的なページレイアウトを作りたい

シンプルパネル

カード型のデザインを作りたい

影付きパネル

背景画像を使って印象的なページを作りたい

画像背景パネル

FAQや詳細情報を折りたたんで表示したい

(下に配置された要素を隠さず展開)

折りたたみパネル

FAQや詳細情報を折りたたんで表示したい

(下に配置された要素に重ねて展開)

ドロップダウンパネル

レイアウトの余白を調整したい

空白パネル



以上、パネルカテゴリのウィジェット別、利用用途のまとめでした。

エブリサイトのドキュメントページサポートページもぜひご活用ください。