How to add a chapter description to a Squarespace course

Опубликовано: 03 Сентябрь 2024
на канале: InsideTheSquare with Becca Harpain
176
12

In this tutorial, I'll show you how to add custom excerpts to your chapter titles using a bit of CSS magic. All code snippets are in the description below. Be sure to update the text & style for your own unique website. Don't forget to like, subscribe, and share your results in the comments!

Resource Links:
📝 Original blog post → https://insidethesquare.co/squarespac...
🎓 Free Code Training → https://insidethesquare.co/learn
📚 Squarespace CSS Code Collection → https://insidethesquare.co/css
📄 How to add code to a single page → https://insidethesquare.co/squarespac...
🙋‍♀️ Have a question? Check out my code troubleshooting tips → https://insidethesquare.co/code-help
- -
Code from the tutorial - - be sure to change colors, font, size values, and text!
// Hide lesson timestamp
.course-list__grid-course-item-lesson-meta time, .course-list__chapter-duration, .course-list__grid-chapter-item-chapter-meta{
display:none
}
// Give the chapter section a background
.course-list__grid .course-list__grid-chapter-item{
background:#e5f5f6;
border-radius:10px;
padding:20px
}
// Style the excerpt & add the text for the first chapter
.course-list__grid .course-list__grid-chapter-item-header{
border-bottom:none
}
.course-list__grid-chapter-item
.course-list__grid-chapter-item-chapter-name:after{
content:"\A Describe the first chapter with a sentence or two";
white-space:pre;
font-size:1rem;
font-weight:300!important;
line-height:1rem;
text-wrap: wrap
}
// Change the text for the second chapter
.course-list__grid-chapter-item:nth-of-type(2) .course-list__grid-chapter-item-chapter-name:after{
content:"\A Describe the second chapter with a sentence or two"
}
// Change the text for the third chapter
.course-list__grid-chapter-item:nth-of-type(3) .course-list__grid-chapter-item-chapter-name:after{
content:"\A Describe the third chapter with a sentence or two"
}

- -
The term Squarespace is a trademark of Squarespace, Inc. This content is not affiliated with Squarespace Inc. The accuracy of this information is subject to change. #squarespacetips #squarespacetutorial #squarespace #learnsquarespace #learncoding #squarespacetricks #squarespacetraining #squarespacecode


Смотрите видео How to add a chapter description to a Squarespace course онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь InsideTheSquare with Becca Harpain 03 Сентябрь 2024, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 176 раз и оно понравилось 12 людям.