Faz 10 meses que lançamos o Page Builder Sandwich para o público. Agora temos cerca de 6.000 instalações ativas, e isso é uma grande conquista para nós. Também recebemos muitos feedbacks por causa disso, tanto bons quanto ruins. O consenso, no entanto, é que as pessoas adoram a facilidade de criar layouts e seus conteúdos em comparação com os outros construtores de páginas existentes.
Uma grande parte do feedback que recebemos foram pedidos de recursos, e adicionamos muitos desses recursos nos últimos meses. Mas, conforme continuávamos fazendo isso, também começamos a mudar lentamente a interface do usuário no processo. E, consequentemente, também estávamos mudando a experiência do usuário… para pior. Chegou a um ponto, no entanto, em que precisávamos repensar a interface, porque ela simplesmente não funcionava mais de forma fluida, e os diferentes recursos também não combinavam mais com ela.
A Interface Obsoleta
Nas versões anteriores do PBS, queríamos que tudo estivesse no formato de botões. Por quê? Porque botões são fáceis de usar. Você apenas… clica neles. Nas versões mais antigas do inspetor (a barra lateral na imagem acima), clicar em um botão aumentava um valor, enquanto Shift+clique em um botão o diminuía. Isso parece bem simples. Mas com a adição de carrosséis, abas, mapas e outros novos elementos e recursos, todos esses botões se tornaram uma mistura de ícones diferentes com designs variados, e meio que começaram a parecer mais hieróglifos do que uma interface bacana. Isso não era um problema para usuários experientes, mas é bem intimidador de se ver se você é novo no PBS.
Em seguida, alguns problemas começaram a aparecer no inspetor. A ideia original era tornar tudo simples e disponível dentro do inspetor. E por tudo, eu queria dizer tudo – desde transformar texto em títulos até mudar cores de fundo, cores de fonte, o que você imaginar. Em seu estado atual, no entanto, o inspetor agora contém muitas opções que fazem você usar a roda do mouse para rolar para cima e para baixo constantemente. Bem diferente do inspetor que eu esperava criar anteriormente para os usuários.
Por último, apresentamos recentemente o mapeamento de shortcodes para seus plugins favoritos. Esse recurso exigiu que criássemos campos de texto, controles deslizantes de números, caixas de seleção e novos tipos de opções adicionais necessários para tornar sua experiência de edição de shortcodes mais agradável. Inicialmente, foi uma boa ideia e, sim, tornou a manipulação de shortcodes mais fácil para você. Mas, novamente, esse recurso se desviou da nossa interface “apenas botões”. Em retrospectiva, era realmente impossível usar apenas botões para alterar atributos de shortcodes. Agora, na versão mais recente, acabamos com 2 tipos de controles: os botões e os campos de shortcodes.
Há mais alguns motivos que nos fizeram decidir que nossa interface não era mais eficaz (ou adequada para nossas necessidades), mas os pontos acima são os principais. Uma coisa sempre foi certa, no entanto: sabíamos que tínhamos que atualizar a interface.
Definindo Como Um Construtor de Páginas Deveria Idealmente Funcionar
Em vez de mergulhar de cabeça e mudar as coisas imediatamente, demos cem passos para trás para dar uma olhada em toda a experiência do construtor de páginas. Queríamos dar uma nova vida à interface. Para ser sincero, não queríamos continuar reconstruindo-a ano após ano. É exaustivo e definitivamente não traz uma ajuda significativa para a comunidade WordPress. Desta vez, decidimos fazer as coisas de forma lenta e cuidadosa. Estudamos cada canto do Page Builder Sandwich e o que o torna um bom construtor de páginas, e finalmente estruturamos toda a experiência de edição em alguns conceitos fundamentais.
Conceito Essencial nº 1: Digitar Diretamente no seu Conteúdo para Editar as Coisas
Um dos principais motivos para instalar um construtor de páginas é se livrar das limitações do editor de texto do backend do WordPress. Não que o editor do backend não seja bom, mas ao criar suas páginas da web, ele não mostra imediatamente como sua página ficaria para os visitantes do seu site, nem permite que você distribua seu conteúdo fora de um layout de coluna única. Você só pode ver seu texto lá e algumas imagens, mas nada dos itens mais elaborados (ex.: formulários de contato). Você pode adicionar shortcodes, sim, mas eles não aparecerão em sua forma renderizada*.
* Existem plugins sendo feitos por terceiros para resolver isso, como o Shortcake UI, mas isso não vem ao caso.
É aí que entram os construtores de páginas no frontend. Eles trazem a experiência de edição para fora do backend e para o frontend, com você editando seu site exatamente como seus visitantes realmente o veriam. Como Pippin diria: o que você vê é o que você obtém (WYSIWYG).
Outra coisa boa de ser um editor frontend é que ele permite que você edite seu texto diretamente. Digitar títulos e parágrafos oferece a facilidade de usar um processador de texto comum na criação de sites. Botões e rótulos de abas também devem ser alteráveis simplesmente clicando neles e digitando.
Essa é a área em que a maioria dos outros construtores de páginas não tem um bom desempenho. A maioria deles força você a digitar dentro de um campo de texto para editar tudo. Mais uma vez, esse não deveria ser o caso em construtores de páginas frontend reais. Digitar e editar texto diretamente tem sido um ponto forte do Page Builder Sandwich desde a versão 2, e garantimos que isso continuasse sendo mantido na versão 3.
Conceito Essencial nº 2: Usar o Mouse para Ajustes Rápidos
O mouse é uma ferramenta poderosa que muitas vezes é negligenciada em construtores de páginas. Na maioria das vezes, os construtores de páginas o utilizam para permitir que as pessoas arrastem coisas e as soltem em locais diferentes, ou para clicar em botões ou campos de entrada. Embora isso seja bom, há muito mais que você pode fazer com o mouse em termos de criação de páginas.
Por um lado, há um incrível feedback visual ao usar o mouse como ferramenta na edição da página, especialmente no ajuste de propriedades visuais como margens, preenchimentos e tamanhos. Agora, ajustar seus elementos se torna uma experiência natural.
No PBS versão 3, você poderá ajustar várias coisas usando o mouse. É possível ajustar margens/espaçamentos entre elementos individuais, os preenchimentos dentro de suas colunas, bem como os tamanhos de imagens, ícones e mapas. Também substituímos os botões que permitiam alterar valores numéricos por controles deslizantes.
Conceito Essencial nº 3: O Texto Deve Ser Fácil de Estilizar
Se você se afastar um pouco do monitor, notará que a maior parte do que você adiciona em suas páginas da web é conteúdo de texto. Sim, temos imagens e ícones para acompanhá-los – e ultimamente tendemos a adicionar imagens maiores em nossos sites. Mas a maior parte do conteúdo importante é em texto: títulos, listas com marcadores, parágrafos, citações, etc. Junto a isso, está a forma como estilizados nosso texto para se adequar aos nossos designs. Nós mudamos seus tamanhos e cores, ou os deixamos em negrito ou itálico. Isso é para tornar nosso conteúdo mais legível, relevante e atraente para nossos respectivos leitores.
Como estilizamos o texto com frequência, os botões que nos permitem alterar estilos devem ser muito acessíveis. Eles não devem ficar escondidos dentro de uma caixa pop-up que precisamos abrir primeiro. A maioria dos construtores de páginas sofre dessa doença. Para que a interface do usuário seja rotulada como ‘livre de desordem’, até mesmo as opções mais usadas ficam ocultas da vista direta.
Para resolver isso, demos uma olhada nos processadores de texto mais comumente usados. Notamos que eles geralmente têm uma linha com uma infinidade de botões perto do topo da tela usados para formatar texto e copiamos o mesmo layout para a versão 3. Agora temos uma linha com todos os botões de estilo de texto sempre presentes no topo da sua tela. Isso torna a estilização muito rápida e algo quase natural na edição de texto.
Conceito Essencial nº 4: Opções Avançadas de Estilo Devem Ser Flexíveis, Mas Fáceis de Entender
A conclusão final sobre um construtor de páginas é que ele deve permitir que as pessoas criem designs impressionantes facilmente. Isso significa que devemos oferecer muitas configurações e opções diferentes sem impor uma curva de aprendizado difícil. Poder ajustar margens, preenchimentos e estilizar texto é ótimo, mas isso só vai até certo ponto. Você precisará de opções muito mais elaboradas para fazer o trabalho, opções como imagens de fundo, padrões, bordas, fundos fixos e muito mais. Acumular todas essas configurações diferentes pode ser um pouco cansativo, por isso simplificamos algumas delas e as organizamos em categorias para tornar as coisas mais amigáveis na versão 3.
Conceito Essencial nº 5: Suporte a Shortcodes
Por último, não vamos esquecer que o nosso construtor de páginas funciona sobre o WordPress. Devemos abraçar a plataforma e seus recursos, e não restringi-los ou nos afastar deles. Um recurso enorme que o WordPress oferece são os shortcodes. Isso não significa que todo o conteúdo deva ser composto por shortcodes – isso seria uma bagunça –, mas sim que devemos ser compatíveis com eles. Muitos plugins e temas usam shortcodes, e seria uma grande perda se ignorássemos todos eles. De fato, os shortcodes oferecem aos usuários a máxima flexibilidade quando se trata de criar páginas.
Apresentamos há algumas semanas nosso sistema de mapeamento de shortcodes e, graças a ele, mapeamos centenas de shortcodes de centenas de plugins. Priorizamos os plugins mais populares encontrados no diretório de plugins do WordPress, portanto, é provável que você os encontre em seus próprios sites. Isso só se fortaleceu na versão 3, e continuaremos aprimorando isso daqui para frente.
Conclusão
Pegamos todas essas propriedades essenciais acima e as incorporamos ao Page Builder Sandwich versão 3. É o melhor construtor de páginas que criamos para o WordPress até agora. É mais intuitivo e mais natural de usar, tem um desempenho mais rápido, é mais fácil de usar e mais amigável do que nunca.
Se você tem alguma ideia sobre um recurso essencial para um construtor de páginas, conte para nós comentando abaixo.