Divi5でページデザインを更新する最も簡単な方法

Divi 5は、より速く作業し、より自由にデザインするのに役立ついくつかのスマートな新しいツールを紹介します。しかし、あなたの指先に非常に多くのパワーがあるので、特に既存のレイアウトを更新するとき、どこから始めればいいのかわからないことは簡単です。

おそらく、間隔を微調整し、色を調整し、レイアウトをクリーンアップする方法をすでに知っているので、この投稿は基本の再学習に関するものではありません。 Divi 5を使用してより速く行うことです。下の手順では、既存のページで従うことができる実用的な更新ワークフローを進めます。そして、最近の変更が圧倒的であると感じた場合は、ここから始めてください。明確さと自信を持って快適に過ごすことができます。

Divi5でページデザインを更新する8つのステップ

このチュートリアルでは、Divi Layout PackライブラリのビジネスCVランディングページを使用しています。

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

Divi 5の新しいツールを使用してページを更新する方法を説明し、検索と交換、設計変数、属性を拡張してワークフローを高速化し、繰り返し編集を減らします。始めましょう。

1。注意散漫のない編集のためにダッシュボードを最適化します

軽微な中断でさえ、レイアウトを更新するときに焦点を破ることができます。セクションの間をジャンプし、繰り返し設定を開き、中断した場所を追跡することができます。これらの種類の遅延は、特により長いまたはより複雑なページで、すぐに増加します。

DIVI 5は、より柔軟な編集環境でその摩擦を減らすのに役立ちます。ドックパネルにキー設定を表示し、タブに複数のモジュールを開き、レイヤーパネルを使用して無限のスクロールせずにレイアウトをナビゲートできます。モジュールの内外をクリックする代わりに、移動するときにすべてを開いてアクセスしやすいままにすることができます。

レイヤーパネルには、レイアウトの完全な構造の概要を提供するため、クリックするだけで任意のセクション、行、またはモジュールに即座にジャンプできます。スクロールせずに大きなページを飛び越えるのに特に便利です。

以前、ワークフローは、モジュールを開き、保存し、再びスクロールし、次のモジュールを開き、そのサイクルを繰り返すことを意味することがよくありました。 Divi 5はそれをすべてスキップします。いくつかのモジュールを背中合わせに開くことができます。それぞれは、編集パネルのタブとして表示されます。これにより、要素設定を繰り返し閉じて再開することなく、設定を比較したり、要素間の切り替えを簡単にします。

新しいワークフローに慣れるには、調整が必要になる場合があります。パネルの動作が異なるため、モジュールを切り替えることはすぐに2番目の性質を感じません。しかし、少し練習をしてください、そして、これらの小さな変更は合計され始めます。

以下の手順に従っているときは、パネルを別の方法で作業するか、いくつかのドッキング、タブにカップルを積み重ねるか、レイヤーパネルを開いたままにしてください。あなたはあなたの流れに最適なものを感じ始めます。

2.最初にグローバルな設計変数を設定します

完全なレイアウトを管理しているとき、最後に望むことは自分自身を繰り返すことです。しかし、それはまさに各スタイルが各モジュール内に手動で設定されたときに起こることです。最初は動作するかもしれませんが、時間が経つにつれて、ページは切断された選択のパッチワークに変わります。最終的に、何かが常に見逃されます。

設計変数はそれを回避するのに役立ちます。彼らはあなたにあなたのデザイン言語を定義するための中心的な場所を与えます。フォント、色、間隔、画像、URL、またはリンクの再利用可能な値を定義します。適用されると、これらの値はそれらを使用するすべてのモジュールにリンクされたままです。

これが簡単な例です。すべての見出しにLatoフォントを使用したいとします。すべてのモジュールでLATOを選択する代わりに、フォント変数を作成します。名前を付けて、 Latoを選択し、保存します。あなたがその変数に結び付ける見出しは、これで同期し続けます。

後で別のフォントに切り替える場合は、変数を更新してください。すべての接続されたモジュールは、変更を自動的に反映します。

そして、それは1つのユースケースです。また、一貫したセクションパディング、ボタンスタイル、背景色、または繰り返し使用するものの変数を設定することもできます。あまりにも圧倒的だと感じるなら、すべてを一度に定義する必要はありません。あなたが再利用することを知っているスタイルから始めて、そこから設計システムを拡張します。

3.静的値を設計変数に置き換えます

レイアウトにはハードコーディングスタイルがある場合があるため、それらを更新するとプロセスが矛盾します。そのため、静的値を定義したばかりのグローバル変数に置き換えます。

それらを個別に追い詰める必要はありません。 Diviの検索および交換ツールにより、数回クリックして変数の静的値を簡単に交換できます。見出しがすべて手動で選択されたフォントを使用しているとしましょう。見出しモジュールを開き、フォントフィールドをクリックし、検索と交換を選択します。

交換値パネルで、フィールドの上にホバリングし、変数マネージャーを開きます。すべての見出しフォント変数を選択し、変更を確認します。

魔法がすぐに表示されます。レイアウト全体のフォントのすべてのインスタンスがすぐに交換されます。この同じ方法は、色、間隔、ボタンスタイル、および変数を設定したもので機能します。

そして、あなたは一度にすべてを変える必要はありません。セクションパディングやボタンの背景など、最小のスタイルを再利用し、最初に切り替えるように、小さなスタイルを開始します。あなたのレイアウトは、手動編集のパッチワークから完全に接続されたシステムに移行します。そして、そのシステムが整っている場合、すべての将来の変化は、デフォルトでより容易、より速く、より一貫性があります。

4.拡張属性を使用して、数秒で更新を適用します

グローバルな価値が整ったら、次のステップは改良です。多くの場合、個々のセクションに小さな微調整を行い、作業をやり直さずにそれらの変更を残りのレイアウトに持ち込むことを願っています。拡張属性で可能です。

1つの要素からスタイル、コンテンツ、またはプリセットを即座にコピーして、他の要素に適用できます。また、モジュールが同じタイプでなくても機能します。たとえば、1つの画像のカスタムボーダーとシャドウを設計した場合、セクション内のすべての画像の参照として使用できます。

スタイルの画像を右クリックして、拡張属性を選択します。

拡張パネルが開いたら、それを横にドッキングします。おそらくそれに戻ってくるでしょう。ドロップダウンで、スコープを親セクションに設定し、要素タイプを画像に設定し、確認します。

その1つのアクションは、個別に触れる必要なく、そのセクションのすべての画像に更新を適用します。

そして、それが拡張属性が本当にその場所を獲得する場所です。一連のマニュアルで反復的な編集であったものを取り、それらを1つの一貫した動きに変えます。画像ギャラリーやぼかしなど、複数の類似の列またはモジュールを備えたセクションに使用できます。すべてのモジュールで時間を燃焼せずに、デザインにポリッシュ感をもたらす最速の方法です。

5.オプショングループプリセットとして再利用可能な編集を保存します

レイアウトを絞り込むと、間隔、境界、または背景色を調整して、物事を正しく取得する可能性があります。これらの調整を毎回繰り返す代わりに、オプショングループプリセットとして保存します。

列の間隔、境界線、背景をカスタマイズしたとします。あなたはそれがどのように見えるかが好きで、他の場所でそれを再利用したいです。その列の設定を開き、変更したスタイルグループ（間隔や境界など）にスクロールし、プリセットアイコンをクリックして保存します。

プリセットを他の列に適用するには、オリジナルを右クリックして[拡張属性]> [拡張列プリセット]を選択します。パネルで、スコープを親の行に設定し、列を要素タイプとして選択し、拡張属性を押します。

その1つのプリセットは、1つの動きで行のすべての列に適用されます。これは、価格設定テーブル、ぼかし、声、または手動での努力なしで視覚的な一貫性が必要な場所などの要素を繰り返すレイアウトに特に役立ちます。また、プリセットはレイアウトパックに保存されるため、他のページでも使用できるようになります。

6.コピー/貼り付けを使用して、1回限りの変更を迅速に変更します

スタイルを完全なセクションまたは列に拡張したら、小さくターゲットを絞った微調整を作成することをお勧めします。たぶん、1つの列またはモジュールにはわずかに異なる外観が必要です。プリセットを再度拡張する代わりに、属性管理機能を使用します。

たとえば、列の境界線と影をカスタマイズし、他の1つまたは2つだけが一致するようにしたい場合は、スタイルのある列を右クリックしてコピーアイテムスタイルを選択します。次に、更新する列を右クリックして、アイテムスタイルを貼り付けて選択します。

これは他の設定を上書きしたり、即座に機能したりすることはなく、柔軟性を維持したい状況に最適です。ほぼすべての要素からスタイルをコピーして貼り付け、間隔、色、境界線、その他のデザインの調整など、コピーするものを正確に決定できます。

拡張属性はバルク編集を処理し、詳細をコピー/貼り付けます。ほとんどが完了しているが、それでもいくつかの個人的なタッチが必要なレイアウトを微調整するのに最適です。

7.カスタムブレークポイントを切り替えて、レスポンシブビューを完成させる

すべての画面サイズでデスクトップレイアウトが素晴らしく見えることを確認してください。 Divi 5のカスタマイズ可能なブレークポイントは、タブレット、電話、さらにはカスタム画面の幅を1回クリックして切り替えることで、これを簡単にします。デバイスのアイコンはビルダーの内側にあるため、セクションの動作をより小さな画面ですばやくプレビューできます。

必要に応じて、独自のブレークポイントを定義して、さらに制御することもできます。

これは、間隔、フォントサイズ、画像アライメントを確認するのに最適な時期です。数分しかかかりませんが、特にコンテンツが多いまたは変換に焦点を当てたページで、より大きなレイアウトの問題からあなたを救います。ワークフローを変更する必要はありません。 Diviツールは、レスポンシブビューで同様にスムーズに機能するため、調整を行い、レイアウトをプレビューし、先に進みます。

8.デザイン変数を更新して、レイアウト全体を即座に更新します

以前には、Global Design変数を設定し、検索と交換を使用して静的値を置き換えました。そして今、あなたのレイアウトは集中設計システムに完全に接続されています。

設計変数は、ウェブサイト全体の更新を非常に簡単にします。ブランドがタイポグラフィまたはメインカラーを更新するとしましょう。各モジュールを掘り下げて同じ変更を繰り返し行う代わりに、保存された変数を更新するだけです。その1つの変更は、レイアウト全体に即座に適用されます。

これを実行していることを確認するには、このサイドごとの比較をご覧ください。レイアウト構造は同じままですが、その背後にあるプロセスは劇的にシンプルで高速になります。

次に、この拡張方法について考えてください。あなたのウェブサイト全体、すべてのページとセクションが同じシステムに基づいて構築されていることを想像してください。変更ごとにステップをたどることはもうありません。変数への単一の調整は、すべてを更新します。変数マネージャーを介して値を管理することにより、ブランド全体を管理しています。

この種の柔軟性は、まさにDivi 5が設計されたものです。編集が速いだけでなく、繰り返しを減らし、精度を高め、より少ない労力でより多くのコントロールを提供することについてです。

Divi 5ワークフローをカスタマイズします

今では、デザイン変数、拡張属性、オプショングループプリセットなどのツールがレイアウトの更新方法を再構築する方法を見てきました。しかし、それらを使用する単一の方法はありません。

このウォークスルーは、プロセスの1つのバージョンにすぎません。別の順序で手順に従うか、いくつかスキップするか、自分のルーチンにブレンドすることができます。そして、それは完全に大丈夫です。目標はフォーミュラに従うことではなく、自然に感じられ、あなたが仕事をしたい方法に合うリズムを見つけることです。

少し実験してください。ツールを使用すればするほど、フローに最適なものを認識し始めます。物事がよりスムーズに感じられ、更新がより速く、デザインが一貫している場合、それが機能しているという兆候です。

そして、あなたがあなたのワークフローが進化するにつれてこれらのツールが追いつくことができるかどうか疑問に思っているなら、彼らは絶対にできます...

Divi 5はあなたの働き方に適応するように設計されています

それは私たちがカバーしたすべての機能の背後にある考え方です。あらゆるスタイルを前もって定義したり、構築するにつれて変更を加えたい場合でも、ツールはあなたがどのように機能するかに適応します。

すぐに移動したり、時間をかけたりすることができます。空白のページから始めたり、既存のレイアウトを改良したりします。ビルダーは、あなたを厳格なワークフローに強制しません。忙しい仕事を減らし、繰り返し編集をスキップし、実際に重要なこと、つまり明確さ、スピード、自信を持ってデザインするのに役立つように構築されています。

最終的に、それはあなた自身のように感じるプロセスを構築し、あなたのプロジェクトやアイデアが成長するにつれてあなたに留まることです。あなたと一緒に改善するデザインワークフローを構築する準備はできていますか？