soporte Contactar con Soporte | Estadoestado del sistema del sistema
Contenido de la página

    Personalización del estilo de una experiencia en página

    En este tema aprenderá cómo personalizar el estilo de una experiencia en página.

    El estilo controla las fuentes, tamaños de fuente y colores utilizados en una experiencia en página. Para personalizar el estilo, edite la experiencia y, a continuación, haga clic en ESTILO en la navegación izquierda.

    Conmutar estados del dispositivo

    Los vínculos en la parte superior de la página se pueden utilizar para personalizar los estilos en diferentes estados de dispositivo, incluyendo escritorio, tableta o móvil.

    De forma predeterminada, el modo Escritorio se muestra al personalizar estilos. Los estados del dispositivo se pueden utilizar para previsualizar el aspecto que tendrá una experiencia en el tipo de dispositivo seleccionado.

    Cambiando estados de experiencia

    Las experiencias en página tienen diferentes estados visuales que cambiarán a medida que el espectador interactúe con la experiencia. El estilo de cada uno de estos estados se puede personalizar haciendo clic en los enlaces en la parte superior de la página.

    Los siguientes estados están disponibles para personalizar:

    • ANTES DE JUGAR - Cómo aparecerá la experiencia cuando se renderiza por primera vez, antes de que se inicie la reproducción de vídeo
    • PLAYING - Cómo aparecerá la experiencia cuando se reproduzca un vídeo
    • DESPUÉS DE REPRODUCIR - Cómo aparecerá la experiencia después de que se reproduzca un vídeo (suponiendo que la reproducción automática siguiente vídeo esté desactivada)

    Para aplicar estilo a cada uno de estos estados, haga clic en un estado y, a continuación, personalice los estilos según sea necesario.

    Selección de un tema

    Los temas proporcionan un conjunto predefinido de colores y fuentes que se pueden utilizar para dar estilo rápidamente a una experiencia en página. Gallery proporciona un conjunto de temas predeterminados, pero también puede crear sus propios temas personalizados que se comparten en una cuenta. Una vez aplicado un tema a una experiencia, puede utilizar las opciones de estilo para personalizar aún más el aspecto. El tema actual se muestra en la parte superior del menú de estilos. En este ejemplo, se selecciona el tema Luz .

    Para aplicar un tema a una experiencia en página, siga estos pasos:

    1. Haga clic en el tema actual en la navegación izquierda para abrir el selector de temas.
    2. Haga clic en un tema para seleccionarlo. La vista previa se actualizará para mostrar los colores del tema.
    3. Cuando haya terminado, haga clic en el vínculo < Volver a estilos en la parte superior de la página.

    Al hacer clic en el enlace Restablecer tema predeterminado , se aplicará el tema predeterminado a la experiencia.

    Determinar qué objeto se va a dar estilo

    Para determinar qué objeto se va a dar un estilo, intente pasar el cursor sobre un objeto en la experiencia. La mayoría de las veces, una caja verde rodeará el objeto. El estilo de ese objeto se activará y todos los demás estilos que no se apliquen se atenuarán. Por ejemplo, al pasar el cursor sobre la descripción de la superposición se resaltan CUBRIR y DESCRIPCIÓN DE SUPERPOSICIÓN estilos. El estilo SUPERPOSICIÓN controla el aspecto de la superposición, incluidos el título de superposición y la descripción de la superposición. La DESCRIPCIÓN DE SUPERPOSICIÓN controla el aspecto del objeto solo de descripción de vídeo. Con las superposiciones, se puede aplicar estilo a toda la superposición o los estilos para el título y la descripción se pueden aplicar de forma individual.

    Si no hay ningún cuadro verde al pasar el cursor sobre un objeto, esto indica que el objeto se considera parte del estilo GLOBAL y se puede aplicar el estilo mediante los estilos GLOBAL . Los objetos de texto que se han agregado a la experiencia se pueden aplicar estilos utilizando el estilo GLOBAL a menos que se hayan cambiado los estilos con el editor de texto cuando se colocó el texto en la experiencia.

    Cambio de estilos

    El panel de estilo se utiliza para personalizar el estilo de los objetos en una experiencia. El panel de estilo se puede utilizar para personalizar:

    También se puede especificar un archivo CSS personalizado .

    Cambio de valores de texto y color de fondo

    Para seleccionar un valor de color, siga estos pasos:

    1. Haga clic en el círculo de color para abrir el selector de color.
    2. Utilice el control deslizante de color para establecer un rango de color.
    3. Utilice el control deslizante de opacidad para establecer la opacidad del color.
    4. Haga clic en el cuadrado de color para seleccionar un color.
    5. Haga clic en la X para cerrar el selector de color.

    Los colores también se pueden especificar introduciendo códigos de color:

    • HEX - Los valores de color HEX se especifican con: #RRGGBB. RR (rojo), GG (verde) y BB (azul) son enteros hexadecimales entre 00 y FF que especifican la intensidad del color.
    • RGBA - Los valores de color RGBA se especifican con: rgba (rojo, verde, azul, alfa). El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (totalmente opaco).
    • HSLA - Los valores de color HSLA se especifican con: hsla (matiz, saturación, luminosidad, alfa).

    Haga clic en el icono arriba/abajo () para cambiar entre los modos de color.

    Selección de una fuente

    La fuente actual se mostrará en el panel de estilos. Utilice la lista desplegable para seleccionar una nueva fuente. Haga clic en la X para cerrar el selector de fuentes.

    Selección de un tamaño de fuente

    El tamaño de fuente actual se mostrará en el panel de estilo. Utilice la lista desplegable para seleccionar un nuevo tamaño de fuente. Haga clic en la X para cerrar el selector de tamaño de fuente.

    Cualquier estilo que se haya cambiado mostrará una flecha de deshacer.

    Haga clic en la flecha de deshacer () para restablecer el estilo al valor original. También puede restablecer todos los estilos haciendo clic en Restablecer todos los valores predeterminados en la parte inferior del panel de estilos.

    Adición de fuentes personalizadas

    Para agregar una fuente personalizada al selector de fuentes:

    1. Haga clic en cualquiera de las listas desplegables de fuentes en la navegación izquierda.
    2. Haga clic en el enlace Agregar una fuente personalizada .
    3. Introduzca la URL de su archivo CSS.
    4. Compruebe que la fuente se ha agregado a la parte superior del selector de fuentes.

    Uso de un archivo CSS personalizado

    Para utilizar los estilos de un archivo CSS personalizado:

    1. Haga clic en CSS personalizado en la navegación izquierda.
    2. Introduzca la URL de su archivo CSS o péguelo en el código CSS.
    3. Haga clic en Guardar.