Como criar sites profissionais sem programação

1. Como criar sites profissionais: Tenho tentado aprender a construir sites. Ou talvez você seja um designer que gostaria de oferecer serviços de profundidade da Web aos seus clientes. Bem, você sabe, projetar é uma coisa, mas então transformar isso em um site real ao vivo. Bem, isso é uma coisa completamente diferente. E para muitos, isso pode parecer algum tipo de bruxaria B. E muitos simplesmente desistem e rápido. Mas, felizmente, este não tem de ser o caso. Porque neste curso você vai aprender a construir sites do zero sem a necessidade de codificar nada. E para isso, vamos usar construtor de oxigênio, que permite que você crie um controle qualquer aspecto do seu site. E ao longo do caminho, você aprenderá a criar cabeçalhos, menus responsivos, cabeçalhos adesivos e cabeçalhos sobrepostos. Como construir um herói seções dentro de controles deslizantes de largura total em segundo plano. E como adicionar ícones animados, como adicionar fóruns de contato, depoimentos, blogs e postagens de blog, etc. Mas basicamente, você vai aprender tudo o que há para saber para criar um site usando construtor de oxigênio. Eu só acho que é a melhor solução agora para criar sites profissionais, especialmente se você está vindo de um fundo de design. Então, se você está realmente interessado em aprender a desenvolver sites, a prova futura espera, basta se inscrever neste curso agora. E eu realmente espero te ver lá dentro. 2. Introdução: Então me diga, você tem tentado aprender a desenvolver sites? Ou talvez você é designer gostaria de oferecer serviços de desenvolvimento web para seus clientes. Você sabe, projetar é uma coisa, mas transformar esse design em um site de verdade. Bem, essa é uma história completamente diferente e uma história mais complexa, devo dizer. E para muitos, isso pode parecer algum tipo de bruxaria. Quando eles pensam em desenvolver sites, eles ficam intimidados e muitas vezes eles simplesmente desistem. Mas felizmente, não é realmente não tem que ser o caso, porque hoje em dia criar sites profissionais personalizados é realmente mais fácil do que antes. Então, a pontuação é só sobre isso? Bem, deixe-me dizer-lhe primeiro o que este curso não é. Bem, definitivamente não é outra palavra, Corpo de Imprensa. Se você é um noob Wordpress total, eu aconselho você a primeiro aprender o básico e, em seguida, voltar para este curso. Agora, os Poderes de Guerra serão um ambiente no qual trabalharemos, mas não nos concentraremos nisso. E você aprenderá a construir qualquer tipo de site usando algo chamado construtor de oxigênio. Agora, oxigênio e Builder é um construtor de sites, que significa que ele permite que você projete, desenvolva e controle basicamente qualquer aspecto de um site, seus cabeçalhos, rodapés , menus, blogs, colonos, modelos para 04 páginas, e assim muito mais. E o que é distintivo sobre isso é que ele lhe dá controle total sobre sua parte de desenvolvimento. É, é realmente difícil imaginar e projetar que não poderia ser desenvolvido com oxigênio. E a grande maioria dos projetos pode ser transformada em sites sem sequer tocar no código. Quero dizer, você pode usar as ferramentas fornecidas e não escrever uma única linha de código. Mas, claro, se você precisar de algo mais complexo, você pode adicionar código extra porque o oxigênio lhe dá total liberdade. E deixe-me ser claro. O discurso não é, de modo algum, um argumento de vendas para o plugin. Agora, nossos pontos de vista e testado um monte de outros construtores têm usado elemento Devi ou Visual Composer of Vada tema ultimato. Mas eles nunca entregaram o que eu esperava. E realmente, eu sei que é um clichê, mas quando eu encontrei oxigênio, eu nunca olhei para trás. Mas, claro, tem suas falhas. Quero dizer, no começo pode parecer intimidante. E meus designers, eu não gosto de algumas de suas soluções de usabilidade. Mas depois de alguns minutos, especialmente se você está familiarizado com basicamente qualquer ferramenta de design, anúncio e vai começar a fazer sentido. E, claro, estou aqui para guiá-lo. Então, não temam uma vez que instalamos oxigênio, começaremos a desenvolver um local. E ao longo do caminho, você aprenderá várias ferramentas e aspectos do plugin. Então vamos construir cabeçalhos incluindo cabeçalhos pegajosos, rodapés e menus, irá adicionar controles deslizantes, incluindo um controle deslizante de fundo de largura total como os que você pode, você sabe, como o que você pode ver aqui. Então, vamos adicionar galerias, ícones, vídeos e portfólios. E é claro que vamos tornar tudo muito bem responsável. E para terminar o curso, vamos pegar um pronto feito o design e recriá-lo usando oxigênio. E vamos do cabeçalho através das seções principais com imagens, ícones, transições até um rodapé estendido. E, a propósito, este será um site ao vivo. Você será capaz de apenas pesquisá-lo on-line e você será capaz de ver como ele funciona, como ele funciona uma vez que ele é desenvolvido. Então, realmente, se você está procurando um curso para ensiná-lo a desenvolver sites personalizados profissionais. E isso iria direto ao ponto. Acho que a pesquisa acabou. Então vamos pular direto para o nosso primeiro vídeo. 3. 2.1o que é Construtor de oxigênio: Então, para construir nosso site, vamos usar o construtor de oxigênio. No passado tentaram outros construtores como Devi ou elementar, mas eles sempre foram Mason alguns, algumas características, especialmente em termos de criação de blocos. Talvez nos dias de hoje alguma coisa tenha mudado. Mas realmente quando o oxigênio 3 ou 3.1 saiu, eu realmente, você sabe, eu estava viciado. Decidi comprá-lo. Decidi comprá-lo porque eu realmente vi o potencial. O potencial. E finalmente encontrarei algo que me permitiria construir os lados. Não é assim que eu gostaria. Então, se você for para o site de oxigênio builder.com, é claro, você será capaz de ler algumas informações de vendas sobre, sobre oxigênio. Você poderá conferir o tour do produto ou ver os tutoriais. Você, você será capaz de comparar oxigênio ou com isso, com a competição como Beaver elementar, Builder ou Devi e construtor. Mas o que eu gostaria de saber, como, virar sua atenção é que o oxigênio não é apenas um construtor de páginas, mas também um construtor de sites. Agora, a maioria desses construtores, definitivamente DV ou elementar, eles usam temas, então você sempre tem que ter um tema. Você pode ter um tema gratuito, mas você sempre tem que ter um. Oxigênio não usa temas, então você não precisa se preocupar com isso. E para você como um aspirante a desenvolvedor web e um designer gráfico que quer oferecer mais serviços aos seus clientes, ofereça serviços de desenvolvedor web aos seus clientes. Eu acho que uma das coisas mais importantes seria que se você obter oxigênio, isso é realmente como Dv. Dv, você pode apenas comprar uma licença ou byte uma vez e você tem as atualizações para sempre, atualizações vitalícias. E você tem sua licença é válida para um número ilimitado de sites, então você não precisa recomprar as licenças para cada site que você vai ser criado. Então, é basicamente ainda espero para sempre uma compra para a vida de um tipo de negócio. Então este é apenas um breve vídeo apenas para molhar os pés, apenas para mostrar que ferramenta vamos usar neste curso. E nos próximos vídeos, vamos dar uma olhada em como baixar oxigênio, mas também como tentar oxigênio. Se você quiser apenas verificar se é realmente algo para você. E você será capaz de, graças ao, a este tipo de como um recurso de demonstração de oxigênio, você será capaz de fazer exatamente o que eu estou fazendo em termos de construção do nosso site. 4. 2.2Não compre isso - tente: Então o oxigênio é basicamente um plug-in. E se você está familiarizado com o básico do Wordpress, que é uma espécie de pré-requisito para este curso. Como eu mencionei antes, oxigênio funciona como um plugin. Então uma vez que você, uma vez que você obtê-lo e como você deve baixá-lo, você será capaz de enviá-lo apenas como um plugin normal. E você poderá inserir sua, você sabe, sua chave de licença e você poderá obter atualizações gratuitas e gratuitas para esse site específico. E estamos prestes a fazer isso. Estamos prestes a fazer o upload do plugin. No entanto, se você não está convencido, se você não quer comprá-lo, você pode simplesmente ir em mãos. Você pode simplesmente rolar para baixo para, para este rodapé poço. E você verá esta opção aqui que diz “tente oxigênio”. Então, vamos clicar nele. E aqui, você pode realmente entrar lá uma demonstração, um ambiente de sandbox onde você será capaz de usar oxigênio exatamente como você usaria se você decidiu morder, se você decidiu baixá-lo. E aqui você pode escolher a instalação em branco, que eu acho que seria melhor porque nós realmente queremos construir nosso sinal do zero. E nós realmente queremos aprender tudo, bem, maioria das coisas que vêm com oxigênio, definitivamente todas as coisas que permitirão que você comece a usá-lo de forma independente. Mas é claro, você também pode escolher o exemplo do site pré-construído, que carregaria alguns elementos da biblioteca que vem com oxigênio. Mas vou escolher instalar em branco. E depois de alguns momentos estamos escrevendo o Dashboard WordPress. E aqui você pode ver que nós já temos oxigênio instalado e nós somos capazes de usá-lo exatamente como você usaria oxigênio se você comprá-lo, se você baixá-lo e carregá-lo para sua biblioteca de plugins do seu lado, é claro, nós temos em nosso Dashboard padrão WordPress. Podemos adicionar páginas, você sabe, mudar a aparência e mudar o manual, todas essas coisas. Então, se você não está convencido de que você quer, que você quer comprar oxigênio, você sempre pode apenas tentar Oxygen de seu site. No entanto, já estou convencido. Então eu vou estar usando minha própria instalação. Eu vou estar usando minha própria versão ou licença do plugin. E acho que podemos começar a construir nosso site. Por que não? 5. 2.3Uploading oxigênio para nosso site: Então, como você pode ver, eu tenho um fresco a partir de 20-20 instalação WordPress. E se você der uma olhada na minha barra de endereços, você vai ver localhost. E isso é porque estou executando o Wordpress localmente. Eu decidi fazer isso assim porque se eu fosse colocá-lo em um servidor ao vivo, eu poderia ter alguma perda de conexão, talvez algum dinheiro e problemas. E eu realmente queria evitá-lo. Eu realmente queria tornar as coisas o mais pequenas possível, o mais rápido possível. Por causa disso, você não terá que esperar que o servidor responda. E então teremos que esperar que meu computador responda ou tudo será muito mais rápido e fácil de editar para mim depois disso. Mas de qualquer forma, se você estiver, se você tiver o seu Wordpress instalado apenas servidor ao vivo, é claro que você teria o seu nome de domínio aqui. E o que temos que fazer é fazer login. Então eu estou indo apenas para digitar barra e, em seguida, apenas WP dash admin. E aqui eu vou apenas usar minhas credenciais de login. Então agora podemos realmente fazer o upload do plugin. Então eu vou para plug-ins, eu vou adicionar um. Eu vou fazer o upload. Eu só vou ter que encontrá-lo. Oxigénio 3.5. E eu vou clicar em Instalar Agora. Uma vez instalado eles vão ser ativados. Estou executando um multi-site para que você possa ver uma rede ativar o botão, botão em seus servidores. Só vai ser ativado. E então você pode realmente começar a usar oxigênio. 6. Oxigênio 2.4ativador: Então, uma vez que o nosso plugin, uma vez que o oxigênio é carregado, vamos entrar no nosso licenciante. Manter. Agora, se você decidiu comprá-lo, é claro que você vai recebê-lo em um e-mail deles, equipe construtor de oxigênio. E se você está apenas experimentando oxigênio em seu servidor, é claro que você não precisa, você não precisa digitar a licença, então você pode simplesmente pular este vídeo. Então o que eu vou fazer é ir para o oxigênio e, em seguida, duas configurações. Aqui dentro. Vou escolher a licença. E aqui vamos digitar nossa chave de licença. Isso novamente vem em um e-mail uma vez que você compra o construtor de oxigênio, e então você pode apenas pressionar enviar e você está indo, espero que você deve ver o texto válido aqui. E agora isso significa que o oxigênio será atualizado para toda a vida. Você vai receber todas as atualizações. Dentro do seu painel WordPress. Você pode basicamente atualizar o seu plug-in assim como qualquer outro plug-in que você pode obtê-lo a partir do repositório WordPress padrão. Então, uma vez que o oxigênio é instalado, uma vez que é uma vez que sua licença foi e é colocado aqui, talvez possamos passar para um pouco mais de uma fina basicamente relacionada ao Wordpress, não apenas fina relacionada ao oxigênio. Vamos adicionar nossas páginas ao nosso site. Então, então nós, então nós temos algo do nosso lado. Então vamos passar para isso. 7. 3.1Adicione as páginas: Então, adicionamos oxigênio, temos a licença. Agora vamos pegar algumas páginas. Quando vamos para o nosso menu Páginas aqui, vamos começar. Talvez, bem, vamos primeiro ver que páginas já temos. Bem, nós não temos qualquer pago aqui, mas se você tem uma nova instalação do WordPress e você provavelmente terá uma política de privacidade ou uma página de exemplo. E o que vou fazer é adicionar as páginas que usaremos no nosso, no nosso caso. Então, para o título, eu vou com a primeira casa. Esta será a nossa página inicial, obviamente. Então eu vou adicionar outro. Uma vez que somos designers que desejam oferecer seu desenvolvimento web e serviços, vamos usá-lo. Bem, vamos precisar de um portfólio. Então vamos publicar este site. Vamos acrescentar, digamos que temos um monte de coisas a dizer, um monte de coisas interessantes a dizer sobre o nosso trabalho. Então nós vamos ser, nós vamos estar adicionando um blog ao nosso site. E digamos que temos muitas coisas a dizer sobre nós. Então vamos digitar sobre, e claro, precisamos adicionar uma página de contato. Então vamos fazer isso. Vamos entrar em contato e publicar este lado. Agora, antes de passar para realmente criar ou imutável nossa casa, a página, vamos para as configurações, e então vamos para permalink. E vamos nos certificar de que temos o Post Name selecionado aqui. E agora, quando tentamos visitar nossa página, vamos ter que digitar o nome das páginas e estaremos prontos para ir. E essa é a melhor prática para fins de SEO também. Por isso, vou guardar as alterações. E se formos para opções de leitura, podemos usar esta sua página inicial exibe opção para realmente exibir um site específico, tão bem página, então poderíamos usar seus posts mais recentes se tivéssemos apenas um blog. Mas teremos um lado mais desenvolvido. Então eu vou escolher uma página estática e minha homepage vai ser home e posts vão ser colocados na minha página do blog. Por isso vou guardar isto. Agora aqui, eu decidi ir com os motores de busca desencorajar a partir do índice neste site porque é uma instalação local e bem basicamente não vai afetar o ranking do meu pepsin sits é apenas no meu computador. Mas quando você está construindo seu próprio lado, seu site ativo, você pode querer verificar isso porque os mecanismos de busca podem, podem indexar seu, você sabe, seu progresso uma vez que você está construindo o site. E se você quiser desencorajar os motores de busca disso, você pode querer verificar isso. Mas, claro, quando você estiver usando um plugin SEO, uma vez que os designers é feito, esta opção deve ser desmarcada. 8. 3.2Adicione o primeiro modelo: Então, o que são modelos em oxigênio ou, ou, ou modelos em geral? Os modelos serão basicamente como peças de design e conteúdo que basicamente olharão para o trabalho da mesma forma. Geralmente no, cada, cada página que você criar. Seja uma página dinâmica baseada em conteúdo, como uma página de blog ou uma página estática. Então, uma vez que você colocar no modelo, que vai parecer o mesmo em todas as páginas. O cenário mais comum para um modelo seria adicionar seu cabeçalho como um modelo e seu rodapé como um modelo. Porque um cabeçalho normalmente hospedará seu logotipo, o nome do seu, da sua empresa ou dos seus serviços, ou o seu nome. E o menu em talvez algumas informações de contato ou ícones de mídia social. E no rodapé, é claro, você também precisaria adicionar mais algumas informações. Talvez você adicione alguns, alguns links, pode ser algum outro menu. E iene basicamente, basicamente você precisaria criar um modelo para um cabeçalho e um rodapé. Então, se formos para oxigênio e depois modelos, você pode ver que eu não tenho modelos aqui. Então eu vou adicionar um novo modelo, e eu vou chamá-lo de meus modelos principais. Eu só vou digitar o principal. Se você der uma olhada nessas opções aqui, você pode ver que nós normalmente podemos ser capazes de apenas adicionar, herdar o design de outro modelo. Mas como este é o nosso principal, este é o nosso primeiro modelo. Não há nada para herdar de qualquer outro modelo. Aqui dentro. Podemos dizer oxigênio a que parte do nosso site neste modelo deve pertencer. Então, se você estava apenas criando um modelo para, para algum tipo singular de conteúdo, como um post ou uma página, ou para uma página de arquivo para uma categoria específica ou para um autor específico. Você poderia, você seria capaz de adicioná-lo aqui mesmo. Mas estamos criando um modelo para um cabeçalho e um rodapé. E geralmente gostaríamos de adicionar o mesmo tipo de cabeçalho e rodapé também, e a todas as nossas páginas. Então vamos manter isso simples. Vamos deixar assim por enquanto. Vamos supor que queremos adicionar o mesmo tipo de rodapé e um cabeçalho para todas as nossas páginas. Então, nesta outra seção, vamos apenas selecionar esta opção catch all. E depois vou publicar. A partir de agora, este modelo vai ser, vai estar dizendo a todas as páginas quais cabeçalhos e rodapés que página específica deve renderizar. Então, uma vez que este modelo está pronto, nós podemos, nós podemos bater editar com oxigênio e realmente começar a editar este modelo dentro do oxigênio. 9. interface 3.3Oxigen: Antes de começar a editar nosso template ou adicionar qualquer coisa a um site, é uma boa idéia saber o que estamos olhando primeiro, especialmente se você nunca viu oxigênio antes. Então vamos dar uma olhada rápida na interface do oxigênio. E na verdade, no começo, pode parecer um pouco assustador porque basicamente não há nada aqui. Temos apenas algumas telas em branco, algumas opções, alguns botões aqui no topo, alguns botões aqui no lado esquerdo, e é basicamente isso. No entanto, em apenas alguns segundos você verá que as interfaces do oxigênio, eu acho bastante semelhante a um monte de programas de designer como Photoshop, Illustrator, designer, ou o que você está usando para sua ferramenta de design. Aqui no oxigênio, temos ferramentas à esquerda. Se apenas clicarmos neste botão de adicionar, você verá que temos um monte, um monte de ferramentas diferentes, diferentes que podemos adicionar ao nosso site. Então nós temos o básico como alguns contêineres, links de texto, e nós poderíamos adicionar imagens, vídeos e outras coisas. Temos alguns ajudantes, explosões, isso é o que eles são chamados de ajudantes. Mas realmente eles são apenas alguns, como as coisas mais comuns ou módulos que você poderia estar usando no web design. E assim é como um post de galeria que vamos estar usando o módulo Easy posts para o nosso blog. Temos o construtor de cabeçalhos que usaremos para construir nosso cabeçalho, ícones sociais, testemunhos, controles deslizantes, tudo, tudo isso, todas essas coisas. Temos alguns Wordpress, Wordpress, Wordpress relacionados realmente módulos como um menu pro menu, códigos curtos, commons e todos esses. E todas essas coisas. Temos alguns dados dinâmicos. Então essas são as coisas que serão retiradas do nosso banco de dados, mas isso é para um vídeo posterior. Vamos pegar alguns widgets. Então, se estamos usando widgets para dentro onde primeiro podemos usar, podemos arrastá-los a partir daqui. E também temos conjuntos de designer de biblioteca que vêm com, que vêm com, com, oxigênio. E temos algumas peças reutilizáveis, mas ainda não criamos nada. Então eu não tenho nenhum feito sob encomenda, feito por nós e peças que poderiam, poderia ser adicionado ao nosso design. Então, basicamente aqui à esquerda, você vai ver todas as suas ferramentas. E aqui, a pesquisa superior e caixa que poderíamos apenas digitar talvez como alguns, como uma imagem. Lá vamos nós, temos nosso módulo de imagem. Ou podemos digitar pode ser um pouco mais leve ou SL, e temos nosso controle deslizante e et cetera. Então podemos simplesmente digitar menos letras, as primeiras letras do nome de qualquer módulo. E que um módulo vai ser filtrado para fora deste painel. Bem aqui. Aqui à direita, em cima à direita, temos alguns botões aqui, e temos este grande botão azul Salvar que precisamos, bem, precisamos, é uma boa idéia clicar nele com freqüência. E nós temos alguns, alguns outros botões. Então, vamos primeiro clicar na estrutura. Botão e como você pode ver, temos nossa estrutura e em apenas alguns segundos vai, ele vai parecer basicamente, como camadas no Photoshop, Illustrator ou designer. Então, todos os nossos elementos que vamos ser colocados aqui em nossa tela serão representados aqui nesta estrutura. Sem dor. Temos o painel de história, mas ainda não fizemos nada, então as histórias vazias. E temos as opções Gerenciar que nos permitem chegar a configurações diferentes ou globais. Então, por exemplo, se tentarmos alterar algumas configurações, por exemplo, talvez pudéssemos alterar algumas configurações de pavimentação com as quais poderíamos definir nossa página. Poderíamos brincar com configurações globais para animações. E, mas também, se formos em frente e escolhermos um estilos globais, estaremos brincando com estes em apenas um segundo. Somos capazes, podemos adicionar nossas cores globais que estarão sempre presentes quando quisermos usar as cores. Haverá, sempre que clicarmos como um seletor de cores, nossas cores globais estarão lá. E, claro, também temos fontes como. Então nós poderíamos escolher nossa fonte de exibição padrão, exibir frente de cavalos, uma fonte para o nosso, para nossos títulos. E também temos fontes para o nosso texto. Você também pode adicionar fundos aqui se você, se você quiser. E nós poderíamos mudar nossos títulos para que pudéssemos definir globalmente o tamanho e as cores para cada um de nossos títulos de um até seis anos de idade. E também podemos alterar o corpo do texto, o tamanho da fonte, peso, a cor do nosso poço, este corpo de texto. Então todas essas coisas que, que você gostaria de definir globalmente. Agora, vamos dizer que você só quer e definir seus títulos para ser, eu não sei, escrito em fonte Bree Serif. E você quer que eles sejam lidos sempre. Você poderia colocar isso bem aqui. E quando você está adicionando um título do nosso, como este cara aqui do nosso painel de ferramentas, então você não teria que se preocupar com as cores o tamanho, o peso e a altura da linha. Você pode colocar tudo aqui, certo? Então nós conversamos brevemente sobre isso e a interface de oxigênios, é claro, vamos mergulhar, mergulhar muito mais profundamente uma vez que começamos a adicionar em nossos elementos ao nosso site. Mas, na verdade, vamos brincar com essas configurações globais. Vamos, na verdade, algumas cores globais, cores globais. E vamos adicionar algumas fontes ao nosso, ao nosso site. E para isso, vamos ter que dar uma olhada rápida em alguns outros sites que geralmente estão usando meu cenário de designer. E eu só não quero pular nenhuma etapa ao criar esse design. Claro, tenha em mente que o design em si não é a coisa mais importante aqui. O mais importante é a aprendizagem da UE, ou novamente, em todas as competências necessárias para criar, recriar os seus próprios desenhos. Então vamos realmente passar para um site que eu uso para pegar algumas cores e alguns fãs. 10. 3.4Cores globais e fontes: Então vamos começar talvez com a adição de alguns conjuntos de cores ao nosso site. Então eu vou escolher, eu vou para um site chamado coolers dot co. E você provavelmente bem, você provavelmente já viu este site ou ouviu falar sobre ele, pelo menos. É apenas um ótimo site para criar diferentes cores, esquemas de cores. Então vamos ligar o gerador. E aqui, como podem ver, temos algumas amostras de cores. Por padrão, temos 12345amostras de cores. Mas se você quiser, você pode apenas clicar sobre isso, adicionar cores mais símbolo para apenas adicionar outra amostra de cor. E é claro que poderíamos removê-lo se você quisesse. E poderíamos fazer a mesma coisa com outros com outras cores. Então o que eu costumo fazer, o que eu costumo começar com é tentar criá-los em cores para o meu texto e cor para o fundo do texto. E geralmente não gosto de ir com Leckie preto e avião. Por quê? Porque eu acho que eles são muito exagerados, muito chatos. Mas é claro que isso vai ser totalmente você se você quiser ir com preto liso e branco liso. De qualquer forma, eu só gosto de usar uma cor cinza muito, muito clara. E eu sei que o código hexadecimal para isso é F8, F8, F8. Nós também poderíamos ir com algo ainda mais leve, que seria F9. F9, F9, F9. Lá vamos nós. E quando estiver feliz com a cor, vou trancá-la. E então eu vou tentar criar um bom fundo, como, uh, como a cor mais escura. Eu gosto de ir do mais claro e do mais escuro e então podemos tentar inventar outra coisa. Então, para esse cara, eu só vou tentar encontrar uma boa sombra disso, talvez essa cor marrom ultra escura que parece bem, e eu vou apenas trancá-la. E então se nós apenas tentarmos vir bem, se nós apenas deixarmos o gerador para vir acima com algumas outras cores para nós, nós poderíamos apenas pressionar a barra de espaço para apenas encontrar algumas cores que nós poderíamos usar final essas cores podem ser para nossos links. Podem ser para os nossos botões ou estados de pairar , todas essas coisas. Mas a parte mais importante aqui é apenas tentar primeiro chegar ao seu esquema de cores quando você está projetando seu site. E então para usar todas essas, todas essas cores, todas essas amostras de cores, talvez vamos adicionar mais uma. Todas estas amostras de cor para oxigénio. E isso é basicamente o que eu gostaria que você aprendesse com este vídeo. Então nós temos este F8, FATF, F9, F nove de nove. Só vou copiar esta cor. E eu vou para o oxigênio. E eu vou adicionar um conjunto de cores. E eu vou chamá-lo talvez como cores padrão. Lá vamos nós. E eu, eu só vou editar. E agora dentro deste conjunto, este conjunto de cores padrão, eu vou apenas adicionar uma cor. E vamos dizer que pode ser cinza claro. E eu vou apenas colar esse hexágono, valor hexadecimal assim. Então nós temos nosso, nossa luz, cinza claro e, em seguida, vamos em frente e. Pegue este código hexadecimal também. E este vai ser o nosso castanho escuro. Castanho escuro. Lá vamos nós. Vou colá-lo. E lá vamos nós, temos o nosso cinza claro e o nosso castanho escuro. E, claro, no seu caso, você estaria adicionando cores diferentes e diferentes. Vamos talvez, apenas como a prática, vamos talvez adicionar um pouco, talvez vamos pegar este marrom claro Y nada. Esta pode ser uma boa cor para os nossos botões. Então eu só vou me misturar é chamado de marrom médio. Lá vamos nós. E outra hashtag e adicione a cor. Então eu não vou salvá-lo. Então esta seria a nossa paleta de cores padrão. Por enquanto, vamos manter isso simples e mantê-lo assim. Como eu disse, é, não é realmente sobre a parte de design. Eu realmente não quero torná-lo mais bonito. Só quero torná-lo prático. Eu só quero que você aprenda as habilidades. Eu só quero que você aprenda a lidar com oxigênio para criar seus próprios projetos. Claro que será criar um design ao longo do caminho. Mas, por enquanto, vamos aprender esse padrão. Como configurar alguns valores padrão aqui dentro do oxigênio. Então estas são as nossas cores. Então, e as fontes? Então, quando se trata de fontes, eu gostaria de ir para o par de fontes. Pais carinhosos. Lá vamos nós do pai dot co. E aqui temos um bom, bastante extenso conjunto de diferentes, de pares de fontes diferentes. E poderíamos ir com fontes como Sans Serif e Sans Serif ou san-serif seria nosso display encontrado nosso telefone de direção e serif. Neste caso, Alexandria, seria a nossa fonte de texto corporal. Poderíamos ir com sensor de san-serif, display e san-serif como este, ou display e Serif. E nós poderíamos, você sabe, apenas escolher a categoria que quisermos aqui. Então, todos esses telefones são fontes do Google ou eles são gratuitos e eles vêm com oxigênio também. Então, vamos tentar encontrar algo legal. Eu sei que vou usar para a nossa fonte do logotipo chamada Bree Serif. Então vamos ver se conseguimos encontrá-lo. Lá vamos nós. Temos a Bree, o Serif e a Laura bem aqui. Vamos ver se vem em outro par. Bree Serif e abertura termina. E eu acho que vou usar este par porque é apenas um bom contraste entre um tipo de cabeçalho funky e um texto realmente legível. Então nós poderíamos ir com essas fontes Paris, mas nós também poderíamos ir para um site de código de site chamado Font font joy. Lá vamos nós. E aqui podemos brincar com isso contrastando o controle deslizante, o controle deslizante Contraste. Assim, poderíamos dizer que gostaríamos de ter mais contraste entre os nossos títulos e o nosso texto. Ou gostaríamos de ter um contraste muito, muito baixo. E você pode ver que temos o nome da fonte aqui à esquerda, e o nome da fonte para o nosso subtítulo aqui à esquerda também. E os nossos textos e bem, o nome da nossa fonte de texto corporal também está aqui. Então, se você quiser usar um par de fontes muito alto contrastante, nós poderíamos fazer exatamente isso. Então teríamos um Enrico Letta e também um laboratório de palhaçadas para o nosso, para o nosso texto corporal. Mas isso é apenas mais uma ferramenta simples e muito interessante para encontrar alguns pares de fontes bem olhando. Então eu vou com Bree Serif e Open Sans. Então eu vou para o oxigênio. Minha fonte de exibição será Bree Serif. E vou deixá-la como ciência aberta e vou salvá-la. Então agora, sempre que eu vou estar adicionando algum título ou eu vou estar adicionando algum texto. E o oxigênio vai assumir que eu quero usar essa fonte da Bree Serif para o meu título, uma frase aberta para o meu corpo de texto, mas também para menus e links finalizados. Então nós temos as cores, cores padrão, nós temos as fontes. Poderíamos também passar para as nossas rubricas, se quiséssemos. Então vamos dizer que gostaríamos de talvez vamos manter este título, um como 36 pixels. Mas vamos acrescentar, bem, vamos mudar uma cor. Então eu vou apenas clicar nesta cor. E você pode ver aqui em baixo nós temos nossas cores padrão exibidas. Então poderia adicionar este marrom escuro como nossa cor. E, em seguida, basta clicar em Salvar. Poderíamos fazer o mesmo para a categoria dois, marrom escuro. E agora sempre que adicionamos este título um ou dirigindo para, indo para o título três, se nós, se nós apenas adicionarmos essa cor, nós sabemos que essa é exatamente a cor que vamos usar para esse cabeçalho. E, claro, nós também poderíamos alterar o tamanho da fonte se quiséssemos. Mas agora vamos manter isso simples. Vamos apenas adicionar as cores. Podemos sempre mudá-los. O valor de cabeçalho de uma instância específica de um título uma vez que foi colocado em nossos, em nossos canibais. Está bem. Então nós temos as cores, nós temos os fundos, nós temos alguns títulos. Poderíamos diminuir o tamanho da fonte para talvez 15. E talvez mudemos a cor para o nosso castanho escuro. Lá vamos nós. Vamos deixar a altura da linha por enquanto, tal como está. Podemos mudá-lo mais tarde e eu vou guardá-lo. Então nós temos nossa configuração de valores padrão. Nós temos que, nós aprendemos a usar a interface de oxigênios basicamente. Então agora podemos realmente começar a adicionar nosso modelo. E vamos começar com a adição, é claro, uma seção. E aprenderemos quais são as seções, o que são colunas e desenvolvedores em vídeos subsequentes. E vamos começar adicionando nosso logotipo no canto superior esquerdo do nosso site. Sítio Web. Então vamos começar a fazer isso a seguir. 11. 3.5comece a criar o cabeçalho: Para começar a adicionar nossos logotipos, menus e ícones sociais e todas essas coisas, primeiro precisamos pensar em onde vamos colocar isso. Precisamos de algum tipo de recipiente aqui dentro de um oxigênio. E, na verdade, em qualquer tipo de projeto de desenvolvimento de armas, é uma boa idéia primeiro ter algum tipo de recipiente para manter todas as suas peças menores, todos os seus elementos menores. Agora, geralmente em oxigênio, começaríamos com uma seção e então poderíamos adicionar uma div ou colunas. E falaremos sobre isso em alguns minutos, em alguns instantes. Um dos, um dos próximos vídeos. Mas estamos construindo um cabeçalho, nosso modelo com um cabeçalho agora. Então, em oxigênio, você tem um construtor Hadoop. Esse é um tipo especial de elemento de módulo de seção. Então, se nós apenas digitar no cabeçalho e, em seguida, Hatteras construtor, você pode ver que ele foi realmente adicionado ao nosso site. Se formos para a nossa estrutura, podem ver que temos o nosso construtor de cabeçalhos. Esta é a nossa secção principal. E então temos nossa linha de cabeçalho com três elementos. Então temos o nosso elemento esquerdo, elemento central e elementos de escrita. À esquerda, ao centro e à direita. E geralmente em um cenário típico de web design, colocávamos nosso logotipo na parte esquerda do nosso cabeçalho. E para isso, poderíamos usar a linha esquerda parte aqui dentro da nossa linha de cabeçalho. Então vamos realmente adicionar um logotipo de criado é algo como, bem, um logotipo muito, muito simples e simples para o nosso site. Eu chamo o design wow porque y nada, Eu só peguei este ícone simples de ícone plana. E como você pode ver, eu tenho duas versões diferentes deste, deste logotipo. Um é, bem, o nosso castanho escuro e o outro é a nossa luz, luz, grande. Então, neste caso, podemos adicionar nosso logotipo de duas maneiras diferentes. O mais simples, o mais fácil será apenas transformar esse cara em uma imagem simples e depois carregá-lo como nosso logotipo, que vamos fazer agora. E você costuma fazê-lo assim se o seu tipo é algo um pouco mais especial, algo descolado, algo feito sob medida, algo que não é facilmente recuperável com apenas texto simples e simples. Então eu só vou pegar esses caras. E eu vou pressionar Alt mais controle mais Shift mais S para exportar esses elementos. Como você pode ver, estou usando o Affinity Designer, mas se você estiver usando o Photoshop ou o Illustrator, basicamente você pode transformar seu texto e esse ícone em uma imagem. Então eu vou escolher o PNG porque eu não preciso do fundo. E eu vou usar a seleção sem fundo. E o tamanho é bom. Vou só ir à Exportação. E eu vou chamá-lo talvez logo um. E eu vou bater em Salvar. E agora vou voltar ao meu projeto. E eu quero adicionar uma imagem aqui na parte esquerda do meu construtor de cabeçalhos. Então, novamente, eu vou escolher adicionar e eu vou encontrar uma imagem. Lá vamos nós. E eu vou ter que encontrar minha imagem na minha biblioteca de mídia. Então, vou só procurar. E agora eu vou ter que encontrar essa imagem. Assim que encontrar a minha imagem, vou apenas clicar duas vezes nela e escolher Selecionar imagem. E como podem ver, essa imagem foi colocada dentro da minha seta à esquerda. Então este é o meu logótipo. E, você sabe, se você quiser, e isso, eu acho que seria uma boa idéia. Talvez pudéssemos brincar com esta imagem. Quero dizer, poderíamos, por exemplo, torná-lo menor. Então deixe-me apenas talvez mudar a altura para algo como 45 pixels, ou talvez até mesmo por último, algo como 32 pixels, ou talvez até 26 pixels. Podemos descer e descer e descer o quanto quisermos. Portanto, esta é uma maneira de adicionar o logotipo em nosso site. Claro, ainda temos que brincar com algum espaço em torno de todos esses elementos. Mas, por enquanto, estamos aprendendo a adicionar um elemento ao nosso site. E, na verdade, se trabalhássemos e salvássemos isso, e se pegarmos nossos sites, bem, endereço, eu só vou copiá-lo. E desde que eu estou em um Firefox, eu vou apenas usar controle mais Shift mais P atalho de teclado para adicionar para entrar no modo de navegação anônima. Mas se você estiver no Chrome, você usaria, você poderia usar o controle mais Shift mais n para entrar no modo de navegação anônima. Então eu estou indo para o endereço do tablet. E você pode ver que, na verdade, já estamos começando a construir nosso site. Vamos verificar se isso, se também funciona no Chrome. Lá vamos nós. Nós temos nosso site basicamente começando, começando a funcionar realmente. Foi assim tão simples? Mas como eu disse, esta é apenas uma das maneiras de adicionar um logotipo como este. O que poderíamos fazer, no entanto, é que talvez pudéssemos adicionar o nosso, à nossa imagem como esta peça do nosso design. Então, eu só vou pegá-lo. E novamente, eu vou controlar a mudança como seleção PNG sem fundo. Exportar. Exportar é, como você pode ver, já, explorado, exportado antes. Então eu vou chamar de login para salvar esse cara. Volte para o Firefox e, novamente, adicione uma imagem. E eu vou ter que encontrar aquele cara. Então, uma vez que o encontrei, vou apenas lê-lo, selecionar uma imagem. Vamos bater em Save. Como sempre, às vezes só temos que atualizar a página e temos nosso logotipo colocado aqui, novamente em nossa linha esquerda e esquerda. Se você quiser, você poderia simplesmente arrastar essa imagem para outra parte do nosso, bem, este construtor de cabeçalhos se você quiser, mas, você sabe, é apenas, é apenas uma coisa que você poderia fazer, mas nós vamos colocá-lo para trás e pertence. E eu, eu vou apenas remover este logotipo agora. Então, para fazer isso, eu vou passar o mouse sobre esta imagem bem aqui, esta camada. E eu só vou apertar este ícone x Remover Componente. Lá vamos nós. Então nós temos nossa imagem e vamos talvez torná-la menor, mas nós não temos o texto, então como adicionar o texto para o nosso logotipo? Quando novamente, novamente, eu só vou apertar Adicionar. Bem, vamos encontrar o texto. Lá vamos nós. E eu só vou digitar, WOW, projetar o ego deles. Mas como este é apenas um texto simples e nós o colocamos em sentido aberto, como você pode ver, nossa fonte não é a fonte que, que deveria bater, supostamente ser Bree Serif. Podemos mudá-lo aqui mesmo. Poderíamos ir em frente e escolher mostrar o serif, ou podemos apenas deixar eu remover isso. Ou podemos adicionar um título. Então apenas digite o título. E como podem ver, já temos a fonte que precisamos. Mas uma vez que está definido, esta tag é definida como um. E em nossos valores globais e globais, nós o definimos para, eu acredito, 36 pixels. É muito grande, mas ainda assim poderíamos torná-lo menor, tipo 24. Claro, vamos digitar o texto enquanto projetar. E lá vamos nós. Talvez pudéssemos mudar algumas coisas. Talvez me deixe fazer uma cidade, talvez um pouco menor, 36, porque isso deve ficar bem. E ainda poderíamos ir para a guia Avançado, depois topografia. E aqui, talvez pudéssemos aumentar o espaçamento entre linhas, espaçamento entre letras e mu um principal para fazer com que pareça algo assim. Acho que está tudo bem. Agora, se você gostaria de aumentar ou diminuir o espaço entre eles, esses elementos, você poderia pegar seu texto ou sua imagem neste caso. E novamente, vá para avançado, desta vez para tamanho e espaçamento. E aqui, você poderia, você poderia, é claro, n mudou sua altura ou altura mínima ou largura. Mas você também pode brincar com algo chamado estofamento e margem. Mas vamos falar sobre esses dois no próximo vídeo. 12. 3.6Adicione preenchimento e marging ao logotipo: Então vamos agora falar rapidamente sobre duas idéias, dois elementos em um desenvolvimento web e são extremamente importantes, mas felizmente extremamente fáceis de entender. E eles são extremamente importantes porque você vai usá-los bastante. E esses elementos são preenchimento e margem. E a diferença entre eles é que eles basicamente publicitam espaço em torno de um objeto, mas Padding acrescenta como um espaço interno dentro de um contêiner e a margem do espaço exterior do Ed. Mas no nosso caso basicamente agora podemos usar qualquer um desses valores. Então, se quisermos adicionar, digamos, algum espaço entre o nosso pássaro e o texto, poderíamos usar preenchimento ou margem. Então, se apenas digitarmos, digamos, dez pixels, você pode ver que estamos expandindo esse contêiner aqui mesmo. Você pode ver esta linha, esta linha roxa, que é uma marca no nosso recipiente. E se tivéssemos a margem, você pode ver que o contêiner permanece o mesmo. Mas temos espaço entre nosso pássaro e o texto, como fizemos com o preenchimento, mas o contêiner permanece intacto. Agora, outra coisa que poderíamos fazer em termos de margem e preenchimento é que poderíamos adicionar algum preenchimento ao nosso contêiner principal, nossa linha de cabeçalho bem aqui. E você quase sempre encontrará algumas opções de preenchimento e margem sob a guia avançada. E então tamanho e espaçamento. Estamos novamente dentro deste preenchimento, preenchimento e opções de margem agora. Mas antes de começarmos a fazer isso, e antes que você realmente comece a entender a diferença entre preenchimento e margem, especialmente quando adicionado aos contêineres. Deixe-me mudar rapidamente o fundo do nosso cabeçalho para algo realmente arbitrário, algo assim. Vamos mudá-lo em um segundo. Então, novamente, tamanho e espaçamento. E se agora adicionarmos algum preenchimento para cima e para baixo, digamos 50 pixels e depois 50 pixels, dois superior e inferior. Você pode ver que nosso contêiner cresce. Agora temos muito desta cor vermelha pálida bem aqui. Mas se adicionarmos a margem, mesmo que os valores sejam os mesmos, você pode ver que estamos basicamente mantendo o recipiente intacto em termos de seu tamanho visível ou perceptível. Mas estamos adicionando margem para a extremidade superior e inferior. Claro que você não pode ver nada agora porque é branco contra largo. Mas se você apenas passar o mouse sobre este espaço bem aqui, você pode ver que nós estamos, nós estamos realmente adicionando alguma margem. E, a propósito, se você não quiser adicionar margem nem preenchimento como aqui, você sempre pode pegar isso como uma borda de um recipiente. Bordas brincam em torno dele, brincam com ele. E o mesmo para o estofamento como este. E então, como você pode ver, esses valores foram digitados automaticamente aqui dentro de nossos valores de preenchimento e margem. Agora, eu não quero que esses caras se pareçam com isso. Eu quero adicionar um pouco de estofamento, mas não tanto. Vamos com talvez 2525. Acho que isto deve ser distribuído, certo? Talvez, talvez 18. Claro, se tivéssemos desenvolvido um design adequado antes, já teríamos todos esses valores. Mas como eu disse, é mais sobre apenas a planície em torno de uma aprendizagem as habilidades para construir um site do que apenas realmente aderindo diretamente ao nosso design e fazer um anúncio luca fina, o mais bonito possível. Então temos a configuração do logotipo, temos alguma margem, e temos algum espaço bem aqui. Eu não fui para, no entanto, remover essa cor de fundo. E estamos de volta com o nosso design. E se você quiser verificar o que parece, se não estamos logados. Lá vamos nós. Temos o nosso bem desenhado e o nosso logo aqui no canto superior esquerdo. Agora, isto parece tudo, isto parece tudo bem. Mas é claro, precisamos ainda lembrar sobre nosso design quando ele vai ser acessado por usuários a partir de provavelmente um dispositivo sem celular. Hoje em dia, a maioria do tráfego e sites vem de dispositivos móveis, não de desktops ou laptops ou qualquer outra coisa. Por isso, temos de prestar atenção a isso. E eu acho que nós já devemos começar a entender como lidar com essa questão desde o início, desde o início, porque é extremamente, extremamente importante. Então é realmente começar a fazer isso no próximo vídeo. 13. 3.7Cuidar da responsabilidade: Então, como eu disse, nosso design parece bom. Bem, até agora, nosso logotipo parece bom em dispositivos desktop, mas e quanto a dispositivos menores? Então precisamos cuidar do lado responsivo das coisas aqui dentro do oxigênio. E é realmente muito fácil. Se dermos uma olhada nesse pequeno switcher aqui à esquerda, você pode ver que temos alguns ícones. E se nós apenas clicar em qualquer uma dessas opções, então vamos com contêiner de página, 1120 pixels e abaixo. Isto é o que o nosso design provavelmente, bem , quero dizer, o tamanho do nosso logotipo vai se parecer com a maioria dos laptops. Até agora, parece tudo bem. Vamos para menos de 992. Isso pode ser como alguns comprimidos maiores. Isso também é bom. Vamos para menos de 768. Agora, neste momento, já que vamos ter algum menu aqui, talvez possamos mudar algumas coisas sobre isso. Talvez pudéssemos, por exemplo, mudar o tamanho do texto. Então eu só vou selecionar, este está indo, este cara bem aqui. E para 768, eu gostaria talvez de torná-lo um pouco menor, talvez esta imagem também. Então eu vou apenas talvez usar este controle deslizante agora. E eu vou trazer esse cara para, talvez, 18 pixels. E para esse cara, talvez eu vá, vamos ver em pixels também. Agora isso vai ser muito pequeno. 2424 deve estar bem. Lá vamos nós. Então nós temos o nosso hmm, você sabe o que, talvez nós também vamos mudar isso. O tamanho da nossa lacuna bem aqui. Talvez seja só um pouco menor. E como você pode ver, se você for para o tamanho e o espaçamento, poderíamos talvez fazer como cinco pixels, não mais. Então, se agora vamos para os nossos dispositivos antigos, então este é o nosso logotipo. Em seguida, contêiner de página, em seguida, menos de 992 e, em seguida, 768. Agora ele se torna menor e vamos menos de quatro AD. Para 80, ainda parece bem. Claro que vamos estar jogando com o lado responsivo das coisas muito mais nos próximos vídeos. Se você quiser, você poderia talvez, talvez porque é assim que você quer fazer o seu projeto. Vamos, talvez, ir para a nossa linha de cabeçalho. E digamos que talvez gostaríamos de mudar a cor do fundo para, para o nosso como Cain, talvez como uma visão de smartphone. Por que não? Só por diversão? Então, se estivermos em menos de 480, agora, vamos ao Advance. Claro que selecionamos nossa linha de cabeçalho. Vamos para o fundo, cor de fundo. E vamos deslizar talvez mudar a cor do fundo para este cinza claro ou talvez até mesmo algo visível. Então, só para que você possa ver a mudança. E vamos deixá-la assim. Eu vou salvá-lo. Então, se você agora vai para os nossos dispositivos antigos ou grande faz um recipiente de página de desktop nada acontece menos do que o meu 92, não muito acontece. Menos de 768. O logotipo e o texto mudam agora é tudo menor e menos de quatro AD. E vamos para o nosso design. E que, a propósito, poderíamos, por exemplo, agora mesmo, apenas começar a mudar o tamanho da nossa porta de visualização do nosso navegador. Então, como podem ver, estamos ficando menores agora. O saltou muito bem para menos de 768, acredito que foi. E uniformidade da paisagem, menor, menor, menor. E lá vamos nós. Temos o nosso menor smartphone terá na linha de cabeçalho nos dispositivos mais pequenos será parecido com isso. E se você não quiser manter essas mudanças, essas mudanças como esta, lembre-se sempre de se certificar de que você está no intervalo certo. Então, menos de quatro AD neste caso, eu vou apenas removê-lo. E vamos para menos de 768. Talvez eu vá deixá-lo. Deixe-o assim, e lembre-se sempre que todas essas mudanças funcionam. Bem, há uma hierarquia entre todos esses, todos esses caras. Então, se você definir algo para menos de 992, digamos que você vai mudar essa cor do texto para, vamos com algo amarelado talvez ou apenas algo visível. Lá vamos nós. Então, por menos de 992, é assim. Então, para os valores mais altos, então para o elemento pai, nós temos ainda, nós ainda temos o nosso original. Mas se formos para baixo, se formos para a criança, esse valor muda e então vamos se formos para a outra criança, esse valor muda, mas apenas o tamanho muda porque não tocamos na cor, então a cor permanece a mesma. Se você mudasse para algo assim. Então vamos para 1992. Temos verde, depois 768, temos marrom. Se não aplicarmos nada a ele, e não aplicarmos a cor, cor. Bem, qualquer atributo realmente leva os valores do elemento pai, que no nosso caso é o ponto de interrupção 992. Mas é claro que não precisamos da cor verde, então vou me livrar dela. Acho que podemos ficar com o nosso com o tamanho para o nosso logotipo. Isto parece estar bem. Vamos mantê-lo assim. Então nós temos nosso logotipo, nós ficamos bem, nós cuidamos de um pouco de um lado responsivo das coisas. Então acho que é hora de adicionarmos nosso menu principal à direita. Então vamos começar a fazer isso no próximo vídeo. 14. 3.8Adicione o menu no desktop: Então agora vamos começar a adicionar nosso menu. Isto é um tipo de processo, eu quero dizer, alongar ou complexo, mas há alguns passos para construir um menu em cada site, não apenas aqui dentro de um oxigênio. Então vamos começar com a adição de nossos elementos de menu. Então, novamente, eu vou apenas apertar e, em seguida, começar a digitar menu. Agora, como você pode ver, existem dois módulos para o nosso menu. Este menu é o, bem é que eu não quero dizer obsoleto, mas é um módulo de menu antigo. E uma vez que, eu acredito, oxigênio de três pontos, 3.2 ou 3.3, nós temos o menu pro. Então eu vou fazer, então eu vou estar usando nosso menu bem aqui. Agora, como você pode ver, ele é adicionado à nossa primeira linha, esta linha, parte esquerda, bem aqui. E eu queria estar do lado certo, então vou arrastá-lo para a direita. Agora, por padrão, você pode ver que existem alguns links de menu fictício simples adicionados ao nosso, ao nosso menu. Então eu vou para a opção do menu. E como podem ver, é basicamente AMT que não temos nada aqui. Bem, isso é porque ainda não criamos um menu. Então eu vou apenas salvar meu, meu site. E eu vou voltar para o painel de administração. E de vez em quando você vai ver essas mensagens aqui informando que algumas, algumas cache, que você altera algumas configurações globais e você precisa reformular suas configurações de oxigênio. Então, vamos clicar nisto. E então você é basicamente, então, como você pode ver, tudo feito, dinheiro CSS universal gerado com sucesso. Isso é basicamente para refrescar a memória do oxigênio. Então vamos passar para realmente criar esse menu. Eu vou para o painel de aparência e, em seguida, menus. E vamos criar nosso primeiro menu. Vou chamá-lo de Menu Principal. Lá vamos nós. E eu vou apertar Criar menu. E vamos apenas adicionar todos os nossos elementos. Então, temos contato sobre o portfólio de AN. Eu vou talvez mover esses caras por aí. Claro, nós também poderíamos adicionar alguns itens de sub-menu, mas por enquanto vamos manter, mantê-lo simples. E eu vou bater em criar. E então podemos voltar para a Página Inicial das nossas páginas. E então eu só vou bater editar modelo. E lá vamos nós. Você pode ver que o nosso menu é, está bem aqui à direita, do lado direito. Como você pode ver, oxigênio adicionou nosso único menu bem aqui onde deveria ir. Mas é claro, há muita coisa que precisamos cuidar. Bem aqui. À esquerda você pode ver diferentes guias que controlam a aparência do nosso, do nosso menu. Então, primeiro vamos em frente e mudar algumas coisas sobre a aparência da área de trabalho do nosso menu. Então se nós, se clicarmos neles e no menu da área de trabalho, você pode escolher entre a orientação vertical e horizontal do seu menu se isso é algo que você quer fazer, por exemplo, se você quiser fazer como uma página de portfólio. Ou site portfólio, você poderia talvez apenas adicionar um menu vertical do lado e como uma grande peça portfólio do outro lado. E aqui nós temos diferentes em momentos diferentes. E isso irá realmente controlar a aparência de vários aspectos do nosso menu. Então, se formos para a tipografia, não precisamos brincar com a família de fontes porque não, nosso d, já definimos o padrão para nossa topografia para outros elementos que não sejam cabeçalhos. Então poderíamos brincar com o tamanho da fonte, se quisermos. Talvez vamos com algo como 14. E poderíamos mudar a cor. Vamos com a nossa cor padrão. E talvez, talvez, vamos ao Chido. Vamos ver como vai parecer se o definirmos para maiúsculas, maiúsculas, nossa transformação de texto. Também poderíamos usar minúsculas se quiséssemos, mas vou usar maiúsculas. Nós não temos muitos elementos Menu. Então eu acho que nós poderíamos talvez torná-lo mais proeminente, torná-lo mais visível por uma mudança no, transformando o texto para ser maiúsculo, maiúsculo. Agora, se você quiser, você também pode mudar o peso da fonte. Lembre-se que esta é a fonte do Google, ciência aberta, ciência aberta, e esse tipo de letra. Então nós vamos obter diferentes pesos de fonte para esta fonte específica e ângulo. Vamos deixá-lo, vamos deixá-lo como padrão. Eu acho que se você for com 600, isso pode ser um pouco demais. Talvez se não fosse, se não fosse maiúscula, talvez parecesse melhor. Então, como eu disse, você tem total flexibilidade quando se trata da mudança na aparência desses elementos. E isso dependerá basicamente seus gostos artísticos e seu design e expectativas de seus clientes, isso vai parecer. Mas você sabe, você tem todas as mudanças aqui visualmente, bem dispostas. Claro, todos esses elementos estão se tocando. Eles estão muito próximos um do outro. Então vamos para o espaço em uma linha e fronteira. Portanto, o que eu gostaria de fazer é acrescentar alguma margem entre estes elementos. Então vamos ver, oito pixels. Oito pixels pode estar bem. Agora, se você adicionar, se você gostaria de adicionar um pouco de preenchimento aos seus elementos, você poderia, claro, fazer isso. E isso seria, que poderia vir a calhar se você quiser adicionar algumas cores a este elemento, ao fundo. Então, digamos que gostaríamos de adicionar algum autonômico. Nós gostamos disso, desse tipo de cor. E, em seguida, vamos para os nossos manuais de desktop, base e alinhar. E vamos talvez adicionar uns dez pixels. E como você pode ver aqui, você pode, há um, há um pequeno botão Aplicar tudo. Se clicarmos nele, vamos aplicar com o mesmo valor a todos os nossos, todos os nossos elementos. Mas isso não é realmente o que eu quero fazer. Eu só vou apagar todos esses, todos esses elementos. E, claro, eu não quero que esse cara seja tão marrom. Eu acho que parece, isso parece melhor. No entanto, podemos sempre brincar. Com a topografia, talvez talvez aumentar o tamanho desde que colocamos em minúsculas, talvez como 15. Mas como eu disse, vai ser totalmente, totalmente com você. E a última guia aqui neste menu da área de trabalho é o cursor e a guia ativa. Todos esses elementos, todos esses, todos esses valores vão permitir que você altere a aparência do seu, de seus links de menu quando eles são Hubbard ou quando eles estão ativos. Então, quando a página específica está ativa. Então, digamos que gostaríamos de alterar a cor do texto em um pairar. Digamos que gostaríamos de fazer isso em nossa vida. Cor vermelha descolada. Então, sempre que passarmos o mouse sobre o nosso pedaço de texto, ele vai mudar, vai mudar. Além disso, podemos mudar a cor de fundo do Hubbert. Então, como você pode ver agora, estamos mudando o texto e o fundo. E é aqui que nenhum estofamento iria realmente, você sabe, jogar bem junto com essas mudanças, nós teríamos mais espaço para respirar aqui. Teríamos mais espaço. Então ficaria definitivamente melhor. Mas você sabe, estamos aprendendo as opções. Então isso é o que essa cor de fundo do mouse não faz. Você também pode ter uma fronteira. Então, se passarmos o mouse sobre, nosso elemento vai adicionar uma borda. Então, talvez me deixe remover isso. Vamos apenas adicionar uma borda de dois pixels inferior. E como você pode ver agora, nós já temos esta parte inferior, esta borda inferior aplicada ao nosso, um de nossos itens de menu porque estamos visualizando esta página agora. Então vamos, se visualizarmos sobre, essa borda está aparecendo sob o link sobre aqui. Então isso é algo que ela poderia fazer. Claro, você também pode adicionar a opção de passar o cursor superior da borda superior da borda. Isso é o que você quer fazer. Acho que vou deixar como um só. Acho que gosto desta opção. E eu vou me livrar da cor do texto. Eu só quero um belo e agradável sublinhado na fronteira. Sempre que eu passar o mouse sobre o, passou o mouse sobre o menu, menu link você, nós também poderíamos alterar a cor do texto ativo. Então, se agora estamos visualizando a página sobre, então esta é a nossa página ativa. Poderíamos mudar essa cor para, sei lá, talvez algo, algo assim. Então, sempre que essa página estiver ativa, cor do link do menu vai mudar. E eu não quero essa mesma cor para a cor de fundo ativa. E também podemos alterar a duração da transição. Então, se quisermos adicionar uma cor à nossa classe de textos pairados, vamos com o vermelho novamente só para que você possa ver tudo melhor. E se mudarmos a duração da transição , digamos, não sei 5,5 segundos. Se passarmos o mouse sobre esse elemento, você pode ver que ele está bem desvanecendo quando estamos pairando sobre o link e desaparecendo quando estamos pairando para fora assim. Então isso é algo que poderíamos fazer. Eu vou deixá-lo e eu vou apenas deixar este fundo Hover Border. Isso também vai ser, como você pode ver, também vai ser uma transição como esta, mas é claro que isso é um peso muito grande. Então um deve estar, deve ficar bem. Então este é o nosso menu da área de trabalho. Se começarmos a fazer do nosso lado menor. Agora, neste ponto, ele ainda parece tudo bem, mas só porque nós não temos muitas peças aqui, bem aqui, não muitos, nem muitos elementos Menu. Mas uma vez que começamos a adicionar mais alguns links aqui, isso, você sabe, iria estragar totalmente o nosso menu. Não ficaria bem. Então, na verdade, vamos talvez adicionar mais alguns links ao nosso portfólio. Só, você sabe, só para aprender a adicionar esses e como seria uma vez que eles estão aqui. E também podemos adicionar alguns itens de sub-menu apenas para ver todos os efeitos que podemos adicionar. Quando você está, quando você tem alguns itens de sub-menu no seu, no seu menu e o que você pode fazer com eles aqui dentro de oxigênio. 15. 3.9faça a mim maior: Então, se você tiver itens de sub-menu em seu menu, como nós temos aqui, você não pode mudar sua aparência aqui. Se for claro, um menu da área de trabalho aqui nesta guia suspensa da área de trabalho. Então, primeiro de tudo, podemos habilitar a lista suspensa. Então, quando fazemos isso, nós realmente podemos ver esses elementos bem aqui. Claro que, se não ativarmos o menu suspenso, isso é realmente bem, isso se foi. Ainda está lá. Ainda está no banco de dados. Nós apenas, nós apenas não estamos vendo isso. Então a primeira coisa que podemos fazer aqui é que podemos mudar o tipo de animação agora que ele está definido para desaparecer, desaparecer. Então, talvez vejamos como é quando nós, quando saímos deste modo de construção, vamos para o modo de navegação anônima. Então esta é a nossa, esta é a animação que temos, esta animação de desvanecimento. Deixe-me apenas fazer, torná-lo menor para que possamos ver bem aqui. E se formos a algo como, sei lá, vamos pirar. Eu vou salvar isso. E então eu vou atualizar a página. Você pode ver que temos outro óleo em diferentes animações. Claro, eu vou deixar isso com você. Poderíamos aumentar ou diminuir a duração desta animação. Então vamos ver como isso se parece, qual o efeito que ele faz. Você não podia vê-los que não, agora leva muito, muito mais tempo para animar esses elementos. Mas é claro, não queremos que a animação leve tanto tempo. Eu diria que algo entre 0,2 segundos e 0,4 deve ser suficiente. Queremos que tudo aconteça em inocentes perigosamente, não queremos que nossos usuários esperem que nossa magnitude carregue. Então, isto deve ficar bem. Então agora o que podemos fazer é adicionar uma sombra de caixa ao nosso, ao nosso menu. Então todo este menu teria uma sombra atrás dele. Então eu vou seguir em frente e escolher uma cor, uma cor de sombra. E geralmente diz que devemos algo escuro, mas também, eu vou diminuir a transparência sempre tão ligeiramente. Talvez fazer algo assim. E agora nós poderíamos fazer talvez jogar com os valores de deslocamento horizontal, deslocamento vertical apenas para mover nossa, nossa sombra caixa. E poderíamos trocar, aumentar e o borrão e, e aumentar ou diminuir a propagação. Claro, todas essas opções são para você brincar. E eles basicamente funcionam da mesma forma que eles trabalham em qualquer projeto e que parte do software de design. Então vamos realmente ver o efeito que ele fez. Então lá vamos nós, temos a nossa sombra adicionada. Claro, parece horrível, mas na verdade você pode ver que é simplesmente funciona. E cabe apenas à sua imaginação, ao seu aplicativo, ao seu design para torná-lo esteticamente agradável. E para você e, claro, para seu cliente, se você realmente quer fazer isso, que a caixa de sombra agora parece bem um pouco diferente. Agora, eu realmente não preciso desta caixa de sombras Amoco em apenas deletado. Mas, claro, eu queria mostrar a vocês como essa opção se parece, porque é claro que queremos aprender a usar oxigênio para construir nossos sites. Então agora podemos ir para o ícone suspenso. E é claro que podemos mostrar o ícone suspenso ou não precisamos mostrar isso. Então isso só saberia que isso vai deixar do usuário pensando se existem alguns sub menus que queremos mostrar, nós não informar o usuário que realmente há algo escondido dentro deste link. Mas talvez este ícone não seja o que você gostaria. Eu sei, eu realmente não gosto disso. Então talvez pudéssemos encontrar outra coisa. Como padrão, podemos escolher fontes e fonte impressionante ou ícones lineares. Lá vai você. Talvez encontremos algo aqui. Se você os conhece. Se você souber o, você sabe, o nome do ícone, você pode apenas digitá-lo. Deixe-me ver como esse cara vai se parecer. Eu acho que parece melhor que esse ícone, mas talvez eu só vou mudar o tamanho, algo como oito pixels e talvez aumentar a margem, talvez não para dez, mas para cinco, isso deve ser bom. E se você quiser, você também pode girar o ícone. Talvez dois, algo assim. Vejamos, 120 ou 90. Sabe, sempre que alguém paira sobre este ícone, eles viam o nosso sub-menu. Então, há um monte de, muitas opções para você escolher aqui mesmo. E eu acho que essas explicações são bem claras. Você pode alterar a rotação aberta, você pode alterar até mesmo a transição disso, dessa rotação. Mas novamente, eu vou deixar isso com você, até seu gosto de design, um aplicativo para sua experimentação, porque esta é realmente a única maneira de você ficar bom nisso. Então, depois do menu suspenso Ico, temos cores suspensas. Então, se mudarmos a cor de fundo para talvez algo assim. Se passarmos o mouse sobre, você pode ver que nosso plano de fundo está, está mudando. E se mudarmos essa cor de fundo pairada para algo como este vermelho escuro, quando passarmos o mouse, talvez deixe-me salvar que seria mais fácil ver as mudanças aqui. Quando passamos o mouse sobre, você pode ver que está realmente, está realmente mudando. O nosso passado está a mudar. Então deixe-me me livrar desses caras. Claro, poderíamos mudar a cor do link, a cor do texto do mouse, mas vamos, eu vou deixar isso com você se você quiser mudar isso. E nós também poderíamos mudar os links infantis ou se tivéssemos como um sub-menu. Dentro de um submenu, gostaríamos de mudar todos esses caras aqui. Ok, então eu acho que nós temos nosso menu de área de trabalho ordenado. E agora eu acho que agora podemos passar para realmente tornar o nosso menu responsivo. Então vamos começar a fazer isso. No próximo vídeo. 16. Menu responsivo: Como já sabemos, uma vez que começamos a ir, diga sorte, como menos de 768, nosso menu parece horrível. Está quebrando nosso site. Então aqui, quando vamos para o nosso menu principal pro, elementos de menu pro, você pode ver esta opção aqui que diz Menu móvel alternado abaixo com girando aberto, você pode ver que nós podemos, que nós temos nossos pontos de quebra O mesmo que aqui. E também sempre e nunca. Todas essas opções controlam quando seu menu vai aparecer como um, como um menu responsivo. Então, se fizermos sempre, nosso menu sempre vai olhar como é um menu responsivo. Se o fizermos, nunca, o nosso menu nunca vai parecer um menu responsivo. Mas se escolhermos, digamos menos de 992. Se começarmos a visualizar nosso, nosso lado agora, quando ele estiver definido para 11120 pixels e abaixo, ele ainda ficará bem. Mas quando vamos para menos de 992, você pode ver que nosso menu está se transformando em um, em um menu móvel, no menu do smartphone. Eu vou salvar meu site porque eu acho que eu vou deixá-lo como menos de 992. Parece que está tudo bem. Então, o que podemos fazer quanto ao nosso menu? Primeiro de tudo, quando clicamos nele, você pode ver como nosso menu vai parecer quando, quando abrirmos. Então, quando você vai para a opção de menu móvel aqui, e você pode ver que temos toneladas e toneladas de opções para controlar nosso manual móvel, móvel. Então, primeiro de tudo, podemos verificar, podemos ver qual bem, o que eu posso, poderíamos usar como nosso menu. Então, normalmente usaríamos algo como um simples bar de três. Então vamos ver se conseguimos encontrá-lo. Talvez não desse jeito. Vamos ver linhas. Enquanto tudo bem, talvez eu acho que poderíamos usar este aqui. Mas eu sei que há um diferente, deixe-me apenas começar a digitar menu que talvez, que talvez, que talvez seja melhor. Então eu vou escolher e essas barras aqui, e você pode ver que estamos mudando nosso, nosso menu, ícone de menu será basicamente instantaneamente. E aqui embaixo, você pode escolher deixar isso como alavanca manual, este texto como menu. Poderíamos digitar outra coisa como abrir, talvez, ou como eu. Se você quisesse, seria apenas o texto do nosso menu, mas normalmente eu deixo em branco. Então nós temos apenas o menu simples olhando comprimento é, é claro, se clicarmos nele, você pode ver que temos nosso menu bem aqui. Poderíamos, naturalmente, mudar seu tamanho, torná-lo maior, torná-lo menor. Eu vou viver. Não será como 42. Por que não? Podemos mudar a margem, podemos mudar a cor. Então talvez eu lhe dê a minha cor padrão. Eu sei que não há muita mudança, mas eu estou mantendo e as cores consistentes. Poderíamos mudar a cor do cursor do ícone se quiséssemos. Então, sempre que alguém iria, bem basicamente tocar nele, então essa cor mudaria. Poderíamos mudar o estofamento. Por isso, se quisesses ter, talvez, digamos, deixa-me tornar este gajo preto e depois posso colorir. Vamos fazer isso, vamos torná-lo de cor branca ou esbranquiçada. Você pode ver como podemos mudar a aparência do nosso botão. Botão completamente. Isso só vai ser, bem, pode ser a sua escolha de design se você quiser fazer isso assim, e você pode talvez apenas torná-los que Penn é menor. Então é isso que ela poderia fazer se você quisesse. Só vou me livrar desses caras e voltar para o nosso original. E não preciso da cor do estofamento. E eu acho, você sabe, todos esses valores são bastante auto-explicativos, mas você só precisa clicar, verificar e deslizar. E são apenas todas essas opções apenas para que você possa ver o efeito que eles têm no seu ícone de menu. Então este é o ícone do menu, mas é claro que é apenas o layout do ícone Abrir. Se você queria mudar, se você queria ter algum texto aqui como o texto do menu, você pode mudar, você pode controlar esse texto a partir desta topografia de ícone Abrir. Agora, se formos para fechar, eu posso fazer o layout. Isso vai ser a ONU, aquele menu aqui. Isto, quero dizer, este ícone bem aqui. Se você quiser fazer com que pareça diferente, vamos tentar encontrar alguma coisa que corresponda ao nosso ícone Open, como um machado ou algo assim, que corresponda ao nosso ícone como bebê, este ato que pareceria um pouco melhor . E novamente, você pode optar por deixar que o, este ícone texto tão perto. Se você quisesse fazer isso. Talvez pudéssemos mudar a posição do nosso ícone. Talvez movê-lo do lado esquerdo todo o caminho para a direita. E, na verdade, eu acho que isso é algo que a equipe de oxigênio talvez possa mudar. Eu não sei por que eles, este ícone é sempre definido por padrão para a esquerda quando geralmente as pessoas são destros. E eu acho que é apenas uma melhor usabilidade de UX quando este ícone de fechamento está mais perto do lado direito e nós não, nós não teríamos que mudar. E todos esses elementos, todos esses valores apenas para mover o ícone para a direita. E é claro que temos aqui as mesmas opções que tínhamos com o nosso layout de ícone aberto. Ok, então talvez não, talvez vamos aumentar este ícone para 42. Eu acho que o layout Eigen aberto foi definido para abrir eigenstates foi definido como totalmente para, eu acredito, eu acho que nós sempre poderíamos verificá-lo como 42, então nós estamos mantendo as coisas consistentes. Vamos para os nossos estilos de menu. E acho que a coisa mais importante aqui seria mudar o texto do item alinhado ao centro. Claro, se você quisesse alinhá-lo à esquerda ou à direita, você poderia fazer isso. Mas normalmente, quando tenho muitos assim, normalmente mantenho-o centrado. Por isso vou guardar isto. E se formos agora para o nosso projeto, você pode ver isso e B, deixe-me fazer isso maior. Se agora o tornarmos mais pequeno. Lá vamos nós. Se começarmos a fazer o nosso viewport menores e atinge o ponto de ruptura 992 vai mudar para um simples Líbano, que simples, mas definitivamente um Menu Móvel. 17. Menu de tela .111: Outra coisa interessante sobre o menu móvel Aqui está aqui e oxigênio é o fato de que você pode fazê-lo fora da tela. Se você apenas clicar nesta opção aqui, você vai ser capaz de tipo como animar a cam na tela no menu. Parece que está vindo de fora do visor. Então deixe-me mostrar o que quero dizer. Então, se removermos esse cara, então temos todas as opções padrão aqui. Eu vou salvá-lo. E então vamos ao nosso menu. Vou atualizar a página. Você pode ver que é como se desvanecesse do lado direito. Agora mesmo. O que poderíamos fazer é talvez aumentar o tamanho da nossa tela. Poderíamos até fazer isso, vamos por enquanto, torná-lo menor. Vamos fazer com que 66% só para vermos o que está acontecendo. E eu vou salvá-lo e eu vou mudar a cor de fundo só para que você possa ver este menu um pouco melhor. E então, se agora atualizarmos a página, novamente, você pode ver que este é o nosso, este é o nosso manual que é como falhar pela direita. É claro que podemos mudar algumas coisas sobre isso. Vamos ver se alinhamos à esquerda. E vamos ver como isso vai parecer. E você pode ver que agora está sendo alinhado à esquerda. Mas acho que da direita seria melhor. E nós poderíamos, claro, mudar a animação fora do Canvas. E há muitas opções para escolher. Vamos ver, diminua o zoom e vamos ver o que ele vai fazer. Vou atualizar a página. E vai parecer algo assim. É bem pesado. Mas eu acho que talvez, você sabe, talvez isso seja algo que você gostaria de fazer. Eu talvez diminuiria a duração para torná-lo mais rápido. Então vamos ver o que ele faz agora. Então você pode ver, eu acho que não é a menor das animações, mas para anotar algo para algo que você poderia fazer. Então eu vou talvez fazer algo simples como deslizar, deslizar para a esquerda. Por que não? Vamos ver, deslize para a esquerda. E assim. E parece muito, muito melhor, muito, muito mais suave. Então, é claro, quando diminuímos o tamanho da nossa janela de exibição, já que essa largura é definida para ferver, ajustada para porcentagens, você sabe, ele sempre vai ocupar a, uma quantidade específica de espaço aqui, mostrada em percentagens. Se o definíssemos para apenas pixels. Lá vamos nós. E vamos atualizar a página. Agora vai sempre assumir esse valor. Mas em pixels que não parece, não parece muito bom. Se, no entanto, quiséssemos talvez como cobrir toda esta página, poderíamos usar o valor da largura da janela de exibição. E se o definirmos para 100, isso significa que toda a vista, toda a viewport será oculta. Então, se você apenas salvar esse cara e depois atualizar a página e nós vamos aumentá-la. E você pode ver que agora, nossos menus cobrindo todo o nosso ponto de vista da esquerda para a direita porque isso é o que esta unidade VW largura viewport não faz. Então eu vou deixá-lo como aquele slide esquerdo 2,2 segundos. Isso parece, isso parece bem. Então, agora que chegamos ao nosso menu fora do Canvas classificado, ainda podemos brincar com suspensões móveis. Então vamos abrir nosso menu. E como você pode ver, temos nossos menus escondidos bem aqui, mas eles, eles não parecem muito bons. Poderíamos mudar a cor de fundo para o que realmente queremos. Poderíamos talvez mudar a largura da nossa borda para 1,1 pixels para que ela corresponda às bordas do menu da área de trabalho. E, claro, se você quisesse, mas brincar com a cor você faria o estilo. Mas eu acho que isso parece, que parece bem. Temos o nosso Mm-hm. Menu móvel. Menu. Praticamente, muito bem resolvido. Então, se salvarmos esse cara e atualizarmos essa página, e eu vou torná-la maior. Se começarmos a descer, desça , desça. Você recebe o nosso menu móvel. Se clicarmos nele, você recebe nossa animação e nós temos nossas suspensões. Então, tudo está funcionando, funcionando sem problemas, funcionando bem. Então, ao trabalhar com menus aqui dentro de oxigênio, se você não quiser brincar com todas essas opções, você pode usar uma de suas predefinições que vêm com o, com o programa. Então acho que poderíamos dar uma olhada brevemente nos próximos. 18. Predefinições 3.12Menu: Antes de começar a usar as predefinições de menu de D, eu vou salvar meu próprio menu como minha própria predefinição. Então vou chamá-lo de meu cardápio. Sei que não é criativo, mas vou guardá-lo como meu menu. E agora ele fica bem aqui na minha, na minha lista com outras predefinições de menu. Então vamos dizer que eu gostaria de usar o controle deslizante para escrever local. E como você pode ver, não só o efeito deslizante será aplicado, mas também todos os outros elementos. Então, por exemplo, o menu é definido como móvel e, como sempre, se clicarmos nele, você pode ver que ele foi movido para a esquerda e nós temos todos, todos esses elementos. E se formos para, digamos, desktop e celular, você pode ver isso novamente, o menu muda. Agora se parece com isso. E claro que poderíamos, vamos ver o mínimo como o meu minimalismo. Bem, isso não é muito para o mínimo de dias de divisão. Vamos ver o que parece. Quando nós, quando nós visualizamos bem aqui. Se clicarmos nele, isto é, este é o nosso, este é o nosso menu. Não parece tão ruim, mas é claro que ainda podemos mudar os links. Poderíamos mudar a fonte, todas essas coisas. Mas novamente, se você quiser usar um dos, um dos presets que vêm comigo, venha com oxigênio. Você poderia, definitivamente, fazer isso. Mas eu acho que eu vou ficar com o meu, com o meu menu e eu vou salvá-lo. E eu só acho que parece um pouco melhor. E este é um tipo de olhar que eu estou indo para este design porque estamos criando um design para nossos serviços como designers. Então eu acho que se nós apenas para manter isso simples, isso vai nos mostrar como designers quem, quem tem, quem tem gosto. Então vamos deixar assim. Mas é claro que ainda não terminamos. Nós nem terminamos com o nosso cabeçalho. No, nos vídeos subsequentes, vamos dar uma olhada nos cabeçalhos pegajosos e também adicionar cabeçalhos de sobreposição. Aqui dentro do designer, terminamos com o menu. Agora vamos terminar esse cabeçalho com o, com o cabeçalho pegajoso e o cabeçalho de sobreposição. 19. Conteúdo interior: Então agora vamos cuidar do cabeçalho pegajoso e também um cabeçalho de sobreposição. Mas para que esses efeitos sejam visíveis, precisamos ter mais conteúdo em nosso site. E, na verdade, é um passo muito importante aqui em oxigênio interno porque sem esse módulo de conteúdo interno, não seríamos capazes de adicionar nada ao nosso site uma vez que nossos templates estão lendo. Então o que eu vou fazer é ir em frente para os modelos de oxigênio e eu vou adicionar meu modelo principal com, com oxigênio. Ok, então eu estou dentro do meu modelo e eu vou ir em frente e clicar neste botão Adicionar. E eu vou começar a digitar o conteúdo. E uma vez que eu tenho este módulo de conteúdo interno bem aqui, eu vou apenas clicar nele. E como você pode ver, ele é adicionado à minha estrutura e não muito realmente acontece. Quero dizer, poderíamos estilizá-lo se você quisesse, mas esse não é realmente o objetivo deste módulo. Basicamente, este módulo vai nos permitir mostrar tudo em nosso site sem ele. Eu, eu acho que seria possível, mas nós estaremos apenas construindo nossos modelos. E agora, se você quisesse adicionar imagens ou texto aqui naquele dia seria uma parte do modelo. E eles seriam exibidos em, em cada página que um usuário veria. Então, toda vez que você só quer, você sabe, como terminar o design de seu, de seu modelo, seu modelo principal. Basta lembrar de ter o módulo de conteúdo interno pronto e esperando, para suas próximas etapas de design. Porque sem ele, eles seriam praticamente impossíveis. Então, uma vez feito, só temos que salvá-lo. Então eu vou voltar para o meu painel de administração. Porque agora, se queremos ver esse cabeçalho pegajoso e se queremos ver o, o, o efeito de cabeçalho de sobreposição, precisamos ter algum conteúdo em nosso site, em nossa página. Então eu vou para páginas e eu vou adicioná-lo com oxigênio. Vou editar a home page com oxigênio. Como você pode ver agora temos a este clique em Adicionar a, adicionar elementos a esta área. E este botão deve basicamente corresponder com este botão. Mas desde que me lembro disso, este texto é um pouco diferente deste texto. Eu sei que é apenas o posicionamento deste símbolo mais, mas anule sempre, você sabe, eu sempre vejo isso. Eu sempre noto isso. Mas de qualquer forma, uma vez que temos esse cara aqui, bem, nós recebemos essa mensagem. Sabemos que agora temos que adicionar alguns elementos ao nosso site. Então, se nós apenas ir para adicionar como, como de costume, eu vou apenas começar com uma seção. E esta seção vai estar hospedando nossa imagem de herói. E eu vou para o Avançado e, em seguida, fundo e inhere na imagem de fundo. Vou apenas adicionar esta imagem ao meu plano de fundo. E como você pode ver, ele foi adicionado a toda a minha seção e diz panorâmica em toda a página por padrão, mas isso não é o caso em termos de tamanho, bem, a altura de nossa seção. Por isso, se quiseres, posso voltar ao tamanho e ao espaçamento. Então, se você quiser, você pode definir a altura bem aqui. E, claro, se você definir como pixels, 500 pixels, você vai basicamente ver isso. E se fôssemos mudar o valor unitário de pixels para este tempo VH, que é a altura da viewport. Agora vamos dizer ao navegador para, você sabe, para espalhar nossa imagem de fundo em toda a altura do nosso, do nosso contêiner e independentemente do basicamente do contêiner. Então, se fôssemos configurá-lo para 100, este projeto vai, esta imagem vai levar, ocupar 100 unidades de altura da janela de exibição. Eu sei que ainda podemos ver assim, esta peça bem aqui no fundo. Mas isso é só porque nós temos este cabeçalho no topo e nós vamos, uma vez que inicializar a sobreposição tratada, nós vamos corrigir isso. Mas, por enquanto, vou deixar assim. E quando você vai para a nossa página principal, você pode ver que nós temos esta imagem, imagem bem aqui. Então talvez vamos adicionar um pouco mais de conteúdo. Eu estou pronto para ir e eu vou para o painel de estrutura e talvez eu só vou adicionar seção. E como você pode ver, ele é adicionado logo abaixo da nossa seção anterior. E eu também vou, eu vou adicionar um texto fictício que eu vou pedir emprestado do lado lorem ipsum. Eu só estou indo. Eu só vou copiá-lo. E então eu vou apenas colá-lo. E talvez me deixe duplicar esse texto. E eu acho que isso deve ficar bem. Este é quatro. Agora isso é suficiente, texto suficiente que temos apenas para aprender a usar o cabeçalho adesivo e o cabeçalho de sobreposição. Então vamos começar a fazer isso a seguir. 20. 3.14Sticky e sobreposição: Para adicionar um cabeçalho pegajoso e mudar nosso cabeçalho em um hetero de sobreposição, temos que fazê-lo a partir do, do nosso nível de modelo. Então, eu só vou ter certeza que eu tenho isso salvo. E nós vamos apenas clicar no meu cabeçalho e clicar em abrir e editar modelo. Sim, sim, abra de qualquer maneira. E agora podemos mudar nosso cabeçalho, como você pode ver nossa prévia em casas. Assim, podemos ver todos esses elementos que acabariam de definir para a nossa página inicial. E uma vez que o nosso construtor de cabeçalho está ativo, podemos ir para sticky e você pode clicar em Ativar cabeçalho adesivo. Então isso vai fazer é ele vai nos permitir criar um cabeçalho adesivo, que seria visível toda vez que um usuário rola em nosso site. Então, quando alguém rola para baixo, ainda podemos mostrar esse menu para o nosso, para nossos usuários. Então eu vou apenas deixar a distância de rolagem em um 2-300 porque quando os usuários rolam para baixo em 300 pixels, você pode ver que temos nosso menu e aparecendo, mas vamos corrigir esse layout em apenas um segundo. Então, vou deixar assim. Vou mudar o fundo pegajoso para esta cor. Então, agora, quando um usuário rola para baixo, rola para baixo, o usuário vai ver este, este manual assim. E eu vou escolher desvanecer, furar que vai apenas muito bem animado. Poderíamos aumentar esse desvanecimento de velocidade. Lá vamos nós. Isto pareceria, pareceria muito mais agradável. E eu vou salvar esse cara. No entanto, talvez pudéssemos mudar algumas coisas sobre o nosso menu que vai ser pegajoso. Quero dizer, eu não acho que eles gostariam que ficasse assim. Por exemplo, eu gostaria que este menu fosse menor. E talvez eu quisesse que fosse sempre responsivo. Então, para isso, eu vou apenas ir para a minha linha de cabeçalho e eu vou duplicá-lo. Então agora temos duas linhas de cabeçalho idênticas. Mas o que eu vou fazer é pegar minha imagem à esquerda e vou torná-la menor. Vou fazer uns 24, talvez até menos do que isso, uns 18. E eu vou fazer o mesmo com o título. Eu vou torná-lo menor, como pode ser 16. Isto deve ficar bem. E deixe-me apenas pegar a imagem pode ser e talvez diminuir essa margem sempre tão ligeiramente para algo como cinco pixels. E depois vou buscar o meu manual profissional. E eu vou dizer a ele para ficar bem, para ser móvel. Sempre assim. E talvez eu vá para o menu móvel e abrir o layout do ícone. E eu vou torná-lo menor, tipo 24. Talvez isto fique bem. Então agora temos dois menus. Talvez eu também mude esse estofamento para algo como 1010, ou talvez até menos do que isso, tipo 55, certo? Por isso vou guardar isto. E se agora voltarmos para o primário, agora podemos optar por exibir essa linha, essa linha de cabeçalho apenas como um cabeçalho adesivo. Então eu vou clicar apenas mostrar em pegajoso. E eu vou clicar nesta linha e eu vou dizer esconder em pegajoso. E agora, quando salvarmos esse cara, eu vou atualizar minha página. Se eu começar a rolar para baixo, você pode ver que esse cabeçalho só é mostrado quando o adesivo estiver oculto. E quando você descer, temos nosso cardápio bem aqui. Claro, teríamos que corrigir alguns problemas aqui, mas é claro que isso é, isso é facilmente corrigível. Podemos resolver isso facilmente. Mas o ponto principal aqui é que você pode mudar a maneira como este vara cabeçalho hétero se comporta. E uma vez que você rolar para baixo sua página, quando subimos, o cabeçalho mais antigo volta. E quando descermos, temos nosso novo cabeçalho pegajoso mostrado aqui. Então esse é o cabeçalho pegajoso. E o cabeçalho de sobreposição? Vou remover este cabeçote pegajoso. Eu não preciso dele. Deixe-me salvar isso e eu vou atualizar minha página. Então eu tenho meu, meu cabeçalho bem aqui. E o que eu vou fazer é ir para o construtor de cabeçalhos de estrutura. E eu vou seguir em frente e escolher Overlay. E eu vou dizer que eu sempre quero sobrepor o cabeçalho, que vai fazer minha, minha imagem subir e fazer meu, meu cabeçalho ir como sobre nossas seções principais. Então, se eu salvá-lo e se eu atualizar a página, você pode agora ver que o nosso, que o nosso cabeçalho está tudo sobreposto sobre este, sobre esta seção. E esta imagem é realmente agora porque nós a definimos para 100 vh, como você pode se lembrar, ela agora, ocupou todo, todo esse espaço. Mas é claro que alguns, bem, isso, bem, nós poderíamos talvez brincar com todas essas cores que talvez não queiramos fazer isso parecer assim. Então o que eu faria é que nós temos novamente, ir para a linha de cabeçalho e nós poderíamos duplicá-lo, duplicar esta linha de cabeçalho. E não, eu não quero torná-lo mais alto e pegajoso. Não é isso que queremos. O que queremos é, por exemplo, queremos esconder esse cara quando estiver sobreposto. Então este cabeçalho superior, então eu diria Haydn sobreposição. Mas esse cara de baixo, talvez pudéssemos mudar algumas cores. Então vamos para, deixe-me pegar minha direção. E eu mudaria a cor do texto. Claro que teríamos que mudar essa cor enquanto esta imagem também. Mas se você não quiser mudá-lo, se você não quiser apenas fazer upload de uma versão branca deste logotipo, talvez possamos fazer um pequeno truque rápido. Vamos para o efeito avançado do que. Em seguida, você pode ir para Filtro. E a partir daqui podemos mudar, escolher, inverter, e depois ir 100%. E nós simplesmente inverteríamos a cor do nosso, do nosso local. Agora funciona neste caso, bem porque estamos invertendo preto. Então, do preto, vamos para o branco. E se fosse lido, acho que bom poderia inverter para verde ou azul. Eu realmente não tenho certeza, mas neste caso, este efeito funciona em, geralmente nós seria melhor se nós apenas mudássemos esta imagem para uma versão mais leve adequada do nosso, do nosso logotipo. Mas de qualquer forma, podemos fazer assim por enquanto. Também podemos ir ao nosso menu profissional. E talvez pudéssemos mudar, mudar a cor do nosso menu. Para que pudéssemos mudar a cor aqui. Podemos pegar a cor do controle deslizante. E eu vou deixar como está por agora. Só para mostrar o que esse cabeçalho de sobreposição realmente faz no nosso caso. E como você pode ver, parece muito bom. Basicamente, temos um contraste adequado entre o nosso fundo e o nosso cabeçalho. Então eu acho que nós poderíamos, nós poderíamos deixar assim. Claro que nós, eu acho que nós teríamos que trabalhar no nosso logotipo, no nosso menu bem aqui, porque agora ele não parece tão bom. E quer saber, acho que vou usar esse tipo de design. Eu vou com este tipo de sobreposição de um cabeçalho. Então acho que poderíamos consertar esse cardápio para parecer apropriado. Então talvez pudéssemos brincar com o fundo. Poderíamos brincar com os links, o ícone, sólido, começar a fazer isso a seguir. 21. 3.15Tificar o menu: Então vamos consertar nosso cardápio. Vamos fazer com que pareça agradável. Então eu vou para o meu menos de 992. E eu vou mudar este ícone aqui mesmo. Então eu vou para o meu menu móvel. Estou aberto, posso fazer o layout. E eu vou mudar a cor para a minha cor mais clara assim. E se clicarmos nele, deixe-me ver como é. Temos o pano de fundo que teríamos de mudar e as ligações que teremos de mudar. Mas talvez comecemos com a parte de trás. Então eu vou para estilos de menu, e eu vou para a cor de fundo. E vamos removê-lo. E quer saber, talvez vamos tentar algo diferente. Eu estou indo para ir com esta cor marrom mais escura, mas vai diminuir essa transparência para alguma mentira do Salmo dez. Então isso deve parecer bom. E agora não temos que brincar com os nossos, com os nossos links porque temos contraste suficiente. Mas temos que ir para o nosso ícone de menu fechar, então fechar o layout do ícone. E deixe-me encontrar a cor para isso. Então eu vou apenas clicar nesta opção e mudar isso para branco. E talvez eu tente movê-lo para o lado. Então ele meio que cobre esta e esta opção aqui, esta parte bem aqui. Então eu estou indo para ir em frente e eu posso posicionar para a esquerda e eu vou para ir com as percentagens. E vejamos 75, vejamos 85. Vamos ver 19. Talvez 90 seja bom. Vamos salvar isso. E vamos ver como vai realmente parecer. Uma vez que esteja feito. Acho que parece bem. Acho que podemos deixar assim. Ou o nosso bem, quase todos os nossos menus estão funcionando bem. Ainda precisamos cuidar dos dropdowns móveis. Então, vamos para as nossas drogações móveis. E eu vou remover essa cor suspensa. Então vamos ver como é agora. Parece muito melhor. Vamos salvar esse cara, atualizar. E mais uma vez, e este é o nosso menu. Olhando, parecendo bem, acho que está tudo bem. Então nós temos o nosso, nós temos o nosso Menu de Cabeçalho concluído. Nós também temos nossa imagem principal para o nosso herói concluída também. No entanto, vamos brincar com nosso herói silencioso extensivamente nos próximos vídeos. E não se esqueça que ainda tínhamos nossa cabeça pegajosa bem aqui. Então você pode ver alguém falha. Claro, se você quiser manter o cabeçalho pegajoso, você pode fazer isso. Você já sabe como fazer isso. E eu definitivamente, definitivamente encorajo você a brincar com todas essas opções, mas eu vou talvez me livrar disso. Eu só vou para as opções pegajosas. E eu vou desativar o cabeçalho pegajoso. E vamos ver se funcionou. Então eu só vou atualizar a página e como você pode ver, o cabeçalho adesivo se foi. Então, como eu disse, agora, podemos deixar nossa seção de heróis aqui um pouco mais interessante. Podemos adicionar algum título, alguns textos, talvez alguns botões, e talvez algum controle deslizante, mas veremos isso nos próximos vídeos. 22. 4.1Centernização em uma seção: Ok, então vamos passar para a nossa página inicial. Então eu vou para páginas, todas páginas, e eu vou escolher homepage e eu vou editar com oxigênio. Então este é o nosso layout. Então temos o nosso próprio, temos o nosso cabeçalho de sobreposição. Temos nossa seção dois, que adicionamos uma imagem de fundo, esta aqui. Mas também como você deve se lembrar, nós também definimos para 100 vh. Então esta imagem se estende por toda a altura da nossa seção de heróis. E é claro que temos algum conteúdo fictício aqui que eu acho que nós poderíamos realmente removê-lo, mas vamos mantê-lo por enquanto. Então o próximo passo aqui seria tornar a nossa imagem de herói um pouco mais interessante. Agora só temos uma imagem. E nós basicamente, bem, nós não estamos comunicando muitas coisas para nossos, para nossos usuários. Então o que, o que eu gostaria de fazer aqui é que eu gostaria de adicionar talvez como um título, eu gostaria de adicionar algum texto. A pode ser uma chamada à ação em um formulário, na forma de um botão. Mas antes de fazermos tudo isso, e há algumas coisas que precisamos ter em mente. Se fôssemos agora apenas adicionar, digamos que o título. E então gostaríamos de adicionar algum texto. Lá vamos nós. E então gostaríamos de adicionar um botão. Lá vamos nós. Você pode ver que todas essas coisas estão sendo adicionadas no canto superior esquerdo. Claro, há um pouco de um preenchimento aqui porque a seção por padrão está definida para ter tamanho e espaçamento é definido para ter 75 pixels de preenchimento superior e inferior e 20 pixels de preenchimento esquerdo e direito. Portanto, há algumas coisas que eu gostaria de fazer para este texto apareça no ponto central, não apenas horizontalmente, mas também verticalmente. Mas eu também gostaria de mudar um pouco essa imagem. E eu quero dizer, eu gosto de ter certeza que esta imagem no fundo, que também está centrada. E agora parece que está centrado, como se estivesse tudo bem. Mas quando começarmos a tornar todo este design responsivo, vocês verão que vamos perder a nossa composição, por assim dizer. Então vamos devagar, passo a passo. Então, primeiro vamos dar uma olhada em como fazer todo esse conteúdo, como centralizar esse conteúdo em relação à nossa seção. E você pode estar pensando que nós temos que talvez pegar o título ou o imposto ou o fundo. E, em seguida, talvez como no Photoshop e Illustrator ou qualquer outro programa, basta acertar alguma opção de alinhamento bem aqui na parte superior. Mas na construção de sites, eu sou, seria especialmente aqui em oxigênio. Seria uma idéia melhor dizer à seção, esta seção aqui como renderizar todo o conteúdo. E isso está realmente sendo colocado em nossa seção e em nosso, em nossa seção de heróis e heróis. Então, pode ser, a propósito, vamos apenas clicar sobre estes, neste menu, nestas setas. E vamos mudar o nome da nossa secção. Vamos chamá-lo. Agora vamos chamar de seção de heróis. Lá vamos nós. Vou salvar meu projeto. Então o que eu quero fazer é ter certeza de que este título, que este texto, e que este botão está definido exatamente no ponto central vertical e horizontalmente. Então quando eu, quando eu tiver minha seção de heróis selecionada aqui, eu vou passar para essas opções de alinhamento de itens horizontais. E eu vou clicar no centro. Como você pode ver, todos os meus elementos estão agora sendo centrados horizontalmente, mas eles não estão centrados verticalmente. Quero que todos esses caras estejam exatamente no meio da nossa seção. Então, para fazer isso, eu vou para a guia Avançado e eu vou para Layout. By the way, todos esses elementos permanecem olhar. Bem, parece que parece coisas bem assustadoras aqui. Mas deixe-me dizer que basicamente o que estamos fazendo aqui é estamos dizendo ao oxigênio para escrever algumas regras CSS para nós. E CSS, claro, significa folhas de estilo em cascata. Basicamente, esses estilos são responsáveis por fazer nossos títulos pareçam do jeito que devem parecer. Eles são responsáveis pelo alinhamento. Todas essas coisas. Quero dizer, nós não temos que escrever nenhum código. Podemos apenas dizer ao oxigênio para escrever esse código, é claro, no backend para nós simplesmente clicando em certas, certas opções. Então, como você pode ver, nós temos nosso centro de itens alinhados. Foi basicamente o que fizemos. Deixe-me ir às primárias. Isso é basicamente o que fizemos aqui. E agora o que queremos fazer, novamente, layout é colocar todos esses elementos no centro. Então, para fazer isso, tudo o que temos a fazer é clicar nesta opção justificar o centro de conteúdo. E basicamente terminamos. Nós colocamos nosso conteúdo exatamente no meio. E se agora salvarmos esse cara e começarmos a dar uma olhada. E vamos dar uma olhada em nossas opções responsivas. Você pode ver que todos, o tempo todo, todos esses elementos sempre ficarão exatamente no meio. É claro que, como podem ver neste momento, este imposto está a ser aplicado. Ele foi alinhado ao centro e gostaríamos que ele fosse alinhado enquanto estiver alinhado à esquerda. Mas queríamos estar alinhados com o centro e, claro , vamos cuidar disso em apenas um segundo. Mas também você pode ver que nossa imagem de fundo, é como se tivesse sido cortada. Como se não vissem esse ponto focal exatamente no centro. E isso é algo que precisamos cuidar também. Mas vamos começar a fazer isso no próximo vídeo por enquanto, eu só quero que você entenda que se você quiser ter certeza de que você está alinhando todo o conteúdo exatamente no ponto central. Tudo o que você precisa fazer é ir para a guia Avançado e, em seguida, colocar para fora e você tem todas as opções de alinhamento prontas e esperando por você aqui. Então agora vamos avançar para alinhá-los ou centralizar nossa imagem também. 23. 4.2Centernização da imagem de fundo: Se começarmos a visualizar nosso design f, como se fosse renderizado em alguns dispositivos menores. Você poderá ver que nossa imagem de fundo é xm. É como ser cortado. Não somos capazes de ver o nosso ponto focal, neste caso, o nosso ponto central. Bem, estamos instantaneamente no centro. Se formos para menos de 480, você pode ver que, bem, este tipo de parece meio estranho e você pensa que este laptop foi cortado lado e nós basicamente não temos certeza do que estamos olhando. Então, para evitar que esta situação aconteça, há uma pequena solução rápida, um pequeno truque rápido que permitirá que você mantenha seu ponto focal exatamente onde você quer que ele esteja em termos de visualização de suas imagens de fundo. Agora, no nosso caso, queremos o ponto focal que exatamente no meio. Então o que podemos fazer é ir para quando nossa seção é selecionada. Você pode ir para o fundo. E aqui em baixo você verá essas opções esquerda e superior. Então esses caras permitem que você mova sua imagem de fundo em relação ao ponto esquerdo e ao ponto superior. Agora, se dissermos, não sei, fazer algo como 50%. Agora, neste ponto, não está acontecendo muita coisa porque estamos visualizando a área de trabalho grande. Mas se começarmos a descer, você pode ver que na verdade agora nossa imagem está se movendo. Se você pode se lembrar, quando estávamos, quando isso foi definido como 0, esta era a nossa imagem de fundo. E agora nós mudamos para decidir. E se você quiser mantê-lo assim, bem, claro que você poderia, mas isso não seria uma boa técnica de produção igual a uma boa prática de produção. O que é melhor fazer é manter seus valores esquerdo e superior sempre para 50% e para a esquerda e 50% para o topo, porque isso sempre vai garantir que seu ponto focal está exatamente no meio. Claro, se você quiser, gostaria de colocar o seu ponto focal como no canto superior direito, você pode brincar com essas opções também. Mas se agora começarmos a olhar para nosso design em dispositivos menores, você pode ver que nosso ponto poco, um ponto focal chamado B1, está sempre, sempre no meio. Então esta é apenas uma técnica de produção agradável para você, para você usar sempre que quiser brincar com a capacidade de resposta de suas imagens de fundo e com centralizar seu ponto focal e focal. 24. 4.3Ajustando o conteúdo de heróis: Então, uma vez que tenhamos o plano de fundo ordenado, bem, como em 99%, vamos fazer um pouco finos assim que tivermos nosso conteúdo bem aqui ordenado. Então, é claro, o que eu quero fazer é mudar a cor do meu título. Então eu vou pegar esse cara e escolher essa cor clara. E eu vou fazer o mesmo por esse cara. E eu vou deixar o botão como está por agora. O que eu quero fazer é talvez adicionar um pouco mais de texto aqui. Então vamos para Lorem, ipsum. Isso vai para algum Lorem. Vamos pegar um texto do Lorem Ipsum. Isso deveria ser, acho que podemos pegar só isso. E eu vou clicar duas vezes aqui e pressionar o controle V para colar esse cara aqui. Quando damos uma olhada nisso, bem, nós temos, bem, nós temos alguns problemas na verdade, não apenas um problema. Então, primeiro de tudo , nosso texto foi, bem , é muito, muito grande , muito largo. Além disso, talvez pudéssemos brincar com o espaçamento entre todos esses elementos, como entre os títulos no texto e na parte inferior. Mas também nós, eu não acho que temos contraste suficiente entre o nosso texto e o nosso fundo. Então, talvez vamos resolver essa última questão agora. Então eu ainda estou aqui na minha seção. Eu tenho minha seção selecionada. Vou para o Avançado e depois para o fundo. E aqui embaixo temos essa opção que diz cor de sobreposição da imagem. Se escolhermos nossa cor, digamos que vou pegar esse cara aqui. Você pode ver que agora estamos sobrepondo uma cor sobre nossa imagem de fundo. E, claro, isso não é inteiramente o que queremos. Deixe-me pegar a cor de novo. O que eu quero fazer é que eu quero diminuir a transparência sempre tão ligeiramente para o verão aqui apenas para adicionar alguns contrastes entre o cabeçalho myText e, claro, a extremidade inferior, esse fundo. Então eu vou deixá-lo como um Então isso é um problema resolvido. Agora, a outra questão é que se começarmos a tornar em nosso texto, bem, nossa janela de exibição menor, você pode ver que nosso sistema fiscal bem está se espalhando por quase toda a página e toda. E isso não é exatamente o que quereríamos. Então, vou voltar aos meus dispositivos antigos. Eu vou, eu vou voltar para esta, bem, esta vista bem aqui. E o que eu gostaria de fazer é que eu gostaria de fazer todos esses caras menores. Eu gostaria de, sabe, talvez pudéssemos pegar essa mensagem e ir para o Avançado. E então para o tamanho e espaçamento e talvez brincar com a largura. Digamos que você digitaria 50 pixels ou 50% e tornaria esse cara menor. E poderíamos fazer o mesmo para o contêiner de nossa direção. Mas vamos, vamos. Um pouco diferente, e vamos realmente aprender mais uma, eu acho, técnica muito importante aqui dentro do oxigênio. Vamos colocar todos esses elementos em um recipiente específico. E esse contêiner será nosso div. Então, uma div basicamente é apenas um tipo como um recipiente genérico que permite que você coloque outros pedaços de conteúdo dentro dele. E bem, você sabe, ele não tem nenhum tipo de atributos específicos para ele, mas permite que você controle o layout e o tamanho de muito, muito facilmente. E é um, é um muito poderoso, um pedaço poderoso de, bem, um CSS ou HTML na verdade aqui dentro do oxigênio. Então, a maneira como poderíamos fazer isso é simplesmente ir em frente para o nosso rumo. E novamente, use este pequeno menu aqui e apenas escolha envoltório com DIV. O que ele vai fazer é colocar essa parte específica do conteúdo, neste caso o título. E vai colocá-lo dentro desta div. E o que eu quero fazer é mover esses caras também para o nosso contêiner. Como você pode ver, bem, algumas coisas mudaram, mas ainda assim o imposto não está funcionando corretamente. Então, agora, quando tivermos nossa div, poderíamos ir para o centro de alinhamento de itens horizontais, colocar o conteúdo no centro. Mas eu acho que nós também devemos ir para o nosso texto do que para topografia avançada e alinhar o texto para o centro também. Então, agora, quando vamos para o nosso contêiner de página, você pode ver que todos esses elementos estão bem alinhados ao centro e você pode ir para menos de 992. A mesma situação acontece. Agora, neste ponto de ruptura, você pode ver que nosso título começa a parecer, bem, não é o melhor que poderíamos talvez mudar algumas coisas sobre ele, mas eu acho que nós poderíamos talvez mudar o tamanho dele, a altura da linha, mas também o alinhamento. Então, como você pode ver um quando você, quando você verificar sua capacidade de resposta ao longo do caminho, se você não esperar até que todo o seu design é, está terminado, se você apenas ajustar a capacidade de resposta como você ir, isso vai apenas para você economizar um Muito tempo, confie em mim nessa. Então eu vou para todos os dispositivos. Mais uma vez, pegue este cabeçalho, vá para topografia avançada e alinhe-o ao centro. Então, agora, se formos para menos de 992 ou 68, você pode ver que nosso rumo está sendo bem alinhado. Então o que eu também vou fazer é talvez aumentar o tamanho da fonte. Vamos ver 48. Isto deve ficar bem. E talvez vamos digitar algo aqui. Digamos, bem-vindos ao “Wow, Design”. O lugar do seu próximo projeto. Ponha assim. Eu vou deixar esse manequim, manequim texto como está bem aqui. E agora, quando começamos a mudar nossa capacidade de resposta, você pode ver que nós temos uma, bem, a altura da linha aqui é, eu acho que é um pouco grande demais. Então eu vou pegar o título de novo. E a partir da topografia da guia Avançado, vamos fazer o check-in e a altura da linha como um ou pode ser 1.1. E eu vou para o contêiner de página 1120. Eu acho que isso deve parecer bem. Acho que está tudo bem. Mas no início, como você se lembra, colocamos todos esses caras em uma div específica e meio que esquecemos disso. Mas isso é só porque começamos a brincar com esses elementos. Eu não agitei e esqueci isso. Então, como esta, toda essa div, situação pode nos ajudar quando olhamos para outros pontos de quebra menores e menores, você pode ver que esta div é Não para minha base bate um pouco também, é um pouco largo demais se formos para nossos dispositivos antigos. E então, quando a div é selecionada, quando vamos para isso, vamos para a nossa guia primária. E nós temos isso com opção bem aqui. Vou mudar as unidades de pixels. Talvez vamos para as porcentagens. E vamos digitar como 75%. Você pode ver que todos os, todos os nossos pedaços de conteúdo ou ser e ao contrário re-ajustado para caber dentro desta div. Então nós não temos que apenas agarrar o cabeçalho e, em seguida, tags e, em seguida, Barton para , para torná-los menores ou maiores, nós podemos apenas manipular o olhar de nossa div, apenas este pedaço de conteúdo para torná-lo, torná-lo menor, menor, ou maior. E, ao mesmo tempo, todos esses pedaços de conteúdo estão ficando menores ou maiores. Mas quando vamos para como contêiner página 1120, Eu acho que ainda parece. Tudo bem. Mas por que você não vai para menos de 992? Acho que talvez pudéssemos mudar um pouco a largura. Então, em vez de, eu acho que era 75, vamos fazer como 80% ou talvez até 90, 90% por cento deve parecer melhor. E então vamos para menos de 768. Ainda é 90%. E para 80, 90% deve estar bem. Então, quando nós apenas salvar esse cara, e eu vou para o meu modo de navegação anônima novamente é eu vou apenas pressionar o controle C, controle Shift mais P no Firefox, controle mais Shift mais n no Chrome. E eu vou apenas digitar esse endereço. E quando começarmos, aumente esse cara. Então o que eu vou ficar menor, menor, menor, menor. Você pode ver como este imposto está sendo bem reajustado para nossos pontos de quebra até nós percorrermos todo o caminho até aqui. Agora, é claro, se você quiser mudar o tamanho de seus títulos dependendo de seus pontos de pausa, mas eu vou deixar isso com você. Você já sabe como pode se ajustar a isso. Então, há mais alguns problemas que temos com esses pedaços de conteúdo. E essa é a vontade, o preenchimento ou a margem entre todos os nossos elementos. E, claro, precisamos cuidar do nosso traseiro. Então vamos começar a fazer isso a seguir. 25. 4.4Adicione a margem ao conteúdo: Então agora que temos nosso centro de div, temos nosso centro de contadores, seria uma boa idéia adicionar algum espaçamento entre todos esses elementos. Então o que eu vou fazer é pegar esse texto e eu vou para o tamanho avançado e espaçamento. E nós poderíamos apenas adicionar alguma margem e alguma margem superior e alguma margem inferior. Mas também podemos pegar nossa borda superior do texto e adicionar um pouco de espaçamento aqui embaixo. E como podem ver, temos esses valores. Will dentro, vamos colocar aqui. E vamos talvez fazer isso igual a 20 pixels, 20 pixels. Mas é claro que não podemos esquecer de verificar como ele vai ficar em nossos contêineres de páginas menores. Então este vai ser o nosso 1120. E vejamos, 768. Acho que ainda parece bom, mas talvez vamos fazer 480. Eu acho que talvez nós poderíamos adicionar um pouco mais de preenchimento aqui para o nosso botão para que seja facilmente l, será facilmente acessível nos dispositivos mais pequenos. Então, em apenas alguns cliques aqui dentro do oxigênio, você pode realmente, realmente controlar a capacidade de resposta do seu, do seu, do seu design. Então é assim que parece quando é diferente do maior desktop. Mas quando começamos a descer, você pode ver que nosso botão vai se mover todo o caminho para baixo, aqui em baixo. E há também outra maneira de controlar o layout do conteúdo dentro, dentro de um div. E isso funcionaria bem em seus projetos. Então acho que vale a pena olhar. Então, por enquanto, eu só vou pegar esse texto e eu vou me livrar dos valores de Margem. E eu vou me livrar dessa margem de 50 pixels aqui embaixo. Então o que eu vou fazer é pegar o div. E aqui você pode ver essa opção que diz que o espaço entre o que ele faz é que todos esses pedaços de conteúdo sejam igualmente espaçados verticalmente. Claro, não podemos ver muita coisa acontecendo agora porque nossa div não mudou seu tamanho. Mas quando você vai para o avançado que um tamanho e espaçamento, e deixe-me apenas mudar a altura de pixels para percentagens. Vou digitar 75%. Agora você pode ver que o nosso grupo, mas todos esses elementos estão sendo como, tipo, gosta de colados na parte superior do nosso div e a parte inferior de um div e este texto fica, fica no centro. Se fôssemos fazer isso como 50% ou mesmo 40%, você pode ver que temos até mesmo dúvidas. Pedaços de conteúdo e os espaços entre esses elementos são, são os mesmos. E, claro, teríamos que nos certificar de que este, este design é consistente através de todos os nossos, todos os nossos pontos de interrupção. Como neste caso, talvez queiramos fazer a div um pouco maior, talvez 40%. E nós só teríamos que saber, continuar, continuar isso, essa abordagem ao longo de todos esses pontos de interrupção, 992, poderia ir talvez como 45%. Lá vamos nós. E então 768, talvez 50%. Ou mesmo um 55 ou mesmo 65. Então esta é apenas uma outra maneira de mudar os espaços entre os elementos do seu conteúdo que são colocados dentro do, dentro de um elemento div. Mas eu acho que eu vou apenas para ir com as margens que eu adicionei ao meu texto. E em vez de agora apenas fazer todas as mudanças, certificando-se de que temos que removemos todas essas opções de todos esses pontos de interrupção. Eu só vou usar o painel de história aqui dentro do oxigênio, mas vamos começar a fazer isso a seguir. 26. 4.5Usando o painel histórico: Então aqui no lado oxigênio, finalmente temos o painel de história que está bem aqui. E aqui você vai ver todos os seus, todos os passos que você tomou para chegar a este lugar específico. E se você quiser, você pode simplesmente clicar neste botão de desfazer e refazer para voltar ao histórico ou seguir em frente. Ou você poderia apenas clicar em qualquer um desses estados para, você sabe, voltar para o lugar onde ele realmente gostaria de estar. Então, eu vou voltar. Vamos ver em algum lugar aqui, ou talvez até verão aqui. Isto deve ficar bem. Você pode ver que temos 40 pixels de margem entre este elemento e este elemento. E, claro, se eu mudasse, para dizer como 2525. Então, neste momento, esta mudança está sendo refletida bem aqui na parte inferior. Então este é o nosso último passo. E é claro que podemos voltar, voltar, se você quiser. Mas eu acho que eu vou mantê-lo como 25 por 25. Então o painel de história é relativamente novo para o oxigênio e felizmente o temos. Mas uma vez que está aqui, eu acho que é uma boa idéia para se familiarizar com ele. E então você pode, sempre que você cometer alguns erros de design ou erros de desenvolvimento, você pode simplesmente voltar para a história. Você pode voltar para a história todo o caminho para o seu estado inicial. Isso seria algo assim, mas eu não quero. Não quero voltar a isso. Quero ir para a frente para esta parte aqui. Então agora podemos realmente começar a mudar nosso botão. Então vamos fazer isso a seguir. 27. 4.6. Personalizando botões: Vamos agora cuidar do nosso traseiro. Então eu vou selecioná-lo. E a primeira coisa que vou fazer é clicar duas vezes nele para editar o texto. Então deixe-me apenas digitar em vista nosso portfólio. Este será o nosso apelo à acção. E uma vez que nosso botão é selecionado à esquerda, você pode ver que há um monte de coisas que podemos mudar. Então, por exemplo, vamos definir nossa URL. Só vou clicar em “Definir”. E isso abrirá nossa opção de inserção de edição de link. E o que eu quero fazer é eu quero o usuário que clica nesse link. Quero que o usuário vá para a nossa página do portfólio. Então eu vou escolher portfólio e eu só vou clicar em adicionar link. Então agora você pode ver que esse link está sendo adicionado aos nossos botões. Então, sempre que alguém clicar nele, você sabe, essa pessoa vai ser redirecionada para aquela página específica. Para que pudéssemos mudar o estilo do botão de sólido para contorno. Se quiséssemos. Claro que podemos mudar o tamanho. Então deixe-me apenas fazer esse cara, mas maior para algo como 18. Vou mudar o texto. A cor do botão pode ser para este mais escuro ou talvez este marrom mais claro e botão pairar cor. Poderíamos talvez grep o mesmo marrom médio, mas vamos fazer um pouco mais escuro para algo assim. Então, sempre que alguém paira sobre o botão de uma hora, essa pessoa vai ver algum tipo de feedback. Então vamos salvar esse cara. E eu vou pegar o meu, pegar esta versão anônima do meu site. E como você pode ver, quando passamos o mouse sobre o nosso botão e essa cor de fundo está mudando. Claro, nós também poderíamos mudar a cor do texto de simples largura para o nosso cinza muito, muito claro. E nós poderíamos mudar o tamanho da fonte que pode ser um pouco grande demais, mas se você quiser, você pode enlouquecer linha que. Eu vou para algo como talvez 1818 não deva ficar bem. Poderíamos também brincar com o peso da fonte. Então, como você pode ver, é muito, muito simples. O que eu gostaria de fazer, no entanto, é que eu gostaria de verificar a capacidade de resposta, como o meu botão vai ser, como ele vai estar se comportando em uns e a viewport é menor. Por isso, agora parece bem. 99 para ainda encontrar 768. Acho que talvez pudéssemos torná-lo um pouco menor. 14 e o tamanho do texto para talvez 16. E então vamos para o 418. E eu acho que isso deve ser bom. Então, ao todo, como você pode ver, processo bastante simples. Não se esqueça de inserir o link para o seu botão. E você sabe que você pode mudar o estilo para sólido ou contorno, e então você pode alterar as cores e a cor do mouse. Todas estas opções estão dentro, dentro de apenas um clique que você pode facilmente alterar o tamanho do seu botão. Talvez eu faça esse cara um pouco menor para algo como 16 e o tamanho do texto para algo como 17. E isto deve ficar bem. Então lá vamos nós. Criámos a nossa secção de heróis. Mas este tipo de herói seccionalismo, bem, é. Tudo bem, mas fiz , é meio chato. Acho que sim. Poderíamos sempre apenas o anúncio, talvez como um slider ligeiramente grande, enorme que estaria se estendendo por toda a nossa seção de heróis. E dentro desse controle deslizante, poderíamos adicionar diferentes partes de conteúdo. Poderíamos, por exemplo, mudar a imagem de fundo. Porque, se bem me lembro, temos como a Web Design, a marca e as subpáginas de design de impressão. Para que pudéssemos incluí-los em nosso controle deslizante. E poderíamos adicionar algumas informações e chamadas diferentes para ações, botões diferentes para, para esses portfólios específicos ou são essas páginas específicas. Mas vamos começar a fazer isso em seguida. 28. Adicione o deslizador: Então, antes de começarmos a adicionar nossos slides, tenho que adicionar algumas imagens novas aqui à minha biblioteca de mídia. Eu preparei algumas imagens de web design, impressão e Brandon. Eu só vou abri-los e esperar até eles enviarem. Então agora temos essas imagens. Claro que poderíamos usar nossa velha imagem de herói também. Então eu vou para as minhas páginas e vou adicionar a página inicial com oxigênio. Novamente. Nós não vamos usar esta seção com esses pedaços de conteúdo mais. Acho que podemos salvá-los. Talvez eu só vá pegar este div e eu vou colocá-lo de lado aqui. Eu só vou colocá-lo dentro desta seção, então está bem aqui. Ele vai estar esperando por nós assim que começarmos a adicionar nossos slides. Então isso é apenas uma, eu acho que uma boa técnica de produção, uma vala, tudo. Vamos guardar algumas coisas. No entanto, o que eu quero fazer é dentro da minha seção de heróis, eu quero me livrar dessa imagem de fundo. Então o que eu vou fazer é ir para o fundo da seção. Vou me livrar dessa sobreposição de imagem, e vou me livrar dessa imagem de fundo. Então agora o que temos que fazer é realmente adicionar o controle deslizante. Então eu vou apenas pressionar Adicionar e eu vou começar a digitar no controle deslizante. Lá vamos nós. E eu vou apenas clicar nele. Como podem ver agora, não temos muita coisa acontecendo aqui. Nesta estrutura, dor. Quando abrimos a camada de controle deslizante, temos apenas três slides que podemos realmente, você pode realmente clicar neles e como você pode ver, há alguma animação acontecendo. Temos alguns pontos bem aqui, pontos de navegação. E o que eu vou fazer agora é eu acho que eu vou apenas me livrar de dois slides e eu vou apenas trabalhar com um porque depois disso, nós podemos apenas duplicar nosso primeiro vôo porque nós basicamente estávamos indo para ter o mesmo, mesmo tipo de conteúdo em nosso, em nosso slide. Então, só para ver o que está acontecendo aqui, vou adicionar uma imagem de fundo ao meu slide. Então eu vou para fundo avançado, imagem de fundo. E eu vou pegar, talvez vamos começar com nossa imagem web design. Então esse é esse cara aqui, e eu vou selecioná-lo. Então agora temos nossa imagem, adicionar ao nosso controle deslizante. Mas há algumas coisas que precisamos fazer. Então, talvez antes de realmente começar a brincar com o nosso controle deslizante, com as configurações do nosso controle deslizante. Vamos cuidar do slide rapidinho. Assim como com nossa imagem de fundo da seção, podemos definir os pontos esquerdo e superior para 50%, apenas certifique-se de que nosso ponto focal está exatamente no centro. Então podemos pegar nosso div. Isto é, lembre-se que este foi aquele div e eu vou colocá-lo aqui mesmo no meu primeiro slide. Então ele fica bem no meu, no meu controle deslizante. Então este é o nosso primeiro slide, este tipo aqui com o nosso div. Então, se fôssemos agora apenas pegar nosso primeiro slide, talvez seja, deixe-me apenas renomeá-lo. Vamos chamá-lo, pensar que é, vamos chamá-lo de web designer. Lá vamos nós. E então se nós apenas clicar neste menu, botão Menu de Contexto e apenas clicar em duplicar, nós temos outro slide chamado web design é claro, mas vamos mudá-lo para, talvez vamos mudá-lo para branding. Lá vamos nós. E então vamos duplicar este slide. Mas esse cara, vamos renomeá-lo, e vamos chamá-lo de design impresso. Lá vamos nós. Claro, todos esses slides têm as mesmas imagens de fundo. Então eu vou para branding. E eu vou mudar a imagem de fundo para meu pensamento era yay estava branding. Então branding, acho que foi esse cara. Vou selecionar a imagem. Então eu vou para a minha pesquisa de fundo avançada de design de impressão. E acho que vai ser esse cara. E lá vamos nós. Temos slides diferentes para diferentes fundos para nossos slides. Claro, se quisermos, ainda podemos ir em frente e escolher uma cor de sobreposição de imagem, se quisermos. Para nossos slides, vamos talvez fazer algo como 40% de transparência. Poderíamos fazer o mesmo por esse cara. Claro, se fizéssemos isso desde o início, desde o início, seria muito mais fácil. Teríamos todos esses caras já configurados do jeito que deveriam. Então, 40, vamos fazer assim. E o mesmo para design de impressão, fundo, imagem sobrepõem essa cor. E para 40, eu vou bater Save. Então agora temos nossos slides configurados para que eles estejam funcionando corretamente. Se formos para a nossa página principal e eu vou apenas atualizar isso. Nosso controle deslizante está, bem, tecnicamente está funcionando. Não parece bem. Não parece bonito, mas vai ficar assim. Ele vai olhar corretamente em apenas alguns segundos. Este é apenas o peso que você adiciona, um controle deslizante aqui dentro de oxigênio, e é assim que você pode adicionar slides. E não se esqueça que dentro de slides você pode ter basicamente tudo o que quiser. É apenas uma questão de adicionar um pedaço específico de conteúdo, um módulo específico dentro do, um dos slides, bem aqui, dentro do módulo deslizante no lado, a camada deslizante. Então vamos começar realmente cuidado do controle deslizante em si no próximo vídeo. 29. 4.8Crie o deslizante integral e altura: Então, quando clicamos em nossa camada de controle deslizante em nosso módulo de controle deslizante, você pode ver que principalmente temos algumas opções de estilo e configuração bem aqui nessas duas guias. Assim, para o estilo, podemos escolher entre a animação horizontal ou fade. Então esta vai ser a nossa mudança se escolhermos ir com a animação de desvanecimento. Mas acho que vou usar a animação horizontal. Podemos optar por aumentar ou diminuir a velocidade da nossa animação de slides que é apresentada em milissegundos. Normalmente acho que é mais rápido. Esta transição, o batedor. E então podemos escolher a cor dos nossos pontos. Esses caras aqui, eu vou mudar essa cor para nossa cor cinza claro. E talvez eu vá diminuir um pouco a transparência, algo como 3%. E poderíamos remover o estofamento em torno de nossos slides. Poderíamos fazer com que os pontos sobrepusessem nosso controle deslizante. E se você quiser, se você tiver alguns tamanhos diferentes de todos os seus slides, você pode esticá-los para a mesma altura. Então, estas são as coisas básicas que irão controlar o nosso controle deslizante. Se formos para a configuração, podemos escolher as setas show ou não opção. Podemos escolher mostrar pontos ou não. E podemos escolher a função de reprodução automática, que fará com que o controle deslizante auto-play. E você pode escolher o atraso aqui, o que basicamente significa quanto tempo um slide será mostrado. E podemos optar por definir a opção infinita que está apenas indo para loop nosso controle deslizante. Vou apenas clicar no autoplay por enquanto, só para que os nossos chapéus não doam. Então nós fizemos um pouco de limpeza básica. Se apenas agora atualizarmos esse cara, temos nossos pontos bem aqui. Bem, nossas flechas bem aqui e nossos pontos aqui embaixo no fundo. Mas ainda assim o controle deslizante não é, não está sendo apresentado como largura total como a nossa seção anterior ou imagem de fundo. Então, a fim de corrigir isso, precisamos brincar com algumas opções de controle deslizante que são net disponível aqui. Mas eles estão disponíveis aqui dentro do tamanho e espaçamento. Então, primeiro de tudo, o que eu vou fazer é que eu vou fazer o controle deslizante, sliders altura 100 VH para torná-lo como extensão em todo o meu site inteiro. Então ele cuida de algumas coisas, mas não de todas as coisas. Nosso controle deslizante é encaixado, vontade ainda está bem, não é ainda altura total e uma largura total porque nossa seção tem algumas opções padrão de margem e espaçamento atribuídas a ele. Se formos para a guia Avançado, tamanho e espaçamento, podemos ver que temos que temos 75 pixels de preenchimento, inferior e 20 pixels à direita e à esquerda. Se eu apenas digitar 0 aqui e, em seguida, clique em Aplicar tudo, você pode ver que todo esse preenchimento desapareceu. Podemos salvar esse cara e depois ir ao nosso Modo Incógnito e atualizar a página. E você pode ver que temos nosso controle deslizante sendo apresentado em largura total, em glória total e altura total. Claro que funciona bem. Podemos mover esses caras assim. Quem quer que, quando olhamos mais de perto nossas imagens de fundo, podemos ver que elas são como se fossem repetidas em segundo plano. E isso é definitivamente o que queremos. E podemos resolver isso facilmente. Se formos para o nosso primeiro slide, em seguida, avançado do que fundo. Aqui, você pode ver essa opção de tamanho de fundo. E se escolhermos cobrir a opção, isso vai cobrir o nosso todo ou um terreno inteiro. Vamos fazer o mesmo pela nossa marca. Tão avançado por terra, capa, design de impressão, fundo avançado e, em seguida, capa. Se agora salvarmos nosso controle deslizante e atualizarmos nossa página, você pode ver que não temos nenhum plano de fundo repetido. E, claro, tudo o que resta é verificar essa capacidade de resposta. Então deixe-me fazer esse cara um pouco maior. Parece bem. Como podem ver, o nosso plano de fundo está reajustado até ao nosso menor menor dispositivo. Então, lá vai você. É assim que você pode definir nosso controle deslizante. E, claro, o que teríamos que fazer é você ter que ir para branding. Poderíamos talvez alterar esse texto para ver nossos projetos de branding. Lá vamos nós. Poderíamos talvez deixar que eu remova um pouco do texto para que pareça assim. mesmo para o design impresso da marca, podemos digitar e visualizar nossos designs de impressão. E novamente, talvez apenas se livrar de um texto como esse. Claro, poderíamos mudar o texto do nosso portfólio. Talvez pudéssemos digitar algo como talvez ver projetos. Lá vamos nós. O mesmo para este projeto de vista inferior. Projectos, lá vamos nós. E para o nosso último botão aqui em baixo, você poderia fazer a mesma coisa. Exibir projetos que são ego. Claro, tudo depende de você. Eu só quero mostrar que você pode basicamente colocar o que quiser e mudá-lo ajustado. De qualquer forma, você gosta. E aqui dentro designer quando você está criando um, criando o seu, seu controle deslizante. Então, se voltarmos ao nosso modo incógnito, atualize esse cara. Você pode ver que nosso botão mudou e nós temos nossos projetos de marca VR, nossos projetos de impressão. Você sabe, tudo está sendo renderizado instantaneamente dentro do nosso navegador. Então acho que temos nossa seção de heróis pronta. Agora podemos seguir em frente para preencher em todas essas seções ou com alguns, com algum conteúdo interessante e interessante, vamos aprender em apenas um segundo como usar classes aqui dentro de um oxigênio. Mas primeiro vamos adicionar alguns, alguns ícones e algum texto apenas para mostrar como nossos serviços para os usuários. 30. 5.1Primeiro adicione as colunas: Agora podemos começar a criar nossa seção de serviços e já temos nosso herói. Então agora podemos começar uma seção que vai ser colocada abaixo da nossa seção de heróis. E já temos uma seção aqui. E acho que vou deixá-lo, mas vou me livrar de um desses pedaços de texto. Vou deixar este e talvez, talvez, vamos criar tudo do zero. Então eu vou adicionar uma nova seção. Lá vamos nós. Vou colocá-lo aqui embaixo da seção de heróis. E talvez vamos renomear e chamá-lo de serviços. Lá vamos nós. Vou salvar tudo. Então o que queremos fazer aqui é que gostaríamos de adicionar algum tipo de cabeçalho e talvez algum texto aqui embaixo. E então nós gostaríamos de ter, você sabe, como aqueles pequenos pedaços de poço, como pequenos ícones e alguns títulos abaixo desses ícones, alguns pedaços de texto. Assim como você vê em muitos, muitos projetos porque nós gostaríamos de tipo, você sabe, enumerar os serviços que nós fornecemos. Então o que eu vou fazer primeiro é talvez eu só vou pegar emprestado alguns desses caras aqui. Então eu vou pegar este diff que tem este título, tags e botão. Então, eu só vou pegar este. Vou duplicá-lo. E então eu vou apenas movê-lo para a minha seção de serviços para cá. Este é esse cara bem aqui. E, claro, temos que mudar algumas coisas sobre isso. Então, primeiro de tudo, eu vou pegar o título e eu vou mudar a cor, o mesmo para o texto. Então eu vou apenas remover essas cores padrão e nós não precisamos de um botão. Então eu vou me livrar disso, me livrar dele. E eu vou remover este valor de largura bem aqui. E talvez pudéssemos mudar o texto aqui. Vamos digitar Discover. A nossa pesquisa diz: “Lá vamos nós. Então este é o nosso título, estes são os nossos textos. Vou deixar este pedaço de texto só por enquanto. Então o que temos que fazer agora é adicionar os ícones que mencionamos. E esta vai ser uma grande ocasião para aprendermos sobre as aulas. Mas antes de avançarmos para isso, vamos apenas abaixo desta div, vamos adicionar colunas. Precisamos de três colunas. Então eu vou ir em frente e clique em Adicionar tipo n colunas. Lá vamos nós. E uma vez que você clicar nas colunas, você pode ver que você tem como partes de uma coluna predefinidas aqui. E o que precisamos é de três colunas e do lado B. Então vamos escolher 33 por 33 por 33. Então eu vou apenas clicar nele. E lá vamos nós. Você pode ver que temos três peças bem aqui. E basicamente eles são apenas três divs são um para realmente, nós podemos querer mudar os nomes para que possamos mudá-lo como em algo como coluna um. Lá vamos nós. Então vamos chamar essa coluna para o ego deles. E esse cara será a nossa coluna três, só para que você possa ver tudo, você possa entender, tudo. Você não tem que fazer isso se você sabe o que está fazendo aqui, mas você definitivamente pode fazê-lo. Então temos o nosso título, temos algumas mensagens por baixo aqui, temos as nossas colunas. E agora vamos colocar nossos ícones e texto dentro dessas contagens. Mas antes de avançarmos para isso, talvez vamos adicionar um pouco, talvez alguma margem aqui. Então vou pegar minhas colunas. E eu vou talvez colocar esses caras um pouco para baixo, talvez em algum lugar aqui. Isto deve ficar bem. Agora vamos realmente começar a adicionar nosso conteúdo dentro de nossas colunas e aprender sobre as classes. Então vamos começar a fazer isso no próximo vídeo. 31. 5.2Crie o primeiro ícone: Então, o que gostaríamos de adicionar aqui seria um, um ícone, então algum pequeno título sortudo e alguns, e algum texto. Então podemos fazer isso aqui dentro do oxigênio de duas maneiras diferentes. Então, primeiro vamos aprender a primeira maneira, e depois vamos aprender a segunda maneira apenas para você entenda o que realmente está acontecendo aqui. Então, primeiro vamos apenas adicionar um ícone do que um título e, em seguida, algum texto. E então vamos usar um dos módulos predefinidos aqui dentro de oxigênio chamado caixa de ícones. Então o que eu quero fazer é adicionar um ícone. Então eu vou ir em frente e escolher e, e começar a digitar no ícone. Lá vamos nós. Então eu vou adicionar um título. Lá vamos nós. E então eu vou adicionar um texto. Lá vamos nós. Então, é claro, vamos, vamos mudar este texto para talvez vamos primeiro mudar o efeito para que saibamos o que a mudança do texto para. Então eu só vou pegar este ícone. E como você pode ver à esquerda, aqui temos algumas configurações diferentes para o nosso ícone. Então você pode escolher o contorno, estilo sólido ou estilo bem conhecido. Então podemos mudar a cor. Talvez vamos mudá-lo Torre ameba, vamos mudá-lo para esta cor, embora seja uma cor padrão, uma das cores padrão. E é claro que podemos mudar o espaço ou o tamanho do ícone. Então talvez vamos fazer como o 442 deve ser bom. E então temos dois conjuntos para escolher. Então fonte impressionante e linear, ícones lineares. Então eu vou com Font Awesome para este exemplo. E como você pode ver por padrão, ele vem com este polegar para cima ícone pré, pré-digitado aqui. Mas se removermos o texto, você pode ver que temos todos os nossos ícones aqui. Então, digamos que fornecemos algo como serviços de web design. Então vamos ver se temos algo aqui que seria como web design ou talvez design. Vamos talvez ir com esse cara, esse desktop bem aqui. Na verdade, vamos fazer isto um pouco maior. Lá vamos nós. Então vamos pegar nosso título e vamos digitar um Web Design, o Rio. Talvez você possa mudar a tag para como Título 3 e talvez aumentar o tamanho da fonte um pouco para algo como, vejamos, 26 ou talvez 32. Isto deve ficar bem. E vamos pedir alguma mensagem emprestada daqui de baixo. O requisito vai copiá-lo e, em seguida, colá-lo novamente. Lá vamos nós. Então, como você pode ver, nós temos nosso ícone, nós temos nosso cabeçalho de texto, e nós temos nosso, bem simples pedaço de texto. Mas é claro, o que queremos fazer é ter certeza que todos esses caras estão alinhados com o centro. Então, com minha coluna uma vez onde meu primeiro DEF selecionado, eu vou escolher entre este alinhamento de item horizontal. Vou escolher o Centro. E assim, centramos nosso ícone enquanto nossa caixa de ícones, por assim dizer. Claro que poderíamos começar a mudar as cores, alguns textos, todas essas coisas. Poderíamos talvez adicionar algum preenchimento ou margem entre todos esses elementos. Mas ainda assim, ainda precisamos adicionar algum texto enquanto esta caixa de ícone para o nosso centro e a coluna direita. Então, uma vez que fazemos isso, nós realmente não queremos saber mudanças como cada aspecto separadamente. Gostaríamos de ser capazes de mudar todas essas coisas ao mesmo tempo. Porque basicamente e todos esses elementos serão bem mesmo exatamente o mesmo, mas definitivamente muito, muito, muito semelhante. Então, antes de nós como clonar todos esses elementos e adicioná-los às nossas colunas restantes, poderíamos adicionar classes aos nossos elementos. Mas vamos começar a fazer isso e explicar as aulas no próximo vídeo. 32. 5.3aulas e id's: Quando você seleciona qualquer item em oxigênio, você verá aqui no canto superior esquerdo que ele tem um ID padrão adicionado a ele. E ID é como, como um, como um ID, como um nome, muito, muito específico, muito original e exclusivo para um item. Mas também você pode adicionar classes aos seus itens. Então vamos fazer isso. Então eu vou apenas clicar aqui. E eu vou adicionar uma aula. Eu vou chamá-lo talvez como Serviços, ícone. E eu vou clicar em adicionar classe. Então agora temos uma classe adicionada ao nosso item e um ID adicionado ao nosso item. Então, qual é a diferença? Bem, basicamente, tanto a classe e um ID permitem que você estilo h1 elemento. No entanto, um ID é exclusivo para cada elemento. Você só pode ter os mesmos ID no seu, na sua página. E você pode adicionar a mesma classe várias vezes a diferentes elementos. Portanto, é uma boa idéia ter que usar classes quando você quiser estilizar vários elementos da mesma maneira. E no nosso caso, já que vamos adicionar os mesmos elementos a colunas diferentes, é uma boa idéia ter classes adicionadas ao seu, a essas peças, a este ícone, o título e o texto. Então, se você quiser mudar alguns aspectos de nossos elementos, podemos fazer isso apenas mudando a classe. E todas essas mudanças serão visíveis, serão refletidas em todas as instâncias desse elemento que tem essa mesma classe aplicada a ele. Então o que eu vou fazer é eu vou pegar o, este título web design. E eu vou adicionar outra aula e vai ser a direção de serviços. E então eu vou pegar este aqui. E eu vou entrar em Serviços e, em seguida, texto, e eu vou adicionar a classe. Então, agora que, bem, uma vez que essas classes são adicionadas, agora podemos apenas clonar todos esses elementos. Então eu vou pegar o ícone, eu vou duplicá-lo. E agora posso movê-lo para a minha segunda coluna. Lá vamos nós. Você pode ver que ele foi adicionado a esta coluna e ainda tem a mesma, a mesma classe aplicada a ela, mesmo para o cabeçalho. Então, duplique. Pegue a direção, eu vou movê-la para cá. Faça o mesmo para esse texto. E eu vou movê-lo para cá. E então eu vou fazer o mesmo para a coluna da direita. Então, novamente, duplicar. Então eu vou para a coluna três. Então você tem o ícone, nós temos o título, e eu vou movê-lo e o texto duplicado e movê-lo aqui para baixo. Claro, ainda precisamos pegar nosso div e alinhar tudo ao centro. Lá vamos nós. Mas agora, quando clicamos em qualquer um desses elementos, você pode ver que temos a mesma classe aplicada a dois nossos elementos. Então agora você pode mudar o ícone. Então nós temos web design pode ser agora vamos fazer algo como design de logotipo. Então vamos ver se temos algum bom ou talvez vamos chamá-lo de marca. Então eu vou pegar esse cara bem aqui. E vamos digitar e marcar. E então vamos pegar este. E talvez digamos que estamos oferecendo serviços de SEO. Vamos ver se temos algum SEO para baixo. Você sabe, eu posso, quero dizer, talvez vamos fazer como edição de imagens ou algo assim. Vamos pegar este não é realmente sobre encontrar o ícone certo, mas sobre aprender e como adicionar classes ao nosso texto. Ok, então nós temos todos os nossos elementos adicionados bem aqui. Então agora nós podemos realmente começar a brincar com nossas classes e , em seguida, realmente ver a diferença entre uma tag ID e uma classe. Então vamos começar a fazer isso no próximo vídeo. 33. 5.4Edição: Ok, temos as aulas adicionadas a todos os nossos elementos. Então agora vamos entender a diferença entre a classe e uma tag. Como você pode ver, agora estamos adicionados em nossa classe e nós temos basicamente as mesmas opções que tínhamos antes. Então, uma vez que começamos a mudar isso, você pode ver que realmente nada está acontecendo. Estamos alterando o tamanho do ícone, mas o tamanho permanece o mesmo. Então, por que isso está acontecendo? Se formos para o nosso ID, você pode ver que temos alguns valores aplicados ao nosso, ao nosso ícone. E é basicamente, uma vez que clonamos todos esses elementos, esse valor é o mesmo aqui e aqui. E não podemos ver qualquer mudança porque ids sempre têm precedência sobre nossas classes porque IDs são mais específicos, como mencionamos antes. Assim, eles sempre terão precedência sobre seletores que são menos específicos, então mais gerais. E neste caso, aulas são mais gerais do que identificações, seja quem for, se mudarmos o tamanho do ícone, se removermos o mesmo para este tipo e o mesmo para este tipo, está bem? Não há nada aqui. E deixe-me, deixe-me apenas remover essa cor. E vamos remover todos esses elementos. O mesmo aqui. Vou até a identificação, removi a cor e o tamanho. Então, agora, se nos certificarmos sempre precisamos selecionar essa classe primeiro. E agora se começarmos a adicionar as cores, então era essa cor, acredito que vocês podem ver que todos esses ícones estão mudando e podemos mudar o tamanho se quisermos, eu acredito que era 48 antes. Mas é claro que poderíamos mudar a cor se quiséssemos. Eu não sei. Talvez possa combinar com esta cor, se você quiser. Isso é basicamente com você. E podemos fazer o mesmo para o nosso web design, bem, para os nossos títulos. Então ele selecionou serviços. Claro, todos nós sabemos, precisamos lembrar que temos alguns valores aplicados aqui. Então eu vou remover todos esses atributos de tamanho de fonte. Vamos para as identificações depois selecionar a turma. E acho que foram 32. Lá vamos nós. E podemos fazer talvez algum espaçamento. Então vamos adicionar alguma margem superior e inferior. E como dez pixels e dez pixels na parte inferior. Lá vamos nós. E se você quiser, você pode mudar algo sobre o texto. Então primeiro vou me certificar de que não tenho nada aplicado ao MyText. Parece limpo aqui. Então podemos pegar nossa aula, ir para talvez topografia, alinhar tudo ao centro. Talvez tenha mudado a cor para uma de nossas cores padrão. E se você quiser, podemos alterar nosso, o, o tamanho da fonte. Poderíamos, mesmo aqui, se quiséssemos, escolher uma das configurações de fonte do Google, uma das Google nos fundos do Google, e podemos escolher aqui. Mas eu espero que você tenha a idéia do que as aulas estão realmente fazendo agora. Eles estão nos ajudando a mudar os elementos que são semelhantes ou supostamente semelhantes. Basicamente, de uma só vez, não precisamos, como com os ids, mudar cada instância do nosso conteúdo. Mas podemos simplesmente mudar alguns aspectos de uma classe em particular. E sim, e, e essa mudança está sendo aplicada a todas, todas as instâncias, todas as instâncias que têm essa classe específica, uma classe aplicada a ela. Então é assim que você pode construir essas caixas de ícones com classes. Mas em oxigênio você também pode criar essas caixas de ícones usando módulos de caixa de ícones. Então vamos começar a fazer isso a seguir. 34. Módulo 5.5O módulo de caixa ícones: Então agora vamos adicionar mais alguns serviços aqui na parte inferior. Então o que eu vou fazer é eu vou pegar essas colunas basicamente vai div, e eu vou duplicar isso. E talvez vamos descer aqui. Talvez mudemos o nome desses caras. Talvez vamos mudar esse cara. Vamos fazer uma coluna para esse cara, e vamos chamar esse cara de coluna cinco. E vamos chamar isso de coluna, coluna seis. Só para sabermos que é mais fácil para nós entendermos o que está acontecendo. Então o que vou fazer é remover todos esses elementos. Não precisamos deles. Mova-se, remova e remova. Então a mesma coisa para a coluna, coluna cinco, remova-os. E depois, na coluna seis, retire-os. Então ele tem apenas colunas vazias, vazias bem aqui. Então o que eu vou fazer é adicionar o módulo de caixa de ícones à nossa coluna quatro. Então eu vou clicar em Adicionar e começar a digitar. Eu venho e temos esta caixa de ícones bem aqui. E como você pode ver, sabemos um clique. Temos todos esses elementos adicionados à nossa, à nossa coluna. Se abrirmos, podem ver que temos o ícone aqui. Também temos este título e temos um texto. E se apenas selecionarmos nossa caixa de ícones, você pode ver que temos alguns, alguns elementos que podemos, que podemos mudar em relação a todos esses, todos esses elementos. Então o que eu vou fazer é primeiro eu vou adicionar uma classe para todos os meus, todos os meus, bem, todo o meu elemento caixa ícone. Então o que eu vou fazer é chamá-lo como ícone. Talvez eu tenha uma coluna assim. É uma boa ideia usar uma convenção de nomes que faça sentido para você. Não necessariamente faz sentido para mim, mas isso faz sentido para mim. Então lá vamos nós. Eu posso me acalmar. Agora podemos brincar com todos esses elementos. Então o que eu vou fazer é ir para layout e espaçamento. Vou alinhar, alinhar tudo ao centro. Podemos escolher onde este ícone deve ser posicionado. Então, em cima, esquerda, direita e inferior. Mas eu gostaria de recriar isso. Olhe. Alguns vão para o topo, que é o valor padrão. E vamos deixar este espaço próprio antes como está. E talvez eu possa espaço acima, eu acredito que foram dez pixels. Então vamos fazer dez pixels tendo um espaço abaixo e, e não tinha espaço abaixo e espaço de cabeçalho acima, espaço de texto. Acho que o deixamos. Acho que não fizemos nada com o espaçamento do nosso têxtil. Vamos deixar como está. Então vamos talvez para a tipografia e para a tipografia, para o, para o nosso rumo. Acho que foram 32. Deixe-me ver rapidamente. Vamos pegar a aula, sim, 32. Então eu vou pegar esse cara e vamos mudá-lo para obter imagem branding. Alice faça SEO. Por que não? Foguete? Talvez vamos mudar esse tipo de letra para Fonte. Incrível, Só assim temos tudo consistente ao longo da nossa recita. E vamos ver se temos alguma coisa. Talvez vamos em frente e agarrar esse cara. Lá vamos nós. Eu acredito que este texto foi, eu acho que foi 14 pixels. Sim, eram 14 pixels. Então vamos pegar nossa caixa de ícones. Topografia, texto, tamanho da fonte 14 e cor. Esse cara bem aqui. Lá vamos nós. E, claro, precisamos mudar a cor do nosso ícone. Então me empresta essa cor. Acho que talvez pudéssemos adicionar esta cor à nossa cor padrão. Então, o que podemos fazer, podemos apenas clicar neste salvar como ícone de cor global. Vou clicar nele. Vamos chamá-lo. Vamos chamá-lo de azul pálido, por falta de um termo melhor. E então podemos agarrar ou ícone e escolher esse cara aqui. E lá vamos nós. Nós temos o nosso, nosso basicamente eu posso criar boxe. Então agora o que podemos fazer é pegar esse dinheiro de ícone. Deixe-me fechar esse cara. Podemos duplicá-lo e movê-lo para a nossa coluna cinco. Em seguida, duplique-o mais uma vez. E podemos levar esse cara para a nossa coluna seis. Então agora o que temos que fazer é apenas mudar os ícones e o texto. Mas nós também, eu acho que nós temos que mudar o tamanho deste ícone. Está definido como padrão, este padrão 55. Mas se nós apenas agarrar, se nós apenas pegar nossa caixa de ícones, você pode ver que, infelizmente, não há nenhum valor padrão para o nosso ícone. Não podemos controlá-lo a partir, a partir do, a partir deste nível. Você teria que pegar o ícone em si e, em seguida, mudar o tamanho. Mas acho que poderíamos tentar adicionar nossa classe a esse cara. Então eu acho que foi Serviços. Eu atual, este é este cara aqui e o tamanho vai mudar. Então, novamente, ícone Serviço, este cara aqui, ícone Serviços eo ícone é adicionado. Então vamos agora mudar rapidamente nossos ícones. Deixe-me pegar rapidamente qualquer ícone, talvez assim. E então nós temos web design Brandon imager em SEO. O que poderia ser isso? Alice ligou para essa busca na web. Lá vamos nós. E então vamos pegar esse cara e vamos mudar algum ícone aqui. Claro, se você quisesse, você ao construir, especialmente neste caso, você não precisa escolher um ícone de, de oxigênio. Você pode simplesmente carregar sua própria imagem, seu próprio ícone e usá-lo também. Mas neste caso, neste cenário de caixa de ícones, você tem que usar o, este, este ícone. Claro que você poderia adicionar uma imagem também aqui, mas este módulo caixa de ícones vem com um ícone como pré-instalado. Vamos, vamos colocar assim. Então, novamente, eu vou pegar este ícone e eu vou mudar, mudá-lo para talvez como este livro e vamos apenas digitar em impressão. Impressão, design. Lá vamos nós. E basicamente temos nossos serviços prontos. E, claro, digamos que ela gostaria de talvez mudar apenas as cores desses, desses elementos. Mas você não quer mudar a aula. Você só terá que pegar um ícone, certeza de que você está no ID, não na classe porque, se você fosse mudar a cor deste ícone, você afetaria todos esses ícones. Então deixe-me voltar à minha cor anterior. Lá vamos nós. Então, se agora clicarmos nesse cara, e então vamos escolher esse ícone de fantasia, esse ID. E eu vou pegar talvez essa cor. Você pode ver que estamos apenas mudando a cor. Estamos mudando a cor desta instância em particular, não todos esses elementos que têm classes aplicadas a eles. Portanto, o ID é sempre mais específico. Então, se você só quer saber que preservou a classe, mas para mudar um pouco dele, você só precisa mirar esse ID, não a classe em si. Então eu não quero fazer isso. Eu só vou me livrar disso. E lá vamos nós. Nós temos nossa seção de serviços são criados. Mas é claro que ainda precisamos cuidar da capacidade de resposta. Então, vamos ver como será em dispositivos menores no próximo vídeo. 35. 5.6Crie o serviços responsivo: Então temos nossa seção criada. Agora é hora de torná-lo responsivo. Então eu vou fazer, eu vou para esse cara aqui, e eu vou escolher o contêiner Page 1120 e abaixo. Parece bem, mas talvez possamos mudar como a largura deste texto aqui. Então o que eu vou fazer é ir para o tamanho avançado e espaçamento. E vamos talvez fazer 75%. Acho que isto vai ficar melhor. Talvez vamos em frente e adicionar um pouco de espaço e bem aqui. Então, vamos ver como será em todos os dispositivos. Parece com isto. Em seguida, no 1120 e explodir parece assim. Agora vamos para menos de 992. Parece tudo bem, mas talvez queiramos tornar esta div um pouco mais larga. Então eu vou para o tamanho Avançado e espaçamento e vou para 100%. Então, quando vamos para todos os dispositivos, parece que este contêiner de página. Enquanto 1120, parece com isso, menos de 992, parece com isso. E agora esses caras, acho que precisamos mudar esses elementos. Então, se formos para 1120, ainda parece bom. 99 T2. Agora, neste ponto de interrupção, podemos ver que estes, esses pedaços de textos talvez não sejam um pouco largos demais. Então, o que poderíamos fazer é, por exemplo, fazer esses menores se você quiser manter esses caras orientados verticalmente assim. Mas também poderíamos forçar esse layout horizontal anterior. Então, quando selecionamos nossas colunas, você pode ver que temos esta pilha colunas verticalmente opção selecionada aqui. E por padrão, você pode ver que ele diz menos de 992. Então, neste ponto, nossas colunas começam a empilhar verticalmente. Mas se selecionarmos, se você quiser neste ponto de interrupção, se quisermos que nossos ícones sejam colocados um ao lado do outro neste ponto de interrupção, podemos ir menos de 768. E como você pode ver, nossas colunas começam a se parecer com isso. Eles estão sendo colocados um ao lado do outro. Claro, também podemos ver que temos alguns problemas aqui, como este pedaço de texto não foi devidamente colocado para fora. Então poderíamos pegar esse cara e ir para a direção de nossos serviços e, em seguida, mudar a configuração topográfica muito centrada. Mas já que estamos neste ponto de interrupção agora, essa mudança será aplicada apenas a este ponto de interrupção e abaixo. E eu gostaria que fosse aplicado a todos os meus, todos os meus breakpoints. Por isso, vou livrar-me disso e livrar-me disso. E eu vou para todos os dispositivos. E agora eu estou indo, eu vou para a topografia e centro. Então, agora, quando formos a menos de 992 e aquele cara está bem colocado onde deveria estar. E também acho que poderíamos mudar a altura da linha. Mas novamente, eu vou para todos os dispositivos. E para a altura da linha, vamos apenas digitar 1.1. E então quando vamos para menos de 992, parece, parece muito melhor. Agora, o que poderíamos também fazer é talvez querer mudar o tamanho de nossos elementos dessas rubricas. Então vamos tentar o tamanho da fonte como 26 ou 28. Acho que isto deve ficar bem. E nós também poderíamos fazer o mesmo para esta coluna aqui na parte inferior. Então eu vou para colunas aqui embaixo. E eu vou empilhá-los verticalmente abaixo de 768. Então ele tem todos esses caras assim. Como adicionamos esses caras como módulos simples e simples caixas de ícones, não os criamos do zero, como esses caras aqui, eles parecem um pouco diferentes. Então, se você quiser, você pode pegar essas colunas bem aqui. E eu só vou, talvez eu vou fechar todos esses elementos e eu vou duplicá-lo. E agora podemos simplesmente mudar e esses ícones. Então isso é isso, eu acho que era um ícone de sinal. Lá vamos nós e podemos chamá-lo de CEO. Então temos a busca na web. Bem, vamos digitar uma busca. Então vamos e eu vou digitar uma pesquisa na web. E então temos o design impresso. Acho que vai ser um livro ou algo assim. E vai ser design de impressão. E então podemos nos livrar dessas colunas aqui embaixo. Claro, é tudo opcional, é tudo com você. Eu só queria manter as coisas simples e eu não faria, você sabe, porque isso é mais rápido assim. Mas é claro, é uma boa idéia testar todas essas soluções sozinho. Você gostaria de usar a caixa de ícones. Vá em frente. Se você quiser ir, você quer saber, basta criar essas caixas de ícones do zero você mesmo. Sabe, isso é sempre bom, uma coisa boa de aprender. Então nós temos nossos elementos olhando assim ou agora vamos ver como eles serão quando eles estão em um dispositivo menor. Acho que parece tudo bem. E em um dispositivo muito, muito menor, ainda está, ainda parece bem. Então eu vou para todos os dispositivos. E então podemos ver o nosso design no modo de navegação anónima como de costume. Então Firefox controle mais Shift mais P, controle Chrome mais Shift mais n outros navegadores, Eu não tenho certeza. Então temos o nosso design assim. Eu só vou torná-lo menor, talvez, mas menor do que isso. Então agora eu vou descer. Temos os nossos serviços bem aqui. E quando começarmos a ficar cada vez menores e menores até certo ponto, vocês verão que estamos, que nosso design é totalmente responsivo. Então criamos nossos serviços. Agora podemos passar para adicionar em uma galeria, uma galeria de suas imagens, imagens de sua escolha e, ou as imagens que seu cliente S2. Então vamos passar para isso. 36. 6.1Crie a seção galeria: Então eu estou aqui no site pixels.com. Esse é o meu site para imagens gratuitas e livres de royalties. E o que eu quero fazer é pegar talvez, sei lá, oito a dez fotos. Então o que podemos fazer aqui é talvez procurar por design. E temos algumas imagens bem aqui. Então deixe-me pegar esse cara aqui. E aqui no canto superior, eu não quero escolher como o arquivo de tamanho enorme original. Acho que podemos ir com o tamanho grande. E então nós podemos, o que podemos fazer, podemos apenas clicar no download gratuito e apenas salvar a imagem, e então nós estamos prontos para ir. Então o que eu vou fazer agora é eu vou pegar apenas oito a dez fotos e eu vou guardá-las no meu computador. Então eu tenho minhas imagens prontas. Dei-lhes alguns nomes genéricos só para sabermos o que estas imagens devem apresentar. E é uma boa idéia dar suas imagens como nomes significativos ou pelo menos nomes que façam sentido para você. E também esses nomes serão, será por padrão usar como nossos textos de sobreposição e quando adicionarmos à galeria. Então vamos para a nossa galeria. Vamos realmente passar para a nossa página e começar a adicionar nossa galeria. Então acho que vou me livrar desse texto. Eu não preciso dele. E talvez desta vez eu mude a cor de fundo da minha seção. Vamos fazer sobressair um pouco. Então eu tenho minha seção selecionada. Deixe-me apenas talvez fechar essas camadas e ir para fundo avançado por cor de terra. E nós vamos escolher esta cor escura bem aqui. Outra vez, poderíamos talvez adicionar algum texto aqui no topo. Então eu vou pegar isso, talvez todo esse div, e eu vou duplicá-lo e movê-lo para o fundo para esta página. O que é claro que precisamos mudar a cor, então esta cor mais clara e esta cor mais clara. E vamos mudar isso. Nosso portfólio, vamos chamá-lo, vamos chamá-lo assim. E talvez eu só vou remover este pedaço de texto apenas para, apenas para fazê-lo parecer um pouco diferente. Então nós temos o nosso, talvez vamos mudar o nome da nossa seção para portfólio. Vamos manter tudo bem organizado. Portfólio. Então temos o nosso, nosso título, algum texto aqui em baixo. Agora é hora de realmente adicionar a galeria. Então o que eu vou fazer é selecionar minha seção, clicar, adicionar e, em seguida, digitar GAO GA. E já temos a nossa galeria. Então o que temos que fazer agora é adicionar algumas imagens a ele. Então o que eu vou fazer é clicar neste cara aqui, Biblioteca de Mídia, e depois clicar em Procurar. E como podem ver, não temos muitas imagens aqui. Então, eu só vou pegar minhas imagens. Eu vou selecionar todos eles e apenas movê-los aqui e esperar que eles façam upload. E uma vez que todos esses caras são enviados e todos eles são selecionados, esta é uma galeria padrão ou de imprensa. By the way, você pode ver que cada um deles tem este atributo título bem aqui, que ele foi retirado do nome do arquivo. Então o que eu vou fazer é apenas clicar em criar galeria e, em seguida, inserir galeria. E podemos ver todas as nossas imagens sendo apresentadas aqui. Então, se nós agora apenas salvá-lo e ir para a nossa página, deixe-me apenas atualizar a página e ir para cá. Você pode ver que nós temos nossa galeria. E se clicarmos em qualquer uma das miniaturas, você pode ver que temos um efeito realmente agradável, limpo, limpo e lightbox bem aqui. Lá vamos nós. Mas é claro que poderíamos mudar alguns aspectos da nossa galeria. Então, primeiro talvez, vamos apenas adicionar um pouco de espaço aqui na parte inferior. Ou talvez vamos pegar esse cara, assim. E se clicarmos na nossa galeria, é claro , temos algumas opções para escolher. Estes IDs de imagem estão simplesmente a ser retirados da nossa biblioteca WordPress. Então, se você quiser mudar o posicionamento dessas imagens, você pode brincar com as IDs aqui mesmo. Então nós poderíamos, você poderia simplesmente não mudar. Digamos que esse cara vai ter 61 anos e esse cara vai ter 60. E então a posição mudará dessas imagens. E se você não vê quaisquer opções foram tampa aqui que diz que eles estão sendo não on por padrão. Então, por padrão, temos a opção de link Imagens configurar e adicionar caixa de luz. Então podemos realmente ver que a versão ampliada das imagens. Também podemos alterar a resolução da miniatura. Isso vai mudar todos esses caras, todas essas miniaturas aqui, é claro, dependendo do tamanho de suas imagens. Mas também podemos ir para a opção de layout. E você pode ver que temos algumas opções aqui. Nós temos o flex, que é o padrão que vai tentar fazer tudo igual. Mas poderíamos escolher também a opção de alvenaria. E como você pode ver, começa a parecer diferente. E podemos escolher quantos itens por linha gostaríamos. Então não podíamos ir com dez. Então vamos ter uma galeria parecida com esta. Mas eu vou com dois, talvez. E você pode ver que ele começa a ficar mais bonito. Eu adicionei 1010 imagens. Então, se chegamos a duas linhas, temos cinco imagens em uma coluna neste, neste caso. E se você vai para flex com duas imagens por linha, você pode ver que ele meio que, você sabe, tenta fazer tudo agradável e agradável. E até eu acho que vou usar a alvenaria para isso por enquanto. E vamos talvez deixar, deixe-me apenas mudar as imagens por linha para fazer com que pareça assim. Acho que poderíamos talvez adicionar outra imagem aqui para fazer parecer, parecer legal. Mas não, é só para entender o que está acontecendo. Poderíamos mudar o espaço em torno do valor da imagem. Então, por exemplo, nós poderíamos adicionar como 50 pixels que vai espalhar todas essas imagens mais longe uma da outra. Mas acho que 1010 pixels é final. Agora, a próxima opção aqui são as legendas, que basicamente serão como um título de nossa imagem que você pode sobrepor, que você pode colocar sobre suas imagens. Mas eu acho que isso é algo que poderíamos começar a fazer no próximo vídeo. Por enquanto, vamos manter isso simples. Então, neste vídeo, eu só queria mostrar a vocês como você pode adicionar uma galeria e quais são as melhores práticas de usar de adicionar uma galeria simples? Agora, no próximo vídeo, vamos começar a mexer com nossa galeria um pouco mais. 37. 6.2Adicione as legendas: A próxima opção em nosso módulo de galeria é a opção de legendas. Mas é claro que podemos mostrar as legendas se você quiser. E ele vai estar ligado por padrão. No entanto, não há legendas visíveis aqui. E isso é porque nós não adicionamos nenhuma, não adicionamos as legendas às nossas imagens. Então vamos ver como podemos fazer isso. Primeiro, eu vou, vou voltar para o meu painel de administração. Eu vou para a mídia e clicar em qualquer MA e imagem. E como podem ver aqui à direita, temos esta legenda e campo bem aqui. Então o que vou fazer é pegar esse título. Vou copiar, colar e depois ir para outra imagem. E eu vou, eu vou fazer isso por todas essas, todas essas imagens que são colocadas dentro da nossa galeria. Ok, então todas as minhas imagens têm as legendas. Então agora nós podemos realmente voltar para o nosso, bem, nós podemos voltar para editar na galeria dentro do oxigênio. Então estou de volta no oxigênio. E agora, se nós apenas clicarmos em show legendas, você pode ver que quando estamos pairando sobre nossas imagens, nós podemos realmente ver nossas legendas bem aqui na parte inferior. E este é o comportamento padrão porque então nós, por padrão, chegamos às legendas show somente no mouse é definido como sim. Se o definirmos para saber, as legendas estarão sempre visíveis. Além disso, se você quiser, talvez você possa ocultar as legendas em, em um determinado ponto de interrupção. Então, por exemplo, se você quiser ir, o quê? Se você quiser alterar essa opção, Ocultar legendas abaixo, digamos menos de 992. E então, se você for para esse ponto de interrupção real, você pode ver que as legendas, que as legendas se foram. Eu vou voltar e eu acho que vou dizer que eu nunca quis nunca esconder as legendas, mas eu só quero mostrá-las ao pairar. Então eu vou clicar em “sim”. Então, sempre que eu passar o mouse sobre uma imagem, essa legenda ficará visível. Além disso, se você quiser, você pode alterar a cor da legenda para saber como você pode alterar a cor do texto e você pode alterar a cor do plano de fundo. Então, quando você passa o mouse sobre, você pode ver que essas, essas mudanças são tomadas, entraram em vigor, talvez vamos mudar a transparência desse cara apenas um pouco para fazer parecer, talvez isso seja um pouco, isso é um pouco baixo para Algo como 56. Isto deve ficar bem. Então a última coisa que podemos mudar aqui é quando vamos para a opção de pairar, podemos escolher a, a opacidade da imagem, você pode alterá-la. Então vamos dizer que a opacidade da imagem, como a opacidade da imagem padrão vai ser um pouco menor, digamos que talvez não 05, mas como 09. E então a opacidade da imagem vai ser uma. Então agora, sempre que clicamos em um, você pode ver que é um talvez deixe-me apenas mudar essa imagem de passagem, algo ainda mais baixo. E você pode ver que nós temos esse bom efeito de pairar. Eu posso mudar essa duração de transição para algo como realmente longo. E você pode ver que leva 1 segundo para ir daquela opacidade de 06, 0,06 imagem para 1 a 100, opacidade assim. Mas eu vou mudar para 0, talvez 0 para, e eu vou mudar esse cara de 06285. E então temos esse efeito agradável e bem parecido. Claro, podemos sempre encadear e podemos sempre verificar, verificar no nosso modo de navegação anónima. Então, quando passarmos o mouse sobre esse cara, você pode ver que temos nossa legenda mudando. Nós temos, nós temos essa transição de opacidade acontecendo também. Então, o que nós também poderíamos fazer é mudar o número ou até mesmo todo o visual de nossa galeria quando atingimos um ponto de interrupção diferente. Então nós podemos realmente mudar a capacidade de resposta de nossa galeria também. Porque quando vamos para o nosso modo de navegação anônima, você pode ver que nossa galeria vai mudar por padrão, assim. Então as imagens ficam responsivas. Mas esse todo, eu acho que todo esse layout, embora não pareça, não parece muito bom, não é? Então vamos cuidar da capacidade de resposta no próximo vídeo. 38. 6.3Responsivo: Então, como mencionei no vídeo anterior, podemos fazer nossa galeria bem responsiva. Então, o que eu quero dizer com isso? Então, digamos que neste ponto de interrupção, eu não faço essas imagens para serem colocadas em três colunas. Eu quero que eles sejam colocados, digamos que em duas colunas eu vou mudar imagens entocadas também. Dois assim. Então vamos para o contêiner da página 1120. Acho que ainda parece. Tudo bem. Vamos para menos de 992. Então vamos dizer que talvez este ponto de interrupção, o ponto de quebra 992, eu só quero ver uma imagem por corda. Mas como podem ver, temos um pequeno problema aqui. Essas miniaturas ou não estiveram lá, não sendo espalhadas por toda a janela de exibição aqui. E isso porque definimos nossas miniaturas muito grandes. Mas quando formos para, vamos para todos os dispositivos. Vou pegar a galeria e vamos para a resolução térmica. Eu vou para o máximo. Ok, então nós cuidamos de nossas miniaturas. Agora, e a capacidade de resposta em si? Temos as imagens por linha ajustadas para duas. Mas e se você gostaria de ter, talvez, apenas uma fileira? Quando vamos dizer menos de 992. Como essas imagens começam a parecer pequenas demais para os meus dias, eu gostaria que elas fossem espalhadas por toda a janela de exibição. Então o que eu vou fazer é eu vou apenas definir a largura mínima da imagem para dizer como 450. Então, agora o navegador assumirá que você deseja que sua imagem seja definida com pelo menos 450 pixels de largura. Mas uma vez que começamos a mudar em nossos pontos de pausa, você pode ver que ele ainda parece bom. E então vamos para menos de 992. Você pode ver que desde que queremos que a nossa imagem seria dito, disse ao navegador que queremos que a nossa imagem seja pelo menos para um 150 pixels de largura. Agora está desconsiderando esta imagem por número de linha. Agora é, você sabe, a imagem está espalhada por toda a janela de exibição e isso é o mesmo que aplicar em nossos dispositivos menores como esse. Então, se agora vamos para o nosso navegador, deixe-me apenas clicar em atualizar. E então, quando começamos a ficar cada vez menores e menores, você pode ver que uma vez que atingimos o ponto de interrupção certo, que esse design e esse design estão mudando, o design da nossa, da nossa galeria está mudando, mas de Claro, tudo funciona como deveria funcionar. Temos o efeito da caixa de luz, e lá vamos nós. A galeria está funcionando corretamente. Claro, existem outras maneiras de adicionar galerias ao seu design e vamos dar uma olhada em adicionar uma assim que começarmos a usar um plug-in diferente simplesmente para nossos portfólios. Mas isso vai ser em um dos próximos vídeos. Por enquanto, vamos deixar nossa seção como está. Agora podemos passar para adicionar outra seção, que seria algo mais como uma seção sobre mim ou sobre nós seção. E essa seção será ao mesmo tempo, largura total, mas dividida em duas partes iguais. Então vamos começar a fazer isso a seguir. 39. 7.1Crie uma seção de largura integral: Certo, temos nossa seção de portfólio. Então talvez agora vamos fazer algo como, não como uma seção sobre nós, mas não apenas o simples, como uma imagem e algum texto, algo assim. Vamos fazer uma seção de largura total que será dividida em duas partes iguais. E de um lado, vamos ter um vídeo de largura total. Não, apenas para envolver nossos usuários um pouco mais. E no lado direito vamos adicionar algum texto. Então vamos começar com a adição de uma nova seção. Então eu vou apertar Adicionar e, em seguida, apenas digite uma seção. E temos uma ressecção criada aqui em baixo. Mas como você pode ver, é algum, tem sido, não tem sido, não está se espalhando por toda a nossa página. Queremos fazer esta seção de largura total. Então, com minha seção selecionada, vou para Tamanho e espaçamento avançados. E aqui você pode ver este recipiente seção com opção. Então, se abrirmos, podemos escolher h com largura total ou um costume se quisermos inserir algum, algum valor aqui, mas eu quero fazer largura total e ele vai espalhar esta seção assim. Então, agora, se eu adicionar colunas e eu vou adicionar 50 por 50 colunas, você pode ver que essas colunas também estão se espalhando por toda a nossa página, mas ao mesmo tempo que eles não estão tocando as bordas de nossa seção. E isso é porque nossa seção que nós, a propósito, acho que poderíamos renomeá-la. Então vamos falar sobre nós. Então, sobre nós. Lá vamos nós, porque nossa seção tem algum preenchimento aplicado a ela. Você pode ver que quando passamos o mouse sobre esta seção, como uma aréola roxa, roxa, roxa, roxa aparece. Então, se nos livrarmos dele, você pode ver que agora nossa sanção é realmente ser óleo de feijão. Está tocando todas as bordas. E se formos para o tamanho e o espaçamento, você pode ver que temos 0 na parte superior e na parte inferior. E vamos adicionar 0 à esquerda e 0 à direita. E se você agora apenas pegar nossas colunas, então esta é a nossa coluna esquerda e esta é a nossa coluna direita. Você pode fazer o mesmo para talvez primeiro vamos fazer, vamos fazer o mesmo para a esquerda. E esse vai ser o nosso vídeo. Então eu só vou renomear esse cara, e eu vou chamar esse vídeo e essa div à direita. Vou chamar-lhe apenas texto simples. Lá vamos nós. Então agora nós vamos realmente adicionar o vídeo à esquerda. E nós também somos, bem, nós também gostaríamos de torná-lo completo, largura total. Então vamos começar a fazer isso no próximo vídeo. 40. 7.2Adicione o vídeo: Para adicionar um vídeo, tudo que você precisa fazer é, é claro, primeiro selecionarei meu div, video div. Vou em frente e clicar em Adicionar. E, em seguida, basta começar, começa a digitar o vídeo e basta clicar nele. E o oxigénio vem com um vídeo fictício, fictício, fazer o meu logótipo creme maior. Mas o que é mais importante é que ainda podemos ver algum preenchimento em torno do nosso vídeo. Então, se eu pegar meu div, meu vídeo div, eu vou para o tamanho avançado e espaçamento. E mesmo que possamos ver 0 aqui, você pode ver que quando começamos a adicionar zeros reais, que, bem, esse valor está sendo reaplicado à nossa div. E agora nosso vídeo está sendo colocado como deveria. Claro, não precisamos saber. Bem, não seria uma boa idéia, você sabe, entrar, inserir seu próprio vídeo. Então, se formos para nossa guia principal, deixe-me pegar esse vídeo aqui, essa camada de vídeo. Você pode ver que nós temos esta URL do YouTube ou Vimeo aqui mesmo. Então, se você apenas pegar seu vídeo do YouTube, você pode simplesmente inserir seu link aqui e esse vídeo aparecerá aqui em nossa div. Então, apenas como exemplo, copiei um dos meus vídeos, um dos meus URLs de vídeo do meu canal do YouTube. E eu só vou colar isso. E como você pode ver, está sendo bem colocado bem aqui em nossa, em nossa definição. E, claro, se você quiser, você pode mudar como esta proporção de vídeo se você quiser fazer isso. Mas eu vou usar o padrão 16 por 16 por 9 widescreen padrão. E, claro, se você quiser incorporar como um iframe para de alguma fonte diferente, você poderia fazer isso aqui mesmo. Podes colar o teu código aqui em baixo. Então é assim que você pode, como você pode adicionar o vídeo. Claro, normalmente é jogável. Lá vamos nós. E agora acho que o que poderíamos fazer é talvez adicionar algum texto aqui à direita apenas para dizer aos nossos usuários algumas palavras sobre nós. Então vamos começar a fazer isso no próximo vídeo. 41. 7.3Adicione o texto e corrigir a responsividade: Ok, então vamos adicionar algum texto na nossa div de texto. Então o que vou fazer é adicionar um título. Lá vamos nós. E então eu vou apenas adicionar um texto como esse. Claro que talvez eu pegue emprestado um pouco deste lorem ipsum. Lá vamos nós. Vou descer aqui e colar isso. Talvez umas duas vezes, talvez até mais ômega. Vamos copiar este parágrafo inteiro e colá-lo em preto duas vezes. Isto deve ficar bem. Então o que eu gostaria de fazer agora é que eu gostaria de colocar este título e este texto como no ponto central do meu, do meu div. Mas antes de tudo, primeiro vamos talvez digitar como sobre nós. Isto deve ficar bem. E eu vou mudar a cor deste texto. Então, nossa cor padrão, o mesmo para esse cara. É claro que poderíamos alterar aqui alguns aspectos dos textos. Talvez pudéssemos adicionar algum preenchimento ou margem entre o hadeano e o texto. Mas a coisa mais importante que eu gostaria de fazer aqui é colocar todos esses elementos no centro, verticalmente no centro. E eu acho que eu gostaria de tornar este texto um pouco mais curto, mas mais estreito. Então, o que este texto div selecionou, eu vou apenas ir para o alinhamento vertical do item meio para colocar meu texto no centro. E no que diz respeito a este texto, este tipo aqui, o que eu vou fazer é ir para o tamanho avançado e espaçamento. E eu quero mudar a largura para talvez 75%. Isto deve estar à direita. Havia apenas mais algumas coisas que poderíamos mudar sobre a forma como toda esta seção se comporta. Não apenas em termos de capacidade de resposta, mas também em termos de sua, sua aparência é assim. Então, o que eu quero dizer com isso? Nossas colunas são definidas para ter 50% de largura. Então este vídeo à esquerda é dito ser 50% e esta coluna de texto é definida como 50%. Mas é claro que ainda podemos mudar isso. Por exemplo, se quiséssemos ter esse vídeo maior, talvez pudéssemos fazer algo como 67. E a nossa div de texto vai ser recalculada. Sua largura vai ser recalculada para parecer algo assim. E, claro, se quisermos que o texto seja maior, podemos fazer uns 60. E esse cara vai ser reduzido para 40%. E isso é algo que ela poderia fazer. Eu vou deixar isso com você se você quiser fazer isso assim, você pode fazê-lo. Você poderia, é claro, talvez obter essa div de texto, e nós poderíamos talvez apenas ir para o tamanho e espaçamento. E nós poderíamos talvez aumentar o estofamento cada vez mais ligeiramente, talvez até mais do que isso. Para fazer algo assim, você sabe, você tem total, total flexibilidade, total liberdade em termos de ajustar a aparência de todos esses elementos. Então, se você quiser adicionar um pouco mais de preenchimento, você pode fazer isso em um pouco mais de margem. Você pode fazer isso, alterar o texto, alterar os espaços entre esses elementos. Talvez assim. Você pode fazer isso muito, muito facilmente. Quando começamos a olhar, comece a olhar para esta seção particular, nossa seção de largura total. Quando começamos a verificar a capacidade de resposta, você pode ver que ela não parece tão grande. Quero dizer, poderíamos talvez se você quisesse remover algum texto aqui para parecer mais ou menos assim, mas ainda assim não parece. Está bem. O que eu acho que o que eu gostaria de fazer aqui é que eu gostaria de empilhar esses caras verticalmente. Então eu vou pegar minhas colunas bem aqui. E como você pode ver, temos a opção de colunas de pilha verticalmente, e agora ele está definido para menos de 992. Então, quando vamos para menos de 992, você pode ver que essas colunas estão sendo empilhadas verticalmente e tudo parece bem. Mas eu acho que este efeito em particular é como cheio com enorme, um efeito de seção enorme é bom em como realmente, realmente grande área de trabalho, desktops. Então eu acho que eu gostaria de fazer esses caras verticais, começando com o ponto de interrupção 1120. Então minha coluna selecionada, eu vou mudar essa opção de stat coms verticalmente menor que 992 para o contêiner de página 1120 e abaixo. E se você agora for para esse ponto de ruptura, você pode ver que nosso texto está mudando. E nesse ponto de interrupção, acho que poderíamos mudar a largura de nossas colunas de texto para que possamos ir para Tamanho e espaçamento avançados e apenas defini-lo para 100% para torná-lo apenas um pouco, apenas um pouco maior se você quiser. Como podem ver, temos estas imagens aqui e temos estas, este vídeo bem aqui. Mas e se quiséssemos mudar a ordem dessas colunas? Então, novamente, eu vou pegar as colunas. E você pode ver que nós temos essa opção de ordem de coluna inversa aqui, e por padrão, ela está definida como nunca. Mas se escolhermos Página contêiner 1120 e abaixo, isso vai mudar. Então nós vamos ter esses caras foram colocados no lado B como os maiores desktops. Mas quando vamos para o contêiner de página 1120 e abaixo, recebemos nosso texto. Isso é muito bem separar nosso portfólio e nosso vídeo aqui. Então é assim que você pode criar seções de largura total e como você pode dividir essas seções aqui dentro de oxigênio. Eu acho que para agora nós podemos querer talvez mudar para algo como conhecer nossos serviços em termos de preços. Assim, poderíamos fazer algo como a caixa de preços abaixo do nosso, abaixo da nossa seção de largura total. 42. 8.1 Adicione a primeira caixa de preços: Portanto, se você está criando seu site para você mesmo para anunciar sua empresa, ou você está criando um site para um cliente, você pode querer incluir como uma seção de preços. Então vamos fazer isso agora. Vou começar como de costume adicionando uma seção. Curso. Não é absolutamente necessário, mas é uma boa técnica de produção. Não, mantém as coisas bem organizadas. E vou mudar o nome da minha secção e vou chamá-la de “subindo”. Lá vamos nós. E eu vou adicionar selecionar um título e algum texto. E talvez eu só vá pegar emprestado um pouco deste texto e então apenas colá-lo aqui em baixo. E eu acho que eu quero mudar o centro de alinhamento de texto topográfico, mesmo para meus cabeçalhos ou centro de topografia avançada. E eu vou pegar essa seção de preços e eu quero alinhar tudo ao centro. Então agora que chegamos ao nosso cabeçalho criado, talvez deixe-me apenas digitar algo como checkout. Nossos preços são preços. Lá vamos nós. Então agora podemos talvez adicionar algumas colunas. Eu vou adicionar colunas, e eu vou adicionar três divs dentro dessas colunas. Então você tem 123. E essas colunas vão hospedar nossas caixas de preços. Então talvez vamos adicionar alguma margem entre esses elementos. Eu vou pegar minhas colunas, tamanho avançado e espaçamento, e então ser como 5050 pixels. Isso deve ser bom. Então o que eu quero fazer é simplesmente acrescentar. Então minha primeira caixa de preços aqui dentro da minha primeira, a primeira div. Então o que eu vou fazer é ir para Adicionar e, em seguida, digitar a caixa de entrada de preços. E eu vou apenas clicar nele. E como você pode ver, ele vem com alguns pré-instalados, eu acho que você poderia dizer que pré-instalado o texto. E quando você olha para a esquerda, você tem todos os elementos que controlam todos os aspectos da nossa caixa de preços. Mas se abrirmos totalmente o nosso, este bem, este primeiro div, esta primeira coluna, e, em seguida, a camada de caixa de entrada de preço. Você pode ver que temos a imagem e a parte inferior que são meio independentes da caixa de preços porque eles vêm em camadas separadas e você pode controlá-los separadamente. Mas chegaremos a isso em apenas um segundo. Então, digamos que gostaríamos de oferecer nossos serviços de web design. Então o que eu vou fazer é eu vou mudar este texto para web design. Lá vamos nós. E acho que podemos ir para pequenas empresas. E se você quiser mudar os preços aqui, você pode fazer isso. Você pode apenas digitar o seu preço aqui. Mas quando vamos para o nosso painel de preços, este painel de ferramentas, você pode ver que podemos controlar assim, este preço aqui. Podemos adicionar, na verdade clique dentro. Nós podemos, temos que mudá-lo aqui. Então vamos dizer que queremos começar a partir de, eu não sei, tipo 859. Por que não? E nós podemos deixar o decimal como é QI se você quiser, você pode, você pode mudar o símbolo da moeda e nós podemos mudar o termo. Então eu vou, bem, você pode se livrar dele completamente. Mas vamos digitar como algo PR um site. E talvez vamos mudar isso normalmente três para algo como um, como mil. Talvez. Isso vai olhar, isso vai parecer um pouco melhor. E, claro, aqui em baixo temos nossas características que podemos digitar em algo aqui como design profissional. Então talvez algo como logotipo incluído se você quiser fazer isso. E vamos digitar em hospedagem gratuita por um ano. Lá vamos nós. Então criamos nossa caixa de preços assim. Mas é claro que gostaríamos de mudar alguns aspectos sobre isso. Por exemplo, talvez pudéssemos mudar isto como o tamanho da nossa, da nossa posição, talvez deste tipo aqui. Então eu acho que seria uma boa idéia talvez adicionar como uma caixa de preços de torre de classe. Apenas, você sabe, apenas para ter certeza de que quando alterarmos alguns aspectos da caixa de entrada de um preço, essa mudança será refletida em todas as instâncias de nossos preços. Claro, se é isso que você quer fazer, e vamos supor que você quer fazer isso. Então vamos começar a fazer isso no próximo vídeo. 43. Adição do curso 8.2: Então, com a minha caixa de preços seleccionada, vou subir aqui e escrever o nome da nossa turma. E vai estar subindo. Vamos manter assim. Vamos manter isso, manter simples. Então eu vou adicionar a classe. Então agora temos nossa caixa de preços selecionada. Temos a nossa classe de preços adicionada aqui. Então, talvez agora vamos duplicar nossa caixa de preços. E vamos trazer este tipo para a minha segunda div. E vamos duplicar esse cara de novo. E eu vou mudar esse cara para essa terceira coluna. Então, digamos que queremos fazer como branding para pequenas empresas. E vamos fazer como talvez SEO para pequenas empresas. E é claro que podemos mudar os preços aqui para que possamos fazer, em vez de 859, vamos fazer algo diferente. Vamos fazer tipo, eu não sei, a 99. E vamos digitar por projeto. Lá vamos nós. Vamos dizer que, sim, queremos ter um design profissional, mas talvez vamos mudar o logotipo do professor deixar incluído também. Cartão de visita grátis, talvez algo assim. Cartão de visita para o cartão de visita. E talvez em vez de hospedagem gratuita por um ano, vamos fazer algumas dez como duas revisões incluídas. Lá vamos nós. E para o SEO, talvez mudemos isso normalmente. Talvez façamos tipo 599. Por que não? E para o SCO, vamos fazer normalmente previsto não vamos mudar este preço para, eu não sei, tipo 459. E vamos fazer, vamos fazê-lo por site. E talvez mudemos esses caras para curtir a primeira página. Garantido. Talvez como o Google e o Bing. E para o terceiro, o que poderíamos adicionar aqui para o SEO, me ajude aqui. Vamos fazer consultas grátis. Isso vai ser um pouco genérico, mas vamos continuar assim. Não é, não é o objetivo principal deste vídeo, então tudo bem. Temos todos os nossos, todos os nossos preços incluídos aqui. Então vamos para a nossa caixa de preços. Vamos nos certificar de que nossa classe de preços está realmente selecionada. Vou para o título e duas tipografias intituladas topografia. E se você quiser, você pode mudar a família de fontes aqui. Podemos ir, podemos ir com o nosso principal e fonte aqui. E é claro que poderíamos fazer isso apenas um grande, um pouco menor para algo como 38. Então poderíamos fazer o mesmo com o subtítulo. Vamos manter a fonte como está. Mas vamos torná-lo menor. Algo como 18. Lá vamos nós. Isso deve ficar bem, talvez agora vamos voltar e verificar o preço, a topografia do nosso preço. E como você pode ver, nós temos um monte de, um monte de aspectos bem aqui. Então vamos com quatro horas, ir com quantidade principal, podemos mudar este texto aqui. Vamos com talvez um pouco maior, tipo 58, eu acho. Talvez vamos mudar o valor da moeda para algo, mas menor para algo como 22. Eu estou fazendo. Eu só estou para que você possa ver o que, saber quais possibilidades, quais opções você tem aqui quando você está fazendo essas, essas caixas de preços. E como você pode ver, nós realmente podemos tirar, tirar proveito das nossas, das nossas aulas aqui mesmo porque estamos mudando tudo de uma só vez. Você também pode alterar os recursos, topografia, podemos torná-lo menor ou maior se você quiser. Isso é totalmente, totalmente com você. E talvez tenhamos mudado como o texto em nosso fundo para algo como nos contatar. Contacte-nos. Lá vamos nós. O mesmo aqui. E o mesmo aqui. Você também pode adicionar uma classe ao nosso botão. Alguém se foi e apenas digite o Prêmio bt, n. Lá vamos nós. E agora, se começarmos a mudar a cor do nosso botão, digamos à nossa cor marrom. E é claro que precisamos adicionar a mesma classe a todos os nossos botões. Prêmio btn, e o último, prêmio btn. Em seguida, se você quiser mudar, como a cor do botão pairar para talvez esta cor mais escura. Só para ver o que parece. Você pode ver que na verdade está afetando todos os nossos botões. Outro aspecto importante que você precisa tomar nota. Você não tem apenas um botão aqui dentro da caixa de preços, mas também uma imagem. Então, se você quiser, você pode adicionar uma imagem em cima do seu, do seu cabeçalho nesta caixa de preços. Mas vamos dar uma olhada nisso no próximo vídeo. 44. 8.3Adicione as imagens às caixas às preço: Então, dentro dela, a camada da caixa de preços, a imagem na parte inferior. Então, dentro da camada de caixa de preços, temos essa camada de imagem adicionada também. Então, por padrão, se apenas selecionarmos nossa camada, você pode ver que temos isso como um URL fictício bem aqui. Que é, bem, isso é apenas puxar em uma imagem falsa deste suporte lugar. É um site. E se formos para a nossa caixa de preços e, em seguida, gráfico aqui, você pode ver que chegamos a isso incluir opções de imagem. Então, se clicarmos em Sim, como algo está mudando aqui. Mas como esta é uma imagem falsa, não podemos vê-la agora. Mas se nós salvá-lo e depois ir para o nosso site, lá vamos nós. Temos nossa imagem incluída. E, claro, se mudarmos essa imagem para algo, outra coisa, eu só vou rapidamente apenas pegar talvez este, este logotipo. Vá para selecionado, Salve-o. Volte ao nosso site, atualize a página, e você pode ver que temos nossa imagem incluída. Então isso é apenas algo que você poderia fazer se você quiser fazer assim. Se você quiser adicionar outra imagem aqui, outra imagem aqui, não pode fazer isso aqui dentro de suas caixas de preços e preços. Mas esta é apenas uma opção. Não é, não é necessário se você não quiser, se você não quer fazê-lo. Só para lembrar, para excluir agora essa imagem de seus erros de preços porque aqui você não pode realmente, como você pode ver, você não pode realmente remover essa imagem. Você pode remover o botão. Mas se você quiser remover a imagem, você tem que ir para a caixa de preços gráfico e basta clicar em Não. Em seguida, salve e vá para o nosso site. E lá vamos nós, essa imagem, essa imagem desapareceu. Assim que tivermos todos esses caras ordenados, o que poderíamos fazer é cuidar da capacidade de resposta, mas talvez, apenas talvez adicionar algo como uma pequena borda rápida à nossa caixa de preços. Então, da aba Avançado, eu vou para Borders. Vou pegar nossa cor, talvez esse marrom escuro, mas vou mudar essa transparência. E eu quero fazer a largura. Eu sou um. E quero que esta fronteira seja sólida. E isso vai me dar apenas um, você sabe, um pouco mais de definição. Sei que não estamos seguindo nenhum projeto específico, específico aqui. É mais sobre aprender a usar todas essas ferramentas para criar seu próprio site. Mas, sabe, eu só acho que isso só dá aos nossos preços e caixas um pouco mais, um pouco mais de definição. E talvez pudéssemos pegar nossa seção. Deixe-me ver onde estamos aqui, o preço, e talvez possamos adicionar como um fundo muito, muito gentil, como se muito, muito claro cor cinza, algo como F9, F9, F9. E se o salvarmos, vá em frente ao nosso site principal, atualize isso. Temos algo como uma bela definição aqui em baixo. Claro que é só uma opção. Você não tem que fazer isso, mas você sabe, você tem que saber como fazer, como fazê-lo. Então agora que temos nossos preços criados, talvez vamos passar a criar alguns depoimentos. Digamos que queremos nos gabar, gabar dos resultados que obtivemos e o que nossas linhas de hábitos têm a dizer sobre nossos serviços. 45. 8.4Adicione os depoimentos: Vou começar a criar meus depoimentos como qualquer outro mini-projeto dentro deste projeto. Então eu vou para Adicionar e adicionar uma seção que eu vou chamar de depoimentos. Lá vamos nós. E agora podemos começar a adicionar nossos depoimentos. Então vamos descobrir o que um módulo de testemunho pode fazer aqui. Então eu vou apenas adicionar um módulo de depoimento. E como podem ver, temos algum conteúdo fictício bem aqui. Agora, um bom testemunho, eu acho que sempre vem com uma imagem porque queremos tornar nosso testemunho o mais plausível possível. Então eu posso ir para um lado muito interessante que é chamado essa pessoa não existe..com. E este é um projeto, um projeto de IA que apenas, sempre que você atualiza a página, gera uma foto aleatória de alguém, bem, de uma pessoa que não existe. E então, mas no nosso caso, será, será, será uma grande fonte de fotos de retratos de pessoas que realmente não existem. E todas essas fotos foram geradas por inteligência artificial, que é um pouco assustador, mas vai funcionar muito bem em nosso, em nosso cenário. Eu só vou copiar três dessas imagens e depois usá-las para nossos depoimentos. Certo. Então eu tenho minhas imagens criadas, Will baixado. Vou ao meu depoimento. Vou me certificar de que está selecionado e vou para Imagem e depois procurar. E eu vou selecionar, bem, talvez eu vou selecionar todos os meus arquivos e enviá-los. Então essas são todas essas imagens. Eu só vou selecioná-los e abri-los. E eu vou usar esta primeira imagem. Eu só vou selecioná-lo, guardá-lo. E vamos ver como fica na frente. Então este é o nosso, este é o nosso primeiro testemunho. Deixe-me voltar. Assim que eu atualizar minha página, você pode ver que esse cara está bem aqui. Então acho que o que poderíamos fazer de novo é talvez adicionar como clonador esse cara acabar, e então talvez mudar algumas coisas sobre isso. Mas primeiro, como sempre, vou adicionar uma aula de depoimento a isso. Vou digitar este depoimento. Lá vamos nós. Então esta é a nossa turma. E eu só vou duplicar uma vez e depois duas vezes. Claro que tudo depende de como você quer como você quer apresentar seus depoimentos por enquanto, vamos apenas mantê-lo assim, porque eu só quero mudar rapidamente alguns aspectos sobre isso. Então isso vai, talvez eu vá com esta imagem e depois a partida de 30. Então sobrancelhas. E lá vamos nós. Temos todos, todos os nossos testemunhos. Testemunhos vão basicamente pronto. Então, agora, já que temos a classe selecionada. Poderíamos ir ao layout, e vamos ver o que temos aqui. Temos o layout horizontal e o layout vertical. Então, como você pode ver, ele rapidamente, muda rapidamente de horizontal para vertical. Você poderia, claro, alinhar o conteúdo e nós poderíamos até mesmo controlar como toda esta seção, esses depoimentos vão se parecer em nossos dispositivos móveis e móveis. E é claro que temos a tipografia. Então, se você quiser alterar o tamanho da fonte do depoimento em si, você pode fazer isso. Poderíamos alterar o tamanho da fonte do autor. Talvez vamos fazer isso um pouco maior para algo como 20. E as informações do autor também. Poderíamos fazer algo, algo assim. E, claro, eu acho que é uma boa idéia talvez em alguma margem entre esses elementos. Então eu vou em frente e escolher como margem, topo e baixo, como 25. E há um aspecto muito interessante e muito importante de criar elementos como este. Quero dizer, isso é apenas um exemplo, mas você pode usar essa técnica em qualquer lugar do seu lado. Agora, esses depoimentos se parecem com isso. Eles estão sendo colocados verticalmente assim. Mas diga que você gostaria de mantê-los ou torná-los alinhados horizontalmente. Então, em vez de apenas agarrar, adicionar algumas colunas e depois colocar em todos os depoimentos dentro delas, que é claro que você poderia fazer. Você poderia pegar sua seção de depoimentos. E nessa seção, você poderia, você poderia escolher esse layout de elemento filho. E por padrão, todos esses elementos filhos, então todos esses devs depoimentos estão sendo empilhados verticalmente. Mas se escolhermos horizontalmente, você pode ver que esses caras estão sendo bem colocados um ao lado do outro. E, claro, se pegarmos apenas um depoimento, certificarmos de que nosso copo é selecionado, vamos para o tamanho e o espaçamento, que talvez pudéssemos apertar aplicar tudo apenas para fazer, apenas para fazer esses caras parecerem um pouco, um pouco de forma diferente. Mas, claro, se isso for demais para você, poderíamos ir até talvez oito, aplicar a todos. Você pode brincar com ele. Claro que esqueci de adicionar talvez assim, como alguns, algum título, mas isso vai ser super, super simples, super rápido. Podemos trazer esse cara para o mesmo, talvez não para o título, mas para o texto. Então eu vou apenas duplicar isso vai para baixo aqui. Mas como você pode ver, uma vez que nossa pilha de ações elementos filho horizontalmente opção é definida globalmente, quero dizer globalmente em nossa, em nossa seção, você pode ver que todos esses elementos estão sendo empilhados como horizontalmente e que Não é realmente o que queremos. Então, nesse caso, o que poderíamos fazer é checar esse cara para fazer, para fazer esses elementos se parecerem com isso. Talvez eu só vá pegar meu depoimento. E o que eu vou fazer é simplesmente clicar nessas três barras pequenas e escolher div rápido. Lá vamos nós e depois colocamos todos esses depoimentos dentro. E novamente, o que poderíamos fazer é simplesmente empilhar elementos filho horizontalmente para mantê-los assim. E, claro, eu gostaria de alinhar tudo ao centro. Um depoimento do Woodman selecionado. Eu vou escolher minha primeira opção, elementos filho preso verticalmente e apenas escolher alinhamento horizontal, centro. E acho que poderíamos talvez adicionar algum espaço aqui em baixo. E talvez que tipo de cabeçalho, o que nossos clientes dizem. Então vamos e criamos nossos depoimentos. Então, é claro, esta é apenas uma maneira de criá-lo. Mas e se quiséssemos fazer talvez como um controle deslizante de nossos depoimentos, só porque queremos fazer isso assim. Claro que poderíamos fazer isso. E isso é realmente o que vamos fazer no próximo vídeo. 46. 8.5coloque os depoimentos em um deslizante: Então, digamos que queremos tornar nossos depoimentos um pouco mais interessantes, um pouco mais interativos, por assim dizer. Então vamos colocar nossos depoimentos em um controle deslizante. Então o que eu vou fazer é eu vou adicionar um controle deslizante. Lá vamos nós. E eu vou colocá-lo sob MyText em algum lugar aqui. E talvez eu vá adicionar algum espaçamento. E vamos como 50 pixels de margem. Isto deve ficar bem. E quando nós totalizamos essa camada aberta, você pode ver que nós temos o slide 123 e nós realmente temos três depoimentos, então isso é bom. Então o que podemos fazer é simplesmente pegar um testemunho, colocá-lo dentro desta camada de slide, fazer o mesmo com o segundo, e fazer o mesmo com o terceiro. E AF basta clicar em qualquer uma dessas setas. Você pode ver que temos nossos depoimentos deslizando bem. Não precisaremos mais desse div. Mas talvez pudéssemos mudar alguns aspectos de nossos slides, de nossos depoimentos para que eles fiquem bem dentro de nosso slide. Assim, com o meu slide, seria o meu testemunho selecionado e minha classe de testemunho ativo. Vou ao layout. E eu vou mudar o layout para vertical. E eu vou mudar o alinhamento de conteúdo para o centro. E agora se pudéssemos apenas começar a clicar em nosso controle deslizante, você pode ver que ele está mudando muito bem. Claro, nós temos todos ainda estilo nosso, nosso testemunho. Talvez eu diminua essa velocidade de animação. Eu vou, talvez você removeu o estofamento. Talvez não vamos sobrepor pontos, mas talvez vamos apenas mudar alguns aspectos de configuração. Talvez vamos esconder os pontos completamente. Vamos torná-lo auto-play e infinito. E 3 mil milissegundos, acho que está tudo bem. Vamos ver como fica no fondant. Só vou refrescar esse cara. E lá vamos nós, pegamos nosso controle deslizante. E é ser, é, ele joga automaticamente porque o que dissemos que fez porque foi isso que nós o definimos para fazer. E lá vamos nós com nosso controle deslizante, com nossos depoimentos. Então, basicamente, você pode colocar qualquer conteúdo que quiser dentro de horas, dentro de seu controle deslizante aqui, dentro, dentro de oxigênio, certo? Então já temos nossa seção de depoimentos. Talvez agora vamos começar a criar nosso rodapé porque eu acho que é hora. Passamos para a criação de conteúdo mais dinâmico, como nosso portfólio, talvez nosso blog, coisas assim, um único modelo de blog. Nós ainda temos muito trabalho a fazer, mas eu só quero que você aprenda completamente como usar este realmente, realmente incrível pedaço de software para criar páginas, bem sites para você e para seus clientes. 47. 9.1Coloque o footer no modelo: Agora, um rodapé é definitivamente uma parte do nosso modelo principal. Então temos o nosso cabeçalho. Ou seja, há uma parte de nossos modelos, então o cabeçalho permanece o mesmo em cada página. Mas o mesmo vale para o rodapé. Então eu vou para o meu administrador e eu vou para modelos de oxigênio. E eu vou adicioná-lo o modelo de manutenção com oxigênio. Então eu estou dentro do meu modelo e agora estou pronto para começar a construir nosso rodapé. Mas eu decidi que talvez desta vez vamos fazer um pouco diferente. Quero dizer, em vez de apenas construir tudo do zero, vamos aprender outro recurso aqui dentro do oxigênio. Vamos apenas adicionar S1 das seções predefinidas que vêm com oxigênio. Então o que eu vou fazer é ir para, e então o que eu vou fazer é eu vou, do meu, do meu painel de ferramentas, eu vou escolher Biblioteca. E aqui em baixo temos conjuntos desenhados. E aqui você pode ver que temos um monte de design e conjuntos predefinidos. E se escolhermos qualquer um deles, talvez vamos com esse período alto e vejamos o que é isso. Aqui dentro. Temos sanções e elementos. E aqui temos rodapés. E digamos que eu gostaria de ter, talvez este grande complexo para como rodapé grande leve ou talvez apenas um simples Fourier. Vamos com este grande complexo para, vamos ver como ele se parece. Eu só vou clicar nele. E como você pode ver isso como sendo bem preenchido com nossos menus, com nossas fontes, com algum texto. Até temos um fundo aqui em baixo. Temos esta imagem que talvez possamos mudar para a nossa imagem. Mas é claro, bem, seria uma boa ideia semear. Então eu vou para efeitos avançados e depois vou para Filter. E eu vou escolher Inverter como fizemos antes. Mas é claro, se você quiser, você poderia apenas adicionar sua própria imagem aqui em baixo. Então este seria um dos nossos Fuller. Claro, poderíamos brincar com todos esses conjuntos de projetos. Poderíamos escolher alguns canais. Vamos ver uma página dois, o que quer que isso signifique, vamos encontrar alguns rodapés e não muitos. Vamos com outra coisa. Talvez vamos com o primeiro. Vamos ver o que oferece. Novamente, rodapés, há muitos destes aqui. Hum, então talvez vamos com o logotipo do rodapé do cara centrado. O fato de que este rodapé é pré-projetado não significa que não podemos mudar nada sobre ele. Então, com esta seção de centros de logotipo do rodapé selecionada, eu vou para o fundo avançado e vou me livrar dessa cor. E eu vou adicionar uma de nossas cores. Lá vamos nós. E chegamos a estes ícones, ícones sociais aqui em baixo. E eles também têm essa cor azul hippie atômica adicionada a ele. Se quiser deixar assim, pode deixar assim. Vou mudá-los. Faça uma cor azul diferente como esta. Por que não? E em pairar, talvez eu vá pegar essa cor, mas sobre, mas ao pairar, eu só quero torná-la um pouco mais escura. Simplesmente assim. Então, sempre que passarmos o mouse em nosso ícone que eu posso mudar. E, claro, cada um desses ícones pode levar às nossas redes sociais. Temos estes ícones bem aqui. Então, por padrão, eles apenas Gamow como facebook.com, Instagram, Twitter. Se você quiser, queria adicionar seu perfil do LinkedIn, você pode adicionar seu perfil do LinkedIn aqui mesmo. Só vou gravar o símbolo da libra. E como você pode ver que esse ícone do LinkedIn está sendo adicionado mesmo totalmente RSS e YouTube. Este módulo inteiro, a propósito, é o módulo de ícones sociais que você pode adicionar facilmente do nosso painel Ferramentas. Esse cara aqui, os ícones sociais. E, claro, você tem diferentes elementos e diferentes opções de estilo prontos e esperando por nós. Mas isso é apenas, você sabe, eu acho que isso é apenas uma maneira de adicionar rapidamente alguns elementos. Claro, o mesmo vale para o cabeçalho. Talvez eu só vá me livrar de alguns desses ícones. Talvez esse cara e esse cara possamos deixar e esses ícones como eles são. Então o mesmo vale para, para cabeçalhos. Então vamos dizer que eu vou para Adicionar e cabeçalhos. E deixe-me escolher um desses, um dos cabeçalhos. Vamos continuar com isso. 1 de maio ser, é claro, ele deve ser colocado não aqui, definitivamente não aqui. Então vamos nos livrar, vamos movê-lo aqui. E como você pode ver, nós temos nosso rodapé, nós temos nosso cabeçalho adicionado do nosso conjunto de design em apenas uma questão de segundos. Então, se você não quer começar do zero, se você só quer ter algo pré-projetado, pré-instalado, você pode definitivamente fazer isso aqui dentro do oxigênio. Mas é claro, eu não quero esse cara aqui embaixo. Quero que seja colocado aqui. Vou mudar esta imagem novamente para o nosso design, genoma bem desenhado. O que talvez vamos nos livrar dessa imagem. Eu só vou voltar ao meu básico e eu vou apenas encontrar texto. E lá vamos nós. Esse cara aqui. E eu vou me livrar dessa imagem. E eu só vou digitar enquanto projetar Lao design, eu vou mudar a família de fontes para Bree Serif. Altere a cor do texto. Lá vamos nós, e aumentar o tamanho da fonte para algo assim. Mas como você pode ver em nosso painel aqui no painel Camadas, esse link, esse texto fica dentro de um wrapper de link. Então, este wrapper de link é na verdade uma maneira de adicionar links para o seu, para seus elementos. E então vamos dizer que eu gostaria, eu gostaria deste logotipo, este link de texto para o meu mapa principal do site, bem, página inicial mímica. Então eu poderia apenas digitar o URL aqui da minha primeira página. E sempre que alguém clicar neste texto, eles serão direcionados para a nossa primeira página. Então vamos ver como nosso rodapé se comporta. Em dispositivos menores. Deve se comportar corretamente. Vamos descer menos de 768. A propósito, se você quiser mudar este menu também, podemos dizer que ele se torne como responsivo uma vez que alcançamos, alcançamos um certo ponto de interrupção. Digamos que quando chegamos a menos de 480, queríamos ser como um menu móvel. Então eu vou para móvel responsivo. E eu vou escolher Menu móvel, alternar abaixo de 480. E esse menu vai virar para um menu móvel nos dispositivos mais pequenos, em smartphones. Então vai ficar assim. Nos dispositivos maiores e nos dispositivos mais pequenos vai se parecer com isso. Se você quiser, você pode criar seu próprio rodapé. E se você der uma olhada na estrutura aqui, você pode vê-la. São apenas colunas, assim como adicionamos colunas antes. E temos três div. Então nosso rodapé está sendo dividido em três colunas. E dentro temos basicamente como um menu, alguns pedaços de texto, alguns links, ícones sociais. Você poderia adicionar mais pedaços de texto. Isso é, não, isso seria totalmente, totalmente com você. Mas o que falta a este rodapé é que não gostava de um pequeno copyright, informação de direitos autorais que poderíamos colocar aqui embaixo, talvez abaixo dos ícones sociais. Então vamos fazer isso no próximo vídeo. 48. 9.2Adicione a informação de direitos: Então agora vamos adicionar o símbolo de direitos autorais aqui abaixo de nossos ícones sociais. Mas não vamos torná-lo apenas como texto simples com algumas palavras nele. Mas vamos ver, vamos torná-lo, vamos torná-lo dinâmico e vamos torná-lo uma prova futura. Quero dizer, é uma boa idéia adicionar um trecho de código extremamente, extremamente minúsculo apenas para, você sabe, apenas para ter certeza de que os dados que a data dos direitos autorais é sempre, estão sempre atualizados. Então você não precisa voltar a este design após um ano, dois ou três anos para apenas atualizar o código de copyright. Então, como podemos fazer isso aqui dentro do oxigênio? Primeiro de tudo, eu estou indo apenas para o código de copyright do Google PHP. E eu vou para este primeiro resultado de truques CSS. Agora, por que eu procurei o código de copyright do PHP? Se você quiser torná-lo dinâmico, se você quiser, se você quiser que este código para pegar os dados de nosso banco de dados, de, de nosso sistema. Vamos colocar assim. Você tem que torná-lo dinâmico. E para o conteúdo dinâmico vai, você precisa ir com PHP. Então o que vou fazer é copiar este pequeno trecho aqui. Vou voltar ao oxigénio. E aqui, na minha última coluna, vou apenas adicionar, e vou digitar um bloco de código. Agora, você não precisa ser um programador, você não precisa ser um programador. Você não precisa saber basicamente nada sobre codificação para fazer isso funcionar. Mas você não pode simplesmente pegá-los. Guia PHP e HTML. Remova tudo, não precisamos dele, e basta colar o código de volta. Agora aqui, se você quiser deixar como 2008, você pode, mas talvez eu só vá mudar para 2018. Esta é a nossa data de início. E eu só vou apertar Aplicar código. Eu vou derrubar o editor e você não pode ver nada aqui porque nós temos que mudar algumas coisas e como nós começamos a estilizá-lo? Então eu vou para a tipografia e eu vou mudar a cor para as minhas cores padrão. E lá vamos nós. Temos nossos direitos autorais, símbolo de direitos autorais aqui embaixo. Claro, se quiser, pode mudar. Talvez digamos que temos esse símbolo de cópia e vamos digitar design. Vamos aplicar o código. E você pode ver que mudanças instantaneamente sendo refletidas aqui em baixo. E novamente, nós poderíamos talvez apenas pegar nossas configurações de topografia pode ser alterado o tamanho da fonte para algo como 12. E talvez adicionar algum espaço em alguma margem para o topo. E talvez mudemos a cor desse cara aqui. Vamos, na verdade, este é este atômico, como você pode ver, este é de, do nosso, deste conjunto de design. Então vamos deixar isso um pouco, um pouco mais escuro. Então topografia, nossas cores. Pode ser uma dessas cores, eu acho. Acho que está tudo bem, então agora, quando salvarmos esse cara e formos para o modelo principal, você pode ver que temos nosso código de direitos autorais aqui embaixo. E como você pode ver, ele diz, bem, é 2020, então ele está mostrando a data certa e quando completar 21 vem, esta data vai mudar automaticamente porque nós adicionamos m. Nós não sabíamos como apenas escrever os números. Adicionamos o código, um trecho muito simples. E, você sabe, você pode realmente esquecer esses caras. Você pode apenas ter certeza de que este dado é, esta data vai ser sempre não há atualização. Então lá vamos nós. Temos o nosso simples rodapé. Claro, se você quiser mudá-lo, você sempre pode alterá-lo. Você pode escolher um conjunto de designer, você pode, você pode enlouquecer com este rodapé. Mas o que eu quero focar agora é outra parte do nosso site. Então agora podemos começar a criar nosso blog. Porque digamos que queremos compartilhar alguns pensamentos interessantes com o nosso, com nossos usuários, com nossos visitantes, ou talvez seu cliente seja um blogueiro. Então, é uma boa idéia criar um, para aprender a criar uma bolha usando oxigênio. 49. Adicione as postagens do blog: Nos próximos vídeos, vamos criar nossa página de blog e um único modelo de postagem de blog. E este será um ótimo exercício para nós antes de começarmos a criar nosso portfólio, porque acabaremos aprendendo a usar conteúdo dinâmico aqui dentro de oxigênio e WordPress. Mas antes de avançarmos para isso, precisamos ter algum conteúdo, algum conteúdo de bloco em nossa página. Então eu estou ouvindo esse diretório de plugins. E o que eu vou fazer é eu vou apenas adicionar um novo plugin que é chamado de imprensa Faker. E este plugin simplesmente nos permitirá adicionar algum conteúdo fictício para o nosso, para o nosso lado. Então eu vou apenas instalá-lo e ativá-lo. E uma vez instalado, vou para a imprensa falsa. Então eu vou para Configurações. E uma vez instalado, vou para a imprensa falsa, e depois vou para os postes. E basicamente a única coisa que eu vou fazer aqui é eu vou apenas digitar, eu vou apenas digitar estes, portanto, três, então o número mínimo será três, máximo 12 de posts. E eu vou apenas clicar em Gerar. E uma vez feito, vou para os postos. E você pode ver que temos 12345. E, claro, o nosso sexto. Como a primeira postagem de blog que vem por padrão com WordPress. Mas o problema com isso é que, bem, esses posts, se acabamos de adicioná-los e adicioná-los, você pode ver que eles não vêm com uma imagem em destaque. Não há nenhuma imagem em destaque, e seria uma boa idéia ter um apenas para o nosso blog post, apenas para que a nossa página de blog realmente parece um pouco mais interessante, eu acho. Uma vez que começamos a adicionar, uma vez que você começa a jogar com nossos diferentes e diferentes designs de nossa página de blog, é uma boa idéia ter algumas imagens para ver, para realmente ver como esses desenhos se parecem. Além disso, como você pode ver aqui, nós só temos uma categoria que é chamada sem categoria. Mas o que queremos fazer é que gostaríamos de adicionar algumas categorias como k, digamos design. E eu só vou editar talvez web design, web design e talvez branding. Deixe-me apenas clicar e digitar em branding. E talvez, eu não sei, vamos com, vamos com design de impressão. E eu vou adicionar uma nova categoria. E eu vou atualizar. E, claro, o que temos que fazer agora é apenas ir em frente e pegar todos os nossos posts e apenas adicionar a mudança todas essas categorias e anúncios em destaque imagens. Então, a fim de adicionar uma imagem em destaque, ou precisamos fazer é apenas ir para o nosso post, editar o post. Acho que vou afligir os sem categoria. Vou escolher basicamente qualquer imagem que tenhamos aqui. Isto deve ser, isto deve estar tudo bem. Então, uma vez feito isso, vou apenas clicar em Atualizar. E então eu vou fazer o mesmo para todos os postos restantes. Eu só vou adicionar categorias diferentes ao meu post, e eu vou adicionar essas imagens em destaque, certo? Então temos os nossos gabaritos, temos as nossas categorias. Eu adicionei ao Ivory, as imagens em destaque, e eu acho que estamos prontos para começar a criar nossa página de blog. 50. 10.2Crie o modelo do blog: Ok, nós temos nossas postagens no blog, então agora é hora de adicionar realmente nossas postagens à nossa página do blog. Então o que temos que fazer é realmente nós temos que criar um modelo para a nossa página de índice de postagem do blog. Então o que eu vou fazer é ir para oxigênio e depois modelos. E então eu vou adicionar um novo modelo. Vou acrescentar isto. Vou nomear isso como postagens de blog. Lá vamos nós. E nós poderíamos herdar o design do nosso, do nosso modelo do nosso modelo principal dos nossos homens se você quisesse. Mas também podemos saber apenas sempre criar tudo a partir do zero. Então vamos dizer que nós só queremos ter o mesmo como o nosso cabeçalho de sobreposição em nossa página inicial, para que possamos deixá-lo assim. E na nossa página de postagem do blog poderíamos ter um cabeçalho totalmente diferente e um rodapé totalmente diferente. Então não vamos herdar esse modelo principal. Vamos deixar esse efeito de sobreposição em nossa casa apenas para quando você, quando você apenas visualiza esse design em seus computadores, você pode ver diferentes aspectos desse design. Então eu vou deixar como nenhum. E então eu vou para outro e, em seguida, escolher blogposts índice. Porque se você, se você quiser aplicar este modelo a uma página específica, específica, e nós temos que escolher isso. Onde é que este modelo se aplica? E a partir desta outra aba, temos que escolher a postagem do blog, esse índice. E então eu só vou publicar. E quando vamos para a nossa página de postagem do blog, você pode ver que nós temos o nosso post, mas eles não são sido estilizado de qualquer forma. Isso não parece muito legal, não é? E, claro, não podemos ver nenhum cabeçalho aqui porque não herdamos nosso design de cabeçalho do nosso modelo principal. E podemos ver nosso rodapé. Vamos criar um design completamente, completamente diferente para este cartaz de bloco, página de índice e para o post de blog singular. Porque digamos que você tem que criar uma postagem de blog para um blog, um blog para o seu cliente. E vamos fazer isso completamente do zero. Então, por enquanto, adicionamos algum conteúdo fictício. Adicionamos um modelo, modelo índice de postagem de blog. E agora temos que estilizar esse modelo. Então vamos começar a fazer isso no próximo vídeo. 51. 10.3Adicione o cabeçalho e um rodapé à nossa página de posts: Ok, nós temos nossos posts, nós temos nosso modelo. Mas como você pode ver, nosso modelo está vazio. Não temos nada aqui. E isso é porque decidimos não herdar e finalizar do nosso modelo principal. E quando vamos para a nossa página do blog, você pode ver que os blogs, as postagens do blog estão sendo exibidos. Mas, na verdade, não parece muito bem que não é isso que queremos. Nós nem sequer temos um cabeçalho ou nós não temos um rodapé e bem, nós basicamente não temos estilos aqui, então vamos corrigir isso agora. Então eu vou começar com a adição de um cabeçalho, um rodapé, e talvez alguns, alguma seção com o título e alguns textos. Mas em vez de apenas construir qualquer coisa de tudo do zero, vamos adicionar horas. Bem, um dos designers, então eu vou para Adicionar conjuntos de design de biblioteca. E acho que vou usar algo muito simples. Então eu vou com essa seção atômica e então eu vou finalmente me dirigir. Talvez eu vá com cabeçalhos simples centrado. Então este será o nosso cabeçalho. E então eu vou adicionar um cocô de pé, que talvez seja um rodapé centrado assim. Claro que podemos mudar nosso logotipo. Então eu só vou pegar essa imagem, como você pode ver aqui. Eu vou para Procurar, pegar nosso logotipo, e selecionar o mesmo para este cara, procurar. E lá vamos nós. Nós temos nosso, nós temos nossos logotipos criados. E este menu, eu acredito, é completo o, bem, é o mesmo. Mas este tem este tem algumas, algumas suspensões. Mas eu acho que nós podemos estilizá-los muito, muito semelhante. Então eu vou pegar este menu e eu vou apenas mudar a cor do meu texto para nossas cores padrão. E eu vou pegar o menu no fundo. E eu vou fazer o mesmo. Mas talvez eu só vou mudar o tamanho da fonte sempre tão ligeiramente para algo como 12. Isto deve ficar bem. E talvez vamos mudar a altura deste logotipo para uns 20. E por uma hora ícones sociais, vamos mudar o tamanho para talvez 18 ou talvez para Wendy. E novamente, vamos mudar a cor de fundo para talvez essa cor mais escura. Lá vamos nós. E em um pairar, vamos mudar a cor para a nossa cor marrom. Então, quando passamos o mouse sobre nossos ícones, eles se parecem com isso. Agora você poderia talvez corrigir alguns problemas de espaçamento aqui. Se pegarmos essa imagem, vamos ver se você realmente tem algum espaçamento aqui. Você tem 12 pixels na parte inferior. Então vamos fazer talvez uns seis. E vamos ver o nosso menu. Se tivermos algum espaçamento aqui. Vamos agarrá-lo assim. E vamos para 0. E quer saber? Vamos deixar assim. Vamos manter isso simples. Realmente é, realmente não é sobre criar o melhor cabeçalho e rodapé do mundo para este design, queremos adicionar uma página de blog. Então agora acho que poderíamos adicionar uma seção. E dentro dessa seção, deixe-me colocá-lo entre nosso cabeçalho e nosso rodapé. Então nessa seção, vou adicionar um título. Vou adicionar um texto. Vamos digitar algo como Bem-vindo ao nosso blog. E aqui eu vou apenas copiar este pedaço de texto e depois colá-lo mais uma vez porque isso deve ficar bem. E eu quero centrar tudo dentro de mim mesma seção. Mas eu também vou pegar este caminho e alinhá-lo ao centro. mesmo aqui, e a linha do cara para o centro. Então o próximo passo seria adicionar outra seção. Então eu iria e adicionaria uma seção. Vamos manter tudo bem organizado. E aqui, nós vamos realmente adicionar nossas, nossas postagens de blog. Nós vamos adicionar um módulo que vai nos permitir adicionar uma postagem de blog. Então, nosso como a parte principal do nosso modelo está terminado. Fizemos isso muito rápido. Então agora podemos realmente passar para adicionar nossa postagem de blog para preencher nossa página com blogs, com barcos de bloco. Porque quando vamos para o nosso, nossa página do blog e eu vou apenas atualizar isso. Você pode ver que você está realmente começando a construir nossa página de blog. Então vamos adicionar nossas postagens no próximo vídeo. 52. 10.4Adicione suas posts: Aqui no oxigênio, há um módulo que é responsável por exibir suas postagens no blog. Então o que poderíamos fazer é adicionar um módulo que é chamado de postagens fáceis. E nós vamos e como você pode ver, assim que fizermos isso, estamos adicionando nossos blogposts à nossa página. E por padrão, o WordPress está exibindo uma coisa, 1010 posts. É por isso que somos vistos todos eles aqui. Claro que podemos mudar isso. Então, quando vamos para, quando voltarmos para o nosso painel de administração e vamos para Configurações de leitura. Então aqui temos este blog páginas mostram no máximo dez posts neste caso. Então vamos mudar isso para, digamos antes. E eu vou salvar as alterações. E então, quando vamos para nossa página e atualizamos a página, você pode ver que só temos quatro blogposts sendo exibidos agora. E temos esta pequena paginação aqui no fundo. Então, como podemos realmente estilizar nosso módulo de postagens no blog dentro do oxigênio? Bem, em primeiro lugar, é claro que eu vou, eu vou para os templates e blogposts. Vou editá-lo com oxigênio. E talvez eu só vá me livrar deste espaçamento porque temos algum espaçamento aqui e dentro desta seção. Então, nosso módulo de postagens fáceis, como você pode ver, ele tem algumas, algumas mudanças diferentes. Então tem alguns aspectos que podemos mudar. Então, primeiro de tudo, temos esta opção de consulta aqui que permite que você altere essas consultas. Então basicamente quais postagens estão sendo retiradas do nosso banco de dados. Então, ele pode ser padrão, consulta WordPress, ele pode ser personalizado, para que você possa escolher o tipo de post. E se tivéssemos alguns pós-docs personalizados, achamos que não temos nenhum, no momento. Poderíamos filtrar um pouco. Então nós poderíamos, por exemplo, apenas adicionar categorias específicas e específicas. Como talvez, digamos projetar. Se adicionarmos a isso e salvarmos isso, vamos finalmente ver o nosso design em oposição. Mas eu acredito que todos têm, todos os nossos posts têm esta categoria. Então vamos ver sem categoria. E vamos para a nossa página de postagem do blog. E como você pode ver, não temos nada aqui porque nós apenas definimos uma categoria como nossa categoria. E acredito que não temos nenhum post sem categoria. Então vamos verificar o design da impressão. E eu vou atualizar a página. E nós temos quatro deles com a categoria de designer de impressão. Mas de qualquer forma, se você quiser apenas filtrar categorias específicas, você pode, você pode fazer isso aqui mesmo. Agora. Poderíamos também alterar a ordem, mas descendente ou ascendente e descendente, ou poderíamos ordenar a ordem por data, maré e etc. Então, se apenas atualizarmos a página agora, nossas postagens estão sendo filtradas ou classificadas por, pelo, pelo título. Vamos apenas ir em frente e escolher a consulta padrão. Mas em termos de, em termos de design, este uso Preset Options é o mais importante. Então, o padrão de imagem Grit é o que você está vendo agora. Mas podemos ir com qualquer outro quando predefinido aqui. Então vamos fazer imagem de grão com gradientes escuros animados. Então este é o nosso, este é o olhar agora. Poderíamos ir com a imagem com sobreposição de gradiente para torná-la assim. Ou imagem com sobreposição de retângulo rasgado. Então basicamente você tem um monte, um monte de estilo, opções de estilo bem aqui. E a propósito, se você está se perguntando, como você pode mudar esse trecho aqui onde bem, isso não é dependente de oxigênio. Nós podemos, nós podemos consertar isso. Então talvez vamos realmente fazer isso. Vamos ter uns trechos menores. Vou voltar para a administração. Vamos falar com o meu chefe. E quando você editar uma postagem aqui à direita, você verá seu painel de trechos. Então, se eu me livrar da maior parte desse texto, eu vou deixar talvez três linhas de texto. Eu vou atualizar o post e eu vou fazer o mesmo com meus outros posts. Vamos, vamos manter isso em duas linhas de texto. E eu vou para a minha página, oxigênio e depois modelos. Eu vou editar o modelo de postagens do blog com, com oxigênio. E como você pode ver, meus trechos, trechos são muito, muito menores agora. Claro, sempre que você seleciona um curso diferente, um curso diferente, eu ainda estou nos posts fáceis. Postagens usam uma predefinição dif, diferente. Então talvez vamos com, vamos com uma lista com retângulos, sobreposição, sobreposição centrada. Este é um blog bastante popular, design de blog. Então, vamos ficar com este. Agora, quando tivermos esse cara ativado essa predefinição, podemos ir para estilos. E talvez não pudéssemos mudar algumas coisas sobre o nosso design, do nosso bloco, ambos reais, mas talvez façamos isso. Vamos começar a fazer isso no próximo vídeo. 53. 10.5Define posts: Então, agora que temos nossos posts, vamos começar a estilizá-los. Então eu vou para Styles e vamos para o título. Então vamos dizer que eu gostaria de mudar a cor do meu, do meu título. E eu vou com talvez com a minha cor padrão, esse cara aqui. E digamos que eu gostaria de alterar o tamanho da fonte. Mas como você pode ver, quando começamos a fazer isso, bem, nada está realmente acontecendo. Bem, isso é porque algumas dessas, algumas dessas opções de estilo, mesmo que elas estejam aqui, você não pode realmente ver e gostar do efeito porque as estrelas que são, que estão sendo codificadas manualmente ou tomando precedência sobre o que podemos fazer aqui. Então, por padrão, como um exemplo, se formos para modelos, em seguida, modelo CSS. Há um monte de código aqui, mas não deve ter medo dele. Se você começar a ler os nomes de todas essas classes, você pode ver que eles são basicamente, quer dizer, eles são bastante logicamente nomeados. Então, por exemplo, esse cara aqui, título de postagem OCC, você pode ver que ele tem esse tamanho de fonte, 1,5 m de espaços. Então podemos mudar o tamanho aqui. Por exemplo, se formos para 2.5 e, em seguida, pressionar Apply code, você pode ver que ele está realmente mudando. No entanto, você também pode simplesmente pegar esse tamanho de fonte. Apenas apague. Se você quiser, aplique o código. E agora se formos para, se voltarmos aos nossos estilos e, em seguida, o título e depois o tamanho da fonte , se agora apenas digitarmos tipo, eu não sei, 66, você pode ver que na verdade não é nenhuma mudança no nosso título. Então não quero que seja tão grande. Vamos com uns 46. Isto deve, vai escrevê-los como 42. Isto deve ficar bem. Eu vou salvá-lo. Então deixe-me esconder esse cara por um segundo. Então este seria o nosso título. E é claro que podemos, você pode torná-lo maior, você pode torná-lo menor e menor. Isso vai ser totalmente, totalmente com você agora. Mas o que é mais importante aqui é que às vezes se você não vê a mudança quando você é como ajustar alguns aspectos do seu blog post real, isso é muito provavelmente porque você, você, você, você vai ter que como verificar o código em si, a fim de fazer essa mudança específica e específica. Então, a seguir temos metadados. E vamos ver se podemos alterar o tamanho da fonte aqui. Vamos fazer 36. Na verdade, não. Mas podemos mudar a cor? Vamos mudar para autonomia. Esse cara aqui. Bem, podemos mudar esse assunto aqui mesmo. Este é o seu projeto, o autor, o nome do autor. Talvez façamos como este cinza claro. Talvez. Talvez vamos com isto, este cinzento. E novamente, podemos ver, a fim de mudar o tamanho se quisermos, eu vou voltar a modelos, modelos, CSS. E esse é esse cara bem aqui. Só vou apagar isso, apliquei o código. E, em seguida, quando nós apenas atualizar que, quando vamos para nossos estilos de posts fáceis Mehta, Agora podemos alterar o tamanho da fonte do nosso, de nossos metadados Meta. Mas, claro, não quero que seja tão grande. 16 ainda é muito grande. Vejamos, dez. Ou 12. Então, como você pode ver, isso não é nada para se assustar se você não vir nenhuma, quaisquer mudanças tomadas, entraram em vigor. E não devias ter medo do código que acabaste de ver. Todas essas classes são realmente logicamente nomeadas. E, você sabe, é apenas uma questão de encontrar algo que soa logicamente que provavelmente é responsável pela mudança em alguns aspectos que você vê aqui. Então, agora vamos ver o que podemos fazer sobre o conteúdo. Vamos ver se podemos alterar o tamanho da fonte. Podemos alterar o tamanho da fonte aqui. Então vamos me fazer uns 14. Isto deve ficar bem. Vou usar minha cor padrão. E então vamos verificar o Read More. Então, como você pode ver, pode ser um botão ou pode ser apenas um link simples. Então vamos mudar a cor do texto para talvez a nossa cor marrom. Por que não? Não vamos usar uma caixa no tamanho da fonte. Vamos torná-lo um pouco maior. E lá vamos nós. Nós basicamente mudamos o design do nosso blog, post blog real. Mas é claro, você sabe, pode haver algumas mudanças que você gostaria de implementar, mas elas não estão disponíveis aqui dentro dos estilos. Por exemplo, este, estes dados faz botão Data aqui, ou talvez como o fundo. E se você não pode ver essas opções aqui, você só tem que ir para este modelo, CSS. E, por exemplo, digamos que você gostaria de mudar como este botão aqui. E você pode ver que este é esse cara bem aqui. Ok, suponha a sobreposição da data da imagem e esta é esta data sendo sobreposta. E você pode ver que nós temos, nós temos a posição, nós temos o valor superior e direito e tamanho da fonte. Então, digamos que você deseja alterar o tamanho da fonte. Vamos fazer como apenas para que você possa ver a mudança menos como 26 pixels. E então eu só vou apertar Aplicar código. E então você pode ver que nosso encontro está mudando e agora é muito, muito grande, mas, você sabe, funciona. Então eu vou voltar para o meu valor anterior, anterior. Vamos fazer algo como 0,9 m de espaços. E eu vou aplicar o código para ter esses dados olhando, olhando assim. Você também pode alterar a cor do plano de fundo se quiser. Então eu só vou pegar emprestado esse cara. E eu vou apenas digitar algo simples como ler, talvez e aplicar o código. E você pode ver que foi verificado, mudando. Ou podemos fazer-me como colide amarelo. Vamos ver. E vamos aplicar o código. E como você pode ver, essas cores estão mudando instantaneamente. E os nomes dessas cores são basicamente nomes sss, sss, sss. Se você apenas procurar por nomes de cores CSS, vamos, vamos procurar por isso. Podemos ir para escolas como W3. E você pode ver que temos todas as nossas cores que, você sabe, se você não quer aprender Xcode, então você não quer usar os códigos hexadecimais. Você pode usar esses nomes. Digamos que, eu não sei, vamos como você é tão em vez de amarelo claro, vamos fazer como estávamos. Aplique código e essa cor está mudando. Vou voltar ao meu projeto original que eu, que eu copiei antes. E lá vamos nós. Agora, é claro, se você quiser manter todas essas alterações, é uma boa ideia salvar sua predefinição. Então vamos ver isso. Vamos dizer que eu quero alterá-lo como eu não sei minha predefinição de blog e eu vou salvá-lo porque, porque agora quando nós tentamos não apenas usar algumas outras predefinições, vamos com esta. E depois vamos saber que decidimos que, sim, acho que prefiro um. Então vamos apenas para a predefinição MyBlock. E como você pode ver, temos nossa predefinição de blog funcionando corretamente. E, claro, se formos para a página principal, atualize esse cara. Você pode ver que temos nossas postagens de blog, página de blog pronto. Mas e se clicarmos em um desses, um desses posts? Você pode ver que, sim, nós temos o conteúdo, mas esse conteúdo, ele não foi estilizado corretamente. Então, como poderíamos consertar isso? Bem, nós teríamos que apenas construir nosso modelo de post único para isso. E é isso que vamos começar a fazer no próximo vídeo. 54. Adicione o modelo de post único: Ok, nós temos nossa página do blog, criado, nosso pager real do blog criado. Mas e se quisermos ver? E se você quiser ler uma das postagens do blog? Então, se pegarmos o nosso endereço, vou para o nosso modo de navegação anónima, como de costume. E eu vou, e blog. E eu vou clicar em qualquer um desses. Você pode ver que, bem, não é o que você quer. Não é isso que queremos ver. Quero dizer, esse conteúdo desse post específico está sendo produzido, mas não foi estilizado. E é por isso que precisamos criar um blog, um único blog, postar um modelo. Então o que eu vou fazer é ir para modelos de oxigênio. Vou adicionar um novo modelo e vou chamá-lo de post único. E eu vou escolher o singular. No mundo faz este modelo de aplicação. E eu vou escolher todos os tipos de posts e eu vou publicar isso. E quando batermos em editar com oxigênio, seremos capazes de estilizar nosso modelo, mas como você pode ver, é apenas uma página em branco. Não temos nada. E eu gostaria de ter o mesmo rodapé e o mesmo cabeçalho que no caso do nosso modelo de postagem de blog. Então, se você não quiser herdar esse design do modelo criado anteriormente, mas você gostaria de usar algumas das partes dele. Aqui está o que você poderia fazer. Você poderia ir para modelos de oxigênio e então nós temos este modelo bem aqui, postagens de blog. E eu vou editá-lo com oxigênio. E aqui vou para a minha estrutura. E eu vou clicar neste cabeçalho porque eu quero reutilizá-lo. E quando nós apertamos este menu, eu vou clicar neste make opção reutilizável. E eu vou chamá-lo de cabeça de sopro. Então nós vamos. E depois vou para o meu rodapé. Esse cara bem aqui. Eu vou fazer isso. Vou clicar em tornar reutilizável. E eu vou chamá-lo de rodapé do blog e clique em OK. Vou guardá-lo porque gosto de dizer com frequência. E eu vou voltar para o meu painel de administração. Vou seguir em frente e escolher Modelos. E como você pode ver, temos essas duas partes reutilizáveis bem aqui que poderíamos adicioná-lo também com oxigênio, mas isso não é o que queremos fazer. Queremos editar nossos modelos de postagem única. Vou acertar Edit com oxigênio. E desta vez eu vou escolher Adicionar. E aqui embaixo você pode ver essa parte. E isso diz “reutilizável”. Se clicarmos nele, temos nosso rodapé do blog e nosso cabeçalho do blog. Vou clicar nele. E eu vou escolher um único já que, bem, nós poderíamos usar editável que tornaria nossas partes reutilizáveis serão editáveis se você quiser mudá-lo, mas eu não quero mudá-lo. Eu só quero colocá-lo no meu site. E então eu vou, então eu vou adicionar outro, bloco rodapé e solteiro. E lá vamos nós. Temos o nosso poste reutilizável. Este rodapé reutilizável, poderíamos talvez mudar seu nome, vamos renomeá-lo para simplesmente Rodapé. Não preciso dessa parte. E para o cabeçalho, vou mudar o nome deste tipo também. E eu vou chamá-lo de cabeçalho. E basicamente temos nossas peças reutilizáveis. Então nós temos, nós pegamos emprestado nosso cabeçalho e nosso rodapé do nosso modelo anterior. E esta é apenas outra maneira de pedir emprestado partes de outros modelos. Se você não quiser basear seu modelo inteiramente em um, em um modelo que você criou anteriormente. Então nós temos o nosso cabeçalho, nós temos o nosso rodapé. Agora é hora de realmente adicionar as postagens do blog bits dentro agora entre nosso cabeçalho e nosso rodapé. Então vamos passar para isso. 55. 10.7Adicione os elementos principais: Então eu vou começar como de costume adicionando uma seção. Então eu só vou digitar na seção e eu vou colocar um bem aqui. Agora eu acho que o design que estamos indo para ir para vai ser baseado em como duas colunas à esquerda, nós vamos estar vendo nossa imagem em destaque, nosso cabeçalho, o imposto para os metadados e todas essas coisas que são geralmente para um único, simples, blogposts individuais. E à direita vamos adicionar talvez como uma biografia do autor, talvez como as últimas postagens ou coisas assim podem ser algumas tags ou categorias. O blog habitual, as postagens do blog. Então, nesta seção, vou adicionar colunas. E vamos talvez com, deixe-me pensar em Omega. Vamos começar com apenas duas colunas, tipo 60-40. Mas talvez vamos mudar o tamanho para talvez como Arno, 65, 35-40 pensar. Ou talvez até 67. Vamos ficar com 67. Esse cara terá 333 anos. Então eu vou chamar isso de div. Deixe-me ligar para esse cara como postagem no blog. E à direita, vou chamar esse cara de barra lateral. Este vai ser o nosso bar lateral. Lá vamos nós. Então, antes de começarmos a adicionar algo aqui, precisamos entender uma coisa. O conteúdo que vamos adicionar aqui não vai ser como nenhum conteúdo retirado de cada post do blog. Para que funcione, o que precisamos fazer é usar os dados dinâmicos. Então, basicamente, vamos dizer ao oxigênio para importar apenas um pedaço específico de informação do banco de dados e fazê-lo dinamicamente. E dependendo de qual postar tipo ou postar, queremos pré-visualizar que o conteúdo específico será retirado do banco de dados. Então o que podemos fazer é primeiro, é claro, eu vou clicar nesta camada com a postagem do blog. E nós queremos fazer tipo, Ei, vamos fazer como uma imagem. E então vamos fazer um título de postagem no blog. E então vamos fazer alguns metadados e, em seguida, o conteúdo da postagem do blog. Então eu vou fazer o que eu vou fazer é procurar por uma imagem. E nós poderíamos, é claro, não, se você quisesse torná-lo estático, poderíamos apenas adicionar uma imagem. Deixe-me apenas salvá-lo e atualizá-lo porque às vezes oxigênio realmente não quer me mostrar as imagens. Podemos ter uma imagem como esta, mas queremos torná-la dinâmica. Então, em vez de clicar no navegador e adicionar uma imagem, vou me livrar dela. Vou me livrar dele. E eu vou clicar neste botão Data. E aqui você pode ver que temos esta opção de imagem destaque post bem aqui. E se clicarmos nele, podemos escolher alguns valores específicos para o nosso tamanho. Só vou apertar a inserção. Eu vou salvar isso. E vamos escolher pré-visualizar um dos nossos posts, talvez este. E lá vai você. Temos uma imagem em destaque. Se visualizarmos Outro, essa imagem vai mudar. Então temos nossa imagem em destaque. Agora vamos adicionar um título. Então eu vou adicionar um título. Então nós vamos e aqui, e vamos entrar em um duplo clique sobre este título. E aqui em cima, você pode ver que nós temos este campo de dados de inserção. Então eu vou clicar nele. E este será o título do nosso post. Então eu vou clicar nisso. E nós não queremos vinculá-lo porque isso já está no título do nosso post, então nós não queremos vincular a outro post, alguns se foram, eu clique em Inserir. E como podem ver, esse título está sendo retirado do nosso banco de dados. E é claro que podemos incutir estilo do jeito que você, do jeito que queremos. Vamos adicionar uma classe a ele. Então vamos chamá-lo de título do post. Lá vamos nós. E talvez vamos aumentar o tamanho da fonte um pouco. Algo como 42. Deve ficar bem. 42 vai verificar a mudança da tag de H1 para H2. E talvez vamos para a tipografia e brincar com a altura da linha são geralmente começar com um. E então vamos tentar 1.1 ou talvez até dois à direita. Isto deve ser, isto deve ser bom. E, claro, uma vez que começamos a Pré-visualização e nossas postagens, você pode ver que esse título está mudando. A imagem em destaque está mudando. Tudo parece como deveria. Claro, talvez pudéssemos adicionar algum espaço. Ambulância humana ir com, digamos com dez pixels de margem ou 20 pixels de margem. E talvez façamos o mesmo para cima e para baixo, porque agora, Adnan, na parte inferior, vamos adicionar alguns metadados como Meta, mas vamos começar a fazer isso no próximo vídeo. 56. 10.8Adicione o conteúdo do Post: Então eu vou pegar, eu vou pegar alguns, vamos apenas ir em frente e apenas usar texto simples. Vou clicar nisso. E mais uma vez, vou clicar lá dentro. E eu vou seguir em frente e escolher Inserir Dados. E vamos escolher talvez, talvez o nome do autor. Vamos fazer assim. Vou inserir isso. E eu vou guardar isso. Então este é o nosso autor aqui. Mas é claro que o que poderíamos fazer é talvez pudéssemos digitar por escrito ou postado por. Vamos fazer postado por. E lá vamos nós. Se nós apenas salvarmos isso, você pode ver que apenas esses dados dinâmicos foram retirados do banco de dados com este é o nome do meu autor e nós podemos simplesmente adicionar qualquer coisa ao lado. E é claro que poderíamos estilizar isso também. Então talvez eu vá adicionar uma aula a ele. Vamos chamá-lo de pós meta. Meta. Lá vamos nós. E talvez vamos mudar o tamanho da fonte é algo como 12. E a cor do texto, talvez vamos com alguma cor cinza claro. Lá vamos nós. E talvez pudéssemos acrescentar um encontro ao lado. Então eu vou apenas para eu vou apenas duplicar aquele cara. E novamente, clique dentro. E talvez desta vez vamos digitar, desta vez vamos digitar algo como se fosse postado pelo seu projeto. E então vamos e desta vez, em vez disso, em vez desse autor de dados de oxigênio, vamos escolher um valor de dados dinâmico diferente. Então eu vou para Inserir Dados, e vamos apenas escolher data e inserir. E como você pode ver, esses dados estão sendo refletidos. Refletido aqui. Acho que tenho um suporte para muitos. E lá vamos nós. Ficamos vangloriados por um em 20 de setembro de 2020. Mas é claro, esses caras, eu acho que eles deveriam estar ao lado um do outro. Então o que poderíamos fazer é pegar nosso primeiro texto. Este é o nosso nome de autor. E eu vou clicar neste menu e eu vou embrulhá-lo com div. Então eu vou pegar meu par e colocá-lo dentro daquele div. E isso, isso nos permitirá grep essa div e controlar o posicionamento das peças de informação que estão sendo colocadas dentro dessa div. Então o que eu vou fazer é eu vou escolher empilhar elementos filho horizontalmente a partir do meu layout elementos filho. Quando clicarmos nele, você pode ver que isso e esses caras vão lado a lado. E novamente, eu vou para a minha classe e ir com espaçamento lateral 1 e talvez adicionar um pouco de espaço de margem para a direita. E lá vamos nós. Temos nossos metadados bem aqui. E agora o que é legal sobre isso é que nós poderíamos adicionar diferentes elementos aqui ao lado de nossos, nossos pedaços de dados dinâmicos. Por exemplo, se pegarmos nossa div e escolhermos adicionar, vamos escolher um ícone. Lá vamos nós. E vamos encontrar um ícone. Talvez isso seja simplesmente como uma pessoa como esse cara. E vamos torná-lo menor, como 12 pixels, pode ser 14, talvez 16. E vamos mudar a cor. Mas eu realmente não consigo lembrar a cor disso que era cinza atômico. Então vamos pegar nosso ícone. E para a cor, vamos com o tempo. Acredito que era esse cara ou talvez esse cara. Isso é o que dois, ótimo. Ok. Eu não quero gastar muito tempo escolhendo, escolhendo esta cor. Sim, acho que é uma uva atômica atômica. E eu vou mover isso. Eu venho todo o caminho até a frente. Lá vamos nós. E então eu vou me casar, eu vou apenas duplicar isso. E eu vou movê-lo para cá, por isso é bem aqui. E depois, ao lado deste texto de setembro. E talvez eu só vá me livrar desse. Texto. Lá vamos nós. E eu vou mudar esse ícone. Vamos tentar encontrar algo como um calendário, talvez. Vamos ver se temos isto aqui. Temos um pouco, temos algum tempo. Talvez vamos com este ícone de relógio. Lá vamos nós. E talvez eu só vá pegar meu pedaço de texto. Eu quero, eu quero atingir essa classe. E eu vou adicionar um pouco de espaçamento à esquerda também. E quando eu pegar minha div agora você pode ver que os, estes, esses ícones e o texto, que eles não estão alinhados corretamente, eu quero alinhá-los aos remetentes. Então, quando escolhemos o meio de alinhamento vertical, você pode ver que esses ícones aparecem diretamente no lugar. Então nós podemos, temos flexibilidade completa e completa quando se trata de criar nosso modelo e, neste caso, nossa caixa de metadados. Então, o próximo passo seria apenas adicionar como um conteúdo real, real. Então o que vou fazer é adicionar texto. Lá vamos nós. E novamente, vou apenas clicar duas vezes, inserir dados e postar conteúdo. E nós vamos salvar isso. E como podem ver, o meu conteúdo está a ser transmitido directamente, directamente aqui dentro, dentro do oxigénio. Mas é claro, é uma boa idéia colocá-lo onde ele precisa ir. Então eu não vou colocá-lo aqui. E talvez pudéssemos estilizá-lo um pouco. Então, novamente, eu vou criar um conteúdo de pesquisa de classe. E vamos talvez adicionar um pouco de estofamento a esse cara. Não muito, talvez 12 pixels ao redor. Isto deve ficar bem. E, claro, se você quiser, você pode mudar o texto aqui dentro. Você pode estilizá-lo do jeito que quiser. Mas, você sabe, isso vai ser totalmente com você. O que eu quero fazer é salvar esse cara, esse modelo. E eu vou para a minha página. E como você pode ver, minha vangloria está sendo bem, bem exibida aqui. E, claro, se eu ir para a minha página do blog e clicar em qualquer um desses caras, esse modelo está sendo, está sendo atribuído a todos os meus, todos os meus posts. E eu não tenho que me preocupar com o estilo em mais, pelo menos em termos de adicionar meus dados dinâmicos e dinâmicos. Então agora vamos praticar nossos dados dinâmicos. Vamos cuidar do ciber-cibernético. Vamos adicionar algumas informações sobre o proprietário do blog. E vamos adicionar algumas categorias. Pode ser algumas últimas mensagens inigualáveis. Todas essas coisas que podemos fazer com dados dinâmicos aqui dentro do oxigênio. 57. 10.9crie as informações do autor: Agora vamos começar a criar a nossa barra lateral e vamos começar com a adição de algum nó como uma bioinflamação. Então eu vou adicionar uma imagem e um texto ao lado. Então eu vou pegar um módulo de imagem. Vou editar a imagem. Lá vamos nós. E eu vou navegar na minha biblioteca de mídia. Deixa-me, mamã, vou escolher esta imagem. Vou selecioná-lo. E novamente, vou salvá-lo e atualizar minha página. E vamos pré-visualizar algum texto. E esta imagem é muito grande. Vamos ver, talvez uns 75 ou talvez 100. Isso seria bom. E o que eu quero fazer é adicionar um texto ao lado. Então eu vou adicionar o texto. Mas como podem ver, foi colocado sob a nossa imagem. Então deixe-me pegar um pouco de Lorem Ipsum. Lá vamos nós. Vamos pegar um pouco. E eu vou colar aquele M. Isto deve ser suficiente. Talvez vamos apenas e um espaço. Então, como fazer realmente este pedaço de texto flutuar para a direita? O que eu faria era pegar essa imagem e embrulhá-la com uma div, colocar esse texto dentro dessa div. E com o silicato div, será que esta camada selecionada, Eu só escolheria empilhar elementos filho horizontalmente. E, claro, talvez pudéssemos adicionar algum conteúdo como o, eu não sei, oi, eu sou Jenny. Vamos lá. Vamos fazer assim. E talvez pudéssemos mover este conteúdo um pouco para o lado. Então este módulo de texto selecionado, eu vou para o tamanho avançado e espaçamento e eu vou adicionar alguma margem à esquerda como dez pixels. Isto deve ficar bem. Outra coisa que eu acho, importante a entender ao criar pedaços de conteúdo como esse é que quando você é então algum, algum imposto como dentro de um módulo de texto, você ainda pode apenas manipular estilo, apenas um pedaço desse texto sem adicionar qualquer outro, qualquer outro módulo. Então, por exemplo, se eu receber esse oi, eu sou Jenny, pedaço de texto. Esse cara bem aqui. Deixe-me apenas digitar o primeiro oi, eu sou. A Jenny. O que nós poderíamos fazer é simplesmente selecionar esse pedaço de texto e escolher este componente span. Então, agora, quando vamos para o nosso texto, você pode ver que temos outra camada chamada span. E o que poderíamos fazer, poderíamos apenas mudar esse único pedaço de texto enquanto estávamos em um módulo de texto maior. Então nós poderíamos fazer, nós poderíamos mudar a cor do texto, você poderia alterar esse texto, tamanho do texto. Deixe-me ir talvez para a tipografia. Poderíamos talvez mudar uma altura de linha novamente para 1.1. E talvez possamos transformá-lo em maiúsculas Assim como isso, que nos tornaria, o tamanho da fonte um pouco menor para algo como 20. Isto deve ficar bem. E poderíamos até pegar isso, remover esse espaço de parágrafo aqui. Mas quando vamos para o nosso espaço, podemos pegar o tamanho e o espaçamento e podemos facilmente manipular esse tamanho, esse intervalo de margem entre esses pedaços de texto. Então, sempre que você quiser e apenas estilizar um pedaço de texto dentro de um texto, você pode simplesmente selecionar esse pedaço de texto e usar este componente span aqui. Então, agora que temos a nossa configuração de informações biográficas, talvez vamos começar a adicionar mais alguns componentes aqui em baixo. Talvez como alguns posts ou categorias mais recentes, todas essas coisas padrão da barra lateral. 58. 10.10Adicione os ícones de mídia social: Então vamos começar a completar nossa barra lateral pode ser o primeiro com alguns ícones de mídia social. Como queremos que os usuários sigam o autor do nosso blog nas plataformas de mídia social. Mas acho que seria uma boa idéia ter algum tipo de cabeçalho diante nossos ícones que poderia dizer como me seguir ou algo assim. Então vamos, vamos fazer isso. Então primeiro eu vou adicionar um título e eu vou mudar para a tag para talvez como H3. E eu vou digitar algo como venha me seguir. Lá vamos nós. Mas acho que seria uma boa ideia manter as coisas bem organizadas. Quero dizer, para manter as coisas consistentes, talvez como este espaço aqui, este título poderia ser o mesmo que este. Então vamos ver como podemos fazer isso. Acho que a melhor ideia seria adicionar uma aula. Mas como nós já adicionamos algumas opções, alguns seletores aqui para este span e para este ID, nós teríamos que normalmente nós teríamos que apenas mudar todos esses valores como o tamanho da fonte, altura da linha, a cor deste maiúsculas, configurações, todas essas coisas e, em seguida, basta adicioná-las a uma classe. Mas o que nós também podemos fazer é simplesmente copiar todos os valores que são atribuídos ao nosso, para o nosso ID neste caso, e movê-los para cima. Então vamos ver como isso funcionaria. Então vamos dizer que queremos mudar essa fonte para esta fonte de exibição Bree Serif. E vamos talvez definir a altura da linha para 1.1. Como isso. Talvez vamos aumentar o espaçamento para 1010 pixels. Então, agora, todos os nossos valores são atribuídos a um ID. Então vamos criar uma classe que vai ser chamada como Cabeçalho da Barra Lateral, assim. E, claro, agora, quando estamos nesta classe, temos basicamente nenhum valor aplicado atribuído a ela. Então o que eu vou fazer é eu vou pegar isso. Eu vou abrir este painel aqui e eu vou escolher estilos de cópia para outro seletor. Então eu vou clicar nisso. E então eu vou clicar neste ícone aqui no cabeçalho da barra lateral que diz estilos de cópia aqui. E agora, todos esses valores são copiados para a minha, para a minha classe. Então, agora o que podemos fazer é nos livrar de todos esses elementos aqui. Assim, a tipografia, os valores de tipografia, por exemplo, ou a margem. Então o que poderíamos fazer é abrir novamente este painel e escolher Excluir óleo todos os estilos deste seletor. Sim, eu quero apagar todos esses estilos porque eu tenho, eu tenho eles aplicados na minha classe. E se eu apenas salvar isso e atualizar minha página, você pode ver que eu tenho o meu, eu tenho o meu esta estrela, todos esses estilos, graças à minha classe, aplicado. Talvez eu só vou mudar o peso da fonte dois porque eu tenho certeza que este font-weight vai ser maior do que este. Então, agora, se nós apenas adicionar essa classe Sidebar Heading à nossa barra lateral, você pode ver que ela foi bem refletida aqui. Acho que poderíamos talvez adicionar algum espaçamento entre esses dois elementos. Então, vou puxar esse cara para cá. E agora o que poderíamos fazer é adicionar os ícones reais das mídias sociais abaixo do nosso cabeçalho. O que poderíamos fazer é adicionar apenas um módulo simples chamado ícones sociais. Lá vamos nós. Mas para ser honesto, eu não sou o maior fã desses ícones aqui. Então eu vou apenas excluir este módulo e deixe-me mostrar a vocês uma maneira diferente de adicionar ícones, como, como os ícones sociais aqui. Então o que eu vou fazer é eu vou apenas adicionar um ícone como esse. E deixe-me remover esse cara, vamos digitar o Facebook. Este aqui. E acho que neste momento seria uma boa ideia adicionar uma aula ao nosso eigen. Então vou me livrar do tamanho e da cor. E agora podemos adicionar uma classe, vamos chamá-la como ícone lateral. E podemos mudar o tamanho para, vamos ver, 3-6 distribuído chegou espaço em torno do ícone. Vamos ver dez. Vamos talvez mudar a cor para talvez esta cor cinza. Por que não? Então, agora que temos todos esses atributos aplicados à nossa classe, quando apenas duplicamos esse ícone, é claro, todos esses elementos serão atribuídos a esse ícone e tudo o que temos que fazer é mudar o ícone para, digamos Twitter. Talvez este. E como você pode ver que o ícone é agora, bem, ele tem todos os mesmos valores que o nosso ícone anterior. Mas nós gostaríamos de ser basicamente capaz de clicar em nosso eigen. Então antes de eu fazer, antes de clonar meu primeiro ícone, eu vou embrulhá-lo com um link. Então, o que poderíamos fazer quando todo esse ícone estiver ativo, eu vou para o meu painel ToolPak ToolPak ToolPak, e eu vou clicar nas configurações deste link. Quando clicarmos nele, você verá esta opção de link de edição de inserção. E por agora eu vou apenas digitar as hashtags e símbolo, um símbolo de libra, apenas para torná-lo um espaço reservado link. E eu vou clicar em adicionar link. E agora, no meu painel Camadas, você pode ver que eu tenho esse wrapper de link com um ícone para sentar dentro dele. Deixe-me apenas visualizar novamente um post normal, normal. E agora podemos realmente duplicar um, este wrapper de link inteiro e novamente mudar o ícone. Então vamos chamá-lo. Vamos digitar no Twitter, talvez este ícone. E, claro, o que temos que fazer é colocar esses caras um ao lado do outro, mas já sabemos como fazê-lo. Então eu estou indo apenas para embrulhar este primeiro wrapper link com um div. E colocar este segundo invólucro de link dentro e fazer todos esses elementos filho para empilhar horizontalmente. Então eu acho que a última coisa seria talvez mudar a cor do ícone em pairar. E digamos que gostaríamos de fazer com que a cor do mouse corresponda à cor da marca. Então o que eu faria é pegar um ícone e ter certeza de que eu não estou na, na, na classe. E eu escolheria o ID. E agora o que eu faria é clicar nesta opção de estado aqui que me permitirá imitar como o estilo quando, por exemplo, meu ícone é hubbard. Então, se eu clicar nesta opção, se agora mudarmos essa cor para mais como um colar do Facebook, que seria, eu acho, uma cor azulada. Talvez façamos algo assim. Isto deve estar certo? E agora, se eu voltar ao meu estado original, se eu passar o mouse sobre este ícone, você pode ver que ele está realmente mudando em sua, sua cor. E podemos fazer o mesmo para o nosso ícone do Twitter. Então, novamente, um estado de ID e, em seguida, passar o mouse. E para a cor Nicholas, apenas esta cor azul, eu acho que é Twitter como Twitter gosta e eu entendo, eu vou para o original. E você pode ver que essa cor está mudando. Talvez eu vá adicionar, vou selecionar um ícone e selecionar a classe. Talvez eu vou escolher algo como uma margem à direita e piscar dez pixels, ou talvez cinco. Isto deve ser suficiente. E basicamente, tudo o que teríamos que fazer agora é apenas duplicar nosso link wrapper. E talvez mais uma vez. Duplicado. E vamos mudar esse ícone para talvez como o Instagram. Lá vamos nós. E o último ícone, vamos mudar para o YouTube. Talvez este ícone. E, claro, menos do que esquecer que temos esse estado flutuante copiado. Então, para a cor do YouTube, vamos mudar a cor do mouse. Talvez esta cor vermelha, nada, ou talvez esta cor vermelha. E para o ícone do Instagram, vamos mudar a cor do mouse deste azul para, na verdade, talvez, esta cor rosa assim. Então agora, sempre que um usuário passa o mouse sobre nossos ícones, que os chamadores que estão indo para mais ou menos representam real correspondem as cores da marca de todas essas mídias sociais, as plataformas de mídia social. E, claro, se você quiser, você pode brincar com o tamanho de todos esses ícones. Eles podem ser menores. No entanto, assim como, a margem pode ser maior, como talvez 15. Isso vai ser totalmente, totalmente com você quem? Como adicionamos uma classe aos nossos ícones, você pode facilmente controlar. E basicamente todos os aspectos do nosso, dos nossos itens. Então agora nós poderíamos realmente passar a adicionar como algumas últimas postagens sabem aqui abaixo do Siga-me e talvez um ícone de pesquisa em cima dele. Então vamos passar para isso. 59. 10.11Adicione últimas posts: Vamos agora talvez adicionar um formulário de pesquisa antes de adicionar nossas postagens mais recentes. Então isso é tão fácil como apenas clicar em Adicionar e, em seguida, pesquisar formulário que vamos. E como você pode ver, temos algumas opções básicas, básicas e realmente básicas que você pode definir para sua caixa de pesquisa. Vou mudar o botão de enviar a partir deste. Este muito escuro, escuro, cinza escuro, talvez algo mais leve como o meu Gray. Talvez este ou talvez este. E talvez vamos apenas adicionar algum espaçamento de vida autônomo como 25. Ou talvez seja um pouco demais para 15 para cima e para baixo. Agora podemos apenas duplicar o nosso rumo. Vamos duplicar esse cara e colocá-lo sob nossa empresa de busca. E vamos chamá-lo de mais recente. E eu vou salvar esse cara. Claro, se você quiser, você poderia pegar o formulário de busca e trazê-lo aqui, ou talvez apenas duplicar este título e então talvez mover este formulário de busca para cima e chamar este site de busca de cara. Isso vai ser totalmente, totalmente com você. Então agora é hora de adicionar as últimas postagens. Então o que eu vou fazer é adicionar meu módulo de postagens fáceis. E seria uma boa ideia movê-lo abaixo da minha direção. E como você pode ver por padrão, ele se parece mais ou menos com isso. Se salvarmos esse cara, isso é o que basicamente parece. Então o que podemos fazer é pegar nosso módulo de postagem fácil. E talvez vamos primeiro à nossa consulta. E em vez da opção padrão, vamos usar uma consulta personalizada. E o que quero fazer é mudar a ordem. Quero encomendá-lo por data, e quero fazê-lo descer. Então minhas últimas postagens estão sendo exibidas como as primeiras. E eu vou mudar a contagem para, digamos, talvez apenas os repos. Não quero que mais de três postagens sejam exibidas no meu módulo de postagens mais recente. Então, se guardarmos isso, você pode ver que nós realmente temos três postagens que estão sendo bem ordenados, mas eles estão olhando para horrivelmente, terrivelmente errados. Então vamos mudar isso. Vou voltar às minhas postagens fáceis e vou para as minhas predefinições. E vamos escolher uma lista com talvez uma imagem à esquerda. E vamos salvar esse cara. E talvez também vamos mudar o título, psi font-size para talvez tipo 18, e mudar a cor para a minha cor mais escura como esta. E eu vou apenas salvá-lo. Agora, quando acabamos de atualizar nossa página, temos nossos gabaritos bem aqui que você precisa lembrar que sempre que você alterar sua predefinição aqui, essa consulta de cliente pode se perder. Então você só precisará refazer todo o processo. Novamente, ele não funciona assim quando você apenas altera os estilos, mas quando você altera a predefinição inteira, isso pode mudar. Agora o que podemos fazer é gostarmos de mudar ou os trechos, como podem ver, como se este trecho fosse muito grande. Então, vou mudar isso. E vamos para os meus postos. E ao meu, ao meu posto. Eu só vou adicionar este cara e ouvir o meu de um trecho. Eu só vou escolher, cortar esses caras, deletar esses, enfrentá-los de volta. E quando voltamos para nossa página, você pode ver que disposta está parecendo muito, muito mais agradável. No entanto, acho que podemos querer nos livrar de alguns desses elementos. Por exemplo, acho que não precisamos desse nome de autor. Acho que não precisamos deste botão Read More. Então, como poderíamos fazer isso? Talvez pudéssemos até nos livrar do excerto de especialistas e depois deixar o botão ler mais. Temos total flexibilidade quando se trata de mudar esses aspectos. Mas temos que gostar, não como codificado ou células, mas apenas remover algumas peças que são muito, muito lógicas e não há nada a temer. Então vamos começar a fazer isso no próximo vídeo. 60. 10.12Altere a estrutura para ajustar suas últimas: Então o que temos que fazer é pegar nossas postagens fáceis. E que quando vamos para templates, temos essa opção de template PHP. Nós já demos uma olhada rápida no modelo CSS, e agora vamos dar uma olhada no modelo PHP. Agora aqui temos alguns basicamente alguns trechos de código que basicamente dizem isso, bem, este post este módulo de pôster fácil para pegar algumas informações do banco de dados. Mas como eu disse, nós realmente não precisamos de alguns desses elementos. Como, digamos que deixe-me dar uma olhada no nosso, digamos que não precisamos deste autor. Como se livrar disso. Vamos deixar talvez o título e o link Read More. Então, vamos nos livrar do autor e vamos nos livrar desse texto aqui. Então nós, no nosso caso, queremos nos livrar do meta e deste trecho aqui. Então, quando damos uma olhada nesse código, podemos ver que temos algumas tags bastante auto-explicativas aqui. Então temos esse título, não queremos tocar no título. Depois temos o meta e queremos tocar no Metta. Então temos um autor sobre o momento em que temos o trecho e o conteúdo aqui. Então não precisamos de todos esses elementos, mas precisamos da classe inicial de OK, suponha rap, esta é uma div que está envolvendo todos esses elementos. Então eu vou apenas ir em frente e remover este div que começa com oxy post meta. E vou descer até me livrar deste trecho e desta div de encerramento bem aqui. Se eu cortar esses caras e aplicar o código, você pode ver que tudo o que temos é apenas o nosso título e o nosso botão Read More. Então, se eu salvar esse cara e voltar para o nosso site, você pode ver que nós temos e esse tipo de, esse tipo de efeito como este. E eu acho que parece, parece muito melhor. Claro, ainda poderíamos consertar o espaçamento entre esses elementos e talvez pudéssemos adicionar alguma margem abaixo do nosso título. Mas isso é o que temos que fazer isso no modelo CSS. Então temos este poste de oxicodona bem aqui. Então vamos mudar esse valor inferior de margem para algo como vamos tentar 35 pixels. E eu só vou aplicar o código, guardá-lo. E vamos ver as mudanças. Você pode ver que é agora, bem, esses posts estão muito, muito mais próximos um do outro. Então vamos agora talvez adicionar algum espaçamento entre o título e o link Read More. Então vamos tentar encontrar o nosso título. É esse cara bem aqui. Portanto, se você não quiser codificar nada sozinho, basta selecionar este ícone de margem inferior. Eu vou pressionar Controle C. E então nós vamos descer aqui, pressionar Enter, quer adicionar essa linha de código antes deste colchete de fechamento. E eu vou aplicar o código e vamos ver o que ele faz. Então, talvez isso seja um pouco demais. Então talvez vamos mudar isso para algo um pouco. Tipo, eu não sei, talvez uns dez pixels. Então vamos fazer isso. Vamos fazer apenas dez pixels. Minta o código. Vou salvá-lo e atualizar a página. Isto parece muito, muito melhor. E, claro, se clicarmos nele, vamos ser colocados para o nosso, seremos capazes de ver o nosso post porque tudo funciona como deveria, porque este é o nosso, este é o nosso fácil gabaritos, fácil tanto para módulo que, que está trabalhando com o nosso modelo Single Post. Agora, talvez quando eu estou olhando para ele, eu sou, eu sou uma coisa que talvez nós talvez possamos fazer algumas, algumas coisas sobre esses títulos. Eu acho que eles podem ter um pouco mais de espaço no fundo. Mas sempre que você fizer alterações como essas, como essas alterações pesadas em seus templates, como modelos de postagem fáceis, seria uma boa idéia salvar seu template. Vamos chamá-lo de hormônio lateral. Vamos chamá-lo de postagens mais recentes. E vamos salvar esse cara. E só para ter certeza de que se estragarmos alguma coisa, ainda podemos voltar para onde estávamos antes. Então, talvez vamos apenas aumentar o tamanho entre esses elementos. Como pode ver, temos esta aula aqui. Então vamos ver o que podemos fazer em termos de margem inferior. Vamos ver uns 25 pixels. Isso pode ser um pouco melhor, mas ainda acho que não é suficiente. Então talvez façamos algumas mudanças simples e simples. Vamos pegar esse div e talvez Perrin, esse cara para baixo, e talvez esse cara para baixo um pouco para algum lugar aqui. O mesmo para este elemento. Pode ser só um pouco mais. Deixe-me pegar essa div. E novamente em um pouco mais de espaçamento. E agora vamos ver como fica em nossa página quando atualizamos isso. Eu livros, eu acho que parece um pouco melhor. Claro, novamente, poderíamos brincar com o estilo durante todo o dia, mas é, é mais importante aprender como todos esses elementos funcionam porque é muito, é muito para absorver de uma só vez. Você precisa realmente apenas clicar e verificar e cometer muitos erros apenas para realmente aprender como tudo realmente funciona, como tudo realmente funciona, como tudo realmente funciona, e para encontrar o seu próprio melhor para o fluxo de trabalho. Mas aqui dentro do oxigênio e você pode realmente, você sabe, se você quiser ter total flexibilidade e liberdade neles, em termos de projetar e fazer as coisas funcionarem como você gostaria que elas funcionassem. Bem, você tem isso aqui. Então temos os últimos gabaritos. Talvez agora pudéssemos adicionar algumas categorias abaixo ou tags, você sabe, coisas como, coisas da barra lateral padrão. 61. 10.13Adicione o módulo de categorias: Muito bem, temos os nossos últimos posts bem aqui. Então agora, como mencionado antes, vamos adicionar essa categoria. Então, quando vamos para o nosso painel WordPress e, em seguida, widgets, agora aqui você pode encontrar este módulo categorias. Mas quando vamos dizer avançada e, em seguida, topografia, e por exemplo, você quer mudar a cor. Você pode ver que apenas os marcadores mudam de cor. E então esses caras não fazem porque eles são links e eles precisam ser alterados. E em outro lugar. Quero dizer, se formos para nossas configurações gerenciadas e , em seguida, quando formos para estilos globais, estilos globais. E então quando você vai para links. E então tudo aqui, quando realmente começamos a mudar isso, bem, a cor desses links, eles vão mudar bem aqui. Mas quer saber? Há algumas coisas que você pode fazer sobre isso. Por exemplo, você pode fazer como alterar a declaração se você quiser, se você quiser sublinhar seu texto, poderíamos alterar a cor do link ao passar o mouse, mas será difícil, por exemplo, alterar essas categorias. Will styling, porque é um, é um widget Wordpress. Para mim, é muito aborrecimento. Gostaria de facilitá-lo e gostaria de usar o que o oxigênio oferece. Então, por enquanto, eu vou deixar este módulo bem aqui, mas só porque eu preciso dos links que estão anexados a estes serão os URLs que estão anexados a esses links. Então, se eu clicar em cada um deles e, em seguida, passar para os selos abertos. Você pode ver que nós temos o conteúdo, mas nós não temos o estilo aqui e nós vamos corrigir isso em apenas um segundo sobre o que nós precisamos dessas páginas é o URL. Vamos usá-lo em apenas um segundo quando começamos a estilizar nosso próprio módulo de categorias. Mas, por enquanto, gostaríamos de adicionar um modelo à nossa categoria para que eles não se pareçam com a nossa página de postagem do blog. Então, em ordem, a fim de fazer isso, Eu só vou ir em frente e clique neste saco para trabalhadores e botão e, em seguida, escolha Admin. E aqui vou escolher um modelo diferente para, um modelo diferente para editar. E vai ser o nosso modelo de blogposts. E nesta parte, onde este modelo se aplica? Vou escolher o arquivo, e vou escolher taxonomias, todas as categorias. Se não tivermos isso, você pode escolher uma categoria específica. Então, se você quiser escolher um modelo diferente para uma categoria específica, você pode fazer isso. Mas no nosso caso, só quero manter o meu design consistente. Eu quero ter o mesmo, mesmo, mesmo olhar na categoria, mesmo layout olhando para todas as minhas categorias. Então, quando escolhemos todas as categorias e atualizamos nosso modelo, podemos fechá-lo. E então, quando atualizamos a página, você pode ver que nosso modelo está sendo atribuído às nossas categorias. E agora parece como deveria. Então, como eu disse antes, nós vamos estar usando esses URLs bem aqui quando começamos a criar nosso próprio, nossas próprias categorias, módulo de categorias. Então, vamos realmente passar para isso. 62. 10.14Style as categorias: Acho que não vamos precisar mais deste módulo. Nós temos, nós vamos ser levados nossos links a partir dessas URLs. Então, das páginas de LOS. Então eu vou apenas remover este módulo. Então, em vez de nosso módulo de categorias, o que eu vou fazer é adicionar um módulo de link de texto. Então eu vou apenas digitar o texto e, em seguida, escolher o link de texto. E este vai ser o nosso design de sprint. Creio que este é o nosso primeiro elo aqui. Então, se eu agora apenas copiar este URL, eu vou colar esse URL aqui mesmo. E à medida que vou, vou adicionar uma aula a ele. Então vai ser categoria de barra lateral. Lá vamos nós. Então agora podemos realmente estilizar o nosso designer impresso vai esta primeira categoria. Mas se a guardarmos e deixar-vos mostrar que realmente funciona. Se clicarmos no nosso link de design de impressão, você pode ver que estamos sendo redirecionados para a nossa página com todo o nosso design impresso, uma categoria de posts no blog. Então é isso que temos que fazer por todos esses links. Mas primeiro precisamos estilizá-lo. Então vamos dizer que eu vou para a minha tipografia primeiro e eu vou tentar mudar a cor para este cara. Talvez, vamos capitalizar nossa ligação. Talvez vamos resumir, vamos adicionar um pouco de preenchimento. Então eu vou para, ir para o tamanho e espaçamento. E para o Estofamento, eu vou talvez uns oito pixels para cima e para baixo. Lá vamos nós. E talvez vamos voltar ao tamanho e ao espaçamento. E vamos mudar a largura para 100%. Porque o que eu quero fazer é adicionar uma bela fronteira aqui no fundo ali que vai se estender por toda a barra lateral. Então, para isso, eu vou para Borders e eu vou escolher a borda inferior. Vou usar a cor cinza escuro. Talvez esse cara aqui, e eu quero torná-lo um pixel e sólido. Então, se você agora atualizar essa página, vai salvar essa página. E vamos para o nosso único post. Então esta é a nossa primeira, esta é a nossa primeira categoria. E talvez vamos fazer também alguns, alguns como efeitos pairando. Então eu vou pairar e eu vou mudar a cor para branco, preto mais escuro. Lá vamos nós. Um pixel e, em seguida, sólido. E agora, se fores para o nosso único posto, lá vamos nós. Você pode ver que quando passamos por esta fronteira, é um efeito extremamente sutil, mas está lá. Então, quando passamos o mouse sobre a, esta categoria, essa borda muda um pouco. Então agora tudo que você realmente tem que fazer é apenas duplicar nosso link de texto que vai para o nosso web designer. Então eu vou copiar este endereço, pegar este pedaço desta categoria. Vou colar esse link. E eu vou digitar web design. Então vou duplicar esse cara mais uma vez. E com branding, vou copiar esse cara. E eu vou digitar em branding. E, claro, eu preciso mudar a URL aqui mesmo. E o último cara é o nosso bem, design, simples e simples. Então, novamente, cole esse link e mude o imposto para projetar e salvar esse cara. E se você agora voltar para o nosso único gabarito, atualize a página. Temos todas as nossas categorias listadas aqui. E, claro, se clicarmos em um, você pode ver que todas essas categorias são bem, bem funcionais. E, claro, você pode estilizar esses links da maneira que quiser. É totalmente com você. Por exemplo, nós poderíamos talvez também para o efeito de pairar, nós poderíamos mudar como a cor do nosso, de nossas categorias. E nós também poderíamos animá-los um pouco só para mostrar algum movimento em nossa página. E também acima de tudo, para que você possa aprender como é fácil adicionar algumas transições agradáveis no porto aqui dentro de oxigênio. Então vamos passar para isso. 63. 10.15Adicione as transições hover: Adicionar transições aqui dentro de oxigênio é extremamente simples. O que eu tenho que fazer primeiro é garantir que eu tenho minha classe ativa e que eu tenho meu estado de foco selecionado. E então, quando vamos para avançado, digamos que queremos mudar a cor do link. Então, digamos que em um pairar, eu quero ver uma cor diferente. Digamos que eu vou com este marrom médio em pairar. E o que eu quero fazer é eu quero, eu não quero que seja como uma mudança simples e simples na cor da tipografia, eu quero torná-la mais suave. Então o que vou fazer é ir aos efeitos. Então eu vou para a transição. E tudo o que realmente precisamos fazer aqui é definir a duração da transição. Se eu vou configurá-lo como um segundo, isso vai ser extremamente longo, mas você definitivamente será capaz de ver que essa mudança. Então, vou salvar o meu projeto. Vou para o meu único posto. E se você passar o mouse sobre nossos links, você pode ver que eles estão mudando muito, muito lentamente, essa cor. E eu acho que é um pouco longo demais. Então eu vou para algo como 0,3 segundos. E talvez apenas para tornar todo esse efeito um pouco mais distinto, se você quiser, talvez vá para a tipografia e digamos que ao passar o mouse, queremos, digamos que queremos mudar o peso da fonte. Então vamos com, sei lá, 600 talvez. E vamos salvar isso e atualizar minha página. E você pode ver que agora que as mudanças também tomadas, tomadas f, Claro que é apenas uma opção. Você pode fazer isso. É mais sobre aprender a técnica, é mais sobre aprender as ferramentas, como fazer isso. E como você pode ver aqui dentro de oxigênio em transições é um hematoma é realmente, muito, muito fácil acabar como em geral, como uma regra geral quando adicionar transição é que é mantê-los rápidos porque ninguém quer esperar para longas transições carregando e C e uma espécie de um feedback para que as transições são melhores quando são rápidas e não gostar pesado. Como neste caso, eu acho que se nós apenas mudar a cor sem mudar o peso da fonte, isso seria ainda melhor. Então o que eu vou fazer é na verdade eu vou remover essa mudança de peso da fonte. Vou mudar, vou deixar as mudanças de cor para me divertir com nossas categorias. E basicamente terminamos com a nossa barra lateral. Quero dizer, o que podemos fazer é adicionar a mesma coisa para as nossas etiquetas. Mas o processo seria, seria semelhante, bem, seria basicamente o mesmo. Tudo o que precisamos fazer é apenas adicionar os links, links adequados, e então estilizá-los. E é basicamente isso. Então o último passo aqui seria dois, eu acho, adicionar uma caixa de comentários aqui na parte inferior se você quiser permitir comentários em suas postagens de blog. Mas você pode fazer isso aqui dentro do oxigênio. Então vamos fazer isso a seguir. 64. 10.16Adicione os comentários: Se você quiser permitir comentários para o seu, para seus posts, você pode fazer isso aqui dentro de agosto não é muito fácil. Então o que vou fazer é certificar-me de que estou nas colunas certas. Então esse cara aqui, e eu vou começar a digitar, talvez vamos para a nossa árvore principal. Vou começar a digitar comentários para que possamos adicionar um comentário, listas comuns. Então, se você quiser mostrar primeiro os comentários, e então nós podemos adicionar um formulário comum. Então, se eu apenas clicar na lista de comentários e, em seguida, no formulário de comentários, você pode ver que esses módulos estão sendo adicionados ao nosso, para o nosso blog postar um modelo. No entanto, não podemos ver qualquer lista aqui, qualquer, qualquer comum porque este arcos específicos, eu não acredito que tenha qualquer comentário. Então, vamos resolver isso rapidamente. Eu vou para o meu, para o meu posto. Vou encontrar esses postos. Acho que é esse cara, então vou ver. Então esta é a nossa, esta é a nossa página. Nós vamos digitar algo como, Eu não sei se este é um comentário e eu vou clicar em postar comentário. E lá vamos nós. Agora temos o nosso comentário adicionado ao meu, à minha página e ao meu post. Então isso é, isso é realmente, muito fácil aqui dentro de oxigênio. E, claro, temos algumas opções de estilo aqui também. Deixe-me apenas atualizar a página e vamos pré-visualizar que se vangloriam. Então lá vamos nós. Aqui está a nossa recomendação, aqui está a nossa resposta. E, claro, se nós, se nós apenas ir para o nosso post e deixe-me apenas talvez pegar este post e abri-lo em nosso modo de navegação anônima para que você possa ver como ele se parece. Quando o usuário não está conectado. Aqui você vai obter como o seu nome, e-mail e campos do site que você tem que preencher, a fim de, para realmente postar um comentário. Então vamos voltar ao nosso projeto. Lá vamos nós. Então, no que diz respeito à nossa lista de comentários, nós temos algumas predefinições, não muitos obter nossa predefinição padrão é este cara bem aqui. E podemos mudar isso e mudá-lo para este realce cinza ou blocos brancos. E, tanto quanto este formulário de comentários de resposta de licença vai, podemos alterar a cor de fundo do botão. Podemos mudar a cor da borda. Então, talvez só para manter nosso design consistente, vamos fazer isso. Eu não vou tocar no raio da borda, mas eu vou mudar a cor de fundo do nosso botão para talvez seja cor marrom, cor do texto talvez para nossa cor cinza. Lá vamos nós. Então vamos ver como vai ficar no nosso front-end. Vamos atualizar essa página. E esta é a nossa caixa de comentários e esta é a nossa deixar uma resposta, o módulo bem aqui dentro, dentro de oxigênio. Então, ao todo, bonito, muito fácil. Se você quisesse mudar como mais aspectos deste, desses módulos, eu temo que você teria que cavar em codificação. Mas as chances são também que ela gostaria de usar um uso de um plug-in para como comentários sociais, talvez que alguém teria que fazer login no Facebook ou qualquer outra plataforma de mídia social para postar comentários sobre o seu, em seus posts de blog. E isso é claro assumindo que você quer adicionar, que você quer permitir comentários em seu, em sua postagem de blog. Então eu vou deixar como está. Acho que está tudo bem. Então basicamente temos nossa página de postagem do blog criada. Então agora podemos passar talvez para as páginas do nosso portfólio. Então, digamos que queremos mostrar nossas habilidades ou que nosso cliente queira mostrar seus projetos. Então vamos ver como podemos fazer isso aqui dentro do oxigênio. 65. 11.1precisamos de algumas preparações primeiro: Então agora vamos avançar para criar em nosso portfólio. Mas eles decidiram que talvez pudéssemos levar isso a um nível acima. Podíamos adicionar um portfólio simples, como uma galeria, ao nosso designer anterior. Mas eu pensei que, você sabe, em sua carreira de design, sua carreira de desenvolvimento, você poderia querer criar um site de portfólio mais elaborado. Ou talvez você queira criar um site de portfólio para seus clientes. Portanto, não, é essencial aprender mais algumas técnicas de layout ao criar portfólios e páginas de portfólio. Então eu pensei que poderíamos criar um design completamente novo, um site completamente novo e o novo que basicamente será, vai, nos permitirá aprender novas técnicas de layout. Então eu decidi criar uma página completamente nova que eu chamei apenas portfólio. Bem, Novo Novo Site. E eu adicionei algumas páginas, 1-2-3, apenas quatro páginas. E eu também tenho uma instalação de oxigênio fresco com, sem quaisquer modelos aqui. Então o que eu quero fazer é criar uma descida. Talvez eu te mostre o que eu queria. Digamos que esta é a nossa primeira página. E o que eu quero é ter um cabeçalho, mas um cabeçalho lá vai ser colocado de lado. E aqui, o que eu quero é que eu só queria ter um logotipo simples. Então deixe-me apenas criar um logotipo como este. Então eu gostaria de ter um menu aqui em baixo e talvez algumas, algumas informações de direitos autorais aqui em baixo, aqui em baixo. E tudo poderia ser colocado no centro em algum lugar aqui ou em cima. Aprenderemos as duas técnicas. E então o que eu quero fazer, deixe-me apenas ir como Starker, vamos digitar como paisagem. Então o que eu quero fazer é criar um controle deslizante. E deixa-me pô-lo atrás. Eu quero criar um controle deslizante, mas eu quero isso, Eu quero que este controle deslizante seja como colocar abaixo, talvez não 200 botão, 2 mil. Eu quero que este controle deslizante para ser PUT abaixo do meu, abaixo do meu, este poço faz cabeçalho como cabeçalhos barra lateral. Mas eu quero que esta barra lateral seja, eu queria ser transparente. Então eu vou pegar esse retângulo. Como ele semitransparente, algo assim. E eu quero ter várias imagens como no fundo, mas eu quero essas imagens e mudar, eu queria torná-lo como um controle deslizante simples e simples. Então esta vai ser a nossa primeira coisa fina, nossa primeira ordem de trabalho. E quando criarmos isso, o que quero fazer é criar uma página de portfólio. Eu quero criar um modelo de portfólio que hospede algumas imagens e algum texto, um título apenas para que possamos mostrar, mostrar realmente nosso portfólio para nossos clientes. Então vamos começar com a criação do nosso primeiro modelo que vai ser, será este real, na verdade o modelo de primeira página. Então vamos começar a fazer isso a seguir. 66. 11.2Crie o modelo de página inicial: Então eu estou aqui dentro do oxigênio e eu vou adicionar um novo modelo, esta cidade modelo. Será o nosso modelo principal. Então vou chamá-lo assim. E vou aplicá-la a todas as minhas páginas. Vamos colocar assim. E eu vou publicar. Então eu vou editar, editado com oxigênio. E vamos escrever aqui dentro do nosso modelo com a minha tela em branco favorita pessoal. Eu não sei. Eu realmente gosto de soprar em Poseidon y. Então o que eu quero fazer é criar como um cabeçalho à esquerda, como um cabeçalho e barra lateral e alguns, alguns textos de solda aderência um controle deslizante abaixo desse cabeçalho. Então o que eu vou fazer é, como de costume, eu vou apenas criar uma seção simples. E essa seção é supostamente uma seção de largura total. Então eu vou para o tamanho avançado e espaçamento. E aqui em baixo eu tenho o recipiente de seção com opção, que eu vou definir para largura total. E como você pode ver, nossa seção está se espalhando por nossa página. E eu não quero que esta seção tenha qualquer preenchimento. Quero que todos esses valores sejam definidos como 0. Eu vou salvar isso. Então o que eu preciso agora é que eu realmente preciso div. Então, uma div que vai estar à esquerda que hospedaria nossos elementos de cabeçalho. E então uma, outra div que hospedará nossas imagens de fundo. Então eu só vou adicionar minha primeira div. E talvez vamos chamá-lo de algo como, vamos renomeá-lo. Vamos chamá-lo de cabeçalho. Lá vamos nós. E então eu vou adicionar outro div, e eu vou chamá-lo, vamos chamá-lo de controle deslizante. Lá vamos nós. Então este é o nosso cabeçalho e este é o nosso controle deslizante. Mas como você pode ver, eles estão sendo colocados em cima um do outro. E isso porque nossa seção, por padrão, está empilhando elementos filho verticalmente. Então vamos empilhá-los horizontalmente. E eu vou pegar minha cabeça. E digamos que eu queria ser algo como, vejamos, 20% de largura. E então eu vou pegar o controle deslizante. E, por enquanto, eu só vou definir para 80%, só para que você possa ver o que estamos fazendo aqui. Então temos nosso primeiro DEF, nosso cabeçalho, e então temos nosso controle deslizante, div deslizante. Então, como eu mencionei antes, eu quero este, este cabeçalho, este cabeçalho barra lateral. Eu queria ser semitransparente. Então, vou para o Advanced. Vou ao fundo, pegar a cor de fundo. Eu vou torná-lo preto, mas eu vou diminuir a opacidade um pouco para talvez algo como, vejamos, 66 apenas por agora. E agora, se eu ir para novamente tamanho avançado e espaçamento e agarrou a opção de altura, configurá-lo para 100 v h. Como já sabemos, nosso cabeçalho está se espalhando de cima para baixo. E se fizermos o mesmo para o nosso controle deslizante, então eu vou para fundo avançado. Eu vou usar a cor de fundo por enquanto, só para que você possa ver. E então eu vou pegar este tamanho e espaçamento para os mesmos 100 Vh. Você pode ver que ambas as minhas seções estão se espalhando e se espalhando de cima para baixo. E esta seção principal está se espalhando da esquerda para a direita. Mas é claro que queremos que este controle deslizante vá abaixo do nosso cabeçalho, mas isso é algo que vamos fazer mais tarde. Por enquanto, vamos começar a preencher o nosso cabeçalho com algumas informações. Então vamos adicionar um logotipo, vamos adicionar alguns como um menu. E então vamos adicionar algumas informações de rodapé aqui embaixo. Então vamos começar a fazer isso a seguir. 67. Adicione elementos de cabeçalho: Então, para o nosso cabeçalho, temos que adicionar um logotipo, um menu, e, em seguida, algumas informações de rodapé aqui em baixo. Então eu vou começar com o logotipo. Então eu vou clicar em adicionar, e eu vou digitar no título. Vamos chamar isto. Estou tentando fazer como um blog de fotografia, o melhor portfólio de fotografia. Então eu vou chamar isso de taxa de crescimento superior. Lá vamos nós. E talvez eu só vou adicionar um ícone como talvez, talvez não como ao lado, mas no topo deste título. Então eu estou indo apenas para clicar em adicionar, e eu vou apenas digitar no ícone. Lá vamos nós. E, claro, I1, este ícone para estar no topo. Lá vamos nós. Então eu não tenho nenhum tipo de cores específicas definido para este, para este blog, para este portfólio ou um site. Então eu só vou pegar algumas minhas, algumas das minhas cores favoritas como eu vou com F9 ou um destino fatal de oito para este. E acho que podemos adicioná-lo. Vou chamar-lhe o que é. Então F9, F9, F9. E então nós vamos e então eu vou pegar talvez primeiro vamos diminuir o tamanho para algo como 32. E então vamos mudar isso para, vamos tentar a câmera. Talvez esta câmera retrô. Lá vamos nós. E para a fotografia, vou mudar a cor. E eu vou tentar encontrar uma fonte bonita e bonita. Então eu acho que nós poderíamos talvez ir para encontrar o Google Fonts para encontrar uma boa fonte. Ou podemos ir com o que já sabemos, como Bree Serif, isso vai ficar bem. E talvez eu só vou tentar criar um melhor peso de fonte. Talvez isso seja um pouco grande demais. Isto deve ser, isto deve estar tudo bem. Então, é claro que o que eu gostaria de fazer é que eu gostaria de colocar esses caras no centro do meu cabeçalho. E isso é super fácil. Eu só vou pegar meu cabeçalho e eu vou alinhar horizontalmente todos esses elementos. E eu vou para o tamanho e espaçamento avançados. E eu vou adicionar um pouco de preenchimento a ele, como talvez 50 pixels de cima, pode estar na parte inferior e talvez 25 à esquerda e 25 à direita. Claro que poderíamos, se quiséssemos, poderíamos brincar com o tamanho do nosso rumo também. Talvez fazer um maior, pode torná-lo nós menores vai ser totalmente até você. O que eu quero fazer é mostrar a vocês, eu quero que vocês aprendam a brincar com as opções de layout ao criar esses sites padrão. Porque poderíamos gostar de um, como um cabeçalho no topo, colocar um logotipo no lado esquerdo, menu à direita. Mas isso é um pouco chato. E quero dizer, nós queremos, nós queremos fazer algo extra para o nosso fotógrafo. Assim que tivermos o logotipo, poderíamos até embrulhá-lo com um div e chamá-lo de logotipo. Isso seria uma boa prática organizacional. Mas agora vou adicionar um menu. Vou em frente e escolher o menu pro. E como podem ver, este é o meu único menu, por isso foi adicionado instantaneamente. E o que eu quero fazer é que eu quero mudar um monte de coisas realmente sobre isso. Agora este cardápio. Então eu vou para o menu da área de trabalho. E para a orientação, quero mudar para vertical. Lá vamos nós. Para a tipografia, acho que poderíamos ir com algo simples como talvez loteria. Vamos com isso. Eu quero mudar a cor, mas talvez desta vez vamos mudar para algo como um pouco mais acinzentado. Talvez eu vá adicioná-lo ao meu, às minhas cores globais. E eu vou chamá-lo de cinza escuro. Lá vamos nós. E deixe-me apenas pode ser capitalizar a fonte. Vamos talvez espalhar as cartas um pouco. E vamos aumentar o tamanho da fonte para algo como 22 talvez. E então eu vou para o espaço em uma linha e fronteira. E eu quero alinhar o centro de texto. Lá vamos nós. Talvez eu só vá diminuir o peso da fonte um pouco para algo como 20 ou talvez até 18. Lá vamos nós. E, em seguida, vamos para novamente para pairar e ativo. E eu gostaria de pairar, rapazes podem ser, torná-lo ainda mais escuro. Talvez assim. E eu vou adicionar a cor e eu vou chamá-la de cinza pairando. Lá vamos nós. Então, sempre que alguém paira sobre o nosso menu, ele vai virar e muito, muito escuro. E claro que ainda teremos que brincar com a capacidade de resposta, mas faremos isso mais tarde. Nós vamos cuidar da capacidade de resposta para o menu para este cabeçalho e todos os nossos elementos de cabeçalho. Por enquanto, vamos apenas adicionar o, os elementos que realmente precisamos em nosso cabeçalho. Assim que tivermos o logótipo, temos o menu. Vamos talvez adicionar a informação do rodapé. Então eu vou começar com ícones sociais. Então eu só vou digitar, digitar isso. E eu vou adicionar um monte deles são na verdade, vamos adicionar todos eles, todos esses ícones. E definitivamente vamos torná-los menores para algo como 18 pixels. Por que não? E 1010 pixels de espaço ao redor do, esses ícones é bom. Vamos verificar as cores. Vamos com a nossa cor cinza escuro. Lá vamos nós. E se você quiser, você pode usar cores da marca. Isso é algo que você poderia fazer, mas eu vou usar nossas cores cinza. E você também pode brincar com essas opções como Quadrado, Círculo e em branco. Acho que vou com o quadrado. Acho que eles pareciam os melhores neste cenário. Talvez eu vá aumentar o tamanho e diminuir o espaçamento entre meus ícones em algo como dois. Acho que isto deve ficar bem. E por último, vamos adicionar rapidamente algumas informações de texto. Digamos que esta vai ser a nossa, esta vai ser a nossa provável informação de direitos autorais, algo assim. Já sabemos como fazê-lo. Então eu vou apenas digitar rapidamente em algo como Arnold 20-20 portfólio fotolitografia, algo assim. E, claro, vamos mudar a cor do texto. Vamos torná-lo significativamente menor, algo como dez pixels. E então eu vou para tipografia avançada. Vou alinhar as mensagens ao centro. Então agora seria uma boa hora para começar a se alinhar em tudo bem. Podemos deixar assim, mas parece muito apertado para o meu gosto. Eu acho que precisamos de um pouco mais de espaço entre todos esses elementos, mas também precisamos de algum alinhamento agradável em relação ao nosso cabeçalho. Então vamos começar a brincar com as opções de alinhamento e o espaçamento. No próximo vídeo. 68. 11.4Altere o alinhamento e layout: Então eu acho que devemos começar com a adição de algum espaçamento entre esses elementos, especialmente o menu e o logotipo e os ícones de mídias sociais. Então o que eu vou fazer primeiro é pegar o menu pro, ir para Tamanho avançado e espaçamento. E eu vou adicionar alguma margem, como talvez 50 pixels para cima e para baixo. E se você quisesse deixar isso assim, se, se gostarmos desse tipo de layout, agora poderíamos deixar assim. Isto parece bem. Mas e se quiséssemos talvez espalhar todos esses elementos são e se quiséssemos usar todo o espaço que temos aqui? E se quiséssemos gostar, deixar o logotipo em cima, pegar o menu e colocá-lo exatamente no meio. E então pegue os ícones das mídias sociais e nosso texto de direitos autorais e coloque-o exatamente na parte inferior. Então, para isso, eu vou pegar minha cabeça. Vou me certificar de que foi selecionado. E eu vou pegar essa opção como esta opção de alinhamento de item vertical, última opção como um espaço entre eles. Agora o que acontece aqui é que todos esses elementos estão tentando, você sabe, espaço uniformemente, verticalmente para gostar de preencher todo esse espaço disponível que temos aqui. Mas como esses elementos são separados, você pode ver que eles estão tomando toda a barra de espaço e, em seguida, editar os espaços entre eles são iguais. Mas gostaríamos que esta fotografia de topografia e a carga ficasse juntos. E esses ícones de mídia social e as informações de direitos autorais, gostaríamos que ficassem juntos. Se fosse uma imagem simples, funcionaria bem. Mas, no nosso caso, não é. Mas, na verdade, é uma coisa boa, porque seremos capazes de aprender a desafiar essas questões. Então o que eu vou fazer é pegar essa camada de vir e eu vou embrulhá-la com div. E então eu vou colocar o título dentro daquele div. E como você pode ver que essa fotografia o título e o ícone estão agora sendo embrulhados em uma div. E essa div é realmente colocado em cima do nosso, do nosso rumo. Mas é claro, tudo o que precisamos fazer é alinhar tudo ao centro. E então fazemos a mesma coisa para nossas mídias sociais, ícones de mídias sociais. Então vou embrulhá-los com o vivo. No texto, você pode ver um centro de linha vertical. Você pode ver que agora todos esses elementos estão sendo colocados bem juntos e exatamente no fundo. E digamos que você gostaria de colocar esse menu no topo junto com Logotipo, mas você gostaria de manter os ícones de mídia social aqui na parte inferior. Então, como poderíamos fazer isso? Fazer isso? Bem, a maneira mais fácil seria pegar o menu e colocá-lo dentro daquela div. E iria junto com esta fotografia de logotipo, o ícone, o título, e uma div abrangente. Então isso é algo que você poderia fazer. E, claro, se você quisesse ter o menu no fundo, bem, você só teria que colocá-lo dentro daquela div. Então esta opção, apenas mostre para você mais uma vez. Este espaço de opção entre Permite espaçar todos os elementos verticalmente para que eles se encaixem, para que eles preencham todo o espaço disponível. Mas não quero que este menu seja assim. Eu queria estar separado. Claro, se tivéssemos mais algumas páginas aqui, poderíamos adicioná-las e elas preencheriam todo este espaço muito bem. Mas, no nosso caso, só temos esses elementos. Então agora parece, parece que é assim. Então, agora que sabemos, cuidamos de nossas opções de layout, acho que é hora de começarmos a brincar com nossa capacidade de resposta. Então vamos começar a fazer isso no próximo vídeo. 69. 11.5Fixe as responsives do cabeçalho: Então, para corrigir a capacidade de resposta, o que vou fazer é ir ao contentor da FirstPage, este tipo aqui. E como você pode ver, neste ponto, eu acho que o menu parece bem, mas este texto de fotografia é muito grande, então eu vou apenas torná-lo menor, algo como 22. E eu vou mudar o tamanho do ícone para algo como talvez 24 ou talvez 22 também. E no que diz respeito aos ícones das mídias sociais, talvez pudéssemos para começar, vamos pegar a div e nos certificar de que temos nossos itens centralizados. E então eu vou apenas ir duas vezes ícones de mídia social. E eu vou provavelmente fazer esses caras um pouco menores para talvez algo como 14 pixels. Isso deve ser bom. Agora vamos para o nosso contêiner de página. Mas antes disso, talvez vamos apenas adicionar um pouco mais de espaço como aqui, à esquerda e à direita. Então, eu só vou pegar minha cabeça. E neste ponto de interrupção, quero que a largura seja um pouco maior. Vamos ver, uns 25. Ou pode ser ainda maior para algo como 2727 deve estar bem. Então eu vou para menos de 992. Acho que 27 vai ficar bem. Em termos de em termos de tamanho. E todos os outros elementos parecem bonitos, muito bons. Acho que estão bem. Talvez me deixe pegar em todos os dispositivos. Agora, eu realmente não gosto do espaço entre os ícones das mídias sociais e este texto. Então eu só vou pegar este texto inferior aqui e este ponto de interrupção, eu vou adicionar talvez cinco pixels de margem, eu acho que distribuir. Tudo bem? Então, quando nós, quando vamos para menos de 992, ainda parece bem. Mas talvez vamos mudar isso com talvez 33. Então agora vamos para menos de 768. E eu acho que, que este ponto de interrupção coisas vai nosso layout não vai funcionar mais bem. Quero dizer, mesmo que tenhamos uma imagem de fundo, ainda não vai parecer profissional ao meu gosto. O que eu gostaria de fazer é eu quero começar com este ponto de interrupção I1, o layout para mudar completamente. Eu quero, eu quero ter como um cabeçalho padrão no topo. E eu quero ter como um, bem nosso controle deslizante para ser colocado horizontalmente, mas mais para o fundo. Então, como poderíamos fazer isso? Lembre-se que nossa seção ainda herda estoque pilha elementos filho horror horizontalmente, esse recurso. Então, quando adicionamos esse ponto de interrupção, diga-lhe para empilhar elementos filho verticalmente. Você pode ver que agora nosso cabeçalho está sendo colocado em cima do nosso controle deslizante em breve. Mas como esse cara está definido para ser 100 Vh por sua altura, sua herança, esse valor. Você pode ver que ele não ocupou todo este espaço para o lado. Então o que eu vou fazer é pegar minha primeira cabeça e eu vou mudar essa altura. Então eu vou para o tamanho e o espaçamento. E para a altura, vamos tentar Oran. Lá vamos nós. E para a largura, vamos com 100% para colocá-lo, para colocá-lo assim. E acho que nesse ponto de interrupção, talvez pudéssemos pegar nosso menu e talvez mudar o espaço de margem. Acredito que foram 25 ou 50 pixels. Então vamos com dez, de cima e de baixo. Eu acho que parece tudo bem, especialmente quando nós pegamos eles pro menu, nós vamos entrar em dizer-lhe para se transformar em um menu móvel em menos de 768. E então poderíamos talvez mudar alguns aspectos sobre isso. Então eu vou me livrar desse ícone. Eu não quero ter o texto do menu. Eu quero ter os bares. Então vamos começar a digitar em barras. Lá vamos nós. E eu quero mudar essa cor para minha cor cinza deslizante. Lá vamos nós. E por enquanto, vou deixá-la como está. Poderíamos brincar com a capacidade de resposta, com a aparência do menu ou do menu em dispositivos muito menores, mas já sabemos como fazê-lo. E eu só quero me concentrar mais em mudar as opções de layout aqui. Então, quando vamos para menos de 480, menus ainda parece bom. Então, se você agora vai para todos os dispositivos, este é o nosso, este é o nosso cabeçalho. Este é o nosso cabeçalho em duzentos e vinte e nove noventa e dois. Mas quando vamos para menos de 768, você pode ver que nosso layout muda completamente. Então, em dispositivos menores como smartphones, isso é o que veríamos, certo? Então isso é tudo bom e bom. Mas que tal como fazer essa seção deslizante ir, na verdade ir abaixo do meu heterossexual porque agora está definido para 80%. Mas e se quisermos fazer 100% de largura? Você pode ver que ele não está realmente indo abaixo da minha cabeça. E se eu for ao fundo só para mostrar o que quero dizer, vou me livrar disso e vou escolher qualquer imagem. Você pode ver que ele foi colocado bem aqui, mas ele não vai entrar em nosso cabeçalho e nosso cabeçalho tem uma cor de fundo. É verdade, mas essa cor é transparente. Mesmo que eu me livre disso, você pode ver que nós não temos esse cara, o controle deslizante em breve sob nossa cabeça. Então, como podemos, como podemos mudar isso? Vamos mudar isso, em apenas um segundo. Por enquanto, deixe-me voltar à minha cor original. Acho que foi alguém em algum lugar por aqui. O que eu quero fazer agora é eu quero realmente adicionar um controle deslizante para isso, para esta seção. E eu quero colocá-lo debaixo da minha cabeça. Então vamos começar a fazer isso no próximo vídeo. 70. 1.6Coloque o deslizador abaixo do cabeçalho: Então temos o nosso modelo quase pronto. O que queremos fazer agora é que gostaríamos de colocar o Malloc, o controle deslizante abaixo do nosso cabeçalho, mas não apenas o controle deslizante. Uma vez que este vai ser o nosso modelo. E gostaríamos de permitir que nossos usuários adicionem projetos semelhantes ao nosso portfólio. Temos que pensar nisso também. Então o que eu vou fazer é adicionar a esta seção, eu vou deixá-lo como está, mas eu vou apenas adicionar o conteúdo interno a esta seção em apenas dois que sanções ou eu não quero colocá-lo como em todos os lugares. Eu só vou colocar essa seção dentro desse controle deslizante, elemento deslizante, como a seção de controle deslizante. E eu só vou salvar esse cara. E eu vou voltar para a administração. Eu vou pegar minhas páginas e eu vou para a minha primeira página inicial que eu vou adicioná-lo com oxigênio e eu estou aqui dentro da minha página. Então o que eu realmente quero fazer é terminar neste controle deslizante agora mesmo. Lá vamos nós. E deixe alguns, fazer alguma configuração simples. Então vamos mudar, vamos diminuir a velocidade da animação como 350. Acho que quero remover o Perrin ao redor dos slides. Eu eu não vou estar usando que pontos, então eu não preciso desta opção deslizante sobreposição pontos. Eu quero-os. Quero que os slides se estendam até a mesma altura. E para a configuração, não quero mostrar setas. Não quero mostrar os pontos. Quero fazer com que seja autoplay 3 mil. Vamos deixá-lo assim, e eu quero torná-lo infinito. Então, a seguir, o que eu tenho que fazer é eu apenas vou me livrar desses dois controles deslizantes. O que eu tenho que fazer é adicionar, mas eu não vou adicionar uma imagem ao meu controle deslizante. Vou adicionar uma imagem de fundo porque quero brincar com o posicionamento das imagens. Então o que esse slide selecionado, eu vou para a imagem de fundo e eu vou pegar essa opção. E enquanto esta imagem, e eu vou selecionar a imagem, e agora para o tamanho do plano de fundo, eu vou configurá-la para cobrir. Não quero que se repita. E eu quero colocar o ponto de foco exatamente no meio. E nós já sabemos como fazer isso é que eu vou com esquerda 50% e Top 50%. Lá vamos nós. E, claro, eu vou querer meu controle deslizante para esticar todo, toda a altura da minha página ou minha janela de exibição. Então eu vou para avançado com o controle deslizante selecionado. Então eu vou para o tamanho e espaçamento e digite 100 para este 100 vh para o meu, para o meu controle deslizante. Então o que eu vou fazer é simplesmente duplicar meus slides duas vezes. E vamos mudar a imagem de fundo, talvez, para este tipo. E para o último cara, vamos mudar o passado para esse cara. Lá vamos nós. Deixe-me ver se eu definir os slides para infinito, mas infinito. Por isso, vou guardá-lo. E vamos ver o nosso, vamos ver a nossa página. Vou refrescar isso. E lá vamos nós. Temos nosso controle deslizante funcionando como deveria. E, claro, quando o tornamos menor. Então, quando descemos e descemos, o controle deslizante funciona e os pontos de quebra Brewer também funcionam. Então, temos a nossa primeira página. Basicamente, vou criar. Então, agora que temos esse layout principal para criá-lo, talvez tenhamos dado um monte de passos, mas ao todo, uma vez que você pegar o jeito dele, você verá quanta flexibilidade você obtém com o oxigênio ao criar esses layouts agradáveis. E agora que temos nossa primeira página criada, talvez deixe-me desligar a reprodução automática. Temos a página, a página principal criada. Agora é uma boa idéia adicionar algumas páginas de portfólio. Precisamos disso como uma única página de portfólio porque queremos adicionar projetos como um único para o nosso portfólio. E, claro, também queremos criar como uma página principal do portfólio. Então vamos fazer isso usando como um plugin visual chamado portfólio visual. É um pequeno plug-in agradável que permite que você crie alguns portfólios realmente bem olhando, com boa aparência. Então vamos começar a fazer isso a seguir. 71. 11.7Adicione o plugin de portfólio: Então, no meu diretório de plugins, eu vou adicionar um novo plugin e vou procurar por portfólio visual, este cara aqui. E eu vou instalá-lo e então eu vou ativá-lo. Assim, a forma como este plug-in funciona é que permite adicionar itens de portfólio, que são basicamente projetos de portfólio único. E também permite que você adicione layout para que controlar a forma como seu portfólio. Portfólios, Basicamente galerias de portfólio, Luke. Então vamos criar um pequeno portfólio rápido apenas para ver como esse plug-in funciona. Então o que eu vou fazer é adicionar um novo Layout. Vou chamá-lo de meu portfólio. E aqui, como você pode ver, você pode escolher quais elementos devem ser incluídos em seu portfólio. Por enquanto, não temos nenhuma postagem, vamos adicioná-las mais tarde, mas podemos adicionar imagens. Então eu vou clicar em imagens e imagens. E eu vou apenas adicionar todas essas imagens. Vamos ver como será. Agora, este plug-in, desde recentemente, ele funciona usando blocos de trabalhadores para o bem ou para o mal. Então, aqui neste elemento do blog, você pode ver que temos algumas opções que podemos, que podemos adicionar que podemos mudar para o nosso portfólio. Então, em primeiro lugar, em primeiro lugar, temos nossas configurações de imagem bem aqui. Então, se você quiser, você pode deixar esses títulos para suas, para suas imagens. Então, quando passamos o mouse sobre essas imagens, você pode ver que nós temos e os títulos da imagem, podemos configurá-los para o título da imagem ou podemos configurá-lo para personalizado. Vou deixar para o título da imagem. Poderíamos apagar essas descrições, se quiséssemos. Poderíamos dizer que, por exemplo, nossa descrição seria nossa legenda da imagem, antiga ou descrição. Mas acima de tudo, podemos mudar o layout do nosso portfólio. Então eu vou clicar nesta opção Itens. E por padrão temos esses azulejos bem aqui, mas poderíamos escolher a alvenaria se você quisesse. A grade justificada ou carrossel. E, claro, cada um deles, cada um desses layouts tem lá, tem o seu próprio, tem as suas próprias opções secundárias. Então vamos aos azulejos. E quando clicamos nesta opção Editar blocos, você pode ver que temos diferentes blocos, diferentes blocos como layouts que podemos usar. Então vamos talvez usar, talvez este, este parece bom. Vou deixar assim. Podemos mudar a lacuna entre as nossas imagens. Eu vou para talvez como Tanner. Lá vai você. E então quando vamos para o estilo de itens, podemos mudar a maneira como este todo como este efeito desta sobreposição com a cor e o título, como ele se parece. Então eu faço e exibo o título, mas eu não quero ter a data. E eu quero exibir a sobreposição apenas ao passar o mouse. Então, será algo parecido com isso. Agora podemos, é claro, mudá-lo para talvez como clássico. E isso será mais ou menos parecido com isso. Podemos alterá-lo para voar, que faria a sobreposição, sobreposição como mosca de uma direção do cursor do mouse e emergir. Faria com que parecesse assim. Eu vou com a mosca. Parece legal. Também podemos alterar a cor de fundo de sobreposição. Então vamos com essa cor preta, mas eu vou reduzir a opacidade. Então, quando passamos o mouse sobre a nossa imagem, ela se parece com isso. E poderíamos mudar a cor do texto de sobreposição, se quiséssemos. Então, em vez de branco, poderíamos fazer algo como, como cinza claro, talvez assim. Pode ser um pouco cinza mais claro, assim, ou até mais leve do que isso. Lá vamos nós. E há itens de ação de clique. Podemos desativá-lo completamente. Poderíamos definir a URL, a URL. E isso significaria que sempre que clicarmos em uma imagem, ela nos levará a um portfólio de projetos e como uma única página de portfólio de projetos. E então podemos escolher o pop-up, que na verdade apenas para fazer com que nossas imagens sejam exibidas em uma janela pop-up. Então, vou deixar este pop-up por enquanto. Vou deixar o título da imagem e a descrição da imagem. Está tudo bem. Vou apenas clicar na atualização. O que vamos usar é este código curto de layout bem aqui. Então eu vou copiar isso e então eu vou para a minha página do portfólio e eu vou colá-lo dentro da minha seção para o portfólio deles. Mas vamos fazer isso no próximo vídeo deles. 72. 11.8Adicione o portfólio: Então eu vou para as páginas e eu vou pegar a página do portfólio. E eu vou editá-lo com oxigênio. E aqui vou para a estrutura. E eu só vou adicionar uma seção. Lá vamos nós. E dentro desta seção, o que poderíamos realmente fazer é adicionar um título. E vamos digitar exatamente o que é portfólio. Talvez se escrevêssemos corretamente, seria ainda melhor. Lá vamos nós. E então eu vou apenas adicionar um texto. Simplesmente assim. E vamos deixar isso, vamos deixar assim por enquanto. O mais importante aqui é adicionar o próprio portfólio. Então nós temos o título, nós temos o texto. Agora vamos adicionar o portfólio. Então eu vou clicar em adicionar e eu vou apenas digitar o código curto. E eu vou colar o atalho completo que acabamos de copiar. Só um segundo para ir e eu vou salvar isso. E neste caso você pode, você pode encontrar um pequeno, um pequeno problema porque quando nós apenas atualizamos nossa página, deixe-me apenas atualizá-la. Vou ao Portfolio. Você pode ver o nosso imposto, mas esse portfólio não está sendo exibido de todo. E isso está acontecendo porque nosso código curto precisa ter, deixe-me ir para tamanho e espaçamento. Ele precisa ter como valores de largura. Vou apenas digitar 100 por cento. Lá vamos nós. Agora você pode ver que o, este, este módulo de atalho não é, ele é realmente mais visível. Quando refrescarmos esse cara. Você pode ver nosso portfólio funcionando, funcionando corretamente. E, claro, o que eu gostaria de fazer é que eu gostaria talvez adicionar algum espaçamento bem aqui. Então vamos fazer talvez uns 50 pixels. E eu vou acrescentar, eu não tenho 50, 50% pixels. Vou salvá-lo. E então vamos refrescar esse cara. E agora nosso portfólio está funcionando corretamente. Então esta é a maneira de adicionar nosso portfólio. E se você quiser deixar esse layout como está, você pode fazer isso. Mas poderíamos talvez adicionar como uma boa soma em preto, uma bela imagem de fundo para ele, e uma sobreposição. Então vamos ver como podemos fazer isso. Podemos pegar nossa ressecção. E agora, como você pode ver, não está se estendendo em toda a nossa página. Então, o que poderíamos fazer é pegar nosso tamanho de opções avançadas e o espaçamento e defini-lo para largura total. Mas isso fará nosso portfólio e nosso código curto ir todo o caminho para a esquerda. Então o que eu faria é que eu iria adicionar módulo colunas. E dentro desse módulo de colunas, talvez façamos algo como 50-50. E vamos colocar este cabeçalho em nossa coluna direita, esse texto em nossa coluna direita também. Colocamos dentro desta div, mesmo para o código curto. E agora vamos mudar isso com de dobrado, que div. Então eu vou para uns 25 talvez ou 22. E então eu vou pegar meu tamanho de seção e espaçamento. Eu não quero nenhum estofamento. Bem, eu definitivamente acho que poderia ser assim. Vamos deixar assim. E para a seção, eu também vou para o fundo e eu vou encontrar uma imagem. Vamos crimpar este, vamos selecioná-lo, então ele vai ficar assim. Mas quando agora vamos para a nossa página de portfólio, você pode ver que ela não parece tão grande. É bom que este portfólio é como colocar como, você sabe, como em toda a página. Mas temos que mudar algumas coisas sobre nós temos que mudar essa cor. E talvez pudéssemos mudá-los como a imagem lá atrás. E o que quero dizer com isso é que quando obtivemos essa imagem de fundo, poderíamos usar essa opção de cor de sobreposição de imagem. Então eu vou usar preto, mas eu vou mudar a opacidade para algo, mentir isso para torná-lo mais escuro. E eu vou mudar rapidamente a cor aqui. E esse cara aqui. E talvez vamos realmente adicionar algum número. Vamos trazer esse valor de volta. Então este 75 pixels, se estamos em cima e em baixo. E não vamos esquecer de pegar o fundo e um conjunto nosso fundo para cobrir. Sem repetição. E vamos definir para 50, 50% por cento, como fizemos antes. Agora, quando salvamos isso e atualizamos a página ou portfólio está parecendo muito, muito mais agradável. E nós temos nossa imagem de fundo, e nós temos nosso portfólio com o cabeçalho estático assim. E nosso, é claro, nosso histórico também está se movendo junto com nosso portfólio. Então é assim que você pode adicionar um portfólio usando este plug-in aqui dentro, dentro de nossa, bem, dentro de nossa página, dentro de oxigênio. Claro, o design neste caso é muito menos importante. E o que ainda precisamos cuidar dele, é claro, isso vai a capacidade de resposta porque agora não parece tão grande. Então, basicamente, o que teríamos que fazer é pegar as colunas. E poderíamos empilhar as colunas verticalmente, talvez a menos de 992. Neste ponto de interrupção. Vamos talvez adicionar alguma margem à nossa primeira div, esta div à esquerda. Vamos definir para talvez 20%. Lá vamos nós. Então agora podemos ver como ele realmente se parece. Então, como você pode ver, nós ainda temos alguns, você sabe, alguns problemas de capacidade de resposta. Quero dizer, quando atingimos esse ponto de interrupção, esse portfólio está parecendo bem se reajustando. Mas o nosso, o nosso dibs Não. Então vamos corrigir isso no próximo vídeo. 73. 11.9Fixa a responsividade: Então, realmente, a única coisa em termos de capacidade de resposta que precisamos corrigir aqui é esta seção sobrepondo nosso cabeçalho? O cabeçalho parece bom. O portfólio reajusta-se a si mesmo, mas este título, e isso não parece tão bom. Então o que realmente temos que fazer é quando vamos para menos de 768, é aqui que nosso layout muda. Teremos que adicionar alguma margem ou talvez até melhor seria adicionar preenchimento à nossa seção porque deixe-me apenas ir torres estruturar esta seção porque quando esse cara atinge esse ponto de interrupção, onde nosso projeto atinge esse ponto de interrupção, precisamos adicionar algum preenchimento porque queremos manter nossa imagem de fundo sozinha não, bem, intacta basicamente. Então deixe-me ir para o tamanho e espaçamento avançados. E eu vou mudar esse cara de pixels para porcentagens. E vamos tentar e 40%. Isto deve ficar bem. Deixe-me atualizar a página e talvez deixar eu pegar esse cara e atualizar a página. Você pode ver que agora você tem algum espaço de preenchimento e nós temos algum espaço bem aqui. Mas quando vamos mais baixo, quando você vai para 80, você pode ver que ainda precisamos adicionar apenas isso. Então eu vou tentar uns 55%. E vamos salvar isso e atualizar a página. E lá vamos nós. Temos essa capacidade de resposta consertada. Então, quando temos nosso layout apresentado assim, tudo parece bem. Quando atingimos o ponto de interrupção 7068, todo o layout muda. E para 80, o layout muda aqui também. Então é assim que você pode criar um portfólio é página de portfólio muito simples. Com esse plug-in chamado portfólio visual, tudo que você precisa fazer é adicionar um código curto e nunca se esqueça de defini-lo para 100% em termos de largura. Se você queria ser 100%, mas sempre dar-lhe alguns valores de largura. E se você quiser criar um como uma galeria, vontade. Lá vai você. Mas se você quiser, tipo, fazer todas essas imagens vinculadas a páginas reais do portfólio com mais algumas galerias ou impostos ou títulos, tudo isso. Bem, você precisa criar um modelo diferente aqui dentro do oxigênio. E isso é realmente uma habilidade muito útil e uma coisa muito útil. E nós definitivamente começaremos a aprendê-lo no próximo vídeo. 74. 11.10Adicione o modelo de portfólio único: Portanto, antes de adicionarmos nosso modelo de portfólio único, é uma boa ideia ter alguns projetos de portfólio já criados. Então, para fazer isso, eu vou para o nosso, nosso plugin e eu vou para itens Portfolio. E esses itens do portfólio são simplesmente personalizado post acostumados ambos os tipos de postagem personalizados. E você os adicionaria exatamente como seus posts regulares se você quiser escrever algo como um blogueiro. Então eu só vou adicionar novo. E eu vou chamar esse item de portfólio um ou no projeto de portfólio um e vou salvá-lo. E talvez eu vá pegar um pouco de Lorem Ipsum como de costume. Onde temos esse gerador lorem ipsum? E eu vou pegar um pouco disso. E eu vou digitar MLK ritmo do que n talvez com um espaço como esse. E eu também talvez vá ao documento e talvez colar algo como nosso trecho. Mas não tanto, mas algo assim. Isto deve ficar bem. E eu também vou colocar uma imagem em destaque talvez para esse cara. E vou publicar isto. E agora eu vou apenas criar um, pode ser um par mais, talvez mais três projetos. Não, basicamente da mesma maneira. Então, vou fazer isso agora mesmo. Ok, nós temos três itens de projeto do portfólio com imagens em destaque e algum conteúdo dentro. Então agora vamos realmente começar a criar nosso modelo. Vou usar oxigênio e depois modelos. Vou adicionar um novo. Vou chamar-lhe os itens portuários. Quero herdar o design do nosso modelo de manutenção. Eu quero, eu quero ter o mesmo efeito de cabeçalho. E depois vou para o singular. E eu vou encontrar itens de portfólio que correspondem com nossos itens de portfólio visual bem aqui. Vou publicar isto e editar com oxigénio. E agora, tudo o que precisamos fazer é adicionar as mesmas partes de layout que fizemos antes com nossa página de portfólio. Então, dentro do meu conteúdo interno com esta estrutura, eu vou adicionar uma seção que vai se estender por toda a página. Porque eu quero, quero dizer, você não tem que fazer isso. Se você só quer mantê-lo assim, você não quer que você não precisa disso. Como uma imagem de sobreposição, sobreponha um tipo de efeito. Você pode, nós podemos apenas deixá-lo, deixar esta página como está. Isso também vai ficar bem. Então, como eu gostaria que minha imagem de fundo mudasse, eu gostaria que ela correspondesse com nosso item de portfólio. Vou para o tamanho e o espaçamento. Vou escolher a largura total como o meu tamanho. E eu não quero ter qualquer estofamento. E agora o que eu gostaria de fazer é que eu gostaria de ir para o fundo, buscar opção e escolher imagem de fundo. Mas em vez de função de navegação, Eu quero clicar na opção Dados e eu quero escolher postar imagem em destaque. E isso vai ser, vai estar puxando nossa, nossa imagem em destaque do nosso banco de dados. E claro, como você, como de costume, eu quero ir com a capa do tamanho de fundo. Sem repetição. E eu quero colocá-lo no centro, então 50% para cima e para baixo. E então quando eu quiser sobrepor uma cor, então novamente, eu vou usar preto simples e eu vou soltar a opacidade para algo como 77. Acho que isto deve ficar bem. E eu vou salvar isso porque nós adicionamos esta imagem em destaque como, como nossa imagem de fundo. Toda vez que mudamos nosso projeto, você pode ver que essa imagem muda. Foi retirado da nossa base de dados. Claro, talvez você não veja que eu escrevi. Deixe-me ir rapidamente para o tamanho e o espaçamento. Vou aumentar a altura para 100 vh. Então este é o nosso projeto, um projeto para et cetera. Então essa imagem de fundo vai mudar. Então eu vou salvar isso. Então agora o que podemos fazer, o que temos que fazer é adicionar as colunas para hospedar nosso conteúdo. Alguns vão em frente com colunas. Novamente, 50-50. A esquerda, eu estou indo, eu vou ajustá-lo para 25. Então o vermelho será ajustado para 75. Esse cara aqui. Então, neste ponto, estamos prontos para começar a preencher nosso modelo vale alguns, alguns dados retirados de nossa base de dados. Então vamos começar a fazer isso no próximo vídeo. 75. 11.11Adicione os dados de portfólio dinâmico: Então, dentro da minha coluna direita, esta div que nós poderíamos realmente renomear, vamos chamá-lo de portfólio parecido com agulhas. Conteúdo do portfólio. Lá vamos nós. Então, o que podemos acrescentar aqui? Bem, tudo dependerá do portfólio, layout de portfólio único que você procura. Então, em primeiro lugar, poderíamos adicionar como um título de postagem. Então eu vou em frente e eu vou escolher WordPress. E então eu quero escolher dados dinâmicos. E eu vou seguir em frente e escolher o título. Então vamos, Nós temos o projeto portfólio para ir mudar a cor para esta cor branca ou o slide cinza, Talvez este branco, quase branco cor. Lá vamos nós. E é claro que podemos sempre mudar todos esses aspectos. Você pode mudá-los como achar melhor. E, claro, quando avançamos e mudamos nosso projeto, você pode ver que o título muda dinamicamente. Então, abaixo disso, poderíamos talvez adicionar como um conteúdo do nosso, do nosso projeto. Então o que eu vou fazer é de novo, eu vou para Add. E desta vez eu vou com o conteúdo. E como podem ver, meu conteúdo está sendo retirado do banco de dados. E novamente, vou mudar a cor do texto para esta cor mais clara. Mas o que poderíamos fazer, talvez gostaríamos de uma descrição do nosso projeto, mas talvez quiséssemos adicionar outras informações à direita. Então eu vou pegar essa div e eu vou adicionar texto, outro pedaço de texto. Mas eu vou apenas clicar dentro, pegar os dados de inserção. E eu só vou dar em trecho. E nós vamos salvar isso. Agora, como podem ver, temos o nosso trecho exposto aqui em baixo. Então, agora vamos dizer que eu gostaria de colocar esses dois pedaços de texto ao lado do outro. Então eu pegava meu div e diria esses elementos para serem empilhados horizontalmente assim. E talvez pudéssemos adicionar algum espaçamento entre eles. Então essa primeira div, esse cara aqui, vamos adicionar tipo, vamos ver, talvez 50 pixels de margem. E então eu vou pegar este pedaço de texto, tamanho e espaçamento. E eu vou adicionar uns 5050 pixels de, de espaço marginal. Agora, é claro, esses elementos são como conteúdo relacionado. Este projeto de portfólio dois tem apenas este pedaço de conteúdo, este texto, e este trecho. Então eu vou salvar esse cara. Vou voltar para o meu administrador. E eu vou ver os itens do meu portfólio. E acredito que foi o Projeto Dois. E agora cada mudança que fizermos aqui será refletida em nossa página de projeto do portfólio de projetos. Então, como eu disse, nosso layout, esse descontentamento, é esse conteúdo relacionado. Então. Onde quer que coloquemos aqui, será exibido em nosso projeto de portfólio. Por isso, não só tem de ser tributado. Por exemplo, se quisermos adicionar algumas imagens aqui dentro, poderíamos, ou poderíamos até mesmo adicionar um portfólio completamente novo. Mas infelizmente aqui dentro sensor de oxigênio, lembre-se que precisávamos adicionar como um valor de largura para, para nossos códigos de acesso. E basicamente, esses caras não vão realmente funcionar, pode ser quando uma atualização chegar. Mas por enquanto, se você clicar neste layout de portfólio visual e escolher seu layout como você pode se lembrar, nós já o criamos para nossa página principal do portfólio. Isto vai funcionar. Então, se adicionarmos esse layout, então, se formos para nossa página de projeto do portfólio, você pode ver que temos nosso título, temos nosso conteúdo, temos nossa barra lateral. E bem, este trecho, e nós temos nosso portfólio bem aqui. Mas é claro que também temos um pequeno problema aqui. Esta seção não está se estendendo em toda a altura quando rolamos para baixo nossa imagem e enquanto nossa, nossa, nossa página de portfólio. Então, como podemos consertar isso? Quando vamos para, quando vamos para o nosso, nosso modelo e pegamos nossa seção, podemos ver que temos este conjunto 100 vh aqui. Se nos livrarmos dele, Esta seção vai se adaptar ao conteúdo que hospeda. Mas o que queremos fazer é definir a altura mínima para 100 Vh. Assim, sempre será, Não importa o conteúdo que você tem dentro, ele sempre se estenderá em toda a altura. Deixe-me salvar esse cara agora, mas também se adaptará quando descermos. Por isso, neste momento, parece-se com isto. Quando salvamos isso, atualize a página, que a altura mínima é definida como 100 vh. Então, parece com isso agora, mas a largura máxima não é definir incompatível definido para 100 vh. Então, agora podemos rolar para baixo e podemos ver nosso portfólio aqui. E claro, como eu disse, este layout de portfólio vai ser totalmente com você. Você pode colocar aqui dentro o que quiser. Basta lembrar de adicionar, como os dados dinâmicos, o título e o conteúdo e o esforço. Se você quiser criar algo como uma barra lateral aqui, se você quiser como numerar o trabalho que foi criado ou a tecnologia que foi criada. Usaremos para criar esse projeto específico. Mas o mais importante é, é que você sempre verá, você sempre verá todo o seu conteúdo e, em seguida, seu projeto de portfólio específico, não importa qual projeto você escolher, todos dados dinâmicos e tudo depende do que você tem aqui. Você verá isso sempre aqui. Mas a nossa página do portfólio, se eu apenas ir para a nossa página do portfólio, vamos para o portfólio. Então, nossa página de portfólio mostra imagens. Não mostra nossos projetos. E então, como podemos realmente consertar isso? Então vamos corrigir isso no próximo vídeo. 76. 12.1Adicione os plugins do formulário de contato: Nos próximos vídeos, vamos dar uma olhada em adicionar uma página de contato ao nosso site. E se dermos uma olhada em nossa página de contato agora você pode ver que nós só temos um cabeçalho e um rodapé simples. Então o que temos que fazer é adicionar algumas informações de contato entre o cabeçalho e o rodapé e também um formulário de contato. É claro que você não precisa adicionar um formulário de contato. Você pode apenas inserir algumas informações de contato. Mas se você quiser ter um formulário de contato, vamos aprender como fazê-lo nos próximos vídeos. Então a primeira coisa que vamos fazer é adicionar um plugin, na verdade um par de plug-ins. O primeiro vai ser formas fluentes. Este é esse cara bem aqui. Eu vou instalá-lo e então eu vou, e então eu vou ativá-lo. E o próximo será, eu acho que o formulário de contato mais popular lá é o que é chamado de formulário de contato sete, você deve ter ouvido falar sobre ele. Então eu vou procurá-lo. Nós vamos instalá-lo e então eu vou ativá-lo. Por que escolhi os dois plug-ins? Bem, ele faz apenas para mostrar que para o oxigênio e funciona com qualquer tipo de qualquer forma de plug-in e que você pode escolher o que quiser. E um desses plug-ins, ou seja, nas formas fluidas, é que você não precisa fazer muito para fazê-lo funcionar e olhar agradavelmente. E eu acho que construir um formulário é mais fácil do que com o formulário de contato. Mas o formulário de contato é realmente simples e é flexível uma vez que você sabe como fazê-lo. Então eu só quero expandir suas habilidades. Você é um portfólio habilidoso. Se você quiser apenas ir em frente com um simples como um construtor de formulário de contato arrastar e soltar. Você pode fazê-lo com oxigênio. E se você quiser ir para algo mais como fazer você mesmo, uma espécie de plug-in, você pode fazer isso também. Então vamos começar com as formas fluentes. Então esse é esse cara bem aqui. Já temos uma demonstração do formulário de contato. Eu não preciso dele. Vou apagá-lo e acho que estamos prontos para adicionar o nosso primeiro formulário. Mas antes de fazer isso, precisamos ter alguns como alguns recipientes, como algum espaço para realmente colocar nossos formulários neles. Então, vamos adicionar uma seção e algum conteúdo à nossa página de contato primeiro. Então vamos começar a fazer isso no próximo vídeo. 77. 12.2Crie a página de contato: A primeira coisa que vou fazer é editar minha página de contato com oxigênio. E eu estou indo rapidamente para adicionar meu rodapé reutilizável e cabeçalho. E entre eles, vou apenas adicionar uma seção. E eu vou colocá-lo onde ele precisa ir. E agora nós poderíamos talvez em algumas colunas pode ser algumas divs, mas vamos mantê-lo simples. Vamos usar alguns ativos pré-projetados. Então eu vou clicar em adicionar. Vou em frente e escolher conjuntos de design de biblioteca. Talvez essas sanções atômicas e elementos. E vamos talvez pegar esse primeiro formulário de contato. Como você pode ver. Podemos até nos livrar disso, talvez esta seção, como você pode ver, já temos como uma seção de contato e contato muito simples pronto e esperando por nós. E aqui embaixo, você pode ver que temos essa div e que diz formulário de contato aqui. Oxygen funciona com qualquer plugin de formulários. E este é, na verdade, um ponto onde você pode colocar seu formulário de contato. Claro que você pode colocá-lo em qualquer lugar que você quiser. Mas desde que queremos pegar este design e queremos usá-lo como nossa referência. Vamos colocar nosso formulário de contato aqui. Mas para fazer isso, deixe-me remover primeiro o ícone e o texto. E este vai ser o nosso formulário de contacto. Fim de semana até pode ser renomeado para esse cara só para que possamos ver o que estamos fazendo aqui. Então contacte, lá vamos nós. E dentro desta div, esta div de contato, vamos colocar nosso formulário de contato. Então vamos agora primeiro criar o primeiro formulário de contato, e vamos colocá-lo dentro desta div. 78. 12.3Adicione o primeiro formulário de contato: Então deixe-me apenas ir em frente para o nosso, para o nosso plugin. Então eu vou pegar nossas formas fluentes. E eu vou adicionar um novo formulário. E poderíamos criar um novo formulário em branco. Mas vou usar rapidamente este formulário de contato básico. E eu vou clicar em criar formulário. E aqui, como você pode ver, temos nosso campo FirstName, Sobrenome, endereço de e-mail, assunto e sua mensagem. E quando passamos o mouse sobre cada um desses elementos, você pode ver que podemos mudar alguns aspectos sobre a mente, que alguns dos recursos podem estar disponíveis apenas, apenas nas versões pro de alguns plug-ins. Mas geralmente para como a forma básica e básica de contato de funcionalidades, elas devem ser suficientes. Então, de qualquer maneira, uma vez que você fez todos os seus ajustes e não, eu não quero aborrecê-lo com, você sabe, clicar e mudar em cada pequeno aspecto dele. Eu encorajo você a mudar ou para verificar todas as opções disponíveis uma vez que você selecionar o seu go-to plug-in formulário de contato. Mas, por enquanto, estamos aprendendo a adicionar um formulário de contato à nossa página. Então, uma vez que ele está pronto, eu vou escolher On Click on Save form. E você pode ver que aqui no topo, você tem este id forma fluente igual a dois neste caso. E isso é realmente algo que é chamado de atalho, que basicamente é um código que permite que os trabalhadores executem uma operação específica. Neste formulário, ele nos permitirá exibir nosso formulário de contato. Então, uma vez copiado para nossa área de transferência, podemos ir para o editor visual de oxigênio para nossa página, na verdade, bem aqui dentro desta div, não podemos simplesmente colar esse atalho de forma compacta. Isso não funcionaria. Precisamos primeiro adicionar um recipiente especial para o atalho oxigênio para saber que na verdade é suposto renderizar esse atalho. E que esse módulo, esse elemento felizmente é chamado de código curto simples. E quando colamos esse atalho nesta caixa de atalhos completa, você pode ver que nosso código curto está sendo bem processado aqui. Então, quando agora vamos para a nossa página de contato de ouro formulário de contato, eu vou clicar no contato. Você pode ver que temos nosso formulário de contato pronto e esperando por nós. E não se esqueça que podemos sempre fazer uma mudança como esta alinhamento do centro para a esquerda. Nós também poderíamos brincar com este estofamento bem aqui deste div. Mas se você quiser mudar alguns aspectos sobre esse formulário de contato, você precisa fazê-lo a partir dessa interface específica de plug-ins porque isso é apenas renderizar nosso atalho e a forma como ele foi configurado aqui dentro desse plugin. Então é assim que você pode inserir um código curto simples, formulário de contato simples. E agora vamos passar para o nosso próximo plugin de formulário de contato, que é chamado de formulário de contato sete. E esse plug-in é talvez um pouco mais difícil, eu acho que para começar. Mas definitivamente vale a pena aprender, porque lhe dá muitas, muitas possibilidades. Então vamos passar para o plug-in a seguir. 79. 12.4Adicione a forma de contato 7: Então, nosso segundo plugin de formulário de contato é chamado de formulário de contato 7. Primeiro, deixe-me criar um novo formulário de contato. Então, a partir do menu plug-in, eu só vou clicar em adicionar novo. E eu vou chamá-lo de meu formulário de contato. E como você pode ver, ele vem com alguns códigos pré-instalados e você sabe, como campos pré-instalados que você pode usar. Mas se você quiser adicionar um pouco mais, você pode escolher a partir desta barra de menu, eu acho que aqui no topo. E basicamente, a maneira como ele funciona é como qualquer outro formulário de contato, qualquer outro plugin gerador de código curto. Então, quando formos para nossos formulários de contato, podemos pegar esse atalho do formulário de contato. Vou copiá-lo. Mais uma vez, vá para nossa página de oxigênio. E agora, em vez desses atalhos de forma fluida, podemos colar e esse contato de sete códigos de acesso. E como você pode ver, temos nosso código curto e nosso formulário de contato criado e colá-lo. Mas como você pode ver, parece horrível e não parece tão horrível apenas no backend quando você vai para o front-end, ele vem completamente sem estilo. E este é, eu acho, um dos maiores desafios, eu acho que cada designer ou mesmo desenvolvedor enfrenta ao trabalhar com este formulário de contato, ele vem completamente sem estilo porque ele tem como objetivo ser realmente leve e rápido. Portanto, não há nenhum estilo é atribuído a ele de qualquer forma. E isso é algo que temos que fazer manualmente e você pode fazê-lo por um plug-in. Você poderia pegar outro plug-in e apenas usar modelos. Você pode descobri-los por si mesmo. Mas o que eu gostaria que você entendesse e aprendesse é como adicionar código personalizado aqui dentro do oxigênio. Isso pode ser um pouco mais avançado, mas definitivamente vale a pena. E, uh, uma vez que você ficar melhor no desenvolvimento de sites, você definitivamente vai querer, quer estar usando, se não, editando o código, pelo menos apenas pegando algum código que você encontrá-lo on-line e, em seguida, basta colá-lo dentro do Oxigénio. Então vamos realmente fazer isso no próximo vídeo. Vamos ver como podemos aplicar um código pré-renderizado líquido que eu pré-renderizei o pré escrito aqui dentro de um formulário de contato que você pode adicionar ao seu formulário de contato, sete formas. 80. 12.5 Style no formulário de contato: Então, se quisermos saber como estilizar seu formulário de contato sete, podemos ir para o Formulário de Contato 7 e discar. Vamos colocar assim. E então vamos para a página oficial do formulário de contato sete. Você pode ver que nós temos algumas boas peças de informação que você pode apenas basicamente apenas copiar e colar para que você possa estilizar seu formulário de contato n. Bem, isso é muito útil. Eu recomendo que você mantenha este lado à mão. Mas o que eu definitivamente recomendo ainda mais é manter este código à mão. Este é o código que eu escrevi que você pode usar. Definitivamente, deixe-me limpar um pouco. E vamos aplicá-lo ao nosso formulário de contato. E você verá com que rapidez vamos mudar a aparência do nosso formulário de contato e você verá o que esse código faz. Então o que eu vou fazer é eu vou apenas copiar todas essas regras CSS. Vamos voltar ao oxigénio. Então, a partir do painel gerenciar e, em seguida, folhas de estilo, eu vou clicar em adicionar folha de estilo. E eu vou chamá-lo de contato, formulário de contato. E eu vou clicar em OK. E como você pode ver, o que obtemos é esta tela em branco, em branco, eu acho que janela em branco, onde nós podemos realmente adicionar nosso personalizado, CSS personalizado. Então o que realmente temos que fazer é colar esse cólon. E como você pode ver, todo esse formulário de contato muda em um instante. E se você apenas dar uma olhada nesses seletores bem aqui, você pode ver que eles apenas pertencem ao nosso, à nossa entrada. Sem campos de texto, e-mail, área de texto, que é esse cara aqui. Esse cara é nosso botão de enviar, esse cara aqui. E todas essas, todas essas regras CSS são muito facilmente, fáceis de entender. Tudo o que estamos fazendo aqui é que estamos fazendo a largura 100%. Estamos dizendo que a família de fontes deve ser rubato, a fonte que eu escolhi. Tão básico, basicamente você poderia usar seu Google Fonts aqui. E nós podemos, talvez, porque quando passamos o mouse sobre esse cara aqui, você pode ver que ele está mudando sua cor, coleciona cinza muito, muito claro. Mas eu quero pegar minha cor padrão. Acho que foram estilos globais. Vou para cores e cores padrão. E isto é, isto é, este foi este castanho copiado. Vou voltar para o meu formulário de contato Stylesheet e eu vou apenas substituir esse contato. Essa cor de fundo pairava para essa comunidade de energia de cor marrom quando você paira sobre, esse cara, muda assim. Então eu vou salvar esse cara. E então eu vou apenas atualizar a página. E você pode ver que nós temos nosso formulário de contato criado, e é claro que está funcionando corretamente. Mas todos esses elementos precisam ser cuidados como esta exigência campos todas essas mensagens. Eles, eles têm que ser tratados a partir deste plug-in, uma interface de plug-in bem aqui. Então, temos a nossa gravadora bem aqui. Recebemos este e-mail, recebemos o seu assunto. E é claro que precisamos dizer para qual e-mail todos os envios de formulário terão que ir. Você tem o corpo da mensagem. Realmente. No início, este plugin pode parecer que é um pouco difícil de aprender, mas uma vez que você apenas dar-lhe como alguns minutos, alguns minutos, você vai ver que é realmente muito fácil de entender o que é, o que está acontecendo aqui. Então lá vamos nós. Isto é o quão fácil é adicionar um formulário de contato aqui dentro de um oxigênio. E como eu disse antes, você não pode simplesmente deixar suas páginas de formulário de contato com algumas informações de contato simples como aqui. Mas se você quiser adicionar um formulário de contato, você precisa adicionar um plugin de formulário de contato. Não há como um módulo embutido dentro de oxigênio como há um indivi, entorpecido, mas eu acho que ele lhe dá mais flexibilidade, qualquer plugin que você deseja usar para seus formulários de contato, você pode usá-lo aqui dentro de oxigênio e é apenas uma questão de adicionar um atalho. A propósito, podemos editar onde quiser? Quando formos para a nossa página, vou para a minha estrutura. Vou apenas duplicar este código curto. E vamos dizer que eu quero apagá-lo. Eu não sei. Digamos que talvez em algum lugar aqui. Você pode ver que o atalho foi renderizado aqui em cima. Então, não importa onde você colocá-lo, você vai ver seu formulário de contato. Exatamente onde você, onde você coloca seu, seu lado curto e coerente desta estrutura e essas camadas. Então lá vamos nós. É assim que você pode criar um formulário de contato aqui dentro do oxigênio. Como você pode ver, é tão simples como apenas adicionar um código curto simples, um plug-in simples, e você está pronto para ir. 81. 13.1Explore o design para um escritório de advogado: Nos próximos vídeos, vamos realmente aprender como criar um site, é claro dentro do oxigênio. E desta vez estaremos seguindo um certo projeto. Isso, este seria sobre aprender tudo o que há para saber sobre oxigênio. Vamos nos concentrar em realmente criar a base do site em uma base em um design. E decidi criar um site de advogados que será baseado nesse design. E eu decidi que é, ele tem, talvez não seja o melhor design do mundo, mas ele, ele só tem como o mais, o mais típico e componentes em um site como este. Então nós temos um e um cabeçote pegajoso bem aqui. E esse cabeçalho é, bem, não muito complicado, mas não muito simples. Temos algumas informações aqui, logotipo e um menu. Então temos um controle deslizante. Será que eles imploram resmungar como um controle deslizante chão saco com algum texto bem aqui. E então nós temos algum texto, algumas imagens como essas imagens são, elas não parecem tão ótimas. Então trocaremos esta seção aqui. Talvez façamos alguns efeitos de paralaxe. Então temos alguns ícones bem aqui com alguns efeitos de transição. Faremos isso também. Mas talvez façamos um efeito de transição diferente. Então nós temos uma seção com, com alguns textos, nós temos uma seção de equipe, e nós temos outro controle deslizante com alguns depoimentos, um blog, um blog simples, real, bem aqui. Outra seção com alguma imagem de fundo e sobreposição de texto. Temos um formulário de contato bem aqui, como uma seção de contato e um rodapé simples. Então, ao todo, temos um monte de elementos que você pode querer usar e criar em um site típico. Por isso, pensei que este seria um bom ponto de referência para nós. Além disso, eu tenho o meu projeto aqui, então eu só, eu só, eu só, eu só ligar para Pete. Eu tirei uma captura de tela desse site e isso me permitiu criar um sistema de design como um design muito, muito simples, um sistema para o nosso site. Então nós temos as cores que vamos usar em nosso design. Temos as fontes. Então, para o título, então nós vamos estar usando o texto carmesim e tags corpo será sentido aberto. E ambos esses tipos de letra são fontes do Google, letra, eu rapidamente criei um logotipo simples, que é basicamente uma letra L para levá-los da fonte de texto carmesim e colocar contra um fundo redondo. E eu acabei de baixar alguns ícones do ícone plano e eu adicionei que, a mesma cor vermelha pálida e para esses itens. E também adicionei algumas imagens, então estes são os meus ícones. Eu também tenho algumas imagens para o nosso controle deslizante, para a nossa equipe e para alguns efeitos de imagens de paralaxe ou de fundo. E eu vou enviar todas essas imagens para o nosso site. Então eu acho que estamos prontos para, prontos para começar a criar nosso design. E nós estaremos criando esse design em uma instalação WordPress completamente nova. E este é um servidor real, então você poderá ver esse design mais tarde. E a primeira coisa que vamos fazer é adicionar como uma página inicial ou talvez apenas adicionar um menu simples e simples e, em seguida, começar a criar nossa, nossa página, nosso site em oxigênio. 82. Adição de itens de menu: Então eu decidi criar um menu simples para o meu site. Então vamos para Aparência e menus. E aqui, como podem ver, só tenho uma página. Essa vai ser a nossa página inicial, e esta é esta página bem aqui. E eu também decidi adicionar alguns itens de menu simples, como áreas de prática, advogados, estudos de caso, blog e contato. E como você pode ver, eles são todos links simples e simples. Eles não se vinculam a páginas reais. E se você quiser fazer isso, você pode simplesmente ir para links personalizados para o URL, basta digitar o símbolo hash. E para esses textos de link, eu acho que poderíamos talvez digitar algo como três citações gratuitas, adicionar isso ao nosso menu. E, como você pode ver, esse link personalizado está sendo adicionado ao nosso menu. Mas eu não quero ter como um link de citação livre aqui porque nós vamos estar adicionando um botão para o nosso, para o nosso menu. E então eu vou apenas removê-lo. Mas esta é a maneira como você criaria como um manual fictício aqui dentro, aqui dentro do WordPress. Então, basta adicionar links personalizados se você não quiser adicionar as páginas e você seria basicamente bom para ir. Então, uma vez que, uma vez que temos o menu, vamos torres Configurações, Leitura, e vamos nos certificar de que somos realmente vistos. Nossa página inicial estática é nossa página principal. E quando vamos ao nosso site, você pode ver que nós basicamente não temos nada aqui. E isso é porque primeiro precisamos criar um modelo que o nosso modelo principal, principal para o cabeçalho e para o rodapé. Então é isso que eu vou fazer a seguir começando no próximo vídeo. 83. Adicione o modelo principal, 3: Então vamos adicionar o nosso modelo principal e eu vou para o oxigênio e depois modelos. E aqui vou adicionar um novo modelo que vou chamar de principal. Lá vamos nós. E quando vamos para outro, e então vamos escolher pegar tudo. Isso só vai significar que este modelo vai renderizar todas as páginas em nosso, em nosso site. E eu vou publicar. Lá vamos nós. Então agora vou clicar em editar com oxigênio. E antes de começarmos a realmente colocar em algumas, algumas coisas para o nosso modelo antes de começarmos a adicionar o cabeçalho e o rodapé e o conteúdo interno, vamos realmente adicionar nossos elementos de design. Então vamos adicionar as cores. Vamos definir a fonte. Então eu só vou pegar rapidamente ou primeira cor, este cara aqui. E depois vou voltar ao oxigénio. E agora vou gerenciar as configurações. Então eu vou para estilos globais, cores. E aqui vou adicionar um conjunto de cores. Vou chamar-lhe advogados TM. Eu vou adicionar esse conjunto e eu vou começar, começar a adicionar outras cores. Então nossa primeira cor será como azul escuro. E eu vou adicioná-lo aquela hashtag, aquele código hexadecimal, na verdade. Então eu vou pegar nossa cor vermelha. Então eu vou copiar essa cor na cor, eu vou chamá-la de vermelho pálido nessa cor. Então, novamente, eu vou pegar isso como quase cor preta, eu acredito, adicionar cor. Eu vou chamá-lo. Vamos apenas chamá-lo. Vamos chamar de texto. Esta será a cor do nosso texto. Então eu só vou, eu vou adicionar esta cor branca lisa. Deixe-me voltar e colorir. Vou chamá-lo de Branco. E acho que podemos pegar no seletor, não na placa. Quero que seja branco. Vamos e depois vamos pegar essa cor rosa. Lá vamos nós. É voltar ao oxigênio e cor. E vamos chamá-lo de piscar. E esse código na cor. E eu vou salvar tudo. Então ele tem 12345 cores e acho que é um bom começo. Podemos deixar assim. Mas agora eu quero adicionar as fontes. Então nossa fonte de exibição é o texto carmesim? Então, se você não pode vê-lo aqui, basta digitar texto carmesim. E lá vamos nós. E nosso tipo de letra para a fonte de texto será aberto. Sans. Lá vamos nós. E eu vou guardar isso. Então agora nós temos nossas cores, nós temos nossas fontes. Então agora estamos realmente prontos para começar a adicionar algum conteúdo para, ao nosso modelo. Então vamos começar a fazer isso a seguir. 84. Adicione o cabeçalho: Então, nosso modelo de manutenção é basicamente vai estar hospedando nosso cabeçalho, o conteúdo interno, e o rodapé. Então, vou começar com o nosso cabeçalho. Então eu vou ir em frente e clique em Adicionar e digite no cabeçalho. E eu quero escolher o construtor de cabeçalhos. E dentro desse construtor de cabeçalho, é claro que temos nossa linha de cabeçalho. Então nossa linha de cabeçalho, se dermos uma olhada em nossas linguagens de design, vamos para cima, para cima, para cima, até aqui. Ele simplesmente tem como um fundo escuro. Temos um logótipo à esquerda. Temos que, temos que cardápio e algumas informações adicionais com alguns ícones bem aqui. E então nós vamos adicionar todos esses componentes, mas talvez nós vamos mudar o layout um pouco. Eu não sou um grande fã de como este layout foi colocado para fora aqui. Eu quero colocá-los e o menu à direita e o logotipo para o centro. Mas acho que esses caras podem ficar aqui em cima. Então o que eu vou fazer é eu vou primeiro talvez adicionar uma cor de fundo ao meu, ao meu menu. Lá vamos nós. Eu vou salvá-lo. E agora eu vou apenas adicionar um logotipo. Então, para isso, eu vou clicar e, e eu vou digitar uma imagem. E eu vou tentar encontrá-lo do meu, eu vou tentar encontrá-lo na minha biblioteca de mídia. Esse é esse cara aqui e eu vou colar isso. Indo para salvá-lo e atualizar a página. Então eu tenho o meu logotipo aqui, mas é, eu acho que é um pouco grande demais. Vamos tentar algo como 50 pixels. Acho que isto deve estar à direita. E eu gostaria de saber, basta digitar os advogados de texto aqui além do logotipo L. Então o que vou fazer é clicar em adicionar. E eu vou digitar o título. Vou clicar em Adicionar. E eu vou mudar a cor do texto para esta cor branca. Ou talvez vamos com a cor vermelha e vamos digitar advogados de alfinete. Lá vamos nós. E vamos mudar o tamanho deste texto. E deixe-me ver talvez algo como 32. Acho que isto deve ficar bem. E quando formos para a tipografia, quero fazê-la capitalizar. E talvez eu entre como um pixel para o espaçamento de letras. Isto deve ficar bem. E quando vamos para nossa estrutura, você pode ver que isso realmente encontrou esta imagem e este título estão sendo colocados nesta linha, coluna da parte esquerda, eu acho. Mas não podemos realmente selecionar, não podemos fazer nada sobre isso. E eu gostaria de talvez adicionar algum espaçamento entre esses elementos. Mas o que eu definitivamente gostaria de fazer é ter certeza de que esses caras estão bem centrados verticalmente em relação um ao outro. Então o que eu vou fazer é simplesmente pegar essa camada de imagem e eu vou clicar em div rápido. Coloque que tinha uma visão que div. E quando a diferença for selecionada, eu vou ter certeza de que meus elementos filho estão sendo empilhados horizontalmente. Lá vamos nós, e que o alinhamento vertical é definido para o meio. Então eu posso pegar a imagem e talvez adicionar algum espaço no pato assinado. Vamos selecionar dez pixels de margem. Talvez menos do que isso. Cinco devem ser. Tudo bem. E talvez vamos adicionar um pouco, algum espaçamento para a nossa, para a nossa linha. Então eu vou para o tamanho e espaçamento avançados. E vamos tentar talvez 25 pixels de preenchimento superior e inferior. Ou talvez até mais do que, do que, vejamos 35. Acho que podemos mudar isso mais tarde. Então, como você pode ver em apenas alguns cliques, nós adicionamos nosso logotipo. Talvez eu só faça esse cara um pouco menor para algo como 42, talvez 36, ou talvez até quatro. Vamos com 40. Mas há um pequeno problema de sorte com ele. Quero dizer, eu quero que as pessoas sejam capazes de clicar neste logotipo se eles quiserem voltar para a nossa primeira página. E como você pode ver agora, eu posso clicar em qualquer um desses elementos. Então eu vou pegar meu div. E aqui no canto superior esquerdo, vou clicar nesta opção de configurações de link. E isso vai realmente envolver toda essa div em um link. E por enquanto, eu só vou, Eu só vou selecionar esta página inicial e, em seguida, adicionar o link. Então agora toda vez que alguém clicar nessa div neste link, rapper, ele nós éramos, ela será direcionada para a nossa página principal. Então eu vou salvar esse cara. E acho que temos o logotipo completo. Então agora vamos talvez adicionar informações adicionais, esses caras aqui à direita. E então vamos adicionar nosso menu. Então vamos começar a fazer isso a seguir. 85. Adição do menu: Então vamos começar com esses caras, então, os ícones e o texto. Então o que vou fazer é adicionar um ícone. Lá vamos nós. Mas eu quero ter certeza de que este ícone foi colocado aqui na fila, certo? E claro que vou mudar esse cara de cor para a nossa cor vermelha. E vou mudá-lo dos polegares para algo como um telefone. Acho que foi o telefone da SO. Vamos com este. E aqui em cima temos essas opções de estilo de ícone para que possamos ir com contorno, sólido ou não. Eu vou com sólido. E eu vou mudar a cor do ícone pode ser para o nosso, esta nossa cor escura principal. E eu vou mudar a cor de fundo para a nossa cor vermelha assim. E, claro, vamos mudar o tamanho para algo muito, muito menor. Algo como talvez até 12. E vamos mudar o espaço ao redor do ícone para algo como pode ser dez. Acho que isto deve ficar bem. Claro que poderíamos brincar com esses valores pode ser como fazer o espaço em torno de ícone para algo como cinco. Faça o ícone como alguns como 16. Isso vai ser totalmente, totalmente até você ter total liberdade quando se trata de criar esses ícones ou ajustar esses ícones aqui dentro de um oxigênio. Então, ao lado desse pequeno ícone, precisamos adicionar o texto. Então eu vou apenas clicar em adicionar e, em seguida, texto. Deixe-me clicar nesse cara aqui. E acredito que este era o número de telefone. Então vamos fazer tipo 180080555. Por que não? E vamos mudar a cor do texto para o nosso Branco. E talvez mudemos o tamanho da fonte para algo como dez talvez. Ou 12. Eu acho que 12 deve ser, deve estar bem. E também, vamos talvez adicionar alguma margem ao nosso ícone. Então vamos para Tamanho e espaçamento avançados. E vamos adicionar algo como, vejamos, cinco pixels de margem. Acho que isto deve ficar bem. Agora, quando queremos adicionar outro conjunto composto por um ícone e um texto, se nós apenas duplicássemos esse cara e esse cara, nós ainda teríamos que mudar como o posicionamento desses elementos. Então eu vou pegar esse texto e colocá-lo aqui. E talvez vamos adicionar algum espaçamento. Então, novamente, tamanho avançado e espaçamento. Vamos fazer algo como Stan, dez pixels de margem. Acho que isto deve ficar bem. Vamos mudar este ícone para um ícone de e-mail, algo assim. Talvez envelope. Este seria melhor. E vamos mudar esse texto. Vamos entrar em contato com advogados. Lawyers.com foi fazê-lo assim. Talvez sem o apóstrofo. Vamos fazer o Lawyers.com. Isto deve ficar bem. Então o próximo passo seria apenas adicionar um menu abaixo desses elementos, então abaixo desses pedaços de texto. Mas antes disso, eu gostaria apenas de verificar a capacidade de resposta porque é uma boa idéia apenas verificar a responsividade enquanto você vai, apenas para evitar algumas surpresas desagradáveis. Mais tarde, uma vez que você tem outros elementos de seu design adicionados ao seu site. Então, antes de começar a adicionar nosso menu, vamos verificar a capacidade de resposta. No próximo vídeo. 86. 13.6Confira a responsividade: Então agora vamos verificar como nosso hetero se comportaria em dispositivos menores. Então vamos para o contêiner de página 1120 e abaixo. Ainda parece bem, 992. Isso é bom para 768. Agora, todos esses elementos começam a parecer um pouco apertados para o meu gosto. Então o que eu vou fazer é voltar para todos os dispositivos, vou pegar o construtor de cabeçalhos, ou podemos pegar a linha de cabeçalho se quisermos. E, em seguida, aqui você pode ver a pilha verticalmente abaixo opção. Então, quando escolhemos empilhar verticalmente abaixo de 768, quando atingimos esse ponto de interrupção, você pode ver que nossos elementos estão começando a parecer muito, muito melhor. Mas também talvez pegue nosso logotipo. Então este é o link aqui. E talvez pudéssemos adicionar mais espaçamento assim. Isto deve ser, isto deve estar tudo bem. Então eu acho que quando vamos para 488 ainda parece bem. Então agora podemos simplesmente pegar nosso menu como elemento manual pro, por exemplo, e apenas colocá-lo abaixo desses elementos aqui. Então este número de telefone e endereço de e-mail aqui. Então vamos começar a fazer isso no próximo vídeo. 87. 13.7Adicione os elementos do menu: Então, no nosso painel de ferramentas, vamos adicionar um menu. E eu vou para o pro mania. E, claro, eu não quero colocá-lo aqui. Eu quero colocá-lo aqui. Mas como pode ver, não parece tão bom. Quero dizer, queremos que este menu seja colocado abaixo de nossos elementos ou abaixo desses ícones e esses pedaços de texto. Então eu acho que o que nós poderíamos fazer é simplesmente pegar esses elementos e envolvê-los com uma div, porque agora eles são insights de tecnologia feijão e a mesma div e eles estão sendo colocados horizontalmente ao lado do outro. Então o que eu vou fazer é eu vou primeiro pegar este ícone e rápido com uma div, colocar esse texto dentro. Em seguida, pegue esse ícone e rápido com uma div e coloque o texto dentro. Mas é claro, esses caras não deveriam estar assim. Então eu vou pegar o div e eu vou empilhar os elementos filho horizontalmente e alinhá-los ao meio. O mesmo para este tipo. Empilhe-os horizontalmente e alinhe-os ao meio. Mas é claro, isso não resolve o nosso problema. Então o que ainda temos que fazer é simplesmente envolver todos esses elementos dentro 1. incluindo o menu pro. Então o que eu vou fazer é adicionar outra div. Então eu só vou embrulhar, esse cara não iria adicionar um div, colocar essa div dentro, e então vamos colocar essa div aqui dentro. Então, neste ponto, o que queremos fazer é que queremos que esses elementos sejam colocados horizontalmente ao lado um do outro. Mas, ao mesmo tempo, queremos que eles sejam colocados à direita e, claro, acima do nosso menu. Então, com esta div principal selecionada, este contêiner principal selecionado, na verdade você poderia até chamá-lo de principal. Assim só para vermos o que está acontecendo aqui. Esse cara selecionado, eu só vou ter certeza de que todos, todos esses elementos estão sendo colocados do lado certo. Lá vamos nós. E então eu vou pegar essa div, e eu vou embrulhá-la com outra div e colocar essa div dentro dessa div. Então, há um monte de divs bem aqui. Mas talvez quando eu começar a mudar seus nomes, vamos renomear esse cara. Então isto vai ser isto, esta será a nossa informação de contacto. Lá vamos nós. Então, neste momento, esta div está hospedando este número de telefone e esta informação de contato. E, claro, dentro desses caras, temos nosso ícone e nosso texto. Lá vamos nós. E cada uma dessas divs, então esta e esta estão exibindo nossos elementos filhos horizontalmente. Mas queremos que esta informação principal de contato, div para estar exibindo esses elementos horizontalmente também. E agora, o, que div está exibindo-os verticalmente. Então, quando nós apenas clicamos em estoque elementos filho violoncelo horizontalmente, você pode ver que agora nós temos o efeito que estávamos procurando. E neste ponto poderíamos talvez adicionar um pouco, como algum espaçamento. Vamos ver, uns 25, talvez. Isso pode ser muito parecido. Então isto deve ficar bem. Então agora nós podemos realmente passar para o nosso menu pro. Então, eu só vou pegá-lo. Não vou passar muito tempo aqui. Eu só quero fazer com que pareça tudo bem aqui na área de trabalho e em, e em smartphones, eu acho. Então eu vou pegar o menu da área de trabalho, opção, topografia, e eu vou mudar a cor para branco. Vou fazer todos esses elementos maiúsculos. Vou mudar o tamanho para, digamos, 14. Talvez até 13. Isto deve ficar bem. Deixe-me voltar para a fronteira de alinhamento espacial. E talvez eu adicione alguma margem à esquerda. Vamos ver umas dez. Acho que dez deve estar bem, talvez vamos até 15. Por que não? E por último, eu vou voltar para a tipografia e eu vou adicionar como um pixel de espaçamento de letras apenas para fazer esses elementos se parecerem com isso, vamos talvez ver 14. Sim, vamos com 1414 pixels. Eu vou salvar isso e nós podemos realmente ir para a nossa primeira página e atualizar este endereço faz. E lá vamos nós. Este é o nosso, o que o nosso cabeçalho parece neste momento, mas é claro, ainda precisamos cuidar da capacidade de resposta dos nossos elementos do menu. Então eu só vou voltar e eu estou com meu menu pro, menu selecionado. Vou voltar algumas vezes. E eu quero que este menu seja realmente, você sabe, móvel quando você menu, uma vez que atingimos o ponto de interrupção 768. Então, quando vamos para 768, nosso menu começa a entrar em colapso para uma versão de smartphone. Mas é claro que precisamos mudar algumas coisas sobre isso. Então vamos alterar o layout do ícone Abrir. Eu não quero ter a mensagem. E acho que quero ter as barras simples assim. E eu vou mudar a cor para cor branca. Lá vamos nós. Eu não acho que eu quero ter nenhum preenchimento aqui, ou talvez apenas cinco pixels, mas não, não muito. E, claro, o que queremos é que este menu seja colocado aqui no centro. Então eu vou pegar este recipiente principal, esta div principal, e eu vou clicar sobre esta pilha elementos filho verticalmente, mesmo que ele é definido por padrão. Quando clicamos nele, podemos ver todos esses elementos novamente. E eu vou clicar no Centro de alinhamento de itens horizontal. E o nosso menu está sendo bem centrado assim. Mas é claro, quando clicamos nele, este menu não parece muito bom com. Ainda precisamos consertá-lo. Então eu vou para o menu móvel. Vou ao fundo primeiro. E acho que vou escolher nosso fundo sombrio assim. Deixe-me voltar agora mesmo. Vou fechar o layout do ícone. E eu vou entrar e trocar essas barras. Vou usar este ícone de cruz. Eu não quero, eu não quero, eu não preciso de nenhuma mensagem. Vou mudar a cor para a cor branca. Lá vamos nós. Então agora vamos cuidar da nossa topografia, do layout da nossa topografia. Então, vamos voltar. Vamos para os estilos do menu. E quero que os itens sejam alinhados ao centro. Então vamos salvar esse cara e atualizar nossa página. E vamos verificar realmente como será nos dispositivos menores. E lá vamos nós com este é o nosso, este é o nosso menu móvel. Novamente, não quero que seja muito chique. Eu deixaria isso com você se você quiser adicionar um pouco de transparência e talvez brincar com este ícone ou alguns efeitos pairando. Vai ser totalmente com você. Eu só queria torná-lo simples e simples apenas para fazer este menu funcionar como ele, como deveria. Claro, poderíamos talvez adicionar alguma, talvez alguma margem. Na verdade, vamos para o tamanho e o espaçamento. Claro que tenho meu menu pro ativo ativo, e vamos talvez adicionar algo como 12 pixels de margem. E lá vamos nós. Quando vamos para todos os dispositivos, é assim que o nosso cabeçalho de menu se parece. E assim que chegarmos ao 768, será assim que nosso menu ficará nos dispositivos menores, como tablets e smartphones também. E a propósito, se você quiser, por exemplo, neste ponto de interrupção antes de 68 ou mesmo 7068, se você quiser, se você quiser que esses elementos sejam empilhados verticalmente, ou você tem que fazer é pegar nossa informação de contato div. E novamente clique em empilhar elementos filho verticalmente e, em seguida, torná-los centro assim. E é claro que ainda podemos adicionar algum espaçamento. Então, vou pegar esse número de telefone. Este número de telefone div, e eu talvez vamos tentar uns dez pixels. E isto deve ficar bem. Claro, esta é uma opção. Você não tem que fazer isso. Mas você sabe, com oxigênio você obtém muita flexibilidade em termos de projetar esses elementos. Acho que vou voltar para onde estava antes. Acho que isto parece um pouco mais limpo. E sim, lá vamos nós. Temos o nosso cabeçalho. Bem criado. Mas uma coisa que eu gostaria de fazer é que eu gostaria de adicionar como um cabeçalho pegajoso. Como podem ver, temos um cabeçalho pegajoso como este no nosso design de referência. Então vamos realmente começar a cuidar do nosso cabeçalho e pegajoso no próximo vídeo. 88. Adicione o cabeçalho adesivo: Então agora vamos realmente fazer essa coisa de cabeçalho pegajoso. Então nós temos este cabeçalho, que é o nosso cabeçalho regular. Mas queremos adicioná-lo como uma versão menor de um cabeçalho uma vez que o usuário rola para baixo em nossa página. Então nós temos esta linha de cabeçalho, eu vou duplicá-lo. E digamos que para o meu pau Keller, eu não quero ver essas informações, esses pedaços de informação aqui em cima. Então eu vou apenas removê-los. Então eu vou principal uma informação de contato e eu vou apenas removê-lo. Lá vamos nós. Acabei de pegar o cardápio. E acho que poderíamos até puxá-lo aqui mesmo. E não precisamos desse div. E eu vou torná-lo menor. Então, para a tipografia manual da área de trabalho, eu vou fazer como talvez dez pixels. Isto deve ficar bem. E para o nosso logotipo, deixe-me pegar o logotipo. Vamos fazer a imagem menor, talvez 25. E a fonte, vamos fazer 25. Ou talvez até menos do que isso, vejamos 18. Então, para fazer esse efeito de cabeçalho pegajoso realmente funcionar corretamente, precisamos pegar nosso construtor de cabeçalho. E aqui para a opção Sticky, vamos escolher o cabeçalho sticky habilitado. E eu acho que vou deixar a distância de rolagem como está, mas eu quero desaparecer no cabeçalho pegajoso para desaparecer. E eu vou fazer essa animação desvanecida um pouco mais rápido. 0,2 segundos. Lá vamos nós. E agora eu vou apenas selecionar este tinha uma linha que deveria ser pegajosa. E talvez eu só vou diminuir esse valor de preenchimento para, digamos, dez pixels como esse. E eu vou voltar para a guia primária, e eu só quero mostrar isso em pegajoso. Lá vamos nós. E esta primeira linha de cabeçalho, eu quero escondê-lo em pegajoso. Então eu vou salvar meu menu, vai salvar minha página. E então deixe-me atualizar a página. E agora não seremos capazes de ver nosso cabeçalho pegajoso porque não temos nenhum conteúdo aqui. Mas se adicionarmos algumas coisas arbitrárias, vamos fazer uma seção. Vamos adicionar algum texto, como um texto fictício. Agora eu vou copiar rapidamente um monte de textos como esse. E eu vou salvá-lo. E depois vou atualizar a página. Recebemos nossas mensagens, e então começamos a rolar para baixo. Você pode ver nosso cabeçalho pegajoso bem desvanecendo. Talvez se fizéssemos a animação um pouco mais, essa animação seria melhor. Mas eu acho que isso funciona totalmente, totalmente bem. Então é claro que vou me livrar desta seção. Não preciso desta mensagem. Mas o que eu quero fazer é eu só quero adicionar o módulo de conteúdo interno para que possamos realmente fazer o nosso modelo funcionar. E vamos cuidar do cabeçalho uma vez que temos todos os outros elementos no lugar. Então nós temos nosso cabeçalho, nós temos nosso conteúdo interno, e agora estamos realmente prontos para começar a construir nossa página, começando com o cabeçalho. Bem seria o herói e controle deslizante. Então vamos começar a fazer isso a seguir. 89. Adição do deslizante: Então, agora vamos dar uma olhada em como criar o controle deslizante. Vamos criar um, apenas alguns slides com algumas imagens de fundo e algum texto. Então o que vou fazer é ir à minha página inicial e quero editá-la. E eu quero editá-lo com oxigênio. Então, tudo bem, podemos começar adicionando uma seção simples à nossa página. Então eu vou digitar na seção. E eu quero que esta seção se estenda por toda a página. Então eu vou para o tamanho e espaçamento avançados. E eu quero definir o recipiente seccional com largura total. E eu quero me livrar do estofamento. Então eu vou apenas digitar 0 e, em seguida, basta clicar em aplicar. Tudo. Então agora não temos nenhum preenchimento aplicado na parte superior e inferior, esquerda e direita. Então, dentro dessa seção, vamos inserir o nosso, nosso controle deslizante. Então é isso que vou fazer. Eu só vou clicar em Adicionar e digitar Slider. E há algumas coisas que precisamos fazer quando estamos criando nosso controle deslizante com essas imagens de fundo de largura e altura. Para começar, vou me livrar de dois slides. Eu só quero ter este porque nós vamos estar duplicando até mais tarde. E quando o controle deslizante foi selecionado? Eu vou para o estilo e eu vou para a animação desbotada. A velocidade está OK. Podemos deixar assim. E eu gostaria de remover o estofamento em torno de slides. E quando formos para a configuração, não quero mostrar as setas. Não quero mostrar os pontos. Eu quero que os slides sejam infinitos, mas eventualmente, vamos querer definir isso para reprodução automática. Mas, por enquanto, vou deixar assim. Não quero que isto esteja num avião nesta janela de pré-visualização. Então última coisa a fazer aqui será ir para o tamanho e espaçamento e definir a altura do meu controle deslizante para algo como 90 vh, que mais ou menos esticar bem esticado de cima para baixo da parte restante da minha janela de exibição. Claro que poderíamos mais tarde apenas talvez aumentar ou diminuir esse valor. Isso vai depender de quão grande você vai definir seu cabeçalho, como dito que vai ser no seu caso. Então temos nossa configuração de controle deslizante. Vamos agora configurar rapidamente o nosso primeiro slide. Então eu vou selecioná-lo e eu vou para Avançado. E eu vou ao fundo. E eu vou procurar por uma imagem de fundo. Eu vou com este, Heróis Slider One. Eu só vou selecioná-lo. Então, adicionamos ao primeiro plano de fundo. Mas como você pode ver, não estamos vendo como toda a imagem de fundo. E nós poderíamos, por exemplo, apenas aumentar o tamanho do slide. Mas nós também poderíamos apenas ir para o nosso controle deslizante, ir para o estilo e, em seguida, basta escolher todos os slides esticar para a mesma altura. E lá vamos nós, podemos ver a nossa imagem. Então, basicamente, estas são as nossas opções de configuração preliminares que temos que definir para o nosso controle deslizante para funcionar. Além disso, vamos rapidamente para o nosso slide avançado e, em seguida, em segundo plano. Nós configuramos essa imagem de fundo, mas vamos também definir o tamanho do plano de fundo para cobrir. E então vamos nos certificar de que o ponto de foco está definido exatamente no ponto central da nossa imagem. Então eu vou para o tipo de valor esquerdo em 50%, e eu vou fazer o mesmo para o topo. E temos nossas áreas de foco, foco definido para o centro de nossa viewport. Então agora podemos brincar com nossa imagem de fundo se você quiser deixá-la assim. Bem, isso é com você. Mas o que eu quero fazer é ter um monte de contraste entre a nossa imagem de fundo e o texto que, que vai vir a seguir. E eu também gostaria de adicionar alguns como design específico. Dana é como a coisa que eu específico para o nosso, para o nosso design, que será ou seja, vai ser algum, algo como overlain e talvez como uma cor ou apenas brincar com as Opções de Mistura da nossa imagem de fundo. Então vamos começar a fazer tudo isso a seguir. 90. 13.10Adicione o primeiro slide: Então vamos começar talvez com a adição de um pouco de cor sobre esta imagem. Ainda assim, nas minhas opções Avançadas e, em seguida, em segundo plano, vou escolher a cor de sobreposição da imagem acima. E eu vou com o nosso vermelho pálido salvo. E eu vou diminuir a transparência enquanto a opacidade realmente faz algo que talvez tipo 2,750 a 75%. E se você quiser ir com este tipo de “A “, um efeito será meu convidado. Você poderia fazer isso, mas também poderia brincar com nosso modo de mesclagem de fundo, mas também com nosso anexo de fundo, que, talvez falemos um pouco mais tarde. Então a primeira coisa que eu gostaria de fazer é que eu gostaria de talvez adicionar, alguns, irá eventualmente adicionar mais contraste entre a imagem de fundo e o texto que virá em apenas um segundo. Então, a partir desta lista, o que eu vou fazer é escolher multiplicar, que na verdade vai escurecer as áreas mais escuras aqui na minha imagem. E neste caso, talvez pudéssemos fazer essa imagem talvez um pouco mais escura e aumentar isso, a transparência para talvez algo assim. Talvez deixemos esse cara um pouco mais sombrio. Algo como isso deve ser, isso deve ser bom. Está bem. Vamos deixar assim. Então agora, se eu apenas ainda na minha camada de controle deslizante , camada de slide, se eu vou adicionar, vamos adicionar um cabeçalho. Lá vamos nós. E eu vou mudar a cor do texto para branco. Você pode ver que agora nós temos muito, muito, você sabe, apenas tocando um contraste entre nossa imagem de fundo e nosso texto. Além disso, adicionamos ao nosso design principal, que pode comprar acento a cores para a nossa imagem de fundo. Então, o que esse cara selecionou, eu vou ir muito bem. Vou às minhas opções. E eu vou aumentar o tamanho da fonte para algo como talvez 66. Vamos, vamos fazer talvez 66. Isto deve estar alinhado. E eu vou digitar eu acredito que o original foi nós fornecemos ajuda legal para e eu vou para topografia avançada. E aqui, talvez vamos aumentar o espaçamento das letras para um. Isso vai adicionar um pouco. Possuir o nosso design. E vamos para a altura da linha. Vou ajustá-lo para 1.1. E acho que é isso. Só vou certificar-me de que a minha etiqueta está definida como H2. E agora o que vou fazer é simplesmente duplicar este título. E talvez eu diminua o tamanho da fonte, algo como talvez 48 ou talvez até menos. Porque quando formos para a tipografia, quero configurá-la para maiúsculas e espaçamento de linha um está bem. Então vamos dizer que isso vai ser como, eu não sei, trabalhar em Andrew Reese. E talvez eu só vou diminuir o tamanho sempre tão ligeiramente deleite 3-6 talvez, ou 38. Isto deve estar à direita. E eu acho que o último passo aqui seria apenas adicionar um botão. Então é isso que vou fazer. Eu vou adicionar um botão e eu vou digitar algo como vir aprender mais, simples e simples. Saiba mais. E eu vou mudar a cor do botão para branco. Por que não? Botão pairava para o nosso rosa liso. Eu só quero um feedback simples e simples. E eu vou mudar a cor do texto para preto, ou talvez isso muito parecido com cor azul escuro. Lá vamos nós. E quanto à tipografia, vou para tipografia avançada. Quero configurá-lo para maiúsculas. E talvez novamente, eu só vou aumentar o espaçamento das letras para um pixel. Lá vamos nós, lá vamos nós. E talvez eu apenas apresente algum espaçamento em torno deste curso de ferimentos de trabalho. Vamos para o tamanho avançado e espaçamento e adicionar as ilhotas como 25 por cima e por baixo. Isso é um pouco modula treinadores 1010 na parte inferior. E lá vamos nós. Só vou salvar esse cara. E agora eu só vou ver minha página no modo de navegação anônima. E lá vamos nós. Este é nosso site. Esta é a nossa página aqui. E, claro, a última coisa a fazer seria apenas duplicar este slide e, em seguida, apenas a mudança desse texto. 91. 13.11Conclua o deslizador: Então, tudo o que precisamos fazer é pegar nosso slide e eu vou apenas duplicá-lo. E vou duplicar duas vezes. Então, para o nosso segundo slide, vou para o fundo avançado. E eu vou pegar este controle deslizante herói para imagem JPEG. E para o terceiro, e vamos fazer quase o mesmo. Eu vou olhar para esta imagem aqui, controle deslizante herói ou três imagem de pesquisa. E deixa-me mudar isto. Talvez comecemos com o segundo slide. Vamos apenas digitar como acidentes de trânsito podem ser. Lá vamos nós. E para este, vamos digitar algo como problemas pessoais. E acredito que temos a edição de fundo aqui. Não é isso que queremos. Definitivamente. Isso é que esta questão pessoal foi vendida. Então vamos salvar esse cara. Eu vou para o controle deslizante novamente. E agora eu posso realmente entrar vai ligar o recurso de reprodução automática. E agora, quando formos ao nosso site, deixe-me atualizar essa página. E então nós vamos, nosso, nosso controle deslizante está funcionando, funcionando bem. Claro, se o tornarmos menor, você pode ver que ele é completamente, completamente responsivo. Tudo está olhando, olhando bem. Então lá vamos nós. Temos o controle deslizante. Acho que vou desligar o jogo automático só para que as nossas cabeças não doam. E eu acho que podemos passar para o nosso poço, outra seção, eu acho, que será esta seção bem aqui. Temos algum texto colocado em colunas. Temos algumas como um enorme pedaço de informação bem aqui e temos algumas imagens aqui em baixo. Mas para os meus dias essas imagens são como, você sabe, colocar suas Só para que haja algumas imagens, elas não servem como um, como um propósito maior. Ele faz design para os meus dias, pelo menos. Então vamos mudar isso. Nós vamos realmente adicionar uma imagem e talvez nós vamos adicionar um efeito de paralaxe a ela. E talvez nós vamos sobrepor algo como, eu não sei, recebendo uma citação grátis textos ou algo assim. Mas primeiro vamos criar este tipo de texto aqui. E, em seguida, o imposto nestas três colunas. Então vamos começar a fazer isso a seguir. 92. 13.12Adicione a seção de informação: Então agora vamos começar a criar a seguinte seção com alguns pequenos pedaços de informação. Então, como de costume, vou começar com uma seção, esta aqui. E eu não vou mudar a largura dele. E acho que nem vou mudar o estofamento. Vamos deixar como está. E, claro, eu quero que esta seção não esteja nesta seção, então deixe-me apenas retirá-la. Lá vamos nós. Então, nesta seção, eu vou apenas adicionar um título. E eu quero, eu acho que quero que todos os elementos desta seção sejam definidos para o centro. Então é isso que vou fazer. E acho que vou pegar esse título. E vamos digitar. Acredito que era a nossa firma. Deixe-me verificar o texto recuperado. Está bem. Nossa firma. Lembre-se de Vert. Ok, então eu só vou aumentar o tamanho da fonte. E novamente, vou para a tipografia e aumentar o espaçamento das letras. Lá vamos nós. E nós poderíamos adivinhar, seguir esse design e um pouco mais perto e torná-lo como uma fonte de assonância aberta em vez de nosso cabeçalho. Mas acho que quero manter um pouco mais consistente, então vou deixar assim, mas acho que podemos adicionar um subtítulo aqui. E podemos escrevê-lo com abertura, tristeza. Antes de fazermos isso, deixe-me verificar a altura da linha. Vou torná-lo 1.1 porque basicamente funcionará bem em todos os nossos dispositivos, especialmente dispositivos menores. E então eu vou apenas adicionar um texto. Lá vamos nós. E aqui eu só vou digitar. Acho que vai ficar Omega. Vamos apenas fazer mais tudo como dois mais apenas para que você possa ver, só para que possamos ver o que estamos prestes a ver. Então, tenha paciência comigo por um segundo. Então vamos digitar mais. E depois vou escrever mais. E vamos digitar o símbolo do dólar, 100, k. Vamos deixar assim. Então o que eu quero fazer agora é, bem primeiro vamos apenas aumentar o tamanho da fonte para algo como talvez 32. E o que quero fazer é manter esse cara como está. O mundo está por cima do texto. Mas este texto, este mais 100 k. ou podemos fazer 100 mil se você quiser. Quero torná-lo diferente. Eu quero querer o estilo diferente. Então, a maneira que podemos fazer isso é eu vou apenas selecionar aquele pedaço de texto que eu quero, que eu quero estilizá-lo de forma diferente. Esse cara aqui e aqui no topo, eu só vou clicar neste rap com componente espanhol de botões. Eu só vou clicar nele. E agora, se formos para o nosso texto, o módulo, você pode ver que dentro temos este pequeno módulo span, que basicamente nos permitirá agora apenas mudar esse pequeno pedaço de texto. Agora podemos torná-lo maior. Nós podemos torná-lo menor e definitivamente nós podemos mudar a cor dele para algo como isso. E poderíamos talvez pegar a extensão e talvez mudar o peso da fonte para algo um pouco maior, tipo 600. Talvez. Isto deve ficar bem. E talvez eu só vou pegar isso sobre texto e eu vou torná-lo apenas um pouco menor para algo como 20 pixels ou 22. Mas como você pode ver, quando estamos fazendo mudanças nesse cara, bem, o alinhamento é, bem, ele simplesmente não está lá. Então o que você poderia fazer é pegar esse texto e nós poderíamos ir para avançado do que para layout. Clique nesta opção flexível de exibição e, em seguida, basta escolher uma linha itens centrados para se certificar de que estes são realmente alinhados bem com o sensor. Como acho que isso seria um pouco redundante bem demais, como este pedaço de texto sobre e, em seguida, mais bem aqui. Talvez devêssemos apenas remover esse cara. E em vez de terminar, vou digitar mais. Então lá vamos nós. E talvez em vez desse espaço, deixe-me pegar esse espaço. E então eu vou para o tamanho e o espaçamento. E eu vou apenas inserir como uma pequena margem à esquerda. Então isso seria que seria bem, que seria isso. E acredito que no nosso original temos desde 1970. Certo, então vamos digitar isso. Então, novamente, eu só vou adicionar texto. Lá vamos nós. E vou digitar desde 1970. E vamos fazer isso, vamos fazer 600 talvez. E talvez vamos fazer isso como 18 pixels. Talvez até, vejamos 700. Vamos fazer a diferença. Ele vai. E lá vamos nós. Nós basicamente temos este intestino a seção e criado. Então a próxima coisa que teríamos que fazer é que você teria que adicionar esses três pequenos pedaços de texto abaixo desta seção. Então vamos começar a fazer isso a seguir. 93. 13.13Adicione o texto nas colunas: Então, como de costume, vou apenas adicionar uma seção. E dentro desta seção, eu vou apenas adicionar colunas. E eu vou em frente e escolher este três por 33 por 33. Então ele recebeu três colunas para o nosso texto. E para preencher nossos textos com o, com algum conteúdo fictício. Vou voltar a aprender. Vou procurar por Lorem Ipsum. E eu só vou pegar um pouco desse texto. Vamos apenas talvez alguns amuletos apenas corromper este parágrafo inteiro. Por que não? Então, novamente, na minha seção, eu vou para a minha primeira div e eu vou adicionar um texto como esse. E eu só vou digitar isso. Então vamos em frente, talvez me deixe, vamos deixar assim. E talvez vamos apenas clicar, pressione Enter aqui. Só, você sabe, só para ter um pouco, algo assim. E vamos fazer assim. E acho que podemos duplicar esse imposto. Não vamos menos do que tornar isso muito complicado. Mas talvez pudéssemos remover um pouco desse texto assim. Só para que você tenha alguma variedade, deixe-me deletar isso. E deixe-me apagar esse erro de digitação. E mais uma vez, eu só vou pegar esse texto. Talvez eu só vá duplicar. Então vamos e depois colocamos na última div aqui. E talvez desta vez eu vou deixar apenas este parágrafo como aquele. Mas quando dermos uma olhada, deixe-me salvá-la. Quando olhamos para o nosso original, podemos ver que temos este primeiro, ao contrário de um recuo, como um recuo, que esta carta é maior do que todas as outras. Então, parece que quando todos nós estamos começando um parágrafo de uma maneira muito, muito chique. Então, de novo, o que podemos fazer é pegar isso primeiro, deixe-me pegar essa primeira letra. Como você pode ver, às vezes não é tão fácil. E novamente, eu vou apenas clicar em um span. E eu vou talvez mudar o peso da fonte como 700 e aumentar o tamanho desse cara para algo como talvez 60 pixels. Então eu vou talvez aumentar a margem em torno dele para talvez dez no lado. E então pode ser dez na parte inferior. E quando eu vou, vou para a tipografia e mudar a altura da linha para um. E talvez vamos nos livrar dessa margem aqui embaixo, então nosso parágrafo parece um pouco melhor. Mas como podem ver, temos um pequeno problema aqui. Temos muito espaço aqui no topo. Então, para consertar isso, eu vou pegar esse espaço aqui mesmo. E mais uma vez, vou para o layout avançado. E aqui eu vou apenas selecionar flutuador à esquerda. E lá vamos nós. A parte restante das mensagens aqui está a ser colocada à direita, e este tipo flutua para a esquerda. Então, se eu salvei esse cara e me deixasse apenas refrescar meu “não “, deixe-me apenas ir em frente e atualizar a página. Eu vou descer. Você pode ver que recebemos nossa mensagem bem aqui. E a nossa riqueza, este pedaço de texto aqui. E se nós apenas torná-lo menor, podemos ver que ainda precisamos corrigir algumas coisas, mas nossos parágrafos estão funcionando bem. Se eu pegar nossa incredulidade, esse era esse cara. E eu vou para tipografia avançada. Vou para o alinhamento de texto para o centro. Então vamos ver se isso ajuda. Deixe-me apenas refrescá-lo. Lá vamos nós. Temos o nosso livro para o centro. Talvez pudéssemos diminuir esta soma, esta lacuna entre estes elementos. Então, eu só vou pegar essa seção. Vá para Avançado, eu vou para tamanho e espaçamento e talvez me livrar disso, me livrar desse preenchimento aqui inserindo apenas 0 pixels. E se guardarmos isso, novamente, atualize minha página. Lá vamos nós. Nós temos isso. Temos consertado. Então agora o próximo passo seria, como eu mencionei antes, apenas adicionar como uma boa divisão uma imagem aqui na parte inferior. Mas nós não vamos ser apenas, você sabe, entrar. Só estamos colando duas imagens aleatórias como essa. Nós estamos indo para fazer uma seção de página inteira, seção largura do pool com eles imagem de fundo paralaxe. E talvez nós vamos adicionar algum texto sobre essa imagem. Então vamos começar a fazer isso a seguir. 94. 13.14Adicione a seção paralaxes: Então, novamente, o que eu vou começar com é eu vou adicionar uma seção. Lá vamos nós. E esta seção vai se estender pela borda esquerda da nossa viewport até a borda direita da nossa viewport. Então, para o recipiente de seção com, Eu vou em frente e escolher largura total. E deixe-me apenas adicionar uma imagem de fundo a ele. E pelas minhas imagens que tenho aqui, vou escolher aquela que chamei de paralaxe. Então eu vou selecionar a imagem. E acho que talvez pudéssemos adicionar uma cor de sobreposição de imagem. Então eu vou ir em frente e pegar minha imagem azul escuro e apenas diminuir este SY, bem, a opacidade para algo assim. E eu vou adicionar um texto. Mais uma vez, vou adicionar um título. Então, um título como este. E deixe-me mudar rapidamente sua cor para branco para que você possa vê-lo. Então vamos apenas digitar, obter uma consulta gratuita, algo assim. E eu vou talvez aumentar o tamanho da fonte, algo como 55 e apenas ver esses 56. Então 56, lá vamos nós. Eu vou para topografia avançada e nós vamos fazer o alinhamento de texto para o espaçamento entre letras de uma linha de altura para uma, 0,1. Lá vamos nós. E eu vou pegar meu sexo e ter certeza que tudo está bem alinhado com o centro. Lá vamos nós. Vamos apenas adicionar alguns textos simples abaixo disso. Receba uma consulta gratuita sobre texto, e vamos pegar o texto emprestado daqui. Então talvez eu só vá duplicar esse cara e colocá-lo sob minha cabeça assim. E eu também vou torná-lo branco. E acho que podemos alinhá-lo ao centro. E vamos e talvez me deixe ligar para o Rabbit e fazer com que pareça assim. Lá vamos nós. E se você quiser, você pode adicionar mais texto aqui. Mas eu acho que eu também vou adicionar algum espaçamento entre o meu cabeçalho e o, bem, este pedaço de texto e o fundo que vai ser que eu vou colocar abaixo deste pedaço de texto. Então, de novo, eu vou com 1010. E a última coisa a fazer aqui, basta adicionar um botão. Lá vamos nós. E eu vou apenas digitar algo como, bem aprender mais assim como fizemos antes. E talvez eu só vá mudar a cor do botão para esta cor rosa. E quanto ao tamanho do botão, vamos tentar 12. E talvez mudemos o tamanho do texto para 12 também. E eu vou para topografia avançada, espaçamento de letras maiúsculas, altura de linha 1.1. Isto deve ficar bem. E sabes que mais? Talvez vamos adicionar mais uma margem de preenchimento entre isso, aquele pedaço de texto e, e este, este botão. E talvez vamos realmente fazer o botão um pouco maior. Vamos torná-lo um pouco mais ousado. Algo como 18. E eu vou aumentar o tamanho do texto para algo como 16. Isto deve construir certo? E talvez eu só vou adicionar mais espaçamento, mais preenchimento para a minha seção porque eu não sei, eu acho que nós poderíamos. Será mais fácil para nós ver o efeito Parallax. Agora, uma vez que quisemos adicionar mais, mais espaço entre esses elementos, então o que minha seção selecionaria? Vou para o fundo avançado. E para esta paralaxe anexação de fundo, eu vou escolher fixo. E, claro, ainda precisamos definir o tamanho do fundo para cobrir. Nós não queremos que ele se repita, e queremos ter certeza de que nosso ponto de foco está definido para o centro. E nós vamos, eu vou salvá-lo. E agora vamos para a nossa página principal. Vou refrescá-lo. E quando agora rolamos, você pode ver que nossa imagem de fundo é realmente rolar. Bem, é, ele permanece fixo, mas todo o outro conteúdo permanece o mesmo. E se eu só, apenas, para ver um pouco melhor o que esse efeito está realmente fazendo por nós. Eu só vou duplicar esta seção. Vou colocá-lo aqui se eu puder. Às vezes, com oxigênio precisa de um pouco complicado para acertar. Então, temos esta parte bem aqui. E deixe-me refrescar esse cara de novo. Então agora, se nós, se nós movê-lo, você pode ver que nós estamos realmente, você sabe, nós temos um pouco mais, bem, todo o conteúdo está se movendo e que o solo da cama permanece fixo. E talvez pudéssemos pegar mais alguma mensagem. E vamos apenas, apenas para tornar a seção de um maior, vamos inserir um pouco mais de texto, salvar isso novamente, e atualizar minha página. E agora podemos ver que estamos vendo um pouco mais de nossa imagem de fundo na imagem de fundo na parte de trás, sim, imagem de fundo na parte de trás. Mas o mais importante é que é uma maneira muito simples de obter esse efeito de paralaxe que funcionará, você sabe, em todos os dispositivos, não importa quão grande ou pequeno seja. E ainda assim, lá vamos nós. Isto é o quão simples é obter uma seção de fundo paralaxe aqui dentro do oxigênio. E eu acho que parece muito, muito mais envolvente e interessante do que apenas essas duas imagens planas que estão aqui em nosso design original. Então eu não vou usar a seção. E quanto mais, eu quero adicionar outra seção que será esta seção áreas de prática. Então esse cara aqui, primeiro temos que adicionar um texto de ajuda legal, depois esse título de áreas de prática, e então alguns ícones e um botão aqui embaixo. Então vamos fazer isso a seguir. 95. 13.15Adicione a seção áreas: Tudo bem, ajuste no ou obtenha uma seção de consulta gratuita. Então agora vamos adicionar essas seções de áreas de prática. Então vamos começar com alguns, com algum texto aqui no topo, e então vamos adicionar esses ícones aqui na parte inferior, é claro, na parte inferior. Então vamos adicionar uma nova seção. Eu só vou clicar em Adicionar seção. Lá vamos nós. E dentro vou adicionar meu módulo de texto. E então eu vou adicionar um módulo de cabeçalho como esse. Então eu vou selecionar minha seção primeiro e eu quero ter certeza de que alinhamento horizontal do item está definido para o centro. Porque, você sabe, nós queremos manter tudo bem orientado, bem centrado. E vamos digitar aqui. Acho que foi uma ajuda legal assim. E vamos mudar a cor do texto para uma cor vermelha. E Mindless Mude o peso da fonte para algo como 700 ou talvez 600. E então vamos para a tipografia. Vamos fazer esse cara maiúsculo. E talvez vamos realmente adicionar uma lei, um pixel de espaçamento como esse. E eu também vou sublinhar este pedaço de texto. Eu só vou definir a decoração do texto para sublinhar assim. Recebemos nosso primeiro texto. Vamos, na verdade, fazer 700. E talvez vamos fazer como 1212 pixels ou 13 pixels. Então agora tudo o que temos que fazer aqui é apenas digitar as áreas de prática de RP que vamos. E acredito que o nosso tamanho era 56. Então eu vou ir em frente e digitar 56. E vamos para a tipografia. Vou alinhá-lo ao centro e fazer um pixel de espaçamento de letras como este. Talvez também vamos adicionar a altura da linha para 1.1. Lá vamos nós. Agora, se você quiser, você poderia talvez adicionar algum espaçamento aqui em baixo para fazer uma ode, para adicionar algum espaço em branco, para deixar alguns, deixar um pouco de ar entre esses dois elementos. Mas isso é tudo, isso é tudo uma questão de gosto neste caso, porque o mais importante aqui é adicionar esses ícones aqui. E nós temos que, nós temos que pensar um pouco antes de realmente adicionar todos esses ícones que, e nós temos que fazer isso. Temos que pensar sobre isso. E apenas para chegar com as melhores, melhores práticas, melhor saber, melhores passos a tomar, a fim de fazer isso, fazer as colunas, fazer essas colunas ou tornar essa seção o mais fácil possível e o mais rápido possível. Então, é claro, o que vamos precisar é que vamos ser limpeza todas as colunas. Então temos quatro ícones assim. Então eu vou adicionar uma coluna ou colunas na verdade, e eu vou escolher 25 por 25-25. Então temos quatro divs. Se apenas dermos uma olhada, dê uma olhada aqui, temos quatro divs no total nessas colunas. Talvez vamos mover esse cara um pouco para baixo. Então, a fim de tornar o processo o mais rápido possível, eu recomendaria usar as classes neste caso, mas não apenas para como um ícone ou como um cabeçalho em talvez algum pedaço de texto abaixo que não tinha, mas também para o recipiente inteiro. Porque o que eu quero fazer é que eu quero ter este tipo de efeito bem aqui. Como o que, o que as fronteiras, mas eu quero torná-lo um pouco diferente. Então deixe-me mostrar o que quero dizer. Vou talvez mudar o nome deste tipo aqui. Então, esta é a nossa primeira coluna. Eu só vou nomeá-lo como um. E por dentro vou adicionar uma div. Então, só uma simples div. Então agora temos uma div dentro dessa div. Então o que eu quero fazer agora é adicionar uma aula àquela div. Então vamos chamá-lo de Ícone, talvez como ícone, uma coluna como essa. Então o que eu quero fazer com esse cara é ter certeza que ele está definido para 100 pixels, 100% de largura. Então eu só vou digitar isso em 100%. E eu quero ter certeza de que todos os elementos filhos são surpreendentes visão verticalmente, e eu vou alinhá-los horizontalmente ao centro e verticalmente ao meio. Então, tenho certeza de que todos os meus elementos estarão sempre exatamente bem no centro, tanto horizontalmente quanto verticalmente. O que eu também gostaria de fazer é adicionar uma fronteira em torno deste div. Então eu vou para fronteiras avançadas e eu vou pegar, talvez vamos pegar nossa cor rosa, rosa pálido. E eu quero ter certeza de que a largura é definida como um e que ele está definido como sólido. Então eu sei que é um efeito muito, muito leve, mas eu espero que você possa vê-lo. Talvez eu vá pegar minha página e eu vou colar esse URL no modo de navegação anônima. E é claro que seria uma boa idéia primeiro salvar minha página como de costume. E agora vou refrescar isto. E aqui está a nossa div. Eu sei que é um efeito muito, muito leve, mas está lá. Então o que vou fazer agora é adicionar um estado à nossa turma. Então temos a nossa turma, esta coluna de ícones. O que eu quero fazer agora é clicar na opção estado, e eu quero ir em frente e escolher pairar. E ao pairar, quero que isto, esta fronteira mude. Então, eu vou para o Advanced. Então eu vou para Borders. E vamos escolher a minha cor, este tipo aqui. E a largura será de um pixel. E isso vai ser, bem, a fronteira vai ser sólida. Então, quando salvarmos isso e deixe-me apenas talvez adicionar rapidamente algum como um pouco de texto dentro para que você possa realmente ver essa borda. Eu vou salvá-lo. Só quero que entenda o efeito. Então temos o nosso div bem aqui. E quando você paira sobre, você pode ver que nossa fronteira está aparecendo quando nós pairamos sobre esta div. Mas eu não quero isso, eu não quero que esta fronteira apareça assim. O que eu quero fazer é selecionar meu div. Vou me certificar de que estou no estado flutuante. E eu vou para avançado. Então eu vou para a transição de efeitos. E eu vou apenas adicionar uma ligeira transição, duração de transição para 0,3 segundos. Quando guardarmos isso e atualizarmos isso. Você pode ver que essa fronteira é uma transição agradável. Não é como se ele não fosse como um salto instantâneo. Há um ligeiro desvanecimento. E eu estou fazendo tudo isso porque eu quero que todas essas mudanças sejam aplicadas globalmente ao meu disco. Então, quando eu, em seguida, apenas para copiar a cópia que eu quero todos aqueles todos aqueles elementos CSS ou todos esses ajustes para ser adicionado a todos próprios todos os meus divs. Assim que div é criado. O que podemos fazer agora é que vamos realmente começar a adicionar o como os ícones dentro e o texto e o cabeçalho. Então vamos começar a fazer isso a seguir. 96. 13.16Adicione os ícones: Então, se dermos uma olhada no original, podemos ver que temos um, temos um carro bem aqui. Temos algumas mensagens, Will um título. E isso é basicamente, claro que nós temos algumas, você sabe, algumas animações bem aqui e nós podemos, bem, nós poderíamos fazer isso se você quiser. Então o que eu vou fazer é primeiro eu vou talvez adicionar todos os elementos que eu preciso. Então, dentro dessa div, eu só vou adicionar uma imagem. Lá vamos nós. E eu vou, talvez você comece com este carro e eu vou selecionar essa imagem, vou salvá-la. E eu vou refrescar isso. E lá vamos nós. Temos a nossa imagem bem aqui. E eu acho que eu estou indo bem, quero dizer, nós poderíamos torná-lo menor ou não, fazer algumas coisas sobre isso. Mas antes de fazermos isso, eu só vou adicionar uma classe que vai chamá-la de tau como ícone. Não sei se consigo imaginar. Vamos fazer assim. Eu vou adicionar uma classe e eu vou mudar sua altura para talvez 35. Isso é muito pequeno. Mas 42, 55 ou 58, acho que 58 deve estar bem. Podemos sempre mudá-lo mais tarde. Então o que poderíamos fazer é, bem, nosso div on hover tem uma borda muito, muito leve. Mas você sabe o que primeiro talvez vamos apenas mudar a fronteira em torno deste, este div bem aqui. Vamos fazer isso, vamos fazê-lo, esta é uma cor cinza muito, muito clara. Quero que a largura seja de um pixel sólido. Vamos salvar aquele cara. E vamos atualizar a página. Vamos ver o que parece. Lá vamos nós. Temos uma fronteira muito, muito ligeira, ligeira em volta do nosso carro agora. Então o que eu quero fazer agora, então talvez nós poderíamos tentar como um imitar este efeito de pairar também no nosso carro. Então, ele muda de uma cor cinza. Dois, como este, a nossa cor vermelha principal e dominante. Então o que eu vou fazer é pegar meu carro. Vou certificar-me de que esta classe de imagem de ícone está selecionada. E eu vou para efeitos avançados. E eu vou para Filter. E desta lista, vou escolher a escala de cinza. E eu quero aplicar 100% desse efeito. Então, você sabe, então é basicamente ótimo. No entanto, quando escolhemos agora o cursor do mouse do estado, eu quero que este filtro para que a escala de cinza seja definida como 0%. Então, quando salvarmos aquele cara e atualizarmos nossa página, nosso carro está esmaecido. Mas quando você passa o mouse sobre esses caras, você pode ver que nosso ícone está, está mudando também. Então ele poderia me fazer também adicionar uma transição para este estado flutuante. Então, vou para a transição de efeitos de transição. Creio que foram 0,3 segundos. Lá vamos nós. E vamos atualizar a página. Quando você passa o mouse sobre isso, você pode ver as taxas bem, bem em transição. Então tudo o que precisamos fazer agora é adicionar algum texto. Então eu vou adicionar um título. Lá vamos nós. E novamente, eu vou adicionar uma classe a ele, então eu vou chamá-lo de título ICOM ou ICANN tinha espessura que vai, isso vai ser bom. Então eu vou mudar o tamanho da fonte para algo como talvez, vamos tentar 18. Lá vamos nós. Vamos para a tipografia e vamos colocá-la no centro. E a altura da linha para 1.1. letras espaço um. E talvez vamos digitar tipo, não sei, acidentes de carro. E talvez vamos aumentar o tamanho da fonte como 20 para talvez vamos nos livrar desse espaço em um item. Acho que não vai gostar. E então vamos adicionar talvez um pouco de margem como dez pixels na parte superior e depois na parte inferior. Porque agora o que quero fazer é adicionar um texto. Então eu só vou adicionar texto. E novamente, eu vou chamá-lo, eu vou adicionar uma classe, então ícone, texto, adicionar classe. E novamente, eu vou para a tipografia alinhada ao centro. E talvez eu mude o tamanho da fonte para algo como 13. Acho que isto deve ficar bem. Então a última coisa a fazer aqui seria adicionar talvez um espaçamento incrível dentro, dentro de nossa div. Então eu vou selecioná-lo, ir para Avançado e, em seguida, o tamanho e o espaçamento. E eu vou gostar da Demi como oito pixels de preenchimento ao redor, ou talvez até dez pixels. E então vamos salvar esse cara. Eu vou para a minha página, atualizar isso. E este é o nosso, este é o nosso ícone parecido com este. Claro, se quiséssemos, talvez pudéssemos adicionar ainda mais espaço. Talvez vamos fazer uns 20 pixels. Talvez. Isso parecerá um pouco melhor ou até mesmo 25. Não, é totalmente com você. Você pode fazer você pode fazer o que quiser com o estofamento se você não quiser se você não precisa dele, você não tem que colocá-lo dentro. Mas eu só acho que assim parece um pouco melhor. E temos um pequeno efeito funky bem aqui. Além disso, se você quisesse, você poderia talvez em um hubbard crescer este div um pouco como no original. Então tudo o que precisamos realmente fazer é ter certeza de que temos nossa classe selecionada, que estamos em nossa camada div. E, em seguida, a partir da opção de estado, eu vou escolher pairar. E então em nossos afetos avançados, e nós vamos nos transformar, vamos adicionar uma transformação. E a partir deste menu suspenso, e nós vamos escolher escala. E o outro gosta de aumentar a escala para ser demasiado drástico. Então eu estou indo apenas para ir ao vivo com 1.2, talvez para a escala x 1.2 para y. e nós vamos salvar isso, atualizar minha página. E então você pode ver que é muito bem ecologistas como, mais como um crescimento em efeito quando nós pairamos sobre a nossa div. Então, uma vez que temos essa div criada, isso nos levou algum tempo, mas fizemos tudo isso só porque agora podemos economizar muito tempo ao adicionar e evento. Bem, talvez mudando se você quiser, alguns aspectos sobre nossos, nossos ícones. Então vamos ver como podemos realmente beneficiar dessas classes que acabamos de adicioná-las. Como podemos nos beneficiar de tudo isso, dos passos que demos. E no próximo vídeo. 97. 13.17Adicione os ícones restantes: Então realmente todo inteiro agora, a fim de preencher as colunas restantes com o, com nossos ícones, é apenas duplicar esta div. E eu vou movê-lo para dentro da minha segunda coluna. Se eu puder colocar aqui dentro, talvez eu renomeie esse cara. Vou chamá-lo de número dois. Então vou duplicar esse cara mais uma vez. E eu vou colocá-lo dentro da nossa terceira div. Lá vamos nós. E deixa-me mudar o nome deste tipo. Vou chamar-lhe três. E esse cara, eu vou duplicá-lo e movê-lo para dentro da minha div que eu vou chamar. E eu vou ligar. Lá vamos nós. Então, realmente tudo o que precisamos fazer agora é apenas mudar os, os ícones. Então eu vou pegar este ícone e eu vou escolher talvez como esta casa. Por que não? Cara, eu só vou chamá-lo. Eu não sei. Propriedade pode ser lei de propriedade. Vamos comentar assim. Então eu vou pegar este ícone, e eu vou apenas escolher este. E vamos chamá-lo de auto. Nenhuma herança pode ser nada. E agora o último ícone, vamos escolher esse cara aqui, esse ícone, e eu vou chamá-lo, eu não sei, cuidados de saúde. Só porque agora temos todos os nossos ícones. Deixe-me guardar isso. E eu só vou atualizar a página. E como você pode ver, nós temos todos os nossos ícones e eles têm todas essas animações agradáveis acontecendo. Mas digamos que não sabemos se gostaríamos de cultivar esses elementos ainda mais. Ou talvez gostaríamos de mudar a transição ou não gostamos da fronteira e, sabe, coisas assim. Mas, você sabe, seria que nos levaria muito tempo se você quisesse apenas mudá-los cada pedaço, cada e cada ícone. O passo a passo, tudo o que realmente podemos fazer é pegar um de nossos divs que tem essa classe ligada a ele. E eu vou para o State Hover. E digamos que não quero que cresça tanto. Então eu vou para a transformação de afetos avançados. Esta é a nossa transição, a nossa transformação. Então vamos dizer que eu queria crescer apenas em 1.11.1. Vamos salvá-lo. E então, quando atualizamos a página, você pode ver que todos esses caras estão crescendo da mesma forma, da mesma maneira. Além disso, digamos que eu gostaria de talvez aumentá-los na margem entre a nossa vontade, este título aqui dentro. Então, novamente, eu vou ter certeza de que eu tenho esta classe selecionada. Eu vou para o tamanho avançado e espaçamento e eu vou aumentar a margem, margem superior coletar 16. Mas eu vou diminuir a margem inferior para algo como oito. Como você pode ver, todos esses elementos estão mudando. Então, mesmo que você vá para 0, você pode ver que estamos mudando em todas as instâncias de nosso, de nosso título ao mesmo tempo. Então esta é apenas, esta é apenas a maneira de trabalhar de forma mais inteligente, não mais difícil. E você sabe, se você for apenas burro. Trabalhe um pouco mais, mas definitivamente muito mais, muito mais inteligente no início. Mais tarde, tudo será muito mais fácil para você. E mesmo agora, eu vou apenas duplicar essas colunas. E como você pode ver, temos nossos ícones prontos e esperando por nós. Eles têm as mesmas classes, então eles estão se comportando exatamente da mesma maneira. E tudo o que precisamos fazer é mudar isso, mudar o ícone. Então eu vou pegar esse coração, coração partido, e eu vou com eles, me divorciar. O pior. Lá vamos nós. Este tipo vai ser a nossa semana já tem o carro. Então vamos fazer isso. Vou entrar como, sei lá, Direito Tributário, Mamie, algo assim. Esse cara, talvez eu vá pegar o martelo e o rancho e vamos chamar de instrução. Lá vamos nós. E para o último cara vai ser, eu acho que vai ser este. Vamos chamar-lhe “Direito das Sociedades”. Direito das sociedades. Lá vamos nós. E vamos salvá-lo. Claro, se você quiser mudar o texto aqui embaixo, se você não quiser ver isso como um bloco de texto, é claro que poderíamos fazer isso muito, muito facilmente. E também temos essa classe adicionada a ela para que possamos, então se nós apenas decidimos que queremos torná-la maior, nós, nós podemos torná-la um grande M. Nós não vamos tornar todas as, todas as instâncias da classe maiores. Então eu vou voltar para o 13. Lá vamos nós. Então eu vou salvar esse cara. E eu vou atualizar minha página. E como podem ver, temos todos os nossos rapazes prontos a comportar-se bem. E eu acho que isso parece muito, muito limpo e que é apropriado para um site de advogados advogados. Então, a última coisa a fazer aqui, seria apenas adicionar um botão. Então o que eu vou fazer ainda está dentro dessa seção, eu só vou adicionar rapidamente, apenas vou adicionar um pequeno botão aqui em baixo. Quero que o botão seja lido. Lá vamos nós. Vou chamar-lhe “Saiba mais”. Saiba mais. Lá vamos nós. E vamos para tipografia avançada. Vou fazer maiúsculas. E eu vou salvar esse cara. Também. Talvez, vamos mudar o comportamento do nosso botão. Vamos talvez coisa, vamos, vamos dizer que queremos talvez mudar a cor, reverter o esquema de cores aqui mesmo quando passarmos o mouse sobre o botão. Então, com o botão selecionado, vou para o estado flutuante. E nossa cor do botão será sobre a cor branca, ou podemos torná-lo ainda transparente. Então vamos e eu vou mudar a cor do texto para vermelho. Lá vamos nós. E talvez eu só vou introduzir uma fronteira simples e simples. Então eu vou para Effect Borders avançadas. E depois vou escolher esta cor vermelha. Quero torná-lo muito, muito bem, muito, muito sólido e muito gentil. Então, só um pixel. Vamos atualizar essa página. Então, agora, quando passamos o mouse sobre nosso botão, você pode ver que é que ele muda lá. Talvez pudéssemos tentar introduzir alguma transição também. Então eu vou para a transição de efeitos e apenas fazer como 0.3. como de costume. Então vamos ver se está mudando alguma coisa. Só vou atualizar a página. E como você pode ver, temos uma transição agradável acontecendo aqui mesmo quando você paira sobre o nosso botão. Então lá vamos nós. Temos nossas áreas de prática completas. Bem, quase ainda precisamos cuidar da capacidade de resposta, ou pelo menos precisamos verificar se a responsividade está funcionando corretamente. Então vamos fazer isso no próximo vídeo. 98. Confira 13.18: A seção está pronta, então agora vamos verificar a capacidade de resposta. Então vamos para o contêiner de página 1120. Ainda parece, certo. Vamos para menos de 992. Acho que parece bem. Acho que podemos deixar assim. Vamos para 768. Ainda parece bom. E vamos para o nosso quatro AT este parece definitivamente, definitivamente o melhor. Então, por exemplo, talvez haja um pequeno problema com isso, com essa topografia. Aqui. Vamos para menos de 768. E menos de 768, acho que está bem. Vamos apenas para 480. E vamos pegar esse cara. E eu vou para a topografia avançada e vamos verificar a altura da linha se apenas digitarmos um. E isso vai parecer um pouco melhor. E talvez quando formos para 7068, talvez pudéssemos fazer estes, bem, toda esta parte aqui. Então talvez até as colunas inteiras um pouco mais pequenas, ou talvez todas as divs dentro, apenas um pouco menores. Já que adicionamos as aulas aqui, podemos pegar esse cara. E vamos escolher, vamos selecionar 85 em termos de largura, oitenta e cinco por cento, talvez até menos do que isso. Vamos para 75. Isto deve ficar bem. E agora eu acho que estes são dibs olhar bem, mas não, eles não são sido devidamente centrado. Então o que eu vou fazer é pegar ajuda como um div, como este, como o primeiro div. E esse cara não tem moral, não tem aula. Então vamos agora apenas rapidamente, vamos talvez apenas adicionar rapidamente uma classe a ele. Então vamos chamá-lo como, eu não sei, como div 768, só para saber que é só para isso que é apenas para esses pontos de interrupção específicos que eu vou fazer como 768. E o que eu vou fazer é dizer ao oxigênio que, sim, eu quero empilhar os elementos filho verticalmente e eu quero que eles estejam horizontalmente alinhados ao centro. E tudo o que precisamos fazer agora é adicionar a mesma classe à div restante. Então div 768, esse cara, div 768, e esse cara, que vai ser esse número quatro, que vai ser DIV 768. E novamente, o pecado vai para esses elementos, há essas divs. Então o primeiro, então esse é o div, 768, segundo 1. Vamos dar 768. Como você pode ver, se nós fizemos, se nós adicionamos uma aula, você sabe, no início. Definitivamente poupar muito tempo, mas é, bem, você sabe, o que, você sabe, você aprende com seus erros. Então agora, quando vamos para menos de quatro AT isso, bem, como você pode ver, nós estamos herdando esse tamanho de nossa div dos sete ou 68 que nós definimos para eu acredito que nós definimos para um setenta e cinco por cento. Acho que foram 75. Então eu acho que todos esses elementos foram definidos para 75. Então este ponto de interrupção em 480, nós poderíamos, nós podemos defini-los para 100, 100 por cento. Lá vamos nós. E parece muito melhor. Então, se agora apenas salvar isso e atualizar a página. Agora vamos apenas verificar o que vai parecer em dispositivos menores. Então vamos descer, descer, descer até atingir um 992. Isto vai ficar assim online, 92, e então vamos 768 e 418. Então lá vamos nós. Ficamos bem, cuidamos da capacidade de resposta. Claro, poderíamos brincar com todas essas opções durante todo o dia pode estar fazendo essas dibs ainda menores se quiséssemos. Então vamos dizer que não. Vamos deixá-los em 775. Então, vamos atualizar a página. E nós teríamos nós teríamos que olhar assim, basicamente o mesmo como antes. Então lá vamos nós. Nós temos, nós temos a seção criada, então nós cuidamos da capacidade de resposta. Então a próxima seção seria adicionar isso, por que nos escolher seção? E acho que vou adicionar uma imagem na parte de trás. Mas talvez pudéssemos adicionar como um fundo, como uma sobreposição de fundo gradiente. Podemos fazer isso, definitivamente. Por que não? E sim, então vamos começar a fazer isso no próximo vídeo. 99. 13.19A: Então agora vamos criar outra seção. Vamos chamá-lo de seção “Por que escolher”. Então, como de costume, vou apenas criar outra seção. E acho que poderíamos pegar emprestado esses dois como cabeçalhos, este pedaço de imposto e este cabeçalho. Então eu vou encontrá-lo aqui mesmo no meu painel Camadas de poço. Vou colocá-lo aqui em baixo. E o mesmo vale para este título. Eu vou apenas, eu vou apenas duplicar isso. E eu só vou mover este caminho para cá. Então temos nossa seção, temos nossa mensagem bem aqui. E acho que talvez possamos mudar esse imposto para vamos deixar isso como ajuda legal, mas vamos fazer isso. Vamos mudar esse fluxo para o porquê. Escolher-nos? Lá vamos nós. Então o que eu quero fazer aqui é, bem, na verdade eu quero fazer três coisas. Então eu quero adicionar uma imagem de fundo, mas eu também gostaria de sobrepor ao gradiente. E então eu quero adicionar um texto abaixo bem aqui. E eu quero colocá-lo em colunas. E então eu só quero adicionar alguns como alguns números indicando, você sabe, nossa experiência ou a experiência de nossa empresa. Então, antes de fazermos isso, deixe-me apenas adicionar um texto apenas para que possamos ver algo bem aqui. E eu só vou ambular, só pegar um pouco de Lorem Ipsum desta vez. Eu vou pegar este parágrafo, eu vou copiá-lo e apenas colado dentro. Então, como eu disse antes, eu só vou pegar minha seção, ir para o fundo avançado e me agarrar desta vez, eu vou conseguir este, esta imagem fixa ponto-ponto JPEG. E eu só vou selecioná-lo e eu vou salvar minha página. E acho que talvez pudéssemos mudar as cores. Então, essa ajuda legal, vamos mudar a cor para branco. O mesmo para o nosso rumo. Vamos mudar a cor e o mesmo para este texto. E lá vamos nós. Agora, neste ponto, podemos ver isso. Não podemos ver muito. Quero dizer, não há contraste suficiente. Eu acho que poderíamos talvez por muito tempo como sobrepor um pouco de cor sobre este fundo. E os folhetos vão realmente sobrepor uma cor, mas vamos torná-la um gradiente. Então, de novo, vou para o fundo avançado. E aqui em baixo temos essa opção de gradiente. E aqui dentro de oxigênio você pode ter quantas paradas de cor tem sido classificando paradas como você deseja. Então o que eu vou fazer é talvez adicionar as paradas de cor. E eu só vou pegar minha cor. E claro que isso não é, esta não é a seção que eu quero, eu quero escolher esta é esta seção aqui. Então, novamente, gradiente de fundo avançado, adicione duas cores. E eu vou usar esta cor escura e esta cor escura novamente. E é claro que não podemos ver muito agora. Mas uma vez que começamos a baixar a opacidade, você pode ver que estamos fazendo nossa sobreposição de cor semelhante um pouco transparente. Então vamos talvez fazer algo como 0, como 95%. E no que diz respeito a este tipo, vamos talvez fazer com que seja 75%. Lá vamos nós. E a grande coisa sobre gradientes aqui dentro da auxina é que, como eu mencionei antes, podemos adicionar paradas de cor. Então, por exemplo, se pegarmos esse cara e adicionássemos uma cor, parássemos e adicionássemos uma cor. E então talvez possamos concordar com este e colocá-lo todo o caminho para baixo. Você pode ver que estamos basicamente apenas, você sabe, fazendo algo como um gradiente de C diretamente transparente. Então ele vai desta cor mais escura, esta cor azul escuro, para cor basicamente transparente, e então novamente para a nossa cor mais escura e escura. Então, isto é o que poderíamos fazer se você quisesse, mas eu vou talvez pegar esse cara, pegar nossa cor e baixar a opacidade para algo assim. E o mesmo para este, mas sempre tão ligeiramente. Então nós temos, você sabe, como um gradiente de fundo semi transparente. E, claro, se você quiser, você pode mudar o tipo de linear para radial. Se você quer ter uma volta radial voltar para o chão. Ou podemos escolher um linear para cima e podemos mudar o ângulo para como 90 se você quiser. Se você quiser mudar como o fluxo do nosso gradiente, isso é, isso também é possível. Mas vou deixar assim. Então, neste momento, poderíamos talvez adicionar um pouco de espaçamento aqui em baixo. E a próxima coisa a fazer seria colocar este texto em colunas. E há, na verdade, duas maneiras de fazer isso. Poderíamos simplesmente pegar colunas e adicionar duas divs e colocar esse imposto dentro dessas vidas. Mas também poderíamos usar uma propriedade CSS chamada junto como colunas ou column-count e gap calmo para colocar este texto dentro de uma coluna se você quiser simular o fluxo de texto entre nossas colunas. Então vamos realmente ver como podemos fazer essas duas coisas. E quais são os desafios e diferenças entre essas duas abordagens? Então vamos começar a fazer isso a seguir. 100. 13.20Text em colunas: Então, se pegarmos nosso pedaço de texto e, em seguida, quando formos para avançar topografia, você pode ver que não temos opção de colocar nosso texto dentro de colunas. Texan colunas é um pouco, bem, não é tão comumente usado, comumente usado seletor CSS. Então, talvez essa seja a razão pela qual é difícil encontrá-lo em muitos construtores de sites diferentes na verdade. Então vamos ver como podemos desafiar essa questão de nossos resultados. Bem, em primeiro lugar, o que poderíamos fazer é simplesmente adicionar colunas aqui. Então essa seria a maneira mais fácil, eu acho, para colunas e colunas com duas divs dentro. E então quando estávamos apenas sabendo, pegue nossas etiquetas, megálitos duplicados, se você colocá-lo dentro de nossos divs. Então um. E então vamos movê-lo. Vamos colocá-lo dentro da div. Você pode ver que temos o nosso texto em fluindo para a coluna. Então eu acho que esta seria a maneira mais fácil de fazer isso ou a mais óbvia, eu acho. Mas também há outra maneira de fazê-lo. Então, deixe-me voltar algumas vezes até que tenhamos talvez, apenas como esta mensagem e eu vou me livrar dessas acusações. Então o que poderíamos fazer é simplesmente dizer ao navegador para exibir este pedaço de texto como, você sabe, como colunas. Mas para fazer isso, precisamos codificar um pouco. Não vai haver muito, vai ser simples e simples. E eu acho que é, você sabe, é apenas uma boa idéia aprender a usar essa técnica porque enquanto quase todas as outras coisas que você pode ajustar de nossas ferramentas, mas essa fina específica e tudo isso não está disponível aqui. Então o que temos que fazer é que temos que ir para avançado, é claro que esta camada selecionada. E como você pode ver que esse cara aqui que diz CSS personalizado, quando clicamos nele, você pode ver que temos algum espaço para inserir nosso CSS específico para isso. E felizmente, que as regras CSS para este efeito são bastante lógicas, eu acho que auto-explicativas, tudo que eu preciso digitar é apenas contagem de colunas. E vamos digitar porque é isso que queremos. E então vamos fechar essa regra. E como você pode ver, tudo o que precisamos fazer é apenas digitar contagem de colunas e, em seguida, apenas quantas colunas deseja ter. Se você quiser ter cinco, eu vou colocar em cinco colunas. E a melhor parte sobre isso é que este texto está fluindo entre essas colunas. Se você apenas colocasse esse texto dentro de dibs separados, teríamos que manualmente apenas sem cortar e colar homens essa peça, bem, esses pedaços de texto. Mas usando esse método, podemos apenas deixar o texto fluir entre essas colunas. Então eu quero ter duas colunas. E, a propósito, se você quiser controlar o espaço entre esses dois, essas duas colunas, você pode simplesmente digitar uma coluna e, em seguida, traço gap. E você pode configurá-lo para, sei lá, 150 pixels. Vamos assim. E você pode ver que essa lacuna é, Bem, definitivamente é muito grande, mas é assim que você pode controlar e aquela, essa lacuna. Então eu vou aplicar esse código. Vou derrubar o editor, mas vou copiar esta regra. E agora um desafio, outro desafio com isso, este efeito é que ainda assim você vai, é fácil. Quer dizer, em alguns, acho que o fluxo de impostos é um bom efeito. No entanto, quando vamos dizer menos de 768, agora que essas duas colunas, eu não sei. Só acho que acho que parece estranho. Acho que seria melhor se tivéssemos Minow, provavelmente uma única coluna aqui. Então, como poderíamos desafiar como podemos resolver esse problema? Bem, ainda dentro do meu CSS personalizado avançado, vou colar essa regra de volta. E vamos mudar a coluna de dois para um. E é isso. Nós somos, podemos basicamente de uma maneira muito, muito simples, basta alterar nenhuma regra CSS específica para pontos de interrupção específicos simplesmente adicionando-os aqui dentro deste CSS personalizado e o painel dentro da ferramenta Espanha. A propósito, talvez pudéssemos gostar, não sei, como uma cama e um fundo. Vamos, talvez, eu posso ver que este é apenas um grande parágrafo. Então deixe-me apenas talvez eu não saiba. Vou fingir que isto é um parágrafo. Então, agora, quando vamos para todos os nossos dispositivos, você pode ver que este parágrafo está realmente aqui, mas o texto ainda está bem, bem fluindo. Então nós temos, é assim que podemos criar o texto em colunas aqui dentro de oxigênio e basicamente em qualquer, em qualquer construtor ou porque é apenas um simples estilo CSS que escreveu. E o que ainda temos que fazer agora é adicionar como apenas pegar o original esses clientes globais anos de experiência, especialistas em equipe, prêmios e homenageia esses números aqui, apenas para adicionar alguns, e eu gostaria apenas de uma prova que somos que somos um bom advogado, um escritório de advogados. Então, na verdade, você começa a adicionar os próximos. 101. 13.21Termine a seção: Então, para adicionar esses pedaços de informação, eu vou adicionar colunas. E eu vou fazer bom para 25-25 por 25 por 25. Então eu quero ter quatro colunas no total. E eu só vou movê-los um pouco para o fundo assim. Então nós temos quatro divs e eu acho que seria uma boa idéia adicionar aulas a eles. Então eu vou adicionar uma classe que eu vou chamar escolher div, apenas assim. E eu vou adicioná-lo rapidamente a todas as minhas diferenças. Então escolha div, este, para fechar div, este, escolha div. E o que eu quero fazer com essa aula é ter certeza de que todos os meus elementos foram centrados horizontalmente e verticalmente. Por que não? E agora o que temos que fazer é apenas adicionar essas informações lá dentro. Então eu vou adicionar texto e, em seguida, outro texto. Então basicamente temos apenas 22 simples pedaços de informação, texto simples e simples. E acho que podemos adicionar aulas a esses dois. Então eu vou chamá-lo como perder tinha para ir. E este vai ser escolher texto. Escolha, escolha texto. Vou adicionar a turma. Então, para esse cara, eu vou ter certeza que isso tem essa cor branca, que é definitivamente maior. Talvez não tão grande. Vamos para o 32. E o primeiro foi clientes globais. Então vamos fazer dez. Ok, lá vamos nós. E vamos fazer a fonte maior. Vamos torná-lo mais espesso. Lá vamos nós. Então pode ser ainda maior do que isso, como 82, isso deve estar bem. E então eu vou pegar essa parte inferior do texto. Vou adicionar esta cor a ele. Acredito que era do cliente. Lá vamos nós. Eu quero fazer o peso da fonte um pouco mais grosso e eu acho que o tamanho vai ser bom, mas vamos para a tipografia. Vamos certificar-se de que ele está definido como text-align está definido como centro. Vou fazer em maiúsculas. Lá vamos nós. E eu acho que seria melhor pegar esse cara e torná-lo um mega texto alinhado ao centro também. E talvez vamos mudar a altura da linha para algo como 1.1. Então lá vamos nós. Talvez devêssemos adicionar um pouco de espaço aqui assim. Talvez não tanto assim. Isto deve ficar bem. Então, tudo o que realmente precisamos fazer é apenas duplicar esses dois elementos. Então eu vou fazer isso bem rápido. Então eu vou duplicar este primeiro texto, vou colocá-lo dentro desta div, e então eu vou duplicar esta div inferior, colocá-lo aqui embaixo. Então eu vou fazer o mesmo. Então, duplique, coloque aqui dentro. Então esse cara duplica e coloque-o aqui. E novamente, duplicar e colocá-lo aqui. E duplicar e colocá-lo aqui. Acho que poderíamos envolver esses dois elementos em uma div e depois clonar uma div. Mas eu não queria fazer como div e dividendo, dividendo se eu não quisesse fazer muito ninho div. Então nós temos, ok, então anos de experiência. Então digamos que somos uma empresa. Digamos que temos, não temos muitos, mas para 124 anos de experiência, isso é uma coisa que é suficiente. Anos de x. vamos fazer talvez, eu não sei dentro desse tempo, vamos fazer tipo, eu não sei, 15 mil casos resolvidos como esse. Eu não sei. Casos. Ou talvez façamos 34 membros assim. E vamos fazer o meu eu não sei, 19 parceiros mundiais, vamos colocar, vamos fazê-lo. Vamos fazer isso. No mundo todo. Parceiros. Lá vamos nós. Então vamos salvar esse cara. Então agora vamos para a nossa página. Vou refrescar isto e vamos torná-lo mais pequeno. Então, vamos ver como será em dispositivos menores. Então vamos mudar isso, mudar isso. Uma vez que atinge esses pontos de ruptura, você pode ver que tudo parece bonito, muito bem. Ok, então nós criamos esta seção, eu acho que no Old começa a parecer muito agradável, profissional silencioso. Então a próxima parte seria adicionar um como a seção de membros da equipe. E nós sabemos que no original gapped esta equipe profissional bem aqui. Mas como estamos dizendo que temos 34 membros, digamos que estes são membros da nossa equipe. Vamos fazer outra coisa. Vamos realmente criar estes, como estes cartões, eu acho, bonk, vamos colocá-los em um controle deslizante para que possamos realmente clicar à esquerda e à direita, apenas ver como, como, como um carrossel de nosso, de nossos membros da equipe. Então vamos começar a fazer isso a seguir. 102. 13.22Comece o time: Então vamos começar com a adição de uma nova seção. Então, novamente, eu vou apenas me ligar e apenas selecionar o conteúdo interno. E então eu vou apenas adicionar uma seção. Isso nos permitirá adicionar esta seção exatamente aqui onde queremos que ela esteja. E eu acho que eu vou pegar emprestado esses dois pedaços de texto, este mini título e este título principal. Então, se você não quiser usar o menu de contexto aqui, você não quer clicar nele e, em seguida, escolher duplicar. Você poderia apenas pegar um pedaço de um elemento que você deseja duplicar. E você pode ir aqui para o painel de ferramentas e você pode apenas clicar componente duplicado. O mesmo para este tipo. E tudo o que vou fazer é trazer estes tipos para cá. Então este é este título e este pedaço de texto. Acho que aqui vou digitar nossa equipe, talvez algo assim. E aqui, conheça nossos advogados. Talvez vamos, vamos capitalizar esta palavra. E claro que vou pegar minha seção e quero alinhar tudo ao centro. E se pudéssemos, se eu pudesse soletrar corretamente, seria bom. Ok, então agora tudo que você realmente precisa fazer é adicionar um, bem, eu quero torná-lo como cartões simples com algumas imagens e texto. Eu quero fazer um controle deslizante. Então, porque temos 34 membros, então acho que podemos dizer que temos 34 advogados. Então vamos mostrar mais de três, mas vamos tornar esta seção compacta. Então o que eu vou fazer é eu vou adicionar um controle deslizante. E nesse controle deslizante, não vamos ter imagens ou algo assim. Vamos adicionar colunas. Mas primeiro, eu vou talvez pegar esses dois slides. E talvez eu vá para styling. E eu quero fazer a animação horizontal, mas eu quero fazer a animação mais rápida. Eu quero remover o estofamento em torno de slides e eu não acho que eu quero ver os pontos. Então eu vou remover os pontos do show, e eu não tenho a opção infinita ativada. Então, basicamente, essas são apenas essas poucas coisas que precisamos fazer aqui. Então, agora que temos a nossa configuração deslizante, temos o nosso slide. O que vou fazer é começar a adicionar divs a este slide. Então eu vou apenas clicar em adicionar. E eu vou digitar div. E eu vou clicar neste. E eu quero que esta div seja como 33 pixels de largura em 33% de largura. E eu quero que esta div seja ajustada para 33% porque nós vamos ter três divs seguidos. Então eu vou apenas trinta e três, trinta e três e trinta e três. E quando esse cara for adicionado aqui, se formos simplesmente deslizar e, ou se apenas duplicarmos nossa div. Lá vamos nós. Você pode ver que estamos adicionando verticalmente e isso não é o que queremos. O que queremos é empilhá-los horizontalmente. Então deixe-me ir ao nosso primeiro slide. Vou empilhar elementos filho horizontalmente. E lá vamos nós. Todos os nossos divs estão colocados um ao lado do outro. Mas por enquanto, eu vou remover essas duas divs porque eu quero, eu quero duplicar essa div, mas eu quero duplicá-la com, com todo o seu conteúdo em apenas um segundo. Então, tudo o que terá que fazer é que não mudaremos. E eu mudo alguns aspectos de nossas vidas sem acrescentar todos os elementos uma e outra vez. Mas antes de fazer isso, deixe-me adicionar uma aula à nossa div. Vou chamar-lhe talvez como a Equipa. E eu vou adicionar uma classe porque eu quero ser capaz de apenas manipular esse contêiner. E finalmente eu quero ser capaz de manipular todos os contêineres para os membros da minha equipe e, você sabe, de uma só vez. Mas vamos começar a fazer uma pista no próximo vídeo. 103. Adição de slides: Então eu acho que o que eu gostaria de fazer primeiro é talvez eu poderia adicionar um pouco de estofamento dentro dos meus diffs. Eu vou com talvez algo como 12 pixels ao redor. Isto deve ser suficiente. E, claro, o que quero fazer é adicionar uma imagem. Então eu vou apenas adicionar uma imagem dentro, indo para navegar. E acho que este foi o meu primeiro time. Vou apenas selecionar essa imagem, vou salvá-la. E novamente, eu vou ter que atualizar minha página para ver essa imagem. Então aí está. E por baixo dessa imagem, o que quero fazer é acrescentar algo como o nome dessa pessoa. Talvez adicionar sua posição, talvez algum texto, e talvez algum consumo de mídia social como esse. Então, dentro dessa primeira div, talvez queiramos mudar seu nome, se você quiser. Então eu vou renomeá-lo para, eu não sei, apenas talvez equipe um, assim. Só vou adicionar um texto simples. Lá vamos nós. E vou chamar-lhe talvez este tipo. Vamos chamá-lo de CEO. E vamos talvez adicionar uma classe aos seletores. Então vamos chamar de posição, talvez posição da equipe. Então, posição da equipe. Lá vamos nós. E vamos fazer a nossa leitura. Talvez. Vamos fazer a tipografia do texto. Vamos colocar isso no centro. E talvez mudemos a fonte para algo como 500 ou 600, ou talvez até 700. E talvez vamos mudar o tamanho da fonte para algo como 13 ou 14. E talvez vamos adicionar alguns espaços. Então eu vou adicionar como talvez vamos ver como dez pixels de margem para o topo e talvez algo como dez na parte inferior. E claro, eu vou para a minha equipe um contêiner. E dentro dessa classe, eu quero empilhar, eu quero colocar tudo, empilhar tudo no centro. Então eu vou escolher elementos passo filho verticalmente. E eu vou definir este alinhamento de item de linha horizontal para o centro. Então o próximo texto será como o nome do nosso membro da equipe. Então eu vou me adicionar, eu vou adicionar um título. Lá vamos nós. E eu vou fazê-lo negligenciar indo para H4. E novamente, eu vou adicionar uma classe como equipe, nome da equipe. Lá vamos nós. E eu vou mudar a cor do texto para este aqui. E talvez vamos dar um nome a esse cara. Vamos chamá-lo de Michael Arnold Johnson ou algo assim. Meu contrato algum atraso, o famoso atleta, Michael Johnson. Vamos para a topografia. Talvez vamos mudar o tamanho da fonte para algo como 16 ou 20, ou 26, ou talvez até mesmo como 28. Podemos mudar isso mais tarde porque talvez eu vou introduzir algum espaçamento de letras. E isto deve ser, isto deve estar tudo bem. Então agora vamos adicionar algum texto, apenas um texto simples. Lá vamos nós. E talvez eu só vou pegar emprestado um pouco deste texto daqui e colá-lo bem aqui. E novamente, eu vou adicionar uma classe, alguns como Equipe na descrição. Mas eu acho que este texto parece bem. Talvez, vamos mudar o tamanho da fonte. Só que um pouco. Algo como 14. Isto deve ficar bem. E a última coisa a fazer aqui, eu acho, seria editar os ícones das redes sociais. Então vamos tentar e ícones sociais. Facebook, Instagram, Twitter. Certo, vamos deixar assim, mas vamos mudar os ícones. Vamos talvez mudar o estilo do ícone. Vamos ver o que vai ficar bem. Talvez quadrado. Talvez mudemos a cor de fundo para vermelho. E vamos mudar a cor do ícone dois, assim, cor pálida ou talvez até mesmo essa cor de furto advogado. Vamos, isto deve ficar bem. Talvez quando você passar o mouse sobre este ícone, vamos pegar nosso vermelho, mas vamos deixar isso um pouco mais escuro. Então, quando passarmos o mouse sobre este ícone muda um pouco. E talvez vamos mudar o tamanho dos itens. Vamos torná-los significativamente menores. Talvez uns 26. E o espaço entre ícones, talvez seis. Isto deve ficar bem. E eu vou adicionar alguma margem no topo como dez, ou talvez até mesmo como 26. Isto deve ficar bem. E claro, como você pode ver, eu esqueci de adicionar uma classe ao meu ícone. Então eu vou com tipo, eu vou adicionar uma classe chamada ícones de equipe. Lá vamos nós. Eu vou adicionar ao meu ID aqui, e eu vou clicar em copiar estilos para outro seletor, e eu vou apenas colá-los no meu ícone de equipe. Então agora nossa classe ícones de equipe tem todos, todos esses valores. Então eu acho que agora nós poderíamos talvez apenas adicionar um pouco de espaçamento bem aqui. Vamos adicionar, vamos colocá-lo em algum lugar aqui. Então, agora, quando pegamos, nossa equipe ganhou e duplicamos, ele, pode ver que agora nosso controle deslizante está olhando, olhando muito mais agradável. Vou mudar o nome desta equipa um para dois. Eu só vou mudar essa imagem para esta, para esta imagem. Vamos ligar para ela. Digamos que esse cara é o CEO, então ela será como o Diretor Financeiro, talvez CFO. Por que não? E vamos ligar para ela. Eu não sei, Jane e Jane Grey nós. E agora vamos pegar a equipe também e as terras duplicam esse cara. E vamos, eu vou renomear isso, essa equipe para, eu vou chamá-lo de T3. E esta imagem vai ser ID. Vamos pegar essa imagem. E ela será como a diretora de operações. Por que não? E vamos colorir. Eu não sei. Vamos chamá-la de Margaret. Margaret leu. Por que não? Talvez devêssemos adicionar mais texto aqui em baixo. Eu só vou pegar um pouco deste texto e adicionar outro e adicionar um pouco, algum texto como esse. E o mesmo aqui com o parágrafo. Ou talvez menos do que isso, o parágrafo, vamos deixar. Deixe assim. Lá vamos nós. E o mesmo aqui. Ou talvez eu só vou copiar algum pouco frente este pedaço de texto angularjs em algum, em alguma variedade aqui. Lá vamos nós. Então temos os membros da nossa equipa. Deixe-me salvar e salvá-lo. Então, agora tudo o que precisamos fazer, deixe-me fechar isto. Como podemos ver, temos três divs dentro deste slide e menu. Podemos renomear esse slide para, vamos chamá-lo de slide um. E então vamos apenas, eu vou fechá-lo para que você possa ver tudo melhor. Vou duplicar este slide e vou renomeá-lo. Vou chamá-lo de slide dois. E dentro deste slide, eu vou apenas entrar, novamente, mudar todas as imagens. Então, eu vou pegar este. Vamos pegar essa imagem. E então eu vou para a equipe para, eu vou mudar esta imagem para esta imagem. E eu vou, eu não vou me preocupar em mudar a mudança de nome na posição. Tenho a certeza que já sabes como fazê-lo. É só uma questão de mudar o texto. E lá vamos nós. Só quero mostrar como funciona essa coisa do controle deslizante. Então deixe-me apenas agora visualizar essa página e você pode ver que temos nosso controle deslizante trabalhando com nossas imagens diferentes e diferentes. Então agora, já que temos nossas aulas e adicionamos aos nossos, aos membros da nossa equipe, podemos, por exemplo, mudar tudo de uma só vez. Podemos alterar esse tamanho do texto. Digamos que eu quero fazer 18. E talvez eu queira mudar o espaçamento ocioso, essa margem para ser tão grande, por exemplo. Ou talvez eu gostaria de fazer este tamanho de fonte maior. Quero fazer com que seja 32 ou algo assim. E talvez eu queira adicionar um pouco de espaçamento no fundo. Você sabe, nós temos as aulas. Então agora podemos fazer, fazer tudo funcionar muito, muito mais suave. Podemos tornar o nosso processo e muito, muito mais suave. Então eu vou salvá-lo. Eu vou passar muito tempo e nenhuma mudança na forma como esses caras trabalham. Então nós temos nosso controle deslizante e que eu esqueci de definir para auto-play, eu acredito. Então eu vou para configuração automática, vou salvar esse cara. E eu vou atualizar minha página. E agora o nosso controle deslizante está funcionando como pretendido. Sim, então lá vamos nós. Nós temos o nosso, eu acho que parece muito, muito agradável e nosso, nosso controle deslizante. Então acho que agora podemos passar para nossa próxima seção. 104. 13.24Comece a notícia: Nos próximos vídeos, vamos criar nossa seção de depoimentos. E para isso, vamos usar novamente o controle deslizante, mas desta vez vamos preenchê-lo com o módulo de testemunho. Então, como de costume, eu vou apenas criar uma nova seção. Deixe-me ver a minha estrutura. E nós vamos adicionar uma seção. Este é esse cara bem aqui. E essa seção vai ter uma cor de fundo deste rosa pálido bem aqui. Então eu vou adicionar um controle deslizante. Lá vamos nós. E como sempre, acho que vou me livrar desses dois slides. Vou usar este aqui. E, claro, poderíamos fazer algumas opções de configuração e com o nosso controle deslizante. Então, dependendo do que você quer fazer sobre isso. E nós podemos, você pode ter a animação definida para velocidade de desvanecimento horizontal, todas essas coisas. Agora o que eu vou fazer é eu vou adicionar mudar essa cor para este aqui. Acho que vou remover o movimento em torno de slides mentais. Acho que vou esticar todos os slides para a mesma altura. E, claro, mais tarde, eu acho que vou usar a opção de reprodução automática e o infinito, mas por agora eu não vou usar o hub porque, você sabe, eu só, eu não quero que nossos slides pulem para frente e para trás. Biólogos, eu sei. Eu quero, eu quero manter as coisas simples por enquanto. Então nós, então, o nosso slide. Vou adicionar um depoimento. Testemunho. Lá vamos nós. E nós temos alguns obter alguns elementos de depoimento pré-projetados aqui dentro. Recebemos o texto, temos o nome, e temos a, oh, acho que a empresa para a qual essa pessoa trabalha. Então o que vou fazer é primeiro adicionar uma imagem ao meu depoimento. E acho que vou usar as mesmas imagens que fizemos antes. Então, eu só vou selecionar um. E novamente, eu vou ter que salvá-lo e atualizar a página para que você possa ver essa imagem realmente sendo adicionada ao meu, ao meu testemunho. E eu vou descer, descer, até aqui, para que tenhamos a nossa imagem. Mas é claro que podemos mudar algumas coisas sobre isso. Primeira lente, podemos pegar o layout. Eu quero torná-lo vertical apenas AGORA, assim como está em nosso, em nossa referência de design. E então eu quero alinhar o conteúdo ao centro, o mesmo para a versão móvel, móvel. Então, apesar de tudo, acho que podemos encerrar o dia. Mas, você sabe, há apenas mais algumas coisas que eu gostaria de fazer. Então, primeiro de tudo, quando vamos para o nosso painel de imagens, podemos definir, é claro, o tamanho da imagem, mas acima de tudo podemos definir a posição da imagem. Podemos fazê-lo antes do conteúdo, ou podemos fazê-lo depois. Então eu vou conseguir depois. E eu acho que vou diminuir o tamanho da imagem para algo como talvez 66. Isto deve ser, isto deve estar tudo bem. E quando vamos para a nossa topografia e, em seguida, texto, podemos mudar isso primeiro que este grande taxou muito bem outra coisa no nosso caso, você pode ver que nós temos assim, eu acho que é simplesmente um diferente, como uma fonte serif. Então o que vou fazer é mudar essa fonte para algo, algo, algo serif. Vou com a Laura. Esta é apenas uma boa fonte serif do Google. Esse cara bem aqui. E eu acho que eu vou, eu vou para inclinado assim e talvez torná-lo apenas um pouco menor para algo como talvez 18. E eu vou aumentar o peso da fonte para algo como 600 distribuídos certo? Agora, se olharmos para a nossa referência de design, também podemos mudar esses bits aqui. Então o que eu vou fazer é voltar para a minha tipografia, vou para a seção de Autor. E acho que vou fazer esse cara um pouco menor, mas vou aumentar o peso da fonte. Talvez até mais do que isso para algo como 700. E talvez eu vá pegar essa, essa etiqueta principal. Vou mudar a fonte para algo como 500. E mais uma vez, vou ao Autor. E talvez eu vá fazer em maiúsculas e torná-lo um pouco menor. Lá vamos nós. E é claro que também podemos mudar as informações do autor. E então esta parte aqui, mas eu acho que eles olham, eles parecem bem. Então acho que poderíamos pegar emprestado algum texto daqui e colá-lo. Aqui. Lá vamos nós. E, claro, poderíamos talvez mudar um pouco esse texto. Eu acho que talvez essas topografias ainda muito grandes, como 18 pontos é um pouco demais. Vamos, tipo, 16 pontos. E, basicamente, estamos feitos com este controle deslizante, vai este slide aqui mesmo. Mas é claro que ainda precisamos duplicar e mudar algumas coisas sobre isso. Quero dizer, nós gostaríamos de ter mais alguns depoimentos em nosso site. Mas quando damos uma olhada no original, você pode ver que ainda temos assim, algumas aspas, eu acho, bem aqui antes de cada, cada pedaço de texto aqui. Então, como poderíamos conseguir isso? Bem, na verdade é bastante simples aqui dentro de oxigênio e nós só precisaremos adicionar um estado como um CSS ao nosso slide. E pode parecer um pouco difícil, mas realmente não é. Vamos começar a fazer isso no próximo vídeo. 105. 13.25Adicione o estado precedente: Então já sabemos como trabalhar com o estado de pairamento, mas também aqui dentro, dentro de oxigênio e em CSS você também pode usar o estado antes e depois. Então, se escolhermos o estado anterior, você pode ver que a primeira coisa que podemos entrar aqui é a área de Conteúdo. Bem, podemos inserir algum conteúdo porque os estados após e pairar normalmente permitem que você adicione alguma coisa, alguns, como alguns elementos de design ou algum conteúdo antes ou depois de um elemento específico. Então, no nosso caso, o que gostaríamos de fazer é adicionar o simples como uma opção de aspas. Bem, como o símbolo dele, símbolo de aspas. Então o que eu vou fazer é quando eu estiver neste depoimento, eu vou para o estado antes. E nesse conteúdo, se eu digitar algo como eu não sei antes, você pode ver que isso está sendo exibido antes do meu testemunho. Mas eu não quero apenas digitar antes. Eu só vou talvez adicionar como esta aspas como essa. E agora vou para topografia avançada e podemos mudar o tamanho da fonte. Vamos sentar como 46. Você pode ver que está realmente mudando bem aqui. E podemos, podemos, se quisermos, podemos mudar esse texto. Nada que a família de fontes diga como nosso texto carmesim display. Poderíamos mudar o peso da fonte, algo como 600 de maio. E também podemos voltar atrás. Podemos mudar a altura da linha para dizer um. Podemos mudar o espaçamento das letras se quiser, mas não funcionaria, não funcionaria aqui. Mas acima de tudo o que eu quero fazer é ir para o tamanho do espaço nele. E aqui mesmo na opção de margem, se nós, naturalmente, digitar como 25, você pode ver que tudo está se espalhando. Mas se fizermos como negativo 25, você pode ver que nossa margem é reduzida e nosso texto está mais próximo do nosso, de nossas aspas. Mas eu acho que eu vou ir com talvez menos cinco ou talvez até mesmo um 0 para esse assunto no GIP parece bem. E talvez eu só vou aumentar a topografia para algo como pode ser 56. Isto deve ser, isto deve estar tudo bem. Então, como você pode ver, adicionar elementos ao seu Antes, antes e depois realmente estados é realmente muito, muito fácil e podemos adicioná-lo aos nossos depoimentos, qualquer que seja o módulo de depoimento. Então agora, como eu mencionei antes, deixe-me apenas salvá-lo rapidamente. Como eu mencionei antes, tudo o que realmente precisamos fazer é apenas duplicar nossos slides. Deixe-me fazer uns dois. E então tudo o que temos que fazer é mudar os nomes, o texto e as imagens. Mas vamos começar a fazer isso a seguir. 106. 13.26Termine os depoimentos: Então, primeiro vou passar para o meu segundo testemunho. E aqui, é claro, vou mudar esta imagem para talvez esta aqui. E esse pessoal, eu vou ser chamado de Jane Doe vai se chamar Jim, faça isso. E eu vou pegar talvez esse texto daqui e colá-lo dentro e salvar esse cara. E depois vou a este depoimento. E novamente, mudar essa imagem, talvez para esta imagem. Vou fazer o upload disso. E isso vai ser como, deve conhecer Mary, Mary Johnson. Lá vamos nós. Talvez ela não trabalhe para soluções Web Jarvis, mas para exteriores sem soluções de super limpeza ou algo assim. Soluções de super colina. Lá vamos nós. Apenas conserte isso. E eu vou salvar isso. E vamos agora dar uma olhada no nosso, na nossa página. Então eu vou copiar isto e colar aquilo no meu modo de navegação anónima. Eu vou descer todo o caminho até aqui. E como você pode ver, nosso controle deslizante está funcionando, está funcionando corretamente. Claro, se quiséssemos, poderíamos pegar meu controle deslizante agora. E eu quero que essas animações sejam mais rápidas. Então eu vou fazer como Arnold 350. E para a configuração, vou adicionar a reprodução automática, vou guardar isso. E agora deixe-me atualizar a página. E como você pode ver, tudo está funcionando bem. Tudo está funcionando corretamente. Então eu acho que a última coisa a fazer aqui seria apenas verificar a capacidade de resposta. Vou para a página do contêiner 1120, mas antes disso, vou afligir a reprodução automática. Então eu vou para o contêiner de página 1120. Parece tudo bem. 992. Parece bem. 768. Eu ainda vou olhar à direita. E 80. Isso ainda, isso ainda parece bem. Mas como você pode ver, esses divs não estão tomando todo o espaço disponível. Então vamos pegar minha equipe um div bem aqui. E eu vou me certificar de que eu estou no BID vai. Nós adicionamos o tamanho ao nosso ID e eu só vou fazer a largura 100%. Lá vamos nós. Eu vou fazer o mesmo para esta equipa para div. E 100%. Lá vamos nós. E para este, este é, eu acho que este é o time três. Novamente, o mesmo, um 100 por cento. A consideração agora parece muito melhor e temos que fazer o mesmo para o nosso, para o Will estes slides. Então primeiro eu vou grep o cara do lodo deslizante, este cara aqui e não vai, todos esses elementos podem ser empilhados verticalmente. Vou me certificar de que eles estão centrados. E novamente, T1 para bloquear 100 por cento. Esse cara, o segundo com 100 por cento. E o último, e o último. Vamos para com 100 por cento. Lá vamos nós. E acho que talvez quando formos para 480, agora, eu acho que ainda está tudo bem. Então lá vamos nós. Nós criamos nossos depoimentos. Corrigimos alguns problemas de capacidade de resposta. E como você pode ver aqui, em termos de nossos depoimentos, talvez essas flechas não pareçam muito boas. Então acho que talvez possamos nos livrar deles. Para que pudéssemos nos livrar dessas flechas. Nós temos, nós temos o ponto. Então, se alguém realmente quer saber, navegar através de nossos depoimentos, eles podem sempre clicar nessas, todas essas balas. Então eu acho que foi este controle deslizante. Então, eu vou para o estilo. Deixe-me apenas ir para a configuração. Não quero mostrar as flechas. Então, agora, quando vamos para menos de 768, não há flechas e ele apenas, apenas, parece mais limpo. E se nós configurá-lo para reprodução automática, ele vai para reprodução automática. Então acho que estamos bem. Estamos prontos para ir. Por isso, vou guardá-lo. E nossa próxima ordem de negócios seria adicionar algo como um, algo como um blog rápido, real como podemos adicionar, nós apenas dar uma olhada no original. Poderíamos adicionar como esta última parte das notícias aqui. Mas vamos começar a fazer isso no próximo vídeo. 107. 13.27A seção de posts: Nos próximos vídeos, vamos criar esta seção de postagem do blog. E vamos primeiro pedir emprestado estes impostos e depois vamos entrar em adicionar. Apenas três sortudos. Blog post será basicamente, basicamente blogposts para trechos. Então, como você pode ver, eu apenas adicionei rapidamente alguns gabaritos, apenas para, não aborrecê-lo com o mesmo processo novamente. Então eu vou para minhas páginas e eu vou editar minha primeira página com oxigênio. E como de costume, vou começar com a criação outra seção que irá para baixo aqui. Então primeiro vou pegar emprestado este texto, este texto da nossa equipe. Vou duplicá-lo e colocá-lo aqui na minha seção. E então eu vou duplicar este título. E eu vou colocá-lo aqui em baixo. Então é claro que ele precisa ir abaixo deste, este texto porque agora você pode ver que nós temos esta nossa equipe e conhecer nossos advogados pedaços de texto. E então eu vou ser apenas, vamos digitar notícias. E eu vou digitar como no nosso blog. E um filho enquanto eu estiver aqui, eu só vou ter certeza que este pedaço de táxi vai para o centro. Está tudo bem. Eu vou para a seção e eu vou para o centro e escrever assim. Então o que eu vou fazer agora é eu vou adicionar minhas postagens. Então eu vou apenas adicionar o nosso módulo de postagens fáceis. E lá vamos nós, temos isso bem aqui. Então, se olharmos para nossa referência de design, o que temos que fazer é adicionar primeiro a imagem em destaque, depois alguns metadados como a data, as categorias, depois o título, e depois um trecho. Então, primeiro, dentro do meu módulo de pose fácil, eu posso escolher como este primeiro presente padrão de imagem crit. E eu vou para Query, e então eu vou para o costume. E aqui quero mudar a conta. Eu vou com três, porque eu acredito que nós tivemos três postagens. E eu vou apenas salvá-lo. E então eu vou aplicar os parâmetros de consulta. E como você pode ver, temos nosso post sendo exibido. Mas é claro que há apenas alguns problemas. Então, primeiro de tudo, eu só vou talvez aumentar esse espaçamento aqui mesmo. O que queremos fazer é que definitivamente não queremos ter que contar esses trechos maiores e maiores. Então o que temos que fazer é mudar isso, e então temos que mudar a data. É suposto estar aqui por cima do nosso título. E então temos que adicioná-los categorias e talvez se livrar do botão ler mais. Então vamos começar a fazer tudo isso a seguir. Primeiro, o que vou fazer é ir à Administração e vou limpar os meus posts. Então o que eu vou fazer é eu vou apenas, você sabe, consertar esses trechos. Não quero que esses atos sejam trechos tão longos. Então eu vou apenas corrigir isso rapidamente e então nós podemos realmente passar para styling e nossas postagens de blog. 108. 13.28Styling das postagens: Certo, então agora vamos começar a estilizar nossas postagens no blog. Então, primeiro de tudo, eu vou pegar meu módulo de gabarito fácil. E eu vou consultar a contagem personalizada. E quero mostrar três postagens. Então eu vou aplicar Parâmetros de Consulta. E temos os nossos postos bem aqui. Então, neste ponto, poderíamos começar a mudar algumas coisas sobre nosso, sobre nossos posts no blog. Mas, você sabe, há algumas coisas que nós vamos, nós seremos capazes de fazer apenas a partir do nosso e eu sou este ferramentas pagamentos rubrica Espanha. Mas infelizmente, para recriar esse tipo de design, definitivamente teremos que cavar algum código, mas não será difícil, não será nada assustador. Então você deve ter um URL assustado. Então, antes disso, deixe-me adicionar um pouco de espaçamento aqui. E a primeira coisa que quero fazer é talvez mudar a cor dos nossos títulos. Então eu vou para o meu, é claro, para os posts fáceis para Styles título. E vamos mudar a cor. Vamos tentar esta pode ser esta cor mais escura, bem, quase preta. E talvez eu só vou salvar o meu modelo. Então eu vou salvar isso como minhas postagens predefinidas, e eu vou salvá-lo. Então, se olharmos para o original, há algumas coisas que precisamos fazer. Primeiro, não temos a data aqui no topo, como temos no nosso caso. Temos a data e as categorias aqui. Não temos o botão de ler mais. E temos um trecho bem aqui. E, claro, as categorias são um pouco estilizadas. Então vamos começar por nos livrarmos deste estado aqui. E vamos colocá-lo após a análise do título. Vamos, ao mesmo tempo, uma vez que se livrar deste administrador e nenhum comentário foram links. Então o que eu vou fazer é ir para templates, e eu preciso ir para templates, PHP. Então, quando damos uma olhada em nossa estrutura aqui, podemos ver que temos isso primeiro. Bem, a primeira é a imagem, mas então nós temos essa div, OK, suposta imagem data sobreposta, e então nós temos essa função de data bem aqui. Então tudo o que temos que fazer é pegar esse cara. Vou cortá-la. E então eu vou descer aqui onde podemos ver o nosso autor do post matéria, post meta item. E então nós temos que postar meta comentários, ou estes são todos, bem, estes dois, estes dois links. Então, basicamente, o que eu vou fazer é eu vou me livrar de todos esses elementos e eu vou apenas colar essa função de data bem aqui. E quando aplicamos o código, podemos ver que o nosso encontro salta para aqui, salta para a direita, para o lugar certo. E neste momento não precisamos deste div aqui. Vamos manter o código um pouco mais limpo. Vou me livrar disso. E ao mesmo tempo, aqui embaixo, podemos ver este oxo ler mais. E não temos um botão Read More aqui, então podemos nos livrar dele. Então eu vou apenas selecioná-lo. E então deixe-me selecioná-lo. E eu só vou remover esse cara, aplicar o código. Então pegamos o título e temos a, bem, a data. Então agora temos que adicionar as categorias aqui, bem aqui. Mas antes de fazermos isso, vou salvar tudo. Então, certo, 90, tudo o que realmente precisamos é que precisamos das categorias além disso aqui. Então, para fazer isso, eu só vou pegar emprestado este pedaço de conteúdo, este PHP d x doer. Vou copiá-lo e vou colá-lo ao lado da minha data. E, claro, se aplicarmos o código, teremos um trecho ao lado da nossa data bem aqui. Então tudo o que precisamos fazer é mudar este pedaço de texto, o trecho para não pode ir, ir. Claro que isso não é um oxigênio, então é uma coisa WordPress. E se aplicarmos o código, temos nossas categorias sendo exibidas junto com os links. Mas é claro que eles não são decorados da maneira que gostaríamos que eles fossem estilizados. E isso é, você sabe, essa é a coisa que nós somos, estamos prestes a mudar. Mas você precisa lembrar que há como classes gerais de guerra WordPress que são responsáveis por fazer essas classes olhar o jeito que eles olham, olhar o jeito que eles olham. Então não é dependente de oxigênio. Então, receio que sejamos apenas um pouco de código, a fim de fazer este olhar. O que fará com que nossas categorias pareçam no original. Mas eu acho que será um grande exercício para nós e transmitir. As regras que vamos escrever vão ser muito, muito simples. Então sim, isso é talvez parar de falar. E vamos realmente entrar no estilo em erro. E as nossas categorias. 109. 13.29Styling as categorias: Então, como eu disse no vídeo anterior, existem certas classes ou uma classe que são responsáveis por estilizar as categorias sobre essas são as classes WordPress e classes de oxigênio. E se inspecionarmos esta tampa aqui, você pode ver que temos essa lista de categorias de postagem não ordenadas. E dentro dessa classe temos itens da lista. E dentro daqueles que temos, temos links. E vamos usar todos esses três elementos para fazer nossas categorias parecerem como deveriam. Mas vamos começar com categorias de postagem. Então o que eu vou fazer é eu vou voltar para os meus modelos, para o meu modelo CSS. E aqui em baixo, eu só vou digitar em categorias de postagem de período. Lá vamos nós. E, em seguida, apenas abrindo e fechando o suporte. Então o que queremos é que essas categorias fiquem ao lado das outras. Queremos que eles estejam em linha. Então eu vou começar com o tipo que em display flex. Então esta é uma das regras que normalmente estabelecemos quando queremos manipular nossas seções ou desenvolvedores. E então eu vou dizer direção flex, rho, vai aplicar o código. E como podem ver, nossos elementos estão sendo bem empilhados sob óleo um ao lado do outro. Então, eu também gostaria de me livrar desses pontos de bala. Então eu vou para o meu, Vamos postar categorias. Bem, regra e eu vou digitar no estilo da lista. Quero configurá-lo como Nenhum. E então, quando aplicamos o código, você pode ver que esses marcadores desapareceram. Então agora o que eu quero fazer é estilizar as peças individuais da ONG como essas categorias individuais. Então eu vou colar isso, e desta vez eu vou bater, bem, eu vou digitar LI, que é um item da lista. E eu vou abrir e fechar o suporte. E o que queremos fazer, acho que queremos adicionar um pouco de estofamento. Então eu vou digitar o preenchimento. Vamos ver como talvez eu não sei, dez pixels. E vamos aplicar o código. Lá vamos nós. Em seguida, empresta a talvez como uma cor de fundo, cor de fundo. E acho que seria uma boa ideia emprestar nossas cores de nossas cores globais. Vamos fazer este. E eu só vou colar isso. E lá vamos nós. E eu também vou definir margem, margem, certo? Para talvez, não sei, uns cinco pixels. E então eu vou aplicar o código. Então nós também poderíamos fazer como transformar texto e tornar nosso texto maiúsculo. E vamos aplicar o código. Então vamos. E é claro, como você pode ver, que o texto aqui dentro de nossas categorias, não parece muito bom. Quero dizer, a cor não está certa. E mesmo se apenas escrevermos caneta como a cor do Arnold, branco. E, em seguida, aplicando o código, você pode ver que nada está mudando. E isso é porque ainda temos isso. Quando vamos para o nosso modo de navegação anônima, você pode ver que nós também temos um link aqui. Então, temos um link dentro do item da lista dentro de uma lista não ordenada. Então eu vou chamar p as categorias dispersas, bem postar e um item de lista. E então eu vou apenas adicionar um link âncora bem aqui. E então acho que podemos copiar ou colar esses caras. Deixe-me fechar este suporte. E então você pode simplesmente abrir e fechar o colchete, colar esse valor N e, em seguida, apenas aplicar o código. E como você pode ver, nossa, bem, ela muda, nossa, nossas categorias mudam. Mas eu acho que eles devem ser colocados como um ao lado do outro além do outubro, a data, e então esses caras aqui também. Então, para fazer isso, nós vamos ter que ir para o nosso oxy post meta e governar. Porque quando formos, deixe-me salvá-la. Quando vamos para o nosso template PHP, você pode ver que temos esta classe div OK, supostamente mentor. E dentro disso temos essa data e nossa categoria. Então esta é na verdade uma classe de oxigênio. Então, quando vamos para o nosso boi para mete, este é esse cara aqui. Nós já temos eles já este display flex e flex direção definido para uma linha. Mas vamos apenas digitar um centro de itens de linha e, em seguida, vamos aplicar o código. Como você pode ver, agora, eles estão parecendo muito, muito melhor. Eu acho que nós também pode ser apenas tipo de texto para texto transformar em maiúsculas porque eu acho que no nosso sim, esses caras, como você pode ver, eles estão definidos para, bem, eles são todos maiúsculas. Então é isso que vou fazer. Acho que podemos até emprestar esse valor de transformação de texto desse cara. Então eu vou apenas colar isso e aplicar o código. E basicamente nossas categorias são criadas e apenas vai aplicar e salvar. E então eu vou para a minha página principal e eu vou atualizar a página. E como podem ver, temos nossas categorias aqui bem exibidas. Talvez nos livremos deles. Acho que há muito Perrin aqui. Para as nossas categorias. Acho que podemos torná-los um pouco menores. Se dermos uma olhada no nosso original, você pode ver que é muito, muito menor. Não há muito estofamento em cima e muito mais para os lados. E o tamanho da fonte também é menor. Então, talvez primeiro vamos pegar esse tamanho de fonte aqui. E vamos tentar. Vamos tentar talvez algo como, sei lá, 12 pixels. Vamos ver o que ele faz. Pode parecer melhor. Temos o tamanho da fonte fixo, mas vamos cuidar da purina. Eu. É muito, muito Perrin aqui. Então o que poderíamos fazer é talvez adicionar mais estofamento nas laterais e menos apostar no topo. Então, com essas regras, você pode, bem, nós regras CSS, você pode seguir uma regra, pelo menos em termos de preenchimento e margem. Podemos, dentro de uma regra, uma linha de código, podemos adicionar vários valores. Então, se agora temos apenas dez e pixels, e se deixarmos dez pixels, isso significa que temos 1010 pixels de preenchimento e tudo ao redor. Mas se gostarmos, adicione, digamos 20 pixels e, em seguida, basta aplicar o código. Como você pode ver, primeiro ele está adicionando o preenchimento superior e inferior, e então ele está adicionando o preenchimento esquerdo e direito. E se formos como cinco pixels e 50 pixels, agora mesmo, ele vai adicionar valores diferentes para cima, direita, inferior e esquerda. Então está indo no sentido horário, superior, direita, inferior, esquerda. Mas é claro, eu não quero fazer isso. Eu só quero adicionar uma parte superior e inferior. Então deixe-me mover isso. Então, superior e inferior vai ser como cinco pixels e esquerda e direita vai ser como dez pixels. Então vamos ver como isso se parece. Acho que parece, parece muito melhor. Então eu acho que a última coisa a fazer aqui seria apenas se livrar desse espaço entre nossas categorias e a data. Então vamos para o nosso, Vamos para o nosso código. E eu só vou encontrar minhas categorias de postagem. Este é este tipo aqui, esta linha. E eu só vou digitar o preenchimento, preenchimento à esquerda. E vamos ver uns dez pixels. E eu vou aplicar o código. Acho que dez pixels deve estar bem. Vamos ver o original. Acho que isto é algo como dez pixels. Então nós temos o nós temos as categorias fixas, nós temos eles, nós temos a data. Eu não acho que ele será criar como uma única porta para uma única página de postagem. Já fizemos isso antes. Então eu só não quero aborrecê-lo com criminal simplesmente adicionando dados dinâmicos ao seu modelo. O que vamos fazer, no entanto, é adicionar este trabalho. Acho que vamos pular essa seção porque já temos algo assim. Então nós vamos passar para esta, bem, esta seção basicamente formulário de contato. Então vamos passar para isso agora. 110. 13.30Comece a adicionar o rodapé: Então vamos começar a adicionar em nosso rodapé. E como de costume, vou começar adicionando uma seção. E vai ter a nossa cor de fundo azul escuro. E dentro dessa seção, vou adicionar colunas. E eu vou adicionar a divisão 50-50 bem aqui. Então, na coluna à esquerda vamos ter nosso texto e algumas informações de contato. E à direita vamos construir como um formulário de contato falso. Então, na primeira div, esta div à esquerda, eu vou começar com a adição de apenas alguns elementos de texto. E eu acho que nós poderíamos adicionar apenas três elementos de texto porque nós vamos ter, deixe-me apenas ir para o nosso design. Vamos ter este Fale Conosco. E então vamos ter essa avaliação gratuita do caso. E então nós vamos ter este pedaço de texto bem aqui. E, claro, você deve ter notado que vamos usar, vamos fazer algo um pouco diferente. Decidimos pular essa seção porque já fizemos algo assim antes. Então vamos fazer como um grande rodapé negrito com nossas informações de contato e essas colunas. Então certo, bem aqui, porque queremos separar nossas postagens de blog e o de nosso rodapé. Então eu vou voltar e dentro do oxigênio, eu vou digitar testamento neste módulo de texto, eu vou digitar o contato e eu vou fazê-lo, vamos chegar até aqui. Vamos, vamos fazer isso. A nossa cor branca. E talvez vamos mudar o tamanho da fonte para algo como dez. Em. Então vamos para a tipografia. Vamos sublinhar isso. Vamos fazer uma maiúscula. Eu gostaria de agora, apenas para imitar este design, o tamanho bem aqui. E vamos ver se fazemos uns 600. Acho que podemos fazer com que seja maior, acho que 12 seria bom. Talvez setecentos, setecentos, setecentos será melhor. Então temos esse contato bem aqui. Agora eu vou apenas duplicar. E eu vou mudar a família das fontes. Vou usar o nosso texto carmesim. Vou aumentar o tamanho da fonte para algo como 56. Claro que sim. Deixe-me descer aqui. E vamos mudar. Não vamos ter como este sublinhado acontecendo aqui. E vamos ouvir para capitalizar. E acho que esse peso de fonte é um pouco grande demais. Vamos com uns 600. E vamos digitar. Vejamos, avaliação gratuita do caso. Então, como a avaliação livre do caso E, lá vamos nós. E, claro, a última parte aqui seria adicionar este, este pedaço de texto aqui. Então, novamente, eu só vou adicionar um pouco de texto. Esse cara aqui, e talvez eu pegue emprestado algum Lorem Ipsum ao Saddam. Vou pegar um pouco de Lorem Ipsum. Então deixe-me olhar para a frente algum gerador Lorem Ipsum. Vamos agarrar talvez esta parte. Lá vamos nós. E eu vou colar esse M. É claro que precisa ter uma cor adequada. E talvez vamos mudar o tamanho da fonte para algo como 14, porque isso deve ficar bem. Então isso é tudo bonito, muito simples. A parte mais desafiadora seria adicionar esta parte aqui. Mas eu não acho que vai ser muito difícil para nós, certo? Tudo o que realmente precisamos fazer é adicionar uma div dentro dessa div, esta coluna esquerda div. Então eu estou indo apenas para digitar em div e adicionado aqui. E por dentro, vou ter um ícone. Lá vamos nós. E vamos mudar os ícones coloridos para talvez esta cor vermelha. Vamos mudar o ícone em si. Vamos digitar Maurer. Ocorrem. Lá vamos nós. E vamos torná-lo menor. Algo como 36 deveria ser. Tudo bem. E dentro, dentro desta div com este ícone, temos que adicionar, vamos adicionar algum texto. E vamos digitar, eu acho que foi endereço. Agora era escritório. Está bem. Então escritório. Lá vamos nós. E vamos mudar a cor para a cor branca. E vamos mudar o tamanho da fonte para 12 talvez. E vamos falar com o Luke. Vamos mudar o peso. 2s como 600. Vamos para topografia avançada. maiúsculas. E está sublinhado? Não, não está sublinhado. Então, obviamente, gostaríamos disso, mas talvez vamos adicionar o espaçamento entre letras. Isto deve ficar bonito. E também vamos adicionar e enquanto o endereço real. Então, novamente, eu vou adicionar algum texto. Lá vamos nós. Novamente, mude a cor, mude o peso da fonte para algo como talvez 700. E acredito que foi na Park Avenue 40. Vamos Brooklyn. E por quê? E vamos aumentar o tamanho da fonte para algo como talvez 32. Isto deve ser, isto deve ser bom. Então, é claro, agora o que temos que fazer é fazer com que esses elementos sejam empilhados como um ao lado do outro, não assim. Então, dentro desta div I1, esses elementos devem ser dispostos horizontalmente, exceto para esses dois pedaços de texto. Então eu vou embrulhar esse cara com uma div e colocar esse texto dentro, assim def. Então temos dois pedaços de texto. E lá vamos nós. Basicamente consertamos esses caras. Mas é claro que talvez pudéssemos fazer esse cara menor, diz algo como 28 talvez. E acho que a última parte aqui seria talvez adicionar algum espaçamento. Então você pode pegar nosso ícone, ir para avançado, e pode estar em como cinco pixels de margem. E se você quiser, você pode uma concessão esta div abrangendo. E você pode dizer que você deseja alinhar verticalmente os itens para a linha do meio que. E por último, vamos talvez adicionar uma margem como essa. E lá vamos nós. Em apenas alguns passos simples, nós adicionamos. Agora esta, esta peça aqui, vou apenas clonar esta div. E eu vou apenas clicar neste componente duplicado uma vez e depois duas vezes. E se olharmos para o original, podemos ver que recebemos este telefone e, em seguida, e-mail. Então eu vou mudar esse ícone. Vou começar a procurar o telefone. Este será esse cara bem aqui. E, claro, tudo o que precisamos fazer é apenas mudar o texto e, em seguida, apenas adicionar um número de telefone aleatório como esse. E o último ícone seria o nosso ícone de e-mail. Vamos ver o e-mail. Não, vamos ver o envelope. Funciona com um envelope. Então vamos digitar um e-mail e vamos digitar o endereço de e-mail. Então entre em contato e lawyers.com. Lá vamos nós. Então agora tudo o que precisamos é adicionar este Google Google Map. E vamos realmente tentar isso. Este endereço, 40 Park Avenue, Brooklyn. Vamos ver se é um endereço real. E, claro, o anúncio que o Google mapeia, precisamos encontrar um módulo de mapa bem aqui. Então nós temos este módulo do Google Maps. Então vamos digitar 40 Park Avenue. Foi no Brooklyn, creio eu. Oh, sim. Acho que é um endereço real. Então lá vamos nós. E é claro que ainda podemos enfeitar as coisas um pouco. Podemos mudar a aparência do nosso mapa. Então vamos adicionar uma margem aqui em cima. Agora vamos nos certificar de que o definimos para largura total. Lá vamos nós. E vamos mudar a altura para algo como, eu não sei, para 150 pixels pode ser ou talvez 350 pixels. Eu acho que isso deve ficar bem. E dentro do nosso, dentro do nosso módulo, você pode ver que temos essas opções de zoom para que você possa diminuir o zoom. Podemos ampliar apenas para alterar a aparência do nosso mapa. Eu acho que isso deve ser, isso deve estar tudo bem. Então a última coisa a fazer aqui seria adicionar um formulário de contato. Então deixe-me diminuir um pouco. Então este formulário de contato bem aqui, mas eu não vou adicionar um formulário de contato real aqui. Eu só não quero ter nenhum spam vindo deste lado. Acabei de ver que já adicionamos um formulário de contato antes quando estávamos aprendendo. Estamos aprendendo a usar um formulário de contato aqui dentro de um oxigênio. Então deixe-me adicionar rapidamente algumas, algumas divs simples dentro desta div. Então eu só vou fazer como um div e eu vou fazer 100%. Vou fazer a cor de fundo e ser a Torre rosa. E também vou fazer uns 50 pixels de altura. E eu sei que você pode ver muito aqui, muito, muito de uma mudança em termos de altura. Mas acredite em mim, está acontecendo. É só um palpite. É apenas a renderização fina aqui dentro do oxigênio. Se nós apenas atualizarmos essa página, você pode ver que nós temos nosso , bem, digamos que este é o nosso campo de nome. Talvez você possa realmente torná-lo um pouco maior. Então eu vou com uns 75. E eu também vou adicionar como um pedaço de texto. E isso não vai estar dentro daquele div. Ou podemos fazer, talvez fazê-lo sentar dentro do div y nada. Deixe-nos digitar algo como o seu nome. Lá vamos nós. E eu vou fazer este div, alinhamento horizontal para o centro. Ou talvez vamos com a esquerda, mas vamos realmente adicionar algum espaçamento dentro. Vou adicionar uns dez pixels de preenchimento ao redor. E então eu vou apenas baixar essa altura para algo como 50. Vou guardar isso. E vamos ver como fica na frente. Deixe-me descer. Então este será o nosso campo de nome. Talvez vamos realmente fazer o máximo. Vamos torná-lo um pouco maior, algo como 16. E então tudo o que realmente teríamos que fazer é apenas talvez apenas clonar esse cara. Então, digamos que este seria o nosso e-mail. Vamos fazer o seu e-mail. Lá vamos nós. E vamos talvez adicionar algum espaçamento. E 25, em seguida, empresta duplicado esse cara. Novamente. Vamos fazer isso assunto, eu acho. E então vamos duplicar esse cara de novo. E vamos chamar esta mensagem. E é claro que esse cara tem que ser muito maior. Então vamos para o Avançado. Vou para o tamanho e o espaçamento. E talvez eu vá fazer como por cento. E eu vou com uns 50% talvez. E quando formos para a nossa guia principal, quero alinhar este guia ao meio. Eu queria colocar assim. E a última coisa a fazer aqui seria apenas adicionar um simples botão de envio. Botão. Lá vamos nós. Este seria o nosso botão, e eu chamaria de submeter. Então vamos, vamos mudar a cor para o vermelho. Talvez mudemos a tipografia. Então eu vou para a tipografia. Quero fazer em maiúsculas. Talvez eu vá espaçar um pouco a carta. Torne o tamanho da fonte apenas maior, mas não tão grande. Vamos com 18. E eu também vou adicionar um pouco de espaço de margem para o topo. E acho que talvez pudéssemos fazer o botão esticar, estendendo-se da esquerda para a direita. Com esse botão selecionado, vou para o tamanho e o espaçamento. E vamos ver, 100%. Lá vamos nós. Vou guardá-lo. E talvez para o nosso estofamento eu vá com tipo, vamos ver como 15 em cima e 15 pixels em baixo. Vamos salvar aquele cara. Quando fores à nossa primeira página e atualizares isto, vais até aqui. E nós e nós temos o nosso NÃO um real Eu sei que não é um real um formulário de contato real, mas eu realmente não quero ter como não, qualquer spam vindo dos lados não vai ser, você sabe, adicionar um contato real para o meu, eu Só quero manter este lado à vida para você, para que possa experimentar. Então você pode ver na verdade. E você pode ver como, como foi, como foi construído. Quando vamos ao nosso original, podemos ver que basicamente temos o nosso, bem, este parceiro criado. Talvez pudéssemos fazê-los ir ao nosso encontro. E digamos que esse cara será um pouco maior. Então vamos fazer uns 60 ou talvez 55. Mas, claro, saberia que nos faria fazer mais limpezas aqui. Então eu acho que talvez seja uma coisa boa nós podemos apenas cagar esta topografia topográfica. E por isso não, e eu vou fazer como 1.1. E nós vamos. E então vamos apenas verificar a capacidade de resposta. Vamos ver se temos isso escrito, certo? Isto parece bem. Vamos em 1992, ainda parece bem. 768. Isso parece bem. E quatro AT que parece bem também. Então, sim, temos nosso contato. Bem, digamos que é um formulário de contato fictício criado. Temos esses caras aqui criados também. Então agora tudo o que temos que fazer é adicionar essas três, basicamente colunas, certo? Bem aqui. Então vamos começar a fazê-las a seguir. 111. Adicione elementos footers: Então eu vou pegar outra seção. Eu só vou adicionar uma seção. Esse cara aqui. E, claro, ele precisa ter um, ter uma cor de fundo adequada. Então, por que não damos uma olhada no original? Nós começamos basicamente esta seção é primeiro dividido em dois, bem em três colunas, mas também duas linhas. Então eu acho que talvez nós vamos finalmente, em última análise, em outra seção. Mas, por enquanto, vamos nos concentrar nessas três colunas aqui. Então o que eu vou fazer é eu vou adicionar colunas. Lá vamos nós. E eu vou com esse cara. E se dermos uma olhada no original, temos esses títulos Sobre Nós Contato e links rápidos. E então temos algumas informações lá dentro. Então vamos começar com nós. Então, em nossa primeira div, eu vou apenas adicionar um pedaço de texto. E eu vou digitar e amarrar. Como lá vamos nós. Vamos mudar a cor do texto. E acho que vou mudar isso, bem, essa família de fontes para nossa fonte de exibição. E eu vou mudar o peso da fonte para algo como 600 e aumentar o tamanho da fonte para, digamos, 22. Isto deve ficar bem. E não tenho certeza se os textos estavam centrados aqui. Sim, esse texto está centrado. Então eu vou pegar meu div e eu vou ter certeza de que tudo está bem alinhado com o centro. E então eu vou apenas adicionar outro pedaço de texto. Então esse cara aqui, e eu vou pegar esse texto emprestado e colar aqui dentro. E, claro, quando vamos para a tipografia, temos que fazê-lo, temos um alinhamento para o centro e mudar a cor. Lá vamos nós. Talvez vamos diminuir o tamanho da fonte para algo como 12. Talvez. Isso é, talvez, vamos fazer 13. E lá vamos nós. Então agora eu acho que nós poderíamos apenas duplicar esses, esses elementos. E se olharmos para o original, chegamos a esse contato e a essas informações. Então eu vou pegar meu rumo e vou duplicá-lo. E vou movê-lo para dentro desta div. E vou chamá-lo de “Acho que foi contato”. Então vamos fazer contato. E vamos nos certificar de que tudo está alinhado com o centro. Então eu vou pegar este parágrafo emprestado e movê-lo para cá. E este vai ser o nosso ponto forte. Vai ser o nosso endereço. Esse cara aqui. Então acho que vou deixar como nosso endereço assim. Ou talvez tudo bem, vamos fazer um endereço apropriado. Vai ser este 4040 Park Avenue, Brooklyn, Nova Iorque. Lá vamos nós. E então eu vou apenas pressionar Enter e eu vou fazer algo como telefone 180459845. E acredito que temos duas linhas de endereço. Oh, nós também temos um e-mail bem aqui. Então vamos fazer isso. Então é isso e por que então eu vou apenas digitar em Nova York algum código postal da sorte, eu acho. E então vamos fazer os EUA. Lá vamos nós. E também aqui embaixo, vou adicionar um contato no Lawyers.com. E deixe-me consertar os espaços aqui. E a última parte aqui seria apenas duplicar meu texto, bem, este título e ir para o lado. E eu acredito que foi, são ligações rápidas. Certo, então vamos chamá-lo assim. Então vamos fazer ligações rápidas. E então vamos pegar o div center tudo. E para os links rápidos, poderíamos adicionar apenas links de texto simples se você quisesse, se você quisesse torná-lo para 100 para torná-los diferentes do nosso menu. Então acho que talvez pudéssemos fazer isso. Mas vou embrulhá-los com um div. Então primeiro vou criar uma div. E dentro da div eu vou adicionar um link de texto. Esse cara aqui. E vamos mudar isso. Vamos ver o que temos no, no original chegar em casa sobre, Eu acho que este é apenas o nosso menu. Então eu vou com o primeiro em casa. Então, com o meu primeiro link selecionado, talvez eu vou adicionar uma aula. Vou chamar-lhe ligações de rodapé TM. Lá vamos nós. E vamos ver o que podemos mudar sobre isso. Talvez possamos mudar a cor do texto. Vamos mudar isso. Vamos mudar a fonte, tamanho da fonte para algo como talvez 13. E vamos para tipografia e lentes fazer maiúsculas. Lá vamos nós. E quando vamos para a nossa guia principal, você também pode definir a cor do mouse. Talvez façamos a nossa cor ereta. Por que não? Então, quando você pairar sobre, nós vamos ter esse efeito. Então, uma vez que esse cara é editado, talvez vamos realmente antes, antes de eu clonar isso, eu vou adicionar como um pouco de espaçamento e como cinco pixels. E então nós podemos realmente colônia este cara uma, duas, talvez três vezes. E eu vou mudar o texto para áreas de prática. Então áreas de prática do que temos torr agradável regula o blog. E então vamos fazer contato, golpe, tato. E, claro, dentro da minha div, eu vou ter certeza de que tudo também está centrado como nós temos no original. Mas estes, estes links não são, bem, eles não são para chatear em maiúsculas. Então talvez vamos mudar isso. Vou para a minha aula, Topografia Avançada e livrar-me da letra maiúscula. Mas talvez vamos capitalizá-los. Lá vamos nós. E voilá, temos nossas três guias bem aqui. Então a última coisa a fazer seria adicionar nossos ícones e algumas normais como esta informação de direitos autorais aqui em baixo. Mas uma vez que temos colunas criadas aqui, eu não quero usar essas colunas para adicionar esses elementos baixos. Então, dentro dessa seção, eu vou apenas ir em frente e escolher ícones sociais. E eu vou pegar essa seção e eu, é claro, eu quero alinhar tudo ao centro e a esses ícones. Então todos, em primeiro lugar, eles precisam ser menores, faltavam algo como 18. Vamos mudar o estilo do ícone. Vamos ver quadrado. Talvez vamos com o branco. E eu vou mudar a cor para talvez o meu tipo super claro, rosa pálido. Lá vamos nós. E vamos olhar para o original. Nós temos, temos um pouco de uma lacuna aqui. Então eu vou derrubar esses caras se eu puder pegá-los, talvez seja mais fácil adicionar alguma margem aos comprimidos, como 25%. Isso vai ser demais. Então, dez ou 66 deve ser suficiente. E talvez vamos pensar que esses lipídios são um pouco maiores, o original. Então vamos realmente fazer esses ícones um pouco maiores. Então vamos selecionar 20 ou até mesmo 22. E você sabe, eu realmente não gosto deste ícone do Facebook aqui. Então poderíamos nos livrar do ícone do Facebook, bem, o link do Facebook a partir daqui e apenas substituí-lo com o ícone do LinkedIn. Lá vamos nós. Parece um pouco melhor. Então temos os ícones sociais. Agora vamos adicionar as informações protegidas por direitos autorais na parte inferior. Então o que eu vou fazer é adicionar um ícone primeiro. E dentro do conjunto Font Awesome, nós temos uma informação de direitos autorais eigen, então eu vou começar a digitar a cópia. E esse é esse cara bem aqui. E vamos mudar o tamanho para algo como talvez 12. E, claro, vamos mudar a cor para o nosso rosa pálido. Lá vamos nós. Agora podemos adicionar algum texto e poderíamos digitar como, eu não sei, 2018 a 2020 lawyers.com. Eu realmente não consigo ver o que estou escrevendo e eu realmente preciso mudar a cor do texto. Lá vamos nós. Eu acredito que é eu acredito que parece bem. E vamos mudar esse tamanho para 12 também. Então, é claro, que o ícone de cópia para terminar as etapas precisa ser, precisa ir lado a lado. E isso é muito fácil. Temos que embrulhar esses caras com o div. Lá vamos nós. E, em seguida, apenas certifique-se de que nossos elementos filho estão sendo exibidos horizontalmente. Vamos alinhá-los ao meio. E se você quiser, você vai adicionar algum espaçamento à direita do ícone. E lá vamos nós. E talvez eu acho que nós poderíamos adicionar alguma margem aqui para nós poderíamos adicionar algum espaço aqui mesmo para torná-lo mais ou menos parecido com isso. E se souber, guarde-o. E vamos ver como é. Parece mais bonito, certo, ao meu gosto. Mas acho que talvez o que poderíamos fazer é talvez adicionar como um toque de separação entre os elementos de informação de contato e esta parte inferior do nosso rodapé. Então eu vou pegar minha seção e nós podemos apenas talvez pegar nossa cor e torná-la apenas um pouco mais escura, apenas assim. E então salve esse cara. Então vamos para o nosso site principal. E lá vamos nós, você pode ver que ele realmente parece muito, muito bem. Então lá vamos nós. Criámos a nossa página. 112. 13.32Sumário: Certo, então lá vamos nós. Criamos nossa página. Então, primeiro nós adicionamos o cabeçalho junto com o nosso cabeçalho menos pegajoso sobreposição. Adicionamos este controle deslizante de fundo. Então temos essa seção com o, alguns elementos de texto engraçados. Então nós temos essa seção agradável com algum efeito de solo fixo de paralaxe. Então criamos esses ícones com um botão. Lá vamos nós. Em seguida, adicionamos este texto em colunas. Lembre-se de como adicionamos a contagem de colunas, uma regra CSS. Então adicionamos nossos advogados, que na verdade dissemos ser um controle deslizante. E, claro, se você quiser olhá-los, se você quiser fazê-los jogar automaticamente, você só precisa definir o controle deslizante para reprodução automática. E então, claro, temos o controle deslizante com nossos depoimentos. Criamos o blog, e então adicionamos nosso rodapé com algumas informações de contato, Google map e esses links e essas colunas aqui. Então, como eu disse antes, este projeto vai ser, você sabe, ao vivo. Você pode vê-lo em qualquer lugar e quando quiser. Então lá vamos nós. Espero que tenha gostado e criado este design. Espero que tenha criado junto comigo. E espero que compreendam rapidamente a liberdade e o poder que o Construtor de oxigénio lhe dá. E que você vai construir, expandir seu portfólio de habilidades e que você será capaz de criar seus próprios sites e, claro, sites para seus clientes facilmente. Então, como sempre, tenha um bom design.