製品ページの動画レイアウトをデザインする

この記事では、 複数の列を持つビデオレイアウト 製品ページに使用する ビデオ要素 or カスタムコード 素子 GemPages v7 では。

複数列のビデオレイアウトの使用例

複数列の動画レイアウトは、同じセクションに複数の動画を表示したい場合に便利です。商品ページをより魅力的で情報豊富なものにすることができます。一般的な使用例は以下の通りです。

製品機能の紹介: 別々のビデオでさまざまな機能を強調します。
比較ビュー: 2～3 本のビデオを並べて配置し、製品モデルやバリエーションを比較します。
お客様の声: 信頼性を高めるために複数のレビュー動画を追加します。
チュートリアルとハウツー: 短いクリップでステップバイステップの手順を表示します。
マーケティングキャンペーンブランドストーリー、ライフスタイルビデオ、プロモーションコンテンツを組み合わせます。

ビデオ要素を使用して複数列のビデオレイアウトをデザインする

GemPages で構築された製品ページに 3 行のビデオレイアウトを作成するには、次の手順に従います。

ステップ1: GemPagesエディターにアクセスする

Shopify管理ダッシュボードから > GemPages ビルダー アプリ> ページ.
既存の商品ページから選択するには「商品を選択」をクリックします。それ以外の場合は、 新しいページを作成する > 商品ページ 新しいものを構築する。

ステップ2: 行要素を追加する

エディターに入ったら、 行要素 左側のサイドバーから 3 列のレイアウトになります。

動画を別の列レイアウトで表示したい場合は、設定タブ> レイアウト のセクションから無料でダウンロードできます。

行内の列の最大数は 6 です。

ステップ3: ビデオ/ビデオバナー要素を追加する

戻ります素子左サイドバーのタブをクリックし、下にスクロールして メディアの方 のセクションから無料でダウンロードできます。
ドラッグアンドドロップ ビデオ要素 or ビデオバナー 行の各列に要素を追加します。

ヒント： ビデオ ビデオのみを表示する要素、または ビデオバナー ビデオにテキストを重ねて表示したい場合。

ステップ4: ビデオをアップロードしてカスタマイズする

動画をクリックして設定を開きます。 ビデオソース、をクリックしてください タイプ ドロップダウンメニューからビデオソースを選択するフィールド: YouTubeでご覧いただけます。, Vimeoのまたは ビデオホスティング.

注意： あなたが選択した場合 ビデオホスティングまず、Shopify などのホスティングサーバーにビデオをアップロードする必要があります。

次に、ビデオのURLを ビデオリンク フィールドを設定し、 サムネイル お好みに応じて各ビデオに画像を追加します。

ライブラリ内の任意の画像（Shopify ファイル）を選択するか、新しい画像をアップロードすることができます。

さらにカスタマイズする場合は、次の記事を参照してください。

上級: カスタムコード要素を使用する

これらの要素はどちらも、YouTube、Vimeo、動画ホスティングのいずれかからのみ動画を挿入できます。そのため、TikTokなど他の動画ソースから動画を追加したい場合は、 カスタムコード要素 最良の選択肢です。

この要素を使用して独自の 3 列のビデオレイアウトを作成するには、次の手順に従います。

ステップ1： 行要素の 3 列レイアウトをページ上の任意の位置にドラッグアンドドロップします。

ステップ2： 入る "カスタムコード検索バーに「」と入力し、カスタムコード要素を各列にネストします。

ステップ2： 要素をクリックすると、左側のサイドバーに設定パネルが開きます。 カスタムコード セクションで、 CPコード フィールド。

ステップ3： コードエディターダイアログが画面に表示されます。 HTML タブをクリックしてビデオの埋め込みコードを貼り付け、 Save

例えば、、TikTok ビデオの埋め込みコードを挿入します。

<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@gempages/video/7384328395699539217" data-video-id="7384328395699539217" style="max-width: 605px;min-width: 325px;" > <section> <a target="_blank" title="@gempages" href="https://www.tiktok.com/@gempages?refer=embed">@gempages</a> <p>🥰 Master the Art of Crafting Comparison Tables with GemPages! 🥰 _________________________ ⭐️Try GemPages for FREE: https://bit.ly/appstore-Gempages #ecommerce #gempages #tipsandtricks #webdesign #landingpage #productdesign #productpage #homepage #abovethefold #mobileview #shopifydropshipping #pagebuilding #pagebuilder</p> <a target="_blank" title="♬ nhạc nền - GemPages" href="https://www.tiktok.com/music/nhạc-nền-GemPages-7384328668371667729?refer=embed">♬ nhạc nền - GemPages</a> </section> </blockquote> <script async src="https://www.tiktok.com/embed.js"></script>

注意： 動画はエディタ内ですぐには表示されませんが、商品ページでプレビューして結果を確認することができます。

結果：

製品ページのビデオレイアウトをデザインする

複数列のビデオレイアウトの使用例