Saltar al contenido principal
Puede crear código CSS o JS personalizado en el Widget Studio y aplicar sus estilos personalizados a cualquier elemento del widget o ejecutar sus scripts bajo demanda. En este artículo, aprenderá a:
  • Añadir CSS personalizado
  • Aplicar su código CSS a elementos del widget
  • Añadir código JS
  • Cambiar la vista del código

​
Ejemplo de caso de uso

Un caso de uso común del código personalizado es aplicar el mismo estilo a varios elementos del widget, en lugar de configurar manualmente las propiedades de estilo en cada elemento. Si no es un usuario técnico, pida a uno de sus desarrolladores que cree clases CSS predefinidas para usted.

​
Añadir código CSS personalizado

  1. Haga clic en Código personalizado en el menú izquierdo. La página se abre con la opción CSS personalizado seleccionada.
  2. Añada su código CSS en el editor de código.

​
Aplicar código CSS a los elementos del widget

  1. Abra la sección Diseño.
  2. Seleccione un elemento. Este elemento tendrá el estilo correspondiente a una de las clases que ha creado en el editor de código.
  3. Desplácese hacia abajo y despliegue la sección CSS y clases.
  4. Añada el nombre de su clase en el campo ClassName del elemento, o en ClassName del contenedor si desea aplicar esta clase al elemento padre.
Su elemento seleccionado con el estilo de su código personalizado no aparecerá en el área de vista previa de la derecha. Debe hacer clic en el icono de cámara para ver sus cambios.

​
Añadir código JS

Añadir código JS le permite ejecutar un script personalizado a demanda en su widget.
  1. Haga clic en Código personalizado en la barra lateral izquierda.
  2. Haga clic en JS personalizado.
  3. Añada su código JS en el editor de código.
Para comprobar la ejecución de su script, haga clic en el icono de cámara.

​
Cambiar la vista del código

Si trabaja con código CSS y JS, es posible que desee leer ambos códigos al mismo tiempo. Para añadir varios editores de código:
  1. Haga clic en el icono Añadir panel en la esquina superior derecha encima del editor de código.
  2. Redimensione manualmente cada panel para que se ajuste a sus necesidades.
Para cerrar un panel, haga clic en la X a la derecha del marcador de código (JS o CSS).