シニアから始めるbubble ! TPを作りましょう Part 5.

あと少しで完成ですね！ 今回は、お客様にお得情報を告知しましょう!

・お客様へのお得情報

1.Groupお得情報を配置します。

何をするか分かりますか？

ContainersにあるGroupをドラッグ＆ドロップでGroup理念の下に配置

します。

Groupお得情報 とします。

Layout  Container layout→Row(横並び)

            Horizontal alignment 左から2番目をクリック

　　　　Min width 300px　Max width 100%

　　　　Min height 150px

            Fit height to contentにチェック

Appearance　Background style→Flat color

                    Color #082747

・Groupお得情報の中に文字を入力

1.文字を配置

Visual elementsにあるTextをドラッグ＆ドロップで

Groupお得情報の中に置いてください

Appearance  "期間限定！”を入力    

　　　　　　 文字種類 Arial  文字サイズ 36px(400)  左側  B

                   Color #FFFFFF

　　　　　    "説明文"を入力

　　　　　　 文字種類 Arial 文字サイズ 18px(400)  左側 B

                   Color #FFFFFF

"説明文”を”期間限定！"の下にします。

Groupお得情報はRowなので横並びになります そこで

”期間限定！"と"説明文"をShiftを押さえて選び右クリック！

Group elements in→Column containerをクリックで

縦並びになりましたか？Group期間限定とします。

Group期間限定にLayout Margins left 100px

                                  Min width 800px　

　　　　                      Min height 60px

2.ボタン”ご予約はこちら”

Visual elementsからButtonをドラッグ＆ドロップで

Groupお得情報の中にある文字の横に配置します。

Layout  Width 200px Make this element fixed-widthにチェック

　　　　Min height 60px

　　　　Vertical alignment 左から2番目

            Margins right 100px

Appearance "ご予約はこちら”を入力

　　　　　　文字種類 Arial  文字サイズ 15px(600) 中央

                  Color #FFFFFF

                  Background style→Flat color

                  Color #082747

                  Roundness 60

出来ましたか？

最後はフッターですね！Part 6.で作りましょう！

※ボタン"ご予約はこちら"をクリックして予約画面へ遷移の説明は

　今回は省きます。