Astra WordPress: Guia Completo do Tema, Modelos Iniciais, Construtores e Desempenho

Tema Astra WordPress
Tema Astra WordPress

A menos que você tenha vivido em uma caverna, você conhece os modelos iniciais do tema Astra. Na minha humilde opinião, o Astra é ideal para dois tipos de público.

Se você é novo na criação de sites, os Modelos Iniciais deles têm designs excelentes, são fáceis de editar com o construtor de páginas Elementor (arrastar e soltar), e ainda assim são otimizados para velocidade com o código limpo e o design minimalista do Astra (onde você depende de plugins para adicionar funcionalidades). Parece que existem milhões de vídeos no YouTube mostrando “como criar um site de curso online” (por exemplo) com exatamente o mesmo processo: registrar um domínio/hospedagem, instalar o WordPress com o plugin Astra Starter Templates e importar um site de negócios, curso ou qualquer outro tipo. Começando do zero, você pode facilmente ter um site pré-desenhado instalado em cerca de 10 minutos.

Depois, existem as agências de design web que usam o Astra para produzir sites como vacinas no Natal. Existe um modelo para praticamente todos os setores, que pode ser importado no Elementor, Gutenberg e outros construtores/editores. Essa flexibilidade permite que você crie um site para praticamente qualquer cliente – seja para quem quer algo fácil de usar com Elementor ou mais rápido com Gutenberg.

Então, para quem o Astra não é indicado? Por mais que valha, eu redesenhei meu blog com o GeneratePress. O principal motivo foi evitar o CSS/JS extra do Elementor, que pode prejudicar os Core Web Vitals. Você realmente precisa usar Astra + Gutenberg para obter as velocidades mais rápidas. Mas o Gutenberg é um editor de blocos (não arrastar e soltar como o Elementor) e muitas pessoas preferem o GeneratePress/Kadence por esse motivo.

Outra coisa a considerar são os plugins de modelos: Ultimate Add-ons para Elementor e Gutenberg, GenerateBlocks (que eu uso com GeneratePress), Gutenberg Blocks da Kadence, etc. Eles oferecem mais modelos para você projetar seções/blocos individuais e aceleram o processo de design.

Vou tentar abordar os pontos principais nesta avaliação do Astra, mas avaliações têm seus limites. Para realmente saber qual você vai gostar, o ideal é instalar (em um novo site ou em um ambiente de teste) e explorar.

1. Sites Iniciais do Astra

Aqui está um resumo de 90% dos tutoriais do YouTube sobre “como criar um site”. Se você já tem um site, é melhor configurar um ambiente de testes para depois publicar no site ao vivo. Pule para o passo #3 nesse caso.

Passo 1: Obter Domínio + Hospedagem

Todo mundo tem sua própria opinião e é afiliado de alguém, inclusive eu. Minha sugestão é o NameHero (bom para sites pequenos, painel cPanel fácil de usar, barato e rápido com LiteSpeed). Você também pode usar Cloudways com o Vultr High Frequency. Ou, se estiver disposto a pagar mais pelo melhor, vá com o Rocket.net. Alguns hosts oferecem domínio gratuito no primeiro ano, caso contrário o NameCheap é uma boa opção.

Passo 2: Instalar o WordPress

As instruções variam de acordo com o host, mas todos terão a opção de instalar o WordPress no seu domínio. Por exemplo, no NameHero, você faria login no cPanel, encontraria o WordPress Manager do Softaculous e o usaria para instalar o WordPress. No processo, você pode escolher HTTPS (instala automaticamente o SSL) e definir suas informações de login do WP. Instale o WordPress e acesse seu site.

Passo 3: Instalar o Plugin Astra Starter Templates

Vá em Plugins → Adicionar novo e procure por “Astra”. Instale e ative o plugin Starter Templates. Agora vá para Aparência → Starter Templates. Você será guiado por algumas etapas para configurar seu site, onde poderá escolher construtores de página, fontes, cores e até fazer upload de um logotipo.

Passo 4: Escolher Seu Construtor de Páginas

Coisas a considerar ao escolher um construtor de páginas:

  • Alguns modelos são construídos apenas em construtores específicos.
  • Alguns carregam mais rápido do que outros (o Editor de Blocos é o mais rápido).
  • Elementor + Beaver Builder são construtores drag and drop, não editores de blocos.
  • Plugins de add-ons (Gutenberg é gratuito, Elementor é pago, Beaver é freemium).

Veja a seção #2 para uma comparação detalhada incluindo um teste de velocidade que realizei com cada construtor.

Passo 5: Escolher Entre Mais de 300 Modelos

O Astra tem mais de 300 modelos iniciais para praticamente todo tipo de negócio, mas 180+ desses (e alguns dos mais bonitos na minha opinião) exigem o Astra Pro, que geralmente custa cerca de US$ 500 na licença vitalícia. Existem filtros para diferentes tipos de negócios, gratuito vs. pro, blogs e eCommerce. Pode ser difícil escolher um único tema, mas saiba que é fácil trocar o conteúdo usando widgets, blocos e módulos pré-desenhados, especialmente com a ajuda dos plugins Ultimate Add-ons.

Passo 6: Fazer Upload do Logotipo e Escolher Cores + Fontes

O Astra permite que você envie seu logotipo e altere fontes/cores antes mesmo de importar o site. Tenho a sensação de que o Astra (e a maioria dos temas WordPress) começarão a usar assistentes de configuração com mais frequência.

Passo 7: Importar o Modelo Inicial

Certifique-se de que as opções corretas estejam selecionadas (eu sempre escolho não compartilhar meus dados, mas isso é com você). Se você já instalou um modelo e quer mudá-lo, verá a opção “excluir site importado anteriormente”, que substitui o modelo antigo pelo novo. Caso contrário, importe o site e o Astra importará tudo o que for necessário para usar aquele modelo.

Passo 8: Visite Seu Site

Seu site agora estará exatamente como o modelo inicial. Eu gosto de explorar as configurações do Astra, o personalizador de temas e as configurações do construtor de páginas antes de começar a adicionar ou importar conteúdo.

2. Editor de Blocos vs. Elementor vs. Beaver Builder (Com Teste de Velocidade)

Velocidade e curva de aprendizado são os maiores motivos para usar um construtor de página em vez de outro.

Teste de Velocidade – Instalei o mesmo modelo inicial do Astra (Outdoor Adventure) em uma instalação nova do WordPress usando cada construtor de páginas oferecido pelo Astra. Em seguida, usei o GTmetrix Waterfall para testar quanto CSS/JS/fontes eles adicionaram ao site. Não medi os Core Web Vitals e tempo de carregamento total porque esses testes variam muito (não é preciso fazer testes com pontuações, TTFB, LCP, etc). Vale ressaltar que os Experimentos do Elementor e otimizações de fontes (hospedando fontes localmente + pré-carregamento) estavam desativados. Quando ativados, o tamanho total foi menor que o do Beaver Builder, mas novamente, você poderia usar o OMGF e fazer o mesmo argumento para qualquer um desses. Nenhum plugin de cache, cache de servidor ou CDN foi usado, e todos foram testados no mesmo servidor/localização.

Editor de Blocos

A opção mais rápida com o mínimo de CSS/JS/fontes em comparação com Elementor e Beaver Builder, o que significa melhores Core Web Vitals. Mas se você nunca usou o editor de blocos do Gutenberg, leva um tempo para se acostumar. Eu me apeguei ao editor clássico por muito tempo até finalmente mudar para o Gutenberg. Ele não tem muitos layouts pré-desenhados, então você vai querer usar o Ultimate Add-ons para Gutenberg ou outro plugin que estenda as opções de design – isso facilita muito.

Elementor

Construtor drag and drop conhecido por sua facilidade de uso. Mas tome cuidado – há muitos plugins gratuitos/pagos para o Elementor que parecem tentadores (incluindo o Elementor Pro), mas geralmente vão deixar seu site mais lento. Muitas pessoas acabam adicionando esses plugins para obter mais modelos e opções de design, e depois se perguntam por que não passam nos Core Web Vitals.

Beaver Builder

Sinceramente, não tenho muita experiência com o Beaver Builder, mas sei que ele não é tão popular quanto os outros dois (provavelmente por isso é a última opção de construtor no Astra). Você pode testá-lo com o Ultimate Add-ons para Beaver Builder se quiser, mas eu recomendaria o Editor de Blocos ou Elementor.

3. Plugins Ultimate Add-ons

Cada construtor de página tem um plugin Ultimate Add-ons que oferece mais blocos para Gutenberg, widgets para Elementor ou módulos para Beaver Builder. O Astra e os construtores de página não incluem isso nativamente para evitar se tornarem muito pesados, então você vai precisar de plugins para adicionar funcionalidades. Os plugins Ultimate Add-ons são alguns dos únicos que eu consideraria quase obrigatórios.

Geralmente são voltados para:

  • Design
  • Formulários
  • SEO & Schema
  • Social
  • WooCommerce

O Astra Pro (pacotes Essential e Growth) inclui os Ultimate Add-ons para Elementor + Beaver, então você só precisa comprá-los se estiver usando a versão gratuita do Astra ou o plano iniciante “Astra Pro”.

4. Personalizador de Tema

Independente do construtor de página que você use com o Astra, você vai depender do personalizador de temas do WordPress para projetar várias áreas do site (localizado em Aparência → Personalizar). Todas as Opções do Astra são basicamente links para diferentes configurações dentro do personalizador. Existem muitos tutoriais no YouTube sobre isso, mas se você já trabalhou com WordPress, já conhece.

5. Plugins Astra para Estender o Design

Você pode encontrar essa lista nas Opções do Astra, mas é provavelmente mais fácil ver aqui com os links. Talvez você queira Fontes Personalizadas, fora isso, provavelmente não vai precisar da maioria desses plugins.

  • Importar / Exportar Configurações do Personalizador
  • Reset do Personalizador Astra
  • Pesquisa no Personalizador
  • Edição em Massa do Astra
  • Widgets do Astra
  • Fontes Personalizadas
  • Fontes Personalizadas do Typekit
  • Gerenciador de Barra Lateral

6. Otimizações de Velocidade no Elementor

Se você usa o Elementor, há algumas coisas que pode fazer desde o início para acelerar seu site.

Ativar Experimentos do Elementor

Vá em Configurações do Elementor → Experimentos e ative o seguinte: carregamento de ativos/CSS aprimorado, ícones de fonte inline, saída DOM otimizada.

Otimizar Fontes

As fontes são um dos grandes motivos do Elementor ser lento, mas há como otimizá-las. Primeiro, vá no personalizador de temas do WordPress → Desempenho. Selecione carregar fontes do Google localmente e pré-carregar fontes. Depois, limpe os arquivos de fonte locais. Se você atualizar seu site e verificar o GTmetrix Waterfall, verá que as fontes estão sendo servidas do seu domínio em vez de fonts.gstatic.com, o que reduz o tempo de carregamento.

Agora vá em Elementor → Avançado e escolha um método para carregar fontes. “Swap” adiciona font-display: swap ao CSS da fonte, o que garante que o texto permaneça visível enquanto a fonte web está carregando no PageSpeed Insights, usando uma fonte alternativa enquanto a principal é carregada. Isso evita o FOIT (flash de texto invisível), quando os visitantes não veem o texto porque a fonte ainda está carregando.

Em uma instalação limpa com um modelo inicial do Astra, isso reduz o tamanho do arquivo CSS, mas o maior impacto está nas fontes, já que agora estão hospedadas localmente (não em fonts.gstatic.com) e são pré-carregadas.

7. Astra Gratuito vs. Pro

Eu comprei o plano vitalício do pacote Essential porque:

  • Você tem acesso aos modelos premium
  • O plugin WP Portfolio é muito bom
  • Você recebe os Ultimate Add-ons para Elementor ou Beaver

Eu não pagaria pelo Growth Bundle. Usei o Schema Pro e, embora seja bom, o Rank Math Pro deve ter tudo o que você precisa para schema (acabei excluindo o Schema Pro e usando apenas o Rank Math). Nunca usei o Convert Pro porque odeio popups, então nunca faria isso com meus visitantes, mesmo que funcione para coletar e-mails ou usar chamadas para ação. Claro, desde que mudei para o GeneratePress, nem uso mais o Astra – apenas para testes. Se você usar o tema gratuito do Astra com os Ultimate Add-ons para Gutenberg, tudo é gratuito – e rápido!

8. Contras de Usar o Astra

Gosto de transparência, e nem tudo são flores com o Astra:

  • Existem muitos relatos negativos sobre o suporte e cobrança do Astra.
  • WP Johnny diz que a maioria dos plugins deles (incluindo Ultimate Add-ons) são pesados.
  • Ele afirma que têm muitos autoloads + consultas ao banco de dados, o que aumenta o uso de CPU.
  • Assim como o SiteGround, eles também removem posts no grupo do Facebook que falam mal deles.
  • Você provavelmente se lembra que o Astra foi removido do repositório do WordPress por violar os termos.