This article by Miko Coffey, the author of the book, Building Business Websites with Squarespace 7, delves into the processes of adjusting images, adding content to sidebars or footers, and adding links.

(For more resources related to this topic, see here.)

Adjusting images in Squarespace

We've learned how to adjust the size of images in relation to other elements on the page, but so far, the images themselves have remained intact, showing the full image. However, you can actually crop or zoom images so they only show a portion of the photo on the screen without having to leave the Squarespace interface. You can also apply effects to images using the built-in Aviary Image Editor, such as rotating, enhancing color, boosting contrast, whitening teeth, removing blemishes, or hundreds of other adjustments, which means you don't need fancy image editing software to perform even fairly advanced image adjustments.

Cropping and zooming images with LayoutEngine

If you only want to crop your image, you don't need to use the Aviary Image Editor: you can crop images using LayoutEngine in the Squarespace Content Editor.

To crop an image, you perform the same steps as those to adjust the height of a Spacer Block: just click and drag the dot to change the part of the image that is shown. As you drag the dot up or down, you will notice that:

Dragging the dot up will chop off the top and bottom of your image

Dragging the dot down will zoom in your image, cutting off the sides and making the image appear larger

When dragging the dot very near the original dimensions of your image, you will feel and see the cursor pull/snap to the original size

Cropping an image in an Image Block in this manner does not remove parts from the original image; it merely adjusts the part of the image that will be shown in the Image Block on the page. You can always change your mind later.

Adjusting the Focal Point of images

You'll notice that all of the cropping and zooming of images is based on the center of the image. What if your image has elements near the edges that you want to show instead of weighting things towards the center? With Squarespace, you can influence which part of the image displays by adjusting the Focal Point of the image. The Focal Point identifies the most important part of the image to instruct the system to try to use this point as the basis for cropping or zooming. However, if your Image Block is an extreme shape, such as a long skinny rectangle, it may not be possible to fit all of your desired area into the cropped or zoomed image space.

Adjusting the Focal Point can also be useful for Gallery images, as certain templates display images in a square format or other formats that may not match the dimensions of your images. You can also adjust the Focal Point of any Thumbnail Images that you have added in Page Settings to select which part to show as the thumbnail or header banner.

To adjust an image's Focal Point, follow these steps:

Double-click on the image to open the Edit Image overlay window.

Hover your mouse over the image thumbnail, and you will see a translucent circle appear at the center of the thumbnail. This is the Focal Point.

Click and drag the circle until it sits on top of the part of the image you want to include, as shown in the following screenshot:

Using the Aviary Image Editor

You can also use the Aviary Image Editor to crop or zoom into your images as well as many more adjustments that are too numerous to list here. It's important to remember that all adjustments carried out in the Aviary Image Editor are permanent: there is no way to go back to a previous version of your image. Therefore, it's better to use LayoutEngine for cropping and zooming and reserve Aviary for other adjustments that you know you want to make permanently, such as rotating a portrait image that was taken sideways to display vertically.

Because edits performed in the Aviary Image Editor are permanent, use it with caution and always keep a backup original version of the image on your computer just in case.

Here's how to edit an image with the Aviary Image Editor:

Double-click on the image to open the Edit Image overlay window.

Click on the Edit button below the image thumbnail. This will open the Aviary window, as shown in the following screenshot:

Select the type of adjustment you want to perform from the menu at the top.

Use the controls to perform the adjustment and click on Apply. The window will show you the effect of the adjustment on the image.

Perform any other adjustments in the same manner.

You can go back to previous steps using the arrows in the bottom-left section of the editor window.

Once you have performed all desired adjustments, click on Save to commit the adjustments to the image permanently. The Aviary window will now close.

In the Edit Image window, click on Save to store the Aviary adjustments. The Edit Image window will now close.

In the Content Editor window, click on the Save button to refresh the page with the newly edited version of the image.

Adding content to sidebars or footers

Until this point, all of our content additions and edits have been performed on a single page. However, it's likely that you will want to have certain blocks of content appear on multiple or all pages, such as a copyright notice in your page footer or an About the Author text snippet in the sidebar of all blog posts.

You add content to footers or sidebars using the Content Editor in much the same way as adding the page content. However, there are a few restrictions. Certain templates only allow certain types of blocks in footers or sidebars, and some templates have restrictions on positioning elements as well—for example, it's unlikely that you will be able to wrap text around an image in a sidebar due to space limitations.

If you are unable to get the system to accept an addition or repositioning move that you are trying to perform to a block in a sidebar or footer, it usually indicates that you are trying to perform something that is prohibited.

Adding or editing content in a footer

Follow these steps to add or edit content in a footer:

In the preview screen, scroll to the bottom of your page and hover over the footer area to activate the Annotations there, and click on the Edit button next to the Footer Content label, as shown in the following screenshot:

This will open the Content Editor window.

You will notice that Insert Points appear just like before, and you can click on an Insert Point to add a block, or click within an existing Text Block to edit it. You can move blocks in a footer in the same way as those in a page body.

Most templates have a footer, but not all of them do. Some templates hide the footer on certain page types, so if you can't see your footer, try looking at a standard page, or double-check whether your template offers one.

Adding or editing content in a sidebar

Not all templates have a sidebar, but if yours does, here's how you can add or edit content in your sidebar:

While in the Pages menu, navigate to a page that you know has a sidebar in your template, such as a Blog page. You should see the template's demo content preloaded into your sidebar.

Hover your mouse over the sidebar area to activate the Annotations, and click on the Edit button that appears at the top of the sidebar area.

Make sure you click on the correct Annotation. Other Annotations may be activated on the page, so don't get confused and click on anything other than the sidebar Annotations, as shown in the following screenshot:

Unlock access to the largest independent learning library in Tech for FREE!

Get unlimited access to 7500+ expert-authored eBooks and video courses covering every tech area you can think of.

Renews at €18.99/month. Cancel anytime

Once the Content Editor window opens, you can click on an Insert Point to add a block or click within an existing Text Block to edit it. You can move blocks in a sidebar in the same way as those in a page body.

Enabling a sidebar

If you do not see the sidebar, but you know that your template allows one, and you know you are on the correct page type (for example, a Blog post), then it's possible that your sidebar is not enabled. Depending on the template, you enable your sidebar in one of two ways. The first method is in the Style Editor, as follows:

First, ensure you are looking at a Blog page (or any page that can have a sidebar in your template). From the Home menu in the side panel, navigate to Design | Style Editor.

In the Style Editor menu, scroll down until you see a set of controls related to Blog Styles.

Find the control for the sidebar, and select the position you want. The following screenshot shows you an example of this:

Click on Save to commit your changes.

If you don't see the sidebar control in the Style Editor, you may find it in the Blog or Page Settings instead, as described here:

First, ensure you are looking at the Blog page (or any page that can have a sidebar in your template), and then click on the Settings button in the Annotations or the cog icon in the Pages menu to open the Settings window.

Look for a menu item called Page Layout and select the sidebar position, as shown in the following screenshot:

On smaller screens, many templates use fluid layout to stack the sidebar below the main content area instead of showing it on the left- or right-hand side. If you can't see your sidebar and are viewing the website on a tablet or another small/low-resolution screen, scroll down to the bottom of the page and you will most likely see your sidebar content there, just above the footer.

Adding links that point to web pages or files

The final type of basic content that we'll cover in this article is adding hyperlinks to your pages. You can use these links to point to external websites, other pages on your own website, or files that visitors can either view within the browser or download to their computers.

You can assign a link to any word or phrase in a Text Block, or you can assign a link to an image. You can also use a special type of block called a Button to make links really stand out and encourage users to click.

When creating links in any of these scenarios, you will be presented with three main options:

External: You can paste or type the full web address of the external website you want the link to point to. You can also choose to have this website open in a new window to allow users to keep your site open instead of navigating away entirely. The following screenshot shows the External option:

Files: You can either upload a file directly, or link to a file that you have already uploaded earlier. This screenshot shows the Files option:

Content: You can link to any page, category, or tag that you have created on your site. Linking to a category or tag will display a list of all items that have been labeled with that tag or category. Here's an example of the Content option:

Assigning a link to word(s) in a Text Block

Follow these steps to assign a link to a word or phrase in a Text Block:

Highlight the word(s), and then click on the link icon (two interlocked ovals) in the text editor menu.

Select the type of link you want to add, input the necessary settings, and then click anywhere outside the Edit Link window. This will close the Edit Link window, and you will see that the word is now a different color to indicate that the link has been applied.

Click on the Save button at the top of the page.

You can change or remove the link at any time by clicking on the word. A floating window will appear to show you what the link currently points to, along with the options to edit or remove the link. This is shown in the following screenshot:

adding-and-editing-content-your-web-pages-img-9

Assigning a link to an image

Here's how you can assign a link to an image:

Double-click on the image to open the Edit Image window.

Under Clickthrough URL, select the type of link that you want to add and input the necessary settings.

Click on Save.

Creating a Button on your page

You can create a Button on your page by following these steps:

In the Content Editor window, find the point where you want to insert the button on the page, and click on the Insert Point to open the Add Block menu.

Under the Filters & Lists category, choose Button.

Type the text that you want to show on the button, select the type of link, and select the button size and alignment you want. The following screenshot shows the Edit Button window:

This is how the button appears on the page:

adding-and-editing-content-your-web-pages-img-11

Summary

In this article, you have acquired skills you need to add and edit basic web content, and you have learned how to move things around to create finished web pages with your desired page layout.

Visit www.square-help.com/inspiration if you'd like to see some examples of different page layouts to give you ideas for making your own pages. Here, you'll see how you can use LayoutEngine to create sophisticated layouts for a range of page types.