Vertical section between two other sections

Ask the community
1

Hi all,

I couldn’t find anything online on this

specific point. Please redirect me if someone has asked it already, but here it goes.

I want to add a vertical section between two other horizontal sections. Something that looks like the following:

2161×3840 116 KB

Now, when I start with a new page and add a vertical section the editor only lets me do this:

3840×2160 93.9 KB

As you can see, the vertical section pushes the header. I want to have the vertical section at least below the header just like this (but ideally as shown in the first image above):

3840×2160 95.7 KB

Can anyone help me with this please? I am getting really frustrated with something that should be so easy to make and the editor doesn’t seem to allow me.

2

I would do the following:

Heade r
Section (Grid with 2 columns, 3 rows)
Add a container to occupy row 1-2, column 1-3
(First full-width Main Section row)
Add a container to occupy row 2-3, column 1-2
( Vertical section of the 2-Column row)
Add a container to occupy row 2-3, column 2-3
( Main Section of the 2-Column row)
Adding a container to occupy row 3-4, columns 1-3
(Second full-width Main Section row)
Footer

I do not put the header into a grid in the section. Editor X allows you to place them at the top/bottom as needed with the desired position.

I recommend employing independent, grids, layouts, stacks and or groups within the containers themselves for better layout management.

I hope this helps.

Thanks, Teejay

3

Thanks for the reply Teejay,

I know I can do any layout with grids, but the drawback is that it’s difficult to make any of that dynamic. To explain, if I ever decide to collapse the vertical section, the section next to it would stay in the same place if I used the grid system. My use case requires the main section to expand to take on the full screen when the vertical section collapses.

I don’t know if that’s possible with grids which is why my first thought was sections. Any thoughts on how to achieve this?

4

You will have to play around with collapse elements within a grid. I will play around with this later on an see if I can demonstrate, but it is possible.

5

Even if it’s possible to make it work with grids which atm I don’t know if it is, it’s gonna be extremely unpleasant and more like a workaround with a lot of fidgeting code rather than an actual solution. This should be a straightforward thing to do

6

Yes you can do this. After adding the vertical section, click and drag the top of the vertical section down to where it is aligned with the bottom of the header. And click the bottom of the vertical section and drag it up above the footer. I have done this in the past and just tried it again to make sure I was remembering correctly. You can also collapse and expand the vertical section and the main section beside it does expand to take up the screen as you described.

7

Thanks for your reply, but this does not work. When you drag the vertical section up or down it just keeps jumping back to where it was and it does not adjust. :frowning:

I wish that was the simply solution

8

@movementgio I quickly made this test page using the method I described. Is that like what you are wanting?