I am trying to recreate the effect of the 3 boxes shown in the attached screenshots.
I have tried various methods using Pro, but have been unable to achieve anything remotely similar.
Any help or suggestions on how to achieve this would be greatly appreciated.
Site and info attached in Secure Note
Hi There,
Thank you for writing in, first please add a section to your page with a 1/3 + 1/3 + 1/3 columns layout, then inspect each of these columns.
Enable the Advance background option and you’ll get an upper and lower background settings. Set the lower background to be an image and the upper background as the color overlay. Also, add 2em padding on all sides of these columns, so the element won’t be in the edges of the column.
Then start adding a headline, text, and button element, do the same on the other columns.
You can then save this layout as a content template so you can use it on other parts of your pages.
Hope it helps,
Cheers!
Thank you so much for your prompt reply!
It looks (and is) so simple now that you have explained it.
I hadn’t enabled the advanced option (that made all the difference).
Last question…
How do I get this to raise when it is moused over (like in the second screenshot above)?
Thx again
Hi There,
That is not a feature offered by the columns, but it is possible with a custom CSS.
Please inspect the Section where your 1/3 columns are placed.
Then under the section’s Customize tab, paste the custom CSS below on the Element CSS area
$el .x-column {transition: margin-top 1s ease;}
$el .x-column:hover {margin-top: -20px;}
Hope it helps,
Cheers!
@friech You are awesome !!
Exactly what I was looking for.
Wish I could hire you on the side to help me with all my silly questions … (hint, hint) 
Thx for your help.
Saved me a lot of time and effort.
Thanks, but no thanks, we are delighted to assist you from here 
Have a nice weekend.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.