Sticky images training

Sticky images training

Add To Cart

A step-by-step tutorial-style training for Squarespace designers

Learn how to “stick” images to the sides of your website to create the half/half layouts and bold “ooh! how can I do that?” designs you keep seeing on Pinterest... whether you have an idea on how to achieve it or no clue at all!

Sticky images.gif

There’s not just ONE way to do it

That’s why this training walks you through 7 different methods or approaches that you can apply to your client’s website, based on the settings you’re already using.



Every method is broken down step-by-step, in written tutorials, with all the code that’s being used so you can easily tweak it to target your own site.



Every method shows you what its result looks like depending on the width setting you’re using in the style editor, so you can choose the one that adapts better to your situation.



Every method walks you through how to make your “sticky” images responsive, so you can control the way it looks at all times.


Take a peek at what you’ll learn to do!

Side-sticking images

3 different ways to “stick” an image, decoration, mockup or any other graphic to the edge of the website, independently from the section banner.


Creating a half/half layout

4 different methods for creating a half/half layout using your banner image, without having to cover part of your image and based on if you’re using parallax or not (2 methods for each case)!


Bottom-sticking images to an index section

3 different ways to “stick” an image to the bottom of an index section – based on the methods for the side-sticking layout – without setting it as a banner image so it doesn’t get cropped off (unless YOU want it to).


Got q’s? I have A’s!

  1. Is this training only for designers?

    It’s aimed at designers since none of the lessons cover how to use any of the Squarespace settings or blocks involved. So, it will be much easier for you if you know the platform inside and out to be able to follow along with ease.

  2. Do I need to know code?

    It’s recommended that you have at least a basic knowledge in CSS to benefit fully from the content, since basic terms/properties will not be explained in order to keep things simple.

  3. Can the methods from this training be applied to any template?

    Considering the most common uses of “sticky” images and to make things easy to target via CSS, the examples involve index pages from one of the Brine family templates (Rover). The methods may be used on regular pages and any other Squarespace template, however the code will most likely have to be modified beyond what is covered in the training.

  4. Is this a video training?

    No. The lessons of this training are step-by-step written tutorials with lots of screenshots. This way you can quickly look back on any of the explanations and get back to customizing without missing a beat!

  5. How is this training broken down?

    There’s a LOT of information in this training, so to avoid making it overwhelming, each lesson covers ONE method (including its corresponding tweaks for larger and smaller screens) for ONE area of the website.

  6. Can I see the live result?

    Absolutely! It’s right here.

  7. You couldn’t come up with better ways to name the things we’ll be learning to do?

    Nope, sorry, but I’m all ears!

  8. I have other questions

    Then don’t hesitate to get in touch!

  9. What if I don’t like this training or it doesn’t teach me what I wanted to learn?

    Unfortunately, there are NO refunds or exchanges since this is a digital product. However, I’d never want you to purchase something you’re not 100% sure about so please don’t hesitate to reach out and ask questions to be sure this training is for you before clicking the buy button!