- 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 - 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 - 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
- Miva Docs
- Reference Guide
- Miva 10 Page Builder Image and Text Component
PageBuilder - Image and Text Component
The Image and Text component allows you to create a combination of a text area and an image to grab customers’ attention and deliver a specific marketing message.
On this Page
Component Name: The name of the component. The default value is Image and Text but it can be edited as needed.
Link: Allows you to set a destination for the component on click. The options are URL, Product, Category and Page.
Properties: Layout
Image Position: This determines the side of the page the image will be on. The options are Left Side or Right Side.
Column Width Distribution: This allows you to set how the text area and the image will break down the width available in the component. The slider allows you to distribute the column width in percentages, by 10. For example, you could choose to have the text area take up 30 percent of the width while the image takes the remaining 70 percent.
Properties: Image
The Image section of the Properties tab is where you configure the image and settings for the image part of the component.
Image: This is the image associated with the component. 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, the main image you used 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.
Image Height: This sets the height of the image. The options are: Defined by Image Size, Small, Medium and Large. It’s important to remember, if the height of the image is adjusted, the height of the text area changes also.
Properties: Text
Text Alignment: This determines how the text elements, and the button if being used, are aligned horizontally in relation to the image. There are three options: Left, Center and 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: Text Background
To enable the Text Background, click the slider.
Next, you will choose the color of the background. Click the box next to the code to open the color picker.
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.
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 changing 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.