PageBuilder - Categories Component

The Categories component is a way for you to showcase specific categories of retail items available on your website to visitors.

Alt text here

On This Page

Alt text here

Component Name: The name of the component. The default value is Categories but it can be edited as needed. For example, if you created a special seasonal categories component, you could name it “Summer Categories.”

Properties: Section Title

In order to access the configuration options for the Section Title section, you must click the slider to enable the option.

Alt text here

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

Alt text here

Heading Alignment: In this example, the Section Title is center-aligned.

Heading Text: Enter the desired heading text in the box. Clicking the icon next to the Heading Text box opens the Text Settings pop out.

Note

You can preview various styles associated with Heading Text, Subheading Text, Body Text and Button Text by reviewing the style sheet, here.

In the box that opens, there are several text settings you can configure. For more information on text settings, see note below.

Alt text here

Properties: Images

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

Alt text here

Image Height: Choose the size of your category 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 categories, delete categories and change the images associated with each category. To delete a category, click the X to the right of the category you wish to delete. To reorder the categories, click and hold the six dots to the left of the category, then drag the category to where you want it to be and unclick.

To change the image associated with a category, click the category title.

Alt text here

Image: This is the image associated with this particular category. 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 for the category, you must click the slider next to the Text header to enable it.

Alt text here

Heading Text: The main text that displays immediately under the category image.

Subheading Text: Subheading text inserts above the Heading text and under the image.

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

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

Properties: Text and Button Styles

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

Alt text here

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.

Alt text here

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.

Alt text here

Text Horizontal Alignment: In the example above, from left to right, Left, Center and Right.

Note

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.

Heading Text Styles

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.

Alt text here

Advanced: Desktop

The Desktop section of the Advanced tab allows you to change additional aspects of the look of the Categories component.

Alt text here

Column Count: The number of columns the categories will appear in is set here. There are nine options: Auto, 1, 2, 3, 4, 5, 6, 7 and 8.

Alt text here

Column Count: In the example above, the column count is set to three. Because 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 category 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.

Alt text here

Image Shader Overlay: In the example above, from left to right, 0% shading, 30% shading and 70% shading.

Advanced: Mobile

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

Alt text here

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.

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.

Alt text here

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.

Alt text here

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.

Next Section

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

Accept

Copyright © 1997 – 2021 Miva©, Miva Merchant©, MivaPay©, MivaCon© Miva, Inc. All Rights Reserved.