• Miva Docs
• Reference Guide
• Miva 10 Page Builder Hero Slider Component

PageBuilder - Hero Slider Component

Like the Hero Banner, the Hero Slider is usually located at the top of your page, but the slider allows you to use multiple images and text boxes rather than just a single static image and text box.

It’s an excellent way to draw a visitor’s attention to multiple marketing efforts at once.

On this Page

• Properties: Slides
• Advanced: Spacing
• Advanced: Desktop
• Advanced: Mobile
• Advanced: Slide Controls

Component Name: The name of the component. The default value is “Hero Slider” but it can be edited as needed. For example, if you created a special Labor Day sale hero slider, you could name it “Labor Day Hero Slider.”

Properties: Slides

Banner Height: This sets the size of the banner. The options are: Defined by Image Size, Small, Medium or Large.

Clicking the individual slide headers opens up configuration options for each slide. You can also add a slide by clicking Add Slide.

Slide Name: This allows you to give the individual slide a name.

Slide Link: This setting allows you to link the slide to one of four options. The options are: URL, Product, Category or Page.

Hero Image: This is the image for this particular slide of your Hero Slider. Clicking the icon next to the file name box opens the Add Image page. You can upload a new image, select an image that is already in your system or add an image that is already on your server by using the path to the image.

Image Settings

The Image Settings subsection allows you to set specific images for when your website is viewed on a mobile device or tablet. If you don’t set specific images for those your main hero image will be resized to fit.

Alt/Title Text: The Alt/Title Text is text that displays when a website visitor hovers their mouse over the image in question and its use is considered a best practice, particularly when it comes to SEO.

Content Placement: This determines where the text element will display in the slider. The options are: Left, Center and Right.

Text Alignment: This determines where the button will display within the text element. The options are: Left, Center and Right.

Heading/Subheading/Body/Button Text

Advanced: Spacing

The Spacing section of the Advanced tab allows you to alter the spacing, or padding, on the top and the bottom of the component. This establishes the space between this component and the page elements adjacent to it. It is set in pixels.

Advanced: Desktop

The Desktop section of the Advanced tab allows you to change additional aspects of the look of the text element in the Hero Slider.

Text Background Color: This establishes whether or not the text element has a background color. If the slider is not clicked to green, the text box will be transparent and you can see the hero image behind the text.

Color: If the slider is clicked green, the Color field will display, allowing you to select the color of the text box background. Clicking the box below Color opens the color picker. There are many options.

You can use Slider Mode to find a desired color. Clicking the drop down opens up three options: RGBa, SLa and CMYKa.

You can also input a color code. There are five Input Modes: RGBa, HSLa, CMYKa, HEX and HEXa.

Text Container Width: This establishes the width of the text container compared to the width of the image. The options are: Auto, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% and 100%.

Image Shader Overlay: This allows you to shade the image, which can bring attention to the text element. You can enter the amount of shade you want, as a percentage, or you can use the slider.

Advanced: Mobile

The Mobile section of the Advanced tab allows you to tailor the settings for the text element for Mobile users.

Text Background Color: This establishes whether or not the text element has a background color. If the slider is not clicked to green, the text box will be transparent.

Select a color for the background just as explained above.

Advanced: Slide Controls

Time Delay Per Slide: This sets how long each slide will be on the screen before the admin advances to the next slide. It is set in seconds.

Autoplay: If this box is checked, the slides will advance on their own. If it is not checked, the page viewer will need to click the arrows to the side of the page to advance to the next slide or go back to the previous slide.

Pause on Hover: If this box is checked, the slides will pause if the page viewer hovers the mouse pointer over the image.

Next Section

• PageBuilder - Rich Text Editor Component