Workshop Replays How-to TutorialsHow to Insert an Image

How to Insert an Image

In this tutorial you will learn how to insert an image into a page in your project.

1. Adding the Image Element

First you will need to add the image element. To do this click on the 'Elements' tab in the sidebar and select the 'Media' drop down. Now click and drag the 'Image' element to the place where you want the image added.

1. Adding the Image Element

2. Select the Image Container

Next, click on the Designrr logo to activate the 'Image' element. You will know that it is activated when the word 'Image' is shown in the upper left corner. Next, click on the 'Inspector' tab in the sidebar. Then the 'Attributes' drop down and then select the 'Media Manager'.  

2. Select the Image Container

3. Finding an Image

Inside the 'Media Manager' you will see a number of options for finding images. For example, you can upload your own, or search via keyword or url. Pro and Agency users can also add cover images. In this tutorial we will look at the 'Search' option. Start by clicking on the 'Search' tab and entering a keyword.

3. Finding an Image

You will be presented with a number of options to choose from. Click on the image you like and it will automatically be added to your page.

4. Resizing the Image

If you need to resize the image again make sure that the image element is activated. You do this by clicking the image and ensuring that the word 'Image' appears in the upper left hand corner. Once activated you will see the border around the image with the small circles. You can grab these circles to resize the image. To maintain aspect ratio use only the corner points and hold down the shift key.

NOTE: If you do not maintain aspect ratio you will be stretching the images.

4. Resizing the Image

5. Aligning the Image

To align the image select the 'Image' element behind it. To do this hover to the side of the image until you see the 'Image' word in the upper left corner. Again, you will see the border of the activated area with the small circles. Use these to align the image to the left or right.

5. Aligning the Image