How To See Which Sqyuarespace Template Someone Is Using

Squarespace is one of the fastest-growing and one of the best website builders in the industry.

Information technology's easy to apply and powerful enough so that it can serve both simple and more advanced types of websites, such as online stores.

We'll show y'all how to use Squarespace for creating a functional and beautiful website that your visitors will love.

The tutorial includes sections on picking a template (design), how to customize your site, how to create content pages, and even how to build an online store with Squarespace's commerce module.

Let's become started!

Tabular array of Contents

Signing up with Squarespace
Choosing a design
Setting the chief website details
Customizing logos, fonts, and colors
Customizing the homepage
Optimizing your site for mobile
Creating sub-pages
Customizing the main card
Launching a blog
Launching an eCommerce store
Understanding the master Squarespace dashboard
Extending your Squarespace website
Launching your Squarespace site to the public
Video Tutorial

i) Go to Squarespace.com And Get Started

Getting your Squarespace run a risk started is very straightforward.

Visit the main page at Squarespace.com and click on the Become Started button in the top right corner.

This will take y'all straight to the design screen.

2) Choose a Website Design

Squarespace has some modernistic and beautiful website templates that you can choose from. In that location are no designs paid extra – every template is included in your standard Squarespace membership.

Y'all'll notice that Squarespace has its template itemize neatly organized past the niche/purpose of the website.

Looking through the list of popular designs is a great starting point – those designs are popular for a reason. And, of course, if you see your niche on the listing in the sidebar, make sure to look through those designs also.

Ane note; if you're going to exist building an online store, check out the Online Stores category of templates. Those are the templates that take been optimized specifically to work for eCommerce.

Earlier committing to any template, y'all can preview what it's going to look like with some demo content. For that, hover your mouse over the template to see the preview link.

One time you've found your perfect website design, click on start with this design to have it imported to your site.

At this stage, Squarespace will inquire you to create an account. You tin can sign up using Gmail, Apple, or another email.

3) Enter the Main Website Details

From this point on, Squarespace will accept you past the paw through the unabridged process of having your website created.

The commencement stride is to enter your website title. Once you do that, Squarespace will show you how to handle the well-nigh of import tasks effectually your site, such as editing pages, creating new ones, and styling them.

4) Customize Your Logos, Fonts, and Colors

This is usually the first step on your path to making the site truly yours.

Notation: don't listen the demo images and texts that yous can see on your site at this stage. You'll be able to change them later on.

Adding your logo is quite straightforward – simply upload the logo file and see information technology appear on the canvas immediately.

If you don't have a logo however, Squarespace will help you lot become one created in no time. There'south actually a separate Squarespace logo maker tool. It has a basic set of editing features, plus some stock icons that you can add to your logo.

You can salve your logo from that tool and so upload it to the main Squarespace website editor. (Alternatively, you can besides use any of these logo maker tools.)

Every bit before long equally you upload the logo, you lot'll see it on the canvas.

Click on Next to proceed to fonts.

Customizing the website fonts is even easier than adding a logo. Instead of giving you an endless list of individual fonts, Squarespace shows specific font pairings that are guaranteed to go well together.

All you accept to practice is make up one's mind whether you lot desire to become with sans-serif, serif, or mixed fonts.

Every bit shortly every bit you click on any font pairing, you'll see information technology in the preview department. You tin can too accommodate the base font size (the standard size of all paragraphs of text). Changing this size will have an touch on all the other texts on your site, such every bit headings – since those are traditionally scaled-upwards versions of the base of operations size.

Once yous've establish your perfect font pairing, click on Next to continue to colors.

In terms of simplicity, colour settings are similar to font settings. Instead of having to pick your colors individually ane by one, you can cull from a set of designer palettes. In short, a color palette is a prepare of colors that lucifer. Using a palette put together by a professional designer is an fantabulous shortcut to guaranteeing that everything will fit.

You lot'll observe that Squarespace presents its palettes as groupings of three colors. You can think of these colors as:

The primary color (for links, buttons, other elements that stand up out on the folio)
The background-color
The secondary color (secondary backgrounds, links, etc.)

As with everything else so far, select the colour palette that looks the best for what your needs are. Alternatively, if you're feeling super confident, you tin can put together a custom palette.

Click on Done to finalize this part of the website setup.

Y'all'll see your logo, fonts, and color selections added to the site.

5) Customize Your Homepage

Now is a good moment to customize your homepage and supplant the demo content with your own. To brainstorm, click on the Edit button that'due south in the top bar of the canvas.

You lot will be taken to a visual website editor where y'all can alter whatever element that'due south currently on the page, delete elements, and also add together new ones.

Here are the basics of working with this builder tool:

Looking Through the Available Options

Squarespace divides all content on your pages into separate rows. Hither's an case homepage design:

From the top:

The card row,
The hero section row (with the prototype and the headline on peak),
The text department row (starting with "We conserve…").

Each of these rows has different options and customizations available. To see what you tin can do, simply hover your mouse over whatever chemical element on the page, and see what options pop up.

For example, when you hover over the card bar, you'll run across a button inviting you to edit the contents of the bar.

Clicking on this push volition testify a range of options, such as changing the layout of the header, replacing the logo, adding actress elements, and more.

In a like fashion, you can hover over any other chemical element to run across the options available.

Farther, to edit any text that's on the page, just click into information technology. A simple text editing section volition appear. Here'due south what happens when we click into the current headline:

What's cool about this interface is that you don't have to be looking for any "save" button anywhere. Any text you lot add/edit will be saved automatically.

Here'due south what else you tin can exercise within this interface:

Deleting Elements

Any individual element or even a whole row tin exist removed from the page easily.

Hover your mouse over the thing that you desire to delete and click on the trash can icon.

Accessing Option Panels of Elements

Most elements that are part of your website pattern come with their own options panels.

To access 1 of those panels, click on the pencil icon that's usually in the upper right corner of the element in question. Here it is for the main hero section on our homepage:

Clicking on that icon will reveal a fix of additional options for the hero section.

Every element has a slightly unlike set of options, just you can generally await to run across adjustments for formatting, backgrounds, colors, alignment, and more.

As well, it'southward not only sections/rows that take their options, but some private elements have their own options besides. For example, if you click on a pencil icon next to an image cake, you'll meet this:

We encourage you to experiment with these settings, click effectually, and see the effect this has on your design.

Realigning the Sections

Squarespace lets you drag around individual elements and drop them into some other identify.

You take full liberty as to what chemical element y'all want to grab onto and where you want to put it.

Additionally, to make moving sections up and down a bit simpler, you tin accept reward of the arrow buttons that you tin see in the elevation right corner of any given row:

When yous click on either of them, you'll meet your department switching places in real-fourth dimension.

Adding New Sections

Apart from working on the sections that are already in your design, you'll besides desire to add together new sections to conform whatever content you desire to include on your pages.

To add a section, click on whatever of the "+" buttons you can meet throughout the page.

These plus buttons come earlier and after every content section. This makes adding new content quite easy. Simply pick the spot where you desire your new section and click on the corresponding "+" button.

One time you practise that, you'll see a new window where you can pick from Squarespace'due south vast library of content sections and elements. Everything is grouped into categories, so you tin quickly notice any type of section you need.

There are standard content sections for things like headlines, galleries, images, quotes, blocks of text, but likewise more specialized ones for appointments, donation info, newsletters, reservations, FAQs, pricing blocks, eating house menus, and more.

In one case you've constitute a section you similar, click on information technology to have it imported to your page.

To brand customizing the new department easier, Squarespace fills it with some demo content. For example, if we add together a menu for our fictional eatery, there are going to be some example dishes in it already.

Now all yous have to exercise is replace this demo content with your own. The process is the same for any other type of department you might want to add to the page.

Adding Images and Other Visual Elements

Images, videos, and other visuals are some of the most important content types on most websites nowadays. Squarespace is ready to handle them and lets you add any kind of media y'all might need on your website.

As nosotros've covered above, to add new content to your site, you lot're going to do information technology by clicking on the "+" push adjacent to where you want to place that content. Then, pick a specific content type from the catalog – in this case, an image or a video.

Squarespace has templates for paradigm gallery blocks, unmarried images, single videos, music, and even charts. For example, if you click on Images, y'all'll encounter a choice of dissimilar layouts for effective epitome presentation.

Clicking on any of them volition add an example image to your page. You tin naturally replace these demo images with your own. To do so, click on the pencil icon next to the image y'all want to replace, and so on the trash tin icon.

You'll see the epitome clear and a new section appear, indicating that you can upload an original image.

At this stage, you lot can simply pick an image from your reckoner and take it imported.

This is not where the functionality ends. Squarespace also has some pro tools that allow y'all to edit your paradigm and change some of its parameters. Click on the Paradigm Editor button to begin. Here'southward what you lot'll run into:

Some of the actions you tin perform include:

Setting the brightness of the image, contrast, saturation, blur, etc.
Cropping
Flipping the paradigm
Changing the aspect ratio
Adding filters

About that last thing, yes, Squarespace has Instagram-like filters that yous can apply to any of your images!

When you lot're done with basic image editing, you can switch to the Design tab of the paradigm options popup. This is where you can change the style of the prototype block, enable a lightbox, or add together a custom link to the image.

There'due south also the final tab – Animations – which lets yous ready the image to not just sit there but appear with a fade-in, tilt-up, tilt-down, plus a couple of other cool effects.

Overall, Squarespace is rather impressive when it comes to the number of tweaks it lets you exercise to your images. For simpler applications, you tin become abroad with using just Squarespace for image editing and forget about more advanced tools like Photoshop.

Calculation other types of visual content works but like calculation images. For example, to add together a video, kickoff, click on the "+" icon side by side to where you want to identify it. Then, selection a video block from the listing. Lastly, replace the demo video with your own.

6) See Your Pattern on Mobile

Well-nigh users don't recall about mobile too much when working on their websites. All the same, as it turns out, mobile traffic is snowballing – it went upward more than 200% in the last vii years. Moreover, casual users are more probable to visit your website from a mobile device than from a desktop or laptop.

Getting a website optimized for mobile used to be a hurting.

Back in the day (and with some website tools fifty-fifty today), the just way to make a site work on mobile was to write device-specific lawmaking by manus. Not only that, but y'all also had to account for all kinds of different screen sizes and device types.

Luckily, this is non a problem with Squarespace at all. With some clever machinery, Squarespace is able to predict what the best mobile layout for your website blueprint will exist and then serves it to your mobile visitors automatically. In other words, you don't have to worry well-nigh mobile at all if you're building your site with Squarespace.

What you tin cheque out, notwithstanding, is the mobile preview of your site. You can access information technology past clicking on the mobile phone icon that's in the top correct corner of the Squarespace interface.

Squarespace doesn't merely narrow down the viewport by squishing your content together but also realigns your columns and then that they render in the correct guild on mobile. Information technology too makes certain that all your custom elements such as forms, reservation and appointment blocks, etc., office correctly for your mobile visitors.

7) Create Sub-Pages

Well-nigh users will want to build more pages than just the homepage. Here are some examples of sub-pages that you tin brand employ of:

Virtually page and/or Team folio
Contact page
Privacy Policy and Terms of Service

To add a new page, go back to the chief Squarespace dashboard, and click on Pages.

Next, click on the "+" button.

You'll be able to pick from a blank page template, ane of the pre-designed page layouts, or add a page that'southward actually a collection of other content items (more on that later).

Let'due south proceed past clicking on Page Layouts. Merely like with content types, Squarespace has a itemize of pre-made designs for y'all here likewise.

This couldn't be simpler; pick the category of the folio that you want to build and then select a specific folio layout.

Right after you have your pick, you lot'll encounter the folio template imported to the canvass. Y'all can edit this new folio merely like you edited your homepage.

As you saw in 1 of the screenshots above, Squarespace has templates for near of the standard types of pages that yous might need. All the same, if by some gamble your ideal page is not on the list, y'all can:

Either add the General folio and change it (the easy path) or;
Add a Blank page and build it from scratch by adding individual content elements to it (the slightly more than time-consuming path).

As a side notation, it'due south great that Squarespace volition help you out with demo pages for things similar privacy policy and terms of service as well. This is not always something you find with other website tools.

A Word on Contact Pages

Squarespace allows you to include a live contact grade on your contact page. That form will take the messages that your visitors enter and send them to a location specified by you lot. Hither's how to set up this up:

Kickoff, you have to add a contact course to your page. As usual, this is done by clicking on ane of the "+" buttons and and then picking a grade design that you like.

Next, click on the pencil icon adjacent to the form. You'll run into the post-obit customization popup:

Yous can do a couple of things here in the private tabs:

The Build tab. This is where you can add new fields to the course and/or remove any of the current ones. You lot tin also edit their labels and add descriptions if you want them.
The Storage tab. This is the most interesting tab. It's where you get to determine what you want to practice with the entries that people are sending your mode. You can take them be forwarded to your email address (the simplest solution), or have everything integrated with a tertiary-party newsletter tool like Mailchimp, Zapier, or Google Bulldoze.
The Advanced tab. This is where you can gear up things like what it should say on the send button, what the postal service-submit success message should be, then on.

When yous're done customizing these settings, don't forget to click on the Utilize push button to salvage the changes. Once you practise this, your grade will be fully operational.

8) Customize Your Main Menu

Squarespace does a pretty good job of adding every new page to the main bill of fare of your site, but we can however tweak things to make the menu look 100% perfect.

To customize your menu, go back to the master Squarespace dashboard again, and click on Pages. From there, you tin can grab any of the folio links in the sidebar and drag them upwards and downward.

9) Add together a Blog (Optional)

A blog tin can be a great tool in helping you reach new audiences, users, or customers, depending on what the purpose of your website is.

You tin also use the blog for things like company news or industry news, and not as much for publishing archetype blog posts. It's all up to yous.

Squarespace makes creating a blog like shooting fish in a barrel – which is kind of the norm with them, every bit you lot may take noticed.

Actually, depending on the specific website template that you chose when first getting started working on your site, y'all might already take a blog module present.

If non, you lot can add it by going to the Squarespace dashboard and clicking on Pages. Then, click on the "+" button in the sidebar to add a new page. From the list, select Blog.

Only like with any other page, click on the layout that you similar, and y'all'll have it imported to your site.

You'll meet that the blog folio is a scrap different from the standard pages on your site. Instead of existence just i page, it's a collection of other content pieces – in this case, weblog posts.

To add together a new weblog post, click on the main "+" icon. Similarly, you can edit any of the existing demo posts that Squarespace imported for you lot.

As presently equally you click on a mail or add a new ane, yous'll see the editing screen.

Information technology has all the standard text editing tools you might demand, and you can also add images and other media to your posts.

When y'all're done working on the mail service, click on Done (upper left corner), and option if you lot want the post published correct away or scheduled for a afterwards fourth dimension.

10) Add an Online Store (Optional)

The great thing about Squarespace is that it can be used not only for elementary business card websites simply as well for full-blown online commerce operations with various features.

One of the main things people like to build these days is an online shop – aka. an eCommerce shop. Squarespace tin handle the job with ease.

The commerce module at Squarespace allows you lot to add together all different kinds of products to your shop, handle incoming orders, track them, set aircraft details, accept online payments, keep inventory, and give your customers access to a simplified payment and checkout process. In short, it'south the total package of online commerce!

Squarespace also doesn't limit y'all in terms of what yous can sell in your store. No affair if it's products, services, downloads, or whatever else it might exist, Squarespace has y'all covered.

Creating an Online Shop with Squarespace

Your adventure with eCommerce in Squarespace starts by calculation a new page that will serve as the central itemize of your shop. To do that, go to the Squarespace dashboard, click on Pages, and so on the "+" button to add a new page. From the list, select Store.

Pick a template that you lot similar by clicking on information technology. Squarespace will add a couple of example products to the itemize just to give you an idea of what it'south going to await like.

You tin can edit the blueprint of this page but like you lot tin edit any other page'southward blueprint in Squarespace. Click on the Edit link that'southward in the top left corner of the page.

To edit what your product catalog looks like, click on the pencil icon next to information technology. From in that location, you tin can control the basic parameters of the block, change the fonts, spacings, colors, etc.

The almost straightforward method to manage products (edit them, add together new ones) is to come back to the main Squarespace dashboard and get into Commerce → Inventory. You'll run into a list of all your products there. Clicking on any of them will bring upward the editing screen.

From the same page, yous tin also add new products, import a list of products, and edit your products in majority.

If y'all take a look at what else is there in the bill of fare of the Commerce section in Squarespace, you'll see a whole range of cool features that tin can come in handy as you work with your store day-to-day.

Some more than notable sections:

Customers – scan through your past customers and their orders
Discounts – create new disbelieve codes, actuate them at certain times
Point of Auction – use Squarespace commerce tools in your storefront
Payments – ready new payment methods
Checkout – customize the checkout sequence to fit your business concern

We encourage you lot to browse through each of the sections available in the Commerce panel and encounter what they can bring to the table.

Fifty-fifty if y'all don't want to configure anything extra there, you can at least take advantage of Squarespace'southward Accounting and Taxes sections, where you lot can consign your shop'southward crucial financial numbers.

eleven) Get to Know the Main Squarespace Dashboard

We've been working with website builders like Squarespace and its competitors for a while now, and we take to admit that Squarespace stands out when it comes to the overall dashboard quality and ease of apply.

Everything is straightforward here, and you lot tin can get to the exact choice you need very quickly.

So far, in this guide, we've spent most of our time in the Pages and Commerce sections, merely there's a lot more to examine if yous really desire to get the most out of your Squarespace experience.

For instance, if you desire to fine-tune the way your website looks, get into the Design section.

Each of the links you see in the sidebar leads to a split up sub-section where yous can tweak various aspects of the site'southward design.

For case, when you go into Animations, you'll see some handy controls that are responsible for how your website elements appear on the page.

In Buttons, you can change what all buttons on your site await like, ready their shape, rounded corners, and so on.

There'due south a lot more than there, but what'due south important is that all of information technology is easy to use and doesn't require any coding skills or web development experience.

Other main sections, similar Marketing and Analytics, permit you to have a really detailed look into how your website is performing and how your visitors see information technology. Having this sort of insight tin exist invaluable to your business in the long run.

Squarespace Website Settings

One more section of the dashboard where you should spend a couple of minutes are the main settings. This is where you can make sure that all the details like site linguistic communication and region, your business information, social media links, and then on, are ready correctly.

Squarespace fetches this data in a number of places around the site, so you don't want them misrepresenting yous.

12) Extend Your Squarespace Website

Squarespace already comes with an all-encompassing catalog of features and abilities that volition exist enough for 90% of users. However, if y'all ever want to extend your site with some third-party integrations, Squarespace supports those likewise.

There are loads of extensions that y'all can add to your site with a mere couple of clicks. For example, you tin can integrate Squarespace with your preferred accounting software, your fulfillment center software, or an email marketing tool.

If you do want to install any of them on your site, click on the extension, and and so connect to the site.

xiii) Launch Your Squarespace Site to the Public

At this phase, your Squarespace website is private and not visible to the exterior earth. To make it public, you demand to activate it.

Get to the Squarespace dashboard, and into Settings. Click on Site Availability.

To consummate the launch process, y'all'll accept to upgrade to ane of Squarespace'south paid plans.

Here's the current pricing:

TL;DR

If you've built only a simple website, you lot can stick with the cheapest plan at $12 a month.
To run an eCommerce store, you'll need either Business or Commerce plans. The former of which has a three% transaction fee, the latter doesn't have any.

All plans are paid for annually. You can pay monthly, but it will crash-land the price up by 30%.

All Squarespace plans come with a gratuitous domain name.

As soon every bit you pick your program and complete the purchase, your site volition come up online and be available to the public!

Washed!

That is information technology! You've only learned how to build a website with Squarespace all on your ain.

What'south particularly impressive about this whole project is that the website isn't in whatsoever way lacking compared to what a professional designer would build for you lot for thousands of dollars. This is the true power of DIY tools like Squarespace.

If y'all have whatsoever questions, experience free to fire away in the comments beneath.