GemPagesでモバイルのみにグラデーション背景を設定する方法

モバイルで見栄えの良いデザインが、デスクトップでは同じように機能しないことがあります。例えば、 モバイルデバイスのグラデーション背景 より強い視覚効果を生み出すために、 デスクトップとタブレットのシンプルな背景.

GemPagesでは、セクションまたは要素を複製して制御することでこれを実現できます。 デバイスの可視性設定このガイドでは、 GemPagesではモバイル版のみグラデーション背景が利用可能 オリジナルのデザインを維持しながら、より大きな画面にも対応します。

グラデーション背景とは何ですか?

A グラデーション背景 2色以上の色が滑らかに混ざり合う背景スタイルです。単色ではなく、グラデーションによって色間の遷移効果を生み出します。

グラデーション背景は、主に次のような目的で使用されます。

• 視覚的に魅力的なセクションを作成する
• ヒーローバナーやプロモーションなどの重要なコンテンツを強調表示します
• 小さい画面での視覚コントラストを向上させる

モバイル専用のグラデーション背景を使用する場合:

モバイルにのみグラデーションを適用することでユーザー エクスペリエンスを向上できるデザイン シナリオは数多くあります。

具体的な例を挙げますと、以下の通りです。

• 作成 モバイルヒーローセクションがより視覚的に魅力的に
• 改善 小さな画面でのテキストの読みやすさ
• 作成 モバイルファーストのプロモーションセクション
• マッチング モバイルユーザー向けに最適化されたキャンペーンデザイン

モバイル画面は小さいため、グラデーションを使用すると、レイアウトが混雑することなく注目を集め、視覚的な階層を改善できます。

モバイルでのみグラデーション背景を適用する方法

グラデーション背景を表示するには、以下の手順に従ってください。 モバイルデバイスのみ デスクトップとタブレットの元の背景を維持します。

ステップ1: セクションまたは要素を複製する

まず、 セクションまたは要素 グラデーション背景を適用する場所。

次に、そのセクションまたは要素を複製します。

複製すると、次の 2 つのバージョンが作成されます。

• その 元のバージョン （デスクトップとタブレット用）
• その 複製版 （モバイル用）

どちらのバージョンも最初は同じに見えます。

ステップ2：グラデーション背景を追加する

次に、複製したバージョンをグラデーション背景を使用するように設定します。

• まず 重複したセクションまたは要素.
• Video Cloud Studioで 設定 パネル。
• MFAデバイスに移動する 経歴.
• 選択する カラー → グラデーション.
• デザインの好みに応じてグラデーションの色と方向を調整します。

グラデーション背景の使用方法の詳細なガイドについては、この記事を参照してください。 グラデーション背景を追加する.

この段階で、次のものが揃っています。

• 1つのバージョンは 元の背景
• 1つのバージョンには グラデーション背景

ステップ3: デバイスの可視性を構成する

今、あなたはコントロールする必要があります 各デバイスに表示されるバージョン.

オリジナルセクション（デスクトップ + タブレット）

まず 元のセクション、その後設定します ディスプレイの設定 そのため、大きい画面にのみ表示されます。

表示を有効にする:

• デスクトップ
• タブレット

表示を無効にする:

• モバイル

重複セクション（モバイルのみ）

次に、 重複したセクション グラデーションの背景付き。

表示設定を次のように設定します。

表示を有効にする:

• モバイル

表示を無効にする:

• デスクトップ
• タブレット

これにより、グラデーション バージョンはモバイル デバイスにのみ表示されます。

ステップ4: ページを保存して公開する

設定が完了したら:

• 詳しくはこちら Save.
• ページを公開または更新します。

ページに次の内容が表示されます。

• その 元の背景 デスクトップとタブレット
• その グラデーション背景 モバイルのみ

この方法で適用できるその他のデザインカスタマイズ

このデバイス固有の複製方法は、次のような他の設計調整にも役立ちます。

• モバイル用に異なる背景画像を使用する
• 間隔とレイアウト構造の調整
• 簡略化されたモバイルセクションを表示
• モバイルに特化したキャンペーンデザインの作成

重要な注意事項

このアプローチは セクションまたは要素を複製するこれにより、ページ上の要素の数が増加します。 このため、この方法を使用することをお勧めします 必要なときだけ重複が多すぎると、ページの保守と管理が難しくなる可能性があります。 可能な限り、 レスポンシブ設定 重複セクションを作成する前に、まずこれを行う必要があります。