Master image and text wrap in Squarespace
It is Summer 2022, and it feels that all things related to Squarespace have changed!
With the roll-out of the highly anticipated Squarespace Fluid Engine, we have discovered that many of our tutorials will need updating. One of the main questions we were asked is
‘How can we now achieve image and text wrap effects with the new Squarespace fluid engine?’
The good news is, yes, it is still possible to wrap text around an image in Squarespace 2022!
Here is an updated guide to image and text wrap with the new Squarespace fluid engine.
For regular Squarespace tutorials and guides, feel free to subscribe to our YouTube channel in the right-hand pane of this page (below the article on mobile devices).
In this Squarespace tutorial, Elwyn shows how you can still achieve image wrap and text wrap effects using the Squarespace fluid engine. It is surprisingly straightforward. He also has a quick tip at the end of this video, showing how you can achieve greater impact with your chosen photos. If you want to find out more about Squarespace, Canva and other techniques used by leading creative agencies, simply subscribe to this channel and hit the notification bell
Original Squarespace image wrap guide:
In today’s blog post, Squarespace Expert and Authorised Trainer, Elwyn Davies, will walk you through some quick, effective techniques to enhance your Squarespace page layouts. In particular, he will demonstrate how you can wrap text around images.
I am conscious that I have already covered image wrap in Squarespace at a basic level in past tutorials, but today we are going to jump back in and have a more detailed look.
The first thing to consider when adding images into a Squarespace page (be it a content page, blog post, store page or event), is that we have a number of options available to us:
Here is an example of a wrapped image in Squarespace, showing one of the key steps involved with the text-wrap process!
Squarespace Gallery: Galleries are an ideal method for displaying three or more images in one section of a page, with various features available like image titles, lightbox and auto-crop, this is a powerful feature that is now fully embedded in the Squarespace 7.1 page-building process.
Lists: A new feature for Squarespace 7.1, lists provide a new toolbox full of image and content-related features. For those who are curious about this feature, we now have a new module in our Squarespace Box of Tricks course covering list modules in detail.
Summary Blocks: Featured in another module available in our Squarespace Box of Tricks course, summary blocks are a powerful Squarespace feature, enabling designers to provide visual links to dynamic content being pulled from elsewhere on the website. For example, if we wanted to show the 3 most recent news posts on our Squarespace homepage, we would add a summary block, link it to the chosen blog area, and simply tweak a few visual options to link it up.
Split content: This approach is similar to text wrap, in that it allows multiple columns on a Squarespace page. In its simplest form, you can allocate a text block in one column and an image block in another. The key difference is that in an instance where the text is longer (takes up more vertical space) than the image, it will not wrap below the image, but instead
Text and image wrap: This approach is demonstrated at the top of this page as is covered in detail via the tutorial below. Text wrap is perfect for displaying a combination of images and text on the same level of priority on desktop and laptop screens. On mobile devices, the image will automatically expand to fill the entire column, removing issues where the image would be far too small to be of use.
Our Coffee Clip (available via the PixelHaze YouTube Channel) covers every step required to achieve a text-wrap effect in Squarespace.
Ready to learn image and text wrap in Squarespace? Let’s jump right in…
To get started, create or locate the page that you want to add the image wrap effect to, then click on ‘Edit’ to get started. Let’s now run through the process in full. If you would prefer to watch a video covering these steps, we have created a free tutorial via our YouTube channel (see above).
Add an image block via the Squarespace editor
First up, make sure you save previous progress! Then, once in edit view, hover over the text content on the page so we see an array of blue lines, at the centre of which you will find white plus icons nestled in blue ovals. Click on that icon to add our content in place, in this instance, chose the ‘image’ option.
Move the image into position
Click on the image with the mouse. Keep holding the mouse button down and move the image either to the left or right of the content. Once we see the blue box (as opposed to blue lines), we know that the image-wrap mode is activated, allowing the text to flow (wrap) below the image. In most instances the image will also partly overlap the edge of the content block, making full use of any space at either side of the browser window.
Release, and if required, realign
Release the mouse button and that should be it. Your image should now be wrapped by the text content within the page. If you have made a mistake or the image is not displaying in the desired area, you can repeat the above steps. If you have got yourself into a pickle, refresh the page without saving and try again. For newcomers to Squarespace, I often recommend creating a blank ‘test’ page that is not on the menu system so you can practice to your heart’s content.
Learn Squarespace with us!
Build professional websites in Squarespace with our dedicated online course, incorporating 20 worth years of web design tips.
