VizupCommerce

Personalizar el contenido del video del banner con CSS

Personalizar el contenido del video del banner con CSS

Cómo personalizar el título, el subtítulo y la apariencia del botón CTA en tu widget de video de banner usando CSS personalizado.

Clases CSS disponibles

El widget de video de banner proporciona clases CSS específicas que puedes usar para personalizar:

Clases de contenedor

  • .vizup-banner-content-overlay - El contenedor principal del overlay que contiene todo el contenido personalizado

Clases de elementos de contenido

  • .vizup-banner-custom-title - El elemento de encabezado del título personalizado
  • .vizup-banner-custom-caption - El elemento de párrafo del subtítulo personalizado
  • .vizup-banner-cta-button - El elemento del botón/enlace de llamada a la acción

Ejemplos de personalización CSS

Personalizar el título

/* Hacer el título más grande y centrado */
.vizup-banner-custom-title {
    font-size: 24px !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}


/* Agregar un fondo al título */
.vizup-banner-custom-title {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

Personalizar el subtítulo

/* Estilizar el texto del subtítulo */
.vizup-banner-custom-caption {
    font-style: italic;
    opacity: 0.9;
    font-size: 14px !important;
    line-height: 1.4;
    text-align: center;
}

Personalizar el botón CTA

/* Estilo mejorado del botón CTA */
.vizup-banner-cta-button {
    border: 2px solid white !important;
    border-radius: 25px !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

Personalizar el contenedor del overlay

/* Ajustar el posicionamiento y el espaciado general */
.vizup-banner-content-overlay {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    padding: 20px !important;
}

Cómo aplicar CSS personalizado

Para obtener instrucciones detalladas sobre dónde y cómo agregar CSS personalizado, consulta nuestra guía de cómo agregar CSS personalizado.

Resumen rápido:

  1. Usando la aplicación Vizup (Recomendado): Agrega el CSS en la página de Configuración avanzada dentro de la aplicación Vizup - Abrir Configuración avanzada
  2. En el Editor de temas de Shopify: Ve a la personalización de tu tema y agrega el CSS en la sección de CSS personalizado de tu tema
  3. A través de los archivos del tema: Agrega el CSS a tu archivo assets/application.css o archivo de hoja de estilos similar

Notas importantes

  • Usa siempre !important cuando sea necesario para sobrescribir los estilos predeterminados
  • Prueba tus personalizaciones en diferentes dispositivos y tamaños de pantalla
  • Los colores de marca de tu configuración (brand_primary_color y brand_secondary_color) seguirán aplicándose al fondo del botón CTA y al color del texto respectivamente
  • El CSS personalizado tendrá prioridad sobre el estilo predeterminado mientras mantiene los colores de marca dinámicos

¿Necesitas ayuda?

Si necesitas asistencia con CSS personalizado o tienes requisitos de diseño específicos, por favor contacta a nuestro equipo de soporte.

← Back to All Tutorials