Pickupニュース

Page Builder by SiteOrigin
WordPressプラグイン

Page Builder by SiteOrigin

ウィジェットを使ったドラッグ&ドロップ操作で作るページレイアウトWordPressプラグイン
単純なドラッグアンドドロップページビルダを使用して、わかっているウィジェットを使用して、レスポンシブページレイアウトを作成します。
1 Page Builder by SiteOriginの導入
バージョン:2.4.19をベースにレビューしています。

プロモーションビデオ


プラグインのインストール

  1. 管理画面の プラグイン新規追加 をクリックします。
  2. プラグインの検索からプラグイン名を検索します。
  3. 該当するプラグインの今すぐインストールをクリックしてプラグインをインストールします。
  4. インストール後、有効をクリックして、プラグインを有効化します。
プラグインが有効化されると、ダッシュボードメニューの設定の中に「SiteOrigin Page Builder」が追加されます。

必須プラグイン

Page Builder by SiteOriginを更に拡張するプラグイン「SiteOrigin Widgets Bundle」を追加インストールします。 プラグインが有効化されると、ダッシュボードメニューのプラグインの中に「SiteOrigin Widgets」が追加されます。

レイアウトサンプルを使用した基本的な使い方

Page Builderはテーマファイルを触ることなく、様々なレイアウトを投稿画面で簡単に組むことが出来ますが、それでも細かい調整は必要になって来ますので、まずは予め公開されているレイアウトサンプルを利用した簡単な使い方から始めます。

Page Builderの起動

Page Builderを有効化すると、投稿/ページの編集画面でビジュアルテキストの横に追加されたPage Builderタブをクリックして、Page Builderに切り替えます。

Live Editorの起動

Live Editorをクリックして、ライブエディターを起動します。
ライブエディターを使用すると、追加したRowやウィジェットの変更を画面右のライブプレビューで確認しながら編集することが出来ます。

Prebuilt Layoutsの追加

Prebuilt LayoutsをクリックしてLayouts Directoryを開きます。Layouts Directoryには、Page Builderで作られたレイアウトサンプルが多数公開されており、自由に自分の投稿/ページに組み入れることが出来ます。

使用したいレイアウトサンプルを選択してInsertをクリックして、
  • Insert after(現在のレイアウトの前に挿入)
  • Insert before(現在のレイアウトの後に挿入)
  • replace current(現在のレイアウトを置換する)
から挿入先を選択して、挿入します。

ここでは、Beautifully Bakedを例にとって説明を続けます。

Hero(ヒーローイメージ)ウィジェットの編集

ウィジェット名、またはライブプレビュー画面のウィジェットエリアをクリックして、ウィジェットの編集を開きます。

コンテンツの編集

Hero framesFrame のトグルを開いて、Contentを編集します。

ボタンの編集

Hero framesFrameButtonsView Recipes のトグルを開いて、Button textDestination URLを編集します。

ボタンの追加

Iconトグルを開いて、 IconChoose Icon からボタンのアイコンを選択します。

背景画像の編集

Backgroundトグルを開き、 Background imageChoose Media からFrameの背景画像を変更します。

画面右下のDoneをクリックして編集を反映します。

Rowの編集

編集したいRowのをマウスオーバー⇒Edit Rowをクリックして、Rowの編集を開きます。

カラム数・比率・方向の変更

カラムを2に、比率をPenton (0.272)に、方向をRight to Leftに変更します。

Rowの背景色の変更

Row StylesDesignBackground Color で背景色を変更します。
画面右下のDoneをクリックして編集を反映します。

ウィジェットを移動

SiteOrigin Headlineウィジェットをドラッグ&ドロップして右のコラムに移動します。

アイコンウィジェットの追加

分割したRowの左カラムを選択してアクティブにした後、Add Widgetをクリックします。
ウィジェットリストの中からSiteOrigin Iconウィジェットをクリックしてカラムに追加します。

アイコンウィジェットの編集

ウィジェット名、またはライブプレビュー画面のウィジェットエリアをクリックして、ウィジェットの編集を開きます。
IconColorSizeをを変更します。
画面右下のDoneをクリックして編集を反映します(右側コラムのHeadlineの編集は省略しています)。

Live Editorの終了

画面左上のDoneをクリックしてLive Editorの終了します(通常の編集画面に戻ります)。

投稿/ページの公開

編集画面の公開ボタンをクリックして公開します。
1 2 3 4

4 件のコメント

コメントを残す

記事ランキング