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

folder_openWORDPRESSホームページ制作

今日は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 に変更するだけです。

 

デフォルト
スクリーンショット 2016-05-14 18.35.42

日本語化後
スクリーンショット 2016-05-14 18.36.28

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

 

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

 

基本の使い方

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

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

スクリーンショット 2016-05-14 18.55.31

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

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

スクリーンショット 2016-05-14 18.56.02

 

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

「Add Element」を押します。

 

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

スクリーンショット 2016-05-14 18.56.16

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

 

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

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

 

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

スクリーンショット 2016-05-14 19.16.01

VisualComposerで作ったROWのページ

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

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

 

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

 

 

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

前の投稿
ブログに使う写真素材・無料素材サイト8選+有料画像サイト3選
次の投稿
Visual Composer ROWとColumnの構造説明

関連記事

メニュー