Cómo Hacer que el Contenido y el Video Tengan la Misma Altura en el Carrusel

Cuando se utiliza el elemento Carrusel en GemPages, es posible que note que el bloque de contenido y el elemento de video no tienen la misma altura. Esto puede hacer que el diseño luzca desigual, especialmente en páginas de destino o presentaciones de productos.

Este tutorial le mostrará cómo hacer que la altura del video coincida automáticamente con la altura del contenido dentro de un elemento Carrusel mediante un fragmento de CSS personalizado simple.

¿Por qué son diferentes las alturas del contenido y del video?

De forma predeterminada, los elementos de Contenido y Vídeo dentro de un Carrusel pueden ajustar su altura según su propio contenido.

Por ejemplo:

• La columna de texto puede volverse más alta debido a descripciones más largas o botones.
• La columna de video puede mantener su relación de aspecto original y aparecer más corta.

Agregar una regla CSS personalizada permite que el elemento de Video se extienda y coincida con la altura de la sección de contenido para lograr un diseño más limpio y profesional.

Cómo hacer que el contenido y el video tengan la misma altura en el elemento Carrusel

Paso 1: Abra el panel de código personalizado del elemento Video

Primero, debe acceder a la configuración de código personalizado del elemento Video.

• Abra su página en el editor de GemPages.
• Navegue hasta el elemento Carrusel.
• Seleccione el elemento Vídeo dentro del Carrusel.
• Haga clic con el botón derecho en el elemento.
• Haga clic en Código Personalizado.

Paso 2: Añadir el código CSS

Pegue el siguiente código en el panel de Código personalizado:

.ElementClass {

 Altura: 100%;

}

Este CSS hace que el elemento Video ocupe toda la altura disponible dentro del diseño del Carrusel.

Paso 3: Reemplace .ElementClass con el nombre de clase real del elemento

Debe reemplazar .ElementClass con el nombre de clase real de su elemento Video.

Puede encontrar el nombre de clase que se muestra en la parte superior del panel de Código personalizado.

Paso 4: Previsualice y publique su página

Después de agregar el código:

• Haga clic en Vista previa para verificar si el contenido y el video ahora se muestran con la misma altura.
• Pruebe el diseño en la vista de escritorio y móvil.
• Una vez que todo se vea correctamente, haga clic en Publicar para aplicar los cambios a su tienda en vivo.