Design de sites do Squarespace 7 - não é necessária codificação

1. Começando : este curso é para você?: você ou sua empresa precisam de um site? Você já olhou para empresas de Web design em sua área e descobriu que as boas custam milhares de dólares e as baratas não têm experiência? Bem, você está com sorte. Quem melhor para criar o site perfeito de acordo com seus padrões do que você mesmo? Neste curso, vamos ensinar-lhe como você pode criar o site mais bonito usando o Squarespace como sua plataforma. Os sites do Squarespace são extremamente fáceis de configurar. A melhor parte é que você não precisa saber como codificar. Squarespace é um construtor visual encontrando você simplesmente dragão. Queda diferentes partes do seu site, com preços apenas começando em US $12 mensais. não tens de te preocupar em drenar a tua conta bancária Tambémnão tens de te preocupar em drenar a tua conta bancária. A taxa de assinatura mensal inclui um nome de domínio e hospedagem, então tudo está em um só lugar com suporte para blocos de comércio e, páginas de destino e integração de terceiros. Não é de admirar que cada vez mais empresas estejam migrando para o squarespace. Inscreva-se neste curso hoje para economizar milhares de dólares em taxas de Web design e o problema de tentar explicar sua visão para outra pessoa. 2. Começando : por que a Started:: bem-vindo ao curso de criação de um site do Squarespace. Meu nome é Ghassan, e serei instrutor durante o nosso valioso tempo juntos. Antes de começarmos com o aprendizado real, gostaria de apresentar algumas razões pelas quais você ou sua empresa acharão valor no ciberespaço quando comparados com outros sistemas CMS. O próprio Squarespace tem um grande benefício, e esse é o fato de que ele é extremamente fácil de usar. Tudo o que você precisa para criar um site bonito é um pouco de tempo, algum conhecimento básico do layout do espaço quadrado e uma visão para o site perfeito Em relação aos preços, squarespace é realmente bastante justo quando você considera o fato de que hospedar um nome de domínio e um construtor visual estão todos incluídos na taxa, que começa em apenas US $12 por mês. Começar com o squarespace é sua conta de classificação mais fácil, escolhendo um modelo e adicionando seu conteúdo. Há muitas opções para encontrar sintonia, se você quiser, e vamos abordá-las com mais detalhes ao longo do curso também. E para aqueles de vocês que querem obter um pouco mais de perda técnica para cobrir alguns CSS personalizado que você pode usar para fazer o seu site ficar acima de outros sites squarespace. Então, o que você está esperando? Clique na próxima palestra e vamos começar. 3. Começando : como criar uma conta: Ok, então a primeira coisa que vamos fazer é realmente muito simples. Vamos nos registrar para uma conta, então vamos para o Squarespace Dot com e assinamos. Como ainda não temos uma conta, vamos nos inscrever, e agora temos três opções. Obtenha um domínio, crie um site ou crie uma loja. Eu diria para esperar e obter um nome de domínio por agora só porque você pode mudar de idéia sobre qual é o nome de domínio ideal durante todo o processo de desenvolvimento. Então escolha entre um site e uma loja. Agora, não me entenda mal. Você pode vender produtos no site, e é isso que a maioria das pessoas faz. Mas há algumas pequenas diferenças que vão destacar agora as primeiras diferenças. Os sites de preços começam em US $12 por mês. Onde as lojas online começaram $26 por mês. Ah site tem uma taxa de transação de 3% para qualquer coisa que você vende. Onde está uma loja online não tem taxa de transação. Então isso significa que a diferença de $14 entre os planos que você pode realmente compensá-lo se você vender mais de $467 no valor de produtos. Então vamos dizer que eu queria ah website, então eu vou clicar em criar um site. Então agora vamos escolher um modelo agora para o conhecimento de escolher. Quando eu escolhi o primeiro 1 nós vamos passar por cima e mudar o modelo mais tarde. Mas eu só quero mostrar como criar a conta. Então vamos preencher isso. Então eu vou apenas colocar em minhas informações aqui, e nós vamos em frente e concordamos, assinar e criar site. Ok, então agora nós vamos clicar no início, e então nós vamos escolher a categoria. Então, digamos que este vai ser um site de negócios. Ok? Você pode escolher entre o nosso site pessoal do site de negócios ou para outra pessoa. Então vamos escolher os negócios, digamos, e vamos escolher uma das categorias em que ele se encaixa. Então eu vou dizer que o meu vai ser um site de arte e design, e o objetivo do site é mostrar e criar um portfólio do meu trabalho. Então, vamos clicar em próximo e, em seguida, um título do site. Então vamos dizer que este é o site U Demi, e então nós teremos feito, e é assim que você cria uma conta e vamos rever alguns dos outros recursos que estão disponíveis nas próximas palestras 4. Começando : como escolher um modelo: Ok, então na última palestra, nós cobrimos algumas das noções básicas, como criar uma conta seria quadrado e preencher algumas de suas informações básicas do site , não. Vamos em frente e mudar o modelo em um que se adapte às nossas necessidades Então vamos para o design e, em seguida, modelo quando temos agora é chamado Wells. Vamos em frente e instalar um novo, então há dezenas de modelos para escolher e você pode instalar quantos quiser, e você pode alternar entre eles quantas vezes quiser. Você pode filtrá-los aqui em cima, dependendo da sua categoria que você quer que seu site caia, então vamos deixá-lo em tudo, e eu vou mostrar-lhe alguns dos que eu realmente gosto. Então há Bedford Marquee e Alá, então eles são provavelmente os três que eu uso mais frequentemente para meus sites de clientes. Então primeiro vai pré-visualizar cama desgastada. Eu usei este para um advogado e outra empresa que fornece um serviço tão parecido com este. Nós podemos personalizar tudo sobre ele, então realmente não olhar muito em como as imagens e o texto apenas mais da estrutura. Então tem um botão aqui em cima. Lá vamos nós. Então vamos dar uma olhada no Marquês. Então Markey é um site de paralaxe de uma página. Então, há muitas seções juntas em uma página e as imagens são agradáveis e paralaxe , e você pode criar mais de uma página. Então, parece algo assim. Agora, finalmente vamos dar uma olhada no Alex. Então, neste exemplo, eles usaram para um casamento. Mas você pode usá-lo para qualquer coisa. Não tem que ser um casamento. Eu usei esse modelo exato para uma empresa de drones que faz fotografia. Então, novamente, imagens de paralaxe. Site muito bonito, e essas são as escolhas que temos. Então, digamos que o site que vamos usar é para uma empresa de desenvolvimento de sites . Então eu vou em frente e eu vou escolher o Bedford porque eu acho que isso parece um pouco mais profissional e bem, na verdade, clique na pré-visualização bem aqui, então eu vou nos mostrar como é e nós vamos definir é um modelo ao vivo. Agora, não se preocupe com este ar aqui. Isso é perfeitamente bom. Nós vamos voltar, nós vamos voltar novamente e nós vamos para as páginas, ok? E então eu vou mostrar a vocês como podemos modificá-los na próxima palestra. 5. Tour: Páginas: Ei, pessoal, bem-vindos de volta. Então, nas próximas palestras, seria fazer um rápido tour pelo espaço quadrado para ver onde esses itens de menu levam e o que podemos mudar. Então, hoje vamos estar olhando para as páginas. Então aqui podemos ver que há todas as páginas que temos atualmente em nosso site. Eles são classificados na navegação principal, a navegação secundária e, em seguida, não vinculados. A navegação principal é o que aparece no topo aqui no seu menu. A segunda, uma navegação geralmente aparece no lado esquerdo ou na parte inferior. É um pouco diferente, dependendo do modelo que você está usando. Nós não ligamos essas páginas aéreas que você tem, mas elas não estão. Eles não aparecem em nenhum lugar na página, a menos que você especificamente vinculado a eles, e eu vou te mostrar mais sobre isso mais tarde. Então, agora, a primeira coisa que você vai notar é que cada uma de nossas páginas diz Demo ao lado dela. O que isso significa é que essas páginas aqui, eu vim com o modelo e não estão realmente ao vivo agora, Então, se alguém visitar este site aqui, eles não vão realmente ver essas páginas e eu vou te mostrar o que quero dizer. Se eu pegar esse link e eu ir para talvez esporte da Internet, onde eu não estou conectado no espaço quadrado e entramos no acesso de visitantes e eu vou digitar este código apenas para ver o site, você vai ver que essa página realmente não existe. E nem a página sobre ou a página de notícias porque estas são todas páginas de demonstração, e isso é apenas para garantir que os visitantes nunca vejam o conteúdo de demonstração. Então o que temos que fazer é que realmente temos que fazer essas páginas nossas. Então, clicamos neste ícone de engrenagem aqui, e então podemos clicar em Criar e vai realmente criar a página exatamente como ela parece agora. Então, agora, se você olhar aparecer ao lado de casa, ele não diz mais Demo. E se você realmente tentar acessar o site através, digamos o Internet Explorer, porque agora estou usando o Google Chrome e estou conectado ao Google Chrome na minha conta squarespace. Então, não importa qual página eu vá, ele mostra que está disponível. Então eu estou vendo coisas no back-end. Não é bem como os visitantes veriam. Então, se eu for para o Internet Explorer e eu vou para o meu site. Veremos que a página inicial está agora configurada. As outras páginas não estão configuradas desde que não fizemos a vida do conteúdo de demonstração, mas esta aqui, esta página inicial, está bem? 6. Tour: Design: Certo, então na última palestra, revisamos o que estava embaixo das páginas. Muitos brancos. Hum, hoje nós vamos rever o design. Então, se você entrar em design, há algumas opções aqui vai passar por cada um. Assim, sob o direito do logotipo, você tem a opção de alterar o título do site. Agora, eu tenho um conjunto para você site Demi, que também é o que aparece aqui. Agora, você também poderia ter um slogan. Então algo como site de demonstração. Agora, alguns templos vão realmente usar isso na página inicial real como. Exceto que neste momento este modelo não é assim, se você descer um pouco, há imagem local. Este é o lugar onde você faria o upload de uma imagem que você tem ou você pode criar um logotipo. Agora, mostro-te como isto se parece. Eu realmente não recomendaria porque ele realmente não tem muitas opções. Então você colocaria algo como você não me faz e você basicamente apenas escolhe uma imagem que você gosta, e é isso. E você pode mudar as cores clicando nele. Mas é só isso. Certo, então vamos voltar ao nosso site. Então essa era uma opção de logotipo criativo agora. Ícone do navegador. O golpe de favor. Agora este é geralmente um ponto i CEO ou ponto PNG formato, e esta é a imagem que aparece apenas no topo aqui, ao lado Onde está o espaço quadrado? Ou ao seu lado, Demi ou este pequeno D aqui. E é também a imagem que é usada por dispositivos móveis. Quando você salva um site como um marcador em como sua tela inicial agora, já que internacional ou é um navegador tão terrível, algumas das versões mais antigas dele não suportam realmente o formato PNG. Os recentes fazem. Mas só para ter certeza, é melhor usar um ponto i formato CEO. Agora. Não há muitas maneiras que você pode converter uma imagem PNG para e eu seo imagem enquanto ainda mantém a transparência. Então eu realmente encontrei um chamado Dynamic Drive. Então você basta carregar seu arquivo PNG ponto e ele vai realmente manter a transparência quando ele convertê-lo. Então você apenas cria um ícone, e então você iria carregar isso bem aqui, que está fora de favor con. E, finalmente, temos a partilha social baixa. Então, se alguém compartilhar seu site nas redes sociais, o ícone que aparece seria o que você carregar aqui. Agora, se eles compartilharem uma postagem de bloco, ele irá automaticamente pegar a imagem em miniatura da postagem de bloqueio antes com todas as outras páginas ele vai usar o ícone que você carregar aqui. Certo, então vamos voltar ao menu anterior. E o próximo item é modelo. Já discutimos isso na palestra anterior, então vou pular isso. É aí que você muda o modelo. Então, em seguida, temos editor de estilo e confira dilatador página. Ambos são editores de estilo muito parecidos. Apenas uma vez que você mudar as cores, tamanho do texto e todas essas coisas, enquanto verificar Hey, apenas especificamente para a página Checco, você vai vê-lo no segundo ano. Lá vamos nós. Então, em seguida, temos a tela de bloqueio para que você possa realmente proteger senha determinadas páginas em seu site. Então, se você estiver desenvolvendo uma determinada página, você pode mantê-la protegida e para que ninguém a veja até que você termine. Então isso é basicamente estilo para essa página, então vamos voltar e então temos a barra de anúncios. A barra de anúncios é o que aparece na parte superior do site, se você ativá-lo. Então vamos um tipo em grande venda. Ele vai aparecer aqui, e você pode transformar isso em um link. Esse show vai direto para sua loja. Ok, então vamos fechar isso, vamos desativar isso por enquanto, e vamos voltar para a página anterior. Então, em seguida, temos a barra de informações móveis, então isso geralmente é desabilitado por padrão. Então, quando você habilitá-lo, você pode escolher que é escuro ou claro. Então, quando ele está habilitado, o que você pode basicamente mostrar é e-mail, número completo, localização do horário comercial. Então isso é realmente algo que aparece apenas quando as pessoas visitam em um telefone celular em um smartphone na parte inferior. E é algo que realmente não se move, por isso sempre ganha uma opção para eles realmente chamarem Você estava pesquisando locais. Então, apenas para mostrar como isso ficaria em um dispositivo móvel, se você apenas olhar aqui na parte inferior, mapa de chamadas por e-mail e horas, isso realmente estará sempre na tela, não importa onde eles se deslocam. Então é assim que a barra de informações se parecerá. Então agora vamos voltar, e o próximo no menu dela é o crachá baseado no curso. Então, se você clicar no Squarespace e basicamente é alimentado por squarespace na parte inferior, eu não saberia realmente por que alguém habilitaria isso em primeiro lugar. Então, o próximo é CSS personalizado. Então este é o lugar onde você tinha qualquer CSS que também pode o site. Mas não está disponível como opção no editor de estilos. Vou ter mais interesses mais tarde nas palestras. Então, por enquanto, eu só sei que ele existe. Então, finalmente avançamos aqui. Na verdade, só há duas opções. Portanto, há estilos móveis desabilitados, o que basicamente torna seu site e tem o celular amigável, o que realmente afeta muito a otimização do mecanismo de busca. Portanto, sua página pode realmente ficar para baixo nas classificações do Google, então definitivamente não desativá-la. E então nós também o kit tipo IDkit ID Então isso é se você tem kit tipo adobe, que lhe dá acesso a um monte de fundos diferentes. É um serviço pago. Se você quiser, você pode colocar o seu tipo de filho. Eu vim aqui para que você possa usar esses peidos. Agora que cobrimos a parte avançada, se voltarmos para a próxima palestra. Vamos cobrir o que está no comércio e análise. Mas eu só quero tirar um momento rápido para que vocês saibam que normalmente neste momento ou talvez até mesmo no final da próxima palestra, vocês serão solicitados a deixar uma crítica. Isso é algo que você Demi faz por conta própria, e eu não tenho controle sobre quando esse problema surge. Então, se ele aparecer e você sentir que você não aprendeu o suficiente para deixar um comentário ainda, basta clicar no botão que diz, Você não quer deixar um comentário agora e então você pode fazê-lo mais tarde em um de vocês como Mas por favor deixe uma revisão, e eu quero dizer obrigado antecipadamente por deixar essa revisão. 7. Visita: comércio e análise: Ok, pessoal. Agora vamos dar uma olhada no que está sob comércio e análise. Então, se entrarmos no comércio primeiro, só há três opções. Eles são bem simples também. Então, qualquer coisa a ver com pedidos e qualquer tipo de compras em seu site aparecerá aqui. Então, ordens bastante simples. Ele terá uma lista de todos os seus pedidos. Como quem fez o pedido? O que eu p endereço. Eles usam em que dia foi feito em que item? Quanto custou, etc. Você pode exportar tudo isso para comentar, folha de valores separados por vírgula para que você possa importá-lo para um software diferente se tivermos um, e então temos inventário. Então isso mostra a quantidade de produto que você tem. Acabei de colocar um produto temporário só para mostrar como é. E então, se voltarmos, teremos descontos. Então, aqui você pode criar cupons e fornecer descontos para qualquer pessoa que queira fazer uma compra em seu site. Então, se clicarmos em adicionar desconto, temos quatro opções diferentes. Então, qualquer ordem. Então, é praticamente um desconto de taxa fixa, ou podemos ter desconto por cento. Então, como 10% de desconto na compra total ou frete grátis. E também há ordens, pelo menos isso é a mesma coisa que qualquer ordem. Exceto que tem que haver uma compra mínima, então qualquer coisa acima de $100 pode ter $5 de desconto ou 10% de desconto para frete grátis. E depois há produtos por categoria. Então vamos envelhecer, então camisetas e animais de estimação. Você pode oferecer um desconto apenas para camisetas, mas não para calças e, em seguida, produtos individuais de produto específico. Você escolhe um produto e isso pode ter um desconto. Ok, então agora que nós olhamos para isso, vamos voltar e olhar para análise. Então, aqui temos um par de opções diferentes de primeiro possui visão geral de tráfego. Então, se clicarmos nisso, ele mostra praticamente todos os visitantes do seu site. Então tivemos uma visita. Essa pessoa olhou para sete páginas, então era provavelmente apenas carne e eu estava no dia 6 de novembro para que pudéssemos olhar para ela de hora em hora, semanalmente mensalmente, e então temos uso móvel. Então, isso mostra apenas as pessoas que visitaram em seus smartphones. Então aqui ninguém visitou nosso site em nosso Smart em um smartphone nunca, e então nós temos assinantes RSS, então isso é praticamente shows que assinam seu sangue. Em seguida, temos conteúdo popular, de modo que mostra todas as suas páginas nas quais uma tem mais visualizações de página, para você possa ver o que é popular, o que está funcionando e o que não está. Então temos uma busca. E no Corey's isso é muito fascinante. Ele mostra o que as pessoas pesquisaram exatamente em um mecanismo de busca, a fim de aterrissar em sua página . Então, o que? Digitaram no Google ou no Yahoo? E, em seguida, temos sites onde consulta de pesquisa. Então isso é o que eles pesquisaram em seu site. Então agora, eu não tenho um botão de pesquisa no meu site, então eles não estão pesquisando nada. Mas se você tivesse um botão de busca aqui ou ao lado, então ele mostraria como o que as pessoas estão procurando aqui. E então temos o registro de atividades. Então isso mostra quem visitou de onde e qual página eles visitaram e em que data e finalmente, temos uma visão geral de vendas, modo que praticamente mostra o que você vende, quantas unidades você vendeu e quando você vendeu. Então, como você pode ver, a parte de comércio e análise do site é bastante simples, tipo de apenas fornece um tipo de feedback sobre como seus sites estão fazendo, e então finalmente temos as configurações, e eu cuidarei disso na próxima palestra. 8. Configurações: configurações gerais: Está bem, pessoal. Então, nas próximas três palestras vão estar preenchendo algumas informações de negócios. Agora, o principal objetivo disso é basicamente a otimização do mecanismo de busca. Assim, motores de busca como o Google saberão do que se trata o seu site. Então vamos seguir em cima para as configurações e neste real irá apenas cobrir o primeiro 4 que caem sob a informação geral. Então primeiro vai para informações de negócios aqui. Vamos inserir o nosso nome legal agora, já que as visitas, vou fazer isto para a minha própria empresa pessoal. Então vamos preencher um B g tec. Certo, agora o endereço legal. Vou deixar isso de fora, mas coloquei a cidade no estado, então é Tronto, Ontário. E isso é no Canadá. Agora, eu não vou colocar no meu registro fiscal. Gostaria de sugerir que o faça. Isso só vai para suas faturas para que as pessoas saibam, tipo, para quem estão pagando seus impostos. Então, número de contato. Vou colocar um aleatório aqui, está bem? E, finalmente, entre em contato com e-mail. Então eu coloquei meu endereço de e-mail aqui. Certo, alguns templos mostram isso no site. Esse não acredito que tenha, mas podemos colocar isso em nós mesmos. Esse não acredito que tenha, Isso não é um problema. Então, de novo, colocamos isso aqui. Isso é para o mapa. Está bem. Perfeito. E finalmente, horário comercial. Agora você tem um par de opções que você pode colocar aqui estes ar, basicamente os diferentes tipos de formato que você pode realmente usar aqui. Então eu vou abrir todos os dias porque eu realmente não tenho tempo específico. Perfeito. E vamos em frente e salvamos, e então terminamos. Agora vamos para o regional. Então este é basicamente o lugar onde seus escritórios reais. Então eu não quero colocar a configuração exata, mas eu vou. Desculpe, eu não quero colocar o endereço exato, mas eu vou colocar, hum, tipo, tipo, mais ou menos onde eu estou. Então, primeiro, a língua que eu sou canadense e depois geografia. Então, de novo , Canadá, lá está. Perfeito. E a cidade mais próxima é Toronto, e vou deixá-la na Imperial. Ok, então a seguir vamos dar uma olhada nas permissões dentro das permissões. O que você poderia basicamente, dio é dar a outras pessoas acesso à sua conta sem realmente dar seu nome de usuário e senha. Assim, por exemplo, você pode convidar alguém para ajudá-lo com o site. Basta colocar o nome e o endereço de e-mail deles aqui e você pode dar-lhes permissões específicas . Então, algumas pessoas só podem adblock poster mudou o texto, mas eles não podem mudar modelos ou, hum, como mudança de plano. E outra coisa que você pode fazer. Outra coisa que você deve fazer na verdade é em um autor básico, especialmente se você estiver indo para blogar. Então você colocaria em seu nome, sua foto e o perfil do Google Plus. Isto irá aparecer nos motores de busca também. E depois há biografia. Então, primeiro nome, sobrenome, seu site pessoal e um pouco de sinopse sobre ele e, em seguida, onde eles estão, você realmente não precisa preencher o local, mas os outros dois eu definitivamente recomendo. E então a última opção que você tem aqui é transferir a propriedade. Então, se você é um desenvolvedor, você pode criar um site e, em seguida, transferir a propriedade para quem realmente vai possuir o site. Mas tenha em mente que você tem que adicionar essa pessoa é um administrador primeiro. Ok, então a última opção nesta seção é construir uma conta. Há cinco coisas que podemos escolher. Aqui está o primeiro do faturamento. Você pode cancelar sua avaliação. Você pode ver quando está online desde então e pode alterar seu plano entre os que estão disponíveis abaixo das faturas. Você pode ver uma lista de todas as suas faturas por mês que você pagou ao squarespace. Agora, essas faturas não são as mesmas que quando os clientes fazem o pedido através do seu site. Estes são apenas para sua própria conta. histórico de login mostra todos os diferentes dias em que você fez login. E você pode excluir o seu lado clicando aqui e, em seguida, excluir o site. E então, finalmente, podemos trocar. Neste momento, temos que criar um site. Também podemos mudar para o comércio ou uma página de rosto. Certo, então era isso que estava na seção geral. 9. Configurações: configurações do site: Ok, então vamos dar uma olhada rápida no que está sob o submenu do site. Então a primeira coisa que temos na lista é informação básica. Então agora meu site está configurado para um site de negócios, que é o que eu escolhi quando criei minha conta. Agora você pode ter comércio, organizações sem fins lucrativos, pessoais ou comerciais, dependendo do que você escolheu. E depois vamos escolher a descrição do local. Não vou digitar um novo. Vou copiar e colar o que tenho no meu site pessoal. Agora vou dar-vos uma dica que vos vai poupar muita dor de cabeça. Ok, se você apenas copiar e colar de outro site Você vê, eu tenho esta fonte parece meio estranha e grande comparado com o resto dos fundos aqui. Então o que aconteceu é que ele realmente pegou o estilo do texto que estava aqui. Então, quando você copiar e colar texto, você deseja clicar aqui, que tem colar é texto simples. E agora é uma fonte menor. São os achados apropriados como deve parecer. Ok. Você também tem a opção de desativar a promoção do squarespace O que é se seus sites são realmente bons e o Squarespace pensa que ele vai realmente incluí-lo e promovê-lo para você. Então, por exemplo, se formos para isso é como a página de registro inicial, Então a partir daqui e digamos que tínhamos escolhido essa taxa de modelo se você realmente rolar para baixo em vez de pré-visualização, ele mostrará você quais empresas estão usando esta página. Então, estes são reais o que sites criados usando o modelo específico. Agora, você poderia ser incluído lá. Squarespace acha que você é digno. Ok, então agora que temos isso configurado, vamos em frente e salvar e vamos voltar e então vamos para domínios. Então domínio é o que as pessoas realmente digitando aqui para vir ao seu site. Então isso é o que ele disse agora, e eu realmente não gosto disso. Mas isso é o que vem de graça com o julgamento. Quando você realmente compra um plano, você vai realmente obter um domínio gratuito. Então, se você vai aqui e você digitar em que domínio você gostaria de idealmente, então dot c a ou dot com. Ele vai lhe dar uma lista do que está disponível para praticamente qualquer coisa que é $20 é gratuito e incluído, hum, com o seu pacote real. Mas qualquer coisa mais do que isso, você terá que pagar a diferença. Ok, e então vamos em frente e voltar. E se você tem um domínio que você comprou do Go Daddy, seu nome barato, você pode realmente conectar isso aqui. É bem simples. A maioria dos populares faz automaticamente, mas qualquer coisa como um e um. Eu acredito que você teria que realmente entrar e mudar o nome de domínio. Configurações você mesmo. Agora vamos entrar no e-mail. Na verdade, isso é muito legal. Você pode realmente obter um e-mail de domínio, Então, se eu tenho um domínio que foi www dot um b g tec dot c a. Eu poderia obter um e-mail que é informação em um b g tec dot c a. Então, primeiro de tudo, você tem que conectar um domínio antes que você possa fazer isso. Mas esse e-mail está conectado ao Google Maps, então você receberá praticamente tudo o que estiver incluído com o Google APS incluído no seu endereço de e-mail . Agora, mídia social é definitivamente uma parte importante de um site, especialmente porque ajuda com o seu S e o bastante. Agora, Squarespace torna isso muito fácil. Você só tem que ir para contas conectadas e, em seguida, você pode clicar em conectar conta em. Você escolhe qual plataforma de mídia social deseja conectar? Alguns deles realmente chamaram que você tem que fazer login antes de poder usá-lo. Por exemplo, Instagram E o que isso faz é que lhe dá a opção de colocar praticamente puxar todos os seus dados do Instagram. Então todas as suas imagens e exibir em uma página para que você possa ter, tipo, um fluxo de imagens e você pode fazer o mesmo para Facebook ou Twitter. Eu vou ter uma das minhas contas ou talvez algumas das minhas contas, só para que você possa ver como o processo vai. Então, eu vou clicar em Conectar conta vai fazer Facebook primeiro. Eu já estou conectado no Facebook, então ele deve me assinar automaticamente aqui. Lá vamos nós. E então o pop up aparece. Então mostrou o ícone social. Então ele vai aparecer onde queríamos para a nossa árvore onde ela vai aparecer, na verdade, e então este é o meu perfil no Facebook, e eu não quero mostrar que realmente quero mostrar uma página B g tec, ok? E o testamento bate seguro. Então, agora aqui em baixo, onde está o ícone? Ele vai realmente aparecer. Agora. Qualquer mídia social que eu aderir aparecerá aqui. Então, por exemplo, se eu conectar o Twitter a seguir, vamos em frente e encontrar o Twitter. Vamos procurar por ele. Na verdade, Twitter, aqui vamos nós. Agora, este, eu provavelmente vou apenas entrar na minha conta pessoal e depois autorizar. E aí vamos nós. Então agora o Twitter foi adicionado, e talvez eu queira esconder isso do rodapé. Mas eu ainda queria estar conectado. Eu faria isso. Então agora no rodapé não está realmente aparecendo. Se você quiser adicioná-lo, basta marcar onde diz mostrar ícone social e onde é a opção de download de dados. É assim que você realmente faz o download de dados do Twitter para que ele possa exibi-los em uma página. E eu vou te mostrar isso mais tarde em uma das palestras também. Certo, então isso estava conectado. Contas a seguir é marketing, e a primeira opção em marketing é para S E O. E aqui podemos preencher a descrição do nosso motor de busca, que é o que aparece abaixo dos seus sites. Você estava bem no Google ou sendo ou algo assim. Então, novamente, eu vou apenas copiar e colar a descrição do meu site do meu site pessoal. Ok, agora este é apenas texto sem formatação lá, então não há opção, realmente colar como texto simples. Ah, formatos de título da página inicial ou o que você quer que sua página inicial veja. Então agora é apenas como por cento s que se nós subirmos aqui, é o título do nosso site. Então ele iria mostrar-lhe Dem unc e, em seguida, coleção seria coisas como Blawg. Então o que o bloco iria mostrar é e agora é por cento c Então que é que então seria blawg e, em seguida, título e, finalmente, itens. Então isso é como uma postagem de bloco específica apareceria como o bloco o nome da postagem de bloco . Ok, então vamos em frente e salvar a descrição que colocamos lá e nós vamos voltar e então nós temos botões compartilhados. Então, esses botões de ar que aparecem na parte inferior das páginas bloqueadas e permite que as pessoas compartilhem em diferentes mídias sociais. Normalmente gosto de verificar tudo, porque não? Como se eles pudessem compartilhar onde quisessem me dar mais exposição e depois fixá-lo botões novamente. Esses são os pequenos botões que aparecem no canto que deixam as pessoas fixarem. Eu gosto de habilitar apenas para o blog para que o botão não apareça o tempo todo. Então vai parecer assim E podemos mudar como parece que poderíamos torná-lo menor, grande, grande, e poderíamos ser um círculo retangular e branco, vermelho ou cinza então vamos salvar vai voltar e depois página do Facebook. Ok, então esta opção nos permite vincular nossa página do Facebook à nossa página de galeria específica. Então, por exemplo, se eu afundar um b g tec, que é minha página real do Facebook, que é bem aqui, ele vai realmente adicionar um topo para o lado esquerdo aqui que vai dizer galeria agora, outro, qualquer coisa que possamos fazer é realmente instalar uma página. Então, uma das páginas que eu tenho aqui em casa sobre notícias, me leia. Eu poderia colocar um desses aqui também, então é muito legal. Maneira de manter as coisas gravadas. Se você quiser. Agora eu não vou configurá-lo, mas você pode. E, em seguida, temos o crédito do Google AdWords. Então você ganha um crédito. Então $100 de crédito com qualquer plano de negócios que você tem com o squarespace Tão simples maneira de começar a anunciar seu site e comercializá-lo em seguida vai para blogs. Então aqui temos. Podemos mudar como o U R L é assim como isso está em um poste de bloco agora. Está definido para ser o meu site barra O ano foi postado barra no mês em que foi postado barra a data foi postada e, em seguida, barra título. Eu realmente não gosto disso. Eu costumo gostar. Apenas seja o título. Então eu vou deixar assim e depois para comentários. Bem, primeiro diga gordo e depois habilitar comentários. Eu adoro ativar comentários Jessica quando as pessoas deixam comentários que está trazendo mais tráfego para o seu site e dando-lhe mais validação social. Então eu vou habilitar isso e, em seguida, vamos voltar agora discute a maneira como as pessoas podem deixar comentários usando discutir em vez de espaços quadrados construídos no sistema de comentários. Eu realmente não uso muito discutir, então eu não vou colocar nada aqui. Eu acho que o sistema que o espaço quadrado tem naturalmente funciona muito bem. Muito bem, tão simples. Curtir está habilitado para que as pessoas não precisem estar conectadas. Então, isso é bom. E páginas aceleradas para dispositivos móveis ativarão isso porque essa é realmente uma maneira muito legal as pessoas compartilharem sua postagem de bloqueio nas mídias sociais. Então, na verdade, ele salvou e vai voltar. Então, a seguir temos Segurança e SSL. Este é realmente um recurso que acabou de chegar ao Squarespace muito recentemente antes do que aconteceria é qualquer página de check-out onde as pessoas colocaram em suas informações de transação como suas informações de cartão de crédito e tudo o que era SSL, por isso era muito seguro. Mas agora todo o site pode ser protegido, então, por padrão, isso está desativado. Mas vamos em frente e clicar seguro e, em seguida, aqui você pode definir uma senha para o seu site se ele ainda estiver em desenvolvimento. Eu mantenho isso desativado apenas para que se eu estou trabalhando com um cliente, eles podem ver seu site sem fazer login e eles vão em frente e voltar e na última coisa sob o site Tab é avançado. Então aqui temos as quatro páginas antigas. Então, se você tivesse uma página do site que você excluiu, mas as pessoas ainda vão até ela. Ele irá levá-los automaticamente para um quatro a quatro páginas, que se parece com isso. E então eles podem simplesmente clicar em uma de suas outras páginas. Ok, então você pode realmente fazer isso sua página inicial, então sempre que eles visitam uma página do site que foi retirada, ele os redireciona para a casa. Mas eu gosto de sair no 404 para que eles saibam que a página não existe mais, e eles pararam de vinculá-la. Então agora podemos alterar o editor de texto padrão. Se você gostaria de um rich text um markdown, Eu diria Sair. É texto rico. Só porque Mark Down dificulta um pouco a entrada de coisas. Ok, então agora vamos para a chave de escape. Então isso é basicamente entrar com esse Kiki. Então, se você não estiver conectado, se alguém vier ao seu site e quiser entrar, basta pressionar escape. Isso torna muito fácil quando você ainda está desenvolvendo o site, mas eu acho que é como um futuro desnecessário uma vez que ele se foi vida. Então eu vou realmente desativá-lo. Não, porque eu quase posso garantir que eu vou esquecer de desativá-lo mais tarde porque eu não quero que os usuários sejam capazes de entrar no site pressionando escape. Agora, importar e exportar é uma parte extremamente importante do espaço quadrado. Se você decidir sair do Squarespace ou vir ao Squarespace depois de usar um dos CMS é, você pode facilmente trazer toda a sua postagem de bloqueio a partir daí. Então, WordPress tumbler, a versão mais antiga do squarespace Blogger Shopify ou Big Cartel. Assim, você economizará um pouco de tempo tendo que copiar e colar suas mensagens de bloco reais novamente. Então, em seguida, temos serviços externos. Então, aqui podemos adicionar um número de conta do Google Analytics se quisermos um pouco mais de informações analíticas do que o próprio Squarespace fornece e, em seguida, sua tag de associado da Amazon. Então, se você alguma vez vender produtos que alguém coletar seu dinheiro real de referência da Amazon, você pode inserir sua tag aqui e, em seguida, desenvolver remotamente. Ele abre espaço quadrado para que ele possa realmente mudar qualquer coisa sobre isso que você quiser. Eu diria para manter isso fora a menos que você saiba o que você está fazendo só porque uma vez que você ligá-lo ,ele realmente não faz site. , Vamos atualizar mais. Então o Squarespace vai parar de atualizá-lo porque parece que você sabe o que está fazendo. Ok, então certifique-se de deixar isso fora e, em seguida, injeção de código. Voltaremos a isto mais tarde porque isto é extremamente importante. Aqui você pode adicionar coisas como seu código do Google Analytics. Se você não quiser usar a tag na seção anterior, você pode adicionar casaco para o rodapé, o cabeçalho, o cabeçalho, as páginas bloqueadas, todo esse tipo de coisas boas. Ok. E então temos você é l mapeamento. Este tipo de vai junto com a página 404 anterior, e adiciona um pouco de recursos a isso. Então vamos dizer que você tinha um blawg e foi originalmente o seu site barra plug e, em seguida, você alterá-lo para um site barra informações e dicas. Você pode realmente redirecionar o site para que qualquer pessoa que visita seu bloco antigo seja redirecionado para o novo bloco. Então, de novo, extremamente bom. Se você está fazendo um monte de grandes mudanças, e, finalmente, é o machado de imagem. Se, por padrão, isso estiver desativado, o que ele faz é quando você carregar uma imagem para o espaço quadrado, ele irá puxar o título da imagem e as tags. Se você já tiver isso preenchido, maioria das imagens que você enviar não terá isso de qualquer maneira, mas você pode habilitá-lo apenas para que você possa salvar um segundo ou dois ao importar imagens que têm isso para que possamos fazer isso lá e então voltar novamente e que cobre tudo na seção do site e da próxima vez vai passar por cima da seção de comércio e , finalmente, será feito com a configuração das configurações e podemos mover para o site real . 10. Configurações: configurações de comércio: Certo, pessoal, espero que estejam entusiasmados. Esta vai ser a última palestra que vai cobrir as informações de back-end do site. Começando a próxima palestra, vamos cobrir a criação do site real. Então as coisas divertidas. Certo, então, embaixo da seção do karma, há algumas opções. Vou passar por eles, e depois acabamos. Está bem. Gosto de tirar essas coisas chatas do caminho. Primeiro. Quando o fizer, dizemos, só porque de outra forma, sei que vou adiar, e não vai ser feito a tempo. Ok, então primeiro vamos para pagamentos, ok. E pagamentos. Temos opções para dois métodos diferentes. Temos stripe e PayPal para stripe. Tudo o que você faz é clicar conectar faixa e irá levá-lo para um link onde você pode se inscrever. Então eu vou fazer isso um pouco maior para que você possa ver o formulário completo para que você possa entrar. E se você não tiver uma conta, basta clicar em, inscrever-se. Assim que você clicar, inscrever-se, ele vai levá-lo para um formulário para que você possa criar uma conta, e então você pode ir em frente e preencher suas informações e levá-la a partir daí. para PayPal agora. Para mim, ele diz em beta, mas para você, dependendo de quando você vê o curso, pode não ser. Então PayPal é na verdade que acabou de sair hoje, na verdade. Então, tipo, jantar no espaço quadrado? Uma opção para você usar isso até agora. Então o que você pode fazer é você pode inserir o endereço de e-mail. Então, por exemplo, se eu inserir meu negócio um e, em seguida, inserir o código para que você não será solicitado para um código que eu sou porque eu tentei entrar algumas vezes agora, Então, se você clicar em próximo, ele vai levar você para criar uma conta. Agora, isso é porque neste momento este endereço de e-mail não faz parte de uma conta empresarial. Então, se você tem um endereço PayPal com a conta comercial, por exemplo, se eu entrar no meu pessoal real, então vá aqui e então vamos lá nós vamos, E H. E então eu vou em frente e vou em seguida. Ele foi feito pela última vez de assinar, vez que ele realmente vê que isso é uma conta. Ok, então é isso que eu costumava arrumar isso. E você também pode alterar a moeda da sua loja aqui de USD para uma moeda diferente. Então, o próximo é check-out, e a partir daqui você pode conectar o seu chimpanzé e-mail escolher fora se você quiser coletar endereços de e-mail das pessoas . Então, no futuro, se você tiver uma venda em seu site, você pode enviar-lhes um boletim informativo. Então temos o país padrão. Então, se você vender apenas para as pessoas nos Estados Unidos, por exemplo, que faria sentido para definir o país padrão para os Estados Unidos, Então isso poupa-lhes um sentimento a menos que eles têm que preencher. Em seguida, temos o endereço de entrega e cobrança, que você possa definir automaticamente o endereço de entrega para ser o mesmo que o endereço de cobrança. Agora, se o cliente lavado depois devido a endereços diferentes, ele pode simplesmente marcar um botão de rádio, e então eles têm a opção de fazer isso. E, em seguida, depois disso, nós expressamos check-out. Então, o que? Isso é isto? Digamos que você tenha apenas um produto em seu site. Realmente não faz sentido para o cliente adicionar isso a um carrinho e, em seguida, clicar no botão de check-out. Então, o que isso faz é que ele substitui o botão adicionar ao carrinho pelo botão de compra. Então, assim que eles clicam em comprar que automaticamente vai para check-out. Ok, então o próximo é estilo carrinho de compras. Aqui temos a opção de alterar o esquema de cores da verificação de prazer da página em vez de escuro. Então, agora nosso site é ah, fundo branco com texto preto, e a página de check-out será semelhante. Então, digamos que você mude esse fundo para preto. Você quer que o texto seja realmente branco em vez disso, e todas as outras cores para ser uma cor clara também. E é para isso que serve este botão. E agora o próximo número do pedido. Na verdade, é bem básico. É o número que aparece em sua fatura para o próximo pedido que um cliente faz para que você possa iniciá-lo em um. Mas digamos que você está fazendo negócios por um tempo sem seu site do squarespace, e você já fez 100 pedidos que você poderia realmente começar em 101 para que você não se confunda entre as faturas e, em seguida, temos campos adicionais. Então, a partir daqui você pode coletar informações extras do cliente no check-out. Assim, o número completo é coletado com endereço de envio e cobrança. Pessoalmente, não preciso de um número completo do meu negócio. Vou desligar isso e, em seguida, você também tem um formulário personalizado página de check-out. Digamos que você faça algo como vender treinamento pessoal online. Você pode coletar alguém peso inicial. Eles estão terminando. Espere, , os exercícios que eles gostam de fazer e o que eles não gostam de fazer tudo sem ter que enviá-los pessoalmente. Então, se você vai para informações adicionais para que seja o nome do formulário e então você pode adicionar um campo extra e podemos fazer isso talvez uma caixa de seleção, e então podemos chamá-lo de que exercícios você gosta? E então eu vou te mostrar, na verdade, como você adiciona formulários mais tarde também. Mas basicamente, é uma caixa de seleção por linha. Então agachamentos e, em seguida, elevadores mortos. E eu soletrei errado. Então mortos levanta tudo bem, e isso é o que ele iria aparecer, como no próprio formulário. E eu realmente não preciso de informações adicionais. Então, parece algo assim. Agora, eu realmente não vou usar isso para o meu site porque eu realmente não preciso dele. Então eu vou clicar em descartar, e eu não vou realmente usar o formulário. Mas, quero dizer, você é livre para usar, e você pode ver que tipo de recursos poderosos que adicionam ao seu check-out. Então, isso era tudo para campos adicionais, e agora vamos verificar as políticas de armazenamento de idade. Assim, nas políticas da loja, temos três caixas diferentes que podemos preencher a política de devolução, os termos de serviço e a política de privacidade. Então, por exemplo, algumas coisas que você pode colocar aqui não é retorno após sete dias, por favor, não compartilhe este produto com mais ninguém. Se é como um produto digital, como um livro E, que após a política de privacidade do modo boneca, algo como nós não vendemos seu endereço de e-mail para terceiros, esse tipo de coisas. Agora você pode realmente usar o Google para políticas de privacidade e usar como um modelo que você pode tipo de trabalhar fora do trabalho para o seu negócio. Ou você pode fazer seu advogado por você sem provavelmente ser a coisa mais inteligente a fazer. E, finalmente, temos faturas. Então, sob faturas enfraquecer basicamente mudar como ataques aparece na fatura. Certo, então dê uma olhada nisso também. Ok, então vamos voltar, e depois do comércio e eu vou para as notificações. Então, agora, sempre que alguém pede algo do seu site, ele recebe automaticamente um e-mail. Agora, se eles tentarem responder a esse e-mail, você provavelmente não vai recebê-lo apenas porque ele é enviado automaticamente para nenhuma resposta nas informações de início do squarespace . Então, novamente, você pode mudar isso se você quiser, hum, para que se alguém tiver uma pergunta sobre o pedido, ele pode apenas clicar em responder na página do pedido, e então nós temos o endereço de e-mail de origem. Então, sempre que um cliente recebe um e-mail, isso é o que vai mostrar sob de eu realmente recomendo deixá-lo como está, menos que você tenha seu próprio domínio pessoal, como um b g tec dot c a. E você tem o e-mail apenas porque se você usar algo como o Gmail ou o Hotmail , são nove vezes que comparecem. Ele será marcado como spam, e então eles nem vão recebê-lo, ou ele vai direto para o e-mail de spam ou lixo eletrônico. Então, de novo, deixe como está agora. Você pode receber e-mails automaticamente se seus itens caírem abaixo de um determinado nível de estoque. Então vamos dizer que você sempre tem 10 ações e de repente vai para duas porque alguém pediu oito. Então você recebe automaticamente um e-mail dizendo: “Ei, “Ei, você está ficando sem este item. Você tem mais? E, em seguida, temos e-mail personalizado. Então aqui você pode realmente mudar a aparência do e-mail quando ele está sendo enviado. Então, para ordem confirmada. Então, uma vez que você confirmar, peça. Mas o e-mail será parecido para que você possa mudar isso. E esta é uma convenção que o Squarespace usa para o número do pedido e que produto é todo esse tipo de coisa. Então, vamos voltar e você também pode personalizar o pedido cumprido e pedido re financiado e também o cabeçalho e rodapé que aparece no e-mail. Então, no cabeçalho, você pode colocar algo como Obrigado pelo seu pedido. Então, obrigado por sim, e dessa forma que é automaticamente adicionado a cada e-mail relacionado a pedidos. Então nós podemos salvar isso, e então novamente, este é um rodapé e você pode enviar um e-mail de teste só para ver como seria. Então isso foi para o cabeçalho e rodapé. Então vamos voltar já que cobrimos isso e depois o transporte. Então aqui é bastante básico. Você pode ter diferentes opções de envio, por isso taxa fixa ou dependendo do peso. Então taxa fixa de vamos dizer que foi chamado de transporte no dia seguinte e, em seguida, podemos colocar como uma taxa base. Então vamos dizer que todo o transporte vai custar US $10, em seguida, US $2 por cada item que o pedido e podemos definir isso para apenas um país específico. Então agora é em qualquer lugar do Canadá, recebe o transporte, e então podemos adicionar outro para um país diferente. Então, talvez para os Estados Unidos seja $20. Então, no dia seguinte, envio novamente e será $20, em seguida, $10 por item. E é aí que os EUA EUA fecharemos o Canadá e adicionaremos os Estados Unidos. Então os Estados Unidos estão bem, e então digamos que são os dois únicos lugares que enviamos, então vamos revidar. E então, apesar de que definir em seguida os impostos dele. Então aqui você pode realmente configurar uma taxa de imposto específica. Então, por exemplo, adicione país. Vamos ver o Canadá, e vamos usar Ontário, então HST seria 13% e você pode cobrar os ataques reais no transporte e serviços, bem como em vez de apenas produtos. Porque, novamente, seus produtos podem ser algo que você envia ou um serviço como treinamento pessoal para que você possa carregá-los em ambos e, em seguida, economizaremos e voltaremos. E finalmente temos doações. Então, se o seu site for para a igreja Laker e você está coletando dinheiro como uma doação, algo assim, você pode enviar uma mensagem a qualquer momento alguém realmente doar para o seu site e você pode mudar o que a mensagem diz, qual é o título do e-mail e, em seguida, você também pode enviar um e-mail de teste apenas para ver como ele será. Ok, então nós cobrimos tudo lá e nós cobrimos tudo sob comércio agora. Então, se voltarmos e agora tudo sob configurações é feito, então começar na próxima palestra será começar com a criação de um site real. Espero que estejam entusiasmados com isso. 11. Páginas de capa: como criar a página: Certo, pessoal, como prometido, vamos finalmente entrar nas coisas divertidas. Então, criando páginas reais, só um lembrete rápido. Como mencionei nas palestras. As páginas que dizem demo ao lado dele ainda não estão ao vivo. Então, qualquer um que visita essas páginas, então se eles realmente clicarem naquelas páginas, na verdade não mostrará nada. Onde é a página inicial aqui? Eu já fiz uma página natural, mas eu não quero que isso mova minha página inicial para fora só porque não tem nada a ver com o meu negócio. Então eu vou preparar um pêssego de cobertura. Ok, então a palestra de hoje é sobre páginas de rosto. Então, o recém que vamos fazer é clicar no mais bem aqui em cima. Quanto tempo podemos escolher o tipo de página que queremos criar. Então, vamos em frente e clicar na página de rosto, e vamos nomeá-lo pode ser home page. Ok. E agora este é um menu que aparece estas páginas aéreas que eu recomendaria que ele usasse enquanto você está em desenvolvimento. Só para que as pessoas saibam que o site está sendo trabalhado e que eles devem voltar mais tarde. Você também pode coletar endereços de e-mail aqui para que você possa realmente enviar um boletim informativo diretamente quando seu site de trabalho estiver ativo. Então a primeira coisa que vamos fazer também ir para mudar o layout, eu vou escolher um que nós gostamos. Agora há alguns aqui. Você pode filtrá-lo novamente. Alguns deles estão forrando páginas. Alguns deles são de perfil. Então eles vão mostrar, como, sua foto ou como, uma foto de alguma coisa, e então mostrar uma descrição. Você também pode ter áudio, que será reproduzido. Por exemplo, este reproduz uma única música ou faixa de música. Onde é este lugar? Uma lista de reprodução que você pode carregar. Então você tem vídeo. Então você conecta um vídeo ou vídeo do YouTube e eles serão reproduzidos quando alguém pressionar o botão de reprodução e então você tem a localização. Então, se você está abrindo uma loja, você pode mostrar onde ela vai abrir só para que as pessoas saibam antes do tempo. E finalmente, Twitter. Então você pode mostrar o seu tweet recente na página de revestimento real, então eu vou realmente escolher a página de destino, e eu vou usar esta. Ok, então quando isso abrir, o que eu vou fazer é ir em frente e apertar salvar, e então nós vamos voltar e lá vai mudar os diferentes aspectos desta página. Então o primeiro é branding e texto para que possamos mudar as palavras que aparecem logo no topo . Aqui. Não quero usar palavras. Vou usar o meu logótipo. Então vamos o logo do dedo do pé irá adicionar uma imagem. E minha imagem é, acredito que aqui embaixo. Então aqui e logo logo e eu vou carregar isso. Lá vamos nós, e esse logotipo aparecerá em apenas um segundo. Lá vamos nós. Agora vamos em frente e mudar a manchete para chegar em breve e o corpo para apenas a minha linha de identificação . Talvez. Ok, e nós vamos em frente e é seguro agora. A maioria dos layouts, como as diferentes camadas que poderíamos escolher, tem configurações semelhantes em branding e texto, então você não deve ver nada diferente em sua próxima. Temos mídia, então este é o pano de fundo. Então primeiro eu quero baixar um fundo que eu realmente não gosto. Isso realmente não combina com o que estou tentando fazer, então vamos para imagens livres. Então os dois que eu mais gosto de usar são picaretas obedecer e pixels. Vou colocar os dois na descrição para que vocês possam ir em frente e baixar imagens de seu ar livre para usar imagens que você não tem que colocar qualquer, uh, uh, fazer onde você conseguiu ou quem tirou a foto, qualquer coisa assim. É livre e livre de royalties. Então vamos em frente e digite, talvez site, e veremos o que aparece. Passei pelo mesmo aqui. Ok, então é isso que mostra um piano. Realmente gosto de qualquer um desses. Talvez isto e aqui. Eu acho que talvez este seja um bom, então vamos em frente e vamos baixá-lo. Eu recomendaria usar isso para este tamanho porque o tamanho máximo permitido no espaço quadrado é 1600. Então não adianta usar uma imagem deste tamanho. Então, vamos clicar sobre isso e vamos em frente e baixar. Ok, então isso foi baixado. Agora olhe aqui e carregue a imagem para que possamos usar Getty ou apenas uma imagem normal do seu computador. Getty imagens são imagens pagas, mas você pode ver como eles vão se parecer antes de você usá-los, e eles têm um pouco de seleção, então Por exemplo, se eu digitar no site, estes são os diferentes aqueles que aparecem para que você possa usá-los com um selo até que você esteja realmente pronto para ir vida. Então, há algumas imagens lá em cima, então eu vou fazer o upload da minha própria imagem e há quando eu baixei e isso é o upload perfeito. Então eu vou em frente e salvar e nós vamos voltar, OK, e no próximo acima nós temos ações. Então isso seria como este botão de contato bem aqui. Então vamos para ações agora temos um botão de contato que leva a um contato ou realmente desculpe, ele realmente direto para o site squarespace. Podemos deixar assim. Podemos adicionar como um menu. Então seria como em casa sobre contato para que pudéssemos ter páginas diferentes lá, mas eu vou deixar como um botão e vamos colocar na verdade, não, eu nem vou colocar um botão. Eu vou apenas colocar em um formulário para ser notificado nele formulário e vai colocar em Sim, eles vão perguntar seu nome e apenas endereço de e-mail. Eu realmente não preciso de assunto e mensagem. Se fosse um formulário de contacto, eu faria, mas vou ligar isto ao chimpanzé do correio. Então,faça Então, formulário de chimpanzé masculino e ele vai para o armazenamento, e então podemos conectá-lo ao chimpanzé postal, ou podemos enviá-lo automaticamente para o nosso endereço de e-mail. Então é assim que você conectaria um salto masculino. Basta clicar aqui e fazer login. Vou mostrar a vocês o que é isso. Então vamos em frente, eu assino. Perfeito. E agora só tenho que escolher a lista. Acho que só tenho uma lista. Lá vamos nós. Vá, vá para isso. E, em seguida, sob avançado, podemos alterar a aparência do botão enviar. E o que eles são o que lhes é dado depois de submeterem algo. Então vamos em frente e vamos salvar isso. Assim, as pessoas podem se inscrever para uma lista de discussão. Quando é que o meu site vai vida? Então vai ser assim? Ok. Não, não gosto de como isso diz forma militar, , então vamos voltar e trocar gordura para ser notificado. Perfeito. Então, vamos salvar, salvar isso e vamos voltar. Então, a partir daqui, a próxima opção é ícones sociais. Então isso é basicamente apenas uma caixa de seleção se você quiser mostrar seus ícones sociais aqui em baixo ou não. E obviamente eu quero mostrá-lo só para que as pessoas possam obter mais informações antes do meu site ir. A vida é tão segura e vamos voltar agora. Há mais mudanças que podemos fazer nesta página, e isso está sob a seção de estilo. Mas eu vou repassar isso na próxima palestra só porque há um pouco mais de detalhes lá dentro. Está bem, vejo-te em breve. 12. Páginas de capa: desenhando a página: Certo, então continuaremos de onde paramos. Estávamos prestes a dar uma olhada no submenu de estilo, então vamos para lá agora mesmo. Então, isso é realmente o que o editor de estilos será parecido para as outras páginas também. Haverá mais estilos que você pode realmente adicioná-lo, mas isso é apenas para a página de rosto. Ok? Então, quando você realmente me deixa te mostrar bem rápido. Então, quando eu clicar na página inicial que criamos e, em seguida, ir para letra de estilo, isso é apenas para o estilo nesta página da capa. Considerando que se entrarmos em design e, em seguida, editor de estilo, isso é na verdade para todo o site menos a página de rosto. Ok, então as páginas de capa têm seu próprio editor de estilo específico. Então vamos para a capa. Voltarei no editor de estilo. A primeira coisa que vejo imediatamente é que quero o meu logotipo. Três maiores. Certo. Então há algumas coisas que você pode fazer no lado esquerdo. Você pode procurar marca e imagem, e então você pode aumentar e diminuir. Isso aqui facilitaria as coisas. Você pode realmente clicar no seu logotipo, uma vez que é isso que você deseja editar e, em seguida, irá automaticamente puxar para cima apenas uma marca. E então você pode aumentá-lo e diminuí-lo aqui. Agora, o máximo que ele permite através de seu controle deslizante é 100 pixels, que é sobre este tamanho. Eu queria um pouco maior. Então o que eu vou fazer é realmente clicar aqui, e então eu posso realmente torná-lo um pouco maior do que o controle deslizante me permite. Tantas. 1 25 Então eu vou salvar, e depois voltamos para mostrar tudo para que possamos ver tudo seguro. Não aconteceu lá. Realmente? Outra coisa que notei é que em breve? Acho que é um pouco grande demais. Tão rápido diretamente sobre ele ou novamente, você fica no lado esquerdo, vá para a manchete. Vou clicar nele, e não quero que seja ótimo. É meio difícil de ver. Então fique com preto ou talvez leia de verdade. Sim, vamos ficar com o vermelho, ok. E então vamos mudar a fonte para você pode praticamente escolher qualquer uma das fontes aqui. Sim, vamos deixar assim que não é uma grande diferença, e então vamos mudar o tamanho para torná-lo um pouco menor. Lá vamos nós. E ele vai fazer os sites lindamente trabalhados um pouco maior e vai fazer aquele preto um pouco maior. Ok, então cerca de 45 livros parece bom e não parece que podemos torná-lo maior só por não haver espaço suficiente. Então 45 até 20, na verdade, maior enfraquecer ficar, eu acho que sim. Vamos deixá-lo em 23, já que é aí que o máximo sai. E lá vai salvar e nós vamos voltar. Save está sendo um pouco estranho comigo aqui. Lá vamos nós. Só está demorando um pouco. Está bem, então. A última coisa é uma imagem de fundo D.C D.C Como tem aquele pequeno Hayes. Não é totalmente como 100% de opacidade como deveria ser. Então, se você clicar na imagem aqui, cor de sobreposição automática. Então aí, aí que está o problema. Então podemos escolher uma cor para a sobreposição. Então, por exemplo, eu posso sobrepor uma cor preta, e você pode realmente escolher qual porcentagem você quer que ela seja mais tarde. Então, se você escolher um 0,8, que é 80% ou como 90% ou mesmo um, então é completamente preto. Então eu acho que talvez goste. 0,3, talvez cinco. Na verdade, eu acho que cinco parece o melhor, então vamos deixá-lo em 0,5 do preto e, bem, é seguro. E acho que é só isso. Como eu gosto de como isso parece agora, então vamos deixar assim. Sabe, eu fiz o que acho que parece melhor para esta página. Mas é claro que você pode passar pelas diferentes opções aqui. Então, por exemplo, há posicionamento. Agora, novamente , essas opções são diferentes, dependendo de qual modelo de página de rosto você escolheu. Lembre-se, isso foi quando havia, tipo, 18 ou 19 diferentes que você poderia escolher. Então este é um que eu escolhi, e estas são as opções que eu tenho para este. Então, primeiro, temos posicionamento para que possamos mover aquele pequeno quadrado branco e esquerda, direita ou centro, direita ou centro, e eu gosto dele no centro e você pode fazer o texto em si à esquerda da linha centro à direita? Eu gosto do centro, então você tem a imagem. Então, no fundo, você pode obter uma grande imagem que obviamente eu não gosto. E outra dica rápida. Você pode realmente clicar neste pequeno x seu dedo do pé sob a alteração que você fez para essa configuração específica e, em seguida, a cor de sobreposição automática. Eu não gostei disso. E então tivemos a altura da imagem, que na verdade era o logotipo aqui. A manchete estava bem aqui. O corpo estava aqui no fundo, então a cor de fundo agora é tão cinza. Então essa é a cor por trás desta imagem aqui. Como temos uma imagem, a cor de fundo que escolhemos não importa. Mas se você decidir, queria um fundo preto em vez de uma imagem, aqui é onde você mudaria isso. E então a cor por trás do texto é chicoteada no fundo aqui para que possamos fazê-lo ler preto novamente verde, e podemos mudar a opacidade para baixo na parte inferior. Neste momento, o valor está no valor hs l, modo que é matiz, saturação e luminosidade. Então aqui embaixo nós poderíamos adicionar, por exemplo, 0.2, e isso vai colocar no OPC para nós. Mas eu acho que nós adicionamos um aqui Sim, então hs l A E então nós podemos colocar em Opie City. Outra coisa que podemos fazer. Se você não gosta de colocar valores NHS l, você pode colocar um valores hexadecimais. Então, como, por exemplo, 000 seria preto F f f seria branco. Tecnicamente, é f f f f f f f então você pode usar qualquer tipo de valores hexadecimais como esse, e você também pode usar RGB ou RGB. Qualquer valor ou 2 55 a 55 2 55 0 seria nenhuma cidade paga de zero na cor branca. E então você pode fazer 0,5, por exemplo, e uma coisa legal que você pode fazer é realmente apenas ir para valores hexadecimais. Então o site seria o site das escolas W três. Incluirei isso também. Então você poderia, por exemplo, escolher como uma cor azul e, em seguida, os diferentes tons em uma cidades pagas dele. Então essa é uma maneira legal de você escolher as cores que você quer, ou novamente, você pode simplesmente passar por aqui. Isso faz com que seja muito legal também, e eu vou te mostrar mais uma ferramenta. Na verdade, é uma paleta de cores. O verdadeiro destinado que eu uso. Então aqui você pode realmente escolher algumas cores que você gosta, e ele irá automaticamente escolher as melhores cores para você usar com base nisso. Então, vamos apenas refrescar isso. Na verdade, lá vamos nós. Então escolhemos algumas cores que gostamos, então talvez eu queira vermelho e cinza, já que é perto do meu site. Então estas eram algumas cores que funcionam bem juntas. Então coloque isso na descrição real da palestra também. Não, não quero ficar com esse troco. Obviamente, temos a borda da página. É a borda branca do lado de fora. E podemos escolher o tamanho da fronteira. Na verdade. Não, na verdade, gostaria que a fronteira fosse rápida. Não, eu não sei. Eu não, mas você pode escolher a cor. Não quero uma fronteira no site. Gosto da imagem completa. Então podemos escolher para quê? Ele é usado no botão real aqui. Eu não gosto daquele cinza, na verdade, eu queria estar vestindo Thea. Outras cores vão torná-lo em preto. Na verdade. Vamos copiar a cor daqui. Eu gosto desta cor, então basta copiar isso e bem passeado para isso, para esta cor de que colado aqui. Certo, só para ter certeza que é da mesma cor e a mais segura. E vamos dar um passo lá. Veremos o que mais está disponível aqui. Então, ícones sociais. Sim, eles são meio pequenos agora. Eu nem sequer os noto no início. Vamos torná-los talvez até extra grandes, porque não há realmente nada mais nesta página. E depois vamos torná-los sólidos. Não, isso é meio difícil de ver. Não com Border foi feito. Na verdade, foi provavelmente melhor como era antes. Então nós apenas desfazer esse normal saber que waas Nacchio e não cores padrão. Ok, eu gostei muito mais. , Talvez ler, lembre-se, lembre-se, copiou a última cor vermelha. Então nenhum branco parece melhor. Certo, então vamos embora. É esperar e vamos em frente e bater em Salvar e temos uma última coisa a fazer aqui. Esta é uma página que eu quero mostrar a home page real para as pessoas quando eles visitam o site. Desculpe de novo. Lá vamos nós. Então vamos voltar, e vamos clicar neste pequeno ícone de engrenagem aqui porque você vê a pequena cabana que está ao lado de casa agora à esquerda, logo acima do cursor do mouse. Então isso significa que essa página é uma página inicial. Então, quando as pessoas digitam o meu diriam, isto é o que eles vão ver primeiro, eu quero mudar isso. Então nós vamos clicar no pequeno ícone de engrenagem aqui ao lado da página inicial e vamos bater o ícone de engrenagem aqui, e eles estavam indo rolar para baixo e definir isso como a página inicial no testamento confirmar. Certo, e então vamos economizar. E assim temos isso como um pêssego caseiro. E agora o ícone inteiro aparece embaixo dessa página. Então, estamos prontos para ir. Ok, pessoal, então na próxima palestra vai cobrir os diferentes tipos de páginas além da capa, e nós vamos assumir a partir daí. 13. Páginas de edição: Tipos diferentes de páginas: Certo, pessoal, vendendo essa palestra, vamos dar uma olhada nos diferentes tipos de páginas que podemos criar. Antes de fazermos isso, vou fazer duas mudanças rápidas. O primeiro é o meu logótipo. Porque inicialmente, eu coloquei isso como seu site falso, e eu quero mudar isso agora. Então eu vou colocar o meu logotipo agora, então eu acredito que o meu logotipo está realmente aqui. Está bem, Perfeito. Então isso está fazendo isso. Coloque isso. Vou mudar isso também. Só porque no meio do caminho, decidimos que seria para o meu site de negócios de verdade, então vou colocar minha gravata aqui. Ok. Perfeito. E então eu também vou colocar no golpe favor porque eu realmente só tinha gerado isso também . E o social vai torná-lo um logotipo quadrado porque a maioria dos sites de mídia social tomar logotipo quadrado . Então vamos colocar isso, e isso deve ser processado em um segundo. E então ficaremos seguros, vamos em frente e salvamos. Voltaremos só para ter o meu logótipo aqui em cima. E depois mais uma mudança que vou fazer é ir às páginas e mudar a página inicial para casa. Então, só para casa sozinha. E eu vou mudar de casa para home page e eu vou mostrar a vocês por que eu fiz isso em um segundo foi principalmente apenas para mantê-lo de ser confuso entre os diferentes tipos de páginas. Ok, vamos dar uma olhada nos diferentes tipos de páginas que temos disponíveis tão rapidamente. O sinal de mais aqui para criar uma nova página, as novas. Bastante direto. É só uma página normal. Os outros são os que precisam de um pouco de explicação. A razão pela qual eu mudei esta página de rosto para apenas casa é porque eu não queria que ela dissesse a página de rosto porque pode ser confuso entre a página de rosto e a página, então nós vamos apenas deixar esta casa. A segunda coisa que temos são produtos. Agora Products é que não é realmente uma página é mais como uma loja, então eu realmente vou renomeá-la loja só para que vocês entendam o que eu quero dizer? E na verdade é aqui em baixo. Eu já fiz um antes, então eu vou realmente apagar este. Vou te mostrar aquele que eu conheço tão bem guardado. Se você clicar nele, você pode realmente adicionar produtos diferentes. Então você clica neste pouco mais aqui em cima. E então que tipo de produto você tem? Então pode ser um serviço físico digital. E depois vou mais à loja mais tarde. Mas isso é basicamente o que é. Então você pode ter vários produtos lá, e esta é a aparência da página da loja. Agora. Eu nunca uso a página da loja sozinho no menu. Eu geralmente ligado a um produto específico nas diferentes páginas. E eu vou te mostrar como fazer isso em uma palestra posterior também. Ok, então agora vamos sair do ícone de adição novamente. O próximo tipo de página de capa de páginas que abordamos em uma palestra anterior. E depois temos pasta. Então esta aqui a página sobre é na verdade uma pasta. Não é uma página real. Então, se você clicar em um barco, ele realmente não vai a lugar nenhum porque não é uma página. Hum, na verdade, deixe-me rapidamente apenas fazer todas essas páginas, porque agora eles são conteúdo de demonstração só para que eu possa realmente clicar nelas. Assim é criar, criar. Vou criar todos eles. Vou remover algumas dessas páginas mais tarde porque não preciso de todas como as notícias. Não vou precisar disso. Então crie. Criar. Então você também pode fazer isso. Basta passar e pressionar criar para todas as páginas que você deseja manter. Claro, você também não tem que ficar com tudo. Então eu volto. Acho que há mais um creme perfeito. Então, a página sobre. Se você clicar em um barco, ele não vai a lugar nenhum porque é apenas uma pasta. As coisas dentro das páginas reais e o que acontece é que se você subir para o topo, o sobre é uma pasta, então é como um menu suspenso. Ok, então o sobre não é na verdade uma página. Ok, então a seguir temos a página do álbum, então se você clicar no álbum, podemos dar o nome que você quiser. Todos os nomes de músicas. Então o que podemos fazer nas páginas do álbum realmente fazer upload de arte do álbum e, em seguida, colocar uma descrição para o álbum e o nome do artista. Também não adicionou faixa para que você possa carregar faixas de música e, em seguida, as pessoas podem vir a esta página para ouvir essas músicas, e eles também podem compartilhá-lo. Então é isso que as páginas do álbum. Se você realmente não usá-lo para muitos sites, talvez para alguém que realmente gosta de um D. J ou alguém que realmente compõe música. Mas para qualquer outra pessoa, não é muito útil. Então eu vou em frente e vou apagar isso porque eu não vou usar isso. E, em seguida, temos a página de índice. Então, as páginas de índice tipo de semelhante à pasta. Há uma diferença. E eu vou te mostrar agora. Então, se fizermos isso sobre o que acontece é se arrastarmos tudo de cerca de para a página de índice . Então, novamente, é assim que você pode arrastar coisas entre maquiagem para cima e para baixo clicando e arrastando. Então, agora, se você entrar na página um sobre que acabamos de criar, o que você verá é que nós temos o que fazemos no topo, e então nós temos projetos, e então temos parceiros, que é aqui e, em seguida, entrar em contato, que é aqui em baixo. Então temos todas as quatro páginas na mesma página. Agora, o único lado ruim disso é que se você passar o mouse sobre ele, você não pode ir para seções diferentes. Então, se você quiser ver contato, você realmente tem que clicar em um cinto, e isso é legal até o fundo muito, muito fundo. Então essa é uma razão pela qual não usaria isso. Mas a capa é muito boa se você quiser, tipo, ah, uma página inicial. Então você tem, como quatro ou cinco seções diferentes na página inicial. Ok, então eu poderia usar isso da minha página inicial. Mas vou apagar por enquanto, e mostrarei o que mais temos. Então, em seguida, nós blogamos, é claro, muito importante. Então tem um pouco minúsculo? A. Então, já temos um bloco aqui. Chama-se notícia, então vamos clicar nisso. E então o que podemos fazer é compor uma nova postagem de bloco. E então, se clicarmos aqui, isso é o que veríamos, e eu vou passar por isso mais tarde na palestra, especificamente sobre blogs. Agora, eu só quero mostrar os diferentes tipos de páginas muito rapidamente, então vamos ver o que vem a seguir. Temos eventos, então isso é basicamente como um calendário. Você poderia ter eventos como reuniões de ioga ou como um, esse é um curso específico que você está tendo em seu em um dia específico. Você pode colocar isso agora Você não pode ter pessoas registradas para esses eventos é apenas como um mostrando que tipo de eventos você tem. Então você tipo de preencher isso com o nome do evento, e então você pode adicionar uma descrição do evento. Hum, e que datas começar? Então você basta clicar no dia de início e, em seguida, você pode entrar hora. E quando terminar, você pode colocar etiquetas. Não é muito útil. Ajuda um pouco com o CEO, então você pode adicionar italiano, fazer como, você sabe, yoga, yoga, retiro, hum, ou algo assim. E então você coloca os eventos em uma categoria. Então reuniões, , vendas, esse tipo de coisa. Em seguida, nas opções, podemos escolher uma imagem para o evento e, em seguida, evento que você é também vai ser sempre calendário porque esse é o nome da nossa página. E então quem é quem escreveu este evento e se você quiser que ele exiba algum tipo de u r l que algo pode clicar para ir a um site diferente e, em seguida, um trecho é basicamente uma pequena região do que você tem aqui em cima então você pode talvez usar o primeiro você sabe, 50 ou 60 palavras. E você também pode adicionar um local ao seu evento, como onde ele vai acontecer. E então isso é se você quiser automaticamente, como, agora, eu tenho meu Facebook conectado, então atualize automaticamente o Facebook com o evento, como dizer que eu não tenho evento acontecendo. Então essa é a página do evento novamente. Eu não vou usá-lo porque eu vou estar fazendo, como, um site de web design, não muito útil para mim, a menos que eu estivesse tendo algum tipo de evento como eu ensinar as pessoas a fazê-lo. Então vamos ver, Em seguida temos Galeria Galeria é muito importante. É provavelmente a segunda ou terceira página mais usada que eu gosto, eu acho, então vamos fazer talvez galeria de fotos. E basicamente é ah, você apenas adiciona imagens para que você possa, você sabe, carregar várias imagens, carregar várias imagens, e eu estou selecionando imagens diferentes em uma janela mantendo o controle pressionado para que você possa manter controle pressionado e clique em várias imagens. Então você abre. Então, um dos formatos tiff para que você tenha que é suportado ser prendas PNG e J pinos. Então, carregue essas três e as duas últimas são imagens um pouco maiores, então vamos demorar um pouco, então eu posso não esperar por elas. Na verdade, enquanto espero por isso, deixa-me mostrar-te outra coisa. Muito rápido. Você vê esse pequeno círculo que aparece no meio? O que isso é, é basicamente como se ele mostra aqui é o ponto focal. Então, se alguém tivesse essa imagem explodindo em sua tela e a imagem inteira não caberia , Squarespace aumentaria automaticamente essas coisas importantes. Então agora está definido para o meio, que é o meu local real. Então eu não me importo. Na verdade, é um bom ponto focal. Então vamos deixar como está. Então vamos voltar. Então é assim que a galeria de fotos ficaria. Ok, agora, novamente, eu não uso a galeria de fotos no menu como está agora. Eu costumo movê-lo para o fundo, então não está no menu. E então eu ligava para ele a partir de uma dessas páginas, então ele realmente me deixou mostrar a vocês muito rapidamente o que eu faria Então, a partir de uma dessas páginas, eu clicava em, editava e adicionava em uma galeria. Ok, não se preocupe muito sobre como eu fiz isso. Vou rever isto outra vez na palestra mais tarde. Mas basicamente para fora adicionado como este porque eu realmente não tenho uma página apenas como uma galeria. Usei a galeria para fazer propaganda. Há coisas tão próximas que eu deletarei a galeria que adicionou fratura. Eu só quero salvar as alterações ou descartar as alterações. E então, finalmente, estamos no último, que é apenas um link, então isso não seria uma página seria apenas um link para outro lugar. Então vamos dizer um clique nele e então nós podemos fazer isso no YouTube. E então eu poderia adicionar o meu real. Basta colocar o youtube dot com e então eu estou abrindo em uma nova janela já que é para um site diferente e então vamos bater em segurança. A razão pela qual eu defini isso para abrir em uma nova janela, e para que agora, se alguém clicar no YouTube, abra uma nova guia aqui. Então, você. Então eles ainda têm seu site aberto também. Então, quando eles terminarem com o YouTube, eles podem voltar para o seu site, enquanto que se ele apenas os levasse automaticamente para você, também, sem abrir uma nova janela, eles se perderiam no YouTube, olhando para vídeos diferentes, e as chances são que eles vão voltar para o seu site. Então é por isso que faço assim. Não, não quero ligar para o YouTube agora, então vou apagar. E depois voltamos ao modo como começámos. Então, isso abrange todas as diferentes páginas que temos disponíveis. Então, na próxima palestra, onde vai realmente começar a criar páginas? 14. Páginas de edição: como adicionar novas páginas: Ok. Então, da última vez que falamos sobre os diferentes tipos de páginas que estão disponíveis no espaço quadrado , e desta vez, o que vamos fazer é mudar essa navegação para melhor atender às nossas necessidades. Então vou seguir a mesma navegação que tenho no meu outro site, e vamos copiar isso aqui. Outra coisa que vou te mostrar é agora, vocêvê como diz “casa “e “home page “? Outra coisa que vou te mostrar é agora, você Porque eu queria que as pessoas vissem esta página primeiro enquanto o site da minha esposa estava em desenvolvimento. Então eu realmente não gosto Eu não quero que esta página para estar no menu. Então o que eu vou fazer é arrastá-lo até aqui para não estar ligado, e eu vou te mostrar o que isso faz. Então, se eu voltar para esta página inicial Então, isso é o que meu site vai parecer, como obviamente com minhas próprias imagens e tudo mais, mas eu não quero que essa casa que está aqui embaixo apareça aqui. Então é por isso que eu mudei para baixo para não ligado. Agora essa página ainda existe, e é a primeira página em que as pessoas chegam, mas assim que entram no meu site. Como quando lhes dou acesso, claro. Em seguida, eles não terão nenhuma opção de voltar para esse site, exceto clicando neste logotipo, que os leva de volta para a página inicial automaticamente. Mas assim que eu mudar isso para a página inicial, tudo isso terá desaparecido. Então eu posso até excluir essa página se eu quiser mais tarde. Ok, então vamos em frente e copiar algumas páginas. Agora, a primeira coisa que eu gosto de fazer com qualquer site, sua primeira configurar a estrutura da página apenas para que o menu, pelo menos, está no lugar. E então eu posso começar a editar cada página individual. Então eu vou fazer isso. Vou fazer a mesma coisa aqui com o meu próprio site. Então, primeiro tenho em casa. Então eu vou mudar isso de volta para casa agora, só porque agora que você sabe o que os diferentes tipos de página lamentam, não há necessidade de chamá-lo de página inicial. Então, isso é perfeito. Vamos chamá-lo de lar, e então temos portfólio, e também temos sobre Celeste. Adicione uma porta para você. Direção P. Ciúmes? Eu não coloquei para sua página, então torná-lo portfólio para que seja uma página nova. Vou ignorar tudo aqui por enquanto e basta clicar em começar a editar, e eu não vou adicionar em nenhum, como texto ou imagens ainda. Então eu vou apenas colocar seguro um pequeno portfólio de arrasto para a segunda posição. Então é a segunda coisa no menu. Então, em seguida, temos hospedagem, então vamos colocar isso em uma ondulação. Então coloque mais em uma página e hospedagem. Agora estou adicionando tudo é páginas. Se algo mais vai funcionar melhor, como, ah, loja ou um bloco, então vamos mudar isso como, como, outro aparece assim hospedagem, porque eu sei com certeza como podem suportar tudo. Isso é o que eu estou acrescentando. Tudo é uma página agora. Em seguida, temos sobre nós agora que já temos em uma pasta de barco. Eu só queria ser uma página. Eu não preciso que ela seja pasta, então vamos torná-la uma página e vamos excluir a pasta sobre e alterar o que fazemos para sobre nós. Então, sobre nós, está bem? E então eu também vou mudar o U R l para sobre nós agora. Se eu colocar um espaço lá, automaticamente colocar o hífen, que é o que eu quero porque isso não é nada para ver. É só uma palavra mal escrita que nem detecta como pH de Anabelle. Se tivermos o hífen ,ele saberá que um barco é um mundo diferente do nosso. É só uma palavra mal escrita que nem detecta como pH de Anabelle. Se tivermos o hífen , Então ele vai saber que esta página é sobre nós, e que é o próprio motor de busca. Onde está embaixo? Se você usar um sublinhado, ele nem me deixa usar um sublinhado. Então, se você fez algo como sobre nos sublinhou para a garota que na verdade não será detectada como duas palavras separadas porque, hum, cebolas de pesquisa realmente não usam sublinhado um separador de palavras. Então é por isso que o squarespace muda automaticamente para o hífen. Então, se eu colocar um espaço tão sobre o espaço, desculpe por nós e o espaço, ele irá automaticamente mudá-lo para um hífen em vez disso. Então vamos em frente e salvar gordura, e no próximo blog temos. Agora eu sei automaticamente. Esta vai ser uma página tipo bloco, então eu vou realmente excluir isso e realidade. Então você sabe como se faz. Então você aperta mais e depois blogou e eu vou chamá-lo de blog, então isso é perfeito. E depois voltamos e movemos isso para cá e, em seguida, temos contato conosco, então eu não preciso me ler. Page, tome medidas. Deixe-me ver como isso se parece. Então, sim, posso mudar isso para uma página de contato. Vamos mudar todas as imagens e textos de qualquer maneira, geralmente gosto de começar com páginas em branco. Uh, como sempre. Mas neste caso, vou mudar o nome só para poupar um pouco de tempo aqui. Então eles eram apenas um portfólio de casa hospedando sobre nós blawg. E então entre em contato conosco para que todas as páginas que eu tenho aqui, modo que é perfeito. Então é assim que você configura o menu. Agora vou passear com você como é a navegação secundária aqui. Colocamos galeria de fotos e guardamos aqui. Assim, neste tema, neste nome específico, alguns o têm no lado esquerdo. A navegação secundária realmente aparece no rodapé aqui. Então o que você pode fazer é colocar algo como seus termos e serviços, suas informações protegidas por direitos autorais, sua política de privacidade, esse tipo de coisas aqui. Então isso é só para essa equipe, que é um tema Bedford que eu vou voltar para casa, ok? E então, na próxima palestra, eu vou mostrar como podemos realmente estilizar as diferentes páginas como precisamos e começar com, como, um modelo padrão para essas páginas, se isso ajudar. 15. Páginas de edição: Banners: Ok, então agora vamos fazer é dar uma olhada rápida em como podemos mudar o banner de fundo. Então a bateria está no topo, atrás do cabeçalho. Não aparece em nenhum outro lugar no pico. Então o que fazemos para isso é pairar sobre o banner até que este pequeno pop-up apareça. Então, novamente, isso só aparece quando você passa o mouse sobre o banner real em si. E eles iam clicar no banner. Então o que surge é a imagem real que estamos usando agora. Agora, o que você vai notar é que se você clicar no básico, nós vemos este verde. E já vimos isso antes. Eu mostro-te onde. Então, em casa, se você clicar nesta pequena engrenagem, esta página vai aparecer. Então esta é a mesma página. Você pode realmente clicar na mídia aqui em cima. E isso vai levá-lo para onde você pode mudar de volta o banner agora mesmo. Podemos nos lembrar. Eu te falei sobre esse ponto. Você pode movê-lo para cima e para baixo. Então, se você olhar agora para a nossa página inicial, você vê que ela está sendo cortada no topo das árvores bem aqui na parte inferior. Está sendo plantado bem aqui. Por isso, do outro lado daqui. Agora, digamos que eu tinha um pouco como uma tenda aqui que eu realmente queria mostrar e que essa pessoa realmente não importa. O que eu posso fazer é arrastar o ponto focal até o canto e, em seguida, pressionar Salvar, e agora o canto inteiro será mostrado. Certo, agora vou mostrar a vocês como isso realmente muda a imagem. Então, a primeira coisa que você faz é clicar, remover, e então você pode obter uma imagem de Getty imagem clicando aqui, assim como antes. Como você deve ou você pode clicar em adicionar uma imagem para que eu vou clicar em Adam Image. Agora, eu tenho algumas imagens aqui que eu posso mostrar a vocês. Só um segundo rápido. Eu tenho alguns salvos. Lá vamos nós. Então é que eu usei este. - Sim. Eu quero que você trabalhe. Que vai abrir isso em e então eu vou bater seguro. Vamos ver como isso se parece. Ok, então isso não é ruim, mas eu realmente não posso ver meu logotipo no topo aqui, então eu provavelmente vou mudar essa imagem, e ele realmente não diz que é sobre web design ou algo assim. É meio difícil dizer o que os sites falam a partir dessa foto. Vamos em frente e mover removido isso e vamos adicionar uma imagem diferente. Eu tenho um dos que podemos usar, que é este. Mas esta é uma imagem muito grande. E como eu disse antes, espaço quadrado não lida com imagens grandes. Bem, então é melhor redimensionar isso. Então deixe-me ir em frente e copiar e colar isso. Então eu só fiz o controle, cópia. Então controle, vê? E, em seguida, controle V para Colar. E depois vou editar isto. Apenas abrindo com a Microsoft. Sim, só com tinta. E eles vão redimensionar. E eu só vou mudar os pixels e eu vou fazer a borda horizontal, que é a maior borda, apenas 1600 e, em seguida, salvar perto e vou usar este. Então, é uma imagem menor para o site carrega mais rápido, especialmente porque uma imagem maior realmente não muda nada quando se trata de Squarespace . Então vamos bater, salvar e então lá vamos nós. Esse é muito melhor do que o que eu tinha antes. Eu vou acabar mudando essa cor mais tarde também. Agora, o que vamos fazer é a próxima vai clicar no banner novamente. E eu só quero te mostrar que você não pode. Você também pode ter um vídeo aqui. Então, em vez de imagem aparecem no topo. Basta clicar no vídeo agora no YouTube ou, hum, a mídia funciona melhor. Então vamos em frente e copiar um URL de vídeo do YouTube. Então eu apenas digitei em uma busca por espaço quadrado. O anúncio puxou para cima o 1º 1 que apareceu e eu copiei o URL, e então eu apenas colei aqui. Está bem. E então isso abre e eu posso escolher um filtro. Assim, como um filtro desfocado pode inverter as cores. Você poderia fazer o brilho mais ou menos. Você provavelmente não quer brilho total. Mas tenho certeza que podemos editar isso de uma maneira diferente colocando uma cor sobre conversa e depois velocidade de reprodução. Então 1,5 vezes 0,5 vamos deixá-lo em um e depois em um navegador móvel. O vídeo não aparecerá porque os vídeos em dispositivos móveis usarão muitos dados . Então, por padrão, ele não aparecerá. O que podemos fazer é colocar uma imagem para que a imagem apareça no site móvel e o vídeo apareça na área de trabalho. Então bem colocado, de fato, a mesma imagem que eu usei aqui e o, bem, cabeça segura. Então agora o que vamos ver é o vídeo em segundo plano. Pode levar dois ou três segundos para carregar, dependendo da batida da Internet. Então, aqui vamos nós. Então o tipo de poderes no vídeo começa a ser reproduzido agora. Eu tenho sorte porque essas fontes brancas realmente aparecem por cima disso. Mas o logotipo está sendo escondido em algumas das telas. Então, há algo que podemos fazer aqui. Vamos dar uma olhada rápida. OK, então nós vamos projetar e, em seguida, editor de estilo, e o que nós podemos fazer é realmente apenas clicar aqui em cima sobre o logotipo para que você veja, a barra azul vai ao redor da barra de navegação e o logotipo, e então nós 're diz transparente em imagens de massa. Podemos desligar isso, e é isso que vai acontecer. Ok, agora, isso funciona às vezes, e não funciona. Outros, como agora, não parece muito, muito bom. Gostava mais de como era antes. Então vamos tentar nossa próxima opção, que é o pairar sobre o banner. E nós vamos colocar em uma cor mais escura ou desculpe, uma cor mais clara desde nossos logotipos escuros. Então vamos fazer isso, talvez, como um branco. Vou fazer um branco, mas ainda assim não funciona. Vou fazer um branco, Você sabe o que? Deixe-me colocar um branco aqui. E então lá vamos nós. Poderíamos fazer algo assim. E então, é claro, teríamos que mudar as barras de navegação. A cor está bem, então a navegação seria preta. E, em seguida, o ativo, que é uma página de navegação que você está em agora. Então agora estamos em casa. É por isso que é branco. Poderíamos fazer esse pão para combinar com o logotipo e então também esta pílula bem aqui . Então esse é o botão de navegação. Se você não quer esse botão, você pode apenas clicar aqui. Então, volta ao normal. Na verdade, não sei se gosto. Deixe-me ver. Sim, eu acho que sim, eu realmente não gosto disso, então eu vou me livrar disso, mas nem todos os modelos têm a opção para essa pílula. Este faz. Então temos isso disponível no editor de estilos. Então olhe, como para trás, para trás. Ok, então agora eu vou fazer algo aqui. Eu realmente não quero usar o vídeo. Então o que eu vou fazer é mudar a cor de sobreposição de volta para o grande aqui, o preto que era antes. Vou voltar para a imagem. Então vamos voltar, e vamos para as páginas, o equipamento, a mídia e tudo o que você tem que fazer. Podemos deixar o vídeo lá e mudar para a imagem. Assim, se você quiser voltar para o vídeo, é muito fácil. Então lá vamos nós. Temos a imagem agora. Andi, o preto na verdade não parece muito ruim. Talvez tenha que mudar a Europa uma cidade de preto sobreposição apenas um pouco, porque é um pouco escuro demais. Então, vamos clicar aqui e, em seguida, sobreposição de massa. Vamos abaixar um pouco de novo. Vou passar por essas opções com você em um líder. Palestras. Bem, agora, eu só quero mostrar como podemos ter certeza que esta imagem é perfeita porque esta é a primeira coisa que as pessoas vêem quando eles vêm ao seu site. Então tem que ser perfeito. Ok, então foi assim que você adiciona um banner, imagem ou vídeo. Agora, o que vamos fazer é mudar rapidamente este texto aqui, porque obviamente meu site não é sobre sustentabilidade. Então, vamos clicar neste ícone de engrenagem. Então, sob a descrição aqui, você verá que cada um desses se alinha com isso, certo? Então qualquer coisa que você ousar bem aqui em negrito vamos aparecer com um grande voluntário e qualquer coisa que você deixar é normal terá esta pequena escrita em itálico. Então o que eu vou fazer é colocar um A B g tec. Vamos tentar fazer coisas diferentes aqui. Então, um b g Tech. Sim, Capitals. - Tudo bem. E então aqui eu vou colocar no meu site. Eu vou colocar devido a eles Talvez eu vou levar isso. Não, não faz. Copiar. Certo, então, na verdade, leve onde pressione os olhos. Certo, vamos levar isso. Porque eu me lembro que eu coloquei isso em com a revolução deslizante para que ele não vai funcionar. Html e CSS em PHP. Lá vamos nós. Na verdade. Wordpress como capital lá. E então ele vai dizer para começar hoje. Então ficar assim o quê? Agora, você vê, isso sublinhou a necessidade de aprender mais. Isso significa que é uma ligação. Então agora é um botão. Então, qualquer coisa que você fizer um link se tornará automaticamente um botão em Lee na descrição deste modelo. Agora, a maioria dos modelos tem esse mesmo recurso. Então primeiro, eu vou remover esse link, e então eu vou colocar em começar. Quero dizer, agora, hoje comece hoje. E então eu vou fazer disso um link, e ele vai para a minha página de contato. Desculpe, está em itálico. Link está bem aqui. Vai ligar para a minha página de contacto, que é aqui. Então, novamente, vou passar pela vou passar pelaestrutura de ligação novamente, e eles vão bater em segurança. estrutura de ligação novamente, E eu só notei que enquanto eu estava ligando para nos contatar, é um maiúsculo você em um maiúsculo. Então eu acho que eu cometi esse erro antes. Tão seguro lá. Então agora eu volto para casa e parece que agora a outra coisa que eu queria tentar era colocar o A B g tec no topo. E então a segunda linha é a linha menor. Vê como isso parece? Não, eu gosto do outro lado do ar. Então, sim, como você pode ver, há um pouco de experimentação para ver o que parece melhor e novamente, como como algo parece seu objetivo. Então você pode gostar mais assim. É que eu gosto mais. Como estava antes? Então eu salvei. E então uma última coisa que eu queria fazer voltar para este dialeto ITER, e eu vou mudar a cor disso, e vamos usar essa leitura. Não me lembro qual era a letra. Isso foi tão rápido. Copiou isto? Não, idealmente, eu gostaria de copiar o mesmo vermelho no meu logotipo. Mas só porque estou com um pouco de pressa para mostrar a vocês, vou usar o vermelho mais próximo que eu puder pensar. Você sabe o que eu tenho certeza que foi C C C - Sim. Tenho a certeza que era a minha cor local. Tão bem, acredito que é que manter mudou isso também. Eu só me lembro disso do site anterior. Então, vai salvar? E acho que isso parece muito bom por enquanto. WordPress html CSS ph B. Sim, eu acho que parece realmente saber. Eu só vou mudar uma última coisa, porque quando alguém vê WordPress, html e CSS Ph. B, ele realmente não diz que é uma empresa de Web design. Pode ser alguém que oferece tutoriais sobre esses assuntos. Então eu vou mudá-lo para sites lindamente trabalhados. E então é meio que um pouco mais óbvio o quê? É o que o site é sobre imediatamente antes mesmo de começar a rolar. Então lá vamos nós. Então é assim que você faz uma imagem de banner. Ok, agora, se você entrar na página do portfólio, eu vou te mostrar mais uma coisa. Algumas pessoas não querem apenas uma imagem aqui. Você pode querer duas ou três imagens como um controle deslizante. Agora, quando você subiu aqui e depois a mídia, você só pode carregar uma imagem. Então eu vou te mostrar como você pode usar um controle deslizante. Agora, isso funciona para este modelo e alguns dos outros. Hum, não todos eles. O OK, então você clica nele. Então isso não está na massa em si, mas na página. Então você clica em editar. Então, em vez de banner no próprio conteúdo da página. Então, onde você realmente digitaria suas informações, você colocaria isso e então você passaria aqui mesmo no topo . A primeira coisa que está na página tem que ser uma apresentação de slides. Está bem? E eles estavam indo para Teoh. Então essas são algumas imagens padrão que eles colocam automaticamente podem realmente ver se isso funciona para minhas necessidades. Então, o que você também quer ter é mostrar título e descrição não muito importante, mas automaticamente transição e mostrar próximo e anterior seria o dedo ideal ter em Vamos salvar e, em seguida, salvar em. Agora eu vejo como você pode. É uma apresentação de slides, mas não está mostrando largura total como o outro como a casa estava. Mas se realmente atualizar a página ou simplesmente deixar a página e voltar para a página agora você vai ver que tomou sobre os recursos que realmente queria assumir. Então, se você quiser mudar a imagem, você tem que clicar em editar e, em seguida, editá-la aqui em baixo. Ok, agora eu vou realmente mostrar a vocês com minhas imagens porque eu quero mostrar a vocês como mudar o texto real em cima dela. Então vamos pegar esta imagem e esta imagem, e vamos enviá-las. Não basta dar um segundo para fazer o upload, porque existem duas imagens maiores e maiores. Eu não redimensionei esses dois. Agora, com um espaço quadrado, você vai notar que às vezes o girador apenas alguns dias lá, um, isso pode significar que ele está preso, mas muito raramente isso acontece. Normalmente, é apenas uma imagem maior no, como sua conexão com a Internet pode ser mais lenta. O servidor pode ser lento, então dê um segundo, geralmente deve se corrigir. Então, isso é bom. Será que se aplica? Quem vai salvar? E eu só quero mostrar a você, como se você pressionar Refresh aqui, isso vai funcionar, também. Ou você pode ir para uma página diferente e, em seguida, voltar para o portfólio. Então, há isso. Agora você vê que não há casamento aqui. E se você realmente ir dedo do pé como o ícone de engrenagem e digitando olá, o que acontece é que nada aparece. Então não é assim que se muda o texto. Se é uma apresentação de slides, você realmente tem que clicar em editar, e então nós vamos bater nele novamente na apresentação de slides, e então nós vamos clicar no ícone de engrenagem bem aqui. E então nós podemos realmente digitá-lo como um título e uma descrição. Agora, a coisa legal sobre um controle deslizante, você pode ter um texto diferente para cada imagem. Então este poderia ser sites lindamente trabalhados que eu soletrado incorretamente sites tão lindamente trabalhados . Eu vou apenas copiar isso por agora, e este pode ser WordPress html e CSS JavaScript. Será que vai salvar? E então este pode ser, um, contacte-nos para mais informações e vamos em segurança e eles vão aplicar Save novamente. Então, novamente, vamos visitar outra página e depois voltar ao portfólio. E então o que vemos novamente é absolutamente nada. Agora, a razão para isso, deixe-me mostrar-lhe rapidamente. Nós temos tudo configurado perfeitamente para as imagens, mas na própria apresentação de slides. Se você clicar em Editar e acessar o título e a descrição da mostra de design, não marcamos isso. Na verdade, desliguei-a para mostrar a vocês que agora isso não importa onde exibido, exibido,não importa muito. Vou deixar no centro. Mas novamente não importa, porque isso é apenas se você quiser deixá-lo como uma apresentação de slides, mas para nós ele está indo para o cabeçalho. Então só há uma maneira de isso aparecer. Então eu vou em frente. Vou atualizar a página aqui, e então vocês verão que o texto vai realmente estar lá desta vez. Então lá vamos nós. Wordpress. Então, uma coisa que você vai notar é que esta página não há nenhuma formulação para e esta página ele só tem esta segunda parte, mas não a parte sites lindamente trabalhados. E deixa-me mostrar-te porque é que isso acontece. Então, para a página inicial, quando queríamos algo para parecer ousado como um B g tec, temos que colocá-lo na caixa de descrição e realmente jogá-lo. O título da página não aparece em nenhum lugar aqui. Então, quando vamos para a página do portfólio e vamos para o conteúdo da página e depois para a galeria, e então também para esta imagem, isso nós colocamos como um título, certo, o título da imagem. Então, se quisermos aparecer aqui, temos que colá-lo aqui. Então, Matri, um, você não apenas colar assim você usou Ah, o editor de texto simples. Eu me recupero como copiar, colar conteúdo em páginas. Verá porque é que usar isto é muito, muito importante. O próximo vai ousar. E depois batemos em “salvar”. E então entraremos aqui e copiaremos isso e bem andamos aqui. Está bem? E também jogou isso. Está bem. E depois bateremos em segurança. Então agora, se ele tivesse se candidatado... agora vamos cruzar os dedos e tudo deve ser perfeito. Então vá para o portfólio e lá vamos nós. Tudo está perfeito. 16. Páginas de edição: Blocos básicos: Ok, então agora que discutimos a massa aqui em cima, vamos rolar para baixo até o conteúdo real da página. Então altere o conteúdo da página. Você passa o mouse sobre ele até obter esta pequena guia que diz o conteúdo da página e, em seguida, você clica nele tão bem simples. Então, em seguida, você notará imediatamente nesta interface de usuário que quando você passar o mouse, você verá pequenas gotas de chuva olhando círculos que aparecem assim agora, se eu passar o mouse aqui, eu vou colocar em um bloco que vai ocupar o todo o chicote da esquerda aqui, todo o caminho para a direita aqui. E se eu colocar um aqui de novo, todo o caminho da esquerda para a direita, se eu colocar um aqui, ele aparecerá no fundo aqui embaixo. Então a linha mostra o quão largo esse bloco vai ser. Então, por exemplo, se eu colocar um bloco de texto aqui, ele só vai ser tão largo, então vai ser como, Olá, e então eu vou copiar e colar, e isso é o que vai ser Rápido. Só vai ser tão branco. Então eu vou apagar este bloco e agora colocá-lo aqui. Então bloco de texto aqui vai esticar toda a largura da página. Ok, então essa é a primeira coisa que você tem que saber sobre a interface. A segunda, quando você passar o mouse sobre algo que você precisa clicar, você pode adicionar no bloco, e há diferentes tipos de blocos que você pode adicionar. Então, primeiro, eu vou cobrir os blocos básicos, que são os sete em cima aqui. Ok, o primeiro 1 que você já me viu usar um pouco. É o bloco de texto. Então, quando você clica em texto, é apenas um editor de texto normal. Nada muito extravagante para que você possa colocar como Legal s um cabeçalho. Então esta pode ser a minha página inicial. Então eu vou colocar um pouco sobre seção aqui. Assim vai dizer sobre nós. Quero que este não seja um texto normal, mas um título. Ok. E eu também queria ser centrado. E agora parece um pouco, então. Então vamos em frente e ousá-lo com o realce e parafuso. Lá vamos nós. Ok, então é isso. Então é assim que adicionar um bloco de texto. Agora, se você quiser remover toda a formatação, você pressiona isso, ele apenas move tudo faz com que seja regular, exatamente como era antes. Então, novamente, centrar negrito e torná-lo um rumo. E você também pode desfazer refazer e, em seguida, itálico é aqui. Desculpe, temos. Não tomei itálico. um Você pode torná-loumlink para que você possa vinculá-lo a uma página diferente para que você possa vinculá-lo, por exemplo,ao por exemplo, Google Dot C A. E você pode abri-lo em uma nova janela quando alguém clica nele. E outra coisa que você pode fazer é vincular a uma página que está no seu site. Então minha página de sangue ou minha página sobre, que é provavelmente o que eu vou fazer, mas não no título em uma seção diferente talvez aprender mais. E então outra coisa que você pode fazer é realmente vinculá-lo a um arquivo. Então, quando alguém clica no texto real, ele faz o download de um arquivo. Então, um documento ou um pdf para uma imagem, qualquer coisa assim, ele basta clicar em adicionar um arquivo, e então um pop-up virá escolher o arquivo que você deseja enviar, e então você pode clicar em abrir em uma nova janela. Ah, mas geralmente eles apenas baixaram, então isso não é muito preocupante. Então eu vou em frente e vou embora este ano. Na verdade, não preciso deletar, mas não quero que seja um link. Hum, então vamos em frente e remover o link. Só está escondido atrás do seu “ok “, então é uma chance de 50. Então vamos tentar isso. Lá vamos nós. Então, o link é removido. Agora, outra coisa que você quer ter cuidado com o bloco de texto é quando você copiar e colar, um conteúdo real de outro site. Então, por exemplo, se eu adicionar em outra caixa de texto e, em seguida, eu ir para o meu site pessoal e copiá-lo e, em seguida , eu tentar colá-lo aqui, você verá que ele paga praticamente exatamente como ele é aqui. Então o ousado sobre e, em seguida, desdobrou você nós. Então não é assim que eu queria no meu site, porque obviamente eu não quero a primeira parte que Bull fez. Mas vamos dar uma olhada. Digamos que se eu for até aqui e fizer um texto normal, porque não quero que seja maior, na verdade não muda porque você não pode realmente estilizá-lo como você pode realmente colocar em itálico ou fazer a parte dos EUA. Boulders Bem, mas você pode realmente mudar o que ele realmente é, a fim de ser capaz de realmente mudar a formatação. Usando estes botões aqui em cima, você tem que acompanhar isso como texto simples. E para fazer isso, você vai até aqui. Então este pequeno quadro de clipes aqui, cole na imprensa de informação, OK, e então agora você pode realmente estilizá-lo. Como você quer. Então vamos fazer este título. Um sentinela. Vamos enviar para isso. Vai torná-lo ousado. Ok, eu tinha que voltar. Então, de novo, vou te mostrar. Isso é bem, se aqui em cima, Eu não tenho ousadia e é normal e eu acidentalmente pressionado entra daqueles um espaço extra lá. Então, se eu pressionar backspace para trazer isso à tona, ele vai assumir o estilo do que essa linha era. Então vamos ter que reformatá-lo. Então, se isso acontecer, não entre em pânico. Você só tem que remodelá-lo e eles vão realmente centralizar isso também. E vou apagar esta parte porque não gosto de como isso parece. Ok, então agora isso está feito. Antes de continuarmos, vou economizar para que, se algo estiver errado, não perca esse troco aqui. Então essa é a prática Você provavelmente quer adotar uma onda apenas economizando constantemente. Então vamos bater editar novamente, e então eu vou mostrar a você realmente excluir esta primeira causa que eu já tenho sobre lá em cima e então agora nós vamos colocar em um bloco diferente e vamos ver o que mais está disponível. Então, em seguida, temos marcado para baixo. Lembrem-se que eu disse a vocês em uma palestra anterior que a redução não é muito importante, então vocês poderiam colocar, tipo, texto normal. Então, na verdade, eu posso tipo de replicar o que eu tenho lá em cima. Então, sobre nós, então eu poderia fazer esse cabeçalho um e enfraquecê-lo no centro. Podemos centralizá-lo, se quisermos, colocando etiquetas. Então esse é o centro. Hum, eu realmente não gosto de usar Mark Down. Quero dizer, isso só torna as coisas mais difíceis para mim, então eu realmente não vou usá-lo, mas apenas saiba que ele está lá. Se você precisar no futuro. Há um caso em que, na verdade, usuário e que é onde perguntas freqüentes seção no site que vai estar na palestra bônus só porque é um pouco mais avançado e que você precisa para revestir um Um pouquinho. Mas se isso é algo que você está interessado, será nas palestras bônus. Então, em seguida, temos citação. Então isso é mais uma vez bastante simples. É como uma citação que alguém disse Então algo como “Olá “e agora dito por mim Então olhe assim. Ok, realmente não há muitas maneiras de você estilizar isso. Você pode ir para o editor de estilo de design e alterar o texto como a fonte e a cor e o tamanho. Mas além disso, não há maneira de, tipo, colocar uma citação final ou algo assim algum dia. O lugar vem com isso. Então alguns eu não tenho certeza de quais, exatamente. Mas alguns deles têm, como abrir e fechar aspas, este não tem. Então não vou ficar com isso. Mas sim, eu só sei que ele está lá, e isso é o que ficaria com algum texto demo lá. Então feche isso e apague. E, em seguida, temos imagem novamente. Bastante direto. Ele só gosta de adicionar uma imagem. Então, clicamos. Adicionar uma imagem, e eu escolheria uma imagem que eu quero adicionar. Então é um presente, então vamos em frente. Então, está carregando. E então aqui eu poderia colocar em uma legenda se eu quiser, hum, se você não quiser capturar e apenas removê-lo e, em seguida, não exibir legenda você também tem a legenda aparecer como uma sobreposição ou apenas quando você passar o mouse sobre a imagem assim vai embora. E quando você pairar ele vem para cima e você vai ver isso melhor quando você realmente salvar. Então salve Não está lá você no entanto, ele vai voltar que não deve ter tomado. Ok? E então você paira sobre. Oh, desculpe. Eu realmente não coloquei em uma legenda real para que torná-lo texto. Aqui vamos nós. Agora ele vai mostrar. Lá vamos nós. Então agora você sabe por que não apareceria. Ok, então isso foi imagem. Você também pode esticá-lo. Hum, você realmente não vai notar muito aqui. Vamos ver como posso te mostrar como seria o trecho. Então, se eu colocar como um espaçador para o lado Não, nós também não trabalharíamos neste caso. Hum, ok. Mais tarde, quando eu entrar. Quando eu tiver a chance de mostrar que estruturas mostrarão o que ele faz. Mas basicamente ele se estende até a largura total. Então, em vez de ocupar, metade do contêiner ocuparia o contêiner cheio. Espero ter a oportunidade de te mostrar isso numa futura palestra. Então, em seguida, temos lightbox. O que isso significa é que quando alguém clica na imagem, ela aparece em tela cheia para que eles possam ver em tela cheia. Então mostrar-lhe o que volta faz. Então alguém clique nele e lá vamos nós, aparece em tela cheia. Então isso é bom para qualquer trabalho de fotografia, esse tipo de coisa, não para imagens normais que você está usando em um caso como este. E então você também pode estilizar a lightbox para ter uma sobreposição de luz. Então, em vez de ser preto nas bordas, vai ser esperar assim. Certo, então isso é Lightbox. E, finalmente, você também pode colocar um link para ele. Agora você não pode ter lightbox e link porque, obviamente, quando alguém clica nele, eles vão a um site ou um link ou ele aparece. Era uma imagem em tamanho real que você não pode ter ambos. Então, se você tiver lightbox, o link funcionará tão rápido para adicionar link. E podemos colocar de novo qualquer, hum, conteúdo do site ou arquivo e depois deixar cancelar. E então novamente aqui você também tem esse ponto focal que você pode controlar, mas isso é praticamente tudo. Aqui você tem o nome do arquivo, que você sempre deseja preencher. Então isso é muito bom para os CEOs. Ou você coloca talvez algo como, um, homem e terno azul, certo, então você pode salvá-lo assim. Então vá em frente e remova essa imagem. E acredito que temos mais algumas coisas para passar. Então vídeo novamente muito auto-explicativo leva você ao vídeo. Você pode realmente clicar aqui para ver todos os diferentes serviços que você pode vincular. Então, se eu tomar como um vídeo do YouTube que eu tenho e ele apenas copiar e você apenas colar controle C controle V e o vídeo aparece. E se você não gosta da imagem que está mostrando, você pode realmente fazer upload de sua própria imagem. Então esse é o nosso upload, , certo? Então você pode usar sua própria imagem para que se pareça com isso e eles pressionam play novamente. Você pode ter legendas abaixo. Então, puxa a legenda diretamente do YouTube. Então, não vou usar o costume. E isso é com legendas. Então, e você pode mudar novamente a legenda aqui. Mas vamos clicar. Não exibir. Então é assim que funcionaria. Vamos clicar em Cancelar. Eu realmente não quero mostrar um vídeo, então eu vou apagar isso, e então vamos passar para o áudio. Então o áudio funciona. Você pode fazer upload de uma faixa de áudio ou você pode realmente clicar em arquivo externo e link em um arquivo de áudio que você pode ter armazenado em sua plataforma de hospedagem onde alguém está hospedando plataforma e, em seguida, as pessoas podem baixá-lo. Você também pode, se você se você podcast que tudo que você também pode colocar em suas informações de feed RSS e coisas aqui através do iTunes. Mas, novamente, observe que isso só funciona se você estiver adicionando-o a uma página bloqueada. Então agora, se eu sentir isso, não iria realmente atualizar meu iTunes. Só porque não é uma página bloqueada, é apenas uma página normal. Só porque não é uma página bloqueada, Ok, você pode descobrir mais sobre isso na verdade você sabe o quê? Vou colocar o link nisso na guerra de palestras, na verdade, bem aqui. Se você clicar em, saiba mais que você vai. Ele vai puxar para cima uma pequena seção que vai dizer exatamente como você poderia usar podcast para que eu não vou passar por uma causa justa. Não há muitas pessoas podcast. E se você fizer isso, então você sempre pode ir e descobrir isso aqui porque não é realmente não é muito difícil. Você só tem que preencher algumas informações básicas aqui, e você também pode mudar o design para ser você sabe como ele parece e você pode deixar as pessoas baixarem o arquivo de áudio e você pode tê-lo mais tarde. Escuro. Então esse é o arquivo de áudio, e então nós temos mais um, que é incorporar Agora na cama é como, Deixe-me realmente mostrar a vocês. Embed é como uma combinação de áudio de vídeo, e há mais um aqui e soundcloud, porque o que você pode fazer é que você pode praticamente colocar em qualquer u R l. E ele vai levá-lo Então, por exemplo, se eu pegar um vídeo e colocá-lo em que na cama se torna um vídeo se eu tirar áudio, então é uma cópia, este link de cópia que eu coloquei aqui. Então ele se torna um áudio. E então se eu, hum, se eu colocar, vamos ver, o que mais havia lá que eu poderia colocar dentro? Sim, então você poderia colocar em praticamente qualquer tipo de, hum, investível u l lá. Então também pode ser um áudio. Agora eu não tenho um arquivo de áudio como este é uma nuvem sonora, mas eu não tenho um audiófilo específico que eu poderia colocar, mas ele faria a mesma coisa como se parecesse com o bloco de áudio. E então você também pode incorporar código específico, como o Google Maps ou algo assim aqui. Então também funciona como um código. Então ele também funciona como bloco de código de batida o bloco de código. Então é uma boa combinação de diferentes que nunca usei na cama. Acabei de usar um específico que eu precisava, mas se você achar que precisa de uma cama, você pode ir em frente e encontrar isso aqui. Então, isso é praticamente os sete quarteirões diferentes. Temos quatro pretos básicos. Vamos dar uma olhada rápida na galeria e resumo na próxima palestra, e vamos continuar a partir daí. 17. Páginas de edição: Galeria e Blocos de resumo: Ok, então nesta palestra, vamos falar sobre o resumo no bloco da galeria. Então vamos voltar para o conteúdo da nossa página, e eu vou adicionar um bloco. Então temos galeria e resumo. Os dois são muito parecidos. É por isso que vou cobri-los juntos. Então vamos começar com a apresentação de slides da galeria tão bem simples. Podemos de fazer uploaddeimagens que queremos usar para a apresentação de slides. Fiz isso para a palestra sobre bandeiras. Se vocês se lembrarem disso, se não , basicamente, basta pressionar o upload e escolher algumas imagens. Então, digamos que nisso, e ele irá carregar automaticamente essas imagens. Vamos dar um momento lá e os que acabaram de carregar. Tomaremos um pouco de cidra. Agora temos que ir para o design, e podemos mudar algumas características sobre este lutador. Assim, uma transição entre slides automaticamente a cada cinco segundos a cada dois segundos se você quiser mostrar o próximo no controle anterior. Então, isso é um pouco de setas à esquerda, e a direita é automaticamente cortar imagens. Se não cortarmos as imagens, o controle deslizante se tornará diferente, como as imagens são obviamente tamanhos diferentes, então você terá como pequenos blocos na lateral. Então blocos brancos. Vou mostrar-te como é, na verdade, só para veres como é. Deixe-me adicionar uma imagem quadrada que deveriam fazer. Então vamos dar isso para segundo para carregar, porque esses dois são muito semelhantes dentro, então você não pode realmente dizer como o tamanho real re se parece. Então vamos bater. Aplicar. Será que vai salvar? Então, há essa imagem. Tem aquele e tem aquele. Então você vê como este tem um grande pedaço da imagem realmente faltando porque é suposto ter muito mais da árvore visível, enquanto que ele só tem até por aqui. Então, se eu clicar em vamos ver onde ele vai automaticamente cortar imagens. Então, se eu não fizer isso e salvar, ele disse. Já há uma pequena barra na lateral, e para esta, há uma barra enorme na lateral, então isso mostrará a imagem completa por meio de esticá-la para a proporção e lançando algumas barras na lateral para permitir esse alongamento. Então vamos acertar agora, modo que é automaticamente cortar. Eu realmente não me importo muito com a colheita, porque novamente você pode decidir onde você quer que a colheita aconteça. Então você pode mudar onde está o foco, como você acabou de ver. Então aqui você pode mudar um pouco aqui, você pode mudar muito. Ok, então isso é meio que você também pode mostrar as miniaturas na parte inferior aqui. Não muito importante em, em seguida, o tamanho e também quão longe é a imagem de escolha real . Tão longe, muito perto. E então também onde queremos o título na descrição. Então nenhuma das minhas imagens tem descrições. Deixe-me dar uma descrição. Então, basta clicar nesta pequena engrenagem e nós vamos colocar teste. Então o teste aparece no canto inferior esquerdo. Aqui, podemos mudar isso para o topo. Então está no topo e novamente, Centro aparecerá aqui mesmo. E então você pode fazê-lo para que ele só apareça quando você passa o mouse sobre ele como a descrição real mostra quando você a tem sobre aquela imagem. Hum, agora, aqui dentro, você pode realmente mudar o carrossel. Ótimo e ataque. Então lembre-se de volta aqui para a galeria que você teve que deslizar. Mostre cuidado. Tão grande e saco. Se ele não sabia qual escolher, só escolher em torno deles. Um. Você pode alternar entre eles aqui para que você possa ver como eles se parecem com suas imagens . Então carrossel ficaria assim. Ok. E então grade ficaria assim. Bastante óbvio como seria um grande. Então você pode fazer você pode ter as imagens de quadrados que você pode ter. É um três para então é um pouco mais largo para três. Então é mais, mais em altura do que não é com você pode ter 43 novamente tela larga para que você possa tipo de escolher O que você acha que parece melhor. Não me importava com a praça. Você pode mostrar o título que eu só coloquei para a primeira imagem e novamente você pode escolher se você quiser apenas três imagens. Então lembre-se aqui que tinha espaço suficiente para mais uma imagem. Mas eu só carregei três imagens para que você pudesse torná-lo três e o aumento ou diminuição das almofadas de aumento de diminuição. Gosto com menos estofamento. Você pode fazer uma caixa de luz quando você clica na imagem, ela realmente se abre. E se você quiser realmente vincular a uma parte diferente do seu site, você pode realmente estar vinculado isso à página de contato. Isso para o portfólio, esse tipo de coisa. E então temos pilha. Então isso são apenas imagens empilhadas uma em cima da outra e do Rio, então vamos acertar. Aplicar. Então isso é como o bloco da galeria. Não. , Na verdade, mais uma coisa com um bloco de galeria. Sabe, eu enviei as imagens. Já tenho um bloco de galeria. Desculpe. Uma página de galeria que eu fiz aqui, se você se lembra mais cedo. E eu coloquei esses três logotipos lá, então se você tem uma página de galeria, você pode realmente usar essa página em vez de carregar imagens grátis. Então, por exemplo, se eu adicionar em uma galeria e, em vez de carregar mídia, eu clico em usar galeria de fotos de mídia existente, e então eu poderia fazer isso se importar. Então, grade, como antes. Só que agora, eu não tenho que voltar a carregar as imagens em um lugar diferente. Ok, então eu vou remover isso porque obviamente eu não quero mostrar isso. Ok, então agora vamos dar uma olhada rápida na seção de resumo, então nós temos lista de carrossel parede e grade. Então isso é muito parecido com uma seção de galeria. Exceto que agora, em vez de apenas fotos e vídeos, podemos realmente usar publicações de bloqueio e produtos também. Então, por exemplo, um clique na parede e assim como eu mostrei antes, você pode alternar entre a Lista de Carrossel de parede e a Grade 3 aqui para que você não tenha que continuar voltando para adicionar. Então vamos para o conteúdo. Agora podemos escolher o meu blawg, minha galeria de fotos ou na minha loja. Então primeiro temos blawg. Agora coloquei três postagens temporárias, e coloquei uma imagem para cada um. Você aprende a fazer isso em uma palestra de líderes sobre especificamente no post de bloco. Então agora ele está definido para ser uma parede para que você possa colocar vamos dizer que você tem quatro bloco post e você quer todos eles na mesma linha. Você pode apenas fazer cada chamada menor com, e se você quiser que isso seja, como para bloquear postagens e, em seguida, outros dois aqui em baixo, você pode aumentar uma coluna com Então a calha com é o espaço entre cada postagem de bloco você poderia fazer isso menos para aproximá-los um pouco mais. Em seguida, você pode alterar o tamanho do texto muito grande. Há um casamento um pouco maior e você também pode centralizar. Então lá nós concêntricos. Eu gosto mais das coisas quando centradas, então vamos embora. É isso e então isso é para o encontro real. Então você pode colocar isso acima do título abaixo do título ou abaixo do conteúdo. Eu gosto abaixo do título. Perfeito Ellen Display. Então, agora, definido para mostrar 10 post bloco eu só tenho três, mas eu costumo colocar isso para 30. Você pode mudar para, tipo, seis. Então ele só mostra os seis mais recentes ou os seis que você designa usando destaque para que você possa definir um bloco de barcos que destaque e, em seguida, a outra coisa que você pode fazer é talvez além da data, você também quer mostrar o autor para que você pode escolher o autor para que possamos mostrar o autor também. Lá vamos nós. Ou talvez a categoria. Eu não designei categorias, então isso não vai mostrar nada agora, as únicas que eu criei é o autor. Então essa é a única coisa que posso te mostrar. E se você não quiser que a data apareça, você pode desativar a data. Então mudei isso para nenhum, e o encontro vai bem. E você também pode mostrar a leitura mais. Então, obviamente, este não é todo o posto do quarteirão. Há muito mais nisso, então leia mais. Então vamos dar uma olhada rápida, uh, uh, galeria de fotos. Então, usar a parede é realmente um pouco diferente em comparação com um, por exemplo, de um dos blocos de galeria porque os blocos de galeria não têm parede como um modelo predeterminado . E eu realmente gosto de como a parede parece. Então, por exemplo, se eu mudar isso para mais de seis fotos, então eu disse tudo sobre, então eu não quero mostrar a foto porque não há pena a data para a foto. Não há nenhum ponto em mostrar isso, e você ainda verá que há mais de uma altura aqui do que há uma sagacidade. Gosto que isso fique quites. Então você esconde o título e esconde o trecho. Então agora estão quites. Eu realmente reduzirei isso baseando seus talvez 20 Terry off. Veja, eu adoro como isso parece comparado com uma galeria normal. Então, uma galeria normal, se você se lembra, a coisa mais próxima que você tinha era grade direita e o grande seria parecido com esta grade. E eu realmente não gosto de como isso parece. Gosto mais da parede. Ok, então haverá momentos em que você definitivamente vai querer que essas imagens sejam links para diferentes sites ou partes diferentes do seu próprio site. Agora, antes de como fizemos isso foi viemos aqui para onde realmente carregamos as imagens. Mas agora, já que estamos puxando de uma página de galeria diferente, nós realmente temos que voltar para a página da galeria para, tipo, definir um link. Então o braço da página da galeria usando sua galeria de fotos. Então eu vou lá e então nós vamos clicar na engrenagem do meio e então vamos para as opções e nós podemos realmente definir Você está todos aqui. Então, por exemplo, google dot ta e depois? Salvar? Então, agora, se eu voltar para minha página inicial, se eu clicar em, vamos dar-lhe um segundo para carregar lá em cima. Então, se eu clicar sobre isso, ele vai realmente me levar para o Google desta vez. Então, Google. Jason é perfeito, e agora vamos voltar para editar Calorie Perfect. Então essa foi a seção de resumo. Então, na próxima palestra, eu vou cobrir o que é o quê. Podemos adicionar através da opção mais e os filtros e levantar. Então, todos os ícones diferentes que temos aqui e eu vou te ver então 18. Páginas de edição: mais blocos: Então, a primeira coisa que temos esta pesquisa permite que as pessoas obviamente pesquisem em seu site . Então, para um bloco postar algo assim. Hum, se você colocar uma página específica de pesquisa, o social deles só mostra resultados desta página, eu não quero realmente fazer isso. Então vamos deixar como está agora. E o tema é escuro, então isso deve ser bom. Então eu coloquei. Eu acho que eu tenho post um foi um dos meus posts. Então este é o meu posto de bloqueio 1. Então mostra uma miniatura dele. Tão legal que você pode usar em sua barra lateral. É provavelmente onde as pessoas o usam com mais frequência. Em seguida, temos link de conteúdo para que você possa realmente vincular a uma de suas páginas. Então, por exemplo, o seu bloco para que as pessoas possam clicar nesse link e ir direto para o seu bloco, onde eventos ou você pode realmente colocar páginas específicas. Então, o pico sobre e eu vou dar uma rápida corrida para baixo do que é sobre. Eu nunca usei botões se for preciso. Então, em seguida, temos botão para que você possa estilizar os botões, então entre em contato conosco e ele pode ligar para a página de contato. Então não é um site externo. Não é um arquivo, mas um conteúdo que é meu. Contacte este pêssego e, em seguida, basta clicar fora do tamanho. Você pode torná-lo pequeno, médio, grande, grande, e você pode mudar a cor deste através do editor de estilos e você pode torná-lo para a esquerda ou direita ou para o centro. Faremos o centro e depois salvaremos. Então entre em contato conosco. E, em seguida, temos tomar nuvem. Então isso é para o seu blawg. Então você escolhe algo, obviamente a maneira mais comum de usá-lo, como no blog, para cobrir todos os tipos diferentes que estão disponíveis no seu sangue. Então você escolhe algo, obviamente a maneira mais comum de usá-lo, como no blog, Então, por exemplo, alguém clica no site, o leva, mostra toda a postagem de bloqueio que tem o site de tag. Nós vamos cobrir mais sobre tags quando falamos sobre blogs bem, então ele vai se tornar um pouco mais óbvio o que é, e você também pode torná-lo como sua galeria de fotos. Mas eu não tenho nenhuma etiqueta nas minhas fotos. Também não tenho etiquetas nos meus produtos. produtos Apenas no meu bloco, eu coloquei em tags para que você também pode usar categorias se você não o ismo matinal toma especificamente. Eu não acho que eu não tenho categorias configuradas para nenhum deles ainda. Não. Então, vamos embora. É preciso e, em seguida, classificar por peso. Então, isso é o que é usado com mais freqüência e quais os vistos pelas pessoas com mais freqüência. Então agora parece que as pessoas foram ao meu posto de bloqueio. Esse é o seu site mais e, em seguida, quantas tomadas você quer mostrar? Então eu acho que é isso. Eu não acho que ainda está tão bem, isso desencorajou, e eu vou apagar isso de novo. Você pode usar isso na sua barra lateral. Assim, as pessoas rapidamente acessam um tipo específico de post, e então temos finalmente arquivar. Então, por exemplo, se clicarmos em Blawg, ele mostrará arquivar todos os seus blogs em novembro, depois em dezembro. Mas eu só bloqueei barcos de novembro, e então você pode ter produtos, galeria de fotos, tudo que polui em novembro e eventos e até mesmo exibido como uma lista ou assim. Se é uma lista, você realmente tem que ter certeza que você realmente rápido você realmente tem que clicar sobre ela e então vamos abrir a lista. Ok, então é uma lista de tudo, então novembro e então vamos dizer dezembro e janeiro. Então temos. Acho que caiu. Sim. Ok, então para este, vai dizer novembro, dezembro, janeiro, fevereiro. Mais uma vez, estes são melhor usados no comprador lateral. É onde eles são usados principalmente, na verdade o grupo local por mês, ano tag categoria autor. Eu só tenho um autor, então não faz sentido classificá-lo por autor e depois mostrar quantos. Quantas postagens diferentes nós realmente temos para esse autor. Assim, para os produtos, ele mostrará quantos produtos etcetera novamente. É um pequeno recurso puro, mas eu nunca usei antes. Então é um Então isso é tudo o que temos listado sob os filtros, Hum, e finalmente na próxima palestra vai cobrir esses, e então nós vamos ser feito com os diferentes blocos. 19. Edição: filtros e listas de blocos: Então, a primeira coisa que temos esta pesquisa permite que as pessoas obviamente pesquisem em seu site . Então, para um bloco postar algo assim. Hum, se você colocar uma página específica de pesquisa, o social deles só mostra resultados desta página, eu não quero realmente fazer isso. Então vamos deixar como está agora. E o tema é escuro, então isso deve ser bom. Então eu coloquei. Eu acho que eu tenho post um foi um dos meus posts. Então este é o meu posto de bloqueio 1. Então mostra uma miniatura dele. Tão legal que você pode usar em sua barra lateral. É provavelmente onde as pessoas o usam com mais frequência. Em seguida, temos link de conteúdo para que você possa realmente vincular a uma de suas páginas. Então, por exemplo, o seu bloco para que as pessoas possam clicar nesse link e ir direto para o seu bloco, onde eventos ou você pode realmente colocar páginas específicas. Então, o pico sobre e eu vou dar uma rápida corrida para baixo do que é sobre. Eu nunca usei botões se for preciso. Então, em seguida, temos botão para que você possa estilizar os botões, então entre em contato conosco e ele pode ligar para a página de contato. Então não é um site externo. Não é um arquivo, mas um conteúdo que é meu. Contacte este pêssego e, em seguida, basta clicar fora do tamanho. Você pode torná-lo pequeno, médio, grande, grande, e você pode mudar a cor deste através do editor de estilos e você pode torná-lo para a esquerda ou direita ou para o centro. Faremos o centro e depois salvaremos. Então entre em contato conosco. E, em seguida, temos tomar nuvem. Então isso é para o seu blawg. Então você escolhe algo, obviamente a maneira mais comum de usá-lo, como no blog, para cobrir todos os tipos diferentes que estão disponíveis no seu sangue. Então você escolhe algo, obviamente a maneira mais comum de usá-lo, como no blog, Então, por exemplo, alguém clica no site, o leva, mostra toda a postagem de bloqueio que tem o site de tag. Nós vamos cobrir mais sobre tags quando falamos sobre blogs bem, então ele vai se tornar um pouco mais óbvio o que é, e você também pode torná-lo como sua galeria de fotos. Mas eu não tenho nenhuma etiqueta nas minhas fotos. Também não tenho etiquetas nos meus produtos. produtos Apenas no meu bloco, eu coloquei em tags para que você também pode usar categorias se você não o ismo matinal toma especificamente. Eu não acho que eu não tenho categorias configuradas para nenhum deles ainda. - Não. Então, vamos embora. É preciso e, em seguida, classificar por peso. Então, isso é o que é usado com mais freqüência e quais os vistos pelas pessoas com mais freqüência. Então agora parece que as pessoas foram ao meu posto de bloqueio. Esse é o seu site mais e, em seguida, quantas tomadas você quer mostrar? Então eu acho que é isso. Eu não acho que ainda está tão bem, isso desencorajou, e eu vou apagar isso de novo. Você pode usar isso na sua barra lateral. Assim, as pessoas rapidamente acessam um tipo específico de post, e então temos finalmente arquivar. Então, por exemplo, se clicarmos em Blawg, ele mostrará arquivar todos os seus blogs em novembro, depois em dezembro. Mas eu só bloqueei barcos de novembro, e então você pode ter produtos, galeria de fotos, tudo que polui em novembro e eventos e até mesmo exibido como uma lista ou assim. Se é uma lista, você realmente tem que ter certeza que você realmente rápido você realmente tem que clicar sobre ela e então vamos abrir a lista. Ok, então é uma lista de tudo, então novembro e então vamos dizer dezembro e janeiro. Então temos. Acho que caiu. Sim. Ok, então para este aqui, vai dizer novembro, dezembro, janeiro, fevereiro. Mais uma vez, estes são melhor usados no comprador lateral. É onde eles são usados principalmente, na verdade o grupo local por mês, ano tag categoria autor. Eu só tenho um autor, então não faz sentido classificá-lo por autor e depois mostrar quantos. Quantas postagens diferentes nós realmente temos para esse autor. Assim, para os produtos, ele mostrará quantos produtos etcetera novamente. É um pequeno recurso puro, mas eu nunca usei antes. Então é um Então isso é tudo o que temos listado sob os filtros, Hum, e finalmente na próxima palestra vai cobrir esses, e então nós vamos ser feito com os diferentes blocos. 20. Páginas de edição: comércio, gráficos e blocos sociais: Está bem, pessoal. Então hoje vamos cobrir os últimos pequenos pedaços de blocos que temos disponíveis para páginas. Então vamos em frente e batemos. Editar. Então agora, eu estou apenas mostrando a vocês como uma rápida turnê dos diferentes blocos que temos disponíveis e, mais tarde, eu vou rever cada um especificamente quando eu usá-lo em meu próprio site. Então vamos em frente e vamos olhar para eu acredito que cobrimos mais, então estamos por preencher. Não, nós fizemos isso também. Então Karmi é tão primeiro que temos produto. Então isso é bem simples. Poderíamos colocar um produto específico tão bem, rápido lá. E eu só avisei. Acredito que sim. Eu só levo isso para que eu possa esconder a imagem. Posso mostrar a imagem de novo. O título está bem aqui. Eu poderia esconder isso e o mesmo com o preço. E também descrição. E, finalmente, no botão do cartão. Então parece assim e você pode escolher a quantidade. Agora, se você tiver apenas um em estoque, ele não mostrará a quantidade. Então, também podemos alinhar tudo no centro ou à direita. Então, de novo, como eu disse. Eu gosto da linha Central melhor que você vê, Neste momento esta imagem é muito grande. O que você pode fazer é o que eu mencionei anteriormente com os espaçadores. Então coloque um espaço deste lado com base no outro lado também para manter as coisas centradas . Lá vamos nós. Então, agora não é. Então, se você jogar na linha aqui, então melhor separação. Então agora não é tão grande. Certo, então é assim que você adicionaria um produto específico. A seguir, temos a Amazon. Então, este é realmente um recurso extremamente poderoso, então você pode realmente vincular qualquer produto na Amazon. Então, por exemplo, se eu digitar, um, vamos ver, site provavelmente pega alguns livros. Sim, então construir um site para manequins e você pode centralizar para que você possa realmente colocar um botão de compra de anúncio , modo que os leva para a Amazon no A coisa realmente legal sobre isso é que eu estou realmente excluindo que a coisa realmente legal sobre isso quero dizer, se eu entrar em configurações e, em seguida, serviços avançados e, em seguida, externos, você pode colocar seu ano de tag de associado da Amazon para que qualquer produto que você realmente vender você vai realmente obter receita para então você vai obter um pouco do corte quando as pessoas fazer uma compra. Então você tem que se inscrever para o seu programa de afiliados primeiro, é claro, mas novamente, muito poderoso, porque você pode pesquisar através de toda a Amazônia, colocar exatamente os produtos que você quer. Então, em seguida, vamos ver o que mais temos aqui. Então temos o botão de doação. Então, se você está correndo como uma cadeira de dois anos algo em seu site, você pode realmente receber doação. Então, de novo , um fundo de caridade, podemos nomeá-lo. Não dê uma descrição rápida. Diversão esta caridade eo que você quer que o botão para dizer Então você pode fazê-lo fazer uma doação, por exemplo. Centralize isso, e eles podem colocar qualquer montagem. Você quer deixá-los doar, então você pode realmente rotular cada um como doação iniciante Automação profissional. Então algo como uma empresa doando e você pode adicionar mais valores diferentes, e eles sempre podem especificar, como um valor específico como $26. Eles sempre têm a oportunidade de fazer isso, e quando eles fazem uma doação, você pode coletar informações adicionais colocando em um formulário. Então, se você quiser pegar o nome deles. Você pode pedir-lhes o nome e torná-lo necessário. Então, como isso vai parecer se eles clicarem em fazer uma doação, ele vai levá-los para esta página e então eles vão realmente, uma vez que eles bater, continuar. Estou a ver se consigo continuar aqui. Sim, por isso dura para na verdade. Sabe o que é isso? Vamos colocar um número aleatório lá, então sim, a última vez para o nome. Então este é o vai sob a categoria mais. Assim, você pode coletar qualquer tipo de informação que quiser, como e-mails. Qualquer coisa assim. Então esse era o botão de doação de novo, lembra? Eu não disse, pai, nós vamos aparecer agora. Então exclua isso para deixar isso porque obviamente eu quero colocar esse produto no meu site, tentando manter as coisas limpas aqui. Vou deixar isso aí por enquanto. Então temos movimento nos gráficos. Então estes são os gráficos diferentes que você tem disponível. Eles são todos bastante simples. Quero dizer, barras gráfico de linhas por gráfico. Se usado excel antes disso é ah versão muito mais fácil de seu gráfico de barras O, você pode alterar entre os gráficos ano em diante. Então, que informação você quer colocar? Você pode realmente importar informações do valor separado por vírgulas. Então, por exemplo, assim. Lá vamos nós. Então está agora mostrando a população de Nova York Las Vegas em São Francisco. , Podemos colocar legendas, mostrar as populações de lendas nas cidades e depois ver isso. Então isso é como a população de legendas neste gráfico. Está bem? E podemos, é claro, torná-lo cores diferentes. Então você escolhe um dos diferentes disponíveis aqui, modo que você também poderia exportar os dados. Ok, então você apenas copiar isso e colá-lo como um texto, um documento de texto, e então você pode inserir mais dados aqui para que possamos colocar, por exemplo, Michigan e torná-lo 200 e então você pode adicionar outro, outro tipo de valor. Então, além da população, podemos colocar em, hum, digamos negócios. Então, uma contagem de quantas empresas existem, então seria como 2345 Então novamente, você vê, você vê, ele vai mostrar que é mais difícil ver o seu pequeno fazer como 20 20 20 40. Lá vamos nós. Então você vê o que isso parece, e então nós poderíamos fazer isso um gráfico de linhas. Então esta seria a população. Este seria o negócio e seu rótulo bem aqui. Seria mais fácil ver se você faz desta uma cor. Lá vamos nós. E, em seguida, também, temos gráfico de pizza. Então é assim que este seria. Ok, então para um gráfico de pizza, está usando população agora e não negócios. Então, se você mudar de negócio primeiro Não, eu vejo ponto final. Então agora mostrando o número de empresas. Bem, eles são torta. Então, novamente, eu nunca tive que usar isso, na verdade, mas pode ser útil em alguns casos específicos. Então, em seguida, nós temos os blocos sociais, então nenhum deles realmente funcionará a menos que você tenha blocos sociais configurados em configurações. Então você realmente tem que ir para configurações, contas conectadas, e então você adicionaria, como uma contagem específica conectiva, e há toneladas delas aqui. Então, tenho certeza que você vai encontrar tudo o que você precisa aqui e depois que você adicionar o homem, então, como você pode ver, eu tenho Facebook e Twitter conectados, então esses foram os únicos que eu posso realmente usar. Então, se formos ao Twitter. Eu posso colocar em quantos tweets eu quero puxar para cima. Então, talvez três seja uma boa quantidade, e então eu posso colocar, como em vez de usar meu perfil, como em uma busca por hashtags específicas. Então isso é uma busca pelo Squarespace. Certo, e depois aplique. Vamos ver como isto se parece. Então é assim que isso se pareceria. Ok, então essa é a pesquisa, mostrando minha imagem ou não, e mostrando meu nome de usuário ou não. Claro que você quer mostrar seu nome de uso. Só porque o objetivo de ter este ano é enviar mais pessoas para o Twitter, não pesquisar, mas mostrar Avatar que ela vai usar o nome tinha um botão seguir, então basta seguir. Bastante direto, mas novamente, extremamente poderoso. Então, o que? Apagar isso? Então nós também temos quatro quadrados. Eu não tenho isso conectado, mas é semelhante ao que o Twitter faz. Links sociais realmente coloca um link para todos os que você conectou. Então, para mim, isso é Facebook e Twitter. Podemos alinhá-lo, mudar o tamanho, mudou os diferentes tipos de estilos que temos e também mudar a cor dois x padrão. Então esta é a cor deveria ser que nós poderíamos torná-lo preto onde nós podemos fazê-lo esperar. Certo, então não temos ligações sociais. Eu colocaria no rodapé. É onde você coloca na maior parte do tempo ou na página de contato. E também temos o nosso SSO para o seu blog. Se você quer ter um feed RSS, eu não tenho um, então eu não vou usá-lo 500 PX. Para que alguns um serviço de compartilhamento de fotos. Hum, então você pode colocar isso dentro? Eu realmente não tenho um, então quero dizer, eu não tenho conta, mas eu não quero colocá-lo com isso porque não está associado ao meu negócio. Então temos instagram para que você possa puxar suas fotos cintilar apenas como 500 escolhe seu compartilhamento de fotos novamente no soundcloud Então você pode compartilhar seus álbuns que você lançou ou quaisquer faixas que você lançou. Ok, então isso é tudo sob os gráficos de comércio e blocos sociais. E mais uma coisa é quando usamos aquele feed do Twitter. Então, aqui em baixo, a única razão pela qual ele realmente puxa meu feed do Twitter é porque quando eu entro em minhas contas conectadas aqui e depois no Twitter, eu tenho os dados de download ativados. Se eu não tiver isso ligado, ele não será capaz de puxar para cima nada. Então agora parece que ele não tem nenhum post ou você não tem dados em dólares ativados . Então temos que entrar. Ligue isso agora, por padrão, que está ativado. Portanto, não há realmente nenhuma razão para que ele deve ser desativado por padrão, a menos que você o desative . - Curso. Então vamos bater. Salvar. Talvez tenhamos que nos refrescar. Então tente ir para o portfólio e voltar para casa. Parece que o salvamento da conta conectada não levou os dados de redefinição. E o que salvar? Lá vamos nós. Então, só levou um pouco de reinicialização. Ok, então esse é o fim desta palestra. E na próxima imagem vai cobrir um pouco mais de detalhes, coisas sobre páginas, especificamente imagens. Ok, 21. Páginas de edição: como criar um formulário: Então deixe-me ir para a minha página Contacte-nos, e eu vou colocar um no formulário aqui. Então nós para isso carregar. Então vamos clicar nele. E eu posso realmente remover todo esse conteúdo demo porque, é claro, não tem nada a ver com o meu negócio. Então, exclua agora, quando não houver blocos na página, o Squarespace criará automaticamente um livro didático porque você verá em um segundo Dario automaticamente criar o livro didático. Então, uma vez que você colocar em um formulário um minuto cancelar. Ainda não o modificamos, e depois vou apagar o bloco de texto por enquanto. Então há apenas um formulário, então ele está indo para ele. Vou mudar isto para o formulário de contacto. Eu não preciso de pessoas para preencher o assunto, mas nomear mensagem de e-mail. Tudo importante. Hum, se você clicar no nome de edição é necessário, isso é bom. E-mail é obrigatório. Isso também é bom, e mensagem também é necessária. Então é perfeito. Então, se voltarmos a nomear a descrição, seja lá o que estiver digitando aqui, então digite seu nome completo. Bem, por exemplo, venha aqui e envie um e-mail. Podemos colocar algo como, hum, este será o e-mail que você usa com mais frequência agora podemos mudar todos esses tamanhos de fonte mais tarde porque é muito pequeno. E para cada um,também há espaços reservados. E para cada um, Então isso realmente vai direto para a caixa de entrada para que possamos colocar exemplo escuro no exemplo ponto com Apenas as pessoas sabem em que formato estamos esperando, então isso é bastante simples. Quero dizer, só há um formato para ele. Também acreditava é que e então vamos dar uma olhada em algumas das diferentes opções que temos. Então, se clicarmos no plus terá um diferente, como uma caixa diferente que aparece que mostra o tipo de sentimento que podemos ter. Então, primeiro é o texto, então texto quando você colocá-lo, é bem simples. Então, por exemplo, , cidade, de que cidade deles e podemos torná-la necessária. Poderíamos colocar um espaço reservado como Toronto, então não preciso deles e tirar isso. Então temos área de texto, que é o mesmo era texto, exceto que é muito maior. Então, por exemplo, você vê nossas áreas de texto como várias linhas. Onde é o texto por si só era apenas uma linha reta através, e então temos selecionar. Então aqui podemos ter, tipo, uma lista que eles podem escolher. Então, por exemplo, , você é homem ou mulher? E depois aqui. Então colocamos uma opção por linha. Tão masculino, feminino. Ok, então nós podemos ter algo assim e então vamos em frente e remover isso Então, em seguida, temos a caixa de seleção. Então isso é o mesmo que tínhamos antes com o menu suspenso, exceto que eles só podem se arrepender no menu suspenso, o único escolhido. Onde está com a caixa de seleção, você pode escolher quantos eles quiserem. Então passatempos. E então não precisamos de uma descrição até as opções. Digamos, computadores, ciência, ciência, jogos tecnológicos. Então ele tinha aplicar e salvar para que eles possam marcar como muitos como eles querem. Ok? E eles podem até deixá-lo em branco para que nada esteja construindo. Então vamos em frente e deletar isso. Em seguida, temos botão de rádio, que é a mesma caixa de seleção, exceto que eles têm que escolher apenas um rádio para, e vamos colocar, por exemplo novamente, podemos fazer macho ou fêmea novamente se você quiser tão masculino ou fêmea e vamos colocar no correio em uma linha e fêmea na outra. Então eles têm que escolher um desses dois. Ok, então esse é o botão de rádio. Então temos pesquisa, então sim, este é bem simples também. Então, por exemplo, digamos que eu gosto deste site. Ok, então é isso. Só há cinco opções. Não podemos mudar esses cinco. Então isso é o que você pensa. Então isso é apenas uma descrição. Então não podemos mudar o forte. Concordar? Discordo de todas essas coisas. Então eu gosto deste site. Você pode colocar outro chamado. Esta é a melhor palavra. Diga assim. Algo assim. Ok. pesquisa bem básica lá. Em seguida, temos nome nenhum nome leva automaticamente o primeiro nome e sobrenome. Não há como desligar isso. Hum, eu realmente não gosto disso só porque eu quero dizer, qual é o nome? Algumas. Você não precisa dos sobrenomes às vezes. Então o que eu faria é, em vez de um nome, eu colocaria em uma caixa de texto e talvez colocasse o primeiro nome e, em seguida, tornaria isso necessário. Eu faria isso mais frequentemente do que ter nome e sobrenome, mas novamente, cabe a você como você quer armazenar, hum, hum, informações em seu banco de dados ou em sua viagem de correio? Vamos dar uma olhada. Então, senha. Então, qualquer coisa que digitam aqui terá estrelas automaticamente. Então vamos em frente e salvar assim senha. É assim. Ok, agora, eu nunca tive que usar senha antes. Eu realmente não sei por que você iria usá-lo. Talvez se você estivesse coletando alguém usando ele uma senha se você estivesse vendendo como o serviço S CEO e ele o acompanhou para inserir suas informações de login no site, assim você pode fazer login, fazer alterações. Mas eu realmente não sei por que você iria precisar disso além de algo assim. Então vamos apagar isso e ver o que mais. Então, temos um endereço para que você possa pedir às pessoas que digitam o endereço novamente. O que eu não gosto nisso, você não pode controlar o que é realmente pedido. Então ele automaticamente pede endereço um endereço para o estado da cidade, barra postal, código postal e país, e não há realmente nenhuma maneira de realmente modificar o que mostrado lá. E depois temos o Twitter. Então, novamente, é aí que suas informações do Twitter o símbolo at são automaticamente preenchidas para eles Em seguida, temos e-mail, então você pede a eles o endereço de e-mail, assim como aqui. Site. Você me pediu para colocar o link para o site deles, e então nós temos data para que eles possam preencher uma data específica novamente. Não há como modificar a ordem que vem. Ok, a seguir, temos tempo. Então, se você está agendando como uma reunião, você pode perguntar a ele que horas é melhor para eles. E depois temos números de telefone. Posso recolher alguns destes números de telefone e, em seguida, um número específico. Então você pode perguntar, como, quantos sites você tem e, em seguida, aplicar Salvar. Então, sim, eles apenas digitariam um número aqui. Não, eu nunca tentei enviá-lo apenas com cartas, mas, mas, quero dizer, eu acho que deve funcionar. Vamos dar uma chance. Na verdade, vamos tentar apenas com texto. Oh, sim. Ok. Sim, devem ser números e sem mãe nem personagem, pelo menos sabemos que funciona como deveria. Então vamos em frente e deletar isso. E depois temos dinheiro. Então, tipo, salvar Então você acha que aqui você pode colocar algo como quanto você quer pagar pelo serviço deles ? Como o quê? Qual é o seu orçamento? Algo assim. E depois linha para separar as coisas diferentes. Então, por exemplo, se eu não quiser, então se eu não quiser uma linha e eu só queria ser uma seção tão exata, por exemplo, poderia ser, hum, informação pessoal. E eu poderia estar coletando isso aqui em cima, e então embaixo, eu poderia ter outra seção chamada de informações de negócios, e então eu posso adicionar um texto. Qual é o nome da sua empresa? Então, como você pode ver, é assim que você divide uma forma. E você poderia, é claro, tirar essa linha. Mas, quero dizer, a linha acrescenta um pouco mais de organização, então eu deixaria isso dentro. Ok, em seguida, temos escondido. Então este é um valor oculto que você pode coletar. Quero dizer, você pode ler sobre ler mais sobre isso aqui. Eu não vou entrar muito em detalhes com ele, só porque eu não vejo muitas pessoas usando isso com frequência. Então, um dos motivos pelos quais você pode querer usar isso é, se você enviar alguém para o seu site, você pode usar o formulário de contato para pegar uma parte específica do URL. Então você sabe de onde eles vieram? Hum, só para você tipo de manter o controle de eram, como, como, como, como,as métricas como, onde as pessoas realmente vêm de não é muito importante. Você pode usar o Google Analytics e coisas assim, mas se você quiser aprender mais sobre isso, basta ir até aqui, Ok, Ok, então feche isso e vamos para o armazenamento. Então aqui, este é o e-mail que qualquer coisa que as pessoas enviarem aqui irá para este e-mail. Ele é automaticamente preenchido no endereço de e-mail semelhante que você usou para criar esta conta. Você pode alterá-lo para qualquer outro e-mail que você quer aqui e apenas se conectar agora se você não quer que ele para o modo sentinela, mas sim você quer coletar e-mails usando o macaco de correio. Você pode clicar aqui para conectá-lo como eu mostrei a você antes e em uma palestra anterior, e você também disse para ir para o Google Drive e, em seguida, se formos para avançado, podemos alterar o que este botão diz. Então mande uma mensagem e podemos centralizar isso e assim que eles baterem em enviar. Esta é uma mensagem que aparece para eles e Esta é uma mensagem HTML post. Assim, você pode ter ações específicas executadas usando o código HTML e os modos lightbox agora . Se eles clicarem no formulário aberto, então eles poderiam preencher o formulário. E obviamente é só mais um rápido. Então eu realmente não quero que o usuário faça isso. Mas se você quisesse fazer isso, você mudaria o botão do formulário aqui, então entre em contato. Mas novamente, eu quase nunca uso isso. E não acho que seja uma boa ideia. Então vamos bater. Aplicar. Ok, então esta é a página de contato. Será que vai salvar? Certo, isso é um formulário de contato. Will Will meio que modificou sua página novamente mais tarde. 22. Páginas de edição: imagens: Ok, então definitivamente a maior parte de um site são imagens, especialmente nesta época em que ninguém quer ter tempo para ler todas as palavras em e em uma página. Então, por exemplo, se alguém viesse a esta página, eles realmente não teriam tempo para ler isso a menos que eles estivessem realmente interessados em nosso site. Então imediatamente eles olham para as fotos que olham para o menu. Veja como olhar bem aqui. Olhe aqui em forma de Lincoln F. Começam por cima, à esquerda, atravessam o menu, descem, depois atravessam. Então eles descem, e isso é sobre o doente mais distante. Provavelmente ir. Eles provavelmente nem vão rolar até o final da página. Então eles estão apenas procurando informações valiosas antes de voltar para a pesquisa no Google. Geralmente é assim que as pessoas navegam em sites. Então o que temos que fazer é imediatamente cativar sua atenção como uma imagem, então imagens são definitivamente muito importantes. Então eu vou cobrir apenas imagens nesta palestra. Então vá em frente e eu coloquei uma imagem. Ok. Agora eu nunca exibo legendas para minhas imagens. Então eu vou bater, Não exibir porque eu realmente não gosto de como essas legendas aparecem. Eles são pequenos, e eu realmente não gosto de re dimensionar cada um por si só. Então, primeiro vou colocar em uma pequena imagem. Como podem ver no pop-up, este tem 250 pixels e sagacidade e 81 de altura. Então eu vou em frente e colocar isso dentro e você vai notar mesmo que o bloco era tão grande, ele encolheu dedo do pé segurar a imagem em seu tamanho total. Então agora, isso tem 250 pixels de largura, então é o tamanho do meu arquivo original. Agora, se eu quiser que isso seja maior, então ele cobre o completo com seu indo para esticar a altura, bem como apenas para manter a proporção . Caso contrário, é tipo de apenas parecia que vai olhar realmente esticar para que ele se parecesse com isso. Então você vê como ele se estende com e altura, ok, mas esta é uma imagem de muito baixa qualidade. Só porque a resolução era muito baixa para começar. Ok, então é assim que isso é o que esse botão de estiramento faz e se você tiver que usá-lo, é melhor você encontrar uma imagem de resolução mais alta. Se você não tem um, você pode usá-lo. Embora eu realmente não gostaria. Você pode ver todos os pixels nos cantos aqui. Parecem pequenos quadrados. Odeio como isso parece, então nunca uso isso. Então deixe-me ir em frente e colocar em uma imagem real como uma maior. Então deixe-me colocar. Sim, acho que é maior. Então coloque isso, de modo que deve carregar em seu tamanho completo. Demorou bastante tempo para processar, que está me dizendo que provavelmente é uma imagem maior. Lá vamos nós. Então isso é como bordas suaves porque era uma imagem muito grande para começar. Então aqui, se nos esticarmos, nada acontece porque já está no máximo com porque é grande o suficiente. Ok, então novamente, podemos ter que clicar através. Vocês estão todos aqui. Então, se alguém clicar nesta imagem para onde ela vai, então vamos ver o que podemos fazer com essa imagem. Ok? Então primeiro vamos ver que temos este pequeno ponto aqui se você passar o mouse sobre ele. Você vai ver este pouco que muda para como essas duas linhas com um ar indo para cima e para baixo. Se você clicar e segurar e ir para cima e para baixo, poderá redimensionar a imagem. Ok, então vai aparecer aqui vamos um segundo. Então, quando você está indo lá, nós vamos. Assim, quando começa, como ir de esticar verticalmente para esticar horizontalmente. É aí que você conhece suas costas, a imagem original. Então, se você for até aqui e quiser voltar ao Original, você pode puxar para baixo até o início, esticando horizontalmente. Então, um pouco mais. Lá vamos nós. Então, isso é sobre como a imagem original começou ou a maneira mais fácil você basta clicar duas vezes no círculo, e então ele volta para o site original. Certo, digamos que você queira usar essa imagem de alta resolução, mas não queira que seja tão grande. A maneira mais fácil de torná-lo pequeno como colocar em espaçadores tão espaçador que você vai precisar de espaço é um para a esquerda, um para a direita, Então um para a esquerda, um para a direita. Lá vamos nós. Então, e então você pode mudar onde ele está tão movendo mais para a esquerda. Mova-o ainda mais para a esquerda. Mova todo o caminho para a direita. Então lá vamos nós. E se você quiser que ele direito nivelado com este lado direito, você pode excluir este espaçador. Eu amo mais isso. Ok. E mais uma coisa com esta imagem, se você realmente ir para redimensioná-la e você manter a tecla Shift pressionada para que fique um pouco acima do controle. Se você pressionar, deslocar e subir e descer, ele será redimensionado automaticamente no intervalo de 20 pixels. Então 2020 2020 20. Enquanto que se você leko é mais suave e você pode realmente encontrar Sintonizá-lo mais. Está bem, vou apagar isto. Sim, vou apagar isso. Então isso foi apenas como um rápido, um imagens exibidas. Outra coisa que você pode querer fazer é mostrar uma imagem para o lado do texto. Então, por exemplo, se eu realmente colocar essa imagem de volta aqui em cima novamente, clique sobre isso e não exibir legenda. Ok, então vamos esperar que isso carregue lá em cima novamente. Isso geralmente acontece porque é uma imagem maior. Um é re dimensionando como uma vez processando aqui. Não bata. Aplicar ainda. Espere por esta imagem para aparecer primeiro porque eu tive um monte de bugs que surgem como a imagem não vai carregar corretamente. Então, apenas certifique-se de que terminou de carregar aqui e, em seguida, pressione , aplique e um monte de bloco de texto. E no livro vai apenas colocar textos aleatórios na verdade ainda bio. Então eu poderia ser como um Vamos fingir que isso é uma foto de uma pessoa e um pouco de biografia. Este sou eu. Isto é o que eu faço. Certo, agora vamos pegar esse texto e colocá-lo no lado da imagem, e você verá que o que aconteceu foi me deixar copiar. E colar é um par de vezes, só para que você possa ver como ele se parece. Ok, então você vai ver que não é realmente texto do lago embrulhado, então a imagem não é moldada como o texto. Desculpe não é enrolada em torno da imagem. Então, por exemplo, se eu quiser desse lado, ele vai direto para aquele lado. Segundo, movo esta imagem para a esquerda. Em vez de apenas aquele quarteirão, eu fui até o fim. Então deixe-me colocar um baú naquele quarteirão. Lá vamos nós, então você verá que não está realmente embrulhado com esta imagem. Como se este texto pudesse, teoricamente, ir até aqui, atravessar todo o caminho, mas não é. Então, se eu fizer isso menor, esse texto deveria estar indo até aqui. Mas não agora. Como consertamos isso? Deixa-me mostrar-te. Então você pega esta imagem e lembra quando você veio aqui, foi, ah para movê-la para o lado esquerdo e o lado direito. O que vamos fazer é trazê-lo. Então lá vamos nós. Então parece assim. Então você tem aquela pequena sobreposição de cinza em vez dessa linha. Você tem isso demais. É uma área muito pequena. Como, por exemplo, isso está acima Ir para a esquerda, esquerda sobreposição esquerda, esquerda, e é agora vai ser deixado a linha. Então você tem um quarto muito pequeno, então você vai ter que brincar com eles um pouco. Lá vamos nós. Então uma vez eu puxei para lá com fazer como era. Então vamos tentar clicar duas vezes. Lá vamos nós. Então, agora nós temos isso corado. Desculpe. Texto rap para a esquerda, e podemos fazer o mesmo com a direita. Ok, lá vamos nós. Então isso é para a direita. Ok. Então você pode brincar com isso. Você pode usar isso se você quiser colocar, como, uma imagem dentro do texto para mantê-lo meio que não é tão chato. Mas você também quer que ele seja moldado por texto. Ok, então é assim que você envolve texto em torno de uma imagem. Então, mais uma coisa que vou acrescentar é que o squarespace mudou recentemente como as imagens do ar lidou com o próprio site. Então agora você pode realmente ter imagens com até 2500 pixels de largura ou altura. O que isso significa para você é que você pode fazer upload de imagens de alta qualidade que você poderia, por exemplo, usar como plano de fundo. , Agora, como isso é tratado é que quando você carrega uma imagem, espaço quadrado cria automaticamente cerca de meia dúzia de versões diferentes da sua imagem, cada uma com uma largura e altura diferentes. Então, quando alguém visita seu site em um dispositivo móvel, ele carrega para a imagem que é, você sabe, o tamanho perfeito para esse dispositivo. Então pode ser, você sabe, 300 pixels e chicote, enquanto que se eles visitam em como um computador desktop, ele pode realmente carregar a imagem de quatro tamanhos ou mesmo, como, você sabe, 1000 com imagem. Então você não precisa se preocupar muito com a velocidade da página. Ao fazer upload de imagens, basta fazer upload da cópia mais alta resolução da imagem que você tem agora. A única vez que isso realmente não funciona é se você estiver definindo uma imagem como sua imagem de fundo , porque então ela realmente usa o tamanho total da sua imagem. Agora vou mostrar onde você pode definir sua imagem de fundo, e você não pode fazer isso para cada modelo. Mas vou mostrar-te como encontrarias esse cenário. Então a primeira coisa que você faria é ir em frente e ir para o seu design e, em seguida, editor de estilo, e uma vez que você está lá, você iria rolar para baixo para onde ele diz fundo da página. Agora, agora, eu só posso definir uma cor, e isso é apenas porque este é o modelo que eu estou usando apenas permite a cor. Agora, se você pode realmente definir uma imagem, você verá uma imagem de uma pequena montanha aqui, e quando você vir essa montanha e clicar nela, você pode realmente fazer upload de uma imagem para que você possa usar uma imagem para fundo aqui onde eu tenho apenas esperar. Então, por exemplo, eu posso definir É preto. Você pode realmente mudar isso para uma imagem se seu template suportar isso. Ok. Agora, quando você realmente define uma imagem como essa para o plano de fundo, ela usará automaticamente a resolução máxima possível. Então, se você carregar uma imagem que é 3000 pixels branco, ela usará essa imagem sem redimensioná-la. Então certifique-se de saber o que está fazendo. Porque se essa imagem for realmente branca, levará um tempo para carregar lentamente. Onde? Conexão. Ok. Obrigado por se juntarem a mim nesta palestra, e vejo vocês na próxima. 23. Páginas de edição: como criar layouts com espaçamento: Ok, então hoje vamos dar uma olhada nos diferentes tipos de espaçamento que podemos ter no espaço quadrado para que todas as páginas não sejam apenas texto. Então, alguns dos layouts que você deseja usar os principais são realmente pré-feitos para você. Então o Squarespace tomou a liberdade de criá-los. Então você só tem que preencher o conteúdo. Então, por exemplo, se eu fosse fazer uma nova página de um chamá-lo uma página de teste, existem alguns layouts aqui você já pode escolher de Não, agora ele está definido para todos os layouts. Posso escolher um específico. Assim, por exemplo, sobre páginas, páginas de contato, detalhes, recursos, imagens, equipe e outros. Então eu não tenho uma página de equipe. Eu não vou adicionar um, mas eu vou te mostrar como é. Então esta é a primeira página da equipe. Então eu colocaria uma foto de um tipo, quem está na minha equipe na pequena descrição e o nome do companheiro de equipe, e nós também podemos ter como este são os dois principais, então talvez CEO dos dois fundadores da Sears ou Kohls e nós podemos ter a equipe para que pudéssemos ter todos listados com imagens pequenas e imagens ainda menores. Então isso é para a Equipe. E então, para cerca de nós temos novamente um layout como este. Nós temos isto. Isto é muito, muito pequeno, como muito estreito. Nós também temos isso e, em seguida, página de contato. Nós temos isso, então é como variações diferentes. Para ser honesto, costumo ir com a página em branco e preencher como eu quiser. Para ser honesto, Mas há alguns bem legais aqui. Então, por exemplo, imagens. Então isso já está pré-formatado para você. Mesmo assim, eles vão ter esse tamanho quando você carregá-los. Então, se você tem, como um site de fotografia, qualquer um faz upload de um álbum específico e estes podem ser como as imagens em destaque. Digamos que fui à equipa saber o que vou fazer com a Paige e com a Peach. Lá vamos nós. Então é assim que se parece. E eu começo a editar. Então você é imediatamente levado para o editor, o editor visual, que possamos clicar aqui para adicionar uma imagem. Vamos tentar isso várias. Vou só colocar. Vamos ver o que posso colocar. Eu coloquei este aqui. Eu acredito que esta é uma imagem comprimida lá fora nós vamos e nenhuma legenda. O foco pode ser apenas à esquerda aqui porque eu acho que parece o melhor. E então vamos bater, aplicar. E então essa é a imagem lá. E então nós poderíamos colocar, como sobre nós página aqui, então eu vou apenas copiar isso. Isto é do meu site existente, e eu vou colá-lo como texto simples porque, é claro, eu não quero que ele leve isso lixado com ele. Lá vamos nós. Agora isso parece OK. Vou apertar “salvar”. Vou dar uma olhada rápida em como isso se parece. Então é assim que parece. E, hum, vamos dar uma olhada rápida. Então o que? O que eu quero, explicar para vocês, é quando você faz como uma página sobre que provavelmente vai ter mais texto em seu site. O que você não quer fazer é ter todo esse texto é um parágrafo apenas caindo porque as pessoas vão se cansar de lê-lo e eles vão parar depois, tipo, da primeira frase. Então, por exemplo, se vocês tiverem algo assim, deixem-me mostrar-vos rapidinho. Então, se vocês tivessem algo assim no seu site. Garanto que ninguém vai ler tudo isso. Essa é uma promessa que estou fazendo para você. Eles provavelmente vão ter, você sabe, primeira frase 2 frases. Talvez se tiver sorte, até três. Mas ninguém vai perder tanto tempo lendo. E quero dizer, ele pode ter o conteúdo mais interessante do mundo, mas a menos que você saiba, é realmente como algo que vai dar valor a eles, eles não vão olhar para isso. Portanto, mantenha isto curto e conciso e certifique-se de separá-lo. Se você tem que ter, tipo, um parágrafo longo para, tipo, você conhece um ensaio, certifique-se de dividi-lo em seções. Isso faz sentido. Então, por exemplo, no meu site atual, você verá que eu tenho um pouco sobre mim blurb lá e, em seguida, mais sobre, mas ele se divide em, como, mobile friendly. Então, se eles querem aprender mais, eles podem ler aqui que expandem o seu negócio e, em seguida, dividir-se mais aqui e, em seguida, dividir-se em atendimento ao cliente aqui e, finalmente, sobre a própria hospedagem aqui. Então, se eu tivesse colocado tudo isso em apenas como um parágrafo, ele teria vindo a ser feito. Provavelmente metade de uma página aqui só de texto. Teria sido cheio de texto. E mais uma vez, ninguém teria lido tudo isso. Exceto que agora, as pessoas realmente querem dizer talvez até mesmo ler apenas os cabeçalhos ele mesmo. Então mobile friendly, expanda o seu negócio em vez do texto. Então isso é definitivamente algo em que você quer trabalhar quando você está fazendo espaçamento. E definitivamente tirar proveito dessas demissões que um pré feito para você. Porque são aqueles que o Squarespace testaram e sabem que funcionam bem. Então, sim, aproveite isso. Ok? Então finalmente vai entrar em rodapés. Então rodapés na próxima palestra, e então vamos realmente começar a criar este site. 24. Páginas de edição: Prefooter e rodapé: Ok, então nesta palestra, vamos dar uma olhada em como vamos modificar o pré rodapé e o rodapé. Então, se você rolar para a parte inferior do site, este é o rodapé pré como um show aqui, e este é um rodapé agora. Nem todos os modelos têm um rodapé pré-rodapé, mas cada um tem um rodapé. Então, no meu modelo, o modelo Bedford, eu tenho um pré-filtros, então vamos em frente e modificar isso. Então agora eu tenho uma caixa de assinatura aqui, e isso é realmente o que eu quero manter. Exceto que eu vou conectá-lo agora para que a caixa vermelha não apareça ao redor. Então vamos para o armazém chimpanzé masculino. E eu realmente vou apenas entrar e escolher minha lista de e-mail para que as pessoas possam realmente começar a se inscrever para boletins informativos. Então deixe-me ir em frente e escolher um B G tec, e então eu escolho hospedagem grátis Upton. E eles vão jogar? Lá vamos nós. E se eu tivesse guardado aquela caixa externa que foi lida agora se foi, então vamos voltar para dentro, então eu vou mudar isso para assinar por um. Normalmente, quando as pessoas se inscrevem. Você quer dar-lhes algum tipo de oferta, como algo de graça ou como um download de livro e, apenas para seduzi-los a se inscrever. E depois disso, você poderia realmente enviá-los, você sabe, promoções e qualquer venda que você possa estar tendo. Então isso é realmente meio pequeno. Na verdade, eu gosto. Bem, podemos mudá-lo. Vou te mostrar como seria através do editor de estilo, um, ou costume. CSS. Se eles são a opção para isso, não é? Vou dar uma olhada em um segundo, então vamos ficar com ele. Senador, flutua os campos ou podemos empilhar o campo. Então este é Stack. Você verá mais se eu disser que precisa de nome. Então é assim que parece quando é isso e quando é flutuado. Ok, então eu não gosto de coletar nomes. Vamos remover isso porque isso é fácil o suficiente para, você sabe, você sabe, apenas eles inserem um endereço de e-mail e então eles podem se inscrever. É fácil o suficiente para não serem adiados tão avançados. Então envie, assine ou altere para se inscrever. Ok, então isso deve ser bom. Sim, então isso é bom. Então vamos bater, aplicar e gravar para que o mouse é assinar. Deixe-me ver sobre essa diversão, porque é meio pequeno. Vamos ao editor de estilo. Clique aqui e há apenas estofamento de luz de estilo, cor do botão. Não há realmente nada para texto aqui, apenas cor do texto. Então parece que eu posso ter que mostrar a vocês como mudar essa fonte como o tamanho eles estão usando CSS personalizado. Então eu vou cobrir isso mais tarde só porque eu não quero que você fique muito atolado com a semântica e como pouco a sintaxe, quero dizer, para a codificação. Então estamos preocupados com aquele líder. Então, sem levou o CSS personalizado aqui líder. Então, por enquanto, vamos deixar como está. Não é muito, muito ruim. Então vamos deixar que eu também tenho meu comprimento de mídia social aqui e aquele que eu coloquei mais cedo em uma das palestras e realmente gosto disso. Então saia para lá e, finalmente, passará para o rodapé. Então, antes de mover em frente no rodapé pré e no rodapé, se você apenas passar o mouse aqui como com páginas e blocos regulares, você pode adicionar qualquer bloco que você quiser para que você possa adicionar você sabe, um mapa, gráfico, Comércio, qualquer coisa. Você poderia ter um produto. Se você está na cela, você pode. É como um bloco normal. Exceto agora, no rodapé. Agora o rodapé e a prefigura vão aparecer em cada página exatamente da mesma forma . Então este é o mesmo rodapé que veremos. Por exemplo, estou em casa. Se eu for para o portfólio e, em seguida, eu rolar para baixo até o fundo. É exatamente o mesmo. Então, se eu fizer uma alteração em uma página, ela se aplicará automaticamente a todas as páginas, que você não precise continuar alterando-a. Então, no rodapé agora, ele é alimentado por squarespace, e isso é tudo que eu posso editar. Eu não posso realmente adicionar esta parte onde meu nome é iniciado. O A B G Tec, Toronto, Ontário. Eu posso realmente mudar isso porque essa é a minha informação de negócios que eu preenchi. Quero dizer, eu poderia mudar minhas informações de negócios, mas isso é o que é, e eu não quero que elas sejam exibidas. Eu posso apenas ir ao editor de estilo, basta clicar nele e esconder informações do site para que ele simplesmente desapareça assim. Ok, e você também pode mudar a fonte disso. Então esta parte você pode realmente alterar a fonte de, mas não a caixa de assinatura assinada. Então é tudo tampas, fechaduras fariam, você sabe, capitalizar. Então, sabes que mais? maiúscula parecia muito boa, então deixe uma espinha, e nós voltamos. Então agora o que eu realmente vou fazer é remover isso. Ok? Então remova esta parte inteira aqui. Eu não quero ficar alimentado pelo espaço quadrado. O que eu preferiria que tivesse é um menu secundário. Porque quando as pessoas rolam para baixo até a parte inferior do seu site, esse menu desaparece, então você quer que eles sejam capazes de navegar rapidamente para as diferentes páginas facilmente. Então tivemos hospedagem de portfólio em casa, então hospedagem de portfólio em casa. E então tivemos sobre nós blogando. Contacte-nos sobre nós sangue e contacte-nos. Agora com isso, podemos realmente ir em frente e centralizar isso ou podemos escrever uma linha. Ok, agora, outra coisa que podemos fazer é quando ele entrar, podemos colocar como um divisor para que possamos colocar como uma pequena linha bem ali. Então isso é logo acima da tecla Enter no teclado enquanto a mudança é pressionada e que vai ser isso com a mudança. Como isso te daria isso só para meio que separados. Ou outra coisa que podemos fazer é às vezes eu gosto. Então, há como hospedagem de portfólio de casa sobre nós bloco de contato tipo espaçados uniformemente. Então, para fazer isso, o que temos que fazer é me deixar mostrar para você colocar em um texto, eu vou chegar em casa, e então você coloca em outro texto, torná-lo portfólio e nós pegamos portfólio. Coloque-o no lado direito de casa e ele vai no centro. Isto enviado através deste e eu vou colocar em hospedagem. Então, basicamente, estamos adicionando um bloco para cada um desses que podemos uniformemente espaçados ao longo do fundo. É um pouco mais de trabalho, mas acho que parece melhor. Lá vamos nós. Acho que parece muito melhor, mas muito alto. Lá vamos nós. E, novamente, não funciona para todos os casos, então se você tiver muito, não funcionará muito bem. Então, hospedagem em casa por você eu confundi isso. Então, o próximo é sobre nós. Tentei colocar na mesma ordem. Ele aparece no no menu na parte superior. Então pegue isso e coloque desse lado no centro disso. E depois temos blogado. Eu só quero que vocês vejam como isso seria quando finalmente acabar. Gosto mais desta maneira. Então é por isso que estou tomando meu tempo para fazer isso. E então temos contato conosco, te mandei lá. Ele vai arrastar isso um pouco complicado porque é apenas uma linha de texto e também centralizar isso . Ok, então agora o que você vai notar é que desde que eu coloquei seis deles, eles são todos estranhamente tamanho. Então estes dois são muito pequenos. Então há isso, que é como tamanho normal, e o resto parece bem, então podemos ir em frente e consertar isso assim, ou podemos deixá-lo às cinco depois das cinco. O com meio que começa a ficar arruinado. Hum, e não há realmente nenhuma maneira de corrigi-lo mesmo quando você realmente arrastá-lo. Como quando você arrasta e faz com que seja uma inteligência diferente. Parece estranho em dispositivos diferentes para cinco é o máximo que eu realmente iria com. Neste caso, já que tenho seis a juntar-me, tenho seis ainda, por isso não vai ficar bem assim. Eu poderia deixar um de fora, como a página de contato, que provavelmente é o que eu vou acabar fazendo. Ou posso ir em frente e fazer assim. Então eu excluir estes porque eu realmente quero colocar todos os meus links lá, porque a página de contato é muito grande e assim são todas as minhas outras páginas. Não há nada que eu queira deixar de fora. Então deixe-me apagar isso, não é uma completa perda de tempo, porque eu realmente queria que vocês vissem como isso seria. Lá vamos nós. Então agora o que você pode fazer é você pode destacar cada um para que você possa clicar duas vezes sobre ele ou apenas violá-lo. E você pode clicar em Editar link e você pode alterar o link para a página inicial para este portfólio hospedagem sobre nós bloquear e entrar em contato conosco. Assim eles levam para a página. Eles deveriam. Ok, então é assim que você tem links para o rodapé. E há outra coisa que eu normalmente gosto de adicionar dois rodapés e isso é um copyright. Então eu gostaria de escrever como direitos autorais 2016 um B G tec. Então este é o padrão que eu costumo seguir. E eu também gosto de colocar um símbolo de direitos autorais aqui para realmente obter esse símbolo. O que eu faço é ir para o Google digitando símbolo de direitos autorais. Pegue isso em destaque. Copie e venha aqui no meio. Uh, então bem ali. Então, entre esses espaços oportunos, volte um. Então eu estou bem no meio. Colar é texto sem formatação. Lá vamos nós. Então é um espaço entre outra coisa que você pode fazer no teclado. Você pode aguentar, Ault. E se Azzam você não tem bloqueio ligado, isso vai funcionar. Então você aguenta e coloca 0169 e isso também vai colocar um símbolo de direitos autorais bem ali. Ok, então é isso que eu gosto de colocar no meu rodapé. Ok, então isso é tudo por um pé. E vejo vocês na próxima palestra. 25. Blogs: Aprenda a escrever blog: Ok, então na última palestra, fizemos o rodapé no conteúdo pré rodapé. Agora vou mostrar a vocês como vão usar este site para o Blawg. Agora, blogar é extremamente importante. Ele mantém seu site atualizado para que você continue aparecendo. Primeiro no Google Searcher algo assim, se você estiver fornecendo informações valiosas para seus clientes e como pessoas que visitamseu site, obviamente. Primeiro no Google Searcher algo assim, se você estiver fornecendo informações valiosas para seus clientes e como pessoas que visitam seu site, Assim que você entrar na primeira página do Google, é mais fácil ficar na primeira página se você realmente bloquear e você vai aprender mais sobre isso quando você realmente fizer, como, um curso de marketing, se você ainda não fez isso. Então a primeira coisa que vamos fazer é criar uma postagem em bloco na página real. Então eu mostrei a vocês como fazer uma página mais cedo. Então você basta clicar em mais e, em seguida, blogar, e é assim que você faz a página de bloqueio real. Então minha página de bloqueio está assim agora. Então eu tenho um post aqui para posar três postes. Então eu tenho três ao todo se eu clicar na página blog real no lado esquerdo. Então, se eu clicar aqui, meu post aparece. Ok, então se você clicar no sinal de mais, deixe-me mostrar o que tem aqui. Primeiras configurações de bloqueio. Então este é apenas o nome do blog, o Conde do Bloco e uma senha. Se você quiser uma senha, proteja-a. Então, vamos clicar em Adblock Post. Então este é o nome do bloco, assim, das postagens de bloco. Então vamos dizer que vai ser o primeiro post blog ou realmente torná-lo bem-vindo ao meu bloco . Ok, então aqui é onde você realmente digitaria o seu poste de bloqueio. Então, este é um novo blog bem-vindo. Vejo-te em breve. Por isso, vais demorar muito mais tempo. Eu só estou colocando isso na frente porque eu realmente não sei o que colocar lá dentro. Então esse é o seu posto de bloqueio. Agora você pode adicionar tags ao seu post de casca ou algo como se fosse um bem-vindo e talvez espaço quadrado e cursos. Então, estas etiquetas aéreas. Assim, as pessoas poderão clicar em uma tag específica para ver todas as suas postagens de bloqueio que tenham uma tag de boas-vindas nela. E você também tem categorias, então você pressiona mais criado categoria para que possamos fazer este fatos aleatórios e, em seguida, pressione enter e que irá criar a categoria. E podemos fazer outro chamado, por exemplo, dicas e truques. Ok, então estas vão ser diferentes das etiquetas. Então, agora, se você tiver uma categoria selecionada, será uma sombra mais escura. Então agora eu tenho zero categorias escolhidas vai fazer esta rodada, na verdade, e então eu clique fora. Não, está na categoria. Fatos aleatórios. Agora os comentários estão ativados. Posso desligá-lo aqui clicando nele, e agora é um rascunho. Posso publicá-lo, agendar no futuro, então vai sair amanhã ao meio-dia. Eu posso mercado é revisão para que o meu real como vamos dizer que eu sou apenas um editor se eu colocá-lo é revisão. O administrador do site tem que entrar no mercado como ele revisou e, em seguida, publicá-lo para que também possamos publicá-lo. Nós mesmos aqui, salvando, publicado. Já que temos a opção, , e outra coisa que podemos fazer, podemos apenas editar páginas. Você tem este pequeno símbolo aqui que lhe permitirá adicionar blocos para que você possa adicionar seus links sociais , por exemplo, por exemplo, Assim como antes que possamos colocar em áudio texto apresentações de slides, boletins informativos se inscrever. Então é exatamente como uma página, exceto para não bloquear postagem. Então, há um monte de personalização é que você pode fazer para o post real. Então aqui está novamente adicionando blocos. E se você vai para opções em outra coisa legal, você pode realmente ir em tela cheia com isso para que você possa ver todo o post do bloco e foram boas opções. E então podemos adicionar uma imagem em miniatura. Eu definitivamente recomendo que você adicioná-lo. Eu não sou imagem. Então, por exemplo, se eu for, vamos acrescentar, isso não é algum agora, Sim, nós realmente usamos este porque é uma imagem menor. Então provavelmente vai carregar mais rápido aqui. Como podemos realmente mudar o Conde do Post aqui para que possamos fazer este post de boas-vindas. Ok, eu realmente não gosto do gerado um suprimento de espaço quadrado. Então eu uso isso. Podemos deixar isso em paz. Você quase nunca precisa disso. Então isso é como suas fontes como lista de referência. E o trecho é realmente o que aparece nesta página de bloco. Então, no fundo, eu mostrarei isso antes que ele diga Leia mais então se eu for para a minha página bloqueada lá, nós temos então lá vamos nós. Então agora diz, leia mais. Este é o trecho real. Considerando que aqui, ele não salva Leia mais porque este é o post bloco inteiro, porque era um post muito curto, então eu posso colocar em um trecho agora. Eu vou fazer isso. Então, copie isto. Boa opção. Coloque isso como um trecho. Ele salvou. Então agora ele realmente mostra. Leia mais. Ok, se você não colocar uma pílula extra, coloque todo o seu poste, que, se for muito longo, não vai ficar limpo aqui. E você também precisa de um pagamento extra se você vai usar seu post de bloco como uma galeria ou um bloco semi, que eu vou mostrar apenas um segundo depois disso. Ok, então aqui você pode escolher o autor. Eu sou o único autor no meu site, e eu posso realmente também marcar este é um post em destaque, que eu vou apenas porque é o meu post bloco real. Por enquanto, você pode adicionar locais que você não precisa, e eu não vou e você pode colocar em social. Então, se eu marcar isso quando bater. Ah, publique. Ele vai automaticamente pegar este post e empurrá-lo para fora para a minha página do Facebook para que as pessoas vão saber que eu escrevi para fora. Então vamos bater em salvar. Certo, então é assim que parece. Não, eu realmente não gosto de como isso parece ser honesto, porque eu quero dizer, você tem o cabeçalho aqui, e então apenas todos esses posts listados aqui, eu prefiro tê-lo como, apenas como uma página onde é um pouco mais elegante, então eu vou te mostrar como fazer isso. Primeiro, vou remover isto do meu menu, por isso coloquei aqui em baixo. Ok, então agora se eu for para casa, você verá que o quarteirão não é mais aqui em cima. Vamos em frente e adicionar uma página chamada Blawg. Não é um blog, mas um nome de animal de página que bloqueia. E então todo o seu início de edição e o que eu vou fazer é aqui. Talvez eu coloque em bloco e todo o século, torná-lo um cabeçalho. E aqui em baixo, vou colocar um resumo. Talvez, na verdade, vejamos como isso será. Vamos tentar a parede primeiro. Vamos escolher o tronco. Então Leo realmente exibir primeiro, Então ele vai exibir 30 que é um máximo. Vamos para o conteúdo. Vamos fazer com que isso se importe. Então isso vai mostrar aquela pequena etiqueta lá em cima. Isso é destaque. Deixe-me realmente apertar salvar porque as imagens não estão aparecendo aqui. Lá vamos nós. Havia apenas muito grande, então eu posso mudar essa palavra Há dois destaque pose mais recente bloco pose e, em seguida, podemos mostrar mais de três por linhas de quatro ou cinco. Então quatro ficariam assim. E então, claro, é como o resumo que mostrei a vocês. Vamos ver o que parece melhor. Então nós vamos para expor Paul seria parecido com esta lista. Eu meio que gosto do olhar da lista e ótimo. Sim, vamos manter a lista porque eu gosto de como essa imagem mostra aperfeiçoa as imagens à esquerda e mostrando 10. Ela vai ler mais. Então, novamente, se você Markoff mostrar trecho, não mostrará nada. Não mostrará sua postagem de bloqueio, então se você não tiver um trecho, não mostrará nada. É por isso que trechos são realmente importantes para ter certeza que você sente que em, e isso parece bom. Gosto mais da aparência disto. Sim, isso é muito melhor do que realmente como isso parece, pelo menos na minha opinião. Então, cabe a vocês, mas tenham em mente, , nós apenas movemos isso para onde pertence. Então deve ser sobre nós. O Blawg. Então, sobre nós, depois bloqueie. Então, tenha em mente que neste momento há um limite de 30. Então, após 30 postagem de bloco, eles não serão capazes de ver nenhum outro post de bloco. Então o que você pode fazer é realmente ir para a direita aqui, colocar em um botão de pesquisa de botão e ler mais post bloco. E então eu posso ligar isso ao meu blogue de verdade. Então bloquear e você também pode vincular a uma categoria específica. Mas eu quero que eles realmente leiam todo o blog, e vamos torná-lo um botão de tamanho médio. E agora vou mudar isto para três. Porque se você quiser, se você colocar 30, vai até o final da página. Vai fazer com que seja uma página muito longa. Então, vamos fazer três. Então eu tenho quatro quarteirões postes, mas eu só estou mostrando três. Então, se eles querem ver mais eles têm que clicar em, ler mais, e então eles serão levados para aqui onde eles podem ver fora para o post do bloco. Ok, então essas são as duas maneiras diferentes de você ter uma página bloqueada. Um seria uma página bloqueada e o outro seria um bloco real, e vocês podem ir em frente e escolher qual todo mundo que você acha que tem a melhor aparência. 26. E-Commerce : como adicionar produtos: Ok, então se você vai estar vendendo qualquer coisa em seu site em tudo, ou se você vai ter um tipo de site e comércio, então esta palestra é muito importante. O que vamos fazer é adicionar produtos que as pessoas podem realmente comprar, você possa começar a gerar alguma receita em seu site. Ok, então a primeira coisa que você precisa fazer antes mesmo de adicionar produtos é criar uma página de loja. Então eu não quero que a mente fique ligada no topo aqui, então eu vou colocá-lo em baixo, não ligado. Então eu vou pressionar o mais e vamos fazer uma página para os produtos e eu vou nomeá-lo. Vamos apenas sair. São produtos. Na verdade, esse é um título muito decente, ok? E você será levado para esta página. Agora, se você tiver que voltar a esta página, tudo o que você precisa fazer é clicar nos produtos aqui e nós o levaremos aqui. Ok? Agora, a partir desta página, vamos em frente e adicionar um produto clicando no sinal de mais aqui. E então veremos que há três tipos de produtos físicos, digitais e de serviço. Física é algo que as pessoas pagariam e seria enviado para sua casa. Então, se eles estão comprando como um dispositivo eletrônico, ou se eles estão comprando como uma cópia física real de um livro, digital é como um arquivo que eles pagariam, e eles serão capazes de baixá-lo por um certo período de tempo. Então isso é algo como um livro que compra bacon e serviços algo que você vai fazer por eles. E não há custos de envio ID associado. Então, se eles estavam comprando como o serviço S CEO ou se eles estavam comprando hospedagem ou você vai fazer um site para eles em troca de dinheiro, você iria colocá-lo em serviço. Então o que eu vou adicionar é o meu pacote de hospedagem, 10 passos de produto que eu vou realmente estar vendendo. Então, vamos em frente e clique no serviço. A primeira coisa que eu gosto de fazer é fora da imagem do produto. Então vamos para a minha pasta, onde tenho todas as minhas imagens e vou colocar uma imagem de um servidor, ok, e eu coloquei os preços Bem, em apenas um segundo, eu ia esperar que esta imagem fosse feita. Vou pegar a informação desta página do meu site. Então vai ser 45 com desconto para 20. Então deixe-me realmente colocar em hospedagem por um ano primeiro. Certo, então, dando um ano uma cópia da descrição aqui também, eu não colo aqui. Então, novamente, em texto simples, ok. E então eu vou fazer cada um desses uma lista tão baixo assim novamente ou o cursor não tem que estar na frente. Pode estar em qualquer lugar aqui. Quando você clica no ícone da lista, então faça de cada um deles uma lista que eles estão falando. Esse é o último. Perfeito. E, em seguida, se você clicar no preço aqui irá levá-lo para o preço na parte superior. Então, se eu clicar, os preços me levarão até aqui. Então, em estoque, eu tenho preços limitados e regulares. 45 eu mesmo. Preços 20. Então, agora, será listado como 45 se eu colocá-lo em até que ele vai levar o preço de venda. Alguma informação adicional? Eu realmente não tenho nenhum para este produto em um formulário se no final, eles têm que preencher um formulário a fim de comprá-lo, Então eu vou criar um novo formulário para produto e realmente informações comerciais apenas para que eu possa obter algumas informações sobre eles para configurar a hospedagem. Então eu vou pedir o nome deles, que é necessário um último para seu endereço de e-mail. Consulte o e-mail, que também é obrigatório. E também lhes pedi o nome de domínio deles. Lá vamos nós. Então, isso também é necessário. E eu também vou ter apenas um ano de textura onde se eles têm alguma dúvida, você pode fazer perguntas sobre comentários. E isso não é necessário porque se eles não têm perguntas, eles não têm que preenchê-lo. Ok, e então eu vou economizar. Então nós iremos. As opções tornam este produto que você é l em hospedagem porque, novamente, o que o Squarespace gera nem sempre é o melhor. E eu acho que é que deve fazê-lo tão bem, na verdade colocar em categorias bem categoria que eu vou chamar de hospedagem e, em seguida, dar-lhe para tomar. Eu não entrei. Então, quem vai ficar? Digite no teclado. Lá vamos nós. E, em seguida, para tags, hospedagem de saída. Acho que deve ser o único lá. E então eu vou em frente, salvar e publicar. Não, tenho aqui o meu produto. Então é assim que você adiciona um produto, deixe-me realmente mudar como a imagem aparece. Então eu dobrei rápido e eu queria estar mais focado aqui, e eu vou bater em segurança. Mais uma coisa que você pode querer fazer com o produto é em diferentes variações dele . Então eu vou apenas mostrar-lhe como fazer isso neste produto, assim você vai saber Então para variação. Então eu diria que eu quero ter uma variação chamada Duração. E agora você pode ter um chamado tamanho de cor se você está vendendo camisetas ou roupas. Então eu vou fazer o 1º 1 uma duração de um ano e eles vão adicionar um segundo produto com uma duração de três anos. E eu vou mudar o preço por isso. Porque, claro, é claro,não vai ser o mesmo por diferentes períodos de tempo. Então, este é 1 35 com desconto para 50, então 1 35 com desconto para 50. Vá em frente e eu vou bater em salvar, e eu vou te mostrar como é isso. Então, se eu for para os produtos agora e eu clicar neste produto, você verá que quando alguém vai comprá-lo, eles verão duração e quantidade para que eles possam escolher um ano e eu vou mostrar a eles $20 ou três anos e vai mostrar que $50 para que você possa ter produtos diferentes. Você pode ter estoque diferente para cada produto. Então, por exemplo, digamos que você só quer vender 10 produtos na Nesta variação, você pode limitar que você pode ir estoque e mudar que muito limitado e ainda tem o outro é ilimitado, então que também é uma opção. Certo, então agora se voltarmos, o produto ficará assim. Então é perfeito. Então, no lado esquerdo, você vê categorias que você pode filtrar por hospedar o único produto que eu tenho. Então é tudo o que você vai ver por enquanto, então é assim que você adicionaria um produto. 27. E-commerce : como fazer pagamentos: agora que temos o nosso produto realmente adicionado ao site, vamos em frente e entrar em nossas configurações de strike para que possamos conectar nossa conta stripe e começar a receber pagamentos. Uma coisa que eu quero mencionar é que como um 1º de dezembro de 2016 pontuações, por favor tem suporte para PayPal. Então, no próximo verde, quando você estiver dando uma olhada nas minhas configurações, ele vai aparecer apenas maduro, hum, na sua tela. Quando você está criando um site, você verá o PayPal como uma opção, bem como para conectá-lo. Tudo o que tem de fazer é iniciar sessão com a sua conta empresarial do PayPal e irá pedir-lhe para criar uma conta se ainda não tiver uma. Então vamos para as configurações e, em seguida, a seção de comércio. Então eu deveria vocês um pouco antes e agora nós realmente vamos começar a usá-lo, então indo para o pagamento e nós vamos clicar em Connect Strike. Agora, Se você não tem uma conta direta novamente, você pode criar uma preenchendo este formulário aqui. Na verdade, eu já tenho um, então eu vou preencher isso aqui então vai ser deixe-me apenas preencher minhas informações e vamos em frente e entrar e eu vou apertar a senha segura e conectar minha conta stripe. Então agora ele deve puxar automaticamente todas as informações para o Squarespace. Vamos dar-lhe um momento. Lá vamos nós. E agora tenho algumas escolhas. Posso aceitar o pagamento da Apple. Vou em frente e ligar isso. Essa é apenas outra maneira de tornar as coisas mais fáceis para os clientes, então por que não? E as ordens de teste? Eu realmente não vou permitir isso porque eu não vou estar fazendo nenhum pedido de teste agora. E agora estou a salvo. Vamos voltar e armazenar moedas de dólares canadenses, o que é perfeito. Você pode mudá-lo se quiser. Mas canadenses o que eu aceito. Então isso é perfeito. E depois confira. Vou ligar o meu chimpanzé do correio para que as pessoas possam entrar. Desculpe, inscreva-se no meu boletim informativo e eu posso coletar endereços de e-mail. Então vamos em frente e escolher minha conta e eu vou fazer o país padrão Canadá, uma vez que é onde meu alvo, nossos públicos e habilitar derreter pelo menos optar. Então esse é o segundo. O segundo perde mais leve que as pessoas ficam. Receba dizendo Tem certeza de que deseja se inscrever? Então eu escolho isso. Assim eles só têm que se inscrever aqui, e eles não têm que confirmar. E depois baterei em segurança. Então tudo o resto que eu preparei mais cedo, então é tudo perfeito. Então agora a faixa está conectada. Então, sempre que alguém, por exemplo, clica no produto, adiciona ao carrinho e, em seguida, verifica que o dinheiro deve ir direto para a greve. É um simples é que Ok, Então, na próxima seção, vou mostrar a vocês como podemos ter esses produtos para a página real que eles pertencem, e então vamos a partir daí. 28. E-commerce : Exibindo produtos: Ok, então agora que colocamos o produto na nossa loja, vamos em frente e adicionamos a uma página, então vamos para a hospedagem. É aí que quero mostrar o meu produto de hospedagem. E acredito que seja uma página vazia por enquanto. Então, vamos clicar em Editar irá ignorar o bloco de texto, e vamos clicar aqui e vamos fazer uma pesquisa para o produto. Perfeito. Vamos clicar no produto e vamos apenas digitar em hospedagem. Há o anfitrião que eu queria mostrar e podemos mostrar o título mostrar a descrição. Sim, na verdade. Descrições bem mostram. Adicionar ao botão carrinho, e isso funciona muito bem. Então vamos em frente e salvar. E eu vou mudar isso para hospedagem apenas para tipo de reiterar o que é sobre e vamos torná-lo um cabeçalho. Número um. Como eu disse antes, você quer ter pelo menos um mais pesado não vai. Pelo menos você quer ter exatamente um cabeçalho em cada página porque isso é muito bom para ASIO. Então vamos bater em segurança. Agora eu acho que esta imagem pode ser um pouco grande demais, então vamos em frente e torná-la um pouco menor. Então, enquanto estamos aqui, podemos centralizar alinhar o texto porque, como eu pensei, eu gosto de tudo linha central e uma coisa que você vai notar é que os pequenos pontos eles à esquerda na lista ordenada em que é um texto Vá para o centro. Agora vou mostrar como você pode fazer uma pequena alteração para mover esses pontos também, usando TSS personalizado. Mas, por enquanto, deixaremos como à esquerda. Ok, você vai ver isso nas palestras bônus. Então, para tornar a imagem menor, vamos em frente e colocar dois espaçadores, um para cada lado, e vamos colocar Justin à esquerda daquela seção. Então lá vamos nós, e depois vamos para aqui. Isso vai torná-lo um pouco maior aqui, e isso é perfeito. Então vamos em frente e acertamos em salvar. Então é assim que você adicionaria esse produto de página específica. Outra coisa que você pode querer fazer é ir para a sua página principal e adicionar seus três principais produtos vendidos , por exemplo, que você possa colocar, por exemplo, um resumo irá torná-lo uma lista de produtos e nós vamos escolher apenas os produtos em destaque. Então, para mim, essa é essa. A única farinha com o uso de um resumo é que não há como adicionar. Adicionar ao carrinho botão para que alguém realmente tenha que clicar neste produto antes de poder comprá-lo . E não vamos fazer disso uma lista. Vamos torná-lo um grande sim, Grid parece melhor e vai fazê-lo com Na verdade, três está bem. Certo, isso é perfeito. E vai alinhar o texto no centro? E então tudo o resto parece muito bom abaixo. Sim, isso é bom. OK, então vamos bater. Aplicar bem, ele salvou. E assim como eu fiz este um produto em destaque foi, Eu simplesmente quero meus produtos clicou duas vezes no produto que eu queria mudar, e vamos para opções e disse que é destaque. Ok, na terceira e última coisa que você pode querer fazer é apenas colocar como produtos em uma categoria específica . Então, digamos que você só quer mostrar seus produtos de hospedagem aqui, e você tinha mais de um que você iria para exibir e você desativar destaque. E para a categoria, você colocaria algo como hospedagem. Então agora ele vai exibir todos os produtos que você tem que ar sob a categoria hospedagem, ou você pode usar tags. Acho que aquele que eu disse que estava hospedando de novo. Qualquer produto que tenha tomado com esta etiqueta aparecerá aqui. Ok, então é assim que você configura, hum, produtos diferentes em páginas diferentes. E então a próxima palestra mostrará como podemos mudar alguns dos looks usando o editor de estilos . Então isso pode ser um pouco mais de uma palestra. Só porque há um pouco para cobrir, então fique atento. 29. Editor de estilo: como usar o editor de estilos: Então esta palestra é toda sobre o editor de estilos, que é onde iríamos para mudar fontes e tamanhos de fontes e todas essas coisas boas. Então vamos para design e, em seguida, editor de estilo, a terceira opção. Então isso é como o centro de comando onde mudamos tudo. Então vamos primeiro, eu mostro-te aqui em baixo. Você vê como meus links a cor dos links é a cor verde dele, o que eu realmente não gosto. Então, agora, se eu clicar nele Página Link cor é esta esta cor verde que veio com o tema com o modelo e eu realmente não gosto disso. Então eu vou escolher minha cor vermelha normal que eu realmente gosto. Quero dizer, uma cópia e eles vão clicar neste verde, e eu vou colado dentro. Ok, essa é a primeira coisa que eu faço porque eu notei imediatamente enquanto eu estava fazendo mudanças que eu não gostava disso. Então, como podem ver, é assim que meu editor de estilo se parece. O seu vai inevitavelmente parecer diferente só porque você provavelmente vai escolher um modelo diferente para ir com. Se não, então o seu parecerá o mesmo também. Então vamos ver. Então agora navegação no site. Isso eu mudei mais cedo em uma das palestras anteriores. Então vocês sabem o que há lá? Então cabeçalho do site está no topo aqui, e temos navegação do site do que a seção de fichário. Esta seção inteira está aqui? conteúdo principal é o conteúdo da página nos anos brancos, tudo isso. E então temos o blog, que é que eu teria que clicar no bloco, eu vou te mostrar. E então nós temos o bloco de resumo, que eu acredito que este é um bloco de resumo. Então, sim, é para que eu possa fazer este vermelho. Faça o mesmo. Vermelho é minha cor vermelha do meu logotipo. E também podemos mudar a fonte. Agora é nova próxima, então podemos fazer como você faz. O presidente da Adobe fará Brie. Vamos deixar o seu briefer agora. E, em seguida, há o conteúdo de rodapé pré depois que o que está bem aqui e no conteúdo de rodapé bem aqui. Então o rodapé eu gosto da cor de Eu gosto deste cinza combina com o meu preto no meu logotipo. Então nós temos isso realmente fazer isso um preto sólido se ele não é já. Sim, não é por isso vamos torná-lo um preto sólido. Vou fazer a fonte para a cor do texto em branco. Lá vamos nós, em peso total. Eu também vou fazer isso o peso total. Lá vamos nós. Então, novamente, isso é como o brilho. Ok, então esse é o peso total de 100% branco, e então nós vamos voltar para mostrar tudo de novo, eu posso fazer os cabeçalhos em que a cor vermelha também, apenas para tipo de fazer sobressair do resto do texto. Então eu vou te mostrar o quarteirão agora. Então, para o bloco, nós podemos realmente clicar no Blogger aqui em cima, e eu tenho certeza que sim, eu tinha. Este é um resumo. Então deixe-me mostrar-lhe o meu bloco real, post ou bloco página. Foi quando eu cliquei aqui, ponto final. Então esse é o meu blog local de volta no que a violou. E temos uma seção só para o Blawg. Então, aqui mesmo. Então isso é para as apresentações de slides. Eu não tenho uma apresentação de slides no meu blog, então isso realmente não importa para mim. E então temos a prioridade do assunto, que é a data que poderíamos transformar em categoria, que é uma das melhores aqui. Podemos fazer isso para o autor, ou podemos transformá-lo em noz. Então eu acho que deixe-me ver como o primeiro 1 se parece. Encontro. Acho que não gosto mais de ninguém só porque depois dos dois. Então agora é o encontro e a categoria aqui, se eu escolhi nenhuma categoria de namoro, venha aqui. Eu gosto disso o melhor. Este é o centro. Qual centro parece bom, na verdade. Então vamos manter o centro escondido lá fora. Algo que só um blog vai esconder os autores vão dizer o meu nome várias vezes. Esconda a entrada da L Sim, estas são as etiquetas. Quantos comentários? Tudo o que temos parece mais limpo assim, mas acho que isso mostra mais informações e as pessoas podem gostar. Grande distância. Então acho que vamos deixar isto aqui e este bar lateral. Então, neste momento, há uma barra lateral bem aqui. Veja como quando eu vou aqui há um pouco de espaço sobrando daqui até aqui. Essa é a barra lateral. Não gosto de barras laterais em sites. A não ser que você tenha um onde você vai colocar, como publicidade no lado? Então essa é a barra lateral. E isso é praticamente tudo o que podemos editar com Blawg. Agora, uma coisa que eu realmente não gosto no espaço quadrado que você tem que tipo de CSS personalizado, que eu vou mostrar a vocês. Mas, de novo, avise-o do que não gosto. Digamos na minha página inicial, certo? Então na minha página inicial eu tenho um par de títulos que eu fiz vermelho, se você lembra. Então este é um título. Então este é um número de cabeçalho. Vamos ver o estilo ajudado. Aqui vamos clicar sobre isso. Então este é um título número um. Ok, então este é um número de cabeçalho. É só uma ligação. Não é um cabeçalho. Então este é o cabeçalho número um. OK, agora se eu entrar em portfólio, por exemplo, não fez nada lá? Digamos que eu vá para a hospedagem. Então, sob hospedagem, eu sou outro título. Então vamos ver o que é isso. Acho que isso é hospedagem. Hospedagem é o número um também. Então vá para lá, número um tão rápido que vai para o número um. Então, digamos que na página de hospedagem eu queria que isso fosse, digamos verde. Muito bem, tão verde. Certo. E eu diria que você verá isso quando eu voltar para minha página inicial e eu rolar para baixo. Este cabeçalho é agora verde para o qual é horrível, porque vai haver momentos em que você quer diferentes títulos coloridos em páginas de cores diferentes. Mas o espaço quadrado não permite que se você escolher à frente e cor, esse é o único que você vai ser capaz de usar. Então todos os meus títulos agora vão ser esta cor vermelha. Então, se você quiser mudar isso, nós temos que usar CSS personalizado. Vou mostrar-vos isso daqui a pouco, mas por enquanto, saibam que o que tiverem aqui é um estilo global global. Então qualquer uso de vermelhos que será global. Ok, então novamente, fundos. Agora, o que você pode fazer é definitivamente passar por aqui e dar uma olhada nas diferentes fontes. E não use mais de um ou dois em seu site. Só porque você não quer ter, você sabe, você sabe, muitos tipos diferentes de fundos que tipo de pessoas confusas usam um ou dois que você acha que parece bom. Quero dizer, primeiro roteia o roteiro da Lily. Um parece bom. A última aderência parece boa, e nos fundos regulares regulares há exibição justa jogo, o que parece muito bom. Deixa-me mostrar-te como é. É provavelmente o que eu uso mais frequentemente. Então este é o play fair play fair play fair display. Eu realmente gosto de como isso parece. E também Helvetica. Obviamente, muitas pessoas usam e Ariel novamente. Algo que as pessoas usam um pouco comum parece muito bom, na minha opinião, é claro. Definitivamente dê uma olhada. Katherine parece muito bem. Catalin e eu já usamos Oswald um pouco, e eu acho que é só isso. E uma nova próxima. Esses são provavelmente os fundos que eu uso mais frequentemente. Eu realmente gosto do olhar lá em cima muito limpo e profissional olhando. Ok, então também ter um dar uma olhada através de seu editor de estilo, bem, porque você terá diferenças aqui. Como eu disse, para o seu fundo, você pode ter uma pequena montanha aqui, o que significa que você pode realmente definir imagens de fundo. Então, isso é apenas em modelos específicos. E meu modelo, que é melhor para ele não tem suporte para isso. Além disso. Isso é praticamente tudo aqui. E se você fizer algumas alterações e não gostar, você sempre poderá redefinir para o padrão. Hum, e se você é um padrão por acidente, você pode simplesmente apertar cancelar sem salvar. Por isso vou guardar isto. E eu acho, sim, isso é muito bom por enquanto. Quando eu começar a fazer algumas das minhas páginas, você vai me ver saltando para frente e para trás entre o editor de estilo e minha página só porque eu vou fazer alguns ajustes em movimento como eu ir. Então este é definitivamente este é definitivamente Page vai voltar para uma e outra vez. Ok, então isso tipo de cobre todas as palestras básicas porque agora nós sabemos como adicionar páginas como adicionar produtos, todas essas coisas boas. A única coisa que resta a fazer é eu vou mostrar alguns CSS personalizados que eu usei um pouco, e você provavelmente vai achá-los muito úteis também. E finalmente, vocês podem me ver criar este site o resto do caminho. Pegue, leve para casa, e então você tipo de aprender o que pode funcionar flui como 30. Assista a trabalho: a página inicial: Ok, então finalmente quero as palestras bônus onde eu realmente vou ir em frente e criar meu site e vocês podem acompanhar só para ver como eu meio que faço as coisas. Então a primeira coisa que eu gosto de fazer é que eu gosto do tipo de em minha mente ter uma idéia de como eu quero que a página para olhar. Então, neste caso, eu vou torná-lo muito semelhante ao meu outro site. Então meu site real, então com várias seções aqui. Então, obviamente, a fim de implementar algo assim, eu tenho que fazer uma página de índice agora mesmo na minha página inicial. Só tem, você sabe, um banner e, em seguida, uma seção sobre eu queria ser um índice, então vamos em frente e clicar no Índice aqui e chegar em casa. E então eu vou levar esta home page e dragão para dentro só para eu não ter que começar do zero. Não é, eu tenho a minha página regular parece muito semelhante ao que fez antes mesmo tempo idêntico. Olhe antes, com uma exceção, posso adicionar mais seções. Então, depois da home page regular, eu tinha a seção sobre, que está aqui. Deixe-me apagar esses extras, então apague que eu tenho certeza que vamos voltar e adicionar a maioria deles em um segundo. Mas só para manter as coisas semelhantes a como elas são minha outra página e a próxima que temos , vamos ver, depois de nós, temos portfólio, então vá em frente. E então isso é como uma pequena seção de portfólio, não o mesmo que um real executar sua página porque eu tenho ambos. Então esta é uma porta para a sua página. Isto é apenas uma secção. Então vamos em frente e adicionar outra seção e vamos chamá-la de portfólio, e eu vou deixar como uma página em branco por enquanto. E eu provavelmente poderia reutilizar esta reutilização a mesma imagem aqui. Então deixe-me clicar nesta pequena engrenagem, ir para a mídia na Image. Vamos em frente e trazer algumas das imagens. Então eu acredito que foi este. Vês como isto é grande? 300 kilobytes de perfeição, porque eu redimensiono minhas imagens só porque eu não gosto delas muito grandes. Lá vamos nós. Vá em frente e salve isso, e então eu realmente vou voltar para cima e mudar o texto aqui. Se você alguma coisa do passado funciona, você sabe, salvar agora isso eu quero ser um pouco maior. Então vamos voltar para as configurações e vamos torná-lo em negrito. Quem salvaria? Vê como isso parece? Perfeito. Agora, aqui eu quero mostrar meu portfólio real. Então deixe-me ter em um eu acho que eu quero a parede real colocado em uma grande causa. Graus muito organizado e usar existente. Vou torná-la a galeria de fotos. Na verdade, quer saber? Antes de fazer isso, vou só fazer uma mudança. E quando mudou a galeria de fotos para Galeria de Portfólio . Cole aqui, apenas as alterações de URL também. Então vamos voltar para casa, e isso automaticamente atualizado estava indo rapidamente. Certifique-se porque eu não quero problemas mais tarde. Então espero que novamente galeria. Isso é perfeito. Agora eu vou para a galeria de portfólio, e eu vou excluir todas essas imagens porque este não é o meu portfólio, e eu estou realmente indo para navegar no meu computador e pegar todos os arquivos que eu puder que estão relacionados ao meu portfólio Então, eu quero dizer, então eu vou adicionar algumas imagens. Pode demorar um pouco, por isso vou cortar esta parte do vídeo. Ok? Ok. Então eu fui em frente e adicionei todo o meu portfólio. Então isso é tudo em cima da ferramenta, eu acredito que abril são, ou março ou abril de 2016 ter esse tempo para atualizar isso. Então vamos em frente e voltar. Então esse é o meu portfólio. Volte para a minha página inicial. Então agora parece assim. Então veja alguns dos nossos trabalhos passados e, em seguida, mostra tudo isso. Então, o que eu quero na verdade, é que eu vá ouvir Deixe-me bater nele. Eu não quero mostrar tantos porque torna a página muito longa, então eu só vou mostrar. Digamos que veja, então agora não posso escolher aqui, então eu teria que fazer assim quando você escolher galeria, ela automaticamente escolhe todas as fotos naquela galeria. Então não há maneira de limitar quantos existem, então eu poderia ter que fazer upload deles pouco a pouco. Como eu posso carregar quatro imagens para que eu possa novamente Aiken, torná-lo uma grade e, em seguida, carregar manualmente apenas quatro imagens aqui, mas eu quero que eu não quero refazer tudo. Então, em vez disso, o que eu vou fazer é que eu vou fazer isso um bloco de resumo porque eu sei que eu posso limitar. Então vamos fazer um resumo, e vamos torná-lo uma grade. Então galeria de fotos, senhor,Galeria senhor, Portfólio e, em seguida, exibir. Eu vou fazer isso. Talvez seis devam ser bons e apenas a imagem. Então eu não mostro mais nada e nenhum metadados e depois vou para o layout. Então agora, você pode ver os lados da minha imagem de ser cortado. Então, ao longo do lado esquerdo aqui no lado direito. Então vamos torná-lo automático para que ele redimensione automaticamente lá. Isso é perfeito. E eu escolhi seis bits mostrando apenas cinco. Então vamos ter que fazer sete. Parece que a numeração está um pouco fora e eu não quero mostrar tudo, então eu não quero mostrar apenas as mais recentes que eu quero escolher imagens específicas que eu gosto, então eu vou voltar para o porto para você e eu vou dizer, por exemplo, este eu quero uma categoria Mickey, torná-lo home page. Bem, economiza. Então eu vou escolher seis que eu realmente gostaria na página inicial. Tão rápido lá categoria, home page, salvar e esperar por isso. E, em seguida, também talvez esta uma categoria home page salvar. Oh, lá vamos nós. Isso é que eu acredito 1234 Sim, isso é quatro. E eu acredito que este parece bom porque novamente, nem todos os sites que você criar serão incríveis. Quando você dá uma olhada no que os clientes querem e dá a eles o que eles querem, nem sempre será o que você quer mostrar. E isso é perfeitamente OK. Você sabe, algumas pessoas querem realmente jogar sites olhando e que não há nada que você possa fazer. Você tem que dar a eles o que eles querem, certo? Então, se você estivesse fazendo como um tipo de site de fotografia, isso estaria cheio de fotos, e você poderia classificar duas categorias como casamentos, aniversários, coisas assim, e então mostrar um específico na página inicial. Então eu vou voltar para a página inicial e espero que eu fiz seis e não menos do que isso. Então eu vou continuar e esperar que isso venha aqui e clique em editar. Eu só vou exibir coisas que estão na página inicial. Vamos ver quantos realmente escolheram. Sim. Então isso é tudo o que realmente querem mostrar com o que estou mostrando. E então, finalmente, o que eu vou fazer é adicionar um pequeno botão aqui para que nós vamos adicionar um botão. E isso será vista portfólio completo. E isso vai levá-los para a minha página do portfólio. Bem, tem tudo. Então desça até aqui. Apoio para você. Esse é o portfólio de barras, que é a primeira página do portfólio. Fiz desta uma barra para ti, que é, creio, esta página em que estou agora. Então, o portfólio na seção Então esse é o meu porto para a sua página. Isso é perfeito. Meio centrado. E isso parece bom. Então vamos bater, aplicar, e vamos mover isso para baixo. E eu vou mudar a cor para vermelho para combinar com o meu site. Só em um segundo aqui, então economiza. Só em um segundo aqui, Então isso é um portfólio. E eu acho que o que eu vou fazer agora é eu vou remover esta fonte aqui porque lembre-se que eu disse que não se encaixa com o meu site, e eu não gosto disso. Então vamos em frente e remover isso. Ok? Perfeito. Eu gosto do pensamento que estava lá originalmente. Volte, volte novamente. Então, sobre nós , acho que deveria ter mais mensagens lá. Ou posso fazer o que fiz aqui. Eu poderia colocar uma imagem para o lado para ter uma página sobre. Sim, eu sei. Então eu posso colocar Ah, botão que leva direto para a página do meu cinto aqui em baixo. E eu estou pensando, se eu mover tudo para a esquerda, eu provavelmente não deveria. Então vamos colocar um botão e vamos nos livrar do espaço ou aqui. Não há razão para ter o espaçador aqui, então vá em frente e adicione outro botão e vamos torná-lo do mesmo tamanho que o que usamos abaixo . Basta manter as coisas consistentes, para que este possa ser como este que é lido mais. Seja mais e por isso vai ter um clique através de Yarrow e será médio. Então isso é perfeito. Vamos fazer isso levar à página sobre que temos tão sobre nós e, em seguida, aplicar e ir em frente e dizer isso. Certo, são duas seções. Até agora temos a página inicial e temos o portfólio. Em seguida, eu vou adicionar eu vou realmente deixar isso de fora na seção nesta página inicial e bloquear posts. Mostrei a vocês como adicionar o resumo. Já que não vou estar blogando neste site, eu realmente deveria, mas eu realmente deveria, mas já que estou fazendo isso só para vocês não, eu não vou colocar um bloqueio lá, então vou colocar um depoimento. já que estou fazendo isso só para vocês não, eu não vou colocar um bloqueio lá, Então, algumas críticas de pessoas. Então vamos em frente, volte aqui na página da seção e fará comentários. Agora, uma coisa que você vai notar, enquanto eu estou adicionando, isso é que no meu site do squarespace, eu tenho o banner de imagem em cima e, em seguida, o texto para cada um abaixo. Onde está todo o meu site real? Tenho a imagem no fundo. Então, se você quiser algo assim, você teria que usar um modelo que suporte Like Pacific ou Marquis. Este modelo Bedford não tem suporte para isso. Então eu estou tipo de preso usando como ele é destinado a ser usado, então eu vou ter a imagem de topo e, em seguida, o texto abaixo. Então deixe-me cópias. Copie isto. Na verdade, você rasgou? Ok, então na página inicial, eu vou rolar para baixo para comentários. Talvez eu devesse ter a imagem em primeiro lugar cheia de polegares para cima. Então, as avaliações se encontram. Cancele aqui, na verdade, e banner. E eu vou adicionar a mesma imagem que eu usei para o meu site pessoal. Então é aquele com o cara com o dedo apontado para cima. Então, o sinal dos polegares para cima, vamos. E eu deveria ser capaz de encontrá-lo aqui. Acho que não o movi. Talvez não. Ok, então eu não tenho isso aqui. Então usei um diferente. Talvez tenha usado esta imagem. Isso é estranho, certeza eu estava aqui. Ok, eu vou usar esta imagem nesse caso. E o texto todo usa comentários. E eu não vou ter uma vista todos os comentários, porque nesta página, eu só vou mostrar apenas três comentários. Então vá em frente e guarde isso. Quem? Eu deveria ter editado o texto real. Então, para dizer, comentários, talvez eu tenha. Salve, leia, leia algumas das nossas últimas avaliações. Ok, Então agora rapidamente colocar em que o texto que eu queria colocar em para ler nossos comentários e eu me lembro de torná-lo em negrito e, em seguida, salvar luz. Então a primeira coisa que eu vou colocar é este vai eu vou pegar o nome da pessoa bem e deixe-me ir em frente e editar, e eu vou colocar fora do bloco de texto. Há um teste. Quem cita? Desculpe, aspas, não testemunhos. Então, vamos ver como isso parece primeiro, porque nem sempre parece o melhor. Não é tão ruim. Então, quando colocarmos outro casaco, então eu vou ter três aqui. Então eu coloquei três primeiro rápido, vamos ver como fica lado a lado. Nada mal. Ok, então deixe-me pegar o 2º 1 Deixe-me pegar o melhor que eu e perfeito. E finalmente temos o último aqui. Vamos tirar isso. Esperança. Ok, então é isso. E este é um pouco menor, então talvez eu coloque no meio. Apenas equilibrar as coisas. Perfeito. Então isso é comentários leitor comentários. Isso não é ruim. Então portfólio novamente aqui, as pessoas apenas clicar aqui e ele vai abrir em tamanho real para que eles possam ver em caixa de luz. Ou eu posso realmente configurá-lo para que quando eles clicam aqui, ele vai levá-los direto para o site que é destinado e para isso eu iria portfólio e clique na pequena engrenagem para cada imagem. Mas acho que isso parece muito bom por enquanto. O rodapé está bem. Era assim que eu queria. E vamos ver. A Home Page parece boa. Posso fazer isso um controle deslizante mais tarde, mas talvez não. Só porque muitas partes móveis só torna as coisas que a vivem mais confusas. Ok, então eu posso deixar assim por enquanto. Eu poderia colocar uma imagem de mim mesmo ano para sobre nós apenas para dar um toque mais pessoal com o visitante real. Mas além disso, que parece boa vista portfólio completo. Leve-me para a página do portfólio, na verdade, modifique rapidamente isso porque eu não quero fazer uma palestra inteira só para isso porque é bastante simples. Então, quando o telhado que e eu vou colocar na galeria realmente resumo, vai ser um resumo com seu resumo. Vamos fazer disso uma galeria desta vez porque eu não vou escolher imagens. Vou colocar a galeria inteira aqui. Eu vou fazer isso. Vamos ver. 43 ainda sendo meio fora do widescreen. Sim, parece bom para liberdade condicional. Faça três. Então não é tão pequeno e como caixa, para que eles possam, é claro, clicar sobre ele e vê-lo em um tamanho maior, maior e, em seguida, conteúdo. Então isso é perfeito. E então eu vou me livrar desse bloco de texto que estava lá por padrão. Certo, então lá vamos nós. Esse é o nosso portfólio. E lembre-se, eu fiz disso o verdadeiro Sim, ok. E então eu me livrei desse controle deslizante, o controle deslizante de cabeçalho. Eu me livrei dele porque eu não quero ter um controle deslizante nesta página, mas eu quero um banner. Então vamos ver quais imagens posso usar para um portfólio. Talvez eu use o mesmo que eu usei na página inicial para o portfólio. Então, mantenha as coisas consistentes e vamos colocar o foco no computador perfeito. Isso já está feito. E então também, na verdade, eu poderia ter que usar uma imagem colorida mais clara porque agora, como os fundos escuros, é difícil ver o menu. Agora eu posso adicionar como uma sobreposição, mas isso pode ser um pouco de trabalho demais. Então vamos remover isso, ver se encontramos uma imagem clara. Quero usar isso para a página de contato. Então talvez isso funcionasse melhor ainda é um pouco escuro no topo. Espero que funcione. Sim, na verdade, isto parece muito bom. Vamos descer um pouco. Além disso, acho que parece bom. Eu também adorei. Longe na página inicial é um pouco fora. Ok, então isso é perfeito. Claro, a imagem realmente não combina, mas, você sabe, você sabe, eu só estou me esforçando com o que eu tenho. Por enquanto, posso ir ao Paxil e encontrar mais imagens, mas não é muito preocupante agora. Então vamos fazer isso, um, nosso posto cheio você e novamente puxá-lo porque caso contrário, é muito pequeno. Certo, então esse suporte para sua página. Então, quando alguém clica na visualização do portfólio completo na página inicial, ele os leva aqui para que eles possam ver cada um totalmente, modo que isso é perfeito. E então eu posso adicionar mais imagens ao portfólio indo até aqui, e isso é ótimo. Então isso é casa e despeje para o seu feito e, em seguida, no próximo. Eu vou cuidar da página sobre, mas essa é outra página que eu uso para todos. O anfitrião está praticamente feito, para ser honesto. Quero dizer, podemos dar estilo um pouco, você sabe, colocar como uma imagem, uma conversa no topo aqui. Mas esta não é realmente uma página que eu tenho em todos os sites, então eu realmente não vou esclarecer muito. Em vez disso, vou para a página sobre os EUA. Uma vez que este eu uso quase todos os sites fizeram, tem um cerca de página, então eu vou mostrar a vocês que na próxima palestra. 31. Observar-me trabalho: a página de cerca de página: Esta palestra é tudo sobre nós pêssego. Então, para esta página, eu vou começar com o banner. Então vou colocar minha própria massa aqui. Basta dar uma olhada rápida no que estou usando no meu outro site. Ok? Era a mesma imagem aqui, e eu não acho que eu possa, na verdade, na verdade, porque eu me lembro que imagens escuras não funcionavam. Bem, deixe-me ver rapidamente como isso vai parecer. Não é terrível. Ele ficou com ele porque na verdade não é ruim. Ok, então sobre nós na U são menos perfeitos. Então acredite nisso. E então nós vamos copiar isso, e eu vou passar a direita aqui. Então deixe-me excluir essa caixa de texto. Então este é todo o conteúdo de demonstração que veio com ele. É por isso que eu não gosto de usar páginas de demonstração porque você tem que passar pelo incômodo de excluir tudo antes de realmente começar. Então deixe-me sair e colar isso como texto simples. Claro que sim. E então vamos escrever uma linha esta Não, deixá-la na linha. E embora em outro bloco de texto, então outro livro aqui sobre o nosso trabalho desta vez eu não vou . Hum, eu deveria me deixar ver como é se eu apenas colar este texto simples. Sim, eu vou mantê-lo puxado ousado que vai torná-lo um rumo. Número dois. Sim, parece melhor. Posso puxar-nos. Sim, isso parece bom. Ok, então mantenha assim, e então eu vou ter um celular amigável com uma imagem do tablet no lado e depois os livros reais do Mac. Então nós fazemos mobile friendly. Primeiro, eu não vou fazer isso uma página de índice porque eu não tenho muito para adicionar aqui que eu não quero outra imagem separando os dois. Então deixe-me realmente colocar em um divisor, eu vou torná-lo uma linha, e então eu vou colocar em uma imagem que está em minha área de trabalho. Então, primeiro, é o iPad novamente sem legenda seguro e que eu vou colocar em um bloco de texto então ele vai entrar aqui e vai fazer este um cabeçalho número dois. Porque, lembre-se, você só tem um cabeçalho número um por página, e isso está à frente do número um. É por isso que escolhi um número dois aqui e escolho dois de novo aqui. E isso tudo vai ser centralizado. Oh, não, eu estava errado. Deixou a linha. Tentarei séculos para ver o que parece melhor. Lá vamos nós. Centro de ternos. Não, definitivamente saí da linha. Vamos ter outra imagem desta vez. O livro Mac e nenhuma legenda mais uma vez porque eu não gosto da legenda aqui em baixo. Ok? E depois outra caixa de texto deste lado. É isso. Expanda seu negócio e isso pode ser deixado alinhado. E este vai ser o número dois. Certo, só estou checando. Há uma linha vazia acima. Então, Heather, número dois. Caso disso é perfeito. E também queremos colocar ícones aqui, então está sendo um pouco estranho. Deixe-me sair e colocar código. Apague isso. Mova isto para o topo. Lá vamos nós. Coloque outro casaco aqui antes de continuar. Ok, então neste código, o que vamos colocar é e eu meio que telefone. Então, quando tivermos ícones e procurarmos por telefone, pegue este. Vá em frente e copie. Cole. E eu queria ser um pouco maior, talvez três vezes Hope três vezes quatro, na verdade. Ok. E sim, isso é sim, isso é bom. E eu amo isso para a esquerda um pouco e eles vão mudar de escritório. Lá vamos nós. Então isso vai ficar desse lado também. Ok, então o código que vamos colocar agora é uma chave inglesa quando voltarmos e pegaremos a chave inglesa . Lá vamos nós. Perfeito. Copie isto. Coloque aqui. E eu acredito que foi três vezes ou quatro vezes apenas para manter o mesmo este ano. Então isso foi atingido quatro vezes, e depois mover isso para cima. Começou a imagem de novo. Ok, talvez isso seja melhor neste site. Mm. Não, acho que ficou melhor no site. Ok. Sim, há um pouco de julgamento no cabelo aqui, então isso parece bom. Certo, então vá em frente e bata. Salvar. Agora. Quero tornar estes ícones vermelhos. Então deixe-me pegar o resfriado para o meu vermelho primeiro. Então editor de estilo, pegue esse costume contínuo. CSS, lembre-se, para o ícone, era uma classe I Então, se eu apenas ir para eu deveria trabalhar cor. Lá vamos nós. Mudou para ler. Ok? E eu acho que isso é tudo o que eu quero para a minha página sobre. Mas ele também teria aqui. Eu não quero isso. Mm. Pode ser demais e nada sobre a hospedagem. Posso colocar isso na página de hospedagem se precisar. E esses logotipos, eu vou deixar de fora também causam um tipo de portfólio. E então isso é a página sobre contacte-nos página. Já estava feito. Isto era tudo o que eu queria. Eu poderia acrescentar um pouco, mais alguns campos e as perguntas que eu vou mudar, obviamente. Mas além disso, a página de contato é muito bem feita, exceto para a massa, porque você não pode realmente ver esse fundo. E eu tinha uma foto especial para isso. Não é isso. Então ele só está aqui. Então deixe-me ver o quão grande isso é. Cinco milhões de bytes. Definitivamente não é o que eu quero usar. Lá vamos nós esperar por isso, o upload e, em seguida, alterá-lo para entrar em contato conosco. Vou me livrar do botão. Aqui vamos nós. Então vamos ver como isso se parece. Perfeito. Espere. Usei isto na página inicial. É por isso que parece um pouco familiar. Veja o que mais posso usar para contato? Eu poderia usar isso. Na verdade, tenho certeza que já usei isso. Dois mega Bates. Sim, isso mesmo. Vou usar esse. Na verdade, não usei isso para o portfólio. Eu escolhi usar o outro. Lá vamos nós, e batemos em segurança. Então vamos ver. O que? Que você desse tipo de lista de trabalho, talvez veja se eu posso. Movendo-se só um pouquinho. Talvez isso ajude. Isso é um pouco melhor. Na verdade, não. Talvez se movendo para baixo um pouco para obter oferta jaqueta escura, espero, iPad. Talvez se movendo para baixo um pouco para obter oferta jaqueta escura, espero, Ainda assim, eu uso isso, mas não, eu gosto de melhor antes realmente eu gosto, então vamos apenas deixá-lo como estava bem no centro lá. , eu Eu, eugosto que o melhor ainda é bem ilegível. Então, sim. Então é assim que eu faria a página de contato também. Certo, então se tiverem alguma pergunta, sintam-se à vontade para me contatar. , Em você, Demi, Demi, você pode realmente ir em frente e me fazer perguntas. E se muitas pessoas fizerem a mesma pergunta, eu farei novos vídeos. Então, se alguém quiser saber um tópico específico que eu possa ter perdido, eu vou em frente e vou fazer um vídeo sobre e depois enviado para o curso. E sim, e em alguns dos vídeos. Desculpe se cometi algum erro. Tentei ser o mais preciso possível, mas, novamente, sou humano. Então, se você vir algum erro, me avise, e eu consertarei imediatamente. Ok? Obrigado. Os caras estavam fazendo esse curso, e eu realmente espero que seu site seja tão bonito quanto você esperava que fosse. 32. Adicione recursos: CSS personalizados: Agora eu sei que eu prometi que não haveria codificação neste site, mas eu vou mostrar um pouco de CSS personalizado porque há momentos em que você vai querer usá-lo, e isso não é absolutamente necessário em tudo. Mas digamos, por exemplo, como eu estava mostrando em uma das palestras anteriores. Neste momento, esta rubrica número um é a taxa vermelha. Então, se eu entrar em hospedagem o número um cabeçalho que está em hospedagem assim aqui também é lido . Digamos que, por exemplo, eu queria que isso fosse preto, mas na página inicial, eu queria ser Brett. Digamos que, por exemplo, eu queria que isso fosse preto, mas na página inicial, Não há nenhuma maneira de fazer isso agora no Squarespace, então você não pode ter Kalish específico para páginas específicas a menos que use CSS personalizado. Outra razão pela qual você pode querer usar como CSS personalizado é digamos que você deseja alterar a fonte do texto em uma página específica, mas não todas as páginas. Então, novamente, você terá que usar CSS personalizado para mudar o estrangeiro, percorrer o estilo da fonte ou exercitar algo assim. Ok, agora, a fim de fazer isso, você vai precisar saber um costume básico. CSS Vou anexar um link para W três escolas. Então ele tem algumas coisas muito básicas que você pode tentar e há algumas. Algum custo é que você pode tomar. É de uso gratuito. Então, há novamente exemplos. Há perguntas práticas que você pode passar e exercícios, então definitivamente dê uma olhada. Eu associo isso no curso real. Ok, nesta palestra. Então alguns dos básicos ar bem aqui para que isso visasse como tudo no corpo. Esta seria Heather número um novamente parágrafo, que é, como praticamente texto. Então isso seria apenas p para parágrafo. H um está dirigindo um. Então aqui, então é muito, muito simples, e é muito básico, mas novamente, isso ajuda um pouco se você realmente quer ter aquela pequena melodia no seu site. Então vamos em frente e eu vou te mostrar como fazemos isso. Certo, a primeira coisa que vou mostrar é a maneira errada de fazer as coisas só porque quero que entenda por que não fazemos assim. Então, no Chrome ou Firefox ou Internet Explorer se você clicar com o botão direito no local que você deseja verificar o código para você pode clicar em inspecionar. Ok, Então, isso iria automaticamente trazer para o código com o realce no que você clicar com o botão direito do mouse . Então eu cliquei direito no título um. Então, se eu tenho aqui, é o principal. Ok? Então cada coisa terá Então cada linhas são Você terá um i d A menos que seja novamente o rapper , que novamente eu entendo isso um pouco mais avançado, então eu definitivamente recomendo que você dê uma olhada naquele w três escola. Então aqui, por exemplo, este é um título número um, e é forte. Significado é negrito ID. Certo. Então, o cabeçalho um que eu coloquei em tem um i d. Então, se eu tomar que eu d tão bem lá idéias iguais a cada idee é único. Ok, não há outra coisa neste site que vai ter este casaco. Ok, então eu vou te mostrar por que esta é a maneira errada de fazer as coisas. Certo, digamos que eu pegue isso então, para atingir um ID usamos esse símbolo aqui. Digamos que eu queira fazer o colarinho preto. Certo? Então tudo está bem e bem. É preto, certo? Que era o que queríamos. Mas agora deixa-me mostrar-te o que acontece. Isso não acontece toda vez, mas acontece na maioria das vezes que você vai embora e volta e ele está de volta para ler, mesmo que ele ainda economizar taxa preta. Então agora é um pouco confuso. O que aconteceu? Por que voltou para Black? Vamos dar uma olhada. Então agora a etiqueta H. 1. O mesmo quando usei eu d e depois 22 ou 4 antes de ser 2196 Então mudou. Então, toda vez que atualizamos a página, o i d muda. Este é um recurso terrível, terrível que é implementado pelo espaço quadrado, e eu pessoalmente odeio isso. Ok, esta é a única coisa que eu realmente odiava no espaço quadrado é o fato de que as idéias mudam porque isso é algo que é uma convenção que realmente não deveria estar mudando. Ok, então aqui está o que você pode fazer. Ok. O que você pode fazer é, em vez de direcioná-lo pelo seu eu d você pode segmentá-lo como cada um. Ok? A outra coisa que você pode fazer é que existem algumas idéias que não mudam então qualquer i d. que tem o bloco de palavras no início não vai mudar. Então, por exemplo, se eu copiei isso assim sob a diferença isso sob este Dave, eu vou outro Dave e depois cada um e então eu tenho o meu título, certo? Então, se eu for e colocar, por exemplo, esse é o Dev e eu coloco em 81 porque há o título por baixo disso. Então é uma criança deste quarteirão. Agora, se eu for para outra página e voltar e voltar, é tão preto. Ok, então você viu o que aconteceu. Enquanto você usar o bloco, eu ainda vou ficar. Ou se você apenas usar H um por si só. A razão pela qual eu não usaria 81 por si só é que ele teria como alvo cada um, cada um no site. Então, se eu for para curtir hospedagem, isso também seria preto. Se eu não usasse o bloco, o bloco, também seria preto. Ok, então é como uma vida. Você pode ver uma versão ativa do site quando fizer alterações à esquerda. Você também o abre em uma nova janela para que você possa vê-lo maior aqui. O caso inclui isso. Então é assim que você iria segmentar para CSS sua novamente. É como uma situação estranha, mas é o que o Squarespace tem por enquanto. Então acho que é isso que teremos que seguir. Certo, essa é a convenção que temos que seguir. A outra coisa que podemos fazer daqui é outra vez. Tem cor. Podemos mudar as fontes. Vou mostrar-lhe na próxima palestra como realmente adicionar em suas próprias frentes. Mas, por enquanto, podemos mudar como diversão, também. Então família fonte para Helvetica. Ok? Ou podemos mudar para Ariel. Ariel. Não é uma grande mudança. Podemos mudá-lo para filhos abertos que abrem espaço. Consegui a convenção para filhos abertos. Isso é bom. Hum, então sim, você pode ir em frente e brincar com isso. Ok, então é assim que você faz isso. Além disso, você pode alterar o tamanho da fonte para, é claro, até agora em tamanho 16 pixels. Ok, agora, a outra coisa que você quer ter em mente, digamos que você vai aqui e você coloca cor preta e não leva fica. Leia o que você pode fazer seu colocar um espaço e, em seguida, colocar um ponto de exclamação e colocá-lo importante . Ok, isso praticamente diz ao CSS para substituir todas as outras regras e entrar em vigor. Ok, então é assim que você meio que contorna se você realmente colocar na cor preta e isso não muda. Experimente isto. Primeiro, tente fazer com que seja importante primeiro. E se ainda não funcionar, então você provavelmente está mirando errado. Então dê uma olhada aqui, certo? Então eu vou em frente e eu vou fechar isso. Então isso é tipo de como você cortaria fazer CSS personalizado. Eu tive que usar isso para mudar a cor da fonte está mudando tamanhos de fonte. Tornando o texto mais amplo. Então, por exemplo, , algumas páginas, como a largura do texto, só obtêm a direita branca. Então, em alguns modelos, você pode realmente torná-lo mais amplo indo para o contêiner que o mantém. Então, por exemplo, eu vou até então isso é tudo na página que sugere o texto. Então esse é o primeiro 1 que contém o texto. E então você pode fazer como, a largura. Assim, a maioria das páginas teria como um com 50. Mas este tem 100. Então não está me deixando colocar isso porque eu não coloquei porcentagem para que você possa colocar algo assim, certo? Hum, agora, para ser completamente honesto, eu preferiria realmente colocar em um espaçador só porque você não quer colocar em muito CSS festivo porque ele pode quebrar o site. É muito improvável. E eu quero dizer, você poderia apenas voltar para CSS personalizado e remover a linha que tipo de arruinou isso. Então não é como um grande resgate. Não há nenhum risco. Na verdade, tudo é inrealizável. Então é assim que você coloca CSS personalizado. Agora, além disso, qualquer coisa que você colocar aqui é global para todo o site, menos que você o alvo usando, tipo, blocos como este, certo? Então, se eu bloquear cada um e, em seguida, cor para que ele automaticamente fecha suas tags bem, Então cor preta seria apenas esta página porque esta é a única página com este com um bloco com este I d. Considerando que se eu fiz cada um chamá-lo Preto, eu vou te mostrar como isso se parece. Então, se eu for para a hospedagem, isso também vai ser preto. Ok, agora, digamos que você não queira atingir blocos ou que você não tenha outro bloco para mirar. O que você poderia fazer se você só quisesse que isso fosse preto é você poder entrar em páginas. Em seguida, você pode clicar em apenas hospedar o pequeno ícone de engrenagem aqui. Ir para avançado, e então vamos em frente e colocar em estilo. Você tem que incluir isso porque isso está indo direto para o cabeçalho onde é personalizado. CSS automaticamente obter estilo adicionado ao topo na parte inferior. Então vamos colocar em cada uma cor preta. Vamos salvar. Então agora você vê que é preto aqui. Onde está Não é preto aqui, mas uma coisa que você vai notar é que enquanto eu estava fazendo essa mudança Desculpe, Hospedagem de página errada. E assim, enquanto isso. Por exemplo, se eu desfazer isso, você verá que ele ainda está preto no fundo. Na verdade, você não verá nenhuma alteração até clicar em Salvar. Então esse é o único lado negativo de passar por este caminho. Então, o que eu até recomendaria é que você vá para CSS personalizado projetado. Experimente qualquer CSS que você quiser, certifique-se de que ele funciona e, em seguida, copie e cole na pintura específica. Ok, então é assim que vocês usam CSS personalizado em seu site, e há um pouco mais avançado. É por isso que vou incluir aquele tutorial sobre as escolas W 3 para você. E na próxima palestra, vou mostrar a vocês como podemos seguir em frente e usar isso a nosso favor. Ok. Tudo bem. Vejo vocês na próxima palestra. 33. Adicione recursos: como adicionar fontes personalizadas: Ok, então eu mostrei antes como você pode mudar a fonte de um texto específico em sua página. Então você vai para o editor de estilo de design, e então podemos ir em frente e clicar sobre isso e então ir para Font e nós podemos escolher uma fronteira . Agora, digamos que você passou por isso ano passado e você não gosta de nenhuma das fontes aqui. Acontece, mesmo que haja alguns aqui. E digamos que você gosta de lutar. Isso está em um site diferente. Há uma maneira de você baixar uma fonte e carregado para o espaço quadrado, e eu vou mostrar-lhe como nesta palestra. Então, existem três sites principais que eu uso para fundos. Vou em frente e incluir o link para aqueles como recursos adicionais para esta palestra para que você possa ir e clicar sobre aqueles que eu listei D Um fundo. Então vamos em frente e eu vou mostrar-lhe como podemos usar, por exemplo, este aqui mesmo atrás do script. A primeira coisa que eu faria é garantir que o Squarespace já não o tenha, então eu estava digitando atrás do script e não há nada aqui, então vamos fazer o download disso. Então, apenas baixado para a área de trabalho. Ok? E eu vou extraí-lo Perfeito extraído para a área de trabalho também. Agora, o que você faz é ir para CSS personalizado. Então você vai para projetar CSS personalizado e nós rolamos para baixo em direção a seus arquivos personalizados gerenciar. Vamos em frente e clicar na imagem do anúncio ou fundos, e então eu realmente vou para o meu desktop. Vou atrás do script e fazer o upload do arquivo para que este possa ser em uma variedade de diferentes quatro mestres O T F T T f e WTF. Eu acredito. Então. Vamos em frente e clicar no clique em abrir. Então agora temos a fronteira. Vá em frente e volte aqui. Então a primeira coisa que temos que fazer é configurar a fonte para que possamos realmente usá-la. Então o que fazemos é digitar a cara da fonte, certo? E agora vamos realmente vincular o arquivo de fonte a ele. Então, primeiro vamos dar-lhe um nome, então a família da fonte vai chamá-lo. Eu acredito que foi chamado atrás do roteiro, então fique para trás, ok, e nós vamos para o SERC. Então essa é a fonte. E é a abertura U R L fechar realmente colocar o semi cólon bem do que dentro do suporte. Você acabou de colocar o cursor lá, vá para gerenciar arquivo personalizado e clique sobre isso e irá preencher automaticamente o casaco. Ok, então agora que temos isso, se formos para H 1 e mudamos a família de fontes duas atrás, devemos ver que ele chuta e parece assim agora, agora, é meio estranho assim porque não há espaço suficiente. Então eu posso ir para uma letra espaçando um e m. Então isso é um pouco demais. Poderíamos fazer um 0,5 yem. Sim, esse é um pouco melhor. Então é assim que parece agora. Eu realmente não gosto de como isso parece não exatamente o que eu tinha em mente, mas novamente apenas junte-se a você como é feito. Ok, agora, a razão pela qual eu acho que é assim é porque é tudo capital. Então vamos tentar fazer com que não seja tudo sobre nós. Sim, parece melhor. Ok, então obviamente eu não usaria este formulário para o meu site porque esta é apenas uma demonstração desde o meu site, eu queria ser uma vida mais moderna, eu usaria mais como fontes. Isso é como o que era antes e mais como esse tipo de laços sem Sarah. Então é isso que eu usaria, , só mostrando como ele é adicionado, embora mais uma coisa que eu quero mencionar é que às vezes você vai mudá-lo como este outras vezes. Mesmo depois de colocar tudo exatamente assim, a frente que está sendo usada não mudará agora. Há uma solução fácil para isso. Você só vai para a U. R L e tudo depois Desculpe, tudo antes da estática. Então https, semi dois-pontos barra barra Nós apagaríamos isso. Ok, então quando você deleta isso, hum, só um segundo aqui, houve tanta pena de tudo antes da barra. Então você excluiria https e, em seguida, o semi dois-pontos e lideraria as barras. Então, sempre que você usar arquivos personalizados em seu site e você descobrir que ele não funciona, basta tentar desligar a barra barra Ok. A razão pela qual ele geralmente não funciona é porque ele está sendo servido em https e quadrados com base por padrão. Não tinha isso. Então, agora que o squarespace suporta https, ele realmente vai estar funcionando para nós aqui, então mesmo sem excluí-lo, ele vai funcionar. Ok, então se você não estiver usando SSL, certifique-se de excluir esse https semi dois-pontos antes que eles comecem a funcionar. Ok, então é assim que você adicionaria fundos personalizados. Então, de novo, você pode ir aqui. Você pode passar por algumas das fontes aqui. Então, para os feriados de aparência estrangeira Então, por exemplo, Natal. Então, para o Natal, basta clicar aqui. E há uma fonte muito, muito legal aqui que você pode usar apenas para dar ao seu site um olhar de férias rápido sem muito trabalho. Assim, eles podem mudar rapidamente os títulos para um deles apenas para os feriados e, em seguida, desligá-lo quando você terminar. Ok, então isso é Custom Foot. 34. Adicionando recursos: como criar perguntas de acordeão: Ok, então nesta palestra, eu vou mostrar a vocês como criar um estilo de acordeão F A. Q. Então, o que será quando for feito é semelhante a isso. Então, há uma pergunta e você clica nela para obter a resposta. Ok, então este código está vindo de Silva Baucus, um ponto com. Então foi ele quem inventou o código, e ele criou para fazer funcionar com Mark. Então é definitivamente algo que eu recomendo, especialmente se você vai responder algumas perguntas que as pessoas têm, o que eu vou ser. Então vamos para a página de contato, porque é aqui que eu vou adicioná-la. Ok, então eu vou colocar o link para isso no recurso extra real é. Mas eu também tenho a codificação real. Eu coloquei tudo em um documento de texto, e ele tinha algumas instruções que você pode seguir e eu vou mostrar a você o que está feito aqui. A primeira coisa que temos que dio é que temos que habilitar a Biblioteca de Consulta J, então vamos para configurações e, em seguida, avançado e, em seguida, injeção de código. E então, no cabeçalho, nós só vamos pagar ficar, então eu já tinha lá. Então vamos voltar, voltar, voltar, voltar, e voltar para o projetado em seguida. Ok, então a seguir, nós vamos estar colando isso na página real que você quer ter o F A Q. Então eu vou tê-lo na página de contato. Então eu vou para a página de contato, clique na pequena engrenagem que eu vou para avançado e colar isso em. Ok. E vamos bater. Salvar. E finalmente, temos mais um bloco de código, que está bem aqui. Nós vamos copiar isso, e nós vamos para o design personalizado CSS e colocá-lo aqui. Então, deixe espaço coloque lá dentro, certo? E então eu vou em frente e bater. Salvar. Volte, volte. Então agora estamos prontos para colocar isso. Então o que fazemos é clicar em editar onde quisermos colocá-lo. Vou clicar aqui mesmo. O que? Eu queria estar no topo por agora, e eu vou procurar por marcado para baixo. Ok, então é aqui mesmo. Pode entrar nisso. Então, para Mark Down. O que fazemos é você colocar também, hum sinais de hashtag e depois a pergunta. Então, quanto custam os seus serviços? E então você pressiona Enter e coloca a resposta para que cada projeto seja diferente, certo? E então colocamos a base espacial. E depois a próxima pergunta, um, eu não posso fazer você usou a página, usou o formulário nesta página. Ok, então vamos bater. Aplicar. Então, por enquanto, ele ainda não está aparecendo um menu suspenso quando você clica para que isso funcione, nós temos que atualizar a página. Então primeiro eu vou mover isso para o lado. Eu acredito assim tudo o que salvar. Então eu ir dedo, por exemplo, Blawg e, em seguida, voltar para a página Contacte-nos. E agora você pode ver colocar para baixo ordenadamente quando, Quando você pressiona a pergunta, a resposta aparece e o sinal muda de mais para menos. Ok, então isso é usar javascript. E então agora vamos dizer, por exemplo, que você tenha esse código inserido corretamente e você gosta de como ele parece. Mas você não quer usar cabeçalho para. Então ter que símbolos é cabeçalho para a direita. Vamos usar o cabeçalho três, certo? Você colocaria em três símbolos aqui e você apertaria aplicar, e é seguro, então à frente de três parece um pouco diferente. É um tamanho de fonte menor. Então eu vou mostrar a vocês os dois, na verdade um de cada. Então você pode ver Então você vê como este é um tamanho maior e este é um tamanho menor. Então, se você quiser usar o cabeçalho três, você coloca três. Mas antes que ele comece a trabalhar, você realmente tem que entrar no código aqui em avançado. E em todos os lugares que você vê oito h dois, você tem que mudar para 83 h três. Então cada três lá também aqui. Tem um ali. Acho que esse é o último a mais um e, finalmente, aquele no salvamento branco. Agora funciona para H três. Você também pode alterar isso para trabalhar com H. one. Se você quiser que a fonte seja realmente grande, ou você pode ir para o editor de estilos Então o estilo terminou aqui e ele pode rolar para baixo para H um e você pode alterar o tamanho da fonte aqui. Mas, novamente , observe que isso altera o tamanho da fonte de todo o seu site. Então, se você quer que isso seja hte para mas uma fonte menor, sua melhor aposta seria torná-lo um H três. Ok, então é assim que você teria um estilo acordeão F a Q. 36. Adicione recursos: vários menus (avançado): Muito bem, tive algumas pessoas a perguntar-me como criar menus diferentes no Squarespace. Então isso é, por exemplo, se você quiser mostrar como Inglês, Francês e Espanhol ou diferentes idiomas em seu site e tem páginas diferentes para cada menu. É assim que se faz. Então, por exemplo, eu o configurei para três locais diferentes. Este é um site de clientes diferentes. Eu não precisava dessa funcionalidade para mim. Então eu estou mostrando a você no dele. Então, se eu for para Bellevue na costa, então Bellevue ficaria como esta costa seria assim. Então você vê como a navegação de falta alguns e também cada página é realmente diferente. Neste momento, estou na página inicial, e isto é diferente da página inicial deste local, certo? Então, na parte de trás real. E o que você veria se Bellevue Navegação Shoreline Seattle e não ligado e principal, que é automaticamente construído em. Então eu vou te mostrar como fazer isso. - É. Eu vivo com mais complicado, mas vamos indo. Está bem. Então, primeiro, vamos para as configurações e vamos para o modo de desenvolvedor avançado e ativamos isso assim que você ativar isso, você verá todos os detalhes de conectividade aparecerem aqui. A coisa boa sobre o modo de desenvolvedor é que ele impede seu modelo de ser atualizado. Então, um código de disjuntor de moldes no futuro. Então ele sempre vai ficar acordado. Ok, Então, a fim de realmente entrar em seu site para ftp em, eu uso quando SCP você pode usar que todos que você quer. Hum, então vamos em frente. E assim, quando eu falo, SCP é realmente livre para usar, então você sente medo do Google para ele e baixá-lo. Também incluirei um link. Então esta é a informação real. Então você acabou de entrar aqui? Certifique-se de que isto está definido como sftp porque é sftp. Então eu já tinha entrado. Então está bem aqui. Vamos em frente e assiná-lo. Você vai notar que às vezes ele vai sair e ele vai dizer, Você quer se reconectar? Apenas certifique-se de que você aperte reconectar para que seus salvamentos realmente ocorrem porque há alguns bugs onde ele apenas chuta você para fora aleatoriamente, às vezes. Então deixe-me voltar a isso antes de continuar. Está bem, Perfeito. Então, quando você está realmente aqui, há 22 coisas que temos que mudar para arquivos o arquivo template e o arquivo hatter. Ok, então o arquivo de modelo é o que aparece no back-end. Então para você, não para as pessoas que visitam seu site, mas para você para que você possa realmente criar o menu. Então, quando você entrar pela primeira vez, você vai ver o que você vai ver é realmente isso, hum realmente apenas indo, você vai ver isso. Ok, então você quer olhar para a navegação principal significa que e bem aqui, depois do colchete e antes do colchete quadrado, você quer copiar tudo até aqui. Então, tudo dentro dos pequenos cachos suporte freio qualquer um uma cópia e colá-lo quantas vezes você precisa. Ok, então eu precisava de três locais, então eu fiz três. Dei-lhes títulos, e também dei-lhes um nome. Certifique-se de que o nome não tem espaços porque ele vai ser usado no I d. Ok, assim que você tiver feito isso, eu vou mantê-lo aberto para que vocês possam ver o que eu estou fazendo, e então vamos para a região do cabeçalho. Então, há três lugares onde podemos fazer mudanças aqui. Ok, então deixe isso aberto. Então aqui eu tenho três menus. A navegação principal. Só tenho a minha página de rosto onde as pessoas escolhem o idioma ou o local. Então eu não quero mostrar esse menu em lugar nenhum. Ok? Eu só quero mostrar estes três menus. É por isso. Aqui, só estou usando esses três. Então, quando você entrar pela primeira vez, o que você verá aqui é o espaço quadrado. Uma alegação pode ter feito agora. Então o que você quer fazer é copiar isso colado três vezes e mudar a navegação I d. Essa é a única coisa que você tem que mudar para qualquer nome que você deu a ele. Então Bellevue litoral em Seattle. Ok, então você rola para baixo e então você tem outro outro aqui. Então, novamente, o 1º 1 aqui, ele vai dizer, pode navegação. Você quer copiar isso? Certifique-se de copiar isso. E não cole apenas o que copiou aqui. Porque agora o modelo é a navegação principal, não a navegação móvel. Então você pode copiar colar e dar a ele o, hum a navegação que eu d para coincidir com o nome aqui e você rolar para baixo e há mais um bem aqui. Então nós estamos indo novamente copiar colar e mudou a navegação I d dois, o que você quer realmente exibir. Então a coisa sobre isso é, quando você faz isso, ele vai realmente mostrar todos os três menus em cada página, então eu vou mostrar como enfraquecer limite que é apenas mostra o menu que você queria mostrar em cada página. Então, uma vez que você fez isso, você apenas aperta, Poupe em. Você terá uma caixa vindo aqui dizendo que está salvando. E uma vez feito, você pode fechar isso, encerrar a sessão e, em seguida, atualizar esta página e, em seguida, você verá todos os três menus para colocar páginas lá dentro. Tudo o que você faz é clicar nele e arrastá-lo para dentro. Ok, uma coisa que você deve saber é que, novamente, não há duas páginas podem ter o mesmo. Você também é este é o Lar 3. Este é o lar, e este é o lar, um lar. Então não há como ter isso. A casa está em casa? casa? Mas é uma coisa pequena para desistir. Você pode até mesmo fazer a navegação. Talvez Bellevue em casa, certo? Então, parece um pouco um pouco melhor nos motores de busca, mas isso depende de você. Então, depois disso, o que fazemos. Deixe-me mostrar-lhe como vai parecer para você. Ok, então imediatamente você vai ver que todos os três homens usam ar aparecendo. E se você realmente for para a visão móvel, você verá que todos os três homens usam ar aparecendo. Isto também é muito fixe. Você pode tipo de alternar entre as visualizações aqui em cima, então para escondê-lo, o que temos que fazer, deixe-me realmente colocá-lo em um site ao vivo não é afetado. Então, se você for para avançado, o que eu estou fazendo é que eu vou para May Naff e o quarto filho. Deixa-me mostrar-te porque é que estou a fazer isso. Então você vai ver que há principal em maio. O Navin. Eu o suficiente. Há três deles. Então isso é Bellevue, Shoreline e Seattle. Ok, a soneca principal não está aparecendo porque eu não incluí isso no meu arquivo de modelo real. Desculpe. O arquivo de cabeçalho é o meu único tinha esses três. Porque, lembre-se, eu não quero mostrar isso em nenhuma página. Então, em seguida, o que temos que fazer se temos nesta página. Já que este é o primeiro, você sabe, menu, eu vou esconder o segundo na terceira taxa 1, mas o segundo. Então, por exemplo, a costa é o meu segundo menu riel. Mas na minha lista de menus, há um a três. Então este é na verdade o meu terceiro menu. Este é o meu quarto menu. Ok, então o que eu tenho que fazer? Então este é o meu segundo menu. Então, já que eu não estou mostrando o 1º 1 eu não preciso esconder o 1º 1 Então o que você faz é cobri-lo com etiquetas de estilo. Portanto, é apenas específico para esta página. Tudo o que você colocar aqui é específico para esta página. Então, por exemplo, não pode quatro criança vai esconder o Seattle no 4º 1 Ok, então em seguida temos que esconder o 3º 1 Então costa, e então nós fazemos a mesma coisa para celular. Ok, então navegações móveis chamadas navegação móvel para descobrir que tudo o que eu tinha que fazer era ir aqui, clicar com o botão direito aqui, inspecionar. E é a navegação móvel. OK, navegação móvel. Então ela está aparecendo duas vezes aqui, então vamos ver o que eu fiz. Na verdade, talvez precise ser revigorado. Vamos dar uma olhada rápida. Então, terceiro e quarto exibindo um que é bom. Ainda me mostrando apenas rapidamente verificou algo aqui que me mostrando? Qual deles é esse? Então você vê como este foi destacado em casa. Então, estou na página inicial. Então este é um menu Bellevue. Então vamos clicar em casa aqui e ver onde isso me leva. Então isso me leva para a linha costeira. Certo, então a costa não está sendo escondida por algum motivo. Então vamos ver se é o mesmo para esta página. Então está acontecendo para todas as páginas. Vou ter que dar uma olhada rápida no porquê. Vamos dar uma olhada rápida, navegação móvel e criança. Então deixe-me clicar com o botão direito aqui. Inspecione. Então não deveria mostrar aquela linda do 2º 1. Este está definido para não exibir em. Isso é explicado sobre isso. O 3º 1 o 2º 1 Então o 1º 1 foi o certo. - Sim. Então, o 1º 1 está certo. A 2ª 1 deve estar escondida, mas não está. Então este é o terceiro. Então eu deveria ter o 2º 1 escondido. Tudo bem. Está bem. Então no celular é um pouco diferente. A navegação principal não aparece automaticamente porque não colocamos isso em nosso arquivo de modelo . Então o que temos que fazer é realmente onde aqui estão quatro e três. Na verdade, seriam três. E, uh, dois para dois em três. É um atrás. Então vá em frente e diga isso. Só tenha certeza que está certo. Isso é certo. Então agora você quer copiar isso e colá-lo em todas as páginas? Ok, lá vamos nós. Então colado aqui. E então você verá que o menu desaparece. Então agora só há dois lá. Desculpe. Um ali. Agora tem dois aqui, então vou colá-lo aqui novamente. Eu não vou ver todas as páginas, mas colá-lo e lá vamos nós. Sente-se, Teoh. Um menu e um menu aqui, e está realçado. Então isso significa que é o menu certo. Então, se um mês de um ke quer Bellevue na página Bellevue, deve ser destacado o f A Q. Ok, então é isso que você faz. E então eu realmente configurar uma navegação principal na página principal, a página de rosto. Isso que você precisa, , tão rápido aqui. Ou você pode ter algo em seu menu que diz inglês, e isso leva à página inicial do site em inglês. Então aqui está o que seria. Ok, então é assim que você faz isso. 37. Adicione recursos: adicione chat em tempo real: Ei, pessoal. Alguns de vocês perguntaram como iriam implementar, como um chat ao vivo para seus sites ou algo assim, hein? Então eu fui em frente e eu olhei em volta e parece que este pode ser um dos melhores para usar seu chamado talk dot t o. Vou incluir o link na descrição. É muito legal, porque é absolutamente grátis. Não há anúncios. Não há nenhuma seção de pintura para ele. A maneira como eles funcionam é se você quiser pagar, você pode, e eles vão te dar, como seus próprios agentes que vão lidar com suas conversas por você. E é assim que eles ganham dinheiro. Então não há membros pré ou algo assim. Então, todos os recursos que você esperaria de um cara rosa premium, Então, quero dizer, é muito legal, eu acho, até usar. Então eu vou apenas configurá-lo rapidamente para que você possa ver como eu vou fazer isso, e você pode tipo de acompanhar. Então, primeiro temos que nos inscrever, então eles vão pegar seu e-mail. Acho que é outra maneira que eles podem comercializar para você. Mas quero dizer, eu vejo o valor nisso. Então eu vou em frente e fazer isso. Basta fazer uma senha curta. Não sei quanto tempo pode levar para aquele e-mail chegar lá. Está bem. Eu ia dizer a senha, ver se já está chegando. Ok, aqui vamos nós. Então vamos em frente e confirmar que nos levará para o painel. Perfeito. Então, vamos inserir o nome do site em qualquer outro lugar. Então eu vou para o meu site do Squarespace. Vou levar esta é a garota que eu acabei de preparar isso foi uma demonstração rápida para mostrar a vocês, então eu não tenho um nome de domínio. Este é um tipo de temporário que o espaço quadrado dá por enquanto. Então eu acho que foi. Você checou? Você não pode pular o Feiticeiro, mas eu não vou, porque só há três passos. De qualquer forma, eu não vou convidar mais ninguém, então ok, vamos deixar isso em seguida. Então, para instalar o cara onde, hum, widget tudo o que você tem para colocar este casaco em cada página antes do corpo. Ok, fácil o suficiente. Então, copie isso. Passou para configurações, código avançado, injeção de injeção, e eles vão colocá-lo em Bem, nós poderia ser eu vou ter que colocar no cabeçalho porque eles disseram antes do corpo eo rodapé vem geralmente depois o corpo. Nem sempre. Então vamos em frente e bater, salvar e dedos cruzados. Lá vamos nós. Então vamos conversar com ela. Vamos conversar e depois online. Então vamos ver como é. Estamos ao vivo e prontos para começar. Estamos ao vivo prontos para conversar, você sabe, dizer que algo começou a verificar ao vivo e alimentado por conversa T O. Então isso aparece. Mas isso é tudo bem. Quero dizer, eu não me importo com essa pequena marca ali. Então há gostos com isso. Quebrar a conversa, obter arquivos de sangue, enviar a transcrição por e-mail e, por sua vez, o som ligado ou desligado. E acredito que esta é a conversa do papá. - Sim. Então eu deveria voltar aqui. Perfeito. Então ele faz todas as coisas legais que você precisa. Você pode fechar essa parte. Ok, então vamos em frente e ver como nós realmente conversamos com as pessoas. Acho que mostraria notificações na área de trabalho. Uh, eu realmente não quero isso. Vamos em frente e pronto. Então é aqui que suas conversas apareceriam. Então vamos ver se está realmente funcionando um, olá. Enquanto você estiver aqui, você tem aquele pequeno som de trazer. Acho que é por isso que você pode querer as notificações. Então, se você não tem esse site aberto o tempo todo, eu vim aqui, então tudo bem, então essa é uma pequena Emily. Então me acompanhe para uma segunda tag da banda. Acho que você tem que aceitar isso, mas veja aqui, junte-se a nós ou a qualquer um. Então, o que está indo e se juntar? Não acredito nisso, senhorita isso todo esse tempo. Então eu acho que é por isso que você quer a notificação da área de trabalho. Então, se , digamos que alguém te envia mensagens e você não tem este site aberto, você pode realmente ter um pequeno pop-up aqui em baixo, certo? Não importa onde você esteja. Então você começa um pouco a ver que alguém está tentando conversar com você para que você possa ter várias pessoas online ao mesmo tempo. Então, hum, então aqui está o que os convidados para receber disseram olá. Então eu digo: “ Como e eu ajudei. Vamos ver. Sim, temos um pequeno ícone aqui, que significa que as notificações que eu tenho para ajudar o gás em sua união com a conversa. Perfeito. Então eu estou tentando sozinho agora, então parece estar funcionando. Então, se você tem, tipo, cinco pessoas que seu trabalho está logo à frente do chat ao vivo, você pode tê-las aqui. E o quê? Uma conversa é feita, eles podem pegar o próximo capítulo verá uma lista de todos que estão esperando para ser falado aqui. Então o quê, eles realmente saíram da criança e depois tentaram? Se eu voltar aqui, esta conversa está terminada. Bem, o que aconteceu com a minha alegria? Será que ele voltou para cima? Ele faz. Ok, isso é estranho. Mas quero dizer, tudo bem. Se você tem apenas como, diga algo a eles, volte na criação, pegue uma cópia. A transcrição imprimir em uma nota em, fazer com que as pessoas se sintam em seu endereço de e-mail aqui e dar-lhes um nome diferente aqui. Então isso é tudo perfeito. Hum, não. Deixe-me tentar descobrir como iríamos embora. Se eu quiser sair do chat, deve haver uma maneira de lidar com isso. Disse isso. E sim, OK, lá vamos nós. Assim que acabares, acabas. E então isso os libera daqui para que você possa esperar pela próxima pessoa e aparecer. Sim, característica muito legal. Definitivamente sugiro que você use isso se for útil para o seu site. Sim, obrigado. Então, vocês da próxima vez 38. Adicione recursos: como adicionar o Facebook Messenger: Ei, pessoal, bem-vindos a outro tutorial do Squarespace. Hoje vamos adicionar o Facebook Messenger ao seu site do Squarespace. Então, se você está pensando em adicionar um bate-papo ao vivo ao seu site e você não quer, você sabe, entrar em outro software de terceiros apenas para que você possa conversar com pessoas ou qualquer site. Facebook Messenger é muito mais fácil porque tenho certeza que a maioria de nós tem Facebook instalado em nossos telefones de qualquer maneira, que você possa responder às pessoas praticamente de qualquer lugar. Então, quando as pessoas acessarem seu site, elas verão esse ícone do Facebook. Será aberto por padrão. Então, bem, eu estou assinando é eu mesmo. Mas, hum, ele vai, você sabe, aparecer sua página. Então, o que quer que suas páginas chamem no Facebook, e as pessoas podem apenas falar, então continua o gás dentro e bem aqui. Então eu fiz um teste, mas, hum, hum, as pessoas podiam digitar, você sabe, todo esse tipo de coisa é como o Facebook Messenger. Então, para começar, a primeira coisa que vamos fazer é ir ao Facebook, e então você vai para a sua página. Então, estou na minha página de negócios. Mas você vê o seu no topo, certo? Vamos clicar nas configurações. Assim que terminar o carregamento do lado esquerdo, agora vamos para as mensagens avançadas . E se rolarmos para baixo onde diz domínios brancos listados, então aqui, vamos colocar em nosso site real. Você é. L assim para mim, eu colocaria, você sabe, marketing atlético ponto com. Mas o que eu fiz foi, um quando você está no back-end como editar o espaço quadrado, você vai ver um U R L Isso não é o seu realmente. Na verdade, você Earl. Então temos que acrescentar isso nisso. Bem, quero dizer, você não precisa. Se não o fizer, não verá este ícone enquanto estiver logado no back-end. Então, apenas as pessoas que estão visitando seu site, hum, então é um pouco mais difícil de depurar. Então eu realmente gosto de adicionar este aqui também. Então, basta copiar isso e tirar a parte CONFIG, para que eu seja tudo isso. Hum, tudo bem se você tem essa barra não é realmente importante. Então nós copiamos que nós colamos aqui, então eu já tenho isso colado bem aqui. Então, sem a configuração no final, e então também o meu principal você Errol está aqui e então você aperta Salvar. E assim que for um cofre bem sucedido, então, do lado esquerdo, vamos passar para as mensagens. Então, uma vez traseira e mensagens, vamos rolar para baixo e bem aqui onde diz adicionar mensageiro ao seu site. Vamos clicar em “começar”. Agora, aqui está a primeira coisa que aparece. Você poderia ler através dele. Eu só vou bater em seguida. Então você escolhe seu idioma padrão. Então você sabe, se seus sites não estão em inglês, você pode escolher um dos que estão disponíveis. Se o seu idioma não estiver disponível, então eu diria que escolha o segundo mais comum que as pessoas falam quando se aborrecem. Porque até que o Facebook apoie isso,não há como adicionar mais idiomas. até que o Facebook apoie isso, Hum, então sua saudação. Então agora, por exemplo, no meu site, se você puxar para cima, ele diz oi, como podemos ajudá-lo? Hum, então é o padrão, mas você pode clicar em Alterar e você pode mudar isso para o que quiser e, em seguida, pressione Salvar, e nós vamos para o próximo. Então agora esta é uma cor personalizada. Então você vê como no meu site é, um, um, a cor laranja para combinar com a minha marca em vez desta cor azul do Facebook. Então é aí que isso mudou. Então, basta clicar, você sabe, escrevendo aqui, inserir seus valores hexadecimais. Então vamos dizer que você quer. Ah, preto. Sinto muito que 000 Então isso é preto. Então, se essa é a cor da sua marca, você pode colocar isso, e então nós vamos em seguida. E então o que vamos fazer é garantir que seu domínio esteja listado aqui. Isso deve puxar tudo automaticamente da outra tela. Nós só fizemos isso em, hum, a razão pela qual nós não adicionamos o você Earl aqui é que ele está meio grampeado agora. Eu não sei se vai ser consertado, mas o que quer que você adicionar aqui e bater seguro, ele não é realmente salvo isso. por Épor isso que temos de ir ao teatro. Mensagens do Vance. Ah, passo que fizemos antes disso. Então, apenas certifique-se de que seus sites aqui, hum e isso deve ser verificado automaticamente para que você não tenha que fazer nada. Eles são tudo o que você tem a fazer é onde ele diz copiar código para a área de transferência, basta clicar nele e, em seguida, assumir que você clica nele. Ele vai copiar, e então você pode realmente bater, terminar, hum, e então feito. Agora vamos ao nosso site do Squarespace, então estou usando então estou usando um site de demonstração padrão. É por isso que está se mostrando assim. Então vamos para o lado esquerdo, então você vai estar neste menu indo para clicar em configurações, injeção avançada de código. E o que nós vamos fazer é nós vamos você vai ver algo assim se você tem código para outros projetos, tudo bem. Como se você tiver outros widgets e outras coisas, tudo bem. Mas vamos colocar o código e o rodapé. A razão para isso é que se colocarmos no Header, isso vai carregar antes do seu site começar a carregar. A razão para isso é que se colocarmos no Header, , E não queremos que nada desacelere o carregamento do site. Preferimos carregar o site. E quando os sites quase descarregam e chega ao rodapé, então o mensageiro pode carregar. Então vamos em frente e colocar no rodapé que você acertou. Mais uma vez, aqui que a nossa cor estava. Esta é a nossa página, por isso não tens de olhar para isto. É que, sabe, é interessante ver se quer mudar as coisas. Você também pode alterá-lo aqui. Então, se as cores do seu tema não poderiam mais ser preto, você poderia fazê-lo. Você sabe, um, tipo, algum tipo de cinza como este. E, em seguida, tão logado saudação é o que as pessoas vêem se eles já estão logados no Facebook. E isso é o que as pessoas veem se ainda não estiverem logadas no Facebook quando clicarem no ícone do mensageiro. Hum, então você pode mudar isso também. Vou deixar como está. Hum, bem aperte salvar. E devemos ver o tubo de mudança de cor. Sim, a cor que escolhi tão alta, como podemos ajudá-lo? E eles continuam a ser gaseificação com logado como, hum e é isso. Então você deve vê-lo bem ali. Mesmo que eu vá, você sabe, ir para o site sem estar logado. Então, se eu souber, vou ao site. Tudo bem. Deixe-me configurar a senha. Eu só vou te mostrar como é o front-end só para que você possa ver. Então, se eu torná-lo protegido por senha e então eu ir incógnito Mozart. O Squarespace não sabe que estou conectado e depois faço login. Lá vai você. Você deveria ver pops de bem aqui. Por isso, neste momento não estou logado. Então peça às pessoas que façam login com sua conta do Facebook. Mas a maioria das pessoas já se reúnem. É só mercadoria. Isto é navegação privada. E aí está. É assim que você gosta do Facebook Messenger no site. gosta do Facebook Messenger no site. 39. Adicione recursos: upload de arquivos em formulários: Então você tem um site do squarespace e deseja permitir que as pessoas façam upload de arquivos para seu formulário de contato . Mas quando você vem para o formulário que você clica em editar, você vai para adicionar campo estrangeiro. Você olhou todas essas opções e percebe que não há uma opção de deixar as pessoas carregarem arquivos enquanto eu estou aqui para ajudar. Há uma maneira de fazê-lo. É, ah, sistema que foi feito por sites quadrados, e eu só vou tipo de reiterar para que você possa entender melhor como obter um site de atitude . Então a primeira coisa que vamos fazer é ir a este site. Vou deixar o link para isso na descrição, mas a primeira coisa que vai fazer é se inscrever. Vou deixar o link para isso na descrição, Eu já tenho alguma contagem, então vou entrar agora. Esta é uma ferramenta gratuita, de uso gratuito, mas você pode clicar, doar e dar-lhes, você sabe, algumas doações para o trabalho que eles colocam nisso. Então a primeira coisa que vamos fazer neste site é que vamos realmente adicionar nosso site que tenhamos permissão para usar essa ferramenta. Então o nome do site que você pode colocar em qualquer coisa que você quiser. Isso não importa. O site onde l é o seu nome de domínio. Então, por exemplo, ele tem que ter o https, Hum, ou apenas Http, se você não tem um SSL, ok, e então o site squarespace você, Earl, é o que eu gosto de chamar de domínio feio. Então, quando você está logado no back-end do squarespace, isso é o que você vê aqui em cima. Copie tudo antes da configuração. Então nós vamos vir aqui e vamos adicionar isso. Então, agora você verá que o site aparece à direita. Se você tem outro site ou, você sabe, seu designer e você quer adicionar vários sites, você pode fazer isso aqui também, mas eu só tenho um por enquanto. Então agora, assim que isso não for, significa que temos permissão para usá-lo. Então vamos voltar ao nosso site aqui, e nós temos que adicionar um pouco de código. Então é só um forro. Você pode simplesmente copiá-lo e colá-lo. Isso também estará na descrição abaixo. Então vamos para as configurações. Então, isso é bem aqui. Configurações, em seguida, avançadas. Então vamos para a injeção de código e, em seguida, no cabeçalho, vamos apenas colar este código. Hum, e então nós vamos bater Save novamente. Este código estará na descrição e voltará, então isso é tudo o que há para ele. Então agora se eu clicar em editar na mesma página que eu estava antes, mesmo formulário. Agora, se eu clicar em adicionar campo de formulário no canto superior esquerdo, você verá que há uma opção para carregar arquivo. Então, se eu clicar nele, ele faz esse upload de arquivos e ele se sente em um monte de coisas que você não precisa se preocupar com isso ainda. Hum, apenas saiba que ele está funcionando agora para que você possa usá-lo como está. Hum, mas eu vou fazer com que seja necessário. Então deixe-me explicar o que é isso. Então o segundo campo é o que vou falar primeiro, porque é mais fácil. Então esquivar de um pacote só significa que as pessoas podem fazer upload de arquivos Dot JPEG e ponto J. Peg às vezes é soletrado com um E também, então eu vou explicar isso também. Dom, P e G. No caso de ser uma imagem PNG se se for uma imagem GIF vai aqui e o arquivo dot txt também pode ser carregado. Então eu vou apagar tudo isso só porque eu só quero que as pessoas sejam capazes de fazer upload de J pinos, por exemplo. Então eu vou apagar tudo isso só porque eu só quero que as pessoas sejam capazes de fazer upload de J pinos, Então deixe-me cobrir ambos sobre o que eu estou fazendo aqui é ponto jp e g vírgula espaço ponto jp g espaço vírgula . Também incluirei pdf. Na verdade, é um pdf. Lá vamos nós. Então é apenas ponto e, em seguida, X tipo de arquivo vírgula. Em seguida, vem o próximo tipo de bola. Você não precisa se acalmar. Alguns só vão ter um. E agora vamos falar sobre isso. Então, campo de arquivo, apenas diga-nos para sentir que é em algum lugar onde as pessoas podem enviar arquivos. Então não mexa com isso. Deixa essa parte em paz. O Max. Tamanho é o tamanho do arquivo. Então 5120 é cinco megabytes. Então isso não é matar presos de 5120 kilobytes, e o arquivo máximo que você pode realmente subir é 10.000. Bem, Bem, 10 megabytes um pouco mais do que isso. Mas 10.000 kilobytes é o máximo de arquivos que você pode alcançar. Isso é apenas eu acredito que é para que o site deles não fique, você sabe, saturado enquanto ele está tentando ser enquanto tenta carregar tantos arquivos. Então, por exemplo, se muitas pessoas estão usando e alguém tentando fazer upload como um arquivo de um gigabyte e também porque às vezes o navegador faz tempo limite, então basta ter isso em mente se você precisar de algo mais que 10.000 essa solução não funcionará para você. A palavra múltipla aqui só permite que as pessoas façam upload de vários arquivos. Então, você sabe, se eles têm três ou quatro arquivos diferentes, eles podem carregá-lo novamente. Todos eles têm que vir igualar até 10.000. , Ainda assim, esse limite ainda se aplica. Então adicione texto. Adicionar seus arquivos é basicamente o que o botão vai ser chamado. Então, em seus arquivos com sublinhado um espaço para que pudéssemos alterar isso para, por exemplo, carregar sublinhado seus arquivos aqui. Então isso pode ser o que você quiser que seja. Certifique-se de usar um sublinhado onde eles deveriam ser um espaço. Vou fazer com que seja necessário no depósito. Só vou certificar-me de que vai para o meu endereço de e-mail, o que é certo, vou bater, candidatar-me, e vou bater. Salvar. Então agora eu vou colocar, você sabe, teste, teste, e então fazer upload de seus arquivos. Vou clicar nele. Vai abrir isto. Eu vou para abstrato. É só a imagem em torno deles que baixei. Até enviarei duas vezes. Lá vamos nós. Então, só para que você pudesse ver que, você sabe, suporta vários arquivos, então você aperta enviar, e o primeiro foi enviado. Então, se eu for à minha caixa de e-mail, verá que acabei de receber o capataz. Agora, se eu clicar nele, diz que alguém carregou carregou dois arquivos. Eu podia ver os dois aqui, um, chamado teste de teste. Então, se eu clicar no 1º 1, ele me dará um link de download, e eu poderia baixar o arquivo que alguém enviou. Então, se for um pdf, posso baixá-lo para minha área de trabalho e olhar para ele. Também posso voltar a este site onde fizemos a conta dela. Além disso, só para saber, uma vez que você fez a conta, você nunca mais tem que voltar aqui novamente. A menos que queira ver algo em particular. Por exemplo, se eu vou subir cargas. Este é o site. Então cogumelo octógono é o que eu tenho aqui. Então, sob esse site, as pessoas carregaram arquivos. Ambos chegaram no dia 7 de janeiro. E este é o nome do arquivo. Então a única coisa que não te diz aqui é quem o enviou? É por isso que prefiro ver o e-mail que recebi. Então, sim , são apenas arquivos. A outra coisa que você pode fazer é se você não quiser os arquivos aqui, você também pode conectar seu Google Drive, que é o que eu faria. Assim que você conectar seu Google Drive, ele vai realmente fazer upload de todos os arquivos diretamente para o seu Google Drive. Então você não precisa se preocupar em baixar todos os arquivos. Ele já está salvo em, como uma pasta que você tem. E para isso,basta clicar neste botão e assinar com o Google. E para isso, E eu fiz isso também, e funciona muito bem. Então isso é basicamente, é sempre que as pessoas carregam arquivos aqui, você vai obtê-lo aqui mesmo. E você também receberá um e-mail sobre isso . Eu prefiro olhar através do e-mail novamente apenas para que você possa rastrear todos os campos. Também só mais uma coisa. Isso não se limita apenas a formulários de contato. Você pode usá-lo em formulários para fazer root em seu site. Então, por exemplo, digamos que você tem uma loja onde alguém que você conhece tem que fazer upload de um produto porque você vai personalizar a garrafa com ah personalizado, cartão de Natal, por exemplo. Você pode realmente clicar no produto, ir para o formulário e, em seguida, criar um novo formulário. E então você poderia fazer upload de arquivo aqui também,de modo que isso funciona quando alguém está no produto e eles clicam em“ Adicionar ao carrinho”. fazer upload de arquivo aqui também, modo que isso funciona quando alguém está no produto e eles clicam em Isso irá pop ups carregar seus arquivos e eles têm que carregar arquivo antes que eles possam adicionar ao carrinho para que você possa usá-lo dessa forma, também. Então, apenas tenha em mente. Não se limita a apenas formulários de contato em si. Além disso, digamos que você não está conectado a esta conta e você clica nela. Você está bem aqui. Você verá esta mensagem de erro dizendo que você não pode acessar a seguir porque você não está bloqueado , então certifique-se se você receber este e-mail em seu telefone, por exemplo, e você nunca fez login neste site. Basta ir para este link novamente no seu telefone e, em seguida, ir em frente e entrar. E depois de iniciar sessão, se aceder a esse link novamente, permitirá transferir o ficheiro desta vez. Então, se você obter o seu no computador que você não usa frequentemente, apenas certifique-se de que você está logando neste site e você deve ser capaz de acessar esses arquivos. 40. Adicione recursos: adicione uma barra de progresso de leitura: Ei, pessoal, bem-vindos de volta no tutorial de hoje, vamos adicionar uma barra de progresso de leitura no topo de uma postagem de bloco. Assim, à medida que as pessoas se deslocam para baixo, ele se enche apenas para que as pessoas possam ver visualmente o quão longe elas estão na postagem do bloco. Eu sou É realmente muito fácil, e o código será vinculado na descrição abaixo. Então a primeira coisa que vamos fazer é chegar ao backend do site. Vamos às páginas e depois encontraremos seus arquivos. Então esse é o que tem um minúsculo. Um ao lado dele. Então, vamos clicar no ícone de engrenagem aqui, e eles foram bem adiantados e, em seguida, injeção de código de cabeçalho da página. Então vamos colar o código. É o primeiro pedaço do código de qualquer maneira, novamente, o código está no link na descrição abaixo, vamos colá-lo aqui. Então vamos bater, salvar, e vamos voltar ao design. Então, em vez de páginas, vamos projetar desta vez e, em seguida, ir para CSS personalizado e novamente, Este código também está no ah, no post bloco. Então vamos colar o código aqui e, na verdade, é tudo o que há para ele. Hum, então agora se alguém for, por exemplo , Blawg, não há nenhum bar no topo. Se eles vão para a página inicial, não há barra no topo. Mas se eles entrarem em Blawg e, em seguida, clicar em um post, em seguida, a barra aparece. Agora aqui está como você pode personalizá-lo. Então, se você se lembrar do código que adicionamos ao CSS personalizado então novamente projetado CSS personalizado, aqui é onde você vai estilizá-lo. Então não temos que editar nenhum outro código apenas para codificar que está aqui. Então a primeira coisa que você pode mudar é agora a barra aparece no topo. Se você quisesse no fundo. Em vez disso, vamos mudar onde diz zero zero zero para baixo e então você verá que é ao longo do fundo aqui. Acusações rejeitadas Isto é mais fácil de ver. Lá vai você para que você possa vê-lo sentado no fundo. Agora, , a outra coisa que você pode fazer é voltar para cima. A outra coisa que você pode fazer é ver que tem agora é grão. O fundo. Digamos que não seja o seu Brad Color ou que não goste do Gray. Hum, você pode entrar aqui e mudar para, tipo, preto, que é 000, então é assim. Você pode mudar o dedo do pé branco, mas como eu tenho fundo branco, você será capaz de vê-lo de qualquer maneira, hum , então , assim, você pode colocar, você sabe, valores hexadecimais ou valores RGB, ou apenas digite, você sabe, amarelo. Então foi assim que mudou essa cor. Agora, para mudar a cor de preenchimento laranja, você vai vir até aqui para onde está a barra de Progresso, e você pode mudar isso para, digamos, por exemplo, preto. Então ele se enche de preto. A outra coisa que você pode querer mudar é o tamanho do bar, então você pode querer que ele seja um pouco mais grosso. A outra coisa que você pode querer mudar é o tamanho do bar, Então nós apenas viemos aqui e, por exemplo, agora, são cinco escolhas que poderíamos mudar para talvez 10. Se você fizer uma mudança lá, apenas certifique-se de que você também mudou isso para 10. Então é em dois lugares, então altura. Assim, tanto o bar quanto o fundo combinam e o show das enfermeiras como este. Eu, pessoalmente, gosto de cinco. Hum, pode ser um pouco difícil de ver para algumas pessoas, então você pode querer, você sabe, 10 ou 15 ou algo assim. A outra coisa final que você pode querer mudar é que você pode querer que esse Bart apareça, você sabe,em todo o site, não apenas em postagens de bloqueio. A outra coisa final que você pode querer mudar é que você pode querer que esse Bart apareça, você sabe, todo o site, Então, para isso, o que você faria é voltar às páginas, entrar no ícone de engrenagem aqui. Bom avançado. Depois, a Paige teve a injecção do código. Vamos tirar este código, e depois vamos voltar. E em vez de colocá-lo lá, vamos para configurações, injeção avançada de código e o postado no rodapé aqui, então postado no rodapé. E, em seguida, a outra coisa final que temos que fazer é que nós temos que ir para o design personalizado CSS e , em seguida, tirar este último pedaço. Porque o que o último bit faz é que o esconde nas páginas de arquivo de bloco desta página. Então, se eu tirar isso apenas aquele último pouquinho, ele vai aparecer nesta página também. Então isso é se você quiser, você sabe, em cada página. Então, como você pode ver, ele está carregando em cada página, apenas sobre o topo lá, e é isso. Então, novamente, um, todo o código vai estar no link na descrição abaixo. Só para vocês copiarem e colarem e terem um ótimo dia. Pessoal, se cuidam. 41. Adicionando recursos: como criar um menus mega: Ei, pessoal, bem-vindos de volta a outro tutorial do espaço quadrado. No tutorial de hoje, vamos falar sobre a criação de um mega menu no espaço quadrado. Então agora estou executando o modelo de salmoura. Mas isso funcionará em qualquer um dos modelos da família Brian. Embora você possa modificar o código ligeiramente para trabalhar com qualquer modelo. E eu testei com dois ou três, então funciona. Hum, então aqui está como seria. Então, quando você pairar, vai ficar assim. E você pode ter várias colunas. Você tem dois, um ou quatro. Ah, quanto você quiser. E você pode reduzir o espaçamento e personalizar exatamente como quiser. Hum, então vamos começar. Ok, então como isso funciona é basicamente nós vamos construir o menu normal primeiro. Então, por exemplo, eu chamei um mega menu, mas você pode chamá-lo do que quiser. E então você só vai construí-lo para fora como você queria aparecer no celular porque obviamente o mega menu não vai funcionar no celular só porque não há o suficiente com em uma tela móvel. Então é assim que vai parecer. Então, em todos os seus links que você quer aqui. Sabe, você pode ser como um menu normal, um celular. Então, se alguém estiver aqui, por exemplo, e clicar no que quer que os menus chamem, tudo será listado aqui. Então isso é como, você sabe, espaço quadrado normal ou construí-lo como você quiser. E então a segunda coisa que vamos fazer é descer até o rodapé e onde diz fechaduras de topo de pé. É isso que estou usando. o Eocódigo vai refletir isso também. Mas você pode usar rodapé, meio ou rodapé inferior. E se você é, hum, Template não tem diferentes níveis de rodapé, então você precisará personalizar o código que eu fornecer. Eu não sou muito o suficiente para que você possa mirar melhor. E explique que talvez mais tarde ou nos comentários se vocês tiverem alguma dúvida, , e novamente, o código para este tutorial também será listado na descrição também. Então o que eu fiz foi ir para os blocos de topo do rodapé. Então, novamente, se você passar o mouse mais baixo para a borda média e inferior, isso é o fundo bem aqui. Então, vamos para o topo e depois clicar em editar, e você vai nos construir exatamente como quiser. Então, você sabe, eu adicionei o título três. Outro título três. Eu adicionei, eu apenas digitei, por exemplo, casa. Então você poderia fazer, tipo, você sabe, se você tem um bloqueio para, hum talvez querer bloqueio de anúncios no final. Então, em vez de bater como se você apertar enter, ele vai lhe dar duas linhas. Então, se eu fizer, por exemplo, blawg, se você não quiser que seja duas linhas, basta segurar, mudar e bater. Entrar. E nós vamos ligar isso a, você sabe, apenas um bloco normal. Acho que sim. Vamos apenas fazer isso. Vai acertar, Aplicar. Então, digamos que era assim que eu queria parecer. Sabe, eu tinha. Um botão. Você poderia ter quatro colunas aqui. Você só, você sabe, clique aqui, você sai do bloco de texto, arrastá-lo para a esquerda, e isso será chamado de um, por exemplo. Hum, eu realmente não iria lá só porque tudo vai ficar, você sabe, um pouco apertado, então mantenha em quatro. Se possível. Vou mantê-lo às três. E a outra coisa é que quando você carrega uma imagem aqui, não carregue uma imagem grande. E a outra coisa é que quando você carrega uma imagem aqui, O que eu fiz foi realmente redimensionar esta imagem para ter, acredito, 100 pixels de altura para que você pudesse ir um pouco maior se quiser. Mas o Squarespace não vai gostar, torná-lo a imagem maior do que o que você tem. Por isso mantive-o fora de centenas, por isso vai aparecer sempre 100 no maior. Já que ainda não construí,não tenho muito o que fazer agora. Já que ainda não construí, Agora eu só tenho que adicionar o código. Então o que vou fazer é dar o código ao Adam, e depois explico para que possas mudar. É necessário. Então, para o JavaScript, vamos para as configurações, injeção avançada de código, e então eu vou apenas copiar o código. Eu tenho-o sob tela diferente aqui, mas novamente, isso será vinculado na descrição. Falo sério, cola-o. O que? Ah, esse casaco faz é mover isso para cima, mas novamente, mas novamente, vai parecer muito feio até que nós realmente estilizá-lo. Então, sim, como você pode ver, parece muito feio. Então vamos voltar e voltar novamente. Vamos projetar CSS personalizado. E eu vou copiar este código, que novamente, você vai estar na descrição hit salvar. Então, uma vez que você faz isso, é assim. Ok, agora, se o seu não está funcionando, não se preocupe. Você tem que modificar o código. Então o que vamos fazer é primeiro as coisas, vamos para o primeiro código que adicionamos. Então, configurações, injeção avançada de código. Vou dar uma olhada nisso. Então, a primeira linha tudo o que estamos fazendo é, hum, adicionando os arquivos de consulta J para que possamos realmente usar a consulta J no site e eles estavam indo para realmente usar uma consulta aqui. Então é por isso que Link está lá. , Em seguida, o que ele vai fazer é quando os sites carregarem, ele vai procurar o Header. Nós vamos tudo isso basicamente e ele vai procurar o quarto item, que é uma pasta. Então vamos procurar o quarto e depois vamos escrever blocos de rodapé no topo. Então o que isso faz é que leva blocos de rodapé superior e adiciona-o à pasta que já tínhamos aqui. Então, a única coisa que você pode ter que mudar. Este é o número quatro? A menos que você esteja em um modelo diferente do que você pode ter que mudar. Ah, algumas dessas classes, dependendo de qual classe você usa template. Para todos os outros da família Brian, você só tem que mudar esse número. Para todos os outros da família Brian, Para mim, o mega menu é o quarto item. Então 1234 Então eu tenho quatro aqui. E só para mostrar o que aconteceria se você tivesse como 1/3 item, por exemplo, Então vamos dizer que eu tinha mega menu e, em seguida, o blawg, Então mega menu vai aqui. Se eu tentar agora, ele só me mostra meu menu padrão. O que eu fiz aqui. Então, claro, não são nossas páginas. Então o que temos que fazer é voltar nas configurações avançadas de injeção de código, e então aqui não é mais o quarto item. Não é o terceiro item. Então vamos mudar isso para três. E vou deixar às três. Porque assim posso mostrar-lhe o resto do código. Agora você verá que parece feio, mas está funcionando. Então isso significa que temos que modificar o CSS porque isso tem a ver com estilo. Então agora vamos projetar CSS personalizado e, em seguida, bem aqui se você notar que diz quatro novamente. Mas nós mudamos para o terceiro lugar. Então sobre o tipo em três em vez disso. E então também aqui, onde diz ah e criança para mudar três e depois aqui e criança para três trocados. E deve ser isso. E lá vamos nós. Então está no terceiro lugar agora. Então agora para estilizar isso deixe-me explicar como este código funciona agora. Então eu vou clicar com o botão direito do mouse no menu e eu vou fazer isso para que sempre fique lá Só para que você possa ver as mudanças sem eu ter um pairar Alguns vai ir muito bem aqui. Onde diz cabeçalho agora Vitamina a suspender eu vou clicar em pairar Oh, e para chegar aqui você realmente apenas clique com o botão direito do mouse no menu mega e clique em Inspecionar E, em seguida , quando ele vem para cima, você só vai até esta banda aqui e você vai ver o que eu clico no span. Ele destaca no topo aqui em verde, azul e laranja alguém no entanto aqui, em seguida, ir para pairar e eu vou ligar o pairar Então isso basicamente faz pensar que eu estou pairando sobre ele mesmo quando eu não estou. E quando atualizei a página, isso aconteceria mais. Então é apenas um mecanismo de teste. Então agora o que eu vou fazer é assim com para que você veja como a mente agora está quase cheia , mas há algum espaço nos lados, então isso é porque eu tenho isso definido para 90% da inteligência. Então 90% do tamanho da tela para que eu pudesse definir 200 se eu quiser, um, eu poderia até mesmo configurá-lo para, você sabe, menor. Digamos que só quero 60%. Eu poderia fazer isso. Então 60% agora, a outra coisa que você tem que fazer é se você quiser movê-lo, você sabe, esquerda ou direita. Isso é bem aqui. Então, agora, eu tinha à esquerda de cinco, porque eu tinha 90. Então eu queria cinco à esquerda, cinco na taxa. Então, se eu fizer 60 eu provavelmente iria querer 20 na esquerda e 20 na direita, então ele adiciona até 100 para 20 na esquerda e que iria centralizá-lo. Agora você verá que é meio desligado porque mega menus aqui, isso funcionaria se você é mega menu navegações no centro. Mas já que o seu já que o nosso está do lado direito aqui, nós vamos realmente clicar à esquerda, e vamos movê-lo um pouco mais para a direita. Então talvez você faça 40. Então ele vai para a direita da tela. Então você faz isso, hum, você pode até ir um pouco menos só para que haja algum espaço ao lado, então 35. Então isso é 35% do espaço aqui. Então temos 60% disso do que outros cinco aqui e, em seguida, top 60 pixels. Então, digamos que você tem um tamanho de fonte realmente grande e isso é meio que correndo por cima, então deixe-me mostrar a vocês o que parece. Então, top 60. Digamos que eu tinha no zero. Então, isso é o que seria por padrão parecer, então nós queremos movê-lo para baixo apenas para que ele esteja sentado logo abaixo da nossa opção de menu. Então vamos ao top 30. Certo, temos que ir. Um pouco mais teria antes dos 60. Acho que os anos sessenta têm um bom tamanho. Nós poderíamos ir talvez 50 a muito baixo um deve tentar. 65? Sim. 65 também funciona. Hum, então vamos fazer 65. Só quero que haja espaço aqui. Então é isso que este primeiro pedaço de código faz. Basicamente, está apenas posicionando este quarteirão inteiro. Então nós temos, Você sabe, nós estamos fixando no topo da tela a largura dos blocos. Hum, quanto espaço há por cima dele? Então 65 pixels Não se preocupe com esse índice. Isso é usado para esconder o menu. Então, isso só aparece quando você passa o mouse. Sou tão nativo para colocar isso para trás. Você sabe, este verde e este branco para que ninguém possa vê-lo. E depois o que vamos fazer é descer até aqui. Então o que isso faz é se alguém clica pedir desculpas, nem mesmo clicar. Então, se alguém paira sobre a palavra mega menu, que é o terceiro item, então nós vamos pegar o índice set e fazê-lo para isso antes de ser dois negativos. Assim como estava por trás de tudo. Agora estamos fazendo quatro. Então está na frente de tudo. Então, quando alguém paira aqui, traz isso para a frente. E então o que a discoteca faz é você sabe como, por padrão, tínhamos , um , nosso menu regular, que era eu acho que tínhamos, como, nossos cursos e casa ou algo lá que fizemos para celular. Então, este aqui, menu da Megan. Então cursos em nossas páginas? Sim. Então esse menu, estamos basicamente escondendo isso, porque, quero dizer, nós não queremos aparecer. Só queremos o seu mega menu. Hum, então o poço final é, hum, livrar-se da fronteira no fundo. Então você vê como se eu possuísse Desculpe, isso só está furando porque eu tenho. Eu tenho este conjunto para pairar assim em um rodapé. Se eu realmente ir para, por exemplo, meio e eu colocar em texto e eu torná-lo um link. O que vai acontecer por padrão é que ele vai ficar sublinhado, certo, e eu não quero que ele seja sublinhado, especialmente quando nós temos acima no mega menu. E a outra coisa que estou fazendo é você ver como é, muito apertado. Eu quero espaçar mais. É por isso que vou mudar a linha da noite. Então, altura da linha de dois em vez de, hum, era provavelmente um ou algo assim antes. Então, se você quiser ainda mais espaço, deixe-me colocar isso de novo. Então, se você quiser ainda mais espaço, você faz como 2,5 e você verá o espaçamento entre eles crescer. Você vai, você sabe, três. Então você pode brincar com isso. Encontre o número que funciona para você. E isso removeu a borda inferior que tinha antes, que é a outra linha. E isso removeu a borda inferior que tinha antes, Então a última coisa que você provavelmente quer mudar é a cor. Então agora eu tenho que definir é cinza. Hum, que você realmente só vai para estilos de site. Portanto, projetar e, em seguida, estilos de site executando um tipo na pasta, então cor da pasta. Vamos tê-lo preto. Se você quiser alterar a cor do texto, você tem que ir para o conteúdo do rodapé. E isso liga e você pode mudá-lo para branco. E depois no celular. Desculpe. No tablet de novo. Parece com isto. Então isso é porque nós temos o 60% com, mas você pode querer aumentá-lo. Você terá que usar uma consulta de mídia se quiser ser magro no desktop e depois grande no celular. Então vamos ao Tablet Terry. Então, vamos. Vamos cobrir isso. E então, onde eu tinha 60% com, eu poderia querer fazê-lo, por exemplo 70. E então eu também tenho que movê-lo para a esquerda porque agora que 70 é provavelmente cerca de 15 para a esquerda . Hum, sim. Podemos até ir ao E.T . Lá vamos nós. Só para que esteja no topo. Então 80 mais cinco no lado e 15 na esquerda, talvez um puxão Deixou um pouco mais 10 à esquerda. E agora está meio centrado. Então 80 mais 10 na mão esquerda nos direitos 100. Então é exatamente centrado, Hum, e na área de trabalho parece com isso. E então, se eu não apressar, ele vai embora, e eu vou apenas dar uma olhada rápida em como ele parece no celular. Então, no celular, ele deve voltar para sim, menu Megan, e então é apenas o seu menu normal. Isso é só mais uma vez, porque não há espaço para nenhum mega homem usado em dispositivos móveis. Portanto, certifique-se de construir essa navegação inicial corretamente. Então, de novo, isso está nas páginas. Então, aqui, apenas certifique-se que isso é construído corretamente. Então, no celular, eles sabem que não têm uma experiência quebrada. Eles ainda podem acessar todas as páginas. E a última coisa é, se você quiser fazer alterações nesse menu, hum, o que você tem que fazer é ir para configurações, injeção avançada de código e tirar isso. Você pode deixar as outras partes lá dentro. A outra coisa que você pode fazer é apenas comentado, que é assim. Então, é menos que ponto de exclamação, hífen, hífene hífen, hífenmaior do que na parte inferior. menos que ponto de exclamação, hífen, hífen e hífen, hífen E que comentários que também não fazem nada. E assim você tem o pé no fundo de novo. Em seguida, basta clicar em Editar, fazer as alterações desejadas. Então, digamos, por exemplo, que eu não quero mais essa imagem. Será que vai salvar isso? Vou apenas invulgar isso de novo. Então agora ele vai ser executado novamente, então o código vai funcionar. Então, agora, se eu for para o topo lá você vai, a imagem se foi e sim, é assim que você faz o menu no espaço quadrado Caras, tenham um ótimo dia.