It takes a little getting used to having to re-insert tags by clicking e.g. the span, but once you figure it out it's very elegant and allows translations that would require changes in sentence ordering. You see the original structure in the source text and can easily re-add them where appropriate. For the most accurate results I ended up using the Inspect Element option and copying out the placeholder text - translating only parts of the content as seen in the image above.

You'll need to browse around your page to ensure all phrases are collected. For us, this also caused all of our blog posts to appear in the phrases - which means you could acutally use this to create multi-lingual blog posts! Pretty sweet - but since we didn't want to go to such lenghts I looked for a way to specifically exclude parts of our web page from phrase collection.

When initializing Localize.js, you set a few parameters. Most notably the blockedClasses option of Localize.initialize. Since we use Squarespace, most HTML elements are helpfully tagged with classes. This way we can list the ones to exlude from phrase collection;