[Resolved] Display custom post fullwidth in Divi

[Author]

Posts

[sarahK-2]

I have the new betas of types and views on a dev site to test out the new relationships (with Divi theme).

When I was still using layouts, I had no trouble having my custom post types display fullwidth. Now, as much as I try, I can't seem to figure this out. I am designing the template-for-posttype in Divi. Getting rid of sidebars is no problem, but having fullwidth images and rows/content span the whole page is beyond me. Looking at Divi's help, it seems pretty clear how to make a regular post fullwidth, but that option does not seem to be available for custom posts. Let me know if you have any help for me on this.

Thanks in advance 🙂

[Luo Yang]

Dear Sarah,

The Views content template only works in the content area, so you will need to setup the content area as a full-width cell, see our document:
https://toolset.com/documentation/recommended-themes/toolset-divi-integration/create-templates-for-custom-post-types-with-divi-builder-and-toolset/#controlling-divi-settings-for-each-content-template
section "Controlling Divi settings for each content template":

If the Sidebar is to be disabled, then we also need to select Fullwidth in the Layout Settings section
...
Once we save the Content Template, the posts that use it (in our example: Tours) will all be displayed without the sidebar:

[sarahK-2]

Thank you for your quick reply! The tutorial you linked to appears to show how to remove the sidebar. I am not having trouble with removing the sidebar. My problem is that the single custom post type templates are not truly fullwidth (in other words, the full width sliders and images are not showing as fullwidth, although they are on other pages).

Do you have any ideas about the rows, images, and sliders being able to be truly full width on asingle custom post type content template?

Thanks again 🙂

[Luo Yang]

I just test it in my localhost, the full-width content template works same in the single post of custom post type as the wordpress page.

How do you setup the"single custom post type templates"?
How do you setup the the full width sliders and images?
Can you provide detail steps?
I need a duplicate same problem and debug it in my localhost, thanks

[sarahK-2]

Thanks Luo, I'm glad you were able to make it work. That gives me hope!

First, I set up the Post Type and also create a Field Group for that post type. I don't see anything in this part of the process about fullwidth settings. I enter in some data (create some actual posts) so that I will have something to test.

Then, I create the Content Template. I have done this both from Dashboard by selecting "Create Content Template" and also from the post itself by selecting "Edit Content Template".

Once I am in the Content Template creation page, I scroll down to the bottom and select Layout: Fullwidth. As far as I can tell, this only gets rid of the sidebars (at least for me) but does not allow the fullwidth modules/features of Divi to work. I have tried setting "Boxed Layout" to both "disable" and "use theme settings" (my theme setting already has boxed layout disabled) with the same result. I also disable the post title, but I don't think that would be relevant.

Then, I select "Edit With Divi Builder". Once I am in the Divi Builder, the first thing I do is create a Fullwidth Section, and put a Fullwidth Image Module inside of it. I use an image that does great being fullwidth on my pages.

Then I create a Standard Section. I set the row to "Enable Fullwidth" (which works fine in pages) and start adding the fields I want. Once I have everything I need put in, I return to the content template editor. I verify that my selections down at the bottom are still the same. I check the results by viewing a single post. It still does not work. The post displays the picture and fields that I have put in, and it has removed the sidebar. But, the fullwidth picture does not go all the way across the screen, and the fullwidth row is not truly fullwidth.

I hope that you can see what I am missing!

[Luo Yang]

Please follow our document to provide a copy of your website, you can put it in your own google drive disk, and share the link in below private detail box, I need to duplicate the same problem and debug it in my localhost.
https://toolset.com/faq/provide-supporters-copy-site/

[Luo Yang]

OK, I have enabled the private detail box again, please provide the credentials of your website, thanks

[Luo Yang]

Thanks for the details, I am checking it in your website, will feedback if there is anything found

[Luo Yang]

Here is what I found, it seems to be a CSS problem, you can fix it with custom CSS codes, for example, in your website:
Dashboard-> Appearance-> Customize-> Additional CSS
Add below CSS codes:

body.single-judge div.container{
	padding-top: 0px !important;
	width: 100%;
	max-width: 100%;
}
body.single-judge div.entry-content{
	padding-top: 0px;
}

And test again, it will change the HTML div.container to be a full width cell, so your content template will display as a full-width DIV tag

[sarahK-2]

Thank you, Luo!