Personnaliser le contenu vidéo de la bannière avec du CSS

Personnaliser le contenu vidéo de la bannière avec du CSSSection titled Personnaliser%20le%20contenu%20vid%E9o%20de%20la%20banni%E8re%20avec%20du%20CSS

Comment personnaliser l’apparence du titre, de la légende et du bouton CTA dans votre widget vidéo bannière à l’aide de CSS personnalisé.

Classes CSS disponiblesSection titled Classes%20CSS%20disponibles

Le widget vidéo bannière fournit des classes CSS spécifiques que vous pouvez cibler pour la personnalisation :

Classes du conteneurSection titled Classes%20du%20conteneur

• .vizup-banner-content-overlay - Le conteneur principal de superposition qui contient tout le contenu personnalisé

Classes des éléments de contenuSection titled Classes%20des%20%E9l%E9ments%20de%20contenu

• .vizup-banner-custom-title - L’élément d’en-tête du titre personnalisé
• .vizup-banner-custom-caption - L’élément de paragraphe de la légende personnalisée
• .vizup-banner-cta-button - L’élément bouton/lien d’appel à l’action

Exemples de personnalisation CSSSection titled Exemples%20de%20personnalisation%20CSS

Personnaliser le titreSection titled Personnaliser%20le%20titre

/* Agrandir le titre et le centrer */
.vizup-banner-custom-title {
    font-size: 24px !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}

/* Ajouter un arrière-plan au titre */
.vizup-banner-custom-title {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

Personnaliser la légendeSection titled Personnaliser%20la%20l%E9gende

/* Styliser le texte de la légende */
.vizup-banner-custom-caption {
    font-style: italic;
    opacity: 0.9;
    font-size: 14px !important;
    line-height: 1.4;
    text-align: center;
}

Personnaliser le bouton CTASection titled Personnaliser%20le%20bouton%20CTA

/* Style amélioré du bouton 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;
}

Personnaliser le conteneur de superpositionSection titled Personnaliser%20le%20conteneur%20de%20superposition

/* Ajuster le positionnement et l'espacement général */
.vizup-banner-content-overlay {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    padding: 20px !important;
}

Comment appliquer du CSS personnaliséSection titled Comment%20appliquer%20du%20CSS%20personnalis%E9

Pour des instructions détaillées sur où et comment ajouter du CSS personnalisé, veuillez consulter notre guide Comment ajouter du CSS personnalisé.

Résumé rapide :Section titled R%E9sum%E9%20rapide%20%3A

1. En utilisant l’application Vizup (recommandé) : Ajoutez le CSS dans la page Paramètres avancés de l’application Vizup - Ouvrir les paramètres avancés
2. Dans l’éditeur de thème Shopify : Accédez à la personnalisation de votre thème et ajoutez le CSS dans la section CSS personnalisé de votre thème
3. Via les fichiers du thème : Ajoutez le CSS à votre fichier assets/application.css ou un fichier de feuille de style similaire

Remarques importantesSection titled Remarques%20importantes

• Utilisez toujours !important si nécessaire pour remplacer les styles par défaut
• Testez vos personnalisations sur différents appareils et tailles d’écran
• Les couleurs de la marque définies dans vos paramètres (brand_primary_color et brand_secondary_color) s’appliqueront toujours respectivement à la couleur de fond et à la couleur du texte du bouton CTA
• Le CSS personnalisé aura la priorité sur le style par défaut tout en conservant les couleurs de marque dynamiques

Besoin d’aide ?Section titled Besoin%20d%u2019aide%20%3F

Si vous avez besoin d’aide pour le CSS personnalisé ou si vous avez des exigences de conception spécifiques, veuillez contacter notre équipe de support.