Aumente seu brilho lateral; Branding e design para seu site de Squarespace | Rosanna Costello | Skillshare
Pesquisar

Velocidade de reprodução


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

Aumente seu brilho lateral; Branding e design para seu site de Squarespace

teacher avatar Rosanna Costello, Quitting my 9-5 so you don't have to!

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

    • 1.

      Apresentação

      0:38

    • 2.

      Pesquisa e inspiração

      2:11

    • 3.

      Marca

      9:53

    • 4.

      Construtor de logotipos de Squarespace

      10:24

    • 5.

      Qual versão de Squarespace?

      1:48

    • 6.

      Corte de fluxo de trabalho

      1:56

    • 7.

      Estilos de site

      14:33

    • 8.

      Blocos de conteúdo

      18:01

    • 9.

      OUTRO

      0:48

  • --
  • 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.

632

Estudantes

3

Projetos

Sobre este curso

Um visitante do seu site pode levar menos de 15 segundos antes de decidir se vão ficar e dar uma olhada. O design e a marca do seu site - como se parece e sente, precisam de apelar, não só para você, mas também para seu público-alvo.

Neste curso, você vai aprender a desenhar seu site para que fique bem - maldita bem! Vamos criar diretrizes de marca para você e seu site, em etapas pequenas e fáceis, para que você tenha um site coerente e consistente. Isso também pode ser transportado para qualquer mídia social ou trabalho de impressão que você criar.

Vamos também dar uma olhada no criador de logótipos Squarespace gratuito e integrado. Uma ferramenta super útil que fornece um arquivo para download que pode ser usado em suas mídias sociais ou trabalho de impressão.

Nenhum conhecimento prévio necessário, este curso é direcionado para iniciantes, por isso, se você ainda não assistiu meu curso no Como criar seu primeiro site do Squarespace, sugeriria assistir o primeiro a começar.

Eu incluí um download de pdf para ajudar você a trabalhar através de sua marca, e um pdf de bônus com algumas opções de paleta de cores.

Este curso é baseado no uso de versão 7.0 do Squarespace. Se você criou uma conta de Squarespace desde janeiro de 2020, será atribuído automaticamente um site de Squarespace na versão 7.1. Para iniciar um site na versão 7.0 e seguir este curso, use o link abaixo para acessar o repositório de modelos original do Squarespace 7.0.

Link para a loja de modelos do Squarespace 7.0

skillshare.com/browse/squarespace

Conheça seu professor

Teacher Profile Image

Rosanna Costello

Quitting my 9-5 so you don't have to!

Professor

I'm a Furniture and Product designer from the UK, I studied at Dundee University in Scotland and graduated in 2011. In September 2018 I left my job as Design Manager for a large furniture company in search of a different way of life. Through my experience working as a Designer and now building a new lifestyle whilst travelling (I'm currently in New Zealand) I've come to understand how important it is to be passionate about what you do, or to at least have an aspect within your working life that fires you up. A Side Hustle is the perfect way to do this, I even have my own side hustle going on over at Hilda.co.

Follow me as we learn how to bring creativity and passionate side projects into our daily lives. 

I'm over on Instagram here for some day to day escapi... Visualizar o perfil completo

Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas 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. Introdução: Oi, sou Rosanna. Bem-vindo ao crescimento do seu Hustle, branding e design para o seu site do Squarespace hoje, vamos dar uma olhada em como desenvolver suas próprias diretrizes de marca pessoais para você, seu site e, finalmente, sua agitação lateral. E então vamos analisar como traduzir isso em seu site e obter o design e a sensação em todas as páginas do seu site. Esta é uma aula para iniciantes, portanto, nenhum conhecimento prévio de squarespace é necessário, mas isso ajudará se você já tiver seu site do squarespace build. Então, se você ainda não conferiu minha outra aula sobre como criar seu primeiro site e apareceu de volta aqui e vamos começar. 2. Pesquisa e inspiração: Muito bem, vamos começar a desenhar o teu site Ladrão. O primeiro lugar para começar para mim com um novo projeto é sempre com pesquisa e inspiração. Isso vai ser especialmente importante se você estiver construindo. Este site é parte do seu lado Hustle. Ter uma base sólida de pesquisa e inspiração lhe dará orientação e foco para quando você estiver no meio de tudo para se concentrar na fase de pesquisa. Vamos dar uma olhada no projeto da classe. A primeira seção é compartilhar uma imagem fora de sua inspiração com alguns marcadores explicando o que você gosta sobre ela. Em primeiro lugar, queremos começar com uma visão ampla sobre diferentes meios de potencial de inspiração, como revistas, sites ou cartazes do Pinterest . Pense no processo como um funil. Comece no topo com o mais amplo espectro de inspiração e, em seguida, refinado para baixo e para baixo até ter as inspirações escolhidas. Pinterest é um ótimo lugar para coletar tudo juntos, pois é um mecanismo de busca visual que você pode procurar e salvar suas imagens de inspiração escolhidas . Aqui está o meu quadro final. Eu só salvei aqui meus favoritos em termos de fontes, cores, cores, imagens e estilos que maneira eu tenho um lugar ter coletado inspiração curada que eu posso me referir de volta e manter as coisas simples. Veremos como este quadro de Inspiração informa o meu design à medida que passamos pela aula para a primeira parte do nosso projeto de classe, certifique-se de compartilhar uma captura de tela de suas imagens de inspiração e escolha e adicionar alguns pontos sobre o que você Gostei. Apenas certifique-se de que a coleção final é apenas seus favoritos absolutos, no máximo, três de cada uma da seleção de fontes, cores, imagens em vendas. Se você está se sentindo sobrecarregado, há um link para o meu conselho do Pinterest no projeto de classe estão abaixo para o palco, um amplo elemento de pesquisa para que você possa dar uma olhada e ver se há alguma coisa lá que você gosta de obter começou. Certifique-se de salvar sua foto inspo no projeto da classe abaixo e compartilhar o que você ama sobre ele . Então, para reunir e terminar a Lição 1, começar a pesquisar e, o mais importante, tentar aproveitar este estágio. Você está procurando coisas que você ama e quer imitar. Que divertido com ele e ser aberto. A inspiração pode vir de qualquer lugar 3. Marca: Agora que você tem sua coleção de pesquisa e inspiração com curadoria, é hora de desenvolver isso em sua marca pessoal. Para seu próprio site do Squarespace, criei uma lista de diretrizes de marca PDF para que você possa baixar em qualquer impressão usada em seu computador. Isso será realmente útil para manter o controle de onde você está em uma viagem, especialmente se o seu lado hustling e tem que colocar este projeto para baixo e buscá-lo novamente . Mais tarde, você pode encontrar o download das diretrizes do Pdf Brendan em sua seção de projeto para obter as informações da classe abaixo. Eu sei que o termo branding pode parecer uma tarefa esmagadora, algo que só é reservado para designers gráficos e profissionais. Mas estou usando minha experiência e conhecimento para ajudar a tornar isso em uma parte agradável e durável de sua jornada de design do site. A lista de verificação da marca foi projetada para ser preenchida de cima para baixo, passo a passo. Ao dividir sua marca em geral nessas oito etapas, temos um processo gerenciável e podemos dar cada passo um de cada vez. Vamos dar uma olhada juntos participando da minha coleção de inspiração nas diretrizes da minha marca, pois essa aula é uma continuação da minha aula anterior. Comece a sua agitação lateral. Como construir seu site baseado em primeira classe. Continuarei a desenvolver o site que construí naquela aula. Se você ainda não teve a chance de construir as bases para o seu site, eu sugiro começar com essa classe para que você possa construir seu site e voltar aqui para o design e branding. Então, continuando a partir dessa aula, eu já pude preencher o início da minha lista de verificação de marca com meu nome para o meu site ou marca. Eu não tenho um slogan, mas incluí a declaração de missão que escrevemos na última aula como construir seu primeiro site do Squarespace. Vou percorrer as próximas etapas com você para que você possa ver meu processo. Eu abri há pdf em pré-visualização no meu Mac, e eu vou apenas editá-lo aqui como a opção mais simples, rápida rápidae fácil. Vou preencher cada passo com eles esta edição em pré-visualização para que eu possa manter tudo junto em um só lugar. Se você for capaz de fazer isso ou iniciar um novo documento em branco e colocar tudo nisso, pode ser realmente útil ver todos os elementos da sua marca em um só lugar para garantir que eles sejam coesos e criar a vibração geral e sentir que você está atrás. Então, como fizemos um trabalho tão bom na fase de pesquisa, deve ser bastante simples preencher nossa lista de verificação de marca. Eu vou colocar meus dois documentos, então eu tenho meu quadro do Pinterest com a inspiração de design do site. Então esta é apenas as coisas mais favoritas que eu escolhi para a inspiração do site . E eu tenho isso lado a lado com a versão de edição de pré-visualização fora da minha lista de verificação para as minhas diretrizes de Brendan. Então eu comecei no número quatro, já que eu já preenchi um e três, e eu não preciso do passo dois. Vou pegar minha seleção inicial deste pin sobre pares de fundos modernos para o espaço quadrado . Então vamos dar uma olhada nisso. Então isso foi apenas algo que eu pesquisei no Pinterest. Outras pessoas criaram essas coleções, que é uma ótima coisa para utilizar, e esses são todos fundos que estão no espaço quadrado, então sabemos que eles são meio seguros, úteis, também, olhar para cima e para a minha frente título, Eu realmente gosto da ousadia fora deste e Bevis New Frontier. Então é isso que eu vou escolher para ser a minha frente de título. Então, enquanto estamos aqui, eu vou mudar essa frente para ser a certa para que possamos começar a ver como ele vai mudar o que está aqui em cima também. Então, novamente, podemos vê-lo sendo usado em mais circunstâncias e começar a ter uma idéia do campo, em seguida, para o fundo corporal. Embora o pino tem PT Sands como a caça ao corpo para usar junto com Bavis novo, eu estou realmente indo para escolher a frente Brandon de baixo na parte inferior aqui, e eu realmente gosto deste. Prefiro o quão claro e fácil de ler é. Então, novamente, nós vamos adicionar isso em ah, listas de verificação do Brendan para que nós cresçamos tudo juntos em um só lugar e nós podemos começar a ver como tudo parece quando ele se sentou juntos. Então vou mudar essa para ser a opção correta. Você vê, é muito limpo, muito fácil de ler e para a frente do corpo no site. Então, se tivermos algum bloco de mensagens ou coisas assim, ele vai parecer muito simples e muito fácil. Legal no site. Mude este também em que já é o Brendan. Então eles vão para que você possa começar a ver como o olhar bem lado a lado. Em seguida, as cores aconselharam batota 3 a 5 opções de cores para sua marca, como qualquer mais de cinco poderia ser um pouco demais, e você está indo para impor cores diferentes em apenas para usá-los em seu site. Então tente ficar dentro de 3 a 5 opções de cores, se você puder, apenas para mantê-lo mais fácil para si mesmo mais abaixo da linha. Voltando ao meu quadro do Pinterest para o design do site Inspiration. Eu salvei duas imagens ou dois pinos aqui para inspiração de cores. Eu vou escolher este hoje porque eu realmente amo o tipo ousado de cores de estilo quase primárias , e eu acho que eles vão funcionar muito bem. Então eu só vou fazer alguns círculos sobre a lista de verificação de marca para que eu possa colocar essas cores na minha lista de verificação. Ok, então nós temos cinco círculos prontos para preencher com as cores que eu quero usar. Então, eu, começando do início e no meu editor de visualização visitando ferramenta muito útil na opção de escolha de cor que eu sou. Eu posso pegar esta ferramenta conta-gotas aqui e passar o mouse sobre a cor que eu quero no pino e selecioná-lo. Ele preencherá as diretrizes de mistura do Bryant a cor que eu quero usar. Então lá temos a primeira cor. Então eu vou apenas continuar em entradas as cinco cores desta imagem no Pinterest para usar como minha paleta de cores para minhas diretrizes Brendan. Ok, lá vamos nós. Eu tenho minhas cinco opções de cores lá, e eu acho que parece coisa muito legal que eles ficam muito bem juntos. E também, eu posso começar a ver como eles vão olhar ao lado dos traços divertidos que eu fiz e especialmente com aquele bebê é nova frente. Acho que vai ser muito ousado e forte, e por isso estou muito entusiasmado com isso. Eso Esta opção conta-gotas olho cor é realmente útil. É truque realmente útil porque isso significa que você não precisa se preocupar com códigos de cores ou de onde sua inspiração cor vem. Se uma imagem chama sua atenção, você pode pegar as brasas e apenas quebrar a cabeça. Então, agora, se você já deu uma olhada na definição de cores e quadrados, você saberá que precisaremos de uma célula de árvore ou códigos de cor RGB para obter a referência exata de cor em nosso site. E não se preocupe, eu tenho um truque útil para obter códigos de cores para sites, então não tenha medo também, vai ter esse detalhe crucial aqui no final desta lição. Certo, primeiro passo sete. Esta é uma opção de bônus, mas pode realmente ajudar a definir a vibração e a sensação de sua marca para incluir alguns padrões, imagens de estoque ou texturas. Isso fica sob a seção de estilo da nossa pesquisa original. Andi, se formos ao meu quadro do Pinterest , pode ver que há alguns pinos que ainda não mencionei. Estas são as minhas opções de bónus para o 7º Passo. a Adoroaestética simples e ousada da revista Gentlewoman. Eu sinto que a paleta de cores das bandejas e junto com a nova frente título do bebê reflete, é muito bem. Eu também salvei duas imagens de um produto sob cartaz do design Dita Rams. Mais uma vez, temos esse uso forte, ousado e simples da cor junto com formas simples. Vou ter isso em mente para o último passo. Número oito, meu logotipo. Vamos analisar mais detalhadamente a construção do logotipo na próxima lição. Então eu tenho aqueles pinos na minha prancha prontos para eles. Por enquanto, tenho a minha lista de verificação no meu quadro do Pinterest. Eu sinto que tudo isso está indo na direção certa com a sensação geral que eu quero para este site. Então, apenas o último truque para obter esses códigos de cores para a nossa paleta de cores. Basta ir para o seletor de código de cor ponto com. Bem, você pode carregar, você sabe, bandejas e imagens para escolher as cores dessa paleta de cores. Então esse é um site muito útil para usar ao lado do Pinterest, porque podemos clicar com o botão direito na imagem do Pinterest apenas para salvar a pasta de imagens e downloads. E então podemos carregar esse código de cores dentadas, maior site e sucesso. Então podemos passar pelo processo de pairar sobre cada uma das cinco cores individuais . Onda, podemos anotar bem, isso nos dá o RGB o hexadecimal bom no código de cinzel A, então se você quiser saber todos eles para baixo. Mas sim, mais uma vez, uma maneira super fácil de encontrar os códigos de cores de uma imagem não era assim. Isso é ótimo. Olha o quão longe chegamos. Basicamente, temos nossas próprias diretrizes de marca pessoal feitas e prontas para usar em nosso site para realmente torná-lo nosso próprio eso. A próxima lição vamos estar olhando para projetar e criar nosso próprio logotipo no espaço quadrado. 4. Construtor de logotipo Squarespace: Agora que temos nossas diretrizes de marca para baixo, é hora de criar um logotipo para o nosso site. Assim como com as diretrizes da marca, vamos manter isso simples e realizável usando o construtor de logotipo baseado em quadrados embutidos . Esta é uma grande ferramenta que é chorar Espaço. Fornece on permite que iniciantes dentro hustlers para facilmente criar um logotipo para o seu site sem a necessidade de um designer gráfico. Se você tem uma conta squarespace, você pode baixar o logotipo final gratuitamente para que ele possa ser usado em outro lugar. Então, vamos entrar em nosso site do Squarespace e navegar até a seção de design no topo aqui. Temos o logotipo no título no momento. Acabamos de ter o nome do site escrito na seção de título do site. Mas se deslocarmos para baixo e selecionarmos criar um novo logotipo, ele nos levará a uma nova página para o construtor de logotipo baseado em Squares. Legal. Então, que grande tela de boas-vindas. Isso é exatamente o que procuramos. O logotipo é simples. Vou digitar o nome do meu site aqui. Já é isso, e isso nos leva através da Página de Design dentada, que promete procurar um símbolo e para o nosso logotipo então eu vou apenas clicar fora disso por um segundo e vamos dar uma olhada ao redor. Nós temos o nome do site na frente e no centro do painel de design aqui, que está neste fundo gridded. Então isso seria super útil para alinhar as coisas abaixo. Aqui em baixo, Squarespace está nos mostrando algumas simulações de usos do mundo real do nosso logotipo. Então, novamente, isso vai ser realmente útil para nos ajudar a visualizar como o logotipo vai ficar na vida real . Podemos expandir a tela com essas horas. Aqui estou eu em alterar algumas das configurações aqui em cima. Eu sou um retorno, Snap to grid on. Volte para a tela aqui. Temos o nome do site aqui, e isso não precisa ser incluído no logotipo. Poderíamos ter um símbolo, mas vou mantê-lo aqui por enquanto e ver como vamos. Se eu selecionar o título do site, você pode ver que temos algumas opções adicionais para ser capaz de mudar a família de frente. A cor da frente, o peso da frente na frente obsoleto. Então, uma coisa a notar que ele é quando olhamos na seleção de família frente que há uma seleção de fundos muito mais limitada no construtor de logotipo do que no próprio quadrado real na frente do título que eu escolhi que bebês novos. Não está realmente nesta lista de frentes aqui, que significa que eu provavelmente não vou manter o texto é parte das contas do logotipo afinal de contas, porque eu realmente quero ficar com as diretrizes da minha marca e criar essa aparência ousada e forte do meu quadro de inspiração. Então eu vou apenas excluir o título assim selecionou e pressione excluir, e então eu vou apenas me concentrar no ícone como meu logotipo. Eu pensei em um trabalho em torno de obter o título do site na frente. Eu quero junto com meu logotipo no site, então olhamos para isso mais tarde na classe para o meu ícone de logotipo. Quero encontrar algo que represente a declaração da minha missão no site. Eu também queria me encaixar com minhas diretrizes de marca e quadro de inspiração para ser ousado, simples e claro. Então aqui no painel de pesquisa, enfraquece o tipo de forma a procurar símbolos que possam representar o que queremos que o nosso logotipo seja . Então vamos procurar as árvores primeiro. Do Sina. Essa é uma das minhas categorias de fotografia no site. Temos uma seleção de ícones de árvore aqui que você pode ver aparecer na janela. Eu não amo nenhum deles, particularmente eu não sinto que eles estão dando aquela representação geral da declaração de missão que eu estava atrás. Então vamos tentar outra coisa. Em vez disso, vamos procurar montanhas. Está bem, fixe. Então vamos rolar para baixo. Há uma boa seleção de ícones da montanha aqui. Eu sinto que no geral, ele está liberando mais dessa sensação de paisagem, que está em linha com o meu estado de missão. Apenas pensando em minha pesquisa na placa de inspiração aqui e apenas olhando para as linhas limpas, fortes, simples e as formas que tivemos a partir destes detalhes gramas projetos aqui. Eu acho que vou para este que está em um círculo. Ele se encaixa bem com as linhas ousadas e fortes e os elementos circulares ligados a partir da minha inspiração nestes detalhes gramas aqui . Se selecionarmos o ícone enfraquecer, movê-lo para o centro da tela e ele está configurado para encaixar na grade, o que é útil de qualquer maneira. Mas se tivéssemos mais alguma coisa aqui, seria útil ser capaz de alinhar isso. Podemos arrastá-lo para torná-lo um pouco maior também, o que ficará feliz em poder ver com o que estamos trabalhando. E o Squarespace já está atualizado os exemplos ao vivo aqui para que possamos ver como ele ficaria em um cartão de visita em um site e até mesmo em uma camiseta, o que é muito legal. Então, quando selecionamos o logotipo, ele também vem com esta opção de cor aqui para que possamos mudar sua cor de preto para uma das cores da nossa marca perfeita. É exatamente isso que queremos manter tudo de acordo com nossas diretrizes de marca. Então, se o que você tinha que fazer, ou a cor poderia escolher um site. Se você ainda que abrir e com sua imagem carregada, você pode clicar sobre a cor e ele traz para cima o RGB, o código hexadecimal e o código de idades l. Então o código hexadecimal é simbolizado por ter essa hashtag na frente dele. Então poderíamos pegar isso de lá, apenas copiando isso. Andi, solte isso aqui. Lá vamos nós. Então, se temos a cor poderia escolher um site, então. Isso é muito fácil de obter o código do código de cor no construtor de logotipo do squarespace aqui. Certo, agora sabemos como conseguir nossos códigos ex só vamos testar algumas das outras cores só para ver como elas ficam. Então eu acho que por agora eu vou usar esta cor vermelha. Então parece muito legal nos exemplos abaixo, e ele se encaixa bem com essa estética ousada que eu estava procurando. Então, para salvar isso, vamos salvar o logotipo aqui em baixo. E isso nos diz agora que podemos baixar nosso logotipo gratuitamente. E por isso, porque eu tenho uma conta no squarespace, eu posso baixá-la gratuitamente. Então, clicamos em download. E então agora temos a opção de ser capaz de baixar em linhas pretas coloridas ou linhas brancas . Isso é muito legal, pois há uma chance de você precisar usar seu logotipo em preto ou branco em lugares diferentes . Então isso é muito útil e dica, e eu aconselho baixar todos os três quando você vem para baixar seu logotipo apenas para que você tê-los lá, então ele vai nos dar um download de violência de PNG, que é Outra coisa realmente útil que eu sou. Então isso só significa que não haverá um fundo para o logotipo. Serão apenas as linhas como as vemos aqui. Então isso é muito útil para usar no site ou em outros lugares, porque colocamos o logotipo em cima de outro plano de fundo, que não poderia nos dar muitas opções legais Além disso, ele está configurado para baixar um tamanho de arquivo 2000 pixels por 2000 pixels, e se clicarmos aqui, você vê, temos opções para ir mais do que isso ou menos do que isso, dependendo do que precisamos. E então 2000 pixels de largura é mais do que suficiente para agora, eu vou ficar com isso. Eu só vou baixar a opção de cor por enquanto. E como eu disse, quando você vem baixar seu logotipo, eu baixo os três e então você os tem lá. E se você quiser voltar, você sabe que ele está clique aqui para voltar e editar o logotipo e depois baixá-lo novamente. Então aqui está o meu logotipo P e G. Download aqui e que estará na minha pasta Downloads. Também receberei um e-mail do Squarespace com um link para o meu logotipo. Então isso é super útil novamente para o futuro. Significa que podemos sempre encontrar o nosso logótipo. Não precisamos nos preocupar em fechar esta janela porque receberemos o e-mail. Então, em seguida, eu quero adicionar meu logotipo junto com minhas diretrizes de marca e quadro de inspiração para ter certeza de que ele se encaixa com o visual geral que eu tenho para a minha marca. Na verdade, vai ser mais rápido e fácil criar um pin a partir do meu logotipo baixado. Arquivo S. Então esta é a minha prancha aqui. Então, se eu apenas ir para o plus, criar um pin e adicionar a partir de downloads o logotipo que eu quero lá e eu não preciso me preocupar em escrever nada sobre isso porque isso é apenas para mim e ele está publicando para o quadro correto. Então eu só vou publicar. Então esse é o logotipo agora sentado com o resto do meu amigo. E se colocarmos o documento das diretrizes da marca lado a lado novamente, então temos a tela dividida, então podemos ver como tudo parece definido juntos. Se você criou suas diretrizes de marca em um novo documento, isso é ótimo. Você pode adicionar seu logotipo lá. Eu só estou tentando manter isso simples e é fácil possível, por isso é acessível a todos. Então, usando uma combinação de Pinterest na minha lista de verificação de marca, eu tenho referências para minha própria marca pessoal. Diretrizes sobre logótipo. Bem, uh, que possamos realmente ver lá como tudo está começando a se relacionar e como pode começar a olhar no site. Ele é esta grande paleta de cores aqui e um bom fundo forte e mantendo tudo muito simples e referenciando alguns círculos no logotipo e linhas ousadas, fortes e limpas. Então, estou muito feliz com a forma como tudo está indo junto. Espero que estejas com a Andi. Você pode reservar um tempo agora para criar seu próprio logotipo. Andi, trabalhe isso em suas diretrizes de branding para finalizar sua própria marca pessoal, e esse é um começo realmente incrível para projetar seu próprio site com o Squarespace 5. Qual versão do Squarespace: antes de irmos ao Squarespace para ver o construtor de logótipos. Apenas uma nota sobre as diferentes versões do Squarespace. Squarespace lançou recentemente um virgem 7.1 em janeiro de 2020. Então, se você abriu sua conta depois desse tempo, as chances são de que você será automaticamente colocado em um site da versão 7.1 do squarespace. E então minha classe aqui é toda em um espaço 7.0. E assim, para verificar em que versão seus sites. Se você entrar em seu construtor de sites e teve que ajudar, então você pode ver lá se você está na versão 7.0 ou 7.1. Então, como eu disse minhas aulas sobre a versão 7.0, então, se você começou um site Andi não foi muito longe, então pode ser melhor para refazer o seu site na versão sete pontos deve. Você pode fazer isso seguindo o link na descrição da classe e que irá levá-lo para a loja de modelos para a versão sete pontos. Oh, mas se você tem muito longe em seu site construir e você quer continuar com 7.1 e eu vou estar fazendo uma aula para isso no futuro. Mas enquanto eles ainda estão descobrindo as coisas, 7.1 Andi estava fazendo alterações? Vou ficar com 7.0, e por enquanto, e acredito que essa é a melhor opção por enquanto. Então, ou rachar como você é, ou você pode dar um passo atrás e reconstruir com 7.0 aqui se você tiver alguma dúvida, ou se você está preso com qualquer coisa com 7.1. Eu usei em construiu alguns sites com ele, então eu poderia ser capaz de ajudar. E se você deixar uma pergunta na seção de discussão aqui, eu posso ajudá-lo com isso. Caso contrário, vamos começar com a construção do nosso logotipo. 6. Corte de fluxo de trabalho: Agora vamos olhar para um pouco de um hack de fluxo de trabalho. Prometo que vamos entrar no espaço quadrado a seguir. Mas como acontece com a maioria das coisas criativas, muitas vezes é tudo sobre a preparação. Então, antes de irmos para o espaço quadrado, queremos ter certeza de que temos todos os nossos patos seguidos. Temos nossas diretrizes pessoais de marca e nossa pesquisa sobre inspiração coleção curada no Pinterest. Nós temos nosso logotipo, então queremos ter o máximo possível arquivado em um fácil de encontrar um lugar antes que tivéssemos que squarespace. Então, quando foram enterrados profundamente na concepção do nosso site. Temos tudo o que precisamos, escreve uma mão muitas vezes na plataforma do espaço quadrado. Se você está procurando por uma imagem para adicionar ou copiar para colocar, pode ser um pouco frustrante encontrar o que você quer. Então eu gosto de ter uma pasta na minha área de trabalho. Estou organizado nas informações de branding, quaisquer imagens que eu quiser em qualquer cópia que eu tenha escrito antes de escrever no Squarespace. Você diz que começa a escrever um grande bloco postado no espaço quadrado e ele cai. Você vai potencialmente perder o que escreveu. Então eu sempre gosto de tentar escrever off-line em palavras ou páginas. E então eu posso copiá-lo e colá-lo no espaço quadrado quando eu estiver no site e on-line e ele estiver pronto para ser usado. Então, em imagens eu só tenho no momento as árvores que nós carregamos para a seção de árvores . Andi em branding, temos nossa lista de verificação de diretriz de Brendan em nosso logotipo pronta para uso. Então eu vou adicionar um pouco mais na minha seção de cópias na minha seção de imagens, e eu vou vê-lo em menos e cinco quando vamos começar em squarespace tornando nosso site nossa estrada. 7. Estilos do site: Ok, então vamos entrar em nosso site do Squarespace agora e trabalhar na seção de design do construtor de sites para que possamos começar a realmente tornar nosso site nosso. Se clicarmos a partir da tela inicial para a seção de design, podemos ver que há um menu de opções agora no lado esquerdo. Nós já visitamos a seção de logotipo e título para criar nosso próprio logotipo. Então vamos voltar lá para que possamos instalar isso em nosso site. Então, se nos dirigirmos aqui para a imagem do logotipo e clicar para adicionar um logotipo, se nos lembrarmos na última lição, configuramos nosso sistema de pastas para que tenhamos ah pasta do site em nossa área de trabalho. Agradável e fácil de encontrar e podemos navegar imediatamente para branding e para o logotipo que baixamos e na última classe. Está bem, fixe. Então, nós carregamos a cor PNG do logotipo I m. Então, se apertarmos salvar e vemos que o logotipo, como é explicado aqui e o logotipo substitui o título do site no site para que o ícone foi agora no lugar de fotografia ressentida ao longo lá s Então, se você se lembra de quando criamos o logotipo no construtor de logotipos do Squarespace, eu não pude incluir o nome do site na frente. Eu queria fazer parte do logotipo completo. Então eles contornam isso agora é usar a opção de slogan aqui ao longo do lado, o ícone do logotipo. Então, se eu copiar e colar em sua e apenas bater salvar, então precisamos atualizar os fundos na cor e assim por diante. Mas você pode ver que agora temos nosso ícone ao lado do título do nosso site e poderemos colocar isso na frente que escolhemos como parte de nossas diretrizes de marca, que era o novo fundo Babys lá. Então isso é apenas um pouco de trabalho por lá. Se acontecer a mesma coisa com você que a frente não está disponível no construtor de logotipo squarespace e você pode usá-lo como parte do slogan lá para ainda ter o título do seu site no site porque o uso do ícone substitui o título do site e Então isso é totalmente individual. Pode não ser necessário para você em seu site ou pode ser algo que você não tem certeza se deseja ter o título real ao lado do ícone, então faça um jogo. Hum, você sabe, eu não tirei e vi o que você acha. Se você está lutando dedo do pé, decida o que você gosta. Muitas vezes acho que ajuda a apenas afastar-se da tela por um pouco e voltar a ele mais tarde com novos olhos e ver como você se sente quando você abrir aquela tela novamente. E o que sua reação imediata é muitas vezes ajuda a decidir se você realmente gosta de algo ou não. Muito bem, temos o ícone do logótipo à vista. Título. Heck, eso Agora é hora de brincar com o tamanho e obter a frente direita sobre este logotipo. Sagline! Aqui para isso, precisamos sair da seção de direito do logotipo e entrar em sites contos de volta no menu de design. Se você já se aventurou nesta seção do construtor de sites, pode ser onde você acabou o mais frustrado ou confuso. Eu sei que estava quando cheguei aqui. Então estilos de site simplesmente significa os estilos dentro do seu site. Então, a partir daqui você pode escolher tudo, desde as cores das frentes e o fundo do seu site até o tamanho das coisas. Se isso justifica para a esquerda ou para a direita, você sabe que tudo é para como os elementos com qualquer site olhar, é decidido aqui, então pode parecer um belo edifício para começar. Mas eu vou simplificar esta seção Desde o tempo que passei neste, é o menu Tails. Há realmente apenas duas maneiras principais de abordar sites contos. Então a Opção Um está com o menu completo aqui para começar no topo deste menu lateral e trabalhar o seu caminho através de cada opção, uma de cada vez. Assim, por exemplo, podemos mudar a cor e a cor de fundo do site. Essa é a primeira opção que temos aqui, e você pode continuar no menu, mudando as coisas uma de cada vez enquanto você desce e vê como isso parece. Esta é uma boa opção para simplicidade. Sabe, você começou o topo, trabalhar seu caminho para baixo. Mas se você tem uma parte particular do site que você sabe que você quer começar com e onde você quer mudar o estilo nele, vai ser um pouco frustrante ter que trabalhar através de todas as outras decisões primeiro, até chegar à parte com a qual realmente quer começar e mudar. Então, se nós apenas cancelado e descartar essas alterações e voltar para onde nós como nós tivemos e a outra maneira de abordar sites contos é usar a opção de seleção hover. Então, se levarmos o mouse em Dheim para mais da seção do site que queremos mudar , então queremos começar com o logotipo aqui porque isso é o que acabamos de colocar, e sabemos que ainda não está certo. Então você pode ver uma caixa azul aparece em torno da área onde nossas massas pairando. Então, se eu passar o mouse aqui e coletar as opções do menu no lado esquerdo, altere apenas as variáveis disponíveis para editar nesta seção. Então, tudo o que eu posso ver agora é apenas o que vai ser relevante aqui em cima. Então essa é apenas outra maneira de focar o menu à esquerda para mostrar apenas o que você precisa ver. Se você quiser voltar a olhar para tudo, você pode clicar, mostrar tudo ou voltar para aqui e alterar tudo sempre que uma caixa azul aparecer. Em seguida, você pode clicar e ele lhe dará os contos turísticos relevantes para essa seção que você acabou de selecionar. Selecionando esta seção superior aqui, ele nos dá as caudas de sites para o cabeçalho do site. Então vamos começar a trabalhar nosso caminho através desta lista muito mais curta aqui agora de cima para baixo. Assim que você se familiarizar com os estilos de site, é mais fácil mergulhar dentro e fora das seções que você deseja alterar. Mas para começar, eu recomendo trabalhar através dos menus para cada seção de cima para baixo, especialmente uma. Estamos no início da construção do nosso site. Queremos arrumar tudo. Precisamos verificar todas as opções para ter certeza de que é como queremos que seja. Então estamos no site chefe de seção. Estou começando no topo com o tamanho da imagem do logotipo, modo que só nos permite brincar com o tamanho do pixel para o nosso logotipo. Então apenas fazer é puramente por olho e sentir para ver o que eu gosto. Título do site aqui. Se nos lembrarmos, o ícone do logotipo substituiu o título do site. Então não há nenhum ponto para eu entrar nessa opção de menu porque o título do meu site não é visível , mas para você pode ser que você pode não ter um logotipo Nikon sentir, então este pode ser o lugar onde você entra e você adiciona seus fundos, cores e coisas como o título do site trio. Então nós temos o subtítulo do site porque esse era o nosso trabalho em torno de obter o nome do site em. Então, se entrarmos aqui, podemos escolher nossa frente que selecionamos como parte de nossas diretrizes de marca e passar por cada opção e apenas verificar o que está disponível. E se é algo que você quer alterar e se você não tem certeza do que a coisa faz, basta ter um jogo e mover o controle deslizante e ver o que acontece. E eu descobri que essa é a maneira mais fácil apenas de descobrir o que está acontecendo e não se preocupar muito em saber o que a opção do menu significa. Faça algumas mudanças e veja o que acontece. Eu quero que isso seja alinhado com a borda do círculo mais ou menos, e então eu estava indo para as suas costas aqui dentro para isso de volta lá dentro. Espalhe isso um pouco mais para que você possa ver aqui à esquerda das opções do menu. Se fizemos uma alteração, há um grande círculo ao lado do item de menu onde fizemos uma alteração. Então, isso é apenas uma coisa boa para observar para ver onde você tem feijão e ver o que você fez uma mudança. Só ajuda. Você não se perdeu neste grande menu aqui. Então eu quero mudar a cor aqui. Então eu vou voltar para nossas diretrizes de marca e mudá-lo para este azul. Então essa é a nota que eu coloquei quando fizemos nosso pdf, e você pode apenas digitar sobre isso para ser RGB. E então eu apago isso. E agora o nome do título do site está na cor que queríamos estar. Só que é um pouco mais central para que você possa ver mudando o alinhamento do cabeçalho seu logotipo do rio . Nosso subtítulo em nosso menu para Central faz uma grande diferença para e como o site se sente. Também podemos mudar isso para ser certo, justificado, o que não é para mim. Então eu penso em uma vara com o centro. Eu já sou como o quão ousado isso é. Talvez eu até volte. Basta empurrar o tamanho para cima sobre isso um pouco mais. Só assim. É realmente um forte impacto, como tivemos do nosso quadro de inspiração aqui. É tudo muito ousado e um pouco na sua cara e isso até Max. Então é fácil de ler. Sim, isso é legal. Deixe que selecionado ótimo. Então nós passamos por cada uma das opções de menu para o chefe de seção lá, que não demorou muito e foi relativamente simples. Uma vez que selecionamos isso e soubemos onde estávamos trabalhando, sinto que ele está começando a parecer mais personalizado para mim e minha marca, que é ótimo, mesmo que as pequenas mudanças já estão fazendo uma grande diferença. Então, para ter certeza que você não perde essas mudanças, basta apertar Salvar no topo aqui. E, de outra forma, poderíamos. Voltaria a ser como tínhamos antes. Há grandes círculos foram de lá também, porque nós salvamos essas últimas alterações a cada clique de volta para mostrar tudo o que temos a opção de menu completo novamente. Três. Desloque-se para baixo através da opção de menu completo. Podemos ver isso enquanto nosso mouse passa sobre as muitas opções aqui embaixo. Uma caixa azul também aparece na janela do site. Então essa é apenas outra maneira que o Squarespace está nos ajudando a ver com que sites os contos estão relacionando e o que vai mudar se começarmos a clicar em torno do nosso logotipo está certo e é isso. É um começo do nosso site trabalhando agora de cima para baixo para consultar nossas diretrizes de marca para nossos códigos de cores e nossos fundos em nosso quadro do Pinterest e apenas jogar com a aparência que você quer que as coisas fiquem. Não há certo ou errado, e pode ser mudado mais tarde também. Se você decidir que algo que você não gosta, se você está em seus estilos de visão e você faz uma mudança e você ainda está lá, você ainda tem um ótimo ponto e você decide que você não gosta dele. Você pode bater, desfazer no topo lá, e isso vai se livrar da mudança sem ter que se preocupar com a opção salvar ou cancelar no topo lá. Então isso é apenas outra coisa útil para lembrar é que você pode apertar desfazer para voltar lá, então eu vou trabalhar meu caminho através dos sites, diz, diz, referindo-se às diretrizes da minha marca no meu quadro do Pinterest e certifique-se de que eu recebo tudo em que eu quero. As coisas mais importantes a serem configuradas nesta idade são o que temos na nossa lista de verificação de marca . Então, nossos fundos para a frente do título na frente do corpo e estourando as cores onde quer que nós queiramos , ,que nós já temos nosso logotipo dentro E, por enquanto, estou a manter as coisas simples. Não estou usando texturas ou padrões, mas isso é algo que podemos acrescentar mais tarde. Mas a coisa mais importante por agora é obtê-lo em frentes e cores e apenas ter um pouco de um jogo. Divirta-se um pouco e veja como as coisas ficam. Ok, ótimo. Eu estou feliz por agora com como tudo está olhando lá dentro, e nós temos toneladas de conteúdo ainda. Então não é e algumas das mudanças que fizemos desnecessariamente bastante relevantes ainda. Mas, por exemplo, eu estou mudando o corpo do texto para apenas estar em preto quando e se é um link quando você passa o mouse sobre ele , então ele vai para a cor azul, que eu gosto bastante, e nós temos tudo é em nossos fundos, tão realmente agradável e fácil de ler frente corpo e, em seguida, um grande forte, ousado frente título, o que é ótimo. Eu sou tão apenas algo para notar que para realmente navegar em torno do site. Você não pode fazer isso enquanto você está em estilos de visão porque ele só pensa que você está se você está clicando, ele só pensa que você está querendo alterar essas vendas sites sobre isso. Então, se você quiser navegar pelo site, você só precisa clicar de volta para o menu de design, e então você não poderia ir para cada página e ver como tudo está olhando. Por isso, vou deixar assim por enquanto. Andi, passe para o próximo passo em nossa próxima lição, que é analisar o design e o layout da página usando os livros do Squarespace. 8. Blocos de conteúdo: Ok, então estamos no último passo, a última peça do quebra-cabeça para projetar seu próprio site de espaço quadrado e torná-lo seu próprio. Nesta lição, vamos analisar a utilização dos blocos em cada página para criar um layout e design personalizados para o seu site. Em nossa primeira classe, onde construímos nosso site do squarespace, tocamos em blocos de conteúdo. Então, apenas para atualizar estes são os blocos de construção para o seu site, permitindo que você facilmente cair em uma página. Diferentes tipos de conteúdo do dedo do pé têm um design e layout que é exclusivo para você. Então, se nós nunca portão de volta para o menu inicial para fora da seção de design e selecionar páginas colando com a página inicial aqui você vê, quando eu passar o mouse sobre a seção principal da página inicial, nós obtemos esta caixa de diálogo com a opção de editar. Então, se clicarmos nele, estamos agora na janela do editor de página. O conteúdo que já temos aqui pode ser movido ou excluído, ou podemos adicionar um novo bloco na página inicial. Para fazer isso, precisamos passar o mouse sobre o lado esquerdo da página para obter o ícone de gota de chuva. Se clicarmos na gota de chuva, então ele traz um menu de todos os diferentes tipos de blocos de conteúdo. O ícone de cada bloco de conteúdo dá uma boa indicação sobre o que é e como ele será . Mas você também precisará brincar com os diferentes blocos para ver como eles ficam com seu próprio conteúdo e design. Na minha página inicial aqui, quero adicionar mais algumas imagens. Então eu vou excluir este bloco de imagem principal porque isso é apenas uma imagem. Basta passar o mouse sobre select elite e clicar em Sim, hum, e, em seguida, indo para obter o ícone de gota de chuva de volta, Escolha um novo bloco. Então eu quero escolher a partir da seção galeria de blocos, pois esta opção permite que várias imagens sejam exibidas. Então eu vou escolher a opção de apresentação de slides. Meu plano inicial para este site é sempre ter as imagens de largura total na primeira página do site. Eu tenho a opção agora toe ou fazer upload de novas imagens para o link galeria Oregon a partir da galeria existente. Em outra página, esta é uma opção bastante útil. Andi permitiria que você destacasse uma galeria em particular em sua página inicial. Se isso é algo que você queria fazer, vou fazer upload de algumas imagens novas. Já os guardei na minha estrutura de pastas. Vou selecionar estes completos e ver como vamos começar. Então, enquanto eles estão carregando, se clicarmos na aba de design na parte superior aqui, podemos ver que há muitas opções diferentes que podemos usar para personalizar nossa apresentação de slides. Ok, agora eles estão carregados. Se nós apenas clicar, aplicar Onda tinha aparecendo clique em Salvar. Podemos ver como isso parece. Podemos simplesmente expandir a tela lá para ter uma idéia de como a página inicial se parece agora que adicionamos essa apresentação de slides a ela. Então eu gosto que eles são grandes. Mas eu realmente não gosto disso. Quando você entra pela primeira vez entraria no site. Você não pode ver a imagem completa. Você só vê um pouco disso. Parece um pouco que sou doador, um pouco desajeitado. Então eu vou voltar e editar a página novamente. E se eu voltar para editar e clicar nele, a galeria eu posso realmente mudar o design para outro tipo de sangue conteúdo na banheira de design . Então nós selecionamos a opção de show de luz tese primeiro a partir dos blocos de conteúdo de gota de chuva que surgiram antes. E, mas agora também podemos usar um carrossel, uma grade ou empilhados. E especialmente agora que as imagens são carregadas, podemos ver rapidamente como pode parecer a transição entre aquelas diferentes. Então vamos dar uma olhada. Uma grade. Vamos cortar para um quadrado de 1 para 1, quatro imagens. Ok, vamos ver. Ok? Sim, Much Nieto. Eu realmente gosto da tela principal. Agora, se você imaginar alguém Londres em seu site aterrissando nesta página inicial, essa é a primeira coisa que eles verão vai ter um pouco mais de impacto, já que o espectador é capaz de ver várias imagens na íntegra ao mesmo tempo. Eu também posso ter um gatinho deixando este conteúdo Sangue aqui embaixo nesta linha embaixo aqui? Sim. Por isso, está ainda mais limpo. Então alguém vem ao meu site. Isto é o que eles pousam e eles podem ver para minhas imagens favoritas ao longo do topo aqui, e eles podem ver o menu imediatamente para ver quais outros tipos de conteúdo que pode ser, e eles podem ver meu logotipo frente e centro. E então, se eles rolarem para baixo, então eles são capazes de ver um pouco mais sobre o meu raciocínio por trás de porque eu comecei este site . Qual é a minha declaração de missão. Sim, embora meu plano inicial fosse ter uma imagem em tela cheia na página inicial por causa das outras decisões de design que tomei, incluindo o grande logotipo na parte superior aqui no menu. Essa ideia já não funciona tão bem, mas está tudo bem. É bom ser flexível durante todo o processo de design porque você nem sempre pode prever como algo vai procurar trabalho quando você está brainstorming. Então você só tem que Teoh estar preparado também. Uma vez que você entra no espaço quadrado, que uma idéia que você teve pode não ser realmente exatamente como você quer que seja. Você pode precisar se adaptar e mudar a idéia à medida que você avança, mas tudo bem. Você sabe que não há certo ou errado e sem regras. É que este é o seu site, e você tem que estar feliz com ele. Então eu movi essa declaração de missão para baixo para o final da página, hum, novamente para deixar as imagens se destacarem e para dar ao espectador a confirmação do que o site é sobre quando eles rolam para baixo. E eu só vou ajustar o funt para isso porque parece um pouco demais estar nas capitais e no fundo do título como este aparece. Então, se voltarmos aos contos de design e sites e eu puder fazer isso de forma agradável e rápida, não preciso escanear todas essas opções. Meu passe o mouse sobre essa linha, eu recebo essa caixa de sangria, e se eu clicar, ele me dá as opções de design para apenas isso, indo para lá para que eu possa clicar aqui e eu vou mudá-la. Toothy Audie fundo que nós reboques logo no início. E, sim, isso já parece melhor. Hum, é na cor certa que eu quero salvar isso. Volte para o menu inicial em tela cheia e sim, isso parece um pouco mais agradável. Era um pouco abrigado antes com os Capitals, então como uma página inicial. Estou muito feliz com isso agora, e ele tem aquelas imagens de argila completa, e se os espectadores rolarem para baixo, eles não estão sendo gritados, mas eles podem ver minha declaração de missão lá em baixo. Então é bom e simples eso Antes de passarmos para o próximo design de layout de página, eu quero mostrar a vocês outra coisa legal que podemos fazer com essas imagens aqui na tela inicial. Podemos realmente transformá-los em um link clicável através de outro lugar no site. Então, se voltarmos para editar o conteúdo da página, Andi, edite o bloco de conteúdo da galeria, selecionando até a guia Design e role para baixo até a parte inferior. Podemos ver este leilão aqui para abrir links em uma nova janela, então imagens com links serão abertas em uma nova janela. Cada. Selecione isso e volte para a guia de conteúdo. Se passarmos o mouse sobre a imagem, teremos essa opção extra teremos essa opção extrade menu aqui em cima. Estou para que possamos dobrar a imagem. Podemos editar a imagem ou olhar para as configurações da imagem, e aqui em baixo podemos clicar no dedo do pé, adicionar uma URL. Então, quando clicamos no euro, temos três opções, um link externo para algo para outro site e um arquivo ou outro pedaço de conteúdo dentro do site para que possamos realmente escolher um link para a página de sangue, que para este site. O momento é atualmente uma página desvinculada, então não está aparecendo no menu principal aqui. Bem, podemos ligar para uma página de galeria, uma de nossas colinas, rios ou árvores, páginas de galeria. Tudo o que podemos ligar para a página sobre e se tivéssemos quaisquer outras páginas lá e eles apareceriam aqui também. Então, se eu selecionar árvores porque essa imagem tem algumas árvores nele, então pelo menos isso é relevante e clique, salve e se aplica e salve. Você vê isso movendo o mouse sobre as imagens? E agora, quando movemos essa imagem que tem um link para ela, o mouse muda e podemos ver que ela não é clicável. E se clicarmos nisso, leva um direto para a galeria de árvores para que possamos voltar para a página inicial clicando no logotipo no topo. E então essa é apenas outra maneira interessante. Eu queria mostrar a você como você pode projetar a navegação em torno do seu site e incentivar os visitantes a clicar através de vídeos. E ao clicar nessas imagens, pode haver mais incentivado a mergulhar em seu site do que se eles estivessem apenas vendo as palavras no topo lá. Ok, então há um truque final de design e layout com espaço quadrado que eu quero mostrar a vocês. E para isso nós vamos cabeça dentada sobre Page. Então, nossa página sobre é outra página em branco que configuramos e criamos adicionando em nossos próprios livros de conteúdo específicos. E então eu tenho um bloco de imagem aqui no bloco de texto aqui. Então, digamos que eu queira adicionar outro conteúdo. Olhe para esta página. Isso é um bloco de resumo com links para, digamos, alguns dos meus postes de sangue. Então vamos para a edição. Podemos ver que temos resumos aqui no resumo. Blocos são outra ferramenta útil para ajudar a visitar para ver o que mais está em seu site sem ter que realmente clicar em qualquer menu. Eles são uma espécie de anúncio para o resto do seu conteúdo, e então eu vou dar uma olhada, um sangue resumo de carrossel, e nós temos a opção de exibir o conteúdo da página do sangue, todas as páginas da galeria I vou selecionar blawg, e o bloco de resumo está usando o conteúdo de espaço reservado fornecido com nosso tema Squarespace para exibir o título das imagens de preço de sangue na data. Assim que chegarmos a ele, podemos substituir este conteúdo por nosso próprio conteúdo de sangue que será atualizado neste bloco de resumo aqui. Mas, por enquanto, estou feliz em deixar o conteúdo de preenchimento do espaço quadrado ser usado para que eu possa ver como ele vai ficar até que eu possa mostrar-lhe isso e, por último, truque. Então, se formos até a guia de layout, podemos ver que há opções aqui de como o bloco de resumo ficará. Itens de proporção, tamanho do texto Perot, coisas assim. Também podemos selecionar os diferentes tipos de bloco de resumo para ver como eles podem parecer semelhantes a quando tivemos o bloco de galeria na última página e três na banheira de lâmina. Podemos ajustar mais configurações para decidir quais informações são mostradas como parte do bloco e mudar essa sintonia. Então acabamos de pegar o prego da postagem de sangue no título, então eu vou deixar assim, e isso é algo onde novamente, cabe a você brincar com as diferentes configurações, enganá-lo para o seu próprio gosto e certifique-se de que combina com você e seu site. O Eso. O que eu queria mostrar a vocês é como controlar o layout fora dos blocos dentro da página e porque, como você pode ver, nós, enquanto passamos o mouse, temos o ícone da mão, que significa que podemos arrastar isso aparência de conteúdo. Mas saber para onde vamos arrastá-lo e para onde ele vai ficar na página pode ser um pouco complicado se você não tem esse pequeno truque que eu fiz. Assim, os blocos são todos responsivos, e eles vão mudar de forma e tamanho, dependendo de onde eles estão na página. Então este é um recurso muito legal do Squarespace. Pode ser frustrante se você não descobrir como funciona. Então temos os nossos três quarteirões. Temos nossa imagem, nosso texto e nosso bloco de resumo aqui e assim pairando sobre a borda do bloco para obter o ícone da mão. Isso significa que agora posso pegar o bloco e arrastá-lo para um novo local ao redor da página . Assim que eu pegá-lo e começar a movê-lo, e você pode ver que linhas diferentes aparecem dependendo de onde eu movi o bloco para. Então essas linhas indicam para onde o bloco irá quando eu soltar o mouse. Então essa linha estava acima do bloco de imagem. E agora que deixei cair o livro lá, ele ficou naquele espaço ali. Então, se eu arrastá-lo novamente e ver a linha é ladrão largura total da página e se eu soltar o livro lá, ele muda para ser a largura total da página. E para colocá-lo de volta onde tínhamos antes, eu só quero que uma linha curta abaixo da imagem toda abaixo da caixa de texto, e ela a solte de volta para onde começamos. Eu também posso arrastá-lo desta forma. AM sobre a caixa de texto. Andi, lá vamos nós. Eu tenho essa linha curta ao lado dos livros didáticos e eles realmente sentam, sentam-se no meio dos três. Então eu sempre tenho, tipo, tipo, uma página de três colunas lá com texto de resumo de imagem Andi. Portanto, sabendo onde seus blocos vão acabar, é particularmente útil quando você começa a usar blocos espaçadores para manipular o layout. Então vamos colocar isso de volta no vínculo aqui. É isso. E vamos pegar uma gota de chuva para obter blocos espaçadores. Então, isso faz parte do nosso visual de conteúdo básico. É como espaçador. Você pode ver que podemos redimensionar o espaçador, então há esse espaçador. Você pode ver que podemos redimensionar o espaçador, Blocos são muito úteis. Uma vez que você tenha seus outros blocos de conteúdo dentro, você pode usá-los para adicionar preenchimento ao seu redor, conteúdo para dar-lhe mais espaço e estética mais limpa e simples. Mas, novamente, saber onde eles vão cair e como manipulá-los é o tipo de peça final do quebra-cabeça para mim sobre como fazer o site realmente olhar como você quer que ele pareça. Então, se eu arrastar isso para cima e eu pegar a linha no topo da página e soltar, esse espaço de bloco agora fica ao longo de todo o topo da página, então tudo foi derrubado por essa quantidade. Posso derrubar ainda mais. Vamos levá-lo de volta. Então, se eu arrastar o espaço um bloco para o fim do bloco de texto para obter essa linha curta e soltá-lo lá, você pode ver que ele é apenas colidido ao lado do bloco de texto lá, acima do bloco de resumo eu estou, e novamente, Eu posso arrastar isso e ele vai empurrar isso para baixo e ele vai dar meu pequeno blurb eles são um pouco mais de espaço. Você também pode arrastar o espaço de aparência dessa forma e para alterar o tamanho de ambos os lados. Então não é só consertado. Uma vez que você soltá-lo, você pode fazer mais ajustes. Então era isso que eu queria te mostrar. Só devo reiterar quando você estiver movendo blocos ao redor, ter certeza que a linha de posicionamento que aparece é onde você quer que o bloco acabe . Porque é assim que o Squarespace diz onde o bloco de conteúdo vai cair. E se você estiver usando um espaço de bloco para afetar outro bloco de conteúdo, verifique se a linha de posicionamento está fora do tamanho e ao lado do bloco que você deseja impactar. Então, por exemplo, se eu quisesse adicionar em outro espaço um bloco, mas eu queria sentar ao lado deste bloco de resumo aqui, os Samos, hum, o que eu fiz lá em cima, um teatro de drogas do livro e certifique-se de que eu obter essa linha curta lá. Você vê, se eu for mais longe, eu tenho uma longa linha, e isso significa que todo o comprimento da página vai ter o espaço um bloco sobre ela se eu deixá-lo lá agora. Mas eu só quero que o espaço do olhar afecte este bloco de resumo aqui. Então eu tenho aquela linha curta lá. Deixe ir. E lá vamos nós. O espaço do bloco está ligado com bloco de resumo. Lá estava sentado ao lado, Andi, assim como aquele ali em cima, e era lá que eu queria deixá-lo cair. Eu sabia que ia acabar lá porque por causa da linha de colocação, e eu sei que é um novo que não iria impactar a página inteira porque não era aquela fila longa. Então, o ponto importante que estou tentando fazer e fazer é que sabendo como os blocos funcionam e o que você pode fazer com eles sobre o que você pode fazer com o espaço de blocos, você é realmente capaz de criar um layout personalizado em suas páginas com seu próprio conteúdo e fazer a sua Web é única para você. Ok, então é assim que podemos usar esses blocos de conteúdo de espaço quadrado para projetar e criar um layout de site exclusivo para nós. Agora é mais para você trabalhar através de sua lista de verificação de marca e criar seu próprio site exclusivo . Certifique-se de compartilhar seu site acabado no projeto de custo e deixe-nos saber como você se sente sobre isso em como sempre. Se você tiver alguma dúvida ou qualquer outra coisa que você gostaria que eu respondesse, me avise na discussão Tab Bilow. 9. Outro: Certo, passamos por muita coisa nessa aula. Realizamos pesquisas para nos permitir desenvolver nossas próprias diretrizes de marca pessoal. Criamos nosso próprio logotipo no Squarespace e aprendemos a utilizar as ferramentas que o squarespace nos oferece em estilos de visão e blogs de conteúdo para realmente nos permitir criar um site exclusivo para nós. Espero que tenha achado isso útil. Andi tem gostado da aula e é permitido que você cresça seu lado, agitar e realmente desenvolver seu site. Esqueci-me de adicionar a sua imagem de inspiração no site de acabamento no projeto de classe abaixo em Daz. Sempre se você tiver alguma dúvida ou qualquer problema em tudo com o squarespace, eu colocá-los na discussão de cima para baixo abaixo. Eu vou ter certeza de voltar para você. Obrigado por assistir.