Utilizar el editor visual

Use el editor de código para añadir código CSS o JavaScript global a su página

Interfaz de usuario

El editor visual de Optimize consta de dos componentes visuales: la barra de aplicaciones y la paleta del editor, que aparece en la página web que quiere modificar (la página del editor).

Barra de aplicaciones

La barra de aplicaciones, que aparece en la parte superior de la página, incluye información identificativa, como el nombre y el estado de la experiencia, el nombre de la variante, el número de cambios hechos y el diagnóstico, y acceso a ayuda. Consulte más información sobre la fila superior en el artículo Presentamos el editor visual.

La fila superior

La fila superior de la barra de aplicaciones (la de color gris oscuro) incluye el nombre y el estado de la experiencia, el nombre de la variante, el menú de preajustes de dispositivos, el botón de cambios y el diagnóstico, que se explican en otras áreas del Centro de Ayuda.

Más información sobre la fila superior:

La fila inferior

La fila inferior de la barra de aplicaciones (la de color gris claro) incluye las siguientes funciones, que se describen con más detalle a continuación:

  • Selector de elementos
  • Ruta de exploración
  • Editor de código
  • Modo interactivo
  • Configuración de traslado

 

Selector de elementos y selección múltiple

Con el selector de elementos [Icono del selector de elementos], puede seleccionar varios elementos de una página web y aplicar los mismos cambios a todos ellos, lo que permite ahorrar tiempo. Por ejemplo, puede usarlo para aumentar el tamaño de fuente de todos los botones de la barra de navegación superior en la misma proporción.

Para empezar, haga clic en uno de los elementos que quiera modificar y, en la barra de aplicaciones, haga clic en el botón del selector de elementos [Icono del selector de elementos]. Se abrirá la ventana correspondiente:

Consejo: Si quiere editar varios elementos, mantenga pulsada la tecla Mayús y selecciónelos.

El campo del selector de elementos muestra los elementos seleccionados (por ejemplo, #header>a>img) y el número total de elementos seleccionados (por ejemplo, 1). Estos datos se actualizan de forma dinámica a medida que se seleccionan más elementos de la página. También puede escribir en el campo el nombre del elemento que quiera (por ejemplo, #login) para encontrarlo y seleccionarlo más rápido.

Las casillas de verificación Usar el ID de elemento y Usar la clase de elemento están marcadas de forma predeterminada. De esta forma, cuando haga clic en un elemento de la página, el editor visual seleccionará el ID y la clase correspondientes. Deje ambas casillas marcadas si los atributos de los elementos son estáticos.

Si el ID o la clase de un elemento se generan de forma dinámica (por ejemplo, desde un sitio web dinámico o un sistema de gestión de contenido), es posible que no quiera que el editor visual los detecte. Si quiere tener un mayor control a la hora de crear selectores, utilice las casillas siguientes:

  • Usar el ID de elemento: desmarque esta opción si el ID del elemento es dinámico.
  • Usar la clase de elemento: desmarque esta opción si la clase del elemento es dinámica.

Consulte más información sobre cómo se crean los selectores CSS en la sección Rutas de exploración de este artículo.

Ruta de exploración

Al hacer clic en su página web, el editor visual selecciona el elemento más anidado del área en la que se ha hecho clic. La ruta de exploración, situada en medio de la barra de aplicaciones, muestra la ruta del elemento que ha seleccionado en la estructura de la página.

Haga clic en los elementos de la ruta de exploración para seleccionar cualquier elemento antecedente (que podría ocupar la misma área e influir en las propiedades visibles de esa área, como la imagen de fondo o el color). Coloque el cursor sobre cualquier elemento antecedente de la ruta de exploración para inspeccionar el área que ocupa. Haga clic en el elemento y selecciónelo, y use la paleta del editor para inspeccionar las propiedades en las que influye.

Editor avanzado: captura de pantalla del selector de CSS

Consejo:
Haga clic en cualquier signo > para seleccionar su elemento antecedente.

Al seleccionar un elemento en el editor visual, se determina el selector de CSS al que se van a aplicar los cambios. El valor del selector es importante porque es lo que se utiliza al ejecutarse la experiencia de los usuarios cuando visitan el sitio web.

Este es el algoritmo que usa el editor para compilar el selector:

  • Transferir los antecedentes del DOM hasta que haya uno que pueda identificarse de forma única
    • Por su atributo de ID
    • Por una clase usada solamente por ese elemento de la página
    • Como la etiqueta <BODY> del documento
  • Volver hacia abajo al elemento seleccionado y:
    • Usar el nombre de la etiqueta si solo hay un elemento secundario con esa etiqueta
    • En caso contrario, usar el selector :nth-of-type
Consejos sobre selectores de CSS
  • Siempre es preferible dirigirse a los elementos con un ID, una clase única o un antecedente cercano que los tenga. Esto hace que sus variantes sean más fáciles de mantener cuando hay pequeños cambios en la estructura de la página.
  • Cuando use clases como identificadores únicos, asegúrese de utilizar una página representativa como su página del editor (por ejemplo, no use una página de resultados de producto con un solo producto).
  • Puede modificar siempre que quiera el selector de CSS de un cambio e introducir su propio selector. El editor destacará el elemento o los elementos que se acaben que asociar.
  • Puede inhabilitar las opciones de uso de ID o de una clase única para ajustar la jerarquía de una selección. Esto puede ser útil si los atributos usan un identificador de CMS o de base de datos y varían.

Editor de código

Además de hacer cambios en el editor visual, también puede usar el editor de código de Optimize para añadir código CSS y JavaScript global directamente a su página web.

Para añadir código CSS o JavaScript global a su página, haga clic en el botón del editor de código Insertar de la barra de aplicaciones:

El botón del editor de código de la barra de aplicaciones

Añadir código CSS

Para añadir código CSS directamente a su página, siga estos pasos:

Haga clic en CSS:

Menú del editor de código con la opción de CSS seleccionada

Se abrirá el editor de código CSS:

Captura de pantalla del editor de código CSS

Escriba (o pegue) el código CSS en el campo de texto y haga clic en Guardar.

Nota: El texto, el HTML y cualquier otro cambio de estilo que no sea de CSS (p. ej., el estilo de un elemento) no son visibles y no se verán afectados al editar el código CSS.

Convertir CSS a HTML

Si tiene que editar el código CSS de una variante para, por ejemplo, añadir estilos no compatibles (como los prefijos de proveedores de navegadores, los comentarios CSS, la animación de fotogramas o los hacks CSS), puede hacerlo con la opción de convertir a HTML. Optimize le permite editar el código CSS de variantes y usarlas sin validación.

El editor de código CSS de Optimize le permite ver y copiar código CSS que ha generado la interfaz de usuario y escribir su propio código CSS personalizado, que se traducirá en cambios de estilo en Optimize. Si escribe un código CSS personalizado que el analizador de Optimize no reconoce, tiene dos opciones:

  1. Hacer clic en Depurar código CSS para quitar cualquier código CSS que no se haya analizado.
  2. Hacer clic en Guardar y, a continuación, en Convertir a HTML para conservar el código CSS sin analizar y encapsularlo en HTML.

Cuadro de diálogo de convertir el código CSS a HTML

Al hacer clic en Convertir a HTML, el código CSS que no se haya analizado se inserta en la etiqueta HTML <STYLE> y se añade a la etiqueta <HEAD> del código del sitio web. De esta forma, el editor de Optimize no intentará validar ni mostrar el código CSS como cambios de estilo individuales.

Ejemplos de conversión de CSS a HTML

A continuación, se muestran algunos ejemplos de casos en los que puede utilizar la función para convertir el código CSS no admitido (en negrita) a HTML:

Prefijo de proveedor de navegador
div.nav > ul > li:nth-of-type(4) > a > span {
  color : rgb(247, 148, 151);
  -moz-font-smoothing: antialiased;
}
Comentario en CSS
div.nav > ul > li:nth-of-type(2) > a > span {
  color : rgb(247, 148, 151); /* Este valor RGB es un color rosa. */
}
Animación de fotogramas clave
@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 300%;
  }
  to {
    margin-left: 0%;
    width: 100%;
  }
}
Hack CSS
div.nav > ul > li:nth-of-type(2) > a > span {
  *color : rgb(247, 148, 151); /* Orientado a navegadores IE <= 7. */
}

Limitaciones

Cuando use la función de convertir a HTML, no podrá previsualizar en el editor visual de Optimize el efecto de cada cambio de estilo (por ejemplo, la cantidad de cambios, los elementos a los que afectan y si dichos elementos existen). Optimize no validará ni mostrará errores del código CSS que se haya convertido a HTML, pero luego puede depurar el código con Chrome DevTools.

Compatibilidad con condicionales

El editor de código CSS es compatible con módulos que utilizan condicionales, como media queries, lo que facilita la implementación de variantes de páginas adaptables. Por ejemplo, puede reducir un tamaño de fuente a 14 píxeles en pantallas de menos de 500 píxeles de ancho añadiendo el siguiente código CSS:

@media(max-width: 500px) {
  body {
     font-size: 14px;
  }
}

Editor avanzado de código CSS

Si sabe trabajar con CSS, puede implementar la variante por completo en el editor de código CSS. El código CSS que se agrega aquí se traduce en cambios de estilo individuales visibles en la lista de cambios. Del mismo modo, puede implementar una variante superior copiando el código desde el editor de código CSS y pegándolo en el sitio web de producción.

Añadir código JavaScript global

Los sitios web dinámicos presentan dificultades únicas a la hora de hacer pruebas y personalizarlos, ya que es posible que muchas de las señales que busque no estén presentes cuando se cargue el contenedor de Optimize. Aunque Optimize haga un cambio, puede que los elementos de las páginas se modifiquen o se muevan, así que Optimize tendrá que volver a hacer el cambio.

Las aplicaciones de página única (APU) pueden presentar dificultades similares, ya que no modifican las URLs ni se vuelven a cargar después de cada interacción de un usuario. Al añadir código JavaScript a nivel de página, dicho código estará disponible para aplicarse a cualquier elemento de la página, en lugar de estar asociado a un único elemento.

Consejo: Utilice un evento de activación para activar el código JavaScript global y, así, volver a hacer el cambio tantas veces como sea necesario.

Añadir código JavaScript global a la página

Para añadir código JavaScript global a su página, haga clic en el botón de edición de código Insertar de la barra de aplicaciones:

El botón del editor de código de la barra de aplicaciones

Haga clic en JavaScript global:

Menú del editor de código con la opción de JavaScript global seleccionada

Se abrirá el editor de JavaScript global:

Captura de pantalla del editor de JavaScript global

Escriba o pegue la función JavaScript a nivel de página a la que se hará una llamada después de que se active la experiencia sobre la que está trabajando y, a continuación, haga clic en Aplicar.

Ejemplo de JavaScript global

// La función se activa cuando el usuario acota los resultados de comercio electrónico.
// Cada vez que esto ocurra, se añadirá un enlace adicional para ver las últimas ofertas,
// pero cuando haya menos de tres resultados.

var eCommerceContainer = document.getByElementId('ecommerce-container');

if (eCommerceContainer.childNodes.length < 3) {
var offers = document.createElement('a');
offers.href = "/ofertas";
offers.innerText = ' Echa un vistazo a nuestras últimas ofertas'
eCommerceContainer.appendChild(offers);
}
Consejo: Utilice un evento de activación para activar el código JavaScript global y volver a hacer el cambio tantas veces como sea necesario.

Modo interactivo

El modo interactivo [Icono del modo interactivo] se utiliza para crear variantes a partir de páginas que incluyen elementos interactivos que requieren que el usuario lleve a cabo una acción para habilitarlos. Algunos de esos elementos pueden ser el desplazamiento, los menús interactivos y los paneles de inicio de sesión.

Combinación de teclas:

Pulse Mayús+Intro para activar o desactivar el modo interactivo.

Nota: Aunque es posible que el elemento seleccionado no sea visible, permanece seleccionado en modo interactivo, lo que le permite cambiar al editor visual para hacer cambios en la nueva selección.

Haga clic en el botón [Icono del modo interactivo] de la barra de aplicaciones para habilitar el modo interactivo, que oculta la paleta del editor y sustituye la barra de aplicaciones por esta sencilla barra negra:Banner de modo interactivo

Cuando esté en el modo interactivo, haga visible o interactúe con el elemento que quiera editar y, a continuación, haga clic en la opción Salir de la barra negra para volver al editor visual y hacer los cambios necesarios.

Configuración de traslado

Para mover elementos de su página web fácilmente, haga clic en la opción de configuración [Ajustes] de la barra de aplicaciones y, a continuación, en Mover a cualquier parte.

Menú de ajuste de mover elementos a cualquier parte

Mover a cualquier parte

Al usar esta opción, se crean cambios de estilo basados en la posición de un elemento de la página web (por ejemplo, izquierda, parte superior, inferior, etc.). El elemento mantendrá su ubicación original en el DOM, pero a los visitantes se les mostrará en una nueva posición. Normalmente, el estilo del elemento no se verá afectado y el resto de la página seguirá siendo el mismo.

Use Mover a cualquier parte cuando cambie la posición de botones, áreas y elementos de posición fija globales, como el área de inicio de sesión.

Seleccionar automáticamente la reorganización

Esta opción facilita la selección de los elementos de origen y de destino correctos mientras se desplaza por el editor visual. Al hacer clic en el editor visual, se selecciona automáticamente el elemento correcto (por ejemplo, un elemento de lista <li> en lugar de la imagen <img> que contiene) y limita la reorganización a lo que hay dentro del contenedor (es decir, el elemento de lista <ul>).

Cambiar el orden exterior del elemento objetivo

Nota: Desmarque Seleccionar automáticamente la reorganización para habilitar este ajuste.

Cuando se marca esta opción, se habilita la de mover a cualquier parte. Cuando se desmarca, la capacidad de volver a ordenar elementos en el DOM se inhabilita y el modo de movimiento predeterminado cambia de antes/después a arriba/abajo.

¿Te ha resultado útil esta información?
¿Cómo podemos mejorar esta página?
Búsqueda
Borrar búsqueda
Cerrar búsqueda
Aplicaciones de Google
Menú principal
Buscar en el Centro de ayuda
true
101337
false