このページではブロックのサンプルとともに、基本的な操作方法も示しておりますのでご参考にしてください。
たくさんのサンプルをご紹介しても消化不良になるかもしれませんので、コンテンツ構築によく使用されるデザインパターンをご紹介しております。
テキストと単体画像
見出しです
テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです テキストです
直接編集できます。
下は単体画像です。
画像をクリックすると下のようにフローティングメニューが出現しますので、「置換」で画像差し替えできます。
全幅パララックス
背景画像を固定化することで視差効果を可能とします。
メインビジュアルに活用できます
カラム
カップ猫
見出しとテキストは直接編集できます。
PCでは横三列、スマホでは縦一列にレスポンシブ動作します。
モップ猫
画像をクリックすると下のようにフローティングメニューが出現しますので、「置換」で画像差し替えできます。
アップ猫
アスペクト比もサイズも異なる画像を同じサイズで表示するには、三つの画像を下のように「高さ=285」「伸縮=cover」に設定することで実現できます。
メディアとテキスト
PCでは横配置、スマホでは縦配置にレスポンシブ動作します。
画像をクリックすると下のようにフローティングメニューが出現しますので、「置換」で画像差し替えできます。
テキストは直接編集できます。
フローティングメニューの中央付近のコンセントプラグのようなアイコンで、画像の位置を切り替えできます。
▲の「メディアとテキスト」を複製したブロック
PCでは横配置、スマホでは縦配置にレスポンシブ動作します。
画像をクリックすると下のようにフローティングメニューが出現しますので、「置換」で画像差し替えできます。
テキストは直接編集できます。
フローティングメニューの中央付近のコンセントプラグのようなアイコンで、画像の位置を切り替えできます。
■上のようにブロックを複製したい場合は以下のように操作してください。
- 複製元のブロックの三点リーダーをクリック
- フローティングメニューが出現
- 「複製」をクリック
- 複製されたブロックが生成される
■ブロックの表示・非表示を簡単に行える方法を紹介します。
複製の操作と同様に目的のブロックの三点リーダーからフローティングメニューを表示させます。
5.の「非表示」をクリックすると、そのブロックが非表示状態になりメニュー項目は「表示」という表記に切り替わります。反対に「表示」をクリックすると、そのブロックが表示状態になりメニュー項目は「非表示」という表記に戻ります。
作成中のブロックを見せたくない場合や、そのページに置いておいて再利用したい場合などに非常に便利です。