WordPress School: Call-to-Action Graphic Images

In this mini-series of lessons on creating images for your WordPress site, we’ve covered the basics, experimented with two ways of creating header art from scratch and with text overlaying a photograph, and learned how to put text on images for quotes and other purposes.

Today’s image lesson in this series is about creating a call-to-action graphic.

Call-to-action images are images typically wrapped with a link that behave much like buttons, taking the visitor to a destination on the site, or possibly off the site.

In this lesson, we are going to create an article series badge or graphic. It is a call-to-action to visually represent an article series, and the article series on your test site is a prefect example. The image may also represent a category of posts, and this is just two of the many graphic design elements possible using these basic image editing techniques.

I use category and article series badges in many of my posts. My fans love it as it instantly identifies the topic of the post visually. I don’t recommend it for others, but this is a teaching site and it works to create visual continuity.

Creating the Call-to-Action Graphic

Begin by drawing out the desired image on paper. Take into consideration the colors and branding images on your site as it helps to match the look and feel. You can be as creative or simple as you wish in the drawings. I usually scribble until something grabs my attention, then adjust during the image creation process.

What do you wish it to say? How will it motivate people to click and find more information? What fonts, colors, and images should you use to inspire that click?

There is much psychology that goes into creating a call-to-action, and we will cover that later, but for now, let’s stick with a simple article series image.

The imaginary article series I’m creating an article series badge for is called “How to Green and Grow,” a series about green living and planting for a green lifestyle.

I’m creating the image from scratch in Pixlr so I chose to Create a New Images or File > Add New. If you aren’t familiar with Pixlr yet, start at the beginning with this mini-series of image lessons for a quick tutorial.

I set the custom size for my article series badge to 300 pixel square.

I rearranged the screen in Pixlr to zoom in and fill as much of the frame as possible with the canvas to ease the working environment.

Choosing the Drawing Tool I set the options in the status bar to rounded corners and a green fill shape color. The border is set to 1 pixel and the color in the swatches was set to blue to give it a blue border.

I drew the box onto the canvas.

I tend to like an inner border around graphics like this, so I added a blue rounded square box within the green one and unchecked the fill shape color.

Now it is time to add the words. I added each line on its own layer, giving me the freedom to move them around independently.

I used a Stencil font and set the color to a deeper green.

I also added an orange ampersand in the same font. I could have used the word “and’ or a flower or graphic image, but I liked the look and feel of an ampersand there when I was experimenting with the drawing.

I’m not happy with the look through it is on the right track. The spacing and font for the ampersand isn’t right.

I changed the size and the font for emphasis.

It still isn’t right. Too crowded. I messed around with it trying different things and came up with this layout.

I wanted to add a flower to the image based on my original drawings, and now I had the space to do so.

To begin the process of adding the flower, I needed to add a new layer.

Go to Layer > New Layer.

Then I selected the brush option in Pixlr much like I did with the splatter effect in the header art.

I went through the More option to find nature artistic images and found flowers there. I added them to the options and experimented with the leaves and flowers.

The flower paintbrush stamp was a little more challenging. I experimented with many of the flower choices but none were just right until I decided to layer the flower effects.

I first choose brush #217 with a yellow color. It took some experimentation with the diameter to get it right.

Luckily, Pixlr’s excellent undo tool helped me test the different sizes and positions.

The resulting yellow flower was a great start. And I could have stopped here.

I wanted to tie in the orange color of the ampersand with the flower, so I added another paintbrush artistic stamp with a little burst of orange flower overlaid on the yellow. It took a lot of work to find the right size.

The orange flower burst in the middle was the perfect accent.

A quick inspection of the final image and it looks good.

Saving the file gave me the option to save as a JPEG or PNG file. I experimented with both and decided that since this wasn’t a photograph, and I would probably use it as a smaller dimension in WordPress, I went with PNG to keep the file size reduced.

The end result will look good in that article series and would work well as a call-to-action for the article series in the sidebar or on social media if I choose to use it.

Adding the Image to WordPress

Once the image is complete, upload it to WordPress.

Familiar with HTML?

If you know some basic HTML, you may choose to upload your call-to-action image through the Media Library.

Once uploaded, edit the image and copy the image file location (URL).

Create an IMG HTML Tag with a link to the image file location.

Wrap a link around the image to the first post in the article series.

Then follow the rest of the instructions in the article for pasting the image into each article in the series and testing the link.

You may upload the image through a post or through the Media Library. For those new to WordPress and web publishing, I recommend you begin by uploading the image to a post. Any blank post will do, or a draft you are currently working on. I will often keep a test draft post on client sites for them to experiment. As long as it isn’t published, you can play to your heart’s content.

1. Click Add Media in the post.
2. Upload the image and fill in the attachment details.
   • Set the Link To to the destination of your choice. In this example, it would be the URL to the first post in your article series.
   • Set the Size to full if the image is 300 pixels or less. If not, then set the image to the desired size of medium or thumbnail.
   • Set the Alignment to right.
   • Insert the image
3. Switch to the Text Editor.
   • If you set the Link To address, a link is wrapped around the image. However, WordPress does not add the link “title” attribute, so please edit the link HTML tag to include the title.
   • If you did not add a link wrapped around the image through the Attachment Details, add it now. Select the image HTML tag completely and click the Link button and add the link to the first post in the article series. Remember to add the title and do not click “force link to open in a new window or tab.”

In the Text Editor, copy the link and the image HTML tag it is wrapped around. Take care to include all the HTML elements.

Edit the first post in your article series.

Switch to the Text Editor and move your cursor to the top sentence of the post, just before the first letter of the first word. Paste the image there.

Update the post and Right Click the View Post link to open the front end view of the post in a new tab. Go look. See the new graphic?

Click the graphic. If the link is right, it will simply reload the post.

Edit the second and subsequent posts in your article series and repeat this process. On the next posts in the series, when you click on the link, it should take you to the first article in the series.

Now all of your article series posts are linked together visually, like a little self-advertisement promoting your article series.

There are so many ways to use such techniques to promote specific articles, websites, categories, tags, your contact or about web pages…it’s up to you to experiment and find all the ways to play with this.

Assignment

It’s your turn to play.

Following the instructions above, create a small graphic image to represent your test site article series.

The image should be a maximum of 300 pixels wide, slightly smaller could be better depending upon the image you choose and how you use it. Square or as close to square as possible is a desired goal, but not an absolute. Whatever works for your site needs.

Remember, a call-to-action image like this is designed to serve the reader, not necessarily you as the site owner. It should compel them to click.

Share the results. Please find this assignment post on our WordPress School Google+ Community and describe your experience and post a link to the post, or comment below with a properly formed HTML links so other participants can see what fun you are up to in this course.

Image Lessons Article Series

Image Lessons is a mini-series within Lorelle’s WordPress School to teach you the very basics of how to create and modify images for your WordPress site.

• WordPress School: Image Lessons – Introduction
• WordPress School: Header Art Images
• WordPress School: Text on Images
• WordPress School: Call-to-Action Graphic Images
• WordPress School: Screen Capture Images

---

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---