Como criar sites modernos no Editor X

1. Trailer do curso: [MÚSICA] Ei, meu nome é Jeremy, um designer de marca de Sydney, Austrália. Na aula de hoje, vou mostrar a você como criar sites no Editor X. Vou mostrar o básico da plataforma sobre como criar sites realmente legais seja você proprietário de uma agência, um freelancer ou alguém que queira mudar para web design. Editor X é uma ótima ferramenta de criação da Web que permite criar sites da forma como você deseja, personalizá-los da maneira que quiser sem sequer saber o código. É uma ferramenta sem código, e é uma ferramenta muito legal criar experiências incríveis na web. Falaremos um pouco sobre grades e flexbox no layout das ferramentas no Editor X, e vamos ter uma explosão criando sites legais. [NOISE] Agora, para o projeto de classe, tudo o que você precisa fazer é criar um site com base em um cliente real ou um projeto conceitual. Pode ser para uma empresa de tecnologia, pode ser para o café local, seja lá o que for. Basta criar um site simples e vamos colocar todas as dicas e truques em prática e agir sobre isso. Inscreva-se no curso hoje e te vejo lá dentro, e vamos criar sites incríveis juntos [MUSIC]. 2. O que é o Editor X + recursos: [MÚSICA] O que é o Editor X e quais recursos eles têm? Editor X é uma ferramenta de criação de web sem código que permite criar sites apenas arrastando e soltando elementos em uma página. Você tem muita funcionalidade. Você também pode personalizar o CSS se quiser também. Mas, no geral, é uma ferramenta fácil de criar sites, e eles têm muitas coisas diferentes. Mas alguns dos prós e os contras da minha visão pessoal é que os prós são, você tem bons modelos editáveis. Você tem modelos e também armações de arame para construir. Eles têm um monte nesta loja e você pode usá-los gratuitamente, e eles são super fáceis de editar, adicionar seus logotipos, adicionar suas cores, tipografia, tudo isso realmente facilmente. Acho que esse é um dos principais profissionais. O segundo é que eles têm uma academia cheia de tutorial, então eles são fáceis de acompanhar. Eles quebram em breve tutoriais de 2-5 minutos, e é uma boa academia. Eles quebram todas as suas ferramentas, então, se você ficar preso e precisar de ajuda, então você pode realmente pular na academia e aprender algo sobre o processo de criação da web. Número três, como mencionei antes, é arrastar e soltar, então eu posso arrastar elementos, textos , seções e layouts e um monte de coisas e composições na página. Muito fácil e posso simplesmente clicar e movê-lo e gosto dessa flexibilidade com ele. Por fim, você também tem o mercado de aplicativos, que inclui integração, para que você possa integrar coisas diferentes. Você pode instalar uma loja, ou se for um determinado formulário que você precisa ou um processador de pagamento, você pode colocar isso em seu site e tudo faz parte e integrado dentro do Editor X. Agora, os poucos contras que eu penso é que há uma pequena curva de aprendizado porque não é como semanas normais. Editor X é diferente, é mais para criadores, designers, freelancers e agências, então há uma curva de aprendizado para se acostumar com isso e construir o site. Esse é um dos contras. Mas então o segundo golpe é que ele tem algumas limitações. Ele não tem nenhum recurso louco em termos de animações malucas, você pode fazer animações básicas, o que é bom. Mas acho que está faltando algumas outras coisas também. Mas, no geral, tem as ferramentas básicas que você precisa. Mas esses são os prós e os contras. Você pode ver que estou apenas em um site, se você for para recursos/design, você pode ver aqui que você tem o principal que é pontos de interrupção personalizados. Você pode trabalhar da área de trabalho diretamente até a visualização do iPad e do telefone, então eu acho que isso é muito, muito fofo. Você também tem uma grade CSS, para que você possa criar grades que se ajustam com base no mínimo máximo ou no conteúdo. Então, se você quiser colunas, duas colunas, três colunas, quatro linhas, seja lá o que for, você pode adaptar isso e será responsivo. Você também tem o repetidor também, então, se você tem um blog ou você tem certas partes do portfólio de conteúdo que precisam ser repetidas, ele faz isso automaticamente para você e funciona diretamente no CMS. Você também tem a ferramenta de layout também, para que você possa criar layouts flexíveis que são basicamente caixas responsivas. Você pode personalizar armações de arame em branco e movê-las e elas mudarão para você quando você escalar para cima ou para baixo. Você também tem encaixe também. Você pode encaixar imagens, elementos ou ícones ou texto, seja lá o que for para os contêineres pai ou as diferentes caixas em que você está projetando. Também temos camadas também, então, como o Photoshop, está sempre limpo ter camadas para que você possa gerenciar isso. Você também tem escala de texto também, então a escala de texto, você pode definir o tamanho mínimo e o tamanho máximo, seja o site dimensioná-lo ou estiver no celular, ele será dimensionado para os tamanhos definidos. Essas são as principais características. Você também tem outros como mestre, páginas, menus personalizados, pilha, todas essas coisas. Você pode verificar você mesmo, mas eu só queria mencionar esses principais recursos. Agora, as outras características principais quando se trata de interações e efeitos, que você possa conferir isso no site também, é que eles têm interações com o mouse. Você também pode criar estados de focalização. Quando você coloca o mouse sobre um elemento, ele vai fazer algo, seja lá o que você o definir para fazer. Acho que isso é realmente fundamental quando se trata de web design. Você também tem movimento, tem rotação, e é bem simples, mas sim. Você tem opacidade, então você pode fazer máscaras. Você também pode fazer sequências de tempo, portanto, se você defini-la para uma determinada meta em um determinado ponto de gatilho. Você também tem opacidade, mudança de cor e também tem movimentos para que você possa mover o texto. Esses são os principais recursos de interação. Eles têm posicionamento pegajoso, bem como você pode ver, você pode criar esses efeitos de rolagem legais e um monte de outras coisas. Essas são as principais características quando se trata do Editor X, para que você possa ver que é muito, muito busto, é versátil e é ótimo se você um designer freelancer criando sites para seus clientes. 3. Como usar o painel: [MÚSICA] Agora eu quero mostrar a você o back-end do Editor X quando você começa a entrar em sua conta e o que você pode fazer. Este é o painel da sua conta para que você possa ver que tenho outros sites aqui. Agora, o mais legal com isso é que você pode criar pastas, então no canto superior direito que você pode ver eu posso criar uma nova pasta. Talvez eu queira chamá-lo de Clientes 2022. Eu posso criar isso e, em seguida, o que posso realmente fazer é arrastar sites diferentes nisso e talvez eu queira arrastar esse lado, então eu posso clicar com o botão direito do mouse na seta lá e você pode dizer Mover para e posso clicar nela e clicar em mover aqui. É muito estruturado em termos disso muito fácil fazer isso e planejar seu conteúdo se você tiver um monte de clientes diferentes. Você também tem o canto superior direito, você tem configurações de conta, domínio, e-mail comercial, vouchers, assinaturas, métodos de pagamento, tudo o que está no canto lá, isso é muito fácil de usar. No canto superior esquerdo, você tem o painel do Parceiro. Se você clicar em Meu site também, poderá selecionar seus sites aqui. Você também tem os recursos que o levam ao Academy x, recursos de design de inspiração que eu mostrei alguns antes. Então você tem Ajuda, para que você possa clicar na Ajuda e ela levará você a perguntas frequentes ou problemas que você está tendo. Se você quiser editar os detalhes e as configurações mais finas do site, como renomeá-lo, você pode colocar o mouse sobre ele e clicar em Selecionar site e levá-lo ao seu outro painel principal para isso site específico. Você pode ver aqui se eu preciso conectar meu domínio ou comparar planos, posso fazer tudo aqui. Posso ir para o lado direito e clicar nas ações do site, posso clicar em Renomear site que, se eu quiser clicar nessa renomeação, posso renomeá-lo e clicar em “Salvar” e ele vai atualizar isso de forma muito simples. Você também pode receber feedback, visualizar o site ao vivo, transferir o site para outra pessoa se for um membro da equipe ou o cliente, você pode convidar pessoas se tiver colaboradores. Você também pode mover a atribuição duplicada de confiança ou criar um novo site lá. Ele também oferece análises, o que é muito legal para que você possa ver relatórios, portanto, se você clicar em Ver todos os relatórios, isso mostrará isso. Posso ver quantos visitantes tenho. Eles também fornecem algumas instruções para orientá-lo na construção de seu site, então publique-o, conecte um domínio e seja encontrado no Google e isso ajudará você a se conectar ao Google Analytics. Você também pode personalizar seu painel Se eu clicar com o botão esquerdo do mouse, você pode ver que posso adicionar faturas, adicionar campanhas de e-mail, tarefas futuras, etc, para que você possa gerenciar todo o projeto do um site do cliente, tudo dentro deste painel. Você pode rolar para baixo e também receberá algumas sugestões aqui e algumas outras coisas que você pode adicionar ao site. No canto superior, você pode ver sua caixa de entrada ou mensagens e notificações e novos lançamentos, para que qualquer coisa nova que o Editor X tenha lançado, você pode ver isso lá na parte superior. Então, à esquerda, você tem todas essas outras opções, como contatos, comunicações, automações, marketing, SEO, relatórios, finanças, etc. e você pode gerenciar tudo do back-end. Se você quiser editar o site, basta clicar em Editar site e ele o levará ao designer e ao espaço de trabalho. O que vamos fazer é criar um novo site, ele perguntará qual plataforma você quer clicar no Editor X e, uma vez que isso aconteça perguntará alguns prompts sobre que tipo de site é, é uma loja, um design, um evento, etc. Para isso, vou clicar em Negócios e isso lhe dará algumas sugestões sobre alguns modelos aqui. Então você pode ver aqui que temos alguns modelos. Posso clicar na parte inferior Veja todos os modelos se eu quiser e mostrarei alguns desses para que você possa ver que eles têm outros extras aqui. Eu apenas percorro, então você não precisa criar do zero, você pode literalmente criar usando [NOISE] isso. Você também pode clicar em Wireframes no canto superior direito, você vê este pequeno botão. Se eu clicar nisso, ele só me mostrará wireframe assim sem imagens ou nada. Ele mostra os ossos dele e você pode criar com base nisso também. Para o que queremos fazer, vou clicar em Blank Canvas porque vamos construir do zero. 4. Noções básicas de interface do Editor X: [MÚSICA] Então, agora estamos no espaço de trabalho principal do Editor X. Agora vou mostrar o básico e vou começar com certas partes dele, e então acabaremos por construir o site. Mas primeiro vamos cobrir alguns dos conceitos básicos. A primeira coisa que quero que você perceba é no topo do meio. Você pode ver que você tem seus pontos de interrupção. Também posso clicar aqui e posso ver minhas páginas. Posso clicar em Gerenciar páginas, posso criar mais páginas. Vou te mostrar como fazer isso em um minuto. Mas queremos pagar para usar os pontos de interrupção. Neste primeiro ponto de interrupção você pode ver, podemos editar a partir de 1.000 pixels ou mais. Você pode ver que a largura do site está atualmente em 1.935. O botão do meio aqui no ponto de interrupção é um ponto de interrupção inferior, e é basicamente para um iPad ou um tablet. Se eu clicar na parte inferior, você poderá ver que ela tem uma visualização móvel, e você pode ver isso também. Se eu clicar na área de trabalho, tenho isso lá. Posso clicar nos botões e também adicionar pontos de interrupção personalizados. O que eu quero fazer é adicionar 1.440, e vou clicar em “Concluído”. Agora, podemos ver que temos um ponto de interrupção personalizado que é 1440 ou mais. Podemos clicar nisso como você pode ver lá. Podemos trazer aqui também. Ele vai se ajustar ao seu ponto de interrupção. Você vê a área cinza, ela se encaixará nesse ponto de interrupção, o que é muito legal. Eu arrasto para fora. Iremos para o próximo ponto de interrupção. Então, se eu arrastar para fora, irei para o próximo ponto de interrupção lá na linha tracejada cinza. Linda. Quando você está projetando para um tamanho ou resolução específicos para seu cliente, isso facilitará o design. Para este site, vamos trabalhar em 1.440 porque foi assim que eu projetei o site atual em que vamos trabalhar. Então isso é 1.930 ou 20, basicamente se você terminar. Agora, no lado direito, você também tem o Inspetor. Se eu clicar neste pequeno ícone do mixer aqui, você pode ver que diz “Inspetor”, isso permitirá que você crie certos elementos da página, que você adicione suas cores, por exemplo, o plano de fundo. Mas você quer tornar esse fundo preto por enquanto, ou o que quer que seja, verde ou rosa, seja lá o que for , realmente não importa, eu posso torná-lo preto por enquanto. Mas basicamente permite que você personalize seus elementos. Se eu clicar no cabeçalho, você pode ver que posso ajustar o dimensionamento, posso ajustar o posicionamento. Posso clicar neste pequeno ícone com um pequeno pincel, e posso adicionar o preenchimento do plano de fundo lá também. Posso mudá-lo lá. Talvez o cabeçalho, queremos um verde ou queremos um azul, seja lá o que for. Então, temos uma interação com o mouse. A bola de revestimento é uma interação hover, posso clicar em “Adicionar interação”, então posso ir em frente e começar a brincar com isso. Mas faremos isso um pouco mais tarde. Esse é o Inspetor. Você também tem seus comentários ao lado desse ícone. Se você tiver uma equipe, você pode adicionar comentários aqui, dizer: “Ei, crie a página”. Se você tiver uma equipe, eles verão esse comentário onde quer que você tenha adicionado, o que é muito legal. Também temos notificações aqui também, então, se você receber visitantes do site, etc. No canto superior direito, você tem o botão Publicar, você tem Convites. Se você quiser convidar sua equipe para colaborar, então você pode fazer isso. Basta digitar o e-mail e adicioná-lo a isso. Super fácil de fazer e ótimo se você estiver trabalhando em uma agência. Você também tem Anterior, então se eu clicar nisso, qualquer momento eu posso ver meu site ao vivo. Obviamente, posso derrubar isso também, e posso escalá-lo mais uma vez para esses pontos de interrupção, e posso ver o que parece ao vivo. Obviamente, não há conteúdo lá agora, mas é realmente útil. Em seguida, basta voltar e clicar em “Editar site” para voltar a isso. Se você for para o lado esquerdo, temos nossas barras de menu aqui e, em seguida, temos nosso Adicionar elementos. Vou clicar com o botão esquerdo sobre isso. Clique em “Elementos”. É aqui que podemos adicionar nosso conteúdo. A carne do site. Podemos adicionar botões, títulos, parágrafos, contêineres , layouter, repetidores , menus, formas, linhas, etc. Podemos economizar ativos também neste espaço. Já podemos usar composições pré-fabricadas. Posso literalmente clicar neles e adicionar isso diretamente no site sem ter que fazer muito. Se eu clicar com o botão esquerdo sobre isso, você pode ver boom, ele adiciona isso exatamente assim em nosso site. Vou voltar. Você tem ferramentas de layout. Mais uma vez, antes, mencionei que temos grades, para que eu possa adicionar uma grade. Posso adicionar o layouter. Há seções pré-fabricadas aqui. Temos o repetidor também , e também uma caixa de luz. Isso é ótimo para uma imagem de galeria ou um pop-up. Você tem botões pré-fabricados personalizados. Gosto disso. Eu não preciso fazer um, eu só clico nisso ou arrasto, solto lá, e posso ir em frente e abrir o inspetor, começar a brincar, e mudar as cores e sombras, e todas essas coisas legais. Temos Textos, Menu, Pesquisa. Temos barras de menu e navbars, um monte de coisas diferentes aqui. É bom ir no seu próprio tempo e ver o que você tem. Você também tem formulários de contato. Então, você tem outras coisas, como, você pode adicionar um blog ao seu site. Você pode adicionar uma loja, adicionar uma reserva, eventos, associação, um gerenciador de conteúdo, que é CMS e um site multilíngue também, que está em Beta. Você tem um monte de elementos para usar. A segunda parte é a Camada. Se eu clicar neste ícone aqui para obter nossa camada, então só tenho uma página, que é a página inicial. Você pode ver em verde, este é um dos nossos componentes, que é um símbolo reutilizável basicamente, e você pode ver que estará em verde. Eu posso alternar a pequena seta, e ela vai me mostrar todos os elementos dentro dessa barra de navegação. Então, você vai para Seções. Posso ver as camadas. ir para a Seção aqui, et cetera. Muito simples como usar camadas. A próxima coisa é o site masters. Podemos criar seções mestres de várias páginas. Por exemplo, o cabeçalho e um rodapé, este é um mestre, o que significa que em cada página ele terá a mesma coisa. Ele terá o rodapé e o mestre em todas as páginas. Você pode configurá-lo como padrão. Você pode duplicá-lo e fazer outra coisa. Se você quiser editar algo, eu editaria o cabeçalho usando isso porque é por isso que ele está verde e, em seguida, ele vai aplicá-lo a todas as páginas. A próxima parte é Pages. Posso clicar com o botão esquerdo em “Adicionar nova página”. Você pode ver que é uma página dinâmica, projetar uma vez, gerar páginas ilimitadas ou é apenas uma página em branco padrão, para que você possa escolher o que quiser. Se eu apenas adicionar uma página, posso clicar nela e agora ir para Page, e posso ligar para essa equipe, etc. Agora, temos páginas diferentes, posso clicar nelas, e você pode ver isso. O único ou o pequeno ícone da casa, é a sua página inicial. Apenas lembre-se disso. Se você quiser alterar as configurações, você pode clicar nos três pontos. Você tem Configurações, SEO. Você pode renomear a camada, duplicá-la e editar a página ou adicionar um comentário para sua equipe. Também temos Estilos do Site. Você quer clicar no A com uma pequena gota. Temos tipografia. Você pode realmente ter controle sobre as fontes. Você tem H1 a H6 e, em seguida, você tem um Parágrafo 1 ao Parágrafo 3, que você possa personalizar todos eles. Se você clicar nele, você pode ver o que ele vai mostrar. Você pode alterar o tamanho, a ousadia, itálico ou adicionar uma cor, o que quiser fazer, realmente. Se eu clicar em “Aplicar”, ele aplicará isso. Você também tem cores. Vou clicar com o botão esquerdo nisso. editar nossas cores globais aqui, para que nossa paleta de cores, eu possa mudar isso. Além disso, você tem transições de página. Se você quiser apenas definir transições gerais para páginas ao alterar as páginas, você pode defini-lo para um out in, o que é legal. Aqui está o mercado de aplicativos. Você clica nos pequenos quadrados, olhando por aqui, e eu diria que provavelmente não instale muitos porque você não quer atrapalhar seu site, mas você pode brincar e olhar para o mais popular. Se você clicar em “Popular Este Mês”, poderá ver o que é popular ou as Escolhas da Equipe. Você pode ver as Escolhas da Equipe aqui. Montes de plugins que você pode usar para o seu site. Então, por último, você tem o Gerenciador de conteúdo à esquerda aqui, você pode ver. Se você tem um blog ou um grande portfólio ou um grande site de marketing, você usará isso. Para o nosso design hoje, vamos mantê-lo simples, então não precisaremos usar o CMS. Por fim, temos algumas opções de menu na parte superior. Temos nosso Slide, para que eu possa clicar nisso. Você tem suas opções aqui. Você pode convidar, duplicar, transferir site, atualizar para uma versão paga. Você tem painel, funções e permissões para sua equipe, portanto, se quiser alterar isso, e você também pode gerenciar seu site aqui. Você também pode clicar em “Exibir” também. Você pode ampliar e diminuir o zoom. Normalmente uso os atalhos, que estão aqui, Control plus e menos. Você também tem Ferramentas aqui. Se você quiser clicar no Media Manager, que é outra coisa chave que você precisa. Vou clicar nisso, e é aqui que podemos fazer upload de nossos ativos. Vou fazer upload das minhas imagens aqui. Se eu clicar em “Upload”, carregar do computador ou quiser arrastar algumas coisas, agora posso passar por aqui e começar a arrastar minhas imagens, então vou arrastar isso para dentro. Vou clicar em “Arquivos do site”. Você também tem Unsplash também. Você pode ver que você pode obter imagens gratuitas dentro disso, então tudo está integrado. Meus arquivos de slides aparecerão aqui. Vou arrastar e soltar algumas das imagens lá que vou usar. É super fácil adicionar imagens. Você também pode cortá-los, editá-los e ajustá-los, se necessário. Se eu clicar nisso, posso realmente clicar em “Melhorar” se eu quiser ajustar as coisas, posso melhorar automaticamente. Posso ajustar o brilho, etc. É como o Photoshop. Você tem filtros, você pode cortar coisas, adicionar filtros se quiser, é muito útil. Vou voltar e apenas clicar nisso. Então, você também tem o Modo de desenvolvimento. Se você é alguém que deseja adicionar código personalizado ao seu site, talvez esteja trabalhando em um site criativo, você pode clicar em “Modo de desenvolvimento” e conectar APIs, você pode adicionar código personalizado CSS, e faça todas essas coisas. 5. Ferramentas de layout flexíveis: [MÚSICA] Quero mostrar as principais ferramentas de layout no Editor X que acho muito úteis e são muito fáceis de usar. Acabei de receber outra página aqui, apenas uma página básica. Tenho algumas seções, como você pode ver aqui. Agora, vou para meus elementos Plus e você quer ir para o Layout Tools. Agora, você tem cinco ferramentas aqui. Você tem caixas vazias, que também são conhecidas como contêineres. Você tem grades, você tem a ferramenta layouter, você tem o repetidor e também tem caixas de luz. Agora vou mostrar o básico de como usá-los. Uma caixa vazia é apenas uma caixa média. Você pode ver que você tem algumas variações aqui. Por exemplo, posso simplesmente arrastar e soltar essa caixa cinza dentro desta seção. Você pode ver aqui, se eu for para o canto superior esquerdo, você pode vê-lo diz contêiner. Se eu for para minhas camadas, ele também o chama de contêiner. Uma caixa é conhecida como um contêiner que deveria apenas chamar um contêiner na minha opinião, mas por enquanto é assim que é chamado. Você também pode esticá-lo. Se eu clicar no pequeno ícone no canto superior direito, ele fará com que o contêiner preencha todo o tamanho da seção real aqui, como você pode ver isso. Posso ir em frente e mudar a cor de fundo, se quiser. Eu posso fazer o que quiser lá. Dentro desse contêiner, posso começar a adicionar objetos, imagens, ícones, seja lá o que for. Por exemplo, se eu quiser adicionar uma forma, posso soltar uma forma lá. Se eu for para minhas camadas agora você pode ver que dentro desse contêiner há uma forma básica. Posso mover essa forma , posso dimensioná-la. Posso mudar a cor dele. Eu posso basicamente fazer o que eu quiser com ele como você pode ver lá. Agora posso ir em frente e excluir a forma. Também posso excluir o contêiner. Agora é sempre bom construir contêineres porque você não quer criar nenhum design. Se você estiver projetando ou alterando algo em segundo plano, poderá alterar o contêiner em vez de alterar as caixas individuais do objeto. É assim que você usa o contêiner básico. Agora o outro é grades. As grades são realmente úteis se você quiser ter uma seção cortada caixas ou colunas ou linhas diferentes, depende de você. Por exemplo, posso usar essa grade dois por dois. Eu posso esticá-lo, posso torná-lo maior como você pode ver lá. Apenas usando meu mouse, posso usar as ferramentas de alinhamento para alinhá-lo ao centro direto dessa seção. Na verdade, posso alterar o layout da grade. Se eu clicar com o botão esquerdo na parte superior, ele diz alterar grade. Eu posso fazer um por quatro. Eu posso fazer um quatro por um. Na verdade, posso ir para o modo avançado e realmente começar a personalizar o dimensionamento. Se você tem essas duas pequenas linhas, posso arrastar e posso ter tamanhos diferentes, como você pode ver lá. Também posso aumentar o tamanho, a altura. Posso clicar no pequeno botão Plus, ele adicionará uma coluna. Você tem tanto controle sobre o que você pode fazer. Também posso adicionar lacunas, talvez eu queira um intervalo de 20 pixels. Você pode ver que adicionará uma pequena lacuna lá. Isso lhe dará algumas diretrizes. Posso clicar em “Concluído” e, em seguida, temos essa grade. Sempre posso voltar e alterar o modo avançado e excluir partes. Você clica no texto e clica em “Excluir coluna”. Talvez eu só queira uma grade duas assim, tudo bem. Também posso excluir o plano de fundo da grade na parte inferior e clicar em “Excluir grade”. Vou excluir esse contêiner de antes. É muito fácil usar as grades. É ótimo se você tiver peças de portfólio. Agora, a próxima ferramenta é chamada de ferramenta layouter. Você pode ver aqui que estou na seção e ela tem seções pré-fabricadas aqui. No layouter, você pode criar mais uma seção responsiva. Vou escalar isso. Vou clicar no “Layouter” aqui, torná-lo um pouco mais amplo e um pouco mais longo. Se eu clicar em “Opções”, você pode ver que tenho mosaico. Posso fazer tijolos, posso fazer linhas e também posso fazer colunas e um controle deslizante. Agora, o mais legal com isso é que ele torna tudo responsivo e você pode personalizar tudo. Posso selecionar isso e posso mais ou menos. Se eu quiser ocupar mais espaço, posso mudar isso. Você pode ver se eu queria fazer múltiplos, talvez eu queira fazer isso um pouco mais, você pode fazer isso. Então o que posso realmente fazer é arrastar e soltar imagens aqui, arrastá-las e depois esticá-las. Então eu posso mudar a imagem. Talvez tenhamos um membro da equipe, eu possa clicar duas vezes para reajustar se precisar, e posso deixar as imagens aqui também. Posso soltar o texto se eu quiser. Você pode ver se eu chego à visualização móvel, ela a torna responsiva. Essa é a coisa legal sobre o layouter. Isso o torna responsivo e você obtém uma aparência mais personalizada com essas grades que você tem. Posso adicionar imagens. Talvez você queira adicionar um pouco de texto aqui ou algo assim, e mudar o plano de fundo para preto. Lá vai você. Você pode ver que esta é a ferramenta layouter e, mais uma vez, você pode ver que ela a torna responsiva. Obviamente, os textos teriam que ficar menores, mas essa é a ferramenta layouter. Agora, eu só vou para esta outra seção aqui. Vou mostrar o repetidor. Agora o repetidor é realmente ótimo se você tiver objetos repetidos do mesmo tipo, para uma postagem de blog ou um portfólio, etc. Você pode ver que você tem todas essas ferramentas realmente legais. Eu quero arrastar e soltar este aqui e ele diz substituir seção, então ele substituirá essa seção. Lindo. Só vou me certificar de que está escalado. Vou clicar nele. mudar a cor de fundo. Podemos torná-lo verde, se você quiser. Você não quer obter a cor cinza. Posso mudar a imagem. Se eu clicar duas vezes lá, posso selecionar, por exemplo, vamos selecionar nossa equipe aqui. Você pode ver que cada rapaz é o mesmo. Só vou me certificar de que ele permaneça assim. Legal. Agora você pode ver aqui o texto, eu posso entrar aqui e lembrá-lo. Você pode ver, para personalizar itens completos que já existem, clique em “Editar texto”. Se eu personalizá-lo, você pode ver que ele mudará o efeito de todos os textos porque basicamente repete o mesmo estilo e design em todos os elementos. Se adicionarmos ou menos um elemento ou um membro da equipe, ele fará essas alterações. Por exemplo, posso obter o parágrafo 3 e torná-lo verde assim. Você pode ver como ele está em uma pilha para que ele seja agrupado. Posso clicar duas vezes e editar o título. Título talvez eu queira fazer como um cabeçalho 3, que vai mudar isso. Talvez eu queira mudar o texto para um script. Você pode ver que isso mudará todos os outros títulos lá. Apenas tenha isso em mente. Um repetidor é realmente ótimo quando você o usa corretamente. Você também pode alterar o contêiner. Quero deixar isso verde. O texto aqui, também posso editar um texto. Aquele vai parágrafo, lá vamos nós. É super fácil, o repetidor é ótimo. Certifique-se de usá-lo. Agora também posso clicar em “Gerenciar item”. Você pode ver que posso duplicar um item. Se eu clicar em “Duplicar”, ele vai duplicar e começar a adicionar mais membros da equipe. Talvez tenhamos uma equipe de seis, você pode ver que está apenas repetindo. Torna super fácil adicionar isso. Posso clicar em “Alterar layout de grade”, e você pode ver que também posso alterar isso. Como de costume, também se você quiser adicionar uma grade individual lá, então eu posso. Use repetidor, é realmente útil. Agora, o último é chamado de lightbox. Agora, estes são basicamente pop-ups. Talvez você queira ter um cookie pop-up ou você tem como uma promoção ou o que quer que seja, então podemos ter isso totalmente. Vou clicar nisso, e isso adicionará esta caixa de luz de cookies. Vou clicar nisso e posso realmente mudar a cor. Vamos com preto. Você pode dizer que esses são os parágrafos da política de cookies , que é muito legal. Posso clicar em “Configurar sobreposição”. Você pode ver clicar em fecha lightbox, para que eu possa desligar e ligar. Vou fechar isso por enquanto. Eu posso definir um ponto de gatilho também. Você pode ver sua política de cookies, exibir automaticamente o lightbox nas páginas. Posso dizer “Sim”. mostrar em qual página ele vai mostrar. Ele fará o atraso e você pode ver que está no botão X em vez do botão Fechar. Você tem algumas opções, você pode personalizar isso. Esse é o nosso pop-up lá. Você só tem algumas opções de estilo, então basta preencher a cor por enquanto. Vou clicar em “Visualizar” e veremos o que acontece. Legal. Quando estiver feliz com a mesa de luz, vou clicar em “Visualizar”. Vamos dimensionar o slide para o tamanho certo e vamos para a página Equipe e lá o temos. Temos os cookies pop-up, os dois segundos de luz na parte inferior lá e eu posso clicar no pequeno “X.” Basicamente, é isso que fazemos. Nós o definimos para a página Equipe. Você pode personalizá-lo e configurá-lo para qualquer página que você realmente quiser. Isso é super legal para ser útil. Basicamente, essas são as cinco ferramentas que você pode usar, as ferramentas de layout, elas são realmente úteis, realmente ótimas e as usam em seus projetos. 6. Biblioteca de marcas + Bar de Nav: [MÚSICA] O site que vamos criar é esse que criei no Adobe XD. É uma carteira de criptografia onde você pode armazenar ativos e tokens e NFTs dentro de sua carteira. Vou preparar rapidamente esta página de destino simples e então você pode ver a versão móvel lá também. Vamos construir isso, mantendo-o simples. Podemos fazer algumas outras páginas, ver quanto tempo a aula avança, mas é isso que vamos criar e mostraremos como fazer isso. Estamos no Editor X. Agora, vou clicar com o botão esquerdo no meu cabeçalho. A primeira coisa que quero fazer é ir à minha inspeção no lado direito, clicar no pincel e mudar o plano de fundo. Mas você pode ver aqui, eu realmente não tenho minhas cores. Posso adicionar cor C personalizada, ou posso ir para o canto superior esquerdo e clicar nas cores do site da minha marca e vou alterar minhas cores principais aqui. Para o meu plano de fundo, vou para o XD e você pode ver que posso simplesmente copiar os códigos HEX que já criei. Você pode ver aqui, clique nisso. Cole no meu código HEX. Lá vamos nós. Clique em “Aplicar” e aplique e isso deve mudar isso ali. Eu vou fazer o mesmo para os cinzas também. Lá temos nossas cores para o plano de fundo e texto e, em seguida, nossas cores de ação, que é basicamente a chamada para ações. Nossos fundos e outras coisas vão ser o material verde. Para o texto também, vou precisar do verde aqui também. Alguns dos textos realmente são verdes. Lindo. Uma vez que fizermos isso e então podemos voltar. Vou clicar no cabeçalho, clicar no design do lado direito. Então você pode ver agora quais cores eu realmente adicionei aqui. Veja nossas cores de tema. Eu posso ir em frente e deixá-los cair. Na verdade, vou usar a cor preta. Eu vou fazer o mesmo pelo corpo também. O mesmo para o rodapé. Lá vamos nós. Agora vou para o meu cabeçalho e clique duas vezes na imagem do logotipo. Vou clicar em “Alterar arte vetorial”. Vou clicar nos arquivos do meu site à esquerda e vou selecionar o design do logotipo, que criei. Boom, é muito rápido. Ele só carrega assim. Vou excluir esse menu lá. Vou para o botão mais. Vou adicionar um menu. Vou descer para o menu e pesquisar. Agora, o que eu quero fazer é adicionar um menu simples e vamos personalizá-lo mais tarde. Apenas este cabeçalho aqui, básico. Vou trazê-lo. Vou copiar. Certifique-se de clicar no cabeçalho cole-o dentro do cabeçalho usando o Control V. Agora você pode ver que tenho minhas páginas aqui. Agora eu preciso adicionar minha outra página também. Se eu for para páginas, certifique-se de adicionar uma página. Vou chamar isso de suporte, blog de equipe e suporte. Vou clicar no menu e clicar em “Gerenciar menu”. Agora você pode vê-lo, qualquer um deles está aparecendo, então eu preciso adicionar as outras páginas. Vou clicar em “Páginas do Site”. Vou clicar em todas as páginas. Verificamos isso e clicamos em “Aplicar”. Então eles devem aparecer aqui. Então, provavelmente, vou clicar em “Gerenciar menu”. Se eu precisar mover as coisas, você pode arrastá-las e soltá-las assim com muita facilidade. Vou ao Inspetor, descer para o texto e mudar a cor para branco. É por isso que não estava aparecendo. Podemos ver que a página selecionada será essa cor verde. Provavelmente posso mudar isso. Se eu for preencher a cor e passar o mouse, você pode ver que ele tem esse verde, mas talvez eu queira torná-lo cinza ou seja lá o que for, você pode mudar essas coisas. Na verdade, vou ir em frente e mudar minhas fontes também. Vou clicar nos estilos de cores do site. Vou à minha tipografia. Agora, vou basicamente mudar. Tenho todos esses estilos de personagens aqui salvos em nosso XD. Agora o que vou fazer, a fonte que estou usando é Space Grotesk. Vou clicar no lápis pequeno aqui. Clique na barra de pesquisa e digite Space Grotesk. Eles têm o que é realmente ótimo. Para este, deve ser ousado, o que é muito legal. Então também temos nossos parágrafos. Também temos nosso H2, que é 42 pixels para o primeiro H1, isso será 56. Vou clicar em “Aplicar”. Este é 40. Agora vai Space Grotesk. Vai ser ousado. Clique em “Aplicar”. Essa também será a cor verde. H3 é 24, cor negrita verde. Isso nos poupará muito tempo depois, então não preciso fazer isso manualmente. Vai salvar todos os nossos títulos e nossos parágrafos. Tenho parágrafos Space Grotesk também, que vai ser 16. Isso deve ser regular, o que é ótimo. Temos o parágrafo 2, que será um Space Grotesk 16 branco e se aplicará. Temos uma versão preta e uma versão branca. Então também teremos uma versão verde também. Dezesseis, digite Space Grotesk, clique em “Aplicar”. Agora temos todo o nosso estilo de personagem salvo aqui. Se precisarmos adicionar algo manualmente como o texto, por exemplo, irei para o Inspetor, clico no design, clique no texto. Você pode ver, obviamente, você pode descer e escolher a fonte daqui. Se eu digitar Space Grotesk, geralmente posso mudar lá. Se eu clicar no tema, ele terá todos os nossos estilos de caracteres salvos que acabei de fazer antes na biblioteca. Agora posso selecionar qualquer um desses. Se eu for o cabeçalho 3 ou o título 6, seja o que for ou o parágrafo 1, vai mudá-lo para aqueles, os estilos que eu defino como você pode ver. Agora, se eu quiser redimensionar, tudo o que vou fazer é arrastar a caixa para que eu possa torná-la muito larga ou aproximá-la. Vou descer para elementos. Vamos para o Quick Add. O que vou fazer é adicionar meu título. Vou clicar e soltar isso assim. Super fácil. Também vou adicionar um parágrafo e também adicionar um botão. O mais legal são nossos guias que você pode ver que eu liguei, então tudo se encaixará onde o configuramos. Muito legal. Só vou estender esta seção. Vou colocar outra seção, torná-la em branco. O que posso fazer é arrastar isso para baixo para trazer a altura. Vou clicar em Shift e clicar em tudo isso. O que você pode fazer é realmente selecionar pilha ou grupo. Se você empilhar, ele irá colocá-lo em basicamente uma pilha que a torna responsiva quando você ajustá-la. Como você pode ver lá, o que é muito legal. Adoro que a capacidade de resposta seja muito legal. Este texto, vou alterá-lo, este será um H1. Lá vamos nós. Quando você clica dentro da pilha, você só quer clicar novamente dentro. Você clica nos objetos certos. Traga isso à tona. Lindo, isso está parecendo bom. Vou derrubar isso assim. Clique duas vezes no texto. Cole isso assim. Vamos clicar duas vezes aqui. Você pode ver que temos nosso botão. Vou projetar esse botão. Vou mudar isso. Vamos para o Inspetor do lado direito e também mudaremos a cor. Os textos realmente precisam ser pretos. Está parecendo bom. Agora, botão. Eu quero realmente mudar os cantos. No inspetor, você quer ir para a terceira opção, diz cantos. Eu posso completar tudo. Em vez de arredondá-lo, vou colocá-lo em zero. Mas se eu colocar 100 pixels, você pode ver que ele se transforma em uma forma arredondada. Vou colocar 0 porque quero um retângulo plano lá. Você pode adicionar uma sombra que é legal. Podemos adicionar uma sombra como essa para o botão. Outra maneira de fazer isso é apenas adicionar uma borda. Só vou adicionar uma forma de retângulo básico. Vou mudar a cor dele. Um atalho se eu quiser trazê-lo para trás, posso pressionar Control e para baixo. Ela é ótima. Vou fazer a borda, a cor verde. No Inspetor, vou clicar no quadro na forma. Vou colocar a opacidade do preenchimento em zero por cento. Vou usar minhas teclas de seta aqui. Vou torná-lo um pouco menor. Para obter esse efeito, você pode ver como temos esse pequeno esboço. É basicamente um retângulo com uma borda, como você pode ver lá, o que eu acho muito legal. Eu só quero ter certeza de que eu pressiono Control G, mantendo pressionado Shift e selecionando esses dois, agora temos esse botão como um grupo. Vou clicar duas vezes no botão dentro do grupo e clicar com o botão direito do mouse no botão. Agora, o que você quer fazer, queremos transformá-lo em um ativo. Vou descer na parte inferior, diz Salvar como ativo. Vou clicar nisso. Vou chamá-lo de botão principal. Então podemos adicioná-lo para dizer que é isso. Também posso criar uma nova biblioteca também. Só vou clicar em “Adicionar”. Agora, se eu for para o botão mais e clicar em Ativos, ele deve estar dentro daqui. O que vou fazer agora é adicionar uma imagem. Vou arrastar e soltar uma imagem aqui. Vou clicar em “Alterar imagem”. Ele vai carregar minha biblioteca de mídia. Vou clicar na imagem do meu herói aqui e clicar em “Atualizar”. Lindo. Agora vou arrastar isso para que seja grande e ele se encaixa diretamente no final desta seção lá. Você pode ver que ele o escalou automaticamente, o que torna minha vida muito mais fácil. Agora vou adicionar minha segunda imagem, que vai ficar por trás dela. Um pequeno elemento de ícone aqui. Vou pressionar Control Down e trazer isso à tona. Você também pode clicar nesse pequeno botão de alongamento no canto direito e ele deve esticá-lo até a largura total da seção real. Se eu não quiser isso, posso simplesmente desligá-lo e escalá-lo como eu quero. Só vou trazê-lo para trás aqui. Posso usar meu Shift e estou tocando nas teclas lá apenas para manter esse efeito. Lindo. Acho que isso está muito legal. Também está começando a se parecer com o nosso design aqui. 7. Como criar a página inicial: Agora vou clicar em “Adicionar elemento”. Vou soltar um título aqui, e também queremos soltar o texto do parágrafo. Esta seção é bastante simples , mas para esta, precisamos realmente alterar a orientação do texto para centralizá-la. Vou clicar em “Editar texto” e em outras ferramentas de texto que você tem o alinhamento de parágrafo. Você pode ajustar o espaçamento entre linhas, também o espaçamento entre caracteres. Você pode fazer pontos e listas numeradas, e também precisa mudar a direção do tipo. Você tem a etiqueta de título também, e você tem um monte de opções lá. Para este, isso vai ser um H2. Vou apenas ir em frente e começar a copiar esse texto assim. Preciso alinhar esse texto ao centro, assim. Lindo. Agora, o texto do parágrafo deve ir aqui. Lá vamos nós. Excelente. Adicione dois por algum motivo. Vou clicar em “Editar texto” e me certificar de que estamos configurados para o branco. Às vezes você precisa clicar nele e, em seguida, você precisa clicar no parágrafo. Linda, assim. Vou clicar nele e depois escalar assim. Lindo. Agora eu quero adicionar um elemento aqui, então temos três pequenas seções aqui. Agora, o que posso fazer por isso, posso apenas trazer essa seção assim. Vou adicionar outra seção. Lindo. Agora, para este, vou clicar no repetidor e você pode ver que eles têm os três aqui. Vou clicar nisso e podemos ver que temos essas três cartas pequenas. Vou arrastar isso. Você pode ver que eles chamam de cartões, você pode fazer uma lista, você pode fazer um controle deslizante também, você pode fazer uma célula de grade, o que é muito legal. Vou mantê-lo apenas em cartões. Apenas controle Z isso e eu só quero ter certeza de que o layout está realmente centrado, bonito. Agora, para esses cartões, eu só quero que o fundo não seja nada. Vou desligar isso. Agora eu tenho que adicionar nosso título aqui. Vou colocar o título. Você pode ver como estou anexando, ele está repetindo, o que é realmente útil. Vou arrastar aqui e você verá a pequena caixa azul diz Anexar assim. Só vou clicar no parágrafo “Editar texto” rapidamente. Lindo. Agora vamos adicionar nossos ícones ao repetidor. O que vou fazer é ir para mais, vou dar forma. Em vez de fazer imagem, vamos fazer upload de um SVG. Vou clicar em Shape. Vou arrastar para aqui e vou anexá-lo, vou reduzi-lo um pouco. Em seguida, vou clicar em “Alterar forma básica”. Vou para os arquivos do meu site, e você pode ver que tenho as versões PNG, mas queremos usar as versões SVG. Vou clicar duas vezes. Então eu só vou clicar e alterar os outros também. Assim mesmo. Vou voltar ao meu projeto. Apenas certifique-se de que está tudo correto. Acho que isso foi o contrário. Vou seguir em frente e copiar e colar meu texto do design. Legal. Agora isso está parecendo bom. Se precisarmos estender o repetidor, podemos realmente torná-lo cada vez maior. Como você pode ver, podemos estendê-lo e o texto vai se ajustar. Obviamente, as formas estão realmente mudando, então provavelmente teremos que reduzir isso. Apenas esteja atento a isso se você estiver jogando com a escala ou tudo mais. Passando para a próxima seção, vou clicar em “Mais Adicionar nova sanção”, e esta será uma seção em branco. Agora, para este, vou fazer um repetidor novamente. Vamos para o Quick Add e vou clicar em “Repetidor”. Vou me certificar de que está no meio quando eu adicionar um título também. Para este, preciso ter certeza de que ele está centralizado, o texto, vou centralizar isso e isso deve ser, eu acho que um H1 também. É um H1 ou H2. Então, vamos criar esta seção aqui assim. Lindo. Vou clicar no item para que você possa ver que você tem os diferentes itens. Vou abrir minhas camadas. Vou renomear essas seções para poder ir depoimentos, feições, introdução, basta clicar duas vezes para editar camadas aqui. Sei o que está acontecendo. Uma vez que eu tiver meu repetidor, o que vou fazer é ir ao Inspetor, clicar no design, preencher o plano de fundo e torná-lo esta bela cor cinza, cinza escuro que temos lá, e então apenas clique fora dele. Agora, o que vou fazer é obter esse visual que tenho aqui é que preciso ter uma imagem, algum texto, e temos que colocar esse pequeno ícone de tick também. Vou começar e vou colocar uma imagem aqui, arrastá-la e soltá-la, e devemos ver anexar. Nós temos isso. Então o que vou fazer é mudar a imagem. Vou selecionar a pessoa lá. Então eu vou brincar com este também, mudar este. Agora, e se eu quisesse terminar isso? Eu deveria ser capaz de ir para a imagem no clique esperado nos cantos e talvez vamos fazer 20 pixels, ver o que acontece. Isso é ótimo. Vamos fazer 100 pixels. Você pode vê-lo classificar um pouco redondo, mas o que eu quero fazer é que eu quero trazer isso. Parece mais um círculo. Vamos torná-lo um pouco maior. Acho que vamos ir 500 pixels e isso deve arredondar completamente isso também. Agora vou adicionar algum texto. Vou trazer a redação de texto de parágrafo aqui, só vou garantir que ele seja dimensionado corretamente. Agora vou selecionar o Parágrafo 2 quando adiciono mais texto também. Caixa de texto Litte. Este, vou colocá-lo no Parágrafo 3. Finalmente defini o tamanho da imagem lá. O texto está encaixado à direita. Se você vir no lado direito o posicionamento, eu encaixo isso na parte superior e, em seguida, as margens aqui são 120 pixels. Se eu precisar ajustar isso, posso ajustar isso na medida em que o espaçamento estiver bem. Então eu consegui esse comprador verificado, só preciso obter um ícone, então vou pegar o botão de mais. O que podemos fazer é clicar em “Forma”. Obviamente, podemos importar nossas próprias formas, mas vou mudar a forma básica. Você pode filtrar certas formas. Se eu clicar nisso, posso fazer arte vetorial. Você também pode fazer categorias. Vou pesquisar por ícones. Então eu vou mudar a categoria e você obtém um monte de ícones muito legais. Você pode ver que é realmente incrível. Vou apenas digitar a marca de verificação. Vamos ver o que aparece. Legal. Nós temos isso. Vou clicar duas vezes sobre isso, deve adicionar isso à página. Vou reduzir isso. Vou apenas ir para a minha cor de preenchimento e mudar isso para a nossa cor verde aqui. Vou arrastar isso. Vou segurar o Control Alt só para tocá-lo, e vou escalá-lo para baixo. Amplie um pouco. Você pode ver que meus guias encaixam no lugar. Vou apenas mover o Comprador Verificado um pouco para a direita. Não muito. Boom, lá temos isso. Você pode ver aqui que este foi uma verificação de campo, mas isso também funcionará. Vou clicar nele. Posso ver se queria ajustá-lo, mas acho que vou deixar assim. Lindo. Agora vamos passar para nossa próxima seção. Mas primeiro eu só quero adicionar rapidamente a borda. Você pode ver nesta foto que temos um pequeno golpe leve. Temos o tamanho da borda de um e é de cor cinza aqui. Vou clicar no “Repetidor”. Eu clico no botão “Design” e queremos clicar em “Borda”. Agora, o que vou fazer é ir para a Borda, clicar no botão cinza e fazer o pixel, um pixel. Você pode ver isso em torno toda a caixa repetidora real. Você pode ver isso. Mas eu quero fazer isso sobre os quadrados reais lá, as cartas. Vou clicar no “Item” e, em seguida, vou alterar a cor cinza do item e um pixel. Certifique-se de que isso seja 100%. Você pode ver que agora ele tem isso. Se eu clicar em “Repetidor”, voltarei para Border e simplesmente desligue-o, coloque-o em zero e confira. Agora temos nosso limite um pixel nisso. Super fácil de adicionar, bordas agradáveis. Isso só faz com que ele apareça um pouco mais. Lindo. O que vou fazer é adicionar outra seção. Vamos manter um em branco. O que posso fazer é simplesmente copiar essa seção inteira ou copiar esse texto. Se eu for aqui e depois pressionar “Colar”, você pode vê-lo apenas copia toda a seção. Essa é uma maneira de acelerar as coisas. Se eu quiser me livrar desta seção, posso clicar com o botão direito do mouse e clicar em “Excluir”, e ela deve se livrar dela. Agora o que vamos fazer é que vamos apenas ir para xt aqui. Vou copiar e colar meu texto. Este texto será um H1 e copiará esse texto. Vou encaixá-lo para o topo. Altere o encaixe. Lá vamos nós. Agora vamos ter esses quatro ícones. Em seguida, botão Download. Para isso, o que vou fazer, vamos para o botão mais e vamos selecionar o “Layouter”. Vou colocar colunas como essa. Temos quatro colunas. Traga isso assim. Vou escalar isso, nesta seção. Amplie um pouco. Vou arrastar isso para baixo. Segure Control e Alt para anexá-lo à seção. Não sei o que aconteceu com isso. Deveria ser assim. Vou falar disso . Legal. clicar em “Adicionar item”. Preciso adicionar os objetos a isso agora. O que vou fazer, estou olhando para mais e depois vou adicionar forma, arrastá-la e soltá-la na caixa lá, e vou mudar a forma básica. Vou para “ Arquivos do Site ” e, em seguida, vou clicar no SVG que temos aqui do Chrome. Clique em “Adicionar à página”. Só vou escalar isso aqui. Assim mesmo. fazer o mesmo para as outras caixas também. Lindo. Agora vou clicar no “Layouter”, vou para o lado direito. Em seguida, vamos mudar a cor de fundo ou simplesmente desativá-la. Você pode ver isso. Só vou desligá-lo. Vou abrir minhas camadas, então vou me certificar de que selecionei o item. Só vou arrastar. Vou deixá-lo no design lá. Arraste isso também. Boom, e lá vamos nós. Como você pode ver lá. É aproximadamente o tamanho, só precisa ser consertado, então as colunas. Vamos para o espaçamento, vamos ao Item. Podemos ajustar o preenchimento. Se precisarmos adicionar mais preenchimento, você pode digitar algo assim no item. Vou colar o botão aqui. Como você pode ver, vou rolar para baixo. Só vou me ajustar. Eu não sabia o que aconteceu com isso. Vou apenas ajustar isso rapidamente. Temos nossa página pronta. Agora vamos adicionar o rodapé. Vou para COMPOSITIONS descer para NAVEGAÇÃO e clicar em “Rodapés”. Você pode ver que temos alguns aqui. Para mim, acho que quero ir com este porque é semelhante ao que queremos. Vou clicar nisso. Agora, se eu diminuir um pouco, vou me certificar que o rodapé está na parte inferior, então vou clicar duas vezes, renomear o rodapé e arrastá-lo para a parte inferior. O que posso realmente fazer é definir como mestre e definir como rodapé, mas esse rodapé já está na parte inferior. Vou clicar nisso e vou clicar em “Excluir”. Vamos selecionar este rodapé e tentar fazê-lo novamente, Definir como mestre e clicar em “Rodapé”. Tivemos que excluir o rodapé antigo para tornar este um rodapé. Agora você pode ver que temos nosso rodapé aqui, e eu vou seguir em frente e usar o texto aqui. Este será o parágrafo 2 e o que eu posso realmente fazer é entrar, copiar, clicar duas vezes no cabeçalho em que cliquei na arte vetorial do logotipo. Vou colá-lo aqui embaixo. Lá vamos nós. Temos o logotipo pop-up. Vou colocá-lo nesta pilha. Vou mover o texto para cima assim, mantendo-o bem simples. Vou mover isso para cima. Vou para o plus, então vou entrar em contato. Você vê lá que eles se inscreveram, eles têm formulários de contato. O que eu posso realmente fazer é clicar nisso. Vai soltar essa lista. Posso trazer isso aqui. Eu tenho a chave de pilha. O que vou fazer é trazê-lo para a pilha. Vou clicar no inspetor. Vou editar o design desse campo. Vou fazer dessa cor cinza, vou desligar a borda do texto. Vou torná-lo branco. Também poderia torná-lo verde. Quero deixar isso branco também, o tamanho da fonte do parágrafo 2. Vou fazer isso como se você pudesse alterar as cores de entrada. Você pode alterar todas essas configurações realmente. Eu só vou trazer escala que baixo dentro desse cabe dentro da caixa. Esta é a mensagem de sucesso. Se eu quiser visualizá-lo, temos nossa mensagem de sucesso lá. Agora isso aparecerá assim que você clicar no botão Entrar. Não sei se você pode realmente adicionar o texto como eu fiz aqui. Por enquanto, vamos deixar assim. Vou excluir o título do campo de título, então não precisamos disso e quero tirar o botão necessário. O que você vai fazer é clicar na pequena engrenagem e editar essas configurações. Você pode adicionar regras condicionais, se quiser. Quero adicionar uma regra para o formulário Wix, agora podemos colocar alguma mensagem. Posso desligar isso. Posso transformá-lo em um link para um URL externo, se eu quiser. Você pode até adicionar um download também, mas você precisa atualizar para isso, etc. Você tem um monte de coisas diferentes aqui. De qualquer forma, vamos passar para a pilha aqui. Vou arrastá-lo para cá. Vou adicionar as páginas. Temos download, este será o parágrafo 2. Vou adicionar algumas das margens. Vou me certificar de que você selecione o texto e temos 15 pixels. Vou para Control C, Control V. Vou para o meu painel de camadas. Vou clicar com o botão direito do mouse. Vou duplicar. Você também pode pressionar Control D também, e ele deve adicionar o texto dentro de lá. Certifique-se de encaixá-lo para a esquerda e para cima. Mais uma vez, 15 pixels. Selecione Controle de camada D e até a esquerda. Então eu vou editar. Temos um blog e suporte. Então eu tenho essa pilha. Vou pressionar Control C, Control V e colá-lo, e então vou encaixá-lo assim. Muito bom e vou excluir os outros. Doce, lá temos isso. Isso precisa ser um pouco mais assim. Vou mudar, deixar isso lá e teremos Instagram, Facebook e Twitter. Vou para o botão mais nos elementos. Na verdade, podemos usar as mídias sociais. Vou descer para encontrar o caminho certo. Você quer ir para incorporar e socials, e você vai encontrar laços sociais. Você pode vê-lo assim. Você pode escolher o estilo que quiser. Vou clicar neste estilo. Só vou movê-lo para cá. Queremos empilhá-lo nessa barra assim. Agora posso definir os links sociais. O que você quer fazer é clicar nele, clicar em Definir links sociais. Posso adicionar ícones se quiser. Mas vou excluir o TikTok. Só acho que são Instagram, Facebook, Twitter. Instagram, Facebook, Twitter tudo bem. Vou excluí-los. Posso clicar na engrenagem também. Você pode alterar esses itens para o Twitter e eu posso clicar no link aqui, e então posso colocá-lo na minha conta do Instagram. Agora eu fui em frente e baixei os ícones sociais que eu quero. Como você pode ver aqui. Agora o que posso fazer é mudar esses ícones. Vou clicar em Adicionar. Cheguei aos arquivos do meu site. Vou adicionar tudo isso à galeria. Eu fui em frente e adicionei esses ícones. Posso excluir esses aqui. Twitter clique em Concluído e ele deve adicionar esses ícones e, se necessário, alterar o layout. Você pode clicar na camada e clicar em horizontal ou vertical. Eu quero fazer uma foto para esta, posso baixar o tamanho do ícone para baixo, bem como talvez 25 espaçamento. Acho que 10 pixels devem estar bem. Eu só vou manter isso fácil, e vou excluir esse texto e apenas manter os ícones em vez disso, apenas mantendo fácil e, se eu precisar alterar os links, posso clicar em Links Sociais e posso colar links lá dentro. Lindo, está bonito. Estou muito feliz com isso. Vou clicar em Visualizar. 8. Como criar uma página de equipe: Agora, vamos criar a página para adolescentes que eu criei aqui. Você pode ver que estou no XD e criei essas belas imagens de avatar da equipe. Obviamente, essas imagens eu saí do Unsplash e criei um gradiente no Photoshop. Você pode ver no Photoshop eu peguei as imagens e adicionei esse gradiente e alguma exposição e o filtro preto e branco na parte superior para fazer com que essas imagens pareçam bonitas e estouradas. Mas nós basicamente os fazemos na marca de forma muito simples, e temos uma pequena seção de empregos aqui, vamos fazer alguns desses cartões e, em seguida, também gostamos dos benefícios. Vou te mostrar como projetar isso. Vamos entrar no Editor X. Ele é a página da equipe até agora, basicamente acabei de criar uma nova página e já recebi o texto da página inicial aqui. Só vou construir a partir disso. Vou me referir ao arquivo exe do meu editor, para que eu possa simplesmente copiar e colar o texto. Vou fazer isso imediatamente. Só vou copiar e colar o texto aqui. É por isso que é sempre bom pré-projetar seu site para que você possa simplesmente copiar e colar, tornando-o super fácil. Vou escalar o tamanho da seção. Só precisa ter certeza de que isso está encaixado. Vou ao meu inspetor e encaixar isso no topo, não na parte inferior, e então eu quero escalar o fundo assim. Ótimo, super legal. Agora, para este, vou usar o repetidor novamente, que é uma das minhas ferramentas favoritas. Podemos usar os pré-fabricados, se quisermos. Mas para isso vamos fazer um personalizado, então vou arrastar e soltar o repetidor lá dentro. Vou para minha ferramenta inspetora e vou colocar a largura em 80%. Vou arrastar isso e me certificar de que ele aparece, adicionar linhas aos meus textos à esquerda, que está muito bem. Agora, o que vou fazer é precisar adicionar minhas imagens. Eu tenho que ir além adicionar rapidamente e depois vou para a imagem e arrastar isso para lá, vou escalar isso, esticar a imagem, vou clicar em alterar Imagem e depois vou para arrastar minhas imagens para isso. Selecione-os, coloque-os lá. Vou selecionar minha imagem principal e só quero ter certeza de que a primeira, vou clicar nesse clique em atualizar e, em seguida, ela deve ser atualizada lá. Linda. Vou mudar essa imagem, e quero realmente estender o repetidor agora porque precisamos de uma sexta série. Vamos para as configurações. Vou clicar no repetidor, vou para minhas camadas e me certificar de que clicando no repetidor aqui. Você pode ver isso diz cartões. O que eu quero fazer é clicar em gerenciar itens. O que você pode realmente fazer é duplicar. Posso duplicar o item 3 e, em seguida, farei isso mais algumas vezes, e ele deve criar automaticamente o mesmo estilo e design assim. Agora, por algum motivo, eu só tenho que estender a altura disso porque estava esbarrando no texto T. Eu só vou derrubar isso. Assim mesmo. Super fácil. Linda. Agora, tudo o que vou fazer é apenas clicar duas vezes ou clicar em alterar imagem e seguida, selecionar essas outras imagens agora, e a última lá, boom, excelente. Parece super incrível. Agora, o que vou fazer é adicionar algum texto. Eu vou para o título, e preciso manter o controle, e também ele realmente o anexa dentro do repetidor real lá. Quero fazer cerca de 18 pixels da parte inferior. Acho que isso funcionará. Vou clicar em editar texto e, em seguida, o que vou fazer é preciso fazer o texto em branco. Preciso deixá-lo no H2 e vou mudá-lo para branco, assim. Acho que isso funciona. Linda. Agora, vou copiar e colar os nomes dos membros da equipe. Agora, todo o texto está lá. Agora, se eu colocá-lo na visualização móvel, podemos ver que tudo está lá, vamos ter que corrigi-lo mais tarde e alterá-lo para torná-lo responsivo, mas por enquanto está parecendo bem legal. Eu só vou ajustar o dimensionamento nesses blocos porque, na verdade, ele vai ser em torno de 450 pixels. Vou para minha ferramenta inspetora, e preciso ir até a altura. Deixe-me ver isso. Vou mudá-lo para 450. Então, lá podemos ter uma visão melhor disso. Agora, vou clicar em pré-visualizar mudança muito rápida para o tamanho certo que estamos usando, e legal, para que a imagem esteja boa, só tenho que me certificar de que o tamanho não está fazendo isso. Vou clicar no repetidor e quero ter certeza de que ele também está encaixado na parte superior, não na parte inferior. Eu desligo isso. Vou arrastar isso para baixo, encaixá-lo no lugar, garantir que você deixe um pouco de espaço entre o título lá. Acho que está melhor. Legal. Excelente. O DNS está ótimo. Estou feliz com isso. Agora, vou passar para minha próxima seção. Temos algumas mensagens aqui. adicionar um título novamente. Vou soltar isso lá, arrastar até adicionar a essa seção, e devemos torná-la a H1. Acho que isso funcionará. Vou mudar a largura também, vou 50 por cento. Lá vamos nós. Linda. Arraste-o para cima a 50 pixels da parte superior, envie para isso, também vou arrastar a parte inferior dessa seção para expandi-la. Linda. Agora, temos algumas caixas, então isso vai ser um repetidor novamente. Bom repetidor. Ferramentas de layout, repetidor, e vamos arrastar e soltar este assim, e eu vou fazer a largura 80%. Para este, a altura disso é de cerca de 300 pixels. Vou me certificar de selecionar o item, e vou apenas usar 300 pixels para tornar isso mais quadrado, e vou clicar no design e tornar o fundo a cor cinza escuro que temos aqui, e também ver se podemos adicionar uma borda lá. Legal. Temos a fronteira em andamento. Temos um bom conjunto de fronteiras que criamos. Agora, o que vou fazer é adicionar algum texto. Vou colocar um título lá, vamos deixar um parágrafo também, e provavelmente vamos precisar mais alguns parágrafos também. Vou clicar em editar texto e selecionarei a versão em branco. Lá vamos nós, vou apenas ampliar novamente, e vou apenas copiar o texto daqui, vou arrastar isso para fora, este vamos fazer H2 e vamos torná-lo branco, e só temos que dimensionar o largura lá. Não estamos cortando o texto. Temos o designer visual, temos esse texto aqui, e também vamos torná-lo o parágrafo verde. Vamos arrastá-lo para cima, também vou arrastar isso um pouco para o lado, 25 pixels das bordas. Agora, vou adicionar outro parágrafo aqui. Vou colar isso, e então vamos selecionar o parágrafo branco. Certifique-se de que ele se encaixe no lugar, lindo. Agora temos alguns bons carrapatos cinza aqui pelo salário. Eu poderia copiar esse texto aqui assim. Agora este, eu não achei que eu tivesse a cor certa para isso. Vou selecionar a versão preta e depois fazer essa cor cinza claro. Vou falar disso. Linda. reduzir isso. Então vamos adicionar um botão ao canto aqui, legal. Vou clicar em, Alterar texto, Aplicar agora. Vamos para o botão Design mudar o plano de fundo para zero por cento de opacidade. Vamos adicionar uma borda. Essa borda vai ser, digamos apenas dois pixels e ficará verde, linda. Agora eu realmente não quero isso arredondado, então vou desligar a redondeza e, em seguida, boom, temos nosso quase exatamente o mesmo design que criamos aqui como você pode ver lá. Esse botão, eu posso deslocá-lo para a esquerda. O texto também precisa ser verde na verdade. Vou para o design, clicar no texto, alterar a cor, clicar com o botão esquerdo na cor do tema. Boom, temos nosso fundo lá. Linda. Agora, o que fazemos é apenas substituir o texto dos outros pelo que eu fiz aqui e, em seguida, terminamos para essa pequena seção também. Linda. Agora, para a próxima seção. Vou pressionar o plus novamente, vou escolher a seção em branco. Vou para minhas camadas e apenas nomear esta seção Benefícios. Este é Jobs, e isto é, eu só vou chamar isso de tiros da equipe. Gosto de ter as seções chamadas arrumadas, bonitas. Agora vou descer. Mais uma vez, mudaremos a cor como de costume para a cor preta. Vou duplicar esse texto e colocá-lo nesta seção aqui. Certifique-se de pressionar Control C e depois Control V apenas para copiar e colar, isso deve funcionar. Deixe-me encaixá-lo no lugar, pixels fixos. Eu só vou escalar a altura também. Temos algum texto aqui. Posso copiar esse texto, colá-lo aqui, deve ficar bem. Eu só queria mudar o texto. Eu só quero centralizar esses textos assim. Lá vamos nós, lindo. Agora este tem um repetidor semelhante a este. Vou copiar este repetidor. Vou colá-lo. A coisa legal é realmente duplicar essa coisa toda, o que torna isso super fácil. Para este, na verdade, não teremos antecedentes. Vou arrastar a opacidade e ela só terá uma borda de pixel de ponto, como você pode ver lá. Agora, o que vamos fazer? Vou excluir o texto principal e me certificar de que você o faz da primeira caixa e, em seguida, ele o exclui de todas as outras caixas porque é um repetidor. Vou excluir isso, ele tem esses ícones, ele tem esses ícones, o H3 ou H2 e, em seguida, o texto do parágrafo. Posso excluir isso, também posso excluir o botão e acho que estamos prontos para ir. Para este, vou editar o texto. Vou H3. É um pouco ousado, mas vou desligar a ousadia. Excelente. Vou dimensionar a largura do contêiner lá. Vou arrastar isso para o lado, o que é legal. Provavelmente cerca de 40 pixels ou 50 pixels. Só vou copiar e colar esse texto aqui. Então agora vou ver o tamanho dessas caixas. A altura é em torno de 210. Vou mudar isso. Clique no Item e vou usar 210 pixels. Arraste o texto e, em seguida vou centralizar tudo. Se você segurar Shift e selecionar por eles, eu posso apenas tocar em meu controle Shift e as teclas de seta e vou tocá-lo assim. Linda. Vou consertar as outras caixas. Eu só quero adicionar meu ícone aqui. O que posso fazer é ir para o plus. Vou clicar em Forma. Vou segurar o Control Alt, certifique-se de que ele clica e encaixe exatamente assim. Vou clicar em Alterar Forma Básica. Já fui em frente e os carrego como SVGs e PNGs, por precaução. Agora eu tenho que adicioná-los rapidamente ao gerente. Vai ser ordenado por data. Você pode ver que ele será carregado como SVGs. Isso vai realmente mostrá-los no gerente, eles são lindos. Quero clicar neste. Então, como já fiz no XD, tudo o que preciso fazer é exportá-lo e muito fácil fazer isso. Agora, para mantê-lo muito simples, posso segurar Control Alt e endereçar, duplicá-lo e colá-lo. Na verdade, ele começa a colá-lo em todas as caixas lá. Agora está dentro do repetidor. Também precisamos clicar em Gerenciar itens. Agora o que vou fazer é clicar nos três pontos e duplicá-los como fiz da última vez. Agora tenho seis caixas assim. O que vou fazer agora é apenas ter certeza de que estou selecionando o item certo. Clique na arte vetorial. Acho que há uma duplicata lá. Vou mudar a arte vetorial. O próximo é o de saúde. Então terminamos. Posso clicar em Visualizar muito rapidamente. Então podemos ver como ela se parece com a página da equipe, ela tem a animação da coisa original. Acho que devemos adicionar um pouco de animações para que pareça melhor. O botão tem o efeito de passar o mouse que parece realmente incrível. Os textos de alguma forma foram para a esquerda, mas você tem essas caixas legais e talvez eu pudesse adicionar uma coisa de pairar lá. O que vou fazer, está em Editar. Só vou verificar esses textos, garantir que ele esteja encaixado no topo. Você pode ver que estou desligando o encaixe e certificar de que ele está encaixado no topo. Vou clicar nos cartões aqui e nos itens, e vamos ver se podemos adicionar uma interação do mouse. Agora, o que eu quero fazer é, vamos fazer um efeito de crescimento. Vou fazer 0,5 segundos. Facilidade e relaxe, isso é lindo. Você pode ver que é o que parece quando você coloca o mouse sobre ele. Vou clicar em pré-visualizar e ver como ela se parece. Você pode ver se você coloca o mouse sobre ele e agora todos esses itens terão o pequeno efeito de animação, acho que isso é bem legal. Parece muito legal, adoro isso. Temos um efeito de pairar um pouco lá. Agora, para este, posso clicar no repetidor. Eu tenho o repetidor selecionado. Vou me certificar de que clico na direita, repetidor e, em seguida, clique no item porque não podemos adicionar uma animação ao repetidor, só podemos fazê-lo no item real. Vou clicar no item em Hover. Agora, para este, podemos adicionar outra coisa. Vamos com o flutuador. Farei a mesma coisa, faremos como 0,5 segundos. Facilidade para entrar e sair. Como você pode ver, é isso que ele fará. Se eu clicar em Visualizar, agora você pode ver o que ele está fazendo. Está fazendo isso, é bem arrumado. Deixe-me consertar isso. Impressionante, eu gosto disso. Adiciona um pouco de efeito, legal. Todas essas interações, basta adicionar mais detalhes no site e apenas fazer com que pareça 10 vezes melhor. Por fim, adicionaremos uma animação a esses itens. Acabei de ir para as Camadas, clicar no Item, então ele se aplicará a todas elas. Clique no relâmpago novamente. Vou adicionar interação com o mouse. Agora este, vamos fazer outra coisa. Vamos tentar avançar. Vamos ver o que este faz. Facilidade para entrar e sair. Acho que vou, vamos tentar uma pia. Jogue isso e vai para baixo, isso não é muito ruim. Também podemos girar. Acho que vamos ficar com a rotação. Para este, vamos deixá-lo em 0,3 segundos. Faremos facilidade para entrar e sair. Vou clicar em Visualizar. Clique na visualização da área de trabalho, basta dimensionar isso para que fique no tamanho certo do design para e, em seguida, agora ele gira um pouco. Isso é bem arrumado. Gosto disso, muito incrível. Linda. É assim que a página da equipe é feita. Sempre posso voltar e adicionar pequenos toques e acabamentos, mas acho que está muito bem. 9. Tornando a resposta: [MÚSICA] Quando você estiver satisfeito com seu site, sua página, seja lá o que for, então queremos ir para o outro ponto de interrupção e começar a torná-lo responsivo. Vou clicar no ponto de interrupção do iPad, para que possamos ver algumas coisas fora do lugar. Você tem que consertar isso e também no celular também. Toda vez que você fizer uma alteração em um ponto de interrupção superior na resolução mais alta, ele também deve fazer a alteração nos baixos. Se você estiver trabalhando no iPad, ele deve atualizá-lo no celular. Vou clicar aqui, depois trago isso à tona. Só queremos ter certeza de que tudo se encaixa muito bem. Eu tenho que escalar as coisas para que se encaixem, então isso é totalmente legal. Se eu fizer uma alteração lá, você pode ver que, na visualização da área de trabalho, ela não deve enchê-la. Nesta visão, na verdade , vou adicionar um menu de hambúrguer. Para isso, o que eu posso realmente fazer é esconder as camadas. Quero clicar com o botão direito do mouse no menu e posso clicar em “Não exibir”, e isso deve ocultar isso. Se eu for para a visualização da área de trabalho, você pode ver que ela ainda está lá. Se você quiser ocultar algo, basta clicar com o botão direito do mouse na camada e clicar em “Não exibir”. Se você quiser exibi-lo novamente, basta clicar em “Exibir” e ele deve ser exibido assim. Mas se voltarmos para a outra visão, ela não deve revelá-la. Em um celular, ele também não deve mostrá-lo. Então o que podemos realmente fazer é ter um menu de hambúrguer já aqui e vou mudar a cor para branco. Você pode torná-lo verde, se quiser. Isso funciona. Vou escalar um pouco, então 40 pixels. O que podemos fazer com este menu de hambúrguer é obviamente podemos usar isso. Vou clicar em “Abrir menu”. Quando alguém clica nele, é assim que vai parecer. Está em um contêiner. Posso mudar o plano de fundo, então se eu quiser fazer verde ou preto, seja lá o que for. Acho que vou fazer dela uma cor esverdeada. Esse é o nosso verde principal. Então eu vou clicar nisso e o texto, ele pode ser preto, tudo bem. Posso tornar o texto um pouco maior se eu quiser, talvez como 24 pixels. Acho que está tudo bem. Se eu apenas clicar fora disso, você pode ver, se eu clicar em “Visualizar” e se eu clicar no menu de hambúrguer você poderá ver como funciona. Já está embutido, torna super fácil usar isso. O que vou fazer aqui é ajustar o tamanho. Temos o texto T. Podemos editar um texto. Podemos diminuir o tamanho, ou o que eu posso realmente fazer é trazer isso assim. Também vou verificar a visualização da área de trabalho. Vou ver que não está causando nenhum problema lá. Temos essa imagem. Este eu posso ampliá-lo. Este, eu não sei por que estava lá, então vou trazer isso para lá. Vou para o meu layout. Agora vou apenas mudar a altura. Como você pode ver, vou colocar 300 pixels lá. Lindo. Agora, esse texto e esse fundo devem estar abaixo. Só vou trazer isso. Remova isso. Vou desenhar a caixa, então 360 pixels. Vou arrastar isso e, em seguida, o botão Download. Está parecendo bom. Agora este, vou deixar o texto mais largo, a caixa lá. O mesmo vale para estes no repetidor. Vou entrar nas camadas. Certifique-se de selecionar o texto. Eu posso realmente aumentar o tamanho do repetidor, então, se eu quiser arrastá-lo para fora, ele deve corrigir os problemas lá. Quero clicar no texto e posso brincar com as margens. Vamos 250, e você pode ver que ele adiciona um pouco mais de espaço. Lindo. Este também, vou adicionar alguns pixels nas margens. Eu não acho que isso esteja funcionando. Vamos clicar no repetidor. Arraste isso para a borda. Vou adicionar um pouco de preenchimento por cima. 50 pixels, isso funciona. Então eu vou fazer isso em uma coisa de uma linha, então vou arrastar isso para fora e arrastá-lo um pouco como cerca de 28 pixels. Lindo. Parece muito melhor. Agora podemos ver aqui esse texto está um pouco recheado, então vou escalar isso. Arraste-o para baixo. Lá vamos nós. Isso consertou isso. Tem um tamanho demais então vou ajustar o tamanho, as margens na parte superior ou torná-lo como 90 pixels. Lá vai você. Lindo. Então este, podemos brincar em torno da largura. Quero colocá-lo em 70%. Só vou verificar a visualização da área de trabalho. Lindo. Não está fazendo nenhuma alteração lá. Agora vou clicar no ponto de interrupção móvel possamos ver isso. Você pode ver o máximo. Se aumentarmos a escala, será 720 e, em seguida, o menor será 320 como podemos ver isso. O celular será muito pequeno. Agora, você pode ver que vamos ter que fazer alguns ajustes novamente também. Vamos editar o texto e alterar o tamanho para 40. [MÚSICA] Agora, depois de fazer tudo isso, tudo deve caber no tamanho. Essa é a visualização do iPad e, em seguida, também o PhoneView também. Basta ajustar o dimensionamento. Basicamente, você apenas vai para o tamanho, ajusta o fluido e depois ajusta a largura para muitas coisas. Se for um repetidor ou um cartão ou um layout, basta alterar o layout para um vertical. Normalmente, quando você clica com o botão direito, eles têm configurações , por exemplo, os cartões tinham um ListView. Mas é basicamente tudo sobre ajustar o texto certo e torná-lo bonito. Então é isso. Agora, uma vez que você estiver satisfeito com isso e você sempre pode clicar em “Visualizar”, mas se quiser publicar, basta clicar no botão “Publicar”. Ele lhe dará um link do Editor X. Você pode ver aqui que eu já defini um link para isso e posso clicar em “Exibir site”. 10. Como adicionar animações: Vou mostrar a você como adicionar interações em animações. O que você quer fazer é selecionar uma seção. Vou selecionar minha seção Herói aqui. Como você pode ver, ele está selecionado. Vou para o lado direito do Specter, clicar no raio, e vou clicar em “Adicionar interação do mouse”. Agora, o que eu posso realmente fazer é adicionar uma interação personalizada, então vou clicar nesse botão lá. Agora, ele lhe dará algumas instruções para configurar o tempo de interação, começar a fazer alterações de layout e design. Você pode definir o estado do mouse ao mouse sobre a carga inicial do site. Posso desligar o tempo. Por exemplo, se eu mover isso talvez para cima assim, e talvez movamos isso para fora da tela. Vou clicar em “Concluído”. Agora, você pode ver se eu voltar para a Interação Hover, ele tem os segundos lá. Então eu posso clicar nisso e posso alterar os segundos. Talvez você queira que ele seja 0,6 e queremos facilitar ou entrar e sair. Tudo bem. Podemos mudar isso. Este eu vou fazer 0,6 também. Agora, você pode ver agora se eu clico em “Jogar”, aquele local onde eu coloquei, ele usará esse movimento e o derrubará. Então você pode ver que eles são basicamente encaixes no lugar realmente facilmente. Vou clicar em “Concluído”. Agora, se eu clicar em “Visualizar”, e eu vou alterar a visualização, você poderá ver isso, como ela funciona. É tão fácil. Quando você passa o mouse, está fazendo isso. Se eu voltar para Editar, na verdade não quero que o mouse fique no texto, quero que seja um estado inicial, então deve estar nisso. Vou clicar em “Concluído”. Lindo. Agora vou clicar no botão. Vou adicionar uma interação personalizada. Para o botão, vou fazer disso um estado de focalização. Vou fazer o fundo, podemos torná-lo mais escuro. Queremos torná-lo verde escuro. Isso vai ser fácil. Eu vou deixar 0,3, na verdade. Vou clicar em “Jogar”. Vou clicar em “Concluído”. Em seguida, vou clicar em “Visualizar” apenas para garantir que a visualização esteja correta. Agora, você pode ver como eu pairo sobre isso , está entrando em vigor. Simplesmente fazendo essas pequenas interações, faz muita diferença. Isso torna seu site muito mais divertido. Você também pode adicionar coisas também. Vamos para o repetidor. Vou clicar na arte vetorial por si só, e posso realmente fazer uma animação apenas na arte em si. Então, basta clicar duas vezes dentro, certifique-se de que você está nas camadas dentro do objeto e você deseja clicar em “Animação”. Agora, posso adicionar animações simples como essa em vez de adicioná-las a toda a seção. Eu posso flutuar, posso virar, o que você quiser fazer. Há tantas coisas que você pode fazer: girar, revelar, deslizar. Gosto do deslizamento, então vou clicar em “Deslizar”. Posso clicar em “Personalizar”. Assim, posso mudar a direção, a distância também, posso mudar isso, a duração, o atraso e apenas animar pela primeira vez. Então eu clico em “Jogar”, você pode ver isso. Se eu quiser aumentar a distância, vamos fazer isso como 150 pixels de duração, vamos 1,7 duração. Então podemos jogar isso. É um pouco lento demais. Lá vamos nós. Agora temos uma animação personalizada. Quando você o seleciona, você pode ver que é azul, para que você possa ver que está animado. Agora podemos fazer o mesmo. Você pode ver porque é um repetidor, está aplicando a mesma animação. Então, se eu apenas atualizar, você pode ver que é assim que ele paira. Você pode adicionar animações a textos, ícones, qualquer uma das camadas, e é assim que você adiciona esses pequenos efeitos e animações legais. 11. Instalando aplicativos do mercado: [MÚSICA] Vamos no canto superior esquerdo e clicar no ícone do App Market. Você pode ver que ele o levará ao mercado de aplicativos em casa para as páginas. Você receberá recomendações, obterá o que há de tendência agora, você terá algumas soluções de negócios lá, algumas soluções pagas, algumas coisas são gratuitas, algumas coisas também são testes. Você foi feito pelo Wix. Se você quiser adicionar uma galeria, você pode adicionar grupos de fóruns Wix, lojas, até mesmo reservas, isso é comentários extras, etc. Você pode filtrar por escolhas de equipe, aplicativos mais novos, há 70 coisas diferentes que você pode na verdade, adicione. Se você quiser adicionar, talvez vá para coletar leads. Podemos ver, podemos adicionar Formulários ou pop-ups. O que vou fazer é adicionar um chat Wix. Vou clicar nisso. Eu posso ver o que parece ser um pequeno bot de bate-papo que aparece. Se alguém chegar ao meu site, ele pode conversar com o suporte ao cliente. Vou ver que é um plano gratuito disponível, o que é ótimo. Posso ver as visualizações, as revisões. Vou clicar em Adicionar ao site Wix. Agora vou mover isso, inspecionar isso. Agora podemos ver que o aplicativo conecta automaticamente diretamente ao seu site. Posso clicar nas Configurações, ele abrirá o chat Wix aqui. Posso me envolver com isso e mudar as coisas. Envolva o capital visitado A personalize-o. Posso clicar em Gerenciar bate-papo. Posso ver as horas do chat. Você teria que atualizar para isso, mas você pode editar as horas. Posso escolher os campos do formulário, formulário online. Você tem tanto controle sobre o que você pode realmente fazer com ele. Posso olhar para a tela. Isso é o que parece. Isso parece muito legal. Ele está usando minhas fontes usadas e já definido que eu defini para o design também. Vou adicionar o logotipo lá Você pode ver que ele adiciona o logotipo. Posso mudar a cor dos bate-papos e talvez eu queira torná-lo como a cor azul, tão leve interferindo com o verde lá. Isso é muito legal. Textos e ícone, tudo bem. Posso ativar e desativar o ícone. Eu posso mudá-lo também. Posso colocar o logotipo se eu quiser. Eu vou ou você para aquele arredondado, acho que está tudo bem. Posso ver o texto também. Envie uma mensagem em poucas horas para ajudar. Posso adicionar o e-mail é remio1 @gmail, isso é muito legal. Posso mudar isso. Posso fazer uma animação. Você vai todo esse controle. Mais uma vez, se eu olhar para a tela, é assim que ela parecerá. Posso clicar em Abrir caixa de entrada e ela se conectará à minha caixa de entrada integrada dentro do meu site. Se eu for para a caixa de entrada, você pode ver que é assim que será se alguém enviar uma mensagem, eu receberei as mensagens aqui e posso responder. Ei Dan, aqui para ajudar ou o que quer que seja e eu posso enviar o e-mail. Você pode ver, assim, eu recebo detalhes de contato. Também posso editar as configurações aqui. É muito fácil de usar e é basicamente assim que você usa aplicativos e é muito legal. Se eu clicar em Visualizar, e se alguém clicar nele, você poderá ver que isso é o que parece. Vocês precisam de ajuda com o aplicativo ou algo assim, seja lá o que for. Você tem pequenos emojis bem iluminados. Essa é uma ferramenta muito boa para adicionar quando você está adicionando aplicativos ao seu site. [MÚSICA] 12. SEO básico: Vou mostrar a você como fazer algum SEO básico em suas páginas em seu site. Você deseja ir para o canto superior esquerdo, clicar em Páginas e, em seguida, navegue até a Página inicial. Obviamente, você pode editar todas as páginas. Só vou mostrar como fazer a página principal por enquanto. O que você quer fazer é clicar nesses três pequenos pontos aqui. Você quer ir até o Noções Básicas de SEO. Quando eu clicar nisso, você terá um monte de opções para gerenciar no canto superior. Posso ir para a página Informações. Obviamente, posso renomear a página. Posso chamar isso de Lar se eu quiser. Vai me dizer que esta é a página inicial. Posso clicar em Configurações avançadas. Também posso controlar manualmente o armazenamento em cache. Posso ir para Permissões e, no momento, está aberto a todos, mas talvez seja uma página apenas para membros ou uma página de login, ou talvez seja uma página privada. Em seguida, você pode colocá-lo em portadores de senha e definir uma senha. Você também pode clicar em membros somente também. Se estes forem apenas os membros ou clientes pagantes, você poderá selecioná-lo. Vou voltar e clicar em todos para que qualquer pessoa possa ver esta página. Vou para o SEO Basics agora, e isso nos permitirá editar o título e também os textos do parágrafo quando se trata da meta-descrição no Google ou em qualquer mecanismo de pesquisa. Então, no topo, você pode ver apenas diz espectro doméstico. Mas o que vou fazer é mudar isso. Agora, o que eu realmente posso fazer é editar a tag de título. Em vez de apenas ter o Home Specter, você quer torná-lo mais específico com palavras-chave. Vou colar em algum texto. Specter, uma carteira ethereum segura construída para Tokens e NFTs. Agora, obviamente, posso alterar o texto se quiser editar isso. Então o que temos aqui é a meta descrição. Você pode ver que não há descrição lá. Vou colar alguns textos lá. Agora você pode vê-lo aparecer. No Google, quando alguém procura o Specter, esse é o texto que eles verão no primeiro resultado. Em seguida, posso clicar em Ir para URL. Ele vai abrir ou pré-visualizar e, obviamente, apenas me mostrar a página lá. Então, na parte inferior, você quer ter certeza de que vamos os motores de busca indexar esta página, então ela aparece no Google. Se isso estiver desativado, os bots nos mecanismos de busca não vão realmente escanear as páginas e todos os backlinks. Você também pode ir ao compartilhamento social também. Se alguém compartilha seu site no Facebook ou Instagram ou em uma dessas plataformas , você geralmente recebe um pop-up que fornece uma visualização do site. O que você quer fazer é carregar uma imagem. É apenas um simples complemento aqui. Você pode ver que, em vez de ter algo em branco ou apenas aleatoriamente, a pesquisa está selecionando um logotipo ou algo do site, qualquer imagem, ela aparecerá com essa imagem aqui e obviamente ele vai copiar o título que fiz no SEO Basics e a meta descrição aqui. Você pode ver aqui isso é o que se parece com a prévia nas redes sociais. Obviamente, posso ajustar a imagem e movê-la, mas essa imagem era de 1.080 por 600 pixels, e você pode ver que é o que parece. Então você pode rolar para baixo e eles têm as configurações do Twitter aqui. Twitter parece um pouco diferente como você pode ver lá. Posso mudá-lo para ser pequeno ou grande. Isso também é muito legal, e posso editar os metadados do Twitter lá. Isso também é outra coisa legal. Você tem SEO avançado. Eu não costumo brincar com isso. Você pode chamá-lo de marcação de dados estruturados para adicionar uma nova marcação. Você tem Robots Meta Tags. Então, se você não quer que os bots sigam ou indexem algo assim, você pode mudar isso e, em seguida, você também tem tags adicionais , mas eu normalmente deixo isso para especialistas em SEO. Você também pode contratar um parceiro de SEO com o Wix e eles vão ajudá-lo. Esse é o básico de SEO. Eu iria junto com todas as páginas que você projetou e faria a mesma coisa, e isso só criará melhores resultados para você. 13. Incorporando o widget: [MÚSICA] Vou mostrar como você pode incorporar um widget ao seu site. Estou no Calendly e vou clicar na engrenagem e vou clicar em Adicionar ao site. Calendly é meu sistema de reservas de calendário, e eu o uso para meus clientes. Vou selecionar a opção incorporar na linha, e o que você vai fazer é clicar em Copiar código e ele copiará esse HTML e JavaScript aqui, o que é bom. Eu posso mudar as cores, obviamente, mas vou apenas copiar isso, voltar para o Editor x. Agora o que você quer fazer é clicar em Adicionar Elementos, e você quer ir até Incorporar e Social. Agora você pode ver que você pode incorporar o widget, você pode incorporar um site e incorporar um elemento personalizado. Agora, o que eu quero fazer é clicar em Incorporar Widget, ele vai colocar uma caixa aqui. Agora vou apenas esticar a caixa aberta. Vou clicar no menu, clique em Inserir código e vou clicar em Control V para colá-lo. Agora eu quero clicar em Atualizar. Então você pode ver que já temos nosso sistema Calendly incorporado ali mesmo. Você pode ver que ele está incorporado lá. Posso ir em frente e clicar em Visualizar. Vou mudar minha área de trabalho para o tamanho certo aqui. Você pode ver, eu posso percorrer e tem uma pequena barra de rolagem. Vou ter que ajustar as margens nessa seção. Então eu posso clicar nele e posso reservar um Calendly assim. Super fácil de fazer e muito fácil. Se eu tiver um celular, veremos como ele se parece no celular. Veja que é bem responsivo. Obviamente, ele tem a barra de rolagem, então eu provavelmente teria que torná-la mais longa. Vamos voltar ao site de edição. Vou apenas ir para a visualização da área de trabalho. Vou clicar na seção. Certifique-se de que eu selecione a seção aqui. Então vou apenas ajustar a altura. Vamos fazer a altura 1.200. Isso é um pouco demais. Nós iremos 800 pixels. Ele só abre um pouco mais para que possamos ver isso. Então, obviamente, podemos nos livrar de algumas dessas outras partes no Calendly, para que possamos desligar e esconder algumas delas e apenas ter uma ou duas, parecerá um pouco melhor. É assim que você incorpora um widget. Você pode incorporar um monte de coisas. 14. Como criar um blog: [MÚSICA] Também vamos trabalhar na página do blog. Vamos construir isso. Para essa parte, na verdade, vou adicionar um blog. Vou descer a parte inferior do 11º menu e clicar em “Blog” e você pode ver que haverá um botão que diz Adicionar ao site. Vou clicar em “Adicionar ao site” e o Editor X fará o que for. Agora, você pode selecionar um monte de coisas. Você pode fazer blog com a equipe de redação, blog com os membros lá ou apenas um blog normal que é o que queremos. Vou clicar em “Começar”. Depois de adicionar o blog, e é assim que será, você terá uma barra de pesquisa na parte superior, que eu posso personalizar o design e clicar em “Configurações”. Você pode digitar encontrar blog ou encontrar análise ou seja lá o que for. Você pode alternar isso e ligar também. Você também pode clicar no design, para que eu possa alterar a cor de preenchimento ou a opacidade. Eu faço o fundo esse cinza claro e vou deixar cair a opacidade. Agora mude a cor do texto para esse cinza mais claro, coloque todo o texto em cinza mais claro, assim como você pode ver lá. Pessoas, se quiserem encontrar postagens no blog. Também temos essas postagens no blog também. Tenha em mente no Inspetor, ele apenas oferece o tamanho do encaixe e as ferramentas de posicionamento, para que você precise alterar o design dele. Tem um fundo branco. Tenho que clicar em “Configurações” aqui para o blog porque é um widget incorporado, tenho que mudar o design aqui. Para o design, vou clicar nisso. Você pode ver que temos os rótulos, botões, margens, postagens e menu do blog. Posso clicar em “Blog Menu” , como você pode ver lá. Posso voltar, postar e posso reduzir o plano de fundo das postagens. Se eu quiser mudá-lo, talvez eu queira fazer o verde. Achei que ficou melhor com o cinza lá. Então, com o texto, eu poderia mudá-lo para branco assim. Você pode ver que ele está atualizando as mudanças lá, o que parece muito bom. Vou voltar, Botões e Margens, Cor do plano de fundo, isso é apenas fundo da área. Vamos levá-lo a zero por cento. Você pode ver o fundo lá, porque eu não queria aquela coisa branca. cor do texto está boa. Esse pequeno esboço é bom. Você tem as configurações de vídeo no mouse, mas eu não vou ter nenhum vídeo, o que é totalmente bom. Você também tem o layout. Posso continuar editorial. Eu posso fazer lado a lado e isso deve mudá-lo assim. Você pode fazer azulejos se quiser. Gosto de como ele fornece informações pré-detalhadas. Você pode ter uma postagem completa. Gosto disso. É muito bom. Vou clicar em “Lado a Lado”. Acho que realmente gosto disso. Ele mostra as imagens muito bem. Você pode exibir certas coisas. Se eu quiser me livrar do tempo de leitura, posso me livrar disso, da data de publicação. Se eu quiser me livrar do distintivo, posso me livrar disso também. Você pode personalizá-lo de acordo a aparência do blog realmente. Contador de visualizações e comentários, vou me livrar disso, e o contador de curtidas, basta mantê-lo realmente simples. Então, o que você pode fazer é realmente ir para Criar uma publicação ou clicar em “Gerenciar “Posts”. Você pode ver aqui. Vou clicar em “Gerenciar” e isso me levará ao meu painel de back-end, onde as postagens do blog são armazenadas. No lado esquerdo, você pode ver o Blog, e eu tenho minha Visão geral, meu Publicado, meus rascunhos, agendado e lixo. Você pode ver as postagens amostradas que me deram. Quero editar isso, então vou clicar em “Editar”. Vou digitar 10 startup. Posso editar o texto aqui. Você pode ver que posso escrever texto, posso pressionar “Plus”, posso adicionar um vídeo, imagens, presentes, arquivos, divisores. Você pode fazer tantas coisas com isso. Posso clicar nisso. Vou clicar na imagem, duas vezes nela e ela deve me levar a isso, vou para Unsplash. Vou digitar criativo. Vamos ver o que aparece. Há muitas coisas legais, eu gosto dessa foto na verdade. Vou clicar em “Adicionar à página”, e ele adicionará essa imagem do blog e, em seguida, vou clicar em “Excluir” nessa imagem lá. Então você tem algum outro texto. Você pode brincar com tantas coisas. Você pode adicionar tags, categorias, SEO, configurações, há um monte de coisas diferentes. Se eu quiser alterar essa imagem também, tenho que clicar em “Atualizar”. Vou voltar para a mesma imagem também. Vamos aqui. Ele vai mudar minha imagem da capa de exibição, não apenas as imagens no blog mas minha imagem de exibição lá. A data de publicação, você pode ver 23, o autor, que sou eu. Se você tiver o membro da sua equipe, poderá alterar o autor para essa pessoa. Você tem tantas ferramentas. Quando estiver satisfeito com isso, posso clicar em “Salvar” e clicar em “Publicar”. Agora você pode ver minha postagem no blog está lá. Agora vamos voltar para a página e tudo deve ser alterado. Boom. Você pode ver lá minha nova imagem e o texto lá também. Parece super bom. Você sempre pode voltar e clicar em “Gerenciar postagens” para corrigir isso e ajustar isso. Há muita funcionalidade quando se trata de construir um blog. Você tem algumas dicas aqui, você tem modelos. É uma ferramenta muito boa em termos de Editor X.