Domine a criação de sites no Canva — não é necessário programar

1. Introdução ao curso: Oi, todo mundo. Bem-vindo ao curso de web design do Canva Neste curso, você aprenderá como fazer um site completo do zero. Você aprenderá como usar conceitos de web design com o Canva, como criar os designs de layout com o Canva, como criar as informações da página inicial, adicionar o conteúdo das imagens e como adicionar botões especiais, como interagir com vídeos, como adicionar interagir com vídeos, como adicionar outro conteúdo de mídia Você também pode aprender como adicionar navegação como adicionar interatividade entre todas as páginas e como adicionar hiperlinks entre um site e outro No final, você aprenderá como adicionar páginas de contato, como adicionar o formulário de contato e como vincular seu ID de e-mail ao formulário de contato Ao mesmo tempo, você aprenderá como otimizar esse site para fins móveis e desktop. Para saber como agregar valores essenciais à marca, como adicionar as cores, a tipografia e outros elementos da marca , como colaborar com todas essas coisas com Vamos ver em nossa aula. 2. 01 Explore a interface de usuário do Canva: Oi. Bem-vindo à introdução ao Canva para design de sites Ao se inscrever no Canva pela primeira vez, você terá essa visualização do painel no início Como eu estava usando o Canva anteriormente, tenho meus documentos anteriores que estão presentes aqui Aqui, podemos ver que isso é chamado de Design recente. Todos os meus documentos recentes estarão presentes aqui. Essa será a página inicial do Canva. Vamos ver primeiro a interface desse Canva. Nessa interface, você pode ver, temos o menu aqui, posso clicar nesse menu e eu posso acessar todas as opções que tenho para este trabalho. Agora, depois desse menu, tenho a opção de criar. Você também pode criar novos documentos usando esses valores predefinidos Você deve ter a opção de novo documento em tamanho personalizado aqui. Além disso, no lado esquerdo, você pode ver que tenho a opção chamada casa. Esta é a página inicial. No momento, estamos na página inicial do Canva. Depois do Canva Home, tenho a pasta chamada projetos. Posso acessar os projetos e aqui posso salvar meus documentos em uma pasta diferente. Aqui você pode ver, eu já criei uma pasta que é produção de impressão. Se eu vou criar um design de site, vou criar uma nova pasta aqui. Eu clico neste anúncio novo e aqui eu escolho a pasta. Aqui vou adicionar o nome da pasta que é design ou design do site. Eu escolho essa opção Continuar. No momento, não quero compartilhar essas informações, essa pasta com mais ninguém, então não preciso escolher mais nada. Acabei de clicar em Continuar. Aqui você vê, eu tenho a nova pasta que é o design do site. Dentro dessa pasta, posso carregar todos os trabalhos de design que vou usar neste projeto. Dessa forma, temos todos os arquivos a serem gerenciados com essa categoria, que é projetos. Depois disso, temos a opção de modelos. Podemos acessar muitos modelos que estão disponíveis com o Canva Você deve ter a opção de marca, que só é útil e está disponível apenas para usuários profissionais. Podemos continuar sem isso, não precisamos disso de qualquer maneira. Eu tenho a opção chamada Canva AI. Com a ajuda do Canva A, posso produzir muitos designs, códigos e tudo mais Também veremos como podemos usar isso para criar sites. Depois disso, eu tenho os aplicativos. Aplicativos ou recursos adicionais disponíveis com a câmera. Em um site, em um navegador, temos o conceito chamado adiciona. No Firefox, temos os acréscimos. Em um Google Chrome, temos as extensões da mesma forma. Da mesma forma, temos muitos aplicativos adicionados com o Canva. Todos vocês podem acessar esses aplicativos com a ajuda dessa opção chamada aplicativos. Se você quiser pesquisar algum termo específico e precisar desse trabalho, você pode pesquisar aqui e acessar esse aplicativo específico dentro do Canva Aqui, eles forneceram muitos dos aplicativos famosos que estão disponíveis com o Canva Use todas essas coisas conforme necessário em nosso trabalho de projeto. Então, essas são, você sabe, a opção de menu que temos com esse trabalho do projeto Canva. Vou clicar em Início. Novamente, estarei em uma página inicial. Então, aqui temos a primeira área de banner. Mostra seus modelos de design e o Canva AI. Então, se você quiser pesquisar algum conteúdo que esteja disponível com os trabalhos do seu projeto, você pode acessar o UA design. Mas se você não tem nada, você vai criar algo novo. Você pode acessar os modelos e pesquisar as informações aqui. Tipo, vou pesquisar algo chamado site. Eu apenas digito a palavra-chave site e ela mostra o design da web, banner do site, o portfólio do site, o modelo do site. Todos os modelos baseados em sites que estão disponíveis com o Canva serão mostrados aqui Vou escolher o design desse site e você pode ver os modelos de site padrão estão sendo carregados. Você tem os designs de mídia social aqui e os sites de portfólio. Todos esses modelos estão disponíveis com o Canva. Você tem o Canva AI. Com a ajuda da IA do Canva, você também pode criar designs sem código Você verá isso nas próximas aulas. Vamos seguir em frente. Agora, novamente, chego a essa área de modelos. Em um modelo, você pode ver que, quando eu pesquiso aqui, tenho muitas sugestões. Eu posso escolher qual eu quero, posso ir mais longe com o mesmo. Essas são as opções que temos com a interface CanavauUser. Eu vou para a página inicial. Em uma página inicial, após essa opção de pesquisa, você pode ver que temos os valores predefinidos Começo com as planilhas do Canva, pois temos as planilhas do Google, temos o cachorro e as planilhas com o Canva Ter a opção de quadro branco para criar o design e o trabalho confiante para os alunos ou alunos Você pode criar apresentações, mídias sociais, trabalhos de edição de fotos, trabalhos de edição de vídeo, designs imprimíveis e sites Como vamos usar o processo de criação de sites com o Canva, vou usar essa opção para este curso Além disso, se você quiser criar algo novo além do valor predefinido, você pode escolher essa opção que é de tamanho personalizado Depois disso, você tem a opção de upload. Se você quiser fazer o upload de qualquer outra mídia que esteja disponível com o Canva, você pode usar essa opção de upload Você deve ter mais opções. Aqui, eles forneceram os famosos valores predefinidos. Se você quiser acessar mais do que isso, acesse essa opção adicional e ela mostrará mais categorias com a estrutura do modelo aqui. Agora, tão perto. Depois desses valores predefinidos, tenho o que há de novo recurso disponível com o Canva Todos os meses, o Canva atualiza seus recursos. Eles estão adicionando novos recursos a cada mês. No final de cada ano, eles conduzem o programa chamado Canva Create Durante esse programa que eles criam e atualizam, lançam grandes atualizações do Canva todos os anos Não perca isso e eu falarei sobre isso também nas próximas aulas. Depois do que há de novo, tenho os designs recentes. Você pode ver quais são todos os designs criei com o Canva, que estão disponíveis neste espaço Essa é a interface do usuário deste software Canva. Nas próximas aulas, veremos como podemos usar as outras coisas. 3. 02 Entenda os modelos e layouts de sites do Canva: Nesta lição, mostrarei como acessar o modelo de site do Canva Qual é a aparência do layout no site do Canva. Deixe-nos ver. No começo, chego ao topo deste banner e aqui vou amarrar o site. Eu apenas digito site e pressiono Enter. Ele carrega muitos modelos novos. Você pode ver isso. Você também pode criar um novo site em branco usando essa opção. Crie um site em branco. Quando você pesquisa neste local em si, você tem a opção chamada categoria. Eu só clico aqui. Aqui você pode fornecer o nome da categoria, como educação, portfólio e qualquer que seja a categoria necessária, você pode adicionar aqui. Além disso, você deve ter a opção chamada estilo. Eu clico no estilo que mostra se você precisa na forma de animação moderna ou simples, limpa, minimalista e maximalista Todos esses estilos estão disponíveis aqui. Com base na necessidade, você também pode escolher esse estilo. Por padrão, serão todos os estilos. Aqui também na categoria, por padrão, serão todas as categorias. Agora eu apenas cronometro a palavra-chave e pressiono Enter, ela carrega todos esses modelos. Você pode ver que esses modelos são modelos gratuitos. Não precisamos da conta profissional para acessar esses modelos. Mas esse é o modelo profissional. Você pode ver que eu só tenho o vídeo. Você verá como criar esses modelos usando o Canva nas próximas aulas Temos muitos sites gratuitos. Você pode navegar e ver as próximas páginas. Quando você passa o mouse, mostra o design das páginas e como os elementos estão sendo carregados dentro da página da web específica. Esses são os sites gratuitos que temos com o Canva. Vou carregar um site aqui, vou escolher este. Acabei de clicar nesse site. Ele mostra a prévia do site aqui e você pode rolar para baixo. Você pode ver o conteúdo que temos com esse modelo de site em cada página. É uma página completa. Você pode ver que esta é a página inicial. Depois da página inicial, temos outros detalhes aqui. Também no final, temos os detalhes de contato. Se quiser usar esse modelo, se quiser personalizá-lo, você pode escolher essa opção, personalizar esse modelo. Sobre isso, você pode ver quem criou esse modelo de design, que é o Canva Creative Studio Ele mostra a resolução e também resolução que temos com o design do modelo do Canva Agora eu escolho essa personalização deste modelo e você pode ver que o site estava carregando na minha página. Agora você pode ver que essa página inicial tem um fundo de imagem diferente. Depois disso, basta rolar para baixo. É assim que você precisa navegar em cada página. Aqui eu tenho as páginas, com o visual, a imagem e o texto Role ainda mais para baixo e mostra quais são todos os serviços que eles estão fornecendo. E aqui eu escolho esse é o conteúdo do texto. Você pode ver isso e esses são os gráficos, você tem esses retângulos na forma gráfica, você tem imagens Foi assim que eles construíram o design do site. No final, eles fornecem os detalhes de contato, ID de e-mail. Se você tiver contas do Facebook, Instagram e Twitter, poderá conectar essas informações aqui quando o usuário visitar o site e navegar por esta página de contato e clicar no ícone do Facebook que redirecionará para sua página e poderá acessar todas as informações que você forneceu nas páginas de mídia social É assim que temos a estrutura típica do site, os designs de modelos que estão disponíveis com o Canva 4. 03 Aprenda a criar uma conta no Canva e configurar um projeto: Nesta lição, mostrarei como podemos criar um novo documento de design de site usando o Canva Se você quiser se registrar ou se inscrever no Canva, você precisa usar as opções. Deixe-me te mostrar isso. Primeiro, você precisa visitar o pagcva.com. Depois de visitar o pagcva.com, você pode entrar ou se inscrever se for novo no Ao nos inscrevermos em páginas de mídia social, você deverá fornecer as informações de e-mail. Depois de fornecer suas informações de e-mail, você receberá essa interface para você. Depois de obter esta página inicial, na parte inferior, você pode ver que temos o ícone de notificação e o valor das configurações do perfil aqui. Eu clico nesse perfil e posso escolher qual deles está configurado. Quando eu escolho a configuração, ela mostra os detalhes do perfil aqui. Mostra o ID do e-mail, o contato, o nome, o que você forneceu e que finalidade você está usando essa conta do Canva Quando você se inscreve pela primeira vez, é para perguntar essas informações para qual finalidade você está usando o Canva Então, aqui você pode escolher a categoria com base em quem você é. Se você é professor, pode escolher professor e, se for estudante, pode escolher aluno. Se você vai usar isso para fins pessoais, você pode escolher pessoal. Sou professor, então escolho a opção de professor. Você também pode alterá-lo posteriormente e atualizá-lo. Você também pode escolher o tipo de idioma que você tem. Você pode escolher isso de acordo com sua necessidade. Agora eu escolho o Reino Unido inglês. Depois disso, você terá muito mais opções aqui, mas essas são as opções básicas que podemos oferecer quando você se inscreve no Canva Agora, novamente, chego a esta página inicial. Vou criar um novo design de site usando o Canva. Como mostro, quando vou ao design deste site usando esse banner de pesquisa, você também tem a opção Criar novo site. Mas diretamente desta página inicial, você pode escolher essa opção, que é o site Criar novo. Basta clicar aqui. Quando eu clico nele, você pode ver o novo documento separado que é aberto em uma nova guia. Esta é a página inicial Mas aqui você pode ver que o nome do documento é design sem título e o tipo do documento é site Ele mostra mais informações para criar seu site e mostra as informações da dica de ferramenta aqui. Você pode adicionar seções e também adicionar páginas. Deixe-me falar sobre essas coisas em nossas próximas aulas. O que é seção e o que é página. Anteriormente, eles não tinham grande diferença. Eles só têm as páginas, mas agora temos as seções e páginas. Veremos isso em nossas próximas aulas. Vamos ver isso um por um. Então, é assim que você pode criar um novo documento para criar seu trabalho de projeto com o Canva 5. 04 Identifique ferramentas de design essenciais no Canva: Oi, todo mundo. Nesta lição, vou mostrar quais são as principais ferramentas essenciais temos para criar o design do site no Canva Para fazer isso, basta adicionar uma nova página com esse modelo. Deixe-me mostrar como criar a página inteira em nossas próximas aulas. Aqui eu estava criando uma nova página. No seu lado esquerdo, você pode ver que temos muitas opções quando eu tenho essa nova página com o Canva Você deve ter as mesmas opções para as páginas existentes. No início, você tem a opção chamada elementos. Ao acessar os elementos, você pode ver que temos elementos, formas, botões e um gerador de imagens usados recentemente e um gerador de imagens Veremos isso nas próximas aulas, gráficos, bastões e questionários, adesivos, fotos, vídeos, gráficos, planilhas, molduras etc Todos esses elementos que você pode usar quando precisar para criar seu design com a página do Canva Um exemplo. Eu vou escolher as formas. Eu clico nessa forma de retângulo. Quando clico nessa forma de retângulo, ela foi carregada dentro desse desenho no ponto central Você deve ter a área de texto aqui para que eu possa digitar home e redimensionar esse texto específico Eu posso selecioná-lo, posso escalá-lo de acordo com minha necessidade. Então, isso é apenas um retângulo. Se você não precisa do texto, precisa apenas de um retângulo, pode usá-lo como um retângulo Pode aumentar a largura, a altura e você tem todas as funções de edição aqui no topo desta página do Canva Essa é a ferramenta retangular. Quando você seleciona, ele mostra automaticamente as opções de controle aqui. Mostra a escala. Mostra a escala a partir do canto. Se você deslocar o tiki, poderá reduzir igualmente e, se quiser girar, você tem uma opção separada aqui: você pode girar Da mesma forma, você pode manipular todos esses objetos, adicionar e manipular como quiser Para ter a propriedade de alteração de cor aqui, você pode escolher a cor e adicionar a cor desejada para o design. Agora, da mesma forma, vou para os elementos novamente. Você tem a opção chamada botões. Esses são os elementos padrão que temos para o design de páginas da web. Eu escolho C all. Eles forneceram seis designs de botões aqui. Você pode simplesmente adicioná-lo e usá-lo. Depois disso, temos um gerador de imagens. Você verá que em nossas próximas aulas, você tem os gráficos, pressione C todos. Podemos ver, por padrão, com as diferentes categorias, que temos muitos gráficos aqui. Se você quiser alguns gráficos novos, você pode pesquisar aqui, adicionar o nome do elemento e pesquisar. Eu apenas pressiono o botão Voltar, da mesma forma que faço as enquetes e questionários Se você quiser, basta clicar aqui e ele estará disponível na sua página da web. Você pode configurar tudo. Eu vou te mostrar essa coisa em nossas próximas aulas. Você tem as fotos, pode clicar lá e carregar as fotos, vídeos, gráficos, todas essas coisas dentro do Canva Cada elemento, o que você tem nesta área de trabalho, ao selecioná-lo, você tem as ferramentas e outras opções aqui. Você pode alterar a cor, alterar as propriedades desse trabalho de design do Canva Essas são as principais ferramentas e elementos essenciais que temos para o Canva com trabalhos de web design 6. 05 Pratique a seleção e personalização de um modelo: Nesta lição, mostrarei como personalizar um modelo de site do Canva Para fazer isso, venho aqui e vou escolher o termo exigido com uma categoria. Vou escolher um site. Este site é sobre comida. Acabei de digitar a palavra-chave site de alimentos. Pesquise aqui. Você pode ver que temos muitos resultados aqui e vou escolher um site aqui. Vou modificar isso de acordo com minha necessidade. Eu estava escolhendo esse. Eu só clico lá. Ele mostra a prévia. Eu rolo para baixo e simplesmente visito e vejo todos os designs de páginas. Agora eu escolho personalizar esse modelo. Sempre que você escolhe qualquer design de modelo, temos o design semelhante e os sites baseados em temas abaixo desse design. Então, se você quiser servir, você também pode servir e obter o que você precisa. Agora eu preciso desse, então eu apenas clico em personalizar este modelo, e ele estava sendo aberto. Agora eu quero personalizar isso de acordo com minha necessidade. Em primeiro lugar, quero mudar o nome deste documento do site. Eu posso mudar esse nome para site de comida. Com base no nome do restaurante ou hotel em particular, você pode mencionar o nome aqui. Eu apenas rolo para baixo. Você vê quais são todas as seções que temos com o Canva Na primeira seção, temos as informações básicas sobre o nome específico do restaurante e temos o slogan. Você pode mencionar o nome do seu restaurante com o logotipo aqui, se quiser. Há um elemento de imagem. Você pode ver que, se eu quiser acessar, posso clicar duas vezes lá. Você pode ver que temos o elemento imagem. Eu só clico aqui, Cancelar. Eu não quero fazer nenhuma mudança agora. Acabei de rolar para baixo e aqui temos uma seção separada. Tem origens diferentes. Você pode ver isso. Agora, eu vou até o topo. Esta seção é sobre esse restaurante em particular. Você pode ver que quando eu escolho esta seção, há um controle de transformação aqui. Usando isso, posso expandir ou reduzir a área específica da página da web. Com base na visibilidade com a visualização do navegador do monitor, ele pode escolher como você deseja. No entanto, você também pode reduzir se não quiser muito espaço e também pode aumentar. Isso nos ajuda a aumentar ou diminuir a seção específica deste site. Além disso, eu tenho uma informação de texto, barbeios Dentro dos barbeadores, eu também tenho o Aqui também tenho as imagens dentro da moldura. Você pode ver que, quando este site estava funcionando, eu tinha a animação dentro dessas imagens. Também tenho o preço dessas imagens e venho aqui com essas opções de caixas H, e finalmente temos uma análise e uma refeição para gatos, temos a página de contato. Então é assim que temos o modelo de site típico com o Canva Ao abrir qualquer modelo aqui, você terá o mesmo tipo de estrutura. Deixe-me escolher esse. Esse também é um design gratuito. Você pode ver isso. Eu clico lá e simplesmente desço. Eu posso ver as próximas páginas com clareza. Da mesma forma, você pode acessar qualquer modelo. Você pode simplesmente clicar lá que será adicionado e você poderá ver a prévia. Depois disso, se você sentir que precisa desse design, pode fazer isso e personalizar este modelo. Acabei de voltar a esse design. Além dessas coisas, eu simplesmente percorro o aplicativo e vou para a primeira página. Portanto, a página oeste sempre terá o elemento principal do serviço ou restaurante específico. Foi assim que eles forneceram essa imagem. Preciso mudar essa imagem, preciso obter imagens melhores, bem como melhor alinhamento do texto e de todas as informações Isso é o que faremos em nossa próxima lição. 7. 06 Experimente mudar cores, fontes e imagens: Nesta lição, mostrarei como podemos editar os elementos desse modelo de site personalizado. Para fazer isso, primeiro, vou começar com esta página inicial. Em uma página inicial, vou adicionar o logotipo primeiro. Para adicionar o logotipo, eu tenho um logotipo aqui. Acabei de copiar esse logotipo. Eu o seleciono, pressiono Control C, ou você pode escrevê-lo e escolher Copiar. Agora eu chego a este modelo de site. Quero colar isso, basta pressionar Control B. Quando pressiono Control B, tenho esse design de logotipo aqui. Agora, eu apenas escalo e posso colocar exatamente onde eu quiser. Na maioria das vezes, você pode colocar esse logotipo no lado esquerdo deste site. Esse foi o melhor lugar para colocar qualquer design de logotipo para um site. O e primeiro do usuário examinará esse lugar sozinho. Agora eu fui colocado lá. Depois disso, preciso da atenção adequada às cores e da configuração de fundo para isso Para fazer isso, basta selecionar a imagem no fundo. Eu posso ver que esta imagem foi colocada no fundo desta seção específica. Para excluir essa imagem, basta clicar na imagem e simplesmente excluir o botão. Eu posso excluir essa imagem com sucesso e posso adicionar qualquer nova imagem aqui. Então, para fazer isso, basta clicar no plano de fundo. Aqui eu escolho a cor de fundo e posso mudar a cor que eu quiser. Então, com base na minha necessidade, posso mudar a cor aqui. Depois de mudar a cor, posso selecionar o plano de fundo. Eu posso expandir ou reduzir a altura da página inicial. Aqui vou adicionar mais detalhes. Eu tenho um logotipo aqui e vou adicionar uma imagem muito agradável que é relevante para este site. Para fazer isso, vou até os elementos. Em elementos, vou escolher a opção chamada fotos. Eu clico em Fotos aqui e temos muitas fotos aqui. Vou escolher a categoria que é comida. Acabei de digitar comida e apresentador, você pode ver que ela carrega muitos alimentos na tela Posso escolher qualquer imagem que seja do aplicativo para meu design. Eu escolho esse. Ele contém muitos alimentos, mas eu preciso de mais informações sobre alimentos, então escolho o fundo alimentar. Mostra elementos alimentares ao mesmo tempo, há um espaço para adicionar seus dados do site ou da empresa. Eu apenas escolhi isso porque é uma imagem profissional, você pode ver lá, não consigo acessá-la completamente. Se você quiser acessar a imagem completa com mais qualidade, você pode usar o site chamado PAXlEntão você pode usar as imagens gratuitas que estão disponíveis neste Canva Assim como escolho essa imagem, escolho a opção certa para substituir o plano de fundo. Somente para essa seção específica, ele substitui o plano de fundo para mostrar a recomendação mágica Eu escolho esse CO. Ele exibe todas essas recomendações para mim. Se eu quiser mostrar alguns alimentos aqui, posso simplesmente digitar a palavra-chave comida, ela mostra muitos itens alimentares. Posso escolher a comida que você quiser colocar lá com o prato Basta digitar a palavra-chave, comida e prato, e você verá que a maioria das imagens são imagens profissionais e poucas são gratuitas. Eu posso ver isso. Eu só clico nele se você quiser, eu posso usar isso aqui. Eu também tenho essa imagem. Eu também posso usar isso. Com base na sua necessidade, você pode selecionar quais imagens você precisa colocar. Também posso escolher alimentos como hambúrguer. Você terá a imagem com fundo transparente. Você pode ver isso. Eu escolho a foto que quero colocar aqui. Com base na necessidade, você tem os elementos, o que você precisa adicionar à sua página inicial, você pode adicioná-los. Vou colocar Pizza. E ter uma imagem de fundo transparente , bem como a imagem normal. Eu escolho essa foto, reduzo o tamanho. Eu posso girar isso e posso colocar, como eu quiser. É assim que posso substituir as imagens existentes do plano de fundo. Também posso adicionar novas imagens à medida que mostro. Da mesma forma que você pode escolher qualquer imagem, digite pasta. Você tem uma massa em pratos diferentes. Eu posso ver isso. Seja qual for a imagem que você sente, que é importante para o design, basta carregá-la a partir das imagens e ela estará disponível aqui. Da mesma forma, também posso carregar outras imagens completas. Se você achar que precisa de mais visibilidade para o logotipo, pode adicionar uma forma separada para isso. Eu vou usar os elementos. Nos elementos, vou usar o retângulo. Aqui eu pressiono aqui ou posso acessar essa ferramenta de retângulo, que é uma ferramenta quadrada Posso colocar isso aqui como plano de fundo do logotipo. Agora, depois de colocar isso, eu só quero devolvê-lo ou enviá-lo por trás do logotipo. Para fazer isso, basta clicar com o botão direito do mouse aqui e chegar a esse alinhamento à página, e essa opção é para alinhar o objeto sobre a esquerda ou a mão direita, Eu chego a essa camada e tenho a opção chamada enviar para trás Você pode ver a chave de atalho de controle aberta. Posso clicar nele para enviá-lo por trás do logotipo. Agora, eu movo o logotipo aqui e coloco exatamente como eu quero. No entanto, eu posso escolher esse retângulo. Eu posso ajustar a aparência do canto, como eu quero com base nessa necessidade que eu tenho? Eu a faço curva e, se você quiser tornar a cor mais clara ou escura, também posso adicionar e, depois de adicionar as imagens, formas, logotipo, finalmente, posso concentrar as informações do texto. Eu posso escolher o estilo do texto aqui. Há um grande número de estilos por aí. Com base na necessidade, você pode escolher o estilo que deseja que tenha as cores do texto, escolha as cores certas. E o texto terá essas informações. Também posso alinhar o texto no centro do quadro de texto, e aqui tudo temos o texto de alinhamento central Acabei de colocar sobre este lugar. E podemos animar o texto e as imagens, o que temos na página inicial Agora, se eu quiser adicionar alguns efeitos de sombra, escolho o texto. Eu vou para os efeitos na parte superior deste menu. Aqui eu tenho todos os efeitos de texto , incluindo sombra. Eu escolho a sombra e posso mudar a cor da sombra aqui. Eu só quero adicionar o preto. Posso ajustar a transparência aqui para que o texto tenha mais visibilidade. É assim que eu posso mudar a cor do texto, a cor da forma. Posso adicionar mais imagens novas nesta página, como a imagem de fundo, as duas imagens do produto. Posso adicionar o logotipo, posso destacar o logotipo usando as formas. É assim que podemos criar modificações com o modelo existente e usá-lo no Canva 8. 07 Salve e visualize o design: Nesta lição, mostrarei como podemos salvar o documento do Canva, como podemos revisar o site, o que estamos criando com o Canva Para fazer isso, vou até o menu de arquivos. No menu Arquivo, você pode ver a opção chamada Salvar. No Canva, você não precisa sempre salvar o documento Sempre que você faz o trabalho, ele é salvo automaticamente com os documentos do Canva A única coisa que você precisa é de uma conexão adequada com a Internet. Sem uma conexão adequada com a Internet, ele não salvará as etapas que você fez usando o Canva Se você quiser salvar a vontade humana dentro do canva, você pode ir ao menu de arquivos e escolher a opção chamada salvar Isso garante que você salvou todas as alterações ou documentos criados no canva Aqui no topo desse esterco, você pode ver que há uma marca que também indica todas as alterações salvas Agora vou fazer uma pequena mudança. Eu apenas clico aqui e vou mover a posição do objeto. Quando eu me mudar, você pode ver aqui, ele mostrará a atualização do movimento atual em formato salvo. Você pode ver isso como estava aparecendo. Sempre que você tiver essa opção em vez de carregar ou salvar, esse documento será salvo automaticamente. Você não precisa salvar separadamente com o nome. Se você quiser adicionar o nome do documento na parte superior deste local, podemos adicionar e você pode apenas apresentá-lo o suficiente para salvar também o nome do arquivo específico. Agora, depois de adicionar todas essas informações, quero fazer a prévia. Para fazer a pré-visualização na parte superior desta barra de manual, você tem a opção chamada pré-visualização Você pode ver a miniatura do I aqui. Acabei de clicar nessa opção, Visualizar. Ele mostra você com a visualização do navegador. Ele mostra os três botões, que são os botões de minimizar, redimensionar e fechar, e também tem a animação Você viu que acabei de pressionar esta prévia novamente. Mostra como foi animado em um modelo. Então, isso foi perfeitamente adicionado. Essas mudanças que eu fiz também foram atualizadas. E se eu quiser mudar o modelo de pré-visualização para celular, na parte superior, você tem o desktop, então você tem o celular. Você pode escolher um celular e terá a pré-visualização compacta para celular Você pode ver que ele organiza automaticamente os objetos novamente e mostra um por um. É assim que podemos ter a visualização prévia de uma visualização móvel ou desktop usando o Canva, o que ajudará você a criar o site adequado, necessário para usar o Canva 9. 08 Entenda a estrutura básica de um site: Nesta lição, mostrarei como podemos categorizar a anatomia do O site terá várias páginas com muitos elementos. Deixe-me mostrar o exemplo em tempo real. Vou abrir um site. Este é um site chamado amazon.com. Se você observar o design do site na parte superior, temos o logotipo da marca específica e temos algumas outras opções aqui, podemos fazer a pesquisa instantânea do produto. Você tem o idioma, você tem o login e o cartão e/ou o DDS. Então, abaixo disso, o logotipo da planta, temos a barra de navegação. Na maioria dos sites, você terá a barra de navegação na parte superior, na primeira linha desse banner ou na segunda linha. Esse conteúdo será estático. Mesmo quando você rola para baixo ou para cima, você pode ver esses designs de logotipo aqui, bem como a barra de navegação. Depois dessa barra de navegação ou dos botões, temos uma área de banner. Aqui temos as informações mais importantes sobre o site. se eles fornecessem uma lista de serviços, esses serviços estarão disponíveis aqui. Como é um site de comércio eletrônico, há muitos novos produtos ou novos lançamentos, ou os produtos baseados em ofertas serão exibidos aqui. Este será o primeiro slide e aqui tenho mais slides. Às vezes, esses rebanhos são continuamente jogados sozinhos. Essa área de banner atrai público e eles a projetam como uma área comum. Se você assistir a essa área de banner em seu celular ou uma TV inteligente, também terá aparência muito boa, esse layout será ajustável. Essa foi uma das melhores vantagens disso. Depois dessa barra de navegação, você tem a área do banner e, em seguida, o corpo deste site. Neste corpo do site, com base na sua necessidade, você pode planejar quantas colunas ou linhas de conteúdo você precisa. Como é um site de comércio eletrônico, eles forneceram muitos produtos. Eles não precisam fornecer uma descrição aqui porque, ao escolherem o produto, somente a página do produto terá as informações detalhadas sobre o produto. Eu apenas rolo para baixo. Eles têm um layout diferente aqui para apresentar os produtos, mas esse tem o arranjo uniforme Veremos isso em nossas próximas aulas. No final, tenho informações adicionais sobre diferentes links. Finalmente, tenho a área chamada Footer. No rodapé, tenho as informações de direitos autorais e outros detalhes comuns aqui Essa será a estrutura básica do site, a barra de navegação com um cabeçalho, a área do banner e a área de conteúdo , também chamada de corpo do site. Finalmente, temos o rodapé. É assim que todo e qualquer site terá uma estrutura. No Canva, também criaremos o mesmo site baseado em estrutura para nosso design 10. 09 Crie um novo site no Canva: Nesta lição, mostrarei como podemos criar um novo site usando o Canva Primeiro, vou escolher essa opção de site. Então, por meio dessa opção em si, você pode criar um novo site. Acabei de clicar no site Criar novo. Com a ajuda desse banner da página inicial, clico nessa opção. Quando eu clicar lá, você obterá automaticamente o novo design do site. No entanto, se você deseja o design preciso do site conforme necessário, não pode usar dessa forma. Acabei de fechar isso. Depois disso, chego a este lugar que é de tamanho personalizado. Eu clico aqui. Quando escolho esse tamanho personalizado, tenho os valores de tamanho personalizado aqui. Aqui eu escolho este site. Eu escolho sites que você tem aqui com dimensões diferentes. Aqui temos um site que tem a dimensão 13 duplo seis em 768 pixels Também temos a mesma dimensão. Você pode ver que eu simplesmente vou mais longe. temos diferentes dimensões baseadas em sites Aqui, temos diferentes dimensões baseadas em sites com categorias diferentes. Você deve ter muitos modelos aqui. Se você quiser acessar diretamente, também podemos acessar a partir daqui. Vou escolher essa opção, que é site e você obterá esse site aqui. Então você pode escolher dessa maneira ou eu tenho outra opção. Eu chego a esse tamanho personalizado e aqui você pode mencionar que tipo de dimensão você precisa. Vou escolher apenas a dimensão de 13 double six e vou escolher o 768 Todos nós sabemos que essa é a dimensão ideal de qualquer design de site adequado para monitor de tela ampla A proporção será 69, que é perfeito para mostrar o conteúdo, você sabe, com anúncios e você pode mostrar o máximo de conteúdo no site No entanto, se você quiser organizar os recursos visuais na parte central do monitor e ainda quiser criar um design de site amigável, que exija a visualização completa do seu site com os monitores, proporção 43 sem barras de rolagem, você pode ter tamanhos diferentes, como mil e quatro O que é suficiente para mostrar o design do site nos 43 monitores, também chamados de monitores CRT. Mas hoje em dia, quase todos os dispositivos têm esse mesmo tipo de dimensão. Portanto, você pode optar por essa opção, que tem 1.366" e 68 pixels Certifique-se de que, antes de adicionar a dimensão, você precisa selecionar a unidade. Quando você seleciona a unidade depois de adicionar a dimensão, há uma chance de alterar as dimensões aqui. Antes de escolher a dimensão, primeiro você precisa alterar a unidade específica. Depois disso, só você precisa escolher as opções dessa largura e altura. Essa é a melhor maneira de descrever como adquiriu a dimensão do site. Depois de selecionar a dimensão e as unidades, você pode escolher a opção chamada Criar novo design. Você terá o novo modelo de site aqui nos documentos em branco. Quando era um documento em branco, você criou no lado esquerdo, você terá muitas sugestões, modelos. Você não precisa usar isso agora porque, no futuro, nas próximas aulas, mostrarei como podemos incorporar esses estilos e designs em nosso design. Mas agora, você acabou de criar um site, um novo documento que é suficiente para você. 11. Criação de várias páginas para o site: Nesta lição, mostrarei como podemos criar as seções e páginas necessárias para o nosso site. Depois de criar um novo documento com o Canva, você terá essa página no início Na parte superior, você pode ver que não tínhamos nenhum nome para este site. Então eu só dou um nome. Houston. Acabei de usar a palavra hachura e você terá, por padrão, a dimensão do site ou do documento lá Ao renomeá-lo, você não terá o tamanho do documento. Ainda assim, se você quiser ver isso, pode ir ao menu Arquivo. Lá você terá o trabalho do documento criado, o nome. O autor e a dimensão do design. Como é um site, ele mostra a dimensão em pixels. Mas se você criou o design na forma de folhetos ou folhetos, isso será mostrado de acordo com a unidade que você selecionou para criar o Tudo bem. Agora, novamente, volto a esse design. No início, você pode ver que temos apenas uma página aqui. E na parte superior, você pode ver que temos a opção de comando aqui. Você tem o plano de fundo e ele mostra o momento turbulento deste slide Você tem uma posição para organizar os objetos. No momento, não temos nenhum objeto para organizar aqui, basta fechar isso. Por padrão, se você quiser alterar a cor do plano de fundo, já que é uma página vazia, você pode ver que há uma linha roxa no final. Estava cercado pela página da web. Eu clico aqui, na cor de fundo, e posso alterar diretamente essa cor de fundo usando essa opção de cor de fundo. Adicione também as cores do gradiente, se quiser. Eu vou te mostrar como podemos mudar as cores do gradiente mais tarde Agora eu escolho apenas branco. Você também pode acessar o mesmo recurso clicando com o botão direito do mouse aqui. Você pode ver que temos muitas opções aqui. Aqui, você pode fazer todas essas coisas. Agora, eu tenho apenas uma página aqui. Aqui temos a opção chamada adicionar página. Você não precisa clicar na página de adição. Deixe-me mostrar o que você precisa fazer. No início, você vê, na parte inferior, a porcentagem de visualização do nível de zoom. Depois disso, você tem as páginas. Acabei de clicar aqui para mostrar miniaturas da página e ela mostra a parte inferior Esta é a primeira página, se você quiser adicionar outras páginas, você pode adicionar. Mas antes disso, volto a esta página usando essas miniaturas de páginas ocultas Na parte superior, você pode ver que temos a opção chamada Página duplicada e a opção chamada Página de anúncio Você tem a opção chamada Adicionar página aqui, basta clicar lá. Aqui você tem a segunda página. Assim, você pode adicionar qualquer coisa aqui conforme necessário, os documentos, os designs ou as animações, tudo o que você pode adicionar aqui Da mesma forma, você pode adicionar outra nova página aqui. Você também pode usar essa opção, que é adicionar página. Então, ele adiciona uma terceira página para você. Novamente, vou adicionar a quarta página. Dessa forma, você pode adicionar qualquer número de páginas ao site. Agora, eu clico neste lugar, ele mostra as opções chamadas copiar e copiar estilo, colar, adicionar página, redimensionar, duplicar página, todas essas opções que você pode usar diretamente ele mostra as opções chamadas copiar e copiar estilo, colar, adicionar página, redimensionar, duplicar página, todas essas opções que você pode usar É assim que você pode adicionar páginas ao site. E se você não precisar da página, na seleção desta página, você pode ver que temos a opção Ocultar página. Você tinha uma página duplicada, você também tem a opção de excluir Você pode simplesmente clicar aqui para excluir a página. E você também pode alterar o nome da página aqui. Vou dar um nome como contato. Se você quiser mover esta página de contato acima desta página três, posso usar essa opção para mover para cima. Portanto, esta página estará em terceiro lugar. Então, aqui eu tenho uma página quatro. Você também pode mover as páginas cima ou para baixo de acordo com a necessidade, você pode fazer isso. É assim que usamos essas páginas para o design do nosso site. É assim que você pode adicionar ou excluir essas páginas que usaremos no site do Canva 12. 11 Organize as seções logicamente: Nesta lição, mostrarei como podemos criar páginas da web na forma de seções. Há uma diferença entre as duas coisas. Deixe-me te mostrar isso. Em nossa lição anterior, mostro como podemos criar um site de tamanho personalizado. Ao criar um site de tamanho personalizado, você terá a página um e a página dois, poderá mover e excluir todas as coisas que vimos em nossa lição anterior. Mas aqui, vou escolher essa opção diretamente usando esse formulário curto chamado website. Não é um tamanho personalizado, eu apenas o uso diretamente. Ao clicar nessa opção do site Criar novo, terei o mesmo novo design aqui. Então, qual é a diferença? Por que precisamos disso? Deixe-me mostrar que essa é a opção mais importante que teremos com o design do site do Canva No topo, você pode ver que temos o nome que se chama site de design sem título Não tínhamos nenhuma dimensão específica. Você pode ver isso. Se você quiser um design de layout responsivo, deverá escolher apenas essa opção, que é criar um novo site Você escolhe esse tamanho personalizado, você não terá o design responsivo, não escolha aquele Você tem que usar esse. Depois de escolher isso, chego a este menu de arquivos. Aqui você pode ver que temos o nome do documento e o criador do documento, e você não tem a dimensão específica aqui. Mas na lição anterior, eu mostro que ela mostra 13 duplos seis e 768 pixels Essa é a principal diferença. Esse é um layout responsivo. Ao mesmo tempo, você tem as mesmas opções aqui. No lado esquerdo, você pode ver que temos as opções, o que vimos em nossa lição anterior na parte superior da página. Qual a diferença? Você pode ver que podemos trancar esta área. Essa área é chamada de seção, não de página. Por que chamamos isso de seção, não de página? Como usamos a página específica do concerto. Existem muitos sites por aí. Por exemplo, mostro o exemplo do site chamado amazon.com Quando eu rolo para baixo na parte superior, temos um cabeçalho com opção de pesquisa e barra de navegação, depois temos o conteúdo do corpo e, em seguida, temos o rodapé Todos esses designs são com uma única página HTML, não com várias páginas. Quando eu escolho um botão específico , somente ele passará para a página separada, a página do produto ou a página de login, seja ela qual for. Da mesma forma, essa é uma página única. Você pode adicionar várias seções na parte superior, você tem o cabeçalho e depois disso, você terá a área do banner. Da mesma forma, você pode adicionar várias coisas aqui usando essa opção. É por isso que esse botão para criar um novo site é muito especial. Depois disso, eu só dou um nome. Houston. Esse é o nome do meu projeto. Você também pode ver esse mesmo nome aqui. Então aqui eu tenho a opção chamada seção duplicada. Esta é uma seção única. Na parte inferior, você pode ver que eu tenho o controle de transformação. Posso reduzir ou aumentar o tamanho da seção, o que não está disponível na criação normal do site. Portanto, com base na minha necessidade, posso escolher qual deve ser a área da seção específica. Se eu quiser considerar isso como meu cabeçalho, posso reduzir para essa dimensão. Quando você reduz a dimensão, você tem a visibilidade da dimensão lá. Você pode ver isso com esses 13 duplos seis, e a altura é 169 Então você pode ver isso aqui claramente. Eu escolho essa posição e escolhi o alcance. Eu posso ver todas as outras opções que usaremos mais tarde. Então, depois de organizar essa opção, você imagina que vou adicionar o logotipo aqui e os botões de navegação Eu apenas mudo a cor desse plano de fundo conforme necessário. Mas depois disso, vou adicionar minha área de banner. Para fazer isso, vou usar essa opção adicionar seção. Não é a página. Isso é chamado de adicionar seção. Você também pode usar essa opção para adicionar essa seção. No entanto, se quiser duplicar a mesma dimensão, você pode usar essa seção duplicada. Mas agora eu só quero adicionar uma nova seção. Eu escolho adicionar seção aqui. Então, temos a nova seção com a cor que eu escolhi. Eu só quero mudar essa cor para branco. Nós entendemos. Como é uma área de banner, eu só quero reduzir a quantidade do que tenho aqui. Isso é suficiente para minha área de banner. Portanto, parece uma única página da web, mas essa função de área é diferente dessa função de área. É por isso que temos duas seções diferentes. Depois dessa área de banner, vou ter o conteúdo corporal, a área corporal do site. Para fazer isso, basta adicionar essa opção, que é adicionar seção novamente. Eu só quero mudar um pouco a cor de fundo para mostrar a diferença entre cada seção. Acabei de escolher isso e fui mudando um pouco a cor. Você pode ver que essa é a área de conteúdo corporal. Novamente, vou adicionar a seção, e aqui eu mudo para branco puro. Portanto, com base na minha necessidade, posso ajustar a dimensão necessária para cada seção do design do meu site. E vou adicionar minha página de contato. Acabei de clicar nessa seção de anúncios novamente e aqui vou mudar a cor novamente. Eu uso essa cor novamente e eu apenas reduzo a altura da página e aqui eu aumento. De qualquer forma, com base na sua necessidade, você ajustará todas essas coisas depois de adicioná-las. Finalmente, adicionarei minha seção de rodapé Para adicionar a seção de rodapé, clico aqui para adicionar seção e reduzo essa altura porque só quero adicionar o rodapé aqui e mudo a cor do fundo para mostrar a diferença, na verdade Foram adicionadas todas as seções que são registradas para este site. É um site simples. Eu posso usar a área do banner aqui e este é o cabeçalho onde vou mostrar os botões e nesta área, vou adicionar os produtos, serviços e outras informações táteis Finalmente, vou ter um rodapé. É assim que você pode planejar suas páginas da web e, com base na necessidade, pode mudar tudo. A razão pela qual selecionamos esse tipo de design é que podemos fazer um design totalmente responsivo Se você assistir a este site em diferentes dispositivos, como celular ou tablet ou PC ou televisão em todos os layouts diferentes, o alinhamento será alterado automaticamente de acordo com a necessidade Esse é o plano e é por isso que criamos esse tipo de layout. Agora, se você quiser adicionar qualquer outra página para obter mais informações, você criará uma grande quantidade de conteúdo para o site, não apenas um site simples, você também pode adicionar a página. Esta é uma página única com seções diferentes. Se você está satisfeito apenas com esta página única, sim, você não precisa criar mais nada. Mas se você quiser adicionar mais informações para cada botão, sim, você pode adicionar mais páginas. Para isso, chego a este ícone de adição, você pode usar esta opção adicionar página. Acabei de clicar em Adicionar página. Você pode ver que eu tenho outra página separadamente aqui. Acabei de clicar nisso. Eu só quero mudar a cor de fundo para mostrar a diferença entre a página anterior e esta. Esta é a primeira página com várias seções que criamos, mas essa é a página dois. Com base na minha necessidade, posso adicionar dimensões diferentes para essa página específica. Acabei de mudar essa visualização em miniatura para a visualização normal. Depois desta seção, você pode ver que esta é a primeira página e várias seções. Depois de todas essas coisas, temos uma página dois. Se eu clicar em um botão , essa página será exibida na pré-visualização do site É por isso que tenho a página dois e todas essas opções. Se você não quiser esse show, você pode simplesmente excluir esta página. Portanto, se você deseja um site de uma única página que tenha todas as informações sobre nós, serviços, produtos e todas essas coisas, conteúdo, esse alinhamento é suficiente para você 13. 12 A pasta raiz e recursos: E nesta lição, vou mostrar como vamos criar um site com texto e imagens. Então aqui eu tenho a pasta. O nome da pasta se chama Houston. Esse é o nome do projeto que vou criar com este curso. Então, quando eu crio o projeto, eu crio uma pasta separada para isso. Dentro dessa pasta, tenho o conteúdo no conteúdo do texto na forma de arquivo do Word. Você também pode ter o texto no arquivo Node Word, e eu tenho a pasta chamada Imagens. Agora, deixe-me mostrar primeiro o conteúdo do site. Acabei de abrir o conteúdo. Aqui eu tenho as informações da página inicial, que mostram que você é bem-vindo a Houston, onde o Comfort encontra a excelência culinária em Este é um hotel que tem todas as informações sobre alimentação, estadia e comodidades fornecidas pelo hotel. O concorrente da página inicial foi fornecido aqui. Podemos usar, também podemos usar as imagens, que eu compartilhei com a pasta específica. Eu tenho o discurso Sobre, conteúdo. Então eu tenho facilidade de falar e forneci o conteúdo para isso. Depois disso, tenho os serviços e tenho as informações dos serviços Então eu tenho a galeria. Eu tenho a lista de galerias aqui e preciso adicionar as imagens dessas galerias Eu também mencionei isso aqui. E, finalmente, tenho a página de contato. Preciso adicionar o endereço de contato aqui, o número de telefone e o e-mail. Assim, você pode adicionar seu próprio endereço, o site necessário, o número de telefone da empresa e o endereço de e-mail. Esta é uma informação geral que recebi. Você também pode adicionar links de mídia social como se tivesse Instagram, Twitter, Facebook e, se tiver um YouTube, também poderá compartilhar todas essas informações aqui. Foi assim que organizei todo o conteúdo para você. Com base apenas nisso, vamos criar as páginas da web. Agora, acabei de fechar este documento da web. Então, depois do conteúdo deste site, eu tenho a pasta chamada imagens. Dentro das imagens, você pode ver que tenho imagens para páginas diferentes. Como mostro, tenho páginas da web que começam com anúncios iniciais, instalações, serviços, galeria e contato. Antes disso, eu tenho uma pasta separada chamada logo. Portanto, essa pasta tem os dois tipos de logotipos do meu projeto, Houston. Então, esta é uma imagem JPEcimage que tem milhares de pixels, e você pode ver que estava com o fundo preto E este é um documento PNG, com a conta transparente. Posso colocar em qualquer lugar de acordo com minha necessidade. Posso selecionar o plano de fundo conforme necessário. Portanto, sempre que você criar um design de site para uma empresa ou produto específico, você deve ter o documento PNG do logotipo para ter muita liberdade para colocar o plano de fundo e a posição do logotipo. Então, eu tenho todas as imagens que eu precisava para criar este site. Dentro desta casa, você pode ver que tenho a recepção e as páginas bonitas desse site. Você precisa coletar essas imagens da respectiva empresa. Se eles não tiverem, você pode criar um conjunto de fotos e obter todas essas imagens deles. E eu tenho imagens da página Sobre para isso. Eu tenho imagens das instalações. Tenho serviços e galeria e, finalmente, tenho as imagens da página de contato. Então é assim que você precisa organizar as imagens e o conteúdo do texto. Então você pode começar a utilizar todas essas informações no design do seu site. 14. 13 Personalize o layout e adicione espaços reservados: Nesta lição, mostrarei como podemos personalizar o design da camada e como podemos colocar espaços reservados para o texto e as imagens Agora, antes disso, vou criar um novo documento do Canva Para fazer isso, vou até a página inicial e aqui tenho a opção chamada Doc. Acabei de clicar nessa opção Doc. Eu criarei o documento do Canva. Ele tem a área em branco padrão. Agora eu só quero mudar o nome do documento. Eu venho aqui e simplesmente morro contente em Houston. Agora quero copiar o texto do meu arquivo do Word e colar aqui para que você tenha todas as informações dentro do Canva, você não precise depender documento do Microsoft Word ou de qualquer outro software No entanto, no início, ao criar o conteúdo para isso usando os redatores de conteúdo, você pode adicioná-lo diretamente a este documento do Canva Agora eu só copio e colo aqui. Então, aqui eu apenas seleciono usando o Controle A, pressiono o Controle C. Então, quando eu pressiono o Controle A, todo o conteúdo será selecionado. E quando pressiono Control C ou eu diretamente sobre a seleção, escolho Copiar O conteúdo foi selecionado e copiado. Agora eu quero ir para o Canva e eu quero colar o conteúdo Então eu volto aqui e vou colar. Eu apenas pressiono Control V. Você pode ver que eu tenho todo o conteúdo aqui. Então eu tenho um conteúdo para casa sobre nós, e aqui eu tenho algum espaço. Como esse é um documento do Word, recebi espaço suficiente para isso e aqui eu adiciono algum espaço. Quero diferenciar o conteúdo de cada página. No documento do Canva, você não tem uma única página com quatro dimensões A. medida em que você tem um conteúdo, você pode estender a página única. Agora temos o conteúdo aqui. Você não precisa mais do documento do Word. Aqui eu tenho o documento do Canva e o site. Agora eu quero voltar para a página inicial do z. Eu apenas expando. Você também pode usar Control plus scroll e, se estiver usando Mac, você pode usar Command e rolar o mouse. Agora, aqui temos o conteúdo doméstico de Bach. Vamos colocar a imagem em segundo plano nesta área e vamos adicionar as informações sobre isso. Como é uma página de hotel, posso criar conforme necessário. E aqui eu tenho a navegação na parte superior, que tem o fundo amarelo. Mas aqui eu só quero expandir essa área porque, como é um site de hotel, quero dar uma melhor impressão logo no início. Eu apenas expando mais essa área , então aqui vou colocar o conteúdo, o conteúdo do texto e a imagem. Quero adicionar a imagem em segundo plano. Se você quiser adicionar a imagem no Canva, você precisa adicionar a opção chamada moldura Quando você adiciona as imagens dentro do quadro, é fácil animar. É fácil gerenciar as imagens sem esticar e sem cometer erros. Como podemos adicionar as molduras, eu chego aos elementos. Aqui vou digitar o quadro de palavras-chave. Ao digitar o quadro de palavras-chave e o apresentador, você pode ver que temos as respostas para essa pesquisa No início, você tem a opção chamada frames. Eu apenas clico neste C. Quando eu escolho isso, eu tenho resultados diferentes. Eu escolho o primeiro que mostra uma moldura quadrada. Eu apenas clico nele e ele foi carregado. Você pode ver que esse quadro é altamente flexível. Eu posso escalá-lo, posso reduzir e aumentar o tamanho. Também posso aumentar a largura e a altura sozinho, isso não estica a imagem em vez de ajustar a área da imagem Você pode ver que acabei de expandir isso para isso e tenho um lugar como este. Mesmo que você queira adicionar de ponta a ponta, basta simplesmente colocar e fazer todas essas alterações. Então é assim que você pode adicionar o local da imagem no Canva Agora eu volto para este lugar. Aqui eu preciso adicionar o logotipo do site. Acabei de adicionar novamente, um quadro, e eu só quero ir para esta seção. Neste momento, eu estava nesta seção. Então, eu apenas reduzo o tamanho. Agora eu movo isso para esta seção. Você pode ver que eu apenas arrasto e solto para mover e colocar onde eu queria. Então, aqui eu vou usar esse logotipo, e eu só quero aumentar então é basicamente um contêiner. Ele manipulará o conteúdo que temos dentro do quadro. Você pode adicionar os vídeos dentro desse quadro para que sejam ajustáveis. Então, adicionei a imagem do cabeçalho e, posteriormente, adicionei a moldura da imagem da área do banner E aqui vou adicionar algumas informações de texto, que estão na página inicial. Então, para acrescentar isso, chego a este texto, você pode ver no lado esquerdo, que você tem a opção chamada texto. No texto por padrão, você tem duas opções aqui: adicionar uma caixa de texto e ter os estilos de texto padrão, título, subtítulo e Com base na necessidade, você pode escolher o que quiser. Agora eu escolho a caixa de texto adicionada. Isso adiciona a forma livre do texto, você pode simplesmente ajustar como quiser. Agora vou para o oramepsm Lorumibsom é Você pode gerar o número de informações que não têm royalties Eu apenas copio as informações no início. Aqui você já tem o conteúdo, mas eu apenas copio e colo essas informações primeiro. Acabei de selecionar esse texto e colar aqui. Agora eu posso ajustar o texto desse parágrafo. Eu posso ajustar a largura do documento. Quando adiciono as informações de texto na parte superior, você pode ver que temos muitos tétilos No momento, acabei de selecionar esse alinhamento à esquerda. Eu apenas reduzo o tamanho da moldura conforme necessário. Eu posso colocar onde eu quero adicionar. Como é uma página inicial, não preciso adicionar muita quantidade de texto. Eu apenas reduzo e adiciono aqui, e quero adicionar um título aqui Eu apenas adiciono o título usando isso e clico nesse quadro ou clico fora e clico e rastreio o quadro de texto Então é assim que você pode mover o texto para o quadro. Se você já estiver dentro do quadro de texto, não poderá movê-lo diretamente. Então, se você quiser fazer, basta clicar fora dessa área. Agora você pode clicar e rastrear diretamente, você pode mover isso. Aqui, vou adicionar o título do produto específico. Agora, esse é o lado do hotel. Eu posso adicionar o nome aqui. Com base no plano de fundo da imagem, posso selecionar a cor específica do texto. Eu também tenho que adicionar um subtítulo. Também fui adicionado o subtítulo. Aqui eu posso adicionar algumas legendas para o site. Eu apenas adiciono isso também com o alinhamento esquerdo e apenas me movo e coloco No entanto, ao escolher qualquer elemento, aqui você pode ver que, como é um título, você só tem a opção de rotação Mas para esse conteúdo corporal, você tem que girar e aqui eu escolho uma subdivisão, você pode se mover tão bem quanto você pode Esses recursos estão disponíveis com base no tipo de texto. Agora eu escolho um pouco do corpo do texto. Então, para isso também, você tem a opção de rotador Portanto, com base na necessidade, você escolherá o que quiser fazer Então, adicionei o texto fictício e adicionei a moldura para a foto E depois desta página inicial, falei sobre um discurso. Então, aqui eu vou adicionar, você sabe, essas informações. Antes disso, certifique-se de ter adicionado todas as informações fictícias Se quiser adicionar mais alguma coisa nesta página, você também pode adicionar. Mas para fazer isso, basta usar um texto para enquadrar. Eu apenas alinho isso em um lugar adequado. Você pode ver que ele mostra visualização da linha de grade quando eu movo o objeto. Todos os três estavam alinhados em uma linha. Você pode ver isso, mostra o alinhamento, como funciona É assim que você pode adicionar um espaço reservado para as imagens e também pode adicionar espaço reservado para o texto usando o Canva 15. 14 Assegure a compatibilidade com dispositivos móveis: I Nesta lição, mostrarei como você pode criar seu site com uma visualização otimizada para dispositivos móveis. No entanto, quando você cria um site, ao usar essa opção chamada Criar novo site, ela ajusta automaticamente o design do layout acordo com a visualização do dispositivo Se você estiver assistindo isso com visualização em retrato ou paisagem com base na visualização, esse layout será ajustável. É por isso que escolhemos essa opção, e eu também falei sobre isso e chego ao menu Arquivo. Aqui você vê que ele não tem nenhuma dimensão específica de documento. Portanto, se você deseja uma visualização otimizada para dispositivos móveis ou qualquer outro design de visualização responsiva, lembre-se disso Outra coisa mais importante, o que você precisa saber é que você precisa usar essa opção de seções, porque quando você usa o tipo de seção, somente dentro dessa seção, os elementos serão alinhados Se você estiver usando a página, o alinhamento será um pouco diferente Portanto, tente usar as seções que lidarão com os elementos dentro da própria seção. O mais importante é não adicionar dois tamanhos limitados do texto. Deve ser legível quando o mais importante é título e o subtítulo, todos devem ser colocados em um tamanho de fonte grande Depois disso, você terá a visualização em uma visualização móvel. Essas informações são fáceis de ler para pessoas de todas as idades. Então é assim que você precisa criar a dimensão baseada em visualização móvel. Então, três coisas, não se esqueça disso. Primeiro, você precisa usar essa opção de site em vez do tamanho personalizado. A segunda coisa, você precisa usar seções, não páginas. A terceira coisa, você precisa usar os cabeçalhos e as subdivisões em um texto grande Além disso, para o corpo do texto, você não precisa usar um tamanho de fonte muito pequeno. Tente manter pelo menos 15, o que é melhor para informações legíveis 16. 15. Salve e revise o layout: Nesta lição, mostrarei como você pode salvar e revisar as informações do site criado usando o Canva No entanto, em nossas lições anteriores, mostro que você não precisa salvar separadamente o documento, o design do site, pois isso indica que todas as alterações foram salvas. Você só precisa de uma conexão adequada com a Internet. Não tenho interrupções, isso por si só é suficiente para salvar todas as informações que você está criando dentro do design do site do Canva cada segundo, ele salva o conteúdo de design que você está criando com o Canva Se quiser garantir, você pode ir ao menu Arquivo e escolher essa opção, salvar o que não é necessário, mas se quiser fazer isso manualmente para garantir que você possa acessar esse menu de arquivo, escolha Salvar. Depois de salvar isso e mostrar que o documento foi salvo, você pode ter a visualização prévia. Para ter uma prévia, chego a este lugar no topo desta barra de menu. Eu tenho a prévia que posso aqui. Acabei de clicar nessa opção, visualizar. Quando eu clico aqui, você pode ver que eu tenho uma prévia desse design de layout específico. Na parte superior, temos o cabeçalho, a área do banner, role para baixo, você pode ver que ele mostra perfeitamente as páginas. Eu apenas mantenho essa visualização em tela cheia para mostrar a visão completa do design. Você pode ver que no lado esquerdo e no lado direito, tenho mais área de página, que é automaticamente expandida neste site. Como quero escolher esse design responsivo e também escolho esse, tenho essa facilidade Caso contrário, você não terá essa aparência. É por isso que você teve que escolher essa opção. Crie um site novo em vez de um tamanho personalizado. Depois disso, eu só tenho uma visão normal, posso ver que é assim que seu laptop ou MacBook mostrará a análise Agora eu só quero ter a visão do celular. Na parte superior, você pode ver que essa é uma visualização de desktop. Agora eu clico nessa opção móvel. Quando eu escolho essa opção móvel, ela mostra a visualização móvel. Da mesma forma que mostra as informações do site no desktop. Portanto, cobre muitas páginas. Eu só preciso rolar o nível mínimo. Você pode ver que temos apenas a barra de rolagem vertical, ela não tem a barra de rolagem horizontal, que não é necessário, pois é um site compatível com dispositivos móveis. Agora, se você acha que não consegue ler essas informações, pode ver a prévia da resis na opção móvel Acabei de habilitar esse redimensionamento na opção móvel. Antes de publicar o site, você precisa habilitar essa opção se quiser ler as informações ou acessá-las da melhor maneira. Acabei de habilitar esse redimensionamento no celular. Agora você pode ver que a área do banner está lá e o cabeçalho está lá. Na área do banner, você pode ver que o texto completo pode ser lido no celular Não preciso alterar o tamanho novamente, ele se ajusta automaticamente com base no layout do líquido. Como é um layout responsivo, é possível. Ainda assim, você pode ver que não temos nenhuma rolagem horizontal. Essa é a beleza desse design responsivo. Você pode rolar para baixo e ver todas essas informações. Outra coisa importante é que essa é uma área de banner e os elementos da área de banner são colocados somente dentro dessa área de banner. Ele não transborda e sai dessa área específica do banner Essa é a beleza desse design de layout responsivo específico Não sai. Com base na necessidade, você pode escolher o que quiser Você deve ter a opção chamada incluir menu de navegação. Se você quiser adicionar a barra de navegação na parte superior, por padrão, a barra de navegação, não a que você criou, basta ativar essa opção. Ele mostra a primeira página, que é a visualização padrão da barra de navegação. No entanto, se você quiser criar manualmente, basta desabilitar isso. Você não precisa disso aqui. É assim que podemos revisar as informações criadas, o site na forma de celular o desktop usando o Canva Você pode ver aqui, é assim que acabamos de clicar nesse redimensionamento no celular Então, basta atualizar, você sabe, isso não significa que em um site, como em um desktop, você também terá o mesmo tipo de aparência É assim que você fará com que o site apareça em um desktop. É assim que você tem a aparência do site em um celular. Essa hora acabou de chegar. É por isso que é assim que aparece. Então, acabei de habilitar essa resis no celular. Ele mostra perfeitamente todas as informações em texto, bem como, você sabe, as imagens no site do Canva 17. 16 Tema para o seu site: Nesta lição, mostrarei como você pode escolher o tema certo para a criação do seu site com o Canva Aqui, eu vou escolher o hotel. Primeiro, você precisa abrir vários sites de hotéis com o Canva Você terá uma ideia sobre quais são todas as coisas possíveis com o Canva, quais são todos os elementos que você pode colocar Você terá uma ideia melhor sobre como criar um site com o Canva Para fazer isso, chego a esta página inicial. Acabei de abrir o menu e escolho esse Canva. Eu pressiono a tecla Control e pressiono o Canva, terei essa página inicial em uma guia separada Agora, basta rolar e abrir a página inicial. Na página inicial, como dissemos, aqui vou dirigir o site do Hotel Basta acessar o site do Hotel e pressionar Enter. Você terá muitos designs de sites aqui. Aqui eu tenho um site e aqui eu tenho um site. Você pode ver todas essas coisas. Agora, se você escolher apenas o site, terá todos os sites. Sabemos disso em nossas aulas anteriores. Mas agora vou escolher o hotel ou você para ter uma categoria aqui. Acabei de clicar na categoria. Então, ele mostra todas as categorias por padrão. E se você quiser escolher um site com categorias diferentes, você pode escolher isso. E aqui também, você tem o estilo, o que você precisava. Você só precisa de animações, simples ou baseadas em fotos. Você pode escolher o que você sabe, o estilo que você precisa. Mas agora eu apenas digito diretamente site do hotel com teclado. Eu tenho muitos sites aqui. Acabei de abrir esse primeiro. Eu clico com o botão direito aqui e escolho Posso escolher este lugar e posso abrir aqui usando este modelo personalizado. Quando eu escolho esse modelo personalizado pela tecla Bold Control, novamente, terei a mesma guia em uma guia diferente. Você pode ver que esse modelo estava abrindo em uma guia diferente. Eu só clico lá. Aqui eu tenho um site. Basta rolar para baixo para ver quais são todas as seções que temos neste site. Lentamente, eu rolo para baixo. Mas primeiro, você pode ver que eles forneceram o nome do hotel e o tom da cor, o que eles usaram é incrível. Eles usam o mesmo tipo de, você sabe, cores da imagem para as informações de texto. E eu simplesmente desço até a segunda página, que significa a segunda seção. Lá, eles lhe deram mais uma página de boas-vindas. Eles adicionaram seus prêmios e classificações nas redes sociais e nos sites. E eles forneceram os detalhes do quarto aqui e forneceram os diferentes tamanhos dos quartos e o custo de cada quarto. Essas análises de design ajudarão você a saber como podemos colocar as imagens, como podemos colocar as informações do texto por trás das barras, qual poderia ser o tamanho da forma, se precisamos adicionar algum traço sobre a imagem ou não Qual deles está compartilhando o conhecimento da melhor maneira. Todas essas coisas que temos que aprender apenas por meio desse tipo de trabalho. Agora, novamente, venho a este lugar. Na próxima página, eles forneceram King Suites Cotiard, talvez a vista mais importante e a melhor vista de luxo do quarto de hotel por trás dela, eles forneceram diferentes ângulos daquele quarto, King Suite Ctrard Eu venho aqui, eles adicionaram os pacotes e descontos. Aqui podemos adicionar os pacotes e aqui eles forneceram os descontos. Todas essas coisas são fornecidas em uma página separada. Veja também a próxima página, as avaliações dos hóspedes. Eles forneceram depoimentos dos diferentes hóspedes do hotel Finalmente, eles forneceram os detalhes de contato com os detalhes da reserva em que você está hospedado. Você pode ver que em todo este site, eles usaram apenas esse verde em todo o lugar e usaram esse marrom. A partir desse marrom, eles usaram cores claras para o texto e fundo e cores escuras para separar as páginas mais importantes das seções. Ao analisar esses modelos de sites, você saberá uma maneira melhor de colocar as imagens e outros elementos Vou abrir os mesmos resultados de pesquisa novamente. Eu rolo para baixo. Você pode ver que temos tantos estilos, podemos escolher o que você quiser Eu escolho este, clico aqui e escolho personalizar este modelo, para que esse modelo seja aberto. Este modelo tem o vídeo no início. Você já viu isso quando tem a prévia de um site específico aqui. Mas aqui, temos apenas os quatro para revisar. Eu venho a este site, você pode ver aqui um vídeo e eu tenho esse nome específico de resort aqui. Role para baixo, veja, você sabe, as cores, o que eles usaram com base nas imagens perfeitas. E a forma, as molduras são muito boas, o que explica a natureza desse local de maneira detalhada. Então aqui eles usam o fundo rosa e aquelas cadeiras, você sabe, hum, melhor visibilidade para os olhos, e forneceram os diferentes estilos de quarto. Eles devem oferecer a suíte familiar para a família das pessoas. E da mesma forma que vimos aqui, você sabe, aquela suíte King mais o Courtyard, eles forneceram essa suíte familiar Depois disso, eles forneceram as promoções e ofertas e, finalmente, temos o contato e, antes do contato, eles forneceram os testemunhos Então, basicamente, essa será a estrutura do site do Canva, e é assim que eles selecionam a cor para seus designs Você pode ver que esse rosa era a cor do hotel. É por isso que eles usaram esse plano de fundo e usaram esse verde escuro para atrair o público de uma maneira melhor. A cor também se mistura completamente com o verde e o oceano. Essa é a melhor escolha. Depois disso, você pode ver aqui que Biggie e as cores marrom, que também são usadas nessas imagens e na maioria dos designs de interiores do quarto de hotel terão esse tipo de iluminação e cores É assim que vamos criar o site e, ao revisar esse tipo de site, teremos a ideia de uma maneira melhor 18. 17. Adicione uma imagem ou vídeo ao cabeçalho: Nesta lição, vou mostrar como podemos adicionar imagens e vídeos dentro do quadro. Deixe-me mostrar isso um por um. Em primeiro lugar, vou mostrar como podemos adicionar uma imagem dentro do espaço reservado ou de uma moldura Para fazer isso, vou até os elementos. Aqui vou escolher a opção de pesquisa. E quando eu escolho a opção de pesquisa na parte inferior, você tem muitas categorias. Eu escolho imagens. Portanto, a opção de fotos ajuda você a encontrar as imagens. Aqui vou adicionar o texto que é hotel. Ele fornece uma lista de imagens que têm a estrutura tal. Como colocamos a imagem dentro da moldura da imagem ou do espaço reservado Eu venho para a área de resultados. Aqui eu escolho essa imagem, basta clicar aqui, essa imagem será carregada nessa seção. Agora, eu só quero mover essa imagem desta para esta seção. Eu selecionei a primeira seção e simplesmente excluí ou você pode simplesmente arrastar e soltar dentro desse quadro. Acabei de excluir, seleciono esta seção específica e escolho esta imagem. Quando escolhi essa imagem, ela foi carregada dentro dessa seção específica. Mas eu escolho esta primeira seção em que vou ter o logotipo e a barra de navegação. Eu adiciono a mesma imagem. Mas você pode ver que, de acordo com tamanho da seção, essa imagem foi expandida ou reduzida. Acabei de colocar a imagem aqui e você tem outra maneira colocá-la sempre que precisar. Eu só tenho aqui na seção anterior, eu posso simplesmente arrastar e soltar dentro da segunda seção. Agora, outra coisa importante é que quando tenho a imagem dentro da minha moldura, acabo de chegar à seção. Quando tento mover a imagem sobre esse quadro específico, o quadro de imagem ou o quadro de espaço reservado Ele é adicionado automaticamente à imagem. Você pode ver que é assim que adicionamos a imagem dentro e eu simplesmente a excluo. Se você quiser adicionar outra imagem, vá em frente. Você pode selecioná-lo e simplesmente rastrear esse espaço reservado Essa imagem será adicionada. É assim que adicionamos a imagem dentro desse espaço reservado. Isso é chamado de quadro no Canva. Eu escolho este, basta arrastar e ele será adicionado. É assim que simplesmente adicionamos uma imagem dentro de um espaço reservado específico, o quadro Se você quiser alterar a imagem da mesma forma, basta selecionar outra imagem e arrastar sobre ela, essa imagem será substituída. Você não terá a imagem anterior no local. A menos que você esteja usando u usando o Controle Z ou usando este ícone, você não pode recuperar essa imagem. É assim que adicionamos a imagem dentro da moldura. Agora, se eu quiser separar a imagem da moldura, basta clicar com o botão direito sobre esse espaço reservado Eu tenho a opção chamada separar imagem. Eu escolho separar imagem. Posso mover ou excluir a imagem se não precisar. Mas se eu quiser a mesma imagem, novamente, basta arrastar sobre o quadro de texto e coloco a imagem dentro. Então é assim que adicionamos a imagem dentro desta página inicial. Se você quiser expandir esta página inicial, você pode expandir de acordo com a área da imagem Então, eu apenas selecionei a seção e ela não foi selecionada. Você pode ver que, quando a seção foi selecionada, você terá apenas um ajuste na parte inferior. Aqui eu tenho quatro ajustes. Eu apenas movo um pouco a moldura da imagem. Eu seleciono a seção agora. Você pode ver que posso expandir a seção de acordo com minha necessidade, então basta selecioná-la e eu a expando. Aqui eu apenas coloco a imagem e deixo expandir a moldura. É assim que você pode expandir se precisar de mais espaço. Temos tantas imagens de acordo com a necessidade, vamos selecionar qual delas você deseja. Da mesma forma que adicionamos a imagem nesta página inicial, você também pode adicionar o vídeo. Deixe-me te mostrar como fazer isso. Quando a imagem ou o vídeo foi colocado dentro desse quadro de imagem, basta clicar nesse elemento e pressionar delete, esse espaço reservado estará lá, o quadro estará lá, somente o elemento, o que temos dentro será excluído Mas se eu pressionar delete novamente, isso para excluir. Não faça isso. Basta colocar a imagem ou o vídeo dentro do quadro. Basta selecionar uma vez e pressionar delete, esse elemento desaparecerá. Agora vou adicionar o vídeo dentro desse quadro. Para fazer isso, volto e aqui vou digitar o hPressEnter Quando pressiono Enter, ele mostra a categoria de fotos, gráficos e vídeo. Eu escolhi este vídeo C, e ele mostra muitas referências de vídeo, que basicamente incluem vídeos profissionais e gratuitos. Assim, você pode escolher qual deles deseja adicionar dentro desta página e basta clicar para adicionar dentro desta página. Você tem tantos vídeos aqui. Eu vou escolher este, mas este é um vídeo vertical. Eu só vou até o topo. Eu tenho uma opção de filtro. Aqui você pode escolher horizontal ou vertical. Eu escolho horizontal e você tem todos os vídeos na forma horizontal. Agora eu escolho esse vídeo. Eu só clico uma vez. Esse vídeo foi adicionado na página inicial. Agora, o que eu preciso fazer é muito simples, pois eu apenas seleciono e rastreio a imagem, aqui eu apenas seleciono e rastreio o vídeo. Esse vídeo será adicionado dentro do quadro. Pode ter a prévia se quiser. E você tem outras opções aqui com vídeos diferentes. Quando o cliente lhe forneceu o arquivo de vídeo que ele adquiriu, você pode usá-lo para ter um impacto melhor. Basta excluir este vídeo, eu adiciono este e apenas rastrear e capturar. Você pode adicionar, quanto ao sentido estético e transmitir a melhor comunicação sobre a infraestrutura do hotel ou o tema, você pode adicionar o vídeo o que for necessário Acabei de adicionar esse vídeo aqui. Esse vídeo tem 22 segundos de duração. Eu apenas rastreio, ele será adicionado. É assim que você pode adicionar vídeo ou foto dentro desse quadro do Canva, principalmente na página inicial Acabei de adicionar a foto. Não preciso adicionar o arquivo de vídeo aqui. Acabei de deletar isso e acabei de adicionar esta foto aqui. É assim que você pode adicionar essa foto ou vídeo à sua página inicial usando o Canva 19. Adicione título, legenda e conteúdo: Nesta lição, mostrarei como podemos adicionar título, subtítulo e conteúdo a esta página inicial Já temos o texto aqui. Temos na cor preta, podemos escalar e colocar onde você quiser. Para esse plano de fundo, podemos escolher esse texto, e eu posso escolher a cor do texto em branco. Teremos o melhor pronto. Primeiro, eu vou para este hoster. Aqui eu tenho o conteúdo da minha página inicial. Em uma página inicial, eu só quero copiar e colar o título primeiro. Eu só copio aqui. Bem-vindo ao hoster E eu chego a esta página do site de Houston. Aqui eu colo o texto. Somente este quadro de texto será bem-vindo a Hoston. Posteriormente, criaremos os estilos e o alinhamento. Primeiro, moveremos o conteúdo para cá Agora, depois de adicionar isso, volto a esta página de conteúdo e copio o slogan. Eu apenas copio isso e colo aqui usando o Control V ou colo. Agora, eu apenas reduzo as informações do texto porque elas parecem muito maiores e, se eu quiser, posso selecionar e alterar a cor do texto para branco. É assim que eu mudo. Se precisar ter uma melhor visibilidade, você pode mover as informações aqui. que fornecerá a melhor legibilidade conteúdo completo do texto Aqui, eu quero adicionar o conteúdo corporal aqui. Temos mais informações aqui, como esta, misturamos hospital de luxo e outras coisas. Para adicionar isso, quero adicionar mais um texto ao quadro, ou posso selecionar a segunda tecla Control D. O Control D é a tecla de atalho para duplicar o texto, o que temos com Aqui eu reduzo o tamanho da fonte para 15 e posso reduzir mais. A ferramenta tem o tamanho ideal para qualquer texto de conteúdo do site Agora, aqui eu apenas copio as informações até isso. Eu copio isso e colo aqui. Você pode ajustar a moldura de acordo com sua necessidade, selecioná-la e ajustar com base no alinhamento ou na forma que você precisa Agora, depois disso, seleciono todas as três informações de texto. Eu vou para a opção de posição aqui. Na posição, escolho o alinhamento à esquerda para que, no lado esquerdo, você possa ver que todos os quadros de texto terão o mesmo alinhamento Da mesma forma, se você quiser no lado direito ou no centro, você pode escolher isso. Esse é um alinhamento vertical, da mesma forma que temos a parte superior, inferior e média Mas agora não precisamos disso. Eu pressiono Control Z para desfazer e escolho somente a direita, não a esquerda Então, depois de escolher isso, eu seleciono esse tamanho de quadro de texto. Eu só um pouquinho. Então é assim que eu quero. Agora, se você quiser ter um assunto neste lado direito, você pode escolher essa imagem em particular. Depois disso, na parte superior dessa barra de ferramentas, você pode ver a opção chamada flip Você pode escolher virar e você tinha duas opções, virar na horizontal e virar Se eu escolher virar na horizontal, você terá o giro assim. Se você achar que precisa dar mais visibilidade a essas informações, você pode fazer isso, caso contrário, não é necessário. De qualquer forma, eu já adicionei um texto fictício de conteúdo corporal. Acabei de excluir isso porque adicionei um novo. Agora, com base na imagem, que você vai usar na página inicial, você pode definir o tamanho da fonte e outras coisas para a página inicial do seu site Se eu tiver o assunto no lado direito ou as áreas mais atraentes no lado direito, definitivamente, você pode ler o texto com o lado esquerdo. Como eu disse, é puramente baseado nas imagens. Eu apenas pesquiso as imagens do hotel novamente, vejo as fotos, e todas as fotos corresponderão a isso. Acabei de adicionar isso e você pode ajustar o conteúdo do texto da imagem acordo com o alinhamento da foto Mais uma vez, vou escolher mais uma foto. Temos muitas imagens. Se eu vou usar essa imagem, devo ter as informações do texto no lado direito. Teremos uma melhor visibilidade. Ao mesmo tempo, no meu alinhamento de posição, escolho escrever. É assim que você precisa gerenciar sua página inicial do site. No momento, vou fazer apenas isso porque tenho a correção de cores da imagem, posso melhorar esse trabalho de imagem usando apenas o Canva É assim que podemos colocar o texto do título, do subtítulo e do corpo do conteúdo página inicial no Canva. 20. 19 Adicione um botão de chamada para ação: Nesta lição, mostrarei como podemos adicionar o botão de call to action na página inicial do Canva Geralmente, os sites terão as informações de texto os recursos e outras coisas nas páginas iniciais Somente na página inicial, não precisamos fornecer muitas informações de texto ou imagens Precisamos adicionar apenas as imagens de destaque e as informações de texto. De qualquer forma, se você quiser adicionar mais informações ao público ou aos usuários do site, você pode adicionar usando a opção chamada botões de call to action. A forma abreviada desse botão de call to action é ctA. Deixe-me mostrar como vamos adicioná-lo. Para fazer isso, primeiro vou aos elementos. Elementos, vou digitar o botão de palavra-chave. Quando eu digito o botão de palavra-chave e pressiono enter, tenho muitas saídas de botões. Mas essas são as imagens. Eu não preciso dessas imagens. Eu preciso de um gráfico, preciso mudar a cor, então eu escolho gráficos. Quando você escolhe gráficos, você pode ver que temos muitos botões aqui. Então, são pagos e alguns são gratuitos. Temos todas essas coisas aqui. Mas no Canva, você tem a opção chamada formas. Quando chego a tudo isso, eu apenas digito os botões de palavras-chave e você tem os botões livres aqui para o trabalho. Acabei de fechar todas as buscas. Quando eu tenho o espaço de trabalho do design deste site, e quando visito esses elementos e limpo todas as coisas, o que eu tenho no painel de pesquisa por padrão, você tem os botões Eu clico nesses botões. Você pode escolher qualquer uma das opções necessárias para o design. Na maioria das vezes, preferimos esse retângulo de canto arredondado. Aqui temos mais raio e aqui temos mais. Com base na necessidade, você pode escolher qual deles deseja. Na maioria das vezes, escolhemos este, e podemos ter isso aqui. No entanto, com a ajuda desse retângulo em si, você pode adicionar essa forma Para fazer isso, chego a esses elementos e elementos que você tem a forma básica , que é retângulo Você tem o retângulo arredondado, você pode ver isso. Eu apenas clico nele e você tem o retângulo arredondado aqui Se você quiser ajustar o raio do canto na parte superior desta barra de manual, você tem uma opção aqui chamada Eu clico nesses calos. Você pode ver os lados agora. São quatro lados. Em seguida, o raio dos grãos é sumô, eu apenas ajusto. Depois de ajustar isso, eu apenas reduzo a altura e a largura conforme necessário e posso colocar onde quiser Agora, aqui vou adicionar as informações de texto, que são: saiba mais ou comece. Vou dar um texto para começar , o tamanho da fonte é muito maior. Eu quero reduzir o tamanho. Eu também quero reduzir o tamanho do botão. Esse tamanho é suficiente. Agora, depois disso, mudo a cor de fundo para branco. Que terá a melhor visibilidade para o público. É assim que você pode colocar o botão de call to action com base na necessidade da página. No entanto, se você não quiser adicionar mais informações de texto, esse botão não será necessário. Se você tiver mais informações para mostrar no início, definitivamente, você pode usar este botão, botão call to action. Meu anúncio comece ou saiba mais texto dentro deste botão aqui. 21. 20 Inclua botões de navegação e páginas de nome: Nesta lição, mostrarei como podemos adicionar botões de navegação na parte superior desse cabeçalho e como navegar em cada seção. Para fazer isso, vou primeiro a esta página de conteúdo. Aqui eu tenho a lista de botões, o que eu preciso. A primeira é sobre nós, instalações, serviços, galeria e contato. Portanto, temos seis botões para adicionar nesta barra de navegação. Para fazer isso, primeiro eu coleciono o nome desses botões. Eu copio isso, e aqui eu quero jogar Stage at the top. Então, eu simplesmente dupliquei qualquer quadro de texto daqui. Para fazer isso, eu pressiono Control D depois de selecionar isso. Acabei de excluir o recém-duplicado. Você também tem outra opção. Você pode simplesmente pressionar e segurar o ATK no teclado e clicar e arrastar sobre o elemento Portanto, é outra forma de duplicar o elemento seletor dentro do canva Agora eu movo isso para o topo e mudo a cor do texto para preto. Eu posso mudar isso mais tarde. Agora eu só colo esse texto sozinho aqui, que é minha casa. Você pode ver como podemos colocar esse texto em casa aqui. Agora, depois disso, eu escolho o texto. Eu posso reduzir o estilo da fonte e mudar essa fonte em negrito para normal. Vou mudar esse tamanho de fonte para 16. Finalmente, coloquei o alinhamento no centro. Lembre-se de que vamos adicionar seis botões aqui. Eu só quero duplicar isso ignorando a faixa do Altiki e quero lançar Eu solto aqui e pressiono Control D, para que ele duplique automaticamente os novos elementos na mesma distância Lembre-se de fazer isso, basta selecionar o objeto e pressionar o Al tiki e clicar e rastrear Agora, finalmente, eu o libero. Depois de soltá-lo, pressiono Control D novamente, novamente. Você pode ver que eu posso duplicar os elementos aqui. Agora eu preciso de mais um botão. Eu posso duplicar mais uma vez. Eu apenas duplico manualmente. É assim que você pode organizar todos os botões. Depois disso, você pode alterar o próximo nome que temos sobre nós. Isso deve ser sobre nós. Eu apenas copio e colo e, depois disso, tenho instalações. Então eu tenho serviços. Então eu tenho galeria e contato. Eu digito manualmente. Depois de adicionar tudo isso, basta clicar aqui. Depois de escolher isso, se você quiser ajustar, posso ajustar novamente no modo físico. Eu apenas clico no final e reduzo a distância. Dessa forma, se você quiser reduzir, pode reduzir e, se quiser reduzir o tamanho da fonte do botão, também pode fazer isso. É assim que você pode lidar fisicamente com todos esses objetos. Agora, quero adicionar um traçado entre cada botão para mostrar a diferença entre cada botão de navegação. Para fazer isso, eu chego aos elementos. Eu escolho esse golpe e você tem um golpe muito grande aqui. Agora, o tamanho do traço, você pode ver claramente, é maior e tem o tamanho quatro. Agora eu transformo isso em um. E eu também mudo a direção. Você tem duas maneiras de mudar a direção. A primeira é que você pode girar manualmente ou eu simplesmente desfaço. Eu vou para as posições e aqui você pode ver a opção chamada rotador Eu apenas digito 90 graus e pressiono Enter. Da mesma forma, você tem o início X e o início Y, índice e Y. Se você quiser reduzir essa quantidade de largura, eu posso fazer aqui, eu apenas digito 70, você pode ver a diferença agora Agora eu apenas coloco isso entre os dois botões. Então é aqui que eu preciso colocar. Eu posso ver que é aqui que ele se encontra. Da mesma forma que eu o seleciono, eu o duplico e coloco exatamente entre esses botões Controle D, Controle D. Se você estiver usando Mac, você pode usar o Command D. Ele foi colocado quase exatamente na distância correta. Mas aqui eu ajusto isso manualmente aqui também, eu o seleciono e ajusto manualmente. É assim que você pode simplesmente definir respectiva galeria e outros botões da barra de navegação. Agora eu seleciono esse cabeçalho, eu apenas seleciono essa cor de fundo. Acabei de selecionar essa nova cor e um colírio ou dois. Eu posso selecionar a cor que eu queria agora no topo desta bola de navegação. Você também pode selecionar a cor na área da água. Se você quiser usar essa cor em todo o design, pode começar a usá-la aqui mesmo. Se você estiver fazendo isso da mesma forma, poderá selecionar todos esses elementos. Você pode alterar a cor da fonte para branco ou BGI, o que é necessário para os tons coloridos Você pode usar dessa maneira. Agora eu escolho todos esses traços. De qualquer forma, você pode selecionar todas as coisas, mas vamos ajustar apenas a cor do traçado. Mas o traço também escolho a mesma coisa. Essas cores também são atualizadas. É assim que você pode atualizar sua barra de navegação e adicionar todas essas coisas aqui. Agora eu só quero mencionar cada página o conteúdo que temos. Então, eu apenas copio o sobre nós e colo aqui. Eu só quero mudar a cor disso , aumentar o tamanho. Agora, da mesma forma, eu apenas copio as instalações e colo aqui. Quando eu colo isso, só preciso do mesmo estilo que tenho com Sobre nós. Se eu quiser alterar o estilo ou apenas copiar o estilo, seleciono o texto e escolho esta opção, o estilo de cópia, as teclas de atalho, Control Os Quero selecionar essa fonte primeiro. Em seguida, clico no destino. Aí você tem esse estilo. Então eu tenho serviços, eu copio isso e colo aqui primeiro, seleciono a fonte, escolho o estilo de cópia e seleciono o destino. É assim que você pode copiar e colar o estilo, se quiser. Eu adiciono depois das instalações, sim, vou adicionar outra seção aqui. Então, eu quero expandir a seção, e aqui eu quero adicionar uma galeria. Eu apenas seleciono o estilo anterior e adiciono aqui. Agora eu expando isso e depois desta galeria, vou adicionar a página de contato. Então, para fazer isso, basta pressionar adicionar seção. Lá vou mencionar meus detalhes de contato. Basta copiar isso e colar aqui. Eu só quero copiar o estilo. Eu apenas seleciono a fonte do estilo e clico no destino. Depois de adicionar todas essas coisas, finalmente, vou adicionar o espaço para adicionar meu rodapé Aqui eu apenas mudo um pouco a cor e posso aumentar a distância ou a escala da página, se eu quiser. É assim que você pode configurar todas essas informações. Lembre-se de que você não deve usar informações de texto em tamanho grande. Quanto mais você tiver, melhor será a aparência do site e facilitará o processo de navegação. Agora, aqui também, vou selecionar o título e mudar a cor do texto. Além disso, faremos muitas mudanças e anúncios nas próximas aulas sobre esses textos e tudo No momento, acabei de sair com isso e acabei concluir a criação do trabalho de navegação para todas as páginas no Canva 22. 21 Teste de legibilidade e equilíbrio visual: Nesta lição, mostrarei como podemos manter o equilíbrio visual e a legibilidade das informações no design do site do Canva Para fazer isso, primeiro, chego a esta página inicial. Criamos esta página inicial. Nisso, você pode ver que temos o texto do título, subtítulo e o conteúdo do corpo Quando você olha para este botão, temos o tamanho da fonte 14, mas o conteúdo do corpo, temos 12. Portanto, se você observar com atenção, há uma diferença entre o texto do botão e o conteúdo do corpo. Eu seleciono o texto desse botão e altero esse tamanho para 12. Agora, parece muito claro e não parece algo diferente. Portanto, se você quiser criar um texto legível, sim, basta manter todas as informações do texto de maneira equilibrada. Agora, se você olhar para o fundo, eu tenho aquela foto que está com uma área um pouco clara, mas eu tenho o texto branco nesses lugares. Como posso tornar esse texto mais visível. Eu tinha duas maneiras. Primeiro, seleciono a imagem. Eu vou para o menu de edição. Menu de edição, tenho uma opção chamada ajuste. Eu escolho esses ajustes e posso usar essas opções para melhorar a qualidade da imagem. Se você quiser mais brilho, pode ocultá-lo. E se você quiser reduzir o brilho, você também pode fazer isso. Eu escolho mais contraste com a imagem e apenas ajusto a forma como adquiri. Dessa forma, você pode ajustar e obter o tipo de qualidade necessária para o plano de fundo com uma imagem. Anteriormente, isso não tinha mais legibilidade, mas agora os textos têm melhor legibilidade nesta página inicial Eu só fiz uma coisa, alterei o valor do brilho da imagem, o que proporciona melhor legibilidade Agora, eu só quero me alinhar de uma maneira correta. Eu apenas movo as informações aqui e aqui. Então, daqui em diante, eu apenas seleciono este subtítulo. Eu só quero adicionar o melhor texto aqui, que terá o melhor alcance. Eu apenas duplico esse texto sozinho dobrando o Al tiki e seleciono o Houston Só quero transformar esse nome do hotel sozinho em um nome maior. Eu seleciono o texto. Agora, esse quadro de texto é totalmente diferente desse. Eu só aumento o tamanho. Eu também posso mudar os estilos. Fui eu que escolhi esse texto. Na parte superior, você tem a opção chamada ex neste menu, escolha a opção ec, eu tenho sombra. Eu posso ver que posso adicionar uma sombra. Eu tenho um texto vazio. Você pode escolher qual deseja para que o texto tenha uma melhor legibilidade com esta página Eu tinha muitas opções aqui, como gleich, neon, tra glow, spice e hollow Com base na necessidade, você pode escolher qual deles deseja e que tenha a melhor legibilidade Agora, da mesma forma, eu apenas seleciono o porta-retratos sozinho e me movo um pouco para o lado direito. Agora você pode ver que o fundo está perfeitamente branco. Também posso mudar a cor do plano de fundo para o que eu precisava. Depois disso, escolho a foto e a movo de volta. Agora eu posso ajustar a transparência da imagem usando essa opção chamada transparência. Eu clico que depois de selecionar a imagem e reduzir, você terá mais legibilidade para o texto, o que você tem na frente da imagem Com base nisso, você também pode usar isso e eu também posso selecionar o plano de fundo. Eu o deixo mais escuro se você quiser também. Com base na necessidade, é claro, você vai usar e esse texto terá a melhor legibilidade Agora eu apenas seleciono isso também. Posso adicionar o logotipo mais tarde, mas agora eu excluo apenas essa moldura. Agora você pode ver que eu tenho aqueles coqueiros no lado direito e no lado esquerdo, acabei de adicionar as informações com equilíbrio adequado à esquerda e à direita. Quando você tem o equilíbrio visual aqui, temos o mesmo peso no lado direito e no lado esquerdo Da mesma forma, se você dividir isso verticalmente em 50, 50 por cento, ambos terão o peso dos elementos Dessa forma, você pode adicionar mais informações de texto claro e alinhamento equilibrado para todos os elementos na criação do site Canva 23. 22 Salve e visualize a página inicial: Nesta lição, veremos como temos a saída final na pré-visualização. O modo doc já foi salvo. Mais uma vez, pressiono a opção arquivo e salvar para garantir que essas alterações sejam completamente salvas. Agora, depois disso, vou para a prévia. Basta clicar na opção Visualizar aqui, ela mostra a saída perfeita para o site, o que temos com esse design. O texto, a cor, tudo está bem. Agora, também habilitamos as residências no celular. Eu escolho a visualização móvel aqui. Além disso, em uma visualização móvel, esses botões são organizados automaticamente de maneira adequada. Ainda não adicionamos o logotipo o hiperlink para os botões Vamos acrescentar isso ainda mais. Mas para essas informações para dispositivos móveis, elas não têm o alinhamento adequado, essas informações de texto e outras coisas têm uma visão diferente Podemos dar uma olhada nisso e simplesmente rolar para baixo. Temos as outras páginas, as páginas em branco no final. Finalmente, na parte inferior, temos a seção de informações do rodapé Então, está tudo bem. Nós temos a melhor coisa. E se você quiser, sim, você pode ter todas essas coisas. Eu seleciono a posição e seleciono o alinhamento à esquerda Agora, novamente, vou para a prévia e tenho uma visualização móvel. Ainda assim, mostra a mesma coisa, tudo bem. Resolva isso em outros copos. Neste momento, está tudo bem. Eu também coloco isso em tela cheia até que pareça melhor e mostre todas as áreas da imagem. Não mostra áreas indesejadas nisso. É assim que ele pode salvar e revisar, depois de criar cada seção ou página do site. Usar o Canva o manterá no caminho correto para concluir o design do site 24. 23 Adicionar conteúdo de texto para a página Sobre: I Nesta lição, vou mostrar como podemos adicionar o conteúdo da página sobre nós. Então, adicionamos o conteúdo para a página inicial. Depois disso, quero adicionar as informações na página sobre nós. Acabei de transformar esse U em pequeno. Isso é suficiente. E, no final, basta adicionar condutores e o contato é muito decente Agora, vou para este conteúdo de texto. Eu tenho as informações da página A us, então vou copiar isso e colar lá Agora, se você olhar as informações do texto, o que eu tenho na página inicial, esse texto de rasgação é o texto de vasuns e aqui também eu uso o Canvasns Aqui eu usei um estilo textos. Ainda assim, é uma tela. Ao longo disso, você pode ver que usei apenas o texto do Canvasns Eu só quero continuar o mesmo texto para o outro trabalho de design também para que haja uma unidade no design. O que estou fazendo aqui é copiar duas informações de texto e esta também. Acabei de vender a chave de mudança de controle. E eu seleciono vários elementos. Acabei de copiar isso e aqui vou colar, pressione Control V, eu tenho as informações aqui. Agora, aqui eu tenho um texto em branco. Em vez disso, vou mudar isso para preto. Eu posso mudar isso para a cor base, que eu usei para o título deste design. Aqui eu preciso usar a mesma cor, mas eu preciso de um pouco escuro como eu tenho aqui. Para fazer isso, eu chego a isso, adiciono uma nova cor, escolho escolher uma cor, vou selecionar essa. Você não precisa adicionar esse texto sobre nós na sua página sobre nós. Obviamente, você não precisa adicionar isso em todas as páginas. Acabamos de acrescentar que, para garantir quando adicionamos o link ou quando fazemos o trabalho de design, precisamos saber em qual página precisamos adicionar essas informações É só um texto fictício. Acabei de me acostumar aqui. Depois de acrescentar isso, venho a este lugar, apenas copio essas informações. Depois de copiar essas informações, chego ao conteúdo do corpo e colo aqui. Aqui temos as informações e temos algumas informações especiais sobre isso. Aqui eu escolho essa informação. Basta copiar isso e aqui vou colar isso e vou mover esse pequeno aplicativo e quero mudar a cor novamente para isso. Não preciso disso agora depois de adicionar essas informações, também posso adicionar as informações que temos orgulho de oferecer Copie isso e eu volto a isso. Acabei de duplicar pressionando o Ate chei aqui. Acabei de colar as informações Como o copiamos apenas do Canva, ele obteve as mesmas informações que são os marcadores Então, depois de adicionar todas essas informações, tenho espaço para adicionar as imagens necessárias e também posso oferecer as mesmas informações com um layout diferente que faremos mais adiante Foi assim que adicionei as informações de texto de A us nesta seção do site do Canva 25. 24 Inclua o conteúdo da página Instalações: Nesta lição, mostrarei como podemos adicionar as informações para a página de instalações. Como eu disse anteriormente, também tenho a página de instalações aqui. Agora, aqui eu quero copiar e colar essas informações, e faremos o design mais tarde. Para fazer isso, novamente, eu venho aqui. Eu apenas copio essas duas, não aquelas duas, essas duas informações. Basta copiar isso e eu apago isso e colo aqui. Aqui eu escolho as informações de texto. Eu gostaria de adicionar esse conteúdo. Depois de adicionar isso, vou copiar e colar essa versão intermediária. Eu acabei de copiar isso. Você não precisa adicionar esses mogs. Podemos adicionar os respectivos ícones posteriormente, mas não agora. No momento, acabei de excluir as informações indesejadas. Depois disso, basta copiar as informações e eu quero colar aqui. Foi assim que eu simplesmente copiei e colei as informações. Você pode ver que cada instalação tem um propósito diferente. Faremos o trabalho de design, adicionando as imagens e formas mais tarde, quando concluirmos. Precisaremos adicionar o estilo, as informações do texto, o alinhamento, as imagens e as formas posteriormente Faremos isso depois de adicionar as informações de texto de todas as páginas. Agora acabei de adicionar e quero ir para a próxima página. Na próxima página, tenho os serviços. Dessa forma, você pode adicionar as informações. Em primeiro lugar, podemos adicionar as outras informações. 26. 25. Projete a página de Serviços com uma visão geral das ofertas: Nesta lição, mostrarei como podemos adicionar o conteúdo para o discurso de serviço. Antes disso, você pode ver que temos o espaço vazio onde adicionaremos as imagens e formas e faremos todos os realinhamentos das informações do texto Agora, eu apenas copio os mesmos dois textos. Eu apenas copio isso e colo aqui em um serviço e excluo esse indesejado online. Depois disso, venho aos serviços. Eu copio essas informações em Houston. Eu apenas copio a linha inteira, pressiono Control C, e eu venho aqui e seleciono Control A e pressiono Control V para que possamos copiar todas as informações de texto aqui usando Controle C. Eu estava apenas clicando duas vezes e pressionando Control A para selecionar o texto inteiro e eu apenas pressiono Control V. Pronto. Agora eu escolho essa oferta, nós oferecemos. Eu só quero toda a informação aqui. Antes disso, eu dupliquei mais uma vez e aqui vou colar essa lista Depois disso, eu apenas copio essas informações de texto e vou colar aqui. É assim que eu simplesmente copio e colo. Claro, precisamos fazer muito mais trabalhos aqui. Faremos isso em nossas próximas aulas. Depois disso, tenho que fazer o trabalho para a página da galeria. 27. 26 Adicionar informações para a página da Galeria: Nesta lição, veremos como podemos adicionar o texto contendo informações para a página da galeria. Vamos adicionar muitas imagens nesta página. Vamos adicionar o texto primeiro. Para fazer isso, basta copiar o conteúdo da página anterior. Eu venho a esta galeria. Exclua o texto e pressione Control V. Agora que recebemos o texto, fui copiado desta página de instalações Depois de copiar e colar aqui, chego a esse conteúdo, e aqui vou escolher essa experiência para descobrir a Houston. Basta copiar isso e eu vou colar aqui. Depois de colar isso, novamente, venho a este lugar e copio essas informações, e aqui vou colar. Basta clicar duas vezes e eu colar. Sabemos que precisamos adicionar a lista das imagens com as legendas No momento, eu apenas copio e colo essa legenda aqui É assim que eu simplesmente copio e colo as informações. Como você tem a quantidade de espaço NF, não é possível aumentar um texto como esse Isso é completamente indesejado. Só queremos manter o mesmo tamanho de fonte para o conteúdo do site. Portanto, não faça algo assim. Vamos concentrar mais o layout das imagens topográficas em nossa próxima aula, então coloque primeiro as informações Não faça mais nada antes de adicionarmos as informações de texto 28. 27 Adicione testemunhos na página de Serviços: Nesta lição, mostrarei como podemos adicionar a área de design para depoimentos do público, os usuários em nossa página Para acrescentar isso, vou à minha página de serviços. Então é aqui que vou adicionar meu feedback sobre o público ou o testemunho. Para fazer isso, você pode ver que já temos espaço suficiente, e aqui vou adicionar o testemunho do público. Na maioria das vezes, os depoimentos terão a imagem da respectiva pessoa o feedback e o nome da pessoa Para fazer isso, eu só quero adicionar um quadro de imagem primeiro. Vou até a moldura. Eu quero adicionar a moldura de canto arredondado, então eu apenas adiciono. Eu estava reduzindo o tamanho da imagem conforme necessário. Esse tamanho dificilmente é suficiente para isso. Agora, se você quiser adicionar a imagem no lado esquerdo, você pode fazer isso dessa forma. Agora vou adicionar a forma. Vou usar seis formas, formas geométricas. Eu uso o retângulo arredondado e aqui vou colocá-lo Quero ajustar o raio do canto. Eu venho para os cantos, eu escolho isso em dois. Agora, isso é o número de cantos. Eu só tenho esses quatro e aqui eu quero reduzir o valor. Esses 15 são suficientes aqui e aqui também para o quadro, eu apenas mantenho 15. Agora eu apenas reduzo mais a altura à medida que gravo e aumento a quantidade da identificação. Agora, se você quiser manter uma cor específica para o fundo, você pode ter a cor. No momento, eu só quero adicionar um pouco de cor aqui, assim. Ou, se você não precisar da cor, pode manter o branco e fazer o traçado do retângulo No entanto, se você quiser enviar o objeto para trás conforme selecionado, pressione Controlar as floras abertas, posso devolvê-lo desse desenho Se você não precisar do traço, basta acessar esse menu. Você pode escolher sem traços aqui. Quero alterar a cor do plano de fundo No momento, eu estava escolhendo este. Depois de fazer isso, eu apenas seleciono os dois objetos, vou para as posições. Aqui eu vou escolher esse meio. O centro horizontal de Oliver Bly. Então, depois disso, posso simplesmente selecioná-lo e duplicá-lo e colocar quantos eu preciso Se eu quiser, posso colocar assim. Também posso aumentar a área de texto do quadro. Se você não precisar de tanta quantidade, precisará adicionar três. Você pode adicionar assim. Eu tenho um e adiciono outro. Agora, basta pressionar o comando D ou Control D para adicionar mais um. Você terá uma página de vários depoimentos. Existe outra maneira de fazer isso, que é apenas duplicar essa área de informações de depoimentos e eu vou escolher essa ferramenta oval Posso adicionar o oval aqui e posso adicionar a imagem em forma de círculo ou de outra forma. Eu posso usar diretamente a moldura na forma de um círculo. Então, eu coloco o elemento primeiro e amarro a moldura. Agora eu tenho a moldura circular, eu a seleciono e reduzo o tamanho, posso colocar o centro ou o lado esquerdo de acordo com a necessidade que você está indo para onde precisa. Agora, depois de colocar lá, seleciono a posição dos dois objetos e faço esse alinhamento no centro Agora, depois disso, escolho o estilo de traçado. Eu adiciono o traçado com uma quantidade mínima de dimensão. Você também pode alterar a cor do traçado aqui. Temos o tamanho uniforme do traço. Aqui também posso alterar o tamanho do traçado, bem como a cor do traço. É assim que você pode adicionar a página de depoimentos e eu simplesmente duplico essas informações de texto aqui, que vou adicionar como feedback do público Eu só quero reduzir as informações de texto. Eu só quero usar isso como texto fictício. No momento, eu apenas copio e colo essas informações aqui. No final, adicionarei o nome da pessoa que adicionou o testemunho. Para fazer isso, novamente, eu dupliquei isso e apenas digito o nome usando isso Basta deixar isso em negrito e você poderá alterar a cor do texto para a correta. É assim que você pode adicionar o respectivo feedback, o depoimento do público ou também pode usar dessa forma Eu posso adicionar informações assim. E você pode adicionar o nome da pessoa que prestou esse testemunho. É assim que você pode fazer seus trabalhos, defina o alinhamento para justificar aqui e eu também escolho justificar Então, eu apenas pressiono uma vez que foi deixado. Novamente, pressiono para o centro. Mais uma vez, eu pressiono, estava certo. Novamente, eu estava pressionando e você pode ver que isso justifica o alinhamento, que é ter um alinhamento uniforme no lado esquerdo e direito Se você quiser a esquerda, você pode fazer o contrário, você pode optar por este alinhamento do Justify É assim que podemos adicionar as informações da página de depoimentos. No momento, acabei de escolher este. Isso parece muito bom, mas eu só quero adicionar mais espaço para o feedback do público. Posso adicionar as informações aqui. Agora da mesma forma. Quero duplicar isso e colocar mais um aqui para receber feedback do público Foi assim que coloquei duas informações de depoimento. Se você quiser mais dois, precisará adicionar mais informações sobre o testemunho. Você pode expandir a seção e eu simplesmente a duplico depois de duplicá-la usando a tecla All to e basta clicar e rastrear novamente o local onde eu É assim que você pode adicionar as informações do depoimento desta página de serviços, o que é altamente recomendado Na verdade, trata-se de uma página, não de serviços. Então, adicionamos, você sabe, as informações mais importantes com o depoimento em si. Então é assim que você pode adicionar o espaço, o alinhamento e os objetos para a página de depoimento no design do site Cava 29. 28 Salve e visualize as duas páginas: Depois de adicionar todas essas informações e ter sido adicionado o espaço para o depoimento, vou guardar isso Acabei de verificar se foi salvo. Tenho certeza de usar essa opção de salvar. Depois disso, escolho a opção de pré-visualização aqui. Quando escolho a pré-visualização, você pode ver que temos a pré-visualização com as informações, o que criamos com a página inicial do Canva e que devemos adicionar as informações sobre Então é assim que parece. Você pode ver que ainda não aprimoramos todas as outras informações e ainda não adicionamos a página para o contato, que requer alguns formulários. Vamos acrescentar mais uma lição. É assim que parece. Eu só quero garantir a aparência em uma visualização móvel. É assim que fica em uma visualização móvel. Você pode ver que o testemunho parece fantástico. É assim que ele se alinha para a visualização móvel e compacta Então eu mudo isso para a visualização do Testa. Quero ter certeza de como fica em uma visualização em tela cheia. Essa é uma exibição em tela cheia. É assim que fica muito bonito e não tem elementos indesejados nas páginas da web. É assim que você pode adicionar as informações e desenvolver ainda mais o site do Canva usando o Canva 30. 29 Biblioteca de mídia e opções de upload do Canva: Neste exon, veremos como podemos adicionar mídia e elementos visuais dentro do site Inicialmente, veremos como podemos usar a opção de upload no Canva No Canva, podemos usar elementos existentes como fotos e vídeos, da categoria elementos No entanto, podemos fazer o upload dos novos elementos, como imagens , vídeos e fontes, dentro do Canva e podemos usar em nossos designs Deixe-me mostrar como podemos adicionar esses elementos dentro do Canva Faça isso, eu abro meu projeto. Este é o site que estamos criando usando os cursos do site Canva Nesse caso, vou escolher esse menu do lado esquerdo. No menu do lado esquerdo, você pode ver a opção chamada upload. Isso mostra que você pode enviar seus próprios elementos dentro do Canva Agora eu escolho a opção de upload. Quando eu escolho carregar, ele mostra imagens e pastas. Você pode carregar os dados diretamente na forma de pasta. Você também pode fazer upload de imagens. Deixe-me mostrar como fazer isso passo a passo. Basta apertar esse botão, Deus. Aqui eu tenho uma opção chamada gravar você mesmo. Se eu quiser gravar áudio ou vídeo diretamente, posso gravar para que seja adicionado diretamente à minha pasta de upload. Outra forma é poder fazer o upload manualmente. Aqui, pela primeira vez, você pode ver que ele mostra as palavras de pesquisa, tag e a cor no upload. Se você quiser pesquisar os dados enviados anteriormente, aqui você pode digitar e obterá esses resultados aqui. Você não precisa mover todos os designs, basta acessar os uploads Aqui você pode pesquisar o elemento que você carregou com essa categoria de uploads Agora, depois disso, tenho a opção de upload de arquivo. Com a ajuda disso, posso fazer upload de qualquer arquivo. Eu apenas pressiono este menu, ele mostra as diferentes fontes de upload Também posso fazer o upload do meu Google Drive e de outras coisas. Também posso fazer o upload da minha pasta local. Também posso usar essa pasta de upload. Você pode usar essas opções e ela mostra as imagens e pastas. Aqui eu tenho a pasta de conteúdo do meu site. Tenho imagens com categorias diferentes. Eu também tenho vídeos. Fui adicionado a quatro arquivos de vídeo. Se eu quiser, vou usá-lo. Eu quero fazer o upload desses arquivos. Deixe-me mostrar como podemos fazer o upload desse conteúdo. Temos duas maneiras de fazer isso. Primeiro, você pode arrastar e soltar diretamente dentro da página do Canva No momento, basta pressionar e segurar minha pasta de imagens, arrastar e quero ir para a página do meu site do Canva Eu apenas pressiono tudo para marcar ou no Mac OS, você precisa usar o Command Tab. Estava agora na página do meu site do Canva. Você pode ver que eu ainda não soltei o botão do mouse lá, apenas pressionei a tecla hold. Você pode ver que basta pressionar e arrastar. Ainda não fui liberado. Agora volto ao meu site do Canva e simplesmente entro aqui nesta área, que é descartar o conteúdo para carregar Quando vou soltar o conteúdo aqui, ele mostra quais são todos os arquivos que posso arrastar e soltar dentro dessa área de upload. Ele mostra os arquivos com formatos de arquivo diferentes, como A, CSV, PTO, PPTX, todos esses, etc., podem ser baixados na forma Esses arquivos de imagem também funcionam lá em SVG , todos esses formatos de arquivo comuns No VDO, temos AV MOV, G e P quatro, quatro, P, todos esses formatos estão lá Para áudio, você pode usar uma onda de áudio não compactado e formas compactadas como MP três e quatro A e OGG Também pode adicionar diretamente as pastas. Isso é o que estamos fazendo aqui agora. Só quero lançar aqui. Quando eu lançar, o processo de upload será iniciado. Lance aqui agora. Então você pode ver que ele mostra a pasta chamada imagens. O processo de upload foi iniciado com a ajuda desta animação, você pode ver quanto processo de upload foi concluído Mostra a barra de progresso aqui nesta pasta. Depois de fazer o upload das imagens, também posso alterar a descrição do nome da pasta. No momento, eram imagens. Também posso alterar o nome dessa pasta, como as imagens de Houston. É assim que você carrega a pasta inteira dentro desse processo de upload do Canva No entanto, você também pode carregar os arquivos individualmente. Como fazer isso, eu escolho essa opção de upload de arquivos. Estava acontecendo. Não preciso esperar por isso. Eu simplesmente vou até os arquivos de upload e clico neste botão. Depois de escolher isso, chego a essa pasta aberta. Aqui eu tenho um arquivo de vídeo. Eu apenas clico duas vezes. Eu vou escolher o primeiro vídeo. Eu escolho e abro. Então, esse arquivo também começa a ser carregado e você verá isso. Depois de alguns segundos, as imagens são completamente carregadas com esse vídeo. Eu vou para a categoria de vídeos. Você pode ver que o vídeo que eu enviei estava lá e eu vou para as pastas, lá você tem a pasta chamada imagens. Tem sete dentro disso, basta clicar em você pode ver que tem sete pastas dentro. Agora eu volto novamente para os uploads. Aqui eu tenho a opção habilitar e, se não precisar disso, posso excluir e, se quiser ir para outra pasta, posso mover usando essa opção. Acabei de desativar esse menu e clicar lá. Lá, temos a opção de editar o nome da pasta. Vou apenas vincular o nome do site. E imagens. Se você quiser mover a pasta, você pode mover e compartilhar com outras pessoas e, se quiser, você também pode excluir. Agora por centro. É assim que você pode fazer o upload de todos os elementos. Em uma única pasta, você pode simplesmente arrastar e soltar com base na sua conectividade com a Internet . A pasta será carregada com imagens, vídeos e outras coisas. Mesmo que você tenha faixas de áudio internas, o que é totalmente essencial para o seu site, você pode colocá-las dentro e elas serão enviadas. É assim que você pode carregar todos os seus dados. No entanto, você também pode acessar esses dados usando a interface comum. Deixe-me mostrar como você pode acessar isso. Acabei de escolher esse menu aberto e aqui pressiono Canva Antes disso, eu apenas pré-vendia o Controle ou Comando. Quando eu fizer isso, isso será aberto em uma guia separada. Você pode ver isso e aqui vou eu para os projetos. Na categoria de projetos , basta clicar. Lá você tem todos os detalhes das pastas aqui. Aqui eu escolho uploads. Quando escolho uploads, aqui tenho os arquivos enviados, sejam eles de imagem ou vídeo Aqui você pode ver que foi o vídeo que eu enviei e, dentro dele, mostra a pasta em que fui enviado. Quando eu entro, aqui ele mostra todas as subpastas que eu enviei, como logotipo e galeria, serviços, instalações, sobre nossa casa, contatos, tudo o que está disponível aqui É assim que você pode usar a opção de upload no Canva. Você pode fazer upload de todos os arquivos, incluindo imagens, vídeos e áudios 31. 30 Adicione imagens à seção Sobre nós e Instalações: Nesta lição, mostrarei como podemos adicionar as imagens enviadas em uma biblioteca e navegar por todas essas páginas no Canva Agora, para adicionar as imagens, escolho essa categoria de upload e ela mostra as Imagens de Houston. Acabei de abri-lo e ele mostra as imagens de cada página. Primeiro, eu escolho a página inicial. Mostra três imagens que pertencem a este site. Com base na necessidade, você escolherá a imagem desejada. Agora eu tenho essa foto. Com base nisso, foram adicionadas as informações de texto, outras coisas. Deixe-me tentar com outra imagem e, claro, ela é baseada apenas no site específico, nas empresas ou na imagem do hotel nas empresas ou na imagem do hotel que vamos usar. No momento, é só uma lição, então vou mostrar como posso usar as imagens. Se eu adicionar essa imagem, basta arrastar e soltar para dentro e ela foi adicionada dentro com os efeitos de edição de imagem, eu fui adicionado. Com base na necessidade, você pode escolher como você precisa? Basta pressionar Control Z para fazer esse trabalho. Novamente, eu pressiono Control Z para que eu possa remover a imagem desse quadro. Eu excluo isso, vou adicionar a próxima foto, basta arrastar e soltar aqui. Essa é outra foto que eu estava tirando. Novamente, eu pressiono Control Z para que eu possa remover o efeito que eu adicionei com a imagem. Novamente, eu pressiono Control Z. Vou deletar isso, vou adicionar a terceira imagem É assim que adicionamos a imagem. Basta clicar duas vezes e posso ajustar a imagem, como eu quero? Se eu quiser, também posso inverter o que você pode ver aqui. Acabei de escolher a opção chamada flip and horizontal. É assim que você pode fazer todos os ajustes, o que você tinha com o Canva e o que você precisa com o trabalho Basta usar Undo Control Z repetidamente, várias vezes até que eu precise Para a página inicial, eu já configurei a imagem anteriormente, então não preciso tocar nessa imagem, a menos que seja necessário. Agora vou para a próxima página. Isso é quase uma página. Eu abri aquela pasta que é sobre nós. Sobre nós, tenho muitas imagens e aqui tenho as informações básicas sobre o que isso significa. Eles forneceram conforto, sabor e serviço inesquecível. Essas coisas são mencionadas aqui. Posso escolher o serviço de quarto a imagem baseada em comida ou o design de interiores perfeito. Eu vou escolher qualquer um. Deixe-me adicionar essa imagem primeiro. Antes de adicionar isso, vou adicionar essa moldura para esta foto. Como eu já usei essa moldura, o quadrado de canto arredondado, também posso usá-la. Eu apenas pressiono Control D. Quando pressiono Command D ou Control D, posso duplicá-lo ou clicar com o botão direito do mouse e escolher essa opção, duplicar Depois disso, eu só uso isso aqui. Eu apenas expando a dimensão. Basta definir como eu quero essa moldura aqui. É assim que você pode definir sua própria moldura de imagem aqui. Eu só quero remover o traçado. No momento, não preciso de nenhum derrame aqui. Acabei de chegar a esse derrame. E aqui eu escolho nenhum derrame. Você pode ver agora que eu não o tenho. Eu só quero arrastar e soltar a foto. Eu apenas adiciono a imagem primeiro e arrasto e solto aqui. Então esta é a imagem que eu quero usar com esta página, e eu também quero ajustar os alinhamentos. Faremos isso mais tarde, não agora. Então, isso mostra que, você sabe, eles se sentem confortáveis e provam esse, você sabe, o serviço inesquecível. Eu também tenho outra foto aqui. Então, se você quiser, você sabe, fazer com que, você sabe, seu restaurante fosse especial com o hotel, você tem essa foto que você pode adicionar. Mas aqui, eles acessam a comida em vez de, você sabe, o chef estar fornecendo a comida. No entanto, você tem outras imagens também como essa. Parece perfeito demais. E há, você sabe, falta de, hum, cliente Então, eu não vou usar isso também. Você também pode usar essas imagens se quiser, porque mostra que basta clicar duas vezes na moldura, e eu apenas é uma cama, e mostra o quão bom é, você sabe, o serviço e como você se sente confortável com aquele hotel. Então, com base em, você sabe , a decisão, o que você acha, você pode adicionar a imagem agora, eu só quero sair com esta foto. Se houver uma mudança, farei isso mais tarde, não agora. Depois de adicionar essa foto, preciso adicionar a foto das pessoas aqui. Como é apenas um modelo, não tenho nenhuma foto de pessoas aqui, mas vou até esses elementos. Aqui eu vou escolher as pessoas e eu só escolho as fotos. Eu tenho muitas fotos de pessoas aqui. Basta adicionar uma, por exemplo, e adicionar a imagem dentro da moldura desenhando um dragão e aqui eu apenas expando para a visão facial deles Então, eu não preciso da visão do terire deles. Só preciso da cabeça sozinha. Isso é bom e aquela cabeça é visível e, você sabe, que também se encaixa na moldura. Eu quero adicionar mais três imagens. Então, eu só retrato. Vou te dar aquele retrato de pessoas diferentes. Eu apenas adiciono aqui e expando isso. Isso é suficiente. Você não precisa de muita visão completa do corpo. Isso parece muito bom. Vou adicionar mais uma foto aqui neste local e finalmente expandirei, vou adicionar mais uma foto aqui, então eu prefiro essa. Eu apenas arrasto e solto. Eu apenas aumento o tamanho da imagem conforme necessário. Foram adicionadas quatro imagens de acordo com a necessidade. Eu adicionei a imagem para esta página sobre. Foi assim que fui adicionado à página Sobre isso. Agora vou adicionar à página de instalações. Para a página de instalações, esta é a página de instalações. Eu ainda não adicionei nenhum layout, mas aqui eles forneceram seis instalações diferentes. Posso adicionar várias imagens com esse fundo. O que vou fazer aqui é agora, só quero adicionar a moldura. Você pode usar o mesmo estilo de moldura em todos os layouts para que haja uma unidade do design. Acabei de copiar essa moldura e chego a esta página, pressiono Control V. Eu entendi a foto Agora eu apenas seleciono esse quadro e excluo, para que a imagem seja excluída, não a imagem. Lembre-se, quando eu escolho uma moldura como essa e excluo essa moldura sozinha, que significa que a foto sozinha será excluída. Mas se eu pressionar novamente, delete, esse quadro será excluído. Então, com base na necessidade, você pode escolher o que fazer. Então, aqui vou adicionar seis fotos. E decida como você deseja adicionar que estamos fornecendo a instalação e você quer mostrar a imagem de seis serviços diferentes. Eu posso dividir isso assim: um, dois, três e três na área abaixo. No entanto, você pode aprimorar a borda da área de cima para baixo. Portanto, não se tratava do espaço, do que você tem, mas de como você vai apresentar. Portanto, tenha cuidado com isso. Se você quiser usar qualquer quadro na parte inferior para mencionar o recurso e o que há dentro desse recurso, você pode adicionar o retângulo que tem você pode adicionar o retângulo que tem a forma de formas vetoriais básicas como esta Eu apenas clico e adiciono um. Aqui vou ajustar o valor do raio do canto. Ele tem o valor padrão do raio do canto. Quero alterá-lo, clico nele e transformo em dois. Não são os dois, são apenas quatro e aqui quero mencionar esse valor angular em dez. Então está tudo bem e eu posso colocar essa forma dentro assim. Com base na necessidade que você pode adicionar, como você deseja adicionar? Às vezes, quero adicionar esse restaurante exclusivo dentro desse quadro e, depois disso, coloquei as informações de texto abaixo e cabe a você decidir como apresentar essas informações. E aqui também, eu quero acrescentar isso aqui também, eu quero adicionar isso. Com base na necessidade, como eu disse, você vai mencionar como deve ter a aparência. Eu apenas duplico a mesma coisa novamente duas vezes para poder adicionar o resto das informações aqui Dessa forma, você pode adicionar, você pode mudar a cor disso, você não precisa dessa cor, não vamos usá-la. Você pode usar assim ou assim, o que é uma melhor seleção de cores. Então, aqui eu vou adicionar essas imagens e vou adicionar as informações de texto. Deixe-me adicionar um por um. Vou adicionar este restaurante exclusivo primeiro. Então, eu simplesmente recorto usando o Control AX, pressiono Control V e adiciono as informações aqui. Aqui vou usar o alinhamento central, o alinhamento padrão é o Agora eu apenas aumento o quadro de texto, coloco o texto em negrito e expando o tamanho da fonte. Aqui eu vou escolher a cor da fonte para o marrom escuro. E se você quiser ter isso como letras maiúsculas, o que significa letras maiúsculas , posso escolher essa opção de maiúsculas. Agora, depois disso, abaixo disso, vou adicionar as informações detalhadas disso. E depois de adicionar isso, ajusto a área. É assim que posso apresentar ou você pode remover essas informações. Você só tem essa área, a categoria, que também é suficiente. Basicamente, é baseado na sua necessidade, aparência apenas com esse formato, você pode decidir se é suficiente ou não. Eu apenas adiciono essas informações porque, se elas não corresponderem ou não transmitirem as informações adequadas, posso removê-las posteriormente Agora não. Então, eu apenas adiciono assim. Eu quero remodelar esses objetos. Então, eu apenas seleciono todos os elementos. Eu apenas pressiono Shiftik e clico nesta área. Agora eu apenas pressiono a tecla Alt e pressiono o Shiftik, rastreio e Eu faço a mesma coisa aqui também. Eu tenho todos os três aqui. Agora, basta pressionar e segurar o Altiky e clicar e rastrear Eu posso colocar aqui. Então é assim que eu posso simplesmente duplicar novamente, e aqui eu quero adicionar as informações restantes Basta cortar isso e colar aqui. Basicamente, eu apenas o remodelo e, novamente, da mesma forma, escolho este spa de bem-estar depois de escolher que acabei de cortá-lo e aqui vou colar em uma terceira categoria Eu venho aqui e vou clicar duas vezes e colar. Agora, novamente, escolho as informações do texto, então chego a essa área e aqui quero selecionar o texto inteiro. Basta cortá-lo usando o Control X e eu vou colar aqui. Agora quero escolher os três restantes e fazer a mesma coisa. E eu escolho as informações de texto. Preciso ajustar o texto. Eu vou fazer isso. Eu também seleciono este Wi-Fi gratuito. É isso mesmo. Aqui, eu acabei de excluir essa informação. Aqui eu tenho o problema. Eu tenho duas maneiras de mudar isso. Primeiro, posso reduzir o tamanho da fonte ou selecionar uma fonte condensada Deixe-me reduzir um pouco o tamanho da fonte, e eu quero reduzir o espaço entre as linhas aqui, você pode ver o espaço entre essas duas linhas. Eu escolho mínimo, escolher essa configuração avançada e reduzir o espaço na linha. É assim que posso reduzir o espaço da linha e simplesmente me mover para cima e colocá-lo aqui. É assim que eu posso fazer esse trabalho, ter outra maneira. Você pode simplesmente reduzir a largura da moldura. Isso parece melhor e eu apenas adiciono o texto e aqui em vez do símbolo. É assim que você pode adicionar essas informações e eu vou adicionar as imagens aqui Com base na categoria Ts, tenha as imagens dentro desta sobre sálvia. A página da Ada. É uma página de instalações. Eu vou às instalações e aqui vou escolher as diferentes imagens com base na categoria. O primeiro é um restaurante exclusivo. Eu tenho essa imagem e tenho outra imagem que é essa. Parece um evento de casamento como esse. Acabei de adicionar essa foto. Esse é o perfeito. Depois de adicionar isso, vou adicionar a piscina. Eu escolho a imagem das minhas instalações. Deveria ser a piscina. Vou adicionar este. E eu também tenho um spa de bem-estar. Posso escolher com base em qual parece melhor. Aqui eu tenho essa foto e eu apenas arrasto e solto aqui, eu apenas arrasto e solto aqui. Isso parece realmente fantástico. Se você quiser escalar e posicionar assim, sim, você pode colocar assim. Aqui, mostra a expressão completa daquela garota e ela estava utilizando esse futuro. Agora preciso adicionar o centro de fitness e os dois restantes. Eu vou para as instalações novamente. Quero adicionar o centro de fitness. Eu escolho este, isso parece bom, e eu quero adicionar o próximo, que é a sala de conferências. Eu escolhi a instalação. Se for grande, você pode escolher este e se for de tamanho médio, com contagem de dez a 12 números, você pode escolher este e ficará bem para a conferência. E eu simplesmente excluo o fato de adicionar este. Parece grande. E se, você sabe, eles usam laptop, sim, essa é a melhor coisa, e pode, você sabe, ocupar muitas pessoas, não apenas dez ou 12. No entanto, com base apenas na necessidade, você adicionará. Então, depois de adicionar isso, vou adicionar o Wi-Fi gratuito. Então, eu apenas adiciono esta imagem ou esta imagem, que mostra que eles estão utilizando o recurso da Internet O que é suficiente. Também estou aqui, só que aquela garota estava usando os recursos da academia. É assim que adiciono as imagens para essas páginas e ajusto isso na próxima lição Vou mostrar como podemos adicionar as imagens para páginas futuras. 32. 31 Insira fotos para serviços e galeria: Nesta lição, mostrarei como podemos adicionar imagens para serviços e páginas de galeria. Já adicionamos as imagens das páginas sobre nós e instalações, e aqui vou adicionar as imagens da página de serviços. Portanto, já temos a lista de informações, como quais são todos esses serviços fornecidos. Eu vou às instalações e escolho os serviços. No interior, tenho apenas três fotos porque aqui não preciso despejar muitas imagens nossa página anterior, as páginas de instalações, já adicionamos uma quantidade suficiente de informações necessárias para o público ou para o cliente. Então, aqui vou adicionar a melhor imagem necessária para explicar todas essas informações. Posso adicionar algo assim, para que forneça informações suficientes. Antes disso, quero acrescentar como preciso ter o layout dessas informações? Para fazer isso, eu apenas ajusto as informações e aqui vou adicionar as fotos. Para adicionar a estrutura das imagens, chego a essa categoria de elementos e aqui tenho a opção chamada grades. As grades são os contêineres coletivos de imagens. Você pode ver aqui que eu uso a palavra cria, não grade ou linha de grade. Eu só uso grades. Depois de adicionar as grades, tenho todos os tipos de grades aqui. Eu escolho o C all grids. Em C, todas as grades, você pode ver que começa com uma única grade de imagem No GL, você tem alinhamentos diferentes. Você pode ver que duas imagens verticais, duas imagens horizontais, e uma é maior, outra é pequena. Os diferentes padrões existem para dois. Da mesma forma que você tem padrões diferentes para os três. Você pode usá-los para utilizar as imagens múltiplas em cada design de página da web. Agora, vou adicionar três imagens. Eu tenho possíveis aparições diferentes aqui. Eu posso escolher qual deles eu preciso para isso. Novamente, escolho este e clico que ele foi automaticamente carregado completamente dentro desta seção ou página. Eu posso ajustar como eu preciso disso no meu layout. Podemos ver como eu simplesmente ajusto isso. É assim que posso ajustar essa página. Para ter outras formas, tenho a opção de adicionar as imagens em três, mas com um arranjo de layout diferente. Com base na necessidade, você pode escolher como precisamos? E eu apenas me ajusto de acordo com minha necessidade. É assim que posso adicionar a moldura. Depois de adicionar o quadro, adicionarei as imagens da categoria uploader, que são dos serviços Aqui eu tenho três. Eu escolho o primeiro, eu apenas adiciono aqui, e eu escolho o segundo, eu apenas adiciono aqui, eu escolho o terceiro e adiciono aqui. Depois de adicionar isso, basta clicar duas vezes e saber como quero isso dentro desses quadros. Então, aqui também isso. Como eu preciso? E aqui também eu sou exatamente isso. Você pode mostrar a esse tipo de serviço o que eles fazem dentro desse quadro. Você também pode ajustar o espaço entre isso. Eu tenho a opção de espaço. Você pode gerenciar isso. Você tem a opção aqui de adicionar o canto arredondado. Então, à medida que usamos o valor do raio de dez, acabei de adicioná-lo. Agora, eu não preciso de nenhum tamanho de traço. Eu também não usei isso anteriormente, então não precisamos disso. Se você precisar, você pode usá-lo. E eu tenho que me ajustar para fazer os trabalhos restantes mais tarde. Acabei de adicionar as fotos aqui e reduzo a altura. Não preciso de muita informação aqui. É assim que eu adiciono esta página de serviços. Em seguida, vou adicionar as imagens para a página de calorias. Eu venho para a galeria e volto para essa quinta categoria, que é caloria Aqui eu tenho muitas imagens para o presente, as fotos com vistas diferentes. Eu apenas expando isso conforme necessário. Aqui eu quero adicionar essas informações com cinco categorias diferentes De forma criativa, vamos apresentar todas essas imagens de acordo com o próximo. Deixe-me mostrar como podemos adicionar. Você pode usar uma única imagem para cada categoria ou imagens duplas ou três imagens porque recebi muitas opções aqui. Portanto, com base na necessidade, você pode escolher quais são todos os necessários para esta página. Agora eu apenas removo esses códigos duplos de cada categoria. Depois disso, vou adicionar as imagens. Você pode dividir em cinco categorias e adicionar as imagens à moldura, ou também pode apresentar dessa forma. Mas você já usou dessa forma. Você pode usar algumas maneiras diferentes de colocar essas imagens. Eu tenho as categorias aqui e vou colocar todas e cada uma delas. Mais uma vez, chego a isso e escolho essa nota. Você vê aqui que temos categorias diferentes. Você também pode usar isso de uma maneira diferente. Eu vou te mostrar isso. Acabei de clicar nessa opção. Três, e eu apenas reduzo a altura e a largura disso. Agora você pode ver que eu posso adicionar três imagens aqui para uma categoria específica ou para uma única categoria. Então, depende de você novamente. Você vai decidir como vai se apresentar. Você tem outro jeito. Você pode usar um único quadro. Então eu venho aqui e vou escolher a moldura anterior. Eu apenas copio isso, e aqui eu colo, e vou ajustar isso. Se você quiser mostrar essa imagem em um tamanho grande, que está ganhando mais atenção, você pode adicioná-la dessa forma. Você também pode adicionar as informações aqui, aqui, não tenho informações detalhadas, mas é apenas uma galeria para que você não precise se preocupar com o restante. Acabei de duplicar e tenho outra foto aqui dentro da moldura e excluo as duas molduras Agora eu tenho a chance de expandir, então eu simplesmente a expando. Eu apenas ajusto um pouco e posso colocar as imagens aqui agora. Então, eu apenas dupliquei isso e tenho seis imagens agora. Vou acrescentar agora quais são todas aquelas imagens que adquiri do meu conteúdo. Eu vou para o upload agora e vou para esta galeria. Aqui posso adicionar o quarto deluxe e todas as informações. Eu escolhi este primeiro, e aqui vou adicionar aquele quarto deluxe e outras instalações Depois disso, vou adicionar o jantar. Acabei de adicionar a sala de jantar. Aqui está, mas eu quero escolher uma categoria assim. Eles estão apenas preparando os alimentos ou eu também posso escolher os alimentos que eles já criaram. Acabei de adicionar este também porque os dois são fornecidos aqui. O que estou fazendo aqui é, novamente, adicionar essa aparência. Acabei de adicionar essa foto aqui, e aqui vou adicionar a categoria de alimentos que está disponível naquele restaurante. Aqui, eu vou escolher. Então eu apenas arrasto e solto aqui. Depois disso, vou adicionar a próxima instalação. Aqui eu tenho o refresco e vou adicionar o próximo Eu quero adicionar esta foto, o bar dentro do meu hotel e quero adicionar as informações restantes. Vou adicionar a próxima imagem da categoria como esta, tudo bem. Depois disso, vou adicionar o restante. Acabei de duplicar isso e aqui eu excluo e excluo isso também Agora, quero adicionar o ambiente do spa e os detalhes dos eventos do local Vou adicionar o ambiente do spa. Antes disso, posso adicionar detalhes do local. Essa é aquela e se houver alguma outra imagem sobre os eventos, que possa ter uma melhor aparência, eu vou para a página de instalações. Aqui eu tenho aquela sala de conferências que posso adicionar aqui, e aqui eu quero adicionar minhas imagens de spa. Acabei de deletar essas molduras. Mais uma vez, venho a esta galeria e posso adicionar aquela piscina. E depois de adicionar isso, também posso adicionar a imagem do serviço de spa. Então, eu apenas adiciono isso aqui. Então é assim que você pode adicionar todas as fotos dentro do Canva, que está com uma galeria de categorias Então, tive que fazer muitos outros trabalhos com o texto e todos os alinhamentos que faremos mais tarde Mas agora você pode ver que adicionamos as imagens de todas as páginas e vamos criar ainda mais a página de contato. Ok. 33. 32 Edição de imagens usando o Canva: Nesta lição, mostrarei como podemos editar imagens dentro do Canva Em nossas lições anteriores, ele mostra as coisas básicas. Mas aqui eu vou te mostrar a visão detalhada. Começo com isso sobre um sábio. Eu só amplio o zoom. Em cerca de um sábio, usei cinco imagens, quatro para a linha. Você pode ver isso como depoimento, e o quinto é a imagem que mostra esses serviços Então, aqui, quando eu quero editar a imagem, eu escolho a imagem primeiro. Depois de escolher essa imagem, chego a essa opção de edição. Eu clico na opção Editar na parte superior. Ele mostra a lista de opções de edição que temos para as imagens. Na parte superior, você pode ver que temos a opção de seleção. Mostra tudo porque eu selecionei a imagem inteira. Agora, se você quiser selecionar o segmento ou objeto específico da imagem, você pode usar essa opção, clique em. Clique aqui, você tem a imagem aqui. Você pode selecionar qualquer imagem ou objeto de que precisa sozinho a partir dessa Eu posso escolher uma comida. Se você quiser selecionar vários, você pode pressionar a tecla shift. Posso adicionar mais como esta. Dessa forma, se quiser, você também pode selecionar isso. Ou você tem outra maneira de escovar. Escova hale. Quando escolho um pincel, posso criar uma seleção de pasta de pincel como essa Veja se as áreas selecionadas estão marcadas com a cor roxa. Assim, você pode ajustar os pincéis e fazer o resto do processo de seleção de acordo com a necessidade Depois disso, vou para a próxima. Nós temos o primeiro plano. A imagem em si rastreia o primeiro plano e o plano de fundo dessa Você pode ver claramente que esse é o primeiro plano da imagem, mas isso é um plano de fundo Se você quiser selecionar o plano de fundo ao redor, eu posso escolher esse plano de fundo. Quando você seleciona e pode fazer todas as modificações necessárias, vou ajustar a cor ou a escuridão. Você pode fazer todas essas coisas apenas para o plano de fundo e para o primeiro plano ou apenas para as áreas selecionadas É assim que temos essas opções de seleção. Mas eu escolho tudo porque quero ajustar todo o ajuste da imagem. Por padrão, temos a opção chamada Ajuste automático. Você pode usar isso, basta clicar aqui e, antes disso, ver a prévia da imagem. Eu só clico aqui e vejo os resultados. Ele ajusta automaticamente as cores e os contras, todas essas coisas Eu pressiono Control Z ou dou Desfazer. Esta é a imagem original e, após esse ajuste automático, temos a imagem assim. Ele tem alguns aprimoramentos. Novamente, pressione desfazer, quero fazer essas alterações manualmente. Na edição de imagens, a princípio, tenho a opção chamada balanço de branco. Então, temos a seleção. Depois disso, temos o ajuste automático. E se você quiser ajustar o equilíbrio de branco nesta imagem, você pode usar essa opção. Assim, posso ajustar a temperatura da imagem, se posso aquecê-la assim. Então, se você tem um tom caloroso para, você sabe, o site específico ou o design, você pode usá-lo. Ou se você tem um tema legal como azul e outras coisas, você pode escolher este. Então, as duas coisas são muito boas de acordo com a seleção. E se você quiser se manter neutro, basta adicionar valor zero. E temos a opção chamada tonalidade. Se você quiser manter um determinado valor de tonalidade com imagens, você pode ajustar o valor da tonalidade aqui e você chegará É assim que esses dois ajustes, como temperatura e tonalidade, funcionam com a imagem do Canva, correção de cores Depois disso, eu venho para essa área. Aqui eu tenho a opção chamada luz. Eu tenho brilho, contras, sombras de destaque, ajustes de branco e preto, todas essas coisas que posso fazer usando a Esse ajuste de brilho aumentará o valor geral do brilho da imagem. Parece bom. Você pode ver que podemos ver mais detalhes com esse valor de brilho mais alto. E o contraste, se você quiser aumentar os detalhes, pode usá-lo. Isso é contraste e destaques. Em uma imagem ou desenho, você terá três componentes principais. O primeiro são os destaques, que significa a parte brilhante ou os pixels brilhantes da imagem. Veja, esse é o destaque, esse é o destaque, e essas são as áreas destacadas aqui e aqui. Todas essas coisas são chamadas de destaques. Em seguida, temos as sombras. Sombras significam os pixels escuros do design. Se quiser ajustar essas coisas sozinho, você pode usar os ajustes de destaque. Você pode ver como eu ajusto os destaques dos pixels. Em um alimento, você pode ver essa mudança claramente da mesma forma, você pode ajustar as sombras de cada pixel Se você quiser ajustar apenas o preto, não todas as sombras, você pode usar essa opção, para que ela ajuste claramente apenas o pixel preto Da mesma forma, se você quiser ajustar o branco sozinho, você pode usar isso. Portanto, com base na sua necessidade, você pode ajustar como precisa da imagem. Na maioria das vezes, usamos apenas esse ajuste de brilho que, por si só, é suficiente para minha foto. Depois dos slides, eu tenho uma cor, e se você quiser inverter o valor da cor, como temos a aparência negativa da imagem do vídeo, você pode usar essa opção inverter No entanto, na maioria das vezes não o usamos, então eu o reverto novamente. Em seguida, temos a vibração e saturação. Ambos são diferentes. Deixe-me mostrar isso com um exemplo. A saturação aumentará apenas, os tons quentes e os valores das cores primárias se tornarão mais altos Você pode ver aqui como fica, todos esses pixels. Saturação: se eu mover isso no valor negativo, será dessaturada imagem inteira será dessaturada em direção à escala Você pode ver que é assim que essa saturação funciona. Eu saturo lentamente. Isso é 100% que temos por natureza, e se você quiser aumentar o valor de saturação, pode optar por mais valores de saturação Agora eu chego a essa vibração. vibração proporcionará os melhores pixels vibrantes, quentes e de contraste com uma imagem Quando reduzir, terá menos número, mas não escala de cinza. É assim que a vibração funciona. Depois disso, tenho o valor da edição de cores. Então, nesta foto, temos as duas cores principais. Qual é esse verde e o segundo é o marrom. Então, se você quiser ajustar as cores da imagem diretamente, você pode usar essa opção. Mas, na maioria das vezes, não o usamos. Mas aqui eu vou editar a cor. Acabei de clicar no primeiro, que é verde. Quando eu clico nele, ele mostra o brilho da saturação de matiz aqui Então, usando a sugestão, posso mudar a cor do valor específico Saturação, posso dessaturar ou saturar o pixel Usando esse brilho, posso aumentar a luz da imagem. Deixe-me te mostrar isso. Primeiro eu aumento o valor da saturação , está muito bom agora e posso ajustar o brilho desses valores. Você pode ver isso. Ao mesmo tempo, se eu quiser mudar a cor desses pixels, na maioria das vezes, neste lugar, não vamos usá-lo, não é obrigatório, mas eu só mostro porque você precisa saber como funciona. Você pode ver como isso muda a cor do pixel. A maior parte da necessidade, se você precisar, pode usar de outra forma, basta mantê-la em zero. É assim que essa edição de cores funciona e afeta somente a cor selecionada. Da mesma forma, se eu quiser alterar a cor desse valor com a imagem, você pode usar essa e fazer todas as alterações com ela. É assim que essa edição de cores funcionou. Depois disso, eu tenho uma textura. Ele mostra três categorias: nitidez, nitidez e Wigd A opção Sharp mostra como ela transformou a imagem desfocada ou a imagem normal em uma imagem nítida Deixe-me ampliar essa área para que você possa ver as diferenças. Agora eu apenas aumento a nitidez de zero e você pode ver o quão nítida a imagem parece Anteriormente, tínhamos muita confusão. Eu acabei de fazer isso zero novamente. Você pode ver que há muito desfoque. Mas quando eu aumento a nitidez, ela tem pixels mais nítidos Eu me ajusto dessa forma. Da mesma forma, se eu mover isso para menos, isso borrará a área do objeto. Com base na necessidade, você pode usar a nitidez. Depois disso, eu tenho uma clareza. Clarity fornecerá os melhores valores de pixel para os detalhes e, claro, se você precisar, você o usará Então, a terceira opção é acender. Usando isso, posso ajustar a iluminação geral da imagem de externa para interna. Você pode ver que está claro no centro, mas quando se aproxima da borda, parece preto. Da mesma forma, se eu precisar em branco, você pode usar isso. É assim que essas opções funcionam para fazer esses ajustes de cores e editar esses recursos. No entanto, se você quiser fazer os trabalhos de edição restantes, como eu, basta escolher isso de volta. Eu tenho uma opção chamada estúdio mágico aqui. Usando isso, você pode editar completamente a imagem a partir do fundo e de outras coisas. Mas você definitivamente precisa desse procon para isso. Não posso usar essas opções diretamente para editar a imagem. No entanto, se quiser, você pode usar essa opção de corte. Usando o corte, você pode cortar o segmento específico da imagem da esquerda para a direita ou de cima para baixo, ou em todas as quatro direções, basta cortar a imagem usando a opção chamada recortar. Ao mesmo tempo, se quiser virar a imagem, você pode escolher uma virada e escolher a horizontal, da mesma forma que você pode virar a imagem na É assim que fazemos os trabalhos de edição de imagens com o Canva. Você vai ajustar todas as imagens da mesma forma. Aqui eu tenho menos luz, então escolho o ajuste de edição. Aqui eu quero aumentar o valor do brilho. Parece uma quantidade excessiva de valor de cor. Eu apenas reduzo um pouco usando a saturação. Não preciso de muita quantidade de cores que dominem a página inteira Aqui também, você pode ver que, no lado esquerdo, tenho mais valor sombrio, mas aqui tenho destaques. Eu escolho uma foto e chego a essa opção chamada preta. Eu só o preto e dá ver como dói só o preto, neutralizo esse valor e posso ajustar o valor da sombra, basta aumentar os detalhes da sombra e um pouco de brilho. Agora eu neutralizei esse tom de cor da esquerda e da direita. É assim que você pode ajustar essas imagens O que enviamos aqui também tem muitas opções. Com base na necessidade, você pode fazer essas alterações. Às vezes, se você quiser manter a visão dessaturada de todas as fotos como essa, alguns sites, se tiverem o tema em preto e branco, também podem ser usados dessa forma Mas de qualquer forma, aqui eu não preciso, basta dar um. É assim que podemos fazer todos os trabalhos de edição de imagens com o Canva 34. 33 Integre vídeos usando as ferramentas de vídeo do Canva: Nesta lição, mostrarei como podemos importar e usar vídeos em nossa página do Canva Já vimos como usamos essa importação e fazemos o trabalho em nossas aulas anteriores. Mas aí eu disse que lhe darei as informações detalhadas nas próximas aulas. Aqui vamos ver isso. Então, eu carrego apenas um vídeo anteriormente. Você pode ver que esse é o único vídeo. Agora eu quero fazer upload de vários arquivos, então eu só vou fazer o upload de arquivos. Lá você pode ver que temos mais três vídeos. Eu escolho todos os três vídeos, eu escolho Carregar. Esses arquivos de vídeo serão enviados automaticamente e você poderá ver o progresso, o upload estava sendo feito e todos os quatro arquivos que estão sendo pré-visualizados aqui. Esses três arquivos ainda não foram enviados. É por isso que você só tem o vídeo de qualidade básica com pré-visualização. Posso carregar a imagem ou o vídeo dentro do contêiner, como eu disse anteriormente. Se eu quiser adicionar o vídeo, colocamos todas as informações na forma de imagem. Agora, se você quiser adicionar esses conteúdos na forma de vídeo também, você pode fazer isso. Para todas essas coisas, o que você deve fazer agora é apenas adicionar um quadro de vídeo ou também pode usá-lo diretamente. Mas se você quiser controlar esse objeto dentro do limite, definitivamente, você pode escolher aquele quadro de vídeo Agora eu apenas expando isso, a área de instalações, só quero mostrar que , se precisarmos , só vamos usá-la. Acabei de aumentar essa área e aqui vou mostrar a prévia do vídeo. Então, para acrescentar isso, eu venho a este lugar elementos, vou digitar molduras. Aqui eu tenho um retângulo ao redor da moldura retangular. Acabei de adicionar um e ajustei o quadro e ajusto o canto em dez agora esse é um quadro de vídeo que eu tenho e, se eu quiser, posso editar mais qualquer coisa. Depois de fazer esse trabalho, quero adicionar o vídeo, então vou para os uploads novamente. Agora eu tenho quatro vídeos aqui. Eu escolho esse vídeo. Eu já fiz o upload anteriormente e os vídeos restantes estão em processo. Eu clico aqui e acrescento que esse vídeo foi carregado aqui e apenas reduzi vídeo foi carregado aqui o tamanho do quadro. Estava ficando carregado. Então, depois de adicionar isso, eu só quero arrastar e soltar dentro da minha página do Canva Então eu simplesmente arrasto e solto dentro. Agora esse vídeo foi colocado dentro desse quadro. Eu posso jogar e posso ter uma prévia disso. Está apenas mostrando a prévia. Então, mostra a prévia aqui, e é assim que esse vídeo tem a estrutura. Vou mostrar como podemos fazer as modificações necessárias neste vídeo. Faça isso. Acabei de selecionar esse quadro de vídeo. Veja aqui, eu só clico uma vez e recebi esta moldura. O controle do quadro está aqui. Eu posso simplesmente pressionar o botão Play e pausar. Também posso usar um controle deslizante para ajustar a posição atual do vídeo Agora, quando eu seleciono esse quadro ou o vídeo, na parte superior desta barra de ferramentas, você pode ver que eu tenho a opção de edição Eu tenho a opção de corte. Eu tenho um removedor de PG para arquivos de imagem e vídeo, mas isso é apenas para usuários profissionais. Não precisamos de nenhum lugar aqui. Então, eu uso essa opção de edição agora. Usando essa edição, posso controlar a reprodução do vídeo. Ao mesmo tempo, posso repetir o vídeo continuamente. Por padrão, estava no modo desligado e a reprodução automática estava no modo ligado. Quando a página da web for rolada para baixo, o vídeo será reproduzido automaticamente Se você quiser, você pode habilitar isso. Caso contrário, você pode desativá-lo. Na maioria deles, precisamos jogar isso automaticamente. Então, eu mantenho essa reprodução automaticamente no modo de ativação. Agora, eu não quero terminar esses segundos metódicos, mas se você quiser otimizar, sim, você precisa manter Caso contrário, se você quiser jogar isso repetidamente, basta habilitar essa reprodução no pwd Eu só jogo aqui, é uma velocidade normal. A velocidade é uma. Agora eu posso mudar esse valor para um ponto em 0,5 e eu disse isso para 0,25 Quando eu disse isso em 0,25, deixe-me ver como reproduzimos porque mudamos a velocidade do vídeo para 75 por cento, então o impacto será enorme Você também pode fazer o mesmo ajuste na parte superior aqui. Você pode ver que ele mostra a velocidade do vídeo e eu posso ajustar se posso reduzir ou posso aumentar. Eu posso fazer as duas coisas. Eu só jogo aqui, você pode ver o quão lentamente ele se move. Agora também posso aumentar a velocidade do normal. Por padrão, é um, eu disse, se eu quiser aumentar dois, posso aumentar até dois, que o vídeo seja reproduzido o mais rápido possível. Ou você de um, você pode movê-lo para zero ou 0,25 ou dois, acordo com a necessidade, você pode usá-lo Você tem as mesmas opções de ajuste, o que temos para imagens, pode ajustar a temperatura, as luzes, a cor, todas essas coisas. Você tem o ajuste automático. Eu apenas pressiono o botão Voltar. Aqui também, temos os filtros que são os valores predefinidos. Se você quiser usar qualquer filtro, basta clicar lá e o impacto será na pré-visualização. Se você quiser, sim, você pode ir em frente. Caso contrário, você não precisará dele, volte aos filtros. Agora, a duração desse vídeo, você pode ver que tem 45 segundos e 0,6 milissegundos. Agora, se eu quiser editar a duração do vídeo acordo com a necessidade, você pode fazer isso. Para fazer isso, temos essa opção chamada trim. Eu clico aqui Trim. Quando eu escolho isso aqui, mostra a duração total. Ao mesmo tempo, mostra os controles de jogo aqui. No início, temos o controle deslizante roxo e no final também temos o controle deslizante da mesma cor Se você quiser cortar um segmento específico sozinho, basta deslizar e ajustar e selecionar o tipo de duração necessária para este vídeo Depois de fazer isso, basta pressionar o botão Play, para que ele reproduza qual foi a seleção ou área e mostre claramente a duração também para você. Se você quiser reduzir isso para uma duração específica de 10 segundos, posso adicioná-la diretamente. Você pode ver que eu adicionei dez, mas era 9,9 e você pode ver que muda automaticamente E se eu quiser me mover, posso clicar aqui e clicar em Mover. Eu posso selecionar esses dez segundos em qualquer lugar do começo ao fim. No entanto, se você quiser aumentar ou reduzir a duração, apenas você tocará nesses pontos de corte no início e no final É assim que eu faço o trabalho. Depois de fazer todo o trabalho, escolho concluído. A duração deste vídeo será apenas dez segundos, não mais de 40 segundos. É assim que fazemos os trabalhos de edição do vídeo. Acabamos de adicionar e, se precisarmos, teremos o vídeo completo com a estrutura original. Mas se você não precisa e vai fazer as modificações, sim, você pode fazer todas as modificações do vídeo de acordo com a necessidade. 35. 34 Formatar texto para facilitar a leitura: Nesta lição, vou mostrar como vamos fazer a formatação de texto usando o Canva Quando criamos a página inicial deste site, fizemos alguns trabalhos de processamento de texto. E aqui vamos às coisas restantes, e deixe-me mostrar como vamos fazer isso. Então, primeiro, eu escolho esse texto de parágrafo. Na parte superior, você pode ver que temos o tipo de fonte, para que possamos escolher qual tipo de fonte você precisa. E depois disso, você tem o tamanho da fonte. Como eu disse, as 12 fontes são suficientes para o site. Você não precisa adicionar muito tamanho de fonte que atrapalhe todo o design e o redobramento Que você tem a cor da fonte. Assim, você pode escolher a cor da fonte de que precisa. Quando você escolhe a cor da fonte, ela mostra a cor do texto aqui e você pode escolher a cor desejada. Aqui, ele mostra uma lista de cores usadas no design do site. Quando você tem um fundo escuro, você pode usar texto claro, mas aqui temos um fundo claro. Portanto, você pode optar por esse tipo de informação de texto escuro ou mais escuro. No entanto, eu escolho este. Então aqui eu usei apenas esse verde escuro. Você precisa usar o mesmo tipo de cor em todo o texto em vez de usá-la de uma maneira diferente. Isso não é bom. Depois disso, você tem o negrito. Se quiser, você pode usar esse negrito e ter as opções de itálico e sublinhado Para fazer uma greve, quando precisar, você pode fazer isso. Eu simplesmente não preciso disso agora. Depois disso, você tem a opção chamada maiúscula. Se você quiser todos esses títulos em maiúsculas, pode optar por Basta selecionar a moldura e clicar nessa letra maiúscula. Se não precisar, você pode convertê-lo novamente em minúsculas De qualquer forma, se você estiver criando o conteúdo, é melhor tentar criar com uma frase em maiúscula ou minúscula para que você possa alterá-la para maiúscula a qualquer momento Se você digitar as informações em maiúsculas, não poderá alterá-las para minúsculas aqui, poderá transformar somente as minúsculas em maiúsculas Não podemos mudar a letra maiúscula para a minúscula. Não se esqueça disso, você tem o alinhamento. Como eu disse, tenho três alinhamentos aqui para esquerda, centro e direita Mas depois desses três, temos o quarto, que é justificar. Aqui eu vou te mostrar essa opção. Eu escolho este parágrafo. Era um alinhamento à esquerda. Eu escolho o centro, você pode ver que a última linha, era um centro, não apenas a última linha, outras três linhas também. Eu escolho o certo, isso mostra o alinhamento certo. Finalmente, escolho essa justificativa. Quando eu escolho justificar, além da última linha, as três primeiras linhas têm o mesmo alinhamento no lado esquerdo e direito Mas quando eu escolher isso, novamente, ele se transformará em alinhamento à esquerda, o que significa que no lado esquerdo, você tem o mesmo alinhamento, não no lado direito De qualquer forma, a maior parte do site terá esse alinhamento à esquerda, que terá melhor legibilidade Você não precisa transformar isso em alinhamento justificado ou alinhamento correto Basta manter isso em um alinhamento à esquerda. Depois disso, você tem uma lista. Aqui você pode ver que temos três categorias diferentes de instalações. Você tem essa opção chamada lista. Quando você ativa essa lista, ela mostra a lista dos dados que você recebe, como selecionamos todas essas coisas. Novamente, clico na mesma lista de opções. Portanto, se você já aplicar a lista, ela adicionará o formulário com marcadores E, novamente, se você adicionar o mesmo botão, ele adicionará um, dois, três. E, novamente, se eu escolher o mesmo, não acrescentará nada. Então, isso também tem um único atalho, o botão, clique uma vez adicionando o marcador Novamente, clique na lista de números e, novamente, clique para não ter nada. Então, por padrão, ele terá o marcador quando você escolher isso Depois disso, seleciono este parágrafo. Aqui eu tenho a opção chamada configuração avançada. Aqui eu clico aqui para ver a configuração avançada. Eu tenho um espaçamento entre letras. Por padrão, é zero. Eu posso ajustar o espaço entre cada personagem. Em trabalhos de design, como projetos rápidos, compartilhamos essas informações com o rastreamento de nomes. Mas eu só preciso de zero aqui, e o espaçamento padrão entre linhas é 1,4 com o Canva Você pode ajustar se quiser, pode aumentar ou diminuir. Então, com base na necessidade, você pode escolher, mas eu apenas mantenho o 01.4 Depois disso, você tem a caixa de texto âncora. Então, na maioria das vezes, não apenas na maioria das vezes. Em todo o tempo, todas as informações de texto serão organizadas com a linha de base desse texto Mas se você quiser ajustar a partir da linha de base, você pode ajustar isso a partir do Bittle Se você quiser, pode ir mais longe. Caso contrário, não é necessário, então você terá mais configurações. Então, quando clico em mais configurações no lado esquerdo, ele mostra o espaçamento entre letras, o espaçamento entre linhas e o valor da formatação Eu posso mudar isso para texto normal ou sobrescrito ou subscrito, com base na necessidade, você pode escolher o que E você tem os valores de kerning. Então, se você quiser, você pode ajustar isso também usando isso e ligadura Essas são as opções que temos com as configurações avançadas, e são completamente sobre um texto, e temos a transparência e os efeitos. Todas essas coisas são descanso. Hum, se você selecionou o texto sozinho, você tem o ex. Eu vou te mostrar como vamos nos concentrar em nossas aulas A. Portanto, temos outra opção importante, você sabe, chamada estilo de cópia. Assim, com a ajuda do estilo de cópia, posso copiar qualquer informação e colar em outro texto. Aqui você pode ver, eu tenho quatro estilos de fonte diferentes aqui. Aqui eu tenho Canvas Sands e aqui eu tenho DM Sands e aqui eu tenho cobre, e aqui eu Então, eu só preciso dos mesmos braços do Canvas ao redor de todo o feedback. Se eu quiser o mesmo tamanho de fonte, cor , alinhamento, tudo igual, posso usar essa opção Para fazer isso, basta clicar nesse estilo de cópia. Eu tenho uma tecla de atalho, que é Control OTs ou Command Autry. Agora, eu clico aqui. Ao selecionar esse horário, você precisa estar com a seleção. Novamente, veja aqui a fonte já selecionada. Essa é a fonte que eu preciso nos meus três destinos. Eu selecionei essa fonte e, em seguida, estou clicando nesta opção, estilo de cópia. Mostra o estilo copiado para a prancheta. Agora eu escolho diretamente para esse campo de texto. Essa propriedade de fonte será completamente adicionada com isso. Novamente, escolho que esta propriedade será copiada e aqui eu clico novamente. Essa mesma propriedade foi copiada e substituída. Novamente, eu clico aqui e clico aqui. É assim que você pode copiar qualquer estilo e podemos adicionar o mesmo estilo com outro objeto. Essa é a mais fácil. Você não precisa gastar muito tempo fazendo essas mudanças, ajustes, perfeições ou processos de duplicação. Basta concluir o trabalho e copiar o estilo e colar o estilo. É assim que usamos essas informações de texto, alinhamento e opções de texto com o trabalho de web design do Canva 36. 35 Usar elementos do Canva como ícones e ilustrações: Nesta lição, mostrarei como usamos ícones gráficos e ilustrações em nosso site Também podemos acessar todos esses disquetes usando elementos do Canva. Deixe-me mostrar como podemos fazer isso. Na página inicial, a maioria dos sites terá ilustrações e gráficos Deixe-me mostrar o que são todas essas coisas e como fazemos isso. No lado esquerdo, escolho a opção chamada elementos. Eu só clico porque quando você simplesmente passa o mouse até lá, não apenas para elementos, com um texto, design e upload de qualquer coisa, nós simplesmente rolamos e tudo muda. Mas quando você sair disso, ele se esconderá. Mas se eu escolher com o mouse, basta clicar lá e ele continuará lá, mesmo se você for para outro lugar e ele estará lá. Aqui vou digitar os chamados ícones da web. Então, quando eu digito ícones da web, você pode ver que em gráficos e fotos, eles mostram muitos ícones. Eu apenas clico em C A. Então, ele mostra muitos ícones que você pode usar no design do site. Por exemplo, esta é a página inicial e, em nossas páginas adicionais, adicionarei o ícone para voltar ou navegar de volta à página inicial Então, agora vou adicionar o ícone inicial. Então, ele mostra muitos ícones domésticos. Eu posso usar o que você quiser, você pode adicionar e você pode utilizá-lo. Aqui eu tenho muitos botões de início. Vou adicionar um botão. Eu vou usar esse. Isso parece bom, e basta ir para a segunda página. Acabei de expandir um pouco esta seção aqui, vou adicionar esta casa. Acabei de clicar aqui, esse elemento foi adicionado. Eu apenas reduzo o tamanho e reduzo mais. Aqui eu quero adicioná-lo. Acabei de adicioná-lo aqui na parte inferior desta página da web, a seção. Agora, depois disso, eu escolho e escolho essa cor. Eu posso escolher a cor que eu quiser e também posso mudar mais o tamanho É assim que eu posso usar gráficos nos ícones, e aqui eu só quero acrescentar que alguém estava escrevendo com uma caneta aquele elemento que eu preciso adicionar. Aqui eu apenas digito a escrita com o ícone de uma caneta. Temos muitos ícones aqui. Eu escolho os gráficos. Ele oferece muitos ícones como esse. Você pode escolher o gratuito e adicionar Eu escolho aquele com uma mão ou sem mão. É baseado na sua necessidade naquele lugar. Eu vou escolher aquele desde o início. Eu escolho essa caligrafia. Sim, isso parece bom. Ícone de caligrafia e muitas coisas estão lá. Mas então eu posso usar esse qualquer um desses, ambos parecem bons. Mas se eu tiver aquele com visão de contorno, poderia ser muito melhor Mas de qualquer forma, não há problema. Eu vou usar esse. Eu só clico aqui. Novamente, ele foi adicionado, e aqui eu reduzo o tamanho e vou adicioná-lo aqui. Eu reduzo mais o tamanho. Dessa forma, você também pode adicionar onde quiser e onde precisar desse ícone quiser e onde precisar desse ícone para aumentar mais o espaço da linha e ter uma visão melhor com o melhor espaço da linha. Acabamos de dizer que eu preciso de um ícone melhor. Então, basta ter um ícone de escrita. Parece bom. Aqui você pode ver que parece muito bom. Esse é o tipo de ícone que eu preciso, mas que tenha, você sabe, apenas com o Pro, eu não o tenho com acesso gratuito, então não posso usá-lo. Só preciso de uma caneta sozinha, se não a tiver com a mão, e aqui fica bem. Eu posso usá-lo. Então eu posso simplesmente colocar aquela caneta aqui ou ali, onde eu quiser. Também posso mudar a cor aqui. É assim que você pode adicionar seu ícone gráfico a partir desta página do Canva Em cada página, você precisa desses símbolos, dos ícones necessários, que você adicionará. Agora, da mesma forma, chego aos elementos. Se você precisar de alguns gráficos básicos para o plano de fundo do site, você pode adicionar Eu vou adicionar os gráficos. Essa é uma palavra-chave que acabei de adicionar. Eu pressiono Enter, eu escolho C. Basicamente aparece em toda a ilustração sobre o site. Eu não preciso disso. Eu só preciso de gráficos de linha secundária. Quando eu digito gráficos de linha filha, eles mostram muitos gráficos de linha filha, e aqui eu apenas adiciono esses pontos de meio tom E se eu precisar disso para minha página da web, posso adicioná-lo e adicionar a cor de que preciso. Então, com base na demanda, que esse site tem, você pode adicionar os gráficos, e isso deve ser significativo. Não se esqueça de que , como estava disponível com esses gráficos do Canva, você não pode usar, não pode adicionar Você só precisa de um motivo, um forte motivo para utilizar isso em seu design. Caso contrário, isso será significativo. Então, sem sentido, não significativo. Então é assim que vamos adicionar os gráficos, e eu vou adicionar os gráficos baseados em férias ou gráficos baseados em hotéis. Portanto, com base na necessidade, você pode escolher o tipo de gráfico de que precisa e adicioná-los ao seu site. Portanto, não há nada de errado nisso, porque com base apenas na necessidade você adicionará o que precisa para o site. E aqui estou apenas com gráficos de meio tom. Então, tudo o que temos aqui são os gráficos de tons de golfe. Então é assim que você pode adicionar esses tipos de ícones ou gráficos, o que você precisa para o design completo do site com o Canva 37. 36 Teste a colocação da mídia para estética e funcionalidade: Nesta lição, mostrarei se colocamos os gráficos e as informações maneira correta ou não porque adicionamos todos os elementos de maneira adequada, claro, mas se o posicionamento está correto, deixe-me verificar isso e explicar como fazemos as alterações. Na parte superior, você pode ver que as adicionamos, as informações da barra de navegação, e também adicionamos as informações de texto aqui na página inicial Aqui você pode ver que estava mais congestionado. Acabei de selecionar os dois primeiros, bem-vindo a Austin e vou um pouco acima. Aqui vou adicionar algum espaço entre cada informação. Isso proporcionará visão mais equilibrada dessas informações. Agora, depois disso, eu apenas seleciono todas essas informações de texto. Não preciso selecionar o plano de fundo. Eu posso ver claramente o que eu fui selecionado. Agora vou para a posição e aqui quero selecionar o alinhamento esquerdo Anteriormente, fui selecionado o alinhamento esquerdo, ele estava em um lugar adequado Caso contrário, preciso fazer muitas mudanças. Agora, na página inicial, preciso adicionar o logotipo também. Eu ainda não adicionei o logotipo. Então, para adicionar isso, eu vou para este upload e escolho carregar arquivo, e dentro dele eu tenho as imagens. Então, com as imagens, já adicionamos o logotipo. Eu vou para a pasta aqui e Houston aqui eu tenho os logotipos. Então eu fui atualizado, dois logotipos na pasta. Aqui temos dois logotipos. Um estava com fundo preto. Aqui eu só tenho isso. Você vê aqui. Acabei de adicionar outro que é transparente. Esse é o arquivo transparente. Eu só me movo com minhas chaves. Porque quando eu me movo com o mouse, ele adiciona automaticamente esse logotipo dentro dessa moldura. Eu não preciso disso dentro da moldura. É por isso que eu uso o teclado para mover isso. Eu preciso desse logotipo na parte superior desta barra de navegação. Eu não preciso desse preto. Quando você tem essa situação, você pode usar isso, mas aqui eu só preciso disso. Eu apenas arrasto e solto esse logotipo aqui. Acabei de movê-lo para esta página. Você pode ver isso e aqui eu acabo de cortar essa área. Aqui é um espaço vazio, então eu não preciso de nada disso. Eu aumento o tamanho do logotipo. Eu pressiono o shiftiki. Eu não quero apertar o shift tiki. Eu simplesmente seleciono a imagem e eu estava, você sabe, aparando as áreas Agora, eu só preciso ampliar mais e quero ajustar mais a parte superior na parte inferior. Aqui eu apenas ajusto primeiro e aqui também preciso ajustar para depois aumentar novamente o tamanho do logotipo. O tamanho do logotipo desempenha um papel crucial em uma página inicial. Isso para mostrar que tipo de site você tem e quem é a outra pessoa que administra aquele hotel em particular e quão bom esse hotel, que tipo de site você conhece, as instalações disponíveis com o hotel o tipo de qualidade que eles podem oferecer. Todas essas coisas serão transmitidas apenas com este logotipo. É por isso que a criação de um logotipo é muito importante. Então, adicionamos isso e eu também reduzi o espaço indesejado disso. Então, no lado esquerdo, eu também quero ajustar isso para fazer isso, eu simplesmente venho a este lugar e reduzo. Depois de reduzir isso, novamente, eu apenas seleciono, movo e me alinho em um local adequado onde deveria estar É assim que adiciono meu logotipo nesta seção, que é a barra de navegação, e fui ajustada essa informação do texto também de acordo com minha necessidade. Agora, sinto que não tinha espaço suficiente entre o logotipo e o conteúdo, seleciono todas essas informações e, usando a seta para baixo, apenas me movo um pouco para que o logotipo tenha melhor visibilidade. Se necessário, você pode aumentar a área da seção e o logotipo terá uma melhor visibilidade naquele local. Mas aqui você precisa manter e adicionar mais elementos de design. Para evitar isso, mantenho isso apenas nesse valor. Foi assim que adicionei o logotipo e recebi as informações aqui. Eu venho para este lugar, aqui eu escolho todos esses três e escolho a posição e escolho a esquerda. Agora, o alinhamento é igual. Mas aqui eu escolho as informações de texto para a lista, eu estava fornecendo mais espaço na linha. Agora, ele tem a melhor legibilidade para comparar as informações de texto anteriores que recebi Selecionei todos esses textos e mantenho o mesmo tipo de altura de uma foto. Aqui também, seleciono todos esses depoimentos e os converto em um grupo Agora eu seleciono todas essas coisas e escolho a posição e o alinhamento à esquerda Temos o alinhamento adequado aqui. Você pode ver que não tem nenhum distúrbio. Você vê aqui que eu não tenho espaço suficiente no lado esquerdo, ou eu tenho que fornecer mais espaço no lado da mão. Com base nisso, posso decidir qual deve ser o alinhamento. Eu seleciono todas as informações e apenas as agrupo e minha posição deve estar no centro. Agora tenho espaço igual no lado esquerdo e direito. Mas aqui também preciso manter a mesma distância. Eu só tenho o alinhamento esquerdo, mas eu me movo e coloco com a mesma distância aqui e também fiz isso É assim que eu alinho as informações da maneira correta e ajusto isso Aqui também eu seleciono isso. Eu seleciono todos os elementos e antes de agrupá-los, eu apenas me movo usando Shiftiey para combinar com Depois disso, desse lado também temos o mesmo espaço, mas eu preciso de um pouco mais de espaço para gerenciá-lo. Com a distribuição igual dos elementos, eu simplesmente faço a mesma coisa. Aqui também quero gerenciar as mesmas informações e o mesmo alinhamento. Eu movo as informações do texto ou aqui, posso ajustar o quadro, a imagem se ajustará automaticamente. Mas eu seleciono essas informações. Eu forneço mais espaçamento entre linhas , o que proporciona melhor legibilidade para as informações do texto É assim que eu adiciono aqui também, eu seleciono e me movo mais no lado esquerdo de acordo com meu alinhamento. E depois disso, eu seleciono a posição e escolho esquerda aqui também seleciono isso e expando esse espaço de linha um pouco de acordo com a necessidade. As imagens, você pode ver, eu seleciono todas as imagens. Todas essas imagens têm posições diferentes. Eu só quero reduzir. Selecionei todas as imagens e reduzi a largura de cada quadro. Agora estava tudo bem aqui, eu também faço a mesma coisa. É assim que eu ajusto essas molduras. De acordo com isso, a aparência, o que eu precisava. Então, aqui, e aqui também, eu fui ajustado. Ainda não adicionamos esse contato. Aqui precisamos fazer muitos trabalhos. Faremos isso em nossas próximas aulas. É assim que ajustamos todos esses elementos do site, o que criamos com o Canva 38. 37 Visualize as mudanças para a depuração: Nesta lição, mostrarei como verificamos todas as alterações feitas e temos prévia de como elas funcionam com dispositivos diferentes. Para fazer isso, escolho essa visualização como de costume, e essa é a visualização da área de trabalho. Sabemos que adicionamos esse logotipo aqui. Tem espaço suficiente no lado esquerdo e direito. Na parte superior também tem espaço suficiente e na parte inferior. Eu apenas rolo para baixo. É uma página inicial com todas as informações que acesso na página de instalações, conforme temos aqui. Essa é a página. Depois disso, tenho a página de instalações Depois das instalações, temos os serviços e você pode ver aquela galeria e nós temos o contato. Ainda não adicionamos o contato e o rodapé. Agora eu escolho essa visão completa. Em uma visão completa, também parece bom. Esse alinhamento das imagens está bom. Mas aqui você pode ver que, ao alinhar aquele logotipo que se move completamente, precisamos ver por que ele estava se movendo Acabei de transformar isso na visualização normal e quero verificar como funciona e se parece com dispositivos móveis. Então, eu escolho dispositivos móveis. Além disso, o logotipo não era de forma adequada aquela empresa ou logotipo. Além disso, outras coisas estão muito bem. Você pode ver que Sobre a fala parece bom e, depois do depoimento, temos os serviços e instalações Depois temos a lista de, uma galeria extraordinária e finalmente temos um contato. Além do logotipo e do arranjo da casa, todos os outros estão bem. Em nossas próximas aulas, cuidaremos disso e corrigiremos isso antes de publicarmos o design do site. É assim que trabalhamos com o conteúdo, imagens e vídeos do site usando o Canva 39. 38 Adicionar barra de navegação clicável: Nesta seção, mostrarei como adicionaremos navegação e interatividade ao site Em nossas lições anteriores, vimos como criar um site e como adicionar um conteúdo, e aqui tudo começa com o processo de navegação. Eu tenho uma barra de navegação nesta página inicial. Essa é uma barra de navegação. Tem seis botões, você pode ver que começam com a página inicial sobre nossas instalações, serviços, galeria e contato. Além disso, tenho algumas coisas, como esse botão clicável e preciso adicionar mais interação para o público A seguir, adicionarei essas configurações. Em primeiro lugar, quero adicionar a navegação para essa barra de navegação. Quando você olha essa barra de navegação, tenho um texto na forma de página inicial e sobre nós e outros botões. Se você observar o limite dessa barra de navegação, ela parece muito pequena Quando o usuário estava interagindo durante o processo de navegação no site, não é fácil encontrar a área de trabalho específica do botão Para aumentar o limite dessa área de trabalho específica do botão, quero adicionar mais algumas coisas Para fazer isso, vou adicionar um retângulo. Eu pressiono R. Eu tenho o retângulo aqui. Depois de adicionar o retângulo, adiciono aqui e quero mencionar a dimensão exata, o que tenho para essa barra de navegação Agora eu apenas movo isso para esta seção porque aqui eu quero isso. Novamente, eu estava adicionando um retângulo porque esse sumiu e aqui eu apenas expando a dimensão Eu usei a mesma distância entre cada botão. Agora eu só aumento a altura porque quando o usuário chega a essa área, isso deve iniciar a função, seja ela qual for. Foi assim que eu mudei a área do retângulo. Depois de adicionar isso, escolhi essa transparência e vou torná-la 100, não 100, zero. Por padrão, será 100, mas agora era zero. Eu só quero duplicar a mesma coisa e colocar para todos os outros botões Acabei de vender a tecla Alt e dupliquei. Fui colocado e estava ajustando conforme necessário, porque havia pequenos ajustes que eu precisava fazer Eu faço as correções e aqui eu quero ajustar isso também. Isso não deve criar o conflito entre os botões e aqui também, eu o ajusto. Até isso, você pode ver que eu fui ajustado. Mas como fui duplicado do existente, todos aqueles botões estão presentes na frente das páginas sobre nós e outras informações de texto O que eu faço aqui é clicar do lado de fora e marcar que cobrirá toda a seleção de elementos. Depois disso, basta clicar com o botão direito do mouse sobre esse retângulo específico, qualquer retângulo que eu tenha selecionado Eu clico com o botão direito do mouse e escolho alinhar elementos, não apenas nos elementos, nas camadas, e escolho enviar para trás Quando eu escolho enviar para trás, todos os objetos de transparência zero selecionados, os retângulos serão enviados de volta para trás de todos os outros textos Eu clico em enviar para voltar. Agora você pode ver que eu apenas clico do lado de fora, você pode selecionar o texto que está presente à sua frente e esses objetos também estão lá. Acabei de selecionar esses objetos novamente e quando você aumenta o valor da transparência, você pode ver que todas essas coisas estão lá. Foi assim que acabei de mandar todas essas coisas para fora. Mas de qualquer forma, não vou mostrar que só quero esconder todas essas coisas. Eu me certifico de que o valor da transparência seja zero. Como não temos nenhuma opção de rolagem até agora com os sites do Canva, acabei de criar esse valor de gatilho, que é o ponto de acesso em que você está usando os objetos invisíveis Espero que no futuro, talvez antes do próximo evento criativo do Canva ou em alguns meses, tenhamos esse efeito de rolagem com os botões do site do Canva Depois de adicionar isso, está pronto para adicionar interação com as outras páginas. Da mesma forma, se você quiser adicionar qualquer botão clicável em qualquer página, você pode adicionar todas essas coisas, como eu acabei de copiar isso Preciso do mesmo botão home em todas as páginas. Aqui também colo e apenas altero a localização do botão. Novamente, eu copio isso e aqui eu colo. Então eu também aumento o espaço desta seção e copio novamente aqui também, eu quero colar. Não aqui, aqui. Finalmente, temos uma página de contato, e lá também quero colocar. Acabei de adicionar o mesmo local em que fui colocado em todas as páginas. assim que eu estava adicionando todos aqueles botões para adicionar interação com as páginas da câmera. 40. 39 Links internos: Nesta lição, mostrarei como adicionar interações e navegações internas a este site Criamos este site completo usando o Canva Vamos ver como adicionar essas coisas Para adicionar isso, eu seleciono a página inicial. Para adicionar isso em uma página inicial, venho a este lugar. Aqui eu agrupo a forma do plano de fundo, a forma transparente e o texto. Mas preciso mudar isso porque não consigo adicionar as interações dos objetos do grupo. Não consigo adicionar o hiperlink com grupos. Só posso adicionar hiperlinks para objetos individuais. Para fazer isso, seleciono essa página inicial primeiro. Eu clico uma vez. Quando seleciono o texto inicial, tenho a opção aqui, que é o menu. Eu posso clicar aqui. Lá eu tenho a opção chamada Link. Você deve ter uma tecla de atalho que é Control K. Você também pode fazer a mesma coisa com o botão direito sobre o texto ou qualquer outro elemento, eu escolho a tinta Então, aqui eu escolho essa opção de link. Quando eu escolho o link, ele mostra todos os sites que você criou usando sua conta do Canva Além disso, mostra as páginas deste documento. Então, aqui eu apenas pressiono este botão que é pop-up. Você pode ver que ele mostra todas as seções que estão presentes na primeira página. Esta é uma página única, como eu disse, você deseja adicionar qualquer outra página para essa galeria e uma página separada para serviços, você pode adicionar isso, mas aqui eu não adicionei. Se você quiser, você pode adicionar. Deixe-me mostrar isso também. Em nossas lições anteriores, eu te mostro, mas daqui em diante eu vou te mostrar novamente. Aqui, quando escolho esse botão home, preciso navegar somente nesta seção, que é a Seção um. Eu apenas seleciono esta seção um, que é chamada de barra de navegação porque não apenas a página inicial, eu preciso ir até essa barra de navegação, e esse é o nome dela. Se você quiser mudar o nome, você pode fazer aqui. Acabei de adicionar o nome em casa. Eu posso fazer isso. Eu apenas clico lá novamente. Sim Acabei de clicar aqui novamente. Você pode ver que esta é a primeira seção desta página. E o link, só um link. Eu não incorporei nada e escolhi pronto. Eu faço o mesmo processo para essa forma de fundo. Eu adiciono um link e aqui vou escolher aquela casa, que é aquela parede de navegação. Então é disso que eu preciso, porque quando eu mostro a barra de navegação, essa página inicial também estará visível Não preciso selecionar apenas a página inicial, o que pode ocultar a barra de navegação acima da área do navegador Agora, depois disso, escolho o botão direito Sobre nós e escolho Link e aqui quero vincular a seção três. Você pode ver isso. Aqui eu escolhi os dados A us. Devo acrescentar as mesmas informações para esta seção três. Por engano, fui selecionado. Aqui, novamente, eu escolho a Seção três. E aqui eu quero mencionar a Seção quatro para a forma do plano de fundo. Mais uma vez, eu fiz uma coisa errada. Link, e eu escolhi essas instalações. Fui adicionado às instalações aqui e vou fazer a mesma coisa. Eu posso ver como vou escolher as instalações. Então, aqui eu quero adicionar o próximo. Acabei de selecionar isso e quero escolher os serviços. Depois da instalação, eu tenho os serviços. Devo acrescentar isso com o link do texto. Eu escolho serviços. Então eu escolho esta galeria. Eu escolho Link e faço isso corretamente novamente. E aqui, vá lá. Eu deveria ser um pouco lento. Aqui eu clico e escolho esta galeria. A seção seis é essa. Novamente, eu escolho isso e aqui vou adicionar um link, e aqui vou mencionar a Seção seis. Por fim, seleciono esse contato e escolho esse link. Aqui eu quero mencionar a última seção, que é a Seção sete. Eu clico nessa seta. Eu escolhi a seção Compartilhar. Sabemos que a Seção oito é rodapé. Não vou adicionar nenhum link para isso. Isso conterá apenas as informações dos direitos autorais desse site e outras coisas Acabei de selecionar a Seção sete. De qualquer forma, não criamos o conteúdo para a página de contato, precisamos adicionar as informações. Faremos isso em nossa próxima seção. Agora, depois de adicionar o hiperlink para cada texto, você pode ver que há um sublinhado, o que indica que é um texto de hiperlink, não um texto normal No entanto, você não precisa de meios, basta removê-los. Não é necessário sublinhar. No entanto, o fato de o link estar lá apenas, não há nenhuma mudança nisso. Ao mesmo tempo, se precisar alterar qualquer link de seção, basta selecionar e ver que ele mostra a opção de link de edição ao selecioná-la e mostra a escrita mágica para adicionar as informações que não são para essa edição. Eu escolho esse link de edição e ele mostra exatamente o número da seção e da página. A qualquer momento, você pode fazer essas alterações, se necessário. É assim que adicionamos o link de navegação para cada página, e aqui chego a este lugar. Eu escolho esse ícone inicial. Eu quero adicionar um link para isso também. Eu clico com o botão direito sobre isso e escolho Link, e aqui eu escolho a primeira seção, que tem a barra de navegação. Também mostrará nosso site. Novamente, aqui também, eu faço a mesma coisa. Você também pode fazer o trabalho e copiar e colar o mesmo elemento em cada página desejada, que é outra maneira fácil mover o objeto com o hiperlink Aqui eu fui adicionado várias vezes, o que não é necessário quando você está fazendo dessa forma. Novamente, eu adiciono o link. Eu venho a este lugar, seleciono a seção um, eu fiz isso. Finalmente, em uma página de contato também, adiciono o link com a primeira seção. É assim que você pode adicionar as informações de cada botão de navegação. E se você quiser mudar o nome dessa página inteira , sabemos que cada parte é chamada de seções. Se você quiser alterar o nome da página inteira, eu apenas transformo isso na visualização em grade. Aqui, ele mostra a opção de edição. Eu clico aqui e adiciono o nome desta página. No momento, acabei de adicionar o nome que é índice. Se eu quiser adicionar outras páginas da tabela, que são as páginas do site, da mesma forma, você pode adicionar usando essa opção. Eu só clico aqui, vejo que tenho uma página separada. Se você quiser expandir qualquer informação, como em uma página de instalações, adicionei as informações. Mas se você quiser mostrar a visão detalhada de cada página, você pode adicioná-la em uma segunda página e adicionar alguns botões aqui para navegar até a página número dois. Também podemos adicionar a página inicial e outros itens do menu para que o usuário clique nela e retorne à página inicial e navegue pelas opções restantes É assim que fazemos o trabalho. Mas de qualquer forma, aqui eu não preciso disso agora. Então eu acabei de deletar esta página. Eu tenho apenas uma página com várias seções. Então é assim que eu posso adicionar essas navegações, e você pode ver que aqui também foi adicionado o botão de clicar E se eu quiser adicionar o link, posso adicionar aqui. Ao mesmo tempo, aqui eu apenas escrevo o link e escolho essa opção de link. Neste link, acabei de adicionar o símbolo de cinza. Quando você adiciona o hash e pressiona concluído, isso terá o hiperlink, é claro, mas esse hiperlink não terá nada É assim que podemos adicionar o poder de navegação a cada página e a cada seção nas páginas da web do Canva 41. Inclua links para redes sociais: Nesta lição, mostrarei como podemos adicionar links de mídia social em nosso site. Para adicionar links de mídia social, primeiro precisamos adicionar os ícones de mídia social. Para adicionar isso, chego a esses elementos e aqui vou digitar a palavra-chave, ícones de mídia social. Você pode adicionar diretamente essa palavra-chave. Digite o ícone de mídia social e eu vou ver todos os gráficos. Lembre-se de que você terá todos os resultados na forma de gráficos, fotos, molduras e tudo mais. Mas precisamos escolher gráficos porque precisamos adicionar as formas vetoriais. Não precisamos adicionar nenhuma imagem rasterizada. Então, aqui temos links comuns de mídia social, mas eu vou escolher aquele que se chama Instagram. Então, eu escolho primeiro o ícone de instruí-los. Você pode ver que a maioria deles é paga. Mas eu tenho os ícones gratuitos. Você pode ver que eu tenho os ícones gratuitos lá. Eu posso usá-lo em vez de usar todos aqueles ícones pagos. Então você tem a opção aqui, que é o argumento de venda da marca. É um aplicativo que ajudará você a buscar o logotipo de cada marca Você pode acessá-lo nesta opção de aplicativos. Como estava sendo exibido aqui como uma recomendação, posso usá-lo diretamente. Caso contrário, se você não tiver isso aqui, pode acessar os aplicativos e digitar a página da marca. Basta digitar o logotipo da Bandwig. Você o terá aqui. Aqui eu vou usar os elementos. A partir dos elementos em si, vou acessar a web. Lá eu escolho Abrir. Aqui eu quero mencionar o link específico do site. Acabei de digitar Gram. Então aí eu tenho esses, você sabe, logotipos diferentes do Instagram. Eu posso simplesmente clicar aqui para adicionar dentro do meu design. Veja se é gratuito. Não precisamos pagar nenhum dinheiro por isso. Nós adicionamos diretamente. Então, aqui você pode mencionar que tipo de dimensão exigir. Eu vou para, você sabe, a faixa de posições. Lá você tem a largura e a altura do objeto. Vou digitar aqui 50. Então esse é, você sabe, o tamanho do ícone para 50. Isso parece muito maior. Eu posso reduzir mais, então eu apenas digito 25. Ainda parece maior, mas é o suficiente para colocar ali onde precisamos. Então eu adiciono e só quero ajustar um pouco a barra de navegação. Então eu seleciono toda a área da barra de navegação. Eu o movo um pouco para baixo, não muito. Então eu quero adicionar essas informações aqui. Depois disso, vou adicionar outra busca de marca. Então eu escolho a marca fetch novamente, e aqui eu quero escolher o Facebook Então eu escolho o Facebook e ele mostra os logotipos. Assim, você pode escolher o que quiser. Mostra valores diferentes com fundo e sem fundo, o vetor transparente, tudo o que você tem, você pode escolher qual deles deseja. Agora, eu escolho este e o tenho aqui. OK. Então eu apenas arrasto e solto aqui. Preciso da mesma dimensão, a que usei aqui. Aqui, eu usei 25. Eu devo usar 25 aqui. Como a proporção foi bloqueada, não tenho nenhum problema de proporção ou alongamento. Ok, eu venho a este Bandfech para adicionar o Twitter. Depois disso, vou adicionar X. Eu preciso do ícone X, o logotipo formalmente Twitter Então, aqui também, vou mudar isso para 25 pixels, e eu simplesmente bloqueio a pequena corrida antes de trocá-la Agora são 25. E, finalmente, vou adicionar meu ícone do YouTube. Então, eu apenas digito YouTube. Você tem muitos, você sabe, variedade de botões. Eu adiciono isso. Aqui eu vou mudar, você sabe, a largura. Eu não vou, você sabe, tocar na altura porque a dimensão é diferente. Você pode ver isso. E aqui vou mencionar a largura 25. Então, com base na largura, a dimensão foi ajustada. É assim que posso adicionar todos os links de páginas de mídia social e, depois disso, venho aqui e ordeno cada ícone. Agora, basta selecionar cada ícone. E eu quero manter o mesmo tipo de, você sabe, alinhamento. Então eu escolho a posição, e aqui eu escolho o meio para que todos os objetos se alinhem em uma posição intermediária. Você pode ver isso. Eu só quero manter a distância adequada para cada objeto. Então, o que eu faço aqui é do lado direito, eu só tenho a distância. Então, quando eu me movo, ele mostra a distância entre cada objeto em um pixel. E aqui, sim, eu entendi. Foram colocados todos os links de mídia social aqui. É assim que você pode adicionar essas páginas de mídia social. Agora eu quero adicionar os links. No momento, esse é apenas o conteúdo. Eu não tenho links adequados. Mas se você quiser adicionar, basta escolher esses links. Acabei de escolher esse ícone. Aqui vou adicionar o link do Instagram. Vou adicionar alguns links fictícios aqui. Vamos ver como vou adicioná-lo. Vou adicionar uma nova guia e vou adicionar as páginas iniciais de cada site de mídia social. Acabei de digitar YouTube e aqui vou escolher esse link. Eu copio isso, e aqui eu escrevo o link e escolho essa opção de link e adiciono diretamente. Quando eu copio e colo e escolho concluído, esse link será adicionado diretamente. Quando você escolhe que o link será aberto durante a pré-visualização e o processo final, eu precisarei da página X. Eu apenas digito X e copio a página inicial da mesma forma que preciso do link do Instagram. Eu escolho o Instagram e primeiro adiciono o link aqui para o x, e também escolho o link do Instagram. E também, quero adicionar o link do facebook. Então, aqui eu apenas copio este link e vou adicionar com o Instagram. E eu escolhi terminar, sim. Por fim, escolho este link da página do Facebook. Eu só clico aqui e vou copiar o link da página inicial. Então, como eu não tenho o link adequado, você sabe, do site, eu estava adicionando, se você tiver seu próprio site, você pode escolhê-lo diretamente e adicioná-lo com ele. Agora, depois de escolher isso, vou a este site e lá escolho meu Facebook. E meu ícone do Facebook, eu apenas coloco o link certo e adiciono o link, colo, pronto e pronto. Então, adicionei com sucesso todos os links de mídia social. Agora eu posso copiar a mesma coisa e colar na minha página de contato também. Então, faremos isso quando fizermos o design da página de contato com os formulários em nosso Canva Então é assim que adicionamos as páginas de mídia social no Canva. 42. 41 Insira elementos de navegação da reserva: Depois de adicionar os links de mídia social e os ícones, eu só quero adicionar mais um botão aqui, que é reservar agora. Então, quando o cliente visitou o site, a parte superior em si, foi adicionado o botão de livro. Quando eles clicarem em que a página de reserva será aberta, quero fornecer apenas um número de celular aqui. Então, para fazer isso, eu só quero adicionar um botão. Para adicioná-lo, chego aos elementos, e aqui escolhi isso, como de costume, o botão de canto arredondado, e altero o valor da proporção, o valor do raio para dez aqui, depois disso, acabei de ler o livro didático Posso alterar o formato do texto para maiúsculas, reduzir a altura e aqui quero adicionar no topo desta seção Esse botão deve ter uma aparência diferente, então não quero fornecer tanta quantidade de cores diferentes. Ao mesmo tempo, deve parecer diferente. Quero adicionar algumas cores quentes, como o vermelho, para fornecer a você uma melhor visibilidade para o público, para que eles a visitem e escolham diretamente. Quero colocar o texto no quadro e, depois disso, escolho adicionar uma nova opção de cor. Aqui eu escolho escolher uma cor. Eu escolhi isso no meu YouTube, então as duas cores têm a mesma aparência. Eu só quero adicionar um hiperlink para a página de reserva. Se eu adicionei outra página depois de usar as páginas, já que eu disse que podemos adicionar várias páginas para cada função, você pode adicionar e fornecer um hiperlink para Depois desse botão, quero fornecer um número de telefone específico. No geral, eu seleciono todos os elementos. Eu apenas me movo um pouco para baixo e aqui seleciono esse elemento sozinho e o mantenho em uma posição central. Depois disso, eu escolho os elementos novamente. Aqui vou para o ícone do telefone. Portanto, existem muitos ícones de telefone em gráficos. Quero escolher um e mudo o tamanho. Aqui eu coloco e quero mudar a cor para branco. Assim, posso mudar a cor para branco e adicionar o número de telefone aqui. Então, eu só quero adicionar o texto ao quadro além de uma tecla de atalho para adicionar as informações do texto E aqui vou adicionar o número de contato. Vou adicionar um número de contato fictício como este. Então, recebi um número de contato que deveria ter o mesmo texto em branco em vez de um texto diferente. Eu quero ousar isso. É assim que eu forneço, você sabe, as informações básicas para obter com as páginas. Eu posso manter alguma distância se eu quiser. Eu não quero perturbar aquela página do livro agora. É assim que eu adiciono as informações restantes apenas nesta página inicial aqui. Também escolho esta pequena moldura Eu apenas dupliquei isso pressionando a tecla Alta e deslocando a tecla Agora eu movo isso e coloco aqui. Se você quiser definir o limite disso, podemos mencionar e você pode escolher assim É assim que eu ajusto isso e criamos completamente esta página inicial para reservar os quartos com este site 43. Adicione animações para elementos e páginas: Nesta lição, mostrarei como podemos adicionar animações às páginas e aos elementos Deixe-me mostrar isso um por um. Primeiro, vou escolher essa página inicial. Em uma página inicial, tenho o texto, as imagens e as formas. Temos todos esses elementos. Quando quiser adicionar a animação, primeiro você precisa selecionar a seção. Quando você seleciona a seção, aqui ela mostra a opção chamada animação. No topo, você o tem. Clique aqui uma vez. Quando eu clico nele, ele mostra duas opções de página e foto. Como selecionei a moldura, ela mostra a foto. Quando você seleciona a seção, ela mostra a animação da página. Há uma diferença entre as duas coisas. Você pode ver lá. Agora, eu estava selecionando aquela página, a seção, eu escolhi essa animação. Quando eu escolho a página, ela mostra a prévia aqui, que tem muitas categorias. Eu escolho um simples que oferece a animação básica dos elementos , que vaza e é divertido Com base na necessidade, você pode adicionar o tipo de animação de que precisa. Aqui eu tenho a opção chamada ambos em Enter ao sair. Quando você escolhe Enter, quando ele estava carregando naquele momento, somente aquela animação acontecerá. E quando você escolhe sair, ao rolar para baixo, a página superior será encerrada e, dessa vez, a animação acontecerá E você escolhe os dois, tanto no momento em que isso acontecerá quando você carregar a página quanto quando sair dessa página. Por padrão, serão os dois, mas você pode editar posteriormente, se quiser apenas o processo Enter, você pode escolher Enter. Além do futuro, você tem mais opções aqui como festas, negócios e relaxamento. Há muitas coisas para acrescentar. Com base na necessidade, você pode escolher qual deles deseja. A animação dos elementos era diferente com a imagem, o texto. Você pode escolher basicamente como deseja essas opções. Você pode escolher o que quiser. Quando você se move, ele mostra a pré-visualização. Você pode ver como tem as animações. Com base na necessidade, você pode escolher o que deseja e ajustar a intensidade, mas precisa de um processo Ao mesmo tempo, você também pode ajustar essa direção, mas precisa do preço. No entanto, aqui, eles forneceram as diferentes direções, então você não precisa dessas opções. Depois de todas essas coisas, você tem essa opção chamada animação de saída reversa. Da mesma forma que foi inserido por dentro, ele será saído. Se você habilitar isso, verá que eu escolho essa opção de panorâmica e, quando escolho essa animação reversa, da mesma forma que ela foi encerrada Você pode habilitar isso se quiser. Agora eu desço depois dessa animação de existência inversa, que você quiser para o reverso, aqui está e ela pode mudar posteriormente o tipo de animação que você precisa nessas áreas Agora, depois disso, eu desço. Você pode ver que, se achar que, sim, esta é a animação que você precisa, você adicionou para as páginas, você pode aplicar o mesmo tipo de animação para todas as seções, que significa praticamente todas as páginas. Para isso, clico aqui nesta opção, que é aplicada a todas as páginas. Então, todas essas páginas terão o mesmo tipo de animação aplicada. Então, quando você tiver a prévia dessa vez, poderá ver todas essas coisas. Você pode ver isso, como ele obterá a animação. Aqui eu apenas desagrupo os elementos porque somente essa animação acontecerá de maneira adequada É assim que isso acontecerá porque selecionamos apenas a bandeja e eu vou até esta página, a primeira seção, posso ver que selecionamos apenas a bandeja. Quando eu venho a este lugar, esta página, você vê que tem a mesma animação. É assim que ele será adicionado em cada página, temos a mesma prévia. No entanto, se você quiser alterar essa animação somente nessa página específica, poderá escolher outra coisa. Você não precisa usar a mesma animação em todas as páginas, ela foi panorâmica no momento É uma animação muito simples. Mas se eu quiser transformar isso em corporativo, sim, posso clicar aqui. Portanto, essa ação será adicionada somente a esta página. Quando vou para a próxima página, você pode ver que era corporativo. Quando eu escolhi isso, ele foi alterado em todas as páginas. Você pode ver que, em todas as páginas, temos o mesmo tipo de animações corporativas Com base no interesse, podemos escolher todas essas coisas. E se você achar que adicionou por engano e precisa remover todas as animações, incluindo a animação adicionada dentro dos elementos, você pode escolher remover todas as animações Portanto, não haverá nada lá fora. Tudo foi atualizado. Mas eu escolho essa animação de página, que é span. Fui adicionado em todas as páginas. Agora adicionamos a animação para todas as páginas. Depois disso, se você quiser adicionar a animação para elementos individuais, como textos individuais e imagens individuais como essa, você também pode animar Para isso, você precisa selecionar os elementos individuais. Quando eu escolho essa seção ou a página, ela mostra a animação da página na parte superior. Se eu escolher este logotipo, você pode ver que ele simplesmente mostra a opção chamada animar, que as opções que estão disponíveis aqui dependem completamente desse elemento, do que você selecionou Como selecionei a imagem, ela mostra diferentes maneiras de carregar as imagens. Você pode ver como estava carregando essas imagens com um ápice diferente Se quiser, você pode escolher isso e se inscrever apenas nesse elemento. A animação da página será reproduzida ao mesmo tempo. Essas animações também serão adicionadas. Agora eu escolho a imagem de fundo. Além disso, você pode mencionar, se quiser, eu tenho a vibe, sessões pop Você pode adicionar esses efeitos se quiser. Tenha cuidado ao escolher efeitos de desfoque, pois isso aumentará o tamanho do site e poderá levar um pouco de tempo para carregar essas páginas Com base na necessidade, você pode escolher qual deles deseja. Aqui ele escolheu essa tectônica, estava movendo as placas tectônicas da Terra e eu Aqui eu tenho as imagens. Por padrão, todas essas imagens serão carregadas. Mas se você quiser adicionar particularmente esses efeitos como esse, apenas uma prévia, você também pode adicioná-los. Caso contrário, você pode ver que a página inteira estava com as animações e adicionar um efeito, que esse efeito seja reproduzido completamente por toda a duração quando você assistir ao site completo Então você tem as opções para carregar isso. E quando você seleciona o texto sozinho, você pode ver que seleciona o texto sozinho, você tem muitas animações baseadas em texto, certo? Então, se você quiser, você também pode adicionar essas coisas. Com base na necessidade, você pode escolher o que quiser. Você pode ver muitas animações de texto por aí. Então, depende de você. E acabei de adicionar uma animação de texto rebatido para ter a prévia Você também pode adicionar a animação de texto para o conteúdo e qualquer que seja o texto, você sabe, você pode adicionar. Veja aqui como isso tem efeitos diferentes. Então é assim que você pode adicionar a animação da página inteira e a animação elementos individuais dentro do Canva E você pode ter uma experiência melhor quando tiver a prévia. 44. 43 Teste todos os links e recursos de interatividade: Nesta lição, mostrarei como testaremos todas as funções de hiperlinks e funções de animação usando essa prévia do Canva Nós já sabemos como usá-lo. Deixe-me verificar como isso funciona para nós. Eu escolhi a prévia aqui e, como de costume, esse site foi carregado. Você pode ver que a animação foi reproduzida quando eu carrego esse site. Agora eu só rolo. Você pode ver que há animação. Portanto, a animação da página funcionou perfeitamente. Sem nenhuma alteração. É muito bom. Veja aqui, ele foi adicionado apenas no início, não todas as vezes. Novamente, fecho a pré-visualização e clico na pré-visualização aqui novamente. Você pode ver a animação aqui, certo? Então, todas essas animações. E aqui também, você pode ver todas essas coisas animadas. Então era assim que funcionava de uma forma fantástica. Agora, depois disso, eu só quero verificar as animações da minha página. Eu escolho Sobre nós, ele se move perfeitamente para a página A us. Eu clico neste ícone inicial, quer funcione ou não, funciona. Novamente, eu vou para as instalações, então ela também foi movida perfeitamente para a página de instalações. Eu clico nesse botão inicial novamente porque quero mover a casa desta página de instalações. Quando clico no botão home para navegar até esta página de instalações. Depois disso, clico em Serviços e vou para a página de serviços. Eu clico aqui novamente, a página inicial escolhe a galeria. Dois me mostram as páginas da galeria. Finalmente, eu escolho esta casa. Eu verifico a página de contato. Sim, funciona perfeitamente. Até os botões que eu criei funcionam perfeitamente. Aqui eu não adicionei nenhum link porque eu disse que, se você quiser, você pode criar uma página separada e adicionar um link para isso. Eu adiciono os links fictícios de mídia social. Acabei de clicar neste Instagram, ele abriu uma página separada desse Instagram e eu clico nela. Mais uma vez, venho a este lugar, escolho o Facebook. Sim, ele também abre. Esses links que você forneceu com o x, Facebook, Instagram, todas as coisas estão sendo abertos. Isso não afeta a página principal do site. Claramente, ele carrega apenas com páginas separadas. É assim que funciona. Ele carrega perfeitamente todos esses hiperlinks, o que fornecemos para as outras páginas e nas páginas internas do site Eu quero mudar isso para a visualização em tela cheia. Isso parece bom. É assim que a visualização da tela inteira terá a aparência. Novamente, quero escolher minha avaliação de página móvel. Com isso, podemos ter alguns problemas. Quero acessar esta análise da página móvel. Eu clico lá. Então estava carregado. Você pode ver isso. No começo, eu tenho o livro, agora, informações, depois tenho um logotipo. Você pode ver. O motivo do logotipo foi coberto de cima para baixo, e é por isso que foi considerado um elemento final dessa seção específica. E é ter as páginas de mídia social entre a galeria de serviços e o contato. Vou corrigir isso em outras aulas. Eu apenas rolo para baixo e verifico se essas páginas estão organizadas. Todos os botões da página inicial estão organizados de maneira correta, tudo bem. Foi assim que foi arranjado. Mais uma vez, chego a essa visualização de página do Windows. Aqui, parece perfeito. É assim que funciona. Todas essas funções estão funcionando perfeitamente conforme planejamos. É assim que fazemos a navegação e a interatividade com o design do site Canva 45. Adicione um conteúdo para informações de contato: Nesta lição, mostrarei como podemos adicionar o conteúdo para a página de contato. Ainda não adicionamos nenhuma informação ou elemento na página de contato. Eu venho aqui. Então, aqui vamos adicionar essas informações. Depois disso, também adicionaremos as informações no rodapé Então, vamos ver primeiro as informações da página de contato. Acabei de deletar essa informação. Basta copiar dois desta página anterior, que é a galeria, e colei aqui usando o Controle B. Então, aqui vou adicionar as informações Eu chego a este meu documento. Aqui eu adiciono um endereço , aqui é um endereço fictício, número de contato e ID de e-mail fictício Mas se você estiver criando um site para um cliente, poderá adicionar essas informações. Nós apenas copiamos e colamos aqui. Acabei de copiar o texto e vou colar aqui. Sim. Depois de adicionar isso, quero adicionar os detalhes do endereço. Acabei de copiar as informações novamente e vou colar aqui. Então esse é o detalhe que eu tenho para o site do hotel. Eu só quero que esta página tenha a aparência branca. Eu escolho o branco em vez do amarelo. Aqui para esta página, eu posso mudar a cor se eu quiser. Eu só quero adicionar um pouco de cor escura aqui. No momento, escolho esse valor escuro para esta página. Eu seleciono Eu seleciono um múltiplo. Aqui eu escolho este e escolho a cor que é escura. Mais tarde, eu posso mudar a cor. No momento, estava escuro e eu seleciono essas informações de texto. Eu mudo a cor do texto para branco primeiro. Não preciso mudar mais as cores primeiro, preciso adicionar um branco. Depois disso, seleciono o título sozinho. Então, depois de escolher essa parte do título, eu escolho a cor do texto. Eu quero adicionar esse laranja claro. Quero mostrar a diferença entre o título e os elementos do texto. Agora eu chego a esta página de contato. Fui adicionado o texto do meu documento. Todos nós queremos ouvir de você e dos endereços de lá. Aqui eu apenas coloco o nome do hotel em negrito e tenho o endereço. Então, aqui fui adicionado que, depois disso, só preciso adicionar o número de telefone e o endereço de e-mail. Acabei de duplicar a pré-codificação da tecla lt. Eu acabei de copiar isso. Eu posso simplesmente copiar o número de telefone sozinho e passar por aqui. Depois disso, quero adicionar o endereço de e-mail. Eu copio isso e vou passar. É assim que posso adicionar essas informações e adicionar ainda mais os elementos de texto restantes, como o balcão de revenda disponível 24 horas por dia, 7 dias por semana , para reservas por e-mail e telefone. Fui adicionado o acompanhamento nas redes sociais e o formulário para preencher Eu duplico isso e apenas adiciono essas informações de reserva. Acabei de colar aqui, pronto, e vou duplicar novamente, e quero adicionar o siga-nos , mas quero colocá-las abaixo de outras Eu não quero mencionar isso antes das coisas restantes. Agora, depois disso, venho a este lugar, apenas copio isso, preencho as informações do formulário dupliquei isso e aqui eu colo isso Aqui eu apenas transformo o texto em normal. Eu não quero um texto em negrito. É assim que eu adiciono e aqui também eu escolho isso e faço com que seja normal. Eu apenas copiei e colei essas informações. seguir, adicionarei mais elementos, o que precisávamos com a página de contato do Canva 46. 45 Integre um formulário de contato: Nesta lição, mostrarei como podemos adicionar o formulário de contato a essa página de contato usando o Canva O Canva não fornece um formulário de contato direto para adicionar esta página de contato No entanto, temos mais opções com aplicativos. Então, deixe-me mostrar como podemos adicionar essas informações de contato e formulário de contato usando os aplicativos Canva Para adicionar o formulário de contato aqui, primeiro vou aos aplicativos. Nos aplicativos, vou digitar a palavra-chave que é formulário. Quando eu digitar o formulário e apresentá-lo, terei todos os aplicativos baseados em formulários nessa pesquisa. Algumas coisas são muito necessárias, o que funciona muito bem com isso. Essas coisas são a forma quente, essa é a forma quente, e outra é essa forma fluida Ambas as coisas estão realmente funcionando bem. Primeiro, eu escolho essa forma fluida. Quando eu escolho isso, ele mostra as opções e você só precisa aceitar, então eu escolho abrir, esse formulário será aberto com minha página. Aqui eu só preciso mencionar as informações, que eu possa digitar a palavra-chave que é chamada de título do formulário. Vou digitar contato como e vou mencionar o ID do e-mail, que receberá os dados de envio do formulário. Essa é a coisa mais importante. Se você vai receber os dados para a respectiva dama de e-mail, você precisa repetir ou responder por esse e-mail Isso é uma coisa importante. Acabei fornecer um e-mail por dia aqui. Recebi o ID de e-mail que acabei de adicionar e pressiono este botão para adicionar ao design Mas antes de fazer isso, eu apenas escolho os custos. Depois de adicionar isso, você não precisa salvá-lo, ele será salvo por padrão. Fui adicionado que o título do formulário, que significa o nome do formulário e o destino da resposta, que é o e-mail, receberão as respostas e eu escolherei o custo O Costin, eu tenho a opção chamada página um. Posso adicionar muitas informações aqui. Esta é a primeira vez que recebi uma resposta, caso contrário, eles não poderão enviar o formulário. Aqui eu tenho um tipo diferente. Eu tenho uma resposta curta, tenho uma resposta longa. Eles podem escolher SR sem caixas de seleção suspensas, todas essas informações, incluindo Como vou escolher, vou escolher essa resposta curta primeiro. E eu vou digitar NA. Esse será o campo e o tipo de resposta será o texto. Eles vão adicionar seus nomes. Em seguida, escolho a próxima pergunta. Em seguida, vou coletar o ID de e-mail deles. Vou escolher o processo de coleta de ID de e-mail. Infelizmente, não tenho o processo de coleta de e-mails. Simplesmente escolhi a resposta curta novamente e digitei o ID do e-mail. Eles adicionarão somente na forma de texto. Agora eu apenas duplico em vez de adicionar um novo, e aqui vou coletar o número de telefone deles Então, eu apenas adiciono o número de telefone ou o número do celular e exijo esses dados. Agora eu apenas duplico novamente e preciso coletar as informações Vou receber o feedback, posso escolher uma resposta longa e, depois de escolher uma resposta longa, posso fornecer esse título chamado feedback e, claro, é, você sabe, um texto. E eu duplico novamente. Após o feedback, posso coletar, você sabe, o feedback na forma de classificação por estrelas. Então, eu escolho a classificação por estrelas do feedback, e o título será a classificação. O que mais? Acabei de adicionar vermelho como e dupliquei novamente Se você quiser adicionar mais detalhes, coletar do cliente ou das pessoas, cliente ou das pessoas você também pode escolher isso, se eles estão satisfeitos com os serviços ou não É assim que você pode adicionar as cadeias de custo do formulário e, depois disso, chego a esse design Design, se você quiser mudar as cores, é claro que podemos fazer, mas para essas mudanças, você precisa de um pouco de Procore, eu farei qualquer alteração aqui Depois de todas essas coisas, você pode escolher esse botão que é adicionado ao design. Você também pode acessar isso aqui. Acabei de clicar aqui em Design, isso será adicionado. Você pode ver que o formulário foi adicionado aqui. É perfeito e eu posso reduzir a dimensão. Foi incorporado e eu fui colocado onde eu queria. A razão pela qual eu estava configurado, o fundo em branco é esse, e eu posso expandir a área se eu precisar. Eu selecionei o quadro depois de selecionar a seção. Expanda a seção e eu posso arquear e colocar como ou quiser este formulário Agora eu posso mover este texto para cá a partir deste lugar e posso colocá-lo em negrito. Posso adicionar cores que são necessárias para essas informações de texto. E eu acabei de aumentar o tamanho da fonte. É assim que adiciono esse formulário para que a barra de rolagem role para baixo e obtenha os detalhes. É assim que adicionamos o formulário. E se você quiser adicionar outras alterações, podemos fazer as alterações aqui e você pode pressionar Salvar alterações. Depois de escolher Salvar alterações, essas informações também serão atualizadas da mesma forma, você pode usar este formulário de anotação e, chegando aqui, tenho a opção chamada Formulário de anotações. Eu clico no formulário de anotação e ele me mostra aberto. Acabei de abrir isso depois de abrir isso, ele mostra muitos modelos. Por padrão, eles têm muitos modelos. Você pode ver que temos muitos outros modelos de contato disponíveis. Por padrão, você pode escolher o modelo de que precisa e simplesmente clicar para obter esse design dentro do seu formulário. Eu vou escolher este, entre em contato. Acabei de clicar em usar o modelo. Quando eu escolher isso, ele estará dentro da minha página de contato. Você pode ver aqui que foi adicionado. Eu acabo de expandir minha seção novamente. Eu simplesmente movo o design para cima e desço. Quero selecionar a seção sozinho. Depois de selecionar essa seção sozinha, posso expandi-la. Com base na necessidade, ele pode decidir qual formulário você precisa. Você tem duas opções. Ambos são bons. Mas há uma pequena diferença quando você tem a prévia Se você não precisa do anúncio desses fornecedores agrícolas, pode simplesmente ocultar essa área Para fazer isso, eu chego a esses elementos. Nos elementos, eu uso o retângulo. Acabei de mudar a cor do retângulo para branco. Eu apenas o movo e digo essa cor para branco, a mesma cor da parte de trás. Você pode simplesmente ocultar esse anúncio se não quiser e se parecer com isso Mas se você estiver usando o formulário, ele será exibido. Mas se você não se preocupar com essas informações, tudo bem. Você pode obter as informações diretamente do público. É assim que as duas coisas funcionam. Com base na necessidade, você pode escolher qual deles deseja. Então eu acabei de deletar este e vou ter esse. Vocês dois têm escolha. Você pode ter qualquer um. Eu só quero apenas um formulário aqui. É por isso que fui excluído os dois formulários estão realmente funcionando bem, então eu não digo que isso é melhor do que isso ou que aquilo é melhor do que isso. De acordo com isso, sua viabilidade, você pode escolher qual deles você quer 47. Inclua um mapa para negócios baseados em localização: Nesta lição, mostrarei como podemos incorporar informações do mapa do Google dentro desse formulário de conexão É fácil fazer esse trabalho. Deixe-me mostrar como fazer esse trabalho. Primeiro, quero atribuir algum espaço para isso. Então eu estava selecionando os elementos, desci e aqui posso adicionar, você sabe, as informações do mapa do Google. Depois de atribuir esse espaço para isso, escolho os dados do mapa. Novamente, esses são os dados do mapa Wi. Eu apenas clico duas vezes no local onde você precisa obter os dados. Depois de clicar duas vezes, basta selecionar o endereço superior. Eu apenas copio isso, não vou fazer mais nada, e volto para esta página de contato do Canva Então, aqui eu quero escolher a seção. Depois de escolher isso, eu pressiono Control V. Então eu não fiz mais nada, observe-o com cuidado. Eu apenas pressiono Control V. Não estou fazendo nada além disso. Então é um endereço fictício. Eu fui adicionado. Depois de adicionar isso, eu apenas ajusto e coloco como eu quero no meu site, página de contato. É assim que você simplesmente faz isso. Basta copiar isso, qualquer que seja a informação, qualquer que seja a posição, clicamos nela. E quando você clica duas vezes lá, você pode adicionar esse quadro. Depois de marcar esse local, você pode simplesmente obter as informações, copiá-las e colar. Você não precisa fazer mais nada. Você não precisa fazer nenhum outro truque, você não precisa de nenhum outro adendo, basta colar aqui Você receberá esse link aqui. Isso funcionará quando tivermos a prévia. É assim que você pode adicionar o formulário do Google sem Os. Quando você adiciona aquela palavra próxima, qual será a melhor e será fácil navegar quando as pessoas visitarem esta página de contato É assim que adiciono a integração de dados do Google Map com a página de contato e o design do site Canva 48. 47 Adicione ícones para email, chamada e redes sociais: R Nesta lição, mostrarei como podemos adicionar ícones para contato, e-mail e outras facilidades. Então, já sabemos como adicionar essas informações. Eu vou para a página inicial. Na página inicial, já temos essa barra de navegação. Na barra de navegação, eu já tenho o ícone de quatro números de contato e outros quatro ícones de mídia social. Esses ícones já têm o link de mídia social, então eu copio diretamente pressionando Control C. Agora eu venho aqui. E aqui eu quero colar com isso seguir, basta pressionar Control V. Depois de pressionar Control V, basta movê-lo aqui e colocá-lo aqui. É muito simples. Já criamos isso para que você não precise trabalhar novamente. Podemos simplesmente copiar e colar esses ícones diretamente aqui. Agora, depois disso, aqui eu quero adicionar os ícones. Para fazer isso, eu seleciono o texto. Eu só quero adicionar mais espaço, então eu aumento o espaço da linha e movo um pouco a mão esquerda. Posso adicionar ícones aqui, então vou escolher o ícone do telefone. Teremos muitos ícones aqui. Eu posso escolher qual eu quero. Aqui eu escolho este e este parece muito melhor para comparar o objeto preenchido. Depois de adicionar essa linha reta, eu ajusto isso novamente e aqui eu quero adicionar um ícone de e-mail. Fui adicionado ao e-mail e escolho o mesmo ícone de estilo em vez de escolher um diferente. Mais uma vez, eu diminuo a escala e quero colocar aqui. Agora eu escolho esse ícone. Eu vou para as posições. Acabei de verificar a dimensão. Acabei de mudar esse 17 e tanto X quanto Y eram 17. Eu faço a mesma coisa por aqui também. Basta adicionar 17. Então é assim que eu adiciono essas informações e as coloco. Acabei de copiar esse ícone de contato novamente e vou para o topo deste site. Eu quero substituir isso. Parece tão difícil. Então eu apenas coloco isso e excluo isso, e quero adicionar esse ícone aqui com a cor branca. Eu escolho branco. Você pode ver isso. Isso parece melhor do que isso, você sabe, o branco sólido completo. Então é assim que eu adiciono os ícones. Também fui substituído por isso na página inicial. Ao mesmo tempo, tenho esses ícones da parte de navegação até a página de contato. Veja aqui, eu só quero rolar para baixo. Basta rolar para baixo e dar uma olhada na minha página de contato. Ele tem todos os elementos para obter o feedback do formulário. Tem o endereço com o mapa do Google, o número de contato, endereço de e-mail e páginas de mídia social. É assim que adiciono todos os ícones às minhas páginas de contato usando o Canva 49. 48 Funcionalidade do formulário de teste: Nesta lição, vamos verificar a funcionalidade do formulário, se ele estava funcionando corretamente ou não. Para fazer isso, eu já abri esse endereço de e-mail em uma guia separada, e é aqui que vamos testar. Para fazer isso, basta fazer a prévia aqui. Eu escolho a visualização prévia, e você terá a visualização prévia do Windows aqui. Depois de adicionar isso, eu só quero ir para a página de contato. Eu apenas clico neste contato e clico no contato, vou voltar para esta página de contato. Você pode ver claramente que todas as informações estão carregadas. Veja todas essas coisas mais detalhadamente e, antes disso, vou verificar este formulário de página de contato. É interativo. Você pode ver que vou digitar meu nome e vou digitar meu ID de e-mail. Vou digitar outra coisa porque não quero mencionar esse ID EML. Vou digitar Instrutor em um ou outra coisa. S.com. Depois disso, vou adicionar meu número de telefone, algo assim. Então, um número aleatório foi adicionado. É só um número falso. Todos nós sabemos disso. Aqui vou adicionar o feedback. Vou apenas adicionar meu feedback como um agradecimento. Aqui eu vou ler. Eu escolho um ou três ou cinco, posso ver que funciona perfeitamente. Finalmente, vou escolher essa opção que é enviar. Você pode ver que o scrollbll funciona quando está saindo dessa área Eu escolho este envio e ele mostra que, obrigado por seus envios Os dados foram enviados e você pode ver que recebi o e-mail aqui. Acabei de clicar no meu e-mail e aqui recebi envio de um novo formulário com o Fale Conosco, que mostra o nome e o ID do e-mail que recebi, o número de contato, os dados de feedback e a taxa. Todas essas informações que recebi pelo meu e-mail estão prontas, o que significa que esse formulário realmente funciona de maneira adequada. É por isso que esse formulário é muito apreciado quando você usa a página de contato do Canva 50. 49. Salve e visualize a página de contato: Nesta lição, veremos a visualização final da página de contato usando o Canva Na última lição, mostramos como esse formulário de contato funciona. Realmente funciona bem. Deixe-me mostrar como teremos outras visões dessas informações. Para fazer isso, eu escolho pré-visualizar. Como fizemos anteriormente, clico diretamente nesse botão de contato. E quando clico no botão de contato, recebo todas as informações. Em nossa última aula, verificamos esse formulário de contato. Realmente funciona bem. E quando eu enviei, isso mostra que você agradece por sua inscrição. Eu chego a este formulário do Google. Você pode ver, temos o mapa do Google. Eu apenas rolo usando o controle. Você pode ver que realmente funciona de uma maneira fantástica. Eu também posso movê-lo. Isso também está em um formato interativo. Isso funciona muito bem, e acho que tenho minhas páginas de mídia social para acompanhar. Já sabemos que adicionamos o hiperlink para todos esses ícones usando a própria barra de navegação Quando eu clico nesse x, ele vai para a página X e quando eu escolho esse Instagram, ele volta para o link do Instagram. Já conhecemos esse anterior em si. Todos esses ícones realmente funcionam bem. O mapa do Google também está funcionando muito bem, e o formulário de inscrição para adicionar também funciona muito bem. Todas as funcionalidades estão funcionando perfeitamente com o Canva. Isso é o que eu realmente preciso com a página de contato no design do site. 51. 50 Defina uma paleta de cores para combinar com a sua marca: Nesta lição, mostrarei como podemos definir as cores da marca para os trabalhos de design do Canva Quando você tem a cor da marca, que você terá a cor dedicada para sua marca ou hotel em particular ou qualquer outra coisa, você pode definir essa cor e usar em qualquer lugar em que estivermos projetando as obras. Deixe-me mostrar o exemplo. Agora eu escolho esse plano de fundo. Quando eu escolho o plano de fundo, eu tenho uma opção chamada cor de fundo. Quando eu clico nessa cor de fundo, você terá esses valores de cor. E nesses valores de cores, podemos ver a opção chamada kit de marca. Você viu isso? Com a ajuda disso, podemos definir um determinado número de cores e repetir o mesmo estilo sempre que você fizer o trabalho de design dessa marca específica. Para fazer isso, primeiro, venho a esse Canva. Você pode fazer isso daqui mesmo ou aqui também. Agora, aqui na própria página inicial, ele tem a opção chamada marca. Eu clico nessa marca. Quando clico nessa marca, ela mostra que isso é apenas para usuários profissionais. Você tem 30 é um teste gratuito, mas ainda precisa configurar todas essas coisas. Agora, o que estou fazendo é vir para essa área, que é Brand Kid. Eu clico neste, você pode ver que podemos compartilhar essa marca também com outra pessoa. Eu só clico aqui uma vez. Quando eu clico lá, mostra que você pode adicionar o logotipo. Novamente, isso é apenas para os usuários da marca e, depois disso, mostra três opções. Então, mostra três cores. Eu posso selecionar a primeira cor. Eu posso mudar a cor se eu quiser. Consegue ver isso, como eu mudo a cor? Com base na marca que você escolheu, você pode alterar a cor e utilizá-la para sua marca. Agora vou ao meu design. Aqui eu escolho o plano de fundo. Você pode ver que esse é o valor da cor e, na parte inferior, tem um valor hexa semelhante à cor seguido pelo hash, mostrando 23 a 43 20 é responsável pela cor vermelha e três A é responsável pela cor verde e 43 é responsável pela cor azul, que mostra o valor hexa da cor Dembal Eu quero digitar o mesmo valor lá, 23 a 43. Aqui eu acrescento que 23 a 43. Você pode ver que temos a mesma cor aqui. Se eu quiser escolher essa cor de texto, vou escolher isso e quero anotar o valor da cor aqui. F DD 091 Entendi. Eu preciso de outra cor que eu usei. Vou usar esse valor de cor. Eu escolho essa cor e escolho esse lugar. Eu posso encontrar minha cor aqui, DD 091. Aqui eu quero mencionar o FTD 091 e pressionar in'sdy there. Eu escolho a cor da luz aqui. F B sete. Isso é o que eu vou fazer. Então, obtive todas as três cores que usei no meu design de layout. Geralmente, o que fazemos é configurar as cores e depois só fazemos o trabalho de design Agora você pode ver que acabei de fechar esse valor de cor, e é isso que datamos, criamos as cores para nosso trabalho de design. Agora eu volto para a página inicial, novamente, vou para a minha marca. Você pode ver que os valores das cores foram alterados. Agora eu apenas atualizo minha página. Depois de atualizar esta página, vou verificar quais são todos os valores de cores que temos, a marca com as configurações de cores Eu escolho esse plano de fundo. Depois de escolher esse plano de fundo, vou escolher essa cor de fundo. Eu escolho a cor de fundo, você pode ver que obtivemos os valores de cor necessários para o nosso design. É assim que preferimos os valores das cores e podemos usar essas cores onde quisermos em todo o nosso design. É assim que usamos a paleta de cores kit da marca dentro do Canva, nosso trabalho de design 52. 51 Várias seleções de cores no Canva: Nesta lição, mostrarei quais são as outras formas de selecionar a cor no Canva Em nossas lições anteriores, mostro como selecionamos a cor do texto aqui usando esse menu e como selecionamos a cor de fundo para a seção ou página. Deixe-me te mostrar as outras coisas. Primeiro, eu escolho o plano de fundo de qualquer pessoa. Eu estava escolhendo esse plano de fundo do cabeçalho. Eu escolho uma cor de fundo. E eu escolho uma cor de fundo. Primeiro, você tem a opção chamada Cor do documento. Essas são as cores que usei em todo o documento. Se você quiser adicionar alguma cor aqui, basta selecionar e ver que ela mostra completamente as cores do documento que usei com este design. Se você quiser mudar as cores, imediatamente, você pode fazer isso com a ajuda dessas opções. É assim que eu escolho as cores do documento para que eu possa ficar dentro da seleção de cores , além das novas cores, que arrastará completamente seu design do tema Não faça isso, basta usar essas cores do documento dentro do trabalho de design. Além disso, se você souber qual é o valor específico da cor, pode digitar diretamente aqui e pesquisar o valor da cor e o nome para obter essa cor. As cores do documento são totalmente usadas neste design e temos o kit da marca. Vimos isso em nossa lição anterior. Escolha esse plano de fundo. Quando escolho o plano de fundo, escolho a cor do plano de fundo, ela mostra mais opções. Primeiro, mostra a cor das fotos. Você pode ver que esta seção ou a página tem as fotos. Aqui me foi adicionado o logotipo. Você pode ver que é um logotipo do YouTube. Parece uma forma vetorial, eu posso mudar as cores. Aqui eu escolho, isso é completamente bitmap. Você pode ver que é uma imagem, eu posso editá-la. Mas aqui está um gráfico vetorial aqui também são gráficos vetoriais, não o bitmap Eu não tenho isso e aqui também tenho um bitmap. Como eu tinha apenas uma foto aqui, nesta página, ela me mostra que é esse valor que tenho as variações de cores que tenho com essa foto. Ao mesmo tempo, aqui também tenho uma foto, mas esse é o logotipo transparente, sabemos que a cor verde, o que eu vejo aqui é apenas o fundo. Também foram coletados os tons de cores desse logotipo e do branco. Você pode ver essa prévia da imagem aqui também. Quando vou para outra página, chego a essa terceira seção. E aqui ele mostra todas as cores derivadas das imagens. Você também pode coletar as cores a partir disso. Eu só quero ver todas as cores das imagens. Eu escolho ver tudo. Se você escolher C all, poderá obter todas as imagens adicionadas nesta seção. Você pode ver todas as imagens que eu adicionei com esta seção. E me mostra as imagens restantes delas. Então é assim que ele mostra a cor. E se você quiser adicionar um pouco de cor, basta clicar aqui para que você possa adicionar essa cor diretamente, que configurará completamente a aparência adequada e manterá designs no mesmo tipo de os designs no mesmo tipo de campo, porque você coletou as cores das imagens, o que você tem dentro do design. Então, isso combinará perfeitamente com o design. Você não precisa se preocupar com isso. Esta opção de cores fotográficas está lá, você pode utilizar perfeitamente para seus designs. Você não precisa selecionar a nova opção de cor, não precisa adicionar manualmente. Você pode obtê-lo diretamente dessas opções. Depois disso, temos as cores padrão. Temos duas categorias, as cores padrão sólidas e as cores padrão gradientes No início, você tem as cores sólidas. Se você quiser usar diretamente, você pode usá-lo. Foi assim: como colocamos os pastéis de tinta ou as tintas em aquarela em lugares separados Em seguida, temos as cores de gradiente padrão. Se você quiser adicionar várias cores dentro da mesma forma ou plano de fundo, você pode usar isso. Deixe-me te mostrar uma vez. Basta clicar aqui, gradiente linear e você pode ver que eu tenho as duas variações de cores disponíveis Se você quiser editar essa cor, você pode ir para o t. Você pode ver isso. Eu tenho a opção chamada Adicionar uma nova cor e, quando escolho adicionar uma nova cor, ela mostra um sólido e um gradiente. Consigo ver esse sólido e o gradiente. Quando eu escolho o gradiente, eu simplesmente desfaço porque você tem que conhecer essa mudança, você pode ver que, diretamente, ela estava se movendo para o gradiente e você pode escolher o tipo de gradiente que O linear do eixo X ou eixo Y ou do canto ou gradiente radial, você pode escolher o gradiente de sua preferência Você pode adicionar diretamente a partir deste ponto. No entanto, se você quiser adicionar outra cor com isso, já temos as duas cores. Se você quiser ir para outro ponto, você pode clicar aqui e obter o novo valor. Assim, você pode adicionar o novo valor de cor conforme necessário Você pode ver que eu adicionei o terceiro valor aqui. Se quiser que seja transparente, você também pode ajustar o valor Alfa. Você pode ver isso. Eu adicionei o valor Alpha e você pode alterar o valor da cor aqui. E se você quiser escolher a cor das imagens ou em outro lugar desse design, eu tenho a opção de escolher uma cor. É como a ferramenta Eye Roper. Você pode selecionar a cor de qualquer lugar que quiser. E isso será adicionado. Se você não precisar dessa cor, você pode clicar diretamente nessa cor distribuída para que a cor seja eliminada É assim que temos cores em gradiente. Você pode adicionar várias cores, podemos remover as cores, você pode adicionar o estilo, todas essas coisas que você pode fazer usando essas opções. Da mesma forma, se não precisarmos dessa cor, basta passar o mouse sobre essa cor, você pode ver que há um botão fechado, escolha esta opção que recebe a cor. Quando eu escolho isso, também posso remover a cor selecionada. Então é assim que processamos as cores com o Canva. Você pode simplesmente adicionar uma nova cor usando essa opção de adição de cor, cor sólida, e você pode escolher qualquer cor para adicionar ao plano de fundo ou texto e tudo mais. Agora eu só dou Undo. Quando você fez algumas alterações por engano ou indesejadas, basta usar Desfazer. Não mude manualmente. Você pode não obter as cores precisas que usou anteriormente. Portanto, tente desfazer em vez de alterar as cores manualmente Então, eu apenas dou Undo. E essa é a cor que eu tinha no começo. É assim que usamos as cores no Canva. Temos muitas facilidades enormes para as cores com o trabalho de design do site Canva 53. 52 Adicione um logotipo e conteúdo para o rodapé: Nesta lição, mostrarei como podemos adicionar o logotipo do rodapé e o conteúdo do rodapé ao nosso site Fui adicionada uma seção separada para isso. Não quero me preocupar com os planos de fundo. Então é isso que temos para a seção de rodapé. Para adicionar as informações, vou para a página básica, primeiro copio esse logotipo. Eu preciso do mesmo logotipo, então eu escolho copiar. Depois de escolher isso, eu desço. Aqui, eu apenas colo usando pasta. Agora você pode ver que o fundo era totalmente branco. Eu escolho o plano de fundo. Quero usar a mesma cor que usei no cabeçalho do rodapé, desculpe Aqui eu tenho a cor. Eu só clico lá. Eu adiciono essa cor aqui. Aqui eu apenas reduzo o tamanho do logotipo, e aqui eu quero adicionar o conteúdo do rodapé A razão pela qual temos isso como uma seção separada é que não precisamos perturbar as seções ou páginas restantes Agora vou para o meu conteúdo. E aqui eu tenho o conteúdo do rodapé. Então, eu apenas copio isso usando a opção de cópia. Aqui, eu quero adicionar o texto, então eu pressiono T ou você pode ir para este texto. Aqui eu tenho a opção chamada adicionar uma caixa de texto. Basta clicar aqui e você tem a caixa de texto aqui, mas a fonte diz que são apenas duas. Então, eu apenas aumento isso. Você pode ver que está visível agora. Eu apenas clico dentro do texto, o botão direito e escolho colar. Então você tem o conteúdo da comida. Eu apenas amplio usando o controle e a rolagem. Agora eu arrumo e coloco, como eu quero isso Agora eu escolho os dois elementos e escolho a posição. Aqui eu verifico se estava no meio ou não. Sim. Isso estava em uma posição intermediária perfeita. Depois disso, seleciono os dois objetos. Eu agrupo isso, depois escolho a mesma posição e a coloco como um centro. Então, o alinhamento estava no centro agora. Você não precisa, você sabe, se preocupar com o alinhamento. Estava perfeitamente equilibrado. Então é assim que adicionamos essas informações para o rodapé. É um processo muito simples. Às vezes, você sabe, o designer e o desenvolvedor adicionavam mais botões interativos no rodapé exemplo, você pode expandir essa área de rodapé e não adicionar nenhuma operadora ou outras informações relevantes como clientes potenciais de download ou o navegador Essas informações também podem ser adicionadas no rodapé, se quiser Mas aqui eu não preciso. Eu só quero adicionar essas informações de rodapé É por isso que recebi essa informação. Se você quiser adicionar algum hiperlink a isso, se estiver preparando esse design e quiser adicionar um hiperlink para sua empresa, que é a empresa de design de sites você pode adicionar aqui para que o público clique lá e retorne à sua empresa que desenvolveu o design do site Então é assim que você pode adicionar rodapé para qualquer design de site usando o Canva 54. 53 Personalize os recursos visuais para combinar com a marca: Nesta lição, mostrarei como podemos personalizar a cor do plano de fundo e do texto e todas as coisas de acordo com os valores do logotipo da nossa marca. Aqui, já adicionamos a cor para a marca, utilizamos apenas essas cores aqui e no fundo e para aquele texto interativo e aqui também. Isso também é usado em nosso design. Portanto, temos que garantir se usamos o mesmo tipo de cores em todo o design ou não, porque isso reflete, você sabe, de uma maneira diferente. Se você usou outras cores diferentes além das cores de valor da marca, elas parecerão totalmente diferentes e estranhas, de modo que o público ou os usuários vejam diretamente o texto Mas se você usar as cores uniformes em todas as páginas, como fizemos anteriormente, isso não acontecerá, o público lerá todas as informações com a devida prioridade. Agora, você pode ver este. Fornecemos as informações em diferentes estilos de fonte e usamos apenas Canvasans em todo o design Mas somente para a página inicial, usamos outro estilo de fonte aqui para diferenciar, que é FX Eu não usei nada além disso. Acabei de usar apenas o e, os efeitos de texto. No entanto, se quiser, você pode usar os outros efeitos, o que você tem lá. Eu só clico lá. Você pode ver que temos muitos efeitos lá fora. Se você não quiser nenhum efeito, pode escolher a opção nenhum. E se você quiser adicionar o efeito de sombra, você pode escolher sombra. Se você quiser usar qualquer outro estilo, pode usar esses efeitos. Eu já usei esse estilo oco e não escolhi nenhum, então não tenho nenhum estilo aqui Se você quiser adicionar qualquer outro estilo como esse, você também pode ajustar a espessura do traçado do estilo e o deslocamento dessa forma de fundo, que é o texto Você pode definir a direção aqui. Você também pode alterar a cor desse valor. Todas essas coisas existem com base na necessidade que você pode usar, se quiser. Não use a menos que seja necessário. Ter um esboço e um elevador retirará esse design ou as informações de texto do plano de fundo O valor é menor, o valor da intensidade. Ao adicionar mais, você também terá uma melhor visibilidade nesse fundo de contraste. Para ter o esboço aqui. Você vê aquele eco e falha. Você também pode ajustar os valores externos de falha e brilho de néon Com base no joelho, você pode escolher o que quiser. Se eu quiser destacar apenas o fundo do texto, posso escolher esse plano de fundo para definir o arredondamento da borda, o valor da dispersão e a transparência Todas as coisas estão lá fora. Mas de qualquer forma, aqui, vou usar apenas uma cavidade. Você tem mais duas opções aqui, você pode ver essa forma, que tem uma curva e agora, se eu quiser adicionar o texto baseado no logotipo, eu apenas dupliquei isso e escolho essa curva para que possamos ajustar o valor da curva aqui, você pode ver que tipo de curva você precisa Com base nisso, podemos ajustar os valores aqui. Se você não precisa, eu simplesmente escolho nenhum. Estes são os textos ex two que você tem com os desenhos. Se quiser, você pode usar todas essas coisas. Agora eu desço e me certifico de que estava lendo e que estava com todos esses elementos em um alinhamento adequado Veja esta página, a princípio, meus olhos vão dar uma olhada no título só porque era maior e tinha uma cor diferente, o que é relevante para esse tema. Depois disso, tenho as informações do corpo do texto. Então, é fácil obter três detalhes diferentes que recebi como orgulho de oferecer. Aqui também, recebi as informações de feedback com caixas individuais separadas e eu só quero colocá-las na frente. Eu escolho todos os três elementos e você pode ver que eu fui selecionado, a forma do plano de fundo e o texto para enquadrar e esse elemento. Agora, pressiono Shiftiki e clico no plano de fundo, fui Eu clico novamente no Shift tiki, o texto. Agora eu fui selecionado apenas esse elemento. Eu escolho esse menu e escolho camada e escolho trazer para frente. Então, em vez de apresentar, escolhi trazer para um amigo. Sim, já estava no amigo para que eu pudesse selecionar diretamente e duplicar Eu posso colocar onde eu quiser esse elemento. Anteriormente, eu precisava fazer isso, mas não percebi. Então agora eu fiz esse trabalho. Eu apenas duplico e adiciono onde eu quiser. Preciso verificar isso com cuidado e garantir que você tenha usado o mesmo tipo de valores de fonte baseados na marca em todos os lugares. Tem um alinhamento adequado e tem valores adequados, você sabe, incluindo o tamanho da fonte Fui usado ao longo de 12 anos. E você pode ver, eu nunca me afastei do tema de cores. E aqui também, eu escolhi a seção. Depois de escolher a seção, quero alterar a cor do plano de fundo. Também posso coletá-lo do meu tema. Se eu quiser as mesmas cores, posso utilizá-las. Mas eu uso a cor da minha foto em vez de usar o valor da marca porque é uma página de galeria. Quero fornecer isso em uma cor diferente ao mesmo tempo, que não se afaste das cores do nosso documento. Então, depois disso, eu estava tendo minha página de contato. Lá também recebi as informações e aqui eu só quero mudar a cor porque essa cor já está lá e eu quero destacar essa cor. Eu posso escolher assim ou posso torná-la um pouco mais escura, mas sem muita quantidade de valores sombrios Eu seleciono a primeira moldura e escolho essa cor. Eu escolho o valor da cor valores um pouco escuros e quero usar a mesma cor nova. Você pode ver que é isso e eu quero usar a mesma cor para esse objeto também. Agora temos uma visibilidade diferente dessas informações. É assim que me certifico ter as informações de texto adequadas para todos os lugares aqui Além disso, preciso apenas de 12 fontes de texto. Eu não preciso de 13. Novamente, seleciono os dois objetos e agrupo. Eu posso usar uma tecla de atalho Control G. É assim que eu garanto se tenho todas essas informações de forma adequada E aqui estou um pouco mais brilhante para que seja fácil, você sabe, ler esses gráficos. Então é assim que eu me certifico usar todas as informações de texto e, você sabe, o tipo relevante de cores em todo o site para a marca usando o Canva 55. 54 Aplique estilos de outros designs: Nesta lição, mostrarei como podemos adicionar os estilos ou, você sabe, as cores de fundo e os estilos de texto de outros designs ao nosso design usando o Canva Isso é possível? Sim, é possível. Deixe-me mostrar isso com um exemplo diferente aqui. Eu escolho outro site que usamos anteriormente no início do nosso curso. Agora você vê que esses dois têm várias seções com as páginas do site. Agora eu quero adicionar algumas outras cores de estilo para isso. Agora eu escolho esse plano de fundo e quero escolher essa cor de fundo, você pode ver quais são todas as cores, as cores do documento que eles têm com esse design. Agora, quero adicionar as diferentes cores do documento, o que significa um estilo diferente que mudará todos esses elementos. Deixe-me mostrar como podemos utilizar isso um por um. Para usar a cor dos outros designs em um novo documento ou em outro documento, basta criar todos os trabalhos ou editar todos os trabalhos. Agora, depois disso, chego ao topo dessa opção, que é chamada de design. Você pode ver aqui que eu tenho uma opção chamada design. Quando eu clico nesse design, ele mostra os diferentes modelos dos designs que estão disponíveis com o Canva Eu movo meu mouse para os modelos, você pode ver que existem muitos modelos por aí. E há outra opção depois dos modelos. Você pode ver o que são estilos. Eu clico em Estilos, isso mostra que o primeiro é a sua marca. Então, quando eu clicar lá, ele mostrará que adicionará a cor da marca a esta página da web. Deixe-me clicar nisso. Quando clico nela, você vê que somente nesta seção, eu fui selecionada e esse valor de cor foi adicionado. Agora, depois de adicionar isso para ter a opção aleatória, quando eu clico nela, ela muda as cores que eu estava usando com Agora, acabei de selecionar esta página inicial e adicionei isso. Você pode ver que todas essas cores são alteradas de acordo com o meu estilo. Da mesma forma que eu desci. Aqui eu tenho muitos valores de estilo predefinidos. Podemos acrescentar isso. Mas aqui temos uma diferença. Você pode ver que todos esses estilos têm aparências diferentes de serem usados recentemente Eu só desço depois disso. Eu tenho uma categoria de combinações, o que significa que ela terá cores , bem como a combinação tipográfica Quando eu clicar nele, as duas coisas serão aplicadas. Então você pode ver que a tipografia foi alterada, assim como a cor Se você quiser embaralhar isso também, novamente, depois de aplicar isso, você pode vir aqui e clicar nele Vou misturar todo o valor do que você usou. Da mesma forma, posso adicionar as cores sozinho aqui. Eu só quero desfazer. Eu não preciso de todo esse estilo. Imagine só. Só preciso de cores. Eu clico apenas nessas paletas de cores, basta clicar lá para que a cor sozinha seja embaralhada ou alterada, não aquela tipografia Eu pressiono e faço da mesma maneira, você também pode adicionar os conjuntos de fontes sozinho em vez de afetar todos esses elementos. Veja aqui, acabei de adicionar qualquer conjunto de fontes. Só isso foi alterado. Eu estava apenas, você sabe, continuando mudando os conjuntos de fontes. Você também pode usar o botão C A. Portanto, existem tantas categorias que você também pode utilizar para as paletas de fontes e cores Eu posso ver que temos um enorme suporte de paletas. E se você acha que isso é bom e deseja adicionar isso a todas as páginas que temos com este Canva, você pode escolher isso para aplicar a todas as páginas Então, em todas as páginas, esse tema de cores será aplicado. Essa é a beleza desse estilo. Onde você pode pesquisar aqui, você pode adicionar sua própria palavra-chave. Você pode obter esse valor de cor. Você também pode adicionar isso aqui. Existem muitas categorias por aí, ilustrativas, e você pode adicionar a mesma combinação a todas as páginas. Está vendo isso? É assim que você pode utilizar os estilos. Esses estilos são predefinidos. Você também pode adicionar os estilos de outros modelos. Deixe-me mostrar como você pode adicioná-lo. Acabei de pressionar desfazer novamente e quero manter o modelo original Esse é o modelo original. Sim. Depois disso, volto aos modelos novamente. Se você observar esses modelos, maioria deles é gratuita, assim, e esses são os modelos gratuitos, e esse é o modelo profissional. Você pode ver que isso mostra que você atualizou para o Canva Pro para usar esses modelos premium Eu não vou usar isso. Vou usar apenas os modelos gratuitos. Aqui eu vou escolher este e este, este tem as cores violetas e eu vou usá-lo para utilizar as cores específicas do modelo, os estilos, eu venho para este menu aqui. Depois de escolher esse menu, ele mostra a opção aqui, que é reproduzir somente texto, reproduzir somente cores e reproduzir elementos. Quando eu escolho apenas texto Alay, ele adiciona apenas os elementos tipográficos desse design Eu clico nisso uma vez, você pode ver que só a tipografia mudou Eu simplesmente ando. E, novamente, chego a este menu. Eu escolho apenas cores uplay. Então, quando eu escolho apenas cores uplay, só as cores são aplicadas, eu também posso embaralhar as cores novamente uma vez, se eu tiver sido eu também posso embaralhar as cores novamente uma vez, se eu tiver Não há muitas cores, então isso não estava acontecendo. Eu, mais uma vez, volto às cores originais. Sim. Agora, novamente, eu venho a este lugar. Eu tenho a opção chamada de elementos. Então, em um design, usamos elementos diferentes como esse e aquele modelo para ter os elementos nele. Então, se você quiser adicionar esses elementos, podemos usar essa opção, que é aplicar elementos. No entanto, se eu quiser adicionar todas as coisas desse design, posso escolher esse estilo de aplicação à página. Então, quando eu escolho aplicar estilo à página, isso será aplicado à página selecionada no momento. Você pode ver que ele foi adicionado com a página selecionada atualmente. E depois disso, escolho aplicar a tudo para que todas as páginas tenham os mesmos estilos. Então é assim que você pode adicionar esse estilo às páginas da web. Você pode ver que ele foi perfeitamente adicionado a todas as páginas. E lá também, você sabe, você pode fazer todos esses trabalhos. Agora, chego a esta, você sabe, página inicial. Você pode ver que o texto foi alterado e as cores foram alteradas. É assim que funciona se você quiser adicionar estilos de outros sites ou estilos separados no design de um site Cava Pode usar o mesmo estilo, processo adicional de qualquer modelo. Você pode ver aqui, basta aplicar isso e eu só quero aplicar em todas as páginas. Se você também quiser embaralhar, pode fazer isso ao adicionar essas obras Com base na necessidade, eu apenas desfaço as que precisam ser desfeitas. Com base na necessidade, você projetará como adicionar esses estilos a partir de outros modelos ou outros estilos. 56. 55 Ajuste de cores de imagens com base no tema: Nesta lição, mostrarei como podemos fazer o ajuste de cores nosso site com base no tema de cores, o que usamos no Canva Vou começar com esta página sozinho. Você pode ver que esse é um fundo roxo, mas a imagem parece mais quente. Para ajustar isso, para equilibrar essas cores, vou para a opção de edição. Na opção Editar, temos os ajustes. Sabemos que eu clico lá quando me movo e ajusto o valor da tonalidade e a temperatura Posso ajudar essa imagem a obter a cor correspondente ao meu plano de fundo e tema Deixe-me mostrar como vou fazer isso. Mas aqui, não use o valor de saturação porque isso aumentará apenas as cores, então eu não vou usar isso Então aqui vou eu e outra opção chamada temperatura. Aqui, você pode ver que parece quente. Primeiro, quero reduzir a temperatura da imagem, isso por si só muda completamente a sensação da imagem e aqui tenho ajustes de tonalidade, mas aqui você não pode usar isso que não foi muito útil para nós Depois disso, eu apenas adiciono um pouco mais de brilho e chego ao fundo disso. Aqui eu posso ajustar um pouco o valor de saturação e a vibração E é assim que você pode alterar os valores. No entanto, se você quiser alterar a cor da imagem, poderá usar essas opções. Para fazer isso, escolho redefinir ajuste. Eu venho aqui e seleciono a cor da imagem. Mas você pode ver que foi totalmente alterado. É por isso que não usamos. Usamos somente as opções diretamente dos ajustes. Não preciso mudar isso, apenas ajusto o brilho e quero ajustar os valores de preto aqui. Então eu sou apenas a sombra, tipo, o que eu quero com isso. Da mesma forma, você pode ajustar isso, mas essa cor combina perfeitamente com o meu tema e está tudo bem Aqui eu posso mudar os valores dessas imagens. Você pode usar os ajustes. Você deve ter outra opção que são os filtros. Eu venho para os filtros, aqui eu tenho muitos filtros com variações de cores diferentes. Eu posso utilizar diretamente se você quiser. Se eu quiser um tema assim, posso usar diretamente o mesmo tema para todas as três fotos. Não é a coisa mais importante , é a opção que você tem, se quiser, você pode usá-la. Acabei de me desfazer. Ao ter outras opções nos filtros, você pode ver que existem muitas coisas com esses valores de cor. Se você não precisar disso, você também pode simplesmente selecionar esses tipos de valores e ajustar a intensidade dessas informações Então é assim que ajustamos as cores das imagens de acordo com nossa necessidade. Não precisamos ter todas essas cores, o que temos com as fotos. E aqui também, você pode ver que eu preciso mudar a cor. Mas essa foto combinava perfeitamente com o plano de fundo E aqui eu escolho a foto e depois de escolher a foto, sim, eu clico com o botão direito aí. Eu posso ver que a imagem foi colocada atrás. Acabei de separar a imagem, selecionei a imagem. Agora vou para a opção Editar e, na opção Editar, quero ajustar as cores. Eu vou para a opção Ajustar aqui e, na opção Ajustar, tenho um valor de temperatura. Eu posso ajustar isso de acordo com minha necessidade. Eu também quero ajustar o valor da tonalidade aqui, então eu apenas ajusto o valor da tonalidade com base nisso Então é assim que eu faço o ajuste. Depois de fazer o ajuste, novamente, volto ao design. Eu estou ali e defino a opção chamada definir imagem para o plano de fundo. Essa imagem será completamente adicionada como plano de fundo, não como uma imagem separada. É assim que fazemos os ajustes de cores das fotos acordo com o tema de cores, para que não atrapalhe todo o design Agora, se eu selecionar essa imagem e quiser recuperar ou apenas redefinir todas as alterações de cor, concluí a foto. Dessa vez, você perceberá o quanto isso é essencial para o design desse site. Você pode ver isso, esse é o valor original e nós mudamos assim. É por isso que é totalmente necessário ajustar todas as cores das imagens com base no tema usando o Canva Aqui em nosso site também ajustamos as cores das imagens. Você percebe que usamos essas cores com base apenas no tema. É assim que usamos as cores no trabalho de design. 57. 56 Crie um favicon usando o Canva: Nesta lição, mostrarei como podemos criar um ícone FAI usando o Canva ícone FAI é o ícone de representação do site , amplamente utilizado em todas as páginas da web Agora, se você olhar esta página da web, temos um nome de site aqui, que é Houston, e na frente dele, você pode ver que temos o ícone. Então esse ícone é chamado favicon. Era pequeno em tamanho. Você pode ver que isso representa o tipo de trabalho que estamos fazendo ou que tipo de site é esse. Veja, eu tenho outra guia que tem a página do Google e há um ícone do Google lá , chamado de ícone Fay Da mesma forma que ter uma página do YouTube lá. Essa página do YouTube tem o título que é o site chamado YouTube e tem o ícone de fay na frente Cada site tem seu próprio ícone de dia. Lá, eles forneceram as informações a que esse site ou página da web pertence. Agora, aqui também vamos criar o ícone do dia. Os cinco exxon têm principalmente 16 em 16 pixels. Aqui vou mostrar as diferentes dimensões. Esse é o tamanho mínimo ideal, que é de 16 em 16 Você pode ver que era um tamanho. Mas se você quiser adicionar, quanto melhor o tamanho, você pode ir de 32 para 32, 64 64. Mas 16 16 é o valor ideal. Vamos criar o ícone de tarifa para nosso próprio site usando o Canva Para fazer isso, eu crio um novo documento com o Canva. Eu abro uma página e aqui vou escolher o tamanho personalizado porque quero criá-lo manualmente. Eu escolho o tamanho personalizado e escolho a unidade em pixels em vez de polegadas ou qualquer outra coisa. Sempre que você fizer a alteração nas dimensões, primeiro, você escolhe a unidade primeiro. Depois disso, só você vai dar a dimensão. Essa é uma maneira correta. Então, aqui eu vou adicionar 32 em 32. Você pode ver que ele mostra qual é o tamanho mínimo de pixels, e vou mencionar isso em 64 em 64. Assim, posso fazer o resto mais tarde, porque posso reduzir a dimensão enquanto exporto isso como um ícone de fã. É assim que eu posso fazer o trabalho. Depois disso, vou escolher a opção que é criar um novo design. Agora você pode ver que precisamos fornecer no mínimo 40 pixels para o design. É por isso que recebi 64. Posteriormente, exportarei com resolução menor, que é a menor dimensão. Agora eu escolho isso para criar um novo design. Depois de escolher o novo design coreano, você tem sua área de design de facon Então, aqui vou ao meu site. Eu posso usar meu logotipo. Acabei de copiar esse logotipo. Eu venho para esta área, aqui eu colo. Então, quando fiz o Control V pela primeira vez, coloquei meu logotipo aqui e escolhi uma cor de fundo. Aqui eu escolho uma cor de fundo e tenho o valor do meu kit de marca aqui. É por isso que o kit da marca é muito importante. Eu cliquei nessa cor para o fundo, ela foi adicionada. Agora eu escolho a foto e escolho a posição. Aqui eu coloco esse meio no alinhamento e, para esse eixo X, ele já estava no centro É assim que você pode simplesmente criar seu ícone de dia. No final, vou baixar isso. Para fazer isso, pressiono o botão Compartilhar e aqui tenho a opção chamada Download. E depois do download, eu escolho esse PNG. Se você quiser o fundo transparente, pode optar pelo PNG, mas eu preciso dessa cor aqui, então escolho o documento JPG. Se você achar que a letra específica sozinha com um símbolo é necessária, basta adicioná-la sozinha. Agora eu escolho esse JPG e ele mostra o ajuste de qualidade, e este é o presente, a dimensão. Você pode ajustar isso se tiver essa conta profissional. No momento, tenho apenas a conta normal. Agora, depois de adicionar esse tipo de arquivo, vou escolher essa opção de download. Então eu escolho Baixar. Ele será baixado no meu sistema local. Assim, posso renomeá-lo e utilizá-lo enquanto estava carregando meu site on-line Então é assim que você pode criar ícone Fay para o seu site usando o Canva 58. 57 Visualize o design nos modos móvel e desktop do Canva: Nesta lição, mostrarei como podemos finalmente verificar a visualização móvel e desta, e podemos fazer as alterações necessárias para o design do site usando o Canva Para fazer isso, vou escolher essa prévia. Certifique-se de ter feito todo o trabalho em cada página. Então, depois de concluir todas essas tarefas, vou para esta página que é uma prévia. Escolha a avaliação. Nas seções anteriores, também vimos a análise e como essas animações estão funcionando, como o site tem uma aparência Mas aqui vamos verificar mais uma vez como o site tem a aparência. Em uma visão normal, parece bom. Não tem nenhum problema com os elementos. Todo e qualquer elemento estava sendo carregado. E sim, isso é fantástico, incluindo esse logotipo, está tudo bem. Agora, eu transformo isso em tela cheia. Em uma visualização em tela cheia, você pode ver que aqui na parte inferior, a foto está com uma aparência adequada que não tem nenhum problema. Mas se eu for lá, sim, aqui temos um problema. Com essas áreas, não temos nenhum problema, mas aqui só o local tem o problema de alinhamento, vamos resolver isso Também na visualização móvel, vou fazer a prévia. Também temos um problema com isso. Os botões estão bem, mas eu tenho um problema com essa coisa em particular. Você também resolverá isso na visualização móvel. Eu apenas rolo e você pode ver que o formulário está visível, o mapa do Google está visível. Está tudo bem lá fora. Aqui também o modo de alinhamento é perfeito. De qualquer forma, é assim que precisamos no topo. Vamos ver como vamos fazer isso. Agora, primeiro, eu apenas pressiono o botão Fechar. Eu só quero manter todos os elementos em um único grupo, então eu seleciono todas as coisas e as agrupo primeiro. Agora eu só tenho a prévia e vou ter a visualização em tela cheia. Sim, está tudo bem agora. Você pode ver que, como fui agrupado, isso não se afasta desse design, afasta desse design, e isso também parece muito bom para a visualização em tela cheia Agora eu mudo isso para a visualização móvel. Na visão móvel, temos, você sabe, um problema resolvido, mas aqui temos o problema. Só temos que procurar isso. Agora, basta pressionar o botão Fechar e vou escolher esses ícones sozinho, basta quebrar o ritmo E somente para os ícones, eu quero agrupá-los, e somente para essas informações de texto, eu só quero agrupá-los. E, finalmente, eu faço parte do grupo geral. Agora eu tenho a visualização prévia novamente e vou mudar isso para a visualização móvel, e ainda enfrentamos o problema, então eu tenho que mudar as posições dos objetos de qualquer maneira. Assim, você pode ver que todo e qualquer grupo foi dividido. E agora eu faço isso como um único grupo em vez de ter vários grupos. Eu o agrupo e tenho uma prévia aqui com uma visualização móvel também. Agora que o texto tem o problema, e novamente, eu agrupo isso, eu apenas quebro esse grupo. Tudo bem. Agora eu escolho todos esses elementos e o grupo que, individualmente aqui, também escolho todos esses elementos , incluindo o logotipo, e os agrupo, tenho a visualização novamente e terei a visualização móvel. Isso parece muito bom, isso não tem nenhum problema, mas sabemos que os botões são muito pequenos. Resolveremos isso em nossas próximas áreas. Depois disso, escolho essas informações de texto, de acordo com o Sando, e só quero agrupá-las para que esse alinhamento seja o mesmo em uma visualização móvel Deixe-me mudar isso com uma visualização móvel. Ok, eu ainda me mostro o problema. O problema não é esse, tudo bem. Resolvi esse problema e apenas agrupei isso sozinho e tenho a prévia com o celular, então aqui, sim, temos o mesmo problema lá fora Eu agrupo e escolho esses dois sozinhos com isso. Agora eu tenho uma prévia aqui, a visualização móvel. Sim, isso é bom. Esse problema foi resolvido Mas de qualquer forma, preciso mostrar essa barra de navegação de uma maneira melhor. No momento, você pode ver que, com essa barra de navegação, ela foi agrupada É por isso que parece estar em uma ordem correta. As próximas aulas corrigirão isso. 59. 58 Ajuste seções para telas menores: Nesta lição, mostrarei como podemos organizar o alinhamento das seções de acordo com o conteúdo do design do site do Canva Em nosso cabeçalho, temos o logotipo e, depois disso, temos a barra de navegação e outros ícones. Se você acha que está muito apertado e pode selecionar essa seção específica sozinha, depois de selecionar a seção, basta reduzir a área da página da web. Então, eu apenas seleciono essa seção sozinha e aumento a área da seção. Agora você pode ver que temos mais espaço e eu posso simplesmente desmarcar isso, posso desagrupar isso e arquear e colocar onde eu quero Mesmo se você quiser mais espaço, sim, podemos adicionar mais com a ajuda desta seção. Para fazer isso, basta clicar apenas nessa seção e aumentar o espaço da seção. Eu posso mudar as posições de cada padrão agora. Então é assim que você pode mudar as posições de cada botão. Você tem espaço suficiente aqui agora para representar todos os botões. Então eu seleciono todos os botões agora e vou para baixo, então será melhor ter todos aqueles com os alinhamentos adequados na parte superior Agora, eu só quero ter uma prévia. Eu apenas escolho o botão de visualização, e é assim que temos, que é ter espaço suficiente lá fora. Você pode ver que não temos nenhum problema com o restante das coisas lá. Então, é assim que podemos fornecer o melhor espaço para gerenciar todos esses elementos. Só com isso, você sabe, a barra de navegação. Em cada seção, se achar que precisa de um espaço específico, você pode expandir ou reduzir de acordo com a necessidade. Aqui, você pode ver que tenho espaço suficiente e não quero ajustar isso. Aqui, eu só preciso de um pouco mais de espaço lá fora. Então eu escolho esta seção. E nesta seção, eu quero expandir um pouco, e eu quero escolher todos os elementos, não só isso, todos os elementos. Eu me movo para baixo usando minhas flechas. Depois disso, seleciono o texto e desço com as setas Fornecer esse espaço é altamente recomendado e necessário para equilibrar seu design, e aqui também tenho espaço suficiente. Mas aqui o que eu faço é selecionar os elementos e me mover um pouco para manter o equilíbrio adequado. Depois disso, venho aqui e verifico se havia espaço suficiente ou não. Posso ver que todas essas coisas têm espaço suficiente. E depois de ajustar todos os valores das seções do quadro, quero ter certeza de que os elementos na página têm o alinhamento adequado ou Para garantir que eu acesse esse menu de arquivos. No menu de arquivos, tenho a opção chamada configurações. Nas configurações, ele mostra muitas opções, e eu vou usar essa opção , chamada de mostrar réguas e guias Eu só clico. Agora você pode ver que mostra a régua lá fora A régua, você receberá a diretriz conforme usamos em um software como o Adobe photoshop Podemos obter a diretriz desse governante. Acabei de adicionar uma diretriz aqui. Você pode ver que essa diretriz estava presente em todas as seções Agora, eu só quero adicionar a mesma diretriz neste lado direito também Aqui eu adiciono a diretriz. Agora, isso me ajudará a gerenciar os elementos em todas as seções. Eu só quero adicionar do meu cabeçalho, não com a segunda página. Então, tudo bem, eu me ajusto ainda mais agora. Então é assim que eu quero colocar meus, você sabe, os elementos. Agora, eu escolho todos esses elementos e ajusto o lugar dentro do qual será o melhor. E depois disso, eu desço e me certifico de que todos aqueles, você sabe, elementos foram organizados dentro desse espaço adequado. Você precisa saber que essa diretriz não estava impressa e não estava visível na visualização final do site Ele estava disponível apenas para trabalhos de pré-visualização e edição. Eu seleciono tudo isso e apenas adiciono aqui. Em vez de fazer isso, você tem outra opção. Então, eu apenas desfaço o cubo usando o Control Z, e aqui eu seleciono todos os elementos E eu só quero expandir a área para que o espaço entre cada objeto seja mantido. Acabei de expandir isso e aqui também, eu apenas expando para que o quadro da imagem , o quadro de texto e as formas mudem de tamanho, mas isso não afetará a proporção das imagens e outras coisas. Agora, depois disso, chego ao fundo da questão. Eu seleciono essa área com base no alinhamento que consegui. Eu também quero ajustar o ícone dessa página inicial. Eu seleciono isso e quero gerenciá-lo. Eu amplio essa área. Agora eu apenas seleciono isso, basta chegar até esta parte inferior e arquear o pergaminho. Agora, depois disso, quero ajustar essa área. Eu apenas clico, rastreio e coloco onde eu preciso. Eu preciso daqui, eu não quero nenhum outro lugar. Quero ter certeza de que tenho os botões home em todas as páginas em um valor adequado. Vou verificar isso. Depois de ajustar esse discurso de facilidade, chego à página de serviços e aqui também seleciono as informações do texto e vou alinhar de acordo com essa Eu escolho essa nota. Aqui eu usei a nota, não os quadros de imagem. Para ajustar o botão home. Eu venho para esta página da galeria. Também na página da galeria, preciso ajustar acordo com a necessidade de fazer isso, quero selecionar todas as fotos que tenho na ordem correta. Eu estava selecionando várias fotos usando o Shiftiki e simplesmente expandi . Não vou mover a imagem porque tenho um espaço adequado entre cada Eu apenas expando um pouco a área da imagem. No final, escolho o botão home e coloco de acordo com a necessidade. É assim que eu ajusto os alinhamentos usando a gradação. Agora, chego à página de contato, escolho os elementos que foram organizados. E eu movo isso para lado esquerdo com o alinhamento adequado Aqui também, escolho esta forma e outras coisas e me arrumo em um local adequado. É assim que você pode organizar os elementos. No entanto, para a comida, não precisamos nos preocupar com isso porque ela estava no alinhamento central É assim que você pode fazer esses ajustes e alterações no design. No final, você pode acessar as configurações do arquivo e escolher esta regra e guia de exibição. Então esse reality show, e estava escondido agora todas essas diretrizes. Agora eu tenho a prévia aqui. Assim, você pode ver a maneira correta de organizar todos os elementos sem falhas ou alinhamentos irregulares É assim que podemos alinhar todos esses elementos usando o Canva. Você pode ver que todos são muito bons. É assim que podemos fazer o trabalho de alinhamento baseado em grade e guia usando o Canva 60. 59 Teste a imagem e o tamanho do texto: Nesta lição, mostrarei como o texto e a imagem se escalam para o site e o desktop com a visualização móvel. Para fazer isso, vou para a prévia agora. Na versão prévia, sabemos que essa é a visualização padrão do site. No entanto, eu apenas vou para a página inicial e aqui quero expandi-la para modo desktop completo com a tela ampla. Quando eu faço isso, você pode ver que a imagem de fundo desse layout foi automaticamente expandida até aquela área completa. Depois disso, tenho a segunda página que é sobre nós. Em Sobre nós, eu não adicionei nenhuma imagem de fundo. Mas se eu adicionar qualquer imagem de fundo, ela se expandirá da esquerda para a direita, de cima para baixo. Agora, eu não tenho nada aqui. Aqui, no modo desktop completo e no modo desktop normal, a legibilidade do texto e dimensionamento da imagem são realmente Você pode ver que o texto está totalmente legível e todos os ícones estão organizados de maneira adequada As animações estão funcionando de forma adequada. Agora eu quero ir para a visualização móvel. Eu apenas escolho a visualização móvel, vou para a página inicial. Não tenho muitos problemas de que os botões sejam claramente legíveis. Sobre nós e as instalações, todos esses botões Agora, depois disso, temos poucos problemas com a legibilidade Olhamos para o texto, Houston, abaixo dele, temos o conteúdo corporal. Esse era o Canvas e o estilo da fonte. O tamanho do número é 12. Essa mesma fonte que eu tenho aqui. Mas devido a esse plano de fundo, forma e ao tamanho do texto, esse texto foi reduzido ao tamanho de acordo com a visualização de projeção móvel, e as páginas restantes não tiveram problemas com informações de texto porque não há nenhuma informação de texto maior para dominar Aqui também na grade, as imagens são organizadas de maneira adequada. Aqui eu tenho o problema, eu preciso ajustar isso também. Eu tenho dois lugares para me ajustar. primeira é a página inicial, o conteúdo do corpo, e a segunda é que preciso ajustar essas informações de texto, que estão na lista. Além disso, não tenho nenhum problema. Deixe-me verificar como fazemos essas mudanças. Aqui eu só dou crescimento. Eu escolho esse texto sozinho e apenas reduzo esse espaço indesejado. Depois disso, vou reduzir um pouco o tamanho da fonte. Não preciso de muita fonte. Mas isso não deve atrapalhar todo o design. Eu só tenho a prévia agora para verificar se ela foi ajustada de forma adequada. Agora você pode ver que o texto é mais legível. É por isso que mudei isso e agrupo isso agora e vamos verificar se estava presente de maneira adequada. Depois de agruparmos isso, não, o tamanho do texto foi reduzido. Você pode ver isso. Parece que o grupo é o motivo, mas sem problemas. Eu só dou. Não quero agrupar os elementos. Eu só quero manter o nome do hotel em tamanho grande. Não quero me agrupar agora e é assim que parece agora. Como fui agrupado, esse elemento reduziu o texto Agora está tudo bem. Era o que eu precisava para um texto mais legível. Isso é bom. Não há muito problema com isso. Depois disso, acabei de fechar esta revisão e quero ajustar essa lista, chego a essa área da lista. Essa lista era o problema lá. Eu seleciono isso e o agrupo. Eu venho para a análise agora com a visualização móvel. Visualização móvel, tive que verificar como está agora. Ainda assim, parece o mesmo. Eu quero me ajustar ainda mais. Acabei de desagrupar isso. Portanto, esse elemento não deve exceder esse lado esquerdo. Aqui eu tenho o problema. Você pode ver que as informações não foram colocadas em um valor adequado. Eu deveria tocar na linha da grade. Acabei de ativar novamente a visualização da linha de grade e esse texto não foi organizado corretamente. Agora espero que seja essa a solução. Eu também escolho esse texto e quero escolher a posição aqui. Depois de escolher essa posição, quero ajustar o valor. Aqui, eu escolho esse top. Por padrão, agora você pode ver que estava apenas em um alinhamento adequado Então, agora eu só quero ver a prévia. Eu escolho essa prévia agora, a visão móvel e o alinhamento do unordist Ok, ainda temos um problema. Eu tento me mover um pouco acima. Não. Essa não é uma maneira correta. Nós sabemos disso. E vou lidar com isso de outra maneira. Como se eu fosse adicionar a forma de retângulo aqui. Para fazer isso, eu pressiono R. Então eu tenho um retângulo no centro da seção Agora eu movo este aplicativo e vou colocá-lo aqui com isso, agora aqui, eu só quero ter certeza de que forma tem transparência zero. Eu não preciso desse objeto aqui, então eu escolho esse objeto sozinho e escolho essa transparência em zero. Agora eu escolho as informações de texto e seleciono as duas como um grupo Depois de criá-las como um grupo, novamente, tenho uma prévia com visualização móvel. Eu venho para essas instalações ou ainda enfrentamos o problema. Eu cresci e acabei de me barbear. Agora, acabei de atualizar esta Você pode ver que todas as alterações foram salvas e acho que essa página ficou mais lenta Então, quero relembrar que desço novamente. É aqui que preciso ajustar essas informações e elas devem corresponder a este lugar. Agora, para fazer isso, eu apenas seleciono todas as imagens, o que eu tenho abaixo disso, e vou para baixo porque eu quero colocar essa informação aqui e antes disso, eu expando essa informação de texto e coloco isso aqui. É assim que eu quero colocar. Aqui também eu duplico isso. Eu quero manter três coisas aqui, e aqui eu quero manter duas coisas. Foi assim que eu coloquei e agrupo isso. Agora eu tenho a prévia novamente. Na visualização móvel, eu vou ver isso. Isso parece perfeito e ainda assim enfrentamos esse problema. Tudo bem. Essas listas ou listas. É por isso que parece que está tudo bem. Agora parece melhor. Tenho certeza de que não é a melhor saída, mas agora parece melhor comparar as ocasiões anteriores. Pegamos todas as coisas ou espalhamos. Agora parece melhor e eu tento avançar para ter a prévia com um celular. Ok, tudo bem. Então é assim que eu quero ajustar todas essas informações de acordo com a necessidade, e posso expandir essa área um pouco com base na necessidade. Então é assim que podemos verificar o texto e, você sabe, as imagens, se todas as coisas estão colocadas de maneira correta ou se exigiram algum tipo de escala ou ajuste nas bordas Você pode ver que esse preto perturba completamente a imagem Aqui também ainda tenho um preto que deve evitar essas coisas. Então é assim que podemos fazer todos esses, você sabe, ajustes para a visualização móvel usando o Canva 61. 60 Reorganize os menus de navegação para a usabilidade móvel: Nesta lição, mostrarei como podemos reorganizar os botões da barra de navegação de acordo com nossa necessidade Em nossas próprias aulas anteriores, eu mostro como podemos fazer esse trabalho e acabamos de separar todos esses botões. Você pode ver que isso não é um grupo. Quando um grupo, todos os elementos serão mesclados e parecerá apenas um botão de tamanho pequeno Não preciso que eu queira melhor legibilidade e melhor acesso ao botão É por isso que recebi botões individuais individuais para todas essas coisas. Depois disso, se quiser adicionar a mesma barra de navegação na parte inferior do rodapé, você pode copiar esses elementos Eu só copio isso. Depois de copiar isso, chego ao rodapé e no rodapé, simplesmente expando a área E eu movo toda a área do elemento aqui, e eu quero colar aqui. Eu apenas pressiono Control V. Então, todas essas informações são colocadas aqui Agora, eu só quero ter certeza de que recebi isso no meio do design e não preciso de tanto tamanho de fonte. Eu só preciso de dez. Anteriormente eram 12, agora eram apenas dez. Quer mudar toda a cor do texto para branco, a cor do botão para branco, não aquele valor de cinza. Então agora você tem o menu aqui, a barra de navegação aqui na parte inferior do rodapé A partir daqui, você também pode acessar todas essas páginas porque essas informações já têm os hiperlinks para acessar essas Portanto, se você não tiver o arranjo adequado, aqui você pode organizar todas as coisas. Finalmente, você pode fazer isso. E aqui eu simplesmente o desagrupo e tenho uma prévia com a visualização móvel aqui e você vê como ela foi organizada e dispersa Não precisamos dessa condição. É por isso que agrupamos isso com isso. Eu só vim para garantir a aparência e aqui também temos o problema. Acabei de chegar ao final, quero agrupá-lo. Eu seleciono todos os elementos e os agrupo aqui também, só quero agrupar. Antes disso, eu apenas reduzo o espaço entre os elementos. E agora eu agrupo isso. Vamos ver com a prévia essas barras de navegação com uma visualização móvel. Aqui resolvemos o problema. Eu venho aqui na parte inferior, nos agrupamos e agora está tudo bem. Eu não tenho nenhum problema com isso. É assim que podemos resolver o problema que temos com os arranjos das barras de navegação no Canva 62. Teste elementos clicáveis em uma visualização móvel: Nesta lição, mostrarei como é simples como é acessível esses botões de visualização móvel, estejam eles funcionando corretamente ou não. Para fazer isso, chego a essa prévia e, depois disso, imediatamente, mudo para a visualização móvel. Aqui eu venho para esta casa. Quando chego a esta casa, você pode ver que, quando aperto o botão, ele funciona perfeitamente sem nenhum problema. E quando eu clico na galeria, ela move automaticamente a página da galeria. Role para baixo e clique no botão que está em casa. Então, estava se movendo perfeitamente novamente. Eu escolho uma galeria e, de onde quer que eu clique nesse botão, ele simplesmente se move e chega à página. Você pode ver como isso funciona perfeitamente e eu escolho o contato para carregar a página de contato E a partir daqui também, posso acessar esta página inicial, se necessário. Portanto, funciona perfeitamente com este site do Canva na caixa de design do Canva 63. 62 Otimizar a velocidade de carregamento com recursos visuais comprimidos: Nesta lição, mostrarei como podemos adicionar o conteúdo otimizado para o vídeo e as imagens. Em sites, na maioria das vezes, o tamanho do arquivo aumenta ou o tamanho do site aumenta devido a imagens e vídeos. Então, como você pode reduzir o tamanho da imagem e do vídeo, acordo com a necessidade do site? Deixe-me te mostrar aqui. Para fazer isso, vou até meus uploads. Nos carregamentos, vejo minhas pastas. Você pode ver que eu tenho pastas. Eu só quero adicionar apenas uma foto agora na tela, então eu venho para esta casa e aqui eu clico neste botão. Quando adiciono essa imagem, ela foi carregada e, se você olhar para a foto, a qualidade da imagem é muito alta. que é mais do que eu espero ou preciso com o design do meu site. Se você quiser reduzir o design do site, você tem duas maneiras de reduzir o tamanho da imagem. primeira é quando você está baixando as imagens dos sites, você tem o botão de download aqui e antes de clicar no botão de download, deixe-me mostrar mais uma coisa. Eu apenas debruço sobre a foto e abro em uma nova guia e lá você verá a foto com as diferentes dimensões Venha para esta área, que é gratuita com setas. Eu clico nas setas. Essa é a dimensão original da imagem com 6.400, desculpe, 4.000 pixels de largura e Mas se você quiser o tamanho mínimo, podemos baixar esse tamanho pequeno ou médio, o que é suficiente para o propósito do site. No entanto, se você estiver criando designs de impressão, poderá optar por esse design de tamanho grande. Caso contrário, se você quiser criar um site, esse meio é suficiente, pois em nosso site, você pode ver que, além da imagem da página inicial, usamos todas as imagens em tamanho pequeno Quando você tem o tamanho da imagem com menos dimensão, é fácil carregar o site em dispositivos móveis e computadores sem esperar pela Internet. Portanto, não é necessária muita Internet para carregar os elementos leves. Portanto, ao baixar as fotos dessa vez, você deve baixar as imagens de baixa resolução, o que significa o melhor valor para os designs do site com qualquer coisa Ou se você já baixou as imagens de alta resolução, se quiser redimensionar significa que existem muitos, você sabe, os redimensionamentos de imagem gratuitos estão disponíveis Por exemplo, esta é a plataforma gratuita online Image Resizero. Você pode simplesmente arrastar e soltar a imagem e escolher a fonte e reduzir o tamanho da imagem. Assim, você pode ver que nos tamanhos máximos de arquivo dez e B da mesma forma, muitos sites que oferecem o redimensionamento de imagens funcionam acordo com a necessidade. Você pode utilizar a opção de que precisa, seja para baixar a resolução real ou se tiver a resolução mais alta ao mesmo tempo, você pode redimensionar a Depois disso, você só precisa fazer o upload dentro do Canva. Não faça upload de todas as imagens com resolução mais alta. As imagens eleitas primeiro em categorias, depois redimensionadas e, por fim, basta fazer o upload É assim que você pode otimizar o site para visualização em sites e dispositivos móveis. Agora, em termos de vídeo, eu adiciono os elementos dentro do site. Depois de adicionar isso, chego a este menu de arquivos. No menu de arquivos, tenho uma opção chamada configurações. Nas configurações, tenho qualidade de reprodução de vídeo. Então eu venho para este lugar. Por padrão, era Auto. Portanto, com base na conexão com a Internet, ele selecionará baixo, médio ou alto. Mas se você quiser adicionar intencionalmente um alto, você pode escolher alto ou se quiser adicionar intencionalmente médio, você pode escolher Com base na necessidade, você pode escolher qual deles deseja. Por padrão, será Auto, o que é melhor porque, com base na conexão com a Internet, eles obterão a qualidade. Então, é assim que você pode otimizar a imagem e os vídeos do seu site com o design do Canva 64. Salve e visualize o design responsivo: Depois de substituir elementos de baixa resolução como imagens e vídeos, que têm o tamanho ideal, você deve ir para a visualização final, pois pode ver que as imagens serão carregadas o mais rápido possível e que os vídeos serão reproduzidos sem atrasos, e que os vídeos serão reproduzidos sem pois você os otimiza da mesma forma que pode da mesma forma que pode adicionar essas imagens e outros elementos, da maneira otimizada para trabalhos futuros Lembre-se de que sempre que você faz o site funcionar, você sempre precisa de imagens otimizadas, otimize esses arquivos de vídeo e, ao adicionar a alta resolução, essa pode ser a estrada secundária espalhada por toda a página, da esquerda para a direita Caso contrário, você não precisará de um tamanho de arquivo muito maior. Você pode ver que essa primeira imagem da página inicial terá toda a aparência espalhada quando eu a tiver na visualização em tela cheia Você vai usar dessa forma, você pode optar por imagens de alta resolução. Além disso, a dimensão máxima será de quatro K. Além de quatro K, não teremos nenhuma tela de televisão e, no momento, que é quatro k é o ideal Você não precisa usar mais de quatro k para essas imagens. Para as imagens restantes, basta criar os espaços reservados primeiro e, com base na dimensão, adicionar as imagens internas É assim que você precisa ter essas coisas. Então, somente na pré-visualização, você tem os elementos que serão carregados de forma rápida. Você pode ver que todos os elementos estão sendo carregados de forma rápida com base apenas nisso. E basta fechar a pré-visualização e eu faço a pré-visualização novamente e imediatamente mudo para a visualização móvel. Vamos ver como os elementos são carregados com animações. Todos estão muito bem. Estava carregando de maneira adequada. É assim que você precisa verificar se ele estava funcionando de maneira adequada ou não com conteúdo otimizado. 65. Finalize todos os elementos do design e revise cada página finalize todos os elementos do design: Nesta seção, veremos como publicaremos nosso site usando o Canva Concluímos todas as obras. Nós apenas fazemos a revisão final dos elementos do cabeçalho, o cabeçalho, está tudo bem na página inicial, tudo está bem aqui, e eu venho para a página A us e chego a esses serviços, não aos serviços, facilidades que você tem com o portal. Portanto, verifique se você tem todos esses elementos da maneira correta, conforme necessário ou não. Portanto, certifique-se de que cada página verifique o texto, as imagens, alinhamento, todas essas coisas Então está tudo bem aqui. Quando tudo estiver bem, agora você pode iniciar o processo de publicação na web. 66. 65 Use as opções de publicação do Canva: Depois de finalizar o conteúdo, publicaremos um site Para publicar isso, vamos usar essa opção, site publicado. Anteriormente, usamos essa visualização prévia para ter as funções de trabalho da visualização em desktop e em dispositivos móveis. Agora vamos escolher este site publicado. Depois do site publicado, temos outra opção que é compartilhar. Você não deve usar isso porque se quiser compartilhar esse design com outra pessoa na forma de design, não com o objeto final, você pode utilizá-lo. É por isso que você tem essa opção que é compartilhar design. Não, eu não compartilhei esse design com ninguém. Ele mostra a opção do site de download e o link de visualização pública disponível lá, mas no momento não vamos usá-lo. Não vamos compartilhar com mais ninguém. Simplesmente publicaremos o site. Para fazer isso, precisamos escolher essa opção, site publicado. Depois de escolher o site publicado, faremos os trabalhos restantes apenas aqui. 67. Escolha um domínio ou use a hospedagem gratuita do Canva: Depois de escolher essa opção publicada, ela mostra a análise do site na forma de desktop ou laptop e mostra a visualização móvel. No entanto, você pode clicar aqui e ver a visualização expandida dessa avaliação. Coagule isso novamente e vá para a opção do site publicado novamente. Então, aqui também, você tem essa visão. E depois disso, mostra os elementos de processamento que o site contém. Então, todos esses elementos que enviamos. Entre isso, você tem a opção chamada URL do endereço do site. Então, aqui eu escolho essa opção de edição. Aqui você pode mencionar o tipo de nome de domínio necessário. Então, acabei de adicionar o nome do arquivo. Esse nome de arquivo foi adicionado aqui. E se você quiser transformar isso em um albergue ou resort em Houston, você pode adicionar mais aqui. E se você quiser obter o novo domínio, clique aqui para obter o novo domínio. Então, para isso, é claro, você precisa fazer um upgrade para poder criar seu domínio personalizado sem esse nome de terceiros. Aqui você vê que eu escolho o site publicado. Ele mostra o nome adicional de terceiros aqui. Você pode ver o lado do ponto cava cbfs. Isso estará lá quando fosse um site gratuito. Não precisamos de nenhum site pago agora. Se você quiser, você pode fazer isso, obter uma opção de domínio. Caso contrário, você também pode alterar o nome gratuitamente do Houston hoster E eu apenas verifico se estava disponível ou não. Você pode ver que está disponível. Assim, você pode alterar o nome, o que está totalmente de acordo com isso. Isso não é um problema. Mas se você quiser seu próprio nome de domínio, adquirir um novo domínio precisará adquirir um novo domínio e converter sua conta normal em conta Pro , registrar um domínio separado para pagamento e pagar o valor. Você pode escalar esse nome sem esse lado do ponto cbfctmtva, que é o Então é assim que podemos selecionar sua URL para o site usando o Canva 68. Adicione um favicon e título para guias de sites: Depois de escolher meu nome de domínio para um site de terceiros, tive que acessar as configurações. Antes de publicar o site, você pode fazer mais algumas configurações, o que é altamente necessário. Eu escolho as configurações aqui. Quando eu escolho as configurações, ele mostra a visibilidade do mecanismo de pesquisa. Se você quiser a visibilidade do mecanismo de pesquisa seu site, você pode habilitar isso. Eu apenas habilito isso, caso contrário, os mecanismos de pesquisa como o Google ou qualquer outro mecanismo de pesquisa não conseguirão encontrar meu site. Portanto, é importante escolher a visibilidade desse mecanismo de pesquisa. Se você quiser adicionar parte da produção ao site, você pode habilitar isso. Se for um site comercial, você não precisa adicioná-lo. Se você precisar do menu de navegação manualmente, não manualmente automaticamente, você pode habilitá-lo. Mas você pode habilitar isso quando tiver várias páginas em vez de seções. Mas aqui eu usei várias seções. Eu adicionei meus botões personalizados . Por padrão, se você habilitar esse menu de navegação, o menu de navegação estará lá, mas você não poderá personalizá-lo. Tente evitar isso e crie manualmente um e Rs no celular. Sim, eu precisava disso. Esse era um valor padrão. Foi ativado e a visualização do link de mídia social , sim, é necessária. Então você pode habilitar isso se quiser. Caso contrário, também estará disponível. Mas se você quiser a análise do link de mídia social, basta habilitá-la. É assim que você faz todos aqueles brilhos divertidos. E se você quiser mencionar sobre o site, 150 caracteres ou 160 caracteres, você pode mencionar aqui que este também é o opcional. E quando eu clico neste lugar, ele mostra claramente por que você precisa Isso mostra que isso geralmente aparece sob o título de URL. Então, se você quiser adicionar, você também pode adicionar essas informações gerais lá. E aqui você pode ver que ele mostra o título e o ícone do dia Então, quando você abre o navegador aqui, ele mostra o título e o ícone do fay aqui Você também pode mencionar o que deveria estar lá aqui. Vou digitar Houston Hotel and Resorts. OK. E também posso alterar o ícone favorito aqui. Já sabemos que criamos o ícone favorito antes disso. Vamos fazer o upload aqui. Eu escolho este lugar que é clicado para alterar o favicon do site Quando eu escolho isso aqui, o favicon padrão é Canvas one e eu vou clicar neste lugar Claramente, isso mostra que o tamanho recomendado do ícone de favor é 280 em 280 pixels, mas criamos apenas para 64 pixels, vou recriar esse Eu vou para minha página inicial. Acabei de clicar na minha tecla de comando. Eu tenho um conteúdo aqui, aqui eu tenho um ícone de cinco. Eu só quero abrir em uma nova guia e esse ícone favorito tem uma dimensão de 64 pixels No entanto, se você tiver a conta Pro, poderá ir diretamente para a opção de redimensionamento Lá você pode redimensionar a dimensão sem se preocupar. Aqui você pode ver que temos dimensões diferentes aqui. Mas agora aqui eu quero criar um novo documento. Eu vou até o arquivo e crio um novo design. Aqui, quero mencionar que a dimensão deve estar apenas em pixels e eu escolho o tamanho personalizado. Eu escolhi o pixel e mencionei o tamanho necessário para 28280 pixels Aqui vou mencionar 28280 pixels. É disso que eu preciso. Acabei de escolher Criar e só quero copiar esse logotipo, ou também posso adicionar do meu design. Acabei de fechar esse ícone de cinco e quero renomeá-lo com o nome do favicon Então eu mencionei 280 em 280 px. Só quero mencionar o nome do arquivo. E aqui eu escolho meu upload e vou escolher minha pasta. Na pasta, eu estava com a imagem. No começo, eu tinha um logotipo. Eu adiciono o logotipo transparente aqui e, depois disso, escolho o plano de fundo, escolho a cor do plano de fundo. Eu escolho o valor da cor da minha marca. Aqui eu escolho a imagem e expando em um canto. Você pode ver como eu me expando em um canto. É assim que eu redimensiono essa dimensão. Agora eu escolho a opção Download, o que significa compartilhar e baixar. Aqui eu quero escolher esse JP porque eu preciso uma cor de fundo e eu apenas escolho a opção Download. Ele será baixado na minha pasta de download. Eu tenho que escolher isso e preciso adicionar dentro deste site, o ícone da feira. Eu apenas copio isso e colo dentro da minha pasta. Depois de copiar e colar na pasta do meu site, basta clicar aqui mais Mark e escolher o ícone Fay e escolher Essa foto será carregada dentro dela e, finalmente, eu escolho a opção concluída É assim que você pode definir seu próprio ícone de fay e o nome na parte superior desta guia e descrever as informações detalhadas depois de mostrar a essa guia tudo o que você pode adicionar ao Canva usando este site 69. 68 Publique o site: Depois de definir todas as informações, incluindo Fawka e outras configurações, escolho essa opção e continuo publicando Eu apenas clico nele e escolho essa opção publicar. Então, estava entendendo o processo. Mostra que o pré-carregador, que está preparando seu design foi publicado Você pode ver que ele mostra o link desse site específico que você criou. Quando você clica nesse botão para visualizar o site, ele carrega automaticamente essas informações na nova página do site. No entanto, ele revisa esse site aqui também para sua referência. Acabei de clicar neste site de visualização. Você pode ver o URL do site aqui. É assim que ele gera o design do site usando o Canva. 70. 69 Teste o site em vários dispositivos: Depois de publicar o site, verifique se ele estava funcionando corretamente ou não. Posso ver que esta é uma saída final completa do site. Não é uma prévia. É saída. Novamente, eu apenas pressiono a carga inserida. Quero ter certeza de que todos esses elementos de layout estão sendo carregados corretamente ou não. Basta o apresentador e você pode ver que os elementos estão sendo carregados com animações, incluindo aquele momento da imagem no fundo Agora eu desço e estava tendo todos esses momentos. Você pode ver que as imagens estão sendo carregadas, incluindo os detalhes do formulário e os recursos de mapas do Google. Então, todos estão realmente funcionando sem demora. Então é assim que enviamos ou carregamos o site. Agora eu apenas separo isso com uma janela separada. Agora você vê, eu só quero reduzir a dimensão da janela. Acabei de reduzir a dimensão da janela. E com base no meu ajuste, você pode ver que esse layout estava se ajustando sozinho. Agora essa é a estrutura, você pode ver que ela organiza os elementos de acordo com meus ajustes e, se eu quiser expandir, eu a expando Se eu reduzir mais, veja como eu me ajustei e quero ajustar mais, eu apenas reduzo a isenção Como eu disse, é um layout responsivo. Eu me ajusto de acordo com nossa necessidade. Você pode ver isso. Eu apenas ajusto a janela. É assim que podemos criar um site responsivo e que funcione perfeitamente sem demora usando o Canva 71. 70 Edição e republicação: Nesta lição, mostrarei como podemos fazer trabalhos de reedição para o site publicado e como fazer trabalhos de republicação Este é o site totalmente publicado. Você pode ver isso. Depois de publicarmos, esse site sempre terá essas informações, caso tenha sido publicado Isso mostra que, se você continuar editando esse design, precisará publicá-lo novamente, atualizar seu site porque essas alterações precisam ser atualizadas. É por isso que estava mostrando as informações dessa forma. Então você não pode editar diretamente aqui, você pode ver isso. E se você quiser editar, você tem que escolher este botão, Editar design. Acabei de clicar aqui, Editar design. Agora você pode ver que esses elementos podemos editar. E se você acha que aqui eu ainda não adicionei nenhum hiperlink e imagino que nenhum hiperlink e imagino que estava adicionando algum link fictício E eu só quero adicionar o link com o design em si ou apenas adicionar o link com esse índice ou aquela seção um, que é a barra de navegação. Acabei de adicioná-lo e você pode ver que esse sublinhado foi adicionado Acabei de remover isso usando essa opção de sublinhado. Então, depois disso e se você fez alguma outra alteração ou atualização, por exemplo, aqui foi adicionado apenas o texto fictício E se você adicionou algum texto real e você vai adicionar mais seções ou páginas, finalmente, você vai atualizá-lo novamente para atualizar as alterações existentes, você precisa visitar novamente o site publicado. E desta vez também, você terá a chance de revisar tudo. Mas aqui na parte inferior temos a opção chamada republicado Então, agora, ele mostra a visualização ao vivo, o que você tem, então eu escolho esta republicação novamente, e as atualizações ou alterações que você fez com o site serão atualizadas, e você pode escolher essa opção, que é visualização do site Vamos verificar se ele foi atualizado ou não. Então eu chego a isso. Aqui você pode ver que temos o link aqui. E é assim que garantimos se ele foi atualizado ou não. Então, todos esses links estão funcionando sem nenhum problema, você pode ver isso. Eu só quero clicar no ícone inicial novamente porque quero ir para a página inicial e ela carrega perfeitamente. Então é assim que funciona com todas as páginas. Nós temos esse tipo de rodapé. Se você quiser adicionar qualquer hiperlink com texto do rodapé ou o logotipo, você pode adicioná-lo dentro do Canva É assim que criamos o site completo sem codificação e o Canva e você não precisa de nenhum conhecimento adequado do site para estudar este curso, e é assim que temos o resultado final em tempo real