Visão geral e revisão do plug-in do Google Web Stories para WordPress

As Web Stories são páginas tocáveis ​​em tela cheia com tecnologia AMP. Eles permitem que você crie narrativas visuais interativas que são ótimas para informações visuais. As histórias são envolventes, compartilháveis ​​e rastreáveis. Eles agora podem ser adicionados ao seu site WordPress graças a um plugin do Google. Nesta visão geral e revisão do plug-in, daremos uma olhada no plug-in Google Web Stories WordPress e ver o que ele pode fazer.

O que são histórias na web?

Conhecidas formalmente como histórias AMP, as histórias na web são páginas do tamanho de uma tela de dispositivo móvel com layouts em formato de revista. O conteúdo inclui texto grande com links para conteúdo mais longo, vídeos de 15 segundos no modo retrato com legendas e imagens com legendas. Web Stories é um sistema de código aberto e gratuito.

Eles devem ser usados ​​com dispositivos móveis. Eles normalmente contêm de 4 a 30 páginas com 10 palavras por página. Isso é ideal para produzir conteúdo em pequenas porções. Eles são uma ótima maneira de fornecer conteúdo interativo fácil de usar com uma mão enquanto almoçamos, sentamos no metrô etc.

Por que usar histórias na web com o WordPress?

O conteúdo e o design das Web Stories são adequados para conteúdo de blog em sites WordPress. O plugin os integra ao seu site WordPress e ajuda a trazer tráfego por meio do formato Web Story.

Eles até ajudam a melhorar o seu SEO e têm uma classificação elevada na pesquisa do Google, nas imagens do Google, no Google Discover e no Google app, tornando as histórias na web uma ótima maneira de melhorar o tráfego do WordPress.

Instalando o plug-in do Google Web Stories

Baixe o plugin beta gratuito. Este é um plugin beta público, então a maioria dos recursos principais está lá. A versão completa será lançada no final deste verão. Ele terá melhor estabilização, desempenho e correções de bugs, e incluirá suporte para animação e anexo de página.

Por ser beta, você terá que baixar o arquivo e instalá-lo manualmente seguindo estas etapas:

1. Vá para a página Histórias do Github e baixe o plugin beta
2. No painel do WordPress, vá para Plug - ins > Adicionar novo
3. Clique em Carregar Plugin
4. Selecione o arquivo compactado do seu computador
5. Clique em Instalar agora
6. Quando vir “Plugin instalado com sucesso”, clique em Ativar Plugin

Menu de histórias na web

Um novo item de menu é adicionado ao painel denominado Histórias. Aqui, você pode ver todas as suas histórias, adicionar uma nova história e explorar modelos. Suas histórias aparecerão aqui, onde você pode abri-las no editor, renomear, duplicar ou excluí-las.

Este é um tipo de postagem de Histórias que pode ser exibido como postagens de Histórias e um link para essas postagens pode ser adicionado a páginas e postagens regulares.

Crie uma história

Clicar em Criar nova história abre o editor onde você pode acessar as ferramentas visuais. Não há a opção de alterar seu tamanho ou recolhê-los. Se isso lembra o Canva, você não está sozinho. Funciona da mesma maneira e é igualmente intuitivo.

À esquerda está o conteúdo que você pode adicionar ao criador da página. Inclui imagens, texto e formas. As imagens também incluem vídeo. No meio está o criador da página. Inclui ferramentas para editar e publicar a história. À direita, estão as ferramentas de design e documentos. Cada elemento que você adiciona à página é uma camada separada.

Contente

As imagens e outros conteúdos são aqueles de sua pasta de mídia. Passar o mouse sobre um revela três pontos. Clicar nos pontos abre opções para editar ou excluir a imagem. Você também pode classificar, pesquisar e fazer upload de imagens ou vídeos. Clicar no conteúdo o adiciona à página da história.

Você pode clicar duas vezes para adicionar o conteúdo ou arrastar e soltar o conteúdo na página da história. Neste exemplo, estou arrastando a imagem para a página.

Texto

A guia de texto inclui botões predefinidos para adicionar títulos, subtítulos e corpo de texto. Clique em um ou clique em Adicionar novo texto para adicionar um texto predefinido à página.

Clique no texto para abrir a ferramenta de redimensionamento. Arraste para redimensionar ou agarrar o meio e mover o texto para um novo local. Isso também abre suas ferramentas à direita, onde você pode alterar o alinhamento, cores, tamanho, posição, camada, estilo, etc.

Você também pode selecionar vários itens de uma vez para redimensionar ou realocar o conteúdo.

Formas

A guia de formas inclui um quadrado, círculo, triângulo, coração, estrela, pentágono, hexágono e bolha. Arraste e solte-os na página, altere suas cores, opacidade, tamanhos, etc.

Página

A área da tela inclui o título, opções de publicação, lixo, copiar, adicionar nova página, desfazer, refazer, uma visualização e uma visualização em grade para ver várias páginas de uma vez. Clicar no conteúdo oferece algumas ferramentas de arrastar e soltar para redimensionar e mover o conteúdo. Também abre as opções para as ferramentas de design à direita.

Arraste o conteúdo para ver as opções de alinhamento.

Clique duas vezes no conteúdo para ver a imagem inteira e abrir ferramentas para ajustar o zoom e o alinhamento. Você pode redimensionar o conteúdo e movê-lo para obter a imagem exata que deseja.

Projeto

Os ajustes de design exibem controles para o elemento em que você clicou. Selecionei o plano de fundo da página e cliquei na cor. Isso abre um seletor de cores para que você possa definir a cor do plano de fundo.

Para imagens, isso inclui o alinhamento, tamanho e posição, opacidade, links, acessibilidade e camadas.

Com o texto, isso inclui a família da fonte, o estilo, o alinhamento, a cor, a cor do plano de fundo, o preenchimento e o link.

Para formas, isso inclui o alinhamento, tamanho, posição e cor.

A guia Documento inclui as opções de publicação padrão do WordPress e adiciona mais algumas. Salve como rascunho ou publique como público ou privado. Ajuste a data, o logotipo do editor e a imagem da capa. Ajuste o link permanente e o avanço da página. Escolha entre automático e manual e defina o tempo de avanço automático.

Modelos

A guia Explorar modelos exibe os modelos que você pode usar em suas histórias. Existem atualmente 8 modelos para ajudá-lo a começar. Os modelos incluem várias páginas, portanto, há muitos designs para ajudar.

Clicar em um abre o modelo, onde você pode ver todas as páginas que estão dentro do modelo.

Todas as páginas são selecionáveis ​​e ajustáveis. Selecione qualquer elemento para alterá-lo.

Publicação de uma história

Ao clicar para publicar a história, você verá opções para visualizar a história ou adicioná-la a uma nova postagem.

Ver história

A exibição da história abre a página no front end. Cada uma das páginas é visível, mas apenas a do centro é totalmente legível. A página exibe controles deslizantes com setas nas laterais, barra de navegação sob a página, um botão de reprodução ou pausa no canto superior direito e um botão de compartilhamento para tornar mais fácil para os visitantes compartilharem sua história na web. Clicar no botão permite que os visitantes copiem o URL.

Adicionar a nova postagem

Selecionar Adicionar a nova postagem cria automaticamente uma postagem de blog padrão com o código da história já colocado na postagem. Esta é uma postagem de blog padrão, portanto, ela aparece no fluxo do blog. Este é um link que abre a página da história. Adicione qualquer outro conteúdo à postagem que você deseja. Este código pode ser colocado em qualquer postagem ou página, para que você possa usá-lo com postagens de blog, layouts Divi, etc. Estou usando o editor clássico, mas funciona de maneira semelhante em Gutenberg.

Com Gutenberg, ele pede para converter o código para HTML. A história funciona neste modo, então você pode ver as páginas virando enquanto escreve a postagem.

Mais maneiras de usar o tipo de postagem de histórias

Você também pode adicionar o tipo de postagem ao seu menu de navegação, usá-los com o módulo de blog Divi, o Divi Theme Builder, etc.

Publicidade em histórias da web do Google

A monetização é limitada à plataforma do Google e às vendas de afiliados. Os anúncios de história são fornecidos pelo Google Ad Manager e Google DV360 (atualmente em versão beta). Suporte adicional ao servidor de anúncios será adicionado no futuro. Eles podem incluir histórias patrocinadas e afiliados.

Os anúncios do Google são de página inteira e aparecem nas histórias da web. Eles podem incluir links para páginas da Web, páginas AMP ou um aplicativo. Eles podem incluir texto, imagens, botões, vídeos, animações e qualquer combinação. Os anúncios são marcados como um anúncio no canto superior esquerdo. O objetivo dos anúncios é ter um design coeso que combine com a experiência do usuário do Web Stories.

A documentação mostra os detalhes de como codificar e criar anúncios. Existem vários modelos para você começar. Alguns são mostrados no exemplo acima.

Reflexões finais

Web Stories é uma maneira interessante de publicar conteúdo para o seu site WordPress. As histórias parecem páginas de revistas e funcionam como um controle deslizante. Eles até se integram bem com a estrutura de navegação do WordPress e com os layouts e módulos do Divi. Eles funcionam bem com dispositivos móveis.

O plug-in Web Stories do Google para WordPress se parece com ferramentas de edição de gráficos como o Canva. É simples e fácil de usar. Se você estiver interessado em uma maneira fácil de criar conteúdo simples que tenha uma ótima aparência e melhore seu SEO, recomendo dar uma olhada no plugin Web Stories para WordPress.

Nós queremos ouvir de você. Você já experimentou o plugin Google Web Stories WordPress? Conte-nos sobre sua experiência nos comentários abaixo.

Imagem em destaque via Jemastock / shutterstock.com