Diseño y estilo

Columnas, elementos, tema, diseño, espaciado, esquinas, qué muestra cada tarjeta y el resaltado Nuevo. Cada control, con su rango.

Todo aquí es gratuito en todos los planes, incluido el carrusel, el mosaico, bento, el lightbox y ambos resaltados, Nuevo y el “Spotlight” (Destacado rotativo) giratorio. Los cambios se muestran en la vista previa en vivo de inmediato y se aplican a cada página después de presionar “Save” (Guardar).

Para ver primero los diseños con contenido real, los ejemplos en vivo muestran widgets reales, y algunas variaciones de bento una al lado de la otra.

Controles

Control	Qué hace	Rango
Columnas	Columnas en la cuadrícula o el muro. En un muro es un máximo: las tarjetas necesitan unos 220 px cada una, por lo que una pantalla estrecha muestra menos	1 a 6
Elementos	Cuántas publicaciones o reseñas mostrar. Una fuente conserva sus 24 más recientes (una fuente de Google, hasta 72 después de su revisión de fotos), y un widget nunca muestra más de lo que está en caché	1 a 24
Tema	“Auto” (Automático) sigue la configuración del dispositivo de cada visitante, “Light” (Claro) y “Dark” (Oscuro) son fijos
Diseño	“Grid” (Cuadrícula), “Carousel” (Carrusel), “Masonry” (Mampostería) o “Bento”
Separación	Espacio entre mosaicos	0 a 32 px
Radio de esquina	Esquinas redondeadas	0 a 24 px
Líneas de texto máx.	Solo muros de reseñas y publicaciones: el texto más largo se pliega detrás de “Show” (Mostrar) más	2 a 12

Bento

Bento organiza los elementos como el logo de TileSet: un cuadrado grande (2 por 2), uno alto (1 por 2), uno pequeño y uno ancho (2 por 1), que se repiten, en celdas cuadradas sin huecos en el medio. Solo la última fila puede quedar incompleta.

Utiliza de 3 a 6 columnas. Una configuración de 1 o 2 se muestra como 3, y más de 6 (posible a través de un agente) como 6.
En un espacio más estrecho que 520 px, como un teléfono, muestra 2 columnas, y los cuadrados grandes se mantienen 2 por 2.
En una cuadrícula de feed, una publicación o reseña sin foto se convierte en una tarjeta de texto en su celda en lugar de omitirse. En un muro de reseñas o publicaciones, cada elemento es una tarjeta.
El texto de una tarjeta llena su celda y se desvanece donde termina la celda, por lo que no hay “Show” más. Las celdas grandes usan texto más grande.
“Big cells” (Celdas grandes) (reseñas de Google y WordPress.org): “Newest” (Más recientes) deja los elementos más recientes en las celdas grandes y “Top rated” (Mejor calificadas) pone ahí los mejor calificados, primero los más recientes entre calificaciones iguales. Se muestran los mismos elementos en ambos casos; solo cambia su posición.

Qué muestra cada tarjeta

Interruptores, según la plantilla:

Feed grid: Likes & comments, Header (avatar, handle and follow link), Lightbox, Platform icon. On a Twitch or Kick source, Live stream picks where a live stream plays: Lightbox or Inline in a live card (see Twitch and Kick).
“Review wall”: “Avatar” (en testimonios, la foto o las iniciales de la persona), “Rating” (Calificación), “Date” (Fecha), “Owner response” (Respuesta del propietario), “Lightbox”, “Platform icon” (Icono de plataforma).
YouTube también tiene “All videos” (Todos los videos) / “Hide Shorts” (Ocultar Shorts) / “Only Shorts” (Solo Shorts).

“Lightbox” abre una imagen o video en tu página cuando un visitante hace clic en él, con un enlace a la publicación o reseña original. Si está desactivado, un clic abre la publicación o reseña en sí en su plataforma en una nueva pestaña (la reseña de Google, la publicación en X, el video en YouTube), o la imagen cuando el elemento no tiene enlace.

“Platform icon” pone una pequeña marca de Google o YouTube en cada foto (arriba a la izquierda) y tarjeta (abajo a la derecha). Está activada por defecto en un feed mixto, para que los visitantes puedan ver de dónde procede cada publicación, y desactivada en caso contrario. Un widget de testimonios no tiene plataforma para marcar, por lo que no la ofrece.

No se muestra un interruptor que una fuente nunca podría usar. Un pequeño marcador “+n” al final de una sección indica cuántos están ocultos y, al pasar el cursor, por qué.

Leyendas en las fotos

En una cuadrícula de feed, “Captions” (Leyendas) elige qué muestra un mosaico de foto sobre la imagen:

“Off” (Desactivado): solo la foto.
“On hover” (Al pasar el cursor): el texto de la publicación aparece cuando un visitante pasa el cursor sobre el mosaico o llega a él con el teclado.
“Always” (Siempre): el nombre de la cuenta y hasta tres líneas del texto, todo el tiempo, como en el ejemplo de nuestra página de inicio. Con “Likes & comments” (Me gusta y comentarios) activado, los recuentos pasan a ser la última línea de la leyenda en lugar de quedar debajo.

“Overlay” (Superposición) (activado por defecto) oscurece la parte inferior de la foto bajo la leyenda para que el texto se pueda leer sobre una imagen clara. Desactívalo para una foto más limpia.

Resaltado

Un pequeño chip con un punto en vivo, como el de nuestra página de inicio, en cualquier diseño:

Resaltado	Qué hace	Plan
Off	Sin chip	Todos los planes
New	El chip en cada publicación de los últimos días. “New for” (Nuevo durante) define cuántos	1 a 30 días, todos los planes
Spotlight	Un anillo y el chip rotan entre tus cuatro publicaciones más recientes, una a la vez. “Each for” (Cada uno durante) define cuánto tiempo lo conserva cada una	3 a 30 segundos

“Chip text” (Texto del chip) es el texto del chip, “New” a menos que lo cambies, hasta 12 caracteres. Para los visitantes que tienen activado el movimiento reducido, nada se mueve: solo la publicación más reciente conserva el chip.

“Review header” (Encabezado de reseñas) y "Leave a review (Deja una reseña)"

En un widget con reseñas de Google, “Review header” tiene dos interruptores, ambos desactivados hasta que los activas y ambos gratuitos:

“Rating summary” (Resumen de calificaciones) pone una fila encima de las reseñas con el promedio, las estrellas y el recuento: “4.9 … de 24 reseñas recientes”. Las estrellas se llenan hasta el promedio, por lo que un 4.9 muestra casi cinco y un 4.5 cuatro y medio; las estrellas en cada reseña permanecen enteras. La cifra se calcula a partir de las reseñas que TileSet ha almacenado para el widget (las 24 más recientes, hasta 72 para una fuente de Google después de su pase de fotos). No es la calificación de la plataforma, que Google no pasa, por lo que en Google la línea dice “reseñas recientes” y nunca afirma más de lo que contó. En otras fuentes dice “promedio de 12 reseñas”. En un widget mixto cubre solo las fuentes de reseñas. No muestra nada cuando ninguna de las reseñas almacenadas tiene una calificación.
“Leave a review button” (Botón Deja una reseña) añade un botón a la página propia de la plataforma para escribir una reseña: el formulario de reseñas de Google para el negocio. “Button text” (Texto del botón) cambia las palabras, “Leave a review” a menos que lo cambies, hasta 24 caracteres. El botón se abre en una nueva pestaña. TileSet no envía solicitudes de reseña por correo electrónico o texto; el visitante va a la plataforma por sí mismo. Una fuente que no tiene negocio al que enlazar (una fuente de demostración, por ejemplo) no muestra ningún botón.

En la vista previa del creador el botón se muestra pero no lleva a ninguna parte; en tu página abre el formulario real.

Describe el aspecto

Escribe algo como "oscuro, 4 columnas, 12 elementos" en “Describe the look you want” (Describe el aspecto que quieres) y los controles correspondientes se ajustan solos.

Más allá de los controles

El marcado del widget es un conjunto estable de clases sbe- y propiedades personalizadas --sbe-, por lo que un desarrollador o un agente puede retocarlo con una pequeña hoja de estilos en tu página. La referencia completa es la guía de inserción. El widget utiliza su propia fuente del sistema; establece font-family en .sbe en tu hoja de estilos para que coincida con tu sitio.

La API acepta rangos más amplios que los controles del panel (hasta 12 columnas y 100 elementos); aun así, solo se muestra lo que está en caché.