1) Por que criamos um novo site e não podíamos simplesmente “trocar de tema”

Quando identificamos pela primeira vez a necessidade de mudança, a tarefa parecia simples: "Mude o bloco superior e torne a chamada para ação mais eficaz". À primeira vista, isso pode parecer uma solução rápida, mas logo percebemos que essa pequena tarefa revelou problemas subjacentes muito maiores com a estrutura e o design do site. O problema não era apenas um bloco; era toda a arquitetura do site que precisava de uma revisão.

Nosso site foi construído ao longo do tempo, com diferentes páginas adicionadas usando vários designs e layouts, sem nenhum tema ou modelo unificado. Cada página era única em seu design, o que pode parecer criativo, mas levou a um problema significativo: inconsistência. Se fôssemos em frente e fizéssemos um novo design apenas para o bloco superior, mantendo o resto do site como estava, isso significaria atualizar manualmente esse bloco em mais de 700 páginas e postagens. Pior ainda, esse processo manual precisaria ser repetido toda vez que quiséssemos fazer alterações futuras. Imagine a ineficiência de ter que vasculhar centenas de páginas, garantindo que cada uma tivesse as atualizações mais recentes. Rapidamente ficou claro que continuar trabalhando com o site antigo não seria sustentável.

Além da logística de atualização de cada página, tivemos que considerar a experiência geral do usuário. Os usuários de hoje esperam experiências coesas e perfeitas quando visitam um site. Se eles rolarem uma página para baixo e virem que o design é inconsistente – com cada bloco usando estilos diferentes – isso cria uma impressão desconexa e pouco profissional. Pior ainda, quando um usuário muda de uma página para outra e percebe que o layout e o design são totalmente diferentes, isso reforça uma sensação de desordem.

A inconsistência se estendeu além do layout. Muitas das imagens no site estavam desatualizadas, mal estilizadas ou até mesmo geradas inapropriadamente por redes neurais. Essas imagens não estavam de acordo com os padrões de design modernos, e substituí-las era outra tarefa assustadora. O uso de imagens ruins refletia mal na qualidade geral do site, deixando os usuários com uma impressão negativa do produto ou serviço que estávamos oferecendo.

Não havia uma maneira simples de atualizar o site de forma abrangente usando uma ferramenta como o Elementor. Cada página e bloco continham seus próprios estilos inline, o que significa que as alterações não podiam ser feitas globalmente. Se quiséssemos atualizar o estilo do site, teríamos que passar por cada página e atualizar manualmente cada bloco, o que seria demorado e ineficiente. Com isso em mente, ficou evidente que nossa única solução era construir um novo site do zero. Isso nos permitiria transferir todo o conteúdo, mantendo as mesmas URLs, mas com um design novo, consistente e facilmente atualizável.

2) Por que decidimos não usar o Elementor

Elementor é um dos construtores de páginas mais populares para WordPress. À primeira vista, parece uma ótima ferramenta que permite a criação rápida e fácil de páginas. No entanto, depois de trabalhar extensivamente com ele, encontramos várias limitações que nos fizeram decidir nos afastar do Elementor e optar por um site personalizado.

Limitações e desafios do Elementor:

1. Bugs e falhas : embora o Elementor ofereça muitos recursos úteis, ele não está isento de problemas técnicos. Por exemplo, quando copiávamos uma página e tentávamos editá-la, a nova página frequentemente parecia diferente da original, mesmo antes de fazer qualquer alteração. Havia bugs frequentes com a forma como os elementos eram exibidos, como a propriedade “largura máxima da imagem” não funcionando corretamente. Essas falhas dificultavam garantir um estilo consistente em todas as páginas.
2. Muita Liberdade Criativa, Levando à Inconsistência : Um dos principais pontos de venda do Elementor é a capacidade de personalizar tudo. No entanto, essa flexibilidade pode ser uma faca de dois gumes, especialmente quando vários editores estão trabalhando no site. É fácil para não profissionais criarem páginas com designs inconsistentes sem querer. Por exemplo, vimos casos de editores usando texto rosa em botões rosa ou adicionando triângulos laranja voadores no fundo, resultando em um design desorganizado e confuso. Sem um sistema de design rigoroso em vigor, tornou-se impossível manter uma identidade visual coesa.
3. Personalização limitada para funcionalidade avançada : embora o Elementor se destaque na construção básica de páginas com texto e imagens, ele se torna mais desafiador quando você precisa adicionar funcionalidade personalizada. Muitas vezes nos encontramos limitados aos blocos integrados, que eram difíceis de personalizar para recursos mais complexos. À medida que nossas necessidades cresceram além dos layouts básicos, as limitações do Elementor se tornaram cada vez mais aparentes.
4. Código inchado e problemas de desempenho : o método de construção de páginas do Elementor introduz aninhamento excessivo de elementos. Por exemplo, o Elementor gera automaticamente múltiplos
   recipientes dentro de outros

   elementos, cada um com seu próprio conjunto de estilos. Isso resulta em uma estrutura inchada que afeta negativamente a velocidade de carregamento, o desempenho da página e, finalmente, a classificação de SEO do site. Quando executamos testes de velocidade, os resultados foram consistentemente ruins, e o código pesado gerado pelo Elementor foi o grande culpado.
5. Sem recursos de teste A/B : no cenário digital de hoje, o teste A/B é essencial para otimizar a experiência do usuário. No entanto, o Elementor não oferece a capacidade de mostrar versões diferentes do site para usuários diferentes. Todos veem o mesmo site, o que limita nossa capacidade de testar e ajustar elementos de design como cores, formatos de botões e imagens de fundo. Sem essa funcionalidade, não poderíamos otimizar o site com base no comportamento real do usuário.
6. Inchaço do banco de dados : Talvez uma das desvantagens mais significativas do Elementor seja como ele lida com estilos e conteúdo. O Elementor armazena estilos, estruturas aninhadas e outras tags desnecessárias misturadas com o conteúdo no banco de dados. Isso leva a um banco de dados inchado que não é limpo mesmo quando o Elementor é desabilitado ou desinstalado. Como resultado, mudar para um novo tema ou estrutura não resolve o problema – esses estilos permanecem incorporados nas páginas, continuando a causar problemas.

Com todos esses desafios em mente, ficou claro que precisávamos de uma solução mais robusta. Tomamos a decisão de construir um site novo e independente sem Elementor, optando por uma abordagem mais sustentável e flexível.

3) Como criar uma página no novo site

Construir o novo site do zero nos deu a oportunidade de estabelecer um processo limpo e simplificado para criar páginas. No novo sistema, criar uma página é simples:

1. Faça login no painel de administração do WordPress e clique em Páginas -> Adicionar nova página .
2. Você verá o editor padrão do WordPress, onde pode escrever ou colar texto, adicionar links e carregar imagens.

Este processo é simples, mas flexível. Em vez de depender do complicado sistema de blocos do Elementor, o editor de conteúdo do WordPress é muito mais limpo, permitindo atualizações rápidas e fácil personalização. Abaixo do editor, há configurações para Advanced Custom Fields (ACF), que já estão configuradas para manter a consistência em todo o site.

O ACF nos permite criar seções de conteúdo flexíveis, com blocos como Conteúdo 1…Conteúdo 15 , onde você pode facilmente definir o título, texto, imagem e rótulos de botão para cada seção da página. Esses blocos alternam automaticamente o posicionamento de imagens e texto, garantindo que o layout permaneça visualmente envolvente sem exigir ajustes manuais.

Para imagens, implementamos um sistema de correspondência de cores que aplica automaticamente um gradiente nas cores principais do site. Isso garante que todas as imagens se alinhem com a estética geral. Para logotipos ou capturas de tela em que as cores precisam permanecer intactas, há uma opção “manter cores” que substitui o gradiente.

Este sistema simplifica o gerenciamento de conteúdo enquanto mantém a consistência do design em todas as páginas.

4) Como criar uma nova postagem

A criação de postagens no novo site segue o mesmo processo simplificado da criação de páginas, com algumas diferenças importantes:

• As postagens têm URLs que incluem ../blog/.. , distinguindo-as das páginas.
• Na barra lateral direita, um bloco exibe automaticamente os três artigos mais recentes, ajudando a manter o blog dinâmico e envolvente.

O modelo para todos os posts está localizado no arquivo template-parts/content/content-single.php , que lida com a estrutura e o layout de cada post do blog. Este modelo consistente permite atualizações fáceis e garante que todos os posts sigam as mesmas diretrizes de design.

5) Campos personalizados avançados (ACF)

O ACF tem sido uma parte essencial do desenvolvimento do nosso novo site. Ele nos permite criar campos personalizados que podem ser facilmente gerenciados pelo painel de administração do WordPress. Campos como content_1 são referenciados no código PHP, permitindo-nos puxar dinamicamente o conteúdo correto para cada página e postagem.

Essa flexibilidade é essencial para garantir que possamos gerenciar e atualizar o site com eficiência, ao mesmo tempo em que oferecemos espaço para personalização quando necessário.

6) Teste A/B

Uma das melhorias mais significativas que fizemos com o novo site foi a implementação do teste A/B. O teste A/B nos permite comparar duas versões do site para ver qual tem melhor desempenho com os usuários. Isso pode incluir testar diferentes cores, formatos de botões, fundos ou até mesmo layouts.

Implementamos essa funcionalidade usando parâmetros GET na URL. Por exemplo, duas campanhas de publicidade idênticas podem ser criadas, mas com URLs diferentes:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Quando os usuários clicam nesses links, o parâmetro é salvo em um cookie. Dependendo do valor do parâmetro, o site mostrará diferentes versões da página, como diferentes cores de botão ou imagens de fundo. Isso nos permite reunir dados valiosos sobre as preferências e comportamentos do usuário.

Todos os eventos são registrados em um .csv arquivo, bem como em um banco de dados MySQL, permitindo-nos analisar os dados e tomar decisões informadas sobre melhorias no site.

7) O arquivo functions.php

8) Lidando com SEO e velocidade do site

Um foco importante durante a reformulação do site foi melhorar o SEO e o desempenho geral do site. O site original, construído usando Elementor, teve problemas com tempos de carregamento lentos e práticas de SEO abaixo do ideal devido ao código inchado e imagens não otimizadas.

Melhorando SEO

Para garantir que nosso novo site fosse otimizado para SEO, implementamos diversas práticas recomendadas desde o início:

• HTML semântico : Estruturamos cuidadosamente o HTML do site com o uso adequado de tags de cabeçalho (
  ,
  , etc.), garantindo que os mecanismos de busca pudessem analisar e entender facilmente a hierarquia de conteúdo. Isso é particularmente importante para classificações de SEO e acessibilidade.
• Meta Tags e Dados Open Graph : Aproveitamos o plugin Yoast SEO para lidar com meta títulos, descrições e dados Open Graph para compartilhamento social. Ao usar o Yoast, garantimos que cada página e publicação tivesse metadados otimizados, o que é crucial para a visibilidade do mecanismo de busca e taxas de cliques de plataformas de mídia social.
• Schema Markup : Usando o arquivo functions.php , adicionamos marcação de esquema personalizada para dados estruturados, melhorando a forma como os mecanismos de busca exibem nossas páginas nos resultados de busca. Por exemplo, incluímos esquema para artigos, estudos de caso e produtos, ajudando os mecanismos de busca a categorizar melhor nosso conteúdo.

função add_schema_markup() {
  eco '
  {
    "@context": "http://schema.org",
    "@type": "Organização",
    "nome": "ConveyThis",
    "url": "https://www.conveythis.com",
"logotipo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/conveythis",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head', 'add_schema_markup' );


Otimização da velocidade do site

O desempenho é um fator crítico não apenas para a experiência do usuário, mas também para as classificações de SEO. Tomamos várias medidas para melhorar a velocidade do site:

• Otimização de imagem : Utilizamos formatos de imagem modernos como WebP , que oferecem melhores taxas de compressão do que formatos tradicionais como PNG e JPEG. Todas as imagens foram servidas no tamanho apropriado com base na resolução da tela do usuário, garantindo tempos de carregamento rápidos, mesmo em dispositivos móveis.
• Lazy Loading : Ao implementar o lazy loading para imagens, garantimos que apenas as imagens visíveis na tela do usuário fossem carregadas inicialmente. Imagens adicionais seriam carregadas conforme o usuário rolasse, reduzindo os tempos de carregamento inicial da página.
• Caching e Minificação : Usamos o WP Rocket para cache, minificação e compactação de arquivos HTML, CSS e JavaScript. O WP Rocket nos ajudou a atingir tempos de carregamento mais rápidos reduzindo o tamanho geral do arquivo e servindo versões estáticas em cache de páginas para visitantes recorrentes.

9) Otimização e limpeza do banco de dados

O site antigo acumulou uma quantidade significativa de dados "lixo" devido ao inchaço e à estrutura ineficiente do banco de dados do Elementor. Para garantir que o novo site funcionasse sem problemas, realizamos uma limpeza e otimização completas do banco de dados.

• Removendo dados antigos do Elementor

Conforme mencionado anteriormente, mesmo após desativar o Elementor, seus estilos e configurações ainda estavam incorporados no banco de dados. Usamos consultas personalizadas para excluir esses dados em excesso e limpar o banco de dados. Além disso, removemos quaisquer arquivos de mídia não utilizados, revisões de postagem e transientes expirados que haviam se acumulado ao longo do tempo.

• Indexação de banco de dados

Também otimizamos o banco de dados adicionando índices às colunas consultadas com frequência, garantindo que as consultas ao banco de dados fossem mais rápidas e eficientes. Por exemplo, adicionando um índice à data_de_postagem coluna acelerou consultas relacionadas a postagens recentes, melhorando o desempenho das páginas do nosso blog.

Conclusão

A decisão de construir um novo site do zero foi motivada pelas limitações e ineficiências do site antigo. Simplesmente mudar o tema não era uma opção viável devido a inconsistências de design, estilos inchados e problemas de desempenho causados pelo Elementor. Ao criar um novo site com desenvolvimento personalizado e Advanced Custom Fields, alcançamos um site mais eficiente, coeso e profissional que aprimora a experiência do usuário ao mesmo tempo em que permite atualizações simplificadas e funcionalidade de teste A/B. Este novo site fornece uma base sólida para crescimento e melhorias futuras.