hyperlink - internet concept -  isolated text in vintage wood letterpress type, stained by color inks

hyperlink – internet concept – isolated text in vintage wood letterpress type, stained by color inks

To create a button on Divi theme navigation you have to write a custom css and add on your WordPress site that’s easy.

First of all login your WordPress account

Now create a new menu in Divi theme in Appearance > Menus Section

For this site I have added an affiliate link “GET DIVI THEME” but you can create any custom link and save the Menu item

Get divi theme button

Get divi theme button

Now visit your site’s front page and right click on your mouse choose “Inspect Element

Now put your cursor on the target menu link and carefully notice the link id that resides in <li>….</li> tag for example, <li id=”menu-item-4126″

Inspect element

Inspect element

Now this “menu-item-4126” is the unique id for my targeted link and I can write a custom CSS for button assigning this id

The custom CSS I used looks following

#menu-item-4126 a {
-moz-osx-font-smoothing: grayscale;
background: #00a79d none repeat scroll 0 0;
border: 2px solid;
border-radius: 4px;
color: #ffffff !important;
cursor: pointer;
line-height: 1.7em;
margin: 4px auto;
padding: 0 8px !important;
transition: all 0.2s ease 0s;
}
#menu-item-4126 a:hover{
background-color:#007D73;
}

If you want you can generate a CTA button online or use any other snippet to create attractive buttons that can generate clicks.

After that add the CSS code using a third party Custom CSS plugin to your website

Opening the button link with new window

You can open the button link with new window by using a plugin called “Open external links in a new window

After installing and activating the plugin navigate to Settings > External Links

Now in the first form type your custom affiliate link structure suppose for this site I use

http://www.divithemedemo.com/go/

Open external link with new window

Open external link with new window

So all the links that contain the above link structure will be forced to open with new browser window and without assigning any target=”_blank” parameter.

When you are done simply click Save Changes and check your link whether it opens with new window

Enjoy!

Pin It on Pinterest

Share This