Skip to main content

Explorar o Page Designer

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:
  • Explicar como o envolvimento do desenvolvedor difere no Page Designer em comparação com os Slots de conteúdo.
  • Descrever três coisas que você pode fazer com o Page Designer.
  • Listar três etapas básicas de um fluxo de trabalho de desenvolvimento de página do Page Designer.
  • Listar três maneiras de controlar a exibição de uma página do Page Designer.
  • Explicar como as páginas se relacionam com componentes.

O que é o Page Designer?

Brandon Wilson é um anunciante sênior que trabalha para a Cloud Kicks Corporation, uma empresa especializada em tênis personalizados de alto padrão.

Brandon Wilson, anunciante da Cloud Kicks

Ele está entusiasmado em trabalhar com o Page Designer do Commerce Cloud, um editor visual que facilita a criação e o gerenciamento de páginas de destino personalizadas como estas.

  • Página inicial
  • Páginas de estilo de vida
  • Páginas de destino da categoria

Nessa página, por exemplo, ele pode ter como alvo compradoras interessadas em calçados e roupas. Com os componentes reutilizáveis do Page Designer, ele pode facilmente criar a mesma página com gráficos e textos que visam compradores com outros interesses esportivos, como beisebol ou corrida.

Os ativos de conteúdo da loja incluem gráficos e textos.

Sua gerência está ansiosa para aproveitar esse recurso, melhorar o negócio e aumentar as vendas em resposta à concorrência e às tendências no varejo.

O diretor de marketing da empresa está trabalhando com Vijay Lahiri, o desenvolvedor, para projetar tipos de páginas e de componentes voltados apenas para a Cloud Kicks. Você pode acompanhar Vijay no módulo Salesforce B2C Commerce Page Designer para desenvolvedores enquanto ele aprende a desenvolver com o Page Designer.

Neste módulo, você acompanha enquanto Brandon aprende sobre o Page Designer e cria sua primeira página.

O que você pode fazer com o Page Designer?

Brandon já é um especialista em slots de conteúdo, áreas pré-configuradas na loja onde ele mostra produtos, categorias, ativos de conteúdo, HTML estático e recomendações de produtos. Mas para mudar algo em uma página, ele tem que pedir ajuda a Vijay Lahiri, seu desenvolvedor. Ele gosta da ideia de ser capaz de criar e editar páginas por conta própria. E com o Page Designer, Vijay cria tipos de página e componentes reutilizáveis para que Brandon possa criar e modificar páginas.

Com o Page Designer, Brandon pode criar experiências de compradores incríveis que são automaticamente suportadas por tipo de dispositivo, grupo de clientes, agendamento e local. Ele pode usar os mesmos tipos de página e componentes para criar uma variedade de páginas que podem ser atualizadas conforme a necessidade.

Veja o que ele pode fazer.

  • Configurar quando uma página fica visível e quem pode vê-la.
  • Configurar quando um componente fica visível em uma região e quem pode vê-lo.
  • Fornecer conteúdo diferente para componentes de acordo com a localidade.
  • Fazer upload de ativos de conteúdo.
  • Definir configurações de SEO.
  • Habilitar a pesquisa para páginas do Page Designer.
  • Incluir uma página no sitemap.

São muitos recursos! Acompanhe enquanto ele cria e configura sua primeira página no Page Designer.

Qual é o fluxo de trabalho?

Brandon descobre que criar páginas no Page Designer é um processo simples. Aqui estão as etapas básicas.

  • Design: determine como os compradores acessam as páginas (por email, categorias de destino ou conteúdo de marketing).
  • Configuração: crie páginas com componentes, preencha conteúdo e atribua produtos.
  • Pré-visualização no Page Designer: clique em Visualizar para exibir diferentes tipos de dispositivos, grupos de clientes e datas.
  • Pré-visualização na loja: use o Kit de ferramentas da loja para publicar a página, visualizar por data, grupo de clientes, localidade, tipo de dispositivo e exibir a estrutura de URL.
  • Agendar e publicar: agende quando as páginas aparecem e para quem, e veja-las imediatamente para fins de teste.

Por enquanto, Brandon quer se familiarizar com o produto e cria uma página simples com dois componentes.

Páginas, componentes e regiões

Uma página do Page Designer é simplesmente uma página HTML que é carregada pelo navegador em um laptop, desktop, tablet ou celular local. Você pode criar uma página no editor visual do Page Designer no Business Manager com base em um tipo de página pré-criada. Você usa componentes em uma página com base em tipos de componentes pré-criados. Quando um desenvolvedor cria um tipo de página, ele também cria a estrutura da página, incluindo suas regiões.

  • Uma página contém uma ou mais regiões com seções.
  • Uma região é uma área da página ou componente que contém um ou mais subcomponentes.
  • As regiões também podem conter outras regiões.
  • Um componente usa o layout definido por um tipo de componente.

Este diagrama ilustra como você pode organizar regiões e componentes em uma página.

O layout de uma página com regiões e componentes.

Ferramentas UI

À medida que Brandon cria suas páginas, ele se familiariza com as ferramentas de Interface do Usuário do Page Designer. Elas serão úteis em uma unidade posterior.

Ferramentas de interface de usuário do Page Designer.

Neste gráfico, RefArch é o nome da loja da Cloud Kicks no Business Manager que Brandon está editando. Ele clica no menu suspenso para mudar a localidade. Ele está definido como padrão, o que significa que o Page Designer usa o que está configurado como a localidade de dados preferida em seu perfil de usuário. Isso pode diferir do local padrão da sua loja. Ao trabalhar no Page Designer, a localidade de dados do usuário e do site devem ser iguais. Nós entraremos em mais detalhes sobre a localidade em uma unidade mais adiante neste módulo.

Ele seleciona Visível para este local a fim de definir a página como visível ou oculta para a localidade selecionada.

Ele clica no ícone de visualização Ícone de visualização para ver como sua página procura compradores específicos em determinadas datas. Veremos esse recurso mais adiante.

Ele verifica como sua página fica em diferentes dispositivos.

Ícones do dispositivo do Page Designer.

Com o clique de um botão, Brandon pode ver sua página em um dos três tamanhos. Os números refletem o tamanho da página em pixels.

  • Desktop: 1280 X 1024
  • Tablet: 768 X 1024
  • Telefone: 375 X 667

Brandon pode clicar em Girar para mudar de retrato para paisagem.

Próximas etapas

Nesta unidade, você aprendeu o que o Page Designer pode fazer e seu fluxo de trabalho típico. Você aprendeu como o Page Designer estrutura páginas, componentes e regiões para trabalharem em conjunto e como você pode controlar a exibição do comprador.

Na próxima unidade, você verá Brandon criar e configurar uma nova página e seu primeiro componente.

Continue a aprender de graça!
Inscreva-se em uma conta para continuar.
O que você ganha com isso?
  • Receba recomendações personalizadas para suas metas de carreira
  • Pratique suas habilidades com desafios práticos e testes
  • Monitore e compartilhe seu progresso com os empregadores
  • Conecte-se a orientação e oportunidades de carreira