Criação de conteúdo com o Editor universal authoring

Saiba como é fácil e intuitivo para os autores criarem conteúdo utilizando o Editor universal.

Introdução introduction

O Editor universal permite a edição de qualquer aspecto de qualquer conteúdo em qualquer implementação, para que você possa oferecer experiências excepcionais, aumentar a velocidade do conteúdo e proporcionar uma experiência de desenvolvedor de última geração.

Para isso, o editor universal oferece aos autores de conteúdo uma interface intuitiva que exige apenas um treinamento mínimo para que eles possam simplesmente entrar e começar a editar o conteúdo. Este documento descreve a experiência de criação do Editor Universal.

TIP
Para obter uma introdução mais detalhada do Editor universal, consulte o documento Introdução ao Editor universal.

Preparação do aplicativo prepare-app

Para criar conteúdo para um aplicativo usando o editor universal, o aplicativo precisa ser instrumentado por um desenvolvedor para oferecer suporte ao editor.

TIP
Consulte o documento Introdução ao Editor universal no AEM para obter um exemplo de como configurar um aplicativo do AEM para funcionar com o Editor universal.

Acesso ao Editor universal accessing

Uma vez que o aplicativo é instrumentado para funcionar com o Universal Editor, o Universal Editor pode ser acessado tanto dentro do AEM as a Cloud Service quanto diretamente, sem acessar o AEM.

Acesso dentro do AEM as a Cloud Service accessing-aem

  1. Faça logon na instância de criação do AEM as a Cloud Service.
  2. Use o Sites console para navegar até a página criada para uso com o Editor universal que você deseja editar.
  3. Editar a página.
  4. O Editor universal é aberto para editar a página selecionada.
NOTE
Ao editar uma página no Sites console, o console abrirá o editor apropriado para a página modelo: o Editor Universal descrito neste documento ou a variável editor de página.

Acesso Direto accessing-directly

  1. Faça logon no Editor universal. Você precisa de uma Adobe ID para entrar e ter acesso ao Universal Editor.

  2. Após fazer logon, digite o URL da página que deseja editar na barra de localização. para poder começar a editar conteúdo como conteúdo de texto ou conteúdo de mídia.

Noções básicas da interface ui

A interface do usuário do é dividida nessas áreas principais.

A interface do Editor universal

O cabeçalho da Experience Cloud experience-cloud-header

O cabeçalho da Experience Cloud está sempre presente na parte superior da tela. É uma âncora que informa onde você está na Experience Cloud e o ajuda a navegar por outros aplicativos da Experience Cloud.

O cabeçalho da Experience Cloud

Experience Manager experience-manager

Clique no link da Adobe Experience Cloud à esquerda do cabeçalho para navegar até a raiz da solução do Experience Manager e acessar ferramentas como o Cloud Manager, o Cloud Acceleration Manager e a distribuição de softwares.

Botão de navegação global

Organização organization

Exibe a organização na qual você está conectado no momento. Selecione para alternar para outra organização se sua Adobe ID estiver associada a várias.

Indicador da organização

Soluções solutions

Tocar ou clicar no alternador de soluções permite que você vá rapidamente para outras soluções Experience Cloud.

Alternador de soluções

Ajuda help

O ícone de ajuda fornece acesso rápido aos recursos de aprendizagem e suporte.

Ajuda

Notificações notifications

Esse ícone é marcado com o número de notificações incompletas atribuídas atualmente.

Notificações

Propriedades do usuário user-properties

Selecione o ícone que representa seu usuário para acessar as configurações do usuário. Se você não tiver uma imagem do usuário configurada, um ícone é atribuído aleatoriamente.

Propriedades do usuário

A barra de ferramentas do editor universal universal-editor-toolbar

A barra de ferramentas do Editor universal está sempre presente na parte superior da tela logo abaixo o cabeçalho Experience Cloud. Ele fornece acesso rápido para navegar para outra página a ser editada, bem como para publicar a página atual.

A barra de ferramentas do Editor universal

O Botão Início home-button

O botão Home retorna à página inicial do Universal Editor

Menu de opções

Na página inicial, você pode inserir o URL do site que deseja editar com o Editor universal.

Página inicial

NOTE
Qualquer página que você deseja editar com o Editor universal deve ser instrumentado para suportar o Editor universal.

Barra de localização location-bar

A barra de localização mostra o endereço da página que você está editando. Selecione para inserir o endereço de outra página a ser editada.

Barra de localização

TIP
Use a tecla de atalho L para abrir a barra de endereços.
NOTE
Qualquer página que você deseja editar com o Editor universal deve ser instrumentado para suportar o Editor universal.

Configurações do cabeçalho de autenticação authentication-settings

Selecione o ícone de configurações do cabeçalho de autenticação se precisar defina um cabeçalho de autenticação personalizado para fins de desenvolvimento local.

Botão Configurações do cabeçalho de autenticação

Configurações do emulador emulator

Selecione o ícone de emulação para definir como o Editor universal renderiza a página.

Ícone de Emulador

Tocar ou clicar no ícone de emulação revelará as opções.

Opções de emulação

Por padrão, o editor é aberto no layout de desktop, onde a altura e a largura são definidas automaticamente pelo navegador.

Também é possível optar por emular um dispositivo móvel e, no editor universal:

  • Definir sua orientação
  • Definir largura e altura
  • Alterar a orientação

Modo de visualização preview-mode

No modo de visualização, a página é renderizada no editor da maneira como seria vista em seu serviço publicado. Isso permite que o autor de conteúdo navegue pelo conteúdo clicando em links e assim por diante.

Modo de visualização

TIP
Usar a tecla de atalho P para alternar entre os modos de visualização.

Abrir visualização do aplicativo open-app-preview

Selecione o ícone abrir visualização do aplicativo para abrir a página que você está editando atualmente em sua própria guia do navegador, livre do editor para visualizar seu conteúdo.

Abrir visualização do aplicativo

TIP
Use a tecla de atalho O (a letra O) para abrir a visualização do aplicativo.

Publicação publish

Selecione o botão publicar para poder publicar as alterações no conteúdo em tempo real para consumo pelos leitores.

Botão de publicação

TIP
Consulte o documento Publicar conteúdo com o editor universal para obter mais informações sobre como publicar com o Universal Editor.

O editor editor

O editor ocupa a maior parte da janela e é onde a página especificada na barra de localização é renderizada.

Editor

Se o editor estiver em modo de visualização, o conteúdo será navegável e você poderá seguir os links, mas não poderá editar o conteúdo.

Painel Propriedades properties-rail

O painel de propriedades está sempre presente no lado direito do editor. Dependendo do modo, podem ser exibidos detalhes de um componente selecionado no conteúdo ou na hierarquia do conteúdo da página.

O painel de propriedades

Modo de propriedades properties-mode

No modo de propriedades, o painel mostra as propriedades do componente atualmente selecionado no editor. Esse é o modo padrão do painel de propriedades quando uma página é carregada.

Modo de propriedades

Dependendo do tipo de componente selecionado, os detalhes podem ser exibidos e modificados no painel de propriedades.

Detalhes do componente

Nem todos os componentes têm detalhes que podem ser mostrados e/ou editados.

TIP
Use a tecla de atalho D para alternar para o modo de propriedades.

Modo de árvore de conteúdo content-tree-mode

No modo de árvore de conteúdo, o painel mostra a hierarquia do conteúdo da página.

Modo de árvore de conteúdo

Ao selecionar um item na árvore de conteúdo, o editor rola até esse conteúdo e o seleciona.

Árvore de conteúdo

TIP
Use a tecla de atalho F para alternar para o modo de árvore de conteúdo.
Editar edit

Ao editar, as opções do componente selecionado aparecem no painel de propriedades, onde você pode editar o componente selecionado. Se o componente selecionado for um Fragmento de conteúdo, você também poderá selecionar o botão Editar.

Ícone de edição

Tocar ou clicar no botão de edição abre o Editor de fragmento de conteúdo em uma nova guia. Isso permite acessar todo o potencial do Editor de fragmento de conteúdo para editar o fragmento de conteúdo associado.

Dependendo das necessidades do fluxo de trabalho, talvez você queira editar o Fragmento de conteúdo no Editor universal ou diretamente no editor de Fragmento de conteúdo.

TIP
Use a tecla de atalho E para editar um componente selecionado.
Adicionar add

Se você selecionar um componente de contêiner na árvore de conteúdo ou no editor, a opção adicionar aparecerá no painel de propriedades.

Ícone Adicionar

Tocar ou clicar no botão adicionar abre um menu suspenso de componentes disponíveis para adicionar ao contêiner selecionado.

Adicionar menu de contexto

TIP
Usar a tecla de atalho A para adicionar um componente a um componente de contêiner selecionado.
Excluir delete

Se você selecionar um componente em um componente de contêiner na árvore de conteúdo ou no editor, a opção de exclusão aparecerá no painel de propriedades.

Ícone Excluir

Tocar ou clicar no botão Excluir exclui o componente.

TIP
Usar a tecla de atalho Shift+Backspace para excluir um componente selecionado de um container.

Editar o conteúdo editing-content

A edição de conteúdo é simples e intuitiva. À medida que você passa o mouse sobre o conteúdo no editor, o conteúdo editável é realçado com uma caixa azul.

O conteúdo editável é destacado por uma caixa azul

TIP
Por padrão, tocar ou clicar em um conteúdo o seleciona para edição. Se você quiser navegar pelo seu conteúdo seguindo os links, alterne para modo de visualização.

Dependendo do conteúdo selecionado, você pode ter diferentes opções de edição no local e outras informações e opções para o conteúdo na painel de propriedades.

Edição de Texto sem Formatação edit-plain-text

É possível editar o texto no local clicando duas vezes ou tocando duas vezes no componente.

Editar o conteúdo

Pressione enter/return ou selecione fora da caixa de texto para salvar as alterações.

Quando você seleciona selecionar o componente de texto, os detalhes são mostrados no painel de propriedades. Também é possível editar o texto no painel.

Edição de texto no painel de propriedades

Além disso, os detalhes do texto estão disponíveis no painel de propriedades. As alterações são salvas automaticamente quando o foco sai do campo editado no painel de propriedades.

Edição de Rich Text edit-rich-text

É possível editar o texto no local clicando duas vezes ou tocando duas vezes no componente.

Edição de um componente de rich text

Para sua conveniência, as opções de formatação e os detalhes do texto estão disponíveis em dois lugares.

  • A variável menu de contexto abre acima do bloco rich text e oferece opções básicas de formatação no contexto. Devido a limitações de espaço, algumas opções podem estar ocultas atrás do botão de reticências.
  • A variável painel de propriedades mostra todas as opções de formatação disponíveis junto com o texto.

As alterações são salvas automaticamente quando o foco sai do campo editado.

Editando mídia edit-media

Você pode exibir os detalhes no painel de propriedades.

Edição de mídia

  1. Toque ou clique na visualização da imagem selecionada no painel de propriedades.
  2. A variável seletor de ativos é aberta para permitir que você selecione um ativo.
  3. Selecione para selecionar um novo ativo.
  4. Selecionar Selecionar para retornar ao painel de propriedades onde o ativo foi substituído.

As alterações são salvas no conteúdo automaticamente.

Edição de fragmentos de conteúdo edit-content-fragment

Se você selecionar um Fragmento de conteúdo, você pode editar os detalhes no painel propriedades.

Edição de um fragmento de conteúdo

Os campos definidos no modelo de conteúdo do fragmento de conteúdo selecionado são exibidos e editáveis no painel de propriedades.

Se você selecionar um campo relacionado a um Fragmento de conteúdo, ele será carregado no painel Componentes e o campo será rolado automaticamente para o.

As alterações são salvas automaticamente quando o foco sai do campo editado no painel de propriedades.

Se quiser editar o fragmento de conteúdo na caixa Editor de fragmento de conteúdo clique no link botão editar no painel de modos.

Dependendo das necessidades do fluxo de trabalho, talvez você queira editar o Fragmento de conteúdo no Editor universal ou diretamente no editor de Fragmento de conteúdo.

Adicionar componentes a contêineres adding-components

  1. Selecione um componente de container na árvore de conteúdo ou no editor.

  2. Em seguida, selecione o ícone adicionar no painel de propriedades.

    Selecionar um componente para adicionar a um contêiner

O componente é inserido no container e pode ser editado no editor.

TIP
Usar a tecla de atalho A para adicionar um componente ao container selecionado.

Exclusão de componentes de contêineres deleting-components

  1. Selecione um componente de container na árvore de conteúdo ou no editor.

  2. Selecione o ícone de divisa do container para expandir seu conteúdo na árvore de conteúdo.

  3. Em seguida, na árvore de conteúdo, selecione um componente no contêiner.

  4. Selecione o ícone excluir no painel de propriedades.

    Exclusão de um componente

O componente selecionado foi excluído.

TIP
Usar a tecla de atalho Shift+Backspace para excluir o componente selecionado de seu contêiner.

Reorganização de componentes em contêineres reordering-components

  1. Selecione um componente de container na árvore de conteúdo ou no editor.

  2. Se ainda não estiver em modo de árvore de conteúdo, mude para ele.

  3. Selecione o ícone de divisa do container para expandir seu conteúdo na árvore de conteúdo.

  4. Arraste os ícones de alça ao lado dos componentes dentro do contêiner para mostrar que você pode reorganizá-los. Arraste os componentes para reordená-los no contêiner.

    Reorganização de componentes

  5. O componente arrastado fica cinza na árvore de componentes, enquanto o ponto de inserção é representado por uma linha azul. Libere o componente para colocá-lo em seu novo local.

Os componentes são reordenados na árvore de conteúdo e no editor

Visualização de conteúdo previewing-content

Ao terminar de editar o conteúdo, você geralmente deseja navegar por ele e observar como ele é exibido em outras páginas. No modo de visualização, é possível clicar em links e navegar pelo conteúdo, como um leitor faria. O conteúdo é renderizado no editor como seria publicado.

No modo de visualização, tocar ou clicar em um conteúdo reage como faria com um leitor do conteúdo. Se quiser selecionar o conteúdo para edição, alterne de modo de visualização.

Recursos adicionais additional-resources

Para saber como publicar conteúdo com o editor universal, consulte este documento.

Para saber mais sobre os detalhes técnicos do Universal Editor, consulte estes documentos do desenvolvedor.

  • Introdução ao Editor universal: saiba como o Editor universal permite editar qualquer aspecto do conteúdo das implementações, a fim de entregar experiências excepcionais, aumentar a velocidade do conteúdo e fornecer uma experiência de desenvolvimento de última geração.
  • Introdução ao Editor universal no AEM: saiba como obter acesso ao Editor universal e começar a instrumentar seu primeiro aplicativo do AEM para utilizá-lo.
  • Arquitetura do Editor universal: saiba mais sobre a arquitetura do Editor universal e como os dados fluem entre seus serviços e camadas.
  • Atributos e tipos: saiba mais sobre os atributos e tipos de dados exigidos pelo Editor universal.
  • Autenticação do Editor universal: saiba como funciona a autenticação do Editor universal.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab