Nick_SquareKicker

Introducing The SquareKicker Template Store Premium Squarespace Templates Created by Industry Experts Building stunning, industry-specific websites just got easier—and faster! 🚀 With our powerful, professionally designed templates, creating a website for your clients or your business has never been more seamless. Ready to see it in action? Watch our launch video and tutorials below! How to Install a SquareKicker Template With SquareKicker’s one-of-a-kind Template Engine system allows you to quickly install the template in a Squarespace website immediately after purchase. Start creating your site at once, with a quick and simple install process. No website handovers or waiting for access emails. Unlike other templates on the market, SquareKicker Templates can be installed on any new or existing Squarespace 7.1 website. Your existing website will inherit the color, font, and site styles of your new SquareKicker Template. How to Add Pages and Sections to your Website SquareKicker's Template Engine system allows you to natively add Template pages to your website just like adding a Squarespace template page with no need to duplicate pages. Template Sections can also be added natively very similar to Saved Sections but packed with hand crafted designs and loaded with power SquareKicker animations. Why are SquareKicker Templates different: Crafted by designers - High quality pages and sections created by professional Squarespace designers for a website that stands out. Instant access - Start creating immediately, with a quick and simple install process. No contributor access or waiting for emails. Dedicated support - A team of passionate humans are ready to help you succeed on your template journey. No chatbots here. Install on any 7.1 Site - Compatible with any new or existing site on the latest Squarespace website editor, Fluid Engine Easy customization - An intuitive visual builder empowers you to easily add and style your content and make desired customizations. Responsive design - Your website will shine on mobile, tablet, laptop, and desktop devices with responsive customizations built in. Industry specific - Tailored site structure and design provides the perfect template for your brand. No generic templates. Ultimate SEO tips - An essential guide from industry experts SEOSpace to ensure your website attracts visitors. Free extension subscription - A 30 day SquareKicker Extension subscription for customizations with premium design and animation tools. Squarespace discount - 10% off your Squarespace subscription so you can jump into creating a website you’re proud of. Easy Squarespace guide - A helpful guide to get you started on Squarespace with ease. Bonus guides - Tips from our experts to help you navigate design and color choices for a brand-forward site.

Hi @SteelCraft, I've sent you a DM so I can further help you with your specific issue.

Hi @SteelCraft, I think you may be making things harder than they should. be. There are a few bit of custom code you may need for this, but you can accomplish a lot of these without code any you make just be coding things you can already to in Squarespace. For a few extras, you might be able to use SquareKicker's no-code design extension. These below tips and screenshots might say you a few hours trying to hand code something that should just be simple. Set Mobile Menu Colors: Set colors for Overlay Menu for a Specific Page with SquareKicker , even make logo white or black for specific page. Set Header Colors Theme or Adaptive to 1st section theme: Set Header Colors for Theme:

Hi @qiqi, An easy way to customise your Scrolling Block without needing code is using SquareKicker. You can customise the text and color of your block with only a couple clicks. You can also adjust the hover color of this block. Here is a little sample of this in a SquareKicker Instagram Reel: https://www.instagram.com/reel/CybcNt6CkpM/?igsh=MWpnanB3bXZzZXJuNA==

@camerondaft & @KatherineS,you don’t need to use custom code if you have SquareKicker. You can use SquareKicker’s Scrolling Effects to do this by setting up a “Shape Block” as your custom background color and then “on scroll, fade-in the new Shape Block Color. You can see that here in a Instagram post but also watch the Scrolling Effects Tutorials to learn more.

If you don’t want to spend hours trying to figure out how to use custom code a solution to add custom mouse cursors to your Squarespace site try this no-code option using SquareKicker. With a couple clicks you can change your mouse cursor to an Emoji, Text or Shape. You can even target different mouse cursors for the Whole Site or Specific Page, Section or Block and even change when you hover on a link. Check out the video tutorial here:

You can add a Sticky Footer // Fixed Footer with SquareKicker with just one click. I think this is what you are after and you can even navigate to other size screens and turn this on or off for specific devices. This is a premium SquareKicker Feature Footer Reveal __ Fixed Footer.mp4

You can add a Sticky Footer // Fixed Footer with SquareKicker with just one click. This is a premium SquareKicker Feature Footer Reveal __ Fixed Footer.mp4

That would do it. It's a common mistake to add an overflow-x hidden to the body and html in attempt to stop overflow as it has other consequences. You'll want to use overflow-x: clip to just the body which has a better outcome. body { overflow-x: clip !important; } SquareKicker automatically includes this with the SquareKicker build when you use specific features that might cause overflow such as; block position, scrolling effects, etc. Read more about this overflow css and understanding overflow on Squarespace in a blog post here: https://squarekicker.com/blog/overcoming-css-challenges-how-squarekicker-handles-sticky-situations

@moonlitdesign, When your horizontal scrolling sections appear that have a 1 second delay like there is a transition speed attached to these. I think this is caused by the below custom CSS which will affect how the page scrolls in. Is this your issue? @keyframes SlideIn { 0% { transform: translatex(100%) } 100% { transform: translatex(0) } } #page { animation: 1s ease-out SlideIn !important }

Hi @moonlitdesign, You can Enable Horizontal Scroll on mobile with SquareKicker using the Toggle in the tool settings "Mobile Devices" See Screenshot below. It's not on by default because normally there is too much content in the section to all fit on a mobile device and content gets cut off on smaller devices so you may want to reduce the content if you want to enable horizontal scrolling on mobile. It looks like the space you are describing is caused by extra rows in the Fluid Engine Grid. You can use Squarespace's Mobile Edit mode to reduce these rows. The rows of a section is one of the only section settings that is unique to mobile and desktop. If you need further help you can reach out to support@squarekicker.com

Just happy to help. I've been there more times then I can count. Writing code in Squarespace can be so nice and easy, but when things don't work, debugging them can be a pain and you just loose hours of productivity in the end. It's where the idea of SquareKicker came from, because I was sure I wasn't the only one who wished there was and easier way to build custom websites that would free me from technical issues and allow me to stay focused on the design and creativity.

Hi @goosbumps, I've got your DM asking for some help. I've had a look at your site and it just looks like you are missing a closing </style> tag at the end of your CSS in your Footer. Without this, your SQSP code is breaking the SVG's on your site. You could move your CSS to your Custom CSS area so you don't need opening and closing style tags and just leave your Scripts in your Footer. FYI - To reduce your code, you could do most of what your custom code is doing with SquareKicker then you won't have to worry about broken code messing up your site: ie SquareKicker can hide your Social Icons in you overlay menu per screen size, has a built in Back to Top Button, hover animations, etc.

Hi @baileyrl48, SquareKicker only works for Squarespace 7.1 but works on both Classic and Fluid Engine. Now that there is a 7.0 -> 7.1 migration tool, you can migrate your site to 7.1 and install SquareKicker! Check out this helpful video here:

Hi @CliftonRhoad, Have you tried SquareKicker Sticky Blocks? https://www.squarekicker.com/letsmakethis/no-code-sticky-blocks