ご利用までの流れ
STEP
お問い合わせ
説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。
STEP
ヒアリング・ご提案・お見積り
説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。
STEP
ご契約
説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。
STEP
初期設定
説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。
STEP
ご利用開始
説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。
目次
パーツ概要
企業のコーポレートサイトで、自社サービスの導入・ご利用までの流れを紹介するセクションで使うことを想定したシンプルな「フロー」ブロックです。
SWELLのステップブロックを使うと、上のような最低限整ったデザインを手軽に表現できます。
各工程の説明テキストが入る箇所の背景の見た目は、SWELLのボックス装飾機能に用意されているスタイル「スティッチ」を使ってます。
使用するSWELLブロック
・ステップブロック
コードエディターにコピペして使えるコード
<!-- wp:paragraph {"align":"center","fontSize":"huge"} -->
<p class="has-text-align-center has-huge-font-size"><strong>ご利用までの流れ</strong></p>
<!-- /wp:paragraph -->
<!-- wp:loos/step -->
<div class="swell-block-step" data-num-style="circle"><!-- wp:loos/step-item {"stepLabel":"STEP","theNum":"01"} -->
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main" data-num="01"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">お問い合わせ</div><div class="swell-block-step__body"><!-- wp:paragraph {"className":"is-style-stitch"} -->
<p class="is-style-stitch">説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item -->
<!-- wp:loos/step-item {"stepLabel":"STEP","theNum":"02"} -->
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main" data-num="02"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">ヒアリング・ご提案・お見積り</div><div class="swell-block-step__body"><!-- wp:paragraph {"className":"is-style-stitch"} -->
<p class="is-style-stitch">説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item -->
<!-- wp:loos/step-item {"stepLabel":"STEP","theNum":"03"} -->
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main" data-num="03"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">ご契約</div><div class="swell-block-step__body"><!-- wp:paragraph {"className":"is-style-stitch"} -->
<p class="is-style-stitch">説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item -->
<!-- wp:loos/step-item {"stepLabel":"STEP","theNum":"04"} -->
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main" data-num="04"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">初期設定</div><div class="swell-block-step__body"><!-- wp:paragraph {"className":"is-style-stitch"} -->
<p class="is-style-stitch">説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item -->
<!-- wp:loos/step-item {"stepLabel":"STEP","theNum":"05"} -->
<div class="swell-block-step__item"><div class="swell-block-step__number u-bg-main" data-num="05"><span class="__label">STEP</span></div><div class="swell-block-step__title u-fz-l">ご利用開始</div><div class="swell-block-step__body"><!-- wp:paragraph {"className":"is-style-stitch"} -->
<p class="is-style-stitch">説明テキストが入ります。説明テキストが入ります。説明テキストが入ります。</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:loos/step-item --></div>
<!-- /wp:loos/step -->
