絞り込み条件を変更する
検索条件を絞り込む
有料ブログの投稿方法はこちら

すべてのカテゴリ

7 件中 1 - 7 件表示
カバー画像

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

最後にフッターを作りましょう!フッターの内容は色々ありますが今回はSNSのロゴから移動する設定をします。・Groupフッターを作るContainersにあるGroupをドラッグ&ドロップでGroup理念の下に配置します。Groupフッターとします。Layout  Container layout→Row            Horizontal alignment左から2番目をクリック    Min width 1200px            Make this element fixed-width のチェックを外す    Min height 60px    Make this element fixed-height のチェックを外す            Fit height to content にチェックを入れるAppearance  Background style→Flat color                   Color  #FFFFFF                   Border style-all borders→solid  width 1                   Color  #082747出来ましたか?次はSNSのロゴをフッターに作ります。・SNSのロゴを作る1.SNSのロゴ1個を作るGroup理念の中にVisual elementsにあるIcon をドラッグ&ドロップで配置します。Layout  Width 40px            Make this element fixed-width のチェックをする
0
カバー画像

シニアから始める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なので横並びになります そこで”期間限定!"と"説明文
0
カバー画像

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

Part 3.ではコンテンツを作りました。今回は、店の理念を作ります。その前にコンテンツの製品名を変更するには、設定を変える必要があります。・Part 3.コンテンツ製品の文字を変更しました。製品を枕・マットレス・羽毛布団に変更したら設定も変更します。マットレスと羽毛布団は文字数が増えると2段になります。Text マットレス・羽毛布団とGroup アイコン・製品のLayout  Make this element fixed-widthのチェックを外す            Fit width to contentにチェックをしてください※ボタン”詳細はこちら”をクリックするとそれぞれの製品の詳細ページへ移動 する設定は今回はしません・店の理念TPには理念以外に他社との比較やサービスなどを表示しますが今回は理念にします。↓完成画像1.Group 店の理念を作ります今までのようにGroupの中にGroupを配置するのでは無くGroupは1つにします。左側のContainers Groupをドラッグ&ドロップでコンテンツの下に 配置します。これをGroup 理念とします。Layout  Min width 300px            Make this element fixed-widthのチェックを外す            Min height 250px            Make this element fixed-heightのチェックを外す            Fit height to contentにチェック            Horizonta
0
カバー画像

シニアから始める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 330pxMake 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 300pxMake this element fixed-widthにチェックMin height 270px今は Gr
0
カバー画像

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

・ファーストビューを作るお客様が最初に見る部分です。工夫をして お客様の心をつかめるように作りましょう!ファーストビューはヘッダーの下に配置します。画像をアップロードする時は左側のVisual elementsよりImageとContainersのGroupでできます。今回はGroupを使います。Container layoutはColumnHorizontal alignmentは中央をクリックサイズはMin width 1200px Min Height 600pxとします。Make this element fized-widthのチェックを外してくださいFit height to contentにチェックをしてくださいAppearance→Background styleをImageにしてStatic Imageから画像をアップロードします。ファーストビューの画像上にGroupを置いて帯のようにします。Groupをファーストビュー画像の上に置きます。Static ImageはColumnHorizontal alignmentは中央をクリックサイズはMin width 1200px Min Height 130px Make this element fized-widthのチェックを外してくださいFit height to contentにチェックをしてくださいAppearance→Background styleをFlat color #FFFFFF 60%にすることで透けて見えます。Group帯を画像の中央にするにはGroupファーストビューLayoutのCont
0
カバー画像

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

・画面サイズを決めるbubbleはレスポンシブでPC.タブレット.スマホの対応ができます。今回はPC版をつくりましょう!準備編で開いた画面にある灰色と白のラインをGrid&borders(画面上)で消すことと幅を調整できます。初めはあった方がやりやすいのでこのまま使います。画面をクリックすると黒い部分の「Propety area」(プロパティーエリア)が表示されます。左上にページ名を確認して画面サイズを入力します。Container layoutをColumn(縦)  Presee page widthをFull widthに設定Layoutのwidth(幅)foy Ul builder 1200px Min Height(高さ)3146pxを入力します。これで画面サイズの設定ができました。  ・ヘッダーを作る TPの構成は上からヘッダー・ファーストビュー・コンテンツ(製品)理念・フッターとします。一番上のヘッダーから作りましょう!1.ヘッダーの本体を作る左側ContainersのGroupをドラッグ&ドロップで一番上に置いてくださいLayout→Container layoutをRow              width1200px  Min Height60px             Make this element fixed-widthの             チェックを外す         Fit height to contentに             チェックを入れるAppearance→Style AccributeのDatach style
0
カバー画像

シニアから始めるbubble!TPを作りましょう!準備

・ノーコードツールbubbleを始めましょう!プログラミングの知識がなくてもWebアプリ開発ができるツールです。コードをかかないでドラック&ドロップでできます。私が学んだ順にお伝えします一緒にやってみましょう!今回はTPを作る前のbubbleの登録をします。・アカウント登録1.アカウントを作成しましょう画面にある【Get started for free】をクリック2.メールアドレス.パスワード登録Googleアカウントまたは、メールアドレス&パスワードを設定して【Get started】をクリック3.プライバシーポリシーに同意しますプライバシーポリシーが表示されるので【I agree Bubble’s terms・・・】       をクリックして同意します。4.アンケートに答える利用目的に関するアンケートが表示されます。目的に合った回答を選択 しましょう。 こちらはスキップすることもできます。 スキップする場合は左下の「Next」をクリックします。 5.エディター画面から開始全ての入力が完了すると、エディタ画面から早速アプリ開発を促されます。・チュートリアルに挑戦してみましょう!お疲れ様です。ドラッグ&ドロップに慣れましたか?Part 1からTPを作りましょう!
0
7 件中 1 - 7
有料ブログの投稿方法はこちら