Buy me a coffee

Add an Image Block over Gallery Slideshow

Suppose you want to move 2 Image Blocks over 2 Slideshows, you can follow these.

#1. Add a Section with 2 Image Blocks



#2. Use Squarespace ID Finder to find the ID of 2 Image Blocks and 2 Slideshows. In my example, we will have:

  • Image Block 1 (Left image): #block-yui_3_17_2_1_1716948754371_2168


  • Image Block 2 (Right image): #block-yui_3_17_2_1_1716948754371_3229


  • Left Slideshow: section[data-section-id=”6655814af27321176a65fb4e”]


  • Right Slideshow: section[data-section-id=”6655814af27321176a65fb50″]


#3. Use this code to Code Injection – Footer

<script src=""></script>
 $(document).ready(function() {
  	// VFX
  $('div#block-yui_3_17_2_1_1716948754371_2168').appendTo('section[data-section-id="6655814af27321176a65fb4e"] .gallery-fullscreen-slideshow-list');
  	// Postproduction
  $('div#block-yui_3_17_2_1_1716948754371_3229').appendTo('section[data-section-id="6655814af27321176a65fb50"] .gallery-fullscreen-slideshow-list');   


#4. Use this code to Custom CSS box to align the image center + adjust the image block size. .image-block {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    max-width: 350px;
    z-index: 999999


#5. Result


Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to:
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder