拡張属性を使用して5分でウェブサイトをブランド変更します

あなたのウェブサイトをブランド変更することは完全な再構築を必要としませんが、それはしばしばそのように感じます。フォントは別々の部品に貼り付けられ、色はセクションに広がり、間隔は個々の設定に隠されています。また、ホームページを更新した後、同じ変更が必要な他のページが見つかります。それは通常のルーチンですが、より速い方法があります。

Divi 5の拡張属性を使用すると、単一の要素をスタイリングして、行、セクション、さらにはページ全体にわたるすべての類似のモジュールに即座に適用できます。数時間ではなく数分で完全なウェブサイトをブランド変更するためにそれを使用する方法を説明しましょう。

divi 5の拡張属性とは何ですか

拡張属性は、1つのモジュールの設計を取得し、周囲の他の要素またはモジュールに適用できるDivi 5機能です。これは、ボタン、見出し、またはテキストブロックのスタイルを整えた場合、他の要素に拡張できるため、これらのスタイルをゼロから再作成する必要がないことを意味します。

これが実際にどのように機能するかです。視覚ビルダーのモジュールを編集することから始めます。次に、モジュールごとにこれらの変更モジュールを繰り返す代わりに、モジュールを右クリックして拡張属性を選択します。

Diviは、それらのスタイルをどこに行きたいかを尋ねます。確認すると、すべての一致するモジュールが同じスタイルを採用します。拡張属性は一致するものを探しませんが、現在の外観をコピーして、選択したターゲットに適用します。

これにより、各ブロックをマイクロ管理することなく、デザインの変更を展開する最速の方法の1つになります。ゼロから構築したり、レイアウト全体をブランド変更したりしても、繰り返しスタイリングを単一のアクションに変えるのに役立ちます。

属性をどのように拡張するかは、ウェブサイトをより速くブランド変更するのに役立ちます

拡張属性を単独で使用する方法と、オプショングループプリセットを使用して、ウェブサイトのブランド変更プロセスをスピードアップする方法を説明します。

DIVI 5の拡張属性を使用します

プロセスはシンプルです。1つのモジュールのスタイル、右クリックして属性を拡張し、1つの設定パネルを2回開くことなく、それらの設計の選択肢をすべての類似のモジュールに拡張します。実際の例を使用して、それを歩きましょう。

すべての行動を促すボタンをブランド変更したいとします。ビジュアルビルダー内の1つのボタンモジュールをスタイリングすることから始めます。

完了したら、右クリックして拡張属性を選択します。 （コンテンツではなくスタイルのみを拡張したいので、拡張ボタン設計属性を選択しました。また、特定のプロパティをマイクロ選択するのに役立つ多くのオプションにも気付くでしょう。）

拡張属性パネルが開き、いくつかの異なるオプションから選択して、設計の変更を適用する方法と場所を決定できます。

• （1）要素から拡張：拡張するモジュール、場合のボタンのように。これは、右クリックしたものに基づいて自動的に入力されます。
• （2）場所への拡張：デザインがどこまで進むべきかを選択します。ページからすべてのボタンを変更したいので、ページ全体を選択しました。
• （3）要素タイプに拡張します：どのモジュールタイプを新しいスタイルを受信するかを選択します。たとえば、ボタンモジュールまたはすべての同様のモジュールのみ。
• （4）拡張する属性タイプ：コピーするものを指定します。私たちはデザインの属性を選び、他の人を除外しました。
• （5）拡張するオプショングループ：適用するオプショングループを決定する：テキスト、ボタン、ボーダー、間隔など。
• （6）拡張するために変更されたフィールド：選択を1つのスタイルプロパティのみに制限するか、すべての変更されたフィールドを選択して、作成したすべての変更を拡張することもできます。

設定を選択したら、 [拡張属性を拡張する]をクリックすると、新しいスタイルがページ上の他のすべてのボタンに適用されます。

一致する値を検索する必要がないことに気づきましたか？これは、拡張属性が元のスタイルが何であるかを気にしないためです。選択したモジュールから現在の外観をコピーし、選択した場所のすべての同様のモジュールに直接貼り付けます。

これが、レイアウトパックや既存のWebサイトに非常に役立つものです。拡張属性は、フォントサイズの調整、色の更新、または微調整など、1つのスタイルのモジュールとワンクリックで完全なコントロールを提供します。

拡張属性に関するすべてを学びます

拡張属性を持つオプショングループプリセットを使用します

複数のページを持つWebサイトで作業している場合、スタイルを視覚的にコピーするだけでは不十分です。固執するシステムが必要です。そこにプリセットが入ります。

プリセットでは、モジュール内にスタイルのグループを保存し、サイト全体でそれらを再利用できます。それを拡張属性と組み合わせると、1つのページだけでなくウェブサイト全体をブランド変更する高速で柔軟な方法があります。また、この組み合わせは、ウェブサイトを将来的に維持するのにも役立ちます。そのため、再度ブランド変更する必要がある場合は、使用しているプリセットとすべてのモジュールを簡単に変更できます。

これがどのように機能するかを理解するために、ボタンの例に戻りましょう。

真新しい外観の1つのボタンのスタイルを整えました。ここで、設定を静的値として拡張する代わりに、プリセットとして保存します。

拡張属性が登場する場所です。拡張属性をクリックすると、保存したプリセットが表示されます。選択したプリセットのみを拡張する場合は、個別に選択するか、すべてを引き継ぐために拡張ボタンプリセットを選択します。

拡張すると、Diviは外観をコピーするだけではありません。舞台裏で保存されたプリセットを適用します。したがって、触れる他のボタンは、同じプリセットを使用するようになりました。

なぜ別のステップを追加するのですか？これは、将来のウェブサイトの利益に役立つ場所です。今後数か月で、後でボタンスタイルを微調整することにしたとします。スタイルをもう一度拡張しますか？いいえ、そうですか？

さて、プリセットを1回だけ更新する必要があるため、あなたもそうする必要さえありません。すべてのボタンモジュールは同じプリセットで構築されているため、すべてのインスタンスを使用して自動的に更新します。

さらに、保存すると、オプショングループプリセットは他のページでも利用できます。したがって、ホームページのブランド変更と他の人に移動した場合、保存したプリセットを適用して数分で拡張するだけです。

そのため、拡張属性を備えたオプショングループプリセットを使用することは、ブランドを変更するためのより革新的な方法です。視覚的な一貫性と、作業をやり直すことなく更新しやすいシステムが得られます。

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

これを自分で試してみませんか？ divi 5が必要です。これには、拡張属性、オプショングループプリセット、およびその他の機能を新しいビルダーにもたらします。スピード、コントロール、より滑らかなデザインワークフローのために、ゼロから再設計されています。

拡張属性を備えたWebサイトをブランド変更する方法

拡張属性がどのように機能するか、そしてそれがオプショングループプリセットとどのようにペアになるかを見たので、今度はそれを実際のウェブサイトに適用する時が来ました。

このウォークスルーには、AIソフトウェアレイアウトパックを使用します。これは、家、連絡先、価格などのページを備えた完全なWebサイトです。ここでは完全なオーバーホールを目指していません。それは単なる軽いブランドであり、私たちが毎月の更新で通常行う種類です。

開始するには、ボタン、見出し、ぼやけ、ボディテキストなど、サイトの視覚的アイデンティティを定義する要素を見てください。これらのモジュールは複数のページに表示され、ブランドの個性のほとんどを抱えています。それらのほんの一部を再開したら、属性を拡張すると、それらが見えるすべての場所にそれらの変更をプッシュできます。

更新するものを正確に説明しましょう。

レイアウト全体にキーモジュールを視覚的にブランド変更します

ホームページは、サイトの残りの部分のトーンを設定するため、開始します。ほとんどのWebサイトは、複数のページで同じデザインパターンを繰り返すため、ホームページを更新すると、他のすべての基盤ができます。

レイアウトをスキャンした後、ブランドのルックアンドフィールを形作る最も目に見える要素を特定しました。これらは、ボタン、見出し、ぼやけ、ボディテキスト、画像です。すでにボタンをブランド変更しているので、見出しから始めます。

ヘディングモジュールのブランド変更

まず、新しいブランディングを反映するように見出しモジュールをカスタマイズします。 H4Sから始めます。

スタイリングに満足したら、モジュールを右クリックして拡張属性を選択します。ページ全体のスコープとモジュールタイプをテキストに選択します。ページ上のすべてのH4モジュールに変更を適用します。

同様に、H1、H2、およびH4Sをブランド変更してタイポグラフィを統合し、各見出しモジュールを手動でレストすることなく、わずか数回クリックしてサイトに一貫した音声を与えます。

より良い読みやすさのためにボディテキストをブランド変更します

それでは、ボディテキストを更新しましょう。段落ブロックでテキストモジュールを選択することから始めます。ブランドのトーンに合わせてカスタマイズします。変更に満足したら、モジュールを右クリックして拡張属性を選択します。ページ上のすべてのテキストモジュールに更新を適用することを選択します。

これにより、段落はページ全体で数秒で一貫したスタイルを与え、それぞれを個別に編集する必要性を排除します。

ブランドブランドの境界をブランド変更します

次に、すべての宣伝文字モジュールを合理化するために境界線を追加したいと思います。したがって、1つの列をスタイルし、行のデザインタブの列を右クリックして、スタイルをコピーすることを選択します。次に、次の列などにスタイルを貼り付けます。

行のレイアウトを変更してフレックスとDiviを変更して、列の高さを自動的に均等にし、含めるコンテンツの量に関係なくぼやけを整列させます。これは、DiviがFlexBox機能をサポートするようになったため、これは機能します。

保存されたプリセットを使用して他のページをブランド変更します

ホームページが更新されたので、プロセスをゼロから繰り返す必要はありません。セクションまたは行を他のページに複製することができます。または、新しいスタイルをオプショングループプリセットとして保存したため、すでに設定されています。

保存したプリセットは、すべてのページに表示されます。

必要な場合に必要なことは、必要に応じて適用し、使用して属性を拡張してスタイルを即座にプッシュすることです。手動編集も繰り返し設計作業もありません。

同じプロセスに従って、ウェブサイトの他のページをブランド変更できます。

拡張属性により、再びブランド変更を楽しむ柔軟性が得られます。ページ全体でモジュールを視覚的に停止させたいときは素晴らしいです。

ただし、異なるモジュールで16進コード、フォントサイズ、間隔ユニットなどの特定の値を交換する必要がある場合は、見つけて交換してみてください。ハードコーディングされた値を使用するレイアウトパックで特にうまく機能します。検索と交換を使用して、保存された設計変数と交換して、将来の更新により柔軟性を高めることができます。

プロのヒント：デザイン変数を使用して属性を拡張します

属性を拡張することは、静的スタイルをコピーするだけではありません。また、保存された設計変数を引き継ぐこともできます。たとえば、見出しフォント変数を1つのテキストモジュールに割り当てた場合、そのモジュールの設定をページ上の他のすべてのテキストモジュールに拡張できます。ハードコーディングされた値を持つ各見出しの代わりに、それらはすべて同じ変数を継承します。

これは、将来の更新がさらに簡単になることを意味します。変数マネージャーで変数を一度調整し、すべての拡張モジュールの更新を自動的に調整します。これは、拡張属性とDivi 5の変数システムを組み合わせて、スケーラブルでブランド全体の制御を組み合わせた強力な方法です。

拡張属性を使用すると、再構築せずにブランド変更できます

ブランド変更は再構築を意味する必要はありません。拡張属性を使用すると、1つのモジュールをスタイルし、その外観を残りに適用し、編集の時間を数秒に減らします。

レイアウトパックで作業している場合でも、ライブサイトを更新する場合でも、Divi 5は、すべての要素に触れることなくデザインを更新する最速の方法を提供します。