IT音痴の私でもできた!プラグラミングなしでWordPressのデザインができるなんて-無料で使えるBeaverBuilderPluginを使ってみました。-後編

もっともっと楽にブログを書きたい!

仏様
うんうん。前編の話でやってみると
簡単にページのデザインができそうだ。

島村竜一
ありがとうございます。
お褒めに預かり光栄です。
仏様
でも毎回1から作成するのはめんどくさい。
島村竜一
え?そんな。。
仏様
なんかもっと楽する方法はないのか?
島村竜一
わかりました。
今回は一回作ったものをコピーする方法などを
説明いたしますね。

今回の説明について

今回は以下の説明をしていきます。

コピー
移動
パーツの詳細設定から
余白とアニメーション処理の説明
です。

画像と文章を並べて文章を書きましょう

まず前回横二列のレイアウトを作成しながら
右に画像しか配置していなかったので
左に文章、右に画像を配置します。

文章の入力方法は前回の記事を参考にしてみてくださいね。

IT音痴の私でもできた!プラグラミングなしでWordPressのデザインができるなんて-無料で使えるBeaverBuilderpluginを使ってみました。-前編

楽するために作ったものをコピーする

今画面はこのような画面です。
Beaver Builder設定

このときに上に書いてある
「メルマガに登録するとプレゼントがあります」
という文言をもう一回下に表示したいとします。

そのときにもう一回入力しなおすのは面倒くさいですよね。

今回はあらかじめ存在するパーツをコピーして
下に配置しなします。

1
コピーしたいパーツの上に左上にマウスをあてると
アイコンバーが表示されます。

Beaver Builder設定

2
左から3つ目のアイコンをクリックします。
注意:キャプチャーでは「複製」となっていますが
「コピー」に修正しておきます。
Beaver Builder設定

3
あっと言う間にコピーがされました。
Beaver Builder設定

4
アイコンバーを表示して一番左のアイコンをクリックします。
Beaver Builder設定

6
そのままドラッグしていってください。
Beaver Builder設定

7
移動させたい場所でマウスをはなすとホラ
移動が完了しました。
Beaver Builder設定

余白を狭くしましょう

では最後にコピーしたパーツの微調整を行いましょう。

1
アイコンバーを表示して左から2番目のアイコンをクリックします。
Beaver Builder設定

2
この画面で入力した文章をもう一度再編集することができます。
今回は文章はそのままにして微調整をしましょう。
上級設定をクリックしてくださいね。
Beaver Builder設定

3
デフォルトで上下左右に20pxのマージンが設定されています。
この値を0pxにしてみましょう。
Beaver Builder設定

4
上の文章との隙間が狭くなりましたね。
Beaver Builder設定

アニメーションでワッと表示させてみよう

上級設定の画面を下にスクロールしてみましょう。

スタイルのなしをフェードインにしてみましょう。

遅延処理は2秒としてみましょう。

設定が終わったら保存ボタンをクリックします。
Beaver Builder設定

では実際にどうなったか結果を見てみましょう。

メニューバーから「保存」ボタンをクリックしてみてください。

次の画面で「一般公開」をクリックしてくださいね。

実際の結果はこちらの画面をみてくださいね。
https://goodsystem.jp/blog/salesmale-beaverbuilder/

まとめ:難しいことを覚えなくても楽に使えるBeaverbuilder

楽々

よくLite版とかモニター版というのは
使えなかったり、使用期限があったりするのですが
Beaverbuilderのモニター版は違います。

マウスだけでレイアウトが作れるので楽々に使えます。
直感的に使えるのがなによりもいいです。

楽々というのが本当にいいです。
苦しいことは続かない。
だからいかに楽につづけるための仕組み作りをするというのは
大切なことです。継続することがなによりも成功の秘訣です。

じゃこれで製品版はいらないのというと
そんなことはないのです。

明日は製品版のBeaverbuilderを使って、
QAページとプロフィールページを一気に作成していきます。
お楽しみに。

追記:2016/03/30
2016/03/30はQAページの作成例のブログを公開します。
またプロフィールページの作成例は2016/03/31に公開とします。

この記事が気に入ったら
ぜひいいねをお願いしますね。

Twitter で
Loading Facebook Comments ...

コメントを残す

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

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)