Tutorial do Bootstrap Studio Versão 6. 0 Aprenda o Bootstrap Studio

1. Introdução ao curso: Olá pessoal, Havaí, vocês Obrigado por aterrissarem neste curso em particular. Este curso é sobre Bootstrap Studio. estúdio Bootstrap é o quê? Bootstrap Studio é um aplicativo de desktop onde você pode criar um site. É um site estático e há um recurso onde você pode criar um site dinâmico também, mas isso é apenas para e-commerce, então vamos ver isso também. Portanto, o Bootstrap Studio é um aplicativo de desktop totalmente construído na estrutura Bootstrap. Neste curso, estamos em ver exatamente como usar o Bootstrap studio para projetar o site sem codificação. Essa é a palavra-chave. Sem codificação, um pouco de codificação está lá codificando sua perna, apenas chamando algo aqui e ali. Mas não é como programação hardcore ou codificação de código rígido. Você só precisa me seguir o que estou fazendo e depois está feito. Você poderá projetar tudo. Vou mostrar o que exatamente você vai projetar e o que você aprenderá neste curso. Neste curso, veremos tudo sobre os painéis no software, como o painel Studio, o painel online, o que exatamente esses painéis de visão geral. E neste painel de opções temos três opções, opções aparência e animação. Em seguida, design painel. Eu criei um vídeo separado e separado para entender exatamente como vamos ser usados neste painel e, em seguida, vamos passar para um projeto. Ok, então vamos projetar alguns projetos, como retomar uma página. Este é um site de uma página. Se você vir que é um site completo de uma página e você poderá personalizar tudo esta página de acordo com sua conveniência e de acordo com suas necessidades. Ok, Então, como exatamente esse site vai parecer? Este é meu navegador. Você pode ver uma revisão do site em tempo real. Portanto, este é o seu navegador. Se você clicar em Sobre nós, poderá ver a rolagem para cima. Se você clicar em Contato, ele estará rolando para cima. Se você clicar em quem ele está chegando na parte superior. E na página de contato, se você ver que existe um formulário. Sem codificação. Neste curso, vamos aprender exatamente como criar um formulário inteligente no estúdio Bootstrap. Nós o chamamos de formulário inteligente, que significa que sempre que o usuário preencher este formulário e clicar em Enviar, ele chegará a um endereço de e-mail que você selecionou aquele em qual endereço de e-mail este informações do formulário devem vir. Essa é uma forma dinâmica, mas não exatamente dinâmica. Nós o chamamos de smartphone. Em seguida, temos um site de várias páginas que vamos projetar neste curso específico. Isso é como uma página da empresa de tecnologia. Portanto, temos várias páginas aqui que temos formulários. Novamente, este é um formulário inteligente. Em seguida, vamos criar a página de contato, todas essas coisas. E além disso, tudo será responsivo para dispositivos móveis. Veja esta barra de navegação, como quando chego a um tamanho de tela maior, os ícones, os botões aqui aparecendo. Se eu estiver indo para a tela do celular, eles estão se escondendo dentro dessa alternância. Você vai ver exatamente como vamos projetar uma resposta móvel seu site sem codificação. Depois disso, vamos criar um design de um sistema LMS que está aprendendo o sistema de gerenciamento, como vários cursos, há opções de várias páginas. Vamos projetar a página da lista de desejos e depois a página de registro e todas as outras coisas. A coisa mais animada aqui é este site de comércio eletrônico. E para ser muito claro nesta área específica, site de comércio eletrônico é um site dinâmico completo onde você poderá integrar. O gateway de pagamento também é, então vamos ver a demonstração desse site. Este é o nosso site de comércio eletrônico, que somos, vamos projetar neste curso. E existem vários produtos aqui. E se eu clicar neste produto, você poderá ver que ele está chegando a esta página do produto e, em seguida, algumas opções relacionadas são a opção de produtos relacionados. Então você tem alguma opção de tamanho para selecionar. E se eu selecionar esse tamanho e alterar a quantidade, e se eu adicionar este embrulho de presente, tudo isso, vamos fazê-lo no curso. Se e se eu clicar em Adicionar ao carrinho, ele aparecer como produto adicionado ao carrinho, você pode clicar aqui como cartão C ou então você pode clicar em ano para ir para o carrinho e então você pode ver que seu produto está lá. E se eu clicar em Checkout, você pode ver que ele está me pedindo para inserir alguns dos meus detalhes. Se eu adicionar todos os detalhes aqui, se eu clicar em Avançar e ele estiver mostrando pagamento via PayPal ou cartão de débito, você tem duas opções como PayPal e Stripe. E você também pode fornecer algumas opções chamadas transferência bancária, xixi, xixi na entrega. E aqui eu usei BY um UPI. Então, todas essas coisas que você vai aprender neste curso específico. Este é um curso apertado muito completo. E, além disso, veremos muitas coisas como integração Zoho, integração de suporte ao cliente e todas as outras coisas. Sem perder muito tempo. Vamos começar e verei você no primeiro vídeo deste curso. 2. Primeiros passos: Neste vídeo, veremos como começar a usar o Bootstrap studio. No momento da gravação deste vídeo, o estúdio de bootstrap está na versão 5.6.4. Essa é a versão mais recente. Neste ponto do tempo. Quando você inicia o bootstrap Studio pela primeira vez, isso é o que você vê na tela. Vamos ver como lidar com isso. Temos poucas opções nesta tela. Primeiro é o design recente. Como o nome sugerido. O design do motivo significa os projetos recentes nos quais você trabalhou. Viremos aqui para que você possa simplesmente clicar nele e abrir o projeto, economizar tempo, nada mais. Em seguida, tutoriais, você tem alguns tutoriais aqui. Sempre que você clicar em qualquer uma dessas opções, ela o levará à página da Web, que é um tutorial completamente baseado em texto. Não é um tutorial em vídeo. É por isso que estou fazendo um vídeo nele. O nome do software está lá bootstrap studio do que a versão que é 5.6 para a versão atual, então temos um novo botão de design aqui. Em seguida, temos um botão Abrir. Ano. Novo design é quando você clica no novo design, quando a caixa de diálogo virá à sua frente afirmando que tipo de novo design você deseja. Se você clicar em Abrir, o explorador de arquivos virá à sua frente. E você pode simplesmente selecionar o projeto e, em seguida, começar a trabalhar nele. Então, vamos ver como criar um novo design. Basta clicar em um novo design, uma caixa de diálogo virá à sua frente. Bootstrap Studio nos dá alguns designs prontos. Você pode começar com isso também, mas todos estão assistindo a este vídeo para aprender o estúdio Bootstrap a não usar os designs prontos. Então, o que faremos, temos que garantir que três opções estejam lá. E nós selecionamos isso. A primeira opção é nomear seu projeto. Em segundo lugar, certifique-se de que o modelo em branco esteja selecionado. Você pode ver este pequeno círculo, está lá, círculo azul dentro desse círculo azul, carrapato branco está lá. Isso significa que esse modelo está selecionado. Nomeie o projeto e, em seguida, você precisa ter certeza qual versão do estúdio Bootstrap estamos usando. A seleção padrão será 5. Na versão anterior, são 4.6 widgets selecionados. Versão anterior significa 5.6.2 de 5.6.3, a seleção padrão é Bootstrap cinco. A maioria dos alunos fica confusa aqui que o que é esse bootstrap cinco e o Bootstrap Studio 5.6.4. Então, deixe-me te dizer. Bootstrap é uma estrutura e Bootstrap Studio é um software no qual estamos trabalhando. Selecionamos a versão mais recente do framework Bootstrap, ou seja, 5, na verdade é 5.1, mas a submersão não é mencionada aqui. Portanto, estamos selecionando 5, que por padrão é selecionado. Então vamos nomear nosso projeto de qualquer coisa. Vamos nomeá-lo como teste um. E então eu clicarei em Criar. Assim que clico em Criar, agora estamos no verdadeiro estúdio de bootstrap. Agora nós entendemos como começar. No próximo vídeo, entenderemos a interface do usuário do estúdio Bootstrap. Então, vejo você no próximo vídeo. 3. Interface do usuário: Neste vídeo, entenderemos interface do usuário do estúdio Bootstrap. Começaremos deste canto. Aqui temos dois painéis. primeiro é um painel de estúdio e, em seguida, um painel online, mas não o chamamos de painel online. Acabamos de chamá-lo como uma subversão do painel Studio. Este é um painel de estúdio. No painel Studio, temos duas coisas. Um deles é estúdio e outro está online. O que exatamente Studio IIS. Studio é o lugar onde você encontrará todos os componentes que estão lá no estúdio Bootstrap pré-instalados. Isso significa que o bootstrap Studio vem com poucos componentes e alguns elementos HTML que componentes e elementos HTML você encontrará no painel do estúdio você como usuário, a primeira pasta será UI. Como estou usando o estúdio Bootstrap de tantos dias. Então, a pasta do usuário está lá para mim. Mais cedo. Você também receberá essa pasta à medida que começarmos a fazer o upload dos componentes. painel Studio é o lugar onde você encontrará os componentes e os elementos para projetar seu site. A segunda coisa é online. O painel on-line é, como os nomes sugeridos, os componentes que não estão lá no painel Studio. E você quer que os componentes e os componentes que são criados por outros e faça o upload para a comunidade, bootstrap Studio Community que componentes você encontrará no painel on-line e basta clicar em Online. E aqui você verá os componentes mais populares. Então temos um interruptor de modo escuro. Acho que esse componente nos ajuda a mudar o site do modo escuro e do modo claro. Portanto, esses são alguns componentes de tendência, então temos poucos componentes Let Us que são criados pela comunidade. Todas essas coisas estão lá. Este é o painel online, e este é um painel de estúdio logo abaixo do paralelo do estúdio, que é a visão geral. Você verá a visão geral do nosso site com base em uma estrutura do nosso site, você verá a visão geral do site. Depois de começarmos a projetar o site, você entenderá como usar o painel de visão geral de uma maneira muito eficiente. À esquerda da nossa tela, temos dois painéis que são o estúdio e a visão geral. No centro, novamente temos dois painéis. Um deles é o palco, o que você vê no centro, que é a tela branca que é encenada. E logo abaixo do palco você tem o painel do editor. Você pode ver o texto HTML aqui e um texto de estilo. Ah, sim. Você só precisa clicar em qualquer lugar entre isso. Depois de clicar lá, você verá que o editor de texto está agora à sua frente. Você verá todo o código HTML que Bootstrap studio está escrevendo para você. Neste lugar, esse é o estilo neste lugar. Você verá todo o CSS que já foi retornado ou você deseja escrevê-lo logo abaixo desta área HTML, você tem os atributos. Depois de clicar nesses atributos, você verá os atributos sobre você. Você tem uma chave e um valor para inserir. Você pode criar uma ID e uma classe somente neste local. Então deixe-me mostrar exatamente como parece. No painel de visão geral, selecionarei essa tag de corpo. Depois de clicar na tag body, você poderá ver que o painel de atributos está lá. Você pode chamar uma UO de ID, você pode chamar uma aula aqui. E você também pode criar novas chaves e valores. Esses são os CSS que já foram escritos para você a partir do framework Bootstrap. Você pode ver as cores e todas as outras especificações já estão neste lugar específico. Canvas é a área onde você verá o design do seu site. E no topo da área da tela, existem algumas opções. Vamos ver isso um por um. A primeira opção é aumentar o zoom e, em seguida, diminuir o zoom. Você pode ampliar e diminuir o zoom da tela. Então temos um Flip Canvas. Você pode girar a OU da tela. Então aqui temos a opção Ajustar à tela. Depois de clicar na opção Ajustar à tela, a tela caberá nessa área específica. Em seguida, temos poucas opções de visualização. O que você quer ver como delinear grade, mostrar modelos de caixa e todas essas coisas. Então aqui temos um tamanho da tela. A primeira é a largura e a segunda é a altura. Você pode alterá-lo depois de começar a projetar o site, a altura do site muda acordo com o comprimento do site, então você tem uma porcentagem de UO e você tem uma pequena seta. Ah, sim. Depois de clicar na seta, você pode ver a lista de dispositivos móveis para ver exatamente como será um site nesse celular específico. Em seguida, temos uma opção de seleção de página aqui. Este é o lugar onde você pode selecionar a página ou você pode criar uma nova página quando tiver uma página múltipla, pelo menos da página virá nesta área específica, então você pode simplesmente clicar em nova página para criar uma nova página. Temos a outra opção também para criar uma nova página. Veremos que também neste vídeo somente depois disso temos seis tamanhos de exibição onde podemos ver exatamente como ele se parece em nosso tamanho de exibição específico. O primeiro aqui é o duplo XL, que é uma tela extra, extra grande. Em seguida, temos a tela do Excel, que é uma tela extra grande. Então temos uma tela grande, chamamos de LG. Em seguida, temos um tamanho médio de dispositivo que é MD no estúdio Bootstrap. Então temos um tamanho pequeno, há SM. Em seguida, temos tamanho extra pequeno que é acesso. Portanto, temos seis tamanhos de dispositivos projetados especificamente para o estúdio Bootstrap. E com base nos tamanhos desse dispositivo, o sistema de grade funciona. O que é o sistema de grade? E tudo o que veremos isso nos vídeos posteriores. Esta é a tela. O projeto que você selecionou. O nome do projeto vem aqui, que é o primeiro teste. E logo após o nome, se você vir alguma marca de estrela, isso significa que este projeto ainda não foi salvo. Certifique-se de salvar o projeto, pois este é um primeiro projeto de teste, não faremos nada nisso. Então eu não vou salvar este projeto, mas se você quiser, você pode salvá-lo. Agora, no lado direito da nossa tela, temos dois painéis. Um é o painel de opção e um é painel projetado. No painel de opções, temos três subpartes. Uma é aparência, uma é opções e outra é animação. No painel aparência, você pode alterar a aparência do componente ou elemento. Você pode alterar o layout, a fonte, o plano de fundo, as bordas, todas as coisas do lead. Você também pode ver como exatamente a margem e o preenchimento são atribuídos a um componente específico ou a um elemento. Depois disso, temos o painel de opções. Você é baseado nos componentes. As duas primeiras opções mudarão. última das coisas permanecerá parecendo. Mas se você selecionar o corpo, somente essas duas opções estarão lá. Essa é a opção de texto e o Flexbox. Mas à medida que começamos a projetar o site, quando selecionamos os diferentes componentes ou elementos que as opções serão alteradas com base nos componentes que selecionamos no painel de opções, teremos tantas opções para modificar os componentes. Então temos o painel Animação aqui. Isso é usado para animar um componente ou elemento específico. Logo abaixo, temos um painel de design onde nossos recursos projetados são organizados de forma sistemática. Temos poucas pastas nisso. A primeira pasta é a página. Se você clicar nesta seta específica, poderá ver a página index.html está lá. Sempre que você abre um novo projeto no Bootstrap studio, esta é uma página padrão que você obtém e você não pode excluir esta página. Sempre que você cria uma nova página HTML, essa página fica automaticamente dentro desta pasta Pages. Depois disso, temos uma pasta de estilos onde os arquivos SSS e SAS permanecerão dentro dessa pasta. Em seguida, JavaScript, todo o arquivo JavaScript permanecerá dentro desta pasta. Em seguida, temos fontes. Todas as fontes ficarão dentro disso, e as imagens ficarão dentro disso. Você também pode criar uma subpasta dentro dessa pasta específica. Mas você não pode mover os arquivos de uma pasta para outra. Isso significa que você não pode mover o arquivo CSS de ponto para o arquivo HTML. O arquivo STL permanecerá na pasta Pages somente dentro da pasta Pages, você pode criar várias pastas e você pode mover o arquivo HTML dentro dessas pastas, que estão dentro da pasta Páginas. Portanto, pgs é uma pasta pai. E dentro da pasta Pages você pode criar várias pastas. Isso é o que o painel de design facilita no topo, temos poucas opções aqui que são novas. Podemos criar um novo design aqui, depois abrir, criar um novo design e salvar as configurações de exportação de suas configurações. Existem, a opção desfazer refazer está lá. Também podemos visualizar nosso site enquanto estamos projetando, podemos visualizar nosso site em vários dispositivos apenas colocando o endereço IP. Veremos isso também nos vídeos posteriores. A opção publicada também está lá. Você pode publicar o design, publicado no sentido de exportar o design em sua máquina local ou diretamente, você pode publicar o design daqui para o servidor usando a conta da Cloudflare. Então, também veremos isso nos vídeos posteriores. Então, isso é o que a interface do usuário do estúdio de bootstrap ao projetar o site, este é o lugar onde estaremos gastando é a maior parte do tempo. Então, espero que você entenda a interface do usuário do estúdio de bootstrap. E no próximo vídeo, veremos como importar um componente no projeto Bootstrap Studio. Vejo você no próximo vídeo. 4. Como Importar Componente: Neste vídeo, veremos como importar um componente do painel RStudio para o palco ou para o painel de visão geral. De ambos os sentidos, veremos que este é o painel do estúdio. E você pode ver que a opção de componentes de pesquisa é OEO. No começo, o que faremos, começaremos com a barra de navegação. Vamos importar nosso navbar aqui. Então vou digitar nav. Assim que eu digitar NAB, você verá alguns componentes aqui. Isso é nav, navbar, navegação limpa e tudo isso. Usaremos o segundo componente que é navbar. Como importar o componente? É muito simples e basta clicar, segurar o mouse, clicar, arrastar e soltar na tela. Arraste e solte na visão geral paralela. Então, se você estiver soltando isso no painel de visão geral, você precisa soltar sobre a tag body. Depois de pegar o ponteiro mais ou a etiqueta do corpo, você verá que o contorno azul está lá. Basta pegar o ponteiro do mouse aqui e soltar o clique do mouse. Depois de lançar o mais clicado, imediatamente você verá a saída do componente. Este é um componente, a barra de navegação, chamamos isso como um componente porque dentro desse componente temos vários outros componentes. Um deles é navbar, marca navbar dentro, então temos navbar-alternar esse colapso navbar. Se abrirmos um colapso navbar, teremos novamente um novo componente que é nav. Então podemos abrir isso também. Em seguida, veremos um item de navegação. Dentro do item de navegação, você é, nós temos elemento. Este é um elemento de link que é uma tag. Então, para ver o código que é escrito pelo Bootstrap studio, esse é o código HTML. Basta clicar no painel do editor e veremos que todo o código está escrito para nós. Você pode ver que esta é a tag selecionada aqui. O que você selecionará neste painel de visão geral, essa linha específica será selecionada nesta área do editor de texto. E qualquer coisa que você selecionar, seu, esse componente específico será selecionado no painel de visão geral. Vamos selecionar esse corpo aqui. Então, uma vez que eu clico no corpo, você pode ver que o corpo está selecionado agora em ambas as áreas. Este é o lugar onde você pode ver o código HTML, como exatamente o HTML é escrito. Você pode ver que está escrito de forma muito profissional. Todos os alinhamentos e todas as seções são escritos com muita clareza. Agora, se você quiser mudar alguma coisa, basta selecionar o componente com base na seleção, as opções e o painel de aparência mudarão e você tem a liberdade de fazer as alterações, para fazer a necessidade de alterações completas nisso. É assim que importamos o componente no estúdio de bootstrap. É muito simples. Basta procurar o componente, selecionar o componente, arrastar e soltar no palco ou arrastar e soltar no painel de visão geral. Vamos fazer isso mais uma vez. Depois disso, o que vou fazer, vou vir aqui e tentarei importar um novo componente. Vamos ver, há componentes prontos, basta chegar à interface do usuário e na mídia. Vamos ver o que exatamente é. Tenho uma galeria de fotos. Selecione esta galeria de fotos. Agora vou importar isso do palco. Vou pegar meu mais ponteiro e virei aqui. Você verá que uma linha azul está lá, e uma pequena flecha também está morta. Então, esta é uma pequena flecha. Isso significa que se você soltar esse componente específico aqui, esse componente virá logo abaixo dessa linha azul específica. E acima da linha azul, o componente que temos ys navbar. Logo abaixo da barra de navegação, esta Galeria Lightbox. Bem-vindo. Você pode ver o nome também a Galeria Lightbox. Isso significa que mostra que a Galeria Lightbox está prestes a vir nessa área específica assim que você soltar o clique do mouse. Então, vamos soltar o clique do mouse. E agora você pode ver a Galeria Lightbox está lá. No painel de visão geral. Você pode ver que a barra de navegação está lá. Logo abaixo da barra de navegação você tem esta Galeria Lightbox. Agora vamos ver como importar um componente entre dois componentes. Então, vamos importar esse plano de fundo de paralaxe entre essa barra de navegação e uma seção. Importar um componente entre dois componentes é difícil no palco, mas é fácil no painel de visão geral, o que você precisa fazer? Você apenas leva esse componente arrastar aqui. Quando você arrasta esse componente, você pode ver agora que o corpo está no contorno azul. Isso significa que se eu liberar que ele entrará no corpo e ele irá direto abaixo da seção lightbox. Mas queremos que esse componente se torne entre a barra de navegação e a seção. Vou pegar meu ponteiro do mouse ao longo de um ano e vou mantê-lo aqui. Você pode ver uma linha horizontal entre a barra de navegação e uma seção. A seção é Lightbox Gallery. Quando você vir essa linha horizontal, isso significa que, se eu liberar esse componente aqui, ele entrará entre navbar e a Galeria Lightbox. E é isso que queremos fazer. Basta soltar meu ponteiro do mouse. E agora você pode ver que esse plano de fundo de paralaxe agora está entre a barra de navegação e a Galeria Lightbox. Você pode ver que isso é uma barra de navegação. Este é um fundo de paralaxe. E depois temos uma Galeria Lightbox. Nesta etapa, você pode ver exatamente como o site está parecendo. No painel de visão geral, você pode ver a visão geral do site. Agora você pode ver nos estilos que você tem essa CDN importada. O arquivo CSS da Galeria Lightbox também está lá. Espero que você entenda como importar os componentes no estúdio Bootstrap. No próximo vídeo, veremos como editar os componentes. Então, vejo você no próximo vídeo. 5. Editar o Componente ou Elemento: Ok, então agora entendemos como importar os componentes. E neste vídeo, veremos como editar os componentes. Para editar os componentes primeiro, selecionaremos o componente. Podemos selecioná-lo no palco ou no painel de visão geral. Selecionar o componente em um estágio é simples. Quando eu passar o ponteiro do mouse em qualquer elemento ou componente, você pode ver o nome do componente aqui. E você também pode ver um contorno azul, como uma borda azul aqui. Esta é a área desse cabeçalho em particular. Selecionarei isso assim que você puder ver, um monte de ícones aqui. Este primeiro ícone significa mover. Basta clicar e arrastar para qualquer lugar que você quiser. Você pode mover o componente, você pode mover esse elemento específico. Então temos uma seta para cima. Isso significa selecionar pai. Assim que você clicar neste ícone específico. Você pode ver na visão geral paralela, este é o cabeçalho que selecionamos. Agora, o pai desse cabeçalho em particular é essa desgraça. E se eu clicar nessa seta chamada Selecionar pai, você poderá ver agora que o negócio está selecionado. Isso significa que quando você clica nessa seta, ela selecionará o pai desse componente específico ou um elemento. Em seguida, temos edição. Isso significa que se você clicar nesta edição, poderá editar o texto aqui. Em vez desta mesa de luz. O que você pode fazer, você pode amarrar foto aqui e apenas apertar a tecla Enter. E você pode ver agora que é uma galeria de fotos. Portanto, este é o lugar onde você pode editar o componente ou o texto. Qualquer coisa. Em seguida, é duplicado. Se você quiser fazer uma duplicata desse componente específico ou de um texto, você pode duplicá-lo. Essa opção é altamente útil quando você deseja duplicar o componente com todos os CSS e estilos e quaisquer que sejam as alterações que fizemos. E você quer todos esses estilos editados em um novo componente, você pode simplesmente duplicá-lo. Então você tem a opção de altura. Se você clicar nisso, você pode simplesmente ocultar esse componente. Você pode ver que o componente ainda está aqui, mas ele está oculto agora. E como exibir esse componente novamente. Então, para isso, você precisa ir ao painel de visão geral, clique com o botão direito do mouse e clique em mostrar. Outro componente está de volta. Se você quiser excluir o componente, basta clicar neste ícone de exclusão aqui e, em seguida, excluir o componente. Da mesma forma que acontece com a imagem. Se você selecionar esse ano, poderá ver a opção Mover está lá. Em seguida, selecione a opção pai. Existe duplicata é a altura deles, está lá, exclua, está lá. A opção de edição não está lá porque editar a imagem não é o que podemos fazer no estúdio Bootstrap, mas podemos alterar a imagem. Como alterar a imagem? Clique duas vezes aqui e você pode ver uma caixa de diálogo escolher uma imagem virá à sua frente e quaisquer que sejam as imagens que são importadas neste projeto específico virão à sua frente em esta área específica. Se você tiver uma estrutura de pastas , as pastas também virão sobre você. Você pode selecionar qualquer uma dessas imagens. Depois de selecionar a imagem. E se você clicar em Ok, essa imagem virá neste lugar específico. Novamente, você pode clicar duas vezes e alterar a imagem. É assim que podemos mudar a imagem. Da mesma forma que podemos fazê-lo no painel de visão geral. Basta selecionar esta tag de imagem. E se você clicar duas vezes aqui da mesma forma, escolha uma caixa de diálogo de imagem virá à sua frente. Estas são as poucas opções e as técnicas pelas quais você pode editar o componente ou alterar a imagem e todas essas coisas. Veremos toda essa opção em detalhes também nos próximos vídeos. E na próxima seção, espero que você entenda como editar o componente ou um elemento neste vídeo. Caso contrário, você pode reproduzir este vídeo novamente. Este será o final desta seção. Na próxima seção, veremos o painel de opções em detalhes e entenderemos como o painel de opções se conecta. Então, vejo você na próxima seção. 6. Layout: Antes de iniciar este vídeo, temos que abrir um design que eu criei para você. Nesse design, faremos as alterações e entenderemos o painel de aparência para isso, você precisa encontrar o anexo, os arquivos de recursos no arquivo de recursos. A segunda pasta são arquivos BSS. Dentro dos arquivos CSS, há mais uma pasta para isso começar. Você precisa abrir o primeiro arquivo que está começando, design de ponto BS. Este é o arquivo que criei um design aproximado. Neste design áspero, entenderemos o painel de opções das opções de aparência e animações usando esse design. Vamos começar com a primeira opção no painel de aparência. Para isso, tenho que selecionar qualquer componente. Então, começaremos com esta seção. Selecionarei esta seção. Assim que selecionar esta seção, verei a aparência e as opções dentro da aparência. Neste vídeo, veremos layouts. Nos layouts, temos quatro opções, ou seja, largura, altura, margem e preenchimento. E em todas essas opções na frente de todas essas opções, temos essa seta. Quando você clica nesta seta, você verá as subopções que são largura mínima e largura máxima. Depois disso, em altura, temos altura mínima e altura máxima. Na margem, temos margem, margem superior, margem direita, margem inferior esquerda. No preenchimento novamente, temos preenchimento, parte superior, preenchimento, preenchimento inferior e preenchimento à esquerda. O que exatamente isso significa. Se você alterar a largura aqui, a largura do componente específico será alterada. Vamos ver. Eu selecionei esta seção e você pode ver o contorno azul aqui. Isso significa que esta é a seção que selecionamos. Se eu aumentar a largura, você poderá ver que a largura do componente está aumentando. O texto e os botões estão se movendo para o lado direito. Por quê? Porque estou aumentando a largura. E a largura está aumentando apenas no lado direito. Nesta seção específica, a largura aumentando a largura não é necessária. Então, vamos torná-lo padrão. Agora você não sabe qual é o número padrão quatro aqui, temos duas opções. Se você alterou apenas a largura, basta clicar em Redefinir tudo, ele redefinirá todas as opções na seção de layout. Ou então, basta selecionar isso, aperte o backspace e pressione Enter, e ele voltará para a largura original. A partir daqui, você pode aumentar a largura. Você pode colocar a largura mínima de um componente específico e uma largura máxima de um componente específico. Em seguida, temos altura. Semelhante à largura. Podemos aumentar a altura. Agora você pode ver que a altura está aumentando. Você pode ver agora que a linha azul está chegando aqui. Anteriormente, estava em algum lugar aqui. Então, dessa forma, você pode aumentar a altura de um componente. Da mesma forma, podemos alterar a altura mínima e a largura mínima. Veremos essas opções específicas quando começaremos a projetar o site. Agora temos margem. Margem. Podemos alterá-lo em todas as quatro direções, ou podemos alterá-lo de uma vez. A primeira opção, isso é apenas margem. Se mudarmos a opção aqui, ela se aplicará ao canto superior direito, canto inferior esquerdo. Vamos ver. Se eu fizer dez, todas as quatro subopções estarão obtendo a margem de dez pixels. Agora você pode ver que a margem também está lá. Você pode ver uma pequena lacuna lá, significa que a margem é aplicada. Se você quiser apenas aplicar a uma margem específica, a uma área específica. Então você pode simplesmente clicar nesta seta e, em seguida, você pode alterar o valor da margem superior. Digamos que se você quiser alterar a margem superior, então você pode simplesmente alterar o valor da margem superior. Assim. Todos os outros três permanecerão 0 e o único que é margem de torque mudará. É assim que você pode alterar a margem. Da mesma forma que você pode jogar com o preenchimento. Se você quiser alterar o preenchimento de todas as direções de uma só vez, você pode alterar o valor na opção de preenchimento. Você pode simplesmente descer e alterar o preenchimento de opções individuais. Por padrão, o preenchimento, a parte superior, preenchimento inferior é de 50 pixels e direita e esquerda são 0. Se você quiser alterar o preenchimento direito e o preenchimento esquerdo, você pode alterar o valor sobre u. Isso é o que temos na seção de layout, largura, altura, margem e preenchimento. No próximo vídeo, veremos a seção de fontes. Então, vejo você no próximo vídeo. 7. Fontes: Neste vídeo, veremos a seção de fontes. Vamos ver as opções nesta fonte. Primeiro, temos cor. Isso significa que podemos mudar a cor da fonte. Em seguida, temos o tamanho da fonte. E você pode ver que não há seta na frente da cor da palavra. Isso significa que não há subopções. É apenas uma opção que é cor. Depois disso, temos tamanho estrangeiro na frente dos sites estrangeiros, temos essa seta. Quando você clica nessa seta, você verá altura da linha e o espaçamento entre linhas. Então temos família estrangeira. Podemos alterar os estilos de fonte. E novamente, temos a flecha aqui. Se você clicar na seta, você pode ver peso da fonte e o estilo da fonte estão lá. E finalmente temos alinhamento. Então, temos poucos alinhamentos aqui. O primeiro é à esquerda, depois ao centro, depois à direita e depois justifica. Vamos ver um por um. Se quisermos fazer alterações na fonte, vamos selecionar esta fonte aqui que está destacada. E agora vamos mudar a cor da fonte. Existem poucas predefinições prontas da cor dada pelo Bootstrap e essa cor predefinida pronta é apenas UO. partir de agora, você pode ver apenas cinco cores aqui, mas elas são mais. Basta clicar nesta opção mais aqui, essa é a última. Você pode ver os três pontos aqui. Basta clicar nisso. Você pode ver todas as outras cores nesta predefinição específica. Então você só precisa clicar em qualquer cor, e é isso. A cor é alterada agora, isso era preto, agora é vermelho. Se você quiser uma cor específica que não esteja nesta paleta específica, então você pode simplesmente clicar neste botão de cor aqui você pode ver que uma cor vermelha está aqui. Você pode simplesmente clicar nisso. Então você chegará a essa opção de seletor de cores específica. Você tem quatro subpainéis diferentes no primeiro é selecionado. Este é o lugar onde você pode selecionar a cor e depois projetar. Poucas paletas de cores estão prontamente disponíveis aqui. Em seguida, favoritos, a cor favorita que você adicionou. Então temos uma biblioteca. biblioteca é como uma única cor com diferenciais. Isso é amarelo. Então estamos nos movendo para vermelho, rosa, azul, verde. Todas as cores estão prontamente disponíveis aqui na biblioteca que iremos selecionar. Aqui temos as opções do seletor de cores prontas para nós. Na parte inferior temos uma linha UE, que é HUB sua linha ou seja, temos todas as cores aqui. Você acabou de arrastar o mouse nesta linha específica. E a cor que você quer, você apenas libera o maior ponto em torno dessa área específica. Então você obterá os tons das cores, ou poderá selecionar qualquer sombra. Este é o ponto. Você pode ver uma caixa aqui. Essa caixa significa que essa cor específica está selecionada. Você pode selecionar qualquer cor aqui. Você precisa ter certeza de que cor você quer. Assim que você mover o mouse. A partir daqui, você pode ver a visualização ao vivo nesta área específica. Isso ajudará você a entender qual cor você quer e qual cor fica boa para o seu design. Vou apenas selecionar essa cor. E logo abaixo, temos um canal alfa aqui que é a opacidade da fonte. Você pode simplesmente reduzir a opacidade para torná-la transparente. E essa é a opacidade de 100%, e essa é a opacidade de 0%. Você pode brincar com isso também. Se você quiser selecionar uma cor específica que já esteja disponível em seu projeto, então você tem a ferramenta conta-gotas aqui. Basta clicar na ferramenta conta-gotas e você verá que um cursor diferente está lá. Você pode ver um círculo. E nesse círculo você tem caixa. No centro, você tem a caixa vermelha. Essa caixa é a área onde você selecionará a cor. Então, uma vez que você vem aqui, você pode ver que uma caixa vermelha está agora naquela área de cor azul. Se você usou essa cor azul, basta clicar nessa cor azul e boom, a seleção é movida automaticamente para essa cor azul específica. E se você gostou dessa cor azul, basta clicar em Selecionar e está pronto. É assim que você mudará a cor. Você selecionará a cor. Depois disso, temos tamanho estrangeiro. Se você quiser alterar o tamanho estrangeiro, então você pode simplesmente alterar o tamanho estrangeiro daqui. Por padrão, o tamanho era 32 e você pode alterar o tamanho estrangeiro. Dentro de sites estrangeiros, temos duas opções que são a altura da linha. Se você quiser alterar a altura da linha, você também pode alterar a altura da linha. E se você quiser alterar o espaçamento entre letras, você também pode alterar o espaçamento entre letras. Então, é assim que você pode alterar o espaçamento entre letras. Se você quiser trazer de volta essas opções para o estado padrão está selecionado e pressione o backspace e enter, selecione backspace e enter, selecione backspace e enter. E isso agora está no tamanho padrão. Depois disso, formamos a família. Podemos alterar a fonte de você. Por padrão, você pode ver a fonte. Existe algum sistema alfa, alguns estrangeiros são, alguma fonte é aplicada. Para alterar a fonte. Basta clicar nesta OU de seta e verá a opção Adicionar fonte. Existe? Basta clicar na opção Adicionar fonte e a menor fonte virá à sua frente. Existem tantos fóruns. Você pode pesquisar o formulário a partir do ano porque existem muitos formulários. Por enquanto, o que vou fazer, vou selecionar qualquer fonte aleatória que preencherei. Vai ser bom. Vou apenas ir com este. E como ligar este telefone? Só você precisa clicar nesta caixa de seleção. Depois de marcado, basta clicar em Salvar. Agora, a fonte é importada. Você pode ver nas fontes no painel de design, você pode ver que a fonte já está aqui. Anteriormente, estava vazio. Agora a fonte está lá. E agora queremos alterar o formulário, selecionar o componente ou elemento, ir para a família estrangeira, clicar na seta e agora você pode ver a fonte. Está lá. Basta clicar nessa fonte e boom, a fonte é alterada. Da mesma forma que você pode alterar o peso da fonte. Você pode aumentar o peso estranho do normal para o negrito. Existem duas opções, normal e negrito. E no estilo de fonte você tem outras opções que são normais, itálicas e todas as coisas. Então, se eu clicar em Data Lake, o fórum se converterá em estilo itálico. Os orais trazem de volta ao normal. Isso é o que eles são em família estrangeira. E agora alinhamento. Em alinhamento, temos um truque aqui. Esse alinhamento já está centralizado, mas aqui você pode ver que o alinhamento central não está selecionado. Se eu clicar no alinhamento à esquerda, a fonte não irá para o alinhamento à esquerda. A razão por trás disso é que o alinhamento formado é controlado no painel de opções. Se eu for para o painel Opções, você poderá ver que o alinhamento está centralizado. Se o alinhamento dessa fonte específica for controlado pelo painel Opções, se você fizer alguma alteração na evidência, ela não será alterada. É muito comum que, quando você estiver projetando o site, se você estiver alterando o alinhamento da fonte a partir do ano, e se o alinhamento não estiver sendo alterado, não fique bravo. Basta ir ao painel Opções e alterar o alinhamento de você. Na próxima seção, estamos chegando ao painel Opções, mas vamos completar o painel de aparência primeiro. Portanto, é assim que a seção de fazendas controla a primeira cor leste, você pode alterar a cor, depois o tamanho estrangeiro do que família estrangeira e depois o alinhamento. É muito fácil que, sem escrever o código, possamos encadear a maioria das coisas. É assim que a seção de formulários facilita. E no próximo vídeo, veremos o fundo sob a epiderme. Então, vejo você no próximo vídeo. 8. Contexto: E neste vídeo, vamos ver sobre o plano de fundo. Em segundo plano, temos três opções principais. primeira opção é adicionar imagem, depois adicionamos gradiente e, finalmente, temos BG. Bg não é nada além de plano de fundo. A forma curta de plano de fundo é BG add gradiente. E a cor bg está especificamente relacionada apenas às cores. E adicione imagem no sentido em que podemos adicionar a imagem em segundo plano. Então, o que faremos, em vez de seguirmos de forma reta, veremos em um lado para trás, significa que primeiro veremos a cor de fundo. Em seguida, veremos adicionar gradiente. E, finalmente, veremos Adicionar imagem. A cor de fundo é tão semelhante às cores da fonte. A única diferença será que essa opção específica mudará. Ele aplicará uma cor ao plano de fundo do objeto específico. O que exatamente é, vamos ver. O mesmo que a cor. Temos uma cor de tema, que está lá. Podemos ver aqui. Basta clicar em qualquer plano de fundo. Então, como isso é como uma leve cor vermelha, então tentaremos dar uma cor preta ao fundo. Então esta é uma cor preta, mas isso não é um preto completo. Este é um grau ou cinza escuro. Sim, está escrito que cinza escuro. Então, uma vez que eu clico nessa cor, você pode ver agora que a cor de fundo está preenchida com essa cor. Esta é a cor de fundo. E da mesma forma, se você quiser uma cor diferente, uma cor específica que não esteja nesta paleta de cores específica, basta clicar neste seletor de cores no ano opcional. Em vez de Design, vá para Selecionar, selecione uma cor específica que você deseja. Digamos que eu queira essa cor em particular onde o valor de dB vermelho seja 384041. E vou usar isso com frequência, apenas por exemplo, como eu vou usá-lo com frequência, então vou colocá-lo no favorito. E agora eu tenho duas cores na falha. Um é para o texto e outro é para o plano de fundo. Agora vou clicar em Selecionar. É isso. É assim que você aplicará a cor de fundo. Você pode me perguntar como se eu quisesse dar uma cor de fundo para toda a página? Sim, simples. Selecione a tag do corpo e altere a cor de fundo. Para isso. Vou te mostrar exatamente como é. Eu seleciono a tag body, body no sentido, esta é uma página da web completa. Direto deste topo. Este final da página é um corpo. Esta tag de corpo eu selecionarei. Chegarei à cor de fundo e usarei apenas essa cor. Vou clicar nessa cor. E é isso. A cor do corpo é alterada. Agora, por que essa área não está mudando? A razão por trás disso é isso, ele já tem uma cor de fundo. Agora, como podemos remover essa cor específica, como podemos remover uma cor branca. Não temos nenhuma cor nula aqui. Eu vou te mostrar isso também. Agora o que vou fazer, selecionarei essa área específica, ou seja, seção, isso está logo abaixo da barra de navegação. Temos esta seção. Selecionarei esta seção. E agora você pode ver a cor de fundo da seção desta seção específica é Grundy cinco, vinte e cinco, vinte e cinco, valores vermelhos, verdes e azuis em vinte e cinco. Vinte e cinco, vinte e cinco. Isso significa que é uma cor branca. Clique neste seletor de cores. Vá para seleção, vá para Selecionar. E agora essa opacidade é a certa. Eu te disse, esta é a transparência aqui que é alfa. Traga esse alfa para 0. Uma vez que eu derrubo esse alfa para 0, agora ele tem uma cor nula, sem cor para essa seção específica. Você pode ver agora RGBA que vinte e cinco, vinte e cinco, mas o Alpha é 00 no sentido Z para completar uma transparência de 100%. Agora, se quisermos um ingrediente de gradiente na mistura de sentido de duas cores, se quisermos essa opção específica, então o que faremos, usaremos essa opção chamada gradiente. O que vou fazer, em vez de colocar o gradiente aqui, selecionarei a segunda seção, que é o ano horizontal do projeto. Aplicaremos o gradiente. Ok, então vou rolar para baixo. Deixe-me ver como correu exatamente, está tudo bem. Você pode ver essa cor azul aqui, a linha azul aqui. Portanto, este é o final da seção. Esta parte em particular, essa parte é o que nossa segunda seção é. Nós apenas projetamos horizontalmente. Vamos adicionar um gradiente. O que vou fazer, clicarei em Adicionar gradiente. Assim que eu clicar em Adicionar gradiente, você pode ver que a cor de fundo não é transparente, é totalmente transparente. Certo? Agora, a opção Gradiente está ativada. Agora você pode ver na parte superior temos cor preta e, na parte inferior desta área específica, temos cor branca. Por que é preto e branco? Só porque, por padrão a cor do gradiente é preto e branco. Você pode ver que isso é preto e isso é branco. Certo, vamos ver as opções dentro do gradiente. A primeira opção é o tipo. Temos dois tipos de gradiente. Um deles é o gradiente linear, que agora acabamos de selecionar. E o segundo é um gradiente radial. Qual é a diferença entre gradiente linear e gradiente radial? Gradiente linear significa que ele viaja em linha reta. Você pode ver que a cor preta está lá e a cor branca está aqui. Ele está viajando. A cor preta está viajando para a cor branca em linha reta. Mas isso significa que é um gradiente linear. gradiente linear viaja em linha reta, mas o ângulo pode ser alterado de onde continuamos no ângulo. Este é o lugar onde podemos mudar o ângulo. Agora é por padrão que é 180 graus. Posso mudar o ângulo para que você possa ver agora a cor preta é amarela e a cor branca ainda está. Mas, novamente, ele está viajando em linha reta. Somente o ângulo da viagem é de 148 graus. Certo, isso é 148 graus. Então, vamos levá-lo de volta ao padrão. Vou apenas removê-lo. Então esse é o ângulo do gradiente. Agora vamos ver como mudar a cor do gradiente. O primeiro é preto e o segundo é branco. Você também pode alterar o deslocamento dessa área específica. Vou mudar o deslocamento disso e você pode ver a cor preta está tomando o espaço extra só porque nesta área específica estou dizendo que a cor preta tem a sala extra que é deslocada. Estou dando espaço extra para ele. Esse quarto extra é chamado de deslocamento. Isso é o que estou fazendo, então vou levá-lo de volta aos cantos extremos, ambas as cores nos cantos extremos. Agora vamos mudar a cor. Primeiro, vou selecionar isso. Assim que eu clicar nisso, você pode ver que a opção de cor está aqui. Agora. Agora você pode ver que a cor preta está lá. Isso significa que esta é a cor preta. Vou apenas clicar nesta cor vermelha Oreo, a cor inicial é vermelha. Vamos mudar a cor. A cor vermelha não está parecendo boa. Há um pouco quente. Então, em vez disso, o que faremos, teremos uma cor azul. Então, esta é uma cor azul. Podemos levar a cor azul. Vamos mantê-lo na cor fria. Selecionarei essa cor azul e clicarei em selecionar a primeira cor agora é azul. A segunda cor ficará azul novamente, mas mudaremos a intensidade dessa cor. Então, primeiro selecionarei essa cor azul, depois irei selecionar e depois a moverei para a parte mais clara. Agora, seu eu sou, esta é a cor que eu sou selecionado. Agora. Vou clicar em selecionar a cor do gradiente se parece com isso e está em uma forma linear. O deslocamento é de 101%, 100% nesse sentido, ambos estão nos cantos extremos. Isso é offset. Digamos que eu esteja levando esse deslocamento em direção a algo aqui. E eu vou clicar em, Repita o gradiente. Agora você pode ver o deslocamento. Isso está certo Exatamente em 50%, como você pode ver, não é 50%. O começo da cor é este. Ok, essa cor azul, a cor azul escuro. A cor começa a partir do ano. Terminou exatamente nos 50%. Uma vez que atinge os 50%, imediatamente ele começa de novo a partir dessa cor azul específica. Então, está começando dessa cor, cor azul, descendo para o branco. E o oficial tem 50 anos. Assim que o deslocamento for concluído em relação ao estoque. Ou seja, é isso que é a opção de repetição. Ok, então se eu desligar essa opção chamada repetir, então o deslocamento levará a cor branca, essa cor azul claro. Isso dará espaço extra. E a cor azul vai levar a lição. Ok, então vamos trazer isso de volta a 100%. E então vamos, este é o gradiente linear. Gradiente linear significa viajar em linha reta. A cor viaja em linha reta. Agora vamos ver o que é gradiente radial. Gradiente radial significa que ele viaja de forma circular. Então, vou mudá-lo para o gradiente radial. E agora você pode ver que a cor azul está no centro e na forma circular, essa cor está mudando. No centro, é azul. Lá no canto superior esquerdo, é branco. No canto inferior esquerdo, é branco no canto inferior direito é branco no canto superior direito é branco. Então, ele só viaja do centro para as idades nesta forma circular. Se você quiser alterar a cor RLC, se você quiser virar as cores, o que você pode fazer é alterar o deslocamento. Você pode levar essa cor neste ponto e essa cor até este ponto. E lá vamos nós. Se você quiser manter a mesma cor, mas em uma forma de flip. Então você pode pegar isso e levá-lo para a outra direção. opção de gradiente funciona assim. Então você tem dois gradientes. Um é um gradiente linear que viaja em linha reta, e um é um gradiente radial que viaja de forma circular. Agora, o que faremos, veremos a opção de imagem, ou seja, a opção Adicionar imagem. Antes de entrar na opção Imagem, o que vou fazer, basta clicar neste ícone de cruz aqui para que a opção de gradiente desapareça. E temos uma posição padrão agora que é de cor branca. E agora vamos adicionar uma imagem. Se eu clicar nesta pasta de imagens aqui, há poucas imagens lá, como este barramento e, em seguida, este laptop de construção e tudo mais. Vamos colocar qualquer imagem de fundo nessa área específica. O que vou fazer, clicarei novamente nesta seção. Então, se eu clicar aqui, isso está selecionando o contêiner. E se eu clicar no seu lado de fora desse contêiner, ele selecionará a seção ou então eu posso ir diretamente ao painel de visão geral e posso selecionar esta seção de você. Depois de selecionar esta seção, agora vou clicar em Adicionar imagem em segundo plano. Basta clicar em Adicionar imagem. Assim que eu clicar em Adicionar imagem, a opção Adicionar imagem virá à sua frente. Agora você tem URL. Url. Você pode adicionar qualquer imagem, não importa se você adicionou a imagem no projeto bootstrap Studio ou não, basta clicar no ícone Adicionar aqui. Este botão Adicionar está lá. Vamos clicar nesse botão Adicionar. As ferramentas e a imagem pop-up virão à sua frente. Basta selecionar qualquer uma das imagens. Selecionarei esta imagem e clicarei em, Ok. Depois de clicar em Ok, você pode ver que a imagem de fundo está logo atrás dessa área específica. Desta forma, podemos adicionar a imagem, mas agora você pode ver a imagem, a imagem original só tem uma postura, mas tem 1234 escadas ou por quê? O motivo é, novamente, clicarei neste Adicionar imagem. Agora você pode ver o tamanho da imagem é 640 pixels por 426 pixels. Essa imagem em particular é apenas encaixada nessa área específica. Então, quando a imagem terminar, ela repete a imagem. E na parte inferior também repete a imagem. Se quisermos ajustar a imagem, temos que jogar com a posição. A segunda opção é a posição. Então, vou clicar nesta opção de posição. Em seguida, temos parte superior, inferior, esquerda, direita e centro. Então, o que vou fazer, vou clicar no Centro. Assim que clico no centro da imagem principal vem no centro. Em torno disso, todas as outras imagens entram em loop. Certo? A próxima opção é o tamanho. Se eu vier em tamanho, diz auto, contém revelar. A configuração padrão é automática. Se o automático estiver , ele repete a imagem. Se eu selecionar conter, capture toda a área, mas no formato de altura e largura. Mas se você ver com cuidado, essa área específica é repetida e essa área específica é repetida. Portanto, a imagem está pegando a área que contém a área em termos de altura e não está expandindo a área além da seção. Mas se o tamanho for descoberto, ele cobre a área. Não importa qual parte é exibida ou qual não é exibida. Acabamos de cobrir a área e Pilsen toda a parte. Isso é uma coisa. E digamos que se essa parte estiver no topo novamente e isso é automático, então essa repetição está lá. Mas na opção de repetição, se você vier e se você disser não repetir, verá apenas uma imagem que está no centro, que está na posição superior. Se eu vier aqui e eu vou clicar no centro. Então podemos dizer que a imagem está lá, mas não há opção de repetição. Mas, repetidamente, se você disser repetir x, então apenas o eixo x estará na forma repetida. Se você diz repetir, por quê? Em seguida, apenas o eixo y em uma repetição superior e inferior. Se você vir uma repetição, então, em todos os excessos, ela se repetirá. A melhor configuração para a opção de imagem de fundo é colocar a posição no centro, manter o tamanho na capa e a repetição deve ser observada que a primeira é URL. Você pode adicionar a imagem aqui, a posição, a melhor opção será centralizada, tamanho, a melhor opção, ela será coberta. E a última repetição, não deve estar em lípidos somente se for necessário. Mas ainda assim você pode jogar com as opções e você pode colocar as opções como quiser. Portanto, essas são as opções em segundo plano. Então, vou remover essa opção. Vou mostrar uma técnica interessante e muito útil. Em poucos sites que você pode ter visto como se houvesse uma imagem em cima dessa imagem, o gradiente também está lá. O que podemos fazer é como se pudéssemos adicionar um gradiente. Vamos clicar em Adicionar gradiente e vamos selecionar duas cores. Vamos para a biblioteca. E vou apenas selecionar essa cor amarela aqui. Vou clicar em Ok. E em vez dessa cor branca, vou pegar outra cor amarela escura. Para este exemplo, tudo bem para mim. Você pode ver essas linhas lá em cima antes desse interruptor de cor. Então, vou clicar nessa área específica e posso recolher essas opções. Agora, o que vou fazer, clicarei em Adicionar imagem. Vou clicar em Adicionar imagem. Vou escolher uma imagem. Vou usar novamente a mesma imagem ou talvez usarei essa imagem de microônibus. Em seguida, clique em OK. Agora o que vou fazer, vou apenas clicar na posição central, na tampa central. Não é repetido. Agora eu quero ver a imagem também e o gradiente também o efeito que eu quero. O que vou fazer, clicarei no gradiente de edição. Este ícone de edição está aqui e clique neste ícone. E selecionarei essa primeira cor. Voltarei a esta ferramenta seletora de cores, e aqui vou deixar cair a opacidade. Um pouco. Opacidade vou cair. Agora acho que agora você pode ver que o ônibus não está visível. Só estou caindo, caindo, soltando e soltando até 0,5 alfa. Isso é exatamente 50%. E basta clicar em, OK. Agora, o que está acontecendo? Essa cor é 50% transparente e essa cor é 100% sólida. Essa cor também virá aqui e deixará cair a opacidade, mas vou deixar cair a opacidade para 77%. É isso. E eu vou clicar em Ok. Agora você pode ver alguma coisa interessante. É como se a imagem também estivesse lá. E em cima dessa imagem, o gradiente também está lá. Agora vamos remover essa cor de fundo dessa parte específica que é esse cabeçalho. Então, vou apenas vir aqui e clicarei em redefinir. E é ilegal como podemos jogar com a opção de fundo na aparência. Não é interessante? É aqui que vamos encerrar este vídeo. E no próximo vídeo, veremos a opção de bordas que aparece. Então, vejo você no próximo vídeo. 9. Borda: Neste vídeo, aprenderemos sobre as fronteiras. Portanto, essas são as fronteiras logo abaixo do plano de fundo, temos as opções de bordas. Vamos ver exatamente como as fronteiras funcionam. Para isso, o que vou fazer, selecionarei este texto. Este é um parágrafo nesta Galeria do Lightbox aqui e selecione este parágrafo. Há poucas caixas aqui. E em cada caixa que são 11 linhas que são destacadas. E outras três linhas são meio difusas. O que exatamente isso significa? Isso significa que quando você clicará nesta caixa, ela só desistirá de borda, borda superior. Ele só aplicará uma borda superior. Se você clicar nesta caixa, ela aplicará uma borda inferior. Se você clicar nisso, ele aplicará uma borda esquerda. Se você se inscreveu, se você clicar nisso, ele aplicará a borda direita. E se você se inscrever no centro, ele dará borda ao oócito. Então, na parte inferior, temos duas opções. Se você clicar nessa área específica, é como raio de borda. Ele criará, dará a flexibilidade para criar uma fronteira redonda envelhecida. E essa opção criará raio de fronteira individual. Raio fronteiriço individual. Significa que se você não fosse fazer nossa idade de solo apenas no canto superior direito, então você pode apenas dar isso por volta dos dois anos, o canto superior direito e todas as três outras fronteiras serão h. Vamos ver um por um. E também veremos a cor dos estilos. Acho que, a partir de agora, você entendeu exatamente como a cor funciona. E raio que você pode ver. Quero dizer, basta clicar em Todas as bordas todo o ano e depois darei uma cor a ela, talvez cor vermelha. E o estilo do padrão, vou pegar dois sólidos. Assim que eu levar o estilo para sólido, você pode ver que é uma borda vermelha ali. Agora vamos dizer que eu só quero uma borda na parte superior deste parágrafo ou na parte inferior. Então, o que eu tenho que fazer é criar, vou clicar em redefinir tudo. Vou clicar no topo da borda. Chegarei ao estilo e selecionarei um estilo sólido. Vou mudar a cor. É isso. Agora você pode ver que temos uma borda superior para o parágrafo específico. Digamos que eu queira o fundo da borda também, o que vou fazer, vou clicar na parte inferior da borda. Vou novamente para o estilo e clicarei em Solid, e darei uma cor. Também posso dar uma cor diferente. Por exemplo, estou dando essa cor índigo e borda à esquerda também quero, selecionarei a borda esquerda. Vou dividir em sólido e darei alguma outra cor, talvez essa cor azul, qualquer coisa. Sei que isso não parece bom, mas estou fazendo isso apenas para o propósito de exemplo. Então, agora o que podemos fazer é como digamos que eu quero aumentar o veredicto da fronteira superior. Novamente, selecione a borda superior. Depois que a borda superior estiver selecionada, você poderá ver as configurações como cor sólida e vermelha. E o veredicto da borda superior, aumentaremos a largura. Isso é tudo o que vamos aumentar a largura. Digamos que a largura, vamos mantê-la em 15 pixels. Agora podemos mudar o estilo também. Então, vamos ver o estilo um por um. Veremos o estilo. O primeiro é o padrão. O padrão não é nada parecido com nenhum. Então temos sólidos, depois corrigimos. Podemos ver que o tracejado está lá. Então nós pontilhamos, depois dobramos, depois crescemos. Temos duas cores diferentes em uma linha. Então temos rígidos. Em seguida, insira, inicie. Temos inicial do que herdado, depois oculto, inicial herdado e oculto. Não sei exatamente como é, mas eles nunca aparecem. De um sólido até o início. Podemos usá-lo. Digamos que eu esteja usando essa cor vermelha sólida com algum extrovertido, ou a cor mudou. Na verdade, é rosa, não vermelho. Em seguida, clique na cor vermelha novamente. Ou talvez possamos pegar um azul como azul. Vou mudar os pixels e apenas removerei essas outras bordas. Dessa forma, podemos fazer isso. É assim que adicionamos a borda. Às vezes, o que fazemos, achamos que a borda inferior será boa. Então, vou apenas remover as funções do quadro superior e selecionar a placa superior. Clicarei em Padrão e selecionarei a borda inferior. E eu vou clicar em Solid e tirar uma cor azul. E eu vou tomar, e vou aumentar a altura. Posso usar um painel ou estilo também, posso usar um estilo de borda pontilhada também. Eu posso pegar uma linha dupla também. Então, a linha dupla também parece boa. Temos várias opções como cresceu, temos GRU também parece bom. Não é nada de ruim nisso. É como se fosse apenas um estilo, estilo de borda. Agora, isso é o que fizemos a partir de agora. Vimos todos os lados da borda e os resultados da placa central estão lá. Agora vamos clicar no botão Reset All aqui e no disco e basta aplicar todas as bordas com cor azul com uma cor sólida. E vamos aumentar um pouco o vert para que possamos vê-lo corretamente quando nos movemos para o raio. Esta opção de raio só vou clicar nesta opção de raio e você pode ver esse raio em pixels. Vamos aumentar isso e você pode ver que as fronteiras estão agora se movendo para bordas arredondadas. Você pode ver isso. Você pode vê-lo exatamente. Você pode vê-lo. As fronteiras agora não estão envelhecidas e são arredondadas. Agora, a mesma coisa acontece nessa opção também, mas funciona individualmente. Só vai torná-lo 0 agora. E eu vou clicar nesta outra opção que é fronteiras individuais. Assim que eu clicar nesse botão, você pode ver quatro opções aqui, que mostra o lado da era. Isso é superior esquerdo, superior direito, canto inferior direito, canto inferior esquerdo. Vamos começar com essa área. Agora você pode ver que podemos ter um design específico, digamos 32 pixels ano e 32 pixels lá. Parece bem diferente e bastante único também. Ou então, vou apenas selecioná-lo mais uma vez. E isso é 3232. E talvez este damos uma borda de slide como 19 lá e 19 anos. Temos um design diferente. Mas se formos com o 0 até essas duas opções, parece muito diferente e parece muito bom também. A partir daqui, você pode alterar a cor em qualquer ponto do tempo. Se você quiser essa cor amarela, você também pode usar essa cor amarela. É assim que a opção de borda funciona, e é assim que usaremos a opção de borda no estúdio Bootstrap. Agora, no próximo vídeo, seguiremos em frente e veremos a opção de sombra de caixa. Vejo você no próximo vídeo. 10. Sombra de caixa: Neste vídeo, vamos aprender sobre box-shadow. Para isso, o que vou fazer, vou rolar um pouco para baixo e aqui temos um formulário Fale conosco. Selecionarei este formulário, não selecionarei nenhum componente filho do formulário. Vou simplesmente selecionar o formulário. Você pode ver a seleção no painel de visão geral. Depois de selecionar o Formulário, venha para a opção box-shadow e você verá apenas um botão aqui que é adicionado. Mas quando você clica em Adicionar, você terá várias opções. Clicaremos em Adicionar. Em seguida, a primeira opção é invertida. Esta opção veremos no final. A segunda opção é a cor. Então, novamente, como muitas vezes agora você entendeu como exatamente a cor funciona. Portanto, esta é a opção de cor. Então temos x e y. Por padrão, os x e y estão em 0 pixels. Então, o que faremos, apenas aumentaremos a distância, induziremos os pixels, levaremos a talvez 14 pixels. Você está em exposição no eixo x, vamos mover a sombra, 14 pixels, positiva em um lado positivo. E eixo y, moveremos a sombra e pixels no lado positivo. Ele não tinha pixels. Agora, como parte bootstrap Studio, temos uma sombra de caixa, que está no eixo x. Não é lado positivo 14 pixels e eixo y não é lado positivo dez pixels. Mas se virmos praticamente a sombra deve ser um pouco desfocada e tem uma propagação também. E o Bootstrap Studio nos dá a opção de desfocar e espalhar. Do borrão, o que podemos fazer é aumentar o desfoque. E haverá bom. Aumentamos o desfoque e também podemos aumentar o spread. Mas se aumentarmos o spread, parece muito estranho para esse exemplo em particular. Mas talvez no seu caso em alguma outra situação, a opção espiritual funcione absolutamente bem. Para este exemplo, manterei o spread em 0. E também quero que minha cor deva, a cor da sombra não deve ser tão escura. O que vou fazer, chegarei à cor e vou pegar uma cor diferente, que é como uma espécie de sombra atualmente. Sim. Lá vamos nós. Gosto dessa cor. Este é o RGB 1198198198. Basta clicar em Selecionar. É isso. Esta é a sombra da caixa. Agora, no próximo vídeo, veremos sombra de texto. E para isso, temos que selecionar o próximo. Vejo você no próximo vídeo. 11. Sombra de Texto: Agosto na sombra da caixa está pronto. Agora estamos nos movendo para sombra de texto. Para isso. Definitivamente, selecionarei o texto, selecione o texto Fale Conosco. Venha para esta opção de sombra tecnológica e eu clicarei em Adicionar. Agora você pode ver que as mesmas opções estão aqui. Somente a opção de spread não está lá. O que posso fazer é como, vou apenas vir aqui e selecionarei essa cor que é 198198 ou 100 sobre 97 também é boa para mim. Vou apenas clicar em Selecionar, e vou apenas aumentar o valor de x e y, mas não vou aumentar muito porque o pixel está bom nos eixos x e y e vou apenas aumentar a quantidade de desfoque. É isso. Essa opção em particular, como quatro pixels novamente, é boa para mim. É assim que a opção de sombra de texto funciona. Se você não quiser o desfoque, você pode mantê-lo como 0% também 0 pixels. Para mim, essa opção é muito boa. Mas sim, mais uma coisa que vou contar, gostaria de lhe dizer. Você pode adicionar múltiplos, sombra de caixa, adicionar várias sombras de texto, assim. Sombra técnica que você adicionou, se quiser adicionar mais para o mesmo elemento ou para o mesmo componente, você pode adicionar mais. A mesma coisa acontece com a sombra da caixa. Isso é tudo o que a sombra do texto está feita. Os resultados da Box-Shadow são feitos no vídeo anterior. No próximo vídeo, veremos a opção de transformação e, em seguida, o último veremos a opção de filtros e, em seguida, nossa seção de aparência está concluída. Vejo você no próximo vídeo para ver a transformação. 12. Transformação: Certo pessoal, neste vídeo vamos ver sobre o Transform. Enquanto aprendemos a transformar, o que faremos, abriremos um novo arquivo, chegaremos ao seu arquivo de recursos em arquivos BSS e você terá uma pasta que é hash para sublinhar a transformação. Basta abrir essa pasta e você encontrará um b como arquivo de design. Basta clicar duas vezes nesse arquivo. E haverá grupo neste arquivo de design pronto. Nesta imagem, entenderemos como exatamente a opção de transformação sob a aparência funciona. aparência, vamos rolar para baixo e encontraremos a opção chamada transformar aqui. Se todas as outras opções não estiverem visíveis para você, basta clicar nesta seta aqui. E é isso. Veremos as opções que existem em transformação. A primeira opção é prospectiva. Podemos mudar a perspectiva de uma imagem ou um componente ou o que quer que seja. Então nós traduzimos e, novamente, temos flecha aqui. Em seguida, podemos traduzir a seleção específica nos eixos x, y e z. Então temos rotação. Novamente, podemos girar uma seleção específica nos eixos x, y e z. Então temos escala XYZ e switch, temos XY. Então você deve ter notado ao longo do ano que temos três x aqui, seja, x, y e z. e sempre que o excesso que é zed eixo entrar na imagem, isso significa que ele tem um recurso 3D. Quando estou falando do nosso 3D, não é um 3D real. É como uma ilusão de 3D. Não estamos transformando a imagem em um formato 3D, mas é como ilusão. Não é um 3D real que faz você, ou que não é um 3D real, é a ilusão. Vamos começar a entender as opções em transformação. O primeiro é prospectivo. Se você fizer alguma alteração no potencial, não verá nenhuma alteração. A razão por trás disso a perspectiva está mudando. Mas como eu te disse, é só a ilusão. A ilusão não é visível na imagem plana. Então, vamos torná-lo padrão. Vou removê-lo. Isso será primeiro. Vou mostrar a opção de tradução. Traduzir nada mais é que apenas um movimento de uma seleção específica. Isso traduzirá a posição no eixo x. Traduzir Y está traduzindo a posição no eixo y. E agora, quando eu vou mover o eixo z, você não verá nenhuma mudança ao longo do ano. Quando queremos ver as mudanças do eixo zed, temos que fazer uma coisa. Temos que encontrar esse componente específico que é uma tag de imagem. Na verdade, é a tag de imagem. Esta tag de imagem está sob qual componente ou qual tag. Então, antes disso, o que vou fazer, vou fazer todas essas coisas para 0. Vamos fazê-lo como redefinir tudo. Eu selecionei essa imagem. Esta imagem está aqui. Podemos vê-lo no painel de visão geral. E essa imagem é uma criança desse devido em particular, porque dentro disso, esta tag de imagem está. Então eu posso mostrar a vocês se eu recolher isso, podemos ver que a tag de imagem está dentro dessa tag div. Na opção de transformação, vou rolar para baixo até a última opção preservada em 3D, e vou ativar essa opção em c. Eu queria fazer as alterações nessa imagem no espaço 3D, ok, 3 Espaço D no eixo zado central, quero fazer as alterações na imagem no eixo zed. Para fazer as alterações nessa imagem no eixo z, tenho que dizer ao Bootstrap que esta imagem está dentro dessa div, e essa div é aparente e essa imagem é uma criança. Sempre que eu quiser fazer alterações, tenho que me certificar de que o pai seja convertido para preservar o espaço 3D. Agora, o bootstrap studio sabe que essa div está no espaço 3D. Agora, o que vou fazer, vou pegar essa imagem em um lado ascendente. Você pode ver isso pelo nome do autor, setembro, alguma data é o solo deles. Certifique-se de que essa imagem seja sobre isso. E por que neste texto estou fazendo isso. Por que eu não estou fazendo neste texto em particular. A razão por trás disso é que esse texto está nesta linha, e essa linha não está no espaço 3D. Isso não está preservando nenhum espaço 3D. Então nós, é por isso que não estamos fazendo nesta imagem. E o segundo motivo é que essa imagem está dentro dessa div. Não há relação entre essa div e essa linha, certo? E este texto que está oculto agora, esse texto também está dentro dessa div. Portanto, toda a div está preservando o espaço 3D. Este parágrafo também está dentro do espaço 3D. Essa é a razão pela qual estou tomando esse exemplo. Estou tentando explicá-lo apenas com esse texto. A imagem é, oh, você está sobrepondo esse texto em particular. Agora, vamos vir você. É aqui que queremos fazer gênio, certo? Então, se eu levá-lo para o lado positivo, ele está vindo para o verde. Isso significa que está saindo, mas não podemos vê-lo. Por quê? Porque não há nada para ver. Mas se eu levá-lo para o lado negativo, agora você pode ver que o nome do autor está lá. Como esta é uma imagem que está dentro desta div, estamos fazendo as mudanças e agora mudamos a posição dessa imagem no eixo z. Então, podemos ver esse texto. É visível quando pegamos essa imagem no espaço negativo. E então esse texto está na frente. Agora, se eu pegar essa imagem no lado positivo, a imagem na frente e o texto estão por trás dessa imagem. mesma coisa. Mais uma vez vou te mostrar com este exemplo. Esta imagem, imagem específica, está dentro desta tag de figura. E o pai dessa tag em particular é essa div. Novamente, dentro desta div, todos esses textos estão lá. Ok, então vou selecionar esta opção aqui e excluirei essa legenda. Vou apenas selecionar essa div. E agora o que eu tenho que fazer 0s, vou descer e vou verificar esta opção em que está preservado em 3D. Agora isso está no espaço 3D e todo o texto dentro desta div está no espaço 3D. Selecione esta imagem. E o que vou fazer, vou traduzir o eixo y, então agora está sobreposto. E agora vou transformá-lo em z. Então você pode ver, é isso. Então você pode ver o texto aqui. Agora é um negativo, então o texto fica visível. E assim que eu levá-lo para o lado positivo, o texto não fica visível. Agora. É assim que o espaço 3D anda. Esta é uma tradução no eixo zed. Agora vamos ver a rotação. Rotação é, como o nome sugerido, você pode girar nos eixos x, y e z. Agora vou mostrar a relação entre a rotação e o prospectivo. Vamos girar essa imagem no eixo x. Basta girar ligeiramente essa imagem como 33 graus ou algo assim, ou talvez mais. Vamos até 50 graus. Não é possível ver essa imagem, mas você verá que essa imagem não está girada. É como apertar porque as bordas permanecem parecem que apenas a imagem está parecendo uma imagem apertada. Agora a verdadeira magia vem quando eu vou mudar a perspectiva. Vamos mudá-lo um pouco. Lá vamos nós. Agora você pode ver que a imagem está realmente girada. Isso nos permite trazer o potencial nessa imagem em particular. Agora, se eu mudar a rotação, podemos ver que a imagem está girando. É assim que a opção funciona. Agora você pode ver que esta imagem está na frente. É por isso que o texto não está visível. Então, vamos tirar essa imagem. Ano em que o texto está corretamente visível. Podemos girá-lo mais. Podemos alterar a opção em potencial também. Da mesma forma, podemos girá-lo no eixo y e, da mesma forma, podemos girá-lo no eixo z e posso ver a rotação no eixo z. Agora você pode ver a rotação no eixo y. Você pode ver a rotação no eixo x. Vou redefinir isso. Todas as opções, exceto o eixo x. Deixe-o estar nesta posição particular, e o potencial estará em algum lugar como este. Agora parece que podemos fazer isso com escala. Podemos dimensioná-lo no eixo x, eixo y e eixo z. Novamente, a escala no eixo zed não está visível. mesma coisa. Podemos apertar, apertar x, espremer em y, e lá vamos nós. Novamente, tornarei essa opção padrão. Agora, essa é a opção chamada origem de transformação. Isso está diretamente relacionado a todas as opções. Na origem da transformação. Temos parte superior, inferior, esquerda, direita e centro. O que exatamente isso significa? Primeira coisa que vou mostrar-lhe em rotação se eu selecionar e eu estiver girando isso. Portanto, essa imagem está girando do centro. Este é o ponto central e está girando a partir daí. Agora, se eu levá-lo ao topo, agora se eu girar, você entenderá que o topo da imagem está fixo e está girando de cima. Este é o uso da origem da transformação. Da mesma forma, se eu fizer o fundo, então a rotação começará de baixo. A parte inferior é fixa e a rotação é da parte inferior. Da mesma forma, esquerda, direita e centro funcionam na cena. É assim que a opção de transformação funciona, e podemos fazer isso qualquer coisa a partir dela. Isso é tudo para este vídeo, a opção de transformação está pronta. E no próximo vídeo veremos sobre os filtros. 13. Filtros: Neste vídeo, vamos ver filtros. Filtros é a última opção na epiderme. A primeira opção é a opacidade. Então, vamos ver a opacidade para nós. Então, o que vou fazer, selecionarei o formulário, todo o formulário aqui. Depois de selecionar o formulário e quaisquer alterações que eu fizer, ele será aplicável a todos os componentes ou a todos os elementos que estão dentro deste formulário. O que todas as coisas estão dentro do formulário? Se eu recolher isso, você pode ver este texto. Fale Conosco texto, este texto de entrada, depois esta entrada de e-mail, depois a área de texto e os botões estão todos dentro deste formulário. Quaisquer que sejam as alterações que eu vou fazer neste formulário, os componentes são os elementos que estão dentro do formulário também serão afetados. Opacidade. Se eu recusar a opacidade, você pode ver que a opacidade está mudando. Sim. Certo. Feito, está feito. Opacidade, sim, está feito. Agora. A segunda opção está desfocada. Agora, se você mudar ou aumentar o desfoque agora você pode ver que é Bird. Sim, é isso. Cavando de volta para 0 ou talvez eu clique em redefinir tudo. Agora brilho. Sim, você pode alterar o brilho dele ou aumentar ou diminuir o brilho. Sim, isso é tudo. O brilho também é feito. Em seguida, contrastes, contraste. Você pode alterar o contraste desse componente específico. Então você tem tons de cinza. Escala de cinza vou mostrar a você em uma imagem. Selecione esta imagem. Como você pode ver, esta é uma imagem colorida. Qual imagem é mais colorida do que essa? Ok, essa imagem como se tivéssemos azul e algumas cores estão mortas. Então, selecionarei essa imagem e aumentarei o valor da escala de cinza. E você pode ver que a imagem começará a girar como uma imagem em preto e branco. Ok, então esta é a opção de cinza. Você me pedirá apenas para mudar a cor de uma imagem em particular. Temos essa opção. Então, sim, temos essa opção, mas VK e a usamos de uma maneira diferente, em um nível diferente. Muito em breve você saberá exatamente como vamos usar isso. Esta é uma escala de cinza e então podemos aumentar a UE, também os humanos, como eu lhe disse, a cor, as misturas brancas. Você pode ver os comprimentos de onda dos alelos mudando, a tonalidade da cor mudando. Em seguida, inverta, podemos mudar. Podemos inverter a cor. Agora não é um negativo, não como se as câmeras mais antigas tivessem esse negativo, certo? Esse é o estado dessa imagem. Agora, se tomarmos a opção interna 200 por cento, a opção que a imagem será exibida neste formulário específico. Então temos saturação. Podemos alterar o nível de saturação da imagem. Agora, a última opção é a RCP. Cpr é um modo de cor que dá um pouco de cor quente, não exatamente cor quente, mas em uma espécie de tipo colorido da velha escola. E vou te mostrar como exatamente é. Basta aumentar isso. E você pode ver que a cor foi alterada. Eu posso mostrar a você nesta imagem também aumentar a sépia. Lá vamos nós. Assim, as cores são fixas e os esquemas de cores na verdade, a paleta de cores para a cor sépia é fixa. E mudou o esquema de cores completo para este esquema de pilares do CPM. É assim que os filtros funcionam e podemos brincar com isso. Podemos fazer qualquer coisa com ele. Também podemos usar com diferentes opções, diferentes permanentes são permutações e combinações. E, finalmente, sairemos para uma saída específica em que você e eu gostamos quando estivermos dispostos a fazer isso muito em breve nos vídeos posteriores, partir de agora, vou encerrar este vídeo aqui. As opções de filtros são feitas e todas as opções nos painéis de aparência estão feitas. Cobrimos todas as opções no painel de aparência. Em suma, o painel de aparência está completamente pronto. Agora, na próxima seção, começaremos a entender as opções e como exatamente as opções funcionam. A única diferença entre as evidências e as opções IIS, os restos Appian parecem não importa qual componente você está selecionando. Mas nas opções, as opções dentro do painel de opções, as opções dentro do painel de opções mudam com base nos componentes. Não completamente. Poucas opções permanecem parecidas, mas com base no componente que você está selecionando, algumas das opções vêm e algumas das metas de opções. Portanto, dependendo do componente ou elemento que está selecionando as opções dentro do painel de opções, as alterações. Vamos ver isso na próxima seção. Então, vejo você na próxima seção. 14. Converter BS4 para BS5: Ok, então antes de avançar o que faremos agora este projeto está atualmente no Bootstrap 4.6.2. No Bootstrap cinco, existem poucas opções adicionais? O que faremos, converteremos este projeto do Bootstrap 4.6.2 para bootstrap cinco. Este é o nome do projeto que você pode ver aqui. E no final você pode ver uma marca de estrela. Essa marca estrela indica que o projeto ainda não foi salvo. Ok, até agora que o que faremos primeiro, vamos salvar o projeto. Agora a marca da estrela se foi, e agora temos que converter o projeto. Por isso, é muito fácil. Você não precisa fazer nada. Bootstrap Studio fará todas as coisas por você. Você não precisa fazer nenhum tipo de trabalho sujo. Vamos ver exatamente como vamos converter o projeto do Bootstrap 4.6 para o bootstrap F5. Clique em Arquivo e, em seguida, basta clicar em Converter para bootstrap cinco. É isso. Depois de clicar nisso, você receberá uma janela pop-up informando que essa ferramenta criará novo design BS, copiará tudo e recriará sua página com o Bootstrap cinco componentes, tudo está bom. Não vamos converter este projeto específico para bootstrap cinco projetos em vez disso, que bootstraps hoje faremos bootstrap Studio vai criar um novo projeto completo com tudo isso informações dentro do novo projeto. E esse projeto em particular será convertido em Bootstrap cinco. Portanto, esse projeto permanecerá o mesmo que é. Isso não é Bootstrap 4.6 e um novo projeto vai se tornar, em vez de, em vez de converter o mesmo projeto, ok, então o que eu vou fazer, vou apenas clicar em converter esse sinal aqui você pode ver que este é o nosso projeto antigo que está começando, e este é o nosso novo projeto que está começando entre parênteses, bootstrap F5. vez, você tem uma marca de estrela aqui. Isso significa que você precisa salvar o projeto. Haverá algum leve gênio como perdemos a cor dessa área em particular aqui, e perdemos a decoração e todas essas coisas. Por quê? Porque essa opção em particular agora é atualizada nesta versão específica. Ok, então agora o que faremos, vamos salvar este projeto e começaremos a trabalhar no novo projeto que é Bootstrap cinco. Basta clicar em Salvar. Agora vou fechar esta versão antiga. E depois disso, vamos começar todas as coisas no projeto Bootstrap cinco. Na próxima seção, aprenderemos tudo sobre o saldo de opções. Então, vejo você na próxima seção, no próximo vídeo. 15. Opção de texto: Acho que, a partir desta seção ou deste vídeo, estaremos aprendendo tudo sobre o painel de opções. Vamos começar sem perder mais tempo. Diretamente, selecionarei esta seção. Vamos pular para o painel Opções e veremos como exatamente o painel de opções fornece a opção de acordo com os componentes. Então, ele clicará no painel Opções. Esta é a primeira opção que existe, ou seja, a opção de texto. Em seguida, temos uma dica de ferramenta de decoração do que resposta para exibi-la e flexbox e acessibilidade. Nisso, o flexbox é muito importante e é muito útil. Usaremos essa opção Flexbox na maioria das vezes. Vamos começar com a primeira opção que é a opção de texto. Na opção de texto, temos várias opções. Há alinhamento, cor, transformação, espaçamento mono, sem rap e todas as coisas próximas. Você notará isso na opção de cor que não possui ferramenta de seletor de cores. Em vez disso, temos alguma cor predefinida dada pelo estúdio Bootstrap. Usaremos cores predefinidas pelo estúdio Bootstrap no painel Opções. E se quisermos uma cor específica naquele momento, temos que ir para o painel de aparência. Vamos começar com o alinhamento. Em alinhamento, eu tenho essas opções que são iniciadas, então este é o centro, e este é o nome do alinhamento alterado nesta versão específica, bootstrap cinco versão. E o início significa que é um alinhamento à esquerda, o centro é obviamente uma linha central e o fim é o alinhamento certo. Agora, se eu clicar neste ícone específico ali, é o ícone de seta. Se eu clicar nisso, receberei alguns tamanhos de tela. Ao longo dos anos, há SM, MMD, LG, Excel, Excel duplo. Exatamente. Vimos isso, vimos isso antes. Este é duplo XL, que é extra, extra grande. Então este é o Excel que é extra grande. Esta é a LG, este é o Md, isso é pequeno e extra pequeno. Extra pequeno não existe. Ou seja o que for que faremos no pequeno SM, será considerado como o comando extra pequeno, extra pequeno também. Então, por que exatamente essas opções existem? Nós lhe diremos o que exatamente é. Essa opção de alinhamento está lá e você pode ver três opções aqui. Isso é como um comando universal. Olhe para o comando universal no sentido, se você fizer alguma alteração nesta opção específica que esteja na frente do alinhamento, na frente da chave de alinhamento, temos esse valor. Esse é o valor universal. Mas se você fizer alguma alteração no tamanho da tela, quando o usuário navegar pelo site no tamanho específico da tela, eles estarão recebendo. Apenas esse alinhamento específico. Deixe-me mostrar exatamente como é, ok, então antes disso, perdemos a cor deste título e deste parágrafo. Vamos avançar para a cor. O que exatamente é a cor. Como eu disse, temos cores predefinidas que, que o estúdio Bootstrap está nos dando. Seja qual for a cor que estou passando, aplicada à seção. Todos os textos que estão dentro da seção terão a mesma cor. Ok, não individualmente, tudo agora temos esse título e este parágrafo. São textos, certo? Exceto esses botões. Seja qual for o texto dentro do botão, ele não será afetado porque tem um comando especial para isso. Este cabeçalho está morto, e então este parágrafo está lá. Ok, então estou selecionando esta seção que é um padrão para todos os componentes que estão dentro da seção. E vou mudar a cor. Vamos mudá-lo para aviso. O aviso é de cor amarela. Vamos sênior para o aquecimento. É isso. Agora você tem uma cor amarela para o texto. É útil quando você deseja alterar a cor de toda a seção ou o que quer que seja, componente inteiro, qualquer texto que esteja lá dentro da seção ou componente, você pode alterar o texto inteiro em apenas um clique. Agora, vamos para o alinhamento de volta. Porque agora podemos ver o texto. Você seleciona esse texto de cabeçalho e, em seguida, eu tenho uma opção diferente ou você nesse alinhamento, você pode ver que não há nada selecionado. Mas ainda assim o texto não é o formato central, o alinhamento central, mesmo o parágrafo não é um alinhamento central. Por que exatamente essa facilidade sem selecionar nenhuma opção, por que exatamente esse título e este parágrafo, ele não centralizou o alinhamento. É muito simples e talvez você tenha conseguido também. A razão por trás disso é componente ou elemento de cabeçalho individual tem um alinhamento central. Vamos ver isso se eu clicar no cabeçalho. Agora você pode ver no alinhamento, o alinhamento universal está definido para centralizar. Certo? Essa é a razão pela qual, se selecionarmos esta seção, não é nada selecionado, mas ainda é central porque o componente individual é selecionado como um alinhamento central, talvez isso pode confundi-lo, mas mantenha o ritmo. À medida que avançamos, você entenderá exatamente o que é. Assim que eu selecionei o cabeçalho, elemento de cabeçalho, você pode ver quando uma opção adicional aparece aqui que é a opção de cabeçalho. tipo de cabeçalho é talvez você tenha ouvido, se você souber HTML, então você já ouviu falar sobre tags de cabeçalho, como cabeçalhos começa a partir de H1, H2, H3, H4, H5 e H6. H1, H6 são os títulos. Esse é apenas o número aqui. Agora, qual número está selecionado para ser selecionado. Isso significa que este é um título para o cabeçalho 123456. Estes são os títulos que são de um a seis NADH. Outro monitor, a tela é como monitores de um a cinco. Estão lá. Na verdade, deve ser seis. Isso vai puxar isso. Sim, ok. Então, seis estão mortos. Então, se você clicar em um, poderá ver o tamanho do texto aumentado. Isso é exibir um. Exibe seis que temos. E se você fechar, isso é padrão. Esta é a opção que está vindo à sua frente quando selecionamos a tag de cabeçalho. Agora, se selecionarmos a tag de parágrafo que, em vez do H1, H2, H3, você obterá a opção de parágrafo. Uma opção estará lá dentro da opção de parágrafo que é lead. Se você clicar nisso, verá que o tamanho é aumentado, mas o estrangeiro também é alterado. Agora veja o que exatamente está acontecendo. Você está no Editor de Texto. Você pode ver este parágrafo, existe uma tag de parágrafo, é que dentro da tag temos classe e classe é líder. Centralizado no texto. O centro de texto não passa de essa opção que é alinhamento. Então estilo e seja o que for, então temos algo aqui e temos esse texto para o que está escrito dentro disso. E, em seguida, a tag de fechamento do parágrafo. Muito código já foi escrito. Então, veremos isso no meio. Apenas colapse isso. Agora vamos ver a opção de alinhamento. Se eu selecionar esse cabeçalho e você puder ver o alinhamento, a união ou o alinhamento da célula será central. Agora o que vou fazer, direi ao estúdio Bootstrap, que é sempre que o tamanho da tela é MD e acima do mar, era assim. Somente se você mudar alguma coisa aqui, a corrente obtém será aplicável a todos os tamanhos de tela acima. Mas o tamanho inferior da tela permanecerá o mesmo. Significa o que quer que você mude para o tamanho da tela MD, se eu mudar o alinhamento para começar em MD, tudo o que precede, ou seja, o eixo duplo LG Excellent obterá apenas o alinhamento inicial. Vamos ver exatamente como é do MD, vou clicar em Iniciar, onde exatamente estamos agora estamos no Excel. Então, definitivamente, uma vez que eu clico nisso, as alterações ficarão visíveis neste tamanho de tela específico. Além disso, basta clicar em Iniciar e pronto. Está na posição inicial. Mas no SM, as PME devem estar no centro. Sm significa pequeno e acima do que é pequeno? Pequeno é seu menor que um menino é o quê? Imediatamente o MD. Então, somente no tamanho da tela pequena, o alinhamento será central. Vamos ver. Se eu clicar em pequeno, você pode ver que o alinhamento é central. E assim que clico em MD, o alinhamento é para o início. Vamos dizer ao Bootstrap studio que sempre que estiver na LGN sobre ele deve ser central. Novamente, se eu vier para a LG, é incentivo. E todos os itens acima. Ele, novamente, estará no centro. E digamos que se o tamanho da tela é excelente acima, mas não há nada acima do Excel. O Excel é o último tamanho. Sempre que for um XL, jim o alinhamento T2. E agora estamos dentro, e o que fizemos foi apenas pelo Excel, não demos nada. Então, o que será preciso, vai levar da LG LGN sobre tudo bem, nada é Bootstrap vai entender que eu tenho que pegar o alinhamento da LG apenas, então LG e acima. E, em seguida, o Excel novamente, ele tem um valor diferente. Então, isso mostrará isso. Vamos ver exatamente como ele se parece no código. Basta retirar o editor de texto e você pode ver que a tag H2 está aqui. Centro de texto. Essa é a opção universal que existe. Ele está mostrando centro de texto e texto SM, PME pequenas, o que é pequeno, menor contra o centro. Portanto, está afirmando que o texto pequeno está centralizado. Então, a mídia de texto é iniciada. Então isso é Md corrigido, MD está começando, sim. Depois, envie um texto para LG center. Lg é o centro. Então, diretamente, temos duplo XL. Então texto Excel, este é o texto externo é, e é assim que o Bootstrap pseudo escreve o código para você. Digamos que se eu remover este Excel, você pode ver aqui, ficar de olho aqui. Este é o texto do Excel, e eu apenas removerei isso. E imediatamente ele removerá o código para você. O estúdio bootstrap está escrevendo o código para você. Você só precisa clicar aqui e ali, arrastar e soltar e todas as coisas que novamente soltam e todas as coisas estão dentro, isso entra em colapso novamente. É assim que essa opção funciona de alinhamento. E depois disso, temos cores novamente, é o mesmo conjunto de cores ou suas cores predefinidas estão lá. Você pode selecionar qualquer cor a partir disso. Agora, a transformação é que sua transformação é minúscula, maiúscula e capitalização. Se eu clicar em minúsculas, todos os caracteres estarão em minúsculas. Se eu clicar em maiúsculas, todos os personagens serão maiúsculas. E se eu clicar em maiúsculas, a primeira letra da palavra será maiúscula. Da mesma forma acontecerá com o parágrafo. Se eu chegar à transformação e se eu clicar em maiúsculas, a primeira letra de cada palavra se tornará maiúscula. É assim que exatamente isso do que o espaçamento mono não é nada mas se você ativar o espaçamento mono, ele ficará assim, como o espaçamento mono do tipo de fonte da velha escola. Acabei de desligá-lo. Eu vou ativar essa opção sem envoltório nem aplicativo significa que não importa qual é a área do parágrafo, ele virá em uma linha reta. Mas o que acontece é que você pode ver a borda azul, contorno azul é que afirma que o parágrafo, este parágrafo em particular, tem essa área específica. Mas como nenhuma opção de envoltório está ativada, ele está mostrando que ele está cruzando o limite, na verdade, cruza a borda. Então, o que podemos fazer é como, se você não quiser que essa opção extra em particular saia da fronteira, isso significa que ela não deve ultrapassar o limite. O que podemos fazer é ativar essa opção um. Assim que ativarmos essa opção, ela virá assim. Três pontos. Significa que algo está mais nessa área específica. Você não precisaria selecionar a seção aqui. Você verá todas essas opções aqui. As mesmas opções estão lá. Mas agora, se você mudar alguma coisa aqui, ela será aplicável à seção e não aos textos individuais específicos. Para aplicar as alterações à área de texto individual ou ao elemento de texto, você precisa selecionar o texto e o limite e , em seguida, você pode alterá-lo. E digamos que eu tenha, estou selecionando este parágrafo agora e quero mudar a cor. Se eu mudar a cor para, digamos perigo, você pode mudá-la. Agora ele mudou. Portanto, esta é manter a opção de texto. Caminhe. Depois disso, estaremos procurando a opção de decoração no próximo vídeo. E eles poderiam a opção de ação é muito semelhante a todos os componentes. Ele não oferece algumas opções adicionais no meio. Se selecionarmos o parágrafo, a opção de parágrafo estará aqui. Se eu selecionar o cabeçalho, a opção de cabeçalho estará aqui. Então esse tipo de situação não entra. A decoração. A opção de decoração é apertada. Não há tais mudanças na opção de liquidação. No próximo vídeo, veremos as decorações. 16. Decorações: Vamos começar com decorações. Na decoração v tem quatro opções que sua borda, borda, cor, sombra e fundo. A primeira coisa, fronteira. poucas fronteiras definidas aqui. Estas não são as bordas que são como no painel de aparência. Essas fronteiras são diferentes, que as fronteiras são diferentes. Nessa borda você tem um controle específico, mas isso é uma coisa fixa. A primeira coisa é limitada por padrão. Não é nenhum. Essa é a área cruzada selecionada, que é padrão. Não há borda selecionada. Mostre um por um. Então, em primeiro lugar clicaremos nessa borda irregular. Se eu clicar na borda normal, agora você pode ver a borda está lá, você pode ver a borda branca. Existe borda branca? Por que a borda branca? Porque a aquarela é padrão. Sempre que estiver no painel Opções, se você selecionar a borda como qualquer, Selecione, selecione qualquer borda. E a cor é padrão. Isso significa que é uma cor branca. Agora vou clicar em Cor e contra algum conjunto de cores predefinido existe. Se eu clicar em perigo, se eu apenas selecionar esse cabeçalho específico, você poderá ver que a borda agora está selecionando essa borda mais uma vez. E agora o que vou fazer, selecionarei essa área específica que é arredondada. Isso significa que as idades serão arredondadas. Agora você pode ver que as bordas são arredondadas. Depois disso, a outra opção é circular a borda mesmo forma circular. A próxima opção é preenchida. Se eu clicar na opção de pílula, você pode ver agora que a borda está parecendo boa, muito boa. Mas apenas os cantos estão em forma de pílula e em forma de pílula. Agora vou selecionar esse cabeçalho de volta novamente. E agora vamos ver a opção de sombra. Se eu chegar à sombra, podemos ver pequenos, regulares, grandes. E se eu clicar em Regular, você pode ver que uma sombra está lá. Agora vamos mudar a cor de fundo dela. Selecionarei essa área e voltarei para a impedância. E eu vou apenas remover a cor de fundo daqui e apenas clicar em Redefinir e para que fique branco agora para que possamos ver a sombra e todas essas coisas. Se eu tiver removido a sombra, selecionarei esse cabeçalho. Se eu remover a sombra, vamos torná-la padrão. Você pode ver que a sombra não é isso. Você é especificamente quando aplicamos a sombra aqui. A sombra vem apenas na porção inferior. Não virá no ângulo que você quer. Se você quiser essa sombra em particular, você tem que ir para a Aparência. Se eu ligar a sombra como a sombra normal, apenas para ficar de olho na parte inferior deste título. Se eu apenas clicar no normal, você pode ver agora que a sombra está lá. É assim que a sombra funciona na declaração no painel Opções. E também tenho uma sombra grande, se eu clicar em grande, a área da sombra aumentará. Agora eu tenho um histórico também. Se eu clicar, se eu vier aqui e se eu clicar no plano de fundo, então se digamos que clique no aviso e você pode ver que o plano de fundo está aquecendo, mas não conseguimos ver esse texto. A razão por trás disso é que o texto também é um aviso. Vamos ver alguma outra cor. Vamos ver o primário. Agora você pode ver que o primário está lá, a borda é lida, o plano de fundo é primário e o texto está aquecendo. Vamos mudar isso. Vamos fazer isso avisar a borda. A cor da borda será avisada. As sombras são regulares, e o plano de fundo será novamente avisado. Então, a mesma cor estará lá. Na opção de cor do texto mudará a cor de aviso para talvez leve. Agora está parecendo bom, muito bom. Então, é assim que a decoração de texto funciona. Agora você tem a opção de gradiente também ao longo de um ano. Assim que você fornecer qualquer cor ao plano de fundo, você obterá essa opção de gradiente logo abaixo dela. O que exatamente gradiente é maior em sua perna, você não pode selecionar nenhuma cor que desejar. O que acontecerá? O que é esse aviso? A cor que você selecionou aviso, o gradiente virá em forma linear e será como uma cor clara na parte superior e a cor escura na parte inferior, ficará assim. Então, vou apenas ligar esse gradiente e você pode ver que uma leve cor clara está lá no topo. E a cor escura é que a cor de aviso original está em torno disso. Certo. Então eu vou mostrar a você em alguma cor diferente. Talvez não seja visível nessa cor. Então, vamos selecionar o escuro. Agora você pode ver que há uma cor clara existe? Vou apenas desligar isso. Você pode ver a diferença, gradiente, gradiente de, gradiente. Gradiente disso é exatamente como funciona o leilão de declaração. Você tem algumas fronteiras prontas ao longo de um ano. Então você tem uma cor de borda. Você tem a opção de sombra lá, então você tem um plano de fundo. Você pode alterar a cor de fundo que é a cor de fundo predefinida e, em seguida, você também pode ativar o gradiente. Isso é tudo neste vídeo, as opções de decoração estão feitas. E para qualquer componente na opção de decoração permanecerá o mesmo, ele não mudará. No próximo vídeo, veremos dicas de ferramentas. Então, vejo você no próximo vídeo. 17. Dicas de ferramentas: Neste vídeo, vamos aprender sobre dicas de ferramentas. Então, vamos clicar nesta dica de ferramenta aqui para expandir essa opção. Então, vamos clicar na dica de ferramenta. E dentro da dica de ferramenta, você encontrará uma opção que não é possível Dica de ferramenta. Mas quando você habilita a dica da ferramenta, você terá mais algumas opções. O que é exatamente a dica de ferramenta? Digamos que na visualização, se o usuário passar o ponteiro do mouse na área específica, informações extras virão para essa ferramenta específica chamada dica de ferramenta. Seja o que for que eu disse que não é definição de dica de ferramenta em geral, eu te disse. Ok, então vou ativar esta opção de dica de ferramenta e agora duas outras opções estão lá. Um deles é o posicionamento, onde exatamente o posicionamento da dica de ferramenta será e o título. Qual deve ser o título do título da dica de ferramenta no sentido de quais informações estarão chegando dentro do posicionamento da dica manterei no topo. E para esse título específico da dica de ferramenta, vamos digitar essa facilidade. Elemento de cabeçalho, VSS de cinco entre parênteses. Beta. Basta clicar em inserir quaisquer interesses, descobrir o que acontecerá na pré-visualização. A dica de ferramenta vai aparecer, mas você também vai aparecer, mas ela vai aparecer na área inferior em algum lugar aqui ou eles apenas pegarão o meu mais pontiagudo e eu vou segurá-lo aqui. Então ele está lá. Isso mostra que este é então o elemento de cabeçalho das ortografia ou errado. Vamos corrigir a ortografia. Este é um elemento de cabeçalho, e LEM, NP, elemento de cabeçalho. Ok, então como estão de volta? Portanto, este é um elemento de cabeçalho em BSS e BS phi Beta. Bss é Bootstrap studio e BS five 0s Bootstrap versão. Então eu acho que este é um cabeçalho e não deveria estar lá. É gramaticalmente errado. Então esse título ys o eliminado. É assim que a dica de ferramenta funciona. Agora podemos alterar o posicionamento também os posicionamentos são como parte superior, inferior, esquerda e direita. Você pode alterar o posicionamento da dica de ferramenta. Vamos ver a pré-visualização. E nessa pré-visualização você entenderá exatamente como isso funciona. Para obter a pré-visualização do site. O botão Visualizar mais fácil e uma seta estará lá, basta clicar nessa seta. A segunda opção é declarar como desativado, portanto, temos que habilitar essa opção. Então, basta clicar neste gatilho aqui, e agora você pode ver a visualização entre parênteses em que ele está ativado. Se você clicar em, ele mostrará apenas a visualização. Basta clicar em Visualizar. Agora está ligado, e agora vou clicar neste botão. Portanto, seu navegador da Web padrão será iniciado e ele me mostrará a pré-visualização. É assim que exatamente nosso site vai procurar. Acho que vou pegar meu ponteiro do mouse sobre esta área. E agora você pode ver que a dica de ferramenta é que este é um elemento de cabeçalho no BSS off BSS cinco beta. Vamos mudar o posicionamento. Se eu ganhasse a colocação para baixo. E novamente, se eu for lá no navegador sem atualizá-lo , ele já está atualizado. Vou pegar meu ponteiro do mouse aqui e você pode ver que a dica de ferramenta é que não há comprimento específico para a dica de ferramenta. Você pode digitar qualquer coisa na dica da ferramenta. Não há limite de caracteres específico para isso. Temos o posicionamento de y porque, como digamos, se eu estiver pairando o ponteiro do mouse sobre isso agora, o posicionamento está no fundo. E só porque o posicionamento é inferior, você não pode ver o parágrafo. Alguma área do parágrafo está escondida, digamos que no topo também temos algo melhor. O que podemos fazer é como podemos, podemos selecionar o posicionamento para a esquerda ou para a direita. Então, vamos selecionar o posicionamento certo. E agora, se eu voltar para o navegador mais uma vez, e se eu passar o ponteiro do mouse sobre isso agora você pode ver que o posicionamento está à direita. Agora, isso é o que é a dica de ferramenta e você pode criar qualquer coisa para nos fornecer informações específicas. Na maioria das vezes, dicas de ferramentas são usadas na área onde o ponto de interrogação está lá, você não sabe exatamente o que é. Então você apenas pega o ponto mais importante no ponto de interrogação e imediatamente quando informações adicionais saem daí, é isso que é a dica de ferramenta. Então, vamos encerrar este vídeo aqui. Portanto, a opção de dica de ferramenta também é coberta. Para entender o flexbox, temos que saber muito mais sobre a linha, coluna do bootstrap. Muitas coisas que temos que saber quando concluímos essa seção específica, quando poderemos criar um design completo. Depois disso, veremos exatamente o que exatamente o flexbox 0s, duas coisas que vamos cuidar de alguns vídeos, ou seja, resposta ao display e ao Flexbox. Essas duas opções veremos mais adiante em alguma outra seção. No próximo vídeo, veremos a opção chamada Acessibilidade. Vejo você no próximo vídeo. 18. Acessibilidade: Era uma semente LED, a opção de acessibilidade. Essa é a última opção no painel Opções. Vou clicar em Acessibilidade. E aqui você pode ver a visibilidade. E você tem duas opções visíveis e invisíveis. E a última opção é apenas a reprodução de tela. Então você tem que ativar isso sobre como exatamente ele funciona, eu vou te dizer. Então, vamos selecionar esse texto específico aqui. Após o projeto, temos esse texto e indivisibilidade. Se eu clicar em visível, ele ficará visível. Obviamente. Se eu clicar em invisível, o livro será invisível. Mas não está oculto. O componente, o elemento não está oculto. A visibilidade é invisível. Então isso significa que o texto está lá, mas é invisível. A segunda opção é gritada somente leitura. Quando você ativa a opção de leitura da tela, você pode ver que o parágrafo agora está oculto. O parágrafo agora está oculto, mas ainda está lá. Agora está em evento de leilão de sangramento grito. Se você ativar a visibilidade para visível, ela não ficará visível porque não é gritada somente leitura. Qual é o significado apenas por chumbo rastreado? Existem alguns sites projetados para pessoas cegas, mas podem ouvir. Existem tantos sites hoje em dia, existem navegadores também de tal forma que eles têm uma opção específica chamada tela de leitura. O texto para o qual está morto, que tem a opção de somente leitura na tela. O navegador lerá esse texto específico somente no site de notícias, você pode ver que é um arquivo de áudio orientado. Você pode simplesmente clicar na tela, lê-lo, começar a ler o texto. Não significa que ele tenha sido criado em parte o texto inteiro do site. É lida somente as bruxas de texto na tag chamada tela lida. A opção de leitura de tela é para que converta o conteúdo textual no formulário de áudio com a ajuda do suporte do navegador, que é chamado de opção de leitura gritada. E essa é a visibilidade, mas é isso que as opções de acessibilidade IIS. E estamos fechando a seção aqui e terminamos com as opções. No próximo vídeo, veremos a terceira e última opção no painel de evidências que é animação. Então, vamos começar a aprender essa emissão na próxima seção. 19. Animação Scroll: Oh, bom. A partir desta seção, vamos iniciar nosso painel de animação. Então este é o lugar onde estaremos animando nossos elementos, componentes. Para isso, o que eu fiz foi criar um pequeno projeto para isso. Você precisa acessar seus arquivos BSS. E nisso você encontrará uma terceira pasta chamada de animação. Dentro da animação, você encontrará esse arquivo de design que também é chamado de animação. Você precisa abrir esse arquivo. Depois de abrir esse arquivo, você obterá esse design no painel de animação agora, ele não está mostrando nenhum componente selecionado porque eu não selecionei nenhum componente sobre u. primeiro componente. Este é o painel de visão geral. E no painel de visão geral, você pode ver que há um contêiner. Este é um componente e temos dois elementos em dito que é elemento de cabeçalho e um elemento de parágrafo. Então temos rho, esta é uma classe, então podemos chamá-la como um componente neste estúdio de bootstrap. Dentro da linha temos várias colunas, temos coluna, coluna, coluna. Você pode ver que as colunas estão lá. Em cada coluna temos cartão. Você pode ver novamente em cada coluna que temos carrinho e cartão de insight. Temos essa imagem. Então temos mais um, um componente que é corpo com cicatrizes, em seguida, indo, indo. E dentro desse título temos link e parágrafos. Portanto, este é um ninho completamente bem estruturado de um componente. O que temos que fazer aqui é como se animássemos todas as cartas neste design específico. Então, primeiro selecionarei este cartão e vamos começar a entender nossa animação. Assim que eu selecionar este cartão agora você pode ver no painel de animação, você pode ver que uma opção está lá que é acionada. E se eu clicar nisso, você pode ver que três opções estão lá. Um é rolagem, um está pairando e outro é Laura. O que é cruel? Cruel significa rolagem. Esta é a rolagem da página. Isso é rolagem. Também podemos animar nossa página no pergaminho. Quando você rola a página, quaisquer componentes ou qualquer design que venha à sua frente, ela virá de forma animada. rigor é rolagem, depois o tipo é preenchido. Agora você pode ver assim que eu selecionar qualquer uma dessas opções é apenas rolar, passar o mouse e carregar. Você pode ver uma marca de estrela aqui. Isso significa que esse componente específico está limitado agora e, em seguida, temos tipos de animação. Se eu clicar nisso, podemos ver desaparecer, desaparecer , descer e todas essas coisas. Se eu clicar no feed, se você quiser ver exatamente como ele se parece, basta clicar em Play, então você pode ver exatamente como ele virá no navegador da Web. Você pode ver que ele aparece imediatamente. Se você ver com cuidado, você pode ver que a duração é muito menor para controlar a duração, temos a opção de duração. Se você clicar nisso, temos 50 MS. MS é milissegundos. Começa a partir de 50 e os múltiplos de 50, podemos ir até três mil. Três mil MSE é de três segundos. Se eu clicar em 3 mil e se eu clicar em jogar, e você pode ver que leva três segundos para chegar à sua frente. Assim, você pode fazer qualquer alteração. Selecione mil MS, significa 1 segundo. E se eu clicar em Play, você pode ver em 1 segundo, o carro vem à sua frente. Estes são os efeitos de rolagem. O que faremos, vamos descer e aplicaremos a animação de rolagem para isso para fotos ao longo dos anos, Há quatro fotos. O primeiro é isso, então vou abrir esta coluna. Selecionarei este cartão. Vou rolar e aumentarei a duração para 1 segundo. Parece que vou dar para o segundo. Mas aqui o que faremos, usaremos outro tipo se estiver desvanecendo. Então, vamos ver o zoom e a duração de 1 segundo. Vamos fazer o prato. Vamos ver exatamente como ele se parece. Oh, tudo bem. Então eu descerrei o terceiro. Selecionarei o pergaminho. Vamos dar outro como deslizar para cima. A duração será mais uma vez. E Lee, é assim que ele vai ficar lá. O último, o último, este rolo de cartão, vamos ver. Qualquer outro efeito é que o slide estava lá. Virar certo? E apenas jogue. Precisamos usar a duração para 1 segundo. Agora, Lee, ok, nós demos quatro tipos de animação diferentes para quatro cartões diferentes. Agora vamos ver a pré-visualização. Vou clicar no navegador. E agora, se rolarmos, você pode ver quando ele vem na visibilidade. Isso significa que este é o fim do navegador. Você está rolando para baixo e eu atualizarei isso para que a página seja recarregada para que a animação possa ser reproduzida mais uma vez. E se eu rolar agora, você pode ver que não há nada além assim que eu rolar um pouco mais, a animação está lá e agora você pode vê-la corretamente. Vamos fazer isso mais uma vez. Eu posso ver. Agora não está parecendo bom porque demos que todos os quatro cartões são animações diferentes, mas ficará bem se dermos o único tipo de animação a todos os cartões. Vamos dar o único tipo de animação como virado direto para todos. Vamos mudar o tipo dele. Escorregar certo? Selecione isso mais uma vez. Prática de flip. Se eu clicar em Jogar, posso ver, sim, todos estão tendo o mesmo tipo. Agora. Vamos atualizá-lo. Sim. Agora role para baixo, role, role para cima. Agora podemos ver novamente, novamente, isso está segurando um trabalho de animação de rolagem. Agora vamos ver as outras opções no pergaminho. Temos a opção de transtornos também, e temos a opção de atraso também. Atraso significa que podemos fazer um atraso nisso. Se eu jogar agora você pode ver que o atraso está lá. Então, imediatamente, não começará. Levará 250 milissegundos e depois começará. partir de agora, não o tornaremos nenhum. Reproduzir uma vez significa quando a animação é carregada. E mesmo depois disso, se o usuário rolar para cima e para baixo, a animação será reproduzida por apenas uma vez. Ele não jogará de novo e de novo. Mostraremos que você pode ver a animação. Agora, eu rolei para cima. Novamente, estou rolando para baixo animação está lá novamente contra rolagem para cima, contra rolar para baixo novamente. Você pode ver a animação. Mas vamos selecionar este primeiro, e eu clicarei em Jogar uma vez. Voltarei para o navegador. Agora ele jogou uma vez, role para cima, role para baixo. Você pode ver que isso permanece o mesmo, mas esses três cartões tinham a animação. Mais uma vez, vou mostrar a você rolar para cima, rolar para baixo. Agora você pode ver que a animação estava lá, mas isso não estava sendo reproduzido porque nós demos o comando a ela como jogo. Uma vez. Depois disso, temos mais uma opção chamada executar no celular. Isso significa que mesmo na tela do celular, a animação deve estar lá. É isso, nada mais. Essas são as opções na rolagem. Essa foi a animação de rolagem. No próximo vídeo, veremos a animação do mouse. Vejo você no próximo vídeo. 20. Pico de Animação: Vamos ver a animação do mouse agora. Vamos trabalhar nisso para cartão. Este é o primeiro cartão. Vou selecionar este Cartier. Agora selecione esse gatilho do mouse. Então, vou clicar em passar o mouse. Agora, temos limites do primeiro mundo. Então, vou clicar nos limites. E se eu clicar em jogar, esse efeito virá quando o usuário mouse sobre esse cartão específico. Temos flash também. Ele piscará assim, e então temos pulso. Então, virá assim. Vou ficar com pulso, sinta-se à vontade para conferir as outras opções também. Então, voltando para o navegador, agora se eu vier aqui e se eu passar o mouse, você pode ver sempre que o mais ponteiro é Howard, você pode ver essa animação. A única coisa é que você não pode aplicar todas as três animações de uma só vez. Para um único componente, você precisa usar apenas um. Isso é pulso e selecione novamente o mouse. E se eu selecionar qualquer outra coisa, agite e clique em. Você pode ver que a animação está lá. Mas vamos selecionar o pulso para todos os quatro deles. O carrinho chega ao painel Animação, mouse e volte para o botão de visualização. Agora você pode ver, sim, lá vamos nós. Isso foi passar o mouse e, novamente, você tem essa opção executada no celular. Isso significa que a animação também deve funcionar no celular. Isso é tudo. Você não verá nenhuma outra opção, como atraso e duração e tudo isso porque está corrigido, você só tem essas opções de menu em como um gatilho. No próximo vídeo, veremos o gatilho de animação de carregamento, e esse será o último vídeo desta seção. Então, vejo você no próximo vídeo. 21. Carga de Animação: Ok, então vamos começar com nosso Senhor. Vamos trabalhar neste cartão que está no topo. Então, basta clicar em Redefinir tudo que removerei a animação daqui. Selecionarei a opção de carregamento. Senhor significa que sempre que a página é carregada, qual animação deve vir na frente do usuário. Mais uma vez, temos essas opções que são lâmpadas de flash de rejeição. Todas essas opções estão lá. Vamos selecionar qualquer uma das opções daqui. Vamos selecionar os limites e clicar em Jogar. E você pode ver que quando a página é carregada, essa animação será reproduzida automaticamente por uma vez. Se você quiser jogar em loop, então também temos a opção para isso. Mas, para o loop, selecionaremos este parágrafo. Selecionando o parágrafo, selecionando o gatilho a ser carregado. Em seguida, vamos selecionar essa opção flash. Se eu clicar em Jogar, você poderá ver que a opção flash está lá. Se eu clicar em loop, essa animação será reproduzida em loop assim que a página for carregada. E a última opção é executada em dispositivos móveis. Isso significa que essa animação deve ser executada em dispositivos móveis. Mas vamos ver a pré-visualização aqui. A página é carregada e agora você pode ver a animação está sendo reproduzida em loop continuamente. Então vou atualizar isso e você pode ver, sim, você pode ver que esse efeito específico estava lá. Tudo isso está no painel de animação. Essas muitas animações você pode fazer por seus componentes, elementos, tags, seja lá o que for. Sinta-se à vontade para conferir todas as opções no painel de animação. E se você tiver alguma dúvida, deixe uma pergunta para mim e eu tentarei respondê-lo o mais rápido possível. Na maioria das vezes, respondo em 24 horas. Mas por causa de alguma situação diferente, posso levar mais tempo, mas ela responderá a você. Isso é certo. partir de agora, cobrimos todos esses três painéis e isso é painéis de aparência, painéis opções e painel de animações. Agora, não temos nada para ver muito mais nos painéis. Na próxima seção, vamos começar com algumas das tecnicalidades do Bootstrap. Vejo você no próximo vídeo da próxima seção. Tchau. 22. Entendendo a Linha e a Coluna: Agora vamos entender o que é o sistema de grade Bootstrap. sistema de grade Bootstrap é responsável por tornar o bootstrap um celular. Primeira resposta, a OMS enquadra um conteúdo de grade de dois componentes. Primeiro, facilitar a linha e a segunda é a coluna. Uma linha se dividiu em 12 grades e muda seu tamanho automaticamente de acordo com o tamanho do dispositivo. Digamos que tenhamos tomado uma linha e em que pegamos duas colunas. Ele será dividido automaticamente em duas partes, levando seis grades cada. Digamos que se não éramos duas colunas de dois tamanhos diferentes, perfazendo um total de 12 grades. O ano é o ano mágico. Podemos dizer a cada coluna que quantas grades ela pode levar. Digamos que na primeira coluna, precisamos de uma grande área em comparação com a outra. Então podemos dizer à primeira coluna para pegar oito grades. Em seguida, automaticamente a outra coluna tomará as quatro grades restantes, perfazendo seu total de 12 sistemas de grade. No caso de darmos notas Ed para a primeira coluna e seis grades para a segunda coluna. Em seguida, a segunda coluna virá abaixo da primeira coluna porque excedeu o total de 12 grades. Desta forma, podemos criar uma estrutura de coluna de linha perfeita. Isso você entenderá com mais detalhes quando começarmos a projetar o site no software bootstrap Studio. 23. Vamos Começar: Em vídeos anteriores, você aprendeu sobre o entendimento básico do estúdio Bootstrap. E o principal exercício aqui é que você viu bootstrap studio versão 5.6. Por alguns motivos, não consegui gravar vídeos. E agora depois disso, estaremos aprendendo no Bootstrap Studio 5.8. Não muito preocupado que eu não tenha sido tantas mudanças drásticas no estúdio Bootstrap. As mudanças são como a fixação de dólares menores por meio de opções adicionais, existem as quais veremos nos vídeos adicionais, porque a partir de agora estaremos trabalhando em projetos. Estaremos trabalhando em três projetos majoritariamente. Primeiro será um site básico normal de uma página. Em segundo lugar, estaremos criando um site onde você, como indivíduo pode iniciar um negócio de design de sites. Vou ensiná-lo a projetar seu próprio site, como integrar algumas coisas externas, como corrida de ingressos, online, bate-papo, e-mails oficiais, hospedagem do site e tudo isso. Finalmente, vou ensiná-lo a projetar um site do sistema LMS onde abordaremos ambas as seções, o usuário e o administrador terminam assim que você terminar o usuário e o administrador. E se você quisesse criar mais um módulo como instrumento, e será fácil para você fazê-lo sozinho sem perder muito tempo. Vamos começar. 24. Navbar do Projeto Um: Então, neste momento, você aprendeu sobre o básico do estúdio Bootstrap. E enquanto eu gravava esse vídeo, havia uma enorme lacuna no meio. Esta é a razão pela qual paramos no Virgin 5.6 e agora o bootstrap está na versão 5.8. Mas nada para se preocupar, não há uma grande mudança no software. As mudanças são, eles corrigiram, alguns pequenos bugs, melhoraram o desempenho do estúdio Bootstrap, e também mudaram alguma aparência e todas essas coisas. Vou mostrar-lhe isso primeiro e depois prosseguiremos mais. E poucas coisas que eles têm mudanças como eles adicionaram uma biblioteca de ícones do Bootstrap. E agora a versão Bootstrap que o framework Bootstrap agora é 5.1. A estrutura Bootstrap também foi atualizada. Sem perder muito tempo. Vamos começar diretamente e vamos ver o que vamos projetar neste vídeo à medida que começamos a projetar o site a partir desta seção, dois projetos estarão lá. Um deles é um design de site simples de uma página. O segundo projeto que vamos iniciar é um sistema LMS no qual veremos as extremidades admin e o final do usuário. Este tutorial em vídeo. Como você já sabe, queremos criar um novo design. Então, o que faremos, simplesmente clicaremos no novo design aqui e, em seguida, nomearemos esse design específico. Vou nomear isso como seu nome. Agora, a versão do bootstrap studio por padrão é a versão 5.1, e estamos bem com essa versão também. Por padrão, o temporário em branco selecionado, e é isso que queremos. Simplesmente clicaremos em Criar agora, design. Temos nossa página em branco à nossa frente. Antes disso, mostrarei exatamente o que vamos projetar e quais recursos vamos usar. O que você precisa fazer é ir para a pasta principal do curso BSS. Dentro disso, você encontrará arquivos BSS e, em seguida, você encontrará o quarto número de pastas que é hash para sublinhado currículo a. Na medida em que você encontrará este BSS retomar um design. Eu já projetei isso apenas para minha referência, estarei olhando para esse design e vou criá-lo novamente. E os recursos que usaremos facilmente na pasta de recursos. Então, essas são as imagens que vamos usar lá. Só vou levar isso aqui e selecionar todos os arrastar e soltar no estúdio Bootstrap. Então sete imagens foram importadas. E agora vou abrir o arquivo BSS sobre você, o currículo um ponto bss, eu o nomeei como currículo, mas não apareceu como um currículo. Um olhar, isso é o que vamos criar. Então, vamos apenas visualizar isso uma vez neste navegador. Mostre menos. Não quero isso. Isso é o que vamos projetar seu nome. Você pode colocar seu nome aqui. Portanto, teremos três seções nesta peça em particular, este é um site de uma página que continuará em casa e entrará em contato. Se você clicar em um quadro, você pode ver uma rolagem suave é que eles chegam à seção Sobre nós e eu vou clicar em Contato. Ele chegará ao contato, seção de contato, voltando para casa. Isso é o que vamos projetar. Haverá uma barra de navegação uma linha central, um componente central no meio onde você estará inserindo seu nome, o que eu faço imagem. Então três cartões estão lá, alguns ícones estão lá, a seção Nevada, depois galerias de fotos de combustível, então o formulário de contato está lá com este particular com todas essas informações de contato e todos essas coisas. E então temos um rodapé e sim, isso é tudo. Vamos começar a projetar este site muito rapidamente. Certo, voltando para o estúdio de bootstrap. Então, a primeira coisa que temos que fazer é importar nossa barra de navegação. Então vou digitar Nav ao longo do ano. A segunda opção é arrastar e soltar navbar dentro da tag body. Agora temos a barra de navegação. Selecione a barra de navegação agora, vá para Opções e desligue a opção fluida porque não queremos que o fluido esteja lá. Agora, na área da marca, você pode digitar seu nome. Vou apenas digitar seu nome ou suas três seções, o que queremos é a facilidade forçada para casa. O segundo que queremos é cerca de terceiro que não éramos. E é contato. Certo? Então, isso é tudo por enquanto. Vamos passo a passo. Neste vídeo, abordaremos apenas a seção Navbar. Agora esta casa sobre e entre em contato. Eu não quero que eu não quero no lado esquerdo, quero isso no lado direito. O que vou fazer, selecionarei a barra de navegação. Navbar está selecionado agora e qual área eu queria selecionar. Agora, eu queria selecionar esse nav. Depois de selecionar isso, agora você pode acessar as opções e você pode ver agora no alinhamento, selecionarei o alinhamento final. Então agora não é o fim. Na versão de cinco bootstrap, não o chamamos de esquerda, centro e direita. Nós o chamamos de Start, Center e end. Vou apenas clicar no final. E isso é o que queríamos, certo? Então isso é tudo que essa área em particular está feita. Antes de avançar. A primeira e mais importante coisa, a aparência do nosso site vem com a fonte adequada. O que vou fazer, selecionarei esta tag corporal, OER. E na seção aparência, irei até a seção de fontes e adicionarei uma fonte usando a família de fontes. A fonte que vou usar com facilidade. Este aqui. Vou apenas ativar essa opção e clicarei em Salvar. Isso é tudo. E então eu simplesmente selecionarei este formulário de você, essa fonte que vamos usar neste projeto específico. Ok, Seguindo em frente, vou apenas selecionar uma barra de navegação. Agora, diretamente navbar vou selecionar qual é o próximo componente imediatamente após o corpo. Agora irei para a seção de fundo e, na seção de cores, vou selecionar a cor branca e branca extrema. E vamos reduzir a opacidade para 80%. Você pode ver agora que é RGBA significa alfa e 0,8 é 80%. E isso é tudo o que vou clicar em Salvar. E agora a seção Navbar está pronta. Vou parar esse vídeo. E no próximo vídeo, veremos como projetar a próxima parte deste site. 25. Home Seção do Projeto Um: Neste vídeo, vamos avançar e estudaremos duas coisas novas no Bootstrap Studio. Uma delas é a edição de imagens usando software externo, e essa edição será conectada diretamente ao bootstrap studio. Vamos ver como podemos fazer isso. O que temos que fazer aqui é primeiro eu vou levar um DV aqui. Vamos apenas digitar div. Div vai tomar uma div e cair sobre esta tag corporal. Meu Ds é, você está agora, agora dentro desta div, eu vou pegar uma tag de imagem, então vou apenas digitar IMG e vou pegar essa tag de imagem e vou soltar toda essa tag do. Agora, a tag de imagem está aqui. E agora temos que fazer é colocar essa imagem número seis nesta área específica. Então, vou apenas clicar duas vezes aqui. Vou selecionar esta imagem e clicar em, OK. Agora, o que está acontecendo, OU, queremos uma imagem quadrada, mas a altura dessa imagem é muito grande. De forma tradicional, o que devemos fazer é importar a imagem no software de edição de imagens como o Photoshop quando afinidade ou qualquer software de edição de imagem lá. Temos que editar a imagem, exportar a imagem após a edição e importá-la novamente para o software Bootstrap Studio e, em seguida, usá-la. Mas agora temos um atalho neles. Vamos ver como fazer isso. Agora, o que vou fazer, irei para a opção Configuração. Vou ao editor externo e clicarei no editor de imagens. Agora, no meu sistema, tenho o GIMP. E o GIMP é um software completo de edição de imagens de código aberto. Essa é a razão pela qual estou usando esse software de edição de imagens. Para este tutorial específico, basta clicar neste editor padrão e clicarei no GIMP. Depois de terminar, vou clicar em Salvar. Depois disso, o que eu tenho que fazer é como, eu sei que usei essa imagem nessa área específica. Vou apenas selecionar isso e vou clicar duas vezes nessa imagem. O que acontecerá? Essa imagem será aberta automaticamente no meu software de edição de imagens. Agora, quaisquer que sejam as instruções lá, tenho que verificar as instruções por enquanto, vou mantê-lo como está e vou apenas clicar no conversor. Quando a conversão estiver lá, clicarei no botão Cortar aqui. E vou simplesmente arrastar meu mouse e vou simplesmente cortar essa imagem. Vou me certificar de que minha imagem E ao quadrado, então é 1000 por 1000. Vou digitar apenas milhares sobre o seu, e clicarei em Enter. Uma vez feito, vou clicar na ferramenta Seleção e a imagem será cortada. Agora. Agora tenho que exportar a imagem e é muito simples. Acabei de clicar no arquivo. Acabarei de vir sobre a opção Exportar ou sua exportação como. Agora esse DPG de seis pontos está lá. Selecionarei esta imagem e clicarei em Exportar. Vou clicar em Substituí-los. Depois disso, vou receber essa opção de caixa de diálogo. Basta clicar em Exportar ou você sabe, a caixa de diálogo de exportação desapareceu. E o que vou fazer, vou simplesmente voltar ao software bootstrap Studio. E agora você pode ver a imagem E está em quadrado. Agora é como 1000 pixels por 1000 pixels. Agora, basta clicar no ícone Exibir aqui, ou simplesmente ir para as opções. E dentro das opções de texto, a primeira opção é o alinhamento e clicarei no centro. Dessa forma, a imagem agora está centralizada alinhada. Agora, se eu clicar na imagem, volte para Aparência agora você pode ver a altura e a largura da imagem é de 1000 pixels por 1000 pixels. É muito rápido e muito fácil. Saiba o que vou fazer. Vou apenas digitar 500 pixels ou seu px e 500 pixels aqui. Que onde a imagem estará em 500 pixels por quatro pixels e esse é o tamanho de cada um que eu quero também, novamente, selecionarei esta imagem, voltarei para Opções, e agora vou procurar a opção de decoração. Na opção de declaração, você pode ver as bordas estão lá, e agora vou clicar na borda circular. Agora a imagem está na forma circular. Depois disso, vou apenas seguir uma direção. Vou colocar esse cabeçalho sobre essa tag de imagem. E vou digitar seu, seu nome. Vamos levá-lo em cores diferentes. Então, para isso, o que farei na busca, na opção de pesquisa de estúdio aqui, vou digitar span. Pegue o vão e eu vou cair dentro desta etiqueta de cabeçalho. E isso selecionará e eu vou digitar o nome. Preciso de um espaço entre isso. Então eu só virei aqui e vou cair, largar, largar a paz. Basta entrar, selecionar a extensão. E na opção de cor, temos que nos certificar de que estamos na opção de texto. Na opção de cor, vou apenas selecionar perigo ou posso selecionar qualquer cor nessa ordem se eu não fosse cores personalizadas ou apenas voltar à aparência e dessa cor estranha, posso selecionar qualquer cor que eu queria. Depois disso. Depois disso, vou pegar um parágrafo e vou colocá-lo entre a tag de cabeçalho e a tag de imagem. Vou apenas clicar duas vezes sobre isso e vou digitar o que faço. Isso é tudo. Agora essa porção está pronta. Agora vamos passar para a nova seção. Neste negócio, o que vou fazer, vou pegar o tipo de contêiner COND e ele deixará isso dentro desta tag div. Agora o contêiner está aqui. Eu vou pegar a linha e esta linha é sugerida, ou você poderia apenas seguir uma fila. Agora vou selecionar a linha, as colunas estão lá. Vou pegar esta coluna. Dentro desta coluna, o que eu vou fazer, vou pegar um cartão descarte dentro disso. E lá vamos nós. Temos uma legenda de título e todas essas coisas. Mas o que queremos, não queremos esses links aqui, então vou remover esses links de você. Vou procurar o ícone agora. O ícone está lá e eu vou soltar esse ícone dentro do corpo do cartão. Vou clicar duas vezes neste ícone. E agora você pode ver que temos muitas bibliotecas de ícones sobre u. Temos bootstraps, vocês também ícones? Agora vou apenas digitar o verbo e esta opção da web, o ícone da web está lá e selecionarei este ícone da web. Voltando para a Aparência, vou rolar para baixo e preciso aumentar o tamanho da fonte. Agora, vou aumentar o tamanho desse telefone. Talvez um 100 seja bom para mim. Faz sentido. O título será design de site, designer VSS, BSS bootstrap Studio. E aqui você pode colocar qualquer coisa, o que quiser, você pode simplesmente adicionar lá. Por enquanto, só estou deixando o texto fictício estar lá. Agora, o que vou fazer, vou apenas selecionar as cicatrizes, chegar às Opções. E agora eu tenho que ir para as decorações e vou soltar sombra sobre u. Isso será uma sombra regular. Sombra regular está lá. Agora, vou selecionar esta coluna e vou procurar nesta coluna no total, haverá três colunas, 12. Lá vamos nós. Vou clicar duas vezes neste ícone. Vou apenas digitar pesquisa, ícone de pesquisa. Em vez disso, selecionarei a pesquisa. Eu virei aqui e vou apenas nomeá-lo como SEO. Digital. Disponibilidade. Mais uma vez, o texto fictício estará lá. E agora vou apenas clicar duas vezes neste ícone mais uma vez e vou digitar o servidor. O ícone do servidor está lá e clique em. Certo. Vou digitar hospedagem *** ser domínio de hospedagem ING. Você é capaz de digitar hospedá-la porque eu uso hospedá-la, porque eu uso essas cordas são frequentemente você pode digitar qualquer coisa lá. Agora, essas opções específicas, queremos algumas mudanças nisso. Agora vamos dar uma aparência extra a isso. Então, selecionarei este primeiro ano do cartão. Eu irei ao painel Aparência. E, no fundo, a imagem é branca completa. O que faremos, vamos apenas reduzir a opacidade para talvez 80%. Justo o suficiente. Então eu selecionarei esta cópia, farei esse vapor para o segundo cartão na verdade. E para o terceiro cartão também basta colar os valores sobre u. Agora vou selecionar esta linha, ou talvez eu possa selecionar este contêiner, calcular contêiner. Agora chegando à aparência, as primeiras opções de layout lá fora. E na opção de layout, a opção de margem está lá. Vou abrir esta opção de margem e margem superior. O que vou fazer, vou apenas escolher o valor para o lado negativo. Agora você pode ver que há sobreposição entre essa imagem e descartes, e isso é o que queríamos. Agora, eu acho que essa sobreposição é suficiente, então talvez vamos levar menos 100 pixels. Lá vamos nós. Certo, justo o suficiente. Vamos verificar com os diferentes tamanhos de tela. Md, queremos coisas diferentes. Então, vou abrir esta linha, selecionarei esta coluna, volto para Options e MD vou pegar seis. A segunda coluna, vou levar seis. E para o terceiro, vou pegar a ferramenta completa em MD. Sim, vou levar a morada completa em tamanho de tela pequena. Isso é completamente bom. E em tamanho de tela extra pequeno, novamente, isso é completamente bom. Certo. Sem problemas. Sim, um problema está lá. A imagem agora é grande. O que faremos, eu irei, irei selecionar esta imagem. Voltaremos ao painel de aparência. E agora o que fizemos é como a partir de 1000 pixels, reduzimos para 500 pixels. Então, em suma, o que fizemos foi reduzir o tamanho em 50%. Em vez de tomar 500 pixels, o que podemos fazer, a opção alternativa é apenas clicar aqui para o botão de redefinição aqui e simplesmente digitar 50%. Isso é tudo. Não há rolagem vertical e a fixação completa é sua segunda opção também está lá, que veremos no próximo vídeo. Mas antes disso, vamos consertar essa área específica onde essas duas cartas estão muito próximas umas das outras e não há distância entre elas. Então, voltando para o tamanho da tela do Excel, vou selecionar esta coluna, este painel do editor, painel de atributos. E na classe, o que vou digitar, darei o fundo da margem para eles. Então, o que vou fazer, vou rolar um pouco para baixo. Selecione esta coluna. Vou digitar margem inferior dois, traço dois e pressionar Enter. Você pode ver agora que temos uma costura inferior de margem que eu farei para esta coluna também. Margem m para margem antes do traço inferior dois. Simples nesta coluna também. Margem, traço inferior para o que eu fiz. O que eu fiz aqui é como se eu selecionasse colunas individuais e dou a elas os valores individualmente. Mas você pode selecionar todos juntos, todas as três colunas ao mesmo tempo e você pode dar a elas, e você pode dar o mesmo valor que é margin-bottom ao mesmo tempo. Certo? Então, estou indo devagar. Assim que tivermos gripe, farei isso de forma profissional adequada, sistemática e apropriada. Agora podemos ver isso novamente, temos alguns problemas com a coluna. A coluna Rita selecionou todas as três colunas com o nosso selecionado. Então, voltando para o painel Opções, agora podemos ver depois do MD, o tamanho da tela será LG. Lg dará a largura de quatro. Desta forma. Em MD, é assim, desculpe. Lgn acima será um após o outro. No MD dois estará no topo e um estará na parte inferior. E no SM, todos e todos estarão abaixo um do outro. E a mesma coisa acontecerá com um extra pequeno. Acho que, por enquanto , é bom ir. Então, voltando ao tamanho do Excel, temos isso que começou a dar uma olhada. Temos que fazer algo com esta imagem C. Agora, o responsivo está desligado, e se eu descer para esse tamanho de tela específico agora você tem uma rolagem horizontal aqui. Só para corrigir isso sem usar o medalhão mais antigo, não basta clicar nesta resposta que você ícone aqui. E isso é sólido feito. Jogue com a capacidade de resposta da imagem. Isso é tudo. Certo. Sim, obrigado pessoal. Vejo você na próxima seção agora. 26. Sobre e Galeria do Projeto Um: Então, neste vídeo, seguiremos em frente. Vamos levar mais um contêiner, então vamos digitar o ano do contêiner. E vou cair sobre isso e deixarei cair este contêiner sobre esta tag corporal. Tenho o contêiner aqui. Portanto, este contêiner darei uma margem, topo, margem, topo é M é margem e T está parado. Dash cinco dará a margem extra aqui. Então, sim, temos algum ano sabático extra, certo? Dentro disso, vou pegar um cabeçalho, tag de cabeçalho, soltar esta tag de cabeçalho aqui. E isso será escrito como sobre ir para o elemento central Opções. Isso é tudo. Este título darei o preenchimento superior e o preenchimento inferior. Então P significa preenchimento. A parte inferior é B, traço três espaços, novamente, preenchimento superior. Pt dash três, ou seja, Pb é preenchimento inferior, P t é preenchimento superior e três é o valor. Agora, eu dei o preenchimento e a margem para isso. Então, selecionarei este contêiner e, na aparência, descerá até a borda. E selecionarei esta borda superior, e selecionarei a cor sólida e o preto ficará bem. Mais uma vez, na parte inferior e selecione Sólido. Eu tenho borda superior e inferior para isso. Vamos ter uma prévia aqui. Basta clicar em seu olho ativará esta visualização e clicarei em Visualizar. O navegador padrão será iniciado. Lá vamos nós. Temos a pré-visualização do nosso site. Está bonito, não é? Apenas minimize isso e vamos avançar. Vamos pegar mais um recipiente aqui, soltar esta etiqueta de corpo de inseto, e eu tenho este recipiente aqui. Agora, vamos pegar uma tag de parágrafo e eu deixarei este parágrafo dentro deste contêiner. E para este contêiner também vou dar alguma margem superior ou talvez três. Eu queria enviar um texto fictício nisso. O que vou fazer, vou apertar Control P e L tipo Lorem são vou apenas digitar, vou apenas apertar Enter e apertar Enter mais uma vez. Lá vamos nós. Temos um texto fictício aqui. Acho que tenho que duplicar esse texto fictício três vezes pelo menos para que eu tenha alguns dados ou você, vamos ver a pré-visualização. É isso. Bom ou então apenas pegue esta cópia e cole-a. E cole-o aqui. Novamente em pasta, temos duas opções diferentes. Vou copiar isso mais uma vez. O que eu vou fazer é você simplesmente colar controle V ano. Você pode ver que há um espaço extra no início e espaço extra no final. Para evitar isso, o que temos que fazer é apenas fazer o Control Z. Agora, para evitar esses espaços extras, o que temos que fazer é como se tivéssemos que colar usando o atalho como control plus shift plus v. É isso. Não temos espaço extra agora. Eu farei isso dentro disso para que seja um bom parágrafo. E eu vou remover este último. Então selecione o parágrafo e, nas fontes, vou apenas para o alinhamento e basta clicar em justificar. mesma coisa. Farei isso para o segundo parágrafo. Vou apenas clicar em justificar sobre você. Ok, agora está bom. Depois disso, temos que colocar a seção da galeria e isso é muito fácil. O componente pronto está lá. Vou apenas vir aqui e vamos digitar galeria. Você pode ver uma Galeria Lightbox. Ou, basta pegar esta galeria, soltá-la dentro desta tag corporal. Isso é tudo que sua galeria está feita. A Galeria Lightbox ou eu apenas removerei esta mesa de luz e somente a opção Galeria estará lá. Este texto, como de costume, se você quiser, você pode mantê-lo ou então você pode removê-lo. Agora você tem essas fotos também. Essas fotos podem ser substituídas e a substituição que veremos em alguns vídeos posteriores porque agora estamos focados em projetar e não a substituição das fotos. Digamos que a pré-visualização. Na visualização, você pode ver agora, sim, temos essa coisa também a seção Sobre e depois a galeria. Isso é tudo que a opção Galeria também é feita. Agora, a coisa mais importante, a seção Fale Conosco, queremos projetar a seção Fale Conosco e essa seção específica que aprenderemos no próximo vídeo. Vejo você no próximo vídeo que aprenderemos a criar a seção Fale conosco com algum texto e um formulário de contato. Vejo você no próximo vídeo. 27. Seção de contato Parte 1 do Projeto Um: Neste vídeo, vamos aprender sobre a seção Fale Conosco. Então, diretamente, vamos começar, vou pegar um recipiente, deixá-lo dentro da etiqueta do corpo. Agora eu tenho esse contêiner e quero duas seções que um endereço de e-mail e número de telefone estarão lá. Na segunda seção, criaremos um formulário. O que vou fazer, vou dar uma fileira. Obviamente. Não vamos procurar na sala. Vou apenas selecionar este contêiner e, na sugestão, a linha é sua grande nesta linha e soltá-la dentro deste contêiner, selecionar esta linha e temos que criar duas colunas. Uma coluna está aqui, e vou duplicar isso e esta é a segunda coluna. Então selecione ambas as colunas chegam às opções, inverta. Basta selecionar estes seis do MD e acima temos divisão de dois, isso é 66, e antes disso é como 212. Então, duas seções completas estarão lá. Então, vou clicar em L aqui . Vai ficar assim. Agora, duas colunas estão lá, e agora abaixo do ano MD temos uma após a outra. Vou seguir uma direção aqui. Vou deixar esse título dentro desta coluna. Vou digitar. Sinta-se à vontade para entrar em contato comigo e ponto exclamatório. Depois disso, vou pegar um parágrafo. Não vamos pegar o parágrafo agora. Vamos pegar um link. Este link vou deixar cair dentro desta coluna, a primeira coluna. Certo, vamos pegar este painel do editor. Na classe. Vou apenas entrar em uma aula. O nome da classe será decoração de texto, decoração traço de texto, nenhum. Essa é uma classe de bootstrap pronta. Em seguida, o texto traço escuro. Novamente, esta é uma classe de bootstrap pronta. Ele entra. Agora o texto está escuro e não há decoração, decoração que sentido quando você tem um link, quando você passa o mouse, ponteiro do mouse no link sublinhado, bem-vindo que não queremos. Ok, então agora, OK, e agora vou pegar um parágrafo. Coloque este parágrafo dentro deste link. Agora, basta digitar o endereço de e-mail. Então, o que posso digitar o exemplo de imunogenicidade, Years Example na taxa email.com. E no texto do link, vou apenas clicar duas vezes neste texto. Vou apenas clicar duas vezes neste link, vincular o texto e apenas selecionarei e removerei, como remover o backspace do sentido. Temos um parágrafo para você. Por que eu adicionei parágrafo é como se tivéssemos mais controle sobre o parágrafo, mas vinculados, não temos controle sobre o link. Digamos, por exemplo, eu só quero aumentar o tamanho. Basta selecionar este parágrafo e clicar em Leto. Sim, é isso. E se eu selecionar este link e agora eu quiser duplicá-lo mais duas vezes, o que acontecerá se for link? Ele virá um após o outro. Eu queria debaixo um do outro, não um após o outro. Essa é a razão pela qual peguei o parágrafo para o seu e não continuei com o link. Então, vamos selecionar este link. Duplique mais uma vez. Agora perguntaríamos a ele abaixo disso. Duplique mais uma vez. Mais um bem público está lá. Agora vamos digitar um número de telefone ao longo de anos. O número completo será mais 91. Esse é o código do país do meu país. Espaço, 9876543210. Tenho muita certeza que esse número que ninguém usa este segundo número de telefone será mais 91, novamente, 9876543211. Novamente, esse número, ninguém usou isso. Agora, o que queremos é que sempre que o usuário chega ao site, você pode ver agora nesta área específica o maior ponteiro é alterado. Vamos que o ícone da ponta do dedo esteja lá. Por quê? Porque é o link. Sempre que o usuário clicar neste endereço de e-mail específico automaticamente, o navegador da Web padrão ou o aplicativo de e-mail padrão será aberto. E em duas seções em que inserimos o endereço de e-mail do destinatário automaticamente, esse endereço de e-mail deve ser inserido ali. Quero criar esse tipo de recurso neste site. Então, como fazer isso? É muito fácil. Basta voltar para o estúdio de bootstrap. Selecione este link específico na seção URL, este hash e digite dois pontos masculinos e o endereço de e-mail. Exemplo no email.com. É isso. Há bom na pré-visualização. E se eu clicar neste e-mail agora você pode ver que ele está pedindo para iniciar o aplicativo de e-mail. E eu vou clicar em, OK. Uma vez que eu clico em oaky, você pode ver o exemplo em read email.com agora você está nas duas seções. Agora você só precisa adicionar o assunto e o conteúdo. Isso é tudo. Isso é muito fácil e muito útil. Em termos de experiência do usuário, a experiência do usuário está em alto nível. A mesma coisa que faremos com o número completo. Então, selecionarei esse número de telefone e o link, que é o link que contém esse número completo. E vou apenas clicar neste link, voltar para este URL. E vou digitar tel colon e digitar o número com o código do país mais 91979876543210. É isso. A mesma coisa que vou fazer com o segundo link também. Basta digitar até o PEL informar espaço de ponto e vírgula, Código do País e o número de telefone Dessa forma, o que acontecerá quando o usuário clicar nessa área específica, ele definirá que o site está tentando abrir, escolha um aplicativo. Vou clicar em Abrir. E agora está mostrando mais uma coisa. Mas o que aconteceu quando maioria dos usuários está usando o navegador Chrome? O navegador Chrome está conectado aos nossos dispositivos móveis. O que acontecerá quando algum usuário clicar nesse número completo? E não é o Chrome. O que acontecerá quando diferentes tipos de caixa de diálogo virão, você tenta se você estiver usando o navegador Chrome, os diferentes tipos de pop-up virão aqui. E quando o usuário clicar Permitir automaticamente em seu telefone, seja a Apple ou o Android, não importa. Automaticamente esse número entrará no telefone e como exatamente virá. O aplicativo do telefone será aberto. Esse número será discado automaticamente e o usuário só precisa clicar no botão Chamar. Isso é tudo. Novamente, a experiência do usuário está no topo do nível. Sim, é isso. É assim que vamos criar essa área específica e esta seção é feita. Agora, vamos avançar para a próxima seção, onde criaremos um formulário de contato e isso faremos no próximo vídeo. Vejo você no próximo vídeo. 28. Seção de contato Parte 2 do Projeto Um: Ok, então vamos criar um formulário de contato neste vídeo em particular. Então, vamos começar. Então, a primeira coisa que vou tomar um formulário, seu formulário FOR M. Vou deixar este formulário dentro deste contêiner. Dentro desta coluna Não contêiner. Este é um elemento de formulário. Agora, dentro deste elemento de formulário, vou tomar div. Vou deixar essa div ao longo de um ano. E depois disso vou pegar um rótulo. Vou digitar com o rótulo LAB, idealtype leap LAB somente então campo rotulado. Bem-vindo. Este rótulo de campo. Eu quero deixá-lo dentro desta tag corporal. Certo, o rótulo de campo está lá. E agora a primeira coisa que queremos do usuário é meme. Essas informações em particular virão dentro da entrada de texto. Vou apenas adicionar uma nota aqui, a entrada de texto e a área de texto são duas coisas diferentes. Não fique confuso com você, ou você apenas pega essa entrada de texto e esta entrada de texto, eu vou deixá-lo dentro desta div. Agora, este rótulo, vou apenas editá-lo. Fiz isso e vou digitar FullName. Selecione este texto e coloque seu olho colocará o espaço reservado como seu nome completo. No valor. O valor não saberá o nome, o nome desse campo. Veja esse nome é o nome do campo. Então, este será o nome completo ou apenas digite o nome completo. E vou selecionar esse rótulo agora, sentir o rótulo. E para este rótulo de campo é para quem? Para o que temos que fazer é apenas selecionar isso e o rótulo agora, o nome que demos ao nome completo dele, certo, então basta copiar isso, selecione o rótulo e vou digitar, e eu vou colar esta UO FullName. Dessa forma, o sistema sabe que esse rótulo de campo é para o texto de entrada que é nomeado como FullName. Selecione esta div. Abra este painel de atributos e margem inferior. Isso é tudo. Agora, vamos apenas colocar algumas declarações para isso. Então, selecionarei essa entrada de texto dentro da aparência, vou rolar sobre suas quatro bordas. As bordas estão lá e o raio, vou apenas remover o raio e vou colocá-lo em 0. Dessa forma, as idades dessa entrada de texto em particular serão nítidas. E vou apenas adicionar uma borda inferior com um traçado e uma largura de um pixel, desculpe, uma largura de pixel e a cor ficará escura. Desta forma. Esse campo de entrada específico está pronto. Agora, vou apenas selecionar essa div e rotulá-la. Portanto, clique com o botão direito e rótulo, rotule isso como nome completo. Ok, então vamos, quando voltarmos para redesenhar essa área específica, saberemos dentro desta div, o nome completo, o rótulo e o campo de entrada estão lá. Agora, duplique isso. Nesta área, vamos chamá-la como o que nascemos no próximo número de telefone. Sim. Então, vamos digitar para o número. Número de telefone. Não usaremos a entrada de texto porque número de telefone ou sempre números não usamos como que não usamos como caracteres naqueles caracteres alfabéticos dentro. Eu apenas excluirei isso do seu número de tipo ou do seu número. E temos o campo de entrada de números sobre você. Eu criei um número de entrada por conta própria. Isso é entrada numérica sem seta. Vou mostrar a diferença entre isso. Tomaremos esse número de entrada primeiro e eu vou deixar isso dentro desta segunda. Apenas para alterar o nome do rótulo. O nome da tabela será o número. Esse número de entrada está lá. Vamos para a seção anterior agora você pode ver quando você passa o mouse aqui, você pode ver duas setas lá, que são como incremento e decréscimo. Não queremos essas setas quando estamos inserindo o número completo, certo? Então, o que vou fazer, voltarei para o estúdio de bootstrap. Vou apenas excluir esse número de entrada de você e essa entrada de número sem seta. Esse componente específico está lá. Por padrão, esse componente não está instalado no estúdio de bootstrap. Este componente eu criei esse componente. Basta ir online e pesquisar entrada do número de entrada sem seta. Você vai conseguir isso. Selecione essa entrada de número sem seta e solte essa área de número de telefone. Agora, o que acontecerá? Vamos para a pré-visualização. Agora você pode ver que não há flecha aqui. assim que queríamos. Então, vamos selecionar isso. E na rolagem para cima nas opções, o espaço reservado é novamente o número completo. Basta copiá-lo e colocar o mesmo nome para o rótulo. Vou renomear esse rótulo também. Ok, agora selecione este número de telefone, venha para Aparência. E agora nesta área, vou apenas selecionar essa borda inferior e torná-la sólida e escura. Um pixel é bom e o raio será de 0 pixels. É isso. Certo? Agora, depois desse número completo, o que queremos é o endereço de e-mail, ok, então duplique isso. Agora, antes disso, vou renomear o rótulo como e-mail e clicar em Enter. Vamos mudar isso de número de telefone para e-mail. Agora, o endereço de e-mail tem um campo de entrada diferente, então vou excluir isso mais uma vez. E aqui vou apenas digitar e-mail e entrada de e-mail. Está lá. O que essa entrada de e-mail faz? Ele tem um JavaScript pronto escrito para ele. O endereço de e-mail tem um formato específico, certo? O formato será como primeiro, seu nome estará lá ou seja lá o que for, a perna cortada nesta área específica, este exemplo está lá. Então temos no ritmo, então temos o nome de domínio, que é gmail.com, hotmail.com, yahoo.com, Outlook.com, seja lá o que for. Se algum usuário acabou de inserir exemplo e tentar enviar este formulário, ele verá que o endereço de e-mail não foi corrigido. Se o exemplo de tipo de usuário no e-mail e..com não estiver escrito, novamente, ele dirá que isso não está no formato adequado. Situação hipotética. Se o usuário digitar o exemplo no email com onde ele perdeu o ponto. Novamente, esse campo de entrada específico, campo de entrada, dirá que o e-mail não está em um formato adequado. Eu vou te mostrar isso também. Continuando com isso, selecione esse campo de entrada de e-mail específico, vá para o espaço reservado do painel Opções Vou digitar e-mail. Insira seu ID de e-mail. O nome darei esse nome como e-mail. Vou copiar isso para o rótulo. Vou alterar o nome do rótulo como e-mail. Queremos a área em que o usuário possa digitar a mensagem. Agora, neste lugar específico, a área de texto é bem-vinda. Duplique isso. E agora vou digitar mensagem. Selecione esta entrada de e-mail e O, esquecemos de dar a borda. Ok, então vou selecionar este campo de entrada de e-mail. Vou para Aparência e o raio será de 0 pixels. A cor será preta e a borda inferior será sólida. Seguindo em frente. Então, selecione esta div mudará a primeira mensagem do rótulo. O rótulo é mensagem, e agora temos que levar a área de texto aqui, soltá-lo dentro desta mensagem. Faça a mesma coisa que faremos primeiro, raio de 0 pixels, fundo, sólido com cor preta. Feito com isso. Agora vamos ver a pré-visualização. Temos o lugar para, agora temos o lugar para inserir o nome que ele está mostrando diz que insira seu nome completo número de telefone e endereço de e-mail, então temos uma área para enviar mensagens. Agora, você pode ver essa área, podemos aumentar o tamanho. Esse campo de entrada específico é chamado como área de texto. Agora, o mais importante, precisamos de um botão onde o usuário possa clicar em uma mão. Ele pode enviar o formulário. Para isso. Mais uma vez, precisaremos disso. Precisaremos desse acordo onde duplicaremos essa div e vamos rotulá-la como botão. E não queremos esse rótulo e nada dentro disso. Só precisamos de um botão. Vou apenas pegar um botão e deixarei cair isso dentro deste botão, vou digitar mensagem de envio. O tema que estamos seguindo é vermelho e preto. Então, o que vou fazer, vou apenas para opções e o estilo ficará escuro em si. A fronteira será nítida. Você pode ver a visualização. Sim, as bordas são nítidas. Uma pequena mudança que farei. Vou aumentar o tamanho do botão de padrão para grande. Ok, então ficará muito bom. Se você quiser. Podemos colocar a ICANN também dentro desse solo apenas digitar o ícone. E ele pegará esse ícone e colocará diretamente aqui, basta clicar duas vezes no ícone de bootstrap e enviar o ponto da mensagem chegando. Talvez. Não. Desculpe. Não, este aqui. Podemos usar este. Então, vamos pegar este 1 primeiro 1. Basta colocar uma ordem de paz. Isso é tudo. Esse botão específico será um botão Enviar. Quando o usuário clicar neste botão, este formulário será enviado, o formulário será enviado. Selecione este botão. Na área de opção de botão, temos o tipo de botão. Este tipo de botão, selecionaremos o envio. Sempre que o usuário clicar em Enviar qualquer informação escrita neste formulário, essas informações chegarão ao endereço de e-mail. Agora, como enviar essas informações específicas para o endereço de e-mail. Isso é muito fácil e que veremos no próximo vídeo. Vejo vocês no próximo vídeo, pessoal. 29. Forma inteligente do projeto um: Então, vamos enviar as informações deste formulário para o endereço de e-mail. Para isso, o que temos que fazer é selecionar este formulário. Depois de selecionar este formulário, basta clicar no botão Formulário inteligente aqui. Então eu tenho que adicionar o destinatário. Então, temos esses destinatários ao longo de um ano. Este é o meu endereço de e-mail, curso atual no Yahoo.com. E se você puder me fazer alguma dúvida enviando o e-mail para este endereço de e-mail. Já, os endereços de e-mail estão lá, mas se você quiser adicionar um endereço de e-mail, como você pode fazer isso, é muito fácil. Basta clicar em Gerenciar. caixa de diálogo virá e clique em Adicionar destinatário, insira o endereço de e-mail aqui. Digamos que vou apenas digitar o exemplo no reheat mail.com. Desculpe, acabei de escrever o exemplo do endereço de e-mail email.com em mail.com e clique em Criar. E o que acontecerá? Um e-mail de verificação chegará lá em que você precisa inserir um número de cinco ou seis dígitos estará lá. Esse número você tem que colocar aqui. E, em seguida, basta clicar em Verificar. Isso é tudo. Depois disso. Vou apenas excluir isso. Depois disso, os destinatários do e-mail virão nesta lista. Neste destinatário, escolha a escola destinatária também. Basta selecionar isso. Vou apenas selecionar meu endereço de e-mail. Isso é tudo, nada mais a fazer. E, em seguida, temos a opção como URL de redirecionamento depois que o formulário for enviado, para onde você deseja que o usuário seja redirecionado. partir de agora, temos apenas uma página, então vamos clicar em index.html. Isso é tudo. Ok, então temos alguma opção de mensagens personalizadas também que já vimos. Acho que acho que já vimos todas essas coisas nos vídeos anteriores. Se eu não estiver errado. Sim, mas novamente, como enviar depois, como, você pode adicionar o assunto. assunto será formulários de contato. Co-NP se foi. Do usuário. Carregando. Talvez possamos digitar quase lá. Então, com sucesso, podemos enviar a mensagem. Então a mensagem de sucesso será, eu entrarei em contato com você em breve. mensagem de erro o manterá como está. Whoops, então arquive muito grande. Se o anexo estiver lá, então temos que mostrar esse arquivo muito grande e o formulário vazio. Como Por favor, preencha as informações que estão lá. Sim, todas essas coisas, em seguida, fechar o botão estarão lá. Botão Fechar, deixaremos essas opções como padrão totalmente. Ok, agora, então temos que validar o formulário também, certo? Portanto, este primeiro campo, deve ser compensado, os usuários devem preencher este formulário é que o formulário não será enviado. O que acontecerá agora? Só venha a isso. E se eu clicar em Enviar, você pode ver que o formulário foi enviado agora, mas não há informações e basta clicar em Eu não sou um robô. Ele verificará. Por favor, preencha o campo obrigatório e tente novamente. Mas isso não deveria acontecer. Você é apenas o campo de entrada deve mostrar como por favor insira algo nisso, certo? Então, vamos voltar ao estúdio Bootstrap e basta selecionar essa entrada de texto nas opções. Na validação, temos que entrar na validação e apenas clicar neste botão necessário ou você parece algo para o número completo, ir para Validação, clicar no botão obrigatório. mesma coisa. Endereço de e-mail, clicaremos no botão obrigatório e no botão obrigatório de mensagem. Agora, o que acontecerá se você for para a pré-visualização? Se eu clicar em Enviar, ele dirá, por favor, preencha este homem do filme. Por favor. Vou colocar meu nome. Como é meu nome? Vamos digitar o nome completo e, em seguida, número completo. Digite este número de telefone e o endereço de e-mail são agora. Agora eu quero mostrar este e-mail. Basta digitar e-mail e colocarei a mensagem como mensagem. Vou tentar enviar isso. Agora você pode ver, inclua adicionar a tarifa no endereço de e-mail. E-mail. Vamos lá, show. Falta um anúncio por e-mail. A taxa está bem. Tudo bem. Na taxa que não são apenas mais uma vez, insira a peça. Seguir no endereço de e-mail vermelho está incorreto. Gmail.com. E agora se eu enviar este e-mail agora você pode ver isso mostra como se eu não sou um robô. E está quase pronto. E boom, isso é tudo o que terminamos com isso. Podemos criar mais uma página onde mostraremos parabéns, recebi a mensagem. Recebi sua mensagem ou recebi o seu e-mail e nós só entramos em contato com você em breve. Podemos criar mais uma página e podemos redirecionar o usuário para lá. E vamos colocar um botão lá, como voltar para a página inicial. E se clicarmos nesse botão específico, o redirecionamento será para esta página nele. Ok, então não queremos fazer todas essas coisas para essa demonstração em particular. Então, a partir de agora, essa área está pronta. Galerias de imagens e imagens funcionando corretamente, sem problemas e todas essas coisas. Também podemos adicionar um rodapé aqui. Basta vir aqui e vou digitar FOBT e rodapé escuro como se tivesse muita informação. Primeiro, básico é OK, bom para nós. Vou soltar este rodapé básico no corpo. Este corpo. Isso é tudo. Quantos botões temos, temos em casa. Então temos cerca de e depois temos contato. Isso é tudo o resto. Nós não queremos. Então, vou apenas selecionar este e estes termos e termos e política de privacidade e , em seguida, removerei isso. Podemos vincular isso obviamente e o nome da empresa no nome da empresa, Corporate 2021. Então, vou digitar seu nome. Direitos autorais 2021. É isso. Agora, vamos ver a pré-visualização. Se eu rolar, tudo está indo bem. Agora o que queremos, nossa barra de navegação vai embora quando estamos rolando para baixo. Não queremos isso. Então, voltando ao estúdio de bootstrap, vou apenas selecionar a barra de navegação mais uma vez, e vou manter a posição fixa no topo. Corrigido no topo é um pouco estranho que seu nome tenha entrado no mapa, mas vamos mantê-lo como o TikTok fez, sem problemas. Vamos voltar para a pré-visualização. Agora você pode ver que a barra de navegação está presa no topo. Isso é tudo. Vamos fazer a última parte deste site, onde podemos simplesmente clicar neste botão e a página irá rolar até essa área específica. E essa coisa em particular que faremos no próximo vídeo. Vejo você no próximo vídeo. 30. Finalizando o site do Projeto One: Talvez este seja o último vídeo desta seção em particular. Não sei se algo vem na minha mente. Posso criar mais alguns vídeos nesta seção. Botão Home, selecionaremos o botão home e você pode ver que este botão Home está escuro e entre em contato conosco II está um pouco em um lado claro. O motivo por trás disso, e vamos apenas selecionar este link que selecionarei o botão inicial. Posso ver que esse link está selecionado, mas quero que esse item de navegação seja selecionado. Então, selecionarei esse item de navegação e estou ativo. Basta clicar, vamos clicar neste botão que está ativado. Agora tudo está feito. Certo. Vamos começar com esse primeiro contêiner é essa área. Este é o, este, esse fazer, este fazer é primeiro esse negócio. Temos que dar uma identificação para esse dever em particular. Basta clicar aqui e a ID estará em casa. Esta é a seção inicial. Esta é a seção inicial. Em seguida, temos este contêiner que contém a seção Sobre nós. Esta seção vem no próximo contêiner. Certo, tudo bem. Então, o que faremos, vamos apenas adicionar um dv aqui em div. E esses dois contêineres entrarão nessa div, e essa div será chamada, pois o ID do atributo será suficiente. Em seguida, Galeria, esta seção específica é Galeria. E então eles simplesmente iam para a seção de atributos e digitavam sua galeria. Esta seção é a seção de contato. Então vou apenas digitar cd contact. Sim, basicamente temos por enquanto. Acho que não. Precisamos de uma galeria ou você simplesmente remove esta galeria. Então agora temos três como casa e contato. Isso é tudo. Voltando para os navbars. Selecione esta casa onde o link está lá. Este link temos que selecionar e esse URL específico estaremos digitando. O ID, o ID do ano começa com a chave de hash. A chave hash já está lá e simplesmente digite home. Certifique-se de que, se você tiver dado o ID para casa com uma letra maiúscula dentro disso, você tem que usar o mesmo caso aqui. Ele é sensível a maiúsculas e Então, em casa, depois disso é sobre, então a chave de hash já está lá e eles simplesmente digitarão sobre. Em seguida, selecionarei esse contato e o contato estará lá. A mesma coisa que faremos com o rodapé também. Vou apenas selecionar esta casa e vou digitar casa ao longo do ano. E sobre. Vou digitar sobre contato. Contato. Vamos ver a pré-visualização agora. Estamos na pré-visualização. Se eu clicar em casa, lá vamos nós. Se eu clicar em Contato, lá vamos nós. Se eu clicar em Home, voltamos ao topo. Certo. Justo o suficiente. Desta forma, concluímos nosso design de site de uma página onde qualquer coisa que você possa usar, você quer mudar qualquer coisa nessa coisa em particular. É meio que retomando apenas, certo? Você tem uma seção de contato e casa e então você pode simplesmente soltar qualquer um pode vir. Eles podem enviar um e-mail diretamente ou simplesmente digitar. Eles podem preencher este formulário específico e podem simplesmente enviar para você. E este formulário será qualquer que seja a informação que o usuário digitar nesta área específica, essa informação virá para a refeição. Oh, nós não fornecemos o espaço reservado para essa área de texto específica. Então venha aqui e vou digitar um porta-lugar. Digite o ponto exclamatório da mensagem. Isso é tudo. Ok, então volte para a visualização para digitar sua mensagem e pronto. Acho que está tudo feito, cara. Sim, está tudo feito. 31. Abertura Do Projeto 2: Olá e seja bem-vindo. Nesta seção. Nesta seção vamos projetar resultados técnicos. Portanto, este é o site que vamos projetar. E neste site estamos dispostos a ver muitas coisas, como consulta de mídia e integrações X2 , como Zu, que formam integrações, bate-papo ao vivo, help desk. Muitas coisas que vamos ver nesta seção específica. Esta seção será um pouco mais longa em comparação com a última seção. Nessa seção, acabamos de criar um site de uma página. Nesta seção, estaremos criando um mínimo de, digamos, de quatro a cinco páginas de design. Esta seção será um pouco mais longa sem perder muito tempo. Vamos começar e aprender a criar um site de várias páginas. Então, vejo você no próximo vídeo. 32. Página inicial Seção Um 1 Do Projeto Dois: Certo, então vamos começar. Então, como de costume, vamos apenas clicar em novo design aqui e vamos nomeá-lo como resolução técnica. Bootstrap será o mais recente. Selecionaremos o modelo em branco e apertaremos em Criar. É isso. Agora, antes de avançar, temos que importar todos os recursos que temos. Basta ir para a pasta principal do curso BSS nesses arquivos BSS e, em seguida, você encontrará o resultado de rolagem de hash 500s. Basta clicar duas vezes sobre isso e você verá outras quatro pastas dentro disso. Todas as quatro pastas são baseadas em páginas como solução de negócios homepage, nosso cliente e entre em contato conosco. O que faremos aqui é como dentro do estúdio Bootstrap, vamos apenas criar uma pasta dentro da pasta de imagem, e vamos nomeá-la como casa. Depois disso, o que mais temos quem, em seguida, solução de negócios, nosso cliente e contato. Criarei mais uma pasta chamada soluções de negócios. Então, vou comprar o BS, que é uma solução de negócios. Em seguida, nosso cliente, OCI, entre em contato. Então, vamos nomeá-lo tão completo quanto nomearemos contato completo. Ok, com base nesta pasta, vamos importá-la. Vou apenas clicar duas vezes nesta casa. Selecionarei tudo isso e vou deixá-lo dentro desta pasta inicial. Vou definir 60 imagens são importadas, em seguida, solução de negócios, vou apenas selecionar tudo. E a solução de negócios é mais fácil. Bs sete imagens estão lá, ok, todas as sete imagens são importadas. Agora, depois disso, temos nossos clientes, isso é OC. Então, vou desmoronar isso quem e bs. Então, o OC é este. E OC temos apenas uma imagem. Então, vou deixar cair sua OCI. última pasta é a pasta Contact Contact. vez, uma pasta está lá e eu vou soltar essa pasta de contatos. Então, vou soltar essa imagem dentro desta pasta de contatos. Ok, então os recursos são carregados dentro deste, para que possamos fechar isso. Agora. Vamos ver o que vamos projetar ano. Então, vamos projetar isso. Estaremos fazendo um clone deste site não completo, mas poucas partes importantes deste site. Obviamente, a landing page vamos projetar essa landing page que você pode ver agora este formulário está lá. Mas assim que ele é movido para o tamanho de tela pequeno, o formulário desaparece. E o botão vem aqui e diz: Conte-nos sobre o seu negócio e quando você clica nisso, quando o modelo vem e esse formulário está dentro desse modelo. Então, bastante óbvio, como aprendemos sobre isso, usaremos a consulta de mídia para isso. Portanto, nesta seção específica, a consulta de mídia que você entenderá em uma versão detalhada. Certo, justo o suficiente. Justo, justo o suficiente. Com a introdução, vamos começar agora. Primeiro, como de costume, estaremos tomando um ano navbar. Vou apenas digitar nav e vou levar essa marca navbar serão resultados técnicos. Então, vou digitar sua tecnologia TCH na nossa resolução do deck ESOL VE, desculpe, VE. E temos um ícone lá. Então, vou pegar um ícone e vou soltar o ícone aqui. Então, vamos ver no ícone bootstrap, temos algo para tecnologia ou não? É uma bateria, mas não é uma tecnologia. Tecnologia de baterias? Não, de todo. Certo. Então, vamos procurar algo diferente. O que podemos fazer é vídeo 3D ADHD VR. Nós somos, oh meu Deus. Qualquer coisa relacionada à tecnologia, o que podemos fazer? Não podemos usar bug. O calendário existe o vídeo. Vamos procurar por computador. Temos computador ou não? Bússola que temos. Vamos, só para esta demonstração, só para este vídeo, eu posso tirar este ano compossible. Acho que não. Não parece bom. Vamos pegar outra coisa. Vamos pegar essa coleção quando talvez ela fique boa. Sim, parece bom o suficiente. Certo. O resultado do Peck é o site que vamos projetar agora. E esses itens de navegação que temos deste lado, queríamos levá-lo para o outro lado, então o alinhamento será final e a barra de navegação, desligaremos a opção fluida. Certo, justo o suficiente. Vamos voltar e ver agora o que temos aqui é a transparência da barra de navegação. Existe, há algumas transparências lá que a área de fundo é visível. Então, faremos isso. Vamos pular para o estúdio Bootstrap de volta novamente. E então navbar, vou selecionar a barra de navegação. Eu irei para a imagem de fundo e essa cor amarela podemos usá-la. Certo. Este ou este ambos o mesmo movimento. Isso é amarelo BS e isso é aviso BS. Ok, então vamos usar essa cor amarela. Vou clicar neste seletor de imagens, ir para Select e reduzirei a transparência para talvez 80%. partir de agora, você não pode ver nada porque não temos nada. Mas muito em breve podemos ver isso. Ok, então a seguir é que temos que criar essa área específica. Então, para isso, o que faremos, então vamos fazer uma div. Vou levar esta div está lá agora. E dentro desta div vamos pegar um contêiner. E dentro deste contêiner, uma linha vamos pegar, e dentro disso vamos pegar duas colunas. Esta coluna e o controle D duplicam isso. Teremos duas colunas aqui. Esta div está lá agora. E para esta div, daremos a mesma cor de fundo que é amarela. E vou clicar em Selecionar. Certo, justo o suficiente. Então, agora, nesta área específica do que somos, o que queremos aqui é ir do tradicional ao digital, e vamos apenas copiar isso. Você também pode copiar o nome de domínio é peck result dot in. Aqui. Vou pegar um título. Basta soltar esse título aqui e colar. Portanto, lembre-se do atalho Control Shift V para colá-lo aqui ainda temos esse problema. Vá, vá do tradicional para o digital. E sim, a fonte é diferente. Por enquanto, vamos com a mesma fonte. Se você quiser, você pode alterá-lo. Acho que você sabe agora como mudar a fonte. Caso contrário, volte para os vídeos anteriores e veja exatamente como alterar a fonte. Certo, justo o suficiente. Depois disso, o que temos que temos um parágrafo que diz que toda empresa precisa de uma presença digital, então estamos aqui para tornar isso possível. Vamos pegar um parágrafo e esfregar este parágrafo logo abaixo deste e colá-lo. Justo o suficiente, depois disso temos a tag de imagem de imagem. Logo abaixo desta, vamos colocar uma tag de imagem e clicar duas vezes em casa. Esta imagem que queremos, vou apenas selecionar. Sim, é isso. A imagem está lá agora. Agora temos algum espaço inferior ao longo ano e a barra de navegação também tem alguma sombra. Faremos isso. E antes disso, vamos apenas fazer uma prévia e eu lhe direi por que exatamente estamos usando a sombra aqui. Temos uma razão por lá e duas razões na verdade. Você pode ver agora como temos a transparência 80% para a barra de navegação, é por isso que a cor é clara e a mesma cor que usamos aqui, e parece muito escura. Este parece que este parece dutos. Na verdade, ambas as cores são as mesmas, apenas as diferenças. Isso é 80% de transparência, isto é 0% de transparência. Agora não queremos mostrar essa diferenciação e queremos fazer um truque aqui. Essa é a razão pela qual vamos adicionar uma sombra a essa barra de navegação. Então, vou selecionar essa barra de navegação. Vou para Opções, decoração, sombra, Regular. Agora voltarei para a pré-visualização. Agora você pode ver que há uma sombra. Você pode ver que a sombra é mais maior em comparação com esta. O que fizemos ali é que usamos a grande sombra ali. Agora você pode ver que temos uma grande sombra e , em seguida, usamos alguma margem superior para esta. Então, margem top cinco. Justo o suficiente. E para este, demos margem inferior cinco. É isso. Agora você pode ver que temos espaço extra aqui e aqui também. Então, se você quiser ver na visualização móvel, podemos simplesmente descer aqui e, em seguida, você pode ver há rolagem horizontal. E agora você sabe como corrigir isso, não por consulta de mídia. Só precisamos clicar na resposta. Você. É isso. Está feito. Nós estaremos consertando isso também. Então, ninguém está voltando para o tamanho de tela maior, ou seja, LG. Acho que seu Excel extra grande. Nesta área, estaremos criando o formulário. Devo parar o vídeo aqui ou devo continuar com isso? Certo, vamos continuar com isso. Completaremos esta seção e, em seguida, interromperemos o vídeo. Por outro lado, o que precisamos 0s, precisamos de um formulário. Vamos pegar uma fazenda. Sim, antes do formulário, temos alguns textos como contato agora e obter a melhor oferta do dia. Certo, então copie este. Pegue a direção, o cabeçalho aqui. Cole e esse cabeçalho será H4. Para este título também, tomaremos a margem top cinco. Certo, justo o suficiente. E então tomaremos forma. Nós nos realizamos. Então vamos fazer uma div. E dentro desta div, o que temos, temos FullName, nome comercial, rótulo de campo não está lá. Somos tomadas diretamente entradas de texto. Entrada de texto. Temos o seu e colocaremos isso aqui nesta entrada de texto. O que somos, o que é isso, na verdade, este é um nome comercial ou nome completo. Seu nome completo. Este é FullName. Em seguida, espaço reservado novamente, este será apenas o nome completo. O estado está desativado ou somente leitura. Tudo deve ser isso e validação que precisamos dele, então faça com que seja necessário. E o que mais queremos? Essas bordas devem ser bordas afiadas e afiadas. Vou apenas rotular este como nome completo. Então precisamos de uma margem, superior e margem inferior. Vamos ver. Um, Um é suficiente ou não. Acho que o fundo da margem deve ser 32 está bom. Doc na margem inferior dois é bom para este, também a margem inferior dois é boa. Este é o nome comercial, o nome da empresa, copiar, colar, nome comercial novamente, é necessário. Depois disso, o que precisamos como exemplo de tipo de negócio, escola de hotel. Certo. Duplicado, tipo de negócio, cópia. E no espaço reservado, daremos o exemplo Hotel. Legal. Então o que temos, temos um select aqui que diz, sim, meu negócio tem GST. Eu sou esse é o número GST e sei que meu negócio não tem um GSD IN. Selecione que precisamos, então vou apenas duplicar este. E dentro disso, excluirei isso e vou digitar select. Basta pegar o select aqui. Temos que renomear isso também. Então, esse é o nome comercial. Este é do tipo comercial. Este é íon GSP. Não precisamos de grupo. Precisamos apenas de 2. Primeiro 1 é sim, meu negócio tem GSD IN e acho que seremos pequenos. E o segundo será meu negócio. Não tem GSD IN o sim será selecionado. Então, o que queremos é o endereço de e-mail, contato e em qual produto você está interessado. Certo, tudo bem. Só vou duplicar este ano. Agora vamos fazer isso. Preciso deste grupo de opções primeiro, e vou levar este no topo. O Grupo de opções, vou nomeá-lo como site estático. Este será um site de uma página. Isso será como um site básico de cinco páginas. Qual é a ideia desses 13 loci? Portanto, esse valor será 14 e o rótulo será múltiplo. Site, site, o site entre parênteses, será mais de cinco páginas. Ok, então isso vem sob estática e agora vamos criar mais um. Este será o Grupo de Opções e o rótulo será dinâmico. Site. Vamos adicionar este. Então este será 15. rótulo será o site de comércio eletrônico. Será apenas opção. O rótulo será LMS ou Learning Management System. Isso será 16 e você pode criar muito mais. Então, por enquanto, vou parar por aqui. Se formos para a pré-visualização agora você pode ver que temos dois grupos. Portanto, este é um grupo estático e esse dinâmico. Em estática, temos um site de uma página, site básico de cinco e um site de várias páginas, que tem mais de cinco páginas dinâmicas. Temos e-commerce web, certos elementos, é um sistema de gerenciamento de aprendizado. Você pode colocar qualquer coisa aqui com base em sua exigência. Você pode colocar qualquer coisa depois disso. O que temos é como endereço de e-mail que queremos e número de contato que queremos e, em seguida, queremos uma mensagem, um endereço de e-mail. Então, vou tomar essa entrada comercial, vou duplicar isso. E o que eu vou fazer, vou levar esse negócio e potente, basta cair abaixo disso para o GSD e vamos apenas rotular isso e nomeá-lo como interesse. Esse tipo de negócio será o número de contato. Essa rotulagem não é apenas para nosso entendimento quando exportaremos este projeto completo. Dessa vez, também essa rotulagem será muito importante porque há opção no rótulo. Isso nos ajudará quando exportarmos o projetor. Quando exportamos o projeto, há uma opção chamada rotulada converter dois comandos. Quando nós, quando veremos o núcleo após a exportação, esses rótulos serão convertidos como um comentário nessa área específica. Isso nos ajudará a entender exatamente o que é. É um uso de curso de desenvolvedor e, no final do dia, é como em nós como queremos levá-lo. Depois do GSD, o que temos, vamos ver. Não após o endereço de e-mail e contato do GST, precisamos disso. Certo. Essa área específica será e-mail. E-mail. Então, vou levar isso. Este é o número de contato. Demos o número de contato da etiqueta. Basta pegar a entrada de número sem seta. Basta soltar essa entrada de número e eu selecionarei isso, exclua isso. Esta é uma entrada numérica como novos campos de entrada. Então, temos que fazer as fronteiras, fronteira da idade, que são bordas retangulares. O suporte do lugar será o número de telefone. Aqui, será apenas o número. A próxima coisa é e-mail. Duplique este. Rotule-o como controle e digite e-mail. Entrada de e-mail. Opa. Este e-mail insere ou exclui este retângulo de decoração. titular do leasing será e-mail. A mesma coisa para o nome. Depois disso, precisamos nesta área de texto. E queremos este retangular também, este e este. Certo? Então, após esse interesse, não precisamos desse ano selecionado. Precisamos de uma área de texto. Esta área novamente, retângulo. Espaço reservado será o que eu escrevi ali é sua mensagem. Se alguma mensagem, se a mensagem m for pequena o suficiente. Vamos ver a validação agora necessária, obrigatória , necessária. Obrigatório. Em seguida, esse tom neste endereço de e-mail necessário armazenado no necessário. Então este tom no necessário, e este será opcional, como escrevemos que, se houver, este permanecerá como caso opcional. E por último precisamos de um botão para enviar isso. Então botão BTN, então seu rotule-o como mensagem. Isso será como botão, mas botão DON. Este botão. Vamos tomar como. tipo de botão será enviado. Isso ficará escuro. Agora, tenho poucas perguntas dos alunos que já estão matriculados na versão anterior do bootstrap Studio, eles disseram que as opções de botão mudaram, que o Bloco opção não existe. É verdade que no novo bootstrap, isso é o Bootstrap F5. Agora, o botão não tem a opção Bloquear. O que precisamos fazer é que só precisamos ir à aparência. Em largura. Temos que digitar 100%. Agora ele funcionará como um bloco, mas infelizmente essa opção de bloco não é, você não está. Certo. Em seguida, temos Declaração e , em seguida, decoração retangular. E vamos digitar seu envio, sua mensagem ou o que escrevemos lá, como enviar mensagem. Lynn. Envie mensagem de envio. A borda está lá leve borda, borda branca. Serei dado a essa área específica. Vamos ver a pré-visualização agora como exatamente ela se parece. Certo, isso parece muito bom. Portanto, esse formulário é pequeno em largura, e esse formulário é muito grande na área de largura. Então, voltaremos aqui. Então, vamos ver, esta é a nossa linha principal. Esta linha é de forma. Basta rotulá-lo como forma e inverter o que farei até MD. Vou dar-lhe uma largura de quatro. Nesta área, vou mantê-lo em auto, ou talvez oito. Então oito mais quatro é 12. Então, essa área está pronta agora. Então o que a maioria dos fins de semana faz é exibir. Podemos aumentar um pouco o tamanho dessa tela. Talvez um quatro seja um bom. E para este parágrafo, ativaremos a opção de lead. O que podemos fazer por esta imagem é como, ok, vamos mantê-la como ela é. Não faremos nada. Mas o que podemos fazer é que podemos fazer isso, podemos tirar esta imagem, desculpe, podemos tirar essa imagem dentro de uma div, assim dentro de uma div e essa div, vamos torná-la centro de alinhamento. O que acontecerá com essa imagem em particular? Ele virá no centro dessa linha específica, mas o alinhamento com esse texto não estará lá. É por isso que parecerá estranho. Ok, então, para isso, vamos removê-lo novamente fora da div e excluiremos esta div. Não precisamos disso. Sim. Certo. Então isso é feito? Sim, essa área específica é feita, então você sabe como fazer o formulário como um formulário inteligente. Vamos ver. Este tamanho de tela está bom. Md novamente, acho que devemos mudar a largura para algas, então as algas serão quatro e esta será oito. Vamos fazer isso completo 12. E, embora removeremos este formulário do ano porque não queremos isso, vamos adicionar uma consulta de mídia aqui nesta área. Portanto, esta seção em particular agora é diferente. Fogo, justo o suficiente. Então, vamos ativar o formulário também. Formulário inteligente. Então, basta ativar isso, selecione a mensagem personalizada do destinatário. Se você quiser alguma mensagem personalizada, você também pode ativá-la. Depois disso, onde você deseja levar este site específico, estaremos criando uma nova página chamada após o formulário. Enviar. Estou apenas criando esta página agora. Não faremos nada nisso apenas para ter isso em mente que temos que fazer isso, temos que criar esta página também. Então, essa é a razão pela qual estou criando isso. Estou criando esta página aqui. Mais tarde. Vamos projetar isso. Agora, nesta página após o envio, a página será redirecionada para depois do envio do formulário ponto HTML. Vamos começar este vídeo aqui. E no próximo vídeo, vamos reproduzir com a consulta de mídia. Flexbox e media query são sempre um problema, mas agora não será. Então vejo vocês no próximo vídeo, pessoal. 33. Finalização da Página Inicial Seção 1 Do Projeto Dois: Certo, bem-vindo de volta. Neste vídeo. E neste vídeo, como eu disse, vamos entender sobre consulta de mídia e flexbox sem perder tempo. Vamos começar este formulário específico que queremos. Não queremos no tamanho da tela pequena, estaremos tomando este formulário no modelo. Até a LG. Isso é bom o suficiente. E quando se trata de MD, que é dispositivo médio, os formulários caem e essa área em particular permanece aqui. Mas queremos isso do MD. Quando não for esse tamanho de tela específico que não é laptop e acima, isso ficará bem. Esse alinhamento, que o alinhamento à esquerda está lá. Certo, justo o suficiente. Mas quando está em MD e abaixo, o deve vir em um alinhamento central. Então, para isso, o que temos que fazer? Que vou lhe dizer que essa coisa em particular que faremos sem consulta de mídia, estaremos usando completamente as opções do Flexbox dentro deste bot para ocultar este formulário e fazê-lo fazer com que o botão visível aqui. Para isso, usaremos a consulta de mídia. Primeiro, faremos flexbox, depois passaremos para a consulta de mídia deste dispositivo, ele é LGN acima. Eu não fui essas opções em particular aqui. O que vou fazer, selecionarei esta coluna e chegarei à opção Flexbox. Ok, então esta é a opção flexbox. Se você não vir todas essas coisas, você só precisa clicar nesta seta aqui. Na opção Flexbox você tem esses botões, pois já aprendemos o básico do Flexbox. Então, agora o que faremos, selecionamos esse tamanho de dispositivo específico, ou seja, LG. E neste tamanho de dispositivo, o que queremos é que o alinhamento seja deixado com apenas clique à esquerda. Não se preocupe, todas essas coisas vão acontecer. Isso vai, essas coisas ficarão confusas. Mas basta clicar à esquerda. E agora em direções, basta clicar aqui e clicar na coluna. Agora, esta coluna em particular é alinhada à esquerda tamanhos de tela da LG e acima. Então você pode ver que isso está alinhado corretamente. Mas o que acontece, veja assim convertemos a direção em coluna, o alinhamento chegou ao padrão. Agora, novamente, temos que clicar nesta coluna e o que acontecerá? Veja agora que a imagem foi expandida. Agora você está, você também pode ver que a imagem tem o tamanho da imagem aumentou. Agora, basta clicar nesta sobra e pronto. Tudo está redefinido agora, o alinhamento à esquerda está lá. E no tamanho da tela acima também o alinhamento permanecerá à esquerda. Agora, o que queremos é deste tamanho de tela extra pequeno ainda MD obviamente não, não podemos fazer nada com este LG. Agora queremos fazer até MD agora, estaremos selecionando este tamanho de tela expresso, tamanho tela extra pequeno. E aqui o que vou fazer, vou clicar no centro. Esse é o elemento central e a direção permanecerá para chamá-los só pode ver que a imagem não está centralizada, alinhada. Este tamanho de tela essencial. Agora você pode ver que há uma linha central em MD. Agora está alinhado ao centro e assim que vai para a LG hoje em dia, alinhe à esquerda. É assim que vamos manter esse design específico. Agora, como exatamente funciona é como uma sétima pílula acima MD, não há comando, mas da LG, o novo comando está lá. Do excesso, isso é muito pequeno até MD. Ele tomará o elemento central e da LG e acima ele tomará o alinhamento à esquerda. Ok, então é assim que o flexbox vai caminhar por aqui. Isso é tudo. Flexbox para essa área específica está pronto. Agora vamos jogar com a consulta de mídia. Ok, então agora vamos avançar para a consulta de mídia. Então, voltando para o Bootstrap Studio agora, o que queremos, o que queremos aqui é depois desse tamanho de tela MD, não queremos este formulário ou você quer que o formulário se torne dentro de um modelo. E o botão Launch modelo estará aqui, logo abaixo desta imagem. Então, vamos pegar o botão primeiro. Vou pegar o botão. E vou nomear esse botão como qual é o nome do botão ali? Em pequena escala, fale sobre seu negócio. Então eles nos contam o nosso negócio. Conte-nos sobre o seu negócio. Este botão será o retângulo deles. Borda branca pequena. estilo ficará escuro. Sim, é isso por enquanto e talvez o tamanho seja grande. Faremos os tamanhos grandes. Aqui também é de tamanho grande. E você também será um tamanho grande apenas. Voltando ao estúdio de bootstrap. Agora. Agora, o que faremos, primeiro criaremos um modelo. Em seguida, usaremos a consulta de mídia para ocultar tudo isso. Vou pegar um modelo sobre o seu modelo, e vou pegar este modelo, deixá-lo dentro desta tag de modelo de corpo é o modelo dash um. Basta clicar em Mostrar OU. Então, o modelo virá apenas remover este e o formulário que está lá, vou apenas duplicar este formulário. E vou colocar esse formulário duplicado dentro desse corpo do modelo. Agora isso está lá e este rodapé modal, eu excluirei esse cabeçalho. Acho que não. Precisamos desse cabeçalho ou vamos apenas digitar. Conte-nos sobre o seu negócio. O botão cruzado está lá. Onde o modelo deve vir. O modelo deve vir. Tamanho padrão em tela cheia. Ok, não é necessário tela cheia. Rolagem vertical, vamos ativar rolagem. Acho que não. Não há muita informação para torná-la rolável. Sim, vamos manter este formulário como está agora. Vamos pegar o formulário é smartphone ou não. Sim, este é um formulário inteligente. Agora vou apenas clicar em ocultar este modelo. Agora, queremos acionar esse botão específico para que os modelos ou o alvo seja alterado. Então, vamos jogar com esse alvo agora. O seletor agora é modelo. tipo II é o modelo de destino tão alternado. Feito. Isso é tudo. Então, voltando para esta área, e eu vou clicar neste botão. Agora o modelo está chegando nesta versão. Portanto, trazer o modelo é muito fácil usando essas opções de destino nos spandrels de opções. Sim, está feito agora, esse botão que queremos apenas nesta área específica quando o tamanho da tela for MD e abaixo. E quando o tamanho da tela for MDM abaixo, essa área específica não estará lá. Portanto, o botão não deve parecer que está tocando na parte inferior dessa coluna em particular. Daremos uma margem inferior para o botão também. Então, a margem inferior três ficará bem por enquanto. Se precisarmos, podemos torná-lo mais também. O modelo está pronto agora. Agora vamos brincar com a consulta de mídia. Estilos, novo arquivo CSS de estilo. E CSS personalizado estará lá. Clique duas vezes neste CSS personalizado. Basta clicar em Criar e vou digitar sua visualização da área de trabalho de pontos. Ele exibirá mais uma visualização móvel de pontos. Display, nenhum. Na visualização da área de trabalho. Eu quero isso, mas na visualização móvel eu não quero. Então, o que eu vou fazer, vou usar esta exibição de exibição de área de trabalho nenhuma opção é exibição de área de trabalho nenhuma. Então, vamos fazer esta aula aqui. E agora ele se foi. Vou apenas selecionar essa mídia, esse MD aqui, chegando a esses três pontos e adicionarei largura mínima de consulta de mídia 765. Se eu for acima, você pode ver que não temos isso. A razão por trás disso é a largura mínima 7068. Use esta exibição a partir disso e, acima, esse CSS será aplicado. Largura mínima é essa. Então, vamos fazer isso como o máximo. Este e o tamanho máximo da tela. Queremos isso. É assim que faremos isso. Para este botão específico. Pegue a visualização móvel, copie, cole-a aqui e simplesmente ative essa consulta de mídia. Agora, o que faremos agora isso é 7068. Vamos fazer isso 7671 pixel shot. Queremos neste tamanho de tela, certo? Então isso é 992991992. Certo? Sim. Agora está funcionando bem. Este tamanho de tela, temos isso assim que vamos para o tamanho da tela do celular, então este modelo estará lá. Isso temos justo o suficiente. consulta de mídia e o flexbox são feitos para essa área específica, e essa área específica está completamente pronta. Agora, basta salvar o arquivo. Vou salvar esse arquivo. Em resultado, vou criar apenas uma pasta aqui. Então, ele estará sob VSS de rolagem. E economize. Este arquivo está salvo agora, então sim, isso é tudo, isso é tudo para este vídeo. No próximo vídeo, o que faremos, começaremos a criar essa área específica. E isso é muito fácil. Nós só queremos pegar uma linha de contêiner, cabeçalho de coluna e algumas opções aqui. Então já temos essa imagem lá. Esta é uma imagem GIF. E então criaremos Mostrar mais detalhes. Botão aqui, que será redirecionado para a outra página. A mesma coisa acontecerá para este e para este também. Acho que no próximo vídeo estaremos cobrindo toda a lista de seções em apenas um vídeo. Justo o suficiente. Então vejo vocês no próximo vídeo, pessoal. Adeus. 34. Conclusão Da Página Inicial Do Projeto Dois: Ok, então vamos começar a próxima seção, que é essa área específica. Então, pulando de volta para o estúdio de bootstrap e neste tamanho de tela específico, o que vamos fazer E é simplesmente pegar um contêiner e soltá-lo nesta tag de corpo. Selecione este contêiner. Temos o contêiner aqui agora, basta pegar uma linha, selecionar as instituições de linha que temos coluna e novamente mais uma coluna. Então eu acho que vamos dar 646 para isso até segunda-feira. Será assim, e depois disso ele virá logo abaixo um do outro. Vamos começar a fazer isso. A primeira coisa que precisamos de um título. Título que vou pegar, também fico confuso entre o cabeçalho e o cabeçalho. Agora, às vezes, quando não prestamos atenção nisso, a leitura está aqui, então vamos apenas seguir o título aqui. O título é esse. Toda a sua empresa precisa sob o mesmo teto. Em cima para adicionar, vou pegar colá-lo acima de US $1,9, 9029. O que podemos fazer depois disso? Temos este parágrafo e , em seguida, temos esses parágrafos também. Decolonial não quer tecnologia chave. Dentro desta coluna somente. Isso será será resultado dado. Vamos fazer isso IID. Qual resultado técnico? Site estático. Vamos fazer uma coisa. Vou apenas copiar todas essas coisas e vou apenas fazer este vídeo avançar rapidamente da estática e todo o ícone B12 abaixo , esse ícone de tick. Vou pegar um ícone aqui. Este ícone verificará este 1 primeiro porque este é um novo conjunto de ícones, certo? Cheque está lá. Então, verifique dois que vamos usar, podemos usar este também. Isso novamente, farei isso rapidamente. Nós iremos, eu não quero perder seu tempo neste neste conjunto. Então, pegamos um ícone diferente e diferente em comparação com este. E temos um botão ao longo do ano, então vamos pegar um botão também seu botão btn. O que você vê é como ver mais detalhes. Veremos mais detalhes. Selecione o botão e estilo retangular será avisado. Vamos resolver. Este botão não será um botão, será um link. Basta colocar uma chave de hash ou depois mudaremos o link disso. Depois disso, o que precisamos, precisamos dessa imagem, essa imagem GIF. Vou pegar a tag de imagem, vou soltar em quem esta imagem queremos usar. Então, vamos escolher essa imagem diretamente. Clique em responsivo. Quero que isso venha no centro horizontal e vertical. Então, indo para esse menor tamanho de tela, ele é acessado. E irei para o Flexbox, verificarei essas duas opções e coluna este V a partir disso, estou fazendo isso no tamanho da tela porque a partir disso e acima isso vai afetar, certo? Portanto, está afetando todo o tamanho da tela. O que aconteceu? Oh desculpe, desculpe, desculpe. Eu me inscrevo, eu estava me candidatando nesta imagem. Eu estou errado. Não posso aplicar nesta imagem que quero carregar esta coluna, selecionarei esta e o menor tamanho de tela na verdade. E ambas as opções, como este, é um centro vertical. Este é o centro horizontal e este é o centro vertical. Agora eu posso ver como não é o Sentinela. Sim. Lá vamos nós. Agora, o que podemos fazer é ter duas cores diferentes aqui. Selecione este contêiner. Acho que uso. Então, tantas vezes alguém me disse para moderar o uso de sal porque estou usando isso, tantas vezes e às vezes é irritante. Acho que alguém me disse apenas neste curso, vou tentar fazer isso. Acho que esse é o meu hábito, não, sem problema. Acho que uso a margem top cinco. Vamos ver. Sim, está feito. Para a próxima seção dessa área específica, o que faremos, apenas duplicaremos essa área e iremos virar as duas. O que vou fazer, vou apenas duplicar isso. E entrando nesta linha, vou pegar esta coluna e vou mantê-la acima dessa coluna. É isso. Nada mais a fazer. Então o que queremos é este, copie, selecione, Colar. E agora desta vez será 29 $9. Site de comércio eletrônico. Queremos fazer tantas coisas nessa dinâmica. A mesma coisa. Agora este é um site dinâmico. Observe estática de um lado com o painel de administração. Então, para o resto das coisas que está dizendo, eu acho, sim, vamos parar as coisas que parecem vir para a próxima seção. Novamente, duplique este contêiner, volte para esta linha e basta virar os lados. Isso é rúpias EMS com chave 20. Apenas mude este também. Então, todas as coisas estão dentro de um. Sim. 29, $9 na verdade, qual é o custo de 20 rúpias em dólares? Usd. Inr, são 20 rúpias em US $0,27, ok? Será como 0,27 aluno por mês. Ele incluirá o GSD. Mais uma vez, usei a escola ou a escola por ano. E agora temos que copiar essa opção. Mais uma vez, o que vou fazer, vou apenas avançar rapidamente. Não quero desperdiçar seu tempo. Quando a cópia estiver concluída, começaremos. Essa área também está pronta e iremos passar para a próxima seção que sabemos o que você precisa para o seu negócio. Nós lhe daremos uma solução de negócios completa com parceiros de soluções de testemunhas confiáveis mundiais. Quem por isso, o que queremos fazer eq div, porque esta imagem está completa, idade para idade div é o que estaremos usando para essa div. Teremos a margem top cinco. Dentro desta div, vamos seguir em direção. Após o cabeçalho, tomaremos um parágrafo. Este será um cabeçalho alinhado ao centro que vamos usar é este. Então copie isso e dentro deste cabeçalho, cole este parágrafo, estaremos usando esta cópia. E no estúdio Bootstrap, cole isso aqui. Depois disso, temos uma imagem, depois esta imagem, solte-a dentro desta div. Clique duas vezes em casa. Acho que esta é a imagem, certo? Sim, esta é a imagem e clique em. Certo. Vamos ver a pré-visualização. Isso parece bom o suficiente. Mas acho que sim, nós demos uma cor de fundo a ele. O que queremos fazer. Acho que temos que levar mais um fundo dentro disso. E antes disso, queremos torná-lo uma imagem responsiva. Vamos fazer uma div dentro dessa div, e vamos mudar essa imagem dentro dessa div. Voltando à aparência, cor de fundo, e daremos uma cor de fundo escura a ela. Este é um ponto. Talvez essa imagem esteja lá. Demos um belo fundo escuro e vamos dar uma margem. Top, um pouco como a margem superior dois vai ficar bem. Acho que. Talvez três. Margem, os três primeiros são bons o suficiente. Depois disso, temos essa área. O que podemos copiar novamente esse contêiner, trazer isso abaixo dessa visualização ou, como vamos pegar isso, fazer sobre isso. Agora, dentro desta coluna, neste cabeçalho, queremos um parágrafo, queremos que seja tudo um cabeçalho, um parágrafo reinvestir tudo o que removeremos , incluindo este botão. Vou apenas $0. Linha central, ouvido comercial registrado no GSP. Não quero que este seja um parágrafo normal. Agora, para esta coluna, quero vertical e central. Centro vertical e horizontal. Então, chegando ao flexbox ambos, oh desculpe, vou redefinir isso assim que chegar ao menor tamanho de tela. Este, este e coluna, isso é tudo. Agora isso é incentivo, absolutamente central e essas opções estão lá. Temos que colocar essa opção. Então, acho que cometemos um erro ao excluir essas opções. Só venha aqui. Selecione tudo isso. Se precisarmos desse botão ainda, incluindo esse botão, eu copiarei ou você pode pegá-lo assim, copie dentro desta coluna. Agora, clique com o botão direito, cole, cole dentro. Isso é feito. Atualize este. Não atualizado. Redefinir. De volta a isso. Não queremos este. Este também. Gerenciamento de contatos. Mais uma vez, o que vou fazer, vamos avançar isso. Isso é tudo. Vamos ver a pré-visualização agora. Parece bom, absolutamente bom e fantástico. E agora queremos essa área em particular aqui. É muito fácil. O que podemos fazer, acho que você já adivinhou. Vamos fazer uma div. E dentro dessa div, vou tirar uma imagem, imagem de anúncio, imagem. Esta imagem que vou adicionar sobre posição deles será centralizada, o tamanho será coberto e a repetição será não. Isso é tudo. Então, vamos seguir um título. Acho que é um cabeçalho, cabeçalho e um botão. Um cabeçalho. Um botão. Linha central para cabeçalho, margem top cinco. Vamos fazer uma coisa. Basta selecionar esta div. Preenchimento, preenchimento, parte superior, preenchimento, inferior cinco. Isso é tudo. Margem superior. Esse será um bom número. Margem top quatro. Sim. Bom. O que está escrito dentro disso? Vamos expandir seus negócios juntos. Isso entre em contato conosco. Entre em contato conosco. Essa mudança para aquecimento, decoração, retângulo. Isso é tudo o suficiente para que tenhamos rodapé, rodapé, vamos simplesmente colocar um rodapé básico. Rodapé que vou pegar, vou cair neste corpo, vou pegar este rodapé escuro ou talvez esse alimento básico. Agora, os resultados do pé escuro são bons para ir porque não faremos nenhuma mudança na medida em que faremos que ele o manterá como está. Então o rodapé escuro estará lá. E essa div acho que não quero, quero que alguns não fossem algum espaço entre essas áreas. Vou selecionar esta div, darei uma margem inferior quatro também. É isso. Essa área específica que vocês são agora, vocês agora podem fazer esse serviço sobre o nome da empresa, todas as coisas que você pode mudar e você pode fazê-lo. O que você quer fazer? Desta forma, acho que fizemos com o nosso site primeira página. Nos próximos vídeos, faremos as próximas páginas do site. Vamos ver o que podemos fazer. Acho que o resto da página permanecerá o mesmo. Mas, novamente, essa solução de negócios, temos que usar esse GIF de animação. É muito fácil. E a mesma coisa que vamos repetir o ano também. Então o que vamos fazer, como se tivéssemos clientes, então sim, a animação, estaremos usando animação, você já sabe disso, então entre em contato conosco. Entre em contato conosco, estaremos lá. Sim. Agora, o help desk será o novo que vamos fazer, então as integrações de bate-papo ao vivo estarão lá, o que veremos. Ou seja, isso é tudo para este vídeo. E no próximo vídeo veremos algo novo. Não sei o que, mas sim, veremos algo novo no próximo vídeo. Vejo vocês no próximo vídeo, pessoal. 35. Projeto Solução De Negócios E Entre Em Contato Conosco Página 1 Do Projeto Dois: Então, bem-vindos de volta pessoal. Neste vídeo, estaremos projetando página de soluções de negócios. Vamos começar. Vamos criar uma nova página aqui. Vamos chamá-lo de solução de negócios. Certo, solução de negócios. E vou apenas clicar duas vezes sobre isso. Vamos começar levando nossa div aqui. Vou fazer uma div, então teremos uma mão livre sobre isso. E vamos pegar a imagem e apenas soltar essa imagem dentro deste clique duplo, vá para VS, que é solução de negócios e descobrir imagens lá estaremos usando esta imagem de capa e selecione, Ok, basta ligar a capacidade de resposta dessa imagem em particular. Selecione esta div e faça com que este centro se alinhe. Então, vamos ver a pré-visualização. Então, temos essa imagem ou o que temos aqui? Não faremos isso porque esse componente específico está em jumbotron. E no Bootstrap F5, o Jumbotron é eliminado. Agora, Jumbotron não está mais lá no Bootstrap. Então, vamos mudar o design um pouco. Dessa forma. O que acontecerá? Você pode ver que a imagem é ano, seja qual for a imagem lá, isso é completamente pixelizado. Você pode ver que as bordas não são suaves das imagens, mas o ADSR tudo é macio e doce. Certo, justo o suficiente. Então, avançando, então o que faremos agora a imagem está na linha central. Vamos adicionar um pouco de preenchimento a ele. Talvez eu coloque um preenchimento completo de dois. Depois disso, o que temos? Temos alguns componentes. Eu sei muito bem agora que você pode fazer esse design em particular. É muito fácil para você agora. Ainda assim, farei alguma parte disso. Então, vamos pegar um contêiner, basta soltá-lo dentro da etiqueta do corpo. Este contêiner está lá. Em seguida, a linha que vou pegar, selecionar a linha, pegar a coluna e duplicá-la, vá para Opções. Ele ainda MD, faça seis, depois adicione o menor tamanho de tela. A mesma coisa acontecerá com esta também a segunda coluna. Lá vamos nós. Depois disso. Nesta coluna em particular, tiraremos uma imagem. Então, a imagem vou colocar a primeira imagem será as primeiras imagens. Sabemos o que você precisa para o seu negócio. Então, essa imagem é a caminhada do escritório deles. E faça isso responsivo. Aquele Sol, e nesta primeira coisa vamos adicionar, então temos algumas fotografias que temos alguns parágrafos. E este parágrafo será e, como de costume, vou avançar rapidamente este vídeo. Em seguida, o ícone está lá. Mais uma vez. Vamos pegar esse ícone, clique duas vezes neste. E qual era o nome desse ícone? Este aqui. Altere algo para a página Business Solution. Duplique esse arrastar e soltar dentro dessa tag. Veja se você não consegue fazê-lo a partir daqui diretamente. Agora, digamos que eu duplique isso e o levei aqui e coloquei aqui. Essa coisa, se você não for capaz de fazer, o que você pode fazer aqui é apenas duplicar esse ícone aqui, sem problemas. É que eu coordeno, deixe-o dentro desta tag de parágrafo. Isso é tudo. Então agora você pode movê-lo deste ano para ano. Então você tem que colocar um espaço ali, o atalho de teclado para controle duplicado D. Para duplicar Control D é o atalho de teclado para duplicar e, caso contrário, você pode duplicá-lo daqui. Eu só queria obliterar esse ícone. Lá vamos nós. Portanto, essa área específica está pronta. A mesma coisa que faremos. Vamos apenas pegar este contêiner, contêiner completo. E antes disso, adicionaremos alguma margem inferior quatro a isso. Duplique isso. Na duplicação apenas embaralhará esta linha, coluna. Vou mudar a imagem. Qual é a próxima imagem? Registro? O que vou fazer, não vou mudar todas essas informações agora. Vou mantê-lo como é porque vocês sabem o que fazer. O que você pode fazer do seu lado é como apenas visitar o resultado técnico ponto n e, em seguida, ir para soluções de negócios. Então você pode simplesmente copiar e colar todas as informações de você. Sim, justo o suficiente. Agora, este, vamos embaralhar novamente. Dessa forma, faremos todas essas coisas. Então, esta imagem, eu vou levar essa coisa ou algo assim. E no final vamos adicionar um rodapé aqui, esse rodapé, e faremos no rodapé final na barra de navegação, faremos no final. Depois disso. O que temos aqui é a próxima página. Nós, o que queremos projetar? A é a página Fale Conosco. Crie uma nova página agora. E vamos nomeá-lo como contato. Vamos entrar nessa página de contato. vez, vamos tirar uma imagem dentro dessa div. Basta clicar duas vezes na imagem da pilha. Acho que apenas uma imagem está lá. Sim, uma imagem e clique em, Ok, Só para torná-la responsiva. Então, como de costume, pegaremos um recipiente. É assim que funciona. Há um assim que você souber sobre o que fazer e o que não fazer, as coisas se repetem de novo e de novo. Existem apenas algumas coisas novas que se aproximam. Tudo é CMC como eu peguei o contêiner e peguei a fila. Agora, eu quero três seções diferentes, então vou levar três colunas aqui. Na primeira coluna, vamos ver o que há lá. Na primeira coluna , entre em contato conosco, sinta-se à vontade para entrar em contato conosco, clicar ou tocar no número e todas essas coisas, depois horas de trabalho e soltar uma mensagem no mesmo formulário que está lá no homepage. Só uma coisa nova é que temos um botão aqui. Na verdade, isso não é uma coisa nova. Depois de clicar neste botão, você será redirecionado. Foi assim quem nos ajudou? E isso veremos apenas nesta seção específica. Vamos criar esse contato conosco que estaremos criando agora. Vou pegar um título. Basta basear esse caminho ali. E cabeçalho do parágrafo, vou fazer três algo que o parágrafo H3O será este. Whoops, não hesite em contactar-nos. Em seguida, clique triplo e selecione a linha inteira. Essa coisa acontece como 34 linhas vem extra. Este é o número. Mais uma vez, o que você pode fazer é pegar um link. Essa coisa que fizemos em nosso projeto anterior, que é um projeto de site de uma página. Vamos pegar o cabeçalho insere este link, eu apenas solto todos vocês. Remova este link. Selecionarei este link, venha para o painel de atributos. E faremos uma classe de decoração de texto, nenhuma e fixa escura. Essa coisa que demos a esse link. Agora vamos apenas digitar um número menor que nove, o que o código do país. Em seguida, inseriremos um número. Basta reduzir esse tamanho. Colocará o ícone dentro deste link somente. Venha para dentro do cabeçalho. Calendários acima que estão cheios. Eu acho. Selecionamos este link e vou digitar dois pontos. Colon, vai digitar o, hum, mas você sabe exatamente como funciona, certo? Então vamos pegar um botão, soltar este botão, inserir esta coluna, iniciá-lo. Mais uma vez. Vamos pegar nosso ícone. Solte-o dentro deste botão. Um espaço. Este ícone será suporte. Vamos declarar essa fonte incrível para suporte. Eu corrigi com mais sorte. Mude a cor para manhã. E isso é tudo o que escrevemos aqui é uma mesa de sucesso. Como não temos o bloco opcional ano, quem irá para Aparência? Vamos fazer disso uma porcentagem. Também. Vá para decorações e opções, decorações e retângulo. Este é um link, na verdade, converterá isso em link. E, por enquanto, vamos colocar uma chave de hash aqui. Então, quando fizermos o nosso ponteiro mais alto, ele virá assim. Certo, justo o suficiente. Voltando ao estúdio de bootstrap, vamos dar uma margem, top cinco para isso. Então, teremos um espaço extra e entre em contato conosco. Vou recorrer ao H12. Sim, lá vamos nós. Agora temos esta seção. Avançando para a próxima seção, estaremos criando isso funcionando nosso. E como você já adivinhou, isso também é muito simples. Vou apenas duplicar este e deixá-lo aqui. E vamos digitar o horário de trabalho. É isso. Horas de trabalho. Então, segunda, terça, quarta, queremos essa maneira particular. Temos duas opções. Podemos novamente pegar uma linha e torná-la estrutura de coluna de linha. Ou podemos pegar uma mesa aqui. Basta soltar uma mesa aqui. Basta excluir esse cabeçalho das coisas. Então vou começar a digitar os dias. Vamos pegar o tempo. Vou apenas copiar esse tempo e começar a colar. Isso não será nada. horário de sábado é bem diferente. Não trabalhe aos sábados. Este estará mudando a cor do texto para este feriado. Nesta seção está concluído. E agora, para esta seção, queremos esse formulário novamente. Então, vou apenas para o índice. Vou selecionar essa área. Vou pegar este formulário, copiar, copiar e entrar em contato conosco. Selecione com o botão direito. Por dentro. Isso foi feito. E todas as informações como forma inteligente e tudo isso já está lá. Isso é tudo que eu penso. Então, está feito. Queremos fazer com que a resposta móvel você realmente vá para a largura são as colunas, uma coluna, duas e o terceiro carro. O que a tela diz que é a LG. Lg será para, para, para, para todos em MD. Não pense assim. Parece bom. Do MD e tudo isso será concluído para grades de poços. E vamos dar a margem inferior a todas as colunas. Selecione as duas colunas e, em seguida, vamos digitar margem inferior quatro. Temos um espaço entre todas as colunas ali. Isso é tudo. Estamos prontos com esta página também entre em contato conosco. Além disso, o que temos, entre em contato com a casa. Nosso cliente. Veja que podemos fazer isso de forma muito simples. Também. No próximo vídeo, o que faremos, veremos em relação ao OSI. No próximo vídeo, vamos projetar o OC. Oc é o discurso do nosso cliente. Ok pessoal, Obrigado por assistirem a este vídeo e nos vemos no próximo vídeo. 36. Projetando OC Do Projeto Dois: Bem-vindo de volta pessoal. Neste vídeo, vamos projetar nossa página OCI, que é o argumento do nosso cliente. Vamos criar uma nova página aqui e vamos nomeá-la como OC. Vai para essa página aqui. O que vou fazer primeiro, vou fazer uma div. E dentro desta div, ou talvez antes disso eu selecionarei essa div primeiro e darei uma altura fixa de 300 pixels a ela. Esta é uma altura fixa de 300 pixels para essa div. E agora vou rolar para baixo até o plano de fundo. E nisso, vou clicar em Adicionar imagem. Na primeira, a primeira opção que é URL, vou clicar neste ícone Adicionar aqui, vou para a pasta OC. Selecionarei esta imagem e clicarei em. Certo. Assim que eu clico em, Ok, Como temos uma altura para a div, essa imagem está agora dentro da div. Agora faremos algumas alterações no tamanho da posição e na seção Repetir. Então, posição, vamos mantê-lo como tamanho central, vamos mantê-lo como cobertura. Repita. Vamos mantê-lo como não repetido porque não queremos que a imagem seja repetida se o tamanho da tela estiver mudando e a borda da imagem estiver lá. E depois disso, essa idade, a imagem se repetirá novamente. Se eu ver nos diferentes tamanhos de tela, parece muito bom. Ele ajusta isso automaticamente. O fazer ajusta automaticamente a imagem dentro dela e fornece a saída adequada. Ok, então este está pronto. E a mesma coisa que podemos fazer com a página Business Solution também, o que fizemos aqui. Então, o que posso fazer é, em vez de colocar a imagem dentro dessa div, vou remover essa div daqui. Selecionarei esta div e darei uma altura fixa a essa div afirmando como 300 pixels. Rolando para baixo e clicaremos em Adicionar imagem. Clique neste sinal de mais. E eu vou para esta pasta BSS, desculpe, BS, e este é o nosso GIF de capa, eu selecionarei isso e, em seguida, clique em, Ok. Então o que posso fazer é selecionar a posição para centralizar e depois o tamanho para cobrir. E não é repetido. A repetição não será repetida. E selecione essa div. Eu irei para o painel de atributos e vou colocar a margem inferior três, e é isso. Talvez a margem inferior quatro seja boa. É isso. É um v diferente de manter nossos elementos dentro de um fazer. E se virmos nossa prévia, se eu vir nossa prévia, vou tirar este ano. Parece assim. Agora, se você quiser aumentar a altura dessa área específica, também podemos fazer isso. Vou minimizar isso e isso é tudo. Então, voltarei para nossa pasta OCI aqui. E agora vamos começar o resto da porção, ou seja, acho que é muito simples, mas vamos levá-la muito rapidamente. Então, vamos pegar um contêiner, selecionar o contêiner e o atributo que será margem de quatro será bom. E então vou apenas seguir uma direção. Vou colocar o título aqui. Vou apenas digitar cliente feliz ou talvez clientes. E então eu vou pegar uma fileira aqui dentro deste um contêiner. Mais uma vez, sua margem, margem superior de quatro para esse contêiner. Agora, dentro deste contêiner, vou pegar uma coluna. Como de costume. Dentro desta coluna, vou pegar um cartão. O cartão está lá, e eu não preciso desse outro texto aqui subtítulo. Talvez eu possa usar esse subtítulo. E agora, se eu for para a imagem, vou pegar essa imagem e colocarei exatamente acima do corpo do cartão. Ele virá aqui. Você é o que podemos colocar é como o nome do cliente ou da empresa e o negócio. Certo, justo o suficiente. partir de agora, vou tirar uma imagem aleatória aqui. Talvez este esteja bem. partir de agora, este será um logotipo da empresa. Então eu vou simplesmente duplicá-lo algumas vezes. Talvez quatro sejam bons. Vamos ver a pré-visualização. Certo, isso é bom o suficiente. E então quatro é bom. Isso significa que temos que levá-lo de uma forma em que quatro grades para cada coluna. Então, estou selecionando todas as quatro colunas de uma só vez. Eu vou, o que eu vou, o que eu fiz é selecionar o primeiro e pegar o meu ponto mais alto do último, segurar a tecla shift no teclado e clicar nisso. Então, todos os quatro são selecionados na largura. Então, esse é o tamanho da tela, é LG para LGA que lhe dará como quatro ou desculpe, não, não cheio como três. Então, para MD, darei como seis, como absolutamente vem para MD. Será matriz de dois por dois. E no tamanho da tela inferior , será uma ferramenta completa. Agora, esse cálculo específico foi aplicado a todas as quatro colunas. E está muito bonito. E da mesma forma, selecionando todas as quatro colunas ao mesmo tempo. E abrirei todas as colunas aqui um por um. Selecionarei o cartão. Então, vou segurar a tecla Control no meu teclado e, um por um, selecionarei todos os cartões. E então vou, no painel Opções, procurarei decoração. Aqui está uma declaração. As sombras, vou colocar uma pequena sombra ali. Então, vamos ver a pré-visualização. E você pode ver que a pequena sombra está lá. Talvez não esteja tão bonito. Então, vamos tomar uma sombra normal. Agora é como sim, Agora a sombra é aplicada corretamente aqui. E agora entrando no painel de animações e no efeito de pairar, vamos criar o que você sentiu que podemos dar. Este é bom. Sim, é bom o suficiente. Então, como exatamente ele ficará sempre que um ponteiro do mouse aparecer em cima disso, ele passará assim. Justo o suficiente? E digamos que se você quiser, como se não exatamente, você é como alguém quer, qualquer um que queira um recurso como esse é uma empresa, certo? Então eles precisam de um link aqui, de forma como qualquer cliente. Se eles clicarem nesse link, eles serão redirecionados para o site da empresa. Certo, então como podemos fazer isso? Então, nesta coluna, pegaremos um link. Basta soltar esse link dentro dessa coluna, e esse link é o certo. Então vou pegar este cartão e colocarei este cartão dentro deste link. Vou apenas remover esses textos de link do ano. E agora o que aconteceu aqui é como agora o texto está na cor azul e o subtítulo é que eles têm subjacente e tudo. O que eu tenho que fazer seus ys, eu vou apenas vir, você seleciona o link na classe. Vou digitar a decoração de texto nenhuma e texto escuro. Isso está tudo de volta à seção padrão agora. Então é assim que você tem que fazer com todas as outras cicatrizes, todas as outras cartas também. Você pode excluir este cartão e excluir esta coluna. E você pode duplicá-lo mais uma vez para que o link lá dentro de todas as colunas. E agora, se você for para o painel de opções e estiver no URL, poderá digitar o URL. Então, vou digitar barra de dois pontos HTTP com chave classroom.com. Vou dar-lhe um alvo em branco, então ele será aberto em uma nova guia ou em uma nova janela. Portanto, as páginas são atualizadas. Então é aqui que o link está lá. Depois de passar o mouse por mais de um ano, você pode ver aqui, onde está meu ponteiro do mouse? Você pode ver que o link é exibido ali. E se eu clicar nesse link, levarei para obter o site da sala de aula. Estou apenas fechando agora. Isso é tudo. Feliz. página do cliente ou nosso cliente pj está concluída. No próximo vídeo, o que faremos, voltaremos à nossa página Fale Conosco e começaremos a criar talvez este lance um ticket, veremos no próximo vídeo, pessoal. 37. Finalização Do Website Multi Page Do Projeto Dois: Neste vídeo, vamos conectar esse ticket de lançador de seção específica. Então, para isso, usaremos um aplicativo de terceiros chamado Fresh desk. Vou digitar a mesa Fresh aqui. Este é o URL do Fresh desk. Existem outros aplicativos como Zoho desk, Zendesk. Você pode usar qualquer um que quiser. Para mim, a mesa Fresh é boa o suficiente. E isso não é uma promoção do preconceito. Isso é o que eu pessoalmente gosto. Certo, então vamos criar uma conta aqui. Testes gratuitos fazem login. Primeiro, mostrarei o preço. Você saberá por que exatamente diferente disso, para uma pequena organização, é gratuito, totalmente gratuito para agentes ilimitados. Se você é uma organização pequena, então o Fresh desk é muito bom para iniciar a coisa. Usaremos duas coisas nas duas coisas. Um deles é Fresh desk em um é um novo bate-papo ou eles o renomearam, talvez alguma coisa. Vamos ver. Começaremos com o Fresh desk primeiro ou apenas criaremos uma conta de avaliação gratuita. Por aqui. Está me dizendo que se inscreva com e-mail. Então, definitivamente, vou clicar em inscrever-se com e-mail. Vou digitar meu nome, não este endereço de e-mail, meu endereço de e-mail do Yahoo. Vou colocar o nome da sua empresa. Vamos colocá-lo como escola de nuvem. Este é o nosso próximo projeto ou o próximo projeto, seja lá o que for, estamos projetando um sistema LMS. Então, a escola de nuvem está lá e usaremos a mesma coisa para o número. Talvez eu possa usar esse número completo. Vamos ver se ele ainda não foi usado. E a localização dos dados é a Índia. Acho que funciona. Então, obrigado por escolher a Fresh desk. A conta Fresh desk está pronta e comece. Acho que tenho que confirmar meu e-mail. Basta atualizar esta página sobre você. Ative conta, a conta de atividade e pronto. Acho que está feito agora. Então, pressione alguns atalhos estão vindo na minha frente. Sim, agora temos que dar o URL do nosso canal de help desk. Tão fresco faz uma espécie de nuvem. Legal. Acho que apenas a escola em nuvem não está disponível. Sim, esse endereço não está disponível. Cloud School dará suporte ou talvez a ajuda seja apenas encontrar ajuda. Esta é a ajuda do painel da escola em nuvem. Ajuda do painel da escola na nuvem. Dot fresh does.com será o URL. Clicaremos em Avançar. Não resolva apenas. Surpresa. Algo está chegando. Então, vamos esperar por isso. Agora. Em seguida, convide a equipe. Então, agora você pode começar a convidar a equipe colocando o endereço de e-mail com a frequência, mas não temos uma equipe, então continuaremos com isso apenas. Eu farei isso mais tarde. E suporte. Precisamos de um endereço de e-mail do google ou do Outlook ou outro onde a conversa acontecerá por meio disso ou então a conversa acontecerá. Usando isso semelhante ao suporte na escola de nuvem vermelha, dash H dot Fresh desk.com. Então, para mim, está tudo bem como uma demonstração. Então, parabéns, você é Fresh. A mesa está pronta e vamos começar a usar o novo, por padrão, esses três tickets estão lá. É um bilhete fictício. Você pode saber que é uma etiqueta fictícia, uma, fictícia. E vamos clicar neste ticket View aqui. Você pode ver o ticket como exatamente ele está lá está tomando uma ferramenta para mim agora, uma ferramenta passo a passo ou cinco etapas. Então você pode ler tudo como eu sei todas essas coisas já. Para mim, não é tão necessário. Depois de começar a investigar isso. E uma vez que vamos a isso, quando chegarmos à seção onde vou ensinar em detalhes sobre a mesa Fresh e tudo no mesmo curso. Dessa vez, vou explicar todos os detalhes aqui. E até o momento, continuaremos apenas com esse processo de integração. Então, agora vamos com configuração onde o painel de administração está lá. Vamos clicar em admin e , em seguida, basta clicar no portal aqui. Basta clicar no portal. E esse é o URL do portal. E digamos que se eu clicar neste URL, então o que exatamente está vindo na nossa frente? Então, é isso que é o URL do portal, e é assim que nossos clientes verão esse portal. Acho que a mudança do design. Anteriormente, não era assim. Agora eles mudaram o design realmente parecia bom, muito bom. Parece muito bom. Vou pegar esse URL e vou apenas copiar. Volte para o estúdio bootstrap. Selecionarei este botão aqui. E isso já é um link. E vamos colar o URL ali, pressionar Enter e o destino ficará em branco. Dessa forma. Se formos visualizar o ano do nosso site, e se alguém clicar neste URL, ele será redirecionado para nossa página de Help Desk. Esta é a nossa página de help desk da escola em nuvem. Isso é todas as outras coisas que estão lá. Veja todos os ingressos. Acho que este é o conselho de agentes na verdade. Se eu sair. Então, como será sim. Sim. Eles mudaram o design realmente para serem muito francos, enviaram um ticket e navegam artigo e você pode pesquisar algo se o artigo estiver lá. Esta é a base de conhecimento. Chegaremos em breve com frequência, outra base de conhecimento estará completamente vazia. Então é assim que é. Então, ele só fará login mais uma vez. Este é meu endereço de e-mail. Vou colocar minha senha. Continue para a mesa Fresh. Ele irá para o painel de administração mais uma vez que nosso portal estiver configurado. Este portal que acessamos recentemente. Agora vamos para o widget na conta gratuita. Só podemos usar um widget egito. E a partir de agora, um widget é suficiente para nós. Então, basta clicar em criar um widget e vou nomeá-lo como bate-papo. E vamos clicar em Criar ao longo do ano. Bem-vindo ao suporte, e é assim que ele ficará. Então isso é ajuda e tudo o que podemos digitar. Vamos mantê-lo apenas para ajudar. Nisto temos um formulário de contato. Vamos ver se você rola para baixo aqui. Não, não, desculpe, não este ano só se eu desligar isso. Então, isso é como artigos em branco e de suporte. Portanto, esses são apenas artigos de suporte lá. Vou transformar as duas opções no artigo de suporte e este neutro, e este é o outro. Mas assim que terminarmos nosso período de avaliação de 21 dias e depois de passarmos para a seção gratuita de três da conta, isso não funcionará, então vou continuar na aparência. Podemos mudar a cor de acordo com a nossa marca, então temos essa cor e, em seguida, cor sólida, também temos outras cores sólidas. Estes são os gradientes, então vamos pegar este. E isso é uma coisa pequena onde você pode ver isso nós notificamos você preso em algum lugar como blá, blá, blá. Este é o código principal que você deseja. Então, vou apenas copiar esse código. E para salvar todas essas coisas, vou clicar em salvar aqui. E economias economizadas. Copie esse código com esse código incorporado. Copie esse código incorporado e venha ao bootstrap studio. Salve este projeto primeiro. Configuração de ir para. A configuração e vá para o conteúdo principal. Porque se você voltar aqui, diz como, você pode incorporar esse widget em seu site ou produto usando esse código. E temos que colocar esse código, o script dentro do nosso componente principal. Vou colar esse código aqui. É como depois do conteúdo e antes. Então vou depois, vou colá-lo aqui e clicaremos em Salvar. Depois de clicar em Salvar, voltarei ao nosso projeto de visualização do Studio bootstraps . E lá vamos nós. Agora temos esse ícone de Ajuda aqui, e isso está em todas as páginas porque nós, chegou à configuração e depois colamos esse código. Não entramos nessa opção de configuração de página individual e colamos esse código. Portanto, essa opção está em todos os lugares. Agora, se eu clicar, você pode ver a cor e o nome e-mail. Todas essas coisas estão aqui. Agora, este é um chat ao vivo. Você também pode chamá-lo como chat ao vivo, mas isso não é um chat ao vivo. Este é um sistema de suporte a tickets. E se você quiser criar um live e se quiser criar um chat ao vivo. Então, para o ano de bate-papo ao vivo, temos no Fresh desk, como em novos trabalhos, na verdade, temos um novo mensageiro. Podemos fazer isso também, mas não faremos isso nesta seção específica para que tenhamos uma seção completamente diferente. Nessa seção, veremos que, por enquanto, nosso sistema em particular está pronto. Agora, o que temos que fazer é ir para a página de índice, selecionar esta barra de navegação. Antes disso, temos que nomeá-lo também irá para navbar. Vim para Navbar. O primeiro será o lar. Segundo, o que pode ser talvez solução ou talvez Business Solution. Solução empresarial. O terceiro, talvez possa ser de perfil mais baixo. Então podemos fazer diretamente para o OC. E então vou levar mais uma vez. Será contato. Contato. Vamos conectar esta página inicial do Pages será índice, solução de negócios será a solução de negócios. Clique em Perfil e vá para a página e , em seguida, vá para o perfil será nosso cliente. E a página de contato será a página de contato. Temos que projetar este também logo após o envio do formulário. Faremos isso. Uma vez feito isso, uma vez que vinculamos tudo aqui, vou clicar neste nav, clique com o botão direito do mouse. Vá para copiar e colar, venha copiar para e venha para vários por sua vez nesta opção Vincular cópias e marque esta caixa para que nossa barra de navegação seja copiada para todas as páginas e ela será vinculado a todos. Então, sempre que mudamos em uma barra de navegação em todas as páginas ao mesmo tempo. Ele será atualizado e apenas clicaremos em Copiar. Agora eu tenho que ir um por um em pêssego um por um. E eu tenho que levar essa barra de navegação de baixo para cima. Top significa logo abaixo deste corpo. Entre em contato também, você também está depois de fazer a mesma coisa. Índice, já é feito no OCI também, tenho que fazer este. Sim, lá vamos nós. Agora voltando para a pré-visualização, se eu vir aqui agora tenho minha barra de navegação. Se eu for para a solução de negócios, esta é a minha solução de negócios e essa é a ajuda que seu olho irá para o perfil. Então esse é o meu perfil e nos ajude novamente. Então, se eu entrar em contato, meu contato também estará lá. E uma vez que eu preencha o formulário, eu tenho que ir para essa página em particular chamada após o envio para que você possa criar qualquer coisa aqui. Então, o que podemos fazer a partir de agora é apenas pegar um contêiner aqui, selecionar este contêiner, colocar uma margem superior para H2. É como um traço vazio para margem de quatro, vou pegar um ícone, clicar em B, talvez um ícone de polegar para cima. Venha para o painel Aparência. Estou indo um pouco rápido porque acho que porque acho que você sabe como fazer isso agora, vou apenas mudar a cor, chegar à altura, altura, tamanho da fonte na verdade. Então aumentarei o tamanho da fonte. Logo abaixo disso, vou colocar uma etiqueta de cabeçalho, dar o título aqui. Nunca nenhum tipo. Obrigado por entrar em contato conosco. Vamos ter realmente o que eu fiz aqui é uma vez que eu quero vir para a próxima página e se eu pressionar apenas enter, será como, ok, a edição está pronta. Mas se eu quisesse chegar a uma próxima linha, na verdade não p, acho que chamo de página, mas não de pêssego. É linha. O que vou fazer mudou eta, e agora vou digitar. Nós entraremos em contato com você o mais rápido possível, torná-lo H4, e todo o contêiner, vamos levá-lo para o centro. Vamos pegar o botão, botão aqui. Volte para a página inicial, chegando às Opções e, em seguida, o estilo será avisado para torná-lo amarelo. Ele será um link, e este link o levará ao índice. Agora volte à nossa página Fale Conosco e selecione este formulário. Sim, ele já está redirecionado para este. Então, sempre que alguém preencher este formulário, ele será redirecionado para lá. Vamos testá-lo. Vamos testá-lo. Esta é a minha informação, GSD, então, qual projeto eu não vou gostar projeto de várias páginas. Vamos digitar teste. Mensagem. Clique em Enviar mensagem. Verifique isso. Não sou um robô enviando. Sim, é isso. Obrigado por entrar em contato conosco. Entraremos em contato com você o mais rápido possível e clicaremos, voltamos para Casa e voltamos para casa. Isso é tudo pessoal. Acho que você entendeu como projetar este site de várias páginas, como vincular esta página? Formulário inteligente, o Help Desk é como muito básico que vimos, mas sim, você sabe exatamente como vamos usar este Help Desk, Live Chat e todas as outras coisas. Se você tiver alguma dúvida, por isso, faça uma pergunta ou junte-se ao meu canal Discord. Então este é o URL do canal de discórdia, que diz que este link receberá x-bar em sete dias, o que eu fiz ontem e eu disse naval e clique ano. Espero que isso esteja lá. Ou então, o que você pode fazer é colocar seu endereço de e-mail e eu lhe enviarei um convite para lá no disco em branco na discórdia e você pode se juntar a mu lá. Então, sim, as duas maneiras que você pode fazer e meu endereço de e-mail é conduzir o condutor atual em yahoo.com. Você pode colocar um e-mail lá para pedir no link branco da saia. E então podemos ter sessões de bate-papo por lá. E às vezes podemos entrar em sessões ao vivo, ao vivo também no Google Meet ou algo assim. E podemos discutir lá com os problemas comuns são perguntas comuns que vocês têm. Por enquanto, esse resultado do peck está pronto, e nós o veremos na próxima seção deste curso. 38. Criação Do Projeto LMS Do Projeto Três: Olá e seja bem-vindo a outra seção. E nesta seção vamos projetar o sistema LMS, que é o sistema de gerenciamento de aprendizado. Então, o que faremos, em vez de criar um modelo em branco, começaremos a usar o modelo padrão ou o modelo fornecido pelo Bootstrap studio no aplicativo. Vamos começar a projetar o site. Vou clicar em novo design aqui, e vou nomeá-lo como escola de nuvem. Cloud School. E usaremos este modelo de administração do SB ao longo do ano. Então, basta clicar neste modelo de administração do SB e eu clicarei em personalizado. E eu quero usar todas as páginas, seja qual for, o que estiver disponível aqui. Vamos clicar em Todos. E vou ligar isso para que ele seja adicionado na barra de navegação também. Então, para nós também é fácil. Na marca. Vamos digitá-lo como descrição da escola em nuvem da escola em nuvem. Podemos deixá-lo em branco. Note, não se preocupe. E então eu clicarei em Criar. Este é o modelo SB Admin. Este é o modelo de administração na verdade, mas a partir desse modelo de administração deste modelo de administração, vamos criar um front-end bem como um painel de administração também. Então, é como nos dois sentidos. painel de administração e este sistema LMS projetando este sistema LMS é de tal forma que é como um módulo de usuário e administrador. Se você for para a sala de aula infantil, é como administrador de instrutor, módulo de usuário. Mas é como duas larguras, módulo de usuário e administrador e o administrador também podem ser instrutivos e o administrador também. Então, o que vamos projetar primeiro é que vamos projetar o usuário aplicado. Isso é o que temos na nossa frente agora e não queremos muito disso. O que faremos primeiro é ver essa escola de nuvem e o ícone de que precisamos. Vou apenas clicar duas vezes neste ícone e vou digitar alto. Vou procurar nuvem aqui. Quando estou falando, é difícil para mim digitar, então eu digito outra coisa enquanto falo. Ok, então este é o ícone da nuvem e eu só vou clicar em Ok, então temos um texto de escola na nuvem e na nuvem aqui. São duas divs. Em 1D, temos o ícone e em outra div temos o texto. Não queremos essa barra de navegação lateral na verdade. No admin, vamos usar isso, mas no final do usuário não queremos essa barra de navegação lateral, mas queremos isso para coisas como um é ícone e um é o texto. Selecione ambos. E vou vir aqui, arrastar e soltar na outra seção na outra barra de navegação, você pode ver outra barra de navegação também está lá. Estou apontando uma flecha para lá. Usando animação. Vou liberá-lo aqui. Ele virá ao lado da barra de pesquisa. E então essa barra de navegação, essa barra de navegação que eu não preciso no final do usuário, então vou excluí-la. Uma vez que eu excluo isso se torna uma página inteira, navbar e, em seguida, o resto das coisas, o que quer que esteja lá. Novamente, não preciso disso nesta área específica. Então, selecionarei este painel e vamos ver como de onde ele está neste contêiner. Então, se excluirmos esse contêiner, ele funcionará? Sim, funcionou. E não queremos este também que seja o rodapé e esta página superior. Podemos usar e vamos ver. Se quisermos usar podemos e orais, excluiremos isso. Certo? Então este é o contêiner div. Queremos essa div porque dentro dessa div, o nav, mas ele também está lá. Seja o que for que vamos fazer, faremos isso apenas dentro deste contêiner. Antes disso, o que faremos, usaremos um esquema de cores diferente aqui, como um modo escuro do site. Chegando aos recursos. Se você chegar à pasta de recursos que compartilhei com você no arquivo BSS, você pode encontrar como escola de nuvem aqui nos recursos. Se você for para Recursos, você encontrará esse CSS de alteração personalizado. O que você precisa fazer é apenas arrastar e soltar o arquivo CSS e soltá-lo dentro desta água traseira. Agora você pode ver que essa área específica está escura agora. Agora, para alterar a cor dessa barra de navegação você também precisa selecionar a barra de navegação primeiro. Verifique se a cor de fundo está lá ou não. Se estiver lá. Como neste exemplo, é branco. Então, basta clicar aqui e clicar em Padrão, que ela chegue a uma área padrão, seja qual for a cor dada a essa barra de navegação específica. Mas, como muitas vezes ou é transparente, ele está chegando à seção escura porque importamos esse CSS um arquivo CSS e ele está mostrando essa coisa em particular. E vamos selecionar essa barra de pesquisa e podemos alterar a cor do primário para o escuro. E lá vamos nós. Queremos essa coisa em particular, como mensagem de notificação do que o usuário. E agora isso é, há duas coisas. Vamos mudá-lo. Selecionarei esta barra de navegação completa e irei para o ano de aparência a partir da cor do texto. Na verdade, a cor do texto está aqui e podemos torná-lo branco de você. Isso é tudo o que está feito. E este, faremos isso manualmente, como branco passo a passo. Este, eu acho que é de onde exatamente isso vem. Texto cinza uma CAs é aplicada, texto cinza 600 anos. Vamos tornar o texto branco. Lá vamos nós. E podemos remover esse estilo do seu. Agora, vamos dizer esse ícone, ícone. Ok, então vamos ver que cor podemos usar lá. Sim, nós o tornamos branco. E este sino de notificação, novamente, temos que torná-lo branco. Tanto assim. seção Navbar está pronta e temos que continuar com a outra. Então veremos navbar passo a passo. partir de agora, está feito. Nós mudamos para o, removemos a barra de navegação lateral, mudamos a cor, importamos um CSS. No próximo vídeo, veremos mais uma barra de navegação que vamos projetar e que aparecerá somente quando estivermos usando dispositivos móveis. Então vejo vocês no próximo vídeo, pessoal. 39. Criando Navbar para visualização móvel do projeto três: Ok, bem-vindo de volta a este vídeo. Neste vídeo, vamos projetar uma barra de navegação, que será apenas para dispositivos móveis. Este agora está aqui, e eu vou pegar outro navbar. Vamos pegar este navbar e eu vou deixá-lo aqui. Certo exatamente. Sim. Este aqui logo abaixo do corpo e deixe que seja o que estiver por vir, nós vamos consertar tudo. Então, vamos selecionar essa barra de navegação e chegar às opções aqui. E na posição, esta é a terceira opção que está posicionada. Basta selecionar esta opção e clicar em fixo para baixo. Depois de clicar nisso, isso ninguém chegará à área inferior. Acho que não precisamos disso agora, então vamos excluir isso. E também não precisamos desse novo ícone agora, não do ícone da marca, do nome da marca aqui. Excluiremos esse nome de marca também. E agora vamos para a visualização móvel e então começaremos a projetá-la. No celular você. Assim que chegamos à visualização móvel, esse ícone de hambúrguer veio e não queremos isso. Então, novamente, selecionarei essa barra de navegação expandir. Eu farei isso como sempre. Ele o manterá sempre no expoente. Agora temos que ver o que todas as coisas temos que colocar aqui. Acho que as coisas básicas que queremos facilidade, uma será a casa. E então também teremos uma seção chamada meu aprendizado ou talvez meus cursos. E, em seguida, lista de desejos, então conta e pesquise. Acho que temos três ou quatro opções por lá. Vamos excluir isso para você porque queremos trazer um ícone para lá. E eu vou desligar esse botão ativo aqui. E irei ao ícone, ícone pesquisa e solto o ícone nesta área específica. E solte o ícone ou remova esse texto. Isso resolva esse ícone estará em casa. Qual casa deve ser usada. Vamos ver. Outro ícone. Deve ser muito fino e aparar o tipo de coisa. Então podemos usar isso, mas vamos ver. A primeira casa está lá, então o ícone de pesquisa está lá, ok, então o vídeo, o vídeo não é tão bom. Podemos procurá-lo para jogar também. Este está bom. Em seguida, definindo ou talvez conte, conheça ou usuário. Temos todos os ícones, então podemos usar essa linha. Incrível. O primeiro é em casa. Estou selecionando este ícone Home aqui e clique em Início. Acho que você entendeu exatamente o que vamos fazer. Selecione este item agora e duplique este. Clique duas vezes neste item de navegação. E a próxima será a pesquisa. Vamos selecionar nesta pesquisa aqui. E vamos duplicá-lo mais uma vez. Desta vez, será um ícone de botão de vídeo ou reprodução. Este é o ícone do botão de reprodução. Depois disso, temos lista de desejos. Sim, a lista de desejos pode ser o coração deles. Espero que seu coração esteja lá. Graças a Deus. Nós não verificamos. O último será usuários. Certo. Temos esses ícones há mais de um ano. E então selecionaremos tudo. Desculpe, estou pressionando lacunas August selecione tudo e venha para a classe e apenas digite margem, esquerda, margem esquerda ou direita. Só um segundo. Temos que fazer preenchimento. Três é demais. É suficiente. Em seguida, margem também. Às vezes, essa margem não funciona no navbar, então, dessa vez, o que você tem que fazer? Como vamos supor que vamos pegar este apenas e depois selecionar este primeiro e ver quanto espaço está disponível aqui. Tentei dar um pouco de margem porque estamos usando o Flexbox também. Um pouco de margem onde daremos uma margem do lado direito. Ok, então digamos que cinco margens cinco sejam boas o suficiente. Basta pegar este e aplicar margem cinco a cada um deles. Que eles podem ter um pouco de espaço ali. Veja o que estou fazendo é que estou apenas selecionando um por um e copiando e colando isso. Mas mais uma opção está lá. Agora selecione todos os itens de navegação só vez e apenas dê a margem a eles. Também será fácil para você. Digamos que dez seja bom o suficiente. E então venha para a fonte e o tamanho da fonte, aumentaremos uma fonte para talvez 20. Ok, agora vem para a opção Nav ou talvez o equipamento de navegação. Selecione o recolher nav e vá para as opções e basta clicar em Center. Desculpe, selecione isso e clique em Centro. Agora está no centro, então selecione o nav e, em seguida, venha para o alinhamento e, em seguida, selecione centro aqui. Agora temos essa barra de navegação, que é centralizada alinhada. E eu selecionarei esta barra de navegação chegará à Aparência. E eu tenho que dar a cor, essa cor escura aqui. Então, vou apenas chegar a este segundo plano. Vou clicar aqui. Vamos pegar a ferramenta conta-gotas. Clique sobre isso. Vou colocá-lo no favorito também. Isso não é um favorito, então vou selecioná-lo e ir para as fontes. As fontes, vou deixar o formulário branco. Acho que tenho que deixar o ícone branco um por um. Este branco. Só estou fazendo isso. Vou apenas fazer o avanço rápido. Essa é uma maneira de projetá-lo. E vamos dar um pouco de uma aparência e sensação diferentes para que pareça muito emocionante. O que vou fazer é chegar ao painel Opções aqui. Painel de aparência, ou simplesmente desça e selecionarei essa borda. Vou selecionar essa borda, ou talvez toda a fronteira. E vamos dar um raio. E vamos tentar torná-lo uma curva. 150 é suficiente, 50. E nós vamos, você está no topo. Eu selecionei o mutuário do mapa navbar, você está certo. Eu farei isso. Fundo de margem. Vamos tentar fazê-lo em um site por site, um pouco por lado, digamos que cinco sejam suficientes. E vamos tentar dar um espaço extra aqui. O que podemos fazer lá, acho que o preenchimento será a melhor opção para isso. Acolchoamento, certo? Está funcionando? Não, está acontecendo dentro dessa margem, certo? margem está funcionando. margem cinco é boa para o lado direito ou para o lado esquerdo também definitivamente vamos dar cinco apenas. Certo? Vamos dar alguns passos para baixo. E agora, em vez de dar essa cor, o que estou pensando é como o que podemos fazer, em vez de dar essa cor ou cor direta direta que podemos usar um gradiente ali. Então gradiente, vamos ver como podemos fazer isso. Como podemos fazer isso significa que gradiente temos que usar escuro para claro ou claro para escuro. Vamos ver. Selecione este. Design. Selecionarei essa cor. Mais uma vez. Vou para Selecionar. Então. Vou levá-lo para o lado mais leve. azul não funcionará adequadamente. Isso o que você diz pessoal? Como o gradiente parece bom? Não, não para mim. Acho que não. Parece bom. Na verdade. Deixe que seja assim apenas. Sim. Acho que é tudo o que podemos fazer. Além disso, suas pernas selecionam este Ícones. Não exatamente eu causa esses itens de navegação e podemos reduzir o tamanho de uma fonte. É muito grande, então podemos torná-lo pequeno. 16 é bom, e também demos o preenchimento em algum lugar. Ao adicionar um, removeremos esse preenchimento. Ok, agora é falso corretamente. Agora, temos que agora barrar um ou o superior está na parte inferior, mas essa barra de navegação só vamos usar quando estivermos na tela do celular que então, esse NaBr não estará lá. Para isso, temos que usar a consulta de mídia. E essa consulta de mídia que vamos ver no próximo vídeo. Vejo você no próximo vídeo. 40. Desenhando LMS Landing Page Do Projeto Três: Ok, então vamos começar a criar o resto da área. Antes disso, temos que importar alguns dos elementos ou talvez alguns dos recursos de você. Esta imagem de capa que queremos e esses ícones do curso que queremos. Então, chegaremos à nossa seção de imagens e criarei uma nova pasta chamada cover, onde vou colocar apenas uma capa. E criarei mais uma pasta para criar mais uma pasta e vou nomeá-la como banner do curso. Basta clicar duas vezes nesta pasta do curso. Vou arrastar e soltar esses banners nesta pasta de imagem de banner do curso, pasta de banner do curso. E eu virei descobrir ou talvez eu selecione ambos isso e ele o deixará dentro desta capa. O outro não está coberto, mas deixe estar, vou mantê-lo lá. Ok, então temos nossas imagens agora conosco e vamos criar o resto das coisas. Então primeiro vou pegar um contêiner e vou cair dentro disso, como eu disse, vamos fazer tudo dentro desta, essa div. Peguei um contêiner e dentro deste contêiner vou pegar um div, div e deixá-lo dentro deste recipiente. E agora, dentro deste contêiner, queremos tirar nossa imagem de capa. Então, estou tirando essa imagem aqui. Clique duas vezes nesta imagem e vá até nossa capa e selecione esta imagem. Clique em OK. E lá vamos nós. E temos que ativar a opção de resposta que você aqui. Lá vamos nós. Temos esta imagem que importamos e sua imagem grande. E vamos ver exatamente como ele vai na visualização móvel. Opa, ele se foi. Acho que vamos ver onde temos. Acho que demos nossa consulta de mídia para essa div, nos escondemos no celular. Não deve ser o seu, na verdade, deve ser apenas para esta barra de navegação. E vou apenas digitá-lo aqui. Agora isso se foi. E para essa imagem, temos que fazer uma coisa que temos que reduzir o tamanho da imagem. Ok, no estúdio Bootstrap, temos a opção de abrir diretamente essa imagem em um editor de imagens como Photoshop ou GIMP ou qualquer editor de imagens que tenhamos. E a partir daí podemos fazer isso. Então, vamos fazer isso. Na capa. Selecionarei esta capa, clique com o botão direito do mouse em Abrir e clicarei no Photoshop. Então eu tenho o Photoshop no meu sistema. Estou abrindo no Photoshop. E uma vez aberto no Photoshop, photoshop está abrindo ou lá. Agora, a foto é chamada diretamente dentro do Photoshop. E no caso de você não encontrar essa opção, como abrir no Photoshop. Então você encontrará essa opção aberta, mas você pode clicar neste editor configurado. Então você encontrará os editores que você tem em seu sistema. Ou você pode simplesmente clicar em Adicionar Editor. E você pode encontrar alguns dos, basta clicar nesse arquivo de recurso ou talvez no iniciador desse editor de imagens em particular. Talvez como o GIMP ou o Photoshop ou qualquer coisa. Basta clicar no iniciador e clicar em abrir aqui. E então ele entrará nesta área de lançador particular. E, em seguida, você pode selecionar o editor padrão. Só estou cancelando isso. Estou voltando para o Photoshop e vou cortar esta imagem batendo C. Vou apenas tirar este ano, apenas uma fatia desta cabeça para baixo. Acho que isso é suficiente, certo? Basta clicar em Enter. E agora eu só preciso ir Arquivo e clicar em Salvar. E basta clicar em OK. E isso é tudo. Se eu for ao meu estúdio Bootstrap de novo, lá vamos nós. Agora já está feito. Ele é editado. Ele é cortado corretamente. Certo, isso é o que eu queria e isso é tudo. Selecionarei essa imagem e começarei a editar ainda mais com isso. No estúdio Bootstrap. Ele só chegará ao painel Aparência e rolará para baixo até a área de bordas. Selecionarei todas as bordas aqui e darei um pouco de área de curva. Você pode ver aqui um pouco de área de curva, talvez até 18 ou 20 esteja bem. Certo, 20 é bom o suficiente. Lá vamos nós. Agora temos uma imagem adequada dentro disso e vamos ver a visualização no navegador. A visualização não está ativada, então vou clicar na pré-visualização. E lá vamos nós. Temos a pré-visualização, mas temos muito espaço vazio aqui. Então, como consertar esse espaço vazio? É simples. Basta clicar neste contêiner e ativar essa opção fluida. E vamos voltar à nossa pré-visualização. Haverá lá, temos essa opção sobre você. Acho que ainda é uma grande imagem. Temos que cortá-lo mais. Então volte para o estúdio de bootstrap, venha para a capa, clique com o botão direito do mouse. Abra e abra no Photoshop novamente. Ele abrirá a imagem no Photoshop. Lá vamos nós. Vamos cortá-lo um pouco mais. Vamos mantê-lo daqui e vamos cortá-lo da área superior. Acho que isso é justo o suficiente. Você vai para Arquivo, clique em Salvar. Voltar ao bootstrap Studio verá isso. E o seu, vamos ver. Lá vamos nós. Vamos parecer muito bons como pequenos e decentes. Certo, tudo bem, justo o suficiente. Vamos começar a projetar a próxima parte. É aí que podemos ver os cursos. Para isso, vou pegar um título. Vou deixar esse título dentro deste contêiner. Este é o título, vou apenas digitá-lo, digitar seus cursos e farei H12. Este, eu tenho que torná-lo branco. Basta vir sua fonte e clicar nesta área branca ou em seu texto branco. Temos que dar uma margem. O Top 33 é bom o suficiente. Margin top três é boa o suficiente. Sim. Certo. Agora, a próxima área, o que vamos projetar facilita a área da lista de cursos. Para isso. Vamos pegar uma linha e deixaremos cair essa linha dentro deste contêiner. Uma coluna dentro desse contêiner, uma coluna dentro dessa linha. Selecione isso. Vou pegar um guarda. Coloque esse cartão dentro disso. Lá vamos nós. Então, o que queremos título, queremos legendas, queremos essa área que possamos usar, mas não queremos esses links. Então, vamos remover isso e vamos ver se podemos usar isso ou não. Se não precisarmos disso, podemos excluí-lo. Essa área será a área de título. Então, vamos nomeá-lo como o mesmo curso. Bootstrap Studio 5.9, ou talvez encontre 0,9 x o que aconteceu? Vot bootstrap Studio 5.9 x DBs passo a passo. Claro, algo assim. Você é o subtítulo, algum subtítulo estará lá. E o que podemos colocar uma classificação, classificações que podemos colocar certo? Então, vamos tomar uma extensão aqui, dentro deste parágrafo. Esse vão. E dentro desse espaço vou pegar o ícone. Na verdade, quando você vai projetá-lo como um site dinâmico, dessa vez você não usará esses ícones e tudo mais. Deixe-os. Você terá um pacote se estiver usando qualquer framework, digamos uma estrutura lateral ou algo parecido. Você terá um pacote e a partir daí, você estará usando isso. Então, dessa vez, você não usará isso na verdade. Mas só para dar uma boa olhada, estamos usando essas estrelas aqui. Selecionarei todas as cinco estrelas aqui. Vamos dar um pouco de preenchimento. E nesta área de texto, vou apenas remover esse texto e entre colchetes. Então, vamos digitar 123456 alunos ou talvez não alunos. Podemos torná-lo uma classificação 123456. Essa área é boa o suficiente e você está obtendo essas fronteiras e todas essas coisas porque adicionamos o CSS no início. Há CSS personalizado, arquivo CSS de ponto de alteração personalizado em que todas essas coisas já estão lá. Em seguida, vamos tirar uma imagem. Esta imagem, vou colocá-lo direito sobre essa etiqueta de corpo, papelão JTAG na verdade tag de corpo do cartão. E ele clicará duas vezes sobre isso. E iremos ao banner do nosso curso. E selecionaremos isso. Bem, digamos, vamos selecionar este. Então este é o nosso estúdio de bootstrap como o vencedor maravilha, bem, seja lá o que for, essa área está feita. E sombra, eu não acho que não. Temos que aplicar alguma sombra porque já está escura e qual é a utilidade de dar isso? Mas sim, podemos dar animação a ele. Então clique em passar o mouse. Este aqui. Vamos ver. Sim, está funcionando corretamente. E quanto temos que dar. Talvez possamos dar 33 é bom. Então, até que a LG possamos dar 43. Então este é MD, momento, este é MD. Em MD, podemos dar talvez 4444. E então, o tamanho inferior da tela, acho que seis é suficiente, como dois por dois ou talvez possamos passar por um por um também. Isso também é bom. Muito bem também é bom, não é grande coisa. Vamos duplicar isso. Algumas vezes. 1234 vezes está bem. Este tamanho de tela, vamos mudar isso para banners de cursos diferentes para que ele pareça um pouco diferente. Um por um. E títulos também, podemos alterá-lo. Podemos nos afastar agora, podemos colocar Lorem Ipsum. Então, vou selecionar isso. Meu título vou controlar e vou digitar labrum. Opa. Controle D lorem, insira, insira Lorem Ipsum. Não tanto. Digamos que se o título do nosso curso é grande, mas obviamente daremos um limite de caracteres de 60 para que possamos fazer um título de SEO adequado por lá. Mas, novamente, se tivermos muito, muito texto aqui, podemos fazer algo ou você, Vamos ver o que podemos fazer na área de texto. Mas faremos isso no próximo vídeo. 41. Finalização da página de aterragem do LMS do projeto três: Ok, então continuaremos onde nos resta. Portanto, não queremos essa área longa ou então e z. Agora isso é textos curtos, então temos esse espaço em branco aqui. O que podemos fazer é selecionar essa área de texto. E nesta opção de texto, vamos apenas virar e ativar essas duas opções para todo esse texto muito grande loop que fará isso apenas. Então, será como apenas um forro e não haverá distúrbios na interface do usuário. Estas são tags de cabeçalho com h4. Não queremos H4 lá, então H5 também é bom o suficiente para isso. Isso é resolver. Vamos selecionar este e vamos colocar outro texto de Lorem Ipsum ali. Temos um título diferente lá. Alguns títulos diferentes aqui. E novamente, algum título diferente aqui. Certo. Que tamanho estrangeiro faz isso, Gary, este parágrafo? É quando 16. Na verdade, não queremos que isso seja como 16. Então, selecionaremos todos os parágrafos segurando a tecla Control e clicando um por um em todo o parágrafo. Apenas reduzindo o tamanho para 12. Temos que dar alguma coisa aqui. Na verdade, porque eles se conectaram uns aos outros, na verdade, não queremos assim. Então, basta recolher todas as colunas aqui. uma só vez. Selecionarei todas as colunas. Pressione Control, desculpe, pressione segurar, tecla Shift e selecione todos. E o fundo da margem é bom, eu acho, ou talvez três. Sim, três são bons o suficiente. E agora vamos ver a pré-visualização. Lá vamos nós. Nós temos essa prevenção Agora, você resolveu essas imagens uma a uma ao carregar para isso também para ir com um SEO melhor, otimização de mecanismos de busca. E mesmo que você vá e verifique o teste de velocidade do site, ele sempre recomendará que você use imagens de ponto WebP. No momento, estamos usando todas as imagens PNG de luz. Portanto, sempre recomendará que você use imagens WebP. E novamente sempre recomendará usar o carregamento preguiçoso. Vamos ver exatamente como podemos ativar o carregamento lento no Bootstrap Studio selecionará as imagens, todas as imagens um a uma clicando, pressionando a tecla Control e clicando nas imagens, vá para Opções. E aqui temos a opção chamada carga preguiçosa e podemos torná-la preguiçosa. Isso é tudo. Se você puder ver no CSS ao longo do ano, carregamento é igual a preguiçoso. E agora é, podemos dizer que fizemos um pouco de otimização por lá. O que significa exatamente carga preguiçosa. Agora você pode ver se as imagens, essas imagens específicas na parte inferior da página onde essa área específica não está visível até agora. Dessa vez, essas imagens não serão carregadas. Isso ajudará o site a carregar mais rápido. Em vez de carregar todas as imagens que estão, que ainda não estão na frente da tela. Acho que isso é bom o suficiente, mas sim, temos que colocar o preço lá. Mais uma vez. Temos que adicionar preço a tudo isso. Faremos isso. O que fazer? Vamos seguir a direção. Vamos colocá-lo ano, e isso será H3 ou talvez H4 também seja bom. E depois pegue um ícone. Este ícone será o ícone da moeda, na verdade, como sou da Índia, então usarei minha moeda, ou seja, ou seja rupia 99. Vou digitar aqui. Vamos ver a pré-visualização primeiro. Agora. Parece muito bom, não tão ruim. Voltando ao estúdio de bootstrap, tenho que duplicar isso. Traga isso. Novamente, duplique isso. Nós o trazemos aqui. Duplicar, duplicar. Olá. Oblíquo e traga para você. Certo, justo o suficiente. Agora, esses muitos cursos são bons para ir a partir de agora. Eu acho que em vez de podermos fazer algumas mudanças você lá também, como se parecesse muito grande, então podemos torná-lo pequeno. Pequeno significa o que podemos fazer, selecione todas as colunas sobre você. Em vez de três. Podemos ir com dois. Vamos ver exatamente como parece. Na verdade, parece bom nesse tamanho. Vai mantê-lo assim apenas. Temos isso. E se tentarmos diminuir o tamanho da tela, ele toma a área adequada. Não é? Você pode brincar com isso. E para mim, acho que é bom. E depois disso, criaremos mais uma seção. Não exatamente seção. Vamos criar mais um cabeçalho aqui é o meu título. Cabeçalho. E vou deixar isso dentro deste contêiner porque quero isso logo abaixo daquela linha. Você é exatamente, eu vou fazer isso H12. Isso para uma cor branca. Vou digitar você obter o certificado de conclusão do curso em vez de simplesmente copiar e colar. Leve-o para o alinhamento central. E darei margem top cinco. Coloquei um bom espaço ali. O que vou fazer, vou colocar isso dentro de uma div, na verdade dentro desta div. E essa div, farei isso como um alinhamento central. E eu removerei o administrador central deste. Dentro desta div, vou pegar um parágrafo, largar este parágrafo dentro desse parágrafo, vou chamá-lo como realizar teste de auto-validação e obter certificado. Estou apenas copiando e colando os dados que tenho. Mas vocês, vocês digitam os dados. Estou salvando isso de novo. Agora vou seguir uma fileira. Vai levar essa linha dentro desta div. Então vou pegar uma coluna. Dentro desta coluna, vou pegar a tag de imagem. Clique duas vezes na tag de imagem. Temos essa imagem que eu queria ver major. Agora vou abrir esta imagem, vá para Opções abaixo nesta resposta. Você acabou de duplicar este do outro. Vou apenas excluir essa imagem. Vou colocar 21 etiqueta de cabeçalho ali. Acho que temos que levá-lo para fora desta div. Não queremos que isso venha em um elemento central. Esta div, vou levá-la acima dessa regra. Certo. Justo o suficiente. Esse título será chamado como instrutor. Então, vamos pegar o parágrafo, na verdade. Em um parágrafo, vamos digitar algo muito aleatório Mulher-Maravilha. Tudo bem, vou duplicar isso e vamos tomar isso como muitos mitos de controle. P, duplo Enter, Enter, Enter, lote de epsilon. Esta seção em particular eu quero branco completamente. Então, para selecionar essa coluna, venha à aparência. Para a coluna completa, estou dando cor branca. E também quero esses textos em particular, como todos os três textos devem vir como no centro, como no centro horizontal. Então, vamos para o painel Opções e no flexbox. Então, vou abrir este Flexbox. Vou clicar neste centro. Vamos ver de onde eu quero isso no centro. Seu primeiro consertaremos essa área de coluna. Em seguida, iremos para o Flexbox. Acho que não há problema em sair. Este é SM. Sm, queremos seis. Em seguida, selecionei ambas as colunas. Então você é, é um após o outro. E do seu é lado a lado. Quando é um após o outro. Eu quero que isso venha em uma área central assim. Então vou ligar apenas um segundo. Só queria selecionar esta coluna. E o segundo , não ambos, acabou de fazer neste centro e em coluna e neste. Ok, então se eu chegar ao maior tamanho de tela agora, você pode vê-lo. Ele vem automaticamente para o centro horizontal. Este é o centro horizontal. Você pode ver o Centro e isso é deixado. Essa área está pronta. Uma última coisa que podemos fazer é colocar uma. O que podemos fazer aqui, vamos colocar um vídeo lá. Desculpe, vou levar mais uma div lá. Esta div. Para esta div, vamos dar uma margem top quatro. Vamos fazer um vídeo. Este é um vídeo, então div, vou levá-lo para o centro para que o vídeo chegue ao centro. E agora, em vez deste u2, vamos pegar um Vimeo porque o YouTube, você sabe, como exatamente o levaria, como apenas copiar o URL ali. E este é o Vimeo. O Vimeo também parece pegar o URL. Isso é tudo. Está feito. Na verdade. Basta copiar este link. Deixe-me remover isso e colar isso. Agora este é o seu título. Vamos remover o título e mostrar o autor. Remova esse autor também. Este aqui. Isso é tudo. Só teremos os controladores lá. Agora, se eu for para nossa pré-visualização. Sim, agora o vídeo está lá e você pode clicar neste vídeo para placa. Sim. Eu também recebi algumas perguntas em que alunos como vocês estão me perguntando como exatamente adicionar um vídeo HTML5 aqui e que vou cobrir, eu escrevi que também tenho que cobrir isso ponto particular que abordaremos quando vamos pegar um servidor real e quando vamos carregar nossos arquivos no servidor real, porque precisamos de um servidor de onde podemos armazenar esse vídeo e chamar esse link de vídeo também. Isso é feito a partir de agora. Está feito. Sim, isso é tudo. Mas antes disso, se chegarmos ao tamanho do nosso celular, esse vídeo está escondido por trás disso. E temos que consertar isso. E também quando chegamos ao tamanho da tela do celular, este vídeo está saindo da área. O que temos que fazer em vez dessa largura, 60 pixels? Temos que manter um 100% e , em seguida, ele estará na forma de porcentagem. borda azul está indo atrás da nossa barra de navegação, que é a barra de navegação inferior. Então, o último, o que podemos fazer, selecionarei esta div aqui, venha ao painel Aparência. Eu tenho que dar um fundo de margem tal forma que não caia em cima dessa área. Cubra esta barra de navegação. Tenho que dar muita margem. Digamos que 50 seja justo o suficiente. Acho que essa imagem é boa. Portanto, isso tem controles individuais e este também tem controle individual. Nesta área, também nesta div, ou talvez este contêiner, o contêiner completo, eu tenho que dar uma área superior de margem para ele, que tem algum espaço extra ou espaço extra ali. São todos caras. Acho que esse design de página em particular está pronto. Apenas esta área do meio. Faremos isso à medida que avançarmos. E, a partir de agora, esta página em particular está concluída. No próximo vídeo, criaremos mais uma página que é o discurso Detalhes do Curso assim que você quiser clicar neste curso. Portanto, ele deve ir para uma página de detalhes do curso, aquela página que vamos projetar e que vamos projetar em nosso próximo vídeo. Vejo vocês no próximo vídeo, pessoal. 42. Criando e Ajustando Outras Páginas para LMS Of Project Three: Neste vídeo, continuaremos criando nossa página Detalhes do curso. Então, para isso, o que faremos, selecione esta página de índice. Vou duplicar esta página de índice e renomearei isso como detalhes de Gore. Ok, então chegando a essa página, não precisamos de todas essas coisas agora. Selecionarei tudo e excluirei essa área. Vou selecionar esse contêiner. E vindo aqui. A primeira coisa que temos que fazer é pegar uma etiqueta de cabeçalho, soltá-la aqui, e este contêiner, vou apenas selecionar esse contêiner, chegar à aparência. Todo o contêiner, vamos torná-lo branco. Esta tag de cabeçalho será H2. E vamos nomear isso como o nome do curso. Só paga isso. Podemos fazê-lo H12 ou um também. H1 também está bem, não é um problema. Então vamos pegar um parágrafo. Este parágrafo será legendas, para que possamos colocar um texto lorem ipsum nisso. Podemos ter mais uma linha aqui onde podemos colocar outros detalhes, como o ID do curso de leitura. Podemos colocá-lo como mais recente, atualizado em e colocaremos alguma data lá. Assim que isso for feito dentro deste contêiner, tomaremos uma linha. Pegue a linha aqui, e vou soltar esta linha dentro deste contêiner e selecionar o, selecione a linha. Vou levar a coluna dentro desse contêiner, e vou levar duas colunas aqui. E uma coluna será para vídeo e outra coluna será para a outra, outro conjunto de informações. Selecionarei a primeira coluna, venha para as opções. Certo, até a LG chegar aos 84. Vamos ver exatamente como funciona. Vou colocar uma tag de vídeo sobre seu elemento de vídeo. Isso, vou mantê-lo como HTML5. Mais tarde, adicionaremos o URL e todas as coisas. Mas, para a largura, faremos isso como uma largura e altura de 100%, faremos isso como 350. Isso é suficiente por enquanto. E na segunda coluna vou colocar mais um cartão. Na verdade, nenhum mais nesta página é o primeiro cartão. Este título selecionarei e o darei até o ano. Será um ícone de rupia. Então, estou pegando um ícone lá. Clique duas vezes neste ícone e pesquise as moedas envolvidas. Seja qual for a moeda envolvida que você quiser, você pode levá-la. Este será, digamos phi 99. legenda será incluída neste curso. Em seguida, colocaremos algum conjunto de informações como uma duração total do curso, como sob demanda, sete horas, 15 minutos de vídeos. Então, daremos mais uma coisa chamada Lifetime Access. E então teremos esse chamado anexo. Em seguida, daremos um certificado também. Em seguida, informaremos reembolso de 30 dias garantido. Em seguida, removeremos esses dois links daqui. Não queremos esses links lá. Agora, dentro deste corpo, vamos pegar uma linha dois, adicionar duas coisas. São dois botões. Na verdade. Selecionarei essa linha e colocarei essa coluna ao duplicar essa coluna. E agora vou pegar o botão btn. Ele colocará o botão, um botão aqui. Vou duplicar isso e jogarei na coluna. Selecione este primeiro botão para chegar a Aparência. E como não temos a opção Bloquear agora, então o que temos que fazer é ir para a largura e fazer a largura 100%. ano também faz a largura 100%. Então este será a lista de desejos. Este botão já será. E adicione à lista de desejos. Vamos fazer isso como esboço porque não queremos mostrar o foco ali. E a China, vamos mantê-lo assim apenas. Quando chegamos a esse tamanho de tela. Digamos que md. Está indo drasticamente abaixo disso. O que podemos fazer, em vez de digitar em duas listas de desejos, podemos colocar um ícone. O Oeo removerá todos os textos de lá. Como o efeito psicológico não mostrando nada que o usuário não o lê. Mas vai dizer, ok, é uma lista de desejos. Então, vamos colocar um coração ali com o contorno apenas. Agora, esta coluna em que o coração está lá, vamos simplesmente embaralhar isso, que agora, vamos trazê-lo em primeiro lugar. E este, daremos um pouco de espaço extra. Todos os tamanhos de tela. Talvez. Vamos frequência cardíaca, coração um para o qual vamos levá-lo. Este é pequeno e este é grande. Esse tipo e vídeo como eu disse a você, assim que avançarmos, vamos pegar esse vídeo também. Ok, então esta área está pronta. E avançando, temos que tomar agora acordeão. Este é o acordeão e caindo dentro deste recipiente. Então este é acordeão. Vamos colocar alguma margem superior de margem sobre o topo da margem deles, vamos fazer é bom o suficiente, eu acho. Sim, esse espaço é bom. Digamos, vamos tentar 33 também é bom, não é um problema. E aqui saberemos o que exatamente virá. Aqui está o nome da seção. Nome da seção. E dentro disso, vamos colocar este. O que você diz? Os títulos, a palestra, o nome do vídeo para isso. O que temos que fazer ao longo do ano 0s, temos que pegar linha dentro disso diretamente, colocar este texto dentro de uma linha. Ele virá automaticamente dentro da coluna. E vamos duplicar isso. Desculpe, não o parágrafo duplicará esta coluna mais uma vez. Esta coluna em todo o tamanho da tela, daremos talvez muito menos área, menos grades, na verdade, talvez duas ou algo parecido. E isso será um momento como 0335, algo assim. E esse texto será alinhado dessa maneira. E também podemos trazê-lo mais como se um também fosse bom o suficiente, porque nem todos os vídeos serão no nosso. Então é por isso que está tudo bem. Este permanecerá parecendo. Este é o título do vídeo. Na verdade. Esta linha estará em loop aleatório. O que podemos fazer, sua facilidade, vamos colocar uma borda, borda inferior, sólida. E este será o título do vídeo. Algo assim. A linha completa dará margem inferior. Faça. Acho que será bom o suficiente? Duplicado. Este será o segundo vídeo. Já está lá. Você pode brincar com o, o que você diz? Jogue com a opacidade e tudo mais. Vamos ver a pré-visualização agora. Você pode ver que a pré-visualização é assim e não queremos esse tipo de coisa H2N. Então, chegaremos a este contêiner. Selecionaremos esse contêiner no estúdio de inicialização e desativaremos essa opção fluida. Agora vamos ver a pré-visualização. Sim, agora parece muito bom. A altura também não é tão satisfatória, satisfatória. Então, vamos aumentar a altura, talvez 400. Vamos ver mais uma vez. Agora está tudo bem, mas de qualquer forma, teremos o vídeo dessa vez que ele tomará automaticamente o tamanho. Este você pode mudar, você pode colocar alguns, o que você diz? Opacidade ou algo assim. Então, vou excluir essa linha, selecionarei esta linha mais uma vez e na aparência. Então, iremos até a área da fronteira e vou reduzir a raiz de opacidade 25%. Então, parecerá algo assim. Acho que está tudo bem por enquanto. Podemos colocar algum preenchimento nisso. Talvez margem inferior para gostar disso. A mesma coisa para este também. margem inferior 0 já estava lá, mas não estava bem. Acho que este parece muito bom. Podemos reduzir alguma opacidade para essa linha. Foi 0,25. Talvez possamos levá-lo para dez ou algo assim. 0.199, algo assim. E então, você sabe, é como, ok, está bem. Na verdade, você pode fazer isso duplicar, duplicar, duplicar, duplicar, duplicar, duplicar várias vezes. A mesma coisa acontecerá com a próxima seção. Este será o nome da seção. Este será o nome da seção. Se chegarmos à nossa prévia, você pode ver que é bom o suficiente aqui. A única coisa como o fundo, que gostamos, você pode ver uma cor branca aqui é, nós temos, é porque o corpo da página é branco. Assim, podemos selecionar esta tag corporal e chegar a Aparência e chegar ao segundo plano. Isso é branco. Certo. Venha aqui e selecione essa cor e clique em Selecionar. E agora vamos ver exatamente como ele se parece. Sim, ele se foi. Está lá, mas está tudo bem. Você pode mudar a cor e agora você sabe como mudar a cor do corpo também. Estes são os vídeos como antes de qualquer pessoa comprar seu curso ou algo assim, eles podem ver os vídeos aqui. É semelhante à Udemy, boa sala de aula e todas as outras plataformas que estão disponíveis no mercado. Dessa forma, podemos projetar isso e esta página em particular é feita agora porque é um curso de usuário único significa que haverá apenas um instrutor para esta plataforma. Portanto, não entraremos em muitos detalhes sobre isso. Isso é tudo. Nessas seções como dentro desta, você encontrará este título de vídeo e o tempo do vídeo, a duração total que você poderá ver nesta área específica até agora e todas essas coisas como vamos estar projetando isso, mas será como se você clicar em Comprar agora o, quando você vai projetar este site e dinâmico, vamos ver. Se possível, podemos fazer uma coisa usando esse design. Podemos fazer mais um curso no PHP Laura usará, você pode tornar este site dinâmico. Não tenho certeza sobre isso, mas se estiver lá, definitivamente vou informá-lo. E se você clicar agora, essa caixa de diálogo do gateway de pagamento de reserva virá e você preencherá todas essas informações lá. E então você mudará para sua página de checkout. Não exatamente checkout, minha página de cursos ou algo assim. Mas também temos que ver exatamente como ele se parece na visualização móvel porque não queremos sobrepor isso e está se sobrepondo. Selecione o acordeão. E onde está aquele ano acordeão? Quero dar margem a ele agora. Essa margem de botão e a margem inferior eram 50, acho que da última vez Vamos ver o Quadro 50. Não, ainda há alguma área lá, então talvez seja 5555 também não é suficiente. Sessenta e cinco. Sessenta e cinco é como, ok. Sim, podemos trabalhar nisso. Como se não fosse um problema. Por que exatamente isso está saindo da área agora, faça isso neste tamanho de tela. Em seguida, a segunda coluna em cada linha é para o tempo. Temos que selecionar a segunda coluna em cada linha para o carimbo de data/hora. Então vamos dar um, acho que um estava lá, certo. Vamos um por um até MD. Está tudo bem. De que tamanho é MD, MD, temos um problema. Então a LGB dará este ano, daremos talvez 33 seja bom para você. E você também está bem, então três e ano um e descanse. O que faremos, selecionaremos todo o texto aqui. Vamos selecionar todo o texto que é parágrafo ativará essas opções. Então, digamos, por acaso, vamos fazer um filme de Lauder. Se o título for muito grande, então o que temos que fazer, selecione a primeira coluna de cada linha, que será o título do nosso curso. Este é o MD. Md, vamos dar como den da LG. Nós podemos fazer isso. O tempo é agora que acho que é adequado para todos os tamanhos de tela, sim. E devido a isso, somos capazes de controlar a duração da sentença. Acho que por enquanto está tudo bem. Ele está funcionando corretamente sem problemas. Mas se você encontrar algum problema, então você pode me enviar seu arquivo de origem no condutor atual na taxa yahoo.com. Ou podemos conversar pelo canal de discórdia onde todos vamos nos unir muito em breve, e espero que isso muito em breve. Se vocês demonstrarem interesse em se juntar a isso, esta página está pronta e vamos fazer mais uma coisa. Por aqui. Temos notificação de mensagem removerá esta mensagem como. Em vez de mensagem. Vamos manter isso como lista de desejos. Não é inútil. Temos que levar o coração dela aqui. Vou pegar esse coração e isso caiu. Na verdade, não preciso de um menu suspenso aqui. Vou excluir este. Isso também é um menu suspenso, acho que sim. Isso também é suspenso e também não preciso de um menu suspenso. Este item de navegação é o menu suspenso, então duplicaremos esse item de navegação. E o que quer que esteja lá dentro disso, que é uma queda, suspenso. Eu removerei o menu suspenso e colocarei um ícone dentro disso. Esse ícone virá nessa posição específica. Portanto, não se preocupe. Basta selecionar isso e digitar coração aqui. Vou pegar esse coração. E agora selecionando esse item de navegação, venha para a opção flexbox e basta clicar nessa área central. Lá vamos nós. Agora não é o centro. Novamente, duplique isso. E agora nesta área, vamos pegar um vídeo ou talvez um botão de reprodução, que será este. Isso é tudo isso. Agora eu DM nos levará dois nos levará à página da lista de desejos, e haverá um link também. Então, vamos pegar um link que levará este link dentro deste e removeremos esse texto. E mais um link dentro do outro, que é o vídeo. E solte esse ícone dentro deste link. Selecione este link e remova o texto. Certo, justo o suficiente. Selecione este ícone, venha à aparência porque temos que torná-lo branco novamente e torná-lo branco. Este vídeo também o torna branco. Onde ele, onde está, onde está pronto para ir. Temos este agora. Ainda assim, ok, então criamos esta lista de desejos e reprodutor de vídeo. Vamos duplicar esta página mais uma vez e vamos nomear isso como, o que é esse vídeo significa, aprender ou talvez, desculpe, meus cursos, meus cursos. E então estamos apenas um minuto, excluiremos isso meus cursos. O que faremos em vez disso, chegaremos à nossa página de índice. E vou duplicar essa página de índice, clique duas vezes. E vou digitá-lo como meus cursos, meus cursos, e irei para a seção de meus cursos e excluirei esta, essa imagem, essa Duvall. Então eu não preciso, em vez de todos os cursos, vou apenas digitar seus meus cursos e quaisquer cursos que são comprados que virão aqui. Então eu removerei os quatro e vou ficar com este. E eu não preciso desta seção também, então removerei esta linha e div completamente de uma só vez. Cor do corpo, sim, podemos. Podemos mudar a cor do corpo como sabemos como mudar a cor do corpo agora. E no próximo ano, vou selecionar isso. Vou mudar essa cor para essa escura. Basta capturá-lo. E tudo bem. Qual área é esse corpo à direita? Acho que eu onde coloquei esse corpo de cor quando o tamanho desta página aumentará. Agora, o que temos que fazer é como chegar à página de índice. Nós, eu esqueci uma coisa. Como este cartão deve estar em um link para que apenas possamos levá-lo de uma página para outra link de página e soltá-lo, soltar este link dentro desta coluna e simplesmente soltar esse cartão dentro dela. Selecione esse link e remova o texto que está lá. Para o CFP. Como vamos verificar como se alguma coisa está perturbada aqui, nada disso que você possa fazer com todas as outras cartas. Basta selecionar este link e acessar o painel Opções. E a partir da página, podemos ir para a página Detalhes do curso a partir sua notificação sairá pois é uma página visualizada que não temos, mas podemos criar em um segundo. Na verdade, vou entrar na página do meu curso e você também temos que fazer esse link, um link. Vou deixá-lo dentro deste cartão e pegar este cartão e deixá-lo dentro deste link, selecionar este link e remover este texto do ano. Temos que ir a outro lugar onde o usuário possa literalmente clicar nos vídeos e reproduzir. Então, vamos manter isso em branco a partir de agora. Mas vou duplicar esta página MyCourses mais uma vez e vou nomeá-la como lista de desejos. Lista de desejos. Vou clicar duas vezes nesta página e renomearei isso como lista de desejos. Podemos levá-lo, podemos fazer um curso diferente, banner acima de quatro. Não vamos ficar confusos. Em vez deste, vamos renomear isso e colocaremos muito do meu Epson Control P mais L O R e inserir duas vezes mudará esse texto. vez, temos um link e a partir desta página, podemos ir para a página Detalhes do curso novamente. Por enquanto, esse ponto de referência de apenas para a referência que estou vinculando para a mesma página. E, na verdade, está em dinâmica. Vai estar apenas na mesma página. Feche a página de detalhes daqui também o usuário pode clicar e ele pode ir para o curso. Vai lançar para comprar o curso. Agora temos essa como tabelas de lista de desejos. O que são essas tabelas? Precisamos dessas tabelas? Por acaso? Nenhum usuário e não precisamos disso. Estou excluindo essas páginas de registro registradas. Você vai mantê-lo como está. Só que o que podemos fazer é simplesmente, podemos forçar a mudança, talvez uma opção. Está escuro. Então, a partir daqui também podemos torná-lo branco. Esqueça a senha ou já tenha um login na conta. Faça login com o Google Assignments, Facebook. Precisamos desta página de perfil que precisamos, depois meus trimestres que criamos e, em seguida, faça login. Sim, precisamos de registro também. Então você também mudaremos essa cor para branco. Índice. Criamos a senha esquecida já estava lá. Você também é, temos que mudar a cor para branco. Em seguida, os Detalhes do Curso que criamos, depois a página em branco que temos, mas acho que não. Precisamos dessa página em branco agora, removendo essa página em branco. Agora temos 404 também. Neste 404, não precisamos desse navegação lateral e de volta ao painel e deste rodapé que não precisamos realmente deixar que ele seja relacionado ao rodapé. Estamos sim, isso é o que ele está lá. E este mudará a cor de padrão para branco. Este também mudará a cor de padrão para branco. Enquanto esse parágrafo, este é escuro, então vamos torná-lo branco. Então 404 é como o servidor não encontrado ou algo como página de erro, as páginas que não queremos no usuário e removemos isso. O que quisermos. Nós o mantivemos, guardamos isso. E agora, a partir de agora, acho que completamos com a maioria das coisas e poucas páginas restam e a edição também está lá. Portanto, remover essa barra de navegação novamente dessa área é importante. Selecione o perfil e deixe-o branco. Temos essa área. Acho que não. Precisamos dessa área de projeto e todas essas coisas se formam além de assinatura, assinatura e tudo o que não precisamos. Como o que precisamos, vamos mantê-lo. Tudo o que não precisarmos, excluiremos isso. É assim que vamos fazer neste vídeo. Acho que isso é suficiente. E no próximo vídeo vamos projetar esta página onde ela está, onde ela foi, para onde foi. Em vez de detalhes do curso, depois de comprar o curso, essa página de aprendizado, nós vamos projetar. Vejo você no próximo vídeo. 43. Finalização LMS Front End Do Projeto Três: Ok, então neste vídeo veremos a página de aprendizado. Vou duplicar esta página Detalhes do curso e renomearei isso como aprendizado, certo? Aprendizado ortográfico. E é muito simples. Vou remover esses itens desnecessários dos quais não precisamos do título da página. Vamos torná-lo pequeno. Talvez o H4 esteja bom. E este acordeão, vamos mudar o acordeão de ano para ano. E eu não preciso do cartão há mais de um ano. E vou deixar cair este acordeão dentro desta área. Vamos mudar isso para um quê, qual é o tamanho dos oito? Este estará cheio. Justo o suficiente. Temos que fazer algumas modificações como exatamente temos que fazer. Vamos ver primeiro aqui como exatamente ele está saindo. Acho que é bom ir, não é um problema. Agora vamos ao acordeão. Eu excluirei esses dois itens daqui. Podemos duplicar isso. E eu entrarei nisso. E agora, a partir do ano, tenho que excluir todas essas funções. Primeiro. Quero alguma área vazia, e agora vou começar do zero. Vou dar uma fileira mais uma vez. Lá vamos nós. Temos uma fileira ali. Então eu vou pegar uma coluna, vou soltar uma coluna dentro disso, e essa coluna será um título. E temos a opção, devemos ter a opção de alterar o vídeo. Então, vou levar isso dentro de um link. E neste link, vou pegar novamente um parágrafo e soltar esse parágrafo dentro desse link. Eu removerei essa área de link. E neste parágrafo, vou deixá-lo branco. Este será um nome de vídeo, então talvez possa ser um nome de vídeo longo. Então eu estou tomando épsilon lá, apenas tomando isso como isso e isso. Então, uma linha duplicando esta mais uma vez e ganhando um tempo como 0335. Ok, então esta coluna é, estamos no tamanho da tela LED. Esta coluna será oito. E esta, esta coluna será para alinhamento a este lado, está bem. Em outro tamanho de tela também, parece muito bom. E neste tamanho de tela, ele vem um após o outro. Então, temos que selecionar este. Agora. Qual é o tamanho da tela MD do ano? Começaremos a fazer isso. Talvez possamos aceitar como oito ou dez também está bom. Dez e então podemos fazer isso como dois aqui. Este também é bom. Este, ou este, temos problema na tela do celular. No celular, temos que até o ano podemos chegar a dez. Mas no celular temos que dar algum espaço extra ao temporizador. Talvez três sejam bons. Sim, três é bom. Temos três, então precisaremos de nove sobre o tamanho da tela é bom. No tamanho da tela é bom. Este tamanho de tela é bom. O tamanho da tela é bom. O tamanho da tela é bom. Certo? Então, todos os tamanhos de tela são bons, bom o suficiente. Então temos que fazer, você é como, qual é a última seção? Esta, esta coluna é apenas a última seção. Então, temos que colocar o, o que você diz? Fundo de margem 65 pixels para que ele não se sobreponha na seção Navbar inferior da barra de navegação um está lá. Agora chegando ao acordeão. Vamos duplicar essas seções várias vezes para que possamos ver exatamente como ela ficará quando tivermos várias seções na visualização móvel também. Então você pode ver que temos uma boa margem aqui e temos muitas seções aqui. O vídeo estará nessa área. O que podemos fazer, temos altura, então removeremos essa altura e deixaremos que ela esteja na altura padrão pois acho que temos que remover a altura dessa página de detalhes. Além disso, quando o vídeo chegar, ele equilibrará automaticamente sua altura. página de aprendizado também está concluída. Vamos ver a pré-visualização. É assim que a página de aprendizado vai se parecer. Eu acho que esta seção em particular e essa área em particular estão concluídas. Então deixe-me ver no meu livro se eu perdi alguma coisa, acho que esta área está pronta. Este acordeão e menos animação como por padrão, pois a animação está lá. Fizemos tão bem até agora. E a página da lista de desejos também está vinculada. Acho que não está ligado a talvez. Vamos para a barra de navegação e começar a vincular a página. lista de desejos dois será a página da lista de desejos é a lista de desejos e esta é a página de aprendizado. Então, ele vai para o meu aprendizado, não aprendendo, na verdade, meus cursos dos meus cursos. Aqui estão meus cursos de você. Se alguém clicar nisso, ele irá para a página de aprendizado. É assim que o fluxo será. Então, vamos verificar o fluxo uma vez na pré-visualização ao vivo, permite que a página seja atualizada. Ok, então temos esta página aqui. Se eu clicar nisso, me levará à página Detalhes do curso, onde todos os detalhes da página estarão lá. E sim, muito bom. Então, a partir daqui, posso ir para a lista de desejos onde minha lista de desejos produtiva. Lá. Este é o meu produto de lista de desejos. E se eu clicar novamente no produto da lista de desejos, isso me levará apenas a esta página. E se eu for para minha página de aprendizado, então esses são meus cursos que eu comprei. E se eu clicar aqui, isso me levará à página de aprendizado. Ok, até agora tão bom. Acho que completamos nosso front-end um pouco aqui e ali, como vincular essa área específica. E até agora tão bom. Então, acho que calculamos nosso front-end. Vejo você no próximo vídeo. 44. Ziara Commerce: como criar uma conta de refluxo: Olá, pessoal. Então, neste vídeo, aprenderemos como configurar um site de comércio eletrônico no estúdio Bootstrap para que tenhamos que começar com estúdio Bootstrap e criar um novo design nele Então, nomearemos esse design na Zara selecionaremos um modelo em branco e clicaremos em Criar Então esse é o nosso projeto Zara Blank. Depois disso, precisamos acessar as configurações e rolar para baixo até Comércio eletrônico. Então, depois de clicar em Comércio eletrônico, precisamos clicar em Gerenciar projeto. Então, depois de clicar em Gerenciar projeto , você precisará refluir Então, eu já estou logado no reflow. Caso contrário, você precisa criar uma conta reflow. Então, depois que a conta reflow for criada, você deverá clicar aqui como um novo projeto Eu já tenho dois projetos de demonstração para mim. Você não verá esses dois projetos de demonstração, mas verá um novo projeto. Então você clica em Novo projeto e nomeia esse projeto ou talvez nomeie essa empresa como Zara Então, depois de nomear a empresa, clique em Avançar. Ele perguntará sobre o país. Então, clicarei na opção Vou pesquisar detalhes da fatura na Índia se você tiver alguma opção específica de detalhes da fatura aqui, então digitarei Zara Posso digitar meu endereço como Bangalore Airport Road e digitarei minha cidade como Bangalore, estado como Karnataka, estado como Karnataka Esses são todos os dados do Dummi. Então, quando terminar isso, clicarei em Avançar e, em seguida, ele solicitará que eu escolha o plano. Então, como isso é para uma demonstração, optaremos pelo plano gratuito. Vou clicar em Escolher aqui e depois clicarei em Avançar. Então, aí estou eu na minha conta de refluxo. Portanto, se eu acessar as configurações gerais , minha conta de reflow será criada com sucesso Agora você pode ver o ID do projeto da minha conta reflow. Este é o nome do meu site ou o nome do projeto Zara. Vamos mudar a moeda para INR, que são rúpias indianas A medição será de quilogramas e centímetros. Vou selecionar meu fuso horário aqui. Quero manter o horário em AM e PM. Projeto vinculado, faremos isso mais tarde. Então, uma vez feito isso, basta clicar em Salvar projeto. Dessa forma, concluímos nossa configuração da conta de refluxo usando nossa marca Zara Então, no próximo vídeo, veremos exatamente como podemos conectar nosso projeto ao estúdio Bootstrap 45. Ziara Commerce: como conectar o Reflow ao Bootstrap Studio: Incrível. Então, bem-vindo de volta. Neste vídeo, veremos como podemos configurar nosso projeto de refluxo para o Bootstrap Studio Então, no Bootstrap Studio, clicaremos em configuração, rolaremos para baixo e clicaremos em E Commerce. Neste projeto selecionado, veremos nosso projeto Zara aparecendo aqui agora A ferramenta de refluxo será a Virgin two. E o modo de teste ativo nunca existirá. Feito isso, clicaremos em Salvar e pronto. Nosso projeto de refluxo chamado Ziara agora está conectado ao nosso estúdio de bootstrap Então, no próximo vídeo, começaremos a adicionar produtos e outras informações em nossa conta de fluxo real. 46. Ziara Commerce: como criar e importar produtos em reflow: Incrível. Então, neste vídeo, vamos começar a criar os produtos e as outras informações. Então, antes disso, o que você precisa fazer, basta clicar na descrição de qualquer vídeo dessa playlist e aqui você encontra o Resource Link. Basta clicar no Resource Link e ele o levará até esta pasta Digi Box, você poderá baixar o arquivo zip Então, depois que seu projeto for baixado, basta vir aqui e expandir esse projeto. Neste projeto, você encontrará todos os recursos necessários para este projeto. Então, vamos começar a criar o produto em nossa página de refluxo. Então, vou rapidamente para nossa conta de refluxo e clicarei no produto aqui Mas antes de criar os produtos, precisamos criar as categorias. Então, vamos para as categorias e eu clicarei na categoria um, e ajudaremos nosso PDP Portanto, temos Western Ware para mulheres. Então, copiaremos esse nome e eu o colarei aqui. O mesmo nome virá aqui. Então, se você quiser adicionar alguma descrição, descrição estará lá e a categoria principal. Portanto, essa é uma categoria principal, então não queremos adicionar nenhuma categoria principal aqui. Então clique em salvar. Então, minha primeira categoria está pronta para uso, e então podemos começar a adicionar as subcategorias nela Então, vou copiar esse nome. E vou simplesmente adicioná-lo ao seu. E, por enquanto, essa categoria principal será a roupa feminina ocidental. Então temos vestidos. Então, vamos adicionar os vestidos femininos ocidentais, jeans e roupas ocidentais femininas, novamente, roupas de brincar, roupas femininas ocidentais e camisetas. Que voltará a aparecer em roupas femininas ocidentais. Eu vou criar isso. Portanto, a categoria de roupas ocidentais femininas é criada com as subcategorias Agora vamos para a Índia e a moda era. Então, vou criar uma nova categoria, indiana e moda, e não vou mantê-la, então ela será criada como categoria principal, e dentro dela temos duas categorias diferentes que temos que criar aqui. Isso será em indiano, e este será o segundo que será novamente em indiano. OK. Por isso, criamos nossas subcategorias e categorias Agora podemos adicionar nossos produtos. Então, vou clicar nos produtos e em todos os produtos. Aqui temos a opção de importar e exportar a lista de produtos, que eu lhe dei. Esta é a lista de produtos que você pode usar. Mas, em um produto, mostrarei como você pode adicionar esse produto à sua lista de produtos e, em seguida, também farei o upload dessa lista de produtos na minha conta reflow Clicaremos em adicionar produto. Em seguida, adicionamos produto físico e produto físico. Esta opção só está disponível na versão gratuita. produto digital e o vale-presente estão disponíveis no modelo de assinatura. Então, clicaremos no produto físico aqui e aqui teremos que adicionar os detalhes do produto. Então, vamos voltar à nossa página de download. Vamos para o PDP, vamos para o Women's. Vou adicionar uma camiseta. Então, vamos usar o nome, camiseta Zara. O nome virá sozinho e precisamos adicionar uma descrição. Lá vamos nós. Então, temos a descrição. Então temos extras. Portanto, este é um selo promocional. Então, como temos uma camiseta da coleção especial da Zara , podemos chamá-la de coleção especial Isso virá como uma etiqueta ali, então uma coleção especial como etiqueta. Então temos que adicionar as imagens aqui. Então, clicaremos em adicionar e, como é uma camiseta, veremos qual camiseta devemos enviar , o que parece legal. Isso já está na lista de produtos, então vou pular isso e usarei Produto 25 e clicarei em Carregar Também pode adicionar vídeos e várias imagens. Agora, vamos definir o preço desse produto. Então, para isso, o preço do produto estará em torno de talvez 1.500 E isso é cobrado imposto sobre o produto. Eu posso simplesmente remover isso. Está tudo bem. Não há imposto exigido para este produto. Produto à venda, podemos ligar e podemos dar o preço original. Então, digamos que o preço original seja 2999 o preço original, e nós o estamos vendendo por mil 500 E também devemos mencionar o período de venda em que devemos selecionar a data. Portanto, a venda começa no segundo dia deste mês e vai até, digamos, 31 de dezembro. Portanto, esse é o intervalo em que essa oferta será executada. Depois disso, a oferta diminuirá. Vou clicar em Aplicar. Então disponibilidade, sim. Este produto está disponível na loja. A loja é nossa verdadeira loja de fluxo, e temos que definir qual é a quantidade mínima de compra. Portanto, a quantidade mínima de compra deste produto será um e o máximo de cinco. Qual é o peso desse produto em KGs? Vou pesar isso como 0,300 kg. Isso significa 300 gramas. O tempo estimado de envio será de aproximadamente sete dias e o método de entrega disponível será todo. Então aí vem nossa categoria, depois vamos para a categoria Camiseta e também verificaremos essa categoria de artigos ocidentais femininos porque a camiseta vem em artigos ocidentais femininos Essa categoria está concluída. Em seguida, inventário, quantos estoques temos que é o SKU da unidade de manutenção de estoque Então, qual é o SKU desse produto? Digamos que eu diga que o SKU deste produto começa com Zara e depois com roupas e camisetas femininas ocidentais. E talvez eu possa separar esse nome por um traço e um número. Então eu tenho que adicionar um número para isso. Então, vou adicionar um número aleatório como 98, cinco, seis, 21. Esse é o número de SKU desse produto específico. Então, o sistema de inventário é simples. Você também pode clicar em Avançar. Adiantamento significa quantidade de estoque disponível. Portanto, a quantidade de estoque, se você continuar simples, este produto nunca sairá de estoque. Se você for Advance, deverá fornecer uma quantidade de quantos produtos você tem em seu inventário. Então, vamos dar mil como inventário. Mostrar quantidade na página do produto. Assim, o usuário pode ver quantos produtos restam em nosso inventário. Variedades, se tivermos variedade, então temos que adicionar variedade a ela. Então, digamos que temos tamanho, cor, etc Então, especificamente, teremos tamanho e clicarei em adicionar variedade. Portanto, o primeiro tamanho será pequeno. O preço, o preço original e o peso serão os mesmos. Se quisermos mudar, também podemos mudar isso. Então, outra variedade será média, depois grande, depois extra grande e depois extra grande. Os SKUs para isso podem ser adicionados. Então, vamos pegar esse SKU a partir daqui e depois voltar e clicar em Editar SKU para isso será S. Como é pequeno, vou colar esse M, vou colar esse L. Então, novamente, isso é aleatório Não sei se essa é a maneira certa de dar a desculpa ou não Isso é apenas por causa dessa demonstração, nada mais. Cola extra extra grande. Quantas quantidades temos em estoque para isso? Digamos que 100.000 mil mil mil e mil. Vou clicar em confirmar. O preço das variedades é o mesmo, por isso não está aparecendo. Mas se você quiser alterar o preço, nós podemos. Digamos que 14 duplo nove seja o preço para pequenos ou talvez 13 duplos nove seja o preço para pequenos. E médio grande combina com 14 duplos nove e 14 duplos nove, e o Excel duplo vai com 15 duplos nove. Portanto, esse é o preço pelo qual ele será vendido, e então temos que mencionar também o preço original. O peso está bom e clicaremos em Confirmar. Então é assim que podemos criar nossas variedades. Depois, temos nossa personalização. Se tivermos alguma recomendação de personalização, também podemos adicioná-la Adicionar opção. Se você quiser personalizar isso, adicione seu nome na camiseta. A instrução exigia seu nome. Isso será uma caixa de seleção ou talvez uma entrada de texto para colocar o nome lá O comprimento mínimo exigido é um e o comprimento máximo exigido é 277 Isso não é necessário e, se eles escolherem essa opção , terão que pagar 200 rúpias adicionais. E se você quiser criar mais uma opção, vá com a opção Adicionar e, em seguida, basta clicar em Confirmar e classificar pelo número um e clicar em Salvar. E lá vamos nós. Criamos com sucesso nosso primeiro produto. E agora o que podemos fazer importar nossos produtos imediatamente Então, vou clicar em Importar. Vou clicar em Escolher Wile, selecionarei este produto e clicarei em Carregar O produto é selecionado. Em IDs duplicados, atualize o produto existente. Se houver um ID duplicado e talvez não haja nada, basta clicar em Importar O arquivo CSV foi carregado com sucesso. Basta fechar e atualizar os. Você pode ver os produtos que estão sendo importados. Agora você pode ver a importação do produto em andamento. Então, um dos 24 produtos. Assim, à medida que você se refresca, você pode ver que os produtos estão sendo adicionados Temos uma boa quantidade de produtos conosco e pronto. Todos os produtos são adicionados com sucesso em nossa conta. Neste vídeo, aprendemos como criar um produto e como importar o produto do That's all for this video. E no próximo vídeo, começaremos a criar o site no estúdio Bootstrap 47. Ziara Commerce: categoria Assign para os produtos: Antes de criar o site no estúdio Bootstrap, uma coisa que precisamos fazer muito rapidamente é atribuir as categorias ao produto Portanto, essa categoria é uma coleção. Vou clicar aqui e simplesmente ir para a categoria, e essa categoria parecerá indiana. Vou apenas comercializar moda indiana para indianos e a moda era. Então, isso é feito nesta categoria, rapidamente, vou configurar a categoria como vestidos. Este também é um vestido de gala. Vou simplesmente desmarcar isso Esses dois, três e quatro vão por baixo dos vestidos. Então, vista-se com um faroeste feminino. Então, pronto com isso. Então temos Sari um, dois, três, quatro, acho que sim, temos quatro saris Clicaremos na categoria e selecionaremos saris à moda indiana. Incrível. Fique de olho no que adicionamos. Acho que esse vai entrar em trajes de jogo e confirmar. Ok, isso é uma camiseta. Então, essa vai para a categoria de camisetas. Um, dois, três, quatro. Esses quatro entrarão na categoria de trajes de jogo, talvez. Sim, vamos dar isso aí. Opa, eu não cliquei nessa categoria. Portanto, o faroeste feminino é a categoria principal, com a qual temos que escolher. São jeans. Então, vou selecionar todos os quatro e clicar em Jeans, e pronto. E vamos para a segunda página agora. Ok, então agora vamos com este. Esses são deuses e confirmam Sari Isso vai ser em Sari. E clique em Confirmar. Acho que não adicionamos nada nessa categoria. Ok, então temos que ver. Ok, isso é o que é um culto. Então, vamos redefinir isso de isso para isso. Confirme. E lá vamos nós. Por isso, adicionamos todos os produtos em suas categorias específicas. Ok, legal. É justo. Vamos começar no bootstrap studio no próximo vídeo. 48. Ziara Commerce: design NavBar e slider: Incrível. Portanto, nosso projeto de estúdio bootstrap chamado Zara já estava pronto antes de começarmos a criar a conta Z flow Desculpe, conta de refluxo. Barra NAF, sim. E aqui vamos adicionar nossa imagem de marca. Então, vou digitar a imagem aqui trazer essa imagem e remover esse texto. Não precisamos desse texto. Em casa. Então, o primeiro item estará em casa. O segundo item serão nossas duas categorias aqui. Então, vou chamá-lo apenas de indiano e ocidental. Portanto, indiano, indiano e ocidental devem categorizar o que nos interessa. Em seguida, vamos criar o cartão Let's go to Ecommerce View e o botão de login virá logo em seguida Então, vamos clicar no botão Entrar e alinhar até o final e no botão do cartão e, novamente, alinhá-lo ao Vamos clicar na barra de navegação e desativar a opção fluida, e vamos rapidamente ter uma prévia do nosso site Então é assim que o site vai ficar, e vamos mudar a aparência à medida que avançamos. Vou pegar um botão rapidamente e mantê-lo aqui e pegar o botão dentro desta opção de visualização do carrinho, e vou colocar a extensão dentro dela. E eu vou Opa, remova isso. E sim, esse botão agora é um botão de cartão. Também podemos dar um ícone a ele. Clique duas vezes, selecione os ícones de linha e o ícone do cartão. Vá para a aparência e aumente o tamanho da fonte e remova o texto. Então, tudo bem. Então, o que eu fiz foi pegar a barra de navegação e criar um padrão Este item de navegação tornou-se padrão e o cartão que eu novamente tornei padrão Mas o botão de login, eu o guardei no final. Vamos começar a importar as imagens conforme necessário. Primeiro, pegaremos o logotipo. Vou importar o logotipo e pronto, clique duas vezes. Temos nosso logotipo aqui e clicamos em Ok, pois está ficando muito grande. Então, só temos que mencionar a largura. Vou apenas mencionar como 120. Uh, venha para a prévia e veja que definimos nosso logotipo. Ok, então voltando ao bootstrap studio, esse logotipo será redirecionado apenas para a página Índice, e a página inicial também será redirecionada para a Selecionaremos a barra de navegação aqui e eu ativarei o status Active Smart Active Qualquer que seja a página ativa, ela será destacada automaticamente Vamos mudar esse botão para link e, por enquanto, vou colocar a chave hash aqui E se você quiser mudar o estilo, sinta-se à vontade para mudar o estilo disso. Ok, na próxima etapa, criaremos um controle deslizante. Vamos adicionar Carusal e eu estou aqui com o primo, vamos importar as imagens do Corusal Página de destino, herói, desktop e essas três páginas de heróis estão lá. Então, temos as imagens aqui. Então, vou clicar duas vezes nisso, pegar o herói um e clicar em OK, próximo. Clique duas vezes. Adicionamos nossos controles deslizantes aqui. Então, depois disso, começaremos a criar o resto da landing page, mas faremos isso no próximo vídeo. Então, veja as pessoas no próximo vídeo. 49. Ziara Commerce: como corrigir o button flutuante na NavBar: Antes de prosseguirmos, o que faremos aqui é o botão At tocad, que está bem no centro da Navbar Não queremos esse botão aqui. Então, queremos o botão à direita da barra de navegação. O motivo pelo qual está no centro é apenas porque, se você vir o botão seno de saída, o botão seno entrada, especificamente, o botão seno de entrada está alinhado no Portanto, se você simplesmente passar do final para o padrão, o botão Atto Cart ficará próximo ao botão de login Então, agora só precisamos de um espaçamento. Ok, eu tenho que selecionar o botão de visualização do cartão e ir para a aula, e aqui eu tenho que adicionar uma margem final para a aula. E é assim que resolvemos o problema do botão AT Cart flutuando bem no centro do NAFBA No próximo vídeo, começaremos a criar as páginas para a categoria dedicada e continuaremos trabalhando no site. Então, vejo vocês no próximo vídeo. 50. Comércio Ziara: finalização da página inicial: Incrível. Então, vamos começar a criar o site. Portanto, esta é uma página inicial e, na página inicial, o que precisamos é de quase todos os produtos que estão lá, mas também com um design específico Então, aqui vamos criar rapidamente um contêiner. Vou pegar logo abaixo do carrossel. E neste contêiner, vou pegar uma linha. E vou adicionar uma coluna dentro dela. Depois que essa coluna for adicionada, pego um componente de imagem e, depois da imagem, pego um parágrafo. Também usarei um link e colocarei quase a imagem dentro desta coluna e moverei a imagem e o parágrafo dentro desse link. Sempre que o usuário clicar em qualquer lugar sobre a imagem ou o texto, ele será redirecionado para uma página específica para a qual queremos que ele seja redirecionado Com isso, o que faremos é selecionar a tag de link aqui, acessar rapidamente nosso CSS e simplesmente adicionar nenhuma decoração de texto. Dessa forma, o sublinhado será apagado e teremos que mudar a cor também Então, selecionando o link, volte para a opção e basta rolar para baixo até a cor e deixá-la escura. E como isso tem que estar alinhado ao centro, selecionarei a coluna, chegarei à opção de alinhamento e apenas clicarei no alinhamento central Eu preciso de três colunas aqui com imagem e parágrafo embutidos nela. Então, vou duplicar essa coluna mais duas vezes e pronto Temos três colunas adicionadas a isso. Depois disso, vou começar a adicionar as imagens dentro disso. Então, para isso, precisamos importar a imagem. Então, acesse rapidamente nossa pasta de recursos. Acesse rapidamente a pasta de recursos e encontre apenas três PDPs, dos quais precisamos Chegaremos ao Cords e eu selecionarei essa imagem e vou apenas importá-la no bootstrap studio Eu virei aqui. Eu vou para a categoria de roupas. Vou selecionar qualquer vestido. Vou importar isso aqui e virá na categoria Jeans e vou apenas importar a imagem do Jeans. Então, no primeiro, adicionarei rapidamente essa imagem. No segundo, adicionarei rapidamente o vestido e, no terceiro, adicionarei rapidamente o jeans. Então, eu preciso de todas essas três imagens em um formato responsivo. Então, selecionaremos todas as três imagens e eu simplesmente clicarei em Responsivo aqui e lá vamos nós Vou mudar o texto do parágrafo para Vou pegar o nome e vou colá-lo aqui. Depois temos vestidos, depois temos jeans e pronto. Então, aqui, o que exatamente temos que fazer agora é selecionar esse link e redirecionar a página para a página Cords. Vou selecionar o link de vestidos. Portanto, esse link pertence aos vestidos, e eu selecionarei aos vestidos, e esse link pertence aos jeans. Então, vou clicar em Jeans para que, sempre que o usuário clicar nele, ele seja redirecionado para aquela página específica Só para verificar rapidamente, faremos uma prévia. Então, se eu vier aqui e clicar aqui, isso me levará para a página Cords Vou voltar e clicar nesses vestidos. Então, está chegando na página das cômodas. E quando eu clico em Jeans, ele aparece na página Jeans. Acho que a barra de navegação e o rodapé não foram copiados na página do Cod, então iremos rapidamente para a Selecione a barra de navegação e o rodapé, à direita, copie dois, selecione vários novamente e basta clicar em Cartões apenas um único, vincular e copiar Dessa forma, a barra de navegação e rodapé também estão na página do cartão Portanto, selecione o contêiner e dê rapidamente uma margem superior a quatro. Vamos apenas manter a margem superior. Vamos apenas manter quatro como um número padrão aqui. Podemos adicionar rapidamente um texto diretamente sobre a linha no contêiner, que será uma tag de cabeçalho. Vou adicionar rapidamente uma linha aqui, desculpe, não aqui. Portanto, excluiremos essa coluna indesejada e, pelo menos, nomearemos como ate e alteraremos rapidamente o alinhamento do texto para o centro Em seguida, da mesma forma, criaremos mais uma coluna, mas chamaremos isso de chegada de ZiaranW E aqui, apenas para fazer uma alteração simples, adicionaremos mais uma coluna aqui para que sejam quatro. E a estrutura também mudaremos um pouco aqui. Então, pouco antes do parágrafo, adicionaremos um título. E logo após o parágrafo, criaremos mais um parágrafo. Este será um CTA chamado Shop Now. Incrível. E isso vamos repetir em todos os lugares. Então, vamos apenas copiar e soltar aqui. Vamos pegar a cópia mais uma vez, soltá-la aqui, pegar a cópia mais uma vez e soltá-la aqui. Basta pegar isso rapidamente e movê-lo um passo acima ou rapidamente dar um passo para baixo. Pegue a loja agora, dê um passo para baixo, pegue a loja agora e um passo para baixo. Incrível. Então, para o Shop Now, especificamente, precisamos de um sublinhado Então, clique duas vezes em Comprar agora e ative a opção de sublinhado nessa área Legal. Então, sim, temos que levar isso para o centro. Então, esse parágrafo agora será uma cópia do subtítulo. Então, vocês façam o possível para adicionar um subtítulo aqui E agora temos que adicionar as imagens que provavelmente serão uma nova chegada. Então eu vou pegar um sari e vou para Weston. Vou pegar uma camiseta. Então, vamos pegar uma camiseta bonita, talvez essa, um traje de brincar, talvez essa. E precisamos de mais um vestido. Apenas pegue este rapidamente. Nomearemos essa área como roupa de brincar, camiseta, vestidos e desculpe. Incrível. Então, clique duas vezes e selecione o traje de jogo. Clique em OK, vá para jeans. Não, desculpe, vá até a camiseta e selecione a camiseta. Selecione o vestido e último, mas não menos importante, selecione o Sari Vamos mudar rapidamente o redirecionamento. Vou selecionar isso e isso vai para o Playsuit agora. Então, este é o link do meu traje de jogo. Este link será uma camiseta. O terceiro link serão vestidos e o quarto link será Sis. Incrível. Basta salvar isso rapidamente e fazer uma prévia. É assim que nossa página de destino ou página inicial se parece. Esses são nossos banners de heróis. Temos três bandeiras de heróis. Você pode adicionar o máximo que puder. Em seguida, selecionamos para você, e também temos links para isso , e Z é um recém-chegado, e também temos links para isso E então temos um rodapé rápido. Incrível. Portanto, a página inicial ou a página de destino estão boas e podemos seguir em frente agora No próximo vídeo, começaremos a adicionar os produtos dinâmicos em todas as respectivas páginas , nomeadas por suas categorias. Então, veja no próximo vídeo, pessoal. 51. Ziara Commerce: puxando produtos dinamicamente: Neste vídeo, vamos começar a buscar os produtos dinâmicos nas páginas de categorias respeitadas Esta é uma página de cordão. Então, entraremos rapidamente no comércio eletrônico e acessaremos a lista de produtos, pegaremos essa lista de produtos e a colocaremos aqui Então você vê que os produtos agora estão aparecendo um por um. Chegaremos aqui rapidamente, consideraremos margem superior e quatro como número padrão. E lá vamos nós. Portanto, não queremos que o produto apareça um após o outro. Então, chegaremos rapidamente ao painel de opções e, no layout, em vez de pelo menos , criaremos cartões e pronto. Portanto, temos todos os produtos em formato de cartão agora. Adicionaremos rapidamente um contêiner e moveremos essa lista de produtos para dentro do contêiner. Então, retirando o contêiner, pegando essa lista de produtos e empurrando-a para dentro do contêiner, temos uma vantagem ali Então, vamos dar uma prévia rápida. Sim. Portanto, os produtos estão chegando de uma maneira boa. Também adicionamos ao botão Cat aqui. Incrível. Então, daqui para frente, o que queremos é que não queremos que todos os produtos sejam listados nesta página porque essa página foi criada especificamente apenas para a categoria Cords Então, o que vou fazer é pegar um título aqui, adicionar dentro deste contêiner e renomear esta página como Cods. Vou selecionar esta lista de produtos Vou rolar rapidamente para baixo até chegar a essa opção de fonte de dados e aqui selecionarei a categoria e, a partir daqui, selecionarei apenas a seção de cabos femininos e clicarei em Escolher Dessa forma, somente os produtos Cords que estão em nossa conta de refluxo aparecerão aqui Faça uma prévia rapidamente, pronto. Temos apenas três produtos na seção Cabos e os três produtos estão aparecendo nesta página específica Seguindo em frente, usaremos rapidamente os vestidos e, da mesma forma, pegaremos um contêiner, pegaremos um título e pegaremos a lista de produtos. Altere o layout de pelo menos para cartões, role para baixo e altere a categoria de todos os produtos para somente vestidos e clique em Escolher e alterar o nome do título para vestidos. Faça uma prévia rápida e pronto. Então, temos a prévia desta página, que exibe todos os vestidos. Então, de forma semelhante, temos que fazer todas as páginas de categorias listadas aqui. Portanto, antes de começarmos a adicionar a lista de produtos em outras páginas, uma pequena configuração rápida que precisamos fazer na seção de links do produto é especificar, é especificar após o usuário clicar nesse produto quando ele será redirecionado para uma página em que a página de detalhes do produto virá Chamamos essa página porque página PDP significa página de detalhes do produto. Temos que dar um caminho para isso. forma exata de fornecer o caminho fornecerá primeiro uma tecla de barra e, em seguida, nomeará a página para a qual ela deve ser redirecionada Isso é pdp dot HTML. Em seguida, adicionaremos um ponto de interrogação aqui e, em seguida, adicionaremos o produto igual a colchete, aberto, ID, colchete, fechar Dessa forma, definimos que sempre que um usuário clicar nesse produto, para mostrar a página de detalhes do produto, o site redirecionará o usuário para a página do PDP e mostrará os detalhes ali Precisamos acessar rapidamente a página do PDP e adicionar o componente do produto aqui Antes disso, adicionaremos rapidamente um contêiner e adicionaremos rapidamente componente do produto dentro desse contêiner. Vou salvar esse projeto. Eu vou ver os vestidos e vou para a prévia. Vou clicar em qualquer imagem e pronto. Lá vamos nós. Portanto, este produto está chegando agora de forma dinâmica Volte, clique neste produto. Este produto está chegando. Então, se você clicar nessa imagem, a imagem aparecerá assim. Interessante, certo? Copie esse parâmetro e vá até a página de carros , cole aqui e pressione Enter. Rapidamente, o que faremos é copiar isso em todas as outras páginas listadas na categoria. Vou clicar com o botão direito do mouse em copiar e colar, copiar duas , chegarei a várias e clicarei em cada página individual separadamente. Então eu quero isso em jeans. Eu quero isso no escritório. Pedidos não são o que queremos, detalhes do pedido, sem PDP, sem macacão, sim, saris, sim, sucesso, sem camiseta, sim, o cenário, sem faroeste, E desta vez, não vou clicar nesse link aqui. Não quero que a configuração seja a mesma em todas as páginas. Deixo isso desligado e clicarei em Copiar. Agora vou rapidamente para as páginas individualmente. Acho que saímos da Índia, adicionaremos rapidamente esse componente à Índia. A partir daqui, posso adicioná-lo rapidamente ao índio e voltar. Por padrão, ele virá no final de todo o componente. Só precisamos movê-lo e colocá-lo bem no centro de Navbar e Putter Ok, então isso é apenas para a categoria indiana. Então, vou selecionar isso e rolar para baixo, vou mudar isso para moda indiana e clicar em escolher. Um tipo indiano está aqui. Oh, as gens também estão chegando na Índia. Ok, é justo. Não tem problema. Vamos para o jeans, leve-o para o centro. E selecione a lista de produtos. Venha aqui e mude a categoria para genes. Nenhum produto encontrado. Talvez haja algum extravio na conta de refluxo Temos que reatribuir rapidamente os genes a ele. Leve-o para o centro. Selecione o produto com a menor rolagem para baixo. E isso é para o escritório. Então, escritório, acho que podemos atribuir vestidos apenas a ele por enquanto. E sim, aí está, não pede nada. Brinque com roupas, vamos selecioná-las, colocá-las no centro, selecionar o produto com menor componente e ir rapidamente para as roupas de macacão E, a propósito, temos que renomear isso também. Trajes de jogo. Então aqui, temos o Indian Ok. Então temos jeans aqui. Este é um produto de escritório , não pede nada. OK. Brinque de terno, terminamos. Então Saris, vamos trazê-lo aqui, renomear isso como SaS, selecionar a lista de produtos Venha para a opção de categoria e selecione Saris aqui e escolha O sucesso não é necessário. Camiseta de novo, sim, venha aqui. Renomeie isso como camiseta, selecione o componente da lista de produtos, desça até esta categoria, escolha a área da categoria, e esta será nossa camiseta Por último, mas não menos importante, Western WESTERN Western. Então, Western é uma categoria primária. Não é uma categoria infantil, então vamos rapidamente até aqui e simplesmente selecionar a mercadoria ocidental e escolher. Então vamos lá. Todos os faroestes estão listados acima Incrível. Então, iremos para a página Índice e a página inicial será Índice. Indian será Indian Page, e Western será Western, seja , no final das contas. Legal. Então, vincularemos rapidamente as páginas. Então, esse botão Adicionar ao carrinho, que temos, vai para a página do carrinho, ou seja , criamos a página do carrinho? Acho que não, certo? Não criamos a página do carrinho. Portanto, crie rapidamente a página do carrinho e adicione rapidamente a barra de navegação e o rodapé a essa página individual Múltiplo. Por que temos que chegar a vários? Porque somente dentro desse múltiplo temos a opção de vincular cópias. Então, clicaremos em Card Link Copies Copy. Incrível. Vou selecionar esse botão e vamos vinculá-lo ao cartão. Está chegando para Card e lá vamos nós. Sim. O signo de login é, por padrão, fornecido pelo refluxo. Portanto, não precisamos criar uma página específica para isso. Ok, então vamos dar uma prévia rápida. Vou clicar em ZR, que é, novamente, uma landing page Agora, se eu clicar nesses cabos, ele me levará até os cabos Então, se eu clicar nos vestidos , vou para a seção de vestidos. Se eu clicar no jeans, ele me levará até o jeans. Não temos os produtos lá. Podemos verificar rapidamente o que deu errado e por que os jeans não estão chegando. Então, clicaremos rapidamente em configurar comércio eletrônico e gerenciar o projeto Uma vez selecionado, acesse produtos, todos os produtos e onde estão os genes? Onde estão os genes? Ah, os genes não estão atribuídos à categoria correta. Então, vou selecionar rapidamente. Vou selecionar todos os genes. Vou clicar em Editar, vou clicar nas categorias e vou mover as categorias dessas para genes e confirmar. Dessa forma, podemos ver que agora eles estão atribuídos aos genes, e se viermos aqui e nos atualizarmos, lá vamos nós Todos os genes estão agora no lugar certo. Voltando, vamos ver, os trajes de brincar agora estão no lugar certo. As camisetas agora estão no lugar certo. Ok, os vestidos estão no lugar certo, novamente, e os saris estão novamente no lugar certo Indiano, todos os produtos indianos estão no lugar certo. Os jeans ainda estão na Índia, não é? Então, voltaremos rapidamente e veremos que isso não é realmente indiano, então voltaremos rapidamente e mudaremos a categoria para Ocidental e confirmaremos. Vamos voltar para a prévia, atualizar e pronto Agora, no índio, temos apenas índio. Se formos para o Oeste, agora os genes estão chegando na região Oeste. Mas se você ver na página inicial, temos fontes diferentes, mas se clicarmos em qualquer outra página, as fontes são diferentes O motivo é que não alteramos o estilo de todas as páginas. Se eu clicar no corpo na aparência, se eu rolar para baixo, a fonte ainda não está selecionada para a fonte que queremos. Então, rapidamente, eu tenho que mudar a fonte uma a uma em todas as páginas. Caminho. Fantástico, então mudamos todas as fontes de todas as páginas que estão lá. Podemos precisar de uma ou duas páginas extras, dependendo da necessidade, mas, no momento, somos bons nesse lugar. Então, vamos salvar o projeto rapidamente e, sim, estamos prontos para começar. Então, no próximo vídeo, criaremos nossa página de carrinho. Sempre que o usuário adicionar o produto no cartão, o produto será listado na página do carrinho e será criado em nosso próximo vídeo. Então, veja as pessoas no próximo vídeo. 52. Ziara Commerce: como criar uma página de carrinho dinâmico: Olá e bem-vindo de volta. Então, neste vídeo, criaremos a página do carrinho. Então, rapidamente, pegaremos um contêiner, colocaremos entre a barra de navegação e o rodapé Basta escolher um título e nós o chamaremos de seu carrinho. E procure o cartão. Temos que pegar o componente do carrinho de compras e colocá-lo dentro deste contêiner. E lá vamos nós. Acho que não precisamos desse texto porque o carrinho de compras já está escrito aqui. Então, excluiremos isso e manteremos o carrinho de compras, que está escrito por padrão. Legal. Então, uma vez feito isso, acho que agora precisamos de mais duas páginas. Um é o URL de sucesso e o outro é o URL de cancelamento. Então eu acredito que temos uma página de sucesso em algum lugar aqui, sim. Portanto, temos a página de sucesso, mas não temos a página de cancelamento. Então, criaremos rapidamente mais uma página chamada Cancelar. E vá para o Índice e pegue a barra de navegação e o rodapé a partir daqui. E, basicamente, você pode acessar qualquer página pegar a barra de navegação e o rodapé e clicar em Link Mas eu tenho a prática de ir até a página de índice onde criei isso e copiar a barra de navegação e o rodapé para essa Então, temos a página Cancelar aqui agora, ok, voltando ao cartão, selecionarei o carrinho de compras e mencionarei essa página URL Es de sucesso e rolarei para baixo. Temos uma página de sucesso aqui, e a página de cancelamento está aqui. O projeto é Yara novamente, e aí vamos nós Na verdade, terminamos com a página do cartão. Isso é tudo. Ok, então criaremos rapidamente a página de cancelamento e a página de sucesso. Vamos pegar um contêiner e vamos pegar um contêiner, caia aqui, eu vou pegar um rumo. Vou pegar um parágrafo e vou pegar um botão. Acho que as fontes são diferentes aqui, então selecionarei rapidamente o corpo voltarei à aparência e alterarei a fonte. O título dirá cancelamento do pedido confirmado no parágrafo, teremos uma história rápida e esse botão, vamos chamá-lo de continuar comprando e eu mudarei a aparência do botão. Vou mudar o estilo do primário para o escuro. Legal. Esta é a nossa página de cancelamento e, de forma semelhante, criaremos a página de sucesso. Vou pegar um contêiner. Um título, um parágrafo logo após o título e um botão. Então, isso será um agradecimento por sua compra. Acho que isso e esse Y e isso deveriam ser pequenos, rapidamente teremos nossa história escrita aqui e continuaremos com o botão de compras aqui. Você também mudará o estilo para dark Awesome. Então, vamos rapidamente para a página Índice e fazer uma prévia. Portanto, esta é a nossa página de índice. Isso é Cards. E se eu clicar em dois carrinhos, ele me mostrará os produtos aqui. Ah, sim, e este produto tem várias imagens. Então, vamos ver isso. Então, se eu vier aqui, as imagens do produto que estão lá, virão assim e eu posso clicar aqui de acordo. E há mais um produto exatamente onde temos, acho que está em Western Uh, sim, este é aquele em que também temos tamanho. E de acordo com o tamanho, o preço do produto muda. E é aqui que temos outras coisas, como adicionar seu nome na camiseta. Se eu clicar aqui, solicitei seu nome e posso adicionar meu nome aqui. Digamos que eu adicione meu nome, adicione o tamanho e clique em Adicionar ao carrinho. O produto agora está no meu cartão e, se eu for à loja de cartões ainda não tenho nenhuma configuração de pagamento. Não configuramos o pagamento. É por isso que não podemos acessar a página do cartão. Então eu acho que você sabe o que vamos fazer no próximo vídeo. Vamos corrigir isso no próximo vídeo. 53. Ziara Commerce: configuração de informações de pagamento: Hum, vamos corrigir a configuração de pagamento neste vídeo. Então, acesse rapidamente a conta Reflow e clique nas configurações e pagamentos Existem opções PayPal, stripe, paddle Portanto, se você clicar em Stripe, ele solicitará que você faça login na conta do Stripe e receberá todas as chaves necessárias que estão lá No momento, eu não tenho nenhuma dessas contas de gateway de pagamento. Então, por enquanto, vou para o método personalizado, que é um método de transferência bancária, e vou chamá-lo transferência bancária. O tempo estimado é sete. Mantenha esta mensagem como está e eu clicarei em Criar. Só porque preciso de uma forma de pagamento, estou adicionando isso Você também pode adicionar seu gateway de pagamento aqui. Voltando aqui, se eu me refrescar agora, bum, aí está. Temos nosso produto no carrinho, podemos aumentar a quantidade e acredito que não podemos ultrapassar cinco, talvez porque tenhamos estabelecido o limite de quantidade como cinco, possamos remover o produto do carrinho. Então, quando clicamos na quantidade, o preço também muda. Opa, há algum erro, então vou voltar a um e pronto Então você vê a página ficar cinza. Isso significa que, em segundo plano, ele está sendo atualizado rapidamente. E os novos dados estão chegando à nossa frente, os novos dados nada mais são do que o preço. E aqui, se eu clicar em Checkout, ele virá aqui e pegará meus dados se eu já estiver logado Caso contrário, ele solicitará que eu preencha todos os detalhes aqui, que são meu endereço de e-mail, número de telefone, endereço de entrega e qualquer nota específica que eu queira dar ao vendedor. Então, vamos fazer isso rapidamente. Meu e-mail é car@gmail.com. O número de telefone será 123-456-7890 e o endereço de entrega será Kurn novamente, o endereço será Kurn novamente, o está em algum lugar na Índia. cidade, posso dizer que é Banguru, o país de Bengaluru é a Índia, o estado é Karnataka e o código PIN é 560-092-0092 OK. E então está me dizendo uma tarifa fixa mundial. Sim, adicione informações de cobrança. Está tudo bem. Não há nada. Você pode deixar em branco se não tiver nada. Então, sim, o custo total é qualquer coisa, como 1699. Posso adicionar um código de cupom aqui, se eu tiver algum. Caso contrário, vamos clicar em transferência bancária e pronto. Eu posso ver as informações bancárias aqui, e aqui o cliente verá as informações bancárias, o cliente deve enviar e o cliente deve transferir o valor aqui. Aqui, se você ver nos pedidos todos os pedidos, verá que o pedido está aguardando o pagamento. Assim que o pagamento for concluído e o cliente confirmar que o pagamento foi concluído, você pode entrar e alterar o status do pagamento para marcar como pago e clicar em Confirmar E depois que o produto for enviado, você poderá alterar novamente o status de envio para Marcar como Essas informações serão enviadas ao usuário por meio do e-mail fornecido pelo usuário, que é este, este não é um e-mail genuíno, então não receberei nenhum, então não receberei nenhum, mas o usuário poderá ver os detalhes do pedido e o status do pedido depois criar a conta e fazer login na conta Zia. No próximo vídeo, vamos exatamente fazer isso. Nos vemos no próximo vídeo, pessoal. 54. Ziara Commerce: finalizando o site de comércio eletrônico: Incrível. Então, neste vídeo, vamos criar uma página de status do pedido, página detalhes do pedido, etc Então, venha rapidamente ao estúdio Bootstrap e vamos ver se criamos a página do pedido ou não Sim, temos a página do pedido e a página de detalhes do pedido, ambas. Então, vamos rapidamente para a página Pedidos. Pegue um recipiente e clique em Pedido. Portanto, temos o status do pedido aqui e o pedido do usuário aqui. Então, vamos pegar esse componente do pedido do usuário e colocá-lo aqui, pedido do usuário, e dentro dos detalhes do pedido, novamente, pegar um contêiner. E pegue o componente de status do pedido e coloque-o nesta página. E o usuário precisa de um lugar onde ele possa vir e verificar isso. Então, vamos ao Index e aqui, talvez depois desse Western Oops, pegue esse item NAV, duplique e renomeie E vincularemos os pedidos a Eu selecionarei isso em nossa página de pedidos. Portanto, agora a vantagem de vincular a barra de navegação é que você pode ver que os pedidos foram adicionados em todas as páginas Ok, então vá rapidamente para a pré-visualização e, se eu clicar em pedidos, ele solicitará que eu faça login. Mas se clicarmos em entrar, não será necessário nada porque ainda não definimos as configurações de login. Então, rapidamente, vamos configurar a configuração de login. Então, vamos para nossa conta reflow, vá para as configurações e clique em Entrar Então, esse é o nosso domínio de refluxo. Nós podemos criar. Você também pode escolher um domínio personalizado. Temos que adicionar um domínio aqui. Então, iremos rapidamente para o Bootstrap Studio a configuração de publicação, pegaremos nosso domínio como Zara dotbss dot DESIGN e publicaremos este site lá pegaremos nosso domínio como Zara dotbss dot DESIGN e publicaremos este site Espere um pouco até que seja publicado. Sim, está publicado, clique nele agora e agora pegue esse URL. Volte aqui. Vou digitar aqui na Zara Vou clicar na origem e colar esse domínio aqui. E clique em Salvar. A chave é gerada. E agora eu posso ativar esse e-mail e senha. Então, quais são todas as informações que eu preciso. e-mail e a senha são por padrão, preciso de nome, preciso de número de telefone. Se tivermos alguma página de termos e condições personalizada, podemos adicionar essa página de termos e condições ali. Então, vou apenas adicionar termos. Ok, então você pode adicionar o padrão também, ou então você pode deixá-lo em branco e clicar em Salvar. Você também tem a opção de logins sociais, Google, Facebook e outros Portanto, se você clicar no Google, ele solicitará que você crie o ID do cliente e o número secreto do cliente. Por que isso está vindo como K, talvez eu tenha adicionado um nome errado. Sim, isso não é K and save. Não preciso disso e salve o Commerce, posso adicionar por enquanto. Incrível. Então, isso é Yara commerce.refloq.com, seja o que for. Então, atualize isso e clique em Registrar porque o URL deve corresponder e pronto, nome do e-mail, senha, senha redigitada e número de telefone Então, adicionarei o e-mail, o nome, senha, a senha redigitada e o número de telefone. Eu aceito os termos e condições e clico em Registrar. Sim, aqui você precisa do endereço de e-mail válido do Ori porque ele solicita uma verificação e cole, verifique o código. E pronto, estamos logados com sucesso. Agora vamos fazer o pedido e fazer o pedido. Então, vou ao nosso produto especial, talvez, desculpe, Western. O que devo pedir agora? Ok, vamos pedir esse traje de brincar. Chegaremos a este traje de jogo. trajes de brincar parecem bons. Opa, muito barato, apenas 79 rúpias Esse preço é por engano. Quando baixamos a planilha do Excel, certo? Naquela época, custava $79. Mas ao criar este projeto, mudei a moeda de dólar para rúpias, então ela está me mostrando 79 De qualquer forma. Então, se eu clicar em Adicionar ao carrinho, este produto será adicionado ao carrinho agora e eu clicarei em Finalizar compra Então você vê que, quando estou logado, as informações são obtidas automaticamente, o endereço de e-mail é usado, o endereço é obtido Vou apenas adicionar um endereço e uma cidade aleatórios. Vou adicionar a Índia aqui. Vou adicionar um estado aqui e um código postal. E transferência, transferência bancária, vamos lá. Agora, se eu acessar meus pedidos, você verá que o pedido está lá e o status está pendente. Esse pedido está pendente. Se eu acessar minha conta reflow e acessar meus pedidos agora, clicarei nesses pedidos E aqui você vê que o pago está pronto. Agora, esse é o segundo pedido com o endereço de e-mail real. Vou clicar aqui. E supondo que o pagamento esteja feito, clicarei em pagamento concluído Volte aqui, refresque-se. Agora você pode ver que o pagamento foi feito e prosseguiu. O status foi alterado para continuar. Voltarei aqui e alterarei o status de atendimento para Shift e clicarei em Confirmar Se eu voltar aqui e atualizar, ele diz o status como envio e se eu voltar aqui e alterar o status de atendimento para Marcar como entregue, eu voltarei Você pode ver o status como recebido. Então é assim que acontece dinamicamente. Podemos adicionar rapidamente uma opção aqui qual ela também mostrará os detalhes do pedido. Então, vá rapidamente para a página de pedidos, selecione isso, selecione a página de detalhes do pedido para ver o resumo e volte aqui. Atualize a operação no Temos que publicar isso porque agora está em um subdomínio. Então, vamos selecionar isso e publicar Ok, a editora está pronta. Vamos atualizar isso agora. Agora você vê uma seta aqui. Agora, se eu clicar aqui, ele me levará à página de detalhes do pedido e fornecerá um breve resumo completo desse pedido específico. Terminamos esta série, a série na qual aprendemos a criar um site de comércio eletrônico completo e dinâmico, site de comércio eletrônico completo e dinâmico onde podemos adicionar um produto ao cartão Nós podemos fazer o pedido. Podemos ver o status do pedido e podemos ver o status detalhado do pedido. Temos um painel de administração onde temos a visão geral da nossa loja Em seguida, temos a lista de usuários da loja. Temos os planos, pagamentos, pedidos. Podemos adicionar produtos, categorias, cupons e outros enfeites Então, sim, terminamos a série com sucesso aqui e estamos felizes em aprender. 55. Vamos Começar A Site De Comércio E Do Project Four: Vamos começar. Nesta seção, o que aprenderemos é como se criássemos o site de comércio eletrônico. E será um site de comércio eletrônico dinâmico real que estaremos projetando dentro do estúdio Bootstrap. E depois de completar este site, nós, quero dizer, não nós, na verdade, você poderá lançar este site e começar a aceitar pedidos. Vamos começar. Então, o que eu fiz foi criar um design, Design em branco, e eu o nomeei como um cartão de encaixe. Snap card será o nome do meu site de comércio eletrônico. A primeira coisa que começaremos a projetar o layout e a primeira e mais importante coisa que vamos fazer é criar uma barra de navegação. E eu vou pegar um navbar, que será esse navbar. E dentro desta marca, definitivamente vou nomear o cartão snap. Cartão Snap. E o que faremos aqui é como se tivéssemos duas categorias. Dentro dessas categorias, também teremos uma subcategoria. Para este exemplo, estou criando duas categorias. E dentro dessas categorias estou criando outras duas subcategorias. Cabe a você quantas categorias e subcategorias você deseja criar que você pode fazer. O que estou fazendo aqui é que vou selecionar todos esses três itens agora e excluirei isso. E selecionarei um menu suspenso. Uo. Vou colocar este menu suspenso dentro desta barra de navegação. Vou nomeá-lo como homens, e criarei mais um menu suspenso ou selecionarei isso e duplicarei isso, e vou nomeá-lo como mulheres. Estes são os dois navbars de desculpa, estes são os dois suspensos. Essas outras duas categorias que nosso site terá. Selecionarei isso, clicarei em Abrir. O primeiro será, o segundo será geral. E geral. Este será. Certo. Então, essas são as três categorias. Vou fechar isso. Eu voltarei para o ser humano novamente e abrirei isso novamente. Este será Roadster e general. E este será, antes de avançar, o que farei é ir para as configurações e selecionar uma equipe diferente aqui. Digamos que o tema lux. E eu vou clicar em Salvar. obteremos uma fonte diferente e um estilo diferente. Dentro disso, você pode ver um estilo diferente existe. Agora, vamos visualizar nosso site. Clicaremos em Pré-visualização. Vou trazer a janela do navegador aqui. Lá vamos nós. Este é o nosso menu suspenso. Vamos selecionar esta barra de navegação e clicar na opção fluida aqui e abrir a visualização novamente. Esta pré-visualização novamente, e agora isso está definido. Depois disso, podemos criar carrossel. Vou colocar o carrossel aqui onde podemos deslizar nossas imagens. Estou apenas criando um layout primeiro, importaremos as imagens e começaremos a vinculá-lo em todos os lugares. Então teremos um contêiner que vou colocar luta abaixo deste carrossel. E ao selecionar este contêiner, o que faremos agora, vamos apenas dar uma margem, topo da margem, o topo vazio, ou talvez quatro sejam bons o suficiente. Sim, quatro é bom o suficiente. E então vamos colocar um título, título e podemos nomear isso como talvez o que podemos nomear produtos. Isso vamos mantê-lo como h3. razão pela qual estou mantendo esse texto em h3 é porque SEO e sim, definitivamente vou dizer isso também na seção posterior. Então, todos os produtos H3, e depois disso podemos colocar a seção de produtos lá. Acho que isso é suficiente por enquanto. O que faremos em nossa seção de produtos, como se você acessar arquivos BSS, você encontrará uma seção de comércio eletrônico lá. E se você for para produtos, e depois for para controles deslizantes, encontrará três imagens aqui. Você só precisa arrastar e soltá-lo aqui. Ou, se você quiser ser mais organizado, basta clicar com o botão direito do mouse nas imagens, criar uma pasta e digitá-la como controles deslizantes. Isso resolve tudo de bom e simplesmente deixá-lo dentro disso. Clique em, OK. E basta clicar duas vezes, abrir o controle deslizante e selecionar a primeira imagem clicar em Avançar. Depois clique duas vezes e clique duas vezes. Selecione o controle deslizante para a imagem S2. Em seguida, clique em Avançar. Clique duas vezes nesta imagem, clique duas vezes na pasta para abri-la e clique em S3 e clique em OK. E lá vamos nós. Temos três imagens. Nisso. Agora adicionamos três imagens. Vamos para nossa pré-visualização. Deixe a página atualizar, recarregar o ano. Agora ele está recarregado. E então temos essas imagens aqui. Sempre que quisermos alterar a imagem, temos que mudá-la de sua única semana não pode fazer dinamicamente. Agora estaremos chegando à próxima seção chamada todos os produtos e você é, o que faremos. Criaremos as coisas dinâmicas, minimizando-as. E antes de ir lá, temos que fazer alguma coisa. Temos que conectar algo ao nosso estúdio de bootstrap. Devido a isso, nosso site se tornará um site dinâmico. E o que temos que fazer lá, veremos no próximo vídeo. 56. Entendendo O Refluxo Do Projeto Quatro: O que precisamos fazer é clicar em Configurações. Depois de clicarmos em Configurações, basta rolar para baixo aqui e temos esse e-commerce. Você só está clicando nesse E-Commerce. Agora você precisa clicar em gerenciar loja aqui. E depois de clicar em Gerenciar tour, você receberá esta página onde você precisa nomear sua loja. Vou nomear minha loja como cartão de encaixe. Depois de clicar em um lado, digite este cartão de encaixe de nome que tenho, eu tenho que clicar em Avançar. E quando eu clicar em Avançar, serei levado para esta página. Isso está mostrando um produto e eu adicionei este produto há muito tempo. E este é o seu cartão de encaixe. Você pode adicionar várias lojas, como nova loja, você pode criar várias novas lojas ao longo do ano. Reflow é uma irmã, você pode chamá-lo como uma empresa irmã do próprio estúdio Bootstrap. Uma vez feito isso, então você tem que voltar ano. E, novamente, clique em gerenciar loja ou já é um coletor, então você tem que selecionar este cartão de encaixe aqui. Depois que este cartão de encaixe da loja estiver selecionado aqui, basta clicar em salvar. E então, por enquanto, vamos parar de usar o Bootstrap studio, a menos e até adicionarmos tudo ao nosso site de comércio eletrônico. Refluxo. Você pode ver esse painel de refluxo como um painel de administração do nosso site de comércio eletrônico. Iremos para Categorias e começaremos a criar as categorias. Qual categoria temos? Na verdade, temos duas categorias principais. Um deles se destina, desculpe, um é homem. Essa não é uma subcategoria para isso, basta clicar em salvar e então teremos esse tipo de página. Vou clicar em Adicionar categoria. O segundo será mulheres. E eu vou clicar nessa mulher. Salvar. Agora temos duas categorias principais e em nosso site também temos duas categorias principais. São homens e mulheres. Depois disso, temos que criar uma categoria chamada Roadster. Eu virei aqui. Vou clicar em sua categoria de anúncio e vou digitar Roadster. E a categoria dos pais será homens. E eles clicarão na categoria Salvar. Você pode ver agora dentro dos homens que temos uma categoria Roadster e , em seguida, um será geral. Clicamos em Adicionar categoria mais uma vez e geral. E este novamente na categoria masculina. Todas as categorias. Não criaremos esse tipo de categoria chamada all. Mas sim, se você quiser criar qualquer categoria chamada all, podemos fazer isso. Mais uma vez, iremos para Adicionar categoria e este será Roadster e para as mulheres agora, clicaremos em Salvar aqui. Mais uma categoria com geral para mulheres. E basta clicar na categoria Salvar aqui. Essas principais categorias que criamos agora depois dessas categorias, podemos criar os produtos. Agora, esta é a página que você verá na seção do produto, e começaremos a adicionar o produto. Se você for para nossos recursos. Dentro dos homens, você encontrará essas pastas onde as fotos do produto estão lá. Então, pegue este. Desculpe, este aqui, e este aqui. Então, produto, vou apenas clicar no produto primeiro e no nome desta pasta, podemos tomá-lo como um nome do produto. Há uma pasta de informações aqui onde você pode tomar esta como uma descrição, como descrição regular e podemos mantê-la a mesma para todos a partir de agora. Voltando para homens, este produto, e ele vai tirar todo esse produto, fotos do produto, arrastá-lo e soltá-lo aqui. Você também pode importar um vídeo, se desejar. Então o preço do produto, será em algum lugar em torno de 316, talvez em estoque, tudo está lá. Agora temos que selecionar a categoria, pois este não é um Roadster quando vamos colocá-lo em geral e ambos os homens. E temos que colocar uma descrição lá. Então, vou apenas clicar duas vezes aqui e vamos pegar este. Basta colar aqui. E vou apenas nomeá-lo como homens. Não serei muito específico. Apenas minimize isso. Se tivermos variância semelhante, podemos criar uma variância e temos que fazer isso porque temos tamanho. Então eu tenho que digitar o tamanho aqui e adicionar variante. Então este será pequeno. Um preço pequeno será 360. Não sei qual preço adicionamos lá. Então, de qualquer forma, não há problema. E o Reino Unido é uma unidade de manutenção de ações. Você pode colocar algum número e, na realidade, você pode colocá-lo algum. A unidade exata de manutenção de estoque. vez, criarei mais um e será um meio. Mais uma vez, será 360. Unidade de manutenção de estoque SU k será algo e o peso será como se eu estivesse apenas colocando uma espera aleatória. Mais um. Este será pequeno, médio, grande. Isso será, digamos, talvez 370. Como vamos caminhar cerca de 1010 rúpias por lá, paramos de manter o estoque, manter a unidade. Mais um será extra grande e a varredura isso será 380. Você só se lembra que temos dois produtos com a mesma quantidade. São três sessenta e três sessenta três setenta e três oitenta. Só queria te mostrar isso. É por isso que estou mantendo os diferentes números lá. O peso será 0,2. E assim que isso for feito, vou clicar em Salvar. Você pode ver que temos tamanhos diferentes ao longo de um ano agora. Qualquer personalização, se você quiser fazer como adicionar personalização, quaisquer opções que você deseja fazer, opções de personalização aqui, você pode fazer isso sua unidade de manutenção de estoque para isso item inteiro. Como talvez possa haver alguma unidade de manutenção de estoque e o peso do produto será algo assim. Sim, isso é tudo uma vez feito e eu vou clicar no produto seguro e meu produto número um ys adicionado. Lá você pode ver que o produto é adicionado ao longo de um ano. Agora vou clicar em adicionar produto mais uma vez e adicionaremos o próximo nome do produto. Este anúncio é aquele bloco de notas. Aqui está. Este é o bloco de notas. Vou copiar isso e vou colá-lo ao longo de um ano. Os preços das imagens deste produto serão bons. 99 categoria novamente, é uma categoria geral e eu tenho que escrever algo aqui. Estou escrevendo como homens e variância novamente, será tamanho e não é como uma vez que você cria uma variante, você não pode criar várias variantes ali. Você pode fazer isso várias variantes, como cores e todas essas coisas. E recentemente, variante recente que criamos é essa. E vou clicar na sua cópia. E isso é tudo, tipo, eu não preciso fazer todas as coisas de novo. Mas só depois tenho que ficar de olho no preço do produto ou então será uma bagunça. Então phi 199599 e talvez este seja 649. Eu farei um produto com um preço diferente, e vou clicar em salvar. E isso é diferente dessas duas coisas, posso deixá-lo em branco porque você já sabe disso. Agora, no terceiro produto, o que vou fazer, irei para Roadster. Agora, acho que só existem quatro produtos que são Roadster. E vou apenas clicar em adicionar produto. Agora, este será nomeado apenas como Roadster. Algo como, vamos ver qual é a cor do produto aqui. Como Roadster, meia camiseta, talvez. Algo assim. Meia camiseta. Considerado como meias mangas. Então eu só estou nomeando meia camiseta. Basta copiar essa descrição. Coloque-o aqui, selecione esta imagem é arrastar e soltá-la aqui. Desta vez, o Roadster, o preço pode ser 999 ou talvez 899. Agora, a categoria será homens e Roadster. O general não está lá, é uma marca Roadster. Agora. Este temos que colocar lá. Vou colocar isso, gritos, copiar tudo. Se houver algo de homens em variância novamente, essa é a variância que temos, então vou copiar isso mais uma vez. Desta vez, isso é o quanto era como 899. Então. Noventa e nove. Noventa e nove. Noventa e nove. Desta vez, estou colocando todo o preço apenas como 899. E clicaremos em Salvar e unidade de manutenção de estoque. Você pode colocar qualquer coisa lá e o peso do produto e apenas clicar em salvar. Desta forma, o que você pode fazer, você pode adicionar os produtos, quaisquer produtos que você tenha aqui, você pode adicioná-lo. Este é o Roadster. Você pode nomear essa marca com o mesmo nome várias vezes porque temos fotos diferentes por lá. Tudo isso Roadster. Podemos colocá-lo na categoria Roadster. E este, você pode colocá-lo na categoria geral. E depois disso você pode adicionar os produtos das mulheres. Mais uma vez, temos Roadster aqui e categoria geral aqui. O que vou sugerir é que você faça upload de seus produtos aqui primeiro. E então veremos na próxima seção o que exatamente vamos fazer isso. Mas você precisa fazer o upload dos produtos ou então você não poderá me seguir exatamente nos produtos e vê-lo na próxima seção. E também vou adicionar os produtos e vê-lo no próximo vídeo, na verdade, não nesta seção. Vejo vocês no próximo vídeo, pessoal. 57. Vamos Tornar Nosso Site Dinâmico Do Projeto Quatro: Ok, então adicionamos um total de 17 produtos. Então, se você for para a visão geral, você pode ver que temos 17 produtos no total, incluindo homens e mulheres em geral. E o que você diz? Categoria Roadster? Se eu chegar aos produtos, novamente, você pode ver todos os produtos estão ao longo ano 17 produtos estão lá. E agora vamos ver como podemos trazer todos esses produtos para o nosso site de e-commerce do estúdio bootstrap que é o cartão snap. Então, voltando ao estúdio de bootstrap há mais de um ano, nós definimos, como digitamos aqui, como todos os produtos. Então, o que temos várias opções. Então o que vou fazer aqui é que, em vez de todos os produtos, o nomearei como, Vamos ver, Produto Mulher. Então, basta digitar o produto feminino e selecionar este contêiner, irei para a seção de comércio eletrônico, onde você pode ver esta seção de comércio eletrônico. E o segundo componente é o menor produto. Basta pegar esta lista de produtos e soltá-la dentro deste contêiner. Assim que eu deixá-lo dentro deste recipiente, os produtos vêm aqui. E agora você pode ver homens e mulheres, ambos os produtos já estão lá. Mas o que queremos é que queremos apenas um produto feminino e não queremos nesta exibição de lista. Queremos isso em uma visualização de cartão. Na verdade. O que faremos aqui agora, o que faremos, o que faremos, selecionaremos esta lista de produtos. E assim que selecionarmos o produto menos no painel de opções, podemos ver agora que temos um monte diferente de opções sobre u. primeiro é o layout do ListView, vamos mudar dois cartões vista, e lá vamos nós. Agora temos uma visualização Cards. Você pode ver as fotos do produto, existe o nome do produto? Então também temos alguns detalhes aqui. Temos ordem por ordem por data crescente, descendo a data em que o produto foi adicionado, o nome, ordem alfabética, preço em crescente e decrescente com a mesma frequência, deixaremos como ele é. Em seguida, temos uma página como número de páginas e, em seguida, ou pH, como quantos produtos queremos mostrar por página. Deixaremos essas duas opções em branco porque só queremos trazer produtos femininos aqui. Em seguida, temos o link do produto e toda essa lição veremos um a um por lá. Temos loja como definitivamente este é um corte instantâneo. Se este produto não for da Snapchats, podemos mudar a loja aqui. Se você tiver várias lojas lá, chegaremos às categorias. Então, vou apenas selecionar todas as categorias aqui. Antes disso, usamos dados simulados. Se você não tiver produtos, se você ativar, ative isso. Temos dados simulados aqui, que não queremos usar, então vamos desativá-los. E agora iremos para Categoria selecione em todas as categorias um, opção de categoria virá. E o que queremos aqui são produtos humanos. Então, selecionaremos isso e selecionaremos mulheres. Queremos o general e o Roadster. Então, vamos apenas clicar em mulheres e eu clicarei em Escolher. Assim que eu clico em Escolher, todos os produtos masculinos desapareceram e nós temos, Você é como todos os produtos femininos. Então, o que faremos, vou selecionar este contêiner e o Control L será rotulado. E isso vou nomeá-lo como mulheres, produtos femininos. E eu vou clicar em set, este rótulo. Estarei entendendo que este contêiner é para produtos femininos e agora vou fazer apenas uma duplicata que é o Controle D. E este está lá agora. E agora vou rotulá-lo novamente e nomeá-lo como produto masculino. Vou apenas clicar no set aqui também em vez de mulheres, vou apenas levar homens, vou apenas remover WO de lá. E agora chegando ao produto menos, vamos apenas selecionar aqui. E agora, do ser humano, vou selecionar homens e escolher agora todos os produtos masculinos nosso ouvido. Agora, se virmos a pré-visualização do nosso site, se você vier para a pré-visualização do cartão, agora você pode ver que temos os produtos femininos aqui, então temos produtos masculinos aqui. E esses produtos dinâmicos. Justo o suficiente. Então temos este agora, Roadster general e tudo o que temos para criar esta página. Agora. O que vamos fazer é voltar ao estúdio de bootstrap. E criaremos uma nova página aqui, ou seja, página HTML. E vou nomeá-lo como produtivo. Basta clicar em Enter, clique duas vezes aqui. E pegue um recipiente. Um contêiner e, em seguida, dê uma margem superior a ele, margem superior quatro. Em seguida, pegue um título. Nomeie-o como o que é este min disso como produtos. Vou pegar a lista de produtos ou você a deixa dentro deste contêiner. De você, vou levá-lo como exibição de cartão. Role para baixo os produtos que vou tomar como produtos masculinos e basta clicar em judeus. Esta é uma lista de produtos principal. Todos os produtos masculinos ou dessa forma faremos várias coisas. Então, antes disso, o que faremos é criar desculpas, criaremos mais uma página ou os detalhes do seu produto. Este é um discurso de detalhes do produto. E voltando à nossa seção de comércio eletrônico, este é um produto. Este é o, este é o componente que vamos usar. E antes disso, novamente, farei. Vou levar um contêiner. Como de costume, vou colocar margem superior quatro a oito. Esta página de detalhes do produto ou você será, por enquanto, o que farei em basta selecionar este produto e clicarei no botão Escolher. Então, vou ter essa informação aqui. Esses são os dados como temos imagens. E se eu vier aqui, você pode ver a página um está lá agora. Posso ver vários produtos. E se eu clicar aqui, temos esta bela e bonita galeria, galeria de fotos. E isso, novamente, temos várias seções e agora temos produtos a serem adicionados no carrinho. E então temos os tamanhos, pois temos MDD lá em vários tamanhos. Esta é uma opção que eu fiz na personalização, aquela embalagem de presente. Se alguém quiser que a gente dê a embalagem, basta verificar isso e adicionar o nome da pessoa a quem, desculpe, quem. Vamos apenas transformar isso para quem você quer dar. O nome da pessoa estará lá, e então será um. Em seguida, o usuário clicará em Adicionar ao carrinho. Avançando o que temos que fazer, sua página de detalhes do produto ys. Temos que ir para a página de detalhes do produto lá. Em vez de produto fixo. E em vez de C na fonte de dados, tipo de produto é fixo. Temos que clicar na dinâmica por lá. Esta é a página em que queremos trazer os detalhes do produto. Vá para a opção Renomear e selecionarei o nome do discurso e copiarei esta página. Isso está tudo neste parâmetro de URL. Vou apenas digitar esse parâmetro de URL. Quando estivermos no componente do produto, esse parâmetro de URL terá o mesmo nome dessa página. Significa como se fosse uma página de detalhes do produto. Então, vou colar os detalhes deste produto aqui. E eu não vou colocar nenhum ponto HTML e tudo neste lugar. E o parâmetro URL vou apenas digitar os detalhes do produto. Voltarei para homens de produtos. Selecionarei a lista de produtos aqui. E nisso você verá uma opção de link de produto aqui. Que equipamento você é, o que temos que fazer é primeiro colocar uma barra invertida. Em seguida, vou digitar o nome da página na qual quero redirecionar, e esses serão os detalhes do produto. Você vou digitar HTML de ponto porque quero redirecionar para lá. Vou colocar um ponto de interrogação aqui. Então, novamente, vou digitar os detalhes do produto. E os detalhes deste produto são o parâmetro de URL que definimos para esta página específica. E depois desse parâmetro de URL, colocarei um sinal de igual. Vou colocar o suporte encaracolado, o suporte curly de abertura, e vou digitar ID dentro disso. Não fique confuso aqui, vou explicar exatamente o que é. Nós escrevemos detalhes do produto dot HTML. Parece que se clicarmos neste produto, em qualquer produto, ele será redirecionado para esta página. Isso é detalhes do produto ponto HTML. E esse é esse discurso. Depois desse ponto de interrogação, estamos colocando uma seção dinâmica aqui. Após um ponto de interrogação, o que a página de detalhes do produto mostrará é como a página de detalhes do produto buscará o ID deste produto e esse produto será exibido nesta página HTML do ponto do produto. É tão fácil quanto parece. É simples assim, ok, a primeira é a página do produto e, em seguida, os detalhes do produto são o parâmetro URL. E o id é o ID do produto que o sistema buscará automaticamente. Agora vou clicar em outro lugar, voltando para o navegador da web. Vou voltar um passo para trás, e esta é a lista de produtos, tudo apenas, vou clicar neste produto para mostrar a você. Depois de clicar neste produto, você pode ver que este produto é aberto com o custo do nome, os tamanhos que o botão Adicionar ao carrinho e outras coisas também. Voltarei aqui e boom, estamos de volta à nossa página do produto. Mas voltando ao bootstrap studio, eu tenho que selecionar menos esse produto. Vou selecionar este. Vou apenas copiá-lo. Vá para a página de índice, role para baixo. Selecionarei este item da lista de produtos aqui. E eu vou colar este link do produto do mapa de URL. E vou colar sobre você. Se eu voltar à minha pré-visualização da Web agora, ela me levará a esta página automaticamente. E se eu clicar aqui, isso me levará a essa página. Esta é a lista de produtos e agora é dinâmica. Agora, a seção dinâmica é iniciada. Espero que você esteja um pouco animado para construir essa coisa em particular. Se você tiver alguma dúvida, qualquer coisa, você pode me deixar a pergunta na seção de perguntas. Você pode se juntar a mim no meu canal Discord. Mostrarei que este é o meu canal Discord, e o URL de convite será este. Você pode digitar esse URL e você pode se conectar a mim no meu canal Discord e podemos discutir muitas coisas aqui. Então, voltando aqui, voltaremos ao nosso estúdio de bootstrap e agora temos que criar mais uma página para mulheres. Então, vou apenas duplicar este. Agora vou digitar mulheres. Basta clicar duas vezes aqui. Não preciso fazer mais nada porque tudo está definido, o URL e tudo está definido. Só preciso vir aqui e mudar as categorias. E esta é uma mulher agora. E vou apenas clicar em Escolher. Então eu vou duplicá-lo mais duas vezes. A mulher e a mulher correm. Geral. E este, vou apenas remover dois e Roadster. Clique duas vezes, você chegará a esta lista de produtos. E das mulheres, isso é geral, então selecionarei o geral e clicarei em Escolher. Então, esses são os produtos em geral. E chegar a este agora é selecionar todos os produtos Roadster, categoria Razr, e eu vou clicar no suco, então temos apenas três aqui. Então temos que renomear isso também. Na verdade, não importa, mas a ortografia deve estar certa, certo? Roadster. E nada geral, vou selecionar este. Os homens clicarão em Geral, escolherão entrarão em raízes para selecionar isso e, em seguida, clicar em Roadster. Lá vamos nós. E agora chegando à página de índice, agora temos que vinculá-la. Basta abrir isso. Vou selecionar Roadster. Desculpe, onde está o URL? Selecione esta página. E, em seguida, primeiro será homens, produtos homens Roadster. Em seguida, o segundo é geral, homens de produtos de praia em geral. E se você clicar, serão apenas minutos do produto. Feche este, abra a mulher, selecione o Roadster, URL. Então mulheres produtivas Roadster, general. Mulheres gerais. E em todos. E basta ir para produtos femininos, produto, um ponto de mulher HTML. Alguém fechou isso? Sim, temos esta seção feita aqui. E agora no próximo vídeo, acho que é um vídeo longo. No próximo vídeo, criaremos outras páginas, como Adicionar ao carrinho e tudo. Então vejo vocês no próximo vídeo, pessoal. 58. Página do Carrinho de Compras do Projeto Quatro: Portanto, antes de avançar e criar nossas outras páginas, iremos para nossa conta de refluxo primeiro. Começaremos a fazer, começar a fazer algum gênio no cenário. Então, primeiro é a configuração geral. E, em geral, temos o nome da empresa como o cartão de encaixe e a moeda que vamos aceitar os pedidos. Como muitas vezes eu vou apenas mantê-lo em USD apenas a medição. Será como cagey e centímetros e tudo isso, termos e condições, política de privacidade, política reembolso e o endereço de e-mail principal onde queremos as notificações. Então, vou mudar o endereço de e-mail para minha conta do Yahoo. Então, nesta página, acabei de alterar o endereço de e-mail. Em seguida, clicarei em Salvar aqui. Avançando com as tributações, adicionaremos tributações se tivermos alguma. Digamos que se forem os Estados Unidos e criarão um Estados Unidos ao longo de um ano, selecione a taxa de imposto selecionada e ela será excluída ou inclua você. Então, vamos colocar o imposto sobre o envio e permitir impostos e tudo mais. Vou apenas clicar em salvar o registro da taxa de imposto é atualizado. E então podemos adicionar mais um país e digamos que digite a Índia. E eu vou clicar aqui. Portanto, a taxa de imposto aqui é de 18% por produto. O número do imposto, pode ser qualquer coisa f7, G, B, D 12387. Desculpe, FFT GB e número de IVA. Será como DCP pk 1122348. E todos os produtos são interiores incluem impostos e impostos sobre o envio também, e clicaremos em Salvar. Dessa forma, você pode adicionar as tributações com base no país qual você está enviando os produtos. Em seguida, venha para esta área de transporte onde outros locais e todas as coisas estão lá. Você pode clicar em Editar. Isso é, por padrão, ele está lá. E a opção de taxa fixa mundial existe. Então você tem que editar este também, isso é mundial e é uma taxa fixa e tudo mais. Então, sim, esse custo é gratuito e agora temos que ir para a outra área. Digamos que é como a Índia. De fato, Tchau. Índia. Vou digitar tipo, digamos que digite como frete grátis. Frete grátis. E em países como os Estados Unidos, então digamos que a Austrália. Austrália e Índia. Enquanto na Índia, Índia, Índia, Índia, na Índia. Esses três países estão lá. Esses três países estão lá onde estou oferecendo o frete grátis. O envio gratuito está lá e, em seguida, adicione o método. Será como gratuito. Entrega. rótulo será frete grátis. E ordem de valor total. Será 0 sempre, e eu só clicarei em Salvar. Então é assim que ele vem. Frete grátis e salve-o. Se eu clicar em frete, digamos que na Índia, pode haver, digamos o Canadá. É um envio de página sobre o anúncio deles e é uma taxa fixa. E a etiqueta é enviada. O custo base é de nove USD e quatro quilo, será de US $1 por quilo. Vamos fazer o envio baseado em US $2. Vamos fazer US$1 por frete e US$2 por KG. E eu vou apenas clicar em Salvar e vou torná-lo seguro. Portanto, esses são os métodos de envio que criamos em outros locais. Se eu for aqui, é como outro local. Edite. Este apartamento já está salvo. Não posso fazer nada aqui porque é apenas gratuito. Esta é a opção padrão. E agora chegando à opção de pagamento, temos três opções de pagamento. Uma delas é a faixa do PayPal e o método personalizado, não o cliente. No PayPal. Vamos fazer duas coisas, PayPal e costume porque tribo, eu tentei fazer isso, mas não está permitindo mudar meu país para a Índia. Na verdade. Você pode tentar stripe você se tiver duas contas Stripe, se você clicar em Stripe, ela se conectará à sua conta Stripe e, em seguida, fará algum processo. E é automaticamente que ele conectará sua conta após a verificação da sua conta. Após a verificação do seu acordo se conectará automaticamente à sua conta ali. Mas PayPal e liquidez personalizável, fácil. Podemos fazer isso muito rapidamente no PayPal. É como abri-lo, adicionar seu endereço de e-mail e clicar em Conectar, e isso é tudo. Ele está conectado. E o método personalizado é como qualquer método que você deseja adicioná-lo pode ser, você pode adicionar aqui. Então eu vou digitar B fio UPI, UPI na Índia, é como método de pagamento, interface de pagamento unificado, algo assim. Esta mensagem é uma mensagem personalizada, como obrigado pela sua empresa para concluir seu pedido, envie um valor de transferência bancária ou eu vou digitar por favor. Por favor, transfira o valor deste é o valor. Fio para cima no suporte. Posso digitar o Google b vírgula vírgula, vírgula, qualquer UPI. Em vez desse nome da empresa, vou digitar meu nome e digitarei meu ID UPI. E eu removerei essas duas linhas. Estou digitando uma ID UPI falsa aqui. O UPI ID é assim. Pode ser como número completo. A taxa, por que BL? Sim. Importante inclua o número do seu pedido, o ID do pedido no assunto para que possamos conectar o pagamento, seu pedido e apenas criá-lo. Isso é tudo isso para métodos de pagamento. Eu criei este PayPal. Se você está assistindo da Índia, este PayPal não está funcionando na Índia porque eles não têm apoio na Índia. Stripe tem uma Índia suportada porque em nossa plataforma chamada Classroom.com Kw ET classroom.com, lá estamos usando Stripe e está funcionando absolutamente bem. Mas eu não sei neste sistema o stripe não está funcionando, não funcionando, pois não está me permitindo mudar o país. Estou usando este PayPal e pago via UPS como um método personalizado. E vamos ver se é a opção de adicionar qualquer imagem ou algo assim. Não, não temos nenhuma opção de imagem e algo assim. Eu poderia ter adicionado o código QR da UPI sobre suas tributações gerais também é feito do que o envio e o pagamento é feito, então sim. Certo. Vamos criar um código de cupom aqui. Como eu vou clicar em Adicionar cupom e vou digitar um cupom é como 20, desculpe, não 24% de desconto em todos os produtos. Posso dar uma descrição aqui. 20% de desconto em todos os produtos. Ou talvez pelos próximos cinco dias. Nos próximos cinco dias. E o código será plano 20. Será um código ativo, será pessoalmente, ensinará. desconto será de 20. E então veja se o cupom criará mais um cupom. Como flat 60. Fique plano. US$1,60 ganharão porque estamos usando, estamos criando tudo em dólares. Desconto plano de $1,60 em todos os produtos. Usando o cupom plano 60. Flat, o apartamento. O código será plano, 60. É como uma quantidade fixa. Serão US $60. Temos dois códigos de cupom. Um é plano 60 e quando e é 20%, ok, então não é mostrado aqui. É uma porcentagem e é um plano. Ambos estão ativos, 68,20, e esta é a data de início. Você pode criar vários códigos de cupom aqui e podemos prosseguir com isso. Nenhuma categoria que já vimos produtos, pedidos e visões gerais que vimos. Agora vamos voltar ao nosso estúdio de bootstrap. Ano. Vamos criar uma página de carrinho agora. Basta clicar com o botão direito em ano Novo e eu criarei a página do carrinho. Para ter acesso à página do carrinho, criarei um botão aqui. E antes disso, vou apenas selecionar este nav e duplicar esse nav. Dentro deste nav, temos que cair para baixo. Então, vou remover ambas as suspensas de lá. Basicamente, não preciso de um Navier porque estou pegando um botão, certo? Vamos pegar um botão e colocá-lo dentro desse colapso. E vou nomear isso como cartão ou talvez eu possa colocar um ícone de cartão ali. Ele pegará o ícone, basta arrastar e soltar este ícone aqui. Clique duas vezes nesse ícone e basta digitar carrinho. E temos guardas sobre você. Então, qual cartão podemos pegar este cartão. Sim, legal. Então eu removerei o texto daqui, ou seja, cartão. Selecionarei este botão e o alinharei para terminar. Então ele virá aqui. Não temos nenhum sistema de login, algo assim porque é como um checkout de convidado. Como qualquer um pode vir, eles foram selecionar o produto, eles podem adicionar o produto ao carrinho. Eles podem colocar as informações e podem encomendar o produto. Não temos um sistema chamado o que você diz? Como registrar e todas essas coisas. Certo. Aqui vamos nós. Temos um botão de cartão aqui e temos categorias aqui. Se eu rolar para baixo, sim, ele está lá. E se eu for aos detalhes do produto masculino, na verdade, se você for para a página de detalhes do produto, então o que podemos fazer aqui, agora, nós temos isso apenas duplicará esse conteúdo ou um mais tempo e exclua esses produtos. A partir daqui, irei ao meu e-commerce, pego uma lista de produtos e colocarei essa lista de produtos no contêiner. Então, temos em algum lugar em torno de quantos produtos, como 17 produtos que temos. Selecione esta lista de produtos e em vez do mínimo, vou trazê-la para o carrinho. Ano. Vou colocá-lo como preço subindo o preço mais baixo com o preço mais baixo, e então aumentaremos o preço. Por página significa como C, temos ao todo 17 produtos aqui. Mas digamos que se você quiser mostrar apenas produtos limitados, digamos como oito produtos ou algo assim. Então, o que posso fazer é digitá-lo e clicar em Enter aqui. Então temos uma paginação, como paginação automática. E a página é uma. E temos uma página. Temos muitos produtos. Agora o que vou fazer, este link de produto que temos que fazer, certo? Então, vou apenas vir a este homem e clicar neste ano. Clique no Produto mínimo, vamos apenas copiar este. E voltando no ano, vou apenas selecionar isso e colá-lo lá. É como um nome de imagem de show e, em seguida, mostrar trechos, preço e paginação. Então, sim, definitivamente. Temos paginação. Então temos que mostrar a paginação. Se você quiser mostrar o preço, então os preços orais para que você possa simplesmente remover o preço também, mas eu queria mostrar o preço que está em você. Você quer mostrá-lo ou não completamente com você. Descrições, tamanho e todas essas coisas. Sim, está lá. Agora, se vamos para a página do carrinho de carrinho, como se você está vindo, chegando à página do carrinho, então criaremos um contêiner aqui. Vou apenas pegar o contêiner e, como de costume, colocaremos em direção ao topo quatro da margem para esse contêiner. E o seu eu vou fechar isso chegando ao comércio eletrônico, enquanto o comércio eletrônico Sim. Adicionar ao carrinho está lá. Então, vou deixar isso. Não, desculpe, não adicione ao carrinho. Na verdade, carrinho de compras. Esta é a página do carrinho onde podemos ver como carrinho de compras e lista dos produtos, o que quer que tenhamos adicionado, que pelo menos dos produtos estarão aqui. Se você selecionar o carrinho de compras, temos duas páginas. Um deles é o URL de sucesso e outro é o URL cancelado. Então, o que vou fazer é criar. O que você diz como uma página. Vou digitar. Sucesso aqui. Nada significa como sempre que o produto for pedido com sucesso, onde ele deve redirecionar. Então, é como a página de sucesso que vou levar o contêiner como de costume. Margem top quatro para ele. Margem de quatro. Então vamos pegar o ícone. Só estou tentando evitar tomar qualquer coisa externamente. E talvez. Polegares para cima. Polegares para cima. tomada de fim de semana. Bem-vindo à aparência, levará uma cor verde para ela porque é um sucesso. Em seguida, descer para o tamanho da fonte aumentará o tamanho da fonte. Tudo o que estou fazendo dentro desta div, dentro deste contêiner. Vou levar você com sucesso. Satisfeito com o pedido. Em seguida, o parágrafo será inserido. Este tanque contínuo você para fazer compras. Mais uma vez, ponto exclamatório. Vou pegar um botão, o botão dentro disso e vou digitar. Continue comprando. Mais uma coisa que podemos fazer é digamos que estou tomando mais um Rumo sobre o seu único para você. Ou talvez eu possa dizer $1,60 $1,60 em todos os produtos apenas para você. Então, podemos usar esse desconto aqui. Talvez possamos levá-lo para dentro de um parágrafo dessa maneira. Flat 60 é o código de desconto, que será um h4. Mais uma vez. Este, vamos ter uma margem de cinco. Isso parece ser um desconto de $6 em todos os produtos no seu próximo pedido. Dessa forma, o que acontecerá no próximo pedido que estamos oferecendo a eles é 60% de desconto. Vamos levá-lo para o centro. Também chegará ao flexbox. Pegue coluna, corpo, centro. Vê como obrigado. Acho que temos que colocar um fundo de margem por mais de um ano. Agora parece que você fez o pedido com sucesso. Obrigado por fazer compras. Mantenha compras e $60 desconto em todos os produtos em seu próximo pedido. Só para você. Em seguida, use o código de cupom abaixo. Isso é tudo. Salve isso. Da mesma forma que podemos usar esta página quatro. Cancelar. Cancele porque a caixa também precisa da página de cancelamento. Em cancelamento, usaremos esse polegar para cima como um rosto triste, talvez. Na aparência, vamos mudá-lo para uma cor vermelha. Vê que algo deu errado. Tente novamente, continue comprando. E diz que depois do seu primeiro pedido, você desbloqueará um cupom para seu segundo pedido. Ok, então, chegando ao carrinho, selecionando a opção de carrinho e chegando às opções, selecionaremos a página de sucesso aqui. Para o cancelamento, selecionaremos a página de cancelamento aqui. Dias de descanso em Good. Tudo como detalhes do produto é bom. Então o masculino é bom. Temos que transferir as navbars para todas as páginas. Então, o que farei e selecione a barra de navegação clique com o botão direito do mouse Copiar para vários. Esta é a opção principal, como cópias de links, selecione Todas as páginas e clique em Copiar. Temos algumas páginas também como termos e condições e todas as coisas que podemos criá-las mais tarde. Não é como se tivéssemos que fazer isso agora sozinhos. Então temos que levar isso um por um no topo. Na verdade, podemos simplesmente remover este daqui. Somente a partir de Cancelar e sucesso. Somente de sucessos de conselheiros, podemos remover essa barra de navegação. Mas em todas as outras páginas temos que colocar isso. 59. Vamos Terminá-lo Do Projeto Quatro: Agora, como vinculamos tudo, podemos colocar um logotipo ao longo de um ano ou algo assim, e então podemos usá-lo. De qualquer forma, queremos, temos carrinho e, se você quiser adicionar várias categorias , podemos adicionar essas categorias também. Sim, acho que isso foi resolvido. Então, o que faremos, publicaremos isso. Eu criei um domínio separado para ele que é design de ponto bss ponto de cartão snap. Acho que você deve saber como fazer isso, mas ainda assim vou te dizer mais uma vez. Clique em Publicar aqui. Não publicado, na verdade. Clique em Gerenciar site. Eu criei este, mas ainda assim vou apenas dizer que você gosta clicar em Gerenciar site e depois clicar em Adicionar site, colocar o nome do seu site onde você receberá um subdomínio e você tem que dizer quando você quer excluir isso nunca ou algo parecido. Queremos colocar uma senha. Você pode colocar uma senha e clicar em Criar. E então seu site será criado aqui como design de ponto de ponto bss snap card. E vou fechá-lo. E então eu selecionarei este design de ponto VSS ponto de cartão de encaixe, e vou publicá-lo. Agora o publicado, ele é publicado com sucesso e eu vou clicar neste. Ele abrirá meu navegador e boom, lá vamos nós. Agora este site está ao vivo. Você pode ir e ter um cheque. Talvez, talvez eu possa excluí-lo no futuro, mas vamos ver, ir e verificar. Temos nosso carrossel aqui e depois temos nossos produtos femininos. Como se fosse muito caro. 77, US $700 mil dólares. Como se fosse tão bom quanto o iPhone. Sim. Então temos todos os produtos para mulheres. É um menu. Em geral, é uma mulher, então são URLs femininas. Bem, nos homens temos que mudá-lo. Tudo de mulher. É. Mulher. E vou publicá-lo mais uma vez. Vindo aqui, atualizando esta página. Agora você pode ver o produto de barra de HTML feminino. Existe sua vida? Eu clico neste produto, você pode ver isso chegando. Absolutamente bom. Temos outros produtos que a paginação sobre isso. Podemos ver os produtos também aqui podemos clicar na sua mesa de luz. Podemos ver isso super incrível. E clique em todos os Roadster. Tudo está pronto. E, em seguida, basta clicar neste produto. E US $20 por uma armadilha de presentes. Na verdade, eu estava planejando uma rupia, mas hoje em dia em dólares. Então, deixe ser, não é o modo de teste apenas plano de 20 anos, podemos ver 20% de desconto já existe em alguns produtos que mencionamos que vamos fazer uma coisa. Adicionaremos este produto em tamanho grande e basta clicar em Adicionar ao carrinho, como o produto adicionado ao carrinho. Selecione este e o URL do carrinho. Vou adicionar o URL oral do carrinho aqui É o ponto do cartão HTML, e vou publicá-lo mais uma vez. E então, se eu vier aqui e se eu atualizar este Adicionar ao carrinho, e então aqui você pode ver como opção de cartão C sobre você. Esse é o mesmo botão aqui também, acho que não o vinculamos. Voltando lá, vamos para a página de índice e selecionando esse botão. Clicaremos em Link e, em seguida iremos para esta página chamada carrinho, publicaremos novamente. E também vamos salvá-lo. Voltando a este e apenas atualize-o. Mais uma vez. Faremos isso para cortar. Ele está entrando no carrinho de novo e de novo porque todas as três vezes que selecionei tamanho diferente. Vamos ver mais uma ordem maior para o meio deles. Selecione aqui. E se eu clicar em ver carrinho, você pode ver no cartão que temos esse Excel grande e pequeno e este. E mesmo se clicarmos neste , ele virá. Você só porque esta é uma página de cartão. Então, basta clicar em remover isso. Remova isso e remova isso. Sim, são sete noventa e setecentos e quarenta e nove dólares que vamos pagar. O envio e os impostos são calculados durante a finalização da compra. Quando vamos verificar esse tempo, ele vai calcular o resto da coisa. Certo. Então, como está, não temos uma página de login, então você estará perguntando como exatamente ele está salvando o cartão. E a resposta é que está salvando tudo nos cookies. Então, clicaremos no botão Checkout aqui. Então você pode ver como resumo do pedido, você tem este pedido e este é o preço, a quantidade é assim, este como voltar a cortar mais uma vez e aumentará a quantidade aqui. O preço agora é cento, dezentos e quatrocentos e noventa e oito dólares e checkout. Você pode ver dois itens. Faremos mais um como vamos ao Roadster mais uma vez e selecionaremos este produto ou talvez iremos para o geral. E selecionaremos este. com o papel de embrulho e vou colocar meu nome apenas ano, estou me presenteando como está. E quando você clica em Adicionar ao carrinho e, em seguida, do seu olho, irá para o carrinho. E então você pode ver que esta é uma mulher grande com duas quantidades e isso é como US $20 extras para isso e, no total, US $2 mil estão lá. Em seguida, clicarei em Checkout. Após o checkout, o que podemos fazer é adicionar um código de cupom, que era plano 20. Não estamos usando flat 60 porque não conhecemos como cliente porque não fizemos nosso primeiro pedido em primeiro lugar. Aplicar. E então você pode ver como US $20 de 20% de desconto é adicionado, que é este. Então eu tenho que digitar o endereço de e-mail como cliente. Então, vou adicionar este e colocar um número de telefone aleatório. Coloque o país como qual país estava tendo o Canadá. Canadá foi forçado a olhar ou eu não sei, que seja apenas a Índia. Não conheço o código postal do Canadá. Minha lista e o nó seis é o código PIN. Então, observe que o vendedor é como, por favor, faça um bom presente. De volta. Não naufrágio de volta. Para clicar em. Em seguida, aqui. Temos como PayPal e pagamento com cartão de débito. Na parte inferior, temos essa opção chamada PYY UPI. O pagamento com pagamento instantâneo é sempre um topo e esse pagamento está na parte inferior. Ok, então vamos adicionar as informações do endereço de entrega. Este aqui. E eu vou pegar esta cidade. Estado de néon Índia. código PIN da lista será 424213, nó seis. Este é um pouco, este é o endereço real, mas eu não tenho ficado no endereço dele. Não me importo em mostrar isso agora, apenas Kyi UPI. Agora isso está feito. Posso ver como todos os preços em USD. Agora, se você voltar aqui e clicar em pedidos, como você encontrará alguns outros pedidos também. Mas esta é a ordem que colocamos recentemente. Este é o endereço de e-mail que 1.60773. Você pode ver como 177.3.60, você precisa abrir este pedido e selecionar como marcado como pago. Se atualizarmos isso. Seu carrinho de compras está vazio porque hoje em dia é pago. Ok, vindo você é como ir para quem Nil mil anos. Você pode ver agora que o refluxo está lá com o pedido é mar como refluxo ou para Roadster com este preço e tamanho do torrador com isso. Personalização é embalagem de presente é o nome da boa embalagem será atual, e este é o valor do imposto que é US $270 e mostra como ordem C. E se eu clicar em Ver pedido, isso me mostra este pedido que dirá como marcado como enviado e tudo. Tenho os detalhes de contato do cliente agora com o número de telefone. E também dessa forma, posso entrar em contato com ele. Mais uma vez, marcou literalmente um turno. E marcou um turno significa como enviar notificação por e-mail aos clientes. Então, definitivamente, sim. E vou digitar que seu pedido foi enviado. Clique no link para rastrear seu pedido. E o link será, agora estou colocando o link do meu site através do awesome.com e não é você. É seu eu vou apenas clicar em confirmar. Qual é o e-mail? Esse e-mail apenas nesse e-mail, eu deveria esperar. Mais um e-mail. Devo esperar ou devo encaminhar? É refluxo. Agora parece que o cartão de encaixe foi enviado para o seu pedido. Seu pedido é enviado. Clique no link ou clique no link para rastrear seu pedido, mas ele não está mostrando um link. Acho que tenho que copiar e colar isso. Como UC como cliente, tenho que copiar e colar isso. Então, sim, é assim que vem como o refluxo de seu pedido é enviado e todas essas coisas. Ele vem ao longo do ano. É assim que o pedido é enviado. Com sucesso. Atualizado, descarte Yeah. Sim, pessoal. É assim que faremos nosso site de comércio eletrônico. partir de agora. Para este site de comércio eletrônico, isso é feito e faremos algumas modificações nos scripts quando chegarmos à seção de SEO. Nas seções de SEO, faremos algumas mudanças no comércio eletrônico e também em alguns outros sites, bem como para torná-lo otimizado no mecanismo de pesquisa de SEO onde o Google pode encontrar nosso site facilmente e isso faremos antes de hospedarmos nosso site no servidor real. Definitivamente, vamos hospedar nosso site em servidor real. Então, naquele momento, não naquele momento. Antes disso, antes de hospedarmos nosso site, faremos algumas modificações no site na seção de script, como clicar com o botão direito do mouse em Propriedades, descrição do título que OG, como Open Graph, que Twitter, depois Meta tags. adicionaremos algumas metatags e conteúdo principal, como rastreadores convergentes usando o Google Analytics e tudo isso também adicionará os rastreadores convergentes. Então, faremos isso nas seções posteriores. E isso é tudo pessoal, a seção de comércio eletrônico no estúdio Bootstrap. Seja qual for a versão, 5.9 ou seja lá o que for, então calculamos a seção de comércio eletrônico usando o Bootstrap studio. E agora você também pode fazer seu site de comércio eletrônico. Em vez de produtos, você pode fazer qualquer coisa. Você só pode vender os produtos, mas, como um produto virtual ou como um produto físico, produtos virtuais, como uma vez que o pedido é feito e o valor é coletado, você pode enviar o link para isso produto virtual onde o usuário pode baixar isso e ele pode usá-lo, utilizá-lo, usá-lo o que quer que seja. Se for um produto virtual, você pode enviar o produto para eles e isso é tudo. Certo, pessoal. Então, é isso por enquanto. E a seção de comércio eletrônico está concluída. E na próxima seção, vamos ver o que começaremos ementre algo vem na memória e podemos fazer isso ou podemos ir com SEOs então. Certo, então, muito obrigado. E isso é tudo para esta seção. 60. Vamos Começar Com SEO: Olá e bem-vindo pessoal nesta nova seção chamada SEO, que é otimização de mecanismos de busca. Nesta série ou nesta seção, entenderemos exatamente como vamos otimizar nosso site usando algumas técnicas que são usando algumas técnicas que chamadas de otimização de mecanismos de busca. Há tantas coisas que podemos fazer que eu lhe darei as melhores coisas que vamos fazer usando o próprio aplicativo Bootstrap Studio. Como você pode ver agora, o estúdio bootstrap virgem facilidade, virgens 6.1. Se você perceber que não há muitas mudanças enormes, mesmo que você esteja usando este tutorial é feito do bootstrap 5.6 alguma coisa e então ele está vindo para assistir. E seis, não há muitas mudanças drásticas nisso. E abaixo da linha quando você estiver, quando estiver passando pelo curso, você notará que não há muitas mudanças nisso. Sim, você não encontrará grandes mudanças, mas como um pequeno e pequeno gênio lá fora. Mas, de qualquer forma, isso não afetará nosso curso. E quais exatamente as mudanças estão lá nesta versão específica que você pode ver, como se você for à sala de aula com chave do site, Udemy ou onde quer que esteja assistindo a este vídeo. Então, basta procurar meu curso. Agora está aqui, talvez abaixo da linha, não estará lá. Portanto, mesmo que você possa pesquisar sua chamada BSS e clicar em Enter, você pode encontrar este curso sobre seus atributos 399 neste momento quando eu estiver gravando este vídeo. Portanto, pode aumentar ou diminuir, ou este site do site fornece continuamente as ofertas também. Então, estou apenas clicando neste Gore e se eu rolar para baixo e chegar ao currículo, você poderá ver as atualizações da versão do estúdio Bootstrap. Então eu crio vídeos exatamente sobre esses tópicos que são atualizados no estúdio Bootstrap e que podem não criar uma grande mudança aqui e ali. Então é assim que vamos fazer isso. Certo? Estou fechando ou talvez minimizando essa coisa em particular. E para entender a seção de SEO, o que vamos fazer é usar nosso site Tech Resolve. Vou abrir esse site no estúdio Bootstrap. E no design recente, vou apenas clicar duas vezes. E lá vamos nós. Temos o site pronto aqui. Então começaremos a fazer alguns SEOs. Mas antes disso, vou dar-lhe alguma compreensão básica do ACOs e por que temos que usar SEOs em nosso próximo vídeo. Vejo vocês no próximo vídeo, pessoal. 61. Noções básicas de SEO: Ok, bem-vindo de volta Neste vídeo novamente, e estamos falando de SEOs. Vamos ao nosso site. Vamos apenas para a sala de aula infantil. E vou te mostrar uma coisa no Google. Digamos que estejamos usando o mecanismo de busca do Google. Se estivermos usando uma consulta de pesquisa chamada sala de aula com chave, como você pode ver, existe apenas uma sala de aula tão fofa e principais canais do YouTube da sala de aula. Então, se eu clicar na sala de aula com chave, você pode ver nosso site, sala de aula com chave está chegando na primeira página. Então temos essa informação chamada isso é um infográfico de informações comerciais, também podemos chamá-lo, pois está mostrando sala de aula infantil, nosso site, o link, o URL do site, então é um site do LinkedIn, então este é um YouTube, então este é um Facebook. Então o Spotify, se alguns podcasts também estiverem lá, pode haver o Instagram, então há alguma empresa em detalhes completos da empresa. E então temos uma conta no Twitter e aspirina, assim por diante e assim por diante. Então, como exatamente esse jogo específico na Pesquisa Google e no Google entendem que se alguém estiver procurando por essa consulta específica, então eu tenho que mostrar esses resultados. Digamos, por exemplo, que procurei por sala de aula infantil várias vezes e já visitei este site. É por isso que ele está sendo exibido nessa cor específica. Então, a melhor maneira de fazer isso E é ir para o modo anônimo. Isso é o modo privado, ou seja, mudança de controle. E se você pressionar em qualquer navegador, ele chegará no modo de navegador privado. Aqui vamos procurar pelo Google primeiro, digamos google.com. Você também pode pesquisar diretamente aqui. Quatro sala de aula chave, não é grande coisa. Ele leva você apenas para a mesma página. Vamos pesquisar seu porque você é, não mostrará nenhum detalhe ou algo assim. Mas você também é, você pode ver o curso de sala de aula infantil sob demanda e o que quer que esteja lá , ele está chegando no primeiro posto. Então, como exatamente fazemos isso? Vamos entender. Há três coisas caras, neste lugar em particular. Esta área, que está lá, desculpe, vou selecionar esta ou vou apenas fazer uma área vermelha em torno disso. Então, deixe-me tentar selecionar isso ou não, posso selecionar isso. De qualquer forma, você pode ver essa área específica. Isso é chamado de seção de domínio que é https dois pontos barra inclinada à esquerda classroom.com. E são as flechas menos públicas. Isso significa que sempre que clicamos nisso, ele está nos redirecionando diretamente para uma seção ou pasta específica ou algo assim, que é armazenado dentro da pasta pública. Além disso, veremos quando pegaremos nosso servidor e domínio. Talvez isso aconteça na próxima seção. Ok, então este é o primeiro é sempre o domínio um. Mesmo que você possa ver aqui, este é um LinkedIn, este é um YouTube, facebook.com, este é um open.spotify.com. A primeira seção é dominante. E enquanto estamos procurando em sala de aula com chave. Então, há duas coisas que você pode ver que seu filho classroom.com é um nome de domínio, o primeiro nome, que você pode ver aqui. Agora posso selecionar isso em azul. Este particular como Baldwin, que está no azul. Este é o título dessa página específica, título dessa página de índice, onde iremos chegar imediatamente quando clicarmos nesse link específico. Então, digamos, por exemplo, se eu clicar neste link específico, ele me levará a uma página do site. O título da página será este. Exatamente este. Este é um título. E então, se você vir essa área específica, esta é uma descrição dessa página específica do site, não do site completo, dessa página em particular. Assim como a descrição da página. Nisso também você pode ver que essa área específica é negrito. Essa é a sala de aula KID. Perto da sala de aula infantil é ousada. A sala de aula quase infantil é ousada. Isso é negrito porque a sala de aula com chave é nossa consulta de pesquisa. Se pesquisarmos outra coisa e ainda assim chegar este site. E quando nossa consulta de pesquisa for diferente, esse tempo nos levará pois a seção em negrito será outra coisa. Digamos, por exemplo, se eu procurar por estúdio de bootstrap em sala de aula com chave. Agora você pode ver que é bom classroom.com, Detalhes do curso e curso em seguida, bootstrap studio, seja qual for o link. Mas você está, você descobrirá que não há nada arremessado por aqui. A razão por trás disso está na descrição dessa página de destino específica desse site, não há nenhum lugar escrito chamado como sala de aula ou estúdio de bootstrap com chave, algo assim. Mas no título você pode ver que é Bootstrap studio tutorial, virgem 6, aprender e o que quer que seja, seja o que for, o que quer que seja. Certo. Então, essas são as páginas. Este é o título. Esta é uma descrição que você vê, exceto isso há dois dias, seja lá o que for, a descrição começa a partir daqui. Este primeiro é o URL ou talvez o link dessa página específica, que podemos ver ano quando vamos para essa landing page específica. Vamos clicar neste link e vamos ver onde exatamente vamos. Então, o que vou fazer, eu vou, eu quero manter esta página aqui apenas para que eu possa vir aqui e ir para trás para mostrar como exatamente ela está lá. Vou apenas chegar a este link em particular. Vou clicar com o botão direito do mouse e clicarei em abrir em nova guia. Ele será aberto nesta nova guia. Eu irei aqui. Vamos ver. Está levando algum tempo pedindo peso Forky classroom.com para responder. Isso geralmente acontece quando estamos navegando em modo privado porque na maioria das vezes, mas isso significa a empresa. O que eles fazem é colocar o site no servidor protegido e esse servidor, quando recuperaram dados, parece que está no modo privado. Então eles veem como se houvesse alguma atividade suspeita acontecendo na urina? Eles são incompletamente assim. Vou apenas atualizar isso para que ele esteja vindo algo assim. Então, você também é, você pode ver que você é pk facebook.com, e pode haver algum vídeo relacionado ao Bootstrap studio, e isso está mostrando que o bootstrap Studio 5.2 também. E está levando a sala de aula infantil também. Aqui vamos nós, a página é carregada. Agora você pode ver esse título em particular, bootstrap studio bicaudal versão 6, aprender Bootstrap studio. Você pode ver o ano do título, mas depois de algum tempo há uma sala de aula ponto, ponto, ponto e traço q. Certo, então por que isso está acontecendo? O principal motivo é a pesquisa do Google ou a pesquisa do Bing, ou como os mecanismos de busca populares, o que eles fazem é permitir 60 caracteres, incluindo espaço para títulos. Você como indivíduo, podemos colocar um título longo também. Depende completamente de nós, mas este, será apenas 60 caracteres. Porque os usuários que estão assistindo essas consultas de pesquisa em particular e todo o Google não querem confundi-los jogando várias linhas em uma linha, eles tentaram fazê-lo. Uma etapa significa na web, site como desktops e laptops, em uma linha eles tentaram fazê-lo e sempre terão 60 caracteres. Então você pode ver que o título do curso está escrito. E como sabemos que este é o título dessa página em particular também, vou mostrar isso também. Esta é a descrição dessa página em particular que você pode ver como tutorial de estúdio Bootstrap para iniciantes, blah-blah-blah. Neste curso, dei um foco como blá, blá, blá. Agora vamos ver exatamente como encontraremos qual é o título, a descrição e o título da página e Sim, o título da página também está nesta guia específica. Você pode ver se você apenas pega o ponteiro do mouse para lá e apenas colocá-lo lá por um tempo. Haverá um menu suspenso ou talvez um pop-up chegando lá, que será exibido como Bootstrap studio tutorial versão 6, aprenderá Bootstrap Studio traço linha reta e sala de aula Kd. O título vem aqui também. Sempre que você estiver usando o navegador no desktop ou laptop, em qualquer lugar em tamanhos de tela maiores. É aqui que vem o título. Agora vamos ver no código como ele está chegando. Vamos apenas fazer um clique com o botão direito do mouse aqui e veremos Exibir fonte da página e o atalho do teclado é Control Plus você. Basta clicar neste. Lá vamos nós. Este é um código completo por trás do site. E vamos ver o que há lá. Existem alguns metadados lá. Eles têm o Google Analytics ou o Google Fonts, algo assim. E você pode ver o título aqui. Existe uma tag de título. E dentro dessa tag de título, o título do curso está escrito. E, em seguida, nossos metadados meta. Os metadados são como o primeiro é a palavra-chave. Então, sempre que alguém procurava lábios e modelo Bootstrap, bootstrap studio bootstrap alternativo Studio, GitHub Student bootstrap Studio, licença chave ou o que quer que seja. Essas são as palavras-chave, qual instrutor? Significa eu. Eu tenho acionado essas palavras-chave específicas para isso. E no caso de a empresa também poder adicionar poucas palavras-chave de seu site que elas encontram. É útil para que ele possa aparecer no resultado da pesquisa. Esta é uma descrição. descrição vem aqui Exatamente. Você pode ver que esta é a descrição que ninguém mostra a versão 5.9. Muito em breve vou mudar uma descrição também. Depois, há cartões do Twitter e tudo o que você pode ver o título do Twitter. Portanto, o título do Twitter é quando compartilhamos esse URL de página específico no Twitter. Twitter buscará o título e mostrará o título na postagem também. Mas o Twitter não buscará o título dessa área. Portanto, o Twitter buscará o tipo que o Twitter encontrará pela primeira vez, independentemente de ter o título do Twitter e a descrição do Twitter ou não. Se eles tiverem, então ele virá, ele vai buscar o título do seu, você não é esse título mais fácil. O Twitter será uma descrição federal de você. Um OG é como outras mídias sociais e, ao contrário do Facebook, então seja qual for o Facebook, instagram ou Quora, qualquer coisa, eles vão buscar o título da OG. É aqui que o título vai levar. É aqui que o título, este site preencherá o título. A imagem Og é qual imagem? Vai mostrar essa imagem como uma miniatura ou algo assim. Esta imagem pode ser tirada aqui. E então eles têm um conjunto específico ano de roteiro com queijo. Talvez eu pense que este é algum Gerenciador de tags do Google ou algo assim, que a partir daí eles poderão rastrear o comportamento do usuário e, consequentemente, eles vão melhorar o site e tudo. Ok, então esta é a única coisa que é muito importante para SEO a partir de agora neste curso em particular e nesta seção em particular, vamos ver pessoal, como exatamente vamos fazer em nosso estúdio de bootstrap. Então, coloque isso, eu vou fechar isso também. E vou fechar esse modo privado. Vamos ao nosso modo normal. Vá para o estúdio de bootstrap e vamos visualizar este site primeiro. Vou visualizar este site. Basta clicar em pré-visualização. E lá vamos nós. Temos isso, você pode ver este título é o resultado da tomada. E sim, o título está lá. E agora vamos ver nossa fonte. Em nossa fonte, você verá que meta-informações são apenas assim. Não há palavra-chave, há descrição, há descrição do Twitter, não há descrição do OG. Seu título não seria nada disso. A única coisa que temos é como título e que se trata apenas de resultados tecnológicos. Nada mais porque nomeamos o projeto como resultados técnicos, então ele vem apenas como resultado peck. Temos que pegar nosso título de tal forma que ele chegue pelo menos, digamos como a primeira página de resultados de pesquisa. Como exatamente vamos encontrar um título e uma descrição perfeitos e palavras-chave que veremos em nosso próximo vídeo. Vejo vocês no próximo vídeo, pessoal. 62. Configuração SEO no Bootstrap Studio: Certo, bem-vindo de volta. Neste vídeo. Neste vídeo, vamos ver exatamente como vamos encontrar o título. Este é o nosso site. E de acordo com o design e as informações que estão lá no site. Este site fornece serviços de design e desenvolvimento de sites. A primeira coisa que faremos novamente, existem alguns sites para encontrar as palavras-chave e tudo menos o que faremos, chegaremos diretamente ao Google primeiro ano, vamos digitar o design do site. Veja o que está chegando. Nenhuma empresa de design de sites em Bangladesh, agora eu em Bangladesh mostrando Bangladesh. Então, basta clicar nessa consulta de pesquisa. E a primeira coisa que acabamos de chegar é adicionar porque veja esse AD ADATs lá. Você pode saber disso. Mas ainda estou dizendo que AD é propaganda. E sempre que não há AD antes deste HTTPS, isso significa que é uma pesquisa direta. Então, na pesquisa como AD, vamos manter essa parte do anúncio e chegaremos a uma seção de pesquisa direta. E você é a primeira empresa de design de sites da escola dos sonhos da W3 em Bangladesh. Vou apenas clicar neste site específico e isso é apenas passar o mouse sobre o ponteiro ali e lá você pode ver o título está lá. Mas o título é muito grande. Se eu vier ver o código-fonte e então encontraremos o título. O título é muito grande. É como web, o nome da empresa, em seguida projetando a empresa de desenvolvimento de sites Bangalore em Bangalore empresa de desenvolvimento de sites em Bangalore novamente duas vezes eles escreveram empresa de desenvolvimento de sites em Bangladesh. Temos uma ideia de que, se alguém pesquisou essa consulta em particular, essa empresa de design de sites em Bangladesh, ou talvez uma empresa de design de sites perto de mim ou algo assim. Então, qual título podemos manter nosso site, onde ele pode aparecer no resultado da pesquisa. Então este é como uma loja virtual, serviços web, melhor empresa de desenvolvimento de sites na web em Bangalore. Certo. Então, este é o site. Não sei de quem é esse site. E sim, não há nada sobre as promoções ou não. Não estou promovendo nada. O que faremos agora vamos nomear nosso site cavando algum tipo de correspondência neste Títulos em particular. Vamos ao estúdio de bootstrap. O título principal, há duas coisas. Um é o título mestre e outro é o título baseado em página. Onde encontraremos o título mestre, clicaremos nas configurações aqui. Então você encontrará SEO. E isso é mau. Este é o título. Portanto, por padrão, resultado técnico é o nome do projeto. Então, é preciso que o que vamos digitar é desculpa, sites desenvolvimento de design empresa de desenvolvimento de design de sites em Bangladesh. Agora você pode ver que isso é o que vamos ver nos resultados da pesquisa também. Então, empresa de design e desenvolvimento de sites em Bangalore. E vamos dizer que se eu começar a digitar qualquer outra coisa, ela virá como ponto, ponto, ponto, porque está excedendo esse limite de caracteres. Então, ele está mostrando ponto, ponto, ponto. Estamos mostrando a empresa de design e desenvolvimento de sites em Bangladesh. Isso é o que nosso título será e vamos descrever uma visão geral da descrição. Começaremos com a resolução técnica, o nome da empresa forçou tecnologia RES ESOL com resolução técnica. Um dos resultados do deck ESOL e ONE, um. Tech resolve, uma das melhores empresas de desenvolvimento de design de sites design em Bengaluru. Caminho. Este edifício é um B em Bengaluru. Ômega maiúsculo. Certo. De qualquer forma, então resultado tecnológico, uma das melhores empresas de design e desenvolvimento de sites em Bangladesh. Projetamos D, E, G e projetamos sites e aplicativos móveis. Ok, isso é o que nossa descrição vai ser. Vamos adicionar este mapa do site também. Então, o sitemap não é nada além de gostar. É que haverá na página chamada dot XML, que terá todos os títulos do site e os nomes das páginas. E esse sitemap em particular será rastreado pelo bot do Google. E então eles verão como, ok, qual coisa temos que buscar neste site para que sempre que o usuário pesquisar para que possamos mostrar-lhes o mapa do site, basta ativar o sitemap. E isso é tudo. Isso é como nosso título mestre e descrição. Depois disso, temos nosso gráfico aberto, ou seja, OG, que eu disse que OG significa abrir o gráfico. Então, o que faremos para o Open Graph também o título mestre será o mesmo. Vou apenas copiá-lo e colarei aqui de qualquer maneira, está mostrando, mas não é exatamente o jogo você. É como você pode dizer, como um campo de entrada, algo assim. Ele vai colá-lo aqui. E vou te mostrar por que não é assim. Se você apenas digitar alguma coisa, ela vai ficar em branco. Estou copiando isso também, Controle C, e vou colá-lo aqui. A mesma coisa que irei. A mesma coisa que farei com o Twitter também. Cole-o aqui e o título, vou trazer a cópia do título. E eu vou colar o título aqui também. Agora este ponto de anúncios THE robot.txt. Faremos isso, mas não agora. Nesta seção, apenas faremos isso. Agora temos que fazer o mais importante é que temos que ver essa imagem OG e essa imagem do Twitter também. O que faremos é, em vez de adicionar as imagens ano, descer, rolar para baixo e iremos para este canto, veja este link. Há uma seção de SEO é tanto assim, mas temos que ir com os de tecido também. Então, eu vou clicar no tecido, e há alguns tamanhos que são mencionados e temos que adicionar os tamanhos de acordo. Com a frequência. Agora, o que faremos, vou apenas clicar em salvar. Este ícone em particular está lá. Temos o nosso, o que dizemos? Temos que preparar nossos ícones. Vamos ao site chamado Canva. Basta clicar em ir para Canva, canva.com. E vamos criar uma coisa. Vamos criar um design. E deve ser um design personalizado com um tamanho de cinco pixels por phi, 12 pixels. Ou seja, esse foi o máximo de um, y dois L por 512. Você é o que eu vou fazer. Vou apenas para o elemento e vou pegar um qualquer design. Design significa qualquer ícone como tecnologia, algo assim. Vamos ver qual será o viável. Gráficos para tecnologia. Acho que vamos pegar este assim. Talvez este seja o nosso logotipo, logotipo para ícones. Então, vou pegar este e vou baixar este arquivo PNG D2L. Vou baixar isso. Isso será como apenas sem título. Vamos abrir este, então vou levá-lo por enquanto e apenas renomeie isso como resultado técnico g, ou esse é o logotipo TR e vou levá-lo aqui. Dentro disso. Nós vamos, há logotipo PR está lá. Ele voltará às configurações mais uma vez. E agora vou falhar semana em diante. Phi two L é o tamanho da imagem. Então esse é o tamanho da imagem que vou pegar. O que você precisa fazer é ir ao Photoshop e digitar esse número de tamanho, 182, depois 13216, e então você pode redimensioná-lo ou então você pode onde ele foi. Então você pode clicar em redimensionar se você tiver uma versão premium disso. Há mais uma coisa. Existem alguns sites onde você pode fazer algum redimensionamento. Você pode fazer os insights a partir daí. Mas o que vou fazer, só vou tirar a mesma imagem por várias vezes. Isso também está tudo bem. Não temos nenhum problema nisso. Levará a mesma imagem para todos os tamanhos. Se eu clicar em Salvar e deixá-lo ir. Agora, voltaremos novamente às nossas configurações e depois chegaremos aos SEOs. E se eu chegar ao ano OG, temos que colocar o título. Mas se você vier ao Twitter ou algo assim, se tivermos dado os diferentes tamanhos de tela, ele pode ter o tamanho exato da tela. Você é. Você pode ver se alguém está compartilhando essa postagem específica usando o URL da página de índice, a postagem no Facebook ou qualquer outra coisa que ela se pareça com este exemplo.com. Ele virá como resultado tecnológico ou qualquer que seja qual for o nome do domínio. O título virá aqui, a descrição entrará e a imagem virá assim. E do tipo OG, mostrarei esse site. E no Twitter, vou ao Twitter e venho aqui e basta clicar em Salvar. Agora você pode ver quando alguém compartilhou essa página em particular no Twitter, não haverá nada porque mostramos que o tipo de corte do Twitter não será nenhum. Temos dois tipos diferentes, como resumo e alguém com imagem grande. Então, se eu clicar no resumo, ficará assim no Twitter. E se eu clicar em alguém com imagem grande, ficará assim, o que eu não nos vejo. Eles gostam porque a imagem é como cortar a imagem. Basta ir para o resumo. Tudo bem, não há problema. Tudo bem. Então, PWA, vou apenas ativar esta seção que é uma aplicação web progressiva. O que é exatamente o aplicativo web progressivo? Mais uma vez, chegarei a isso. Vamos dar o título. Então, basta colar esse nome curto, talvez apenas resolva, desculpe. Não precisamos dar esse título e tudo. O nome será diminuído ou solitário. **** resultados e encurtamento serão TR. E qual será o URL Eu mostrarei que o URL deve ser índice. Sempre que alguém iniciar este site, o URL deve ser a página de índice. Então, vamos apenas ativar essa máscara, ícone de máscara e a imagem de fundo. Vamos fazer as imagens de fundo amarelas, algo assim. Vamos tirar essa imagem de fundo, amarela, meio amarela. E a equipe E major tomará o mesmo, mas de um lado um pouco mais leve. Não é essa luz. Você pode ver a cor em tempo real aqui. O que vai vir. E basta selecionar Sim, tela cheia. Vou mantê-lo como tela cheia e orientação. Vou mantê-lo como uma paisagem anônima como retrato, ambas as orientações funcionarão. Agora, o que exatamente aconteceu aqui é quando iremos ao nosso navegador móvel ou algo assim. Então vamos fazer uma coisa. Vamos ver isso. Basta clicar em Salvar. Quando você vai para Pré-visualização. Venha para esta seção anterior, você vai ver esta. Esse é o número lá, 192 ponto 168 ponto um ponto oito dois pontos 8 mil. Você pode ter um número diferente. Isso é certo. Qualquer número diferente você terá que fazer uma coisa. Se você tem, como, obviamente, você terá wifi, o wifi conecte o sistema como laptop ou desktop e seu celular à mesma rede Wi-Fi. E abra o navegador. Então, vou apenas adicionar, estou adicionando minha tela do celular aqui. O que vou fazer, vou apenas, abrirei meu navegador aqui. Só um segundo. Vou abrir meu navegador e vou digitar esse número que é 192 ponto 168 ponto c. Há sete. E aqui está escrito como maior parte do tempo é muda semente agora esse número é salvo cento e oitenta e duzentos e sessenta oito pontos um ponto oito dois pontos 8 mil. Vou clicar em Enter. Lá vamos nós. Agora você pode ver o mesmo site em tempo real na tela móvel. Agora você pode ver essa área específica. Só estou apontando essa área em particular. Isso é amarelo. Certo. Vamos ao bootstrap Studio e vá para Configuração. E volte para o nosso PWA. Você está nessa cor. Vamos pegar qualquer cor diferente. Digamos que este. E eu só vou clicar em, OK. E clicarei em Salvar imediatamente. Você pode ver que há uma mudança de cor. Isso é o que acontece quando estamos usando no PWA como estou usando o iPhone. Portanto, há uma limitação que o iOS e não está me permitindo. Mas se você for ao seu dispositivo Android apenas um segundo. Agora, a cor está de volta ao original. Se você for para seus dispositivos Android e clicar em qualquer lugar onde você tiver essa opção. E, na verdade, não tenho dispositivos Android comigo agora. Ou então eu teria te mostrado. Se você for ao navegador e selecionar os três pontos, algo assim ali. E nisso você pode selecionar o que é o atalho ou algo assim. Isso significa que ele criará o iniciador, ícone do Launcher na sua tela inicial. Se você clicar no ícone do iniciador, o aplicativo será aberto como aplicativo Android. Não haverá que não haja uma barra de URL ou algo assim. Será como um aplicativo Android puro. Então é assim que vamos usar esse PWA. Portanto, o PWA, aplicativo web progressivo no iOS não é compatível. Mas sim, no Android, no Android e no iOS, o Android funciona dessa forma. Então o PWA é, é assim que vamos usar o PWM. É assim que isso vai acontecer. E nós fizemos com nosso SEO de página-mestre, páginas-mestre como esta. Seo vai se candidatar a todas as páginas. Agora vou mostrar a você como exatamente o fim de semana dá um título diferente e uma descrição diferente, e OG e Twitter e todas essas coisas. Descrição do título para páginas individuais que faremos em nosso próximo vídeo. 63. SEO na página: Certo, bem-vindos de volta pessoal. Neste vídeo, vamos ver exatamente como vamos dar título e descrição individuais a páginas individuais. Índice é o que fizemos agora. E entraremos em manter esse título e descrição específicos para a página de índice porque esta é a página de lançamento de um site sempre que alguém clica no URL, vamos para o nosso HTML de ponto de contato. Portanto, esta é a nossa página de contato. Selecione a página de contato. Eu clique com o botão direito, venho para propriedades. E agora temos essas configurações de SEO sobre sua primeira para esta página específica. Agora aqui está escrito como uma empresa de design e desenvolvimento de sites em Bangalore. Mas agora o que vamos digitar é como entrar em contato com o resultado técnico e resolver seu problema. Algo assim. Entre em contato com o resultado técnico e resolva seu problema. descrição entrará em contato conosco e obterá sua solução do resultado. Esta será a descrição e a mesma coisa. Obviamente, vou fazer isso pelo OG. Og está tomando esse título específico do mestre. Substitua isso por este. E para o Twitter também, substituirei o título e a descrição. Vou levá-lo daqui. Vou apenas copiar essa descrição. Esta descrição aqui. Também pagarei como a descrição aqui. E vamos adicionar essas imagens. Será como este ano, será como herança. Isso significa que está vindo do mestre. Um ano vou adicionar a imagem mais uma vez. Novamente, herdado vindo do mestre. E é isso. Haverá ir. Isso está feito. Isso é o que a página individual SEO é. Basta clicar em salvar. É isso. O que acontecerá? Voltando aqui? Veja a partir de agora, você pode ver agora o ícone, esse ícone em particular está aqui, não o título é alterado. Se você compartilha como quando hospedamos este site, vamos atacar result.com é o nome do site. Portanto, o URL será algo como esta página de contato de barra www dot tech result.com porque ele estará em contato com o índice de páginas de destino padrão. Então, ele será contatado se você copiar este link e se você compartilhar isso no WhatsApp ou em qualquer lugar, aquela imagem que adicionamos lá, essa imagem estará chegando lá e ela a mostrará. Portanto, ele dará mais um forte apelo ao usuário deve afirmar que sim, este site foi projetado de forma muito profissional. Da mesma forma que você pode fazer com a solução de negócios, e da mesma forma como após o envio do formulário também , você pode parecer que pode fazê-lo para o OC também. Esses são nossos clientes satisfeitos. Ok, então é assim que faremos os SKUs individuais de pH. Isso é o que essa seção em particular chamou de SEO. Vamos ver mais uma vez. Perdemos alguma coisa ou não? Em SEO, gostaríamos de ver o SEO principal e depois o sitemap também. E isso adiciona ponto TXT é que vamos usá-lo quando os anúncios virem que você só precisa pagar como essa coisa em particular. Sim, robot.txt. Robots.txt é como pendente e que veremos no próximo vídeo. Acho que podemos terminar esta seção de SEO em particular aqui porque vimos o console do bebê. Então o PW também metatag é como sim, podemos ver o título do Meta. meta tag é sempre que colocamos esse particular, como SUVs e todas essas coisas, você pode ver os metadados chegando aqui. Um metatag que você pode adicionar aqui é apenas clicar em Adicionar metatag. Isso se chama Meta tag, e a tag será palavra-chave. Palavra-chave e o conteúdo que você pode dar a palavra-chave. Por exemplo, site. Projetando. O design de sites que inclui espaço é uma palavra-chave. Quando você quer separar a palavra-chave, o que você precisa fazer é colocar uma vírgula. Vírgula significa que essas são duas palavras-chave diferentes. Portanto, o design de sites é uma palavra-chave e o desenvolvimento de sites é uma palavra-chave. Então, é assim que você usará a palavra-chave para palavras-chave diferentes. Uma palavra-chave pode ser várias palavras. E se você quiser diferenciar o teclado diferente, você tem que usar a vírgula ali. Em seguida, o conteúdo da cabeça que já vimos esse conteúdo principal. E vamos ver o que isso é chamado de robot.txt. Vamos ver o que é robots.txt Em nosso próximo vídeo. Vamos ver o que é esse robot.txt em nosso próximo vídeo. 64. Robôs txt: Antes de entender e antes adicionar o conteúdo em robot.txt, direi o que exatamente é robots.txt. C, mecanismos de busca como Google, Yahoo, Bing, DuckDuckGo ou qualquer coisa, qualquer mecanismo de busca. Há um tempo. Em um tempo frequente. Eles visitam nosso site. Isso significa que gostaríamos que qualquer usuário não precisasse clicar no URL do site específico ou algo parecido. Eles vêm automaticamente. Há um robô inferior ou comprei o que for. Há um bot que vem ao nosso site. E a busca das informações de um site, ou seja, tags H1, tag H2 e algo assim. Eles buscarão as informações de um site e as armazenarão em seu banco de dados. Mas sempre que os bots chegam ao site, há certos casos. Eles são v como proprietário de um site, nós não queremos que isso comprado. Deve digitalizar algumas páginas em nosso site. Digamos, por exemplo, em nosso site há uma página chamada após um ponto de envio de formulário HTML. Não queremos que isso seja comprado. Deve digitalizar este site porque este site não tem informações. É como se tivéssemos algo em que podemos ver essa página em particular quando ela é acionada, significa que alguém preencheu o formulário depois disso apenas a velocidade virá. Não queremos que esta página deva indexar nos resultados da pesquisa do Google ou qualquer mecanismo de busca nos resultados de pesquisa, esse índice de paciente. Qual página queremos indexar essa página, vamos adicioná-la no Google comprado e qual página não queremos que não permitiremos. Adicionaremos esse URL da página na seção não permitir que veremos exatamente como vamos adicioná-lo. Veja, iremos para Configurações. E então nós SEO, temos esta seção chamada robots.txt. Existem vários bots. Para este exemplo em particular, direi como exatamente vamos fazer pelo Googlebots. Vamos amarrar primeiro usuário, USAR nosso painel de usuário, agente AGE e te agente, dois pontos de espaço e Google comprou GO, GLM, Google BOT board. Entre. Então, vamos digitar não permitir. Então, d deve ser capital. Este O IS ALL OWN não permite espaço de dois pontos. E então vamos digitar o nome da página aqui. Ou seja, qual é o nome da página? Então, vamos salvá-lo aqui. Eu virei aqui, clique com o botão direito do mouse ou apenas clique em Renomear, e vou controlar uma cópia desta página nome. Então voltarei para o nosso robots.txt. Espaço. Uma barra estará lá porque antes disso nosso nome de domínio estará lá, certo? E então eu vou clicar em colar para isso, não clicar nisso. Vou colar isso e colocar mais uma barra. Assim que isso for feito. Em seguida, o agente do usuário, Googlebot, sempre que o Google Board vier e o site do scanner, Google comprou sabe que não quero digitalizar isso com esse pH específico porque não quero indexar. Agora, o que queremos indexar. Vamos falar novamente. Este, estúdio do Googlebot, Googlebot. E vou digitar permitir. Permitir. Basta colocar essa barra. Significa que o Googlebot sabe que ele não quer que ele ou ela, seja quem for. Googlebot saberá que esta página está definida para ser. Não escaneie esta página, mas qual página digitalizar em liga é apenas chicote, significa, exceto esta página. Digitalize todas as páginas. Isso é o que vai ser. E isso é para o Google board, certo? Mas e se o Microsoft Bot vier? Ele vai ver, ok, esta condição é para o Google, mas não para mim. Vou escanear todas as páginas novamente, se alguém estiver procurando por pesquisa, coisa específica na entrada do mecanismo de pesquisa da Microsoft é o mecanismo de pesquisa do Bing. Esta regra não funcionará por lá. Sabemos quantos virginianos existem no mercado e quais são quais mecanismos de busca os usuários estão usando? Não. Temos uma coisa para isso. Em vez disso, o Google comprou. Vamos colocar a marca de estrela aqui e começar o Mar significa para todos os barcos, não é especificamente para essa caixa em particular, então vou colocar mais 11 marcas de estrelas. A estrela é como para todos os barcos. E mais uma coisa está lá, que podemos mostrar a ele, que é sitemap. Vimos o mapa do site aqui, bem na média. Ativamos as opções deste mapa do site, então voltaremos para o robots.txt. Alguns espaços extras ao pressionar Enter. E vou digitar sitemap aqui. Portanto, é como se o sitemap do SID MAP colocasse dois pontos, e agora vamos colocar o URL do site primeiro. Então, digamos que este site seja https dois pontos barra barra www dot tech result.com. Basta assumir a partir de agora, porque não temos nenhum domínio, basta assumir que este é o URL do site www.Microsoft.com. E antes disso, também adicionamos HTTPS a ele. Ou então podemos simplesmente digitar http. Basta digitar http porque S significa seguro. Então, digamos, como se é seguro ou não, este é o mapa do site. Não espaço. Depois disso, basta colocar uma barra. Lembre-se de que seu nome de domínio não haverá resultado técnico de resultado peck apenas para referência. Se o seu nome de domínio for apenas por exemplo, o que podemos, pode ser como, digamos abc.com. Em vez de resultado técnico, você digitará ABC.com.in.me, seja lá o que for. Seu nome de domínio barra e, em seguida, digite sitemap como sitemap ITE MAP, todos pequenos caracteres, não um único. Pode ser maiúscula ou ouvido, sitemap dot xml. Isso é tudo. Você chamou seu sitemap aqui. E você está dizendo, não escaneie esta página em particular porque eu não quero escanear esta página específica e aceitar essa página. Você pode digitalizar tudo no meu site para que ele possa vir no resultado da pesquisa. Não é tão rápido. Ok, digamos que se você adicionou o robot dot robots.txt Em seu site e imediatamente dia seguinte ele virá. Não é assim. Sempre que o Google Board vier e rastrear seu site, somente ele será buscado, os dados, somente os dados serão buscados e, em seguida, o site será listado em seu o que fazer você diz? Resultados dos motores de busca. Ok, então isso é uma coisa, e é assim que funciona. Vamos clicar em Salvar aqui. Isso é tudo o que seu robots.txt está feito. Mais alguma coisa? Não existe, nada resta. É assim que vamos fazer nosso SEO robot.txt. Se você me perguntou o que há de Ads dot TXT, sempre que quiser iniciar anúncios em seu site, você pode acessar o Google AdSense e criar uma conta nesse momento. O Google lhe dará um arquivo chamado Ads dot TXT. Dentro disso, bem, haverá um número, basta copiar e colar aqui e clicar em Salvar. Isso é tudo o que está feito. Então é assim que vamos fazer. assim que fizemos nossos SEOs em nosso site. E fizemos essa solução de negócios de página específica, podemos fazê-lo a qualquer momento. Com a frequência. Só estou mantendo-o em branco. Então, quando vamos hospedar o site, posso mostrar mais algumas coisas nisso, mais coisas são significadas como se não fizermos nada em SEOs como ACOs de página privada, se não fizermos lá e o que existe? Se fizermos algumas mudanças nessa seção de SEO de página privada dedicada específica e como ela vai aparecer ou como ela entrará nessa coisa em particular. Essa coisa é feita e SEOs como otimização de mecanismos de pesquisa são feitos em vídeos posteriores, como quando hospedaremos o site, quando veremos os gerenciadores de tags do Google Analytics e todas essas coisas, então veremos exatamente como vamos fazer com o resto das coisas. Isso é tudo para esta seção em particular, SEO está feito e se algo vier em minha mente no futuro, como sempre, adicionarei o novo vídeo nesta seção específica. Então, obrigado pessoal. Obrigado por assistir a este vídeo e esta seção. E vejo você na próxima seção. 65. Como comprar nome de domínio e hospedagem: Olá e bem-vindos de volta pessoal. Nesta seção específica. Nesta seção, vamos comprar um host dominante, um site e fazer muito mais animadas nessa coisa em particular. Este é um conhecimento prático completo onde você pode obter um dominante para o seu cliente também e para o seu próprio. E você pode hospedar seu site em seu servidor real. E se eu não estiver errado, já lhe disse nas palestras anteriores onde mostrarei como anexar ou como adicionar um vídeo real diretamente como vídeo HTML ao estúdio Bootstrap. Vimos como vídeos do YouTube e do Vimeo vinculando a ele, mas não vimos o vídeo HTML vinculando a ele porque não estávamos tendo o servidor naquele momento. Mas sim, nesta seção ou na próxima seção, faremos isso. O que faremos, compraremos um domínio que você está hospedando. Não vou comprar porque já tenho uma hospedagem, mas sim, vou mostrar como exatamente você vai comprar a hospedagem também. Então, duas coisas estão lá. Um é dominante e outro está hospedando. Vamos ver. Primeiro, o que é hospedagem? Hospedagem não é nada além de você ter um espaço como um espaço no disco rígido no servidor. E seu site será despejado para que os dados do site serão despejados nesse servidor. E nesse servidor, você receberá uma pasta nesse disco rígido específico. E essa pasta será mapeada para seu nome de domínio. E sempre que alguém pesquisar pelo seu nome de domínio, quaisquer dados que estejam lá nessa pasta, são os arquivos do nosso site que serão buscados e o usuário verá o site. Isso é hospedagem. Então, estou usando hospedagem porque é muito barato e todos os servidores que eles fornecem são muito rápidos. Eu realmente gostei disso. Já tenho um par de sites hospedados em hospedagem própria e meus clientes também. Isso é hospedagem e vamos ver, coisa de hospedagem. Se você for para hospedagem aqui, existem dois tipos de hospedagem, na verdade 34 tipos de hospedagem, você pode ver que isso é apenas nossa hospedagem, mas vou mostrar os dois mais importantes hospedagem que você precisará no nível inicial. Isso está hospedando sua hospedagem na web, e esta é uma hospedagem na nuvem. Hospedagem na Web é para pequenas e médias empresas onde os visitantes não são mais mensalmente, selecione dez mil, duzentos e vinte e cinco, trinta mil como esse , mensalmente, visitante, a base de nuvem é como mais visitantes com mais processos de computação e muitas coisas, como projetos em grande escala. Vou mostrar o que é hospedagem na web. Então, abriremos isso em uma nova guia e iremos. E uma vez que eu role para baixo, você pode ver que há três plantas ao longo do ano, 691492179 rúpias por mês plano. Mas esse preço só é aplicável se você estiver tomando esse plano por pelo menos 48 meses. Se você estiver diminuindo o número de meses ou o número de anos, o preço aumenta. E vou mostrar que, como veremos no plano 69 rúpias, há um site com 30 GB de armazenamento e 10 mil visitantes por mês. Neste plano, você pode ver o aumento do site. Você pode hospedar até 100 sites se tiver vários sites e não quiser gastar repetidas vezes nesses servidores e hospedagem. Assim, você pode pegar este plano de hospedagem onde você pode hospedar um site 100. Eu tomei esta planta apenas que é premium, onde ostentando um plano site para hospedar meus vários sites. Para vários sites, você pode hospedar vários sites para, mas você precisa comprar domínio o tempo todo quando estiver vindo com um novo site, você receberá 100 GB de armazenamento SSD em 25 mil visitantes mensais. E esses 25 mil visitantes mensais, E é para todos os sites que você hospedou nesta planta em particular. Não é para um site, é tudo para todos os sites. E-mails gratuitos. Você também pode criar e-mails gratuitos. Mas sim, neste curso específico e nesta série específica, veremos como anexar ou como mapear ou como apontar nosso domínio para os e-mails oficiais do zoológico. E também lhe darei qual é a vantagem e desvantagens de apontá-lo para Zoho, depois SSL e todas as coisas que teremos como largura de banda ilimitada, a nula. Agora, se formos para hospedagem na nuvem, vou criar clique em nova guia. Agora, se você for para a hospedagem na nuvem, então o que há é o plano inicial é de 700 mil rúpias por mês. Você pode ver que o plano superior é 79 rúpias por mês. Aqui são 700 mil por mês, mas a inicialização está chegando com 200 GB de armazenamento SSD, três GB de RAM para ver dois núcleos da CPU. Em seguida, e-mails gratuitos e SSL são as integrações da Cloudflare lá, e então todas as outras coisas também estão lá. Este plano você pode usar quando o site é praticamente grande e você pode, se você achar que o site tem mais código de tráfego, ok, então este é o plano. Então, o que faremos, basta clicar em Adicionar ao carrinho a partir de agora. Mas quando estamos indo para um checkout desse tipo, eu o removerei porque só queria mostrar exatamente como vamos comprar a hospedagem. Isso está neste plano? Digamos que este seja um único plano de site. Você pode clicar em Adicionar ao carrinho aqui, e ele o redirecionará para a seção do carrinho. Agora, antes de entrar na seção do cartão, ele dirá qual plano você tem que comprar verá como 1600 rúpias por mês é 448 meses. E se você for com um plano de um mês ou como um plano de 12 meses, isso é o que você vai pagar se eu clicar em aquecer planeta é assim 349. E se você for com 12 meses planeta é assim muito 1668. Após os impostos, chegará a esse valor que é 1.2400968 rúpias. Ok, então é aqui que o plano de hospedagem está lá. E assim que isso for feito, então vamos buscar uma coisa real que é o nosso domínio. Vamos para o dominante. E eu vou clicar neste nome de domínio aqui. E eu vou clicar neste verificador de domínio. E eu vou clicar no verificador de domínio. Aqui você descobrirá que existem várias extensões e todas estão lá. Então dotnet.n.com online e tudo o que faremos neste vídeo em particular, pois estamos comprando o domínio apenas para mostrar um propósito de demonstração ou um propósito tutorial. Vou comprar um domínio que é muito barato, que são 75 rúpias e algo assim. Como comprar um domínio primeiro, haverá um nome em sua mente, como eu quero esse nome específico do meu site. Então esse nome você tem que pesquisar aqui. Então, estou digitando meu nome aqui que é atual, chave ESTÁ EM corrente e vou clicar na pesquisa. Depois que uma pesquisa for concluída, você pode ver que o ponto atual é obtido. E isso está me pedindo para verificar isso porque já pesquisei muitas vezes. O que é isso? Por favor, use o barco de e-mail. Certo. Este é um barco. Este é um barco. E o segundo, este é um quadro. Esta placa, isso é o que, isso é o que é madeira e verifica. Este domínio já está tomado. Está me mostrando. Então, em vez disso, vou rolar para baixo e verei qual domínio pode ser tomado. Nó online atual do traço. Iremos com este. Vamos ver que ele está disponível ou não o site de pontos atual global. E vou apenas clicar em Adicionar ao carrinho que é o site global de pontos atual. E está verificando a disponibilidade e sim, verificamos isso e isso está disponível. Então, o que vamos fazer agora, vamos apenas clicar em, Continuar cortando. Uma vez que eu clico em Continuar, continuar com o carrinho, ele está me mostrando esse valor e por que isso está mostrando esse valor maior agora, porque eu selecionei dois anos aqui, eu tenho que ir com o primeiro . Vou apenas clicar nisso. Há 75 rúpias por ano. Agora está me dizendo 104 rúpias, 0,31 Pesaro, como na moeda indiana é chamado assim apenas como 104,31. Ok, então o próximo passo é que está me mostrando também que está me pedindo para tomar os planos de hospedagem. Então você também é, você pode selecionar o plano que é o plano de 68 rúpias, 69 rúpias por 12 meses ou um mês, seja lá o que for. E veja aqui é mais uma coisa como ocultar informações pessoais do meu domínio em repetições, fazer 99 por ano. O que significa é que se você apenas verificar isso, outras rúpias de 29 a 1900 serão adicionadas. Isso ocultará suas informações pessoais ou o que acontecerá quando você fizer o checkout e quando você comprar isso? Quem morde esse dominante é o seu nome para e-mail ou número de telefone em algum momento também, ele está disponível publicamente. E as empresas que prestam serviços podem começar a ligar para você não foram dois dias. Se você não quiser pagar isso para 99, então você pode simplesmente ir com isso e sentir a dor por dois ou dois a três dias. Depois disso, eles vão parar de ligar para você. Não é grande coisa. Basta clicar em Checkout ao longo do ano. No checkout, ele está me pedindo para fazer login e, em seguida, farei login com minha conta do Google. Esta opção de pagamento que tenho na minha frente, selecionarei uma opção UPI. No meu país. A opção UPA está lá em seu país, PayPal ou talvez qualquer coisa seja popular para que você possa usar seu método de pagamento confiável ao longo do ano, ele está me mostrando que 104 rúpias estão lá. Então continue com o UPI, meu site, o pagamento está feito e agora você pode ver que seu pagamento foi bem-sucedido. Por favor, não faça nada. Você está redirecionando. Estamos redirecionando para algum lugar e para onde somos levados. Agora ele está finalizado seu domínio e isso é, isso é o que você também receberá. Este é o nobre que tomamos que é o site global atual de pontos. E vou ver em qual país você está na Índia. Então, ele vai apenas digitar a Índia aqui porque eu selecionei Índia aqui e selecionarei esse pessoal apenas e ele só clicará em Próxima configuração. Isso está pedindo alguns dos detalhes aqui. Então, vou inserir alguns detalhes, como estado e outras coisas, código PIN, vou inserir um número de telefone que vou inserir. E vou clicar em Concluir registro. O endereço não deve ser muito longo. Não são permitidas vírgulas aqui onde você está quase pronto e clique em Continuar. Haverá um e-mail. Então eu só tenho que verificar meu e-mail, então vou para o meu endereço de e-mail agora, ou seja, o Gmail. Se você não recebeu nenhum e-mail para a verificação, basta clicar no e-mail de verificação de e-mail de verificação recente e esse e-mail estará lá em sua caixa de entrada. Este é o link de verificação de e-mail e tenho que clicar neste link. E quando eu clicar neste link, ele me levará para a hospedagem ou página mais uma vez. E desta vez, ele deve ver como, sim, o e-mail foi muito bem sucedido no momento q. e podemos fechar isso. Podemos voltar a esta página e clicar em Atualizar aqui. Talvez você possa pressionar F5 para atualizar a página. Isso é tudo. O domínio foi verificado com sucesso e nosso domínio é o site global atual de pontos. Neste vídeo em particular, compramos o domínio com sucesso. E no próximo vídeo, veremos como vincular nosso dominante à nossa conta de hospedagem. Então vejo vocês no próximo vídeo, pessoal. 66. Aponte Domínio para Servidor de Hospedagem: Bem-vindo de volta pessoal. Neste vídeo, e neste vídeo, veremos como vamos apontar nosso nome de domínio para o servidor de hospedagem. O que faremos aqui é que clicaremos na hospedagem ou seu Eu já tenho poucas contas hospedadas. Estou deixando isso embaçado. Apenas para alguns, você pode ver que há motivos de segurança. Esta é minha hospedagem de servidor premium. E você encontrará um botão como esse chamado Adicionar site. Então, basta clicar no botão do site do anúncio ali. E então você tem que digitar o nome. Então, vamos ver qual é o nome do domínio. É como corrente global ou algo assim. Se eu não estiver errado. E vejo que é assim que isso acontece quando você toma um domínio e você apenas toma qualquer domínio. Portanto, esse é o domínio. Só estou colando esse nome de domínio aqui. Vou apenas copiar esse nome. Colarei o nome aqui e colocarei uma senha. Então, vamos colocar a senha mágica lá. Qualquer coisa. Estou apenas desfocando isso também e vou clicar em Adicionar site. Ao clicar em Adicionar ano do site, você descobrirá que meu site está listado agora, vou apenas pegar todos os sites, então estamos aqui e este é o meu site. Você está, meu site está lá. E então eu vou clicar em Gerenciar site. Assim que eu clico em Gerenciar site, o painel é aberto, então esse é o nome do meu site e isso é tudo o que precisamos. Agora, vamos ver se vamos para esse URL chamado Global current dot site. E vou usar esse URL aqui. Clicaremos em Enter. Está dizendo que não está protegido e está mostrando isso que sua conta foi criada. Este é o domínio e é isso que é. Agora, o que temos que fazer é agora conectamos nosso dominante ao servidor. Agora eles estão apontando. Agora vamos fazer o upload dos arquivos no servidor. Depois disso, faremos a vida do nosso site e isso veremos no próximo vídeo. Vejo vocês no próximo vídeo, pessoal. 67. Como hospedar o site: Antes de avançar, antes de enviarmos nosso site para o servidor, o que temos que fazer é exportar nosso site. Este é o nosso site chamado Tech result. E agora vamos exportar este site. Então, como vamos exportar isso? Abriremos o site tech Resolve em nosso estúdio de bootstrap e, em seguida, iremos exportar. E antes disso, apenas clicaremos nesta seta aqui. Vou clicar nas configurações de exportação. Essas são as configurações de exportação e também temos que fazer algumas alterações aqui. Antes disso, temos que dizer exatamente onde queremos exportar esse arquivo. Então, vou clicar em Procurar. E vamos apenas para este BSS. Vou resolver e criarei mais uma pasta aqui, e vou nomear essa pasta como 6.5. Em exportação de rolagem. Saberemos que neste arquivo específico, todos os nossos arquivos são exportados nesta pasta específica na verdade. Então, basta selecionar essa pasta. Isso significa que eu apenas clicarei nesta pasta e clicarei em Selecionar pasta. E aqui o caminho está lá. E agora temos que fazer pequenas mudanças aqui, pequenas mudanças aqui é a primeira coisa é como pular imagens não utilizadas. Temos que clicar neste link, ativar essa opção. O que significa que ele era como se talvez tivéssemos importado muitas imagens. Digamos, vamos dar uma contagem. Digamos que, por exemplo, nós importamos 20 imagens em nosso projeto neste resultado do deck. E dos 20 usamos apenas dez. Durante a exportação. Basta exportar apenas as imagens que são usadas neste projeto. As imagens que não são usadas, mas apenas importadas no projeto. Não queremos que as imagens sejam exportadas. De 20, apenas dez imagens vamos exportá-lo, que é usado neste projeto e dez que não são usadas. Ele vai ignorá-lo. Por causa disso, o tamanho do nosso site e tamanho, nosso tamanho dessa pasta de imagens em particular diminuirá quando não estivermos exportando as imagens não utilizadas. Ok, e exportar etiquetas, também ativaremos essa opção. rótulos são como quando estamos usando os rótulos, mostrarei exatamente o que são os rótulos para que os rótulos sejam exportados e o URL estará aqui. Então, vamos ver. Este é o URL e está dizendo que HTTPS está faltando na barra de dois pontos HTTP. Este é o URL do site. Estou colocando esse URL aqui. Em seguida, vou clicar em Salvar. O que é rotulado é como se você pode ver como um modelo de hashtag dash one e, em seguida, rodapé escuro. Esses são os rótulos que estamos fazendo explorando os rótulos também. Então, antes de exportar, salvaremos esse projeto mais uma vez. O projeto está sendo salvo e , em seguida, clicarei neste botão Exportar. Aqui você verá como exportar dados e o design do seu site foi exportado e ele clicará nisso. E agora você pode ver que a exportação é o sitemap deles. Ativamos o mapa do site, site e o esquema ao longo de um ano. Este ponto manifesto JSON está lá do que em nossa pasta de ativos. Podemos ver o bootstrap significa que o CSS está lá, então as pastas CSS estão lá. Este é o nosso número e todas as suas coisas e formulários, quais formulários que usamos nos fóruns são exportados aqui. As imagens que usamos na estrutura de pastas. Todas as imagens estão aqui e os JavaScripts estão aqui. E lá fora, podemos ver este index.html. Esta é a página principal, esta é a principal página de disparo de aterrissagem. E então veremos que todas essas outras páginas também estão lá. Agora vamos ao nosso servidor e vamos importar tudo isso de uma só vez. Só estou tirando esta janela da tela. E vamos. Vamos, vamos à nossa área de hospedagem e vamos rolar para baixo. E há duas opções, como em arquivos. Um é o Gerenciador de Arquivos Beta e outro é o Gerenciador de Arquivos. Portanto, esta não é a versão Beta, talvez uma. Você está vendo que talvez haja Beta não existe hoje em dia no nível de produção. Então, vou clicar neste gerenciador de arquivos Beta e mais uma janela será aberta aqui. E esta é a pasta principal que é HTML de sublinhado público. Quaisquer que sejam os arquivos que tenhamos, vamos carregar esses arquivos somente dentro desta pasta. Vou clicar duas vezes nesta pasta. E então, por padrão, quando você está fazendo isso pela primeira vez, temos essa pasta PHP de ponto padrão. Isto é o que, isso é o que escolhemos C aqui que é a página padrão ou padrão que você vê como PHP de ponto padrão que funciona. Ok, então o que faremos, basta clicar em Upload aqui. Vou clicar na pasta. Uma vez que eu clicar na pasta, verei que esta pasta está lá, que é um resultado técnico exportar um e eu voltarei um passo e selecionarei esta pasta, pasta inteira e clique em Upload. Eu não só clico em Upload aqui também. Então essa pasta agora é carregada. O que quer que esteja lá dentro desta pasta, eu tenho que mover tudo e soltá-lo dentro dessa pasta HTML de sublinhado público. Então, vamos clicar duas vezes nele. Ele selecionará tudo por Controle a. E eu vou clicar em Mover aqui, este botão mover arquivo está lá, mover o arquivo. Há dois pontos. Você também receberá esses dois pontos. Vou apenas clicar duas vezes nesses dois pontos e me mover. Isso é todos os nossos arquivos estão completamente fora dessa pasta de exportação agora e não precisamos deste, então vamos excluir este ano, vamos agora nosso site está hospedado e se você vier aqui e apenas atualizar isso, lá vamos nós, nosso site está hospedado. Agora. Qualquer pessoa chega a esse URL específico que é o site de pontos atual global. Este site estará lá. Este domínio é por apenas um ano. Este domínio expirará em 19 de abril de 2023. Se você estiver assistindo a este vídeo depois disso, talvez você não tenha acesso a este site porque eu tomei esse domínio apenas por um ano. É assim que funciona. Então, não temos isso garantido, temos que consertar isso também, mas vamos consertar isso. Não protegido, protegido nos vídeos posteriores. Neste vídeo pessoal, vimos como exportar e como hospedar nosso site em um servidor real. E isso resolveu caras, isso é tudo para este vídeo e isso é tudo para esta seção. Hospedamos nosso site com sucesso no servidor real. Dessa forma, você pode hospedar n número de sites comprando um dominante. E se você quiser mudar tudo, então o que você pode fazer é selecionar tudo, excluir e refazer o upload de todos os arquivos novamente. É assim que vamos hospedar nosso site e fizemos isso. Então isso é tudo para esta seção. E nos vemos na próxima seção, pessoal. Também estou muito animado e feliz por termos hospedado com sucesso nosso primeiro site no servidor real. Pessoal, isso é tudo para este vídeo e nos vemos na próxima seção. 68. Introdução ao Zoho Email: Bem-vindo de volta pessoal. Nesta nova seção, onde vamos ver sobre XO quem enviar e-mail? Xo quem email é um provedor de serviços de e-mail profissional que não apenas fornece serviços de e-mails, mas além disso, existem tantos outros produtos e serviços que é Xu que oferece, vamos ver muito rapidamente o que todos os serviços x2 oferecem em finanças. Eles oferecem livros como livros ou livros CRM Zoho onde podemos manter todas as faixas contábeis e pessoas X2 para RH, negócios, e-mails como homens e, em seguida, sistema de gerenciamento de projetos para projetos. Em seguida, a reunião assistente CLI IQ está dentro do sistema de bate-papo da organização. Isso é como novamente, é gratuito, depois CRM, depois finanças, então veja, você pode ver como vendas e marketing e depois serviço do que e-mails. E eles têm como direitinhos. A planilha é como o slide do Excel é como um PowerPoint , então o Docs é como Dr. CLA, IQ voz. Veja todos os recursos, todos os serviços que existem nesta plataforma específica. Poucos deles são gratuitos e poucos deles são pagos. Não visualize. Significa que, como poucos deles, eles são livres. E muito parecido com tudo é pago. Mas nisso também você encontrará aqui e há alguns serviços gratuitos, oferta gratuita para um determinado número de usuários. Por exemplo, essas faturas são totalmente gratuitas. E se formos com e-mails como até cinco usuários, ele é totalmente gratuito. Agora, veremos como vamos apontar nosso nome de domínio para o email xo email. Por que queremos usar o e-mail. Temos hospedando seu e-mail se você estiver recebendo se tirou seu domínio da GoDaddy, também temos e-mails da GoDaddy. Então, a razão por trás disso é que eu pessoalmente usando Zu que enviou um e-mail por mais tempo agora, mas antes disso eu estava usando a GoDaddy e hospedagem ou e-mail. O principal problema aqui é GoDaddy e hospedando ela e todos os outros provedores de serviços, como todos os outros provedores de serviços, eles fornecem painel de e-mail, mas eles não têm um celular aplicativo. E há o armazenamento e todas as coisas estão incluídas nos servidores, no host, coisas que tomamos em x2. O que acontece aqui é que é a forma profissional de enviar e-mails. É tão bom quanto profissionalmente, e-mail muito bem construído, sistema de e-mail. E você também receberá o aplicativo Android e iOS, o aplicativo do Windows e todas as outras coisas estão lá, o suporte da web está lá. E você pode ver a interface desse Zu em particular quem, quem envia. Onde você pode ver que é principalmente o calendário deles é que você pode fazer suas reservas sobre isso, os lembretes de reservas, depois você tem anotações ao longo de um ano. Então você também pode ter uma opção de tarefa, em seguida contatos e marcadores e todas as coisas, que você precisar, facilidade disponível no e-mail do zoológico. Então, se você vê na seção de preços, então levantes, sim, definitivamente há revoltas lá. Mas se sua organização não é tão grande e até cinco usuários se você quiser usar, então temos um plano gratuito para sempre. Use até cinco usuários, cinco GB por usuário, 25 MB de limite de anexos. E o Webex diz e acesso móvel e todas as outras coisas como Mas você tem, mas você deve ter seu e-mail de domínio hospedado para um único domínio. Nós faremos nesta área específica. Temos nosso nome de domínio conosco que é site global atual ponto com este nome de domínio, vamos fazer isso. Vamos dominar. E vamos clicar neste domínio. Sim, vamos esperar aqui e prosseguiremos com o nosso e-mail do zoológico e começaremos a criar nossa conta no e-mail do zoológico em um final curto, então h2 e então começaremos a prosseguir com os e-mails da Zoe contribuição e isso veremos em nosso próximo vídeo. 69. Adicionando registros de e-mail no DNS: Ok, então vamos começar a configurar nosso CSA que enviou um e-mail com nosso domínio. Então, vou clicar em Tente agora, ano em que vamos, temos isso. Nós, estou logado com minha conta do Yahoo, então haverá algum processo de verificação também, acho que não, a verificação já está feita. Você também precisará fazer o processo de verificação, se necessário, ou então você chegará a esta página específica. Então eu vou clicar no abdômen. E este é o nosso domínio ao longo do ano, então ele só copiará esse domínio. E vou colar o ano do domínio. E lá vamos nós. E essa organização, como fornecer o nome da sua organização. Então, vou digitar como corrente global, talvez o nome da sua organização e depois o setor. Vou apenas colocá-lo como educação. educação será boa. Vou clicar em Adicionar. Em seguida, parabéns por isso, esse domínio foi adicionado com sucesso e prossiga para a verificação do domínio. Agora isso é importante e tenha muito cuidado ao fazer isso. A primeira coisa que temos que fazer é verificar o domínio. Verificando o domínio, temos três etapas diferentes. O primeiro é recomendado, ou seja, adicionar registro TXT no DNS. Dns significa Sistema de Nomes de Domínio ou servidor de nomes de domínio. E, em seguida, a segunda opção é adicionar um registro CNAME no DNS. E a quarta opção é fazer upload de arquivo HTML no site. Então, vamos começar com o primeiro. Normalmente, a verificação de domínio não leva mais tempo. Se o TXT não funcionar, então iremos com o, o que você diz? Este aqui. Mas o que eu vou fazer apenas no caso de ter sido verificado, então não posso mostrar isso. Então, vou clicar neste arquivo HTML. E agora o que você precisa fazer é que este é o arquivo HTML, apenas se você clicar neste Zu que verifica o Zoho dot HTML, este arquivo será baixado aqui. O que você precisa fazer é ir ao seu servidor, essa pasta HTML de sublinhado público estará lá, certo? Então, vou te mostrar isso também. Vamos para a hospedagem lá. A hospedagem. Iremos para o nosso domínio, que é este ano neste gerenciador de arquivos. Sim, dentro desta pasta HTML de sublinhado público, o que você tem que fazer é ver, este é o link onde ele irá verificar se este é o site atual do ponto global, barra lateral DOT atual global, então é como Zoho. Verifique. Você precisa criar uma pasta com o nome de Zoho verificar exatamente como vamos fazer naquele ano, caso você esteja bem e esteja verificando nosso domínio por arquivo HTML, basta clicar em uma nova pasta aqui. E vamos nomeá-lo como Zoho. Zoho verifica. E criaremos essa pasta. Agora estamos dentro desta pasta de verificação do Zoho e do arquivo que baixamos. Vou abrir naquele ano que vamos. Vou arrastar e soltar esse arquivo aqui. E só por algum motivo ele foi renomeado, eu tenho que renomeá-lo como verificar o HTML de ponto x2 e ele simplesmente o renomeará. Se você abrir este arquivo, verá que algum número está lá. E dessa forma você pode verificar o domínio. E se você clicar neste link mais de um ano agora ele vai demorar, ele mostrará apenas esse número. Assim que isso for feito, você pode clicar em Verificar arquivo HTML e seu domínio será verificado. E vou mostrar mais uma coisa, como exatamente vamos fazer com a verificação de domínio TXT. Para isso, fecharemos este e chegaremos ao nosso domínio. E é aqui que encontramos como servidor de nomes DNS. Cada nome de domínio tem um conjunto diferente de instruções. Então você precisa descobrir que onde você vai mudar o sistema DNS. E vamos apenas clicar neste DNS sobre. Você vai voltar para este Zoho. E agora o que você precisa fazer é primeiro ver que este é um registro TXT e esse é o valor no serviço de domínios diferentes que eles o nomearam de forma diferente, valor 0,2 ou ano de destino. O que temos que fazer é esse nosso registro DNS gerenciado. E a primeira coisa que temos que fazer o seu ys, temos que ir para o registro TXT antes disso, temos que ver o que realmente verifica. Vou apenas digitar check aqui. Nada está lá. Certo. Vou clicar neste botão Copiar aqui. Vou clicar no botão Copiar. E o nome estará na taxa apenas o valor do texto será aquele que acabamos de copiar. E vou colá-lo aqui. E o TTL será o mesmo. E vou clicar em Adicionar registro. Depois de clicar em Adicionar registro, voltarei e ele só clicará em Verificar registro TXT. Lá você pode ver que o registro TXT foi verificado com sucesso. Certo, então é assim que vamos fazer isso. E antes de avançar, voltaremos o ano. Vou procurar o ano MX. Você pode digitar MX e procurar por MX ano. Você encontrará mx two dot hosting ou dot in e mx1 dot hosting ou pontilhado. Temos que excluir ambos. Vou excluir este, amex e excluirei este segundo MX. E então eu posso digitar DKIM e temos que ver se há decaimento MS lá, que seja. E então SPF eu tenho que digitar este é o registro SPF para hospedá-la que eu tenho que excluir. Registro Spf que excluí. Certo. Então, MX um registro SPF que temos que excluir e agora viremos aqui este e-mail. Agora ele está pedindo o endereço de e-mail, que será o administrador, o controle de nível de administrador. Você pode colocar seu nome ou você pode colocar o administrador também é seu. Vou colocar meu nome atual no site global de pontos atual e ele apenas clicará em Criar. Este endereço de e-mail funcionará como um endereço de e-mail de nível de administrador, onde posso criar usuários e posso alterar a senha para eles ou posso excluir todas as coisas do usuário. Você pode ver esse ícone com o nível de super administrador é que eles estão aparecendo há uma semana. Sim. Último login com este endereço de e-mail que é atual contiguidade atual yahoo.com. Eu fiz uma semana atrás, então ele está me mostrando há uma semana. Portanto, prossiga para a configuração do grupo e não há nada de configuração de grupos, então prosseguiremos para o mapeamento DNS agora. Agora isso é como deveria estar lá ou então seu e-mail não será, não será acionado para o Zoho One, três etapas estão lá, uma é MX do que SPF e DKIM MX e SPF, que era a antiga um. Excluímos que agora temos que adicionar o novo. Então, voltando aos nossos registros DNS, irei para esse registro DNS gerenciado e ele procurará o registro MX, que é o segundo. Voltarei ano na taxa permanecerá a mesma e copiarei este ponto MX x 2 para dentro. E eu vou colar isso na seção do servidor de e-mail, e apenas clicaremos em Adicionar gravado. Primeiro registro MX foi adicionado. Da mesma forma, farei isso por este, mas a prioridade mudará de dez para 20. Então agora vou levar mais um ano e vou colá-lo aqui e a prioridade será 20. Basta clicar em Adicionar registro. E o segundo registro add MX foi adicionado. Agora o terceiro que é MX, três pontos, Zoho dot in e a prioridade é 50. Voltaremos aqui. O endereço permanecerá o mesmo, oh desculpe. Mx primeiro, depois adicione, a taxa permanecerá a mesma e vamos colar isso e a prioridade será 50. E clicarei em Adicionar registro. Esse registro foi adicionado com sucesso. Então temos que ir com o SPF, que é novamente um registro TXT na taxa e visualizar o valor SPF. Basta clicar em Exibir valor SPF. E está mostrando que vários registros SPF se formaram. Então é, este é o anfitrião de um. E não queremos isso, então vamos clicar neste que o SPF inclui este, o primeiro, eu copiarei isso. E antes de adicionar esse registro, procurarei novamente qualquer registro SPF. Existe, por acaso, nenhum registro SPF existe. No registro de texto, vou nomear, o nome estará na taxa e colocará esse valor que copiamos e clicarei em Adicionar registro. Certo, justo o suficiente. Vou apenas clicar em Ok. E o último é o registro DKIM. Novamente, é um registro TXT. E agora o valor do host, em vez de adicionar o ID, temos um valor específico que temos que colocar lá. Então, vamos copiar este. Voltarei aqui e selecionaremos o registro de texto. O nome agora será este, subvendida de ponto de correio Zed chave de domínio subvendida de ponto de correio Zed e algo assim. E o valor será esse. Ele copiará este. Venha aqui e cole esse valor aqui e clique em Adicionar registro. Agora adicionamos todos os registros. E assim que clicarmos em Verificar todos os registros lentamente e gradualmente, ele começará onde você encontrar o registro. O tempo normal é de 30 minutos para verificar o registro. Ou talvez possa levar um dia completo que seja 24 horas de acordo com as condições. Então, clicaremos em Todos verificar todos os registros. Vamos ver quais todos os registros são verificados. E podemos ver que há uma mensagem aqui que diz TTL. Dependendo do TTL, pode levar algum tempo. E podemos ver que o registro DKIM foi verificado com sucesso e o registro MX e SPF ainda está pendente. Você pode ver que ele ainda está mostrando que esta hospedagem ou apontamento está lá. Verificaremos mais uma vez após 30 minutos e, em seguida, veremos se ele está ou não mapeado ou não. Assim que isso for feito, podemos avançar durante a migração de e-mail, mas não temos nada para o Migrate. Então, vamos para o celular. E está me pedindo para baixar os e-mails e tudo e depois cruzar a conclusão. Agora existem duas opções. Um deles é verificar sua caixa de entrada e ir para admin. Então, vou apenas clicar nisso, ir para administrador. Agora, você pode ver que é assim o administrador se parece no Zoho CRM, Zoho masculino. Essa corrente global está lá e o nome do site está lá. O endereço de e-mail no nível administrativo está lá. E então temos o plano como plano livre, existe para sempre? Plano gratuito. Quantas licenças temos, que são cinco licenças que temos e temos um domínio frequência ou quantos usuários temos em nosso sistema é apenas um. Desculpe, vou apenas clicar em voltar. Clicaremos no Painel e no número de grupos criados, que é 0, depois no tráfego de e-mail e todas as coisas que você pode vê-lo ano. Então você pode alterar seus logotipos e tudo mais. Clique em editar aqui. Então, a partir daqui, você pode alterar o logotipo da sua empresa. E vamos ver, se eu for navegar. E, Existe algum logotipo ou algo assim? Digamos, por exemplo, se eu tomar este como um logotipo, vou fazer o upload disso. Só estou usando qualquer logotipo aleatório. Talvez este seja um logotipo de alguma empresa também. Não tenho certeza sobre isso. Uma vez que isso é carregado, então podemos ver agora apenas lembre-se desse logotipo que usamos aqui. O logotipo foi atualizado com sucesso e apenas no caso de essa imagem de carregamento ainda estar acontecendo, em andamento, em andamento. Então, o que você pode fazer é atualizar a página. Às vezes, existem alguns problemas. E então temos um domínio que diz que o registro MX ainda não está apontado, então está tudo bem. Podemos fazê-lo mais tarde também. Usuários é que você pode adicionar os usuários. Digamos que se eu clicar em Adicionar usuário, você pode colocar o FirstName, LastName e, em seguida, Nome de usuário. usuário será automaticamente apenas você precisa colocar o nome de usuário. Digamos, por exemplo, se eu colocar um novo gnarly lá, você pode ver a monarquia no site global atual de pontos e depois passar o que você pode colocar a senha. E então você tem que depender de você, como forçar o usuário a alterar a senha no primeiro login se quiser que o usuário deste endereço de e-mail joelho mude a senha. E então você pode continuar marque essa opção e você pode simplesmente desmarcar essa opção. Desta forma. Você pode adicionar até cinco usuários. Agora você pode adicionar até quatro anos porque um usuário já foi levado. Em seguida, migração de dados do grupo, configurações de e-mail e tudo isso. Agora você também pode acessar este e-mail a partir de agora, você pode ver o que você diz? O logotipo está lá. E você pode acessar este e-mail a partir do aplicativo móvel de e-mail x2 tanto no iOS quanto no Android, estão disponíveis. Agora vamos para nossa Caixa de entrada. Eu vou apenas vir você, vou abrir uma nova guia e vou digitar z2 macho. Vou clicar aqui. Esteja lá por um segundo, e aqui está lá o excesso Zu quem envia e-mail. E vou clicar no e-mail do Access x2. Agora você pode ver a corrente no site de pontos Bluebell está lá. Aqui. Você pode ver que temos nosso logotipo aqui. Tem algumas instruções que vou pular isso por enquanto. Temos nosso logotipo, o logotipo da empresa mais fácil do que o masculino. Então você pode ir com o calendário e depois a tarefa. Você pode ter o tasky lá. Tudo está lá, como completamente profissionalmente, você pode ver que algumas tarefas de demonstração estão lá. E vou apenas clicar no e-mail aqui. E uma vez que você clica neste e-mail, este e-mail é aberto como esta interface de usuário e experiência do usuário completamente nova, afiada e bonita. Então, sim, é assim que você está a notificação está lá, então você pode ver como e-mail Xu e os registros ESP EFN MX ainda não estão apontados que vamos verificar após 30 minutos. Depois, há algumas integrações que estão lá ao longo do ano. Você pode simplesmente ativar o modo escuro e o modo de luz também. Envie o feedback. E aqui você pode ter comunicação interna com seus colegas e similares em sua organização. É assim que você integrará Zu quem envia e-mail ao seu nome de domínio. Após 30 minutos, verificaremos essa verificação para registro MX e registro SPF e, em seguida, tudo definido. Estou pronto para ir. É assim que vamos fazer esse zu Emails. E isso é tudo para este vídeo. No próximo vídeo, mostrarei depois de apontar este e-mail, o que exatamente ele não parece mais nada. Sim. Vejo você no próximo vídeo. E se você quiser ver o próximo vídeo, você pode ver ou então vê-lo na próxima seção. Obrigado, pessoal. Muito obrigado. 70. Observação: Olá pessoal. Neste vídeo, vou lhe dar uma informação que quando você uma informação que quando estiver baixando meus arquivos de projeto. Certo. E quando você está abrindo esses arquivos no estúdio Bootstrap, há formulários em que, no treinamento, o que eu fiz foi o treinamento. Eu adicionei meu endereço de e-mail aqui que é realizado atualmente em yahoo.com. O que está acontecendo aqui? Quando você está testando esse arquivo enquanto carrega em algum lugar, os e-mails estão chegando até mim. Você pode ver como smartphones, e-mails como e-mails de smartphone, há e-mails de formulário inteligente que estão chegando até há e-mails de formulário inteligente que estão chegando até mim, onde está mostrando todos os e-mails de teste. Você pode ver testes, testes, testes. O que você tem que fazer aqui é que, em vez de manter meu endereço de e-mail, você precisa clicar em Gerenciar aqui. E, como eu disse nos vídeos também, você precisa clicar em Gerenciar e depois clicar em Adicionar destinatário e colocar seu endereço de e-mail onde deseja trazer seus e-mails, como onde você deseja assumir o formulário envie e-mail, coloque seu e-mail aqui, clique em Criar, então você receberá um OTP nesse e-mail, colocará esse OTB e, em seguida, você poderá conectar seu ano de e-mail. Em vez de usar meu e-mail. Você precisa usar seu e-mail para que ele venha no seu e-mail e você receberá dois Nokias. O formulário está funcionando corretamente. Ok pessoal, isso é tudo para este vídeo. Isso é o que eu quero te dizer. Não use este porque os e-mails estão chegando até mim e você pensará que não está funcionando. Mas sim, está funcionando, mas está chegando ao e-mail errado. Muito obrigado. 71. Altly.in agora é Lynko.in: Olá, pessoal. Este vídeo é para informar que ltle.in agora é lincodt in. Tudo permanece o mesmo, exceto os planos de preços. Portanto, há uma grande mudança no plano de preços. Agora, não temos uma trilha virgem por aqui. E no plano gratuito, você pode criar apenas um link curto, e haverá apenas um clique nesse link curto por mês. Então, isso não serve para nada, mas você tem acesso completo ao Bopage Resumindo, no plano gratuito, você pode criar um Bopage E na versão paga, desde o núcleo em diante, você tem a maioria dos recursos disponíveis para Portanto, neste plano básico, você pode ver que tem 150 links que você pode criar por mês, e não há limite de cliques, e os dados permanecem no banco de dados por 30 dias. E Bopage é novamente um. Mas um pequeno problema aqui no plano de crescimento, se você observar que eles mencionaram que é gratuito, mediante solicitação para usuários com mais de 1.000 seguidores da história do IG. Portanto, se sua conta do Instagram tiver mais de 1.000 seguidores, você pode solicitar que eles obtenham esse plano de crescimento gratuitamente. Você pode clicar na solução e clicar no LincoElitPass Você pode ler as informações aqui. Você pode solicitá-los e obter o plano LinkoGrowth totalmente gratuito Então, sim, isso é especificamente para que você saiba que Atledt in agora é lincodtn. Obrigada.