Divi 5でデザインフレームワークを構築します

BootstrapのようなCSSフレームワークを使用したことがあるなら、なぜそれがとても人気があるのか​​わかります。デザインフレームワークは、高速かつ一貫したレイアウトを設計するための再利用可能な基盤を提供するので、ページをスタイリングするたびにゼロから構築することはできません。

ほとんどのフレームワークは事前に作られたクラスに依存していますが、より深いカスタマイズのためにカスタムCSSを作成することを期待しています。これにより、非コーダーにとっては注意が必要です。それがDivi 5が異なるところです。

CSSを設計変数、オプショングループプリセット、要素プリセットなどのツールに置き換える視覚的な最初のアプローチが必要です。 CSSの単一の行を書くことなく、フレームワークのすべての力を得ることができます。この投稿では、Divi 5を使用して視覚的にノーコード設計フレームワークを構築する方法を紹介します。

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のWebサイトをまだ移行することはまだお勧めしません。

Divi 5でノーコード設計フレームワークを構築できる方法

Divi 5は、すべての人が高度なWebデザインにアクセスできるようにするためにゼロから再構築されています。コーディングレベルに関係なく、最新のカスタムレイアウトを視覚的に構築できます。設計フレームワークの構築も例外ではありません。

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

設計変数を使用すると、グローバルな設計値を定義できます

デザイン変数では、ブランドの色、フォント、間隔などなどの繰り返しの値を1つの中央の場所で定義できます。保存すると、これらの値がウェブサイト全体で再利用して、一貫したブランドの視覚的な外観を与えることができます。

Visual Builderの内部では、変数マネージャーを見つけて、さまざまな変数タイプ（数字、テキスト、画像、リンク、色、フォント）を定義および保存します。

設計変数は、CSSカスタムプロパティのノーコードバージョンのようなものですが、はるかに柔軟性があります。たとえば、通常、次のようなCSS変数を宣言します。root{–primary-color：＃1a73e8; } 、しかし、Diviの設計変数を使用すると、色を一次色として保存するだけです。

アップデートを作成しながら、彼らの真の力が見えます。スタイルシートを通過する必要はありません。 Variable Managerで1回保存された変数値を1回変更して、Webサイト全体のすべてのインスタンスを更新するだけです。彼らは、いくつかのスタイルのルールを狩ることなく、あなたのアイデアをすばやく視覚化することができます。

また、アドレス、電子メール、リンク、背景モチーフなどの一般的に繰り返されるコンテンツ要素をコンテンツ変数として定義できます。手動で複数回挿入する必要はありません。ワンクリックとこれらの要素がページに表示されます。たとえば、会社アドレスをテキスト変数として保存して使用します。

設計変数を適用するには、オプションをホバリングし、動的なコンテンツアイコンを探します。

設計変数に関するすべてを学びます

オプショングループプリセットと共通スタイルの組み合わせを保存します

オプショングループプリセットでは、毎回再構築することなく、間隔、境界、影、テキストスタイル、背景など、頻繁に使用される設計設定を保存および再利用できます。モジュール内の1つの特定のオプショングループに焦点を当てているため、その部分をスタイリングして、ワンクリックでどこにでも適用できます。

たとえば、すべての証言セクションで同じ40pxパディングと10pxマージンを常に使用しているとしましょう。それらの設定を間隔プリセットとして保存します。新しい証言モジュールを追加したら、プリセットを選択してください。

オプショングループのプリセットを強力にするのは、デザイン変数と混合できることです。プライマリカラーが変数として保存されている場合は、バックグラウンドプリセット内で使用できます。そのため、ブランドの色が変更された場合、プリセット全体が更新されます。すべてのページの背景は、1回のクリックで変更されます。

オプショングループプリセットは、モジュール全体をオーバーライドするのではなく、選択したスタイルグループにのみ適用されます。ただし、特定のモジュールをカスタマイズするために、モジュール固有の設定でプリセットをいつでもオーバーライドできます。これにより、レイアウトとコンテンツをユニークに保ちながら、サイト全体で一貫したビジュアルスタイリングを確保できます。

オプショングループプリセットに関するすべてを学びます

要素プリセットを備えた完全に設計された要素を保存します

あなたがDiviユーザーである場合、あなたはすでに要素プリセットに精通しています。テキスト、間隔、色、アイコン、ホバーエフェクトなど、モジュールのすべてのカスタムスタイルを要素プリセットとして保存できるため、構築せずにどこにでも再利用できます。基本的に、最もよく使用できるモジュールのすぐにやり取りできるバージョンを作成しています。

クイックユースケースは次のとおりです。BlurbPresetをカスタマイズして保存し、他のスタイルのぼかしに適用して、それらをすばやくスタイリングします。

これらのツールがフロントエンドHTMLでどのように反映されますか

Divi 5は、ノーコードツールのように見えるかもしれませんが、実際にはバックグラウンドでクリーンで構造化されたコードを書き込んでいます。設定を視覚的に調整するとき、間隔プリセットを選択したり、変数マネージャーからブランドの色を適用したりするなど、モジュールをスタイリングするだけではありません。コードも書いています。

あなたが下すすべての設計決定は、適切なフロントエンド出力に翻訳されます。 Diviは、デザインに焦点を合わせている間、コーディングパーツを処理します。

これがどれほど強力かを示すために、Divi 5のビジュアルファーストワークフローを、Bootstrapなどの従来のCSSフレームワークを使用した手動アプローチと比較します。

最初のブートストラップ：

ブートストラップのコードを使用して手動で設計システムを構築します

この例では、アンダーストラップテーマがインストールされたWordPressセットアップを使用しました。

典型的なコードベースのワークフローでは、グローバルな設計値をCSS変数として定義することから始めます。これが私たちのものです：

:root {
 --primary-color: #e91e63;
 --border-radius: 6px;
 --box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

連絡先フォームとカスタムスタイルのボタンを使用して、簡単な連絡先ページレイアウトを構築するとします。すべてを一貫して再利用可能に保つために、ブートストラップのユーティリティクラスと独自のCSS変数の組み合わせを使用します。

まず、レイアウトと入力スタイリングを処理するために、Bootstrapの組み込みフォームクラスを使用して連絡先フォームのカスタムコードを追加します。

次に、スタイルのボタンのコードを追加します。ここでは、Bootstrapユーティリティクラスを、背景、ボーダー半径、および影のカスタムCSS変数と組み合わせました。これにより、ルックアンドフィールを完全に制御できます。変更を行いたい場合は、変数を更新できます。

ご覧のとおり、それは素晴らしく効率的ですが、すべてが手動で構築されています。変数を定義し、クラスを適用し、コード全体をすべて自分で書きました。そして、これは簡単なレイアウトです。このアプローチを使用して複雑なページを構築することを想像してください！

次に、コーディングなしでDivi 5を使用して同じページを構築しましょう。

Divi 5で同じページを視覚的に再作成します

まず、サイト全体の設計システムの一部になるグローバルな設計変数を定義することから始めます。まず、 Variable Manager> Colorsに移動します。次に、一次色（＃e91e63）の16進コードを書き、保存します。

同様に、境界半径{6px}および間隔の数値変数を保存することもできます。次に、連絡先フォームモジュールを追加し、提出ボタンを優先スタイルにカスタマイズします。

次に、これらのボタン設定を後で使用するためのボタンプリセットとして保存します。

別のボタンを追加してボタンプリセットを選択した場合、何が起こるかを確認しますか？自動的にスタイリングされます。

オプショングループプリセットを適用するには、設定の上にホバリングし、設定アイコンを探します。

また、単一のコードに触れずに、ワンクリックで複数のカスタムスタイルをボタンに適用した方法に気付きましたか？これは、デザインの好みを視覚的に保存すると言うときの意味です。これは、Divi 5が構築されているワークフローの一種です。速く、一貫性があり、完全に視覚的です。

舞台裏で起こることは魔法です。 Diviは盲目的にスタックを積み重ねるだけではありません。適用されるすべての設計変数、プリセット、および設定は、フロントエンドにレンダリングされたクリーンで効率的なコードに編成されます。

上記のDiviが設計したページのページソースは、CSS変数と同様に、プライマリ色がルートセクションに保存されていることを示しています。

フロントエンドでは、オプショングループプリセットが自動的に保存され、適切なクラス（.et_pb_button、.et_pb_contact_submit）をターゲットにしたクリーンなCSSとして出力されます。

両方のページは同じように見えますが、それらがどのように構築され、維持されたかは完全に異なります。

Bootstrapでは、ユーティリティクラスの恩恵を受けましたが、それでもコードを作成する必要がありました。しかし、DIVI 5では、デザイン変数やオプショングループプリセットなどの強力な機能を使用することによってのみ、コードの行に触れることなく同じ結果を達成しました。

それぞれの変更は、矛盾のリスクはなく、数回クリックして適用されましたが、フロントエンドコードはクリーンなままでした。 Diviは、不必要なマークアップやインラインスタイリングを追加せずに、構造化された再利用可能な形式でスタイルを保存します。

Divi 5でデザインフレームワークを構築する方法

Divi 5は、スケーラブルな設計システムを構築するためのすべてのツールを提供しますが、従来の開発と同様に、これらのツールを使用する順序が重要です。階段を通り抜けて、さらに重要なことに、理由を理解しましょう。

1.グローバルな設計変数を定義します

ページを設計する前に、グローバルデザイン変数を定義することから始めます。これらは、色、フォント、サイズ、間隔ユニットなど、サイト全体が依存するコアバリューです。サイトのビルディングブロックを定義すると、どこにでも再利用して、すべてを一貫性があり、清潔で、簡単に管理できます。

Divi 5には、それらを作成および整理する変数マネージャーがあります。

強調表示された変数タイプが役割を果たしている方法は次のとおりです。

• 色：ブランドのプライマリ、セカンダリー、アクセントの色を保存して、ヘックスコードを入力したり、シェードを一致させる必要がないようにします。色変数を保存し、ワンクリックで適用します。
• フォント：見出し、ボディテキスト、または証言に使用する正確なフォントを定義します。 H2を作成するたびにPoppinsを再選択する代わりに、フォント変数として保存します。モジュール全体で同じスタイルを簡単に再利用できるようになります。
• 数字：カード用の8pxボーダー半径や、画像モジュールの32pxパッドなどの設計値を数値変数として保存します。また、数値変数内の高度なユニットを使用して、動的なデザインを作成することもできます。

コア変数が設定されると、ビルドするすべてのプリセットとページがそれらに依存します。また、デザインの方向が後で変更された場合（たとえば、ベース間隔を調整する必要がある場合） 、1つの場所で変数を更新するだけです。

設計変数を正しく定義した後、すべてのインスタンスを狩り、変更する必要はありません。変数マネージャー自体で値を1回変更するだけです。

2。グローバルに繰り返しコンテンツを保存します

Variable Managerを使用して、サイト全体で繰り返されることが多いリンク、テキスト、画像などのコンテンツ値を保存することもできます。通常、これらの値を毎回コピーして貼り付けますが、Divi 5を使用すると、それらを一度定義し、どこでも再利用できます。

これは、ソーシャルメディアリンク、会社の連絡先の詳細、および手動で追加する必要があるその他の繰り返しコンテンツの保存に特に役立ちます。

残りの3つの変数を使用してコンテンツを保存できます。

• テキスト：会社の住所がフッター、連絡先ページ、ホームページのヒーローセクションに表示されるとしましょう。テキスト変数として保存し、アドレスを表示したい場所に選択します。
• リンク：リンク変数として、Aboutページ、製品コレクション、ソーシャルプロファイル、または利用規約にURLを保存します。
• 画像：複数のページでブランドロゴまたは背景画像を使用する場合は、画像変数として保存します。クリックでテンプレート全体でプレースホルダー画像を置き換えることを想像してください！

DIVI 5では、テキスト、リンク、画像を再利用可能なビルディングブロックとして扱うことができます。これらのコンテンツ変数は小さく感じられるかもしれませんが、速度、精度、長期的なメンテナンスに大きな影響を与えます。時間を節約し、エラーを減らし、サイトを一貫して更新します。

3.オプショングループプリセットを使用してコアスタイルを作成して保存します

設計変数が整ったら、次のステップは、オプショングループプリセットを使用してサイトのコアスタイリングパターンを定義することです。一般的に使用される設計設定をプリセットとして保存し、任意のモジュールでそれらを再利用します。

オプショングループプリセットを最大限に活用する方法は次のとおりです。

1.一般的なスタイルにプリセットを保存します

ボーダー半径、背景色、間隔など、最も頻繁に使用する設定のプリセットを保存することから始めます。私は常に40pxのトップパディングを使用し、 10pxの下部マージンを証言に使用しているので、それらの値を間隔プリセットとして保存しました。

その間隔を即座に紹介することができます（必要に応じて他のモジュール） 。一貫して再利用するすべての設定グループにこれを行います：境界線、ボックスシャドウ、ボタンの背景など、ページを構築するときにそれらを再利用できます。

2。設計変数をプリセットと組み合わせます

次に、設計変数とオプショングループプリセットを組み合わせることにより、フレームワークを強化します。 6pxのボーダー半径を数値変数として保存し、オプショングループプリセットの作成中に使用したとしましょう。後で変数を変更すると、プリセットもサイト全体で自動的に更新されます。

同様に、レスポンシブテキストのCLAMP（）値を使用してFluid Typographyを作成できます。それをH1プリセット内に保存し、レイアウト全体で見出しに一貫して適用します。プリセットと変数のこの組み合わせは、視覚的なフレームワークが実際にモジュール式、スケーラブル、メンテナンスが簡単になり始める場所です。

また、オプショングループプリセットをデフォルトとして保存することもできます。つまり、スタイルは新しいモジュールにも自動的に適用されます。一般的なプリセットにデフォルトを適用して、毎回プリセットを選択する必要さえないようにします。

4.要素プリセットを作成します

要素プリセットは、設計フレームワークを完了します。優先スタイルをプリセットとして保存した後、モジュールスタイルを要素プリセットとして保存する必要があります。

これは、CTA、証言、ぼやけ、接触フォームなど、頻繁に使用するモジュールに特に役立ちます。たとえば、ブランドの色、柔らかい影、特定のパディングを備えたCTAボタンをスタイルにした場合、プライマリライトと呼ばれるプリセットとしてそのデザイン全体を保存できます。その後、ワンクリックで新しいボタンに即座に適用します。

要素プリセットをデフォルトとして設定します

任意の要素プリセットをデフォルトとして設定することもできます。そのため、そのタイプのすべての新しいモジュールは、保存されたデザインスタイルに自動的に従います。上記のプライマリライトボタンプリセットをデフォルトとして保存すると、新しいボタンがそのスタイルを継承していることがわかります。

デフォルトでは、ワークフローをスピードアップすると、必要に応じてそれらをオーバーライドできます。しかし、ほとんどの場合、明確に定義されたプリセットを持つことで、繰り返しの作業が減少し、デザインの推測が削除されます。これらの3つの機能を組み合わせることで、Webサイトの構築を完全にコードなしに構築するプリセットベースのデザインフレームワークに従います。

デザインフレームワークに基づいて新しいページを設計します

優先デザイン変数、オプショングループプリセット、および要素プリセットをすべて保存したので、フレームワークをテストしましょう。

新しいページを構築することは、はるかに速く、より簡単な体験になりました。すべてのモジュールをゼロから始める必要はありません。必要なものはすべて既にセットアップされています。

ご覧のとおり、数回クリックして複数の設計変更を適用しました。はい、事前に作られたDiviレイアウトをインポートしましたが、保存されたフレームワークを配置して数秒でカスタマイズしました。

フォントを選択したり、間隔を調整したり、色を手動で微調整する代わりに、保存したプリセットを適用しました。ボタンのデザイン、テキストサイズ、背景スタイル、画像の境界線はすべて、以前に構築したフレームワーク設定に従いました。

これらのスタイルを1つのモジュールに手動で適用することは大したことではないかもしれません。しかし、ページ全体をカスタマイズするとき、違いは明らかです。これらすべての変更を行った容易さと速度に気付くことができます。これは、デザインフレームワークを作成することの真の利点です。品質や一貫性を犠牲にすることなく、ワークフローを高速化します。

最良の部分は、更新を行う際に来ます。私のグローバルな値が変化した場合、変数マネージャーを介して保存された設計変数を変更するだけです。また、小さな設定アイコンをクリックして、オプショングループと要素プリセットを変更することもできます。

これは、Divi 5があなたにもたらすPowerです。単一のコードに触れずに、デザインフレームワーク全体を作成、保存、カスタマイズすることができます。

視覚的にノーコード設計フレームワークを構築します

デザインフレームワークを作成することは、開発者だけのものではありません。適切なツールを使用すると、これまでコードに触れたことがなくても、誰でもそれを行うことができます。この投稿全体で見たように、それが必要なのは、独自の設計システムを作成するためのいくつかのスマートな手順です。どうやって？ Divi 5を使用して。

Divi 5は、それを実現するためのツールを提供します

DIVI 5は複雑さを処理し、その高度な機能を通じて完全な制御を提供します。視覚的なビルダーを離れることなく、より速く構築し、一貫性を保ち、グローバルな更新を行うことができます。かっこいいね？しかし、それは氷山の一角に過ぎず、私たちは始めたばかりです！

リリースのためにさらに多くの驚くべき機能が並んでおり、あなたがそれらを試すのを待つことができません。今すぐパブリックアルファをダウンロードして、制限をコーディングせずに独自の設計フレームワークを構築してください。

Divi 5は新しいWebサイトで使用する準備ができていますが、既存のWebサイトをまだ移行することはまだお勧めしません。