How to ontrol the number of columns in a custom panel

  • 1
  • Question
  • Updated 6 years ago
  • Answered
How do I create a custom panel with 3 columns?
Photo of Zindibar

Zindibar

  • 3 Posts
  • 0 Reply Likes

Posted 6 years ago

  • 1
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hello Zindibar,

After adding a custom panel then drag one column divider widget into the content area.

Next drag a second divider widget and place this into the right hand column of the first.

Drag the middle divider of the first over to the left and by eye-balling you can approximate the movement that should show as 1/3 of the space in the left hand side. The second widget that you dragged into the first will automatically proportion so that you have three equal spaced columns (you may need to tweak it a little by dragging the fist middle divider right or left as required.
Photo of Zindibar

Zindibar

  • 3 Posts
  • 0 Reply Likes
Thank you for you speedy reply. I applied your suggestion, and I got the same result as my initial effort with nesting the column widget: I get an inequity in the size of the columns nested in the initial right-hand column. My left-hand column is larger, and any images I add to my 3 columns are not aligned; the images in my nested columns in the initial right-hand column are aligned but are a bit lower than the image in my original left hand column. Resizing the left hand column is not helping. What am I missing?

Appreciatively,
Z.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Hi Zindibar,

The lower appearance is seen in the site-builder. They align vertically in preview or live.

The left side column needs to be reduced by grabbing the middle bar of the first col div widget and dragging it over to the left somewhat.

There is a secondary issue with images that are not pre-sized in that you need to drag the red square to fit it into the space allowed and similarly for the other two columns. This is difficult I know from experience. The best way to deal with this is to pre-size the image to fit with an image manipulation program before uploading and not with the site-builder facility.

I have verified that the column movements work with a bad image that I have in my test site and I'll display it for what it's worth. I haven't adjusted the size optimally but it does show approx what it should.

Photo of Zindibar

Zindibar

  • 3 Posts
  • 0 Reply Likes
Thank you. Yes, it works as you describe. More tweaking than I'd hoped I'd encounter, but this is the hardest part of my design so expecting smooth sailing from here.

Z.
Photo of Gop

Gop

  • 7473 Posts
  • 2115 Reply Likes
Good luck Z.