En este artículo se explica cómo utilizar el editor de JavaScript y CSS dentro de un artículo; para obtener instrucciones generales sobre la herramienta Builder, consulta Cómo utilizar la herramienta Builder para Layouts o mensajes

Abrir los controles de scripts personalizados

Para abrir el panel de control de JavaScript y CSS

• En la herramienta Builder, seleccione la pestaña Avanzado del panel de control

  

• Haga clic en el botón de alternancia <> y, a continuación, haga clic en el botón CSS/JavaScript

  
  

Editor de CSS – Menú de la izquierda

• Resaltar: esta opción resalta todos los elementos del generador, lo que facilita la visualización de información importante, como el ID del elemento y las clases.

• Enviar a vista previa: al seleccionar esta opción, se actualiza la vista previa de tu layout con el CSS más reciente.

• Rehacer/Deshacer: revierte los cambios o deshace las reversiones que realices

• Guardar fragmento: esto te permitirá guardar los fragmentos de código que crees.

• Maximizar/minimizar: amplía o reduce el editor al tamaño de la página.

• Historial de versiones: esto abrirá una lista de las versiones anteriores de cualquier código CSS personalizado (hasta las últimas 10).

Editor de JavaScript – Menú de la derecha

• Resaltar: esta opción resalta todos los elementos del generador, lo que facilita la visualización de información importante, como el ID del elemento y las clases.

• Generador de reglas de datos: esta opción te permite insertar JavaScript basado en reglas de suscripción de datos.

• Táctil: esta opción habilita el zoom y el desplazamiento táctiles en los elementos del constructor.

• Carrusel: esta opción te permite añadir funciones que modifican el comportamiento del carrusel.

• Playlist - Esta opción te permite añadir funciones que pueden modificar el comportamiento del elemento «Playlist».

• Elegir imagen: esta opción te permite añadir una referencia de imagen a tu editor

• Rehacer/Deshacer: revierte los cambios o deshace las reversiones que realices.

• Guardar fragmento: esto te permitirá guardar los fragmentos de código que crees.

• Maximizar/minimizar: amplía o reduce el editor al tamaño de la página.

• Elemento de texto: añade rápidamente un bloque de código dirigido a un elemento de nota de texto específico

• Historial de versiones: abre una lista de las versiones anteriores de cualquier código CSS personalizado (hasta las 10 últimas)

Para volver a la vista Elementos del panel de control, haz clic en el botón de alternancia Elementos

Fragmentos de código

Es posible que haya código que te resulte útil tener a mano para poder reutilizarlo fácilmente en varios Layouts. Si es así, puedes guardar ese código como un fragmento de código.

Para guardar un fragmento de código

• Abre el Editor de código personalizado siguiendo las instrucciones anteriores

• Escriba el código en el editor correspondiente

• Resalta el código que deseas guardar como fragmento

• Haz clic en el icono «Guardar fragmento»

  

• Esto añadirá un nuevo elemento en la sección Fragmentos del Panel de control

  

• Introduzca un nombre para su nuevo fragmento de código

• Pulsa Intro

Para utilizar un fragmento de código

• Abre el Editor de código personalizado siguiendo las instrucciones anteriores

• En el Panel de control, haz clic en el icono «+» del fragmento de código que desees insertar

  

• Esto añadirá el código a la sección correspondiente con la nota de que procede de los fragmentos y con el nombre del fragmento.

  

Control de versiones y restauración del código personalizado

El control de versiones se aplica únicamente a los editores de código personalizado y no afecta a otros cambios de layout.

Para facilitar los cambios de código en las secciones de código personalizado de Korbyt, ahora ofrecemos la posibilidad de restaurar el código personalizado a una versión publicada anteriormente.

Guardar nuevas versiones de código

Esto ocurre automáticamente cuando se publica un Layout que contiene código personalizado.

Las 10 versiones de código publicadas más recientemente se guardarán en la sección «Código anterior»

Restaurar una versión anterior del código

Para restaurar una versión anterior del código

• En la herramienta Builder, seleccione la pestaña «Avanzado» del panel de control

  

• Haga clic en el botón de alternancia <> y, a continuación, haga clic en el botón CSS/JavaScript

  

• En la sección de código que desee restaurar (CSS o JavaScript), haga clic en el icono «Versión anterior»

• Esto mostrará una lista de versiones anteriores del código.

  

  • Seleccione la que desee restaurar

• Haz clic en «Volver a publicar»

• Esto restaurará esa versión del código como el código activo en el Layout

Notas sobre el historial de versiones

• El historial de versiones se limita únicamente a los cambios en el código

• Layout los cambios fuera de los editores de código no se versionan

• El historial de versiones se mantiene por cada layout, no de forma global

Buenas prácticas para el código personalizado

• Publica con frecuencia cuando realices cambios incrementales en el código

• Utilice el historial de versiones antes de realizar modificaciones importantes

• Vuelva a publicar versiones que se sabe que funcionan si se produce un comportamiento inesperado