Trying to replicate Design Cloud layout "The Team"

Can someone, please, for the love of Raptor Jesus PLEASE tell me how the offset layout of Headlines and Buttons are achieved in the layout found here:

http://demo.theme.co/designcloud/content/studio-gold/

I want to use this but modify some of the spacings etc but for the life of me I cannot find what I suspect are additional bits of CSS/flexbox stuff that is powering this layout.

Are there additional hidden CSS/parameters to Design Cloud layouts? If so, why would you do this?

PLEASE HELP!

Hi Space Agent,

The headline offset is using negative bottom margin.

The offsetting columns uses custom CSS stored in the Element CSS of the row. To adjust the spacing, you can change the margin-top values in there.

The button offset is actually because of the column padding and the image is the column’s background that is why the button is overlaying the image.

The Headline also overlays the image but it cuts the image or does not show the image because of its solid background.

If you make the headline’s background transparent, it will look like this.

A custom CSS also helps position it.

To your question:

Some templates do include custom CSS to achieve a particular design. You will want to add or use custom CSS if the element options are not enough. Creating your own requires knowledge of CSS though so it’s best to learn it if you want to extend the layout possibilities. You can start learning from sites like https://www.w3schools.com/.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.