- Reference Guide
- Miva Reference Guide
- PageBuilder
-
- Customers - Create a Customer Account
- Customers - Customers Batch List
- Customers - Customer Dashboard
- Customers - Customer Tax Exempt
- Customers - Shop as Customer
- Customers - Last Password Changed
- Customers - Customer Quick Add
- Customers - Business Accounts
- Customers - Customer Settings
- Customers - Availability Groups
-
- Creating a New Order
- Working with Orders
- Order and Order Item Statuses
- Processing Returns and Refunds
- Address Validation
- Recalculate Shipping
- Item Lookup
- Payment Transactions List
- Authorization Failures
- Unship Shipments/Split Shipped Shipments
- Add/Edit Subscriptions
- Batch Capture Progress Dialog
- Transactions
-
- Expanded Search Rules (Full Text Search)
- Copy Price Group
- Geographic Shipping Restrictions
- Exclusion Rule Caching
-
- Price Groups - Global Settings
- Price Groups - Qualifying/Discounting
- Price Groups - Structure/Priorities/Relationships
- Price Groups - Legacy
- Price Groups - Add-on Product
- Price Group - Basket Discount
- Price Group - Basket Discount (Specific Products)
- Price Groups - Buy X Get Y
- Price Groups - Markup from Cost
- Price Groups - Product Discount
- Price Groups - Customer Specific Pricing
- Price Groups - Specific Sale Price
- Price Groups - Shipping Discount (Entire Order)
- Price Groups - Shipping Discount (Discounted Products Only)
- Price Groups - Volume Pricing
- Price Groups - Using Coupons
- Price Groups - Via Template Code
- Marketing Settings
-
- Sort Order History by Status
-
- Page Builder - Upgrade Process
- Page Builder - General Overview
- Page Builder - Creating a New Page
- Page Builder - Page Settings
- Page Builder - Navigation Drop Down
- Page Builder - Mobile Tablet Desktop Preview
- Page Builder - Scheduling in Page Builder
- Page Builder - Pushing Your Page Live
- Page Builder - Template Branch Preview
- Page Builder - Components Overview
- Page Builder - Markdown Authoring
- Page Builder - Global Components
- Page Builder - Hero Banner Component
- Page Builder - Text Banner Component
- Page Builder - Image Across Component
- Page Builder - Text Area Component
- Page Builder - Image and Text Component
- Page Builder - Video Component
- Page Builder - Hero Slider Component
- Page Builder - Rich Text Editor Component
- Page Builder - Product Carousel Component
- Page Builder - Featured Product Component
- Page Builder - Category Carousel Component
- Page Builder - Quick Order Flex Component
- Page Builder - Combination Facet Flex Component
- Page Builder - Accordion Component
- Page Builder - Contact Form Component
- Page Builder - Enhanced Product List
- Page Builder - Header-Footer
- Page Builder - Component Text Settings
- Page Builder - Style Guide
- Copy Page
-
-
- Manage Quotes - Overview
- Manage Quotes - Installation
- Manage Quotes - Quote Page Templates
- Manage Quotes - Using Manage Quotes
- Manage Quotes - Quote Notes
- Manage Quotes - Working with Quotes
- Manage Quotes - Excluding Quotes from Price Groups
- Manage Quotes - Quote Expiration and Follow Up Emails
- Manage Quotes - Price Groups
- Manage Quotes - Quoted Shipping
- Miva Connect
Try our new AI assistant by clicking the chat icon in the lower right corner.
- Miva Docs
- Reference Guide
- Miva 10 Page Builder Hero Banner Component
PageBuilder - Hero Banner Component
Your Hero Banner is the area of your webpage between the top navigation and the start of your content. It's often an image but doesn't have to be. It generally serves as the starting point for your page and is usually the first thing a webpage visitor sees.
Because of its prominence, it provides you with a powerful way to directly address website visitors, either generally speaking, or to present unique marketing messages that will grab their attention as soon as they visit your website or webpage.
On this Page
Component Name: The name of the component. The default value is “Hero” but it can be edited as needed. For example, if you created a special Labor Day sale hero banner, you could name it “Labor Day Hero.”
Banner Link: This setting allows you to link the banner to one of four options. The options are: URL, Product, Category or Page.
Properties: Image
Hero Image: This is the main image on your hero banner. 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 Height: Choose the size of your hero image. The choices are: Defined by Image Size, Small, Medium or Large. Changing the image size in the drop down menu, changes the size of the image in the live preview window, allowing you to see what your choice looks like.
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.
Properties: Text
In order to use the Text function in the Hero banner, you must click the slider next to the Text header to enable it.
Content Placement: This determines where the text element will display in the banner. The options are: Left, Center and Right.
Text Alignment: This determines how the text and button allign within the text element. The options are: Left, Center and Right.
Content Placement/Text Alignment: In this example, from left to right, the values are Content Placement and Text Alignment left, Content Placement and Text Alignment center and Content Placement and Text Alignment right.
Note
For the rest of the configuration options for elements like Heading Text, Subheading Text, Body Text and Button Text, please visit the Text Settings document, here.
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 banner.
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.
Text Background Color: If the Text Background Color is not enabled, you will see the Hero Image behind your text element.
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, HSLa 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 main image. The options are: 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90% and 100%.
Text Container Width: In this example, from left to right, the container width is 30%, 50% and 70%.
Image Shader Overlay: This allows you to shade the main 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.
Image Shader Overlay: In this example, from left to right, the Image Shader Overlay values are 30% and 70%.
Advanced: Mobile
The Mobile section of the Advanced tab allows you to tailor the settings for the text element for Mobile users.
Note
If the settings in this section are not adjusted the admin will use the same settings as in the desktop version of the page.
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.
Mobile Text Background Color: In this example, on the left, the text element without background color and on the right, the text element with background color.
Content Theme: The Content Theme setting allows you to quickly change the text and button colors when they are used over light or dark backgrounds. Rather than needing to go into each text element and individually change them due to the background, you can change the theme of all of the elements quickly in one spot.
The Content Theme settings are:
- Light: This is the default color scheme. It's good for use over light/white backgrounds.
- Dark (Always): This is good for use over dark backgrounds and images and applies a color scheme to the text and button elements that is more suitable for dark backgrounds. The (Always) indicator means it applies to all screen sizes; mobile, tablet and desktop.
- Dark (Desktop Only): This is good for use over a dark image, or if you have a dark background for desktop devices, but are using the default light or white colors on mobile and tablet devices. Like the Dark (Always) selection, it applies a color scheme to the text and button elements that is more suitable for dark backgrounds.
- Inverted: This selection should be used carefully, because it inverts the hues of all the colors of the elements inside a content area. For example, if an element is normally white, it will now be black. If it was red, it would be cyan, etc. This works well for monochromatic color schemes over dark backgrounds, but may not be great for colorful themes.