投稿や固定ページで自由なレイアウトを構成することができるWordPressプラグイン「Page Builder by SiteOrigin」

投稿や固定ページで自由なレイアウトを構成することができるWordPressプラグイン「Page Builder by SiteOrigin」

投稿や固定ページで自由なレイアウトを構成することができるWordPressプラグイン「Page Builder by SiteOrigin」

Page Builder by SiteOriginは、投稿や固定ページでコンテンツの配置を直感的に配置することができるようになるWordPressプラグインです。各記事毎にレイアウトを変えながら、自由にコンテンツを配置することができます。

プラグインがどういったものかについては、公式の説明動画がありますので、こちらをご参照いただけるとイメージが掴めると思います。

Page Builder by SiteOriginのインストール

インストール手順は以下の通りです。

  1. Page Builder by SiteOriginをダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、Page Builder by SiteOriginを有効化します。

Page Builder by SiteOriginの設定

WordPress管理画面で[設定] – [Page Builder]にアクセスすると、プラグインの詳細設定を行うことができます。

Page Builder by SiteOriginの設定

General

Post Types Page Builderを使用する投稿タイプ
Live Editor Quick Link ライブエディターボタンの表示
Limit Parallax Motion パララックスエフェクトの値

Widgets

Widget Title HTML ウィジェットタイトルのHTML
Add Widget Class クラス追加の有効化
Legacy Bundled Widgets バンドルされたウィジェットの有効化
Recommended Widgets おすすめウィジェットの有効化

Layout

Responsive Layout レスポンシブレイアウトの有効化
Use Tablet Layout テーブルレイアウトの有効化
Tablet Width テーブルの横幅
Mobile Width モバイルの横幅
Row Bottom Margin ボトムの余白
Last Row With Margin 最後の行の余白
Row Gutter 各列の余白
Full Width Container 全体の横幅

Content

Copy Content 既存コンテンツのコピー

Page Builder by SiteOriginの使い方

記事編集画面にアクセスすると、[Page Builder]というタブが追加されています。[Page Builder]をクリックすると、エディタが切り替わります。

[Page Builder]

まずは[Add Row]から行を追加します。

Add Row

カラム数などを決めて[Insert]をクリックします。

カラム数の設定

行が作成されるので、コンテンツを追加したい場所を選択して、[Add Widget]からウィジェットを追加していきます。

ウィジェットの追加

同じ要領でどんどんコンテンツを配置していきましょう。

コンテンツの配置

あとがき

直感的に操作できて非常にわかりやすいです。

HTMLはわからないけど色んなレイアウトでページを作成したいという要望に応えてくれますので、クライアントワークでも使えますね。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です