Creating a how-to blog post is a great way to teach your tribe. Instead of just giving wisdom, you're actually teaching them how to do something and take the next step forward.
We found that if a how-to blog post has a lot of images (either screenshots or pictures), and those images are marked up, writing a post can take a long time.
- Taking the screenshots,
- marking them up,
- uploading images one at a time,
- writing the post and formatting everything,
- then re-uploading a few images because they didn't quite look right, etc.
That's why we decided to add a feature to our Clarify software that allows authors and bloggers to quickly assemble a how-to article, and post it directly to their WordPress website as either a post or a page. The integrated image capture, markup, and authoring will make things go much faster. And if you have to make an update, just swap out images and re-publish it to WordPress.
In this example, I'll show you how I created a blog post where I show folks how to do a magic trick, and pull a rope through somebody's arm. You can see the blog post by clicking here, and you can read how I made the blog post by following along below.
1. Enter the title of your WordPress blog
Open your Clarify document. Where is says "Subject," enter the title of your WordPress blog post.
1.1 Write your intro paragraph
You can also enter a short description/intro paragraph for your blog post right below the title.
2. Import your images
For this blog post, I'm going to import some pictures I took with my iPhone and saved in iCloud. Before I bring them in, however, I want to make sure they are a manageable size to work with.
- So I click on the document inspector
- Check the box
- Enter the width
If you know the height, you can include that, too. But as long as the images are 800 pixels wide I'm happy - so I'll leave that part blank.
2.1 Import image files
Now I'm ready to bring in the images. Just click File > Import > Image Files...
2.2
These were saved in my Photos, so I just select all the pictures I want to import (hold down shift or comand while you click images to select more than one at a time) and then click Open.
2.3 Images are imported as steps
On the left-hand side, you can see that all of your images are imported as steps.
3. Write a title and explanatory text for each image
Each step has a field for a title (equivilent to an <h> tag) and paragraph text.
Writing titles and paragraph text is optional - if you don't write anything there will just be a little bit of white space between pictures. Since this is a how-to blog post, I'm going to add a title over each image.
3.1
I can add some additinal text for each image if it's necessary. Often times, just a title and a marked up image are sufficient.
There are some formatting options that appear when you are writing text in the paragraph field.
4. Mark up your image
When you click on the actual image, the text formatting options disappear, and in their place appear the image annotations.
In the image below, I have an arrow annotation and a text annotation. But there are other options including squares, circles, sequence, highlighting, and blurring (to cover sensitive information). You can also modify the thickness, color, transparency, text size, etc. for each annotation.
After you select your annotation, just click on the image and drag your mouse around to draw the shape.
4.1 Change the colors of the annotations and move them around
If I want to move the annotations around, just click on them in the middle (where there isn't a tiny white square) and drag your mouse around.
I can also change the color and apply the change en masse. In this example, I decided to change the color of the arrows. If I change the color of one, I can right click on th arrow and apply changes to all (arrow) annotations.
When I select this option, I can make it so that all arrows in my Clarify document are changed, or just change the ones in that particular step.
5. Make sub-steps
Each step title will be a heading in your blog post. You can move a step to the right if you want it to be a sub-step.
6. Change a step from image to HTML (to include a video)
I made a video on my iPhone and uploaded it to YouTube. I want to include the video in my Clarify step so it plays inline.
All I have to do is create a step (by clicking the + icon in the upper left-hand corner) and click the step inspector.
6.1 Change the Media Type
Change it to HTML so you can embed the video.
6.2 Grab the embed from YouTube (or Vimeo, Wistia, etc.)
This is from YouTube. Click Share > Embed and copy the text.
6.3 Paste into Clarify
7. Export to WordPress
Open your clarify Preferences (click here to see how) and sync Clarify to your WordPress account.
- Share
- + icon
- WordPress
7.1 Enter the required information and test connection
7.2 Connection good? You're off!
7.3 Click the WordPress icon at the top of your Clarify article
You'll notice the "W" appears at the top now - whenever you want to publish to WordPress, just click the "W"
You'll have options about whether you want to publish as a draft, publish a page or a post, what kind of post, etc.
7.4 You're done!
When it's done, all of your images are stored in your WordPress media library and you can check out your post in WordPress.
I did make a few adjustments to my post in WordPress. For example, I updated some tags to alter my headings, and a few paragraph tags to adjust some of the spacing. But other than a few minor tweaks, I was able to just hit publish and it worked out pretty darn great.
PS - I also made this blog post in Clarify - but because we use HubSpot's COS, I had to publish the document to clarify-it.com, and copy/paste the HTML into the blog post editor. A couple more steps, but still - when using a lot of images it was pretty easy.