ゼロから始められるDivi入門チュートリアル【サーバーもDiviも不要】

こんにちは、ナオミです!
この度Diviの新しい入門シリーズの動画を作りました。

  • ゼロから始めるDivi入門1『ワイヤーフレーム作成』【Diviもサーバーもこちらから提供します】
  • ゼロから始めるDivi入門2『モジュール挿入』
  • ゼロから始めるDivi入門3『ビジュアルビルダー』【コード無しでレイアウト構築】
  • ゼロから始めるDivi入門4『ホバーとレスポンシブ』
  • ゼロから始めるDivi入門5『Diviライブラリー』

今回の動画シリーズは前回のものと二つの点で大きく違います。

  1. サーバーもDiviも不要で本当にゼロから始められる
  2. シリーズを通して一つウェブサイトを作る

どうしてサーバーもDiviも無しでチュートリアルを進められるのか?

どうしてそれが可能かと言いますと、demodivi.comを使っているからです。

demodivi.comとは?

demodivi.comはDiviを無料で5日間試せるサイトです。
必要なのはメールアドレスだけです。

シリーズを通して一つのウェブサイトを作る

前回の動画を見た方の意見で、『全部繋がっていなくて、わかりにくい』というものがありました。
なのでそれを改善し、今回はシリーズを通して一つのウェブサイトを作るようになっています。

このシリーズを見るときは、Divi完全マニュアルも参考にしてみてください

1. ワイヤーフレームの作成

Divi入門シリーズ第一弾、『ワイヤーフレーム作成』

この動画ではサイトの設計図となるワイヤーフレームをDiviのセクションと行で作っていきます。

2. モジュールの挿入

Divi入門シリーズ第二弾、『モジュール挿入』

この動画では1で作ったワイヤーフレームにモジュールを挿入し、さらにワイヤーフレームの肉付けをしていきます。

3. ビジュアルビルダー

Divi入門シリーズ第三弾、『ビジュアルビルダー』

この動画では2まで作ったワイヤーフレームを、今度はDiviの一番の強みであるビジュアルビルダーで、デザインを加えていきます。

4. ホバーとレスポンシブ

Divi入門シリーズ第四弾、『ホバーとレスポンシブ』

この動画では3で作ったデザインを、スマホ画面で見てもちゃんと表示されるように設定します。そして、マウスカーソルを持って行った時に画像や文字に変化を加えるホバーエフェクトの説明もします。

5. Diviライブラリー

Divi入門シリーズ第五弾、『Diviライブラリー』

この動画では4までで、完成したデザインをどうやって保存し共有するのか説明します。そして下層ページのレイアウトの使い回し方を説明しています。


とても分かりやすく作ってますので、Diviを触ったことがない人にはもってこいですし、Diviをすでに持ってる人も新しく学べるものがあると思います。

コードを書かないウェブ制作を目指すコミュニティ『TOFUラボ』

Diviの最新情報を知りたいなら、ノーコードでWEBサイト制作を支援するサロン『TOFUラボ』に参加しませんか?
私が運営してるノーコードでWEBサイト制作を支援するのコミュニティです。

最新情報だけではなく技術的な質問も飛び交っています。

また、デザインやSEOなどWEBサイト制作に関する様々な勉強会も開催されています。

『TOFUラボ』の紹介はこちらです

興味があれば、是非参加してくださいね。
入会してから7日間は無料で合わないなと思えばいつでもキャンセル可能です。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

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

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通