Como criar um site sem escrever código

1. Introdução /trailer: Olá e bem-vindo ao, Como criar um site sem escrever código. Meu nome é Jake [inaudível] e eu sou seu instrutor para este curso. Neste curso, como você provavelmente pode imaginar, nós estaremos ensinando você como construir um site sem ter que escrever nenhum código. O objetivo para você no final deste curso é sair com um site que você criou. Você não terá que escrever nenhum código para fazer isso, mas você terá simplesmente criado todo o site em seu próprio país a partir do zero. Vamos usar uma plataforma chamada Squarespace para construir nossos sites. É muito simples e fácil de trabalhar, e eu sei que assim que você entrar, você vai adorar. É fácil construir seu site e você não precisa lidar com nenhum dos conhecimentos técnicos ou o código que vem junto com a construção da maioria dos outros sites. Este curso está organizado em duas seções. Na primeira metade do curso, vou ensinar a você como realmente usar o Squarespace, como configurar seu site. Eu vou orientá-lo através da plataforma página por página e opção por opção, explicando o que tudo faz e demonstrando isso para você. Na segunda metade do curso, você vai começar a me ver entrar e projetar um site completamente do zero. Você vai me ver fazer tudo e passar por todo o meu processo, desde planejar o site até configurar o conteúdo, e então realmente implementar o design também. Este curso é para realmente qualquer pessoa interessada em construir um site por conta própria, ou qualquer pessoa interessada em aprender o Squarespace. Mesmo se você nunca construiu um site antes em toda a sua vida, você vai adorar este curso porque é extremamente simples e ele vai mostrar-lhe como configurar um site inteiramente por conta própria. Você não precisa ter nenhum conhecimento técnico ou qualquer experiência anterior em web design para fazer este curso. Se você tem experiência com design gráfico, isso vai ajudá-lo porque você vai ser capaz projetar um site mais bonito. Honestamente, se você é um designer gráfico, eu acho que você vai adorar essa plataforma, porque o Squarespace permite que você seja um designer e não tenha que se preocupar com o código ou qualquer outra coisa ficando no seu caminho. Mesmo para pessoas que podem ser web designers e que querem aprender a plataforma Squarespace, este é um ótimo curso que eu vou orientá-lo em tudo o que você precisa saber. Com tudo o que foi dito, vamos mergulhar e começar. 2. Como configurar sua conta no Squarespace: Neste vídeo, vou mostrar-lhe como configurar a sua Conta Square Space. Para aqueles que já estão configurados, sintam-se à vontade para avançar, mas para qualquer um que ainda não tenha uma conta, vou mostrar-vos como começar. Então a primeira coisa que você vai fazer é apenas ir para squarespace.com, não há necessidade para este fotógrafos que só está lá para decoração. Mas aqui ele vai para squarespace.com, então você vai descer e você vai clicar em Começar. Agora, quando você fizer isso começar, você vai pedir que você escolha seu template e realmente você pode escolher qualquer um agora você não precisa ser muito específico ou preocupado demais, então eu vou olhar através de todos esses agora, porque nós realmente vamos passar por isso em detalhes mais tarde e você pode mudar seu modelo a qualquer momento. Então eu estou indo para ir com o primeiro aqui Pacific e você vai clicar em View Pacific, e então eu vou começar com este design e uma vez que você fizer isso, ele vai simplesmente pedir para você digitar seu nome, endereço de e-mail, e para criar uma senha e, em seguida, você se inscrever e criar seu site. Agora eu já tenho o meu site configurado em, eu vou estar mostrando a vocês como fazer o um, mas isso é muito simples, muito simples, eu estou em apenas como colocar o seu site em funcionamento no Square Space. 3. Por que prematuro: Antes de ir mais longe, uma pergunta que eu sei está em sua mente, é por que Squarespace? Por que devo construir meu site nesta plataforma? Neste vídeo, vou orientá-lo e falar sobre algumas razões pelas quais o Squarespace é ótimo, e algumas razões pelas quais talvez você não queira construir seu site em uma plataforma. Vou tentar revelar tudo para você de antemão, para você possa ter certeza de que esta é a plataforma que você quer ir para a frente e construir seu site. Uma das primeiras razões pelas quais recomendo o Squarespace para o seu site, é que você será capaz de construir todo o seu site sem ter que escrever nenhum código. Não há muitas plataformas lá fora que possam fazer isso e fazer isso de uma maneira tão limpa e profissional como o Squarespace. A segunda razão pela qual eu recomendo o Squarespace, é que toda a sua plataforma é responsiva. O que significa responsivo, é que seu site vai mudar automaticamente o tamanho da janela, ele vai responder a qualquer dispositivo que a abra. Isso significa que, se alguém abrir seu site em seu telefone, tablet, computador, os modelos do Squarespace ajustarão automaticamente seu site de acordo com o tamanho da tela. Outra razão pela qual eu recomendo fortemente o Squarespace, é que você não precisa se preocupar com manutenção. Uma das perguntas comuns que recebo é se alguém deve usar o WordPress ou o Squarespace. Este é um fator de diferenciação realmente grande. Uma plataforma como o WordPress é open source. Isso significa que qualquer um pode entrar lá e editar o código e personalizá-lo como gostaria, mas também significa que não há nenhuma empresa que esteja por trás dele. Não há suporte que realmente vai ajudá-lo se um plugin quebrar ou se os navegadores atualizar ou se você conhece as mudanças de tecnologia. Isso é realmente comum que sites WordPress, você tem que contratar pessoas ou trazer alguém em apenas para manter o seu site, para mantê-lo de quebrar com todas as novas mudanças de tecnologia que estão acontecendo na web. Agora, por outro lado, com um site do Squarespace, você não precisa se preocupar com nada disso. Squarespace não é uma plataforma de código aberto, e então o que está acontecendo é basicamente, você está construindo seu site no aplicativo web do Squarespace e você está construindo em seus modelos. Isso significa que eles estão mantendo esses modelos atualizados e, se você construir um site nele hoje, daqui a 10 anos, esse site ainda será relevante porque o Squarespace está atualizando seus modelos e mantendo eles constantes com todos os dispositivos móveis e as mudanças nos padrões web e web. Isso é realmente grande porque muitas pessoas estão frustradas porque a cada poucos anos eles têm que reconstruir seu site, enquanto no Squarespace, você não precisa se preocupar com isso. Seu site estará sempre atualizado. A próxima razão pela qual eu recomendo o Squarespace e provavelmente o maior motivo é a facilidade de uso. O Squarespace é incrivelmente fácil de usar. Toda a interface é arrastar e soltar, você clica e, em seguida, você alterar as cores. É tão incrivelmente simples, que é apenas algo que qualquer um pode aprender e descobrir. Não leva muito tempo. No final deste curso, você vai saber como usar toda a plataforma e você vai se surpreender quão rápido e fácil você pode obter um site para o seu negócio. Outra razão para amar o Squarespace é que eles têm modelos incrivelmente incríveis e minimalistas. Eles têm um monte de modelos diferentes que você pode escolher para construir seu site em cima de. Mas o incrível é que você tem tanta capacidade de personalizar esses modelos, para onde você pode ir para vários sites que são construídos no mesmo modelo e você não teria idéia de que eles foram construídos sobre a mesma estrutura exata. Squarespace são modelos, eles são incríveis para trabalhar e também são realmente personalizáveis. Outra razão é simplesmente o suporte ao cliente no Squarespace é fenomenal. Eles estão 24 horas por dia, estão sempre lá. Você pode abrir um ticket de suporte e eles estarão de volta com você em nenhum momento. Outra grande pergunta que recebo sobre o Squarespace é um SEO amigável? Sim, é. Honestamente, SEO dentro do Squarespace, eles tornam isso muito simples. Eles o construíram na plataforma. Há um punhado de coisas que você modifica, mas eu tenho meu próprio site para cima e eu tenho alguns artigos que são de alta classificação em SEO, e eles me atraem um monte de tráfego a cada mês. Sei por experiência pessoal que os sites do Squarespace podem ser ótimos para SEO. Outra ótima ferramenta é que você pode usar a integração do Google Apps com o Squarespace. Se você usa o Google Apps para sua empresa, para hospedar seu e-mail e o Google Drive e tudo mais, você pode vinculá-lo diretamente ao Squarespace, que torna uma integração realmente simples e perfeita. Outro novo recurso que eles acabaram de lançar, o que é extremamente incrível, é que eles têm uma integração Getty Images. Getty Images é um site de fotos stock, mas é um dos melhores do mundo. O Squarespace o configurou para que você possa obter qualquer foto de estoque que você possa pesquisar em seu mercado por apenas US $10. A última razão pela qual eu vou apenas trazer o Squarespace, é simplesmente o custo. Com o Squarespace, você está olhando para um custo de aproximadamente US$8 a US$16 por mês, dependendo do plano que você precisa seguir. Embora imediatamente algumas pessoas vão pensar que isso é realmente mais caro do que dizer, hospedar seu próprio site em outro lugar, a verdade é, que novamente você não precisa se preocupar com a manutenção. Você não tem que se preocupar em pagar as pessoas por essas atualizações. A longo prazo, o Squarespace é realmente muito mais barato. A taxa mensal não é realmente tão ruim, e o fato de que ele vai economizar dinheiro em manutenção e ter pessoas consertando seu site, ele vai economizar dinheiro a longo prazo. Há momentos em que um site não é uma boa opção para o Squarespace. Eu quero divulgar isso de antemão, para que você saiba, antes do tempo e você não está mergulhando neste curso se não vai ser a escolha certa para você. Vamos passar por algumas coisas agora e razões pelas quais talvez você não queira o Squarespace. Uma das maiores razões pelas quais as pessoas podem ter que se afastar do Squarespace, é que elas querem ter um site de associação. Eles querem que as pessoas façam login e criem perfis. Você pode fazer isso através da plataforma de desenvolvedores do Squarespace, que torna o site, toda a plataforma de código aberto, mas honestamente você provavelmente não está interessado nisso se você estiver vindo a este site sem código Claro. Mas se você precisar de logins e tudo para o seu site, então você pode precisar olhar para outras plataformas ou contratar um desenvolvedor para construir um site para você. Outro problema que às vezes as pessoas se deparam, é ter um banco de dados, talvez armazenar grande quantidade de informações, dados pesquisáveis ou ter novamente, esse banco de dados do site de associação. Essas são coisas que a plataforma normal do Squarespace não pode fazer. Isso pode ser feito com a plataforma de desenvolvedor mas provavelmente não algo que você vai querer mergulhar. Mas realmente esses são os únicos grandes problemas que você vai encontrar. Às vezes, você pode ter alguns problemas, onde você não pode ajustar um design na medida que quiser com a plataforma normal, mas realmente você tem uma tonelada de personalização. Eu acho que você vai ficar muito feliz com a plataforma. Para quem está procurando um site informativo simples para seus negócios, site de comércio eletrônico, uma plataforma de blogs ou qualquer negócio online simples que não seja um site de associação, Squarespace é uma escolha fenomenal e eu realmente acho que você vai adorar a plataforma e adorar trabalhar com ela. No final do dia, se você não sabe se o Squarespace é um ajuste certo ou se você está um pouco inseguro, você sempre pode exportar seus dados a qualquer momento e você pode exportá-los diretamente para um arquivo WordPress, que praticamente qualquer outro sistema de gerenciamento de conteúdo de sites permitirá que você carregue isso, e se você estiver no WordPress ou estiver no Tumblr ou em qualquer outra plataforma, você pode facilmente importar seu site a partir dessas plataformas. No Squarespace, não se sinta assim como um compromisso para a vida. Se você quiser deixá-lo, você pode, mas eu tenho certeza que depois que você começar a mexer com ele por um tempo e você colocar seu site em funcionamento, eu tenho certeza que você vai adorar. 4. Como planejar seu site: Agora vamos mergulhar e começar a entrar na fase de planejamento do nosso site. Muitas pessoas querem simplesmente saltar para a direita e começar a projetar seu site e vomitar conteúdo, mas eles realmente não pensam sobre o que vai estar no site ou qual o propósito de seu site é antes do tempo. Nesta seção, vamos falar um pouco sobre como planejar seu site com antecedência. A primeira pergunta que você quer fazer a si mesmo quando você está planejando o seu site é, qual é o propósito deste site? Por que está fazendo isso? Você está fazendo isso para alojar seu portfólio on-line? Você está fazendo isso para vender produtos de e-commerce? Você está esperando que isso vai reunir leads ou criar conscientização? Você precisa entender qual é o objetivo do seu site antes de mergulhar e começar a criá-lo ou projetá-lo. Porque se você não tem um objetivo ou propósito real por trás de seu site, é fácil para um visitante ficar realmente confuso quando ele visita seu site ou não sabe o que fazer. Então seu site realmente não faz nada para ajudá-lo. Você tem que realmente pensar no front-end e responder a pergunta, qual é o propósito deste site? A próxima pergunta que você quer fazer é, que conteúdo vai estar neste site? Quantas páginas vou ter? Que informação vou colocar lá em cima? Quais imagens eu preciso? Que vídeos eu preciso? Você precisa começar a pensar sobre, qual é o conteúdo que vai estar em seu site? Tente pensar sobre isso com antecedência e não apenas começar a jogar coisas lá em cima. Uma ótima maneira de fazer isso é criar um sitemap para seu site. Você pode fazer isso com caneta e papel se quiser, ou há uma ferramenta que eu realmente gosto chamada MindMeister, e você pode criar uma conta gratuitamente. Você pode criar um sitemap na plataforma deles que permite que você passe e mostre, quais são as páginas individuais que vou criar? O que vai estar em todas essas páginas? Começo a pensar nisso. Quando eu chegar na segunda metade deste curso, e eu realmente passo através do design de um site do começo ao fim, eu vou mostrar a vocês como usar o MindMeister e dar-lhe um pouco de conceitos em torno da ferramenta. Então, agora que você tem um propósito para seu site e pensou um pouco sobre o conteúdo, vamos entrar e começar a configurar sua conta do Squarespace e começar a trabalhar para ensiná-lo a construir um site sem escrever código. 5. Um breve tour de Squarespace 7: Neste vídeo, vou dar a vocês um tour básico do Squarespace 7 e da interface. Assim que você configurar sua conta, e ele fará mais algumas perguntas de identificação durante todo o processo. Mas depois de terminares tudo isso, vai levar-te a esta tela aqui mesmo. Dependendo do tema que você escolher, pode parecer um pouco diferente aqui eu tenho um site diferente, mas basicamente isso é o que ele vai trazer para você, e esta é a interface home do Squarespace. Primeiro, o que você vai notar é aqui à esquerda, é que você tem essas guias diferentes para páginas, design, comércio, métricas, comentários, configurações e ajuda. Você também tem seu perfil aqui embaixo. Você não vai ter que se preocupar muito com isso. Mas se você tem vários sites, é realmente ótimo porque você pode alternar entre vários sites muito rapidamente. Mas você provavelmente não vai lidar com isso muito cedo se este é o seu primeiro site. Mas o que você pode fazer é basicamente aqui, você pode ter todas essas opções diferentes que você pode selecionar. Então aqui, este é o nosso editor de site ao vivo. Isto é o que você vê é o que você obtém plataforma de edição de site. Eu posso literalmente rolar para baixo e ver todo o conteúdo aqui neste site, então você tem um grande site de rolagem vertical aqui. Você vai ver pequenas coisas pop-up como esta que diz, “Galeria”, “Adicionar imagens ou vídeo”. Você verá “Conteúdo da página”, onde posso editar, clique em “Configurações”. A coisa incrível sobre o Squarespace é que, enquanto outras plataformas, você realmente não consegue ver o que está fazendo ao mesmo tempo. Literalmente, se eu quiser mudar isso, isso está localizado em Manhattan. Bem, eu estou modificando algum conteúdo demo, então ele vai me perguntar se eu quero fazer isso. Vou clicar em “Sim”. Mas, basicamente, sempre que você iniciar um tema no Squarespace, você tem esse conteúdo de demonstração que é incorporado lá. Para fins de demonstração, eu posso apenas mostrar-lhe, eu literalmente apenas cliquei em “Editar”, eu mudo isso para o que eu quiser, Nova York, e clique em “Salvar”. Tão fácil quanto isso, eu mudei o texto no site. Você pode fazer isso com esses cabeçalhos aqui em cima. Novamente, se eu quiser mudar isso para Old American Dining, clique duas vezes sobre isso, venha aqui e clique em “Salvar” novamente. Mais uma vez, vou passar por todos esses recursos com muito mais detalhes. Mas apenas dando a você uma visão geral básica de como o Squarespace funciona. Você pode editar as configurações em suas páginas diferentes, tudo isso. É realmente o que você vê, é o que você recebe. Vou percorrer tudo isso com muito mais detalhes, trabalhando com a navegação e tudo em um pouco. Mas antes de mergulhar mais nisso, vou guiá-lo através de cada uma das abas aqui à esquerda. A primeira guia é a guia páginas. Aqui, basicamente, se eu vir aqui e clicar nisso, isso vai me mostrar minha navegação e literalmente todas as diferentes páginas e conteúdo do site. A guia de páginas é realmente onde qualquer conteúdo em seu site vai viver. Agora, para voltar para os outros, vou clicar em “Início”, e isso me traz de volta para a tela inicial. A seção de design do site. Este é o lugar onde você vai fazer upload de coisas como o seu logotipo, ou você pode selecionar novos modelos, que iremos para o próximo vídeo. Você pode fazer o editor de estilos, mudar cores, mudar fontes, mudar tamanhos, tudo isso. Você pode editar sua página de checkout para e-commerce. Em seguida, há um monte de funções que novamente, eu vou mergulhar em um pouco mais detalhes em vídeos posteriores. Mas só queria dar-lhe uma visão geral básica da plataforma aqui. Vamos voltar e clicar em “Commerce”. Mais uma vez, isso irá levá-lo para o lado do comércio dos sites. Se você quiser administrar uma loja de comércio eletrônico ou você quer vender produtos, produtos digitais, produtos físicos. Nesta seção de comércio onde você faz isso, um monte de sites que você pode nunca precisar tocar isso. Você pode pular as seções de comércio posteriores. Aqui em baixo em métricas, se você for para isso, isso vai, novamente dar-lhe uma visão geral básica do tráfego, uso de dispositivos móveis, ou seus assinantes praticamente qualquer coisa assim. É uma maneira muito básica de obter boas métricas e dados sobre seus sites. Então você tem comentários. Isto é, se você tem algum blog e você tem quaisquer comentários passando pelo Squarespace como plataforma. Você tem suas configurações aqui embaixo. Isso entrará novamente em mais detalhes muito que acontece e essa área. Então, se você precisar de ajuda, você pode clicar em “Ajuda” e ele irá levá-lo para help.squarespace.com. ajuda do Squarespace é fenomenal. Eles responderão a muitas perguntas para você, e se for algo que vai além do que eles ajudam, eles sempre terão prazer em encaminhá-lo para especialistas do Squarespace como eu ou qualquer pessoa que possa ajudá-lo a corrigir os problemas em seu site. Essa é uma visão geral realmente básica do Squarespace 7. Mais uma vez, vamos mergulhar em todas essas seções vídeos muito mais profundos e adicionais. Mas isso é tudo o que tenho para este. No próximo vídeo, eu vou estar mostrando a você como realmente ir e alterar os modelos em seu site. 6. Como selecionar o modelo certo: Neste vídeo, vou mostrar-lhe como instalar novos modelos do Squarespace, e também vou dar-lhe uma visão geral dos diferentes temas e funcionalidades e tentar dar-lhe uma pequena linha de baixo sobre a escolha do seu tema e em que direção você quer ir. Agora você pode mudar seu tema a qualquer momento abaixo da linha para que não haja absolutamente nenhuma preocupação lá. Mas o tema que você escolher vai fazer uma grande diferença em termos de funcionalidade e aparência e sensação de seu site. Vou explicar que tudo o que vou passar e demostrar alguns dos meus temas favoritos para vocês. Para começar, vamos descer aqui e clicar em “Design”. Depois de clicar em design, vamos clicar em “Template”. Uma vez que clicamos no modelo, vamos clicar em “Instalar novo modelo”. Isso vai trazer você de volta à primeira tela que vimos quando nos inscrevemos na nossa conta do Squarespace. Ele vai mostrar novamente todos os diferentes temas que o Squarespace tem aqui, que há muito para escolher mais do que eu posso explicar provavelmente neste curso, mas vou mostrar-lhe alguns dos meus favoritos. Para começar, na verdade, um dos primeiros aqui é um novo tema do Squarespace chamado shift. O que eu vou fazer é apenas mostrar-lhe se você clicar em qualquer um desses temas e você clicar em exibir. Vai deixar você ver o site, uma pequena demonstração dele. Este é um novo modelo, então não há muitos exemplos. Mas outros sites terão realmente um monte de sites de clientes que são usados nesse mesmo modelo. Esses são realmente legal para ter uma idéia para o que a aparência geral e sentir este é verso apenas olhando para o exemplo de site que eles dão a você. Novamente, se clicarmos em “Ver demonstração ao vivo”, e então eu sempre recomendo apenas clicar neste link para que você possa vê-lo em tela cheia. Mas o que ele vai fazer é basicamente abrir o site que eles têm aqui. Este é um tipo de site de demonstração que eles construíram para você. O que você vai ver é aqui em cima à esquerda nós temos o logotipo, você tem itens como a navegação aqui em cima. Você tem essa chamada à ação com algum subtexto e um botão. Esta é, na verdade, uma grande característica do tema. Está em um punhado de sites. Mas Bedford e shift são dois temas que são realmente definidos por essas grandes imagens com as duas linhas de texto e o botão. Novamente, isso é realmente parte do tema que você está vendo bem ali com a forma como isso parece. Vindo aqui, você pode começar a sentir um pouco por isso. Você vê que este tema parece tem efeito de paralaxe sobre essas imagens. Você pode ver novamente todas essas coisas e alguns dos recursos e funcionalidades. Agora a cor do texto, a fonte, as cores do botão, as fotos, todas essas coisas podem ser personalizáveis, mas o que você realmente procura quando você está olhando para um tema ou quais são essas funções que estão acontecendo. Novamente sobre estes você vê que eles têm esses controles deslizantes básicos aqui onde você pode ter um pouco de texto e, em seguida, sobre onde você clica e aprender mais. Mais uma vez, sites muito legais, modelo muito legal. Este e Bedford é outro modelos, eles são muito semelhantes e eu recomendo altamente. Voltaremos aqui e vamos clicar em “X” disso. Nós vamos voltar para instalar um novo templates. Vamos dar uma olhada em alguns dos outros temas aqui. Horizon é outro novo modelo do Squarespace, mas um modelo muito legal e vou mostrar-lhe um pouco por que. Você clica em “Horizon”. Mais uma vez, nós vamos vir aqui para a pré-visualização ao vivo. Neste, eles realmente têm alguns exemplos de sites de clientes. Você pode clicar neles e dar uma olhada nesses exemplos sites. Alguns deles são realmente grandes para dar-lhe uma idéia das funcionalidades e o que pode ser feito com o tema. Se você olhar para eles suficientes, você começará a ver algumas semelhanças e como eles funcionam, como a navegação de diferentes recursos funciona. Isto vamos ter uma pré-visualização ao vivo, e novamente clique neste para que eu possa vê-lo em tela cheia. Aqui novamente, temos esta navegação básica sobre o topo. Temos imagens enormes no fundo. Temos mensagens de texto com um botão e, em seguida, uma compra no iTunes. À medida que descemos, começamos a ver apenas alguns dos recursos e como o texto parece. Vemos essas opções de turnê aqui. Algumas das coisas realmente legais sobre este tema é que ele permite que você realmente construir páginas inteiras em cima de imagens. Com o tema Bedford e turno que estávamos apenas olhando, tema só funciona para que você só pode ter realmente como uma manchete em uma ou duas frases em sua imagem. Mas com horizonte, você realmente tem essa capacidade de tema mais avançado, é mais difícil de trabalhar com, mas você pode realmente construir seções inteiras ou páginas inteiras do seu site em cima de um plano de fundo como este e ter esta pilha vertical efeito. Mais uma vez, modelo muito legal, altamente recomendado. É um pouco mais avançado, mas você pode ter uma sensação muito legal com ele. Se você tem uma boa fotografia, este é um tema fenomenal para você. Vamos tirar o X disto. Vamos voltar aqui. Novamente, clique em “Instalar um novo modelo”. Me traz de volta a esta página. Adversário, eu não vou realmente ir todo o caminho para este aqui. Mas outro tema muito semelhante a Bedford e turno, ele tem o mesmo grande texto semelhante e um botão de chamada à ação. Mas este tem algumas outras funções e olhar. Eu recomendo verificar este também. Veja, nós vamos descer para alguns outros. Hayden, outro muito parecido com Bedford e para mudar e todos aqueles e adversários, que acabei de mencionar. Você vai ver isso muito onde você tem esses diferentes basicamente dois tamanhos de fonte diferentes e uma chamada à ação. O Squarespace faz em muitos de seus temas, é uma boa prática em web design. É uma característica que eles têm em muitos deles. Novamente, este tem em semelhante, Hayden tem aquele olhar e sentir semelhante bem. Vou clicar de volta para todos os projetos. Nós vamos descer e cinco. Este é um dos temas mais antigos do Squarespace. Provavelmente um dos meus favoritos. Eu realmente construo meu site pessoal sobre isso. Eu provavelmente construí mais sites de clientes em cinco também. É um tema muito simples. Também é muito poderoso porque é provavelmente o tema que está mais próximo do que você pensaria quando você pensa em um blog padrão. É muito típico, você tem sua navegação básica aqui em cima, você tem seu logotipo, e você tem navegação através do lado, você tem seus ícones de mídia social bem aqui. Então você tem essas grandes imagens de banner e você tem o conteúdo aqui. Outro grande benefício real e algo para olhar para fora em seus temas é que nem todos os temas têm uma barra lateral no blog. Alguns dos temas têm blogues de página inteira. Mas cinco tem uma barra lateral no blog, que é um recurso muito poderoso e provavelmente, se o seu foco principal deste site é construir um blog, cinco pode ser um modelo muito bom para ir com. Mais uma vez, eu executá-lo no meu site pessoal e eu absolutamente amo este tema. É muito, muito versátil. Nós vamos sair disso, voltar e eu vou cobrir mais alguns antes de passar para algum outro conteúdo. Venha aqui para a tenda, este é outro tema muito fixe. Novamente, um dos temas provavelmente mais populares no Squarespace, mas o que torna isso tão grande é a funcionalidade de paralaxe. Vou te mostrar isso rapidinho. Do que estou falando quando digo a palavra chique paralaxe. Mas quando eu digo isso, basicamente você vê como a imagem se move lentamente enquanto você rola e revela e revela diferentes partes da imagem. Isso é chamado de paralaxe. Este tema faz isso muito, muito bem. É muito robusto e provavelmente um dos temas mais populares do Squarespace. Não dizer que é uma coisa ruim, ainda é de novo. Tudo isso pode ser personalizado, as fontes, as fotos, as cores. Tudo pode ser personalizado, então você pode realmente construir isso no site que você quer que ele seja. Nós vamos voltar de novo e eu vou te guiar pelos últimos. Sinto que acabei de chegar ao fim, mas há tantos modelos bons, mas é difícil para mim decidir. Wexley é legal, digamos, fotografia ou portfólios projetados. Temos dovetail outro muito semelhante a cinco com algumas funcionalidades diferentes, mas um site muito legal e eu realmente gosto deste. Este é próximo a cinco, provavelmente o site em que eu construo mais sites de clientes do que qualquer outra coisa. Nós vamos descer e aqui está Bedford que eu mencionei. Você só tem um gostinho dos meus sites favoritos sobre nossos temas no Squarespace. Novamente, isso não quer dizer que nenhum desses outros seja ruim. Todos eles têm coisas muito legais. Alguns deles são realmente muito diferentes na aparência e sensação. Novamente, aviador é realmente um olhar e sentir completamente diferente de qualquer um daqueles que eu mostrei a você. Fornecimento, novamente um muito interessante com uma navegação lateral. Há tanta coisa que você realmente tem que brincar com eles. Minhas esperanças são este vídeo mostrou algumas das diferenças dentro dos temas e também apenas lhe deu alguns critérios para avaliá-los contra como você começa a escolher o seu próprio tema. Mas novamente, não se preocupe, você pode mudar seu tema a qualquer momento. Não é grande coisa se você não gosta do tema ou você entrar e não está olhando como você quer. Você sempre pode alterar o tema e ele trará todo esse conteúdo com você a qualquer momento. 7. Como instalar um modelo: No último vídeo, eu lhe dei uma visão geral dos temas. Mas neste vídeo eu quero realmente mostrar-lhe como instalar e alterar seus temas. Uma vez que você passar por tudo isso e você encontrar um tema que você gosta, que eu vou ir com cinco, por simplicidade e familiaridade. Eu realmente acho que este é um tema muito bom para começar, é muito básico, muito simples de usar, e muito bom para trabalhar com. Novamente, vamos clicar em “View Five”. Então, desta vez, já que sabemos que vamos com este, não estamos fazendo outra coisa, vou clicar em “Instalar Template”. Recebi esta pequena notificação de que a instalação foi bem sucedida. Agora, como estou de volta aqui no editor do Squarespace, noto que agora tenho dois temas aqui, mas nada mudou, eu ainda tenho todo esse mesmo tema do Pacífico e tudo assim aqui. O que eu vou fazer é eu vou descer aqui e eu vou precisar clicar em “Preview” no modelo cinco. O que isso vai fazer agora é me levar para o modo de visualização. Se você tem trabalhado muito no Pacific, e então você não tem certeza se você realmente gosta, você pode vir aqui e realmente apenas visualizá-lo. Agora ele muda o conteúdo para fora, porque estes são o conteúdo básico do tema. Mas se você tem seu próprio conteúdo e tudo já incorporado no site, e você só quer ir pré-visualizar um modelo diferente, não há nenhum dano feito. Você pode facilmente voltar a qualquer momento. Você pode até mesmo trabalhar nisso. Enquanto ele está no modo de visualização, eu posso voltar aqui e eu posso apenas começar a mexer com este tema. Eu posso até vir aqui para as páginas e começar a mexer com ele, que estas são demos, então eu tenho que criar a página cada vez. Mas eu posso entrar aqui e começar a editar a navegação. Posso começar com isso. Eu posso realmente entrar aqui e mudar o texto, ou eu posso ir para o editor de estilo, que são todas as coisas que eu vou mostrar em um pouco, então não fique muito sobrecarregado ainda. Mas você pode realmente operar por um pouco neste modo de visualização. Veja se você gosta de onde este tema está indo, e se não, você voltar para o modelo e você pode clicar em “Cancelar visualização”, e ele vai voltar para qualquer tema que você selecionou antes. Esse tema vai voltar direto para o Pacífico. Mas desde que gostamos de cinco, gostamos de onde isso está indo, vamos definir isso como nosso modelo ao vivo. Então você tem certeza de que deseja tornar este modelo visível? Isso o tornará visível no front-end do seu site, portanto, se o seu site já estiver ativo, todos verão isso. Vamos apertar “Confirmar”. Boom, agora atualizamos com sucesso nosso modelo ao vivo. Sempre que voltamos, sempre que trabalhamos nisso, estavam basicamente trabalhando no modelo de cinco por agora. Não há nenhum dano feito se você deixar esses outros modelos instalados. Se você realmente tem um design acontecendo em um desses, ele mantém todas essas predefinições, mantém esse visual, você sempre pode alternar novamente mais tarde na linha se você ainda achar que você não está gostando do tema com o qual você está trabalhando agora. Isso é tudo sobre como realmente instalar um tema no Squarespace. 8. Entendendo a guia de páginas: Neste vídeo, eu vou estar mostrando e explicando a aba Páginas aqui no menu principal. Para começar, o que vamos fazer é descer até a aba Páginas e o que você vai ver é um monte de conteúdo de demonstração, tem esta palavra demo ao lado dele. Basicamente, o que você vê é que você já tem todo esse conteúdo carregado. Não importa qual tema você escolher no Squarespace, você terá alguma quantidade ou algum conteúdo de demonstração aqui. Geralmente, você pode fazer algumas coisas. Você pode simplesmente excluí-lo e clicar em “Livrar-se disso, e apenas se livrar deles. Ou se você quiser e você gosta do olhar que eles têm acontecendo, você apenas gosta deste design e você pensa, eu quero uma página exatamente como essa. Você pode entrar aqui para o conteúdo da página e clicar em “Editar”. Ele vai perguntar se você quer criar uma página como esta. De repente, nós agora temos uma página que está em nosso site e nós podemos ir projetado para grandiosidade. Quero dizer que a foto é muito incrível. Mas sim, nós podemos entrar aqui e podemos editar todo esse site, que novamente em um vídeo posterior eu vou mostrar a vocês como usar todas essas ferramentas de edição. Mas saiba que se você gosta do design, você gosta do layout de uma página e você não quer ter que reconstruí-la, se você quiser como tudo isso é e você só quer trocar as imagens e mudar o texto, você pode fazer isso apenas criando a página e clicando nela. Mais uma vez, vamos descer aqui e clicar em “Lixo” em tudo isso e excluir esse conteúdo de demonstração. Livrar-se de todas essas coisas. Além disso, você vai notar que aqui em baixo, este é o meu conteúdo demo sobre o tema do Pacífico. Isto tudo pode ir também. Coisas que não precisamos. Parece um fardo, mas honestamente como eu disse, se você pode clicar em qualquer uma dessas páginas, basta editá-las. É uma ótima maneira de começar no Squarespace e não ter que se preocupar muito em descobrir o layout. Você pode literalmente ir para os temas deles, mudar coisas, e trabalhar a partir daí. Mas honestamente, eu prefiro construir do zero e é isso que tenho certeza que vocês também fazem aqui hoje porque é honestamente, eu acho um pouco mais fácil. Novamente, apagando todo esse tipo de coisa e lá vamos nós. Não temos nada aqui. Nós agora excluímos todo o nosso conteúdo de demonstração que não precisávamos, e o que vamos fazer agora é apenas fazer algumas páginas aqui em nosso site. Eu vou fazê-las. Eu vou subir aqui, eu vou clicar no botão “Plus” na navegação principal e eu vou criar uma página bem ali fora disso. Vou tocar em “Home”. O que você vai notar é que acabamos ter um ícone de Início ou uma coisa de Início aparecendo em nossa navegação bem ali. Agora, se eu quiser adicionar outra página, e eu apenas mostrar como eu estou apenas adicionando páginas agora, mas você também pode adicionar páginas de rosto, que eu vou explicar mais tarde, produtos, pastas, blogs, galerias, eventos, links, todas essas coisas que Vou entrar em um pouco mais tarde. Mas vou criar outra página. Vou fazer apenas uma página sobre. Agora vemos que temos Sobre e temos Lar em nossa navegação. Mas e se eu quiser criar uma página e não a quiser na navegação? Bem, eu só vou descer aqui, eu vou agarrar e puxá-lo para baixo para a seção não ligada. A página aqui atualiza. Agora vemos que sobre, ainda podemos acessar a página, ainda podemos chegar a ela, mas ela não está mais ligada em nossa tela inicial. Novamente, qualquer um dos que queremos excluir, basta clicar nesta pequena lata de “Lixo” aqui. Se alguma vez excluirmos algo e não quisermos, podemos clicar em “Páginas Excluídas” aqui embaixo. Novamente, você pode ver todo o conteúdo de demonstração que eu excluí. Se você excluir acidentalmente todo o seu site, não se preocupe, tudo não está perdido. Ele permanecerá nas páginas excluídas por sete dias antes de ser apagado. Volte aqui para as páginas. Vou mostrar-te novamente estas ligações aqui em cima. Eu só vou passar por esses outros. Página de rosto eu vou cobrir em um vídeo mais tarde. Mas a pasta é muito, muito poderosa também. Digamos que criamos uma pasta e criamos a pasta “Sobre nós”. O que você verá é que isso vai aparecer sempre que for atualizado. Agora temos esta pasta Sobre nós e parece que não fizemos nada diferente. Mas agora, se quisermos, podemos aninhar algumas páginas nesta pasta. Nós os arrastamos aqui em toda essa área, e agora se rolarmos sobre nós em casa e sobre drop-down. Novamente, isso é muito, muito poderoso. Se quisermos adicionar novamente, adicionar ainda mais a isso, podemos descer aqui e adicionar um link. Aqui está o título do link, então vamos dizer link para o Google, e então aqui em baixo nós vamos apenas ir para google.com e clicar e decidir o que queremos. Agora isso é realmente algo lá em cima nós vamos. Você notou como parte dela foi cortada antes? Bem, se eu rolar para baixo aqui à esquerda, ele realmente abre a janela. Ocasionalmente, é uma espécie de coisa peculiar no Squarespace. Mas se você está trabalhando em um navegador pequeno como eu estou agora, então você vai realmente notar aquele pequeno problema às vezes em que parte de sua interface é cortada e você tem que rolar até aqui. Uma vez que temos esse link para o Google, podemos clicar em “Abrir” em uma nova janela e clicar em “Salvar” eles agora. Agora, aqui vamos nós. Temos esta Casa, Sobre e temos um link para o Google aqui no nosso site, muito útil no caso de alguém não saber. Mas isso é apenas uma visão geral básica da seção sobre nós. Vou entrar nas páginas de rosto, na galeria, e algumas dessas outras características um pouco mais. Mas isso só mostra um pouco sobre como construir a árvore básica do site e a estrutura do seu site. 9. Um passeio prolongado do Squarespace no Squarespace: Agora que você configurou sua conta e começou com o Squarespace, vou lhe dar um tour estendido e realmente começar a percorrer cada uma das áreas do site e explicar o que tudo faz. Esta é uma longa, e pode haver peças que você pode ignorar que não são relevantes para o seu negócio. Mas acho que isso vai ajudar você a entender melhor o que tudo faz no Squarespace como plataforma e do que ele é capaz. 10. Entendendo a guia do design: Neste vídeo, eu vou dar a vocês uma breve visão geral da guia Design, e nós não vamos aprofundar muito sobre tudo sobre essa guia agora, mas eu quero dar a vocês uma visão geral básica e apenas um tour básico sobre isso. Então eu vou descer aqui, e eu vou clicar em Design, e aqui você vai ver um punhado de opções diferentes. Primeiro, temos nosso logotipo e título. Podemos alterar o título do site sem um código. Coisa. Basta adicionar uma coisinha lá dentro e fazer com que pareça chique. Podemos ter a linha de tag, que nem todos os temas suportam uma linha de tag, mas se quisermos colocar é fácil. Então podemos colocar isso aí. Mas neste tema 5 não suporta a linha de tag, então não há nenhuma preocupação lá. Logotipo, se quisermos, podemos realmente carregar e trocar um logotipo sobre isso que eu vou mostrar-lhe em apenas um segundo. Ou se você não tem um logotipo, Squarespace tem este pequeno criador de logotipo dandy bem aqui, e tão legal. Vou tentar, entrar nisso, e vamos dizer algo como o Squarespace. Você pode realmente começar a procurar símbolos ou simplesmente rolar para baixo e ver tudo o que eles têm aqui. Então você pode simplesmente remarcar o Squarespace como este diamante, ou este velho rádio ou um veleiro, perfeito. Há algumas coisas muito legais que você pode fazer com seu pequeno criador de logotipo básico. Eu não vou entrar profundamente nisso como um monte de empresas e um monte de pessoas quando eles estão começando já tem seus próprios logotipos, mas é algo apenas um pouco básico que pode ajudá-lo a ir e começar. Então eu vou para o X fora disso. Então você tem o ícone do seu navegador ou seu favicon, como é chamado, e aqui você pode adicionar uma imagem para esta pequena seção aqui em cima, onde você vê este cubo agora para o Squarespace. Você pode adicionar o seu próprio para que você realmente começa a ver uma foto de si mesmo ou uma pequena versão do seu logotipo lá em cima. Vamos guardar isso assim que terminarmos. Vamos ao Design para voltar. Nós já passamos pela guia modelo, então você está familiarizado com isso. Você tem o editor de estilo que é realmente uma das principais características do Squarespace, então eu realmente vou gastar um vídeo inteiro sobre isso em um pouco, indo mais longe nisso e mostrando a você como ir e editar todas essas cores diferentes, todas essas coisas diferentes que parece muito, mas eu prometo que não é tão complicado, é muito simples. Então eu vou te mostrar isso em um vídeo futuro. Você tem seu editor de estilo de página de checkout, semelhante ao editor de estilo, mas isso é para se você tem um site de e-commerce e as pessoas estão fazendo check-out e comprando em seu site. Você tem uma barra de anúncio, ou você pode adicionar esta pequena barra de anúncio básica lá em cima e dizer algo aqui, e então se você quiser dizer, oh, novo curso agora disponível, você pode colocar algo muito legal lá fora, um pequeno anúncio para o seu povo. Então, isso é realmente bom para um lançamento de produto ou para chamar a atenção para algo em seu site. Coisa muito legal, você pode adicionar um URL para que clique através, ou uma página específica em seu site. Então vamos desativar isso por enquanto. Vamos bater em Salvar e sair daqui. Hit Design. Barra de informações móveis, novamente, semelhante a uma barra de anúncios, mas isso é algo que você adiciona e permite que você mostre coisas diferentes, como seu e-mail se você quiser seu número de telefone, localização, horário comercial. Isso é algo que só vai aparecer na versão móvel do seu site, mas se você é um restaurante ou uma pequena empresa e você sabe que as pessoas vão estar provavelmente vindo para o seu site para procurar coisas como suas horas ou são eles abrem ou algo assim, você pode fazer alguma barra de informação móvel muito básica, e é muito útil para ter. Então eu vou bater em Salvar, voltar ao design. Emblema do Squarespace, se você quiser mostrar algum amor, você pode habilitar este pequeno emblema do Squarespace, e bem aqui no canto inferior, você começa a ver isso alimentado pelo Squarespace, ou você pode ajustá-lo como faria como. Mas novamente, uma pequena plataforma muito legal bem ali. Provavelmente, nem todo mundo vai querer isso, mas se você quiser mostrar algum orgulho do Squarespace. CSS personalizado. Novamente, isso é um pouco avançado, se você sabe qualquer codificação em tudo o que você não é. Você provavelmente não clicou neste curso se você sabe codificação. Mas aqui você pode fazer algum CSS personalizado e isso é algo um pouco mais avançado se você quiser sair das funcionalidades existentes do Squarespace, e então você tem essa aba Avançado, e novamente, provavelmente não muito Você vai se preocupar com isso aqui. Este tipo de id kit para fontes e a visualização do dispositivo é apenas uma pequena coisa básica se você tem isso habilitado, e você vê como ele simula um telefone como meu navegador fica menor. Isso é o que a visualização do dispositivo é. Então, se você não gosta disso, e você só quer mantê-lo direto sempre parecendo uma área de trabalho, você desativaria isso. Mas essa é uma visão geral básica da guia design. Mais uma vez, vou mergulhar naquele editor de estilo com mais detalhes em um vídeo posterior. 11. Entendendo a guia de as métricas: Neste vídeo, eu realmente vou pular o comércio, como eu vou mostrar a vocês um pouco mais tarde. Vou até aqui para a aba Métricas. Como você vai notar, eu realmente não estou em nosso site sem site de código mais. Mas eu pulei para o meu site pessoal porque não há métricas do outro lado, então seria chato olhar. Desta forma, vocês vão realmente começar a ver um pouco do que ele se parece e o que os recursos de métricas incorporadas fazem. Em primeiro lugar, a guia Métricas construída no Squarespace é realmente poderosa. Para aqueles que estão interessados em usar o Google Analytics, você pode facilmente vincular isso também, e eu mostrarei como fazer isso em um vídeo posterior. Mas mesmo sem isso, as ferramentas de Metrics integradas no Squarespace são bastante robustas e já podem mostrar algumas coisas muito legais. Para começar, vamos clicar em “Visão geral do tráfego” em Métricas. Aqui isso vai me mostrar minhas visitas regulares para que eu possa realmente ver quantas pessoas estão vindo ao meu site em uma base diária. Aqui, você vê alguns saltos acima para 256 e alguns aqui em baixo. Você pode começar a ver apenas basicamente todas as informações. O que você vai notar é que você verá um primeiro para o tamanho do público-alvo, um segundo para visitas e o próximo para exibições de página. O que isso significa? Isso significa que 192 pessoas diferentes apareceram no meu site. Isso significa 218 visitas ao meu site, então parece que algumas pessoas voltaram a ele mais de uma vez por dia, e então houve 377 visualizações de página, então muitas dessas pessoas clicaram em várias páginas também. Novamente, você pode começar a ver essas tendências. Você pode vê-lo aqui em baixo em um formato gráfico de barras. Aqui ele mostra o tipo de visitas médias ao longo do tempo, e algumas informações realmente legais aqui. Aqui embaixo, você pode ver os navegadores. O que as pessoas estão realmente surfando? O que as pessoas realmente usam quando chegam ao seu site? Todos vocês podem ver os sistemas operacionais, ou o Mac, Windows e qual versão também. Eles têm Android, iPhone, e todas as coisas diferentes aqui também. Algumas coisas muito legais aqui sob a Visão Geral do Tráfego. Clique em Voltar para Métricas. Agora, vamos clicar em “Uso móvel”. Aqui, podemos começar a ver que 78% das visualizações no desktop, 21,3 por cento estão em dispositivos móveis. Você começa a ver isso apenas mostra, novamente, sua porcentagem de celular em um determinado dia e que dias isso dispara. Novamente, coisas muito legais aparecem em sistemas operacionais de desktop e também em seus sistemas operacionais móveis. Em seguida, vamos descer aqui, e vamos clicar em “Assinantes”. Isto dá-lhe uma vista muito fixe. Você pode olhar para qualquer coisa que tenha um feed RSS e você pode ver o número de assinantes desse feed. Se você clicar no Blog, você pode ver todas as pessoas que têm leitores de alimentação que estão ligados a esse site para que talvez puxando isso também. Você pode fazê-lo novamente no podcast e você pode olhar para isso em diferentes tipos de bases e em termos de assinantes e tudo ao longo dessas linhas. Coisa muito legal. Permite que você veja as pessoas que estão se inscrevendo com o RSS. Em seguida, você vai olhar para referências. Esta é, mais uma vez, uma informação muito legal. Permite que você veja que 40% do meu tráfego vem do Google, 37% está vindo diretamente. Temos essa porcentagem vinda de thefreelancereport.com, essa porcentagem vem de How Design. Você pode começar a ver todas essas referências diferentes e de onde seu tráfego está vindo. Novamente, esta é uma informação extremamente útil, especialmente quando você começa a construir uma boa quantidade de tráfego, e quais diferentes sites vinculando a você. Voltamos e descemos ao Conteúdo Popular. Mais uma vez, isso vai mostrar alguns de seus conteúdos mais populares e qual a porcentagem de seu tráfego geral que é composta nesta semana. Novamente, você pode clicar em mensalmente se quiser, ou você pode até mesmo olhar diariamente em qualquer sentido disso. Se olharmos para isso, vemos que esta postagem no blog representa 57 por cento do meu tráfego. Um muito popular que ocupa o topo no Google. Outros 10 por cento vêm para a minha página inicial, 7,86 por cento ir para o meu blog, e ter esses outros posts que são muito populares na época. Todas essas coisas diferentes, você pode realmente começar a ver quais são os conteúdos mais populares, e olhar para isso durante um período de tempo. Consultas de mecanismos de pesquisa. Novamente, isso é muito legal porque você pode começar a ver que termos as pessoas estão clicando e como eles estão encontrando você. Você vai ter muito disso não fornecido como parte da coisa com o Google e pesquisas protegidas. Mas você pode começar a ver todos esses termos diferentes pelos quais as pessoas estão acessando meu site e o que elas realmente estão pesquisando no Google quando chegam ao meu site. Novamente, coisas muito úteis realmente começam a ajudar você a ver como seus rankings de SEO estão realmente funcionando. Vá até aqui para o registro de atividades. Novamente, isso só vai mostrar quando os visitantes entram, e então você pode realmente começar a ver os endereços IP e o que eles realmente estão fazendo. Se você está fazendo um lançamento de produto e quer ver algo ao vivo, novamente, um pequeno recurso muito legal aqui. Depois, por último, visão geral de vendas. Novamente, eu não tenho nenhum produto que eu estou vendendo atualmente para o meu site, então isso parece muito chato, mas se você tem um site de e-commerce, isso lhe dará métricas em todas as suas vendas. Isso é um pouco sobre a guia Métricas. Espero que vê-lo com alguns dados tenha ajudado a torná-lo um pouco mais aparente e entender o que estava acontecendo. 12. Entenda a guia de comentários e nos discos: Neste vídeo, vou apresentar a você a guia de comentários e falar um pouco sobre comentários no seu site do Squarespace. Então, se descermos aqui e clicar em Comentários, o que vamos ver é que temos basicamente uma pequena seção onde quaisquer comentários que aparecem, podemos aprová-los, ou podemos ver quais são desmoderados, quais são aprovadas, e qualquer sinalização errada, ou que consideremos inadequada, spam ou algo em nosso site. Agora, se você notou quando, na verdade, fomos ao meu site anteriormente e eu mostrei a vocês as métricas, a guia de comentários não estava lá, e isso é porque o Squarespace tem um sistema de comentários integrado. Se você acabou de configurar seu site e não fizer mais nada, você tem esse sistema de comentários integrado no Squarespace, e é bom e funciona muito bem. Mas o Squarespace também se integrou com esta plataforma chamada Disqus, e esta é basicamente a maior plataforma de comentários na Internet. Então, a maioria dos blogs, a maioria das plataformas lá fora , são alimentados por Disqus, e você provavelmente viu algo parecido com isso, onde você tem este sistema de comentários e você tem este avatar neste perfil, e assim o que Disqus faz é que ele permite que você crie um perfil, e basicamente colocar isso em seu blog, e quando você faz isso, ele é realmente capaz de, qualquer site que você vá para um novo comentário, um link para o seu perfil, que em seguida, links de volta para o seu site, e há uma enorme base de usuários. Então a maioria dos blogueiros, a maioria dos comentaristas , estão no Disqus, e no vídeo de configuração eu vou realmente mostrar a vocês como fazer isso. Em um vídeo posterior, vou mostrar a vocês toda a integração aqui com Disqus. Mas eu só queria explicar que rapidamente, que com Disqus, você provavelmente vai querer integrar isso um pouco mais tarde. Então continue assistindo, e eu vou te mostrar isso, e honestamente, se você não está blogando, se você não está colocando qualquer conteúdo como esse, você está apenas fazendo um site informativo ou é um site de portfólio sem comentários, você realmente não vai ter que se preocupar com esta guia em tudo e você pode simplesmente deixá-lo em paz. Mas se você está blogando, confira os vídeos posteriores onde eu vou mostrar-lhe como fazer a integração completa com Disqus. 13. Entendendo a guia de configurações: Neste vídeo, eu vou estar guiando você através da guia de configurações aqui e Squarespace e tipo de explicar muito do que acontece sob cada uma dessas guias e o que é tudo. Esta é uma parte muito importante do site. Tem muita coisa aqui, então prepare-se e vamos mergulhar. Então, primeiro eu vou clicar nas configurações ali à esquerda, você vai ver que temos um punhado de opções, e, em seguida, mesmo no menu avançado que vai para mais opções. Então eu vou passar por estes por won. Basicamente, vamos começar com uma informação básica. Se você chegar a informações básicas, você pode escolher se o seu site é um negócio, e-commerce, sem fins lucrativos, pessoal, não é um grande negócio. Não fará muita diferença na funcionalidade ou qualquer coisa no seu site. Você pode definir uma breve descrição do site, alguns temas que usaremos essa maioria dos temas não usam esta descrição do site. Mas eu recomendaria escrever algo aqui de qualquer maneira, porque esta também é uma área útil para a otimização do mecanismo de busca para colocar o tipo de soma de palavras aqui. Você pode permitir a promoção do Squarespace. Às vezes, eles promovem sites que eles acham que são realmente bons ou eles vão colocá-los como um desses tipos de modelos de exemplo em seu site, e então você pode vir aqui para informações de negócios, horas, telefone, e-mail, todos Isso. Então você pode colocar em seu número de telefone, endereço de e-mail. Você pode configurá-lo em um mapa, escolher seu horário comercial, e tudo isso. Novamente, um punhado de temas, vamos realmente puxar esta informação e tipo de conectá-la ao tema para você, isso é um recurso muito legal e útil para ter, nem todos eles fazem isso, mas provavelmente vale a pena colocar informações lá de qualquer maneira. Então, quando voltarmos da informação básica, voltaremos novamente às configurações. Uma vez que estamos de volta aqui no menu de configurações, vamos clicar em ouvir sobre idioma e região, e isso é realmente para que você possa tipo de definir a região em que você está, a zona, o que é relevante, especialmente se você estiver fazendo eventos em seu site. O Squarespace tem um tipo de calendário de eventos embutido. Se o fuso horário estiver errado, todos os eventos do seu calendário aparecerão impróprios para qualquer um que esteja vindo ao seu site. Isso é muito simples, tudo o que você realmente faz é descobrir aproximadamente em um mapa onde você está ou onde seu negócio está baseado. Você vai clicar que pequenos pontos soprados vai se mover para lá, e eu fui bem sucedido e perfeitamente clicado em Denver, que é onde eu estou baseado fora. Mas, às vezes, se estiver na área difícil, talvez eu estivesse tentando clicar em Phoenix ou Boise, mas sim, apenas cliquei em Denver, e lá vamos nós. Nós acabamos de definir o fuso horário, que agora é apropriado, como você verá, o tempo aqui em baixo corresponde ao meu tempo lá em cima. Agora definimos nosso fuso horário, e apertamos “Salvar”. Vou voltar às configurações e vamos seguir em frente. Então, vamos clicar em “Domínios”. Este é o lugar onde nós estamos realmente indo para ir e tipo de trabalho com domínios de horas. Domínio sendo http://websitewithoutcode.squarespace.com. Eu queria, eu poderia clicar sobre isso, e eu poderia renomeá-lo para websitewithoutcode2. Eu poderia mudar a URL do site. Eu não vou realmente fazer isso porque eu realmente não preciso fazer agora, então eu vou apenas cancelar. Mas este é também o lugar onde mais tarde nós vamos vincular domínio. Então, sempre que você estiver pronto para lançar seu site ao vivo e dizer que você está tentando lançar um websitewithoutcode.com ou jakejorgen.com. Você está tentando colocá-lo ao vivo em seu nome de domínio. É aqui que vamos fazer isso, e explicarei isso com mais detalhes um pouco mais tarde. Além disso, se você quiser, você pode clicar em obter um domínio gratuito, e basicamente o que acontece se você optar por comprar uma conta anual e você comprou um ano de Squarespace, Você obtém um domínio gratuito com o seu site. Então, novamente, muito legal, muito útil pouco recurso que vale a pena olhar para e você pode cair aqui e obter um.org, .net, .biz ou qualquer uma dessas coisas legais. Isso é tudo o que vamos cobrir em domínios escrever agora. Mais uma vez, vou mostrar-lhe mais tarde como realmente lançar seu site ao vivo. Em seguida, nós vamos vir aqui para enviar e-mail, e isso é algo que é novo no Squarespace 7.0 e um recurso super interessante, um que na verdade tipo de mergulhar em um pouco mais quando começamos. Mas você pode realmente conectar o SquareSpace ao seu Google Apps em contas de e-mail. Isso é muito, muito legal porque é honestamente muito difícil descobrir como iniciar seu domínio e depois fazer isso sem estragar seu endereço de e-mail. Então, se você tiver uma conta do Google Apps, você pode literalmente se conectar com sua conta do Squarespace, e ela faz todos os registros, todo o roteamento no back-end, para que você não precise se preocupar em entrar e mexer com todas essas configurações de DNS e os registros MX para garantir que seu e-mail não desligue sempre que você iniciar seu site. Então, se você é um usuário do Google Apps, eu recomendo que verifique isso. Eu mostro-te isso mais tarde. Eu quero mostrar a vocês como configurar o Google Apps nós vamos fazer isso em um tema diferente, mas esta é uma conta demo do Squarespace, então eu não posso mostrar a vocês aqui neste. Em seguida, nós vamos vir aqui para baixo para permissões, e isso é realmente permissões foram chamadas uma vez, eu acho, aconselhamento contribuintes, mas eles mudaram o nome sobre isso. É muito útil se digamos que você deseja adicionar mais pessoas ao seu site. Então digamos que eu quero ter um dos meus amigos ou um colega de trabalho ou um escritor trabalhando no site comigo. O que o olho pode fazer é adicionar um autor básico, que é apenas basicamente queria dar-lhe, na verdade não vai criar uma conta, ele só vai criar um tipo de avatares para que quando eu blogue, eu possa dizer que este autor é, ou esta postagem do blog é por, assim e assim. Então você pode criar um avatar, você pode colocar uma foto com isso. Você pode vinculá-lo ao Google Plus deles aqui embaixo. Você pode colocar em uma biografia completa nas contas sociais e tudo lá. Então, novamente, uma coisa muito legal para apenas adicionar um autor básico, mas este autor realmente não tem como fazer login. Tudo o que eles realmente estão fazendo é dizer, por exemplo, eu acho que um caso de uso de como você usaria este autor é dizer, você está executando um site de blog e alguém lhe envia uma postagem de convidado ou algo que eles querem publicar em seu blog. Bem, talvez você não queira realmente dar a eles logins seu site e tê-los tentando descobrir como publicá-lo por conta própria, e em vez disso você prefere apenas pegar o documento da palavra deles e publicá-lo em seu site. O que você faria é basicamente adicioná-los como um autor, colocar lá informações básicas e tudo aqui, e então dessa forma quando você colocar as postagens, você pode dizer que o post foi por quem, qualquer que seja seu nome, em vez de parecer que está vindo a ser escrito por você. Então, é uma maneira de publicar trabalhos de outras pessoas sem ter obtê-los logado em seu site e definir todo esse tipo de coisas. Agora, vamos descartar isso. outro lado, você tem esse colaborador, então você tem um autor básico que realmente não faz nada no site, é realmente apenas uma espécie de perfil de um escritor em seu site, e então você tem um colaborador. Um colaborador é alguém que realmente obtém permissões para trabalhar em seu site, e há esses diferentes níveis de permissões. Então, por exemplo, eu poderia digitar John Doe aqui e JohnDoe@gmail.com. Espero que não seja um endereço de e-mail real, provavelmente é, mas sim, e então basicamente eu poderia convidá-los e dar-lhes um punhado de diferentes tipos de permissões e privilégios no site. Então, se eu lhes der um administrador, então eles literalmente têm controle total sobre o site. Eles podem projetar, eles podem editar faturamento, eles podem fazer qualquer coisa no site. Portanto, os administradores, basicamente, você é um administrador de compra padrão quando você configura uma conta. Um administrador seria outra pessoa que tem todos os mesmos privilégios. Então, por exemplo, sempre que muitos dos meus clientes me contrataram para fazer design do Squarespace para eles, eles me configuraram como administrador porque eu realmente preciso de acesso tolo para editar tudo em seu site para ser capaz de projetar e fazer tudo lá. Então o próximo é um editor de conteúdo. Essa pessoa basicamente pode entrar, editar conteúdo no site, editar texto, postagens de blog, qualquer coisa desse tipo, mas não pode mudar o design, eles não podem ir nas configurações, na cobrança, qualquer uma dessas coisas. Então, se você está apenas contratando um redator para o seu site, esta é uma boa maneira de dar a eles apenas os privilégios de cópia escrita. O próximo é faturamento, e isso é realmente simples, mas digamos que você está em uma empresa e você precisa dar contas a pagar, talvez eles têm dois inserir as informações de cobrança para isso. Agora você pode configurar apenas um perfil de cobrança sobre eles, bem, literalmente, as únicas opções que eles terão é apenas entrar, fazer login e configurar o faturamento. Então, novamente, uma maneira muito simples de fazer alguém entrar e simplesmente configurar sua conta de cobrança. Relatando. Novamente apenas basicamente dá um acesso às estatísticas. Moderador de comentários. Isso seria muito simples novamente se você tem um monte de blogs em seu site talvez. Você tem uma posição ou alguma outra empresa apenas modera comentários. Você pode fazer isso também. Você pode definir alguém como um comentador confiável. Mais uma vez vou mostrar-lhe mais tarde sobre como definir suas configurações de comentários. Mas, você pode ter configurações de comentários onde basicamente nenhum comentário é publicado até que você o aprove. Mas você pode definir alguém como um comentador confiável e dizer, “Oh, eu sei que Joe sempre coloca bons comentários sobre que há uma pessoa confiável que ele não vai me enviar spam. Posso colocá-lo como um comentador de confiança.” Então o último perfil é um gerente de loja. Basicamente dá a alguém acesso para trabalhar com todo o e-commerce, gerenciar as ordens dos clientes, qualquer coisa e também editar o conteúdo no site. Essas são as maneiras básicas de convidar alguém para colaborar e contribuir em seu site do Squarespace. Vamos voltar para fora daqui, e vamos descartar. Isso é tudo apenas na guia Permissões, e agora eu vou voltar aqui para Configurações. O próximo e muito importante é o Social. O que você tem aqui é um punhado de opções diferentes para como você pode gerenciar suas mídias sociais. A primeira coisa que você realmente vai querer fazer quando você está configurando sua conta e colocando sua página em funcionamento, é ir até o Social e clicar em “ Contas Conectadas ” Quando você clica em Contas Conectadas, onde você pode realmente fazer é entrar aqui e você clicar em “Conectar conta”. Ele vai lhe dar todas essas diferentes opções de mídia social para tudo, desde Dribbble ao Facebook, Twitter, Google Plus, Tumblr, YouTube, todas essas integrações diferentes. Basicamente, tudo o que você faz é clicar em um. Se vamos ter no meu clique para vincular meu perfil do Twitter. Se você já está logado, então é literalmente apenas vai vir para a tela como autorizar, então eu vou autorizar o aplicativo. Acabei de conectar minha conta do Twitter tão fácil quanto isso. Agora, quando eu passar pelo meu site e dizer que eu quero adicionar links de mídia social em qualquer lugar nos sites, ou o tema tem qualquer coisa built-in como aqui nós temos em cinco você acabou de ver este ícone do Twitter apareceu aqui. Tudo isso basicamente está conectado automaticamente à minha conta do Twitter agora. Apenas a partir dessa simples integração de conta de conexão. Mais uma vez eu posso voltar e fazer isso para Facebook, Google mais quantas contas sociais que eu quiser fazer. Agora você pode fazer isso com o Instagram também e alguns deles, Twitter, Instagram, YouTube, e alguns deles até têm pequenos aplicativos que estão incorporados ao Squarespace, que vou demonstrar mais tarde. Mas alguns recursos realmente legais sobre como você pode realmente usar essas integrações de mídia social e como você apenas conectá-los e, em seguida, basicamente, você obtém esses aplicativos e você pode fazer pequenos widgets em seu site. Essa é a parte das contas conectadas do Social. Em seguida, vamos descer aqui para os Botões de Compartilhamento. Em muitos dos modelos e especialmente com blogs, você tem esses botões de compartilhamento. Isto é, se alguém ler uma postagem de blog ou estiver em uma página de que gosta, você pode adicionar esses pequenos botões de compartilhamento e, basicamente, ele compartilhará essa postagem automaticamente para essas contas diferentes. Basicamente aqui você pode dizer, aqui estão todas as coisas que eu quero que eles sejam capazes de compartilhar isso dois fazem. Bem, talvez eu goste do Facebook, Twitter, Google Plus, LinkedIn, mas eu realmente não me importo com o Stumbled Upon, o mercado Pinterest ou o Tumblr. Isso não é realmente a minha praia. Ou talvez seja, e você pode deixar isso ligado. Então, quando você realmente fizer isso de novo, ele vai se ativar. Mas sim, basicamente você pode escolher com quais redes sociais você quer compartilhar, assim você não sobrepujar todo o seu site com muitos botões de compartilhamento onde ele é apenas feio e esmagador. Você pode escolher os que quiser. Há este outro muito legal que é um botão Pinterest Pin-It. Se você ativar isso, você pode basicamente habilitá-lo para blogs ou para blogs e páginas. O que isso vai fazer é basicamente ter uma pequena sobreposição em seus sites que basicamente permitirá que qualquer pessoa fixe qualquer uma de suas imagens ou postagens de blog ou páginas diferentes. É uma pequena característica muito legal. Aqui está um exemplo de como será. Digamos que você tem essa foto e alguém pode vir aqui e prendê-la. Vamos ver. Ainda não salvei por isso ainda não se integrou. Mas você pode escolher novamente, pequeno ou grande. Você pode escolher uma forma, retângulo ou círculo para o logotipo do Pinterest. Você pode ir até aqui e mexer com as configurações. Mais uma vez, mude todas essas coisas. Mas isso é realmente útil especialmente para, digamos, se o seu mercado está no Pinterest as pessoas que você está querendo obter na frente, é um recurso super útil. Muito legal para tê-lo permite realmente muito mais imediato interação social incorporado automaticamente lá através de seus sites. Você tem que fazer qualquer codificação personalizada. Tudo o que você faz é apenas adicionar esta pequena opção Pinterest Pin-It Botão. Mas por enquanto, vou deixar isso fora e apertar “Desativar”. Nós vamos voltar e vamos salvar. Então vamos voltar para o Social. Agora tenho que mostrar a seção final aqui sobre social. Mas, na verdade, fui à minha conta pessoal para te mostrar esta porque é um pouco mais fácil de demonstrar. Mas se eu voltar para o social, e eu clicar aqui em “Página do Facebook”, o que vamos ver é, que eu posso realmente transformar uma única página no meu site em uma página do Facebook e torná-la uma aba na minha página do Facebook. É muito fixe. O que eu fiz foi basicamente escolher agora que eu tenho todas essas diferentes páginas do Facebook que eu gerencio para mim e para os clientes. Eu vou basicamente escolher a lista vinculada para a minha página pessoal do Facebook. Novamente, para que qualquer um de nós funcione, você precisa primeiro vincular sua conta do Facebook ao Squarespace. Então o que eu posso fazer é eu posso vir aqui e eu posso instalar uma guia galeria se eu quiser e talvez ter um portfólio ou uma galeria do meu trabalho. Então eu também posso ter uma guia de página do Squarespace. O que você pode fazer é se você clicar sobre isso, ele vai literalmente me mostrar todas as páginas do meu site que eu tenho algumas. Mas tenho a inscrição na lista de e-mails do Jake Jorgovan. Então eu posso realmente mudar esse cabeçalho sobre isso, e definir esta guia de página básica do Squarespace. Agora o que isso vai fazer eu vou pular para o Facebook aqui e mostrar a vocês. É que se eu estou aqui na minha página de fãs do Facebook, novamente isso é em uma página de fãs não minha página de perfil pessoal, eu tenho todas essas opções diferentes aqui para linha do tempo sobre fotos. Agora eu tenho esta pequena opção para me inscrever para o boletim de e-mail do Jake. Isso é super legal porque se alguém apenas clicar nisso, eles literalmente verão a página exata do Squarespace que eu construí no meu site. Esta é uma página no meu site que é agora apenas basicamente foi construído escrever aqui na minha página do Facebook. Super recurso útil que você pode usar isso para talvez o seu portfólio, você pode até mesmo fazer com a página inicial do seu site para que ele links para outras coisas. Para mim, eu fiz isso apenas por um simples e-mail inscrição boletim informativo. Mas é um recurso super legal de uma forma que você pode realmente personalizar sua página de fãs do Facebook e maneiras que muitas outras pessoas não podem fazer, então é algo que é muito legal e exclusivo do Squarespace. 14. Entendendo a guia de configurações: Vamos continuar aqui com as configurações e agora eu vou descer, vou clicar na próxima opção, blogar. Entramos em blogs, a primeira coisa que vamos ver é este formato de URL de postagem. O que você vai ver é agora, por padrão, ele vai dizer /ano/mês/dia/título. Basicamente o que isso significa é que se eu for ao meu blog agora e eu clicar neste primeiro projeto sobre por que os criativos devem ter projetos paralelos. O que você vai ver, e o que eu vou recomendar para você é que você apenas tem o título como parte de sua URL, porque um URL é basicamente tudo isso aqui e, por padrão, o que ele vai fazer é fazer o ano, o mês e o dia. Se eu não alterasse essa opção, diria, 16/01/2015/ por que os criativos devem ter projetos paralelos. Se eu não fiz o que estou prestes a mostrar a vocês, que é excluir essas outras opções do formato URL, todos os meus blogs têm esse URL muito grande, que não é um grande fã de. Prefiro tê-lo o mais curto possível. O que eu vou fazer é basicamente apagar tudo isso. Dessa forma, realmente é apenas /blog/o título do artigo e para fazer isso, eu literalmente vou entrar aqui e bater backspace. Apenas exclui cada um destes, o /ano/título tudo isso. O que nós vamos acabar com este título e esta é a opção que eu tenho no meu site agora. Quando você vai aos meus blogs, o que você viu é /blog/porque os criativos devem ter projetos paralelos, o título do artigo. Em seguida, eu vou mostrar a vocês como vincular disqus, o sistema de comentários que eu mencionei anteriormente, site squarespace de dois anos. Nós ainda estamos aqui sob a opção de blog e o que eu vou fazer é que eu preciso inserir meu nome abreviado disqus. A primeira coisa que eu preciso fazer é vir aqui para disqus e eu recomendo criar um site ou criar um perfil para você, que eu não vou te guiar por tudo isso. Eu acho que você pode se inscrever para um perfil por conta própria. Mas o que vamos querer fazer é quando você estiver logado, vir aqui, clicar no seu perfil e clicar em “Admin”. Uma vez que você está aqui neste painel disqus, Eu posso clicar neste link aqui e adicionar um novo site. Meu site é site sem código em websitewithoutcode.disqus.com, mas é tomado. Eu vou fazer um site Jakes sem código e este não é levado. Isso é bom. Eu posso escolher e vamos dizer que este é um site de negócios. Vamos terminar o registro aqui. Uma vez que passamos por lá, ele vai nos pedir para integrar com uma plataforma e ver aqui você pode ver este código universal WordPress, blogueiro tipo pad, Tumblr, todas essas coisas. Mas vamos clicar. Há um belo ícone de espaço quadrado bem aqui no meio. Clique nisso. Agora ele vai nos mostrar basicamente as instruções de configuração para o próximo Squarespace. O que nós vamos ter é basicamente novamente, ele vai dizer-lhe como administrador configurações gerais, que é na verdade um pouco datado no site lá. Nosso Squarespace mudou, como você vê, agora estamos sob as opções de blogs, então isso é disqus incorretos que vocês precisam atualizar. Mas a coisa útil aqui é que ele vai lhe dar seu nome curto e seu nome curto disqus é realmente tudo que você precisa. Vou copiar este pequeno nome bem aqui. Eu vou colar este ouvir direito na conta do Squarespace e nós temos apenas aqui disqus vinculados nosso sistema de comentários foi totalmente substituído por disqus e o sistema interno de comentários do Squarespace agora foi trocado por Disqus. Muito simples. A última coisa nesta página é que temos gosto simples. Este pequeno post de blog opcional onde alguém pode dizer, Eu gosto do seu post, isso é legal e você pode escolher ter isso ou não. Então aqui está também se você disser não tem seu nome abreviado, que eu vou realmente deixar isso de fora por um segundo porque para mostrar a você, mas dizer que você não usa disqus. Nós viemos aqui para os comentários e configurações. Podemos realmente definir um punhado de configurações de comentários em nosso site. Como podemos ativar comentários globalmente ou podemos desativá-los e literalmente não há comentários em nosso site. Nossos blogs são apenas artigos, mas não há comentários sobre eles. Podemos permitir que as pessoas gostem de comentários. Podemos exigir uma aprovação, e isso significa que tudo vai continuar nessa fila de moderação antes de realmente aparecer ao vivo em seu site. Você pode escolher se você quer que as pessoas comentem anonimamente ou se eles têm que colocar em informações. Comentários encadeados, as pessoas podem responder a outros comentários. Você pode ter um tópico de onde alguém começa uma discussão e todos continuam jogando fora disso. Se você quer que os avatares sejam exibidos ou apenas texto ao lado dos comentários e, em seguida, se você deseja ativar comentários ou você pode realmente desativar ou ativar comentários conforme você passar e publicar cada post no blog. Nesta próxima opção aqui, como desabilitar o valor padrão de comentários. Vou ser sincero, honesto e dizer que não sei o que isso faz. Simples assim, vamos seguir em frente. Eu não sei muito bem. Eu estou pensando que esse é o tempo que leva em um comentário moderado vai simplesmente desaparecer, mas eu poderia estar errado. Obviamente, eu nunca usei, então eu não acho que é muito importante. Você pode escolher sua ordem de classificação de comentários, que é fazer todos os comentários mais recentes que você mais gostou, seus comentários menos curtidos primeiro. Então você quer que as pessoas sejam capazes de sinalizar comentários e definir isso. Em seguida, escolha o número de comentários, se um comentário receber um sinalizador, então ele é automaticamente definido para aguardando moderação e talvez você tenha um alto tráfego sites e se cinco pessoas sinalizá-lo, então ele vai para o aguardando seção de moderação. Soma coisas simples em torno de como você pode editar seus comentários lá. Só vamos salvar isso. Volte aqui para blogar. Eu realmente gosto deste pequeno link de disqus então eu vou apenas bater volta e isso vai me trazer de volta aqui para o Squarespace, de volta onde estava. Nós estamos indo apenas para colar em que disqus nome curto, aperte “Salvar” e nós temos agora configurado isso. Ainda podemos entrar nesta configuração de moderação de comentários e mesmo que tenhamos disqus habilitados, todas essas opções, você ainda pode resolver essas opções aqui no seu site. É tudo o que temos aqui na seção de blogs. SEO, Otimização do Motor de Busca. Isso é basicamente sobre seus rankings do Google e como você aparece quando alguém digita palavras-chave relevantes para o Google. Vamos clicar em “SEO” e aqui você pode entrar em uma breve descrição para o seu site. Novamente, esta é uma maneira muito útil de colocar algumas palavras-chave aqui, coisas que você gostaria de estar procurando. Mas tente não apenas empilhá-lo com palavras-chave, mas tentar realmente descrever seu site um pouco, torná-lo algo legível. O Google não gosta quando as coisas são apenas trituradas com palavras-chave. Na verdade, prefere conteúdo orgânico real. Então também, se você estiver nesta seção de SEO, como eles recomendam que você clique neste link sobre como aumentar a visibilidade do seu mecanismo de busca. Vou passar por isso com mais detalhes, mas isso mudou ao longo da vida do Squarespace desde que eles lançaram novas opções. Mas esta página diz-lhe tudo sobre como otimizar o seu site para SEO. Há alguns outros truques que vou mostrar ao longo do caminho, mas é um bom lugar para começar. Próximo quadro venha aqui para o formato de título da página inicial. Provavelmente você é muito baixa chance provável de que você vai mudar isso. Mas se quiser, pode pairar por aqui. Você vê um pouco mais sobre isso, mas eu duvido que você vai lidar muito com isso. Em seguida, seria um título de coleção. Então isso é realmente muito útil. Então, digamos, você tem um título de coleção como o blog de barra, ou uma galeria ou algo assim e alguém vai a uma postagem de blog. Agora isso é basicamente escolher de novo, como você quer que isso apareça? Você só quer ter o nome do site cortar a URL ou você quer ter o nome do site barra blog cortar o nome do artigo. Então, novamente, se você se livrar disso, encurta seu URL ainda mais e você não terá aquele blog barra lá. Então estas são coisas individuais novamente, como a postagem do blog, você pode simplesmente encurtar isso se quiser ou você pode ter o título do item lá também. Novamente, coisas não muito importantes, mas se você está ficando sério, você está construindo um blog, um monte de conteúdo, essas são coisas que vale a pena investigar. Em seguida, vamos descer aqui para a segurança. Este é um recurso muito útil, mas digamos que seu site está no modo de rascunho. Se você digitar uma senha aqui, e basicamente o que isso vai fazer é sempre que alguém vem ao seu site, ele tem que digitar uma senha para olhar para o site. Isso é muito útil se você está construindo uma nova versão de um site ou você está trabalhando em um projeto de alto perfil e você não quer que as pessoas saibam. É uma maneira legal de escondê-lo. Vocês podem trabalhar internamente e ninguém pode ver a menos que tenham essa senha. Faturamento na conta. Isso basicamente você vai entrar aqui, e se você quiser ver suas faturas, quanto você pagou, você quer olhar para o histórico de seu login, ou você só quer excluir o site e você pode fazer isso aqui, você também pode entrar aqui e apenas inserir suas informações de cobrança. Estou fazendo isso em um site de demonstração do Squarespace, então ele só diz que este é um site gratuito. Mas, caso contrário, você pode entrar aqui e clicar em suas informações de cobrança. Entre em todo esse pagamento e tudo mais. Da última vez, vamos descer aqui para avançado, o que abre um monte de buracos mais. Mas eu vou passar por isso muito rápido, não é um grande negócio. 404 página de erro não encontrado, Isso basicamente significa que se alguém vai e eles fazem um erro de digitação em seu site ou você tem um dead-link. Você pode basicamente enviar isso para um padrão do sistema que diz que não foi possível encontrar a página que você estava procurando. Ou o que eu faço no meu site é em vez de enviá-los para uma página de erro, eu enviá-los para apenas direto para a página inicial. Dessa forma, se eles têm um dead-link, ele os traz de volta para a página inicial e espero que não apenas enviá-los fora ou pensar que meu site está quebrado. Uma coisinha tão simples lá. Aperte salvar. Cabeça para trás, ouça. Editor de texto padrão provavelmente não vai querer mexer com isso a menos que você saiba como escrever markdown, que é um formato de tipo de blog para escrever muito rapidamente. Então provavelmente não vai se preocupar com isso. Escape key, isso é muito legal, mas, se eu for apenas Jake jorgovan.com, eu nem estou logado no Squarespace ou qualquer coisa escrever agora. Eu só acertei em fuga. Ele literalmente me leva e eu posso começar a trabalhar no meu site. Se eu não estivesse conectado, ele me pediria para fazer login, mas eu já estou logado. Então isso é legal, algumas pessoas não gostam, mas você pode desativar isso se quiser, e você só precisa ir ao squarespace.com para fazer login. Mas honestamente, eu gosto, acho que é muito útil. Importação, exportação. Se você quiser exportar seu site, você pode exportá-lo em basicamente um formato WordPress. O Squarespace faz isso porque, basicamente, se você o tiver em um formato Wordpress, você pode carregá-lo em quase qualquer outra plataforma. Mas então, se você precisar mover seu site fora do Squarespace, Você pode exportar todo o conteúdo, os blogs, todas essas coisas. Você também pode importar conteúdo. Podemos vir aqui e você pode importar do Squarespace versão cinco, você pode importar do WordPress, Tumblr, Shopify, Etsy, Blogger, Big cartel. Então, se você já tem um site em uma dessas plataformas, você pode simplesmente puxar seu conteúdo para cima. Tão simples. Vamos voltar aqui, e vamos para serviços externos, e vamos mostrar a você como configurar seu Google Analytics, número de conta que você pode inserir aqui ou sua tag de associado da Amazon. Provavelmente vou mergulhar muito no associado da Amazon. Você pode pesquisar no Google se precisar. É muito simples, você acabou de colocar sua etiqueta de associado bem ali. Em seguida, no vídeo posterior, eu realmente vou mostrar a você como configurar Google Analytics em seu site, bem como, mas também realmente simples você literalmente basta digitar em seu número de conta do Google Analytics. Então, coisas muito simples. Em seguida, vamos descer aqui, Modo Desenvolvedor. Você não vai tocar nisso porque isso é na verdade, se você quiser abrir o Squarespace e mexer com o código e tudo mais, e este pró-classe é chamado de site sem código então, eu estou supondo que você provavelmente não vai querer vá para o modo Desenvolvedor. Injeção de código. Você provavelmente não vai lidar com isso também. Mas, se você precisa colocar em algum HTML personalizado ou CSS, ou você precisa colocar, algum código em seu cabeçalho para pequeno aplicativo ou widget específico que você deseja. Você pode colocar isso aí também. Mais uma vez, espero que você não tenha que lidar com isso, mas se precisar, é assim que você faz. Mapeamentos de URL, novamente, provavelmente não vai se preocupar com essas coisas. Um pouco de imagem avançada e importação, provavelmente não vai se preocupar com este material, bem um pouco mais avançado para o site sem classe de código. Uau, nós acabamos de usá-lo através do painel de configurações. Super excitante que foi muito, eu sei. Então adivinha o quê? O próximo que eu vou fazer em um clique. Eu já só preciso de ajuda, clique neste botão, e isso me leva a help.squarespace.com onde você pode pesquisar sua base de conhecimento. Posso olhar para as oficinas deles, me envolver com a comunidade lá, ou simplesmente enviar um bilhete ou qualquer coisa se eu precisar. Então, de novo, aquele, muito simples. Acabamos de completar nossa excursão pelo Squarespace. Tão incrivelmente simples. Espero que isso tenha sido útil, eu sei que foi um monte de detalhes, mas eu acho que ter uma forte compreensão de onde tudo está, como dois navegam, isso vai ajudar você a seguir em frente. Nas próximas seções, vamos realmente começar a mergulhar na edição das páginas, editando o conteúdo, ficando estilizado, fazendo todas as coisas divertidas e começando a realmente fazer um site que parece muito bom. Então fique comigo, está prestes a ficar divertido. 15. Um passeio prolongado no outro no Squarespace: Então eu só mostrei a vocês um monte de ferramentas diferentes. Espero que tenha sido emocionante para vocês perceberem todo o potencial que podem fazer e como é fácil trabalhar com o Squarespace. Agora, na próxima seção, vamos começar a entrar em como fazer seu site parecer bom. Vamos usar o Editor de Estilos e começar a projetar e estilizar seu site para que você possa ajustá-lo e fazê-lo parecer o site dos seus sonhos. 16. Uma introdução no editor visual: O propósito do editor visual aqui é, novamente, esta é uma diferença. Você tem seu editor visual e, em seguida, você tem seu editor de estilo. Os editores de estilo iam mudar suas fontes, suas cores, todas essas coisas, e seu editor visual realmente vai nos permitir começar a mudar todo o conteúdo que está no site. Aqui nós não estamos realmente, novamente, nós não vamos estar trabalhando com todos os estilos reais e fontes. Mas, em vez disso, o que vamos fazer é passar e realmente adicionar e colocar conteúdo no site. Nós vamos vir aqui para esta página inicial simples que temos. O que diz é que temos casa e não temos nada aqui. Uma página web completamente vazia e em branco. O que vamos fazer é neste tema cinco, temos este cabeçalho aqui em cima. Não vamos nos preocupar muito com isso agora, mas vamos entrar nisso em um segundo. Mas o que vamos fazer é que vamos descer aqui e vamos ver este conteúdo do cabeçalho da página inicial, vamos ver este conteúdo do rodapé da página e este conteúdo do rodapé da página inicial. Eu não uso muito o cabeçalho e o conteúdo do rodapé. Mas o conteúdo da página, isso é realmente onde uma grande parte do conteúdo em sua página vai viver. O que eu vou fazer é primeiro clicar em “Editar” aqui. Você verá que temos isso um editor visual que aparece e eu posso começar a digitar no meu site. Diga, olá, este é o texto do site. Podemos entrar aqui e usar este editor de texto e fazer o negrito, itálico, qualquer coisa. Eu gostaria de passar por tudo isso em um pouco mais de detalhes em um vídeo separado. Mas também temos essa habilidade de ver esses pequenos círculos bem aqui. Podemos adicionar coisas abaixo, acima e abaixo. Se eu descer aqui e clicar neste pequeno círculo, posso adicionar todos esses pequenos widgets e blocos diferentes. Digamos que quero adicionar uma imagem. Eu posso fazer isso. Eu posso clicar na imagem, e eu tenho esta pequena ferramenta de upload de imagem. Venho aqui para adicionar uma imagem e clicar neste upload. Agora eu posso basicamente vir aqui e encontrar as imagens que eu quero enviar. Vou enviar esta foto de herói aqui. Não vou me preocupar muito com isso. Vamos entrar no material da imagem em um pouco mais em um vídeo mais tarde. Mas vou deixar este upload. Eu provavelmente deveria ter compactado isso antes de fazer isso, mas para fins de demonstração, vai funcionar. Uma coisa, apenas a qualquer momento em sites que você quer tentar compactar imagens, geralmente cerca de 250 kilobytes ou abaixo de um megabytes é geralmente uma compactação de tamanho decente para a web. Então tente comprimir sem perder muita qualidade. Mas este não foi comprimido, então está demorando um pouco. Uma vez que isso vai levar um momento para processar e redimensionar. Então temos uma imagem em nosso site. Acabamos de adicionar um texto. Podemos adicionar uma legenda. Aqui está uma legenda legal. Você pode vir aqui de novo e adicionar outro bloco. Vamos ver, o que queremos descer? O que seria legal? Queremos talvez adicionar alguns links sociais. Quero ter links para todos os perfis das redes sociais. Bem, vou clicar em “Links sociais”, posso mexer com o alinhamento, dizer, sentar à esquerda onde está o texto. O que você vê é agora aqui está aquele pequeno ícone do Twitter. Lembre-se de como nos vídeos anteriores acabamos de integrar a conta do Twitter. Bem, você vê o ícone do Twitter aqui, mas se eu tivesse conectado Facebook, Instagram e YouTube, todos esses ícones apareceriam aqui também. Eu posso mudar o tamanho disso e trabalhar com todas essas opções diferentes aqui, mudar o estilo e um monte de coisas legais. Eu realmente posso personalizar isso para olhar como eu quero que ele fique. Vamos guardar isso. Mas tudo isso, talvez isso não esteja funcionando como eu quero. Talvez eu queira esse ícone social embaixo desse texto e quero que a foto fique à direita. Como faço isso? Bem, outra coisa legal sobre os editores visuais, você pode realmente arrastar e soltar. Vou pegar essa foto e posso começar a arrastá-la. Se você olhar para isso, eu posso realmente começar a movê-lo. Então veja essa linha cinza grossa aqui atrás. É onde estou prestes a largar isto. Então, se eu soltar aqui, a imagem agora estará acima do texto. Olha para isto. Agora temos a imagem acima do texto e temos o ícone de mídia social logo abaixo. Talvez a queiramos abaixo do ícone das redes sociais. Arraste-o até aqui. Agora temos estes acima. Tão simples quanto isso, posso literalmente reorganizar como o layout do site é. Eu também posso vir aqui. Se eu for para o lado, eu posso realmente começar a colocá-lo nessas colunas e a coisa lateral fica um pouco confuso. Eu vou dizer isso. Então você vai notar que em diferentes áreas, coisas diferentes acontecem. Primeiro, se eu vir até aqui, à direita, eu fico com este grande e longo bar que vai todo o caminho para a direita. O que isso fez foi criar uma coluna inteira. Na verdade, vou colar um monte de texto neste site. Então você pode ver que eu acabei de criar uma coluna, colocando-a onde eu tinha aquela barra vertical grande. Eu criei uma coluna para o site. Mas vamos recomeçar e voltar para baixo. E se eu vier aqui onde tenho esse tipo de caixa cinza? Bem, se eu tiver essa caixa cinza, e o texto vai enrolar em torno dela. Caixas cinza permite que você faça este efeito de contorno de textos. Essa é outra maneira legal de fazer isso. Então a outra coisa que podemos fazer é literalmente entrar aqui e basicamente fazer com que estes venham para a direita e parece uma coluna. Mas o que você vai ver é que este bloco ainda tem largura total. Diga se eu tivesse mais texto aqui, ou se eu apenas copiar e colar. Agora, porque eu o defini para onde essa barra apenas spam a altura vertical deste, eu criei uma coluna lado a lado com este elemento bem aqui. Mas todo o resto, não há uma coluna completa no resto da página. Novamente, é um pouco confuso. Leva um pouco de tempo para se acostumar, mas é muito, muito poderoso. Você pode ajustar isso e literalmente agarrar, fazer esta imagem menor, ou você pode fazer esta imagem maior. Você pode realmente ajustar isso ao seu gosto e obter um layout de página que se pareça exatamente como você quer. Se eu quiser que o texto envolva o lado esquerdo, venha aqui, faça a mesma caixa cinza e agora com o texto quebra aqui e faça a mesma coisa, faça menor, faça maior, e realmente ajuste o tamanho da imagem e tudo muito, muito simples. Esta é a visão geral básica do editor visual. Vou parar aqui neste vídeo. Então no próximo vídeo é que eu vou ficar um pouco mais detalhado. Vou mostrar-lhe algumas outras coisas ao redor das configurações da página e como se livrar da barra lateral aqui e algumas coisas assim. Então eu só mostro um monte de truques legais e vou um pouco mais fundo, mais fundo nisso. Mas espero que esta tenha sido uma visão geral decente para te familiarizar com a forma como esta coisa toda funciona. 17. Entendendo a guia de configurações da página: No último vídeo, eu mostrei um pouco sobre como apenas colocar para fora e trabalhar com o conteúdo da página aqui em baixo. Mas antes de mergulhar nisso, nós realmente deveríamos limpar algumas dessas outras coisas. Este cabeçalho não parece muito bonito agora, a barra lateral não é muito agradável. Gostaríamos de fazer isso parecer um pouco mais como um site para que possamos realmente começar a projetar dentro disso. Para fazer isso, o que realmente vamos fazer, é descer até aqui para a guia de configurações da página. Podemos fazer isso por sobreposição aqui e ir para as configurações. Isso vai mostrar esta página de configuração, a guia de configurações da página. Ou se você não conseguir encontrar isso porque alguns temas têm isso em pontos ligeiramente diferentes. Você sempre pode clicar neste pequeno ícone de engrenagem ao lado da página em que você está trabalhando. Nós vamos clicar sobre isso aqui mesmo, o ícone de engrenagem, ele leva e ele traz as configurações da página. A primeira coisa que podemos fazer é mudar a navegação e o título da página. Talvez em vez de casa, quero que isto seja bem-vindo. Podemos ativar ou desativar esta página se quisermos. Realmente, você não precisa se preocupar com isso, a menos que esteja fazendo uma conta de nível inferior e talvez tenha um limite de página. Podemos optar por ter outra barra lateral divide barras laterais, se em ambos os lados, você vai ter duas barras laterais na direita ou esquerda ou você pode ir largura total por causa da demonstração, e que eu realmente não quer barra lateral na minha página inicial, eu vou para a largura total. Novamente, dependendo do tema em que você está, nem todos os temas têm barra lateral, então você pode nem ter essa opção aqui. Você pode ter uma guia de descrição da página. Novamente, não muito importante com um monte de temas. Alguns temas vão usar isso especialmente temas como Bedford e shift. Mas para cinco, não tem impacto visual. Mas, novamente, este é também outro ponto para colocar em algumas informações de otimização do mecanismo de busca aqui. Podemos alterar a URL. Talvez eu queira que isso seja bem-vindo em vez de casa. Podemos colocar uma senha nesta página. Digamos que talvez haja uma parte do seu site que é apenas você quer disponível para membros ou clientes, você pode protegê-lo por senha. Então a última coisa aqui, que vai fazer esta página parecer significativamente melhor, muito mais rápido, é que podemos adicionar uma imagem em miniatura. Vou clicar para carregar a imagem em miniatura. Nós vamos fazer o upload aqui ou fechar, ainda não compactamos aquele cara, então vai demorar um segundo. Mas enquanto carrega, vou falar sobre as próximas coisas. A última coisa é que você pode fazer aqui sob as configurações da página, ou você pode definir isso como a página inicial, esta será a página padrão que alguém aterrissa em que vamos fazer. Você também pode duplicar esta página. Talvez você esteja fazendo uma coisa portfólio na página e você quer fazer algo muito parecido com o mesmo layout. Você não quer ter que refazer todo o layout, mas você só quer trocar imagens e texto. Isto é muito, muito útil para isso. Ou se você quiser talvez fazer um backup e tentar duas coisas diferentes. É onde você tem lá. Em seguida, sob avançado, novamente se você precisa injetar algum código em seu cabeçalho, talvez você esteja fazendo um aplicativo incorporado e eles dizem, colocar este código de cabeçalho lá em cima, você pode fazer isso, mas novamente este é um site sem código, Espero que você não precise tocar nisso. A última coisa que vamos fazer é definir isto como nossa página inicial. Vamos apertar “Confirmar”. Agora vamos salvá-lo. Quando o salvarmos, ele irá recarregar a página para refletir nossas alterações. Agora, nossa imagem em miniatura, como você verá no tema cinco, é refletida aqui na nossa área de banner bem aqui. A casa mudou para ser bem-vinda e nossa barra lateral desapareceu porque estamos em toda a largura. Agora este texto foi literalmente expandido para ter toda a largura do site. Um último truque que vou te mostrar é. 18. Como gerenciar o texto no Squarespace: Neste vídeo, vou mergulhar um pouco mais no editor visual e mostrar especificamente como trabalhar com texto e fontes dentro do Squarespace. Para começar, nós vamos voltar a descer aqui, e nós vamos e vamos passar o mouse sobre este Editar sobre o conteúdo da página aqui, eu vou clicar em “Editar”. Agora estamos de volta ao que criamos antes. Vou apagar algumas dessas coisas só para não termos tanta dor de cabeça no caminho. Nós pouca coisa útil, mas se você quiser apagar algo, você tem duas maneiras de fazer isso. A primeira é se você tiver um elemento de bloco como este, você pode simplesmente clicar duas vezes nele e, em seguida, clicar em “Remover”, clicar em “Confirmar”, e todos os meus links sociais desapareceram. Mas talvez eu queira me livrar desse elemento de texto aqui. Opa, eu só fiz isso, mas com texto é um pouco estranho mas você não pode simplesmente pegar um texto no meio porque ele vai editá-lo. O que você faz é passar o mouse sobre o lado do texto e você começa a obter essa pequena mão de agarrar. Quando tiveres essa mão de agarrar, podes fazer todas as mesmas coisas de movimentar, tal como fizemos antes. Posso pegar uma gota lá em cima. Posso agarrá-lo lá em baixo e, por alguma razão, não está sozinho. Lá vamos nós. Largue para a direita. Todas aquelas coisas divertidas. Ou se eu quiser, posso vir aqui e apagá-lo. Eu posso simplesmente excluir clicando novamente, arrastando-o para a lata de lixo e excluindo. Aqui estamos, de volta a uma página aberta. Agora vou mostrar-lhe basicamente como editar e gerenciar algum conteúdo em seu site. Para fazer isso, o que vou fazer é ter uma declaração de artista. Enquanto eu passar por este site eu vou estar trabalhando neste site para uma artista Elizabeth Cairnes. Acabei de ir ao meu Google Drive, copiei este texto. Eu vou vir aqui e vou colar isso no Squarespace. Agora, uma coisa que você quer ter muito cuidado, é que o Squarespace irá automaticamente inerente a qualquer formatação ou tentará fazer as fontes ou qualquer uma dessas coisas que quando você importar algo para o seu site. Se você notar, tudo é um pouco justificado para a direita se eu realmente começar a digitar aqui, ele digita para a esquerda, mas, por alguma razão, estes são todos recuados. Isso é tudo basicamente por causa de eu ter copiado e colado texto no Squarespace. Isso é algo que você quer realmente fazer sempre que você copiar e colar texto no Squarespace, é que você quer vir você quer destacar em tudo, e você quer destacar sobre este pequeno Remove Format. Quando você faz isso, voilá, repente sua formatação é normal e não há nenhuma peculiaridade estranha acontecendo com ela. Temos este texto aqui agora, não há formatação. O que nós vamos fazer básico agora é apenas vir aqui, eu vou adicionar um título, Artists Statement. Este vai ser o cabeçalho da página, então com estas páginas, vamos ter esta declaração do artista, mas queremos que a declaração do artista se destaque. Nós não queremos que ele se pareça com o resto do texto, queremos que ele se pareça com um cabeçalho ou um título para esta seção. O que eu vou fazer é destacar a declaração do artista, e há um punhado de coisas que eu posso fazer. Primeiro eu posso bater em Bold, e eu poderia apenas torná-lo ousado se eu quisesse. Eu poderia torná-lo em itálico. Eu poderia transformá-lo em um link se eu quisesse e há um link vai aparecer e eu posso digitar em elisabethcairnes.com e fazer isso um link se eu quiser, eu posso abrir isso em uma nova janela ou não. Mas não vamos fazer essa ligação agora. Eu posso torná-lo justificado à esquerda, centro justificado, ou direita, e da mesma forma eu posso realmente fazer isso com todo este bloco. Se eu destacar tudo, eu faço o centro, direita ou esquerda. Mas esta é a parte poderosa aqui. Podemos vir e ver agora que temos um formato de parágrafo normal. Se eu simplesmente ir destacar declaração artista e eu clicar em “Cabeçalho 1! você percebe que temos essa opção de título. Talvez eu queira um pouco menor e eu possa clicar em “Cabeçalho 2". Você percebe que isso vai mudar para laranja, mas eu vou explicar isso em um segundo. Talvez eu queira um pouco menor de uma manchete e obter um título 3. Basicamente, nós podemos escolher isso Eu vou deixá-lo como um título 1. O que eu quero explicar aqui é que, quando você está trabalhando com a web, você não tem tamanhos de fonte realmente. Você não diz, “Oh, eu quero que esta seja uma fonte de 22 pontos e eu quero que esta seja 16. Em vez disso, a forma como o Squarespace funciona e a forma como a web funciona, é que você tem esses títulos e você tem seu texto normal, e para todo o seu texto regular deve ser o mesmo e todos os seus títulos serão consistentes. Basicamente tudo o que você escolher como um Título 1, um Título 2 ou um Título 3. Chegamos ao editor de estilos, vou mostrar-lhe como você pode ajustar estes e por que, como você pode fazer este onde ele não fica laranja ou vira uma cor diferente se você quiser ou pode ser uma fonte diferente, e como você pode ajustar isso. Mas a razão por trás desses Cabeçalhos 1, Cabeçalho 2 e Cabeçalho 3, é que ele cria consistência em todo o seu site. Um dos maiores erros que as pessoas que não sabem nada sobre web design fazem quando começam a fazer sites, é que estão literalmente fazendo essa coisa desse tamanho, essa coisa desse tamanho e ela se transforma nessa feia, site horrível onde nada parece bom e consistente. A propósito, o Squarespace projetou isso onde você só obtém essas três opções de cabeçalho e uma opção para uma citação, se quiser. Ele realmente faz com que seja onde o seu site vai ficar bem. Vai parecer um site profissional porque é assim que os web designers profissionais trabalham. Algumas das outras coisas dizem, queremos que seja uma lista. Podemos simplesmente fazer isso e agora temos uma lista de 1, 2, 3 aqui. Não sei se venho aqui. Ou talvez não queiramos que seja uma lista e queremos que sejam pontos de bala. Podemos fazer pontos de bala também. Ou podemos clicar nisso novamente e voltar ao normal, podemos recuar isso para a direita ou não. Então, novamente, podemos limpar a formatação também. Agora, a última coisa que vou mostrar a vocês é esta opção colar como texto simples. Remover formatação faz a mesma coisa, mas dizer que não queremos colá-lo em todos os funky e nós só queremos que ele entre perfeitamente. Tudo o que posso fazer é vir aqui, clicar em “Colar como Texto Simples” e vou colá-lo aqui e novamente você vê toda a formatação estranha, o recuo para a fonte, eu apertei “OK”. Vai aparecer na perfeição, sem formatação estranha ou qualquer coisa que esteja no caminho. Mais uma vez, eu queria a outra opção, colá-lo, ter a formatação estranha e recuos e outras coisas, e eu apenas clicar em “Remover formatação” e tudo isso desaparece. Mas, novamente, seja cauteloso com isso. É um grande problema que vejo com muitos sites do Squarespace onde as pessoas dizem : “Eu não sei por que isso parece estranho minha fonte.” Algumas das razões pela qual isso parece diferente de tudo o resto, e muitas vezes é porque eles copiaram e colaram texto no Squarespace, e a formatação fez isso parecer desse jeito. 19. Trabalhando com links: Neste vídeo, mostrarei a vocês como trabalhar nos links do Squarespace. Este é um muito poderoso sempre que você quiser criar um hiperlink ou algo assim, mas o que vamos fazer é simplesmente adicionar um pequeno texto aqui diz, “Veja meu portfólio”, Vamos transformar isso em um link. O que vamos fazer é clicar nesta opção “Editar link” aqui. Como eu mostrei antes sobre como criar um link, mas eu quero entrar em um pouco mais de detalhes. Então, vamos clicar nisso, e essa janela de link aparece. Podemos digitar um link que queremos que o site vá para, e então podemos escolher se queremos que ele abra uma nova janela ou não. Se não escolhermos abrir em uma nova janela, basicamente o que vai acontecer, é o seu site atual, o navegador em que eles estão, vai realmente substituir essa janela. Então ele vai ser retirado totalmente do seu site. Se você escolher para que ele seja aberto em uma nova janela, ele vai abrir uma nova aba, exatamente como esta. Ele ainda vai manter sua guia aberta com o site. Geralmente, se eu estiver ligando para algo fora dos sites, vou abrir em uma nova janela. Se eu estiver ligando para algo dentro dos sites, eu geralmente vou deixá-lo aberto dentro da janela, que geralmente é uma boa regra de ouro. Outra coisa que você pode fazer, é que você tem este externo, que é um link externo, mas eu também posso clicar no conteúdo. Então, talvez eu queira vincular a minha página Sobre, ou se tivéssemos uma página de portfólio feita, eu faria um link para isso. Mas eu acabei de clicar em “Sobre”, e você verá que agora ele mudou o link para a página Sobre. Mas quando eu clico no link aqui em baixo, ele realmente traz esta opção para remover o hiperlink ou editá-lo. Então eu vou voltar para editá-lo. Porque, de novo, posso escolher se quero abrir uma nova janela também. Agora estou abrindo em uma nova janela. Então, se alguém clicar nisso, ele vai me levar para a página Sobre, e abri-la em uma nova janela. A última coisa que vou mostrar sobre os links, é que você pode fazer upload de arquivos. Talvez eu queira ter um PDF de portfólios, mas por enquanto, vamos carregar esta foto bem aqui. Este arquivo será enviado, assim como fizemos com as fotos anteriores, mas agora será um arquivo para download. Então muitas vezes você pode fazer isso para talvez um PDF, ou um documento, ou qualquer coisa assim, um e-book ou algo que você quer que as pessoas sejam capazes de baixar. Você pode literalmente enviar esses arquivos para o Squarespace usando este pequeno editor de arquivos, e ele vai salvá-los para que possamos realmente vincular a eles quando quisermos. Isso se torna um novo arquivo no back-end do Squarespace. Se quisermos vincular a ele, basta clicar aqui. Agora, isso é definido, que vai abri-lo em uma nova janela, e nós tivemos que definir esse link para onde ele agora vai vincular a essa imagem. Para demonstrar, eu venho aqui. Além disso, vamos para tela cheia, então eu não estou no modo editor e eu posso vê-lo. Agora eu clico em “Ver meu portfólio”. Ele abriu em uma nova janela, e agora ele está carregando essa imagem. Lá vamos nós, apenas ligamos a esta imagem bem aqui. Novamente, você pode fazer isso com um PDF, qualquer tipo de arquivo que deseja enviar para o Squarespace. É assim que você trabalha com links. Sempre que você precisar mudá-los no futuro, você pode apenas vir aqui, e você pode clicar em “Editar”. Além disso, você vai notar agora que ele não parece muito de um link, e isso é porque isso é novamente, outra coisa no editor de estilos, que vamos chegar a um pouco mais tarde, que vai mostrar a você como mudar as cores, e os olhares, e os campos, e as fontes de seus links, você está dirigindo, seus textos, todas essas coisas. Agora você provavelmente não pode nem dizer que é um link, mas uma vez que chegamos à seção do editor de estilos, você verá Eu vou editar e estilizar esta página, e você pode ver que eu posso realmente mudar a cor do link para torná-la a cor que eu quero que seja. 20. Como usar o bloco de imagem: Neste vídeo, vou mostrar como fazer upload imagens e lidar com tudo com o Bloco de Imagens no Squarespace. Agora, no vídeo anterior, eu mostrei a vocês como fazer upload de uma imagem, mas eu realmente não passei por tudo ao redor dela. Quero passar por isso com um pouco mais de detalhes. Para começar, vá até o conteúdo da página novamente e clique em “Editar”, traz-me de volta a este editor visual. Vou adicionar uma imagem aqui. Novamente, eu posso ver todas essas linhas diferentes de onde isso vai aparecer. Quero que essa linha cinza apareça na parte inferior em “Ver meu Portfólio”. Clique nisso. Vou até aqui e quero adicionar um Bloco de Imagens. Então eu vou escolher fazer upload de uma imagem aqui, eu vou apenas clicar no ícone de upload. Mas antes de eu realmente fazer isso, eu quero mostrar a vocês, você também pode pesquisar Getty Images, e isso é super legal. Squarespace fez um acordo com a Getty Images. Basicamente você pode comprar qualquer imagem que está lá dentro através deste motor de busca aqui por US $10. Então eu posso obter qualquer um desses incríveis, loucos belas fotos por apenas US $10 através Getty Images. Tão incrível, você pode procurar o que quiser. Você quer fotos de relógios, escolher relógios, deixá-lo procurar, e agora eu tenho tudo isso por US $10 e obter essas incrivelmente incrível, muito legal, imagens estilizadas de Getty Images. Muito legal, recomendo. Se você quiser, você pode até mesmo visualizá-lo, e ele vai aparecer em seu site e, em seguida, ele vai ter um pouco de sobreposição sobre ele porque ele não é oficial e você ainda não comprou ele. Mas é uma maneira legal de você ver e visualizar imagens antes de comprá-las. Então, quando estiver pronto, basta clicar neste botão “Licença” e você pode passar por realmente licenciá-lo. Eu vou remover isso, porque eu não quero uma imagem de um relógio aqui. Eu vou subir, e eu vou apertar este botão “Adicionar uma imagem”. Então eu vou para os arquivos dos clientes aqui, e eu vou voltar a carregar esta foto de herói. Isso vai carregar aqui, e enquanto estiver carregando, vou mostrar algumas outras coisas. Aqui, logo abaixo, você tem essa opção de oportunidade para legendas. Você pode escolher “Legenda abaixo”, “Não exibir legenda”, “Sobreposição de legenda” ou “Sobreposição de legenda ao passar o mouse”. Então, vou mostrar-vos isso como exemplo. Você pode alterar o nome do arquivo da imagem. Talvez eu queira que seja algo diferente. Isso é realmente útil para otimização do mecanismo de busca, então eu poderia alterá-lo para “elisabethcairnes.jpg”. Então o nome do arquivo seria diferente, e isso é realmente bom para a otimização do mecanismo de busca e tudo mais. Esticar. Este não costuma usar, mas você pode fazê-lo para esticar e abranger o tamanho do recipiente. Lightbox. Vou ligar isto para te mostrar. Mas, basicamente, quando alguém clica nele, a imagem vai aparecer em uma caixa de luz e torná-la um pouco mais fria e maior para ver. Bem, se eu desligar isso, então ele vai realmente me dar outra opção, que é um “URL clickthrough”. Se eu fizer isso, é como todas as opções de link que passamos no vídeo anterior, onde podemos vincular a uma página, link externo ou um arquivo. Se você escolher Lightbox, isso desaparece porque Lightbox se torna a ação de cliques. Então eu vou clicar em “Salvar” bem rápido. Eu vou descer aqui e vou ver se temos esta oportunidade de escrever aqui. Então esta é a legenda. Temos este definido como Sobreposição de legenda em Hover. Também temos que definir o Lightbox. Então eu vou economizar muito rápido para que eu possa demonstrar e mostrar a vocês o que eles realmente fazem. Então, se estamos aqui no site, é interessante a legenda estar aqui apesar de eu não estar pairando. Mas há o recurso Lightbox bem aqui. Então, novamente, não temos um link de cliques, então quando eu clico nele, uma Lightbox aparece, e isso é o que um Lightbox é. Então, não parece fazer muito aqui, mas se sua imagem é realmente pequena, é muito útil porque então alguém pode tirar sua foto pequena que foi projetada em seu site e visualizá-la em tela cheia. Então vamos voltar rapidamente e ver se talvez eu fiz algo errado aqui com o Overlay on Hover. Não, parece estar certo. Minha suposição seria que, isso é porque estamos no modo de pré-visualização. Às vezes, quando você está trabalhando no modo de visualização, ele fica um pouco defeituoso, mas eu suponho que seria corrigido na frente do site. Sobreposição de legenda, que faz com que pareça o que estava realmente fazendo ou está sempre lá. Em seguida, a legenda abaixo coloca a legenda bem aqui abaixo dessa imagem, ou eu posso Não exibir legenda, e ela realmente desaparecerá. Deixe-me guardar isso. Na verdade, ele aparece aqui, mas quando você vai e vê-lo na frente do site, ele deve ter ido embora. Sim. Então você ainda tem essa legenda, que é realmente boa para metadados ou otimização de mecanismos de pesquisa, mas você não pode realmente ver as legendas, não visíveis em qualquer lugar do site. Isso é um pouco sobre como você carrega e cria imagens no Squarespace. 21. Como usar o bloco de galeria: Neste vídeo, vou mostrar a vocês como trabalhar com galerias e espaços quadrados. As galerias são essencialmente um punhado de imagens todas agrupadas. Antes de mostrar a vocês como definir uma galeria, o que eu vou fazer é realmente criar uma. Eu vou fazer isso na seção Não Vinculado, e vou explicar por que em um momento. Eu vou clicar e eu vou criar uma galeria direita para baixo ouvir sob esta seção Não Vinculado. Vou apenas dizer Fotos. Então eu vou vir aqui para esta seção de fotos, e eu vou adicionar imagens aqui em cima. Clique neste e, em seguida, você pode escolher se você quer que ele seja vídeo, imagem ou você pode comprar uma galeria de imagens da Getty. Eu estou indo apenas para ir para “Upload Images”, Eu tenho a minha primeira imagem, que será novamente este tiro herói. Uma vez que esse tiro é carregado, eu vou apertar Salvar e publicar, e agora ele publicá-lo na galeria, e se eu quiser, eu posso adicionar um título de imagem e descrições e adicionar clique nos links aqui. Estes são realmente úteis, especialmente se você diz, talvez você queira que sua imagem da galeria se vincule a algo. Mas eu não vou me aprofundar muito em todas essas coisas agora, pois pode não ser relevante para todos. Vamos publicar a primeira foto. Então eu vou realmente mostrar-lhe um pequeno truque legal que permite que você faça upload muito mais rápido. Digamos que você quer pegar um punhado de imagens, então eu tenho essas três imagens aqui em baixo, templo, caminhão e parede, que eu gosto. Eu vou marcar e eu suponho que isso deve funcionar no Windows também. Se eu quiser, posso pegar essas imagens, arrastá-las até aqui sobre esse upload, e ele só começa a carregar as três de uma vez. Esse é um pequeno recurso muito útil se você quiser carregar em lote um punhado de imagens de uma só vez. Agora, uma vez que todas essas imagens são feitas de upload, eu realmente vou voltar aqui para as páginas, e eu vou voltar aqui para a página de boas-vindas, eu vou rolar para baixo aqui, e eu vou editar o conteúdo da minha página . Vou apagar essa foto que eu tinha antes, que se você se lembra, basta clicar e arrastá-la para a lata de lixo, e agora eu vou adicionar uma galeria de escrever aqui. Clique em Adicionar, use a caixa de galeria. Agora você provavelmente está se perguntando por que montamos essa galeria antes, e agora estamos configurando outra galeria na página. Bem, o que fizemos antes foi criar uma galeria que seria eu acho considerada uma galeria existente, e se eu quiser, eu posso vir aqui, clicar em Usar Galerias Existentes, clicar em Fotos, e agora você vê que nós literalmente temos uma galeria de fotos bem aqui, que você não pode ver ainda porque eu vou até aqui para projetar e vou fazer disso uma grade para que você possa ver um pouco melhor o que está acontecendo. Mas aqui vamos nós, temos uma galeria de imagens bem aqui. Vou explicar a grade em um segundo, mas quero esclarecer essa distinção primeiro. Como criamos uma galeria sob a guia Páginas, agora podemos apenas criar um bloco de galeria no Editor Visual no link para essa galeria sempre que quisermos. Este é um recurso muito útil, digamos que você tem seu portfólio ou você tem uma galeria que você pode referenciar e vários pontos no site, isso é realmente ótimo porque você pode carregar esses arquivos uma vez, e então você nunca tem para se preocupar em carregar e criar esses arquivos novamente. Agora, alternativamente, se este é o único lugar em todo o nosso site esta galeria vai aparecer, é apenas talvez para apenas tem um propósito, podemos clicar em Upload Media, e podemos entrar aqui e podemos fazer upload imagens e arrastar e soltar como fizemos antes. Literalmente, ele nos dará todas as mesmas opções exatamente como fizemos quando carregamos para a aba Páginas. Mas para o bem disto, vamos manter isto aqui e vamos usar esta galeria existente. Agora, isso explicou as diferentes versões do uso da galeria existente, os prós disso e upload, eu vou mostrar um pouco sobre a guia Design. Vou clicar em Design, e aqui temos opções para alguns designs de galeria diferentes. Podemos escolher uma apresentação de slides. Podemos configurá-lo para a transição automática entre slides a cada nosso ou segundos se você quiser, dois segundos é muito rápido, ou você pode torná-lo algo mais longo, como 10 segundos ou cinco segundos e ele vai passar. Podemos escolher Mostrar Próximo nos controles anteriores, então você vê essas pequenas setas pop-up e as pessoas podem clicar nelas para ir para a próxima foto ou anterior, ele muda para cinco, então olhe para essa sensação para isso. Cortar imagens automaticamente. Basicamente o que isso vai fazer é determinar um denominador comum de todas as suas imagens, e ele irá cortar imagens para caber dentro do que realmente eu acredito ser a primeira imagem que você enviar. Eu poderia entender errado sobre isso, mas basicamente o que isso vai fazer é cortar imagens para caber dentro do quadro. Se você não fizer isso, então você pode acabar com um pouco de espaço em branco ao redor das bordas de algumas de suas imagens, mas você vai ter que a resolução total é um pequeno espaço em branco porque esta é uma resolução ligeiramente diferente do o venceu antes. Novamente, automaticamente cortar imagens, ele vai cortar todas as coisas, mas, e novamente, este que você vê agora ele estende todo o peso até o fim. Se escolhermos Cortar automaticamente, tudo se estende até o fim. Mostrar miniaturas. Se você ver se eu rolar para a parte inferior, na verdade eu tenho todas essas miniaturas das imagens que as pessoas também podem clicar para visualizá-las em tela cheia. Podemos nos livrar disso se quisermos, e não temos isso lá. Nós só temos as setas ou as flechas da galeria de mídia também, se quisermos. Mas se mostrarmos miniaturas, podemos alterar a altura da faixa de miniaturas, podemos alterar a distância entre a imagem e as miniaturas para dar um pouco de espaço lá se quisermos. Agora também podemos escolher se queremos mostrar o título e a descrição em que eu não adicionei títulos, mas se você se lembrar sempre que eu mostrei fotos carregadas, você pode editar esses títulos e descrições em cada um deles e você pode fazer com que eles sobreponham a imagem também. Você pode escolher aqui onde essa sobreposição se sentará na imagem. Em seguida, você também pode definir um tour pelo título e descrição só aparece quando você passa o mouse sobre a imagem. Novamente, não temos títulos e descrições lá, então não podemos mostrar isso, mas espero que isso ajude e lhe dê um entendimento. A próxima coisa que vou mostrar é um controle deslizante. Honestamente, não podemos ver o que está acontecendo porque esta janela está a caminho. O que eu vou fazer apenas para fins de demonstração é demonstrar outro recurso do Squarespace chamado espaçador e eu vou adicionar um bloco aqui em cima. Vou usar este espaçador. O espaçador, o que ele faz é literalmente apenas criar um espaço em branco em branco. Agora, eu posso pegar esse espaço em branco que eu criei, trazê-lo aqui e criar uma pequena coluna para o lado desta imagem ou desta galeria. Agora, aqui vocês podem ver que temos este espaço branco vazio aberto e esta galeria ocupa apenas metade da tela. Isto não é realmente o que queremos agora, mas deixa-me mostrar isto para vocês um pouco melhor. Eu vou voltar aqui para projetar. Agora temos um controle deslizante. Vamos fazer a transição automática entre slides. Fará isso a cada três segundos. O que você vê é que em vez de desaparecer como tivemos com uma apresentação de slides, você tem esse efeito deslizante louco acontecendo. Novamente, defina os controles seguintes e anteriores para que você possa fazer isso também. Então você também pode definir o alinhamento, que eu não acho que muito funciona com a forma como esta foto é configurada, mas se você tem suas fotos onde talvez eles são diferentes larguras, às vezes você pode realmente ver a próxima foto como aparece no quadro. Você não tem a oportunidade de controlar o corte e tudo neste que ele já está embutido em como este funciona. A próxima e uma das minhas características favoritas é a grade. Este eu uso muito em todos os tipos diferentes de coisas. Uma vez que temos a grade, como você vê, ele torna uma grade de suas imagens muito incrível. Você pode vir aqui e você pode escolher a proporção, que basicamente significa as dimensões dele. Podemos escolher três por dois. Agora todos eles vão ser três por dois de largura ou podemos torná-los verticais, que realmente não funciona para eles, então você tem todo esse espaço em branco. Ou você pode torná-los quadrados. Eles não parecem quadrados porque o que realmente está acontecendo não é realmente tudo quadrado e há todo esse espaço branco acima e abaixo, mas trata-os como se estivessem. Mas se eu apertar “Cortar imagens”, agora você vê basicamente forçar todos eles para o quadrado e cortada para baixo na imagem. Também posso escolher quantas miniaturas por linha. Talvez eu queira apenas dois por fileira. Agora temos essa grade que é empilhada verticalmente. Ou talvez queiramos fazer uns 10 por linha. Então o que você vai ver é que estes são realmente pequenos e pequenos agora. Vamos mantê-lo em duas por linha agora, por uma questão de consistência. Em seguida, você também pode alterar a separação em torno das imagens. Isto é fixe. Você não pode fazer nenhuma separação em tudo, colocar um pixel lá dentro, dois. Gosto dos dois pixels. O design limpo e minimalista. Ou você pode espaçá-los, se quiser, dar-lhes muito espaço, um pouco de espaço. Você só pode preencher o que for bom para você. Então você tem a oportunidade para o efeito lightbox, que novamente eu demonstrei no vídeo de imagem anterior, mas vou mostrar-lhe agora. Uma vez que você ativar o efeito lightbox, venha apertar “Salvar”. Agora, eu estou olhando para esta galeria, mas, oh, isso parece uma foto legal. É um pouco pequeno demais. Não sei dizer o que está acontecendo. Faça este pouco maior primeiro. Então, um pouco para pequeno. Se eu clicar nisso, essa foto sai totalmente descortada em uma caixa de luz para que eu possa ver o que está acontecendo. Efeito muito legal lá. Voltarei agora e mostrarei o resto do bloco da galeria. Clique duas vezes sobre isso novamente para editar. Se você quiser basicamente editar qualquer bloco no Squarespace, qualquer imagem, qualquer coisa, basta clicar duas vezes nele. Voltaremos para baixo e vou mostrar-vos o último recurso, a imagem empilhada. Este não há realmente nenhuma personalização. Mas é realmente ótimo para designers gráficos ou pessoas que são apenas fotógrafos, mesmo quando você quer empilhar e fazer algo realmente simples e rápido. Muito legal. Empilha-os igualmente. Muito simples. É assim que você lida com o bloco de imagem no Squarespace. É uma coisa muito poderosa, muito útil. Antes de ir, vou mostrar-te um último truque que acho que vais gostar muito. Não sei por que esse cara está aqui, esse rascunho, vamos deletá-lo. Digamos que queremos, se estamos aqui olhando para a edição da nossa galeria, e clicamos, digamos esta pequena ferramenta de lápis, o que vamos conseguir é este editor de fotos. Eu realmente não mostrei isso a vocês, mas vocês podem fazer isso no bloco de imagens também. Este editor de fotos é muito legal. É básico, mas permite cortar suas fotos se quiser e alterá-las. Você pode transformá-lo em um quadrado, mexer com diferentes dimensões. Obtê-lo como quiser. Você pode redimensioná-lo se quiser. Por exemplo, como eu disse, estes não estão comprimidos. Eu poderia talvez redimensionar isso para 600 e eles poderiam ocupar um pouco menos de espaço. Você pode adicionar algum texto sobre ele, se quiser. Mais uma vez, provavelmente não quero fazer isso. Você pode até mesmo fazer algum contraste de brilho, alguns efeitos e um punhado de diferentes itens de edição aqui. Eu não vou entrar muito nisso. Não é Photoshopped, mas é realmente útil, especialmente para alguns desses recursos de corte e recursos de redimensionamento que são incorporados aqui. Isso é muito útil. Em seguida, também sob a galeria ou realmente qualquer imagem no site, você pode clicar neste ícone de engrenagem. Isso vai me deixar entrar nesse título. O título vai aqui. Uma última coisa que eu vou fazer é clicar em adicionar o URL e dizer elisabethcairnes.com. Vamos tocar em “Salvar”. Basicamente, o que acabamos de fazer agora é transformar esta imagem em um link porque nós adicionamos este URL de cliques. Se eu voltar aqui, vou para a tela de boas-vindas, vou testar isso, vou girar o efeito da caixa de luz. Mas não. Se eu passar por cima dessas imagens e nada, não há mudança. Se eu rolar escrever aqui, eu vejo isso se tornando um link clicável. Se eu clicar sobre isso, acabamos de ter o que acabamos de vincular a elisabethcairnes.com. Uma coisa muito legal. Você pode literalmente transformar qualquer imagem em um link. Isso se torna muito útil quando você está tentando fazer um portfólio de projetos ou links para um monte de coisas diferentes, ou quando você deseja usar imagens como links para diferentes partes do seu site. Uma ferramenta muito útil ali. Espero que isso ajude a dar a vocês uma melhor compreensão das imagens e do recurso de galeria. 22. Como usar o de cotação: Este é um curto e rápido, mas um prático, no entanto. Neste vídeo, vou mostrar-lhe como trabalhar com o bloco Cotação. Venha até aqui para o conteúdo da página, edite-o novamente. Vou jogar fora meu bloco de galeria que construímos no último vídeo, jogar aquele cara no lixo, jogar fora meu espaçador como você verá que ainda tem um grande espaçador bem aqui, livre-se disso. Eu vou adicionar um bloco de cotação, adicionar um bloco aqui em baixo e eu vou criar um bloco de cotação para que nós temos esta citação cópia e colado. “ Sempre que você se encontra do lado da maioria, é hora de parar e refletir”, por Mark Twain. Nós temos essa citação legal aqui, e quando nós salvamos isso, nós percebemos que ele aparece neste tipo de citação aqui, e nós temos o autor bem aqui. Algo legal que podemos fazer com blocos de cotação é, mesmo que este seja texto, podemos fazer este tipo de envoltório, então confira isso. Agora você tem esta pequena citação que aparece no lado deste texto bem aqui uma coisinha muito legal, quando chegarmos ao editor de estilo, você pode trabalhar com a fonte e o tamanho dessas citações independentemente. Vou mostrar-lhe como trabalhar com isso um pouco mais tarde, mas novamente, uma pequena ferramenta muito útil, ótimo para ter. 23. Como usar o bloco de vídeo: Neste vídeo, vou mostrar a vocês como trabalhar com o bloco de vídeo do Squarespace, outra ferramenta muito poderosa construída no Squarespace. Quando eu venho através e eu adiciono um bloco, eu realmente não mostrei muito isso, mas você vê em qualquer lugar que eu realmente clique, eu posso realmente adicionar um bloco em qualquer lugar. Você vê essas linhas que aparecem por todo o lado. Se eu clicar neste aqui, na verdade vai colocar um bloco de vídeo entre a declaração do artista e o parágrafo. Vou clicar, vou adicionar um bloco de vídeo, e você verá que preciso adicionar um URL para resolver. Mas eu posso inserir um URL de vídeo aqui. Aqui temos o esquilo dramático. Grande pequeno vídeo, recomendo altamente se você ainda não viu. Então, podemos basicamente fazer upload de uma miniatura personalizada, se quisermos. Então, talvez não queiramos ver o esquilo inicialmente, mas surpreender as pessoas, e podemos carregar nossa pequena chance de herói. Podemos escolher que queremos usar esta miniatura personalizada. Você pode ativar ou desativar isso, se quiser. Mas vamos ativá-lo e assim que este upload for feito, você verá que ele realmente vai trocar a miniatura existente por esta nova imagem personalizada que carregamos. Você pode escolher se deseja ou não exibir a legenda no vídeo, e você pode escrever sua legenda aqui em baixo. Como estamos vinculados ao YouTube, ele será automaticamente puxado onde quer que a legenda seja do YouTube. Então por último aqui, como você vê, acabamos de fazer o upload. Agora que você vê um botão play aqui, temos uma miniatura personalizada e tudo funciona assim. Mais uma vez, se nos livrarmos de usar miniatura personalizada, e ele pode mudar de volta ou podemos simplesmente excluí-lo também. Também podemos incorporar links do Vimeo também. Você também pode fazer isso se seus vídeos não estiverem no YouTube. É assim que usamos o bloco de vídeo do Squarespace. Vamos salvar uma vez que terminarmos. Só por uma questão de entretenimento, vou tocar no jogo muito rápido, para que você possa ver. Meu Deus, esquilo dramático. Incrível. Esse é o bloco de vídeo do Squarespace. 24. Como usar o bloco de código / criar um caixa de como no de no de a no: Neste vídeo, mostrarei como usar o bloco de código dentro do Squarespace e, ao mesmo tempo, mostrarei como adicionar uma caixa de curtir do Facebook ao seu site. Esta é uma pergunta muito comum e pedido que eu recebo, então eu pensei em bater fora dois coelhos com uma cajadada. Quando eu voltar aqui novamente, até o nosso Conteúdo da Página, e clique em “Editar”, então eu vou colocar uma pequena caixa branca bem aqui na parte inferior desta declaração do artista. Mas para fazer isso, o que eu vou fazer é primeiro clicar neste pequeno “Ícone Círculo” para adicionar algo aqui e eu vou descer e eu preciso adicionar um bloco de código. Agora eu sei que este é um site sem código, então não me dê nenhum FLAC aqui porque isso não é realmente necessário. Mas muitas vezes talvez você esteja trabalhando com uma coisa de terceiros. Como por exemplo, eu uso SoundCloud muito para o meu podcast. Eles me dão um pequeno código para colocar algo no meu site. Sempre que você estiver realmente trabalhando com qualquer plug-in de terceiros, talvez você queira incorporar seu perfil do LinkedIn em seu site ou algo assim. Você basicamente pode usar este pequeno bloco de código. Não estamos escrevendo nenhum código, estamos apenas copiando e colando código. Vou clicar na caixa de código aqui. Não consigo ver por que isso não surgiu. Talvez eu tenha perdido. Tente de novo. Lá vamos nós. Uma pequena caixa de código aparece, e você recebe esse pequeno Olá, Mundo! Coisa aqui, e você pode deletar isso. Você não precisa disso. Mas é aqui que você vai copiar e colar código e , em seguida, ele vai colocar esse código em seu site. A próxima coisa que vamos fazer é, algum dia eu vou estar mostrando a vocês como adicionar uma caixa como Facebook é apenas ir para o Google, e Google Facebook como caixa. Basta clicar neste primeiro link. É o site Facebook Developers. Você vai entrar aqui e vai te levar a esta página. Ele vai pedir o URL da sua página do Facebook. Eu vou vir aqui e pegar o URL da minha página do Facebook, e colar isso lá e quando eu apertar “Tab”, ele vai atualizá-lo e você tem algumas opções. Quero mostrar a cara dos amigos? Desejo mostrar minhas postagens recentes? Quando você compartilha suas postagens recentes, ele fica muito grande, então você pode ou não querer isso. Podes livrar-te da cara dos teus amigos, se quiseres. Você pode mostrar uma borda ou não mostrar uma borda. Você pode até decidir se você quer um cabeçalho lá ou não. Gostaríamos de tirar isso, manter muito simples. Este pequeno como Jake Jorgovan. Então vamos clicar neste botão que diz Get Code e não fique sobrecarregado. Eu sei que isto é código, mas está tudo bem porque tudo o que vamos fazer, é pegar esta parte superior aqui, e clicar em “Controle C” para copiar isso. Vamos ver o site ou um site, e colocar aquele pequeno script lá. Volte aqui. Você vê de volta aqui, e então vem pegar este segundo pedaço de código aqui também, e nós vamos apenas colar isso direito neste bloco também. Vamos tocar “Save”. O que você realmente vai ver é que não parece que nada aconteceu e a razão para isso é que, quando você está trabalhando neste Modo de Visualização, Squarespace não renderiza JavaScript. Este Facebook como caixa é um pouco de JavaScript. Às vezes, sempre que você estiver fazendo isso, quando estiver trabalhando com esses blocos de código, muitas vezes o código não será renderizado corretamente quando você estiver conectado a um Squarespace e editando-o. O que você pode fazer é sair do Squarespace, ou eu acabei de abrir o Firefox. Eu tenho o Chrome bem aqui, e então eu abro o Firefox, e eu apenas olho para ele em um navegador diferente. Se eu for a um site com code.squarespace.com, aqui eu posso ver um site e se eu descer aqui, na verdade não está funcionando. Isso seria porque eu não salvei você tem que salvar também para que essas mudanças sejam refletidas. Agora acabei de salvar esse conteúdo. Vamos voltar aqui, e atualizar esta página e se rolarmos para baixo, agora eu posso clicar aqui, e alguém pode gostar da minha página web ou da minha página do Facebook a partir daqui no meu site. Isso é um pouco sobre como o bloco de código funciona. É um pouco complicado. Pode ser um pouco mais avançado do que todos precisam, mas é uma coisa útil. É uma pergunta comum que eu entendo. Espero que isso tenha sido útil, e espero que isso tenha ajudado você a dar uma melhor compreensão do bloco de código e como adicionar essa caixa do Facebook ao seu site. 25. Como usar o bloco de formulário e criar uma página de contato: Este vídeo é outro duplo whammy. Vou mostrar-lhe como usar o Bloco de Formulários e também como criar uma página de contato em seu site ao mesmo tempo. Primeiro, só um pouco de atualização. Eu estou indo para vir aqui e eu vou adicionar um botão de contato para o site, então aperte este pequeno ícone de mais, e adicione uma nova página. Venha aqui e digite “Contato”. Enquanto estamos nisso, eu vou me livrar dessa pasta, porque não é realmente o que eu quero e limpar isso um pouco. Começa a parecer um pouco mais com um site real. Eu não quero esse link do Google ou essa pasta “Sobre nós”, então eu vou apenas excluir isso aqui batendo naquela lata de lixo. Agora temos este Welcome, About e Contact. Aqui na página de contato, novamente, você vai notar que ele tem este fundo cinza, isso é porque nós não temos um upload de miniaturas na página, e ele também tem esta barra lateral, que não queremos na página qualquer um. O que vamos fazer é, novamente clicar nas configurações da página, podemos fazer isso aqui, ou clicando na engrenagem aqui ao lado da página de contato. Vamos mudar o layout da página de uma barra lateral para largura total, e então eu vou descer aqui e eu vou fazer o upload de uma imagem em miniatura. Vamos usar este aqui muito fixe do camião. Lá vamos nós. Agora temos o nosso camião carregado para obter uma imagem em miniatura. Quando apertamos “Salvar”, veremos que acabou de ser atualizado aqui, mas agora queremos realmente ter uma pequena página de contato. Vou descer até o contato da página ou conteúdo e clicar em “Editar”. Vou digitar “Contato”, e vou destacar isso e torná-lo um cabeçalho 1, modo que é bom, grande e bonito. Então, em Contato, o que eu quero fazer é criar um pequeno formulário, uma maneira de as pessoas entrarem em contato comigo. Eu vou clicar neste pequeno botão aqui em baixo, e eu adicionar um bloco de formulário. Você vai ver que isso lhe dá um ponto de partida bastante decente bem aqui, quando você está trabalhando com seu formulário. Por alguma razão, isto está acinzentado para mim. Eu poderia apagar isso e voltar e gravá-lo novamente, mas honestamente, Squarespace, ele vai falhar um pouco assim às vezes, e às vezes é culpa deles ou às vezes é sua conexão com a Internet. Vou apertar “Escape” e o formulário vai embora. Se você já tem uma janela de pairar e você bater escape, ele basicamente vai x isso para fora. Mas o Bloco de Formulários ainda está aqui, então vou clicar duas vezes nele para editá-lo. Estou tendo um problema aqui e não sei porquê. Mais uma vez, vou tentar destruir o formulário e começar de novo. Jogue no lixo. Vamos adicionar uma caixa de novo aqui. Clique em “Formulário”. Lá vamos nós. Não sei o que foi, não sei por que fez isso, mas isso é apenas parte disso. O Squarespace é uma plataforma web, então às vezes coisas com seu computador ou seu navegador, há problemas lá, então de vez em quando, você precisa se preocupar com isso. Você pode dar um nome ao formulário aqui, o que não é muito importante. No entanto, você nomeia o formulário, basicamente, este é o assunto do e-mail, que virá através quando é e-mail para a forma de código. Acabei de nomear o site sem formulário de código. Você pode editar e você pode ter esses campos diferentes aqui que você pode escolher. Eu tenho o meu agora. Por padrão, ele vai me dar um nome, endereço de e-mail, assunto e mensagem. Talvez eu não me importe de alguém escrever um assunto ou eu não quero dar a eles outra linha para isso, então eu vou apenas bater na lata de lixo sobre isso e removê-lo. Olhe para isso, agora não temos essa linha de assunto lá. Mas talvez eu queira um número de telefone. Se você apertar este pequeno ícone de mais aqui em baixo, ele lhe dá todas essas outras opções diferentes. Você pode fazer um texto, uma área de texto, que é um bloco como esse mensagens lá embaixo. Você pode fazer um menu suspenso, caixas de seleção, rádio, pesquisa, nome, tudo isso, uma senha. Todas essas coisas interessantes e maneiras que você pode coletar informações de alguém, seu endereço de e-mail ou seu identificador do Twitter. Talvez queiramos o número de telefone deles, então eu vou clicar em “Telefone” e apertar “Concluído”. Agora temos esta pequena lista ou esta pequena caixa de entrada para um número de telefone. Mas talvez eu queira o número de telefone acima da mensagem, eu não gosto que o número de telefone esteja na parte inferior. Bem, você tem esses pequenos ícones cinzentos aqui à esquerda, esses pequenos pontos. Se eu passar o mouse sobre eles, vejo que meu mouse se transforma em uma pequena seta para cima para baixo. Se eu clicar em um, eu posso apenas arrastá-lo, e olhar para isso, bem ali à esquerda, ele é refletido onde quer que eu solte. Muito legal, muito intuitivo e fácil de usar. Agora, antes de apertarmos “Salvar” e terminarmos aqui, vamos querer ir para a segunda aba aqui em cima que diz “Armazenamento”. Vou clicar em “Armazenamento”. Por padrão, o método de armazenamento será que ele vai para e-mail seja qual for o seu endereço de e-mail padrão que você tem na conta. Então, por padrão, isso me enviará um e-mail com todas as informações que foram inseridas no formulário. Algumas outras integrações, é que você pode realmente adicioná-lo a um documento do Google, então isso é ótimo para registros de eventos, coleta de endereços de e-mail, ou apenas manter tudo organizado em um único local. A última coisa, você também pode conectá-lo ao Mailchimp, e isso é realmente bom, novamente, para inscrições na lista de e-mail ou qualquer coisa assim. Amor Mailchimp em um enorme usuário, e ambos são ótimos. Basta clicar neles e, basicamente, entrar em sua conta, e a conexão é muito simples. Então, por último, em “Avançado”, você tem algumas opções aqui. Além de dizer “Enviar”, você poderia dizer “Olá” ou algo assim. Você pode alterar o texto, e isso irá refletir quando eu pressionar “Salvar”. Você pode escolher onde deseja que esse botão esteja alinhado, à esquerda, centro ou à direita. Vou sair à esquerda. Depois que o botão Enviar ou o botão “Say hello” for atingido, você pode colocar um texto lá, “Obrigado por dizer olá”. Você pode preparar tudo isso. Há outras coisas aqui em baixo, provavelmente você não quer se preocupar muito. O modo de caixa de luz é interessante. O que isso vai fazer é basicamente ter um pequeno botão e, em seguida, quando alguém clica nele, todo este formulário vai aparecer em uma caixa de luz, semelhante às imagens. Novamente, provavelmente não algo que você quer fazer em uma página de contato, mas é uma coisa útil para ter. Isso é tudo o que eu realmente vou cobrir sobre isso. As outras coisas que você provavelmente não vai precisar se preocupar muito, mas uma vez que terminamos, nós vamos apenas ir em frente e apertar “Salvar”. Aqui vamos nós. Temos este formulário, mas parece um pouco grande, não vou mentir. É um formulário de contato enorme. O que eu realmente gostaria de fazer é ter minhas informações de contato listadas bem aqui. O que eu posso fazer é criar uma caixa de texto, e o que eu vou fazer é colocar minhas informações de contato, Jake Jorgovan. Por padrão, quando você aperta “Enter” no Squarespace, vai quebrar e dar uma linha grande como esta, então meu novo texto começa bem aqui, mas se você pressionar “Shift”, “Enter”, ele não fará essa quebra, e você pode Escreva logo abaixo dele. Isso é só um pequeno truque, uma coisinha útil para se ter. O que fizemos foi colocar meu nome e endereço do site lá. Provavelmente não vou colocar todas as informações de contato neste pequeno curso aqui, mas o que eu vou fazer agora é vir aqui, e novamente, eu posso arrastar e soltar esta caixa. Posso clicar aqui, ver como se vira com a mão. Vou arrastá-lo e alinhá-lo à direita deste formulário. Agora, nós temos minhas informações de contato à direita deste formulário e eu posso colocar meu número de telefone se eu quiser bem aqui. Não quero que todos neste curso me liguem. Podemos ter as nossas informações de contacto e, em seguida, um formulário de contacto ali mesmo. Se quisermos, podemos até adicionar uma foto aqui. Só estou mostrando alguns exemplos de maneiras de usar um monte dessas ferramentas juntos. Vou fazer upload de uma imagem. Nós vamos pegar uma foto só para o meu site rapidinho, e vamos clicar em “Salvar”. A foto é um pouco grande, mas funciona. Agora temos esta página de contato legal, onde temos minha foto, o formulário aqui e, em seguida, minhas informações de contato listadas abaixo. Nós apertamos “Salvar” e voila, acabamos de criar uma pequena página de contato bacana aqui em nosso site. Espero que isso tenha sido útil para ensiná-lo a usar o Bloco de Formulários, e também tentar misturá-lo e mostrar um punhado de coisas diferentes de uma só vez neste vídeo. Espero que eu não te tenha sobrecarregado, mas em vez disso, apenas te dei alguns usos mais concretos sobre como usar a plataforma. 26. Como usar a ferramenta de mapa: Neste vídeo, vou mostrar como usar e trabalhar com o bloco de mapa dentro do Squarespace. Como sempre, eu vou descer aqui, adicionar um novo bloco, e descer até o bloco do mapa. O que você tem que fazer, é passar por aqui agora e adicionar um nome comercial. Então o escritório incrível do Jake. Você colocou um endereço, que eu copiei o maravilhoso endereço de 45 Rockefeller Plaza como meus endereços de alguma forma localizados em Manhattan, o que não é. Então você basicamente vem aqui e aperta Salvar. Agora, por padrão, o que isso vai fazer, é apenas dar-lhe um mapa de largura completa bem aqui, e ele vai dar-lhe um zoom padrão sobre ele também. Mas algumas coisas que você pode fazer, é que você pode realmente alterar o zoom no mapa, e você também pode ajustar as dimensões e a largura dele também. Talvez queiramos que o mapa seja um pouco mais alto, e podemos vir aqui e clicar neste pequeno círculo, arrastar e fazer o mapa um pouco mais alto ou menor. Talvez eu não queira isso todo o caminho. Bem, você não pode simplesmente arrastar o mapa para a esquerda, em vez disso o que você faria é pegar um bloco espaçador ou um bloco de texto se você quiser algo sentado lá, e ele vai puxar o espaço ou para o lado dele. Talvez seja um pouco pequeno demais, mas faremos desse tamanho. Então vamos um pouco maior aqui, e então algo mais que você pode querer fazer é realmente ampliar o mapa. Agora, isso é basicamente mostrar que é na Ilha de Manhattan. Mas e se eu quiser realmente entrar e ver as ruas que estão ao seu redor? Bem, se você clicar duas vezes sobre ele, e eu vou mover isso para que você possa ver, e então você rola sobre o mapa e você usa sua roda de zoom, ou, por exemplo, em um laptop, então eu apenas rolar dois dedos, e eu basta ampliar e rolar, e eu posso até clicar e arrastar o mapa ao redor, eu posso chegar até aqui para que você possa até começar a ver que as empresas e tudo o que estão por aqui. Coisa muito legal onde você pode realmente ampliar no mapa, ou você pode diminuir o zoom no mapa, bem como se você não quiser chegar tão perto. Recursos muito úteis em torno da funcionalidade do mapa. Espero que isso tenha sido útil e especialmente se você tiver uma localização física para o seu negócio. 27. Técnicas de layout avançadas com a ferramenta de linha: Neste vídeo, vou mostrar como trabalhar com a ferramenta de linha horizontal no Squarespace e alguns truques que você tem. Isso é realmente um pouco mais do que a ferramenta de linha horizontal, eu estou realmente mostrando alguns truques de layout legal dentro do Squarespace. Aqui uma vez que estamos editando o conteúdo da página, eu vou excluir este bloco de cotações primeiro apenas para que ele não interfira com o que eu estou tentando exibir. Mas digamos, eu quero mover este texto e realmente fazer este texto duas colunas. Em vez de ler verticalmente assim, temos uma coluna aqui e uma coluna aqui. Bem, agora se eu tentar pegar o texto, tudo vem como uma coisa. Na verdade fez uma coluna porque eu tinha um espaçador, e excluir esse espaçador novamente para não ficar no caminho. Mas e se eu quiser, dizer estas duas linhas para sentar à direita destes. Como posso agarrá-los sem agarrar o bloco inteiro? Bem, é aí que esta ferramenta de linha horizontal vem no lugar. O que podemos fazer é rolar aqui e clicar para adicionar um bloco. O que vamos fazer é adicionar uma “Linha”. Como você vê esta linha horizontal, muito fina, mas sutil, mas pequena linha útil aparece. Podemos usar isso como um elemento de design se quisermos separar partes do nosso site, ou podemos realmente usá-lo para separar blocos de texto. É algo que eu uso o tempo todo e então eu talvez apague a linha e depois. Mas agora temos esses dois blocos de texto separados. Eu posso descer aqui, pegar o de baixo, e vir aqui. Olhe para isso, nós apenas agora separamos esse texto em duas linhas separadas bem aqui. Mas e se quiséssemos, digamos, a “Declaração do Artista” sentar-se em sua própria linha. Nós não gostamos de como este sentado aqui em cima e nós queremos que isto para ler tudo horizontalmente em todo o lado. Bem, novamente, podemos vir aqui em “Declaração do Artista”, adicionar uma “Linha” horizontal, e acabamos de separar o texto da “Declaração do Artista” do texto abaixo dela. Podemos pegar essa “Declaração do Artista”, vir aqui e vemos agora que isso vai atravessar toda a vertical em vez de aqui, que é seu posicionamento atual. Vamos movê-lo para cá. Então, uma vez que terminamos com isso e nós a separamos, podemos “Excluir” nossa “Linha” e não precisamos mais disso. Agora temos o texto e essas duas colunas de par, assim como temos aqui. Se quisermos usar a “Linha” para qualquer coisa, digamos que temos uma nova seção do site aqui embaixo. Podemos passar e adicionar uma “Linha” aqui embaixo. Agora reparem que há esses dois círculos e eles estão bem ao lado do outro. Isso é algo que eu realmente não tenho demonstrado muito, mas quando você tem colunas como esta, nós separamos a grade em duas colunas. Eu posso vir aqui e clicar. Se virmos bem aqui, essa “Linha” só se estende pelo lado direito. Bem, se eu adicionar uma “Linha” agora, você vê que “Linha” só abrange esta coluna aqui mesmo verso, se nós pegamos e vamos para o exterior onde vemos a “Linha” cinza vai todo o caminho através. Se clicarmos nisso, a “Linha” agora abrange toda a largura da página. Podemos fazer a mesma coisa aqui, podemos adicionar uma “Linha” aqui embaixo desta coluna. Como você pode ver, a “ferramenta Linha”, é um elemento de design legal, mas também é muito funcional e apenas usá-lo para separar texto, ou para organizar coisas, e então criar esses suportes de espaço temporários. Espero que isso tenha sido útil. Tente entrar em até mesmo um pouco do material avançado com um editor visual, mas todas as coisas úteis, no entanto. Só estou a tentar mostrar-te alguns dos truques do ofício, se quiseres. 28. Como criar botões: Neste vídeo, vou mostrar a vocês como usar a ferramenta de botões dentro do Squarespace. Como de costume, vamos começar editando o conteúdo da página. Nosso objetivo neste vídeo será transformar esse link “Veja meu portfólio” em um botão. Para fazer isso, nós vamos vir aqui e vamos adicionar um pequeno bloco logo abaixo onde diz, “veja meu portfólio”. Em seguida, vamos rolar para baixo aqui e vamos chegar a este recurso botão e vamos clicar no botão. Vamos mudar este texto neste botão. Vou mudar isto para cá para que possam ver o que se passa. Diz: “Veja meu portfólio”. Vamos adicionar um URL ao cairnes.com e abri-lo em uma nova janela. Em seguida, podemos alterar o tamanho do botão; ser pequeno, médio ou grande botão ou apenas um pouco demais. Vamos ficar com o médium neste tipo aqui. Então posso alinhar isto à esquerda, ao centro ou à direita. Vamos deixá-lo alinhado à esquerda. Neste momento, este é um botão de aparência chata. É só preto e muito simples. Mas é funcional no entanto e sempre que chegarmos ao editor de estilos, podemos realmente começar a editar e manipular o estilo do botão, a forma dele, a cor e tudo isso. Então não parece tão excitante agora, mas acabamos de criar um botão e vamos voltar a isso no futuro. Na verdade, vamos sair como “ver meu portfólio” aqui para uma demonstração de links mais tarde. Vamos voltar a isso em um vídeo futuro no editor de estilos e eu vou mostrar a vocês como mudar e estilizar esses botões. 29. Como usar o bloco de resumo: Neste vídeo, vou mostrar a vocês como usar esse bloco de resumo no Squarespace. Para fazer isso, eu realmente pulei para o meu site desde que nós realmente não temos qualquer conteúdo para usar no bloco de resumo em nosso site atual sem código. Mas enquanto estamos, eu também queria mostrar a vocês que todos esses sites que eu construí e tudo o que eu tenho acontecendo aqui é realmente construído dentro do Squarespace e sobre o tema cinco. Então você vai notar que mesmo que isso pareça muito diferente, eu não estou usando a imagem do banner ou qualquer coisa assim. Eu tenho um site muito limpo e nítido tudo construído aqui dentro do modelo Squarespace. Então é um tema muito legal, muito robusto. Gostei muito de usá-lo. Mas por enquanto, o que eu vou mostrar a vocês como fazer é usar o bloco de resumo. O bloco de resumo é muito legal. É muito útil para qualquer uma das galerias, mas o lugar mais comum que eu usá-lo é realmente baseado em torno de blogs. Então o que eu vou fazer é, eu tenho esta página de demonstração aqui, e eu vou adicionar um bloco. Eu sou um clique no bloco de resumo. O que um bloco de resumo faz, é que cria pequenas miniaturas, um estilo de revista. Procure ver um punhado de suas postagens de blog recentes ou suas postagens de blog populares. Então aqui eu estou clicando no meu blog, e o que você vê agora são todas essas postagens, minhas postagens recentes do blog aparecem aqui em um formato de resumo. Se eu quisesse, eu também poderia ir de galerias e eu posso fazer um resumo da minha galeria de arte, e você pode ver algumas das minhas obras de arte malucas aqui. Mas eu quero ficar com um blog porque é um pouco mais relevante e o que eu acho que é mais comumente usado. Eu também posso fazer uma galeria de produtos, bem como, se você quiser. Então, uma vez que escolhemos o que vamos criar um resumo, vamos vir aqui para o layout, e podemos escolher entre um punhado de maneiras diferentes de colocar isso para fora. Então agora o que você está vendo é o modo de grade, muito parecido com a grade da galeria. Podemos fazer uma lista e você verá uma lista de tudo. Você notará que minhas postagens recentes não têm fotos em miniatura, mas todas as minhas antigas, você pode ver as miniaturas aparecem aqui à esquerda. Você pode tornar o tamanho do texto pequeno se quiser, você pode torná-lo extra grande se você quiser ficar um pouco louco ou apenas médio e torná-lo normal. Sua taxa de proporção, isso determina sua proporção para suas imagens. Se você colocá-lo em auto, então isso vai apontar para não cortar nada ou tentar cortar o mínimo possível ou o que é o melhor ajuste ou você pode torná-los quadrados se você quiser ou vertical ou o que se encaixa sua fantasia e que você gosta para o seu site. Mova isso no automático por enquanto. Você pode escolher o tamanho da imagem, e se eu quiser, fazer a imagem realmente grande. Vamos ajustar uma hora aqui. Mas você pode ver que eu posso fazer a imagem realmente grande com a história para o lado dela ou eu posso descer aqui e fazer a imagem pequena e fazer o texto ocupar a maioria da tela. Novamente, o que você preferir, sua imagem alinhada à esquerda, ou você pode definir a imagem para a direita e alinhar texto, você pode fazer a sua esquerda, centro ou direita. Então, novamente, recursos muito legais lá. Posições de metadados, então essa seria a data ali mesmo. Posso mostrar-te como podes mudar isso. Posso colocar os metadados acima do título. Então agora você vê que aquele dia acabou de aparecer acima do nosso título. Podemos fazê-lo logo abaixo do título e a data aparece logo ali, ou abaixo do conteúdo, todos juntos. Então eu vou vir aqui para exibir e escolher quantos itens eu queria exibir. Posso exibir até 30. Então agora temos uma tonelada de postagens de blog voltando ao que ele mostra. Ou se eu quisesse, eu poderia limitar isso aos meus últimos três, ajustes um pouco. Eu quero fazer essas grandes mudanças, e lá você só vê as recentes que eu tenho. Na verdade está mostrando cinco, isso é estranho. Eu devo gastar uma falha tentando fazer isso tanto, mas lá vamos nós. Agora estamos no três. Você pode escolher as informações que deseja exibir. O título, se você queria esta miniatura, que novamente, Vou mostrar-lhe onde esta miniatura é puxado mais tarde na seção de blogs. Então eu posso ter o título se eu quiser. Deixe-me fazer isso um pouco maior. Miniatura seria novamente as imagens. Então, agora as fotos desapareceram. O trecho é o texto. Então podemos ter os títulos e o texto, se quisermos. Em seguida, você também pode escolher o que deseja que esses metadados sejam. Então agora você vê que os metadados são a data do post. Eu também poderia torná-lo as etiquetas que estão no post. Posso torná-lo o autor do post. Localização, comentários, qualquer uma dessas coisas. Então, novamente, alguma personalização por lá e você pode ter um segundo pedaço de dados também. Para que eu possa ter o meu par mais o nome do autor. Você também pode filtrar por categorias. Então, por exemplo, eu tenho algumas categorias no meu site. Então, se eu apenas salvar o criador focado, isso só vai puxar qualquer coisa que eu marquei no criador de foco, que é um punhado de posts que foram apresentados em torno deste e-book que eu lancei. Ou posso vir aqui e fazer a mesma filtragem com etiquetas. Eu posso colocar em uma tag de freelance, e aqui eu tenho este um post que eu realmente marquei freelance em. Então você pode usar categorias e filtros, que mostrarei como adicioná-los mais tarde na seção de blogs também. Posso tirar isso. Então, por último, há um recurso também em blogs onde você pode definir um determinado posts é destaque posts. Então, se eu clicar nisso, você pode realmente começar a ver esses posts mais populares em destaque que eu escolhi para ser destaque. Podemos desativar isso e, novamente, por padrão, ele só escolherá suas postagens mais recentes. Então, novamente, você pode ver que o bloco de resumo é muito robusto. Sinceramente, estamos a começar porque há coisas ainda mais fixes que vou mostrar-te. Viste que basicamente tudo o que te mostrei estava no formato da lista. Vamos voltar para a grade. O que vamos notar é que se formos para a grade, todas essas coisas diferentes mudam. Então, agora podemos mudar a largura da nossa coluna novamente, e podemos tornar nossa largura duas colunas largura e tentar torná-la um monte de colunas de largura onde é realmente densa, que provavelmente não parece muito bom. Mas você pode realmente mexer com isso e você pode mudar a sarjeta, que é o espaçamento entre eles, fazer com que não haja quase nenhum espaço e essas palavras bombem para cima. Novamente, não parece muito bom, mas você está tendo a idéia do que você pode fazer com ele. Novamente, você tem todos o mesmo alinhamento de texto, metadados e exibição, e apenas ajustando aqui enquanto eu estou mexendo com todas essas configurações. Novamente aqui, você pode escolher todas as mesmas opções e tudo aqui. Talvez não queiramos a grade ou a lista. Bem, aqui está outro legal, carrossel. O que o carrossel faz é uma coisa legal onde você pode ver essas pequenas setas que rolam através. Bem, eu posso dizer aqui são meus posts em destaque e novamente ter todas essas mesmas coisas. Eu posso escolher quantos itens eu quero seguidos, então vamos dizer quatro. Então, por uma questão de ter uma das imagens, eu vou para destaque, e coisa muito legal uma vez que você tem isso. Nós tínhamos guardado para que eu pudesse demonstrar isso para vocês. Com os posts em destaque, você realmente tem essas pequenas setas e é com uma opção de carrossel, e você pode começar a rolar e ter essa coisa de revista muito legal. Assim, sem código ou qualquer coisa. Você só começa a fazer pequenos recursos legais como esse com o uso de seus widgets internos. Então, novamente, esses são os principais ali, e eu vou clicar duas vezes em nosso bloco de resumo, voltar aqui e mostrar a vocês a última, colunas automáticas. O que mais uma vez legal, ele cria este layout de revista limpo. Acho que este funciona melhor sem o trecho. Vamos tirar o trecho. Vamos também tirar o filtro de destaque, e eu acho que você vai começar a ver um pouco mais. Vamos torná-lo um pouco maior, colocar um monte de hospedeiros aqui. Diga uns 30 desses caras. Vamos dar um segundo para carregar. Mas essas colunas automáticas, o que ele faz é criar essas colunas automaticamente apenas com base na altura da imagem, a quantidade de texto e tudo lá. Este é novamente, outro layout muito legal, estilo muito revista. Mas é algo que você pode gerar rapidamente por conta própria. Novamente, posso tornar essas colunas menores se eu quiser. Novamente, provavelmente não fica bem com todo esse texto, mas talvez com fotos, pode funcionar. Eu posso fazer a largura da calha maior ou menor, e apenas mexer com todas essas configurações. Então é uma característica muito legal. Novamente, não fazer justiça agora com o que realmente pode fazer. Mas novamente, é uma maneira muito legal, muito legal de layout seu conteúdo. Então, o bloco de resumo é uma ferramenta muito poderosa no Squarespace, especialmente se você estiver blogando, fazendo podcasting, colocando qualquer conteúdo regular, ele permite que você fique um pouco personalizado em torno de como você realmente coloca seu conteúdo em seu site. Tão poderoso, muito robusto, provavelmente uma das minhas ferramentas favoritas em todo o Squarespace. Então recomendo verificar e brincar com ele. Eu acho que você realmente vai gostar desta ferramenta. 30. Como integrar as redes sociais: Neste vídeo, vou mostrar-lhe como adicionar algumas caixas de mídia social ao seu site e apenas algumas dessas, mas antes disso, eu só quero mostrar que eu também acabei de anexar, conectei minha conta do Instagram a Squarespace sob a seção de conta do Connect de mídia social, que eu mostrei a vocês em um vídeo anterior, mas se não, basta acessar Configurações, contas do Social Connect e você está lá. Você vai vir aqui e nós vamos trabalhar nesta página novamente aqui. O que vou fazer é vir aqui e adicionar uma nova caixa. Vou demonstrar algumas coisas diferentes para vocês. Primeiro, vou fazer a caixa de links sociais e adicionar os links sociais. O que veremos aqui é que temos automaticamente os ícones do Twitter e do Instagram, que já adicionei ao site. Você verá que o tema também tem estes no rodapé também. Vamos alinhar à esquerda, ou podemos alinhá-lo à direita se quisermos, e ele aparecerá bem aqui. Vamos deixá-lo no centro. Podemos mexer com o tamanho novamente, torná-lo grande, pequeno, podemos torná-lo quadrado e este estilo knockout, ou podemos fazer uma fronteira. Novamente, muitas maneiras diferentes de lidar com isso. Você pode até escolher a cor, se você quer que ela seja clara ou escura, que isso mudaria e é muito útil, especialmente se você tiver um fundo escuro em seu site, ou você pode simplesmente tê-lo padrão. Ele vai aparecer como essas cores padrão de mídia social que você teria vindo a conhecer e amar. Isso é tudo o que vou mostrar-lhe neste, muito simples, mas muito legal recurso de ter. A próxima coisa que vamos fazer é mostrar a vocês como adicionar uma conta no Twitter, e para fazer isso vamos descer aqui, adicionar uma caixa, rolar para baixo e adicionar o ícone do Twitter. Vá para escolher Conta, e depois para Jake Jorgen. Por algum motivo, isso não está funcionando para mim, então vou adicionar uma conta e tentar adicionar isso novamente. Veja se isso corrige o problema. Novamente, há pequenos insetos aqui e ali, mas a maioria deles são coisas que você pode simplesmente trabalhar ao redor. Acabamos de adicionar uma nova conta e olhar, que está funcionando. Não sei por que o outro cara não estava trabalhando, mas aqui vamos nós. Agora podemos ver todos os meus últimos 10 tweets que tenho aqui. Eu posso reduzir isso para três, já que 10 pode ser um pouco demais para ter no site. Novamente, se você for muito rápido, às vezes ele não lê, então você tem que ir devagar. Lá você pode realmente ver isso ou você pode apenas ter um e apenas ter o meu último tweet. Posso escolher se quero mostrar o meu avatar ou não. Isso vai embora, meu nome de usuário ou não. Então eu posso realmente ter um pequeno botão de seguir aqui também. As pessoas estão indo de novo bem ali no site, apenas me siga. Mais uma vez, muito útil ferramenta pouco ali com o bloco Twitter. Novamente, se não quisermos que ele se espalhe por todo o caminho, podemos vir aqui, adicionar um espaçador, arrastar aquele cara ali e agora temos um tamanho muito mais normal, aquele widget do Twitter. À direita deste widget do Twitter, vamos adicionar uma caixa do Instagram. Eu vou subir aqui, adicionar uma caixa, rolar até aqui para o Instagram. Vou escolher uma conta para Jake Jorgen. Novamente, ele não está lendo minhas contas que eu tinha conectado anteriormente. Não sei por que, então vamos clicar em Adicionar uma conta. Novamente, há falhas de vez em quando, mas na maioria das vezes você pode trabalhar dentro deles. Eu já tinha feito login, minha senha foi salva, então ele simplesmente foi em frente e pegou minhas informações. Vou fazer isso para que possamos, e escolhemos como queremos que isto funcione? Com o bloco Instagram, temos essa conta e temos essa guia de design aqui. Você pode escolher quantos itens que queremos exibir, que agora ele só se parece com um, mas isso é porque estamos no modo de apresentação de slides. Agora vamos para o modo de controle deslizante, onde vai começar a deslizar e podemos ver o próximo antes de clicar nele. Vá para o modo de grade e para obter esse recurso de galeria de grade. Novamente, e escolha o tipo de nossas miniaturas por linha. Quantos queremos incluir, digamos, três. Mude seu estofamento e todas essas coisas divertidas, se você quiser também. Aqui você pode ver alguns dos meus pequenos desenhos loucos e apenas algumas experiências e o que não. Então você pode escolher também se você quer caixa de luz para as pessoas para ser capaz de clicar sobre aqueles e ver essas imagens um pouco maior. Se voltarmos para cima, também podemos ver essas imagens empilhadas. Novamente, estas são muito semelhantes às funções da galeria que já estão construídas no Squarespace, mas agora isso é apenas puxar do meu feed do Instagram. Lá estou eu em Paris, na Torre Eiffel. Espero que isso tenha sido útil para dar vocês uma compreensão de alguns dos blocos de mídia social. Há definitivamente mais que você pode trabalhar com, mas espero que estes vão dar a vocês alguns e o resto deles. Para algumas dessas redes sociais que vocês podem descobrir por conta própria. 31. Como editar seu rodapé: Em seguida, vou mostrar-lhe como editar o rodapé no seu site do Squarespace. É muito simples, mas algo com que muitas pessoas lutam, e eles terão esse tipo de texto básico ou o poder do Squarespace na parte inferior de seu site quando não precisarem. Para editar seu site do Squarespace para editar o rodapé. Tudo o que você realmente vai fazer é vir para a guia da página, clicar em “Bem-vindo” na página que você quer, ou qualquer página realmente. Você vai rolar até aqui para onde ele tem o conteúdo do rodapé e você vai para “Editar”. Posso entrar aqui e mudar este texto para algo pessoal. Eu só estrago tudo. Então ele vai dizer Alterar este texto. Também podemos bloquear os laços sociais aqui em baixo. Talvez eu não queira isso porque já está embutido no tema. Então vou apagar isso. Posso então vir aqui e adicionar blocos. Se eu quiser adicionar outro bloco de texto e dizer 1-2-3 endereço. Eu posso começar a realmente mudar esse texto ao redor e realmente apenas construir e personalizar um rodapé como qualquer outra coisa. Posso colocar fotos aqui se eu quiser ou uma citação ou qualquer coisa que eu realmente queira. Então é super poderoso. Você pode realmente personalizar seu rodapé para ser o que você quiser que ele seja. Este rodapé vai replicar em todos os sites diferentes, todas as páginas diferentes em seu site. Então, por exemplo, você vê no meu site, eu tenho este rodapé aqui com este e-mail de inscrição e meus ícones de mídia social. Eu tenho isso em todas as páginas do meu site. Então, não importa em que alguém clique, quando eles vão para isso, eles verão isso na parte inferior da página. Além disso, você pode ir e estilizar este rodapé através do Editor de Estilos. Se você apenas se referir ao vídeo do editor de estilos, você verá como alterar a cor da fonte ou o tamanho da fonte ou qualquer coisa assim no rodapé. Espero que isso tenha sido útil para lhe dar um pouco melhor compreensão sobre como trabalhar com rodapés. 32. Editor visual: Tudo bem agora que você conhece o caminho em torno da plataforma do Squarespace e eu mostrei um pouco sobre o que ele é capaz de fazer, eu quero mostrar a vocês o Editor Visual que é uma das peças centrais do Squarespace. Uma das coisas que você usará mais comuns ao construir seu site. O Editor Visual é a interface de arrastar e soltar do Squarespace. É muito simples, mas há muitos truques com ele e um monte de coisas diferentes que você pode fazer e é muito poderoso e eu sei que você vai adorar. Você notará que esta seção é bastante longa. Bem, é porque eu cobro muitas ferramentas diferentes que estão no Editor Visual do Squarespace. Agora alguns de vocês podem querer assistir cada um desses vídeos e ver todas as ferramentas, outros podem querer apenas assistir as ferramentas que são de seu interesse, e outros talvez você assista alguns vídeos, você vai ter uma idéia do que está acontecendo, e você só vai querer mergulhar e mexer por conta própria. Mas, independentemente da sua abordagem, sei que você vai obter muito valor desta seção, pois é um dos recursos mais importantes e principais da plataforma Squarespace. 33. Sobre o editor do estilo: Até este ponto do curso, eu estava orientando você sobre como realmente configurar seu site, lidar com as configurações e colocar conteúdo em seu site, mas nós realmente não falamos muito sobre design. Nesta seção, vou mostrar a vocês o que é chamado de Editor de Estilos. Esta é a parte do espaço quadrado que permite que você realmente passar e estilizar e projetar seu site de acordo com seus gostos. É uma das outras principais características do Squarespace. É incrivelmente fácil de usar e incrivelmente poderoso. 34. Como usar o editor de estilo: Este vídeo, vou mostrar a vocês como trabalhar com o Editor de Estilos no Squarespace. Para chegar lá, vamos primeiro clicar na aba Design aqui. Então nós vamos descer aqui e vamos clicar no Editor de Estilos. O que vamos conseguir é esta lista de todos estes atributos aqui à esquerda. Podemos rolar para cima e para baixo nesta lista. Como você percebe aqui, há uma barra de rolagem à direita que eu posso pegar. Temos todas essas listas e atributos. Não se preocupe, parece esmagador no começo, mas prometo que não é. Poucas coisas só para saber sobre o. Primeiro editor de estilos. Ou seja, os atributos e tudo, isto é, todos estes são individualmente exclusivos para cada tema ou modelo. Alguns desses, se você estiver trabalhando com o tema cinco, você verá tudo isso que eu tenho aqui. Mas se estiver a trabalhar no Pacífico, na tenda para festas ou na Bedfat ou em qualquer um dos outros modelos, poderá ter alguns destes atributos que são diferentes. Alguns destes você pode não ter, e outros serão uniformes para todos eles. Apenas algo para pensar, e se você está olhando para um tema diferente, por que certas coisas podem ser um pouco diferentes. Mas minha recomendação com você é realmente apenas passar por uma lista, começar a jogar com tudo. Você vai começar a ver muito rapidamente e descobrir como ele funciona. Vou começar e começar a descer a lista e explicá-los um por um. O primeiro é o fundo do site. Isto é bastante simples, mas é o fundo do site. Eu vou realmente drástico aqui, torná-lo vermelho para mostrar aqui. Mas o que realmente estamos vendo é que, realmente não está mudando nada. Isso é honestamente porque o fundo do site não é realmente um atributo que é muito importante sobre este tema. Mas é um que atravessa todos eles. Na verdade, se formos para a largura do site em vez de largura total, aqui começamos a ver o fundo do site. Novamente, alguns desses atributos, eles vão parecer que eles não vão fazer nada. Mas, na verdade, alguns deles podem ser apenas dependentes de outras variáveis sendo certas maneiras. Por exemplo, aqui em baixo temos um atributo largura total do site e largura total. Se eu for para a largura total, então os sites e tudo vai todo o caminho através. Se eu for para a largura do site, então eu posso realmente usar o controle deslizante para determinar quão grande este site é, quão grande ele é. Alguns tipo muito legal de recursos e funcionalidades aqui. Só para alimentar as coisas que você pode ter me visto fazer isso há um segundo, mas amplie e diminua o zoom. Se você pressionar Command Minus ou Command Plus em seu teclado, ou eu acredito que seja Control Minus ou Control Plus em um Windows, o que você pode fazer é realmente ampliar e diminuir o zoom. Isso é muito útil para fazer no Squarespace às vezes, sempre que você quiser ver um pouco mais, ou se você estiver trabalhando em um navegador pequeno, como eu estou aqui. Mas nós realmente não queremos aquele fundo vermelho, então nós vamos colocar esse cara aqui para branco. Agora você também pode, se você quiser, você pode definir essa imagem de fundo para uma imagem, se você quiser. Então você pode fazer upload de uma textura ou qualquer coisa, se quiser. Como você vê, é bastante simples quando você carrega as imagens, você tem as mesmas opções que você faz para carregar e tudo mais. Então você também pode mexer com o posicionamento aqui e experimentá-lo diferentes posicionamentos e ver como ele funciona lá. Você pode escolher o tamanho e como isso funciona. Eu recomendo apenas brincar com estes e ver o que funciona melhor para o seu site. Novamente, há muitos atributos diferentes no Editor de Estilos e cada tema tem seus próprios atributos. Então isso é realmente algo com que você só brinca um pouco e se diverte um pouco. Em seguida, aqui é a largura do site, e como você verá, como eu faço isso menor, todo o site começa a ficar um pouco menor e tudo fica um pouco mais estreito. Então algo de novo, apenas para olhar para fora e outro atributo. Muitos dos atributos têm essas habilidades deslizantes com eles. Novamente, nós já passamos pela configuração Canvas bem ali. Você tem esta oportunidade para uma Canvas offsets. Verá que cria esta lacuna aqui no topo. Você tem esse estofamento de lona. Novamente, você verá como isso, basicamente o que isso está fazendo é adicionar preenchimento aqui mesmo. Novamente, alguns desses apenas mexer com e você verá o que exatamente cada um desses atributos está fazendo. Também tenha cuidado porque às vezes isso está afetando mais de uma coisa em seu site. Por exemplo, o preenchimento afetou a navegação no topo, mas também a afeta aqui em baixo. Você pode escolher um tamanho de borda para sua Tela de pintura. Você começará a ver que essa borda aparece. Anteriormente eu tinha zero pixels, mas agora eu tenho essa borda, que novamente, eu não quero muito. Então vamos nos livrar disso. Você tem essa coisinha, essas pequenas marcas de barra bem aqui entre a navegação é chamado de delimitador. Posso escondê-los se eu quiser. Ou posso trocá-los e torná-los vermelhos brilhantes. Você pode ver que o delimitador, aquela pequena barra entre os itens de navegação ficou vermelha. Mas isso também se liga diretamente à nossa linha horizontal aqui embaixo, que fica vermelha também. 35. Como usar o editor de estilo: Poucas outras coisas que podemos trabalhar com o fundo do cabeçalho e novamente, vamos realmente isso seria um atributo que temos que mudar algumas coisas para ver. Mas se você se lembra, por trás dessas imagens temos essa cor cinza bem aqui. E se eu não quiser que isso seja cinza e eu quisesse ser vermelho brilhante? Novamente, isso parece terrível. Mas outra pequena característica aqui ou eu posso torná-lo branco ou um punhado de coisas. Você também pode criar uma imagem de fundo do cabeçalho, então isso se tornará a imagem padrão ou talvez uma textura que você colocar lá. Posso alterar as cores do título do site. Novamente, talvez eu não queira que o título do site aqui, na verdade, desculpe, isso é errado. Esta cor do título do site, na verdade será, e então nós vamos voltar aqui agora e corrigir essa pequena largura bem ali porque nós realmente gostamos dele e como neste olhar muito mais. Nós temos a cor do título do site e assim aqui você pode ver que eu estou mudando o site sem textos de código, e a cor bem aqui. Mas também note que se você carregar um logotipo, que eu vou mostrar a vocês um pouco mais tarde quando eu entrar no design do site. Se eu carregar um logotipo que irá realmente substituir o texto aqui e, em seguida, a cor do título do site realmente se torna irrelevante a menos que o logotipo não é carregado. Você pode escolher uma cor do mouse para ela, que novamente eu estou no modo de visualização para que você não possa vê-lo, mas eu posso fazê-lo funcionar quando você passa o mouse sobre que a cor muda. Aqui temos o título da página, e você vai notar dois atributos. Você vai notar o título da página e a cor do título da página. Muitas vezes, sempre que você está olhando para qualquer atributo de fonte real, você obtém essas várias coisas diferentes que basicamente você pode escolher a cor. Mais uma vez, se eu quisesse que fosse vermelho ou branco, deixaríamos em branco só porque funciona. Em seguida, também temos este menu suspenso para o título da página. Aqui, sempre que fazemos isso, isso é uma coisa comum, você vai ver esta pequena janela de texto sempre que você escolher um elemento de texto. Então a primeira coisa que você vê é o nome da fonte, o estilo, o tamanho da fonte, a altura da linha, transformação do texto e o espaçamento entre letras. Vamos mudar isso bem rápido e vamos de Proxemi ANOVA para Josefin Sans. Agora eu vou fazer Open Sans Joseph Sans é uma fonte que eu gosto muito feminina bonita fonte. Open Sans é outro muito bom que eu uso muito. Então eu escolho Open Sans e você pode ver a mudança de fonte aqui. Eu também posso escolher o quão grosso eu quero que esta fonte seja ficar realmente super grosso com ele, e negrito se eu quiser. Eu posso mudar o tamanho da fonte, eu posso mudar a altura da linha parece que ele está fazendo muito aqui, mas realmente não é. A altura da linha é a altura entre a linha, então eu vou realmente demonstrar que no outro conteúdo mais tarde e você será capaz de ver um pouco mais do que realmente está acontecendo. Transformação de texto, você pode fazer todas as maiúsculas se quiser ou você pode colocar todas as letras minúsculas. Você também tem esse espaçamento de letras, então talvez queiramos essa letra bem espaçada. Você pode ser experimental e se divertir um pouco lá. Esses são alguns dos atributos básicos em torno de editar fontes e você vai ver essa janela novamente eu vou mostrar-lhe algumas vezes. Slogan do site. Novamente, não estamos realmente vendo o atributo do slogan do site aqui. Então você tem o espaçamento da área do banner e este é outro que é único para cinco. Novamente, nem todos os temas vão ter isso, alguns deles podem ter opções diferentes. Mas eu posso vir aqui e posso começar a fazer a bandeira enorme. Ou eu posso vir aqui, e fazer o banner bem pequeno e eu posso realmente começar a experimentar e me divertir com isso. Uma coisa você vai notar se você se lembrar do meu Jake Jorgovan.com talvez eu devesse aparecer aqui. Eu estou usando cinco, mas eu realmente não estou usando o banner em tudo, eu literalmente tenho o banner definido para zero e eu vou mudar outro atributo que eu vou mostrar-lhe em um momento. Ele realmente me permite ter este site limpo, minimalista e fazer isso sem ter que se preocupar em ter o banner aqui ou ter um banner em cada página. Novamente, vamos continuar indo para baixo, e você verá que isso está definido como zero, mas por causa de outro atributo ele ainda está lá e eu vou mostrar a você como corrigir isso sempre que eu chegar lá. Você tem essa cor de sobreposição no banner. Por padrão, isso é algo que você verá em um monte de temas como uma sobreposição e isso me leva a outra coisa. Isso é basicamente que esta imagem tem essa sobreposição nele e então eu posso torná-la vermelha, eu poderia torná-la verde se eu quisesse. Agora é apenas cinza, então é um pouco cinza e você pode ler a fonte. Uma coisa que você vai notar, você vai ver este A e o 0.2 que é a opacidade. Então, se eu começar a arrastar isso para a direita, a sobreposição literalmente se torna uma cor sólida em um. Então, se eu descer todo o caminho para a esquerda, eu posso fazer essa sobreposição zero. Ou se eu não quiser a sobreposição, eu posso apenas clicar em transparente, e lá nós apenas vemos a imagem sem qualquer sobreposição em tudo. Novamente, agora você vai ver que em um monte de temas diferentes como opção de sobreposição. Uma largura de texto banner novamente isso é algo que você pode fazer com este texto banner aqui. Se você tem algo realmente longo você pode escolher a largura que você quer que seja. Então um conteúdo de banner, este é o atributo que eu estava falando anteriormente. Agora, você está vendo que eu tenho o título da página, eu também posso alterá-lo para dizer o título do site ou o logotipo no slogan. Agora, eu não tenho um logotipo aqui em cima, mas em vez disso ele flutua sobre esta imagem, ou se eu escolher vazio, então o que acontece é que o título da página não aparece de todo. Se eu voltar aqui para a altura da área do banner, posso literalmente fazer esse banner desaparecer. Agora não temos esse banner, temos literalmente a navegação e este site. Então, é muito legal se você quer um site básico, você não quer se preocupar com todas as outras coisas, você pode simplesmente se livrar disso. Outra coisa que você vai notar, eu vou apenas mostrar isso para você agora. É que quando eu mexo meu mouse por aqui, pequenas seções ficam azuis ou vejo linhas pontilhadas ou qualquer coisa. Em qualquer lugar que eu clique, ele vai me mostrar imediatamente esse atributo, para você possa ver que há um espaço entre a navegação e onde esta página começa, e isso é porque eu defini meu espaçamento de página como 100. Ou talvez eu não queira 100, e eu quero que isso fique um pouco mais perto do topo, e eu quero sentar cerca de 24 pixels para baixo. Novamente, eu só fui capaz de clicar nisso e nós apenas ajustamos isso bem ali. Eu também posso clicar no logotipo aqui em cima, e novamente eu posso mudar este título do site, cor ou qualquer coisa assim. Eu posso mudar a fonte aqui mesmo que eu vou chegar na lista. Mas isso é realmente legal coisa que você pode apenas clicar em torno e editar coisas diferentes. Se você quiser voltar para a lista mestre, basta clicar em mostrar tudo, e aqui estamos de volta à nossa lista mestre normal. Então está mostrando muito, como eu posso ver espero que você esteja aceitando, esta é uma ferramenta muito poderosa. Novamente, se você ficar sobrecarregado, eu apenas encorajo você a mergulhar, e começar a jogar com tudo e alternar em torno de diferentes opções e experimentá-lo porque cada tema tem suas próprias coisas individuais. 36. Como usar o editor de estilo: A próxima coisa que vou mostrar é o fundo da navegação. Mas, na verdade, sabes que mais? Antes de continuar indo lá, eu realmente quero um banner. Eu queria demonstrar isso para vocês, mas eu gosto desta foto e vou deixá-la. Voltando para isso, porém, o fundo de navegação. Digamos que quero tornar este fundo de navegação vermelho. Acabei de virar a navegação vermelha. Isso é uma coisa muito útil. Mas, de novo, não estou gostando de como isso está aqui. Eu realmente gostaria que este fosse o site completo. Mais uma vez, se voltarmos aqui e fizermos a configuração Canvas, se fizermos a largura total, repente tudo vai novamente todo o caminho todo com do site. Eu também vou me livrar deste estofamento aqui em cima, este deslocamento Canvas que eu comecei inicialmente. Ei, isso está começando a parecer um pouco mais com um site. Na verdade, não quero um fundo vermelho, então vou voltar aqui. Eu só estava pulando um pouco, mostrando algumas coisas diferentes, esperando que isso te dê uma idéia de como editar as coisas. Nome do site, se eu quiser alterar essa fonte, novamente, eu recebo este menu suspenso. Pule isso para Open Sans. Você quer espaçar essas letras um pouco e talvez torná-las bem finas. Sim, olha para isso. Então nós vamos descer, podemos ir para as fontes de navegação. Isso é realmente esta fonte sobre os elementos de navegação. Vamos mudar isso para Open Sans também, e você vê que a fonte acabou de mudar. Novamente, tenho todas as mesmas opções. Podemos espaçar estes. Divirta-se com isso também. Posso alterar a cor do link, o status do link, o link ativo. A cor do link é apenas por padrão que eles são cinza, esta cor cinza aqui. Vou mudar isto. A cor do link, agora eu tenho como vermelho, mas este é rosa. Eu vou fazer a cor pairar como verde, apenas muito para fins de demonstração. Vou fazer a cor ativa como azul. O que você verá aqui é que os links são nativamente vermelhos, eles eram naturalmente todos vermelhos, então eu estou na página de boas-vindas para que a página de boas-vindas fique azul. Novamente, ele não vai fazer isso enquanto no editor de estilo, mas se eu passar o mouse sobre, ele ficaria verde. Novamente, não é a mais bonita, mas só estou tentando demonstrar e mostrar a vocês alguns elementos. Também temos este espaçamento de navegação. Novamente, isso é outra coisa que você pode notar, é que veja essas linhas azuis enquanto eu pairo aqui, olhe para cima aqui e você verá essas linhas azuis. Ao passar o mouse sobre este espaçamento de navegação, essas linhas azuis aparecem e me mostram o que estou prestes a fazer. À medida que começo a aumentar o espaçamento de navegação, começo a ver que isso coloca o preenchimento na parte superior e na parte inferior ou posso torná-lo muito pequeno assim. Então vamos novamente, também trabalhar com a posição de navegação. Queremos isto acima da bandeira ou podemos colocar isto abaixo da bandeira? Talvez nós apenas não queremos navegação em tudo e nós só queremos este site limpo e simples sem a navegação, pode funcionar para um site de uma página, provavelmente não muito mais. Mais uma vez, vamos deixar isso lá. Nós também podemos escolher, queremos a navegação esquerda, centro ou direita. Você notará que alguns desses ícones de mídia social se ajustam para caber adequadamente. 37. Como usar o editor de estilo: Para fins de demonstração, acabei de criar estes três títulos. Eu fui lá e adicionei estes aqui, e o que você vê é um título 1, um título 2, e um título 3. Aqui no editor de estilos, sob o conteúdo principal, você verá seções para o título 1, cabeçalho 2, cabeçalho 3, e seu corpo de texto. Lembre-se no vídeo de fonte onde eu expliquei que é assim que os sites são configurados com esses atributos de cabeçalho. Bem, se eu quiser o que eu posso fazer, é apenas vir aqui e eu posso mudar isso para Open Sans ou mudar a fonte, e aqui esta mudança está sob o meu atributo título 1 bem aqui. Em qualquer lugar do site que eu tenha um título 1, ele vai alterá-lo automaticamente para corresponder a esses atributos e corresponder ao estilo. O mesmo acontece com a rubrica 2. Não queremos que isto seja amarelo, mas queremos que seja verde louco. Novamente, podemos passar e simplesmente mudar esses atributos de cabeçalho 2, e isso vai mudar isso todo o caminho através do site. Mais uma vez, vamos fazer isso também na rubrica 3. Mude isso, talvez queiramos que seja um pouco maior, e você pode trabalhar com cada um desses atributos também, e apertaremos “Mostrar tudo” para voltar a todos eles. Mas como eu disse antes no início, os sites e web em geral é projetado em torno dessas opções de cabeçalho, e então quando você cria esses três, você basicamente está indo para fazer, título 1 deve ser o maior, título 2 deve ser o segundo maior, e o título 3 deve ser o menor, e então você apenas usá-los em todo o seu site, onde quer que você os veja encaixando. Agora vou mostrar-lhe algumas outras coisas sob o conteúdo principal. Você pode alterar o plano de fundo da tela, que isso é o que realmente você acha que seria um plano de fundo do site. Mas o plano de fundo da tela é na verdade o plano de fundo da sua página. Então, a página real onde todo o seu conteúdo é. Vamos deixar esse branco. Talvez você queira seu site preto, então você pode fazer isso também e tornar todo o seu texto branco, se você quiser. Nós vamos descer aqui então, eu vou mostrar a vocês o texto corporal. Corpo de texto é o seu básico apenas fontes e texto do seu site normal. Novamente, eu posso mudar isso para Open Sans, vemos que tudo refletido aqui, eu posso mudar o tamanho da fonte se eu quiser, eu posso mudar a altura da linha, e isso eu tentei demonstrar anteriormente, mas a altura da linha é a quantidade de espaço entre cada linha. Novamente, você tem scrunched, ou muito grande, ou algo agradável no meio. Você também pode fazer o espaçamento de letras, bem como, e isso pode ficar um pouco difícil de ler, mas você pode espaçar as letras se desejar. Você pode mudar a cor do corpo do texto, novamente talvez você quisesse este vermelho, ou qualquer coisa assim, e então sua cor do link, nós vamos fazer este azul celeste. O que você verá aqui é o link do meu portfólio aqui. Lembra como tínhamos isso configurado como um link? Bem, agora acabamos de ficar azul, e agora todos sabem que isso é um elo. Às vezes isso é algo para pensar, mas muitas pessoas gostam dessas fontes finas muito pequenas, que é o que eu tenho aqui. Mas faz com que seja realmente difícil ver essas mudanças de cor e honestamente ler de uma forma. Então, se eu subir um pouco para 400, repente esta cor do link é muito mais definida e tudo é realmente um pouco mais fácil de ler. Eu posso escolher a cor do pairar também. Muitas vezes o que você pode fazer é fazer a cor do pairar em um estado ligeiramente mais leve. Assim foi uma pequena mudança, mas não é drástica. Se tivéssemos uma citação de bloco, lembre-se como fizemos a citação de bloco anteriormente em um pequeno bloco de aspas, você pode alterar a fonte nelas e alterar o tamanho da fonte e tudo lá também, e você pode editar seu espaçamento de página é o último aqui que eu te mostrei aqui e nós trabalhamos antes. Seu espaçamento de página é a distância entre a parte superior do site e seu conteúdo, quanto espaçamento isso entre elas. Uma última coisa que vou mostrar antes de continuarmos nesta lista, é uma grande lista, eu sei, mas estamos fazendo o nosso caminho, é que se você quiser editar botões, eu mostrei anteriormente em um vídeo anterior como fazer botões. Se você clicar em “Ver Meu Portfólio”, você pode realmente começar a mudar o estilo dos botões. Então temos o sólido, ou temos um estilo de contorno, ou este estilo levantado. Na verdade, vamos ficar com o sólido por enquanto. Mas talvez não gostemos deste quadrado chato, queremos um arredondado. Você percebe essas cores é sutil, mas o arredondado, ou talvez nós queremos este olhar oval pílula, e talvez eu quero meus botões para ser verde, que eu possa mudar a cor dos botões também. Também posso mudar a cor do texto. Talvez se eu quiser o texto vermelho ou preto e fazer parecer horrível e natalino, mas vou deixar isso branco. Eu posso até mudar a fonte nele também. Então você pode obter uma sintonia muito fina aqui e trabalhar na estilização de seus botões também. Eu vou voltar para mostrar tudo e continuar indo para o editor de estilo com os caras. Role para baixo, fizemos conteúdo principal, fizemos a navegação, agora vamos para o rodapé. Eu realmente não mostrei a vocês como editar. Agora vamos fazer o rodapé, e o que vamos fazer aqui basicamente não é o rodapé, você realmente só tem um punhado de opções, mas você pode alterar o texto aqui embaixo. Se você quiser, novamente, um texto diferente, você pode mudar o estilo, todas essas coisas. Novamente, muito normal e você pode alinhá-lo à esquerda, ao centro ou à direita. Então também por natureza, você vai notar esta pequena fronteira de rodapé bem aqui. Nós vamos basicamente, se você quiser, você pode simplesmente desativar isso, e de repente não há fronteira entre o rodapé e o fundo. Você pode escolher seus ícones sociais no rodapé e quão grande você quer que esses caras sejam, que agora está se ajustando. Isso pode estar aqui em cima. Desculpe, não estamos mais no rodapé. Estes são os ícones sociais que são incorporados no tema cinco, e os ícones sociais que estão aqui em baixo, são realmente construídos através do widget ícone social, então desculpe confundi-lo lá. Você pode alterar a cor desses ícones se quiser, torná-los vermelhos brilhantes. Novamente, você pode escolher o estilo e como você quer que eles pareçam. Assim como fizemos antes, e então você também pode escolher se você quer que eles estejam apenas na parte superior, apenas na parte inferior, na parte superior e inferior, ou para escondê-los. Se os colocarmos no fundo, você vai notar que isso aparece, e isso é um pouco diferente do que isso aqui em baixo, porque este é um bloco quadrado. Isto aqui está realmente embutido no tema. Em seguida, nós vamos descer aqui para o blog. Na verdade, eu vou voltar para esse cara no futuro, assim que eu mostrar a vocês o capítulo dos blogs e tivermos isso pronto. Então o último aqui novamente, você tem seus blocos de botões também. Observe como ele diz médio aqui, isso só está mostrando o meio porque este é o único tamanho de botão que eu construí. Mas se você também tem um botão pequeno e um botão grande, você pode estilizá-los de forma diferente também. Então você pode compensá-lo. Você pode ter seu pequeno botão para ser vermelho e seus botões médios para ser verde. Novamente, muito aqui, muito que eu acabei de mostrar a vocês, e eu sei que parece esmagador, mas na próxima seção ou na próxima área, sempre que eu começar realmente passando por projetar o site, eu acho que você vai começar a ver isso em uso muito mais. Você vai começar a ver alguns exemplos do mundo real com ele, mas na realidade, você só precisa jogar com isso. Você precisa ter um olhar decente para o design, e apenas mexer com coisas diferentes, e eu acho que você vai ficar impressionado com o que você inventou. 38. Como configurar um blog: Um dos recursos mais poderosos do Squarespace é a plataforma de blogs. É muito robusto e muito simples de usar. Neste vídeo, vou mostrar-lhe como configurar e iniciar seu próprio blog. Para começar, vamos voltar aqui para a aba de páginas, e vamos até a nossa navegação principal, e vamos apertar este ícone “Plus”. Vamos rolar para baixo até o blog e clicar em “Blog”, e vamos dar título a este blog e mantê-lo bem direto e simples. Agora, o que você verá é que isso vai aparecer e nos trazer para esta página de blog, que você verá que tem essa barra lateral. Vou te mostrar como trabalhar com isso em um segundo. Então aqui à esquerda temos este tipo de gerente de blog onde veríamos todos os rascunhos, revisão e agendado. Então, o que queremos fazer para simplesmente criar uma postagem de blog é clicar neste botão Adicionar Post. Quando adicionamos postagens, ele vai abrir esta janela do editor de postagens nesta janela Editar postagem. Vamos dizer “Novo blog 1”. Este é o nosso título aqui no texto, e eu digo, “Este é um novo blog.” O que você vai notar no entanto, isso é o que eu amo sobre a plataforma de blogs é que você tem o editor completo. Você pode colocar em qualquer um desses blocos de imagem, você apenas colocar em uma imagem, ou uma galeria, ou um vídeo, qualquer coisa assim. Você pode facilmente apenas conectar isso todos os mesmos recursos diretamente em um post de blog e isso torna ótimo e realmente, muito fácil de usar. Algumas coisas básicas lá você pode novamente, basta fazer um blog inteiro posts o que você quiser. Use uma imagem, use todos os widgets, e tudo lá dentro. Então realmente, realmente útil ferramenta para ter, você tem o mesmo editor de texto básico e tudo aqui em cima. Tudo isso funciona muito semelhante ao que eu ensinei em vídeos anteriores. Agora, uma vez que você tem seu blog escrito e você tem tudo aqui em cima. Você vai querer ir até aqui e vir para a seção Opções, e você vai ter algumas coisas aqui nesta guia Opções. Primeiro, você vai ter uma imagem em miniatura, e então nós vamos vir aqui e apenas fazer upload de uma imagem em miniatura para uma postagem. Isso novamente vai ser apenas a miniatura básica, alguns temas vão puxar isso e usá-lo como parte do design. Outros não vão, mas essas coisas como o bloco de resumo como eu mostrei antes que ele vai puxar esta imagem em miniatura. Agora, você não precisa ter uma imagem em miniatura, mas é recomendável ou se você quiser tê-lo nesse tipo de design do seu site. Nós também temos esta seção URL post aqui. Isso é realmente útil para a otimização do mecanismo de busca porque seu URL, então, por exemplo, esta tag que temos aqui é sua URL. Isso é o que estamos colocando na caixa agora. Temos o jake-jorgovan/blog pesquisar o nome do post. Vamos dizer, novo anfitrião número 1. Podemos digitar isso aqui. Você pode alterar o autor. Portanto, se você tiver vários perfis no seu site do Squarespace, poderá alterar esse autor. Você pode usar o URL de origem se você disser, basta colocar algo lá como um trecho de outro site que você pode vincular à fonte. Então você tem um trecho. Este é o trecho, não sei soletrar trecho. Se você se lembra de quando estávamos trabalhando com o bloco de resumo, havia essa opção para trechos e havia aquele texto, aquele resumo do post. Isso é o que isso é, e eu vou até te mostrar no meu site. Aqui eu tenho listagem de todos os meus posts de blog e esses pequenos blurbs abaixo dele, estes são os trechos que eu tenho. Eles não são o post completo, mas eles são um teaser, e então as pessoas podem clicar e ler mais, e então eles podem ver o post completo e tudo aqui. Novamente, os trechos são úteis em um recurso de blog e também para o bloco de resumo. Se você também se lembra, no bloco de resumo mencionei as habilidades posts em destaque. Se você quiser, você pode marcar algo como um postagens em destaque, se você quiser. Então nós vamos embora e eu vou te mostrar algumas outras coisas. Você pode marcar um local com sua postagem, se quiser. Você não precisa, mas se você é um blogueiro de viagens, isso pode ser interessante. Você pode publicar postagens automaticamente nas mídias sociais, que eu provavelmente não quero publicar isso no meu Twitter ou meus seguidores me odiariam porque eu estaria publicando para nada, eu não vou fazer isso. Mas você pode fazer isso postar automaticamente suas diferentes contas do Twitter ou do Facebook ou qualquer coisa assim. Então, uma última coisa que eu quero mostrar a vocês, volta aqui na guia de conteúdo são as Tags e Categorias. Se você acabou de vir aqui e clicar em “Categorias”, você pode optar por criar uma categoria. Talvez eu diga negócios, e eu vou dizer fotografia, e eu poderia ter outra categoria para arte. Suas categorias não são muito importantes, mas se você quiser que alguém seja capaz de pesquisar seu site, você pode fazer isso. Você pode vincular duas categorias ou você pode usar o bloco de resumo, como eu me lembro, Eu mostrei antes da filtragem diferente com tags e categorias. Você pode fazer isso também. Então você também tem este atributo Tags, e este é novamente outro ponto realmente importante onde você pode colocar palavras-chave de otimização do mecanismo de busca aqui, e isso é útil. Você também pode colocar outras coisas que talvez você queira categorizar o post por. Então talvez a Tailândia, ou a localização, ou qualquer coisa assim. Novamente, essas tags e categorias quando você começa a construir um blog realmente grande com muito conteúdo, eles podem ser realmente úteis para começar a filtrar e restringir seu conteúdo. Quando você terminar, você pode vir aqui, e você pode clicar em “Salvar” e ele aparecerá em um modo de rascunho, ou você pode clicar em “Salvar e publicar”, e ele será publicado em seu site. Então eu apertei “Salvar e publicar”, e aqui vamos nós, temos Novo blog 1 aparece aqui mesmo. Novo blog 1 aparece e este é um novo blog. Então, sim, podemos ver apenas um pouco aqui do que está acontecendo. Mas, no fim das contas, eu não quero essa barra lateral. Não estou gostando disso. Então há algumas coisas que você pode fazer. Primeiro, se digamos que você quer barra lateral em seu blog, você quer algo aqui que as pessoas podem optar por um endereço de e-mail ou algo assim. Você pode simplesmente rolar e clicar em “Editar” na barra lateral. Você pode simplesmente excluir o conteúdo de exemplo que está aqui, e novamente, isso funciona como todas as outras coisas que eu mostrei a você. Eu posso simplesmente arrastar e excluir isso como o editor visual, mas estamos apenas lidando com uma barra lateral agora, então ele só é empilhado verticalmente. Você pode colocar texto aqui, “Cadastre-se para minha lista de discussão”, ou qualquer coisa que você gostaria aqui. Agora temos essa barra lateral, e podemos editá-la se quisermos. A coisa legal sobre a barra lateral é que ele vai aparecer independentemente de se você está no post, ou se eu apenas ir para a página do blog. Se você notar quando eu rolar a página do blog, eu vejo o trecho, e a miniatura, e então quando eu vou para Ler Mais, eu vejo que este é um blog novo e o texto real dele. Mas a barra lateral fica lá independentemente, porque eu basicamente disse que eu quero barra lateral no meu blog. Bem, e se eu não quiser uma barra lateral no meu blog, como faço para que isso desapareça? Para fazer isso, quando você estiver de volta aqui nas configurações do blog, você vai clicar em sua pequena mudança de marcha, assim como você iria adicionar uma configuração de página. Eu vou rolar para baixo e eu tenho essas opções do meu blog semelhantes às configurações de página, mas algumas coisas diferentes. Vamos para o layout da página, e podemos ir para Dividir barras laterais se quisermos, ou podemos ir para Duas barras laterais, piorar ou Largura total. Também podemos escolher quantos posts por página, podemos adicionar uma descrição, alterar o slug se quisermos, e podemos adicionar uma imagem em miniatura também. Novamente, não vou te mostrar tudo isso. O post por endereço de e-mail que você pode ou não querer usar, mas todas essas coisas são apenas ferramentas muito simples que você pode usar para personalizar. Mas se eu tiver Full Width hit e eu apertar “Salvar”, e aqueles que vai atualizar e agora não há nenhuma barra lateral no blog. Algumas outras coisas que quero mostrar a vocês. Se você vem para avançado no blog, você pode vir aqui para editar suas tags e categorias. Novamente, provavelmente nada com que você vai se preocupar muito neste estágio inicial, mas talvez quando você está ficando um pouco maior, e então a sindicação, e você provavelmente não vai se preocupar muito com isso também. Então é assim que você configura um blog no Squarespace, mas como eu prometi antes, eu precisava mostrar a vocês como estilizar seu blog também. Se voltarmos aqui, e formos para casa, e formos para o Editor de Estilos. Design, Editor de Estilo. Percebemos que nós realmente temos toda esta seção aqui dedicada apenas para estilizar um blog. A primeira coisa que podemos fazer é termos esse meta texto, que você percebe a data e tudo isso aqui em baixo é meta texto. Novamente, posso mudar a fonte, tamanho da cor e coisas assim. Eu posso mudar a cor se eu quiser ou torná-la realmente leve. Posso mexer com isso. Você tem espaçamento de artigos, o que, novamente, você não vai ver muito isso porque eu tenho apenas um artigo. Mas, por exemplo, no meu, esse espaçamento de artigos criaria mais espaçamento entre cada uma dessas postagens na página aqui. Exibição da Lista de Blog, você pode escolher entre completo ou cabeçalho e rodapé apenas, ou talvez até mesmo apenas o cabeçalho apenas sem os metadados. Novamente, você pode escolher se você quer aquela foto lá ou não. Você pode escolher o Blog Byline. Se você quer isso no fundo, no topo, ou talvez eu apenas assuma, hey, este é o meu site, todo mundo vai saber que sou eu e eu vou escondê-lo. Você pode escolher a linha de dados do blog, e você pode escolher se você quer isso acima, abaixo, ou simplesmente escondê-lo. A Paginação do Blog. Então paginação isso seria quando você bater sobre que 20 posts e ele tem o próximo ou anterior. Você pode mudar sua fonte na sua cor. Então eu vou te mostrar aqui. Quando eu rolar para baixo até a parte inferior do meu blog, esta é a paginação bem aqui, e assim eu posso mudar esta fonte ou a cor se eu quiser. Eu também posso desativar uma fronteira sobre isso, se eu quiser. Normalmente há apenas uma pequena fronteira lá em baixo. Novamente, posso ocultar as miniaturas se eu quiser, posso ocultar esses ícones, e posso simplesmente ocultar as categorias de tags se eu quiser. Então eu posso começar a ficar muito simples com isso e tudo mais. Mas eu posso realmente ser personalizado aqui com como eu quero que o meu blog para olhar e os estilos que estão em torno dele. Então, espero que isso tenha sido útil para lhe dar uma ideia de como configurar um blog no Squarespace. 39. Sobre a plataforma de blogs do Squarespace: Neste ponto do curso, você aprendeu como configurar seu site do Squarespace, como adicionar conteúdo a ele e agora como estilizá-lo e projetá-lo. Agora vou mergulhar em alguns dos outros recursos que são realmente importantes para muitos usuários do site. Nesta seção, vou falar especificamente sobre blogs. O Squarespace tem uma plataforma de blogs extremamente robusta e simples. Na verdade, eu usá-lo em meu próprio site pessoal e eu absolutamente amo isso. Neste curso vou mostrar como configurar um blog, como adicionar novas postagens e tudo o que você pode fazer na plataforma de blogs do Squarespace. 40. Como usar o bloco de produtos de eCommerce: Neste vídeo, vou começar a mostrar-lhe e dar-lhe uma visão geral básica da seção de e-commerce. Para começar, para chegar ao e-commerce, nós vamos vir e clicar em “Commerce” na nossa navegação principal aqui. Sempre que você iniciar uma nova conta de comércio, a primeira coisa que você realmente vai querer fazer é clicar nesta guia “Introdução”. Você vai notar que eu tenho um zero fora das quatro opções de Introdução configuração. Quando passarmos, você verá basicamente essas quatro opções que você precisa fazer para começar sua loja de comércio eletrônico. Em primeiro lugar, você vai precisar obviamente adicionar alguns produtos. A segunda é que você vai precisar criar alguma opção de envio. A terceira é que você vai ter que conectar uma conta Stripe. Isso é algo apenas para estar ciente de que o Squarespace só se integra com stripe. Mas, se você diz que está tendo problemas ou você quer integrar com PayPal ou algumas outras soluções de pagamentos, existe essa outra grande ferramenta chamada Ecwid. Eu recomendo que investigue isso se essa faixa é um disjuntor para você, como eu sei que é para algumas pessoas. Mas honestamente, stripe não é um grande negócio, é como PayPal. Não há taxas mensais nem nada. É muito bom trabalhar com ele. Depois de configurar essas outras opções, você pode virar o interruptor e sua loja pode entrar ao vivo. Agora, também reparem que eles têm um monte de artigos úteis aqui em baixo. Eu definitivamente recomendo verificar estes para fora como e-commerce é uma das seções mais complexas do squarespace. E-commerce em geral é apenas complexo. Portanto, não é culpa do Squarespace, mas apenas que é uma coisa mais complexa de se fazer na web. A primeira coisa que vamos querer fazer é simplesmente adicionar alguns produtos. Para fazer isso, vamos clicar neste número um e adicionar alguns produtos. O que você vai notar é que é muito parecido com o recurso de blogs e como isso funcionou. Lembra-te como tínhamos a mesma opção aqui. Bem, aqui em vez de adicionar uma postagem de blog vamos adicionar um produto. Uma vez que fizermos isso, ele nos dará esta opção para selecionar um tipo de produto. Você pode escolher um produto físico, talvez algo físico que você realmente vai enviar para a pessoa. Você pode escolher um produto digital. Se você diz, vender um e-book ou um curso digital, você pode usar isso e ele lhe dará algumas opções para downloads de arquivos uma vez que eles pagam. Ou você pode vender um serviço e talvez eu possa vender um serviço de consultoria ou um produto que eu serviço com isso também. Vamos seguir em frente e começar com o digital para torná-lo simples. O que vamos fazer aqui é vir e, você vai notar que, novamente, é semelhante à funcionalidade do blog, mas um pouco diferente. Vamos ter o nome do produto, “O Criador Focado”. Vamos fazer upload de algumas imagens para esse produto. Aqui, uma vez que tenhamos uma foto, vamos fazer o upload desta foto do produto. Podemos definir um preço sobre este produto se quisermos, ou podemos deixá-lo em zero e mantê-lo livre. Este é um e-book gratuito que escrevi, então vou mantê-lo como livre. Podemos colocar uma pequena descrição, “Aprenda a arte de seguir e alcançar seus objetivos”. Aqui temos basicamente configurar a imagem básica, descrição e o título. Venha aqui, podemos categorizá-los e marcá-los. Novamente, se você tem muitos produtos, isso se torna realmente útil. Para que as pessoas possam dizer, eu quero procurar todos os seus livros. Eu quero pesquisar todos os seus cursos, suas camisas, calças, como você quiser fazer isso. Você pode etiquetá-lo. Novamente, eu fiz algumas lojas de e-commerce onde as pessoas marcavam por cor ou por um certo tipo de estilo. Algumas coisas você pode fazer em torno disso também. Em seguida, vamos passar para a definição de preços e upload. Aqui posso fazer upload de um arquivo PDF ou qualquer arquivo digital que alguém possa baixar. Uma vez que temos esse arquivo, basta clicar e fazer o upload. Aqui ele só vai carregar esse arquivo. Quando alguém compra ou clica em “Comprar”, ele lhe dará a opção de baixar esse arquivo. Então vamos ver que isso vai carregar ali mesmo, e então temos nosso produto digital bem ali em cima e em nosso site. Você pode ver o final The Focated Creator em tudo sobre ele aqui. Você pode vir para informações adicionais. Se quisermos, podemos colocar informações adicionais aqui. Esta sopa não é totalmente necessária, mas na página de vendas você verá isso. Podemos ter um formulário e você pode exigir elementos deles. Talvez eu queira que alguém faça um formulário chamado Formulário de compra do Criador Focado. Talvez eu queira alguém apenas seu endereço de e-mail, e obter isso deles sempre que eles se inscreverem. Além disso, algo realmente eu não mostrei a vocês no vídeo formulário anterior, mas você também pode clicar obrigatório ou não necessário quando você trabalha com formulários para torná-los obrigatórios ou não. Alguém precisa me dar o endereço de e-mail quando baixar o livro. Posso vir aqui e ter duas opções. Posso alterar a URL dos produtos. Posso usar uma adição personalizada. Então, em vez de dizer “Adicionar ao carrinho”, talvez eu queira dizer “Baixe o livro”. Posso escolher o produto em destaque ou não que, novamente, quando você está olhando para o bloco de resumo, é importante para coisas assim. Para observar, você também pode usar o bloco de resumo para quaisquer recursos de comércio eletrônico também. Consulte esse vídeo de bloco de resumo e nós o usamos para blogar, mas você também pode fazê-lo para e-commerce também. Então, por último, você quer publicar isso em qualquer canal de mídia social ou não? Nós não queremos, então vamos pular isso. Quando terminarmos, apertamos “Salvar e publicar”. Nós só vamos clicar nele bem aqui, é “Salvar e publicar”. Acabamos de criar o nosso primeiro produto. Agora, isso não é realmente muito emocionante ainda porque realmente não temos este produto em nenhum lugar em nosso site. Nós apenas criamos. A próxima coisa que temos que fazer é colocar esse produto em nosso site, e há algumas maneiras de fazer isso. Primeiro, se voltarmos todo o caminho para fora e formos para as páginas, veremos que podemos vir até aqui e para a página de boas-vindas. Venha até aqui para o conteúdo da nossa página. Se eu quiser, posso vir aqui, adicionar um bloco e rolar para baixo. Posso adicionar um bloco de produtos. Vou procurar o produto. Então vou procurar o Criador Focado que acabei de criar. Veremos que isso apareça lá em cima. Agora, eu tenho todas essas opções. Deixe-me mover isso para que vocês possam ver. Eu posso ligar ou desligar a imagem, o que sem ela não há realmente nada lá. Eu posso ter o título e mostrar o preço, mostrar a descrição que eu criei, e mostrar o botão 'Adicionar ao carrinho”, que por algum motivo não está funcionando ou mostrando corretamente agora, mas vamos salvar independentemente. Acabamos de adicionar nosso primeiro produto à nossa página. Agora, o botão “Adicionar ao carrinho” não está funcionando. Vamos tentar atualizar e ver se isso corrige. Novamente, às vezes você tem esses pequenos insetos no espaço quadrado, então eu só vou trabalhar com vocês aqui. Lá está ele. Não sei por que não estava aparecendo antes, mas atualize a página e tudo é corrigido. Acabamos de adicionar o nosso produto. Se alguém clicar no produto, levo alguns para a página de vendas, onde eles podem passar. Esta é a informação adicional que colocamos. Se eu for fazer o download do livro, alguém tem que me dar seu endereço de e-mail e então eles podem baixar o livro. Essa é uma pequena configuração básica sobre como adicionar produtos ao comércio eletrônico e, em seguida, como realmente usar o bloco de produtos também. 41. Sobre a plataforma de e-commerce do Squarespace.: Nesta seção do curso, vou orientá-lo sobre como configurar uma loja de e-commerce em seu site. Agora, algumas pessoas podem pular isso se você não estiver interessado em ter uma loja de e-commerce em seu site. Mas se você estiver, o Squarespace torna isso muito simples. Neste vídeo, vou mostrar-lhe como configurar e usar a plataforma de e-commerce. 42. Uma visão do ecommerce do ecommerce: No último vídeo, criamos nosso primeiro produto. Neste vídeo eu quero mostrar um pouco mais sobre como criar mais produtos e então vamos mergulhar um pouco mais no e-commerce. Se você se lembra, criamos esse primeiro produto a partir da guia inicial de introdução no e-commerce. Uma vez que você fizer isso, você vai notar que se você descer aqui, há esses Novos Produtos que apareceram em sua seção não vinculada. Você notará que o pequeno sinal de $ significa que é um produto. Bem, em primeiro lugar, provavelmente não quero isto chamado Novos Produtos. Então o que eu posso fazer é clicar neste pequeno ícone de engrenagem aqui, e eu posso mudar isso para apenas Produtos. Posso me livrar da barra lateral se eu não quiser uma barra lateral aqui, torná-la largura total nas páginas do meu produto. Eu posso mudar essa lesma para que seja apenas Produtos e não Novos Produtos. Mais uma vez, muito semelhante aos outros, mas você quer fazer isso para a página do produto também. Agora percebemos que a página do produto é realmente largura total. Na verdade, não, esta é a página do produto em geral. Algo que você pode fazer, digamos, colocamos isso na navegação principal, é que agora, se alguém apenas clicar em “Produtos”, eles vão receber esta página de design de produto legal e de boa aparência. À medida que você adicionar vários produtos que serão replicados automaticamente entre eles. Se estamos apenas na guia Páginas e clicamos neste Produtos vai voltar a nos levar para este editor de tipo de blog semelhante onde podemos adicionar mais produtos ou clicar em “Configurações” e ajustar as configurações para este produto se precisarmos. Isso é apenas um pouco sobre como vocês podem trabalhar com mais produtos e criar mais produtos no futuro. Agora, vamos descer ao e-commerce, e mergulhar um pouco mais nisso. Quando voltamos para a guia Introdução, percebemos que completamos novamente apenas um em cada quatro. Vamos ver que precisamos criar uma opção de envio se quisermos vender bens físicos. Novamente, por enquanto, se estou vendendo um produto digital, não preciso disso. Posso apertar o Skip se eu quiser. Mas se você precisar enviar algo, você deseja apertar isso e Digite em todas as suas informações de envio. Em terceiro lugar, se você apenas clicar sobre isso, você vai conectar sua conta Stripe, e uma vez que você tem todos estes três feito ou você apertou Skip vai dar-lhe a opção de virar o interruptor e ir ao vivo. Agora, uma vez que você está ao vivo, você vai notar que esta página de comércio se torna o centro ea casa para todo o seu comércio de tudo em seu site. Se eu atender pedidos, posso vir aqui e ver meus pedidos pendentes, concluídos ou cancelados. Eu realmente posso ir e olhar através de tudo isso. Você pode ver qualquer atividade de pagamento, quais pagamentos realmente vieram através, quais reembolsos, falhas ou estornos eu tenho. Posso ver o inventário. Então, se eu tiver um produto físico, eu posso realmente definir inventário para que eu saiba quantos disso eu tenho e eu posso deduzir disso e configurá-lo ao longo do caminho. Bem, eu tenho doações e podemos ter uma opção de doações onde as pessoas podem doar. É outra coisa que você pode configurar com sua loja de e-commerce para que você possa acompanhar isso também. Você tem suas opções de envio. Então, se você precisar trabalhar em seu envio ou alterar qualquer coisa, você pode fazer isso aqui. Você também pode conectar sua conta à estação de navio, que é outro aplicativo web para o envio de produtos de comércio eletrônico. Se você quiser se conectar com a estação de navios, você pode se conectar aqui mesmo. Novamente, é uma coisa muito poderosa se você estiver dirigindo uma loja de comércio eletrônico. Cupons, você pode definir quaisquer cupons ou criar qualquer coisa lá que você gostaria. Você pode definir impostos e ter impostos diferentes para diferentes países e tudo mais. Assim, você pode definir regras para diferentes áreas ou regiões. Você pode olhar para sua contabilidade e, se você quiser, você pode configurar com Xero, que é um software de contabilidade popular. Você pode realmente conectar sua conta de espaço quadrado aqui mesmo através do Xero. Olhe o que ele fez e eu vou clicar nisso. Você também pode configurar suas configurações de e-mail. Se alguém receber um suporte ao cliente ou receber um e-mail seu, por padrão, ele virá de noreply@squarespace.com. Mas talvez eu queira que ele venha de jake@jake-jorgovan.com. Então você pode começar a trabalhar com eles também. Em seguida, você também pode ser notificado sempre que o estoque em seu e-mail começar a ficar baixo. Você pode vir aqui e configurar e personalizar seus e-mails também. Você pode vir aqui e realmente começar a definir os textos individuais e o layout e o estilo para cada um de seus e-mails individuais. Novamente, algumas coisas muito legais. É um pouco mais complexo porque estamos entrando no código e algumas dessas coisas, então não é tão simples. Uma vez que este é um site sem código, afinal, você provavelmente não quer mergulhar nisso. Vamos voltar para o comércio. Novamente, você tem algumas configurações da loja aqui embaixo. Mais uma vez, sua conta Stripe, qual moeda está funcionando, suas medidas, seus números de pedidos, checkout expresso, se você deseja alterar o esquema de cores mais escuro e claro. Mailchimp, você pode se conectar com isso aqui. Você pode ter um formulário de pagamento personalizado se quiser e configurar sua política de termos, seus termos de serviço, sua política de privacidade, tudo isso. Como você pode ver, e-commerce, há muito para ele. Mas, novamente, basta clicar em todos esses menus, trabalhar através deles e você vai colocar sua loja em funcionamento em nenhum momento. Isso é tudo o que eu realmente vou cobrir no e-commerce. Espero que isto lhe dê uma visão geral básica. É óbvio que há muito mais profundidade, não posso entrar nela. Novamente, se a plataforma integrada do Squarespace não for robusta o suficiente para você ou você precisar de alguns recursos adicionais, definitivamente dê uma olhada no Ecwid. É uma plataforma realmente ótima, muito fácil de integrar e apenas incorporar no Squarespace. Ele vai lhe dar a integração do PayPal e alguns outros recursos que podem ser importantes para você como proprietário de uma loja de comércio eletrônico. 43. Como criar páginas de capa: Neste vídeo, eu vou estar explicando para vocês o que são páginas de rosto e como usá-las. Então, para começar, vamos até a Navegação Principal e vamos clicar em “Plus”. Vamos criar uma página de rosto e vamos dizer Galeria Exibindo. Uma vez que fizermos isso, vai nos levar a este editor de capa. Isso parece um pouco diferente de muitas outras coisas no Squarespace. Mas basicamente o que uma página de rosto é, é o simples sites de uma página. Este roteirista, o script é apenas o começo, ver o trabalho. Isso é basicamente como um site de uma página que foi construído e é personalizável. Então não há um monte de recursos, não há um editor de layout inteiro, mas ele permite que você faça algumas coisas realmente legais. Você vai notar se clicarmos em “Alterar layout”, nós realmente temos muito que podemos escolher. Então podemos escolher todos esses tipos diferentes de páginas de rosto que têm esses diferentes recursos e olha para eles, e escolher o que se sente como um ajuste certo para nós. Então vamos escolher este aqui, Debut. Vamos selecionar esse e vamos dizer, eu gosto disso, isso está funcionando, esse posicionamento geral e o estilo dele é algo que eu gosto. Vamos clicar em “Salvar”. Voltaremos para a página de exibição da galeria, e vamos descer aqui e mudar a marca e o texto. Então podemos ter que ser um texto ou podemos torná-lo um logotipo, se quisermos fazer upload de um logotipo, ou podemos dizer Elisabeth Cairnes, ou vamos apenas dizer E. Cairnes porque parece que é um pouco longo agora para torná-lo Simples. Você pode ter esta manchete aqui, Próxima Galeria Exibindo. Vamos dizer Denver Colorado, e você percebe que enquanto estou fazendo isso, esse texto está mudando bem aqui na página. Você pode escolher se deseja que os ícones sociais estejam lá ou não. Uma vez que temos isso, percebemos que basicamente mudamos nossa marca básica e texto. Volte para Galeria Exibindo e podemos incorporar um vídeo se quisermos. Então isso é muito legal porque este é realmente um vídeo em tela cheia que temos aqui. Se eu vier aqui, noto que posso reproduzir e reproduzir um vídeo se eu quiser, mas não tenho um vídeo configurado nisso agora, então, isso não vai funcionar, mas esta é uma característica muito legal desta página de rosto. Talvez não seja isso que queremos, então escolheremos uma imagem, e viremos aqui e enviaremos uma imagem. Voltaremos à foto de herói que temos e enviaremos isso, e isso substituirá a imagem que eles têm aqui. Então, uma vez que a imagem de vídeo é carregada, você percebe que, todo o fundo muda agora com esta nova imagem que temos. Nós apertamos “Salvar”, voltar para Galeria Mostrando, e podemos escolher as Ações, criar botões, links e formulários. Você pode ter Botões, ou podemos ter uma Navegação com um punhado de opções e links diferentes que ele pode ir para, ou podemos ter Botões e ter um formulário que vai junto com isso, para que possamos trabalhar e construir um formulário em aqui onde talvez nós capturar alguém informações sobre a galeria ou o RSVP. Então vamos apenas salvar isso e vamos apenas dizer RSVP sobre isso, e nós podemos mudar o link para cairnes.com. Agora nós adicionamos este pequeno link RSVP e ele irá vincular ao nosso site para que alguém possa responder SVP para o evento. Nós vamos economizar, voltar para a Galeria Exibindo, e nós também podemos vir aqui e nós temos um pequeno editor de estilo em miniatura aqui também. Então podemos começar a mudar isso e torná-lo uma fonte que gostamos. Vou fazer o Josef, e podemos começar a trabalhar e editar os estilos. Novamente, o editor de estilos será totalmente dependente da página de rosto com a qual você deseja trabalhar. Como você vê, nós acabamos de fazer esta página de rosto muito legal, simples e agradável, e é muito básico, algo muito legal que podemos apenas usar para promover um próximo evento ou uma galeria. Novamente, há uma tonelada dessas, e muitas delas têm características diferentes. uma vez, este é muito simples, é apenas focado em torno deste chamado à ação básica. Vamos ver. Este aqui em baixo tem uma opção para uma incorporação de áudio, que você possa incorporar uma faixa se você for um músico. Este aqui é outro que tem vídeo embutido no modelo. Então há um monte de coisas realmente legais que você pode fazer com isso e eu encorajo-o a apenas brincar com todos eles. É um novo recurso muito legal que é exclusivo do Squarespace, mas é uma maneira de fazer uma página realmente legal apenas se destacar e realmente promover algo ou diferenciar algo. 44. Sobre as páginas de capa: Então eu mostrei muito neste curso até este ponto. Mas eu tenho mais uma característica que é muito legal que eu sei que você vai adorar. Há um recurso no Squarespace chamado Páginas de rosto. As Páginas de Capa permitem que você crie um site simples de uma página que você pode usar para promover, digamos, um evento futuro, um lançamento de produto para exibir um vídeo. Há muitas maneiras diferentes de você usá-lo, mas é um recurso muito legal, ele acabou de sair recentemente no Squarespace e é um que eu absolutamente amo e eu sei que você vai ficar animado quando vê-lo. 45. Sobre esta seção do curso: Então, até esse ponto, tenho mostrado muitas características e demonstrado muitas coisas diferentes no Squarespace. Mas honestamente, o site como é agora, parece muito terrível. Eu realmente só estava tentando mostrar recursos e explicar as coisas no Squarespace. Bem, na segunda metade deste curso, o que eu vou fazer é percorrer e projetar um site do começo ao fim. Eu vou percorrer e explicar a teoria por trás de como eu abordo a construção desses sites e então eu vou realmente gravar todo o vídeo de captura de tela enquanto eu passo e faço cada peça de criação do site e lançá-lo ao vivo. Então eu sei que assistir esse processo acontecer em ação, será valioso para você ver um site inteiro construído do zero. 46. Como criar um sitemap de site e planejar seu site: Para começar, antes mesmo de entrar no espaço quadrado, eu vou pular e usar essa ferramenta chamada MindMeister que eu falei um pouco mais cedo. Vou usar essa ferramenta para criar um sitemap e realmente planejar meu site squarespace. Você pode simplesmente ir para o MindMeister, você pode se inscrever gratuitamente, e você começa a fazer três mapas de forma totalmente gratuita. Assim que você entrar, eu vou usar um mapa mental aqui, e nós vamos ter um sitemap básico em branco. Eu vou mudar o nome deste sitemap para Elisabethcaimes.com, e o que eu vou começar a fazer é basicamente meu objetivo é apenas descobrir quais são as páginas que vão estar neste site, e o que eu quero que alguém faça quando eles chegam a cada página? Estas são duas questões realmente importantes para descobrir porque muitas vezes, as pessoas terão páginas em seu site e não há nenhum propósito para elas. Não há nenhuma chamada à ação ou qualquer coisa que eles queiram que a pessoa faça. Nosso plano é basicamente tentar planejar isso e descobrir isso na frente. Para adicionar isso, eu vou clicar primeiro aqui apenas no pequeno hub central. Venha aqui e acerte um plus aqui. Vou salvar aqui, vamos ter uma Home Page. Voltarei aqui e adicionarei outro. Adicionar uma página Sobre. Vou ter outra para uma Página de Contato e depois vou ter uma Página de Fotos. Eu não gosto que isso esteja lá, então eu vou puxá-lo e jogá-lo bem aqui. Como você pode ver, este vai ser um site bastante básico. É tudo o que preciso neste momento. Mas a pergunta vem em dois, então, qual é o propósito desta página? O que eu quero que alguém faça nesta página? Você quer responder a esta pergunta para cada uma das diferentes páginas que você passa. Com a finalidade da Home Page para chamar a atenção e ter alguém clique em uma página adicional. Aqui temos o propósito da Home Page, e novamente, eu acho que o que queremos fazer? Clique para ver as fotos. Novamente, faremos a mesma coisa no outro. Objetivo da página Sobre. O verdadeiro propósito desta página é bastante simples, mas é dar ao espectador informações sobre Elisabeth, e o que queremos fazer? Alguém para fazer isso nesta página? Bem, realmente vamos dar-lhes duas opções aqui. Quando alguém vai a isto, talvez tenham tirado as fotos primeiro ou talvez não. Queremos que alguém tenha a opção de clicar para ver fotos. Ou queremos que alguém clique para entrar em contato. A página de fotos, o propósito. Exiba as fotos de forma limpa e profissional, e o que eu quero que alguém faça? Bem, nesta página, queremos que eles olhem para as fotos porque ele diz uma parte central do site, e queremos que eles também cliquem para sobre ou contatem, e por último, o propósito da Página de Contato. Dê aos proprietários de galerias ou visitantes a chance de entrar em contato, e o que queremos que eles façam? Queremos que eles simplesmente preencham o formulário de contato. Muito simples, mas muitas pessoas vão pular este exercício e você não tem que fazê-lo no MindMeister, você pode fazer isso no papel também se quiser. Mas este exercício realmente ajuda a planejar seu site com antecedência. Para um site pequeno como este, pode não parecer tão importante. Mas quando você chega a um site realmente grande, esses mapas mentais podem ser enormes sitemaps grandes e tudo mais, e quanto maior o seu site fica, mais fácil é perder de vista o propósito, e de repente você só tem toneladas de apenas pequenos widgets e tudo ou apelos à ação, todo o seu site para todas as coisas diferentes. Ficando claro sobre qual é o propósito de cada página e o que você quer que alguém faça, isso realmente vai ajudar seu site a se reunir e ter um fluxo muito melhor. 47. Como criar o enquadramento do site: Assim que tivermos um sitemap criado, vamos avançar e chegar ao Squarespace, e vamos basicamente definir esse sitemap no Squarespace. Mais uma vez, vou apagar tudo o que tenho andado a brincar aqui para não termos um monte de coisas em excesso. Eu só vou me livrar de todas essas coisas, porque nós realmente não precisamos disso. Agora, basicamente temos esta página de boas-vindas. Se voltarmos ao sitemap, teremos a Página Inicial ou Bem-vindo, Sobre, Fotos e Contato. Criaremos a página Fotos, criaremos a página Sobre e criaremos uma página Contato. Aqui estamos nós, temos nossas quatro páginas básicas, e então se vocês se lembram da coisa da galeria que eu mostrei a vocês antes, como vamos montar uma galeria na seção não vinculada. Vamos em frente e fazer isso agora para que possamos apenas carregar nossas fotos e então podemos usá-las onde quisermos em todo o site. Eu criei esta Galeria, e vou fazer upload de um punhado de fotos. Venha aqui, vá em frente e carregue tudo isso que eu tenho agora compactado para web. Novamente, sempre que você tem uma foto, você percebe que estes são cerca de 271 kilobytes para uma foto. Isso é provavelmente um bom tamanho, cerca de qualquer lugar entre um 100 e provavelmente 500 kilobytes é um bom tamanho. Mas se você estiver vendo os tamanhos dos arquivos nos megabytes, então você deseja começar a procurar uma maneira de compactá-los. Você pode fazer isso através do Photoshop, você pode fazer isso através de Visualização no Mac, ou há um punhado de apenas pesquisar como comprimir imagens no Google, e você encontrará um punhado de ferramentas lá. Vou pegar essas imagens que escolhemos para usar no site. Eu só vou arrastar e soltar estes aqui, e deixar todos eles irem em frente e carregar. Novamente, colocando todos estes em uma galeria não ligada, eu posso, em seguida, basicamente, referenciá-los em qualquer lugar do site e dessa forma, se eu quiser usá-los em um local diferente no site ou qualquer coisa, eu posso fazer isso também, coisa tão útil que você pode fazer lá. Nós também podemos reorganizar estes, Eu gosto desta imagem, mas provavelmente não é o meu favorito. Nós vamos tipo de rolar para baixo e vamos começar a reorganizar estes em uma ordem diferente. Escolhendo uma ordem que se encaixa no gosto e como a ordem que queremos que estes sejam apresentados. Pessoalmente, este caminhão é o meu favorito, então vou deixar isso para cima. Vamos reorganizar um pouco e colocá-los em qualquer ordem que desejarmos. Agora parece que todos eles foram carregados e processados. Vamos voltar às páginas, e agora acabamos de criar basicamente todas as páginas no conteúdo básico para um site. 48. Como criar uma página de fotografia: A próxima coisa que vou fazer, agora que carregamos a nossa galeria, é que vou sair dessa Galeria para a nossa página de Fotos. A primeira coisa que você vai notar é que ainda temos uma barra lateral na nossa Galeria e não queremos isso. Então, eu vou chegar às Configurações na página Fotos e colocar essa página em largura total. Assim não temos que nos preocupar com nenhuma barra lateral. Vou apertar Save. Uma outra coisa útil a notar é que notar que não há cabeçalho sobre isso. Vamos colocar um texto aqui. Mas agora não há cabeçalho nesta página. Se eu carregar uma imagem, veremos um cabeçalho aparecer aqui. Digamos que eu carregue esta foto aqui. Vamos notar que, em seguida, o cabeçalho aparecerá. Eu só vou fazer upload disso, para mostrar a vocês, eu vou apertar Salvar. Agora, de repente, porque colocamos uma foto aqui, temos um enorme banner aqui em cima. Mais uma vez, nesta página nós realmente não queremos esse banner Eu vou apenas ir em frente e remover isso porque eu apenas gostaria de focar na galeria de fotos como um todo. Então nós vamos colocar Fotos aqui e eu vou dizer Fotografia. Parece um pouco mais profissional. Nós vamos realmente centralizar isso, colocar isso bem no meio e eu vou editar o conteúdo da página novamente. Desculpe, continuo indo e voltando com a poupança. Agora, é sempre bom economizar muito porque novamente, se você perder a conexão com a Internet ou algo der errado, isso não é uma coisa boa. Então, economize com frequência. Vou adicionar um pequeno bloco abaixo onde diz Fotografia e Galeria. Isso é ridículo, mas o Squarespace atualizou a interface do usuário entre, literalmente, ontem, quando gravei o resto desses vídeos mostrando a vocês como fazer isso com o bloco Gallery. Agora eles realmente configuraram estes e à sua maneira. Um pouco louco como isso funcionou. Vamos tentar alguns destes. Vamos tentar ver do que gostamos. Vamos começar com a parede. Estas eram as colunas automáticas. Eu vou vir aqui, e eu não quero que os metadados lá, em vez de ver estes como imagens. Livre-se dessa miniatura. Precisamos da miniatura, mas estas são as nossas fotos. Não vamos colocar um limite nisso só para o caso de carregarmos mais. Eu vou vir aqui para Layout e olhar para isso, ainda é semelhante, mas agora eles realmente mudaram a navegação de como você chegar lá. Vamos mudar a largura da calha, torná-la um pouco menor. Leva um pouco para carregar. Vamos fazer nossas colunas um pouco mais largas, então temos duas colunas de largura. Vamos salvar e ver se gostamos disso. Não adoro como estes não estão perfeitamente alinhados. Mas mais uma vez, outra coisinha útil, só para que saibas, temos este bloco de galeria bem aqui. Em última análise, essas funções e como essas colunas automáticas funcionam serão em grande parte dependentes da ordem das imagens. Você percebe como eu tenho quatro horizontais iniciando. Bem, se eu puxar uma dessas imagens verticais para dizer o topo, então vai mudar completamente a aparência daquela galeria. Então, novamente, eu vim aqui para a Galeria, vamos trazer esse cara aqui. Agora temos uma horizontal e uma vertical. Isso deve mudar totalmente a forma como esta coluna automática inteira parece e alinha para cima. Mais uma vez, se viermos aqui agora, vemos que é um pouco mais escalonado, realmente mudou a aparência da coisa toda. Não temos mais essas incompatibilidades estranhas. Acho que isso é bom por enquanto. Eu acho que isso faz um bom trabalho em mostrá-lo. Vamos entrar aqui e parece que temos Lightbox ligado, que é bom, eu queria adicionar Lightbox. Parece que criamos uma galeria simples, mas queremos voltar à nossa página. Novamente, o que queremos que alguém faça na nossa página Fotos? Bem, queremos exibir as fotos de forma limpa e profissional. Nós terminamos com isso. Alguém pode olhar para as fotos e até mesmo Lightbox elas. Então queremos dar a eles a opção de saber mais sobre Elizabeth ou contatá-la. Então eu vou rolar para baixo para baixo aqui e adicionar o conteúdo da página. Vamos ter um texto mais simples aqui em baixo. Diz: “Saiba mais sobre Elisabeth.” Vamos deixar isso aqui. Na verdade, quer saber? Vamos fazer disto um botão. Acho que um botão seria bom. Venha aqui e crie um botão. Saiba mais sobre Elisabeth. Vou executar um URL de cliques. Acesse nosso Conteúdo e vamos vincular isso à página Sobre. Vamos deixar este centro alinhado. Agora é verde, é terrível, mas vamos chegar ao editor de estilo um pouco mais tarde. Neste momento, eu realmente ainda estou colocando para fora a estrutura no site. Então lá vamos nós. Acabamos de criar uma página de fotografia básica para o nosso site. 49. Como criar uma página sobre: Neste vídeo, vamos criar uma página simples sobre o site Elisabeth aqui. Eu estou indo para vir aqui para Sobre e novamente, nós temos uma página em branco aqui e nós também temos a barra lateral, que este tema tem como padrão. Vou clicar no botão “Configurações”, vir aqui para a barra lateral e escolher Largura Total e clicar em “Salvar”. Agora, a nossa barra lateral desapareceu e temos uma página de largura total. Vamos para o conteúdo da página. Aqui, nós estamos indo para ir, digite Elisabeth Cairnes- Artist Statement e eu vou fazer isso um título 1, bem aqui e então nós vamos vir aqui. Eu tenho este Google Doc onde eu tenho sua declaração artista que foi compartilhada comigo em um Google Drive. Eu vou vir aqui e vou colar isso. Eu vou usar a ferramenta Colar como texto simples e colá-lo aqui e você vai notar que isso acontece em algum momento, especialmente em navegadores menores ou parte deste é cortado. Você percebe que sempre que eu não conseguia chegar ao botão OK aqui em baixo, mas o que eu acabei de fazer foi apertar “Command Minus” e ele diminuiu e “Command Plus” para aumentar o zoom de volta. Isto é apenas uma coisa realmente útil se você alguma vez obter este problema onde parte da janela, que é overflows e isso é só porque honestamente, eu estou trabalhando em um pequeno navegador e eu estou fazendo isso porque eu sei que alguns de vocês experimentar esses mesmos problemas também. Se você estiver em um Windows, isso seria controle menos ou controle mais. Agora, que nós temos isso e a janela redefinida para o meio, eu vou apertar “Ok” e nós apenas colamos isso como texto simples aqui. Parece que temos um erro de digitação, então vou consertar isso. Além disso, você vai notar que às vezes você quer apenas retrabalhar esse espaçamento e há muitas vezes quando ele cola de um documento, mesmo quando você cola sem formatação, você vai ficar muito grande de espaçamento dentro dele. Mais uma vez, temos a nossa declaração básica do artista aqui mas não me lembro quais eram as coisas que eu queria fazer nesta página. Eu quero que ele dê aos visitantes e informações sobre Elisabeth e eu quero que eles sejam capazes de olhar para as fotos ou para entrar em contato. O que eu vou fazer é realmente colocar uma chamada de contato para ação no rodapé para que assim não é para lotado aqui em baixo com duas chamadas para ações. O que eu vou fazer então é, eu não vou fazer o rodapé agora, eu vou criar a chamada à ação para a galeria e então eu quero dizer, Ver Fotografia de Elisabeth e eu vou adicionar o URL. Eu vou para “Conteúdo” e eu estou com um clique na página “Fotos”. Certifique-se de não clicar na “Galeria” caso contrário, você não quer vincular a essa galeria, mas em vez disso clique na página “Fotos” e, em seguida, vamos alinhar esse cara à esquerda e eu provavelmente, acabarei alinhando o outro cara à esquerda, como Bem. Geralmente, em um site você quer alinhar tudo à esquerda ou alinhar tudo no centro ou à direita e ser consistente com isso. Eu só vou ser honesto, eu ainda não decidi totalmente o que eu quero fazer no site ainda assim, às vezes, eu apenas brincar com ele e, em seguida, obter uma sensação, mas eu tento sempre terminar e ter que ser um olhar e sentir consistente e Então criamos uma página básica sobre para Elisabeth. 50. Como criar uma página de contato: Neste vídeo, vou mostrar-lhe como criar uma página de contato simples. Estamos aqui no local da Elisabeth, vamos descer ao Contacto. Mais uma vez temos que se livrar desta barra lateral novamente, é irritante, mas é o padrão, o que ele vai chegar. Clique em “Largura total” ali mesmo. Nesta página do Contato, nós realmente vamos querer colocar uma pequena foto no banner, apenas algo legal para dar às pessoas um pouco de gosto de apenas sua fotografia e seu trabalho. Vamos passar por aqui, escolher uma foto que eu acho que é uma boa representação. Precisamos de uma horizontal, e vamos com esta. Eu acho que sua linha vai ser muito legal e chamar o olho do espectador para baixo para o formulário de contato. Vamos escolher isso aí mesmo. A imagem é enviada. Dê um segundo para processar e redimensionar. Coloque este ponto focal bem aqui, e nós vamos clicar em “Salvar”, e agora temos essa imagem de banner bem aqui na página de Contato. Eu venho até o Conteúdo da Página. Vou digitar “Contate Elisabeth”. Faça disso um título 1. Venho aqui e adiciono um formulário. Largue essa linha de assunto, eu realmente não quero isso. Honestamente, eu não sou um grande fã das caixas Primeiro e Sobrenome, na verdade muitas vezes eu apenas excluir isso. O que eu vou fazer é adicionar uma caixa. Eu vou apenas criar uma caixa de texto aleatória e eu vou digitar “Nome” nele e torná-lo necessário, e eu vou colocá-lo aqui. Basicamente, acabamos de nos livrar daquela coisa de Primeiro e Sobrenome e temos apenas uma extensão de nome. Alguém poderia te dar seu primeiro nome e sobrenome mas é algo que eu prefiro em vez de tentar pedir o nome e sobrenome. Então vamos fazer Elisabeth, nome do formulário será “ElisabethsCairnes.com Formulário de Contato”. Para armazenamento, vamos enviar isto para o endereço de e-mail dela, Connect. Sob Avançado, diremos que para “Diga olá”, algo um pouco mais ameaçador, em seguida, enviar. Do qual eu nunca fui um grande fã. “ Obrigado. Entrarei em contato em breve”. Vamos adicionar esta pequena mensagem pós-enviar para que isto seja o que alguém vê depois de preencher o formulário. Vamos tocar em “Salvar”. Novamente, isso parece muito bom, mas é um pouco largo, então eu crio essa caixa de texto. Diga “Elisabeth Cairnes”, ela também gosta de coisas minúsculas, e isso é simplesmente útil para lembrar agora é que ela queria tudo em seu site em minúsculas. Foi um pedido do cliente. “ .com.” Vamos fazer deste endereço de e-mail um link também. Editar link. Então algo para saber, e isso é apenas um pequeno truque com a web, mas quando estamos fazendo um link e se estamos fazendo para um endereço de e-mail, queremos digitar as palavras “mailto” e pressionar “Shift” e fazer dois pontos, "elisabeth.cairnes@gmail.com”. Nós escolheremos abrir isso em uma nova janela. Agora acabamos de adicionar as informações de contato dela, e vamos colocar isso bem aqui. Talvez em alguns momentos quando eu tiver a conta no Instagram dela e tudo mais, talvez eu possa colocar um bloqueio no Instagram aqui ou uma foto dela. Então vamos adicionar algumas dessas coisas um pouco mais tarde. Vamos guardar isso por enquanto, e acabamos de criar uma página de contato básica para Elisabeth. 51. Como adicionar um logotipo no site: Neste vídeo, eu vou realmente ir em frente e carregar o logotipo dela para o site. Venha até aqui para Design, vá para Logotipo e Título. Vamos mudar isso para fotógrafo ou fotógrafo de belas artes, é o nome do site ou vamos realmente fazer isso o slogan. Realmente estes são irrelevantes, exceto por razões SEO, porque não vamos usá-los com o tema. Vamos adicionar um logotipo e vir até aqui. Então temos este logotipo que tem 200 pixels de largura, e isso deve ser muito bom, ou podemos ir um tamanho acima. Eu vou com isso para mantê-lo pequeno. Nós carregamos um logotipo agora, que isso irá trocar com o site sem código e nós salvamos. Nós vamos apenas fazer o upload do favicon, que se você lembrar, por padrão você tem a caixa de espaço quadrado aqui em cima. Mas nós vamos realmente mudar isso para este favicon de 50 pixels que eu fiz bem aqui. Vamos bater em Save. Isso deve então refletir em nosso site. Isso já está começando a parecer um pouco mais como um site real. Lá vamos nós. Acabamos de adicionar um logotipo e tudo para Elizabeth site e está começando a se juntar. 52. Como editar o footer: Oi. Neste vídeo, eu vou correr e editar o rodapé muito rapidamente porque eu não sou um grande fã do que eu tenho acontecendo aqui em baixo. Ainda diz “Mude este texto” de antes. Vou apagar a segunda caixa porque vamos ter tudo no centro. Vai dizer direitos autorais 2015 Elisabeth Cairnes, e vamos colocar elisabeth.cairnes@gmail.com, colocar um endereço de e-mail lá também. Na verdade, não, estou mudando de idéia sobre isso. Nós vamos ter isso, apenas os direitos autorais na parte inferior. Mantenha isso bem claro e simples, e logo acima disso vamos ter contato com Elisabeth. Vamos fazer disso um link que vai para a página de contato. Eu posso mudar isso, não tenho certeza se eu estou totalmente vendido em, mas é apenas algo sempre que você está projetando, um monte de vezes, você só pensa em por algum motivo, você percebe que aqui diz nenhum link URL. Agora, por algum motivo que não funcionava sempre que eu tentava escolher a página de contato. Tente de novo. Agora nós clicamos nele, você vê que diz contato barra e funcionou corretamente. Lá vamos nós. Vamos salvar e nós apenas editamos o rodapé aqui no site, e rapidamente, voltando novamente, ela não quer letras maiúsculas em seus textos, ela queria todas minúsculas, então vamos manter isso bem simples. É assim que vamos editar o rodapé. 53. Como criar a página de home: Neste vídeo, vamos trabalhar aqui na página de boas-vindas do site. A primeira coisa que eu preciso fazer é apagar toda essa confusão aleatória que eu tenho aqui embaixo. Isso foi das lições anteriores que mostrei a vocês. Excluindo tudo isso, arrastando para o lixo, apenas se livrando dele. Ainda temos uma linha aqui, nos livrando disso também, estamos começando do zero. Tudo bem, o que vamos ter na página inicial, novamente, lembre-se de voltar para o nosso MindMeister. O objetivo é chamar a atenção e ter alguém clicar mais, e depois disso, queremos que alguém vá olhar as fotos. Agora, o que eu realmente vou fazer é puxar o primeiro parágrafo de sua página Sobre e usar isso aqui na página inicial, e ele vai dizer, “Elisabeth Cairnes- fotógrafa de belas artes.” Eu vou fazer isso grande, e então abaixo disso, nós vamos colar isso lá, mas eu esqueci de fazer com o, colar como texto simples, então eu vou remover a formatação sobre isso, e agora você vê o travessões e toda aquela estranheza desapareceu. Nós vamos ter uma pequena chamada para ação aqui em baixo, um botão para, “Ver fotografia de Elisabeth”, e esse link vai para a página Contato e Fotos. Vamos alinhar este tipo à esquerda também. Nós vamos salvar isso, então nós basicamente fizemos uma página inicial básica, mas uma coisa, eu estou realmente indo para trocar esta foto aqui, eu vou manter a mesma foto, mas ela não está compactada, esta versão e aquela retardaria os tempos de carregamento. Quando você não tem fotos compactadas, seus tempos de carregamento ficam muito lentos, então eu vou remover isso e descer para nossas fotos compactadas e nós vamos fazer o upload de uma versão compactada da foto. Agora é muito mais rápido, ele carrega. Lá vamos nós, agora temos uma nova versão compactada. Nós vamos levar o ponto de foco um pouco para baixo, então dessa forma, nós estamos focando aqui na parte real da vida morta desta arte. Vamos clicar em “Salvar” e lá vamos nós, acabamos de trocar a foto e criar a página inicial básica no site da Elisabeth. Agora, a página inicial básica, as fotos, o Sobre e o contato. Isso pode ou não ser final, honestamente com o Squarespace, você vai e volta porque, obviamente, isso não parece como eu quero que pareça agora. Então a próxima coisa que vamos fazer é entrar no editor de estilo, começar a fazer com que pareça bom. Quando fizermos isso, podemos acabar voltando aqui e editando o conteúdo e ajustando o layout para torná-lo adequado aos novos estilos. 54. Estilizando o site: Agora temos todo o conteúdo colocado nas páginas, e neste vídeo eu vou entrar e começar a trabalhar com o editor de estilos. Não é incomum que depois de entrar no editor de estilo que eu acabo mudando temas porque ele simplesmente não está olhando ou não que sinto que eu queria. Eu sempre faço o framework das páginas antes de eu nunca sequer mergulhar no editor de estilo, porque dessa forma se eu instalar um novo tema é realmente fácil e todo o conteúdo da página só vem com ele e eu posso ver rapidamente se isso está funcionando ou não está trabalhando com este novo tema. Nós vamos vir aqui para o Editor de Estilo. Eu estou realmente indo para pressionar Controle menos para que eu possa obter um pouco mais zoom vista e ver se alguém tinha uma área de trabalho maior como isso seria parecido. Eu só vou começar a passar e mexer com este site. Você tem que ter em mente que isso está mudando em cada página, mas vamos manter um site estreito. É um pouco de trabalho que estamos indo para Canvas Setting, na verdade eu vou tentar Site Width. Eu não gosto de como isso é cortar essa foto, então eu vou ver se há algo que eu possa fazer sobre isso. Canvas Offset, eu realmente não quero um Canvas Offset. Preenchimento em lona. Mais uma vez, eu não sei se eu quero uma lona acolchoada neste caso. Fronteira? Não, nós também não queremos isso. O que estamos realmente indo para com o estilo neste site é um estilo muito limpo e minimalista. Geralmente ajuda a ter algumas referências e tudo o que você está olhando de antemão. Vamos fazer nossas linhas e decoração um cinza muito claro. Nós realmente não gostamos desses delimitadores aqui em cima, então nós vamos apenas nos livrar deles. Delimitador é aquela pequena barra entre a navegação. Muito feliz com o fundo do cabeçalho, a imagem de fundo nós realmente não vamos colocar nada lá. Se colocássemos uma imagem de fundo no cabeçalho, ela seria padrão para isso, mas em vez disso, nós a projetamos para que a miniatura da página seja a imagem. A cor do título do site, novamente nós não vamos mexer com isso realmente porque isso está sendo substituído comprar este EC. Título da página. Na verdade, não vamos mostrar isso. Altura da área do banner. Isto é algo com que provavelmente quero brincar. Novamente, para que eu possa escolher o tamanho que eu quero que isso fique. Eu realmente quero que ele abelha pequeno e estreito porque todas as fotos aqui são paisagem. Vamos tentar mantê-lo um pouco curto assim. Excelentemente clicou aqui. Cor de sobreposição. Mais uma vez, queremos que o conjunto seja transparente, não queremos nada lá. Vou manter o conteúdo do banner vazio. Vamos fazer a miniatura da página como o banner. Eu poderia estar errado sobre isso, mas eu acho que se eu atualizar esta página, essa imagem deve ser redimensionada. Às vezes é um espaço quadrado que você realmente tem que atualizar. Lá vamos nós. Você tem que atualizar ou salvar e voltar para realmente ver as alterações realmente entrando em vigor. Isto é bom. Isto é o que eu estava procurando. Muito menor, por isso estamos a aproximar-nos. Volte para o Editor de Estilos. Veja que fizemos o cabeçalho que estamos agora na cor do link de navegação, e a cor do mouse vamos torná-lo esta cor rosa bem aqui, que eu vou chegar ao Photoshop e puxar isso. Isso é realmente muito útil se você tiver algumas técnicas básicas do Photoshop. Eu recomendo usar o Photoshop regularmente para extrair essas cores href de suas imagens. Mostrando a vocês um pequeno truque aqui, para aqueles de vocês que não são úteis com o Photoshop, não se preocupem. Você pode olhar isso, mas eu vou usar a ferramenta conta-gotas. Pegue essa cor que eu quero, eu clico lá, e eu tenho o pequeno código hexadecimal aqui. Copie isso. Volte para o Squarespace e nós vamos fazer isso a cor do pairar. Na verdade, eu vou torná-lo a cor ativa também. Isso é bastante leve, na verdade, para texto. Puxe isso um pouco mais escuro. Não se safar com coisas sutis com texto, com mudança de cor porque um monte de texto honestamente é tão fino, que é muito difícil dois ver a cor porque é tão poucos pixels. Vou voltar a zoom daqui a pouco. Eu gosto disso. Acho que isso parece muito bom. Temos o nosso espaçamento de navegação, que, novamente, queremos um pouco de espaço, mas não muito. Pode fazer este logotipo menor ou torná-lo enorme se quisermos. Mas vamos mantê-la bem pequena e simples. Mantenha a navegação acima do banner. Vamos mover o centro dele. Isto pode ser uma quebra de negócio para mim com este tema. Mas eu quero que este ícone talvez se sente lá em cima. Mas vamos continuar por enquanto e preenchê-lo. Vou trabalhar este espaçamento de navegação um pouco mais. Acho que vamos fazer isso um pouco maior. Isso é um pouco mais perto. Tela de fundo estamos felizes com a imagem de fundo. Queremos mudar todas as nossas rubricas. Há duas fontes que eu estou olhando. Eles não têm aqui, então vamos com Josefin Sans, uma fonte limpa muito agradável. Vamos mudar a espessura para ser leve e fina. O texto é um pouco maior. Nós só vamos fazer tudo em minúsculas porque nós só queremos todos os nossos títulos em minúsculas. Ou eu o espaço só um pouquinho. Rubrica 2. Agora eu não sei se eu estou usando um título 2 no site. Na verdade, não estou agora. Mas só por uma questão de consistência, quero pelo menos colocá-lo na mesma família de fontes, caso alguma vez faça compras. Seja o que for agora eu não estou usando um título 2 ou título 3 no site. Que vamos fazer com que sejam justos. Vamos fazer tudo isso da mesma cor cinza que temos aqui. Novamente fazendo a captura deste número hexadecimal. Pule e volte aqui, vire todo esse texto cinza. Eu provavelmente deveria fazer essa navegação corresponder, não deveria. Então também às vezes você não tem um número hexadecimal. Nele faz RGBA e A significa alfa, que é um nível de transparência. Então escreva agora se eu for e eu mudar esse valor para um 0,9 torna-se mais espesso. Mude para um ponto um, e é quase todo o caminho para ver através. Ou você pode usar um controle deslizante aqui para ajustar a transparência também. Deixaremos o hexadecimal lá. Nós temos essa cor planejada lá fora. Agora essas cores combinam com a cor do link do corpo, que podemos ver aqui em baixo em nosso rodapé. Vamos usar a mesma cor de link que estávamos usando em nossa navegação. Então nós viemos aqui, colamos aquele cara, e de alguma forma eu sinto falta do C nele, então eu vou ter que voltar e consertar isso. Na verdade, vou fazer o hino ficar um pouco mais escuro. Blockquote, novamente não estamos usando aqui. Espaçamento de página, este é um grande, é quanto espaço está entre o banner, e nós vamos ter cerca de 21 pixels, Isso parece muito bom para mim. Texto do rodapé, novamente, precisamos ajustar isso para ser a mesma fonte e podemos escolher o Tamanho da Fonte e a largura, e Altura da Linha, Espaçamento da Letra, tudo o que é bom. Mantenha o centro alinhado e escolha se queremos esta pequena borda e o rodapé e eu realmente gosto disso, eu vou deixar aquela fronteira lá. Tamanho do ícone social, não temos nenhuma conta de mídia social conectada agora , mas se o fizermos, podemos ter a cor aparecer corretamente e vamos ter ícones normais de mídia social. Vamos colocá-los no Bottom Only, isso é apenas se decidirmos usá-los. Blog, nós não vamos ter nenhum blog ou qualquer coisa aqui agora, então eu vou totalmente pular isso, mas nossos botões, isso é muito ruim agora. Este botão verde brilhante não é o que eu quero, então vamos voltar aqui, pegar essa cor cinza, pegar essa cor de botão bem ali. Vamos fazer um esboço e vamos fazer a praça. Nós temos este botão muito simples, boa aparência agora, e nós queremos mudar essa fonte para Josefin Sans para que ele novamente corresponde com as outras coisas e nós também vamos transformar tudo em minúsculas, e sim, então lá nós Vá. Acabamos de fazer nosso estilo básico em nosso site aqui. Vamos ver como isso está olhando quando nos deparamos com todas essas páginas diferentes. Mais uma vez, venho aqui e honestamente, vou consertar este rodapé bem rápido. Está me incomodando agora, então temos aquele Save bem ali. Há contato Elizabeth no fundo, é muito sutil, mas está lá. Talvez eu acabe mudando isso. Não amando esta justificativa esquerda, vamos colocar todas essas coisas centro e isso novamente, o que eu estava falando com apenas tentando descobrir o que você quer no site, às vezes você só tem que brincar com ele um Um pouquinho. Vamos mover todas essas coisas para o centro, e voltar a ouvir. Acho que nunca editei meu texto corporal, alguma forma pulei isso. Eu vou voltar aqui para o editor de estilo, editar esse conteúdo menor, o Body Texts, que eu vou tentar Josefin Sans, mas pode ser um pouco demais, talvez seja grande o suficiente. - Sim. Na verdade, acho que funciona, estou gostando disso. Nós vamos fazer a mesma cor cinza que o cabeçalho embora. Podemos realmente transformar texto? Não, não podemos, então vamos deixar isso como está. Novamente, isso está começando a parecer um site decente aqui. Eu também não fiz nossos estilos de navegação. Novamente, às vezes um pouco de ida e volta. De alguma forma, perdi o ajuste da fonte de navegação. Venha para esta Navegação, novamente, vamos colocar isso como Josefin Sans e torná-lo tudo minúsculo, fonte um pouco maior, torná-lo mais fino embora. Provavelmente ainda é um pouco grande demais e estão começando a gostar de como isso parece lá. Mais uma vez, estamos chegando um pouco mais perto. É um monte de volta e quarto. Só estou entrando aqui e vendo o que precisa ser mudado. Venha para a página de fotografia. Aqui temos toda a fotografia aqui nestas colunas de automóveis. Eu vou ver se isso aprender mais sobre Elizabeth funciona e isso nos leva até aqui para a página sobre. Podemos ver sua declaração de artista, isso nos leva de volta para a fotografia. Botão de contato na parte inferior nos leva para a página de contato e, novamente, você vê este redimensionado também. Honestamente, na verdade, eu gostaria de uma foto como esta na página sobre também. Nós não tínhamos aqui, então eu vou voltar, vir para minhas páginas, ir para cerca e eu vou fazer upload, renderizar este aqui, eu realmente gosto desta foto, e nós vamos mudar o ponto focal para esta cadeira para que ele não seja cortado em tudo. Em seguida, atualize para ter certeza de que isso está posicionado corretamente, e lá vamos nós. Acabamos de adicionar agora um básico sobre página para isso, sua fotografia, seu contato, as boas-vindas, e sim, a página de fotos. Temos apenas em uma questão de provavelmente menos uma hora montar o que é um site muito bonito. Espero que estejam a ver o quão rápido este processo foi. Ajuda você a perceber o potencial do Squarespace e a rapidez com que você pode realmente trabalhar e montar algo nessa plataforma. 55. Como lançar seu site ao vivo: Você só me vê projetar um site inteiro, e construiu todo o caminho do zero. Bem, neste vídeo, eu vou mostrar a vocês como realmente lançar esse site e colocá-lo ao vivo em seu domínio. 56. Como lançar seu site com Launching: Neste último vídeo aqui, vou mostrar-lhe como lançar um site ao vivo. Vou mostrar-te especificamente como fazer isso quando tiveres uma conta no GoDaddy. Mas se você não tem uma conta GoDaddy, eu vou te mostrar o básico de como fazer isso também. Há dois artigos que são realmente úteis. No help.squarespace.com/guides, há um mapeamento de domínio com o artigo GoDaddy e o mapeamento de domínio do Squarespace. Se você pesquisar o mapeamento de domínio do Squarespace, você receberá estas instruções gerais. Isso mostrará como você faz isso se o URL do seu site for comprado fora do GoDaddy. Mas vou te mostrar o GoDaddy por enquanto, porque é simples e muito fácil de trabalhar. Mas honestamente, vou andar por esta página e dizer a vocês como fazer isso aqui. Mas eles mudam isso a cada poucos meses. O Squarespace está sempre procurando maneiras de melhorar, maneiras de tornar as coisas mais rápidas. Mesmo que eu grave este vídeo, em alguns meses, pode ser totalmente diferente. Eu sempre recomendo verificar essas páginas antes de lançar um novo site ao vivo. A primeira coisa que vamos fazer é ligar o nosso domínio. Nós vamos descer aqui, ir para “Configurações”, e ir para “Domínios”. Vamos ligar um domínio existente. Vamos ligar elisabethcairnes.com. Vamos ver se temos essa Verificação de Propriedade. O que precisamos fazer aqui nessas coisas vermelhas, mas não vamos nos preocupar com isso agora ou devemos voltar ao nosso tutorial e ver qual é o próximo passo. Já fizemos tudo isso. Eu fiz login na minha conta GoDaddy aqui em cima, e eu vou ir em frente e lançar o domínio, que é o próximo passo. Eu vou descer aqui para meus domínios, ver elisabethcairnes.com, apertar “Lançamento”. Uma vez que eu estiver aqui, eu vou para “DNS Zone File” bem aqui. Eu vou voltar para verificar minhas instruções e obter os valores que eu preciso. Bem, novamente, onde ele está me mostrando para clicar no arquivo de zona DNS, e eu vou descer aqui e adicionar um registro. Voltando aqui, vou adicionar um disco. Vou adicionar um registro CNAME, que é, novamente, e me diga para selecionar “CNAME” para o tipo de registro, e certifique-se de que é um www. é a caixa de host e aponta para esta extensão.squarespace. Então www, e nós vamos fazer o tempo para viver meia hora. Vamos acertar “Finish”. Nós vamos notar que ele realmente não fez nada até que nós batemos em Salvar. Mas vou descer aqui e ver o que diz. Preciso adicionar um segundo CNAME. Vou voltar aqui, clicar em “Adicionar um registro”, adicionar outro CNAME ou um host. Preciso colar esse código exclusivo, então volto aqui ao meu site do Squarespace, copio esse código que está na caixa Verificar Propriedade, e esse é o nosso host. Eu volto aqui, e eu vou copiar que ele vai apontar para verify.squarespace.com, tempo de viver meia hora, e vamos clicar em “Terminar”, e acabamos de salvar. Preciso clicar em “Salvar alterações”. Um dos registros tinha alguns problemas. Esta é uma questão que você provavelmente enfrentará. Isso é que eu já tinha um registro www.cname. Se eu vir aqui para CNAMEs, eu já tenho este. Tentei criar um, mas já havia um lá. O que eu preciso fazer é realmente editar este registro, então eu estou sob CNAME Alias, vir aqui para www., e voltar e pegar essa extension.squarespace.com do nosso tutorial, e fazer isso uma meia hora, e pressione “Concluir”. Agora, se eu salvar esses arquivos, o arquivo de zona foi atualizado. Olhe para isso. Mas ainda não terminamos. Nós fizemos os CNAMEs, nós os salvamos, agora precisamos adicionar um registro. O que nós vamos fazer é ir para “Adicionar registro”, “Um registro”, e então nós vamos ter o símbolo @, e ele vai apontar para este URL bem aqui. A primeira coisa que vou fazer é apagar o antigo disco A porque não precisamos mais disso. Vou guardar isso, adicionar um disco A aqui, e depois @, colar lá, meia hora. Então eu vou realmente adicionar um punhado. O que eles fazem é basicamente dar-te estes quatro discos A. Você vai colocá-lo lá e é prova de falhas no sistema deles. Cole aquele novo ali, adicione outro, volte aqui, pegue esse cara, cole-o ali, adicione outro, volte aqui, e termine. Acabamos de adicionar quatro registros A que devem coincidir com isso. Vamos tocar em “Salvar”. Então eu preciso completar a verificação do domínio. Novamente, GoDaddy, isso geralmente acontece muito rápido. Outros provedores de domínio, pode levar alguns dias para fazer isso. Vou voltar aqui e clicar em “Verificar propriedade”, verificação é bem-sucedida, verificar novamente. Mais uma vez, pode levar 72 horas para esta parte passar. Mas vamos testar isto e ver se funciona. Vá para elisabethcairnes.com. Olhe para isso, acabamos de lançar nosso novo site ao vivo. Outra razão pela qual terei o GoDaddy é que é incrivelmente rápido. Eu conheço o favicon, tudo está funcionando aqui em cima, e todo o nosso site está funcionando exatamente como queríamos que fosse. Assim, em menos de uma hora, colocamos um site muito bonito. Isso é tudo o que realmente precisamos fazer no mapeamento de domínio e tudo o mais lá. Novamente, se você não estiver usando o GoDaddy, confira este guia de Instruções Gerais de Mapeamento de Domínio. Isso orientará você sobre como fazer isso com outros provedores de domínio. 57. Próximos passos: Obrigado por assistirem a este curso e espero que tenham muito valor. Certifique-se de enviar seu site na seção do projeto abaixo, tirar algumas capturas de tela e carregar o URL para que todos possam ver o que você está trabalhando. Também certifique-se se você tiver alguma dúvida, envie-as através do curso aqui e eu farei o meu melhor para responder, eu posso não ser capaz de chegar a todos, mas eu vou fazer o meu melhor para responder a quaisquer perguntas que você possa ter. Além disso, se você estiver interessado em aprender mais sobre mim ou seguir meu blog, você pode visitar meu site @jake -jorgeven.com. Eu blog regularmente lá e eu tenho um canal inteiro do YouTube focado em tutoriais do espaço quadrado também. Mas acima de tudo, espero que fora disso, você tenha conseguido construir um site que vai ajudá-lo a impulsionar sua marca, seu negócio, sua missão ou o que quer que seja que você está tentando fazer, que este site vai ajudá-lo a avançar em alcançar seus objetivos. Obrigado pessoal por ouvir, e espero que você financie muito valor neste curso e se você for gentil o suficiente, por favor deixe um comentário cinco estrelas para que outras pessoas possam encontrar este curso e ver como ele é valioso também.