Ir al contenido principal

Biblioteca de elementos

Esta biblioteca cubre todos los elementos personalizados disponibles en tu sitio web, y cómo agregar y configurar cada uno.

La mayoría de los elementos obtienen sus datos en vivo desde tu app de 360Player — los mismos equipos, publicaciones, partidos, resultados, inscripciones y eventos descritos en 360Player Integrations. Configurar esos datos allí es lo que hace que aparezcan aquí; cada elemento a continuación indica exactamente qué datos utiliza y enlaza de vuelta a la sección correspondiente.


How to add an element

  1. Haz clic en Add en el panel izquierdo, o en el símbolo + que aparece dentro de una sección de la página, para abrir el panel de elementos.

  2. Busca o desplázate para encontrar el elemento que quieres agregar — buscar "360" muestra todos los elementos de 360Player en la biblioteca.

  3. Agrégalo a la página: haz clic en él si abriste el panel desde el + dentro de una sección, o arrástralo a la página si lo abriste desde Add en el panel izquierdo.

  4. Con el elemento seleccionado en modo edición, haz clic en Content en el panel derecho para editar su configuración de contenido, o en Design para editar su configuración de diseño/estilo.

  5. Ajusta la configuración indicada más abajo (la sección de cada elemento describe lo que está disponible) hasta que quedes satisfecho con el resultado.


360 Matches & Results Slider (App)

Fuente de datos: obtiene datos de tus 360Player Upcoming Matches y Results — filtra por equipo usando el Group ID de cada equipo.

Qué hace

  • Muestra los próximos partidos y/o resultados anteriores en un slider horizontal (carrusel), obteniendo datos de las colecciones Matches/Results de tu sitio.

  • Cada tarjeta de partido muestra los nombres de los equipos, el resultado (para Results) o "VS" (para próximos partidos), fecha/hora/lugar y el nombre de la competición.

  • Incluye un filtro desplegable "Group" (por ejemplo, para filtrar por división/liga) y, opcionalmente, botones de alternancia "All / Upcoming / Results".

  • Tiene flechas de navegación y una barra de progreso para recorrer las diapositivas.

  • Muestra un mensaje personalizable de "no matches found" cuando no hay datos, y un indicador de carga mientras se obtienen los datos.

Cómo usarlo — configuración del editor de contenido (Content)

  • What to Show: elige si se muestran tanto próximos partidos como resultados (con botones de filtro), solo próximos partidos, o solo resultados.

  • Title (opcional) + Title Style (H1/H2): agrega un título encima del widget; déjalo en blanco para ocultarlo.

  • Texto y enlace de "View All": agrega un enlace/botón (por ejemplo, a una página de calendario completo) que se muestra junto al título.

  • Filtering (grupo desplegable): filtra por equipos específicos (por Group ID o nombre del equipo, separados por comas) y personaliza la etiqueta del desplegable "All Groups".

  • Match Limits (grupo desplegable): establece el número máximo de próximos partidos, el máximo de resultados, y cuántos resultados recientes se muestran antes de los próximos partidos en la vista "All".

  • Labels & Messages (grupo desplegable): personaliza el texto de los botones de filtro "All / Upcoming / Results" y el mensaje cuando no hay datos.

Cómo usarlo — configuración del panel de diseño (Design)

  • Widget Title: tipografía del título y del enlace "View All", además del color al pasar el cursor.

  • Filter Bar: colores/tipografía de los botones de filtro activos e inactivos, radio de esquina para la barra de filtros/botones/desplegable de grupo.

  • Slider Arrows: fondo, color, borde, estados al pasar el cursor, y colores y altura de la pista/relleno de la barra de progreso.

  • Match Card: fondo, borde, radio de esquina, relleno (padding) y espacio entre tarjetas.

  • Team Names, Score & VS, y Competition Footer: tipografía de cada elemento de texto, además del estilo del divisor del pie.


360 Posts (App)

Fuente de datos: obtiene datos de tus 360Player Posts marcadas como Public — filtra o excluye equipos específicos usando Group ID.

Qué hace

  • Muestra automáticamente las publicaciones de tus grupos en una cuadrícula de tarjetas, con la opción de destacar la publicación más reciente, filtrar por grupo, y cargar más publicaciones mediante paginación.

Cómo usarlo — configuración del editor de contenido (Content)

  • Título y enlace "View All": define un título de sección (H1 o H2), una descripción de texto enriquecido y, opcionalmente, un enlace "View All" junto al título.

  • Layout y paginación: ruta de la página de publicaciones (usada para construir el enlace de cada tarjeta); activar/desactivar "Featured Post" (la publicación más reciente se muestra más grande); número de columnas para escritorio, tablet y móvil; mostrar solo 1 publicación en móvil; publicaciones por página; y un botón "Load more" (texto y alineación: izquierda/centro/derecha).

  • Groups y filtrado: mostrar una insignia con el nombre del grupo en cada tarjeta; mostrar un desplegable de filtro de grupo para los visitantes; restringir a Group ID(s) específicos, o excluir ciertos grupos.

  • Imagen de respaldo (fallback): se muestra cuando una publicación no tiene imagen propia.

Cómo usarlo — configuración del panel de diseño (Design)

  • Permite personalizar colores, tipografía, espaciado, bordes y estilos de botón para que coincidan con la identidad visual de tu sitio.

Notas de uso

  • Si estableces "Filter by Group ID(s)", el filtro de grupo que ven los visitantes se oculta automáticamente.

  • El campo "Exclude Group ID(s)" se ignora si ya hay un filtro específico establecido.

  • El widget usa la API de Content Library/Collections para obtener las publicaciones en tiempo real.


360 Groups (App)

Fuente de datos: obtiene datos de los equipos activados en Website Settings.

Qué hace

  • Muestra automáticamente tus equipos/grupos como tarjetas clicables, enlazadas a sus páginas individuales.

  • Puede mostrar todos los grupos en una sola cuadrícula, o dividirlos en secciones etiquetadas por categoría.

  • Permite agregar manualmente equipos adicionales (por ejemplo, los que no se obtienen automáticamente) a cualquier grupo existente o nuevo.

  • Resalta la tarjeta que coincide con la página que se está viendo actualmente.

Cómo usarlo — configuración del editor de contenido (Content)

  1. Title & Description — título y texto opcionales que se muestran encima del widget; déjalos vacíos para ocultarlos.

  2. Title Tag / Group Heading Tag — elige H1/H2 para el título principal y H2/H3 para el encabezado de cada grupo (para SEO/accesibilidad).

  3. Filter by group — escribe el nombre de una categoría para mostrar una cuadrícula plana de solo ese grupo, o varios nombres separados por comas para mostrarlos como secciones ordenadas. Déjalo en blanco para mostrar todo.

  4. Page URL Path — el segmento de URL usado al enlazar a la página de cada equipo (por ejemplo, new-groups se convierte en yoursite.com/new-groups/team-name).

  5. Card Icon — icono opcional que se muestra en cada tarjeta; déjalo vacío para ocultarlo.

  6. Columns — elige cuántas tarjetas aparecen por fila (2–5).

  7. Manual Teams — agrega equipos que no aparecen automáticamente: indica un Name, una Category (coincide con un grupo existente o crea uno nuevo) y un Link.

Cómo usarlo — configuración del panel de diseño (Design)

  • Estilos de texto para el título y la descripción.

  • Fondo, borde, radio de esquina y relleno de las tarjetas de equipo.

  • Colores al pasar el cursor para el fondo, texto e icono de la tarjeta.

  • Colores, borde y opacidad de la tarjeta activa/página actual.

  • Color y tamaño del icono de la tarjeta (más su variante al pasar el cursor).

  • Estilo del encabezado de grupo, color de la línea divisoria y espacio encima de cada grupo.

  • Espacio entre tarjetas en la cuadrícula.


360 Forms (App)

Fuente de datos: obtiene datos de tus 360Player Registrations, usando la URL de categoría de cada inscripción.

Qué hace

  • Muestra una lista de formularios de inscripción, agrupados y filtrables por categoría.

  • Cada formulario aparece como una tarjeta con título, descripción, insignia de categoría y estado abierto/cerrado.

  • Muestra los cupos disponibles restantes y un botón "Register" que enlaza al formulario.

  • Permite a los visitantes filtrar formularios usando "pills" de categoría, o verlos agrupados bajo el título de la categoría.

Cómo usarlo — configuración del editor de contenido (Content)

Configuración rápida:

  1. Abre el editor de contenido para escribir un título/descripción y pega las URLs de tus categorías de formularios (separadas por comas) en "Forms Settings."

  2. Activa "Show Filter" para mostrar pills de categoría clicables, o desactívalo para mostrar en su lugar títulos de grupo de categoría estáticos.

  3. Personaliza todas las etiquetas (Open/Closed, Available Spots, texto del botón, "All Categories", etc.) para que coincidan con tu idioma/marca.

  4. Opcionalmente activa el icono del botón y elige un icono.

Configuraciones que puedes ajustar:

  • Title, description y nivel de encabezado (H1/H2).

  • URLs de las categorías de formularios, visibilidad del filtro, visibilidad de la descripción.

  • Todo el texto de estado/etiquetas (Open, Closed, Available spots, category label).

  • Texto del botón e icono opcional.

Cómo usarlo — configuración del panel de diseño (Design)

  • Fondo del contenedor y espaciado del encabezado.

  • Colores, bordes, esquinas y relleno de las pills de filtro (estados activo/inactivo).

  • Fondo de la tarjeta de formulario, radio de esquina, estilos de texto de título/descripción.

  • Colores y radio de esquina de las insignias de categoría y estado.

  • Colores del botón (incluido hover), relleno, radio de esquina, ancho y tamaño del icono.


360 Calendar (App)

Fuente de datos: obtiene datos de tus 360Player Events — partidos, entrenamientos, reuniones, campamentos y copas (ver también Upcoming Matches) — filtra por equipo usando Group ID.

Qué hace

  • Muestra un calendario mensual de eventos (partidos, entrenamientos, reuniones, campamentos, copas) obtenidos de tus grupos de datos conectados.

  • Permite a los visitantes navegar mes a mes usando los botones de anterior/siguiente.

  • Incluye un desplegable de filtro de grupo y pills de filtro de categoría para que los visitantes puedan acotar lo que se muestra.

  • Muestra los detalles del evento (fecha, hora, ubicación, descripción) con insignias de tipo y de grupo codificadas por color.

Cómo usarlo — configuración del editor de contenido (Content)

Configuración rápida:

  1. Agrega el widget a tu página.

  2. En el editor de contenido, establece el/los Group ID(s) para controlar qué grupos de eventos aparecen (usa "null" para todos).

  3. Opcionalmente agrega un título/descripción y personaliza las etiquetas según la terminología de tu organización.

  4. Usa el panel de diseño para hacer coincidir los colores, insignias y tipografía del calendario con la marca de tu sitio.

  5. Los visitantes podrán entonces navegar por meses, filtrar por grupo y filtrar por categoría de evento directamente en la página publicada.

Configuraciones que puedes ajustar:

  • Title & Description: título opcional (con opción de nivel de encabezado H1/H2) y texto de descripción encima del calendario.

  • Group ID: escribe "null" para mostrar todos los grupos, un solo Group ID para mostrar un grupo, o varios IDs separados por comas.

  • Category Labels: personaliza las etiquetas de texto para Match, Practice, Meeting, Camp, Cup y Other.

  • Advanced Text & Labels: etiqueta del desplegable "All Groups", prefijo de la etiqueta de semana (por ejemplo, "W"), texto del contador de varios días ("Day X of Y"), texto del tooltip para eventos cancelados, y el mensaje de mes vacío.

Cómo usarlo — configuración del panel de diseño (Design)

  • Title & Description: estilo de texto para el encabezado y la descripción.

  • Navigation Bar: estilo de la etiqueta del mes, colores/bordes/color del icono de los botones de navegación, radio de esquina.

  • Group Dropdown: texto de etiqueta/opciones, fondos del botón y la lista, bordes, resaltado de la opción seleccionada, radio de esquina.

  • Category Filters: texto de las pills de filtro, fondos y bordes activos/inactivos, radio de esquina.

  • Week Header: estilo de la etiqueta y color de la línea divisoria.

  • Event Card: fondo, borde, radio de esquina, estilos de texto de título/metadatos/descripción, color del marcador de cancelado.

  • Date Block: color de texto, estilos de texto de día de la semana/día/mes/contador (el divisor coincide automáticamente con el color del borde de la tarjeta).

  • Group Badge y Type Badge: estilo de texto, colores de fondo por tipo de evento (Match, Practice, Cup, Camp, Meeting, Other), radio de esquina.

  • Empty State: estilo de texto para el mensaje "no events".

  • Loading Spinner: color del indicador de carga.


360 Matches & Results List (App)

Fuente de datos: obtiene datos de tus 360Player Upcoming Matches y Results — filtra por equipo usando Group ID.

Qué hace

  • Muestra automáticamente los próximos partidos ("Upcoming") y los resultados ("Results") de las colecciones de partidos del sitio (matchesUpcoming y matchesComplete).

  • Organiza los partidos en pestañas intercambiables, con tarjetas que muestran equipos, resultado, fecha/hora, lugar y competición.

  • Permite filtrar por equipo/grupo mediante un selector desplegable.

  • Admite paginación mediante un botón "Show More", o navegación semanal con un botón "Next Week".

Cómo usarlo — configuración del editor de contenido (Content)

  • Title & Description: establece un título opcional, el nivel de encabezado (H1/H2) y una descripción.

  • Main Settings: filtra por equipo(s)/grupo(s), muestra solo partidos de local, establece el número máximo de próximos partidos/resultados mostrados, activa el botón "Show More" (con texto e incremento personalizables), y edita las etiquetas de las pestañas "Upcoming"/"Results" (cada una puede ocultarse).

  • Text & Translations: personaliza todo el texto mostrado (la opción "All Groups", mensajes de "sin partidos", texto de carga, nombres predeterminados de equipo local/visitante, el texto "vs").

  • Week Settings: establece la palabra "Week" (traducible), activa/desactiva el subtítulo de semana en las tarjetas, restringe la visualización a la semana actual (con un botón "Next Week").

Cómo usarlo — configuración del panel de diseño (Design)

  • Title & Description: estilos de tipografía.

  • Tab Bar: colores de fondo/texto para pestañas activas/inactivas, bordes, radio de esquina y tipografía.

  • Team Filter: radio de esquina y estilos de texto para el selector y la etiqueta.

  • Show More/Next Week Button: estilo del botón y estilo del subtítulo de semana.

  • Match Card: fondo, borde, radio de esquina, relleno interno y espacio entre tarjetas.

  • Team Names, Score & VS, Competition Footer: tipografía y bordes específicos para cada elemento.


360 Team Page (App)

Fuente de datos: obtiene los datos del equipo desde Website Settings, Posts, Upcoming Matches/Results y Events — todo vinculado a este widget mediante el Group ID de ese equipo.

Qué hace

  • Muestra una página de equipo completa obtenida de tu cuenta de 360Player — incluyendo noticias, contactos, eventos, próximos partidos y resultados — organizada en pestañas.

Cómo usarlo — configuración del editor de contenido (Content)

Configuración rápida:

  1. Agrega el widget a tu página.

  2. En el editor de contenido, introduce el Group ID de tu colección de grupos de 360Player. Esto vincula el widget a un equipo específico.

Configuraciones que puedes ajustar:

  • Default Active Tab — elige qué pestaña (News, Contacts, Events, Matches, Results) se abre primero.

  • Tab Labels — cambia el nombre de cualquiera de los cinco botones de pestaña.

  • Team Header — activa/desactiva el logo del equipo.

  • Section Visibility — muestra/oculta cada una de las cinco pestañas de forma independiente.

  • Items Per Section — establece cuántos partidos, resultados y publicaciones de noticias aparecen (1–20 cada uno).

  • Events — Navigation & Labels — personaliza el título del calendario, los botones de mes anterior/siguiente, el prefijo de semana, el mensaje de estado vacío y el texto del contador de varios días.

  • Event Categories — cambia el nombre de las etiquetas de categoría (Match, Practice, Cup, Camp, Meeting, Other); los colores permanecen fijos por categoría.

  • Display Options — activa/desactiva las insignias de equipo en partidos, resultados en resultados, información de autor en noticias, y teléfono/correo en contactos.

  • No Data Message — personaliza el texto de respaldo que se muestra cuando una pestaña no tiene datos.

Cómo usarlo — configuración del panel de diseño (Design)

  • Team Header — fondo, altura mínima, tipografía del nombre/subtítulo del equipo, radio de esquina y espaciado del logo.

  • Contact Persons — fondo/borde/esquinas de la tarjeta, forma del avatar, estilos de texto para nombre/rol/información.

  • Tab Bar — fondo, colores de texto/activo de las pestañas, esquinas de los botones, tipografía.

  • Match Cards — fondo/borde/esquinas, color de acento/resultado, estilos de texto de nombre de equipo/resultado/metadatos, forma de la insignia.

  • Event Cards — fondo/borde/esquinas, estilo del bloque de fecha, título del calendario, estilos de texto de título/metadatos/tipo de evento, color del marcador de cancelado, colores de la insignia de grupo.

  • News/Post Cards — fondo/borde/esquinas, estilo del botón "Show More", estilos de texto de título/contenido/autor/fecha, forma del avatar.

  • Widget Background — fondo general, relleno, color de texto del estado vacío.


360 Post Page (App)

Fuente de datos: obtiene datos de tus 360Player Posts.

Qué hace

  • Muestra un artículo completo de tu colección conectada de "posts" — incluyendo información del autor, imagen destacada (hero), texto del cuerpo, videos incrustados, galería de imágenes y archivos adjuntos. Diseñado para colocarse en una página dinámica de detalle de artículo/publicación.

  • Detecta y muestra automáticamente el artículo que coincide con la URL de la página actual.

  • Alternativamente, puedes establecer un Article ID fijo para que el widget siempre muestre un artículo específico, independientemente de la página.

  • Muestra un mensaje de carga mientras se obtienen los datos, y un mensaje de error si no se encuentra el artículo.

  • Incluye un botón de compartir que copia el enlace del artículo, y una lightbox para ver las imágenes destacadas/de galería a tamaño completo.

Cómo usarlo — configuración del editor de contenido (Content)

  • Article ID (opcional) — déjalo en blanco para detección automática, o introduce un ID específico para fijar un artículo.

  • Show Author Info — activa/desactiva el nombre/avatar del autor y la fecha.

  • Show Group Badge — activa/desactiva la insignia de grupo del autor.

  • Show Attachments — activa/desactiva la sección de archivos adjuntos.

  • Date Format — elige la visualización Relative, Short o Long.

  • Loading Message — texto que se muestra mientras se carga el artículo.

  • Error Message — texto que se muestra si no se encuentra el artículo.

  • Attachments Section Heading — título personalizable encima de los enlaces/archivos adjuntos.

Cómo usarlo — configuración del panel de diseño (Design)

  • Article Container — activación de sombra, fondo, borde, radio de esquina, relleno, ancho máximo.

  • Author & Group Badge — tamaño del avatar/insignia, tipografía del nombre del autor y la fecha.

  • Title — tipografía del título.

  • Main Image — radio de esquina, altura máxima, tipografía del pie de foto.

  • Article Body — estilo de texto y espaciado de línea del cuerpo del artículo.

  • Videos — radio de esquina, espacio entre videos.

  • Image Gallery — radio de esquina, espacio entre imágenes, tipografía del pie de foto.

  • Share Button — fondo y color del icono.

  • Attachments — estilo del encabezado, y colores de fondo/texto para los botones de enlace y archivo.

Buenas prácticas

  • Úsalo en una página conectada a tu colección de posts para que funcione la detección automática.

  • Usa la opción de Article ID fijo solo si siempre quieres mostrar un artículo en particular, sin importar la URL.

  • Desactiva las secciones (autor, insignia, adjuntos) que no necesites para mantener el diseño limpio.


360 Team Page Squad (App)

Fuente de datos: obtiene los datos del equipo desde Website Settings, Posts, Upcoming Matches/Results y Events — todo vinculado a este widget mediante el Group ID de ese equipo.

Qué hace

  • Muestra una página de equipo completa con pestañas para News, Contacts, Squad, Events, Upcoming Matches y Results, obteniendo datos vinculados a un equipo específico mediante su Group ID. (Squad se agrega manualmente dentro del editor).

Cómo usarlo — configuración del editor de contenido (Content)

Primeros pasos:

  • Introduce el Group ID de tu colección de equipos de 360Player para que el widget muestre los datos del equipo correcto.

  • Elige qué pestañas están visibles y establece la Default Active Tab que se muestra al cargar la página.

  • Cambia el nombre de cualquier etiqueta de pestaña (por ejemplo, cambia "Matches" a "Fixtures").

Configuraciones que puedes ajustar:

  • Activa/desactiva cada pestaña: News, Contacts, Squad, Events, Matches, Results.

  • Agrega Squad Players manualmente (foto, nombre, número, posición) — los jugadores con el mismo texto de posición se agrupan automáticamente.

  • Establece límites de elementos por sección (Upcoming Matches, Results, News Posts).

  • Personaliza las etiquetas de categoría de Events (Match, Practice, Cup, Camp, Meeting, Other) y el mensaje "no events".

  • Activa/desactiva la visibilidad de detalles adicionales: insignias de equipo en partidos, resultados en resultados, autor en noticias, correo/teléfono en contactos.

  • Establece un mensaje personalizado de "no data available".

Cómo usarlo — configuración del panel de diseño (Design)

  • Estilo del Team Header (fondo, nombre del equipo, subtítulo, esquinas del logo).

  • Estilo de la Tab Bar (fondo, tipografía, colores de la pestaña activa, esquinas del botón).

  • Elige el diseño de Squad: tarjetas en cuadrícula o filas tipo contacto; personaliza el fondo, borde, esquinas, tamaño de foto y número de columnas de las tarjetas por dispositivo (escritorio/tablet/móvil).

  • Estilo de las tarjetas Contact, Match, Event y News/Post individualmente (fondos, bordes, esquinas, tipografía).

  • Ajusta el fondo general del widget y el relleno.

¿Ha quedado contestada tu pregunta?