Diviの語学学校レイアウトパック用の無料のグローバルプリセットスタイルガイドをダウンロードする

公開: 2020-12-12

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

diviレイアウト

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

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

語学学校グローバルプリセットスタイルガイド

語学学校レイアウトパックのグローバルプリセットスタイルガイドをダウンロードする

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

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

無料でダウンロード

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

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

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

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

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

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

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

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

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

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

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

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

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

語学学校グローバルプリセットスタイルガイド

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

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

語学学校グローバルプリセットスタイルガイド

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

語学学校グローバルプリセットスタイルガイド

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

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

  • LSLP – H1 – 1
  • LSLP – H2 – 1
  • LSLP – H3 – 1
  • LSLP – H4 – 1
  • LSLP –ボディ– 1
  • LSLP –リスト– 1
  • LSLP –すべてのテキスト– 1
  • LSLP –タイトルコンボ– 1
  • LSLP –タイトルコンボ– 2
  • LSLP –見積もり本文– 1

語学学校グローバルプリセットスタイルガイド

  • LSLP –ボタン1
  • LSLP –ボタン2
  • LSLP –ボタン3

語学学校グローバルプリセットスタイルガイド

  • LSLP –ブラー1
  • LSLP –宣伝文2
  • LSLP –宣伝文3
  • LSLP –宣伝文4
  • LSLP –宣伝文5
  • LSLP –宣伝文6

語学学校グローバルプリセットスタイルガイド

  • LSLP –画像1
  • LSLP –番号カウンター1
  • LSLP –バーカウンター1
  • LSLP –バーカウンター1
    • LSLP –バーカウンターアイテム1
  • LSLP –ビデオ1
  • LSLP –アコーディオン1
    • LSLP –アコーディオンアイテム1
  • LSLP –メールオプチンフォーム1
  • LSLP –お問い合わせフォーム1
  • LSLP –行動の呼びかけ1

語学学校グローバルプリセットスタイルガイド

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

新しいモジュールを開いて(または追加して)、上部のプリセット項目をクリックして、選択したプリセットを選択することにより、アップロードされた各プリセットにアクセスできます。

語学学校グローバルプリセットスタイルガイド

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

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

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

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

語学学校グローバルプリセットスタイルガイド

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

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

語学学校グローバルプリセットスタイルガイド

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

語学学校グローバルプリセットスタイルガイド

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

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

語学学校グローバルプリセットスタイルガイド

語学学校グローバルプリセットスタイルガイド

語学学校グローバルプリセットスタイルガイド

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

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

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

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

語学学校グローバルプリセットスタイルガイド

新しいプリセットに任意の名前を付けます。

語学学校グローバルプリセットスタイルガイド

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

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

例外:ネストされたモジュール(ソーシャルメディアフォローモジュール)

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

語学学校グローバルプリセットスタイルガイド

語学学校グローバルプリセットスタイルガイド

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

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

スタイルガイドの16進コードを使用して、ページの作成中にすばやくアクセスできるカスタムカラーパレットを作成できます。 カラーパレットを追加するには、Diviテーマオプションに移動します。

語学学校グローバルプリセットスタイルガイド

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

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

語学学校グローバルプリセットスタイルガイド

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

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

語学学校グローバルプリセットスタイルガイド

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

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