Configurar los estilos compartidos de los componentes

El área actual de Settings → POM Theme → Design system → Components contiene tres grupos enfocados: Inner row content toggler, Website alerts/notices y Video player.

Inner Row content toggler

Habilita Inner row content toggler solo cuando los editores necesiten contraer contenido largo dentro de una Inner Row.

Una vez habilitado, los ajustes de Inner Row pueden exponer Enable hide/reveal long text on demand y controles dependientes para:

• Height to trigger hiding;
• Trigger event: Click u Hover;
• Gradient shadow on bottom;
• Shadow color;
• Toggle button type;
• Open button text y Close button text.

Prefiere Click para una acción que los visitantes deban controlar intencionadamente. Comprueba el acceso por teclado, el foco visible, las etiquetas comprensibles y el estado expandido en cada ancho de área de visualización adaptable.

Website alerts and notices

Website alerts/notices define los colores de fondo y de texto para:

• alertas de éxito;
• avisos estándar;
• alertas de error.

Configura cada par de fondo y texto de forma conjunta. Estos ajustes pueden afectar a los mensajes del tema y de los formularios que usan los estilos de aviso compartidos.

Video player

Usa Video player para elegir cómo renderiza el tema los vídeos en primer plano autoalojados:

• Default player conserva el comportamiento POM Theme establecido y es la opción por defecto tanto para los sitios existentes como para los nuevos.
• Custom player (Video.js 10) usa Video.js para fuentes directas MP4, WebM y OGV, así como para las URL lógicas de Pomatio Video Hosting.

La fuente del reproductor es independiente de esta elección. Una URL lógica de Pomatio Video Hosting puede pegarse en el mismo campo MP4 autoalojado que una URL de medio directa. Las filas y columnas conservan siempre su ligero reproductor de fondo Jarallax y no cargan Video.js.

Cuando se selecciona Custom player (Video.js 10), elige su apariencia en Video.js skin:

• Default skin conserva la apariencia estándar de Video.js.
• Custom skin aplica tres funciones visuales explícitas configuradas directamente debajo: Background color para la barra de controles y los menús, Controls color para iconos y etiquetas, y Accent color para el progreso, los estados seleccionados y las acciones principales. Los campos de color solo son visibles para esta apariencia.

El ajuste de póster, las velocidades de reproducción permitidas y la política de precarga siguen disponibles para ambas apariencias de Video.js. Estos ajustes se aplican por igual a los archivos MP4, WebM y OGV normales de la Biblioteca de medios de WordPress y a las fuentes de Pomatio Video Hosting, por lo que siguen siendo ajustes del tema. Cada componente Video decide si sus controles opcionales son visibles. Las listas de reproducción alojadas usan la misma apariencia global y la misma política de reproductor. El HLS alojado se inicia en modo de calidad automática: la versión se limita al ancho físico de visualización del reproductor, incluidas las pantallas de alta densidad, y puede reducirse cuando el ancho de banda medido es insuficiente. Las miniaturas de vista previa de la línea de tiempo usan la hoja de sprites generada, pero muestran cada marcador con un ancho máximo compacto de 160 píxeles. Con reproducción automática y póster, el póster sigue siendo el único contenido visible hasta que comienza la reproducción. La entrada condicional del reproductor se carga solo en las páginas que usan el reproductor personalizado. Su mayor tiempo de ejecución de HLS se obtiene por separado únicamente cuando un reproductor necesita realmente HLS adaptativo; la reproducción directa de MP4, WebM y OGV no lo descarga.

El componente Video puede ocultar todos los controles y combinar la reproducción automática inmediata, al entrar en el área de visualización, en la primera interacción o al pasar el cursor, con la reproducción en bucle para vídeos de características de producto y decorativos. Su relación de aspecto puede permanecer en el valor por defecto compatible con versiones anteriores de 16:9, usar 9:16 o 1:1, seguir las dimensiones intrínsecas del vídeo fuente o usar una relación personalizada definida por el editor. Estas opciones de diseño funcionan tanto con el reproductor por defecto como con el personalizado.

Después de cambiar la apariencia, comprueba el control grande de reproducción, la línea de tiempo, los menús, los indicadores de foco, el modo de pantalla completa y los mensajes de estado tanto con un póster claro como con uno oscuro. La pantalla completa usa el contenedor completo del reproductor POM, de modo que el medio, los controles, el póster y la apariencia del tema mantienen el mismo diseño; Safari e iOS usan su presentación de medios nativa cuando la pantalla completa del contenedor no está disponible. Asegúrate de que el texto y los controles tengan un contraste suficiente frente al fondo del reproductor.

Validar los estados de los mensajes

Usa un mensaje representativo de éxito, de aviso y de error con texto de longitud real. Confirma:

• que el texto tiene un contraste suficiente;
• que el tipo de mensaje se comunica mediante la redacción, no solo con el color;
• que los enlaces siguen siendo distinguibles;
• que los mensajes largos o traducidos se ajustan correctamente;
• que los mensajes de los formularios permanecen visibles cerca de la tarea correspondiente.

Ámbito

No uses esta subsección para tarjetas arbitrarias del Page Builder ni para componentes personalizados. Su presentación reutilizable pertenece a su ajuste global compatible, a una selección estable de botón o paleta, o a una clase CSS mantenida deliberadamente.