Diviでウェブサイトを高速で作る方法【しかもオシャレ】

Diviでオシャレなレイアウトを高速で作る方法

こんにちは、ナオミです!

『Diviは凄いけど、レイアウトを最初から作る時間は無いな・・・』
『オシャレなウェブサイトにしたいのに、ちょっとデザインに自信がない・・・』

なんて思ったことありませんか?
自分もデザインには自信がなくて、Diviはこんなに色々できるのに、ちょっとイマイチのデザインになってしまう時もありました。
しかも時間がかかりますよね。

カッコいいウェブサイトを高速で作りたいですよね。
どうしたらいいのでしょうか?

結論から言いますと、現存のオシャレでかっこいいテンプレートからレイアウトを作り始めればいいんです。

Diviには140を超えるオシャレなウェブサイトのテンプレートが最初から入っています。
それらを元にウェブサイトを作るわけです。

沢山のDiviのレイアウトから制作可能

この記事を読むと、

  • 現存するDiviのレイアウトのテンプレートの使い方がわかる
  • Diviでオシャレなサイトを高速で作れるようになる

それでは順を追って説明していきます。

Diviで現存のレイアウトをロードする方法

まずはDiviでどうやって現存するレイアウトを自分のページにロードするのか説明します。

レイアウトパックを選択する

Divi現存するレイアウトから選択

まずはページを作り始める時に、真ん中の『レイアウトを選択』を選びます。

diviの使い方、レイアウトをロード

するとこんな画面が出てきますね。
それぞれが、レイアウトパックと呼ばれ、複数のレイアウトが入っています
どれかクリックしてみます。

Diviのレイアウトを選択

このような画面が出てきますね。

レイアウトを選択する

Diviのレイアウトのパック

このパックにはレイアウトが8個入っています。
どれかクリックしてみましょう。

レイアウトパックのレイアウトを選択

Menuというレイアウトをクリックしました。
すると左側のセクションがクリックしたレイアウトになります。

選択したレイアウトを試してみる

View Live Demoを押す

選択したレイアウトが実際にウェブサイトでどのように見えるのか試してみたい時は、左下の『View Live Demo』を押します。

Diviのレイアウトをデスクトップで試してみる

するとこのように、実際にこのレイアウトを使ったウェブサイトを見る事ができます。
画面を狭まれば、スマホ画面でも見れますよ。

Diviのレイアウトをスマホで試してみる

気に入ったレイアウトをロードする

Use This Layoutを押す

試したレイアウトが気に入りましたら、レイアウトの選択画面に戻り、『Use This Layout』を押します。

レイアウトのロード中

このようなローディングのバーが現れ、ロードが始まります。
画像なども一緒にロードされるため、少し時間がかかる時があります。

ロード完了

Diviの現存のレイアウトのロード完了

その後自動でDiviのビジュアルビルダーが起動し、このように選択したレイアウトがロードされます。

ロードしたDiviのレイアウトを改良し、自分のデザインにする

ロードしたレイアウトも全部Diviで作られてるので、簡単に編集できてしまいます。

色とテキストと写真を変えるだけで大きな変化

ロードされたオリジナルのデザイン
オリジナル
アップデートされたデザイン
色とテキストをアップデート

上のレイアウトがDiviで先程ロードしたものです。
そして下のレイアウトが色と写真とテキストを少し変えただけです。
5分かかってません。

このレイアウトを最初から作ったら一体どのくらいかかるでしょう?

いくらDiviで簡単にレイアウトが作れると言っても、こんな簡単にはいきませんよね。
もうすでに完成されてるレイアウトから作り始める事で、時間がを大幅に短縮できるわけです。

Diviライブラリーで作ったレイアウトを使い回す

いざ自分のデザインに改良したら、他のページでも同じヘッダーを使ったり、セクション自体を使いまわしたりしたいですよね。
Diviライブラリーを使えばそれが簡単にできます。
その説明はこの動画でわかりやすくて説明しています。


このように、Diviには最初から色々なレイアウトがすでに入っています。
1から作るのもいいですが、デザインに自信が無い方や余り時間の無いかたは、このようにレイアウトのテンプレートから作ってみてはどうでしょうか?

コメントする

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