Divi Golden Button

Tutorial

This tutorial will show you how to create a Golden Button for your Divi Theme WordPress website. The Divi theme 2020 don’t have the features to create an gradient with more than 2 stop color. With this tutorial you will learn how to apply a CSS gradient with more than 2 stop color. With this technique you will not only create golden color background but you can create all other metallic gradient you want

This is how to create a Divi Golden Button. The button color will be created with a CSS color background. To make the Golden color unique I will grab the hex colors from an image.

1. Search for an image with golden item on the internet and then download en import the image in your design program.

2. Use your eyedropper tool to grab the colors of the gold area in your image. We need to pick 5 colors stops for our golden color gradient. Pick the color from the dark part to the light part of the gold image with your i dropper.

3. Use your Gradient tool to make a gradient of 9 stops colors.
If you are satisfy you can use the hex # colors of the gradient.

4. Go to CSSMatic.com and click on the CSS generator button.
Make 9 stops with the same hex colors you use in your design program.

5. When you done, just copy all the code that the website have generate.

6. Go to your Divi website and make a button. If you already have a button just hover over the button and click on gear icon to go into the button module settings.

7. Click on the Advanced tab and then chose Custom CSS.
Paste generate code in the “Main Element” filling box.

8. Just Press the green check on the buttom of the button settings to save the changes.

9. Congratulation! Your Golden button is done.

#DiviTheme #GoldenButton #DiviTutorial #WordPress 

Divi Golden Button Tutorial

by 4GArt Team

Before your start with your CSS gradient button, you must watch this tutorial. This is about how to create a golden graphic.

The reason why I recommend you to watch this, is because it will give you a understanding how the gradient works. It’s also give you a idea how it will look before you aply your gradient. When you are done, just copy the hex color and use them in  your CSS code.

I will put tutorial about how to apply CSS in your Divi Theme.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *