Clear Website and Start Again Squaresoace
How to kickoff a new site on v7.1 + tips to build it fast
If you're new to Squarespace at that place's a lot to get acquainted with, even though the platform is very unproblematic. While 7.ane is easier to design in, some of the styling is compartmentalized a bit besides much and some things may exist hard to observe or understand.
If yous're not new around here, so y'all may know that with 7.0, you had to pick your template carefully depending on features you lot wanted & structure, –none of which is readily apparent from the template page where you choose. 🤦🏻♀️
-
Where do you you first?
-
Which i do you choose?
-
What happens after I pick one?
-
Am I stuck with it?
-
After you option one, now what?
Let's respond all of those questions, now!
How to selection a template on Squarespace 7.1
Where practise yous I commencement?
Which one practise I choose?
Okay, are you lot ready? Y'all may want to be sitting down for this:
It doesn't affair which template you choose.
They all accept the same features & functionality. That's the upwardly-side.
What happens later on I selection one?
Am I stuck with it?
The down-side (if you can even call it that) is that you can't switch to another template in 7.one after you lot've chosen one, so aye you are "stuck" with it.
The reason is because, well, at that place's no reason to have to switch once again.
They all have exactly the same customizations, they all have access to the same set up of features & all have the aforementioned structural base of operations. If y'all choose one, you basically have admission to them all!
If that'due south true, then how do I pick?
I'd beginning with the i that gets ya closest to the end result.
-
If you know y'all desire a button in the header, or social media links up in that location. Start with that.
-
If you know you want big imprint images and lots of galleries, cull a template with those features to become ya started.
But remember to use the template every bit inspiration & don't just start filling in your content to all the demo pages, or your site won't be very unique.
Head over here to read more on How To Proceed Your Squarespace Site From Looking Like Everyone Else's.
How to design your 7.1 site, fast
The best tips I can give you are:
#1 Delete all the demo content, or move it all to the Not Linked section, which means all the links to those pages are moved out of your header completely. (If you move them, rather than delete them, make sure you delete them before you launch, just to clean upward your page listing.)
#2 Build a Template Style Guide page, and put all the blocks you recollect you'll use on information technology!
Reason being, the Site Styles surface area doesn't testify you options for items that aren't already on the folio (in order to continue things simpler), which means if y'all don't have a Newsletter block on the page y'all likely won't see how to style it. Once that office is done, you tin build your whole site, lightning quick!
Building YOUR TEMPLATE STYLE GUIDE
Here'south an example of what I typically use to get a new site started (& aye, I build one every fourth dimension):
Adding folio content:
You tin run across in the instance screenshot here that I've pasted the same filler text for each of the font styles: Heading 1-iv and Paragraph 1-3.
In case you want to utilise information technology yourself, that filler text is:
Heading one HEADING one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nunc et ligula posuere porta eu nec elit. Aenean nibh augue, tristique eget nisl at, eleifend mollis massa. Donec imperdiet tortor enim, air-conditioning varius tellus ultrices sit amet.
The purpose for that is to simulate a existent title (in Title Case, or Majuscule to see how it looks), and to simulate a small paragraph so you can meet how your font choices will wait & edit your line heights appropriately.
Too lilliputian space between lines of text in paragraph (aka, "line superlative") & it'll be hard to read; too much space & the lines inside the paragraph will look similar split up sentences.
Paste the same filler text 7 times & modify the number in the title for each to keep things organized for adjusting each in the settings later:
-
1x for Heading one
-
1x for Heading 2
-
1x for Heading 3
-
1x for Heading four
-
1x for Paragraph 1
-
1x for Paragraph 2
-
1x for Paragraph 3
Then add your buttons:
-
Pocket-sized
-
Medium
-
Large
Then add together your Paradigm Blocks!
-
Image Block: Poster
-
Image Block: Menu
-
Image Block: Overlap
-
Image Block: Collage
-
Image Block: Stack
Hover over the Image Block, then click the Pencil icon to get to the Settings inside that Block.
Brand certain you lot add sample titles & subtitles to these. Besides brand sure the link is set to brandish in a button for each, since you lot'll be able to fashion all of those pieces for each Image Block. The settings for that will be in the Image Block, nether Edit (pencil icon), then the Design tab.
Click the Design tab to cull the layout style, then in the Paradigm Link Dropdown, choose either On Epitome, or Button. If you lot choose Push button, characterization the text for the button, so coil downward to choose or paste the linked folio it volition go to.
Then add together anything else that y'all call up you'll be using on your website, from your Instagram feed (the Instagram Cake), a Newsletter Block, a Form Cake, a Summary Block (often used to bear witness a summary of recent posts in a collection like a Weblog, Events, or a Portfolio page).
Hither in my example full page screenshot in a higher place, I have also added:
-
a Newsletter Block
-
a Form Block
-
a Summary Block
Now that everything is added, click the Done push button in the upper left corner, then click Relieve.
Choosing Fonts:
Then head over to your main menu area and cull Pattern, while you're still on the Template Fashion Guide page.
Click Fonts and choose a combo you similar. If you lot want to customize information technology further, click the gear bike ⚙️ icon on the font-pack menu to change it up a little. Here's what that looks similar:
Choosing Colors:
In one case yous've done that, move down to the Colors area inside the Design Settings for your site.
This is where you might get a little confused, specially if y'all're coming from v7.0, because Squarespace has quite a few color Section Themes settings at present.
Before I explicate that, hither's what that looks like in the carte du jour:
Each color Section Theme allows y'all to choose your own color settings for everything on the Template Style Guide page you just created & saved earlier.
Ane of those Section Themes in the list will be marked as default, which yous can change by selecting a new one in the listing.
(Color) Section Themes:
To edit the Department Theme itself, hover over the Theme y'all want to edit and click the Pencil icon. From in that location, scroll through the list of options & brand your changes.
If you lot need or want specific colour palettes to look at and specific Hex color codes to paste in, Coolors.co is a great free resource for that!
The key that makes choosing colors easy, is to non exercise this blindly!
#one Get back to your Template Mode Guide
(You may accept to back out of the Design settings a little bit, otherwise clicking on anything in the preview expanse may just highlight the setting for it in the Color Settings panel you're in).
#2 Click edit on the style guide page you made (tiptop left corner on the preview side), then scroll down a bit until y'all're looking at only the top of the page where the Headings start.
#3 Click the Pencil icon to bring up that page's design settings menu, and then select the Colors tab from that bill of fare. It will likely be pre-selected on the default color Section Theme.
Default Department Themes that came with your original template volition not necessarily match your brand's color palette nonetheless, unless you've already edited the Colour Palette in the Color Settings expanse. Y'all may only see: 2 white ones, 2 black ones, and two gray ones, the remaining being more basic options that fit the original template you started with.
#4 Choose a different color theme from the list, maybe the 3rd i from the pinnacle to beginning (or one that'southward already different the default ane), and wait a couple seconds. The page will change to accommodate the new Section Colour settings.
#5 Click Done in the top left, and then Save. And go back to your Color Settings in the left-hand panel.
In my example, I've changed my Template Style Guide folio's Department Theme to the Dark Bold Department Theme, and this is what happened to the page (shown first) afterwards I chose information technology & adjusted all the settings inside the color Section Theme expanse (compared to the original white default, shown second).
White Minimal, section theme
See the differences? You can't miss them! Nearly all the colors have swapped over to the new theme.
This new Section Theme's color settings, once setup , allows y'all to modify out everything on the page, with just a couple clicks.
1 thing to keep summit of listen: the header area volition always take the styling of the section at the top of the page. That means on the white default background, pieces the logo are 'missing' in my example above with the white background, because those pieces are also white. White won't show up on a white background. 😉
Go through all the Department Theme color palettes & gear up the color settings for each ane.
Or at least for 2-4 of them to get ya started. (I'one thousand an 110% attempt kinda gal, then I but did them all, merely you don't accept to utilise all of them!)
To get started on this, I change the Section Theme color, of the Template Mode Guide to something I oasis't edited the color settings for yet. Then I go to that Section Theme in the Color settings (Pattern < Color < Section Themes) to edit all of the elements on the page to fit the new color scheme for that Department Theme.
And so I salvage the changes, back out of the color settings panel a little bit then I can edit the Template Style Guide page once again & change the theme to another 1 in the list.
And so I become back to the Section Themes settings and edit the color choices for that 1. And and so on.
Set, Prepare, BUILD!
Once you've completed this process for all the Section Themes in the list, y'all're ready to get-go building out your site!
Information technology may sound tedious to exercise it this way, merely honestly: if y'all get this part out of the fashion first, methodically, then yous volition save yourself a lot of time, defoliation & headaches after.
Trust me, information technology'due south a lot more disruptive to edit stuff like this, mid-website-build. Doing the majority of information technology beforehand makes things much simpler.
That's not to say you won't have design setting tweaks to make as you become, merely yous won't have nigh as many!
How do you use the Section Builder in v7.1?
Easier shown than said, and so cheque out this quick video:
Picking Squarespace templates for seven.0
Let's backtrack a tiny bit.
Picking a template on 7.0 was hard, prior to the introduction of the Alkali family. Y'all picked based on what y'all could run into in the template shop, but frequently in that location was "more under the hood" that you couldn't tell from the demo site, or worse, zip to be discovered.
It was hard to tell which templates had the structure you lot wanted if you didn't know what you were looking for.
Even worse, the setup for choosing a template was organized by category, which pushed people to only await in the category that fit their own business concern blazon, which was not mandatory. Whatsoever template will work for any concern, IF it had the structure y'all needed.
That meant, if yous're a restaurant owner you weren't limited to only the restaurant templates.
That defoliation left a big conclusion for designers, because we'd have to know which templates did what & had which specific ready of features. I had a big spreadsheet that mapped out what each i did, and I'd have to look for the features the client wanted & choose the template based on which one had the most of that list.
What a cumbersome, pain in the ass. Right?
So you can imagine our utter please when the Alkali family templates were released! Nearly fifty templates that ALL did the same thing. All offered the aforementioned features. All had the same underlying structure, –and simply so happened to be the nearly customizable.
If yous're switching templates inside the 7.0 version, stay within or switch to the Brine family of templates. You'll have the most amount of lawmaking-free customization capabilities there, and accept access to all the best features of the entire 7.0 platform.
Don't know which templates are in that family?
You can literally search 'Brine Family' in the 7.0 template expanse (doesn't work in the new vii.i template area, since Brine isn't part of 7.i), or head over here to find out why Brine Is Still The Best vii.0 Template.
There's a link in that location to get ya to the one-time templates for vii.0 in case ya demand it, and information technology isn't an chapter link!
Don't want to start from scratch?
Grab a badass, unique Squarespace Template in my store!
https://www.launchthedamnthing.com
Source: https://www.launchthedamnthing.com/blog/how-to-start-a-new-site-on-v71-fast
0 Response to "Clear Website and Start Again Squaresoace"
Post a Comment