Atoms and Modules: Creating your own modules

By Anne White

For clients, we always construct and lock down modules to ensure that the page building experience is quick and seamless. However, as users become more confident with the site, they may want to start making changes to pre-set modules, or even create their own modules out of different combinations of atoms.

To create a module, you will first have to add atoms to your rows. You can find out more about adding rows and atoms by reading our “Creating and managing rows, columns, and atoms with PageBox for WordPress” guide.

Once you have added atoms to a row, you can then create a module. First ensure that you are happy with the content, appearance, and layout of the atoms, and that you would like this to be replicated elsewhere on your site. These atoms should all be contained within the same row as atoms in separate rows cannot be combined into a module. However, any columns that you have created in the row will be included in the module layout.

When you are happy with the layout of the row, click on the “Create module from this row” button in the top right of the row, beside the “Edit row settings” button.

This will bring up the “Create new module” window. This will show you a preview of how your module will look, where you can ensure that the layout of the atoms is correct. Beneath the preview is a title field where you can add the title of your new module. This is a required field and therefore must be filled in. You can also add a tag to the module, although this is not required. The title and tag will allow you to search for, and find, your module at a later date.

Click on the “Create” button in order to save your module and exit the screen. If you no longer want to create a module from these atoms, click on the “x” cross button in the top right corner to close the window without saving any of the changes you have made.

Once you have saved your module, the atoms used will be displayed as a module on the page, and the module template will be saved in the module library.

Adding a module from the library:

Once you have saved a module to the module library, you will be able to add it to any row in your site. In order to do this, hover over the grey button at the bottom of the row, as if you are going to add a new row. An option to “Add pre-set module” will appear.

Clicking on this button will bring up the module library. Modules are displayed here in alphabetical order. You can scroll through these until you find the module you would like to add. Alternatively, there is a search filter bar in the top right of the window that will allow you to search for a module by its name.

Once you have found the module, simply click on it in order to add it to the page.

Editing a module:

Once you have added a module to a page, you will be able to edit it. You can edit individual atoms to make changes to the module, however you cannot delete any atoms, or add any new atoms to the row.

Any changes you make to the module once it is on the page will not affect the saved module in the module library. For example, if you edit the colour of the text in the module that is on the page, the text colour of the saved module in the module library will not be changed.


Changing a module’s position on the page:

Once you have placed a module on the page, you will not be able to move individual atoms to or from the module without unlinking it first. However, you can change the position of the entire module using the “Move up” and “Move down” arrows in the top-right corner of the row.

Simply clicking on one of these arrows will move the entire module one position up or down on the page. This gives you the flexibility to move modules anywhere on the page, without having to delete and re-add the module, or having to unlink it and move the atoms individually.

Unlinking a module:

If you do want to delete or add any new atoms, you can unlink the module, turning it back into separate atoms, by clicking on the “Unlink from module (use as row)” button in the top right-hand corner of the row. This will turn the module back into a row with separate atoms that you can then move around, delete, or add to the row.

You can save any of the changes you have made, without affecting the original module in the module library, by creating a new module, with a different name, from the edited atoms. The module must first be unlinked in order to do this.

Deleting a module:

Once you have unlinked a module, you can delete atoms, columns, and rows, just as you normally. Alternatively, you can delete the entire module simply by clicking on the “Delete” row button in the top-right corner of the row, without having to unlink it first.

This will remove the entire module and row from your site.