Dominar o Editor de Temas: Um Guia Completo

A sua montra é a montra de tudo o que vende e, na Dirora, molda-a com o editor de temas visual — um espaço de trabalho de arrastar e largar onde constrói páginas, define as cores e fontes da sua marca e vê cada alteração surgir instantaneamente numa pré-visualização ao vivo. Não há código para escrever nem nada para partir: dispõe as peças, e o motor de layout trata da marcação responsiva e de desempenho por baixo. Este guia percorre todo o editor, do primeiro clique a um design pronto para lançamento.

Se ainda está a decidir se consegue construir uma loja sem programador, a resposta curta é sim — e o nosso artigo sobre se precisa de programar para iniciar uma loja online apresenta o argumento completo. O editor de temas é onde essa promessa se torna real.

O que o editor de temas realmente é

Pense no editor como duas coisas a trabalhar em conjunto. Por cima está uma tela WYSIWYG — o que vê é mesmo o que os seus clientes vão obter. Por baixo está o motor de layout, que pega nas secções e widgets que coloca na página e os renderiza como HTML limpo, renderizado no servidor, que carrega depressa e lê corretamente em todos os dispositivos. Nunca toca nessa camada diretamente; trabalha inteiramente através de controlos visuais, e o motor mantém o resultado arrumado.

Tudo o que monta é guardado no seu tema, pelo que o seu design, as suas cores, as suas fontes e os seus layouts de página viajam em conjunto. Isso importa quando quer duplicar um tema para experimentar, ou voltar a um design mais tarde sem perder o seu trabalho.

Orientar-se na interface

Quando abre o editor, está a olhar para três zonas:

• O painel da esquerda é a sua superfície de controlo — é aqui que adiciona e reordena widgets, abre as definições de um widget e alterna entre as partes da sua loja que está a editar. O editor trabalha em modos: Cabeçalho, Páginas e Rodapé para a estrutura, além dos modos dedicados Tipografia, Recursos e CSS para estilo global, agregação de imagens e código avançado. A maior parte do seu tempo é passada nos modos visuais; os últimos três estão lá quando quiser um controlo mais profundo.

• A tela central é uma pré-visualização ao vivo da sua montra. Clique em qualquer elemento para o selecionar; altere uma definição e a pré-visualização atualiza-se em tempo real, para que nunca esteja a adivinhar o que um ajuste vai fazer.

• A barra de ferramentas superior guarda as suas ferramentas globais: o seletor de dispositivo para pré-visualização responsiva, anular e refazer, e os controlos de guardar e publicar.

Como a pré-visualização é genuinamente ao vivo, a forma mais rápida de aprender o editor é alterar algo pequeno e ver o que acontece. Nada do que faz num rascunho é público até escolher publicá-lo, por isso é seguro explorar.

Construir páginas com widgets

Cada página é montada a partir de widgets — blocos autónomos que arrasta para a tela e depois empilha e reordena para compor uma página. A Dirora inclui 41 widgets de montra que cobrem os elementos de que uma loja real precisa, pelo que na maioria dos casos está a escolher e a dispor em vez de construir de raiz. Os que mais vai usar incluem:

• Banner hero — uma área de título em largura total com uma imagem de fundo, texto de apoio e um botão de chamada à ação. É normalmente a primeira coisa que um visitante vê, por isso merece a maior atenção.

• Produtos em destaque e grelhas de produtos — puxe artigos diretamente do seu catálogo para uma grelha arrumada, escolhendo quantos produtos e colunas mostrar. Combine isto com imagens fortes das nossas dicas de fotografia de produto e vende muito por si só.

• Listas de coleções — mostre as suas categorias visualmente, para que os compradores se orientem sozinhos até ao que querem.

• Texto com imagem — um bloco lado a lado para contar a história da marca, com a imagem à esquerda ou à direita.

• Testemunhos e avaliações — prova social disposta em colunas para gerar confiança no momento da decisão.

• Subscrição de newsletter — capte endereços de email para construir um público que possui em vez de alugar.

• Texto rico, galerias de imagens, temporizadores de contagem decrescente e selos de confiança — o elenco de apoio para lançamentos, promoções e tranquilidade.

• HTML Personalizado — um widget dedicado para colocar a sua própria marcação quando precisa de algo que os widgets padrão não cobrem, como uma ferramenta de terceiros incorporada ou uma integração à medida. Situa-se ao lado dos widgets visuais, por isso só recorre a ele quando realmente precisa.

Para adicionar um, arraste-o do painel da esquerda para onde o quer na página; para o mover, arraste-o para cima ou para baixo; para o configurar, clique nele e ajuste as suas definições. Todos os widgets são responsivos de origem, pelo que uma grelha que mostra quatro colunas no computador colapsa graciosamente para uma no telemóvel, sem trabalho extra da sua parte.

A escolha de widgets é design, mas também é conversão. Se quer construir páginas que realmente vendam, os nossos guias sobre páginas de produto com alta conversão e desenhar confiança no seu checkout combinam bem com esta secção.

Definir as suas cores e fontes

Uma paleta e um tipo de letra consistentes são o que separa uma montra que parece feita à medida de uma que parece um modelo. O editor dá-lhe controlos dedicados para ambos:

• Cores — defina as cores da sua marca uma vez e aplique-as em fundos, texto, botões e acentos. Como as alterações são globais, um único ajuste propaga-se por toda a loja de forma consistente, em vez de o deixar a caçar tons desirmanados página a página.

• Fontes — escolha os tipos de letra para os seus títulos e corpo de texto e defina os seus tamanhos e pesos, para que a sua loja leia com clareza e de acordo com a marca.

As escolhas de cor pesam mais do que a maioria das pessoas espera — moldam quão fiável, premium ou acessível uma loja parece antes de se ler uma única palavra. Se não sabe por onde começar, o nosso artigo sobre a psicologia da cor no comércio eletrónico é uma boa introdução. Como regra prática: escolha uma ou duas cores de marca, um neutro para os fundos e um único acento para os botões, e depois resista à tentação de acrescentar mais.

Tipografia avançada e fontes personalizadas

As fontes fazem um trabalho silencioso e constante: definem o tom de toda a sua loja, e uma tipografia consistente é um dos sinais mais claros de uma marca profissional. O modo dedicado Tipografia vai muito além de uma única escolha de título e corpo, permitindo-lhe definir a família de fontes, o tamanho e o peso independentemente para cada papel de texto na sua loja:

• Corpo de texto — a base que os seus clientes mais leem, pelo que a legibilidade importa mais aqui.

• Títulos, de H1 a H6 — controle cada nível separadamente para construir uma hierarquia visual clara ao longo da página.

• Texto dos botões — afine o tipo de letra nas suas chamadas à ação para que leiam como intencionais e clicáveis.

• Texto de navegação — mantenha os seus menus nítidos e de acordo com a marca em todas as páginas.

Pode combinar estes papéis livremente — um tipo de exibição com carácter para os títulos contra uma fonte de corpo limpa e legível, por exemplo. Há mais de 50 Google Fonts curadas por onde escolher, pelo que não está limitado às predefinições do sistema e pode encontrar algo que encaixe genuinamente na sua marca. As suas definições de tipografia são aplicadas de forma a sobreporem-se com fiabilidade às predefinições ao nível dos componentes, o que significa que as escolhas que faz aqui se mantêm consistentes por toda a montra em vez de serem discretamente substituídas pelo estilo próprio de um widget.

Recursos do tema: agregar as suas imagens ao tema

Algumas imagens pertencem ao design e não a um produto em particular — uma textura de fundo, um padrão de marca, um gráfico de marcador de posição. O modo Recursos é onde essas vivem. Carrega imagens aqui e elas são agregadas ao próprio tema, sendo depois referenciadas a partir das definições dos seus widgets através de uma referência de recurso em vez de um URL avulso.

A vantagem é a portabilidade: como as imagens viajam com o tema, pode duplicar um tema para experimentar, ou mover um design entre ambientes, sem que as suas imagens partam ou desapareçam. É exatamente por isso que os recursos importam se alguma vez quiser partilhar ou reutilizar um tema — o design chega completo, com as ilustrações incluídas, em vez de apontar para ficheiros que se extraviaram. Para fotografia de produto e de estilo de vida que reside no seu catálogo em vez de no seu tema, o gestor de multimédia é o melhor lar; a orientação nas nossas dicas de fotografia de produto aplica-se a ambos.

CSS personalizado: controlo fino para quem o quiser

O editor visual cobre a grande maioria do que uma montra precisa, mas por vezes quer ajustar um pormenor específico que nenhuma definição expõe. É para isso que serve o modo CSS — um editor de código completo e opcional para quem se sinta à vontade a escrever umas linhas de CSS, discretamente fora do caminho de quem não se sente.

Aponta a elementos usando os seletores integrados da montra — por exemplo .dirora-store para o invólucro geral, .dirora-header e .dirora-footer para essas regiões, seletores por tipo de secção como .section-hero, ou uma secção individual pelo seu próprio id. O seu CSS personalizado é carregado depois de todos os outros estilos, pelo que tem prioridade e vence com fiabilidade quando é preciso. O editor inclui comodidades como um botão de formatação para arrumar o seu código e um modo de ecrã inteiro para edições mais longas. É totalmente opcional — nunca precisa de o abrir para construir uma loja profissional — mas está lá no momento em que quiser esse último grau de controlo.

Pré-visualização ao vivo e design responsivo

Mais de metade do tráfego de comércio eletrónico é em telemóvel, pelo que um design que só fica bem num portátil é um design que está a perder vendas. O editor da Dirora permite-lhe pré-visualizar a sua loja em computador, tablet e telemóvel usando o seletor de dispositivo na barra de ferramentas superior. Todos os widgets se adaptam automaticamente, mas a pré-visualização permite-lhe verificar os pormenores — como um título hero se quebra num ecrã estreito, se o espaçamento parece apertado, como uma grelha de produtos se reorganiza.

Habitue-se a alternar para telemóvel antes de publicar seja o que for. Um layout que parece equilibrado num monitor largo pode parecer vazio ou desajeitado num telemóvel, e a pré-visualização é a forma mais rápida de o detetar. A velocidade importa tanto quanto o layout; o nosso guia de otimização de desempenho da loja explica como as imagens e o peso da página afetam os tempos de carregamento.

Trabalhar em segurança: rascunhos, anular e refazer

Uma das vantagens silenciosas do editor é que experimentar não acarreta risco. As suas alterações vivem num rascunho até as publicar ativamente, pelo que a sua montra ao vivo nunca muda debaixo dos pés dos seus clientes enquanto está a meio de uma remodelação. Quando estiver satisfeito, publica; até lá, os compradores veem a última versão que aprovou.

Dentro de uma sessão dispõe também de um histórico completo de anular e refazer. Arrastou um widget para o sítio errado, hesitou numa cor, apagou uma secção por engano — recue com anular, ou avance de novo com refazer. Entre os rascunhos e o histórico de anular, não existe erro irrecuperável, que é exatamente a confiança que quer quando está a aprender a ferramenta.

Personalizar o seu cabeçalho e rodapé

O seu cabeçalho e rodapé aparecem em todas as páginas, por isso fazem muito trabalho de navegação e de construção de confiança. No editor, edita-os da mesma forma que edita as páginas — adicionando e dispondo blocos. Um cabeçalho típico leva o seu logótipo, a navegação principal, um ponto de entrada de pesquisa e o carrinho; um rodapé costuma ter colunas de links, uma subscrição de newsletter, links sociais, ícones de pagamento e os seus dados legais e de contacto. Reserve tempo para acertar nestes cedo, porque enquadram todas as outras páginas onde um visitante aterra.

Um fluxo de trabalho simples para o seu primeiro design

Se está a olhar para uma tela em branco, esta ordem mantém tudo controlável:

1. Defina primeiro o básico da marca. Escolha as suas cores e fontes antes de construir páginas, para que tudo o que adiciona herde o aspeto certo desde o início.

2. Trate do cabeçalho e do rodapé. Coloque a navegação e os elementos de confiança no sítio para que o enquadramento fique estável.

3. Construa a página inicial de cima para baixo. Comece com um hero, adicione um bloco de produtos em destaque ou de coleção, depois acrescente prova social e uma subscrição de newsletter.

4. Verifique o telemóvel à medida que avança. Alterne a pré-visualização de dispositivo após cada secção importante, em vez de apenas no final.

5. Publique quando estiver coerente. Pode sempre voltar — o editor recompensa a iteração.

Totalmente novo na plataforma? O nosso guia de introdução percorre a configuração da conta e a adição de produtos, o que combina naturalmente com o design da montra aqui.

Quanto custa construir desta forma

O editor de temas e o motor de layout fazem parte da plataforma em todos os planos, incluindo o nível gratuito Starter — não há um «acréscimo de design» separado nem qualquer cobrança por usar o editor. E, tão importante quanto isso, a Dirora não cobra taxas de transação em qualquer plano; o único corte é uma pequena taxa de plataforma que diminui à medida que cresce, de 1,5 % no Starter para 0,75 % no Pro, 0,25 % no Business e 0% no Enterprise. Pode ver o detalhe completo na página de preços e, se está a ponderar as suas opções, a nossa página de comparação mostra como isso se compara com outras plataformas. Quando estiver pronto para ir ao ar no seu próprio endereço, o guia de domínios personalizados cobre a ligação de um domínio com SSL automático.