セクションブロック サンプル集

yStandard Blocksのセクションブロックとその他のブロックを組み合わせてできるレイアウトのサンプルを掲載しています。

セクションブロックのマニュアルはこちら▼

セクションを斜め線や波線で区切るサンプル

「区切り線（上）」「区切り線（下）」を使ってセクション上下を斜め線や波線で区切ったサンプル。

区切り線の形状・サイズ・色を選択すると区切り線が表示されます。

PCとモバイルで区切り線の大きさを調整できるなど、ちょっと細かなカスタマイズもできます。

セクションが画面内に入ったらふわっと表示されるサンプル

「アニメーション設定」で「フェードイン」を選択したサンプル。

スクロールによってセクションが画面内に入ったらふわっと表示されます。

アニメーション開始までのタイミング（秒）やアニメーションの速度も調整できます。

画面幅まで広げる機能を使ったサンプル

全幅にしている時に設定できる「画面幅まで広げる」オプションをONにし、セクション内のコンテンツを画面幅いっぱいまで引き伸ばしたレイアウトのサンプル。

セクションの中にはyStandard Blocksのカスタムカラムブロックを追加し、「カラム間の余白(gap)」を0にします。

カラム内にはWordPress標準ブロックのカバーブロックを使い、画像を背景にしカバーブロック内に見出しや説明文などを追加しています。

サンプルのアイコン表示はyStandard Blocksのアイコンブロックを使っています。