Drag, Drop, Insert and Row

If you're moving content around in Squarespace 6, you may get a little confused/frustrated. We've probably all been there, and here's one tip that will probably help you.

I will go into greater detail on the Content Editor soon, because there's actually some important milestones (AHA-MOMENTS) to learn before arriving at this one.

But here you go— here's the short video:

Using a Squarespace Menu Block for FAQ's

I've used the V6 Menu Block quite frequently when building restaurant sites, and found it fairly easy to style (using custom CSS) and quite easy for the end-user to manage the restaurant menu's content.

See Squarespace Support's documentation on USING THE MENU BLOCK.

It occured to me today that an inline menu system would be beneficial for FAQ's— a way for a visitor to quickly navigate to particular content without leaving the page (or getting lost). This is certainly typical to what I've used out in the world.

Offsite design-pattern examples: [1 2 3]

So, it's quite simple to add a (restaurant) menu block, and just add your Categories, Questions and Answers.

Using the built-in formatting options is quite simple. It's all documented within the block component as well.

With a little code-inspection and some quick custom CSS, you can make the menu appear the way you want it to. In this example, I've only changed the navigation text into "buttons":

/* FAQ */

.menu-selector {
  text-align: left !important;
}

#navbuttontop {
  background-image: none !important;
  font-size: 12px !important;
  letter-spacing: 1px !important;
  -webkit-border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  border-radius: 3px !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  text-transform: uppercase;
  color: #fff;
  background-color: #000 !important;
  padding: 6px 20px;
  color: #fff !important;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 6px;
}

(screenshot)

Applying a little custom styling to taste. (YES, A RESTAURANT MENU PUN)

Pro Restaurant Site Tip: Adding Clickable Phone Numbers for Mobile Visitors

As Squareflair is in the process of churning out custom V6 sites, we've learned to focus a great deal on the mobile experience. 

The tired cobbler's kid's feet

Yah, so... our own mobile-awesome Squareflair V6 redesign is waiting in the wings. We hope to launch it someday soon, but our clients come first!

I've mentioned before here on our blog, with the launch of PunchBurger.com, the primary goals of a restaurant website should be the following: 

1. Show the menu.
2. Give customers a phone number to call.
3. Give customers clear driving directions.

4. DO ALL OF THIS FOR MOBILE VISITORS.

While building the latest Squarespace restaurant site for DeLullo's Trattoria ( delullositaliancom ), and testing on mobile, I came-up with a cool trick: to place the phone number in the site's navigation. Along with placing the phone number a little lower within the site, there's no way the number will be missed by visitors. 

To do this on Squarespace was actually pretty tricky, but only because I had to add a script/hack to the default link action that the menu applied. 

So here's how I did this...

[1] Add the phone number to the menu by using the create a new page menu function, and selecting the LINK icon.

[2] Fill-in the Configure Link name field (and only the name field) with the phone number. I added a little extra human messaging to keep things friendly.

What happens at this point, without extra scripting, is sort-of odd. On non-mobile/touch device (a notebook/desktop), the link refreshes the page. On mobile, nothing happens. —so onward with the script!

[3] The link element we added above is actually using the class ".external-link", and since we want to trigger an auto-dial from a mobile device, we can inspect the code and see that at a smaller size, also known in Responsive Design circles as a "mobile breakpoint", we can see the class ".mobile-nav" is being used in the main menu area of the site.

Here's the script used (change the "[ ]" to "< >")

[script type="text/javascript"]
Y.use('node',function() {
    Y.on('domready',function() {
        Y.one('.mobile-nav .external-link a').setAttribute('href','tel:765-292-2000');
    });
});
[/script]

This really should do the trick. If you have questions, just give a shout in the comments below.

Easy Image Pre-loader in Squarespace

This is an easy way to pre-load images on your site: just add the images’ paths to the DIV class, and call the DIV in your HTML.

In other-words, you will need to inject the "loader div" somewhere in your html. You can even stick it in the footer of your site, if you don't have "injection points" at your disposal.

Just add this HTML:

<div class="loader"></div>

...and add the following custom CSS (below). The DIV will not be visible but the images will preload nicely.

div.loader{
background:url(/storage/hover.gif) no-repeat;
background:url(/storage/hover2.gif) no-repeat;
background:url(/storage/hover3.gif) no-repeat;
margin-left:-10000px;
}

Creating a Squarespace Login Template - The Easy Way

I've seen this question come-up on the Squarespace forums in the past— the need exists where people want to have a unique login template for their site.

Well, it's cake. It just takes a little juggling knowledge.

404 Error Pages

This same technique applies for your Squarespace 404 Error page (the page a visitor sees when a "page isn't found" because of a broken link). The difference is— the Login & Error pages have no "Page ID", so it's not really that easy to add a special design for 404 error pages. (like these)