When I first started my now defunct personal blog, I was in two minds about having a sidebar section on my blog posts. On the one hand, I’d love to feel like my blog posts are so compelling, that’s all I need on a page to hold my readers attention. By including a sidebar that talks about myself, and encourages readers to follow me on social media or sign up or my newsletter, am I not splitting their attention to my own detriment?
On the other hand, I want to make a connection with people. I want the people who find my website through any number of sources - Pinterest, Facebook, Google, Instagram, word of mouth, etc - to know they’ve come to the right place. A place that’s going to speak to their unique needs and feel like having a chat with a mate. For those people come to your site without any context, without any idea who you are, a sidebar About Me can be a great way to introduce yourself.
In any case, people need to be guided on what to do next, especially if they’re picking up what you’re putting down.. Follow you on Instagram? Sure. Sign up for your newsletter? Hmmm, yeah, maybe! You have only a short period of time to give the right impression, and encourage them to take that next step.
This post contains an affiliate link, and is identified by (aff link). This means if you make a purchase on the linked website after clicking my link, I will receive a small commission. This comes at no extra cost to you, and allows me to continue making free content that helps you! I only ever become an affiliate for products and services that I personally use and endorse.
So yes, I am now pro-sidebar, at least in the blog section of your website! But what should it contain? Think of those 2-3 sentences as your elevator pitch. If you only had 10 seconds to tell someone why they should listen to you, what would you say? I’m also going to encourage you to include a photo of yourself, especially the one where you’re making eye contact. Help your reader put a face to the name, and feel an impactful connection.
Most WordPress themes have a sidebar option built into them, into which you can add widgets. Some may even include an About Me widget which you can simply add the required information to. Elegant Themes (aff link) is one such themes, and the one I personally recommend to any WordPress user, beginner or seasoned alike. If you don’t have this widget, then you’ll need to do it the old fashioned HTML way.
This method requires basic understanding of HTML and CSS, but nothing too complicated. If you get stuck, feel free to get in touch in the comments below or flick me a DM on IG!
First up, select your image and resize it or make it circular if you wish, like I’ve done. I personally use Photoshop and CompressJPEG / CompressPNG to resize my images. Canva is another (free) option as well. My About Me is 283x283px.
Upload your image to the Media section of your WordPress dashboard, and copy the link.
Go to Appearance > Widgets in the WordPress dashboard
Drag a Custom HTML widget into the Sidebar section of your Widgets
Now in this widget you’re going to add some simple HTML that will insert your image and your text, plus allow you to make aesthetic changes in CSS if so desired.
In the below example, I've opened a div class that uses the class "sidebar-about-me". You can make your class anything you like, as long as it has hyphens in between each word. This class is how we will style your About Me later on. I've also included the class "text-center" which centre aligns my text. You can leave this off if you like!
The image URL you just copied will be pasted in the img src section. Any links you want to include should be wrapped in the a href tag as demontrated, with your page URL where I've put my contact and services pages.
Save your progress and go take a look at your live site, to admire your handiwork!
If you want to make more aesthetic changes to it, you can now do this using CSS. Perhaps you’d like to make the font smaller than your default font, or change the colour!
Head to Appearance > Customise to bring up a live view of your site that you can make changes to. Navigate to your blog so you can see your sidebar, and open the Additional CSS section at the bottom of the Customise menu.
Remember we created the class “sidebar-about-me”. We’re going to use this class to make CSS changes to this div section. Try this CSS code to see your changes in real time. This will make your font red, and 20px in size, with a 10px margin at the top of the text. The next section should centre align your image - we do this by calling the img within the About Me sidebar. The last bit will change your links to white, called by using the “a” for link.
Play around with these to get the desired effect, or leave them off altogether if you like! If you want more insight into what you can achieve with CSS, I use CSS school all the time!
I hope this helped you get an About Me in your sidebar! If you had any issues with this, feel free to get in touch.
Cheers,
Laura x
[RELATED] A Beginners guide to Gutenberg on WordPress
[RELATED] How to Use WordPress Dashboard for Beginners
[RELATED] How to link to a page in your menu on WordPress
