Lesson 4: Adding Images + Copy

 

Now that the framework for your page is set, we need to place your content!

In this lesson we will: 

  1. Add an image content block

  2. Add copy in the text content block

  3. Create a title and format text

  4. Add your remaining pages under the Main Navigation

 

First things first, are you done with your copy? It doesn't need to be perfect, but you do need your copy for your pages!

Sometimes, it can be helpful to visualize what copy you need once your site is built and that's ok too. Just don't procrastinate writing your copy for too long or it will never be completed. Something is better than nothing, promise! And the point of this course is to give you the skills to go in and fix whatever you want whenever. You can always make changes later.

We also suggest referring back to your sitemaps, wire frames and mood boards when building out your pages.

 

Step 1: Add an image content block

  • Let’s add an image to your about page. Look for a nice image of yourself and know where the file location is.

    • If you don’t currently have a good photo of yourself, don’t fret. Just grab a dummy image for now. You can always replace it later (just don’t forget!)

  • Hover your mouse on the image content block and Select "Edit".

    • An additional image window will pop up.

There are a few methods you can add the image to Squarespace. Let’s review some of our options.

Method 1

  • Select “Upload an Image”.

  • Locate the image on your computer and add it.

Upload An Image.png
 

  • Under “Filename (Optional)”, rename your photo to be a descriptor of what is happening in the photo or what purpose does it serve. In this case, something along the lines of "Lucy (on the right) and Daphne (on the left) from Salt Design Co. are sat on a couch staring at a laptop and working together." would be accurate.

    • It's important to add this information here for SEO, so don't skip this part!

  • When the image has uploaded, select “Apply” in the bottom right hand corner.

Uploaded Image 1.png
 


Method 2

  • Locate the image on your computer.

  • Drag it into the “Upload an Image” area.

Drag-Image.gif
 
  • Again, just like in Method 1, it’s important to modify the “Filename (Optional)” section for SEO purposes.

    • When the image has uploaded, select “Apply” in the bottom right hand corner.

 

You might notice the little grey dot at the bottom of the content block.

  • Just like we adjusted the size of a spacer, you can use the same technique to adjust the size of the image; by dragging that little dot up or down. This will zoom the image in and out.

 
adjust-image-size.gif
 


After you’ve determined the size of the image you want, you can adjust what portion of the image is visible within the image content block.

  • Select "Edit". The additional image window should pop up. Hover your mouse over the image portion. You should see a light grey circle appear in the middle.

  • The circle can be move around the whole image, and the focus of the image inside the content block adjusts accordingly. 

 
Move-Image.gif
 

What if you want to replace the image? Select “Edit” again. In the additional image window, select the garbage can symbol and then click “Apply”.

  • Doing this will allow you to replace the image but won't delete the entire image content block from your page. 

It might be a good idea to save your page at this point!

 
 

Step 2: Add copy in the text content block

  • The other content blocks on your page are text content blocks. Let’s add the copy you wrote for your “About” page.

  • If you saved your page after adding an image, ensure you’re back in “editing mode” in Squarespace.

    • Hint: Hover your mouse on the page and beside “Page Content”, select “Edit”.

  • In the bottom text content block, add the copy for your “About” page.

    • You’ll notice a text editor pop up. You can use this section to change how you want your copy to look.

    • For now, we suggest you keep everything as is for now.

Text Editor.png
  • Don't forget to click on "Save" to keep all of your hard work.

 
 

Step 3: Create a title and format text

  • Now let’s add a heading to your page.

  • In the top text content block, add the title for your “About” page. 

  • This time, using the Text Editor, change the settings of your title from "Normal" to "Heading 1".

Heading 1.png
 
  • Don't worry if your text and headings don't look exactly how you want them right now! We'll be changing this in a future Module when we go over "Site Styles”.

    • TIP: Having extra headings to play with is great. But use them in a strategic manner. Heading 1 should only be used as the main title for your page (such as “About”, “FAQs”, “Portfolio”, etc.) as search engines count Heading 1 towards your site SEO. Having it into many places might confuse the search engines! Heading 2 and 3 can be used as subheads everywhere else on your site.

  • Your page should resemble something like this:

Final.png
 


If you still have to build out the rest of your page, repeat adding spacers, images and text content blocks . Refer back to your wireframes and mood board you created for your About page in Module 2 for guidance but feel free to experiment with this part, adding in extra spacers, trying out different headings and playing around with the layout as it’s great practice too. And don’t forget to save your page!

Now, with text and images, it will be much easier to see how the pages look (and if your design works)!

 

Step 4: Add your remaining Pages under the Main Navigation

Look at your sitemap to see what pages you have left to add to your site main menu. These will most likely be pages like your Contact page, Services, Portfolio, or similar. Go ahead and start adding them underneath the “Main Navigation”. Refer back to your wireframes, mood board and any other collateral you might find helpful.

For each page, follow the same steps that we took in the previous lessons to create a solid structure that matches your wireframes, and add content. Don't forget to pay attention to the different fonts you can use. "Normal" is used for body copy. "Heading 1" is good for banners and is used by Google as SEO data. Use "Heading 1" as the introduction or title to each page. "Heading 2" and "Heading 3" can be additional headers or sub-headers for the rest of page. Again, even if you don't like the look of these headings, don't forget we will modify them in a later module. 

This step might take some time. But once you've added the basic content to each of your pages, whether by creating your own grids or using the Starter Layouts, you'll have most of your website underway! 

(Need to go revisit a few past lessons? Head to Lesson 2 to review adding a page!)


To add content other than text, images and spacers (such as galleries, social blocks, etc.), follow the same steps of finding that particular content block and follow the directions included with each individual one.

For more on any content blocks, refer back to the Overview of Squarespace resource located in Lesson 1, Module 1