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

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

今回の説明について

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

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

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

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

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

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

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

今画面はこのような画面です。

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

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

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

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

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

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

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

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

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

余白を狭くしましょう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

島村竜一 Ryoichi Shimamura

仕事の生産性をあげるためさまざまな方法を試しました。その結果UiPathにたどり着き現在UiPathを使った業務効率化の開発、講師の仕事をしています。

講師、開発などの相談はお問い合わせからお願いします。

https://goodsystem.jp/lecture-request