The Image Across component is simply a component that allows you to highlight one (or more) images across the width of the screen.
Component Name: The name of the component. The default value is Two Across but it can be edited as needed.
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 Two Across component. The options are: Left, Center and Right.
Heading Alignment: In this example, the Section Title is center-aligned.
Set the Heading Text options as desired. For additional information on the various text settings, see note below.
The Images section of the Properties tab is where you set up the images to display in the Two Across component.
Image Height: Choose the size of your Two 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.
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.
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.
Changing the font colors of any of the above options is done in the Text and Button styles section below, and not within the individual image text settings. Because of this, any change to the Heading Text font color for example, will change the Heading Text font color for every heading on every image. It is not possible to individually change the font color associated with image text of a single image.
Editing successive images works exactly as editing Image One.
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.
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 Vertical Alignment: In the example above, from left to right, 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.
Text Horizontal Alignment: In the example above, from left to right, Left, Center and Right.
Changing the Text Vertical and/or Horizontal Alignment, changes the alignment for all of the text elements associated with the category images. You cannot change the alignment for each element separately.
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.
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.
The Desktop section of the Advanced tab allows you to change additional aspects of the look of the Two Across component.
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.
Image Shader Overlay: In the example above, from left to right, 0% shading, 30% shading and 70% shading.
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.
If the settings in this section are not adjusted, the admin will use the same settings as in the desktop version of the page.
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.
Horizontal Scroll: Horizontal Scroll leaves the categories aligned horizontally, like on the desktop version of the site, but will put a scroll bar at the bottom of the component to scroll to the side and see the additional categories.
Wrap: Wrap puts the categories into columns based on the amount of screen space of the device the site is being viewed on. Scrolling down the page reveals additional categories.