Fundamentos do design de sites no Canva

1. Boas-vindas ao curso de design de sites do Canva: Olá e bem-vindo a esta aula em que você aprenderá a criar um site no Canva Nesta aula, vou guiá-lo pelos elementos básicos da criação de um site simples e também exploraremos diferentes designs analisando outros sites em busca de inspiração. Mostrarei como conectar seu site ao seu próprio nome de domínio personalizado, dando um toque profissional. Essa aula é perfeita para quem quer criar um site simples no Canva, seja para um portfólio ou uma marca pessoal Se você deseja criar um site complexo e altamente técnico, o Canva pode não ser a melhor escolha para você Mas se você quiser criar um site rápido, fácil e gratuito, com um layout estilista, essa aula é para você Então, junte-se a mim nesta aula e vamos começar a criar seu site hoje. 2. Benefícios de ter um site: Olá, bem-vindo a esta seção onde você descobre os benefícios de ter um site. Ok, então vamos começar. Em primeiro lugar, um site faz com que sua marca pareça mais profissional e confiável Um site oferece profissionalismo e credibilidade com um design amigável, marca consistente, segurança SSL, mensagens claras, depoimentos e informações de contato acessíveis, enquanto a atenção aos detalhes mostra confiabilidade e compromisso com a qualidade credibilidade com um design amigável, marca consistente, segurança SSL, mensagens claras, depoimentos e informações de contato acessíveis, enquanto a atenção aos detalhes mostra confiabilidade e compromisso com a qualidade. Vejamos o segundo ponto, mostrando projetos como Muitas pessoas apresentam seu trabalho como portfólios on-line, que é inestimável quando se candidatam a cargos como designer gráfico Ok, agora vamos dar uma olhada em um exemplo de site de portfólio. Então você pode ver aqui, eu criei este site. Vou passar rapidamente para páginas diferentes. Portanto, a primeira página aqui tem o nome da pessoa e os links para seu trabalho e um link para contatá-la. A seguir, temos algumas informações sobre por que eles poderiam ser contratados e uma fotografia. Para seu portfólio, acredito que é importante ter uma fotografia com aparência profissional. Depois, temos uma seção para mim, que tem mais informações sobre as habilidades e conhecimentos da pessoa. Também adicionei uma imagem aqui, que é relevante para o papel de um designer gráfico. Depois, temos uma página que mostra seus diferentes trabalhos criativos Todos eles também podem ser links que podem ser vinculados a outras páginas que exibem o trabalho com mais detalhes. Então, descendo, temos uma página sobre experiência profissional. Portanto, se você quiser criar um site de portfólio, é importante mostrar a experiência profissional anterior. Se você tiver imagens de locais de trabalho anteriores, você também pode colocá-las aqui E então temos uma página sobre serviços. Então, isso fala sobre as diferentes habilidades e serviços que você pode fornecer. Depois, temos uma página sobre habilidades. Então você pode ver aqui que temos esses ícones sobre diferentes softwares, que torna o design um pouco mais interessante. Se fosse apenas um texto, talvez não parecesse tão divertido e criativo quanto ter os ícones aqui. E então temos uma seção de hobbies e interesses. Isso adiciona um pouco de personalidade ao site e pode fazer com que a pessoa pareça amigável e acessível E então temos uma cotação. Achei que isso faria com que o site parecesse um pouco mais interessante e também faria com que a pessoa parecesse profissional e trabalhadora com essa citação Então, na parte inferior, temos a seção de contato. Então, aqui eles podem clicar no contato, será direcionado para um formulário de e-mail, e também temos o número de telefone, site, e-mail e endereço. Também adicionei esses ícones aqui para tornar o design um pouco mais interessante. E na parte inferior, adicionei alguns ícones de mídia social que podem ser vinculados às suas contas de mídia social. Portanto, se for seu site de portfólio, é importante adicionar sua criatividade ao seu site, projetá-lo como quiser e adicionar seu próprio sabor e estilo. O terceiro, ajudando você a coletar e-mails de clientes. Um site ajuda nos negócios on-line coletando e-mails de clientes para enviar promoções e aumentar as vendas de produtos. O quarto ponto, os sites de comércio eletrônico ajudam nos pagamentos on-line Um site de comércio eletrônico facilita os pagamentos on-line, permitindo que os clientes comprem produtos a qualquer hora e em qualquer lugar Por exemplo, oferecer várias opções de pagamento como pagamento na entrega, cartões de crédito e débito e carteiras digitais Outro benefício de ter um site é evitar o alto custo do aluguel de lojas. Evite aluguéis caros de lojas exibindo e vendendo produtos em seu site, economizando dinheiro Além disso, um site reduz a necessidade de pessoal extra, permite que você gerencie tarefas por conta própria, reduzindo a necessidade de pessoal adicional e economizando custos de desemprego. Em seguida, os sites podem se vincular a outras plataformas. O site pode se vincular a outras plataformas ou sites, incluindo plataformas de mídia social como Facebook, Instagram, X, YouTube e serviços como o Google Maps. Por exemplo, essa foto mostra a foto de um site contendo todas as informações de contato. O próximo benefício é receber o pagamento integral com seu próprio site de comércio eletrônico Com seu próprio site de comércio eletrônico, você mantém o preço total das vendas, como em plataformas de terceiros, nas quais deve compartilhar uma porcentagem de seus ganhos Por exemplo, a imagem à esquerda é de um site de café mostrando sua própria plataforma, ou a imagem à direita mostra as taxas do vendedor da Amazon, incluindo taxas de indicação, taxas de fechamento e taxas administrativas de reembolso Ok, então esse é o final deste vídeo em que analisamos os benefícios de ter um site. Espero que você tenha achado este vídeo útil. Obrigado por assistir, e eu vou ver na próxima. 3. Coisas importantes para saber ao criar um bom site: Ok, agora vamos dar uma olhada em coisas importantes que você deve saber para criar um bom site. Antes de tudo, recomendo entender UX e UI. UX, que significa experiência do usuário, se refere à experiência do usuário criada ao interagir com um produto ou site, foco na facilidade de uso, satisfação e acessibilidade UI, que significa interface do usuário, refere-se ao design e elementos interativos, como botões, cores e layouts, que tornam a interface visualmente atraente e fácil de usar Os esforços combinados de UI e UX criam uma experiência de usuário suave e envolvente. Um aspecto importante da criação de um bom site é que ele deve ser responsivo Os clientes agora preferem informações em tempo real devido às mudanças de comportamento Por exemplo, considere dispositivos como smartphones e tablets. Um bom site deve aprimorar a experiência do usuário exibindo conteúdo de tamanho adequado em todos os dispositivos. O segundo ponto é projetar o site para ser limpo e fácil de entender. Evite usar muitas cores e mantenha um tom consistente em todo o site. Escolha cores que reflitam a essência do seu negócio. Por exemplo, se sua empresa é uma loja de plantas e verde é a cor da sua marca, certifique-se de que o site incorpore verde Por exemplo, este site aqui usa verde escuro, verde claro, cinza escuro, branco e creme Essas cores se complementam bem e enfatizam o foco da empresa nas plantas ao incorporar tons de verde Ok, então vamos dar uma olhada neste site, que é patch plants.com Então você pode ver aqui que este site usa essa cor verde na parte superior. Também temos essa cor branca e creme, e também temos o logotipo da empresa aqui no canto superior esquerdo. Ao descer, podemos ver que há muitas imagens das diferentes plantas oferecidas neste site. E você também pode ver que há esse botão de seta aqui, que tem a mesma cor verde. Ao descer, há mais fotos de plantas. E, novamente, os botões têm a mesma cor verde. Então descendo, podemos ver que esses botões aqui têm a cor cinza escuro. E então, na parte inferior, temos esse mais quente. Esta foto usa a cor cinza escuro. Há também essa parte inferior de inscrição verde. Depois, há uma seção aqui que tem links para diferentes partes do site que usam essa cor branca aqui, então ela se destaca no fundo cinza escuro. Então, temos os links de mídia social aqui embaixo. Vamos dar uma olhada no próximo exemplo. Isso é twinings.code.uk. Essa marca tem como objetivo transmitir luxo, que é branco, usa ouro e é marca O site apresenta tons de branco e creme com detalhes dourados nos botões Vamos dar uma olhada no próximo exemplo, que é walkers shortbread.com A marca tem como objetivo mostrar o estilo tradicional da Escócia, é por isso que usa preto e vermelho para evocar o icônico Você pode ver aqui que esse botão também usa uma cor amarela escura. Depois, descendo, você pode ver mais desse design de tartan, que usa as cores preto e vermelho, que é um padrão escocês muito tradicional E podemos ver o mesmo padrão aqui nesses botões. Depois, descendo, podemos ver mais dessas imagens abreviadas Depois, descendo, você pode ver que temos essa coleção de fotografias. Isso faz com que a marca pareça muito antiga e tradicional. Então temos essa imagem aqui, que incorpora uma tela curta Na parte inferior do site, também temos esse design de tartan Ok, agora vamos continuar. Use fontes fáceis de ler. Por exemplo, se seu site for para clientes mais velhos, verifique se o tamanho da fonte não é muito pequeno. A fonte dos nomes dos produtos no site deve estar em negrito para chamar a atenção. Lembre-se de verificar como suas fontes aparecem nas visualizações de desktop, telefone e tablet para garantir que elas sejam exibidas corretamente. Use ícones para tornar o site mais envolvente, pois eles são mais atraentes do que usar apenas texto Por exemplo, use um ícone de casa para navegar até a página inicial, um ícone de telefone para exibir informações de número de telefone, um ícone de envelope para representar informações de e-mail e um ícone de alfinete para indicar detalhes de localização ou endereço Em seguida, use fotos de alta qualidade no site, garantindo que os tamanhos dos arquivos não sejam muito grandes. Além disso, esteja atento às questões de direitos autorais. Por exemplo, a foto de fundo à esquerda é uma imagem de alta qualidade e a fotografia à direita também é uma imagem de alta qualidade, fazendo com que o site pareça mais profissional e confiável Cada tópico deve incluir todas as informações e categorias relevantes, facilitando a localização do que você está procurando. Por exemplo, a foto à esquerda é do site da Sony, que tem categorias como fones de ouvido, câmeras, lentes, TVs, barras de som e telefones celulares Quando você clica em Lentes, ela exibe uma página como a imagem à direita, mostrando todas as lentes disponíveis Além disso, há uma barra lateral à esquerda que permite aos usuários explorar mais opções. Esse design ajuda a manter o site limpo e fácil de usar. seguir, estão os principais elementos a serem conhecidos antes de criar um site. Conhecer os principais elementos de um site é essencial para garantir que ele seja fácil de usar, funcional e consistente. Isso melhora a navegação, aprimora a experiência do usuário e garante a acessibilidade, contribuindo para o sucesso geral do site Criar um site no Canva é simples, mas carece de funções avançadas, como processamento de pagamentos ou menus suspensos vinculados a outras páginas Ok, então esse é o fim desse vídeo. Analisamos coisas importantes que você deve saber para criar um bom site. seguir, veremos os principais elementos de um site que você deve conhecer, que abordaremos no próximo vídeo. Obrigado por assistir, e nos vemos lá. 4. Elementos principais de um site que você deve conhecer: Ok, agora vamos dar uma olhada nos principais elementos de um site. Você deveria saber. Então, vamos começar. Vamos agora discutir os componentes essenciais do design do site, começando pelo cabeçalho. O cabeçalho geralmente está localizado na parte superior de uma página da Web e contém elementos essenciais, como logotipo, marca, botões de login ou inscrição, barra de pesquisa e, às vezes, links de navegação Por exemplo, aqui estão três designs diferentes. No primeiro exemplo, temos um logotipo seguido por botões para a página inicial, sobre nós, blog e galeria, além de uma barra de pesquisa O segundo exemplo é muito parecido, mas usa botões de ícones, o que pode tornar o design mais atraente visualmente Por exemplo, um ícone humano é usado para bloquear, um ícone de carrinho de compras representa um carrinho e um ícone de lupa é usado para pesquisar No terceiro exemplo, há três linhas à direita, indicando a visualização móvel de um site responsivo Esse design acomoda o espaço limitado da tela de um telefone, garantindo um layout fácil A seguir, vamos dar uma olhada na barra de navegação. Uma barra de navegação ou barra de navegação é um menu no site que ajuda os usuários a acessar facilmente diferentes seções ou páginas por meio de botões ou links Por exemplo, a imagem à esquerda mostra uma visualização por telefone de uma barra de navegação projetada para dispositivos móveis, enquanto a imagem à direita exibe uma barra de navegação conforme ela aparece em um desktop Esta imagem é da loja Clove and ***.com. Aqui vemos um indicador de subcategoria para a Navbar. Esse recurso facilita que os usuários vejam onde estão no site e voltem para seções mais amplas, se necessário. Melhore a experiência do usuário reduzindo a confusão e simplificando a navegação Por exemplo, nesse caso, clicamos em Início, selecionamos a categoria feminina, seguida por rosto e beleza e, finalmente, maquiagem O indicador de subcategoria exibe o caminho que você percorreu nas categorias do site Em seguida, temos o FUTA. O FUTA está localizado na parte inferior de uma página da web e fornece links e informações adicionais, como detalhes de contato, links importantes, contas de mídia social, links importantes, contas de mídia social, assinaturas de boletins informativos Vamos dar uma olhada nesses exemplos. Para o primeiro exemplo, temos o site FUTA da Pizza Company Ele pode ver suas informações de contato, incluindo links para a linha do Facebook e seu número de telefone. Ele também apresenta links para download para o aplicativo, o aviso de direitos autorais e detalhes dos métodos de pagamento digital que eles aceitam, como Visa, mastercard e cartões de crédito O segundo exemplo é para o rodapé do cinema de São Francisco. Ele pode ver links para suas páginas de mídia social , incluindo Facebook, Twitter ou X, Instagram, YouTube e Line, bem como seu número de telefone. Também inclui DBD registrado, indicando que a empresa está oficialmente registrada no Departamento de Desenvolvimento de Negócios Além disso, o rodapé contém um aviso de direitos autorais. Você também pode identificar logotipos de SFW, SFX e SFC, que representam os diferentes tipos de cinemas Na parte inferior, há links clicáveis que levam a várias páginas do site O terceiro exemplo é o site central. Aqui você pode encontrar links de mídia social, incluindo Facebook, Twitter ou X, Instagram, YouTube e line. Há também uma caixa de captura de e-mail onde você pode inserir seu e-mail para assinar as últimas ofertas e tendências. Assim como nos outros exemplos, existem links clicáveis que direcionam você para outras páginas do site Além disso, o Futter inclui o aviso de direitos autorais, o endereço, número de telefone e e-mail da empresa Também há links para download que levam você à Apple App Store e à Google Play Store Podemos baixar o aplicativo deles. Em seguida, temos o menu suspenso. Um menu suspenso é um tipo de menu que revela opções adicionais quando você clica ou Isso ajuda a manter o site organizado, ocultando escolhas desnecessárias até que elas sejam necessárias Em seguida, temos a barra lateral. Uma barra lateral é uma seção vertical de um site, normalmente posicionada à esquerda ou à direita Isso não ocupa espaço na área de conteúdo principal. Ele pode conter informações adicionais ou links de navegação. Os diferentes tipos de barras laterais incluem barra lateral estática, barra lateral grossa, barra lateral dobrável e barra lateral deslizante A barra lateral estática é uma aba que permanece fixa no lado esquerdo ou direito. Conforme o usuário rola para cima ou para baixo, a guia se move junto com o conteúdo A barra lateral fixa é uma guia que permanece em uma posição fixa, mesmo quando o usuário rola para cima ou para A guia permanece parada e não se move. barra lateral Collapsb é uma guia que aparece no lado esquerdo ou direito e pode se expandir ou contrair Esse recurso ajuda a manter o site limpo e organizado. A barra lateral deslizante é uma guia que aparece quando você passa o mouse sobre ela ou clica nela Esse recurso ajuda a manter o site limpo e organizado. Vamos dar uma olhada nesses exemplos. A primeira barra lateral é comumente usada em sites de compras, pois ajuda os usuários a pesquisar os itens facilmente por meio de categorias. Por exemplo, quando você clica em Olhos, ele se expande para mostrar itens relacionados à maquiagem I, como delineador, rímel Esse tipo de guia é chamado de barra lateral dobrável. Em alguns sites, quando você clica em uma categoria , outras entram em colapso automaticamente. No entanto, em outros sites, as categorias permanecem abertas e não entram em colapso quando você seleciona outra. A segunda imagem é do Google Drive. Essa barra lateral aparece no lado esquerdo do site e é uma barra lateral fixa, que significa que ela permanece no mesmo local mesmo quando você rola para baixo Quando você clica em Meu Drive, ele se expande para mostrar mais pastas Se essas pastas contiverem subpastas, a barra lateral exibirá camadas adicionais conforme necessário Também é uma barra lateral dobrável, mas, diferentemente do outro exemplo, ela não fecha a seção anterior quando você clica em vários itens A última imagem também é do Google Drive, mas desta vez, a barra lateral está no lado direito. Inicialmente, a barra lateral exibe somente ícones. Quando você passa o mouse sobre um ícone, o texto aparece e selecioná-lo revela mais informações Além disso, essa barra lateral inclui um painel lateral oculto no canto inferior direito, conhecido como barra lateral deslizante A seguir, vamos dar uma olhada nos botões. Os botões são elementos interativos nos quais os usuários podem clicar ou tocar para realizar tarefas específicas. Eles são essenciais para ações como envio de formulários, navegação e outras funções. Esta imagem mostra exemplos de diferentes tipos de botões, incluindo aqueles com cores variadas ou apenas texto, todos clicáveis e direcionam você para Em seguida, temos acordeões. Acordeões são elementos da interface do usuário que controlam o conteúdo exibido em um site, ocultando e revelando seções diferentes Eles são úteis para organizar grandes conjuntos de informações relacionadas, como manuais ou perguntas frequentes Normalmente, somente uma seção pode ser expandida por vez com a seção expandida anteriormente desmoronando quando uma nova é aberta Em seguida, temos uma caixa de entrada. Uma caixa de entrada é um campo de texto de uma única linha que permite aos usuários inserir texto. É comumente usado em formulários para entrada e informações, como nomes, endereços de e-mail e termos de pesquisa. Em seguida, temos a área de texto. Uma área de texto é um campo de entrada de várias linhas que permite aos usuários inserir textos mais longos, como notas, comentários ou informações detalhadas É comumente usado em formulários em que é necessária uma entrada mais extensa. Em seguida, temos o Custom Select. A Seleção personalizada é uma caixa de entrada com um menu suspenso que oferece recursos adicionais, como opções pesquisáveis e recursos de seleção múltipla É um estilo que combina com o design geral do site. Depois, há o chatbox. Uma caixa de bate-papo é uma pequena caixa quadrada na qual os usuários podem clicar para selecionar ou desmarcar uma opção em um formulário ou Ele permite várias seleções com uma marca de bate-papo aparecendo quando uma opção é escolhida Em seguida, estão os rádios. Os botões de rádio são pequenos botões circulares que permitem aos usuários selecionar uma opção de uma lista em um formulário ou página da web Somente um botão de rádio pode ser selecionado por grupo por vez. Depois, há interruptores. Os interruptores são botões de alternância em sites e aplicativos que funcionam como interruptores de luz, permitindo que os usuários liguem ou desliguem recursos Eles são comumente usados para configurações ou preferências e fornecem uma indicação visual clara do status atual. Depois, há a entrada de arquivo personalizada. Uma entrada de arquivo personalizada é um campo estilizado de upload de arquivo que permite aos usuários selecionar arquivos de seus dispositivos A primeira imagem mostra diferentes estilos de entradas de arquivos personalizados Quando você clica em Escolher arquivo, uma janela é exibida permitindo que você selecione um arquivo do seu dispositivo, conforme exibido na imagem à direita. A seguir, vamos falar sobre validação. validação é o processo de garantir que a entrada do usuário atenda às especificações exigidas. Envolve a verificação de formatos adequados , campos obrigatórios e valores aceitáveis, os quais contribuem para a segurança e a qualidade dos dados. O próximo são os indicadores. Os indicadores permitem que os usuários naveguem diretamente para um slide específico. Este exemplo é uma imagem do site da DJI, que usa indicadores para tornar o design do site mais envolvente Em seguida, estão os componentes modais. Um modelo é uma janela pop-up ou caixa de diálogo que aparece acima do conteúdo principal de um site. Geralmente, escurece o fundo para focar a atenção no modal, exigindo a interação do usuário para continuar Existem três seções principais no modal. Título modal, a seção que contém o cabeçalho ou título Corpo de texto modal, a seção que exibe o conteúdo principal, como textos, formulários e imagens Modal Futter, a seção para ações como os botões Salvar ou Aconselhar Por exemplo, você pode ter o título modal como arquivo de exclusão com o humor ou o corpo do texto dizendo: Tem certeza de que deseja excluir este arquivo? O modal Futter conteria dois botões, o primeiro rotulado como sim e o segundo rotulado como não. Em seguida, temos um álbum. Um álbum é uma coleção de imagens ou fotos exibidas juntas, geralmente de forma organizada e visualmente atraente Os usuários podem navegar por coleções de fotos relacionadas como imagens de eventos, vitrines de produtos e memórias Em seguida, vem a paginação. A paginação é um método de organizar o conteúdo em várias páginas em um web design Ele ajuda os usuários a navegar com mais facilidade e melhora o desempenho do site. O próximo é o alerta. Um alerta é uma caixa de mensagem que aparece em um site para chamar a atenção do usuário para informações, avisos ou confirmações importantes avisos ou confirmações Os alertas podem ser usados para várias finalidades como mensagens de sucesso, notificações de erro ou atualizações importantes. Vamos dar uma olhada nesses exemplos. A primeira imagem mostra um alerta que aparece quando uma senha digitada não atende aos critérios exigidos. A mensagem de alerta diz: Insira uma senha com pelo menos oito caracteres, incluindo letras maiúsculas e minúsculas O segundo exemplo de alerta aparece quando o registro é concluído, usando uma cor verde para indicar que o processo foi bem-sucedido. terceiro exemplo de alerta diz: confirme seu endereço de e-mail. Esse alerta aos usuários deve transmitir um senso de urgência, garantindo que você não esqueça Além disso, um bom site deve carregar e responder rapidamente. Um site de resposta rápida é essencial para reter usuários, melhorar as classificações de pesquisa, aumentar as conversões e garantir uma experiência positiva Isso aumenta a satisfação do usuário e contribui para o crescimento e sucesso de sua presença on-line Ok, então esse é o fim deste vídeo. Analisamos os principais elementos de um site que você deve conhecer. Então, espero que você tenha achado este vídeo útil, e eu vou ver no próximo. 5. Vamos criar um site no Canva — parte 1: Ok, nesta lição, vamos explorar como criar um site usando o Canva Há muitas maneiras de criar um site. Por exemplo, uma abordagem mais avançada envolve codificar você mesmo o site Você também pode usar construtores de sites pagos, que oferecem uma ampla variedade de recursos Também existem opções gratuitas, como o Google Sites ou o Canva, que permitem criar o site sem nenhum custo Lembre-se de que criar um site com o Canva é relativamente básico e oferece funcionalidades limitadas No entanto, é um excelente ponto de partida para iniciantes. Agora, vamos nos aprofundar e criar um site de exemplo para mídia divertida. Ok, vamos começar. Ok, agora vou fazer uma demonstração para mostrar como criar um site. Para este exemplo, vou criar esse site divertido feito de mídia. Vamos dar uma olhada rápida nisso agora. Então, depois de criarmos nosso design, podemos pressionar este botão de visualização aqui para visualizar nosso site. Também quero ver isso no celular, mas vou desmarcar a opção redimensionar no celular, que tenhamos o mesmo layout de design que temos no desktop Ok, agora vamos dar uma olhada na visualização da área de trabalho novamente e podemos rolar para baixo para ver as diferentes páginas. Ok, então é isso que vamos criar nos próximos vídeos. Também adicionei links para o site. Por exemplo, se eu clicar neste link aqui que diz, vá para o nosso canal no YouTube, vou criar um link para o canal do YouTube que se tornou divertido. Ok, então vamos criar este site agora. Então, no Canva, em modelos, eu digitei o modelo do site Então você pode ver aqui que temos muitos modelos de sites diferentes. Se você passar o mouse sobre alguns desses modelos, podemos rolar o mouse ou o trackpad para ver as Ok, eu gosto bastante do design deste, então vamos clicar nele e rolar para baixo para ver as diferentes páginas. Vamos clicar em Personalizar este modelo e isso abrirá esse modelo em uma nova guia. Podemos rolar para baixo para ver as diferentes páginas e, claro, podemos personalizar os diferentes elementos desse design, se desejarmos. Ok, então aqui está outro modelo que eu encontrei anteriormente. Acho que isso também poderia funcionar para o nosso site. Gosto do layout das fotos desse design. E aqui está outro também. Por isso, também gosto do layout e das cores. Por isso, recomendo examinar muitos desses modelos diferentes, que ajudarão a inspirar você a ter ideias para criar seu próprio site. Vamos dar uma olhada nesse modelo aqui. Este é realmente diferente. Mas assim, podemos clicar aqui para ver as diferentes páginas em vez de rolar Agora vamos clicar em personalizar este modelo. Quando abrimos esse modelo, não temos o botão de visualização. Só temos o botão Compartilhar. Portanto, isso pode não ser o mais conveniente, mas ainda podemos usá-lo para reunir algumas ideias de design. Vamos ver esse modelo aqui e você pode ver que temos o botão de visualização. O botão de pré-visualização pode ser muito útil, para que você possa ver como será a aparência do seu site. Por exemplo, vamos clicar aqui e rolar para baixo para ver o site. Ok, vamos dar uma olhada rápida em mais alguns modelos. Uma coisa que eu recomendo fazer é ter todos os textos do seu site em um documento. Então, isso pode ser um documento do Word ou um Google Doc, por exemplo. Então, aqui eu tenho um Google Doc que contém todos os textos que eu quero adicionar ao site. Ok, então vamos começar a criar o site. Vamos começar copiando esse título. Então, eu vou usar o design deste site, e vamos colar isso aqui. Vamos apenas redimensionar isso. E agora vamos adicionar a legenda Então, vou copiar e colar isso na caixa de texto abaixo Eu também quero ter um botão com texto, mas agora, ele está agrupado, então precisamos desagrupá-lo para ajustar o texto e a Ok, agora vamos arrastar esse texto acima da caixa. E agora vamos copiar e colar o texto do meu Google Doc. Mais tarde, farei disso um botão clicável. Ok, vamos mudar a cor para isso. Eu quero usar mais de uma cor amarela. Então, vamos tentar este. É muito difícil ver o texto aqui, então vamos mudar a cor do texto para preto. Agora você pode ler isso facilmente. Ok, agora eu quero adicionar uma linha. Então, nos elementos e na forma, vamos escolher uma linha. Agora vamos clicar no botão Estilo de linha aqui em cima, e eu quero deixar a linha um pouco mais fina, então vou diminuir o peso da linha Agora vamos arrastar isso para baixo para sublinhar a legenda. Vamos redimensionar isso e colocar isso no centro. E agora vamos tornar o texto da legenda um pouco maior. Ok, vamos apenas redimensionar a linha. E vou aumentar o peso da linha agora, pois aumentamos o texto da legenda Vamos aumentar o texto desse botão, pois temos um pouco mais de espaço, e vamos redimensionar e ajustar o título principal Ok, vamos realmente mudar a imagem agora. Então, vamos excluir essa imagem que temos aqui clicando nela e pressionando Excluir. Agora vou adicionar minha própria imagem. Então, vamos clicar em uploads e clicar em Carregar imagem ou vídeo Tenho todas as imagens que quero usar neste site, na pasta do meu desktop. Então, vamos localizar isso agora, e essa é a imagem que eu quero usar para o plano de fundo da página inicial Então, vamos selecionar isso e adicionar isso. Ok, vamos redimensionar isso para que preencha a página. Agora vamos mudar a camada, pois eu quero que ela fique atrás do texto e da parte inferior. Então, vamos clicar com o botão direito do mouse na imagem e ir para a camada e, em seguida, voltar para o centro. Agora podemos ver a forma do botão. Ok, vou mover essa linha um pouco para cima, e vamos clicar e arrastar sobre a linha de texto ou botão, e vamos arrastar isso para baixo. A razão para isso é porque eu quero adicionar o logotipo do Medium Made Fun acima aqui. Então, vamos clicar em uploads e fazer upload de uma imagem ou vídeo. Agora, na pasta da minha área de trabalho, vou adicionar o logotipo divertido feito pela mídia. Ok, vamos clicar para adicionar isso. E eu quero remover o plano de fundo. A ferramenta de remoção de fundo só está disponível no Canva premium Portanto, se você estiver usando uma versão gratuita do Canva, não poderá usá-la Mas neste curso, mostro uma alternativa gratuita para isso caso você não esteja usando o Canva premium Ok, agora remova o plano de fundo. Vamos redimensionar e reposicionar isso. Na verdade, quero adicionar uma forma por trás desse logotipo, para que o logotipo se destaque um pouco mais. Vamos clicar nos elementos e abaixo das formas. Eu vou escolher um círculo. Vamos reposicionar isso e mudar a cor. Quero usar a mesma cor amarela que tenho para o botão de visualização do curso. Ok, vamos redimensionar isso e clicar com o botão direito do mouse sobre isso e ir para a camada e, em seguida, clicar em Enviar para trás pois eu quero ter isso por trás do Vamos agora reposicionar isso. E você percebe que não podemos ver a cor amarela no logotipo tão bem, pois é muito semelhante à cor amarela do círculo. Então, vamos escolher uma cor amarela mais escura para que possamos ver o amarelo do logotipo com um pouco mais de facilidade Então, em cores sólidas, vamos selecionar essa cor amarela mais escura Para manter as coisas consistentes, vamos usar também a mesma cor para o botão de visualização do curso. No entanto, não estou muito feliz com essa cor exata. Então, vamos clicar nesse botão para adicionar uma nova cor, para que eu possa personalizar um pouco mais a cor. Ok, vamos mudar essa cor amarela. E vamos tê-lo por aqui. E você pode ver que temos o código de cores aqui. Essa nova cor deve aparecer na área de cores do documento, mas se não aparecer, você sempre poderá copiar e colar esse código de cores. Ok, então vamos usar a mesma cor para esse círculo. Ok, agora eu quero ajustar o brilho e o contraste dessa imagem de fundo. Então, vamos clicar nessa imagem e depois clicar em Editar. E agora clique em ajustar. Então, aqui podemos ajustar o brilho e o contraste. Então, vamos deixar isso um pouco mais escuro, diminuir o brilho e tentar com mais contraste Ajustar essa imagem permite que o texto se destaque, mas agora vamos adicionar alguns efeitos ao texto, que ele se destaque mais e pareça um pouco mais interessante Então, vamos clicar no texto e depois clicar nos efeitos. E agora vamos clicar no estilo de sombra. Vamos mudar a sombra para preta. E para isso, vamos ajustar o deslocamento e a direção. E vamos aumentar a transparência para 100 para que possamos ver isso mais claramente Ok, agora nossa página inicial está completa. Então, neste vídeo, analisamos modelos de sites e criamos nossa página inicial No próximo vídeo, continuamos construindo este site. Então, obrigado por assistir, e nos vemos lá. 6. Vamos criar um site no Canva — parte 2: Ok, então agora vamos continuar construindo este site. Então, anteriormente, adicionamos a página inicial e agora vamos adicionar outra página No modelo que estamos usando, temos essa página aqui. Obviamente, não quero usar essa imagem, então vamos excluí-la. Para isso, eu só quero ter uma pequena área com algum texto, então vamos realmente redimensionar esta página Vamos agora redimensionar essa caixa de texto e reposicioná-la. Vamos tornar isso ainda menor, então vamos arrastá-lo da parte inferior e agora vamos voltar aos nossos documentos e copiar e colar o próximo título. Uma coisa a mencionar é que eu recomendo nomear seu design apenas para manter as coisas organizadas Então, vamos clicar aqui para renomear isso. Ok, vamos redimensionar essa caixa de texto novamente. E vamos realmente tirar o negrito disso e torná-lo histático para que se destaque e pareça um pouco mais interessante Vamos tornar isso um pouco menor e, na verdade, mudar a fonte. A fonte que tenho em mente se chama Inter. Então, vamos escolher isso. Então, agora, toda a fonte está em maiúscula Então, vamos clicar nesse botão aqui, para que não fique tudo em maiúsculas. Então, é como o que eu tinha no meu documento. Então, nesta caixa abaixo, vou copiar e colar um texto do meu documento. Como você pode ver, há muito menos texto, então vou tornar isso muito maior. Vamos ver como fica o texto quando está alinhado no centro Então, vamos clicar nesse botão aqui, para que o texto fique no centro da caixa. Vamos reposicionar isso. Acho que esse texto parece muito mais equilibrado agora. Eu quero ter esse subtítulo em duas linhas. Então, eu vou pressionar Enter depois daqui, então é em duas linhas. Para isso, também, quero usar o Interfont. Então, vamos selecionar tudo pressionando Command A no Mac ou Control A no Windows e, em seguida, clicando em Fonte aqui. E, novamente, selecione enter. Isso parece muito mais consistente agora, pois está usando a mesma fonte. Vamos apenas aumentar o tamanho da fonte e também colocar esse itálico Vou ajustar a fonte do título e arrastar essa página para cima, que fique ainda menor e tenhamos uma área menor para o texto. Não quero ter uma página inteira para isso, mas quero exibir esse título e subtítulo E vamos garantir que isso esteja equilibrado e no centro. Agora temos nossa página inicial e essa área que criamos entre a próxima página Então, vamos agora trabalhar na próxima página. Então essa será essa área aqui. Para a próxima página, vou me inspirar nesse outro modelo. Eu quero ter algo parecido com isso. Então, eu quero ter uma imagem e um texto. Também é semelhante a este modelo. E vamos dar uma olhada em alguns dos outros modelos. Mas acho que esse aqui foi o melhor. Então, vamos criar algo semelhante a isso. Então, para isso, eu quero ter caixas de texto e imagens. Para o modelo de site em que estamos trabalhando, vou excluir essa imagem de fundo e também esse texto aqui. E para o plano de fundo, vou adicionar uma cor sólida. Vamos usar essa cor amarela que estamos usando antes. Eu também vou deletar tudo isso aqui. Então, vamos clicar e arrastar sobre isso e pressionar Delete. Então, para isso, quero criar um layout que mostre nosso curso e também nosso canal no YouTube. Então, eu tenho uma imagem aqui sobre o nosso curso. Então, vamos adicionar isso a partir da área de trabalho. Antes de fazer isso, vou adicionar um quadrado, e isso vai me ajudar a dividir a página em quatro. Então, vamos clicar e redimensionar isso, para que seja um quarto do tamanho da página Vamos agora clicar na parte inferior duplicada e eu vou colocar isso na parte inferior esquerda Vamos redimensionar esses quadrados novamente para que tenham exatamente um quarto do tamanho da página Ok, então esta página tem dois retângulos pretos e dois retângulos amarelos Vou apenas copiar e colar essa caixa de texto, e vamos usá-la para um dos quadrados Vamos apenas redimensionar e reposicionar isso. E para isso, vamos clicar no botão em itálico aqui, pois eu não quero ter esse itálico Portanto, é diferente do texto acima. Agora vamos voltar ao nosso documento e copiar e colar nosso próximo texto. Então, esta caixa de smoking fala sobre nosso curso. Agora vamos copiar e colar nosso próximo texto, que contém mais algumas informações sobre o curso. Vamos apenas redimensionar essa caixa de texto e reposicioná-la. Vou deixar o título em negrito, para que ele se destaque um pouco mais. Novamente, vamos redimensionar isso. Vou apenas mudar a cor, que ela se destaque do texto acima. Para isso, vou usar essa cor branca, mas poderia usar outra cor, para que ela se destaque um pouco mais. Mas, por enquanto, vamos usar essa cor branca. Na página inicial, vamos selecionar o botão e o texto e duplicar isso Agora vamos clicar e arrastar isso para nossa nova página, e agora vamos mudar a cor do botão. Vamos apenas mudá-lo para essa cor cinza. E também vamos mudar a cor do texto para branco para que possamos lê-lo com um pouco mais de facilidade. Vou apenas redimensionar essa caixa retangular cinza como um texto. Vou adicionar por mais tempo Vamos redimensionar essa caixa de texto e arrastá-la até aqui e redimensioná-la, e também vamos redimensionar esse retângulo cinza Portanto, cobre todo o texto. Vamos agora selecionar esse texto e a caixa cinza e agrupá-los. Então, podemos mover isso e os dois se movem juntos. Vamos manter pressionada a tecla Shift e selecionar as duas opções. E agora vamos redimensionar isso para que ele preencha um pouco mais esse retângulo amarelo Vou desagrupar essa caixa de texto aqui em cima e vamos mover a legenda um pouco mais para cima Agora, mantenha pressionada a tecla Shift, clique no título acima e, em seguida, arraste os dois para baixo. Agora, vamos arrastar o texto e o botão para cima também, para que o design pareça um pouco mais equilibrado. Ok, agora vamos adicionar uma imagem nesse quadrado preto. Lembre-se de que, anteriormente, enviamos esse design. Então, vamos redimensionar isso e adicionar isso a esse quadrado. No entanto, quero que esse visual seja um pouco mais interessante, então, na verdade, vou adicionar esse design a uma maquete Então, à esquerda, vamos até os aplicativos e vamos digitar a maquete E clique em Mockups. Então, aqui temos muitos modelos diferentes, então isso pode ajudar a tornar nosso design um pouco mais interessante Então, para isso, porém, eu quero tê-lo em um laptop. Então, ao lado da categoria de computadores, vamos clicar em CEO. Vou escolher um desses laptops. Acho que esse aqui parece bem interessante. Então, vamos clicar nisso. E agora você pode ver que nosso design apareceu neste laptop. Agora vamos clicar e arrastar para reposicionar e redimensionar isso. No entanto, não é do tamanho certo. Mas uma coisa que podemos fazer é duplicar essa forma de retângulo e depois arrastá-la Então, o retângulo preto cobre o design. Agora, vamos reposicionar essa maquete. Então, vou clicar com o botão direito do mouse nesse design de maquete e depois ir para a camada e depois para o centro das costas Então, vou deletar esse retângulo preto , pois não precisamos mais dele. Vamos mudar esse retângulo preto para a cor amarela que estamos usando em nosso design E vou redimensionar e reposicionar essa maquete para colocá-la Ok, eu acho que isso parece muito bom. Agora vou mudar essa caixa preta para uma das cores do nosso design de maquete Acho que essa cor cinza aqui parece muito boa. E agora vamos clicar nos elementos e digitar no YouTube. Então, para isso, quero falar sobre nosso curso no YouTube. Então, vou encontrar uma fotografia sobre o YouTube. Acho que esse aqui é adequado. Então, vou redimensionar isso e colocar isso em cima do retângulo inferior esquerdo Vamos cortar essa parte de trás para que fique do tamanho certo. Agora, clique e mantenha pressionada a tecla Shift e selecione todas as caixas de texto e a forma. E agora vamos copiá-los e colá-los e arrastá-los até o retângulo inferior direito Agora vou copiar e colar o próximo conjunto de textos do nosso documento. Antes de colar, vamos desagrupar isso. E agora vamos colar nosso título. Eu quero ter isso em duas linhas , pois na verdade não cabe em uma linha. Então, vamos pressionar Enter nesta caixa de texto aqui para colocá-la em duas linhas Ok, vamos apenas redimensionar e reposicionar isso. E agora vamos mudar a cor dessa caixa de texto para que possamos vê-la Portanto, temos algumas cores contrastantes aqui. No retângulo inferior direito, temos o fundo cinza com a caixa de texto amarela e no retângulo superior esquerdo, temos o fundo amarelo com a Portanto, isso adiciona contraste, mas também equilibra o design Também vamos mudar a cor da fonte para preto, para que você possa lê-la um pouco mais facilmente nesse fundo amarelo. Agora vamos copiar e colar o texto do documento na próxima caixa de texto Eu quero ter duas linhas do WhetsaysGraphic Design, e vamos pressionar Enter aqui, então está Vamos apenas redimensionar e reposicionar isso. E agora vamos também reposicionar caixa de texto e a Agora vamos mudar o texto na caixa. Então, vamos voltar ao nosso documento e copiar o próximo conjunto de texto. E agora vamos colar isso na caixa de texto da forma. Posteriormente, adicionaremos links a essas caixas. Ok, então essa é a próxima página deste site, e esse é o final deste vídeo. No próximo vídeo, continuaremos construindo este site, então obrigado por assistir, e nos vemos lá. 7. Vamos criar um site no Canva — parte 3: Ok, então agora vamos continuar construindo este site. Em um modelo aqui, temos essa página. Vamos dar uma olhada em outro desses modelos. Vamos dar uma olhada neste aqui. Então, eu quero ter algo parecido com isso. Então, para esta página, eu quero mostrar um portfólio, então eu quero mostrar algumas das diferentes coisas que fazemos e a mídia é divertida. Então, eu quero ter algumas imagens semelhantes a esse design aqui. Vamos dar uma olhada nesse modelo. Então, eu também quero criar algo assim. Ok, vamos voltar para a página em que estamos trabalhando e vamos mudar a cor do plano de fundo desta página. Então, vamos clicar nesta página e depois ir para colorir. E vamos experimentar algumas das cores dessas fotos. Podemos clicar em CA para ver todas as cores dessas fotos. Então, vamos experimentar alguns deles. Mas para isso, vamos realmente escolher nossa própria cor. Então, vamos clicar em Adicionar uma nova cor aqui e escolher nossa própria cor. Ok, acho que aqui é bom. Agora temos um pouco de contraste com a outra cor cinza. Vamos ajustar o tamanho dessa caixa de texto e colocar o texto no centro E agora vamos copiar e colar o texto do nosso documento e colar isso como título. Vamos mudar a cor para branco, que isso se destaque claramente na página. E vamos clicar e arrastar tudo isso agora e excluir isso. Vamos dar uma olhada em nosso outro modelo. Então, eu quero usar uma imagem semelhante a essa. Mas vamos dar uma olhada nos outros modelos, e eu quero ter um semelhante a este. Então, vamos copiar e colar isso em nossa página. Claro, vou mudar a imagem, quero ter uma imagem de tamanho semelhante a essa. Vamos apenas cortar e redimensionar isso, pois eu quero colocar oito deles nesta página Vamos copiar e colar esse design e adicionar outro. E lembre-se, eu quero adicionar oito. Então, vamos continuar fazendo isso. Agora vamos clicar e arrastá-los e movê-los para o centro, e vamos redimensioná-los e reposicioná-los Lembre-se, eu quero adicionar oito deles. Então, vamos abrir um pouco mais de espaço para mais aqui. E vamos clicar e arrastar sobre tudo isso. E agora vamos pressionar o botão duplicar. E agora você pode ver que temos oito deles. Vamos apenas reposicioná-los para que fiquem igualmente distribuídos. E vamos movê-los um pouco para cima. E também o título. Vamos criar um pouco mais de espaço, então vamos arrastar até aqui. E vamos mover essas imagens um pouco para baixo. E agora eu quero adicionar alguns botões abaixo. Então, vamos copiar e colar esse botão aqui, e vamos redimensioná-lo para que tenhamos um botão para cada uma dessas imagens Ok, vamos adicionar um texto a esse botão. Então, vamos voltar ao nosso documento e adicionar o próximo texto. Agora vamos copiar e colar isso. E vamos renomear a próxima caixa de texto. Deixe-me reposicionar isso primeiro. Vamos voltar ao nosso documento e copiar e colar o próximo texto. Agora vamos copiar e colar essa caixa, e também podemos usar um botão duplicado em vez de copiar e colar, se desejar Também podemos clicar e manter pressionada a tecla Shift e clicar em Mais para selecionar vários itens. Agora você pode pressionar esse botão de duplicação, e isso duplica essas quatro caixas Agora vamos arrastar isso para baixo das próximas quatro imagens. Ok, vamos adicionar o próximo texto, então vamos copiar e colar isso do nosso documento e do próximo. E novamente, para a quinta caixa. Depois, para a caixa de seis. Em seguida, sétima caixa. E a oitava caixa. Eu acredito que é importante ter todos os seus textos prontos antes de começar a criar seu site. Ok, agora vamos adicionar nossas próprias imagens e clicar em Carregar imagem ou vídeo. Aqui na área de trabalho, tenho minha próxima imagem que quero adicionar aqui. Agora vamos clicar e arrastar isso sobre a imagem. Vamos clicar em Carregar imagem ou vídeo novamente e escolher a próxima imagem. Vamos agora arrastar isso para a segunda imagem. Vamos apenas reposicionar isso e agora vamos clicar em Carregar imagem ou vídeo e adicionar a terceira imagem Novamente, vamos clicar e arrastar isso e reposicionar isso Agora vamos fazer o mesmo com a quarta imagem. Vamos apenas redimensionar e reposicionar isso porque queremos ter essas imagens E vamos fazer isso para a quinta imagem agora. Vamos redimensionar isso para que possamos ver um pouco mais desse livro Vamos girar um pouco, pois acho que ficará um pouco melhor Ok, vamos fazer o mesmo com as seis imagens. Não consigo ver todo o laptop aqui, então vou redimensioná-lo para que possamos ver mais do laptop E, neste exemplo, vou deixar essa imagem um pouco mais larga, pois ela ainda está sendo cortada do laptop Na verdade, vamos também tornar a imagem acima mais larga, para que fique equilibrada. Eu vou fazer isso com todas as imagens, na verdade, para que elas tenham o mesmo tamanho, porque pode parecer um pouco estranho se houver apenas duas imagens maiores do que o resto. Uma das melhores coisas sobre o Canva é que, quando você redimensiona uma imagem, ela mostra o tamanho exato Portanto, você não precisa adivinhar para ter certeza de que é do mesmo tamanho. Você pode ver por esses números que é do mesmo tamanho. Além disso, vamos fazer o mesmo com as caixas de texto abaixo. Vamos deixá-las um pouco mais largas para que correspondam ao tamanho das imagens acima. Também vamos garantir que o texto esteja no centro da caixa para que pareça equilibrado. R Vamos agrupar esse texto e a caixa porque está na posição correta. E se o agruparmos, isso nos impedirá de mover coisas por extensão. Portanto, atualmente não tenho imagens para web design ou design de currículo, mas isso é algo que eles adicionarão no futuro. Então, neste momento, este site é um trabalho em andamento. E lembre-se de que, se você estiver criando uma página ou site no Canva, sempre poderá voltar a ela mais tarde Você não precisa terminar tudo de uma vez. Ok, então essa é a seção de trabalho criativo ou portfólio do site. Se você tiver links para sites diferentes, sempre poderá vincular esses botões aqui, e mostrarei como adicionar links posteriormente. Ok, então esse vídeo acabou. Em seguida, continuaremos construindo este site. Então, obrigado por assistir e nos vemos lá. 8. Vamos criar um site no Canva — parte 4: Ok, agora vamos continuar trabalhando neste site. Em seguida, quero criar uma página Sobre nós. Vamos dar uma olhada em alguns dos outros modelos. Eu não estou muito interessado em nada disso para o que eu quero agora Vamos dar uma olhada no outro modelo. O mesmo vale para este. Realmente não há nada que eu queira aqui. E vamos dar uma olhada no outro modelo. Algo assim é muito bom, mas eu quero ter uma foto para torná-la um pouco mais pessoal. Como eu disse, quero que esta seja uma página sobre nós. Então, vou clicar, arrastar e excluir todos esses detalhes de contato e, na verdade, excluir essa imagem de fundo. Vamos clicar na cor aqui e vamos mudar a cor do fundo. Para isso, vamos escolher um fundo branco. Agora vamos adicionar outra página, e vou tornar essa última página muito mais curta, pois essa será a parte posterior que adicionarei mais tarde Vamos mudar a cor da foto para essa cor cinza e agora vamos criar a página Para nós. Para isso, quero ter uma caixa de texto, copiar e colar essa caixa de texto aqui Então, vamos copiar essa caixa de texto e colá-la em nossa página. Vamos mudar a cor porque a cor do texto é branca e não podemos vê-la no momento. Então, vamos mudar para preto. Não quero centralizar esse texto. Vamos clicar nesse botão aqui em cima, e agora o texto estará à esquerda da caixa. Ok, agora vamos voltar ao nosso documento e copiar e colar o próximo texto. Então, esse será o nosso título para esta página. Então, vamos copiar isso e colar aqui. Lembre-se de que você pode copiar com Control C no Windows ou o Command C Mac e colar com o Control V no Windows ou o Command V no Mac. Eu também quero ter isso em duas linhas. Então, vou pressionar Enter antes dessa palavra aqui. Vamos apenas reposicionar e redimensionar isso. E agora vamos adicionar uma imagem. Então, vamos clicar em uploads e depois fazer upload de uma imagem ou vídeo Agora vamos adicionar uma foto minha. Portanto, se você quiser ter uma foto sua em seu site, recomendo tirar uma foto profissional. Isso pode ajudar a aumentar a credibilidade e fazer você parecer muito mais profissional. Agora, quero adicionar outra caixa de texto Então, vamos clicar nesse texto da outra página e colar aqui. Novamente, está em branco, então vamos mudá-lo para preto. Eu também quero ter o texto alinhado à esquerda, então vamos clicar nesse botão aqui para que ele não fique mais centralizado Também quero ter outra caixa de texto, então vou pressionar o botão duplicar aqui para duplicar aqui Vamos agora ao nosso documento e copie e cole o próximo texto. Então, o próximo é meu nome. Eu só vou fazer isso um pouco maior. E também vamos deixar isso em negrito e itálico, para que se destaque e pareça um pouco diferente E agora vamos até o documento e copiemos o próximo texto. E vamos colar isso na próxima caixa de texto. Eu também quero ter esse itálico, para que ele se destaque e pareça um pouco mais interessante, mas não vamos usar negrito, então é diferente do texto acima Novamente, eu quero ter outra caixa de texto, então vamos duplicá-la Para o próximo texto, não quero que fique em itálico e quero que o texto seja muito menor, pois vou adicionar muito mais texto aqui Então, vamos até o nosso documento e copiemos o próximo conjunto de texto. E vamos colar isso na caixa de texto. Vamos apenas redimensionar e reposicionar isso. E eu quero ter essa caixa de texto alinhada com uma fotografia Para isso, quero que o texto seja espaçado. Então, vamos clicar no botão de alinhamento aqui em cima e escolher um alinhamento de texto espacial OK. Acho que isso parece um pouco mais equilibrado agora. E, novamente, vamos redimensionar e reposicionar esse texto. Vamos mover a imagem que fique um pouco mais equilibrada, e vamos redimensioná-la e reposicioná-la Portanto, esta é uma página bem simples, mas acho que parece bastante eficaz , bem projetada e equilibrada. Vamos arrastar o rodapé até aqui porque não precisamos de todo esse espaço vazio na parte inferior Vamos também reposicionar e cortar as laterais desta foto, porque temos um pouco de espaço morto na Ok, então isso é sobre uma seção. Em seguida, vamos criar um rodapé e adicionar alguns links, o que faremos no próximo vídeo Então, obrigado por assistir e nos vemos lá. 9. Vamos criar um site no Canva — parte 5: Ok, agora vamos adicionar um rodapé e adicionar alguns links para este site Então, aqui anteriormente, criamos essa seção de rodapé. Podemos arrastar para cima ou para baixo aqui para alterar o tamanho da página. Para esse rodapé, quero adicionar a caixa de texto. Então, vamos até aqui e encontrar a caixa de texto e copiá-la com o Comando C. Agora vamos colar isso e reposicionar isso Agora vamos voltar ao nosso documento, e aqui eu quero colocar as informações de direitos autorais do site. Então, vamos copiar isso e colar isso nesta caixa de texto. Vamos reduzir isso um pouco. E agora vamos adicionar alguns ícones. Aqui, quero adicionar alguns ícones de mídia social que podem ser vinculados a outros sites. Primeiro, vamos encontrar um ícone do YouTube com um link para o divertido canal de mídia do YouTube. Então, nos elementos, vamos digitar o ícone do YouTube. E vamos selecionar esse aqui. Eu também quero mudar a cor, então vamos clicar na cor, e eu quero mudar isso para branco para que combine com o texto abaixo. Obviamente, o ícone do YouTube é vermelho, mas acho que usar branco combinará muito melhor com esse design. Ok, vamos redimensionar e reposicionar isso, e agora vamos adicionar outro ícone Novamente, eu quero ter isso como um ícone circular, então vamos também digitar em círculo. Ok, esse aqui parece bom. E, novamente, quero mudar a cor disso para branco. Então, vamos clicar em cor e clicar em Branco novamente. Vamos clicar e direcioná-lo para o ícone do YouTube e redimensioná-lo para que possamos obter exatamente o mesmo tamanho Então, agora esses designs de ícones são muito semelhantes. Assim, podemos vincular esses ícones ao nosso curso e também ao nosso canal no YouTube. Vamos agora diminuir o zoom e dar uma olhada em nosso site. Portanto, temos uma página inicial, informações sobre nosso curso e canal no YouTube, depois temos uma seção de portfólio e sobre uma seção e um Futter Este é um site muito básico, mas se você quiser criar um site simples como esse, o Canva pode ser ótimo Se você quiser um site mais complexo, talvez queira usar algo como o WordPress ou outro criador de sites que tenha mais recursos. Mas, como eu disse, se você quer apenas algo simples, o Canva pode ser ótimo Ok, agora vamos adicionar alguns links. Então, para este botão aqui, eu quero adicionar um link para o curso. Então, aqui eu tenho um link para o curso no meu documento. E vamos clicar com o botão direito do mouse sobre isso e ir para Link. E agora podemos colar em nosso link. Então, quando as pessoas clicarem nele, ele irá para o nosso curso. Então você pode ver aqui que este é o nosso THLlink. Você notará que, depois de adicionarmos o link, ele sublinhou o texto e, em seguida, pressione o botão sublinhado não fique Agora vamos vincular esse botão aqui. Isso vai para o nosso canal no YouTube. Aqui temos o link para o nosso canal no YouTube. E, novamente, vamos clicar com o botão direito do mouse nesse botão , ir até Link e colar aqui. Eu também não quero que esse texto seja sublinhado, então vamos pressionar o botão sublinhado para que o texto não fique Ok, vamos adicionar alguns links aos ícones no Futter. Então, vamos selecionar esse ícone do YouTube aqui clicando nele. E agora vamos clicar com o botão direito do mouse e ir para Link. Novamente, vamos colar o link que vai para o canal do YouTube aqui e pressionar Concluído. Agora vamos fazer o mesmo com esse outro ícone. Vamos voltar ao nosso documento e copiar o link do curso. Então, vamos clicar com o botão direito do mouse sobre isso, ir para Link, colar isso e aqui e selecionar Concluído. Vamos fechar essa guia ao lado e dar uma olhada em nosso site completo. Também podemos visualizar isso pressionando o botão de visualização aqui. Vamos apenas desmarcar Incluir menu de navegação por enquanto. Você percebe que aqui embaixo temos essa caixa de seleção para Incluir menu de navegação Então, você pode ver aqui em cima que temos essas guias diferentes, na verdade não combinam com o nosso site Também podemos redimensionar isso para celular. E para o celular, temos o menu de navegação, se pressionarmos esse botão no canto superior direito. Então, o que queremos fazer agora é alterar o menu de navegação. Então, vamos fazer com que o menu de navegação corresponda ao nosso site. Então, vamos fechar essa prévia. Podemos alterar o menu de navegação pressionando as notas aqui embaixo. Então, para esta seção aqui, aprenda com especialistas. Vou copiar isso e colar isso no título da página das notas. Então, isso agora fará parte do menu de navegação. Então, vamos até essa outra página aqui onde eu exibo os projetos. E em notas, vamos nomear esta página como projetos. Agora vamos até a próxima página aqui, pois ela tem informações sobre o curso e o canal do YouTube. Também poderíamos chamá-lo de conteúdo ou cursos. Mas para isso, vamos chamá-lo de contato. E agora, se clicarmos na primeira página aqui, ela diz casa, e vamos deixar essa em casa. Ok, vamos fechar as anotações. E agora vamos clicar no botão de pré-visualização. Vamos passar para a visualização de desktop, e você pode ver agora que o menu de navegação corresponde às nossas páginas. Ok, então essa é apenas uma maneira muito rápida de criar um site no Canva Canvas website Builder é bastante básico, mas se você quiser criar um site básico , isso pode ser muito útil. Como eu disse, se você quiser criar algo mais complexo, talvez queira usar o Wordpress ou outro construtor de sites que tenha mais funções e recursos. Mas para um site como o que eu criei aqui, acho que o Canva pode ser ótimo Ok, então esse vídeo acabou. Analisamos a construção deste site. Então, espero que você tenha achado esta seção útil e nos vemos na próxima. 10. Como publicar seu site no Canva e vincular um domínio personalizado: Nesta lição, exploraremos como publicar um site usando o Canva gratuitamente, bem como publicá-lo com um URL personalizado ou por meio do Go Daddy e Ok, agora vamos dar uma olhada na publicação do nosso site do Canva Então, vou mostrar a você a via rápida de publicar seu site que usa um domínio do Canva e vou mostrar como usar um domínio personalizado que vamos vincular ao Go Daddy Se você quiser usar o domínio personalizado, ele estará disponível apenas para usuários do Canva Pro Ok, então primeiro de tudo, vou te mostrar a rodovia. Então, vou publicar esse design aqui com uma rodovia, que usa um domínio do Canva Então, tudo o que precisamos fazer é publicar o site aqui no canto superior direito, e eu recomendo verificar o redimensionamento no celular E para isso, também vou incluir a barra de navegação. Em seguida, para URL do site, digite o nome do seu site. Como eu disse, essa será uma URL do Canva, então será o que você digitar no site herem dot canva dot Então você não pode escolher nada, algumas coisas serão tomadas. Por exemplo, se eu digitar MMF, você verá que esse URL não está disponível Mas para digitar a mídia Made Fun, você pode ver que ela está disponível. Então lembre-se, é media Made Fun, dot my dot cava dot sit Então, vamos clicar no site publicado agora. E isso pode levar alguns instantes para carregar. E aqui vamos nós. Diz que nosso site agora está ativo. Então, podemos copiar e colar isso. E você pode ver que está ao vivo. E você também pode clicar em Exibir site aqui, e isso irá para o nosso site dotm dot cava dot Ok, vamos fechar isso por enquanto e vou mostrar como vincular esse próximo design a um nome de domínio GoDaddy Então esse é o outro design. E para este, vou vinculá-lo ao meu domínio GoDaddy Se você não tiver um domínio personalizado , isso não será relevante. E esse próximo método está disponível apenas para usuários do Cava Pro Então, eu tenho meu site godaddy aqui, e em Demins você pode ver que meu domínio Ok, agora vamos acessar um site publicado. Agora, na URL do site, vamos clicar neste botão Editar aqui. Agora vamos clicar em Obter um novo domínio. Então, podemos clicar aqui para usar nosso próprio domínio ou comprar um novo domínio. Para isso, porém, vamos usar nosso próprio domínio. E, como você pode ver aqui, temos esse ícone de coroa, o que significa que ele está disponível apenas para usuários do Canva Pro Como estamos usando o Canva Pro, vamos selecionar isso e clicar em Continuar Então, aqui podemos inserir nosso domínio. Lembre-se de que em Go Daddy, era mediamdfun.com. Então, vamos copiar isso e colar isso aqui. Agora vamos clicar em Continuar e agora precisamos nos conectar com o Go Daddy Então, vamos agora clicar em Login e Conexão automática. E agora diz conecte-se a tomdimadefun.com e altere os registros DNS do seu domínio Então, para isso, vou clicar em Conectar. Ok, agora diz mediumadefun.com. Agora é seu domínio do Canva. Então, vamos clicar em Fechar e agora está afundando nosso domínio É o que diz aqui que geralmente é feito em 20 minutos, mas pode levar até 72 horas em alguns casos. Também receberemos um e-mail quando estiver pronto. Ok, agora vamos clicar em Domínio de Hughes. E agora podemos ir até essa seta suspensa aqui, e podemos escolher nosso domínio gratuito ou podemos escolher nosso domínio personalizado aqui. Então, para isso, vou escolher nosso domínio personalizado. Também podemos incluir um subcaminho, se você desejar, e um subcaminho faz parte do URL que vem depois do domínio principal, normalmente usado para organizar o conteúdo dentro do Por exemplo, medmadfun.com slash Blog. Para isso, porém, vou deixar isso em branco. Também temos algumas configurações aqui onde podemos descrever nosso site. Então eu coloquei aqui: Vamos tornar o Learning Media divertido. Ok, agora vamos clicar em publicar site. E isso levará alguns minutos para carregar. Então, diz que agora seu site estará no ar em breve. Então, podemos clicar aqui para visualizar o site. Você pode ver aqui que não é o URL divertido feito pela mídia. Talvez precisemos esperar que isso seja lançado. Então, vamos copiá-lo sobre esse URL e colá-lo em uma nova guia. E você pode ver que ainda não está pronto. Então, todos nós precisamos esperar que isso seja transmitido. Ok, agora já passaram cerca de 12 horas e você pode ver que nosso site está ativo. Uma coisa a mencionar é que o nome do seu site em uma guia aqui na verdade será o mesmo do título do seu projeto no Canva Portanto, certifique-se de nomear seu projeto Canva adequadamente. Se você não tiver o nome correto, sempre poderá editar seu design e republicar seu site, e isso será atualizado como o nome do seu site Ok, então é assim que você pode publicar seu site usando o site gratuito my dot cava dot e também vinculando seu site Cava ao seu Go Dadi personalizado Então, espero que você tenha achado este vídeo útil, e eu vou ver o próximo. 11. Crie uma página de inscrição no Mailchimp e vincule-a ao seu site do Canva: Ok, nesta lição, veremos como vincular o Mel Chimp ao seu site do Canva para capturar clientes. Então, o que é Melhim? Melchim é uma plataforma de marketing projetada principalmente para marketing por e-mail Ele ajuda indivíduos e empresas a enviar e-mails para seu público e acompanhar o desempenho. Popular entre empresas de pequeno e médio porte. Também inclui recursos como a criação de páginas de destino. Neste vídeo, mostrarei como vincular o Mailchimp ao seu site Cava para capturar Com a configuração certa, você pode criar uma lista de e-mail para promover seus produtos ou serviços e manter comunicação direta com seu público. Ok, agora vou mostrar como criar um formulário de inscrição no Mailchimp e, em seguida, vinculá-lo ao seu site do Canva Então, agora estou no milchip.com e me inscrevi no plano gratuito A versão paga do Mailchimp oferece mais recursos e funções, mas vamos configurar isso usando apenas o plano gratuito Então, Mailchimp, você precisa configurar um público, e essa é uma lista de endereços de e-mail e nomes de pessoas que desejam se juntar à sua lista de e-mails Então, depois de configurar um público, vá até SignupFMS E agora vamos clicar em Criar um novo formulário. Portanto, um formulário de inscrição permite que os clientes insiram seus endereços de e-mail e também seus nomes, e isso será automaticamente adicionado ao seu público. Portanto, temos alguns tipos diferentes aqui. A mais fácil é uma página de destino de inscrição. Então, isso criará uma página de destino e, em seguida, poderemos vinculá-la ao nosso site do Canva Então, vamos clicar nisso. Então, vou chamar esse meio inscrição divertida e clicar em Continuar para o Builder Então, temos modelos diferentes aqui. Mas só para simplificar, vou clicar neste, que é aumentar sua lista. Mas se desejar, você pode escolher um desses modelos aqui. Isso pode ser um pouco mais estiloso, mas só para simplificar, vamos usar este aqui. Ok, agora podemos personalizar esse formulário de inscrição. Podemos arrastar caixas de texto dessa forma. E também podemos arrastar sobre a caixa de imagens e adicionar imagens, se desejar. Se você passar o mouse sobre a caixa, podemos clicar nessas quatro setas aqui e arrastar para reordenar ou clicar no ícone da lixeira Neste exemplo, vamos excluir isso. Na verdade, vou adicionar um logotipo aqui, para que, quando as pessoas clicarem nesse link, elas saibam que é parte da mídia Divirta-se, pois podem ver nosso logotipo. Vamos clicar no ícone Editar aqui e depois clicar em Carregar logotipo. Em seguida, clique em Carregar. E aqui eu tenho meu logotipo como um arquivo PNG. E agora vamos clicar em Abrir, e isso fará o upload desse logotipo. Obviamente, isso é muito grande, mas podemos ajustar o tamanho aqui. Mas vou tê-lo desse tamanho. Em seguida, podemos clicar em Salvar e fechar. Vou excluir essa caixa de texto que adicionei anteriormente Então, vamos clicar no ícone da lixeira e clicar em Excluir. E agora vou adicionar um título aqui. Então, vou entrar na nossa lista de e-mails e clicar em Salvar e fechar Em seguida, adicionaremos mais algumas informações aqui. Então, vamos clicar neste ícone de lápis aqui para editar essa caixa de texto Por isso, coloquei aqui seu nome e endereço de e-mail para serem adicionados à nossa lista de e-mails, onde você receberá e-mails sobre nossas últimas notícias e ofertas Ok, então eu vou coletar, salvar e fechar. E para isso, eu realmente quero adicionar o nome e o endereço de e-mail. Então, vamos clicar nesse botão Editar aqui. E você pode ver aqui que temos essas caixas de seleção para nome e sobrenome Portanto, acho importante capturar o nome ou pelo menos o primeiro nome, então você sempre pode adicionar o nome deles no endereço de e-mail para que pareça mais pessoal. Ok, este é um formulário de inscrição muito simples, mas acho que, neste exemplo, está tudo bem. Então, vamos clicar em Salvar e fechar e Salvar e fechar novamente. E então temos a próxima página aqui, e você pode ver aqui em Público e tags que os contatos serão adicionados ao media made fun, que é o público ou a lista que eu configurei anteriormente. Quando a pessoa digitar seu endereço de e-mail e nome, também haverá uma mensagem de confirmação. Podemos clicar em Editar design aqui para editar a mensagem de confirmação. Então você pode ver agora que é o mesmo formulário de inscrição, mas se você clicar no botão Editar aqui, podemos ver que diz aqui Depois que o formulário for enviado, envie aos visitantes uma mensagem de confirmação. Então, podemos atualizar nossa mensagem de confirmação aqui, se desejarmos. Eu acho que o padrão está bom. Você sempre pode mudar isso se quiser. Também podemos clicar em Visualizar mensagem de confirmação para ver isso aqui. Ok, está tudo bem. E vamos clicar em Salvando roupas. E agora vou publicar este formulário de inscrição. Então, vamos clicar em Publicar aqui. E então você pode ver aqui que temos nosso URL. Então, vamos clicar com o botão direito do mouse sobre isso e ir para Copiar. E agora vamos voltar à nossa página do Canva. Então, publicamos este site anteriormente, mas se editarmos esse design, precisaremos publicá-lo novamente, o que é bom. Então, vamos clicar em Editar design. Então, vamos adicionar uma nova página agora. Então, vamos clicar nesse botão aqui, adicionar página. E isso é um pouco grande, então vamos redimensionar isso. Em seguida, adicionarei uma caixa de texto clicável qual as pessoas serão enviadas ao Então, nos elementos, vamos adicionar uma forma. Vamos escolher esse aqui. E agora no texto, vamos adicionar uma caixa de texto. Então eu acabei de digitar Clique aqui para entrar em nossa lista de e-mails. Vamos selecionar todo o texto aqui e mudar a cor. Agora vamos mudar isso para branco e, em seguida, arrastar isso até aqui para que você possa ver esse texto. Agora vou clicar nesta caixa de texto aqui e depois clicar em E vou digitar Junte-se à nossa lista de e-mails para obter as últimas notícias e ofertas Ok, vamos colocar isso no centro e arrastar os dois para mover isso para baixo. E vamos deixar isso um pouco menor, selecionar todo esse texto aqui e mudar a cor para que ele se destaque um pouco mais. Vamos escolher o preto para este exemplo. Agora, vamos clicar com o botão direito do mouse nessa forma aqui e agora vamos para Link. Agora vou colar o URL do formulário de inscrição do chimpanzé macho. Ok, então vamos clicar em Concluído. Em seguida, pressione um novamente. Também vamos fazer o mesmo com o texto. Então, vamos clicar com o botão direito do mouse sobre isso e, em seguida, ir para Link e colar nosso URL aqui, pressionar Concluído e pressionar novamente. Eu também não quero que isso seja sublinhado, então vamos destacar isso e desmarcar On D Line. Então eu recomendo pré-visualizar isso para ter certeza de que funciona. E agora vamos até esse botão, envie um texto e clique nele. E você notará que ele irá para o nosso formulário de inscrição. Mas só para este exemplo, adicionei meu endereço de e-mail e meu nome. Ok, agora vamos clicar em Inscrever-se. E você pode ver que agora isso diz sucesso, você foi adicionado ao público. E agora, se voltarmos ao Mailchimp e abaixo da audiência, você pode ver aqui meu e-mail e meu nome foram adicionados Assim, quando alguém adicionar seu endereço de e-mail e enviar o formulário de inscrição, ele será adicionado ao público do Mailchimp Então, vamos voltar ao Canva agora e publicar este site novamente. Então, vamos clicar no site publicado aqui. E agora vamos clicar no site republicado. Novamente, isso pode levar alguns instantes. Ok, agora vamos copiar nosso URL aqui e colá-lo em uma nova guia. Então, aqui você pode ver que temos nosso link que vai para o nosso formulário de inscrição. Ok, então é assim que você pode vincular Mel ao Canva para ajudar a capturar e-mails do seu público Então, muito obrigado por assistir a este vídeo. Espero que tenha achado útil, e nos vemos na próxima. 12. Obrigada e adeus, + projeto do curso: Ok, então chegamos ao final desta aula. Muito obrigado por assistir e espero que tenha achado útil. Para o seu projeto de classe, gostaria que você criasse seu próprio site no Canva Em seguida, quero que você faça algumas capturas de tela do seu site e escreva um pequeno parágrafo sobre como você o criou e por quê Em seguida, publique isso como seu projeto de classe para que eu possa conferir seu site e ler sobre seu processo criativo. Então, obrigado novamente por assistir e, espero, ter visto outra aula