Minecraft Modern House Tutorial Step By Step

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

It’s easy to use and powerful enough so that it can serve both simple and more advanced types of websites, such as online stores.

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

The tuntunan 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 get started!

Table of Contents

  1. Signing up
    with Squarespace
  2. Choosing
    a design
  3. Setting
    the main website details
  4. Customizing
    logos, fonts, and colors
  5. Customizing the homepage
  6. Optimizing
    your site for mobile
  7. Creating sub-pages
  8. Customizing the main menu
  9. Launching a blog
  10. Launching an eCommerce store
  11. Understanding
    the main Squarespace dashboard
  12. Extending
    your Squarespace website
  13. Launching
    your Squarespace site to the public
  14. Video Cak bimbingan

1) Go to Squarespace.com And Get Started

Getting your Squarespace adventure started is very straightforward.

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

Squarespace home

This will take you straight to the design screen.

2) Choose a Website Design

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

How to use Squarespace: pick a template

You’ll notice that Squarespace has its template catalog neatly organized by 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 list in the sidebar, make sure to look through those designs as well.

One note;
if you’re going to be building an online store, check out the
Online Stores
category of templates. Those are the templates that have been optimized specifically to work for eCommerce.

Before committing to any template, you can preview what it’s going to look like with some demo content. For that, hover your mouse adv lewat the template to see the preview link.

Squarespace preview

Once you’ve found your perfect website design, click on
berangkat with this design
to have it imported to your site.

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

3) Enter the Main Website Details

From this point on, Squarespace will take you by the hand through the entire process of having your website created.

Squarespace wizard 1

The first step is to enter your website title. Once you do that, Squarespace will show you how to handle the most important tasks around your site, such as editing pages, creating new ones, and styling them.

Squarespace wizard 2

4) Customize Your Logos, Fonts, and Colors

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

How to use Squarespace: add a logo
don’horizon mind the demo images and texts that you can see on your site at this stage. You’ll be able to change them later on.

Adding your jenama is quite straightforward – just upload the logo file and see it appear on the canvas immediately.

If you don’t have a logo yet, Squarespace will help you get one created in no time. There’s actually a separate Squarespace logo maker tool. It has a basic set of editing features, berlebih some stock icons that you can add to your logo.

Squarespace logo tool

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

As soon as you upload the logo, you’ll see it on the canvas.

logo added

Click on
to proceed to

How to use Squarespace: set your 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 have to do is decide whether you want to go with sans-serif, serif, or mixed fonts.

As soon as you click on any font pairing, you’ll see it in the preview section. You can also adjust the base font size (the standard size of all paragraphs of text). Changing this size will have an impact on all the other texts on your site, such as headings – since those are traditionally scaled-up versions of the base size.

Once you’ve found your perfect font pairing, click on
to proceed to

How to use Squarespace: set your colors

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

You’ll notice that Squarespace presents its palettes as groupings of three colors. You can think of these colors as:

  1. The primary color (for links, buttons, other elements that stand out on the page)
  2. The background-color
  3. The secondary color (secondary backgrounds, links, etc.)

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

Click on
to finalize this part of the website setup.

You’ll see your etiket, fonts, and color selections added to the site.

5) Customize Your Homepage

Squarespace customizer

Now is a good moment to customize your homepage and replace the demo content with your own. To begin, click on the
Edit button that’s in the top kantin of the canvas.

You will be taken to a visual website editor where you can modify any element that’s currently on the page, delete elements, and also add 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. Here’s an example homepage design:

How to use Squarespace: customize your homepage

From the top:

  • The menu row,
  • The hero section row (with the image and the headline on top),
  • The text section row (starting with “We conserve…”).

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

For example, when you hover over the menu kafetaria, you’ll see a button inviting you to edit the contents of the bar.

How to use Squarespace: customize the header

Clicking on this button will show a range of options, such as changing the layout of the header, replacing the keunggulan, adding extra elements, and more.

header customization options

In a similar fashion, you can hover over any other element to see the options available.

Further, to edit any text that’s on the page, just click into it. A simple text editing section will appear. Here’s what happens when we click into the current headline:

headline edit

What’s cool about this interface is that you don’falak have to be looking for any “save” button anywhere. Any text you add/edit will be saved automatically.

Here’s what else you can do within this interface:

Deleting Elements

Any partikular element or even a whole row can be removed from the page easily.

Hover your mouse over the thing that you want to delete and click on the
trash can


Accessing Option Panels of Elements

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

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

hero pencil

Clicking on that icon will reveal a set of additional options for the aditokoh section.

hero options

Every element has a slightly different set of options, but you can generally expect to see adjustments for formatting, backgrounds, colors, alignment, and more.

Also, it’s not only sections/rows that have their options, but some istimewa elements have their own options as well. For example, if you click on a pencil icon next to an image block, you’ll see this:

image pencil

We encourage you to experiment with these settings, click around, 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 place.

section drag and drop

You have full freedom as to what element you want to grab onto and where you want to put it.

Additionally, to make moving sections up and down a bit simpler, you can take advantage of the arrow buttons that you can see in the top right corner of any given row:


When you click on either of them, you’ll see your section switching places in betulan-time.

Adding New Sections

Apart from working on the sections that are already in your design, you’ll also want to add new sections to accommodate whatever content you want to include on your pages.

To add a section, click on any of the
buttons you can see throughout the page.

plus buttons

These plus buttons come before and after every content section. This makes adding new content quite easy. Just pick the spot where you want your new section and click on the corresponding

Once you do that, you’ll see a new window where you can pick from Squarespace’s vast library of content sections and elements. Everything is grouped into categories, so you can quickly find any type of section you need.

new section

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

section types

Once you’ve found a section you like, click on it to have it imported to your page.

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

menu demo

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

Adding Images and Other Okuler 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 ki alat you might need on your website.

As we’ve covered above, to add new content to your site, you’re going to do it by clicking on the
button next 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 image gallery blocks, single images, single videos, music, and even charts. For example, if you click on
Images, you’ll see a selection of different layouts for effective image presentation.

add images

Clicking on any of them will add an example image to your page. You can naturally replace these demo images with your own. To do so, click on the
icon next to the image you want to replace, and then on the
trash can

image delete

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

upload image

At this stage, you can just pick an image from your computer and have it imported.

image imported

This is not where the functionality ends. Squarespace also has some pro tools that allow you to edit your image and change some of its parameters. Click on the
Image Editor
button to begin. Here’s what you’ll see:

Squarespace image editing

Some of the actions you can perform include:

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

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

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

image design

There’s also the final tab –
– which lets you set 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 do to your images. For simpler applications, you can get away with using just Squarespace for image editing and forget about more advanced tools like Photoshop.

Adding other types of okuler content works just like adding images. For example, to add a video, first, click on the
icon next to where you want to place it. Then, pick a video block from the list. Lastly, replace the demo video with your own.

replace video

6) See Your Design on Mobile

Most users don’t think about mobile too much when working on their websites. However, as it turns out, mobile traffic is snowballing – it went up more than 200% in the last seven years. Moreover, casual users are more likely to visit your website from a mobile device than from a desktop or laptop.

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

Back in the day (and with some website tools even today), the only way to make a site work on mobile was to write device-specific code by hand. Titinada only that, but you also takat to account for all kinds of different screen sizes and device types.

Luckily, this is not a kebobrokan with Squarespace at all. With some clever mechanism, Squarespace is able to predict what the best mobile layout for your website design will be and then serves it to your mobile visitors automatically. In other words, you don’t have to worry about mobile at all if you’re building your site with Squarespace.

What you can check out, however, is the mobile preview of your site. You can access it by clicking on the mobile phone icon that’s in the top right corner of the Squarespace interface.

How to use Squarespace: mobile preview

Squarespace doesn’lengkung langit only narrow down the viewport by squishing your content together but also realigns your columns so that they render in the right order on mobile. It also makes sure that all your custom elements such as forms, reservation and appointment blocks, etc., function correctly for your mobile visitors.

7) Create Sub-Pages

Most users will want to build more pages than just the homepage. Here are some examples of sub-pages that you can make use of:

  • About
    page and/or
  • Contact
  • Privacy Policy
    Terms of Service

To add a new page, go back to the main Squarespace dashboard, and click on

How to use Squarespace: add new pages

Next, click on the

add page

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

Let’s proceed by clicking on
Page Layouts. Just like with content types, Squarespace has a catalog of pre-made designs for you here as well.

How to use Squarespace: choose from page layouts

This couldn’n be simpler; pick the category of the page that you want to build and then select a specific page layout.

Right after you take your pick, you’ll see the page template imported to the canvas. You can edit this new page just like you edited your homepage.

services page

As you saw in one of the screenshots above, Squarespace has templates for most of the kalimantang types of pages that you might need. However, if by some chance your eksemplar page is not on the list, you can:

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

As a side note, it’s great that Squarespace will help you out with demo pages for things like privacy policy and terms of service as well. This is titinada always something you find with other website tools.

A Word on Contact Pages

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

First, you have to add a contact form to your page. As usual, this is done by clicking on one of the
buttons and then picking a form design that you like.

Next, click on the
icon next to the form. You’ll see the following customization popup:

form customize

You can do a couple of things here in the solo tabs:

  • The
    tab. This is where you can add new fields to the form and/or remove any of the current ones. You can also edit their labels and add descriptions if you want them.
  • The
    tab. This is the most interesting tab. It’s where you get to decide what you want to do with the entries that people are sending your way. You can have them be forwarded to your email address (the simplest solution), or have everything integrated with a third-party newsletter tool like Mailchimp, Zapier, or Google Drive.
  • The
    tab. This is where you can set things like what it should say on the send button, what the post-submit success message should be, and so on.

When you’re done customizing these settings, don’t forget to click on the
button to save the changes. Once you do this, your form will be fully operational.

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

To customize your menu, go back to the main Squarespace dashboard again, and click on
Pages. From there, you can grab any of the page links in the sidebar and drag them up and down.

drag pages

9) Add a Blog (Optional)

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

You can also use the blog for things like company news or industry news, and not as much for publishing classic blog posts. It’s all up to you.

Squarespace makes creating a blog easy – which is kind of the norm with them, as you may have noticed.

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

If not, you 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

How to use Squarespace: add a blog

Just like with any other page, click on the layout that you like, and you’ll have it imported to your site.

You’ll see that the blog page is a bit different from the standard pages on your site. Instead of being just one page, it’s a collection of other content pieces – in this case, blog posts.


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

As soon as you click on a post or add a new one, you’ll see the editing screen.

post editing

It has all the pan-ji-panji text editing tools you might need, and you can also add images and other media to your posts.

When you’re done working on the post, click on
Done (upper left corner), and pick if you want the post published right away or scheduled for a later time.

10) Add an Online Store (Optional)

The great thing about Squarespace is that it can be used not only for simple business card websites but also for full-blown online commerce operations with various features.

One of the main things people like to build these days is an online store – aka. an eCommerce store. Squarespace can handle the task with ease.

The commerce module at Squarespace allows you to add all different kinds of products to your store, handle incoming orders, track them, set shipping details, accept online payments, keep inventory, and give your customers access to a simplified payment and checkout process. In short, it’s the full package of online commerce!

Squarespace also doesn’lengkung langit limit you in terms of what you can sell in your store. No matter if it’s products, services, downloads, or whatever else it might be, Squarespace has you covered.

Creating an Online Store with Squarespace

Your adventure with eCommerce in Squarespace starts by adding a new page that will serve as the central catalog of your store. To do that, go to the Squarespace dashboard, click on
Pages, and then on the
button to add a new page. From the list, select

How to use Squarespace: add a store

Pick a template that you like by clicking on it. Squarespace will add a couple of example products to the catalog just to give you an idea of what it’s going to look like.

You can edit the design of this page just like you can edit any other page’s design in Squarespace. Click on the
Edit link that’s in the top left corner of the page.

store edit

To edit what your product catalog looks like, click on the
icon next to it. From there, you can control the basic parameters of the block, change the fonts, spacings, colors, etc.

store look adjust

The most straightforward method to manage products (edit them, add new ones) is to come back to the main Squarespace dashboard and go into
Commerce → Inventory. You’ll see a list of all your products there. Clicking on any of them will bring up the editing screen.

edit product

From the same page, you can also add new products, import a list of products, and edit your products in bulk.

If you take a look at what else is there in the menu of the
section in Squarespace, you’ll see a whole range of cool features that can come in handy as you work with your store day-to-day.

commerce panel

Some more notable sections:

  • Customers
    – browse through your past customers and their orders
  • Discounts
    – create new discount codes, activate them at certain times
  • Point of Sale
    – use Squarespace commerce tools in your storefront
  • Payments
    – set up new payment methods
  • Checkout
    – customize the checkout sequence to segak your business

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

Even if you don’t want to configure anything extra there, you can at least take advantage of Squarespace’s
sections, where you can export your store’s crucial financial numbers.

11) 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 have to admit that Squarespace stands out when it comes to the overall dashboard quality and ease of use.

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

How to use Squarespace: the main dashboard

So far, in this guide, we’ve spent most of our time in the
sections, but there’s a lotre more to examine if you really want to get the most out of your Squarespace experience.

For example, if you want to fine-tune the way your website looks, go into the

Squarespace design dashboard

Each of the links you see in the sidebar leads to a separate sub-section where you can tweak various aspects of the site’s design.

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


Buttons, you can change what all buttons on your site look like, set their shape, rounded corners, and so on.

There’s a undian more there, but what’s important is that all of it is easy to use and doesn’ufuk require any coding skills or web development experience.

Other main sections, like
allow you to have a really detailed look into how your website is performing and how your visitors see it. Having this sort of insight can be 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 language and region, your business information, social ki alat links, and so on, are set correctly.

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

Squarespace settings

12) Extend Your Squarespace Website

Squarespace already comes with an extensive catalog of features and abilities that will be enough for 90% of users. However, if you ever want to extend your site with some third-party integrations, Squarespace supports those as well.

There are loads of extensions that you can add to your site with a mere couple of clicks. For example, you 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 then
connect to the site.

connect extension

13) Launch Your Squarespace Site to the Public

At this stage, your Squarespace website is private and not visible to the outside world. To make it public, you need to activate it.

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

How to use Squarespace: set site availability

To complete the launch process, you’ll have to upgrade to one of Squarespace’s paid plans.

Here’s the current pricing:

Squarespace pricing


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

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

All Squarespace plans come with a free domain name.

As soon as you pick your plan and complete the purchase, your site will come online and be available to the public!


That is it! You’ve just learned how to build a website with Squarespace all on your own.

What’s particularly impressive about this whole project is that the website isn’kaki langit in any way lacking compared to what a professional designer would build for you for thousands of dollars. This is the true power of DIY tools like Squarespace.

If you have any questions, feel free to fire away in the comments below.

Source: https://websitesetup.org/how-to-use-squarespace/