WORDPRESS 最強のエディタ ビジュアルコンポーザー Visual Composer

schedule2016年5月10日update2019年3月26日

folder_openWeb制作

今日はWORDPRESS最強のビジュアルエディタ「Visual Composer」をご紹介します。

Visual ComposerはWORDPRESSで最も普及したページビルダーで、世界の200万サイト以上で使用されています。

ドラッグアンドドロップのページビルダーを使用して簡単にレイアウトを作成！
コーディングスキルはほとんど必要ありません！

関連記事：Visual Composer 基本操作と使えるテクニック

Visual Composer: Page Builder for WordPress

エディタといってもこれは主に「固定ページ」を作るのに使用します。

手作業でレイアウトをコーディングするときにどれくらいの時間を費やしているかに気付きましたか？
もうショートコードやCSSで試行錯誤する必要はありません！

購入とダウンロードはcodecanyonから

インストール方法は多のプラグインと同じなので割愛します。

日本語化

元々日本語の言語ファイルが入っているのですが、デフォルトだと日本語にならない場合があります。

そんな時はプラグインフォルダにあるランゲージファイルをリネームします。

wp-content/plugins/js_composer/locale

ここにあるjs_composer-ja_JP.mo　を　js_composer-ja.mo　に変更するだけです。

デフォルト

日本語化後

でも日本語化率は約60％程度ですかね。　私はデフォルトのまま使っていますが、お好みでどうぞ。

このビジュアルコンポーザーの優れた所は、ドラッグアンドドロップで要素の入れ替えが出来たり、視覚的に直感で操作できる優れた操作性です。

基本の使い方

それでは基本の使い方を見ていきましょう。

まずは固定ページを新規作成します。

タイトルの下にある「BACKEND EDITOR」を押します。

するとこんな画面に変わります。

まず初めにやることは「ROW」を追加する事です。

「Add Element」を押します。

※ROWはdivと同じブロック要素です。かんたんに言えば入れ物です。

ROWをクリックして追加します。

ROWの中には更に1つだけ子要素のROWを作る事が出来ます。

そしてROWの中にある横の構成要素が「Column」（カラム）です。

こんな感じでROWの中にROWを作ってTextBlockを追加していきます。

VisualComposerで作ったROWのページ

特に何もしなくてもレスポンシブデザインになっていますね。

こんなパララックスエフェクトも簡単に実装出来ます。

次回はこのパララックスエフェクトのつくり方をご紹介します。

関連記事：Visual Composer 基本操作と使えるテクニック

関連記事

2017年7月22日

WPBakery Page Builder(Visual Composer )基本操作と使えるテクニック

2026年1月26日

会員制動画配信サイトの構築
月額SaaSに頼らない自社所有のオンラインレッスンシステム制作実績

2017年11月24日

ショッピングカートのメリットとデメリット

2025年12月20日

【制作実績】検索上位を独占！大崎市「古川きたまち内科クリニック」様の新規HP制作｜仙台・ホームページ制作のSEO対策事例

2025年12月21日

タイヤ交換の繁忙期も電話応対ゼロへ！月1,000件の予約を自動化する『自動車整備・ピット予約システム』をWordPressで構築するメリット

2017年3月14日

利益を3倍にする凄腕コンサルタント ミタス・パートナーズ様ホームページ制作