Instead of having a single column with text, you may sometimes want to make your page more organized and visually appealing by placing content in multiple columns on your page. With the Multiple columns plugin, you can easily add columns to your page. This allows you to, for example, neatly place a text block and an image side by side.
Adding the multiple columns plugin
- Click on the structure at the top right.
- Click on the plus icon in the content block where you want to add the columns, scroll down, and select "Multiple columns" from the list.
- A screen will open where you can configure the columns. Images will show how the columns will appear on the website.
If your desired option is not listed, choose "Advanced." Here, you can manually enter the number of columns and their width.
If you have already chosen an option in the layout, it will be displayed. If no option is selected here, it will look to the Advanced settings.
Filling the multiple columns
- To add content to the columns, go back to the structure and expand the multiple columns to make the columns visible.
- Next to the column (Column 50%), click on the plus icon and choose the desired plugin from the list, for example, Text.
- Do the same for the second column, choosing another text, image, or file.
Satisfied with your page with multiple columns? Click on "Publish Changes," and the columns are now visible to your website visitors.
If you're not entirely satisfied with the number of columns, column width, or the content within them, you can easily make adjustments.
Adjusting column width
To adjust the column width, click on the pencil icon next to the column, and then adjust the column width (e.g., from 50% to 75%). Do the same for the other column (from 50% to 25%). Ensure that the columns always add up to 100% so that they will always be side by side.
Changing the number of columns
You can change the number of columns, for example, from 2 columns to 3 or 4 columns. Click on the plus icon next to Multiple columns, add the column, and set the column width.
Add content to your new column as described in the previous steps, ensuring that all columns together add up to 100%. You may need to adjust the widths of the existing columns to accommodate the new ones.
Swapping column positions
If you are not satisfied with the position of the content in the columns, you can easily swap them by placing your mouse on the column and dragging it to the desired location.