DiviのClassroomLayoutPackの無料のグローバルプリセットスタイルガイドをダウンロードする

公開: 2021-04-03

ちょっとディビネーション! 毎週開催されるDiviDesign Initiativeの次回の記事にご参加いただき、ありがとうございます。毎週、新しい景品をプレゼントしています。 本日、DiviのClassroom LayoutPackのグローバルプリセットスタイルガイドを共有します。 Diviのグローバルプリセットを使用すると、Webデザインプロセスをすぐに高速化できます。さらに高速化するために、レイアウトパックに固有のグローバルプリセットを1つのレイアウトで定期的に提供します。 すべてのグローバルプリセットを一度にアップロードするか、特定のプリセットを選択するかを選択できます。

diviレイアウト

グローバルプリセットをチェックしてください
以下のスタイルガイド

今日は無料で入手してください!

教室グローバルプリセットスタイルガイド

Classroom LayoutPackのグローバルプリセットスタイルガイドをダウンロードする

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

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

無料でダウンロード

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

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

グローバルプリセットの概要

Diviの優れている点は、要素やモジュールの外観をカスタマイズするために使用できるさまざまなデザイン設定を使用して、Webサイトのデザインを完全に制御できることです。

新しいDiviプリセットシステムを使用すると、Divi要素(ボタンモジュールなど)のカスタム外観をデザインして、プリセットとして保存できます。 行ったすべてのデザイン変更は、プリセットに保存されます。 ページに新しいモジュールを追加すると、保存したプリセットを参照してすばやく適用できます。

プリセットが適用されると、モジュールのデフォルトデザインはプリセットによって制御されます。 プリセットのスタイルを更新すると、そのプリセットを使用するすべてのモジュールも更新されます。 これにより、保存されたプリセットの小さなコレクションを使用して、Webサイト全体のデザインを制御できます。 さらに、新しいモジュールを最初から設計する必要がなく、Diviプリセットライブラリから外観をすばやく選択できるため、ページに新しいモジュールを追加する際の時間を大幅に節約できます。

グローバルプリセットスタイルガイドを使用する場合

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

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

レイアウトパックに基づくものを使用するのではなく、独自のグローバルプリセットスタイルガイドを最初から作成する場合は、スタイルガイドフレームワークのダウンロード投稿を確認してください。

オプションA:すべてのグローバルプリセットを一度に自動的にアップロードする

このアプローチでは、すべてのプリセットがプリセットライブラリに一度に自動的に追加されます。

Diviライブラリに移動します

WordPressWebサイトのバックエンドにあるDiviライブラリにアクセスします。

教室グローバルプリセットスタイルガイド

プリセット付きのレイアウトをアップロード

そこで、上部の「インポートとエクスポート」ボタンをクリックします。

教室グローバルプリセットスタイルガイド

続行するには、[インポート]タブをクリックし、この投稿の冒頭でダウンロードできたJSONファイルを選択します。 プリセットを自動的にインポートするには、「プリセットのインポート」ボックスにもチェックマークを付けます。 これにより、各プリセットが各モジュールに自動的に追加されます。

教室グローバルプリセットスタイルガイド

プリセットライブラリ内のプリセット名

以下に、モジュールに追加されたすべてのプリセットとその名前のリストを示します。 順序は、以下の印刷画面と同じです。 いつでもスタイルガイドに戻って参照できます。

  • CLP – H1 – 1
  • CLP – H2 – 1
  • CLP – H2 – 2
  • CLP – H3 – 1
  • CLP – H4 – 1
  • CLP –本体-1
  • CLP –リスト-1
  • CLP –見積もり本文– 1
  • CLP –すべてのテキスト– 1
  • CLP –番号-1
  • CLP –日付-1

教室グローバルプリセットスタイルガイド

  • CLP –ボタン1

教室グローバルプリセットスタイルガイド

  • CLP –ブラー1
  • CLP –宣伝文2

教室グローバルプリセットスタイルガイド

  • CLP –メールオプティン1
  • CLP –メールオプティン2
  • CLP –お問い合わせフォーム1
  • CLP –お問い合わせフォーム2
  • CLP –アコーディオン1
  • CLP –トグル1
  • CLP –ブログ1
  • CLP –ブログ2

教室グローバルプリセットスタイルガイド

追加した新しいモジュールのプリセットにアクセスする

アップロードされた各プリセットにアクセスするには、新しいモジュールを開くか追加し、上部のプリセットアイテムをクリックして、選択したプリセットを選択します。

教室グローバルプリセットスタイルガイド

オプションB:スタイルガイドのモジュールをグローバルプリセットに選択的に変換する

このアプローチを使用すると、グローバルプリセットライブラリに表示されるものと表示されないものについて、より大きな意見を得ることができます。 要素は1つの場所で提供され、選択した名前でグローバルプリセットに手動で変換する要素を視覚的に選択できます。

Diviライブラリに移動します

WordPressWebサイトのバックエンドにあるDiviライブラリに移動します。

教室グローバルプリセットスタイルガイド

プリセットなしでレイアウトをアップロード

次に、「インポートとエクスポート」ボタンをクリックします。

教室グローバルプリセットスタイルガイド

[インポート]タブに移動し、この投稿の冒頭でダウンロードできたJSONファイルを選択します。 グローバルプリセットにするモジュールを選択できるようにする場合は、[プリセットのインポート]ボックスをオフのままにしておくことが重要です。

教室グローバルプリセットスタイルガイド

新しいページドラフトの作成+レイアウトのアップロード

次に、グローバルプリセットスタイルガイドレイアウトの新しいページドラフトを作成します。

教室グローバルプリセットスタイルガイド

教室グローバルプリセットスタイルガイド

教室グローバルプリセットスタイルガイド

グローバルプリセットに変換するモジュールを選択して、モジュール設定を開きます

すべての要素を調べて、グローバルプリセットに変換する要素を決定します。

設定でモジュールをグローバルプリセットに変える

たとえば、ボタンモジュールの1つをグローバルプリセットに変換するとします。 ボタンモジュール設定を開き、上部のプリセットオプションをクリックして、モジュール設定をカスタムスタイルから新しいプリセットに変換します。

教室グローバルプリセットスタイルガイド

新しいプリセットに好きな名前を付けて、プリセットを保存します。

教室グローバルプリセットスタイルガイド

プリセットに含めるモジュールごとに手順を繰り返します

作成するプリセットごとに、これらの手順を繰り返します。

カスタムカラーパレットをグローバルに

色を右クリックして[グローバルに変換]を選択することにより、スタイルガイドにある選択したHEXカラーコードをグローバルに切り替えます。 これは、カラーパレット内の各色に対して実行できるため、Divi内で設計および構築するときに簡単にアクセスできます。

教室グローバルプリセットスタイルガイド

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

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

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

今週のグローバルプリセットスタイルガイドをお楽しみください。 下記のコメント欄でご意見をお待ちしております。 来週、さらに景品をチェックしてください!