O Elementor é um poderoso construtor de páginas do WordPress que facilita a criação de layouts de página personalizados usando um editor de arrastar e soltar. Para as lojas WooCommerce, a criação de uma página de categoria de produtos bonita e reactiva pode melhorar bastante a experiência do utilizador e aumentar as oportunidades de vendas. Neste artigo, vamos orientá-lo passo a passo sobre como criar páginas de categoria de produtos responsivas com o Elementor, garantindo que as suas páginas sejam renderizadas perfeitamente em computadores e dispositivos móveis.

Primeiro passo:Instalação e ativação do Elementor e da sua versão Pro

Para começar a criar páginas personalizadas de categorias de produtos WooCommerce, precisa de instalar o Elementor e a sua versão Pro. Embora a versão gratuita do Elementor seja poderosa e exija Versão Propara desbloquear o WooCommerce e as funcionalidades avançadas.

Passo 2: Crie uma nova página e adicione um modelo de categoria de produto

1. Nova páginaNo painel de controlo do WordPress, aceda a Páginas > Adicionar nova página.
2. Atribuir um nome à páginaNome da página, por exemplo, "Classificação dos produtos" ou outro nome apropriado e, em seguida, clique no botão Editar com o Elementor Botão.

3. Selecionar um modelo: Quando estiver no editor Elementor, clique no botão Definições (ícone de engrenagem)Seleção layout da página para "Tela do Elementor" para garantir que a página é construída de raiz.

Passo 3: Adicione o módulo de categoria de produto

1. Adicionar título da categoria: arrastando e largando Título adicione um título de página como "As nossas categorias de produtos". As fontes, os tamanhos e os alinhamentos podem ser alterados no painel esquerdo para se adaptarem ao estilo do seu sítio.

2. Inserir o widget de categoria de produto do WooCommerceO Elementor Pro fornece Classificação dos produtos Widgets. Pesquise "Classificação dos produtos" e arraste-o e solte-o na página. Este widget apresentará dinamicamente todas as categorias de produtos que criou no WooCommerce.

3. Apresentação personalizada da categoria de produtos::
   • No painel esquerdo, pode selecionar as categorias a apresentar e definir a forma como as categorias são ordenadas (porNome, atualização mais recente(etc.).
   • Selecione o número de colunas e linhas a apresentar, certificando-se de que a disposição é adequada tanto para computadores como para dispositivos móveis.
   • Personalize as opções de tamanho das miniaturas, estilo do título da categoria e apresentação do preço.

Passo 4: Configurar o design responsivo

Para se certificar de que as suas páginas de categorias de produtos são apresentadas corretamente em todos os dispositivos, o Elementor oferece poderosas ferramentas de design responsivo.

1. Mudar para o modo reativoNa parte inferior do editor Elementor, selecione o botão Ambiente de trabalho, tablet, telemóvel para pré-visualização e personalização.

2. Ajustar as definições de estilo::
   • No modo de dispositivo móvel, certifique-se de que as suas categorias são apresentadas numa ou duas colunas, em vez de três ou quatro no ambiente de trabalho.
   • Redimensione os títulos, o texto e as imagens para garantir que os utilizadores possam ler e navegar facilmente nas categorias de produtos.
3. Oculte elementos desnecessáriosSe quiser, pode ocultar widgets ou elementos específicos e apresentá-los apenas no computador ou em dispositivos móveis. Opcionalmente, pode ocultar widgets ou elementos específicos e apresentá-los apenas no computador ou em dispositivos móveis.

Passo 5: Adicione filtros personalizados e funções de pesquisa

Para melhorar ainda mais a experiência do utilizador, adicione filtros de produtos personalizados e funcionalidades de pesquisa às suas páginas de categorias de produtos.

1. fazer uso de Filtro de produtos do WooCommerce por WBW plug-in (componente de software)Instale e active o plugin WooCommerce Product Filter e, em seguida, utilize o Elementor para definir o termo de pesquisa talvez (máquina) filtro Os widgets são arrastados para as páginas de categorias de produtos para ajudar os utilizadores a encontrar mais rapidamente os produtos de que necessitam.

2. Configurar filtros personalizadosOpções de filtro personalizadas através do plugin permitem aos utilizadores filtrar produtos por preço, marca, cor, etc. A aparência destes filtros também pode ser personalizada para se alinhar com o design da página.

Passo seis:Adicionar termos de chamada (CTA)e outras melhorias

Na parte inferior da sua página de categoria de produtos, adicione um Termo de chamada (CTA) Widgets como "Comprar agora"ou"Ver mais produtos" que podem levar os utilizadores a navegar ou a comprar mais.

1. Arraste e largue widgets de botões: Will Widget de botão Arraste-o para o fundo da página e defina o seu texto como uma frase de ação poderosa, como "Explore a nossa gama completa de produtos".
2. Adicione um banner promocional: Utilização moldura de imagem talvez Imagens em linha Widgets que adicionam um banner promocional apelativo que leva os utilizadores a clicar para ver o produto com desconto.

Passo 7: Pré-visualize e publique a página

Depois de concluir o design da página e a otimização da capacidade de resposta, clique no botão antevisões certifique-se de que a página está noEm computador, tablet e telemóvelTudo é apresentado corretamente. Se todas as definições e desenhos estiverem como esperado, pode clicar no botão posto para o colocar em linha.

resumos

Criar páginas de categorias de produtos responsivas para o WooCommerce com o Elementor é simples e poderoso. Com a edição flexível de arrastar e largar, layouts de categorias de produtos personalizados e opções de design responsivo, pode garantir que as suas páginas têm uma excelente experiência de utilizador em todos os dispositivos. Não se esqueça de melhorar ainda mais a experiência de interação do utilizador com botões e filtros de CTA, o que acaba por aumentar as conversões do sítio Web.