Scales to any width
Because Isotoop uses percentages, your fluid columns will fit into any width.
CSS made easy
Isotoop plugs easily into your existing HTML and CSS, it will be your friend in no time.
Easy to use
Use it on a simple or complex projects as you wish. You'll be done in less time.
All page builders
Isotoop works with Gutenberg, WP Bakery Builder, Elementor and Beaver builder.
Works with html
Without page builder you can integrate it with your own html and CSS.
No maths required
As long as you can count up to the number of columns you need it will be perfect.
For all elements
Isotoop works for all elements in WordPress like rows, columns, modules and text.
All Margins
Easily manage margins of your elements. All or seperately. Top, right, bottom, left.
All Paddings
Easily set of your paddings. All at once or seperately. Top, right, bottom or left.
Classes
How does structure and spacing work?
Add shortcode to the class of your element in Gutenberg or your preferred page builder (Elementor, Beaver Builder, Bakery Builder, Divi). In case you are not familiar with classes see the description at the bottom of the page. Don't worry, it's very easy learn and apply.
Variables
Padding (m-)
Padding Top (mt-)
Padding Bottom (mb-)
Padding Left (ml-)
Padding Right (mr-)
Padding Vertical (mv-)
Padding Horizontal (mh-)
Margin (m-)
Margin Top (mt-)
Margin Bottom (mb-)
Margin Left (ml-)
Margin Right (mr-)
Margin Vertical (mv-)
Margin Horizontal (mh-)
Example of spacing
Easily change your spacing to your needs
In this example some columns with adjusted padding (inside the box) the margins (outside the box).
In red you can see the style or shortcode that is used for the class.
Padding Small
This is a box with no padding. The class of this column is:
p-0
Padding Small
This is a box with a small padding. The class of this column is:
p-s
Padding Normal (default)
This is a box with a normal padding. The class of this column is:
p-n
Padding Large
This is a box with a large padding. The class of this column is:
p-l
Padding Small
This is a box with no padding and XL margin top. The class of this column is:
p-0 mt-xl
Padding Small
This is a box with small padding and L margin top. The class of this column is:
p-s mt-l
Padding Normal (default)
This is a box with normal padding and normal margin top. The class of this column is:
p-n mt-n
Padding Large
This is a box with a large padding and no margin-top. The class of this column is:
p-l
