Скачать или смотреть How to customize the footer of a lesson in a Squarespace course / Squarespace Lesson Footer Tutorial

FREE course on courses: learn how to use this new feature in Squarespace at https://insidethesquare.co/course
- -
In this quick tutorial, learn how to customize the lesson footer in your Squarespace course with CSS! You'll learn how to change the color and position of the footer button and alter the footer's background color to match your site's design.

Why use custom code? The footer background and layout can not be edited directly in Squarespace. The color of the button can, but any changes you make to this button will affect all the buttons assigned to that same style across your entire site. CSS makes it possible for us to make changes that only affect the lesson page.

Here are some time stamps if you want to jump ahead:
0:44 How to change the button style
1:18 How to add custom CSS to Squarespace
1:27 Custom CSS for the footer button colors
02:09 Footer button hover effects for a Squarespace lesson
02:40 Center the footer button in a Squarespace lesson
03:10 Change the lesson footer background
03:47 Next steps & related content
- -
📌 Related Content📌
→ FREE course on courses: https://insidethesquare.co/course
→ Squarespace Lesson settings & design options:    • How to set up a lesson in a Squarespace Co...  
→ Squarespace button styles:    • June 2022 Update! New Squarespace Button S...  
- -
Here are the codes from this tutorial:
/* change the button colors */
.course-item__footer .course-item__next-lesson-button {
background: #F6EDCE!important;
border-color:#EDD17D!important
}
/* change the button colors on a hover */
.course-item__footer .course-item__next-lesson-button:hover {
background: #fff!important;
color:#333!important
}
/* change the footer background */
.course-item__footer-background{
background:#EDD17D
}

/* center the footer button */
.course-item__footer-content {
justify-content: center;
}
/* align the footer button to the left */
.course-item__footer-content {
justify-content: flex-start;
}

- -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ https://buymeacoffee.com/insidethesquare
- -
📑 Get access to my collection of CSS codes for Squarespace at https://insidethesquare.co/css
- -
🙋 Need some help? Visit ​https://insidethesquare.co/code-help​ to see my current support options.
- -
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM →   / thinkinsidethesquare  
👍 FACEBOOK →   / insidethesquare  
📌 PINTEREST →   / insidethesquare  
- -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → https://insidethesquare.co/inside10
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥