Adding Pictures to a Site

There are four ways to add pictures to your pages: Image Elements, Slideshow Elements, Gallery Elements. We'll look at using the basic image element in this article.

From the Build tab, drag the image element to a page. Then click on the element to open the image selection dialog box.

adding-pictures-drag.jpg

Here you can upload an image from your computer by dragging the file from a folder directly onto this window or by clicking the green upload button and locating the file on your computer.

 

The size of the picture as it appears on your website may be a bit different than you expected, but you can change the size easily. Mouse over the image and a small blue box in the lower right corner will appear. Click and drag on this to resize the image 

adding-pictures-drag-resize.jpg

Clicking on a photo will bring up the element settings.

adding-pictures-edit.jpg

In addition to the Edit and Replace image buttons, the following options are available:

  • Link: This option allows you to add a link to the image.
  • Lightbox: Enabling the lightbox feature will display the full sized image in an overlay when someone clicks the image on the page.
  • Spacing: Click on this to adjust the amount of white space around the picture.
  • Caption: Click here to enter caption text that will display beneath the image.
  • Advanced: This menu includes options to choose a border style and color and enter Alt Text for the image.

 

adding-pictures-editor.jpg

The Edit Image button will open an image editor with several more options. From left to right in the above image:

  • Crop: Crop or rotate the image
  • Filters: Add one of several filters, similar to what you may be familiar with from popular photo apps
  • Adust: Make adjustments to the image brightness, saturation, and contrast
  • Text: Add text in a layer on top of the image
  • Focus: Add a linear or radial blur effect to the image

Use the undo button to remove any change you don't like, and don't forget to click save when you're done editing. 

You can also add an image directly to a text element and have the text wrap around the image. To do this, drag an image element into an existing text element.

Screen_Shot_2016-02-22_at_4_14_03_PM.jpg 

Then upload an image as described above. You'll likely want to adjust the size of larger images using the blue drag control in the corner of the image. You can access the same settings that are available for a standalone image element, like caption and spacing, and switch the alignment from left to right.

Was this article helpful? 871 out of 1238 found this helpful