• Miva Docs
• Reference Guide
• Miva 10 Page Builder Image Across Component

PageBuilder - Image Across Component

The Image Across component is simply a component that allows you to highlight one image, or multiple images, across the width of the screen.

On this Page

• Properties: Section Title
• Properties: Images
• Properties: Text and Button Styles
• Advanced: Spacing
• Advanced: Desktop
• Advanced: Mobile

Component Name: The name of the component. The default value is Image Across but it can be edited as needed.

Properties: Section Title

In order to access the configuration options for the Section Title section, you must click the slider to make enable the option. The Section Title appears at the top of the component.

Heading Alignment: This determines where the heading will display within the Image Across component. The options are: Left, Center and Right.

Text Settings

Set the Heading Text options as desired. For additional information on the various text settings, see note below.

Properties: Images

The Images section of the Properties tab is where you set up the images to display in the Image Across component.

Image Height: Choose the size of your Image Across images. The choices are: Defined by Image Size, Small, Medium and Large. Changing the image height in the drop down menu, changes the image height in the live preview window, allowing you to see what your choice looks like.

Image Across: This is where you can reorder the images, delete images and change the images associated with the component. To delete an image, click the X to the right of the image you wish to delete. To reorder the images, click and hold the six dots to the left of the image, then drag the image to where you want it to be and unclick.

To change the image associated with the first image, click Heading for Image One.

Image: This is the image associated with Image one. 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 Link: This setting allows you to link the image to one of four options. The options are: URL, Product, Category or Page.

Text Section

In order to have text display along with the image, you must click the slider next to the Text header to enable it.

Heading Text: The main text that displays over the top of Image One.

Subheading Text: Subheading text inserts above the Heading text.

Body Text: Body text slots in underneath the Heading text.

Button Text: You can edit the call-to-action button by using the Button Text box.

Add Image: The Add Image link allows you to add an image, or images, to the Image Across component, making it a two, three or four or more across. When an image is added, the existing images are shrunk to make room for the additional image.

Properties: Text and Button Styles

This section allows you to manipulate the location of the text elements and button associated with the image.

Text Vertical Alignment: This determines how the main text element, and the button if being used, is aligned vertically in relation to the image. There are four options: Center-Left, Center, Bottom-Left and Below Image.

Text Horizontal Alignment: This determines how the main text element, and the button if being used, is aligned horizontally in relation to the image. There are three options: Left, Center and Right.

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 Image Across component.

Text Background Color: This allows you to set a background color for the text field on Desktop versions of the website.

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.

Column Count: The number of columns the images will appear in is set here. There are nine options: Auto, 1, 2, 3, 4, 5, 6, 7 and 8. If you set the column count to three, and there are six images in the component, the images will be displayed in three columns of two. The images will be adjusted to fit the space.

Image Shader Overlay: This allows you to shade the images, which can bring attention to text elements. You can enter the amount of shade you want, as a percentage, or you can use the slider. Changing the shader overlay changes the percentage for all the images. They cannot be shaded separately.

Advanced: Mobile

The Mobile section of the Advanced tab allows you to set additional aspects for how the Two Across component looks and behaves on mobile devices.

Text Background Color: This allows you to set a background color for the text field on Mobile versions of the website.

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.

Overflow Behavior: This establishes how the component will look when viewed on a mobile device, when there are more categories and images than there is available screen room. There are two settings: Wrap and Horizontal Scroll.

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.

Next Section

• PageBuilder - Text Area Component