モッチーです。

今日は、ビジュアルコンポーザーで記事を全部かいていきたいと思います。

こうした方がどうなるのか?

と言うのがサイトを見ていただける人にわかるかなと。

1

まずはコンテンツ。昨日紹介したように初めに行を追加します。

3

コレね。

この行を追加することで、そのエリアをインラインのブロックとして扱うことができます。

だから、この行を最大で12カラムまで分割してアイコンをおいたりテキストを置いたり、左右にコンテンツを分割して左に画像、右にテキストなんて配置の仕方ができます。


左に画像を配置してみました。

テキストをこのように書いて、左に画像を配置すると言った事もできます。

もちろんビジュアルエディタはWYSIWYGなので他の要素をタグで挿入する事もできるので便利です。

また、デザインオプションというタブからそのセクション内のマージン(margin)や、パディングpadding)からボーター等を視覚的に数値を入力するだけで設定出来ます。

3

このようにコンテンツを自由に配置したり、個別のClassを追加することができるので想い描くサイトを作成する事ができる点が最大の利点かなと。

また、画像に個別のリンクを付けたり、Jqueryの画像ギャラリーといったコンテンツの表示方法をとることもでき、サイズをサムネイルサイズにしたり、中サイズといったWordPressの設定でメディアのサイズを設定をしておけば、そのサイズで画像を呼び出す事もできます。

行自体にパララックス効果を持たせる。

行にパララックス効果を追加することでおもしろいセクションを作ることが出来ます。

  • 背景に画像を付ける
  • 背景に動画を付ける
  • スクロールで効果を付加する

といったようにアニメーション付きの効果をCSSなどを設定したりJqueryを追加する事なく表現する事が出来ます。

このようなデザインなどは、プログラムの知識(HTMLやCSSがプログラムといえるなら)がなくコードレスでパララックスの効果を追加することが出来ます。

 5

行の編集を行うには上記の画像の部分を編集できます。

左から行の折り畳み、編集、複製、削除というボタンになります。

セクション(行)に効果を付けるには編集を押下します。

行の編集

行伸縮

行とコンテンツのストレッチ オプションを選択します。 (注: 親コンテナのCSSプロパティに”overflow: hidden”が設定されている場合、正しく動作しない可能性があります).

Columns間隔

行の列の間のギャップを選択します。

行はFull Hight?
確認された行は完全な高さに設定されます。

等しい高さ
列の高さを等しくなるように設定する場合に確認します。

コンテンツの位置

列内のコンテンツの位置を選択します。

ビデオの背景を使用しますか?
チェックした場合、ビデオは、行の背景として使用されます。

パララックス

行に対するパララックス型の背景を追加 (注: 何の画像も指定されていない場合、パララックスがデザインオプションから背景画像を使用します。)

行ID

行IDを入力 (注: それはW3C仕様に応じてユニークかつ有効であることを確認してください).

特別なclass名

異なる特定のコンテンツ要素をスタイル – クラス名を追加し、カスタムCSSでそれを参照してください。

こんな感じで設定ができます。

これはボタンなどをポチポチと押しただけ。

このように今時のWebページを作る機能がモリモリと満載されているビジュアルコンポーザーを使うことで、ホームページビルダーや、デザイン出来ないよ~と言った人にも役立つプラグインと言えます。