AEM Edición del contenido de la página con el editor de páginas de la edit-content

AEM El editor de páginas de es una potente herramienta para crear el contenido de una página. Aprenda a utilizarlo para arrastrar y soltar contenido y editar contenido in situ.

Información general overview

Hay tres acciones básicas que puede realizar en el editor de páginas para editar el contenido:

  1. Agregando nuevos componentes arrastrándolos y soltándolos en la página.
  2. Agregando nuevos recursos arrastrándolos y soltándolos en la página.
  3. Editando componentes in situ que ya existen en la página.

AEM El editor de páginas de proporciona una interfaz de usuario intuitiva para realizar estas tareas, además de proporcionar acceso a funciones más avanzadas.

Además, el editor le permite organizar el contenido existente en su página permitiéndole lo siguiente

Agregando componentes adding-components

Puede arrastrar y soltar nuevos componentes en su página seleccionándolos en el explorador de componentes del panel lateral y soltándolos en un marcador de posición de componente.

Marcador de posición de componente component-placeholder

El marcador de posición de componente es un indicador que muestra dónde se colocará un componente cuando lo suelte. Tiene dos apariencias.

  • Al añadir un componente nuevo a la página (arrastrando desde el explorador de componentes), aparecerá como un cuadro gris con detalles del componente que está colocando.

    Marcador de posición al añadir un componente nuevo a una página

  • Al mover un componente existente, aparecerá como un cuadrado azul.

    Marcador de posición al mover un componente ya existente en una página

En ambos casos, el destino seleccionado aparecerá como un contorno azul debajo del componente que está arrastrando. El destino si el componente se va a colocar en el momento de su lanzamiento.

Añadir un componente desde el navegador de componentes adding-a-component-from-the-components-browser

Puede seleccionar un componente nuevo mediante el navegador de componentes. El marcador de posición de componente le muestra dónde está colocando el componente.

  1. Asegúrese de que el editor de páginas esté en modo Editar.
  2. Abra el explorador de componentes.
  3. Arrastre el componente requerido a la posición requerida y suéltelo.
  4. Editar el componente recién colocado.
NOTE
En un dispositivo móvil, el explorador de componentes llenará toda la pantalla. Cuando comience a arrastrar un componente, el explorador se cerrará para volver a mostrar la página, de modo que pueda colocarlo.

Adición de un componente desde el sistema de párrafos adding-a-component-from-the-paragraph-system

Puede agregar un componente nuevo mediante el marcador de posición Arrastrar componentes aquí del sistema de párrafos:

  1. Asegúrese de que el editor de páginas esté en modo Editar.

  2. Existen dos formas de seleccionar y añadir un componente nuevo desde el sistema de párrafos:

    • Seleccione la opción Insertar componente (+) de la barra de herramientas de un componente existente o del cuadro Arrastrar componentes aquí.

      Insertar un componente

    • Si está en un dispositivo de escritorio, puede hacer doble clic en el cuadro Arrastrar componentes aquí.

  3. Se abre el cuadro de diálogo Insertar nuevo componente para que pueda seleccionar el componente requerido. Toque o haga clic en el componente que desee añadir.

    • Utilice los filtros de búsqueda para encontrar el componente.
    • Utilice el icono de información situado junto a los nombres de los componentes para obtener más información sobre el componente.

    Cuadro de diálogo Insertar nuevo componente

  4. El componente seleccionado se añade al destino seleccionado. Edite el componente como sea necesario.

Agregar un recurso adding-asset

También puede agregar un componente nuevo a la página arrastrando un recurso desde el explorador de recursos .: esto crea automáticamente un componente del tipo apropiado (y que contiene el recurso).

Puede configurar este comportamiento en su instalación. Consulte el documento Guía de referencia de componentes para obtener más información.

Para crear un componente arrastrando uno de los tipos de activo anteriores:

  1. Asegúrese de que la página esté en modo Editar.
  2. Abra el explorador de recursos.
  3. Arrastre el recurso en cuestión hasta la posición deseada. El marcador de posición de componente le muestra dónde está colocado el componente y un destino mostrará dónde se insertará.
  4. Libere el recurso en el destino. Se crea un componente, adecuado para el tipo de recurso, en la ubicación requerida que contiene el recurso seleccionado.
  5. Editar el componente si es necesario.
NOTE
En un dispositivo móvil, el navegador de recursos ocupará toda la pantalla. Una vez que comience a arrastrar un recurso, el explorador se cerrará para volver a mostrar la página y poder colocarlo.

Si al examinar los recursos descubre que necesita realizar alguna modificación rápida en alguno de ellos, puede iniciar el editor de recursos directamente desde el explorador haciendo clic en el icono de edición que hay junto al nombre del recurso.

Edición de componentes in situ edit-in-place

Al seleccionar un componente, se abre la barra de herramientas de componentes. Esto proporciona acceso a varias acciones que se pueden realizar en el componente.

Barra de herramientas del componente

Las acciones disponibles en la barra de herramientas de componentes son apropiadas para el componente seleccionado. Puede ver más o menos en función del componente seleccionado y pueden describirse o no aquí.

  • Editar le permite modificar el contenido del componente, a menudo in situ. Su comportamiento depende del componente.

    Botón Editar

  • Configurar le permite cambiar algunos parámetros del componente que no están directamente relacionados con su contenido, normalmente en un cuadro de diálogo. Su comportamiento depende del componente.

    Botón Configurar

  • Copiar copia el componente en el portapapeles para pegarlo en otro lugar. El componente original permanece sin cambios.

    Botón Copiar

  • Cortar copia el componente en el portapapeles. Se quitará el componente original.

    Botón Cortar

  • Eliminar elimina el componente de la página con su confirmación.

    Botón Eliminar

  • Insertar componente abre el cuadro de diálogo para agregar un componente nuevo.

    Botón Insertar

  • Pegar pega el componente del portapapeles en la página. Si el original permanece, depende de si usó Copiar o Cortar.

    • Puede pegar componentes en la misma página o en otra distinta.
    • Si pega contenido en otra página que ya estaba abierta antes de la operación de cortar/pegar, debe actualizar la página para ver el contenido que se pegó.
    • El elemento se pegará sobre el elemento en el que seleccione la acción de pegar.
    • La acción Pegar se muestra únicamente si hay contenido en el portapapeles.

    Botón Pegar

  • Grupo le permite seleccionar varios componentes a la vez. En un dispositivo de escritorio puede conseguir lo mismo haciendo Control + clic o Comando + clic.

    Botón Agrupar

  • Principal selecciona el componente principal del componente seleccionado.

    Botón Principal

  • Diseño le permite modificar el diseño del componente seleccionado.

    • Esta opción se aplica únicamente al componente seleccionado y no activa el modo de diseño para toda la página.

    Botón Diseño

  • Convertir en una variación de fragmento de experiencia le permite crear un fragmento de experiencia a partir del componente seleccionado o agregarlo a un fragmento de experiencia existente.

    Convertir para el botón Fragmentos de experiencias

Cuadro de diálogo de edición de contenido component-edit-dialog

Algunos componentes ofrecen opciones de edición adicionales más allá de lo que está disponible in situ. Puede abrir el cuadro de diálogo de edición de un componente mediante el icono Editar (lápiz) de la barra de herramientas del componente para acceder a opciones de configuración adicionales.

Las opciones de edición exactas dependerán del componente. Para algunos componentes algunas acciones solo estarán disponibles en el modo de pantalla completa. Por ejemplo:

  • Componente de texto

    Barra de herramientas del componente de texto

  • Componente de imagen

    Barra de herramientas del componente de imagen

Editar componentes en modo de pantalla completa edit-content-full-screen-mode

Muchos componentes ofrecen un modo de pantalla completa para la edición al que se puede acceder con este botón.

Botón Pantalla completa

La edición de pantalla completa permite mostrar más opciones de edición que el editor local, como para el componente de imagen.

Componente de imagen en pantalla completa

Use el botón Minimizar para salir del modo de pantalla completa.

Botón Minimizar

Mover componentes moving-components

Para mover un componente:

  1. Seleccione el componente que desea mover pulsando y manteniendo pulsado o pulsando y manteniendo pulsado.

  2. Arrastre el componente a la nueva ubicación.

    • El editor de páginas indica la posición del componente con un marcador de posición y dónde se puede colocar el párrafo con un destino.

    Mover un componente

  3. Colóquelo en la ubicación deseada.

TIP
También puede utilizar Cortar y pegar para mover un componente.

Edición del diseño del componente editing-component-layout

En vez de pasar repetidamente de la edición al modo de diseño para ajustar un componente, puede seleccionar la acción Diseño del mismo. Podrá cambiar su diseño sin tener que abandonar el modo de edición, por lo que ahorrará tiempo.

  1. En el modo Editar de la consola Sites, seleccione un componente para mostrar la barra de herramientas del componente.

  2. Seleccione la acción Diseño para ajustar el diseño del componente.

    Botón Diseño de la barra de herramientas de componentes

  3. Una vez seleccionada la acción Diseño, puede modificar el diseño del componente como lo haría en el modo Diseño.

    • Se muestran los controles de cambio de tamaño del componente.
    • La barra de herramientas del emulador aparece en la parte superior de la pantalla.
    • En la barra de herramientas del componente se muestran las acciones de diseño en vez de las acciones de edición normales.

    Un componente en modo de diseño

  4. Después de realizar los cambios de diseño necesarios, toque o haga clic en el botón Cerrar del menú de acción del componente para detener la modificación del diseño y la barra de herramientas del componente vuelve a su estado de edición normal.

    La barra de herramientas de componentes de un componente de página

TIP
El ámbito de la acción Diseño se reduce al componente seleccionado. Por ejemplo, si está editando el diseño de un componente y hace clic en otro componente, se muestra la barra de herramientas de edición estándar del componente recién seleccionado (no la barra de herramientas de diseño) y desaparecen los controladores de cambio de tamaño y la barra de herramientas del emulador.
Si necesita editar el diseño general de la página y modificar múltiples componentes, cambie al modo de diseño.

Edición de herencia de componentes inherited-components

La herencia es el mecanismo por el que el contenido se puede vincular de modo que, al cambiar uno, se cambia automáticamente el otro. Los componentes heredados pueden ser el producto de distintos escenarios, como por ejemplo:

Puede cancelar y volver a habilitar la herencia. Según el componente, estas opciones están disponibles en la barra de herramientas del componente, si el componente forma parte de una Live Copy o Launch.

  • Cancelar herencia

    Botón Cancelar herencia

  • Volver a habilitar la herencia si la herencia ya se ha cancelado

    Botón Volver a activar herencia

  • El despliegue también está disponible en el modelo o en el origen de Live Copy

    Botón Desplegar

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab