Você pode criar um site de portfólio bonito no Squarespace em 30 minutos (pacote de fotos gratuito incluído) | AJ Burt | Skillshare

Velocidade de reprodução


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Você pode criar um site de portfólio bonito no Squarespace em 30 minutos (pacote de fotos gratuito incluído)

teacher avatar AJ Burt, Learning is Living Better

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

8 aulas (45 min)
    • 1. Apresentação e projeto

      1:05
    • 2. Pacote de fotos grátis da morte para a foto de Stock

      0:46
    • 3. Começar: Pesquisa e modelos

      4:33
    • 4. Como adicionar conteúdo: configurar sua interface, carregar seu trabalho

      11:01
    • 5. Como adicionar conteúdo: vender produtos, criar anúncios de blog e muito mais!

      7:36
    • 6. Essencial de design de Squarespace

      12:17
    • 7. Deep in Design: Limites de modelo passado

      7:40
    • 8. Parabéns e obrigado!

      0:19
  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

2.405

Estudantes

1

Projeto

Sobre este curso

"Eu já uso o Squareaspace há dois anos, mas este é um ótimo curso e forneceu alguma ideia de que eu não estava consciente. Obrigado!" – Michelle R

Uma das perguntas mais comuns que eu recebo das pessoas é como elas podem entrar no web design. Ao contrário da crença popular, o desenvolvimento de conhecimento de codificação não é mais necessário para fazer isso (não tentando desacreditar a importância da codificação, mas para muitas pessoas, não é necessário cumprir seus objetivos no web design). O Squarspace é uma das minhas plataformas favoritas para introduzir pessoas ao web design por causa de sua facilidade de uso e modelos profissionais e bem desenhados.

O objetivo deste curso é levá-lo para o Squarespace e começar a desenhar. Não vamos entrar em muitos detalhes. O objetivo é mostrar como é fácil começar a usar, não desanimar você com informações. Dito isto, você será introduzido a algumas práticas recomendadas de UX/IU muito básicas e até mesmo apresentado a como você pode usar snippets CSS para aprimorar seu design (novamente, nenhum código real é necessário).

Conheça seu professor

Teacher Profile Image

AJ Burt

Learning is Living Better

Professor

Learning is my passion. I've always pursued learning outside of traditional academic settings. I've taught myself programming, graphic design, marketing, business planning, investing, cooking, ballroom dancing, yoga, animation, and so much more without a professional teacher and by paying next to nothing. I've used this to turn my degree in anthropology to a career in business and marketing, and it's been so rewarding yet easy to do that I realized I simply had to share it with others. That's why I signed up to teach on Skillshare.

Visualizar o perfil completo

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%
Arquivo de avaliações

Em outubro de 2018, atualizamos nosso sistema de avaliações para melhorar a forma como coletamos feedback. Abaixo estão as avaliações escritas antes dessa atualização.

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui cursos curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Apresentação e projeto: Oi. O meu nome é mais profundo e estou tão entusiasmada por finalmente partilhar isto. Uma das perguntas mais comuns que recebo das pessoas é como eu entro em um design ou eu preciso deste determinado site. Pode desenhá-lo para mim? E costumo dizer-lhes que não, não porque não quero ajudá-los. Porque o Web design é realmente mais acessível do que nunca para a pessoa comum. E sinto que as ferramentas estão lá fora. Você realmente não deveria estar pagando por algo. Você pode fazer você mesmo nesta aula. Vou apresentar-lhe muito rapidamente como você pode usar o espaço quadrado. Construa um portfólio para você mesmo. Você pode realmente fazê-lo e amar a partir de 30 minutos. Não é tão difícil, e ele não vai precisar de codificação. O projeto da turma será tudo o que você tem para fazer junto com o vídeo. Você pode usar o mesmo tempo, mas eu faço ou você pode encontrar um dos seus. E se você quiser criar algo diferente de um portfólio, tudo bem. Eu só pensei que seria bom, para seus usuários, em particular, ter um lugar para mostrar seu trabalho, especialmente na Web. Então é isso mesmo. Se eu fizesse isso 2. Pacote de fotos grátis da morte para a foto de Stock: Então todas as fotos neste site são da morte para a foto stock. Na verdade, me deparei com eles aqui por compartilhamento de habilidades em um projeto que, na verdade, seus criadores tinham enviado para uma das aulas que eu estava fazendo. Eu usei sua versão gratuita por muito tempo. Os pacotes de fotos mensais que eles enviam. E eu gostei tanto que acabei apenas atualizando e recebendo seu serviço de assinatura. Eles foram muito graciosos e doaram um pacote de fotos grátis para vocês usarem. Você pode seguir o link aqui para acessá-lo. A senha é apenas escala. Compartilhe todas as letras minúsculas, sem espaços. E se você gosta do pacote de fotos, se você gosta das fotos que você vê no site, certifique-se de se inscrever em seu e-mail mensal, que é gratuito. E se você realmente gosta, vá em frente e tente o plano de assinatura deles. 3. Começar: Pesquisa e modelos: Então, uma das coisas mais importantes que você pode fazer começando e projetar um site é a pesquisa. E você sabe, muitas vezes isso pode ser visto como a parte menos UNP do Web design. Mas é muito importante, e você vai agradecer a si mesmo mais tarde porque se você não fizer isso, você vai para todo esse trabalho de projetar seu site. E então, uma vez terminado, você começará a olhar em volta para sua competição e perceberá todas essas coisas que você poderia ter feito de forma diferente. E então você vai acabar voltando e criando mais trabalho para si mesmo. Então, logo de cara, um, descobrir primeiro de tudo, que tipo de sites de categoria em? Então, para este projeto, nós vamos estar fazendo um portfólio de fotografia e apenas tipo de olhar em volta para o que outras pessoas com sites semelhantes estão fazendo. Está totalmente bem. O Teoh. Pegue as ideias de outras pessoas e reproduza-as. Você vai descobrir quando começar a fazer isso que muitas pessoas estão fazendo a mesma coisa, e tudo bem. Normalmente, quando as pessoas no mesmo campo estão fazendo a mesma coisa, é porque algo sobre ele está funcionando e copiando que não é uma coisa ruim. Você pode ter sua própria noite em qualquer site ajustando outras coisas. Acho que as coisas que acabam te distinguindo de maneiras importantes. Então eu já passei e procurei no Google apenas para as melhores louvores de moda do blog de fotografia top e olhando ao redor, uma das coisas que eu estou realmente percebendo é que muitos desses logs estão usando grades. O que eu acho que é um visual muito bonito. Então, vamos ao Squarespace agora, e vamos olhar e ver quais modelos dizem que podem caber nesse layout geral . Então nós vamos começar aqui e você vai ver imediatamente eles são essas pequenas categorias e eles realmente têm uma categoria para portfólio. Então, vamos apenas clicar nisso e logo o bastão vai ver que eles têm 123 pés sobre os ladrões, uh, como o olhar deste. Como eu tenho qualquer borda em torno das fotos como algumas dessas outras fazem em? Eu gosto do fato de que se estende para toda a tela, e é o mais usado para essa afirmação. Hum, vamos em frente e clicar nisso no espaço de pontuação. Você pode realmente clicar direito na tela do computador e eles vão levá-lo para uma visualização de vida do site. Então vemos que aqui é algum tipo de efeitos agradáveis sobre o pairamento. Quando você tem uma imagem bateu fora algumas dessas outras praias, ele tem algumas páginas normais bastante padrão, que está pronto. Poderíamos trabalhar com isso. Então, sim, eu acho que este será um grande ser para usar neste projeto. Então vamos apenas bater. Comece com este design e o espaço quadrado vai pedir-lhe para colocar em suas informações pessoais para obter a sua comunidade acampamento rapidamente. E lá vamos nós olhando durante o mesmo eu acertei o seu propósito ou apenas fazendo algum pessoal. Mas também queremos vender algumas de nossas digitais neste site. Vamos bater carros por isso pelo mesmo título. Coloque o que quiser. Você pode colocar seu nome se você tiver uma idéia criativa lá. Não vamos colocar nada nas informações de negócios para homens, mas se você fizer, você tem, tipo, um estúdio ou local de trabalho ou algo que você queira ter listado no seu site. Não vamos colocar nada nas informações de negócios para homens, mas se você fizer, você tem, tipo, tipo, Vá em frente e faça isso se tiver uma caixa de papel. Isso foi bem fácil. Então agora temos este modelo tudo configurado. E nós poderíamos morrer se certo em qualquer coisa. 4. Como adicionar conteúdo: configurar sua interface, carregar seu trabalho: Na verdade, na vista do casamento, o que significa que podemos clicar nas coisas e mudá-las. Você pode alternar entre o tudo que você e a visualização de vida do seu site, apenas lutando contra a fuga. Mas então vamos fazer isso. Você vê, ele se move para cima, e agora tudo é clicável, assim como normalmente em seu site escapar para voltar. E você também pode realmente clicar sobre isso. Estão no canto superior esquerdo. Alterne que suas visualizações também. As únicas duas seções que precisaremos usar neste curso são as páginas da seção de ciências. As únicas duas seções que precisaremos usar neste curso são as páginas da seção de A seção da página é todas as páginas do seu site. Esta primeira seção principal de navegação é o que vai aparecer aqui nesta barra superior e a seção não vinculada são gaiolas que você não quer ser ligado em sua barra superior. Vamos pular direto para a seção de design e começar a mudar algumas coisas. O que é substituir este texto aqui com o nosso logotipo e o meu carro? Uh, provavelmente é uma boa idéia se você pode obter um ícone em forma de quadrado para isso, e há muitos sites ainda geram esses para você. Você pode apenas procurar no Google por um gerador Clinton. Então lá nós dio eu não vou um slogan em, mas se você quiser fazer isso iria mostrar logo abaixo deste neste modelo. Então acho que estamos bem lá. Vamos voltar. Então outra coisa que eu queria escrever da cama é removida. Este poder por seção de espaço quadrado. Vamos em frente e tirar isso. Vamos ver. E então você vai notar é que eu tenho ela sobre diferentes seções vê nele. Mas este papai e praticamente qualquer coisa que você pode clicar em você pode apenas adicionar. Isso realmente significava, você vê, se clicarmos no logotipo do botão editar, ele nos leva de volta para a página onde nós carregamos o logotipo em primeiro lugar. Portanto, há muitas maneiras de chegar ao mesmo lugar no espaço quadrado, o que é realmente útil. Outra coisa que eu quero fazer imediatamente é com todos esses modelos. O Squarespace tem muitos deles vêm com o tipo de páginas de demonstração pré-instaladas, e nós realmente não precisamos de nenhuma delas. Às vezes é útil manter a página de carne lida. Apenas um você está indo sobre mudar as coisas no site, você pode achar que você quer voltar referências. Vamos deixar isso no “não levar” para a seção que está feito. Vamos passar por essa pista todos os outros. E então agora tudo o que nos resta com esta página inicial principal e o espaço quadrado realmente nos deixaria excluir essa página inicial até que você faça uma nova. Então vamos fazer isso rapidinho. Hum, quando você aperta este botão mais, ele leva você para uma barra de ferramentas de página nova, e você tem um monte de opções aqui. Os únicos realmente vão estar usando neste tutorial nossa página, galeria blawg e índice. Mas sinta-se livre para explorar esses outros. Então, para a página inicial, você pode ver aqui que lá você sentiu home page para isso simplesmente faz ele indexar. Então vamos usar isso, sim, vamos chamar esse recurso de trabalho quando você tem ela sobre isso no painel. Aqui, você verá este ícone de engrenagem, e se você clicar sobre isso, ele vai trazer este outro menu que vamos definir é a página inicial confirmar, e então praticamente qualquer vez que você mudar algo no Squarespace, Você vai precisar se lembrar de bater em salvar, mas o fim. Vamos fazer isso. E então agora temos esse índice de trabalho de recurso e você vê que o especialista é aquele pequeno ícone home , que significa que é uma home page sempre que ele pode entrar e excluir o antigo impeach. Portanto, há algumas outras páginas com as quais queremos trabalhar nesta classe. Fendas em uma nova página gritou. E ele realmente criou isso no índice, que ele concedeu por aquela pequena linha em forma de L ali. Então vamos movê-lo para fora disso porque não queremos isso na seção inicial. Vamos fazer uma nova página. Vai ser um quarteirão. Vamos dar notícias. Tire isso também. vamos Finalmente, adicionar uma página de produto para vender o nosso príncipe. Vamos chamar este príncipe, e também é muito fácil mudar a ordem destes em nosso site. Então eu acho que provavelmente faz dele um sentido de que temos sobre primeiro dar-lhe um segundo e depois imprimir o último. Outra coisa que é muito boa de ter em sua navegação, algum tipo de link de contato comigo. , Na verdade,para este site específico, queria fazer algo um pouco diferente. Eu quero ter um botão na página em cada página que você pode clicar que vai permitir que você marque uma consulta com este fotógrafo. Hum, então vamos realmente colocar isso no instalador aqui. Sempre que estiver editando uma página no espaço quadrado, verá esse tipo de bolha flutuante. Sempre que estiver editando uma página no espaço quadrado, E quando você clicar sobre isso, ele permitirá que você insira conteúdo. Blocos e blocos de conteúdo são uma espécie de blocos de construção realmente de um site squarespace e você pode ver que há apenas uma tonelada de opções aqui e talvez alguém no futuro eu vou fazer uma classe que vai sobre cada um deles com a finalidade de nesta classe. E realmente, para o propósito desses sites, você só vai usar três ou quatro Andi para este específico. Squarespace realmente construiu em forma em função. Então vamos fazer isso e essa pequena dica de ferramenta aparece. Vamos chamar isto de procurar por estes eram os campos. Os formulários vão acontecer. Você pode vê-los aqui para nomear e-mail, endereço, endereço, mensagem de assunto. Eu acho que há um papel bastante apropriado para este anúncio Deixa sair Salah, uma caixa de seleção que lhes permite escolher os links de tempo. Acabei de ligar, e podemos colocar algumas opções. Vamos a 15 minutos, $50 30 $100 200 e tudo bem pode fazer deste um campo obrigatório. Então, aparecem também há uma guia de armazenamento. Você pode ver que ele automaticamente sentimentos envios desses formulários para qualquer e-mail com o qual você se inscreveu para suas receitas. É muito fácil mudar isso se quiser apertar o botão X, mas vamos deixar como está. Você também pode ir para o Google Docks, que é realmente muito útil muitas vezes quando eu tenho várias pessoas gerenciando um site em que temos estes formulários tegra. Vou apenas criar um formulário que nos permita registrar todos os envios que recebemos, que pode ser muito útil. Você também pode se conectar ao correio Chimpanzé. Se você quer alguma opção, adicione pessoas em suas listas de discussão, mas nós não vamos realmente fazer isso. Está além do escopo desta classe, então vamos avançar. A maior parte desta fraqueza. Deixe o mesmo centro. Você pode vê-lo. Mova-se para lá automaticamente, uh, postou uma mensagem. Vamos mudar para pensar em você. E, finalmente, você pode ver agora que o formulário está realmente sendo inserido no instalador, o que nós realmente não queremos, porque isso vai ocupar toda a nossa página e não deixar ninguém ver o conteúdo real. Então, já que ele está em nossa forma, nós realmente vamos entrar em um modo de caixa branca malvada. Mas você pode ver que leva toda a fazenda e dorme lá dentro. E as pessoas só estavam dizendo “plano”. E então, para a última parte disso, você pode ver que ainda há esse pequeno bloco de texto aqui embaixo de onde o texto rígido por quadrado estava quando criamos isso pela primeira vez. Então vamos apenas ir em frente e clicar e segurar isso e você verá este ícone de lixo aparece na parte inferior. Se nos arrastarmos até lá e deixarmos ir, já se foi. Vamos salvar e lá vamos nós. Então, agora que temos esse tipo de interface de usuário bare bones configurado, vamos entrar e começar a ter algum conteúdo real. Eu sempre acho que é mais fácil de realmente adicionar no site sustentável escalada antes começar a passar e ajustar o design. Porque se você não fizer isso, você geralmente fará esse design entrar e sair do conteúdo e descobrir que você precisa voltar . Tweak espera do projeto mais tarde, e nós realmente queremos um minuto, meu lado, tanto quanto possível. Não queremos nos repetir e fazer as mesmas coisas uma e outra vez, porque isso é apenas perder tempo. Então, vamos apenas começar pela adição de imagens filho dedo do pé são destaque seção de trabalho. Nós vamos fazer isso criando em galerias, e isso é realmente um processo um pouco longo carregando todas essas imagens porque todas as imagens que eu tenho são realmente muito alta rez, então eles podem levar um tempo para fazer upload. Então eu estou realmente apenas indo para a frente desta seção, então não é para você para baixo com isso 5. Como adicionar conteúdo: vender produtos, criar anúncios de blog e muito mais!: Certo, agora que temos essa primeira rodada de imagens carregadas, podemos ver agora que temos essa primeira rodada de imagens carregadas, podemos vercomo serão os produtos finais na página inicial. Então vamos fugir. Estou de volta à seção de tudo e vamos para a nossa página sobre. Então eu só recebo inserir algum texto de espaço reservado aqui. Mesmo que eu recomendo para o seu site real, você digita o que você realmente vai querer em sua página sobre, porque isso vai tornar mais fácil de projetar em quatro minutos. Há duas maneiras de se basear no texto para o espaço quadrado sem carregar a formatação dotexto original. Há duas maneiras de se basear no texto para o espaço quadrado sem carregar a formatação do Você pode pressionar este ritmo botão exibindo texto, ou você pode apenas pressionar a mudança de controle Oriente Médio ele lá dentro. Vamos separar esses parágrafos. Vamos realmente transformar esta primeira frase em uma citação, e podemos fazer isso colocando esta bolha aqui novamente para fazer uma nova busca de bloco para o bloco de cotações. Mantenha-o dentro, ele aplicado, e isso está parecendo um pouco de aviões. Vamos em frente e adicionar uma imagem lá de duas maneiras. By the way, para fazer upload de imagens para o espaço quadrado, você geralmente pode clicar em uma imagem Ou você pode ir para a pasta em seu computador e apenas regular lá, que é útil às vezes. Ok, vamos aplicar lá e ele está inserido em cima de todo o texto. E eu realmente não acho que nós queremos ter essa imagem enorme apenas sentado ali. Vamos arrastá-lo para o lado. E no Squarespace, você pode clicar e segurar em blocos para arrastá-los, e essas linhas aparecerão para que você possa ver onde eles vão. Então isso se alinha com o lado Sophie. Sinto muito mesmo. Então ele vai colocá-lo lá. Vamos dar a esse texto um pouco mais de espaço para respirar assim você pode clicar no meio aqui, segurar para arrastar. Vamos dar a esse texto um pouco mais de espaço para respirar assim você pode clicar no meio aqui, Ótima. E finalmente, vamos adicionar mais um bloco aqui. Procure o apenas uma espécie de um pouco divertido Um monte de páginas de contato têm isso. Agora vamos manter os rótulos aplicados. Fique um pouco, mesmo incrível. E aqui está a nossa página sobre. Vamos ao noticiário agora que você vai se lembrar. Este é o nosso blog, e eu só vou mostrar a vocês como é fácil ter um post preto para que na verdade seja duas maneiras de fazê-lo. Você pode ir para a página do painel aqui e bater este lugar ferido. Ou você pode simplesmente clicar na página na navegação do seu site e Hadad Post. Então vamos fazer isso. Sentou-se no nosso título. Um pouco mais de texto de espaço reservado. Vamos lembrar de colocar este texto simples para que nós perdemos que antes de ter e eu disse em outra imagem, é sempre uma boa idéia, a propósito, para incluir algum tipo de imagem com seus posts de bloco para que quando você está compartilhando ou o que outras pessoas estão esperançosamente compartilhando com as mídias sociais, ele acompanha esses links do mar, como no Facebook e Twitter e lugares como esse. Então nós para isso para carregar, e esse tipo de é este. Eu sei. Se, por alguma razão, você realmente não quer incluir uma imagem no corpo principal do seu sangue, você também pode rever suas opções e enviá-la como um homem. Assim, não aparecerá no corpo real. Se você é azul preto e ele careca Tweedle ainda mostrar que você vai notar que há algumas outras opções aqui, e nós realmente não vamos nos preocupar com este grupo deste curso, mas há algumas coisas legais aqui. Você também pode ver o CEP rasgar contas sociais dedo do pé automaticamente. Publique isso sempre que estiver ao vivo no seu site para que você possa postar no Facebook ou Twitter ou o que quer que você use. Publique isso sempre que estiver ao vivo no seu site para que você possa postar no Facebook ou Twitter ou Mas mais uma vez, isso é mais do que bom com este cavalo. A Vamos bater salvar publicado para torná-lo vivo instantaneamente, e você pode fazer o mesmo aqui que você poderia fazer com as galerias. Você pode configurá-lo agendado ou salvá-lo como rascunho. Certo? Então agora temos isso para a última seção de conteúdo. Vamos falar com o Prince. Nós vamos realmente estar montando uma loja aqui, então vamos entrar e na nossa primeira imagem de produto. Isto, mas disse em uma imprensa, disse que muito visível. Como você pode ver aqui, há muitas informações adicionais que você pode incluir como suas políticas de envio. Você poderia fazer um formulário que, por exemplo, alimentaria por exemplo, seu chimpanzé do correio se você quiser. Eu disse outras opções. Ele era um costume, mas rótulo novamente. Você pode postar automaticamente em suas contas sociais, mas por agora, eu acho que isso vai funcionar para nós. Vamos apenas salvar. E, a propósito, quando você clicar nesse botão de adição, você notará que existem, na verdade, algumas opções diferentes. Se você vai estar enviando fisicamente, algo vai físico, obviamente digital vai enviar um arquivo para a ponta de fresagem. E o serviço é apenas uma categoria genérica para tudo o resto onde nada está sendo enviado e a coisa está sendo transferida digitalmente. Uh, então, sim, nós temos a nossa primeira impressão digital configurada. Eu vou e agora e só enviar mais alguns vídeos e senha. Ok, agora, como você vê, nós temos todo o nosso conteúdo finalmente configurado. Então vamos para a próxima seção, e vamos realmente começar a fazer algum design. 6. Essencial de design de Squarespace: Ok, então agora que passamos e adicionamos o conteúdo em nosso site, pule para o painel de design aqui. Um argumento. Comece a mudar a aparência do nosso site. Então você vai se lembrar. Nós carregamos nossos três locais. Esta seção. Vamos pular essa seção de modelo. Tudo o que é é um lugar onde você pode alterar seu modelo geral se você quiser fazer isso. Mas não precisamos fazer isso. Então é restrito o editor de estilo. Ei, e você vê logo de cara que há um monte de coisas com que você pode mexer. E vamos começar do início aqui. Portanto, esta primeira opção é cor de fundo. Vamos começar a jogar com ele e ver o que muda parece que está mudando acor de fundo do real, uh,conteúdo principal na página, e os padrões de branco realmente querem virar Vamos começar a jogar com ele e ver o que muda parece que está mudando a cor de fundo do real, uh, conteúdo principal na página, ele para baixo apenas um pouquinho. Tenha um cabeçalho bonito e corajoso no rodapé. Você pode ver que isso está mudando aquela barra de cima lá, e a barra de baixo para É apenas um pouco mais Laghi. Quero manter isto branco, mas não perfeitamente. Então vamos pegar o que parece bom. Border Teller não parece que isso esteja realmente mudando nada nisso. Espadas. Vamos pular isso por enquanto. Deixe-o no logotipo preto Altura da imagem. É óbvio que está a mudar a cabeça do nosso logótipo um pouco para baixo. Sim, título do site Telefone Subtitle Farm. É o que estaria aqui se não usássemos logotipos. Vamos pular esses. Dá-te a opção disso. O logotipo à esquerda ou à direita. Acha que é uma boa ideia? Dependeu da esquerda porque é isso que a maioria dos sites usa. E apenas a partir de uma experiência de usuário, um de vocês. É certamente bom ir com o que os usuários familiarizados com que é colocado à esquerda lá, posição de cabeçalho fixo. Vamos ver o que isso faz. Então parece que isso mantém a parte superior aqui no topo ou nos deixa crescer com o resto da página. Então vamos mantê-lo em seu padrão, que foi corrigido. Quero dizer, lá para quando você pairar sobre ele. Você pode ver aqui em cima que caixas azuis realmente parecem marrons com o efeito sensato. Então vamos primeiro, eu queria mudar a fonte. Distinguir foi um pouco do corpo do texto. Então, se você vai ser quadrado espaços painel frontal, você vai ver que há um monte de fundos aqui. Eles realmente são parceiros com frango tipo adobe, então você tem acesso a um monte de fundos realmente legais. Eu quero ir com algo semelhante aqui. Vamos tentar afra. Sim, isso é muito bom. Então, os esforços vão ser a nossa segunda reforma para este site, vamos bater para a frente. Digamos que é apenas um pouco de 15 linhas de altura, uh, então geralmente apenas controla o espaço entre linhas. Mas como há apenas um deitado aqui, como você pode ver, é apenas uma espécie de semana rotunda. E se estiver controlando, até onde está a navegação? No Texas. Então, vamos movê-lo. Então é meio que alinhado com o centro desse logotipo para ir, hum, transformar texto. Vamos manter isso em maiúsculas e vamos bater com o espaçamento das letras um pouco. Ok, o conteúdo principal da próxima seção, que na verdade nós realmente não temos um monte de texto na página de som. Vamos em frente e salvar nosso design, devolvê-lo para a seção principal, e agora podemos realmente clicar em uma página diferente ser capaz de ver o que muda para o corpo ex-fazendo como nós fazemos isso. Então vamos voltar para o editor de estilos. Role de volta para baixo até o conteúdo principal. Vamos ficar com a mensagem. Parece que acabou. Talvez aumentar o tamanho um pouco. Você sabe, em geral, você só quer ter certeza de que você está tornando realmente fácil para os usuários ler texto em seu site. Porque essa é uma das coisas mais fáceis que convenceu aqui, pessoas longe disso. Uh, isso é aumentar um pouco. Sim, parece melhor. Ok, uh, para a cor do texto pode ver o início. Mude isso aí. Posso apenas dar-lhe praticamente o semelhante? Mesmo claro com isso, a propósito, eu realmente não vou entrar em teoria de cores, folhas de estilo de site e tudo mais. Há um monte de grandes aulas de escultura já para esse tipo de coisa, e vai estar no escopo desta aula. Não quero me incomodar em entrar nisso, mas vou te dar algumas boas ligações. No recurso é a seção desta classe que irá vinculá-lo a alguns sites para chegar esquema de cores para o seu site. Está chegando com um guia de estilo do site? Sim, e coisas assim. Então, para o propósito desta aula, eu vou apenas manter o site, criar habilidades porque eu estou muito mais interessado em apenas mostrar como as coisas dos pés no espaço quadrado e na verdade mergulhar na teoria do design e outras coisas assim. Certo, então dirigindo esta cor, você sabe o que? Não temos dor de cabeça nesta página. Isso é realmente salvar isso muito rápido. Você perdeu isso. De modo que é apenas uma espécie de um dia de luz de volta para o editor de estilo. Na verdade, podemos clicar ali nesse texto. - Mim. Vês? Vai nos levar para onde paramos. Vamos manter isso sobre diversão. Tamanho um pouco, a propósito, é sempre uma boa idéia manter sua linha alta pelo menos acima de 1,38 p.m. p.m. apenas para legibilidade. É sobre as letras viradas aqui um pouco para os links. Vamos mantê-los bem escuros. Teoh contrasta com o tipo de texto do corpo cinza e para a cor Hebert, é apenas um pouco como corte. Isso é o que o sucesso mostra tudo para voltar a pensar tudo. Essa seção é montadora automática. Eu não acho que nós realmente queremos fazer isso porque nosso apelo à ação está localizado em nossos instaladores. Então vamos deixar isso aí. Próxima seção é, na verdade, botões. Vamos entrar E é isso que vamos mantê-lo como um esboço. Mas como você pode ver, há definitivamente alguns outros estilos Aqui temos três opções para a aquisição obsoleto, arredondado e Phil. Vamos até que eu possa, tipo, olhar para isso. Uh, ele mudou a borda um pouco para baixo. Só dê um pouco mais de contraste. Ok? Acho que os fundos estão bem, obrigado. Vamos manter isso assim. Certo, então guarde isso. Então agora nós praticamente editamos todo o design do corpo do texto. Vamos voltar para a página principal agora e ver se queremos mudar alguma coisa com esta foto aqui. Então salte para trás em um editor de estilo, você pode realmente clicar nesta grade, e ele irá mostrar-lhe os estilos relevantes. Então, para os títulos, eu acho que é isso que está aparecendo no pop-up. Então vamos deixar que eu quero eu acho que vai parecer mais legal se definir a cor de fundo , dedo do pé branco e deixar nossas pessoas de texto esquerda. Vamos fazer isso. Vamos fazer o mesmo com ela mesma Fitting cores para que você possa realmente copiar e paz este número hexadecimal lá e que irá certificar-se de que você está usando o mesmo claro em todo o seu site. Eu acho que esse projeto com pode ver que é tipo de controlar o espaço dos quadrados. Você quer pensar isso um pouco, mas não muito? Acho que isso é quase tudo o que queremos mudar também. Isso é vamos salvá-lo e sair só para que possamos ver aquele novo olhar de ajudante, Sim, eu acho que parece muito legal. Então vamos deixar assim. E então agora que nós meio que definimos um design básico, isso é apenas tela cheia isso e ver o que mais podemos querer mudar. Então, a primeira coisa, é meio estranho esses botões flutuando aqui no meio. Vamos ver o que podemos fazer sobre isso. Agora que o tamanho da frente mudou, essas seções mudam um pouco, então talvez você queira estender o mapa para manter essa essas seções mudam um pouco, então talvez você queira estender o mapa para manter essa simetria. Isto está parecendo muito bom. Sim, ainda temos nossa seção de impressão. Eu vou entrar um pouco mais tarde, como fazer um ajuste mais fino. É para isto. Mas por enquanto, acho que vamos nos concentrar em fazer isso. Mas melhor posição. Vamos entrar e ver o que as opções nos dão. Então, mas o limite, é apenas sentido deixar salvar. E lá vamos nós. Isso parece muito melhor. Ótima. Então agora você viu como é fácil. Basta ajustar pequenas coisas sobre o design do seu site. No próximo vídeo, vamos lidar um pouco mais fundo nisso e perder um pouco de CSS. No próximo vídeo, Não se preocupe. Você não vai ter que pular em nenhum Cody ou algo assim. Vou dar-te toda a ajuda que precisares. O ponto deste próximo vídeo vai ser apenas para mostrar como CSS pode realmente aumentar o seu jogo ainda mais com o dito, vamos fazer isso agora 7. Deep in Design: Limites de modelo passado: Ok, então o objetivo desta lição é apenas introduzi-lo para ver o espaço de pontuação SSO e mostrar-lhe realmente o quão poderoso ele é e personalizar seu modelo e fazer um mais individual. Então, agora que temos nosso estilo configurado para todo o lado, vamos digitar e começar a adicionar em alguns CSS há dois é adicionar em CSS no squarespace. Você pode fazer isso globalmente, que significa que qualquer alteração que você fizer será aplicada em todo o site ou você pode fazê-lo em uma única página, que significa que o CS que é será apenas um jogo para essa página. Uh, a primeira coisa que eu quero fazer é realmente uma coisa global. Eu quero fazer o logotipo um pouco mais desbotado e dar-lhe um efeito auxiliar legal. Então, para adicionar CSS trabalhando globalmente, pule para isso para o painel de design. Estamos prontos para ir à exceção da Alfândega e não há nada aqui agora. Então eu vou abrir o CSS que eu já escrevi entre parênteses. Sinto um pouco mais de novo. Você não precisa saber CSS. Vou ligar você a um ótimo site que divide CSS na classe. O recurso é. Mas se é algo que você gosta um pouco mais de treinamento. Mas eu acho que apenas notas apenas até mesmo saber na revisão da classe ou na seção de discussão , e eu definitivamente vou considerar fazer um curso CSS se houver muito interesse nele. Então nós entramos e editores, sim, isso está lá. Vamos salvá-lo, abri-lo e você pode ver imediatamente que o logotipo não está desbotado. Uh, e quando você tem um rover, ele agora fica maior e pode ficar mais opaco? Então isso parece melhor lá, uh, uh, o arcanjo que eu faço. Eu também quero dar essas fotos aqui tipo de um bom efeito fadado logo de cara. Mas eu só quero que ele esteja nesta página principal aqui. Eu quero que você seja capaz de clicar na imagem e realmente vê-lo em cores. Então, para fazer isso, nós realmente vamos entrar em páginas, não design, e nós vamos para esta página. Queremos jogar o CSS para clicar no ícone de engrenagem aqui. Vamos comprar bilhetes para as configurações. Só um site rápido. Agora esta seção de descrição aqui. É realmente útil preencher isso para todas as suas páginas, porque um monte de motores de busca vai olhar para essa descrição em. E ter uma descrição muito agradável e robusta ajudará sua página a obter pesquisas mais altas do Google. Ok, então no conjunto do Afeganistão, vemos que há uma seção chamada Page Header Code Injection, e é assim que vamos adicionar em nosso CSS. Então, vamos voltar para os colchetes ou, você sabe, se você não tiver colchetes, qualquer editor de texto fará. Então, nenhum bloco vem na maioria dos computadores, então você poderia totalmente usar isso. Ou você pode apenas vir para cima com o seu CSS diretamente em, um, Squarespace para Então para a galeria vai pegar isso e nós podemos realmente dividi-lo direito de ouvir . Se fizermos isso, nada vai acontecer. Temos que colocá-lo em tags HTML CSS, que é apenas estilizado, e você pode ver o squarespace automaticamente adiciona essa tag de fechamento. Feliz lá. Ok, vamos apenas paz em nosso código. Salve isso. Vamos em tela cheia. Ok, fresco a página e você pode ver que todo o pé é apenas ter este agradável, muito sutil, efeito desbotado Ok, então a última coisa que eu quero dilatar é nesta página do príncipe. Eu quero dar a todos esses uma pequena sala de fronteira para eles e uma sombra para tipo de distingui-los. Hum, então eu realmente vou te mostrar como eu consegui o CSS. Recebo incêndios pelos últimos dois pedaços de código. Na verdade, é muito simples. Se isto passar por cima da tua cabeça, não te preocupes com isso. Você ainda poderá adicionar CSS. Mas isso é muito útil para pessoas que talvez saibam um pouco mais sobre isso. Então o que vamos fazer é clicar no que queremos adicionar isto Sim, aquele aluno, aquele aluno, este caso, é a imagem. Ele inspeciona o elemento. E isso vai abrir o desenvolvedor, Cônsul. A maioria dos outros irmãos tem uma versão disto, mas estoua usar cromo. A maioria dos outros irmãos tem uma versão disto, mas estou Uh, e como você tem sobre as coisas, ele vai mostrar que parte da página a regra está afetando neste caso, nós realmente queremos adicionar esta imagem de produto. E se você realmente quer jogar com CSS e isso, você pode realmente ir até aqui. no painel direito e começar a mexer com as coisas, então isso realmente faria qualquer alteração em seu site permanentemente. Mas é uma boa maneira de ver o que muda. Você pode fazer com que pareça o fim sem ter que ir e salvar as coisas e abrir as configurações e coisas assim. Eu sou assim, por exemplo, se quiséssemos mudar a capacidade disso, nós continuamos. É como apontar para, e vemos imediatamente que está mudando a vida na página. Mas isso não é importante para nós. O que você gostaria de estar fazendo? Adicionando essa borda e sombras? Vamos ver como é o seu primeiro. Certifique-se de que não queremos fazer nenhum ajuste. Sim, acho que isso é bom. Parece legal no geral. Vamos fechar por causa desse respeito. Em seguida, vá para as páginas porque novamente, estamos apenas jogando isso localmente na página, não globalmente em todo o site. Volte para o avançado. É um último choro de entrar no console do desenvolvedor. Nós realmente sabemos que esses elementos são chamados de paz CSS. Será que ele viu isso? E lá vamos nós. Vamos abrir isso de novo e olhar para nossas mudanças. Acho que isso parece muito bom. Então essas eram apenas algumas maneiras rápidas de mostrar. Você realmente espera CSS poderoso pode ser em fazer seu site olhar um pouco mais distinto. Inimigo. Se você tentar usar esses snippets CSS em outros sites e eles não funcionam por algum motivo, provavelmente é porque o modelo tem alguns diferentes. Identifique o IRS para os elementos. Se você tiver esse problema, tudo fique à vontade para carregar seu projeto e me ligar a ele. E eu ficaria feliz em tipo de reforma naquele trabalho CSS dedo do pé. Três anos Excite e eu forneceremos todo o código para o CSS na descrição da classe para que você possa usá-lo se quiser, e sinta-se livre para ajustá-lo se quiser. 8. Parabéns e obrigado!: E você está feito. Parabéns. Acabaste de fazer o teu primeiro website. Estou tão animado para ver o que vocês vieram acima com, então, por favor, fazer Upload para o projeto. Calorie, vou dar-lhe algumas dicas sobre como refiná-lo e talvez até mesmo alguns trechos CSS extra tat em seu próprio site. Muito obrigado a todos e não se esqueça de conferir minhas outras aulas para ter um ótimo.