GemPages V7を使ってモバイルでShopifyスライダーを作成する方法

モバイルでスライダーを作成する方法

GemPagesには 応答設計 組み込み機能なので、モバイル端末にスライダーを追加すると、自動的にモバイル端末に適したデザインになります。GemPagesでは、まずデスクトップでデザインを作成し、その後モバイルビューに切り替えて必要な調整を行うことを推奨しています。

オプション1：カルーセル要素を使用してShopifyスライダーを作成する

このオプションを使用すると、ほぼすべての要素に対して Shopify スライダーを作成できます。

ステップ1： スライダーを追加するページを開きます。
ステップ2： 見つける 回転木馬 素子 それをページ上にドラッグします。

ステップ3： カルーセルをクリックして設定を開きます。各スライドには、以下のような様々な要素を追加できます。

• ヒーローバナー: 画像、見出し、CTA ボタンを含むプロモーション コンテンツに最適です。
• 製品モジュール: 画像、タイトル、価格とともに個々の製品を表示します。
• 画像またはテキスト ブロック: カスタム コンテンツまたは推薦文用。

等、。

ニーズに合わせて各スライドのコンテンツをカスタマイズします。

ステップ4： カルーセルを選択した状態で、 設定 タブ。以下の調整が可能です。

• アイテム数: スライドごとに表示するアイテム数 (最大 12 個)。
• 間隔: 項目間の間隔。
• プレビュー: 次のスライドを部分的に表示するには有効にします。
• ナビゲーション コントロール: 手動制御用の矢印またはドットを有効にします。
• 自動再生: 自動スライド遷移を設定します。

カルーセル設定の詳細については、 カルーセル要素.
カルーセル要素とヒーローバナー要素を使用してスライドショーを作成するためのビジュアルガイドについては、次のチュートリアルが役立つでしょう。

ステップ5： 切り替える モバイルビュー エディター内でスライダーを小さい画面でプレビューできます。必要に応じてテキスト、画像、ボタンを調整してください。

オプション2： Shopifyスライダーを作成する 製品リスト要素

商品画像のみのスライダーが必要な場合は、 製品画像一覧 要素。

ステップ1： 編集するページを開き、 商品リスト 要素を選択し、ページにドラッグ アンド ドロップします。

ステップ2： 商品画像リストを選択し、 設定 タブ、検索 レイアウト セクション、および選択 .

ステップ3： 画像の数、ナビゲーション コントロール、間隔などのスライダー オプションをカスタマイズします。

詳細については、以下を参照してください 製品リスト要素.

モバイルデバイス専用のスライダーを作成するには？

スライダーを表示させたい場合 モバイルデバイスのみには GemPagesの表示設定:

ステップ1： デスクトップ上で非表示にするスライダーを選択します。
ステップ2： に行きます 高機能 タブ、次に 表示オン、およびトグル OFF デスクトップビュー。

これにより、スライダーはモバイル デバイスでのみ表示されるようになります。