Content Management Tips & Tricks

Useful content management tips & tricks to help you get things done faster.

Content Management Tips & Tricks

Content Management Tips & Tricks

Here are some useful content management tips & tricks to help you get things done faster.

Content Management Tips & Tricks - Laptop userSometimes a content manager has to fix up things “on the fly” to get the content published and approved.

When this happens, it pays to have a few tips, tricks, and hacks up your sleeve.

This section contains a number of useful quick fixes that are worth knowing for when such occasions arise.

Note: One of the great benefits of working with content on the web is that you can publish something to meet a deadline and then go back and edit or fix things up after publishing. (e.g. replace banners and images, fix up typos, add or delete text, etc.)

In this lesson, we’ll cover a number of tips and tricks we’ve picked up over the years to help you get things done quicker when things need to be done quickly.

***

Changing Web Browser Text

Let’s say that you are writing an article or a tutorial about upcoming changes that will be made to content on your website. These changes haven’t been implemented yet but your business wants you to publish the article or tutorial as soon as the changes to the website are made.

Here is a really useful tip for whenever these situations arise.

Let’s say that some of the content in the screenshot below needs to be changed on your website for your article or tutorial.

How can you change the content on your website to create new screenshots that reflect this “updated” content without changing the actual content of the website?

Screenshot of KFC Website
Let’s make some changes to this content without actually making any changes to the website. Source: KFC

Simple! Here’s how … if you are using the Chrome web browser, right-click on the content that needs changing and select “Inspect” from the menu…

Chrome Browser menu - Inspect
Right-click and select “Inspect”

This will bring up the Web Developer’s Tools section and display a bunch of code on your screen.

Ignore all the code and locate the string of text that needs to be changed.  You may have to dig a little and open up some nested sections in the code to find the text.

Chrome Web Developer Tools - Web Content String
This is the string of text we want to change.

Once you find the string of text that needs changing, double-click on the text to select it, make the changes to the text, and hit the Enter button.

Chrome Web Developer Tools - Upfated Web Content String
Change the text on your web browser

Close the Web Developer Tools section (click on the ‘X’). Your web browser should display the edited text in the same styling and format of the website. You can now take screenshots of the “new” content…

Web browser changes
Your website now displays the “new” changes on your web browser.

info

Note: Don’t worry…nothing has actually changed on the actual website – you’re only playing with text on your own web browser.

This tip is really useful for taking screenshots of things like upcoming changes to pricing, product names, etc.

A mock-up of web content displaying pricing changes
This tip is useful for creating a mock-up of web content displaying pricing changes.

Use this tip to change any text on your website…

Mockup of website with completely edited web content
You can change every text element on your website…this is a great tip for screenshots!

tip

To view the original content on your website, just refresh your web browser. Everything will be restored to normal!

Working With Images

Having basic image editing skills can help you save time and money when making small fixes to content-like images.

info

Note: The following examples use Photoshop (other image editing applications should have similar features).  You don’t need to be an advanced user to perform the tasks shown below, but having some basic Photoshop skills is useful.

Fixing Screenshots With Misspelled Words

Let’s apply the “Changing Web Browser Text” tip shown above to fix misspelled words on screenshots.

Suppose that you take a screenshot of an element on a web page for an article, tutorial, etc., and you discover there is a misspelling on the screenshot image, as shown in the example below…

A screenshot image with the word "Vulnerabilities" spelled incorrectly.
The word “vulnerabilities” has been misspelled on this screenshot image.

The misspelled word is part of the screenshot image and the screenshot was taken from a web page.

The obvious solution would be to log into the website, edit the page, fix the spelling error, republish the page, then take a new screenshot of the web page with the word spelled correctly. But…what if it’s not your website?

Here’s one way to fix the screenshot…

First, go back to the web page that is the source of your screenshot and see if you can find the same word spelled correctly. Note: the correctly-spelled word needs to have the same typeface, heading size, color, etc. for this screenshot fix to work (it’s like finding the proverbial “needle in a haystack”).

Screenshot of web page with a misspelled version of the word "Vulnerabilities" and a correctly-spelled version of the word.
You could get lucky and find an identical version of the misspelled word spelled correctly.

Take a screenshot of the correctly-spelled word (crop the image to make sure there is no extra spacing around the word), then superimpose the image with the word spelled correctly over the original screenshot in your image editing application.

Nudge the image into its correct position until the screenshot looks right, then save your image.

Animated image showing a text image being superimposed on another image layer to hide a misspelled word.
This method of fixing misspelled words in screenshots can be a little fidgety.

Tip: Use the layer opacity tool to make sure the superimposed image is aligned correctly with the screenshot below it (i.e. make the top layer slightly transparent so you can see the layer below as you nudge the image into position).

Photoshop Layers - Reducing layer opacity using the opacity tool.
Make the top layer slightly transparent using the layer opacity tool.

Now that you know the manual way to fix misspelled words on screenshot images, let’s use the “browser editing” method, which is so much faster and easier if you are using the Chrome browser.

Go back to the web page and right-click on the misspelled word, then select “Inspect” from the menu…

Chrome Browser menu - Inspect
Right-click and select “Inspect”

This should bring up the Web Developer’s Tools section with the line containing the misspelled word.

Chrome Web Developer Tools - Web Content String
This is the string of text we want to change.

Click on the line, fix the spelling of the word, then hit “enter” or click outside that section to make the change…

Animated image showing Chrome Web Developer Tools - Web Content string being edited.
Fix the spelling mistake in the line and hit “Enter”

The misspelled word should now be “magically” fixed on the web page, so you can take a new screenshot of the page with the correctly spelled word.

Example of web page with the word "Vulnerabilities" spelled correctly.
The web page content now displays correctly for your screenshot.

Adding A Callout To Images

Adding a callout to an image is useful when you want to bring attention to a particular feature or section of an image, create step-by-step screenshot tutorials, etc.

Callout
Add a callout to an image to make a feature or section stand out.

Adding callouts to images typically involve adding layered text, images, and shapes (e.g. ovals, rectangles) over the section of the image you want to make stand out.

In this example, we’ll add a red oval callout shape to the image below.

To add a callout, first, take a screenshot of your image and bring it into your image editing application (e.g. Photoshop).

Next, create a new layer (so you’re not adding pixels directly to the screenshot image). This way,  if you make a mistake, you can just delete the layer and start again.

Photoshop Layers - Add a new layer
Add a new layer when overlaying elements on your image.

Next, select a marquee tool (elliptical or rectangular) from the tools menu. In this example, we want to add an oval-shaped callout, so we’ll select the elliptical marquee and a border to it.

Draw the shape over the section of the image you want to make stand out.

Photoshop - Adding an elliptical marquee over an image.
Add an elliptical marquee over the image.

Next, select Edit> Stroke from the main menu.

Photoshop - Edit - Stroke
Select Stroke to add a border to your elliptical marquee.

Enter the Stroke width (e.g. 1 px, 2 px, 4 px, etc.) and color (e.g. red), and a location (inside, center, outside), and click the OK button.

Photoshop - Stroke options.
Select the width, color, and location of your border in the Stroke Options window.

Finally, click on the image to deselect the marquee.

Congratulations! You have added a callout to the image. Since you have added this element to your image on a separate layer, you can use the Move Tool to adjust the position of the callout. Also, feel free to add text overlays and arrows if required.

Here’s the process from start to finish:

Video: Adding callouts to images.

Highlighting Text In Images

If you know how to add callouts to images, then you will find that highlighting text (or sections of an image) is just as quick and easy.

An image with a highlighted section.
Highlight words or sections of an image to draw the user’s attention.

To highlight a section of an image, add the image to your image editing application.

In this example, we want to emulate a highlighter pen, so select the Rectangular Marquee Tool from the Tools section and draw a rectangle over the text you want to be highlighted.

Photoshop - Rectangular marquee
Add a marquee over the section you want to highlight.

Make sure that you are working on a new layer when you do this (in case you make a mistake). Next, in the main menu, select Edit > Fill

Photoshop - Edit - Fill
Add a new layer, then select Edit > Fill.

You can highlight your image using any color you like. For this example, let’s use a bright yellow color to make the highlight stand out.

Select Color from the Fill > Contents dropdown menu.

Photoshop - Fill Options - Color
Select Color from the Fill > Contents menu.

In the color picker, select the color for your highlight using any of the color palette tools, then click on the OK button.

Photoshop - Color Picker - Fill Color
Pick a fill color from the color picker.

As we are adding a color using the Fill tool, this should completely fill the rectangular marquee. As long as you have added the marquee and fill on a new layer, everything should be fine…there’s nothing to worry about!

Photoshop - Rectangular marquee filled with color.
This will fill the rectangular marquee with your selected color.

In the Layers tab, look for the Blending Modes dropdown menu (it will probably display the Normal mode) and select Multiply.

This multiplies the luminosity of the base color by the blend color, allowing the image below to show through the color-filled marquee. You can also adjust the intensity of the highlight color by reducing its opacity (increasing transparency).

Photoshop - Blending Modes menu - Multiply
Selecting the Multiply blending mode will fix this and make the rectangular marquee transparent allowing the text on the image to show through.

Click anywhere on the image to deselect the marquee. Congratulations! You should now see the section of text on your image highlighted.

An image with highlighted text.
Your image now has highlighted text.

Repeat this process to highlight other sections of your image. As we have added this element to a new layer, you should be able to easily adjust the highlight by moving it around on the image. You can also erase or trim any excess color sections to suit your taste.

Adding highlighted sections to images.
Go nuts adding highlighted sections to your images!

Here’s the process from start to finish:

Video: Adding highlights to images.

Adding A Logo With White Background To Images

This is a quick hack that can help you if you need to overlay an image with a white background (e.g. a logo or watermark) on another image (e.g. a photo or stock image).

As you can see from the example image below, placing the logo with a white background over the stock image doesn’t look good.

An image with white background overlaid on another image in Photoshop
This is not a good look!

Here’s a quick fix: Make sure to select the layer with the white background image and go to the Blending Modes dropdown menu (it will probably display the Normal mode).

Photoshop Editor Screen - Blending Modes dropdown menu
Let’s change the blending mode of the layer containing the logo with the white background…

Select Multiply.

Photoshop Editor Screen - Blending Modes dropdown menu - Multiply
Select Multiply from the Blending Modes dropdown menu.

This multiplies the luminosity of the white color pixels by the blend color, creating the illusory effect of “transparency”.

Photoshop Editor Screen - Image with Multiply Blending Mode applied.
When the Multiply blending mode is applied, the white background of the logo disappears.

Note: Sometimes you can get a better result by selecting Color Burn instead of Multiply from the Blending Modes dropdown menu, as shown in the image below.

Image with Color Burn Blending Mode applied in Photoshop.
In this case, applying the Color Burn blending mode also removes the white background and gives the logo image a more “rustic” look.

Here’s the process from start to finish:

Video: Adding overlays with white backgrounds to images.

Grabbing Text From Images

You can easily copy text from most web pages by simply highlighting the text on the page and copying it to your clipboard. There’s no trick to that.

Using a tool like Snagit, however, also lets you quickly and easily copy text embedded in images.

For example, to grab the text from an infographic image like the one shown below, simply launch Snagit, select the “Grab Text” option, and click on the “Capture” button.

Snagit - Grab Text feature.
Let’s copy the text in this infographic to our clipboard using Snagit.

Select the section of the image containing the text and Snagit intelligently analyzes and grabs the text contained in the selected section of that image.

Snagit - Grab Text Results
Snagit has grabbed all the text in the area of the image we selected.

Now, simply copy and paste the results into your text editor.

Plain text editor with content pasted from Snagit.
Here is the image content pasted in from Snagit’s Grab Text feature.

More info: Snagit

Resources

See the sections below for useful tools and resources that will help you manage your content more easily.

How To Create An Effective Content Strategy For Your Business - Free Video Course

Free Video Course: How To Create An Effective Content Strategy For Your Business

Learn how to create an effective content strategy for your business with this free 12-part video course.
File Transfer Tools

File Transfer Tools

Learn about tools you can use to send files to other users and transfer files between devices, your web server, and cloud storage services.
Amazon S3

Using Amazon S3

Learn how to set up and use Amazon S3 to store, manage, and serve content on your website.
Content Research Tools

Content Research Tools

Useful content research tools, sites, and resources to help you save time in areas like content planning and content production.
Headline Generating Tools

Headline Generating Tools

Create compelling headlines for your articles quickly and easily with headline-generating tools.
Password Management Tools

Password Management Tools

Password management tools let you easily store your login passwords and generate secure passwords.
Customer Surveys

Customer Surveys

Use feedback from customer surveys to create a more targeted content strategy and improve your content creation.
Content Production Tools

Content Production Tools

Useful tools and resources to help you speed up your content planning and content production.
Content Editing Tools

Content Editing Tools

Useful time-saving content editing tools and resources to keep the quality of all edited content consistent and error-free.
Content Promotion Tools

Content Promotion Tools

Use these content promotion tools and resources to help your content reach a wider target audience.
Media Creation Tools

Media Creation Tools

Use these media creation tools and resources to create different types of media for your content.
Logo Makers

Logo Makers

Logo makers let you create a unique and professional-looking logo for your business with no design experience.
Media Editing Tools

Media Editing Tools

Use these tools to convert your media files into different formats and file types, resize your files, and more! 
Search Optimization Tools

Search Optimization Tools (SEO)

Optimize your content for SEO and improve your content marketing results with these search optimization tools and resources.
Content Management System (CMS)

Content Management System (CMS)

Learn how a content management system (CMS) can help you manage your content more effectively.
WordPress Plugins

WordPress Plugins

Learn about many powerful and time-saving plugins you can use to manage content more effectively on your WordPress site.
WordPress User Manual

WordPress User Manual

The Complete Step-By-Step WordPress User Manual provides detailed and comprehensive WordPress training tutorials for non-technical users.
Free Content Ideas Course

Free Content Ideas Course

Learn how to never run out of great content ideas for your blog, website, or email newsletters.
Digital Business Video Courses

Digital Business Video Courses

Develop the skills you need to manage content effectively with these digital business video courses.
Content Troubleshooting Guide

Content Troubleshooting Guide

Use this content troubleshooting guide to help you identify and fix content-related issues in your business.
The Small Business Digital Manager

The Small Business Digital Manager

Learn how to take control of your business online to drive more traffic, leads, subscribers & sales to your website!
Learn Basic HTML

Learn Basic HTML

Learn how to edit web page content and website templates with these learn basic HTML resources!
Social Media Tools & Resources

Social Media Tools

Manage your content more effectively on your social media platforms with these social media tools and resources.
Free Membership Sites

Free Marketing Membership Sites

These membership sites are free to join and contain valuable resources and information on internet marketing and digital entrepreneurship.
Content Outsourcing

Content Outsourcing Resources

Here are useful resources to help you find people with the right talent and skills for outsourcing your content needs.
Link Tracking Management Tool

Link Tracking Management Tool

Trackerly is a powerful link redirection and tracking tool that lets you manage thousands of links on multiple domains from a single location.
Keyboard Shortcuts

Keyboard Shortcuts

Save time using these ALT key keyboard code shortcuts to add international accents and symbols to your content.
Content Management Glossary

Content Management Glossary

Useful terms and definitions related to the creation, management, and distribution of digital content.
Retired Resources

Retired Resources

A list of resources referred to in the course content that are either temporarily or permanently unavailable.

***

Image: Laptop User

 

Author: Martin Aranovitch

Martin Aranovitch is a trainer, educator, blog writer, and online publisher. He runs various training websites on digital business, including ContentManagementCourse.com, WPTrainingManual.com, WPMasterclasses.com, and WPCompendium.org. View all posts by Martin Aranovitch