How do I create a 3 column layout in a section with images that are the same size

I am attempting to create a 3 column section with the images being the same size how do I go about this in Pro

Hi George,

You need to add a new section and select the Three Column layout from the initial template:

Then you can use the Image element to add the images you want for each column.

You need to use a photo editing tool such as Photoshop or Gimp to make sure that the images have the same height.

Finally, you can position the images inside columns using the Flex-Layout feature of the columns. For more information:

Thank you.

Thanks for the info I have the images I just don’t see the options for flexbox

nevermind I see it

I have box correct how do You center button under images

Hello George,

Please click the column and in the column settings, there is a text alignment option.

This will align all the elements inside the column to the center.

Hope this helps.

Yes that helps make sense now

It does not center when I select those options

I would like the buttons center on this in the services page but it is not doing what I want

here is the page https://staging.codemunkee.com/

never mind I figured it out was not selected in each element

what I am trying to accomplish is a 3 column layout with buttons centered underneath the images I have 1st one alighned bt the other 2 will not align

Hello George,

I have checked your site and I found out that you have enabled the Flexbox option in the column settings. Please align it to the center both horizontal and vertical.
CimkQAuXRP6cFqpOm_Inpw

Please check out Flexbox in the documentation to learn more:

Hope this helps.

The question I have I guess is this do I make a 3 column section then each column use flex centering each. What the end result that I am after is a 3 column 9 product section with Button Links to each not sure what I am doing incorrect or if I am setting it up incorrectly

Hello George,

Yes, you will need to create 3 columns and then in each of the column settings, you will have to align it to the center vertically and horizontally. Now, if you want to display up to 9 columns, you will have to create 9 columns as well.

Tip: Please set up the first column first. Insert all the needed elements and align it in the column settings. After that, you can always copy the whole column and paste it to the next column. You can even duplicate the column. All of the elements, element styling, and column settings will be copied in the next column which you can then edit the elements like changing the text and images

You can right-click on the column to copy and paste.

fZH2gj_fS0K_1wXN4vxNIA

B8YGFHRDS3C30FVlrXDxcQ

Hope this helps.

That clears up a whole lot of questions. I will try that Thanks

The other question is what do I set the layout that have the rows just one or 3

Hello George,

Even if you insert a section and one row element only, you can still insert 9 columns that would display 3 columns which will then make up the 3x3 columns.

Column Layout in the row settings:
xCP6kcUgR-aNQ-ERuEaaqA

Added 9 columns:

To learn more about the Row element, please check this out:

Hope this helps.

I got it figured out thanks for the help you guys always have the best support

You’re welcome :slight_smile: