Diviの効率機能を使用して新しいデザインスタイルを別のページに転送する方法

今週は、進行中のDiviデザインイニシアチブの一環として、DiviのFurniture Store LayoutPackを使用して新しいデザインスタイルを別のページに転送する方法を紹介します。 出てくるすべての新しいレイアウトパックで、新しいレイアウトパックのスタイルを使用して既存のページのスタイルを変更したいと思うかもしれません。 ページ全体を置き換える代わりに、Diviの効率機能を使用してデザインスタイルを転送することもできます。 Visual Builderに含まれている最新のオプションの1つは、クロスページのコピーアンドペースト機能です。 これにより、デザイン要素の設定に触れることなく、レイアウト全体で多くの変更を加えることができます。

ただし、もちろん、各レイアウトは一意であるため、手動での変更も適用する必要があります。 良いニュースは、これらの手動設定をワンクリックでページ上の同様の要素に拡張できることです。 この投稿は、デザインスタイルを転送するときに特定の構造に従うのに役立つことを願っています。

それを手に入れよう！

プレビュー

チュートリアルに入る前に、結果を簡単に見てみましょう。

アプローチ

ページ構造が異なるため、ワンクリックでデザインスタイルを完全に移行することは困難です。 しかし、Diviを使用すると、効率機能を使用してプロセスを高速化できます。 クロスページのコピー＆ペースト機能、スタイルの拡張機能、検索と置換機能を組み合わせて、ページ構造を変更することなく、デザインスタイルを既存のページに転送する時間を節約します。

パート1：隣り合った2つのページを開く

まず、2つのページを並べて開きます。 適用するデザインスタイルを含む既存のページと新しいページ。 Furniture Store Layout Packのランディングページ（既存のページに適用するデザインスタイル）とHosting Company Layout Packのランディングページ（変更するページ）を使用します。

パート2：特定のセクション設定のリセット

2番目の部分は、特定のセクション設定のリセットについてです。 リセットする必要のある設定はレイアウトごとに異なりますが、通常は背景設定と仕切り設定が含まれます。

パート3：ヒーローセクションでのDiviのクロスページコピー-スタイルの貼り付けと拡張機能の使用

次に、Diviのクロスページコピーアンドペースト機能を使用して、変更を開始できます。 自然なことは、ヒーローセクションから始めることです。 ヒーローセクションの各デザイン要素を、新しいデザインスタイルの設定をコピーして既存のページに貼り付けることにより、新しいデザインスタイルに変更します。 その後、これらのスタイルをページ上の同様の要素に拡張します。

パート4：手動で変更を加える（レイアウトに従って）＆効率機能を使用する

前述のように、各レイアウトは一意です。 そのため、既存のページにも手動で変更を加える必要があります。 いくつかの変更を加えたら、スタイルを拡張するか、検索と置換を使用して、ページ上の同様の要素に適用することができます。

パート5：設計特性の追加

大事なことを言い忘れましたが、既存のページに特定のデザイン特性を追加することもできます。

パート1：隣り合った2つのページを開く

家具店レイアウトパックのランディングページを使用して、レイアウトを使用して新しいページを作成します

この投稿のアプローチ部分を終えたので、Diviの使用を開始しましょう！ Furniture Store LayoutPackのランディングページを使用して新しいページを追加します。

ホスティング会社のレイアウトパックのランディングページを使用して新しいページを作成する

Hosting Company LayoutPackのランディングページも使用して別のページを作成します。 このレイアウトのデザインスタイルをFurnitureStore LayoutPackのランディングページデザインに置き換えます。

パート2：特定のセクション設定のリセット

ホスティング会社のランディングページのセクション固有の設定をリセット

ヒーローセクションを開く

両方のレイアウトを近くに配置したら、ホスティング会社のランディングページのヒーローセクション設定を開いて続行します。

セクションの背景をリセットしてすべてのセクションに拡張

背景設定に移動し、右クリックして[背景のリセット]をクリックしてオプションをリセットします。 それが完了したら、これらの背景スタイルをページのすべてのセクションに拡張して、ページのセクションに背景要素が含まれていないことを確認できます。

仕切りをリセットしてすべてのセクションに拡張

セクションディバイダーについても同じことを行い、ページ上のすべてのセクションディバイダーがなくなっていることを確認します。

パート3：ヒーローセクションでのDiviのクロスページコピー-スタイルの貼り付けと拡張機能の使用

クロスページコピー-ヒーローセクション要素の貼り付け

セクション設定

クロスページのコピーと貼り付けオプションの使用を開始します。 ヒーローセクションのすべてのデザイン要素を変更します。 家具店のランディングページでヒーローセクションのスタイルをコピーすることから始めます。 次に、ホスティング会社のランディングページに戻り、コピーしたセクションスタイルを貼り付けます。

行設定

行に対して同じことを行います。

タイトルテキストモジュール

タイトルのテキストモジュールのモジュールスタイルもコピーして、ホスティング会社のランディングページのタイトルに適用します。

本文テキストモジュール

次に説明テキストモジュールを開き、テキストスタイルをコピーします。 行ったら、ホスティング会社のページのテキストモジュールに適用します。

スタイルを拡張する

新しいテキストスタイルを適用したら、先に進んで、これらのスタイルをページ全体のすべてのモジュールに拡張します。

テキストの向きを必要に応じて中央に戻す

左のテキストの向きがページ全体のすべてのデザイン要素に適用されることに気付くでしょう。 それをそのままにするか、手動でテキストの向きを元に戻すことができます。

ボタンの設定

新しいモジュールスタイルを適用する必要があるヒーローセクションの最後のモジュールは、ボタンモジュールです。

ボタン設定のスタイルを拡張する

ボタンモジュールスタイル全体を拡張する代わりに、特定のボタン設定を拡張します。

間隔のスタイルを拡張する

間隔の設定と一緒に。

ボックスシャドウのスタイルを拡張する

また、ボックスの影の設定も同様です。

残りの要素をコピーして貼り付ける+スタイルを拡張する

仕切り

また、Divider Moduleスタイルをコピーして貼り付け、ホスティング会社のランディングページの仕切りに適用する必要があります。

スタイルを拡張する

この場合も、このモジュールのスタイルをページ全体に拡張します。

パート4：手動で変更を加える（レイアウトに従って）＆効率機能を使用する

レイアウト固有の変更

タイトルフォントの検索と置換

手動で変更を加え始めましょう。 最初に行うことは、フォントを一致させることです。 ページでテキストモジュールを開き、ページ全体で使用されているRubikフォントを見つけます。 次に、[検索と置換]をクリックして、フォントをMontserratに置き換えます。

タイトルのフォントの太さを見つけて置き換える

フォントの太さについても同じことを行います。 Mediumを使用する代わりに、Lightを選択します。

丸みを帯びた角を見つけて置き換える

また、検索と置換を使用し、ページ全体の各コーナーに「0px」を適用することで、ページ全体の角の丸い境界線を削除しています。

セクションのCTA背景設定をリセットしてスタイルを拡張する

ページでCallto Actionモジュールを見つけて続行し、最初のモジュールのバックグラウンド設定をリセットします。 次に、これらのスタイルをセクション内のすべての召喚状に拡張します。

セクションでCTAの背景色を見つけて置き換える

これを行うと、デフォルトの背景色が表示されます。 この色を見つけて置き換え、セクション全体で「＃1a2545」に変更します。

セクションでCTAテキストの色を検索して置換

セクション全体で、テキストの色を「ライト」に置き換えます。

価格表ボタンの設定を変更する

次に、ページの価格表に移動して、ボタンの設定を変更します。

• ボタンの背景色：＃ef6f49
• ボタンの境界線の幅：8px
• ボタンの境界線の色：＃ef6f49
• ボタンの境界線半径：0px
• ボタンの文字間隔：2px（デフォルト）、1px（ホバー）
• ボタンフォント：Montserrat
• フォントの太さ：半太字
• フォントスタイル：大文字
• ボタンの配置：左

価格表とCTAモジュールのスタイルを拡張する

新しいボタン設定を、ページ全体のすべての価格表とCall toActionモジュールに拡張します。

パート5：設計特性の追加

セクションの背景色＃1

このチュートリアルの最後の部分では、いくつかの設計特性を手動で追加します。 これには、バックグラウンド設定が含まれますが、これに限定されません。 下の印刷画面でマークされたセクションを開き、背景色を変更します。

• 背景色：＃f7f3ec

セクションの背景色＃2

以下のセクションでも同じことを行います。

• 背景色：＃f7f3ec

セクショングラデーションの背景＃1

次に、下の印刷画面でセクションを見つけて、グラデーションの背景を追加します。

• 色1：#ffffff
• 色2：＃1a2545
• グラデーション方向：90度
• 開始位置：55％
• 終了位置：55％

セクショングラデーションの背景＃2

以下のセクションには、別のグラデーションの背景を使用してください。

• 色1：rgba（210,218,228,0.38）
• 色2：#ffffff
• グラデーション方向：90度
• 開始位置：45％
• 終了位置：45％

セクショングラデーションの背景＃3

最後になりましたが、ページの最後のセクションにも線形グラデーションの背景を追加します。

• 色1：#ffffff
• 色2：＃f7f3ec
• 開始位置：40％
• 終了位置：40％

プレビュー

すべての手順を完了したので、最後に結果を見てみましょう。

最終的な考え

この投稿では、Diviの効率機能を使用してレイアウトのデザインスタイルを転送する方法を紹介しました。 このチュートリアルでは、新しいVisualBuilderの一部である新しいクロスページのコピーと貼り付け機能を利用します。 このチュートリアルは、進行中のDiviデザインイニシアチブの一部であり、毎週、デザインツールボックスに何か特別なものを入れようとしています。 ご質問やご提案がございましたら、下にコメント欄を残してください！