Comparación entre un sitio editorial (Stab Magazine) y una plataforma deportiva en vivo (World Surf League), observando cómo cada uno resuelve el scroll, la distribución en columnas y la adaptación a mobile.
Revista editorial de surf, construida en WordPress + Elementor.
Plataforma de competencias de surf en vivo.
Revista digital de surf con foco en video y artículos largos. Construida sobre WordPress con el maquetador Elementor.
 7.46.28 p.m..png)
La barra superior con el logo y el buscador queda fija (sticky) mientras el resto del contenido se desplaza debajo. En el código fuente el encabezado aparece dos veces: una versión con el logo en blanco (para el estado inicial, sobre el video destacado) y otra con el logo en negro, que es la que se activa cuando el usuario baja y el fondo deja de ser oscuro.
El resto video destacado, grillas de notas, footer se mueve con normalidad junto al scroll.
La portada no usa una sola grilla, sino varios bloques con distintos números de columnas según el tipo de contenido:
Esto sugiere que el sitio combina display: grid para las
secciones de mosaico y flex o listas simples para los bloques
de una sola columna.
El sitio declara en su meta información breakpoints personalizados de
Elementor (additional_custom_breakpoints), lo que indica que el
layout no depende solo del breakpoint por defecto del framework, sino que
fue ajustado a mano para distintos anchos.
Las grillas de varias columnas colapsan a una sola columna, y el menú con submenús desplegables (Premium, News, Hardware) se convierte en un menú hamburguesa con acordeón.
El header fijo tiene sentido en un sitio de consumo de video: el usuario navega mucho y siempre necesita el buscador y el logo a mano. Lo que nos parece menos prolijo es la cantidad de submenús anidados (Premium - Categorías - Editor's Picks - notas individuales); en mobile eso puede volverse un acordeón muy largo de recorrer.
Ajustaríamos el menú mobile a máximo dos niveles de profundidad, y dejaríamos los enlaces a notas específicas fuera del menú de navegación.
Plataforma oficial de competencias de surf: transmite eventos en vivo, rankings y noticias del circuito mundial.
 7.46.21 p.m..png)
Al igual que Stab, la barra superior con el logo, el buscador y el acceso a cuenta permanece fija al hacer scroll. La diferencia es que aquí el menú principal (Schedule, Rankings, Surfers, Fantasy, Store) tiene varios desplegables con listas largas de torneos y categorías, así que el header fijo cumple un rol más de "acceso rápido" que decorativo.
Durante una transmisión en vivo, la franja de resultados/heat en curso también suele quedar fija en la parte superior o inferior del video, independiente del resto de la página.
La portada combina un bloque destacado (noticia o evento en vivo a ancho completo) con secciones de noticias en grilla de varias columnas más abajo, similar al patrón de "tarjetas" que vimos en Stab. La sección de calendario/resultados, en cambio, se organiza como una tabla o lista de una sola columna, porque ahí la prioridad es leer datos en orden (fecha, evento, resultado) y no navegar visualmente.
El menú con desplegables (Schedule, Rankings, Surfers, Fantasy) colapsa en un menú hamburguesa con submenús plegables. Las grillas de noticias pasan de varias columnas a una sola, y la tabla de calendario se simplifica u oculta columnas menos importantes (dejando solo fecha y evento visibles, y el resto detrás de un "ver más").
Tiene sentido priorizar el video en vivo y dejar accesos rápidos siempre visibles, porque es una plataforma pensada para seguir un evento en tiempo real. Lo que ajustaríamos es la cantidad de categorías dentro de "Schedule" y "Rankings" (Championship Tour, Challenger Series, Qualifying Series, Junior Tour, Longboard Tour, Big Wave...): son muchas para un solo desplegable, y en mobile eso significa mucho scroll dentro del menú.
Agruparíamos esas categorías en una página propia de "Tours" en vez de listarlas todas en el menú de navegación.
Las mismas cuatro preguntas, respondidas lado a lado, para ver en qué se parecen y en qué se diferencian ambos sitios.
Header sticky (logo + buscador). El resto del contenido se desplaza libremente.
Header sticky similar, pero con más funciones ancladas (cuenta, menú). En vivo, el marcador del heat también queda fijo.
Mezcla de listas de una columna y grillas de mosaico de varias columnas, según la sección.
Bloque destacado a ancho completo + grillas de noticias, pero el calendario usa una tabla de una sola columna por fila.
Grillas a una columna, menú a hamburguesa con acordeón de varios niveles.
Mismo patrón de colapso, pero además la tabla de calendario recorta columnas para caber en pantalla chica.
Sí, pero el menú tiene demasiados niveles anidados para mobile.
Sí, pero el desplegable de "Schedule/Rankings" agrupa demasiadas categorías para un solo menú.
En ambos casos el patrón de fondo es el mismo header sticky, contenido en grilla, colapso a una columna en mobile porque los dos son sitios de consumo de contenido, no de tareas puntuales. La diferencia real está en la cantidad de información que cada uno intenta dejar siempre accesible desde el menú: Stab prioriza categorías editoriales, WSL prioriza torneos y resultados en vivo.