Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Styling the Events Page

You can use the Site Styles panel to customize the way your Events Page appears. This is a great way to align your events' design and presentation with your site's brand.

Note: The discontinued Marquee family has different style tweaks.
This guide is for version 7.0. To style Events Pages in version 7.1, visit Version 7.1 style and design options.

Landing page vs. event item pages

Before styling your events, it's a good idea to understand how Squarespace structures them on all sites. Events are organized in two parts: Events Pages, which create a browsable landing page, and then individual event item pages. These areas share some style tweaks, but also have their own style options.

To learn more, visit Using the Events Page.

Choose a layout

Hinweis: Die Kalender-Ansicht ist in Version 7.1 nicht verfügbar. Verwenden Sie für einen ähnlichen Effekt einen Kalender-Block auf einer Layout-Seite, nachdem Sie Ihre Events-Seite eingerichtet haben.

You can display events as a list or a calendar. Switch the display at any time in page settings.  If you have multiple Events Pages, you can display some as calendars and some as lists. You might want to pick one to keep a consistent look.

  1. In the Pages panel, hover over an Events Page and click the gear-icon.
  2. Use the Default Event View drop-down to select either List or Calendar.
  3. Klicken Sie auf Speichern und aktualisieren Sie die Seite.

List layout

Die Listenansicht ist eine gute Wahl, wenn Sie möchten, dass Ihre Events-Seite eher wie ein Blog als wie ein Kalender aussieht.

  • Events display in a list with descriptions, excerpts, and thumbnail images.
  • Use the List view option if you want to display upcoming and past events.
  • You can display up to 250 upcoming and 30 past events.

Calendar layout

In Calendar view (version 7.0 only), events display in a calendar with interactive features:

  • If an event has a thumbnail image, the thumbnail displays. It's cropped to fit the square.
  • If an event has an excerpt, it displays on hover.
  • Arrow controls appear at the top to navigate by month.
  • Any days without events will be gray.
  • If a day has more than one event, every event's time and title display in the day's box. The height of the week expands, and thumbnails won't display.

The calendar adjusts to fit the browser window so it looks great on any device.

  • Wenn die Block-Breite kleiner als 600 Pixel ist, werden Titel, Veranstaltungszeiten und Auszüge angezeigt, aber keine Vorschaubilder.
  • Wenn die Block-Breite kleiner als 300 Pixel ist, werden nur Titel angezeigt.


Style the Events Page

After choosing between List or Calendar view:

  1. Go to the Events Page.
  2. From the Home Menu, click Design, then Site Styles
  3. Use the Events tweaks to adjust the landing page style.
  4. For tweaks specific to individual event item pages, first ensure Disable Item Pages is unchecked. Then exit Site Styles, open an event, and re-enter Site Styles.

For more help with opening Site Styles, visit Making style changes.


  • Klicken Sie auf einen beliebigen Bereich der Seite in der Vorschau, um nur die für diesen Bereich verfügbaren Stil-Anpassungen anzuzeigen und den Rest auszublenden.
  • If you have multiple Events Pages, style changes will apply to all of them to create a consistent look.
  • Your template may support more features, such as banner images or page headers, that affect how the Events Page looks.

Style the landing page

In both List and Calendar view:

  • Check Disable Item Pages to disable the title links to individual event pages. When left unchecked, clicking an event's title opens the individual event page.
  • Check 24-Hour Time to display event times in 24-hour international standard time display.

List view tweaks

Landing pages in List view have more style options.

Choose how the list displays with the Stacked View tweak.

These tweaks adjust the thumbnail and date that can display next to or below the event details. Where they display depends on your Stacked View setting.

  • Show Past Events - Show or hide past events.
  • Show Thumbnails - Show or hide the thumbnail image that displays above or to the left of the event.
  • Thumbnail Size - Set the shape of the thumbnail image.
  • Show Date Tag - Show or hide the date tag that displays over or in place of the thumbnail image.
  • Show Date Tag w/ Time - Include a time stamp with the date tag.

These tweaks affect the event listing:

  • Show Categories - Show or hide the categories.
  • Show Date - Show or hide the date.
  • Show Time - Show or hide the time.
  • Show Location - Show or hide the location.
  • Show Export Links - Show or hide export links to Google Calendar or iCal.
  • Show Social Buttons - Show or hide likes and a Share button.
  • Show Show Excerpt - Show or hide the event description or excerpt text.
  • Show Button - Show or hide a View Event button.

Style individual events

These tweaks affect individual event pages:

  • Show Export Links - Add export links to Google Calendar or iCal.
  • Show Social Buttons - Add likes and a Share button.
  • Show Back Link - Add a Back To All Events link.
  • 24-Hour Time - Display your event time using the 24-hour international standard time display.
  • Stacked View - Choose the layout.

War dieser Beitrag hilfreich?
42 von 135 fanden dies hilfreich
Styling the Events Page