Divi 5を使用してWebサイトを構築する方法（早めに参加して先を行く）

Diviで美しいウェブサイトをどれだけ早く組み立てることができるかを最初に気付いたときを思い出してください。創造性とシンプルさの完璧なバランスのように感じました。 Divi 4は、すべての人に素晴らしいデザインツールとスムーズな視覚ビルダーを提供しましたが、エレガントなテーマでは解決しませんでした。

私たちはあなたのフィードバックによく耳を傾け、Diviを改善するために一生懸命働きました。 Divi 5は、あなたが愛するものをすべて取り、より速く、より滑らかで、より強力にします。それは、あなたがより少ない労力とより多くの可能性で創造し、将来の準備をするのを助けるように設計されています。

何が新しいかを確認したい場合、または次のサイトを開始する場合は、このガイドでは、新しいWebサイトを作成し、Divi 5を使用して段階的に構築し、その過程で最善を尽くす方法に関する実用的なヒントを共有します。さあ行こう！

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のWebサイトを完全に移行する準備ができていません。

Divi 5を違うものは何ですか？

Divi 5は、最初に起動して以来、ページビルダーの最大の変更を表しています。現代のWeb標準を念頭に置いて、それをゼロから再構築しました。これは単なるフェイスリフトではありません。 WebサイトをDIVIでどのように構築するかを完全に再考しました。

ウェブは進化し続け、モバイルブラウジングが増加し、ユーザーの期待が高まっています。 Diviは常にこれらの変更に適応しており、Divi 5は最新の基準を採用することでこの伝統を継続しています。

Divi 5を開くとき、「これは新鮮に見える」と思うかもしれません。その後、構築を開始します。それが気づいたときです。

「待って、そのセクションはすぐにロードしましたか？」

はい、そうしました。そして、それはほんの始まりです。

Divi 5はDivi 4で機能したものを保持しますが、おそらくあなたが一緒に暮らすことを学んだフラストレーションを修正します。私たちはそれを構築しました。なぜなら、私たちのためではなく、確かにあなたのためではなく、もう十分ではなかったからです。今日構築するサイトは、より多くのことを行い、より速く読み込む必要があります。

Divi 5の現在のアルファが何を船にしているかの重要なハイライトを探りましょう。

ショートコードからブロックベースの構造まで

Divi 4はレイアウトをショートコードとして保存しました：WordPressが読み取ってページを作成する四角いブラケットのコードのビット。彼らは働いたが、完璧ではなかった。

DIVI 5では、コンテンツの保存方法を再構築しました。データベースに隠れているショートコードはもうありません！現在、WordPressの方向に適したクリーンでブロックベースのアプローチを使用しています。

ページを編集するときに違いを感じるでしょう。何かをクリックすると、すぐに応答します。ラグはありませんし、ショートコードが処理されるのを待つこともありません。あなたの変更はちょうど起こります。

フードの下でほとんどすべてを変更しましたが、構築方法を再学習する必要はありません。視覚体験はおなじみのままです。私たちは、舞台裏で起こることをはるかに合理的でモダンにしました。

新しいDivi 5インターフェイス

Divi 5は、デザイン作業に焦点を当てるクリーナーインターフェイスを紹介します。 Visual Builderは、コンテンツをカバーするために使用されるフローティングボックスの代わりに、サイドパネルを備えています。この変更は、Diviの作業方法に大きな違いをもたらします。

ツールバーは再編成されています。現在、一般的なアクションは指先にありますが、特殊なツールはワークスペースを乱雑にせずにアクセスできます。

必要に応じて、カラーピッカー、タイポグラフィコントロール、および間隔の調整が文脈的に表示されます。

このバージョンでは、テキスト編集がより自然に感じられます。テキストを選択したときに表示される単純なコントロールを使用して、ページ上にコンテンツを直接フォーマットできます。この直接的なアプローチは、書き込みとフォーマットのプロセスを大幅に高速化します。

また、設定の編成方法も改善しました。関連オプションは論理的にグループ化され、タブとメニューを検索する時間を短縮します。システム全体は、よりまとまりがあり、目的が高いと感じています。さらに、明るいモードとダークモードのオプションは、長いデザインセッションを目に快適にする思慮深いタッチです。

これらのインターフェイスの改善は最初は微妙に見えるかもしれませんが、数ページを構築した後、ツールが邪魔にならないようにすると、どれだけ速く動作できるかがわかります。

マルチパネルワークスペース

リフレッシュされたDivi 5は、デザインとの対話方法について新鮮なテイクをもたらします。 Divi 4は直感的なユーザーインターフェイスを提供してくれましたが、Divi 5の新しいパネルファーストレイアウトは、設計作業により自然に感じる方法でそれらを配置します。

設定は、画面の側面に沿ってきれいにドッキングされ、ページの遮るもののないビューが表示されます。パネルを閉じたり動かしたりすることなく、変更がリアルタイムで発生することがわかります。この明確なビューにより、微調整の間隔やアライメントがある場合、精密作業がはるかに簡単になります。

新しいマルチパネルセットアップにより、ツールを広げておくことができますが、まだ手の届くところにあります。

片側でテキスト設定を開くと、もう一方の側で間隔を微調整できます。別のもので作業するために1つのことを閉じる必要はありません。

パン粉は、要素間をすばやくナビゲートするのに役立ちます。クリックして、ボタンから親の行またはセクションにジャンプします。これにより、複雑なレイアウトの編集に深く入り込むと、数え切れないほどのクリックが節約されます。

一部のデザイナーは、右側の設定、左側の他の設定を好む人もいます。あなたが好まないオプションに落ち着く必要はありません。 Divi 5では、最も快適に感じるものを選択できます。タブに積み重ねることもできます。これは、多くの要素をジャグリングするときに役立ちます。

これは重要ではないように思えるかもしれませんが、ヘッダーのような複雑なレイアウトを構築する場合に便利な場合があります。ここでは、ロゴの設定、メニューのスタイリング、ボタンのプロパティを切り替える必要があります。

私たちは、ワークスペースの一部になるようにパネルを設計しましたが、それを中断するのではありません。 Divi 5のユーザーインターフェイスを使用すると、Webデザインキャンバスに属する場所に集中できます。

固定行からネストされた行に移行します

Divi 4では、複雑なものを構築しようとすると、突然、列列の構造で突然壁にぶつかり、特殊セクションまたはカスタムCSSに依存する必要があります。 Divi 5は、ネストされた列でこの頭痛を修正します。簡単に聞こえるかもしれませんが、この変更は、回避策をハッキングせずに作成できるものを完全に開きます。

これで、任意の行内をクリックして、そこに新しい行構造を追加できます。特殊セクションやカスタムCSSを作成して、コンテンツを論理的にグループ化する必要はありません。

このネストされた行システムは、改善されたレイアウトエンジンの始まりに過ぎません。 FlexBoxコントロールと、専門セクションを廃止する新しい行テンプレートに取り組んでいます。すぐに、FlexBoxの実装により、レスポンシブデザインがさらに簡単になり、コンテンツが画面全体にどのように調整および配布するかをより適切に制御できます。

その他の注目すべき機能

主要な構造の変化を超えて、Divi 5には、Webサイトの構築がよりスムーズで直感的なものになる新しい機能があります。現在のアルファの傑出した追加を見てみましょう。

• 設計変数は、スタイリングの選択を一元化し、サイト全体の変更を簡単にします。色、フォント、サイズ、画像、その他の要素を1回定義してから、サイト全体に適用します。ブランドの色を更新する必要がありますか？変数を変更し、すべてのインスタンスが自動的に更新されます。
• ワンクリック編集により、コンテンツとの対話が楽になります。任意のモジュールをクリックして編集してください。小さなギアのアイコンや設定ボタンを探していることはもうありません。この小さな変更により、就業日全体に数え切れないほどのクリックが節約されます。
• Canvasスケーリングを使用すると、ビューを切り替えることなく、デザインがさまざまな画面サイズでどのように見えるかを確認できます。キャンバスエッジをドラッグしてサイズを変更し、レイアウトをリアルタイムで適応させます。一定のタブの切り替えなしでレスポンシブな動作をチェックするのに最適です。
• 高度なユニットサポートは、正確で応答性の高いデザインの新しい可能性を開きます。 calc（）、clamp（）、min（）/max（）などのCSS関数をDiviの設定フィールドに直接使用して、あらゆる画面サイズに完全に適応する流体レイアウトを作成します。
• 不要なスクリプトとモジュールの読み込みを回避することにより、パフォーマンスの改善
• カスタマイズ可能なブレークポイントは、わずか3（デスクトップ、タブレット、モバイル）から7つの調整可能なオプションに拡張されます。この微調整されたコントロールは、小さな携帯電話からウルトラウィードモニターまで、あらゆるものに最適なレイアウトを作成するのに役立ちます。

Divi 5を使用してWebサイトを構築する：ステップバイステップガイド

それでは、このガイドの肉：Divi 5の強力な機能を使用して、空白のキャンバスから完​​成したWebサイトにあなたを連れて行く実用的なウォークスルーに行きましょう。プロセスの各フェーズを、お互いに構築する管理可能なステップに分解します

1。Divi 5のインストール

Divi 5ランニングを取得するには、ほんの数ステップです。メンバーエリアから最新のアルファバージョンをダウンロードし、テーマセクションからWordPressにアップロードし、通常のようにアクティブ化します。

2。ワークスペースのカスタマイズ

Divi 5のビジュアルビルダーを開くときに最初に気付くのは、それがどれほどきれいで整理されているかです。フローティングパネルは、以前のようにビューをブロックしません。代わりに、ドッキング可能なパネルを備えたより思慮深いレイアウトがあります。あなたが好きなようにあなたのワークスペースをセットアップするために数分かかります。

好みや作業時間に基づいて、明るいモードとダークモードを切り替えることができます。

自分に合ったワークスペースを作成します

Divi 5は、パネルを移動するだけではありません。関連パネルをタブにグループ化できます。これにより、複雑な設定を処理する場合でもワークスペースを整理します。

2つの異なる設定パネルを開き、1つをもう1つにドラッグします。それらはタブ付きレイアウトに結合し、クリックしてそれらを切り替えることができます。

クラシックセットアップを好む場合でも、画面上のどこにでもパネルをフロートできます。パネルを端から離してドラッグして取り外して、好きな場所に配置します。

大規模なプロジェクトでは、左のツールバーからのX線モードが役立ちます。微妙な境界線で各要素の概要を説明し、セクションとモジュールが開始および終了する場所を簡単に見つけることができます。このビジュアルガイドは、詳細なレイアウトを使用するときに志向し続けるのに役立ちます。

ワークフローを高速化します

キーボードショートカットは、Divi 5で設計プロセスを劇的に高速化できます。（？）オプションを押して、ヘルプメニューにアクセスして、ショートカットの完全なリストが見つかります。いくつかの重要な組み合わせを学ぶと、大規模なプロジェクトから時間を削ります。

ネストされた要素を編集するとき（列の列の内側のボタンのように）、パン粉は階層の正確な位置を示します。レイヤーを狩ることなく、ブレッドクランブトレイルの一部をクリックして、その要素の設定に直接ジャンプします。

左のツールバーのレイヤーパネルアイコンをクリックして、それを利用します。ページ構造全体をネストされたリストとしてビューを提供するため、複雑なレイアウトを操作するときに特定の要素を選択するのがはるかに簡単になります。

2。動的変数のセットアップ

Divi 5の設計変数Webサイトの視覚的要素の管理方法を変更します。サイトの設計を制御し、更新を簡素化するための中心的な場所を提供します。それらをウェブサイト全体で使用できるショートカットと考えてください。

設計変数の使用を開始するには、Visual Builderを開き、左サイドバーの変数マネージャーアイコンを探します。クリックすると、色、フォント、数字、画像、テキスト、リンクなど、さまざまな種類の変数を作成するためのオプションが表示されます。

グローバルな色のセットアップ

まず、いくつかのカラー変数を設定します。 [色]タブをクリックして、色を追加し、「ブランドブルー」や「プライマリカラー」のような記憶に残るものに名前を付けます。 [保存]をクリックすると、最初の変数が作成されます。

二次色、背景の色合い、テキストの色についても同じことをします。すべてのブランドカラーを変数として保存することは、ヘックスコードを再び覚える必要がないことを意味します。

フォントと数値変数の作成

次に、タイポグラフィシステムを設定しましょう。 [フォント]タブの下に、見出しとボディフォントの変数を作成します。これにより、サイト全体でテキストが一貫しています。

数値変数については、次のような一般的な測定について考えてみてください。

• 標準パディング（セクションの場合は30pxかもしれません）
• 境界半径（丸い角が必要な場合）
• コンテンツコンテナの最大幅
• フォントサイズ

これらの変数を作成するには、数分前に時間がかかりますが、時間を節約します。クライアントが変更を希望する場合、各要素を調整してすべてのページを狩る必要はありません。変数を1回更新するだけです。

また、電話番号、営業時間、会社のキャッチフレーズなど、後で変更される可能性のあるコンテンツのテキスト変数を作成する必要があります。

ソーシャルメディアプロファイル、アフィリエイトURL、「連絡先」ボタンなど、一般的に使用されるリンクを処理するのに最適な、サイト全体で再利用できるURLを使用してリンク変数を作成します。

同様に、ロゴなどの一般的に使用される画像の画像変数を追加します。

高度なユニットを持つ変数を使用します

DIVI 5は、設計変数と高度なCSSユニットを組み合わせると、さらに強力になります。画面サイズを拡張するレスポンシブタイポグラフィのClamp（）のようなCSS関数を使用して数値変数を作成します。

たとえば、クランプ（36px、5vw、72px）で見出しサイズ変数を作成します。

これにより、テキストは小さな画面で少なくとも36％を設定し、中画面で流動的にスケーリングし、大画面で72pxでキャップを設定します。これを、デバイスに関係なく常に比例しているように見えるテキストの見出しモジュールに適用します。

変数と高度なユニットを組み合わせることで、応答性のあるデザインの退屈な作業の多くが削除されます。テキストと間隔は、複数のブレークポイントを手動で設定することなく自動的に調整します。

3。ディビを使用したページとテンプレートの構築

ワークスペースをカスタマイズしてデザイン変数を作成したので、Divi 5で最初のページを作成する時が来ました。ビジュアルビルダーは、コンテンツの作成を開始するいくつかの方法を提供します。

オプション1：Divi AIでWebサイトを構築します

Diviクイックサイト + Divi AIを使用すると、複数のページ、テーマビルダーレイアウト、ユニバーサルデザイン設定、既製のナビゲーションバー、最適化されたWordPress構成を備えた作業Webサイトをすぐに作成できます。

Divi AIを使用してWebサイトを構築するときは、WordPressダッシュボードに移動し、メニューのDiviアイコンをクリックします。 Divi Quickサイトボックスを探して、「新しいサイトを生成する」ボタンを押します。

「AIでサイトを生成する」オプションを選択し、ビジネスに関する詳細情報を提供します。サービス、スタイル、視聴者についてより多くの詳細を含めると、より良い結果が得られます。この機能を使用するには、DIVI AIサブスクリプションが必要であることを忘れないでください。

販売する製品がある場合は、セットアップ中にwoocommerceオプションをインストールすることを確認すると、Diviは必要なすべてのコンポーネントを使用してストアページを自動的に作成します。

画像の場合は、Divi Quick Sitesオプションを選択してUnsplashのコレクションにアクセスしたり、ビジネスの説明に基づいてDiviをカスタム画像を作成したり、後で自分の写真を追加する場合は「Placeholderを使用」を選択できます。

その後、色とフォントをカスタマイズすることができます。特定の要件がある場合は、ブランドの色とタイポグラフィを手動で選択するか、Diviに補完的な組み合わせを考え出すことができます。

Diviがページを構築した後、固定色の値をデザイン変数に置き換えます。これにより、AIに生成されたセクションが設計システムに直接結び付けられます。クライアントが後で暗い青を望んでいる場合、1回だけ更新する必要があります。

ブランドの色に落ち着かせず、Diviを選択させ、結果が好きな場合は、それらの色をデザイン変数に変えるようにしてください。また、これらの色からグローバルオプションプリセットを作成します。このようにして、ページは柔軟でまとまりがあり、常にサイトの視覚スタイルに合わせています。

選択に満足したら、「生成＆公開」ボタンを押して、Diviが魔法をかける間数分待ちます。あなたの新しいホームページが現れ、あなたのサイトへの訪問者を歓迎する準備ができています。

AIを使用してページに新しいセクションを追加します

「AIを使用したセクションを生成」ボタンを使用して、新しいセクションをすばやく生成します。 divi aiに必要なものを説明することができ、それはあなたのためのセクションを生成します。

AIに生成されたセクションの精製

Diviがコンテンツを作成すると、ニーズに合わせて簡単に調整できます。サイトのすべての部分は、通常のDIVIツールを通じて完全にカスタマイズ可能なままです。テキストを変更し、画像を交換し、間隔を調整し、デザイン変数でブランドの色を使用します。

これらのレイアウトは、現在のWebデザイン標準に従って、強力な出発点を提供します。空のページから始める代わりに、ユニークな入力を必要とするだけで構築されたテンプレートで作業しています。これにより、デザインの選択に時間と労力が節約され、見た目や感触を完全に制御できます。

Divi 5の改善された編集機能とAIのパワーにより、Webサイトの構築はより速く、よりシンプルになります。質の高い結果を迅速に取得し、すべてをカスタマイズする自由があり、より少ない時間でプロのサイトを立ち上げるのに理想的です。

オプション2：事前のレイアウトを使用してWebサイトを構築します

2000以上の既製のデザインのいずれかをページに追加するには、画面の左上隅にある青色のプラスボタンを押して、「事前のレイアウト」を選択します。すべてのオプションを表示するウィンドウがポップアップします。

好きなデザインパックを選んでください。より速く何かを見つけるには、フィルターを使用するか、検索ボックスに必要なものを入力します。目を引くパックをクリックして、必要なページスタイルを選択します。決定する前に、左にスクロールして完全なデザインを確認できます。

「The One」を見つけたら、「このレイアウトを使用」をクリックします。配色のインポートについて尋ねるメッセージが表示される場合があります。あなたがそれを望まないなら、これをチェックしてください。

唯一の欠点？ビルドするページごとにこれを繰り返す必要があります。しかし、より良い方法があります。 Diviクイックサイト（AIには不要）を使用すると、これを大幅に高速化できます。最良の部分は、すべてのDIVIユーザーがAIサブスクリプションに追加料金を支払うことなく、クイックサイトとそのすべてのスターターデザインにアクセスできることです。

スターターサイトのコレクションを見るのはあなたの時間の価値があります。それぞれが他の場所に見られないユニークな写真やアートワークを備えています。

Diviに移動し、[クイックサイト]タブをクリックし、[新しいサイトを生成]を押して、今回は「事前に作られたスターターサイトを使用」を選択します。ビジョンに合ったデザインを見つけるまでデザインを閲覧します。情報を追加し、色とフォントを選択し、システムにその魔法を機能させます。

レイアウトが適用された後…

事前にレイアウトを適用またはインポートした後、ブランドの色を選択せず​​、レイアウトに付属のデフォルトの色とフォントを使用した場合、デザインを通過し、固定カラーコードをデザイン変数とオプショングループプリセットに置き換えます。

色とフォントを選択しているが、プリセットをまだ作成していない場合は、それらの色をデザイン変数に変えます。また、これらの色からオプショングループプリセットを作成します。

これにより、レイアウトからのすべてのコンテンツがプリセットスタイルに従うことを保証するため、ボタンなどの要素はすべてのページで一貫性を保ちます。同様に、あなたはあなたのブランドの視覚言語に簡単に保守され、整合する既製のデザインの利便性を得ることができます。

完成したウェブサイトの準備は数分で準備できます。色、フォント、パッケージ全体など、すべてが完全に適合します。それが起きた後、あなたが望むものを何でも調整することができます。

オプション3：Webサイトをゼロから構築します

新しいページを開くと、デフォルトのセクションが追加されたクリーンキャンバスが表示されます。 Divi 4のように、緑色（+）ボタンをクリックして新しい行を追加し、ゼロから構築を開始できます。

Divi 4と同様に、Divi 5を使用したすぐに使用できるモジュールのコレクションがあります。

ネストされた行の機能は、複雑なレイアウトに対して非常に貴重です。 2列レイアウトの1列内に3列のセクションが必要ですか？問題ない。行の内側をクリックして、行を追加し、行構造を選択します。 Divi 5は、汗をかくことなくこのネストを処理し、事実上無限のレイアウトの可能性を与えます。

ブログのレイアウトでこれがどのように機能するか見てみましょう。標準の2列セットアップから始めます：ワイドコンテンツ領域とより狭いサイドバー。メインの行で、ブログモジュールをドロップします。

通常の投稿の上のグリッドに注目の投稿が必要ですか？電子メールのオプトインを備えた単一の行で、下部に別の列をネストし、次に情報ボックスの3列構造をネストします。同じ構造には、Divi 4にカスタムコードが必要になりました。

サイドバーには、さまざまな背景が積み重ねられているさまざまなウィジェットが必要になる場合があります。ネストされた行を使用すると、各サイドバー要素はカスタムスタイリングで独自の行を取得します。あるルックでのプロモーション、著者の紹介では、別の見方で、3番目の紹介、すべてがサイドバーの列にきれいに含まれています。

この新しい構造の自由は、レイアウトに完全にアプローチする方法を変えます。交互のテキスト/画像行を備えた製品ショーケース、次に、全幅の証言をトッピングした3列の機能セクション？ビルダーと戦うことなく、すべて1つの流体容器にあります。

オプショングループプリセットを作成します

最初のページをスタイリングすると、Webサイトのすべてのページでこれらのスタイリングの選択肢を複製することが不可欠になります。しかし、それは非常に時間がかかり、さらに重要なことには迷惑です。 DIVI 5は、設計プロセスをスピードアップするのに役立つオプショングループプリセットを導入します。彼らはあなたのサイトのどこにでも適用できる再利用可能なスタイルのスニペットのように働きます。それらをセットアップして使用する方法を見てみましょう。

ページに追加したモジュールをクリックすることから始めます。設定パネルにいるときは、設計オプションを見てください。境界、タイポグラフィ、影など。これらの設定ブロックの最上部コーナーの近くにホバーすると、小さなプリセットアイコンが表示されます。

そのプリセットアイコンをクリックして、「現在のスタイルから新しいプリセット」を選択します。あなたにとって理にかなっている名前を付けてください。ボーダープリセットの「丸いコーナー」やテキストスタイリングの「大きな見出し」のようなもの。

パネルは、現在の要素だけでなく、プリセットに取り組んでいることを示すために色を変更します。これは、あなたがしていることを追跡するのに役立ちます。これが頻繁に使用するスタイルの場合は、「デフォルトとして割り当て」ボックスをチェックして、新しい要素が自動的に使用するようにします。

保存すると、最初のオプショングループプリセットを作成しました！美しさは、このオプショングループを使用する任意の要素に、このまったく同じスタイリングを適用できるということです。テキストモジュール、画像、ボタン、または完全なセクションです。

オプショングループプリセットと設計変数を組み合わせます

ここで、Divi 5が本当に強力になります。プリセットを作成するときは、静的な色やサイズだけを使用しないでください。代わりに設計変数を使用してください。

ボタンプリセットを作成しているとします。特定の色を選択する代わりに、カラーピッカーの変数アイコンをクリックして、「ブランドブルー」変数を選択します。これで、プリセットは常にブランドの色を使用します。後でその色を変更すると、このプリセットを使用するすべてのボタンが自動的に更新されます。

同じことが、作成したすべての変数タイプにも当てはまります。異なる間隔が必要ですか？保存した間隔番号をつかむだけです。フォントを適用しますか？あなたのタイポグラフィ変数はすぐに待っています。あなたのサイトは一貫しています。

必要に応じて、変数を1回更新するだけで、クライアントが「その青を少し暗くする」ことを望んでいるときに、すべての要素を狩るという頭痛のせずに、すべてのインスタンスを独自に更新します。

DIVI 5では、あらゆるサイズのフィールドに高度なユニットを含めることもできます。 1200pxよりも広いが携帯電話で縮小するセクションが必要ですか？幅ボックスに「min（1200px、90％）」と入力します。終わり。コンテナは、1200pxを超えるまで幅90％にとどまり、成長を停止します。カスタムCSSは必要ありません。これらの高度なユニットは、動的変数にも適用できます。

構築要素プリセット

オプショングループプリセットをセットアップした後、完全なスタイルのモジュール、行、またはセクションを保存する要素プリセットを作成する必要があります。これらは、サイト全体で再利用できる完全な設計パッケージと考えてください。

1つを作成するには、モジュールを完全にスタイルし、完璧に見える場合は、モジュールのヘッダーのプリセットアイコンをクリックします（特定のオプショングループ内ではありません）。 「現在のスタイルから新しいプリセット」を選択し、「機能カード」や「チームバイオ」などの名前を付けて保存します。

新しいモジュールを追加するときは、モジュールヘッダーのプリセットドロップダウンをクリックして、保存されたデザインを即座に適用するだけです。すべての設定は、ワンクリックで適用されます。

設計システム（変数とプリセット）に基づいて他のページを構築する

変数とプリセットを使用して設計システムを確立すると、追加のページを作成することがより効率的になります。 Divi 5を使用すると、財団が設置されています。これで、完全な一貫性を維持しながらWebサイトを拡張できます。

新しいページを作成し、ビジュアルビルダーをアクティブにすることから始めます。この新鮮なページにモジュールを追加すると、プリセットシステムが物事をどのように高速化するかにすぐに気付くでしょう。要素をゼロからスタイリングする代わりに、保存した要素プリセットを適用するだけです。

たとえば、新しいテキストモジュールを追加するときは、モジュールヘッダーのプリセットドロップダウンをクリックして、「ボディテキスト」プリセットを選択します。フォントの選択、サイズ、色を含むすべてのスタイリングは、即座に適用されます。同じことが、ボタン、画像、証言、またはプリセットを作成した他の要素についても当てはまります。

テンプレートを作成します

Diviのテーマビルダーを使用すると、Webサイトのすべての隅とコーナーを作成およびカスタマイズできます。ヘッダー、フッター、ポストテンプレート、カスタムポストタイプテンプレート、ショップページ、名前が付けられます。

WordPressダッシュボードをナビゲートすることにより、Diviのテーマビルダーにアクセスします：Divi→テーマビルダー。上部には、デフォルトのテンプレートがあります。このテンプレートは、Webサイト全体の全体的な外観を管理します。グローバルヘッダーの追加セクションをクリックして、「グローバルヘッダーの構築」を選択して、ワークスペースを開きます。同様に、グローバルフッターの追加を選択して、Webサイトフッターを設計することができます。

ネストされた列、ヘッダー、フッターを使用すると、建物がはるかに簡単になります。各セクションに異なる行レイアウトを備えた派手なヘッダーが必要ですか？別の行の中に行を追加し、行のレイアウトを選択し、構築を続けます。

カスタムコンテンツタイプのテンプレートを作成します

ヘッダーとフッターを超えて、テーマビルダーを使用して、さまざまなコンテンツタイプの特殊なテンプレートを設計できます。

ブログの投稿がチームメンバーのプロファイルや製品ページとどのように異なるかと同様に、それぞれが独自の最適化されたレイアウトに値します。

読みやすさ、特集画像配置、および著者情報のための適切な間隔を持つブログ投稿のテンプレートを作成します。製品ページには、ギャラリーのレイアウトと価格設定テーブルが必要になる場合があります。

このシステムの美しさは、これらのテンプレートがそれぞれのコンテンツタイプに割り当てられると、自動的に適用されることです。たとえば、新しいブログ投稿を追加すると、テンプレートは即座にフォーマットを処理します。これにより、繰り返しの作業が削除され、すべてが視覚的に接続されます。

これらのテンプレートを構築するときは、オプショングループのプリセットと設計変数を活用します。以前に確立したタイポグラフィの設定では、見出しとボディテキストが一貫していることを保証します。カラー変数は、すべてのテンプレートタイプにわたってブランドアイデンティティを維持します。

テンプレート設計にDivi AIを使用します

Divi AIは、テンプレートの構築時間を数時間から数分に削減します。テーマビルダーで、必要なものを選択してください - ヘッダー、フッター、ブログのレイアウト、または製品ページ。

Visual BuilderのBlue +ボタンを押して、「AIでセクションを生成する」を選択します。

あなたの説明は最も重要です。必要なものについて具体的に注意してください：

• ヘッダー：左アライメントロゴ、水平ナビゲーションメニュー（自宅、アバート、ブログ、ショップ）、右側のクリアな連絡先ボタンを備えたクリーンヘッダー。モバイル用のハンバーガーアイコンで応答します。
• フッター： 3列のフッター：会社の情報とソーシャルアイコン、便利なリンク、連絡先の詳細（住所、電話、電子メール）。クリアセクションの見出し、簡単なレイアウト。
• ブログテンプレート：シングルポストレイアウト大きな特徴の画像、投稿タイトル、日付、コンテンツエリア、最近の投稿とカテゴリを備えた右側のサイドバーを特徴としています。
• ショップページ：画像ギャラリー、製品名、価格、説明、数量セレクター、および顕著な購入ボタンを備えた製品ディスプレイ。以下に示す関連製品。

詳細は、結果を陽気にします。 Diviがテンプレートを作成したら、1分かけて、すべてのハードコーディングされた値を、ボタン、テキストブロック、境界などの要素のオプショングループプリセットに置き換えます。これにより、AIに生成されたコンテンツがプリセットシステムと統合されるため、手動またはAIで構築されているかどうかにかかわらず、ボタンはすべてのページで同じように見えます。

この方法では、サイトの視覚言語にすべてを結び付けている間、カスタムビルドを感じる既製のテンプレートが提供されます。デザインの変更が後で変更されると、AIが構築したセクションが他のすべてと一緒に更新されます。

高度なテンプレート機能で時間を節約します

条件付きロジックを追加すると、テンプレートがさらに強力になります。あなたのブログに対してあなたのショップページに別のヘッダーが欲しいですか？ページカテゴリまたはURLパターンに基づいてテンプレートを適用する表示条件を設定します。

テンプレートをプリセットシステムと連携して動作させることを忘れないでください。これにより、ウェブサイトの構築がより速く、より一貫性があり、最終的にはより専門的な包括的な設計フレームワークを作成してください。

4。レスポンシブデザインのマスタリング

Divi 5のレスポンシブデザインは、以前のバージョンにわたって大幅な改善をもたらします。新しいシステムは、あなたのウェブサイトがさまざまな画面サイズにどのように適応するかをさらに制御します。

DIVI 5は、ウェブサイトの応答性を前例のない制御を提供する高度なブレークポイントシステムを導入します。 7つのカスタマイズ可能なブレークポイントは、さまざまなデバイスで正確な設計ターゲティングを可能にします。

• 電話： <767pxは、ほとんどのスマートフォン画面サイズをカバーしています
• 電話全体： <860pxランドスケープモードのほとんどの電話画面をカバーしています
• タブレット： <980pxは、ポートレートモードのほとんどのタブレット画面に適しています
• 幅の広いタブレット： <1024pxは、ほとんどのiPadおよびSamsungタブレットの景観ビューの標準です。
• ワイドスクリーン： > 1280pxは、ほとんどの小さなラップトップにとって良い幅です
• ウルトラウェイド： > 1440pxは、より大きなデスクトップ画面をカバーしています

これらのブレークポイントは、現代のデバイスの多様な景観に対処するために細心の注意を払って設計されています。このアプローチにより、デザイナーは、コンパクトなスマートフォンで見るか、広大な超幅のモニターで見るかに関わらず、完璧に見えるウェブサイトを作成できます。各ブレークポイントは、単なる技術的なしきい値ではありません。テーラードユーザーエクスペリエンスを作成する機会です。

さらに、必要に応じて、ニーズに応じてブレークポイントを調整できます。

5。取得、設定、起動！

Divi 5 Webサイトは構築、最適化され、訪問者を驚かせる準備ができています。あなたのサイトを自信を持ってライブにするために、最後のステップを歩いてみましょう。

さまざまなデバイスでサイトのクイックプレビューツアーを実行します。 Divi 5のレスポンシブデザイン機能はすでに大部分の重い持ち上げを行っているため、これはすべてが見栄えが良いことを確認するだけです。カスタマイズ可能なブレークポイントのおかげで、あなたのデザインは電話からウルトラ全体のモニターにシームレスに適応します。

インタラクティブな要素を再確認します。ナビゲーションリンクをクリックし、連絡先フォームを介してテストメッセージを送信し、追加した特殊な機能を試してください。 Divi 5のクリーンコード構造は、これらの要素が確実に機能することを保証するのに役立ちます。

最終的な研磨タッチ

新鮮な目でコンテンツを確認してください。ビルドプロセス中に見落とされていた可能性のあるタイプミスや厄介なフレージングを探してください。この段階では、大きな変化ではなく、小さな改良に焦点を当てる必要があります。必要に応じて、Divi AIはDivi 5に完全に統合されており、テキストまたは画像を生成、変更、または改善するためにいつでも使用できます。

Diviは、ピクセルに最適なデザインを作成する力を提供しますので、起動前にサイトの結束性を評価してください。デザイン変数とモジュールプリセットを一貫して使用すると、全体に洗練された統一された外観が作成されるはずです。

起動後、Divi 5は引き続き利点を提供します。最新のフレームワークからの速度の改善は、検索エンジンの可視性に役立ち、ユーザーは高速負荷時間とスムーズな相互作用を高く評価します。

どのページが最もトラフィックとエンゲージメントを得るかを視聴してください。これらの洞察を使用して、デザインを改良するか、人気のあるコンテンツセクションを拡張します。 Divi 5の柔軟な構造により、これらの調整が簡単になります。

創造性とDivi 5の強力なフレームワークを組み合わせることで、最新のWeb標準に基づいて構築された視覚的に印象的なWebサイトが生成されます。あなたのサイトは、将来の成長のための柔軟な基盤を提供しながら、訪問者に素晴らしい体験を提供する準備ができています。

Divi 5を使用して、より速く、より良いウェブサイトを構築します

Divi 5は、ウェブサイトクリエイター向けの新鮮な章をマークします。再構築されたシステムは、そうでないものを修正しながら機能したものを保持します。初日との違いに気付くのは、以前に手の届かないところにある、より速い読み込み、よりスムーズな編集、設計の自由です。

あなたの次のウェブサイトは見栄えが良くなるだけではなく、それを構築することを楽しむでしょう。それがDivi 5が提供するものです。あなたとあなたの訪問者のために働くウェブサイトは、頭痛のせいでいません。

試してみる準備はできましたか？今すぐパブリックアルファをダウンロードして、次のプロジェクトが何であるかを確認してください。

DIVI 5は、新しいWebサイトビルドで使用する準備ができています。既存のサイトを移行する前に、完全なリリースを待ちます。