speeding up the process
Helper classes
The Ranger Blueprint contains key CSS classes that are helpful for styling elements quickly and consistently. These include classes to quickly control margins on headlines, create extra space in specific columns, and turn columns into cards.
Table of Contents
How to add a helper class
To add helper classes, go to the Advanced tab of any element and add the class name without the dot “.” to the CSS Classes field.
*When adding classes in the Elementor CSS Classes field, make sure to add them without the dot “.” at the beginning.
Text margin helper classes
Classes to add or remove margin below headlines and text globally. All of these classes use the following pattern:
m = margin
b = bottom
n = none
xs = extra small
s = small
m = medium
l = large
xl = extra large
.mbn // Zeroes out margin
.mbxs // Applies extra small bottom margin
.mbs // Applies small bottom margin
.mbm // Applies medium bottom margin
.mbl // Applies large bottom margin
.mbxl // Applies extra large bottom margin
Text widget helper classes
.text-narrow // Constrains the width of the text box for better readability
Example – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin tristique dolor, id porta tellus ultrices sit amet. Phasellus ut leo tempus, blandit mauris sed, auctor arcu. Praesent tempor tincidunt ligula quis dignissim. Nullam sed enim iaculis, mollis odio vitae, pharetra lorem. Sed cursus ac sapien eget volutpat. Etiam fringilla leo erat, eu scelerisque felis bibendum sollicitudin. Quisque quis tristique magna, nec mattis quam. Nunc id orci egestas, egestas metus sed, egestas dui. Vivamus malesuada vulputate odio, at egestas tortor tincidunt at. Nunc in tellus ac purus vulputate vulputate in et nisl.
.text-narrow-centered // Constrains width and centers text widget horizontally
Example – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin tristique dolor, id porta tellus ultrices sit amet. Phasellus ut leo tempus, blandit mauris sed, auctor arcu. Praesent tempor tincidunt ligula quis dignissim. Nullam sed enim iaculis, mollis odio vitae, pharetra lorem. Sed cursus ac sapien eget volutpat. Etiam fringilla leo erat, eu scelerisque felis bibendum sollicitudin. Quisque quis tristique magna, nec mattis quam. Nunc id orci egestas, egestas metus sed, egestas dui. Vivamus malesuada vulputate odio, at egestas tortor tincidunt at. Nunc in tellus ac purus vulputate vulputate in et nisl.
.text-small // Decreases font size. Great when there are 3 or more columns or captions.
Example – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin tristique dolor, id porta tellus ultrices sit amet. Phasellus ut leo tempus, blandit mauris sed, auctor arcu. Praesent tempor tincidunt ligula quis dignissim. Nullam sed enim iaculis, mollis odio vitae, pharetra lorem. Sed cursus ac sapien eget volutpat. Etiam fringilla leo erat, eu scelerisque felis bibendum sollicitudin. Quisque quis tristique magna, nec mattis quam. Nunc id orci egestas, egestas metus sed, egestas dui. Vivamus malesuada vulputate odio, at egestas tortor tincidunt at. Nunc in tellus ac purus vulputate vulputate in et nisl.
.text-large // Increases font size, best for intro sections or text that needs extra emphasis
Example – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin tristique dolor, id porta tellus ultrices sit amet. Phasellus ut leo tempus, blandit mauris sed, auctor arcu. Praesent tempor tincidunt ligula quis dignissim. Nullam sed enim iaculis, mollis odio vitae, pharetra lorem. Sed cursus ac sapien eget volutpat. Etiam fringilla leo erat, eu scelerisque felis bibendum sollicitudin. Quisque quis tristique magna, nec mattis quam. Nunc id orci egestas, egestas metus sed, egestas dui. Vivamus malesuada vulputate odio, at egestas tortor tincidunt at. Nunc in tellus ac purus vulputate vulputate in et nisl.
Column spacing helper classes
.padding-large // Adds extra padding to the column it's applied to. Extra padding is automatically reduced and/or removed on smaller devices.
.padding-large added to this column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin tristique dolor, id porta tellus ultrices sit amet. Phasellus ut leo tempus, blandit mauris sed, auctor arcu. Praesent tempor tincidunt ligula quis dignissim. Nullam sed enim iaculis, mollis odio vitae, pharetra lorem. Sed cursus ac sapien eget volutpat. Etiam fringilla leo erat, eu scelerisque felis bibendum sollicitudin. Quisque quis tristique magna, nec mattis quam. Nunc id orci egestas, egestas metus sed, egestas dui.
.padding-xl // Adds even more padding to the column it's applied to. Extra padding is automatically reduced and/or removed on smaller devices.
.padding-xl added to this column.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin tristique dolor, id porta tellus ultrices sit amet. Phasellus ut leo tempus, blandit mauris sed, auctor arcu. Praesent tempor tincidunt ligula quis dignissim. Nullam sed enim iaculis, mollis odio vitae, pharetra lorem. Sed cursus ac sapien eget volutpat. Etiam fringilla leo erat, eu scelerisque felis bibendum sollicitudin. Quisque quis tristique magna, nec mattis quam. Nunc id orci egestas, egestas metus sed, egestas dui.
Column cards
.card // Add this class to any column to turn it into a card with appropriate padding.
Column cards
.card class has been applied to this column. The appearance of cards can be changed globally in the Ranger child theme.
.one-col // Add this class on any column to make each duplicated column take up 100% of the width of the container before automatically wrapping to the next line. Often used with the .card class.
.two-col // Add this class on any column to make each duplicated column take up 50% of the width of the container before automatically wrapping to the next line.Often used with the .card class.
.three-col // Add this class on any column to make each duplicated column take up 33.333% of the width of the container before automatically wrapping to the next line.Often used with the .card class.
.four-col // Add this class on any column to make each duplicated column take up 25% of the width of the container before automatically wrapping to the next line. Often used with the .card class.
Thanks for being a helper!
That's all the helper classes that are currently on the blueprint.