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:

Create Your Divi Child Theme

Create Your Divi Child Theme

by | Sep 20, 2018 | 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.

 

Pin It on Pinterest