Webflow avançado e CMS

1. Introdução ao curso: Para o curso avançado de Webflow. Este curso irá apresentá-lo ao mundo das páginas dinâmicas criadas com a ajuda do Webflow, bem como seus recursos mais avançados. Você provavelmente já pode prever o curso completo básico da web. Esta é a continuação. Vamos estender as possibilidades dos sites criados anteriormente para trabalhar com conteúdo dinâmico do módulo CMS. Desta vez, você aprenderá a criar sites complexos, como blocos e páginas de produtos, e sites que podem ser editados pelo seu cliente diretamente no navegador. No curso, analisaremos alguns aspectos avançados importantes do trabalho no Webflow. Por enquanto, nosso projeto contém apenas uma página, mas criaremos um guia de estilo para gerar novas páginas do nosso site rapidamente. Mais tarde, você pode repetir essa ideia para criar sistemas de design ainda mais avançados. Em segundo lugar, vamos nos concentrar no CMS. O fluxo de trabalho permite criar estruturas de dados complexas que são executadas como um banco de dados. Primeiro, vamos definir as estruturas para o blog. O fluxo de trabalho irá gerar automaticamente um número de páginas para nós, onde o uso de dados dinâmicos se resume a alguns cliques. Posteriormente, vamos preparar todos os sites para usar tal estrutura de dados modelo, criar um sistema completo de blogs. Finalmente, vou mostrar-lhe como usar o CMS para gerenciar o conteúdo do site a partir do nível do navegador que seu cliente será capaz usar e adicionar conteúdo dinâmico que adicionar novas entradas. Podemos fazer tudo sem codificação. Além disso, eu encontrei uma série de lições que lhe permitirão adicionar lógica de negócios ao seu site, mas sem a necessidade de usar vários idiomas, irá construir um motor de busca baseado em pesquisa elástica, o melhor aberto para indexação e retorno de resultados. E também vamos criar uma série de integração útil é baseada em um soluções sem código, como Zapier ou tegument. Hoje em dia você pode construir funções avançadas previamente reservadas para desenvolvedores de back-end e front-end. E você pode fazê-lo sem uma única linha de código. Então, quem se beneficiará deste curso? Primeiro de tudo, aqueles de vocês que já sabem um pouco de Webflow, se você pode construir camada, mas você quer usar CMS e dados dinâmicos, bem como uma abordagem pouco mais sistemática para criar sites no Webflow, Eu acho que este O curso é para você. Este material requer uma base base de Webflow. Então eu recomendo que você participe do meu curso básico Webflow primeiro, este curso é uma ótima maneira de criar seu site, NDP de seu produto ou oferecer aos seus clientes fagos dinâmicos e CMS combinados com ferramentas sem código, que todos levarão seus projetos Webflow para o próximo nível. Vamos mergulhar nas primeiras lições. 2. Tarefa Skillshare: Mais uma vez, obrigado por assistir minha aula de Skillshare. Esta é a segunda classe de Skillshare que tenho no Webflow. O primeiro é bem básico. No entanto, se você não tem habilidades básicas, eu encorajo fortemente você a verificar o curso básico Webflow e, em seguida, prosseguir para este material. É muito importante que você trabalhe comigo no curso. E eu tenho duas propostas para criar seu próprio projeto de curso. O primeiro está apenas seguindo. Tudo o que você precisa fazer é apenas assistir os vídeos e, em seguida, repetir as ações que você vê no vídeo. Em Webflow, eu acho que ele vai lhe dar uma compreensão bastante sólida de como criar um site como este com CMS e guia de estilo e muitos, muitos recursos mais avançados. Esta é uma ótima maneira de praticar suas habilidades. E também, eu estou dando alguns dos recursos que você pode usar e eu apenas ligá-los no comentário para esta lição. Isso permitirá que você crie um bom site que seja dinâmico. E sugiro que se submeta como atribuição de curso. No entanto, se você quiser, ou habilidades para o próximo nível, Eu encorajo você a experimentar e criar seu próprio projeto usando as mesmas habilidades que você vai aprender aqui. Por exemplo, criar um guia de estilo e, em seguida, trabalhar com CMS e também desistir de algumas integrações, talvez com Zapier ou integra Ahmad tendo uma tarefa como esta, um projeto prático pode ser para um amigo seu ou talvez para alguém de sua família, seria realmente levar as habilidades para o próximo nível. E eu encorajo e recomendo que você faça isso. E, obviamente, por favor, apenas submetida como atribuição do curso. Ficaria muito feliz em ver o que fez com o Webflow. Muito obrigado, e vemo-nos na próxima lição. 3. Configuração do Styleguide: Oi pessoal e bem-vindos à próxima lição que este é o início de nossas lições guia de estilo. Vou mostrar-lhe como criar um guia de estilo para que possamos facilmente reutilizar elementos e componentes em diferentes páginas do nosso site. E isso é super útil, especialmente se você está criando um site de várias páginas ou se você tem algum guia de marca específico e livro de marcas, e você quer permanecer consistente com os componentes, cores, tipografia, para que nós criemos uma página separada com o guia de estilos. E a partir desta página podemos definir componentes que podemos mais tarde usar em diferentes páginas do nosso site. E isso também pode ser um ponto de partida para todo o sistema de design que você pode criar para seus projetos. Este pode ser um sistema de design para uma marca e os diferentes projetos que você vai criar para esta marca. Por exemplo, páginas de destino diferentes. Mas também você pode pensar em uma estrutura para si mesmo para trabalhar no Webflow que permitirá que você facilmente criar projetos e reutilizar algumas estruturas e componentes comuns. Isso é algo que eu vou deixar fora do escopo deste curso porque este é um tópico um pouco mais avançado, criando um sistema de design. Mas só para que saibas, tenho uma estrutura de design própria. É chamado de sistema de fluxo de ponto co. E eu uso isso com todos os novos sites que eu crio. E mais tarde você pode fazer checkout código de ponto de fluxo do sistema para ver os exemplos e tutoriais gratuitos sobre como eu faço isso. Por enquanto, temos o guia de estilo, e esta é a página simples que criei no curso anterior. Agora ele contém apenas um componente. Este é o bloco seiva muitos e nós criamos para que possamos reutilizá-lo no subdinheiro. Mas este é um ótimo começo para o nosso guia de estilo. Então estilo que deve ter sua página separada. E nesta página vamos organizar componentes, mas não apenas componentes, porque também queremos criar alguns tokens de design que você pode usar mais tarde. E esses símbolos de design podem ser tipografia. Então todos os cabeçalhos e navegação, bem como as cores e os outros elementos que usaremos em várias páginas. É exatamente por isso que eu quero organizar esta página de guia de estilo um pouco melhor para que eu tenha um componente de navegação. Deixe-me adicionar a barra de navegação. E este componente de navegação conterá as informações nos links que percorrerão esta página. E deixe-me encore diferentes seções, como tipografia, cores e componentes. Por enquanto, vou adicionar uma imagem aqui e mudar o logotipo. E depois deixa-me ir a este contentor inteiro. Vou adicionar outro olhar div para ele e colocar os elementos da marca dentro para que eu possa ter os elementos da marca e dinheiro suficiente dentro do bloco. E esta é uma prática comum que eu uso com navbar porque agora essa depuração, eu posso renomeá-la para menu e usar display flex para centralizá-la vertical e horizontalmente. Agora vamos reorganizar os elementos para que eu tenha logotipo para o lado esquerdo. E para sistemas de design mais complexos e guias de estilo, você pode querer usar menu não horizontal, mas menu vertical. Esse é o lado esquerdo ou direito da página de guia de estilo. Mas por enquanto, eu vou apenas usar este menu horizontal e também mudar o posicionamento do elemento para a classe base que será corrigido para que quando eu rolar a página, o menu permaneça no lugar e seja fixado no topo do meu site. E então eu vou criar outra seção, apenas uma seção de título para o meu guia de estilo para que ele seja ordenadamente organizado. Lembre-se de que você vai revisitar escalonados de tempos em tempos, bem como seu cliente provavelmente, ou talvez a equipe de design que também está usando o guia de estilo ou o sistema de design que você criou. Então é sempre muito bom também. Organize-o em algum tipo de estrutura e adicione algumas legendas adicionais e seções contêineres para que ele seja bem organizado. Você pode navegar através deste guia de mosaico, especialmente quando ele evolui para algo maior, como o sistema de design, isso seria um salva-vidas. Então o que eu estou fazendo agora, eu criei a seção principal e, em seguida, dentro eu tenho recipiente. Dentro disso, vou criar outro bloco D técnico, e isso seria um herói guia de estilo. E neste div olhar outra estrutura com textos de classe. Eu só vou usar o invólucro de texto. E aqui eu vou usar um título e também um parágrafo para que eu possa ter apenas uma descrição do que está dentro deste guia de estilo. Deixe-me usar alguma margem aqui. E este herói guia de estilo teria fundo branco, bem como alguma sombra. Vou adicioná-lo em um segundo. Vamos adicionar o raio da borda, bem como algum preenchimento dentro deste recipiente para posicionar perfeitamente o título e a descrição. Essa é a margem de 44,5 pixels. Agora vamos selecionar o recipiente e alterar seu tamanho para que a largura do elemento seja um pouco maior. Deixe-me ter 12 AT, para a largura máxima deste recipiente. E eu quero posicionar para centralizar elementos de posição dentro do invólucro de texto. Então vamos selecionar o wrapper de texto e para o espaçamento dos relatores de textos, este pequeno ícone para o lado direito que permitirá centralizar os elementos dentro de uma tag div. Então, vamos clicar nele para que tenhamos margens automáticas à esquerda e à direita. E agora, se mudarmos a largura para, digamos que 50 por cento terá ela centralizada. Vamos alinhar o centro de texto e vamos mudar o nome para guia de estilo, bem como a descrição para tipo de definir o objetivo do nosso guia de estilo. Mas esta é uma estrutura típica que eu usaria aqui, e isso é bastante versátil. Você pode copiá-lo e colá-lo onde quiser e você tem elementos bem posicionados. Agora vamos adicionar um pouco de sombra. Isso vai ser 20 distância e 30 Blair. Mas vamos mudar a cor para que seja talvez cinco ou 6% opaco. E agora parece muito bom. Esse é o início do nosso guia de estilo e a estrutura que temos com a seção de herói guia de estilo. Isso vai ser muito único, mas teremos tais estruturas para que possamos copiá-las e colá-las por todo o lado. Vou apenas remover a aula por enquanto. A estrutura base seria a seção Guia de Estilo. E lembre-se apenas de não aplicar muitos estilos para esta seção tigres em si, em vez de seus recipientes e olhares profundos dentro para que possamos facilmente copiar em mudança o nome das classes que temos para os nomes desta seção. E agora vamos criar o wrapper de texto dentro. Eu vou me mudar de direção para cá e torná-lo h, h2. Essa será uma descrição da primeira seção do nosso guia de estilo. Então, por exemplo, vamos começar provavelmente com tipografia ou cores. E nós vamos ter o nome desta seção aqui. Então vamos renomeá-lo para tipografia e também ter alguma descrição. Assim, a tipografia pode ajudar a criar hierarquias claras e organizar informações e, e orientar os usuários. Então temos um pouco de informação extra em cima. E também no menu, podemos começar a mapear essas seções específicas para que possamos vinculá-lo com um bis. Vamos selecionar a seção do guia de estilo, pressione D no teclado para ir para as configurações da seção. E como identificação, vou usar tipografia. E agora vamos nos certificar do menu eu também vinculado à seção de tipografia. Vamos para as configurações e escolher a seção para a qual queremos rolar quando o usuário clica neste item de menu. A segunda seção pode ser sobre cor. E o terceiro, vou renomeá-lo para componentes. Além disso, você pode criar muito mais seções. Como eu disse, quando isso evoluir, você pode estar disposto a apenas movê-lo para o lado esquerdo, mas por enquanto está tudo bem ficar no topo. Eu vou usar seções, e isso é praticamente para o alvo mais simples que eu vou criar quatro para esta página. Agora no contêiner, eu também vou criar mais um elemento e que seria subseção, você poderia dizer. Então isso vai ser um cabeçalho H3, deixe-me dar-lhe um nome estilo guia. Isso vai ser h tag congelamento, por exemplo. E nós vamos movê-lo para este recipiente para que ele fique aqui. E também vamos mudar um pouco de estilo. Precisamos alterar as propriedades da fonte. Vou usar DM Sans. Vamos usar 400 Normal aqui e mudar o tamanho para 16 pixels. Mas eu vou criar uma grande altura de linha para isso. Vai ser uma linha, mas eu preciso desta caixa maior para que eu possa aplicar alguma decoração por enquanto. Vamos primeiro capitalizar. E também eu quero criar espaçamento de letras de dois pixels. E agora estou usando essa caixa maior, a fim de aplicar uma borda, borda inferior. Então eu configurá-lo para um fundo de borda de pixel e borda sólida com esta cor azul meia-noite. Agora é aplicado ao subtítulo. Então eu tenho algum tipo de subseção aqui. E para tipografia, por exemplo, eu posso usá-lo para títulos. X sub-seção seria para corpo de texto. Próximo para legendas. Eu acho que você entendeu o ponto. Portanto, agora é fácil usar essas seções do guia de estilo para apenas entrar em C e Command V, copiar e colar e criar várias seções diferentes desse alvo. Faremos isso na próxima lição. Vejo você lá. 4. tipografia: Olá pessoal, bem-vindos à próxima lição e vamos criar títulos primeiro. E eu só tentei fazer parecer excitante, mas na verdade não é. Vamos criar o primeiro título, copiá-lo e colá-lo algumas vezes. Vou criar seis títulos diferentes. Você pode criar apenas livre e, ou quatro ou cinco, o que você tem no design. Agora vamos mudar os tipos de cabeçalho para até cinco anos. E também vou copiar e colar mais uma vez e criar este título especial. Eu não vou usar H6, mas em vez disso, deixe-me criar um H2 especial que eu vou nomear cabeçalho seção. E isso vai ser como um título extra um h2 com uma classe extra que eu vou usar em todo o meu layout. Agora vamos mudar esse tempo para os títulos. E, a fim de fazer isso, vamos selecionar o primeiro e vamos para o seletor e selecione o seletor de tags HTML. Isso seria tudo rumo H1. Portanto, queremos que todos os títulos H1 pareçam praticamente iguais. E o que queremos alterar aqui são as configurações de Tipografia. Então nós temos Sarah display e 400 normal 5461, porque, de acordo com o tamanho e a altura da linha, nós também queremos definir a margem inferior para 10 pixels e talvez mudar margem superior também. Agora vamos para as configurações de cabeçalho H2 e precisamos fazer o mesmo aqui. Então eu estou basicamente consultando com o layout. Eu tenho o arquivo XD aberto no meu segundo display e eu apenas verificar se esses valores estão corretos. O que eu preciso mudar aqui é nas configurações de topografia que eu mudei a fonte para o m Serif Display. E também vamos aplicar para centenas de peso normal e mudar o tamanho para 38 e altura da linha, que será 44. Assim, desta forma, vamos criar um modelo boilerplate para todos os cabeçalhos H2. E eu vou fazer isso por ter trocado de graça este laço ter, por ter cinco e o título especial que eu criei. Agora, outra abordagem para cabeçalhos pode não estar usando as tags H1, H2, H3 e essas tags HTML. Em vez disso, o que você poderia fazer é que você pode apenas aplicar algumas classes, por exemplo, classe título 1, indo para classe, tendo classe livre. E então ele não dependerá necessariamente da tag que você selecionar para que você possa aplicar estilos diferentes. Esta é apenas outra abordagem para criar um guia de estilo com cabeçalhos. Você pode usar este Todos os cabeçalhos H4, por exemplo. Ou você pode apenas criar uma classe extra. E graças a isso, isso lhe dá um pouco mais de flexibilidade em termos de SEO, porque então você apenas aplica a classe H4, mas abaixo, você pode mudá-lo em H5 e H6, H1 se você quiser que isso seja mais proeminente para motores de busca e para o Google. Mas isso é apenas uma nota lateral como eu estou mudando esses valores porque isso é basicamente o mesmo. Só estou checando o layout. Que tipo de valores eu tenho para espaçamento e tipografia? Eu não estou mudando mais nada em termos de CSS. Então eu não estou mudando de posição e tamanho. Sabe, estou manipulando com espaçamento e tipografia e tentei manter-me consistente. Com isso, as propriedades CSS foram alteradas apenas para o texto. Agora este título de seção especial vai ser a resposta desta peça para um 100 normal e, em seguida, 46 e 56. Eu vou usá-lo em algumas ocasiões, é um pouco diferente do que o H1 e H2 que eu tenho. E eu acho que agora eu tenho todos os títulos que eu preciso, pelo menos os que eu tinha no arquivo de design. Então eu posso selecionar, copiar e colar outro cabeçalho guia de estilo livre H e alterá-lo em parágrafos. Então vamos usar um estilo para parágrafo, às vezes para projetos diferentes. Eu uso estilos diferentes. E eu tenho, geralmente eu tenho um três tão grande, pequeno e médio. E eu posso manipular as versões do parágrafo. Mas, neste caso, temos layout bastante simples e eu vou usar apenas um estilo de parágrafo. Deixe-me ajustar a margem. Eu vou configurá-lo para 18 pixels margem inferior, e também mudar o peso da fonte para 500s médio. E o resto das propriedades que eu vou deixar como eles são porque eles são definidos corretamente para todo o documento. No curso anterior, Eu só selecionei elemento corpo e para ambas as páginas antigas tag, Eu criei uma caneta com os comerciais e o tamanho e altura corretos, o mesmo que eu tenho no meu parágrafo. É por isso que agora está tudo bem. Eu tenho ajustado um pouco esta margem de guia de estilo livre H fundo para que ele parece melhor. Agora eu posso copiá-lo e colar para ter legendas abaixo. E eu vou ter diferentes versões de legendas. Já os tenho no meu documento para que possa percorrer os seletores e procurar legendas. Então eu tenho legendas para autor e cabeçalho. Vamos começar com a legenda simples que eu tenho. E você pode criar esses tipos do zero. Ou se você já criou algumas legendas, vincula o layout como fizemos no curso anterior. Eu só vou usar essas classes e realmente vamos renomear esta legenda para que eles são o mesmo que o nome das classes. Então temos capturado e legenda bico e também autor legenda. Isto é um pouco diferente. Vamos selecionar o autor da legenda 40 e o cabeçalho 40 também. Então vamos ter todas as legendas aqui. Então, você pode coletar elementos para a página de guia de estilo ou você pode criá-los a partir do zero e aplicar alguns estilos. Agora vamos ter outro cabeçalho guia de estilo e vamos dar-lhe um nome de textos de alcance. Então último elemento que vamos ter no guia de estilo é alcançado. Próximo elemento que podemos estilizar muito diferente de todos os outros elementos. Página alcançada x é super importante para nós porque esta é a estrutura para o conteúdo do artigo. Então, teremos alcançado elementos de texto, alcançou x cães em todos os artigos do blog. O que é bastante exclusivo para o elemento rich text é que você pode pressionar Return dentro e você terá este pequeno ícone mais. E o mesmo vale para o editor para pessoas que acabam de ler artigos para o seu blog. E então você pode incorporar alguns elementos, criar um mínimo ambit, um vídeo ou uma imagem. Vamos clicar sobre a imagem e uma imagem dentro do elemento rich text, como você pode ver, ele tem algumas opções adicionais. Então podemos mudar a posição da imagem. Podemos ajustar mais algumas configurações. Por exemplo. Mova para a esquerda do texto ou para a direita. Ou podemos até ir mais longe para explorar algumas configurações básicas de tamanho e Link. Podemos verificar o tamanho da imagem, provavelmente precisa de alguma compressão, por exemplo, usando a imagem opt-in primeiro, então a posição está aqui. E além dessa posição padrão que tínhamos, também temos esse tamanho. Por exemplo, podemos usar o Tamanho Personalizado e configurá-lo para 30 por cento da largura da imagem original, assim. E podemos alterar os valores de porcentagem para pixels também. Também podemos adicionar o link e tudo está disponível a partir do editor. Então, para pessoas que apenas adicionam elementos à sua coleção CMS. Então muito legal, mas também todas as classes aqui, todas as classes rich text estão disponíveis para você ajustar e mudar. E você pode até mesmo criar essa estrutura aninhada de classes. Assim, por exemplo, estilo apenas os parágrafos que estão dentro do elemento rich text. Dessa forma, o conteúdo de seus artigos pode ser totalmente diferente em termos de estilo, mesmo que ele contenha os mesmos elementos, como parágrafos de toda a página. Então você tem uma legenda diferente aqui, você tem cabeçalhos diferentes, parágrafos diferentes. E para todo o elemento de texto de alcance, você pode dar-lhe um nome de classe, digamos artigo de bloco. E isso é como uma estrutura separada dentro de nossa estrutura definida de HTML. Então isso é como outro documento aninhado em um documento. Então, por exemplo, se você tem cabeçalhos H2 aqui e já determinamos esses blocos, esses empates para cabeçalhos H2 seriam herdados, ok? Mas aqui está a opção para aninhar este seletor de cabeçalho H2 dentro do artigo de bloco. Então, se você usar essa função, você tem todos os títulos H2 estilo diferente quando eles estão dentro artigo bloco. Assim, podemos ter tamanho de fonte diferente. Por exemplo, se alterarmos para 36, você verá que os títulos não foram alterados no documento principal. Mesmo que estejamos editando todos os títulos H2. Mas agora estamos alterando isso somente se ele estiver aninhado no elemento rich text. O mesmo que podemos fazer para parágrafos. Isso é como parágrafos. E, em seguida, quando aqueles são aninhados dentro do artigo bloco chegou textos, podemos mudar o estilo para parágrafos o mesmo que podemos fazer para figuras, para legendas, para imagens. E vamos selecionar todas as legendas de figura quando elas são aninhadas no artigo de bloco. Isso mudou ligeiramente a cor. Talvez vamos mudar o tamanho da fonte e o peso da fonte também. E tudo isso é independente da estrutura do documento que temos. E esse tipo de faz sentido porque o artigo em si é tipo de entidade diferente do nosso documento. Então, nós podemos querer estilizar, por exemplo, ou todas as imagens de forma diferente. Digamos que queremos adicionar um raio de borda apenas para as imagens que estão dentro de nossos artigos de blog. Então, dentro do elemento rich text e todas as outras imagens, embora estejamos usando tag HTML, permanecerá intacto e podemos modelá-los de forma diferente para a nossa interface do usuário, para a interface do usuário do site. Então é isso para a tipografia. Vejo você na próxima lição. 5. Trabalho com cores: Olá e bem-vindos à próxima lição. E neste, vamos falar sobre cores. Então aqui temos a seção NovaLink para cor em nosso guia de estilo. Esta pode ser uma versão simplificada do guia de estilo, um início de um sistema de design. E não consigo imaginar que faltam cores. Então agora vamos criar outro estilo, o título e guia de estilo, H livre, que possamos mudar a tipografia para cor e criar cores para texto para tipografia, bem como para fundo, como você sabe, e CSS. Temos propriedades separadas para cores de fundo acima e cores de texto. E esta é uma abordagem sobre como você pode alterar essas cores e defini-las no Webflow que você pode facilmente usá-las e reutilizar as classes que criarão mais tarde. Então aqui temos ações e para cor de fundo e texto, criei seções separadas. A coisa é criar um classes separadas para ambas as cores de fundo, bem como cores de texto. E nesta classe de cor de fundo, também definiremos a cor do texto que corresponda ao plano de fundo. Esta é a abordagem que eu costumo usar para guias de estilo simples e para os mais complicados, eu costumo ir com classes separadas para todas as cores diferentes, onde eu tenho fundos separados e cores de texto separadas. De qualquer forma, o que vou fazer agora é criar um bloco de cores. E isso é apenas para fins de estilo, para o guia de estilo em si, que nossa cor pareça agradável aqui e possa ser facilmente encontrada neste guia de azulejos. Além disso, eu gostaria de criar a seção que contenha tanto o nome da cor, a própria cor, sua cor de texto correspondente. Portanto, contraste de cores para o texto, bem como o valor hexadecimal. Então agora eu estou apenas criando este suporte lugar para cor. Eu dei a ele o nome do bloco de cores, essa é a classe. E tem algum raio de fronteira e fronteira. E eu vou adicionar dois livros didáticos para o lado esquerdo e direito. Eu fiz isso para ser flexbox, então eu posso facilmente distribuir aqueles com algum tipo de preenchimento para o lado esquerdo, eu vou adicionar o nome da cor. E para o lado direito, haverá o valor hexadecimal da cor. Então, quando alguém publica este guia de estilo e simplesmente navegá-lo na web, ele pode ser facilmente copiado, tanto com o hexadecimal quanto com o nome. Então este é o bloco de cores. Então, como eu disse, agora, o que queremos fazer é criar classes separadas que podemos aplicar em cima de qualquer coisa que deveria ser, eu deveria ter essa cor no fundo. Então vamos criar outra classe e isso seria, por exemplo, marca uma cor ou marca uma cor de fundo, bg. Mas se criarmos assim, será uma classe de combinação para o bloco de cores. Isso significa que para qualquer elemento específico que queremos aplicar esta classe, teríamos que primeiro definir a classe bloco de cores porque seria a marca 1 BG seria aninhada dentro deste bloco de cores como uma classe de combinação. Então, isso é algo que realmente não queremos. Vou apagar esta aula. Eu vou criar a marca 1 BG sem esta primeira classe. E agora posso mudar as cores. Então eu vou mudar a cor de fundo. Para a minha cor azul da meia-noite. Esta é uma cor de marca para mim. E também eu quero mudar a cor do texto para a cor correspondente que seria aplicada para os elementos que tem essa cor de fundo da marca 1 para que eu tenha cor de texto contrastante. Isso realmente não é necessariamente, você pode simplesmente pular a cor do texto e defini-lo separadamente como um separado, mas eu estou apenas simplificando aqui. E agora o que estou fazendo é excluir essa classe primeiro, aplicar essa classe de bloco de cores que criei para o raio de borda e coisas assim. E então eu posso aplicar isso como classe de combinação global para que eu possa usar a marca 1 BG em cima disso. Esta não é uma classe de combinação para livro de cores mais, então eu posso aplicá-lo para o que eu quiser e eu posso aplicá-lo em cima. Então esta é a maneira que eu vou estruturar as coisas no guia de estilo em termos de cor. E o mesmo que eu vou fazer para o texto. Então eu vou usar a marca um texto como o nome da classe para a minha marca uma cor. Agora eu posso mudar a cor para azul meia-noite para a minha marca uma cor. E para a convenção de nomes, esta é muito simples. Se você quiser criar algo mais sofisticado ou algo mais sistemático, provavelmente você quer começar com, por exemplo, C ou cor do que T ou texto e, em seguida, dar-lhe um nome, por exemplo, usar as cores da marca 14. Mas estamos criando um guia de estilo muito simples. Acho que está tudo bem por enquanto. E você vai apenas desenvolver seu próprio estilo em termos de nomear as classes e a convenção que você vai usar aqui. Então isso é bastante simples, eu acho, em termos de cor quando você está criando guia de estilo, eu costumo ir com dois conjuntos separados de cores, um para fundo e 14 textos. E eu crio classes separadas para que eu possa usar essas classes em qualquer lugar para fundo e texto. Agora, para esta classe, se você quiser criar marcas para BG, você deve primeiro excluir a classe e, em seguida, criar marca para BGN. Agora vou usar outra cor do layout que eu tenho. Vamos colá-lo no fundo. Esta é a cor azul claro. Na verdade, você não pode realmente vê-lo porque é da mesma cor que o plano de fundo desta página de destino. Mas esta é a nossa marca para colorir, bronze para fundo. E agora tudo que eu preciso fazer é apenas criar a cor de texto apropriada para este elemento em particular. Vou selecionar azul meia-noite e vou renomear isso em apenas um segundo para este relógio. Mas agora eu tenho essa estrutura para marca para BG. Eu tenho a cor do texto, bem como a cor do fundo. Então esta é uma abordagem para outra. Você pode apenas aplicar cor de fundo separadamente para a classe separada e pontuação de teste duas classes separadas. Agora, o que vou fazer é usar esta estrutura para criar mais quilohertz. Então primeiro eu vou excluir essa classe, criar bloco de cores e aplicar marca para BG. E então eu vou apenas copiar isso e criar mais variações de cores, combinações de cores para minhas cores. Isso vai ser a marca 3 4 fundos ou marca 3 BG. E novamente, eu teria que usar a cor de fundo, bem como a cor do texto aqui. E também quero mencionar as amostras. Então agora, deixe-me colar o valor hexadecimal para a terceira cor. E esta é esta cor verde clara. E não está presente neste empurrão ainda. Então eu preciso adicioná-lo porque eu quero que todas as minhas cores estejam presentes nessas águas para que eu possa usar uma classe mais tarde e aplicá-la como uma classe de fundo ou uma classe de cor de texto. Ou posso simplesmente selecioná-lo nas amostras. Então vamos dar um nome apropriado. Vai ser nome maiúsculo, letra maiúscula marca 3. E a propósito, vamos renomear nossas outras cores. Este azul meia-noite deve ser a nossa marca, 1, e a cor azul claro deve ser marca. Para que tenhamos cores mapeadas para as amostras, bem como tê-las em classes separadas. Esta é a solução mais versátil porque eu posso usar amostras ou eu posso usar classes. E uma vez que eu mudei a cor nesta amostra, então eu adicionei este relógio, ele irá mudá-lo automaticamente em todo o site porque o site inteiro está usando este relógio, mas em cima disso, esta classe é usando a amostra também, modo que a cor mudará de acordo. Agora posso criar mais aulas de textos. Assim, por exemplo, marcas para imposto ou marca de texto livre. E eu posso facilmente aplicar esta cor a partir de amostras. Não preciso copiar e colar os valores hexadecimais. Eu quero errar dessa maneira. Então, sempre mais fácil adicionar suas cores às amostras primeiro e, em seguida, talvez em cima disso, criar as classes apropriadas. Além disso, eu tenho o valor hexadecimal que é copiado para o lado direito. Então, quando eu publicar o guia de estilo, você pode facilmente copiar o valor hexadecimal. Agora, deixe-me acelerar as coisas, graças à magia do vídeo, eu realmente não tenho que desperdiçar seu tempo até que eu apenas copie e cole o mesmo e faça as mesmas operações para as outras cores. Então aqui temos sete cores diferentes. É realmente muito. Normalmente uso cores primárias e secundárias, então duas cores, talvez mais uma, mas adicionei uma paleta de cores que você pode ver como ela fica com valores hexadecimais apropriados. Também adicionei essas cores às minhas amostras no Webflow. E também em cima disso, eu tenho aviso de erro e aceito cores de estado. Então, na notificação do usuário, eu posso usar este aviso de cor, BG, BG. E depois temos aquelas aulas de texto. Temos cor aceitar mensagens de texto e erro. Então eu posso ficar consistente e adicionar essas cores a diferentes estados da minha aplicação, notificação diferente para o usuário. E esta é a paleta de cores base que você usará em seu projeto. E dependendo se você deseja criar uma palete extra para cores escuras e cores brancas e pretas. Você pode fazer isso aqui. Ou você pode apenas usar sua escala de cor cinza em amostras em vez deste tempo que Então geralmente eu adicionei ao guia de estilo e eu acabo com cinco entre 510 cores, variando de cor muito clara para cor muito escura. Pode ser preto ou branco e algumas rainhas. Ou pode ser apenas, você sabe, cor clara e cor escura e poucos no meio. Por isso, neste momento, estou a adicionar essas cores, bem como as minhas cores brancas e pretas apenas às Amostras. E às vezes faço assim. Às vezes eu criar classes separadas se eu quiser usá-los extensivamente em todo o meu site e adicioná-los ao guia de estilo também. Então é aqui que temos cores diferentes que podemos aplicar. Vamos redefinir este. E eu acho que nossa estrutura de cores está pronta agora. Temos tudo definido em amostras, bem como pelo menos as cores principais. Nós os colocamos em classes separadas. Temos esta cor preta escura, muito escura e muito branca, cor branca clara. E usá-lo para a nossa interface do usuário, talvez alguns fundos dos elementos porque esta é apenas a amostra. E basicamente isso é, isso é, eu queria te mostrar sobre. As cores são reducionistas, prontas no guia de estilo? E vamos prosseguir para a próxima lição. Obrigado. 6. Componentes: Tudo bem, então parece que na lição anterior, eu cometi um pequeno erro. Então eu tenho essa seção escalonada em que temos tipografia de cor e texto. Então eu preciso me livrar desse elemento, mudar o contêiner, criar e copiar toda a equipe na seção e jogar fora elementos desnecessários para que eu tenha dois elementos. E aqui está a seção de cores. Aqui temos a seção de tipografia. E tudo bem, isso é o que precisamos porque para esta seção precisamos dar um nome a ela. Não será topografia, mas cor aqui. E agora vamos vincular isso à seção específica. Precisamos ligá-lo à cor. E acho que estamos quase prontos para criar uma nova seção. Então vamos criar uma cópia disso. Exclua todos os elementos deste contêiner que queremos realmente precisa agora. E vamos criar outra seção, que será quatro componentes. Então vamos para a seção Padrão e para IB, indo para alterá-lo para componentes. E vamos rapidamente vinculá-lo em um link no menu. Isso vai ligar dois componentes. Aqui temos. Certo, então mudamos de nome. Temos este título 2 que colocará componentes dentro e teremos algumas informações sobre o que os componentes fazem em nossos lados. Então estes são alguns elementos básicos, blocos de construção para o nosso site, por exemplo, botões. Então vamos criar a primeira seção, quatro botões. E se formos para a nossa página inicial, vamos explorar o que temos aqui. Temos alguns botões lá dentro, temos algumas estruturas. E se selecionarmos o elemento, você pode realmente ver que este é um componente no Webflow. E há algumas razões para usar componentes na web embora. E às vezes você pode estar disposto a não usar componentes, mas ainda colocar algo no guia de estilo, mas apenas usar a classe. Portanto, para componentes, você tem todos esses campos de substituição que você pode habilitar para que o usuário altere, por exemplo, na exibição do editor. E você pode fazer substituições para as instâncias de componentes mestre. Então este é um conceito muito poderoso e eu expliquei em detalhes no curso básico. Mas, por outro lado, você pode pensar em componentes como algo que é reutilizável. E esses não precisam necessariamente ser componentes de barra de símbolo no Webflow. Porque se você der uma olhada nesta classe de bloco de recursos, é universal o suficiente para carregar informações sobre o fundo e todas as coisas que lhe permitirão criar este tipo de caixa, este tipo de cartão. Assim, você pode facilmente reutilizar este elemento com base apenas na classe. Portanto, cabe a você criar componentes ou apenas trabalhar com classes. Em última análise, se você quiser fazer algumas alterações em componentes fora do escopo das substituições que você criar. Você apenas desvincular o componente e, em seguida, aplicar alterações às classes. E ainda assim, se essas são alterações CSS, ele será aplicado em todo o site. Então o que eu estou dizendo é que você realmente não precisa pensar em termos de Webflow, de tudo ser um componente aqui, porque você pode facilmente usar classes. E lembre-se de que as classes que são usadas em toda a estrutura do documento serão alteradas de acordo ou em cada uma de suas páginas. Lembre-se de que você sempre pode adicionar o componente no topo de uma classe. Em seguida, você tem o poder dos componentes para que você possa criar substituições, bem como você pode aninhar outros componentes dentro deste componente. E também você pode usar esses componentes menu para inserir os componentes. Então, se você ir para dois componentes, ele tem um ícone separado no menu agora no Webflow. Mas se você for para componentes, você pode simplesmente clicar no componente e ele será automaticamente colocado em seu layout. No entanto, se você quiser copiar e colar elementos que são baseados apenas em classes, você terá que encontrar este elemento, por exemplo, este botão, e então você terá que comandar C, copiá-lo e, em seguida, baseá-lo na página que você deseja usá-lo, para exemplo aqui. Portanto, há muitas vantagens diferentes de usar componentes. Mas há uma desvantagem se você quiser editá-lo além das substituições, você teria que desvinculá-lo primeiro. Mas isso é, eu acho que a única desvantagem e você pode facilmente sair com isso. Então aqui temos botões diferentes e agora vou criar outra seção. E, em seguida, esta seção, Vamos talvez usar esse recurso e blocos e copiar e colar todos os blocos que temos na página inicial. Acho que também podem ser elementos reutilizáveis. Antes de copiar e colar esses elementos, Vamos para bloco de recursos e vamos criar um diblock dentro modo que aqueles podem ser ordenadamente organizados, como cores. Vamos dar-lhe um wrapper componente de classe. E este invólucro componente em breve receberá alguns preenchimentos ou marcações. Mas agora podemos copiar e colar todos os blocos de recursos que temos em nossa página inicial ou apenas um blog de recursos porque é muito semelhante, mas eu vou apenas copiar e colar todos eles. E para que tenhamos este invólucro componente, agora podemos facilmente distribuir o tamanho e as margens são preenchimentos entre esses elementos, faz blocos de recursos, e podemos usar este componente, consulte todos os nossos componentes também. Então aqui podemos aplicar alguma margem para esta classe, mas também podemos criar a estrutura para nossos botões que é praticamente a mesma. Então vamos dar uma olhada aqui e usar o componente classe propriamente dito. E então vamos colocar um botão dentro dele. Ou vou copiar e colar. Podemos simplesmente usar o designer para pegar o fundo. Vou apagar este e colocá-lo em seu próprio invólucro de componentes. Portanto, esta estrutura é mais legível agora e quando publicarmos o guia de estilo, será mais fácil navegar através desses elementos. E também podemos fazê-lo com texto, se você quiser. Cores, muito bonitas. Assim como o início do nosso guia de estilo, ele acabará por crescer em tamanho, mas por enquanto, vamos copiar e colar outra seção. Vamos criar aquele que conterá itens FAQ. E esta é outra coisa que podemos reutilizar a partir da nossa página inicial. Eu acho que os itens FAQ são um bom candidato para ir ao Guia de Estilo porque aqueles estão com alguma animação legal e eles revelam alguns textos. Talvez usemos esta estrutura em outras páginas. Então vamos copiar e colar este elemento no guia de estilo. Enquanto isso, vale a pena notar que nesta seção de componentes, tentei usar o design atômico. Tentei copiar e colar átomos e moléculas. Eu não uso toda a estrutura aqui, como layouts, porque isso é demais para componentes. Então, se voltarmos para a página inicial e temos estruturas que são como rodapé ou menu. Queremos necessariamente copiar e colar todo o menu em componentes, irá criar uma seção separada. Mas a partir deste menu podemos, obviamente, criar algumas partes, alguns pedaços, alguns átomos e moléculas, tais como links quebrados ou de navegação, que possamos tê-los em nossa seção de componentes. Aqui eu tenho o símbolo, o blog sub menu que eu criei no curso anterior. E eu acho que é um ótimo candidato para colocá-lo nesta seção de componentes. Esta é uma molécula que funciona como um sub muitos itens. Então vamos criar outro H3 para este bloco muitos. E vamos colar o sol muitos bloquear aqui a partir de símbolos que eu posso simplesmente clicar duas vezes e, e usá-lo lá dentro. Então, o que eu quero dizer com isso, como eu tentei dividir todo o layout ou seções de componentes que eu posso usar para criar essas seções. Você pode usar diferentes bits e peças como componentes, especialmente elementos formados e todas as outras coisas que você usará como átomos ou moléculas em seu site. Mas não vou adicioná-los agora. Eu vou criar outro elemento seções naqueles. Eu os nomeei seções, mas esses são layouts, na verdade, as estruturas que contêm um monte de diferentes átomos ou moléculas ligadas entre si e eles criam toda a navegação do menu, talvez rodapé ou um herói elementos em nossa página. E também funcionou para criar em nosso guia de estilo um lugar separado para esses esquemas para esses layouts. Temos esta seção de layout aqui no Webflow. Esses são layouts predefinidos. E como você pode ver, isso contém algumas imagens, cartões e talvez títulos. Então, alguns átomos e moléculas reunidos para formar a seção. Para que possamos ter essas seções à mão. Podemos criar componentes fora das seções e, em seguida, reutilizá-los para nossos propósitos. Especialmente se você estiver criando algo que é um guia de estilo um pouco mais elaborado. Então, algum tipo de sistema de design. Essas seções são muito, muito importantes porque você provavelmente usará este sistema de design para diferentes aplicativos e sites que você criará. E então você pode reutilizar as seções de um projeto para outro. Deixe-me usar a seção de cabeçalho que temos aqui e colocá-lo lá. Então, seção de cabeçalho é um bom candidato para ir lá. Além disso, vamos criar outra seção. Basta duplicar o que tínhamos e ter esta seção de cabeçalho e rodapé aqui. Assim, os elementos de bloco grandes, como navbar e rodapé, devem ir lá. E isso é especialmente útil se você pensar nisso como um componente e, em seguida, talvez aninhar outro componente dentro do cabeçalho e rodapé. E agora Webflow é capaz de fazer isso. Assim, você pode aninhar componente logotipo no cabeçalho e rodapé. E, em seguida, se você quiser alterar o logotipo para todo o site, se você estiver aplicando alterações de marca e você precisa substituí-lo. E esses componentes aninhados podem realmente ajudá-lo a realizar isso em todo o escopo de todos os elementos que contêm os elementos do logotipo. Então vamos agora copiar e colar o rodapé em nosso guia de estilo. E às vezes você obtém a informação de que os elementos de seção não podem ser aninhados dentro um do outro. Vamos clicar no elemento corpo e agora Command V para colar o rodapé. Agora temos ambos cabeçalho e rodapé, tanto elemento de navegação e rodapé no lugar em nossas seções. E isso é realmente útil para tê-los no guia de estilo, bem como alguns outros layouts que você pode usar. Então, o início do nosso guia de estilo está pronto e estilete, É algo que deve evoluir com o seu projeto, com seus sites. Ele eventualmente pode se tornar um sistema de design. Mas a menos que você já tenha um sistema de design no lugar que você deseja transferi-lo para o Webflow. Você realmente não deve gastar muito tempo pensando em diferentes opções de tipografia e cores que você pode adicionar mais tarde, é melhor ter alguns layouts já e, em seguida, adicionar elementos ao guia de estilo em movimento. Como você pode ver, alguém pode visualizar todas as interações e animações no guia de estilo na página de guia de estilo, ele pode copiar e colar valores hexadecimais de cores, visualizado essa topografia. Então este é um ótimo lugar para conferir o estilo do seu site, mas também esta é a única fonte de verdade para todos os elementos da página. Então, se você quiser alterar a tipografia, basta ir ao guia de estilo, mudar cabeçalhos e eles mudarão ao longo de toda a página. O mesmo acontece com os componentes. Você pode editar componentes a partir daí e eles serão atualizados de acordo em toda a página. Infelizmente, isso é apenas para um projeto. Então, se você quiser criar várias páginas ou páginas de destino com base no guia de estilo, o que você teria que fazer é apenas duplicar este projeto uma e outra vez, em seguida, excluir as páginas que você não usa um guia de estilo steve, ou apenas criar um projeto com guia de estilo como base e duplicá-lo. E então você pode começar a partir daí e criar algumas outras páginas. Isso não é realmente conveniente se você quiser mudar a tipografia em todos os projetos ou talvez logotipo porque você teria que ir para cada um deles individual. Mas espero que o Webflow venha algum dia com uma solução que nos permitirá ter este sistema de design link para todo o projeto. Então fique de olho nisso. E em termos da seção de guia de estilo, eu acho que é praticamente isso. Também uma opção que vale a pena notar como a capacidade de compartilhar este projeto. Você pode convidar colaboradores. Então, se você está trabalhando em um guia de estilo ou um sistema de design com seus companheiros de equipe, é realmente útil porque quando você tem um plano de equipe para Webflow, você pode convidá-los e você pode trabalhar completamente. E também você tem a capacidade de compartilhar o projeto com link somente leitura para que alguém possa visualizar todas as camadas e coisas que você tem no documento. Basta copiar este link criado e enviá-lo para qualquer pessoa. Você quer ser capaz de verificá-lo no designer, mas não ser capaz de editá-lo. Então isso é praticamente para criar a estrutura de guia de estilo. E esta é apenas uma abordagem. É muito simples se você quiser ver alguma participação mais sofisticada e avançada no guia de estilo e sistemas de design. Por favor, verifique o sistema flow.com. Lá você vai encontrar tutoriais, bem como framework ready-made para Webflow que você pode usar para criar e trabalhar em um sistema de design que é realmente, muito extenso. Por enquanto, lembre-se dessas opções de compartilhamento e estamos prontos para as próximas lições porque acabamos de criar nosso primeiro guia de estilo. Obrigado pela atenção e vejo você na próxima lição. 7. Visão geral do projeto: Olá pessoal e bem-vindos à primeira lição deste curso. Estou super entusiasmada por te ter aqui. E este é o curso avançado sobre Webflow, que significa que não vamos lidar com layout e estilo tanto. Vou mostrar-lhe alguns recursos mais avançados do Webflow, bem como criar a estrutura para o nosso site, por exemplo, com CMS, bem como criar um guia de estilo simples. E o que você está olhando agora é um site que criamos no curso básico. Então, se você quiser criar uma página de destino, um site como este, vá em frente e verifique o curso básico e então você aprende tudo sobre a estrutura HTML e o layout. O que vamos fazer neste curso, pode ser uma espécie de continuação e vamos usar o CMS para criar uma estrutura de blogs para este site, para expandir este site e criar um bloco em cima disso. Por enquanto, temos uma estrutura simples aqui. Este é um site de uma página com cabeçalhos simples e algumas seções que criamos. E também a primeira coisa que eu vou mostrar a vocês na lição a seguir é como criar um guia de estilo que basicamente nos deixaria trabalhar um pouco mais fácil no Webflow e criar todas as outras páginas em nenhum momento. Quero dizer, usando, reutilizando os elementos que já criamos. Então deixe-me também mudar rapidamente para a estrutura que eu preparei para as seguintes páginas que vamos criar isso como uma simples maquete de um blog que vamos criar. Eu não me senti nas fotos porque nós vamos usar um para CMS, a fim de sentir todos os elementos do banco aqui e carregar as fotos. Esse é o layout que criei no Adobe XD. Você pode encontrar este arquivo nos arquivos fonte deste curso. O que temos aqui é a página inicial simples para o blog. Você verá que temos logo e menu simples no topo com algumas categorias que vamos criar. E então temos essa seção de herói com artigo em destaque. E todos os dados que serão exibidos virão do CMS. Então temos essa tag de recurso e também temos o cabeçalho, o nome do artigo, o trecho, bem como vinculado a este artigo e ao lado direito. Também temos uma foto que vamos carregar dinamicamente do CMS. Abaixo que irá criar algumas seções que também irá conter nossos dados do CMS. E isso mostraria artigos recentes. E então temos também software. Então, basicamente, tudo isso vem de nossas categorias e nós vamos apenas exibir os artigos mais recentes dentro da categoria. Também temos um marcado como destaque para alguns dos elementos. E você pode ver que esta é uma estrutura muito simples onde temos basicamente alguns dados do CMS. Assim, uma imagem 40 para o artigo, bem como o título aqui é o trecho. E também temos as informações sobre o autor , bem como a categoria a que este post pertence. Esta categoria também é exibida na forma da conta, a pequena bolha na parte superior da miniatura. E é basicamente isso para a página inicial. É super simples, mas nos permitirá usar todos os conceitos diferentes do CMS. Então temos outra página, essa é a página da categoria. E é super legal é que Webflow está realmente gerando essas páginas de categoria para nós automaticamente e preenchendo com os dados desta categoria. Então, todos os posts que estão na categoria, nós também vamos adicionar esta pequena bandeira em destaque para o post para que possamos reordená-los. E por último, o ponto da página apresenta um único post em nosso blog com a data, o autor, bem como a categoria e o título. Aqui temos o observado e o conteúdo do post para o lado direito, também temos algum formulário de inscrição simples de boletim informativo, bem como compartilhamento de mídia social. Então, isso é tudo muito simples, mas eu acho que é uma estrutura muito arrumada que nos permitirá explorar CMS em Webflow, bem como algumas outras coisas. Então, basicamente aqui podemos exibir facilmente diferentes posts que estão na mesma categoria que estávamos lendo para que quando alguém terminar de ler ele possa ir para outro material e outro artigo que possa ser Interessante. Mas sim, então essas são páginas livres que irão explorar, criar a partir do zero e você CMS para alimentá-lo com os dados, bem como criar a página do editor para quem vai adicionar o conteúdo ao nosso blog para que esta pessoa possa facilmente adicionar novos posts diretamente do navegador. E eu vou mostrar a vocês o editor também. O que vamos fazer no Webflow é começar com este projeto existente que temos, mas é super simples. Mais uma vez, eu recomendo que você confira o curso básico se você quiser ver como eu fiz este projeto. Mas o que é importante neste projeto é que há uma página de guia de estilo que começamos a criar. Então aqui temos um simples blog SAP muitos que criamos. E eu fiz isso só para mostrar a vocês como criar componentes. Mas agora vamos trabalhar nesta página de guia de estilo porque é, nosso site vai ter mais e mais páginas. É muito mais fácil organizar algum tipo de um estruturado com componentes para que você possa reutilizar os elementos que você já criou e eles permaneçam consistentes ao longo de toda a página, assim como é super fácil usá-los arrastar e soltar nas outras páginas, neste caso as páginas do blog que vamos criar. Então esta é a estrutura da qual vamos começar. Além disso, você encontrará o link para esta estrutura para o seu, em seus arquivos fonte para este curso. Então você pode começar duplicando este projeto. E vamos abordar o guia de estilo e criar algum tipo de guia de estilo. Ou talvez o início de um sistema de design na próxima lição. E então vamos criar uma estrutura para o banco de dados, a estrutura CMS que irá abastecer nosso cara com os dados, bem como mais tarde vamos explorar algumas integrações, talvez algumas ferramentas sem código e Zapier, eu vou mostram como expandir este site e adicionar algumas funcionalidades extras no topo da web para esses recursos avançados. Espero que você esteja feliz com o que vai acontecer na próxima lição. Então vamos direto ao assunto. Vejo-te no próximo. 8. Primeira: Bem-vindos à próxima lição. E neste vamos criar uma configuração de coleção para o nosso CMS no Webflow. Isso é super importante e que irá definir a estrutura de dados para nosso blog e as relações entre os elementos no bloco. Então pense nisso como um banco de dados porque este é realmente um banco de dados que será executado nesses servidores. E este banco de dados irá conter diferentes tipos de dados e podemos criar os links entre os elementos que irá criar. Então, por exemplo, indo para criar categorias e, em seguida, postagens de blog e autores e nós obtemos o link deles juntos. Se acontecer de você trabalhar com algum tipo de banco de dados, se isso foi MySQL ou banco de dados SQL, ou mesmo com planilhas simples em Excel ou Google Sheets ou talvez mesa aérea. Esta será uma espécie de estrutura semelhante. Então o que vamos fazer é a primeira carreira, criar nossa primeira coleção de CMS. E aqui você tem alguns modelos de coleção. Assim, por exemplo, você pode selecionar entre categorias e projetos e clientes. Mas em vez disso, deixe-me criar a coleção do zero. Então o que temos que definir aqui é o nome da coleção. Isso é muito importante porque ele vai nos deixar saber que tipo de dados está na coleção. Mas também irá criar automaticamente os URLs para a nossa página web com o nome desta coleção particular. Vou mostrar-te como funciona se começares com nomes de categoria. Então o que vamos fazer aqui é criar categorias. E eu estou usando o plural de propósito porque isso seria todas as nossas categorias. E a versão singular é criada pelo Webflow automaticamente, você pode editá-las se algo der errado e não estiver gramaticalmente correto. Mas o plural é categorias, e o singular é categoria. E vamos falar dessa coleção dessa maneira. Então vamos ter todas as categorias na coleção e a entrada única seria categoria. Então agora o URL da coleção é gerado automaticamente e este é o nome da pasta que suas páginas de categoria serão armazenadas no servidor. Então, se você der uma olhada na estrutura de URL, aqui você tem o nome das categorias e, em seguida, será uma página de categoria que será criada automaticamente pelo Webflow. Você pode alterar esse nome. Você pode alterar o URL da coleção independentemente do nome da sua coleção. Por exemplo, se você quiser tê-lo como meu website.com barra blog. Mas vamos ficar com as categorias. Acho que está tudo bem. Então, teremos todas as páginas de coleção geradas automaticamente sob categorias e, em seguida, categorias de página de categoria para blocos são bastante comuns. Queremos criar como seções diferentes para o nosso blog. Diferentes temas que contêm, por exemplo, tecnologia ou marketing ou artigos blockchain. E então vamos criar outra coleção CMS com postagens de blog reais. E vamos vincular essas categorias a postagens de blog. Mas eu vou te mostrar como fazer isso mais tarde. Mas quando você definiu uma nova coleção CMS, você tem que definir os campos de coleção também. Esses dois campos, informações básicas são, por padrão, adicionados pelo Webflow. Então isso é nome e escória. Esses são necessários. Você pode sentar um pouco de asteriscos ao lado do nome. E, como você pode ver, essa folga aqui é necessária para criar uma URL única que levará à sua categoria. Por exemplo, o marketing de barra de categoria mostrará todas as postagens de marketing. Então vamos editar esta informação básica primeiro, vou clicar neste pequeno ícone à direita e podemos criar o nome do rótulo aqui e também alguns textos de ajuda. E isto. Apareça para nossos colaboradores e as coleções CMS. Mas também podemos criar e adicionar campos personalizados a esta categoria. Então imagine ter uma planilha e na linha temos essa coleção com o nome, mas então podemos ter colunas diferentes com campos diferentes, por exemplo, texto e imagens e vídeos. Então o que temos é a capacidade de adicionar alguns campos personalizados à categoria. Por exemplo, queremos que esta categoria tenha uma imagem ou uma cor específica, ou talvez um link. Nós podemos fazer isso. Podemos definir o tipo do campo personalizado que irá criar. E neste caso particular, eu quero criar outro campo de texto simples porque eu quero adicionar uma descrição à nossa categoria. Portanto, este campo não é obrigatório. Eu vou deixar esta caixa de seleção em branco e eu vou dar-lhe um rótulo, um nome para esta categoria que seria descrição. E você pode selecionar uma única linha ou multilinha se isso deve ser texto longo, você pode defini-lo como multilinha. E, em seguida, no editor, o campo de texto seria um pouco maior. E também você pode ter essa contagem máxima e mínima de caracteres, e é isso. Então eu criei outro campo personalizado. Você pode criar até 30 campos para cada coleção. E então você tem esses campos extras básicos com nome e folga. Além disso, você tem três campos que são gerados automaticamente pelo Webflow. Esta é a data de saudação, data, editada e publicada, e essas serão adicionadas automaticamente. Você pode excluir a coleção. Para excluir a coleção, primeiro você terá que se certificar de que nenhuma instância desta coleção está no designer, mas vamos explorar isso mais tarde. Por enquanto temos a nossa simples coleção CMS com três campos. Eu vou criá-lo. E o Webflow permitirá que você gere alguns dados fictícios, mas não queremos fazê-lo por enquanto. Então vamos apenas criar uma nova barra de categoria por nós mesmos. E vamos dar-lhe um nome. A primeira categoria para o nosso livro seria Blockchain. Vamos colá-lo lá dentro. E esse atraso está sendo gerado automaticamente com letras maiúsculas transformadas em minúsculas. E também se você adicionar alguns caracteres especiais, por exemplo, barra de espaço. Se você pressionar lá no nome, verá que isso resulta em fluxo de Webflow transformá-lo em um traço. E isso ocorre porque ele cria o URL para essa categoria específica e a página de categoria com base no escória que você pode modificar de forma independente. Agora vamos pagar algo no campo de descrição e vamos criá-lo. Mas antes de fazer isso, você pode clicar nesta pequena seta e salvar isso como um rascunho para que você possa criar categorias diferentes, mas se você não quiser publicá-lo ainda em seu site, você pode criar rascunhos. Mas mesmo que você tenha criado agora, ele não é publicado automaticamente. Portanto, as alterações são visíveis no site do seu editor. Em vez disso, tem esta neblina especial, é um status especial. E agora é uma laranja. Diz que foi encenado para publicação. O que isso significa? Bem, se você publicar seu site no subdomínio Webflow ou no seu próprio domínio, essas alterações e coleções CMS serão publicadas todas juntas. Assim, você pode deixá-los como rascunhos se não quiser publicá-los ou prepará-los para publicação. Além disso, você exportou botões importantes. Esses são realmente úteis se você quiser criar um monte de entradas. Por exemplo, agora você pode exportar o arquivo CSV para que você possa ver a estrutura. Em seguida, você pode criar algumas outras entradas e depois, salvar o arquivo e importá-lo. Então você não tem a ver com se essas UI. Além disso, você pode migrar arquivos, migrar dados de outros sistemas, como Shopify ou algumas outras postagens de blog do WordPress ou o que você tem. Então, se você for para, se você selecionar a primeira coluna no Excel, vá para Dados e, em seguida, vá para converter texto em colunas. Você pode configurá-lo para ser delimitado. O delimitador é uma vírgula. Então vamos terminá-lo agora e você pode ver que temos todos os dados em diferentes colunas. Por isso, é fácil adicionar mais categorias aqui e, em seguida, salvá-lo como arquivo CSV. E, em seguida, novamente, ir para o fluxo da web e podemos importar isso completamente. Mas para o nosso propósito específico, nós realmente não precisamos fazer isso porque nós temos apenas algumas coleções para criar. Então vamos criar outras categorias são algumas categorias de coleções. Todos eles vão para a mesma coleção CMS. E aqui está o segundo, móvel. Vamos em frente e criá-lo. By the way, se você cometeu um erro, basta ir para selecionar. Você pode selecionar o que você criou. E agora você pode excluí-lo ou você pode alterar seu status em rascunho para que ele não seja preparado para publicação. Ele não vai ser publicado a menos que você acabou de declarar e site editor. Agora esse credo, mais uma categoria, e isso é marketing. Eu só vou copiar e colar a mesma descrição por enquanto. Então temos algo aqui. E o último, a última categoria irá criar para o nosso bloco será software com artigos sobre desenvolvimento de software provavelmente. Vamos criá-lo, e é assim que parece. Agora, o que queremos criar na próxima lição é a outra estrutura além da categoria. Então vamos fechá-los completamente agora. E vejo-te na próxima lição. 9. Configuração de coleção: Olá pessoal e bem-vindos à próxima lição. Neste, gostaria de mostrar-lhe como criar todas as coleções para o nosso CMS e Webflow. Então vamos criar a coleção de artigos e os autores e todos os diferentes que nos ajudarão a estruturar dados dinâmicos em nossa página web. No entanto, se você está apenas seguindo ao longo dos vídeos, eu acho que você pode achar um pouco difícil de entender por que exatamente eu vim com tais convenções de nomenclatura e propriedades e por que eu estou criando essas estruturas? Eu acho que se você apenas seguir adiante, pode ser um pouco difícil, mas se você tentar fazer com você mesmo e basicamente envolver sua cabeça em torno da idéia de criar um blog e sua estrutura. Acho que isto vai ser bastante óbvio. Bem, em primeiro lugar, tentou definir o ponto de partida no menor pedaço de dados dinâmicos. Mas você quer ter, por exemplo, neste post, nós temos todos os dados diferentes aqui e tudo tem que ser dinâmico. Assim, o título, bem como o conteúdo da postagem do blog é essa dinâmica. Então temos esta imagem, bem como algum conteúdo estático para o lado direito. Então, a partir daqui vamos pensar em quais elementos devem definir nosso artigo que deve ser fotografado e título e autor, e também o conteúdo e talvez algumas tags. E também temos algo que é chamado de destaque aqui. Então este TikTok no lado esquerdo da imagem apenas nos diz que também queremos apresentar algumas das postagens do blog, pelo menos. E este é um ótimo exemplo de como podemos pensar em criar essa estrutura em destaque. Então, se você pegar este pequeno elemento em destaque e nós também teremos tags aqui. Então, por exemplo, aqui temos design e desenvolvimento e tipografia, e também temos categorias diferentes. Então temos que pensar como criá-lo no CMS para que realmente faça sentido. Então recurso é basicamente sim, não. Então isso pertence ao artigo. Isto é verdade, declaração falsa. E isso poderia ser um campo simples que nós vamos apenas mudar no artigo para dizer que ele está em destaque. Mais tarde, podemos decidir que este artigo que é apresentado irá, por exemplo, mostrar na página principal. Então nós temos tags, e então nós também precisamos decidir se queremos criar tags dentro de nossos artigos, postagens de blog, ou queremos criar uma coleção separada para tags como tipografia de design, , e assim por diante. E esta é uma decisão importante em termos de CMS porque ou nós dividi-lo em coleções diferentes ou nós apenas criamos uma coleção e nós vamos adicionar este imposto, por exemplo, em um campo de texto e talvez separá-los com um ponto-e-vírgula ou coma ou o que seja. Mas neste caso, para o imposto, pelo menos eu acho que seria melhor ter uma estrutura separada para o imposto, especialmente que eu quero criar cores diferentes para cada um deles. Então eu quero guia Design para, digamos ter cor azul e, em seguida, desenvolvimento terá cor verde. Então isso significa que eu tenho que pensar em usar duas propriedades diferentes. Então, dois campos diferentes, um para o texto de conteúdo real e o segundo para a cor. Então, neste caso particular, seria melhor criar uma coleção separada com tags. E, em seguida, cada pilha terá o nome e a cor, para que eu não tenha que lembrar todos os valores hexadecimais de cor para cada post que eu criar. Eu apenas vinculo este item de coleção específico para a segunda coleção, a coleção do artigo. Então, o que o Webflow nos permite fazer é criar coleções diferentes, que você pode pensar como, digamos, planilhas do Excel. Portanto, temos diferentes planilhas para artigos e tags e para autores. E então você pode conectá-los. É tipo de se você estiver usando Airtable, você pode vincular diferentes folhas e registros diferentes. E esta é uma ideia parecida. Você será capaz de vincular o imposto dois artigos. E, em seguida, ao criar um artigo específico, basta vincular a tag específica ou imposto com campos especiais, eles são chamados de referência ou campo de referência múltipla em Webflow, CMS. Então vamos explorá-lo em um segundo. Vou mostrar-lhe como definir a estrutura para o corpo do nosso blog. E este é realmente importante conceito que você executa antes realmente começar a desenvolver seu site com Webflow, o que você faz é você apenas rolar seu layout e pensar em diferentes conexões, bem como a estrutura do CMS. Então primeiro você pensa o que deve ser estático e o que deve ser dinâmico. Por exemplo, os itens de menu, marketing de software, celular e blockchain. Você pode criar um menu estático, direito, como este. Mas, em seguida, se você tê-lo no CMS como categorias, você pode vincular essas categorias a postagens de blog e, em seguida, você pode exibir automaticamente esses elementos no menu para que quando você alterar algo ou talvez você adicionar outra categoria, ele será atualizado automaticamente. E então você também começa a pensar sobre as relações entre diferentes coleções. Então, por exemplo, para autores, devo criar uma coleção separada se há apenas um autor aqui e há apenas um nome deste autor. Talvez deva ser o elemento que campo nas coleções de artigos. Mas pensando à prova de futuro, acho que devemos criar uma coleção com autores para que possamos adicionar uma foto ou uma biografia. E então nossos clientes querem criar, digamos uma página separada com o ar livre. Seremos capazes de fazê-lo com esta coleção específica. E mesmo que você ache difícil envolver sua cabeça em torno da equipe de coleta e todos esses dados estão pensando, eu acho que é apenas uma questão de começar e criar algumas coleções porque você sempre pode ajustá-las mais tarde. Então vamos em frente e abrir nosso CMS no Webflow e criar outra coleção. Temos 14 categorias. E agora vamos criar coleção com tags. Eu sinto que o imposto deve ter coleção separada porque eles têm cores e nomes separados. Então o novo nome da coleção seria imposto no plural, e nós também temos a versão singular. E na URL, acho que vou ficar com a tag. Singular. O imposto é meio estranho. Vamos ter este contribuinte é uma página de tag única e que será gerado automaticamente com Webflow. Vou mostrar-lhe como essas páginas funcionam em um segundo, mas você só precisa do URL da coleção para tributar ou, ou renomeá-lo e o nome básico da informação e folga, vamos deixá-lo, mas vamos adicionar mais um campo personalizado e que será cor. Então, além do nome, também teremos essa cor personalizada aplicada a cada tag que vamos criar. Por exemplo, tag de topografia ou talvez Designer. Tudo o que queremos criar como uma tag. E isso vai ser cor da dobra, e eu preciso que este campo seja obrigatório. Vamos salvar este campo. Isso é tudo para a nossa primeira, segunda coleção. Vamos criar esta coleção. E novamente, podemos iniciar isso com dados. Eu vou ignorá-lo por enquanto e apenas criar algumas tags simples que eu já tenho uma área de transferência junto com suas cores. Então temos desenvolvimento. E então vamos criar outro que será projetado. E se você criar campos personalizados com tipos de dados específicos, como cor aqui, você pode clicar neste pequeno ícone, ícone soltar e, em seguida, você pode selecionar a cor. Neste caso, eu tenho a cor do meu design. E para o último que eu vou criar, vamos dar-lhe um nome, topografia e discurso tipográfico. Vamos talvez selecionar a cor deste seletor de cores e selecionar esse tipo de cor vermelha laranja, salvá-lo, e é isso para minha segunda estrutura. Portanto, temos categorias agora e também temos impostos. Vamos criar outra coleção CMS. E desta vez vamos criar autores e usar esse conjunto de dados predefinidos do Webflow. Se você clicar em autores, verá que o nome da coleção está correto. Em seguida, temos o URL da coleção e as páginas específicas que serão geradas têm este prefixo autor. E também temos, além de informações básicas, alguns campos personalizados, como biografia e resumo, imagem e e-mail. Claro, podemos selecionar qualquer um desses campos e podemos alterá-lo de uma única linha para multilinha e podemos mudar para que os campos sejam obrigatórios por padrão, todos eles são opcionais. Nós também temos algum link de perfil do Twitter e perfil do Facebook. Você pode mudá-lo, você pode excluir aqueles que você realmente não precisa, mas eu vou apenas ficar com os gerados automaticamente. E para o lado direito você também tem a visualização do editor, que meio que dá a você uma noção de como esses campos são. Vamos criar esta coleção. Vamos iniciar esta coleta com dados para que eu não tenha que procurar algum Lorem Ipsum e colá-lo lá dentro. Vou adicionar cinco itens no início. E Webflow cuidará de gerar nomes diferentes para minha autorização, bem como seus resumos biográficos e biográficos. E nós também temos uma imagem e imagem neste muito inteligente e Webflow porque você tem essa foto com uma pessoa realmente para os outros. Isso pode ser apenas uma coincidência, mas aqui está. E também um endereço de e-mail, obviamente alguns links de perfil de dados imaginários e para Facebook e Twitter. Mas aqui estão eles. E agora podemos usar esses dados para projetar e mostrar o que criamos. Outra coleção que vou criar, esta postagem do blog, esta é a mais importante. Você pode usar a estrutura pronta, mas eu vou criá-la a partir do zero. Isso pode ser postagens de blog ou artigos. Você pode nomeá-lo como quiser. Eu acho que esse URL de coleção é meio estranho. Posts no blog, talvez vamos ter artigos aqui ou simplesmente deixar o blog e tudo bem. Agora vamos dar uma olhada nos campos personalizados. Esta é a parte mais importante. Nós vamos definir um monte de campos personalizados diferentes para os artigos. Mas vamos primeiro consultar o layout. Esta é a fonte de inspiração para o que realmente vamos usar aqui. E nós temos essa imagem, este é um retângulo e nós vamos adicionar outro, também outro formato, formatos de imagem para o Instagram. By the way, podemos ter este campo multi imagem e campo multi imagem é capaz de aceitar até 25 imagens em um único campo da coleção para que mais tarde você pode usá-lo em uma lightbox. Por exemplo, se você tiver fotos de um produto para o seu site de comércio eletrônico, mas vamos usar apenas imagem. Esta seria uma única imagem, mas vamos criar dois campos como este. O primeiro seria um retângulo. Então, com a proporção, uma para uma imagem um para um. E, em seguida, o segundo, que seria o que é exibido no XD, que é 16 por nove. E você também pode adicionar algum texto de ajuda. Então, por exemplo, se você preferir, digamos 1600 vezes 900. Isso também é exibido no editor anterior dever. Qualquer pessoa que gerencie seu site saberá qual é a resolução preferida das imagens. E também vou marcar este campo como necessário, pois esta é a imagem será usada nas miniaturas, bem como no post. Vamos salvar este campo. E o próximo campo seria um trecho. Então trecho é em lugares diferentes. Então, por exemplo, em nosso artigo é esta parte no topo. Nós também temos abaixo são as miniaturas. E se isso for destaque, também temos linhas livres do trecho visível na página inicial. Então, vamos criar outro campo de texto sem formatação, mas vamos ter certeza de que é uma linha múltipla. E precisamos de três linhas deste texto. Portanto, é melhor consultar o layout quanto tempo exatamente esse texto deve ser para caber neste modelo de linha livre. Então eu vou ter entre cento e cento e sessenta caracteres. E isso também é necessário para o rótulo que vamos usar trecho e vamos salvar este campo. Agora, o campo mais importante para o artigo, que seria o conteúdo dos artigos. E não vamos usar textos simples com multi-linha porque aqui temos apenas um texto simples. No entanto, nos posts do blog também podemos adicionar alguns vídeos e talvez queiramos adicionar algumas imagens. É por isso que vamos usar rich text. E esse é o campo que nos permitirá ter a estrutura com cabeçalhos e parágrafos e imagens e conteúdo incorporado. E também para pessoas que gerenciam nosso conteúdo no editor. Eles vão ter bom WordPress como editor para estes campos de texto rico. By the way, você pode ter uma contagem mínima de caracteres, mas eu vou apenas deixá-lo em branco, mas este campo é obviamente obrigatório. Precisamos de algum conteúdo para um IPO, posts de blog e o artigo. E esta é a estrutura base. Então, pelo menos, esta é a maioria das coisas que veremos aqui. Mas também temos alguns artigos que podem ser um marcado como destaque. Este é um campo simples que vamos usar aqui. E vamos usar switch, switches, simples, verdadeiro falso. E vamos dar um nome de destaque. Salve este campo. E vamos dar uma olhada no editor. Assim, alguém seria capaz de usar o recurso do post por padrão que seria definido como No. Mas eu posso definir a bandeira dos posts para ser destaque. E, em seguida, dependendo disso, eu poderia ser capaz de dizer exibido na página inicial, ok, e que seria para os dados estáticos para cada artigo. Agora queremos usar os dados que já criamos em diferentes coleções CMS, como autorizar e tags e categorias. Porque cada artigo, cada blog posts teria que ter seu autor e algum imposto e a categoria a que pertence. Então vamos criar outro campo, e vamos estar usando campos de referência e de referência multi-camada para conseguir isso, a diferença entre os dois é que o link de campo de referência para um registro, por exemplo, um autor e campo de referência múltipla podem vincular vários registros dessa coleção diferente em termos de categorias. Então vamos ter categorias primeiro, vamos usar campo de referência única. Isso é simplesmente porque queremos que cada post de blog pertença a apenas uma categoria. E se você quiser tê-lo do outro modo, se você quiser ter, você sabe, blogposts colocados em diferentes categorias ou talvez criar uma categoria para novos artigos e artigos de destaque. Você pode fazer isso e, em seguida, criar campo de referência múltipla e vinculá-lo. É apenas uma decisão de negócios para autores. Eu também vou usar um campo de referência único porque no meu caso, ele vai ser um autor para um post de blog. Mas novamente, se você tem artigos postados que têm vários autores, você pode simplesmente criar um campo de referência múltipla aqui. E para o imposto, a questão é a mesma. Então nós temos que responder a nós mesmos se queremos usar apenas uma tag para um artigo, ou vamos usar campo multi referência e, em seguida vincular tags diferentes para pelo menos uma tag, mas talvez vários impostos para um artigo. E para mim, isso seria óbvio usar campo multi referência aqui. Mas só para aprender, vou ficar com um único arquivo de referência. E isso é simplesmente porque Webflow por agora, pelo menos, alguns problemas com a exibição dados dinâmicos de campos de referência múltipla dentro das páginas estáticas. Para explicar isso, eu tenho que mostrar estas páginas estáticas aqui. E nós também temos que páginas de coleção CMS. Essas são geradas automaticamente, aquelas páginas roxas, páginas cor-de-rosa, elas são geradas automaticamente e contêm todos os dados da nossa coleção. Facilmente acessível na interface do usuário, no design. Mas para as páginas estáticas terá que usar uma estrutura especial para acessar esses dados. E, infelizmente, os dados do campo de referência múltipla, pelo menos por enquanto, estão disponíveis apenas para páginas de coleta CMS, portanto, apenas para as páginas roxas. Mas o que eu também sei é que o Webflow está trabalhando ativamente para habilitar isso em páginas estáticas. Então, o que eu recomendo que você faça neste curso é apenas seguir junto. E se você está criando este site junto comigo, basta usar um único campo de referência agora, como eu faço. Mas quando você terminar o curso, confira se o Webflow já desenvolveu uma solução para usar esses campos de referência múltipla nas páginas estáticas. E se eles tentaram alterá-lo para que tenhamos multi referência para impostos e que seria, então vamos criar esta coleção. E isso também é ótimo porque podemos iniciar nossa coleção com alguns itens fictícios. Quero adicionar 10 postagens de blog para que possamos trabalhar facilmente com alguns dados de amostra, como imagens e conteúdo de bloqueio. E o Webflow está fazendo um ótimo trabalho e preenchendo os nomes dos posts do blog. Até mesmo. Basta lembrar que nós não usamos esta coleção de postagens de blog prontas. Nós acabamos de criar nossa própria coleção de posts de blog, mas de alguma forma conseguiu preenchê-lo com alguns dados adequados, algumas imagens agradáveis, e também com informações básicas que temos em vez de nomes do ar livre como nós anteriormente, anteriormente tinha gerado, nós têm nomes para alguns artigos agradáveis como 20 mitos sobre web design. Isso é muito legal. E aqui temos esta estrutura pronta com campo de conteúdo. Temos esta bandeira em destaque. Podemos ligar ou desligar. E para o autor da categoria e tag, você pode ver que esses são suspensos. E isso é simplesmente porque podemos usar apenas os elementos que já estão definidos nessas coleções CMS específicas. Assim, em tags e categorias de autores, se você quiser gerenciar esses elementos, você pode selecionar a coleção que deseja gerenciar e, em seguida, adicionar algumas novas tarefas. Você pode, você pode excluí-lo. E se você não conseguir excluir toda a coleção, você teria que ver as conexões que ela tem. Então, já fizemos a conexão entre esta categoria e nossos posts no blog. Então, para excluir, a coleta de impostos terá que primeiro excluir a conexão entre postagens de blog e impostos. Caso contrário, o Webflow não nos deixará fazer isso. Ok, então é isso. Definimos nossas coleções e agora podemos publicar nosso site porque todas as alterações nas coleções são publicadas agora são palco para publicação, mas são publicadas com seus sites. Então, se você pressionar Command Return, este é o atalho para publicação. Você poderá publicar seu site e agora os itens da coleção estão disponíveis. É isso por enquanto e te vejo na próxima lição. 10. Menu do blog: Ei, é bom te ver na próxima aula. E aqui vamos nós. Começamos com a criação da nossa estrutura de blocos e páginas para o bloco, temos o guia de estilo pronto, então agora podemos criar uma nova página, e essa seria a nossa página inicial do blog. Vamos dar-lhe um nome, logótipo. Isso é o suficiente. Vamos criar isto. E nós sempre temos este arquivo XD que é um tipo de design de referência para o nosso blog. Podemos verificar o arquivo e aqui você pode ver a estrutura base para a página inicial. Temos o menu em cima. Depois há um Poston em destaque, alguns artigos recentes de diferentes categorias que definimos e o CMS, como você pode ver, é realmente simples e é apenas uma maquete. Então eu não vou estar tentando encaixar o pixel perfeito os tamanhos dos elementos. Esse tipo de coisas que você pode verificar no curso básico. Mas aqui, vale a pena criar a estrutura e o CMS, e eu quero explicar tudo isso. Então o que eu vou fazer agora é ir para a página do guia de estilo e pegar alguns elementos emprestados de lá. O primeiro que usaremos como este elemento fixo com navegação. Então vamos copiar e colar isso no blog. Se fosse um componente, também poderíamos usar o menu de componentes, mas aqui estou apenas copiando e colando. E o primeiro elemento, que não vai ser uma página inicial em vez de todas as postagens. Então, irá exibir todas as postagens do blog aqui. E para a página inicial terá este logotipo bloco de suco. Na verdade, este logotipo é um pouco diferente do logotipo padrão que temos. E eu tenho isso no arquivo XD como um estado para este componente. Então vamos agora selecionar este logotipo de bloco e exportá-lo. Agora vamos para Webflow e eu posso selecionar o logotipo, clicar duas vezes no logotipo para substituí-lo e substituir pelo que eu exportei do Adobe XD. E como você pode ver, é o tamanho certo, 114 por 24 pixels. No entanto, não é realmente tão afiado, Não é tão nítido. E isso é especialmente por causa das especificidades da minha exibição. Estou a usar ecrã de retina e está a dimensionar o conteúdo duas vezes. Então o tamanho é o mesmo porque eu decidi em uma escala, entanto, o logotipo não é tão nítido depois que eu exportar. E Webflow tem uma maneira de lidar com isso. E isso está usando essas imagens como altamente BI. Então, o que você pode realmente fazer é voltar para o Adobe XD e certificar-se de que você tem esse ativo que estava originalmente na escala 1 x, exportado para x. E então você teria que substituí-lo e usá-lo como uma imagem de DPI alto. Então o que eu tenho que fazer no XD é mudado para web porque isso irá exportar duas imagens. Declarei que projetei esta imagem em uma escala X. E então eu quero exportá-lo em um X e dois x selecionando esta versão web. Então, quando eu exportei como logotipo do bloco de judeus, você verá que se eu quiser agora importar essas imagens, eu realmente tenho duas imagens em vez de uma. Este é apenas o logotipo de bloco em dois x e a versão simples, modo que a versão de dois ovos é o dobro do tamanho. São seis kilobytes. E abaixo tem o dobro do número de pixels, mas na minha tela de retina, parece melhor. Não muda o tamanho. Então o que eu preciso fazer é apenas importar isso para imagem de escala x e, em seguida, declarar no Webflow que eu quero usar esta imagem como API HTTP. Como você pode ver, é o dobro do tamanho é 228 por 48 pixels. É o dobro do tamanho em quilobytes também. Mas ficará melhor quando eu mudar a propriedade para DPI alto. Então isso é o que você vai fazer em termos de imagens PNG e JPEG, essas são bitmap. Mas na maioria dos casos, isso é possível. Você se beneficia de ter imagens no formato SVG, que é melhor para a Web e seu vetor, de modo que você não precisa usar essa imagem é alta DPI e basta apenas exportá-la do Adobe XD ou Sketch ou Figma no estes formatos SVG adequados. Portanto, isso obviamente não é possível para fotos, mas para todos os outros elementos, elementos de interface do usuário, você pode exportar este bloco de logotipo suco no SVG. E agora, se você carregar e substituir esse ativo, você verá que a versão SVG é apenas um kilobyte e pode realmente dimensionar no navegador sem perder a qualidade. Portanto, é sempre melhor usar imagens SVG. É menor em tamanho. Ele LOS muito rapidamente e você não precisa usar uma opção de DPI alta. Então é isso para imagens. Há mais algumas opções. Então lembre-se de adicionar a tag alt a todas as imagens. Você também pode adicionar isso mais tarde no painel Ativos. E este é um truque muito bom. E também nas versões mais recentes do Webflow, você tem imagens definidas para serem preguiçosas carregadas. E isso é muito legal porque ele também vai acelerar o seu site. Agora, o que eu gostaria de fazer é criar outros elementos para o nosso menu. Mas primeiro, vamos vincular este à nossa página do blog. E esta vai ser a página inicial que eu tenho projetado em XD com todos os posts em destaque e alguns posts de cada categoria. E este link de pulso antigo irá apenas ligar para a outra página que eu vou criar agora, vamos criar uma nova página com o nome bloquear todas as postagens. E este NovaLink em particular irá para este bloco página de posts antigos onde eu vou criar a lista de todos os posts em nosso bloco. Então vamos voltar ao blog. Vamos nos certificar de que todas as postagens estão vinculadas corretamente à página de postagens antigas do livro e para as outras páginas. Então, para componentes de cor, eu preciso renomeá-los para seções adequadas, como cadeia de blocos e marketing. Mas eu realmente não preciso usar nomes estáticos lá porque tudo o que eu preciso para exibir aqui, como no CMS, essas são categorias que eu criei e declarei NCAM S. E eu quero usar essas categorias e exibir seus nomes dinamicamente, assim como eu quero que os links para essas categorias sejam preenchidos automaticamente para que eles naveguem para a página apropriada com listagens de artigos desta mesma categoria. E isso pode ser feito com um CMS. Vou te mostrar como se faz mais tarde. Se você atualizar o nome da categoria ou talvez adicionar uma nova categoria, tudo isso será atualizado automaticamente. Vejo você na próxima lição. 11. Coletas de menu: Oi lá. É bom te ver na próxima lição. E desta vez vamos vincular categorias ao nosso menu. Então eu quero que todos os nomes para a nossa coleção CMS categoria sejam exibidos no menu, bem como vinculados às páginas apropriadas. Se você vincular esse conteúdo dinamicamente a partir do CMS e exibi-lo em sua página, poderá fazer alterações nas categorias no CMS posteriormente. E essas alterações serão refletidas em todas as suas páginas usando este menu específico. Agora, vamos excluir quase todos os links de navegação. Vou deixar um e viajar e mostrar-lhe como criar conteúdo dinâmico a partir da nossa própria página estática do CMS. Para fazê-lo, você tem que ir para a seção CMS dos elementos ímpares. Então, pressionamos um no teclado e, em seguida, NCAM, como você tem esta coleção menos, você tem que primeiro usar coleção menos. E dentro desta coleção pelo menos você pode fonte de dados do CMS. Então vamos clicar duas vezes para inseri-lo aqui. E aqui você tem esta coleção menos invólucro. Então, se você estiver usando páginas estáticas para exibir elementos de coleção, você terá que fonte a coleção apropriada. Então, de que coleção você deseja obter dados? Eu quero fonte de categorias. E a partir de categorias, vamos apenas carregar que os dados são carregados automaticamente. Então você pode ver que e esses quatro itens são pré-carregados com alguns dados da coleta. E simplesmente porque temos quatro itens declarados para esta coleção, temos quatro itens. Se você der uma olhada na estrutura, temos necessidades de coleta e, em seguida, item de coleta, esta é a coisa mais importante. E se quisermos mudar qualquer coisa, qualquer estilo ou aparência destes elementos ou colocar alguns elementos dentro vai fazê-lo para item de coleção. Item de coleta é uma espécie de modelo e este modelo é multiplicado pelo número de elementos de coleta. E para que tenhamos quatro categorias lá. É duplicado quatro vezes. Agora, se tomarmos este NovaLink e simplesmente copiá-lo e colá-lo em itens de coleção, terá este NovaLink com todo o seu estilo como o elemento de itens de coleção. Então, neste modelo de item de coleção, o que podemos fazer agora é podemos fonte com qualquer campo que queremos ser exibidos da coleção. Se você der uma olhada neste lado direito, você vai notar que agora o que temos como apenas um link para uma página estática que criamos bloco 0 posts. E ele está lá simplesmente porque nós copiamos o NovaLink e anteriormente nós ligamos este NovaLink para o bloco 0. Publique a página que criamos e queremos listar todos os artigos nesta página. Então deixe-me dar uma olhada nas páginas. Aqui você tem este livro oh, posts que criamos. E isso é muito importante porque está dentro da categoria de páginas estáticas aqui. Mas ao lado das páginas estáticas, também temos páginas utilitárias, páginas de comércio eletrônico, e o que é mais importante para agora, páginas de coleção CMS. Essas páginas são geradas automaticamente quando você cria a coleção. E, por exemplo, temos este modelo de categorias e esta é a página gerada automaticamente. Por quê? Por que criamos categorias CMS coleção, esta página, e é marcado na cor roxa. Está disponível para exibir todos os dados do modelo de catergias sem a necessidade de criar contêineres adicionais, como fizemos em páginas estáticas. Então, em páginas estáticas, tivemos que criar esta coleção menos wrapper e auditoria de outro menu. Mas em páginas CMS, podemos simplesmente usar dados desta coleção. Agora, se você der uma olhada nas configurações do link, você também verá alguns campos roxos. E isso significa que esses campos roxos estão vinculados à coleção e alguns dados dinâmicos da coleção podem ser obtidos para a URL. Se selecionarmos obtém URL de categorias, podemos vincular qualquer campo URL que está em nossa coleção. Então, se tivermos definido, por exemplo, para celular algum campo personalizado com URL, então podemos vincular este URL dinamicamente usando este, obter-nos a partir de categorias. Mas não temos links agora, então não há nenhum deles. Então, como podemos exatamente vinculado à página de categorias para que possamos exibir todos os posts em, digamos, categoria móvel e software. Bem, para fazer isso, temos que vincular a essas páginas CMS dinâmicas que foram geradas automaticamente ao criar a coleção. E isso também é marcado em roxo aqui temos páginas estáticas e também páginas dinâmicas. Essas são as nossas páginas da coleção CMS. E a partir daqui podemos ligar para a categoria atual. Isso significa que para todos os itens de coleção, eu terei o nx apropriado para celular e software, etc. Ele vai me levar para a página apropriada gerada para esta coleção e eu vou ser capaz de exibir todas as postagens de, digamos, mobile ou software. Além disso, eu preciso selecionar isso, obter textos de categorias para que eu tenha ótimos rótulos. Deixe-me selecionar o nome. E agora, como você pode ver, eu tenho todos os nomes das categorias como rótulos para nossos links de navegação. Então, temos marketing de software, mobile e blockchain. E também em cima disso temos 0 posts, que é um NovaLink simples que está levando à nossa página estática. Mas todos os elementos aqui, todos os links neste elemento de item de coleção serão vinculados à página de categoria de correntes apropriadas gerada a partir do CMS. Por isso, também mudará de acordo se fizermos quaisquer alterações adicionais à nossa estrutura CMS. E como você pode ver, este modelo de categorias, este é exatamente o modelo que será exibido quando clicarmos no link. E esta será esta página de categoria atual que podemos mais tarde em estilo no Webflow e criar contêineres apropriados, exibir postagens, etc Ok, para as configurações de wrapper lista de coleção, podemos selecionar diferentes layouts. Então, temos diferentes configurações de colunas, e também podemos alterar a tag. Deixe-me apenas manter este estilo de layout onde isso é expandido. E Dan, deixe-me mudar o layout para Flexbox. O que eu quero fazer é selecionar a lista de coleção primeiro e eu vou mudar o layout para Flexbox aqui. Agora os elementos estão próximos um do outro. E para todo o menu de navegação, deixe-me mudar para o flexbox para centralizar esses itens. Agora parece muito bom. Teremos que verificar como ele se parece nas versões móveis e na versão tablet, precisamos fazer alguns ajustes. Vamos selecionar todo o recipiente. Podemos mudar o layout para flexionar aqui também e também justificá-lo para o lado direito. Isso parece muito legal, eu acho que para Mobile, deixe-me apenas visualizar como ele iria funcionar e expandir este menu na visualização. Então, sim, parece muito bom com a necessidade de roubar, ajustar algum alinhamento. Mas também para o tablet, poderíamos apenas tentar exibir todo o menu. Nós só temos cinco itens no menu, então eu acho que eles vão caber horizontalmente. Então deixe-me selecionar a barra de navegação e, em seguida, suas configurações. Eu posso decidir que este menu móvel só é exibido a partir da visualização do telefone e abaixo. Então, no tablet, ainda temos cinco itens e o logotipo. E eu acho que estamos todos bem, porque esta é a resolução mais estreita e no telefone, teremos versão informada terá este menu em miniatura. Ainda precisamos ajustar, posicionar, algum alinhamento. Essas são coisas que eu te disse no curso básico. Então eu realmente recomendo que você confira curso básico e fazer alguns ajustes neste curso, Eu prefiro não gastar tempo no layout, mas deixe-me apenas rapidamente criar alguns ajustes aqui neste mosaico, eu abro este menu e agora vamos apenas algum espaçamento, bem como queremos mudar o posicionamento para toda esta coleção, pelo menos para que a direção seja vertical para Flexbox e vamos alinhá-lo para o centro, bem como este link nav, podemos alinhe o texto ao centro. E estamos todos bem. Eu acho que essas são apenas configurações básicas, mas agora parece muito melhor. E você pode começar a partir daí e você pode fazer alguns ajustes no layout. Então eu acho que nosso menu está pronto em termos de conteúdo dinâmico. E você aprendeu a usar a coleção menos wrapper em páginas estáticas. Portanto, lembre-se, sempre que você quiser usar dados dinâmicos em páginas estáticas no Webflow, você teria que usar o menos rapper de coleção no menu Adicionar. E, em seguida, você pode fonte ordenou todos os dados da coleção CMS. Mas para as páginas de coleta CMS, aquelas geradas automaticamente, você será capaz de usar dados dinâmicos desta coleção sem a necessidade de usar coleta, menos borracha. É isso por enquanto. Vejo você na próxima lição. 12. Artigo característico: Olá e bem-vindos à próxima lição. Neste, vamos trabalhar no conteúdo dinâmico na página inicial. Vamos primeiro adicionar uma seção. Esta seção deve estar fora da barra de navegação fixa. E nesta seção eu vou adicionar mais um recipiente, bem como outro div técnico que irá conter as informações sobre os futuros posts. Então isso é muito único. Eu vou dar-lhe um título de livro de nomes anos. Então esta é uma classe bastante única que vamos usar para este elemento em nossa página e para toda a seção no design, ele tem um em torno de 118 pixels de margem do topo. Agora em título de herói de bloco, o que gostaríamos de adicionar é o conteúdo da postagem do blog que está em destaque. Agora vamos excluir esta classe de herói do bloco intitulado. Vou aplicar reaplicar isso em um segundo. Mas primeiro, eu vou criar um cartão de classe mais genérico grande. E eu estou fazendo isso porque eu quero que este carro para ser classe para ter algumas propriedades que eu posso usar no meu guia de estilo e específico para muitos cartões diferentes que eu tenho na minha página. Então eu mudei a cor de fundo para branco, bem como o raio da borda para 12 pixels. E agora estou mudando os valores de sombra da caixa. Vamos aplicar opacidade alfa 2, 6 por cento. E agora vamos nos livrar deste bico de card para que possamos primeiro reaplicar esta classe de herói do bloco intitulado. Por enquanto, ele não tem quaisquer propriedades, mas Em cima disso vai apenas adicionar cartão grande que criamos como um custo universal para este cartas de jogar e descartar grande classe é apropriado para nós apenas usá-lo no guia de estilo. Então, se tivermos algo que possamos mais tarde reutilizar assim, podemos ir direto para guias de estilo e adicionar esses elementos. Então neste alvo precisamos de outra seção para alguns elementos genéricos, algumas seções vazias. E vamos usá-lo para criar diferentes estados e elevações também. Deixe-me acelerar este processo não é nada de novo, mas agora eu tenho esta seção de blocos de construção com sombras de cartas e elevações logo acima de nossas seções. E eu coloquei este cartão grande insight. Agora posso voltar para a página do nosso livro. E isso vai ficar no guia de estilo para que eu possa reutilizá-lo no futuro. Agora, esta seção do layout é bastante única para toda a página, para todo o bloco. Então teremos esse recurso para Tiktok no topo, e então teremos título e trecho. E para o lado direito teremos uma imagem. Então, primeiro, eu preciso usar esta coleção menos isso é muito importante porque se você esquecer de criar lista de coleção primeiro e para vinculá-lo à coleção apropriada. Nesse caso, essas são postagens de blog. Daniel tem que refazer o componente inteiro. Então deixe-me ir para as configurações desta coleção menos adequada. Ele já é usado usando blogposts como fonte, mas agora também podemos usar alguns filtros e ordem de classificação para exibir os itens corretamente. Eles vão explorar todas as opções mais tarde. Mas agora vamos dar uma olhada na opção de itens limitados que nos permitirá mostrar apenas um número específico de elementos retornados desta coleção. Então, neste caso específico, eu só quero mostrar um elemento, uma postagem de blog. E eu vou começar em um. No caso de eu ter, não sei, 10 ou 100, eu posso escolher um número diferente, mas também em cima disso, eu posso selecionar a ordem de classificação para apenas classificar com base na data de publicação. Então este publicado em como uma propriedade que é aplicada automaticamente a todos os elementos CMS por Webflow, eu posso classificá-lo do mais novo para o mais antigo e salvá-lo. Então, isso terá a exibição de postagem de blog mais recente neste item de lista de coleção. Mas se eu quiser que esses elementos sejam apresentados, apenas, eu posso ir para filtros agora e eu posso selecionar o campo apropriado. Neste caso, vou usar destaque. E somente quando o destaque estiver ativado, eu vou exibir este mais novo post. Então usei tudo. Eu uso itens limitados para mostrar apenas um elemento. Além disso, temos a ordem de classificação aplicada para que ela exiba apenas as publicações mais recentes. E também este post tem que ser destaque. Então ele tem que ter esse recurso mudar para, mudar para Ohm. Agora, essas configurações gerais e filtros são definidos para a coleção menos wrapper. Mas agora podemos mudar para o item de coleta e podemos reformular o item de coleta, bem como usar todos os dados do item de lista de coleta retornado com os filtros que aplicamos. Então, já temos os dados sobre esses posts muito recentes que são apresentados. Agora podemos usar o bloco Lync e nas configurações de link, você verá que podemos vincular a esta página específica, que é postagens de blog atuais. E a corrente é simplesmente aquela devolvida pelos nossos filtros. Então deixe-me mudar a tela para flex. E este livro de links será simplesmente o recipiente para todos os outros itens que ele irá vincular ao artigo. Agora dentro, Vamos criar outro bloco D, e isso vai segurar a estrutura do lado esquerdo. Vou dar-lhe um nome, digamos, herói do livro. E isso contém a descrição, bem como o título e a categoria. E para o lado direito terá a imagem. Então, agora dentro deste bloco, herói vai colocar algum livro didático. Esta é uma legenda simples que vamos usar do que o título e este é H1 e também um parágrafo em que irá exibir o trecho para o post. Então, agora que o temos mais tarde, vamos ligar os dados apropriados. Nós também precisamos desta leitura agora, link e todo o elemento está ligado, então vamos ter apenas este livro didático. E aqui vamos colocar a mensagem de leitura agora. Além disso, vamos dar uma olhada neste momento de outros elementos. Vamos primeiro ou substituir o texto no livro didático para que ele tenha recurso de texto. Então temos o título um, que é correto em termos de estilo para um parágrafo, este é um parágrafo realmente especial em nossa página. Então eu vou criar outra classe apenas para este parágrafo. Eu quero usá-lo no guia de estilo porque é apenas uma instância de tais textos no bloco. Então este é bloquear o seu trecho, e vamos ter a margem 12 e 24 para este elemento Asper nosso design. Assim como o peso da fonte seria 400 sons DM normais. E a cor da fonte é uma cor muito específica. Ainda não o temos no guia de estilo, mas esta é novamente apenas uma instância deste elemento. Então vamos ter isso assim. Podemos mais tarde como uma amostra ou talvez usar a cor que está próxima o suficiente do guia de estilo para esta cor cinza específica. Por enquanto, vamos deixá-lo como está e vamos nos concentrar no recurso Tiktok no topo do título. Isso deve ser redesenhado e já temos uma classe de legenda que podemos usar aqui. Então vamos selecioná-lo e isso nos dará todas as propriedades da fonte. E em cima disso, eu vou criar um vidro universal para todos os elementos como este porque esta coisinha característica e em seguida, projetar como ou categorias e todas essas pequenas notas são realmente semelhantes. Então vamos criar outra classe em cima da corrupção. E isso seria bloqueado. Ok, e precisamos mudar seu layout para bloco inline para que possamos adicionar algum preenchimento e margens. O que eu gostaria de fazer é adicionar preenchimento de oito pixels do lado esquerdo e direito. E eu pressiono e mantenho Option no Mac para adicionar quatro pixels de preenchimento cima e baixo e aspirina que design e para o raio, raio da borda vai usar quatro pixels lá, bem como mudar a cor de fundo. E esta também é uma cor muito específica que eu ainda não tenho. E o guia de estilo, então eu posso apenas isso com o valor hexadecimal por enquanto. Então nós temos esse gradiente de ladrilhos, eu acho que é sobre isso para o lado esquerdo de nossas listas de coleção. Então temos o herói do bloco que está quase pronto. Agora podemos obter o texto da nossa coleção. Vamos selecionar este getText a partir de postagens de blog. E aqui temos vinculado categoria coleção. Não usaremos dados de categorias, mas você pode ver que esses dados estão lá. Vamos usar este nome simples e trecho da própria postagem do blog. Então, para as configurações deste trecho de herói de bloco também, vamos usar dados dinâmicos de nossa coleção. E aqui temos o título e o trecho prontos. Vamos adicionar um pouco de preenchimento. Vou segurar Shift para que eu possa adicionar preenchimento de 38 pixels ao longo de todo o herói do bloco. E um elemento agora está pronto. Agora precisamos criar outro elemento. Isso já é Flexbox. Então, se adicionarmos outro bloco D dentro do bloco Lean, este será o invólucro de imagem herói loci Herói. Vai ser colocado automaticamente no lado direito e teremos o nosso lado fóton. Então, vamos pressionar a e adicionar uma imagem aqui. E então nós vamos obter essa imagem de postagens de blog também. Nós temos o campo de imagem lá, então vamos selecionar este campo. Temos duas imagens, um quadrado e esta imagem de resolução 16 por 9. Vamos selecionar este e precisamos de outra classe para esta imagem. Vamos ter imagem de herói de bloco e alterar algumas propriedades, especialmente a altura. Vamos usar 100% de altura e vamos precisar que os pés sejam ajustados para cobrir. Então, se tivermos para o campo, vamos, deixe-me mudar para 100%. Você vai ver o que parece. Não é muito bom, mas se mudarmos para cobertura, agora é muito melhor. Mas também precisamos definir a largura. E a largura irá definir um especificamente. De acordo com o nosso design, isso é 650 pixels. Então vamos ter isso definido assim, mas também precisamos tornar toda essa estrutura mais ampla. E nós simplesmente temos muito espaço para o lado esquerdo e direito do layout nesta seção. Então vamos mudar para esta seção agora e definir seu nome pode ser herói do livro de seção. Isso está tudo bem. E agora vamos ter a margem definida para 120 pixels da parte superior e também 120 da parte inferior. E para o recipiente dentro deste elemento, vamos definir o máximo. Fazemos 1282 pixels como temos, e o design precisará fazer o mesmo para o contêiner do menu. Então, vamos selecionar recipiente para alterar seu nome para que seja mais significativo. Este é o contêiner do menu de bloco. E também, vamos definir a espera máxima para 12 802 pixels. É isso. Então agora parece muito melhor, mas 40 tem a largura errada, embora tenhamos dito explicitamente para 650, algo está substituindo essa largura. E se olharmos para o bloco de links, é definido para isso por fatos. E é por isso que é crianças como bloco euro e imagem herói bloco tem este flex propriedades criança. E se você der uma olhada no tamanho, podemos configurá-lo para encolher se necessário, e também podemos expandi-lo. Então cresça, se possível, assim como não encolhe ou cresça. Portanto, esta propriedade não encolher ou crescer é a propriedade certa a ser definida para a nossa imagem de herói do bloco. Ele tem o tamanho adequado, mas precisamos configurá-lo para ser exibido apenas neste tamanho. E para o nosso herói do bloco, podemos deixá-lo como está, ou podemos até mudar seu tamanho para que ele cresça, se possível. Então é isso. Temos, este elemento está pronto e temos todos os dados provenientes do CMS. Ainda temos alguns pequenos ajustes, como os cantos arredondados para a foto. Vamos selecionar a imagem do herói do bloco, e vamos dividir os valores para o raio. Defina 12 picos do raio para o canto superior direito e para o canto inferior direito. E isso parece muito bom como em nosso design, mas ainda temos essas versões para tablets e dispositivos móveis para ajustar. E eu realmente não vou passar muito tempo lá porque eu sinto que você já sabe isso do curso básico de ortopedia. Se você não fizer isso, eu realmente recomendo que você confira o curso, mas deixe-me apenas criar alguns ajustes rápidos para que ele pareça bastante preciso em diferentes dispositivos. Agora, para um herói do livro, eu sinto que este estofamento pode ser menor em tablets. Então, vamos pressionar e segurar Shift para mudar o preenchimento. E também para o menu, eu sinto que seria muito melhor se nós centrássemos o menu. Então isso é tudo flexbox, podemos apenas justificar o centro. E agora ele será centrado em todos os pontos de interrupção aqui também. Então deixe-me selecionar este bloco de link e mudar a direção para vertical, bem como mudar a posição. Vamos trocar o inverso da imagem e do título para que possamos selecionar a imagem e alterar suas propriedades. Vamos redefinir a largura para 650. E então vamos mudar as propriedades para os cantos arredondados também, que tenhamos este raio de canto superior e superior esquerdo e superior definido como 12. E depois de algumas correções rápidas, acho que temos isso bastante preciso para todos os dispositivos e todas as resoluções e quais são os dados dinâmicos mais importantes. Vejo-te na próxima lição. 13. Artigos recentes: Nesta lição, vamos nos concentrar na estrutura dos artigos recentes. E esta estrutura é copiada em todas as categorias. Então teremos os últimos artigos de marketing de software e todas as outras categorias. E, por cima, teremos todas as categorias e todas as postagens recentes listadas. Então vamos deixar esta seção olhar herói como ele é. Isto é super específico e esta é apenas uma instância. Então, em vez disso, vamos selecionar o corpo e criar outra seção que irá conter o recipiente para este elemento específico que pode ser reutilizável para todos, para todas as outras seções. Então eu vou apenas dar-lhe uma seção de categoria de livro de nomes. Agora vamos definir algumas propriedades básicas para espaçamento. Vamos usar a margem. Vamos definir a margem para 100 pixels no topo. E agora dentro desta seção de categoria de livro terá contêiner. No contêiner como de costume, vamos alterar a largura máxima deste contêiner para 1282 pixels. E este recipiente para isso vai ser recipiente de conteúdo de bloco. E vamos usá-lo em todas as outras seções também. Vamos deixar a tela para ser flexível, configurá-la para vertical e alinhar e justificá-la para o centro e o meio. Agora, a partir dos símbolos, vamos ter esta seção de cabeçalho que podemos usar. E na seção de cabeçalho, temos algumas substituições que podemos fazer para o texto, bem como título e descrição. Então, a primeira sobrescrever a partir do blog, então temos este texto e para descrição vamos simplesmente excluí-lo completamente. E agora esse texto de descrição é visível como um contêiner, mas apenas no designer. Não será realmente viável. A página publicada. Então, agora eu pressionar um, Eu adicionar a coleção menos wrapper e em breve será vinculado a todos os nossos posts do blog. Mas agora vamos selecionar a coleção menos. Então este recipiente do meio, e vamos remodelá-lo. Então eu vou adicionar os cartões de blog de classe menos para isso e alterar seu dSpace adicionando para que tenhamos concordado que podemos facilmente usar Flexbox. Mas para este propósito, eu acho que a grade também é realmente grande para que possamos facilmente mudar a lacuna entre os elementos. Então vamos definir como 24, como em nosso layout no XD. E também precisamos de mais uma coluna. Precisamos de três colunas e apenas uma linha. Ok, agora temos a estrutura 40 elementos. Vamos fechar esta saudação. Também para a distribuição, vamos deixar essas configurações padrão e vamos clicar duas vezes sobre este elemento para conectá-lo à sua fonte. Essas serão postagens de blog. Agora tudo o que precisamos fazer é limitar o número de postagens no blog. Assim, para os cartões do livro, as configurações temos a fonte definida para postagens do blog. O que precisamos fazer é limitar os itens e só precisamos de três itens aqui. Além disso, levou, criar a ordem de classificação para que esses são apenas os artigos mais recentes. Então, vamos definir o publicado em e definir os itens para ser nós a pedido, mais novo para o pedido mais antigo. Agora vamos definir as configurações de elementos filhos gregos. Então, para baixo para o alinhamento é definido para esticar. E temos o conteúdo que se estende da esquerda para a direita. E neste item de coleção, também precisamos adicionar os elementos que exibirão dados dinâmicos. Novamente, primeiro, vamos adicionar bloco de link e vinculá-lo dinamicamente para a postagem atual do blog. Esta será a postagem do blog retornada por este filtro que criamos. E ele irá ligar automaticamente. Assim, todo o carrinho vai levar a este post. Agora vamos ter uma aula para isso. Então, este é cartão de bloco e também bloco item de coleção de cartão como seu pai. Agora vamos adicionar o conteúdo. O bloco, bloco de ligação de cartão, e teremos algumas informações e descartar. Então, primeiro vamos criar o blog, e isso irá conter todas as nossas tags. Então, vamos dar a ele um nome tags, wrapper e InDesign. Temos um ou dois impostos aqui. Então vamos criar um livro didático e, em seguida, duplicá-lo. Assim, o primeiro será destaque elementos, então informações sobre posts em destaque. E o segundo seria a informação sobre a categoria. Agora outra depuração que irá conter a imagem. Então este é o recipiente de imagem Cards. E dentro vamos adicionar um elemento de imagem. E vamos vinculá-lo às postagens do blog em um segundo. Mas primeiro, vamos nos concentrar no estilo. Esta é a imagem do cartão, então vamos aplicar esta classe. Outro d-block manterá as informações sobre o título e trecho. E geralmente antes de adicionar qualquer conteúdo dinâmico, eu começo com o estilo. Então vamos nos comentar. Este texto do cartão de nome da classe. Neste contexto, também terá mais dois blocos de licença técnica. O primeiro será manter o nosso título. Então vamos voltar. Dê a ele um nome de classe, título do cartão. E também teremos mais um d-block e que seria rodapé do cartão, retorno de comando ou digite o rodapé do cartão de nome. Assim, a estrutura do cartão é um pouco complexa, mas uma vez que temos, ele, apenas irá criar uma estrutura de cartão e, em seguida, ele será automaticamente duplicado para que tenhamos títulos em todos os lugares. Esses são de graça. Os títulos gratuitos também terão parágrafos e nós os reconstruiremos um pouco mais tarde. Então temos um trecho aqui. E para o rodapé do cartão, também adicionaremos algum livro didático. E isso nos permitirá ter apenas três informações sobre o autor, bem como o link para nossos posts. Então, primeiro, vamos dar-lhe um cartão de nome, autor, o segundo texto doc comando retorno. Este é um separador de carrinho, apenas um elemento gráfico simples que irá adicionar um pouco mais tarde. E também categoria Cartão que teremos na parte inferior. Então aqui está, toda a estrutura de um cartão. Agora tudo o que precisamos aqui como alguns dados dinâmicos. Então vamos começar a partir do nosso título três, e esse é o título do artigo. Então pegue mensagens de postagens de blog e precisamos do nome. Ok, então isso é super simples. Agora o trecho e aqui dias o trecho e também temos um link de coleção ao ar livre para os posts do blog. Então, se você for para as configurações deste livro didático, você pode vinculá-lo ao nome do autor. E então eu vou colocar Just dentro e, em seguida, o nome da categoria. Então, nessa categoria, também podemos selecionar o nome da categoria porque, novamente, as categorias estão vinculadas à nossa coleção de postagens do blog. É por isso que podemos obter a informação daqui. Mais uma vez, vamos usar 16 por nove imagens e essas serão vinculadas diretamente a partir desta coleção. E precisamos vincular o elemento de recurso, elementos em destaque. Então vamos mudar o nome para destaque, bem como isso só vai ser tirado do nome da tag. Então, isso foi projetado. O segundo é o desenvolvimento e o terceiro, a tipografia. Essas tarefas também estão vinculadas à nossa postagem no blog. Agora vamos restyled elemento em destaque. Ele tem legendado e bloco tag classe e se aplicará a ambos os livros didáticos. Então, primeira legenda e, em seguida, Command Return mais uma vez ou dados discretos e selecione bloco tag. O mesmo vale para o outro Tiktok que isso está capturando. E em seguida, vamos selecionar tag de bloco como uma classe de combinação. Mas aqui o que gostaríamos de fazer é obter a cor desta categoria dinamicamente. E só para que você se lembre, temos essas cores definidas para cada tag e nas configurações de estilo dinâmico para esta legenda, podemos obter essa cor de fundo de. E esta é a tática ou está ligada às nossas postagens de blog. Então está disponível aqui. Agora, como você pode ver, desenvolvimento de design e tipografia. Eles têm cores de fundo originadas da cor que especificamos no CMS e na coleção de destino. Agora o que eu gostaria de fazer é decidir se ele é destaque legenda deve ser exibido ou não. Então vamos para essas configurações de bloqueio. E então, em visibilidade condicional, podemos adicionar a condição. Portanto, queremos verificar se a bandeira em destaque está definida como própria e somente sob esta condição o elemento em destaque está presente. Então agora temos a estrutura para nossos cartões , bem como alguma fonte de dados dinâmica do CMS. Na próxima lição, faremos essa discagem. Vejo-te lá. 14. Estilos de cartões: Olá, bem-vindos à próxima lição. E neste, eu gostaria de mostrar a vocês como estilizar elementos dentro do nosso cartão de bloqueio. Bem, esta é a lição do estilo. Então, se você já sabe estilo do curso anterior, ou você se sente mestre em estilo, você realmente não precisa assistir a esta lição, mas eu gosto de mostrar algumas dicas e truques em termos de estilo este cartão de bloco. Este é o elemento mais importante em nosso blog porque esses cartões estarão presentes em muitas páginas diferentes. Então vamos tentar fazer isso, certo? Temos um carrinho de bloqueio aqui. E para as propriedades deste elemento, eu gostaria de definir a tela para flexionar primeiro que possamos alinhar elementos dentro deste invólucro. Vamos mudar a direção para vertical para que os elementos se empilhem um sobre outro e, em seguida, teremos alinhamento definido para esticar. Vou deixar justificado como está, mas vamos para o tamanho e posição. Agora o que queremos fazer é o primeiro dia do transbordamento dos elementos. Vou definir overflow como oculto no caso de algo estar fora da caixa de limite deste cartão de bloco. E isso é muito importante. Vou definir a posição como parente. E isso é principalmente porque eu quero posicionar nossas etiquetas que são destaque e design aqui dentro deste cartão de bloco. E eu vou posicioná-los obsoletos. Agora, vamos para algumas configurações para o plano de fundo e mudar a cor do plano de fundo para branco. Esta é a nossa marca 06 cor. E também vou ter um raio de borda de 12 pixels. E para a sombra da caixa, eu gostaria de adicionar alguma sombra sutil e deixá-la para 180 ângulo. A distância seria 15. E então eu vou aplicar 30 pixel urso ou 35 talvez. Mas vou diminuir a opacidade da cor preta. Então vamos para alfa aqui e ajustá-lo para cinco ou 7%. E sim, esta é a sombra que eu gostaria de ter abaixo das minhas cartas. Agora vamos nos certificar de que temos mais grosseiro definido para ponteiro ao longo deste elemento de cartão de bloco inteiro. Assim, quando o usuário passa o mouse sobre este elemento, ele sabe que este é um link. E vamos ao invólucro de impostos. Portanto, queremos posicionar essas tags dentro do elemento de parte de log que já está posicionado relativo. Portanto, tudo o que precisamos mudar é a posição do invólucro fiscal para absoluto. Então agora temos esses elementos alinhados e wrapper fiscal é posicionado dentro do elemento de cartão de bloco, que é relativo. Agora, para a borracha de imposto, eu vou definir a distância de cima e esquerda, mas primeiro vamos alinhá-lo para cima esquerda e depois mudar a distância. Vou digitar 16 e Px. Então eu vou mudá-lo de porcentagens para pixels. Este será 16 pixels no topo e 16 pixels alinhados à esquerda. Então também vou definir este índice Z apenas para ter certeza de que você sempre pode ver essas tags. E eu preciso selecionar uma das legendas e também definir uma pequena margem, por exemplo, quatro pixels para que eu possa espalhar os elementos um do outro. Agora isso vai ser interessante. Vamos selecionar a imagem do cartão e vamos criar imagem do cartão que está totalmente espalhada pelo elemento que contém elementos. Então temos trigo e altura ajustados para 100%. E então a quinta propriedade eu vou e eu vou colocá-la para cobrir. Agora a parte mais importante, o que gostaríamos de fazer é mudar a posição deste elemento de estática para absoluta. Isto será absolutamente posicionado. O tamanho completo dos elementos pai. Então eu mudo para o máximo para que ele se espalhe por todas as fronteiras. E cartões próprios, recipiente de imagem, que é o pai direto desta imagem de cartão. Vou definir o posicionamento para ser relativo. Também para se certificar de que este recipiente de imagem de custo tem a largura correta, eu vou mudar sua largura para 100% de seu elemento pai. E agora, graças a esta magia, o que você pode fazer é mudar o preenchimento neste recipiente de imagem de cartão, e então ele irá revelar a parte da imagem que você deseja mostrar. Agora, se você quiser ter a altura de centenas de pixels desta imagem, você pode apenas definir o preenchimento para 200 ou você pode alterá-lo para, digamos, 54% para ter valores relativos que lhe darão uma melhor capacidade de resposta deste elemento. E essa estrutura do elemento atual é muito legal em termos de ter o Carter responsivo em todos os pontos de interrupção e coisas assim. Então acho que isso pode ser útil. E agora para os outros elementos, para os nossos textos de cartão, temos título dentro e cabeçalho e parágrafo. Vamos mudar o layout para flexionar novamente e mudar a direção para vertical. Para o alinhamento, você vai deixá-lo como está. Mas para justificadamente ir deixar o espaço, vamos definir o espaço entre nós para que possamos tê-lo bem espalhado pelos elementos dentro. E então o que eu gostaria de fazer é mudar este parágrafo dentro. Deixe-me alterar o plano de fundo primeiro, preciso definir a cor de fundo para branco ou selecionar uma das minhas cores predefinidas. Mas o que é mais importante agora, eu vou definir as propriedades deste parágrafo para que eu possa ter um pouco mais de espaçamento entre o cabeçalho e o parágrafo. Vamos pressionar Command Return e criar uma classe separada para este parágrafo. Isto é como um parágrafo especial para nós. Então vamos criar uma classe de trecho de cartão que podemos aplicar uma margem, margem superior de oito pixels também. E também vamos alterar algumas outras propriedades, como propriedades de topografia. Temos este conjunto de cores para uma de nossas cores pai e queremos alterá-lo para alguma cor cinza. E nós podemos, obviamente, você sabe, digitar o valor hexadecimal. Mas o que também podemos fazer é usar nossas amostras predefinidas. E é sempre melhor usar as cores que temos no sistema. Então, por exemplo, esta cor cinza escuro, em vez de criar uma nova. Ou, se você estiver criando um novo, lembre-se de mantê-lo em nosso guia de estilo para que possamos usar consistentemente em todo o nosso design. Agora vamos cuidar da pasta do cartão. Temos autor do cartão, separador e categoria. Todos eles têm aulas separadas. E o que eu gosto de fazer é definir a propriedade inline-block quatro, todos eles, porque eu quero mantê-los em uma linha e bloco inline vai me ajudar a realizar isso. Tudo o que eu preciso fazer é para este separador de cartão, eu vou definir a margem para o lado esquerdo e direito. Então, vamos pressionar e segurar Opção no Mac e 6,5 pixels ou quatro pixels de margem. E aqui eu preciso alterar algumas propriedades que alteram o tamanho do texto para 10 e, em seguida, ocultar para 13. Teremos as mesmas propriedades tanto para o separador de carrinho quanto para o autor do cartão em termos de topografia. Então vamos mudá-lo para uma amostra prateada. E agora, quando eu olho para ele, eu acho que deve ser um pouco mais escuro para que nós tenhamos mais contraste entre. O fundo e o autor e o para essa categoria, vamos mudar o tamanho, mas vamos deixar a cor como S porque este será o link para a categoria. Então, a partir deste link, alguém poderia simplesmente clicar no link e ir para a categoria. E este link pode ser como substituir o link que temos como um cartão de bloqueio. Agora eu mudei a margem ligeiramente para que eles sejam menores e eu acho que nossos cartões estão quase prontos. Bem, temos que ter certeza é que este item de coleção de carrinho de livros tem o layout definido para flex. E, em seguida, para o alinhamento dos itens, queremos alterar o alinhamento para esticar. E graças a isso, vamos ter as cartas que estão espalhadas de cima para baixo do item de coleção de cartões de bloco. E a altura do fundo é a mesma. Temos quatro linhas aqui, três linhas ali. E tudo parece bem. Vamos consertar a posição do outro em um segundo. Mas o que eu gostaria de fazer é apenas visualizar esses elementos em visualizações móveis no tablet. E já podemos ver que isso é um pouco lotado demais, especialmente no tamanho menor do tablet. Então o que gostaríamos de fazer é provavelmente no tablet, mudar o layout para isso, que temos apenas um cartão em uma fileira. Mas primeiro, notei que temos esse Arthur e aqui e seção e não alinhados corretamente ao fundo deste elemento. E isso é provavelmente por causa deste recipiente de texto cartão que não está se espalhando para toda a altura do elemento pai. Então, isso é muito fácil de corrigir porque o elemento pai, então este cartão de bloco tem o layout definido para fatos em direção a horizontal. Então, graças a isso, podemos definir o tamanho de cada criança para crescer. Mas eu vou fazê-lo na vista de área de trabalho para que eu tenha essa propriedade herdada para todos os pontos de interrupção. Vamos alterar o tamanho flexível deste elemento para aumentar o texto do cartão. E agora você pode ver que tudo está bem. Temos o autor e também a categoria exibida na parte inferior do carrinho. Agora vamos selecionar carrinhos de bloco menos, o que é acordado. Vou apagar duas colunas. Vou deixar uma coluna do tablet para celular, horizontal e retrato. E queremos aplicar algum tipo de margem ou preenchimento. Agora podemos aplicar isso uma margem para bloquear cartões menos, mas eu acho que seria melhor apenas aplicar isso para todo o recipiente de conteúdo. E esse contêiner de conteúdo será repetido em todo o nosso design e do tablet abaixo teremos apenas um preenchimento deste contêiner definido como 12 pixels. Para que em dispositivos móveis tenhamos um pouco de preenchimento no lado esquerdo e direito. Então, eu acho que estamos prontos com isso, mas agora podemos facilmente mudar o preenchimento recipiente imagem carrinho. Pai, em dispositivos diferentes, temos tamanhos diferentes da foto. E graças a este pequeno truque que fizemos com o preenchimento, você pode ver que é super fácil mudar o tamanho desta foto. E, por exemplo, nesta visualização móvel quando é muito pequena, podemos apenas aplicar um preenchimento maior e aqui temos ele. Portanto, esta é uma maneira de criar cartões de blog à prova de balas no Webflow. Provavelmente há um milhão de outras maneiras pelas quais você pode abordar isso, mas eu acho que essas são soluções muito boas, então eu encorajo você a experimentá-lo e eu vejo você na próxima lição. 15. Secções da página principal: Olá a todos, Bem-vindos à próxima lição. Neste, eu gostaria de criar seções para todas as seções de categoria de livros de elementos que temos na categoria. Então marketing de software, móvel e doutrina. Eu quero exibir um posts gratuitos de cada categoria. E então o que estou fazendo agora é adicionar uma div. E dentro desta div, eu estou adicionando este botão grande para que eu possa ligar para todos os artigos desta categoria particular. Ou, neste caso, temos artigos recentes. Eu quero apenas ligar para todos os artigos no meu blog. Então eu tenho esse botão extra. Eu vou dar a este d-block um nome de classe de um wrapper de botão CTA e talvez adicionar algumas propriedades como margem ou talvez você tenha algum preenchimento dentro deste wrapper botão CTA. E para as configurações do botão, o que eu gostaria, é como o Buttonwood que eu gostaria de fazer é mudar os textos para ver, neste caso todos os artigos. E como um tipo de link, vou selecionar a página que precisamos vincular a uma página específica. Neste caso particular, precisamos selecionar bloquear todas as postagens. E isso só mostrará todas as postagens da seção recente do artigo. Mas para todas as outras seções, como categorias, marketing de software e dispositivos móveis, vou ligar para a categoria específica. Então, o que eu posso fazer se eu tiver este caldeirão desta seção de artigo recente, eu posso apenas copiar e colar algumas vezes. Temos marketing de software, mobile e Blockchain. Então podemos colá-lo quatro vezes e criar cinco seções. Para a primeira seção, vamos pensar nas configurações para esta seção primeiro, e temos esse título no topo. Esta é a seção de cabeçalho, e este é um símbolo. Então, se eu entrar dentro do símbolo e mudá-lo que ele vincule dinamicamente a uma das minhas seções do CS. Será o mesmo em todas as instâncias. Então eu preciso clicar com o botão direito primeiro e eu preciso desvincular este símbolo, o símbolo. Então pressione Command, Shift um ou apenas desvinculado assim. Agora eu posso editar as propriedades sem se preocupar que ele vai mudar em todos os lugares em cada símbolo. Eu posso, obviamente, mudar o estilo ea classe seção cabeçalho vai permanecer consistente através de todas as seções de cabeçalho. Então o fato de que eu realmente destruí o símbolo não é tão relevante porque nós ainda temos as mesmas classes para todos os títulos e eles herdarão essas propriedades. Então o que queremos ter aqui é provavelmente Blockchain, certo? E como podemos criar, como podemos vincular essa categoria também, esta seção de cabeçalho. Bem, isso é bem complicado porque podemos criar uma coleção menos Robert Wright. E então lógico seria ligar a histórias. No entanto, para essas categorias, nós realmente não sabemos qual deles escolher a partir daqui nós sabemos, nós realmente não sabemos quais posts são exibidos abaixo. Podemos, obviamente, limitar os itens a um para que tenhamos apenas uma categoria. E o que podemos fazer é provavelmente filtrar essa categoria para que ela mostre a categoria exata que queremos ver. Então, a primeira maneira de fazer isso é talvez mudar a ordem de classificação para apenas criá-la ou atualizar a data ou assim. Vamos ter o mais novo para o mais velho. E agora temos software aqui, e isso é simplesmente porque o software é a categoria mais recente no CMS. Se formos para categorias CMS, você vê que o software está no topo e é por isso que ele está sendo exibido assim. Então esta não é realmente a melhor maneira de abordar isso porque ainda não é link para os artigos de post do blog que temos. E o segundo item de coleção. E, a propósito, colocar este cabeçalho dentro desta coleção menos wrapper com posts de blog não é realmente boa idéia porque teríamos que filtrar. Nós temos três postagens, então ele vai apenas exibir três títulos. Então teríamos que nos livrar de mais dois. Então, às vezes é melhor criar coleções separadas, mas precisamos encontrar uma maneira de ligar essas coleções. Ok, mas antes disso, vamos dar uma olhada na lista de coleção de nossas listas de cartões de bloqueio. E para o item de coleção, Vamos definir o filtro de modo que realmente temos filtro aplicado, modo que realmente temos posts de blog de uma das categorias. Então vamos preencher isso por categoria. E nós somos categoria igual a software, digamos, ou podemos selecionar a partir desta lista suspensa qualquer outra categoria que temos, por exemplo, marketing móvel ou cadeia de blocos. Vamos salvar isso. E agora temos artigos de blockchain aqui. Se tivermos mais artigos e doutrina terá até três elementos. E isto é à prova de bala. Isso é realmente ótimo porque quando, por exemplo, alguém muda o nome da categoria para artigos blockchain ou seminário, isso ainda será dinâmico e funcionará. Agora temos que descobrir uma maneira de vincular este blockchain ao nosso item de coleção com o título. E poderíamos fazer isso com os filtros. Se adicionarmos um filtro aqui, podemos obviamente selecionar a categoria com nome igual. E nós podemos digitar, podemos apenas digitar o nome da categoria. Então temos blockchain aqui e, obviamente, trabalhamos. Agora, se movermos o título para esta categoria e podemos simplesmente excluir a ordem de classificação. E sim, nós podemos, nós não temos que limitar os itens porque nós só temos um elemento filtrado se mover este cabeçalho para esta coleção e, em seguida, selecionar, Obter os textos de categorias e precisamos do nome da categoria aqui temos blockchain. O problema é que esta não é tanto a solução à prova de balas porque o que tivemos de fazer, como tínhamos dito explicitamente, que queremos a cadeia de blocos como o nome desta categoria. E se alguém mudar o nome do blockchain para artigos blockchain? Como afirmado aqui, o nome tem que ser igual. Não tem que ser assim ou algo assim. Tem que ser igual ao que colocamos aqui. Então isso não é realmente tão bom porque temos que explicitamente colocá-lo no campo de entrada. O que gostaríamos de ter em vez deste campo de entrada, gostaríamos de ter o mínimo. Porque quando temos o mínimo, então Webflow receberá automaticamente os dados corretos. E este é o mínimo que tínhamos na coleção de postagens do blog. Então eu acho que provavelmente você já sabe a solução para esse problema pode ser. Então, em vez disso, pode ser um pouco contra-intuitivo. Queremos exibir categoria, mas queremos usar coleção de categorias, mas em vez disso, vamos usar a mesma, a mesma coleção que usamos para os cartões de bloco, pelo menos porque o que temos aqui é a categoria de link para este post que podemos selecionar na lista. E selecionar a partir da lista, novamente, como uma ótima maneira de conseguir isso porque isso vai ficar à prova de balas. E sempre que nós ou nossos clientes mudarmos algo no CMS, podemos mudá-lo. Agora. As categorias agora estão bloqueadas, então a origem está bloqueada. Não podemos realmente dizer que queremos postagens de blog aqui e por que ele está bloqueado. Bem, você tem que entender que quando algum campo dentro desta coleção menos wrapper está conectado a qualquer um dos campos no CMS. Isto parecerá nossa fonte e não podemos modificá-la. Então, em outras palavras, se você vê uma conexão roxa aqui dentro desta estrutura, você só tem que desvincular os elementos. Então agora eu tenho esse getText de categorias desvinculadas. E se eu voltar para a minha coleção menos wrapper, agora eu posso mudar as categorias. Não há mais ícone de cadeado aqui, então eu posso alterá-lo para postagens de blog. E isso obviamente exibirá tantos itens como eu tenho posts no meu CMS. Mas isso não é um problema porque eu posso obviamente limitar isso com um item. Vamos mostrar um item e vamos começar por um. E agora, graças a esta conexão que eu tenho dentro de posts de blog, que eu tenho as categorias link para posts de blog. Posso selecionar referência de categoria, e agora posso fazer referência à categoria blockchain. E isto é à prova de balas. Agora vou ter o nome que posso ligar. Vamos selecionar o título e obter textos de postagens de blog. E aqui temos os campos ligados. Vamos para Categoria e vamos vincular o nome da categoria. Isso sempre exibirá o mesmo nome de categoria que temos abaixo para nossas postagens. Então esta é a melhor solução. E a segunda solução, a segunda maneira que você pode pensar como apenas colocando o elemento H1 dentro deste invólucro lista de coleção para carrinho de bloco menos. Mas, de novo, às vezes, é problemático. Às vezes você quer ter coleções separadas em uma, digamos seção. E você deseja vincular essas conexões a diferentes elementos, mas conectado a uma categoria CMS ou itens de lista CMS. Então aqui temos, agora está feito. Vamos talvez dividir esta lição para que possamos continuar no próximo e mudar nosso botão e também duplicado e criar mais categorias. Vejo você na próxima parte. 16. As seções da página principal 2: Olá, bem-vindos à próxima lição. Começamos de onde paramos no anterior. E agora o nosso desafio é ter este botão para vincular todos os posts da categoria que temos acima. Então, acima temos blockchain por enquanto, vamos mudá-lo para software em um segundo, mas temos categoria e queremos vinculá-lo. E talvez nós também queremos apenas mudar o nome para que tenhamos ver os artigos blockchain aqui. E você sabe que quando você seleciona algo no Webflow, alguns textos, você pode obviamente criar um span para envolver isso em um span. Agora, ter uma extensão nos permitirá criar uma coleção. Então use a coleção e injete o nome da categoria aqui para que tenhamos ver artigos blockchain ou pontos de vista após artigos. Então nós temos este painel de texto dentro do botão e CTA botão wrapper. Neste invólucro, Vamos posicionar-nos aqui e pressione um para criar coleção, pelo menos. Então nós queremos obviamente colocar a lista de coleção dentro da cidade, mas no wrapper e no item da lista de coleção aqui, nós vamos ter este span este botão. Vamos primeiro clicar duas vezes e conectar isso novamente, como explicamos na lição anterior, nós realmente não queremos conectar essas duas categorias. Em vez disso, queremos nos conectar a postagens de blog para que sempre tenhamos esse link e ele esteja vinculado a categorias para que possamos exibir o nome que está nomeando os itens para um. E então vamos filtrar isso para que tenhamos o nome da categoria aqui, novamente, o mesmo que fizemos para o título. Temos o seleto com blockchain, por isso é à prova de balas, ótimo. E o problema seria que é impossível usar esses dados dinâmicos de coleta em vão. Mas vamos primeiro colocar o item de coleção final inferior. Se você não pode passar o mouse sobre e posicionar-se corretamente, se estiver vermelho, às vezes é melhor copiar e colar o elemento em vez de tentar, você sabe, apenas movê-lo. Então eu vou apenas copiar o botão e, em seguida, clicar no item de coleção em si e colá-lo com Command V. Agora ele está dentro e você pode excluir o antigo. Então vamos selecioná-lo e excluí-lo. Geralmente é como eu faço quando não consigo, sabe, posicionar-me e ao navegador. E agora temos essa extensão de texto e teoricamente está na coleção e no item da coleção. Ele deve ter a fonte dos dados que temos no CMS, mas simplesmente não tem, então, oh, não tem por enquanto. Talvez na sua versão do Webflow, alguns novos lançamentos, ele será corrigido. Mas, por enquanto, não posso simplesmente me candidatar a uma extensão. Em vez disso, eu poderia obviamente aplicar isso para botão grande elemento e obter o texto do nome do post blog e nome da coleção. E aqui temos blockchain, mas não é realmente intuitivo. Ele deve dizer Ver todos os artigos blockchain ou ver artigos blockchain em vez de apenas blockchain. Então o que eu posso fazer é apenas recriar a estrutura deste botão em um bloco de link. Então vamos selecionar e criar um bloco de link. E vamos recriar o fundo com elementos adequados. Portanto, os livros didáticos adequados que vamos criar terão um livro didático no qual vamos dizer. Uma vista e, em seguida, teremos os dados dinâmicos provenientes da coleção. E depois temos outro livro didático. Então isto é, digamos aqui, vamos para styling e definir o bloco inline-antes de colar outro porque queremos copiar e colar e queremos tê-lo em uma linha, então é melhor aplicá-lo primeiro. E haverá o nome da coleção, então XXX por agora e então será ver artigos blockchain. E agora o que eu preciso fazer é ter esse link. Sim, vamos ligar isto a postagens de blogues. E então vamos conectar isso ao nome da categoria. Isso deve exibir a cadeia de blocos corretamente. Além disso, eu preciso corrigir um erro de digitação e eu preciso aplicar algumas classes provavelmente aqui temos o bloco de link sem a classe, precisamos usar a classe botão provavelmente. Então vamos usar botão grande classe, e isso irá criar automaticamente um bom botão para nós. E para a caixa de texto. Vamos nos livrar da aula de livros didáticos. E em vez disso, eu vou apenas criar classe de texto botão com cor branca e algumas propriedades. Digamos exibir bloco inline-, e vamos usar cor branca para este texto. O que você pode fazer é simplesmente excluir as classes antigas dos outros livros didáticos, remover e aplicar as novas. Então, texto de botão. E também para o último livro didático. Para estes textos de cadeia de bloco intermediário, eu precisaria selecioná-lo e aplicar uma classe de combinação para que possamos aplicar algum preenchimento ou margem em torno dele. Então vamos dizer que isso seria categoria, mas na próxima categoria. E agora vamos aplicar alguns talvez quatro ou cinco pixels preenchimento de cada lado. Então eu vou pressionar e segurar Option e, e dar-lhe um preenchimento de cinco pixels. Certo, agora temos a reestruturação do botão recriada. Podemos apagar o antigo e temos o que queríamos. Assim, a cadeia de blocos agora está dinamicamente ligada ao nome da categoria. E temos esta seção de categoria de bloco como um modelo. Podemos realmente usar para todos os outros, para todas as outras seções em nossa página. Deixe-me também criar uma classe de combinação aqui, seção de bloco. E vamos adicionar um pouco de preenchimento aqui, alguma margem para o fundo. Agora parece melhor. Precisamos criar este modelo. Podemos nos livrar dos antigos para que possamos reutilizá-lo agora e copiar e colar. E tudo o que precisamos fazer nessas seções agora é mudar a conexão com a categoria adequada em cada três dos elementos. Então temos o título do botão e também o conteúdo. E precisamos mudá-lo para que o primeiro item de coleção está ligado a cadeia não bloco provavelmente, mas a primeira categoria de software RSS, salvá-lo. Então temos que ir para a segunda coleção, menos borracha e ligar isso ao software também. E também para o botão, lembre-se de que precisamos mudar o texto do botão. Esta exibição de artigos blockchain neste wrapper de lista de coleção. Vamos selecionar o software e isso aplicará automaticamente o nome do software ao nosso botão. Portanto, precisamos repetir esses passos para cada categoria agora. Mas o conceito que eu criei aqui é mais importante do que clicar agora, o conceito é que temos listas de coleção teoricamente separadas para o botão, título e cartões, mas eles estão inextricavelmente ligados entre si. E se mudarmos alguma coisa, por exemplo, o nome da categoria ou reorganizarmos as postagens. Tudo isso será dinâmico e trabalhará em conjunto. Não vai quebrar. E isso é a coisa mais importante. Se você tem o CMS e você tem a opção de editor habilitada, alguém pode simplesmente alterar o nome das categorias, alterar seu nome, nomes das postagens do blog, e reorganizá-los. E isso sempre resultará em você ter que corrigir todas as conexões em seu, em sua página. Então, é melhor pensar com antecedência e estrutura discreta que permitirá essas mudanças e se adaptar dinamicamente. Agora temos todas as categorias ligadas, temos tudo no lugar. Vamos também usar o símbolo. Eu vou apenas colocá-lo, em meus elementos corporais. Vou usar este símbolo de rodapé na parte inferior da página. E eu acho que a estrutura para a página inicial agora está pronta. Podemos visualizar essa estrutura. Temos o artigo de destaque. Todos os dados são dinâmicos. Temos o menu que é Dinâmico 2. Tudo o que precisamos fazer é criar esta página de postagem do blog. Nós já temos isso ligado corretamente e temos alguns elementos CMS com postagens de blog, mas precisamos criar o design. Vamos fazer isso na próxima lição. 17. Página com todas as posts: Olá, bem-vindo à próxima lição. Estou muito feliz por você estar aqui, especialmente porque agora que temos tudo no lugar, temos nosso guia de estilo e já sabemos como trabalhar com itens de coleção. Será super fácil criar novas páginas e organizar nosso blog. Agora temos este menu. Vamos mudar o nome de fixo para menu de bloco e podemos criar um símbolo fora dele. Então, antes de criarmos qualquer nova página, lembre-se de criar símbolos, para adicionar novos símbolos, você pode adicioná-lo a partir do menu de símbolos e você também pode clicar com o botão direito do mouse no elemento para criar um novo símbolo, você só tem que ter certeza de clicar em no próprio menu de bloco, clique com o botão direito e, em seguida, símbolo creed, faça um símbolo de menu. E desta forma, teremos este componente. E este componente será o mesmo em todas as nossas sub-páginas. Agora vamos também copiar seção bloco herói e vamos bloquear todas as postagens para criar esta página. Primeiro, eu vou para ir para símbolos e usar o nosso menu de bloco que acabamos de criar e, em seguida, colar seção olhar herói. A partir daqui, não precisamos desta bela embalagem de coleção. Vamos excluí-lo, mas vou usar este bloco de seção e contêiner e reservar seu título. E dentro deste seletor, eu vou apenas colar o que eu tenho no meu guia de estilo. Vamos para símbolos mais uma vez e usar um símbolo de seção de cabeçalho. Isso é praticamente perfeito porque ele tem o layout definido como Flexbox e nós temos a justificação certa. Então isso vai se encaixar bem. E agora vamos às suas propriedades. Você pode ver que temos todas as substituições que podemos alterar para definir o artigos aqui para os textos de legenda, vamos usar texto de blog e descrição. Vou deixar como está por agora. Agora, para este título de herói de bloco, o que queremos fazer é adicionar outra classe de combinação. Então vamos criar a classe que realmente não vai destruir todas as outras instâncias deste elemento quando mudamos algo. Então eu sempre copiar elementos e colá-los sobre as sub-páginas diferentes. Mas em cima das classes existentes, se eu quiser modificar algo como preenchimento aqui, estou apenas adicionando outra classe. Se eu apenas deixá-lo como está, ele irá modificar automaticamente este elemento na página inicial também. E eu realmente não quero isso. Então vamos ter empilhamento de 80 pixels. E aqui temos. Agora reutilizamos três elementos e podemos reutilizar ainda mais elementos, incluindo esta seção de contêiner de conteúdo de bloco inteiro com a coleção menos borracha. Toda vez que vejo algo que pode ser reutilizado em todo o meu site. O que eu faço é tentar colocá-lo no guia de estilo. Em algum lugar. Em meus guias de estilo, eu posso ter páginas separadas para todos os componentes, mas em nossa estrutura é bastante simples. Nós realmente não precisamos ter páginas separadas, então talvez vamos colocá-lo neste contêiner enquanto temos cartões. E agora eu tenho esse elemento reutilizável. Eu posso dar-lhe um nome de bloco carrinhos wrapper e também criar um símbolo fora dele mais tarde para que eu possa reutilizá-lo. Mas por enquanto é o suficiente para ele ficar no meu guia de estilo. Agora o que eu posso fazer é voltar para a página inicial e copiado recipiente de conteúdo bloco inteiro que eu vou, ou talvez toda a seção que irá posicioná-lo, bem como nesta página de postagem do blog e colá-lo aqui. Vamos para esta página e vamos clicar no elemento corpo para selecioná-lo. Agora Comando V para colar toda a seção. É sempre melhor colar a partir do elemento corpo porque ele não terá quaisquer conflitos em contêineres. Agora, como o título e o fundo, e aqui temos a coleção menos wrapper. Tudo o que realmente precisamos mudar na coleção dessas configurações de borracha é não limitar os itens, porque queremos exibir todos os nossos artigos de blog aqui. Então eu só desmarquei itens limite. E aqui temos, está pronto. O bloco 0 páginas de postagem quase pronto. O que eu preciso fazer é adicionar outra classe no topo desta seção de categoria de bloco. Novamente, eu não quero modificar a seção que eu tinha na página inicial para que eu estou usando classe de combinação para fazê-lo. Agora, temos margarinas para a seção B, herói, herói e categoria. Então, primeiro precisamos seção herói livro, selecione isso e adicione outra classe de combinação para que possamos se livrar deste fundo margem. E vamos bloquear ou postagens aqui. E isso se livra da rede inteligente. Podemos nos livrar dele completamente e, e reduzi-lo a 0 pixels. E, em seguida, a partir da seção de categoria, olhar seção categoria, podemos alterar essa margem. Novamente, temos classe de combinação separada para isso, então não vamos mudar nada em nossa página inicial. E agora temos o Morgan Asper esse design. O que mais queremos fazer aqui? Bem, você pode criar nesta coleção menos borracha. Você também pode criar paginação significa que quando você vai para as configurações, você pode verificar esta pequena opção de itens paginados e, em seguida, você será capaz de decidir quantos itens da coleção você deseja exibir por página, temos cinco itens Aqui. Você pode visualizar duas páginas que foram geradas porque temos 10 posts, então temos duas páginas e você pode alternar entre páginas. E como você pode ver também, temos na parte inferior, os botões anterior e seguinte que estão sendo exibidos pelo Webflow, podemos ter nove itens para que tenhamos três linhas. Parece muito bom. E também quando você clicar neste botão Avançar, você irá para a segunda página. Nós só temos um elemento aqui agora, pode obviamente estilo próximo e botões anteriores. Se você selecionar este botão, você também pode mostrar a contagem de páginas, e isso exibirá o número de páginas na parte inferior do botão. Então aqui temos 2, segunda página de dois, e aqui você tem FirstPage de dois. E se você ir para a página apropriada e selecionar este botão, você pode estilizá-lo como quiser. Para nós, já temos botão grande classe e também esboço classe que podemos usar completamente para criar o botão de acordo com o nosso guia de estilo. E a mesma coisa que queremos fazer para o botão anterior, mas para tê-lo selecionado, Vamos talvez ir para a segunda página e vamos ver o que estamos fazendo. Novamente, aplique este bico inferior classe e, em seguida, combinação classe de contorno. E aqui temos nossos estilos de botões para esta contagem de páginas. Eu acho que eu realmente não preciso disso, então eu vou apenas desselecioná-lo, mas você pode estilizá-lo como quiser. E para todo o elemento de paginação que você pode selecionar no Navegador. Agora, vamos definir a classe para esta nação saco de livro elemento. E também vamos aplicar margem para o topo deste elemento. Digamos 26 pixels. Agora vamos visualizar nossa paginação anterior e próxima página, ele funciona. Então está tudo pronto. Estamos quase prontos. A propósito, se você quiser usar algum tipo de paginação diferente com números, algo assim. Bem, não é realmente possível no Webflow agora, mas a paginação que temos com apenas alguns cliques, eu acho que está tudo bem. Vamos também certificar-nos de que a ordem de classificação está correta para esta página de oboés de bloco específico. E é porque é do mais novo para o mais antigo baseado na data de publicação. Então está tudo bem. Eu realmente não precisava mudar isso. Mais uma coisa que eu posso adicionar a este livro, oh, página de posts é o meu rodapé. E você pode fazê-lo selecionando o elemento corpo e entrar em símbolos. Ou você pode simplesmente pressionar o Comando E e, em seguida, procurar o rodapé. Esta é uma maneira muito útil de encontrar elementos Command E, em seguida, você encontrar qualquer coisa no Webflow. Como você pode ver, eu tenho todos os posts selecionados agora porque eu estou nesta página. E se eu quiser mudá-lo, este é um componente. Isso significa que se eu fizer alterações em HTML, isso estará disponível em toda a página. Então, se eu mudá-lo para 0 artigos e voltar para a nossa página do blog, você verá que há todos os artigos aqui também. Então estamos praticamente prontos com esta página. E como você pode ver, reutilizar elementos e técnicas que aprendemos é realmente eficiente. Vejo você na próxima lição. 18. Página de categorias: Olá e bem-vindos à próxima lição. Agora vamos trabalhar com páginas CMS dinâmicas. Então vamos para páginas de coleção CMS. E aqui temos categorias modelo, esta página é roxo e essas são páginas especiais geradas pelo CMS. Eles permitirão que você visualize os itens individuais. Por exemplo, agora estamos visualizando a cadeia de blocos e itens. E também essas páginas tem mais alguns superpoderes. Vou mostrá-los mais tarde. Agora vamos criar uma estrutura básica para estas categorias modelo adicionando o nosso menu, bem como o nosso rodapé e no meio, eu vou apenas pedir emprestado algo de bloco ou posts. Este cabeçalho é muito legal. Então vamos selecionar seção bloco herói, e vamos colá-lo em nosso modelo categorias entre o menu de bloco e o rodapé. Agora vamos voltar para bloquear todas as postagens para que possamos copiá-lo ainda mais. Como podem ver, somos um pouco preguiçosos. Nós realmente não queremos criar novos elementos. Em vez disso, estamos apenas copiando e colando. Mas isso é muito bom porque temos tudo no lugar com as mesmas classes e os mesmos componentes. Quando o alteramos em uma página, ele será alterado automaticamente em todas as outras páginas. E vamos fazer este herói do bloco de seção em um segundo. Mas primeiro, vamos nos certificar de que temos seção categoria bloco vinculada à seção adequada. Vamos selecionar a coleção menos wrapper. E aqui temos que filtrar. E essas páginas roxas, as páginas CMS geradas automaticamente, têm essa grande vantagem que eles podem basicamente vincular ao elemento atual, ao item atual no CMS. Então, neste caso, temos categorias vinculadas, que possamos vincular a categoria atual. Isto é bastante exclusivo para estas páginas roxas. E graças a isso, podemos clicar no menu de marketing de software e dispositivos móveis. E ele vai automaticamente obter o post seus artigos da categoria correntes. Então isso é muito legal. Vamos deixá-lo para a categoria correntes e salvá-lo. E tudo o que precisamos mudar agora é a seção de artigos antigos aqui. Precisamos chegar a este cabeçalho artigos antigos e substituí-lo com a categoria atual. Mas o que podemos fazer é pegar emprestado o elemento de, eu acho que a página do blog que criamos aqui temos esta seção títulos e que são coleções e eles se vinculam ao elemento apropriado. Então podemos emprestar a coleção inteira menos daqui. Mas, a propósito, podemos usar coleções e estou fazendo isso para mostrar que também podemos usar coleções na página de categorias. Mas se você está na categoria pagar nesta página roxa, você realmente não precisa de coleção. Você pode simplesmente selecionar o cabeçalho e usar as categorias de dados imediatamente. Portanto, há basicamente duas maneiras de fazê-lo. Basta selecionar o cabeçalho ou, e usar os dados do nome da categoria de coleta. Ou você pode usar a coleção e, em seguida, você pode vinculá-lo, neste caso duas categorias correntes e tê-lo exibido como blockchain. Duas maneiras. Eu só queria mostrar-lhe isso, e eu só quero que você saiba que você nem sequer precisa desta coleção para isso funcionar, você precisa desvincular a instância do símbolo, selecionar o cabeçalho, e alterá-lo em propriedades. O contrário é usar a coleção. E você pode usar coleções nesta páginas roxas também. Então, aí está. Há algumas coisas especiais sobre as páginas roxas que exploramos agora. Todas as categorias estão trabalhando e exibindo nomes corretos , bem como artigos conectados a esta categoria com paginação. Então estamos quase prontos. O que podemos fazer é também criar páginas separadas para autores e tags. Mas este seria o mesmo processo como nos repetirmos. Então eu acho que você pode fazer isso sozinho. E o que vamos nos concentrar como modelo de postagens de blog, que é a página com conteúdo real de nossos artigos. Então vamos nos concentrar nisso na próxima lição. 19. Página de publicação no blog: Olá, bem-vindos à próxima lição, e aqui estamos no XD. Esta é a maquete para o nosso blog posts página única. No topo temos uma imagem do que o conteúdo. Então, na parte inferior, temos alguns artigos vinculados provavelmente da mesma categoria. Há também um título e as informações sobre quando este post foi criado por quem e à direita, temos apenas uma seção estática com boletim informativo e a seção que nos permitirá compartilhar nas mídias sociais. Então, sem mais delongas, vamos começar e vamos criar nossa página de modelo de postagens de blog. Esta é a página roxa. Significa que podemos alternar entre os itens do bloco aqui. Aqui temos o primeiro item do livro, mas podemos ir a qualquer artigo que tenhamos. Lembre-se que esses foram artigos gerados automaticamente pelo Webflow e nosso CMS. Então nem precisamos criar alguns dados fictícios. Seremos capazes de alternar entre eles. Vamos criar a estrutura básica desta página. Então vamos adicionar um componente que é o nosso cabeçalho, também um ESSEC, vamos adicionar um rodapé, mas entre eu preciso esta seção tornou-se 0. Então eu estou apenas copiando esta seção e eu vou colá-la no meu modelo de postagem de blog. E, a propósito, eu já disse na lição anterior que nós realmente não precisamos usar itens de coleção em páginas roxas. Por exemplo, quando temos, digamos título, podemos obter texto de postagens de blog para este elemento sem ter que ter esses itens de coleção. Então poderíamos fazê-lo na lição anterior também. Mas eu queria te mostrar uma coleção. Mas nas páginas roxas podemos usar os dados da coleção diretamente sem qualquer necessidade de ter esta coleção menos rapper, o que eu vou deixar aqui é apenas a estrutura com imagem de herói de bloco e quatro loci girado. Vou adicionar outra classe de combinação para que não modifique nada na página do meu livro. E isso será postagens de blog. E agora vamos alterar as propriedades deste para ter a altura de 80 pixels projeto Asper. E para a imagem do herói do bloco, eu também quero adicionar uma classe de combinação. Vamos criar blog pós-aula. E vamos ter essa imagem espalhada por todo o contêiner. Então vamos ter uma largura de 100%. E também precisamos mudar o raio da borda para que tenhamos 12 pixels de raio em cada canto. Como copiamos isso, esta imagem já está vinculada ao artigo. Então, quando mudamos o artigo, podemos visualizar imagem diferente. Temos fotos diferentes para cada artigo. Agora vamos adicionar outro elemento que vamos criar seção. E dentro precisamos de um contêiner. Esta seção será seção para o nosso artigo. E eu quero dividi-lo em duas colunas e criar isso do zero. Sabemos a partir dos elementos de reutilização porque é bastante único. Vou dar-lhe um nome, seção de postagens de blog. E para o recipiente em si, Vamos criar conteúdo postagens de blog para este recipiente, Eu também quero definir a largura máxima para ser 1080 porque eu quero que ele seja um pouco. Menor que a página inteira. Quero que o conteúdo seja legível. Vou dividi-lo em duas colunas, mas ainda quero ter, digamos, 70 ou 90 sign-ins por linha para que seja mais confortável de ler. Além disso, eu estou adicionando 20 pixels de preenchimento em cada site para este recipiente post blog, isso é muito legal porque em tablet e celular terá este preenchimento definido para 20 também. E isso será responsivo agora, dentro do que podemos usar como colunas ou podemos usar d-block simples com Flexbox ou podemos usar grade. E acho que essa grade é a melhor, a mais versátil que não podemos ouvir. Então vamos ter concordado com uma linha e duas colunas. Agora podemos acessar esta saudação Isso é aplicar essas alterações, renomear a classe para seção post blog. Vamos mudar para a ganância do blog. E agora vamos editar esses grandes novamente e mudar as frações, mudar o tamanho das colunas porque eu quero que esta primeira coluna seja, digamos 1,75 ou duas frações, e a última seja uma fração para que tenhamos esta barra lateral de lado que é mais estreita do que o conteúdo real. E dentro da grade vamos adicionar aos blocos. O primeiro será para o conteúdo do nosso blog. Vamos mudar o nome da turma. E o segundo, vamos criar este bloco D. Isso vai ser para amarelo. Vamos colocá-lo nos posts do blog, cumprimentar, e isso vai ser para o nosso lado, seção de lado e boletim informativo, bem como opções de compartilhamento. Então temos a estrutura adequada agora, recipiente seção, saudação e, em seguida, div conteúdo. Esta é a estrutura que eu principalmente, para a maior parte do tempo que eu uso para este tipo de tarefas. E agora o que eu quero fazer é recriar este título e legenda, bem como informações sobre a data e o autor. Então não temos nada que possamos reutilizar. Então vamos criar outro d-block que vai ser bloco de título post blog. Dentro deste bloco de título, preciso da estrutura da legenda. Então eu vou usar o livro didático aqui. Em seguida, novamente pressione a para adicionar outro elemento que seria o nosso cabeçalho. E, novamente, você pode usar a pesquisa no Webflow para adicionar elementos. Você realmente não precisa selecioná-los no menu. Você pode pressionar Comando E e, em seguida, digite parágrafo ou cabeçalho, e você vai tê-lo. Aqui temos por alguém, por autor e depois na data específica, por exemplo, Gen 5. Agora o que eu gostaria de fazer, eu preciso mudar. Preciso ter esses dados dinâmicos. E como eu lhe disse antes, Isso não pode ser feito, pelo menos na minha versão do Webflow com uma extensão. Então, seria a maneira mais fácil de envolver isso com span e, em seguida, ir para configurações e, em seguida, conectar-se aos dados apropriados do CMS. Mas não é possível. Então eu preciso deletar isso e eu preciso criar três elementos exatamente como fizemos, assim como fizemos para o botão. Precisamos criar vários blocos de texto. O primeiro conterá as informações sobre isso. Vamos dar-lhe uma legenda de nome, blog, post. E o primeiro terá a informação sobre o autor. Vamos mudar isso para inline-block. Então teremos a informação sobre a data. Então vamos nos certificar de que temos propriedade definida corretamente antes de copiar e colar que várias vezes. Quando usar cinza escuro para isso. E agora podemos copiar e colar isso duas vezes ou três vezes ainda porque precisamos BY e depois o nome do autor. Além disso, precisamos dividi-lo com texto ligado. Então teremos a data certa. Ok. Então, sim, isso é muito inconveniente termos que fazer isso assim. Mas como escritor, precisamos de alguma margem para o lado direito. Quatro ou cinco pixels geralmente é suficiente para um espaço. E agora nossa estrutura de direção está pronta. Temos poucos livros didáticos. Vamos selecionar o primeiro. Isso é legendado, então vamos pressionar Command Return e usar nossa legenda de classe existente no guia de estilo. E eu acho que o bloco título do post do blog está pronto. Vamos olhar, olhar conteúdo post e adicionar outro elemento aqui que seria parágrafo. E este parágrafo é especial. Então vamos criar uma classe para isso, blogposts trecho. E vamos criar margem para o fundo e para o topo. Vamos adicionar 32 pixels de margem. Além disso, precisamos alterar algumas propriedades de texto de acordo com nosso design. Então vamos mudar a fonte, peso e tamanho. Vamos usar 22. E para a altura da linha, vamos usar 32 pixels. E isso é de acordo com o nosso projeto. Agora vamos nos posicionar novamente no conteúdo da postagem do blog e adicionar um elemento de rich text. Chegamos ao texto em nosso banco de dados CMS. Assim, o tipo de campo que usamos para o conteúdo do artigo é atingido texto. Então agora podemos usar este bloco x alcançado para formatar toda a estrutura do artigo. E isso é muito legal porque alcançou x blog tem estilos realmente separados e podemos estilizá-lo em nosso guia de estilo, e nós já fizemos isso temos artigo de blog como uma classe para o nosso elemento rich text que deve ser usado em postagens de blog modelo. Vamos selecionar este bloco de rich text e dar-lhe uma classe de artigo de blog e fazê-lo. Então nós temos agora copiado e os tempos são os mesmos que em nosso guia de estilo. E agora nossa estrutura está quase pronta. Oh, precisamos fazer é adicionar outro componente que será nosso rodapé e também criar uma estrutura para as ações do site. Então, antes de fazer isso, talvez vamos selecionar os elementos aos quais queremos aplicar dados dinâmicos. Mais uma vez, nós temos esta página roxa então nós realmente não precisamos de coleções, a fim de vinculá-lo aos dados da coleção de postagens do blog, nós podemos obter o texto da postagem do blog aqui. E essa seria a nossa legenda. Então, precisamos apenas percorrer o nome da categoria. E como uma legenda, vamos usar o nome da categoria para o título real. Usamos o nome dos posts. E aqui temos alguns dados dinâmicos também, graças às conexões que fizemos em nosso CMS, temos ao ar livre e tudo o mais vinculado à coleção de postagens do blog. E é assim que podemos obter esses dados do CMS para a data em que temos duas datas aqui adicionadas automaticamente pelo CMS, atualizadas e também publicadas em. Neste caso específico, é claro, queremos usar publicado em e também Webflow. Vamos formatar esta data aqui temos junho de 2006, mas podemos mudar como esses dados são formatados e exibidos em nosso bloco. Existem poucos formatos diferentes que podemos selecionar. Como você pode ver, muitos deles na verdade, podemos exibir a data inteira. Podemos usar apenas mês ou dia, e sim, podemos fazer o que quisermos com este encontro. Isto é muito versátil. Vamos deixar a perna como S, e agora vamos pegar a cópia do CMS para o nosso blog post trecho. Vou ligá-lo ao trecho. E para o artigo do bloco, precisamos vincular o artigo inteiro ao campo que temos. E isso é conteúdo. Você pode ver que este é alcançado elemento de texto. Assim, o tipo desta propriedade no CMS também é rich text e isso nos permitirá apenas vincular os dados deste campo ao conteúdo do nosso blog post. Ok, então aqui temos dados dinâmicos para o lado esquerdo da nossa página de postagem do blog. Se mudarmos as postagens, agora, você pode ver que temos título diferente, seção diferente e autor e assim por diante. Então, tudo está funcionando corretamente. E assim nas páginas roxas, podemos selecionar itens diferentes do CMS e vemos tudo. Agora, na próxima lição, tudo o que precisamos fazer nesta página é criar ações do site que serão boletim informativo e opções de compartilhamento. Te vejo mais tarde. 20. de publicação: Ei, bom te ver na próxima aula. E se acha que pode perder alguma lição no meio , não é esse o caso. Acabei de criar esta borracha boletim e envoltório social apenas entre as lições porque é estrutura super simples que você já sabe do curso básico. Então eu pensei que seria melhor usar seu tempo não apenas para criar contêineres e alinhamentos, mas para mostrar algo realmente importante e algo mais emocionante do que isso. E esta é a estrutura de borracha do boletim informativo. Temos parágrafo e bloco de formulário. Dentro deste formulário, temos apenas um e-mail. O que eu fiz foi copiar isso do rodapé e mudar o tamanho ligeiramente. Em seguida, temos wrapper social com parágrafo e d-block com três ícones de mídia social. Esses são links e ao passar o mouse, eles têm esse outro estado que apenas mudará a cor do ícone. É isso. Estrutura super simples e podemos continuar, podemos fazer esta estrutura fixa em nosso site. Então vamos para a propriedade position e podemos alterá-lo para fixo ou pegajoso. Nós usamos fixo para o nosso menu de navegação para apenas encaixá-lo no topo do nosso site. Mas a diferença entre fixo e pegajoso é que sticky vai funcionar e apenas colocar este elemento no lugar, dependendo do leilão do usuário, dependendo da rolagem, posição de rolagem do nosso site. Então, se dermos uma olhada neste pixel muito superior do navegador e do pixel Topsy das ações de visão. Podemos apenas fazer um dependente um do outro, alterando esta propriedade para dizer 0. Isso fará com que fique no topo do navegador. Nosso pixel superior das ações deste site atinge o elemento superior do navegador. Agora 40 alinhamento eu vou usar início no caso de isso ser ganância para que isso funcione corretamente. E agora eu tenho este conjunto para 0. Então, quando esses tópicos fora do site ação atinge o 0 pixel do navegador. Então, o topo do navegador, ele vai ficar preso nesta mesma posição. O que queremos fazer é compensar isso um pouco para que tenhamos o espaço para o nosso menu de navegação, bem como alguns, um pouco de preenchimento abaixo. Então vamos ter 100. E isso irá compensar o ponto de aderência inicial dos elementos de sedução para 100 pixels do topo. Então, quando chegarmos a 100 a partir do topo, ele vai ficar como S. Então é ainda melhor para pré-visualizar isso usando o nosso comando de visualização Shift P. E aqui você tem isso. Então agora está bem encaixado no lado direito. E isso é basicamente tudo o que temos que fazer para que este elemento fique preso neste lugar. Enquanto isso, notei que no meu design, também tenho esse elemento TOC na foto. Então eu posso pegar emprestado o elemento TOC com esta coleção. Provavelmente. Vamos copiá-lo e colado em nosso modelo de postagem de blog. Vamos ter este invólucro de impostos aqui. Esta é definida para ser a posição absoluta 16, 16 pixels. Agora está posicionado para o corpo. Mas se mudarmos a posição do herói do bloco, modo que seja um parente, agora ele se torna o poder relativo. E para este invólucro fiscal, e tudo parece muito bom. Então, neste tags dentro estamos exibindo a tag, bem como elemento em destaque, dependendo se este post é definido como destaque em nosso CMS. Vamos lembrar, vamos para suas configurações. E aqui temos a condição quando o recurso está ativado, ele terá esse recurso exibido. Vamos ver se funciona. Vamos às postagens do nosso blog. Coleção e que é selecionar isso muito ambos. São 15 melhores quarteirões a seguir. E vamos mudar em destaque para recurso de varredura, alternar para, Salvar. Agora nós realmente não temos que publicar para ver isso em nosso designer. E em destaque agora é exibido para que tudo funcione corretamente. Mas se você quiser ver isso em sua página de trabalho, você teria que publicar isso e então você pode visualizar. Ok, agora a outra coisa que eu gostaria de fazer é na parte inferior do post, eu gostaria de exibir a lista de post.html vale a pena ler. Então eu vou para a página do blog e copiar toda essa categoria de bloco e colá-lo em nosso modelo de postagem de blog. Então, vamos selecionar o elemento do corpo, colá-lo na parte inferior. E vamos ver esta seção. Esta seção é feita com base na coleção, pelo menos itens e eu não necessariamente tenho que usar coleção menos nas páginas roxas, mas eu posso. Então, por que não? Então agora eu preciso mudar este título. Não quero que seja dinâmico. Então vamos desmarcar este getText da postagem do blog. E vamos dizer que vai continuar lendo três pontos e excluir o fundo. Não preciso do botão. Vamos reposicionar esta seção acima do rodapé. E agora tudo o que eu preciso fazer é ter certeza de que eu tenho o post correto exibido aqui. Se eu verificar a coleção menos configurações, você vai ver que ele recebe os posts de categorias, software, o que eu preciso fazer, e eu não posso fazer isso quando eu estou no lado roxo, é selecionar esta categoria de blog atual postagens. Então, ele saberá automaticamente que estou neste software dentro da categoria de software ou blockchain ou marketing. E se eu mudá-lo, digamos a este post, aqui temos os posts do software. Se eu mudar para o outro, é uma categoria indiferente. Agora podemos ver os posts de marketing. Então isso é muito legal. Obviamente, você pode determinar quantos itens você gostaria de exibir aqui e você pode determinar a ordem de classificação, que agora é mais recente para mais antiga na data de publicação. Então vamos, vamos publicar nosso site e vamos pré-visualizar isso no navegador. Depois de publicar, você pode ir para a página inicial e você pode ver que temos este post em destaque, o mais novo com a bandeira em destaque que está sendo exibido dinamicamente. Temos também todos os artigos recentes e artigos de diferentes categorias aqui. Então, abaixo, temos artigos, artigos recentes apenas de categorias específicas. E também temos links e botões que ligam para a página adequada que nos permitirá exibir todos os artigos em nosso blog ou os artigos de categoria específica para esta categoria, você também pode ir do menu. E, finalmente, se você quiser visualizar o post exato, o artigo exato, basta clicar neste artigo e novamente, todos os dados aqui são dinâmicos. Você tem o conteúdo da postagem e informações de fotos sobre outros posts que valem a pena ler. E eu acho que a estrutura base do nosso site está agora pronta. E você sabe, tudo sobre coleções CMS e páginas CMS. 21. Configuração de pesquisa: Olá, Bem-vindo à próxima lição e vamos acessar nossa barra de navegação. Então este é um componente de menu de caras. Dentro dele temos a seção Menu com marca e menu de navegação. E nesta seção, eu gostaria de adicionar um componente específico do outro menu. Estes são os componentes de pesquisa, então vamos clicar em Pesquisar. Vamos adicioná-lo aqui, e agora podemos reformulá-lo e podemos editar as configurações de pesquisa. Então este é o surto que nos permitirá procurar os elementos CMS e exibi-lo na página de resultados de pesquisa separada. Vou mostrar-lhe como personalizar o componente de pesquisa e esta página de resultados da pesquisa. Agora, o que queremos fazer como posicionar os elementos, então temos esse pico e dentro há uma entrada e botões. Então, para descarga, podemos exibir, definir exibição para flexionar e, em seguida, alinhar e justificá-lo para o centro e meio. Aqui temos um preenchimento extra que podemos redefinir. Basta clicar opção no elemento para reiniciá-lo neste número, ou apenas selecionar 0 aqui. E para o botão de pesquisa, também queremos redefinir o preenchimento ou alterado ligeiramente para que tenhamos preenchimento de sete ou seis pixels. Então isso está em linha com o campo de entrada de pesquisa. Agora, para todo o componente, eu acho que nós temos algum preenchimento extra aqui também. Vamos reiniciar. Diz “selecione 0”. E agora podemos remodelá-lo ligeiramente para que tenhamos um estilo agradável para este elemento, tanto para o seu estado estático como para o estado pairar. O que eu gostaria de fazer é definir o estilo de borda para sólido. E eu quero definir a borda sólida para a parte inferior da entrada de pesquisa. Vamos selecionar isso talvez cinza escuro, cinza escuro e cor. Ok, também o mesmo estilo para a fronteira que eu gostaria de ter para o botão de busca. Oh, ok. Eu tenho que definir o estilo para sólido, certo? E pelo botão de busca, vou fazer o mesmo. E vamos mudar a cor para transparente, essa cor de fundo. E vamos definir a borda inferior para ser apenas e esta cor cinza escuro, ok, e mais tarde eu vou mudar a opacidade deste elemento com base no usuário pairando sobre o elemento de pesquisa. Mas o que eu gostaria de fazer agora é mudar o botão de pesquisa para um ícone. Vou para Configurações do projeto para o meu site de fluxo de trabalho e ir para fontes. Preciso instalar fontes. Eu já instalei a partir do curso anterior para que você possa conferir o curso básico e como instalar fontes personalizadas. O que eu fiz é que eu instalei esta fonte impressionante clicando no botão de upload e apenas instalando as fontes TDF. Eu tenho FAA para 100 marcas por cento e novecentos. Agora eu posso usar, para que eu possa usar ícones de Font. impressionante, Deixe-me procurar um ícone de pesquisa e agora copiar este glifo ícones para a área de transferência. Então vamos copiar o glifo Unicode. Clique nisso. E agora eu tenho este ícone pronto para ser usado no meu site ou na minha página. Vamos em frente e acessar o elemento de busca. Mais uma vez, preciso apagar tudo o que está aí e colar este glifo. Ok? Mas agora eu também preciso mudar a tipografia para que a fonte aqui é FA, Então IT noite centenas. E obviamente eu preciso mudar a cor da fonte para uma cor cinza escuro. Mais uma vez, vamos clicar sobre isso e aqui você tem o ícone. Agora podemos ajustar, ajustar o tamanho, o tamanho da fonte para alterar o tamanho do ciclo. E é assim que você aplica ícones impressionantes de fontes personalizadas aos elementos que agora você pode usar como botões, por exemplo, no menu de pesquisa. Em seguida, vamos ajustar este bloco para que tenhamos o espaçamento correto. Vamos posicioná-lo ao lado do logotipo. Esta talvez não seja a melhor maneira de posicioná-lo. E você também teria que verificar as versões tablet e mobile. Mas vou deixar-te com isso. Isso não é a coisa mais importante, mas o que vamos fazer é criar isso no estado de foco para entrada de pesquisa e botão. E o que vamos fazer é para todo o componente de busca, vamos baixar a opacidade para cerca de 40% neste estado estático. E enquanto pairamos sobre este elemento, vamos mudá-lo para um positivo 100. Agora, se você pressionar Command Shift P ou clicar no ícone para visualizar, você pode passar o mouse sobre este elemento. E aqui você tem um bom efeito. Se você quiser que esse efeito seja animado, você também pode criar o efeito de transição ou criar sua própria animação personalizada no Webflow. Isso é algo que já discutimos no curso básico o aqui nas configurações você tem o botão para ir para a página de resultados da pesquisa. E, alternativamente, você pode clicar nas páginas e nas páginas de utilidade. Agora você tem página de resultados de pesquisa que você pode estilizar e você pode ajustá-lo às suas necessidades. Aqui você tem o contêiner, há um cabeçalho com resultados de pesquisa. É estática. E o que eu gostaria de fazer é criar uma nova classe para este contêiner de resultados de pesquisa. E apenas um pouco compensá-lo do topo da página com o Morgan. E aqui você também tem entradas de pesquisa, como botões da mesma estrutura que tínhamos um, um componente de pesquisa. O que eu gosto de fazer é eu quero usar classes personalizadas para esta pesquisa para gerar automaticamente o nome da classe. Isso está tudo bem. Agora vamos criar isso do zero. Não quero copiar os mesmos estilos que tenho na barra de navegação. Em vez disso, eu gostaria de criar um pouco diferente olhando entrada de pesquisa e botão de pesquisa para que possamos tê-los espalhados horizontalmente por toda a página de resultados de pesquisa. E também talvez vamos aplicar algum estilo, podem ser alguns cantos arredondados para este elemento. E no segundo em que vamos passar para os resultados da pesquisa e eu vou explicar como funciona exatamente. Mas agora vamos aplicar margem de 12 pixels para a parte superior e inferior esquerda desta entrada, e também para o canto superior direito e inferior direito para o botão de pesquisa. Agora, para os resultados da pesquisa, temos algo chamado wrapper de resultados de pesquisa. E isso é um tipo de especial, então podemos chamá-lo assim, coleção especial de itens que irá exibir todos os itens de resultado de pesquisa. Isso é muito semelhante à lista da coleção. Como você pode ver, temos um item e se restyled este um item vai fugir e livro didático e parágrafo. Isso será automaticamente herdado através de todos os itens. E como isso é algo como uma coleção no índice de pesquisa, ele lhe dará alguns dados desta coleção, como URL da página e título de pesquisa e trecho de pesquisa. E vamos adicionar e usar todos esses campos em um segundo. Mas você pode tratá-lo como. Coleções de energia, algo como uma coleção. E lembre-se que todos os dados estão aqui e é bastante semelhante à coleção menos que usamos em grande estilo. Tão simples, certo? Temos ligado, livro didático e parágrafo aqui. O link agora é o título deste elemento, mas você pode usar, por exemplo, a imagem para adicionar uma imagem aos resultados da pesquisa também. E agora, se você acessar suas configurações, você pode obter imagem do nosso índice de pesquisa, coleção pai índice e, em seguida, selecionar a imagem de pesquisa do imposto OG para esta página específica. Então, por que adicionamos a coleção, exemplos de itens de coleção para as postagens do blog, ele automaticamente, as imagens também. E essas imagens são usadas no Webflow como imagens OG nas configurações da página. Então, agora insira, ele coleta automaticamente essas imagens do OG e as exibe como a imagem de pesquisa. Muito inteligente, certo? Ok. O que podemos fazer aqui é criar uma estrutura adequada para todos esses elementos. Então, por exemplo, crie um grande bloco de link. E dentro deste bloco lingual vamos adicionar alguns contêineres de diff técnicos para que o primeiro contenha o 40, e o último conterá o bloco de texto com título e talvez alguma descrição. Vamos criar um resultado de pesquisa classe sendo, e aqui temos imagens de resultados de pesquisa e também textos de resultados de pesquisa. Ok? Agora, podemos mover elementos ao redor agora e posicioná-los nas seções corretas. Mas este link não pode ser realmente movido dentro dos resultados da pesquisa. O texto faz porque temos um link e não podemos aninhar link dentro um do outro no Webflow. Então vamos apagar esse link. Vamos adicionar isto mais tarde para o livro didático. Vejamos, temos essa URL de página que é basicamente tirada da coleção. Nós realmente não precisamos deste URL, então eu vou apagar isso. E eu vou apenas usar este parágrafo. O parágrafo está pegando os textos de algo chamado “snippet”. Este é texto simples e é gerado automaticamente também a partir da página que ligamos dois, nós pagamos URL, página, descrição da pesquisa, título da pesquisa, e também um trecho. Então, onde podemos acessar esses detalhes? Como podemos ajustá-los? Vou mostrar-lhe isso em detalhes na próxima lição. Mas vamos dar uma olhada nas propriedades desta página, Digamos que esta página de post local. Portanto, cada lote tem as propriedades gerais e configurações de SEO. Mas o que você está interessado é nas Configurações de Pesquisa do Site, e essas são as configurações que podemos usar lá. Então temos esse título, descrição de dançarinos e imagem de pesquisa. Como você pode ver, esses são os mesmos que SEO, título, tag de descrição e URL de imagem de gráfico. Isso significa que ele irá coletar automaticamente os dados da guia anterior, este SEO Settings. E aqui temos o bloco 0 posts, por exemplo, em alguma meta descrição. E é aqui que ele obtém os dados para pesquisa, para exibição na página de resultados da pesquisa. Então precisamos usar essa meta-descrição e criado aqui. Ou podemos simplesmente desmarcar essas caixas de seleção e criar nossas próprias descrições para resultados de pesquisa. Resultados especificamente. Certo, vamos criar a estrutura primeiro. Então vamos voltar para os resultados da pesquisa e um cabeçalho que estaria indo para. E eu gostaria de mostrar o título. Então, o nome dos resultados da pesquisa aqui, deixe-me obter o texto dos resultados da pesquisa e exibir o título da pesquisa. E isso é quase tudo para a estrutura. Mas eu gostaria de fazer isso um link, fazer todo esse resultado um link para nossa página de pesquisa, do nosso crachá de pesquisa para a página de postagem do blog. Então eu vou definir o URL GET do URL da página para todo este contêiner, este contêiner link resultado de pesquisa. Assim, quando alguém clicar nisso, ele vai para aquele posto. É isso por enquanto. Vamos continuar na próxima lição. 22. Pesquisa avançada: Bem-vindos à próxima lição. Nós apenas começamos exatamente de onde paramos na lição anterior, temos este link de resultado da pesquisa. E agora vamos definir o cursor para ponteiro para que UX sábio, isso é mais intuitivo que você pode clicar no resultado da pesquisa. Além disso, altere a exibição para flex. Vou deixar todas as configurações como estão, mas precisamos cuidar das fotos. Como você pode ver, os tamanhos das fotos são diferentes e está tudo bem, mas só precisamos ter certeza de que sua exibição corretamente. Então vamos usar a imagem do resultado da pesquisa como uma nova classe para essas imagens e alterar a largura máxima para, digamos, 200 pixels. E também vamos aplicar um raio de borda de oito pixels e uma pequena margem de cerca de 18 ou 20 pixels. E para o resultado, os itens também são querer criar um novo item de resultado de pesquisa de classe e espalhar esses itens 25 margem de pixel, e isso seria bom desta forma nossa página de pesquisa está quase pronto em termos de estilo, eu acho que requer no apenas ligeiros ajustamentos. Por exemplo, vamos adicionar alguma margem para a parte superior e inferior do elemento de pesquisa e no elemento corpo, Vamos para Componentes e vamos colar nossos componentes. Precisamos de mais, e também de ter navegação. Então, o menu de bloco no topo, esta página também. E isso gera um pequeno problema para nós porque o que temos aqui terminam no blog também é outra busca. Deixe-me apenas mover a margem ligeiramente e abordou esta caixa de pesquisa porque agora temos duas caixas de pesquisa em uma página. E isso não é o que esperamos, não podemos realmente excluir do menu do blog porque este é um símbolo e eu quero mantê-lo um símbolo. É por isso que eu quero inspecionar isso na Visualização, clique com o botão direito do mouse e inspecionar e ver que tipo de classe é essa. Esta é a onda W para a forma de traço W. Então vamos copiar o nome desta classe que eu encontrei e ferramentas de desenvolvedor. E eu só vou definir nenhuma exibição para esta aula, ok? Então isso irá ocultar este elemento qualquer, mas apenas nesta página de resultados de pesquisa. Então vamos para as configurações da página de resultados de pesquisa e vamos adicionar algum código personalizado neste elemento de código personalizado. Vamos salvá-lo. E você pode, a propósito, adicionar código personalizado dentro da tag head. E também pode fazer isso por mim pouco antes da etiqueta do corpo. Neste caso, queremos adicionar estilos à tag head. Então aqui temos estilo, tipo, e aqui nós digitamos barra de texto, css e insight. Podemos substituir algumas propriedades para o nosso CSS no Webflow. Então precisamos abordar esta mesma classe, então procurar e, em seguida, formulário W4, e queremos escondê-lo. Então vamos definir a propriedade display para entorpecer e salvá-la. Isso não será visível no designer porque temos que publicar essas alterações para ver a visualização, como ela se parece. Então vamos publicar. By the way, há uma maneira de ver essas mudanças no CSS, mudanças CSS simples no designer diretamente. E isso é graças ao ambit HTML. Então você pode, alternativamente, usar HTML incorporar e, em seguida, usar o mesmo código e que seria visível no designer. Agora, podemos ver isso depois de publicarmos nossa página. E novamente, isso é muito legal porque nós. Tenho que procurar em caixas agora. No entanto, temos este componente no tato que está no topo da página de resultados da pesquisa. E, por exemplo, se mudarmos o nome da categoria ou algo assim, ele será automaticamente alterado ao longo de nossos resultados de pesquisa, página de resultados e propagado aqui também. Ok, Nos resultados nós realmente não vemos imagens, mas isso é devido ao fato de que nossa pesquisa é apenas uma pesquisa de exemplo até que nós publicamos isso com Webflow, CMS, pesquisa está usando mecanismo de pesquisa elástico que é um back-end mecanismo que tem que ser hospedado antes de visualizar o resultado. Então, na sua página publicada estática, você não verá realmente o resultado da pesquisa. Você só pode ver os resultados da amostra para que você possa estilizar este elemento. Agora, se você ir para o wrapper de resultados de pesquisa e suas configurações, você pode ver que você tem os resultados como quantos resultados mostramos. Em seguida, o comprimento dos trechos permitirá truncar o texto do trecho. Portanto, dependendo do layout que você criou, talvez você queira exibir 180 sinais ou talvez menos ou mais. Isso se propagará novamente em todos os links de resultados da pesquisa. Além disso, você tem a opção de destacar termos de pesquisa em um snippet. Isso significa que se você usar uma frase e ela está dentro do SNP, a mesma frase está no trecho ou no título. Isso será definido como negrito. Na verdade, isto vai, isto vai acabar com esta frase. Então, se você quiser, digamos, destacá-lo em azul ou talvez amarelo, você pode simplesmente alterar o estilo padrão para elementos em negrito no Webflow. E então você aplica esse estilo para fazer a própria frase que alguém está procurando. E isso é muito útil. Ok? O que mais queremos fazer? O que mais podemos fazer neste resultado de pesquisa, borracha? Bem, existem algumas configurações avançadas que você pode usar para incluir ou excluir elementos da indexação na pesquisa. Obviamente, às vezes você realmente não deseja indexar todos os elementos em sua página. E você deseja excluir páginas inteiras ou apenas algumas seções das páginas de serem indexadas e exibidas como resultado da consulta de pesquisa. Assim, por exemplo, se você acessar o nosso blog ou bloquear todas as postagens e decidir que não deseja que este bloco todas as páginas sejam exibidas nos resultados da pesquisa. O que você faz é inserir configurações assinadas. Basta selecionar esta caixa de seleção para excluir esse patch dos resultados do site de pesquisa. Desta forma. Quando eu digito algo contido neste livro chamado post page, ele não aparece nos resultados. Outra maneira pela qual você pode abordar esses elementos, por exemplo, para páginas de utilitários, você também deseja certificar-se de que eles não estão incluídos na pesquisa. Então, vamos excluir esta página de tais resultados de pesquisa do site. By the way, eu acho que Webflow faz isso por padrão, mas o que você quer incluir principalmente é blog, página post. Então blogposts modelo. Então, este aqui, você tem que ter certeza de que você tem isso incluído nos resultados de pesquisa porque principalmente queremos permitir que nossos usuários para procurar por postagens de blog específicas. E aqui você tem essas descrições que são basicamente as mesmas que SEO, título escuro e descrição escura. Mas você pode torná-los diferentes. E o que é interessante aqui é quando você desvinculá-lo da tag de título SEO, você pode usar campos, você pode usar campos personalizados. E se você clicar no campo, este título de pesquisa pode ser enriquecido com os dados que você tem na descrição no CMS. Então. A partir deste blog postagens modelos que você conectou todas as coisas diferentes como aceitar e nome do blog post nome do artigo. E você pode criar uma estrutura, por exemplo, espaço de nome, espaço traço e, em seguida, por exemplo, nome de categoria. E isso será exibido como o título dos resultados da pesquisa. Então isso é muito legal. E muitas vezes você deseja modificar essas configurações e apenas definir o nome correto para que isso seja mais intuitivo para seus usuários. Deixe-me ir em frente e salvá-lo. E também mencionei que, além de excluir páginas inteiras dos resultados da pesquisa, o que você gostaria de fazer às vezes é excluir algumas partes da página ou seções da página. Então, por exemplo, se você pegar o menu nav que temos em cima de cada página, isso será inútil para indexar os resultados do menu de navegação. Porque, então, se alguém iria procurar, digamos por software ou marketing ou celular, então este cabeçalho está em cada página. Assim, cada página será retornada como resultado da pesquisa. Então nós realmente não queremos isso, mas Webflow é realmente inteligente o suficiente para desativar a indexação desse tipo de componentes. Então, todos os componentes que vamos entrar em Configurações este excluir blog, gerenciar o conteúdo deste dinheiro de pesquisa. Graças a isso, você está seguro porque esses componentes multiplicados em cada página realmente não afetarão os resultados da pesquisa. E, usando os resultados e configurações da pesquisa, você pode realmente excluir da indexação qualquer coisa que você gosta em sua página. Então toda a lista de coleção wrapper ou seção de cabeçalho. Se você não quiser que este cabeçalho seja incluído nos mecanismos de pesquisa, basta ir para Configurações e excluir isso. Então, em nossa página inicial, por exemplo, podemos decidir que realmente não queremos essas seções de cabeçalhos sejam incluídas no aumento. E este é um componente, por isso é automaticamente excluído. Mas para todos os outros títulos, nós apenas temos que ou Heather seções, nós apenas temos que excluir aqueles dos resultados de pesquisa do site. Se pensarmos em nosso bloco e o que queremos deste bloco para ser indexado no site local, resultados de pesquisa do site. Eu acho que devemos apenas indexar as páginas de postagem do blog para que quando o usuário procurar por algo, ele receba apenas os artigos do nosso bloco. Isso significa que geralmente queremos excluir tudo o resto além do nosso modelo de postagens de blog no CMS. Então vamos salvar essas alterações na página inicial. E, obviamente, queremos excluir guia de estilo. Queremos excluir toda a página do blog e postagens do blog. Vamos esta página segura. E desta forma, temos apenas este modelo de postagem de blog que está incluído na pesquisa e retornará todos os artigos que o usuário procura. E, a propósito, se você excluir a página inteira, você pode ver que as configurações de índice de pesquisa estão esmaecidas para elementos individuais. Isso porque toda a página foi excluída. Portanto, você não pode realmente excluir ou incluir quaisquer elementos que estão nesta página. Então, sim, isso faz sentido. Ok, há mais uma dica que eu tenho para você em termos de resultados de pesquisa e exibição de alguns dados personalizados nos resultados de pesquisa. Por exemplo, se você quiser adicionar um livro didático aqui que exibirá o nome da categoria quatro posts do blog que é exibido. Como fazer isso? Bem, isso não é tão simples porque o que podemos fazer aqui é selecionar, obter textos do nosso índice de pesquisa. E se você selecionar isso, você terá todos os campos disponíveis nesta pseudocoleção de índice de pesquisa. No entanto, na pseudo-coleção, nós realmente não temos o nome da categoria. Ok? Então, o que podemos fazer em vez disso é usar qualquer elemento que não usamos, nós não usamos anteriormente. Então, por exemplo, não estamos usando esta descrição aqui. Então, podemos usar a descrição da pesquisa e deixá-la como está agora, mas vá para as configurações de pesquisa para o modelo de postagens do blog. E dentro de tais configurações, podemos apenas definir a descrição da pesquisa para exibir nosso nome de categoria. Então vamos desmarcar o mesmo que SEO e, em seguida, adicionar o campo. E porque este modelo de postagem de blog está vinculado à categoria e o CMS será capaz de exibir na descrição, o nome da categoria. Então tudo o que precisamos fazer agora é publicar este site e pré-visualizar isso. Mas de antemão, só precisamos aplicar algum estilo. Então talvez vamos ao blog. E aqui temos esses elementos que podemos copiar. E há um estilos de imposto. Talvez apenas nos lembremos dos nomes das aulas e aplicamos as classes a este livro didático. Então vamos primeiro usar legenda e, em seguida, Command Return mais uma vez, e que seria bloqueado escuro. Além disso, vamos mudar o posicionamento deste elemento para absoluto. E esta é a posição dois, o primeiro elemento relativo que acontece a ser os resultados da pesquisa. Que invólucro, eu acho que isso é bom. Agora, na posição, só precisamos selecionar um deslocamento. Mas primeiro, vamos ter uma classe extra para que nós não estraguemos a anterior e nós podemos configurá-los novamente ou nós podemos definir o deslocamento de posição. Vamos definir a margem para, digamos, seis pixels. E agora temos. Então temos resultados de pesquisa bastante sofisticados. E você sabe tudo sobre pesquisa na Web no entanto. Então, muito obrigado pela sua atenção e vejo você na próxima lição. 23. Domínio personalizado: Olá, Bem-vindo à próxima lição e esta, vamos explorar como você pode adicionar um domínio personalizado ao site que você cria no Webflow, isso é bastante simples, mas isso requer um plano de hospedagem do Webflow. Então o que eu quero dizer com isso, você teria que comprar um plano de hospedagem em configurações do Webflow, a fim de publicar sob seu domínio personalizado, o que você pode fazer é clicar aqui, clicar no pequeno link e x para o elemento de publicação e então você são levados para configurações e guia de hospedagem. Aqui você tem diferentes plantas para o site e o site com CMS e e-commerce. Nós não usamos e-commerce, Então nós não nos concentramos em que plantas quando você ativar e-commerce em seu site Webflow, então este plano seria padrão para nós, o vínculo CMS é padrão e nós basicamente temos que usá-lo porque nós realmente não pode usar o plano básico. Não há suporte para CMS. E assim que tivermos CMS, só precisamos usar bomba CMS. Isso é um pouco mais caro. Aqui temos acesso à API CMS, e temos a busca do site. Temos três editores de conteúdo e não temos opções. Por exemplo, nenhum upload de arquivo de formulário, mas nós realmente não precisamos disso para o nosso site. Então é assim que vai bem, habilitar o CMS no Webflow força você a usar uma hospedagem web de uma forma que é muito difícil exportar os elementos, embora você possa fazê-lo com CSV e então você teria que criar seu próprio Surge, coisas como esta. Para o plano de negócios. Como você pode ver, você tem mais visitas mensais e mais estático. Saiba a mesma quantidade de páginas estáticas, mas mais envios de forma e limitada, na verdade, e também até 110 mil itens CMS. Lembre-se de que você pode pagar anualmente ou mensalmente, anualmente, você só economizará dois meses de trabalho fora da hospedagem. E o número máximo de itens CMS em qualquer planta em Webflow é de 10 mil. Então você tem que manter isso em mente. Ok, agora eu acabei de adicionar a hospedagem. Eu já tinha meu cartão de crédito conectado à minha conta de fluxo de trabalho, então são apenas dois cliques para comprar uma nova hospedagem. Agora, aqui você pode configurar seu número de celular. E isso é muito importante porque então Webflow enviará uma mensagem de texto quando, por exemplo, seu plano não for renovado, o que significa que seu cartão expirou ou talvez você não tenha fontes em seu cartão ou, você sabe, qualquer erro bancário. Então vale a pena colocar o número de telefone aqui porque então você receberá a mensagem de texto. Obviamente, você receberá e-mails também. Então você pode apenas dizer não obrigado ou apenas fechar esta janela. E o que você tem aqui é a capacidade de definir seu domínio personalizado. E isso é bastante simples. O que você tem que fazer, no entanto, é alterar as configurações de DNS em seu provedor. Mas o Webflow irá guiá-lo através disso. E eu vou mostrar a vocês como eu faço isso para o meu provedor. O que vou fazer é adicionar um domínio existente. Não estou comprando um novo domínio que o fluxo de trabalho está oferecendo via Google. Estou apenas adicionando um domínio existente. No meu caso, este é um subdomínio, então o Webflow só exigirá que eu altere um registro DNS, que é o registro CNAME. Caso você esteja usando um novo domínio de rota, ele também solicitará. Crie outro registro e um registro dentro do seu provedor. E esse seria o registro que aponta para o servidor Webflow com o IP. E neste caso, basta copiar o nome desse registro e o volume. E através do seu provedor de hospedagem, você vai para as Configurações de domínio, você seleciona o tipo de registro. No meu caso, este é CNAME, e então eu coloquei o nome canônico aqui. Alguns provedores são necessários que você coloque o ponto após o nome canônico. Para este proxy SSL vai se sentir calmo. Alguns apenas fazem isso por conta própria, então você só tem que experimentá-lo. E então você tem o host e o host. Você pode copiar o nome do host a partir daqui e basta clicar nele e colá-lo aqui. E aí está. Você só aceita. E depois de um segundo, ele permitirá que você verifique o status desse redirecionamento. Lembre-se que às vezes pode levar até 24 horas, mas geralmente é apenas alguns minutos. No entanto, lembre-se de simplesmente não verificá-lo cada dois minutos porque ele pode ser armazenado em cache no lado do seu provedor. Depois de verificar, você geralmente tem o sinal conectado e tudo bem. Se tiver algum problema, espere. Ou você também pode ir para o site da OMS do verificador DNS. E então você pode verificar como seu DNS se distribui em diferentes servidores de nomes ao redor do mundo e talvez isso lhe dê algum tipo de pista. Mas este processo é bastante perfeito. Você pode adicionar domínios facilmente. E isso significa que o domínio que eu adicionei no meu subdomínio caso, agora está disponível para que eu faça um padrão. E eu quero fazer um padrão. Então você tem que clicar neste pequeno botão Home Make Default para que este domínio seja a raiz. E isso fará com que Webflow não permita a indexação do site de subdomínio do Webflow. Em vez disso, isso será indexado no Google. Além disso, você pode usar um 01 redirecionamentos gratuitos. Então, esses são os redirecionamentos que você pode querer usar do seu site antigo para o novo site se você quiser se livrar do caminho antigo qualquer que seja. Mas você sabe que este velho sopro ainda está em algum lugar, pode ainda estar em algum lugar na Internet. Por exemplo, alguém está publicando o link para este site antigo e você não quer que as pessoas se percam. Você pode simplesmente redirecionar o URL antigo e criar um novo caminho. E, na parte inferior, você tem opções avançadas de publicação e essas permitem que você verifique algumas configurações. Por exemplo, habilite SSL. Isso é muito crucial. O Webflow dá-lhe um SSL gratuito para cada uma das suas páginas. Isso é realmente importante para que você tenha isso verificado. E em alguns casos específicos, você pode querer consultar seu provedor DNS, com seu domínio, registrar com as configurações corretas para o SSL. E aqui está o link para verificar isso, mas geralmente funciona fora da caixa. Então você tem a opção de modificar HTML e CSS e JS. E essas são opções que você pode ou não usar. Você pode encontrar essas opções no menu de publicação no designer também. E se você for para o designer agora mesmo no menu Publicar, você verá que você tem este segundo domínio agora que você pode publicar sob. Então este, no meu caso, o subdomínio. Se você selecioná-lo, você pode simplesmente publicar para cancelar a seleção e domínio. Lembre-se de que você ainda tem a opção de publicar em seu subdomínio do Webflow. E isso é muito legal porque você pode publicar o rascunho de trabalho do seu site aqui. E, em seguida, uma vez que você está pronto ou obter a aprovação de seu cliente, então você pode publicar em seu site oficial, para o domínio oficial. E nas opções avançadas, você encontra todas as opções que eu mencionei. Assim, por exemplo, você também pode minificar CSS que o site seja um pouco menor e baixo mais rápido. E, a propósito, se você usar servidores Webflow, você terá automaticamente CDNs habilitados. Esta é uma ótima infraestrutura para seus usuários em todo o mundo tentando acessar seu site. Eles vão apenas obter o site do servidor que está mais próximo de sua localização. Então CDNs são realmente, realmente ótimos e também pode lidar com um monte de tráfego. Então, por exemplo, se você tem, se você está vendendo ingressos ou algo assim, e muitas pessoas visitam simultaneamente seu site. Você será automaticamente sofisticado. Você não tem que pagar e isso vai lidar com o tráfego. Esta opção usar cabeçalhos de quadro seguro destina-se a incorporar seu site como um iframe. E, por padrão, está habilitado para lojas. Não acho que seja importante por agora, então deixe sem controle. E agora, quando você publica, você está publicando simultaneamente em ambos os domínios. Além disso, recebo a mensagem de que o índice de pesquisa tem de ser actualizado. Isto é quando você publica pela primeira vez, especialmente, e você tem que esperar até cinco minutos para que os resultados da pesquisa funcionem corretamente. Basta lembrar que a qualquer momento, como eu mostrei em uma das lições anteriores, você pode ir para Configurações aqui e ir para Pesquisar. E você pode indexar manualmente. Se você clicar no índice agora, você pode fazer uma indexação por dia por dia. E também se você quiser, o Webflow irá agendar e indexar automaticamente sua pesquisa a cada três dias. Então é assim que funciona e eu acho que não. Agora que nosso site está publicado em ambos os domínios, estamos muito seguros para ir e distribuir nosso site para todos os nossos usuários e editores para que isso possa fazer mudanças. Então é isso para o domínio personalizado e opções. Obrigado por ouvir e vejo você na próxima lição. 24. Estados vazios: Olá, bem-vindos à próxima lição. Uma vez que temos os resultados reais da pesquisa, você pode ver que há uma imagem faltando. Nós temos essa imagem da imagem de pesquisa, e quando desmarcá-la, você pode ver o modelo da imagem, mas nós realmente não temos essas imagens carregadas em nosso índice de pesquisa. Então o que precisamos fazer é checar de onde essas imagens estão vindo. E por esse motivo particular, precisamos abrir a configuração do modelo de postagens do blog. Então esta é a página que deve nos alimentar com os dados da imagem. E dentro das configurações de pesquisa, temos tal imagem selecionar Imagem para tal resultado, temos o mesmo que Open Graph URL imagem. Mas se formos para configurações do Open Graph, realmente não temos uma imagem vinculada aqui. Então o que precisamos fazer é vincular a imagem desta coleção, aqui ou desmarcar isso. E precisamos vincular a imagem que temos na coleção para ser vinculada como uma imagem OG ou imagem de configuração de pesquisa do site. E só então teremos as imagens apropriadas exibidas em nossos resultados de pesquisa. Agora, isso não é suficiente. Temos que salvá-lo, e também temos que reconstruir nosso índice de busca. Agora, deve aparecer, mas não podemos vê-lo. Temos que ir para uma configuração global e, em seguida, na pesquisa irá para o índice agora. E isso fará com que isso, forçaremos, forçados em um bem alimentado para reconstruir índice. Índices programados são todos os dias livres, então bem para cada três dias vai passar por suas postagens e indexar tudo. No entanto, se você quiser fazê-lo manualmente, você pode apenas forçá-lo no Webflow como este. E agora temos essas imagens que começam a aparecer aqui. Além disso, a segunda coisa que eu gostaria de mostrar, como neste wrapper de resultados de pesquisa, podemos ir para o segundo estado. Então temos esse estado padrão lá, mas também o segundo estado não é nenhum resultado. Então, se isso não retornar nenhum resultado, teremos essa data que não é tão atraente. Podemos trabalhar no estilo pouco e para resultados de pesquisa, É especialmente útil porque o usuário muitas vezes vamos obter os resultados, Eu acho que então nós só temos que cuidar disso. Vou importar as três imagens que tenho. E agora podemos usar esta primeira imagem para exibir no estado vazio da nossa página de resultados de pesquisa. Vamos definir a exibição desses elementos para flexionar a direção vertical, e vamos posicioná-lo para o centro, vertical e horizontalmente. Além disso, vamos aplicar algum preenchimento ou margem para que tenhamos centrado em, com algum espaço em branco agradável em torno deste elemento. E aqui não temos muito resultado em resultados de pesquisa, no entanto, não é o único lugar onde os resultados da pesquisa quando podemos obter elementos vazios, estados vazios. Os outros elementos seriam para itens de coleção CMS coleção que estão vazios por algum motivo. Por exemplo, se queremos exibir algo da categoria móvel, mas não há posts na categoria móvel. Então, basicamente, para todas as borrachas menos coleção que você pode selecionar agora, se você vai para as configurações, você pode ir para UI estado vazio. E por enquanto, isso parece um pouco lixo. Então o que queremos fazer é abordar este estado vazio. By the way, você pode ver em navegado que podemos acessar todos os elementos deste estado vazio e podemos restaurá-los. Então vamos definir a tela para flexionar e vamos alinhá-la mais tarde. Agora vamos alterar as margens com opção. Vou ajustar a margem para cima e para baixo. E também vamos nos livrar da cor de fundo. Aqui temos este livro didático. Podemos adicionar uma imagem aqui e escolher uma das imagens que enviei, talvez esta. E vamos voltar às configurações ou fazer as configurações de alinhamento desse estado vazio. Dois, preciso que isto seja definido para vertical e alinhe e justifique o centro e o meio. Então temos esses estados vazios para classe que podemos querer mudar em um carrinhos de estado vazios. E seria inteligente usar isso como um estado vazio para literalmente tudo o que queremos adicionar um estado vazio, não só esta coleção, mas há um problema com esta imagem teria que simplesmente copiar e cole esta imagem uma e outra vez. Então o que podemos fazer quanto aos cartões de estado vazios, se nos livrarmos da imagem agora, podemos aplicar isso como fundo CSS, e então só podemos usar essa classe de cartão de estado vazio para This settings, esta imagem. Então deixe-me mudar o fundo para esta imagem que temos para o estado vazio não pode vidro. E vamos configurá-lo para cobrir posição para o centro. E, em seguida, sem azulejos, eu acho que ele deve estar pronto agora. Ok, agora vamos apenas aplicar a margem um pouco. E também vamos mudar o preenchimento porque isso nos permitirá mover o livro sem itens encontrados para o topo. E acho que é isso. Agora podemos copiar o nome desta classe e literalmente usá-lo em qualquer lugar que quisermos. Então, neste estado vazio, nós apenas aplicamos a classe de cartão de estado vazio e lá você tem. Ok, então desta forma fizemos este estado vazio personalizado mas reutilizável para itens que não são encontrados dentro do CMS, por exemplo. E eu acho que é isso. Então, espero que torne a sua vida um pouco mais fácil ter elementos reutilizáveis como este. E isso também é, sobre os estados vazios e pesquisa. Muito obrigado. Vejo você na próxima lição. 25. Editor de sites: No Webflow, há uma boa maneira de seus colaboradores editarem sua página. E este pode ser o seu cliente, este pode ser o seu colega. Você pode literalmente editar qualquer coisa na página, incluindo as coleções e seus itens. Você tem este pequeno botão Editar Site quando você entra nesta página como um usuário conectado. Então você tem que ter a conta Webflow, e então você tem que ter permissões para editar essa página, a fim de ver este pequeno botão. Então agora eu estou preso no Designer, e é por isso que eu posso, desde que eles acessem diretamente o editor. Então eu posso editar isso no navegador ou eu posso ir para Configurações do projeto e eu posso ajustar as configurações para editores adicionais. Se você for para a aba do editor, verá que temos colaboradores aqui e também algumas opções de branding que serão exibidas para seus editores e você pode alterar um upload de seu logotipo aqui. Mas o mais importante é que temos colaboradores e, por enquanto, sou só eu, mas posso adicionar até três colaboradores para cada página, para cada lado. E eu posso apenas digitar seus endereços de e-mail. Se ainda não tiverem a conta completa, terão de criar a conta. Mas uma vez que eles fazem e eles têm o convite para isso, Editar , esta página, eles serão capazes de ir para o navegador e diretamente no navegador. Após o URL do seu site, coloque um ponto de interrogação e, em seguida, edite e, em seguida, alterne automaticamente para o modo editor. Você pode ver na parte inferior que temos este logotipo Webflow e todos os elementos em nossa página estão realmente se comportando um pouco diferente. Porque agora podemos acessar elementos estáticos e dinâmicos da página e alterá-los em tempo real. Isso significa que você pode literalmente alterar qualquer coisa clicando neste botão de edição. E se você quiser alterar o nome dos posts na coleção, você pode fazê-lo assim. Se você quiser alterar os elementos estáticos, você pode fazê-lo da mesma forma, bem , da mesma maneira. Mas se você estava adicionando algo para os itens de coleção CMS existentes, O que é realmente legal é que você pode literalmente alterá-lo na coleção CMS. Assim, por exemplo, se você substituir a imagem apenas a partir daí, ela será alterada em todo o TMS. E isso funciona para todo o conteúdo estático e dinâmico. Assim, você pode passar o mouse sobre os elementos e você pode, em seguida, alterá-los e substituí-los. Por exemplo, agora mesmo, se eu for para uma única página de postagem, o que eu posso fazer é clicar no botão Editar ao lado do livro didático rico que eu tenho. E porque este é um livro didático rico, ele me permitirá, por exemplo, selecionar os elementos e alterar os títulos. Você pode deixar o texto em negrito ou você pode até mesmo inserir novos elementos. Se você pressionar Return, poderá adicionar texto. Você não pode ambits ou citações ou qualquer coisa lá, porque este é um elemento de texto alcance. Agora, se você fizer alterações, você terá a informação na parte inferior de que há alterações gratuitas não publicadas. Você tem as alterações do editor que eu preciso publicar agora para que eles estejam ao vivo no site. Então, antes de publicar, estou apenas no modo de edição e estou apenas criando um rascunho. Posso voltar para o site ativo e minhas edições não estão mais visíveis. E isso é porque ainda não os publiquei. Mas quando eu voltar à edição, você verá que eu ainda tenho essas alterações, QT para publicação e eu posso publicá-las. Sempre que eu quiser. Então, agora, se eu clicar e publicar alterações livres, isso afetará não só a parte estática do site, mas também editei o software de categoria e isso se aplicará ao meu CMS. Além disso, há uma maneira muito mais intuitiva de trabalhar com o CMS do que apenas clicar nos elementos e percorrer todas as postagens e publicá-lo e ondulado, republicá-lo. Você pode editar as páginas a partir deste menu inferior. Aqui você pode ir para Configurações do projeto e painel e designer, mas você também pode clicar em páginas. E aqui você pode ver todas as páginas que estão disponíveis e acessíveis a partir daqui também. Você pode alterar as configurações de páginas a partir daí. Então, por exemplo, se você é ou quer editar tags OG ou configurações de índice de pesquisa ou qualquer coisa assim. Ele pode fazer isso dentro dessas configurações em C que todas as configurações de SEO e as outras que são muito importantes estão acessíveis aqui. Portanto, você realmente não precisa dar a ninguém permissões para usar o Designer e mexer com o site. Ele pode ir direto aqui e usar a meta descrição e o título tag e mudar tudo de acordo. Infelizmente, você não pode realmente definir as permissões diferentes para editores, mas o que eles podem fazer é em vez de salvar o que não será visível antes de você publicar, você tem essa alteração não publicada para que alguém possa salvá-la e, em seguida, Você pode supervisioná-lo. Você também pode salvá-lo como rascunho. Então esta é a primeira, primeira versão dele, que ele nem vá para essas mudanças inéditas. Então alguns, alguém pode trabalhar nisso e salvá-lo como rascunho quando ele estiver pronto para defini-lo como inédito. Ele vai para lá, ele vai salvá-lo. E então você pode apenas verificar se tudo está bem e clicar em publicar para publicar isso no site Life. O mesmo acontece com as coleções. Você pode visualizar todas as coleções aqui e você tem status diferente é para todos os itens da coleção. Por exemplo, aqui eu tenho algumas mudanças de palco. Isso significa que quando eu clicar em publicar esta alteração, Go Live. Mas há outro estado diz que eu posso criar. Eu posso obviamente adicionar todos os artigos de lá e é muito mais intuitivo do que editá-los no navegador. Posso adicionar um novo item de coleção. Então, neste caso, eu posso clicar em adicionar novas postagens de blog. E nós temos todos os campos definidos no, no CMS aqui, você pode ver que todos eles são obrigatórios. Você pode decidir e designer no CMS, você tem o conteúdo rich text aqui, para que você possa adicionar imagens ou incorporações ou vídeos. Você tem que escolher a tag de categoria e oferecer para as postagens do blog. E se você criar um, você realmente não precisa prepará-lo para alterações pressionando o botão Criar. Bem, você pode fazer em vez disso é você pode agendar este post ou você pode salvá-lo como um rascunho. Se você salvar isso como rascunho, ao clicar em Publicar, isso não será publicado porque é um rascunho. Você pode voltar para o rascunho e você pode salvá-lo várias vezes e ele não é encenado para ser publicado com você pode fazer em vez disso é você pode encenar estes quatro publicar, ou você pode publicar imediatamente. E então ele vai entrar ao vivo sem sequer pensar no botão Publicar. Ou você pode preparar para Publicar. E se você prepará-lo, então alguém terá que clicar no botão Publicar para que este post apareça em seu site. A outra opção que você tem como cronograma. E você pode escolher a hora e a data específicas em que suas postagens serão publicadas, e quando essa data chegar, ela será publicada automaticamente no site ativo. Agora, eu vou cancelar. E, como você pode ver, você pode editar todas as coleções em sua página. Além disso, você também tem dados de envio de formulários. Então, se você tem qualquer formulário como nós temos o nosso formulário boletim informativo, se alguém sente na forma que os dados irão aqui. A partir daí, você pode exportá-lo como CSV ou simplesmente visualizar os dados. Obviamente, esta não é a melhor maneira de gerenciar, por exemplo, seus envios de formulários. Mas uma das outras lições que eu vou mostrar a vocês como conectar isso Zapier ou integral Matt para as informações pessoais da conta lá você também tem ajuda e suporte e você pode olhar para fora sem publicar alterações ou você pode ir para o designer, mas isso só está disponível para aqueles que são os autores do lado. Então você tem que ter este projeto em seu painel Webflow para poder ir ao designer. E do designer você também pode publicar a partir daqui. Quando você publicar a partir do designer, as alterações que são encenadas pelos editores também serão publicadas. Eu disse que não há como restringir o acesso dos designers a peças e elementos específicos. Mas a partir do designer, o que você pode fazer como você pode ir para configurações de qualquer elemento e você tem isso. Os colaboradores podem editar este elemento. Se você desmarcar esta pequena caixa de seleção, isso tornará, por exemplo, este cabeçalho um indisponível para uma alteração no editor. Assim, os editores não serão capazes de fazer nenhuma alteração neste título, você também pode excluir da edição de partes maiores do seu site, seções inteiras ou talvez todo o corpo se você quiser impedir as pessoas mudem alguma coisa neste página específica. Então é assim que você pode restringir o acesso. E além disso, lembre-se de que você tem esses status diferentes. Por exemplo, preparação ou rascunhos que você pode usar em toda a sua equipe para gerenciar o conteúdo em sua página. Ok, eu acho que é isso para o editor. Obrigado por assistir a essa lição e te vejo na próxima. 26. Dicas de SEO 1: Olá, bem-vindos à próxima lição. Vamos falar um pouco sobre SEO. Então, como tornar o seu site melhor em termos de acessibilidade e também para rastreadores para que ele seja bem indexado, no motor de busca do Google. Então, a primeira coisa é a estrutura da sua página. Isso é bastante óbvio, mas você deve usar seções onde apropriado. E também quando você seleciona, por exemplo, seção nas configurações, você pode selecionar tags HTML apropriadas, como artigo ou algo assim. Se você estiver usando algum texto significativo, você deve usar títulos ou parágrafos, pois isso permitirá que o Google saiba que esse texto é mais importante do que os outros textos. Por exemplo, Cabeçalho um é mais importante do que H2, e especialmente você não deve usar blocos div para nada além de fins de estilo. Então cães grandes são elementos técnicos. E se você quiser criar algo que tenha o significado para o navegador, é melhor você acabar com artigos ou leasing, títulos ou parágrafos, ou você pode acabar com, digamos, seção. Mas então, nas configurações, você pode alterar isso para, digamos de lado ou artigo. Agora, o que você pode fazer para melhorar, fazer o Google entender melhor seu site também, não é aninhar muitos elementos no painel do navegador. Portanto, certifique-se de que sua estrutura está limpa e você não tem muitos elementos aninhados. Outra grande profundidade para acessibilidade e otimização do mecanismo de busca também está indo para configurações de imagem. E aqui você tem o velho imposto. Então basicamente todas as imagens devem ter ou a pilha antiga, tudo na versão mais recente do Webflow, há uma opção para declarar que esta é apenas uma imagem decorativa e realmente não precisa de um ataque antigo. Outra dica que posso dar a você é definir o texto antigo depois de criar um site no painel de ativos, você pode clicar com o botão direito do mouse no elemento da imagem no painel Ativos. E então você pode adicionar a tag alt a todas as imagens e quase de uma vez. Então, é uma maneira muito conveniente para criar impostos antigos. Mas de qualquer maneira, você deve cuidar do imposto antigo e especialmente para as imagens que são descritivas em sua página. E, a propósito, nas versões mais recentes de um Webflow, quando você publica sua página, você também tem o status de acessibilidade do seu site, bem como algumas coisas para melhorar na página. E se você não tem algumas pilhas antigas, ele irá pedir-lhe que você deve, você deve cuidar disso. Então, quando você publicar, você pode apenas verificar quais imagens estão faltando. O velho imposto. Mais uma coisa é excluir as imagens do Webflow. O que você pode fazer é ir para Assets e você pode excluir literalmente todas as imagens e, em seguida, republicar seu site. E então todas as imagens que são usadas em sua tela no designer estarão novamente disponíveis nos ativos porque às vezes há muitas imagens diferentes nos ativos que você literalmente não usa em seu site. Isso não é prejudicial para a sua posição em, no Google, mas, seguida, doloroso para criar todo o imposto de idade. E desta forma, você pode simplesmente excluí-los facilmente, republicar o lado e eles aparecerão novamente, mas apenas as imagens que são publicadas em seu site. Ok, a seguir temos as configurações para páginas individuais, bem como as configurações globais para o seu site. Se você vai para páginas e você verificar as configurações para páginas estáticas individuais que temos aqui, e também utilitário eo comércio. Cada página como esta tem algumas configurações. Em geral, parte das configurações que você tem o nome do paciente e isso é apenas para a web para fins, ele não está aparecendo em nenhum lugar em seus resultados de pesquisa. Mas aqui você tem configurações de SEO muito importantes. Eles são separados para cada página que você criar. E até mesmo você tem essa visualização de resultados de pesquisa que lhe dará uma visão geral de como isso será exibido e nos resultados de pesquisa do Google. Agora, o que você tem em cima como etiqueta de título? Esta é provavelmente uma das coisas mais importantes em termos de SEO. E você definitivamente deveria ter chamado imposto para todas as suas páginas. No título, você deve ter uma descrição limpa e curta de sua página específica. E o Webflow recomenda que tenha aproximadamente 55 caracteres ou menos. E isso é simplesmente porque ele será exibido em uma linha. E se isso for mais, será truncado. E o que eu vou fazer é copiar e colar este símbolo de ponto ascii e colocá-lo no título. E nos resultados da pesquisa você pode ver que isso é um pouco mais atraente, pode ser diferente de outros resultados. Então eu acho que este é um bom truque para tornar este resultado mais atraente, bem como usar caso camelo. E se você pode usar algumas das palavras-chave obviamente conectadas ao seu site, basta usá-las no início do título ou em algum lugar perto do início do título, porque esta é provavelmente uma das, uma das as coisas mais importantes em termos desta palavra-chave sendo incluído nos sérvios. Então, busque resultados. E isso aproximará seu site dos principais resultados. Se houver uma palavra-chave que no título que alguém está procurando, para a meta-descrição, o google diz que não é realmente útil em termos de palavras-chave. Ele não verifica se há palavras-chave que o usuário procura. Mas a meta-descrição é super importante porque ela aparecerá logo abaixo do seu URL e do título nos sérvios. Então é melhor torná-lo interessante. É sempre melhor manter a meta descrição curta. Aproximadamente 150 Ciências, está bem? E o que eu coloquei lá é, por exemplo, eu tenho este caso camelo e também n seno. E no final tenho interesse com o ponto de interrogação. E esse tipo de talvez torna isso um pouco mais interessante para um usuário clicar para que tenhamos um bom CTA no final da meta-descrição. Então eu tentei ter o CTA, por exemplo, checar ou talvez interessado ou alguém assim. E provavelmente isso obtém um pouco mais CPRs nos resultados de pesquisa do Google. Novamente, por favor, coloque na sua descrição Meta, é algo que é relevante para esta página. E eu, para as configurações do Open Graph, há muito importante, mas não realmente para o Google, tanto para as mídias sociais e os outros serviços. Vou explicar isso mais tarde. E para Configurações de pesquisa do site, lembre-se de que isso não significa que você exclua essa página do Google. Ele só se conecta à sua pesquisa interna que criamos em uma das lições anteriores. Então, isso não está relacionado com SEO em qualquer maneira e você pode mantê-lo excluído enquanto ele ainda vai aparecer nos resultados do motor de busca no Google. E então você tem código personalizado, que é muito importante em termos de SEO, especialmente se você quiser excluir alguns sites dos resultados de pesquisa. No entanto, na pilha de cabeçalhos, você também pode usar muitas Meta tags diferentes que você pode criar. Por exemplo, com palavras-chave, você pode usar palavras-chave Meta e colocar algumas palavras-chave lá. Enquanto o Google está aberto sobre não realmente levar isso em consideração ao criar rankings de mecanismos de pesquisa. Acho que isto é muito importante. E se você tiver tempo, você pode simplesmente adicionar isso aos seus sites porque para alguns aplicativos, alguns mecanismos de busca, isso pode ser levado em consideração. Então esta é uma das Meta tags que você pode usar em seu site, mas na verdade há um monte de diferentes Meta tags que você pode verificar no site W3C. E aqui você tem todos os metadados diferentes como Arthur e viewport e descrição e palavras-chave e coisas assim. Então, no caso de alguns deles, Webflow está cuidando deles por anos, como descrição, você tem um campo separado. Mas se você quiser adicionar mais ataques molhados pode ser relevante para o seu site. Você pode fazê-lo, especialmente, você pode adicionar robôs metadados, e controlar a visibilidade de suas páginas através deste metatag. E eu recomendo vivamente que você veja esta página nos artigos de pesquisa do Google. E há muita informação sobre metadados de robôs. Normalmente, você só usa este metatag para excluir esta página específica ou sites inteiros do índice. Neste caso, você vai usar robôs de nome de metal e conteúdo sem índice. Em seguida, ele pode ser seguido por uma vírgula e você pode adicionar siga ou nofollow, por exemplo, para robôs para seguir os edifícios visíveis neste site e Croll, alguns outros sites que este site link para. Mas se você não colocar nenhum índice, esta é uma sugestão para o robô que ele nunca deve indexar esta página em particular. E o lugar onde você coloca este metonym robots conteúdo no-index é ou nas páginas individuais do seu, como temos para a nossa página inicial ou blog. Ou você simplesmente colocá-lo globalmente em suas configurações para todas as páginas do seu site e, em seguida, nada será indexado. Decidir o que está sendo indexado e o que não é é muito importante em termos de SEO. Por exemplo, para o nosso blog, não sei se temos necessariamente de indexar todas as páginas. Especialmente podemos excluir páginas técnicas de indexação como 40 para e guia de estilo e as outras. Mas nós realmente não provavelmente metade para indexar, bloquear todas as postagens porque os mesmos elementos, os mesmos artigos estão na página do blog e nas páginas da categoria. E, a propósito, se você quiser verificar se esta página particular lado está sendo indexada, você pode colocar no site ou página do Google. E então você pode verificar que tipo de links estão sendo indexados, digamos frieza que como domínio. E então você pode ver se esse conteúdo de robôs de metianina sem índice está realmente funcionando bem. Esta é apenas uma sugestão para os robôs. No entanto, na maioria dos casos, deve funcionar muito bem. E, novamente, isso é apenas para a página inicial específica. Estamos excluindo a página inicial específica para sérvios. No entanto, se você quiser excluir todo o site de ser indexado, o que você pode fazer é acessar as configurações desta página no Webflow. E aqui você tem uma etiqueta de código personalizada. Ali. Você pode colocar o código que é para todas as páginas, mas eu vou te mostrar isso na próxima lição. 27. Dicas de SEO parte 2: Olá e bem-vindos à próxima lição. Esta é a segunda parte das nossas dicas de SEO no Webflow. Agora eu estou em minhas configurações de projeto para judeus e bloqueio site. E o que eu posso fazer é mostrar a vocês essa guia de código personalizado que eu falei antes. Aqui você tem o código principal e esse código vai ser incluído em todas as páginas do seu site. Isso significa que se você quiser adicionar, digamos palavras-chave Meta aqui, ou talvez você queira apenas se livrar da indexação de todas as páginas e criar robôs de metal sem índice. Você pode simplesmente adicioná-lo ao código de cabeça e ele será distribuído em todas as suas páginas. Agora, você também pode ir para a guia SEO, que é a guia global mais importante para suas configurações, além da configuração para páginas individuais que eu falei na lição anterior. E também, vale a pena verificar a hospedagem que você tem e a configuração do domínio. Apenas certifique-se de que você tenha definido como padrão, que seu domínio principal aqui está definido como padrão, porque você pode ter domínios diferentes aqui. E isso impedirá que o Google indexe todos os domínios que você possui. E quando você disse isso, a propósito, para padrão, ele redirecionará automaticamente o domínio Webflow. Quero dizer, ele não incluirá o domínio Webflow nos resultados da pesquisa. Portanto, o Webflow desativará automaticamente a indexação do subdomínio do Webflow no qual você tem seu site. E, em vez disso, ele sempre usará este domínio do seu mais importante para o Google. Desta forma, você se livrará do conteúdo duplicado e da penalização do Google por esse conteúdo duplicado. E, a propósito, em SEO, a primeira configuração é para indexação. E quando você definir como sim, a indexação desse subdomínio do Webflow será desabilitada e isso deve ser definido sempre que você tiver seu próprio domínio conectado e definido como padrão. Em seguida, temos seção robôs, e esta seção será novamente distribuída e incluída para todos os seus sub, sub-páginas. Então, para todo o site. Portanto, quaisquer regras que você definir para robôs aqui serão aplicadas globalmente ao seu site. Robôs dot txt é muito importante. Mas, ao contrário do que as pessoas pensam, alguns deles pelo menos, isso não impedirá que o Google indexe suas páginas. Em vez disso, isso impedirá que seus sites, especialmente a administração de sites técnicos e coisas assim, sejam bombardeados por solicitações de agentes de usuários, de robôs que tentaram baixar e conhecer o conteúdo. Portanto, esta é a directiva para robôs, por exemplo, para não, para não levar em consideração este site e para enviar pedidos. E você também pode adicionar os artigos no Google ou apenas clicar no link no painel Webflow para visitar robôs leva th.org e, em seguida, ler mais sobre arquivos robôs e como criar. Uma diretivas diferentes neste arquivo. Depois há mais uma coisa sobre a qual eu falo em uma das lições anteriores, mas eu quero mencionar que em termos de SEO também, aqui você tem 301 redirecionamentos e você geralmente quer usar esses redirecionamentos para que seus usuários não visitem um 404 páginas. Então, por exemplo, se você remover uma página, você deseja às vezes obter o link desta página, colocá-lo aqui como um caminho antigo e redirecioná-lo para algum outro caminho pode ser artigo mais recente ou seção mais recente sobre a mesma coisa em seu site. Isso impedirá que quaisquer links estejam fora do seu site, levando a 404 páginas. E desta forma, ele vai ajudar usuários e robôs, bem como a encontrar o seu caminho em sua página. Ok, em seguida temos esta SEO Settings novamente. E, na parte inferior desta página, você tem sitemap e também verificação do site do Google para configurações muito importantes para o sitemap. Eu recomendo você, especialmente se você não sabe como criar seu próprio sitemap. Apenas para usar este predefinido, esta configuração padrão que irá gerar automaticamente um sitemap para você. Em vez disso, se você quiser usar o seu próprio, você pode simplesmente deixá-lo como estava. Mas se você quiser usar isso gerado automaticamente pelo Webflow, basta alterá-lo para sim. E então o Webflow criará um arquivo de texto, um arquivo XML na verdade para você. E você será capaz de enviá-lo para o Google ou Google ambos irá automaticamente buscá-lo, por si só. Agora, o arquivo XML do sitemap pode ser personalizado e você pode personalizá-lo se souber o que está fazendo. Mas na maior parte do tempo, vou apenas mantê-lo gerado automaticamente pelo Webflow. Agora o Google Search Console é outro lugar que você deseja se registrar e você deseja conectar seu site também. Assim, você cria uma nova propriedade no Google Search Console. E então você pode usar domínio em nosso prefixo URL. O que você vai usar aqui é o prefixo de URL. E basta usar o endereço do site que você tem no Webflow. Então, neste caso, meu próprio subdomínio. Agora, vamos em frente e continuar. E agora ele está verificando esta propriedade, a fim de verificar que você pode usar várias maneiras, mas o que você deseja fazer é ir para tag HTML. E aqui você pode copiar toda a linha que está em 0.1. Vamos clicar em Copiar. Agora vamos ao Webflow e colá-lo. Você não precisa de tudo daqui. Você só precisa do que está no meio, citações no conteúdo. Então aqui está, o ID de verificação do site, e vamos salvar essas alterações. Agora você está pronto para voltar para o console de pesquisa do Google e verificar se este, este site está funcionando. Mas primeiro passo, muito importante, você precisa publicá-lo para os domínios selecionados. Portanto, você precisa publicar seu site com essas alterações primeiro para que o Google reconheça as alterações. Agora volte para o Google Search Console e clique em Verificar. Uma vez que esteja pronto e publicado, ele deve verificar o seu site e está tudo bem. Então agora você pode ir para a propriedade. Então abra seu site e você pode verificar algumas métricas importantes do seu site. Portanto, esses dados já estão sendo coletados. E, em algum momento, você tem alguma revisão de desempenho e inspeção e todas as coisas que você pode achar que realmente interessante em termos de SEO e apenas tornando seu site um pouco mais amigável para os robôs. Além disso, o que você deseja fazer é carregar este sitemap, o fluxo de trabalho gerado para você na seção sitemap. Portanto, se você acessar o sitemap de índice, poderá adicionar um novo sitemap e validar o mapa do site criado pelo Webflow. Você acabou de colocar sitemap dot xml aqui e usar enviado. E se você não fez check-in no painel WebEx, você tem as informações de que o sitemap foi enviado. Se você salvar as alterações depois de mudar para os EUA, verá que isso foi enviado com sucesso e também poderá ver o status e os URLs descobertos que são o índice de cinco URL no seu sitemap. Essas são as mais importantes, mas não todas as configurações de SEO. Você pode conferir este Google Search Console para obter mais informações. E, obviamente, você pode aprender muito sobre SEO a partir de alguns recursos externos que eu recomendo. Então, muito obrigado por ouvir e sintonizar esta lição. Vejo-te no próximo. 28. Metadados para sites: Olá pessoal e bem-vindos à próxima lição. Gostaria de adicionar algo às dicas de SEO. E isso é sobre o protocolo e esquema Open Graph. Então, basicamente, esta é a maneira de explicar melhor nosso site, não necessariamente para robôs, mas para mídias sociais. O Open Graph Protocol foi iniciado inicialmente no Facebook, mas agora você tem muitos softwares diferentes usando este Open Graph Protocol específico. E o que você faz com isso é usar esses metadados e você tem a propriedade meta. E então você vai com OG, título, tipo, URL e imagem. E você define os elementos que serão reconhecidos por, digamos, mídias sociais. Se você definir a imagem, quando você compartilhar esse link no Facebook ou LinkedIn , a imagem aparecerá. E esta é a imagem do imposto OG. Você pode obviamente colocar tudo isso em seu código personalizado. Você pode colocar isso em suas configurações de projeto para que as alterações sejam globalmente visíveis em outras sub-páginas nesta seção de código personalizado. Mas no designer, se você for para configurações de páginas individuais, Webflow também está disponibilizando algumas das configurações de gráficos abertos mais importantes para você aqui. Então aí você tem o título, a descrição e a imagem. Essas são configurações gratuitas e mais importantes para você compartilhar elementos nas mídias sociais e para que isso apareça corretamente. Então, por exemplo, se eu for para o Facebook e eu criar um novo post e, em seguida eu adicionar um link de site e dispor para a minha web, o site, ele irá gerar automaticamente algo. E esta é a descrição. Eu não tenho nenhuma imagem OG. É por isso que não está exibindo a imagem aqui. E também está tirando o título do meu título, do título da minha página. Mas, por muitas razões, você pode querer manter isso separado e você pode querer desmarcá-lo, mesmo que tag de título SEO. Você pode ver esse evento que eu tinha este desmarcado, ele automaticamente buscou isso do título e este é o recurso do Facebook eu acho. Mas você também pode pegar a meta descrição e então ela será obtida a partir da sua meta-descrição. Então SEO meta descrição também. Portanto, é melhor verificar isso do que não, mas também é melhor criar diferentes descrições e títulos para mídias sociais. E obviamente, há uma imagem que você deveria ter aqui. Essa é a proporção de 1,91 para uma que você deve usar. E o Webflow está tentando se certificar de que suas imagens são pelo menos enquanto 1200 pixels por 630 neste URL de imagem Open Graph aqui, você pode colocar um caminho absoluto para sua imagem. Você não pode usar nenhuma das imagens em sua biblioteca. E você só tem que criar uma imagem especial que será um URL de imagem de gráfico aberto. O que você pode fazer é configurá-lo para todas as páginas separadamente nas configurações do Open Graph. Ou, se você quiser apenas configurá-lo uma vez, você pode adicionar esta tag OG como um código personalizado em suas configurações globais de página para Webflow. Então agora eu carrego esta imagem como minha imagem OG. E em vez de certificar-se de que ele funciona no Facebook adicionando o post mais uma vez. Eu recomendo que você vá a um serviço especial que permitirá que você teste os metadados OG. Porque o Facebook e outras mídias sociais costumavam apenas descontar alguns dados sobre o link que você forneceu e isso pode não estar visível. Então, em vez disso, basta ir para desenvolvedores do Facebook. E aqui está o depurador de compartilhamento, a ferramenta que permitirá que você coloque o link para o seu site e clique em depurar para visualizar como ele deve olhar nas mídias sociais. Então é assim que deve ser exibido no Facebook. A imagem agora está lá. Além da imagem, há alguns campos OG que foram preenchidos automaticamente pela web embora. Por exemplo, este tempo atualizado, mas alguns deles com preencheu-nos como descrição e imagem e título e tudo está lá. Você também pode verificar se há alguns erros. No topo desta página você tem um aviso que deve ser corrigido. E aqui estão algumas propriedades necessárias que estão faltando URL. Bem, todas as redes sociais vão cuidar disso e pegar o URL que você quer. E ID do aplicativo do Facebook. Novamente, não é necessário a menos que você esteja usando algum aplicativo do Facebook que você deseja se conectar a este site. Mas de qualquer forma, esta é uma ótima maneira fornecer algumas informações adicionais para as mídias sociais, especialmente imagens que serão exibidas corretamente e aumenta algum tráfego das mídias sociais para o seu site. E mais uma coisa que eu gostaria de explicar nesta lição é schema.org. Outro conjunto de metadados que você pode usar separadamente para suas páginas ou para todo o site. E este é apenas um esquema que você usa, por exemplo, produtos. E isso, vamos Google e outros softwares entender melhor o que está no seu site. Por exemplo, você pode adicionar cor ou modelo aos seus produtos ou algumas ofertas, talvez avaliações ou estrelas, estrelas, estrelas, algo assim. E muitas vezes você pode ver esses resultados no Google quando você pesquisa algo. Por exemplo, nos sérvios, você pode ver classificação ou estrelas ou outra coisa. E esta é a informação do esquema que o Google preenche. E para alguns resultados, para algumas páginas da Web, ele decide exibir essa informação. Não garante necessariamente que essas informações estarão presentes em saques. Mas há uma grande chance se você manter as coisas certas, se você adicionar esses metadados da organização do esquema, que em algum momento ele será incluído nos resultados da pesquisa do Google e como usar essas propriedades da organização do esquema. Vamos clicar em Get Started. E aqui você tem um atributos diferentes que você pode usar no Webflow para os elementos. Então, em vez de colocar isso na seção Código personalizado da sua página, basta selecionar um elemento ao qual deseja adicionar este atributo personalizado. E você só tem que ir para suas configurações. E aqui você terá o atributo, a seção de atributos personalizados que você usará para atributos de esquema. Então, se você quiser, digamos a clareza de que esta parte do site é um filme. O que você vai fazer é no nome, você vai usar este tipo de item de esquema. Então você declarar tipo de item como o nome deste atributo. E como um valor, você tem esse link para a seção apropriada da organização do esquema. Então, esta é uma maneira de fazer isso explicou o próprio site da organização do esquema. E assim se você tiver produtos e quiser torná-los melhor disponíveis para pesquisa. Eu acho que esta é uma ótima maneira de adicionar esses dados Meta e informações ao seu site. Obviamente, ele vai torná-lo mais valioso para outros softwares soft, não só para robôs de indexação de pesquisa, mas também para fins de acessibilidade e coisas assim. Portanto, basta ter em mente alguns lugares que você pode adicionar este código para páginas individuais e para globalmente para todo o seu site. Ok, é isso por enquanto. Obrigado por ouvir e vejo você na próxima lição. 29. Usando integrações: Ei, bom te ver nesta lição. Esta é uma lição bônus quando eu gosto de explicar a guia integrações. E isso é bastante poderoso porque permite que você conecte o Webflow a alguns serviços externos. Polar, por exemplo, Eu tenho um Google Analytics, no entanto, infelizmente para a versão do Google Analytics para você ainda tem que adicionar o trecho de código de analytics em código personalizado, Webflow por algum motivo não suporta ainda, mas você tem alguns outros serviços que você pode integrar perfeitamente com o Webflow aqui, como o Google Optimize, que lhe permitirá executar testes AB. Então, basta criar um ID de contêiner no Google Optimize. E, em seguida, dentro do Google Optimize, você pode digitar URLs em duas páginas diferentes que você criou no Webflow. E, em seguida, ele irá alterar automaticamente esta versão do site. Portanto, exiba uma página ou outra para outros usuários e deixaremos você decidir facilmente qual versão é melhor. Para integração com o Google Maps, você só terá que obter a chave de API JavaScript do Google Maps. E, em seguida, você fornece a chave de API. E aqui, e isso permitirá que você simplesmente exibir o Google Maps dentro da web através do site. E, obviamente, você pode criar incorporação simples e não requer chave API do Google Maps para estar presente aqui. Então, basta ir ao Google Maps e clicar na parte do mobbed e, em seguida, copiar o código de incorporação e colar o iframe, iframe em HTML, HTML personalizado no Webflow. Mas se você quiser usar o Google Maps mais extensivamente em seu site e digamos Criar pesquisa dentro do seu site que irá retornar resultados no Google Maps. Então você vai ter que usar o registro de chave API como Google Developer e, em seguida, gerar esta API do Google Maps e colocá-lo aqui. E então você também tem o pixel do Facebook, o que é muito, muito útil se você estiver executando campanhas no Facebook. Isso permitirá que você conecte seu site ao Facebook, pelo menos por enquanto, porque como todos sabemos, cookies estão desaparecendo lentamente e não são suporte, suportado. A maioria dos navegadores modernos, alguns de alguma forma bloqueados. Mas por enquanto ainda temos essa integração de pixels do Facebook ou front-end que você pode adicionar com seu pixel id colado aqui. Assim, em seu gerenciador de anúncios no Facebook, você cria uma nova fonte de dados. Criar novo pixel e, em seguida, colar o ID de pixel aqui. E o fluxo de riqueza cuida de todo o resto. Em termos dessa implementação, isso permitirá que você, por exemplo, crie anúncios dinamicamente para pessoas que visitaram sua página no Webflow e muitas outras coisas, incluindo estatísticas e todos os dados que você pode visualizar no painel do Facebook, está bem? Agora você pode atrasar o consentimento do cookie significa que você estará em conformidade com as regras do GDPR. Se você mudar isso para sim e, em seguida, o pixel não será carregado sem o consentimento. Portanto, o padrão é que o pixel será carregado se o seu usuário aceitar a política de cookies ou, ou ele não. Se você mudar isso, você será mais compatível com o GDPR porque ele será carregado somente se as pessoas aceitarem sua política de cookies, então você tem acesso à API, que é super interessante porque o Webflow permite Acesso à referência de API leve. E há alguns elementos que você pode simplesmente acessar sem ir para web fluxos UI, então você não precisa ir para o designer, a fim de permitir que digamos retornar a lista de coleção ou itens de coleção e você pode fazê-lo com API. Há muitos dados que você pode obter do Webflow sem sequer passar pelo Webflow. E você pode obter todos os dados de coleta. Assim, você pode, por exemplo, menos suas coleções e obter uma coleção específica por ID. E tudo isso requer um pouco de conhecimento do protocolo JSON e HTTP e API. Mas se você ficar sabendo disso, é bem simples. No entanto, há maneira mais inteligente e mais acessível que você pode usar, a fim de traduzir, transferir alguns dados do Webflow para qualquer serviço que você deseja usando uma API. E eu gostaria de mostrar que usando ganchos web, como você pode ver, ganchos web fazem parte da referência API para Webflow, mas eles também são acessíveis com o painel na parte inferior desta página você tem ganchos web e você pode gerenciar Webhooks daqui. Os ganchos da Web são basicamente algumas informações que o fluxo de trabalho detecta automaticamente para qualquer serviço que você deseja usar e , em seguida, passar esses dados que você recebe do gancho da web. Ele pode ser formado submissão, ou pode ser a informação sobre o seu site sendo publicado ou alguns novos pedidos de e-commerce. Basta adicionar um gancho web e selecionar o tipo de gatilho. Então, que tipo de dados eu quero receber do Webflow no meu URL de fluxo de trabalho específico? Vou mostrar-lhe como criar este URL do webhook em um segundo. Mas digamos que você queira receber envios de formulários e o URL do webhook seja o endereço que o fluxo de trabalho usará para enviar essas informações. Então, cada vez que alguém se sente no formulário, você receberá todos os dados do formulário enviados para este Huike web. Bem, agora como você cria um URL de webhook? Bem, a maneira mais fácil é nos compensar em Zapier. Então criar conta no Zapier e, em seguida, procurar, você pode procurar por módulo livre Webflow. E você pode usar o módulo Webflow para fazer isso. Ou você pode usar este webhook por Zapier. Esta é a versão premium. Então, se você tem uma conta gratuita, basta procurar por Webflow e você será capaz de fazê-lo. Para este gancho web. Você vai precisar pegar o gancho. Então você vai esperar por um novo dado que virá para este endereço e a URL do endereço do cliente que você deseja copiar está bem ali. Então copie isso e passe isso para o Webflow. Assim, todos os dados do formulário serão imediatamente além deste gancho de envio de formulário que você gerou. Ok, agora vamos para o nosso site, mas uma coisa muito importante antes de você fazer isso, você tem que republicar seu site. Então salve as alterações e republique o site. E então você pode usar qualquer um dos formulários do seu site para, digamos, se inscrever ou enviar quaisquer dados. Agora temos a informação de que a submissão foi recebida. Isso é algo que você pode, obviamente, personalizar como o estado do formulário no Webflow. Mas o mais importante é que este formulário passou pela submissão. E no Webflow você pode procurar formulários enviados lá alguns segundos atrás, eu recebi alguns dados com este e-mail. Este é um e-mail também. Ok. Mas em Zapier, o que posso. Verificar é apenas o continuar. E agora eu tenho este pedido um que foi recebido. Encontramos um pedido, algo foi enviado e eu tenho este formulário de e-mail dois, e os dados contêm testes M82 em codificadores daquela casa. Então eu consegui. Se você quiser que os nomes sejam mais descritivos, você pode ir para este formulário. E nas propriedades de log de formulário, você pode verificar o nome do formulário para que você possa torná-lo eu sei boletim informativo ou algo assim. Por isso, é melhor, mais adequado para as suas necessidades. Agora, se você vir esta amostra de dados que foi enviada com suas solicitações, você pode continuar facilmente. E quando você tiver o HUC pronto, então você pode criar a ação. Então, o que você quer que aconteça com esses dados? Por exemplo, se você quiser que isso seja enviado para o MailChimp como um novo assinante, você pode simplesmente conectar sua conta Mailchimp aqui. E eu tenho minha conta conectada. Se eu selecionar Continuar, poderei enviá-lo para um dos meus públicos-alvo. Eu tenho apenas um público e, em seguida, o e-mail do assinante é algo que eu preciso obter a partir dos dados que eu armazenar em cache deste gancho. Então, basicamente, há este e-mail para, vamos ver todas as opções. E eu tenho este e-mail para o qual está testando no frio como um como o que eu quero fazer é passar este e-mail para fazer Mailchimp. Você pode definir todos os campos que eu tenho no meu chip menos. Mas eu não preciso fazer isso. Então vamos pular este teste e é assim que você cria uma automação que permitirá que você apenas inscreva usuários em sua conta Mailchimp diretamente do Webflow. E é super fácil para Zapier. Você também pode conferir tapete integral. É outro ótimo aplicativo que permitirá que você faça isso. Além disso, você pode criar zap em várias etapas para adicionar para gerenciá-lo e, em seguida, enviar os dados para o Planilhas Google ou em qualquer outro lugar. Para os tipos disparados que você pode usar. Como você pode ver aqui, nossos formulários, envios e citações publicados, mas também há alguns eventos despachados quando você cria quando alguém cria um novo pedido ou altera o pedido para sua loja de e-commerce. E isso requer que você crie um projeto de e-commerce no Webflow. Então, espero que você aprenda mais sobre essa referência de API e como você pode obter dados do Webflow e talvez enviar alguns dados para o Webflow. Houve uma dica nesta lição que você pode explorar agora. Isso é chamado les dot how, onde eu tenho alguns tutoriais sobre API e protocolo HTTP. E isso irá ajudá-lo a começar com automações. Além disso, há um monte de recursos em Zapier e integral, integral louco que eu amplamente usei para web para fins. Então eu acho que este é um grande próximo passo para ser ainda mais avançado no que você faz. Mas por enquanto, isso é tudo o que eu queria te dizer. E neste curso, é basicamente isso. Então, espero que você tenha aprendido muito durante este curso e que você pegue esse conhecimento e aplique-o em sua web para projetos encorajá-lo fortemente a criar seu próprio projeto, ou talvez seguir novamente com os passos deste curso e criar um blog, site com CMS como eu fiz. Obrigado por assistir e te vejo nos próximos cursos. 30. Vejo você brevemente: Obrigado pela sua atenção neste curso. Espero que tenha aberto sua cabeça para novas possibilidades e funções do Webflow. Agora você pode criar e gerenciar conteúdo dinâmico dentro do Webflow com CMS e muito mais. Espero que você tenha conseguido seguir os passos deste curso para recriar nosso sistema de blogs ou acabou de criar outro lado do seu. Além disso, espero que não seja o fim de sua jornada porque atualmente no Webflow, você pode criar sites de comércio eletrônico avançados com banco de dados de produtos dinâmicos, cartão de trabalho e processamento de pagamentos. Você vai encontrar tudo isso e muito mais em meus outros cursos de bem-estar. Enquanto isso, obrigado pelo tempo gasto juntos e espero que ele estava cheio de conhecimento valioso irá beneficiar o seu trabalho. Vejo você nos próximos cursos.