Você está lendo:

Como criar AMP Stories no WordPress através do Gutenberg

Sobre:
Como criar AMP Stories no WordPress através do Gutenberg

Saiba como criar AMP Stories com o novo editor do WordPress, o Gutenberg.

Leandro Vieira
Como criar AMP Stories
Audio

O Google AMP Stories é um dos quatro formatos AMP existentes.

Através do novo editor do WordPress, o Gutenberg, é possível criar AMP Stories no seu site.

Esse recurso é uma variação do AMP, através do qual você implementa Stories em seu website.

Me refiro ao “Story”, tipo de conteúdo popularmente utilizado em redes sociais.

Se você ainda não está por dentro, leia Google AMP Stories e o que você precisa saber a respeito.

Gutenberg e o AMP Stories

Gutenberg é o nome do novo editor do WordPress. Ele vem possibilitando significativas inovações na plataforma.

Uma delas, combinada com o plugin AMP, é a edição visual de AMP Stories para serem publicados no seu projeto.

Esse tipo de conteúdo já tem grande adesão junto aos usuários, os quais estão o tempo todo nos aplicativos sociais que disponibilizam conteúdos nesse formato.

A disponibilidade começou com o Snapchat, depois foi copiada pelo Instagram, Facebook, WhatsApp e YouTube.

E agora é o momento do seu projeto digital fazer o uso da solução, não é mesmo?

Os elementos necessários são:

  1. O WordPress 5.3, ou superior;
  2. Plugin AMP 1.2.0, ou superior;
  3. Conteúdos ricos e uma boa história para contar.

Sobre o Gutenberg

O editos utiliza o conceito de blocos para estruturar a informação das páginas.

O mesmo conceito foi replicado para a interface de criação dos Stories.

No entanto, é requerido a versão 5.3, lançada em novembro de 2019. Essa versão contém o necessário para a atuação em conjunta do Gutenberg com o plugin AMP.

Sobre o plugin AMP

É o módulo oficial dessa tecnologia, desenvolvido em conjunto pela Automattic e Google.

Através dele é criado o Custom Post Type “Stories”, além dos blocos, interface e gestão das Stories no editor do WP.

A funcionalidade, ainda em BETA, precisa ser ativada após a ativação do plugin.

Nas configurações do plugin AMP, basta ativar a opção “Stories” na opção Experiências.

Imagem com a interface de configuração do plugin AMP

As funcionalidades do editor de AMP Stories

Embora a funcionalidade encontra em versão BETA, já temos significativos recursos a disposição.

E com esses recursos não temos desculpa para não contarmos boas histórias, e de forma interativa.

O que podemos esperar do editor de Stories:

  • Interface com edição horizontal e gestão de múltiplas páginas;
  • Ordenação das páginas via Drag and Drop;
  • Suporte para texto, vídeos, imagens e botões de call-to-actions;
  • Textos automaticamente redimensionado para se encaixar na página;
  • Dezenas de família de fontes para os textos através do Google Font;
  • Diferentes opções para o background como cores, opacidade, gradiente, imagens e vídeo;
  • Possibilidade de mover elementos para frente, ou para trás, dos demais blocos.

Faça um paralelo com um editor de apresentações como o Keynote, PowerPoint e similares. É claro que com suas devidas proporções.

Inclusive, já há casos de apresentações realizadas com o editor de Stories do WordPress.

A estruturação de código do AMP Stories

Visualmente a representação seria assim:

Imagem ilustrativa com uma representação da composição estrutural de um AMP Story

A composição de uma AMP Story seria: páginas (com mais de uma teremos um carrossel), camadas sobre essas páginas com seus respectivos elementos.

Esses elementos são HTML básico e uma estruturação AMP.

A marcação HTML seria da seguinte forma:

Imagem ilustrativa com exemplo de uma marcação HTML / AMP usada para construir AMP Story

Quando você é desenvolvedor e apaixonado pela codificação, esse desenvolvimento pode ser manual.

Mas pode ser também através de um editor visual, o que permite editores, designers, profissionais de marketing e pessoas sem experiência em programação, contarem suas histórias.

Você conhece o Google AMP Stories? Conheça o recurso e saiba como adicionar em seu site através do WordPress e o editor Gutenberg. #wp #amp #stories #gutenberg

Como criar AMP Stories no Gutenberg do WordPress

A combinação do plugin AMP e o novo editor do WordPress nos permite criar visualmente, e de forma facilitada, AMP Stories.

Toda Story é um “post”. Eles são geridos num tipo de post dedicado ao recurso.

Tela administrativa do WordPress com a demonstração do tipo de post personalizado Stories

Toda a gestão é idêntica aos Posts e Páginas, os tipos de posts padrão do WP, ou seja, criação, edição, exclusão e demais opções da interface convencional.

Somente o editor que é específico e dedicado a criação das Stories. Nos permitindo contar as histórias desejadas com páginas, camadas e elementos desejados.

As páginas, camadas e elementos das histórias estão atrelados a esse “post”.

Uma vez criado, cada Story terá sua URL própria. Além de uma interface, layout e recursos padronizados.

No vídeo abaixo observamos a criação de uma Story. Observe o quão simples é.

Conclusão

O AMP Story é considerado para contar histórias que visualmente engajam.

Além do engajamento é possível maior interação e, por conseguinte, obtenção de resultados.

No Brasil, o uso de redes sociais é bastante considerável e esse formato surgiu das redes.

Os usuários estão acostumados com o formato. Agora você consegue entregar um formato de conteúdo moderno, interativo e fácil de usar.

Se você gostou desse artigo sobre WordPress Mobile, provavelmente vai gostar de:
Mais posts como este