Diviクラウドでアイテムバリエーションを作成する方法

Divi Cloudの利点の1つは、同じレイアウトの複数のバリエーションを指先で使用できることです。 さまざまな色、写真、タイポグラフィなどを使用して、レイアウトの複数のバージョンを簡単に作成できます。 アイテムのバリエーションの作成は、DiviCloudを使用すると簡単です。 この投稿では、Diviクラウドでアイテムのバリエーションを作成する方法を説明します。 また、ヘッダーのバリエーションを作成するいくつかの方法を検討し、アイテムのバリエーションを作成するためのベストプラクティスについて説明します。

アイテムバリエーションのベストプラクティス

アイテムのバリエーションを作成するときは、アイテムがバリエーションであるか、バリエーションであるか、オリジナルと何が異なるかを簡単に理解することが重要です。 これは、名前、カテゴリ、およびタグを使用して実行できます。 Diviが自動的にスナップショットを作成するため、レイアウトの詳細ビューでサムネイルと大きな画像の両方としてレイアウトを視覚的に確認できます。

別のレイアウトのバリエーションであることを明確にする名前、カテゴリ、およびタグを使用します。 それらは説明的である必要があるので、レイアウトがバリエーションであり、バリエーションが何であるかがわかります。 これには、名前に色または同様のデザインの説明を追加することも含まれます。 主な違いに焦点を当てます。

たとえば、「最小ヘッダー（青）」と「最小ヘッダー（白）」は説明的であり、「最小ヘッダー」と呼ばれるレイアウトのバリエーションであることを示しています。 また、オリジナルとの違いについても説明しています。 短く、シンプルで、一目でわかりやすいです。

この投稿で使用しているバリエーションは、マイナーな変更です。 カテゴリは変更しませんが、タグを変更し、説明付きの名前を使用します。

ヘッダーレイアウトを作成する

まず、DiviCloudにヘッダーレイアウトを追加する方法から始めます。 事前に作成されたレイアウトを使用することも、ヘッダーを最初から作成することもできます。 例として、DiviのElectrical ServicesLayoutPack用の無料のヘッダーとフッターを使用しています。 このヘッダーをElectricalServicesHeaderと呼びます。 カテゴリのヘッダーを選択し、2つのタグのいずれかを選択します。

テーマビルダーでヘッダーを作成する

まず、Diviテーマビルダーでヘッダーを作成します。 Divi Theme Builderの使用の詳細については、ElegantThemesブログで「themebuilder」を検索してください。 テーマビルダーのさまざまな側面を紹介する投稿がたくさんあります。 プロセスは単純ですが、管理しやすいように小さなステップに分割しました。

1. まず、WordPressダッシュボードの「Divi」>「ThemeBuilder」に移動して、VisualBuilderを有効にします。
2. 3つの方法のいずれかでヘッダーを作成します。 「グローバルヘッダーの追加」を選択するか、「新しいテンプレート」を追加するか、「移植性」オプションを選択して、ヘッダーレイアウトを作成またはインポートします。
3. DiviCloudに追加するヘッダーの[編集]アイコンをクリックします。

ヘッダーをDiviCloudに保存します

次に、ヘッダーを編集して、レイアウトをDiviCloudに保存します。

1. ページの下部にある紫色の[ライブラリに保存]アイコンをクリックします。
2. レイアウトの名前を入力し、[クラウドに保存]を選択して、カテゴリとタグを選択します。
3. 「ライブラリに保存」をクリックします。
4. テーマビルダーのエディターを閉じます。
5. テーマビルダーの左上隅にある[変更を保存]を選択します。

アイテムバリエーションの作成

次に、元のヘッダーの2つのバリエーションを作成します。 DiviCloudのアイテムバリエーションを作成する方法はいくつかあります。 いくつかの異なるオプションを見ていきます。

ヘッダーレイアウトバリエーション1

最初のバリエーションでは、Diviテーマビルダーで引き続き作業します。 これは、元のヘッダーレイアウトを作成するプロセスに従います。 カテゴリ、製品、サービスなどのさまざまなページを複製します。

ヘッダーテンプレートを複製します

まず、ヘッダーを複製して、場所に割り当てます。

1. WordPressダッシュボードの「Divi」>「ThemeBuilder」に移動して、VisualBuilderを有効にします。
2. グローバルテンプレートの上にある[複製]アイコンを選択します。
3. ポップアップでこのテンプレートを割り当てる場所を選択し、下部にある[保存]をクリックします。

バリエーションをDiviクラウドに保存

次に、ヘッダーを編集してDiviCloudに保存します。

1. DiviCloudに追加するヘッダーの[編集]アイコンをクリックします。
2. ページの下部にある紫色の[ライブラリに保存]アイコンをクリックします。
3. レイアウトの名前を入力し、[クラウドに保存]を選択して、カテゴリとタグを選択します。 別のレイアウトのバリエーションであることを明確にする名前、カテゴリ、およびタグを選択してください。
4. 「ライブラリに保存」をクリックします。
5. テーマビルダーのエディターを閉じます。
6. テーマビルダーの左上隅にある[変更を保存]を選択します。

ヘッダーレイアウトバリエーション2

2番目のバリエーションでは、ヘッダーを複製してDiviCloud内で編集します。 このために、Divi Theme Builderを終了し、Diviページまたは投稿でVisualBuilderを使用します。

ヘッダーレイアウトを複製する

まず、レイアウトをDiviCloudエディターにロードする必要があります。

1. まず、Divi Webサイトのフロントエンドにある任意のページに移動し、画面上部のツールバーにある[Visual Builderを有効にする]をクリックして、VisualBuilderを有効にします。
2. ページの下部にあるDiviツールバーの紫色のプラスアイコンをクリックして、Diviライブラリを開きます。
3. 「保存したレイアウト」というラベルの付いた上部のタブをクリックします。
4. 次に、DiviCloudアイテムを表示します。 左側のサイドバーの[場所]の下にある[MyDiviCloud]というラベルの付いたチェックボックスをクリックします。
5. Divi Cloudアイテムを検索、並べ替え、またはフィルタリングして、複製するレイアウトを見つけます。 キーワードやお気に入りで検索したり、カテゴリやタグを選択してフィルタリングしたり、時間、名前、お気に入りに基づいて並べ替えたりできます。
6. 複製するレイアウトを右クリックします。
7. ポップアップメニューで「複製」を選択します。
8. または、[レイアウトの詳細]画面でプレビューを右クリックしてメニュー項目を開き、ポップアップメニューの[複製]をクリックすることもできます。
9. 詳細を選択できるモーダルが開きます。 「レイアウト名」フィールドに新しい名前を追加します。 このレイアウトに必要なカテゴリを選択するか、新しいカテゴリを追加します。 新しいタグを選択または追加します。 レイアウトの名前を入力し、[クラウドに保存]を選択して、カテゴリとタグを選択します。 別のレイアウトのバリエーションであることを明確にする名前、カテゴリ、およびタグを選択してください。
10. 終了したら、緑色のチェックマークボタンをクリックします。 レイアウトはDiviCloudに自動的に保存されるため、ページを保存する必要はありません。

クラウド内のレイアウトを編集する

次に、DiviVisualBuilderを使用してDiviレイアウトに変更を加えます。 これは、ライブラリへの保存、ページ設定、および移植性を除いて、どのページ内でもVisualBuilderと同じように機能します。 エディターはすでに有効になっているため、変更を加えるだけで済みます。

1. Divi Cloudアイテムを検索、並べ替え、またはフィルタリングして、編集するレイアウトを見つけます。 キーワードやお気に入りで検索したり、カテゴリやタグを選択してフィルタリングしたり、時間、名前、お気に入りに基づいて並べ替えたりできます。
2. 編集するレイアウトを右クリックします。
3. ポップアップメニューで「Diviで編集」を選択します。 Visual Builderを有効にすると、Webサイトのページではなく、新しいタブでレイアウトが開きます。
4. または、[レイアウトの詳細]画面でプレビューを右クリックしてメニュー項目を開き、ポップアップメニューの[Diviで編集]をクリックすることもできます。
5. 通常どおり、DiviBuilderを使用してレイアウトを編集するだけです。 セクション、行、列、モジュール、コードなどを追加またはカスタマイズします。

ヘッダーバリエーションの変更をクラウド内に保存する

最後に、変更を保存します。 編集内容はDiviCloudに自動的に保存されます。

1. レイアウトの右下隅にある[クラウドアイテムの保存]をクリックして、変更を保存します。
2. 変更が保存されるのを待ちます。 変更はクラウド自体に保存されます。
3. 編集が終了したら、タブを閉じます。 これはWebサイトのページではないため、VisualBuilderを終了する必要はありません。

終わりの考え

これが、DiviCloudでアイテムのバリエーションを作成する方法についての説明です。 Diviを使用すると、バリエーションを簡単に作成してクラウドに保存できます。 バリエーションを作成する方法はいくつかあります。 使用する方法に関係なく、わかりやすい名前を作成し、バリエーションを一目で理解できるようにカテゴリとタグを使用してください。 Divi Cloudは、DiviWebサイトで使用する複数のバリエーションを保存するための優れた方法です。

私たちはあなたから聞きたい。 Divi Cloud内でアイテムのバリエーションを作成しましたか？ コメントであなたの経験を教えてください。