Experimentação
Editor visual sem código
Seleccione um elemento no seu próprio site em produção e altere-o no inspector, ou acrescente uma secção pronta a usar. A variante é guardada; a página fica intacta.
Editor de IA
Descreva a alteração e veja-a ganhar forma
Diga ao editor o que quer, por palavras suas, ou aponte para um elemento e pergunte. A IA lê a página, propõe as alterações e pré-visualiza-as no seu site em produção. Nada fica guardado até as aplicar.
- Uma palavra ou uma secção inteiraCorrija um título, ou reformule por completo um hero, um menu ou uma tabela de preços com uma única instrução. Cada alteração aparece listada à parte, para que fique só com as que quer.
- JavaScript só quando é precisoA maioria dos testes mexe em textos, estilos e markup, e é isso que a IA escreve. Quando um teste tem de reagir a alguma coisa, como um clique ou o scroll, a IA escreve também o código, que tem de ser aprovado à parte.
- Lê a página por siA IA trabalha a partir de um esquema da página em que está: a sua estrutura e os seus textos. Descreve o resultado que quer, e ela encontra os elementos a alterar. Sem selectores, sem programador.
- Pré-visualize antes de guardarAs alterações propostas aparecem na sua página em produção, cada uma com a sua caixa de selecção. Ao aplicá-las, passam a ser alterações comuns na variante, que pode desfazer até guardar.
- Testes sólidos sem códigoQuem consegue descrever uma página melhor consegue construí-la como variante. A IA responde na língua em que escreve e deixa os textos da página na língua em que já estão.
- Veja o custo primeiroCada pedido gasta créditos de IA, e o painel mostra uma estimativa antes de o enviar. Os valores dos formulários e os dados pessoais da página são mascarados antes de qualquer envio.
O editor abre a partir do painel lateral do Chrome e carrega o seu site real numa frame, pelo que aponta para aquilo que quer alterar em vez de o descrever num ticket. Seleccionar um elemento abre o inspector: tipografia, espaçamento num modelo de caixa que pode arrastar, tamanho, disposição, fundo e contorno, e uma pesquisa por qualquer propriedade CSS que o navegador conheça. Cada alteração fica registada na variante que está a editar, nunca na página.
Um interruptor Normal, Hover, Focus e Active estiliza os estados interactivos de um elemento sem CSS, para que um botão possa mudar de cor ao passar o rato na variante tal como mudaria na sua folha de estilos. O texto edita-se no próprio lugar com um duplo clique, e as ligações, as imagens (incluindo as imagens responsivas que a maioria das lojas Shopify usa), o texto alternativo e as etiquetas de acessibilidade têm campos próprios.
As alterações não se limitam ao que já está na página. O separador Add é uma biblioteca de blocos, disposições e multimédia, de um hero ou uma FAQ a uma barra de compra fixa no telemóvel, e cada um adopta os tipos de letra e as cores do próprio site consoante o sítio onde é colocado. Qualquer texto numa alteração pode levar os dados da própria página, pelo que uma única alteração pode mostrar o preço de cada produto.
Uma lista de alterações mostra tudo o que a variante faz em palavras simples (Moved, Added button, Heading text), com desfazer e refazer fiáveis, e as edições feitas enquanto uma gravação decorre são mantidas. Essa lista é a variante. É o que é aplicado na página do visitante e o que a entrega de implementação lê mais tarde para dizer a um programador o que fixar no código.
O editor de relance
Um único ecrã para tudo o que um teste altera
O painel Layers e os componentes à esquerda, a sua página em produção ao centro, o inspector à direita. Cada secção abaixo mostra uma parte dele a funcionar.
Painel lateral do Chrome
Abra o editor a partir da página que está a ver
A extensão acopla-se ao painel lateral do Chrome, ao lado do site, e acompanha o separador em que está. Encontra o site, lista os seus testes e abre o editor nesta página, e não na página a partir da qual o teste começou.
- Altura total e redimensionável, e mantém-se aberta quando clica na página
- Filtre por estado, ou pesquise por nome ou número do teste
- Pede acesso a um site uma única vez, da primeira vez que abre lá o editor
Biblioteca de componentes
Acrescente uma secção inteira, não apenas uma cor nova
Arraste um bloco do separador Add para a página, e uma linha azul mostra onde vai ficar antes de o largar. Chega com o tipo de letra e os tamanhos de título do próprio site, com a cor de destaque tirada do sítio onde o largou.
- Doze blocos, de um hero e uma FAQ a uma barra fixa e um pop-up
- Secções, contentores e colunas que se empilham nos telemóveis
- Vídeo, um carrossel de imagens e uma galeria, com o YouTube reproduzido através do seu leitor sem cookies
Conteúdo dinâmico
Construa-o uma vez e cada página preenche os seus próprios dados
Insira dados da página em qualquer texto, ligação ou imagem, escolhidos a partir de uma lista dos valores reais da página. Um banner construído uma vez saúda cada visitante com a campanha de onde veio; numa loja, uma barra fixa mostra o nome e o preço de cada produto.
- Dados de campanha, visitante e data em todos os sites, sem configuração
- Dados de produto, preço e carrinho nas lojas, na moeda da própria página
- Dados em falta escondem o elemento, ou mostram uma alternativa à sua escolha
Feeds de dados
Dados dos seus próprios sistemas, dentro do teste
Ligue um feed que o site já publica, como avaliações, datas de eventos, textos de campanha ou um feed de produtos Google Merchant, escolha que item cada visitante vê, e marque os campos que uma página pode mostrar. Os servidores do Pertento vão buscá-lo periodicamente, pelo que os visitantes nunca esperam pelos seus.
- Faça corresponder o item ao endereço da página, a um parâmetro de URL, à campanha ou ao produto
- Ou mostre o item agendado para agora, para promoções temporizadas
- Só os campos que marcar chegam a um visitante
Inspector e estados
Estilize hover, focus e active sem escrever CSS
O inspector edita o que quer que seleccione: tipografia, espaçamento num modelo de caixa, tamanho, disposição, fundo e contorno. Um interruptor Normal, Hover, Focus e Active estiliza os estados interactivos, pelo que a cor de hover de um botão também faz parte da variante.
- Pesquise qualquer propriedade CSS que o navegador conheça, com Reset em cada campo
- Ligações, imagens responsivas, texto alternativo e etiquetas de acessibilidade
- Cada edição de estado é uma alteração comum, com desfazer e guardar
Edição de texto na página
Reescreva um título no sítio onde está
Faça duplo clique em qualquer texto da página e escreva. O negrito, o itálico e o sublinhado funcionam como num documento, e quando clica fora a edição torna-se uma alteração comum que o desfazer repõe exactamente.
- Negrito, itálico e sublinhado a partir do teclado, Shift+Enter para uma quebra de linha, Escape para cancelar
- Funciona no texto e no markup inline que ele contém
- Aparece na lista de alterações em palavras simples, como Heading text
Todas as correspondências
Altere todos os elementos correspondentes de uma vez, incluindo os que carregam mais tarde
Use um selector CSS como alvo e acrescente estilos ou HTML a tudo o que lhe corresponde. Os elementos que chegam mais tarde por scroll infinito, carrosséis ou navegação dentro da aplicação também recebem a alteração, uma vez cada um.
- Acrescentar, inserir, antes, depois ou substituir
- Uma contagem ao vivo de quantos elementos correspondem
- Seleccionar semelhantes faz o mesmo apontando, para todos os elementos iguais ao que escolheu
Alterações e gravação
Cada alteração listada, em linguagem que se percebe
Cada edição aparece listada em palavras simples, como Moved, Added button ou Heading text, com desfazer e refazer fiáveis. As edições feitas enquanto uma gravação decorre são mantidas, uma gravação falhada pode ser repetida e, ao fechar, é pedida confirmação.
- Reverta qualquer alteração individual a partir da lista
- CSS e JavaScript globais no topo, com o seu número de linhas
- Uma alteração cujo elemento falta na página fica assinalada, não escondida
Pré-visualização em qualquer lado
Veja a variante num telemóvel real
As pré-visualizações por dispositivo mostram tamanhos de computador, tablet e telemóvel dentro do editor. Para ver num dispositivo real, Preview on another device dá uma ligação que abre a variante guardada em qualquer telemóvel ou navegador, e uma segunda ligação que repõe esse navegador ao normal.
- Os tokens de sessão são retirados da ligação, pelo que é seguro partilhá-la
- Mostra as alterações guardadas enquanto o teste corre nessa página
- Abre em qualquer navegador, não apenas no Chrome
Código, quando quiser
HTML, CSS e JavaScript, com os mesmos dados da página
Tudo o que as ferramentas visuais não conseguem expressar escreve-se como código na variante. Edite ou acrescente HTML em torno de um elemento, ou escreva o CSS e o JavaScript globais da variante, e leia os dados da página com pertento.data().
- Insert page data acrescenta um token ao HTML
- Read page data acrescenta uma chamada pertento.data() ao JavaScript
- O CSS e o JavaScript globais podem ser limpos por completo
Atalhos de teclado
Atalhos de teclado para as acções que repete
Os atalhos funcionam assim que clica num elemento da página, e a lista completa está no ícone do teclado, na barra de ferramentas do editor.
- Guardar
- ⌘SCtrl+S
- Desfazer
- ⌘ZCtrl+Z
- Refazer
- ⇧⌘ZCtrl+Y
- Editar HTML
- E
- Duplicar
- D
- Esconder, mantendo o espaço
- H
- Acrescentar elemento
- A
- Remover elemento
- ⌫
- Seleccionar elemento pai
- ⇧↵
- Mover para cima ou para baixo
- ⌥↑⌥↓
- Abrir o menu do elemento
- ⇧F10
- Editar texto na página