ダッシュボードに戻って新しいウェブサイトを作成するにはWをクリックしてください!
だから、ええ、のWebflowに新しいしていますか?のは、中にダイビングしてみましょう。

ビジュアルWebデザインガイド

この視覚的なガイドでは、Webflowの内部で視覚的にそれらを実装することが重要応答Webデザインの概念と方法を説明します。 

#1ボックスモデル

Webサイトの構造を理解します

このページのすべての要素は他のブロックの中のすべてのブロック(別名「ボックスモデル」)です。ウェブ要素をドラッグすると、1つのブロックからそれらをドラッグして別のものにそれらをドロップします。つまり、HTMLがどのように動作するかです!

スーパーPLAN

75ドル/月

20人以上の従業員を持つすべてのビジネスに最適。 

  • 500ギガバイトのストレージ
  • 100万  ページビュー
  • 20共同研究
  • 50ソーシャルネットワーク
  • プレミアムサポート
あなたは何を参照してください。
注:  あなたが以下の概念をこのような何かを設計する方法を理解します。
何  ブロック  これは、で作られています
DIVブロック
DIVブロック

見出しH2超PLANを

テキストブロックの 75ドル/月

パラグラフ 20人以上の従業員を持つすべてのビジネスに最適です。 

リスト
  • リストアイテム
    500ギガバイト  のストレージ
  • リストアイテム
    100万  ページビュー
  • リストアイテム
    20  共同研究
  • リストアイテム
    50  ソーシャルネットワーク
  • リストアイテム
    プレミアム  サポート

それを自分で試して

この段落をドラッグ...

制限なくすべての機能。すべてのあなたが食べることができます。(これは、段落要素です)

ヒント:  クリックして上記の段落要素をドラッグし、右の価格の下にドロップします。また、(ALTを保持)ドラッグ中にコピーし、コピー&ペースト(Ctrl + C、Ctrl + V)のようなショートカットを使用し、(キーの削除)削除することができます。 
紫のブロックに...

スーパーPLAN

75ドル/月
情報:  これは、HTMLやWebの構造がどのように動作するかである-の要素が互いに下または互いの内部でスタック。それは、流体と反応するウェブサイトを構築するための最良の方法です。
#2レイアウト要素

基本的なレイアウト要素

左上隅にある[+]アイコンをクリックして、あなたのウェブサイトに要素を追加します。セクション、コンテナと列 - 以下のWebデザインの中で最も基本的な構成要素のいくつかはあります。 

セクションでは、ボディ(ウェブサイトのキャンバス)に追加した場合、ブラウザウィンドウの幅の100%を占めている。
これは、ウェブサイトの大きな水平方向のセクションのために素晴らしいことです。

section要素

コンテナは、ブラウザの中央に中心960pxブロックです。通常、ほとんどのWebサイトのコンテンツは、それが中心だように、コンテナの内部に追加されます。コンテナは、通常、身体または第要素に追加されます。

コンテナエレメント

列を追加すると、ユニークなウェブサイトのレイアウトを構築するための最速の方法です。あなたが別のデバイスで必要な列の数を編集するには、単に要素の設定にアクセスするには、右上にある歯車のアイコンをクリックしてください。

応答列
#3 CSSを使用した設計

あなたのエレメントのスタイル

要素を選択し、右のスタイルパネル(ブラシアイコン)にクラスを追加します。このパネルでは、テキストやフォントの色、行の高さ、グラデーション、枠線、影、などのようなグラフィックスタイルを追加することができます。ビジュアルWebデザインは、右のコードよりもずっと多くの楽しみですか!

ボタンのデザイン例
カートに入れる➜
それを自分のスタイル
ボタンテキスト➜
ヒント:  このボタンは、すでにいくつかの基本的なスタイルを持つクラス"ボタン"があります。ボタンを選択し、グラデーションを追加しようとすると、境界線、コーナーを丸め、内部/外部の影、状態のスタイルを合わせると、ホバースタイルに移行-すべてのスタイルパネルを使用しました。
あなたは何を作成
ボタンテキスト➜
「ボタン」クラスを適用
ボタンのテキスト
ヒント:  Webデザインでは、それらが同じに見えるように多くの要素にクラスを適用することができます。[スタイル]パネルの上部にある[+]をクリックし、そのクラスを見つけるために「ボタン」を入力することで、上記のリンクにスタイル"ボタン"クラスを適用します。 
フォームのデザイン例

ありがとう!

あなたのロック私の靴下!

おっと!フォームを送信しながら、何かが間違っていた:(

それを自分のスタイル

ありがとう!あなたの投稿は受信されました!

おっと!フォームを送信しながら、何かが間違っていた:(

ヒント:  最初に(両方のフィールドに同じクラスを適用)テキストフィールドやボタンのクラスを作成します。そして、境界線のスタイル、背景色を変更し、ホバー&押さ状態のスタイルを追加します。設定パネルで見つかったフォーム要素、(右上にある歯車のアイコン)は、「成功」状態をスタイルすることを忘れないでください。 
タイポグラフィ例

レイクウッドスタウト

レイクウッド、コロラド州のダークビール

伝説のスタウトは、コロラド州レイクウッドの街、山の男と彼の最も最愛のものの美しい結婚から生まれました。山の男はまた、彼の斧と彼のシングルショットレミントンライフルを愛したが、彼は自分の町を愛していない限り。彼は彼女flowy川や雄大な山々を夢見ていました。そこで彼は、彼女の後彼の最大のスタウトの名前。このように栄光のスタウトは、山の人の心の外に生み出されました。

"私は私の美しい都市のための私の永遠の愛を表現するために、この栄光のビールを細工されました。」

- マウンテンマン

それを自分のスタイル

レイクウッドスタウト

レイクウッド、コロラド州のダークビール

伝説のスタウトは、コロラド州レイクウッドの街、山の男と彼の最も最愛のものの美しい結婚から生まれました。山の男はまた、彼の斧と彼のシングルショットレミントンライフルを愛したが、彼は自分の町を愛していない限り。彼は彼女flowy川や雄大な山々を夢見ていました。そこで彼は、彼女の後彼の最大のスタウトの名前。このように栄光のスタウトは、山の人の心の外に生み出されました。

"私は私の美しい都市のための私の永遠の愛を表現するために、この栄光のビールを細工されました。」

- マウンテンマン

ヒント:  先に行くし、背景にカスタムタイポグラフィとスタイルを追加します。クールヒント:親ブロックにタイポグラフィーのスタイルを追加すると、その子のテキスト要素の全ては、これらのテキストスタイルを継承します。CSSでは、この現象は「カスケード」と呼ばれています。 
#4 CSSでレイアウト

CSSで構築するウェブレイアウト

クラスを追加し、位置のプロパティを編集する最初の要素の位置を変更するには、要素にスタイルを追加することに似ています。あなたはマージン、パディング、ディスプレイ、フロート、オーバーフロー、および位置について学びます。 

マージン&パディング例
ニュース速報

連邦エージェントがGunshopを襲撃、武器を探します

店のオーナーのスティーブWitmereは、以前は闇市場のバズーカ取引のため逮捕しました。ロシアマフィアの関与を​​告白。

gunshopで見つかった多数のバズーカのうち少なくとも万ドルの価値が不正に取得した絵画の数万人でした。これらのダムの絵画の支払いに重い価格のthats。

説明:  マージンとパディングスタイルパネルの位置パレットで見つけることができます。追加証拠金は、ブロックの外にスペースを追加し、パディングを追加すると、ブロックの内側にスペースを追加します。
自分を間隔に追加
ニュース速報

連邦エージェントがGunshopを襲撃、武器を探します

店のオーナーのスティーブWitmereは、以前は闇市場のバズーカ取引のため逮捕しました。ロシアマフィアの関与を​​告白。

gunshopで見つかった多数のバズーカのうち少なくとも万ドルの価値が不正に取得した絵画の数万人でした。これらのダムの絵画の支払いに重い価格のthats。

ヒント:  メイングレーブロック(親要素)のすべての側面にパディングを追加することで起動します。そして、個々のテキスト要素(子要素)間の間隔を追加するには下余白を追加します。ヒント:また、反対側に適用するために、すべての側面とALTに適用するマージン/パディングコントロールを使用しながらShiftキーを押したままにします。
「表示:ブロック」の例

この見出しが表示されるように設定されています。ブロックを

この段落は表示に設定されています:ブロック。だから、親ウィンドウの幅を満たし、他のブロックの上にスタックします。 

ブロック:ディスプレイとボタンの表示とボタン:ブロックこのリンクを表示するように設定されている:ブロックこのリンクを表示するように設定されている:ブロック
説明:  ブロックに要素の表示設定を設定するには、彼らは互いの上にスタックにし、100%に、その親ブロックの幅を記入します。ほとんどの要素は、実際には、デフォルトでこの設定を持っています。 
自分を:彼ら「一括表示」作ります
これはボタンである。これは、ボタンで表示されているリンク:デフォルトによるインラインリンクが表示されている:インラインデフォルトで
ヒント:  これらの要素を選択します(一部はインラインブロックであり、一部はインラインである)、それらを表示します、彼らは互いの上に積み重ねるようにブロック。 
「ディスプレイ:インラインブロック」の例
説明:  インラインブロックに設定する要素の表示を設定するには、ブロックの幅は、その内部のコンテンツの幅に適合するようになります。すなわち、それらの内容が十分に小さい場合には、互いに隣に積み重ねることができることを意味します。あなたは上のボタンをコピー&ペーストし、それがどのように動作するか確認するために内のテキストを編集することができます。
彼らは自分自身をインラインブロック作ります
ダウンロード[編集]を
ヒント:  上記の要素を選択し、それらを表示させる:彼らは隣同士に積み重ねるようにインラインブロック。あなたは画像がボタンに次のスタックていることがわかります。ヒント:(:デフォルトでブロック本部ブロックが表示されているため)別々の事業部のブロックにボタンや画像を削除すると、彼らは互いの上にスタックするようになります。
例をフロート

私たちのニュースレターに参加

ありがとう!あなたの投稿は受信されました!

おっと!フォームを送信しながら、何かが間違っていた:(

説明:  設定画面:インラインブロックまたはフローティング(この例では)側の要素側をスタックする最も一般的な方法です。この例では、私は何かをフロートする方法を紹介します。 
それを自分でフロート

私たちのニュースレターに参加

ありがとう!あなたの投稿は受信されました!

おっと!フォームを送信しながら、何かが間違っていた:(

ヒント:  まず、テキストフィールドを選択し、それがフロートにする:左、それに割合幅(例:60%)を得ました。左だけでなく、別のパーセンテージの幅(例:40%)を設定します。そして、フロートボタンを設定ので、両方を100%まで追加。それが並んでスタックする任意の要素を強制的に手動の方法です。 
絶対位置の例

ジョーのマイカップ

これは、写真のキャプションテキストです。

説明:  あなたは要素の絶対位置を設定する場合は、その親ブロック内の任意の場所にそれを配置することができるでしょう。の内側に位置するためにどの親選択するには、相対的に親要素の位置を設定します。注:エレメントは、彼らが他の要素の上に浮い絶対配置されているとき。
それを自分のスタイル

ジョーのマイカップ

これはジョーの私のお気に入りのカップのための写真のキャプションです。

ヒント:  第一の画像ラッパー要素を選択し、相対的にその位置を設定します。次の画像にドラッグし、キャプションを選択することは絶対にポジションだし、7プリセットを選択します。正しい場所におすすめバッジを配置するには、2番目のプリセットを選択し、それを手動で配置します。
#5  スタイルのカスケード

カスケーディングスタイルを利用します

あなたは簡単に互いの上に追加のクラスを追加し、それらのクラスに異なるスタイルを追加することで、要素のバリエーションを作成することができます。我々は、ボタンのさまざまなバリエーションを持つ場合には、以下の例をご覧ください。 

NORMALボタン
ボタンを自分でデザイン
グリーンボタン
赤いボタン
ヒント:  第二ボタンを選択して、別のクラスを追加するために、次のクラスに[+]をクリックします。あなたは"グリーン"それを呼び出すことができます。そして、それに異なるスタイルを与えます。これらのスタイルは最初のクラスの基本スタイルをオーバーライドします。その後、赤いボタンを作成します。 
#6メディアクエリー

異なるデバイスのための設計

Webflowのでは、まずデスクトップデバイスのためのあなたのウェブサイトを設計し、(上部バーのデバイスアイコンにアクセス)、モバイルデバイス上の変更を行います。モバイルデバイスのスタイルを追加すると、デスクトップのスタイルを上書きします。 

応答見出し例

これは、モバイルデバイスで小さくなって、いくつかの見出しテキストです。

説明:  この見出しは、デスクトップ上で、本当に大きいですが、私たちは、モバイルデバイス上で小さくなるようにしたいです。文字サイズや行の高さが減少したことを確認するために上部のバーにあるデバイスをクリックします。
それを自分で解決

この大きな見出しテキストは、モバイルデバイスに小さくなることを確認します。

ヒント:  タブレットデバイス上でこの見出しを選択して、フォントサイズや行の高さを小さくします。電話景観と電話ポートレートデバイスについても同じ操作を行います。あなたがいることがわかります 
応答ボタンの例
ボタンのテキスト
説明:  このボタンは、それがマウスカーソルでクリックするのは簡単ですので、デスクトップ画面に小さいことが意図されています。指でタップし、それは簡単だように、私たちは、モバイルデバイス上でそれを大きく作ら
ボタンのテキスト
それを自分で解決
ヒント:  タブレットデバイスに移動し、ボタンのパディングを増加させます。あなたはそれを行うときには、デスクトップ上に設定され、以前のスタイルを上書きし、タブレットの下のすべてのデバイスにカスケードダウンします。 
応答列例

コラム1

これはDIVブロックの内部テキストです。

コラム2

これはDIVブロックの内部テキストです。

コラム3

これはDIVブロックの内部テキストです。
説明:  Webflowの中の列の要素は、デバイスごとにカスタマイズすることができます。デフォルト列によってデスクトップに隣同士にスタックし、モバイルデバイス上で互いの上に積み重ねます。 

コラム1

これはDIVブロックの内部テキストです。

コラム2

これはDIVブロックの内部テキストです。

コラム3

これはDIVブロックの内部テキストです。
それを自分で解決
ヒント:  (あなたもそれを見つけるために、右側の一番下にある階層リンクバーまたはナビゲータパネルを使用することができます)上記の列または行の要素を選択は、(右上隅にある歯車のアイコン)を要素の設定に移動して確認してください列は、モバイルデバイス上でスタック。
#7リソース

さらにヘルプが必要ですか?

あなたはそれを得ました!毎日のWebflowとウェブデザインを学ぶ人々のトンがあります。開始するのに最適な場所は、ビデオチュートリアルです。そして、サポートセンターやコミュニティフォーラムへの上に向かいます。 

ビデオチュートリアル

tutorials.webflow.com

フォーラム

forum.webflow.com

ヘルプドキュメント

help.webflow.com

(あなたは、プレビューモードに移行して上記のリンクをクリックすることができます - 左上隅にある目のアイコンを)