Divi 5初心者ガイド:基本を習得する方法

公開: 2025-05-25

Divi 5について聞いていて、現在の状態について疑問に思っているなら、このDivi 5初心者のガイドはあなたのためです。

Divi 5は、WordPressユーザーに信頼され、愛されているDivi Visual Builderの未来です。ゼロから再建されたDivi 5は、より速いパフォーマンスとより直感的な体験を提供します。 Diviは、すべての人にとってWebデザインを容易にするモダンでスケーラブルな基盤で知られているすべてのものを組み合わせています。

この投稿では、Divi 5を使用するか、Divi 4から移行するかにかかわらず、Divi 5の使用に自信を持つために必要なすべてを説明します。

Divi 5はアルファステージにありますが、今日の新しいWebサイトで使用する準備ができています。

目次
  • 1 Divi 5とは何ですか?
  • 2 Divi 4からDivi 5に移行するのは簡単ですか?
  • 3新しいDivi 5機能について知っておくべき機能
    • 3.1 1.カスタマイズ可能なブレークポイントは、より応答性の高い柔軟性を提供します
    • 3.2 2。設計変数は、一貫したブランディングシステムを定義するのに役立ちます
    • 3.3 3。オプショングループプリセットは、プリセットベースの設計システムを簡素化します
    • 3.44 。複雑なレイアウトデザインのネストされた行
    • 3.5 5。モジュールを整理するモジュールグループ
    • 3.6 6.高度なユニットは、よりスマートなレスポンシブデザインのために最適化するのに役立ちます
  • 4 Divi 5の中を見てください
    • 4.1 1。Divi 5をダウンロード、インストール、アクティブ化します
    • 4.2 2。Divi 5を使用してWebサイトを作成します
    • 4.3 3。Divi 5 Visual Builderの基本について学びます
    • 4.4 4. Divi 5でサイトページを作成します
  • 5 5 Diviを最大限に活用するためのヒント5
    • 5.1 1。新しいリリースで更新されてください
    • 5.22 。新しいDivi 5ビルダーを試します
    • 5.3 3。DiviコミュニティでDivi 5のヒントとトリックの共有と検索
    • 5.4 4. Divi 5を使用して新しいWebサイトを構築します
    • 5.5 5. Divi設計システムを構築します
    • 5.6 6。遭遇したときにバグを報告します
  • 6 Divi 5を選択して、Webデザインの旅をキックスタートしてください

Divi 5とは何ですか?

Divi 5はDivi WordPressテーマの最新バージョンですが、更新以上のものです。これは、DiviのWebサイト構築フレームワークの完全な再構築であり、カスタムコードを作成せずに完全にクリエイティブなコントロールを提供するように設計されています。

Divi 5の中心には、より速く近代化された視覚ビルダーがあります。それはより軽く、より応答性が高く、Divi 4で直面している一般的な問題を排除します。すべてが、より鋭く、より滑らかで、より直感的に感じます。

ツールを切り替えたり、コードを書いたり、セットアップ時に時間を無駄にせずにアイデアから起動に移行するのに役立つように構築されています。方法は次のとおりです。

  • より迅速に応答し、軽く感じ、より少ない遅いラグとより精度でドラッグ、ドロップ、カスタマイズすることができるリアルタイムのビジュアルビルダー。ここで自分でテストしてください。
  • さまざまな業界や目標に合わせた美しいページデザインを適用するのに役立つ事前に設計されたDiviレイアウト。
  • テキストや画像からスライダー、ギャラリー、フォーム、価格設定テーブルなど、すべてを処理する多数のDiviモジュール。
  • Diviなどのマーケティングツールは、分割テストのためにリードし、電子メールのオプトインのブルーム、ソーシャル共有のための君主です。
  • プリセット、設計変数、グローバルスタイルなどの高度なカスタマイズオプションを使用すると、デザインを一貫してブランド状態に保つことができます。

Divi 5を際立たせるのは、それがどのように意図的に感じるかです。レイアウトからインターフェース、パフォーマンスまで、エクスペリエンス全体は、より速く移動し、整理されたままで、不満のないノーコードワークフローを楽しむのに役立つように設計されています。

Divi 5の詳細については、Divi 5をダウンロードしてください

Divi 4からDivi 5に移行するのは簡単ですか?

Divi 5はDivi 4の後継者です。つまり、より良いことを意味します。したがって、Divi 4に慣れている場合、切り替えのアイデアは圧倒的に感じるかもしれません。しかし、Divi 5は後方互換性で構築されていると言って始めましょう。これは、Divi 4 WebサイトがDivi 5で動作することを意味します。

Divi 5は、Divi 4について愛したものすべても保持していますが、それを改善します。全体的な直感的なエクスペリエンスは依然として馴染みのあるものなので、Divi 5にすばやく慣れることができます。 Divi 4からDivi 5に切り替える必要がある理由について説明しましょう。

Divi 5ビルダーは、より速く、より最適化されたパフォーマンスを提供します

Divi 5は、近代的な建築を使用して構築されました。最大の改善点の1つは、ショートコードの除去です。これにより、Divi 4の肥大化した出力とパフォーマンスが低下しました。ビルダーはすぐにロードされ、全体的にはるかに軽く感じられます。

もう1つの主要なアップグレードは、よりスマートな再レンダリングです。 DIVI 4では、小さな変更でさえ、レイアウト全体で不必要な更新を引き起こす可能性があります。 Divi 5は、実際に変化したもののみを再レンダリングし、複雑なページでも、遅れを減らし、エクスペリエンスをスムーズに保ちます。

Milliseconds Divi 4(左側)が視覚ビルダーをロードするのにかかることに注意してください。 Divi 5はすぐにロードします。

この速度をサポートするために、設定パネルからトランジションアニメーションを削除し、不必要な再描画を最小限に抑え、更新がリアルタイムで適用される方法を改良しました。これらの小さな変更により、ビルダーはクリックするたびに応答性が高くなります。

DIVI 5は、より簡単でシンプルな編集エクスペリエンスを提供します

多くの場合、小さな詳細は、構築方法に最大の影響を与えます。 Divi 5は、ビルダーインターフェイスをより直感的にする微妙で強力な改善の範囲を紹介します。

手始めに、コンテンツの編集はこれまで以上に高速になりました。ワンクリック編集を使用すると、任意のテキストまたはモジュールを直接クリックしてタイピングを開始できます。追加の手順やメニュー間の切り替えはありません。それにより、全体の体験が即座に楽しく感じられます。 (DIVI 4では、モジュールの設定パネルを開くには複数のクリックが必要でした。)

別のアップグレードはパネルドッキングです。これにより、設定パネルを画面の両側に固定できます。これにより、変更を加えるとレイアウトが完全に視界を維持し、設定が作業エリアをカバーするのを防ぎます。 (この機能はDivi 4には存在しません。)

設定パネルの上部にある新しいパン粉には、レイアウト構造の正確な位置が表示されているため、特にネストされた要素を使用する場合は、常に自分がどこにいるかを常に知ることができます。

Divi 5パン粉

Divi 4には存在しなかったビルダーの明るいモードとダークモードを切り替えることもできます。これらの更新により、よりクリーンで焦点を絞った編集スペースが得られ、視覚的な乱雑さと不必要なクリックを削減するため、ワークスペースをよりよく制御できます。

DIVI 5は、設定管理および設計組織を簡素化します

DIVI 5は、スタイル、レイアウト設定、レスポンシブ調整を管理するための、より整理された直感的なシステムをもたらします。

各設計設定内で応答状態とホバー状態を直接切り替えて、ビューを切り替えることなく、すべてのインタラクションと画面サイズの間隔、タイポグラフィ、または効果を微調整できます。

同様に、モジュールプリセット、設計変数、およびオプショングループプリセットは、サイト全体で適用および管理が簡単です。 (これらを以下のセクションで詳しく説明します。)

DIVI 5を使用すると、基礎を改善し、カスタムコーディングなしでWebデザインワークフローを最適化するのに役立つ新しい、より高度な機能を追加しています。 2週間ごとに更新がリリースされているため、ここからは良くなっています。

知っておくべき新しいDivi 5機能

Divi 5に最近追加した新しい機能と、それらがあなたがより速くウェブサイトを構築するのに役立つ方法を見てみましょう。

1.カスタマイズ可能なブレークポイントは、より応答性の高い柔軟性を提供します

DIVI 5で最もエキサイティングな追加の1つは、カスタマイズ可能なレスポンシブブレークポイントです。 Divi 4では、電話、タブレット、デスクトップの標準の3つのデバイスサイズに限定されていました。より具体的な画面幅のためにレイアウトを微調整するためにカスタムコードを使用する必要がありました。

Divi 5では、その制限はなくなりました。携帯電話幅、幅、ワイドスクリーン、ウルトラ幅を含む、おなじみのものと一緒に、携帯電話幅、タブレット、ウルトラを含む7つの事前定義されたブレークポイントにアクセスできるようになりました。

設計のニーズに基づいてこれらの追加のブレークポイントを有効または無効にし、完全な制御のために幅の値を変更できます。これにより、レスポンシブWebサイトを構築する際にはるかに柔軟性が得られます。

ブレークポイントを管理するには、3つのドットをクリックして、サイト全体のレスポンシブブレークポイントパネルを開きます。追加する新しいブレークポイントを切り替え、必要に応じて幅コントロールの新しい値を変更します。

カスタマイズ可能なブレークポイントの管理

ブレークポイントを無効にするときに、スタイルを失うことを心配しないでください。 Diviはバックグラウンドでそれらを保存するため、後でBreakpointを再度に再度可能にすると、カスタマイズがすぐに戻ります。これは、仕事を失うことなく、さまざまなレスポンシブデザインをテストするのに最適です。

2。設計変数は、一貫したブランディングシステムを定義するのに役立ちます

設計変数は表面上は小さく感じるかもしれませんが、使用を開始するとワークフローを完全に変換します。異なるモジュールで同じフォント、色、または間隔の値を手動で調整する代わりに、それを一度定義し、サイト全体で再利用します。変数を更新すると、すべてのインスタンスが自動的に更新され、時間を節約し、デザインを一貫性に保ちます。

これは、ブランドの一貫性が重要なマルチページサイトやクライアントプロジェクトに特に役立ちます。ボディテキストサイズ、見出し色、ボタンパディング、リンクスタイリングなどの変数を設定できます。すべてのH4を調整する必要がある場合は、すべてのブロックを追い詰める必要はありません。変数値を1回変更するだけです。

デザインの属性だけでなく、会社の住所、製品リンク、さらには迅速なアクセスのための背景モチーフなど、一般的に繰り返されるコンテンツ値を保存することもできます。これにより、手動の仕事からあなたを救い、繰り返しのコンテンツをより良く整理するのに役立ちます。

Visual Builderの内部では、 Variable Managerアイコンをクリックして、数字、テキスト、画像、リンク、色、およびフォントの6つの変数タイプから選択します。

DIVI 5の変数マネージャー

この例では、テキスト変数を作成しましょう。変数に名前を付けて値を追加してから、保存します

テキスト変数を命名して保存します

テキスト変数を適用するには、変更する要素をクリックします。私たちの場合、アドレス。テキスト変数であるため、設定パネルのコンテンツに移動し、ボディの上にホバリングして動的なコンテンツアイコンを見つけます。次に、保存された変数をクリックして適用します。

3.オプショングループプリセットは、プリセットベースの設計システムを簡素化します

バックグラウンド設定、間隔、ボックスシャドウ、境界線などのスタイルの保存と再利用は、オプショングループプリセットを介して時間を節約できます。要素全体(セクション、行、列、モジュール)に適用されるDivi 4の従来の要素プリセットにすでに精通している可能性があります。

DIVI 5のオプショングループプリセットは、1つのステップを深く把握します。モジュール内の設計オプションの特定のグループにプリセットを作成および適用できます。たとえば、他のものに影響を与えることなく、オプショングループプリセットとしてボーダー設定を保存できます。

そうするために、最初に優先設定をカスタマイズしてから、プリセットとして保存します。以下では、ボックスシャドウをボックスシャドウ2として保存し、他のボタンに適用しました。

特定のホバー効果、境界線、色でボタンスタイルを再利用したいが、間隔とテキストスタイリングのみを残しておくと、オプショングループプリセットでそれを行うことができます。残りのモジュールに影響を与えることなく、必要な設定のみを適用できます。

設計変数は、フォント、色、間隔などのコアバリューを制御するのに役立ちますが、オプショングループプリセットは1つのレベルになります。スタイルセクション全体をグローバルプリセットとしてグループ化して再利用できます。一緒になって、カスタムコードを作成せずに一貫したレイアウトをすばやく構築するのに役立つプリセットベースの設計システムを形成します。

4。複雑なレイアウトデザイン用のネストされた行

ネストされた列は、複雑さなしにレイアウトの自由を望んでいるデザイナー向けに構築されています。ネストされた行を使用すると、複数のセクションやコード回避策を常にジャグリングすることなく、より洗練されたレイアウトを構築できます。

特にランディングページ、製品ショーケース、マルチカラムブログレイアウトで作業したり、非対称ポートフォリオで最高の作業を紹介する場合、複雑なレイアウトを管理しやすく、編集がより直感的になります。

ネストされた行をコンテンツモジュールとして追加します。ブラックプラスボタンをクリックし、新しい行に切り替えて、お好みの行タイプを選択します。

ネストされた行を追加します

挿入すると、トップレベルの行のように動作します。また、各ネストされた行は完全なレスポンシブ設定を保持しています。つまり、ブレークポイント全体でどのように動作するかを制御できます。基本的な行や列で考えることに限定されなくなりました。ネストされた列を使用して、デザインワークフローを清潔で視覚的に保ちながら、レイヤーで考えています。

5。モジュールを整理するモジュールグループ

モジュールグループは、DIVI 5の新しいコンテナ要素です。複数の関連モジュールを視覚ビルダー内の単一の折りたたみ式グループにバンドルできます。これにより、特に繰り返し要素やネストされたデザインでいっぱいの複雑なレイアウトを扱う場合、ページの大きなセクションを劇的に管理しやすくします。

見出し、画像、説明、ボタン、およびライン仕切りを備えた製品ショーケースブロックを想像してください。デザインを複製または調整するたびに、各モジュールを個別に選択または移動する代わりに、それらを一度グループ化して1つのユニットとして扱うことができます。

モジュールグループは、別のDivi 5モジュールとして存在します。グループモジュールを選択して追加します。その中にさらにモジュールを追加でき、それらはすべて1つのモジュールグループとしてグループ化されます。

モジュールグループを追加します

6.高度なユニットは、よりスマートなレスポンシブデザインのために最適化するのに役立ちます

DIVI 4では、ほとんどのスタイリング入力は、ピクセルやパーセンテージなどの基本ユニットに限定されていました。高度なユニットを使用すると、 REM、EM、VW、VH、%、さらにはCLAMP()などの強力なCSS機能など、より広い範囲のCSSユニットをDIVI 5の視覚設定として使用できるようになりました。

たとえば、Clamp()を使用して、パディングまたはフォントサイズの最小値、理想、および最大値を設定して、デザインが多数のカスタムブレークポイントを作成せずにデバイス全体で洗練されているように見えることもできます。見出しのクランプ(36px、4VW、48px)は、フォントサイズを36pxで開始し、ビューポート幅の4%に基づいてスケールを設定し、48pxで成長を停止します。

これらの値は、すべての設定に組み込まれています。高度な単位値を定義することにより、数字設計変数を作成することもできます。

DIVI 5高度なユニット

これらの機能により、柔軟で応答性の高い、一貫したWebサイトを簡単に構築できます。カスタムCSSを作成したり、回避策に依存したりすることなく、ビルダー内で直接設計をより制御できるようになります。

しかし、これはほんの始まりに過ぎません。これまでに見たものは、Divi 5が提供するものの一部にすぎません。私たちはより多くの機能に積極的に取り組んでおり、すべてがよりスマートでより速く構築するのに役立つように設計されています。 Divi 5は、その中心であるため、Webデザインをよりスマートにすることです。すべてのアップデートは、ワークフローを簡素化し、少ない労力で美しいウェブサイトを構築するためのツールを提供することに焦点を当てています。今から始めると、最終開始の準備が整う前にDivi 5をマスターするという利点が得られます。

Divi 5の詳細については、Divi 5をダウンロードしてください

Divi 5の中を見てください

Divi 5を使用してWebサイトを構築する方法を見てみましょう。そのためには、最初に機能するWordPressセットアップが必要です。これは、Webホストの選択、ドメイン名の登録、およびサイトにWordPressをインストールすることを意味します。この投稿の次の部分に焦点を当てる前に、これを実行していると仮定します。

1. Divi 5をダウンロード、インストール、アクティブ化します

Diviを購入、インストール、アクティブ化するビデオチュートリアルは次のとおりです。

購入が成功したら、エレガントなテーマのメンバーシップエリアにログインできます。次に、Divi 5 zipフォルダーをダウンロードします。

Divi 5 zipフォルダーをダウンロードします

WordPressダッシュボードに戻ります。このクエリに従ってください:外観>テーマ> [テーマの追加]> [テーマ]をアップロードします。次に、コンピューターからDivi 5 zipファイルをアップロードし、 [今すぐインストール]をクリックします。

Divi 5をアップロードしてインストールします

インストールしたら、テーマをアクティブにします

DIVIをアクティブにします5

最後に、DIVIライセンスをアクティブにします。そうすることで、選択したサービスに効果的にアクセスできるようになります。このプロセスは自動で、ETメンバーシップログイン資格情報をもう一度ログインします。

メンバーシップにログインします

これを完了したら、Divi 5ダッシュボードにアクセスできます。ダッシュボードは、Diviライセンスのステータス、更新、ページ、テンプレートなどの情報を提供します。また、Webサイトベースの構築に使用するDiviクイックサイトも表示されます。

Divi 5ダッシュボード

Diviを始めましょう

2. Divi 5を使用してWebサイトを作成します

Divi 5を使用してWebサイト全体を構築する最速の方法は、Diviクイックサイトを使用することです。

2つのオプションから選択します。

  • 事前に作られたスターターサイトを使用すると、Divi 5は選択したサイトのブランディングとコンテンツを使用してベースWebサイトを構築します。
  • または、 AIでサイトを生成して、Divi AIに独自のWebサイトを作成するよう指示します。

Divi 5のDiviクイックサイト

スターターサイトの使用方法は次のとおりです。スターターサイトを選択し、Webサイトのロゴや作成するページなど、いくつかの詳細を入力します。

そして、これがAIでどのように機能するかです。あなたはあなたのウェブサイトについてdivi aiに伝え、それが料理をするのを待ちます:

Diviクイックサイトは、Webサイト構築プロセスをスピードアップしたい場合に最適です。これにより、既製の構造が提供されます。独自のブランディング、コンテンツ、スタイルでさらにカスタマイズできます。空白のページから開始したり、すべてのレイアウトをゼロからデザインする必要はありません。

ゼロから新しいページを構築するか、Divi Visual Builderにアクセスする場合は、ページに移動してページの追加を行います。

WordPressに新しいページを追加します

次に、ページに名前を付けて、 [Divi Builderの使用]をクリックします。

名前とアクセスDiviビルダー

Divi Visual Builderに入ります。

Divi 5ビジュアルビルダー

3. Divi 5 Visual Builderの基本について学びます

Divi 5 Visual Builderに初めてアクセスしている場合は、多くのアイコンが表示されるため、簡単なウォークスルーを次に示します。

Divi 5 Dashbaordウォークスルー

  • (1.)左サイドバーパネル:このパネルにはビルダーツールが含まれています。事前に作成されたレイアウトを追加し、レイアウトライブラリにアクセスし、レイヤーを使用して構造を表示し、ワイヤーフレームビューに切り替え、設計変数を保存し、ビルダー設定を調整し、ヘルプを取得できます。
  • (2.)トップバー:レスポンシブモードを切り替えることができます。幅とズームコントロールは、ブレークポイント全体のレイアウト間隔を微調整するのに役立ちます。また、ここで元に戻す/やり直し、クリアレイアウト、履歴、保存オプションも見つかります。さらに、出口、プレビュー、ドラフトの保存、ボタンを公開して、進行状況を管理します。
  • (3.)右側のサイドバー:任意のモジュールをクリックすると、右側に設定が開きます。コンテンツを追加したり、スタイルを設定したり、カスタムCSSを追加したりできます。上部のパン粉(ページ>セクション>列>列)は、モジュールがレイアウト内のどこに存在するかを正確に示しています。

次に、セクション(青で表される)と(常に緑)の2つのコンテナ要素があります。行の内側には、モジュール(黒)を追加できる列があります

セクション、行、およびモジュール

セクションを追加するには、青いプラスボタンをクリックします。行の場合、それは緑色のプラスボタンであり、モジュールの黒です。さまざまな種類の行オプションを選択できます。列の中には列があります。

行構造

行や列の内部では、見出し、画像などのコンテンツモジュールを追加します。Divi5は、連絡先フォーム、証言などを追加するかどうかにかかわらず、あらゆる目的で200を超えるコンテンツモジュールを提供します。

Divi 5のコンテンツモジュール

最近のモジュールグループモジュールを使用すると、さまざまな要素をグループ化できるため、独自のモジュールを作成および保存できます。 灰色はモジュールグループを表します。)

Divi 5のモジュールグループ

4. Divi 5でサイトページを作成します

Diviクイックサイトを使用しない場合でも、事前に作成されたレイアウトをインポートしたり、Divi AIを使用してレイアウト全体を生成したりできます。青いプラスボタンをクリックします。

事前に設計されたレイアウトをインポートするか、Divi AIで作成します

(1.) 2500以上の事前に作成されたレイアウトから選択できます。 (2.) Divi AIにページを生成するよう指示できます。施設内のレイアウトのインポートの仕組みは次のとおりです。

Divi AIを使用して構築することを選択した場合は、ビルドするページについてのみ伝える必要があります。

Divi 5でDivi AIを使用して構築します

ページのデザインをカスタマイズします

Diviクイックサイト、事前に作成されたレイアウト、またはDivi AIを使用してページを作成した場合は、それをカスタマイズして自分のものにする必要があります。ウェブサイト全体に一貫してブランディングを追加するために、最も簡単な方法は、設計変数を定義することです。

設計変数を定義します

これらのグローバルな値(主要な色やフォントなど)は、それらを使用する場所で自動的に適用されます。それらを変更するには、変数マネージャーの変数値を変更するだけです。

任意のモジュールを編集するには、それをクリックすると、右側のパネルに設定がポップアップ表示されます。

モジュール設定の編集

すべてのモジュール設定パネルには、3つのタブが含まれています。

  • コンテンツ:これは、モジュールの実際のコンテンツを追加または編集する場所です。また、リンクを追加したり、背景を選択したり、管理者ラベルを変更してモジュールをより簡単に識別することもできます。
  • 設計: [デザイン]タブに切り替えると、モジュールの視覚的な外観をスタイリングできます。フォントサイズ、重量、色、ラインの高さ、間隔、アライメントなどを変更できます。さまざまなモジュールには異なる設定オプションがあることに注意してください。
  • Advanced :Advanced Tabは、より多くの技術的なオプションを完全に制御できます。カスタムCSSを追加し、応答性のある可視性を設定します。 [デザイン]タブが提供するものを超えてカスタマイズしたい場合に特に便利です。
  • ラップトップアイコンを使用すると、レスポンシブモードとホバーモードを切り替えることができます。 1つのモードに切り替えることにより、すべての設定をカスタマイズして保存できます。
  • デフォルトのプリセットボタンは、Diviのプリセット機能です。これは、要素プリセットとオプショングループプリセットの違いを示します。

ライターのブロックを扱っている場合は、Divi AIを使用してコンテンツ(テキスト、画像、コード)を追加します。ほぼすべてのモジュールでは、AIを使用できます。あなたがする必要があるのは、小さなAIアイコンを探すことだけです。

AIで編集します

ページをカスタマイズしたら、ドラフトを保存することを忘れないでください。次に、プレビューしてすべてのものが適切に機能していることを確認し、ページを公開します

保存、プレビュー、公開

Diviを始めましょう

Diviを最大限に活用するための5つのヒント5

Divi 5はエキサイティングな段階にあります - パブリックアルファステージ。それは、グラウンドアップのアップグレードと主要なパフォーマンスの改善を経験しています。残っているのは、新機能リリースとマイナーな修正だけです。

また、これで構築を開始するのに最適な時期になります。開始が早ければ早いほど、Divi 5ベータ版が完全に起動されると快適になります。 Diviメンバーシップを最大限に活用する方法は次のとおりです。

1。新しいリリースで更新されてください

新機能の更新は、修正やパフォーマンスの調整だけでなく、Webサイトの構築方法を変える強力なツールでもあります。カスタマイズ可能なブレークポイントから設計変数、ネストされた行、および高度なユニットまで、各追加はDivi 5の新しい基盤に基づいて、より多くの制御と速度を提供します。

ループにとどまるには、エレガントなテーマYouTubeチャンネルを購読してください。ニックは定期的にウォークスルーを共有し、発表をリリースします。

YouTubeチャンネルを購読してください

2。新しいDivi 5ビルダーを試します

Divi 5 Visual Builderは、迅速で応答性が高く、効率のために構築されています。すべての新機能の追加は、ワークフローの最適化に貢献しているため、新しい戦略を開発するために実験を続けることをお勧めします。あなたを支援するために、私たちは私たちのアプローチを共有するために、新機能のチュートリアルも公開します。たとえば、さまざまな行構造に関する投稿は、ネストされた行を使用してインテリジェントなレイアウトを作成する方法を示しています。

Divi 5を使用する創造的な方法を見つけるために、定期的にエレガントテーマブログにアクセスする習慣にしてください。

3. DiviコミュニティでDivi 5のヒントとトリックを共有して検索

Divi 5の実験を開始すると、他の人がどのように使用するかを確認することも同様に重要です。世界中のデザイナーと開発者も、同じ新機能を探求し、創造的なレイアウトを試し、結果を共有しています。

ブレークポイントのスマートな使用から、時間節約のデザイン変数セットアップまで、他の人がどのようにビルドにアプローチするかを見ることで学ぶことができることがたくさんあります。公式Divi FacebookグループまたはDiviに焦点を当てたフォーラムに参加して、チュートリアルを発見し、質問をし、Divi 5を使用している人々から新鮮なアイデアを得てください。これは、スキルを伸ばして最新の方法の1つです。

4. Divi 5を使用して新しいWebサイトを構築します

Divi 5(現在)を使用する最良の方法は、新しいWebサイトをゼロから構築することです。新鮮なプロジェクトを開始している場合、待つ理由はありません。パフォーマンスが高速化、クリーンなコード、より良い編集エクスペリエンスがすぐに得られます。

しかし、既存のDivi 4サイトを使用している場合は、Divi 5に移行する前にもう少し待つ方が良いでしょう。

Divi 5はまだアクティブな開発中であるため、一部のDIVI 4モジュールとサードパーティの拡張機能はまだ完全にはサポートされていない場合があります。とはいえ、すべてのウェブサイトが異なるため、これは毎回そうではありません。確信が持てない場合は、最善のことはサイトの互換性を確認することです。支援するために、 Divi 5 Migratorツールも作成しました。

Divi 5移民ツール

既存のDivi 4サイトをスキャンして、どのモジュールが互換性があるか、どのモジュールが互換性がないか、何が注意を必要としているかを示します。これにより、ライブサイトを危険にさらすことなく、情報に基づいた決定を下すことができます。

ただし、ベータリリースに非常に近いため、Divi 5のみを使用して新しいWebサイトを作成し、Divi 4サイトを切り替える前にもう少し待つことです。

5. Divi設計システムを構築します

Divi 5は多くの機能を紹介しているため、使用するものとどの機能を決定しないかを決定するのは混乱する可能性があります。たとえば、設計変数を定義している場合、オプショングループプリセットも使用する必要がありますか?これを理解するための最良の方法は、自分に合ったものを実験して把握することです。また、新機能がリリースされると、プロセスを改善し続けることができます。

一貫性のために設計変数を使用してWebサイトビルドを開始し、オプショングループと要素プリセット内でそれらを使用できます。この構造化されたアプローチにより、時間を節約し、ブランディングを揃え続け、数回クリックしてグローバルスタイルを更新できます。

6.遭遇したときにバグを報告します

Divi 5はまだアクティブな開発中であるため、途中でいくつかのバグに遭遇する可能性があります。あなたがそうするとき、私たちはあなたがそれらを報告することを望んでいます。これにより、チームが問題をより速く修正するのに役立ち、ベータリリースに1つのステップを近づけます。また、Divi 5の疑問に頼ることもできます。私たちのサポートチームはすぐに対応し、ここで支援します。Proユーザーは、緊急のものについても24時間年中無休のVIPサポートを受けています。

Divi 5を選択して、Webデザインの旅をキックスタートしてください

Divi 5

Divi 5は、近代化され、ゼロから再構築された完全なWebサイト構築フレームワークを提供します。そのすべての部分は、ワークフローを簡素化し、パフォーマンスをスピードアップし、Webデザインの将来に合わせて設定するように設計されています。

  • 競争よりも優れています。ほとんどのビルダーは派手な機能に焦点を当てていますが、Divi 5は制御、速度、実世界の使いやすさに焦点を当てています。それはあなたに反対するのではなく、あなたと一緒に働くために構築されています。
  • Divi 4からの主要なアップグレード: Divi 4は、WordPressユーザーにすでに愛されていました。 Divi 5は、人々が気に入ったすべてのものを保ち、彼らがしなかったすべてを修正します。より速く、軽く、よりスケーラブルです。
  • 視覚編集からAIコンテンツ、クラウドストレージ、クイックサイト作成、マーケティングツールまでのすべてのツールは、Divi 5を使用すると、強く始めて速く成長するために必要なものをすべて提供します。

今日Webデザインの旅を始めている場合は、Divi 5から始めてください。これは、Webがどこに向かっているのかではなく、Webが進む場所のために構築されています。

Divi 5は、今日新しいWebサイトで使用する準備ができています。

Divi 5の詳細については、Divi 5をダウンロードしてください