2 Columns w/Text Across Both

[co50]

Two questions -

1. Is it possible to have a 2-column section, each with a background image, with centered headline text that spans across both columns?

2. Are there any examples of the templates you get with Max?

[tristup]

Hi @co50,

Thanks for reaching out.
It is not very clear what exactly you are trying to acheive here. But you can use the Grid element for overlapping designs. Please find the following article.

Grid | Themeco Docs

Hope it helps.
Thanks

[co50]

I’m not sure how I could have explained this any better.

Picture a row of two columns. Now picture text that starts on the left column and flows to the right column. Now picture this text centered. Not looking for grid functionality.

Also, you missed my second question.

[tristup]

Hi @co50,

I am sorry that I missed the second question due to another question in the list you got a delayed answer. Unfortunately, we don’t have any such template in Max right now.
But I would suggest you follow the below steps and check if that works for you or not.

1. Add a background image to the Section.
2. Add two Rows inside the Section
3. Add one Column to the First Row
4. And add the Headline to it
5. Add two Columns to the Second Row.

Hope it helps.
Thanks

[co50]

You’re not getting it. I’ve attach a mockup I just made that hopefully illustrates what I’m asking about. If you’re still unsure could you ask another support rep to take this ticket over?

Also, Max is advertised as including templates for Pro and you’re telling me this is a lie and there are no actual templates??

[marc_a]

Hey @co50,

To achieve a two-column layout with text across both, we need to use the DIV element to achieve it. The setup is something like this one:

The DIV element should have these settings:

• z-index should be set to -1so that the text element will be visible
• The first div with red background color is set to position absolute and left is 0, while the second div with blue color is also to position absolute but this time the value of right is 0.
• width is set to 100%
• height is set to 100%
• max-height, in my example I set it to 250px but this will depend on your layout

The Text element, the width should be set to 100% then just adjust the padding to match the height of your div.

And this is the final result.

Hope that helps.