Make a custom Image Widget with this step-by-step tutorial.
Widgets on WordPress.com are handy features: they display important information and visually enhance our sidebars and footers. For those of you who want to personalize your site a bit more, consider creating a custom Image Widget, which you can use to:
- promote a book, project, or event
- call attention to specific links, like your social channels
- shape your visual identity
Here, we’ll show you how to design your own image, which you can insert into an Image Widget.
Or, you can mix images and graphics with text to create even more personalized Image Widgets, like these clickable images promoting Phoebe and Matt’s social channels at travel blog Little Grey Box:
You don’t need to be a Photoshop whiz to achieve certain editing effects. All you need is this tutorial, a photo editor like PicMonkey, and a willingness to experiment. I encourage you to follow the steps below with your own image.
So, let’s say I want to create an Image Widget for my “Essays on Nature” category of posts, which I’ll display prominently in my sidebar. Here’s what we need to do:
Select an image for the Image Widget
Find an image that will act as the background for your widget. Your sidebar and footer are fairly narrow spaces, so choose an image that displays well at a smaller size. Stay away from pictures with lots of detail, or wide-angle landscapes that won’t look as clear in thumbnail size. Close-up shots, abstract images, and patterns work great. If you don’t have an image that works, browse a site where you can download free images.
Drop the image into PicMonkey
Drop your image into PicMonkey. On the homepage, click “Edit a photo,” and then “Open new” to locate the image you’d like to work with. After you select your image, you should see an interface like this:
Use tools and filters to achieve an overall effect
The Exposure tool: I primarily use the Brighten and Contrast options. More than 5 to 10 points in either direction can really change the quality and feel of your image, so tweak with care.
The primary features I use in PicMonkey’s toolbox are Crop, Exposure, and Sharpen in the Basic Edits panel. Crop this image first, before you do anything else. If you’d like to stack numerous thin widgets atop each other, as shown on LifeAbsorbed or Little Grey Box, crop the image to the desired size. Make sure there’s enough space for text, and a large-enough, readable font.
Next, I’d like to place a soft filter over my image. One of the handiest areas of PicMonkey is the Effects panel — click on the magic wand on the left:
The panel changes, and you’ll see a new list of options for filters. Click on different ones to see the effects applied on your image, and click Cancel if you’re not happy with the effect. You have the option to set the intensity of each effect, too.
To get a vintage look, Tranquil and Rapture might work for you. Or, scroll down and click on Yester-color, which combines a 1970s film filter and rounded edges.
The Sharpen tool: This is usually a final image editing step, just before moving on to the text layer. While each image is different, I tend to stay between 5 and 10 for Sharpness and 5 and 20 for Clarity.
Once you’re done experimenting, head back to the Basic Edits panel to the Sharpen tool and increase the Sharpness and Clarity a bit. This makes your image crisper, which is helpful if it’s displayed at a small size.
Add a layer of text
Click on the Tt icon to view font options. This is where you can have some fun — as font can be playful, or sophisticated — and set the mood for your site. Be mindful of the font you choose, making sure that it complements the fonts already on your site. (If you don’t know what fonts your theme uses, use a browser extension like WhatFont to identify them.)
Frame the image with a border
This step is optional, but an Image Widget with a border can look sleek, especially if you create multiple Image Widgets with the same frame. The frames offer a visually cohesive look — and if the border is the same color as an accent in your theme’s color palette, even better.
Click on the Frames icon to see border options, from thin black lines to faux-film edges. You can also apply shape cutouts and create widgets that are circular, heart-shaped, and more.
Save your image and insert it into an Image Widget
Once you’re happy with your image, upload it into your site’s Media Library (My Site(s) → Media → Add). Now, to add your new Image Widget, go to your Customizer (My Site(s) → Customize → Widgets), click on the site section where you’d like to add the widget, click “Add a Widget,” and search for and select “Image.”
Not all of the widget fields are mandatory — for instance, you don’t have to display a widget title or fill in the fields in the “Edit Image” view. Some people forego a widget title for a cleaner look.
Add the image you just created to this new widget. Under “Link to,” insert the link that you’d like readers to be directed to when they click on this image on your site. For our example in this tutorial, I’ll add the link to the category page I’d like to promote — my essays on nature.
You can also adjust the size of the image by clicking Edit Image and selecting one of the options in the Size dropdown menu, or setting a custom size.
Admire your new widget!
Once you’ve published your new Image Widget, go to your site and click on the image to ensure it goes to the page you’ve specified. After that, you’re all set. Happy image making!