Squarespace image blocks can do a lot of cool things, but they can’t place an image on the same line of text. Luckily, with a markdown block and a little clever code, we can do just that! This tutorial will show you how to use a markdown block to place an image in a line of text with just a little bit of custom code.
—
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
—
This tutorial will show you how to have an inline image using a markdown block in Squarespace. There are quite a few steps involved here, and one of them requires angled brackets/carets that I can’t use in a YouTube description. To grab the full code, head on over to my blog at https://insidethesquare.co/squarespace-tutorials/image-in-text
Here are the steps from this tutorial:
STEP 1: Add a markdown block with special placeholders for the images that you want in line with your text.
STEP 2: Upload the images to your custom files. JPG, PNG, and GIF files will all work.
STEP 3: Update the custom code to your image URL and customize the code to place your images in the spots that you created.
– – –
Here is the CSS code from this tutorial:
.image1{
color: transparent;
background-image:url(first-image-url-here);
background-size:cover;
background-repeat:no-repeat
}
.image2{
color: transparent;
background-image:url(second-image-url-here);
background-size:cover;
background-repeat:no-repeat
}
.image3{
color: transparent;
background-image:url(third-image-url-here);
background-size:cover;
background-repeat:no-repeat
}
The code for placing the images requires carrots that I can not use in a YouTube description. To grab this code head on over to my blog at https://insidethesquare.co/squarespace-tutorial/image-in-text
Here is a link to the chrome extension I used for the block ID:
https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff
Here is the border and border-radius code that I added:
border-radius:50%;
border: 1px solid red
– – –
🔗 RELATED VIDEOS 🔗
How to create gradient text in Squarespace: https://youtu.be/x3-yBCVUlvs
How to Add An Animation Style to An Image in Squarespace 7.1: https://youtu.be/RJHqqoh_dUk
How to use new image shapes in Squarespace: https://youtu.be/RJHqqoh_dUk
– – –
💸 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
– – –
🤩 Download over 60+ 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
—
🙋 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
—
The term “Squarespace” is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥
