Jump to content

Need help adjusting code from codepen to work with my site.

Recommended Posts

Hello folks, 

 

I'm new to squarespace and I'm trying to implement some code from codepen on my site. I want to implement this custom carousel to replace the current carosuel that I have on my homepage. Can anyone help?

Here is the code I want to implement: Codepen Code

Here is my website link: Squarespace Site

Password is 123

Much appreciated!

Screenshot 2024-02-02 235318.png

image_2024-02-03_000731575.png

Edited by 6adawy
Link to comment

Hi @6adawy, welcome to Squarespace! Squarespace has many built-in features and very easy to use, but if you want to add some advance customisations, you can do so via a few methods. 

CSS:

This is where you can add CSS code. This allows you to alter the styling of any elements of your website. E.g. add a border to an image block. 

Code Injection:

You can add site wide or per page code injection. As well as CSS code, you can add code such as JavaScript to make changes that CSS code can't do. E.g. 

Code Block:

This is a block where you can add on a page via the Add Block button. This allows you to add an element to your page that can't be done via the built-in features. E.g. add a Table.  

Embed code:

This is a block that allows you to embed things such as a third party plugin. E.g. mailerlite. 

-----------

With your codepen, a rough guide, you would want to use the html code in a code block, the JavaScript in Code Injection, and the CSS in either the code block or in the CSS editor. As a rule of thumb, CSS code is safe, anything else can break your site unexpectedly if there are errors or used improperly. 

As your codepen code uses CSS, html and JavaScript, I suggest getting yourself familiar with concepts of Custom code. Here is the Squarespace article on Adding custom code to your site. This carries a warning and also tells you which pricing plan you would need to use each of the custom code feature. 

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Squarespace Nerd

💻 💁‍♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn?
👩‍💻 💁‍♀️ Website help <- send me your to-do list. From code to plugin to domain setup.
🧰 See the tools I use (contain affiliate links)
 Did I help? I like coffee (Thank you)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.