Creating a region in between two regions

CM1 Ideas and Feature Requests
1

In the Layout tab, when you have two regions one above the other it is very hard to add another region in between these two. There’s ways to override the theme CSS or create a region below and drag it up so it snaps between the two, but this makes template building harder than it should be.

Adding some margins between regions in the layout tab might help solve this issue so there’s some room to insert regions in between.

2

I’d like to better understand what you mean by “very hard”. When dragging and dropping a region, there are different highlights depending on the position of your mouse pointer that have different results when you drop. Here’s the highlight that will insert:

I agree that you need to be fairly precise to get this highlight to appear - is that what you mean?

3

As a side note: Some CSS properties have a negative effect on the Layout Editor and the behavior our regions. For example, if your CSS file declares all divs to have no margins or no paddings, it may effect the way regions behave in the Layout Editor. (or if the region you are working with has a width or a height property set to small values, it may be tough to drag and drop new regions…

Also, if you have any JS files attached to the template, I would recommend you to click on the Disable Javascript button before working on regions.

4

Touching upon what Kemal said, you can target elements in Layout Edit mode by creating CSS specifically for those elements. Each Region in Layout mode has a title attribute on it so you can target those items explicitly by creating a class for them. Below is an example targeting all regions in Layout:

 .perc-region[title] { 
background-color: #F3F3FF; 
border-style: dotted; 
padding: 15px; 
 }
5

It is not recommended to override the css of the layout guides as they are shared by all out of box templates.

Also, adding a gap between two regions may not give the user a good idea how the end result will look like because of all padding around the regions.

But as Jay pointed out - you can easily get a region between two regions by simply dropping the region on common edge of two regions. Please check the image posted by Jay in his comment.

6

I think part of the issue identified here is that it can be difficult in certain situations when editing because the CSS might affect the positioning of items in Layout mode. If that happens, it can make it difficult to insert widgets and regions.

7

Jay, the process you described works great for most regions. I was talking about a situation where the site specific CSS sometimes interferes with expected out of box functionality. In this case in particular, the “overflow” was set to “auto” which made made it impossible to add another region below that region. The workaround I had to resort to was to change the overflow to hidden after which the process you described worked alright.

This made me think of a better ways of allowing this. Since we add margins between widgets within a region, I thought this might be useful for regions as well.