Best way to customize Wordpress Divi theme

[paulcj2]

I’m developing a wordpress site using the Divi theme. I have a header and slider on the home page. However, the call to action button (Search, or Busqueda in Spanish) falls below the fold in my laptop and most desktop screens I have seen it on. The URl is iedominicana.org Attached is a screen shot of how it looks on my laptop. I want to modify the css, so that the search button falls above the fold.

. I have Firebug ready to view the CSS, and a child theme ready for making the modifications.

My CSS skills are very basic. What is the most efficient way (step-by-step) to make these modifications?

[TechnoBear]

@paulcj2

I want to modify the css, so that the search button falls above the fold.

I presume you’re talking about the “button” marked either “Búsqueda” or “Learn More”? (I was initially confused by your question because I was looking at the search box, which is above the fold. )

Where exactly do you want to position it?

[molona]

Nothing to do with this… I have to say that your Spanish is really impresive… It does read a bit weird but I wish I could translate as well as you ( o whoever did this)

I would say that you may get this little piece of code

<a href="/accion_social/" class="et_pb_more_button">Learn More</a>

inside the empty P element right after

<div class="et_pb_slide_content"><p>&nbsp;</p>

Just remove the white space ( ) and put the link there. I think that should work

[paulcj2]

Yes, I am talking about that button. Basically, I want to reduce the height of three areas, which are marked in the attached image (see below), so that the button appears above the fold in a screen with a 1366 x 768 resolution. I am using the Wordpress plugin “Child Theme Configurtor 1.7.2.1” with the Divi theme. Here is the image:

[ronpat]

Sir,

If you knew that your web page should be about 768px high, why did you choose a theme with a desktop height of 1147px knowing that you don’t have the skills to change it after the fact? (or maybe you do and you’re just trying to sound modest ).

I do not do Wordpress, so the following observations/guidance may be entirely useless. Also, I can only offer you desktop guidance, not step by step “how it should have been done” and I did not attempt to consider the responsive media queries.

A quick look at the HTML validator shows 4 identical IDs. Duplicate IDs are not allowed so you need to make some change in your code to eliminate the duplicate IDs. Since these are the only validation errors in an otherwise squeaky clean page, they should be easy to spot. Hint follows:

There are also several appearances where <p>&bnsp;</p> is being used as a spacer. I think 4 are shown in the image above. The others can be found by searching for the code string. One should use margins as margins and not <p>&bnsp;</p>. Call it non-semantic poor form, if you will.

The following observations were made with JavaScript turned off.

IMPORTANT. Just noticed that the slider, via JavaScript, applies a min-height of 824px to the shaded box, which is taller than the 768px window height that you want to cater to, so it looks like that is going to be a JavaScript tweak somewhere that will have to be reduced considerably because that inline height property disappears when JavaScript is turned off which is why my CSS observations have some effect on the height of that container.

For what it’s worth… the excess height that you would like reduced is made up of padding.

From a CSS standpoint, the following settings are affecting vertical padding and can be reduced. As the designer, it is up to you to decide if and by how much you wish to override any of these values. Notice that I said override. One should never make changes to the original theme files. Changes, overrides, should be written in a local style sheet that comes after the theme stylesheets in the head of the page.

It looks to me like you need to reduce the height of your page by about 350-400px. The following accounts for 740px of padding. Obviously, you do not want to zero all of these out. It will look ugly. So, experiment, and see what looks good to you. Then tackle the heights in the smaller width media queries proportionally.

http://www.iedominicana.org/wp-content/themes/Divi/style.css?ver=4.1.1 (line 1335)
.et_pb_row {
    margin: 0 auto;
    padding: 30px 0 0;   /* ??? */
    position: relative;
    width: 1080px;
}

http://www.iedominicana.org/wp-content/themes/Divi/style.css?ver=4.1.1 (line 1151)
.et_pb_text {
    margin-bottom: 30px;  /* ??? */
    width: 100%;
}

http://www.iedominicana.org/wp-content/themes/Divi/style.css?ver=4.1.1 (line 1197)
.et_pb_slider_fullwidth_off .et_pb_slide_with_image .et_pb_slide_description {
    padding-bottom: 145px;   /* ??? */
    padding-right: 100px;
    padding-top: 145px;   /* ??? */
    width: 409px;
}

http://www.iedominicana.org/wp-content/themes/Divi/style.css?ver=4.1.1 (line 1171)
.et_pb_slide_description h2 {
    font-size: 46px;  /* big! maybe 2.5em instead? */
    font-weight: 300;
}

http://www.iedominicana.org/wp-content/themes/Divi/style.css?ver=4.1.1 (1140)
.et_pb_slide_description {
    animation-delay: 0.9s;
    animation-duration: 0.7s;
    animation-fill-mode: both;
    animation-name: fadeBottom;
    animation-timing-function: ease-in-out;
    padding: 210px 100px;   /* ??? */
}

[paulcj2]

Wow, Ronpat! Many thanks for all the effort you put into this response. I will digest it, and go to work. You raise good points at the beginning. This is definitely a learning experience for me.