VizupCommerce

Banner-Video-Inhalt mit CSS anpassen

Banner-Video-Inhalt mit CSS anpassen

Wie Sie das Erscheinungsbild von Titel, Untertitel und CTA-Schaltfläche in Ihrem Banner-Video-Widget mit benutzerdefiniertem CSS anpassen.

Verfügbare CSS-Klassen

Das Banner-Video-Widget bietet spezifische CSS-Klassen, die Sie für die Anpassung verwenden können:

Container-Klassen

  • .vizup-banner-content-overlay - Der Haupt-Overlay-Container, der alle benutzerdefinierten Inhalte enthält

Klassen für Inhaltselemente

  • .vizup-banner-custom-title - Das benutzerdefinierte Titel-Überschriftenelement
  • .vizup-banner-custom-caption - Das benutzerdefinierte Untertitel-Absatzelement
  • .vizup-banner-cta-button - Das Call-to-Action-Schaltflächen-/Link-Element

CSS-Anpassungsbeispiele

Titel anpassen

/* Titel größer und zentriert machen */
.vizup-banner-custom-title {
    font-size: 24px !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}


/* Hintergrund zum Titel hinzufügen */
.vizup-banner-custom-title {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

Untertitel anpassen

/* Untertiteltext gestalten */
.vizup-banner-custom-caption {
    font-style: italic;
    opacity: 0.9;
    font-size: 14px !important;
    line-height: 1.4;
    text-align: center;
}

CTA-Schaltfläche anpassen

/* Verbessertes CTA-Schaltflächen-Styling */
.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;
}

Overlay-Container anpassen

/* Gesamte Positionierung und Abstände anpassen */
.vizup-banner-content-overlay {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    padding: 20px !important;
}

So wenden Sie benutzerdefiniertes CSS an

Ausführliche Anweisungen, wo und wie Sie benutzerdefiniertes CSS hinzufügen, finden Sie in unserem Leitfaden zum Hinzufügen von benutzerdefiniertem CSS.

Kurze Zusammenfassung:

  1. Über die Vizup-App (empfohlen): Fügen Sie das CSS auf der Seite “Erweiterte Einstellungen” in der Vizup-App hinzu - Erweiterte Einstellungen öffnen
  2. Im Shopify-Theme-Editor: Gehen Sie zur Theme-Anpassung und fügen Sie das CSS im Abschnitt für benutzerdefiniertes CSS Ihres Themes hinzu
  3. Über Theme-Dateien: Fügen Sie das CSS zu Ihrer assets/application.css oder einer ähnlichen Stylesheet-Datei hinzu

Wichtige Hinweise

  • Verwenden Sie !important bei Bedarf, um Standard-Stile zu überschreiben
  • Testen Sie Ihre Anpassungen auf verschiedenen Geräten und Bildschirmgrößen
  • Die Markenfarben aus Ihren Einstellungen (brand_primary_color und brand_secondary_color) gelten weiterhin für den Hintergrund und die Textfarbe der CTA-Schaltfläche
  • Benutzerdefiniertes CSS hat Vorrang vor dem Standard-Styling und behält dabei die dynamischen Markenfarben bei

Hilfe benötigt?

Wenn Sie Unterstützung bei benutzerdefiniertem CSS benötigen oder spezifische Design-Anforderungen haben, wenden Sie sich bitte an unser Support-Team.

← Back to All Tutorials