この投稿はWebflow社が提供する「Add Elements panel」の内容を元に作成しています。
引用元：https://university.webflow.com/lesson/add-elements-panel
日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。
エレメント追加パネルでは、Webflowのサイト構築で使用する様々な要素（エレメント）をメインキャンバスに配置していくことができます。
パネル上はカテゴリごとに要素が整理されて表示されています。例えば、タイポグラフィではテキストに関連するすべての要素が表示されています。フォームのカテゴリには、フォームの作成に使用できるすべての要素が表示されています。
エレメント追加パネルに表示されているカテゴリは次のとおりです。
エレメントパネルからメインキャンバスに要素を追加するには、次の3つの方法があります。
クイック検索（CMD＋E/CTRL＋E）を使用して要素をメインキャンバスに追加することもできます。
エレメント追加パネルで追加したい要素をクリックすることでメインキャンバスに要素を追加することができます。
追加する要素が最初に表示される場所は、選択した要素に関連します。したがって、選択した要素がテキスト、メディア、またはボタン要素である場合、追加された要素は選択した要素の横または下に表示されます。
最初にdivブロックやコンテナーなどの親要素を選択した場合、新しい要素がこの要素内の子要素として追加されます。
要素が選択されていない状態でエレメント追加パネルから要素をクリックして追加すると、Body要素内のページ最下部に要素が追加されます。
追加した要素はドラッグで任意の場所に配置できます。
エレメント追加パネルから要素を追加する2つ目の方法は、要素をメインキャンバスにドラッグ＆ドロップする方法です。
要素をドラッグすると、配置先の親要素と配置場所が青色で表示されます。
右側にナビゲーターパネルが開いている場合は、ドラッグしてキャンバス上で再配置するときに、この要素を配置しようとしている場所を正確に確認することもできます。
ページに要素を追加する3つ目の方法は、ナビゲーターパネルを使用する方法です。
ナビゲーターパネルでは、ページ構成を確認できます。そのため、要素をエレメント追加パネルから正確にナビゲーターパネルにドラッグ＆ドロップできます。
キャンバス上に要素を追加すると、その要素は兄弟要素と関連して配置されます。このデフォルトの位置は、追加された要素とその兄弟要素の両方の表示設定によって決まります。
つまり、デフォルトの表示設定が「ブロック」の要素を追加する場合、その要素はドラッグ先の周囲の要素の上または下の行に表示されます。
表示設定が「インラインブロック」である要素を追加する場合、その要素はブロック要素の下や上、または他のインラインブロック要素の横に配置されます。エレメント追加パネル内の要素は、次に挙げる「インラインブロック」要素以外、すべて「ブロック」要素です。
インラインの表示設定を持つのは、唯一テキストリンクのみです。インライン要素の配置は、インラインブロック要素と同様に動作します。
また、配置後はほとんどの要素の設定をスタイルパネルから変更できます。
いかがでしょうか。
当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営