In Squarespace, you can add an image on top of a text block, but when it resizes everything gets changed! This tutorial will teach you how to wrap text around that image so it will look great on every size device.
– – –
Brand new to CSS for Squarespace? Check out my free training → https://insidethesquare.co/learn
– – –
In this free Squarespace tutorial, you’ll learn how to create a text wrap in Squarespace. Wrapping text around an image is a common design that makes it easy for a website visitor to see that the image is related to the content.
In this video, I’m using text from a free text generator that is Jeff Goldblum quotes – you can find it at https://jeffsum.com – I am not affiliated with this website or its creators, just a fan!
To create this wrapping text effect, you need to use a markdown block and some CSS. Keep in mind that if you are using more than one image inside a markdown block on your site, this code will add the same style to them all!
Here is the code from this tutorial. Be sure to edit the float location and margin to suit your site style. If you are adding it to a single page, check out this tutorial for more info: https://insidethesquare.co/singlepage
.markdown-block img {
float: left;
margin-right: 15px;
}
– – –
🔗 Related Links 🔗
How to upload an image to Squarespace: https://youtu.be/J5rNt1z_I5Y
5 Creative Text Designs in Squarespace Fluid Engine: https://youtu.be/JjmvhuBVESU
Add image inline with text in Squarespace: https://youtu.be/uW2Bz-nZ6bQ
Squarespace Fluid Engine: https://insidethesquare.co/fluid
How to install code on a single page in Squarespace: https://insidethesquare.co/singlepage
– – –
🤩 Download over 100+ pages of custom codes and pro tips for customizing Squarespace in one awesome PDF. Order the Squarespace CSS Cheat Sheet, available now at 👉 https://insidethesquare.co/css
– – –
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸
Use my affiliate link and code PARTNER10 – You’ll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎
🔗 PARTNER10 → https://insidethesquare.co/partner10
– – –
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
– – –
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM → https://www.instagram.com/thinkinsidethesquare
👍 FACEBOOK → https://business.facebook.com/insidethesquare
📌 PINTEREST → https://www.pinterest.com/insidethesquare
—
