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

Part 2. でファーストビュウまで作りました。今回は、どんな物を扱っているのかを伝えるために3種類の製品を表示します。

・コンテンツグループを作りましょう 

#画像 1

画像のように作りましょう！

※bubbleを始めた時の作品です。見苦しい点もありますが例として

　見てください

1. コンテンツグループのサイズ・レイアウト

ファーストビューの下に左側のContainersにあるGroupを

ドラッグ＆ドロップで置きます。

Container layout→Row(横並び)

Horizontal alignment→中央

Min width 1200px 

Make this element fixed-widthのチェックを外す 

Min height 330px

Make this element fixed-heightのチェックを外す

Fit height to contentにチェック

Appearance  Background style→Flat color 

                   Color→#FFFFFF

このGroupをGroup製品とします。

・Group製品の中に製品の種類を作る

1.製品の種類のGroupを作る

左側のContainars Groupをドラッグ＆ドロップでGoogle製品のなかに

置きます。

Container layout→Column(縦並び)

Vertical alignment→左から2番目(Group製品の縦中央にします)

Width 300px

Make this element fixed-widthにチェック

Min height 270px

今は Group 種類とします。

2.Group 種類の中にアイコン・文字を作る

#画像 1を参考にして作りましょう！

Group 種類の

Padding→Top.Bottom.Left.Rightを10px 

Appearance  Background style→Flat color 

                   Color→#082747

アイコンは左側のVisual elementsからIconをドラッグ＆ドロップで

Group 種類に置きます。

Appearance Icon→hotelで検索  Icon color→#FFFFFF

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

           Height 30px Make this element fixed-heightにチェック

           Paddingは全て 0pxにしてください！

製品の文字は左側のVisual elements Textをドラッグ＆ドロップで

アイコンに下に置いて製品と入力してください

文字の種類はArial サイズは24px(400) B

Color→#FFFFFF

Center the text verticallyにチェック

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

           Min height 20px Fit height to contentにチェック

アイコンと文字製品を横並びにします。

アイコンと文字製品をShift(windows)を押さえて選び右クリック

Google elements in→Row containerをクリック

横並びになりましたか？

アイコンのRight marginを20pxにしてください

アイコンと文字製品のGroupのサイズを

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

Min height 20px Fit height to contentにチェック

↓画像のように出来ましたか？

3.アイコンと製品の下に下線を付ける

下線はGroup アイコン・製品の Border style-bottomでできますが

今回は違う方法で下線を作ります。

左側のVisual elements Shape をドラッグ＆ドロップで

アイコン・製品のしたに置きます。

Appearance Background style→Flat color

                  Color→#FFFFFF

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

           Height 3px Make this element fixed-heightにチェック

           Horizontal alignment→中央

           Group アイコン・製品の Left margin 10pxにします

出来ましたか？やり方は色々あります その時々に合わせて作ってください

4.画像をアップロード

下線の下に左側のVisual elements Image をドラッグ＆ドロップで

置いてください

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

           Height 171px Make this element fixed-heightにチェック

           Horizontal alignment→中央

           Margin Top.Bottom 10px

Appearance Roundness 8px

                  お好きな画像をアップロードしてください

5.ボタンを付ける

最後に”詳細はこちら”をボタンで作ります。

左側のVisual elements Buttonをドラッグ＆ドロップで

Image画像の下に置きます。

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

           Height 33px  Make this element fixed-heightにチェック

           Horizontal alignment→中央

Appearance "詳細はこちら”を入力します。

　　　　　　文字の種類→Arial　文字サイズ 14px(400) 中央 B

                   Background style→Flat color

                   Color→#3A8757(↓画像の赤い矢印のところで変更できます) 

                   Roundness 3px　

・コンテンツGroupを完成する!

上記で作ったGroup 種類を2個コピーします。

Image画像をAppearance Static Imageをクリックして変更します。

均等に配置するには

Group 製品のLayout Container alignment 左から4番目をクリックします。

出来ましたか？

TPのコンテンツ(製品)までできました。

Part.4では店の理念を作ります。

※画像と文字だけでは分かりにくいのでメッセージで質問をしてください