Structure & spacing

Isotoop is a fully responsive grid system and framework.
It's a quick, easy and flexible way to create WordPress websites.

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

xxxs
xxs
xs
s
n
l
xl
xxl
xxxl

Padding (m-)

p-xxxs
p-xxs
p-xs
p-s
p-n free
p-l free
p-xl
p-xxl
p-xxxl

Padding Top (mt-)

pt-xxxs
pt-xxs
pt-xs
pt-s
pt-n
pt-l
pt-xl
pt-xxl
pt-xxxl

Padding Bottom (mb-)

pb-xxxs
pb-xxs
pb-xs
pb-s
pb-n
pb-l
pb-xl
pb-xxl
pb-xxxl

Padding Left (ml-)

pl-xxxs
pl-xxs
pl-xs
pl-s
pl-n
pl-l
pl-xl
pl-xxl
pl-xxxl

Padding Right (mr-)

pr-xxxs
pr-xxs
pr-xs
pr-s
pr-n
pr-l
pr-xl
pr-xxl
pr-xxxl

Padding Vertical (mv-)

pv-xxxs
pv-xxs
pv-xs
pv-s
pv-n
pv-l
pv-xl
pv-xxl
pv-xxxl

Padding Horizontal (mh-)

ph-xxxs
ph-xxs
ph-xs
ph-s
ph-n
ph-l
ph-xl
ph-xxl
ph-xxxl

Margin (m-)

m-xxxs
m-xxs
m-xs
m-s
m-n free
m-l free
m-xl
m-xxl
m-xxxl

Margin Top (mt-)

mt-xxxs
mt-xxs
mt-xs
mt-s
mt-n
mt-l
mt-xl
mt-xxl
mt-xxxl

Margin Bottom (mb-)

mb-xxxs
mb-xxs
mb-xs
mb-s
mb-n
mb-l
mb-xl
mb-xxl
mb-xxxl

Margin Left (ml-)

ml-xxxs
ml-xxs
ml-xs
ml-s
ml-n
ml-l
ml-xl
ml-xxl
ml-xxxl

Margin Right (mr-)

mr-xxxs
mr-xxs
mr-xs
mr-s
mr-n
mr-l
mr-xl
mr-xxl
mr-xxxl

Margin Vertical (mv-)

mv-xxxs
mv-xxs
mv-xs
mv-s
mv-n
mv-l
mv-xl
mv-xxl
mv-xxxl

Margin Horizontal (mh-)

mh-xxxs
mh-xxs
mh-xs
mh-s
mh-n
mh-l
mh-xl
mh-xxl
mh-xxxl

Example of spacing

Easily change your spacing to your needs

Easily change your spacing of modules, columns, rows and other elements in WordPress.
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

How does Isotoop work?

Isotoop consists of prefab simple shortcodes. Paste the shortcode in the existing class (style) field anywhere on your website. This applies to blocks, columns, rows, text and all other elements that have a so called class field in WordPress.

Where to apply style?

You can find the class field in most cases under the advanced tab in your editor, basically everywhere in WordPress.
This way the design is everywhere the same all over your website where you used the style. The bigger the website the more handy, fast and consequent it gets.

Easily add styles

In this example you will see how this works in the WordPress Gutenberg editor. It also works out of the box with the most common page builders like Elementor, Beaver builder, WP Bakery Builder.

Click to enlarge demo

Simple style names

All hundreds of styles have very simple names to make it easy for you to learn and remember. In practice you will use te same codes all the time. For example everything with text starts with t-...

Some examples

Styles text size:

t-xs | t-s | t-n | t-l | t-xl | t-xxl

Styles text color:

t-red03 | t-red07 | t-red13
t-blue03 | t-blue07 | t-blue13

Styles background color:

purple02 | purple06 | purple11
green03 | green07 | green13

Spacing for elements:

margin normal: m-n
margin top: m-t
margin right: m-r

Scroll to Top