Tema plano
Flatsome é um poderoso tema WordPress projetado para sites de comércio eletrônico e vem com integração WooCommerce.
É um dos temas WooCommerce mais populares no ThemeForest. No momento em que este tutorial foi escrito, 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 não experientes em tecnologia.
Isso é ótimo para pessoas que desejam começar um negócio online, mas não sabem como codificar ou não têm orçamento para contratar um programador profissional. Com Flatsome, você poderá criar um site com aparência profissional usando ferramentas simples e intuitivas.
Agora, Flatsome vem com vários recursos e funcionalidades incríveis. Para mostrar o que está disponível e como funciona, temos um tutorial rápido mostrando como criar uma página de produto WooCommerce usando Flatsome.
Então, sem mais delongas, vamos começar:
Índice:
- Tema plano
- 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: criar a página do produto manualmente
- Etapa 3: personalize a página do produto
- Empacotando
Diferença entre Flatsome, WooCommerce e WordPress
Ao darmos as boas-vindas aos nossos novos leitores, devemos inserir 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 WordPress. É uma plataforma onde você instala diversos temas e plugin para criar seu site. Existem milhares de plugin e temas disponíveis para realizar outras tarefas conforme sua necessidade.
WooCommerce é um plugin que instalamos no WordPress que permite adicionar diversos recursos ao nosso site. Com a instalação deste plugin , podemos tornar o nosso site e loja online com funcionalidades adicionais como carrinho de compras, processamento de pagamentos, gestão de produtos, etc.
Finalmente, mas certamente, um dos elementos mais críticos é a perspectiva 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 a cor do seu site. É o que o Flatsome pode lhe oferecer.
Crie uma página de produto WooCommerce usando o tema Flatsome
Como todos os nossos leitores possuem conhecimento sobre WordPress, WoCommerce e Flatsome, é hora de avançarmos para a customização de nossa página de produto com o fantástico construtor UX que vem com o tema Flatsome. É um recurso de arrastar e soltar que torna a vida do designer extremamente fácil.
Quase todo mundo já fez compras online, provavelmente por causa dos tempos difíceis que enfrentamos nos últimos meses. Ficar em casa foi a solução mais segura para todos nós. É por isso que todos os nossos leitores concordarão que uma loja online é muito mais complicada do que um site padrão.
Porém, com a ajuda do WooCommerce e Flatsome, essa tarefa se tornou extremamente fácil. Você precisa sentar e planejar 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 completa em apenas alguns minutos arrastando e soltando.
Com WooCommerce e Flatsome , você poderá dar uma vida totalmente nova às suas ideias de ter uma loja online. Seu site deve ter um visual moderno e bonito para atrair clientes. Portanto, Flatsome é a melhor solução para todos os seus problemas, então baixe aqui e vamos começar.
Flatsome tem alguns recursos fantásticos, mas uma das partes é que ele se tornou a principal escolha de mais de 300.000 usuários. Uma ferramenta definitiva ajuda na criação de sites extremamente responsivos sem a necessidade de codificar uma única linha. Além disso, sua capacidade de criar lojas online altamente criativas e exclusivas o torna ainda mais valioso.
Então, sem perder mais tempo, vamos ao tutorial. Este tutorial conduz você pelo processo completo de criação da página de produtos. As imagens ajudarão você a ter uma ideia melhor de como a tarefa será executada ao longo do processo.
Etapa 1: selecione um layout para a página do produto
Primeiro, começaremos selecionando um layout para a página de produtos. Esta seleção criará uma página básica para nossa loja online, que posteriormente personalizaremos de acordo com nossos desejos. Este guia passo a passo orientará você no processo de personalização da página.
Para este amp , continuaremos com a opção Classic Shop. No entanto, não há restrição para você. O processo de personalização será semelhante para cada layout selecionado. A única diferença seria que a estrutura básica da página seria diferente da outra.
Avançando para o personalizador de produto, demos a ele o nome de barra lateral esquerda de altura total.
Existem duas opções disponíveis para personalizar a página de produtos. A primeira deve ser feita com o construtor UX, enquanto a outra é construir a página manualmente. Se você selecionar a segunda opção, terá que acessar a documentação oficial e localizar os códigos de acesso. Se você é iniciante e esta é sua primeira experiência construindo uma loja online, recomendo escolher esta primeira opção.
(Opcional) Etapa 2: criar a página do produto manualmente
Aqui está uma captura de tela da página de documentação oficial do Flatsome. Você pode digitar a palavra códigos de acesso e pesquisá-los.
Depois de clicar em pesquisar, uma lista de códigos de acesso será exibida na tela. Você pode escolher os códigos de acesso 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 WordPress e no 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 amp , personalizaremos o layout da barra lateral esquerda de altura total; assim, estaremos copiando o código do design. A seguir está uma imagem do aplicativo, mas você pode copiá-la facilmente da estrutura.
Comece criando um bloco com um título. Se você deseja desenvolver o head, você precisa clicar em “Adicionar Novo” disponível nos blocos UX colocados em seu painel.
Você pode nomear o bloco de acordo com seus desejos. Aqui neste amp , nomeamos a união como 'Layout da barra lateral esquerda de altura total'. A seguir, você pode ver os códigos de acesso dentro do editor de blocos. Depois de concluir a cópia dos códigos de acesso desejados, você pode clicar em publicar.
Estaremos em pé de igualdade após este pequeno passo onde poderemos customizar 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 no menu suspenso 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 amp , o layout da barra lateral esquerda de altura total é o bloco, enquanto no final será como você nomeou.
Depois de concluído, basta clicar no botão Publicar; isso salvará as configurações.
Etapa 3: personalize a página do produto
É hora de começarmos a customização. Primeiro, navegaremos na 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ê deverá ter detalhes completos, imagens da obra que precisamos customizar. Dessa forma, fica mais confortável o processo de visualização da seção da página que você irá criar.
A opção do construtor UX está visível. Basta apertar o botão para iniciar a personalização.
Depois que o construtor UX for aberto, você poderá ver na imagem que os elementos da página do produto estão disponíveis no painel lateral esquerdo da página do produto.
O painel lateral 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 esquerdo e alterar as configurações na opção de elemento. Neste amp , estaremos reordenando o Preço disponível no menu esquerdo.
Além disso, também permite reorganizar elementos da visualização do construtor e colocar componentes adicionais na página do produto do construtor. Nesta demonstração, a seção Guias de produtos e o Produto relacionado foram reorganizados com apenas um simples arrastar e soltar.
Com a significativa funcionalidade 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
É fundamental ter um negócio online nesta era moderna porque as pessoas preferem ficar em casa para permanecerem seguras. Então comece a construir a primeira loja online do seu negócio 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 shortcode. Flatsome é sem dúvida o melhor tema que encontrei. Portanto, não há necessidade de procurar nenhum outro tema, basta clicar no de download e começar a construir sua loja online personalizada imediatamente.
