Crie banners para sua loja da Shopify usando o Canva

1. Introdução do curso: Bem-vindo à minha nova turma, criando banners para sua loja da Shopify usando o Canva. Você está pronto para levar sua loja da Shopify para o próximo nível? Nesta aula, você aprenderá a criar banners profissionais atraentes que ajudarão a aumentar as conversões e as vendas em sua loja da Shopify. Vamos dar uma olhada em outros banners do Shopify para obter inspiração e ideias. Em seguida, entraremos no Canva e criaremos nosso próprio banner personalizado do Shopify. Também mostrarei como exportar seu banner e adicioná-lo ao seu site da Shopify. Você aprenderá a usar o Canva para criar banners que se alinhem à sua marca e atraiam seu público-alvo. Eu vou te mostrar como adicionar texto, imagens e outros elementos aos seus banners. Ao final da aula, você terá um design de banner pronto para ser implementado em sua loja da Shopify. E você usou em seu site para promover um produto, eventos de venda ou até mesmo uma promoção. Participe da aula hoje e vamos começar a criar banners que ajudarão a aumentar as conversões e as vendas em sua loja da Shopify. 2. Olhando para outros Banners de lojas da Shopify para inspiração e ideias: Olá e bem vindo de volta. Neste vídeo, vamos dar uma olhada em alguns outros banners da loja Shopify para obter inspiração e ideias para nosso próprio design. Porque antes de começarmos a criar nosso próprio banner, é importante reunir inspiração e entender os princípios e as melhores práticas para criar banners eficazes. Como você pode ver aqui, abri o Pinterest e fiz uma busca por banners de lojas da Shopify. Agora podemos ver alguns exemplos aqui. No entanto, eu gostaria de chamá-los de banners. Algumas outras pessoas os chamam de sliders. Como você pode ver aqui, também pesquisei os controles deslizantes da loja Shopify. Eles são basicamente a mesma coisa, mas algumas pessoas usam apenas a palavra slider e outras usam a palavra banner. No entanto, não deixe que isso o distraia, porque eles são basicamente a mesma coisa. Então, vamos dar uma olhada em alguns exemplos. Agora, imediatamente, acho que esse aqui embaixo parece muito bom. Então, vou clicar em abrir aqui e podemos ver o banner desta loja. Portanto, este é um banner bem simples, basta ter um texto e um botão e uma imagem do produto à direita. Então, se eu rolar até aqui, veremos mais alguns exemplos. Este aqui, por exemplo, parece muito bom. Esta é a cozinha onde só temos panelas e frigideiras e é muito simples , mas também eficaz. Então, se eu voltar para a outra pesquisa no Pinterest, como você pode ver, foi aqui que eu pesquisei os banners de uma loja Shopify. Também podemos dar uma olhada nos exemplos aqui. Então, por exemplo, se eu começar clicando neste primeiro aqui, podemos ver que este é um banner da Black Friday. Este primeiro e o segundo também são para uma empresa de moda ou vestuário. E a terceira é uma oferta simples de venda de moda. Então, se eu rolar para baixo a partir daqui, também temos mais alguns exemplos aqui embaixo. Portanto, esses dois primeiros parecem muito bons primeiro é o banner da Black Friday, e o segundo é um banner à moda antiga . Só aqui. Você pode ver que esse é um estilo de design completamente diferente, é mais alegre e colorido, enquanto este tem o tema preto e vermelho da Black Friday. Finalmente, vou clicar aqui para que possamos dar uma olhada melhor. Porque esse é um estilo de banner mais avançado, por exemplo, este primeiro é mais um banner 3D. Você pode ver que isso tem produtos para a pele. O segundo é um banner de cozinha com alimentos e produtos de cozinha. E então temos mais produtos à base de beleza e depois um banner esportivo. E, finalmente, outro esgotamento da moda também. Portanto, temos muitos exemplos e ideias diferentes que espero que lhe dêem alguma inspiração para criar seu próprio banner. Acho que agora estamos prontos para abrir o Canva e brincar com os recursos do Canva para ver o que podemos criar para nossa própria loja da Shopify. Agora você pode querer criar algo completamente diferente do que eu crio. No entanto, isso seria apenas um exemplo para guiá-lo no processo de criação de um banner no Canva. Então, isso é tudo para este vídeo. Agora estamos prontos para criar nosso próprio banner no Canva. vejo na próxima. Obrigado por assistir e adeus. 3. Como projetar banners para sua loja da Shopify usando o Canva: Olá e bem vindo de volta. Neste vídeo, vou mostrar como criar banners para sua loja Shopify, assim como o que você pode ver no meu site aqui, usando o Canva. Então, vamos mergulhar direto nisso. Em primeiro lugar, vamos abrir o Canva, e agora vamos criar um novo design. Agora vou criar um design de tamanho personalizado, que será de 2.400 por 1.200 pixels. Portanto, isso pode variar dependendo do tipo de banner que você deseja criar. Mas é isso que vamos usar para este vídeo. Então, basta clicar em Criar, novo design. Vamos lá. Agora estamos prontos para começar a criar nosso banner para nossa loja Shopify. No banner que você viu na minha loja da Shopify há alguns segundos, ele foi dividido em duas seções. Eu tinha um texto à esquerda e uma imagem à direita. Então, para fazer isso, primeiro de tudo, vou adicionar a imagem à direita aqui. Então, vou adicionar um elemento de moldura quadrada para a imagem. Vou acessar os elementos e pesquisar. E então vamos clicar na moldura. Então, vamos encontrar uma moldura quadrada perfeita. Então esse aqui é bom. No entanto, tem uma borda branca, então essa não é a que queremos. Esse aqui é perfeito. Então, vamos editar nosso design. E então vamos torná-lo maior. E também vamos fazer com que tenha 1.100 pixels de altura e largura. Pronto, isso é perfeito. Então, isso é 1.100 por 1.100. Portanto, já temos a moldura adicionada. Agora vou fazer o upload de uma foto para arrastar para esta moldura. E como você pode ver, eu já enviei algumas fotos, então vou simplesmente arrastá-las para esta aqui. Em seguida, vou clicar duas vezes nele e me certificar de que está centralizado na moldura. Lá vamos nós. Agora, vou clicar na moldura novamente e me certificar de que ela esteja centralizada. Acho que, por enquanto, aqui estará quase certo. E agora estamos prontos para adicionar o texto à esquerda aqui. Então, o que vou fazer é adicionar elementos quadrados simples sobre os quais adicionaremos nosso texto. Então, vou simplesmente acessar os elementos e digitar em quadrado. Vamos lá. Portanto, esse primeiro quadrado é absolutamente perfeito. Agora vou mover o quadrado para o canto superior esquerdo. E vou segurar a tecla Shift e clicar e arrastar para ampliar o quadrado. E ao segurar Shift, ele fará com que a largura e a altura se fixem para que não sejam alteradas aleatoriamente. E para que possamos mantê-lo exatamente quadrado. E lembre-se de que queremos que seja 1.100 por 1.100. Lá vamos nós. Isso é perfeito. Agora vou alinhar os dois. E eu vou selecionar os dois e agrupá-los. Então eu vou mandar para os dois juntos também. Lá vamos nós. Então essa é a primeira parte feita. Agora eu quero mudar a cor do quadrado. Então, eu vou clicar nele e clicar no bloco de cores aqui em cima. E agora vou adicionar minha própria cor personalizada. Você pode adicionar qualquer cor que quiser. E você pode fazer o quadrado da cor que quiser. Claro, você pode comprar as cores da sua própria marca. E é exatamente isso que eu vou fazer. Então, vou simplesmente colar o código de cores aqui em cima. E eu vou clicar na cor que eu adicionei. Lá vamos nós. Não é totalmente branco. Como você pode ver. É um pouco diferente do fundo, que é exatamente branco. E não é exatamente o mesmo que o plano de fundo da foto Ivor. Nós adicionamos uma boa dinâmica a esse design. Agora estamos prontos para começar a adicionar nossos textos ao design do nosso banner. Então, vamos para o texto à esquerda aqui. E vamos simplesmente adicionar um título. Agora vou substituir esse texto e escrever 20%. E eu vou tornar o texto muito maior. Na verdade, nas grandes quantidades aqui em cima, vou simplesmente fazer o tamanho da fonte 270 pixels e pressionar Enter. Lá vamos nós. Agora você pode definir a fonte para ser o que você quiser. No entanto, vou usar a fonte league Spartan aqui. Agora vou fazer com que isso fique centralizado na caixa à esquerda, logo aqui. Para fazer isso, eu realmente vou ter que desagrupar esses dois elementos. E agora eu poderei centralizá-lo. Pronto, isso é perfeito. E agora podemos agrupar esses dois juntos novamente. Ok, então temos a parte principal feita. Agora, só temos mais algumas coisas a fazer e, em seguida, isso estará praticamente concluído. Então, primeiro de tudo, vou adicionar outro elemento quadrado. E eu vou fazer com que seja da mesma cor do fundo da caixa esquerda. Então esse é esse aqui. Agora, o que vou fazer com isso é colocá-lo na frente do texto. E eu vou cobrir a metade inferior do zero. Lá vamos nós. Acho que eu poderia diminuí-lo um pouco. Agora acho que isso adicionará um efeito interessante. E o que eu vou fazer é adicionar a palavra “ off” por cima desta caixa. Então, vou duplicar o texto. E eu vou cancelar. E, claro, habilite o modo maiúscula. E esse texto só precisa ter cerca de 70 pixels. Então, vamos remover os 200 e fazer com que sejam apenas 70. Agora vamos mover o texto para aqui de forma que fique na metade inferior do zero. E lá vamos nós. Eu acho que isso parece absolutamente fantástico. Agora, o óleo que vou fazer é adicionar os últimos textos que precisamos adicionar a esse design. Então, vou duplicar esse texto aqui. E eu vou torná-lo um pouco menor. Acho que cerca de 15 pixels. Também vou mudar a fonte para assistente extra light. E eu vou apenas mover os elementos do texto para cá. E aqui eu vou escrever código de uso. Verão na finalização da compra. Agora só queremos que isso esteja em uma linha. Simples assim. E vou colocar o código do cupom em negrito. Agora vou colocar isso abaixo da notícia sobre lá. E lá vamos nós. Criamos nosso banner. Eu acho que isso parece absolutamente fantástico. E, claro, você pode adicionar seus próprios estilos exclusivos ao seu banner. Mas eu acho que esse é um design muito legal. Agora você pode fazer o download e enviá-lo para sua loja da Shopify. No entanto, antes disso, vou mostrar como criar outro estilo desse mesmo banner. Então, o que eu vou fazer é duplicar esta página clicando neste ícone aqui para que não tenhamos que criar tudo de novo. E agora vou desagrupar esses dois elementos. E eu só vou selecionar essa foto aqui. Agora vou fazer com que seja um pouco menor. Acho que é bom. E eu vou trazê-lo. E então eu vou duplicá-lo três vezes. Agora vou colocar um à direita, um abaixo e outro aqui embaixo também. Só precisamos ter certeza de que tudo está alinhado corretamente. Lá vamos nós. Agora eu acho que essa lacuna no meio é um pouco grande demais. Então, na verdade, vou ter que torná-los um pouco maiores. Então, vou começar com este aqui. Acho que 540 poderia ser bom. Vamos ver como isso funciona. Vou duplicá-lo três vezes novamente. E eu vou alinhar tudo. Só precisamos ter certeza de que tudo está perfeitamente alinhado. Então esse aqui também. Ok, isso ainda não é perfeito. Vou apenas selecionar esses dois à esquerda e vou trazê-los um pouco. Lá vamos nós. Eu acho que isso parece absolutamente perfeito. Agora vou fazer os uploads novamente. E eu vou apenas arrastar algumas outras imagens para dentro. E, claro, queremos ter certeza de que todas as nossas fotos estejam centralizadas nas molduras das imagens. E, finalmente, esse aqui também. E lá vamos nós. Então, acabamos de criar dois banners diferentes do Shopify. São estilos semelhantes, mas também são diferentes. Então, este aqui diz 20% do verão do Código dos EUA na finalização da compra com a imagem de um imposto de balde à direita, ou qualquer imagem, você poderia adicionar qualquer foto de produto à direita. Então, isso permitirá que você se concentre em um produto. E então temos esse mostrador aqui embaixo, que é o que podemos usar para focar em quatro produtos diferentes. Então, agora o que vou fazer está vinculado ao nosso projeto. Vou simplesmente amarrar hoje os banners do Shopify. E para entrar. Agora, para baixá-los, vou clicar em compartilhar e baixar. Queremos baixar as duas páginas e depois clicarei no botão Download. Agora você só quer ter certeza de salvá-los no local certo no seu computador. E quando estiver pronto, clique em Salvar. Agora vou clicar em Mostrar na pasta. E como baixamos vários designs de uma só vez, ele nos deu um arquivo zip. Então, vou clicar com o botão direito do mouse e clicar em Extrair para banners da Shopify. Isso nos dará uma pasta com os designs que criamos. Agora vamos voltar à nossa loja Shopify e podemos enviar nossos banners para nossa loja. Então, vou clicar na loja online à esquerda aqui. E então eu vou clicar em personalizar. Antes de enviar nossos banners, vou remover esse bloco no meio. Então, vou deletar os textos no título. E então eu vou deletar esses dois botões. E agora, se eu clicar novamente no banner e desativar o contêiner, e também excluir a segunda imagem. Agora, precisamos fazer o upload dos banners que criamos. Então, na primeira imagem, vou clicar em Alterar e selecionar Imagem. Agora vou clicar em Carregar. E na pasta que acabamos de criar, vou selecionar os dois e clicar em Abrir. Agora, poderemos ver como elas aparecem em nosso site. Então, aqui estão os produtos individuais. Então, eles gastaram isso que nos permite focar em um produto e, em seguida, temos o outro aqui. E isso nos permite focar em quatro produtos separados. Portanto, escolha o banner que você deseja exibir em seus sites. Em seguida, clique em Selecionar na parte inferior aqui embaixo e em Salvar no canto superior direito aqui. Agora podemos sair do editor de páginas e agora estamos prontos para ver nossa loja e ver como ela fica com o banner que acabamos de criar. Ok, isso parece bom, mas ainda há outra coisa que teremos que mudar no editor de páginas. Então, vou clicar em Editar página inicial novamente aqui embaixo. E eu vou selecionar o banner da imagem. E vou fazer isso é habilitar essa opção aqui que diz adaptar a altura da seção ao tamanho da primeira imagem. Então, vou clicar nele e depois clicar no botão Salvar novamente. E agora podemos sair do editor e abrir nossos sites novamente. E, como você pode ver, isso agora parece muito, muito melhor, pois não está mais sendo compactado devido à forma como o banner foi configurado anteriormente. Então, agora vamos dar uma olhada na aparência do outro banner que criamos. Podemos editar a página inicial novamente. E eu vou simplesmente selecionar o outro banner. Então, clicaremos no banner, clicaremos em alterar e alterar a imagem. E clicaremos nesse aqui. Em seguida, vou para Selecionar, salvar e sair do editor e ver sua loja online. Agora, se eu atualizar esta página e pronto, agora podemos ver como é o primeiro banner que criamos. O banner que se concentra em um único produto individual. Então lá vamos nós. Usamos o Canva com sucesso para criar alguns banners de sites da Shopify com aparência absolutamente fantástica . Isso é tudo para este vídeo. Espero que tenha gostado e espero que tenha aprendido algo novo. vejo no próximo mais uma vez, obrigado e adeus. 4. Projeto do curso: Bem-vindo ao vídeo final da aula. Neste vídeo, discutiremos projeto da aula e como você pode colocar em prática tudo o que aprendeu nessa aula. O projeto da classe é criar um banner para sua loja da Shopify usando o Canva. O objetivo deste projeto é criar um banner atraente que ajudará a aumentar as conversões em sua loja da Shopify. Para concluir o projeto, você precisará seguir estas etapas. Primeiro, dê uma olhada em algumas outras lojas da Shopify para ver a aparência de seus banners e obter inspiração e ideias para seus. Em seguida, escolha um modelo ou comece do zero no Canva. Depois disso, cria um design de banner que se alinha à sua marca e atrai seu público-alvo. Adicione textos, imagens e animações, se quiser. E, finalmente, salve e exporte seu design. Depois de concluir o projeto, você terá um design de banner pronto para ser implementado em sua loja da Shopify e usado em seu site para promover um produto, venda, evento ou outra promoção. Eu adoraria ver seu Biodesign final, então fique à vontade para enviá-lo na seção de projetos desta aula. Se precisar de ajuda, não deixe de enviar uma mensagem. E lembre-se de que a prática leva à perfeição. E quanto mais você projeta, melhor você ficará. Então, obrigado por se juntar a mim nesta aula. Espero que tenham gostado e aprendido algo novo. E espero ver você em outro em breve. Adeus.