Personalizando seu site Woocommerce com Elementor

23 de maio de 2024

Passo a Passo de Personalização com Elementor

1. Configuração Básica do Elementor

• Acesse o painel do WordPress e vá para Elementor > Configurações.
• Certifique-se de que as postagens e páginas do WooCommerce estejam habilitadas para edição com o Elementor.

2. Criando Páginas Personalizadas

Página Inicial

• Vá para Páginas > Adicionar Nova.
• Nomeie sua página (ex: “Home”) e clique em Editar com Elementor.
• Use os widgets do Elementor para adicionar seções como:
  • Banner (Imagem ou slider)
  • Destaques de Produtos (widget “Produtos” do WooCommerce)
  • Categorias (widget “Categorias de Produtos”)
  • Testemunhos de Clientes
  • Blog/Notícias (caso tenha um blog)

Página do Produto Único

• Vá para Modelos > Theme Builder > Produto Único > Adicionar Novo.
• Selecione “Produto Único” como tipo de template e clique em Criar Modelo.
• Adicione e personalize os widgets do WooCommerce, como:
  • Título do Produto
  • Imagem do Produto
  • Preço do Produto
  • Descrição do Produto
  • Adicionar ao Carrinho
  • Reviews de Produtos
• Estilize os widgets conforme desejado.
• Clique em Publicar e defina as condições para aplicar este template a todos os produtos ou categorias específicas.

Página de Arquivo de Produtos

• Vá para Modelos > Theme Builder > Arquivo de Produto > Adicionar Novo.
• Selecione “Arquivo de Produto” como tipo de template e clique em Criar Modelo.
• Adicione e personalize widgets como:
  • Título de Arquivo
  • Produtos (para listar produtos)
  • Barra de Pesquisa de Produtos
  • Filtros de Produtos (por categoria, preço, etc.)
• Estilize os widgets conforme desejado.
• Clique em Publicar e defina as condições para aplicar este template a páginas de arquivo ou categorias específicas.

3. Customizando o Cabeçalho e Rodapé

• Vá para Modelos > Theme Builder > Cabeçalho/Rodapé > Adicionar Novo.
• Selecione “Cabeçalho” ou “Rodapé” e clique em Criar Modelo.
• Use widgets do Elementor para adicionar elementos como:
  • Logotipo
  • Menu de Navegação
  • Ícone de Carrinho
  • Busca
  • Links para Redes Sociais
• Estilize conforme desejado e clique em Publicar.
• Defina as condições para aplicar estes templates em todas as páginas ou páginas específicas.

4. Configuração Avançada

Utilizando Global Settings

• Vá para Elementor > Configurações Globais.
• Defina tipografias, cores e estilos padrão para garantir consistência visual em toda a loja.

Criando Seções Reutilizáveis

• Crie blocos e seções que podem ser reutilizados em diferentes páginas.
• Vá para Modelos > Blocos > Adicionar Novo.
• Construa e estilize a seção desejada e clique em Salvar.
• Utilize essa seção em várias páginas arrastando o bloco salvo para a página desejada.

5. Teste e Ajustes Finais

• Visualize e teste sua loja em diferentes dispositivos para garantir responsividade.
• Ajuste elementos e estilos conforme necessário para otimização visual e funcional.

Editando Configurações Globais de seu Site WooCommerce com Elementor

Para garantir a consistência visual em todas as páginas da sua loja WooCommerce, você pode utilizar as Configurações Globais do Elementor. Essas configurações permitem definir tipografias, cores e estilos padrão que se aplicam a todo o site.

Passo a Passo para Editar Configurações Globais com Elementor

1. Acessando Configurações Globais

• No painel do WordPress, vá para Elementor > Ferramentas > Configurações do Site.
• Você será redirecionado para a página de configurações globais do Elementor.

2. Definindo Cores Globais

• Clique em Cores Globais.
• Aqui você pode definir a paleta de cores padrão para seu site. Adicione ou edite as cores para elementos como:
  • Primária: Usada para botões e links principais.
  • Secundária: Usada para elementos secundários.
  • Texto: Cor do texto principal.
  • Cabeçalho: Cor dos cabeçalhos e títulos.
• Clique em Atualizar para salvar as alterações.

3. Configurando Tipografia Global

• Clique em Tipografia Global.
• Defina as fontes padrão para diferentes elementos como:
  • Texto Principal: Fonte e estilo para o corpo do texto.
  • Cabeçalho 1 (H1): Fonte e estilo para os títulos H1.
  • Cabeçalho 2 (H2): Fonte e estilo para os títulos H2.
  • Cabeçalho 3 (H3): Fonte e estilo para os títulos H3, e assim por diante.
• Você pode personalizar a fonte, o tamanho, a altura da linha e o peso da fonte para cada tipo de texto.
• Clique em Atualizar para salvar as alterações.

4. Definindo Estilos Globais para Botões

• Clique em Botões.
• Configure os estilos padrão para botões em todo o site, incluindo:
  • Cor do Texto: Cor do texto dos botões.
  • Cor de Fundo: Cor de fundo dos botões.
  • Borda: Estilo, largura e cor da borda dos botões.
  • Espaçamento Interno (Padding): Espaçamento dentro dos botões para garantir uma aparência consistente.
• Clique em Atualizar para salvar as alterações.

5. Ajustando Outros Elementos Globais

• Imagens: Defina estilos padrão para bordas e sombras de imagens.
• Formulários: Personalize a aparência dos formulários, incluindo campos de entrada, texto do botão de envio, etc.
• Certifique-se de clicar em Atualizar após fazer qualquer alteração.

6. Aplicando Configurações Globais a Páginas e Templates

• As configurações globais se aplicam automaticamente a todas as páginas e templates que utilizam os estilos padrão.
• Se necessário, você pode substituir as configurações globais em elementos específicos usando o painel de estilo do Elementor enquanto edita a página.

7. Testando e Ajustando

• Visualize seu site para verificar como as configurações globais estão sendo aplicadas.
• Faça ajustes conforme necessário para garantir que todas as páginas e elementos estejam consistentes e visualmente agradáveis.

Dicas Adicionais

• Pré-visualização Responsiva: Use a ferramenta de pré-visualização do Elementor para garantir que as configurações globais fiquem boas em dispositivos móveis e tablets.
• Utilize Temas Compatíveis com Elementor: Alguns temas oferecem configurações adicionais que complementam as configurações globais do Elementor, proporcionando maior controle sobre a aparência do seu site.