Saturday, November 17, 2018

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…

 

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…

 

 

 

 

DIVI Customize Tag Landing Page

Divi’s portfolio modules and projects component make adding the project / portfolio a breeze. I found a short code from Surbma that allowed me to quickly add the project tags to the page. The issue I had is when the user clicked on the tag the projects were displaying as single-column blog style and I wanted the columned style the module displayed.

The page got me in the right direction.

How to Give Your Divi Archive Pages a Masonry Layout

This was so close to what I wanted.

The boxes were not totally lined up so I ended up implementing “Flex” in the CSS to make the boxes fit a little better. I used the following article to guide me.

Don’t Overthink It (Flexbox) Grids

The next issue was being able to build this page like the other pages I had built in the Divi builder. I needed to add back the Yoast Breadcrumbs and this article helped.

How To Add Breadcrumbs To Your WordPress Website

I was hoping to build “child-theme” sub-page and I had trouble coming up with the right Taxonomy.  What I needed was “taxonomy-project-tag.php” or  “taxonomy-project-tag-tag label.php”

” .The following page helped me determine the right taxonomy for page of linked projects by tags.

Taxonomy Templates

 

I hope this helps someone else out there…

 

 

 

DIVI drop down vertical submenu

Working on a new WordPress site I really wanted to go deep with DIVI. I got stuck on an issue with the dropdown submenu items. They were horizontal instead of a standard one below the other.

The issue was quickly solved when I created a new menu and made that one the primary.

I hope this helps someone else out there…

 

Divi – Turn Off Lazy Load On Images

Started a new project with Divi and needed lazy load to not happen on the home page. Looking around I found the following page which got me started.

Divi Lazy Loading Images

What I needed to do is go to “wp-content\themes\Divi\includes\builder\scripts\frontend-builder-scripts.js”. On line 3375 I needed to change “Offeset: ‘75%'” to “offset: ‘400%'”.

I hope this helps someone else out there…