Copying the post layout of "integrity business" (design cloud)

[Cedriclorenz]

Hi,

So I bought pro and learned about layouts. For now I want to create a new layout that is similar to the post layout of the site “integrity business” available in design cloud. I do this to be able to use it for other contents like portfolio items.

I can’t figure out how to achieve the “transparent” sidebar. In the layout builder, i set the background color to transparent but it went grey instead of having the “dotted pattern” that is on the rest of the bg.

Also, I want the Feature image to take the whole space of the column in width, exactly like in the blogposts of the demo site. Can you help me with the settings needed for that or provide a link where I can learn how to do it?

Thank you

[tristup]

Hi Cédric,

Thanks for reaching out.
Can you please specify the section of the demo site through the screenshot and share the specific page URL of your website to compare and suggest to you the way to achieve, if possible without any customization.

Thanks

[Cedriclorenz]

yes of course,

here is a screenshot of the layout I want to achieve:

as you see, the thumbnail is of the same width than the container that contains text.
The sidebar is transparent.

I added a specific page url that is using the template that i am creating in a secure note.

[tristup]

Hi Cédric,

Thanks for explaining it. It seems that the row background color is the reason behind your issue. I would suggest setting it to the transparent to make the sidebar background transparent.

Hope it helps.
Thanks

[Cedriclorenz]

wasn’t aware of that thank you,

Also, there’s the image I would like to have full width.
If you revisit the link you will see that I set the max width and the base width to 100%, then removed the padding.

Then the problem was, that the content had no padding either. I was not able to customize the dynamic content to add padding, so I created a second row for it and added the right padding here.

But that didn’t work because now the widget in the sidebar is pushed to the bottom.

Would love it if the fix was as easy as the previous one,
Thanks in advance!

[marc_a]

Hi Cédric,

There’s padding in your content that’s why the image is not full width. I suggest that you remove this padding.

Hope that helps.

Thank you.

[Cedriclorenz]

I’m not sure if I understand this correctly,

I cannot set a padding for “the content”. There is only the option to apply a preset.
I think the padding you pointed out is the one I set in the column which includes the children “feature image”, “Headline” and “The content”.

Don’t get me wrong, I do want to have padding for the content and the headline. Just the feature image needs to be without.

I did not find a way to remove the padding only for the image. Maybe I could set the opposite padding in the image but im not sure if that’s good practice.

Hope I could explain it more clearly,
Thank you for your time.

[ruenel]

Hello Cèdric,

You can add a bottom margin for your image element and then add a bottom margin for the headline element as well. If you don’t see some of the element style options like margin and padding, you need to turn on the Advanced Mode by going to the Settings > Preferences > Advanced Mode

If nothing is helping, provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​
To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[Cedriclorenz]

I don’t understand how adding bottom margin for the image element and the headline will make my image full width like here

compared to here:

i will provide the access if needed.

[friech]

Hi Cédric,

Right now your structure is not going to work. You need to have an Inner Row on that left column.

Please see this screenshot and notice the outline structure (https://prnt.sc/137mt4z)

If you’re not aware yet, there is a Row element that lets you build a nested row layout (http://prntscr.com/137my9i).

I did not add padding on the main column. I only add padding on that Column 2 title/content

The inner row will have 2 columns, 1 for feature image, and 1 for title and content. But do not set the inner row as 1/2 + 1/2 layout because that will make the column side by side. Set that inner row to a 1 column layout so it will stacked.

Hope that helps,
Cheers,

[Cedriclorenz]

Actually I was not aware, thank you for explaining and showing it.
I’ve got it now exactly as I want it.

[tristup]

Hi Cédric,

Glad that we are able to help you.

Thanks