Administración de modificaciones web manage-web-modifications
Puede administrar fácilmente todos los componentes, ajustes y estilos que agregó a su página web. También puede agregar modificaciones directamente desde el panel dedicado.
Trabajar con el panel Modificaciones use-modifications-pane
-
Seleccione el icono Modificaciones para mostrar el panel correspondiente a la izquierda.
-
Puede revisar cada uno de los cambios realizados en la página.
-
Seleccione una modificación no deseada y haga clic en la opción Eliminar modificación del botón Más acciones para eliminarla.
note caution CAUTION Proceda con cuidado al eliminar una acción, ya que puede afectar a las acciones posteriores. -
Para eliminar varias modificaciones al mismo tiempo, haga clic en el botón Seleccionar en la parte superior del panel Modificaciones, compruebe las modificaciones que elija y haga clic en el icono Eliminar.
-
Use el botón Más acciones de la parte superior del panel Modificaciones para eliminar todas las modificaciones a la vez.
-
También puede eliminar solo las modificaciones no válidas, es decir, los cambios que fueron anulados por otros cambios. Por ejemplo, si modifica el color de un texto y lo elimina, la modificación del color deja de ser válida porque el texto ya no existe.
-
Puede cancelar y rehacer las acciones usando el botón Deshacer/Rehacer en la parte superior derecha de la pantalla.
Mantenga presionado el botón para cambiar entre las opciones Deshacer y Rehacer. A continuación, haga clic en el botón para aplicar la acción deseada.
Agregar modificaciones desde el panel dedicado add-modifications
Al editar una página con el diseñador web, puede agregar nuevos cambios al contenido directamente desde el panel Modificaciones, sin necesidad de seleccionar un componente y editarlo desde la interfaz del diseñador web. Siga los pasos a continuación.
-
En el panel Modificaciones, haga clic en el botón Más acciones.
-
Seleccione Agregar una modificación.
-
Seleccione el tipo de modificación:
- Selector de CSS - Más información
- Página
<Head>- Más información
-
Escribe tu contenido y guarda tus cambios.
-
Haga clic en el botón Más acciones que está junto a la modificación y seleccione Información para mostrar sus detalles.
Selector de CSS css-selector
Para agregar una modificación de tipo Selector de CSS, siga los pasos a continuación.
-
Seleccione Selector de CSS como tipo de modificación.
-
El campo Selector de elementos CSS le ayuda a buscar y seleccionar los elementos HTML (o nodos del árbol DOM) en los que desea aplicar los cambios.
-
Seleccione un tipo de acción (Establecer contenido o Establecer atributo) y rellene la información o el contenido necesarios.
-
Establecer contenido: especifique el contenido que va al elemento identificado por el campo Selector de elementos CSS.
-
Establecer atributo: especifique un atributo que se asociará con el selector CSS actual para que este selector pueda identificarse también con este atributo. Para ello, escriba un nombre en el campo Nombre del atributo y un valor en el campo Contenido. Si el atributo ya existe, el valor se actualiza; de lo contrario, se agrega un nuevo atributo con el nombre y valor especificados.
-
Página <head> page-head
Puede agregar código personalizado utilizando el tipo de modificación Página<head>.
El elemento <head> es un contenedor de metadatos (datos sobre datos) y se coloca entre la etiqueta <html> y la etiqueta <body>. En este caso, el código no espera eventos body o page-load: se ejecuta al principio de la carga de la página.
El elemento <head> se utiliza comúnmente para agregar código JavaScript o CSS al principio de la página. Los selectores para las acciones visuales subsiguientes dependen de los elementos del HTML agregados en esta pestaña.
Para agregar una modificación de tipo Página<head>, siga los pasos a continuación.
-
Seleccione Página
<head>como tipo de modificación.
-
Agregue su código personalizado en el cuadro Contenido.
note caution CAUTION Solo puede agregar elementos <script>y<style>a la sección<head>. Si se agregan etiquetas de<div>y otros elementos, es posible que<head>elementos restantes pasen al<body>. -
Haga clic en el botón Opciones de edición avanzadas. Se abre el editor de personalización.
Puede aprovechar el editor de personalización Journey Optimizer con todas sus capacidades de personalización y creación. Más información
Ejemplos de código personalizado custom-code-examples
Puede usar el tipo de modificación Página<head> para:
-
Utilice JavaScript en línea o vincule a un archivo JavaScript externo.
Por ejemplo, para cambiar el color de un elemento:
code language-none <script type="text/javascript"> document.getElementById("element_id").style.color = "blue"; </script> -
Configure un estilo en línea o un vínculo a una hoja de estilos externa.
Por ejemplo, para definir una clase para un elemento de superposición:
code language-none <style> .overlay { position: absolute; top:0; left: 0; right: 0; bottom: 0; background: red; } </style>
Prácticas recomendadas de código personalizado custom-code-best-practices
Por ejemplo:
| code language-none |
|---|
|
En caso de que sea necesario realizar alguna modificación, realice cambios dentro de este contenedor.
Si ya no necesita el código personalizado, deje este contenedor vacío, pero no lo elimine. Esto garantiza que otras modificaciones de la experiencia no se vean afectadas.
<head><>para dos campañas que afectan a la misma dirección URL.<head> para dos campañas que afectan a la misma dirección URL, JavaScript se inserta en la página desde ambas campañas. Journey Optimizer determina automáticamente el orden del contenido enviado. Asegúrese de que el código no dependa de la ubicación. Depende de usted asegurarse de que no haya conflictos en el código.