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: [123]

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)


Update 2018

You can see a modern version of the FAQ 'menu' on a site we launched in 2017: 
www.mydentitycolor.com/faq

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.

Squarespace's New Save Functionality

Ever since we've started working on Squarespace 6, the auto-save has been pretty great, and more than great— it's something we've come to use and rely-on. Until now... [continue after video]

As of now (5/9/2012 is when I first noticed), when making any change on any page the user gets a prompt to save changes.

If you don't "save", the user get's an alert — a last chance opportunity to save or cancel changes. 

Content Structure & Style - Season Three

We've relaunched our Squarespace podcast! This season, we're using Google Hangout so you can get a good look at our faces, so maybe it's less-podcast'y and more-embarrasing'y.

Streamed live on Apr 18, 2013

Your three favorite Squarespace fans are back with a brand new invention and the season three premiere of Content, Structure & Style, a video podcast dedicated to the Squarespace web publishing platform.

In this episode we heard what Alan Houser , Brandon Davenport, and Josh Braaten have been up to since season two of the unofficial Squarespace podcast, explored what's new in the world of Squarespace, and started to dive into a hands-on migration for ContentStructureStyle.com from Squarespace v5 to Squarespace 6.

This video was originally broadcasted via Google+ Hangout on Air at 7:00 p.m. CDT (8:00 p.m. EDT, 5:00 p.m. PDT) on April 18, 2013.