Nota: Si bien hemos traducido las guías más populares al español, algunas guías están disponibles solamente en inglés.

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

Note: Calendar view isn’t available in version 7.1. For a similar effect, use a Calendar Block on a Layout Page after setting up your Events Page.

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. Haz clic en Guardar y actualiza la página.

List layout

List view is a great option if you want your Events Page to look more like a blog than a calendar.

  • 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.

  • Si el ancho del bloque es menor de 600 píxeles, los títulos, la hora del evento y los fragmentos aparecen en la pantalla, aunque no la imagen en miniatura.
  • Si el ancho del bloque es menor de 300 píxeles, solo aparecen los títulos.

 

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.

Consejos:

  • En la vista previa, haz clic en cualquier área de la página para que aparezcan los retoques de estilo disponibles para esa área y ocultar el resto.
  • 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.

¿Fue útil este artículo?
Usuarios a los que les pareció útil: 42 de 135