Squarespace Introduction for Programmers | Marian | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Squarespace Introduction for Programmers

teacher avatar Marian

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

22 Lessons (1h 56m)
    • 1. Introduction

      2:25
    • 2. Placement of JavaScript, LESS, CSS, HTML5

      9:40
    • 3. Building Blocks

      8:42
    • 4. Shortcut navigation on Squarespace

      1:29
    • 5. Summary Blocks

      4:19
    • 6. Page Navigation

      3:33
    • 7. JavaScript Library YUI3

      2:26
    • 8. Upload Fonts

      5:23
    • 9. JSON on Squarespace Useful data for AJAX calls

      2:39
    • 10. Squarespace Friendly Selectors Target elements Reusable and Stable selectors

      14:37
    • 11. Cover Pages - Squarespace 7.0

      4:15
    • 12. Lightbox Form

      1:06
    • 13. Squarespace Lightbox Image

      2:23
    • 14. Styling in Squarespace 7

      8:31
    • 15. Squarespace 7.1 vs 7.0

      2:36
    • 16. Password Protected Pages

      1:16
    • 17. Development Environment

      3:45
    • 18. Upload and use Files in Squarespace Download and redirect links

      3:39
    • 19. Fast Squarespace Sites Tips to Improve the speed of Squarespace sites

      9:31
    • 20. The Store - E-commerce

      11:20
    • 21. Membership site Member areas Native support

      6:45
    • 22. Developer Mode

      6:03
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

7

Students

--

Projects

About This Class

A introduction of Squarespace for people familiar with development with HTML5, CSS3 and JavaScript

Meet Your Teacher

Teacher Profile Image

Marian

Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: My name is Marianne sarco. I'm a software engineer and architect in CSS, HTML5, and JavaScript. And I worked with Squarespace for over six years. I worked on over 88 websites or develop custom sites with custom features. With the custom integrations. I've worked with developer mode of the platform. Almost course birds circle member. I've developed the plugins for fast web sites. I've developed lazy loading, worst Squarespace. I developed productivity plug-in for Squarespace, which is called base friendly selectors. I have very good technical experience with the technologies used by the platform. What am I going to talk about? In this course? Let's browse through the content, how to navigate through shortcuts. Placement of JavaScript, CSS less codes, where to place codes. Building blocks of Squarespace. You can create blocks in an ID mode. Summary blocks, page navigation. The JavaScript library on the platform UI DRI, how to upload phones. Json on Squarespace. Squarespace friendly selectors is a blogging that are developed. Cover pages, lightbox form, lightbox image, styling in Squarespace Seven. Squarespace Seven point 1 versus 7. Protected password pages. Development environment. How to upload fonts, how to upload files. And I'll do the links, links for download. Fast Squarespace site tapes, how to improve the speed of Squarespace site. The e-commerce store, the store, and membership site. Then some simple advice about developer mode. 2. Placement of JavaScript, LESS, CSS, HTML5: Hi. Today I'm going to talk about custom code, where to place custom code, CSS, JavaScript, and HTML. First, let's talk about CSS, which actually is less. And then when you load a website it is compiled CSS. So it's very useful because you can write directly less. This design custom CSS. It's very easy to find Going Home. Design custom CSS. And we can open the window and see text in a larger screen. Then we have on the settings called injection. We have the header and footer and log page, order n confirmation page. So let's now again to code injection settings. Advanced 0 injection. Here we have that say you are disappearing at our code. So from this part and this part, codeine, and here's where Peter is when you have the header. Let's see. Here is the food record. And then we have two other Lock page in order confirmation page. So we saw two places where we can add HTML. I've truly we solved where we can add HTML and CSS and all kinds of coded. We wanted that. We're not limited to CSS and less like we weren't there. And designed. Another place where we can add code is in pages, page, page either code injection, click Open. And here we have That's this back. Patriot are called interaction. It's here. It would be interested to add to call it again, CTO, header and footer are only to see where the PRC. Sewage guam is appearing first that are called injection is first, then the page header, code injection would this one is global. When you add in code injection and discoverable, it appears on all pages. But when you add into to a certain page and don't only appears that a certain page in it appears. First appears to have their code injection. The global code injection, then the patient are called injection. In another way to add code is true. A code block. Code. In here is the code. See here. Let me blow the page without a job title. Road block. Here it is. And these are the four ways which you can add custom code. Custom CSS is also global. So it appears on all pages. One way to add CSS, only, CSS, and 23 ways to add all kinds of code. Thank you for watching. Wish you a great day. Don't forget to hit the like button and subscribe to my YouTube channel. For more Squarespace videos and general, general ID stuff. Bye-bye. Have a great day. 3. Building Blocks: Building blocks. With these blocks, you create content and they are frequently used. So they appear when you are in edit mode. And the frequent one, the czar textblock v Del Image summary, summary. You can get it from blog blog pages, and I think some collections pages. Then the form, the gallery, newsletter, spacer, line, quote, button map, the code block where the JavaScript CSS if you want, or HTML, and the audio block. They appear like this. You search for the edit n where this plus button appear. This is the tags blocks that you text block I use it, they're here they are. And they're so easy to use. You just click edit the video. And one just based. It works with email as well. And the nice part is you can resize these blocks to work together. Let's add a newsletter of the block. And you see it's active. You click on it and you search for the position where the added. So we have two blocks now and we have 50, 50, 50% percent on the left, 50 percent on the right. We can add another one and have three, and this is 33 percent. 33 percent, 33 percent. Long. Can move. To look for here it is. What should we add? Let's add a spacer. It's common database outside the line. And let's add some text. In here we have all the options for the text. And here we have headlines, headings. And let's add a gallery. And you get an idea how you can use these blocks together and position them appropriately as you want. Here we have multiple designs and we see live. This can be moved. And options appear beneath it. And everything updates beautifully. And you see it didn't page. I am now a Form. Save. And this is how you can play with the building blocks. There are many and they can be used wanted to another. And you positions down you and you position them as you like it. And the cool part, the background outdoor updates as you make changes, as you saw an example. And yeah, and you practice and then you get better and you understand how to work with them. And let me resize the page to see how this changes from 150 percent. When you, many of the page smaller, 100% and mobile. But the gallery is a different part because it's on a, on its own line, a line and displays different different ways. And that's it. Thank you for watching. Hit the like button and subscribe for more videos. Have a great day. Bye-bye. 4. Shortcut navigation on Squarespace: Shortcut navigation on Squarespace using the forward slash or called the slash. This simple key opens a menu, a search bar, where you can type pages called injection custom CSS, or other parts of Squarespace m is n. You navigate so easily. So focusing on elements on the sidebar for slash. And it's so fast. Then again, pages works great. But you have to be careful. So you focus on elements on parts that are not eligible because when you precedent, that does dopamine writes the character. Thank you for watching. Please hit the like button and subscribe to the channel. Have a great day. 5. Summary Blocks: Summary blocks, a very useful tools to work with. It gathers collections from collection type pages. For example, you can get the post from the blog tab, type pages, from the gallery type pages. And these are only available in Squarespace 1700. And you can get the posts from product pages store, store. They are called stored. Let me edit that so it's more clear. And I'll show an example with all the store and see all of the 30 types. Let's first add a store. Then the blog. And we have some options. Featured only show by category or by type. But I do not have tags and categories set on the block type page. And I'm going to show metadata. Primary and second date posted, alter comments. Send Let me show date posted and author. Then let's add the last one gallery. And here we have the gallery. And each summary has their style. You saw we do not have design on blogged type pages. What we have on gallery. We can use a cursive L, a list, or a grid. I'll use a wall, but it doesn't appear here. Very clearly. Lightbox metadata, size and spacing, all kinds of settings. Let me check the options on the summary from the store. It's simple law as well, like a gallery page. And here we have options, quick view, size and spacing, rate, all kinds of useful settings. So these are the three types of summaries to on Squarespace 7.13 or Squarespace Seven 0. Thank you for watching. Have a great day. Please hit this, place it on the light button and subscribe the channel. Bye-bye. 6. Page Navigation: Navigation on Squarespace, we have primary, secondary if the template allows it and the footer navigation. Let's first work with the primary. Let me add a page. Wouldn't want need to create a new page for navigation. We can already, and let me add this one. And we can add a folder to contain multiple submissions folder. Now I see the folder. And when we hover it over it, when we see the page there. Now we have the regular link and a folder link. Let's add something to the secondary. And it appears on the right side as well here we can now add those well folders and benefit from the folder functionality. Footer navigation. And it's very simple. We have the primary navigation, secondary navigation, and the folder name, and a footer navigation. We can style the navigation by going into sine. This is on Squarespace Seven, 1000 style. And focus on the navigation. And here we have all kinds of settings. And this is how the navigation on Squarespace works. Very simple. And it has this sub menu navigation option. Thank you for watching. Please hit the like button, subscribe to the channel. Thank you for watching. Bye, bye. Have a great day. 7. JavaScript Library YUI3: Squarespace, JavaScript library, UI three, or Yahoo User Interface Library. We have the documentation in this URL. If it's not working when you draw, you just can't you can just Google IO I3 documentation. This repository, see documentation. User guides. Yeah, I was on. And it's an Aldo all those box and JavaScript library gets hold on Squarespace version 7.17. You don't need to include the script tag because it is already added. So you don't need to include it. For example, if you need basic utilities like when the DOM is ready, you can just use this code without importing jQuery only for it or for selectors. And Ajax. We have here, we have a core, denote the global object and event. Then here's Ajax and all kinds of useful functions. But I've found it. I only used by mainly these three DOM ready selectors. And when Y need to ajax call. 8. Upload Fonts: How to upload fonts on Squarespace. One needs to navigate to design custom CSS, manage custom falls, and click, Add Image or fonts. Then we select the fonts and upload them. Then we click on the area with the CSS and click on the font to get the URL. And then we'll declare the font family in order to use them. Let me show you how. So design custom CSS, scroll down, manage custom files and add fonts. Unfortunately, I'll do, I'll blow this not possible. Let me choose a few. The regular on. Let me check what I have prepared. Demi. Now that the fonts are uploaded into account, the URL. So this is irregular. This is demi, and this one is bold. Let me open the window so you can see better. Now we have the URLs. Let me get into examples, come here and copy them. Now. Need to copy the URL, Demi bold. Now we choose a name for the font-family and apply to all. And how we declare them is by font-weight. We declared on the family. When we use it in the CSS rules, who declared font-family? And a specified the font-weight. And automatically, we will Get down. So let me show you how you can change. And click Save. Now if you want. I didn't get specified by default bold. Let me change to 5 thousand. Let me check 77 works. For works. Fine works. And there you have it. You first, I'll blow them. Get the URL. Apply the URL and the font face, and then use the font-family on the elements that you want. Thank you for watching. Have a great day. Please hit the like button and subscribe to the channel. Bye bye. 9. JSON on Squarespace Useful data for AJAX calls: Hi. Today I'm gonna talk about Jason, almost Squarespace. Basically every page can be viewed in JSON format and it's produced when you work with blog pages or product pages because you receive specific information about that page. In order to view the JSON format, I use a Chrome extension tracing the view. And let's see a demo. Here we have all kinds of useful information. This is on a regular page. Let's see what we get on. Our blog page is different item on a regular page. And based on this kind of information, you can create ajax calls and use it in various ways. Now another trick is with no redirect. If you want to view a page without a control panel. So if you don't want to, if you don't want to see it, would control panel you interest and at the end of it, no more indirect. And this way, you force the load a page or in a regular with you. Thank you for watching. Don't forget to hit the like button and subscribe for more Squarespace videos and regular and general IT stuff. Thank you. Have a great day. 10. Squarespace Friendly Selectors Target elements Reusable and Stable selectors: Hi. Today I'm going to talk about friendly selectors on Squarespace. As we know, Squarespace adds unique IDs on elements and general classes of elements. But it's very hard to, to have consistent stuff targeting, from targeting. Let me show you that we open the console. Probably know what I'm talking about. So you've seen ID, ID, ID. It's obvious and promise CSS perspective. This is very hard to keep consistency on. It's, it's good for fast change if you have something simple, but if you want to maintain the same thing over and over, then you need classes. You need stable classes. You need a class that will stay the same even after I modified element and the ID is changed. That's why I've developed a plugin to have stable classes. It just adds another class on an element. Then you can reuse it and create. You can create reasonable components. It's easy to install and one can add a class to the page, to the entire page. For example, you have, you can create, you have a certain graph, certain pages, and you want to use CSS only on that page. You, you add css on that page. And then you target elements. Or if you want to reuse some stuff on multiple pages, you can categorize as page would features X or how we want to identify and you can target. You can add a class to three or four pages. So you can add one or more classes to the page, to the entire section in front of an element. To a parent element or burn parent backwards element. Let me show you how easy it is to install. Here's an example of how how it will work. Basically use the code, the code block, and you add custom HTML. And it appears like this in front of what I've spoken about, this in front of in front of subscribed form. So this form down here, we'll have subscribed for and you can reuse it on other pages. Then we have here an example, the parent of this element. We'll have article. The parent, parent element will have article and sidebar container. Let me show you how to install it. We go to installation Control Panel. And here's an advanced. But let's first add the custom CSS because it's simple. Wondrous, goes. Design custom CSS and paste. I recommend to add it at the bottom. You can first add other classes, other CSS before this click Save. Now one step for the CSS is done. And the next step is to add it to the footer. This is Squarespace Seven 0, but it's the same 1.17 settings. Advanced coal injection and footer here. Copy this. And again at the bottom. But if you have some code that lets say first, if you have some code that depends on these friendly selectors, I recommend you to add a Discord before that. So we wrote up here, if I want to add a script that the hands-on friendly selector, Let's assume you have jQuery. My selectors DO have color red. You understand what I mean? You first need to add the code that will turn the elements too friendly selectors. And then you add a coded, it bends the quota targets of those friendly selectors. Okay, now we've installed it. It's just easy to steps. You'd add in custom CSS and, and in the footer on code injection. Now it's the interesting part. You'll see how they appeared in, in a controlled manner that we will go to this file index.html. And here we have those 455 options. I've talked about page and the other four. Let's add page first. This is a little special, I prefer to add it. And code injection of a badge friendly selectors here, advanced. And here. We have two pages. Deck page nonnegative margin. You see first we target the page, and now we can add, we can add additional classes to target on different stuff. We'll click Save. Let's get the URL. And now we should see those two classes are the bottom. And here they are. Non-negative margin and tech page. And you can understand, you can scale this in many situations and you can play with CSS very well. And even if you have some JavaScript code, you can create reusable components. I've developed such components and it's very easy to multiply to reuse them. So this is the page selector. I also use the Cloud this point. And now you'll see how it appears. You click edit from the selector. Let me see the Add button. Cold. And this is the font bar. Look how it appears. So it's also useful in the control panel. You can see clearly what Let me add. And let me add a class the parent, parent to be. Now it's just save. And let's refresh. Let's see where the class have been put. Now, you see this one. Because we have elements close to each other. They're grouped into the same, the same parent. But this is no problem because this is a simple example. I can probably get a point how you can use these, these classes. And this will stay the same even when I refresh other parts of the code. So this class is stable. Then on the upper parent, we see on the parent of this element, we have on the parent, parent of where we put that code. We have the class here and also they can contain two classes, not just a single class, so it's also great. Then you can imagine how the parent, parent work. It'll be on apparent up. Let's just use it because it's fun to use them. You can use them in the same, in the same code block, but I prefer to create another one. I kind of feel it's more stable this way, but they probably would work to say. And you see they have different colors, so they're very easy to notice in Control Panel. And yeah, as I said, it's here on the on the other parent the parent parent upwards. And here we have the section. Let's also add section. So one can have different sections. It's also great for reusable. If you've played with CSS, you know how great this is avoided for this stuff, light. And that's why I developed it and I was really impressed by what you can do with it. I can place this code wherever I want, but to keep a kind of hierarchy, let me add it here. And it will add a class to the entire section, newsletter section. Let's keep, let's say type a. Type B section depends how we want to format your, your classes. And now it should appear here. And here it is B section and as well, it can contain two more. It can contain one or more classes. Thank you for watching writing this is that let me check. Yes. And if I lead some stop or change this, it will all work the same. It will keep its stability. Yeah. Lasting selectors, yes, I think I've covered all the, all the five. And this is how you can use the friendly selectors from GitHub. It's here. You can just type when it will go to squarespace friendly selectors. I think that will appear here it is on GitHub. Thank you for watching. Have a great day and hit the like button and subscribe for more Squarespace vidoes and general IT stuff. Bye-bye. Have a great day again. 11. Cover Pages - Squarespace 7.0: Cover pages. And they're only available in version 7. And they are described as being used for under construction pages, announcing a product release or collecting email addresses for visitors. I've already created the cover page. You just click here in version 7. And look for color page. You can change the layout here, multiple layouts. And you can combine them with the form. And we do an action button. Click the Action button. Sorry, there are many examples, main beautiful examples which you can use. And that does go back to the cover page of their already created to see what we can do. So branding and text. You can see where this text is being updated. And we have divided x. Then we have the media. We can use a video as well. We can check a midges action button. We can use newsletter sign-up. Form. Newsletter. I did form. And here we have to click the Action button. We can use them also for navigation. And we can navigate to Barcelona, the pages. We can present our content and navigate to that parts of the website. Let's use the buttons. And it would just save it. And they're very easy to use and very powerful. Didn't have social links. If we have social Links integrated that will be displayed. The style. It sends me to the style editor for this page, for the cover pages. And we have many options. Now, one part is that content from code injection and doesn't run here Settings Advanced, called injection is in this played on color pages. So only the cotton Dakota to add to that page, Peter's there. You can easily add custom code here, advanced in here. And this is how color pages are working in version 7. Thank you for watching. Click the like button and subscribe for more videos and glue content. Thank you. Have a great day. Bye bye. 12. Lightbox Form: How to create a light box for very easily we have this option in Squarespace. Click at it, then four. And then we go to it and scroll down and Enable Lightbox Mode and save. And here is the four. Thank you for watching. Let's click like and subscribe for more Squarespace videos. 13. Squarespace Lightbox Image: Create a lightbox image, create a data array. We find an image. And then we add images, tear. Then choose light bulbs. And we can choose one image per 0, 0, 0, but maybe we have more images. Let's say three dots. Let's do more images. Now save the view without a control panel. And here we have and we can navigate on the arrow from the keyboard. Here. Here we have the functioning, the lab books. You can use the 0 and 1 as you saw. Thank you for watching. Clicked Like button. Subscribe for more Squarespace of it is. 14. Styling in Squarespace 7: Styling inversion 700 or 800, 10.17. Let's start with the first version. The styling is true, the style editor and all the styling is in one place. Some settings on the left panel appears only if you click on a certain element and sometimes it's necessary to navigate on a certain page. Then click back on design and choose Style Editor. Then styling on style editor can be exported and imported back. This is great. When you made certain changes and you want to test something new, then you can easily import the export soy. It's great. You don't have to be a developer or a person who knows code. We only need to export the certain settings and important when you need them. So some options on are only available in certain templates. And you can test different templates to see what they are presenting and choose which are the best for you. Something valid and both 7.170 ard rich set of fonts. We have over 600, actually 600 and fonts from Google. And at 1000 from Adobe. Version 7.1 has styling. A little different. It's apart is in design in sections. We have buttons, text. I'll show you in a couple of seconds. And then we have N pages. You navigate to a certain page and sell individual sections or you style header footer. And yeah, that's kinda of it. Then we have also predefined content. When we add certain, when we add certain pages, we can add predefined content and that's very good because you can move fast. Another thing that Squarespace Seven 0.1 has animations and global way to, a way to declare animations on all elements. But there are elements who have their own animation. So that's great. You can choose different type of animation depending on the elements. So let's start with Vernon seven points, 0 and its style there. We've got design side styles. In here we have the general styles. Now notice if I click on certain element, we only see certain things. In, for example, if I want to style the blog page, I need to go on the Blackboard page. Leave it open, then go back to Design Site Styles. And if I click here, you see the blacklist. This wasn't previously. So if I wasn't on this page opens and clicked on it, I wouldn't see it. This is also valid for a quote element design side styles. And notice we have here. And now with the export, we click here and adjacent file is being exported. And then we get import it later on through the import. So we can have multiple versions of these files and it's a fun various food int, if you use good, you will see exactly what changes have been made. So I've said some things haven't changed by mistake or you don't know what has changed, you can always compare two files to get SCM. And I went ahead and I exported file. So this is the export. You see all the styles which you declare there are visible here. So it's great. Now let's move the version 7.1. And we go on design. And here we see. We have fonts, colors, animation, spacing buttons, product items, Image, blog. All the sections are kind of a grouping of settings. In here we can have different star changes. It's a new way of dealing with styles. Here already animations. You can choose which one is best for you. Same thing on both versions share the same checkout page style. But version 7.1 misses the export and import. So it can't export and the current settings and important later. And now on editing on individual sections, begin click Edit. And this is the style for the entire section. In here we have settings for the other here. So it's different in So 0100 you have all the style and very clear on the header and you see its settings. Then we have the folder. And it has also a journal setting. Goal setting is like a section. And now let me show you prefer and content. You click here. And you see all these elements. It's a nice way to create content very fast. And not bother with small actions. And you just click to say. The great thing about Squarespace. It's because it has greater than rotation. So if you want particular details about certain tanks, you can just google and look to their documentations. And it's very easy to find. 15. Squarespace 7.1 vs 7.0: Squarespace version 7.1 versus 7. And notice versions Danica, almost the same thing. This new version has a new way to start and organize content. It has new templates. The style editor was replaced with other tools. We have the same way to add global code custom JavaScript in code injection. And CSS can be added also in the same place, Edit Custom CSS. Developer mode was removed, and gallery pages and pages. It's not possible to switch between version 7 and Vernon 7.1. You need to choose the version which you want from the beginning. And to do that, you go on creating any website. This is the default view which we will see. And these new templates come with version 7.1, whichever template you choose, it will come with Vernon 7.1. If you want to choose the old version 7, you go here and click. And now you'll see all templates would colored version seven points you. This is the control panel of version 7.1. I mentioned style editor. You don't see that anymore. Here. We have a new way to style content. This is the old style editor. Now, code can be added the same way. Globally. You go and pass code injection. And this is also available in version 7.1. Then Custom CSS has also remained the same design. And custom CSS. Squarespace has an article about Vernon 7.1 and then it also has a useful video which shows the new ways of organizing continent styling. It. 16. Password Protected Pages: Pages. How to share links to Besser protected pages without the need of entering the password. You entered a website address and author ID. And the password equals the best sort of the page, simply like that, without the need of entering manually into form and the input field. Let me show you an example. So this is a password protected website. And now the password would be password, but we can use the trick. The password and is on this website is the password. So Enter. And here we are. We have axes. This is how it works. Thank you for watching. Hit the like button and please subscribe to my channel. Please subscribe to my channel. Have a great day. Bye-bye. 17. Development Environment: Hi. Today I'm going to talk about Squarespace development and environment. How to use a development environment and keep track of changes that you do in a control panel. So I'm using this structure. Does it presents to control panel? I use Git to track the changes. I use Gulp to compile Less files to CSS. And I find this very useful for large projects and maybe website belt. And everything is organized. Let me show you how this looks. So we have design file manager falls that we upload and fall in Azure. We have pages, settings, advanced code injection. And here we have our package.json for those who are familiar with no dress. We go autoprefixer, clean, CSL, Clean CSS, Go bless group rename. And we're using this the scope file. Compile global S and N independent less from pages. So if you have, if you want to develop this, if you want to develop a page, unless it's still use less, you can use this to compile. Who received this is for this and this is for the page. Contact dot dot less. And we also have a gitignore file. I used them for notes and stuff that I don't want to be committed. And yeah, and this is this is under development environment that I use to work with development stuff when I when I have some larger projects going on. Thank you for watching. Hit the like button, subscribe. And thank you for watching. Have a great day. 18. Upload and use Files in Squarespace Download and redirect links: How to upload and use files in Squarespace. Using Squarespace File Manager. First we click on a content to edit. We select a piece of text. And we look here for link. Now we choose a file. And here we have all the files that we uploaded to our website. Currently, I haven't uploaded a file. Let's do that. And now the tricky part, how to get the URL for that image. Uh, ways to click. We've selected the image. We saved it, but we haven't saved into page. So we have only the link here hasn't remained. Let me do that one more time. Click Files here, the file. And now we have a link here with the file. So, so how will that work? We can copy and paste in there. And here we have the file. Now you see we have another plank. We don't have these. The first one. So it's already racked. If you want to use this one. You just based it and enter not from study, from the URL of the website. Now, I've experienced them on Windows. When I click on this link, I will be prompted to download the file directly. So all can we avoid that or keep track? We launch the inspect method, right-click and inspect. And here we have Network tab. So now if I click, I get the URL redirect. And here's the first link, and here is a redirect. And I just have to copy, copy link, and now I have it here. And this is how we get how we upload files, how we use files, and how we can get the final URL after the redirect. I think that's all. Thank you for watching. If it was helpful, please give a like GitHub me. It helps me a lot. And why not subscribe to my channel to watch more content related to Squarespace and honor IT related stuff. Thank you. Have a great evening. Have a great day. 19. Fast Squarespace Sites Tips to Improve the speed of Squarespace sites: Hi. Today I'm going to talk about fast Squarespace sites. So moves we can make to make your websites faster. First one, when you need some custom changes, you don't necessarily need immediately to import jQuery. You can do that through our UI three or vanilla JavaScript. I've explained in another video. What I want remains it's Yahoo, yahoo user interface library. You can check on my channel, the video squarespace JavaScript library. Then you don't need to add cold on all pages. If you use certain feature for only one page or two pages, just use it on those pages. Don't add it globally. Then use images optimized for Web. Save images in optimized ways. There is a feature if you happen, there'll be Photoshop to save an image for web and their online tools to optimize web optimized images for, for web to optimize them to contain less space. Then avoid many images and videos. This is very simple. Too much. In too much images, too many images are very bad in certain contexts when you don't use lazy loading. For example, if you just use standard loading without lazy loading, taken, increase the page loading speed very easily. Same goes for videos, and especially videos without collect the start. So videos that are not loading immediately be does that start after you click are more, more, more, better? Are okay. You can handle them more easily. Rather than, for example, let me show you what I mean. For example, if we want to embed this video. So this is the bad way of important of adding videos on website because you load the entire video with code alone. An entire iframe were to be due. And when you reach, when we reach 23 or more videos, the speed is very obviously affected. So instead of embedding, be just like that, you can use the calorie block. Actually, I don't know. Actually it's the same momentum used the veto block, but you choose custom thumbnail. And now the video is not loaded. Until we click on the image. You see here it is. This is their presentation. Let me does not loaded, but it will load cyclic this Squarespace JavaScript. So this is a way of adding videos that doesn't affect the loading speed that much. Now you can imagine if we have 10, 20 IDs, they're still images and they also affect the loading speed. Then if we have custom code. Now we saw how using redoes that star, Dr. Glidden. And now let's move to inline CSS. If you use a constant Squarespace side and you have your custom menu, you can add inline CSS, also called as critical CSS. To display a fast the structure of the menu and maybe the structure of the below content. And swipe. This way the user sees some ground and immediately then lazy loading. This is a costly feature which will require custom code. But it's worth it in my opinion, because you say all that data with images not being loaded, not being loaded when they're not visible. Basically what lazy loading does, it prevents images from loading until you reach, until you reach them with your scroll. When they appear in your viewport or one day or close to appear in the viewport there start loading. So these are at this point, some tips that I found useful when dealing with Squarespace sides. I also can talk about something about iframes on, in, in this section would avoid images and videos. I can also include avoid many images for items on pages. Because I friends like we saw, it was also under category would embed. So you can use iframes for YouTube videos and honor embedded content. And this are these iframes can also be lazy loading that soon could a good news. Thank you for watching. I wish you a great day. Please hit the like button. You can post a comment and you can subscribe to the channel to watch you under. You do other Squarespace videos and other stuff. By y. 20. The Store - E-commerce: To store e-commerce on Squarespace. I'll just start a simple store. I've copied some of the descriptions from Squarespace information pages because they are very useful. And I've created a summary of the services. So Squarespace says that they offer a set of features for selling products. You can sell four types of products, physical digital service and GIF car. A payment processor you can connect to process card transactions and can accept PayPal. Let me review this. By connecting a payment processor, you can process credit card transaction, accept PayPal, issue refunds, and receive donations. You can connect stripe, PayPal or both. Then choosing which processor to use for online store depends on a few factors where you're located. Yeah, because they're only available in certain countries. And which bam, payment methods you want to offer. You can use squares of payment processor four squares, space point of sale into commerce app or enable Afterpay and buy now, pay later servers forth for customers. And other pages. You can add custom code. You can customize a little. The checkout page. And commerce and payment processors are premium premium feature available only in business and commerce plans. And inside wood member member areas will present you a simple store that I've created. You just click on new page, select the store. I've already created one and I appended the product. So this is how it looks. Here are your products. Here's the product. Here's how you add them. You can choose from for those four options that I've mentioned. I've created the physical and this is how you can customize it. You got add images to the product pricing organization. You can add it in categories. You can add tags. You can check if it's featured or not. Seo, social share and some customizations you cannot custom forums related products, cost and bottom, social accounts and additional info. And this is how the store would look like with the problem product. At a car. Share social sharing buttons. And the price. The breadcrumbs. Add the card. And you see it. And on the top right side of the page, and you click on card, you see what do you have added to the cart? You go to the checkout page and complete the information necessary for the payments. Now squarespace has some very useful information about getting started with their getting started with their e-commerce. I've already opened those pages up. Paying. They have dissections. Start a trial. Create your store style, your store pages, page, customize, checkout, customize, customer e-mail notifications, market your product, measure results, selling, person point of sale, enhance your store and more help. Then we have another useful information connecting a payment processor to commerce. In here also we have a summary of the sections. And you can navigate through these informations to understand how to use their e-commerce feature. You have of it useful video. Payment processors in commerce are separate from any other payment processors you have connected the Squarespace, such as in scheduling, to activate Squarespace commerce and start accepting payments. Connect the payment processor from the home menu and click commerce. Then click payments. You can connect stripe, PayPal for square. After you can make the payment processor, customers will see its payment options at checkout. Connecting stripe. Let's customers pay with their debit and credit card without creating or logging into an account. Stripe accepts payments from Visa, MasterCard, American Express, and Discover. You can also accept Apple Pay from customers checking out on a supported device. After connecting your Stripe account, you'll receive a confirmation e-mail from Squarespace. The payment section of your checkout page will look like this. Connecting a PayPal business account. Let's customers checkout using their PayPal or Venmo accounts. After connecting your store to a PayPal account, you'll receive a confirmation e-mail from Squarespace. Customers can click pay with PayPal to login to their PayPal account and complete the purchase. Customers on mobile devices will also see the option to check out with Venmo. Connect both Stripe and PayPal to support the widest range of payment methods. Paypal is popular internationally, while stripe, Let's customers pay with debit and credit cards without creating or logging into an account. By offering both, you support customers checking out with their preferred payment method. Keep in mind that connect Stripe and PayPal, your country must be supported by both payment processors. The available currencies depend on the location of the BankAccount and connected to your Stripe account. It's not possible to select more than one currency. With Squarespace point of sale, you can use square to process in-person cash and card payments that integrate with your online store. You'll set up this integration in the Squarespace commerce and add stripe, PayPal and Square, all charged processing fees. If you have any questions about each services fees, please contact them for further information. You can add tax rules for the countries where you ship products. To do this in the home menu, click commerce, and then click taxes. Click add country, and select the country from the drop-down menu. If you're required to charge a tax on shipping in this country, type the tax name and tax rate for that country. You can check charge tax on shipping, required to charge tax on service products. You can check charge tax on services. And click Save to publish your changes. If you're creating tax rules for the United States or Canada, you can add state or province tax rules. Hover over the country and click Add state or add province. Choose a state or province from the drop-down menu, entered the sales tax rate, and then click Save. Local tax rules can apply to a single zip code or a range of zip codes in one state. So you can set tax rules compliant with various tax laws within one area. To do this, hover over the state, you added and click Add Local to add a tax rule for a single zip code. Like single zip code. Add the zip code and tax rate, and then click Save. To add tax rules for a region or a range of zip codes. Click range of zip codes. And at the start and end zip codes and the tax rate for that region. And click Save. You can edit or remove a tax rule by clicking the rule and the taxes panel. Keep in mind, removing a country tax rule removes all state and local tax rules that apply to it. Also removing a state tax rule removes all local tax rules for the state. With tax inclusive pricing, customers pay a products listed price at checkout instead of paying the listed price plus sales tax. To enable this, from the taxes menu, check taxes included in product prices. After setting up your rules, the tax applied to an order will display a checkout after a customer enters their address. The taxes based on the shipping address for fiscal product purchases and the billing address listed in the payment section for digital and service products. Unless a physical product is purchased at the same time. Please let us know if you have any further questions. We're always here to help. A very useful video. I'll show you how de Commerce looks like here. In the commerce. Here we have orders, inventory, customers discounts, point of sale, point out the land, product status, waiting lists related products. Here we have all the products. But we can have multiple store pages. You have settings for the store. You can add custom code as in regular pages. And this is my simple introduction to e-commerce on Squarespace. I hope you enjoyed it. Hit the like button if you liked it. Subscribe for more videos and have a great day. Thank you for watching. Bye-bye. 21. Membership site Member areas Native support: Hi, hi. Today I'm going to talk about Squarespace membership site, also called member's area. Finally, to officially, officially supported by Squarespace, you can have membership features offered by Squarespace. A new place for pages to appear, basically a new menu appears. This is how a member's area appears up throughout dividend. And this is one member area. You can have up to ten. If I'm not mistaking. Yes, ten. And you can activated by going to settings, member areas, and here you click on activation. So we have that new place for pages to beer. And that place is only accessible after you login up through sign up with your account. So basically the pages are available only for members and login area is added manually. I'll show you what I mean by this is just a Code Block member sign-up. This is how it appears. And you choose the member areas. I have only one on this. And this is how it appears. And you can click Apply. I'm already added this. And you can check with JavaScript. If a person is logged in, you can call it, can make an ajax call on a page and see the type of result that appears if certain type of contact of content appears at this low. And then if, if it doesn't, it's not logged in. Now, squarespace has some guides for getting started that show the spinner. You can create member only pages on your site. Member areas. Whether you're a fitness educator looking to group classes by level an independent publications seeking to paywall your articles or a running club that wants to privately share your schedule and routes. Remember, areas was built to support a wide range of use cases. With this add-on subscription, you can monetize your content, grow your audience, can seamlessly manage your public and member pages all in one place. To enable member areas, select Settings, and then member areas. This will allow you to create a new member area, manage existing members, and configure your member navigation. Remember area will act like a navigation section on your site that is only accessible to eligible members. You can monetize these collections with recurring or onetime fees or enable free access. From here you can set up email campaigns to send out newsletters to your existing members and take those connections a step further. Please let us know if you have any other questions. We're always here to help see the payments. I've forgotten about this can be recurring. Or one time. You click on a fee, amount, recurring or free. Now the pricing, they have three plans. The starter number of members, one, core has three member areas, and the Pro has seven n. That transaction fee gets slower when you upgrade it. Parole. They have an example of of membership site. You can login. If you don't have lonely and you can create an account. This is probably integrated with the e-commerce login feature. I've read something about it. So it's integrated with e-commerce feature and you get those kind of accounts and sign up here we have the multiple plans, the one for free, for a month in one time payment. You can experiment other features. I taught this arrow key points which I saw and which stood up by me, stood up to me. And yeah, I think that's all what I can say for now about member, membership pages. Maybe after a star more experimenting with them, I can degrade the second video and you can check it afterwards. On searching for your feedback, I wanted to see what you think about this video. Hit the like button. Please subscribe for more Squarespace videos. And probably I'll create a membership store with this feature for my, for my skirt base videos, they are currently printing, but they will become accessible through purchase a plan, probably $50. Watch all my videos. Thank you for watching. Have a great day. Bye bye. 22. Developer Mode: Developer mode on Squarespace, it's used for a certain type of advanced changes. After you activate it, you have access to some back-end code, mainly for templating. I've thing that documentation can be much, much better and richer. You can access the backend files to get. Or SFTP. And Git commits are used for updates on the public site. After you activate developer mode, updates on squares per, we'll stop on the template. So I have full control without updates from Squarespace. You can choose a template and go in developer mode, or you can start from scratch. You can use developer mode on existing templates and see how how they've added code. You will not be able to switch templates. And Jason, Jason template is the templating language used Squarespace. So you will work with that when you want to work with developer mode. They offer a local development server to which you can open the website locally, on a local host and see the changes before you push them. And I've added a link to the Quickstart of their documentation. You have informations when you enable auto connect with good with SFTP. Admission, how you activate it. You'll go into Settings, advanced and developer mode. After you activated, it's by default on active, inactive. After your activated. You perceive these usernames. You clone the repository if you use good. And this is only available on Squarespace Seven 0. So let me update this information. So templates from 7 are available. I've already cloned the repository. And this is how it looks like. It looks like that mirror. Check that. Here it is. This is how it looks. Inside that region is like the main file. You can see the JavaScript files, some JavaScript templating stuff. And I have these Fall template dot config sided region you saw it blocks collections, scripts, and styles. Here we have informations. They start with the basics. Template files, template language, Squarespace tags, JavaScript Advanced. Here's the local development that I'm talking about. Install the server, clone, the repository and started development server with it. But I think they could have done a much better job with we did tutorials. They can contain much more rich information about the development because it's a powerful tool. You can start it from scratch and develop custom templates like really from scratch. Or even when you edit a 100 templates, they could describe. They can, they can add much more information balls and adjacent teeth. And how they use their features. Like from a few years ago is the same documentation and but they haven't implemented developer mode in 7.1, so I'm not sure how they was the future for developer mode. Are they going to continue with some fire song or something like that to allow us much more vast changes on the backend. Or they stick to their user interface and make changes from there. Thank you for watching. I hope you enjoyed it. Hit the like button if you have subscribed more videos and have a great day, bye-bye.