Perennial Favorites : Widgets 201
In the first post of this series,
“Widgets 101,” we
introduced some popular widgets, including the Text and Image Widgets,
and also mentioned quick ways to transform an image by changing its
shape or adding a frame. Since this month is all about photography and
phoneography, let’s focus on Image Widgets and explore how to customize
them.
If you’re short on time and want to skip ahead:
Image widget essentials
First, let’s make sure we’ve got the basics down. To activate an
Image Widget in your sidebar, go to
Appearance » Widgets in
your dashboard and locate the widget that says “Image” under Available
Widgets. Then, drag it to the right, where you’d like it to appear.
Be
sure to fill in the required fields for this widget — the “Image URL”
is important, as WordPress.com needs to know where your image is saved
so it can display your image. In other words, you need to
grab the image’s URL, which you can do by going into your Media Library (
Media » Library), clicking the “Edit” link under the image, and copying the link under “File URL.”
This URL is what you’ll insert in the “Image URL” field, shown in the screenshot on the left.
You can also use an image URL on another website — be sure to check
the URL in your browser before adding it to the widget to confirm it
ends with an extension specific to an image file (such as .jpg, .gif,
.png).
Also, do take advantage of the “Link URL” field at the bottom. If you
want an image in your sidebar to direct readers somewhere on your site
(or elsewhere), specify the link here.
Custom-made image widgets
Connor at
adventures of a wanna-be writer created
Image Widgets for his sidebar, each labeled with text and linked to
specific categories on his blog. We like how the black-and-white images
(and the font of the image text and captions) work together as a
cohesive visual set, and how the objects in the images evoke the
literary life.
You can create similar images, too. If you have a working knowledge
of Photoshop, whipping up sidebar images is probably a snap. If you
don’t have Photoshop, or are a design and photo editing newbie, use one
of the free (and very handy) online photo editors out there (like
PicMonkey,
Pixlr, or
FotoFlexer) to transform your images with text, textures and effects, overlays and icons, frames, and more.
Let’s say I want to create an Image Widget for my sidebar that, when
clicked, directs my readers to a page on my blog of galleries of ocean
photographs. I can do this easily by adding effects to one of my own
images.
So, here’s what I’ve done: I grabbed
this Instagram image of
the Pacific Ocean from my feed; dropped it into PicMonkey; and used its
various effects to insert text, add texture, and crop and frame it —
all in less than a minute. Here’s the result:
Next, I’ll
add this image
to my Media Library, copy the “File URL” as described in the section
above, and insert this URL into the field in the widget. I’ll control
the size by inputting the dimensions (in pixels) for the “Width” and
“Height.” And voilà — I’ve created a custom-made Image Widget, which I
can link to a gallery page on my site.
The process is pretty simple — all you need are some images to
experiment with and an online photo editor. Custom-made Image Widgets
help to shape your site’s overall aesthetic, as Connor’s widgets
illustrate above, and contribute to the visual branding your blog, which
we’ll talk about next.
Visual identity: branding your blog
Not too long ago, Pick talked about
branding your blog: creating an overall mood and ensuring your site visually represents you and your interests. We like the look of Zoe’s blog,
Miss Zoe: The Art of Creating, because she creates a visual identity using color, font, and pattern — not just in her sidebar, but everywhere.
Miss Zoe’s custom header image
Miss Zoe’s image widgets
The pattern used in her custom header — underneath the name of her
blog — matches up perfectly with her custom-made image widgets, which
direct users to her social media profiles on Facebook, Instagram,
Twitter, and Pinterest, as well as a contact email link.
In your dashboard, you’ll find
many widgets, including ones for
Twitter,
Flickr,
About.me,
and more. They work in different ways — some display your latest
content (tweets, Flickr photos), while others simply link to your
profiles elsewhere.
Creating your own images for your favorite social networks will help
to visually unify your site, especially when combined with a specific
color palette. You can specify a custom link color in
Oxygen,
Zoe’s current theme (and her shade of powder blue is #0da4d3, in case
you’re wondering!). The image backgrounds and header design match this
color, creating a nice visual package.
So, consider how you can use color in Image Widgets, as well as other features like a
custom header and
custom background image, to visually brand your blog.
If you’re interested in experimenting with backgrounds and textures, browse options on sites like
Subtle Patterns,
My Site My Way,
Squidfingers, and
GRSites.
Have questions? Ideas? Let us know in the comments.
