Hero Designs

Every ARN Hero design is a separate Elementor widget with its own panel, views and styles, built on one shared engine. Switching designs changes the layout, not the way the slider behaves.

• Keyboard. Arrow keys, Home and End move between slides once the widget has focus; left and right follow the reading direction.
• Swipe and drag. Touch swipe and mouse drag change slides and are mirrored on right-to-left sites. Both can be turned off.
• Autoplay you can stop. A play / pause button and a progress line appear while autoplay is on. Autoplay waits while the hero is hovered or focused, stays off for visitors who prefer reduced motion and stays off in the editor until you press play.
• Lazy media. Images and videos of hidden slides load only when needed. A video plays only while its slide is shown, the widget is on screen and the browser tab is visible.
• Page structure. Choose the title HTML tag (by default the first title is the H1 and the others H2), give the hero an accessible name and set a top offset when a transparent header sits over it.

Each slide takes an image or video background with a focal point and an overlay color, plus a subtitle, title, text and up to three buttons, depending on the design. The widget files load only on pages that use them, and ARN Hero widgets also start inside Full Modal content.

The ARN Hero designs are part of Vendix Pro.

ARN Hero — Panels fills the screen with three to six panels that expand when opened. The first panel can be open at start, or all panels can start equal. A panel opens on mouse over, tap or click, or on tap and click only; touch screens and the keyboard work the same in both modes.

Views: slanted panels, straight panels, colour panels or stacked rows.

On phones and on tablets held upright, the panels become an accordion with one panel open. An optional rotation opens the panels in turn and has its own pause button. The slant, the dividers and the width of the open panel are adjustable.

ARN Hero — Typography shows one big word per slide, sized to fill the width. An optional cut-out object can be woven through the word outline, placed in front of the word or behind it. Choose a light surface with a dark word or the reverse, solid or outline letters, and upper case or the case as typed.

Views: one word across the screen, stacked lines from the start edge, a moving band of the word, or the slide image inside the letters.

A side menu lists the slide names turned on their side; on phones it becomes numbers along the bottom. The moving band stops with the pause button, on hover and for reduced motion. The word rises in, fades in or zooms out as the slide changes.

ARN Hero — Fashion is a collection slider with a thin top strip: a label, up to four collection links and social links from the widget or from Vendix → Company Data. The strip does not replace the site header. Each slide has a handwritten, outlined or serif italic accent line over a bold title, shop links shown as underlined links or buttons, and vertical slide numbers.

Views: full image under the strip, image in a light frame, or an arch image beside the text.

One bottom link stays on every slide. Slides change with a fade, a slide or a curtain reveal. The handwritten accent uses a script font from the visitor's system unless you choose a font under Style → Title.

ARN Hero — Parallax combines a giant title with a cut-out image and background layers that follow the mouse at different depths. Touch screens and visitors who prefer reduced motion see the layers still. The corner interface holds a menu, a slide counter, social links from Vendix → Company Data and a contact link.

Views: layers over the media, a framed poster on a dark color, or a light page with a media panel.

Set the title side, the width of the cut-out image and the depth of the movement. A social network appears only when it has a profile address in Company Data.

Corner links add up to four links, such as About or Contact, to the corners of any ARN Hero widget. Each link opens a side panel or a modal inside the widget with text or a saved Elementor template. Corner links are off until you turn them on in the widget's Corner links section.

• Placement. Top start, top end, bottom start or bottom end; Start and End follow the reading direction.
• Panel side. A side panel slides in from the start or end edge; a modal opens as a centered card.
• Keyboard and focus. Focus stays inside the open panel, Escape closes it, the page behind it is inert and focus returns to the link.
• Loading. The content renders with the page; nothing is loaded later.

A newly dropped ARN Hero widget arrives with a complete made-up story and lightweight drawings shipped with the plugin. Replace the texts and images with your own; a slide added in the editor also starts with a drawing.

Widgets already saved on a page keep their texts and settings. In ARN Hero Slider, Image Slider, Logo Carousel and Media Showcase, saved items that still used Elementor's gray placeholder image show the sample drawing instead.