How to edit text & change images on your website

A quick walk-through on how to make updates to the content of your Squarespace 7.1 website!

this video covers:

editing text
Adding/removing photos
Adding videos
Updating buttons
Adding links to text

For more information, PLEASE see this documentation from Squarespace.

VIDEO TRANSCRIPT

 Squarespace 7. 1 Fluid Engine makes it really easy to update all of the content on your site, and this video is going to show you exactly how to add new copywriting and new photos to your site, and how you can use the drag and drop design features to change layouts really quickly and easily.

Let's jump in!

 One of the things I love about Squarespace is how intuitive and easy they make it to change photos and text as well. So I'll go ahead and show you how to do that right now. We'll go into edit. And click on any of the text in any of our sections that we want to change. So you'll notice every time we hover, there is this little text box that pops up.

So it really just is as simple as clicking into one of it and then just typing away.

If you want to add a new text box, you'll simply go into add block and add text. Then we can type whatever we want. And you'll want to select the text style. So we have headings and then our paragraphs as well. Your paragraphs will automatically default to paragraph 2, so I recommend using this as your base side for all of your body copy. then paragraph 1s and heading 4s I usually recommend for subheading text like this.

Just to show you what this looks like when it's nice and big and legible, we have heading 1.

You can also change your font weights, you can make your font italic, and then of course we can change colors. There is a function as well, if you want to make some really nice big text, you can actually have it span the entire length of your container by pressing this button. So now we have huge text, which can be fun to play around with.

You also have the option of adding fun little animations and text features with this button here. So you can add a traditional underline, but you can also do this fun like hand drawn looking underline, double lines, all kinds of fun things. And you can play around with changing the color of that.

And we can also change the thickness as well, making it super thick or thin. There's a lot of fun different options. You can also select an animation option so that when people scroll, it will animate. It won't continuously animate, but as they scroll down the page the first time they see it, it'll have that fun animation feature.

If you end up changing your mind and you don't want it anymore, you can simply click Remove.

We also have the ability to change the sizes of our boxes. For example, for this body font, we can make the paragraph wider or shorter to fit our needs and the styles of the site.

If we'd like to add links to any of our text, you'll simply just highlight whatever text it is that you want to create a link for. And then just press this link button, and we can link it anywhere externally by just copy pasting the link here, or we can link to an internal page. So if you click this, we can link an email, this is where we type our regular web address, and you can have it open in a new window, and then we can link to a page within our website as well.

So we can have this go to our about page, for example. Then you'll just click save, and remember to click apply, and now we'll see a link has been added there.

To change images, it'll actually be just as easy. So you'll click on an image, you'll click the edit button that pops up, and then you can either replace the image and upload a new one, or you can remove the image entirely if you don't want that image block anymore. Once we've removed the image, you'll just want to make sure that you click back into it and press the remove button to remove the block entirely.

Otherwise, there will just be an empty blank space that shows up there still.

Squarespace also has a bunch of fun stock footage options. So you can actually go in and browse stock images directly from Squarespace. They're all free images, and then you can also shop for premium images that you can pay for as well. So if you do need some stock images to help you fill in the gaps, You can actually search specific themes, so let's see if I can pull up coffee related images.

And here's a bunch of fun, cool, free stock images that you can use. So keep that in mind as well if you don't have a ton of photos that you're ready to use yet.

If we want to add a link to our image, we can simply click Link on Image, and do the same process as we did for adding links to our text. I would recommend selecting Open in a New Window for our links that we're adding, just to make sure that we're keeping people on our website as much as possible.

I do also recommend adding an image alt text because that is going to be awesome for accessibility and , it can be helpful for SEO, which I cover in a different lesson.

Same thing for your filename. If you haven't already optimized your filename before uploading, you can change your filename here and include some SEO keywords. For design functionalities, you're going to want to play around with fit and fill options. So you'll see when I select fit, the image changes, and fill, it's going to fill the entirety of the container.

I recommend using the fill option when you have these images that are bleeding off of the page, or, if you have images that you've added borders to.

It is important to note that when you select the fill option, it is going to change the aspect ratio of your image, so you'll see whenever we move this around, the overall image that we've uploaded is going to change, and you're only going to see what's available based on the size of the container that we're setting.

If you want to maintain the integrity of your image and you don't want it to be automatically cropped, you can always just select the fit option and then even when we change our image size, you're going to be able to see the entirety of the image no matter what size we make it.

If, for example, you want to have an image that bleeds off the screen, you can do that and still have it maintain the shape of the image, but just keep in mind as you expand it, it is going to pull it away from the edge.

So again, I do recommend if you have images that are going to be bleeding off screen to change it to the fill option. There are also options to play around with shapes, so you can create circles, or other fun, whimsical shapes to play around with.

You can also make your shape stretch to fit the container so that you can decide exactly how large you want it to be. For example, if I want this to expand the entire width of the section, I go ahead and hit stretch, and now it's a nice big oval.

You can also add image effects. So this is fun for adding fun little animations, some filmgrain effects, and parallax scrolling options as you scroll the page. So play around with those as you add images and see if there's anything that you like that works for your brand.

There is also the option to add overlays. So let's say, for example, we want there to be a pale overlay on top of this. We can add white and then just bring it down to a place we're comfy with and have it be nice and soft.

To change our button links, it's pretty much the same as changing our text links. You're going to click on the button, and then just click edit.

You can change the text here, and then you can also add a link, both internally to a page, and externally as well. A shortcut to adding links within your site is to just type the forward slash, and then all of your available pages to link to will pop up, so you can simply select it, and it's easy as that.

You can also change your button styles. So let's say for example, instead of this being set to our primary button and the styles we've assigned to it, we want it to be a solid button. We can change it right there.

And if we want to change our overall button styles across the site, we can do so through our site styles panel.

So to change the button styles across the site, we'll go into our site styles, we'll go to buttons, and then we can change each of our individual buttons, primary, secondary, and tertiary.

We can change our text style in the same way that we've changed our fonts for everything else across our site, so all of those options are here. If you know that you want all of your buttons to be capitalized, which I typically recommend it's a good design feature, you can always change your text transform to be uppercase, and that way, even if you're typing in lowercase for your buttons, when you're adding your links, it'll go ahead and automatically uppercase everything for you.

Your shape is going to be what determines your overall button style. So we have fill options and no fill options. Our fill options give us all of these individual shapes. And you can actually customize the corners for these as well. So let's say I want this to be a little bit more rounded, we can actually go in here and change it.

Let's see what happens if we change it to 10. Yeah, that looks nice and round. Or maybe even 20. Now that's even more. So you can play around and get a look that you really like.

Then we have our no fill options. So these are going to be the same shapes, but they're going to be hollow instead of having a fill color.

We can change the outline thickness. We can also remove the outline entirely, so it looks nice and clean, but then we still have a hover effect.

And then you can change the padding, both vertically and horizontally.

The shapes of our buttons and the blocks are similar to images in that you can choose fit versus fill options. So I can customize the button length and make it super long, for example, or super compact as much as our padding settings will allow us. But if I change it from fill to fit, our button will actually stay the same no matter how large we make the block.

So for example, if we move this back down to fill, now we'll see that the button expands to however many square blocks we assign it to. Back down to fit. And it's going to stick at the same padding that we've assigned it on our site styles.

So take some time to play around with your buttons and figure out a style that you like.

In addition to photos, Squarespace also lets you upload up to 30 minutes of video that you can embed directly into your site. So the way that we do this is the same as adding an image block. So we'll go to add block, but instead of pressing add image, we'll actually just go to add video.

And now you'll see we have a video functionality.

It is important to note that the video aspect ratio is going to be static. You can't really mess around with it too much, the video that you're uploading will stay stuck in this dimension. So keep that in mind when you're uploading videos.

Some of my templates have custom imagery built in, so for details on how to change those specific blocks, please see your template specific tutorial videos for instructions on edits.