WordPress Divi Footer From Search Engines Yoast

Working on new WordPress site using the Divi theme. I had found a video on creating a custom footer by creating a page and that page becomes an element you can save in your Divi library to be reused. I made a footer and added to each page.

The problem came when I was reviewing the analytics after a month. “Footer” was one of the pages listed by Google and indexed by Google.

I discover that I can disable search engines from tracking the Divi Elements / Pages. Go to that element / page. In my case it was the “Footer” element. This element is a page built with the Divi builder. This is what it looked like.

At the top of the page is my Yoast settings. There are 3 tabs on the left side. Click on the gear icon and you will see where to turn this off.

 

I hope this helps someone else out there….

 

 

Using Built-in Font Awesome Fonts In DIVI

Divi theme has some built in icons that you can call in a style sheet such as the following:

.someclass:before {
font-family: “ETmodules”;
content: “\6c”;
}

This will give me the icon of a pad and pencil.

I originally got this tip from Josh Hall on YouTube. Thanks for sharing Josh!

This issue I had was being able to figure out the code number for which Icon. The code numbers do not match Font Awesome font codes.

I finally found Elegant Themes cheat sheet for these icons.

The Elegant Icon Font – 360 Of The Best Free Icons For The Modern Web

I hope this helps someone else out there…

 

Elegant Themes DIVI – Custom 404 Page

I had a customer complain about not being able to reach the new site we just finished. They were getting a 404 page not found page. This is because Google has the old pages indexed.

First I added the website to Google Analytics and Webmaster Tools so I could get the ball rolling on getting the old URL’s removed from their index.

Second, I got working on creating a custom 404 page. The following article helped me understand how to do this in DIVI.

Build a custom 404 / page not found template

It took about 30 minutes start to finish to get this working.

I hope this helps someone else out there…

 

DIVI Blurb and Button Not Matching Width

Working with a blurb and button below it I was getting the mismatched width at full screen or over 1900 pixels.

The CSS for the button was:

.et_pb_button_alignment_center {
width: 92%;
background: #FFF;
margin: auto !important;
}

I needed to get rid of the margin:auto !important;

The width was set with this CSS.

.et_pb_button_alignment_center {
width: 95%;
background: #FFF;
}

The blurb container was set;

.et_pb_blurb.et_pb_text_align_left .et_pb_blurb_content .et_pb_blurb_container {
text-align: left;
width: 100%;
height: 300px;
background: #FFF;
margin: auto;
}

 

The blurb content was this:

.et_pb_blurb_content {
position: relative;
max-width: 550px;
margin: 0 auto;
text-align: center;
}

Part of the issue is I had the “Advanced tab” and “Main Element” set with a width, but the child-theme stylesheet had different width. I also had the “Additional CSS” in the theme customerize setting the blurb to another width.

DIVI has a lot of options and perhaps too many.  When your working with DIVI try to not set the styles in more than one place.

I hope this helps someone else out there…