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….

 

 

WordPress Akeeba – Ajax Loading Error

I was restoring a WordPress website using Akeeba kickstart in my WAMP environment. I got the following error.

I moved over to XXAMP I got site installed; however, my SendMail isn’t set up in XXAMP so I couldn’t test the forms. I wanted to restore the site in WAMP.

Ran the Akeeba Kickstart again and this time I choose to run the files restore “directly” and “ignore most errors”.

The website installed, but while working on the site I discovered a lot of odd things. None of my Widgets or Widget positions were available in the dashboard.

I ran the install again, but this time I did not check “Ignore most errors”. This is installed correctly this time.

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…

 

Best WordPress Backup Solution – Akeeba

I have used Akeeba for years for Joomla and made moving and backup up sites so easy. I started purchasing the Pro version so I could exclude various directories and back up to Amazon Web Services. With the use of a Cron Job my sites were taking care of themselves.

I was so glad to see Akeeba make their backup solution for WordPress. The best part was the way it ran the 3 SQL statements you need for updating the permalinks automatically. Although this was best solution I had used for backing up and moving a WordPress site it didn’t always work. Sometimes it would never finish running the SQL permalink updates and the site wouldn’t complete the move. In addition, the plugin would tell me I had an update available, but when I tried to automatically update it the site was breaking. I would end up with a blank white website.

Well this latest version of Akeeba Backup / Kickstart software is working really well. When ever I have moved a site the Permalinks update works well, and the latest version updates through the plugin manager without a hitch. I would highly recommend this software to anyone. The pro version is totally worth it.

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…

 

 

 

 

Theme cannot be used Gantry Hydrogen WordPress Site

I love blogging in WordPress, but often like Joomla to build sites. I have been playing around with Gantry’s Hydrogen template in Joomla and have been using it to build a new site for myself. My blog is in WordPress and would like the two site to look a like.  Gantry’s Hydrogen is totally free and works for both systems.

I installed it on my new test WordPress site that I had already installed Divi and got some administration error, so I uninstalled it and tried it on a  fresh copy and got the same “Theme cannot be used. For more information, please see the notice in administration.” I knew it wasn’t just Divi being installed on the other site.

If I would have read the install directions on the following page I would have installed the theme properly. Instead I watched the video on the page and it was installing in a Joomla site so I blew it off.  There was a button for “wordpress”.

http://docs.gantry.org/gantry5/basics/installation

  • First install the plugin from the WordPress dashboard plug-ins by searching for “Gantry”. I installed Gantry 5.
  • Then move the theme into the themes folder and activate it.

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…