VizupCommerce

使用 CSS 自定义横幅视频内容

使用 CSS 自定义横幅视频内容

如何使用自定义 CSS 自定义横幅视频小组件中标题、说明文字和 CTA 按钮的外观。

可用的 CSS 类

横幅视频小组件提供了特定的 CSS 类，您可以针对这些类进行自定义：

容器类

  • .vizup-banner-content-overlay - 包含所有自定义内容的主叠加层容器

内容元素类

  • .vizup-banner-custom-title - 自定义标题标题元素
  • .vizup-banner-custom-caption - 自定义说明文字段落元素
  • .vizup-banner-cta-button - 行动号召按钮/链接元素

CSS 自定义示例

自定义标题

/* Make title larger and centered */
.vizup-banner-custom-title {
    font-size: 24px !important;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    color: #ffffff !important;
    margin-bottom: 10px !important;
}


/* Add a background to the title */
.vizup-banner-custom-title {
    background: rgba(0, 0, 0, 0.7);
    padding: 8px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
}

自定义说明文字

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

自定义 CTA 按钮

/* Enhanced CTA button 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;
}

自定义叠加层容器

/* Adjust the overall positioning and spacing */
.vizup-banner-content-overlay {
    bottom: 20px !important;
    left: 20px !important;
    right: 20px !important;
    padding: 20px !important;
}

如何应用自定义 CSS

有关在何处以及如何添加自定义 CSS 的详细说明，请参阅我们的如何添加自定义 CSS 指南。

快速摘要：

  1. 使用 Vizup 应用（推荐）：在 Vizup 应用的高级设置页面中添加 CSS - 打开高级设置
  2. 在 Shopify 主题编辑器中：转到您的主题自定义页面，将 CSS 添加到主题的自定义 CSS 部分
  3. 通过主题文件：将 CSS 添加到您的 assets/application.css 或类似的样式表文件中

重要说明

  • 必要时请始终使用 !important 来覆盖默认样式
  • 在不同设备和屏幕尺寸上测试您的自定义效果
  • 来自设置的品牌颜色（brand_primary_color 和 brand_secondary_color）仍将分别应用于 CTA 按钮的背景色和文字颜色
  • 自定义 CSS 将优先于默认样式，同时保持动态品牌颜色不变

需要帮助？

如果您需要有关自定义 CSS 的帮助或有特定的设计需求，请联系我们的支持团队。

← Back to All Tutorials