WordPress PageBox

Controlling row and column settings in WordPress PageBox

3 views November 30, 2018 Leandi Kolver 0

With our WP plugin, PageBox, you have the ability to create beautifully responsive and easily customisable posts and pages using our Bootstrap dynamic template. Using the Bootstrap dynamic template, you can create rows and columns that will flex to accommodate a number of different view ports and screen sizes, from desktop to mobile, to create mobile-first sites that display beautifully on any screen. For more information on building responsive rows and columns with our dynamic template, see the “An introduction to dynamic templates” guide.

What are row and columns settings?

One of the unique features of our PageBox dynamic template, is that once you have added rows and columns, you can further customise and control them through row and column settings. These allow a number of different controls over the elements of your page, including the ability to add responsive background colours or images. You can further manipulate these backgrounds with the option to switch between either full-width backgrounds, or backgrounds that are restricted to the margins of the page template. The ability to manipulate backgrounds, allows you to create eye-catching designs and is an easy way to create stunning headers and banners.

Add in the ability to truly customise your rows, as well as individual columns, with custom classes that allow you to create almost any effect, and row and column setting control becomes a vital component in creating unique and attractive pages. Therefore, it is important to understand how to control elements of your rows and columns within their settings.

Row settings

In order to change the settings of a row, click on the “Edit row settings” button in the top right corner of the row.

There are a number of different settings that can be adjusted within the settings window.

Background and content width

Within settings, you will have the option to set the background and content width of the row. This is a handy feature of our responsive template that allows background colours or images, as well as content within the row, to be full-bleed across the width of the page, rather than being restricted to the margins of the template. Full-width background images and colours can help you create an eye-catching designs that fill the entire width of the viewport or screen, and is an easy way to create stunning headers and banners. Full-bleed rows and content will still be part of our bootstrap grid and will therefore remain fully responsive.

First, you will need to set the background width of the row to either “fixed-width container” or “fluid-width (100% wide)”. This will affect the row itself, and any background image or colour applied, but will not affect the content within the row.

If fixed-width container is applied, the row will stay within the margins of the template, meaning that the background will end at the width of the row, rather than filling the width of the page. If this width is chosen, any content within the row will also be restricted to the margins of the template.

If fluid-width (100% wide) is applied, the background will be full-width and will cover 100% of the width of the page.

If fixed-width container is applied to the background width of the row, you will not have the option to choose the width of the content within it, as it will automatically adhere to the width of the template. If fluid-width (100%) is applied to the background width of the row, you will be given the option to choose the background width of the content within the row.

If fixed-width container is applied to the content width of the row, the atoms within the row will stay within the margins of the template, and will not reach to the edge of the page.

If fluid-width (100% wide) Is applied, the atoms will cover 100% of the width of the page, rather than staying within the margins of the template.

Background colours and images

Once you have decided the background and content width of the row, a background colour or image can be added. The main benefit of being able to add images or colours within the row settings, is that you can create colourful designs that content can sit on top of, rather than having to stand as its own element on the page. Being able to add elements behind content, without sacrificing the flexibility of the template, allows more complex pages to be created. In order to add a background colour to the row, click on the box beside the background colour field. This will bring up a number of different colour options that you can pick from.

Alternatively, you can enter the name (e.g. red), or the code (e.g. #FF0000) of the colour in order to apply it.

In order to add an image as the background of the row, you can do so by clicking on the add image icon in the background image field.

This will allow you to add an image either from your “Media Library” or by uploading an image file. In order to upload an image file, either drag and drop the file into the “Upload files” box, or click on “Select Files” and choose a file from there. This will add a file to the “Media Library”.

From the “Media Library” you can simply click on the file that you wish to use.

Once you have selected your image you can enter your own caption and description for the image on the right-hand side. Then click the “Insert” button in order to add the image to the page.

Once you have added the image in the image field, it can be changed by clicking on the edit button in the image field. This will reopen the “Media Library”.

In order to delete the background image from the row, click on the “Click to remove” button in the image field. This will remove the image.

If both a background colour and an image are added to the row, only the image will be displayed.

Custom classes

More advanced users can also add custom Cascading Style Sheets (CSS) classes like paddings or margins to the row. These can change the way the row is displayed on the page. For more information on custom classes, which classes can be added to rows, and how and why you might use them, see our handy Custom Classes user guide.

Once you have finished editing the row, simply click on the cross icon in the top right corner to exit out of the “Edit row settings” window. Any changes you have made will be automatically saved.

Column settings

Individual columns can also be customised through column settings. Click on the “Edit column settings” button in the top right corner of the column in order to edit its settings.

Background colours

Unlike rows, a background image cannot be added to columns, however, you can add an individual background colour to each column. This allows for even greater customisation of the page, meaning that multiple colours can be added behind your content.

In order to do so, click on the box beside the background colour field. This will bring up a number of different colour options that you can pick from.

Alternatively, you can enter the name (e.g. red), or the code (e.g. #FF0000) of the colour in order to apply it.

Custom classes

Just like rows, more advanced users can also add custom Cascading Style Sheets (CSS) classes like paddings or margins to columns. These can change the way that individual columns are displayed on the page. For more information on custom classes, which classes can be added to columns, and how and why you might use them, see our Custom Classes user guide.

Once you have finished editing the column, simply click on the cross icon in the top right corner to exit out of the “Edit column settings” window. Any changes you have made will be automatically saved.

As you can see, it is a simple process to make significant changes to the look and functionality of rows and columns using row and column setting controls. These allow a large amount of flexibility and control even for less advanced users.

Was this helpful?