ちょっとだけワードプレス

ワードプレスに関するつぶやき

ワードプレスでサイトを作るならテーマ「Divi」が簡単でおすすめ Diviの使い方その① 「ページビルダーでレイアウト設計」

こんばんわ。

久しぶりの投稿です。

お金なさすぎて、記事の更新サボってました…

嘘です、アクセス上がらないので…挫折しかけてました(汗)

何もかも中途半端なので…お金がないのは当たり前です。

さて、こんなどうでも良い話はさておいて。

本題に入ります。

f:id:YAMAKYO:20160405205444j:plain

以前、こちらのブログでも紹介したワードプレスのテーマ「Divi」

www.lifelongstudy.info

便利・早い・かんたん・お洒落 4拍子揃った海外のテーマ。 

大変好評なようで、色々質問もいただいております。

と、いうことで数回に分けて「Divi」の使い方やメリット、デメリットなどを説明していきたいと思います。

海外テーマのため、認識不足のところも多少ありますが…

1年少々使い倒しているので、そこそこ熟知しているつもりです。

最後までお付き合いしていただけると嬉しいな。。。

Divi WordPress Theme

 

今、「Divi」を実際に使って作成しているサイトがコチラ

credit--card.jp

 

クレジットカードのランキング、比較、口コミをメインとしたアフィリエイトサイトです。

レスポンシブのテーマは好き嫌いがあると思いますが…

作業効率を考えると、スマホ用のサイトを別途コーディングしなくて良いので、結局レスポンシブテーマの方が良いのかな~と。

 

それでは、話を元にもどして早速Diviの機能を紹介していきます

 

第1回目は「投稿」について。

 

ワードプレスの投稿といえば、ブログを更新する画面になりますね。

普段からワードプレスをお使いの方であれば、見慣れた画面でしょう。

今回紹介するDivi!一番の特徴はなんといっても「ページビルダー」

ドラック&ドロップでレイアウト生成ができる優れもの。

今回は投稿画面から「ページビルダー」を使ってレイアウトを設計するところまで説明していきたいと思います。

 

①こちらがデフォルトの投稿画面

 Diviの投稿設定でフル画面か、右サイドバーか、左サイドバーか、ページのレイアウトを設定できます。

「Diviビルダーを使う」をクリック

f:id:YAMAKYO:20160405222443p:plain

 

Diviビルダーが表示されます。

 ここから、自分好みのページを設計していきます。

 列を挿入をクリックしましょう。

f:id:YAMAKYO:20160405222637p:plain

 

③カラム(列)を設定できます。

 最大4カラムまで!

 今回は1/2をクリックしてみます。

 次の画面で「モジュールを挿入」をクリック

f:id:YAMAKYO:20160405223030p:plain

 

④各モジュールが表示されます。

 機能は見ての通り。

 説明するよりデモ画面で見た方が早いかもしれません。

 デモ:Divi Theme Preview

f:id:YAMAKYO:20160405223152p:plain

 

⑤好みのモジュールを設定したら、次の行を作成します。

f:id:YAMAKYO:20160405223539p:plain

⑤-1(標準セクション)↑

   同じ行が追加されます。

 

⑤-2(全幅セクション)

   全幅のモジュールが追加できるようになります。

f:id:YAMAKYO:20160405223751p:plain

 

⑤-3(特別セクション) 

   複雑なレイアウトを構築できるようになります。

f:id:YAMAKYO:20160405223858p:plain

⑤-4(ライブラリから追加)

   自分で保存したレイアウトから選択できます。

   例)

f:id:YAMAKYO:20160405224017p:plain

 (上記は私が保存しているレイアウトです)

 一つのパターンを作ってレイアウトとして保存しておけば、毎回流用できるのでページの作成も早くなります。

 

⑥赤枠のバーをクリックすることで、セクションの背景などを設定できます。

f:id:YAMAKYO:20160405225847p:plain

 

⑥-1

f:id:YAMAKYO:20160405230619j:plain

今流行のパララックス背景、動画背景などが簡単に設定できます。

 

こちらが、実際に私がページビルダーを使ってレイアウトを組んだ画面

f:id:YAMAKYO:20160405225421j:plain

 

下記のようなページが完成します。

credit--card.jp

 

いかがでしょうか?

 

もちろん、全てのモジュールがドラック&ドロップで移動可能。

アフィリエイトサイト以外にも、コーポレートサイト、ブログ、ECサイト、ギャラリーサイトなど多様なサイト構築が可能です。

商品のランディングページ作成にも最適ではないでしょうか。

 

ワードプレス=ブログと思われがちですが、このようなサイトも簡単に作成できる時代になってきてるんですね。

驚きです。

今回紹介した以外にも、まだまだ使える機能満載なので随時ご紹介していきますね~。

 

そのほか質問などあれば、気軽にご質問ください。

私が解る範囲でお答えします!

 

チュートリアルはコチラ(英語版(涙))

youtu.be

 

テーマ購入はDiviはこちらからどうぞ! 

Divi WordPress Theme

Elegant Themes Premium WordPress Themes