MODULE 4: DYNAMIC BLOCKS & ADVANCED FEATURES
17. USING THE ACCORDION BLOCK (FAQS)
18. THE SCROLLING MARQUEE
19. ADDING SITE-WIDE ANIMATIONS
20. SETTING UP CONTACT FORMS & NEWSLETTERS
21. EMBEDDING THIRD-PARTY CODES
MODULE 4: DYNAMIC BLOCKS & ADVANCED FEATURES
Welcome to Module 4! Now that your pages are built and looking beautiful on mobile, it’s time to add some interactive elements that make your website feel truly high-end.

First up is the Accordion Block. You’ve probably seen these on FAQ (Frequently Asked Questions) pages. It’s a list of titles that, when clicked, slide open to reveal a longer paragraph of text.

Accordions are a designer’s best friend because they let you pack a ton of valuable information onto a page without making it look cluttered or overwhelming. Here is how to use them!

Step 1: Adding the Accordion Block
Enter Edit mode on your page.

Click the "+" icon anywhere on the grid to add a new block.

Scroll down the menu (or use the search bar) and select Accordion.

Drag and resize the block to fit your layout.

Step 2: Editing Your Questions and Answers
Double-click the Accordion block (or click it once and hit the Pencil Icon).

In the menu that pops up, make sure you are on the Content tab.

You will see a list of default "Items." Click on the first item to open it.

Type your question into the Title box, and type your answer into the Description box.

To add a brand new question, click the Add Item button at the bottom of the list.

To rearrange the order of your questions, simply click and drag the items up and down the list!

Step 3: Styling the Accordion (Making it Pretty!)
Squarespace gives you some gorgeous ways to customize how this block looks. In the Accordion menu, click over to the Design tab.

Here you can play with the layout:

Icon: Choose whether you want a Plus icon (+), a Arrow icon, or a minimal Caret icon (v) to show visitors they can click to expand. You can also move the icon to the left or right side of the text!

Dividers: Turn on dividers to create clean, elegant lines between each of your questions. You can even change the thickness and color of these lines.

Padding: Adjust the spacing to give your questions a little more breathing room.

💡 DESIGNER SECRETS FOR ACCORDIONS:
Not Just for FAQs: While they are perfect for Frequently Asked Questions, accordions are also amazing for displaying Course Modules (Title: Module 1, Description: What you will learn inside...) or Service Packages (keeping the details hidden until the user is ready to read them).

Keep Answers Bite-Sized: The goal of an accordion is to save space. Try to keep your answers to 1-3 short paragraphs. If an answer needs a massive essay, it might be better to link them to a separate page!

The First Item Open Rule: In the Design tab, there is an option that says "Expand First Item." Turning this on automatically leaves the very first question open when the page loads. This is a great psychological trick to show users exactly how the interactive block works!

Questions looking clean and organized? Awesome. Make sure to hit SAVE in the top left corner!

Next up, we are going to add some motion to your site. Let’s head to Lesson 18: The Scrolling Marquee!
17. Using the Accordion Block (FAQs)
If you want to add that modern, high-end "custom website" feel to your template, this is the block for you!

The Scrolling Marquee (sometimes called a ticker-tape) is a line of text that automatically scrolls horizontally across the screen. It is incredibly popular in web design right now because it catches the eye without being distracting, and it's a fantastic way to highlight important keywords or announcements.

Squarespace actually has this feature built right in. Here is how to set it up:

Step 1: Adding the Scrolling Block
Enter Edit mode on your page.

Click the "+" icon anywhere on the grid to add a new block.

Scroll down the menu (or use the search bar) and select Scrolling.

A scrolling text box will appear on your page! Drag the edges of the blue box to stretch it all the way across your screen.

Step 2: Editing Your Text
Click the Scrolling block and hit the Pencil Icon (Edit).

In the Content tab, you will see a list of default text items.

Click into an item to change the text. You can add a single phrase that repeats (like "Book Your Spot Today"), or you can add multiple different phrases (like "Brand Design" ... "Web Development" ... "SEO Strategy").

Bonus: You can even add a clickable link to each piece of text!

Step 3: Customizing the Animation & Design
Now for the fun part! Click over to the Design tab in the menu to make this block look exactly how you want it.

Speed: Use the slider to make the text scroll slower or faster.

Direction: Choose whether the text moves from left-to-right, or right-to-left.

Wave Effect: Want something really funky? Toggle on the "Wave" path to make your text roll up and down like a rollercoaster instead of moving in a straight line!

Text Size: You can make the words massive for a bold design statement, or keep them small and subtle.

💡 DESIGNER SECRETS FOR MARQUEES:
The "Slow Read" Rule: The biggest mistake people make with marquees is setting the speed too fast. If your visitors get dizzy trying to read it, they will just scroll past. Keep the speed on the slower side so it feels elegant and deliberate.

The Perfect Section Divider: Marquees look amazing when they are used as a visual "break" between two large sections. Try putting a scrolling block in its very own, thin section, and change the section's background color to your bright Accent Color! It creates a beautiful ribbon effect across the page.

What to Write: Not sure what to put in your marquee? Use it for Social Proof ("Featured in Vogue • Forbes • Harper's Bazaar"), Urgency ("Enrolling Now! Only 3 Spots Left"), or simply your Brand Values ("Sustainable • Ethical • Beautiful").

Loving that motion? Make sure to hit SAVE in the top left corner!

Now that we have one element moving, let's make the entire website feel alive. Head over to the next lesson, Lesson 19: Adding Site-Wide Animations
18. The Scrolling Marquee
This is where the real magic happens! If you want your website to feel incredibly expensive, custom-coded, and highly engaging, you need to turn on site-wide animations.

Instead of your text and photos just sitting there statically when a page loads, animations make your content elegantly glide, fade, or pop into place as your visitor scrolls down the page. It creates a beautiful, dynamic reading experience.

The best part? You can apply this effect to your entire website with just three clicks. Here is how:

Step 1: Open the Animations Menu
Go to your main Squarespace dashboard.

Click the Paintbrush Icon in the top right corner to open Site Styles.

Click on Animations.

Step 2: Choose Your Animation Style
At the top of the menu, make sure the "Enable Site Animations" toggle is turned ON. Now, you will see a list of different animation effects. Click through them to see a live preview of how they look!

Here are the most popular styles:

Fade: The most elegant and subtle. Elements softly appear out of nowhere as you scroll.

Scale: Photos and text slightly zoom in as they appear. Great for creative portfolios or bold brands.

Slide: Elements slide up from the bottom. Very modern and clean!

Clip: The content reveals itself from behind an invisible box. This is a very high-end, editorial look.

Flex: A slightly bouncy, energetic reveal. Perfect for fun, approachable brands.

Step 3: Adjust the Speed
Once you pick a style you love, you can fine-tune how quickly it happens.

Right below the styles, you will see an Animation Speed option.

You can choose between Slow, Medium, and Fast.

💡 DESIGNER SECRETS FOR ANIMATIONS:
Less is Often More: While it's tempting to use the bounciest, fastest animation available, the most luxurious and professional websites usually stick to the basics. Fade or Slide set to a Medium or Slow speed gives a gorgeous, buttery-smooth feel without distracting the reader from your actual message.

The "First Scroll" Effect: Keep in mind that these animations trigger as the user scrolls. If they scroll down quickly, the elements will gracefully catch up to them. This creates a psychological sense of momentum that keeps people scrolling longer!

It Works on Mobile, Too: These animations automatically translate to the mobile version of your site, making your phone layout feel just as interactive as an app.

Loving the new movement? Make sure to hit SAVE in the top left corner!

Your site is looking absolutely stunning. Now, let’s make sure it can actually generate leads and sales for your business! Let's head over to Lesson 20: Setting Up Contact Forms & Newsletters.
19. Adding Site-Wide Animations
Your website looks amazing, but a beautiful website isn't just a digital brochure—it’s a tool to grow your business! Whether you want clients to send you an inquiry or visitors to join your email list, forms are how you capture those valuable leads.

By default, the forms in your template look great, but they don't know where to send the messages yet! Here is the crucial step-by-step process to connect your forms so you never miss an email.

Step 1: Customizing Your Questions (Form Fields)
Let’s start with a standard Contact Form.

Enter Edit mode on the page with your form.

Click the Form block and hit the Pencil Icon (Edit).

In the menu, click on Edit Form Fields.

Here, you can decide exactly what you want to ask your clients. You can delete fields you don’t need, or click Add Field to ask for their Phone Number, Company Name, or even add a Dropdown menu (e.g., "What service are you interested in?").

Step 2: Setting Up the "Storage" (Crucial Step!)
If you don't do this step, your messages will vanish into the internet! You have to tell Squarespace where to send the information when someone clicks submit.

Still inside the Form menu, click the Storage tab.

Email Address: The easiest option! Just type in your business email address. When a client fills out the form, their message will instantly pop up in your inbox.

Additional Options: You can also connect your form to a Google Sheet (so every submission adds a new row to a spreadsheet) or directly to Mailchimp if you are collecting leads.

Step 3: The "Post-Submit" Message
What happens after they hit submit?

Click the Post-Submit tab in the form menu.

You can type a simple, friendly message here like, "Thanks for reaching out! I'll get back to you within 48 hours."

Advanced Option: You can also choose to Redirect them to a completely different page. Many business owners create a hidden "Thank You" page with a welcome video or a link to download a free guide!

Step 4: Newsletter Blocks (For Email Lists)
If you have a Newsletter Block in your footer to collect email subscribers, the process is very similar, but the storage is slightly different.

Click the Newsletter block and hit the Pencil Icon.

Go to the Storage tab.

Here, you can select Squarespace Email Campaigns (Squarespace's built-in email marketing tool) or connect a third-party platform like Mailchimp or Google Drive.

💡 DESIGNER SECRETS FOR HIGH-CONVERTING FORMS:
The "Short Form" Rule: Every extra question you ask lowers the chance that a visitor will actually finish the form. If you don't absolutely need their phone number or their last name for the first point of contact, delete those fields! Keep it as short and sweet as possible.

Change the Button Text: The word "Submit" feels very robotic and boring. In the Form menu under the Design tab, you can change the button text to something exciting and action-oriented, like "Send Inquiry," "Join the Club," or "Let's Chat!"

TEST YOUR FORM! This is the biggest pro-tip of all. Once your site is live, pretend to be a customer. Fill out your own contact form, hit send, and go check your email to make sure it actually came through correctly.

Storage connected and button text updated? Awesome. Make sure to hit SAVE!

You are doing incredible. Now, what if you use a totally different platform for your calendar or checkout, like Calendly or Thrivecart? We will cover exactly how to add those to your site in Lesson 21: Embedding Third-Party Codes!
20. Setting Up Contact Forms & Newsletters
Your website is a powerful tool, but chances are, you use other software to run your business behind the scenes. Maybe you use Calendly for booking calls, Flodesk or ConvertKit for beautiful email opt-ins, or HoneyBook for client questionnaires.

Instead of sending your visitors away to a different website through a button, you can actually embed those tools directly onto your Squarespace pages! This creates a seamless, professional experience for your clients.

Here is how to embed almost any third-party tool using a Code Block.

Step 1: Copy the Code from Your Provider
Before you start in Squarespace, you need the actual code.

Log into your third-party software (like Calendly or Flodesk).

Look for an option that says Share, Publish, or Embed.

You are looking for a chunk of code (usually called HTML or an Inline Embed Code). It often starts with <script> or <iframe>.

Copy that entire block of code to your clipboard.

Step 2: Add a Code Block in Squarespace
Go to your Squarespace site and enter Edit mode on the page where you want the widget to appear.

Click the "+" icon to add a new block.

Scroll down the menu (or type in the search bar) and select Code.

Drag and resize this new Code block roughly to the size you want your widget to be.

Step 3: Paste Your Code
Click the Code block and hit the Pencil Icon (Edit).

A menu will pop up with some default text inside (usually <p>Hello, World!</p>).

Delete that default text, and paste the code you copied from your third-party provider.

Click anywhere outside the menu to close it.

Step 4: The "Script Disabled" Warning (Don't Panic!)
When you paste your code, you probably won't see your beautiful calendar or form right away. Instead, you might see a gray box that says "Script Disabled" or "Preview in Safe Mode."

This is totally normal! Squarespace disables complex scripts while you are in Edit mode so that the code doesn't accidentally break the page builder.

To actually see your embedded widget, you simply need to click SAVE in the top left corner, and then exit Edit mode to view the page normally.

💡 DESIGNER SECRETS FOR EMBEDDING:
The Business Plan Requirement: To use advanced code blocks for third-party widgets (and to add any custom CSS to your site), Squarespace requires you to be on the Business Plan or higher. If you are on the basic Personal plan, these scripts will usually be blocked from loading.

Mind the Mobile View: Just like photos and text, you need to check how your Code block looks on mobile! Switch to the mobile view and stretch the code block so it has plenty of room. If the embedded form gets cut off on phones, you just need to drag the bottom of the blue block down to make it taller.

Use the "Embed" Block for Simple Links: If you are just trying to embed a YouTube video, a Spotify playlist, or a simple podcast episode, you don't need messy code! Instead of the "Code" block, use Squarespace's built-in Embed block, where you can simply paste the URL, and Squarespace handles the rest.

Widget looking seamless? Make sure to hit SAVE!

Congratulations, you have officially conquered Module 4: Dynamic Blocks & Advanced Features! You now know how to make your website interactive, engaging, and deeply connected to your business systems.

Next up, we are moving into a brand new section: Module 5: Blogging. If your template includes a blog (or you want to start one), this module is for you!
21. Embedding Third-Party Codes
Made on
Tilda