ページデザインをリアルタイムに確認しながら制作できる!
Nimble Page Builderで簡単編集

マウスで簡単に機能を設置し、リアルタイムにデザインを確認しながらページ制作ができるページ作成用のエディターです。

「Nimble Page Builder」で投稿ページを作ろう

「Nimble Page Builder」の基本的な使い方

WordPressプラグイン「Nimble Page Builder」は、リアルタイムにデザインを確認しながらページ制作ができ、テキストエディタ、投稿グリッド、画像、連絡先フォーム、マップ、アイコン、既製のセクションやスターターテンプレートなどのモジュールをページの任意の箇所へ簡単にドラッグアンドドロップで設置できます。

投稿ページも固定ページも、基本的な使い方は同じですが、慣れるまで使いにくいかもしれません。そこで、基本的な使い方をご紹介いたします。

新規の投稿を追加

「Nimble Page Builder」は投稿や固定ページを作るエディターですが、ページ管理はWordpressの管理画面を使います。
まずはWordpressで一覧表示などで使うタイトルやイメージ画像を登録します。
管理画面の左カラムで「投稿」→「新規追加」を選択します。

WordPressの投稿入力画面で、
・タイトルを入力
・イメージ画像を登録
を作業し「下書き保存」を押します。

下書き保存が完了したら「Build with Nimble Builder」を押します。

Nimble Builderのテンプレートを設定

ここから「Nimble Builder」の操作です。
初めにテンプレートを「Nimble Builder」に変更するための操作をします。
画面左上の「〈」を押します。

「Current page options」を押します。

「Page template」を押します。

Select a templateの選択肢から「Nimble Builder template」を選びます。
すると、右側のレビュー表示が、WordpressのエディターからNimbleのエディターに変わります。

これでNimbleで新規投稿のページ設定は完了です。

「Nimble Page Builder」でタイトルを設置

このサイトのタイトルの設置方法

このサイト（と言うよりこのページ）のタイトルの設置方法をご紹介します。

Nimbleでタイトルを作る

「〈」を押します。

「Content Picker」を押します。

「Heading」をドラッグアンドドロップします。
マウスの左ボタンで左エリアの「Heading」を押したまま、右側のデザイン面に移動させると「INSERT IN A NEW SECTION」が表示されるので、そこで左ボタンを離します。

左カラムに「Heading」の要素を入力・選択する画面が表示されます。
入力は「ビジュアル」と「テキスト」から選択できますが、私はHTMLやショートコードを直接入力することが多いので「テキスト」を選んで入力しています。

次にフォントを設定します。
左カラムを下にスクロールし「Text setting : font, color, size,…」を押します。

フォント設定します。
PCやスマホのアイコンをクリックすると、それぞれ設定が可能です。
※影は別途CSSで設定しています。

次に、バックの帯を設定するため、エリアの右下、緑色の「column」をクリックします。

左カラムの「Background settings for the column」で「Background color」を設定します。
これでバックの帯が設定できました。

次にバックグラウンドの画像を設定します。
左上の黒色の「section」をクリックします。

左エリアの「Background settings for the section」を選び、Image bakcgroundの「Select image」をクリックします。

バッググラウンドに設置する画像を登録・設定します。

バックグラウンドの画像については、以下の2種類から選べます。
・Fixed background
　バックグラウンドの画像は固定で動きません
・Parallax effect on scroll
　バックグラウンドの画像は少し動くパララックスデザインで設定

次に、上下に空間を作ります。
左エリアの「Padding and margin settings for the module」を選び、エリアのスペースを設定します。
以上でタイトルが設置できました。

以上でこのサイトのタイトルの設置が完了しました。

「Nimble Page Builder」でショートコードを設置

ほとんどショートコードを使っています。

Nimbleは「Heading」とか「Html Content」などの機能がありますが、私はほぼ「Shortcode」を使います。その理由は、左カラムで入力作業をすると、右カラムのデザインが真っ白になるから。真っ白から復帰させる方法はショートコードにある「Refresh preview」機能で対応できるため、つい多様してしまいます。

ショートコードの設置方法

「Shortcode」をドラッグアンドドロップします。
マウスの左ボタンで左エリアの「Shortcode」を押したまま、右側のデザイン面に移動させると「INSERT IN A NEW SECTION」が表示されるので、そこで左ボタンを離します。

左カラムに「Shortcode」の要素を入力・選択する画面が表示されます。
入力は「ビジュアル」と「テキスト」から選択できますが、私はHTMLやショートコードを直接入力することが多いので「テキスト」を選んで入力しています。
入力を始めると、右カラムのビジュアルが真っ白に!!!そんな時は「Refresh preview」を押すと、ビジュアルが再読み込みされ表示されます。間違ってもブラウザの再読み込みを押さないこと、押すと入力内容が全てリセットされます。。。

これでショートコードの設定は完了です。
ショートコードの入力はこちらを御覧ください。

「Nimble Page Builder」で表示幅を調整

PCとスマホの表示は別々に設定可能

PC表示は左右に余白がある方が見やすい印象です。ただスマホの場合は左右に余白があると、表示エリアが減って見ずらいので、PCのみ余白を設定します。

表示幅の設置方法

幅を調整したいエリアの左上の黒色「section」をクリックします。

左カラムの「Width settings for the section」を選択し、「Define a custom inner width for this section」を押し設定します。すると下に「Inner section width」が設定できるので、パーセントで入力します。※私は「80」に設定しています。
アイコンがあるので、もしスマホも設定する場合は、スマホのボタンを押して「Inner section width」を設定することで、スマホも設定が可能です。※私は未設定

以上で設定は可能です。
他にも「Padding and margin settings for the module」でも表示幅の設定が可能ですが、私は「Width settings for the section」で設定する方が間違えなくて良いと思って使っています。

その他の記事

関連カテゴリー

最新記事

素材サイトのご紹介

このサイトでも活用しているオススメの素材サイトです。
是非こちらのバナーからご利用ください。

wildhawkからも写真素材を提供しています。是非ご活用ください