Lesson 1: Using Squarespace Editor

00:00:01:01 - 00:00:25:28 In this video, we're going to take a look at editing the site header and footer. To edit the site header on any page, hit edit and then choose edit site header by hovering over the site header. Under our global settings, you can adjust the site title and logo. Your site title will be distinguished when you first create your site, but if you need to change it, this is where you can do that.

00:00:26:10 - 00:01:06:04 The site title will also showcase in the browser tab if you like to upload a logo image. Choose this plus button. You can upload a file from your computer and the logo will be added if you need to adjust the height. You can do that here and you can also adjust the mobile logo max height. In this view, you will not see the mobile logo max height changing to see that, you'll need to choose this mobile view choose edit site header and then go back and make your adjustments here.

00:01:06:17 - 00:01:28:00 Let's go back to the desktop view. Our last option under site title and logo is to update the mobile logo image. If you want your mobile logo image to be different than your desktop logo image, simply add a mobile logo here. Next, let's take a look at the elements of our header. Here we see the button option for our site header.

00:01:28:20 - 00:01:54:05 Unknown You can toggle this on or off to turn on or off the button. You'll get the information of what the button will say, as well as where the button should be linked to. Here, you also have the option to turn on your social media links to be viewed in your site header. To edit these links, click into edit social links and you can update your social media links by simply clicking on them and changing your URL.

00:01:55:04 - 00:02:19:12 You can change the sizing of your social icons by adjusting the slider if you are choosing to showcase your website in multiple languages. You can turn on the language switch. In order for this to showcase your site must be multilingual and you can set up those translations in the language and region setting. The last element that we can view within the site header is our cart.

00:02:20:01 - 00:02:44:12 If you're selling products on your site and you would like for the user to view their cart and how many items are in that cart, simply turn this on. Now we see options for the style icon size folder and number in cart. Next, let's take a look at the style settings for our site header. We have the options between solid gradient theme and dynamic.

00:02:45:14 - 00:03:20:23 Unknown A solid border will showcase a solid color. You have the ability to adjust the opacity, the background color, and these can be chosen from your palette or a custom color. You can change the navigation color here. You can choose to have the background blurred. This is only available on browsers that support backdrop filters. Our next option is the border, which we can turn on and we can adjust our color, thickness and position.

00:03:21:01 - 00:03:47:19 Unknown And lastly, under solid, we can add a drop shadow. The settings to adjust the look of that drop shadow are here. Our next style option is gradient similar to solid. You have options to change the way it looks here as well. Next, let's take a look at theme. A theme styled header will be based on the themes from the color palettes that you have chosen for your site styles.

00:03:48:07 - 00:04:17:22 Simply just select a theme and your header will adjust accordingly. Our last option is dynamic with this option. Dynamic headers will use the theme of the first section of the page. To see the theme of the first section of the page, you'll click out of site headers. Choose Edit section of the first section. Choose colors. And you can see the theme here.

00:04:19:03 - 00:04:42:07 Our last option under global is fixed position. If you would like your header to have a fixed position and always display as a user scrolling through the page, you can choose to have the basic style. If you choose, scroll back. A user will see the header when they scroll up on a page. Now let's take a look at the desktop options that we have for our site.

00:04:42:08 - 00:05:13:15 header. Under header layout, we can adjust the placement of the elements on the side header. Our width of our site header can be adjusted to inset or full. With our final options, you can adjust the vertical padding of your site header, your element spacing as well as your link spacing. Under the mobile options, the view of the site will switch to the mobile view.

00:05:14:06 - 00:05:35:13 We can adjust the header layout specifically for mobile and update our overlay menu. You can update your alignment, the link spacing as well as the colors of the overlay menu. These colors are based on your site themes. Once you have major changes to your site header, be sure to save.

00:05:37:25 - 00:06:08:11 Now let's take a look at editing the footer of your pages. Let's go to edit and then scroll down to the bottom of our page. We’ll choose edit footer. And keep in mind your footer is going to show the same on every page of your website. The footer acts just like a page section so you can add blocks, update your text as well as add any social links and update our rows just like you would within a section.

00:06:09:05 - 00:06:45:13 We do have templated sections for our footer, so if you choose add section, you'll see the different templates for our footer. We can simply choose the template and we can choose to delete this section and now we will utilize the section as our footer. Feel free to add any content as needed. We can also make adjustments to our colors, just like we do in our sections.

00:06:46:14 - 00:06:51:04 Once you have updated your footer, be sure to save.