How to create website content in columns
Content in columns
There may be times when you want to place content in more than one column across the page. For example, you may want to:
- Create a grid of photos.
- Feature two or three services you offer.
- Highlight a series of statistics.
- Position icons and text in a horizontal row.
- Arrange profile pictures of members of your staff team.
There is a built-in styling option call panels that will allow you to do this. Panels will allow you to neatly arrange content in columns while ensuring that your content adapts automatically to smaller screen sizes where just one column is more suitable. This requires you to be comfortable editing basic HTML.
Understanding panels and columns
Panels are chunks of content that can be displayed across columns where space allows. All panels will be displayed on all screen sizes but the rules you set when you create your panels will determine how many columns appear on different screen sizes.
How to add panels to your web page
To create a column layout using panels, follow these steps:
- Edit the page onto which you want to add panels.
- Toggle the text editor into HTML mode.
- Find the place where you want to add your panels in your content.
- Copy and paste the following example code:
<div class="panels col-2-3 float"> <div class="panel"> <h3>Title</h3> <p>Description</p> </div> <div class="panel"> <h3>Title</h3> <p>Description</p> </div> <div class="panel"> <h3>Title</h3> <p>Description</p> </div> <div>
Adding images inside panels
The example code above contains a title and description as placeholder content. You can place other content inside panels, once they are created, using the Rich text editor mode. If you want to add an image to a panel:
- Place your cursor in the position where you want to add your image.
- Click the Add image icon on the text editor toolbar and choose your image.
Your image's width will be constrained by the width of the panel and the aspect ratio will be preserved. If you are adding multiple images to panels alongside one another you will need to size all your images to the same aspect ratio before you upload them.
Changing the number of panels
You can add as many panels as you want. To add or remove panels it's best to toggle the text editor to HTML mode and locate the code that defines your panels. Select an individual panel and either delete it or copy and paste it if you want to make a new one. The code for an individual panel looks like this:
<div class="panel"> <p>Your content here</p> </div>
There is no drag and drop interface for reordering panels. If you need to reorder your panels you will need to toggle the text editor into HTML mode and locate the code that defines your panels. You can cut individual panels and paste them in a new location within the overall panel structure to re-order them.
Changing the number of columns
To change the number of columns across which your panels are displayed, you need to adjust the classes in the very first <div> tag in your panels code. This will contain a class in the format col-2-3 like this:
<div class="panels col-2-3 float">
The number of columns that your panels code will display depends on the width of the screen they are viewed on. On smaller devices, such as mobiles, it's often more suitable to present panels in a smaller number of columns.
The first number in this class denotes the minimum number of columns that will be displayed (i.e. on the smallest screen sizes). The second number denotes the maximum (i.e. on larger screen sizes). If only one number is specified then there is no difference between different screen sizes.
The following classes for columns are supported: