Squarespace: como fazer seu próprio site criativo, sem código

1. Apresentação: Então você quer criar um site, mas por onde você começa? Qual programa você vai usar? Bem, se você é iniciante ou tem muita experiência e quer ser super criativo. Vou mostrar o melhor programa para tudo isso, e esse é o Squarespace. Quando você olha para o Squarespace, você pode sentir que está um pouco modelado demais. Bem, vou mostrar a vocês como pegar este modelo de avião e transformá-lo neste site super legal e emocionante. Olá, sou John Wolfgang Miller. Sou designer profissional há 20 anos. Eu trabalhei para alguns clientes muito grandes, como Fox TV aqui na Austrália. Nesta aula, vou começar mostrando a você como fazer um pouco de pesquisa do setor. E então vamos dar uma olhada em todos os elementos globais. Essas são as partes que aparecem em todo o site e aquelas que permitem mostrar sua própria marca pessoal. Vou mostrar-lhe como construir uma página inicial muito impressionante, também uma página sobre, uma página de contato e, claro, a página do blog. Também mostrarei como trazer algum plano de fundo essa animação. Isso é algo que pode realmente fazer todo o seu site se destacar. Se você quiser criar seu portfólio de sites e sua experiência de design, estou aqui para ajudá-lo com tudo isso. Então, se você estiver pronto, vamos começar. 2. PROJETO DO CURSO : Seu projeto aqui é seguir minha direção e criar seu próprio site incrível. Nas primeiras aulas, falaremos sobre a configuração do espaço quadrado. Em seguida, daremos uma olhada na página inicial e criaremos uma página que mostre quem você é. Em seguida, daremos uma olhada nas animações de fundo e mostraremos como dar ao seu site um lado mais criativo Ok. Depois disso, haverá aulas em sua página, sua página de contato e, em seguida, daremos uma olhada na seção do blog. Eu recomendo assistir todas as aulas e depois repeti-las novamente, uma por uma , e começar a fazer exatamente o que mostrei depois de cada uma. Você pode usar todas as suas próprias imagens aqui ou usar exatamente as mesmas imagens que eu usei. Se você quiser fazer isso, todas as minhas imagens são mantidas aqui na seção de recursos. Nesta aula e em todas as minhas aulas, abordarei muitas coisas diferentes e mostrarei muitas habilidades diferentes. Portanto, recomendo que, à medida que você avança , reproduza e pause os vídeos E se precisar que eu repita alguma coisa, basta pressionar esse botão de retrocesso de 15 segundos várias vezes, para que você possa assistir novamente a parte inteira Se você está tendo algum problema com a qualidade do vídeo aqui no Skillshare, basta vir aqui e clicar neste ícone de níveis de qualidade Se estiver configurado como Automático, bem, dependendo da velocidade da Internet em casa , pode não estar aparecendo com a melhor qualidade possível. Então, basta alterá-lo para sete, 20 ou dez 80 pixels, e você verá instantaneamente uma grande mudança na qualidade. No final desta aula, você terá um site incrível. Portanto, certifique-se de adicioná-lo à seção do projeto e eu lhe darei meu feedback completo. 3. Configuração do Squarespace: Ok, então aqui estamos em square space that squarespace.com, e há um link na seção a. A melhor coisa sobre o espaço quadrado é que eles sempre oferecem um teste gratuito do site. Assim, você pode brincar com o programa e ver se é o que deseja comprar. Não é necessário cartão de crédito. Você não precisa inserir nenhum detalhe do cartão de crédito. Então, quando você der uma olhada, basta clicar aqui em Getarted E isso o levará à página de modelos. O espaço quadrado tem muitos modelos diferentes. Sinta-se à vontade para dar uma olhada em todos eles, se quiser. Basta selecionar todos os modelos e rolar para baixo e você verá cada um deles. Eles também têm uma prévia de tudo aqui, então clique na prévia. E mostrará como funcionam todos os sites, e você pode até mesmo ver o site de demonstração. Agora, o site que eu vou fazer. Bem, vai ser um blog. Vai ser um blog sobre minha coisa favorita no mundo. E isso são videogames. O que eu adoro são videogames retrô. Adoro todos os jogos antigos da Nintendo e da Sega e todas as máquinas de arcade antigas dos anos 80 e 90. Então, eu quero ter um blog que fale tudo sobre isso e fale sobre todos esses jogos incríveis. Então, eu poderia dar uma olhada em todos eles agora, ou aqui, eu posso escolher que vai ser um blog. E isso reduzirá as pesquisas. Ou, é sobre entretenimento. Então, vamos ver o que temos aqui. As opções que escolhemos aqui não forneceram muitas correspondências de modelo. Então, vamos escolher outra coisa. Vou escolher a loja online. Não estou criando uma loja online, mas você pode pegar qualquer modelo e simplesmente brincar com ele para fazer o que quiser, na verdade. Então, vamos ver o que mais podemos encontrar aqui, ver se há algo que eu goste. menos como as cores mais brilhantes, mas é um pouco simples, o branco E eu meio que gosto desse aqui, para ser honesto. Eu sei que não é claro nem nada, mas eu meio que gosto da maneira como temos a imagem grande à direita e depois o texto grande à esquerda. Vamos pré-visualizar este. Ok. Sim. Quero dizer, ainda é meio monótono em termos de cores Mas em termos de layout, gosto do uso de fontes grandes, imagens grandes e outras coisas. Então, acho que vamos começar com isso, e acho que vamos desenvolvê-lo para que tenha a aparência que queremos. Então, vamos até aqui, começar com esse design. E agora, você precisa criar uma conta e pode fazer isso gratuitamente. Você não precisa inserir detalhes do cartão de crédito ou algo parecido. Então, vou continuar com uma das minhas contas do Google. E agora que eu inseri isso, como você pode ver, está configurando as coisas. Ok. E aqui está. Bem-vindo ao seu site. Isso acabou de criar o site para nós usando tudo, desde o modelo. Agora vamos entrar e brincar com isso. Então, primeiro de tudo, o título do site. Vou chamá-lo de Game Over. Em seguida, edite as páginas. Isso apenas explica um pouco como funciona. Como criar páginas. Vou falar sobre tudo isso agora. Então, comece. Novamente, você receberá algumas ajudinhas extras aqui. Apenas feche esse por enquanto. E depois, aqui à direita. Este é o seu site, basicamente. Isso é tudo o que já foi criado para você. Se você clicar na pequena seta aqui, ela será exibida em tela cheia. E você pode percorrer e ver como tudo está funcionando. Obviamente, trata-se de sabonetes, o que não é nada parecido com o que queremos falar Mas vamos mudar isso para que seja tudo sobre videogames, e será muito mais brilhante e muito mais alto Mas, como você pode ver, já está colocado o nome do meu site no topo. Então, vamos fechar este. Então, aqui à esquerda, você tem o menu, e é aqui que você pode gerenciar tudo em seu site. Eu não vou explicar tudo aqui para você agora, porque há muita coisa aqui. Vou te mostrar rapidamente aqui as páginas. Essas são todas as páginas que temos em nosso site e são apenas demonstrações que foram criadas para nós. Portanto, temos um para o diário da loja e para entrar em contato. E então esta é a página inicial. E então temos alguns extras aqui, remessas, devoluções e armazenistas Isso porque é uma loja online, mas não precisaremos dessas coisas. Então, vou apenas excluí-los. E eu não preciso comprar, va, então vou deletar isso. Como você pode ver aqui, essa é a navegação principal que fica no cabeçalho do site. E aqui embaixo, esses são os que não estão vinculados. Portanto, não na navegação principal. Mas se você quiser colocá-los , basta arrastá-los para cima. E como você pode ver, agora a casa está lá, mas eu realmente não quero que ela esteja lá de qualquer maneira, então vou colocar isso de volta no Linked. E isso é realmente o que eu quero do meu site. Eu quero um diário. Quero uma página A e quero uma página de contato. Mas eu não quero usar a palavra diário, então vou mudar isso agora para blog. Então, passo o mouse até aqui e clico no ícone de configurações. Altere o título da página para blog. Título de navegação para o blog. Isso é o que aparece na barra de navegação. E o slug de URL para o blog ou algo assim. E certifique-se de que a página esteja ativada. Esse já está, então clique em Salvar. Como você pode ver, a demonstração desapareceu de lá porque agora está ativada. Vamos apenas habilitar os outros dois. E quando eu entro nesta página, isso é feito automaticamente, então basta fechá-la e você verá que a demonstração desapareceu. O mesmo aqui e o mesmo aqui na página inicial. Então, todas as páginas agora estão ativas e todas chamadas, como eu quero que elas sejam chamadas. Então, vamos voltar. 4. Elementos globais: OK. Então, agora vamos começar a editar o site e, para fazer isso, venha até o botão de edição. OK. A primeira coisa com a qual quero começar aqui é o back-end do site. Isso será algo que aparecerá em todos os lugares. Então, estamos falando das cores que vou usar e das fontes que vou usar. Uma coisa muito importante nos sites é a consistência. Então, você quer continuar usando as mesmas cores e as mesmas fontes em todo o site. E o espaço quadrado é ótimo porque ajuda você a configurar tudo isso de uma só vez. Então, para editar as cores das fontes e outras partes do site, venha aqui para este ícone de estilos de site. Como você verá aqui, essas são todas as coisas que você pode editar, fontes, cores, animação, espaçamento, etc. Vamos começar com as cores. Portanto, essa é a paleta de cores que já foi atribuída para este site E as cores escolhidas aqui, são adequadas ao que está sendo vendido aqui, barras de sabão. No entanto, este site que vamos criar é sobre videogames retrô Precisamos de uma paleta de cores diferente. Precisamos de algo que represente cores brilhantes dos anos 80 e 90 Então venha aqui para editar a paleta. E você verá que já existem muitas predefinições por espaço quadrado Se você rolar para baixo no site, verá como as diferentes cores entram. Portanto, temos um amarelo primário e depois um vermelho secundário. E você sabe, isso parece muito bom, na verdade, mas eu quero algo um pouco diferente. Então, o que eu vou fazer é entrar e editar isso. Essas duas extremidades da paleta são perfeitas, uma branca reta e uma preta reta Esses são os três que eu quero mudar. Eu quero amarelar, mas quero um amarelo mais brilhante. Então, vou clicar no amarelo. Então você pode brincar aqui com cores diferentes. Então, se eu quiser escolher um verde, vou movê-lo para lá. Mas o que eu quero é um amarelo quero um bem brilhante. Então, meio que a meio caminho entre o laranja e o verde. Já está bem claro, mas você pode brincar com os níveis da cor aqui, para ficar mais escuro ou mais claro Eu quero ser super brilhante, então vamos direto para esse canto. Lá vamos nós. Aquele no final. Isso é perfeito. Adoro esse amarelo. Isso é bonito e brilhante. A segunda cor que eles estão usando é meio vermelho alaranjado, mas eu quero um rosa de verdade Eu quero uma cor magenta forte. Vamos arrastar esse aqui para aquele tipo de seção rosa brilhante, um pouco mais brilhante, eu acho Vamos rolar para baixo para ver onde isso está sendo usado. Ah, lá vamos nós. Adoro isso. Adoro o equilíbrio entre o amarelo e o rosa. Isso é muito bom. Muito brilhante. E depois só mais uma cor que eu quero mudar. Isso é como um vermelho escuro, meio marrom Eu quero que isso seja uma espécie de azul, mas um azul muito brilhante. Na verdade, isso ainda não está sendo usado na página, mas acho que parece bem claro. Talvez. Sim, lá vamos nós. É ainda um pouco mais brilhante. Veremos onde isso é usado mais tarde. Se quisermos entrar e mudar isso, podemos mudar isso a qualquer momento. Essa é a beleza disso. Então, agora estamos prontos com cores. Vamos voltar e ver as fontes. Ao entrar aqui, você verá os estilos de texto globais. Como você pode ver aqui, eles aparecem em todo o site. Então, quando mudamos os cabeçalhos, isso mudará todos os títulos do site Então, esses realmente grandes aqui e os um pouco menores aqui. Se eu clicar nele. Você verá quantas opções diferentes você tem aqui. Portanto, você tem quatro tamanhos de cabeçalho diferentes. Sendo este o maior, seria o principal. E isso seria um título dois. E a fonte escolhida aqui, uma boa fonte Serif, é apropriada para o site da novela Bem, eu quero algo um pouco mais alto, um pouco mais brilhante. Sou designer gráfico profissional e tenho a ideia de escolher fontes e saber quais usar. Bem, eu tenho toda a experiência de fazer isso na minha carreira. Se seu conhecimento sobre as opções de fontes não for tão forte quanto esse, recomendo fortemente que você acesse esta página. Esta é uma página administrada pelo Google Fonts que mostrará a melhor maneira de escolher o tipo. O link está abaixo na seção A. E nesta página, role para baixo até ver esta, uma lista de verificação para escolher o tipo Este é um ótimo site que mostra as melhores maneiras de escolher fontes diferentes com base na sua marca, produto que você está tentando promover Então venha aqui e dê uma boa leitura. Se você tiver alguma dúvida sobre tipografia e opções de fonte, basta me enviar uma mensagem aqui e eu entrarei em contato com você o mais rápido possível Agora, para este projeto, eu só quero usar fontes Sansa e tenho duas opções que gostaria de usar em todo o site O primeiro é esse chamado estilo Euros. E a segunda é essa chamada interface. Dentro do espaço quadrado, você pode simplesmente percorrer todas as fontes e experimentá-las uma por uma. Veja o que funciona para você. O que vou mostrar aqui é se você já tem uma escolha. Você pode ver se isso está disponível dentro do espaço quadrado. E o primeiro, queremos mudar onde já estamos na seção de cabeçalhos. Então, vamos mudar a família de fontes escolhida aqui, e eu realmente quero o Eurostyle. Então, vou clicar nisso. E isso me mostrará quais fontes estão sendo usadas atualmente. Mas eu não quero nenhuma dessas, então vou procurar todas as fontes. Eu posso pesquisar fontes. Agora, nem todas as fontes estão sempre disponíveis para você usar. Você pode encontrar o site de outra pessoa que não esteja disponível em um espaço quadrado e isso pode se resumir a motivos de licenciamento Mas se você encontrar outra fonte usada em um modelo de espaço quadrado diferente, ela definitivamente estará aqui. Vamos escrever em euros. Vamos rolar para baixo, temos o estilo Euro estendido. Esse é o que eu quero. Vou apenas dizer que isso já está muito melhor. Você pode ver que algumas coisas acabaram de mudar aqui. O nome do site e também essa manchete gigante aqui, novela para todos Vamos apenas voltar. Mais uma coisa. Eu quero que seja um pouco mais forte do que isso. Então, se você clicar nesse peso, obviamente, quanto maior o número, maior o peso. Eu posso ir 500, ou eu posso ir 900. 900. Vamos dar uma olhada. Isso é um pouco dois quatro. Vamos lá 500. Em algum lugar no meio dos dois. Sim, isso é bom. Então estilo, normal. Isso seria se houvesse, tipo, opções diferentes itálico ou negrito, mas só precisássemos da normal E então voltaremos a eles uma segunda vez, mas transformação de texto. O que eu realmente quero é que todas estejam em maiúsculas. Lá vamos nós. Isso parece muito legal. É um pouco mais alto, um pouco mais estável . Sabonete para todos. No entanto, como você pode ver, a fonte talvez seja um pouco grande demais. Vamos reduzir o tamanho dela. Este é o título um. Vamos escolher este aqui e reduzi-lo um pouco. Talvez digamos 6,5. Sim, acho que parece bom. Depois, outra coisa. Acho que há muito espaço entre cada palavra aqui. Essa é a altura da linha. Vamos brincar com isso. Isso mudará a altura da linha todas as versões, não apenas no título um, mas no título dois, título três, no título quatro. Talvez desça para um ou talvez até Sim, não 0,9. Acho que gosto disso. Espaçamento entre letras que realmente parece bom. Estou muito feliz com isso, você meio que quer uma quantidade razoável de espaço nele. Então, quando as pessoas acessam o site no desktop, na mesa, no celular, ele sempre estará legível Mas vamos brincar com isso. OK. Vou deixar em 0,04 E se quisermos mudar isso a qualquer momento, se acharmos que está funcionando aqui, mas não funciona em outro lugar do site, basta voltar e alterá-lo. E, novamente, se você mudar isso uma vez, isso mudará em todo o site. Ok, então vamos voltar. Agora, o que eu quero editar são os parágrafos. Então essa é a cópia principal do corpo que você pode ver. Então, vamos ver onde isso é usado. Esse tipo de fonte aqui. Vamos clicar nos parágrafos. Na verdade, é uma fonte muito boa, como já existe. Mas é aqui que eu quero usar minha outra interface de fonte escolhida. Fontes do navegador. E essa se chamava interface, não era? Lá vamos nós. Então eu escolhi isso. Gosto muito do San Serra, acho que é um pouco mais apropriado para um site sobre videogames. Mas vocês podem escolher o que quiserem para isso, e eu gostaria de ver o que vocês escolhem. Então, vamos voltar um passo atrás. Novamente, temos tamanhos diferentes para fontes de parágrafos aqui. Parágrafos um, dois e três. Todos eles têm três tamanhos diferentes, então você obtém os maiores e os menores. Na verdade, acho que é um bom equilíbrio agora em termos de peso. Acho que é um pouco claro porque estamos usando em um fundo muito claro. Então, vamos tornar isso um pouco mais pesado, talvez 400 novamente. Sim, isso é muito melhor. Estou feliz com tudo o que está aqui. Não preciso colocar em maiúsculas. Isso funciona para as manchetes , mas não para o texto menor Então, vamos manter como está, sem nenhum. Vamos voltar. Em seguida, botões. Vamos dar uma olhada onde temos botões. Aqui está um botão aqui. Temos um grande aqui no topo. Então, vamos entrar nos botões. E a família para isso? Bem, eu acho que tem que haver Eurostyle novamente. Isso é ótimo porque agora está me dizendo quais fontes estão sendo usadas em todo o site. Então, vou ter que encontrá-lo novamente. Vamos mudar isso para Eurostyle extended. Sim, eu adoro isso. Isso parece muito legal. Vamos voltar. Temos três tipos diferentes de botões aqui, e eles são todos de tamanhos diferentes, como você pode ver. Eles têm todos o mesmo peso, e acho que 500, acho que isso é realmente muito bom para o que temos aqui. Mas, novamente, podemos voltar e mudar isso mais tarde, se você quiser. E certifique-se de definir todos os três com a mesma fonte. Então, o último é diverso. Vamos ver o que temos aqui. Então, isso é como uma fonte de destaque extra que não seria usada em todo o site, mas talvez você queira usá-la como um tipo de elemento destacado para fazer algo realmente se destacar e parecer muito legal Então, é aqui que você pode ser um pouco mais criativo. Então, vamos vir aqui para a família. E procure todas as fontes novamente. Agora, eu quero algo que realmente pareça de oito bits, como se tivesse vindo dos anos 80 ou algo parecido Se estamos fazendo máquinas de fliperama, vamos ver o que temos que segue as regras do fliperama Tudo isso parece muito legal e meio peculiar. menos como este, em que é meio branco e meio preto. Então, vamos escolher esse. Agora, isso ainda não está sendo usado em nenhum lugar. Mas eu vou te mostrar no cabeçalho aqui em cima o quão legal isso pode parecer. Então, vamos voltar. Por enquanto, o peso e o tamanho são absolutamente aceitáveis . Animações. Você verá uma boa lista de animações aqui. E isso é a forma como diferentes partes do seu site são carregadas quando um usuário acessa seu site são carregadas o site pela primeira vez . Então, no momento em que a configuramos para desaparecer, vamos ver como é a escala Ok, isso é muito legal. Você pode ver o cabeçalho na parte superior, o logotipo lá. Esse tipo de escala aumenta. Slide. Se meio que cair, corte. Isso é legal e flexível. Mas, sabe, acho que gosto de clipes. Vamos ficar com esse por enquanto e depois acelerar. Lento, médio, rápido. Acho que vou continuar com o slow. Sim, eu gosto disso. Novamente, apenas brinque com o que você acha que funciona aqui. Se você gosta do flex, é um pouco louco, mas sim, isso é muito legal Escolha o flex. Eu só vou com um clipe. Em seguida, espaçamento. Então, isso tem a ver com toda a largura da página inteira. E essa é a largura total que um site pode ter. E depois a margem do site. Essa é a lacuna na lateral do site aqui. E no momento está em dois, se eu baixar para zero, você verá que tudo vai direto para a borda. E parece meio legal. Mas pequenas coisas como essa estão muito próximas do limite. Todos eles precisam ter um pouco de espaço para respirar. Então, você sabe o que? Acho que vou ficar com esses dois. Vamos ver como são os três. Tudo bem, talvez três Acho que isso dá um pouco mais de espaço para respirar aqui. E depois botões. Nós já demos uma olhada nisso. E como você pode ver aqui, essa é apenas uma maneira diferente de ler as três diferentes, mas já está escolhendo nossa fonte, e a forma que queremos é pílula Você pode escolher algo diferente. Você pode ter um quadrado. Você verá que muda para quadrado ou esse tipo de escolha muito redonda. Este com bordas curvas. Eu meio que gosto do p. Mas brinque um pouco aqui e veja o que funciona melhor para você. Esboço. Bem, isso seria apenas uma borda maior do lado de fora. Na verdade, sim. Acho legal ter isso um pouco mais forte, talvez quatro. OK. Voltar aos estilos do site. Blocos de imagem. Olha, isso é algo com que você realmente não precisa se preocupar aqui. Sinta-se à vontade para brincar com isso, mas essas são apenas maneiras diferentes de inserir imagens em seu site Você pode colocar um pôster, da mesma forma que você tem texto em cima de uma imagem Mas não vamos analisá-los agora. No entanto, sinta-se à vontade para dar uma olhada ao seu redor. OK. 5. Seu cabeçalho de site: Em seguida, vou brincar com esta seção de cabeçalho. E a primeira coisa que eu quero mudar lá é a fonte. Então, vamos clicar de volta em fontes. Essa é outra forma de acessar elementos diferentes. Você não precisa passar pelo menu aqui. Você clica na parte que deseja editar. Você pode editar isso. Então, vamos começar com este. O logotipo, o cabeçalho principal do site. Como você pode ver aqui, isso é chamado de título do site. Isso está pegando a fonte do cabeçalho. Se você vir aqui, poderá alterá-lo para uma fonte personalizada. Quando você altera isso, literalmente, está mudando esse aqui em cima, não para a fonte geral do cabeçalho. Então, vamos para a família. E você sabe, é aqui que eu quero usar o Puffin arcade. Vamos ver o que isso parece. Ah, sim, eu adoro isso. Isso parece muito legal. Como um logotipo era um cabeçalho principal para todo o site. É um pouco menor. Vamos voltar e vamos brincar com o tamanho. Eu quero isso muito grande. Então, só uma coisinha. As letras estão um pouco próximas umas das outras, então vamos arrastar isso um pouco. Sim, isso parece bom. Certo, isso é muito legal. Isso está realmente chegando. Agora vamos clicar neste aqui. Este é o nosso bar de navegação. Como você pode ver, na verdade ainda está usando a fonte antiga que estava lá. Vamos entrar aqui, editar isso. Acho que o estilo euro estendido vai parecer legal aqui. Sim, isso parece muito legal. Mas você sabe, eu quero isso muito ousado. Qual foi o maior que tínhamos aqui? 900. Sim, adoro isso. Bom e brilhante e grite T. Em seguida, título do site móvel. Bem, lembre-se se você quiser ver como algo parece no desktop e no celular, eles serão um pouco diferentes porque um é retratado, um é paisagem. Normalmente editando seu site na versão para desktop. Mas se você quiser ver como é na versão móvel, clique neste e ele mudará para isso. Então agora podemos ver como todas as cores estão funcionando, todas as fontes estão funcionando, os botões e outras coisas. Este aqui em cima, embora ainda esteja na versão antiga, não é? Então, se eu clicar no título do site móvel, ele ainda está como um cabeçalho. Então, vamos entrar aqui. E vamos fantasiar novamente e fazer o que acabamos de fazer para a versão desktop. Então, vamos mudá-lo para Puffin arcade. Volte. E então o que eu disse? Eu defini este para 0, não digitei 0 lá? Isso é perfeito. Altura da linha. Bem, vamos apenas dizer porque há sentado um em cima do outro agora, porque obviamente o celular é muito menor. Vamos fazer isso se encaixar. Lá vamos nós. Em seguida, o tamanho dele. Vamos apenas dizer que eu quero isso bem antigo. Talvez 3,5. E isso é ótimo. Certo, vamos voltar. Agora que fizemos aqui, vamos clicar em Fechar e depois vamos dar outra olhada no cabeçalho. Então, sairei da versão móvel. Vamos dar uma olhada na visualização da área de trabalho. Em seguida, vamos clicar nesta seção. Como você pode ver aqui, isso nos permitirá editar o cabeçalho do site. Eu posso ver no topo aqui você tem três opções diferentes. O primeiro é global, então isso acontece em todos os dispositivos. Enquanto que se você clicar neste, isso é o que acontecerá na versão para desktop, e isso é o que acontecerá na versão móvel. Vamos com o global fixo. Então, antes de tudo, título e logotipo do site. Bem, já temos um logotipo que criamos usando fontes. Essa é uma maneira muito fácil de fazer isso. Mas se você já tem seu próprio logotipo visual que você criou como uma imagem aqui. Elementos. Então, isso é tudo o que podemos ver no topo aqui. Primeiro de tudo, botão, eu quero um botão aqui porque eu queria ir até a página de contato em vez de dizer para começar, vou dizer entre em contato em termos de onde eu quero isso para ir. Bem, isso poderia ir para qualquer outro site, mas eu quero que ele vá para uma das páginas dentro do nosso site. Então, vamos clicar na engrenagem. Em seguida, você pode fazer com que ele vá para um endereço de e-mail, um endereço da Web para outro arquivo. Queremos que ele vá para outra página em nosso site. Então clique na página. Quero que isso vá para a página de contato. Literalmente, quando clico neste pequeno menu suspenso de todas as páginas que tenho duas, vamos escolher o contato. Abrindo uma nova janela. Faça isso se for um site diferente, mas se estiver dentro do seu próprio site, deixe esse fora. Clique em Salvar. Em seguida, links sociais. Sim, quero que seus usuários cliquem neste botão. Isso os levará até a nossa página do Instagram. Se entrarmos aqui, edite links sociais. Você pode adicionar outros extras aqui. Você pode adicionar no Facebook ou Twitter ou o que quiser. Eu só quero o Instagram no momento em que ele passa para o Squarespace. Vamos enviá-lo para a página do GameOver. Salve isso. Então vamos um concorrente um pouco pequeno se então disser fazer isso um pouco maior, não é? Sim, eles lutam. Isso parece bom. Interruptor de idioma. Não se preocupe com essa parte. Isso é o que você pode ver aqui, e é isso que você tem se você tem um site de vendas, mas não tínhamos um desses, então vamos desligar esse. Lá vamos nós. Isso parece perfeito. Agora. Vamos voltar. Agora estilo, este é Morgan, divirta-se um pouco. Então, o que temos aqui são escolhas de estilo diferentes. Temos tema gradiente sólido, dinâmico, tema gradiente sólido, dinâmico. Bem, eu tenho todos esses, todos eles funcionam. Mas o que eu vi quando cliquei no tema foi tudo isso aqui. Essas são todas as cores que já escolhemos para todo o site. Um jogo com diferentes níveis deles para escolher aquele que eu acho que vai parecer legal. Eu tenho todos esses. Bem, eu gostei da forma como temos cores brilhantes começando na primeira parte da seção de heróis. Então, na verdade, quero um dos leves. E este, é preto, é um pouco plano. Então, vamos com o rosa. Sim, eu realmente gosto disso. Eu gosto do logotipo do nosso site principal estar no rosa brilhante e , em seguida, entrar no botão de toque. Então isso é muito legal. Então, vou ficar com isso. Em seguida, o próximo aqui, posição fixa. Isso significa apenas que o cabeçalho permanece em uma determinada posição à medida que as pessoas percorrem sua página inicial e outras páginas do site? Bem, não ficar porque ajuda as pessoas a navegar por todo o site. Você tem duas opções diferentes aqui. Um é o básico onde ele permanecerá lá constantemente. Quer rolar para trás. Então, quando você rola para baixo, ele desaparece. Quando você rola de volta para cima, ele volta. É Anita, uma maneira legal de permitir navegação extra para os usuários. Então, vamos escolher rolar para lá, certo? Ok, então tudo isso é configurar as configurações globais. Vamos ver o que temos para layout do cabeçalho da versão para desktop. Então eu tenho essa opção aqui e ela moverá cada um desses elementos. Você teria um pouco de brincar com ele e ver qual funciona melhor para você. toda a justiça, acho que gostei do jeito que era originalmente com o ícone aqui, aquele botão lá. E então essas duas partes se centralizaram. Eu acho que isso é apenas um bom equilíbrio de tudo e tem muito espaço para respirar branco em ambos os lados. Vou ficar com isso. Então não se preocupe com a largura. Vamos manter isso como cheio. Acolchoamento vertical. Bem, esta é a quantidade de espaço que está ocupando na parte superior e inferior, é um pouco grande. Vamos fazer isso um pouco menor. Talvez espaçamento de dois elementos, bem, isso é meio que o espaçamento entre essas duas coisas aqui. Vamos deixar isso o mais baixo possível. Sim, isso é muito bom. Na verdade, acho que só precisa de um pouco mais de espaço no topo. Vamos para 2.2. Espaçamento vinculado. Bem, esse é o espaço entre o blog sobre contato, todas as partes da nossa barra de navegação. O. Obter isso até três, eu acho. Sim, isso é legal. E, em seguida, versão móvel móvel. Então, como isso está parecendo? Como isso está funcionando para você? Temos algumas opções diferentes aqui. Primeiro de tudo, o layout do cabeçalho. Então, novamente, podemos ter logotipo à esquerda, menu de hambúrguer à direita ou escolher opções diferentes para isso. Eu gosto deste porque o logotipo está centralizado e, em seguida, o menu de hambúrguer está à esquerda. No entanto, acho que o texto é um pouco grande demais lá. Eu queria rodar em uma única linha da mesma forma que na área de trabalho. Então, vou mantê-lo como está. E depois voltaremos e editaremos a fonte novamente. Diferentes opções para seu menu de hambúrguer. Tipo como o mais um, para ser honesto. Acho que isso representa máquinas de arcade da velha escola. Podemos alterar a espessura desta linha. Pequeno, médio, grande, acho que cheira bem, agradável e sutil. Então a próxima opção aqui é o menu de sobreposição, e é assim que isso se parece. É quando alguém clica no Plus, isso aparecerá. Se eu voltar, isso nos leva de volta para o outro. A sobreposição é assim. Isso é muito legal a forma como ele muda para o amarelo com o preto em cima dele. Gosto disso. Você tem a barra de navegação principal aqui, botão de ícone do Instagram, mas eu gostaria que fosse centralizado, para ser honesto. Sim, lá estamos nós. Isso é muito mais limpo. Cores. Mais uma vez, brinque com tudo o que temos aqui. Veja qual deles funciona melhor para você se você quiser que o rosa brilhante vá com isso. Mas eu gostei do amarelo. Vamos mantê-lo com isso. Então, agora terminamos com isso. Vamos apenas clicar em Salvar. E, em seguida, edite novamente. Vamos mudá-lo de volta para celular. E, em seguida, clique novamente nos estilos do site. Existem duas fontes. Clique no título do site móvel e vamos deixar isso um pouco menor. Então ele fica em uma única linha. Eu acho 2.5, e isso é bom. Está lá, é brilhante, mas ainda é pequeno e sutil. Então isso está tudo feito. Vamos salvar isso. Vamos ver como tudo isso funciona. Sim, eu adoro isso. Eu adoro isso. Eu pairo sobre esse botão e ele fica rosa. E na área de trabalho. Também é muito legal. Então, agora podemos avançar para projetar toda a página inicial. 6. Web Design: página inicial A: Então, agora vamos começar a editar todas as nossas páginas. A seção de páginas aqui, temos quatro páginas. melhor para começar é a página inicial que já estava ligada. Então, o que eu quero nesta página inicial é algo que é bem direto e bastante simples e diz às pessoas quem somos, que estamos falando, o que podemos oferecer a elas. O que eu quero é uma seção para o blog, uma seção para a seção sobre para o contato. Talvez algumas pequenas imagens extras lá apenas para mostrar o quão legal e peculiar são. Então, vamos começar aqui com esta seção. E isso é chamado de herói é sempre a primeira parte que todo usuário vê quando eles chegam ao seu site pela primeira vez, seja no desktop ou no celular. Então, vamos editar esta página. E você pode ver quais elementos já foram adicionados pelo Squarespace. No modelo, temos uma seção inteira, tudo até essa linha azul. Isso está completamente em uma seção. Isso significa que podemos mudar o plano de fundo dessa seção e ela mudará tudo para a linha azul. Então, vamos começar com isso. Passe o mouse por aqui. Isso me permite editar a seção. Podemos brincar com tamanhos diferentes aqui, a altura da seção é mínima, é dez, mas podemos torná-la maior quando você é pequeno, médio, grande. Essa é a quantidade de espaço entre o que você pode ver aqui no topo. Este é o herói. Eu quero que isso fique bem baixo. Então, um, vamos ficar às dez. Fato, como você pode ver, há um pequeno espaçador extra aqui em cima. Quero tirar isso. Então, se você quiser retirá-lo, mouse sobre a imagem e verá que o vermelho foi removido. Ok, eu prefiro isso agora, agora temos o mesmo tipo de espaço à direita e acima da imagem. No entanto, acho que quero mudar a cor de fundo. Então, clicamos aqui e vamos para o segundo plano. Agora, você pode fazer algumas coisas diferentes aqui. Você pode colocar uma imagem de fundo, você pode colocar um vídeo de fundo ou arte de fundo. Vou mostrar-lhe esses em breve. Mas o que realmente queremos fazer é mudá-lo para uma cor. Então, vamos clicar em Cores. E é aqui que podemos brincar com as diferentes cores já em nossa paleta de cores. E sabe o que eu quero para este? Quero o rosa brilhante. Acho que é um bom equilíbrio do logotipo e do botão para esta primeira seção, vamos com o rosa. Quando terminar isso, basta clicar em outro lugar longe desta pequena janela. O que eu quero fazer aqui é mudar essa pequena seção ou esta é uma seção de imagem que já configurou textos no subtítulo e no botão esquerdo abaixo. Se você quiser mudar o estilo disso. Clique nesta seção onde ela diz imagem e clique no lápis. O que você pode fazer aqui é brincar com o design. Então, no momento, temos uma opção de cartão. Você pode ir cartaz, como eu disse, é quando o texto está no topo da imagem. Sobreposição. E uma coluna que se chama pouco bagunçada. Coisas como pilha, onde está em cima dos textos que estão um pouco altos demais. Eu meio que gosto do que tínhamos antes para ser honesto, que tem cartão. Posso brincar. Eu poderia colocar a imagem à esquerda ou a imagem à direita. Acho que sou como à direita. Então, vamos ficar com o que temos lá. Eu quero que você brinque com isso e faça algo um pouco diferente do que eu fiz aqui. Dê seu próprio estilo, por favor. Então, voltamos ao conteúdo. O que temos aqui são os outros elementos que estão aparecendo aqui. A principal coisa que temos é um botão. E vamos dizer que isso vai criar um link para outra página. Eu quero que ele vá para a página sobre. Então, vamos chamá-lo sobre nós. No momento, diz que isso vai fazer compras. Essa página não existe mais. Então, vamos clicar na engrenagem. Vamos para a página novamente, excluir essa e, em seguida, escolher sobre Salvar. Em seguida, o título aqui em cima. Bem, sabonete para todos que trabalham para o site de sabão. Então vou mudar isso para jogos retrô. E então o período que estou cobrindo é de 85 a 95. Sim, isso foi ótimo. Isso funciona muito bem com o texto branco em cima do fundo rosa. A única coisa é, acho que para este, é um pouco leve. Vamos apenas torná-lo ousado. E vai destacar todos os textos lá e pressionar a bola foi sim, vá. Sim, isso foi perfeito. Adoro isso. Legenda. Bem, eu quero dizer algo aqui também que segue a partir do título. Quero dizer o que fazemos neste site. Então blogs semanais sobre todos os melhores videogames de 1985 a 1995. Lá vamos nós. Então, mais uma coisa que precisa mudar, obviamente a imagem porque se trata de sabão. Então, o que Na seção de conteúdo, clique em Substituir e escolha Carregar arquivo. Você pode procurar imagens stock, se quiser. Mas eu já tenho minha imagem configurada para esta, então vou clicar no arquivo Upload. Então aqui está todo o meu jogo sobre escolhas. Eu editei isso já no Photoshop. Você quer saber um pouco mais sobre a edição de imagens para uso na Internet. Ou vá para a seção sobre. Dê uma olhada no meu rosto. Clique nisso. Isso abrirá toda a minha página do Skillshare. Se você rolar para baixo até o fundo, você verá todas as outras lições que tenho lá. E eles têm um para upload de imagens. Como otimizar suas fotos para fazer seu site funcionar bem e rápido. Certifique-se de assistir a essa pessoa para ter uma ideia melhor de como os tamanhos de imagem precisam funcionar na Internet. Já redimensionei todos esses. Vou escolher este, Space Invaders no arcade retrô. E sim, lá vamos nós. Adoro isso. Como você pode ver, a seção de heróis ocupa uma página inteira. Assim, o usuário pode ver de uma só vez quem somos, o que estamos falando e eles querem saber mais sobre nós. Eles clicarão neste botão. Você pode ver como isso está parecendo no celular. Mobiles muito bons é movido para cima com o texto abaixo. Se você fosse abrir e seu celular, essa é uma boa introdução a quem somos e o que fazemos. Trabalhe em sua própria seção de heróis e siga exatamente o que eu fiz aqui. Daremos seu próprio estilo pessoal e deixaremos isso ainda mais claro aqui do que isso. Ok, agora quero rolar para baixo e trabalhar na próxima seção. É aqui que vou destacar todas as nossas últimas postagens no blog. Agora, o fundo aqui é amarelo. Acho que gosto disso ser amarelo. Eu gosto da forma como ele meio que rola do branco no topo para o rosa para o amarelo. Este título fala sobre sabonetes favoritos. O que não queremos que queremos falar sobre videogames. Então, vou colar esse cabeçalho. Você pode escolher se quer que ele fique alinhado, centralizado, alinhado à direita, acho centralizado aqui porque ele vai ficar no topo das últimas postagens. Não pense que precisamos desse espaço deles . Posso excluir isso. Se você realmente quer apenas brincar com a altura do espaçador, você pode simplesmente brincar com esse aqui. Torná-lo menor, torná-lo maior. Mas acho que não precisamos disso. Então exclua isso. Acho que isso parece legal na fonte preta. Mas vou ver se consigo brincar com a cor da coisa toda aqui. Então, o que está ligado no momento é um leve. Acho que quero que a luz sim. Onde ele vai me dar o cabeçalho rosa em cima do amarelo. Acho que isso parece muito legal. Em termos de formato. Bem, acho que só precisávamos um pouco mais de espaço para respirar acima disso aqui. Acho que está entrando nessa manchete muito rápido. Então, vamos fazer isso, personalizá-lo e torná-lo um pouco mais alto. Talvez digamos 40. Sim, e isso é um pouco mais de espaço para respirar lá. Agora, o que temos aqui, bem, são apenas imagens com texto. Vamos deixar nossos blogs lá dentro. E então esse botão sobre isso para chegar a todos os blogs. Então, vamos apenas editar o texto aqui ou blogs. Em seguida, faça, eu vou até a página do blog. Salvar. Ok, então o que temos aqui, quero excluí-los e quero adicionar em uma seção totalmente nova. Então, vamos excluir, excluir. Excluir. Você pode ver com cada um , tipo de largura total, o que será muito grande de qualquer maneira. Mas o que eu quero fazer é adicionar um resumo de todos os nossos últimos blocos no Squarespace, muito fácil de usar. Se você quiser adicionar algo novo, basta clicar no Plus onde você quer que ele esteja. Então, podemos ir acima de algo abaixo de algo. Então eu quero que ele esteja aqui abaixo do título. Então, vou clicar no plus. E estes mostrarão todas as opções diferentes que você pode colocar aqui, elas têm essa coisa de bloco de rolagem muito legal. Você pode simplesmente colocar texto, imagem, botão, vídeo, examinar tudo isso, brincar com eles. Veja o que você pode fazer pelo seu próprio site que realmente funcionará para você. Mas o que eu quero entrar aqui é um resumo, que é um resumo de todos os blogs mais recentes. Isso vai cair, e isso ainda não parece legal. Mas se selecionarmos uma página, vou escolher a página do blog. Lá vamos nós. Isso agora mudou para os três blogs que já foram inseridos pelo Squarespace. Obviamente, novamente, trata-se sabão e desinfetante para mãos DIY, não sobre o que queremos escrever, mas você pode brincar com a exibição de tudo aqui. Então, vamos voltar. Então, agora estamos falando sobre a data dos metadados primários publicados. Eu não quero que pareça que você possa simplesmente desligar isso para que você não tenha nada lá. Bem, você pode escolher outra coisa. Vou escolher a categoria, que no momento não mostra nada, mas vou te mostrar como isso vai funcionar mais tarde. Metadados secundários. Bem, você pode dizer quem é o autor, quem escreveu o post. Se você quiser localizar quantos comentários têm, o que for relevante para você. Mas acho que só quero uma coisa aqui. Quero a categoria. Brinque com ele você mesmo e veja o que funciona. Agora design. Mais uma vez, temos algumas opções diferentes. Carrossel. Isso é meio legal. Lista. Isso é um pouco confuso. E grade. Isso é um pouco legal. Mas acho que gosto do carrossel. Eu gosto aqui é a maneira como você pode ter mais de três itens e as pessoas podem percorrer. Então, vamos mudar isso para mais itens e você pode ver na tela. Então, vamos mudá-lo para bem, todas as nossas postagens. Então, vamos mudá-lo para 30. Como você pode ver aqui, agora temos essa pequena flecha. Assim, você pode ir e voltar entre a taxa de proporção mais recente, postagem e mais antiga. Vamos para uma imagem quadrada. Isso parece legal. Você vê um pouco mais de textos, pequenos, médios, grandes, talvez grandes. Em seguida, alinhamento. Acho que gosto de centralizar lá. Me incomoda é essa pequena coisa no topo que diz o texto do cabeçalho em destaque. Vamos ver se eu excluo isso. Sim, isso se foi. A única coisa que precisa estar lá. Então os elementos, é isso que vamos ver. Então, vemos um título, imagem em destaque, exercemos, leia mais link. Isso é muito legal. As pessoas sabem clicar nisso. Vai levar até o post. É aqui que escolhemos a categoria. Você pode ter isso abaixo do conteúdo. Vou escolher o título acima. O que acontecerá aqui são as diferentes categorias que estamos usando para nossos blogs. Então eles vão ser categorias como 1980, 1990, talvez Nintendo, Sega, arcade, esse tipo de coisa. Então, as pessoas sabem, à primeira vista exatamente que tipo de post é esse, que tipo de jogo ele está falando sobre o tipo de erros. Mas precisamos adicioná-los. Então, faremos isso um pouco mais tarde quando trabalharmos na página do blog. Ok, então isso está realmente parecendo muito legal. Agora, a única coisa que me incomoda de novo, este pequeno espaço aqui, acho que não precisamos disso retirado. Sim, eu acho que eu só gosto do jeito que ele vai direto para todos os blogs de baixo, eu vou de qualquer forma isso é tudo centralizado também. A única coisa é que não consigo ver tudo de uma só vez. Então, é um pouco grande demais. Posso tornar as imagens menores aqui, mas acho que o que quero fazer é alterar a largura da página. Então, novamente, vamos para a seção de edição. Portanto, não estou editando um único elemento aqui. Estou editando a página inteira. Se você quiser fazer isso, basta clicar longe de qualquer elemento. Portanto, esse espaço vazio com o botão direito do mouse nessa seção. Largura do conteúdo no momento em que está em geral, por isso está preenchendo a página inteira. Vamos mudá-lo para mídia. Sim, isso parece muito legal. Gosto disso. Posso brincar com o alinhamento de conteúdo à esquerda, colocá-lo à direita, mas obviamente centralizado vai ser muito melhor. Então é quase tudo apropriado. Acho que algumas das fontes são um pouco grandes demais aqui. Então, vamos até o cabeçalho novamente. Está indo para o momento, se mudarmos isso para um cabeçalho três, sim, isso é muito melhor. Agora é um pouco mais sutil. Então talvez os tamanhos de fonte no resumo. Vamos editar isso. O que escolhemos para esse? Talvez eu tenha escolhido muito grande. Tínhamos mídia grande do que maneira. Lá vamos nós. Agora, o que você pode ver é a exibição perfeita em uma página do site. O que você quer para cada seção é poder ver tudo de uma só vez. É assim que as pessoas leem o que se trata. Então, vamos ver o título. Eles podem ver as últimas postagens aqui. Você pode percorrer isso e alterar quais blogs estão aparecendo aqui. Ou eles podem clicar neste botão e ir até toda a página de registros. Talvez mais uma coisa. Isso é um pouco grande demais em comparação com todo o resto. Agora, o que eu quero fazer é mudar para um tamanho menor. Então, no momento, está no primário. Veja o que secundário é ainda maior. Sim, lá vamos nós. Muito mais sutil agora, acho que funciona bem ter o grande aqui em cima. Título menor, texto menor aqui e, em seguida, todos os blogs adoram, isso é perfeito. Agora, uma coisa que é sempre seguro notar deveria ter feito isso após a primeira seção também. Sempre clique aqui e clique em Salvar. Isso significa que tudo o que estamos trabalhando agora está salvo. Então, se nosso computador falhar ou algo assim, não perdemos tudo em que estamos trabalhando. Portanto, certifique-se de sempre clicar nisso enquanto está passando. A outra opção que você tem aqui, digamos que eu escrevi algo aqui. Melhor site do mundo. Bem, eu não quero dizer isso. Tem sido um pouco arrogante. Então, o que posso fazer aqui é que posso fazer um desfazer e refazer o pé pressionando desfazer. Ele tira os textos que acabei de colocar e depois se foi. Mas se eu tirei algo e eu poderia realmente querer trazer isso de volta, basta pressionar isso algumas vezes e ele vai refazer tudo o que acabamos de fazer. Mesmo que provavelmente seja o melhor site do mundo, vou tirá-lo. Lá vamos nós. 7. Web Design: página inicial B: Agora você pode dar uma olhada no que já está aqui e você pode brincar com as seções que foram configuradas para você. E você pode entrar e editar tudo. Então, temos algum texto aqui, mais um texto do que neste, apenas algumas imagens e tudo é grade. Mas se isso realmente não vai funcionar para você, enquanto simplesmente se certifica de que você está clicando na seção e exclua a seção inteira. Isso significa que ele não estará mais lá. Pode cometer um erro. Sinta-se à vontade para desfazer ou refazer se você não quiser. Então você pode brincar com as partes predefinidas do modelo, ou você mesmo pode adicionar outra pequena seção, e eu mostrarei algo muito legal aqui. Então aqui estamos pairando entre esta seção amarela e esta seção rosa. Vou clicar em Adicionar seção. Isso mostrará todas as opções pré-fabricadas que você tem em todo o Squarespace. E há algumas coisas muito legais aqui. Isso está nos mostrando manchetes. Maneiras tão diferentes de ter uma imagem com texto em cima dela. Este com uma pequena borda preta, com uma borda branca. Você pode brincar com isso e isso é apenas pegar todas as nossas fontes predefinidas que decidimos em todas as nossas cores. Então você pode ver como ele ficaria para você. Temos algumas outras coisas aqui, como fazer listas, imagens, citações, etc. Isso parece muito legal. Mas sim, apenas brinque um pouco com isso sozinho e veja se você pode adicionar alguns elementos extras que eu não estou usando aqui e fazer com que pareça super legal. O que eu realmente quero adicionar aqui é uma seção de título. Acabei de ver que gosto desta com a borda preta. Então, o que eu quero é ter uma imagem de fundo com um pequeno texto legal em cima dela. Ele não precisa ter um call to action. Ele não precisa ter um botão nele. Apenas outra coisa que diz quem somos e do que somos. Então, vamos soltar esse. E então eu gosto do que temos aqui em termos do título e do pequeno pedaço de texto abaixo dele. Não quero que esse botão esteja lá. Então, ele vai excluir esse. Sim, isso parece legal. Obviamente, a imagem que não é apropriada para o que estamos fazendo aqui. Então, vamos subir aqui e editar esta seção. Mais uma vez, segundo plano. Isso é predefinido a partir do modelo Squarespace. Então, vamos substituir isso. Carregue outro arquivo. O que eu queria aqui é uma imagem que mostra outro lado diferente das máquinas arcade, máquinas de pinball. Então eu tenho uma imagem de máquina de pinball retrô muito legal aqui. Vamos deixar isso. Sim, isso parece ótimo. Gosto da forma como os textos se sentam em cima disso. O problema com isso é a imagem que eu tenho. Tem muito tipo de contraste claro e escuro nele. Então, o texto em branco e, em cima , não funciona realmente. Mas isso é legal porque quando estamos nesta seção em segundo plano, podemos adicionar uma opacidade de sobreposição. Então aqui você pode ver que ele está definido em 15%. Se eu brincar com ele, está pegando o preto que já está no fundo aqui, e está deitado sobre a imagem. Então, o que você faz é ainda ver a imagem, mas você pode ler o texto que está em cima dela. Então o que eu quero é algo em algum lugar entre talvez 50%. Acho que é 40. Eles têm 35 anos. Sim, acho que você pode ir 40. Acho que você ainda pode ler o texto sobre isso e ainda ver quais são as imagens abaixo. Então, vamos clicar fora daqui. Agora eu quero inserir alguns textos que são sobre jogar máquinas de pinball. Bem, eu só pensei em algo muito legal e peculiar, que vem de uma música, eu acho pela OMS. Vou te mostrar o que é este. Vou colá-lo aqui na primeira posição. Claro. Joga um pinball malvado. Isso parece muito legal. Mas é um pouco grande demais. Então, talvez vamos mudá-lo para o cabeçalho dois. Sim, isso parece muito melhor. Estou meio que olhando para este texto agora, acho que o espaçamento entre linhas é um pouco baixo demais. Então, o que vou fazer, basta salvar esta página. Volte para Editar. Então vou subir aqui para estilos de site novamente. Fontes, cabeçalhos. Acho que é só essa altura da linha. Vamos colocá-lo em um talvez. Sim. Certo. Isso é um pouco mais limpo. Dá ao texto um pouco mais de espaço para respirar para que eles não fiquem sentados um sobre o outro. Certo. Então, vamos voltar. Feche esse. Então, abaixo do título aqui, vamos colocar outra linha dessa música. Não vi nada como ele em nenhuma diversão que seja menos ousada. Vamos nos mover para tirar a bola. Sim, eu adoro isso. Isso parece muito legal. Então, aqui temos outra seção inteira que é realmente fácil e rápida de fazer porque estamos usando o modelo onde temos uma imagem de fundo, a borda preta com um pequeno texto legal e peculiar em cima de isso. Ok, então salve isso. Volte para a edição. Ok, então temos a seção de heróis passando para a página Sobre nós. Melhores jogos. Blogs. Depois, há uma pequena imagem legal e peculiar. E depois mais uma seção que eu preciso preencher na parte inferior. Eu só quero que seja sobre a página de contato para que as pessoas saibam que queremos entrar em contato com elas. Isso aqui, olha, parece bem legal. Poderia ser usado para isso. Mas, novamente, acho que vou adicionar uma seção. Acho que vi algo aqui que acho que funcionaria em termos de cores, tudo o que estamos usando. E esse é esse. A forma como temos como uma imagem à esquerda com uma caixa de texto ao lado dela. Então, vou deixar esse aqui. Ok, isso está parecendo legal, mas vamos brincar com as cores aqui novamente. Cores. O rosa de volta para dentro. Oh, isso é ótimo. E isso mudou a cor do texto aqui também. Gosto disso com um fundo branco com o texto rosa em cima dele. Isso é legal. Ok, e depois imagem. Vamos editar isso. Então, novamente, vou substituir isso por uma das minhas próprias imagens. Vamos ver o que temos. Mario Luigi pulando. Sim, isso parece legal. Gosto da forma como temos como uma imagem maior aqui agora. E agora está centralizado com a caixa de texto à direita. Então, vamos mudar o texto aqui. Esta janela. Em vez de fazer com que ele se destaque. Quero dizer que Mario, Luigi, cabeçando três, acho que é um bom tamanho que nos dá um pouco mais de espaço para respirar no topo. Em seguida, ele vai copiar em alguns textos que são mais relevantes para o que estamos falando aqui. Queremos ouvir de você, queremos saber quais são seus jogos de arcade favoritos dos anos oitenta e noventa. Você tem a melhor pontuação em Donkey Kong? Vamos ver se podemos ser você. Então este botão aqui embaixo. Entre em contato novamente. E eu quero que isso vá até a página de contato. Então, aqui, entre em contato. É através do contato. Salve a configuração sésseis. Certo. Agora isso é ótimo. Adoro essa seção. Agora. Vou se livrar desta seção abaixo. Acho que precisamos disso. Onde esta seção abaixo? Isso nos leva até o rodapé e trabalharemos nesse próximo. Vamos salvá-lo novamente. Acho que o espaçamento está um pouco fora aqui. Acho que temos muito espaço na parte inferior, sem espaço suficiente à esquerda ou à direita. Então, vamos apenas editar isso rapidamente. Então, vá para a seção Editar. Em seguida, a largura do conteúdo deve ser muito pequena. São meio que duas malas. Vamos fazer outro personalizado. Em algum lugar entre os dois. Vamos ver, talvez 90%. Acho que isso funciona, só dá um pouco mais de espaço para respirar. Então, quando você está olhando para a página inteira, vemos Mario pulando e depois vemos todo o texto juntos de uma só vez. Ok, salve isso. Uma última seção para dar uma olhada na página inicial é o rodapé. Agora, obviamente, o rodapé, semelhante ao cabeçalho, ele aparecerá na parte inferior de cada página. Vamos editar esse. Sabe, eu já gostei do amarelo acontecendo lá. Mas há apenas alguns elementos aqui que eu não quero, preciso editar o boletim informativo. Não temos um desses. Livre-se disso. Esta imagem é mais sabão, livre-se disso. Então este texto aqui, bem, estes são links saltados. Estes são links para todas as páginas do site. Primeiro de tudo, bem, o posicionamento disso não está certo. Você pode ver aqui que temos duas colunas diferentes. Temos uma coluna à esquerda, um espaçador e uma coluna à direita. O que eu quero fazer é brincar com a largura dos dois pontos. E você pode fazer isso em qualquer lugar da página com qualquer elemento. Literalmente, basta colocar sua pequena flecha lá e apenas arrastá-la. Arraste para a direita. Lá vamos nós. Isso parece legal. Então, com o texto, prefiro que fosse centralizado. Não só me permite a chance soltar algo diferente deste lado, mas também o texto aqui. Bem, a maior parte disso não é relevante. Isso é excluir algumas peças de loja. Não, obrigado. Diário bem, eu deveria dizer blog. Logan, exclua o resto de ambos os lados. Então estes são apenas todos, isso é apenas texto com links nele. É por isso que é meio rosa brilhante e tem um sublinhado sob ele. Se você quiser editar qualquer pedaço de texto e Andy dentro ou retirar ou alterar um link, realce o texto, clique neste pequeno ícone aqui, esse link, um. Isso lhe dirá qual link está sendo usado aqui. Você clica em sua engrenagem. Mais uma vez, faça o que fizemos antes. Você pode ir. Para um endereço de e-mail. Você pode ir para um arquivo de endereço da web ou uma página, obviamente uma página sem um blog de diário chamado , onde queremos que ele vá. Ok, então blogue sobre e entre em contato, o mesmo que chegamos na barra de navegação no topo. Apenas maneiras diferentes de usuários navegarem pelo seu site. Vamos nos candidatar. E depois mais uma coisa que eu quero aparecer aqui. Vamos ver algo legal e peculiar. Neste pequeno pop-up. Gostei da aparência dessa coisinha antes ao introduzir o bloco de rolagem. Vamos ver o que isso se parece. Certo, isso é legal. Então, o que desceríamos na parte inferior aqui, alguns textos que rolam da direita para a esquerda. Claro. Posso mudar a direção disso. Sim, podemos ir dessa maneira. Deixe-me mudar o tamanho disso. Acho que meios muito grandes, muito boa velocidade. Sim. Acho que o mais lento é melhor para que você possa lê-lo. Mas em termos de conteúdo, o que queremos aqui? Eu não quero sonhar com isso e essa pequena linha ondulada. Então, vamos mudar isso para GameOver. Então eu gosto da linha rabugenta, mas quero que outra palavra esteja aqui. O que acontece quando é um jogo em uma máquina arcade, você precisa inserir outra moeda. Então, meio que como essa pequena linha rabugenta. Então, na verdade, eu quero outro desses. Então clique neste, duplique. Então esses pequenos pontos em ambos os lados que permitem arrastá-lo para cima e para baixo. Então lá vamos nós. Então, agora acabou o jogo. Linha Squiggly, Inserir Moeda. linha Squiggly é um pouco lenta. Talvez até o telefone rápido. Sim, acho que isso é melhor. Ok, então isso parece muito legal. Eu adoro isso. Eu não quero esse espaçador e outro espaço, certo? Preciso lá vamos nós. Olhe para isso. Essa é uma maneira legal de encerrar o site com nosso rodapé. Diz GameOver, Inserir Moeda. E, em seguida, partes do site aqui à direita. A única coisa é que eu acho que quero que ele vá para o outro lado. Sim, o jogo Insert Coin acabou. Isso funciona muito melhor. Intensidade das ondas, você pode brincar com isso e torná-lo um pouco mais vacilante. Todo o caminho para cima nisso. Um pouco louco. Eu meio que gosto direto para ser honesto. Estado sem o que você quiser fazer com isso. Mas colocar algo assim, é um pequeno elemento legal que o Squarespace lhe comprou. Então, salve isso. Agora que isso salvou, vamos dar uma olhada em toda a nossa página inicial. Clique na pequena seta. Aqui temos uma pequena seção de cabeçalho muito legal. Pequena introdução legal com roteadores. Melhores jogos, 85 a 95. Gosto dessa pequena animação pois essa seção vem também. Outra pequena animação legal desaparecendo e chama-a de imagem com texto em cima dela. Nessa. Sim, eu adoro essa pequena animação também. Mario, Luigi entrando em contato. E então eu vou rodapé no final. Jogo sobre inserir moeda. Então lá vamos nós. A página inicial agora está completa. Isso está ótimo. Está parecendo muito peculiar, muito brilhante, muito legal. E diz o que queríamos dizer sobre jogos retrô de 85 a 95. E isso está tudo feito. No entanto, acho que há mais algumas coisas legais que podemos fazer com algumas dessas seções. Então, vamos falar sobre isso na próxima lição. 8. Web Design: animação de fundo: Espero que você tenha achado a primeira parte da página inicial menos do que muito fácil de seguir e que você já tenha uma página inicial incrível. E você também jogou em seu próprio estilo aqui. Estou muito feliz com o que temos na página inicial até agora, mas eu só quero mostrar algumas coisas mais legais que você pode fazer apenas para fazer cada seção apenas para fazer cada seção se destacar um pouco mais. Então, vamos começar com a seção de heróis. Então edite a seção. O que vamos ver aqui é o pano de fundo. Nós analisamos isso brevemente anteriormente dizendo que você pode adicionar uma imagem de fundo ou um vídeo de fundo ou este, arte de fundo. Agora isso é algo que vem com o Squarespace. O que você tem é todas essas pequenas seções animadas legais que realmente dão algum personagem real a esse plano de fundo. Alguns deles são um pouco loucos e podem ser difíceis de ler o texto em branco por cima. Este parece muito legal. Apenas alguns pequenos pontos brancos voando ao redor ao fundo. Mas o que eu realmente gosto, este na parte inferior aqui. O que ele está fazendo é tentar criar uma grade 3D com cores diferentes para que entre e saia e tenha um estilo de animação muito sutil. A beleza deste é que você normalmente tem três opções principais que você pode escolher. É um grande, pequeno, super pequeno, meio assim. Então o que eu quero fazer aqui é acertar as cores, isso não está realmente funcionando tendo o amarelo e o rosa juntos porque não consigo ler os textos por cima. Então, vamos começar com o preto. Lá vamos nós. Aquela primeira estrela, parece incrível. Eu gosto do jeito que você meio que entra nesse brilho de rosa voando por aí. Isso é muito legal. Mas estou tentando optar por algo um pouco mais retro de oito bits oitenta estilo de videogame. Então, vamos ver o que temos aqui, forma e tamanho. Dessa forma, você pode brincar um pouco com ele para poder alterar o tamanho das caixas que estão lá. Então isso é muito pequeno, minúsculo 11 vezes o tamanho, duas vezes o tamanho. Gosto disso. Esse tipo de representa mais desse tipo de estilo de 8 bits, onde eles não tinham muitos pixels para brincar. Então, vamos ficar com o tubo. Então movimento, bem, esta é a velocidade do movimento aqui. Tem isso rápido ou lento? Acho que mais lenta para ser honesto, porque não quero que seja sutil. Então este é divertido. Esse posicionamento, pixelado ou turbulento. Vamos ver o que ambos fazem. Mas pixelado. Bem, lá vamos nós. Isso é muito mais estilo AT. Isso me lembra Super Mario da Nintendo original. E sim, eu realmente gostei disso. Eu acho que isso parece muito legal e apenas adiciona esse pouco de caráter extra. A única coisa é que acho que o contraste entre o rosa e o preto não está certo. Então, vamos apenas com essa cor escura. Você pode clicar nisso. Você pode escolher algo da sua paleta August para personalizar. Então podemos realmente brincar com a cor aqui. Então o que eu quero é olhar para nós uma piscina escura talvez vamos ver o que temos aqui. Sim. Sim, isso é melhor. Talvez até um pouco mais escuro lá. Sabe, um pouco mais perto do rosa, eu acho. Sim, isso funciona. Eu adoro isso. Então isso é fechar esta pequena janela onde você dá uma olhada nisso. Sim, adoro isso. Isso tem um verdadeiro estilo de jogos retrô. E esse é outro pequeno passo acima daquele fundo rosa liso. Nós tínhamos isso. Certo, vamos rolar para baixo. Gosto muito do que temos aqui. Eu meio que gosto do fundo amarelo liso para ser honesto. No entanto, vi algo por aí. Eu não quero jogar isso aqui também. Era esse bloco de rolagem. Gosto muito do que fizemos no rodapé com esse. E eu só quero o muito pequeno, sutil no caminho. Ele pode ficar abaixo de todos os blogs lá e sonhar, isso não funciona. Mas vou pensar uma pequena frase legal de um dos meus jogos favoritos. Acabe com ele. Combate mortal. Se você se lembra disso . Sim, lá vamos nós. Tudo ainda se encaixa na página e acho que apenas adiciona alguns elementos sutis legais à página. Ok, agora a próxima seção, mas eu realmente gosto disso. Eu realmente não quero fazer muito com este, mas acho que, assim como algum tipo de movimento sutil na imagem de fundo seria legal na verdade. Então, se eu entrar aqui para editar a seção, o fundo, como você sabe, é a imagem até agora. O que temos aqui é Efeito de imagem. Isso é algo que pode apenas fazer com que a imagem se mova em segundo plano. Então, o que temos? Temos líquido. Gosto disso. Grão de filme. Isso é meio legal. Isso lhe dá um pouco mais de uma espécie de estilo dos anos oitenta. Parece uma TV muito antiga dos anos oitenta. Linhas refratadas bem que são meio quebradas, o tipo de imagem. Essas animações, isso meio que muda. Você se move para cima e para baixo através das imagens. Gostei muito do primeiro a ser honesto. Líquido. Sim, eu meio que gosto disso, quando eu venho para esta seção é meio que ir por esse caminho em vez de coisa de movimento ficar em segundo plano. Muito legal. Certo. Agora este, eu quero fazer algo um pouco diferente aqui. Acho que o plano de fundo é muito simples. Então, vamos adicionar uma imagem a essa. Carregue o arquivo. Eu tenho isso muito legal, tipo de nascer do sol dos anos oitenta. Sim, eu acho que parece branco, parece super 80 e isso parece muito legal por trás do Super Mario pulando por aí. É só um pouco para seguir em frente. Então, talvez vamos brincar com a opacidade novamente. Está trazendo tudo, no rosa que estava lá anteriormente. Então a imagem ainda está lá, mas é como sentar atrás dessa sobreposição rosa. Perfeito. Certo. E uma última coisa, vamos brincar com o rodapé. Acho que quero essa mesma coisa de grade animada acontecendo, mas eu quero fazê-lo de uma maneira um pouco diferente. Vamos escolher esse. Então vamos escolher a grade menor que eu realmente gostei disso. Mas, novamente, para full-on diz brincar com as cores. Vamos começar com branco. Isso é legal. Mas então eu gostei do amarelo. Então, vamos voltar para o amarelo. Sim, isso é muito legal. Acho que o texto preto se encaixa muito bem em cima disso. Sim, isso é ótimo. Em seguida, forma e tamanho. Vamos manter o mesmo tamanho que é a emoção. Bem, eu meio que quero que não se mova. Então, vamos soltar o movimento para 0. Sim, isso funciona do jeito. É como ainda, eu gosto disso agora do jeito que é uma animação, mas não é animado. É muito legal. Então, o fundo da grade, acho que vai deixar o amarelo um pouco mais escuro. Sim, lá vamos nós. Isso parece legal. Eu adoro isso. Ok, então vamos salvar este. E então vamos dar outra olhada em toda a página ao vivo. Adoro essa animação sutil, muito tipo de estilo de 8 bits no fundo lá. Então este ainda está parecendo legal. Acabou com ele. Incrível. Basta correr ao longo da parte inferior. Há amor que, isso é muito peculiar. Isso parece muito mais legal com Luigi lá, apenas dá um pouco de caráter em segundo plano. Esse é o rodapé. Então, sim, isso é apenas para mostrar várias coisas diferentes que você pode fazer com o plano de fundo da sua página inicial. E eles, cada seção apenas se levantam um pouco mais, um pouco mais frio. Então, espero que você tenha tido uma boa brincadeira com esta página inicial. Se um seguir minha direção completa ou tomar seu próprio estilo e seu próprio conteúdo e brincar com esses fundos e fazê-los realmente se destacar. Mal posso esperar para ver o que você fez com este. Agora terminamos esta lição. Vamos passar para as páginas restantes. 9. Web Design: página sobre: Ok, então a página inicial agora está pronta. Espero que você tenha acompanhado isso passo a passo. E você tem sua própria página inicial e está muito feliz com ela e parece muito legal. Estou ansioso para ver tudo isso. Agora, a estrutura e design do site estão todos classificados. Então, o que precisamos fazer agora é usar isso em todas as outras páginas. Venha aqui, clique nas páginas. A primeira que vamos editar é a página sobre. Então, obviamente, uma página Sobre é a página que é sobre você apenas dizer aos usuários que acabaram de visitar o site pela primeira vez, o que você é. Quando você entra no editor, você pode ver como ele já foi construído usando o modelo. Temos outra introdução de página inteira com alguns textos de introdução e uma imagem de aparência legal com nosso azul sendo usado como plano de fundo. Em seguida, temos mais texto em cima da imagem. Em seguida, uma seção extra no final explicando um pouco mais sobre quem somos. A melhor coisa que você verá ao chegar a esta página, no entanto, é olhar seu rodapé. É exatamente assim que definimos antes e o cabeçalho exatamente como configuramos antes. Eles são os mesmos e consistentes em todas as páginas do site. Então, quando viemos aqui para editar, estamos editando esta seção, esta seção e esta seção. E, obviamente, podemos adicionar uma seção extra se precisarmos dela. Mas eu realmente gosto do que temos no topo aqui, então vou trabalhar com isso. Então, antes de tudo, vamos mudar esse texto na parte superior. Apenas colando no que eu quero dizer, mantendo o arcade clássico vivo desde 85. Como você pode ver aqui, já está usando o título um. Isso é muito grande. Cabeçalho três, menor, provavelmente um pouco pequeno demais. Eu acho que realmente ir para foi perfeito, então vamos ficar com isso. Então, abaixo, um pouco mais texto de introdução que está usando o parágrafo dois. Vou colar o que já escrevi lá. Então, abaixo, eu gostaria outro botão o mesmo que tínhamos na página inicial. E eu quero que esse botão leve os usuários pela página do blog. Novamente, é apenas navegação adicional que eles podem usar a barra de navegação na parte superior ou botões nas páginas, diferentes maneiras de encontrar as páginas que eles querem. Então, para fazer isso, venha aqui e clique em Editar. E então vá para o link aqui e continue botão. E você verá que isso apareceu abaixo com os principais textos lá. O que quero dizer aqui é ler mais e fazê-lo ir para a nossa página do blog. simples quanto isso. Então, mais uma coisa que precisamos mudar é a imagem. Esta é a imagem que veio do modelo. Vamos substituir o arquivo de upload. E eu vou usar essa imagem aqui, brincando crise de tempo. Outra imagem que configurei com antecedência. Isso parece muito legal. Só um pequeno problema. Há um pouco de espaço aqui. Vamos apenas tirar isso. Lá vamos nós. Isso era apenas um espaço no texto. Agora tudo se alinha melhor. O mesmo espaço entre aqui e ali. Sim, isso parece ótimo. Adoro isso. No entanto, o problema é que ele meio que se encaixa na página, mas não é bem. Como você pode ver, o botão que não se alinha com a parte inferior da imagem. Então eu acho que esse texto é muito grande, então vamos mudá-lo para um cabeçalho três. Lá vamos nós. Agora está tudo centralizado ao lado da imagem. E isso só dá um pouco de espaço para respirar aqui e aqui. Quando um usuário visita a página, ele vê tudo de uma só vez. E eu adoro esse fundo azul, mas como fizemos na página inicial, vamos ver se podemos trazer um fundo um pouco mais legal. Então, vamos até aqui e clique na seção Editar. Vamos voltar ao chão novamente. Vou experimentar mais arte em segundo plano. Novamente, quando você mesmo estiver construindo esta página, brinque bem com elas e veja se você encontra uma que você gosta. Isso parece legal. E adorei o amarelo e o rosa, mas isso não vai funcionar aqui porque você não pode ler os textos em cima disso. Então, vamos para o Filtro novamente. Primeiro de tudo, bem, vamos mudar uma das predefinições aqui. Você pode escolher uma imagem personalizada, se quiser. Adoro esses ícones que eles têm lá. E de todos eles, este aqui, a estrela. Bem, isso parece o mais meio dos anos 80, mais apropriado para um site de videogames arcade. Mais uma vez, não consigo ver os textos e outras coisas. Então, vamos escolher uma imagem dez Tia. Bem, vamos fazer isso branco e depois fazer a cor de fundo azul. Mas, novamente, não consigo ler o texto em cima do ícone branco. Vamos fazer algumas edições nessa rede. Vamos rolar para baixo. Primeiro de tudo, dimensione o número de imagens, mas há muitas lá. Então, o que vou fazer é personalizar isso. Tão pequeno, médio, grande ou personalizado. Vou deixá-lo para muito menor. Vamos apenas dizer, vamos mudar isso para dois. E depois o número de imagens. Vamos deixar isso para muito menos. Amarelo sexual. Isso é muito sutil. Você pode ver um flutuando aqui em cima e outro atrás aqui, um atrás. Mas ainda não consigo ler o texto em cima disso. Então, vamos fazer outra edição. Vamos filtrar e brincar com eles. E isso lhe dará outro tipo de sobreposição sobre os ícones em segundo plano. Então brinque com eles, ponto cruzado círculo. Isso é muito legal Na verdade. Parece um pouco mais dos anos oitenta um cubo realmente parecido com isso. Então este, lá vamos nós. Círculo de gradiente. Não sei o que isso significa em termos de design e exibição. Mas eu tenho o que quero aqui. Então eu posso ver a pequena estrela flutuando, mas ainda consigo ler o texto em cima dela. O que eu tenho agora é esse tipo de estilo grelhado um pouco de plano de fundo . Então isso é brilhante. A única coisa é, acho que não quero que ele se mova. Então, se eu mudar a velocidade da onda, coloque isso para 0. Vamos ver o que acontece. Sim, lá vamos nós. Isso não está se movendo mais. Eu adoro isso. Aí estamos nós. Isso é legal. Sorte. É um plano de fundo muito sutil para adicionar aqui, mas só dá um pouco mais de caráter e representa o que fizemos em outros lugares do site. Ok, então essa seção é classificada. Vamos ver o que temos nas outras duas seções. Bem, para ser honesto, acho que não preciso de muito mais texto aqui. Acho que quero explicar brevemente às pessoas quem somos, o que fazemos e depois enviar as pessoas para a página do blog. Então, o que vou fazer é excluir esta seção. Então passe o mouse sobre a seção. Remova. Agora temos isso na parte inferior, que parece muito legal e eu gosto desse estilo. Não é o que estamos tentando fazer aqui. Não sei o que é essa imagem, algum tipo de Salt Lake ou algo assim. Então, vamos mudar essa imagem para uma que usamos anteriormente. Como um plano de fundo. Substitua. Vou aparecer no mesmo plano de fundo que fiz na página inicial atrás do Super Mario. Sim, é isso que eu quero. Então eu meio que só quero ter esse tipo de breve introdução, enviando pessoas para o blog. E então apenas um pequeno sinal legal aqui. Não consigo ler o texto lá. Então, vamos fazer outra sobreposição de cores na parte superior da imagem. Plano de fundo. Opacidade de sobreposição. Vamos apenas acionar isso para cima. Certo, isso é bom e alto. Eu adoro isso, mas eu meio que não quero que isso seja Blues. Os humanos são como o azul aqui em cima. E então eu quero um pouco de contraste, talvez transformado em rosa. Vamos ver onde podemos editar isso. Vamos para as cores. É porque está no escuro aqui. Se eu fosse escolher brilhante também. Lá vamos nós. Agora eu gostaria de contrastar de uma cor brilhante. Começamos com os brancos, entramos no azul, no rosa e depois no amarelo da foto. Isso é ótimo. Agora eu só preciso editar o texto. Então, o que eu realmente farei é excluir esse resultado final. Então eles meio que colocam alguns pequenos traços extras aqui, algumas pequenas linhas. Eu não quero isso. E eu quero que ele diga bons tempos. Então eu escrevi IN ou simplesmente centralizo isso. Eles estão levando de volta para o parágrafo dois. Na verdade, quero usar aqui. É a mesma fonte que estamos usando aqui para o jogo. Acho que é só mais um ponto peculiar que podemos deixá-lo. Vamos destacar isso aqui nos textos. Escolha monoespaço. Como você pode ver, isso mudou para a fonte que estamos usando no topo aqui. E diz: Good Times. O problema é que, bem, não consigo ler isso, então só precisamos mudar o tamanho disso. Isso é feito em nossa configuração de fontes aqui. Então, antes de tudo, vamos salvar esta página. Role para baixo até o que estamos vendo. Pressione editar novamente. E então venha aqui para fontes. Vou clicar no outro aqui, que é fliperama soprando, a fonte que estamos usando. Nós escolhemos a família da fonte já e temos o peso. É este aqui, tamanho baseado em tamanho, que é muito, muito pequeno. Vamos fazer isso muito maior. Sete. Acho que sete é bom lá. Sim, eu realmente gostei disso de volta. E agora estamos de volta aqui. Então, isso parece muito legal do jeito que seguimos deste pequeno texto de introdução. Nesta imagem de fundo com bons momentos no topo, na flutter. Você meio que quer apenas uma coisa pouco mais peculiar. Vou colocar uma pequena imagem ou um pequeno ícone acima deste texto. Então clique no mais e escolha a imagem. E uma imagem, novamente, carrega um arquivo. E aqui eu tenho esse pequeno PNG. Uma imagem PNG é aquela que não tem um plano de fundo por trás dela. E é apenas um ícone de um invasor espacial. Quero deixar isso acima da palavra. Bons momentos. Sim, adoro isso. Isso parece muito legal. É meio que flutuando na frente desta imagem do sol lá. E então diz Good Times abaixo dele. A única coisa é que acho que isso torna esta seção um pouco grande demais. Então, o que vou fazer é adicionar em um espaçador de ambos os lados desta imagem. Mais uma vez, clique no seu plus e escolha espaçador. E isso soltará automaticamente o espaçador na parte superior da imagem. Mas o que queremos fazer é colocar um para a esquerda e outro para a direita. Então, antes de tudo, vamos duplicar isso e depois outro espaçador. Então agora temos dois espaços aqui. E, em seguida, segure o mouse e arraste-o para baixo para a esquerda da imagem. Como você pode ver aqui, há uma longa linha azul caiu no espaço e ao lado esquerdo de tudo nesta página. Mas não queremos isso, só queremos isso à esquerda do ícone. Então traga um pouco até ver a linha mais curta. Você pode ver que ela tem a mesma altura que a imagem invasora do espaço. Então, basta soltá-lo lá. Lá vamos nós. Agora caímos em um pequeno espaçador ao lado do ícone. Agora farei o mesmo do outro lado. Linha menor, lá está. Lá vamos nós. E eu posso até fazer isso um pouco menor. Acho que realmente gostei desse tamanho, mas se você quiser arrastá-lo para torná-lo menor, basta arrastar a borda da caixa para lá e trazê-la para a esquerda ou para a direita. Na verdade, acho que gosto desse tamanho. Quero dizer, esse é um bom espaço entre os bons momentos e o Filho. Sim. Certo. Vamos deixá-lo nesse tamanho. Agora eu tenho uma Sobre Página, pequena introdução dizendo manter o arcade clássico vivo desde 85. Alguns textos curtos sobre quem eu sou, sobre o que eu sou. Um botão que leva os usuários até a página do blog. E então apenas um pequeno sinal peculiar. Eles estão dizendo, bons momentos com este ícone da máquina arcade dos anos oitenta. Então, por favor, siga o que eu fiz aqui. Pegue a sua própria página Sobre e junte-a de uma forma que você sinta que funciona melhor para o site que você está construindo. Você pode querer adicionar algumas seções extras lá para entrar em um pouco mais de detalhes. Ou qualquer outra seção que envie usuários para outras partes do seu site. Mas quando estiver pronto, clique aqui e salve. Quando voltarmos aqui, você verá como a página fica na área de trabalho. Vamos dar uma olhada rápida em como ele se parece no celular. Mais uma vez, temos o mesmo cabeçalho de introdução aqui. Eu realmente gosto disso. Então o layout aqui é perfeito. Começa com uma imagem vai para as manchetes, rola as pessoas até o Leia mais e, em seguida, olhe para o Good Times. Isso foi ótimo. 10. Web Design: página de contato: A próxima página em que quero que vocês trabalhem é a página de contato. Esta é uma página muito importante em qualquer site com quem as pessoas possam entrar em contato. Você, fale com você, jogue ideias para seus blogs, por exemplo. Então, vamos clicar em Contato. Vamos levá-lo de volta para a área de trabalho. Esta é a página que vem com o modelo. Muito simples. Raramente me contate. Formulário para que as pessoas entrem em contato com você, uma imagem. E então o rodapé, muito direto e simples e você definitivamente quer mantê-lo assim para o seu site. Vamos rolar para cima e ir para editar. Gosto do que eles têm aqui, mas quero simplificar ainda mais. Então, o que vou fazer é encontrar outra seção de contato aqui. Na seção, vamos ver o que temos. Contato perfeito. Aqui estão alguns outros monitores muito simples para você. Você pode tê-lo em todo o topo de uma imagem de fundo se você gosta desse estilo, usá-lo em seu site ou apenas algum texto com um botão de contato abaixo que levaria as pessoas pelo endereço de e-mail. Mas eu quero mantê-lo simples. Só não quero formar. Eu só quero algo simples, como um endereço de e-mail e número de telefone. Vamos deixar este aqui. Sim, eu gosto daquele bom e simples entre em contato conosco. E-mail, telefone, um vestido e, em seguida, alguns links para as mídias sociais. Então, vou usar essa seção. Primeiro de tudo, vamos excluir esta seção. Então. Bem, parece bom e branco, mas eu meio que não quero que ele vá para mais cabeçalho branco na seção branca aqui. Então, vamos editar a seção inteira. Duas cores que usamos fundos amarelos, usamos fundos rosa, fundos azuis. Se você estiver feliz em continuar com isso em seu site, faça o mesmo. No entanto, venha para cima, fundo preto. Eu quero apenas mantê-lo simples. Agora significa que tenho um pouco de variedade em todo o site ainda usando a mesma estrutura, cores de fundo diferentes. Gosto disso. Vamos clicar fora daqui. Então vamos mudar essa imagem. Vamos aqui e substituiremos o arquivo de upload de imagem. Esta é a imagem que escolhi usar aqui. Isso é legal. Eu adoro isso. Adoro o quão limpo e limpo é. Acho que não precisa de um passado louco porque é mais um call to action para fazer as pessoas entrem em contato com você. Qualquer coisa que eu não me sinta confortável aqui. Raramente, são apenas essas bordas curvas na imagem que realmente parecem muito legais, mas não é um estilo que usei em nenhum outro lugar do site. Então, do ponto de vista consistente, vamos ao design. Como você pode ver, isso tem um raio de canto. Vamos colocá-lo em 0. Nós vamos lá, temos a Imagem, Fale Conosco, o e-mail. Basta mudar isso para o jogo de e-mail correto pelo meu número de telefone onde moro. Não Nova York, mas tudo bem por enquanto. E então aqui embaixo, bem, eu não tenho uma página no Twitter, então vamos excluir essa. E então isso vai para o Facebook e o Instagram. E, novamente, são apenas textos, links, então passe o mouse sobre o que você quer, Instagram. Então você pode entrar aqui e podemos mudar isso para a página do jogo na página do Instagram. Faça o mesmo no Facebook dot com. O endereço de e-mail, em primeiro lugar, destaca a palavra, venha aqui para vincular. Como você pode ver, já está dizendo qual é o endereço de e-mail, mas para onde isso vai? Clique aqui. E vamos digitar seu endereço de e-mail lá. Então isso se você quiser que o assunto apareça. Então, vamos apenas dizer que corpo, CC, BCC, opcional, basta deixar isso como opcional. Isso não é importante aqui. Salve isso. Aplicar. Você vê que isso está sublinhado agora porque esse é um endereço de e-mail clicável ao vivo para que as pessoas possam entrar em contato. Certo, então isso é perfeito com esse paciente. Mantenha-o limpo, simples e limpo. Digamos isso. Sim, isso é simples. Eu gosto daquela pequena mistura animada lá também. Vamos dar uma olhada rápida em como isso se parece no celular. Perfeito. Sim, eu gosto que tudo apareça em uma única página. Boa imagem explicando quem somos, o que fazemos e entre em contato conosco com os detalhes, diferentes maneiras de entrar em contato conosco. Certo. Então, agora temos uma página inicial sobre a página, uma página de contato. Há apenas mais uma página para terminar. Agora, a página do blog. 11. Web Design: blogs: Então, aqui estamos na seção de blog do site. Deixei este até o final, pois há duas coisas diferentes envolvidas na configuração dessas páginas. Primeiro de tudo, a página geral do blog e, em seguida, cada bloco individual. Então, vamos começar dando uma olhada na página geral. Vamos primeiro mudá-lo para a área de trabalho. Em seguida, veja em tela cheia. Portanto, essa é a configuração geral que veio com o modelo. E eu realmente gostei disso exibido onde podemos ter uma imagem à esquerda, alguma meta descrição no topo, o título e, em seguida, textos de introdução lá. Em seguida, o próximo, imagem nos textos à direita à esquerda , que deixou a taxa de imposto. Gostei dessa tela. No entanto, como você pode ver com isso, os tamanhos da fonte não estão realmente funcionando aqui. Então, o que vamos fazer é começar consertando tudo isso. Vamos clicar aqui e depois editar a página. Então eu quero que isso seja muito menor. Talvez isso seja menor também. O que eu quero é que este pequeno espaço aqui desapareça na borda das imagens tocando. Se tornarmos esse texto menor, espero que isso funcione. Vamos clicar em Estilos do Site. Vamos para fontes. Então, a melhor maneira de gerenciar tudo isso é clicar em cada parte da página individualmente. No momento em que está mostrando a data de quando o blog foi publicado. Vamos mudar isso em um minuto, mas vamos deixar isso muito menor. Então, vou clicar neste. Como você pode ver aqui é pegar os diversos textos que configuramos para a página Sobre, o que foi ótimo nesse tamanho lá, mas não queremos que isso seja desse tamanho aqui. Então, o que vamos fazer é clicar nisso e mudá-lo para fantasia. Ele captou automaticamente a mesma fonte, família, peso e estilo. No entanto, é esse tamanho do assunto. Esse é o que queremos deixar cair para ser muito menor. Mas se mudarmos aqui, ele não o alterará na página Sobre. Porque isso está usando um estilo personalizado apenas para esse elemento na página do blog. Então, vamos deixá-lo em um muito menor, talvez 1,51,6, talvez 1,7. Gosto disso. É meio pequeno e sutil, mas ainda está lá na mesma fonte. Então agora o título, isso está pegando, acho que o que fizemos nas outras páginas. Nós mudamos isso para o cabeçalho três só porque era um pouco menor. Lá vamos nós. Isso está muito mais limpo agora. E como você pode ver, essas duas imagens são tocantes. O que temos agora é a exibição perfeita de imagem, título do blog e uma pequena introdução sobre o que se trata o seu blog. No entanto, eu ainda quero mais uma coisa aqui. Acho que do ponto de vista do usuário, é melhor ter um pequeno botão Leia Mais abaixo para que os usuários saibam exatamente onde clicar para ler este blog. Então, vamos voltar. Então, vou vir aqui e clicar na seção Editar. Se você quiser entrar aqui, você pode brincar com o layout diferente. Você pode tê-los lado a lado, então eles se sentam um ao lado do outro. Novamente, é trazido de volta nos tamanhos de fonte originais que estavam lá. E escolha o que você quer e, em seguida, você pode editá-lo. Blog de alvenaria. Bem, é assim que temos a imagem quadrada na parte superior com o texto abaixo. Isso parece muito legal. Mas eu não gosto da maneira como as coisas não se alinham nisso. Vou voltar ao que tínhamos originalmente, a largura alternada lado a lado, cheia, infeliz com isso. Imagens. Bem, se você quiser um pouco menores, brinque com isso aqui. Mas, para ser honesto, estou feliz com a praça. Eu acho que esse é um bom layout, dá um bom espaço para respirar na parte superior e inferior aqui. Então, novamente, jogue o alinhamento do texto aqui, quer você queira mostrar o trecho ou se você não quer mostrar ao especialista, mas eu definitivamente quero isso lá dentro. Em seguida, leia mais link. Esse é o que eu quero. Mostre isso. Lá vamos nós. Ou seja, isso é sublinhado. Os usuários sabem que clique nisso para levá-los até o bloco. Isso é perfeito. Estou muito, muito feliz com o layout desta página. Como sempre, você também pode alterar a cor do fundo aqui, entrar em cores se quiser no amarelo com texto preto. Isso também parece legal. O que você acha que funciona para o seu site com base na paleta de cores que escolhemos anteriormente. Mas vou ficar com o rosa brilhante. Esta é a parte principal do nosso site, e essa é a cor principal, minha cor primária que estamos usando no botão de navegação de cabeçalho lá. Então, vou ficar com isso. Ok, então aqui em cima e salve. O que vem com o modelo é para blogs que já foram feitos. Não queremos usá-los. Vamos excluí-los. Mas antes de tudo, vamos clicar no primeiro e ver como ele se parece. Ok, então novamente, isso está captando o estilo inicial e os elementos de design iniciais dos modelos. Vou ter que mudar algumas coisas aqui. Como você pode ver, ele está usando a fonte original que acompanha o modelo. Então, vamos entrar aqui e editar. Clique aqui para editar a seção. As mesmas opções aqui como sempre. Se você quiser brincar com a largura desta página, venha aqui, defina para estreitar. Você pode ter média, ainda mais ampla, a forma como ela preenche a página inteira. Se você quiser o alinhamento do texto, se quiser tudo centralizado, escolha isso aqui. Gosto do jeito que tínhamos estreito, e eu meio que gostei que esse texto fosse deixado alinhado. Vou colocar isso de volta em como foi. Estou feliz com tudo que meta-descrição. Bem, isso novamente, está usando a data. Mas o que eu quero fazer aqui é o mesmo que fiz na página inicial. Quero que seja o catalisador. Quando clico nisso, nada aparece ainda e mostrarei como, onde e por quê. Você deve mudar isso muito em breve. Mas eu quero tirar a data. Não acho que a data em que isso foi colocado seja importante para o meu site. Talvez seja para o seu. Escolha o que você acha que funciona melhor para o seu site. E vou desligar a data. Parece em branco no momento. Mas quando colocamos em categorias que exibirão, novamente, cores, mude o plano de fundo aqui se você quiser escolher o que funciona para você, mas eu vou ficar com o rosa que quer ter na página do blog ainda deve ser exibida assim quando as pessoas chegam ao meu blog. Certo, então estou feliz com tudo lá. Mas o que eu preciso mudar é a fonte usada aqui, a fonte do corpo. Estou muito feliz com isso. Isso é apenas pegar o parágrafo normal. No entanto, isso aqui está usando uma fonte diferente do modelo original antigo. Quero a mesma fonte de cabeçalho que usamos em outro lugar do site. Então, novamente, vou clicar aqui nos estilos do site, acessar fontes, realçar esse texto e depois descer para atribuir estilos. Então, como você pode ver aqui, isso é o que editamos anteriormente. Era o título do site, o título do site móvel e a navegação do site. Esses elementos que você pode ver aqui, o que queremos editar agora é a postagem do blog. Então, vamos entrar no título. Está personalizado agora, mas eu quero que sejam nossos títulos originais. Então, vamos mudá-lo de volta para esse tamanho enquanto eu posso escolher um dos que já escolhemos, título três continua funcionando para mim. Gosto do tamanho disso, então vou mantê-lo como está. Agora, isso parece ótimo. Ele está usando nossa fonte de título regular, fonte parágrafo regular. Então, vamos voltar. Mais uma parte, porém, foi o metta, que apareceu acima aqui. Agora acabei de tirar isso. Bem, vamos entrar na matéria. E vamos mudar a família de fontes para o Puffin arcade Chrome novamente. Você verá como isso parece em um minuto, mas vamos voltar. Tamanho Metta enquanto definimos isso como 1.7 na página do blog, vamos mudar isso para 1.7 novamente. Vou mostrar como isso parece em um minuto assim que configurarmos o primeiro blog. Mas você sempre pode voltar aqui e mudá-lo de qualquer maneira. Então, vamos voltar. Ok, em termos de exibição aqui, estou feliz com isso. O que você vê na parte inferior aqui é a navegação para o próximo blog. Isso mostrará o título dele e ele vai e voltará. E isso está usando nossa fonte de título normal. Então, vou manter isso como está. Do jeito que eu configurei este, todos os blogs aparecerão agora. Desta forma. Ele terá o mesmo espaçamento na página. Ele terá as mesmas fontes de título e a mesma cópia do corpo. Então agora vou mostrar a você como adicionar seus próprios blogs a esta página. Duas maneiras diferentes de fazer isso. Primeiro de tudo, podemos pegar um desses blogs já está aqui e editá-lo. Ou se quisermos começar com o nosso, basta clicar aqui no Plus. Vou começar mostrando a você como editar um que já está lá, apenas para lhe dar uma boa ideia sobre o que está configurado e como ele será exibido para os usuários que chegam ao seu site. Vamos pegar este primeiro aqui. É assim que parece no momento. E se eu clicar nos pontos aqui, posso alterar as configurações. Então, aqui estão várias configurações diferentes aqui e vamos apenas passar por elas uma para que eu possa mostrar o que precisa ser feito. Se os blogs da parte mais importante do seu site, certifique-se de que todos os elementos adicionados aqui sejam feitos corretamente. Primeiro de tudo, imagem, bem, isso é uma imagem de sabão. Queremos que outra imagem de videogames entre aqui. Então, remova a imagem. Vou começar escrevendo um blog sobre crise do tempo, o jogo arcade de tiro que eu adorava nos anos 90. Então, vou fazer o upload dessa imagem que salvei deste jogo. Vamos e agora saímos. Esta é a frase que aparece para todos em diferentes partes do seu site. Então, da página inicial para a página do blog, há uma frase simples e direta que explica claramente do que se trata o blog. Então eu já escrevi um trecho para a crise do tempo. A crise do tempo é uma primeira pessoa na Rails série de jogos arcade de tiro de armas de espionagem de Nam Co. introduzida em 1995. Então, apenas explica o que é o jogo quando ele saiu, quem o produziu, usa saber exatamente o que eles estão prestes a ler. Então, a seguir aqui, este é o URL do post. Isso é novamente usando o slug de URL que estava lá anteriormente, mas não quero que ele diga processo de fabricação de sabão. Quero que a postagem do blog diga crise temporal. Então, vou apenas copiar isso e colar aqui. Autor, bem, sou eu mesmo. Nós só configuramos um autor aqui. Sourceurl, não se preocupe com nada disso para esse tipo de coisa. Em seguida, entre em opções. Status. É aqui que você pode configurar se for um rascunho, algo que você está indo O que está acontecendo mais tarde, ou você pode definir uma data diferente na qual você gostaria que a postagem apareça. Só vou deixar este como publicado aqui. Não preciso mudar isso. Agora vamos voltar. é onde podemos adicionar tags e categorias. Talvez você queira adicionar tags às suas postagens. As categorias é a que estou olhando aqui é no momento, só terei um punhado de postagens no blog. Em um ano. Espero ter centenas deles. Quero ajudar os usuários a navegar pelo site e ler diferentes postagens de blog que são sobre diferentes áreas, dispositivos diferentes. Então, vamos clicar em categorias. O que vou escrever aqui é 990s, porque este é um videogame da década de 990. E então o que vou escrever é Arcade. Isso está me ajudando a dividir todas as postagens do meu blog. Se for dos anos oitenta ou usar a categoria da década de 1880. Se for arcade, arcade, obviamente se for Nintendo ou Sega, entrarei nessa categoria. Então, quando isso for feito, clique volta e, em seguida, venha aqui para a SEL. Mais uma vez, isso é apenas levá-lo o que estava lá anteriormente. Então, vamos mudar o título de SEO para crise temporal. Então eu estou colocando os mesmos trechos que coloquei anteriormente no SEO. Para aqueles de vocês que não sabem o que é SEO, esta é a Otimização de Mecanismo de Busca. E isso está tornando muito mais fácil para todas as postagens do seu blog e seu site geral aparecerem em pesquisas no Google. Isso é feito alterando o título e a descrição para algo que inclui palavras que eles procurariam. Se eles estão procurando por um post sobre crise de tempo que está aqui duas vezes. Portanto, é mais provável que você compre nas pesquisas do Google. Imagem social. Isso acontecerá se alguém estiver compartilhando sua postagem no blog nas redes sociais. Você não precisa de uma imagem aqui, mas você terá mais cliques se as pessoas puderem ver que é sobre também. Então, vamos adicionar exatamente a mesma imagem que acabamos de usar, toneladas de crise. Aqui vamos nós. Não se preocupe com compartilhamento e localização. Isso não é importante para o que estamos fazendo aqui. Então, vamos salvar este. Ok, então quando voltarmos a esta página, você verá que a categoria agora aparece acima do título do blog e eles estão usando fonte Accent muito peculiar. Então, o back-end da postagem do blog, tudo configurado, está tudo pronto para começar. O que precisamos fazer agora é editar o post inteiro. Então clique aqui em Editar. Agora, obviamente, a principal coisa errada aqui é o título da postagem. Vamos mudar isso para crise do tempo. Então aqui temos um vídeo. Eu meio que não quero que esse vídeo esteja lá. Se eu quiser fazer é começar com uma imagem. Faça upload de imagem. Mais uma vez, apenas usando a mesma imagem que usamos em outro lugar para crise temporal. Certo, isso parece legal. Então agora conhecemos o título da descrição, imagem de introdução e aqui está todo o texto. Isso é algo sobre sabonetes novamente. Então, vou destacar isso e colar em todos os textos que escrevi para crise temporal. É adicionado em algumas pequenas lacunas extras aqui. Só vou excluir essa lacuna. Essa lacuna, mantenha tudo junto. Só quero jogar a ele uma coisa extra que vou fazer em cada post. Quer ver isso em ação. Então, vou lançar um pequeno vídeo. Então, vou fazer é clicar aqui. Em vídeo. O que você pode fazer aqui é apenas pegar o link de um vídeo do YouTube e colá-lo aqui, tão simples assim. Então, se entrarmos no YouTube, aqui estão vários vídeos de crise de tempo que aparecem. Então, vou escolher este, que é uma longa jogada do jogo. O vídeo começará a ser reproduzido e, em seguida, basta entrar aqui para compartilhar e copiar o link que eles lhe dão aqui. E depois volte para o seu site e cole-o aqui. Procurando por isso localizado com sucesso. E lá vamos nós. É tão simples quanto isso. Agora temos uma postagem de blog que está configurada perfeitamente. Imagem, texto de introdução, vídeo, texto. Então este agora está configurado perfeitamente, venha aqui para salvar. Agora temos um que você verá aqui agora que tem o título correto e a miniatura correta para crise de tempo. É por isso que mostrei a você como editar um post que já estava lá. Agora que editamos esse, não quero que esses outros três estejam aqui. Então, vou pegar esses e depois apagar todos os três. Ok, então agora temos uma postagem no blog e, em seguida, temos duas maneiras diferentes de adicionar uma nova. Então clique aqui no anúncio e siga as mesmas instruções que acabei de lhe dar. Então, vamos colocar a imagem do título, pilha principal de texto e, em seguida, adicionar outro vídeo. Ok, agora meu Street Fighter 21 está perfeitamente configurado aqui. Então, vamos salvar isso. E ainda são rascunhos. Então, venha aqui para Configurações. Siga todas as mesmas regras para essas partes. Você blog já está configurado perfeitamente porque pegou o nome do título. Categorias de opções, anos 1990 também. E, como você pode ver, já escolheu essa categoria. Então, basta selecionar esse. Não adicione uma nova categoria porque ela já existe. Isso era popular na Nintendo. Então essa é uma nova categoria. Mais uma vez, siga as mesmas regras. Certifique-se de que isso esteja publicado agora. Siga as mesmas regras de SEO, imagem social, etc. E clique em Salvar. E agora ele exibe a Meta descrição aqui. Então, este é outro post perfeito. Então essa é uma maneira de adicionar uma nova. Outra maneira é que você pode clicar aqui e duplicar. Você pode pegar um post antigo que foi configurado exatamente da mesma maneira. Mas apenas certifique-se de estar ciente das mídias sociais, compartilha as saídas, a imagem em miniatura, tudo assim. E apenas certifique-se de não estar repetindo o que fez para outro cartaz. Acho que usar o sinal de mais e adicionar uma nova postagem é a melhor maneira de fazê-lo. Vá em frente e adicione algumas postagens diferentes no blog. Você não quer iniciar um novo site com apenas uma única postagem. Tenha alguns. Vou adicionar mais dois aqui. E depois analisaremos como a página inicial e o resto do site estão parecendo. Agora temos quatro blogs ao vivo. 12. Revisão do seu site: Ok, então aqui estou de volta à página do blog, na página geral do blog, e posso detectar alguns erros que fiz padrão para qualquer designer gráfico. Detecte um problema, entre e corrija. Então, antes de tudo, como você pode ver aqui, onde eu tenho a categoria chegando no topo aqui, Nintendo dos anos 1980. Ainda está mostrando a data em que eu não queria isso lá. Então, vamos pegar esse. Eu virei aqui para editar, editar a página, ver o que fiz de errado. Então, aqui em baixo, temos alinhamento de texto, etc. O conteúdo de metal primário é categorias porque eu tenho conteúdo de metal secundário como a data. Então, isso me mostra o que eu quero que esteja vazio. Se eu mudar isso para nenhum, lá vamos nós. A beleza disso é quando um usuário vem aqui, como você pode ver, isso é realmente um canal de ligação. Então, se alguém clicar nisso, levado para outra página que mostra todos os blogs da década de 1880. Enquanto se eles virem aqui e clicarem na Nintendo, isso mostrará todos os blogs da Nintendo. É por isso que é realmente útil ter isso na página do seu blog para ajudar as pessoas a navegar sozinhas. Então essa é uma solução rápida muito simples lá. O próximo. Você deve ter notado isso no topo aqui na barra de navegação, ou cada palavra é como se fosse atingida. Eu não quero isso porque isso quase sugere que não é a página ao vivo, como se não estivesse pronta ou algo assim. Eu quero que a linha fique sentada embaixo dela. Então, obviamente, configurei algo incorretamente aqui. Então, vamos subir aqui e alterar os estilos do site. Algo de errado que eu fiz aqui. Então, vou falar com fontes e clicar neste. Portanto, isso é navegação no site. Então tudo parecia correto Aqui, a fonte correta, o peso correto, pode deixar isso cair. Na verdade, acho que gosto dos 500 lá. A coisa do designer. Mude de ideia mais tarde. Acho que é este aqui, altura da linha. Acho que esse é o problema porque eu o tenho definido como 0 e deve ser, sim, é isso aí. Isso é ótimo. O que eu quero é que essa linha fique debaixo da palavra. Então, abaixo do nome da página em que estamos, acho que 1.5 lá. Isso é bom. Agora que corrigi meus problemas, vou dar uma olhada em todo o site. Então, vamos clicar no logotipo aqui e ir para a página inicial. Este cabeçalho ainda, é ótimo e perfeito. Este herói de introdução parece ótimo. Agora aqui vamos nós. É aqui que isso mudou. Agora temos nossos próprios blogs pessoais aqui, e você pode ter seus próprios blogs pessoais aqui para o que é feito é listá-los em ordem de data, mesmo que não estejamos dizendo quais dados eles aparecem, eles estão sendo exibidos na ordem de data. Ou seja, se alguém continuar chegando ao seu site toda semana e você adicionar uma nova postagem de blog toda semana. Esse será o primeiro exibido aqui. Em termos de usar a barra de navegação aqui, que alterna entre posts atuais e antigos. E, obviamente, temos quatro no total. Agora. Temos Pac-Man, Super Mario, Street Fighter dois e crise temporal, e eles estão em ordem de data. Outra ótima ferramenta de navegação para ajudar os usuários a pesquisar. Aqui embaixo, onde temos links para essas postagens individuais do blog. Você pode clicar na imagem e isso também o levará. Você pode clicar nas categorias para ver apenas blogs nessa categoria. Então, vamos clicar na Nintendo. Isso está apenas me mostrando as postagens da Nintendo. Eu só fiz dois desses, Super Mario três Street Fighter dois, esses são os únicos que estão exibindo, estou interessado na década de 1980. Clique nisso. Apenas na escala Pac-Man Super Mario dos anos 1980. Então, vamos voltar. Então, isso parece absolutamente ótimo. Adoro nos blogs aqui que mostramos todos de uma só vez. Em seguida, nossa imagem de introdução e links para a página de contato e nosso rodapé. Perfeito, eu adoro a forma como este site está procurando agora. Vamos apenas para o celular. Tela cheia. Sim, isso parece ótimo. Aqui temos a navegação aqui que mostra duas postagens de blog de uma só vez e eu posso rolar de volta pelos mais antigos, finalizá-lo ou blogs. Claro que joga um pinball malvado. Alterne para baixo para uma única imagem de retrato. Perfeito, mas aquele cara no meio, Mario, Luigi, ele está ótimo lá agora. Entre em contato. Em seguida, o rodapé. Certo, isso parece brilhante. Vamos dar uma olhada na página do blog. Também é perfeito. Esta linha agora está sentada embaixo da palavra blog. Aqui estão todas as nossas postagens no blog e esse texto é ocupado na quantidade perfeita de espaço. Categoria, título, exercer, ler mais e uma imagem quadrada em seu espaço de respiração acima e abaixo. Isso parece lindo. Se clicarmos em qualquer blog, você pode clicar na imagem, ler mais ou no título. Isso o levará a esta postagem do blog mostrando todo o conteúdo. Então, se você quiser rolar para trás e para a frente através de postagens antigas e novas, você tem essa navegação no final de cada postagem do blog também. Então, somos Street Fighter dois. Você verá o que antes era Super Mario três depois desse tempo crise. Então a página inicial parece ótima. página do blog parece ótima. Vamos ver a página Sobre. Adoro essa pequena animação lá. Adorei esse fundo, muito sutil, mas um pouco de profundidade extra para esta página. Leia mais tickets até a página do blog. Bons momentos. Você acabou de ver o pequeno ícone apenas exibindo em uma animação sutil e legal lá. Isso parece ótimo. Então, última página, contato, que podemos passar clicando neste botão ou clique e entre em contato. Agora somos outra boa animação de introdução lá. Não há mais curvas nesta imagem, mas uma ótima página Fale Conosco com um endereço de e-mail de chamada à ação e levando as pessoas até nossas páginas de mídia social. Lá vamos nós. Agora temos um site bonito com uma página inicial animada incrível e legal com muita ação, muitos elementos interessantes para as pessoas clicarem. de blog com aparência legal Sobre a página e a página de contato. Então, espero que você tenha acompanhado todas essas lições de perto. E eu passei por isso passo a passo comigo. E agora você tem seu próprio site incrível que se parece exatamente com este ou seu próprio site pessoal e incrível. Se você tiver isso, publique aqui na seção do projeto. E eu entrarei em contato com você com meus comentários sobre isso o mais rápido possível. 13. Extras do Squarespace: Então, agora, você deve ter um site incrível com o qual você está realmente, muito feliz. Ainda estamos usando apenas a versão de teste. Então, ninguém mais no mundo pode realmente ver este site, só você. Mas se você quiser fazê-lo viver para o mundo inteiro ver, muito simples. Basta clicar no botão de inscrição aqui e escolher o pacote que funciona melhor para você, pois é apenas um site pessoal e muito pequeno, provavelmente este que é o por mês, funcionará para você. Você verá aqui também que inclui um domínio personalizado gratuito. Vou te mostrar o que isso significa. Então, quando entramos aqui e vamos para Configurações, clique nos domínios que você vê aqui que diz girafa de críquete, H4, dn, et cetera. Esse é o nome de domínio do nosso site até agora. Então, se você quiser compartilhá-lo com alguém, você está compartilhando esse URL. Agora isso não é legal e não tem nada a ver com o que estamos escrevendo aqui. Mas se você se inscrever no Squarespace, você pode escolher seu próprio pessoal, e isso está tudo incluído nas culturas gerais. Então, se eu clicar aqui, obtém um domínio. Ele pegará o título do seu site primeiro e mostrará se isso está disponível como um nome de domínio. Infelizmente, o Gameover.com não está disponível. Não sou a primeira pessoa a pensar nisso. Existem diferentes variações do que estão disponíveis. Você poderia ter um jogo sobre vídeo ou até mesmo ninja do GameOver, mas eu não quero isso. Eu quero just.com no final porque é com isso que somos comuns. Então, vamos tentar outra coisa. Talvez game over log n. Sim, GameOver blog.com que está disponível. Então, vou escolher esse. Então, quando você tem toda essa configuração, você tem um site ao vivo e ele está usando um nome de domínio adequado. Se você voltar aqui, você pode brincar com tudo aqui, como eu disse anteriormente, basta dar uma olhada em como eu disse anteriormente, tudo, ver o que vai funcionar para você. Em termos de marketing, você pode configurar campanhas de e-mail. Você pode trabalhar em SEO, otimização de mecanismos de pesquisa e promover isso em suas próprias mídias sociais. Venha aqui e você pode fazer algumas histórias do Instagram, etc. Lá vai você. Agora você tem um site incrível que você mesmo construiu usando seu estilo. Está ativo, tem um nome de domínio. Você pode promovê-lo e construí-lo e apenas construir mais e mais seguidores e se tornar o site mais popular do mundo, ou pelo menos o site mais popular do mundo. Isso é sobre jogos retrô de 1985 a 95. Felicidades. 14. Agradecimento: Obrigado por assistir a toda essa aula. Espero que isso tenha ensinado muito sobre design de sites. E agora você tem um site incrível que você quer me mostrar. Uau, se você fizer isso, publique-o aqui na seção do projeto, e eu entrarei em contato com você com meu feedback o mais rápido possível. Além disso, se você tiver alguma dúvida sobre qualquer coisa que eu tenha abordado em toda a turma postada aqui na seção de discussão. E novamente, responderei o mais rápido possível . Enquanto você está lá. Certifique-se de clicar no meu nome e ver todo o meu perfil. Aqui. Você encontrará algumas aulas sobre como usar o construtor de páginas Elementor com WordPress que podem parecer um pouco complexas, mas vou falar sobre tudo o que você precisa saber se você está procurando construir suas habilidades de web design. Assista a isso. Também. Certifique-se de me seguir e depois descobrirá assim que eu enviar uma nova classe. Impressionante, tenha um ótimo dia.