Text Version of the Divi WordPress Tutorial


This tutorial will explain the function of the custom CSS options in the Divi Theme Options for the DIvi WordPress Theme.
Click on Theme Options in the Dashboard and it will bring you to the Divi Theme Builder.
Number1
Number2
Then scroll down until you see ‘Custom CSS’ with a big text field next to it.
(What the Custom CSS does, is it allows you to put custom styled sheets on elements that you normally couldn’t do with the Theme Options that are within the Divi Theme Builder).
Number4
The example shows you how to change the size of the logo using Custom CSS.
When using the Chrome Web Browser, you can right-click on the logo, hit select on ‘Inspect’ and it will pull up all the HTML and CSS coding for the particular element.
Number3
When looking at the HTML and CSS code for the element (in this case the logo), you’re going to want to find the ‘ID’ in the coding.
(The ID ‘logo’ means that this particular phrase or word associated with this element is only going to be used on the page once. So you can apply Custom Style Sheet (CSS) to the one specific element).
Here it says that the file is a 144pixels x 43pixels. The original is 300pixels x 90pixels, which is the size I want it to be back to.
Number5
Number6
In the Theme Options, in the ‘Custom CSS’ field, I entered:
#logo { max-height:100%;max-width:100%; }
(By entering in 100% for both the height and the width, it will automatically size the image to a hundred percent without interfering with the preset options of the Theme Builder.)
Number7
In the example below, you can see that the logo is a bit bigger than it was before we changed the Custom CSS. When using the max-height/max-width, instead of defining a specific size on the web page, the logo will automatically downsize when scrolling down the website.
Hit ‘Save Changes’ then go to your web page and hit the ‘Refresh’ button to that you can see the Custom CSS changes you made.
Number8

 

The tutorial and transcript were done by, Jimi Blevins, with Mozaic Technology
The transcript was edited by, Alexis Stucker, Interning with Mozaic Technology.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!