Add More Social Icons To DIVI

Add More Social Icons To DIVI

by | Oct 22, 2019 | Tips

If you are using Divi you will have noticed that not all social prayers appear, if you want to include more than those that appear you will have to make some changes in the configuration. We are add more social icons to Divi.

Add More Social Icons To DIVI step 1

Add Mode Social Icons

The first thing we are going to do is go to our child theme and create, if it does not exist, a folder called “includes”.

Next we will go to our Divi, and we will go to the “Divi/includes” folder, there we will find a file called social_icons.php, copy that file and paste it into the “includes” folder that we just created in our child theme.

Remember that we are doing all this because if we modify that asset directly in Divi, the next update will erase our changes.

Now we are going to open the file social_icons.php and we will see this code.

At the end of this file, just behind , we will put the following code.

Por ejemplo, en este caso estamos añadiendo Linkedin

Now you simply have to do the same with all the social networks you want to add. You will have to repeat the same code per side social network, and for all the corresponding icons, copy the following code in the style.css file of your child theme.

How To Make Divi Load Faster

How To Make Divi Load Faster

by | Oct 14, 2019 | Tips

The first thing we are going to say is that we choose Divi because it is very fast loading, as one of its characteristics, but it may be the case that for some reason it slows down, it may be due to our hosting or other circumstances.

Speed is not all or finish all SEO and checking all the boxes on the speed pages, pingdom or gtmetrix does not guarantee a fast site or boost it in the eyes of Google.

We will see a series of tips that will serve you to make your website load faster in a simple way. Only by implementing any of these steps the error may already be corrected.

You can test the performance of your site and record the exact loading times of the page using one of the free speed test resources.

There are several online tools to test the loading speed of your website. Each of the tools provides a score so you can see the speed improvement progress of your efforts. They also provide information and information on what the problems are and how to solve them.

  • Pingdom
  • GT Metrix

Choose The Fastest Hosting

Use accommodation with a plan that meets your needs. There are several types of hosting. Some are better for speed than others. Change to faster SSD based hosting if you have not already done so. This is quite key, since WordPress is extremely database intensive.

There are several types of hosting:

  • Virtual Private Server (VPS): provides server resources dedicated only to your website and will not be shared with any other site. You have a server your own server.
  • Shared: Your website shares server resources, such as space and bandwidth with other server websites. If, for example, another website receives a lot of traffic, those resources are not available for your website.

The hosting servers that we use and recommend the most are:

 

Image Size

One of the causes that make our website load slow down, is the size of the images. .Png images are usually the most used since they have more quality than .jpeg, but they are heavier.

To solve this problem we have several solutions. The first would be to adjust the size of the images to our needs, for example, for a person module, we do not need to use an image of a size too large, with a width of 400px we would have left over, and thus we save on loading time, if We use an image with a width of 1080px, it will penalize the load.

Another solution is to reduce the weight of our images, for that we have tools such as TinyPng, one of the most used. You just have to upload your image, since it is an online tool, and they will be in charge of reducing its weight automatically.

Too Much Plugins

The most common mistake we make is having too many plugins, many times, we have several plugins that do the same, or something similar, or that we forgot to deactivate. Many plugins have several functions that cover our needs, and it helps us to have a plugin that makes us the function of three.

The excess of plugins is one of the main causes that cause the loading times of our website to be affected, but we do not take it into account. It has a deep cleaning and removes those plugins that you don’t really need.

Clear the cache

WordPress caching plugins will speed up your website by storing static HTML files on your website to load when your users request a page from your website. Without caching, your website will take time to process WordPress PHP files and access your database to generate HTML pages for your users.

There are several caching options on the market: WP Super Cache, which worked well with Divi but not as well as W3 Total Cache. Both are free.

Use a CDN (Content Delivery Network)

A CDN service places copies of your website on many servers around the world so that they are physically closer to their users when they access your website. This reduces the amount of time it takes for files to arrive from the server to your browser.

Many hosts, such as Siteground, have an easy activation in their cPanel, so it is very easy to activate your website in a CDN. But not all hosting have this option, so we will have to resort to external CDN services.

The most used worldwide are:

Don’t Forget Update

It may seem silly, but never forget to update, both Divi, as WordPress as the plugins you have installed. From time to time updates are released, not only to increase the features, but also to optimize both themes and plugins.

References:

diviengine.com
divi.space
dreamtimeimages.com

Create Your Divi Child Theme

Create Your Divi Child Theme

by | Sep 20, 2019 | Instrucctions, Tips

We’re going to show you how create your Divi child theme. A child theme is an extension of the parent theme, in this case Divi. In this way we can customize our theme without losing the changes after an update of the parent theme. We can change everything.

WordPress executes the child theme files first, if you’ve customized your header, footer, sidebar, etc., those files execute instead of the parent theme. A Divi child theme requires the parent Divi theme in order to operate correctly.

First, obviously you need the item Divi.

Files You Need to Create a Divi Child Theme

Create a new folder on your desktop and give it the name of your child theme.
For your child theme you will need 3 files:

  • functions.php
  • style.css
  • screenshot.png (880px by 600px saved in PNG format)

We will explain the archives.

1.- This style.css serves two main purposes: it holds the information about your child theme such as name, author, description, version number, and more. The second purpose is to hold the CSS styles used to customize the look and feel of your website.

The first thing we are going to do is create the file with the name “style.css” and you can copy the next code inside.

/*——————————————————-
Theme Name: Divi Cake Child Theme
Theme URI: https://duritzhtcdesigns.com/
Description: A child theme template for Divi
Author: Divi Cake
Author URI: https://duritzhtcdesigns.com/
Template: Divi
Version: 1.0.0
—————– ADDITIONAL CSS HERE ——————*/

2.- Create a file with the name functions.php and then add the following code into the file.

<?php

function divi__child_theme_enqueue_styles() {
#wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
add_action( ‘wp_enqueue_scripts’, ‘divi__child_theme_enqueue_styles’ );

//you can add custom functions below this line:

3.- The screenshot.png is the image that will display in your themes directory. WordPress recommends a PNG file sized at 880 by 600 pixels. The design is up to you. Elegant Themes uses a solid background with the Divi theme’s logo, while the standard WordPress themes use a screenshot of the layout.

Upload the zipped file

Now what we are going to do is choose the folder of your child theme and compress it in a .ZIP file.

If you already have the Divi theme installed, skip this step. If you do not have it installed, navigate to Appearance > Themes > Add New.

Click “Upload theme“
Find your child theme .zip, and click on the “Install now” button.
Divi Animated Buttons

Divi Animated Buttons

by | Sep 26, 2018 | Instrucctions

In this post we will see another way to use the Divi buttons, in this case also with links, to give them a different style with amazing animations.

You do not have to have a high level of knowledge of css or Divi to be able to apply these effects, just follow the instructions below.

Button Effect – 1

Read More

To start, visit pages inside of your WordPress dashboard and select add new. Once the page screen has loaded, Select the big button that says Use the Divi builder. Once the Divi builder has loaded, select your column layout and add a new text module inside your preferred column, as pictured below.

Next, open the text module and inside whatever, for example “Read More”. Highlight the text that you have just written with your cursor and then select the ‘link‘ option above. Insert your desired link address into the pop-up box or alternatively just enter ‘#‘ for now.

What we’re going to do now is give that link a class name. The class name will correspond with the Divi Button CSS we will be posting below and therefore turn your link into a button that changes colour and grows.

Once you have followed those steps you should see the same HTML structure that is pictured below.

The first thing we will see is the btn class, which will be the same for the first three examples:

You can put your CSS code in Theme Options menu. Theme Options > General > Custom CSS and “Save Changes”.

The CSS Code:

Button Effect – 2

Read More

For button 2 we will do exactly the same as we did in button 1, we will follow the same steps.

In this case, for button 2 we will use the following code:

Button Effect – 3

 

Read More

For button 3 we will do exactly the same as we did in button 1, we will follow the same steps.

In this case, for button 3 we will use the following code:

Button Effect – 4

 

READ MORE

For our next button, we are going to use a button module, in this case the only thing we have to do is put the button title in “Button Text”.

Let’s now give it the style through CSS, for that, first what we’re going to do is give the CSS class a name. In the Button Module, go to Advanced tab and put you CSS name in “CSS Class”.

Now comes the magic of CSS:

 

Pin It on Pinterest