ビジュアルコンポーザー の画面を見ながらの解説してみる

ページビルダーに名前が変わったけど、ビジュアルコンポーザーでも十分通じる。ビジュアルコンポーザーはコーディングをほぼ必要とせずにレイアウトをしていくことが出来ます。

ただ、素の状態で使っていっても少しイメージが違ってしまう場合があります。

ビジュアルコンポーザーに対応しているテーマでも自分の好みにあわせてそれなりの調整をしていたりします。

ヘッダー部分とフッター部分はテーマのカスタマイズから編集しています。

Wordpressが機能拡張してロゴやファビコンの管理などもできるようになっているのでそのカスタマズを使用したほうが基本的なテーマの編集としては便利です。

フッターは4カラムになっているのでそのカラム対してカラムをあわせたウィジェットを追加しているだけ。

だから、4つ目のカラムは抜けています。

後で追加編集、メニューなどやタグなどの設置はウィジェットを活用した方が良いです。

ブログエリアの表示を解説します

このBlogエリアの構成は

  • 区切りテキスト
  • 投稿グリッド
  • 画像リンク

という構成になっています。

区切りテキスト

設定の項目は

  1. タイトル
  2. アイコン追加(フォントアイコン)
  3. タイトル位置
  4. 位置
  5. スタイル(ボーダー・ドット・ダブル・シャドウ)
  6. 境界線の幅
  7. 要素の幅
  8. 追加 class名

といった項目を設定することになります。

通常はこうした要素を装飾する為には、フォントアイコンやサイズ、境界線などをCSSで別途設定をする必要があります。

Class名などは追加のCSS要素などを自分で設定したい場合の設定項目となります。

投稿グリッドは投稿をページ内に呼び出す設定で、グリッド表示として投稿を表示する為の設定です。

見た目の設定である一般で

  • データのソース
  • 絞り込みを狭めるソース
  • 項目数
  • 表示数
  • 行の数

などを設定します。

データ設定(DataSetting)で

  • 並び順
  • 昇降順
  • 除外

を設定します

Item Designで項目のデザインを選択します。

グリッド表示は、タイル状に投稿を表示する方法で基本グリッドとメーソンリグリッドといった表示方法があります。

基本グリッドはサムネイル+タイトル+記事抜粋といった投稿をグリッド表示で呼び出す事ができます。

メーソンリとは石積みといったブロック形式でタイル状に投稿を表示しその表示方法でサムネイル(アイキャッチ+タイトル+メタ)といった情報をマウスホバーで表示できるエフェクトが設定出来ます。

このような要素はすべて追加してからもドラック&ドロップで位置を自由に配置する事ができます。

DD-4

マウスをホバーすると上記の表示がされるので、鉛筆アイコンで編集、複製、削除といった操作が簡単にできます。

要素の追加は + ボタンを押下することで要素を選択するメニューが表示されます。

preview_toolbox_590_300

この動作は、別のアドオンを追加した場合に表示される機能ですが、概ね動作としてはこのように対応が可能です。

上の動作をさせるアドオンは上記なので興味があれば追加してみましょう。

ざっと要素を追加する方法を記載してきましたが、まずするべきは、行の追加。

基本昨今のWebサイトはカラム構成になっていて、1行のなかに12区切りのカラムがあり、それを区切って要素を配置するという方法が一般的です。

この辺りはいかが詳しいですね。

このような方法で、バックエンドから要素を追加したりさらには、フロントエンドビルダーで表示画面を見ながら配置をする事ができます。

ビジュアルコンポーザーは直感的ということはこうした事で理解出来るかと思いますが、昨今無料のCMSで使われていたり紹介されているWixやCMまでやってしまうJimdoなどと同等かそれ以上の機能だと私としては思います。

こうしたプラグインは他にもあるのですが、テーマに付属しているページビルダーを紹介します。