各デバイスで要素またはセクションを表示/非表示にする

GemPagesを使用すると、 特定の要素またはセクションの表示を制御する デバイス間デスクトップとモバイルの両方でページが美しく表示されるようにします。

たとえば、デスクトップで機能するデザインやコンテンツが、モバイルには適さない場合があります。画面サイズに応じて要素を表示したり非表示にしたりすることで、よりスムーズで効果的なユーザー エクスペリエンスを実現できます。

たとえば、Web サイトの CTA (Call-To-Action) ボタンを設計しているとします。

• デスクトップ: CTAを大きく、より詳細にしたい

• モバイル: 画面スペースが限られているため、より合理化されたシンプルなバージョンを選択します。

GemPages の表示/非表示機能を使用すると、同じボタンの異なるバージョンを作成し、各画面サイズの固有の要件に合わせてカスタマイズできます。

要素を表示および非表示にするにはどうすればいいですか?

ステップ1： GemPages エディターで、新しい要素を追加するか、さまざまなデバイスに合わせてカスタマイズする既存の要素をクリックします。

この例では、 行動を促すフレーズ（CTA）

ステップ2： GemPages で、CTA ボタンを複製して、デスクトップ用とモバイル用の 2 つの個別の CTA ボタンを作成します。

ステップ3： 2 つのボタンを好みに合わせてカスタマイズします。

ステップ4： 表示プロパティを設定する

• デスクトップにのみ表示したいボタンを選択します。 高機能 タブには、Live モジュールで提供された 表示オン デスクトップ画面にのみ表示されるように設定できます。

• モバイル向けの別のものを選択し、 表示オン デスクトップビューでは非表示にしながら、モバイルデバイスでは表示したままにする設定。

セクションを表示および非表示にするにはどうすればいいですか?

画面サイズに基づいてセクション全体を表示または非表示にすることもできます。これは、大きなコンテンツ ブロックや、小さい画面ではうまく表示できない特定の機能がある場合に特に便利です。

ステップ1： モバイルで非表示にするセクションを選択します。

ステップ2： 要素を選択すると、エディターの右側に設定が表示されます。

以下を行うには、 詳細設定タブ 設定パネルの上部にある に表示 視認性を調整する機能。

• 表示 このセクションはデスクトップ画面のみに表示されます。
• 隠す モバイルデバイスで表示する場合。

よくあるご質問

iPhone で表示/非表示機能が動作しないのはなぜですか?

• ディスプレイオン設定を確認します。 要素またはセクションが有効になっていることを確認してください モバイル 「詳細設定」タブで設定します。モバイルで非表示になっている場合は、iPhoneでは表示されません。
• 要素の重複を避けます。 要素は技術的には表示されているものの、モバイルでは別のセクションや要素に隠れてしまう場合があります。間隔、位置（特に絶対位置/固定位置）、そして使用している場合はZインデックスを確認してください。
• キャッシュをクリアして更新します: 最近変更があった場合は、ブラウザのキャッシュをクリアするか、iPhone でページを更新して、最新バージョンが読み込まれるようにしてください。