Transcrições
1. Apresentação: Olá, cuidado da Karen, co-criativa aqui neste curso, faremos um site totalmente
personalizado do Squarespace. Então, se você quiser o site do
Squarespace, mas quer que ele seja um
pouco mais polido e profissional, e
não apenas
o layout do cortador de biscoitos que vem com parte
do conteúdo de demonstração Esse é o squarespace. Este curso será para você. Você não
precisa ser uma pessoa avançada do site para
poder fazer isso. Squarespace é
bastante fácil de usar e contanto
que você saiba onde ir para Personalizar certas coisas e como adicionar certos
elementos próprios. Você definitivamente
será capaz de fazer isso. Eu sugiro que você
tenha sua cópia e suas imagens já
selecionadas para o seu site. E vamos
começar sua conta no Squarespace,
adicionar suas páginas, trabalhar com o conteúdo de
demonstração e personalizá-lo por meio algumas coisas muito básicas como código alterações para que você possa tornar o site totalmente personalizado. Eu vou te levar
por cima do meu ombro e te
mostrar algumas opções. Esses são sites
do Squarespace totalmente personalizados. Normalmente começo
com um layout de demonstração, mas não fico com eles. Então, sim, deixe-me me livrar das
minhas imagens. Está cortado. Então, novamente, este é para sites de
cabeleireiros.
Muito diferente. O primeiro foi balé. Este é um técnico de saúde. Mas, na verdade, eles não
se parecem com o
conteúdo dentário em que baseiam porque são
totalmente personalizados. Então, vou mostrar como fazer isso no próximo vídeo. Assim que
começarmos, configuraremos sua
conta do Squarespace e começaremos. Tudo bem, nos vemos lá.
2. Como começar Squarespace: Tudo bem, então aqui
estamos começando nesta pequena parte, vou mostrar a
você como colocar sua
conta do Squarespace em funcionamento. Vamos lá. É
claro que você vai para squarespace.com. Tudo bem, vamos
ao meu vídeo aqui. Então, você vai querer
clicar em começar. Se você ainda não tem
uma conta do Squarespace. Isso o levará direto
para este criador de modelos. Para mim, eu vou fazer login
e te encontrar nesta parte. Então, eu estou logado. Mesmo processo, criar site, modelo
em branco ou
outro modelo. Vou acertar outro modelo. E agora estou de volta onde você está. Se você clicar em começar, é aqui que você
escolherá um modelo e, novamente, você será personalizado
completamente. Portanto, não fique muito preso a isso. Basta escolher algo
que você acha é agradável e limpo. Se é isso que você
quer ou tem um pouco mais de
personalidade, eles querem isso. Assim, você pode percorrer e
navegar o quanto quiser. Eu vou em frente. Eu vi esse com o
qual quero começar. Então você também tem uma
prévia se quiser
ver algo mais de perto. Mas, novamente, estarei
personalizando isso completamente. Então não se
sinta casado, tem que
estar casado com isso. Eu só vou
configurar o conteúdo de demonstração. Então esse é o título do seu site. Normalmente, recomendo que o título do seu site
descreva sua empresa. Estou fazendo isso para um cliente. OK. E no Sul, você também pode
mudar isso mais tarde, então não se
preocupe muito com isso. Isso o guiará por
um tutorial muito rápido. Você pode passar por isso rapidamente porque
mostrarei tudo o que
você precisa saber. Tudo bem, então agora você basicamente
tem o seu site configurado. Primeiro, eu gosto de
entrar em marketing, SEO. Vamos garantir que o
título tenha a aparência
que você quer, certo? E então é isso mesmo. Você configurou seu site. Se você quiser conectar
um domínio imediatamente, você pode fazer isso aqui e seguir as etapas para
obter um domínio, ou isso
significa que você é o proprietário? Mas, fora isso, depois de clicar
e obter esse modelo, você terá
seu site iniciado.
3. Como adicionar páginas: Tudo bem, então, se
você assistiu a qualquer dos meus outros tutoriais do site, sabe que primeiro
gosto de começar
criando todas as páginas do
meu site. Isso me dá a capacidade de estilizar com precisão o
cabeçalho
e o rodapé e apenas
percorrer e personalizar todas as minhas
páginas rapidamente. Então, é apenas parte do meu processo. Você não
precisa absolutamente começar aqui. Mas o que eu faço em nosso site de
demonstração aqui é novamente, eu apenas vou em frente e crio, certifique-se de ter todas
as páginas que eu quero. Então, isso estará na
guia Páginas. E você precisará ter certeza de
que tem todas as páginas. Então, para mim, a página inicial, ok. Na verdade, vou
deletar isso. Não consigo sair da página inicial e
vamos criar uma nova página inicial. E, novamente, comece
com o layout. Vamos começar com isso.
Esta será página
inicial como a página inicial. Você, este ícone de engrenagem
definido como página inicial. Ok, então eu preciso de uma página de aula. E você quer ter certeza de que tudo isso não precisa ser o mesmo. O título da página é como
a página aparece aqui
no título de navegação é como ela aparecerá no menu de navegação. E a lesma é o que
você digitaria. E então eu preciso da minha página sobre. Vou ligar para o corpo docente. É aqui que pode ser
útil já ter seu café mapeado para que você
saiba exatamente o que precisa. Serviços. Eu vou fazer isso
ser aulas particulares. E ao editá-los, você notará que
os pequenos bads de demonstração que aparecem ao lado de cada
página desaparecerão. Você tem um nome de duas palavras. É melhor hifenizar. Eu vou em frente
e deletar tudo
isso de conduta aqui em cima. E eu vou fazer isso. Isso fica junto. Demonstração de lá. Eu preciso de outra página, que eu mencionei que
não vou fazer ainda. Então, para mim, se eu
precisar adicionar essas coisas para
ir para a mesma pasta. Desculpe, essa não era a
pasta de pastas aqui embaixo. Então, agora essas coisas que você
verá estão em uma lista suspensa. Esse é o meu contato
não está vinculado porque contextualiza o botão,
mostrarei como
soletrar isso na parte do
cabeçalho. Mas, essencialmente,
ouvir para criar. A próxima coisa que eu preciso
é de um calendário de eventos. Então isso vai ser
uma página do calendário. Eventos que serão um pouco diferentes. Não quero isso. Tudo bem, então
essa é a ordem que eu quero. Tudo bem, então temos
nossas páginas aqui. Vamos analisar e personalizar
cada um deles um por um, começando no próximo vídeo.
4. Estilo de atualização (fontes, cores): Portanto, antes de editarmos
as páginas individuais, há alguns lugares
onde você pode adicionar alterações
de texto, cores e tudo isso
ao seu site do Squarespace. Então, estou levando você para o editor de
estilo e mostrarei isso. Pois em nosso Squarespace, chegamos ao design da página. Novamente, isso é apenas a
guia Design e os estilos de insights. E é aqui que você pode fazer suas escolhas de fonte e cor. Eu vou em frente e
pegar minha paleta de cores. Então, se tivermos duas cores, você verá essa paleta aqui. Você pode adicionar suas próprias
cores conforme necessário. Tudo bem? Então, se estiver
na paleta nas cores. Então espere, você
provavelmente vai
querer manter para que
tenhamos branco aqui. Ray, eu quero fazer um
pouco mais de cinza arrastar isso. Faça isso, então é
um pouco, tudo bem. E então eu estou pegando
um código de cores de um cara que não está na minha tela. Então, se eu selecionar este, quer mudar o código? Você só tem um. Sim. Então você provavelmente
vai
querer deixar uma de suas cores como sendo preto, também preto ou marinho
ou cinza escuro. Algo para ver F7 para IDE. Claro por que isso
não está mudando para ser a cor que eu quero que seja. O por causa disso. Então, se algo
não está funcionando bem, certifique-se de anotar. Então agora essas são as
cores que eu quero. Então, quando formos para fontes, vou fazer uma pausa por um minuto
enquanto olho minhas fontes. Tudo bem, então, quando estamos
na seção de fontes, você pode ver que
temos opções para alterar os títulos e parágrafos
e, em seguida, diversos. Então, vou selecionar títulos,
família e, em seguida,
procurar todas as fontes. Você também pode digitar uma fonte se
souber o que está procurando. profissional pode dançar. Tudo bem, e você pode alterar os tamanhos de diferentes
fontes e títulos. Não se preocupe se você
não vir sua fonte. Aqui, você pode pular à frente. Há um guia de código CSS para adicionar
fontes personalizadas ao seu site. Mas, por enquanto, vamos
continuar com isso. Então, se você encontrar suas fontes aqui, você
pode prosseguir com isso. Se não, você pode pular em frente. Então, parágrafos, a mesma coisa. E os botões também têm sua
própria fonte. Diga padrão para esse. E certifique-se de que você deseja que
seja o mesmo em todos os tipos de botão que você
acessa e seleciona. Depois, diversos. Eu também vou
fazer um Myriad Pro. Tudo bem, agora fomos em frente e ajustamos todas as nossas fontes e cores. Novamente, se você
precisasse adicionar uma fonte personalizada, você pode ir em frente e fazer isso. E você verá dois quando
estiver aqui no editor. Se você selecionar, também terá
a opção de selecionar uma cor diferente ou
adicionar uma cor personalizada. Então você tem mais opções
além dessas cores. Mas por causa disso, na verdade, é pela
velocidade e eficiência. Você quer ter
certeza de ter um branco e um preto, cinza escuro. Branco para planos de fundo,
preto cinza escuro para fontes. E eu gosto de
ter uma cor mais clara. Eu sou assim cinza
ou marrom. Dessa forma, você tem outras
opções como cores de fundo. Tudo bem, então essa é apenas a seção
do editor de estilo. Em seguida, antes de irmos para
cada página individualmente, faremos nosso cabeçalho
e nossos rodapés. Portanto, fique ligado e pule para a próxima lição em para
saber como personalizá-los.
5. Como editar formato de cabeçalho: Ok, agora que adicionamos
nossas cores e fontes, o próximo passo é seguir em
frente e estilizar o cabeçalho. Eu vou te levar para
ver isso agora. Tudo bem, então
vamos vir
aqui para estilizar o cabeçalho. Você parecia ir a qualquer página
que tivesse o cabeçalho,
que deveria ser todas
elas neste momento. Então, basta ir em frente e
clicar em Editar, Editar cabeçalho do site. E aqui,
título e logotipo do site. É aqui que você
pode adicionar seu logotipo. E aqui você pode
ajustar a altura. E aqui
temos algumas opções do que você deseja exibir. Então, por que você não quer
o botão aqui ou não? Então, se você não quiser que
o botão diga isso, e então o estilo está lá. Aqui você tem algumas opções
diferentes. E eu tenho um
vídeo que aborda isso muito mais detalhes. Mas isso é sólido;
nesse caso, basta
escolher o plano de fundo
e a cor de navegação. Isso é útil se você
quiser usar algo
diferente da sua paleta de
cores,
caso contrário, o tema seria
com sua paleta de cores. Então você vê que eu posso escolher qualquer coisa que faça parte da minha paleta de cores. Se o seu logotipo não estiver em um fundo
transparente, você vai querer
ter certeza de que ele está em branco. Caso contrário, ter um logotipo de
fundo transparente corrige esse problema rapidamente. Então, essas são suas opções lá. Então isso é deixe-me fazer isso. Então é aí que
não é básico. Vamos ver agora aqui. Como posição fixa. Então agora vamos garota, eu não quero
entrar em pergaminho comigo. Um segundo aqui. Tudo
bem, então essa opção é, ela simplesmente não é exibida quando
você está no modo de edição, mas para o cabeçalho fixo básico. Portanto, a posição fixa significa que o cabeçalho
aparecerá enquanto você rola. A posição fixa está ativada
se acertarmos et cetera, venda básica, que
se parece com isso. Onde ele permanece no lugar. Ou se editarmos o cabeçalho do site e fizermos com
que ele seja rolado para trás. Isso só cria um
pequeno efeito em
que , na verdade, não vemos muito
o cabeçalho. Então, enquanto eu
percorro, vejo que meio que desaparece. Tudo bem? Então, se você tem seu logotipo e está feliz
com tudo isso,
a próxima coisa que você pode querer
fazer é se esse botão, parece muito grande, o
que ele faz. Então você clica nele, ele vai. Então essa é a largura,
a altura com a qual estou preocupado. Lá de novo. Isso é para botões primários, botões
secundários que você
pode ter que fazer. Então, isso é jogar um botão
secundário. Na verdade, é um botão muito
terciário. Vamos ver. Essa não é
apenas a sua página de botões. Não está editando isso. Tudo bem, mas isso
torna nossos botões menores aqui em cima. E é
isso que eu quero fazer. Alguém bateu em Salvar. Se você quiser que esse botão
tenha uma cor diferente. Você também pode ter, desculpe. É aqui que temos
essa opção de links sociais. Opção para poder
alternar para o idioma. Você pode ativar isso se
tiver uma história que queira exibir o carrinho. Aqui. Na verdade, vou
mudar esse estilo para sólido. E isso vai me
dar as opções
para mudar o botão. Isso não está me dando a
opção. Então você vem para o tema. Erro com o mais recente, mas eu vou vir
aqui, clicar em salvar para isso. Estilos do site, cores, o
mais recente, selecione o mais recente. Aqui me dá o botão. Aqui. Se eu quiser
alterar a cor do botão, posso fazer uma cor personalizada ou selecionar na minha paleta. Vamos ver o que eu gosto mais. Eu gosto
mais desse. Paleta de novo. Tudo bem, então é
assim que você
mudaria a cor do seu botão. Então, o cabeçalho está
parecendo muito bom. Se você verificar o guia de código CSS
personalizado, você verá opções. Eu, pessoalmente,
gostaria de remover o sublinhado deles, então faremos isso no
final. Mas se você quiser ir
em frente e fazer isso agora, você pode localizar o guia CSS para fazer isso e pular
para essa seção. Caso contrário, no
próximo vídeo,
faremos com o rodapé
do site, que está aqui em baixo.
6. Layout de rodapé: Então, a seguir, vamos fazer com o rodapé do seu site. E a razão pela qual fazemos o
cabeçalho e o rodapé primeiro é porque eles estão em todas as
páginas do seu site. E assim, à
medida que você estiliza seu site, o corpo real da página, você poderá ver tudo que combina com o
cabeçalho e o rodapé. Então, vamos fazer isso. Porta tão exigente ao fundo. Tudo bem, então aqui está a vibração, dependendo do tipo de modelo de
demonstração que você selecionou. Isso pode parecer muito diferente, mas não muito preocupado. Então você pode entrar e
mudar tudo. Então, novamente, você vai simplesmente
ir para qualquer página que
tenha o desfoque,
clicar em Editar, rodapé. E aqui temos as mesmas
opções que
teríamos em qualquer uma das seções da
página. O cabeçalho é um pouco
diferente na foto dessa forma, mas este é semelhante a
todas as outras seções da página. Então, só precisa fazer
é editar a seção. Se você quiser mudar
a cor do plano de fundo. Aqui. Eu prefiro que seja
isso. Eu posso fazer isso. Acho que sim. Isso pode ser bem legal. Eu quero experimentar este, no entanto. Então, esse conteúdo depende de você o que você
quer mostrar. Então, vou em frente e
adicionar o nome da empresa aqui. Espaço. Então, eles também têm o
endereço e o rodapé. Eles gostam de ter. Aqui embaixo. Se você quiser ícones de mídia
social, pode colocá-los em qualquer lugar. Isso seria adicionando
um bloco, links sociais. E você meio que clica e arrasta. Esse é um recurso muito novo. Então, eu vou parecer
descolado com isso sozinho. Mas, basicamente, eles são
o tipo de opção de grade. Você é meio legal. Essa caixa azul
é onde ela vai parar. Squarespace acabou de lançar isso e eu realmente não
sou muito fã, mas não há dois aqui. Perfeito. Tudo bem, aí está. Então, se quiser o layout, o design, quero que
eles sejam, certo. Deveria colocá-los aqui embaixo. Tudo bem? Assim, você pode ver quando
você pode arrastar algo, esses quadrados aparecem e isso
permite que você mova
as coisas um pouco mais graciosamente do que costumava ser possível no antigo editor do
Squarespace. Aqui queremos links rápidos. Aqui. Na verdade, eu vou
em frente aqui. E aqui vai ser isso, você vai ver se eu fiz isso. Eu tinha um espaço enorme. Então aperte enter. Se você fizer Shift Enter ou eu achar que
o Command Enter em um Mac, você terá menos espaço. Então, performances. O que mais eu quero? Vamos fazer recitais, eventos
especiais. E se eu precisar
fazer isso menor, eu fiz isso quer
estar em uma caixa nova. Tudo bem. Então isso é bom para mim. Você também pode adicionar uma
imagem se quiser
dizer adicionar uma
versão do logotipo ao seu site. Então, novamente,
basta clicar e arrastar para onde quiser. Essa caixa azul
é onde ela vai parar. Então veja aqui que eu não
preciso disso lá,
mas se você quiser ir
em frente e manter isso, você pode remover esse bloco. Caso contrário,
vou em frente e digo que esta seção está concluída. Então, para fazer isso, Done Save. Tudo bem, então agora nosso
rodapé está pronto.
7. Noções básicas de motor fluido: Tudo bem, agora que
resolvemos nosso cabeçalho e rodapé, vamos entrar em algumas noções básicas do
Squarespace sobre como
criar alterações de página
e fazer edições. Há um novo construtor chamado motor de
fluidos no
Squarespace Seven 0.1. Portanto, as coisas podem parecer diferentes da última
vez que você criou um site do Squarespace ou viu
o tutorial do squarespace. Vou te mostrar, te
puxar por cima do ombro, e mostrar do que
estou falando. Então, para editar qualquer página, eles virão
aqui e clicarão em editar. Você pode editar a visualização da
área de trabalho ou do celular. E o novo construtor
fez algumas mudanças para que você possa realmente editar as coisas separadamente para
que as coisas possam ser mais responsivas se você
prosseguir e editar. Então, aqui, como na seção de
rodapé, editamos cada
seção ou adicionamos blocos. Então, se eu adicionar um bloco, o que eu quero adicionar
mais texto a isso, você pode ver as imagens de
fundo. É um pouco mais difícil,
mas para onde estou me movendo, esse retângulo azul é para
onde ele
vai . Agora o texto está aqui. Então é assim que você
adicionaria qualquer elemento. E você pode ver que há um monte de coisas
diferentes. Imagem, botão, vídeo, texto, edite o plano de fundo de uma seção que está
nas configurações da seção. Portanto, se você não quiser uma foto,
mas apenas um plano de fundo, seja um fundo
branco ou uma cor de fundo diferente, exclua a imagem. E eu quero mudar essa combinação de
cores que você pode selecionar na sua paleta. Assim. Esses
fundos coloridos também terão um
efeito de sobreposição diferente nas imagens. Então isso provavelmente
terá um
efeito diferente em uma imagem, depois um diferente. Então, adicionei uma imagem que você pode enviar do seu computador. Se você precisar usar fotografia
de banco de imagens, você pode procurar imagens
de banco de imagens de suas bibliotecas se você tiver uma imagem
que deseja usar em vários
lugares em seu site, você pode selecioná-la na
biblioteca. Não avance e procure imagens
de estoque. Eu tenho fotos para o site, mas porque seus filhos
e bolsas de estudo e enquanto eles
liberaram para estar no site que eu liberei
para mim no curso. Vou usar
fotografia de banco de imagens, fazer o curso. Então você pode ver aqui, esse círculo dita o foco da imagem. Então, se eu subir,
vai ser um pouco melhor, mais para que o rosto dela não seja cortado. Então, se você clicar fora,
isso fará isso. Outra coisa a observar, você também pode fazer
inserções que criam mais espaços
em branco ao redor das imagens. Então eu gosto disso. Deixe sangrar completamente. Isso é um pouco difícil de ler. Eu vou em frente
e me livrar disso. Livre-se do botão e exclua tudo o que estiver
clicando, exclua-o. E vou entrar em mais conceitos básicos
de design de página inicial. O alinhamento, a altura
é, isso vai ficar grande. Isso é apenas muito
conteúdo no topo, no meio. Della quer no meio. Mas como
ainda não está centralizado, parte disso é que eu só
preciso clicar e arrastar. Então, agora clique, segure, arraste. Agora está muito mais centrado. As cores são um pouco difíceis, então vou ver se
consigo mudar isso. Isso ainda é difícil. Mas você pode ver que eu não estou
mudando a imagem de fundo, mas se eu apenas mudar,
isso muda. Então, isso é um pouco mais fácil. Tudo bem, então essa é
a sua origem. Mesmo que essa seja
a seção do cabeçalho, esse mesmo processo se aplicará
a qualquer outra seção. Textos que você pode
editar principalmente em uma página. Então, se eu quiser
excluir algo disso e copiar e colar minha cópia
, posso fazer isso. Eu também posso mudar facilmente. Então, eu quero que isso seja menor. Isso para ser maior. Então, a imagem, se eu selecionar isso, me
dará a opção
de substituí-la. Envie um texto para o botão. Se eu selecionar isso, isso me dará a opção de
criar os links. Se eu clicar nesse ícone de engrenagem, posso conectá-lo imediatamente
a outra página do site. Esta é apenas uma visão geral muito
rápida do que você está
disposto a prestar atenção é o que esse novo construtor.
Temos muitos. Deixe-me ir até lá. Sim. Para que eu possa colocar texto sobre uma imagem. Mas eu tenho muito mais
agilidade com o novo construtor em termos de colocação de itens. Então, se eu quiser fazer isso, também
posso garantir que
não passe por cima dessa imagem. Certifique-se de que isso esteja
mais perto disso. Então, eu clico e arrasto torna
as coisas muito mais flexíveis. Novamente, se isso for demais, você terá muito mais flexibilidade
com o novo construtor. Mas lembre-se do clique e arraste. Eles estão colocando uma imagem
como plano de fundo. Essas são realmente as
notas altas dessas seções. Entrarei em algumas das coisas
mais específicas, como inscrições em
boletins informativos
e formulários de contato em um vídeo posterior do curso. Mas, por enquanto, essa é uma espécie de explicação rápida
de como usar o novo. Já que é chamado de motor fluido, o novo construtor do Squarespace. Então aqui está.
Sim, motor fluido. Tudo bem, o próximo, vou examinar
alguns layouts básicos na página inicial e começar
a construir esta página. Farei a mesma coisa para uma página sobre e
uma página de serviços. Só para que você possa ver algumas práticas e práticas
recomendadas
diferentes para criar essas páginas importantes
para o seu site.
8. Sobre conceitos básicos de layout de página: Tudo bem, agora
vamos
entrar rapidamente na sua página Sobre e mostrarei alguns tipos
de dicas de layout para isso. Se eu estiver no site do
Squarespace, qual é este, a
página Sobre é a página do corpo docente. Então eu o renomeei. Mas se você olhar para ele, esse
é um desses modelos. É meio que, eu não
sei quem achou que
isso era um bom design. Essa imagem está no
meio do nada. Há muitos imóveis
não utilizados, que às vezes é bom
porque dá o IRS, mas às vezes simplesmente não ajuda. Então, se usássemos isso, uma coisa eu acho que você poderia fazer se não tivesse um layout assim. Então você pode mover
essa imagem para cima aqui. Porque assim, para que
eu possa chegar a isso. Quero avançar com este texto
. Então é isso. Então agora está na imagem. Mova isso um pouco para trás. Mas eu vou
fazer isso menor. Muito pequeno porque
agora você vai lá. Então, se você é uma empresa
que só precisava de um simples, apenas sobre quem somos um pouco da sua declaração de
missão. Esse é um layout que
pode funcionar para você. É claro
que você gostaria de matar um pouco
desse espaço em branco extra na parte inferior. Para o local da barriga. Para a barriga, digamos,
vamos
ter um monte de pessoas
diferentes. Então isso seria
como o instrutor um. Se precisássemos
ter mais deles, poderíamos estar olhando para a
Seção tornar esta seção com uma cor de fundo diferente para o instrutor de
análise alternativo. Para obter essa seção. Instrutor. Três. Vai ser uma boa maneira de definir todas as estruturas
diferentes. Se você tem mais prática
de coaching, não
posso mostrar minha
página sobre no Skillshare, mas este é um redator
em um amigo meu. Então, o que ela faz é
novamente, apresentar quem
ela é e ela quer ser muito pessoal. Então ela tem esse tipo
de pontos de conexão. E então ela
expõe o redator. E então ela basicamente
usa sua página Sobre para compartilhar por que seus serviços
são diferentes. E ela tem uma história sobre como você poderia pagar a
alguém muito
dinheiro por cópia ou se
você é um negócio novo, isso vai mudar,
as coisas vão mudar. Então ela tem uma
filosofia diferente por trás de sua cópia. Então ela está falando
sobre a filosofia. Então, sua página Sobre
está realmente trabalhando para dizer por que ela é diferente. Coisa que ela tem aqui. Ele ou ela tem que
conseguir meus serviços. O objetivo
da página sobre é realmente criar confiança em você para depois comprar
seu produto ou serviço. Então ela está dando a opção aqui. E este é um
site do Squarespace que ela também tem o que ela tem conexão chamada pontos de
conexão. E ela colocou isso enquanto
fazia esse gráfico no qual ela usa. Mas você poderia fazer algo
semelhante no Canva para criar um gráfico e colocá-lo lá para criar uma espécie
de pontos de conexão. Essa é uma solução alternativa. Mas então ela tem essa história mais longa. Então você quer ter uma página
sobre esse tamanho. Essa é uma ideia de como você pode
realmente usar sua página sobre para trabalhar no suporte aos
seus serviços? Caso contrário, eu sugeriria
mantê-lo curto e simples. Explicando o que o
torna diferente? O que torna seu
produto diferente? O que torna sua
empresa diferente? E, em seguida,
superá-los e adicionar um botão à sua página de serviços. Então, para fazer esse botão de bloqueio de anúncios. Então, teríamos um botão para
cada um deles que é como ver aulas de
visualização, porque esperamos
que agora eles tenham aprendido o suficiente sobre essa pessoa
como instrutor. Eles queriam as
aulas que davam. Portanto, a página Sobre é
realmente destinada a levar as pessoas para a página de serviços. Tudo bem, e é sobre isso que
vamos falar a seguir.
9. Squarespace 8: Tudo bem, agora estamos
na seção Homepage. É aqui que veremos
algumas dessas seções que sua página inicial pode
querer ter. Isso é baseado apenas em princípios de conversão
e experiência do usuário. Então eu vou te levar por cima
do meu ombro e fazer algumas coisas. Então, estamos de volta à
nossa página inicial de demonstração. Uma opção de layout comum é essa imagem de herói ou banner
na parte superior da página inicial. Isso é chamado de terço superior. O objetivo é chamar a
atenção dos espectadores. Então, para esse propósito
deste site, é uma companhia de dança e
eles oferecem aulas de balé. Então, basicamente, queremos dizer às
pessoas que isso é sobre balé. Então, temos uma imagem aqui
que fala disso. Se você não tem um
negócio que precisa um negócio
tão forte ou
se não tem algo que seja visualmente representativo
do negócio, a imagem
do herói pode não
ser realmente a melhor coisa para
colocar no terço superior, você pode querer colocar
alguns textos de guia acima dele. E você vê que
pode adicionar uma seção acima disso com muita facilidade. Você pode fazer uma seção em branco ou algo assim
é uma boa opção. O texto aqui
vai se destacar, especialmente quem fez essa
imagem um pouco mais curta, o que acho que posso fazer com
o novo construtor assim. Então, se tivéssemos
algo assim,
essa pequena
seta azul nos ajudará a armazenar nesta seção. Eu me pergunto se eu tenho obter a altura que
tem esse espaço em branco. Só temos que clicar e arrastar
tudo e drogas para mais perto. Então, para encurtar isso, esse não é exatamente
o estilo de invocação de um site com isso
aqui em vez disso. Mas se você não tem uma representação visual muito
boa, você tem a opção de
ainda ter uma imagem aqui. Mas você sabe, isso
realmente não engloba o que sua empresa faz. Essa pode ser a melhor maneira de
ir, porque esse texto sempre quer se
destacar mais do que este texto. E podemos até
tornar isso menor. Dessa forma, entramos na
próxima seção rapidamente. Então, isso é algo que eu
encorajo as pessoas a fazerem. Você nem sempre precisa
fazer o que está na moda. Você
pensará no que é mais eficaz para transmitir
sua mensagem, especialmente quando estamos falando
sobre imóveis na seção superior
do seu site. Na verdade, vou
mover essa seção para baixo. Já que isso funciona. Vou colocar o logotipo aqui em vez desse texto. É aqui que eu
quero tirar uma foto. Isso é uma coisa legal
e torna muito fácil colocar uma imagem em cima de uma imagem. Tudo bem? Então, dependendo do que você
decidir fazer para não, você está tentando fazer em termos de ter uma
opção como essa ou uma opção como essa no topo
do seu site. A próxima coisa que você quer
fazer é realmente dar às pessoas uma descrição concisa
do que você faz. Então, aqui eu tenho e novamente, até mesmo copie e cole
isso do seu documento. Você tem alguns pares. Estou me perguntando isso tão mal. Essa é a capitalização aqui. Aqui em cima e cole. Isso nos diz exatamente
o que é o negócio. seção de texto está muito grande. Vou fazer com que seja pequeno. E também
dê uma cor. Certo? Isso é conhecido como pequeno
quanto eu quero que seja. Então, se você atingir essa altura, você pode realmente espaços em branco. Remova essa seção.
Na verdade, vou editar a seção
de plano de fundo desta para esta. Então, aqui eu posso ter uma descrição e fazer upload um arquivo desta vez
do meu computador. Aqui vemos este texto
agora difícil de ler, então vou
em frente e faço isso. Aqui. Vamos fazer algo sobre o botão. Veja se eu quero fazer
esse alinhamento correto. É meio legal. Eu posso
mudar isso aqui. Na verdade, tenho uma
cotação nos sites deles. Vou usar esta seção. Este é um ótimo exemplo
de como você pode reaproveitar. Portanto, esse é um plano de fundo
inserido. Então, vou
substituí-lo na biblioteca. Vou
substituí-lo do meu computador. Você também pode fazer mais sobreposições, o que ajudará esse texto a se destacar. Acho que
vamos fazer isso. Tudo bem. E então nossa citação
é a citação de Josephine Baker. Tudo bem, aqui na
sua página inicial novamente, este texto é destinado a
qualquer exemplo sucinto que
eu gosto de ser
a seção Sobre. Então isso é realmente tipo, ok, quem somos nós em poucas palavras, isso logo abaixo do herói
ou da terceira seção superior, então podemos ter
mais sobre. Então essa é a nossa missão. Nós nos aprofundamos nisso.
Vou limpar esse texto. Mas
apenas para mostrar um
tutorial para os layouts, não
vou me aprofundar muito
nas ervas daninhas e personalizar isso. Mas ter uma
seção Sobre a seguir. E aqui está isso. Um pouco de personalidade
é totalmente opcional. A próxima coisa que você
normalmente deseja ter em uma página inicial é uma seção de
serviços. Isso é o que chamamos de placa de sinalização. É uma espécie de dar às pessoas uma maneira de chegar facilmente a diferentes
partes do seu site. Estou procurando,
vou escolher. Esse aqui. A seção pode editar está olhando para os diferentes aplicativos, cores
diferentes. Decida o que eu quero fazer aqui. Não vou fazer isso. Então talvez eu queira que
isso seja branco. Então aqui edite o conteúdo, você pode dizer que eu não posso
editar este título, Isso é porque ele está
aqui. O título. Então precisamos de algo
para cada um desses. Então, o título desta
pequena seção, acampamentos de
verão e intensivos. E então temos a
opção de um botão. Você colocaria o link real aqui se estivesse pronto
para colocá-lo em algum lugar. Desculpa. E então, para editar a imagem, você faria isso. Portanto, vou substituir isso para essas seções na verdade,
será importante que todas as imagens tenham
o mesmo tamanho. Então você quer ter certeza
de cortá-los no mesmo tamanho ou proporção
antes de colocá-los. Tudo bem, então Epsilon
Max sai muito cedo. Então, vamos para o próximo. E eu não gosto de fazer muito enquanto ele está carregando porque
eu tive que acontecer onde ele perde essa linha de pensamento se você
der muito o
que fazer e então a
imagem não carrega. Então você colocaria um link lá. Ou você pode alterar o
título do texto do botão. E então nossa terceira opção, só porque é do mesmo tamanho. E, novamente, estou
usando fotos de estoque para colocar isso em funcionamento. Mas é assim que
faríamos a lista e eu
recomendo que esse seja
um recurso interessante, mantenha tudo bem alinhado e empilhe bem no celular. Portanto, sugiro usar o recurso de lista para
criar esse tipo de seção de sinalização
em seu site. Foi minha vaga no título, não é justo. Agora temos nossa seção de placas de
sinalização. Portanto, esse é um bom tipo
de layout
geral, muito limpo e
acessível, fácil para as pessoas navegarem e
chegarem aonde precisam ir. Novamente, esse botão normalmente iria para uma página maior Sobre. Em seguida, esses botões
levarão
as pessoas às diferentes ofertas. Lá você tem o layout da
página inicial.
10. Conceitos básicos de layout de página: Tudo bem, agora
vamos falar sobre a página de serviços e é aqui que as pessoas
vão ver todos os seus
serviços ou esta será
a página de vendas real
onde todas compram. Então, vamos voltar ao
nosso site do Squarespace. Seria mais uma página de aula. É aqui que você
quer apresentar. Dessa forma, é meio legal. É quase como um portfólio. É aqui que você
pode querer apresentar suas diferentes opções de aula. Então é aqui que podemos
mudar nossas aulas. E depois um resumo. Escreva uma linha por algum motivo. Tudo bem, então isso
seria talvez o, então esta é uma seção
novamente é apenas a inserção. Então, para editar esta foto, eu não vou ficar em
segundo plano. Vamos esperar que ele carregue. Então é aqui que você
descreveria o tipo de classe um. E deve ser para quem
é o serviço? E então isso
seria aprender mais. Então, é a seção de edição.
Quero editar o botão. E é aí que
eles aprenderiam mais sobre esse serviço. Portanto, a próxima página
seria uma página de vendas mais longa. Então, essa é uma maneira legal de criar várias classes
diferentes. Você também pode voltar e usar seção de tipo de lista
que
usamos anteriormente. E se seus serviços
forem os mesmos, você
não pode ter medo. Você pode ter um pouco
mais de vantagem, descrevendo aqui
seus serviços gerais estilo
ou abordagem. Mas você pode realmente usar exatamente
os mesmos serviços e fazer com que eles voltem para a vendas de formato mais longo,
uma página de vendas de formato mais longo. Vou fazer referência ao site da minha amiga Lauren novamente, Serviços. Então é isso que ela faz. É assim que ela é basicamente assim é o que esse serviço é. Se isso for usado, é o que
você precisa conferir. Este serviço é se você der uma olhada. Então, vá para os detalhes. Portanto, esta é uma página de vendas de
formato mais longo. Novamente, temos
depoimentos em destaque e depois
há muita cópia, mas ela usa essas seções
amplas. Então, da mesma forma que eu estava
sugerindo que você use seções
alternadas
na página sobre. Você faz exatamente a
mesma coisa aqui. Mas é aqui que você incluirá todos esses detalhes. O que alguém vai conseguir, qual é o processo, para
quem é e para quem não é. Se você tiver
mais de um serviço, sua
página de serviços real é mais
desta seção de sinalização, como
tínhamos na página inicial. Essa é apenas uma visão geral
muito rápida de como
essas páginas funcionam juntas. Mas eu não queria compartilhar
isso para que você tivesse uma ideia de diferentes maneiras apresentar seus
diferentes tipos de aula.
11. Blog de estilo Squarespace: Então, agora examinamos
alguns layouts básicos para suas páginas principais. E você pode aplicar as táticas de
construção individual do
Squarespace e também o que você me viu fazendo,
o tutorial da página inicial. Você pode usar isso para basicamente criar todas as suas
páginas daqui para frente. Mas eu queria
compartilhar um pouco sobre a página do blog do Squarespace
com essa é diferente. Então, eu vou para o meu site de demonstração, e este site
não tem um blog, mas vou adicionar um aqui. Com o propósito
de demonstrar. Para adicionar uma página de blog, vá em frente e você
realmente pode coletar, coletar, selecionar o blog aqui. Em seguida, ele oferece layouts
diferentes. Então, esse é realmente
um recurso interessante. Você pode selecionar
exatamente o que deseja. Eu seleciono, eu recomendo
algo assim
ou isso que
exibe mais blogs, em
seguida, tê-los em um. Então, vamos chamar isso de blog. Vamos arrastá-lo para
a ordem que
queremos em nosso menu principal. E então aqui você realmente pode não ter muito que
fazer se quiser esconder a data. Tão bom no que
acabei de fazer foi clicar em editar a página do blog e
fiquei demorando um segundo para carregar. Tudo bem. Então, se você clicar em editar,
gerencie as postagens. Desculpe, isso foi errado. Seção. É aqui que você pode selecionar
o que deseja exibir. Então, se você não quiser que
a data apareça, por exemplo, as unidades fazem nove. Seria a mesma coisa em
uma postagem de blog individual se você não quiser que
a data apareça. Você também pode fazer
as cores da mesma maneira. Então, se você quiser fazer
um plano de fundo bastante perna e colocar isso
no formato
permitirá, permitir que você
minimize um pouco disso. Então, espaçamentos verticais, muito. Seção novamente, aumente
o espaçamento entre as postagens. Você pode brincar
com esses números e também com a opção de inserção para deixar as coisas um pouco
mais próximas do que você deseja. Por que isso? Você também pode alterar
isso lado a lado, o que eu estou gostando mais porque esse outro layout
era um pouco mais rígido. Então essa é uma opção novamente, as datas mostradas novamente. Para que eu possa voltar até aqui. Nenhum. Oh, aqui está. Espaçamento meta. Mas é aqui que,
de repente, as coisas estão. Não vou gastar
muito tempo nisso pois
será um gosto pessoal. Mas, essencialmente, você
simplesmente passaria por aqui. Não faz
muita diferença. O padrão vertical vai
ser desse tipo. Você também pode mudar. Para ser assim. Você tem todas as suas opções aqui. E novamente, se você quiser voltar
para o outro estilo de blog, você pode fazer o blog básico da grade. E você pode brincar com
o espaçamento até
conseguir algo de que
goste. Mais. Lá vamos nós. Isso foi melhor. Espaçamento entre títulos Desculpe, só estou brincando com ele. Então, por que pode não
ser o mais útil, especialmente porque está
demorando um pouco para carregar. Mas sim,
em algum lugar aqui teremos espaçamento para apertar
essa seção inferior. Então, vamos continuar jogando
com essas configurações. Normalmente tem algo
que você gosta que já
está melhor. E quando terminar, salve. E então cada
postagem do blog, novamente, espaçamento. Você pode brincar com um pouco mais, mas a cada postagem do blog
à medida que
você a edita, você pode percorrer e
excluir todas essas. Ou você pode entrar e simplesmente
substituí-los pelo seu conteúdo. Novamente aqui, se você
não quiser que o autor mostre a seção de edição e você pode selecionar ou desmarcar
o que quiser. Em uma postagem de blog. Você pode facilmente adicionar imagens em espaços diferentes
fazendo coisas assim. Tudo bem, então essa é uma visão geral
muito rápida do blog. É assim que você
configura seu blog em seu site de notícias.
12. Como editar a página de contato: Então, a outra página que vamos estilizar que é um
pouco diferente de uma página inicial típica
ou apenas como você
editaria qualquer parte do corpo de qualquer das páginas é a página de contato uma
das páginas é a página de contato
que tem o contato. formulário. Então, vou em frente e
mostrarei uma página de contato. Portanto, temos uma configuração aqui. Esses thetas realmente precisam ser simples e dar às pessoas
as informações. Então, eu queria, eu honestamente mudar muito sobre isso. Você poderia adicionar uma seção de
herói se quisesse isso recentemente. E remova o botão. E basta
dizer que entre em contato e novamente com esse
construtor fará isso. Você já quis colocar a
seção de título em alguma de suas páginas? Você pode fazer algo assim. Você pode ver esse estilo, ele aparece melhor
e tem isso. Caso contrário, esse é um layout simples e
agradável. O que você
quer
prestar atenção é neste formulário de contato. Você pode ir em frente e deixar
os campos do formulário aqui. Se você não precisa de algumas dessas coisas, como
o número de telefone, talvez você possa alterar qualquer um
desses que precisar. E quando você clica
em cada um, você pode ver que pode até adicionar
uma descrição se
precisar editar o texto do espaço reservado. Então isso seria
Joe, Joe, joe.com. Você pode adicionar
texto de espaço reservado se precisar, mas é assim que você
editaria qualquer um desses campos. O que você
quer ter certeza de que pode fazer esta página entrar no ar
está conectado ao armazenamento. Então você pode
se conectar se quiser que isso vá
para qualquer um desses lugares, Mailchimp, google Drive, Zapier, nós o conectaremos
a outro software. Se o software ao qual você
precisa conectá-lo. A coisa mais fácil de fazer
com um formulário de contato, porém, é nos relacionar a fazer isso
e adicionar um e-mail aqui. Esse seria o
e-mail que você quer. Envios do formulário de contato
para ir para ser notificado. Quem não gosta disso. E dessa forma, isso vai para
o lugar certo. Portanto, essa é apenas sua página de
contato e certifique-se que o formulário esteja funcionando. Se você precisar editar o
estilo do formato, tudo o
que você pode fazer com as cores. Portanto, a cor do botão pode
mudar dependendo da. Mas se não
estiver oferecendo uma opção diferente, faremos a mesma coisa que
fizemos para o botão no menu. Se trata do design, estilos do
site, cores, o mais recente. Em seguida, clique no
elemento que você deseja alterar. Então este é o botão que, e então eu quero que o texto seja. Seria assim que você
mudaria a cor do botão. Tudo bem, e é isso
que eu quero que você saiba sobre a página de contato.
13. BÔNUS adicionando fontes personalizadas com código CSS: Então, estou em um site de demonstração e
vou mostrar como
instalar fontes personalizadas e
fazer o Squarespace Seven 0.1. Isso nos ajudará a contornar o
fato de que realmente temos apenas uma opção de fonte de parágrafo
e uma opção de fonte de título. Então, fazer isso se torna
um CSS personalizado de design. Não sou nada neste site. Então, a primeira coisa que
fazemos é adicionar uma fonte. Então, você precisará identificar
uma fonte que você goste. E você
precisará de um arquivo T, T, F ou OTF. E então você pode ter que comprar uma fonte se não for
uma fonte de código aberto, mas deixe-me ver se consigo encontrar. Então, basicamente
, procure. Então, essa é a fonte da qual estou falando. E cabe ver
se você consegue encontrar uma versão para download para ele. A fonte Frida io é
realmente muito boa. Muitas vezes eles os
têm. Então, aqui vamos nós. Eles têm o OTF
e o CTF e você pode clicar em download e
obter os arquivos. Portanto, certifique-se de que você está nos arquivos antes de entrar e fazer qualquer coisa. Mas uma vez que você os tenha,
nós vamos vir aqui. E o que vamos fazer é gerenciar arquivos personalizados, adicionar imagens ou fontes. E aqui vou eu,
tenho uma pequena pasta de fontes. Aqui vamos nós. Hum, então você vai abri-lo
se houver FDF
para descompactá-los primeiro. Então, aqui vou fazer
isso por enquanto. Depois de carregado, você
precisa clicar nele. E é aí que você
obterá o URL aqui. Tudo bem, então clique fora dele. Então, em seguida, precisamos adicionar
o nome dele, esse código. E assim você poderá copiar e colar isso do seu guia, o Adicionar código de face da fonte. Então isso está pedindo DRL. Pegue esse URL e
você o cortará. Você vai colocá-lo
entre esses dois apóstrofos, mas isso é ponto e vírgula entre
lá, entre apóstrofo, ponto e vírgula. Estou lá dentro. Então você pode ver agora
que foi adicionado aqui. E então você só
quer nomear essa fonte. Então, vou dar um nome a esse arquivo. Este se chama
Bodoni bold owning. Seria apenas, tudo bem, então agora que temos
a fonte lá e agora temos que atribuí-la. Então, em seguida, vamos vir
aqui e pegar a atribuição. Um código de fonte. Vou ver aqui que isso é para o H1. Se você quiser que
seja para o seu H2, basta adicionar
H2, H3, H3, H4, H4. Você também pode pegar. Isso é um
pouco menos intuitivo, mas este ponto SQS
RTE hífen aumenta,
Isso é para a fonte do seu
parágrafo um. Você pode até personalizar
isso, se quiser. Tudo o que você precisa
fazer é garantir que isso reflita o que você
deseja atribuir a ele. E então você simplesmente vai
em frente e digita isso. Você vê que isso mudou isso. Então essa é agora a fonte Bodoni. Assim, você pode fazer isso com
quantas fontes quiser. Eu recomendo que você seja um
pouco criterioso sobre isso. Muito código CSS
acabará deixando
seu site um pouco mais lento. Então vá em frente e realmente veja quais fontes
do Squarespace você gosta e escolha uma
ou duas fontes de cabeçalho. Talvez essa fonte de parágrafo, eu diria que três no máximo é realmente o que você
quer colocar lá. Eu não colocaria mais do
que isso porque quero fazer algumas outras personalizações de CSS
provavelmente também. Portanto, essa é uma maneira de
economizar um pouco, mas você pode obter essas
fontes personalizadas e pronto, tudo bem.
14. BONUS vai mais fundo em formatos de cabeçalho em 7.1: Este tutorial em vídeo é para o cabeçalho e essa opção
transparente, seja, se você tiver
algum site designado, ele costumava estar lá e agora
não está por cima do meu ombro. E mostrar as diferentes opções de
cabeçalho
nos novos quadrados, eu 7.1. Então, esta é minha demonstração aqui. Se viermos aqui, em vez de ter
aquela
guia transparente com a qual você está acostumado, temos o estilo
e isso está aqui. Então, dinâmico é um tratamento. Isso é, na verdade, é a mesma coisa tão transparente
quanto o que costumávamos ter. Tão dinâmico,
faça com que seja qual for a
barra de configurações de cores aqui, tema. Nós fazemos isso, dessa forma. Podemos alterá-lo para que
possamos colocá-lo em qualquer um dos nossos lados coloridos. Então é assim que você
dá a ela sua própria cor. E os outros são uma
espécie de tratamento. Então gradiente, esse tipo
de coisa. Esse gradiente. E também temos sólidos e isso, você pode torná-lo uma coisa personalizada. Você também pode fazer um desfoque. Veja, eu posso
brincar com isso. Desculpe, esse é o borrão. Então, se você diminuir a opacidade, você terá
esse efeito aqui. Então, isso oferece
muitas opções diferentes. Tão simples, dinâmico é tema
transparente. Você pode usar seus temas de
cores, sólidos. Você pode criar cores personalizadas
ou fazer esse efeito de desfoque, ou temos opções de gradiente
como você. Então, essas são suas novas configurações de
cabeçalho. Espero que isso ajude.
15. Versões de página móvel BÔNUS: Ok, então um dos
recursos interessantes do motor fluido, a versão mais recente
do Squarespace builder é que eles
facilitam muito a edição das versões
móveis de suas páginas. Estou pensando por cima do
meu ombro e vou te mostrar como fazer isso. Então, se entrarmos
para tirar isso, se entrarmos neste site. Portanto, este é um site criado
com a versão mais recente. Se formos editar
qualquer uma das páginas, podemos ver que esta tem muitas
camadas de imagens. Então isso é uma imagem, isso é
uma imagem, isso é uma imagem. Quando isso foi adicionado
pela primeira vez e a versão para desktop
parece muito boa. A versão móvel
não parecia tão boa. Então, para editar
a versão móvel, você quer estar na edição. Então, cliquei na página, editei a página e editei
a versão móvel. Vou alternar
para isso aqui, qualquer coisa que eu mover. Então, se eu mover isso aqui, por exemplo, eu
volto para a visualização da área de trabalho. Isso não mudou nada. Então é exatamente aí que
você precisa saber para chegar a essa configuração móvel. E aqui você pode mover qualquer uma dessas opções com bastante facilidade e garantir que
elas estejam posicionadas, como você precisa que elas
sejam posicionadas em dispositivos móveis e desktops. Então, esse é apenas um
pequeno vídeo bônus rápido mostrando essa configuração. Isso torna as coisas
muito mais fáceis. Portanto, certifique-se de verificar suas versões
móveis de suas páginas.
16. Resumo: Tudo bem, então aí
está. Com esses vídeos, você tem tudo o
que precisa para acessar e criar um site do Squarespace totalmente
personalizado. Então, não se apresse, analise
e edite todo o conteúdo. Garante que seus menus estejam
organizados. Inicie seu site. E então, quando você pode
tirar uma captura de tela e compartilhá-la como
seu projeto de classe. Tudo bem, muito obrigado.
Kara Ferreira, Websites for Creatives & Coaches
