WordPress PageBox

An introduction to PageBox Dynamic Templates

38 views November 21, 2018 November 21, 2018 Leandi Kolver 1

Creating a page template is imperative as part of building a functioning page that displays your products, services or insights in the way they deserve. PageBox has been created to use its very own page template builder which has been developed with 100% control and flexibility in mind. No more rigid templates – our Dynamic Templates gives users complete control of page layouts.

Bootstrap 4 (12 cols) dynamic templates

Bootstrap 4 (12 cols) dynamic templates work by creating a responsive grid onto which you can add atoms and modules, before applying your content. This is done by splitting the page or post into responsive rows and columns – with up to 12 columns per row – that you can add, delete, or move around the page. These automatically flex to accommodate the screen that your site is being displayed on therefore removing the need for multiple versions of a single site.

In order to use a dynamic template, you must first create a page or post. Once you have created a new page, you will have the option to decide between either a dynamic Bootstrap 4 (12 cols) template, or a full width static template. In order to use the dynamic template, simply click on it.

This will create a row for you.

You can then add rows and columns in a design that best suits you and begin to add content to your page.

Adding a new row

The benefit of a dynamic template is that it allows you to create flexible rows and columns with which you can build your page. You can add as many rows as you would like to a page and can customise them in a number of different ways. In order to add a new row, simply hover over the grey button at the bottom of the previous row and click on “Add empty row”. This will create a new row onto which you can add columns and atoms.

You can add rows from anywhere on the page. You can also move already existing rows up or down the page without having to delete and re-add the row, or having to move individual atoms, by clicking on the up or down arrow in the top-right corner of the row. This allows you even greater control over the structure of your page, and makes building the perfect page quicker and easier.

here is also the option to collapse rows by pressing the “Toggle row collapse” button in the top left corner of the row. This will streamline the backend of the page, without affecting the frontend, allowing you to more easily navigate around the backend of your page.

In order to delete a row, click on the “x” cross button in the top-right corner of the row.

This will delete the row and any atoms that it currently contains.

Adding and controlling columns

Columns are an intuitive feature of our dynamic template. You can create up to 12 within a row, allowing you to build atoms in a number of different configurations. They also change to accommodate different screens, meaning that your content remains dynamic no matter how many columns you include. In order to add a column to the row, hover over the dot icon on either the right or left-hand side of the row. Then click on the “+” plus icon that appears.

You can add multiple columns, up to 12, in this way from any point in the row.

Once you have added a column, you can change the size of any of the columns by hovering over the grey button between them, then holding and dragging the “Hold and resize” button that appears.

Other columns in the row may also be resized in order to accommodate the changing size of the column. The columns do not need to all be equally sized. The fraction of the row that the column is taking up will be displayed at the top of the column, for example, in the screenshot above, each column is taking up ½ of the row.

Atoms within a column will adhere to that column’s position, rather than taking up the whole row.

In order to delete a column, simply press the cross button in the top right corner of the column box, next to the “Edit column settings” button.

You can delete a column from anywhere within a row at any time. Deleting columns will also delete any atoms they contain and will cause other columns in the row to automatically resize in order to fill the remaining space.

Further row and column controls

Once you have added rows and columns, you can begin to customise and control them to an even greater extent. This includes adding background colours, or even images, to rows which sit behind the atoms and act as a background for your content. You can also control the way that your rows and columns are displayed on the site by adding custom classes directly to the rows and columns themselves, as well as to the atoms within them.

Within these row settings, you can also control whether the background or content of the row is “full bleed” or not. The background and content width options allow background images and colours, as well as written and visual content from atoms, to expand across the entire browser screen. These controls are available in each row setting and can be switched on or off with one click. Fundamentally, the bootstrap grid layout is retained and therefore remains responsive.

For a more detailed explanation of exactly how you can customise and control Pagebox rows and columns, see our “Creating and managing rows, columns, and atoms with PageBox for WordPress” user guide.

Examples

When using a dynamic template, you can arrange your page using rows and columns. The use of these rows and columns allows a flexible desktop website that can be easily designed and rearranged, and will automatically adjust to accommodate different screen sizes and resolutions in order to optimise the same site for different screens.

On a desktop screen, the images will be displayed exactly as they are entered on the template:

When the size of the screen changes, the template will flex to accommodate the differing size of the screen and the images will automatically be repositioned and resized in order to optimise the site for mobile viewing.

Despite using the same template, the two views look very different. The images have been moved and resized so that they display one below the other and are therefore much clearer and easier to see. This is an example of how a single dynamic template can optimise your site for both desktop and mobile screens.

 

Tags:

Was this helpful?