If you have ever tried to edit an event page in Squarespace, you might have been disappointed with the lack of flexibility. The classic editor we use on event pages isn't as customizable as a standard page, but with a little custom CSS, we can get creative. This tutorial will show you how to create a full width event page in Squarespace 7.1 with custom CSS.
The codes from the tutorial are below; here are the timestamps in case you want to jump ahead:
00:29 Learn about the limitations of editing content within the event section. You can adjust page spacing and colors, but content editing uses the classic editor with limited flexibility.
01:18 See how to add custom CSS code to break free from the grid layout and gain full-width editing capabilities.
01:55 Follow along as code is added to center the event title and adjust its font size.
02:28 Discover how to use code to center the date and time information and add space between it and the content blocks.
03:03 Explore code adjustments to control spacing between elements and create the desired visual hierarchy.
03:53 This section demonstrates changing the font style and size of the pagination text without using code through the Squarespace site styles menu.
04:49 Learn how to access the site styles menu and adjust the font weight of the event date for better readability.
05:17 This part covers adding a code snippet to completely remove pagination from your Event Collection page.
Here are the codes from this tutorial:
/* create full width event */
.eventitem{
flex-direction:column
}
/* center title */
.eventitem-title{
text-align:center;
font-size:50px!important;
color:red!important
}
.eventitem-meta{
display:flex;
justify-content: center;
margin-bottom:2rem;
}
.eventitem-meta-date {
margin-right:10px
}
/* hide pagination */
.item-pagination[data-collection-type^="events"]{
display:none
}
- - -
Related Content:
📝 Original blog post → insidethesquare.co/squarespac...
👀 How to keep event info visible on a scroll in Squarespace → insidethesquare.co/squarespac...
📅 How to customize event date tags in Squarespace → insidethesquare.co/squarespac...
❤️ Support my channel → buymeacoffee.com/insidethesquare
📖 Learn how to use Squarespace → insidethesquare.co/start
🙋♀️ Have a question? Check out my code troubleshooting tips → insidethesquare.co/code-help
- - -
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 ♥ #SquarespaceTutorial #SquarespaceTraining #eventmanagement #eventplanning #onlineevents #eventmarketing#SquarespaceTips #WebsiteDesign #BeginnerFriendly #FreeTraining #LearnSquarespace #WebDesignTutorial #SquarespaceHelp
#NewToSquarespace #SquarespaceSupport
12 июл 2024
