The Hero / Breadcrumbs → Style panel allows you to customize the visual appearance of the hero section and breadcrumb navigation across your website. From here, you can control the hero section colors, backgrounds, and overlays for pages, archives, blog posts, and the WooCommerce pages.

Common Style Options (Used Across All Sections) #

The following styling options are shared across all hero style sections unless stated otherwise:

• Hero Title Color: Sets the color of the hero title text.
• Breadcrumb Color: Controls the color of breadcrumb text.
• Breadcrumb Link Color: Sets the color of clickable breadcrumb links.
• Breadcrumb Link Hover Color: Defines the color when hovering over breadcrumb links.
• Hero Background: Configure the hero background using a color or image.
  Includes options for:
  • Background Repeat
  • Background Size
  • Background Attachment
  • Background Position
• Hero Background Overlay: Adds a color overlay on top of the hero background image.
  Useful for improving text readability on image backgrounds.

Page Hero Style #

Customize the hero and breadcrumb appearance for standard WordPress pages.

Uses all Common Style Options listed above.

Archive Hero Style #

Controls the hero styling for blog archive pages, including:

• Category archives
• Tag archives
• Author archives
• Date-based archives

Uses all Common Style Options.

Single Blog Hero Style #

Applies styling to the hero section on individual blog posts.

Additional Background Option:

• Featured Image as Background – Uses the post’s featured image as the hero background.
• Custom Background – Upload or select a custom background image.

Uses all other Common Style Options.

WooCommerce Pages Hero Style #

Controls hero styling for WooCommerce system pages, including:

• Shop
• Product category and tag archives
• Cart
• Checkout
• Order Complete pages

Uses all Common Style Options.

Additional Option:

• Breadcrumb Active Step Icon Color
  Applies to Cart, Checkout, and Order Complete pages to highlight the active step in the breadcrumb.

Single Product Hero Style #

Customize the hero and breadcrumb appearance for individual product pages.

Additional Background Option:

• Product Thumbnail as Background – Uses the product featured image.
• Custom Background – Upload a custom hero background image.

Uses all other Common Style Options.

Best Practices #

• Readability First – Use overlays when placing text over images.
• Consistency – Keep colors consistent across page types for a unified look.
• WooCommerce UX – Highlight active breadcrumb steps for better checkout flow.
• Performance – Optimize background images for faster loading.

📌 Reminder: Click Save Changes after updating styles. Use Reset Section to restore default values.