Exemplo de configuração de cartão de visita

Este artigo mostra como configurar um produto como nossa demonstração de cartão de visita . 

Esta configuração requer nosso plugin Fancy Product Designer .

A) Crie o produto sofisticado

OPÇÃO 1: 

Baixar e importar demonstração

Nossa demonstração de cartão de visita pode ser baixada na seção Produtos do plugin Fancy Product Designer. 

Após o download, você pode importar o arquivo zip para que o modelo de cartão de visita apareça na seção de produtos. 

Você ainda precisa definir o tamanho da tela que deseja obter (consulte a Etapa 8).

OPÇÃO 2:

Se você quiser criar o produto sofisticado por conta própria, siga estes passos:

1. Vá para Fancy Product Designer/Products e crie um novo Fancy Product

2. Insira um título de produto

3. Adicione uma visualização ao produto sofisticado

4. Insira um título de visualização

5. Selecione uma miniatura para a visualização

6. Adicione uma miniatura para o produto

7. Editar visualização no Product Builder

8. Edite as opções do produto e defina o tamanho da tela para 600 x 335 pixels

9. Editar visualização no Product Builder

10. Carregar camadas (imagens, textos, textos curvos, caixas de texto ou zonas de upload)

Você pode obter uma visão geral das camadas que usamos, bem como as configurações ao baixar e importar nossa demonstração do Cartão de Visita (para mais informações, consulte a OPÇÃO 1 ) 

Imagens

Usamos uma imagem de fundo (arquivo png com paleta de cores habilitada ).

Além disso, usamos uma grade (sobreposição png semitransparente, sem opções de cores habilitadas).

Na parte inferior do cartão de visita, há duas camadas de imagem diferentes que são configuradas adequadamente (imagem base e sobreposição png)

Entre a parte superior e inferior do Cartão de Visita há uma linha como imagem.

Textos

No lado esquerdo do Cartão de Visita, você pode ver dois campos de texto separados.

No lado direito há uma caixa de texto com uma largura predefinida. 

Todos os elementos de Texto e Caixa de Texto são personalizáveis ​​e usam o método de colorização paleta de cores . 

Se você quiser usar fontes que ainda não estão disponíveis no criador de produtos, dê uma olhada neste guia .

Lembre-se de clicar em "Salvar visualização" para salvar sua configuração.

B) Personalize o layout da interface do usuário 

1. Vá para o Fancy Product Designer UI Composer e remova todos os módulos e ações do layout de interface do usuário que você está usando.

2. Insira o seguinte CSS personalizado no UI Composer para remover a barra principal:

.fpd-product-designer-wrapper {
    margin: 20px 0;
}

.fpd-mainbar {
    display: none !important;
}

CSS

3. Dependendo do tema que você estiver usando, há um CSS personalizado adicional que você precisa inserir para organizar o Layout do seu produto WooCommerce. Você também pode inserir esse código na aba CSS personalizado do Layout de IU que você estiver usando, usar os campos CSS personalizado dos seus temas ou baixar um plugin adicional para adicionar CSS personalizado aos produtos selecionados. 

Os valores no seguinte código CSS personalizado podem diferir dependendo do tema que você está usando e podem precisar ser ajustados:

.woocommerce .fpd-product-designer-wrapper {
    float: left;
    width: 58%;
}

.woocommerce div.product .summary {
    width: 38% !important;
}

.fpd-text-layers-panel .fpd-title {
   display: none;
}

@media (max-width: 800px) {

   .single .fpd-product-designer-wrapper {
       width: 100%;
       float: none;
   }

    .single.woocommerce div.product .summary {
       width: auto !important;
       margin-left: 0;
       float: none;
   }

}

CSS

C) Conecte o produto Fancy a um produto WooCommerce

1. Crie um produto WooCommerce 

2. Adicione um título e atribua seu produto extravagante ao seu produto WooCommerce

3. Você pode inserir os seguintes códigos de acesso na descrição curta do produto WooCommerce para mostrar os botões de ação:

[fpd_module type="text-layers" css="width: 100%; border: none;"]
[fpd_action type="print" layout="icon-text"] 
[fpd_action type="qr-code" layout="icon-text"] 
[fpd_action type="save" layout="icon-text"] 
[fpd_action type="load" layout="icon-text"]

Genérico

Aqui  você pode encontrar um guia sobre como criar esses códigos de acesso.

4. Configure o produto como um produto variável e adicione o atributo "Quantidade" com suas entradas

5. Adicione variações e adicione preços

D) Resultado

Dependendo do seu tema, o estilo dos campos de entrada e dropdown pode variar. O tema que estamos usando em nossa demonstração, por exemplo, é o X-Theme.

Confira o link de exemplo aqui.