今回は，設置時にエレメントの中身を設定（文章を入れたり，地図コードを入れたり）しましたが，もし，設置した後に中身の設定，及び変更をしたくなった場合は，各エレメントの上にマウスを持っていってください。

左から，「⁠エレメントの場所移動」「⁠編集」「⁠コピー」「⁠ゴミ箱」のアイコンです。中身の設定をするときは，「⁠編集」アイコンをクリックします。

さてさて，無事サンプルと同じような構成になりましたか？

……え？全然ダメ？特に中段がダメ？

おっと，説明が後回しになってしまいましたね。

そうなんです。見ての通り，エレメントを追加していくと，エレメントは「縦方向（行方向⁠）⁠」に並んでいきます。

ですが，今回のサンプル構成のように，時にはエレメントを「横方向（列方向⁠）⁠」に並べたい場合が出てきます。

そんな時はどうするかというと，「行エレメント」なるものを使います。

この行エレメント，一見中身がないタダの箱なのですが，実は構成上，非常に重要なエレメントでして。

例えば，「⁠列を作りたい場合」は，「⁠行エレメント」が担当します。

こんな感じに。

こうやってできた列に，エレメントをドラッグ＆ドロップで入れていけば，列を作ることができるのです。

ちなみに，行エレメント以外のエレメントを新規に設置する際には，まず自動的に「行エレメント」が作られ，「⁠その中に対象のエレメント」が作られます。もちろん，その行エレメントを直接分割してもOKです。

今回はわかりやすさのために，あえて「行エレメント」を単独で追加する形でやってみました。

もうひとつ。特に列を作る必要がない場合は，既にある行エレメントの上下にある「＋」ボタンからエレメントを作ることで，ひとつの行エレメントの中に複数のエレメントを並べることが可能です。

逆に，行エレメントの中に行エレメントを入れ子にすることも可能です。

テーマにもよるのですが，行エレメント自身の設定で，「⁠行の上下の余白」や「行が表示される時のアニメーションの有無⁠」⁠，「⁠行の背景」などを設定できるようになっています。

そのため場面によっては，行をより細かくわけて管理するほうが良い場合もありますし，逆に管理を単純にするために，行をひとつで管理するほうが良い場合も出てきます。

……ムズカシイじゃないですか。楽しく無いじゃないですか。

えーと。まあ，しばらくは「細かいことは気にしない」で大丈夫です！どういう構成であっても，見た目上ちゃんと表示ができていれば，第1段階はクリアですのでね！

では，サンプルの構成通りに，横方向にもエレメントを並べてみましょう。正しく構成できたら，ページの公開をどーぞ。

ちなみに，ちょっとおまけの話ですが，今回導入しているイマドキのテーマ「The7」は，PCから見た時，タブレットやスマホから見た時，それぞれのケースで自動的に構成を組み替えて，見やすいWebサイトにしてくれる，「レスポンシブデザイン」という仕組みで作られています。

試しに，今作ったばかりの固定ページを，スマホ表示に切り替えてみましょう。ブラウザの横幅をグーッと狭くしてみてください。

おおお，自動的に構成が切り替わりましたよ。

なんで今ココで，こんな話をしているかと言うとですね。コンテンツエリアにおける構成の自動切り替えルールは，エレメントの並び順と密接に関わっているからなのです。

スマホサイズになってしまうと，PCサイズと比べて画面が狭くなりますので，エレメントが横に並ぶスペースが無くなってしまいます。

その結果，すべてのエレメントが「縦」に並び替わります。

その時のエレメントの並び順は，「⁠まずは行の並びを前提にして」「⁠同じ行の中で，列が分かれている場合は左から右」となります。

余裕が出てきたら，そのあたりも意識しつつ，構成を組んでみてくださいね。サンプルの構成をいろいろイジってみて，どんな違いが出るのか見てみるとわかりやすいと思います。

……以上，ここはおまけでした。

最初の頃は思った通りに構成が組めなくてゲンナリすることもあるかもしれませんが……スマホまで含まてピシっと組み上げられた時は，そりゃあもうモノスゴイ達成感が味わえます。自分のWebサイトがキラッキラ輝いて見えます。

その，「⁠うっひょー！」な瞬間を目指して，ぜひぜひ「Visual Composer」と，「⁠エレメント」の世界に挑戦してみてくださいね！