Build an animated hero or product intro

Slider Hero Pro creates responsive hero sections, animated headers, landing-page introductions, text carousels, and product or service adverts. Its CSS3 and JavaScript background effects add motion behind slide titles and descriptions. Add one or two call-to-action buttons when a slide needs them.

Choose from 80+ background effects. Style text with 800+ Google Fonts and a live font preview, then use the intro builder to sequence animated text slides. Set slide delays and text animation styles, and add background audio. Depending on the intro settings, it can redirect to another page or load a regular slider after a custom delay.

Background choices shape the result

Use a gradient, background image, or image carousel where the selected effect works with it. Some effects do not display background images, so choose an image-compatible effect when your design needs one. You can also use YouTube video as a background and combine it with animation effects.

For video slides, choose YouTube, Vimeo, or a custom video file in MP4 or WebM format. Video settings include looping, muting, and a color overlay. Autoplay depends on the video being muted, browser policy, and the user’s history with the website. YouTube may still display elements such as Watch Later, Share, or the video title; Slider Hero Pro offers an overlay technique to mitigate them.

Place the slider in your page

Create a slider, select its effect, add a title and description, and include a call-to-action button if needed. Choose a compatible background, then place the design with the Gutenberg Slider block or Elementor Slider widget. Preview it in the page or post to review its responsive layout, animation, text, buttons, and video behavior.