Quando você deseja empurrar um produto, um único cartão atraente bate uma grade de loja completa O Widget de produto em destaque em Complementos mestres Pro constrói esse cartão: uma imagem, um título, um preço com um preço original opcional, uma classificação, uma fita de canto e um botão de call-to-action, tudo definido no painel Elementor.
Você digita os detalhes em si mesmo, para que funcione em qualquer página com ou sem WooCommerce Isso torna útil para um bloco promocional, uma escolha de afiliado, um anúncio de lançamento ou um acordo que você deseja na frente e no centro Este guia cobre todas as configurações, desde os três designs de layout até os controles de fita e classificação.
Prefere assistir primeiro? este pequeno tutorial percorre o widget Produto em Destaque de ponta a ponta:
O que o widget Produto em destaque faz #
O widget gera um cartão de produto independente Você dá a ele uma imagem, um nome, uma descrição ou lista de recursos, um preço e um botão, e ele os expõe em um dos três designs prontos. Uma fita e uma classificação por estrelas ficam no topo para chamar a atenção.
Nada aqui puxa do seu catálogo WooCommerce Você insere o conteúdo à mão, o que significa que você pode apresentar um produto, um serviço, um pacote ou uma oferta externa sem configurar uma loja primeiro.
Antes de começar #
- Wordpress com elementar instalado e ativo.
- Complementos mestres Pro instalado com uma licença ativa, uma vez que Featured Product é um widget Pro. Novo no plugin? veja o guia instalação.
- Uma imagem de produto e os detalhes que você deseja mostrar (nome, preço, link de botão).
Como adicionar o widget Produto em destaque #
No editor Elementor, abra o Elementos painel e pesquisa Produto Destaque, ou vá até a seção Complementos mestres Arraste-o para sua página e um cartão de amostra aparecerá imediatamente, para que você edite a partir de um ponto inicial funcional em vez de um em branco.
Preencha os detalhes do produto #
Abrir o Conteúdo guia e o Geral seção detém os campos principais É aqui que o cartão obtém o seu conteúdo.
- Layouts: escolha Design 1, Design 2 ou Design 3. Mais sobre estes abaixo.
- Imagem: escolha a imagem do produto na Biblioteca de Mídia.
- Título: o nome do produto. suporta tags dinâmicas se você quiser puxá-lo de um campo.
- Tipo de conteúdo: alterne entre uma planície Descrição e a Lista de características.
- Preço e Preço Original: o preço atual mais um preço original opcional que aparece riscado, que parece um desconto.
- Texto e link do botão: o rótulo call-to-action e para onde ele envia as pessoas O Design 2 usa um ícone de botão em vez de texto.
Descrição ou uma lista de recursos #
Definir Tipo de conteúdo para Lista e a caixa de descrição se transforma em um repetidor Você escolhe um Ícone de Lista (uma marca de seleção por padrão) e adiciona quantas linhas de recursos quiser, cada uma com um controle duplicado e de exclusão É uma maneira rápida de transformar um cartão em um mini discurso de vendas com benefícios de bullet-point.
Escolha um design de layout #
O widget vem com três layouts e alternar entre eles reorganiza o mesmo conteúdo sem que você refaça nada.
Projeto 2 empilha a imagem no topo, em seguida, coloca um crachá de ícone ao lado do título e descrição, com a classificação e preço em uma linha O botão mostra como um ícone aqui.
Projeto 3 leads com a imagem, em seguida, centra o título, descrição, classificação, preço, e um botão de largura total abaixo dele É o mais limpo dos três para uma promoção simples.
O Design 1 (o padrão) coloca a classificação e o título no topo, o preço abaixo dele e, em seguida, a imagem, a descrição e um botão de largura total na parte inferior.
Adicione uma fita e uma classificação #
Passe pelo campo Link e você alcançará o Fita e Classificação controles. a fita é o banner de canto que chama “NEW” ou “HOT,” e a classificação é a linha de estrelas.
- Fita (Mostrar): ligue ou desligue o banner de canto.
- Tipo de fita: escolha um estilo de fita Os estilos mudam a forma e a posição, de um canto diagonal para uma bandeira ou tag de citação.
- Texto de fita e ícone de fita: a etiqueta (como NOVO ou QUENTE) e um ícone opcional como o troféu.
- Classificação: defina o valor da estrela, por exemplo 4,5, e o cartão mostra estrelas parciais para corresponder.
Estilize o cartão #
O Estilo a guia é dividida em seções que correspondem às partes do cartão: Caixa, Título, Conteúdo, Preço, Botão, Classificação, Fita, e Padrões (da extensão Patterns gratuita).
- Caixa: fundo, borda, raio e sombra para todo o cartão.
- Título, Conteúdo, Preço: cor, tipografia, alinhamento e espaçamento para cada bloco de texto.
- Botão: cores, tipografia, preenchimento e estado de pairar para a chamada à ação.
- Classificação e Fita: cor da estrela e estilo de cor e texto da fita.
O resultado na página #
Publique ou visualize e o cartão renderiza com tudo no lugar: a fita no canto, a classificação, o preço com seu original riscado, sua imagem e o botão vinculado onde você o define Abaixo está o mesmo widget em dois de seus designs.
Casos de uso comum #
- Blocos promocionais destacando um produto em uma landing page.
- Escolhas afiliados com uma classificação, preço e um link de compra de saída.
- Inicie ou distribua chamadas usando a fita NOVA ou QUENTE.
- Pacotes de serviço com o tipo de conteúdo List mostrando o que está incluído.
- Item em destaque ao lado de a tabela preços ou uma seção de call-to-action.
Dicas para trabalhar com o widget Produto em destaque #
- Defina um preço original para mostrar um desconto. O número riscado próximo ao preço atual é considerado um resumo do negócio.
- Use o tipo de conteúdo List para benefícios. Linhas curtas convertem melhor do que um parágrafo em um cartão promocional.
- Mantenha o texto da fita em uma palavra. NOVO, QUENTE ou VENDA cabem no banner de canto sem embrulhar.
- Combine o design com o layout ao seu redor. O design 3 se adapta a uma grade limpa; O design 1 preenche bem uma barra lateral ou coluna estreita.
- Aponte o botão para algum lugar real. Defina o link para o checkout, página do produto ou URL do afiliado antes de publicar.
Perguntas frequentes #
Qual é o widget Produto em destaque em Master Addons?
É um widget Master Addons Pro para Elementor que constrói um único cartão de produto com uma imagem, título, preço, classificação, fita e um botão de call-to-action Você insere os detalhes à mão e escolhe um dos três designs de layout. Funciona em qualquer página, com ou sem WooCommerce.
O widget Produto em destaque precisa WooCommerce?
Não. O widget não extrai de um catálogo WooCommerce Você digita o nome do produto, preço, imagem e link do botão sozinho, para poder apresentar um produto, serviço ou oferta externa em qualquer página sem executar uma loja.
Quantos layouts o widget Produto em destaque tem?
Três. Design 1 lidera com a classificação e título acima da imagem, Design 2 coloca um emblema de ícone ao lado do título com um botão de ícone, e Design 3 centraliza o conteúdo sob uma imagem superior Os designs de comutação reorganizam o mesmo conteúdo automaticamente.
Como mostro um preço de desconto no cartão?
Preencha os campos Preço e Preço Original na seção Geral O preço atual aparece na cor de destaque e o preço original aparece ao lado com um strike-through, que sinaliza um desconto para os visitantes.
Posso mostrar uma lista de funcionalidades em vez de uma descrição?
Sim. defina o tipo de conteúdo como lista na seção Geral A caixa de descrição se torna um repetidor onde você adiciona linhas de recursos, cada uma com um ícone de lista Use-o para transformar o cartão em uma lista de benefícios curta e digitalizável.
Embrulhando #
O widget Produto em destaque transforma um punhado de detalhes em um cartão de produto Elementor polido: escolha um design, adicione uma imagem e preço, ligue uma fita e classificação e vincule o botão Como nada depende do WooCommerce, ele cai em qualquer página como uma promo ou bloco de afiliados Emparelhe-o com o Widget de tabela de preços ou a Chamada à Ação seção, navegue por completo Widgets e extensões Master Addons, e veja o página preços para o que cada plano inclui Veja o Página de widget de produto em destaque para demos.
