使用したことがある場合 Shopify、Dawnのテーマはご存知でしょう。 これは、新しい起業家が利用できる頼りになる無料テーマの XNUMX つであり、ユニークなストアフロントをデザインするための高度にカスタマイズ可能なオプションです。
Dawn テーマには、標準のビデオ アップロード ブロックや画像バナーなど、多数のモジュールが付属しています。
画像バナーを使用すると、ボタンとテキストを前景として機能させ、画像を背景にすることができます。 残念ながら、ビデオ モジュールではこのタイプの前景は許可されていません。 ただし、両方の長所を活かす方法があり、ビデオを背景にしてテキストを前景にするビデオ バナーを作成することができます。
このガイドでは、 夜明けのテーマ ホームページで注目を集めるビデオバナー!
ドーンテーマの概要
ドーンテーマは無料です Shopify テーマ これは e コマース小売業者によって広く使用されています。 シンプルなデザインと簡単な設定により、視覚的に魅力的でエレガントな外観の店舗をセットアップするための人気の選択肢です。
ビデオの背景/バナーとは何ですか?なぜウェブサイトで使用する必要があるのですか?
ビデオ バナーは、ビデオを全幅の背景として表示し、ボタンやテキストなどの他の要素を前景に表示する Web ページの領域です。
Dawn テーマのビデオ バナーのようなモジュールは、訪問者の Web サイト全体のエクスペリエンスを向上させる多くの利点を提供します。 主な利点をいくつか示します。
- 充実した視覚要素: 魅力的な動画を組み込むことで、Web サイトの視覚的な魅力がさらに高まり、訪問者の注目を集めます。
- ダイナミックで魅力的なコンテンツ: 動画で効果的に伝えるformatイオン。 製品の機能を紹介したり、ハウツーをデモンストレーションしたり、魅力的なブランド ストーリーを伝えたりして、訪問者の関心を維持することができます。
- ユーザーエンゲージメントの強化: 動画には訪問者に永続的な印象を与える力があります。 ビジュアル、オーディオ、モーションの組み合わせにより注意を引き、ユーザーがさらに探索するように促します。
- 効果的なブランドコミュニケーション: ビデオの背景やバナーは、ブランドのメッセージを顧客に伝えることができます。 これにより、企業は独自の価値提案を強調し、製品やサービスを紹介し、強力なブランド アイデンティティを確立することができます。
Web サイトのデザインにビデオの力を活用することで、サイトをよりエキサイティングなものにし、コンバージョンを高めることができます。
Dawn テーマにビデオ背景/バナーを追加するためのステップバイステップ ガイド
技術的には、Dawn テーマのビデオ バナーを追加するには XNUMX つの方法があります (すべてが理想的であるわけではありません)。
- ビデオを WebP ビデオ/画像に変換する format.
- 調整の Shopify 通常の画像バナーのコードを追加して、ビデオをサポートします。
- ビデオをGIFに変換する format.
- 動画をビデオブロックにアップロードするだけです。 Shopify、前景要素を持つという考えをスキップします (したがって、それは真のバナーではなくなります)。
改造するのはそれほど難しいことではありません Shopify 標準の画像バナーのコードですが、ファイルにアクセスできることを考えると、プロセスは不必要に長くなります format WebP のように。 GIF はビデオの品質を大幅に低下させ、オプション 4 では実際のビデオ バナーが表示されません。
したがって、どんなビデオでも変換することをお勧めします format WebP に (.mp4、.mov、.wmv) があります format。 WebP は、高解像度の JPEG 画像、ビデオ、GIF の利点を組み合わせたもので、かさばらず、解像度もあまり落とさずに美しい動きのあるビデオを作成できます。 また、WebP ビデオ/画像を Shopify イメージバナー。
方法は次のとおりです。
ステップ 1: ビデオを取得して WebP ファイルに変換する Format
オンラインではさまざまな無料の「ビデオから WebP」コンバーターが提供されています。 オンライン検索を試すか、テスト済みのコンバーターのいずれかを使用してください。
無料の変換ツールにビデオをアップロードし、WebP への変換を選択します。 format。 新しいファイルをコンピュータに保存します。
ステップ 2: Dawn テーマを見つける Shopify
「オンラインストア」>「テーマ」に移動します。
まだお持ちでない場合は、Dawn テーマをインストールします。 他のwiseと指定されている Dawn テーマが見つかるはずです。 Shopifyの「今のテーマ」。 「カスタマイズ」ボタンをクリックして次に進みます。
ステップ 3: 画像バナー ブロックを追加して選択します
「画像バナー」ブロックは、Dawn テーマにデフォルトで追加されます。 したがって、そのモジュールをクリックして、左側のパネルでその設定を開くことができるはずです。 右側のビジュアルプレビューで画像バナー自体をクリックすることもできます。 「画像バナー」を最初から挿入する必要がある場合は、「ブロックの追加」リンクを使用します。
ステップ 4: WebP ビデオ ファイルをアップロードする
「最初の画像」セクションの下にある「画像を選択」ボタンをクリックします。
これにより、ストアのメディア ライブラリに画像をアップロードするための領域がロードされます。 動画の URL を貼り付けることもできますが、ここではアップロード機能を使用します。 「画像を追加」ボタンを選択し、前に作成した WebP ファイルを選択します。 新しくアップロードしたファイルにチェックマークを付けて、「完了」ボタンをクリックします。
これにより、WebP ビデオ ファイルがイメージ バナーにドロップされ、フォアグラウンドで任意のコンテンツを編集できるようになります。 「保存」をクリックします。
おめでとうございます。Dawn テーマのビデオ バナーが正常に追加されました。
ステップ 5: ビデオをプレビューする
でも待ってください、それは wise フロントエンドでビデオをプレビューして、正しく表示され、スムーズに動作し、適切な解像度であることを確認します。
ダッシュボードのメイン画面に戻り、目玉アイコンをクリックして「オンライン ストアを表示」します。 これは、「販売チャネル」セクションの下の「オンライン ストア」の隣にあります。
成功！
夜明けのテーマのビデオ バナーをカスタマイズする: 自分だけのユニークなバナーを作成する
カスタマイズにより、ビデオがブランドや店舗の美学に完全に適合するようになります。 それでは、袖をまくって飛び込みましょう?
設定を確認するには、常に画像バナーを選択する必要があります。 そこに到達したら、画像オーバーレイの不透明度を変更したり、バナーの高さを変更したりできます。 次に、 desktop コンテンツの位置、オーバーレイ テキストの配置場所を変更します。
コンテンツとボタンの位置を移動すると、ビデオの最も目立つ領域の上にテキストとボタンが表示されます。
さらにカスタマイズするには、「カスタム CSS」セクションにアクセスします。
もちろん、コンテンツのテキストやボタンを選択して、内容や表示方法を変更することも可能です。
速度と互換性を最大化するためにビデオ ファイルを最適化するためのヒント
印象的なビデオであっても、サイトの速度が遅くなったり、特定のデバイスで正しく表示されなかったりする場合は意味がありません。 そのため、最大の速度と互換性を実現するためにビデオ ファイルを最適化することは、交渉の余地のないタスクです。 このセクションでは、ビデオ コンテンツを効率的に読み込み、ユニバーサルに再生できるようにするための便利なヒントをいくつか紹介します。
- ビデオファイルを使用する formatほとんどの Web ブラウザと広く互換性のある (WebP など)。
- ビデオファイルのサイズはできるだけ小さくしてください。 WebP は、品質を損なうことなくビデオを圧縮するという素晴らしい仕事をします。
- 画面サイズに収まるようにビデオのアスペクト比を設定します。
- 店舗の個性を反映する、色とコントラストのバランスが取れた動画を選択してください。
Dawn テーマへのビデオ背景/バナーの追加に関する一般的な問題のトラブルシューティング
場合によっては、どんなに注意していても、Dawn テーマのビデオ バナーを追加するときに問題が発生することがあります。 問題が発生した場合のトラブルシューティングのヒントをいくつか紹介します。
非互換性の問題
ビデオを互換性のあるファイルに変換してみてください format WebP など、またはビデオ埋め込みリンクを使用します。
動画のサイズが大きすぎます
ビデオをトリミングまたは圧縮して、品質を維持しながらファイル サイズを削減します。
ビデオが自動再生されない
テーマ設定で「自動再生」オプションが有効になっていることを確認してください。
夜明けテーマのビデオバナーの追加に関する結論
ステップバイステップのガイドとトラブルシューティングのヒントに従うことで、Dawn テーマのビデオ バナーを Shopify 簡単に。
どう思いますか？ Dawn テーマのビデオ バナーの追加に成功した場合は、コメント欄でお知らせください。
コメント 0応答