使用している場合 カルーセル要素 GemPagesでは、コンテンツブロックと動画要素の高さが一致しないことに気づくかもしれません。そのため、特にランディングページや商品紹介ページなどで、レイアウトが不均一に見えることがあります。
このチュートリアルでは、シンプルなカスタムCSSスニペットを使用して、カルーセル要素内の動画の高さをコンテンツの高さに自動的に一致させる方法を説明します。
コンテンツと動画の高さが異なるのはなぜですか？
デフォルトでは、コンテンツと ビデオ要素 カルーセル内部では、コンテンツに基づいて高さが調整される場合があります。
具体的な例を挙げますと、以下の通りです。
- 説明文やボタンが長い場合、テキスト欄の高さが高くなることがあります。
- 動画コラムは元の縦横比を維持したまま、短く表示される場合があります。
カスタムCSSルールを追加することで、動画要素がコンテンツセクションの高さに合わせて伸縮し、よりすっきりとしたプロフェッショナルなデザインを実現できます。
カルーセル要素でコンテンツと動画の高さを同じにする方法
ステップ1：ビデオ要素カスタムコードパネルを開きます
まず、Video要素のカスタムコード設定にアクセスする必要があります。
- GemPagesエディターでページを開いてください。
- カルーセル要素に移動します。
- まず ビデオ カルーセル内の要素。
- 要素を右クリックします。
- 詳しくはこちら カスタムコード.
ステップ2：CSSコードを追加する
以下のコードをカスタムコードパネルに貼り付けてください。
.ElementClass { 高さ：100％; }
このCSSにより、ビデオ要素はカルーセルレイアウト内の利用可能な高さ全体を占めるようになります。
ステップ3：交換する .ElementClass 実際の要素クラスを使用して
交換する必要がある .ElementClass 動画要素の実際のクラス名を指定します。
クラス名は、カスタムコードパネルの上部に表示されます。
ステップ4：ページをプレビューして公開する
コードを追加した後：
- 詳しくはこちら プレビュー コンテンツと動画の高さが同じで表示されるかどうかを確認します。
- デスクトップ版とモバイル版の両方でレイアウトをテストしてください。
- すべてが正しく見えるようになったら、クリックします。 パブリッシュ 変更をライブストアに適用します。
コメントしてくださってありがとうございます