This is the 7.1 version

Step 1: Create Your Page

Create the full page including the section you want to ‘push into’ the footer. There are no limitations on what you can place in the sections!

Step 2: Add a code block

Add a code block in that section you want to push down, and insert this code:

<div id="fhsplitfooter">6/left</div>

If you prefer that section to be to the right, change left to right.
Squarespace use a 12-column layout so setting it to ‘6/…’ splits the footer in half. Change 6 into e.g. 4 if you prefer to have that section take up 4/12th of the footer.

Step 3: Add CSS for 7.1

// FOOTER PLUGIN START
  .fh-section-footer-wrapper {
    margin-top: -50px !important; // change this to adjust the height difference between the section and footer 
  }
  .fh-section-footer-wrapper .fhf{
  padding-top: 50px !important; // change this to adjust the height difference between the footer and the section
  }
  .fh-section-wrapper{
  border-radius: 0 15px 0 0 !important; // change this set the radius and on which corner. The order is: left top/right top/right bottom/left bottom
  }


@media screen and (max-width: 800px) {
   .fh-section-footer-wrapper {
    margin-top: 0 !important;
  } // change the pixel width to your liking
 .fh-section-wrapper{
  order:1 !important;
  }
 .fh-footer-wrapper{
  order:2 !important;
  }

  .fh-section-footer-wrapper .fhf{
  padding-top:0 !important;
  }
  .fh-sections{
    width:100% !important;
  }
  .fh-section-footer-wrapper{
    -ms-box-orient: horizontal !important;
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -moz-flex !important;
    display: -webkit-flex !important;
    display: flex !important;
    -webkit-flex-flow: row wrap !important;
    flex-flow: row wrap !important;
  }
}
// END

Step 4: Insert Code for 7.1

Go to Code Injection (Settings/Advanced/Code Injection) and copy and paste the code below in the HEADER Code Injection field. This is the 7.1 code. If you already use this code, do not add this!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Go to Code Injection (Settings/Advanced/Code Injection) and copy and paste the code below in the FOOTER Code Injection field. This is the 7.1 code.

Notice the “show” in below code? That indicates that the plugin is “showing” the Split Footer. To not show the split so you can edit the footer, change “show” into “hide”.

<!-- SPLIT FOOTER START -->
<script>
  var fhsplitfooterpreview = "show";
</script>
<!--- DON'T EDIT BELOW THIS LINE - SUPPORT NOT PROVIDED IF EDITING BELOW THIS LINE --->
<link rel="stylesheet" href="https://aws-eu-sqsmods.s3.eu-west-2.amazonaws.com/assets/split-footer/71/css/split-footer.css">
<script src="https://aws-eu-sqsmods.s3.eu-west-2.amazonaws.com/assets/split-footer/71/js/split-footer.js" defer=""></script>
<!--- SQS MOD FOOTER SECTION PLUGIN END --->

Step 5: Customization

Customizations

If you prefer to NOT have a raised design, change the CSS code as follows:
.fh-section-footer-wrapper {
margin-top: 0px; // change this to adjust the height difference between the section and footer
}

.fh-section-footer-wrapper .fhf {
padding-top: 0px; // change this to adjust the height difference between the footer and the section
}

.fh-section-wrapper {
border-radius: 0 0 0 0; // change this set the radius and on which corner. The order is: left top/right top/right bottom/left bottom
}