Como fazer com que o conteúdo e o vídeo tenham a mesma altura em um carrossel

Quando se utiliza o Elemento carrossel No GemPages, você pode notar que o bloco de conteúdo e o elemento de vídeo não têm a mesma altura. Isso pode fazer com que o layout pareça desequilibrado, especialmente em páginas de destino ou vitrines de produtos.

Este tutorial mostrará como fazer com que a altura do vídeo corresponda automaticamente à altura do conteúdo dentro de um elemento Carrossel usando um pequeno trecho de CSS personalizado.

Por que as alturas do conteúdo e do vídeo são diferentes?

Por padrão, o Conteúdo e Elementos de vídeo Dentro de um carrossel, os elementos podem ajustar sua altura com base no conteúdo.

Por exemplo:

• A coluna de texto pode ficar mais alta devido a descrições ou botões mais longos.
• A coluna de vídeo pode manter sua proporção original e parecer mais curta.

Adicionar uma regra CSS personalizada permite que o elemento de vídeo se estique e corresponda à altura da seção de conteúdo, resultando em um design mais limpo e profissional.

Como fazer com que o conteúdo e o vídeo tenham a mesma altura no elemento carrossel

Passo 1: Abra o painel de código personalizado do elemento de vídeo.

Primeiro, você precisa acessar as configurações de código personalizado do elemento Vídeo.

• Abra sua página no editor GemPages.
• Navegue até o elemento Carrossel.
• Selecione os Vídeo elemento dentro do Carrossel.
• Clique com o botão direito do mouse no elemento.
• Clique Código personalizado.

Passo 2: Adicione o código CSS

Cole o seguinte código no painel Código Personalizado:

.ElementClass {

 altura: 100%;

}

Este CSS faz com que o elemento de vídeo ocupe toda a altura disponível dentro do layout do carrossel.

Passo 3: Substituir .ElementClass Com a classe de elemento real

Você precisa substituir .ElementClass com o nome real da classe do seu elemento de vídeo.

Você pode encontrar o nome da classe exibido na parte superior do painel Código Personalizado.

Passo 4: Visualize e publique sua página

Após adicionar o código:

• Clique Pré-visualização Para verificar se o conteúdo e o vídeo agora são exibidos com a mesma altura.
• Teste o layout nas visualizações para desktop e para dispositivos móveis.
• Quando tudo estiver correto, clique Publicar Para aplicar as alterações à sua loja online.