How to Add Images

Are you looking to add headshots to your company page or an image by your text to help break up the content? This page will walk you through the steps to add images in a simple format for a clean, effortless look.

Changing and adding images is one of the first things you’ll probably do to your Carrot site. As you go through swapping out the stock images with local ones, you’ll want to also add in some alt text and captions to help boost your SEO!

There are several reasons swapping out the default images is beneficial for you. Some of the benefits are:

  • Builds credibility by localizing your site
  • Boosts your SEO by adding keyword-rich alt text to your images
  • Helps differentiate your site from other sites by having different images

Don’t forget to check out our Guide’s section on Image Optimization for more tips and tricks!

Let’s get started!

Step 1: Go to your page list and click the page to edit

Step 2: Add an Image Block where you want the image to be

Hover your mouse over the page and find the circle button to “add block.” Click this to open the block choices.

Step 3: Select Image Block

The easiest and fastest way to find your block is to start typing in the search bar above the choices. Image blocks are in the Common Blocks category. As soon as you see it, click the option to add the block where you selected.

Step 4: Upload Your Image

Please note, the maximum size for your PDF is 8mb. Any larger and the site can not accept it. 

Step 5: Set Image Style

When editing an Image block, you can change the style from Default to Rounded, Grayscale, or Shadowed.

You’ll find this option under the Block settings in the sidebar to the right of the editor:

screenshot showing where to edit image styles in an Image block on a Carrot website

Step 6: Provide Alternative Text (Alt Text)

We recommend providing alternative text (alt text) for each image or graphic you add.

Alternative text is the text read aloud by screen readers for blind and visually impaired users and also serves as a fallback if the image fails to load.

This will also be the text that shows up with a mouse hovers over an image. Google likes it to be an actual description of the image!

Make sure to include relevant keywords related to the image content while keeping it concise and informative. Remember, the alt tag should provide meaningful information to users who can’t see the image, so strive for clarity and relevance.

Tool Tip: If you later go to the Media Tab and add Alt Text to your images that were loaded in an image block, the Alt Text will not be pulled onto the images that are already on the pages. This is a function of WordPress that we cannot control. Make sure to add the Alt Text when adding the images to your page!

screenshot showing where to edit Alternative Text in the image settings for a Carrot website

Step 7: Align the Image

By default, every image inserted onto your site will not be aligned. Aligning the image allows the text to surround the image for readability purposes. No alignment means the text will not surround the image and the image will always remain floating to the left, i.e. it’s on its own line.

You can change the alignment of the image by clicking on the image and choosing any of the options with the lines and boxes. When you choose to align to the right or left, the text will surround your image for cleaner formatting. This is especially helpful if you are using a smaller image. Larger images that take the width of the screen are best-aligned to the center and should use the cover block instead of the image block.

Step 8: Adjust the Image Size

Click and drag the blue circles around the image’s right and bottom side to adjust the image to a smaller dimension.

Step 9: Click Update on the Top Right and You’re Done 🙂

You have just added your image!