The Aivilo Image Gallery module is a HubSpot module utilized by HubSpot users to create stunning image galleries with little need to know code. This documentation addresses some of the editable fields of the module that may need more explination. You can donwload this module from the HubSpot market place for immediate use across HubSpot landing pages and webstie pages. The following are features of the Aivilo Image Gallery module:
Learn more about this module on HubSpot's marketplace!
Choose how to sort images (by topic) in your gallery module. Choose from a "Button Sorter" option, a "Dropdown Select" option, or hide all image gallery sorting options from view.
Button Styling Options: The following will have precedence over any custom CSS class entered for the button:
Set "Button Hover Background Color" and "Button Text Color" to "none" to disable basic button styling by the module, and allow your button styling to take precedent by adding the appropriate CSS class to the "Add custom CSS class (for button)" field.
Note: setting a Button Hover Background Color will also apply a border to the buttons.
Label: Enable a custom gallery image label for each photo/image that displays in the image gallery. The label displays below the image itself and is editable in a rich text editor.
Hover Description: Enable a message or text to display on hover of an image in the image gallery. The hover description is editable in a rich text editor for complete control over text styling.
Topics: Associate one (1) topic to an image. Topics enable the user to sort images in the image gallery.
Note: To associate more than one (1) photo with the same topic, you MUST type in the same topic to the topics field, verbatim, with identical spelling, capitalization, etc.
The All In One Gallery Image module gives you the power to vertically or horizontally align images in the gallery.
Vertical Aligned Gallery: Display images in a vertically aligned fashion. You must specify a default image height, width, and container height.
Vertical Gallery Container Height: Specify the height of the container in which all images in the image gallery exit.
Note: Decreasing the height of the Vertical Gallery Container Height field will generally increase the number of columns in a vertically aligned gallery. Increasing the height of the Vertical Gallery Container Height field will decrease the number of columns in the vertical aligned gallery. This may require some tweaking and testing to achieve the ideal number of columns in the gallery.
Horizontal Aligned Gallery: Display images in a horizontally algned fahsion. You must specify a default image width and height.
Alternative Photo: Set a custom size for an image to display every nth time in the image gallery.
Alternative Photo #2: Set a custom size for an image to display every nth time in the image gallery.
Note: In the case that every nth times overlap, Alternative Photo will take precedent over Alternative Photo #2
Apply a background color to the entire image gallery. Works best when image gallery module is applied to the page at a flex column that spans 100% of the page width. Choose from a solid color, use a color gradient, or leave the fields blank to allow your stylesheet's default body background color.
Enable padding around the container that holds all gallery images. Here you can also enter padding between each image in the gallery, applied to all images in the gallery.
Enable box shadow: turns on a box shadow to all images in the image gallery
Image border radius: designate an border radius for each image, applied to each image in the image gallery
Drop me a messaage and I'll get back to you as soon as possible. Click "Contact Support" to submit a ticket for support issues related to the Aivilo Web Image Gallery module.
Copyright 2019. Matthew Fall Portfolio. All Rights Reserved.
