Crie um site de marca pessoal com Elementor e WordPress (Plugins GRATUITOS)

1. Introdução: E bem-vindo de volta a outra aula incrível de Elementor comigo, Ken Agora, nesta aula, você aprenderá o Elementor criando um site de marca pessoal de uma única página para promover seus serviços profissionais a clientes em potencial O objetivo é ensinar Elementor para você, mas vamos fazer isso de forma prática Vamos começar com uma instalação preta do WordPress e gradualmente transformá-la em um site completo, totalmente funcional e responsivo Agora, a ideia por trás dessa aula é muito simples. Em vez de ensinar widgets, elementos e recursos aleatórios do Elementor, usaremos o Elementor para criar praticamente um site real que você possa usar para apresentar a si mesmo, seu trabalho e seus serviços Isso significa que criaremos seção por seção, incluindo uma seção de heróis, um cabeçalho de navegação que fica no topo quando você rola uma seção de serviços, uma seção de portfólio, portfólio, depoimentos, um formulário de contato e o Também garantiremos que tudo tenha a aparência e funcionamento corretos em computadores, tablets e dispositivos móveis. Durante a aula, mostrarei todo o processo, passo a passo, incluindo os pequenos detalhes que ajudam a transformar uma página básica do WordPress em algo que pareça profissional. Ao final desta aula, você terá uma compreensão mais profunda do WordPress e do Elementor e um site completo que poderá continuar personalizando Se você é freelancer, designer, profissional criativo ou prestador de serviços que deseja criar um site pessoal para si mesmo, deixe-me mostrar como fazer isso com o Elementor Então, se você está animado para começar, vamos lá. Nos vemos na próxima aula. 2. Visão geral do projeto: Bem vindo de volta. Então, eu só quero mostrar exatamente o que você vai criar nesta aula. Este é o seu projeto de classe. Então, deixe-me atualizar a página. Então, como você pode ver, temos uma seção de heróis com aquela bela animação de entrada. Vamos ver como fazer isso rolando para baixo. Temos essa seção de balcão. Temos uma seção de serviços. Seção de trabalhos anteriores , onde você mostrará alguns de seus trabalhos anteriores, e alguém pode clicar aqui e abrir mais do seu trabalho Como você pode ver, quando você clica aqui , seu portfólio é aberto. Nesse caso, ele abre meu portfólio em depoimentos de clientes da hands.net. Você pode definir um horário de quão rápido ou lento você deseja que eles rolem. O visitante também pode navegar manualmente ou rolar para ler os diferentes depoimentos Em seguida, temos uma seção de reserva ou seção de contato, na qual o usuário pode escolher um serviço, talvez até dois serviços, e depois descrever o projeto da forma mais clara possível, fornecer seu nome e endereço de e-mail e solicitar uma cotação. Ao receber isso, você poderá ler e depois voltar para eles ou enviar um e-mail para obter mais detalhes. E então temos um rodapé. O espectador também pode clicar aqui para abrir seu trabalho novamente. Se voltarmos ao topo, porque este é um site de uma única página, esses links navegam dentro dessa página, mas para a seção correta Então, se eu clicar em Serviços, ele vai para o portfólio da seção de serviços. Ele vai para a seção de trabalho anterior. Contato, ele vai para a seção de contatos. Eu volto ao topo. Também temos um botão de serviços aqui. Estamos apenas dando ao visitante o maior número possível de apelos à ação Nosso objetivo é permitir que eles cliquem nos botões e realizem a ação que desejamos. Então, essa é uma visão geral rápida do que você criará nesta aula. Agora estamos prontos para começar a trabalhar nisso. Então, nos vemos na próxima lição. 3. Instalar o Wordpress: É hora de instalar o WordPress. E a maneira de fazer isso é por meio do painel C. Cada host do WordPress fornecerá um painel C para você instalar o WordPress. Descubra como acessar o painel C, Descubra como acessar o dependendo do seu host. Então, vou clicar em Ir para o painel C. Então, aqui estamos dentro do painel C. E uma das guias dentro do painel C será o instalador de aplicativos Sof tacular, que Então, basta clicar em WordPress. E você será levado até aqui onde poderá instalar o WordPress. Então, vou clicar em Instalar agora aqui, precisamos escolher um URL. Agora, como você comprou um nome de domínio, ele será listado aqui. Se você tiver vários, eles estarão nesse menu suspenso. E outra coisa aqui, eu gosto de escolher esse prefixo, HTTPs www dot, seu nome de domínio Então, quando eu clico do lado de fora, ele verifica se eu tenho um certificado SSL. Se eu não tiver um certificado SL, ele usará HTTP ou HDTP Portanto, certifique-se de ter um certificado SSL para informar aos visitantes que seu site é seguro Não adicione nada aqui. Portanto, seu site será www dot, seu domínio , ponto, sua extensão Vamos dar um nome ao site. Vou chamá-lo de Alex Dow. Designer visual profissional. É um site de portfólio. Essas são as credenciais de login que você precisará para fazer login diretamente no WordPress, em vez de acessar o painel C. Portanto, certifique-se de dizer isso em algum lugar. Vou apenas copiá-los e abrir um bloco de notas, colar aí mesmo, copiar a senha Você não precisa copiar este e-mail, mas eu vou copiá-lo qualquer maneira. Você não precisa copiar isso. E você terá alguns plug-ins pré-selecionados que serão instalados com web press, dependendo do seu host. Alguns hospedeiros da web não têm esses. Então, eu não preciso que nenhum desses vá para verificar todos eles. Se você estiver usando o Advance, talvez queira alterar os backups do banco de dados que são mantidos pelo seu host semanalmente. Agora, eu normalmente não altero isso, apenas deixo como padrão. Portanto, essas são as únicas configurações que você realmente precisa examinar. Em seguida, vou clicar na instalação. Lá vamos nós. Então, o WordPress agora está instalado com sucesso e temos o URL administrativo. Se clicarmos, ele será direcionado para o painel do WordPress do seu site. Como você pode ver, aqui estamos, o site que criamos foi Alex Doe. Sim, então parabéns. Você instalou o WordPress. Agora, lembre-se das credenciais de login que acabamos de colocar neste bloco de notas Se sairmos deste site, serão solicitadas as credenciais de login Então é aí que vamos usar, copiar isso, colar o nome de usuário e a senha. Cole isso. Lembre-se de mim. Então, vamos fazer o login. E então vamos lá. Então é assim que se instala o WordPress. E agora estamos prontos para passar para a próxima etapa, que é instalar um pin do WordPress. Te vejo em breve. 4. Instale um tema do WordPress: Com o WordPress instalado, é hora de instalar nosso tema WordPress. Então, vamos aos temas de aparência. E eu vou para Adicionar novo. Esses são os temas padrão que acompanham todas as instalações do Wordpress. Agora, estamos em 2026, mas a última coisa ativa que vem com o Wordpress por padrão é 2025 Parece que eles não criaram um novo em 2026. Então, vou dizer Adicionar coisa porque queremos usar uma coisa personalizada chamada Astra Essa é uma das melhores coisas que você pode usar no WordPress. Então eu vou dizer instalar, ativar. E agora o Astra está ativo. São apenas anúncios deles. Feche isso. E então Astra agora é nosso tema ativo. Agora, na próxima lição, vamos instalar um lamentor Te vejo em breve. 5. Instale o Elementor: Agora é hora de instalar o elementor, que é o plugin que vamos usar como nosso construtor de páginas de arrastar e soltar Então, vamos aos plug-ins. Primeiro de tudo, vamos clicar em plug-ins para ver a lista dos plug-ins padrão que vêm com cada instalação do WordPress. E esse é esse chisme e Hello Dolly. Vou apenas selecionar todos eles e depois excluí-los. Candidate-se. Nós não precisamos deles. Então eu vou dizer adicionar plugin. Aqui, vamos procurar por Elementor. Será a primeira escolha com mais de 10 milhões de instalações ativas. Eu vou dizer instale agora. Vamos continuar e ativá-lo. E agora o Elementor está ativo em nosso site. Depois de instalá-lo, você verá esse elemento aqui Mas você não precisa entrar e mudar nada. Não precisamos mexer com isso. Agora, vamos às páginas. Temos algumas páginas padrão aqui. Vou excluí-los, então selecione todos eles e vá para a lixeira. Aplique isso. Agora, na próxima lição, vamos desencorajar a indexação. Eu vou te dizer o que é em breve. 6. Desincentivar a indexação: Pronto para começar a criar nosso site. Mas há uma coisa que precisamos garantir antes de prosseguirmos, que é desencorajar os mecanismos de pesquisa de indexar o site como ele O Google, o Bing e outros mecanismos de pesquisa enviam seus spiders ou bots para procurar novos sites e adicioná-los ao banco de dados para disponibilizá-los às pessoas Você não quer que o Google disponibilize seu site ainda porque você ainda não o criou. Então, isso tem um efeito negativo no seu SEO. Então, queremos dizer aos mecanismos de pesquisa que não indexem este site ainda. Não está pronto para o público. Então, vamos às configurações, lendo, desencorajando os mecanismos de pesquisa de indexar este site E vamos salvar as alterações. Lá vamos nós. Na próxima lição, vamos começar a criar nosso site de página única. Te vejo em breve. 7. Crie uma única página da Web: Agora é hora de criarmos nossa única página da web. Então, vamos às páginas. E lembre-se de que excluímos e destruímos as duas páginas padrão que vieram com o Webpress. Nós não precisamos deles. Digamos que, em primeiro lugar, vamos nos livrar disso e adicionar uma página. Vamos dar um nome a ele. Vou ligar para casa. Primeiro, vamos definir esse modelo como uma página web completa. E agora que terminamos com isso, vamos entrar e, a propósito, essa configuração de modelo é uma configuração elementar A propósito, não é uma configuração do wordpress . Agora, vamos para as configurações do Astro e, para o contêiner, queremos um contêiner de largura total. Barra lateral, não queremos uma barra lateral, então não há barra lateral. E esses elementos, precisamos desativar esses elementos. Antes de desativá-los, vamos publicar esta página da web e ver o que são. Então eu vou dizer publicar publicar. E agora, se visualizarmos a página em uma nova guia, deixe-me fechar isso. Este é o cabeçalho aqui porque esse é um tema do Astra Ele vem com cabeçalho e rodapé padrão, cabeçalho e rodapé padrão, e o que é essa outra coisa, área de banner Há uma área de banner aqui que vem por padrão. Não queremos nada disso porque queremos criar esta página do zero usando os recursos de arrastar e soltar do Elementor Então, vamos voltar aqui e desabilitar todos eles e depois salvar. Está salvo? Sim, vamos ver a página. E agora é uma tela em branco. Então, vamos fechar tudo isso. E agora que nossa página foi criada, vamos voltar à lista de páginas que temos. E como você pode ver, temos a página inicial aqui. Outra coisa que queremos fazer é quando você visita o domínio de qualquer site, ele deve ir para a página inicial Então, agora, se pegarmos o domínio, copiarmos isso, abrirmos uma nova guia e colarmos isso, isso é o equivalente ao seu domínio.com ou.net Se você for lá agora, há uma página diferente. Essa não é a página padrão que queremos. Queremos que a página que acabamos de criar seja o destino do nosso domínio. Portanto, precisamos dizer ao WordPress qual página queremos tornar nossa página inicial padrão Então, vamos às configurações, lendo. A página inicial exibe suas últimas postagens atualmente. É por isso que vemos isso. Mas queremos dizer que não, vamos escolher uma página estática como nossa página inicial Qual página inicial? Esta é a nossa página inicial. A página que acabamos de criar, Salvar alterações. E agora, se recarregarmos isso, o domínio raiz aponta para nossa página em branco, que preencheremos com nosso design Então, acho que vamos parar por aqui. Na próxima lição, vamos começar a criar nossa seção de heróis. 8. Crie uma seção de herói: Agora, aqui estamos no site de referência. Só quero que vejamos a seção de heróis que vamos criar. Isso é o que parece. Então, como fazemos isso? Vamos mudar para o nosso projeto. Agora, vamos às páginas e instalamos o elementor, mas não transformamos isso em uma página elementor Então, digamos que edite. E aqui temos a edição com o Elementor. Então clique nisso. Isso transformará a página em uma página editável por elementos Então, aqui estamos dentro do elementor. Então, a primeira coisa que você notará aqui é que temos elementos atômicos. Vou derrubar tudo isso. Esses são novos elementos criados na versão mais recente do elementor, mas são muito limitados porque os recursos mais importantes estão escondidos atrás de um paywall Por exemplo, o botão, se você soltar um botão aqui e quiser adicionar efeitos de foco, se eu passar o mouse sobre ele, quero que ele mude de cor Se eu quiser criar uma interação, como você pode ver, os efeitos de foco estão atrás de um paywall Então, não podemos trabalhar assim. Se eu não tiver acesso a efeitos básicos, como efeitos de foco, não quero usar esse novo sistema Eu só queria te mostrar isso. Vamos nos livrar disso. Então, não vamos usar elementos atômicos de forma alguma. Queremos usar os elementos gratuitos populares originais que sempre usamos. Esse é o sistema de contêineres em vez do sistema de elementos atômicos. Então, vamos deixar um contêiner aqui. E como você pode ver, esse contêiner aqui tem duas colunas, o bloco de texto e o bloco de imagem. Então, precisamos de duas colunas dentro dela. Então, vou dizer mais, adicione um elemento novamente. Vou colocar um contêiner lá dentro. E neste contêiner, vou colocar mais dois contêineres. Esse contêiner será o único com o qual definir nosso conteúdo de largura. Como você pode ver, esse conteúdo não está tocando nas bordas. Portanto, há um único contêiner invisível que tem mais dois contêineres dentro dele, um contêiner e outro contêiner. Então, como fazemos isso? Então, colocamos nosso contêiner lá. Agora voltamos novamente, adicionamos elementos, soltamos outro contêiner aqui. E vou clicar com o botão direito do mouse e duplicar esse contêiner Agora temos dois contêineres dentro desse contêiner externo. Vou selecionar esse contêiner externo, vá para o layout. Sob direção. Vou dizer que queremos que seja uma linha em vez do que é essa vertical. Então, vamos dizer horizontal, e isso vai organizar tudo em uma linha. Certo. Agora, como você pode ver, estamos quase lá, mas queremos definir uma largura específica que gostemos. Então, primeiro, vou selecionar o contêiner mais externo e dizer que queremos mudar para porcentagem em termos de largura E queremos que você ocupe 100% de qualquer tela em que esteja visualizando o site. Agora, com isso, quero ir para esse outro contêiner que contém as duas colunas. E quero dizer que quero que ocupe 80% desse contêiner externo porque esse contêiner externo está ocupando 100%. Se trocarmos aqui, ele está ocupando Mas lá dentro, lembre-se, temos esse outro contêiner aqui que contém as duas colunas. Queremos que seja 80% do contêiner mais externo. Então, com isso eleito e com isso como porcentagem, 80%. Agora observe que tudo foi empurrado para a direita para a esquerda. Então, vou selecionar esse contêiner mais externo. E aqui, vamos dizer que alinhe tudo ao centro Isso vai empurrar esse contêiner que é mantido dentro dele para o centro. E agora estamos prontos para dizer que publique isso. Se eu escolher Adicionar elemento, cabeçalho de texto e soltá-lo lá, volte para adicionar elemento. Editor de texto é um parágrafo. Largue isso. Agora, queremos colocá-lo aqui, logo abaixo do título, e voltar para adicionar elemento e adicionar um botão. Solte-o logo abaixo. Volte aqui e diga abaixo imagem estática do layout. Publique isso. Visualize o que acabamos de criar. E agora, como você pode ver, tudo está estruturalmente correto. Vamos estilizar tudo para ficar incrível. Então, agora vamos terminar esta lição aqui. Na próxima lição, vamos agora estilizar essa seção de heróis. 9. Seção do herói de estilo: Agora é hora de estilizar nossa página. Mas uma coisa que você notará no site de referência é que temos esse fundo gradiente que começa do azul escuro até o azul brilhante Então, como definimos isso? Então, vamos voltar aqui para Elementor. Vamos adicionar uma cor de fundo. Então, vou para este menu suspenso, configurações laterais. Vamos sentar em segundo plano, e é aqui que o colocamos. Vamos escolher o gradiente. Agora temos essas duas cores. Vou abrir meu explorador. Vou fornecer essa pasta de ativos de download que conterá tudo o que você precisa para recriar este site exatamente como está Então, isso também inclui as cores que eu usei. Portanto, temos essa seção de cores de fundo. Então, vou selecionar essa cor, copiar aquela. Vamos voltar aqui. A primeira cor será esse azul. E a segunda cor será esse azul claro. Mas você pode escolher qualquer outra cor que desejar. Então, para a segunda cor, vamos basear isso assim. Salve as alterações. E vamos deixar essa área. Agora, o próximo passo é alinhá-los verticalmente ao centro do contêiner de coluna que os contém Então, vou selecionar esse contêiner e, aqui mesmo, justificar o conteúdo Digamos que no centro, sem mais nem menos. Vou selecionar esse botão direito do mouse e duplicá-lo porque precisamos ter esse texto Você terá que digitar, mas eu vou apenas copiar e colar. Vou selecionar isso aqui e colar o conteúdo que Alex Do. Então, vou selecionar isso. Cole isso. Copie, selecione esse corpo de texto. Controle A, Control Shift V se você estiver colando de algum lugar para garantir que não cole nenhum estilo de onde você o copiou Então Control Shift V. E aí está. Então publique isso. Primeiro de tudo, vamos dar uma olhada nisso. Está muito melhor agora. Agora, selecione isso, e eu vou selecionar essa cor amarela dos textos, caderno, bloco de notas, copiar esse amarelo Enquanto isso estiver selecionado, vou entrar no estilo da cor do texto. Amarelo. Agora, você notará que isso tem duas cores, e eu vou te mostrar como fazer isso. Isso é cortesia de um kit plugue de elementos frios Light. Primeiro de tudo, vamos publicar isso. E eu quero que entremos no painel. Vamos aos plugins, adicione o plugin. Queremos adicionar um plugin chamado Elements kit Light, que vamos usar em todo o site. Então, aqui, vou digitar elementos Kit. Elementos do kit elementor addons. Isso apenas nos fornece mais elementos interessantes aqui que o Elementor não nos fornece ou que o Elementor tem na versão pro paga Então, agora que temos o kit Elements ativo, se clicarmos no kit de elementos, teremos que ativá-lo. Gosto de escolher avançado aqui apenas para garantir que mais opções sejam selecionadas por padrão, ou seja, avançadas. Esses são apenas elementos que aparecerão aqui como esses. Tão avançado. Em seguida, em seguida, não selecione nenhum desses. Você não precisa deles. Próxima etapa, conclua a configuração. Agora, se eu voltar aqui e verificar se você já publicou a página, controle R para atualizar a página Agora, se eu derrubar Atomic, todos esses painéis, link geral na biografia, você verá elementos do kit de elementos. Esses são outros complementos interessantes precisamos para criar o que queremos criar. Então, vamos fechar isso agora, esse título pertence ao elemento nativamente, mas queremos usar título do kit de elementos. Vou digitar o título. E, como você pode ver, temos o título padrão que temos e também um título do kit de elementos. Então esse é o que queremos. Solte-o lá e vamos excluir isso, clique com o botão direito do mouse em excluir. Então, com isso selecionado, vou digitar Alex e, dentro desses colchetes, faça E agora é uma questão de estilo. Vá para o estilo. Temos o título, que é o Alex, e o título em foco é o do que está dentro dos colchetes. Então, primeiro de tudo, vamos ao título e à tipografia, aumente o tamanho para o tamanho que quisermos Vamos selecionar uma fonte preta de 900 para torná-la muito mais ousada E vamos dar qual cor? Branco. Então, título, cor, branco. Reduza isso. Vamos ao título focado. Vamos colorir. Queremos essa cor laranja. Então copie essa laranja. Cole essa cor de laranja. Quando você passa o mouse, ele muda para esse amarelo. Então, queremos copiar esse amarelo. E ao passar o mouse, cole isso. Então, ao passar o mouse, vai ficar amarelo. Mas observe que ainda não é grosso. Na verdade, vamos à tipografia. Espessura da fonte preta. E, de fato, aqui mesmo no conteúdo Sim, temos espaçamento. Então, enquanto ainda estiver selecionado, vamos para Estilo novamente, Estilo e tipografia Queremos que seja subestilizado, queremos que seja em itálico, sem E observe que temos esse separador, então reduza o título, separador Vamos ao conteúdo, recolher o título, o separador e desativá-los Selecione esse texto. Vamos torná-lo branco. E queremos evitar que seja muito longo. Então, enquanto ainda estiver selecionado, vamos para Avançado com customização. E vamos dar talvez 75%. Publique isso. E vamos pré-visualizar o que temos. Ótima melhoria, mas queremos reduzir o espaçamento entre eles. Essas são as margens. Então, com isso selecionado, atualize sua comunicação. Vamos para a margem avançada. Quebre esse link porque, se você alterar alguma coisa aqui, isso afetará a parte superior, direita, inferior e esquerda. Queremos apenas reduzir a margem inferior. Vamos também selecionar esse Alex Doug, margem avançada, reduzir a margem inferior Publique isso. E vamos ver o que temos. Grande melhoria. Então, vamos parar por aí. Na próxima lição, vamos ver como criar esses botões. Te vejo em breve. 10. Botões de CTA para Style Hero: Agora é hora de fixar nosso botão para que se pareça com nossos botões de referência Então, como fazemos isso? Voltando atrás. Vamos entrar aqui. Agora, é claro, temos dois botões, e se quisermos colocá-los lado a lado, temos que fazer o que fizemos com essas duas colunas aqui. Então, queremos adicionar um contêiner abaixo desse texto. Adicione elemento. Vamos ao básico. Isso é um layout. É aqui que temos o contêiner. Vamos soltá-lo logo abaixo desse parágrafo e arrastar nosso botão até lá e clicar com o botão direito do mouse em duplicar, selecionar o contêiner que os contém mudar a direção para horizontal Agora, uma coisa que você notará se eu publicar isso é que esses botões não estão alinhados com o texto aqui por causa do preenchimento padrão que vem com cada Como você pode ver, temos um pouco de acolchoamento por toda parte. Queremos remover esse preenchimento. Então, enquanto o contêiner estiver selecionado, vamos para avançado. Vamos até o preenchimento e removê-lo. Agora podemos adicionar um pouco de preenchimento superior, talvez dez e dez inferiores, mas deixar o preenchimento esquerdo intacto Publique isso. Agora, como você pode ver, eles estão alinhados corretamente. Outra coisa que queremos fazer agora é selecionar que há muito espaço. Assim, podemos selecionar esse texto, margem inferior avançada. Vamos reduzi-lo talvez até esse ponto. Publique isso. Selecione o botão, vá para estilo. Em primeiro lugar, podemos mudar o que diz. Serviços e o outro diz portfólio Ou veja meu trabalho. Veja meu trabalho. Agora, selecionando esse botão aqui, vá para estilo. E eu quero que editemos o preenchimento. Então quebre isso. Gosto de dar a ele um preenchimento esquerdo de 40 ou 50, preenchimento direito de 50 preenchimento superior e inferior de mesmo caso se aplica a esse estilo, preenchendo 40 à esquerda, 40 à direita, 40, depois 15, 15 OK. Para isso, vamos dar a ele uma cor de fundo cinza e uma cor de texto preta. Selecionando isso, queremos dar a ele uma cor gradiente porque nosso gradiente sempre joga entre essas duas cores amarelo e laranja Então, enquanto estiver selecionado, vamos para o gradiente do tipo de fundo Vou copiar nossas cores aqui. Amarelo, copie isso. Use-o como a segunda cor. Mas copie a laranja, cole isso. Então, aqui para o ângulo, queremos girá-lo Em vez de 180 graus , deve ser 90 graus. Vamos fazer com que o texto fique preto. mouse sobre este botão, passe o mouse, porque estávamos configurando para o estado normal Ao passar o mouse, queremos que ele tenha a mesma cor de gradiente. Então, vou selecionar isso. E vamos voltar aqui, copiar essa laranja. Cole aí. Copie o amarelo. Cole isso, sem mais nem menos. Mas queremos mudar isso para 90 graus, o ângulo, desse jeito. E isso ao passar o mouse, selecionado. mouse, queremos que ele tenha um fundo cinza, não um gradiente, mas apenas um fundo cinza clássico colorido com textos em preto Não vou tentar manter isso consistente. Espere, por que as dicas não estão funcionando? Publique isso. Vamos aqui. Eu não sei. Isso é um bug? No normal, é um gradiente, mas no normal. Não sei por que temos esse bug. Então, o elemental precisa investigar isso, mas vamos continuar. Pré-visualize isso. Agora, como o efeito de foco aqui não está funcionando para isso, podemos adicionar uma animação, então vou selecioná-la Ao passar o mouse, queremos uma animação flutuante. Talvez cresça. Sim, desse jeito. Vamos fazer o mesmo com isso ao passar o mouse, ele também deve crescer Então publique isso, vamos ver o que temos. Sim. Então, vamos lá. Na próxima lição, vamos agora adicionar essa imagem junto com o plano de fundo. Se eu carregar esta página, como você pode ver, há duas separadas 11. Imagem principal: Então é hora de trabalhar na imagem da seção de heróis. Então, porque você já adicionou o elemento de imagem. Agora, primeiro de tudo, antes de irmos longe, há algo que você me notou fazendo o tempo todo. Quando quero duplicar algo, preciso clicar com o botão direito do mouse e duplicar Esses são dois passos que eu tenho que tomar todas as vezes. Então, para evitar isso, eu sempre gosto de acessar esse menu suspenso, preferências do usuário e opções de edição rápida. Isso só me permite passar o mouse sobre isso e clicar aqui para duplicar o que eu quiser duplicar Então, com o elemento de imagem selecionado, vou selecionar as imagens de upload. E, como prometi, vou fornecer essa pasta aqui mesmo. Esta pasta de ativos de download, então ela terá tudo o que você precisa. Então, a primeira coisa que vamos inserir é essa imagem com essa borda inferior esmaecida, imagem zero de um profissional ou sua própria imagem Agora, este é meu host reclamando do meu servidor, então vou salvar isso e atualizar esta Feche isso. Então, selecionando isso e isso, vá para o upload. Se eu clicar duas vezes nele, agora vai funcionar. Então, com a imagem selecionada, eu vou dizer selecionar, e pronto. Agora, para esta imagem, essa imagem amarela aqui, vamos adicioná-la à coluna como plano de fundo da coluna. Então, nesta coluna contendo a imagem, vamos ao estilo, tipo de plano de fundo. Vamos selecionar a imagem e, em seguida, fazer o upload dos arquivos. E dentro da nossa pasta, temos o pincel de fundo do herói que vai abri-la. E selecione. Agora, está lá, mas precisamos fazer algumas coisas. Em primeiro lugar, digamos que a posição deva estar no centro. Queremos dizer que não queremos que isso se repita. Então, para o tamanho da tela, queremos dizer conter. E o que vai nos permitir posicioná-lo corretamente é essa imagem real desse cara. Com a imagem selecionada, vamos para W. E vamos brincar com ela desse jeito. Acho que é um bom tamanho. E digamos que publique. E vamos pré-visualizá-lo. Estamos chegando a algum lugar. Então, vamos ver se podemos melhorar alguma coisa agora, primeiro de tudo, podemos selecionar essa coluna de texto. E quanto à largura, queremos que ela ocupe, lembre-se esta coluna e essa coluna estão dentro desse contêiner aqui. Então, quanto desse contêiner cada coluna deve ocupar? Vamos selecionar isso. Queremos que ela ocupe 40%. Porcentagem, não pixels. Agora, isso é altura e faça isso. 40%. E queremos que isso ocupe 60%. Então, layout 60%. Publique isso. E vamos ver. Sim, isso é uma melhoria muito maior. Então, acho que agora podemos começar com isso. Faremos mais melhorias à medida que prosseguirmos. Então, o que mais resta? Então, a única coisa que resta aqui é esse padrão de fundo com essas formas geométricas Então, vamos adicionar isso. E isso vamos adicionar a contêiner da seção de heróis contendo todo o resto. Então, este recipiente rosa aqui, vá para o tipo de plano de fundo do estilo. Vamos selecionar se temos esses padrões de fundo da seção de heróis. Abra isso e selecione-o, e pronto. Então eu preparei essas imagens usando o Adobe Illustrator, então você terá que preparar os padrões que quiser usar Agora, assim como fizemos, queremos ir aqui e dizer posição central central. Queremos dizer que não se repita. E para o tamanho da tela, contenha a publicação, vamos ver o que temos. Lá vamos nós. E quanto à cobertura? Sim, a capa é melhor para isso. Vamos aqui porque eu quero que cubra até as bordas. Então aí está. Terminamos com a seção de heróis. O resto das seções será uma repetição do que acabamos de fazer na seção de heróis Mas, claro, há algumas coisas únicas que vamos fazer. Então, nos vemos na próxima lição. 12. Criar cabeçalho: Agora é hora de criar um cabeçalho para o nosso site porque, no momento , é claro, como você pode ver, não temos um cabeçalho e queremos algo parecido com isso. Então, como criamos isso? Voltando para cá. Vamos entrar no nosso painel. Eu quero ir para o painel. E lembre-se de que adicionamos elementos ao kit light. Então, no kit de elementos, temos uma opção de cabeçalho e rodapé Então, vamos clicar nisso. Vamos adicionar um novo modelo e vamos chamá-lo de cabeçalho. É nosso cabeçalho. E queremos que ele seja exibido em todo o site. Se você tivesse várias páginas da Web, gostaria que elas fossem exibidas em todas as páginas da Web Então, queremos tê-lo ativo. Em seguida, vamos para Editar conteúdo. Seremos redirecionados para o Elementor para criar um cabeçalho. Agora, aqui, queremos dizer, vamos adicionar um contêiner, recolher todos esses painéis que nunca precisamos. Vamos ao layout e adicionar um contêiner aqui. E, assim como fizemos antes, queremos poder conter nosso cabeçalho em 80% da tela. Portanto, esse recipiente externo deve ter 100% de largura. E esse interno deve ser 80% do externo. E com isso, queremos ir para a externa e empurrar a interna, alinhando-a ao centro desse jeito E agora, aqui, queremos três colunas. Na verdade, não precisamos de três colunas. Só precisamos de três itens. Precisamos de uma imagem e da imagem básica. Também precisamos de coragem. Então eu vou digitar nervo. Agora, temos nervos diferentes aqui, mas o que queremos é o menu nervoso infantil Elements. Nós o colocamos abaixo da imagem, mas ainda dentro desse contêiner interno. E também queremos adicionar um botão ainda abaixo elementos básicos, nunca atômicos a menos que você tenha a versão profissional do Elementor E vamos colocar o botão logo abaixo disso. Agora, vamos selecionar o contêiner em si e mudar para linha. Agora, esses são três elementos organizados como uma linha. Quero selecionar a imagem. Vamos selecionar o logotipo. Eu criei esse logotipo fictício. Não pertence a uma pessoa real. Então, clique duas vezes nele e vamos selecioná-lo. Agora ele já é pequeno o suficiente, mas quero ter certeza de que somos muito específicos sobre sua largura. Então, com o avançado, vamos personalizar e dizer que talvez 20 ou 25% desse contêiner o está acomodando Vamos selecionar o nervo. Agora, quando selecionamos o elemento nervoso, ele nos pedirá um menu. Se tivermos um menu, ele será listado aqui, mas ainda não criamos um menu do WordPress. Então, primeiro de tudo, deixe-me publicar isso. E vamos voltar para Eu quero ter um painel sempre disponível aqui. Então, aqui dentro, vamos ao menu de aparência. E queremos criar um menu. Então, deixe-me chamá-lo de meu menu, vamos torná-lo o menu principal e, em seguida, criar o menu. Agora, como já temos a página inicial, vamos selecioná-la e adicioná-la ao menu Ele será listado aqui. E queremos criar elementos adicionais, itens de menu adicionais, serviços, contatos de portfólio. Então, vamos aos links personalizados. Vamos colocar um hash ali mesmo, chamá-lo de serviços adicionados ao menu Voltaremos mais tarde e faremos com que esses links realmente levem a algum lugar. Então, vamos adicionar outra cerveja de haxixe, portfólio ao menu e, finalmente, contatos Entre em contato, adicione ao menu. Então, digamos que o menu Salvar. Então, criamos meu menu WordPress com quatro itens de menu. Voltando aqui, essa é a página. Vamos voltar ao editor de cabeçalhos. E como está publicado, vamos atualizar esta página E agora, se eu dormir, onde está essa coragem? Tudo bem, deixe-me Onde está a coragem? Se eu pressionar o Controle E, podemos ter uma visão geral de tudo o que temos no editor. Nervo. Então, ele se desintegrou em um elemento muito pequeno. Mas aqui podemos selecionar o meu menu que acabamos de criar. Então, selecionando isso agora, como você pode ver, está visível. Agora, já dizemos que isso deve ser 20% da largura. Vamos também fazer com que o botão ocupe 20% do contêiner. E vamos alinhá-lo à direita. E agora, para o elemento nervoso, vamos garantir que ele ocupe os 80% restantes Oh, 60% porque estamos em 2020, 40, então 60%. E enquanto ainda estiver selecionado, vamos para o Align Center de conteúdo, mais nem menos. Publique isso. E queremos mudá-los para a cor branca. Enquanto ainda estiver selecionado, vamos para o item do menu de estilo. Em circunstâncias normais, vamos torná-lo branco no Hover. Vamos fazer com que seja laranja. O item assume a cor ao passar o mouse, laranja. E quando estivermos na página específica, quando ela estiver ativa, vamos torná-la laranja. Isso significa que quando estamos nessa página ou seção específica vinculada ao item, vamos torná-la amarela. Publique. Agora, vamos pré-visualizar isso. Agora, como você pode ver, ele não está alinhado corretamente. Esse botão é muito elevado em comparação com todo o resto. Então, vamos voltar aqui. E com esse contêiner selecionado aqui, vamos garantir que os itens estejam alinhados no centro verticalmente dessa forma Vamos fechar isso. E vamos até este editor aqui e selecionamos este botão, vazar cópia à direita, voltar ao nosso editor aqui, selecionar o botão, estilo de colar vazamento à direita Portanto, não precisamos repetir isso, exceto que agora está . Agora precisamos reiniciar esse chicote de 20% . Pronto Então, agora voltando aqui para o nosso editor, vou controlar o R para recarregar a página E agora nossa página da web tem o cabeçalho. Então, vamos pré-visualizar o cabeçalho com todo o resto. Lá vamos nós. Já está parecendo bom. Mas por alguma razão, esse espaçamento aqui é maior do que isso. Eu não sei por quê. Vamos analisar isso mais tarde. Mas agora, deixe-me encerrá-lo, incluindo isso. Agora, eu gosto de reduzir essa margem no canto superior direito aqui. Então, na verdade, se você quiser editar seu cabeçalho, você pode passar o mouse sobre essa parte aqui e clicar no cabeçalho, mas eu quero abri-lo em uma nova guia, então vou usar a roda do mouse e pressionar a roda do mouse para abri-lo em uma nova guia Agora, como mencionei anteriormente, cada contêiner vem com preenchimento padrão Então, vou selecionar esse contêiner contendo tudo, ir para Avançado e quebrar o preenchimento padrão desse jeito E o contêiner externo também tem seu próprio preenchimento padrão. Como você pode ver, reduzimos drasticamente a margem na parte superior E agora, se recarregarmos esta página, observe o cabeçalho. Agora, tudo está muito mais perto do topo. Lá vamos nós. Tudo bem Então agora eu entendo qual era o problema. Então, ao selecionar esse botão, quando colamos os estilos desse botão aqui, substituímos as configurações que definimos aqui para o botão, alinhar, escrever, publicar Abaixo disso. Lá vamos nós. Então, agora nosso cabeçalho está incrível, exceto que ainda precisamos selecionar o botão, acessar o conteúdo e alterá-lo para reservar para mim, publicar isso. Então vamos fechá-lo. Podemos recarregar o editor aqui. Agora podemos visualizá-lo mais uma vez. Sim. Então, agora, esse é o final do cabeçalho. Na próxima lição, vamos ver agora como criar as seções restantes. Te vejo em breve. 13. Seção de contracanto: Agora, queremos adicionar essa seção do contador aqui. Então, vamos ver como fazer isso. Entrando aqui, eu quero dizer adicionar elemento, e eu quero reduzir tudo isso. E rolando para baixo, queremos adicionar um contêiner de layout aqui Agora, esse contêiner de layout deve ter outro contêiner para conter o conteúdo real, então vou voltar lá, e isso deve ocupar 100% da largura, enquanto isso deve ocupar 80% do contêiner externo. Vamos voltar para o contêiner externo e alinhar os itens no centro Agora, aqui, queremos duplicar esse texto para que possamos reutilizá-lo É um cabeçalho. E, de fato, algo que esqueci de fazer aqui é selecionar que esse cachorro Alex deveria ser um H. Este é um H dois. Sim, já é um H dois. E, na verdade, tivemos, porque acabamos de duplicá-lo daqui, ele tem essa configuração de margem, nós a removemos E observe uma coisa aqui, isso é na verdade uma coluna, e essa é outra coluna. Então, o que precisamos é de um contêiner. E coloque isso no recipiente que está dentro do outro recipiente. E abaixo dele, também queremos colocar um botão. Então, vou duplicar esse botão e colocá-lo abaixo do texto Em seguida, duplicarei esse contêiner selecionarei o contêiner externo e mudarei para rolo Então, temos duas colunas. E aqui, eu quero remover esses dois. Tudo bem, isso não é removível, então, com razão, então, com razão E eu quero adicionar um contador. Então arraste e solte o contador lá dentro. Selecione o contador, duplique-o duas vezes. Selecione o recipiente que os contém e mude para a linha. Queremos justificar o conteúdo no centro e o espaço entre os elementos Publique isso. Vamos pré-visualizar as mudanças. Visualize as alterações. Exatamente, desse jeito. Mas agora cada um deles deve ter. Vamos dar um pano de fundo. Vamos para Avançado. Selecione um desses contadores. Avançado. Primeiro de tudo, vamos dar um pouco de preenchimento, talvez 20 Então, vamos ao plano de fundo. Cor de fundo. Vou selecionar esse azul escuro ou qualquer cor que você queira usar. Cole isso aí. Vamos ao número do estilo. Vamos atribuir a cor branca e o título Branco também por enquanto. Para o número, você pode escolher uma fonte mais pesada, ou seja, a espessura da fonte, preta Você pode até dizer uma fonte diferente, talvez monserat Sim, algo pesado assim Em seguida, vamos para o raio de fronteira avançado de 20. Então vamos escrever vazamento, copiar o vazamento correto, estilo de rosto, vazamento certo, estilo de colar, publicar Aqui mesmo, vou copiar esse texto. Teremos que digitar, selecionar isso, ir para o conteúdo. Vou colá-lo lá e alterá-lo para Publicar em branco. Indo aqui. Assim mesmo. Agora, como você pode ver aqui, o espaçamento é incrível nisso Mas o nosso aqui não é muito bom. Então, não vamos ter nenhum espaço entre eles. Vamos apenas alinhá-los ao centro e publicar podemos dar cada um deles alguma largura Primeiro de tudo, vamos dar a essa coluna uma largura de talvez 40% e esta 60%. Personalizado, 33%. Copiar, vazar à direita, colar estilo, copiar e colar, publicar isso. Lá vamos nós. Então, agora vamos mudar os detalhes. Isso aqui poderia ser 55 clientes atendidos. Então, qual é o título? Clientes atendidos. Isso aqui pode ser O que temos aqui? Projetos concluídos. 329 projetos concluídos. E isso aqui pode ser 100%, então a porcentagem do sufixo atua como facção, garantia Então, se excluirmos isso exatamente. Entre em contato e publique isso Lá vamos nós. Então é assim que se cria essa seção, e ela está muito próxima da seção de heróis. O que eu quero fazer é voltar aqui e selecionar o contêiner que contém toda a seção do herói, ir até a altura e alterá-la para VH Essa é a altura da visão, e queremos dar 100. Queremos dizer, faça com que ocupe a tela inteira. A seção de heróis deve ocupar a tela inteira, publique isso. Assim mesmo. Também queremos selecionar isso e talvez, esse contêiner contendo esta seção, dê a ele uma margem superior de 50 para separá-lo do topo. Tudo bem. Agora, não queremos que ele toque na seção inferior. Então, talvez pudéssemos reduzir a largura dessa imagem. Publique isso. Assim mesmo. Sim, eles estão devidamente separados. Então é aí que vamos chegar nesta lição. Na próxima lição, vamos ver como criar essa seção aqui, meus serviços. Então, nos vemos em breve. 14. Efeitos de cabeçalho adesivos: Agora, antes de prosseguirmos para esta seção aqui, você notará que, quando começamos a rolar, o cabeçalho fica fixo e, quando não estamos rolando, os padrões de fundo estão até o topo Este é o site de referência, mas no site em que estamos trabalhando atualmente, se começarmos a rolar, o cabeçalho desaparecerá, e esse padrão não está totalmente no topo, então precisamos resolver isso agora E para fazer isso, para tornar o cabeçalho fixo, precisamos usar um plugin chamado efeitos de cabeçalho adesivo para elemento Vamos entrar no painel. Plugins, adicione plug-in. Vamos adicionar adesivo. Basta digitar o cabeçalho adesivo do cabeçalho. Então, efeitos de cabeçalho fixos para o elementor são instalados agora. Então, vamos ativar isso. E agora aqui está. Então, voltando aqui, vamos passar o mouse sobre isso e dizer link certo, abrir link em Nova guia Então, o que precisamos fazer é selecionar o contêiner que contém o cabeçalho inteiro e ir para o layout de colapso avançado, acessar os efeitos de cabeçalho adesivo e ativá-lo Feche este anúncio profissional. No momento, já está pegajoso. Nós o habilitamos, então ele ficará fixo na parte superior. Mas o que queremos é ter um cabeçalho transparente, e isso significa que agora, se formos aqui e atualizarmos este editor, veja o padrão por trás da seção de heróis Agora, como você pode ver, os padrões estão até o topo. Se eu pré-visualizar isso, como você pode ver, eles estão até o topo. Mas agora, um problema que você notará é que, quando começamos a rolar, não há plano de fundo no cabeçalho Tudo fica confuso. Então, voltando aqui, logo abaixo do cabeçalho transparente, podemos escolher uma cor de fundo para mudar também após a rolagem Então, vamos voltar aqui e selecionar esse azul escuro, voltar aqui, cor de fundo, selecionar isso e, em seguida, colar isso lá e publicar. Feche-os, vá para o editor e atualize esta pré-visualização Agora, quando começarmos a rolar, ela mudará para azul, mantendo tudo visível Quando rolamos para cima, o fundo desaparece. Então é assim que se faz isso. Na próxima lição, vamos ver agora como criar a seção de serviços. 15. Seção de serviços: Agora é hora de criar a seção de serviços. Então, vamos ver o que temos aqui. Temos essas quatro caixas e esse cara. Então, vamos voltar aqui. Vamos reutilizar algumas das coisas que já criamos Então, vou apenas duplicar esta seção. E sim, nós já temos esses dois. Porque observe aqui, esta é uma coluna e outra coluna. Então, vamos adicionar um título e um texto acima dele. Então, acima desse contêiner, vamos duplicar essa boneca Alex E eu quero colocá-lo logo acima desta seção. E eu também quero selecionar a duplicação desse texto. É tudo uma questão de reutilizar coisas que você já estilizou logo abaixo de Alex Então vamos ao estilo. Alinhe ao centro, selecione isso. Queremos mudar isso para dois anos e usar o estilo Título. tipografia reduz o tamanho, talvez até o tamanho traseiro Isso é razoável. E observe aqui que ele tem esse separador Então, vamos ativar o separador de conteúdo. Mas agora precisamos nos livrar dessa margem inferior dessa forma. E eu quero copiar esse texto. Selecione isso, vá para todo o conteúdo Control Shift VL. Observe aqui que isso tem uma largura restrita. Então, enquanto estiver selecionado, eu quero ir para a largura personalizada avançada. Eu queria ocupar 60% da largura disponível desse contêiner que o contém. Altere o separador, selecione esses textos. O separador deve ser branco. E eles deveriam ser meus serviços. Meus serviços. Agora, eu quero que seja o ras, as cores devem ser amarelas normalmente. Copie isso, vá aqui, selecione aqui, espaço, cole lá, corte isso, remova aquele espaço, vá aqui passando corte isso, remova aquele espaço, o mouse, desse jeito Agora, dentro dessas duas colunas que já criamos. Antes de tudo, quero selecionar essa coluna e dizer que ela deve ocupar 40% e esses 60%. Quer remover tudo daqui. E a partir daqui. Tudo bem. Há um bug. Isso não está funcionando, então clique com o botão direito do mouse em excluir. Então, temos essas duas colunas publicadas. Digamos que sim, isso é 60 40 só de olhar para ele. Ou podemos simplesmente fazer com que seja 50 50 ou 45 55. Agora, aqui, também precisamos adicionar precisamos adicionar alguns contêineres, um contêiner acima e outro abaixo dele. E então, em cada uma dessas duas linhas, teremos mais um par de contêineres. Então duplique isso. Mas agora selecionando isso, vamos mudar para linha, então um, dois. Então, na verdade, deixe-me excluir isso, selecionar isso e duplicá-lo para que seja um, dois, três, quatro Duplique isso e vamos colocá-lo aqui. Vá para estilo, título, tipografia e reduza o tamanho Vamos ao conteúdo. Espere, estilize, alinhe ao centro. E o separador deve estar acima. Vamos ver. Separador B. Digamos que no topo. Vou duplicar isso. Coloque-o lá e duplique-o novamente. Coloque-o lá. Eu também vou duplicar, basta duplicar isso ou isso e soltá-lo logo abaixo do centro da Aline Tem uma largura. Então, digamos que é padrão. E eu quero copiar isso. Selecione isso, vá para o conteúdo, cole lá. É o mesmo texto, então vou duplicá-lo Não, logo abaixo disso. O que temos aqui é um contêiner com duas colunas. Essa é essa coluna e essa coluna. E nesta coluna, temos um contêiner contendo duas colunas de dois contêineres. Agora, o que queremos fazer é estilizar isso. Basta dar essa cor azul escura. Vou selecionar isso para copiar sua cor, ir para o plano de fundo. Copie isso. Selecione este contêiner, vá para Plano de fundo avançado. Cor, saboreie isso aí. Vamos para o estofamento. Vamos dar um preenchimento de 20. E vamos ao seu estilo de borda, borda 20. Selecione isso. Tudo bem, vamos selecionar enquanto ainda está selecionado, clique com o botão direito do mouse em copiar Selecione esse estilo de colar links à direita. Selecione esse estilo de colar links à direita. Estilo de pasta. Agora, você notará que há muito espaço aqui, devido ao preenchimento padrão do preenchimento padrão do contêiner que contém os dois Então, vamos para o avançado, quebre o preenchimento aqui Vamos selecionar esse também. Esse contêiner. Avançado, remova esse preenchimento, publique isso E agora eu não gosto do jeito que isso está perto do topo Poderíamos selecionar esse título, ir para a margem avançada, entre os dez primeiros, à direita, sem cópia. Selecione isso, clique com o botão direito do mouse no estilo de colar, selecione isso, clique com o botão direito do mouse no estilo de colar, cole o estilo, publique lá. Agora, você também notará que temos essas decorações aqui Se você precisar deles, podemos simplesmente ir até um deles, ir para estilo, sobreposição de fundo e dar um gradiente E o gradiente vai usar esse azul claro e o azul escuro para a segunda cor E queremos mudar para o rádio. Então, na verdade, esse azul deveria ser Esse azul aqui deve ser a segunda cor. E o azul escuro aqui deve ser a primeira cor. Então, digamos Opacidade no canto inferior esquerdo. Vamos aumentar a localização para 80%. Então faça o que eu acabei de fazer. Rádio, tipo radiante, posição inferior esquerda. Você pode alterar a opacidade se quiser e a localização em 80%. Agora vou selecionar essa cópia. Estilo de pasta. Estilo de colagem e estilo de colagem. Agora, ele também tem uma borda. Então, vamos ao estilo. Borda sólida. E vamos fazer com que a borda fique azul. Vamos dar um pouco de azul assim. Cor da borda de um. Não, digamos dois, contorne com Sim, então copie o estilo e cole, selecione, vazar o estilo de colar à direita, selecione o vazamento certo, cole o estilo, publique Agora, se pré-visualizarmos isso, vamos lá. Então, na próxima lição, vamos adicionar essa imagem. Te vejo em breve. 16. Imagem de serviços: Então, agora é hora de criar a imagem dos serviços. Mas antes de fazermos isso, acabei de notar que esqueci de dar a esta seção um fundo azul escuro Então, vamos selecionar o fundo azul escuro, copiá-lo e voltar ao nosso editor, selecionar a seção e ir para o estilo. Isso está selecionado? Tudo bem, estilo. Fundo apertado. Vamos dar aquele azul escuro. Agora, aqui mesmo, o que queremos fazer é dar a cor azul clara. Então, vou selecionar isso. Selecione esta coluna, vá para estilo. Fundo azul. Vamos também atribuir a ele um raio de borda de 20. Na verdade, o fundo não deve ser azul. Eu deveria ter um gradiente. Então, vamos voltar ao gradiente de cor de fundo. E vamos dar o mesmo azul claro mas torná-lo mais escuro E então mude isso para rádio. Podemos mover um pouco o local ou reduzir esse azul desse jeito. Então, agora o que queremos fazer aqui é simplesmente adicionar uma imagem e a imagem básica. Selecione isso. Vamos fazer o upload da imagem que quisermos. Esse é o que eu usei. No final das contas, estamos apenas aprendendo a usar o Elementor Você deve se sentir à vontade para criar qualquer tipo de site que desejar. Agora, vamos adicionar um divisor logo abaixo dele. Então, adicione. Ainda no básico, temos o elemento divisor Vamos colocá-lo logo abaixo da imagem. Tudo bem, parece que esta coluna está definida como linha por padrão. Sim, devemos mudar para a coluna vertical. E agora vamos adicionar esse divisor. Exatamente desse jeito. Com a divisória selecionada, vou para a largura e a reduzo para, digamos, 50% e a alinho no centro, vou para a margem avançada Até lá, depois estilize. Em primeiro lugar, vamos trocá-las por barras, mas você pode alterá-las para o que quiser Caso não pareçam cortes, basta clicar aqui para ver o valor O seu pode aparecer. Vamos ver. Tudo bem Vamos aumentar o peso de cada barra Aumente esse tamanho desse jeito. Reduza um pouco o peso. Portanto, brinque com essas configurações até obter a barra certa ou simplesmente escolha qualquer outra opção que desejar aqui Você também pode usar encaracolado, que, não, é curvo. Eu também gosto desse. Na verdade, deixe-me ficar com isso e depois esperar. Tamanho. Oh, essa é a altura, a quantidade. E eu quero escolher essa cor amarela. E dê aquela cor amarela. Se você mudar para barras, vamos contornar a lacuna, reduzir a largura novamente e depois publicar Essa imagem é um pouco mais alta do que as caixas de texto. Não é ruim, mas queremos garantir que tudo seja um pouco mais compacto. Esta seção também é muito ampla. Então, eu quero selecionar todo o recipiente que os contém e mudar isso para 70%. Publique isso. E vamos ver o que temos a seguir. Sim, é um pouco mais equilibrado. Então, basta brincar com essas configurações e ver como tornar isso mais criativo. Agora, eu não atualizei esses serviços. Por exemplo, isso pode ser, vamos ao conteúdo. Vamos remover esse M. Em seguida, altere os serviços para design de espaço gráfico, selecione isso, remova a modelagem de design de espaço web M. modelagem de design de espaço Publique isso. Você também pode brincar com o tipo de separador se for para o separador. Onde você muda isso? Acho que está no separador de conteúdo. Pode mudar para talvez sólido com estrela. Sim, basta brincar com isso e ver os melhores resultados que você pode obter. Eu vou usar um padrão pontilhado. Publique. Mais uma vez. Sim, acho que está bom agora. Isso deve ser mais conveniente. Vamos selecionar o texto. Vá para avançado com, eu diria 50%. Publique e vamos aqui. Sim, você pode até mesmo percorrer 40% da largura. 40% disso. Então é aqui que vamos terminar esta lição. Agora, mais uma coisa. Precisamos de um pouco de preenchimento abaixo e acima do conteúdo do contêiner Portanto, o preenchimento deve estar no próprio contêiner, o contêiner selecionado, avançado, quebrá-lo, depois a margem superior de 50, o preenchimento de 50, preenchimento inferior de Exatamente desse jeito. Então, nos vemos na próxima lição. 17. Seção de portfólio: Ei, bem-vindo de volta. Então, agora é hora de criar a seção anterior de trabalho ou portfólio. Então, como você cria isso? Voltando a isso. Vamos até nosso editor. Eu só vou duplicar isso. Assim, agora temos dois. Selecionando o recipiente em si, vá para o estilo e remova a cor. Selecione o plano de fundo e, em seguida, remova-o. O que mais precisamos? Precisamos remover esses contêineres, todos eles. Na verdade, vamos criar um contêiner. Vamos adicionar um contêiner logo abaixo. Sim. E vamos selecionar o contêiner em si e torná-lo 60% da largura. Na verdade, 50 ou 40%. 50%. Agora, o que queremos fazer é adicionar uma caixa de imagem aqui. Então, caixa de imagem. E queremos usar não use a caixa de imagem do próprio Elementor. Use a caixa de imagem do elements kid. Vou colocar isso aí. E vou duplicá-lo duas vezes, um, dois, depois selecionar o próprio contêiner e mudar para a linha Agora temos três caixas de imagem. Agora eu quero copiar o nome desse projeto, selecionar a primeira caixa de imagem. Vamos mover isso. Vamos até o corpo, mude o título. Vamos até a descrição, colá-la lá e o botão deve salvar a visualização do projeto. Recolha isso. Vamos até a imagem. Quero selecionar uma imagem, fazer upload de arquivos. Vou selecionar isso como a primeira imagem. Selecione isso. Agora, com o conteúdo pronto, vamos ao estilo. Vamos até a imagem e atribuamos a ela um raio de borda. Do top 20. Então, isso é no canto superior esquerdo. Vamos para a direita, 20. Sim. Vamos até o corpo. Raio da borda, quebre os 20 inferiores. Tudo bem, vamos dar um pano de fundo primeiro. Tipo de plano de fundo. Vamos dar uma olhada Vamos dar essa cor por enquanto. Então, agora, quando demos a ela um raio de 20 para a garrafa, ela a deu deste lado Então, vamos para a esquerda 20. Vamos até o botão. Tudo bem Vamos dar essa cor escura. Então, digite o plano de fundo com essa cor escura. E ao passar o mouse, queremos que ele tenha uma cor gradiente. Então, vamos escolher nosso amarelo e laranja. Deveria ser amarelo. Vamos falar laranja como a primeira cor. E agora vamos mudar isso para 90 graus, sem mais nem menos. Também podemos alterar essa cor sob o título do corpo, tipografia, Vamos dar a tipografia do título em vez Deve ser um cinza mais claro. Sim, cinza claro estabelecido. Copie isso, selecione esse estilo de pasta, selecione esse estilo de pasta Selecione esta opção para escolher uma imagem de projeto de imagem. Vou selecionar isso. Agora, tente garantir que todas as imagens do projeto de imagens tenham o mesmo tamanho. Porque é o tamanho da imagem que determinará. Como você pode ver agora, elas parecem um pouco estranhas, mas eu simplesmente não tive tempo preparar as duas diferentes para preparar todas as imagens do projeto, mas tentei fazê-las do mesmo tamanho e dimensões para que todas pareçam idênticas assim Como você pode ver, eles são mais apresentáveis do que ter um alto outro baixo, mas cabe a você publicar isso Então, deixe-me copiar essa descrição, selecionar isso, ir até o conteúdo, colar no corpo. Copie isso, vá aqui, corpo, cole uma revista de cultura Z é o título. Barton deveria ler Exibir projetos. Publique essa visualização. Rolando para baixo. Lá vamos nós. Uma boa seção do meu portfólio. Meu portfólio. Vou colar isso aí. E acho que agora estamos prontos para passar para a próxima seção, que é a seção de depoimentos de clientes O que as pessoas estão dizendo sobre sua empresa? Te vejo em breve. 18. Testemunhos de clientes: Agora é hora de criar essa seção de depoimentos de clientes, e é isso que queremos alcançar Então, mudando para nosso editor. Aqui mesmo. Vou apenas duplicar esta seção Então duplique isso. E agora nós o temos aqui embaixo. E vou excluir tudo o que está dentro desse contêiner porque ele já tem as configurações de que precisamos. Agora, vou dizer que adicione elementos, depoimentos. E como você pode ver, temos um depoimento gratuito com Elementor e outro gratuito com o kit de elementos Este é o kit de elementos que precisamos. Então, vou deixar isso aí. E como você pode ver, ele tem vários estilos. O que eu escolhi para referência é esse. Então, vou escolher o estilo cinco. Então aí está. E vou entrar nas configurações, e queremos mostrar dois slides qualquer momento, então um, dois. Enquanto isso estiver selecionado, vou fechar as configurações, expandir o depoimento, e esses são os espaços reservados padrão para depoimentos Então, vou expandir o depoimento um. Então, vou escolher alguns textos, talvez este seja apenas um espaço reservado porque eu não quero digitar isso, cole lá Foi o que o primeiro cliente disse. E eu vou dar o nome desse cliente Clark Kent A designação talvez seja mais limitada. Metro Goldwine. A segunda, talvez derrube Clark Kent e vá para o depoimento dois. Digamos que Jennifer Anniston, com designação E, CFO da Green Goblin Association CFO da Green Goblin Association Eu só vou pegar uma mensagem aqui. Talvez isso. E cole dentro da resenha do depoimento, expanda os terceiros. Portanto, temos pelo menos uma seção básica de depoimentos, mas podemos fazer melhor Então, primeiro de tudo, vamos fazer isso e mudar o portfólio para depoimentos E vamos começar aqui com depoimentos de clientes. Lá vamos nós. Recolhendo o título novamente e selecionando-o para o depoimento aqui, podemos optar por dar uma avaliação Talvez esse cara tenha nos dado uma classificação de quatro estrelas, e os outros nos deram duas. Então, eu vou publicar isso. Entre no estilo, porque agora queremos estilizar isso. Também podemos voltar ao depoimento aqui, expandir cada depoimento e adicionar um avatar de cliente Então, vou selecionar isso e fazer upload. Digamos que seja um relógio. Selecione. E agora vamos lá. Então, farei o mesmo com esses outros dois. Publique isso e vamos pré-visualizar as alterações. Rolando para baixo. Lá vamos nós. Então, agora podemos dar a eles alguns cantos arredondados, se você preferir. Então, enquanto ainda estiver selecionado, vou para estilo, raio da borda do layout Vamos ver, 20, sem mais nem menos. Publique. Não precisamos nos aprofundar, mas, como você pode ver, podemos editar diferentes partes dos depoimentos Por exemplo, essas citações, ícone de citação, podemos mudar sua cor. Como você pode ver, podemos dar a cor que quisermos. No momento, está vermelho, mas isso não faz sentido. Então, vou deixar um pouco azul, digamos que aqui, mas podemos reduzir a opacidade para torná-la menos visível, talvez até aquele ponto e publicá-la Visualize as alterações. E lá vamos nós. Você também pode voltar aqui para as configurações de conteúdo e definir a velocidade. Se você quiser que ele fique mais tempo antes de rolar, talvez você possa dizer que queremos levar 2000 milissegundos São 2 segundos. Você também pode decidir mostrar pontos, por exemplo Então, vou mostrar pontos aqui para poder clicar nos botões para navegar E você pode editar a cor dos pontos. Acho que é do tipo de plano de fundo. Você pode dar essa cor amarela. Tudo bem, vamos dar branco e quando estiver ativo, podemos dar aquela cor amarela. Quando estiver ativo, deixe-me selecionar esse estilo, ir para o título do foco, copiá-lo, voltar para isso, ir para o ponto, ir para o fundo ativo, dar aquela cor. Então, agora o ativo é o amarelo. Publique isso. Visualize as alterações. Lá vamos nós. Então é assim que se cria a seção de depoimentos. 19. Efeitos de movimento: Agora é hora de trabalhar nos efeitos de movimento. Se eu atualizar a página, você notará que os elementos estão se movendo suavemente Então, deixe-me atualizar esta página desse jeito. Movimento Esses efeitos de movimento realmente melhoram a experiência do usuário. Quando eu rolo, temos aquela entrada ali mesmo. Nós também temos isso. Então, como criamos isso? Indo para o nosso editor Vamos voltar aqui. Eu só vou fechar isso. Porque temos o cabeçalho aqui, e a seção do herói tem colunas que agora vão até o topo porque esse é um cabeçalho fixo. Selecionar essas colunas dentro da seção de heróis é um pouco complicado Então, pressionarei o Controle I para abrir a estrutura. E agora podemos entrar nesses contêineres. Agora, vamos selecionar esse contêiner com tudo dentro dele e vamos para o layout reduzido avançado, para defeitos de movimento Vamos para a animação de entrada. Eu adoro desaparecer para a esquerda. Isso vai trazê-lo pela esquerda. E, claro, vou selecionar esse outro, aquele que contém a imagem. Vá para o layout de colapso avançado, vá para efeitos de movimento, animação de entrada, fade in right, sem mais nem menos Mas agora, essa imagem está separada do plano de fundo. Então, queremos um pequeno atraso nessa imagem do cara. Então, expandindo isso, na verdade, posso simplesmente selecionar o elemento cara e ir para layout avançado, efeitos de movimento. Animação de entrada, desaparecendo para a direita, mas queremos atrasar a animação, atrasar a animação talvez em 300 milissegundos Isso significa que, como a coluna em si tem esse desbotamento correto sem nenhum atraso, ela aparecerá primeiro e, em seguida, a imagem terá um atraso de 300 milissegundos Vai chegar um pouco mais tarde. Então, vamos publicar isso e visualizar as alterações. Revise isso. Exatamente assim. Mas agora precisamos fazer o mesmo com esse bloco de texto. Vamos apenas atualizar esta página e ver. Eles estão todos chegando porque nós apenas animamos o contêiner que os contém. Se examinarmos primeiro os elementos individuais , como este texto, podemos dar a eles o mesmo tratamento, cada elemento, o mesmo tratamento. Então, na verdade, isso pode vir por padrão com o contêiner, então é aqui que começamos nosso atraso. Alex, porém, vá para efeitos de movimento de layout avançados, desaparecendo esquerda com um atraso de 200 milissegundos Em seguida, esse movimento do layout de colapso afeta, desaparecendo para a esquerda, 300 milissegundos Talvez vamos selecionar todo esse contêiner contendo esses dois, criar efeitos de movimento desaparecer à esquerda 400 milissegundos Você pode ser tão criativo quanto quiser. Como você percebeu aqui, temos vários outros tipos de animações. Você não precisa fazer fade in. Você também pode ampliar ou pular o que quiser. Então, vamos pré-visualizar as mudanças agora. Exatamente assim. Vamos atualizar a página novamente. Lá vamos nós. Eu adoro isso. Agora, é a mesma coisa que vamos repetir em qualquer outro lugar que quisermos. Vamos fazer isso agora, e vou deixar isso para você fazer como uma tarefa. Então, o mesmo caso se aplica a isso. Eu vou selecionar isso. Reduza os efeitos de movimento, desaparecendo para a esquerda. Selecione isso, coloque os efeitos de movimento, desaparecendo para a direita. Vou selecionar este, o botão, adiar. Desaparecendo para a esquerda com um atraso de 300 milissegundos. Também vou fornecer isso por padrão, esse contêiner traz tudo ao mesmo tempo. Eu quero que você traga isso primeiro, então isso terá um atraso de 200 e esse 300. Então, com isso selecionado, vamos aqui desaparecendo para a direita, atraso de 200 e esse atraso de 300 OK. Fade in right. OK. Lá vamos nós. Então, pré-visualize isso. Exatamente. Então, se eu mudar para nossa referência, se eu atualizar isso Veja como eles entram. Então pense em como conseguir um resultado semelhante ao meu. Essa é a sua tarefa. Espero que tenha entendido o que fizemos aqui. É uma tarefa interessante que eu acho que você vai gostar 20. Links: Agora é hora de garantir que nosso site seja navegável. Quando as pessoas clicam em Link, elas precisam ser levadas para algum lugar. Em nosso site de referência, quando você clica em Serviços, ele desce até a seção Meus serviços. Se você clicar em portfólio, ele descerá até meu trabalho anterior Se entrarmos em contato, ele vai para a seção de contato. Como adicionamos links e como garantimos que cada clique no link leve você ao lugar certo? Vamos ver como fazer isso. Aqui estamos dentro da nossa área de trabalho. Se eu clicar, vamos ao editor. Se eu selecionar o botão de serviços, como você vê, temos um espaço reservado aqui Mas o que queremos fazer é garantir que, ao clicar aqui, ele desça até a área de meus serviços Então, o que queremos usar é um link âncora. Então eu vou dizer Adicionar elemento, âncora, âncora de menu. E o que isso faz é colocá-lo exatamente onde você deseja que o clique do botão o leve. Então, queremos que ele nos leve até aqui. Então, vou arrastar esse elemento âncora aqui. E esse não é o lugar certo, mas quero ilustrar por que não é o lugar certo Então, nós o colocamos ali mesmo, e agora é o item selecionado. Então, o que queremos fazer aqui é dar um nome a ele, seja qual for o nome que vamos usar no campo de link do botão. Então, isso são serviços. Pode ser qualquer nome. Então, demos a ele o nome de serviços, esse é o destino. Então, quando vamos até o botão aqui no campo do link, queremos dar a ele esse nome de destino. Então, serviços. E isso significa que quando clicarmos nele, ele nos levará. Vou rolar para baixo até a seção de serviços. Mas agora o problema é que isso nos levará até aqui. O que ele faz é rolar e colocar esse elemento âncora no topo Então, se eu publicar isso e visualizar as alterações. Se clicarmos nesses serviços, como você pode ver , está ocultando o título de onde queremos estar e não queremos estar lá. É por isso que eu disse que não é correto colocá-lo lá. Isso é apenas um bug baseado no design do software. Então, o que queremos fazer é colocá-lo um pouco mais alto para que, quando clicado, o cabeçalho dos serviços fique um pouco mais baixo Então, queremos arrastar isso para fora e colocá-lo talvez ali dentro da seção anterior. Não importa em qual seção está. O que queremos pensar é esse elemento de ancoragem será colocado no topo E se o título que você deseja estiver muito próximo dele, ele ficará oculto por esse cabeçalho flutuante. Portanto, queremos que fique mais longe do título da seção de destino. Então, agora que está lá, vamos publicar e visualizar as alterações. Agora, quando clicamos nele é colocada no topo. E como há essa lacuna aqui entre isso e o título, pelo menos ela empurrou o título para baixo. Então essa é a essência do que queremos alcançar. A próxima coisa que queremos fazer é ver meu trabalho. Então, como agora sabemos sobre a nomenclatura do destino, o que podemos fazer é simplesmente dar a ele o portfólio como um nome, portfólio E então eu vou duplicar essa âncora. E arraste-o para baixo, não consigo continuar rolando, então deixe-me deletar isso e ir aqui, depois digitar âncora Eu quero colocá-lo aqui na seção anterior. Enquanto ainda estiver selecionado, vamos dar a ele esse nome de portfólio. E como nosso botão já tem o portfólio de hash publicado, entramos aqui, clique aqui e será levado para a seção do meu portfólio Agora, a grande questão é: os que estão no topo Se eu clicar em Serviços, ele não vai a lugar nenhum. Como criamos esse menu? Entramos no painel. Então, vamos entrar nos menus de aparência. E lembre-se de como criamos esses links personalizados. Então, se eu expandir esse link personalizado, lembre-se de que ele tem uma URL. Usamos haxixe Enquanto o criávamos , adicionamos um hash. É isso mesmo. Então, isso são serviços. Recolha isso, e isso é portfólio. Colapse aí. Então, é claro, da mesma forma, digamos que seja o menu de contato e salvamento. Agora, voltaremos aqui e atualizaremos esse editor para informá-lo sobre as alterações que fizemos no painel Agora vamos pré-visualizar as alterações. Agora, se você clicar em Serviços, portfólio deles será levado para lá. E entre em contato, não adicionamos um elemento âncora. Deixe-me fechar isso e recuar. Se rolarmos para baixo, teremos apenas alguns depoimentos Deixe-me duplicar isso agora que temos isso. Podemos dizer, vamos excluir esse cliente, digamos, espaço de contato, M. E agora podemos dizer adicionar âncora, e vamos colocá-la diretamente na seção anterior Entre em contato, publique. E como já fornecemos esse contato de hash, se clicarmos em contato aqui, seremos levados até aqui Agora, vamos trabalhar neste formulário de contato. Se acessarmos o site de referência, precisamos criar um formulário de contato para uma aula posterior. Então não se preocupe com isso. Só queríamos acertar os links. Agora, nós também temos esse livro para mim. Então, é claro, vamos para Elementor, certo, link, Openlink em New tap Eu quero editar este livro sozinho. E é redundante, mas é só para mostrar que você pode ter um botão aqui, mas isso também nos levará ao formulário de contato, porque se alguém quiser reservar para você, acessará o formulário de contato Então, o livro M é o botão. Então entre em contato, publique. Tudo bem, então voltando ao editor, atualize. E também atualize esta página aqui e diga Reserve-me. Isso nos levará à página Fale comigo. Então eu acho que esse é o fim desta lição. Te vejo na próxima. 21. Seção de rodapé: Agora é hora de criar a fera. Vamos até nosso editor aqui mesmo. Então, agora não vamos criar o rodapé aqui. Agora, isso está reservado para o formulário de contato. Vamos deixar esse editor. Também não vamos trabalhar na seção de cabeçalho. Vamos entrar no painel e lembrar como criamos o cabeçalho usando kit de elementos, cabeçalho e rodapé Então, voltando ao kit de elementos do painel, cabeçalho e rodapé. Agora temos um cabeçalho. Digamos que adicione novos modelos de rodapé, escolha o rodapé aqui. Vamos torná-lo visível em todo o lado e, digamos, editar o conteúdo. Aqui estamos. Agora, isso nos permite também aprender outra coisa sobre o Elementor, que é que você pode usar modelos predefinidos Você não precisa criar tudo sozinho. Esses são modelos Elementor e esses são modelos de kit de elementos Então eu vou clicar nele, e isso vai abrir esse pop-up. Como você pode ver, temos todas as páginas. Página completa, você pode simplesmente clicar e instalar em vez de passar horas criando a página sozinho. Mas é claro que você queria aprender a criar páginas da Web do zero antes de começar a usar modelos. Agora, vamos para a categoria e escolher o rodapé. Sim, vamos até Footer aqui. E o que eu escolhi é esse aqui. Então, vou dizer inserir e foi inserido. Agora, lembre-se, nosso site está ocupando o contêiner principal está ocupando 100%, e o contêiner contendo o conteúdo dentro do contêiner externo está ocupando 80% Então, vamos garantir que esse seja o caso com esse modelo. Se eu selecionar isso, como você pode ver, isso é Fitzels, queremos ter certeza de que é uma porcentagem e é 100% E esse controle interno para que eu possa selecionar esse contêiner contendo o conteúdo. Quero que seja 80% do contêiner externo e, agora, selecionando o contêiner externo, vamos alinhar tudo ao centro Publique isso e vamos revisar as alterações. Revise isso. Lá vamos nós. Agora, podemos clicar aqui para adicionar um logotipo. Basta selecionar nosso logotipo, selecione. Vou acessar o site de referência e selecionar copiar a mensagem fotográfica aqui. Cole isso aí. Não, esse é o título. W a descrição do título. Mudança de controle. Voltando à referência, criando materiais de comunicação atemporais e indo para a descrição do título, A, Control Shift E selecione esse botão. Veja meu trabalho. E eu quero fazer disso um link externo. Então, digamos que, na verdade, se formos ao meu site de referência aqui, essa é a referência. Se eu clicar aqui, ele abrirá uma nova guia e acessará meu portfólio B hands. Esse é o meu trabalho. Então veja meu trabalho, abre meu trabalho em uma nova guia. Então, como fazemos isso? Voltando aqui, deixe-me copiar isso da referência. Agora, voltando aqui, temos o botão selecionado. Vou colá-lo no campo URL e, para abrir em uma nova guia, vou clicar aqui e dizer abrir em nova janela. Então publique isso. Revise isso. Agora, se eu clicar aqui, abrirá meu portfólio do Behans Então, como você pode ver, todos os direitos reservados e a barra N aqui precisam de alguma edição. Queremos que o recipiente que os contém também seja 80% do recipiente externo. Isso não está de acordo com nosso esquema de cores. Então, eu quero entrar na nossa página aqui e selecionar um dos elementos com a cor. Vamos copiar esse amarelo, voltar ao editor de rodapé, selecionar esse elemento, ir para estilo, título focado É o mesmo elemento de cabeçalho. Publique isso. Se eu selecionar isso, como você pode ver, o esquema de cores também não é o mesmo. Esta é uma lista de ícones. Então, indo para o estilo de texto, mouse, cole essa cor ali mesmo Ao passar o mouse, deve ser aquela marca amarela. O mesmo caso se aplica a esse estilo de botão. A cor do texto em H deve ser a cor da nossa marca. Publique. Vamos dar uma olhada. Lá vamos nós. Mas agora precisamos atualizar os botões porque eles não vão a lugar nenhum. Eles vieram com o modelo. Nós não os configuramos. Então, selecionando o conteúdo dos elementos, vamos para o B. A deve simplesmente ir para a URL, a página inicial, recolher acima, ir para o portfólio O portfólio deve ir para HH, portfólio Lembre-se da âncora, serviços devem ir para os serviços de hash Os serviços e o contato devem ir para hash Contact. Publique isso e vamos pré-visualizar as alterações. Na verdade, deveria estar nesta página. Deixe-me atualizar a página para que o rodapé reflita. Agora, se eu clicar em portfólio, ele vai para lá. Se eu entrar em contato, descer até lá, se eu for até aqui, serviços, ele vai rolar para cima Muito bom Você também pode clicar aqui para ir para o topo, sem mais nem menos. Acho que o rodapé agora está coberto. Agora, há esse elemento de ícones sociais, que provavelmente é algo fácil de fazer com base em tudo o que pudemos fazer até agora. Então, primeiro de tudo, se expandirmos o ícone do Facebook, podemos ir até a cor e dizer personalizada e alterá-la para a cor que queremos. Eu não o tenho na minha prancheta. Mas isso é algo que você pode fazer. Se você quiser mudar a cor para a cor da marca para que, ao passar o mouse, ela mude para laranja ou amarelo, essa é uma tarefa que você deve fazer Mas, caso contrário, todo o resto agora está coberto. Também podemos selecionar isso e alterar esse conteúdo 2027. E mude esse alfinete de foto para Alex Doe. Seu nome agora. Publique isso. Reserva de carros Alex Doe. 22. Seção de contato: É hora de criar um formulário de contato para nosso site de página única. Então, indo ao nosso editor aqui, já havíamos criado uma seção de contato. O que falta aqui é um formulário de contato. Então, como mencionei anteriormente, para criar um formulário, precisaremos de um plugin, um plugin de formulário. Existem muitos tipos de plug-ins de formulários. Meu favorito e o que eu uso é o forminator. Então, vamos entrar no nosso painel. Só vou porque terminamos com o FUTA, saia para o Wordpress Isso nos levará ao painel. Vou até os plugins, adicionarei o plugin. E eu vou digitar aqui. Deixe-me descartar tudo isso Aqui, vou digitar Ominator. Aqui estamos o FormatorFMS instalado agora Ativar. Ele vai aparecer aqui mesmo. Eu posso simplesmente ir diretamente para Formulários. Ou deixe-me clicar no painel para nos levar à página inicial do plugin. Aqui está a página inicial Aqui, quero escolher a solicitação de cotação porque, essencialmente, o que queremos aqui é que alguém solicite uma cotação. Se você olhar o site de referência que eu criei, onde está o site de referência? Aqui, queremos que alguém possa escolher um serviço de modelagem de cartões de web design, talvez escolher a edição de vídeo, digitar alguns detalhes do projeto, depois seu primeiro nome e endereço de e-mail e solicitar uma cotação para este projeto que acabou de descrever. Então, como fazemos isso? Voltando aqui, podemos criar um formulário do zero, mas isso é uma lição para uma turma futura. No momento, podemos apenas usar um modelo. Então, crie um formulário. Então, esses são os campos, serviços, nós adicionais, primeiro nome, endereço de e-mail, número de telefone. Se você não quiser o número de telefone, basta remover esse campo. Se você quiser renomear qualquer campo, basta clicar nele e alterá-lo Então descreva seu projeto. Candidatura do projeto. Agora, descreva seu projeto. Para o primeiro nome aqui, você pode expandi-lo para desativar o prefixo, o segundo nome e o sobrenome, porque queremos apenas o primeiro nome Não queremos vários campos. E para o e-mail, parece bom. Então, vou dizer publicar e obteremos esse código curto, que colaremos na frente e o formulário aparecerá onde quer que colemos esse código curto. Então, vou copiar o código curto. Feche isso, vá ao nosso editor, adicione elemento, elemento de código curto. É apenas um espaço reservado para colar qualquer código curto que você tenha Então deixe isso aí. E agora colamos o código curto. Acabamos de copiá-lo do painel de controle que está lá. E o formulário deve aparecer aqui, publicar. OK. Vamos nos inscrever para atualizar o editor e ver o formulário. Rolando para baixo. Aqui está o formulário. Agora, esses serviços são uma seleção. Não, esse é um tipo de elemento de caixa de seleção e não é isso que queremos Mas antes de mudarmos isso, deixe-me voltar aqui e pré-visualizar as mudanças. Entre em contato, e isso é o que parece agora. Agora, quero fechá-los porque não os estamos mais usando. Vamos ver como estilizar isso. Então, voltando ao nosso formulário na área do formador, primeiro mencionei que esse é um campo de caixa de seleção Não queremos um campo de caixa de seleção. Queremos abrir o campo. Então, vou excluir isso e dizer inserir campos do formulário. O que acabamos de excluir é um tipo de campo de caixa de seleção. O que queremos é selecionar um campo de inserção. Agora precisamos de opções aqui. Quais serviços estamos oferecendo? Design gráfico, web design, opção de adição, edição de vídeo, opção de adição, modelagem de cartões. Se você quiser que alguém possa selecionar várias opções, como eu mostrei, você pode selecionar esse múltiplo. Se você quiser que alguém possa selecionar apenas um serviço e descrever o que deseja, basta deixá-lo sozinho. Vamos ver o que mais? Selecione o tipo de serviço. Aplicar. Agora podemos arrastar isso e colocá-lo acima. É o primeiro a entrar, publique as alterações. Agora, se formos ao nosso editor e selecionarmos o elemento, o elemento de código curto e aplicarmos, isso refletirá as alterações que acabamos de fazer no back-end do painel. Visualize as alterações e vamos ver com quem temos contato. Agora, aqui temos uma lista suspensa e alguém só pode escolher um tipo de serviço. Vamos ver como estilizar esse formulário na próxima lição, porque você não quer que essa lição seja muito longa, então nos vemos em breve. 23. Estilize o formato: Agora é hora de destacar nosso formulário. Então, primeiro, clique em Visualizar para que possamos ver o que temos ou entrar em contato. Percebemos que ele encolheu e foi empurrado para a esquerda. Então, primeiro, voltando aqui, queremos selecionar o formulário em si, ir para Avançado e, para a largura, queremos dizer largura total para que ocupe toda a largura do contêiner que o contém Então publique isso e vamos pré-visualizar as alterações. Entre em contato. Agora está ocupando toda a largura, mas queremos que essa largura seja 50% Eu gosto que seja estreito. Indo até aqui. Acho que é um tamanho de formulário melhor. Agora, a próxima coisa que queremos fazer é editar esse campo de seleção. Agora, lembre-se, temos diferentes tipos de campos aqui. Esse é um campo de nome. Esse é um campo de e-mail. Isso é o que é esse campo de área de texto. E há diferentes tipos de campos aqui, e o formulador nos fornece uma maneira de editar cada tipo de campo que você usou Então isso acontece nessa aparência do painel. Então, primeiro de tudo, podemos usar o estilo. Você pode optar por deixá-la como padrão. Como você pode ver, temos essas fronteiras estreitas. Isso é o que temos. Pode dizer plano, e isso eliminará as bordas se publicarmos e clicarmos aqui, enquanto estiver selecionado, aplicar e visualizar, vá para contato. Você notará agora que não há fronteiras. Você também pode torná-lo ousado. Isso significa fronteiras ousadas. E como você pode imaginar, se eu for aqui e apenas atualizar esta página, ela tem bordas Então é isso. Então, deixe-me dizer que queremos que ele permaneça no padrão. E o que realmente nos interessa são as cores. Queremos usar cores personalizadas. Isso expande todos esses tipos de campos. Aqui está um campo de seleção, para que possamos estilizar a seleção. Por exemplo, podemos dizer que queremos que a cor da borda seja branca e que a cor da borda seja branca. Então, se eu disser publicar alterações e ir aqui e atualizar, essa borda ficará branca Então, como você pode ver , agora é branco. Então, o que eu quero é dar um tom porque estamos trabalhando com esse azul claro, queremos dar a ele um tom de azul escuro, mas um pouco diferente para fazê-lo assentar. Então, queremos selecionar esse azul. Vou para as configurações laterais. Lembre-se de que usamos esse azul claro como parte de um gradiente. Então, se você for para o fundo, é a segunda cor. A cor superior era azul escuro. Então, eu quero selecionar esse azul claro. Volte aqui e diga que a cor da borda deve ser azul escuro, mas um pouco mais clara. Talvez essa cor, publique isso. Mas agora, fique à vontade para brincar com as cores que quiser. E, ao mesmo tempo, isso é para mostrar a versatilidade desse plugin Se eu atualizar esta página, agora, como você pode ver, temos aquele azul claro Não se trata de tornar as coisas muito bonitas agora. Agora, também podemos editar esse ícone e o texto. Então, por exemplo, podemos tornar esse texto branco. Então, cor do texto. Essa é a cor do texto do campo. Essa é essa cor, mas queremos a cor do rótulo. Vamos publicar isso e visualizar a atualização das alterações. Sim, então essa é essa cor. Estou procurando o campo Let's go to Basics e alterando o rótulo Então, o rótulo de todos os campos, queremos que seja talvez cinza escuro, publique isso. Agora, se formos aqui e atualizarmos isso, sim, queríamos que os rótulos fossem brancos Agora, se descermos, você também pode alterar a cor da borda do elemento ativo. Princípios básicos do campo de recolher. Vamos entrar no select. Lembre-se de que existe Selecionar, e a seleção tem outro menu chamado Lista suspensa Borda do contêiner. Sim Isso aqui pode mudar para essa publicação cinza, e vamos revisar as alterações. Atualizar. Não, essa não é a cor. Quero que mudemos esse azul marinho. É uma lista suspensa suspensa? Cor do contorno. Foco. Sim, isso. Qualquer elemento em que estamos focando deveria ter, digamos, essa cor. Agora, vamos atualizar isso. Sim, como você pode ver, você pode alterar todos os aspectos desse formulário. Agora, também queremos que essa seja a cor de fundo selecionada para o foco, porque essa é a atual selecionada. Se selecionarmos isso e expandirmos, agora é azul. Portanto, o campo selecionado deve ser , digamos, cinza. Atualize isso. Lá vamos nós. Então, como você pode ver, você pode brincar com isso. Eu quero que a gente mude isso. Selecionado, foque o mouse. Cor da opção. Vamos dar aquele cinza em vez desse preto escuro. Então a opção aqui é essa cor, eu acho. Ok, não é isso. Oh, essas opções, acho que foi isso que mudamos. Deve ser de cor escura escura. Passe o mouse. Também podemos alterar a cor desse ícone. Quando estiver no padrão, queremos que seja branco. Publique as alterações. Este ícone aqui, atualize isso. Sim, é branco e ao pairar, é azul. Branco e ao pairar. Azul. Tudo bem, então sim, então eu quero que vocês mudem essa cor Você vê essa borda azul feia aqui. Acho que é aqui que mudamos isso. Eu quero que seja branco ou cinza claro, arroxeado. E vamos atualizar isso. Sim. Então, eu só queria mostrar a vocês como editar cada campo. Agora, esse era apenas um campo de seleção qual estávamos focando. Podemos reduzi-lo e ir para a área de entrada e texto. Essa é uma área de texto e esses são campos de entrada. Porque se voltarmos ao campo do formulário, se eu selecionar isso, esse é um campo de nome e é um campo de entrada. Feche isso. Isso aqui é um campo de área de texto. Então, esses são campos de entrada e essa é uma área de texto. Isso é uma seleção. Então, voltando à aparência e às cores, queremos ir para a área de entrada e texto, e é aqui que podemos afetar esses três. Então, essas são suas tarefas. Reserve um tempo e brinque com a área de entrada e texto deste formulário. Você também pode trabalhar no botão de envio, que é o botão de solicitação de cotação. Você pode dar a ele uma cor de fundo talvez dessa cor de fundo escura e pronto. Mas sim, vamos dar essa cor amarela. Quero que entremos aqui, selecionemos essa opção, selecionemos essa opção saiamos daqui nas configurações laterais, selecionemos esse estilo de massa, focalizemos o título, selecionemos esse amarelo, copiemos isso, voltemos aqui e entreguemos. Por padrão, vamos dar a ela essa cor amarela. E ao passar o mouse, queremos dar a cor laranja. Copie isso. Ao passar o mouse, queremos dar a ele aquela cor laranja assim. Publique as alterações e vamos pré-visualizar. Na verdade, vamos aqui. Clique em Selecione o formulário e aplique todas as alterações que fizemos e visualize as alterações. Agora, cabe a você acessar o YouTube e assistir a mais vídeos no forminator para entender como usar esse incrível plugin de formulário É um plugin de formulário muito poderoso. Saiba como começar seu formulário exatamente como você deseja. Não queremos que essa aula seja muito longa. Então, entre em contato com o web design. Então, opções aqui e, em seguida, solicite uma cotação. Agora, uma rápida atualização sobre algo que eu lembrei ao editar esta lição. Eu não mostrei que você também pode alterar a cor de fundo desse contêiner aqui. Então, vou selecionar esse contêiner aqui. Vá para Estilo, copie essa cor. Selecione esse tipo de plano de fundo de estilo de contêiner e cole-o lá. Em seguida, vá para o raio de fronteira de 20. Publique isso. Na verdade, também podemos ir para Avançado e atribuir um preenchimento de 20 Publique isso e vamos pré-visualizar as alterações. Vá para contato. Lá vamos nós. Eu 24. Cabeçalho responsivo: Agora é hora de terminar com firmeza, tornando a página responsiva em diferentes dispositivos Então, como você pode ver aqui em cima, temos a visão vertical do tablet e temos uma visão móvel. Portanto, nosso trabalho é ir para baixo, tornando tudo responsivo Mas a primeira coisa que queremos fazer é começar com o cabeçalho. E lembre-se de que criamos o cabeçalho separadamente. Então, vamos editar com Elementor e depois com o cabeçalho. E, na verdade, vou fechar esse editor porque voltaremos lá na próxima lição. No momento, estamos nos concentrando no cabeçalho. Então, aqui está o editor de cabeçalhos. Vou fechar isso. Então, vamos mudar para o retrato do tablet, e ele herdará as configurações que definimos para o desktop Então, como você pode ver, esse recipiente interno contendo todas as três colunas é 80% do recipiente externo rosa externo. Então, queremos fazer isso em 90%. O mais externo é 100%. Se expandirmos para o modo desktop, teremos isso. Então, vamos duplicar isso para ter dois cabeçalhos, e eu pressionarei Control e fecho lá. Agora temos dois cabeçalhos. Temos o cabeçalho original e o que duplicamos. Agora, quero esconder o original e trabalhar no duplicado, que é deixar eu clicar duas vezes nele e chamá-lo de tablet Clique duas vezes no cabeçalho do tablet. Clique duas vezes nele. Este é o cabeçalho da mesa. Isso está escondido por enquanto. Então, estamos trabalhando nisso. E o que queremos fazer é remover esse botão e expandi-lo, expandir esse contêiner. Na verdade, selecione um recipiente que os contenha. E digamos que queremos espaço entre eles. Isso vai separar tudo dentro do contêiner. Portanto, espaço entre o elemento local e o elemento do menu. E a razão pela qual duplicamos o cabeçalho é que, se excluíssemos o botão, se tivéssemos mantido apenas um cabeçalho e excluído o botão, ele seria excluído em todos os dispositivos, incluindo o desktop Então, queremos ter um cabeçalho separado sem o botão. Então, agora que temos isso, podemos clicar aqui e expandir isso. Como você pode ver, temos um menu lateral aqui. E o que queremos fazer é acessar as configurações do menu do celular e ir aqui para o logotipo do menu do celular, e queremos adicionar esse logotipo, selecioná-lo. Agora, se expandirmos, o logotipo estará lá, mas o fundo será branco. Então, vamos ao estilo, invólucro de menu, fundo de invólucro móvel Queremos dar a ele esse fundo azul escuro. Na verdade, vamos ver. Eu quero que a gente vá para as configurações paralelas muito rapidamente. Queremos vencer esse azul escuro. Do fundo lateral, esse azul, copie isso, saia daqui. Vamos esconder isso por um segundo. Volte para o cabeçalho do tablet, vá para o estilo. Na verdade, vamos ao que interessa. Clique no menu de hambúrguer, aqui e cole lá Feche o invólucro do menu, vá para o item do menu Vamos dar a ele uma cor de texto de item de cor branca. No Hover, podemos dar a ele essa cor amarela. Mas no Hover, já tem uma bela cor de foco. Também podemos acessar o invólucro do menu e determinar a largura que queremos Digamos que uma porcentagem aqui. E queremos que seja estreito, não muito largo, ali mesmo. Agora, observe que esse ícone de togo está muito escuro. Então, derrube isso. Quer ir ao menu de hambúrguer. Hambúrguer Há o hambúrguer togo e também esse Este é o togo fechado. Queremos ir para o tipo de plano de fundo tipo de plano de fundo. Onde está o tipo de plano de fundo? E dê-lhe uma cor branca, sem mais nem menos. Depois, há o ícone. Podemos dar a cor que quisermos. No momento, acabei de dar um amarelo aleatório e acho que é bom o suficiente. Agora, voltando aqui, enquanto isso está selecionado, também queremos ir para o Hamburger togo, e queremos ir para o tipo de fundo e dar a ele uma cor branca Tipo de plano de fundo. Publique isso. Você pode dar a cor que quiser. Agora, se pré-visualizarmos, agora estamos pré-visualizando E esquecemos de fornecer um link para esse logotipo. Então, selecione o logotipo, o link, o URL personalizado e vamos fornecer o URL do domínio e publicar. Voltando aqui para que, quando selecionarmos isso, possamos acessar a página inicial E se eu pressionar Control Shift I, agora podemos ir até aqui para habilitar as ferramentas responsivas, e queremos mudá-las para tablets iPad mini, por exemplo, e agora é assim que parece. Agora observe que temos os dois cabeçalhos, o cabeçalho original da área de trabalho e o cabeçalho do tablet Queremos ocultar o cabeçalho do tablet. Queremos ocultar o cabeçalho da área de trabalho quando estamos visualizando o site em um tablet. Então, como fazemos isso? Voltando aqui, queremos selecionar isso e ir para Avançar. Selecione o cabeçalho da área de trabalho, vá para Avançado, feche o layout, vá para Responsivo e oculte no tablet e no celular Portanto, ele só ficará visível no desktop. Então vamos selecionar esse cabeçalho do tablet, vá para Avançado, faça o oposto. Responsivo, esconda no desktop o cabeçalho do tablet porque também vamos reutilizá-lo para telefones celulares Portanto, só ficará visível no celular e no tablet. Publique isso. Você sabe, se voltarmos aqui e clicarmos em casa. Agora, como estamos no modo tablet, só podemos ver o cabeçalho do tablet. Agora, se clicarmos aqui, há nosso menu. Então eu acho que já parece bom. Voltando aqui, vamos para o celular. E também fica bem no celular, mas precisamos exagerar um pouco. Então, selecione um contêiner com eles, vá para Avançado, e eu quero quebrar esse preenchimento e, em seguida, adicionar um preenchimento à esquerda de 20 Agora, digamos dez e adicionando à direita de dez Publicar. Agora, vamos revisar isso. Vamos para casa, vá para, digamos, HL ten. Sim, então é assim que parece. E agora queremos editar isso no celular. Então, selecionar isso, como você pode ver no celular, é muito amplo. Então, com o celular, queremos que seja mais amplo, talvez até a publicação. Voltando aqui, para casa, selecione isso. Agora está parecendo bom. Não se preocupe com isso. Claro, isso não vai aparecer. Isso é wordpress. Essas são ferramentas do Wordpress. Então, basicamente, terminamos com os cabeçalhos. É assim que se faz com que sejam responsivos. 25. Corpo responsivo: Agora é hora de tornar o corpo responsivo. Então, vamos seguir em frente e fazer isso. Vou simplesmente sair das ferramentas responsivas e fechar isso E como estamos com o cabeçalho abaixo, eu também vou fechá-lo. Agora, vamos clicar em Editar com Elementor para editar a página e vamos mudar para o tablet E agora, como você pode ver, já existe um grande problema aqui, queremos selecionar o contêiner superior. Expanda-o, selecione o contêiner dentro dele. E vamos para a margem avançada. Na verdade, vamos quebrar o acolchoamento também. E primeiro de tudo, vamos até a largura e vamos torná-la 100% ou 95% da largura do recipiente rosa mais externo Então, vamos dar a ele uma margem superior de 50. Digamos que 60 ou 70. E agora, enquanto ainda está selecionado, lembre-se de que ainda são duas colunas, uma coluna, duas colunas. Podemos mudar de uma configuração de linha para uma configuração vertical em que as duas colunas não são mais colunas. Eles simplesmente começam. Então, vamos mudar para não, devemos selecionar isso. Vá para o layout e mude para ele. E agora vamos selecionar esse primeiro contêiner e dar a ele 100% de largura, 100% de largura dentro desse contêiner. Vamos também selecionar isso e atribuir 100% de largura. Agora está ocupando 100%. E como isso é 100%, vamos centralizar tudo. Então, aqui mesmo, vamos também selecionar isso e organizar tudo no centro que justifique um centro assim Publique isso. Se pré-visualizarmos, controle a tecla I para abrir as ferramentas de desenvolvimento. Vamos ativar isso e ir para o tablet, iPad Mini . Sim, é assim que parece. Vamos aumentar a margem superior novamente neste contêiner, mantendo-os em 100 para publicar isso. Acho que é uma posição melhor rolando para baixo. Muito bom. Agora, descendo, podemos fazer o mesmo aqui. Podemos selecionar esse contêiner contendo tudo e mudar para uma coluna. Em seguida, selecione isso, torne-o com 100% de largura e alinhe tudo no centro Selecione este texto, vá para estilo, centro de alinhamento. Selecione isso, torne-o 100%. E, de fato, quero selecionar isso e torná-lo 100% assim para que tudo se encaixe perfeitamente. Publique isso. Vamos pré-visualizá-lo. Assim mesmo. Nós podemos fazer o mesmo aqui. Vou selecionar isso, vá para Avançado. Enquanto isso estiver selecionado, vou para Avançado e dou. Não, eu quero uma porcentagem de 80% de largura. Selecione este contêiner contendo todos esses contêineres, dê 100% de largura. Mas avançado. Vamos colocar um acolchoamento de 20 em toda a volta para dar espaço para respirar nas laterais Na verdade, acho que também podemos fazer a mesma coisa que fizemos aqui. Eu prefiro que seja empilhado. Então nós temos isso. Então temos esse contêiner. Segurando tudo. Então vá para o layout e vamos empilhar tudo Selecione o recipiente que contém esses quatro e torne-o 100% largo assim. Selecione esta segurando a imagem e vamos torná-la 100% ou, digamos, 60%, 80%. E vamos garantir que o próprio contêiner que os contém tenha tudo alinhado ao centro dessa forma Até agora, você já entendeu a essência. Selecionando isso, vamos para Largura avançada em porcentagem, digamos, 80%, selecione esse contêiner aqui e vamos torná-lo 100%, e vamos torná-lo mas vá para Avançado e forneça 20 de preenchimento A mesma coisa se aplica aqui. 80%. Selecione esse contêiner. Vamos 90%. Acho que é uma boa largura. Publique isso. E então entre em contato comigo na seção. Avançado, avançado 80%. Vamos selecionar esse contêiner contendo o formulário. Eu vou dar talvez 90%. Nada de muito necessário lá. Publique lá. Vamos revisar tudo. Rolando para baixo. Eu adoro isso. Então, a única coisa que resta agora é mudar para a visualização móvel. OK. E repita o mesmo trabalho, mas agora para celular. Portanto, a única coisa adicional que você fará é reduzir o tamanho de vários elementos no celular. Por exemplo, neste título, vamos para estilo, título. Como você pode ver, sempre que estivermos no modo responsivo, sempre haverá elementos que podem ser editados para diferentes dispositivos Sempre teremos esses ícones. Se mudarmos para tablet, isso mudará para tablet e desktop. Então, como já fizemos o tablet, agora estamos usando dispositivos móveis. Podemos definir uma tipografia de tamanho. Podemos definir um tamanho para dispositivos móveis, talvez até esse ponto. E, de fato, esquecemos até mesmo configurar isso para alinhá-lo ao centro Assim que fizermos isso, ele será herdado pela visualização móvel Para este no celular, precisamos mudar para iniciar o design e selecionar cada um deles, vá para Avançado com 100%. Eu posso escrever isso, copiar, escrever isso, colar estilo, escrever isso, colar estilo. Eu posso copiar. Não, existe o cabeçalho principal. Selecione isso, vá para Estilo, título, tipografia e reduza o tamanho O que mais? Agora, eu posso copiar isso. Estilo de pasta. Clique com o botão direito do mouse em colar estilo. Isso ainda é muito longo, mas podemos alinhá-lo ao centro dessa forma Clique com o botão direito do mouse em colar estilo. E acho que terminamos lá. Então, a única coisa que resta é o rodapé, mas essa é uma tarefa que você pode realizar com base em tudo o que aprendemos Então, rolando até o final, acho que tudo está bem Se mudarmos para o Pixel P., acho que agora tudo está muito melhor. Você pode dedicar seu tempo para atualizar cada coisa para que pareça impecável Então, acho que vamos parar aqui por enquanto. Na próxima lição, veremos o que mais precisa ser feito. Então, nos vemos em breve. 26. Considerações finais: E parabéns por chegar ao final desta aula. Você não apenas aprendeu como alguns dos recursos gratuitos mais populares do Elementor funcionam, mas também acabou com um site de marca pessoal responsivo e totalmente funcional marca pessoal responsivo Espero que agora você tenha uma melhor compreensão de como essas ferramentas individuais podem ser usadas para criar um site com um propósito real Agora, um lembrete rápido. Como sempre, não se esqueça de compartilhar seu projeto de classe. Depois de criar seu site de página única, faça uma captura de tela de página inteira do site finalizado e faça o upload para a galeria do projeto Eu adoraria ver o que você conseguiu criar, e seu projeto também pode inspirar outros alunos da turma. Se você gostou desta aula e a achou útil, a melhor maneira de apoiar meu trabalho é reservando um momento para deixar uma avaliação e uma avaliação. Seu feedback ajuda a tornar essa aula mais fácil de ser descoberta por outros alunos que talvez queiram aprender web design Então, reserve um momento e vá até a guia de avaliação abaixo deste reprodutor de vídeo e diga a mim e a toda a comunidade se essa é uma aula que você recomendaria a qualquer pessoa que queira aprender a lamentar que seria realmente útil, e eu agradeço Agora, muito obrigado por aprender comigo e, até a próxima vez, continue criando. Te vejo em breve.