The Issue

With Elegant Themes’ Divi theme, one can set up the appearance of pages, posts and index pages mostly with the Divi Theme Customizer.  It takes a little CSS to make the Posts look like the Pages.  Here, I will explain how to set up the general appearance of pages, then how to get posts,search pages and the 404 error page to look the same way.

General Background

The example I am using has a gradient graphic as the main part of the background.  With this kind of a background the height of the graphic is limited, so there also needs to be a background color that matches the last row of color in the graphic.  That way,  the gradient of color,  from the top to the bottom of the graphic continues downward on the page as a fixed color.  Here’s how to set that up:

• First,  determine the color of the last row in your gradient graphic and copy the hex code for it.  I use Photoshop for this.
• Go to Divi > Theme Customizer > General Settings > Background
• Set the background color to the hex code you just copied to your clipboard.
• Set the background image to your gradient graphic.

In theory,  your page should now have the desired background appearance.

Content Background

If you haven’t set the background of your content,  it will either have a default color or be transparent.  If it’s transparent, the background gradient will show through and it’s likely your text will be difficult to read.  I set this up when I create my first page.  Then I save the page layout to be used for the other pages.  In my case,  I set up my page with a 2/3 – 1/3 layout with the content on the left and the sidebar on the right.  Here’s how I did that and made the background white.

Create the new page using Divi Builder.  In my case,   the page layout looks like this:

It’s the home page for the site. It has some text followed by a blog module that displays some of the most recent blog posts.  The sidebar has an image at the top generated by the “Hot Random Image” plugin.  Below the image is is an index of the post categories.

I want all of this to have a white background.  The Section (blue bar) needs to have a transparent background so that the General Background, as discussed above, shows through.  The text, blog and sidebar are all in one row, so I just set the row background to white (#ffffff) at Row Module Settings > Advanced Design Settings  > Background Color.

Footer and Bottom Bar

At this point everything should look ok,  unless the footer and background bars don’t have the proper color.  You can set them to any color you want,  but I wanted them to match the general background color discussed above.  That is done in the theme customizer.

Go to Divi Theme Customizer > Footer > Layout and set the background color to the color of the last row in the gradient background.    As of Divi 3.0.27 and WordPress 4.7,  I couldn’t find a way to make the color transparent.  This could be an issue if your gradient graphic is particularly long or your page content is particularly short, but it worked out ok in my case.

Do the same thing at Customizer > Footer > Bottom Bar, or, better yet, set the color to transparent because that is allowed here.  In some cases you may have a default background that comes through if you set the color to transparent.  If that’s the case, set the color as for the footer background.

Now,  if the footer colors still aren’t right,  you may have set a background on the Section of a particular page.  To fix that,  open the page for editing,  open the settings for the section and be sure there is no background image and “Transparent Background Color” is set to “Yes.”

At this point I have my page set up the way I want.  So I saved the layout to the Divi library for future use.

Blog Post Backgrounds

One would think that this background set up would also display the same way for blog posts, but, no.  I asked the tech support people at Elegant Themes about this and they gave me some CSS to use:

These blocks remove the default background, so the the background as set up above shows through. Problem is,  the background shows through my content area so the text is unreadable.  To set the background color to white for those areas,  I added the following CSS provided by Elegant Themes tech support:

The first block adds white background to the content area of single posts and archive pages (the list of pages that comes up when one clicks a category link).  I’m not exactly sure what the second block is supposed to do as I seemed to get the same result with or without it.

Other Page Backgrounds

There are other types of pages that also need proper backgrounds.  WordPress presents a search page  with the results of a search and a 404 error page if a bad URL is used.  Unfortunately all the work done above doesn’t show up on these pages.  This requires some modification to the CSS so that the same styles apply to these other pages.  Here is what I ended up with, note the addition of .search and .error404 to the CSS:

With that CSS everything looks perfect.