次のDiviWebサイトのグローバルプリセットスタイルガイドの設定（無料のフレームワークダウンロード！）

ちょっとディビネーション！ 毎週開催されるDiviDesign Initiativeの次回の記事にご参加いただき、ありがとうございます。毎週、新しい景品をプレゼントしています。 本日、構築を計画しているすべてのWebサイトで使用できる無料のグローバルプリセットスタイルガイドフレームワークを共有します。 Diviのグローバルプリセットは、Webデザインプロセスをすぐにスピードアップするのに役立ちますので、見てみましょう！

グローバルプリセットスタイルガイドフレームワークをダウンロードする

無料のグローバルプリセットスタイルガイドフレームワークを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

次のDiviWebサイトのグローバルプリセットスタイルガイドの設定

グローバルプリセットスタイルガイドとは何ですか？

グローバルプリセットスタイルガイドは、DiviWebサイト内で使用するためにスタイリングする最も重要な要素の概要です。 これは3つの部分で構成されています。

1.カラーパレット

2.テキストスタイル

3.モジュールスタイル

グローバルプリセットはモジュールだけでなく、列、行、セクションにもグローバルプリセットを含めることができますが、上記の3つの部分であるWebサイト全体で最も均一な要素のいくつかに焦点を当てています。 アイデアは、すべての要素を1つの場所でスタイル設定し、適用したデザインスタイルに満足したらすぐに、さまざまなテキストスタイルとモジュールスタイルをグローバルプリセットに変換できるということです。

カラーパレットは、Diviテーマオプションに追加できるものですが、それについては投稿のさらに下にあります。 ページやテンプレートをデザインする際にも、スタイルガイドを別のウィンドウに保持することができます。 これにより、設定を1つずつ手動で適用するのではなく、グラデーションの背景設定をコピーして貼り付けることができます。

グローバルプリセットスタイルガイドを作成/使用するタイミング

できれば、ページやテンプレートなどを作成する前に、グローバルプリセットスタイルガイドを作成して使用を開始することをお勧めします。その背後にある理由は、デザインの作成中に、移動する代わりにグローバルプリセットにすぐにアクセスできるためです。デザインに戻り、要素レベルでインラインスタイルをリセットし、グローバルプリセットを適用します。

スタイルガイドを作成した後にDiviビルドプロセスを開始すると、個々の設定内のモジュールに手動で変更を加える必要がなくなります。 グローバルプリセットを最初から使用している場合は、それらを1か所で変更して、変更がWebサイト全体に一度に展開されるのを見ることができます。

この投稿で共有している無料のグローバルプリセットフレームワークスタイルガイドは、デザインのインスピレーションフェーズに入るのに役立ちます。 自分でスタイルガイドを作成する代わりに、調和とバランスの取れたデザインスタイルの作成に集中できます。 スタイルガイド内でUI要素のスタイル設定が完了するとすぐに、それらをグローバルプリセットに変換して、ページやテンプレートを作成するときに使用できるようになります。

グローバルプリセットスタイルガイドの使用方法

フレームワークレイアウトをダウンロードしてDiviライブラリにアップロードする

この投稿で無料のグローバルプリセットスタイルガイドフレームワークレイアウトをダウンロードすることから始めます。 次に、ダウンロードフォルダーを解凍したら、Webサイトのバックエンド内のDiviライブラリに移動し、上部にある[インポート/エクスポート]をクリックします。 そこで、「インポート」タブに切り替えて、ダウンロードフォルダにあるスタイルガイドフレームワークレイアウトをアップロードします。

レイアウト用の新しいドラフトページを作成し、フレームワークレイアウトをアップロードします

レイアウトがアップロードされたら、ライブラリ自体の中で開くか、別のページの下書きを作成できます。 ページエクスペリエンスを継続するために、2番目のオプションを選択します。 新しいページを追加し、「保存したレイアウト」内のレイアウトを見つけます。

カラーパレットを設定する

スタイルガイドフレームワークに入ると、選択したカラーパレットを設定できるようになります。 追加する色の数は完全にあなた次第です。 スタイルガイド内の色を視覚的に表示するために、テキストモジュールの背景設定を使用しています。 そのテキストモジュールを開き、その背景設定に移動して、背景色を変更します。 使用している16進コードをコピーし、その下のテキストモジュール内に配置して、グローバルプリセットスタイルガイド内にも各16進カラーコードの記述バージョンが常に存在するようにします。

Diviテーマビルダー内でカラーコードを使用してカスタムカラーパレットを作成する

Diviテーマオプションに移動

スタイルガイドの16進コードを使用して、Divi内で構築するときにすばやくアクセスできるカスタムカラーパレットを作成できます。 スタイルガイドフレームワーク内のテキストとモジュールをスタイリングする前に、これを行うことをお勧めします。 カラーパレットを追加するには、Diviテーマオプションに移動します。

スタイルガイドの16進コードを使用してカラーパレットをカスタマイズする

スタイルガイドにある選択した16進カラーコードをデフォルトのカラーパレットに追加します。

テキストスタイルを追加する

次に、スタイルガイドフレームワーク内でさまざまなテキストタイプのスタイルを設定できるようになります。 「プライマリ」、「セカンダリ」、「ターシャリ」のオプションがあるからといって、テキストタイプごとにいくつの選択肢を提供するかは完全にあなた次第ですが、テキストタイプごとに3つのバリエーションが必要なわけではありません。 可能性を削除または追加してください。

スタイルモジュール

スタイルガイドフレームワークの最後の部分では、最もよく使用されるすべてのDiviモジュールをリストしました。 ここで、考えているスタイルに従ってモジュールの変更を開始できます。 すべてのモジュールが互いに手の届く範囲にあるという事実は、デザインスタイルとそのバランスのより良い概要を得るのに役立ちます。 人気のあるモジュールごとに、「プライマリ」、「セカンダリ」、「ターシャリ」のオプションも用意されています。 ただし、繰り返しになりますが、ページおよびテンプレートのビルドプロセス全体で使用する各モジュールのバリエーションの数を自由に決定してください。

モジュールをグローバルプリセットに変換します（1つずつ＆選択した名前で）

すべてのテキストスタイルとモジュールスタイルが完成したら（レスポンシブな側面もすべて忘れないでください）、モジュールをグローバルプリセットに変換します。 これを行うには、個々のレベルで各スタイルモジュールを開き、モーダルの上部にある現在のスタイルから新しいプリセットを作成します。 プライマリモジュールをデフォルトモジュールにすることもできます。 グローバルプリセットを作成したら、モジュールに対して特定のプリセットが選択されていることを確認します。これにより、スタイルガイドレイアウトを使用してグローバルプリセットをインポートおよびエクスポートできます。

モジュールに名前を付ける合理化された方法も見つけてください。そうすれば、混乱した場合にスタイルガイドを簡単に参照できます。 宣伝文句スタイルの3つのバリエーションに名前を付けるための良いアプローチは次のとおりです。

• プライマリボタン
• 二次ボタン
• 三次ボタン

また、グローバルプリセットに変換するテキストスタイルまたはモジュールごとに、このアプローチを繰り返すことができます。

ネストされたモジュール：ネストされた要素をグローバルプリセットに変換しすぎる

ソーシャルメディアフォローモジュールなどのネストされたモジュールの場合、モジュール内のアイテムを開き、その要素も新しいプリセットとして保存する必要があります。

別のWebサイトでのスタイルガイドレイアウト（プリセット付き）のエクスポートとインポート

すべてのモジュールをグローバルプリセットに変換し、モジュール設定内でそれらのプリセットを選択するとすぐに、すべてのプリセットを含むレイアウトをエクスポートできるようになります。 次に、レイアウトを別のWebサイトにアップロードするとすぐに、レイアウトと一緒にプリセットをインポートできるようになります。これにより、時間を節約できます。 プリセットを含む完成したスタイルガイドレイアウトをDiviライブラリに保存します。 次に、ファイルをエクスポートします。

新しいスタイルガイドをアップロードするWebサイトに移動し、Diviライブラリに移動し、プリセットを含むJSONファイルをアップロードして、Diviビルドプロセスを開始します。

ヒント：特定のスタイルをコピー/貼り付けするには、スタイルガイドを別のタブに保持します（グラデーション/ボックスシャドウ/ボーダー/…）

大事なことを言い忘れましたが、スタイルガイドを常に別のタブに置いておくことをお勧めします。 Diviの組み込みのクロスページコピーアンドペーストオプションを使用すると、グラデーションの背景などのスタイルをある要素から別の要素にすばやく転送できます。

毎週新しいグローバルプリセットスタイルガイド！

このグローバルプリセットスタイルガイドフレームワークをお楽しみください。 このフレームワークは、構築するあらゆる種類のWebサイトに使用できます。 下記のコメント欄でご意見をお待ちしております。 来週、さらに景品をチェックしてください！