Help & Tutorials - Site Builder Topics
Answers to questions about our Site Builder

How to put images side by side on my website

One of the common content updates users want to achieve is to add columns of images to their site or as some say add images side by side.

To do this you simply need to use container elements and then place your image inside column of container (as many columns as you want).

Here's how:
You need to select “Content” in the left corner of your option toolbar. Then click on “Layout Elements” which will display the different layout elements you can drag and drop to your page.

For example if you want to have a 2 images side by side, you would drag and drop the "2 Columns" container to your page as shown below:

how to add new text

Changing number of Columns:
Even if you place a 2 or 3 column container onto your page. You can stil click on the very corner of your container and have the option to update to higher or lower number of containers instantly. (for example you can put a 2 column onto your page and then change it to a 3 columns set-up as shown below)

how to add new text

You can then drag and drop an image from the Content > Images & Media panel to any of the containers.

how to add new text

Of course you don't have to just put images side by side. You can also place text or other widgets in one column and image on another.

Another option is to use Infobox container:
You can also use the Infobox container which will give you a default point to start from (in this case it will contain not only images but also placeholder content such as Title and description which you can customize or delete to fit your page requirements.

how to add new text

Drag and drop to an area of your page as shown above. You will then be presented with a default 3 column set of columns containing image, text and a button.

how to add new text

If you want select the InfoBox container to manage how many columns you want or customize the entire container design, move your mouse over towards top of the container and get a highlighted area as shown below and click to see the options:

how to add new text

how to add new text

 



<< Back to Topics for Adding and Editing Content