Transcrições
1. Introdução: Olá, sou o Kyle. Tentei passar o máximo de tempo que podia
passear pelo país com a minha mulher e os meus cães. Tomando tudo o que há para ver, comendo rosquinhas veganas e bebendo muito café. Mas quando não estou fazendo isso, passo meu tempo construindo sites para pequenas empresas no Squarespace. Na verdade, eu construí mais de 100 sites
do Squarespace somente nos últimos três anos para clientes em uma ampla variedade de indústrias, desde construção até móveis comerciais, padarias e até organizações de resgate de animais. Ao longo da construção desses muitos sites do Squarespace, criei um conjunto de trechos de código CSS que instalo em todos os meus sites desde o início para garantir que tudo fique do jeito que eu gosto. Eu não sou um desenvolvedor, mas eu descobri alguns CSS menores para ajudar a limpar alguns dos itens no Squarespace que eu acho que poderiam ser melhores e eu vou mostrar a vocês como fazer isso também. Esta classe é para qualquer pessoa que projeta ou gerencia sites
do Squarespace e quer que eles tenham uma aparência de alto nível. Você não precisa saber como codificar, você nem precisa saber o que é CSS. Eu lhe dou todo o código que você precisa em um documento PDF para download. Tudo o que você tem que fazer é seguir as instruções para obter o visual que você quer. Para seu projeto de classe, encorajo você a adicionar pelo
menos três desses trechos a um site do Squarespace que você está criando ou que gerencie e compartilhe um link para o site na página da classe para que todos possamos ver seu trabalho. Esses snippets CSS funcionam em todos os planos do Squarespace. Tanto quanto sei, todos os modelos do Squarespace. Tudo o que você precisa para começar é um site do Squarespace, incluindo um teste gratuito seria bom e o download de PDF fornecido que contém os trechos de código que você instalará. Assim que tiver esses itens prontos, vamos começar.
2. Estilos de Rule horizontais: O primeiro Snippet CSS que vamos inserir será para o estilo de regras horizontais, ou como o Squarespace gosta de chamá-lo, um bloco de linha. Blocos de linha ou regras horizontais são comumente usados para separar texto ou seção de títulos, ou apenas criar espaço em um site. Você pode ir em frente e ir para qualquer página no seu site, inserir um bloco. Vai ser o bloco de linha. Vou colocar dois deles aqui para que você possa ver. Agora, os blocos de linha do Squarespace só permitem que você tenha 100% de preenchimento horizontal e eles geralmente são bem finos, cerca de um pixel ou dois, e então nós vamos inserir um pequeno trecho de código onde você pode mudar a cor a espessura e a largura. Em muitos dos templates no Squarespace, você já pode mudar a cor, mas alguns deles, você nem pode fazer isso. Uma vez que você tem esses blocos de linha em sua página, vá para o download CSS que eu forneci, estilo de regra horizontal. Vá em frente e destaque esse código, copie-o, volte para o Squarespace, você deseja ir para a guia Design, ir para CSS personalizado e, em seguida, basta colá-lo. Lá, você vê o que aconteceu quando colamos aquele CSS lá. Agora, você pode alterar a espessura do mesmo alterando a altura da primeira linha. Se você quer fazer realmente grosso, você pode colocá-lo até, digamos, 15. Ou como eu disse, você poderia ir para um mais padrão três ou mais. A largura aqui pode ser feita em porcentagem ou pixel. Você poderia ir e colocá-lo em algo como 200px. Agora, é importante notar que quando você fizer isso, alguns dos modelos automaticamente tornarão isso justificado, que você
possa alterar esse último comando de margem com base nisso. Você pode tirar isso completamente. Veja, eu estou trabalhando com um modelo que não tem ele deixado justificado, então quando você colocá-lo em um comando de margem, ele realmente justifica mais para a esquerda. Mas se você tiver um modelo com o qual está trabalhando que o justifique quando você fizer a largura menor, você precisará manter essa última margem um lá e, em seguida, a margem esquerda 25 por cento fará com que seja centralizada. Mas para o meu, vou manter isso de fora. Esta cor de fundo é onde você pode escolher uma cor hexadecimal ou você pode simplesmente digitar uma cor padrão, se quiser, como vermelho. Lá vai você. Você pode usar isso em, bem, sempre que você colocar isso em seu site agora, você pode ir e adicionar outro. Será exatamente o mesmo. Vamos colocar um aqui em cima, acima disso, e lá vai você. É assim que você vai estilizar seus blocos de linha de regras horizontais no Squarespace com este snippet simples CSS personalizado.
3. Titles de galeria de Wrap: O segundo snippet CSS que vamos adicionar ao site para superestilizar
qualquer site genérico do Squarespace é um comando para envolver os títulos da grade. Agora, se você adicionou galerias de grade a um site do Squarespace e teve legendas ou títulos maiores que a largura da foto em si, você perceberá que você rapidamente obtém essas elipses aqui e ela corta. O que vamos fazer é inserir um pequeno trecho CSS que irá
envolvê-los e mostrar como qualquer título completo antigo. Você vai para a guia Design no Squarespace, vá para CSS personalizado. Vá para o download CSS. Eu forneci, embrulhe títulos de grade. Vá em frente e destaque esse código. Volte ao Squarespace e cole-o. Você vai ver o que isso faz. Em seguida, ele adiciona o comando, que com o espaço em branco normal permite que ele envolva e você começa a ver a legenda completa lá. Título completo. Você pode mudar a altura da linha aqui se você quiser tornar essas linhas um pouco mais apertadas, talvez 1,2 ou subir para 1,8 se você acha que parece mais limpo. Mas de qualquer forma, agora você tem todas as suas legendas aparecendo. Isso acontecerá independentemente do tamanho de tela que você estiver escolhendo. Se você for a um cheque de celular, você ainda verá. Ele funciona muito bem.Deve notar-se que se você estiver olhando para ele no celular aqui, você pode ter algum problema se você tiver essas linhas onde há duas imagens on-line e uma vai para duas linhas e a outra não. Ele vai jogar fora o espaçamento aqui para bater que para baixo para outra line.Eu realmente tenho um snippet CSS diferente chegando mais tarde que vai cuidar disso bem e fazer as coisas olhar realmente limpo no celular. Agora vamos colocá-lo de volta na área de trabalho. Você pode ver que agora você pode visualizar todos os seus títulos. Certifique-se de salvá-lo.
4. Largura de botão consistentes: Nosso terceiro snippet CSS, vamos adicionar vai ser uma linha rápida de código, a fim de padronizar as larguras dos botões. Se você estiver usando qualquer botão em seu site, não importa o tamanho que eles são, você notará que espaços quadrados configuração automática para os botões é fazê-los padrão para uma largura de qualquer que seja o tamanho do texto que você colocar nele, então, além de se você tem espaçadores em torno dele ou se ele é realmente longo e ele vai para baixo para uma segunda linha, ele vai ser a largura do texto que está dentro dele e você pode ver isso aqui. Quando você tem dois na mesma linha ou mesmo na mesma página que estão variando em comprimento, ele pode parecer um pouco desleixado como nós temos aqui. Então tudo o que vamos fazer é adicionar uma linha rápida de código que padroniza isso. Como de costume, vamos entrar no termo CSS personalizado aqui. Vamos ao documento que forneci. Nós vamos para “Botão Largura” aqui, copiar e colar esse código. Volte para “Squarespace” e
insira-o lá e você verá que eles estão agora padronizados. Você pode fazer esse código com base em uma largura de porcentagem como temos aqui, 80, ou você pode alterá-lo para uma quantidade de pixels como 400 digamos. Agora você verá que quando você alterar a quantidade de pixels, ela será estática nisso. Assim, você pode ter alguma sobreposição aqui dependendo do tamanho da tela que não é ideal. Então eu recomendo usar uma porcentagem e eu também recomendo mantê-la mais perto ou pelo menos abaixo de 90 ou mais por cento. Caso contrário, você terá alguns problemas de espaçamento quando chegar ao celular e tudo mais. Você pode usar isso em qualquer um dos blocos, qualquer um dos tamanhos de botão, mas se você quiser torná-lo apenas para um tamanho, você pode adicionar um traço duplo após o elemento e, em seguida, o tamanho do bloco, tão pequeno e você vai notar que eu sou usando blocos médios aqui para que você note quando eu colocar o pequeno em, ele realmente muda eles de volta ao normal porque nós estamos aplicando
apenas para o pequeno, mas se eu entrar médio aqui você vai vê-lo voltar lá. Então, esta é uma ótima maneira de padronizar todos os seus blocos de botões em seu site e fazer tudo parecer agradável e limpo.
5. Remove a fenação: Para nosso quarto snippet CSS, vamos inserir um pouco de código que irá se livrar
dessas hifenações traquinas que o Squarespace faz em telas menores. Muitas vezes, você verá isso se estiver usando uma fonte grande, um H1 ou H2 que você definiu para ser grande frequentemente na página de aterrissagem ou cabeçalho. Quando você está realmente tentando fazer um impacto sobre o leitor com alguma fonte grande e frases simples curtas, que é super comum nos dias de hoje, e geralmente parece muito bom. O problema com o Squarespace é quando você tem textos grandes como este com a execução de sua visão arquitetônica, que é algo que eu usei no site de um cliente. Você vai para a visualização móvel, você verá que ele hifenia as palavras naturalmente e você não pode realmente escolher onde isso acontece obviamente. É algo que o Squarespace faz. Mas eu tenho um código simples aqui. Nós estamos indo apenas para ir para Design como de costume, seção CSS personalizado. Nós vamos para o Download que eu forneci, ir para Remover Hifenização, copiar esse código, voltar aqui, colar o CSS, e olhar para isso. Lá se vai sua hifenização. Ele desapareceu. Você pode fazer isso. Você verá que isso é para fonte regular, o H1, o H2, os H3s. Se por algum motivo você queria que eles hifenissem em alguns tipos de fonte e não em outros, você pode eliminar alguns deles, mas por enquanto você tem tudo esclarecido você não veja mais essa hifenização em telas menores.
6. Forçar linhas de imagem em galerias de grelhas em móveis: O quinto snippet CSS que eu forneci e que onde vai estilizar nossos sites Squarespace com, vai ser um trecho que eu acho que é um recurso que é super necessário no mundo de
hoje, onde estamos tão acostumados a rolar verticalmente em nossos telefones para visualizar produtos e imagens, e esse é um comando para forçar todas as galerias de grade em linhas de imagem únicas em dispositivos móveis. Se você já trabalhou no Squarespace antes, saberá que quando tiver uma galeria de grade aqui como tal, ao acessar a visualização móvel, você será automaticamente forçado a ter duas imagens por linha, e se estiver usando o trecho de código que eu forneci em menos de dois para envolver seus títulos para baixo para a segunda linha ou terceira linha, que pode jogar fora algum espaçamento aqui no celular. Mas temos uma solução para ambos,
que é forçar uma imagem por linha para que cada imagem obtenha o máximo de espaço possível e forneça uma imagem clara aos seus espectadores. Nós temos isso, vamos voltar para a visualização desktop porque Squarespace não gosta quando eu adiciono o código na visualização móvel. Mas nós só vamos para o documento que eu forneci. Para linhas de imagem única em galerias de grade móvel. Vá em frente, copie e cole isso. Eu já tinha uma cópia e então eu vou entrar aqui e colá-la. Você não verá nada aqui quando estiver
na área de trabalho porque eu tenho essa consulta de mídia definida em 640 pixels, então ela começará a funcionar quando você estiver abaixo de 640 pixels. Você pode mudar isso como quiser. Mas eu provavelmente recomendaria que você ficasse em torno de 640. Se você quisesse ir para telas muito pequenas, você poderia fazer algo como 320. Se você queria subir para abranger tablets ainda menores, você pode ir para algo como 960. Mas eu gosto do 640, acho que é um bom ponto de ruptura. Agora que você tem isso aí, se você apenas ir e olhar para a visualização móvel, você verá que estas são agora todas linhas de imagem simples e então você tem fotos muito mais limpas e
maiores, suas legendas parecem melhores, e você tem Tenho tudo pronto. Isso é realmente ótimo para qualquer foto de produto, bem
como apenas fotos que você tem.
7. Legendas de imagem central: O sexto e último trecho de CSS que vamos inserir em nosso site do Squarespace é uma linha de código muito simples projetada apenas para centralizar legendas de imagens, Squarespace usa como padrão as legendas de imagem alinhadas à esquerda. Então, como você verá aqui, eu tenho duas imagens na página. Você pode ver as legendas de imagem pequenas aqui são alinhadas à esquerda e isso apenas parece um pouco estranho especialmente quando você tem imagens com fundos brancos e você não pode dizer a largura que eles vão. Como neste caso aqui, parece um pouco fora de onde deveria estar. Então eu vou entrar na guia Design novamente, CSS
personalizado, no mesmo lugar que temos feito todos eles. Vá para o documento para download que eu forneci. A legenda da imagem central, essa é a última. Vá em frente e copie isso. Cole diretamente no CSS e você verá que eles se mudaram para o centro lá. Isso é tudo que você precisa fazer para mantê-lo centrado. Se você quisesse alinhá-lo direito para algum toque de estilo, você poderia apenas substituir este centro aqui com direita, e lá vai você. Mas eu só recomendo que se você estiver fazendo isso por um certo motivo, isso funcionará melhor se você não tiver fundos brancos. Como você pode ver, isso joga fora um pouco se você está indo para a esquerda ou direita alinhado. Então, como eu disse, basta ir com o centro. É uma ótima maneira de fazer com que tudo pareça consistente em todas as suas imagens e aí você tem. Isso é tudo o que falamos sobre isso em nossos seis snippets CSS para sites do
Squarespace que ajudam você a usar um super estilo ou um site genérico. Se você gostou disso, aprendeu alguma coisa, aperte o botão Seguir do meu perfil, pois vou dar mais aulas do Squarespace chegando. Obrigado por assistir.
Kyle Domer, Squarespace, Email Design & Road Trips
