Tema Flatesome
Flatsome é um poderoso tema WordPress projetado para sites de comércio eletrônico e vem com integração com WooCommerce.
É um dos temas mais populares do WooCommerce no ThemeForest. No momento em que escrevi este tutorial, foram mais de 174.500 vendas e uma incrível classificação de 4,8 estrelas proveniente de mais de 6.600 avaliações.
Flatsome foi projetado principalmente para usuários iniciantes e usuários que não entendem de tecnologia.
Isso é ótimo para pessoas que desejam iniciar um negócio online, mas não sabem como codificar ou não têm orçamento para contratar um programador profissional. Com o Flatsome, você poderá criar um site com aparência profissional usando ferramentas simples e intuitivas.
Agora, o Flatsome vem com toneladas de recursos e funcionalidades incríveis. Para mostrar o que está disponível e como funciona, temos um rápido tutorial que mostra como criar uma página de produto WooCommerce usando Flatsome.
Então, sem mais delongas, vamos começar:
Tabela de conteúdo:
- Tema Flatesome
- Diferença entre Flatsome, WooCommerce e WordPress
- Crie uma página de produto WooCommerce usando o tema Flatsome
- Etapa 1: Selecione um layout para a página do produto
- (Opcional) Etapa 2: Crie a página do produto manualmente
- Etapa 3: personalizar a página do produto
- Empacotando
Diferença entre Flatsome, WooCommerce e WordPress
Ao darmos as boas-vindas aos nossos novos leitores, devemos colocar algumas informações necessárias para garantir que todos os nossos leitores estejam na mesma página. Aqui, discutiremos a diferença em todas as três terminologias que usaremos ao longo deste artigo.
Vamos começar com o WordPress. É uma plataforma onde você instala diferentes temas e plugin para criar seu site. Existem milhares de plugin e temas disponíveis para cumprir outras tarefas de acordo com suas necessidades.
WooCommerce é um plugin que instalamos no WordPress que permite adicionar diferentes recursos ao nosso site. Com a instalação deste plugin , podemos fazer nosso site e loja online com funcionalidades adicionais como carrinho de compras, processamento de pagamentos, gerenciamento de produtos, etc.
Por último, mas certamente, um dos elementos mais críticos é o panorama do nosso site. Flatsome é um tema que nos permite personalizar a perspectiva do nosso site de acordo com os nossos desejos. Por exemplo, se o logotipo da sua empresa for laranja, você deve refletir na cor do seu site. É o que Flatsome pode fornecer a você.
Crie uma página de produto WooCommerce usando o tema Flatsome
Uma vez que todos os nossos leitores têm conhecimento sobre WordPress, WoCommerce e Flatsome, é hora de seguirmos para a personalização de nossa página de produto com o fantástico UX builder que vem com o tema Flatsome. É um recurso de arrastar e soltar que torna a vida do designer extremamente fácil.
Quase todo mundo comprou online, provavelmente por causa dos tempos difíceis que enfrentamos nos últimos meses. Ficar em casa era a solução mais segura para todos nós. É a razão pela qual todos os nossos leitores concordam que uma loja online é muito mais complicada do que um site padrão.
No entanto, com a ajuda de WooCommerce e Flatsome, essa tarefa se tornou extremamente fácil. Você precisa se sentar e planejar como será a aparência do seu site, e é isso. WooCommerce estará lá para ajudá-lo com suas opções de construtor. Você pode criar uma loja online totalmente funcional em apenas alguns minutos arrastando e soltando.
Com WooCommerce e Flatsome , você poderá dar uma nova vida às suas ideias de ter uma loja online. Seu site deve ter um visual moderno e bonito para que possa atrair clientes. Portanto, Flatsome é a melhor solução para todos os seus problemas, então faça o download aqui e vamos começar.
O Flatsome tem alguns recursos fantásticos, mas uma das partes é que ele se tornou a primeira escolha de mais de 300.000 usuários. Uma ferramenta definitiva auxilia na criação de alguns sites responsivos incríveis sem a necessidade de codificar uma única linha. Além disso, sua capacidade de criar algumas lojas online exclusivas e altamente criativas o torna ainda mais valioso.
Então, sem perder mais tempo, vamos para o tutorial. Este tutorial o conduz por todo o processo de criação da página de produtos. As fotos o ajudarão a ter uma ideia melhor de como a tarefa passará no processo.
Etapa 1: Selecione um layout para a página do produto
Primeiro, começaremos selecionando um layout da página de produtos. Esta seleção irá criar uma página básica para nossa loja online, que iremos customizar de acordo com nossos desejos mais tarde. Este guia passo a passo o guiará pelo processo de personalização da página.
Para este ex amp le, continuaremos com a opção Classic Shop. No entanto, não há nenhuma restrição para você. O processo de personalização será semelhante para cada layout que você selecionar. A única diferença seria que a estrutura básica da página será diferente da outra.
Seguindo para o personalizador de produto, demos a ele o nome Barra lateral esquerda altura total.
Existem duas opções disponíveis para personalizar a página de produtos. O primeiro deve ser feito com o construtor UX, enquanto o outro é para construir a página manualmente. Se você selecionar a segunda opção, terá que consultar a documentação oficial e localizar os códigos de acesso. Se você é um iniciante e esta é sua primeira experiência construindo uma loja online, recomendo esta primeira opção.
(Opcional) Etapa 2: Crie a página do produto manualmente
Aqui está uma imagem da página de documentação oficial do Flatsome. Você pode digitar a palavra shortcodes e pesquisá-los.
Depois de clicar em pesquisar, haverá uma lista de códigos de acesso exibidos na tela. Você pode escolher os códigos de acesso que são importantes para a página do produto. Usar códigos de acesso requer menos esforço, mas é essencial que você tenha um pouco de experiência prática com o WordPress e o uso de códigos de acesso.
Aqui está a lista de códigos de acesso que você pode usar no site para criar páginas.
Neste ex amp le, estaremos personalizar a altura total esquerda layout de barra lateral; portanto, estaremos copiando o código para o design. A seguir está uma imagem do aplicado, mas você pode facilmente copiá-lo da estrutura.
Comece criando um bloco com um título. Se você deseja desenvolver cabeça, você precisa clicar em “Adicionar novo” disponível em blocos de UX colocados em seu painel.
Você pode nomear o bloco de acordo com seus desejos. Aqui neste exemplo, amp a união como 'Layout da barra lateral esquerda com altura total'. A seguir, você pode ver os códigos de acesso dentro do editor de bloco. Depois de terminar de copiar os códigos de acesso desejados, você pode clicar em publicar.
Estaremos em par após este pequeno passo em que podemos personalizar nossa página de acordo com nossos desejos. Agora navegue até a opção de tema da página do produto e clique no ícone de layout personalizado.
Depois de concluído, você poderá criar blocos na lista suspensa Layout de produto personalizado.
Escolha o bloco que acabamos de criar. Nosso principal objetivo ao criar esse bloco foi criar uma página de produto a partir dele. De acordo com este ex amp le, a altura completa deixou layout de barra lateral é o bloco, enquanto que no seu fim, será que você tenha nomeado.
Depois de concluído, basta clicar no botão Publicar; ele salvará as configurações.
Etapa 3: personalizar a página do produto
É hora de começarmos a customização. Primeiro, navegaremos pela página de produtos existentes a partir do front end que definimos anteriormente nas etapas.
É importante que você selecione um produto específico que precisamos configurar. Você deve ter detalhes completos, imagens da obra que precisamos personalizar. Dessa forma, o processo fica mais confortável para visualizar a seção da página que você irá criar.
A opção do construtor UX está visível. Basta clicar no botão para iniciar a personalização.
Depois que o construtor UX é aberto, você pode ver na imagem que os elementos da página do produto estão disponíveis no painel esquerdo da página de seus produtos.
O painel esquerdo é o bloco que criamos inicialmente. Nós o criamos com a ajuda dos códigos de acesso retirados da documentação.
Você tem opções para reordenar os elementos no painel do lado esquerdo e alterar as configurações da opção de elemento. Neste ex amp le, estaremos reordenando o preço disponível no menu à esquerda.
Além disso, também permite reorganizar os elementos da visualização do construtor e colocar componentes adicionais na página do produto do construtor. Nesta demonstração, a seção de guias de produtos e o produto relacionado foram reorganizados com apenas um simples arrastar e soltar.
Com a funcionalidade significativa de arrastar e soltar, Flatsome está pronto para fornecer o que você procura em seu site. Com módulos altamente personalizáveis, você pode criar páginas fantásticas com facilidade. O recurso de arrastar e soltar torna a vida ainda mais confortável.
Empacotando
É imperativo ter um negócio online nos tempos modernos porque as pessoas preferem ficar em casa para permanecerem seguras. Portanto, comece a construir sua primeira loja online de negócios com Flatsome e hipnotize seus clientes com sua exclusividade e criatividade. Além disso, não há confusão de código no editor de conteúdo, apenas algumas linhas de código curto. Flatsome é sem dúvida o melhor tema que encontrei. Portanto, não há necessidade de procurar por nenhum outro tema, basta clicar no botão de download e começar a construir sua loja online personalizada imediatamente.
