Pst! I believe in transparency, so I wanted to let you know I use affiliate links to recommend products I love and use (or have used) in my own business. Links inside this post are affiliate links which help support this site at no extra cost to you.



I love Click To Tweet. It’s a great plugin that allows you to embed simple tweets into your blog posts. All people have to do is click and then tweet and they share your content.

The problem I have with Click To Tweet is that it’s really ugly, and the designer in me can’t stand it. Below you can see what I mean.

I love me some Click To Tweet, but this isn't exactly pretty. Click To Tweet

See? It’s just…not good.

I personally prefer one that’s a little more on brand, like the one I designed here:

Learn how to make a custom Click To Tweet on your Divi website. #WebDesign
Share on Twitter

Now, for some people the default may be on brand, and if that’s you, then cool. Leave it alone.

But if you want your Click To Tweets to be on brand, keep reading.

Step 1: Install this code in your Divi Theme Options

This code is what controls the border, the border colour, and the font size. Copy and paste this into your Divi Theme Options.

/*Custom Click To Tweet*/
blockquote.tweet, blockquote.tweet{
border-style: double;
border-top: double;
border-bottom: double;
border-right: double;
border-left: double;
border-color: #e99382;
background: #fff;
padding: 30px;
font-size: 30px;
}

 

Step 2: Copy this code and save it to your Evernote

This code is what you insert into the post where you want your Click To Tweet to show up. Make sure you embed it using the text editor on your WordPress post, not the Visual Editor. (When you’re writing a blog post, click “Text” in the upper right corner of your editor.)

<blockquote class=”tweet”>
<p style=”text-align: center;”><em>These are the only activities to focus on to reach 7 figures. #SuccessTips
<a href=”REPLACE THIS WITH YOUR TWEET CODE” target=”_new”><img src=”REPLACE WITH YOUR CUSTOM SHARE IMAGE URL” alt=”Share on Twitter” width=”263″ height=”42″ /></a></em></p>
</blockquote>

 

Step 3: Generate your tweet code here

Because of the way tweets are encoded you can’t just insert some text where it says “replace this with your tweet code” and hope it works because it won’t. It will show up like a jumbled mess.

Use a Twitter Intent Generator and you can generate the Tweet Code.

I prefer this Twitter Intent Generator since it works simply and every single time. http://tech.cymi.org/tweet-intents

Create a custom Click To Tweet on your Divi Website

Do you see at the bottom where it says “URL:” and has the long URL? That’s what you copy and paste into your custom Click To Tweet Code where it says “REPLACE THIS WITH YOUR TWEET CODE”

And voila! You’re all set to have beautiful custom Click To Tweets inside your blog posts.

Did you find this helpful? I’d love to see where you’re using it. Leave me a comment with your blog address below.