Builder brands: Adding and editing images

With your website builder, you can easily add images anywhere on your page using the responsive drag-and-drop functionality features. You can also quickly resize or edit the image and add effects or behaviors that cause the image to react to your viewers.

A whole book could be written about all the many ways to edit images; in this article, we will cover the basics of finding the elements, how to upload your content, and how to adjust image settings.

• Adding an image to your website builder from Elements
  • Selecting/Uploading an image
  • Advanced settings

Adding an image to your website builder from Elements

1. Log in to your account manager via https://www.networksolutions.com/my-account/login.
2. Select Websites on the left menu, and you will be routed to a different tab where you can access your website editor.
   
   
    
   Note: Alternatively, if you have multiple website builder accounts, click Launch to proceed.
3. Launch your website editor by choosing Edit site.
4. Click the + Elements tab in your editor's left-hand menu.
   
   
    
5. A pop-up menu will appear with all the available elements you can use; select Images.
   
   

Selecting/Uploading an image

Once you choose what type of image element you want to add, a window will appear showing you the four places you can pull an image onto your website: either uploading your own file up to 30 MB in size, selecting a link image, picking from your saved images, or choosing from thousands of stock images courtesy of Unsplash.

So the best recommendation we can make is to start by getting in there and testing all the options to see what they do. Add a test image, run through the settings, change things. Delete the image when you're done. As you become familiar with what you can/can't do and new ways to go about customizing your elements. Remember, this builder is constantly changing and growing.

For the rest of this example, we will be working from the add image option and the upload images.

1. Select either a single IMAGE, an IMAGE GALLERY, or an ICON from the next Images menu.
   
   
    
   • Stock images means you would like to browse the available images within the builder.
   • My images means you would like to select an image you have already uploaded.
   • Linked images means you'd like to select an uploaded image with linked properties.
   • Add image means you would like to Upload Images to the My Images selection.
2. Once you select the Upload Images button, you'll see a familiar system pop-up asking you to choose which images you'd like to upload from your computer's hard drive.
   
   
    
3. Select the image(s) you would like to upload and click the Open button from your system menu.
    
   Pro tip: This step is relatively universal; however, the look of this step varies depending on the age and type of computer you have.
4. You should now be back in your editor, where you will see the image(s) you have selected to upload.
   
   
    
5. Select an image to add to your design by clicking on the photo. A checkmark will appear over your selections.
   
   
    
6. Select the PLACE button to add it to the page within the website editor.
   
   
    
7. Once placed, you can drag and drop the photo to its desired location or resize it by clicking and dragging on the image's corners.
8. Multiple images will be stacked together, which you can drag to separate.
   • Change image
   • Crop the image
   • Link image to a page or URL
   • Add overlay (or layer over the image, usually a color)
   • Add an order
   • Change border width
   • Change opacity
   • Add animation
   • Bring the element to the front (above other elements)
   • Send the element to the back (put it behind another element)
   • Duplicate element
   • Delete image
   • More options
9. Click on More from the image to reveal an expanded toolbar.
   
   
    
10. A larger menu will appear over the selected image with some more tools to adjust your image.
    
    
     
    • Change the layout of the image
    • Fit the image to a frame
    • Align the image perspective
    • Change visibility
    • Change where the image docks on the page
    • Change the image background color
    • Adjust the border radius around an image
    • Add drop shadow
    • Add glow
    • Advanced settings

Advanced settings

Although there are a lot of the same options in the settings as there are in the image toolbar, you can adjust quite a few more settings from this section. Some of the more essential options are SEO elements, behaviors, style, size, and position. Below, we will cover how to add image alt tags.

1. To add image alt tags, click Advanced within the expanded image toolbar, and a pop-up will appear to the right.
   
   
    
2. Click the Settings button and scroll down to the ELEMENT SEO option.
   
   
    
3. Here you can add alt tags or even behaviors like different navigation, such as expanding the image when clicked.
   
   
    
4. After you’ve made your necessary changes, click the FINISH button. You're done!
   
   
    
5. Be sure to Save and Publish your changes to make them live.
   
   
    

Get practical tips and product updates on LinkedIn.
Follow Network Solutions