Contacta con el soporte | Estado del sistema
Contenido de la página

    Referencia de CSS personalizado de experiencias in-page

    This topic outlines the CSS classes that are used when creating In-Page Experiences. This information is provided so you can further style your experiences using CSS.

    Componentes con estilo

    Estas clases de CSS se aplican a elementos que se diseñan a través de la interfaz de usuario.  Estos estilos se pueden anular con CSS personalizado mediante el uso de estas clases.  También puede hacer que los estilos de la interfaz de usuario se apliquen a HTML personalizado mediante el uso de estas clases.  Estas clases son estables y no deberían cambiar entre las versiones de la plantilla.

     

    Clase Descripción
    ee-components-style-global Estilo global para la experiencia
    ee-components-style-anchor Estilo de enlace normal
    ee-componentes-estilo-navegación Estilo de enlace de navegación (botón de retroceso, botón de compartir, etc.)
    ee-components-style-videoInfo Estilo del cuadro de información de video (sin superposición)
    ee-components-style-videoTitle Estilo de título de video (sin superposición)
    ee-components-style-video Descripción Estilo de descripción de video (sin superposición)
    ee-components-style-overlay Estilo de cuadro de información de video superpuesto
    ee-components-style-overlayTitle Estilo de título de video superpuesto
    ee-components-style-overlay Descripción Estilo de descripción de video superpuesto
    ee-components-style-overlayBanner Estilo de banner / indicador superpuesto (indicador de visualización)
    ee-components-style-playButton Estilo básico del botón de reproducción (consulte el componente Botón de reproducción para obtener un estilo más complejo)

    Componentes base

    Estos son componentes básicos que se pueden diseñar con CSS personalizado.  Las clases de componentes son estables y no deberían cambiar entre las versiones de la plantilla.  Las clases internas son relativamente estables y lo más probable es que no cambien entre las versiones de la plantilla.

    Botón de play

    El botón de reproducción aparece en cada miniatura de video.

     

    Clase Descripción
    ee-components-play-button Componente de botón de reproducción
    ee-components-play-button-svg Contenedor SVG
    ee-components-play-button-group Grupo interno SVG
    ee-components-play-button-button Grupo de SVG de botón de reproducción
    ee-components-play-button-frame Marco de círculo de botón de reproducción
    ee-components-play-button-icon Icono de botón de reproducción
    ee-components-play-button-countdown Grupo SVG de cuenta regresiva
    ee-components-play-button-pause Icono de pausa de cuenta regresiva
    ee-components-play-button-text Texto de cuenta regresiva
    ee-components-play-button-track Pista de cuenta regresiva
    ee-components-play-button-runner Progreso de la cuenta regresiva

     

    Flecha

    Flechas para la plantilla de carrusel (para opciones de presentación con sangrado único y completo).

     

    Clase Descripción
    ee-componentes-flecha Componente de flecha (incluido el fondo)
    ee-componentes-flecha-interior Flecha

     

    Hasta la próxima

    El indicador Up-next se muestra en miniaturas grandes cuando Avanzar al siguiente video automáticamente está habilitado en la configuración del reproductor.

     

    Clase Descripción
    ee-components-up-next Siguiente componente
    ee-components-up-next-thumbnail Miniatura del siguiente video
    ee-components-up-next-text Texto siguiente (cuenta regresiva + nombre del video)
    ee-components-up-next-text-countdown Texto de cuenta regresiva
    ee-components-up-next-close Botón cerrar

     

    Indicador de video visualizado

    El indicador visualizado se muestra cuando la opción está habilitada en la configuración de video.

     

    Clase Descripción
    ee-components-video-visto-banner Indicador de video visualizado

     

    Componentes de video

    Componentes relacionados con videos individuales. Estas clases son estables y no deberían cambiar entre las versiones de la plantilla.

    reproductor

    Contenedor para el reproductor Brightcove.

     

    Clase Descripción
    ee-components-player Contenedor de reproductor

     

    Miniatura

    Contenedor básico para imágenes de póster de video (no incluye el botón de reproducción).

     

    Clase Descripción
    ee-componentes-miniatura Contenedor de miniaturas

     

    Información del video

     

    Clase Descripción
    ee-componentes-video-info Contenedor de información de video
    ee-componentes-video-info-contenido Contenedor de información de video interno
    ee-componentes-video-info-nombre Contenedor de nombre de video
    ee-components-video-info-name-content Nombre del video
    ee-componentes-video-info-duración Duración del video
    ee-componentes-video-info-descripción Descripción del video
    ee-components-video-info-related-link Enlace relacionado con el video
    ee-componentes-video-info-descargar Enlace de descarga de video

     

    Miniatura de video

    Contiene un componente de miniatura envuelto con un componente de información de video.

     

    Clase Descripción
    ee-componentes-video-miniatura Componente de miniatura de video

     

    Componentes de la colección de videos

    Componentes relacionados con colecciones de videos (listas de reproducción, etc.). Estas clases son estables y no deberían cambiar entre las versiones de la plantilla.

    Flujo de corriente

    Presentación tridimensional de flujo de cobertura de videos.

     

    Clase Descripción
    ee-componentes-cover-flow Componente de flujo de cobertura
    ee-components-cover-flow-item Elemento de flujo de portada (miniatura de video)

     

    Tira de puntos

    Una franja de puntos que representa cada video de la lista.

     

    Clase Descripción
    ee-componentes-punto-tira Componente de tira de puntos
    ee-componentes-punto-tira-elemento Elemento de tira de puntos
    ee-componentes-punto-tira-punto Punto individual en la tira

     

    Carrusel de carteles

    Un carrusel de imágenes de carteles (con flechas)

     

    Clase Descripción
    ee-components-poster-carrusel Componente de carrusel de póster
    ee-components-poster-carrusel-contenedor Contenedor de fila
    ee-components-poster-carrusel-fila Fila de carteles
    ee-components-poster-carrusel-celda Elemento de fila (miniatura de video)

     

    Tira de miniaturas

    Una tira de imágenes en miniatura (con flechas)

     

    Clase Descripción
    ee-componentes-tira-miniatura Componente de tira de miniaturas
    ee-components-thumbnail-strip-container Contenedor de fila
    ee-componentes-miniatura-tira-fila Fila de miniaturas
    ee-components-thumbnail-strip-cell Elemento de fila (miniatura de video)

     

    Cuadrícula de video

    Una cuadrícula de imágenes en miniatura

     

    Clase Descripción
    ee-componentes-video-grid Componente de cuadrícula de video
    ee-components-video-grid-cell Elemento de cuadrícula (miniatura de video)

     

    Lista de videos

    Una lista vertical de imágenes en miniatura

     

    Clase Descripción
    ee-componentes-lista de videos Componente de lista de videos
    ee-components-video-list-item Elemento de lista (miniatura de video)

     

    Compartir componentes

    Componentes relacionados con el intercambio social.  Las clases del botón Compartir son relativamente estables y lo más probable es que no cambien entre las versiones de la plantilla.  Es muy probable que las clases del Panel de Acciones se modifiquen en un futuro próximo y deben considerarse inestables.

    Botón de compartir

    Compartir botón o iconos.

    o

     

    Clase Descripción
    ee-componentes-botón-compartir Componente de botón de compartir
    ee-componentes-botón-compartir-botón Botón de compartir (no iconos)

     

    Panel de compartir

    Panel para compartir cuando la pantalla de compartir en redes sociales está configurada en el botón.

     

    Clase Descripción
    ee-components-share-wrapper-panel Componente de envoltura de panel
    ee-components-share-wrapper-inner Panel
    ee-components-share-wrapper-close Botón cerrar
    ee-components-share-wrapper-item Compartir elemento
    ee-componentes-nombre-elemento-contenedor-compartido Compartir el nombre del elemento

     

    Componentes editables

    Componentes que se pueden agregar a la experiencia a través de los botones más en la interfaz de usuario.  Estas clases son estables y no deberían cambiar entre las versiones de la plantilla.  No se proporcionan capturas de pantalla para estos componentes ya que su apariencia depende en gran medida del contenido ingresado por el usuario.

    Anuncio publicitario

    Componente publicitario

     

    Clase Descripción
    ee-componentes-publicidad Componente publicitario

     

    HTML personalizado

    Componente HTML personalizado

     

    Clase Descripción
    ee-componentes-html Componente HTML personalizado

     

    Imagen

    Componente de imagen

     

    Clase Descripción
    ee-componentes-imagen Componente de imagen
    ee-componentes-imagen-imagen Imagen interna

     

    Texto

    Componente de texto

     

    Clase Descripción
    ee-componentes-texto Componente de texto

     

    Gorjeo

    Componente de Twitter

     

    Clase Descripción
    ee-componentes-twitter Componente de Twitter

     

    Clases globales

    Estas son clases que son globales para la experiencia.  Estas clases son estables y no deberían cambiar entre las versiones de la plantilla.

     

    Clase Descripción
    ee-componentes-aplicación Elemento de experiencia más externo
    ee-componentes-vista Vista de experiencia (in-page, lightbox)
    ee-componentes-contenedor Contenedor de componentes con botón más

     


    Página actualizada por última vez el 19 Jan 2022