サルでき流 WordPressではじめる企業サイトの作り方

第42回 中小企業経営者さんのための企業サイト作り 実践編その②「イマドキのエディタを使いこなす:Visual Composer」

この記事を読むのに必要な時間:およそ 6 分

ページを構成してみよう!

先ほどワタクシ,うっかり,気楽な気持ちで「自由自在に構成してみましょう!」なんて言ってしまいました。だいぶうっかりです。

実はですね,この「Visual Composer」が設定可能なエレメントには,かなりの数がありまして。すべてのエレメントを紹介して覚えて……というのは,正直あまり楽しい時間ではなかったりします。

ということで,今回は「使う機会がありそうで,なおかつ使って楽しいエレメント」に絞ってお話しします。少しばかり「自由自在」とは遠いかもしれませんが,大事なのは「イイね」という感覚をつかむことです。

美味しそうなものからモリモリ食べましょう。

ではでは,サンプル構成はこんな感じ。はい,ドン。

会社情報,的な

会社情報,的な

うん,これくらいならイイですね。複雑すぎることもなく,とは言え,今までの記事の雰囲気と比べてかなりステキな構成になっています。

ではまずこのページを,エレメント単位で色分けしてみます。

4つのエレメントに分かれました

4つのエレメントに分かれました

  1. 画像のエレメント
  2. 文章のエレメント
  3. お問い合わせフォームのエレメント
  4. 地図のエレメント

色分けするとだいぶ見やすくなりますね。ふむふむ,こんな並びですか。

並びがわかったところで,実際にBACKEND EDITORモードで並べてみましょう。こんな手順でやってみてくださいね。

「BACKEND EDITOR」ボタンをポチッとな

「BACKEND EDITOR」ボタンをポチッとな

「+」ボタンか,⁠Add element」ボタンをポチッとな

「+」ボタンか,「Add element」ボタンをポチッとな

「Single Image」エレメントをポチッとな

「Single Image」エレメントをポチッとな

Single Imageエレメントの中身の設定をして……

Single Imageエレメントの中身の設定をして……

Single Imageエレメントがページの中に入りました!

Single Imageエレメントがページの中に入りました!

まずは画像のエレメント,⁠Single Imageエレメント」がページの中に入りました。では,この調子で他のエレメントも入れていきましょう。

  • 文章のエレメント:「Text Blockエレメント」
  • お問い合わせフォームのエレメント:「Contact Form7エレメント」
  • 地図のエレメント:「Google Mapsエレメント」

ポチポチっと

ポチポチっと

4つのエレメントが入りました~!

4つのエレメントが入りました~!

著者プロフィール

カワサキタカシ(かわさきたかし)

元アイ・ビー・エムERPコンサルタント,元アップル教育ソリューション開発者兼営業,他にも様々な経験を経て,人材育成会社『株式会社マイウェイ』を夫婦で起業。現在,同社の取締役兼なんでも担当。

「Webサイト」から「iPhoneアプリ」,「ビジネスサービス」から「会社」まで,『作ること』が好き。そして作る楽しさを誰かに『教えること』も好き。楽しく作る技術を学ぶコミュニティ,『サルでき.jp』をぐーたら管理中。

著書に『iPhoneアプリ開発塾』(技術評論社),『サルにもできるiPhone同人誌の創り方』(飛鳥新社)がある。

株式会社マイウェイ Webサイト
株式会社マイウェイ Facebook
カワサキタカシ Facebook
サルでき.jp


企業サイト作り(運用)にお困りの経営者さま・Webご担当者さま。ワタシ,『企業サイトを楽しく作る(育てる)ためのサポートサービス』もやっております。困り果てて現実逃避の小旅行に出かける前に,是非一度弊社Webサイトまでお気軽にご相談くださいませ。