-
Marketo Engage Assets: elija este tipo para examinar y seleccionar un recurso de imagen de la biblioteca Journey Optimizer B2B edition o de la instancia conectada a Market Engage.
En el cuadro de diálogo, puede elegir una imagen del repositorio y del espacio de trabajo seleccionados. Haga clic en Seleccionar para agregar el recurso.
Hay herramientas disponibles para ayudarle a localizar el recurso que necesita:
-
Haga clic en el icono Filtrar en la parte superior izquierda para filtrar los elementos mostrados según sus criterios.
-
Escriba texto en el campo Buscar para filtrar los elementos mostrados y buscar una coincidencia del nombre del recurso.
-
-
Experience Manager Assets: elija este tipo para examinar y seleccionar un recurso de imagen de un repositorio de Experience Manager Assets configurado.
En el cuadro de diálogo Seleccionar Assets, elija una imagen con las herramientas disponibles para localizar el recurso que necesita y haga clic en Seleccionar.:
-
Cambie Repositorio en la parte superior derecha.
-
Haga clic en Administrar recursos en la parte superior derecha para abrir el repositorio de Assets en otra pestaña del explorador y usar las herramientas de administración de AEM Assets.
-
Haga clic en el selector Tipo de vista en la parte superior derecha para cambiar la pantalla a Vista de lista, Vista de cuadrícula, Vista de galería o Vista de cascada.
-
Haga clic en el icono Orden para cambiar el orden de clasificación entre ascendente y descendente.
-
Haga clic en la flecha de menú Ordenar por para cambiar los criterios de ordenación a Nombre, Tamaño o Modificado.
-
Haga clic en el icono Filtrar en la parte superior izquierda para filtrar los elementos mostrados según sus criterios.
-
Escriba texto en el campo Buscar para filtrar los elementos mostrados y buscar una coincidencia del nombre del recurso.
-
-
Importar medios: elija este tipo para seleccionar un archivo de su sistema e importarlo a la biblioteca de recursos de Journey Optimizer B2B edition.
En el cuadro de diálogo Cargar imagen, arrastre y suelte un archivo de su sistema en el cuadro de archivo. El tamaño máximo de archivo es 100 MB.
Los nombres de archivo de las imágenes seleccionadas se muestran en el cuadro de diálogo. Los nombres de los archivos de recursos deben ser únicos (en todas las carpetas) y, si ya existe un archivo con el nombre, se muestra un mensaje. Los nombres pueden tener un máximo de 100 caracteres y no pueden contener caracteres especiales (como
;,:,\y|).Haga clic en Importar.
Puede agregar un título de imagen y texto alternativo para la imagen en el panel derecho.
Definir opciones de vínculo
En la ficha Configuración, use las opciones de Vínculo para vincular la imagen con un destino y el comportamiento del explorador para cargar la página de destino.
-
Establezca Type para el vínculo:
-
Vínculo externo: elija este tipo para usar una dirección URL estándar como destino del vínculo.
En URL, escriba la dirección URL del destino del vínculo. Haga clic en el icono Personalizar (
-
Página de aterrizaje: elija este tipo para seleccionar una página de aterrizaje publicada en la instancia de Marketo Engage conectada.
Para la opción Página de aterrizaje, seleccione la página de aterrizaje publicada. Haga clic en el icono Seleccionar página (
-
-
Para Etiqueta, escriba el texto que desea mostrar dentro del botón.
El tamaño del botón se ajusta según el texto y el estilo establecidos.
-
Para Target, elija cómo se redirige el destino vinculado desde el correo electrónico o la página:
- Ninguno: abre el vínculo con el comportamiento predeterminado del explorador o del cliente (predeterminado).
- En blanco: abre el vínculo en una nueva ventana o ficha.
- Self: abre el vínculo en el mismo fotograma.
- Principal: abre el vínculo en el marco principal.
- Superior: abre el vínculo en todo el cuerpo de la ventana.
Definición de los estilos
Establezca los estilos del componente de imagen en el panel derecho.
Con la ficha Estilos seleccionada en el panel derecho, use la sección Fondo para definir el color de fondo del componente.
Seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.
-
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Borde y establezca las opciones para mostrar un borde para el componente:
-
Mueva el conmutador a la derecha para habilitar las opciones de visualización de bordes y configúrelas según los criterios de diseño:
- Para establecer el color del borde, seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.
-
Para establecer el tamaño del borde (ancho de línea), haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.
-
Para establecer el estilo de borde, elija un valor de la lista de valores de CSS
border-styleestándar. -
Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.
-
Para el Radio del borde, establezca el valor numérico según la curva que desee para las esquinas.
Un valor de 0 (por defecto) produce una esquina cuadrada.
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Tamaño y establezca las opciones para la altura y anchura del componente:
-
Altura: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el tamaño de la altura del elemento según su contenido.
-
Anchura: utilice la opción para establecer la anchura en píxeles o porcentaje.
-
Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el tamaño del elemento en función del cuadro de contenido del bloque contenedor, que excluye el relleno y los bordes. Por ejemplo, un valor de 50 establece el ancho del elemento en el 50 % del ancho del contenido del bloque que lo contiene.
-
Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el ancho del elemento según su contenido.
-
Expanda la sección Alignment y elija la alineación horizontal que desee utilizar: izquierda, centro o derecha. Este estilo se traduce a un estilo CSS text-align estándar y afecta a la forma en que se coloca el componente dentro del componente que lo contiene.
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Margen y establezca las opciones de espaciado de los márgenes dentro del componente estructural. Este estilo replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante.
Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente:
-
Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Margen diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Superior-inferior: para establecer los márgenes superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Izquierda-derecha: para establecer los márgenes izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Independiente: para establecer cada margen en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Relleno y establezca las opciones de relleno dentro del componente estructural. Este estilo replica el parámetro CSS padding, que es el espacio entre el contenido de un componente y su borde. El relleno proporciona un espacio interno que puede utilizar para controlar la distancia entre el contenido y el borde del componente.
Establezca los valores de relleno en píxeles según sus necesidades de diseño. Puede establecer el relleno para todos los lados, el botón superior, el lado izquierdo-derecho o cada lado del componente de forma independiente:
-
Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Relleno diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Superior-inferior: para establecer el relleno superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Izquierda-derecha: para establecer el relleno izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Independiente: para establecer el relleno de cada lado en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.
Para aplicar atributos adicionales compatibles con CSS con valores, use la configuración de estilo Avanzado. Puede cambiar los valores de los atributos existentes o agregar nuevos. El estilo se aplica al componente mediante el modelo de herencia CSS para los componentes principal-secundario (elementos).
Los atributos mostrados reflejan los estilos definidos actualmente para el componente. Puede cambiar los valores según las definiciones de CSS. Haga clic en el icono Agregar (+) para agregar un nuevo atributo de estilo para el componente.
Social
Use el componente Social para insertar vínculos a páginas de medios sociales en el contenido. Incluye tres tipos de medios sociales predeterminados, pero puede agregarlos o eliminarlos según sus necesidades.
-
Para agregar un tipo de medio social, haga clic en el icono Agregar ( + ) y elija el tipo de medio social que desee agregar.
-
Para quitar un tipo de medio social, haz clic en X al lado del icono de medio social.
Con un tipo de medio social seleccionado, defina las opciones para ese tipo:
-
URL: escriba la URL de medios sociales que desea vincular al gráfico o icono de medios sociales.
-
Source: si desea utilizar su propia imagen en lugar del recurso predeterminado, elija un recurso de imagen. Puede seleccionar una imagen del repositorio de recursos de Marketo Engage conectado, un repositorio de Experience Manager Assets (si está configurado) o importar un archivo de imagen de su sistema. Consulte la información del componente de imagen para obtener detalles acerca de la selección e importación de recursos de imagen.
-
Texto alternativo: escriba el texto alternativo para la imagen mostrada.
Para definir un tamaño de visualización uniforme para todos los gráficos de medios sociales, establezca el Tamaño de las imágenes.
Puede establecer las siguientes opciones de estilo para el componente Social:
Con la ficha Estilos seleccionada en el panel derecho, use la sección Fondo para definir el color de fondo del componente.
Seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.
-
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Borde y establezca las opciones para mostrar un borde para el componente:
-
Mueva el conmutador a la derecha para habilitar las opciones de visualización de bordes y configúrelas según los criterios de diseño:
- Para establecer el color del borde, seleccione la casilla de verificación y haga clic en el cuadrado de color para elegir un color del selector. Puede elegir un color introduciendo un valor RGB, HSL, HSB o hexadecimal conocido. O bien, puede utilizar el regulador de color y el campo de color para seleccionar el color.
-
Para establecer el tamaño del borde (ancho de línea), haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.
-
Para establecer el estilo de borde, elija un valor de la lista de valores de CSS
border-styleestándar. -
Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.
-
Para el Radio del borde, establezca el valor numérico según la curva que desee para las esquinas.
Un valor de 0 (por defecto) produce una esquina cuadrada.
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Tamaño y establezca las opciones para la altura y anchura del componente:
-
Altura: haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el tamaño de la altura del elemento según su contenido.
-
Anchura: utilice la opción para establecer la anchura en píxeles o porcentaje.
-
Para una anchura porcentual, utilice el control deslizante para definir el valor porcentual. El porcentaje determina el tamaño del elemento en función del cuadro de contenido del bloque contenedor, que excluye el relleno y los bordes. Por ejemplo, un valor de 50 establece el ancho del elemento en el 50 % del ancho del contenido del bloque que lo contiene.
-
Para un ancho basado en píxeles, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles. Un valor vacío (Automático) es el valor predeterminado y ajusta el ancho del elemento según su contenido.
-
Expanda la sección Alignment y elija la alineación horizontal que desee utilizar: izquierda, centro o derecha. Este estilo se traduce a un estilo CSS text-align estándar y afecta a la forma en que se coloca el componente dentro del componente que lo contiene.
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Margen y establezca las opciones de espaciado de los márgenes dentro del componente estructural. Este estilo replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante.
Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente:
-
Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Margen diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Superior-inferior: para establecer los márgenes superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Izquierda-derecha: para establecer los márgenes izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Independiente: para establecer cada margen en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Relleno y establezca las opciones de relleno dentro del componente estructural. Este estilo replica el parámetro CSS padding, que es el espacio entre el contenido de un componente y su borde. El relleno proporciona un espacio interno que puede utilizar para controlar la distancia entre el contenido y el borde del componente.
Establezca los valores de relleno en píxeles según sus necesidades de diseño. Puede establecer el relleno para todos los lados, el botón superior, el lado izquierdo-derecho o cada lado del componente de forma independiente:
-
Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Relleno diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Superior-inferior: para establecer el relleno superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Izquierda-derecha: para establecer el relleno izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Independiente: para establecer el relleno de cada lado en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.
Para aplicar atributos adicionales compatibles con CSS con valores, use la configuración de estilo Avanzado. Puede cambiar los valores de los atributos existentes o agregar nuevos. El estilo se aplica al componente mediante el modelo de herencia CSS para los componentes principal-secundario (elementos).
Los atributos mostrados reflejan los estilos definidos actualmente para el componente. Puede cambiar los valores según las definiciones de CSS. Haga clic en el icono Agregar (+) para agregar un nuevo atributo de estilo para el componente.
Formulario (páginas de aterrizaje)
[Beta]{class="badge informative" title="Función Beta"}
Utilice el componente Formulario para agregar un formulario publicado a una página de aterrizaje o plantilla de página de aterrizaje. Para obtener más información sobre cómo crear y publicar formularios, consulte Forms.
-
Haga clic en la herramienta Formulario en la barra de herramientas de componentes, o use las propiedades de Incrustar formulario a la derecha para seleccionar el formulario publicado.
-
Si desea anular el tipo de seguimiento predeterminado del formulario, cambie la configuración según los requisitos de la página o plantilla.
Esta página también se conoce como página de agradecimiento por el formulario y esta configuración determina qué sucede cuando un visitante envía el formulario:
-
Permanecer en la página: elija esta opción para mantener al visitante en la misma página cuando se envíe el formulario.
-
Página de aterrizaje: elija esta opción para seleccionar cualquier página de aterrizaje de Journey Optimizer B2B edition o Marketo Engage como seguimiento.
-
Dirección URL externa: elija esta opción para especificar cualquier dirección URL como página de seguimiento. Una vez que el visitante envía el formulario, el explorador carga la dirección URL designada.
note tip TIP Si desea que el usuario utilice el formulario para descargar un archivo, puede especificar una URL para el archivo alojado. Con esta configuración, el botón de envío funciona como un botón de descarga. 
-
Si es necesario, seleccione la pestaña Estilos en el panel derecho para establecer los márgenes del formulario dentro del componente de estructura.
En el panel derecho con la ficha Estilos seleccionada, expanda la sección Margen y establezca las opciones de espaciado de los márgenes dentro del componente estructural. Este estilo replica el parámetro margin de CSS, que controla el espacio fuera del borde de un componente y lo separa de otros componentes. Crea un espacio alrededor del componente para influir en su posición y el diseño del contenido circundante.
Establezca los valores de los márgenes en píxeles según sus necesidades de diseño. Puede establecer el margen para todos los lados, el superior inferior, el izquierdo-derecho o cada lado del componente de forma independiente:
-
Todos los lados: para establecer un valor que se aplicará a todos los lados, desactive la casilla de verificación Margen diferente para cada lado. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Superior-inferior: para establecer los márgenes superior e inferior con el mismo valor, establezca el icono Bloqueado entre la configuración superior e inferior. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Izquierda-derecha: para establecer los márgenes izquierdo y derecho en el mismo valor, establezca el icono Bloqueado entre la configuración izquierda y derecha. Haga clic en los iconos de flecha arriba y abajo para aumentar o disminuir el número de píxeles.
-
Independiente: para establecer cada margen en un valor independiente, establezca el icono Desbloqueado entre la configuración superior e inferior y entre la izquierda y la derecha. Para cada configuración, haga clic en los iconos de flecha arriba y abajo para aumentar o reducir el número de píxeles.