Atoms and Modules: An introduction

By Anne White

Atoms and modules are the building blocks of your site when you use our WP plugin, PageBox. Atoms offer a huge scope of customisation options, however, individually they only make up a small section of a site. Modules can be created from multiple atoms in order to save their structure, content and settings. This means that they can then be easily duplicated anywhere across the site.

What are PageBox atoms?:

Although we focus mainly on modules, which are collections of atoms, more advanced users can also add individual atoms to almost every page and post type in WordPress for even greater customisation. Atoms can display almost anything on your page, such as headings, text, and images, and all have different features. The benefits of atoms are that they offer a huge amount of customisation options for very specific sections of your site, and that they can be quickly and easily moved around your site into any layout you desire.

For most clients, using locked down modules made up of atoms is the best way to easily manage a site on a day-to-day basis, but individual atoms are easily managed, and can enable clients to really start customising and creating brand new layouts as they get more confident with the system.

What are PageBox Modules?:

Most users will work with pre-set modules which allow you to quickly and easily build a comprehensive page. Each module is made up a group of atoms in a row that have been joined together to make a cohesive section. Creating a module out of a group of atoms allows you to save the layout of the atoms and any edits that have been made to them. This means that you will be able to very quickly replicate these atoms in any other part of your site, as many times as you desire. Edits to the content and appearance of these already created atoms can then be made, rather than having to start the whole section of atoms from scratch.

Using pre-set modules will ensure that users who may not be as confident with customising atoms, or users who want to streamline the page building experience, can still create beautiful pages, without having to customise individual atoms. They can also make keeping a uniform style across pages simple, as the layout of atoms can be quickly duplicated anywhere on a site.

Visualising Atoms and Modules:

Atoms are single content features with multiple customisation options, that create one piece of content for your page.

Here is an example of a single atom:

This is how it will appear on the page:

Modules are a group of these atoms that are joined together to create a cohesive whole, saving their layout and content.

Here is an example of a module:

This is how it will appear on the page:

As you can see a module is a group of multiple different atoms joined together, allowing them to be quickly and easily added to a page.

Constructing pages with atoms and modules:

Atoms and modules are designed to be as flexible as possible; but that’s almost useless if the layout of the page is restricted. That’s why we created Dynamic Templates. Native WordPress comes with static page templates which restrict the layout of the page, however, the Dynamic Template system allows users of PageBox to create any number of columns – up to 12 – add as many rows as they like, control the width of each column, as well as various other controls such as background colours, full-width bleed control and much more. 

You can find out more about Dynamic Templates by reading our ‘Introduction to Dynamic Templates’ article.