DIY Design #6: WordPress Design Part 2

salutations

This is the very last DIY Design post! I can’t believe we’ve already reached the end!

Today is the second part of WordPress Design. Megan posted Part One last week. Whether you have a free domain or a paid plan, WordPress has quite a few customization options available for your blog. Fonts, colors, and layouts are some of the things that can be customized. Today, we’ll be focusing on how you can customize your blog’s sidebar to make it personalized and unique!

DIY DESIGN 6 WordPress Pt. 2

Let’s start off with an overview of some things you can change on your sidebar. I am using the DIY Design example blog for this tutorial. 🙂

Widgets

giphy (2)

To access the customization options, go to your blog and click the rectangular “Customize” button in the lower right corner of your screen.

giphy (3)

Once the Customizer has loaded, click “Widgets” > “Sidebar” to access the sidebar options.

giphy (4)

There are a lot of different widgets that you can add to your sidebar. Some of my favorites are “Image”, “Follow Button,” and “Search”. To access these widgets and more, click the “Add a Widget” button and scroll through to find the widget you want. You can use the search bar to find what you need as well.

Using the Image Widget

giphy (5)

I’m going to show you an example of how to use one of the most common widgets, the Image widget. First, you’ll need to find the “Image” option in the list of widgets and click on it. This will add the widget to your sidebar and give you a list of options for customization.

giphy (6)

To add an image to your sidebar, right-click the picture you want and click “Copy Image URL”. Then paste that URL into the “Image URL” box. This will put the image on your sidebar. There are a couple of things you can do to your image once you’ve added on to your sidebar: you can add a title above the image, type a caption below it, align it to the left, right, or center, and change its size. If you want an image to act as a link when you click on it, then paste the link you’d like to use into the “Link URL” box at the bottom.

The useful thing about the image widget is that you can make graphics with fonts of your choice in PicMonkey and then add the graphics to your sidebar. WordPress does have a “Text Widget”, but it uses the WordPress fonts, which doesn’t give you a ton of unique options. When designing graphics for your sidebar, I recommend choosing 1-3 fonts and colors and sticking to them for all the graphics you make. Here is DIY Design’s finished sidebar:

SIDEBAR

At the top of the sidebar, I added an image that welcomes our readers to the site. This will be one of the first things they see when they visit the blog, so I want it to give an accurate representation of what DIY Design is all about. Below the welcome image, I added a “Search” graphic and a search widget, a “Want To Follow?” graphic with a WordPress follow button, an “Authors” graphic with Megan’s and my Gravatar profiles, and a text widget with a list of links to all of the DIY Design tutorials.

Adding Pages to Your Sidebar

A neat trick I’ve learned for customizing sidebars is how to add custom images that link to your blog pages. This is something I’ve done on my blog, and I really like the way it looks.

DIYPage.jpg

To do this, go to one of your pages (your “About” page, for example) and copy the page link. Then, make a graphic in PicMonkey that says “About” with the colors/fonts of your choice. Add that image to your sidebar using the image widget, then use the “Link URL” box to link the image to your About page. Now, when your readers click on the image, they will be taken to your About page! You can do this for all of your pages. It’s a fun way to make your blog even more unique.

The important thing to remember here is that WordPress will still show your pages in the default way and then again on your sidebar. In the theme we’re using for DIY Design, the pages are shown along the top of the screen. If I were to add our pages to the sidebar using the method I covered above, those pages would be listed on the sidebar and again at the top of the page.

Here’s how to fix that:

giphy (7)

Go to the Customizer, click “Menus”, and click “Primary”. Then click on a page, and click the red words that say “Remove.” This will not delete or edit the page, it will just remove it. Repeat this for all of your pages. Now you have a unique sidebar menu without any pages listed using the WordPress default!

A Few Tips

Keep in mind that you should use fonts that are easy to read when you are designing graphics for your sidebar.

Some themes do not have a sidebar. If you have a theme without a sidebar, then you may want to consider changing your theme to give you more customization options.

If you want to put your profile on your sidebar, then you can use the “Gravatar Profile” widget to put your Gravatar profile picture and description on your sidebar.

Use the “Milestone” widget to add a countdown to an important day on your sidebar.

The “Goodreads” widget allows you to connect your Goodreads account to your sidebar. You can display which books you’re currently reading, want to read, etc.

If you click the “Visibility” button on a widget’s settings, you can change where it shows up – for example, you could have an image or menu on your sidebar that is only visible when a reader clicks on a certain page or post.

There are two different “Follow” widgets: “Follow Blog” and “Follow Button”. “Follow Blog” will put an email sign-up form on your sidebar, and “Follow Button” will allow people to follow you through WordPress.

_________________________

Well, folks, we have officially reached the end of DIY Design! This has been so much fun and I hope you all enjoyed it, too. 🙂 Please let Megan or I know if you have any design-related questions. 😀

Thank you for reading, and have a great day!

Have you enjoyed DIY Design?

officialblogsignature1

27 thoughts on “DIY Design #6: WordPress Design Part 2

    1. Thanks, Megan! 🙂 They’re fun to make. Hehe, yeah, I’d never even clicked on it until a few months ago! I have a setting where my profile image only shows up on my home page. 😀

      -Clara ❤

      Liked by 1 person

  1. Hey! I have a quick question… how do you add a contact form onto your blog? I have wanted to have one for awhile now ( I don’t care if it’s on a separate page or just the sidebar) but I can’t figure out how to do it. I tried looking up how to do it and even a picture tutorial but I still couldn’t figure it out.

    Liked by 2 people

    1. Hi, Maddy! Here’s how to do it:
      Click “Write” and open up a new post.
      There is a list of options at the top of the post (italics, strikethrought, etc.) In the top right corner there is a plus sign in a circle. Click the arrow next to the circle and click “Add Contact Form”.
      I hope that helps! 🙂

      -Clara ❤

      Liked by 1 person

    1. To get the URL of one of your images, you can click “Write” and go to a new post, then upload the image you’d like to use. Then add the image to the post, right-click it and open it in a new tab, and copy the image link. It’ll work just like a URL. 🙂

      -Clara ❤

      Like

Leave a comment - I'd love to hear from you!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s