Part 4 of my blog design series has arrived! This week I'll be walking you through how to create and add some beautiful "About Me" content to your sidebar; it's a quick and easy step, but it's so incredibly important to have on your page. Audiences love having a face to pair with what they're reading, so making sure you have a great picture with a bit about yourself below it is one of the most important things you can do for your blog.
As per usual, we'll be using Canva for this tutorial, but you can always use PicMonkey or Photoshop to do this as well. Keep reading to learn how to easily create some beautiful sidebar "About Me" content!
1. Determine Content Dimensions
As always, you'll first need to figure out what size your content needs to be before you get started on the design aspect of it.
If you're using Blogger, click TEMPLATE>>CUSTOMIZE>>ADJUST WIDTHS, and then jot down the width of your sidebar. My test blog's sidebar is 310 px wide, so I decided to set the width of my new Canva design at 250 px just to be on the safe side. As long as your "About Me" content width is at least slightly less than the overall width of your sidebar, you should be totally fine. The height of your design is completely up to you-I set mine at 400 px, but if you plan on adding more than one or two sentences, I would suggest making it around 400-500 px tall.
For Wordpress users, the width of your sidebar widget depends on which theme you use. For reference, here's a helpful chart with the different sidebar widths for most WP themes.
Once you've determined your content width and height, head over to Canva and click "Use Custom Dimensions" towards the top menu of your home page. Then enter your width and height preferences and click "Design!"
2. Find a Design Layout
Once you reach the design screen in Canva, you'll want to choose a layout for your content. The easiest way to do this is to click the TEXT button and then scroll down for a while until you see the image that I've selected below. There are several other options that you could choose, this one is just my personal favorite. Don't worry if you don't like the colors or fonts on this particular design- we'll customize those later!
Once you've found it (or whichever layout you prefer), just click the design to have it appear on your blank canvas.
3. Choose a Profile Shot
Now it's time for you to decide on the perfect picture to showcase your beautiful self to your readers and future audiences! This is always a hard decision, so take your time if you need a while to decide-it's best to have a high quality image of a happy smiling face, but it's 100% up to you!
To upload an image, click the bottom button on your left vertical menu that says "UPLOADS". From there, click "Upload Your Own Images" and select a picture from your computer. Or, if your Canva account is linked to your Facebook, you can click the Facebook icon to search through your tagged or profile pictures. Fancy!
I usually upload around 5 images and choose whichever picture looks best in my frame. So don't feel too pressured to settle on one yet! Once your images are uploaded, just click and drag one into the circle.
4. Customize And Save Your Design
This is the fun part! Now you can edit the colors, font, and text in your design and make it perfect for your blog. For my design, I changed the colors and font to match my blog's header, but there are a million different ways to customize your content. Have fun and play around! Add a bit about yourself or your blog's mission statement in the text box, and make sure to include your name and introduce yourself somewhere in your design!
Your design's canvas will automatically have a white background, but if your blog's background is a different color, just go to Canva's left vertical menu and click BACKGROUND and then select the GREEN square (as this is the first background in the menu that's a solid color). Once this is displayed on your design, click on the top left corner of your canvas and change the color to your preference. (Make sure to match the hex code to whatever your blog's background's code is to make sure the color matches perfectly!)
Once you're satisfied with your design and ready to save, click DOWNLOAD>>SAVE AS IMAGE to save the design to your computer's "downloads" folder.
5. Host and Upload Your Design
Now you'll need to host your image on a website like Photobucket or Flickr. Once you've uploaded your design to your preferred hosting site, copy the code below.
From here, go to your image hosting site and copy your image's URL, then go back to Blogger and use this to replace the YOUR IMAGE URL HERE part of code (make sure to keep the quotation marks and insert your code in between them). Then, copy and paste your blog's URL to replace the YOUR BLOG URL HERE part of the code (again, pasting the URL in between the quotation marks).
Click save to close out of the widget box, then click SAVE ARRANGEMENT. Now you can admire your beautiful completed work!
I hope you found this post helpful! Check back soon for another blogging tutorial, and if you missed parts 1-3 of my blog design series, click here to check them out.