Advanced Hero Slider Widget

The Advanced Hero Slider Widget from RTM Elements allows you to create a striking, full-screen hero section for your Elementor website. With 8 unique styles to choose from, you can find the perfect look for any design, whether it’s a portfolio, an online store, or a creative agency website.

Each style comes with its own layout, animation, and settings, so the options you see in the panel will adjust to the style you choose.

Step 1 — Make Sure RTMKit & RTMElements Activated

The Advanced Hero Slider Widget is part of the RTMElements Addon, which is available with a Rometheme PRO subscription. Before you begin, make sure you have:

1. Installed and activated RTMKit on your WordPress website. (Go to Plugins → Add New Plugin, search for RTMKit, then click Install Now and Activate).
2. Subscribed to Rometheme PRO and connected your account to RTMKit.
   📘 Getting Started with Rometheme PRO
3. Activated the RTMElements Addon from WordPress Dashboard → RTMKit → Features → Addons → Install & Activate RTM Elements.
   📘 How to Activate Addons

Step 2 — Add the Advanced Hero Slider Widget

• Open the page with Elementor.
• Find RTM Elements → Advanced Hero Slider.
• Or search for Advanced Hero Slider in the Elementor widget panel.
• Drag and drop the widget into your desired section or container.

Step 3 — Setting the Advanced Hero Slider Widget

• In the Content tab, you will find several sections to set up your slider.
• Layout: Choose one of 8 styles: Elegance, Portfolio, Dual Layer, Spotlight, Numbered, Fixed Project, Diverge Split, or Journey Cards.
• Tip: Each style has its own look and set of options. Try a few styles to find the one that best fits your design.
• Then set the slider height, the order of the subheading and button, and the button style. You can also add a second button next to the first one.

• Slides: Add, duplicate, or remove your slides, and set the heading, text, image, and button for each one. You can also switch the source to Dynamic to build slides automatically from your posts.

• Slider Settings: Controls how the slider plays, such as autoplay, transition speed, infinite loop, and text animation.
• You can also choose how visitors move between slides, such as swiping, using keyboard arrows, or scrolling the mouse wheel.

• Navigation: Shows or hides the arrows, pagination, and slide counter (for example 01 / 04), and sets where each one appears.

Step 4 — Custom Style the Advanced Hero Slider Widget

• Go to the Style tab to customize the slider’s appearance to match your website’s design.
• Container: Set the background, spacing, corner radius, and image overlay color and opacity.

• Style-specific settings: Some styles have their own section here. For example, Journey Cards lets you adjust the position, size, gap, and labels of the cards on the side.

• Content: Adjust the content alignment, width, and spacing between the subheading, heading, text, and button.

• Subheading, Heading & Text: Set the colors, fonts, and text shadow of each text element. The subheading can also be displayed as plain text or inside a badge.

• Button: Customize the button’s font, colors, border, padding, and shadow, with separate Normal and Hover styles.

• Arrows, Pagination & Counter: Style the navigation elements, including their size, colors, borders, and spacing.

Step 5 — Publish the Template

• Once your design is complete, click Publish to save your changes and make your Advanced Hero Slider live on your website.