First Elements: Adding Pictures
Adding pictures to your site works in much the same way as adding text: by dragging an image element to a page.
Click the Upload Image box to add a picture.
This opens up a dialog box presenting several ways to add a photo. The two key options are to either upload (or drag) an image from your own computer or search through the Weebly stock photo database.
Let's focus on the option to upload a photo from your own computer. The easiest way to approach this is to drag the picture you want to use from your desktop into the box that quite helpfully says "drag photo here." You can also click the green "Upload a photo" button if it isn't convenient to drag the image over.
The size of a picture will vary after upload, but it will usually show as wide as the entire site.
You can adjust the size of the image by clicking and dragging the little box that appears in the lower right corner of the image (you'll need to click on the picture to see it).
Clicking on the photo also opens up the settings dialog box that you can use to make further changes.
Some notable controls:
- Lightbox: If turned on, any visitor who clicks the image on your site will be shown a larger version.
- Spacing: Makes minor adjustments to the amount of white space around the picture.
- Caption: Lets you add a basic text caption under the picture.
- Advanced: Allows you to adjust (or turn on / off) the border around the picture and most importantly, enter Alt text (alternative text is required per ADA guidelines).
- Link: This option turns the image into a link. We cover links later in this guide.
This editor provides some basic options for adding filters, adjusting basic settings and focus, adding text, and cropping.
As an example of how these tools work, let's crop this picture a bit.
The Crop option places a box over the top of the picture. You can click on the bubble in the top-left corner to adjust the box manually, or pick from a set of predefined aspect ratios.
Once you've made changes click OK. If you don't like the changes you can click Crop again to readjust or click the grey Cancel button to drop out of the editor. We've cropped the example image down to more of a square; we'll keep this change and click the Save button in the upper right.
And now the changes to the image are saved.
Next up, let's learn how to Alter the Layout of a Page.