Squarespace 7. 1 fundamentos — Guia para iniciantes para a construção de sites profissionais

1. Apresentação: Portanto, existem outros tutoriais do Squarespace disponíveis. Mas eu queria criar um que estivesse atualizado com as últimas mudanças que o Squarespace lançou. E um que ajuda você a decidir primeiro se o Squarespace é a plataforma certa para você. Então, veremos alguns dos prós e contras de usá-lo. E então permite que você comece a criar rapidamente e elimine muitas das opções avançadas desnecessárias. Não vamos analisar todos os menus em detalhes, mas vou mostrar a maneira mais rápida possível de começar a criar algo que pareça sofisticado e profissional. Squarespace é uma opção fantástica para quem quer mergulhar no web design profissional. Menos a longa curva de aprendizado de opções como o WordPress, que eu também usei, se você é ótimo em projetar e criar, mas não gosta da ideia de codificar ou desenvolver , isso é ótimo opção. Você pode realmente criar resultados impressionantes com um mínimo de investimento de tempo. Olá, sou Jason Miller, designer gráfico e web com sede em Londres. Tenho mais de dez anos de experiência e passei mais de sete anos trabalhando com Squarespace e o WordPress como plataformas. Portanto, essa classe é dividida em três partes. Em primeiro lugar, fornecerei uma visão geral abrangente e responderei a algumas perguntas frequentes, que tenho certeza de que você tem duas. O que é o Squarespace? Quais são os prós e os contras de usá-lo? Quanto tempo será necessário para se familiarizar o suficiente para criar sites? E quanto controle ou liberdade o Squarespace oferece a você sobre seu design. Após a primeira seção, devemos estar em uma boa posição para decidir se isso é para você ou não. Na segunda seção, apresentarei um tutorial refinado de simplificação sobre design usando o Squarespace. Esta seção foi realmente projetada para orientá-lo e fazer com que você projete e crie usando a plataforma o mais rápido possível para obter projete e crie usando melhores resultados Eu recomendo acompanhar e realmente criar a sua própria exemplo de site. Enquanto eu o guiarei, criarei meu próprio site de amostra para a cervejaria evoke, marca fictícia que criei na minha última aula de Skillshare. Por fim, entendemos como o Squarespace funciona e agora criamos seu próprio site de amostra. Vou compartilhar com vocês algumas dicas, truques e melhores práticas. Mas eu aprendi na época em que criava sites com o Squarespace. E é isso. O projeto da aula é acompanhar e criar seu próprio site de amostra usando uma conta de teste gratuita do Squarespace. Então, estou pronto para isso. Quando você estiver pronto, vamos começar. 2. O Squarespace é para mim? Perguntas frequentes: Então, perguntas frequentes, uma boa pergunta para começar é: bem, o que é o Squarespace? Squarespace é uma plataforma, assim como aplicativos de mídia social como Facebook ou Instagram, eles permitem que você apresente e compartilhe conteúdo. Squarespace é uma plataforma web, portanto, permite criar, organizar, criar um layout e depois compartilhar com o público. O conteúdo de um site de uma plataforma web inclui WordPress, que talvez seja o mais usado, Wix, Webflow e outros. Portanto, nenhum web design em si não é muito avançado. Talvez, a princípio, você precise ter um conhecimento de hospedagem e codificação de servidores. Portanto, houve uma curva de aprendizado bastante acentuada. Mas hoje em dia, muitos dos itens que projetamos para uso digital acabam sendo exibidos em um site. De qualquer forma, a diferença entre web design e design, digamos, páginas estáticas em um aplicativo geralmente é o software, a interface que você está usando. Portanto, o SquareSpace, para todos os efeitos, ele age como um AP, uma interface. Uma plataforma é um termo técnico que você usa para criar e criar seus layouts. Pode ser tão simples quanto isso, mas tem a capacidade de ir muito mais fundo e oferecer alguns recursos avançados se você precisar aproveitá-los. Eu diria que hoje em dia, se você é designer gráfico, vale a pena se dedicar ao web design. E o Squarespace é um ótimo lugar para começar porque não é muito avançado. Você pode usar os princípios que usaria no design estático e traduzi-los imediatamente na criação de belos sites. A maioria, se não todos, de seus clientes precisarão de um site em algum momento e o adorarão como designer preferido. Você também pode cuidar disso. Portanto, não demora muito. Eu diria que, para me familiarizar com todas as opções, todos os recursos avançados podem levar semanas de uso. Mas, para criar algo profissional, adequado ao propósito, você definitivamente poderia tentar fazer isso em um dia, se não em alguns dias. Na verdade, a Squarespace comercializa sua plataforma como uma ferramenta tão simples que proprietários de empresas individuais podem usá-la e criar algo profissional. Agora, isso pode ser verdade se alguém estiver simplesmente trocando conteúdo e não fazendo nenhuma outra alteração. Mas acho que para realmente entender isso e entender as melhores práticas, é preciso um pouco mais de investimento de tempo do que isso. Dito isso, meu objetivo é que, quando você terminar esta curta aula, você esteja em condições de criar algo profissional. Você entenderá o essencial que precisa criar em nome do cliente e se sentirá muito familiarizado com o Squarespace como um todo. Portanto, os resultados podem parecer muito profissionais. Na verdade, se você olhasse meu portfólio, acho que teria dificuldade em dizer quais sites foram criados usando qual plataforma. Não acho que seria óbvio quais sites foram criados usando o WordPress e quais sites usando o Squarespace. Dito isso, somos incríveis. Os recursos avançados de uma plataforma como o WordPress oferece no squarespace não foram realmente projetados para atender a eles. Então, por exemplo, se você tivesse um cliente que fosse agente imobiliário e precisasse criar essencialmente um banco de dados que listasse propriedades diferentes e fornecesse resultados, responderia às consultas de pesquisa então o WordPress seria sua plataforma. Mas para a grande maioria das empresas que desejam que um site realmente mostre suas marcas e forneça informações, Squarespace é uma excelente opção. Portanto, existem algumas limitações e abordaremos algumas delas na próxima lição com os prós e os contras. Mas uma das principais diferenças é que WordPress é um software de código aberto, por isso recebe contribuições de uma comunidade maior. E muitas pessoas criaram vários plug-ins que você conecta ao Wordpress e que permitem resolver problemas específicos de uma forma personalizada Squarespace permite que você adicione alguns terços modificações partidárias, mas não há nem de longe tantas quanto o WordPress tem a oferecer se você der uma olhada nos modelos de amostra, mas o Squarespace oferece, geralmente você pode dizer rapidamente se tem mais recursos que você está procurando ou se há algo mais personalizado, mas não será capaz de cobrir. O Squarespace permite uma ampla variedade de personalizações, mas não permite que você personalize além dos recursos da predefinição. Então, embora o WordPress seja totalmente personalizado, você literalmente simularia algo no Photoshop e depois iria embora, construiria e criaria. Squarespace tem parâmetros e opções predefinidos, que são altamente testados e funcionam muito bem, o que é uma ótima notícia para empresas menores que não têm orçamento para um design totalmente personalizado. Em suma, eu compararia o Squarespace a comprar um terno pronto para uso, mas depois personalizá-lo para atender às suas necessidades. Onde o WordPress, bem, é o mesmo escolher tecidos e materiais individuais, criar um estilo do zero e ter um terno totalmente feito sob medida. Muitas vezes, o resultado final é muito semelhante, mas o processo é soldado. Espero que isso responda algumas de suas perguntas. Na próxima lição, veremos alguns prós e contras específicos para ajudá-lo a decidir se isso é para você. 3. Squarespace Prós & Contras: Nesta lição, apresentaremos uma visão geral rápida de alguns dos prós e contras de usar o Squarespace em comparação com outras plataformas, como talvez Wix e WordPress. Agora, para o primeiro, o profissional é para o squarespace, é fácil, quero dizer, muito fácil de usar. Agora, o Squarespace realmente comercializou isso como uma ferramenta que as pessoas poderiam usar para criar seu próprio site sem experiência anterior. Agora, com base no feedback que recebi de vários clientes, é um pouco complicado para as pessoas usarem a si mesmas para serem donas de uma empresa comum, a menos que tenham um pouco de tempo para aprender. como usar com o software. Mas para profissionais criativos, é muito simples de usar e vale a pena investir tempo inicial para aprender como usá-lo como fazê-lo da maneira certa. Para o Next Pro, é rápido. Tão rápido tende a coincidir com o fácil. Mas realmente existem muitas ferramentas, modelos e atalhos no Squarespace, todos projetados para ajudar você a montar algo que pareça profissional, mas o mais rápido possível. Agora, novamente, fizemos alguns esforços. Eu os vi aparecerem no YouTube. Estou afirmando que alguém poderia criar um site em 1 h. Talvez se isso fosse possível. Eu não acho que você poderia criar um site muito profissional e abrangente tão rapidamente. Mas certamente em um dia. Isso é possível, suponho, depende quão alto você está definindo o padrão, mas é rápido, muito rápido. Agora, isso é importante para a maioria das pessoas. Não há servidores para gerenciar. Agora, isso também vem com alguns contras, que consideraremos mais tarde. Mas isso significa que o Squarespace na verdade não dá acesso ao site principal. Tudo está em suas mãos para gerenciar, fazer backup e solucionar problemas. Portanto, você não precisa ter nenhum conhecimento de gerenciamento de servidores. Você não precisa instalar nenhuma de nossa infraestrutura. Você pode simplesmente criar uma conta do Squarespace e começar a criar sites e repassá-los aos clientes quando terminar. Então, potencialmente, isso evita uma enorme dor de cabeça. E os modelos, o Squarespace tem alguns modelos fantásticos. Na minha opinião, eles são muito melhores do que os modelos que você recebe de uma plataforma como o Wix. Alguns dos melhores modelos que eu já encontrei. Agora, embora eu os ajuste e personalize, eles são bons o suficiente para serem os fundamentos do ar, mas realmente oferecem um ótimo ponto de partida ao criar um novo site. Portanto, os modelos, especialmente se você está começando, são uma ótima maneira de aprender e se familiarizar com o que funciona e o que não funciona por meio de engenharia reversa. Alguns dos começos fantásticos que oferecemos a você. Então, agora vamos aos contras e há algumas limitações de design no Squarespace, por exemplo, com os cabeçalhos para navegação para um grande número de opções. Mas se você quiser ir além das opções que lhe são fornecidas, é muito difícil e potencialmente perigoso personalizá-las. Se você personalizar além da limitação definida, Squarespace oferece. Bem, isso significa que, quando futuras atualizações forem lançadas, algo poderá falhar em seu site. Então, se você está satisfeito com a opção que o Squarespace oferece, é fantástica e é um número cada vez maior de opções. Mas se você quiser fazer algo verdadeiramente personalizado ou se estiver trabalhando para clientes. Mas você conhece uma opção muito particular e meticulosa e não aceitará aqui ou talvez 20 ou 30 opções, mas eu não posso ir além disso. Então, sim, você pode ter alguns problemas. Eu diria que, para a grande maioria dos clientes, as opções que você oferece são todas as melhores práticas. O que funciona? É bom o suficiente para que sempre haja algo para qualquer um. Agora, essa é a desvantagem, associada à incapacidade de hospedar um site em seu próprio servidor. Então, para alguns de nós, se você tem vários sites WordPress, embora tenha uma grande dor de cabeça, precisa oferecer ajuda e suporte. Você precisa cuidar dos backups e assim por diante. Você cobra de seus clientes por esse serviço. Isso pode fazer parte de sua renda residual. Se você estiver usando o Squarespace, poderá hospedá-lo em nome deles e fazer uma maquete. Eu não sugeriria fazer isso porque qualquer pessoa poderia pesquisar no Google quanto custa ter um plano com o Squarespace. E eles podem não ficar felizes se você estiver tentando cobrar além disso. Então, de um modo geral, você entrega um site ao cliente no final e permite que ele tenha um link direto da conta do Squarespace para o site. Isso significa Squarespace e ganhar dinheiro com seu plano anual de hospedagem. Mas você não é. Portanto, essa é outra desvantagem, a falta de receita com a realização de mudanças. Agora, para mim, eu realmente não quero ganhar uma grande parte da minha renda apenas fazendo pequenas mudanças e ajustes, mas não sou de natureza criativa. Simplesmente, em sites como o WordPress, uma plataforma como o WordPress ou o cliente não se sente confortável em fazer certas alterações sozinhas, atualizar ou implementar mudanças provenientes de novos plug-ins. . Nada disso precisa acontecer no Squarespace. Depois de entregar isso a um cliente, é muito fácil para ele mudar e se atualizar. Mas é bem provável que, para a maioria das coisas, eles não voltem para você para ajustar isso ou corrigir aquilo. Eles serão capazes de fazer isso. Então, isso é potencialmente uma vantagem para seu cliente, mas pode ser uma desvantagem se você está confiando em obter uma renda fazendo mudanças especializadas. Squarespace é uma plataforma em que seus clientes realmente poderão fazer a maioria dessas mudanças sozinhos. Dito isso, odeio quando recebo e-mails pedindo que eu faça alterações técnicas ou atualizações em um site que estou aqui para criar. Isso é realmente o que eu gosto de ganhar dinheiro fazendo. Então, para mim, isso é uma boa notícia, mas eu sei que para alguns de vocês, isso pode ser um golpe e nosso último golpe, e isso não é um obstáculo de forma alguma. Mas embora o SEO no Squarespace seja decente, eu diria que é bom. Não é tão bom quanto o WordPress. Então, se você está buscando termos de pesquisa realmente competitivos no Google, notará que um site WordPress tem uma vantagem. Você não notará essa diferença ou essa vantagem, a menos que esteja realmente otimizando e usando palavras-chave extremamente competitivas. Mesmo assim, é um fator a considerar se o SEO é bom, mas não é excelente. Então, espero que essa visão geral honesta de alguns dos prós e contras informe você a tomar uma decisão sobre se essa é uma plataforma que você gostaria de usar ou não. Eu uso tanto o Squarespace quanto o WordPress. Experimentei rapidamente alguns sites no Wix e o Squarespace é uma das minhas plataformas favoritas. Eu uso o WordPress para trabalhos mais personalizados ou às vezes mais exigentes. E, para muitos dos meus clientes, o Squarespace tem sido absolutamente fantástico. Se você estiver convencido, junte-se a mim na próxima lição e começaremos a criar usando o Squarespace. 4. Vamos criar - escolha um ponto de partida: Para começar, a primeira coisa que precisamos fazer é visitar squarespace.com. Agora eu fiz isso sem estar logado. E essa é a tela que você verá. Você está procurando por v é iniciado por eles. Fixe a parte superior aqui. Vou explicar isso como se eu não tivesse criado outras contas do Squarespace. Na verdade, tenho uma tela diferente. Eu visitaria para fazer isso porque, como você pode ver, já criei alguns sites do Squarespace antes. Na verdade, nem todos se encaixam nesta página. Há 32 deles. Então, vou passar por isso com você. Vou acessar minha conta. Mas você verá uma página como essa e clicará em começar. Acho que você costumava chamar isso de mago que o guia pelas etapas. Se quiser, você pode pular esse assistente, que foi projetado apenas para mostrar modelos e ideias relevantes para você. Então, na verdade, vou clicar em pular, pular, pular. E esta é a página que eu quero chegar aqui, onde eu só posso ver e escolher quais modelos são do meu interesse. Então, vou fechar isso. E para meus propósitos, vou criá-lo. Então, isso está vinculado à minha conta. Enquanto estou ministrando esta aula, posso entrar novamente e guiá-lo pelas etapas. Então, aqui estamos nesta tela. Lembre-se de que você ainda não terá uma conta do Squarespace, então precisará criar uma depois de selecionar seu modelo. Agora, sobre os modelos e esse é um dos melhores recursos do Squarespace. Você pode encontrar algo que se aproxime o mais possível do que você deseja criar. E então, em vez de tentar imaginar e criar tudo do zero, você pode começar ajustando personalizando e trocando seu conteúdo. Agora, como designer profissional, você provavelmente desejará trocar muito mais de uma folha nova. Você também estará brincando com o layout. Não é provável que você aceite um modelo exatamente como ele vem do Squarespace. E se você estiver fazendo isso profissionalmente, é isso que outras pessoas o contratarão para fazer para realmente colocar sua própria visão criativa nisso. Mas esse é um ótimo lugar para começar e você pode ver que há uma grande variedade de modelos disponíveis. Então, se quiser, você pode explorar as várias categorias. Obviamente, estou criando meu site de amostra para a cervejaria fictícia evoke. Então, eu poderia dar uma olhada nos alimentos, ver quais modelos as pessoas marcaram nessa categoria. Talvez eu também pudesse ver os restaurantes. Talvez seja o tipo de aparência que estou procurando. Mas você entendeu a ideia. Há muitos e muitos modelos para escolher. E se você tiver certeza do modelo que deseja usar, clique em começar, mas eu recomendaria clicar primeiro na pré-visualização , em vez de julgá-la pela miniatura. E clique na pré-visualização e dê uma olhada, navegue e veja o que você acha de um modelo. Agora, se quiser, você pode clicar, começar sem um modelo e começar do zero e começar do zero criar um site a partir de páginas em branco. Essa é uma opção. Mas acho que a engenharia reversa de alguns desses modelos realmente ajudará você a entender inicialmente o que pode ser feito. E é muito mais fácil ajustar do que criar do zero quando você ainda não está familiarizado com o Squarespace. Então, talvez pause o vídeo aqui. Se você está acompanhando seu próprio projeto, dê uma boa olhada nos modelos e escolha um que considere relevante para você. Hum, você, é claro, não precisa escolher o mesmo modelo que eu. Agora, vale a pena dizer que isso não é como plataformas como o WordPress, onde o modelo que você escolhe significa que você tem certas limitações. No Squarespace. O modelo é apenas um ponto de partida. Então eu poderia, se eu examinasse as configurações de estilo e fizesse alterações, eu poderia transformar esse modelo no centro aqui em este modelo aqui eu poderia fazer com que parecesse exatamente o mesmo. Não há nada que eu encontre que, por causa de um modelo, eu não consiga fazer. Então. Você ainda tem acesso total, personalize todas as configurações. Então, o que você está procurando nos modelos iniciais? Bem, não precisa necessariamente ser fontes. Esses são muito fáceis de mudar. As cores são fáceis de mudar. Às vezes, procuro apenas o layout geral, a aparência que eles usaram, qual modelo me dará menos trabalho a fazer e qual modelo, à medida que eu percorro, vejo layouts, mas acho que isso funcionaria bem para minha marca. Esse parecia bom, mas enquanto eu rolo para baixo, não tenho certeza se esse tipo de cabeçalho deslocado, as imagens daquelas que saíram de Denver. Não tenho certeza disso. Isso é realmente o ajuste certo para mim. Ok. Aqui está um. Eu gosto de não ter certeza de como você pronuncia isso. Talvez Kolyma. Mas eu definitivamente vou ter um tema bastante sombrio. Acho que é um fundo preto fosco. Gosto muito do texto grande. Como algumas das ideias de layout, muitas imagens completas. Então, sim, para mim, acho que isso seria um bom ponto de partida. Portanto, você pode clicar para ver um site de demonstração completo aqui, se quiser, mas abriria em uma nova guia se quiser comparar alguns lado a lado. Mas eu estou feliz. Então, vou clicar em Começar com este design. Faça o mesmo com seu modelo preferido e, em seguida, junte-se a mim na próxima etapa. Então, o Squarespace agora, para mim, está adicionando isso à minha conta. E chego imediatamente a uma página onde posso preencher os detalhes específicos deste site. Para si mesmo, você só precisaria criar uma conta no Squarespace. Então, as coisas usuais que você esperaria digitar um endereço de e-mail, escolher uma senha, coisas assim. Então, quando você chegar a esta página, vou chamar o site de evoke brewery. Faça o mesmo, dê v, cite o título relevante para sua marca. E essas páginas estão apenas nos informando o que podemos fazer agora com um Squarespace novo e aprimorado e onde estamos. Então, vamos orientá-lo com o que temos à nossa frente aqui. A barra lateral à esquerda. Essa é essencialmente a sua maneira de navegar pelo back-end do Squarespace. Portanto, o front-end, o que o visitante vê quando o site for lançado, será tudo à direita dessa barra lateral, que eu posso abrir para acessar a tela cheia clicando no botão no canto superior direito. Então, esse é o front-end que seus visitantes veriam. Essa barra lateral nos ajuda a navegar no backend V. No squarespace, você tem uma certa quantidade de tempo, que variou ao longo dos anos. Geralmente são cerca de dois meses porque eu tenho uma conta Pro, uma conta circular, eu recebo um pouco mais, então na verdade tenho 182 dias, o que é bastante generoso. Você sempre pode contatá-los se estiver trabalhando em nome de um cliente e precisar de um pouco mais de tempo, mas essa é a quantidade de tempo que você pode criar um site sem precisar de nenhum plano pago. Onde esse site existe? Por enquanto? Embora você possa inserir um nome de domínio, nome de domínio que você comprou no Squarespace ou em outro lugar. Você pode colocá-lo no lugar com bastante facilidade. Mas, por enquanto, o Squarespace atribui um nome de domínio principal temporário. Portanto, vale a pena marcar esta página como favorita. Isso é o que você revisitará para acessar com o back-end. E isso pode ser personalizado. Isso me deu uma sequência aleatória de palavras aqui, jacaré Cat 7. Então, se eu acessar Configurações e domínios, você pode ver isso, além de ter a opção de comprar ou se conectar. Um domínio adequado, Squarespace nos oferece subdomínios gratuitamente. que significa que, enquanto estamos desenvolvendo isso, se eu clicar aqui nesse nome de domínio atribuído aleatoriamente, eu poderia realmente escolher um que seja mais relevante para a marca, que eu acho um bom toque profissional. Então, vou usar, supondo que seja gratuito, evoke brewery e clicar em Renomear. E assim, você verá que isso mudou. E isso agora é via vestido que visito para acessar o backend de um site. Falaremos, embora voltemos a falar sobre isso quando analisarmos o que você faz para lançar o site, analisaremos a visibilidade e as permissões do site que o Squarespace configura por padrão. Portanto, se você acessar Configurações, Disponibilidade do site, poderá ver, por padrão, que isso está definido como privado. Portanto, somente você ou alguém para quem você fornece esse link específico. E você não precisa de v, as partes no final aqui, é só confessar em.com. Se você fornecer esse link a alguém e essa pessoa não estiver logada , ela não verá nada. Então você pode mudar isso. Você pode selecionar uma opção protegida por senha e selecionar uma senha. Dessa forma, se você enviar um seus clientes em potencial ou site para seus clientes em potencial ou para alguém que você gostaria de ver. Se você os enviar via URL na parte superior aqui, junto com uma senha que você selecionou, a Bell realmente poderá salvar um site agora mesmo. Qualquer alteração que você fizer será refletida em tempo real. Então, esse é um toque muito bom quando se trata de trabalhar com clientes e enviá-los. Talvez você envie atualizações sobre seu progresso ou envie os estágios do site para obter algum feedback deles. É muito bom poder fazer isso e ter um bom URL com aparência profissional. Então, essa é uma das coisas que devo dizer que adoro no Squarespace. Se você estiver trabalhando com o WordPress ou outras plataformas, pode haver um pouco de trabalho administrativo por trás da criação de um nome de domínio, configuração de algo no servidor preparação para começar projetando. Com o Squarespace. Você pode literalmente fazer isso com apenas alguns cliques. Então, aqui estamos. Selecionamos nosso modelo. Temos um domínio temporário e estamos prontos para começar a personalizar e projetar. Então, faremos isso juntos na próxima lição. 5. Vamos criar - personalizar o modelo: Em uma lição anterior, preparamos nosso ponto de partida e agora o implementamos. Este é o modelo escolhido, alguns exemplos de conteúdo e estamos prontos para começar a personalizar. Então, o que eu sugiro, novamente, este curso não é para mostrar o que cada menu e botão de uma opção faz, é orientá-lo por um processo simplificado para começar a criar e aprender o essencial para criar algo que pareça profissional o mais rápido possível. Então, eu recomendo começar pela página inicial. E se você quiser verificar qual página você está visualizando atualmente na barra lateral do V Squarespace. Se você clicar em Páginas, você verá uma cor acinzentada em maiúsculas ao lado de cada uma de nossas seções. Tem a palavra demo. Isso é para que você saiba que se trata apenas de conteúdo de demonstração que você está usando. No momento, estamos vendo a página inicial que está em destaque. E quando se trata de criar estilo, acho que essa pode ser uma página muito boa de se ver porque tem uma mistura de conteúdo. Então, tudo isso vai fazer um pouco mais de sentido à medida que mergulharmos. Pessoalmente, começo com o cabeçalho. Então você entra no modo de edição. Primeiro de tudo. E você tem um pequeno botão no canto superior esquerdo. O Butt leva você para o modo de edição ou você pode clicar duas vezes em qualquer lugar da página. Então, vou clicar no botão para entrar no modo de edição. E você vê que isso agora carrega a página menos nossa barra lateral do Squarespace. E ao passar o mouse sobre diferentes elementos, você pode ver os blocos que compõem esses elementos no Squarespace. Eles também estão divididos em seções. E você tem um pouco de controle sobre as configurações de cada seção, de cada bloco e de cada página inteira. Então, abordaremos isso um pouco mais detalhadamente quando começarmos a personalizar o conteúdo. Mas vamos começar analisando o estilo e mantendo esse conteúdo de demonstração instalado por enquanto. Portanto, o cabeçalho, se eu passar o mouse em direção ao cabeçalho do site e enquanto eu estiver no modo de edição, você verá essa opção Editar cabeçalho do site. Então, eu vou clicar nisso. E, como eu disse, nós escolhemos o modelo que você escolhe. Ele não bloqueia as opções. Ele apenas fornece certas configurações para começar com conteúdo de demonstração incerto. Assim, eu poderia obter qualquer tipo de cabeçalho que eu quisesse apenas alterando as configurações que temos aqui. Então, no título e no logotipo do site, temos a opção de adicionar nosso próprio logotipo personalizado, o que eu definitivamente farei. Mas primeiro eu vou voltar. E vou dar uma olhada usando essa guia aqui na visualização da área de trabalho. Quero selecionar um layout que me agrade, o cabeçalho. Então, vou clicar em Layout do cabeçalho. E eu gostaria muito de ver como as coisas estão. Acho que temos nosso logotipo no centro. Essa pequena caixa representa seus links sociais. E então a navegação estaria à esquerda. Eu poderia mudar isso. É muito fácil mudar o que foi revertido no futuro. Vou clicar nele por enquanto e voltar. Outra coisa que eu gostaria de fazer. Não quero que isso seja transparente. Eu gostaria muito de poder ver uma cor sólida por trás do cabeçalho. Então, para isso, vou voltar para essas configurações aplicadas globalmente, que é essa pequena guia de globo no topo aqui. E se eu clicar em estilo, você pode ver se um momento, etcetera dinâmico. Eu gostaria de selecionar o tema conforme estilizamos. E isso me permitirá escolher uma das cores, mas ela está presente no meu tema. A outra opção, sólida, permite escolher qualquer cor de sua preferência aqui. Mas eu gostaria muito de associar isso às cores do meu tema. Então, vou selecionar a opção V dark que na verdade, é bem próxima do que estou procurando, para minha marca. Mas vou personalizar essas cores com você. Próximo. Se eu voltar ao título e logotipo do site agora, estou pronto para trocar meu logotipo. Então, vou navegar até isso. Ou você pode simplesmente arrastar e soltar. E eu tenho um arquivo preparado, mas está certo. Portanto, você não gostaria de nenhum espaço negativo ao redor do logotipo. Você quer que seja bem cortado e bem. E para meus propósitos, preciso de uma versão light do meu logotipo. Não vou usar o logotipo completo, que posso mostrar se eu o abrir aqui, esse seria meu logotipo completo. Em vez disso, vou usar isso, que é apenas para o tipo de logotipo. Então, vou arrastar isso para a seção do logotipo veterinário. E é isso mesmo. Foi colocado no lugar. Então, isso é um pouco menor do que eu gostaria. E você pode ver que tem algumas opções aqui para ajustar o tamanho. Ele só oferece a opção de ajustar a altura, mas para o WIP, siga de acordo. Então, vamos aumentar a altura 80 pixels. Isso parece bom. E depois uma altura móvel. Vou mover esse controle deslizante para que fique meio que coincida. A propósito, você pode alternar entre a visualização desktop e móvel usando os dois botões na parte superior aqui, o que é bastante útil. Então, se eu fizer isso, é assim que fica na visualização móvel. Então, estou muito feliz com essas configurações. Vale a pena mencionar quaisquer alterações feitas no conteúdo do V, mesmo o estilo necessário para salvá-las Elas não serão publicadas automaticamente. No canto superior esquerdo, onde está escrito Concluído. Se você passar o mouse sobre isso, você tem duas opções para salvar ou descartar suas alterações. Então, vou clicar em Salvar. E isso agora salvou o estilo V para esse novo cabeçalho. Mas eu configurei agora que todas as outras mudanças de estilo foram realmente feitas, não ao vivo na página, mas em uma seção especial. Então, se voltarmos para a parte inicial da barra lateral do Squarespace, você verá que há um título de design. E é aqui que o resto de nossas mudanças de estilo ocorrerão. Se você clicar na primeira opção, estilos do site verá que há várias categorias aqui, fontes, cores e animações. Esse é um novo recurso com o qual estou muito satisfeito. Squarespace adicionou um espaçamento, espaçamento global. Você também pode personalizar botões e blocos de imagem. Portanto, eu recomendaria que ler esses títulos seja silencioso, intuitivo bastante autoexplicativo, mas apenas personalizá-los e alterá-los para atender às suas necessidades, acordo com sua marca. Então, vou começar com as fontes e ter um momento. A fonte não reflete exatamente o que eu tinha em mente para a cervejaria. Essa é uma fonte bastante genérica e em negrito. É legível, fácil de ler, mas quero usar algo que talvez seja um pouco mais leve, um pouco mais elegante. E para meus títulos principais, eu poderia tentar escolher algo um pouco mais próximo do texto para evoke. Um tipo de letra serifado. O Squarespace oferece alguns pontos de partida. Ele sempre tenta quase oferecer uma opção mais fácil e , se quiser, você pode mergulhar mais fundo. Então, se você gostou das fontes que já foram sugeridas pelo modelo, você pode mantê-las no lugar. Você tem algumas opções, como ajustar o tamanho da base, que você pode ver em tempo real. Ele mostra uma prévia global. Mas, novamente, até você ir para Salvar no canto superior esquerdo, nada, nada está gravado em pedra. Assim, você pode clicar nesses títulos, parágrafos e escolher entre uma variedade de opções aqui. Se você quiser manter a mesma fonte ou clicar na família de fontes, poderá trocar por uma fonte diferente por ele. Se eu clicar em voltar. Antes de começar, se você quiser mudar as fontes, se você clicar nesta seção aqui, temos um momento. Diz Acumen Pro. Você verá que diz pacote de fontes e tem a opção de mudar. Então, se clicarmos para mudar o pacote de fontes, isso realmente fornecerá uma combinação de emparelhamento de fontes pré-configuradas. Então, eu recomendo experimentar alguns desses. Você não está salvando nada. Portanto, é muito fácil simplesmente clicar neles, dar uma olhada e tentar obter algo que esteja na direção geral você está procurando antes ajustar e seguir em frente e faça mudanças mais minuciosas. Portanto, esse é um recurso bastante útil de usar. Acumen Pro. Acho que esse é o pacote de fontes que veio pré-carregado com este modelo. Futuro. Esse é um que eu costumo usar, e assim por diante. Há muitas opções lá. Também os divide em sans-serif. Serif, um sans serif misto, sem as pequenas serifas nas bordas dos personagens. Serif inclui essas bordas, por isso tem uma aparência mais tradicional e clássica. E se eu clicar em algumas dessas opções, você verá que isso faz uma grande diferença no estilo geral. Agora, para leitura de tela, I'm sans serif é definitivamente melhor para seu texto menor, seus textos corporais, é menos provável que se separem. E se alguém não tiver a tela de retina mais recente. Então, é aí que a opção mista é muito boa e nem sempre, mas geralmente, essas opções mistas podem combinar uma fonte serif para seus títulos para o texto maior com san-serif para v, menor texto. Isso foi feito na prévia, na verdade não foi feito com este trecho de texto aqui. Eu me pergunto se talvez, ok, então está classificando isso como corpo de texto. Suponho que isso ainda seja um título pequeno. Então, novamente, você pode ter saído ou por meio das opções do Font Pack. Mas, novamente, você pode clicar e dar uma olhada em algumas das opções aqui em selecionar algo que você acha que funciona para sua marca. Agora, para essa marca, eu sei o que estou procurando. Então, vou analisar e escolher algo mais específico. Então, para meus parágrafos, definitivamente não quero usar Arielle. Se você acessar Procurar todas as fontes, verá que há uma ampla biblioteca. E acredito que, no momento, isso está retirando fontes do Google, do Adobe Typekit e também de algumas outras fundições. Portanto, há uma grande seleção e você levaria muito tempo para percorrer todas as opções. Portanto, há essa função de pesquisa útil. Se você estiver trabalhando em uma marca em que já escolheu fontes e cores. Ou você pode simplesmente digitar o nome de uma fonte que você está procurando diretamente ali. Vou usar o Lato, que é minha fonte preferida para o corpo do texto. E nós escolhemos essa opção. Eu poderia então escolher um peso personalizável, o que farei. Vou deixar isso um pouco mais leve. Espaçamento entre letras. Estou feliz com. Você pode ver o visto, opções bastante autoexplicativas para ajuste fino. Squarespace gerencia as fontes dando elas um dos poucos tipos de estilo diferentes. Portanto, existem vários tipos diferentes de cabeçalho e três tipos diferentes de parágrafo. Então, se eu salvar minhas alterações por enquanto, e a velocidade for muito boa, mas às vezes você selecionará uma função. Demoramos alguns segundos para carregar e atualizar. Se eu clicar duas vezes para entrar no modo de edição, vamos nos concentrar apenas nessa parte do texto aqui. Você pode ver que, ao destacar esse texto de um momento, ele é atribuído ao título das orações, sendo também o título 32.11 o maior, por ser o menor. E então você tem seus parágrafos, 1, novamente sendo o maior, livre sendo o menor. Então, agora sabemos o que está afetando. Serão essas partes dos textos, mas você pode fornecer uma dessas predefinições. Se voltarmos para economizar, não teríamos esse texto muito pequeno. Mas, apenas como demonstração, voltaremos ao estilo, fontes, aos parágrafos. Agora, se você olhar na parte inferior onde temos esse controle deslizante, escolha o tamanho de cada um desses tipos de parágrafo. Porque atribuí parágrafos livres a essa parte do texto. Quando eu movo o controle deslizante, você pode ver que é isso que está afetando. Portanto, é muito bom empilhar esses soviéticos. Você tem algumas opções quando se trata criar alguns parágrafos maiores, mas talvez também um texto menor. Agora, veja meus textos de cabeçalho e tenha em mente, enquanto eu estou mostrando meu exemplo. Por favor, resolva isso sozinho. Você não precisará usar cada uma das opções que estou selecionando. Isso é exatamente o que eu acho que seria melhor para a marca com a qual estou trabalhando. Portanto, no meu caso, para meus títulos, acho que não conseguirei encontrar uma fonte que corresponda a essa fonte personalizada para evoke de forma suficientemente próxima. Se eu não conseguir combiná-lo exatamente, prefiro usar algo que o complemente. A fonte que usei aqui para Brewery, o slogan é Futura. Então, vou clicar nos títulos, selecionar família, procurar tudo. Procure por Futura PT, isso é perfeito. Isso agora trocará a cama como uma fonte de título. Agora, isso está muito longe do que eu espero alcançar com os títulos. Por um lado, quero que seja uma fonte muito mais leve. Então eu vou mudar o peso, vou baixá-lo para 300. Sobre uma aparência bonita, leve e elegante. Também quero que apareça apenas em maiúsculas. E isso é uma pequena dica, mas às vezes funciona muito bem. Somente cabeçalhos em maiúsculas. Então, fazemos isso nesta seção aqui. Transformação de texto em maiúsculas. E agora isso só vai aparecer em letras maiúsculas desse jeito. E então, embora eu não vá espaçá-lo de forma tão dramática quanto no logotipo da cervejaria. Definitivamente vou aumentar V, menos espaçamento. Então, vamos tentar. Talvez seja um pouco demais. Vamos tentar. Nada 0,15 EM. Isso parece muito bom. Mas eu posso ver que vou ter alguns problemas, se eu o tiver tão espaçado, podemos ver esses pequenos textos. Está ocupando três linhas. Acho que esse é o maior tamanho de cabeçalho. Então, vou reduzir isso um pouco. Eu uso grátis como v, tamanho maior, reduza um pouco. Se eu quiser encontrar exemplos de textos com esses tamanhos específicos, você pode dar uma olhada. Mas, geralmente, nos modelos da página inicial, você deve ser capaz de encontrar um exemplo de tudo. Então aí está meu título dois, não tenho certeza se vou ter um título livre, mas talvez sim, haja alguns textos em movimento. Eles estão se libertando. Vai ficar um pouco menor. Novamente. Se fosse livre, na verdade, eu usaria para uma quantidade considerável de textos, talvez um parágrafo, mas algo que eu gostaria de destacar. Acho que parece muito bom lá. E depois, falando pessoalmente, vou usar gordura para textos, mas talvez apenas introduza um parágrafo. Então, eu faria com que esse tivesse o mesmo tamanho do texto do parágrafo. Eu colocaria isso apenas em 1,1. Então, é quase do mesmo tamanho. Só tem um estilo diferente. Então é isso. Depois de clicar em Voltar e depois clicar em Salvar. Isso transformou enormemente a aparência. Um modelo que já está fazendo essas alterações de fonte. E é isso mesmo. Podemos ajustar conforme você avança no design. Mas, como ponto de partida, pronto, minhas fontes estão prontas. Agora. Você também pode personalizar as fontes dos seus botões, o que eu ainda não fiz. Talvez eu não mostre cada uma dessas configurações passo a passo porque elas estão repetindo o mesmo processo. Você escolhe suas fontes. E então você vai e está ajustando cada um desses controles deslizantes para personalizá-lo. Então, isso é bastante autoexplicativo. Não vou mostrar cada um deles, mas vou sair da câmera e ajustar o estilo dos botões e o estilo dos botões onde estamos, se você estiver interessado, essas são as configurações que chego Novamente, eu gosto bastante de letras maiúsculas para os botões. Um espaçamento agradável e generoso. Então, para mim, isso parece, parece muito bom. Um recurso muito bom que mencionarei ao clicar na guia do botão secundário. Na verdade, temos um pequeno aviso agora para dizer que esta página não tem um então, seja qual for o elemento. Então, isso é muito útil quando você está estilizando. Se você encontrar um elemento que não está presente na página, é um toque muito bom. Há um pequeno aviso para você aí. Então, novamente, você tem três tipos diferentes de botões. Você configura a predefinição e, em seguida, está pronto para usar , mas em todo o modelo. Então, a próxima grande personalização é a cor. Não vou mudar muito a cor porque na minha marca estamos realmente usando cores em tons de cinza, que são muito próximas às que temos no modelo. Mas vou te orientar nesse processo de qualquer maneira. Então, novamente, estamos em Estilos do Site. E desta vez, em vez de fontes, queremos clicar nas cores. E você pode ver que essa é a paleta de cores atual. Então você tem algumas opções. Vou explicar como eles são aplicados primeiro. Assim, cada uma das cores na paleta do seu tema aplicará a uma predefinição e começará fornecendo predefinições claras, predefinições claras, predefinições escuras e, em seguida, predefinições mais escuras. Na verdade, estou usando um coquetel das cores que você deu a ele. Agora, isso leva você a um ponto de partida muito rápido. Mas, novamente, se você precisar personalizar e ajustar, há muitas personalizações que você pode fazer. Se você clicar no pequeno ícone de edição de qualquer uma dessas opções, essas opções predefinidas. Você verá que ele o leva a cada elemento do seu site. E você pode personalizar completamente a cor usada. Então, se eu clicasse, por exemplo neste aqui para parágrafos pequenos queria que eles tivessem uma cor diferente. Eu poderia escolher qualquer cor que eu quiser. Ou se eu clicar na guia da paleta, posso clicar em uma das cores que programei na paleta de cores. Muita personalização, mas você não precisa passar por todas as opções. Você só usa isso para encontrar, ajustar e ajustar o que eu adoro. E você pode realmente ver no canto superior direito de cada seção da página qual combinação de cores foi aplicada na sua paleta. Então você pode ver esta seção. Tem uma cor escura aplicada a ela, que combina com esta aqui. E esta seção também é brilhante, isso combina aqui em cima. Então, antes de realmente ajustarmos as cores , devemos dar uma ideia de como Squarespace as está usando e aplicando e do tipo de nível de controle que você tem. Portanto, não vou salvar minhas alterações, mas farei alguns ajustes bastante dramáticos aqui, só para que você possa ver isso. Sendo usado. Portanto, eles têm predefinições que você pode selecionar. Estou usando uma das predefinições no momento. Se eu escolher uma predefinição como essa, basta clicar nesse botão, todas as cores de todo o seu site mudarão desse jeito. Portanto, é uma maneira muito poderosa de visualizar diferentes combinações de cores sem fazer alterações destrutivas. Agora, se você é como eu, especialmente se trabalha para uma marca, se chegou a esse estágio, você já criou um logotipo. Você provavelmente estabeleceu a paleta de cores, se não em sua totalidade, provavelmente obteve pelo menos as cores principais que planeja usar. Então, uma opção, e eu não uso isso porque não tenho certeza se é 100% na Coréia, é que você tem uma guia da Imagem e pode realmente arrastar uma imagem e o Squarespace identificará as cores que aparecem nessa imagem. Então, isso pode ser útil se você estiver procurando por ideias ou olhando para o topo, você pode ignorar as predefinições e selecionar cada uma dessas cores sozinho. Squarespace implementa isso indo do mais claro para o mais escuro. E eu acho que você tem suas, suas cores saturadas pareciam funcionar melhor se você as colocasse no meio de um paladar. Então, quando vamos para a paleta Editar, tente dar a ela pelo menos uma cor clara e escura. E, de graça, no centro, você é um pouco mais livre para ajustar e jogar. Isso tende a garantir que quando essas cores são inseridas no modelo, funcionem conforme o esperado. Então, por exemplo, eu poderia escolher uma versão empoeirada de uma turquesa. Eu poderia então escolher uma versão forte de uma turquesa. Poderia escolher algo assim para esta quarta opção aqui. Então, está se aproximando de uma cor muito escura, mas ainda existe a possibilidade de ter alguma saturação que ainda funcione bem. E então, para sua cor escura, você realmente quer que seja preto ou talvez um cinza espesso. Agora, se eu percorrer, você pode ver que essa combinação, ser inserida no modelo, funciona conforme o esperado. Há um bom contraste e estamos obtendo os resultados esperados. Na verdade, vou descartar isso porque fiquei feliz com a paleta que recebi para começar. Mesmo assim como esse tom marrom empoeirado que temos aqui. Então, estou muito feliz em começar a usar essa paleta de cores. E isso acontece às vezes no Squarespace. É uma das vantagens. Às vezes, você fica agradavelmente surpreso e um modelo o aproxima o suficiente do que você está procurando, para que você não precise percorrer páginas de opções. E você não precisa se ajustar se estiver satisfeito com o que é apresentado para começar. Então, agora inserimos algumas das principais facetas da aparência de uma marca, as fontes, as cores, e podemos ver que elas estão aparecendo em nosso conteúdo de demonstração. Mas tenho certeza de que você está muito interessado em começar a implementar seu próprio conteúdo. Mas há mais uma etapa a ser tomada antes de começarmos a trocar conteúdo, que é apenas dar uma olhada em nossas páginas e navegação. E agora que temos uma boa ideia da aparência estamos obtendo do nosso estilo feminino, começaremos a decidir quais páginas serão mantidas. E passaremos um pouco de tempo explicando a navegação. Então, faremos isso juntos na próxima lição. 6. Vamos criar - tipos de página e navegação: Nesta lição, veremos que nossas páginas são tipos de página e a navegação v. V funciona no Squarespace. Agora, os tipos de página são algo que pode ser um pouco confuso. Acho que é porque o Squarespace lançou progressivamente atualizações, uma em cima da outra. Portanto, não é a parte mais intuitiva do Squarespace, mas prometo que faz sentido. Então, vamos começar com a navegação. Agora. Se você olhar para a barra lateral, visitei a seção v Páginas. E isso é dividido em duas partes. Na primeira parte, temos um cabeçalho de navegação principal, e você notará qualquer conteúdo que colocarmos aqui. Ele também aparece em nossa navegação no cabeçalho de um site. Há outra seção chamada não vinculada. E nossa página inicial é uma dessas páginas no momento. E qualquer coisa nesta seção aqui, embora seja uma página, possa ser visitada, vinculada não aparecerá na navegação na parte superior. Então, para demonstrar que o Wave funciona, se eu arrastar nossa seção inicial até o topo da nossa navegação principal, você verá que agora aparece na navegação em nosso cabeçalho. Está sublinhado para destacar que essa é a página que estamos visualizando no momento e não está mais na seção Não estão vinculadas. Agora, não precisei clicar em salvar para que isso acontecesse. Então, isso é algo que realmente acontece em tempo real quando você arrasta páginas na navegação. Então, isso é um pouco assustador. Ao mesmo tempo, é muito fácil desfazer e simplesmente arrastá-lo de volta. Se eu não estivesse feliz com o que eu tinha feito. Acho que vou ficar em casa no início de nossa navegação. Por padrão, o logotipo V funciona como um botão inicial. Acho que muitos visitantes estão familiarizados com isso agora, mas alguns ainda gostam de ver o lar na navegação. Então, vou mantê-lo lá para mantê-los felizes. Então, alguns desses conteúdos de demonstração, você decidirá manter, alguns deles você não precisará. Então, eu sugeriria clicar. Vou clicar em sobre e ver se gosto desse conteúdo de demonstração. Se eu preferir criar algo do zero. Então v Sobre a página. Sim, talvez haja algo com que eu possa trabalhar. Pode mudar o tema disso de algo claro para algo um pouco mais escuro. Mas eu posso continuar clicando nos instrutores. E você notará que, quando eu clicar em uma página, esse pequeno ícone de demonstração desaparece. Isso porque se você clicar em uma página e decidir não clicar nessa pequena lixeira à esquerda para excluí-la. Acho que o Squarespace presume você queira manter esse conteúdo, então ele remove esse pequeno lembrete de demonstração. Nossos instrutores, eu não adoro isso. Acho que poderíamos fazer melhor. Vou clicar na lixeira à esquerda e excluir. Depois de clicar em Confirmar, pronto. A página sumiu. Mas você notará que ao excluir minha primeira página, esta pequena seção aparece aqui, páginas excluídas. E se você clicar nele, você realmente tem 30 dias antes que eles sejam excluídos permanentemente. Então, uma pequena rede de segurança para qualquer conteúdo excluído. Vou clicar em Aulas a seguir. É um layout bem simples. Acho que não preciso manter esse local. Talvez eu guarde algo assim para localização, mas exclua isso por enquanto. Há algumas outras boas opções para contatos e páginas de localização. E depois um blog. O blog geralmente vem com as primeiras postagens como conteúdo de demonstração. E o blog é o primeiro dos nossos tipos de página para os diferentes. Se eu voltar por um momento, a página inicial e a página sobre, elas terão o mesmo ícone. E esses são tipos de página regulares. O que isso significa é que, se eu clicar nos modos de edição, isso que o Squarespace causa páginas irregulares. Eles estão divididos em seções. Cada seção pode ter blocos flutuando nela. Cada seção pode ter seu próprio tema de cores. Então é isso que ele define como uma página normal. Se eu for ao blog, você verá que ele tem sua própria barra lateral exclusiva. Isso não funciona. Se eu entrar no modo de edição nas seções. É uma seção única e oferece opções para gerenciar as postagens do seu blog. Portanto, não vou me aprofundar em nenhum detalhe real no V, o recurso de blog do Squarespace que eu acho muito intuitivo. Você provavelmente pode mexer no seu caminho. Configurando isso. E, como eu disse, ele fornece algumas postagens para começar, que você possa dar uma olhada na forma como elas foram configuradas. Mas o blog refletirá todas as alterações no estilo do site que você fez no resto do site. E ao personalizá-lo, você verá que pode escolher algumas opções que se aplicarão, seja a você verá que pode escolher algumas opções que se aplicarão, mais de postagens do blog ou a duas, cada uma delas individualmente, como a cores, as fontes usadas para seções diferentes. Mas experimente. Você não precisa minha opinião para ajudá-lo a configurar as páginas do blog. Então, vamos nos concentrar em coisas que são um pouco mais orientadas ao design. Então, se eu quisesse adicionar uma nova página, tipo de página, agora que excluímos, temos apenas para casa via bout. E, na verdade, vou deletar para o blog. Minha cervejaria não terá nenhum tipo de feed de blog. Se você clicar no botão Mais, até as próximas duas navegações principais para adicioná-lo para que ele comece aqui ou não esteja vinculado. Você verá que há um grande número de opções. Então, nas páginas, isso é o que eu mencionei. O Squarespace causa um tipo de página irregular. Mas você tem esses diferentes tipos de página que ele categoriza como coleções. Você também tem pastas e links. Então, começaremos com as opções nas coleções e na loja. Novamente, acho que isso está um pouco além do escopo deste tutorial, mas você pode facilmente criar e personalizar sua própria loja de comércio eletrônico. Super intuitivo, fácil de usar. Então essa não é uma página normal, é um tipo de página especial. E isso é com o objetivo de configurar essa loja, poder categorizar produtos e muitos outros recursos. Ele tem um portfólio que é um tipo de página especial e é composto por itens de portfólio. Então, se isso é algo realmente útil para fotógrafos, acho que também para designers. E você seleciona entre alguns modelos. E isso serve quase como uma página de índice de sais. Muito parecido com a funcionalidade do blog no Squarespace, cada um dos seus projetos, mas está aninhado aqui, é efetivamente sua própria página, que você pode personalizar completamente. Mas quando você volta para a página do portfólio, você vê uma miniatura e um título representando cada uma delas. Você pode arrastar e soltar para alterar a ordem. Então você pode imaginar para fotógrafos ou designers, se você quiser apresentar seus diferentes projetos. Esse é um recurso muito bom, em vez de tentar criar e vincular manualmente páginas diferentes para cada uma delas. Então, a cervejaria I'll certamente não precisa de um portfólio. Então, vou excluir esse tipo de página. Vou clicar no Plus novamente. Eventos. Novamente, isso está um pouco além do escopo dessa classe, mas é um recurso muito útil. Então, eles têm algumas opções para agendar eventos. Se você está criando um site para uma banda, por exemplo, deseja incluir datas da turnê. Há recursos silenciosos e interessantes que permitem que você faça isso e vídeos. Esse é um novo que realmente permite vender conteúdo sob demanda. Então, se você quiser esconder alguns vídeos tutoriais, por exemplo, atrás de um paywall. Você pode fazer isso aqui. Mas dois tipos de páginas especiais para eu uso com mais frequência, pasta RV e a opção de link. Então, se eu começar adicionando uma pasta, isso literalmente ajudará você a organizar a navegação do seu site. Agora, irritantemente, no momento, no Squarespace, você não pode aninhar uma página dentro de outra sem usar uma pasta. Então, o que quero dizer com isso, se eu der um título, galeria, posso arrastar a página sobre. Então, fica embaixo da galeria. E se eu usar a navegação na parte superior, você verá que, quando eu passar o mouse sobre a galeria, ela agora mostra a página como se estivesse dentro dela. Eu também poderia pegar esta pequena página de demonstração aqui e colocá-la dentro. Agora, em nossa seção de galeria, temos duas páginas. Mas eu não consegui identificar se eu removo a classe Booker. Não consegui colocar a aula do Booker como uma página que fica abaixo, isso é muito irritante. É algo que espero que atualizemos no futuro. No momento, se você quiser aninhar páginas, precisará usar essa função de pasta. Então é isso que o dobrado faz, permite que você organize suas páginas para ficarem dentro de uma seção. E, por fim, você tem uma opção de link. Portanto, isso é útil para algo que consideraremos um recurso mais avançado no final da aula. Links de ancoragem. O link em que você clicaria e desejaria que você descesse até um determinado ponto da página. É muito útil para isso. Ou você pode criar um link para algo externo ao seu site do Squarespace. Portanto, ele poderia ser vinculado a um externo. Sou um aplicativo de calendário que você usa. Pode ser um link para, não sei por que você os colocaria em sua navegação principal, pode ser um link para um de seus canais de mídia social. Embora eu ache que há uma maneira melhor de fazer isso. Então, isso é para a opção de link. E depois de clicar no link, você literalmente atribui a ele um título que será mostrado na navegação. E quando você insere a localização desse link. Agora você pode usar isso para vincular internamente. Para fazer isso, se você começar com uma barra e, abaixo das páginas que compõem seus sites até agora, elas aparecerão na lista. Portanto, é muito fácil selecionar um desses, se você quiser, ou você pode inserir um URL externo completo. Agora, antes de terminarmos esta lição, falando sobre URLs, como você determina a URL de suas páginas? Novamente, isso não é o mais intuitivo. Você pode pensar que ele simplesmente usa o nome da página. Isso não acontece. Há uma configuração separada para isso. Então, se você clicar no pequeno ícone de roda dentada de qualquer uma das suas páginas, você verá as configurações da página aparecerem. E algumas das primeiras opções são o título da página. E é isso que vai aparecer na parte superior da janela do navegador. Título da navegação. Isso é o que aparecerá na navegação do site V. E, finalmente, o URL. É aí que você pode personalizar isso. Então, você pode, por exemplo alterar isso para Sobre nós, será atualizado via URL. Então, se eu colocar Sobre nós e pressionar Enter, você verá que isso nos levaria a essa página específica. Então, isso é muito útil. Muitas vezes, você gostaria de inserir um URL específico, talvez para fins de marketing ou a partir das solicitações de um cliente, se quiser criar links externos para determinadas páginas. Então, isso abrange as páginas, os tipos de página e a navegação. Em seguida, vamos realmente nos aprofundar na personalização do conteúdo. Mas temos no site. Então, estamos bastante felizes com o estilo. Ainda há alguns ajustes e mudanças que poderemos fazer mais tarde. Mas na próxima lição, começaremos a personalizar esse conteúdo. 7. Vamos criar - blocos de construção: Nesta lição, começamos a trabalhar com blocos, que é o que o Squarespace usa para compor todo o nosso conteúdo. E, basicamente, agora é quando começaremos a personalizar nosso conteúdo. Então, minha cervejaria tem muitas imagens de um estúdio de ioga. Assim que os trocarmos, ele realmente começará a tomar forma. Trabalhando com blocos. Se entrarmos no modo de edição, trabalharei primeiro na página inicial. E ao passar o mouse e rolar, você verá um pequeno contorno azul em torno de diferentes partes do seu conteúdo. E V são o que chamamos de blocos. Portanto, você tem controle total para movê-los ou editá-los. Para editar o conteúdo em si. Em um bloco de texto, basta clicar, clicar duas vezes e digitar o que está aqui. Então, isso poderia dizer, bem-vindo ao flúor. E isso é só uma demonstração. Então, eu não vou trocar conteúdo, mas só para dar uma ideia geral de como eu me sentiria assim, eu montei isso se fosse um site para o Climb. Agora, o tamanho e o posicionamento, você pode ver no momento, eu tenho esse texto no meu título, tamanho único e todo esse tipo de visualização de desktop, onde vai depender do tamanho da de alguém tela. Acho que gostaria de poder correr um pouco mais longe. Então é aqui que entra esse recurso de grade, mas agora implementado pelo Squarespace. Houve um tempo em que isso era muito mais complicado. Então, se eu passar o mouse e simplesmente arrastar a borda desse bloco, você verá que o Squarespace está alinhando isso a uma grade que é invisível. Assim que você solta, você clica em sair desse item. Então, há uma pequena grade invisível trabalhando e arrastando para redimensionar ou pegar algo e realmente mover sua posição física. Você pode ver uma pequena diretriz amarela aparecendo lá para me dizer que isso estaria centrado. Na verdade, acho que vou enviar para este texto. Então, vou controlar a para selecionar todo esse conteúdo e usar essa ferramenta de alinhamento de parágrafos. Isso é bastante intuitivo. Tipos de ícones e recursos que tenho certeza que você conhecerá aqui. Classe. Não vou precisar disso, mas vou continuar sendo bem-vindo à nossa cervejaria. Então, quando eu apaguei parte do conteúdo, que elimina a necessidade de um bloco do tamanho que tínhamos. Você vê que ele é fechado automaticamente. Se eu quisesse, eu poderia arrastar eu poderia ampliar isso arrastando para baixo. E esta página está , na verdade, alinhando a grade veterinária na parte inferior. Então, antes de fazermos mais mudanças, vamos falar sobre ondas. Essa ferramenta funciona e as opções que você tem para jogar com uma grade. Enquanto eu passo o mouse sobre esta seção. Se eu clicar em Editar seção no canto superior direito, você verá que a grade aparecerá. E você pode ver que há uma contagem de linhas para a grade de um momento. Tem quatro células, que é suficiente para o conteúdo que temos no momento. Eu posso aumentá-la ou diminuí-la manualmente. Você não pode ir abaixo do mínimo necessário para ajustar o conteúdo que você tem atualmente em vigor. E se eu observar o alinhamento, você pode vê-lo por um momento. Essa grade está sendo alinhada até a parte inferior. Eu poderia alinhá-lo centralmente nesta seção ou alinhá-lo na parte superior. Muito intuitivo e fácil de usar. Vamos movê-lo de volta para o fundo. E então você também tem opções aqui para alturas. Essa é a altura da seção. Nada a ver com uma grade. Então, nesta seção, se eu mudar a altura para pequena, temos apenas a menor lasca. Para mostrar nossa imagem em segundo plano, há espaço suficiente para caber no conteúdo. Mas se eu escolher com a opção grande, isso é para tela cheia, permitindo um pequeno cabeçalho da barra de navegação na parte superior. Se você quiser inserir uma altura específica, se clicar nos três pontos, poderá inserir um valor. Isso sempre abrirá espaço para sua rede. Mas um valor que é, eu acho que isso deveria ser uma porcentagem. Portanto, 100% espaço que você pode colocar com o cabeçalho. E depois 15%, 1%. Tudo o que está fazendo é permitir espaço para nossa grade e o pequeno preenchimento que você pode alterar nessas configurações de espaçamento que examinamos anteriormente nos estilos do site. Então, vou colocar isso de volta no grande preceito. O que eu gosto no impacto de uma página inteira quando alguém chega a essa página. Mas dá uma pequena ideia das opções que você tem para trabalhar com essa grade, o que é muito útil para organizar seu conteúdo. Agora você também pode alterar a lacuna em V que está presente entre as células na grade. Portanto, você pode clicar na primeira opção se quiser não ter nenhuma lacuna. E isso pode ser útil se você estiver tentando colocar imagens lado a lado na grade. Mas vou voltar para a configuração padrão. Agora, se eu clicar em Plano de fundo, lembre-se esse é o plano de fundo apenas desta seção aqui. É aqui que podemos configurar nossa imagem de fundo. E também há uma sobreposição na parte superior, o que torna o texto um pouco mais legível. Então, se uma parte inferior aqui sobrepor a opacidade, se eu mover esse controle deslizante para cima, isso dá uma ideia melhor do que isso está fazendo. Então, é como se estivesse sobrepondo um filme de uma cor sólida sobre a imagem. E então a opacidade controla bem a capacidade, quanto ela está aparecendo? Então, essa é uma configuração bastante útil. A cor que está usando e que está relacionada às cores da grade na guia Cor. Portanto, antes de alterarmos nossa imagem de fundo, basta clicar na guia Cor. E você pode ver isso no momento. Está usando essa opção mais escura da nossa paleta de cores. Agora, se eu escolhesse uma das opções mais leves que usaríamos na sobreposição, usaria branco. Nesse caso. Se eu escolhesse um dos tipos de opções centrais, se você tivesse algo vívido em seu tema, como um laranja brilhante, bem, ele se sobreporia a esse laranja brilhante e assim por diante. Espero que você entenda a ideia. Então, vou colocar isso de volta, vamos usar o mais escuro, escuro, escuro, mais escuro. Você pode ver a diferença aqui entre o mais escuro, 1,2. Está tornando os cabeçalhos dessa cor de destaque. Quando eu uso a opção dois. E quando também está em cima de uma imagem, não é bem não é clara o suficiente, não é totalmente legível. Então, vou usar dark is one. E apenas certifique-se de que o texto seja bom e claro nessa situação. Então, vamos mudar o plano de fundo. Eu editei meu texto, mas vamos clicar na guia de fundo. Você pode clicar em Substituir ou clicar na lixeira e, em seguida, arrastar e soltar uma imagem no local. Então, eu tenho algo em mente. Eu escolhi em um site de ações isentas de royalties. Mesmo que você use ações isentas de royalties, às vezes eles querem que você atribua a ele alguma atribuição. Portanto, sempre vale a pena verificar se você está trabalhando para clientes. Apenas certifique-se de usar material que não precisa incluir, talvez um pequeno crédito ou uma nota em algum lugar da página. Na verdade, o Squarespace tem sua própria biblioteca de estoque, que você não precisa atribuir na página. E você acessa isso. Se eu voltar para Editar o plano de fundo da seção, vou excluí-lo temporariamente. Clique em, adicione uma imagem. E em vez de arrastar e soltar, ao clicar nesse botão de adição para adicionar uma imagem, você tem algumas opções. Você pode fazer upload de um arquivo localmente. Você pode selecionar em sua biblioteca. Então, essa será qualquer imagem que você já tenha usado neste site do Squarespace. Então é aí que você encontraria isso. E, finalmente, procure imagens de estoque. E na guia de imagens gratuitas, fornecida pelo Unsplash, há uma seleção bastante ampla de imagens que você pode usar livremente. Agora, esses não serão os mais exclusivos. Vamos experimentar a Brewery. Essas não serão as opções mais exclusivas. Suba, mas isso os salvará se eles não tiverem um orçamento para fotografia ou imagens. Então, algumas opções decentes aqui. Algumas de suas fotografias têm um padrão bastante alto. Um toque muito bom, pois agora está integrado ao Squarespace. Então você pode ver os resultados lá. Talvez seja uma boa abordagem se eu quisesse que sua marca fosse vista como uma cervejaria moderna em grande escala Acho que estou optando por uma abordagem cada vez mais clássica. Um pouco mais. Qual é a palavra boutique? Cervejaria boutique? Portanto, se eu clicar no Plus novamente e, desta vez, selecionar da biblioteca, veremos a imagem SVG que eu enviei anteriormente e a trocarei novamente. Você tem algumas opções de posicionamento ao colocar imagens. Além de uma diversão. Agora, há um pequeno círculo de pontos focais. E você pode clicar e arrastar. E isso mudará para o ponto focal. Agora, porque essa imagem está preenchendo bem a tela por um momento. Mas parece que não faz nada. Mas se eu salvar minhas alterações e clicar e simplesmente arrastar para redimensionar a tela, você verá que ela está centralizando o corte na parte. Hum, mas eu destaquei o uso dessa ferramenta. Então, muito útil. E vale a pena conferir o ponto focal para o caso de seu plano de fundo ser cortado. Então, isso já é muito mais sobre o tema. Enquanto eu percorro, vou procurar outras seções. Às vezes, no meu primeiro passe, estou apenas procurando algumas vitórias fáceis para começar a colocar meu conteúdo lá e moldar as coisas. Então, projetar no Squarespace é muito diferente do processo que você usaria em uma plataforma como o WordPress, onde você realmente simularia tudo em teoria primeiro, você pode fazer isso para o Squarespace, em seguida, recrie a partir de uma maquete. Mas acho que a maioria de nós, na verdade , projetará livremente porque é muito fácil usar os elementos que você está criando ao vivo em qualquer lugar. Então, estou procurando uma seção que eu possa usar. Eu tenho minha página inicial. Esse é o tipo de área de pouso. Um visitante pode ver a navegação deles, mas pode rolar para baixo. E se eu acho que a próxima seção que eu quero incluir seria apenas uma pequena coisa sobre a cervejaria. Então, se tivermos uma página independente sobre, que, no momento, talvez eu tenha sido apenas um pequeno trecho sobre fevereiro e, em seguida, um botão para que alguém possa clicar para saber mais. Preciso adicionar uma seção. Não quero usar este com este modelo de próximas aulas. Então, vou entrar no modo de edição. E você pode ver que, enquanto eu passo o mouse entre as duas seções, há um botão aqui para a seção de anúncios. Se eu clicar nele, ele terá uma grande variedade de opções que podemos usar. E esses são pontos de partida, mais uma vez, para nos ajudar a começar a incluir nosso conteúdo. Então, se eu clicar no título Sobre para ver algumas opções que os designers do Squarespace consideram apropriadas para uma seção Sobre. E você pode clicar em pessoas, produtos, serviços, muitas opções diferentes. Você não precisa usar um modelo sobre para a seção Sobre. Você pode identificar algo nas citações de exemplo que acha que funciona melhor nessa seção para poder misturá-las e combiná-las. Mas, de um modo geral, é muito bom. Algumas das sugestões funcionam muito bem. Para nossa seção sobre a cervejaria. Você pode ver que algumas perguntas frequentes estão incluídas na parte inferior desta categoria sobre. Acho que é algo que combina um pouco de texto com mais imagens. Então, isso parece interessante. E então eu poderia trocar meu conteúdo. Então, vou te mostrar uma opção adicional. Eu clico em Adicionar seção e, em vez disso, vou adicionar uma seção em branco. Você pode adicionar blocos e criar do zero. Se você optar por fazer isso, se clicar no botão Adicionar bloco, crie uma lista de todos os diferentes elementos de bloco existem no Squarespace. Você geralmente usará textos, botões em imagens. Tenho certeza de que não é coincidência Vose, ou direto para o topo. Há outros pequenos elementos, como linhas, que você pode usar para dividir o layout. Você pode adicionar galerias, e havia alguns controles de galeria bastante avançados. Em galerias, você também pode criar uma apresentação de slides. Então, muitas opções para jogar. Vamos escolher o texto. E, novamente, quando você começa a arrastar, você vê uma grade aparecer. Porque eu comecei com uma seção em branco. Isso inclui padrões. Se eu clicar na seção Adicionar, Editar, altere as cores para um dos temas escuros. Eu poderia usar uma imagem de fundo, se quisesse. Eu poderia editar o número de linhas do. Acho que não há necessidade de fazer isso até que você posicione seu conteúdo. Então, eu poderia criar um título sobre. Torne a gordura grande. Talvez eu pudesse criar o texto junto com gordura, mas há muitas coisas diferentes que eu poderia fazer, mas isso é algo que eu usaria se você fosse melhor em pensar do zero, se preferisse trabalhar com uma página em branco. Pessoalmente, no Squarespace, descobri que é uma vantagem trabalhar do ponto de partida e depois ajustá-lo a partir daí. Vou remover isso por enquanto. Vou mudar o esquema de cores para este, que eu gosto bastante. Clique duas vezes para alterar nosso título para sobre. Observe que quando fiz isso porque removi todo o texto, posso simplesmente clicar em Desfazer. Como selecionei todos os textos antes de digitar, mude isso de H1 para o parágrafo dois. Então, isso é uma coisinha irritante que pode acontecer. Você pode simplesmente começar a digitar após a primeira letra. Vou remover a primeira letra. Ou você pode alterar manualmente, mas no final, quando terminar de usá-lo. E então no lado direito aqui. E desta vez, essa não é uma imagem de fundo para esta seção. O que significa que podemos clicar e arrastar. Você vê que essa imagem realmente vive na grade. Da mesma forma, nosso texto, que não é estritamente do tamanho H1, está na verdade usando um recurso que garantirá que esse texto preencha essa caixa. Ele ficará tão grande quanto for necessário para encher a caixa. E essa opção, se eu selecionar uma parte do texto, você pode encontrar aqui no texto da escala da barra de ferramentas. Então, se eu desmarcar o texto da escala, agora será revertido para o tamanho H1 e não ultrapassará esse tamanho. Na verdade, essa será minha opção preferida. Acho que isso me permitirá mais consistência no tamanho à medida que alguém navega pelo site. Não me importo com essa linha divisória. Talvez eu queira elevar isso um pouco mais alto. E depois amplie o tamanho do meu texto. Parágrafo um. Feche esse espaço para ver que é muito fácil, especialmente quando você se familiariza com isso, simplesmente arrastar, soltar e ajustar as coisas. E apenas design. Não se preocupe com a codificação, não se preocupe com nada relacionado ao desenvolvimento web. Estou gostando de usar a plataforma para projetar, é por isso que muitos de nós a amamos. Então, vou escolher entre as imagens disponíveis aqui. Vamos dar uma olhada na cervejaria. Novamente. Há uma muito boa. Usando esses barris. Uma vez que isso esteja em vigor. E o Squarespace dimensiona automaticamente os tamanhos cria cópias que serão fornecidas dependendo do dispositivo que alguém estiver usando. Então, tudo o que acontece em segundo plano, você pode se concentrar apenas no front-end. Embora estivesse usando a guia de campo por padrão, ela não estava realmente preenchendo. Foi configurado para caber, então está clicando entre eles, às vezes o reverte. E isso agora está preenchendo nosso espaço. Estou muito feliz que o ponto focal seja o centro. Vou clicar em Salvar para salvar meu trabalho à medida que eu prossigo. E isso parece muito bom. Talvez estejamos usando barris um pouco demais. Mas esse é o tipo de aparência que eu quero transmitir inicialmente. Agora, um recurso que eu disse que acrescentaria, ainda não o fiz. Vou abrir o modo de edição novamente, foi um botão para ler mais sobre a empresa. Portanto, isso seria apenas um pequeno trecho em gorduras. Vamos remover um pouco disso. Estou usando isso apenas como uma cópia de espaço reservado por enquanto. E eu vou clicar para adicionar um bloco. Usamos o bloco de botões V. Arraste-o para baixo , pois queremos que ele seja posicionado. E é aqui que podemos escolher nosso tipo de botão primário, secundário ou terciário. Então, terciário, geralmente menor, secundário um pouco maior. E o primário geralmente tem um tamanho ainda maior. Mas isso depende das configurações que você usou nos estilos de site que examinamos anteriormente. Agora, apesar dessas configurações diferentes, você ainda pode arrastar e soltar o botão para que ele exista nesse tamanho de grade com o qual você está satisfeito. Portanto, você pode ter um botão enorme que abrange toda a largura. Ou você pode alinhá-lo um pouco menor. Depende totalmente de você em termos de cores no momento, e vou simplesmente rolar para cima. Então você tem uma visão clara disso. Desculpas, às vezes esqueço que minha imagem, minha miniatura está na tela por um momento, está desenhada em uma cor que usamos nesta seção. Se eu clicar em Editar seção e depois em cores, você verá que, se eu alternasse entre elas, cor do nosso botão realmente mudaria. Então, eu quero manter o resto desta seção como estava, que era uma opção obscura. Mas eu realmente gostaria que o botão fosse diferente. Então, é aqui que podemos fazer as personalizações de ajuste fino que mencionei. E também no escuro, se eu clicar no botão Editar, entraremos em. Sou os estilos do site na barra lateral. E está tentando nos dar cores diferentes que estão presentes nesta página no momento. Agora, para economizar tempo percorrendo todas essas opções, se eu passar o mouse e selecionar, você verá que uma pequena seleção azul aparece ao redor dela ou pode aparecer em diferentes blocos na página. Se eu clicar no botão que o seleciona, ele automaticamente nos levará às opções irrelevantes em nossa barra lateral. Portanto, temos uma opção aqui para o fundo preto do botão principal. Se estivermos usando a paleta dark to. Compreendo que, a princípio, isso provavelmente seja um pouco difícil de entender e que talvez pareça desnecessariamente complicado. Mas isso realmente permite que você ajuste e personalize este site. Você nem sempre vai querer usar os padrões existentes. Portanto, é muito útil poder se aprofundar um pouco mais aqui e escolher algumas cores personalizadas. Eu quero mudar o plano de fundo. Uma das cores da nossa paleta, mas eu quero usar um fundo branco. Então, é muito proeminente. E então, para o texto, porque agora é invisível, novamente, vou usar uma cor da paleta e usá-la em preto. Salve minhas alterações. Agora, algo que notei que foi revertido ou talvez eu não tenha salvo inicialmente é o estilo do botão. Eu queria que fosse tudo em maiúsculas. E aqui está mostrando em minúsculas. Então, para mudar isso de forma rápida e fácil, se eu for para Design Site Styles, botões, eu queria que isso fosse futuro. Eu queria que fosse em maiúsculas. Eu dei a ele um pouco de espaçamento entre letras. Acho que o peso precisa ser um pouco maior, então é legível quando é invertido da luz branca e, em vez de entrar na primária, secundária e terciária, se eu quiser aplicar isso a todos os nesses tipos de botão, posso clicar no botão aqui, aplicam-se a todos os tipos de botão. E isso combinará com o estilo de todos eles. Agora vou garantir que eu guarde para alterações e que a página seja atualizada. E isso está feito, agora está em vigor. Então, analise o site, descartando seções se você não precisar delas. Aqui está uma seção. Acho que vou realmente excluir as próximas aulas para excluir uma seção. Se você clicar no ícone da lixeira no canto superior direito para removê-lo. E apenas algumas dicas, alguns tipos de seções que eu acho bastante eficazes. Caminho. Você tem uma imagem em segundo plano com algum texto por cima. Na verdade, este é um formulário de inscrição no boletim informativo, mas se eu o remover e colocar um bloqueio, e essa é uma maneira bastante eficaz de mudar o ritmo de um site à medida que alguém navega, em vez de serem muitos textos ou muitas imagens coloridas e difíceis, pode ser muito bom dividir as seções incluindo talvez um slogan na imagem ou suavemente no fundo. Para nossa cervejaria, eu poderia incluir um sabor confiável e refrescante. Isso não vai ganhar nenhum prêmio, mas apenas demonstrar que as isenções podem funcionar. Se eu quisesse, eu poderia usar essa opção de escala para criar esse texto. Sempre preencha esse espaço na página. Mas estou muito feliz com isso. Então, se eu clicar em Editar cores da seção, fico feliz em usar o mais escuro , mas na guia de fundo, vou aumentar a opacidade da sobreposição. Um pouco menos da imagem está aparecendo. E isso torna os textos um pouco mais fáceis de serem chamados. Claro, vou mudar a imagem desse estúdio de ioga. Pesquise uma biblioteca, uma biblioteca de estoque de cerveja. E algo que parece refrescante. Csv, estética sombria e temperamental. Talvez aquele pequeno lúpulo na mesa. Bem parecido com isso. Tem uma atmosfera bastante refrescante. Vamos ver como isso fica. Isso parece muito bom. E então vamos para o formato. E eu não acho que essa seção precise ser tão alta. Na altura. O momento é tentar ocupar 80% do espaço disponível na página. Então, vamos fazer isso. Vamos dar isso. Na verdade, então perdemos muito do nosso lúpulo. Aqui, vamos dividir a diferença. 60 por cento, isso é muito bom. Uma seção como essa para mim é muito útil, como eu disse, para meio que interromper o ritmo. Então, ao navegar pelo site, se eu achar que há muita coisa ou outra, gosto de colocar algo assim no meio apenas para desacelerar as coisas. Para dividi-lo e editar a ordem das seções, você não pode arrastar e soltar. Mas se você passar o mouse sobre uma seção, poderá usar as setas para mover essa seção para cima ou para baixo na ordem das páginas. Vou clicar para subir. E tão facilmente quanto isso, ele é trocado seção V, mas estava acima dela. Eu posso movê-lo novamente, se eu quiser. Um site fluiria assim, mas eu vou usar isso. Sente-se entre nossa seção Sobre. E então eu poderia criar um texto para fornecer mais informações aqui, talvez sobre contatos em uma fábrica de cerveja. Muitas opções. Então eu não quero te entediar. A ideia não era explicar todas as opções possíveis, mas as mais comuns que você usaria e, com sorte ensinar algumas das ferramentas e princípios que você pode usar. Em seguida, você está livre para começar a criar suas próprias páginas. Portanto, lembre-se de que, ao clicar em Adicionar seção, você tem acesso a uma ampla biblioteca de seções com modelos para começar e até mesmo trocar seu conteúdo em todas essas seções, elas são compostas por vários blocos. Algumas seções especiais. Eles têm conteúdo pré-configurado. E eu vou te mostrar o que isso significa. Novamente, isso é algo que o Squarespace vem aumentando de forma incremental. Portanto, nem tudo cai sob o mesmo guarda-chuva. Mas se clicarmos nas imagens e escolhermos uma dessas seções de imagem, ela terá muito pouco ícone de olho aqui. E a dica de ferramenta diz seções V. Permite adicionar itens de conteúdo rapidamente e alternar entre layouts sem precisar reorganizá-los manualmente. Essa é a razão dessa distinção. E isso se aplica a muitos desses modelos de imagem. Então eu vou te mostrar a diferença. Em primeiro lugar, adicionaremos um, que usa esse estilo de conteúdo trocável. Então, ao passar o mouse sobre a página, essas imagens não são blocos. Eles são controlados usando este botão de edição aqui, Editar galeria. E essa ferramenta de configuração da galeria está aqui. Você pode reordenar imagens V, mas não pode editar para a grade. Uma pequena vantagem disso é que, se eu clicar em Editar galeria, mas a seção de edição é, você pode alternar entre os tipos de galeria disponíveis. Um momento que temos é simples. Eu poderia trocar por alvenaria. E você tem essas ferramentas para personalizar o número de colunas para espaçamento. Não vou te entediar examinando algumas opções disponíveis. Mas tenho certeza que você entendeu a ideia geral. Então, esse é outro exemplo de tipos de página especiais que mencionei e facilita o teste de algumas opções diferentes. Você tem apresentações de slides, reais, muitas coisas para brincar e experimentar. Mas vou excluir esse tipo de seção por enquanto. E eu vou te mostrar a alternativa. Voltamos às imagens e selecionamos uma delas, mas não temos o pequeno ícone eu, pequena informação. Então, uma dessas páginas de imagens regulares. Então, se eu selecionei este modelo, desta vez você pode ver enquanto eu passo o mouse sobre as imagens, uma seleção azul aparece ao redor delas. E eu posso arrastá-los e soltá-los pela grade. Mas o que isso significa é que não consigo ir para a seção Editar e alterar as predefinições sem problemas. Esse é um layout 100% personalizado. Então, espero que isso lhe dê uma boa visão geral do básico. Certamente ferramentas suficientes para começar a personalizar e criar alguns layouts, mas parecem realmente eficazes, trocando seu conteúdo relevante por eles. Então, faça um experimento de jogo, veja quais são algumas das opções. É muito fácil experimentar algo, mas depois descartá-lo ou trocá-lo por outra coisa. Então, passe algum tempo fazendo isso e quando você se sentir bem, feliz e familiarizado com isso. Junte-se a mim na próxima lição, onde veremos alguns recursos extras que o Squarespace tem a oferecer. 8. Vamos criar - recursos variados: Nesta lição, abordaremos alguns recursos bastante essenciais que ainda não implementamos em nosso site. E vou dar uma olhada para que você tenha uma ideia da aparência do meu site de demonstração. Então, venho pegando várias seções, inserindo algum conteúdo nelas. Agora trocamos nossas imagens. O rodapé, que abordaremos mais adiante. Aqui está. O rodapé Esse é definitivamente um recurso essencial que veremos como personalizar nesta lição. Eu adicionei uma pequena seção de contexto aqui embaixo. Vamos criar um link de ancoragem que nos leve até lá. Então, vote ao vivo na parte inferior da página inicial, fará com que apareça em nosso menu na parte superior. Então eu vou te mostrar como fazer isso. Mudei nosso botão para reservar, mas adicionaremos links sociais na parte superior aqui. E eu adicionei algum conteúdo a, acabei de receber duas subpáginas para este site de amostra. Tão simples sobre a página, mas bastante eficaz. E, novamente, basta personalizar os elementos que o Squarespace nos fornece nos modelos e em uma página de processo de fabricação de cerveja. Então, isso só dá uma pequena ideia do que pode ser feito. E é muito rápido, muito fácil de conseguir. Ele foi realmente projetado primeiro, web design. Então, vamos começar trabalhando talvez no cabeçalho e depois vamos para o rodapé. Então, queremos adicionar nossos links de mídia social. E vou mostrar como incluí esse botão, que nos leva a um livro, uma página de turismo que não está vinculada na minha navegação à esquerda. Então, vamos entrar no modo de edição clicando duas vezes. Em seguida, passo o mouse e seleciono Editar elementos do cabeçalho do site. Você verá que eu tenho um botão ativado. Se eu desativasse o botão we , isso desapareceria. E se voltarmos, o layout que escolhemos para nossa visualização na área de trabalho. O layout do cabeçalho que determina como cada um desses elementos será posicionado. Assim, eu poderia facilmente posicionar com o logotipo à esquerda, ter uma navegação no centro e, em seguida, quaisquer botões ou elementos sociais à direita. Mas vou continuar com esse layout. E voltaremos aos elementos. Ative nosso botão, que me leva à página alta do meu Booker. Novamente, para vincular páginas, você pode digitar o URL exato. Se você começar com uma barra, isso sempre o levará ao primeiro diretório depois do seu site. Provavelmente não quero ver as coisas dessa forma para facilitar as coisas Squarespace permite que você comece a digitar com uma barra. E você vê uma lista de suas páginas aparecer abaixo. E aí está meu livro, uma página de turismo. Portanto, também temos uma opção para links sociais. Eu vou ativar isso. E você pode ver que, como espaços reservados, temos Instagram, Facebook, Twitter. Clicamos em Editar links sociais. Quando você começa a digitar. Squarespace atribui automaticamente o ícone correto para essa plataforma social. Então, se eu começar a digitar twitch lá, você pode ver o ícone do twitch aparecer. Para os fins deste site de demonstração. Vou deixar esses links realmente apontam para o Squarespace seus perfis de mídia social para essas plataformas. Então, tudo bem. Temos nossos links sociais lá. A cabeça está bonita. Usaremos a navegação para adicionar um link âncora, que nos levará ao nosso formulário de contato na parte inferior da página inicial. Mas primeiro vamos estilizar o rodapé. Então, decidi manter este site com um tema sombrio e você pode alternar de forma bastante eficaz. Você pode trocar de seções escuras por seções claras para dividir o design. Mas em todo o resto do site, mantive o tema sombrio em andamento até o fim. Então eu vou, a exceção é essa pequena faixa de contexto, que eu não me importo de destacar. Mas vou mudar isso para o rodapé. Então, novamente, se eu clicar duas vezes em qualquer lugar da página para entrar no modo de edição, a mudança para passar o mouse sobre a seção de rodapé aparecerá com Editar. rodapé funciona da mesma forma que o cabeçalho, mas desta vez o instalador funciona muito mais como uma página normal com blocos. Então, por um momento, temos esse layout aqui que realmente usa um sistema de grade. E você pode mover esses blocos de texto com os quais eles começaram. Eu vou escolher algo um pouco mais simples. Portanto, não vou incluir esta seção aqui , você pode escolher discretamente, que geralmente coloco projetada e desenvolvida pelo seu nome quando você cria um site para um cliente. Vou deletar isso por enquanto. É um exagero com texto. E vou tentar centralizar isso. Aqui estamos. Do outro lado da parte inferior. Centralize o conteúdo. Vou colocar o endereço em uma linha, um número de contato na outra linha. Recebe o nome de uma cervejaria. Estou muito feliz em manter seus links sociais, mas acho que estamos posicionados centrados neles. Se eu clicar no botão Editar, na guia Design, posso escolher o alinhamento central. Eu também poderia mudar o tamanho, mas estou muito feliz com isso. E então vou clicar em Editar seção e também alterar as cores de todo o rodapé. Acho que vou escolher um preto escuro para finalizar com um bom contraste forte. Se eu quiser, um pequeno toque pode ser adicionar, se não o logotipo completo na parte inferior. Eu poderia adicionar talvez as submarcas, então acho que vou fazer isso. Então, isso funciona da mesma forma que nossas páginas normais ou adicione um bloco, arraste uma imagem. Deixe uma área bem pequena para isso. Isso significa que vou ter que arrastar o resto do meu conteúdo para baixo. Então, para fazer isso, comece com os links sociais. E se você arrastar e arrastar abaixo de V, na parte inferior da grade, isso apenas estenderá a grade para você. Isso criará linhas extras. No momento, a grade está configurada para uma linha a partir do topo. Então, seus bloqueios extras diminuirão. Então, vamos arrastar nosso espaço reservado para imagens. Só aí. Acho que vou dar mais ou menos esse espaço. Então, um espaço muito pequeno para nossa submarca. Vou mover o texto para cima. Vou mover os links sociais novamente. Em seguida, clicarei em Editar conteúdo e fazer o upload. Minha submarca. É um pequeno toque, mas acho que parece muito inteligente. E agora você notará uma grade. Ainda está nos dando mais linhas quando precisamos. Portanto, você não precisa entrar na seção Editar. Você pode, ao passar o mouse, ver esse pequeno ícone que parece um parágrafo, mas isso indica o que você pode arrastar a grade para cima. Então, vou clicar e arrastar até fecharmos o espaço desnecessário. Salve minhas alterações. E um rodapé muito bonito, simples e limpo, que é o jeito que eu gosto de mantê-lo. Então, em seguida, vamos criar um link âncora, mas ele nos levará até nossa seção Fale conosco. Portanto, isso não é tão simples quanto poderia ser. Espero que seja algo que o Squarespace possa mudar, mas mostrarei o método de coloração para fazer isso. Então, primeiro de tudo, preciso editar, entrar no modo de edição clicando duas vezes. E eu tenho que adicionar um tipo especial de bloco, e é o bloco de código. Então, idealmente, quero que esse bloco seja posicionado o mais alto possível dentro da seção. Então, para permitir isso , movendo essas seções existentes um pouco para baixo, você pode realmente sobrepor uma seção sobre a outra. E vou apenas posicionar meu trecho de código. Agora, o código não mostrará nada, ele ficará oculto. Não vamos exibir esse Hello Word. Então, tudo bem se estiver sobreposto, como eu fiz lá, mas eu só queria mover as coisas para baixo para que eu pudesse clicar e acessar com facilidade. Então, se eu clicar em, edite o código que precisamos usar para criar o destino do nosso link âncora. O código que precisamos usar é e, claro, você pode copiá-lo. Você não precisa memorizá-lo. E o suporte aberto e triangular p space id é igual. Em seguida, abrimos aspas. E entre essas aspas, colocamos o nome do link âncora. O nome do link âncora, ou seja, o nome que usaremos quando criarmos um link para ele, salta para ele e aparecerá na barra de URL. No final. Haverá uma hashtag e , em seguida, a tag âncora que escolhermos. Então, vou usar o contato. Feche os colchetes abertos. E então precisamos fechar isso de outro colchete aberto, cortar p e fechar com colchetes. Então, isso é tanta codificação quanto espero que você precise fazer para criar um site básico do Squarespace. Mas há muito mais código que você pode adicionar não usado para ajustar e personalizar as coisas para sempre. Mas isso vai estar além do escopo dessa aula. Então, sem código para nosso destino. Tag de âncora criada. Portanto, lembre-se de seu contato. Você pode até mesmo copiar isso para ter certeza de que está exatamente correto. Eu vou clicar em “ Salvar essa página”. E agora precisamos adicionar um link à nossa navegação. Na barra lateral. Garante que você esteja abaixo das páginas. Você está vendo a navegação principal e clica no botão de adição para adicionar o que atualmente é a opção final e o link. E o título que escolhemos é o nome do link , como ele aparecerá na navegação Na parte superior do nosso cabeçalho, mas não é a tag âncora, ainda não. Então, por exemplo isso poderia significar entre em contato conosco, mas nosso link âncora real poderia simplesmente usar o contato que tínhamos copiado anteriormente. Se uma forma de criar esse link de âncora for usar um símbolo de hash. E depois o nome do link que escolhemos. simples quanto isso. Mas como esse link pode ser clicado em páginas diferentes do site, também precisamos adicionar uma barra para indicar que queremos que o Squarespace volte ao diretório inicial. Então, estamos indicando que esse link de âncora está colocado na primeira barra, que é o diretório raiz. Se isso não faz sentido para você, não se preocupe. Mas confie em mim, funciona. Se seu link âncora ou em uma página diferente, por exemplo se estivesse na página sobre, você digitaria o link conforme exibido aqui. Então, seria uma crítica direta sobre nós. Em seguida, a hashtag pode entrar em contato que nos levaria à mesma posição de link âncora se fosse colocada em uma dessas subpáginas. Então, nós o colocamos na página inicial. Estamos usando essa hashtag de barra dianteira. Em seguida, nosso link clicará em Salvar. Vou arrastá-lo para que apareça como o último item em nossa navegação. E mesmo estando no back-end do Squarespace, se eu clicar nesse link, você verá que ele nos leva até a página. E isso nos leva diretamente ao link de destino que criamos. Então, essa é uma maneira muito longa de fazer o que em algumas outras plataformas é bastante simples. Portanto, esse é um recurso que espero que o Squarespace atualize, mas, ao mesmo tempo, não é muita dor de cabeça implementá-lo . Assim, você pode adicionar quantos alvos de âncora e links de ancoragem quiser. Você pode usar a mesma hashtag I'm forward slash e seu nome de destino para criar um link a partir de um botão da parte destacada do texto. Esse seria o processo para fazer isso. Agora, um último recurso essencial que precisamos considerar é a visualização móvel. Agora, se você clicar no canto superior direito, poderá alternar entre a visualização desktop e móvel. E, na maioria das vezes, se você criar primeiro no desktop, Squarespace fará um trabalho muito bom ao converter o conteúdo de forma responsiva. E tudo se alinha muito bem. Mas vamos clicar aqui agora. E eu ainda não analisei isso para o meu site. E à medida que rolamos para baixo, precisaremos procurar qualquer área em que talvez, para espaçar o alinhamento, algo não esteja alinhado exatamente na visualização móvel. E aqui eu vi o primeiro. Não gosto do fato de esse botão enganar diretamente na seção v abaixo dele. Então, novamente, para entrar no modo de edição, basta clicar duas vezes em qualquer lugar da página. E o que é bom é qualquer ajuste que eu faça nessa visualização móvel. Isso não os refletirá na visualização da área de trabalho se o layout e a grade mudarem de forma justa. Então, vou arrastar apenas para criar um espaço extracelular abaixo desse botão. E eu vou salvar essa mudança. Então, isso corrige esse problema de visualização móvel. E se eu voltar para a visualização da área de trabalho, nosso layout permanece o mesmo. Ele foi projetado de forma que, se você começar com o layout da área de trabalho, continue e possa ajustar e fazer ajustes de forma não destrutiva. Se eu editasse e alterasse o texto , obviamente, a mudança se refletiria em ambas as visualizações. Então, isso é apenas para grades. Quaisquer alterações feitas no ajuste fino de seu posicionamento na rede móvel. Squarespace tem uma maneira de preservar isso, não alterá-lo, não estragar o layout da área de trabalho. O resto dessa página parece bom, talvez com um pouco de espaço negativo demais na parte inferior aqui. Isso foi causado pelo nosso código. O link de ancoragem, que na visualização móvel, curiosamente, é colocado na parte inferior. Então, vou precisar mudar as coisas e supervisionar se meu código apareça na parte superior. Agora, um recurso útil que você pode usar. E acho que, até onde sei, isso só se aplica à visualização móvel se há uma pequena seta aqui que diz mover para cima. E você pode mover um elemento para cima na grade móvel. Então, vou clicar nela uma vez, duas vezes. E muito evidente agora começa com nosso código. Quando um visitante vê de frente. Lembre-se de que estamos no back-end. Esse código não deve criar nenhum espaço que possa ser ignorado em termos de layout e espaçamento. Então, novamente, vou salvar essa mudança. Também percebi que a visualização móvel do rodapé não está funcionando. Como eu gostaria. Estou feliz por estar enfrentando alguns desses pequenos problemas para ajustar pois isso mostra o que você pode precisar fazer pelo seu site. Então, novamente, clique duas vezes para entrar no modo de edição. Clique em Editar rodapé, passando o mouse sobre ele. E acho que o problema aqui é que ele tentou adicionar algum espaço negativo ao lado. Então, vou arrastar e garantir que meus elementos se estendam por toda a largura da tela. E então minha imagem, eu acho, pode se dar ao luxo de ser um pouco menor. Então, vou dar a ele menos espaço para trabalhar dentro nossa posição no centro da grade. E então vou usar meu prático recurso de mover para cima para simplesmente movê-lo para o topo, conforme queremos que ele seja posicionado. Portanto, são necessários apenas alguns segundos para corrigir alguns dos vincos. Mas vale a pena visitar seu site depois de terminar e verificar isso. Nada disso aconteceu com a visualização móvel. Portanto, não vou examinar todas as páginas, mas, por favor, percorra cada uma das páginas do seu site e faça pequenos ajustes para garantir que do seu site e faça pequenos ajustes para garantir que o layout do celular esteja como deveria. Então, estou muito feliz com meu site de amostra. Espero que você esteja feliz com o que criou até agora. Na próxima lição, veremos algumas dicas profissionais que podem ajudar você a dar o toque final ao seu site. 9. Dicas profissionais: Então, embora eu tenha chamado essa lição de dicas profissionais, essas são coisas que eu procuro. Tendo feito isso há mais de dez anos, dez anos de experiência em web design. Essas dicas não são difíceis de implementar, então elas criarão um campo profissional e finalizarão seu site, mas muito fáceis de implementar. Portanto, nossa primeira dica é um ícone do navegador, e você pode encontrá-lo navegando até a seção de design na barra lateral e depois no ícone do navegador. E isso é tecnicamente chamado de favicon. É um pequeno ícone. Portanto, você não pode incluir algo com um alto nível de detalhes. Mas parece que se você olhar para o canto superior esquerdo da minha janela do navegador, é um pequeno ícone. E em dispositivos móveis usados quando você adiciona sites aos favoritos, ele aparece como um pequeno ícone no canto superior. Muito bom se não for um bloqueio do Squarespace. Então, eu tenho algo perfeitamente adequado para isso. Eu tenho um ícone de coroa muito simples, usado apenas como parte central de um dos elementos do meu logotipo. Então, vou usar isso como meu favicon. Então, basta arrastar e soltar. Portanto, ele precisa ser um arquivo PNG, mas, caso contrário, o Squarespace o redimensionará para você. Então, vou economizar. Não aparece aqui. Se eu copiar isso e abrir uma nova janela anônima, você pode ver que agora parece muito inteligente. Realmente tem que ser um ícone simples. Em alguns lugares. É um espaço absolutamente minúsculo, mas é um bom toque profissional. Outra coisa enquanto estamos nessa guia. Então essa é a guia Design, a tela de bloqueio. Então, você provavelmente percebeu que, ao visitar aquela janela anônima, você enviou um cliente em potencial para ver um site, talvez quando estiver pronto para revelá-lo. Esta é a página que eles veriam se você tivesse a senha bloqueada e digitasse a senha para obter acesso. Bem, isso é bem genérico. Isso não vai ganhar nenhuma recompensa de design. Assim, podemos realmente criar algo melhor sem muitos problemas. Então, apenas um bom toque profissional. Se visitarmos a tela de bloqueio da guia Design, teremos alguns layouts diferentes que podemos escolher. Então, talvez esse. Só para demonstrar isso para você. Vou clicar em Salvar. Eu vou voltar. E então, se você percorrer esses cabeçalhos, poderá personalizá-los e estilizá-los. Então, na marca e nos textos, se quiséssemos, eu poderia incluir meu logotipo, o que vou fazer. Então, isso é bom. Cervejaria Evoke. Você pode adicionar um título, se quiser, ou no corpo dos textos, mas não acho que isso seja necessário para mim. Eu vou economizar. Volte para o próximo menu que contém mídia. Aqui é realmente onde podemos escolher para esse layout específico, uma imagem de fundo. Então, novamente, você pode pesquisar no Squarespace no banco de imagens ou na biblioteca de imagens que você enviou até agora. E eu gosto muito desse abstrato. Está mostrando cerveja girando em um copo. Acho que isso cria um efeito muito bom quando morcegos carregam e fazem seu trabalho. Portanto, uma tela de bloqueio muito mais profissional levou apenas um minuto para montar isso. Se eu agora visitar e atualizar minha janela anônima, isso criará uma primeira impressão muito melhor quando um cliente login e visitar seu novo site com entusiasmo. Então, outra dica profissional e talvez Squarespace não fique muito feliz. Estou dizendo isso, mas a dica é evitar que certos recursos de design tenham sido adicionados à versão mais recente. Se eu clicar no modo de edição e adicionar uma seção. Infelizmente, algumas das opções mais recentes com o modelo mais recente adicionado pelo Squarespace parecem aparecer no topo desta página. Eles ficaram obcecados com esse texto que se move lentamente, o que eu acho horrível do ponto de vista do design. Você pode ver que há mais deles aqui. O que está acontecendo aqui? Para mim, é muito desanimador. Talvez você goste, mas minha dica profissional é evitar esses recursos enigmáticos. Quero dizer, olha esse. Talvez, talvez haja alguém lá fora que aprecie isso. Mas para mim. Embora tecnicamente seja inteligente, eles conseguiram programar a capacidade de fazer isso. Eu evitaria esses textos comoventes e enigmáticos. Mantenha o texto, mantenha o layout estático. Mas se você quiser adicionar um pouco de microanimação, é a melhor maneira de fazer isso. E essa é minha próxima dica profissional. Então, se eu fechar isso e sairmos do modo de edição, você absolutamente deve usar a microanimação, mas usá-la da maneira certa. Eu não teria texto circulando quando alguém está tentando lê-lo. Então, se formos para a seção Início da nossa barra lateral, visite v Título de design, estilos do site. E você já deve ter notado isso antes, mas se você ainda não se escondeu aqui, a terceira opção são as animações. E isso se aplica, na minha opinião, são microanimações de muito bom gosto a todos os seus elementos em todo o site. E a diferença é que, se eu clicar na opção de desvanecimento. Depois que a animação for reproduzida, seu conteúdo ficará estático. Então, pode ser vermelho, pode ser apreciado. Ele não continua se movendo. E para mim, acho que essa é uma diferenciação muito importante. Então, vou mudar com a velocidade para lenta. Ela desaparece bem e lentamente. E você pode ver que, quando eu começo a rolar a página para baixo, nosso texto desaparece. E isso é simplesmente perfeito. Bela animação sutil. Se voltarmos para cima, ele não será repetido novamente. Existem outras opções para escalar, é muito bom. Se você quiser que tenha um pouco mais de impacto. Algumas das imagens realmente se ajustam, que cria um pouco mais de movimento. Serão slides de backup. É outra opção de bom gosto. Isso cria uma sensação premium muito boa enquanto você navega no site. E você pode experimentá-los por si mesmo, mas clip and flex também são opções muito boas. Então, o que eu gosto disso é todas essas opções são de bom gosto. Eles não distraem e apenas adicionam um bom acabamento profissional ao seu site. Então, minha última dica profissional tem a ver com o equilíbrio. E quando se trata de layouts como um visitante percorrendo um site, se houver muitas seções ocupadas, muitos textos e espaço negativo insuficiente no meio. Pode parecer muito apertado e claustrofóbico. Então, tente criar um certo ritmo. Embora o Squarespace forneça seções e divida seu conteúdo em seções, tente espaçar suas imagens. Tente incluir bastante espaço negativo ao redor de qualquer seção de texto, como você tem, e tente criar fluxos suaves para que em qualquer momento da rolagem de um visitante, talvez haja apenas uma ou duas coisas que chamam a atenção deles de cada vez. Tente não ter muitos elementos diferentes competindo por atenção. Então, você pode ver se esse é o caso desse site de amostra. Em qualquer seção que estamos percorrendo, geralmente há apenas um título principal. Eles vão notar que há um elemento lutando por sua atenção. Nas páginas em que você tem mais alguns elementos, podem ser mostrados juntos, como esta página de processo. É muito importante incluir espaço negativo suficiente, mas isso não parece opressor. Você pode imaginar se isso fosse pressionado até as bordas. Se um texto ocupasse mais espaço, pareceria muito, muito ocupado. E onde você tem uma seção como essa, uma seção mais movimentada, é bom precedê-la ou segui-la com algumas seções tranquilas, talvez ricas em imagens. Só para que, novamente, você crie em um ritmo agradável e suave. E por último, só queria compartilhar com vocês um exemplo disso é um site que criei para um cliente meu, um fotógrafo muito talentoso. E porque ela é fotógrafa alguns recursos que eu implementei, mas quando apropriado para a cervejaria, mas definitivamente para certos tipos de clientes, você gostaria de implementá-los. Portanto, você notará que há uma boa tela semicheia eficaz , pois leva em consideração o cabeçalho a apresentação de slides quando você acessa a página inicial. Então, esse é um efeito muito bom. E então, enquanto você percorre toneladas de espaço negativo, aquele ritmo sobre o qual falamos, para garantir que você passe de rico em imagens para talvez rico em textos e divida as coisas bem. Também alternamos do escuro para o claro com seções que são bastante eficazes. Novamente, pensando no ritmo. Enquanto um visitante percorre este site. Depoimentos, Squarespace, existem alguns modelos e opções interessantes para exibir avaliações ou depoimentos. Se seu cliente tem um negócio em que isso será importante e um pequeno toque, eu gostaria de incluí-lo para clientes no Google ou no Trust Pilot. Na verdade, será incluir um botão que informe mais avaliações sobre as entradas de visitantes dessa plataforma em uma nova janela. Então, eles podem ver que eles não são apenas inventados. Essas são avaliações reais verificadas que eles mesmos podem consultar gratuitamente. Se seu cliente tem um site em que oferece uma variedade de serviços diferentes, nem tudo isso será do interesse de um visitante. Estou tentando, talvez antes que eles cheguem ao final da nossa página inicial, pressionar um visitante a tomar uma decisão e direcioná-lo para o conteúdo V que seja relevante para ele. E uma boa maneira de fazer isso, pode ser uma grade. Se você tivesse apenas opções gratuitas, isso também funcionaria. Nesse caso, havia seis opções diferentes. E essa grade está apenas atraindo um visitante a escolher, mostrando a ele o que ele pode estar procurando. Um clique. Eles serão levados para a seção relevante. Dessa forma, o conteúdo que eles encontram nesta página é completamente irrelevante para eles. Se essa é uma técnica bastante desnecessária em web design, estou tentando pensar fluxo que seus visitantes podem acessar o site do Froogle e garantir eles encontrem o que estão procurando para o mais rápido possível. E, entendendo, nem todos olharão imediatamente para a barra de navegação. Quando eles acessam um site. Algumas pessoas, naturalmente, começam a rolar para baixo quando visitam um site pela primeira vez , estão atendendo a qualquer tipo de visitante e apenas certificando-se de que você tenha algo para direcioná-las para mostrar a elas. o que eles estão procurando. 10. Iniciar seu site: Então, um último passo importante. Se um site que você acompanhou e criou é algo que você está planejando realmente lançar. Ou, se você quiser conhecer o processo para fazer isso no futuro, analisaremos e trabalharemos livremente juntos nesta lição. Então, no momento, tenho um site atraente, mas ele existe usando esse subdomínio do Squarespace. E também está trancado ao público. Então, a menos que eu forneça acesso, ninguém mais poderá ver isso. Portanto, a primeira etapa antes de colocar seu site no ar é escolher um plano com o Squarespace. Você pode fazer isso acessando as configurações na barra lateral e depois cobrando. Agora, no momento, como você pode ver aqui, diz que não há um link de assinatura ativo para essa conta. E, no momento, estou usando uma assinatura de teste, que é o Squarespace, apenas dando tempo para você criar e criar um site. Para implementar um plano, preciso clicar neste link aqui. Em seguida, clique no botão Atualizar. E isso me diz aqui quantos dias ainda faltam para os testes gratuitos. Então, vou clicar em atualizar. E então é simplesmente o caso de selecionar um plano. E quando se trata de decidir qual plano é melhor para você. Meu conselho seria examinar a lista de recursos e recursos que não foram digitados. Verifique se há algum erro em alguma delas que você precisa. E, obviamente, certifique-se de que o plano selecionado inclua esses recursos. Portanto, você notará que muitos desses recursos se enquadram nesse título comercial. Então, se você está criando um site de comércio eletrônico, se você está usando esses recursos, bem, você definitivamente precisa escolher pelo menos um plano de negócios. E talvez até mesmo um dos planos de comércio. Soviético, você está se beneficiando de coisas como zero taxas de transação e outros recursos. Existem alguns recursos de marketing, mas, geralmente, descobri que o plano pessoal de um site comum, que só quer uma presença na web, quer fornecer informações para seus visitantes. Esse plano é mais do que suficiente. Depois de fazer sua seleção, basta clicar em selecionar no plano relevante. E então você terá a oportunidade de inserir suas informações de cobrança, o que não vou fazer com você no momento. Então, vou fechar isso. Mas vamos supor que agora você tenha um plano do Squarespace quando estiver pronto para a próxima etapa, que é escolher um nome de domínio. Agora, se quiser, você pode usar o subdomínio que o Squarespace oferece está incluído no seu plano. Mas o fato de ser dot squarespace.com, para mim é um pouco desnecessário, um pouco de publicidade gratuita para o Squarespace of air. Para um site profissional. Não acho que seja necessário transmitir o fato de você ter usado o Squarespace para criá-lo. Seja breve e gentil. Então, visitamos as configurações novamente em nossa barra lateral. E, desta vez, estamos examinando o cabeçalho dos domínios. Se você clicar em domínios, terá duas opções diferentes. Uma delas é obter um domínio. E se você clicar nessa opção, Squarespace realmente atuará como seu registrador de domínio. Então você pode fazer uma pesquisa. Já está recomendando com base no subdomínio que eu tenho. E você pode obter qualquer uma das variedades usuais de domínios aqui, então.com, seus nomes de domínio locais, como.co.uk, que é o que usamos aqui, e até mesmo alguns dos domínios de nicho V. Então, dark beer dot Pub, você pode obter uma variedade completa aqui. Mas isso significa que seu nome de domínio está vinculado ao Squarespace. Então, pensando no futuro, se você quiser que ela afaste do Squarespace e do futuro, à medida que sua marca crescesse , seria um pouco mais complicado transferir o domínio do Squarespace, mas não impossível. Portanto, essa é de longe a opção mais fácil. Se você comprar seu domínio aqui , o Squarespace cuidará disso para você. Vou voltar e daremos uma olhada nas outras opções. Então, use um domínio que eu possuo. Isso significa basicamente que você comprou o domínio usando um site diferente. Então, talvez um registrador de domínio independente. Então, GoDaddy, um-dois-três, vermelho. Esses são populares. Eu não vou recomendar um em particular. Mas qualquer registrador de domínio que você escolher usar, depois de configurar algo com ele e ter seu nome de domínio preferido, você digitaria isso aqui. E só como exemplo, vou colocar o endereço da web do meu. Site próprio. Eu apertei Enter. E o Squarespace realmente procurará os detalhes atuais desse site. Depois de encontrar esses detalhes , você terá a opção de transferi-los novamente para o Squarespace is control. Acho que isso anula o propósito de usar esse método. Provavelmente você usará o domínio de conexão. Se eu selecionar essa opção, ele solicitará apenas a facilidade de uso, se você consegue identificar o provedor. Às vezes, isso significa que, enquanto você estiver conectado aos dois serviços, basta clicar em um botão e ele fará a transferência para você. Eu sei que esse é o caso. Nós iríamos, papai. Vou deixá-lo como outro domínio de conexão. Então, essas são as configurações de DNS. Mas o Squarespace precisa que meu nome de domínio tenha para obter o controle e poder usar esse nome de domínio. Por um momento, você pode ver os registros atuais que tenho em vermelho. Alguns deles são privilegiados, então isso não vai aparecer aqui. Mas esse é o endereço IP que estou usando , por exemplo , então não vou executar o processo de alteração desses detalhes de DNS com cada registrador. Mas geralmente haverá uma página que convida você a gerenciar suas configurações de DNS. E tudo o que você precisa fazer é copiar e colar os valores dessas colunas. Portanto, o valor do host nessa coluna do host com seu registrador. Certifique-se de que o tipo geralmente um menu suspenso e algumas opções. Portanto, verifique se é uma entrada CNAME e se o tipo é nome C. E, para os dados necessários, às vezes isso é chamado de destino ou alvo no site do seu registrador. Então é aí que você inseriria essas informações. Então, uma vez que você executa e atualiza esses registros, se um registro não existir. Então, por exemplo, existem alguns registros do tipo A para adicionar aqui. Talvez seja necessário adicionar um novo registro. Em seguida, basta inserir esses detalhes. Então, se depois de inserir todos esses registros no site do seu registrador, você clicar em Atualizar nesta página. E se você fez isso corretamente, você tem que esperar alguns minutos para que isso se propague, se atualize. Mas você começará a ver os valores correspondentes aparecerem no campo de dados atual e eles ficarão verdes se estiver correto. Então, quando você faz com que todos esses registros apareçam em verde , pronto. Seu domínio estará pronto e essa etapa estará concluída. Então, isso é um pouco técnico. Você pode ver por que o Squarespace incluiu a opção de permitir que eles gerenciem isso em seu nome. Então, se parecer um pouco mais do que você se sente confortável em resolver isso , basta fazer com que o Squarespace gerencie isso para você. Então, a etapa final, e isso, prometo, é muito, muito mais fácil do que trabalhar com configurações de DNS, é tornar seu site visível para o público. Então, depois de ter um plano em vigor, uma vez que seu nome de domínio esteja em vigor, você pode acessar as configurações de disponibilidade do site. E desde que você tenha um plano em vigor, essa opção, pública, não ficará desativada. Basta clicar na caixa de seleção para público e clicar em Publicar. E é isso mesmo. Seu site estará oficialmente ativo. O link para enviar pessoas para o testamento será o nome de domínio que você criou. E é isso que você digitaria na barra de URL. Isso é o que você enviaria para que as pessoas visitassem seu novo site. No entanto, para entrar no backend e obter acesso à barra lateral e às ferramentas de edição do v Squarespace. Você ainda precisaria visitar esse subdomínio do Squarespace. Portanto, vale a pena manter um registro dos dois. 11. Conclusão: Bem feito. Se você está assistindo isso, provavelmente significa que gostou viu e decidiu dar ao Squarespace e experimentar. E espero que você tenha acompanhado. Você tem uma boa ideia do que o Squarespace permite que você crie. E espero que você tenha conseguido criar seu próprio site de amostra ao longo do caminho. Espero que acompanhar e ver meu processo de criação do site da cervejaria também tenha proporcionado um fluxo de trabalho viável que você possa usar para criar sites para futuros clientes. Nós realmente nos concentramos em uma visão geral e no essencial de que você precisa, mas é possível mergulhar muito mais fundo. Existem muitos recursos disponíveis. Se você quiser expandir seus conhecimentos usando o Squarespace. Se você acompanhou o projeto da turma, não se esqueça de compartilhar um link para sua criação na área de Projetos da Classe V. Eu adoraria ver o que você conseguiu montar. Sinta-se à vontade para deixar um comentário se você gostou da aula e não se esqueça de seguir meu perfil para que eu possa ver você na próxima.