Equalize

Allows you to equalize the height of specific content items throughout your page with ease.

Examples

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Header

Lorem ipsum labore et dolore sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut ipsum labore etenim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo dolor consequat. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris.

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute in fugiat nulla pariatur.

3_celociraptor

Your scientists were so preoccupied with whether or not they could, they didn’t stop to think if they should.

We've simplified the way Equlaize works over its past implementation. This new iteration cuts out the need for multiple parent tools. You now only need one Parent Equalize tool per page and it will power all child items.

PLEASE NOTE: Equalize executes its code as soon as page elements are available to it to do so. Sometimes image loading takes longer than this however. Equalize will update the equalization of page elements again once all images that are inside of Equalize child items have loaded. This helps to account for any change in height because of late loading images.

Settings

Parent Tool

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.

Child Item

The Child items for Equalize are meant to be moved out of the parent tool and placed where needed on the page.

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Matching Identifier

Preset Identifier

When using this tool, all Equalize child items with matching identifiers will become equal in height to the largest of the items with matching IDs.

The preset identifiers allows you a quick way to match Equalize items to one another. By clicking the small + icon you can instead opt to use your own custom identifier. When using a custom identifier, be sure you do not use spaces or special characters.

Equalize Above

Equalize

Here we can choose the breakpoints where the equalization will occur. As an example — the default option is set to Medium and larger, meaning that this item will equalize its height with other elements with matching IDs at the Medium, Large, Extra Large and Extra Extra Large breakpoints, but will not equalize itself at the Extra Small or Small breakpoints.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.