Diviのデジタル決済レイアウトパック用の無料のグローバルプリセットスタイルガイドをダウンロードする
公開: 2020-10-10ちょっとディビネーション！ 毎週開催されるDiviDesign Initiativeの次回の記事にご参加いただき、ありがとうございます。毎週、新しい景品をプレゼントしています。 本日、DiviのDigital Payments LayoutPackのグローバルプリセットスタイルガイドを共有します。 Diviのグローバルプリセットを使用すると、Webデザインプロセスをすぐに高速化できます。さらに高速化するために、レイアウトパックに固有のグローバルプリセットを1つのレイアウトで定期的に提供します。 すべてのグローバルプリセットを一度にアップロードするか、特定のプリセットを選択するかを選択できます。
グローバルプリセットをチェックしてください
以下のスタイルガイド
今日は無料で入手してください！
Digital Payments LayoutPackのグローバルプリセットスタイルガイドをダウンロードする
無料のグローバルプリセットスタイルガイドを入手するには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
グローバルプリセットの概要
Diviの優れている点は、要素やモジュールの外観をカスタマイズするために使用できるさまざまなデザイン設定を使用して、Webサイトのデザインを完全に制御できることです。
新しいDiviプリセットシステムを使用すると、Divi要素（ボタンモジュールなど）のカスタム外観をデザインして、プリセットとして保存できます。 行ったすべてのデザイン変更は、プリセットに保存されます。 ページに新しいモジュールを追加すると、保存したプリセットを参照してすばやく適用できます。
プリセットが適用されると、モジュールのデフォルトデザインはプリセットによって制御されます。 プリセットのスタイルを更新すると、そのプリセットを使用するすべてのモジュールも更新されます。 これにより、保存されたプリセットの小さなコレクションを使用して、Webサイト全体のデザインを制御できます。 さらに、新しいモジュールを最初から設計する必要がなく、Diviプリセットライブラリから外観をすばやく選択できるため、ページに新しいモジュールを追加する際の時間を大幅に節約できます。
グローバルプリセットスタイルガイドを使用する場合
できれば、ページやテンプレートなどを作成する前に、グローバルプリセットスタイルガイドの使用を開始することをお勧めします。その背後にある理由は、デザインの作成中にグローバルプリセットにすぐにアクセスできるためです。デザイン、要素レベルでインラインスタイルをリセットし、グローバルプリセットを適用します。
スタイルガイドを作成した後にDiviビルドプロセスを開始すると、個々の設定内のモジュールに手動で変更を加える必要がなくなります。 グローバルプリセットを最初から使用している場合は、それらを1か所で変更して、変更がWebサイト全体に一度に展開されるのを見ることができます。
レイアウトパックに基づくものを使用するのではなく、独自のグローバルプリセットスタイルガイドを最初から作成する場合は、スタイルガイドフレームワークのダウンロード投稿を確認してください。
オプションA：すべてのグローバルプリセットを一度に自動的にアップロードする
このアプローチでは、すべてのプリセットがプリセットライブラリに一度に自動的に追加されます。
Diviライブラリに移動します
WordPressWebサイトのバックエンドにあるDiviライブラリにアクセスします。
プリセット付きのレイアウトをアップロード
そこで、上部の「インポートとエクスポート」ボタンをクリックします。
続行するには、[インポート]タブをクリックし、この投稿の冒頭でダウンロードできたJSONファイルを選択します。 プリセットを自動的にインポートするには、「プリセットのインポート」ボックスにもチェックマークを付けます。 これにより、各プリセットが各モジュールに自動的に追加されます。
プリセットライブラリ内のプリセット名
以下に、モジュールに追加されたすべてのプリセットとその名前のリストを示します。 順序は、以下の印刷画面と同じです。 いつでもスタイルガイドに戻って参照できます。
- DPLP – H1 – 1
- DPLP – H2 – 1
- DPLP – H3 – 1
- DPLP – H3 – 2
- DPLP – H4 – 1
- DPLP –ボディ– 1
- DPLP –テキスト–すべて– 1
- DPLP –ボタン1
- DPLP –ボタン2
- DPLP –ボタン3
- DPLP –ボタン4
- DPLP –ボタン5
- DPLP –ボタン6
- DPLP –ブラー1
- DPLP –宣伝文2
- DPLP –宣伝文3
- DPLP –宣伝文4
- DPLP –宣伝文5
- DPLP –メールオプティン1
- DPLP –メールオプティン2
- DPLP –お問い合わせフォーム1
- DPLP –お問い合わせフォーム全幅フィールド
- DPLP –価格表1
- DPLP –価格表アイテム1
- DPLP –タブレットアイテム2の価格設定
追加した新しいモジュールのプリセットにアクセスする
アップロードされた各プリセットにアクセスするには、新しいモジュールを開くか追加し、上部のプリセットアイテムをクリックして、選択したプリセットを選択します。
オプションB：スタイルガイドのモジュールをグローバルプリセットに選択的に変換する
このアプローチを使用すると、グローバルプリセットライブラリに表示されるものと表示されないものについて、より大きな意見を得ることができます。 要素は1つの場所で提供され、選択した名前でグローバルプリセットに手動で変換する要素を視覚的に選択できます。
Diviライブラリに移動します
WordPressWebサイトのバックエンドにあるDiviライブラリに移動します。
プリセットなしでレイアウトをアップロード
次に、「インポートとエクスポート」ボタンをクリックします。
[インポート]タブに移動し、この投稿の冒頭でダウンロードできたJSONファイルを選択します。 グローバルプリセットにするモジュールを選択できるようにする場合は、[プリセットのインポート]ボックスをオフのままにしておくことが重要です。
新しいページドラフトの作成+レイアウトのアップロード
次に、グローバルプリセットスタイルガイドレイアウトの新しいページドラフトを作成します。
グローバルプリセットに変換するモジュールを選択して、モジュール設定を開きます
すべての要素を調べて、グローバルプリセットに変換する要素を決定します。
設定でモジュールをグローバルプリセットに変える
たとえば、ボタンモジュールの1つをグローバルプリセットに変換するとします。 ボタンモジュールの設定を開き、上部のプリセットオプションをクリックします。
モジュール設定をカスタムスタイルからの新しいプリセットに変換します。
新しいプリセットに任意の名前を付けます。
プリセットに含めるモジュールごとに手順を繰り返します
作成するプリセットごとに、これらの手順を繰り返します。
例外：ネストされたモジュール（価格表モジュール）
価格表モジュールなどのネストされたモジュールの場合、モジュール内のアイテムを開き、その要素も新しいプリセットとして保存する必要があります。
Diviテーマビルダー内でカラーコードを使用してカスタムカラーパレットを作成する
Diviテーマオプションに移動
スタイルガイドの16進コードを使用して、ページの作成中にすばやくアクセスできるカスタムカラーパレットを作成できます。 カラーパレットを追加するには、Diviテーマオプションに移動します。
スタイルガイドの16進コードを使用してカラーパレットをカスタマイズする
スタイルガイドにある選択したHEXカラーコードをデフォルトのカラーパレットに追加します。
ヒント：特定のスタイルをコピー/貼り付けするには、スタイルガイドを別のタブに保持します（グラデーション/ボックスシャドウ/ボーダー/…）
大事なことを言い忘れましたが、スタイルガイドを常に別のタブに置いておくことをお勧めします。 Diviの組み込みのクロスページコピーアンドペーストオプションを使用すると、グラデーションの背景などのスタイルをある要素から別の要素にすばやく転送できます。
毎週新しいグローバルプリセットスタイルガイド！
今週のグローバルプリセットスタイルガイドをお楽しみください。 下記のコメント欄でご意見をお待ちしております。 来週、さらに景品をチェックしてください！