Componentes de estructura structure-components

Elija este tipo para examinar y seleccionar un recurso de imagen de la biblioteca B2B edition de Journey Optimizer o de la instancia conectada de Market Engage.

{width="700" modal="regular"}

En el cuadro de diálogo, puede elegir una imagen del repositorio seleccionado. 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.

  {width="700" modal="regular"}

Elija este tipo para examinar y seleccionar un recurso de imagen de un repositorio configurado de Experience Manager Assets.

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.

  {width="700" modal="regular"}

• 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.

  {width="700" modal="regular"}

Elija este tipo para seleccionar un archivo del 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.

{width="450"}

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.

1. 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:

2. 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.

   {width="300"}

   • 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-style estándar.

   • Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.

   {width="250"}

3. 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 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.

  {width="250"}

• 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.

  {width="250"}

• 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.

  {width="250"}

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.

{width="250"}

• Color de fondo: 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.

  {width="300"}

• Imagen de fondo - Mueva el selector de alternancia para habilitar la configuración de la imagen de fondo.

  {width="250"}

  Elija el tipo de origen del recurso y seleccione un archivo de imagen.

1. 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:

2. 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.

   {width="300"}

   • 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-style estándar.

   • Para determinar dónde se muestra el borde, active cada casilla de verificación Posición del borde.

   {width="250"}

3. 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.

Expanda la sección Alignment y elija la alineación vertical que desee usar: superior, central o inferior. Este estilo se traduce a un estilo CSS vertical-align estándar y afecta a la posición dentro del componente que lo contiene.

{width="250"}

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.

  {width="250"}

• 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.

  {width="250"}

• 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.

  {width="250"}

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.

{width="250"}