Make an About Me image for your sidebar

That about me bit in your sidebar of a reminder to your readers that, "Hellooooo! I am here! I own this place and if you think it's pretty kewl we should definitely connect and make lovely business together".

It's important.

Choosing a nice picture and presenting it well is also important.

Well, that's not exactly professional... Out of focus areas, burned out areas, colours not so great. Yeah, nah.

Look at the camera, you silly bird! Colours have flared, burnt out areas in the background. Nope.

In focus, edited within brand colours, shows personality, professional. WINNER.

What format will you choose? In a frame? A circle? An overlay of some kind? An underlay?

Options. Lots of them. But Let's choose three to start with.

You might be lucky enough to have a frame to use, which MUST have a transparent centre. It will be in png format.

Remember, if the video goes too fast for you, remember you can pause it.

First, get yourself an account at Canva.  Once you start using it, you'll be back here constantly!

Click create a design, then use custom dimensions. You want to make sure that your canvas has the same dimensions as your frame. To find out what those dimensions are, find your image and click on it. Then press CMD+I (on Mac) to see what the dimensions are in px. Type those dimensions into your project, and then Design!

Next, you need to upload your images. The Upload button is at the bottom of the sidebar on the left. One uploaded (how cute is that duckie!), simply drag and drop onto your design. You will see that your frame is transparent in the middle. Position it on top using the Arrange button in the top right toolbar. You'll find that if you drag your images too far off the canvas the arrange option disappears. Don't worry too much about having everything neatly at the edges as we'll trim it all later. Just focus on getting the layering right.

Once done, click Untitled Design up the top and give it a name. Then click Download, and download as .png.

You can actually run through the same process as above if you have a frame which is a white background with a circle cut from the middle. In fact, you can download one here.

You'll need to add your image to the sidebar (see above in the frame section for a video). This gets your image in the sidebar, though square for the time being.  With a bit of CSS/HTML styling you can make your image into a circle .  You really must start with a square image in order to get a nice trim using this method.

The traditional route is putting a border-radius on your image. The border radius property makes this curved or not curved on the edges by the amount you specify. You can specify a percentage or pixels. What's the difference?

border-radius: 999pxborder-radius: 50%

I reckon pixels are great for buttons and fields, but percentages suit our purpose a bit better for an image trim.

See the Pen A better circle crop for images by Sarah Crawford (@ALinedDesign) on CodePen.

Even better? You can use a clipping path. It guarantees a circle at all screen widths, and image aspect ratios. No funky ovals here.

See the Pen A better circle crop for images by Sarah Crawford (@ALinedDesign) on CodePen.

Love my image? It's got an svg overlay, which has a transparent background so it doesn't interfere with my photo. You can also use transparent png files for this version. This is an advanced bit of code: you need to understand that svg and png need different styling in terms of position, and width/height set.

See the Pen About me image with an overlay by Sarah Crawford (@ALinedDesign) on CodePen.

Want to make the overlay an underlay instead? Switch up the z-index (higher sits on top). You won't need to worry so much about having a transparent image with an underlay.  Watercolour splodges, for example, are likely not transparent so best behind your image. For example...

Now a bit of backwards to go forward - get that image into your site then into the sidebar.

First, upload your image to WordPress. Click Media > Add New > Select Files.  When your image is finished uploading, click edit.  When you enter the editing window, click edit image. To crop your image, which you will need to do when you have saved from Canva, select the part you want to keep and then click the crop icon in the top left of the editing window. Then save your work.

Select your file's URL and copy it.

Now, click Appearance >Widgets. Find the Text Widget. This  Widget allows you to use html code in a Widget area. Stay with me here. You use html code to get your image to appear.

Add the Text Widget to your sidebar. Paste your URL into the content box, clicking the 'text' option rather than the 'visual' option. Then add the code you need to execute whatever version of image you'd like, replacing the code for my image with yours.

Save your widget when complete.

So, what do you think? Inspired? Ready to make your sidebar about me image shine?

If you need any expert help reach out and say howdy!