🛒 Loja Virtual no Canva? Como Criar um SITE DE VENDAS usando o Canva!

Fala galera beleza eu sou o Darlan Evandro e nesse vídeo nós vamos fazer algo um pouco diferente eu vou mostrar como você pode criar uma loja virtual usando a ferramenta canva e o melhor de tudo por meio do plano gratuito do Campo Tá só uma olhada na loja que você vai aprender a criar e essa loja você pode criar diversas páginas nessa loja páginas específicas para o seu produto pode adicionar fotos adicionar vídeos descrições e muito mais e eu também vou mostrar como você vai usar uma segunda ferramenta para adicionar um botão com cálculo de frete para você vender seus produtos para os seus clientes quer aprender a fazer vem comigo nesse vídeo Então hoje eu vou mostrar como você pode usar a ferramenta canva para criar um mini site de vendas uma mini loja virtual se você ainda não conhece a ferramenta canva é uma ferramenta de design que vem revolucionando a criação de conteúdo e também é possível usar o canva para criação de sites atualmente a gente consegue criar sites bem legais dentro da ferramenta canva mas Darlan dá para criar uma loja virtual bem completa com carrinho de compras e tudo mais dentro do canva de forma Nativa ainda a gente não consegue criar uma loja de vendas com um carrinho de compras mas a gente consegue criar uma loja com página simples é um site sem carrinho de compras e nesse vídeo eu vou te mostrar uma alternativa uma outra ferramenta que você vai usar de forma integrada ao canva para você conseguir vender para os seus clientes com cálculo de frete por exemplo Então vem comigo para a tela do computador que eu vou te mostrar todos os detalhes de como fazer isso então vamos lá pessoal esse vídeo aqui dividido em três partes Vamos abrir um bloco de notas aqui a parte 1 é a parte visual do site nós vamos criar o visual das páginas tá deixa eu aumentar aqui para vocês parte 1 é visual do site segunda parte a gente vai para publicação do site publicação do site da sua loja virtual né e a terceira etapa a gente vai fazer a integração nós vamos vincular o site ou a loja com a ferramenta de pagamento então parte 1 parte 2 parte 3 que forma bem resumida Vamos começar agora pela parte 1 que é o visual do site que que você precisa fazer aqui dentro do canva obviamente vai criar sua conta se você ainda não tiver uma conta clica no primeiro link aqui da descrição você vai ser direcionado para o site oficial vai criar sua conta e já vai cair aqui na tela inicial da ferramenta Depois disso você vai vir no botão criar um design aqui na parte superior nesse campo de busca você vai digitar site isso aqui que você vai fazer e pode escolher aqui a primeira opção mesmo site 1366 pixels por 768 pode escolher esse formato aqui mesmo clicou aqui será aberto uma nova guia em branco aqui para a gente começar a desenhar o nosso site tá não tenha a síndrome aí da tela em branco porque extremamente simples de usar a ferramenta para criar algo do zero Então fique bem tranquilo que eu vou te mostrar todo passo a passo para você criar as páginas aí da sua loja de vendas da sua loja virtual aqui usando a ferramenta canva antes de te mostrar que os recursos da ferramenta para você criar sua página do zero aqui eu quero comentar um pouquinho para você sobre os templates aqui no menu design esse primeiro menu no canto superior esquerdo nós temos diversos templates de sites disponíveis aqui dentro da ferramenta que você pode usar tá para agilizar aí o seu processo de criação tem muita coisa pronta aqui Inclusive tem sites aqui com várias páginas dá uma navegada inclusive você pode utilizar o campo de busca para filtrar por uma categoria específica então por exemplo vou selecionar esse aqui que tem o fone de ouvido né Tem várias páginas fone de ouvido sobre a tecnologia compre por categoria enfim clicou na página ela é enviada aqui para área de trabalho onde você pode fazer as modificações tanto no texto nos botões na imagem então fique à vontade para navegar aqui no menu design né que são os templates tem muita coisa legal que você pode usar para criar aqui o seu site o único detalhe que você precisa se atentar nós temos tanto nos layout quanto nos elementos fotos vídeos tudo que tem aqui dentro do Campo existe uma diferenciação entre os recursos pro e os recursos grátis tudo que tem essa coroazinha que tá escrito pro isso aqui tá disponível para o canva pro Então você se você está usando o canva grátis você precisa usar os templates os elementos as imagens que não tem a todos esses aqui não tem tá vendo Então tem muita coisa gratuita que dá para você usar caso você queira usar o pro aí você precisa contratar a ferramenta Inclusive tem o link aqui na descrição do canva pro a gratuitamente Durante 45 dias só você se cadastrar aí que você consegue usar o canva pro para criar algo do zero aqui é extremamente simples por exemplo se você quiser adicionar um texto clicou aqui no menu texto temos aqui o título subtítulo e um texto simples inclusive templates de textos já diagramados né você pode escolher aqui um visual bacana assim que você clica ele é transferido para área de trabalho você vai usar as alças laterais aí para fazer o redimensionamento clica e arrasta fique à vontade deu dois cliques você consegue editar Então você consegue inserir textos de uma forma muito simples Tá eu vou clicar aqui em inserir título e vou digitar aqui loja do Darlan vou posicionar aqui na parte superior só um exemplo tá é muito simples só para mostrar para você o funcionamento da ferramenta clicando aqui no menu texto temos uma barra de propriedade onde você pode modificar a cor do seu texto deixar aqui uma cor diferenciada você pode trabalhar que o Itálico sublinhado o texto todo em maiúsculo Centralizado enfim inclusive aqui em efeitos Temos vários efeitos de sombra de neon tem muita coisa tá tem muita coisa legal eu vou manter simples aqui só para exemplificar para você como funciona vou adicionar aqui um sub-título também roupas e acessórios personalizados aqui extremamente genérico né Vamos modificar a cor aqui também Beleza se você quiser adicionar algum elementozinho ali um pouco diferenciado clicando aqui em elementos Você pode procurar por exemplo por coração e daí nós temos algumas opções legais aqui elementos gráficos vou clicar em ver tudo aí nós temos vários corações você pode colocar por exemplo um coraçãozinho aqui do lado né da sua loja aí vamos colocar esse aqui que tem o preenchimento pode ser até esse daqui né todo desenhadinho ou modificar a cor aqui você pode colocar aqui ó do lado a loja do Darlan tá ficando chique o negócio vamos apagar isso aqui dupliquei esse coraçãozinho é pressionando o contra o d no teclado então eu já tenho aqui um cabeçalho aqui para nossa para o nosso site para nossa loja virtual aqui posicionei aqui bonitinho posso também fazer uma modificação No fundo aqui clicando na parte em branco você também tem o botão de cor de fundo clicou em cor de fundo clicar aqui em adicionar nova cor você pode colocar uma cor sólida ou um Gradiente eu vou manter pode ser um Gradiente Gradiente que vai ficar legal temos aqui do branco para uma cor personalizada vou clicar aqui escolher a outra cor né Vamos colocar aqui um tipo um cremezinho assim ó vai ficar bem legal Pronto já temos um efeito aqui diferenciado para você adicionar imagens aqui na sua página extremamente simples você pode usar que o menu elemento se pesquisar algo aqui por exemplo modelo de moda eu quis dizer né clica aqui em fotos você vai ter diversas modelos referente aqui a sua pesquisa se você pesquisar futebol você vai achar imagens sobre futebol clicou na imagem ela já é direcionada aqui para a área de trabalho você vai usar as alças laterais para reposicionar e fazer os ajustes que você quiser clicando aqui nas alças você também diminui aqui a dimensão dessa imagem e tudo mais para você enviar sua própria imagem menu upload faço o download de mídia e daí você vai procurar dentro do seu computador a imagem que você vai enviar no caso criando uma loja virtual um e-commerce você vai colocar as imagens do seu produto então provavelmente você vai usar esse recurso de upload eu já enviei aqui algumas imagens que eu peguei na internet só para fazer esse exemplo de vídeo aqui para vocês então eu já tenho aqui algumas imagens tá que nós vamos trabalhar aqui na loja com looks completos blusinhas e calças por exemplo então você pode fazer dessa forma clicou aqui na imagem ela já é enviada você vai reposicionar aqui né redimensionar tem um outro recurso bem legal também em elementos que você pode selecionar que essas molduras clicando aqui em ver tudo Você consegue colocar tipo uma moldura para sua foto vamos imaginar que você queira que a sua imagem fique dentro desse círculo Então você adicionou a moldura clica na imagem arrasta aqui para dentro Olha lá que legal que fica né você pode escolher aqui o formato que você quiser você pode colocar por exemplo esse formato tipo de uma foto Polaroid fica bem legal voltar aqui em upload daí eu vou arrastar a imagem aqui para dentro Olha lá que legal deletar isso daqui arrasta essa imagem para cá Aí eu posso voltar aqui em elementos inserir novamente né seria a segunda vez e a terceira vez aí eu vou posicionar aqui as três imagens beleza volto aqui upload termino de inserir minhas imagens aqui você pode também colocar aqui embaixo um texto né um botão alguma coisa nesse sentido Então vou duplicar esse texto e vou escrever aqui embaixo de cada imagem a categoria que são esses produtos look completo blusinhas e calças só vou mudar a cor desse texto selecionei os três de uma vez clico aqui na cor do texto eu vou colocar um rosa que também uma cor um pouco mais escura e colocar em Olha lá que legal que ficou já tá dando uma cara aqui de site né de menu pelo menos caso você queira adicionar mais páginas no seu site porque isso aqui é só a página inicial né a página ali principal para pessoa escolher Que tipo de produto que ela quer para adicionar uma nova página na parte inferior temos o adicionar página Aí nós já temos uma nova página se você quiser que ela tenha o mesmo preenchimento de fundo aqui da página inicial clica no fundo contra o C vem aqui na página de baixo control V nós já temos o mesmo preenchimento de uma página na outra e aqui você pode fazer o seguinte você pode vamos imaginar que a pessoa clicou lá look completo Então ela quer ver todas as opções de look completo Então vamos criar uma página específica do look completo vou copiar essa esse texto principal aqui vou colar aqui embaixo vou diminuir um pouquinho eu vou digitar aqui looks completos posso também modificar a cor e daí a gente vai adicionar aqui as imagens dos produtos que possuem o look completo eu vou pegar uma imagem aqui da biblioteca de imagens porque eu não tenho aqui looks completos né então vou buscar aqui algumas modelos Já coloquei aqui algumas imagens somente por exemplificar que você vai colocar a imagem do seu produto obviamente vou aumentar um pouquinho e vou deixar aqui tudo em maiúsculo que vai ficar mais legal looks completos aí que que você pode fazer embaixo de cada look você pode colocar o nome e também um botão para pessoa clicar eu quero esse look Então vamos fazer aqui copiar esse texto né vamos colar aqui embaixo Vou colocar aqui esse aqui é o look um esse é o look 2 e assim sucessivamente e o botão você pode fazer da seguinte forma você pode pegar aqui um texto padrão mesmo vou duplicar aqui ou adicionar um novo texto tanto faz vou aumentar um pouquinho e vou digitar o seguinte nosso botão vai ser o conhecer Vou colocar aqui ele todo em maiúsculo aproximar um pouquinho conhecer posicionei aqui eu vou vir em elementos se vou selecionar em linhas e formas um retângulo aqui com bordas arredondadas porque que eu quero as bordas arredondadas porque eu vou fazer o formato de um botão tá vendo fazer isso daqui conhecer clicando aqui nessa estilo de borda eu posso modificar a redondamento dos cantos deixar ele menos arredondado ou mais arredondado assim eu acho que ficou legal vou aproximar aqui um pouquinho vou diminuir um pouco esse botão tá muito grande conhecer e também vou colocar aqui esse botão e uma cor diferenciada o botão na cor rosa roxo e o texto na cor branca acho que aqui já ficou mais mais bacana né Então vamos colocar aqui o botão beleza tá muito grande o botão Vamos diminuir um pouco e daí você vai duplicar esse botão para cada look Beleza então temos a página inicial que a pessoa vai escolher as categorias look completo blusinhas calças canecas camisetas você vai colocar as categorias clicou na categoria ela direcionada aqui para os looks para os produtos completos se tiver mais de uma página Tudo bem não tem problema você vai adicionando e duplica né Lucas completos cria uma nova página que também looks completo não tem problema até você pode colocar aqui ver mais aí coloca uma setinha para pessoa ir navegando né aí vamos criar agora uma página que é a página de informação do produto completo que daí no caso ela quer saber o look um quer comprar esse look um então a gente precisa criar essa página Então vou adicionar uma nova página fazer a mesma coisa aqui nas configurações ou copiar o título e esse aqui é o look completo e aqui eu vou copiar essa imagem vou colar aqui como se fosse uma imagem e detalhe né vou duplicar aqui posso colocar uma segunda imagem aqui uma terceira imagem Vamos diminuir aqui um pouquinho e daí você vai colocar o detalhe né imagem de detalhes se você quiser adicionar um vídeo com informações do seu produto também dá para fazer aqui na parte esquerda nos menus Você vai clicar em aplicativos e você vai procurar aqui por YouTube e nós temos aqui o aplicativo do YouTube clicou aqui você vai adicionar o link do seu vídeo vou pegar aqui um vídeo aleatório copiei lá um link do YouTube vou colar ele aqui e daí já apareceu aqui o vídeo né cliquei no vídeo ele é direcionado aqui para a área de trabalho você vai posicionar ele onde você deseja e nós já temos aqui uma página com detalhe do produto em formato de vídeo claro que você precisa ter esse vídeo do produto né aqui vamos colocar alguns elementos textuais como se fosse a descrição do produto coloquei aqui uma caixa de texto e vamos colocar aqui também a informação de preço e o botão de comprar o preço você pode colocar aqui um formato grande né um texto grande alguma coisa mais ou menos assim vou colocar aqui também embaixo forma de pagamento e aqui forma de pagamento você pode colocar o botão Ah eu aceito pix eu aceito cartão de crédito boleto bancário você pode colocar os ícones aqui digitando aqui elementos pode digitar por exemplo pics clico aqui no Pixel adicionou o botãozinho de pics obviamente Fique atento aos elementos grátis e pro tá bom temos também aqui o crédito cards Pode adicionar o botãozinho aqui do cartão de crédito e daí você vai personalizando aqui a sua página e obviamente Vamos colocar o botão para ganhar tempo eu vou copiar esse botão aqui vou colar aqui eu vou digitar aqui comprar beleza Tá feito aqui a nossa página de detalhe do produto uma coisa que você precisa se atentar é o seguinte daqui a pouquinho eu vou mostrar como você vai criar o link de pagamento caso o seu produto tenha tamanho P M cor amarelo azul branco você vai ter que criar um botão para cada para cada produto tá Porque infelizmente nós não temos esse recurso de carrinho de compras de selecionar uma cor específica um tamanho específico Então você teria que colocar por exemplo comprar daí aqui o p MG por exemplo para pessoa clicar no perda e diretamente que você receberá informação que ela tem interesse no produto x tamanho P você teria que fazer dessa forma tá daqui a pouquinho eu explico um pouco mais sobre isso é muito legal também que você faça aqui a renomeação das páginas qualquer página que você Acesse aqui na ferramenta nós temos essa opção adicionar anotações e aqui página um Você tem o título da página tá vendo Então você vai colocar início na página 1 página 2 é looks completos você vai digitar looks completos página 3 esse aqui é o produto um né o look completo 1 porque que é importante que você faça isso porque na hora de fazer o link você precisa ter o nome da página Vai facilitar bastante então vamos supor que esse aqui o look completo ele tem que Direcionar para essa página seleciona a imagem botão direito adicionar link ele vai para onde você pode selecionar aqui ó páginas nesse documento looks completos clicou em pronto então essa imagem está linkada nessa página looks completos look completo Um vamos adicionar aqui então o link no botão eu vou selecionar o texto pressionar o shift e selecionar o botão do fundo e vou agrupar que eu quero que tanto texto quanto o botão envia a pessoa para mesma página vou selecionar aqui o botão Clica com o botão direito adicionar link eu vou selecionar aqui que eu quero que esse botão Envie para o look completo 1 pronto e daí você vai fazendo essa linguagem daqui a pouquinho a gente vai colocar esse botão de comprar aqui só mais um pouquinho tá terminou de fazer aqui a parte visual do seu site a gente vai fazer a publicação dele Claro que você pode adicionar mais páginas aqui página de contatos sobre a empresa você vai adicionando páginas aí fique à vontade para para rechear de informações o seu site Tá clicando em pré-visualização na parte superior você consegue ver como que esse site tá ficando então nós temos os menus aqui inclusive quando você renomeia as páginas ele aparece aqui os menus né Então temos lá a loja do Darlan look completo blusinhas calças aquilo que completa ele já tá com o mouse né em formato de link esse aqui não se eu clico não acontece nada esse daqui cliquei ele já é direciona aqui looks completos clique em conhecer ele já vai look completo Um Tá tudo funcionando bonitinho né na parte superior você pode selecionar a visualização com ou sem barra de navegação você pode ativar aqui o redimensionamento para dispositivos móveis é muito importante que você deixe ativado isso você consegue visualizar no formato de computador e celulares Smartphone como que vai ficar viu como que tá ficando tá legal quer fazer modificação só virem fechar você vai modificando tá para publicar o seu site você pode vir no botão publicar site ou no compartilhar também dá para fazer o compartilhar mas já que tem um publicar site aqui vamos nele publicar site você vai selecionar essa opção redimensionar para dispositivos móveis é extremamente importante porque a pessoa ela pode acessar tanto pelo computador quanto pelo celular ele vai conseguir visualizar o seu site perfeitamente você pode ativar a opção com ou sem barra de navegação eu acho que legal manter essa combar de navegação faça o teste o que você achar que fica melhor você pode fazer a modificação aqui tá temos opção de publicar em domínio gratuito que ele vai usar o domínio do canva por exemplo canva. com você pode um novo domínio diretamente pela ferramenta canva ou usar um domínio existente você tem lá o seu site. com.

br você consegue fazer a vinculação desse domínio aqui no canva eu já trouxe um vídeo bem detalhado mostrando como que você faz isso eu vou deixar esse vídeo aparecendo no card aqui na descrição também depois você dá uma olhadinha nesse exemplo eu vou selecionar o domínio gratuito vou clicar em continuar e aqui você vai colocar algumas informações do seu site você vai personalizar a URL você vai colocar aqui uma descrição do seu site isso aqui é legal para os motores de busca Google Bing Yahoo basicamente é isso colocou as informações Você vai clicar em publicar o site ele vai ser preparado e vai ser publicado a ferramenta Vai disponibilizar o link para que você acesse aí o seu site já está aparecendo aqui ó seu site está disponível esse aqui é o URL que você vai compartilhar então vou clicar aqui em copiar vou abrir uma nova guia e tá aqui é a nossa o nosso site né com os menus funcionando bonitinho quando eu clico aqui também direciona look um tudo mais beleza show de bola Tá tudo funcionando agora a gente vai para a parte 3 que a parte do link de pagamento né Como que você faz isso ah um detalhe que eu esqueci de comentar com vocês a opção de utilizar o domínio personalizado seu site. com.