Hero Banner Widget
Updated over a week ago

This widget adds a banner with a configurable background image, title, description, and button.

BANNER

  • Banner link — Enter the URL (like a product, category, or brand page) this banner should be linked to when clicked.

  • Content align — Set the alignment of the title, description, and button.

  • Image fit — Fill to box will resize the image to “fill” the entire area of the banner. Fit to box will resize the image so that the entire image “fits” within the banner without being cut off.

  • Image parallax — This keeps the background image position static as a user scrolls up and down the page, creating a “layered” effect.

  • Image align — Specify how the background image should align horizontally and vertically within the banner.

  • Image opacity — Adjust the opacity of the background image. This can create a “translucent” effect.

TEXT

  • Title — Set the visibility of the banner’s title.

  • Title style — If set to Custom, you can specify a custom font family, weight, and size of the banner’s title. If set to Theme Default, the title will use the default global theme style.

  • Description — Set the visibility of the banner’s description.

  • Description style — If set to Custom, you can specify a custom font family, weight, and size of the banner’s description. If set to Theme Default, the description will use the default global theme style.

  • Text color — Specify the color of both the title and description text.

  • Text color (mobile) — Specify the color of both the title and description text on mobile devices.

BUTTON

  • Button — Set the visibility of the banner’s button.

  • Button font — If set to Custom, you can specify a custom font family for the banner’s button. If set to Theme Default, the button will use the default global theme style.

  • Button style — Select Round, Square, or Pill.

  • Button color — Specify the button color.

  • Button color (mobile) — Specify the button color on mobile devices.

  • Button text color — Specify the button text color.

  • Button text color (mobile) — Specify the button text color on mobile devices.

Did this answer your question?