Add a red border to an image in WordPress

Do you want to draw a red border around a button in a WordPress screenshot or highlight a specific detail in an image? With neo Draw you can mark an image with a red border without leaving WordPress. Circles, arrows, text and freehand drawings work the same way.

The annotations remain individually selectable. That way you can move, resize, recolor or remove a border later. This is useful for guides, support screenshots, featured images and graphics in the style of a YouTube thumbnail.

First download neo Draw from the neoDraw plugin page. Then open Plugins > Add New > Upload Plugin in the WordPress backend, choose the ZIP file and activate the plugin. Alternatively you can find neo Draw in the WordPress Plugin Directory.

After activation the image editor appears on supported image elements and in the WordPress Media Library. For a quick look inside the editor you can also open the neoDraw demo directly in your browser.

In the following video a group photo is selected in the Gutenberg editor. neo Draw opens the image, draws a red border around Archie on the right and saves the marked version. The process takes only a few seconds.

It works the same way for a screenshot: instead of a person or animal you can frame a button, an input field or an error message, for example.

Open the post or page with the desired image. Click the image block in Gutenberg or select the image element in Bricks or Elementor. You can also start directly in the WordPress Media Library.

For screenshots use a sufficiently large source file if possible. An annotation remains more legible if the screenshot was not already heavily downscaled before editing.

Open neo Draw using the button on the selected image. When you import an existing JPG or PNG image a new SVG drawing is created. The original image remains in the media library.

The new version contains the source image and all added elements. This lets you edit frames and arrows later independently of the photo.

Select the rectangle tool and drag the frame from one corner of the desired area to the opposite corner. Set the fill to transparent and choose red for the stroke. In the Archie example the line is eight pixels wide so it remains visible even in a smaller preview of the large photo.

The frame should not touch the subject. A little spacing makes it clearer which object is meant and does not cover important details.

Not every area fits a rectangle. Use a circle to highlight a small detail a arrow to direct attention to an exact spot and the freehand pen for a short underline or a hand-drawn outline. Text can also be placed directly on the graphic.

Each element can have its own color opacity and stroke width. Still prefer one or two consistent signal colors. Too many different markings compete with each other.

Check the result at a smaller zoom level. The frame must still be recognizable but must not cover the subject. Move or scale it if necessary.

Then save the drawing in the WordPress media library. It can be inserted like a normal image into posts and page builders. If the screenshot changes later open the SVG drawing again and adjust the marking.

A fully flattened PNG contains only a flat raster image. A moved button or a changed label then often means you have to rebuild the screenshot.

In a neoDraw drawing the red frame remains its own element. You can select it move rotate scale or recolor it. The same applies to circles arrows lines and text. This editability is especially useful for WordPress guides that need updating after an update.

A red rectangle is only one option. For a small switch a circle often fits better. An arrow points to an exact position without fully enclosing the element. With the pen you can underline a term or trace an irregular shape.

Labels are also possible. Keep them short and place them next to the marked object. This keeps the screenshot understandable even if it appears in a narrow column or on a smartphone.

On a thumbnail the marking must also work at very small sizes. Do not make the frame too thin and focus on a single main subject. In the example three dogs stand by the lake. The red frame around Archie on the right immediately answers which dog is meant.

An extra arrow or a short text can help. Several frames three arrows and long labels make the preview image harder to read. Check the result at about 320 pixels wide before publishing.

A frame around the entire WordPress image and a marking inside the image serve different purposes.

If you only need a clean border around the image, the page builder frame setting or a CSS rule is usually enough. If you want to mark a specific area in the image, you need a drawn shape.

neo Draw integrates directly into Bricks, Gutenberg, Elementor and the Classic Editor. There you open image editing on the respective image element. In other page builders you can select the marked SVG graphic via the normal WordPress media library.

Editing is not tied to the page builder. An image marked in Gutenberg can later also be used in Bricks and reopened via the media library.

• Red: stands out quickly on light, green and blue surfaces.
• Yellow or White: can be more legible on dark screenshots.
• Dark blue or Black: is suitable for very bright motifs with red controls.
• Line thickness: must match the final display size. Check not only the large editor view.
• Spacing: leave some air between the contour and the marked object.

A red frame on a red button has hardly any contrast. In that case choose a different signal color instead of forcing red just for the typical thumbnail look.

For a red frame you do not need to leave WordPress. Install neo Draw, open the desired image and draw the appropriate marking over the relevant area. The new version lands in the media library and can be used immediately in your post.

If the subject or the WordPress interface changes later, adjust the frame, arrow or label again. The original image remains intact.