Crie uma loja online pronta para produção com Elementor e WooCommerce

1. Introdução: E bem-vindo de volta a outra aula incrível de Wordpress e elemental comigo, Ken Este é especial porque vou mostrar como criar seu próprio site de comércio eletrônico pronto para produção com WordPress, Elementor WooCommerce e outras ferramentas gratuitas ou outros plug-ins gratuitos Portanto, sem plug-ins pagos, sem necessidade de codificação. E se esta é a primeira vez que você me vê, como mencionei, meu nome é Ken e sou designer gráfico e web designer com mais de dez anos de experiência usando diferentes ferramentas de design, incluindo WordPress. Agora, também trabalho como instrutora de web design e desenvolvimento web no Skillshare e no Skillshare Nos últimos cinco anos, tenho ensinado milhares de estudantes como você a criar sites incríveis usando o WordPress e seu construtor de arrastar e soltar mais popular, o Elementor Elementor é um incrível construtor de sites de arrastar e soltar que permite criar qualquer tipo de site que você possa imaginar sem nenhuma habilidade de codificação E nesta aula, vou mostrar como usar o Elementor para criar uma loja on-line incrível da qual você pode se orgulhar, uma loja on-line que orgulhar, uma loja on-line você pode mostrar aos seus amigos E se você quiser uma loja on-line, poderá lançá-la imediatamente após a aula. Mas para quem é essa aula? Esta aula foi projetada para iniciantes do Wordpress que desejam criar rapidamente uma loja on-line e, ao mesmo tempo , aprender a usar as várias ferramentas e plug-ins gratuitos disponíveis no ecossistema do Wordpress. Você é apenas um amador começando sua jornada no WordPress ou um empreendedor ou um aspirante a web designer que quer aprender a usar o Wordpress para criar qualquer tipo de site Esta aula estabelecerá a base perfeita de que você precisa para se tornar um especialista em Wordpress. E, como você pode ver, esta é uma aula prática baseada em projetos. E então, no final, você acabará com um site Wordpress que pode ser lançado imediatamente e começar a gerar receita. E isso soa como a aula que você estava procurando? Se for, por que estamos perdendo tempo? Vamos dar uma olhada no site que você criará durante a aula. Vamos fazer isso na próxima lição. Te vejo em breve. 2. Projeto de curso: Então, agora vamos dar uma olhada no projeto da classe, o site que você vai criar durante a aula. Então, aqui estamos nesta landing page fictícia. Como você pode ver, temos esse texto multicolorido. Vamos ver como fazer isso usando CSS personalizado. Como você pode ver, temos essa bela seção de heróis com o bloco de texto, a imagem do herói e a bela imagem de fundo. Rolando para baixo, temos esse ícone que precisa ser animado. Se eu recarregar esta página, deixe-me recarregá-la. Assim mesmo. Rolando para baixo, temos essa seção em destaque Rolando para baixo. Voltaremos aos produtos para vê-los em breve. Mas aqui temos uma boa seção de call to action. Você pode colocar qualquer tipo de imagem que quiser aqui, suas características ou pontos-chave e, em seguida, um botão de chamada à ação. Então temos esse outro botão de call to action. Eu só uso texto fictício por toda parte. Este não é um site real. Este é o site que eu criei enquanto gravava a aula. Então você está vendo o que vai acabar com. Aqui está uma bela foto simples com alguns textos de Lorem Ipsum e alguns links para as várias páginas e um formulário de inscrição na lista de e-mails E aqui, podemos selecionar um produto, por exemplo, essa GPU Deixe-me abrir isso. Lá vamos nós. Agora, esta é a página única do produto e podemos ler todos os detalhes sobre ela. Esses são os pontos principais, os principais recursos dessa GPU e a descrição mais detalhada do produto aqui Então, abaixo, temos um produto relacionado. E outros produtos relacionados. Vamos ver como fazer tudo isso. Voltando aqui, você pode pagar com papal imediatamente ou, se quiser continuar pagar com papal imediatamente ou, comprando, pode continuar comprando antes de pagar com papel Mas digamos que estamos prontos para pagar, digamos, adicionar ao cartão, e agora nosso produto foi adicionado ao cartão. Deixe-me ver o cartão. Tem vários produtos que eu adicionei como forma de testar o site. Mas agora, digamos que você esteja pronto para pagar ou possa remover determinados produtos que não deseja comprar. E isso foi removido e você pode desfazer. Em seguida, podemos prosseguir com a finalização da compra. Aqui, o cliente precisa preencher seus dados, incluindo frete e tudo mais, e aqui está um resumo de quanto ele deve pagar, cerca de 3,8 milhões Eles têm a opção de pagar via paypal. Eles podem pagar com cartões de débito ou crédito. Eles podem pagar usando o Apple Pay ou o Google Pay. E antes que eles possam fazer qualquer pagamento, eles precisam concordar com os termos e condições. Há também outro cheque que tento pagar . Se eu tentar concluir o pagamento, receberei esses alertas aqui para me lembrar de que preciso preencher todos esses detalhes antes poder efetuar o pagamento. Essa é uma boa maneira de verificar se a pessoa forneceu os detalhes de que você precisa. E agora podemos acessar a página da loja. Eu o tinha aberto. Aqui vamos nós. Você pode simplesmente clicar na página da loja. E agora aqui estão todos os produtos listados. E se eu pesquisar talvez por GPU, temos essa pesquisa Ajax que pesquisa o produto sem atualizar a página. Também podemos pressionar Enter para acessar a página de resultados da pesquisa contendo todas as GPUs e selecionar a GPU desejada Como você pode ver, este é um site completo que está pronto para aceitar pagamentos. O cliente pode realmente efetuar o pagamento neste site porque já estamos conectados ao PayPal. Se eu fizer o pagamento neste site agora, o dinheiro irá para minha conta do PayPal. Então, este é o projeto em que você trabalhará durante toda a aula e, quando terminarmos, você terá um site pronto para ser lançado on-line. Então, espero que isso tenha te empolgado porque estou muito animado para mostrar como construí-lo. Então, sem perder mais tempo, vamos continuar e aprender sobre o WBPressHsting, porque todo site Mas o que é um web host? 3. Hospedagem web no WordPress: Agora, para criar um site Webpress que você possa lançar, você precisará de hospedagem na web e um nome de domínio Mas você pode estar se perguntando o que é hospedagem na web e o que é um nome de domínio? Para ajudá-lo com isso, preparei uma breve explicação. Então, vamos lá. Agora, cada site que você visita é armazenado em algum lugar on-line em um servidor que está sempre disponível na Internet. É por isso que você pode acessar um site que está na Holanda, nos EUA ou no México, porque ele está armazenado em um servidor que está sempre conectado à Internet. Isso significa que toda vez que você clica em um link que leva você a um site específico, por exemplo, Free Peek, digamos, freepek.com O que o navegador fez foi enviar uma solicitação para essa página específica, e essa página específica pode ser acessada por meio desse endereço ou URL. Então, quando enviou a solicitação, essa solicitação foi recebida pelo servidor que está armazenando o site de pico gratuito, e o site de pico gratuito é composto por muitas páginas da web Mas como essa página da web é representada por esse nome de domínio específico, esse servidor retornará uma resposta com a página solicitada Então, esse servidor é o que um host fornece a você. Seu host fornece espaço de armazenamento para seu site e garante que seu site esteja disponível para qualquer pessoa que queira visitá-lo. Agora, a outra coisa que você precisará é de um nome de domínio. Freepik.com é um nome de domínio, e esse nome de domínio específico é exclusivo do Então, ninguém mais pode ter esse mesmo freepik.com. Da mesma forma, ninguém mais pode ter seu número de telefone. Seu número de telefone é único e é usado apenas para falar com você, mais ninguém. Portanto, seu site precisa ter um nome de domínio exclusivo e as pessoas usarão esse nome de domínio para acessar seu site. Agora, voltando aqui, estou no wordpress.org. Este é o site oficial do Wordpress. É aqui que você pode baixar o Wordpress. Se você quiser desenvolver seu site offline, você pode instalar o WordPress em seu sistema e trabalhar sem a Internet e criar seu site. Mas o que nos interessa é a página de hospedagem. O Wordpress tem uma lista de hosts web recomendados, e eu recomendo que você reserve um momento e leia esta página. Como você pode ver, eles têm três principais hosts web recomendados, Blue Host. Dreamhost e wordpress.com Mas isso não significa que esses sejam os únicos hosts da web que você pode usar para o seu site Wordpress. Existem outros hosts da web que são tão bons, se não melhores, do que esses três. Então, essas são apenas recomendações do Wordpress. Mas você descobrirá aqui, lendo isso que existem centenas de milhares de hosts da web, a grande maioria dos quais atende aos requisitos mínimos do Wordpress. O Wordpress decidiu apenas facilitar seu trabalho e decidiu dar a você os três principais que eles recomendam. Agora, pessoalmente, usei o Bluehost e, há muito tempo, quando comecei a usar o Wordpress, experimentei o wordpress.com, e você não deve confundir wordpress.com confundir WordPress.org é a plataforma administrada pela Wordpress Foundation porque lembre-se de que o Wordpress é de código aberto e o wordpress.org existe para que você se lembre do download do Wordpress e de tudo o que você precisa saber sobre o Wordpress O WordPress.org é a plataforma administrada pela Wordpress Foundation porque lembre-se de que o Wordpress é de código aberto e o wordpress.org existe para que você se lembre do download do Wordpress e de tudo o que você precisa saber sobre o Wordpress. Mas agora, quando se trata de hospedagem, existe um serviço dedicado chamado wordpress.com. Deixe-me abri-lo. Essa é uma plataforma que fornece ferramentas e hospedagem para criar seu site. Parece que são semanas. Se você já viu semanas, sabe que, ao criar um site no Weeks, não precisa pensar em onde conseguir hospedagem, pois eles hospedam o site para você. Eles apenas fornecem as ferramentas para começar a criar seu site imediatamente. Obviamente, ele tem suas limitações da mesma forma que o Wix tem suas limitações quando você o compara à instalação do Wordpress em um servidor Quando você instala o WordPress em um servidor em algum lugar, você tem mais controle para fazer muitas outras coisas sobre as quais não tem controle quando está usando um serviço hospedado como o wordpress.com Mas é claro que é um bom lugar que você pode experimentar se quiser. Agora, em um nível pessoal, eu uso o NameCip, especialmente quando estou apenas experimentando algumas ideias antes de me comprometer a comprar uma hospedagem dedicada para E aí está. Então, agora que você entende o que é um host, o que eles fazem e por que você precisa deles, vá em frente e pegue a hospedagem na web e o nome de domínio, porque você precisará disso antes de passar para a próxima etapa, onde instalaremos o web press através do painel C. Te vejo em breve. 4. Instalar o Wordpress: Então, agora que você comprou sua hospedagem na web e o nome de domínio, é hora de instalar o WordPress. E para instalar o WordPress, você precisará fazer login no seu painel C. E a maneira mais rápida de fazer login no painel C é acessar sua conta de host. Como você pode ver, estou aqui na conta de login do chip Name. Então, vou inserir meus dados e depois fazer login. Por motivos de segurança, serei solicitado a fornecer um código de segurança. Estou usando um aplicativo autenticador. Sim. Vamos. Lá vamos nós. Então, agora, vou diretamente para a lista de hospedagem. E vou encontrar minha hospedagem na web aqui. Como você pode ver, eu vou para o painel C que me redirecionará para o painel C. E se você optar por um serviço de hospedagem compartilhada como eu, seu painel C terá uma aparência semelhante a isso. Pode não ser idêntico, mas a maioria das coisas aqui estará no seu painel C. E o que estamos procurando é a seção de instalação de aplicativos Softacul Como você pode ver, abaixo dele, temos o Wpress e outros CMSs Então eu vou para o Worpress. E agora, se eu rolar até aqui, encontrarei todas as instalações do Wordpress que tenho. Como você pode ver, a única instalação que tenho no momento é nosso site de referência. Como você pode ver, este é o Sr. MoneyBags.net, e pronto. Assim, podemos instalar uma nova instância do Wordpress para criar um novo site. Então, eu direi que instale agora, e você encontrará este formulário que deverá preencher e depois instalar o WordPress. Então, vamos começar selecionando nosso protocolo aqui. Eu gosto de usar HDTPSw dot. Talvez eu escolha um pod VFX. E se eu clicar fora, ele verificará se eu tenho um certificado SSL nesse nome de domínio Como você pode ver, está tudo bem. Se você não tiver um certificado SSL, isso mostrará um erro Eu vou te dizer que nenhum certificado SSL foi encontrado, e os certificados SSL geralmente são gratuitos Portanto, peça ao seu host que forneça seu certificado SSL gratuito Em seguida, o URL do site será www.vfxpod.com Se você adicionar qualquer nome aqui, sua página inicial, essa página inicial terá uma pasta extra, como pasta E você não quer isso. Você só quer que sua página inicial seja seu nome de domínio base. Portanto, não adicione nada aqui. Em seguida, vamos dar um nome ao nosso site. Vou dar a ela o nome de loja online. Compre qualquer coisa de nós. Sim, deixe-me continuar com isso. E essas são as credenciais que você usará para fazer login no seu site do Wordpress, caso você tenha o logotipo e não queira fazer login pelo painel C. seguir, temos alguns plug-ins que você pode pré-instalar com seu site Wordpress, mas não precisa instalá-los porque existem alternativas melhores que você pode instalar de dentro do diretório de plug-ins do WordPress. Então, vamos deixá-los de fora. Podemos acessar as Opções avançadas e aqui podemos decidir manter um backup do nosso site. Mas eu geralmente não guardo isso porque nunca o uso. Eu uso um plugin no WordPress para criar meus backups e baixar os backups ou enviá-los para o meu Google Drive automaticamente toda semana. Então eu vou te mostrar como fazer isso. Não se preocupe. Tudo bem. Aqui você pode decidir se deseja que seu Wordpress atualizado automaticamente quando houver uma nova versão do WordPress, ou você pode optar por atualizar apenas para versões menores Vou deixar isso como padrão. Portanto, certifique-se de manter essas credenciais em algum lugar. Então, vou abrir meu bloco de notas de texto. Posso copiar isso e colocar lá, depois copiar a senha, Enter, ali mesmo. Você já conhece seu e-mail de administrador, então pode colocá-lo ali mesmo. Então, uma vez que fizermos isso, podemos ir e dizer instalar o WordPress. Não saia desta página até que esteja pronta. E aí está. Parabéns. Você acabou de instalar o WordPress pela primeira vez, se for sua primeira vez. E agora temos dois URLs aqui. Esta é sua página inicial. Então, se eu clicar com o botão direito do mouse e abrir em uma nova guia, como você pode ver, aqui está o nome do domínio, o seu, obviamente, será o nome de domínio que você comprou. E agora aqui está o que temos. Este é apenas o tema básico do WordPress. E se eu voltar aqui, também temos uma URL de administrador. Isso nos levará à área administrativa do nosso site. Então eu clico nele, como você pode ver, diz painel, loja online. O nome do nosso site, loja online. E aqui estamos. Então, acabamos de instalar o Wordpress. Parabéns. Este é um grande passo para você, se esta é a primeira vez que usa o Wordpress. Agora, na próxima lição, vamos ver como instalar um tema WordPress. Te vejo em breve. 5. Instale um tema: Então, agora que instalamos o WordPress, é hora de instalar um tema do Wordpress. Vamos instalar meu tema favorito de todos os tempos, e o nome dele é Astra Então, vou aos temas de aparência e você notará porque em 2025, o tema ativo é 2025. No ano passado, o tema ativo, sempre que você instalou o WordPress, era 2024 e, no ano anterior, é claro, Agora, vou dizer Adicionar novo porque você não quer usar esses temas padrão do WordPress. E agora, como você pode ver, temos esse tema chamado Astra. Então, vou instalar o Astro e ativá-lo. Lá vamos nós. Como você pode ver aqui, eles estão nos dizendo que podemos começar com seus modelos iniciais, mas vou simplesmente descartar isso Agora é o tema ativo. Vou selecionar o tema 2023 e excluí-lo. Selecione o tema 2024 e exclua-o também. E agora vou deixar 2025 instalado, mas não o tema ativo. Esse será o tema de backup caso esse tema seja interrompido por algum motivo. Nosso site ainda terá estrutura porque terá um tema alternativo Portanto, é sempre aconselhável ter um tema alternativo instalado Então, agora o Astra é o tema ativo e agora estamos prontos para começar a criar nosso site Mas como vamos usar um elementor para criar um site, na próxima lição, vamos ver como instalar um elementor. Te vejo em breve. 6. Instale o plugin Elementor: Então agora é hora de você instalar seu primeiro plugin do WordPress. Vamos prosseguir e instalar o elemento. Então, vou para os plug-ins. Na verdade, deixe-me clicar nos plug-ins para acessar os plug-ins já instalados, porque Wordpress sempre vem com esses dois plug-ins pré-instalados. Então, vou selecionar os dois marcando a caixa de seleção mais alta Clique nele e, em seguida, diga excluir, aplicar, Enter. Não precisamos deles, então eu posso dizer Adicionar novo. E agora estamos acessando o diretório Wordpress Plug in. Agora, isso é apenas extrair do diretório real do plug-in do Wordpress Se eu escrever o link e abrir o Link em uma nova guia. Como você pode ver, estamos acessando o wordpress.org e acessando a página Também temos a página do tema, blocos de páginas padrão e tudo mais. É aqui que o Wordpress lista mais de 59.000 plugins gratuitos que você pode instalar Então, agora, voltando aqui, Wordpress pega todos esses plug-ins e os traz aqui para permitir que você os instale com um clique, em vez de ir aqui e fazer o download Então, se eu clicar nele, como você pode ver, eu tenho que baixar aqui e voltar aqui e fazer o upload. Em vez disso, posso simplesmente instalar diretamente. Então, vamos procurar por Elementor. Construtor de sites Elementor. Aqui vamos nós. Mais de 10 milhões de instalações ativas do Elementor, então eu diria que instale agora E, como sempre digo aos meus alunos, como você pode ver, existem muitos outros plug-ins relacionados ao elementor desenvolvidos por desenvolvedores terceirizados que não trabalham nem trabalham no Elementor Essas são empresas terceirizadas que criam plug-ins que adicionam mais recursos à versão gratuita do Elementor Eles permitem que você obtenha mais recursos, mais elementos que você pode usar em seu site gratuitamente. Então, deixe-me dizer ativar. E, claro, veremos como usar alguns deles. Eu direi ativar. E agora o elementor está ativado. algum tempo atrás, havia um assistente que sempre aparecia sempre que você instalava um elementor pela primeira vez Não sei por que não surgiu. Caso surja, basta passar por aquele mago. Agora que você instalou o elementor, como você pode ver, temos esses modelos e um lamenter Eles não estavam aqui antes de instalarmos um lamenter porque são itens do menu elementor Eles permitem que você faça configurações e ajuste o que quiser em um lamento para que funcione para Mas eu nunca altero essas configurações. Eu simplesmente continuo criando meus sites. Agora que temos o Elementor instalado, ele está listado como o único plug-in instalado porque, lembre-se, excluímos os outros dois Vamos instalar mais plug-ins aqui à medida que construímos nosso site, e é assim que instalamos um plug-in do WordPress. Então, na próxima lição, vamos dar uma olhada na interface de usuário do elementor porque eu quero que você saiba como navegar no editor elementar Então, nos vemos em breve. 7. Interface do usuário do Elementor: É hora de examinar a interface de usuário do elementor. E para fazer isso, vamos navegar até as páginas. Essas são todas as nossas páginas da web. Como você pode ver, quando instalamos o Worps, ele veio com duas páginas de amostra, um rascunho, uma política de privacidade e uma página de amostra Podemos usar esta página para ver o editor de elementos. Então eu vou dizer editar. E não se preocupe. No momento, estamos apenas examinando o editor. Não se preocupe em como criar uma página da web e tudo mais. Eu vou te mostrar como fazer isso. Deixe-me encerrar isso. O que é isso? Vamos também fechar isso e aquilo. Ed, aqui estamos. Então, isso é um pouco diferente do que tivemos no meu curso anterior, na minha aula anterior. Ainda é a mesma interface de usuário. Na aula anterior, não tínhamos esse assistente aqui, que parece fazer uma lista das coisas que podemos fazer muito rapidamente, mas não vamos fazer isso porque vamos fazer todas essas coisas manualmente. Então, deixe-me fechar isso. Tudo bem, então isso é uma lista de verificação Você pode acessá-lo aqui. Entendi. Agora, a primeira coisa que você notará é essa estrutura. Anteriormente, era chamado de navegador. Agora ela é chamada de estrutura e fornece apenas uma visão geral da estrutura da página. Portanto, se tivermos muito conteúdo aqui e quisermos apenas ter uma visão panorâmica da página, isso nos ajudará a ver tudo o que existe na página. E também é bom nos ajudar a acessar partes específicas da página muito rapidamente. Por exemplo, se eu clicar com o botão direito do mouse e duplicar algumas vezes, como você pode ver, também está duplicando aqui na estrutura em tempo real, clique com o botão direito do mouse em E agora eu posso expandir isso. Ok, vamos expandir o primeiro para mostrar o que está dentro. Então, temos o contêiner, que é o recipiente rosa. Temos o editor de texto, que é um elemento diferente. Agora, se eu selecionar o contêiner, isso muda para Editar contêiner. Se eu selecionar editor de texto, isso mudará para editor de texto de edição. Em outras palavras, qualquer elemento que você tenha selecionado ativamente aqui na página, suas configurações aparecerão aqui e você poderá ajustar todas essas configurações Então, se eu selecionar esse terceiro, acho que, como você pode ver na estrutura, temos o terceiro contêiner selecionado. O mesmo caso se aplica a tudo o que está dentro do editor de texto. Ele seleciona o editor de texto e aqui podemos ajustar as configurações do elemento específico que está atualmente selecionado Portanto, agora, para quase todos os editores, exceto algumas exceções, você sempre terá essas três guias Há a guia de conteúdo, a guia de estilo e a guia avançada. Cada elemento. Então, se eu selecionar um contêiner em vez de um elemento do editor de texto, contêiner, como você pode ver, ele também tem três guias. Mas agora aqui está a guia de layout em vez da guia de conteúdo. Aqui na guia de conteúdo, é aqui que adicionamos o conteúdo que queremos adicionar. Por exemplo, que tipo de conteúdo um editor de texto espera? É texto. Então, aqui podemos adicionar qualquer texto que quisermos. Queremos exatamente. E enquanto digitamos, isso acontece aqui em tempo real, como você pode ver. Agora, se eu quiser adicionar um elemento diferente, não um editor de texto, tudo o que preciso fazer é clicar nesse botão de elemento de anúncio e posso adicionar diferentes tipos de elementos. Então, deixe-me agora deletar tudo isso. Deixe-me escrever, clique e exclua ou simplesmente passe o mouse sobre qualquer um deles e exclua-o Agora ficamos com este único. Deixe-me selecionar o elemento do editor de texto e também deixe-me excluir Clique com o botão direito do mouse e exclua-o. Agora só temos o contêiner. Se você quiser adicionar algo ao contêiner, podemos clicar nesse elemento de adição ou de adição. Então, deixe-me clicar aqui. Isso revelará todos os elementos disponíveis para nós. Agora, se eu fechar layout básico de todos esses painéis, você notará que eles são painéis contendo diferentes tipos de elementos que podemos arrastar e soltar aqui para criar nosso site. Mas alguns deles estão na versão pro do elementor, então não podemos usá-los. Se não for utilizável, tem uma pequena fechadura no canto superior direito Se for utilizável, se for gratuito, não terá isso. Então, já vimos o editor de texto. Agora, se eu reduzir o básico, podemos ver o layout. Como você pode ver, temos contêiner e grade. Eu prefiro trabalhar com contêineres e você verá o porquê. Usaremos contêineres durante toda a aula. Então, se eu arrastar e soltar um contêiner aqui nesta caixa, ele vai logo abaixo do primeiro contêiner. E se eu pressionar Control I, posso abrir a estrutura para ver a estrutura atual. Se eu expandir isso, não tem nada dentro porque não colocamos nada dentro. Então, deixe-me deletar isso. Podemos trabalhar com este sozinho porque também está vazio. Agora, já que vamos trabalhar com contêineres, não se preocupe, vou explicar como contêineres funcionam, mas deixe-me resumir isso. Agora, vamos ver como adicionar outro elemento. Você já viu o editor de texto. Se eu deixá-lo lá, você pode adicionar seu texto aqui. Se você quiser alterar a cor ou a aparência do estilo, agora é quando você vai para o estilo. Por exemplo, não o queremos à esquerda. Queremos isso no meio. Então, vou selecionar o alinhamento central e agora ele está alinhado com o Esses são os requisitos básicos do editor de texto que todo editor de texto deve ter. Se formos para o avanço, Ah, também podemos mudar a cor. Então, agora é cinza. Podemos mudar para vermelho. Então, se avançarmos, é aí que obteremos configurações como margem, configurações de layout. Então, se eu fechar o layout, teremos muitos grupos de configurações. Com o layout, obtemos margens e preenchimento e alinhamos o elemento em si, a ordem e Todas essas coisas, veremos como usá-las. Voltando aqui para adicionar outro elemento, vamos adicionar um elemento de imagem. Que tipo de conteúdo um elemento de imagem espera uma imagem? Portanto, na guia de conteúdo, esperamos uma imagem em vez de texto Portanto, selecione o elemento da imagem e as alterações para editar a imagem. Agora podemos selecionar uma imagem da nossa biblioteca. Podemos acessar a biblioteca de mídia se já tivermos feito upload de imagens ou, se não tivermos, podemos fazer upload de imagens e selecionar arquivos do nosso computador. Então, vou clicar duas vezes nisso como exemplo. E agora vamos lá. Então, já está pré-selecionado, eu diria que selecione. E agora a imagem aparece aqui. E podemos continuar a estilizá-lo. Podemos dar a ela uma largura máxima de talvez 100%. Podemos atribuir uma altura de 100% em vez de 500 pixels. Podemos aumentar a largura manualmente. Agora que definimos a largura máxima, ela sobe para 100% e muitas outras coisas que veremos como fazer. Então, recapitulação rápida. Agora, se eu recolher todas essas outras, como você pode ver, também temos essa guia geral que fornece elementos gerais que podemos adicionar como um depoimento E à medida que adicionamos todos esses elementos, lembre-se de que, os estamos adicionando dentro desse contêiner, eles estão todos embaixo do contêiner na estrutura se eu fechar isso. Mas agora, se eu adicionar outro contêiner, adicionando, deixe-me simplesmente recolher isso. Para adicionar outro contêiner aqui, podemos acessar o PAS e o layout e voltar aqui. Então, podemos escolher o Flexbox. E eu adoro usar estruturas Flexbox. Então, não vamos usar grades, vamos trabalhar com o Flexbox E essas são apenas estruturas pré-fabricadas para ajudá-lo a configurar rapidamente , talvez uma seção de coluna dupla ou uma seção de coluna única, uma seção de quatro seções e esse tipo de coisa Então, atualmente, o que temos aqui é esse tipo ou é esse tipo de estrutura. Se eu selecionar essa estrutura dupla, como você pode ver, temos duas divisões aqui dentro Se eu selecionar este, como você pode ver, esse lado é mais longo. Portanto, são apenas estruturas pré-fabricadas para nos ajudar a criar nosso site rapidamente Então, se eu quiser adicionar um contêiner aqui, posso simplesmente arrastá-lo e soltá-lo lá, e agora é um contêiner dentro de outro contêiner. E eu posso adicionar um elemento como, digamos, link in bio minimalist, e pronto Então, esse é um elemento inteiro que podemos editar e alterar. Então, basicamente, isso é como adicionar elementos. A próxima coisa que quero que vejamos é quais são essas configurações? Então, se quisermos sair para o painel, podemos sair para o Wordpress, mas há outras configurações aqui que são muito importantes. Você se lembra que quando eu queria duplicar o contêiner, tive que me deixar clicar aqui Tive que clicar com o botão direito do mouse e duplicar. Essas são duas etapas para fazer uma coisa. Se eu quiser duplicar esse contêiner, preciso clicar com o botão direito do mouse e duplicá-lo, e ele aparecerá abaixo Deixe-me deletar isso. Se eu quiser excluir, preciso clicar com o botão direito do mouse e excluir. Mas se eu vier aqui, posso dizer preferências do usuário, mostrar opções de edição rápida. Isso significa que, se eu passar o mouse sobre qualquer um desses elementos, terei atalhos rápidos para algumas das coisas mais comuns que você deseja fazer com um elemento, como duplicá-lo Então, se eu chegar aqui e clicar nele, automaticamente, é duplicado Se eu vier aqui e fizer isso de novo, basta um clique para fazer uma duplicação. As alças de edição ou as opções de edição são muito importantes. Verifique se você os ativou. Nesses outros, você também pode ver a história das coisas que você fez e voltar no tempo. Você pode voltar a um momento em que o site tinha uma certa aparência. Por exemplo, digamos que você tenha cometido erros e queira remover as coisas para desfazer algumas das coisas que você fez Você pode voltar para dizer a hora em que adicionamos a imagem, e essa é a aparência do elemento da imagem quando o adicionamos. Também podemos voltar ao início e isso é o que tínhamos. E também podemos voltar ao início da edição, e isso é o que tínhamos quando começamos. Assim, você pode ir rapidamente para qualquer ponto da sua sessão de edição. Mas depois de fechar Elementor e voltar, você não encontrará isso Isso é apenas para esta sessão de edição. A seguir, vamos dar uma olhada nisso. Essas são as configurações da página que definiremos no painel de administração do WordPress, portanto, não as definiremos aqui. Se quisermos pré-visualizar nossa página, primeiro precisamos publicá-la. E podemos clicar aqui para visualizar as alterações. E é assim que a página parece, e esse é o nosso conteúdo. Então, se fizermos alterações aqui, digamos, vamos duplicar essa duplicata correta Agora temos que fazer isso. Se eu publicá-lo, você notará que ele carregará e recarregará automaticamente E agora temos essas duas frases. Também podemos salvar isso como um modelo, o que quer que tenhamos na página. Podemos salvar como modelo e dar um nome a ele. Então, veremos como fazer todas essas coisas com o passar do tempo. Acho que agora você sabe tudo o que precisa saber sobre a interface do usuário. Quando começarmos a editar o site para ser responsivo em diferentes dispositivos, como um tablet, poderemos fazer isso usando essas ferramentas Então, por enquanto, essas são as configurações que você precisa entender para poder usar a interface de usuário elementar e navegar enquanto cria sua página Então, na próxima lição, vamos agora criar nossa página inicial e começaremos com a barra nervosa. Te vejo em breve. 8. Instale o plugin ElementsKit: Então, agora você tem uma visão geral aproximada da interface de usuário elementar É hora de começar com a construção real da página inicial e começaremos com a barra nervosa Então, eu quero sair para a área de administração do WordPress. Eu também quero encerrar isso. E, na verdade, vou separar isso. Vou deixá-la como sua própria janela. Agora, deixe-me mudar para cá. E deixe-me sair. Deixe-me sair porque esta não é uma página que vamos manter. Na verdade, vou selecionar todos eles, mover para a lixeira e aplicar Então, agora não temos nenhuma página da web. Para criarmos ano, precisaremos usar outro plugin relacionado a elementos chamado kit de elementos Light Então, vamos instalá-lo. Plugins, adicione novos. E se eu digitar elementor, aqui estamos. Tem mais de 1 milhão de instalações do Xpeed Studio. Kit de elementos, complementos e modelos do Elementor. Instale, ative e agora temos o kit de elementos light. Então, uma vez que o instalarmos, ele também aparecerá aqui. E o que precisamos fazer é ir para o cabeçalho e o rodapé. E agora precisamos passar por esse assistente de configuração. Então, para começar, vamos escolher Avançado aqui. E ao escolher Avançado aqui, significa apenas que mais elementos estarão disponíveis para nós no front-end enquanto editamos nossas páginas. Então, por exemplo, se você olhar esses widgets aqui, acho que eles serão ativados quando clicarmos em Avançado Como você pode ver, agora ele estará automaticamente disponível para nós no front-end. Lembre-se do editor, estávamos arrastando elementos da esquerda para a página Esses elementos estarão disponíveis para nós. Quando selecionamos Avançado, vários desses elementos que não foram originalmente verificados foram verificados. E agora vamos para a próxima etapa. Aqui você pode fornecer seu e-mail para que eles possam enviar ofertas, descontos e tudo mais. Mas vou clicar em Avançar. Na próxima etapa, você pode compartilhar dados de diagnóstico não confidenciais. Então, vou clicar em Próxima etapa. Em seguida, salve as alterações. E lá vamos nós. Então, agora podemos ir ao cabeçalho e ao Potter. E é aqui que construiremos nosso cabeçalho, também conhecido como nossa Navbar Então, faremos isso na próxima lição. Te vejo em breve. 9. Noções básicas sobre os recipientes: Então, agora estamos prontos para começar a criar o cabeçalho. E lembre-se de que acessamos o cabeçalho e o rodapé do kit de elementos. Vou dizer Adicionar novo e direi cabeçalho. Sim, o tipo é cabeçalho. Quando estivermos criando a foto, também viremos aqui e diremos Foto, mas agora é o cabeçalho e queremos que ela esteja disponível em todo o site. Se você quiser ter condições em qual página exibi-la, precisará usar a versão pro, mas isso é o suficiente para mim. Então, queremos que ele esteja ativo. Agora, podemos simplesmente salvar as alterações e depois voltar e dizer editar conteúdo, ou podemos simplesmente dizer editar conteúdo e ir diretamente para o front-end para editá-lo. Mas eu só quero dizer isso primeiro. Para mostrar que ele está listado aqui. E agora, se eu disser editar, receberemos o mesmo pop-up e posso dizer que o conteúdo da edição será redirecionado para o front-end, onde agora podemos criar nosso cabeçalho E aqui estamos. Então, agora, pensei que antes de começarmos a criar o cabeçalho, eu deveria explicar como os contêineres funcionam. Em seguida, veremos como criar o cabeçalho na próxima lição. Então, muito rapidamente, quero começar do zero, sem nenhum contêiner aqui. Portanto, temos uma folha em branco. Agora, se eu selecionar isso, teremos o Flexbox e quero começar com essa coluna de direção E por direção, queremos dizer, como você pode ver no layout, temos direção aqui. O contêiner pode ter um layout horizontal ou vertical ou um layout linha inverso ou um layout de coluna reverso. O que isso significa é que qualquer conteúdo que esteja aqui, qualquer conteúdo que tenhamos dentro do contêiner será organizado na direção que selecionamos aqui. Então, se, por exemplo, agora que temos o contêiner aqui, se eu for adicionar e adicionar um título, como você pode ver, o título está dentro do contêiner. Se eu voltar aqui mais uma vez e adicionar, digamos, um botão, voltar aqui e adicionar, digamos, por exemplo, agora, vamos usar esses dois. Se eu selecionar o contêiner, que é onde devemos definir a direção do conteúdo interno, atualmente, cada elemento está organizado verticalmente Então, se adicionarmos outro elemento, como uma imagem, ele será colocado logo abaixo do elemento mais baixo do grupo. Se eu voltar aqui, essa é uma direção vertical. Mas se eu quiser que as coisas corram da esquerda para a direita, selecionarei isso. E agora, como você pode ver, temos o título, o botão e a imagem. E isso é muito poderoso porque é isso que nos permitirá atingir esse objetivo, como você pode ver, imagine que aqui temos duas colunas um, dois. Essas são duas colunas, uma coluna para uma imagem e uma coluna para o bloco de texto. Então, esse contêiner aqui que está segurando o bloco de texto é na verdade vertical. Mas o contêiner que contém o bloco de texto e a imagem é horizontal. Espero que você entenda esse ponto. Então, agora voltando ao nosso exemplo aqui. O que temos dentro desse contêiner são apenas elementos. Não são contêineres. Esses são elementos. Este é um texto, um elemento de título. Esse é um elemento de botão e esse é um elemento de imagem. Se quisermos ter um sistema de contêineres complexo como esse, precisamos usar contêineres dentro de contêineres. Então, vamos remover tudo aqui. Vou apenas selecionar isso e excluir essa exclusão. Agora ficamos com um contêiner mais uma vez. Se eu for aqui para o plus, posso adicionar um contêiner lá. Agora, como você pode ver, é um contêiner dentro de um contêiner. Com este contêiner, também podemos definir a direção. Mas antes de chegarmos à direção, podemos dizer: vamos colocar outro contêiner dentro, vamos colocar outro contêiner dentro porque assumindo que esse contêiner aqui é o contêiner que contém tudo aqui Ele deve ser dividido em dois, para que possamos adicionar mais dois contêineres, um. Agora, se duplicarmos isso, deixe-me voltar aqui, preferências do usuário e dizer mostrar opções de edição rápida Agora, se eu duplicar isso em um contêiner, deixe-me recolher isso Temos dois contêineres dentro desse contêiner que estão dentro desse contêiner. Mas esses dois contêineres estão empilhados um sobre o outro, como você pode ver um, dois, mas queremos que eles estejam lado a lado, um, dois Então, selecionamos um contêiner que contém esses dois, que é isso, ou podemos ir aqui e selecionar isso e mudar a direção aqui para dizer um, dois, então é horizontal. Lembre-se de que esse contêiner está dentro desse contêiner. Agora podemos fazer isso com 100% de largura. Tudo bem, não vamos nos precipitar. Então, como você pode ver, dentro desses contêineres, agora podemos adicionar um título. Por exemplo, esse título pode voltar aqui e adicionar um editor e voltar aqui e adicionar um botão quando a linha rosa aparecer. Então, aqui, podemos adicionar um elemento de imagem. E agora, se eu publicar e pré-visualizar, teremos um layout de contêiner lado a lado. Então, essa foi apenas uma introdução rápida aos contêineres para que você possa ver o poder de usá-los ao criar o layout de suas páginas. Ele oferece muita flexibilidade para criar designs muito complexos. Então, acho que vamos terminar esta lição aqui. Não queremos demorar muito. Na próxima lição, vamos começar a colocar esses contêineres em uso real. Então, eu vou te ver em breve. 10. Adicionar um logotipo: Agora que você entende os contêineres, é hora de criar nosso cabeçalho. E a primeira coisa que queremos fazer é adicionar o logotipo do nosso site. Então, deixe-me fechar isso e voltar aqui. Lembre-se de que estávamos editando nosso cabeçalho, e é por isso que diz cabeçalho aqui em cima. Então, eu só quero ir em frente e excluir tudo para que possamos começar do zero. Agora, quero navegar até nosso site de amostra aqui, para que possamos ver a estrutura que estamos tentando alcançar. Temos um logotipo aqui, temos a barra de pesquisa, temos os itens do menu e temos um botão de cartão. Mas vamos começar com um contêiner de direção. Então, voltando aqui, vamos selecionar Flexbox e selecionar isso Então, com isso, isso não é um contêiner. Isso serve apenas para nos mostrar onde o conteúdo estará contido nesse contêiner. Não haverá nenhum conteúdo aqui. Mas precisamos adicionar um contêiner. Então eu vou entrar aqui e dizer container e adicioná-lo ali mesmo. Agora, como você pode ver em nosso site de referência, temos essa lacuna aqui à direita e à esquerda, que significa que há um contêiner contendo apenas o conteúdo da barra nu e não tem 100% de largura. E é isso que eu quero dizer. Então, atualmente, temos esse contêiner externo que contém tudo. Quero que façamos com 100% de largura. Nem 1.000 entram. Então, agora tem 100% de largura, o recipiente externo rosa. E como ainda não definimos a largura do contêiner interno, ele também está ocupando todo o espaço disponível no contêiner que o contém Então, o que podemos fazer é selecionar o contêiner interno e dizer que queremos que ele ocupe apenas 80% do contêiner externo. Mas agora observe que está alinhado à esquerda. Para que possamos vir aqui. Podemos selecionar o contêiner externo. Atualmente, o que está selecionado é o contêiner interno. Então, vou selecionar o recipiente externo, e essa é outra coisa interessante sobre a estrutura. Ele permite que você selecione algo se não conseguir selecioná-lo na página. Agora selecionei o contêiner externo e, agora, com ele selecionado, posso vir aqui para alinhar os itens ao centro Quando eu clico nisso, olha isso, olha para o recipiente interno. Se eu selecionar centro, alinhamos tudo o que está contido dentro desse contêiner externo com o centro Vamos publicar isso. E agora vamos voltar para nossa imagem de referência. Lembre-se de que dissemos que temos uma coluna para o logotipo. Temos um para a barra de pesquisa e podemos separá-los por enquanto. Então, vamos criar três contêineres dentro desse contêiner. Então eu vou dizer adicionar. Então eu vou arrastar um contêiner até lá. E para facilitar as coisas para nós, não precisarei voltar e copiar outro contêiner. Eu posso simplesmente duplicar isso duas vezes, um, dois, e agora eles estão empilhados um em cima do outro Então, selecionaremos aquele que contém todos eles. Se for difícil selecioná-lo, basta usar a estrutura. E agora queremos organizar tudo isso de forma horizontal. Então, vou seguir esta direção, e agora temos três contêineres. Deixe-me publicar isso. Agora, nem é preciso dizer que aqui, colocaremos um elemento de imagem, então arrastarei um elemento de imagem e escolherei a imagem que quero usar. Nós enviamos apenas uma imagem, então vou fazer upload de arquivos, selecionar arquivos. E, como sempre acontece com todas as minhas aulas, fornecerei essa pasta Assets que contém todas as imagens que você pode usar como exemplos de produtos para acompanhar esta aula. Eu os preparei para serem muito leves em KBs, eles não têm nem MB de tamanho E isso é outra coisa que você precisa ter em mente. Mantenha suas imagens o mais claras possível para permitir que seu site seja carregado primeiro. Como você pode ver, temos um logotipo aqui que preparei para você como amostra. Vou clicar duas vezes nesse logotipo. E lembre-se, eu disse que você encontrará pasta Assets abaixo deste vídeo. Basta procurar o link abaixo do player de vídeo. Agora já está carregado. Eu direi selecionar. E lá vamos nós. Nosso logotipo foi adicionado. Agora, observe que o logotipo é pequeno aqui, então podemos arrastar. Podemos passar o mouse aqui e, quando a seta dupla face aparecer, podemos arrastá-la ou inserir manualmente o tamanho desejado Então, eu quero inserir isso manualmente. Selecionarei o contêiner que contém o logotipo e farei com 20% da largura dele. Esse contêiner que contém os três, 20% será ocupado pelo logotipo. Talvez 30% possam ser ocupados pelos itens do menu, pela barra nervosa e pelo botão e, em seguida, pela barra de pesquisa. Talvez possamos fazer isso em 40%. Agora, vamos deixar em 30. Então isso pode ocupar 50. Vou selecionar isso e dizer 50, modo que sejam 50, 30, 20 para fazer 100% desse contêiner. E lembre-se, esse contêiner está ocupando 80% do contêiner mais externo Então é assim que você adiciona seu logotipo. Na próxima lição, vamos ver como adicionar seu menu nervoso. Este menu de navegação. Então, eu vou te ver em breve. 11. Adicionar um menu de navegação: Então, agora é hora de adicionar o menu nervoso. Então, como fazemos isso? Vamos voltar para nossa área de trabalho. Lá vamos nós. Deixe-me publicar isso antes de prosseguirmos e vamos pré-visualizar as alterações. Então é isso que temos agora. Então, lembre-se de que instalamos o kit de elementos. Então, se eu vier aqui e digitar nervo, você notará que temos um kit de elementos, um menu de nervos e também um menu de nervos. Isso está disponível com o elemento Pro. Mas uma coisa sobre complementos relacionados como o kit de elementos, é que eles nos fornecem esses elementos extras gratuitos que, de outra forma, teríamos que pagar para acessar Então, arrasto o menu nervoso do kit de elementos e o solto lá. E agora, quando o descartamos, ele ainda é o elemento ativo. É por isso que diz Editar elementos no menu nervoso do kit porque esse é o elemento. E agora a primeira opção aqui é selecionar menu. Portanto, precisamos selecionar um menu para exibir porque, em essência, esse é um menu. E para exibir um menu, precisamos primeiro criá-lo dentro do Wordpress, área administrativa. Então, antes de irmos longe, deixe-me dizer que publique. Vou vir aqui e quero sair para o Wordpress, mas em vez de sair deste editor, quero escrever um link e abrir o Link em uma nova guia, e então vou pegar essa nova guia e ir para a área administrativa. Isso ainda está intacto. Então, voltando para a área administrativa, digamos, menus de aparência. Então, aqui estamos. Podemos criar nosso menu abaixo. Então, deixe-me fechar esta notificação. Como você pode ver, podemos adicionar itens de menu e itens de menu podem ser páginas. Eles podem ser postagens como uma postagem de blog, como artigos. Eles podem ser links personalizados. Podemos simplesmente usar links diretos, categorias de produtos ou categorias de outros tipos de conteúdo. Mas queremos páginas como nossos itens de menu, o que significa que precisamos criar algumas páginas. Então, indo para as páginas, em vez de fechar este lugar, vou apenas para as páginas, link direito em Adicionar novo e Abrir link em nova guia. Aqui vamos nós. Então, agora podemos dar um nome a esta página. Digamos que entre em contato. Como você pode ver, essa é a página que temos aqui. Não estamos tentando criar muitas páginas aqui. Isso é para mostrar como criar uma loja online. Depois de aprender como criar a página inicial ou essa página de contato único, você pode criar uma página A us, uma página de política de privacidade, página de termos de serviço criar todos esses tipos de páginas Então, agora, vamos criar essa página de contato. Não estamos tentando alterar nenhuma configuração aqui por enquanto. Só queremos publicá-lo. Então, vou publicar isso. E agora, voltando aqui, lembre-se, nunca saímos desse lugar. Se eu atualizar ou recarregar esta página, temos a página de contato aqui, mas ela está Não podemos usá-lo. Isso porque precisamos criar um menu. Vamos dar um nome a ele. Deixe-me dar o nome de meu menu. E então vamos torná-lo o menu principal e criar o menu. Veja esta área. Agora está ativo porque temos um menu ao qual podemos adicionar itens. Entre em contato, adicione ao menu. É adicionado ao menu. Salvar menu. Lá vamos nós. Então, agora, deixe-me fechar isso porque terminamos com isso. Se eu voltar aqui, lembre-se de que abrimos isso e o publicamos. Se eu recarregar a página, se eu selecionar o elemento nervoso novamente, o kit de elementos do menu nervoso e vier aqui, lembre-se de que criamos um menu chamado Meu menu Meu cardápio. Agora que o selecionamos, como você pode ver, ele mostra os itens de menu que possui, e isso é apenas uma página. Então, a posição horizontal do menu, digamos, escreva para mudar de lado. Deixe-me fechar isso. Agora está posicionado no lado direito. Publique. Vamos pré-visualizar as mudanças. Lá vamos nós. Então, aqui está nossa página de contato. Voltando aqui, podemos criar mais páginas. Deixe-me voltar aqui. criar mais algumas páginas. Passe o mouse sobre isso e clique com o botão direito do mouse em Adicionar novo. Ou em vez de passar o mouse e clicar com o botão direito do mouse, você pode simplesmente passar o mouse e pressionar o botão do meio do Ele abrirá em uma nova guia. Então, vamos criar duas páginas. Deixe-me chamar isso de lar. Publique, publique, publique. E vamos chamar isso de publicar, publicar. Feche isso e aquilo. E agora vamos recarregar esta página. E vamos adicionar o menu inicial e o menu prestes a ser adicionado. Deixe-me levá-los para casa e colocá-los ali mesmo apenas para ter certeza de que os organizamos corretamente, salve o menu. E agora, voltando para a frente, tudo o que preciso fazer é clicar em Visualizar alterações novamente. Ele recarregará esta página com as novas alterações. Também podemos clicar com o botão direito do mouse e recarregar esta página para que também possamos ver os novos itens do menu em ver os novos itens do menu em nosso editor. Então, vamos lá. A próxima coisa que quero fazer ao finalizarmos aqui é mudar as cores Vamos usar essas cores da loja. Agora, você notará aqui em cima, eu tenho essa ferramenta, essa extensão do Chrome chamada RGB Color Picker Eu posso selecionar isso. Você pode instalá-lo. É grátis. Então eu posso dizer escolha a cor. E se eu passar o mouse sobre isso, posso escolher a cor de um pixel. Aqui vamos nós. Eu seleciono esse tapete, seleciono esse menu nervoso. E então, como é o elemento ativo, vou para estilo, colapso do invólucro do menu, item de menu porque esses são itens de menu Como você pode ver em estilo do item de menu, cor do texto do item, atualmente é preto e, ao passar o mouse, é cinza, e é por isso que fica cinza quando passamos o mouse Passe o mouse, queremos que seja dessa cor. Agora, quando eu passo o mouse, é da mesma cor da marca que o logotipo da nossa marca E quando a página está ativa, ela também deve ter essa cor. Se eu publicar, visualize as alterações, agora, se eu passar o mouse sobre qualquer um desses itens do menu, eles estão mudando de cor E se a página ativa for a página Sobre, se eu selecionar sobre, como você pode ver, essa é a página A, e está ativa, então é laranja. Então é assim que se cria o menu nervoso. Na próxima lição, vamos ver como adicionar um favicon, porque atualmente, como você pode ver, temos apenas esse espaço reservado genérico para ícones Se você olhar o favicon Name chips, eles têm o logotipo Então, como podemos adicionar isso? Vamos ver como fazer isso. Na próxima lição. Te vejo em breve. 12. Adicionar um favicon: Agora é hora de adicionar um fabricon ao nosso site. Existem duas maneiras de chegar ao local onde você pode configurar o fabcon Uma maneira é acessar a aparência, personalizar e seremos levados ao editor de front-end do tema, que é o Astra É aqui que você define as configurações do Astra. Outra forma de chegar aqui é se eu já estiver no front-end, posso simplesmente personalizar. Então, seremos levados para o mesmo lugar. Agora, encerrando isso, vou voltar aqui porque já tínhamos isso e vamos até a identidade do site, selecionando o ícone do site. Portanto, existem maneiras diferentes de chegar ao mesmo lugar. Então, vou para a pasta Assets e já criei um favicon para E acho que deveria ter feito o inverso dessa cor porque esse azul é escuro. Deveria ter sido branco e a linha azul. Mas não tem problema. Vamos em frente . Lá vamos nós. Então selecione E agora, como você pode ver, nós o definimos como o ícone do site. Agora, deixe-me ver se consigo selecionar um diferente porque não estou gostando disso Deixe-me ver se consigo encontrar. Deixe-me usar este sapato como nosso tecido por enquanto Mas o mais importante é que você entenda como adicionar o favicon Então, vou selecionar esse sapato como favicon porque é mais brilhante e digo selecionar. Agora, veja isso. Agora, como você pode ver, é brilhante o suficiente para ser visto publicado. Agora, quando você estiver no editor elementar, mesmo que você atualize a página, o fabricon não estará visível porque você está no Mas se você visualizar, você não estiver no modo de edição, o fabricon aparecerá porque essa é uma página de visualização real Então, é assim que você define um fabricon para o seu site WordPress Na próxima lição, vamos ver como dizer ao WordPress qual página é nossa página inicial, porque quando as pessoas clicam nesse logotipo, nesse logotipo, ele deveria nos levar a essa página inicial, a página inicial básica, na verdade, eu esqueci Se, enquanto estiver selecionado, vou até Link e direi URL personalizado e colarei nosso URL base. Este será YourBSRL em seu site.com e digamos Eu vou até lá. E agora, se eu passar o mouse sobre ele, você pode ver que é clicável Se eu clicar nele, ele deve nos levar para casa. Esta é a página atualmente definida como página inicial, mas não é nossa página inicial Esta é uma grade de postagens de blog ou artigos que teriam sido listados aqui. Então, como configuramos a página inicial? Vamos ver isso na próxima lição. 13. Defina a página inicial: Então, agora é hora de definir nossa página inicial como página inicial, porque agora, se eu for para a Página inicial, lembre-se de que essa é uma página que criamos Se você olhar o URL, será a barra HOME do nosso domínio.com porque essa é uma página que criamos Lembre-se, páginas. Temos uma página inicial, mas queremos que as configurações sejam: se o usuário acessar essa página, ela não deve ter essa barra as configurações sejam: se o usuário acessar essa página, ela não deve ter essa barra em nada. Então, como definimos isso? Voltando aqui, vou para a leitura de Configurações. E agora, sua página inicial exibe uma página estática, e a página estática é a página inicial Salve as alterações. E agora, voltando para a página inicial, e agora, se eu selecionar home, como você pode ver agora, se alguém encontrar vifxpd.com em qualquer lugar como um link e clicar nele, será direcionado especificamente para esta página, que é vifxpt.com ordmain.com, o Agora, é claro, a partir da próxima lição, vamos realmente começar a construí-lo. E lembre-se, tínhamos uma seção de heróis, vamos começar com a seção de heróis. Então, é assim que se cria uma página específica, a página inicial, porque podemos definir qualquer dessas páginas como a página inicial E outra coisa que preciso que façamos agora, enquanto trabalhamos no site, é desencorajar os mecanismos de pesquisa de indexar este Isso significa simplesmente que mecanismos de pesquisa como Google e Bing não enviarão seus spiders para rastrear e indexar este site porque ele está em construção, pois mecanismos de pesquisa normalmente enviam pequenos trechos de código por toda a Internet para procurar novos sites, a fim de indexar e organizar o site em seu banco de dados e poder exibi-lo nos resultados de pesquisa. Mas não estamos prontos para que o Google e Ben saibam que nosso site existe, porque isso afetará nosso SEO no momento. Por isso, queremos desencorajar os mecanismos de pesquisa de indexar nosso site Isso diz às aranhas do Google e aos robôs automatizados do Google : Ei, nem dê uma olhada neste site por enquanto Nem dê uma olhada neste site por enquanto. Não salve nenhuma de suas páginas para mostrar às pessoas quando elas pesquisarem algo semelhante ao que estamos fazendo. Basta sair deste site por enquanto. Assim que terminarmos de criar o site, verificaremos isso. Portanto, salve as alterações. Incrível. Então, agora que definimos nossa página inicial, é hora de começar a criá-la E, claro, começaremos com a seção de heróis. Esta é a nossa página inicial. Se eu mudar para nosso site de amostra ou referência, esta é a seção de heróis. Então, vamos ver como criar algo assim. Te vejo em breve. 14. Bloco de texto principal: Então, agora é hora de criar a seção de heróis e começaremos com o bloco de texto. Então, voltando ao nosso site, agora, podemos simplesmente clicar em Editar com Elementor O que podemos fazer é ir para Editar página porque atualmente não é uma página elementor É apenas uma página do Wordpress Astra. Podemos clicar em Editar com o Elementor, e agora isso a tornará uma página do Elementor Mas antes de fazermos isso, podemos vir aqui. Precisamos vir aqui e alterar o modelo para a largura total do elemento. Queremos que seja uma página de largura total porque observe isso agora, essas são as configurações do Worpes Também precisamos entrar nas configurações do Astra. Lembre-se, nosso tema é Astra. Então, aqui, layout do contêiner, eu vou com largura total. Não altere nenhuma delas porque elas se aplicam somente quando o layout está definido como estreito ou normal, estreito ou normal, mas selecionamos a largura total. Então ignore isso. Expanda isso. Não queremos uma barra lateral, portanto, nenhuma barra lateral Ignore isso porque isso só se aplica quando o layout está definido como normal. Não selecionamos nenhuma barra lateral. Desative os elementos. Isso nos permitirá desativar alguns dos elementos que vimos quando esta página ainda era uma página Astra do WordPress, não uma página elementar Deixe-me mostrar um exemplo antes de torná-la uma página elementar Vou deixar isso aí e voltar aqui para as páginas. Se eu selecionar Exibir, podemos vincular e abrir o link em uma nova guia. Agora temos esse A e esse rodapé Astra. Voltando aqui, podemos desativar o cabeçalho, que é isso, e o rodapé, que é isso Vamos também remover a área do banner. Em seguida, salve. Agora, essas são as configurações da página inicial. Se eu editar esta página, só quero mostrar o que acabamos fazer voltando aqui e desabilitando os elementos. Se desativarmos o cabeçalho, salvá-lo e visualizar a página, ela não vai esperar. O que está acontecendo aqui? Desative o cabeçalho, desative a área do banner. Vamos também fazer isso. Vamos ver. Ah, precisamos primeiro torná-lo um elemento de largura total, mas antes de alterá-lo, vamos pré-visualizá-lo. Tudo bem, sim. Então está fazendo efeito. Desativamos a área do banner, o cabeçalho. E agora, como você pode ver, ainda temos o rodapé. Se chegarmos aqui e dissermos, desative o rodapé, salve-o e visualize as alterações novamente. Agora, tudo acabou, pronto para ser transformado em uma página elementar, mas ainda não é uma página elementar porque não a editamos com elemental, mas essa é a página At mas essa é a Feche tudo sobre as instâncias da página. Agora, voltando aqui, espero que você entenda o que estávamos fazendo com isso. Agora que ela foi salva, podemos transformá-la em uma página elementar E aqui estamos. Agora, lembre-se de que criamos o cabeçalho ou a barra nervosa em um editor separado em uma parte diferente usando o kit de elementos light. Então, agora não é editável. Não podemos editá-lo aqui. Mas o que podemos fazer é adicionar um flexbox para que possamos começar a criar a seção de heróis De qualquer forma, é tudo o que precisamos. Então, deixe-me adicionar esse contêiner de direção. E, como sempre, quero adicionar outro recipiente dentro dele. E lembre-se do que fizemos com o cabeçalho. Eu quero que isso tenha 100% de largura. Então, com porcentagem, 100 e agora está ocupando 100%, e o contêiner interno deve ocupar 80% desse contêiner externo Está à esquerda, então vamos voltar para o recipiente externo e alinhar tudo dentro dele no centro significa que nosso conteúdo também ocupará o mesmo espaço que o cabeçalho em largura. Vamos publicar isso. E, como sempre, agora vamos adicionar outro recipiente dentro. E duplique isso. Agora temos dois. Agora vamos escolher a externa e mudar a direção, e agora temos uma seção de heróis de coluna dupla. Aqui, podemos adicionar nossa imagem, imagem herói, e podemos continuar selecionando. Oh, espere, sim, podemos continuar selecionando a imagem do herói. Era para ser uma aula separada. Então deixe-me desfazer isso. Deixe-me vir aqui e adicionar o bloco de texto. Então, um título, vamos voltar aqui, adicionar um editor de texto, soltá-lo logo abaixo, e vamos descer aqui e adicionar um botão. Publique isso. Vamos pré-visualizar as mudanças, e é isso que temos. Então, a primeira coisa que precisamos fazer é selecionar o texto. E, claro, você vai digitar seu próprio texto aqui, mas eu vou copiar o que tenho aqui. Então, liberte três modelos D. Copie isso. Enquanto isso estiver selecionado, vou colá-lo aqui. Não cole texto diretamente aqui. Embora seja possível, ele virá com qualquer pré-formatação de onde você o copiou Portanto, talvez você não queira a pré-formatação do local em que você a copiou Então faça isso. Exclua isso. Então, você quer colá-lo aqui, e isso permitirá que você aplique novo estilo conforme achar melhor Então, vou deixar isso aí. Vou selecionar isso. Acabei de ir ao JAGPT e pedi ao ChagPT que escrevesse uma mensagem de texto. Esse era um site diferente. É por isso que você vê que ele tem arquivos digitais. Eu estava criando um site de download digital. Mas estamos trabalhando em um site de produto físico. Vou selecionar esse texto, clicar duas vezes nele e colar lá. Agora não está sendo exibido porque se eu selecioná-lo, agora você verá a alteração entrar em vigor. Não sei qual é a falha, mas se eu publicar, atualizar isso, posso selecionar isso, ir para estilo, estilo de edição , tipografia, podemos mudar isso para Montserrat, que E podemos mudar o peso para 900 pretos, o que é muito grosso. Então, também podemos aumentar o tamanho ao nosso gosto, talvez até aquele ponto E eu quero que seja para ler algo como Por produtos incríveis a preços acessíveis. Ou simplesmente produtos incríveis a preços acessíveis e voltando ao estilo. Tipografia, podemos reduzir a altura da linha. Talvez até esse ponto, possamos clicar do lado de fora, selecionar a cor do texto, torná-lo preto assim. Você também pode selecionar isso e alterar o estilo, como a tipografia Vamos também fazer disso Montserrat. Montserrat. Se eu selecionar esse botão, posso alterar o texto, todos os produtos, todos os produtos. E podemos mudar a cor de fundo, mas eu quero usar as cores da marca. Então, vou ao meu seletor de cores aqui e escolho a cor, seleciono os pixels azuis, copiei, seleciono isso, vou para estilo, botão, tipo de fundo Cor. E eu vou colar isso lá, e agora fica com a cor da nossa marca. Muito bom. Agora, eu gosto dos meus botões com mais preenchimento à esquerda e à direita, então vou quebrar esse preenchimento, dar a ele um preenchimento esquerdo de 50, um preenchimento direito de 50 preenchimento direito Digamos que 15 aqui. E aqui 15. E eu também gosto de dar a ele um raio de borda redondo, então 50 Ou podemos deixar para talvez às dez. Dez está bem, e eu vou pré-visualizar isso. Lá vamos nós. Também podemos fazer essa cor. Vou selecionar esse azul, copiar, controlar C, enquanto estiver selecionado, selecione isso, vá para o estilo, cole a cor do texto. Sim, vamos torná-lo tão azul. Agora, você pode estar se perguntando, como eu fiz esse vermelho? Eu usei o que chamamos de CSS. Eu queria te mostrar como fazer isso mais tarde. Teremos uma seção sobre CSS, CSS personalizado, mas podemos adicioná-la aqui para termos algo que pareça bom. Produtos incríveis ou acessíveis. Acessível. Agora, se você quiser tornar a palavra acessível, uma cor diferente, podemos usar um elemento HTML chamado span. Então, eu vou ter esses dois colchetes e digitar span dentro de minúsculas Extensão. E então, no final, terei outro período. Mas desta vez, antes da palavra extensão, ela precisa ter uma barra e depois uma extensão Isso diz ao Elementor e ao Wordpress: Ei, eu quero fazer algo com esse texto específico É como um seletor. É como se você estivesse selecionando, é como selecionar essa palavra específica e dizer ao Wordpress Quero fazer algo com esse trecho de texto que selecionei. Então, se formos para o primeiro colchete e dissermos que estilo é igual, podemos usar Então, o aspecto do texto que queremos alterar é a cor. Podemos mudar outras coisas além da cor, mas queremos mudar a cor por enquanto. Então, vou dar uma coluna. Em um espaço, selecionarei essa cor. Vou até a minha cor, escolha a cor e deixe-me ir para a copiada. E se eu vier aqui depois da coluna, colar lá, agora ela ficará com essa cor. Então, estamos dizendo ao Wordpress e ao elemento: Ei, eu quero fazer algo com esse texto que é cercado pelo elemento span, tão simples quanto isso. E o que queremos fazer? Queremos definir uma cor específica. Então, nós o definimos dando a ele um estilo igual à cor que queremos publicar lá. Então, isso é tudo sobre o bloco de texto por enquanto. Talvez voltemos mais tarde para refiná-lo. Voltaremos a partes diferentes para refiná-lo, mas é isso que temos Vamos pré-visualizar as mudanças, e eu estou adorando. Lá vamos nós. Então, na próxima lição, vamos ver como trabalhar com esses botões porque, como você pode ver, eu tenho dois botões. Te vejo em breve. 15. Botões heróis: Então, agora é hora de adicionar dois botões à nossa seção de heróis. Então, como eu consegui isso? Como você já pode imaginar, este é um contêiner que contém os dois e é um contêiner de direção horizontal. Então, voltando ao nosso trabalho, agora, temos apenas um único elemento de botão. Então, se eu for aqui, contêiner, soltar o contêiner lá, posso selecionar isso e soltá-lo lá. E agora eu posso duplicá-lo, selecionar o recipiente que os contém. E depois mude para horizontal. Com isso selecionado, na verdade, sim, com isso selecionado, eu posso ir para estilo, cor, e vamos para o seletor de cores aqui, escolha a cor F 15 a 24, cole aí. Lá vamos nós. Publicar. Agora, há muitas outras coisas que você pode fazer com um botão. Por exemplo, se dissermos em Hover, podemos dar uma animação Então, passe o mouse na animação, podemos dizer que eu amo Bob. Bob. Isso só faz com que pareça estar flutuando no ar. Este não tem nenhum. Então, se eu selecionar isso, vá para efeitos de foco, também posso torná-lo Bob Publicar. Então, isso é tudo por enquanto. Ao trabalhar com botões, você pode brincar com todas essas outras configurações, que são simples, pode brincar com todas essas outras configurações e ver o que elas fazem Então, deixe-me publicar isso e visualizar as alterações, e pronto. Na próxima lição, vamos ver como adicionar a imagem do herói. Te vejo em breve. 16. Imagem principal: Então, agora é hora de adicionar a imagem da seção do herói. Vamos voltar ao nosso editor. E, como fizemos anteriormente, agora vamos arrastar a imagem até lá. E vamos selecionar nossa imagem no computador. Então, vou para Carregar arquivos e vamos para nossa pasta, e esta é a imagem da seção de heróis que eu selecionei. Selecione. E lá vamos nós. Se eu publicar e visualizar as alterações, você notará algo. Portanto, se eu mudar para o nosso site de referência, você notará que eles estão devidamente alinhados verticalmente, de modo que esse bloco fique em algum lugar no meio da altura dele Mas em nosso site, isso parece estar elevado ao topo. Então, para alinhá-lo ao meio, entramos aqui e selecionamos o contêiner que contém o bloco de texto Deseja selecionar o contêiner que contém o bloco de texto. E aqui embaixo, justifique o conteúdo, digamos, centralizado verticalmente Publique isso. E agora isso vai recarregar E agora é isso que temos. Mas agora, é claro, você pode estar se perguntando: e esse pano de fundo? Porque isso está adicionando um toque agradável à seção de heróis para não fazer com que pareça muito simples. No momento, está muito claro. Então, as pessoas gostam que seja simples assim, então você pode deixar assim. Mas vou fornecer a imagem de fundo da seção de heróis. Então, é assim que se adiciona a imagem da seção do herói. Achei que tínhamos mais algumas coisas para editar lá. É por isso que eu queria que fosse uma aula por si só, mas acho que não precisamos fazer nenhuma mudança por enquanto. Então, na próxima lição, vamos ver como adicionar essa imagem de fundo. Te vejo em breve. 17. Imagem de fundo principal: Então, agora vamos ver como adicionar essa imagem de fundo da seção de heróis. Então, voltando ao nosso editor, virei aqui e selecionarei todo o contêiner que contém a seção de heróis. Então, selecionando isso, se você puder selecioná-lo, vá para o controle I e selecione o contêiner mais externo Em seguida, vamos ao estilo, plano de fundo, selecione Clássico, e é aqui que podemos escolher a imagem que queremos escolher, fazer upload de arquivos e selecionar. Vamos para nossa pasta. Eu tinha preparado essa imagem aqui. Se eu clicar com o botão direito do mouse e abri-lo, ele será aberto em uma nova guia na minha outra janela. Como você pode ver, é emplumado. Usei um software on-line para modelá-lo , apenas para garantir que ele não tivesse essas bordas rígidas Então, se eu clicar duas vezes nele e disser selecionar, como você pode ver, ele foi adicionado, mas há um problema. Você não consegue ver a parte inferior. Então, primeiro de tudo, vamos fechar esse plugin porque é um plug-in pago que o elementor quer que você compre Feche a resolução completa, posicione o centro do centro, desse jeito. Digamos que o anexo seja corrigido para que, quando rolarmos, ele permaneça estático ali mesmo. Tão fixo. Repita, não repita. Não queremos que isso se repita. E para o tamanho da tela, nós a queremos como capa. Publique isso. E agora, se pré-visualizarmos as alterações, aí está. Agora você notará que aqui temos esse espaço e ele não parece muito bom. Então, vamos trabalhar nisso, não se preocupe, mas o mais importante é que você saiba como adicionar isso. Selecione este contêiner principal, vá para Avançado, aumente o preenchimento inferior para talvez 20, talvez 50 E então aqui 50 publicam isso. E agora, se visualizarmos as mudanças, sim, agora está começando a tomar forma. Então, basicamente, é assim que se adiciona a imagem de fundo. E caso você esteja se perguntando como posso editar essas imagens. E, na verdade, eu tinha pego o que eu costumava editar. Foi aqui que criei o logotipo e estou usando apenas o freepiek No FreePK, você pode ir aqui e dizer o logotipo do comércio eletrônico e, em filtros, pode vir e dizer editável on-line e marcar isso com o editor on-line E se você selecionar, por exemplo, isso, você pode dizer editar. Ele abrirá o editor de espiadas gratuito, e você poderá alterá-lo para sua loja , criar um logotipo e exportá-lo Você pode exportá-lo como PNG sem plano de fundo. Mas eu abordei como editar imagens com ferramentas on-line gratuitas em uma aula abrangente que publiquei há algum tempo. Você pode ir e conferir. É um curso muito bom e abrangente, onde você não precisa gastar dinheiro para editar suas imagens. Na próxima lição, vamos começar com a seção corporal. Te vejo em breve. 18. Refine o cabeçalho: Então, agora é hora de começar a trabalhar na seção corporal. Deixe-me ir aqui. Queremos começar a trabalhar na seção do corpo e queremos começar com esse ícone. Mas antes de fazermos isso, acho que precisamos resolver a área superior aqui porque ela está feia por enquanto Então, podemos editar esse cabeçalho passando o mouse sobre ele e dizendo, Isso nos levará ao editor de cabeçalhos do kit de elementos, onde criamos isso. Então, eu ainda tenho essa página inicial intacta, mas agora trocamos o cabeçalho aqui apenas para que possamos editá-la rapidamente E aqui estamos. Então, a primeira coisa que quero fazer é quebrar todo o preenchimento de quase todos os contêineres aqui Então, vou selecionar esse grande contêiner aqui e ir para Avançado. Vou quebrar o forro lá e, como você pode ver, tudo se moveu um pouco Isso porque sempre que você adiciona um elemento ou contêiner, ele vem com um preenchimento predefinido Então, só queremos remover isso para reduzir o espaço que está ocupando. Deixe-me fechar isso. Em seguida, selecionarei esse contêiner que contém o logotipo. Mas, como você pode ver, como quebramos o preenchimento padrão, agora ele tem a mesma altura do contêiner externo, então não posso selecioná-lo sozinho Então, controle I e agora expanda isso. Eu quero esse contêiner aqui. Tudo bem Então, eu também vou quebrar o preenchimento disso Eu quero fazer o mesmo com isso. E isso. Em seguida, quero selecionar o texto avançado e quebrar a margem para poder editar células individuais. E eu quero reduzir a margem inferior até talvez 35, menos 35 e a margem superior na mesma quantidade, menos 35. Lá vamos nós. Por enquanto, quero remover isso. Vamos remover isso. Vou te mostrar o porquê, porque aí que teremos a barra de pesquisa e adicionaremos a barra de pesquisa várias lições depois. Então, vou selecionar isso porque isso era 20% da largura, isso pode ocupar 80% e ser empurrado até o final assim. E agora, enquanto isso ainda está selecionado, o contêiner, precisamos organizar os itens dentro dele no centro dessa forma. E acho que temos algo melhor. Vamos pré-visualizar as mudanças. E agora, se eu for para a página inicial, pelo menos agora não há muito espaço lá Então, agora, na verdade, esquecemos de adicionar o botão no final aqui, então vou para o botão Mais Posso adicionar um botão arrastando-o e estilizando-o por toda parte, ou posso ir aqui e selecionar talvez isso, selecioná-lo, copiá-lo corretamente, Selecione o item nervoso e cole. Ele o colará abaixo do item nervoso. Em seguida, seleciono o recipiente que os contém e mudo a direção dessa forma. E agora os itens têm agora, porque mudamos a direção, não podemos mudar a justificativa do alinhamento aqui, podemos mudar o alinhamento para colocar os itens no centro Mas aqui queremos colocá-los no final para justificá-los até o fim Esse pode ser o corte. E podemos mudar o ícone para cartão. Você pode escolher qualquer cartão que quiser aqui. Talvez isso, insira. Não. Deixe-me mudar isso. Eu prefiro talvez isso. Insira, publique. Agora, se pré-visualizarmos as alterações, vamos lá. Então, agora, se eu disser loja online, aí está. Acho que é um cabeçalho muito mais bonito do que antes. Então, acho que não devemos fazer essa lição muito longa. Essa foi uma aula em que deveríamos começar a trabalhar na seção corporal, mas tínhamos que fazer isso. Então, vamos acabar com isso aqui. E na próxima lição, vamos começar adicionando essa seção de ícones. Te vejo em breve. 19. Seção de ícones: Então, vamos adicionar esse ícone. Então, voltando aqui, primeiro de tudo, eu quero controlar o Shift R. Isso é difícil de atualizar. Sim, então aqui estamos. Eu só queria que as alterações que fizemos na cabeça entrassem vigor aqui, mesmo no editor da página inicial Então, agora que terminamos com isso por enquanto, vou fechá-lo e fechar a prévia. Este também é outro editor principal. Feche isso, um pouco de limpeza. Deixe-me fechar Otacul. Tudo bem. Então, agora vamos continuar e dizer que vamos adicionar uma seção de direção também. Além disso. Então eu vou para o Inside Basic, temos o ícone. Então, vou simplesmente soltar o ícone lá. Vou selecionar dentro para escolher o ícone, talvez uma seta apontando para baixo. Sim, talvez isso. Inserir, algo parecido. Estilo. Vamos mudar a cor. Pode torná-lo preto. Faça da cor que você quiser. Podemos aumentar o tamanho. Podemos girá-lo, mas eu não quero girá-lo. Deixe-me fazer 25, 25, 25. É um belo preto que eu gosto. No Hover, podemos torná-lo dessa cor. Então, vou selecionar isso, ir para estilo, copiar Control C, selecionar isso ao passar o mouse ou talvez antes de passar o mouse, podemos torná-lo dessa cor E ao passar o mouse, pode ser 25, 25, 25, preto ou talvez esse azul Publique isso e, se o visualizarmos, pronto. Mas vamos empurrá-lo um pouco para baixo ou para cima. Sim, vamos empurrá-lo um pouco para cima. Então, vou para a margem e reduzirei a margem superior, talvez para 30. E então eu quero reduzir o layout e expandir os efeitos de movimento para dar uma animação quando estiver chegando, saltar para cima, pular para cima desse jeito, publicar, pré-visualizar Assim mesmo. Essa é uma boa maneira de chamar a atenção de alguém e mostrar: Ei, comece a rolar Vamos reduzir um pouco, então expanda o layout. Vamos fazer com que isso seja talvez menos 20. Publique. Vamos ver isso. Ou talvez vamos até mesmo afastá-lo de lá. Então, vamos fazer com que seja 30. Coloque-o fora da seção de heróis. Sim, então vamos colocar isso aí mesmo. E é assim que você adiciona seu ícone ao seu trabalho. Na próxima lição, vamos ver como adicionar essa correção. Sim, vamos ver como adicionar esta seção porque adicionaremos esses produtos em destaque depois de instalarmos o Woo Comer, então não podemos fazer isso agora Então, vamos ver como fazer isso na próxima lição. Não vá a lugar nenhum. 20. Seção de CTA: Então, vamos ver como criar essa seção de CtA. CtA significa chamada à ação. Você tem um bom cabeçalho, uma descrição, alguns pontos-chave e uma chamada à ação. E agora vamos voltar ao nosso editor, voltando aqui. Então, estamos colocando isso aqui, então eu vou dizer adicionar. E, de fato, em vez de recriá-lo, por que não usamos um dos recursos mais incríveis do Elementor Ele permite que você não se repita, então você pode duplicar uma seção clicando nela E agora, é claro, quero colocá-lo logo abaixo desta seção de ícones, para que eu possa simplesmente arrastá-lo e colocá-lo abaixo dela. Exatamente, sem mais nem menos. E agora, o que eu quero fazer é mudar, antes de tudo, selecionar o próprio contêiner, ir para o estilo, remover a imagem de fundo. Em seguida, arrastarei esse contêiner até o final. Se você não consegue fazer isso, como você pode ver, agora não está realmente funcionando. Você pode simplesmente ir para o controle I. Deixe-me resumir isso e aquilo e aquilo. Este é o contêiner do qual estamos falando, como você pode ver, entrando aqui, temos dois contêineres. Eu posso arrastar isso e colocá-lo lá embaixo. Então, agora nós a colocamos depois da imagem apenas para fazê-las alternar. Agora, selecione isso aqui para substituí-lo por um tênis. Então, vamos substituí-lo por um produto diferente. Digamos que esta bicicleta esteja aberta. Agora você deve colocar imagens criativas lá se este for um site real que você está construindo como uma loja de comércio eletrônico, desse jeito E agora podemos, enquanto a imagem ainda está selecionada, vou para o estilo. Vamos ver. Podemos mudar o raio da fronteira 20 assim? Deixe-me mudar essa seção. Explore nossos tênis premium. Então explore nossa versão premium. Dentro do período, temos preços acessíveis, então vou mudar isso para superbicicletas, e vamos remover os preços no final Eu posso reduzir o tamanho da tipografia talvez até aquele local Então, aqui estamos. Eu só quero me livrar de um dos botões. E vamos chamar isso de Shop Bikes. Isso é um apelo à ação. Então, agora também podemos adicionar uma lista de ícones aqui. Então, eu vou dizer mais um ícone. Lista de ícones. Vamos colocá-lo logo abaixo dessa descrição. E, como você pode ver, é uma lista de ícones. E vou mudar isso para o item número um, qualidade premium ou bicicletas com preços acessíveis Então, vamos lá. Nós temos a lista. Como você pode ver, a fonte é diferente, porque não é Montserrat Então, vou para texto, tipografia, mude isso para Montserrat. Lá vamos nós. Agora, você notará que os botões não estão bem alinhados com o resto do texto, e isso porque, como mencionei, cada contêiner tem preenchimento padrão ao redor Então, se eu selecionar o contêiner, vá para Avançar e quebre que agora não há preenchimento padrão e parece bom Selecione essa opção para reduzir a margem inferior. Quebre isso para editar a célula inferior e selecione essa opção para aumentar a margem inferior. Agora, outra coisa que podemos fazer enquanto isso está selecionado é voltar aqui, colocar o ícone e alterar a cor para Quero selecionar essa cor. Controle C, volte aqui, selecione-o. Ícone: cole aí. E ao passar o mouse, quero que seja tão azul. Então, selecione esse estilo. Este azul, copie, selecione este ícone de estilo, passe o mouse. Colar. Então, à medida que passamos o mouse sobre ele, ele muda de cor desse jeito Vamos pré-visualizar as mudanças. E aqui estamos. Estou gostando. Então, é assim que se adiciona essa seção. Claro, você pode brincar com a altura da linha, como você pode ver, elas são quase tocantes, mas eu gosto das linhas bem próximas Gosto da altura da linha. Tudo bem, esse é um bom tamanho. Sim. Então, na próxima lição, vamos ver como criar essa seção de plano de fundo fixo logo abaixo dela. Te vejo em breve. 21. Seção de fundo fixo: Então, agora é hora de criar essa seção de plano de fundo fixo. Então, vamos ver como fazer isso rapidamente. Deve ser muito fácil. Então, voltando ao nosso editor, aqui estamos. Vou apenas duplicar isso logo abaixo e vou me livrar desse contêiner Agora ficamos com apenas um contêiner. Vou selecionar isso e excluir porque não precisamos dele. Como você pode ver, aqui temos apenas um título, uma descrição e uma chamada à ação. Então, primeiro de tudo, selecione isso, vá para o estilo, coloque isso no meio, alinhe-o ao centro, esse estilo, alinhe-o ao centro, botão Comprar bicicleta. Centro. Tudo bem, vamos selecionar o contêiner em si e justificar. Evite usar recipientes desnecessariamente. Então, podemos simplesmente arrastar esse botão e colocá-lo bem no meio e remover o contêiner. Você não precisa de um recipiente para colocar isso lá. Mas se selecionarmos esse contêiner que contém tudo, podemos ir para estilo, plano de fundo. Agora vamos selecionar uma imagem aqui. Qual deles vamos selecionar? Digamos que esses caras estejam vendendo ferramentas, bicicletas, carros, brinquedos, três coisas imprimíveis em D. Agora, definimos o plano de fundo como imagem, mas também queremos definir a cor do plano de fundo como preto. Espere. Não, devemos definir a sobreposição do plano de fundo. Tipo de fundo, selecione isso, selecione a cor e dê preto, preto breu. Mas agora queremos aumentar a intensidade dessa sobreposição, torná-la mais escura Também queremos voltar ao plano de fundo. Faça com que seja fixo no centro. Sem repetição. Certifique-se de que esteja corrigido. É por isso que podemos rolar e deixá-lo exatamente onde está. Eu quero mudar isso para branco. E observe se mudarmos para a cor branca do texto. A laranja ainda permanece porque é definida por esse código de extensão aqui. Também selecionarei esse botão. Na verdade, eu quero usar essa cor laranja, então vou selecionar esse Controle C, selecionar isso, colar aquela cor. Ao passar o mouse, quero que seja branco e o texto preto. Normal, o texto deve ser branco assim. E também quero aumentar o preenchimento desse contêiner externo Avançado, divida isso para a parte inferior, vamos dar 50 e para a parte superior 50. Selecione o texto, dê a ele também uma cor branca e publique. Agora, esse espaçamento é muito pequeno, então vou selecionar o contêiner, com a margem superior talvez 100 ou 150 Oh, são 1.500. Tudo bem, então publique isso. E vamos pré-visualizar as mudanças. Então lá vamos nós. Então, é assim que se adiciona a seção de fundo fixo. Na próxima lição, vamos ver como criar o rodapé. Vamos ver como criar isso um pouco mais tarde. Ah, não, na próxima lição, vamos ver como criar essa seção. Então, eu vou te ver em breve. 22. Crie o rodapé: Então, por que não vamos em frente e criamos o rodapé. Então, sem perder tempo, vamos mudar para o nosso editor aqui mesmo E, como sempre, lembre-se, da mesma forma que construímos o cabeçalho separadamente do corpo, vamos construir o rodapé separadamente do corpo Então, vamos voltar aqui. Agora, na verdade, terminamos com a página inicial por enquanto. Então, vou sair para o WordPress. Certifique-se de que esteja publicado. Você publicou todas as suas alterações e vamos sair completamente. E agora, você sabe o que fazer. Vamos ao kit de elementos, rodapé do cabeçalho. Adicione novo modelo, rodapé, selecione o rodapé aqui. E vamos diretamente para Editar conteúdo. Ele o salvará automaticamente aqui no painel do administrador. Tudo bem, então aqui estamos. Então eu vou para o Flexbox, seleciono isso, adiciono outro contêiner dentro Eu quero com 100%. E para isso, queremos que seja 80%. Agora, para este externo, podemos alinhá-lo ao centro Aqui, podemos adicionar um contêiner. Duplique-o três vezes, selecione este, mude a direção aqui, e agora temos um lugar onde podemos colocar a imagem do nosso logotipo, selecionar o logotipo na biblioteca de mídia, selecioná-lo Podemos adicionar um editor de texto logo abaixo dele. Estilo. Agora, uma coisa que esqueci de mencionar é como definir fontes globais para que você não precise continuar editando telefones ao adicionar um editor de texto E você faz isso acessando as configurações do site, fontes globais. Fonte primária, vamos fazer aquele rato monstro. Clique em Fora do secundário de Montserrat. Você pode escolher a fonte que quiser. Clique fora do texto. Montserrat. Selecione a parte externa e acentue, também, a mesma coisa Salve as alterações de volta no editor. Agora, como você pode ver, automaticamente é Montserrat, e nós não mudamos isso E se eu adicionar um novo editor de texto, ele virá como Montserrat Então é isso. A próxima coisa que queremos fazer é adicionar um título aqui. Vamos colocar um título aqui e vamos fazer com que ele tenha três anos. Digamos que links úteis. E logo abaixo, podemos adicionar um contêiner. Isso tem dois elementos dentro dele. Lista de ícones. Vamos colocar uma lista de ícones lá e duplicá-la, e selecionamos o contêiner, podemos transformá-lo em uma coluna dupla E também podemos espaçar esses dois. Podemos colocar espaço entre eles. Isso significa empurrar isso até o fim, espaço entre algo assim ou, digamos, espaço ao redor do espaço ao redor. Mas eu não gosto que isso esteja desalinhado. Então, um espaço entre eles. Agora, você notará que isso está alinhado bem acima do logotipo. Podemos selecionar o contêiner em si, ir para o topo de preenchimento avançado, digamos 30 Digamos que 40. Selecione esse estilo, tipografia Vamos fazer com que seja 900 ou talvez 800. Vamos clicar lá fora. Eu quero mudar a cor para 25, 25, 25. 25, 25, 25, ou talvez esse azul. Eu não gosto desse preto por enquanto. Então escolha a cor, selecione isso, clique aqui. Agora, como você pode ver, temos esses dois aqui, publique. Se eu voltar aqui antes, pois isso salva, quero dizer: edite com o Elementor, porque o que eu quero fazer é copiar o estilo que colocamos na outra lista de ícones Se eu rolar para baixo e selecionar isso, cópia de vazamento correta, posso vir aqui e selecionar esse estilo de pasta de vazamento correto, selecionar vazamento certo, estilo selecionar vazamento certo E agora tudo o que precisamos fazer é mudar o que cada item diz. Talvez em casa porque esses são links. Podemos ligar para esta loja em, talvez, selecione esta política de privacidade. Termos de uso. E talvez política de cookies. Talvez política de cookies. Sim, assim mesmo. Publicar. Agora, você notará aqui que esses dois estão muito próximos. Na verdade, eu quero fazer isso um pouco mais largo do que isso. Então eu vou colocar isso ou talvez vamos deixar lá. Mas para isso, como é o que vai conter o formulário de inscrição, vamos fazer com que seja de 50% ou talvez 40% Vamos fazer com que isso seja 30%. E vamos fazer esses 30% para fazer 100. Podemos selecionar isso e aumentar o espaçamento entre os três contêineres, as lacunas publicadas por 30 Tenho vontade de selecionar este contêiner e ir para avançado, margem esquerda. Vamos aumentar a margem à esquerda desse jeito. Aqui, podemos dizer que se junte a nós hoje. Então, podemos ter uma breve descrição aqui. Oh, espere. Onde é que se juntam a nós hoje? Eu quero duplicar isso, solte-o aí e diga Junte-se a nós hoje Então é aqui que vamos colocar um chimpanzé de e-mail. Por enquanto, vamos usar isso como espaço reservado, a forma do chimpanzé macho. Assim, podemos estilizá-lo. Para obter os melhores descontos, ofertas e as últimas notícias nossas ou apenas ofertas e ofertas. Então, agora, se eu selecionar o formulário, podemos ir para o estilo e alterar as cores Podemos dar a cor que quisermos. Então, deixe-me selecionar esse azul. Copie, controle C, volte aqui, cole. O que é isso? Bem, isso é tipografia Queremos o botão. Tipo de plano de fundo. Sim, cole isso. Agora, isso é azul, ou podemos torná-lo laranja, cor que você quiser, digamos, publicar Também podemos dizer mídias sociais, ícones. Vamos colocar os ícones de mídia social lá e alinhá-los , talvez neste lado, publicar E eu não gosto que esses dois estejam desalinhados. Então, vou selecionar essa cópia com o botão direito do mouse, para que possamos copiar o estilo Nós aplicamos aqui, clique com o botão direito do mouse no estilo de colar. Então, agora, tudo bem, ele também copiou a largura de 30%. Queríamos que fosse 40, mas agora tem uma margem superior como esta. Publicar. Vamos pré-visualizar as mudanças. Eu gosto, mas esse espaçamento é demais. Vamos voltar aqui e selecionar isso. Redução da margem inferior. Publique, visualize as alterações. Lá vamos nós. Então, agora, isso ainda não é um link. Então, selecionando-o, vincule o URL personalizado. Vamos copiar nossa página inicial. E publique. Visualize as alterações. E agora, se você selecionar isso ou clicar aqui e rolar até o final, temos nossa pasta. Agora, uma coisa é adicionar a margem aqui. Então, selecionando isso, vamos para o topo da margem avançada. Vamos dar 100 ou 150. Publicar isso será recarregado. Vá para casa. Vamos rolar até o final. Agora temos um bom espaçamento uniforme. Então, é assim que se cria uma foto do zero sem usar modelos. Isso foi apressado, mas pelo menos você entende o conceito porque é o mesmo que criar o cabeçalho ou a seção do herói Você só precisa saber como trabalhar com contêineres. E agora que terminamos de tirar uma foto, na próxima lição, vamos ver como tornar a página inteira responsiva Em outras palavras, vamos deixá-lo bonito em outros dispositivos além do PC, porque agora ele fica bem no desktop. Sobre tablets? E quanto aos smartphones? Então, se alguém estiver navegando em seu smartphone. Vamos ver como fazer isso em breve. 23. Cabeçalho responsivo: Então, vamos ver como tornar essa página responsiva em diferentes dispositivos Mas antes de tudo, vamos ver como fica por padrão em diferentes dispositivos. Então aperte Control Shift I no seu teclado. Espere, controle a tecla Shift E no seu teclado. Isso abrirá o console. E agora temos ferramentas diferentes que podemos usar apenas para trabalhar neste site. Você notará que aqui temos essa barra de ferramentas do dispositivo Tgal. Vamos clicar nisso. Isso abrirá alguns simuladores para dispositivos diferentes. Como você pode ver neste menu suspenso, temos diferentes tamanhos de dispositivos. Então, se eu disser iPhone 14 Max, é assim que o site fica por padrão em um iPhone 14. Vamos rolar até o final. Não parece tão ruim, mas pode ser melhorado. Vamos ver como fica em um tablet. Digamos que o iPad Pro. É assim que fica em um iPad. Acho que fica bem em um iPad, mas o cabeçalho não parece muito bom. Então, por que não começamos com o cabeçalho? Então, vou fechar isso, passar o mouse sobre isso e depois o cabeçalho para que possamos editá-lo. E aqui estamos. Então, a primeira coisa que eu gosto fazer é mudar para o modo tablet. Em primeiro lugar, deixe-me ser muito explícito sobre isso 100% Controle, eu quero esse que está guardando tudo. Então 90%, não pixels, por cento. Cerca de 98%. Sim, eu gosto disso. 98% está certo. Então, agora vamos selecionar o contêiner do logotipo e torná-lo 20%. E esse outro 80%. Não são pixels. Vamos publicar isso. E agora você notará as alterações que definimos ou as configurações que definimos no modo desktop ainda estão em vigor aqui, e é por isso que isso ainda tem uma margem em relação ao modo desktop. Então, se eu selecionar, tudo bem. Eu só quero selecionar o elemento do kit de elementos. Feche isso. Vá aqui. Como você pode ver, ele tem as configurações de margem que definimos no modo desktop. Queremos acabar com isso, publicar isso. Vamos analisar as mudanças. Agora, controle a tecla Shift I para alternar para o modo tablet e eu gosto da aparência. Já parece bom, e agora você notará aqui, quando clicarmos no menu de hambúrguer, que precisamos de um logotipo aqui. Vamos voltar aqui. Clique nisso. Como você pode ver, podemos acessar o conteúdo, as configurações do menu do celular, o logotipo do menu do celular. Vamos adicionar nosso logotipo como de costume. E agora o logotipo está aparecendo no menu do celular, mas é muito largo. Eu quero que seja um pouco estreito. Então, enquanto ainda estiver selecionado, vou usar o estilo. Menu móvel. Espere, sim, uma embalagem de menu com, digamos, porcentagem, e eu a quero em algum lugar logo antes que ícone do Togo desmorone, Publique isso. Se eu fechar isso, vamos mudar para o modo móvel. Então é isso que parece no modo móvel. Agora, eu não acho que fique bom assim. Parece muito complicado, muitas coisas no Então, o que eu gosto de fazer às vezes, nem sempre, quando tenho algo extra como esse botão, eu gosto de criar um menu ou cabeçalho móvel separado. Então, voltando para cá, posso duplicar isso E agora, isso só aparecerá no tablet e no desktop, mas também teremos um separado para celular. Então, fazemos isso selecionando o contêiner que contém o cabeçalho inteiro, vá para avançado, layout de colapso, responsivo Queremos esconder isso no tablet e no desktop. Ele só aparecerá no celular. Isso significa que é o único cabeçalho que aparecerá no celular. E se eu for para esse outro, queremos escondê-lo no celular porque ele deve aparecer no desktop e no tablet. Então, entrando no layout de colapso avançado, responsivo, oculte no celular, publique isso Agora, se eu mudar para o celular, você notará que essa nota será reduzida assim e ficará ativa. Agora é nota baixa. Esse é o ativo. E agora eu só quero me livrar desse botão porque eu não gosto dele lá. E eu quero dar a esse contêiner de botões 50% da largura e esse outro 50%, para que fiquem lado a lado. Então, selecionando isso, verifique se é o contêiner do logotipo. Vamos dar 50% desse jeito. Vamos selecionar esse outro. Vamos dar 50%. Como você pode ver, devido ao acolchoamento e à margem dos contêineres externos, precisamos torná-los mais estreitos Então, deixe-me descer para talvez 44%. Na verdade, 40%. E agora vou selecionar esse contêiner que contém esses dois contêineres e, vamos ver, o espaço entre eles. Sim, então podemos separar tudo e colocar espaço entre eles. Publique isso. E agora isso foi recarregado Então, agora, como você pode ver, esse é o cabeçalho móvel. Mas quero dizer, esse é o cabeçalho do tablet. E se mudarmos para o celular, talvez iPhone ou Samsung Galaxy S 20, ultra, como você pode ver, estamos usando o outro cabeçalho. Eu adoro isso. Agora, acho que precisamos fazer com que isso reduza talvez 60% a largura do recipiente externo. Vamos definir isso em 98%. Publique porque eu quero empurrar esse ícone de hambúrguer um pouco para dentro Sim, assim mesmo. Vamos fazer com que seja 96%. Assim mesmo. Eu adoro isso. Agora, se eu clicar no ícone Burger Tudo bem, então o logotipo está escondido aqui porque no menu do celular, esse botão togo foi reduzido Então, vamos corrigir isso. É a mesma coisa aqui se eu clicar aqui, como você pode ver. Então, no celular, queremos que a largura seja maior, desse jeito. Publique isso e vamos vir aqui. Vou recarregar Agora, se clicarmos nisso, sim, agora está com boa aparência. Agora, esse é o menu do editor do Wordpress. É o mesmo cabeçalho do homem aqui com todas essas configurações. Então não se preocupe com isso. Tem aquele botão togo, e o logotipo está atrás dele Então, basicamente, é assim que o cabeçalho é responsivo em diferentes dispositivos Na próxima lição, vamos ver como tornar o resto da página responsivo Não vá muito longe. Na verdade, pegue um copo de água e volte. 24. Atualização de cabeçalho responsivo: Temos um cabeçalho responsivo. É hora de tornar o resto da página responsivo. Mas antes de fazermos isso, lembro que não abordamos como editar esse menu, esse menu móvel. Então, como você pode ver, em primeiro lugar, os efeitos de passar o mouse são todos bons, mas e se você quiser mudar a cor desse botão de toque E também, e se você quiser mudar a cor desse menu de hambúrguer Então, selecione o elemento do menu. Então diz Editar elementos no menu nervoso do kit. Enquanto estiver dentro do estilo, vamos ao menu de hambúrguer. Cor do ícone de hambúrguer. São essas linhas que estão dentro do botão. No momento, eles têm essa cor. Quando passamos o mouse, queremos que eles fiquem brancos. Então, ao passar o mouse, cor do ícone de hambúrguer. Branco. Então, ao passar o mouse, agora é branco Se você quiser alterar o plano de fundo, aqui é onde você o altera. Por exemplo, digamos eu queira fazer com que seja dessa cor, dessa cor laranja. Deixe-me escolher essa cor, escolha uma cor. Vamos escolher um pixel laranja lá. Selecione isso. Agora, se formos para o fundo, colorir , cole isso lá. Se eu passar o mouse sobre isso, agora é dessa cor. E parece ter uma borda azul. Então, tem uma fronteira? Nenhuma. Sim, assim mesmo. Mas, novamente, você não passa o dedo no celular Então isso não faz sentido. Mas de qualquer forma, é assim que você gerencia suas cores. Em seguida, se eu clicar nele agora, ao clicar nele, a cor será alterada para azul. Existe um estado ativo? Deixe-me publicar isso e ver o que está surgindo. Visualize as alterações. Tudo bem. Então, quando você clica nisso, sim, agora está com boa aparência. Quando está ativo, é laranja. Agora, esse é o menu de hambúrguer. Mas quando clicamos nele, isso é chamado de ícone do togo. Então, há o Hamburger togo e há um togo fechado. É disso que estamos falando. Cor do ícone de hambúrguer. Em circunstâncias normais, podemos deixá-lo nessa cor. Mas no Hover, é claro, não há estado de foco nos telefones celulares, mas eu só quero mudar para essa laranja Tudo bem, isso é o Oh, sim. Desculpe, esse é o ícone. Também temos o histórico. Cole isso. Tudo bem. E então, para o tipo de borda, nenhum. Assim mesmo. Publique isso. E agora também quero atualizar ou recarregar esta página para que tudo o que fizemos também fique visível em nosso editor, não apenas no produto final Agora está fazendo efeito, e é isso que eu queria mostrar a vocês por enquanto. Então, agora podemos sair. Na verdade, eu posso simplesmente fechar isso e depois sair de lá e de lá. E se eu vier aqui, basta clicar nele para que possamos começar a editar a página em si. Aqui vamos nós. Agora que mudamos para a página em si, Control Shift I Now, você percebe que não fizemos essas atualizações no menu do tablet e do desktop, mas pelo menos você entende como editar as cores do menu, as cores do menu hambúrguer Então isso é uma tarefa. Vá em frente e faça o mesmo aqui. Eu queria que você entendesse como fazer isso. 25. Página responsiva: Então, agora, primeiro de tudo, vamos para a página inicial. Tudo bem Então, agora vamos editar com o Elementor. Lá vamos nós. Então, mude para o modo tablet. No modo tablet, também vamos selecionar isso e ser muito explícito No momento, ele tem a configuração de desktop de 100%, mas eu gosto de ser muito explícito sobre meus valores Aqui, ele também está usando o padrão. Então, deixe-me fazer isso com 96%. Sim, eu adoro essa publicação. Mas acabei de lembrar que não gosto de colocá-los lado a lado quando estão no tablet. Gosto de fazer cada um desses 100% e colocá-los no modo de pilha Então, agora que isso tem 96% de largura, eu posso fazer isso com 100% de largura também E isso 100%. E agora, se eu for para esse contêiner externo e mudar de direção, isso é 100%, e isso é 100%. Então, agora tudo que eu preciso fazer é selecionar isso, ir para o estilo, alinhar isso ao centro, ir aqui, estilizar, alinhar ao centro, selecionar esse contêiner, alinhar tudo ao centro Publique. Agora podemos reverter isso ou deixar assim. Algumas pessoas preferem a imagem antes do texto. Então, a maneira de conseguir isso colocando a imagem antes do texto é simplesmente inverter. Agora está indo para baixo. Tudo no contêiner está indo para baixo. Podemos dizer, não, vamos inverter a ordem, sem mais nem menos. Mas, como eu disse, quero que seja assim. E eu posso reduzir o tamanho dessa tipografia de cabeçalho, reduzir isso para talvez esse tamanho, publicar Em seguida, vou rolar para baixo. Eu gosto de onde está, mas talvez também possamos fazer isso em 96% Deixe-me reduzir o tamanho desse cabeçalho. E a altura da linha até esse ponto. Você também pode fazer o mesmo. Se você quiser as imagens, se quiser que cada um desses contêineres ocupe 100%, você pode fazer isso. Eu vou fazer algo diferente. Vou selecionar isso e reverter isso, colocá-lo lá. Vou deixar isso exatamente onde está, mas posso diminuí-lo , desse jeito, publicar Vamos pré-visualizar as alterações. Agora, Shift I, Control Shift I, e vamos mudar para esses dispositivos. Vamos dar uma olhada no iPad Pro. Então é assim que fica no iPad Pro, rolando para baixo. Sim, acho que parece bom. Agora é hora de trabalhar no oleiro responsivo. Então, basicamente, eu sei que não fizemos um trabalho perfeito. Ainda há espaço para melhorias, mas, claro, isso é apenas para mostrar como fazer isso. Cabe a você fazer com que pareça incrível. Mas mesmo que seja esse o caso, deixe-me torná-lo um pouco maior. Eu não gosto da aparência. Selecione isso. Tipografia. Vamos aumentar o tamanho até talvez esse ponto. E se mudarmos para o nosso tablet, acho que ficará muito melhor. Mas agora vamos aumentar a altura da linha. Tudo bem, então vamos publicar isso e pré-visualizar as alterações Acho que agora está incrível. Então, nos vemos no próximo copo, enquanto trabalhamos em um rodapé responsivo. Te vejo em breve. 26. Rodapé responsivo: Agora é hora de trabalhar no rodapé. Vamos torná-lo responsivo. Vou voltar aqui. Agora, uma coisa que você notará é que não trabalhamos para torná-lo responsivo em dispositivos móveis, porque você usará os mesmos princípios que usamos no tablet Por exemplo, para esse título, precisamos entrar aqui e torná-lo menor. Eu acho isso bom. A aparência já é boa. Podemos pegar isso e alinhá-lo ao centro e ao estilo Faça o mesmo com este. Ou podemos saber porque queremos deixar essa lista alinhada à esquerda, vamos deixar tudo alinhado à Agora, uma coisa que posso fazer aqui é selecionar o contêiner que contém a caixa de texto avançada. E não vamos quebrar esse link. Vamos adicionar um preenchimento de 20 em todos os lados. Estamos apenas adicionando um pouco de espaço, alguma mesada nas laterais Então você pode fazer o mesmo com isso, selecione isso. Avançou 20 uniformemente em todas as rodadas. Então, vá em frente e termine isso, porque agora queremos ir para a foto. Vou publicar isso. Ou, deixe-me fazer isso muito rapidamente. Deixe-me fazer isso rapidamente nesta parte, 20, e pronto. Publique. Tudo bem, mudando para aquele telefone. Está parecendo incrível. Então, agora vamos mudar para o rodapé. Na verdade, agora vamos mudar para essa prévia. Vá para a página inicial. Editar rodapé Na verdade, poderíamos ter feito o mesmo aqui apenas saindo disso, fechando isso e indo aqui, rodapé. Mas de qualquer forma, não se preocupe. Então, vamos fechar todos esses outros. Selecionando o rodapé, mudando para o modo tablet, é claro, vamos ser explícitos sobre isso ser 100% O mesmo caso se aplica aqui. 96%, e eu vou permitir isso. Devo permitir esse preenchimento, preenchimento padrão, porque acho que há muito espaço Vamos apenas ver isso no front-end em vez de adivinhar. Controle a tecla Shift I e vamos mudar para o modo tablet. iPad pro. E agora quero que acessemos a página inicial para que possamos ver o alinhamento. É disso que estou falando. Esse espaço não é tão grande quanto o espaço da foto, então precisamos remover o preenchimento Sobre isso, é isso que tem mais conteúdo. Podemos torná-lo mais amplo. Então, largura 40, digamos 50, cerca de 50. Que tal 60? Ou outra coisa que podemos fazer é o que fizemos anteriormente. Podemos fazer isso com 100% de largura. 100% Control I para abrir a estrutura. Vamos selecionar o contêiner que contém esses três contêineres, voltar aqui, e eu quero que a direção seja para baixo assim Podemos selecionar o logotipo e definir a largura, talvez até esse ponto, selecionar esse estilo, alinhar ao centro Vamos fazer com que isso ocupe 100%. Agora, lembre-se de que definimos uma margem no desktop, então vamos quebrar isso. E lembre-se, esse é o modo tablet. Portanto, quaisquer mudanças que estamos fazendo aqui estão afetando apenas o modo tablet, não o desktop. E então vamos colocar isso. Podemos colocar isso no centro. Você pode fazer isso em 50%. Selecione isso e alinhe tudo ao centro dessa forma. Podemos remover o preenchimento superior da margem superior zero). Selecione isso. Vamos selecionar essa cópia vazada correta. Selecione o estilo correto de pasta de vazamento. Assim mesmo. Selecione isso. Tem alguma margem inferior? Não, e quanto a isso? Acho que criamos uma lacuna para isso no contêiner principal que os contém? Sim, acho que definimos 30, digamos dez ou zero, porque não quero muito espaçamento lá Mas, para isso, podemos reduzi-la um pouco, avançada, margem entre as 30 melhores publicações. Lá vamos nós. Então, como você pode ver, a coisa mais importante para você aprender é como usar essas ferramentas para criar qualquer layout que você tenha em mente. E você pode se inspirar pesquisando de lojas virtuais ou modelos de sites e simplesmente copiando o design de sua preferência Desde que você saiba como usar as ferramentas, você pode criar qualquer tipo de site. Então, vou fechar isso. Não, em vez de fechá-lo, controle, vamos dar uma olhada agora. Control Shift E. Se formos até o final, é assim que nossa foto fica. Estou satisfeito com isso. Vá em frente e continue brincando com as configurações para ver o que você pode criar. Eu posso simplesmente copiar esse texto. Vamos ao conteúdo. Sim, talvez possamos ter algo assim porque eu não gosto da aparência dessa linha. Olho Control Shift. Sim, algo desse tipo. Então, é assim que o rodapé é é responsivo. Estamos quase terminando as páginas elementares porque, quando estivermos trabalhando com Woo Cameras, não usaremos Mas na próxima lição, vamos ver como trabalhar com formulários do Wordpress à medida que criamos a página de contato. Lembre-se de que temos uma página de contato se eu puder mudar para nosso site de referência. Sim, então esta é nossa página de contato. Se você vai ter um site WordPress, você deve entender como usar os formulários do Wordpress, permitindo que as pessoas entrem em contato com você ou se inscrevam na sua lista de e-mails Quando eles preencherem seus dados aqui e enviarem uma mensagem, eles devem chegar à sua caixa de entrada Então, como você faz isso? Vamos ver como fazer isso, a partir da próxima lição. 27. Atualizando o rodapé: Eu notei alguma discrepância aqui. Se eu rolar até o final e estiver na página inicial, o rodapé ficará incrível Se eu for para a página A, que criamos aleatoriamente, agora há um problema aqui Então, eu não sei exatamente o que está acontecendo, mas vamos ver se podemos solucionar Então, vamos para o rodapé. Agora, uma coisa que podemos fazer é abrir esse modo de navegação anônima só para ver como ele se parece Controle a tecla Shift N e eu digitarei vfxpod.com. Cole-o lá e role até o final, se eu mudar para a página de contato Acho que esse elemento tem alguns problemas porque não sei por que está acontecendo assim. Por que está aparecendo assim na página inicial, mas não está funcionando nessas outras páginas Então, vamos ver, lista Sim, podemos usar a lista de páginas. Na verdade, é isso que deveríamos ter usado há muito tempo , porque esses são links para páginas da web específicas. Então, deixe-me deixar isso aí. Item do anúncio. Vamos chamar isso de lar. Agora podemos pesquisar a página inicial digitando lá. E lá vamos nós. Também podemos adicionar outro item. Vamos chamá-lo de loja. Mas agora, para a loja, teremos que instalar os Woocomers primeiro. Então, vamos pesquisar outra página que temos e entrar em contato. Então, sobre e aqui sobre. Se uma página não existir, ela não aparecerá se você digitar um nome aqui. Então, digamos que produtos e digite aqui produtos , eles não aparecerão porque ainda não temos uma página de produto. Mas como você tem uma página de contato, podemos colocar esse contato lá. Então, vamos mudar isso para contato. E agora diz contato. Agora, vamos remover isso e arrastar isso para lá. Então, vamos remover isso. Simplesmente não está funcionando. Em casa. Agora, vou apenas duplicar isso, mas para você, você vai usar as páginas de que precisa Agora, também vou selecionar esse contêiner. Espaço uniforme. Vamos dar uma olhada no que temos aqui. Tudo bem, podemos simplesmente aumentar a diferença entre os dois em vez de colocá-los muito distantes. Então, digamos 40 ou 60, 60. Sim. Eu gosto desse jeito. E agora você notará que a cor é azul, porque essa é a cor global definida pelo Astra, o tema Então, teremos que ir até a área personalizada para alterar essa cor. Então, eu vou dizer publicar. Temos que mudar isso para outras páginas que você tem. Talvez política de privacidade. A propósito, quais páginas temos? Se eu puder voltar rapidamente às páginas. Só temos três. Vamos adicionar mais algumas páginas. Um, dois, três, Publicação de privacidade. Vou aqui e direi os termos de uso, publicação e cookies. Publique. Você pode incluir quantas páginas quiser. Mas agora deixe-me fechar todos eles. Atualizar. Agora temos todas essas páginas. Então, voltando aqui, selecionando isso, podemos chamar isso de privacidade e aqui digitar privacidade. Privacidade. Selecione esses termos de uso. Termos. E, finalmente, Cookies. Biscoito. Lá vamos nós. Perfeito. Publique. E agora, como isso é menor, acho que podemos ampliá-lo. Então, selecionando isso, vamos fazer com que seja talvez 40% e reduzir isso para 20% de publicação. Pré-visualização. E eu acho que parece melhor. Agora, como mencionei, precisamos personalizar porque esses são links. O Astra define cores automáticas para todos os links, dá a eles uma cor global porque, como mencionei, um tema é o que determina a aparência do seu site, fornece todas as configurações padrão Cabe a você ir e mudá-los. Então, aqui estamos. Se usarmos cores e tintas globais, podemos mudar isso para as cores da nossa marca ou podemos selecionar talvez essa cor Pronto, mas isso não está mudando. Eu não sei por quê. Uh, vamos mudar a cor do sotaque. Agora, isso é um fator limitante porque e se eu quiser passar o mouse Se eu estiver passando o mouse sobre um deles, eu queria que ele mudasse de cor, mas não consigo Mas isso não é grande coisa. Desde que isso mude para uma mão, alguém sabe que pode clicar. Agora, fechando isso, vamos lá. Então, indo para casa, vamos testá-lo nas outras páginas. Então é isso que parece lá. Sobre a página. Isso é o que parece. Página de contato. Incrível. Está parecendo bom. Então, agora, como mencionei, na próxima lição, a partir da próxima lição, vamos começar a construir nossa loja Wocomers Vamos criar produtos. Em seguida, criaremos a página do produto. Vamos nos conectar ao PayPal e permitir que as pessoas façam pagamentos em seu site para que você possa entregar as mercadorias a elas. Quando terminarmos, este site estará pronto para começar a receber dinheiro. Vamos ver como fazer isso. Próxima lição. 28. Crie um formulário de contato: Eh, bem-vindo de volta. Então, agora é hora de você aprender a trabalhar com formulários do Wordpress. Agora, deixe-me mudar para o site de referência. Como você pode ver aqui na página de contato, temos um formulário que exige que o usuário insira seu nome, endereço de e-mail e mensagem. Se eles tiverem alguma dúvida ou quiserem nos dar algum feedback, podem fazer isso usando este formulário. Então, como você cria um formulário do Wordpress? Essa é a maior questão. Para fazer isso, precisaremos de um plugin de formulário. Vamos voltar ao nosso site. Aqui estamos, estou dentro do painel. Então, vou para os plug-ins, Adicionar novos. Agora, se eu digitar o formulário, você notará que temos vários plug-ins de espuma disponíveis para nós. Mas o que queremos é chamado Forminator Forms do WPMU Dev Para mim, este é o melhor plugin de espuma de todos os tempos. Ele fornece vários recursos gratuitos que, de outra forma, você teria pagar se estivesse usando outros plug-ins de espuma. Tudo bem, então vamos instalá-lo, e eu vou ativá-lo. E imediatamente, você o verá aparecer aqui. Então, se eu clicar , ele nos levará ao painel do plug-in, o painel do forminator E como você pode ver aqui, podemos seguir em frente e criar uma espuma ou uma enquete. Se você quiser realizar enquetes em seu site, poderá coletar as opiniões dos usuários gratuitamente Então, vou criar e seremos apresentados a esses modelos com os quais podemos começar. Mas eu quero que usemos um formulário em branco para que possamos construí-lo do zero. Digamos que essa seja a página de contato. Então entre em contato. Formulário de contato. Deixe-me apenas entrar em contato com o formulário, criar. E aqui estamos. Então, agora é aqui que devemos inserir nossos campos, e podemos fazer isso clicando em inserir campos. Esses são os diferentes tipos de campos que podemos adicionar ao nosso formulário. Então, vou dizer que quero um campo de nome. Também quero um campo de e-mail e um campo de área de texto. Se eu voltar aqui, esse é um campo de nome, e-mail e área de texto. Inserir campo. E como você pode ver agora, temos um, dois, três, e esse é o botão. Isso é adicionado automaticamente. Tudo o que você precisa fazer é mudar o que ele faz ou diz. Então, antes de fazermos qualquer outra coisa, quero que você clique em Visualizar. É assim que nosso formulário se parece atualmente. Então, vamos ver se podemos atualizá-lo um pouco. Então, primeiro vou publicá-lo . E no momento em que o publicamos, recebemos esse código curto. É isso que teremos que colar no front-end da nossa página de contato para exibir a família. Então, deixe-me fechar isso. Se eu for às páginas e piscar o link Abrir link em uma nova guia e ir aqui para a guia, teremos a página de contato Então eu vou dizer que editar Ainda não é uma página elementar. Então, primeiro de tudo, lembre-se, vamos até o modelo e alterá-lo para elemento ou largura total Vamos também acessar as configurações do Astra. Vamos dar a ela uma largura total, recolher isso, expandir a barra lateral, sem barra lateral, recolher isso e vamos desativar esses campos Guarde isso. E agora podemos continuar editando com o Elementor. E aqui vamos nós. Portanto, é uma página em branco, mas temos nosso rodapé e cabeçalho 29. Crie a página de contato: Então, voltando aqui, como você pode ver, temos os contatores. Deixe-me copiar isso. Agora, aqui, é claro, deixe-me adicionar essa vantagem. Vamos colocar o título lá. Deixe-me colar isso aí. Deixe-me também pegar esta cópia de texto. Além disso, não. Vamos aqui para adicionar um editor de texto. E vamos colocar isso aí. Então, os dois estão dentro desse contêiner, mas não temos um contêiner que deveria guardá-los. Então eu esqueci isso. Então, vamos adicionar um contêiner. Está dentro do contêiner externo, então podemos arrastar isso e soltá-lo lá e isso lá dentro. Então, agora, como de costume, selecione isso. Vamos fazer com que seja 100% da tela. Então vamos pegar isso e fazer com que seja 80%. Em seguida, volte aqui e alinhe-o ao centro. Espere, aí mesmo. Tudo bem, então selecione este alinhamento ao centro, estilo, centro alinhado Selecionando isso, vamos voltar à tipografia de estilo. Vamos fazer com que seja 900. Eu gosto muito dele. Portanto, aumente o tamanho talvez até 0,50. E, claro, as cores Vamos dar esse azul. Você pode dar a cor que quiser. Então escolha a cor. Escolha um desses pixels, copiado, selecione isso. Entre aqui, cole lá. Agora eu também posso escolher essa cor. Volte para esse contato. Podemos adicionar esse intervalo. Extensão de extensão. Vou voltar para cá. Estilo é igual a cor e cole essa cor lá. Publique. Então, deixe-me agora pegar esta cópia. Conteúdo, cole-o lá, selecione-o para adicionar esses detalhes. Publique. Lá vamos nós. Agora, como você pode ver, isso não é tão amplo quanto o que temos aqui. Então, podemos selecionar isso e aumentar o preenchimento nas laterais, talvez o preenchimento à esquerda, 50, o preenchimento à direita, 50 ou talvez 150, e aqui 15250, 250, ou digamos Basta brincar com os valores até ficar satisfeito. Isso é 2.500. Desculpe por isso. Publique. 30. Exiba o formulário de contato: Então, agora, lembre-se, estamos aqui dentro do forminator. Acabamos de criar nosso formulário e, quando criamos o formulário, recebemos um código curto, mas esse pop-up desapareceu. Então, para acessar o código curto, basta ir até aqui e copiar o código curto. Sim. Então, voltando aqui, podemos selecionar e adicionar uma nova seção. Ou podemos duplicar isso, apenas duplicar aquilo. E vamos deletar tudo aqui. Vamos remover o preenchimento que aplicamos ou vamos deixá-lo lá porque, ou vamos deixá-lo lá na verdade, queremos que ele tenha esse preenchimento Mas, para colar o código curto, precisamos procurar o elemento do código curto. Então, código curto, solte-o aí. Em seguida, vamos colar o código curto que acabamos de copiar daqui. Cole-o aqui e o formulário aparecerá aqui. Então, publique o Preview. E aí está. Agora, como eu disse, na verdade precisamos de mais acolchoamento nas laterais Então, precisamos aumentar isso para talvez 300 ou 400. Agora, digamos que 300 por 300 publiquem. Agora, se vermos isso, tudo bem, eu gosto dessa largura. Então, nossa página de contato está realmente começando a tomar forma. Se rolarmos, aqui está nossa foto. O que há de errado com isso? Atualizar. Tudo bem, voltaremos a trabalhar nisso. Não se preocupe 31. Estilize o formulário de contato: Então, agora precisamos estilizar isso um pouco porque, como você pode ver aqui, eu tenho algumas bordas cinzentas grossas. Isso está ocupando toda a largura. Então, como podemos conseguir isso? Voltando aqui e voltando ao formulador, as configurações do formulador Agora que nossos campos foram adicionados, vamos para a aparência clicando nesta aparência ou aqui embaixo. Então, aparência, podemos optar por continuar com isso. Isso é o que eu escolhi para o site de referência, mas deixe-me continuar com isso por enquanto. E queremos mudar as cores. Vamos usar cores personalizadas. Para o botão de envio, quero que usemos essa cor. Então, voltando aqui, selecionando isso, queremos pegar esse código de cores, voltar aqui. Cor de fundo, isso e Oh, espere, nós a colamos aqui, e a cor do texto deve ser branca. Então, se pré-visualizarmos, é isso que temos. Agora, lembre-se de que selecionamos a aparência sem bordas. Portanto, precisamos dar aos campos de entrada e área de texto alguma cor de fundo. Portanto, a cor de fundo pode dar a ele um cinza muito fraco, talvez até esse ponto, se eu pré-visualizá-lo, sim, você pode vê-lo Não sei se você pode ver, mas você pode torná-lo mais escuro se quiser, usar aqueles com borda ou simplesmente escolher uma cor de borda aqui Digamos que essa cor, pré-visualização. Não sei por que não está aparecendo. Vamos escolher um escuro de uma cor diferente apenas para visualizá-lo. Tudo bem, não podemos definir uma cor de borda porque a selecionamos sem a borda. Então, vamos selecionar isso. Agora, se voltarmos aqui e pré-visualizarmos, certo. Sim, agora a cor está fazendo efeito, mas queremos que a cor seja um cinza claro Portanto, você pode inserir manualmente F 9f9f9 aqui. Vamos pré-visualizar as mudanças. Eu gosto disso. No Ha, a cor da borda deve permanecer assim. Quando está focada, a cor da borda agora pode ser esse cinza mais escuro. Isso é o que eu quero dizer. Deixe-me te mostrar. No Ha, nada muda, mas quando está ativo, ele tem essa cor de borda. Atualize isso. E agora, se formos ao editor de contatos, selecionarmos o elemento de código curto e aplicarmos, aplicaremos as alterações que fizemos no back-end. Lá vamos nós. Como você pode ver, as cores entraram em vigor e agora podemos pré-visualizar para atualizar a pré-visualização. Lá vamos nós. Adoro o que temos, mas esses cantos são muito afiados. Adoro que meus cantos pareçam ligeiramente arredondados assim. Então, vamos voltar aqui. E antes de irmos longe demais, quero voltar para os campos. Aqui, podemos alterar esses textos de espaço reservado, todos esses Então, aqui, o Sr. Moneybags apply pode vir aqui para o e-mail e me dizer em your.com, inscreva-se apply pode vir aqui para o e-mail e me dizer em your.com, inscreva-se por texto. Comece a digitar. Candidate-se. Atualize, visualize. Lá vamos nós. Portanto, o espaço reservado foi atualizado E se você quiser mudar sua cor, você pode ir para a aparência, voltar para as cores e para a área de entrada e texto. Vamos ver. Espaço reservado. Então, há cor e há a cor do texto. Portanto, o espaço reservado é esse texto, mas a cor do texto é quando você começa a digitar Então, esses são dois tipos diferentes de texto. Então você pode definir a cor aqui. Você pode dizer que o espaço reservado deve ser esse cinza tênue. Vamos ver o que parece. Assim. Ou você pode torná-lo mais escuro Talvez assim. Então, para a cor do texto, você pode definir algo escuro ou talvez isso. Pré-visualização. Se eu começar a digitar, é muito visível. Atualize isso. E agora, para fazer essas outras edições para adicionar um canto arredondado e fazer com que esse botão ocupe toda a largura, precisaremos usar CSS personalizado 32. CSS personalizado do Forminator: Então, vamos voltar aqui e rolar para baixo até o final, teremos um campo para CSS personalizado, habilite-o e agora temos um campo para inserir algum E se o formulador pensar no futuro e até mesmo nos fornecer alguns seletores que talvez queiramos usar, por exemplo, para afetar a área do texto, podemos selecionar esse seletor E tudo o que colocarmos dentro desses dois colchetes será aplicado ao elemento da área de texto Então, eu quero dizer raio de borda de cinco pixels. Se eu visualizar isso, agora você notará que a área de texto tem aquele canto arredondado, mas as entradas, esses são campos de entrada Esse é um campo de área de texto. Então, vamos fazer o mesmo com os campos de entrada. Então coloque os carros do mouse lá e Enter, depois insira. Entrar. Podemos copiar isso e colar aí. Pré-visualização. E agora também é arredondado. Quero dizer, no momento, acho que está muito desbotado porque deveríamos ter tornado pelo menos as bordas ou o texto do espaço reservado mais visíveis Então, deixe-me atualizar isso antes de prosseguirmos e voltarmos aqui para as cores. Acho que a cor da borda pode ser mais escura, tão escura. Acho que agora parece muito melhor. Pode fazê-lo desmaiar um pouco. Pré-visualização. Sim. Tudo bem. Agora, você notará que não temos um seletor para o botão, mas por todos os anos em que usei o formator, o seletor para o O botão Enviar é sempre o formulador, seguindo seu botão de convenção: enviar Entrar, botão formatador, Então, vou copiar isso e colar lá. Entrar. Primeiro de tudo, vamos pré-visualizar as mudanças lá. E agora, como você pode ver, também é arredondado. Mas agora podemos dizer largura de 100%, espere. Com 100% de pré-visualização. Lá vamos nós. Parece muito melhor agora. Atualizar. Está atualizado, salvo. Voltando aqui, selecione o elemento de código curto e aplique. E agora, se pré-visualizarmos as mudanças, vamos lá. Nosso formulário agora está incrível. 33. Página de contato responsiva: Tudo bem. Então, agora, por que não vamos em frente e fazemos com que ele responda muito rapidamente Então, voltando a esta página, vamos torná-la responsiva Mudando para o modo tablet. Como você pode ver, o preenchimento que tínhamos no modo desktop ainda é aplicado Então, selecionando isso avançado, queremos fazer com que essa ruptura seja aquela. Apenas deixe isso exatamente do jeito que está. Selecionando isso também. Vamos quebrar isso. E lá vamos nós. Nada mais publicado. Então, se virmos isso, então Control Shift I, é assim que fica em um iPad pro. Se mudarmos para um dispositivo móvel como esse, podemos adicionar um pouco de preenchimento na lateral, então, mudando para celular, selecionando isso, podemos dizer quebre isso Em seguida, à esquerda, 20 à direita, 20. O mesmo caso se aplica a isso. Quebre esse 2020. Vamos selecionar isso. Podemos reduzir a fonte para torná-la uma linha, publicar. Aqui vamos nós. Então, agora parece incrível em um telefone celular. Sim. Então, é assim que se cria um formulário Wordpress usando o forminator Como mencionei, o formator é um dos meus plug-ins favoritos do Wordpress E quando se trata de criar formulários, formulador é meu plug-in de formulários favorito, sem dúvida ponto Na próxima lição, vamos começar a montar nossa loja WooCommers, porque agora o que temos é a página inicial e a página Agora queremos montar a loja. Como fazemos isso? Vamos ver como fazer isso na próxima lição. 34. Configure o WooCommerce: Então agora é hora de configurar o Woo Comers em nosso site. Então, vamos aos plug-ins, Adicionar novos WooComers do tipo Noll E aqui está com mais 8 milhões de instalações ativas, então vou instalar o NL. E vamos ativá-lo. Portanto, ele abrirá um assistente de configuração que examinaremos passo a passo. Então, aqui estamos. Se você quiser compartilhar dados anônimos, pode deixar isso ativado para ajudá-los a melhorar o plug-in. Você pode pular essa configuração guiada e fazer isso sozinho no painel ou continuar com esse assistente de configuração Agora, vamos pular essa configuração guiada. País para onde você está indo Onde está localizada sua empresa? Então, selecione seu país. Estou no Quênia, então vou digitar Quênia. Espere, posso voltar? Tudo bem, não precisamos dessa configuração guiada porque, então, estou no Quênia, vá até minha loja Agora, o motivo pelo qual pulei a configuração guiada é para ajudar você a entender como configurar o WooComas É aqui que você pode continuar a configuração. Teríamos seguido essas mesmas etapas. Então, a primeira opção aqui é personalizar nossa loja. Então, se eu clicar nisso, seremos direcionados para uma página. Você não precisa fazer isso porque eu só quero te mostrar uma coisa. Vamos usar esse personalizador um pouco mais tarde para criar nossas páginas de checkout, nossa página de carrinho e tudo Eu só queria te mostrar o que o primeiro passo envolve. E você tem a opção de escolher modelos pré-fabricados pela equipe da Wocomer ou criar seu próprio tema E é isso que vamos fazer mais tarde. Então, voltando, como você pode ver, a segunda etapa é criar um produto, e é isso que faremos na próxima lição. Te vejo em breve. 35. Crie um produto WooCommerce: Então, agora é hora de criar nosso primeiro produto Wocomers. Como você pode ver, esse é o segundo passo aqui. Agora, posso clicar aqui e ser levado ao local em que criaremos um novo produto, mas quero que façamos da mesma forma que você criará o resto dos produtos, porque isso faz parte do assistente e não queremos seguir o assistente. Quero mostrar a você como criar um produto quando esse assistente acabar. Então, produtos, vamos para todos os produtos. Primeiro de tudo, para ver o que temos aqui. E agora não temos um produto. Então, digamos que crie um produto. Vamos dar um nome a ele. Você pode fazer esse passeio se quiser, mas, é claro, praticamente vou te levar em um passeio, então você não precisa fazer isso. Agora eu quero mudar para o nosso site de referência aqui e ir até a loja e abrir um dos produtos aqui. Digamos que essa furadeira de impacto. E eu quero que criemos algo assim. Então, como você pode ver, a primeira coisa que precisamos é de um nome. Então, vamos dar a ela o nome dessa furadeira de impacto. Então, vou copiar isso. É claro que, para você, você digitará o nome, o produto real que deseja vender. E agora, nesta breve descrição aqui, eu gosto de fazer disso um das principais características deste produto, pontos principais e nada mais Isso é o que chamamos de breve descrição. E então esta é a descrição longa. Então, agora eu quero copiar a descrição longa, que para você é algo que você vai digitar, mas estou apenas copiando isso para economizar tempo. Então, copie corretamente. Voltando aqui, descrição do produto, é aí que você coloca essa descrição longa. E agora, se descermos até aqui, temos a breve descrição do produto. É aí que colocamos essa breve descrição. Vou copiar isso e colar aqui. Agora, temos todas as ferramentas comuns de edição de texto que você pode precisar. Portanto, se você estiver digitando isso sozinho, convém usar esse elemento de lista com marcadores Então, tudo o que você precisa fazer é inserir o tipo novo recurso, Enter e tudo mais. Apenas certifique-se de ativar isso. Tudo bem, então faça isso. Agora também podemos fornecer os dados do produto. Este é um produto simples. Também pode ser um produto agrupado. Pode ser um produto afiliado e tudo mais. É um produto em nosso site que estamos vendendo. Não é um produto virtual. Não é um download digital. Se estivesse disponível para download, você selecionaria Virtual e disponível para download Virtual significa talvez um curso online. download, é claro, é um arquivo que as pessoas podem baixar depois de pagar Você também pode definir a moeda. Vamos ver como mudar a moeda. No momento, é definido como xelins do Quênia porque selecionei minha localização Mas você pode mudar isso para qualquer moeda. Eu vou colocar o que é isso? Uma broca. Sim, talvez 6.000 xelins Com desconto, 5.500 xelins. Deixe-me ver o que mais precisamos agora, porque há certas coisas que eu quero que abordemos em uma lição separada diferente. Também podemos definir o inventário, rastrear a quantidade de estoque deste produto. Então, toda vez que um cliente compra o produto e ele é um produto físico, você sabe que seu estoque agora é menor em um. Na sua loja. Portanto, o site acompanhará você. Você pode alterar o estoque inicial vendido individualmente. Algumas dessas coisas são coisas sobre as quais você pode descobrir mais ao aprender mais sobre os Wocomers O que nos interessa agora é criar o produto e entender o fluxo de trabalho sobre como criar produtos e vendê-los. Você pode aprender mais sobre os WooComers assistindo aos tutoriais. Então, agora vamos ao transporte marítimo. Vou pular o envio porque não vamos cobrir o frete no momento Vamos aos produtos vinculados. Vamos dar uma olhada nisso. Não se preocupe. Atributos avançados. Vamos pular tudo isso. A próxima coisa que queremos fazer é adicionar uma imagem do produto. Então, vou selecionar a imagem do produto aqui. E é a furadeira de impacto. Então, vamos para a pasta Assets. Este é o produto ideal, de conjunto aberto. E agora vamos publicá-lo por enquanto. Assim, podemos visualizar as mudanças. E agora parabéns. Você criou seu primeiro produto. Agora, se você olhar, não está categorizado. É uma furadeira de impacto. Aqui está uma migalha de pão. É apenas um caminho para mostrar onde exatamente isso está localizado em seu site. Então temos nossa breve descrição, depois a descrição longa. E se os clientes tiverem deixado avaliações, você poderá vê-las aqui. Os clientes poderão ver as avaliações aqui. Então, como você pode ver, esta é uma página de produto simples. Se eu mudar para isso, você notará que também temos ferramentas de categoria, tags, e a marca aqui é inko E temos isso que você também pode gostar, e esse é um exercício diferente. Mas se alguém estiver procurando por esse exercício , talvez esteja interessado nisso. E também temos um produto relacionado, que é um conjunto de chaves, porque todas se enquadram na mesma categoria de ferramentas Como fazemos isso? Vamos ver isso na próxima lição. Veja em breve. 36. Taxonomia de produtos: Então, agora é hora de aprender como adicionar essas categorias e tags e a marca. E essas são chamadas de taxonomias no mundo do Wordpress. taxonomias simplesmente ajudam você a organizar seu conteúdo porque seus produtos podem se enquadrar em categorias diferentes E dentro dessas categorias, pode haver subcategorias de produtos Dessa forma, os clientes podem encontrar o que estão procurando com muito mais rapidez. Então, como fazemos isso? Vamos mudar para o nosso site. E eu sei, é claro, que não temos o botão de papel em nossos produtos, e faremos isso na próxima lição, quando adicionarmos o sistema de pagamento. Então, voltando aqui para o editor, como você pode ver aqui embaixo, temos nosso produto agora na categoria chamada sem categoria Essa é a categoria padrão no WordPress, e você nunca pode excluir essa categoria porque quando você exclui outras categorias e os produtos foram atribuídos a essas categorias, mas você os excluiu por padrão, esses produtos agora serão colocados na categoria sem categoria Portanto, você não pode excluir a categoria não categorizada. Agora, ao criar um produto, você pode rapidamente colocá-lo em uma categoria diferente clicando em AdnW Portanto, isso se enquadra na categoria ferramentas. Então, digamos ferramentas e Enter. Então, agora vamos desmarcar a opção categorizado e atualizar isso. Vamos pré-visualizar as mudanças. E agora, como você pode ver, a categoria é ferramentas. Voltando aqui, também podemos dar uma etiqueta a ele. Agora, isso é um exercício. Então, em ferramentas, podemos ter uma subcategoria chamada exercícios. As tags são simplesmente rótulos para mostrar subcategorias dentro de uma categoria Então, digamos que sim, exercícios. E você pode adicionar várias etiquetas a um produto porque isso não é apenas uma furadeira, mas também uma furadeira de impacto. Há uma furadeira sem impacto e uma furadeira de impacto, mas todas são brocas Então você também pode dizer exercícios de impacto. Então, se eu for aqui para atualizar e visualizar as alterações. Agora, como você pode ver, nosso produto tem etiquetas chamadas brocas e furadeiras de impacto Se não for uma furadeira de impacto, não atribuímos a etiqueta ou a etiqueta da furadeira de impacto a ela. Espero que você esteja entendendo isso. Agora, não é apenas uma furadeira, mas é uma furadeira feita por uma marca específica. Talvez um cliente esteja procurando por uma marca específica. Também temos essa opção aqui. Woo Comer avançou e disse: Vamos fornecer às pessoas tudo o que elas precisam para tornar sua loja on-line robusta e poderosa Então, vamos adicionar uma nova marca. Digamos que Milwaukee e Enter. E agora vou atualizar isso e revisar as mudanças. Lá vamos nós. Então, a marca é meal work. Eu adoro isso. Agora, voltando aqui, se olharmos para o lado esquerdo do menu, como você pode ver, temos categorias, tags e marcas. Assim, você pode criar mais tags categorias e marcas com antecedência, mesmo antes de criar seus produtos Então, vamos ver como fazer isso porque isso é muito útil, a capacidade de criar suas marcas e todas essas outras taxonomias Então, vou criar, vou para as categorias porque atualizamos isso. Feche isso. Agora, como você pode ver, temos duas categorias porque temos a original e categorizada e a categoria de ferramentas que criamos Lembre-se de que eu disse que você não pode excluir isso. Como você pode ver, quando eu passo o mouse sobre isso, ele tem uma opção de exclusão, mas isso não tem essa opção Agora, vamos criar mais categorias. Digamos que motos. Digamos que computadores, tudo a ver com computadores, veículos. Eu acho que isso é o suficiente. Assim como fizemos aqui, também podemos acessar marcas e adicionar algumas marcas. Vamos vender, digamos, a ferramenta Milwaukee O que mais? Total. Essas são marcas e vídeos diferentes porque você também venderá GPUs Digamos que seja Intel. Não vendemos GPUs apenas da Intel, apenas do NVDA, da AMD. Ganhe dinheiro, também estamos vendendo roupas , roupas de grife. Então, temos todas essas marcas. Também podemos adicionar tags, mas eu gosto de adicionar tags quando, na verdade, estou editando ativamente um produto específico, porque é aí que consigo pensar em qual tag quero dar a ele. Mas é claro que você pode digitar qualquer tag que você possa imaginar aqui. Então, com isso, se eu for adicionar um novo produto, mais uma vez, posso simplesmente mudar para cá. E sim, vamos criar essa chave inglesa. E aqui vamos nós. Então, conjunto de chaves premium. Copie isso. Para você, você digitará o nome do seu produto. Acabei de usar o mesmo texto. Colei em todos os lugares porque é apenas um espaço reservado para você. Cole isso. Vamos também abordar os principais recursos. Cole-os aqui como resumo. Vamos dar um preço. Este é um conjunto de toques premium, então eu darei talvez 3.500 Está em oferta por 2.900 xelins. E agora, se olharmos nossas categorias aqui embaixo, você notará que todas as categorias que criamos estão disponíveis. Este é um conjunto de chaves. Podemos colocá-lo sob as ferramentas. Para as etiquetas do produto. Agora, isso é o que eu quis dizer quando disse que gosto colocar etiquetas quando estou editando um produto. Isso são chaves inglesas. Insira isso. Para a marca, digamos que seja feita por Milwaukee. Vamos definir uma imagem do produto. Vamos ao nosso sistema e obter a imagem do produto do conjunto de produtos premium. Lá vamos nós. Vamos publicá-lo. No momento em que você salvar isso, ele terá esse link permanente Falaremos sobre links primários mais tarde porque isso é muito importante para o SEO Mas esse será o URL que as pessoas verão aqui na barra de endereço de publicação. Vamos analisar as mudanças. E aqui estamos. E as pessoas podem clicar aqui para vê-lo em toda a sua glória. E, como você pode ver, categorias de ferramentas, chaves de etiquetas, marca Milwaukee E se formos até aqui, automaticamente, qualquer produto dessa categoria será listado aqui, mas teremos um limite de apenas quatro produtos relacionados. Se tivéssemos mais três produtos nas ferramentas, eles estariam aqui desse jeito. Deixe-me te mostrar aqui. Aqui temos dois produtos relacionados no site de referência. Então, como você pode ver, esse é um sistema muito robusto para vender seus produtos e permitir que as pessoas encontrem o que estão procurando muito rapidamente, uma linda loja online. Agora, acho que é aí que vamos chegar por enquanto, porque a próxima coisa que quero que vejamos é como conectar sua loja WooCommerce ao papel para que você possa aceitar pagamentos Dissemos que, quando terminarmos esta aula, você deverá ser capaz de vender seus produtos na vida real. Este não é um site de demonstração. Esta é uma verdadeira loja de comércio eletrônico. Te vejo em breve. 37. Integração com PayPal no WooCommerce: Eu sou muito bem-vindo de volta. Agora é hora de adicionar um sistema de pagamento ao nosso site WordPress. Em outras palavras, é hora de integrar o papel com os Woo Comers Mas antes de irmos lá, você notará aqui no meu site de referência, deixe-me mudar aqui. Se eu for me deixar ir até a loja e abrir esse trator de brinquedo aqui Tudo bem, eu pensei que isso tinha me deixado voltar aqui. Não é isso. Vamos ver esse original. Tudo bem, eu queria te mostrar como se livrar disso caso você esteja vendendo um produto digital Você pode se livrar disso porque não pode vender duas cópias de um produto digital. Então, isso não faz sentido. Então, deixe-me voltar aqui. Temos a mesma coisa aqui. Assim, podemos voltar ao produto em si. Foi aqui que editamos o conjunto de aluguel premium, e podemos dizer que foi vendido individualmente. Em outras palavras, limite as compras a um item por pedido. Atualize isso, visualize as alterações. E agora você só tem um anúncio no cartão, nada mais. Porque se for um produto digital, talvez seja um produto para download, você pode removê-lo Mas não se trata de vender produtos digitais. Geralmente, é assim que se abre uma loja Wocomers. Então, mais uma coisa, é claro, meu site de referência tem esses cantos arredondados que fazem a imagem parecer incrível, os produtos aqui e até mesmo na loja, os produtos têm esses cantos arredondados que fazem com que pareça incrível. Mas no site que temos agora, eles são muito nítidos. Eu vou te mostrar como mudar isso. Agora, voltando aqui, para integrar o Woo commers com o paper, precisamos adicionar um plugin criado pelo WooCommers para Adicionar novo. Os plug-ins adicionam novos. Vou digitar WooCommers mais uma vez, Enter. E aqui está o plug-in dos pagamentos do WokersPapal. Instale isso agora. E vamos ativá-lo. Então aqui está, as configurações do WokmersPapal. Vamos para as configurações. E agora aqui temos essa opção de ativar o pagamento via paypal. Então clique nisso. Estamos vendendo produtos físicos. Se você está vendendo produtos virtuais, é isso que você verifica. Bens físicos, continue. Disponível com aplicativo adicional. Sim, vamos aqui. Selecione isso porque isso nos permitirá aceitar cartões de débito e crédito em nosso site Em seguida, conecte-se ao papal. Isso abrirá uma janela para permitir que você faça login na sua conta do PayPal. Como você pode ver, eu tenho uma aba de pagamento aqui que já estava aberta, mas deixe-me fazer o login Forneça seu e-mail e diga a seguir. Em seguida, faça o login. inserir meu código de segurança para fins de segurança. Estou usando um aplicativo autenticador. Fique seguro. Vamos ver se ele vai se conectar. Se o seu PayPal estiver bem, está tudo pronto. Você está vinculado ao Woocmers e pronto para receber pagamentos em seu site Retorne ao WooCommers. Então, agora, parabéns. Agora seu WooComers está conectado à sua conta paypal e, sempre que alguém comprar algo em sua loja, o dinheiro será enviado diretamente para Então, vamos aos métodos de pagamento. E dê uma olhada nisso. Portanto, você também pode ativar isso se quiser aceitar cartões de crédito e débito Mas antes de fazermos isso, vamos voltar aqui e recarregar esta página e ver se vamos chegar aqui agora, pagar com PayPal E se alguém clicar, isso abrirá Tudo bem, algo deu errado. Acho que é porque ele está tentando entrar na minha própria conta Payal, o que não é possível Mas, novamente, voltando aqui, podemos ativar pagamentos com cartão de crédito e débito e salvá-los. Voltando aqui, se eu atualizar a página, se dissermos adicionar ao cartão, OK, ele já havia sido adicionado ao cartão quando clicamos em Pagar Portanto, não há problema , pois ele não pode concluir pagamento sem primeiro adicionar o produto ao cartão. Mas agora, se formos ver o cartão, como você pode ver, nosso produto está listado aqui e temos a opção de finalizar a compra. Se alguém quiser comprar mais desse produto, limitamos quantas dessas pessoas podem comprar. Vamos voltar para, vamos voltar. Como ainda não definimos uma página de loja, precisamos procurar manualmente produtos diferentes. Eu quero adicionar isso ao cartão. E é isso que deve acontecer quando você ainda não adicionou um produto ao seu cartão. Ele foi adicionado ao seu cartão. Agora, se formos para Exibir cartão, como você pode ver, porque isso não tem limite para quantos você pode comprar, você pode adicionar dois, e isso será multiplicado por dois se atualizarmos o cartão para 11.000 Lá vamos nós. E agora, se prosseguirmos com a finalização da compra, o cliente deve preencher esses detalhes Os que estão em vermelho são obrigatórios, incluindo o local de envio. E também fornecemos essas opções a eles. Eles podem usar cartões de débito ou crédito. Se eles selecionarem isso, o botão mudará para aquele. E se tentarem pagar, primeiro receberão essa notificação para preencher esses detalhes. Então, acho que cobrimos quase tudo o que eu queria que cobrissemos. Agora, se formos aqui, quando selecionamos isso, esse botão apareceu. Mas se chegarmos aqui, podemos adicionar uma descrição do que queremos quando as pessoas selecionam essa caixa. Então, vamos ver. Também pode usar seus cartões de débito ou crédito. Clique no botão abaixo. Salve as alterações. Guarde isso. E agora, se formos aqui e atualizarmos a página, vamos ver o que obtemos Aqui estamos. Você também pode usar seu cartão de débito ou crédito Clique no botão abaixo. Exatamente. Acho que basicamente é assim que você configura seus pagamentos. Obviamente, há muitas outras opções aqui sobre o que você precisa fazer. Vamos ver. Configurações do WooComers. Vamos para as configurações. Tudo bem, se formos para o cargo de General, eu realmente não quero que nos debrucemos muito sobre essa parte porque há tantos cenários aqui que tornariam esta aula muito longa. Mas desde que você conecte seus wcmers ao papel, exiba seus produtos e possa adicionar produtos ao carrinho, e as pessoas possam ir até o carrinho e pagar, é tudo o que você precisa para começar Depois, você pode assistir mais tutoriais para entender o que todas essas configurações fazem Mas vamos ver se podemos encontrar algo extra para mudar, como a moeda. Lembre-se de que deveríamos trocar de moeda, vou dizer USD. 38. Configurações do WooCommerce: Tudo bem, você pode definir onde as vírgulas e os pontos estão definidos Você pode definir seus descontos em cupons. Você pode ativar as alíquotas e os cálculos de impostos. Você pode habilitar locais onde você vende ou para onde não vai enviar. Você pode definir todas essas coisas que eu acho bastante óbvias. Deixe-me salvar as alterações. Estamos apenas correndo. Estamos apenas brincando. Vamos aos produtos. Acho que aqui temos mais algumas coisas importantes para conversar. Temos algumas coisas que podemos ver aqui. Redirecione para a página do cartão após a adição bem-sucedida. Isso significa que sempre que alguém clicar, vamos voltar para Eu sei que a página da loja deve ser cortada Se eu inserir isso. Sim, vamos ver como adicionar essa loja ao menu. Mas se eu adicionar um produto ao cartão, lembre-se eles já foram adicionados ao cartão, então não posso adicioná-lo. Vou receber uma mensagem de erro. Assim. Mas quando você adiciona um produto ao cartão, talvez queira adicionar mais produtos ao cartão. Você não quer ser redirecionado para a página do carrinho assim que adicionar apenas um produto à página do cartão Portanto, não habilite isso. Uh, vamos ver. O que mais? Você pode definir suas unidades de peso e ativar avaliações de produtos? Sim. As avaliações só podem ser deixadas por proprietários verificados. Quero que apenas as pessoas que compraram e usaram meu produto deixem avaliações. E mostre a etiqueta de proprietário verificado em qualquer avaliação que um cliente deixar, mostre que esse é um proprietário verificado, alguém que comprou o produto. Ative a classificação por estrelas. A classificação por estrelas deve ser obrigatória, não opcional. Antes que alguém possa deixar um comentário, ele precisa dar uma classificação por estrelas. Acho que essas são configurações importantes muito boas. Aqui, quando instalamos o WooComers, ele criou automaticamente uma página chamada Shop Shop E foi assim que eu soube que estava indo, a página da loja é Shop. Portanto, certifique-se de que é isso que está selecionado aqui. Vamos para Se você está vendendo produtos para download, é aqui que você deve ir Inventário. Vamos ver isso. Outra coisa que quero que tenhamos em mente aqui é vamos voltar ao geral Ativar botões de adição ao cartão do Ajax nos arquivos Quando dizemos que o Ajax habilita o Ajax para adicionar ao cartão, queremos dizer que quando adicionamos ao cartão, não atualize Basta adicionar ao cartão e deixar a pessoa continuar comprando. Então, se eu clicar em Adicionar ao carrinho, receberemos um pequeno mensageiro, marque a opção Adicionar ao carrinho. Foi adicionado. É isso que queremos dizer com ativar os botões Adicionar ao carrinho do Ajax. Se eu desativar isso, salve as alterações e volte para a loja. Vamos para a página do carrinho, qual eu não adicionei o link aqui. Vamos até o carrinho. Agora, deixe-me remover isso do carrinho. E agora vamos voltar para a página da loja. Acho que foi a chave inglesa. Se adicionarmos ao carrinho, toda a página da loja será recarregada Então era isso que estávamos evitando. Então, vamos lá. Guarde isso. Pagamentos de envio, éramos pagamentos internos. O que há dentro do Advanced? Você pode definir todos os e-mails que os clientes receberão automaticamente quando comprarem um produto, você pode editá-los. Mas, como mencionei, não queremos que essa lição seja muito longa. Agora você tem uma base sólida na criação de um produto WooComers e na adição de todas as taxonomias e descrições produtos relacionados, além integrar Agora, uma última coisa que eu quero que vejamos é que aqui dentro, você também pode, como mencionei, quando você está vendo um produto, por exemplo, essa linha, tem produtos relacionados. Esses são produtos que compartilham a mesma taxonomia. Mas você mesmo também pode recomendar determinados produtos. Você faz isso manualmente ao editar um produto, para poder vir aqui e dizer produtos vinculados e pesquisar um produto. Digamos que produtos temos aqui? Agora vou usar os produtos que criamos porque é um exemplo, Impact, comece a digitar Impact drill Então, talvez você queira vender mais. Então, talvez esse seja um tipo de GPU mais caro, então você pode vendê-lo quando alguém estiver visualizando a página do produto dessa GPU mais barata Então, atualize isso. E agora, se visualizarmos as alterações e rolarmos para baixo, a suposição aqui é que esse é um tipo mais caro do mesmo produto aqui, porque você está vendendo mais, porque você está vendendo mais, espero que entenda Agora, com isso, quero dizer parabéns. Agora você tem uma loja que pode aceitar pagamentos. Agora você pode começar a vender seus produtos. Na próxima lição, vamos ver como trabalhar na página da loja. Sim, vamos falar sobre a página da loja. Te vejo em breve. 39. Página de lojas: Quero que falemos sobre a página da loja. Então, se eu puder mudar para fazer compras, aqui estamos. Agora, uma coisa que você notará é que se eu rolar para baixo, temos esse pé aqui. Então, podemos começar removendo isso. Mas antes de fazermos isso, vamos encerrar todas essas outras coisas. Também quero fechar o PayPal. Então, vamos voltar ao painel. Deixe-me fechar isso também. Voltando ao painel, vamos às páginas. E, como mencionei, quando instalamos o Woo Comers, ele gerou automaticamente algumas páginas relevantes para nós, como a página do cartão, a página de checkout, a página da minha conta, a página da loja Então, vamos até a página da loja e editamos. Agora, se formos aqui para as configurações do Astro, desabilite os elementos, vamos desativá-los e dizer salvar. Agora, se visualizarmos a página, deveríamos tê-la visto. Lá vamos nós. O rodapé do Astra sumiu porque temos nosso próprio rodapé. Agora, acho que devo adicionar mais alguns produtos aqui porque quero que esta página seja um pouco mais longa. Portanto, posso acelerar esta parte à medida que crio mais alguns produtos Sugiro que você faça o mesmo voltarei em breve. Então, estou adiantando essa parte rapidamente. Acabei de criar esses produtos extras, então deixe-me encerrá-los agora. E agora, se eu atualizar a página da loja, agora temos vários produtos Agora podemos personalizar. E agora isso nos levará às configurações do front-end do Astra Como mencionei, quando você clica em Personalizar, você é direcionado para as configurações do Astro. E o Astro será inteligente o suficiente para acessar automaticamente as configurações da página específica que você está visualizando. Então, agora, como você está na página da loja, isso nos levou ao local onde podemos editar o layout da loja. Então, podemos mudar para este design. E agora parece um pouco diferente. Não é uma diferença tão grande. Tudo bem Você também pode limitar quantos produtos você quer por página. Então, agora temos oito. Se tivéssemos 13 produtos, obteríamos automaticamente o que chamamos de paginação Então, deixe-me mostrar a você neste site original aqui. Se mudarmos para a página da loja, porque tenho mais de 12 produtos na minha página, podemos passar para a página dois. E veja mais produtos lá. Quantas páginas a Wo Camers precisa para mostrar seus produtos. Assim, você pode limitar quantos produtos você mostra por página. O que mais precisamos examinar? Mostre produtos, mostre categorias, mostre essas são configurações com as quais você pode brincar mais tarde. Contanto que você tenha uma loja que exiba seus produtos, isso é tudo que você precisa por enquanto. O que mais é o layout da barra lateral? Não, nossa página não tem uma barra lateral, então isso não é relevante para nós Área de título dos produtos. Não sei o que é isso, e acho que é uma tarefa em que você pode trabalhar sozinho Vamos ligá-lo para ver o que ele traz à tona. Acho que acrescenta isso. Não vejo quais outras mudanças isso adiciona. Eu gosto desse jeito. Então, agora, você notará que também podemos mudar as cores aqui. Então, primeiro de tudo, deixe-me clicar em Publicar para salvar as alterações que fizemos e depois voltar. Também podemos acessar a página única do produto para editá-la se mudarmos para lá e talvez abrirmos esse produto. E você notará algumas dessas configurações aqui. layout do contêiner e o layout da barra lateral do estilo são as mesmas configurações que definimos aqui Então, se formos aos produtos, vamos abrir esse táxi de brinquedo Essas mesmas configurações estão aqui embaixo, layout de contêiner, mas eu não toco nisso porque adoro a aparência da página sem tocá-la Então, vamos ver o que eu tenho em meus produtos aqui. Levei algum tempo para realmente descobrir como eu queria que fosse Então é isso que temos. Isso é CSS personalizado. Eu vou te mostrar como fazer isso, mas em uma lição posterior. Então, voltando à nossa página da loja, podemos voltar lá sem sair do editor? Não, então personalize. Acho que cobrimos tudo o que eu queria que abordássemos na página da loja. Exceto uma coisa. Eu me lembro das cores. Então, voltando ao global, vamos às cores globais. É aqui que você pode alterar as cores gerais de suas páginas, as páginas que você não editou com o elemento. Esta não é uma página elementar. Então, por exemplo, vamos ver quais mudanças de sotaque, links. Isso não muda. E o sotaque? Tudo bem, então vamos lá. Agora, queremos usar essa cor. Então eu vou escolher o seletor de cores, escolher a cor e pegar um pixel lá, copiar Vamos colar aí. Agora, isso terá a cor do nosso site. Vamos mudar os links. Vamos dar isso de branco. Tudo bem, isso é tão limitante. É por isso que precisamos de CSS personalizado, porque agora, como você pode ver, esses botões, não consigo ver nenhum lugar para alterar a cor do texto desse botão. Espere. Você está me dizendo que eu não posso mudar as cores dos botões? Vamos voltar. Tudo bem, então aqui estão os botões Podemos mudar a cor do texto? Sim. Queremos que seja branco assim. Tudo bem, podemos definir a cor de fundo. Podemos mudar a cor do fundo a partir daqui? Ah, certo. Então, essas outras eram as cores gerais, mas agora somos muito específicos sobre qual elemento vamos definir. Em outro lugar, estávamos definindo a cor geral do tema. Mas aqui, somos muito específicos sobre o elemento, o botão. Cor da borda, não precisamos mexer com a cor da borda Mas agora eu quero que usemos a mesma cor que eu selecionei aqui apenas para manter a consistência da marca. Cor do plano de fundo. Cole aí. No Hova, você pode dar essa cor azul. Então escolha a cor. Pixel azul. Portanto, a cor de fundo no Hover deve ser azul, assim. Consistência da marca. Tudo bem, então deixe-me fechar isso. E agora acho que terminamos com a página da loja. Mais uma coisa antes de irmos. Vamos também adicioná-lo ao cabeçalho. Nós continuamos esquecendo isso Então, se eu for a este lugar, mouse sobre ele e o cabeçalho Na verdade, nem precisamos ir lá. Então, deixe-me parar com isso e voltar. Mas aqui, vamos aos menus de aparência porque precisamos adicioná-los como um item de menu. Compre, adicione ao menu. E agora vamos arrastá-lo logo após cerca ou eu geralmente mantenho minhas páginas sobre no pé, não nos cabeçalhos Mas de qualquer forma, vamos deixar isso aí. Algumas pessoas preferem ficar no topo. Então, se voltarmos aqui e o link direito for recarregado, agora temos a página da loja e, como é a página ativa, é dessa cor E, de fato, acho que essas cores devem ser consistentes com a cor da marca. Agora, este é um site muito básico. Você tem todo o tempo do mundo para fazer com que pareça exatamente do jeito que você deseja. Item do menu. Vamos para a cor do texto do item. Escolha a cor. Eu quero esse azul. Copie isso, cole aí, publique. Visualize as alterações. Agora está com essa aparência. Vamos até a página da loja. E algo que eu esqueci foi remover a página inicial. Remova e salve. Venha aqui, recarregue a página E agora, é bastante óbvio que , quando você quer acessar a página inicial, basta clicar no logotipo Então, se clicarmos no logotipo, seremos direcionados para a página inicial Agora, já que criamos nossos produtos, lembre-se de que mencionei em uma aula anterior que adicionaríamos produtos em destaque à nossa página inicial para permitir que as pessoas vissem rapidamente o produto em destaque Então, como fazemos isso? Vamos ver isso na próxima lição. Veja o resumo. 40. Produtos em destaque na página inicial: Como mencionamos na lição anterior, queremos ver como adicionar essa seção de produtos em destaque à nossa página de destino. Então, mudando para o nosso editor aqui, devemos adicioná-lo logo abaixo desta seta. Então, vou editar com o Elementor para que possamos editar a página. E aqui vamos nós. Então, eu só quero duplicar isso para que agora tenhamos um contêiner extra logo abaixo. Exclua isso. E vamos adicionar um contêiner para armazenar os produtos em destaque. Como de costume, vamos fazer isso 100% com e vamos fazer o recipiente interno, 80% do espaço. Então vamos voltar para o externo e colocá-lo no meio. Agora, se você quiser exibir uma grade de produtos da Wu Comers, se clicarmos aqui para mais e dissermos, Wu, você notará que esses não são elementos livres Não podemos arrastá-los e colocá-los aqui. Mas isso não é um problema. Se mudarmos para uma página que eu abri com antecedência, Woo Camers nos fornece códigos curtos para exibir nossos produtos de maneiras diferentes e exibir o carrinho, a página de checkout, a página de checkout Lembre-se de quando queríamos exibir a página de contato Se eu mudar para a página de contato aqui, usamos o código curto que o forminator nos forneceu para exibir o formulário que criamos no back-end Pode fazer o mesmo aqui com os produtos Woo Comers. Então, aqui, digamos, categoria de produto. Estou procurando produtos em destaque. Não consigo ver os produtos em destaque. Digamos apenas produtos. Voltando aqui, vou selecionar isso e dizer código curto, para que possamos adicionar um elemento de código curto e soltá-lo lá. Então eu vou colar isso lá. E aqui estamos. Agora, temos muitos produtos exibidos. Então, aqui, eu posso criar um espaço e dizer, limite é igual a, digamos, quatro E agora ele mostrará apenas um limite de quatro produtos. Publique isso. Agora, o problema com esse elemento é que ele não nos fornece uma maneira de editar esses elementos, a menos que eu tenha perdido alguma coisa aqui. Ele não fornece uma maneira de editar esses produtos. Vamos ver o que eu tenho no meu site de referência. Isso é o que parece no meu site de referência, mas é assim que parece no nosso site. Em primeiro lugar, deixe-me selecionar o contêiner aqui e criar algum espaço, margem inferior de 100 publicações Agora, se visualizarmos as alterações, rolando para baixo, pronto Tudo bem. Então, agora eu não queria que os botões parecessem tão largos. E sim, então isso é o que eu queria. Mas acho que podemos fazer isso. Acho que usei 60% no outro site. Para garantir que não ocupe muito espaço aqui. Sim, algo assim, algo mais compacto. E eu não estou gostando desse efeito de foco aqui, então teremos que mudar isso Vamos aos botões globais. A cor do texto ao passar o mouse também deve ser branca. Isso significa que se eu passar o mouse, ele permanece branco. Publique essas alterações. E vamos deixar esse lugar. E agora, lá vamos nós. Vamos criar algum espaço aqui. Não estou gostando dessa margem superior. Então, margem superior de, digamos, 100 publicações. E agora vamos pré-visualizar as mudanças. Lá vamos nós. Oh, precisamos adicionar algum título lá. Então, se eu duplicar isso, arraste-o até lá. Venha aqui e duplique isso, arraste-o para lá. E sim, vamos deletar isso. E eu quero estilizá-lo e colocá-lo no centro. Pegue este centro, selecione seu conteúdo. Deixe-me dizer produtos em destaque. Acho que há um código curto para os produtos em destaque. Não sei por que códigos curtos de categorias de produtos. Não sei por que não consigo encontrar um código curto para isso. Vamos ver se ele realmente existe. Deixe-me apenas dizer sublinhado em destaque. Produtos de sublinhado em destaque. Não, o WooComers não fornece isso, mas você pode criar uma categoria chamada produtos em destaque E mostre essa categoria. Então, categoria de produto. Tudo bem. Eu finalmente decifrei. Finalmente conseguirei construir a categoria de produto que eu quero. Então, você usará a categoria de sublinhado do produto, especificará o número da categoria e, em seguida, quantos produtos deseja mostrar Então, voltando aqui, tudo que você precisa fazer é ir às categorias e abrir uma categoria específica. Por exemplo, agora eu abri ferramentas, então ferramentas, digamos, editam, e uma vez que você diz isso, olhe sua barra de endereço e veja a categoria e o ID da tag, que é 18 para mim somente para a categoria de ferramentas. Então, voltando aqui, então a categoria 18 e depois limite-os a quatro. Mas lembre-se de que só temos duas ferramentas que criamos. Acho que não coloquei os outros produtos na outra furadeira na categoria de ferramentas. Eu nem tenho outra furadeira. Portanto, temos apenas dois exercícios. Mas se, por exemplo, eu editar isso rapidamente e mudar a categoria para ferramentas. Ferramentas também e atualize isso. Em seguida, altere também essa categoria futurista de bicicletas elétricas para ferramentas, atualize-a Agora temos quatro produtos na categoria de ferramentas. Se eu voltar aqui e aplicar isso para aplicar as alterações que fizemos no back-end, agora devemos ter quatro produtos nessa categoria. Mesmo se tivéssemos dez porque já especificamos que queremos um limite de quatro, veremos apenas quatro aqui. Publique. Houve uma intensa solução de problemas agora , pelo menos eu aprendi a criar meus próprios códigos curtos de categorias de produtos. Estou muito feliz por ter enfrentado esse desafio, e você também me viu solucionando isso em tempo real Então, agora, vamos lá. Eu amo isso, cara. Estou sentindo isso. Esses produtos são muito caros, mas não há problema. Defina o preço certo. Em seguida, a última dica rápida que quero mostrar é se você for à loja e abrir Não, não vamos abrir um produto. Ok, vamos abri-lo e adicioná-lo ao cartão. Acho que já o adicionamos. Lá vamos nós. Então, vamos ao cartão. Então, obviamente, eu queria mostrar que você obviamente também pode editar esta página acessando o personalizador, você será automaticamente redirecionado para o Tudo bem, então você pode alterar o texto do botão do cartão, dizer, adicionar à cesta ou algo assim ativar as vendas cruzadas. Eu não concordei com isso. Você também pode prosseguir com a finalização da compra. Agora, você também pode remover alguns dos campos de que não precisa aqui, então vá para a finalização da compra O nome da empresa é opcional. A linha de endereço dois pode estar oculta. Não é necessário mostrar a linha de endereço dois. Você também pode ocultar o nome da empresa. Se você não quiser ver se não quer que o cliente mostre o nome da empresa, talvez o campo Telefone seja obrigatório. Pode ser opcional ou oculto. Destaque os campos obrigatórios com um asterisco. Aí está. Você pode criar um link para sua página de política de privacidade. Vou selecionar isso. Você pode criar um link para seus termos de uso. E agora isso permitirá que os clientes leiam e aceitem seus termos e condições aqui antes de comprar de sua empresa. Tão perto disso. E lá vamos nós. Então eu acho que isso é o suficiente. Por enquanto, pelo menos atualizamos nossa página inicial com a categoria que quisermos Agora lembre-se, se você quiser uma categoria diferente chamada produtos em destaque, vá até as categorias e diga produtos em destaque, Enter. E agora aqui estamos, e você precisa atribuir essa categoria a vários produtos que deseja tornar os produtos em destaque. E então, é claro, agora, se editarmos esses produtos em destaque, como você pode ver, seu ID é o número 45. Então, se você for até o front-end, a categoria aqui será a categoria 45. Então, espero que você entenda como brincar com os códigos curtos agora. Então, por enquanto, vejo você na próxima lição, quando falaremos sobre adicionar essa barra de pesquisa na parte superior, porque queremos que as pessoas possam pesquisar GPUs ou algo assim Como você pode ver, temos essa pesquisa automática Ajax E se eu pressionar Enter, poderemos ver os resultados da pesquisa que só têm GPU Então, como fazemos isso? Vamos ver como adicionar isso na próxima lição. 41. Pesquisa de produtos no WooCommerce: Agora queremos trabalhar nessa barra de pesquisa. Deixe-me voltar ao nosso editor ou ao nosso site, e deixe-me apenas visualizar e ir para o front-end. Para adicionar uma barra de pesquisa, precisamos usar um plugin muito bom chamado Ivory search Então, vamos aos plug-ins, Adicionar novo. E aqui, eu vou procurar por marfim. E aqui estamos Vinod Dalvivory search. Então instale isso e vamos ativá-lo. Vamos pular isso. E aqui estamos, Ivor Research Vamos para as configurações. E, por padrão, recebemos vários formulários de pesquisa. E o que queremos é o formulário de pesquisa Ajax para Wocmers. Então, como você já pode adivinhar, já temos esse código curto que podemos usar para exibi-lo no front-end. Então, vou copiar esse Controle C. Deixe-me encerrar. Espere, estamos exatamente onde queremos estar. Então, abra o editor de cabeçalhos. Então, deixe-me fechar isso. Obviamente, basta ir aqui, ler isso e depois o cabeçalho. Então, deixe-me fechar isso de qualquer maneira. O que é isso? Feche isso. E agora aqui estamos. Lembre-se, originalmente tínhamos três colunas. Quer dizer, tínhamos três contêineres, mas eu excluí um e mencionei que mais tarde voltaríamos e o adicionaríamos. Então, vou duplicar isso. Então, agora temos três, e eu vou deletar tudo de dentro daqui. Em seguida, adicionarei um código curto. E então solte esse código curto ali mesmo, como você pode ver o código curto que acabamos de pegar emprestado aqui Então, enquanto isso ainda estiver selecionado, vou entrar em Largura avançada. Vamos atribuir uma largura personalizada de talvez 80%, publicá-la e visualizar as alterações. Então é isso que parece no momento. E eu gosto, aliás, mas não dissemos explicitamente qual largura eles deveriam ocupar Então, vamos fazer com que seja talvez 40%. Isso é 20, se eu não estiver errado, 40 mais 20, 60, então isso deve ser 40%. Vamos publicar e ver o que temos trocando aqui. Tudo bem, sem diferença. Veja se podemos fazer com que esses 30% sejam publicados e veja o que temos. Tudo bem. Olho de controle para selecionar o recipiente que contém esse contêiner, e queremos ter certeza de que eles estejam uniformemente espaçados entre eles, desse jeito Publique esse espaço entre cada contêiner. E agora eu acho que está posicionado corretamente. Adoro onde está. Então, indo para a página inicial, lá vamos nós. Então, agora podemos pesquisar um produto. Digamos que temos uma chave premium. Então, vamos procurar uma chave inglesa. Ele fará uma pesquisa automaticamente e nos mostrará. Isso é o que queremos dizer com Ajax. Lembre-se, eu disse que você está fazendo o que você espera que ele faça sem recarregar a página Então, ele está fazendo a pesquisa sem recarregar esta página para nos permitir ver se é isso que estamos procurando Tudo bem, deixe-me pesquisar por GPU, GPU. Sim, se houver vários produtos o nome ou com o nome que você está procurando, ele mostrará a página de resultados da pesquisa. Mas se existir apenas um produto com o nome que você está procurando, ele mostrará esse produto apenas diretamente. Ele será direcionado para a página única do produto. Então, se eu pesquisar por trator, porque não temos nenhum outro trator no site, isso nos levará ao único produto com o nome Mas como temos mais de uma GPU, se eu pesquisar por GPU, ela nos mostrará a página de resultados da pesquisa para que possamos escolher a GPU específica que queremos Então, basicamente, é assim que você adiciona uma funcionalidade de pesquisa mais robusta e poderosa ao seu site WooComers para permitir que os clientes obtenham o que desejam encontrar Vamos ver. Estou gostando muito dessa pesquisa O que mais adicionamos? Uma bicicleta. Eu gosto desse Ajax Veja que fornece todas as descrições e você pode decidir se é isso que deseja com antecedência. Então isso é uma coisa muito boa. Como temos apenas uma bicicleta, será direcionado para a única página que tem a bicicleta nela. E lembre-se de que mudamos as categorias. Então, sim, acho que é um ótimo lugar para terminar esta lição. Na próxima lição, vamos ver agora como usar CSS personalizado para adicionar alguns cantos arredondados em todas as imagens do produto. E lembre-se, se voltarmos ao nosso site de referência, essa barra de pesquisa tem alguns cantos arredondados e o ícone aqui parece muito melhor. Acho que podemos melhorar isso. Algumas pessoas gostam com cantos afiados como esse, você pode deixar assim. Mas vamos ver como fazer isso na próxima lição. 42. Cantos arredondados para miniaturas de produtos únicos: Agora vamos ver como usar CSS personalizado para alterar o estilo dos diferentes elementos que não podemos editar com os plug-ins que usamos para criá-los. O Woo Commerce não nos fornece uma maneira de editar suas próprias imagens de produtos e fornecer cantos arredondados A busca por marfim não nos dá a capacidade de fazer isso. Oh, espere. A propósito, se eu for ao Design, isso nos dá essa opção? Desenho. Se eu disser personalizador de formulário de pesquisa, ele abrirá o personalizador, como você pode ver, essas são as três opções que temos Esse é o carregador, como você viu aqui quando ele está procurando automaticamente por algo Então, como você pode ver, não há um lugar para definir o quão arredondados são os cantos. Você pode mudar o que isso diz, pesquisar produtos. Sim, pesquise produtos. E vamos adicionar um ponto extra aqui para torná-lo uma elipse. E você também pode decidir remover esse ícone se quiser, o que eu acho muito legal. Mas antes de fazermos isso, eu só queria mostrar como eu alcancei esse objetivo usando CSS personalizado. Então, agora vamos publicar isso. E agora, indo para o front-end, eu sei que já estamos aqui, e se eu voltar até este ponto, já estamos aqui. Mas lembre-se, para chegar lá, basta personalizar. E abrirá no mesmo lugar porque o que queremos é esse CSS adicional. É aqui que podemos adicionar CSS adicional. Volte e volte, CSS adicional. Podemos adicionar CSS aqui da mesma forma que adicionamos o formulário de contato. Se eu for editar, quando entramos na aparência, usamos CSS personalizado e adicionamos CSS personalizado para afetar a aparência do formulário no front-end. Portanto, podemos fazer o mesmo com qualquer outra coisa aqui. Então, agora, para selecionar essa imagem, precisaremos usar o Control Shift I para abrir o console, e eu quero sair do design responsivo E quando seleciono esse inspetor, posso passar o mouse sobre diferentes elementos HTML, incluindo a imagem E se eu selecioná-lo, ele nos fornecerá o seletor de imagens Esse é o seletor de imagens, e podemos testar o efeito que nosso código CSS terá sobre ele adicionando-o aqui ao CSS Então, se eu disser raio de borda de cinco pixels. Agora ele tem cinco pixels. Que tal 20? Porque é isso que eu quero. É assim que vai ficar. Então, tudo que eu tenho que fazer é copiar esse seletor. Cópia do link certo. Isso não tem efeito no seu site. Isso é só para testar enquanto você está trabalhando. Mas quando você recarregar esta página sem o console, as alterações feitas aqui não entrarão em vigor Então, agora entrando aqui e colando esse seletor e adicionando nossos colchetes, posso dizer Agora, deixe-me remover esse raio de borda que usamos para testar para que você possa ver o código real que entrará em vigor, 20 pixels. Agora, vamos lá. Termine com um semiclon e publique isso. Agora, se eu fechar o console, direito clique com o botão direito do mouse e abra este link em uma nova guia e abra isso. Agora fomos para a página da loja, mas se eu abrir algum produto aqui, terei esses cantos arredondados. Nós o definimos nesse produto específico para bicicletas, mas ele se aplica a todos os produtos. Tudo bem, a próxima coisa que quero que façamos é dar uma olhada na página da loja Isso é muito engraçado porque, nesta lição, eu queria que analisássemos como fazer a barra de pesquisa ter cantos arredondados, mas acabamos fazendo o que eu estava planejando para a próxima lição. Vamos fazer os dois agora. 43. Barra de pesquisa com cantos arredondados: Então, voltando aqui para o nosso editor, Control Shift I, para abrir o console. Podemos fazer o mesmo, selecionar esse inspetor e selecionar a barra de pesquisa Lá vamos nós. Aqui está seu seletor Se eu for lá e disser raio da borda, separe 20 pixels Como você pode ver, isso mudou em tempo real. Também posso fazer o mesmo com o ícone, selecionar a área verde. E agora esse é o ícone, como você pode ver, selecionarei o seletor inteiro dessa forma, copie corretamente, vamos colá-lo lá, e esqueci de fazer o mesmo Mas de qualquer forma, não há problema. Raio da borda. Deixe-me copiar isso e colar lá. Como você pode ver , está entrando em vigor, mas não fizemos o mesmo com isso aqui. Então, selecionando isso e voltando aqui. Aqui estamos. É isso mesmo. Copiar. Vamos remover isso porque não está nos ajudando. Então, agora está de volta ao normal. Mas agora, se eu for aqui e colar os colchetes, raio de borda de 20, lá vamos nós Então agora ele tem aquele canto arredondado. Mas agora podemos adicionar uma margem esquerda, aba, dois pontos, margem esquerda neste ícone Queremos adicionar uma margem para afastá-la um pouco. Então, digamos dez células por. Como você pode ver, nós o movemos em dez pixels. Semicólon Podemos mover essa margem para a direita em cinco px? Tudo bem, isso não está surtindo efeito, mas não tem problema. Vamos encerrar essa publicação. E agora, se eu fechar isso, não preciso fechá-lo, mas agora, se eu recarregar isso, agora é o que parece Finalmente, vamos fazer a página da loja. 44. Cantos arredondados para miniaturas de página de compras: Então, volte aqui e selecione a loja porque já publicamos as alterações. Agora, Control Shift I. Vamos agora também selecionar o inspetor e selecionar esta imagem Como você pode ver, esse é o seletor. Copie corretamente Vamos colar lá. Suportes, suportes encaracolados. Copie isso. Vamos colocar isso aí. Agora eles têm aquele belo canto arredondado. Então, publique essas mudanças. Vamos fechar esse inspetor. E agora, se eu for aqui e atualizar a página, tudo bem. Atualização forçada. Eu apenas Control RD, mas agora Control Shift R. Tudo bem, eu não sei o que está acontecendo Deixe-me ir para a página inicial. Rolando para baixo. Por que isso não entrou em vigor? Acho que precisamos de um plugin de cache, mas Control Shift R mais uma vez. Acesse a página da loja. Isso pode me fazer instalar um plug-in de cache, e eu estava planejando mostrar como usar um plug-in de cache na próxima lição Mas agora, e se eu for adicionar um novo plug-in? Tudo bem Vamos voltar aqui. Control Shift E. Faça uma atualização completa aqui nesta página para ver se as alterações entraram em vigor Se eles entrarem em vigor nesta página , isso significará que provavelmente temos um problema de cache Em outras palavras, o navegador já armazenou o navegador e salva uma cópia de cada página que, quando alguém navegue até essa página, ela possa ser atendida rapidamente sem precisar recarregá-la do servidor Então, estamos recebendo a página que tinha esses cantos afiados, embora tenhamos feito alterações nessa página. Então, essa é a página que está no servidor, mas essa é a página que é salva por cookies em nosso navegador. E é por isso que continuamos vendo isso mesmo quando atualizamos. Controle nosso Control Shift R para uma atualização completa. Agora, vamos experimentar um plug-in de cache. Então, aqui, vou até o cache de velocidade da luz e instalo isso. E vamos ativá-lo. Tudo bem, agora, passe o mouse sobre isso e limpe tudo. Tudo bem, então limpamos tudo. Então, se eu escrever o link e abrir o Link na nova guia e ir para a página inicial, vamos ver o que temos Exatamente. Agora, as alterações entraram em vigor porque eliminamos o cache local que estava armazenado no navegador. Então, se formos para a página da loja, agora tudo tem aquele belo canto arredondado. Adoro esse exercício de solução de problemas porque você enfrentará muitos problemas e problemas ao trabalhar em seus sites e precisará ser capaz de solucionar o problema e descobrir qual é o problema Então, estou feliz que você tenha conseguido me ver lutando com isso. E isso marca o fim da construção do seu site. Agora você tem um site WordPress totalmente funcional, loja de comércio eletrônico e pode vender seus produtos para qualquer pessoa ao redor do mundo Mas é claro que há muitas outras coisas que você continuará aprendendo ao criar seu site e torná-lo mais robusto. Agora, nas próximas lições, que são aulas bônus, você aprenderá algumas das coisas mais importantes para tornar seu site muito melhor, muito mais poderoso e muito mais confiável. Estamos falando sobre segurança. Estamos falando sobre link permanente. Então, estamos falando sobre uma das coisas que eu deveria abordar nas aulas extras é o armazenamento em cache Você acabou de aprender sobre o armazenamento em cache. Então, nas aulas extras, vamos equipá-lo com ainda mais dicas e truques para transformá-lo em um guru do WordPress Te vejo em breve. 45. Cache de sites: Então, agora vamos dar uma olhada em dicas e truques adicionais para fazer de você um guru do Wordpress Mas é claro que essas são apenas dicas e truques básicos. Você ainda precisará se aprofundar no Wordpress para entender como usar os diferentes plug-ins disponíveis. Lembre-se de que temos mais de 59.000 plug-ins gratuitos no diretório de plug-ins do Wordpress para WordPress Isso significa que, ainda hoje, estou aprendendo coisas novas sobre o Wordpress e você também deveria. Mas agora uma das dicas, como mencionei, é o armazenamento em cache E agora, se voltarmos ao painel, deixe-me fechar todas essas outras partes. Então, vamos para Adicionar novo. E eu vou digitar Cache, Enter. Então, como você pode ver, temos vários plug-ins de cache. Muitos deles são muito populares. E como você pode ver, a velocidade da luz é uma delas, e já a adicionamos. Portanto, você pode adicionar qualquer um desses outros, se quiser. O WP Optimize também é incrível, mas temos que escolher um Não precisamos ter dois deles. E sempre que você fizer alterações em seu site, basta vir e dizer limpar Isso é tudo que eu faço quando estou trabalhando no meu site Wbress. Eu não entro para alterar todas essas outras configurações, mas você pode acessar o YouTube e procurar um tutorial sobre como maximizar todas essas outras configurações para otimizar ainda mais seu site. Mas, como mencionei, quando você faz alterações, e no front-end, as coisas não estão se comportando da maneira que deveriam estar se comportando Você pode limpar tudo e, provavelmente, as alterações entrarão em vigor se tiverem sido causadas pela versão salva localmente da página que está se comportando mal Isso excluirá todo o cache armazenado em seu navegador, todas as páginas armazenadas em seu navegador e recarregará a página que tem as novas alterações do servidor Esse é o número um. Quero terminar esta lição aqui porque, na próxima lição, quero que falemos sobre links permanentes Te vejo em breve. 46. Permalinks: Vamos falar sobre links permanentes. Eu quero ir e talvez abrir este produto. Tudo bem, então diz furadeira de impacto do produto. Mas agora os links permanentes se aplicam principalmente às postagens do Wordpress. Artigos Os artigos são um tipo de postagem no Wordpress. Então, deixe-me voltar aqui e criar uma nova postagem. Talvez, digamos, sim, adicione uma nova postagem. E, como mencionei, um exemplo de postagem é um artigo, um artigo de notícias ou uma postagem de blog Então, como comprar online. Talvez este seja um post de blog que você está escrevendo para seus visitantes. Então eu vou publicar isso. Lá vamos nós. Então, se eu ver a postagem, se você olhar esta postagem 200503 2029, como fazer compras online, esta é a URL dessa postagem específica Deixe-me voltar aqui para o painel e acessar as configurações Link permanente Há diferentes maneiras de exibir o URL do que você está vendo. Como você pode ver, aqui temos o produto Impact. Temos nosso domínio, o Product Impact Drill. Isso é muito amigável para SEO. Quando os spiders do Google ou do Bing estão vasculhando a Internet em busca de novos conteúdos, eles também analisam como o URL é estruturado para os diferentes produtos, páginas diferentes, cada parte do seu site WordPress que tem um Os bots do Google analisarão a estrutura do URL e atribuirão notas mais baixas a determinados URLs devido à forma como estão estruturados Portanto, você precisa ter muito cuidado com a estrutura de seus URLs, que é onde entram os links permanentes Essas são as diferentes formas de estruturar suas postagens. E como você pode ver, atualmente temos essa data e depois a amostra, e é exatamente isso que temos aqui. A melhor maneira amigável de SEO de exibir seus URLs é o nome da postagem. Simples assim. Salve as alterações. Tudo bem, vamos paginar tudo Incrível. Agora, se eu arrastar isso e recarregar esta página, basta recarregá-la Vamos dar uma olhada na URL. Tudo bem, agora, vamos voltar para casa e vamos postar Como comprar online. Digamos que você veja. Então, agora, é só o seu domínio cortar o nome da postagem do blog Esse URL é muito amigável para SEO e receberá notas mais altas dos mecanismos de pesquisa quando eles indexarem seu site Portanto, certifique-se de que seus links principais estejam configurados com o nome da postagem. Em seguida, salve as alterações. Acho que já salvamos as alterações. Claro, essas são apenas dicas e truques que estou compartilhando superficialmente Se você quiser mais detalhes, pode ler mais sobre os links prima. Você pode ler sobre o cache de sites e tudo mais sobre o qual vou falar Acho que é um bom lugar para acabar com isso. A seguir, vamos falar sobre a segurança do seu site Wordpress. Te vejo em breve. 47. Segurança de sites: Vamos dar uma olhada na segurança do WordPress. Vamos aos plug-ins, Adicionar novos. Isso é o que eu amo no Wordpress. Tudo o que você deseja adicionar ao seu site Wordpress já foi criado como um plug-in por alguém. Assim, você não precisa pagar dinheiro extra a alguém para adicionar recursos ao seu site. Então, vamos digitar segurança. Temos vários plug-ins de segurança. Muitos deles são muito populares. Você pode escolher qualquer um deles. Eu uso uma segurança muito simples. Então, vou instalar isso , mas você pode usar o Wordfence Security Jet PAC, que é de propriedade da Automatic, que é a empresa que criou os Woo Tudo bem, vamos ativá-lo. Bem-vindo à segurança realmente simples. SSL, verifiquei se tenho um certificado SSL e ele o detectou muito bem Digamos que ative. O que é isso? Sim, ele enviará um e-mail de teste para confirmar que o e-mail está configurado corretamente no meu site. Vamos permitir que o RSS nos envie uma notificação, salve e continue Vamos ver essa verificação de vulnerabilidade, combinação instantânea de login por e-mail. Vamos permitir que ele os configure automaticamente. Se você quiser adicionar aqueles pop-ups de cookies que perguntam se você concorda com a política de cookies deste site, blá, blá, blá Esses são os plug-ins que você pode adicionar automaticamente. Eles são feitos pela mesma empresa. Então você pode dizer instalar, mas eu não vou instalá-los porque isso para mim é apenas um site fictício Você pode descobrir mais sobre isso. Eles têm tutoriais sobre como fazer isso. Instalar. E agora podemos terminar. Não precisamos desses recursos profissionais deles. Talvez precisemos deles, mas não temos dinheiro para comprá-los por enquanto. Portanto, o SSL agora está ativado e temos um alerta sobre todas as coisas que precisam ser feitas em seu site para torná-lo seguro Então, vamos ver 31 habilitado. Isso é algo que você precisa fazer com o redirecionamento de acesso HT Agora, essas são algumas das coisas que você pode usar Chat GPT ou um tutorial do YouTube para aprender Essas não são coisas em que você vai se debruçar. Seu site usa elemental. Isso pode exigir que algumas dessas coisas não sejam urgentes. Eles não são muito urgentes. Detectamos funções de administrador nas quais os nomes de login e exibição são os mesmos. Então, o que precisamos fazer é ir até os usuários, ou usuários. Deixe-me escrever o link Openink em uma nova guia. Vamos até o único usuário que existe, que é você e você é o administrador. E aqui você precisa definir seu apelido Mr. Moneybags, e agora você pode usá-lo para atualizar o perfil Você não deve exibir o nome que foi atribuído a você. O nome de usuário que foi atribuído a você, esse nome de usuário que o Wordpress atribuiu a você quando você instalou o WordPress. Não o exiba em público. Ele pode ser usado para entrar na sua área de administração e destruir seu site ou roubar coisas. Portanto, defina um apelido e use-o como nome público em sua postagem Então, por exemplo, se formos para um onde está aquela postagem que criamos? Como você pode ver, a postagem atualmente tem meu nome de usuário real, o nome de usuário do administrador. Mas agora, se eu recarregar isso, agora diz o Sr. Moneybags As pessoas não conseguem adivinhar o nome de usuário aleatório que recebi do WordPress. Então você pode passar por algumas dessas outras coisas. Não vou perder tempo configurando tudo porque isso é apenas para mostrar que você usa uma segurança muito simples para sua segurança e aprende a usá-la. Cada pequeno alerta aqui tem mais informações do site oficial do plugin. Então, vá em frente e analise todas essas coisas e veja como você pode melhorar seu site, torná-lo mais seguro. Use o Chat GPT se você não entende coisas como HTCs e como resolver isso, certo Tudo bem. Acho que é um bom lugar para acabar com isso. Na próxima lição. Vamos ver como fazer backup seu site, porque se alguma coisa acontecer com seu site agora e você precisar reinstalar o Wordpress, poderá perder tudo Mas se você tiver um backup armazenado em algum lugar no Google Drive ou na sua máquina, qualquer coisa acontecer, você terá um backup. Vamos ver como fazer isso na próxima lição. Te vejo em breve. 48. Backup do seu site: Vamos falar sobre como fazer backup do seu site. Então, como sempre, vamos aos plug-ins. Adicionar novo. Então, aqui, vamos procurar reforços. Então, como você pode ver, temos o UdraftPlus e outros incríveis plugins de backup do Wordpress Mas eu adoro o updraft plus porque é muito fácil e direto Então, vamos ativá-lo. E agora vamos pressionar iniciar aqui todas as configurações. Tudo bem. Então, aqui você fará um tour pelo plugin. É nisso que você clica para fazer um backup, mas vamos para a próxima. Aqui você pode escolher quantos arquivos deseja manter a qualquer momento. É aqui que você pode escolher para onde deseja enviar uma cópia de um backup do seu site. Assim, você pode se conectar ao seu Google Drive. Você pode usar esses outros serviços. Eu raramente uso isso. Eu tenho um dos meus sites conectado ao Google Drive e ele envia automaticamente uma cópia de um backup do meu site desse site para o Google Drive. Mas você não precisa mexer em todas essas configurações aqui. A única coisa que você precisa fazer é vir aqui e clicar em Backup agora. Nada mais. E então, como você pode ver, inclua seu banco de dados, ele será incluído e incluirá seus arquivos. São postagens, plugins, produtos, tudo. E se você quiser que o backup seja excluído apenas manualmente, você pode clicar aqui, o que significa que você mesmo terá que excluir esse backup manualmente. Então, vamos fazer backup agora. Pode levar um momento. Ed, aqui estamos. Nosso backup está pronto. Como você pode ver, fazemos backup de nosso banco de dados, plug-ins, temas, uploads e outros. Então, o que você precisa fazer é clicar em cada um deles, no banco de dados, baixá-lo para o seu computador. Tudo começou. Baixe plug-ins. Baixe todos os plug-ins que você instalou. Vamos baixar os temas, fazer o upload e outros. Dê a eles um momento. Então, agora baixe os temas. Lá vamos nós. Baixe todos os uploads Em outras palavras, se você enviou alguma imagem para o seu site, como imagens de produtos e outras. E isso significa que quando você restaurar essa cópia do backup, seu site ficará exatamente assim. Ficará exatamente assim. Então, deixe-me mostrar como finalizar isso. Então aí estamos. Vou abrir o laboratório Flex. Aqui estão meus arquivos desse backup até aqui. Vou cortá-los, Control X, clicar com o botão direito do mouse em Nova pasta, versão da loja online, um ponto, oh. Em seguida, cole todos eles lá. Vou salvar aqueles que estão lá. Agora você pode pegar essa pasta e colocá-la em algum lugar, talvez em seu disco rígido externo ou em algum lugar em seu disco rígido, onde eles estejam seguros. Então, agora, se voltarmos para a loja online, para o painel, e entrarmos no updraft se quisermos restaurar esse site, posso simplesmente deletar isso, deletar aquilo Então, agora nós o excluímos manualmente. Tudo bem. Vamos atualizar isso Então, como mencionei, se acontecer de você perder seu site e agora tiver uma nova instalação do Wordpress, agora você pode vir e fazer upload de arquivos de backup, selecionar, ir exatamente onde você colocou esses arquivos, versão da loja online e depois abrir e eles serão carregados aqui. E depois de carregados, eles terão a opção de restaurar. Você viu isso antes de eu excluir o backup que existia aqui. Depois de carregado, ele se parecerá exatamente com o backup que acabamos de excluir. Portanto, não vamos esperar que o upload termine. Agora você entende como fazer backup do seu site e por que isso é crucial. Na próxima lição, vamos garantir que nossos e-mails sejam enviados para os usuários quando eles realizam uma ação e para nós quando algo acontece em nosso site, talvez alertas de segurança do plug-in RSS ou envios de formulários, envios de formulários do formador, formador Vamos ver como fazer isso na próxima lição. Te vejo em breve. 49. Entregabilidade de emails: Então, agora vamos falar sobre a capacidade de entrega de e-mails em seu site Porque lembre-se de quando fomos ao RSS, onde está o RSS E aqui estamos. Então, vamos ver validação completa do e-mail e ativar as notificações para garantir que você receba avisos de segurança Então, vamos ver isso. Validação de e-mail, notificações aqui, validação de e-mail. Você está usando um recurso em que o e-mail é uma parte essencial da funcionalidade. Confirme se você pode enviar e-mails em seu servidor. Então, vamos ver como ignorar todas as notificações. Não. Queremos receber notificações, excluir todos os dados sobre a exclusão do plugin Não vamos mudar nada disso, mas vamos enviar isso para ver se podemos enviar e-mails. Tudo bem, validação de e-mail, e-mail enviado, por favor, verifique seu e-mail. Agora vá para o seu painel C. Como você pode ver, eu já tinha aberto meu painel C e percorrido todo o caminho até as contas de e-mail. Um dos e-mails criados automaticamente para você quando você estava instalando o Wordpress era, por padrão, admin em seu site.com Portanto, o site em que estamos aqui é o vfxSpot. Então, esse e-mail de cheque. E aqui estamos. Então eu acho que isso foi enviado hoje ou não é? Verifique seu e-mail para usar determinados recursos ou uma segurança muito simples. Primeiro de tudo, vamos verificar isso. Não vejo nenhuma notificação aqui, que me diz é que o e-mail confirma seu e-mail. Tudo bem. Então, acho que esse é o e-mail que eles enviaram quando o instalamos. Acho que está funcionando corretamente, mas não queremos duvidar disso. Então, vamos instalar o SMTP, mas espere um pouco Essas são notificações de coisas que precisamos fazer. Lembre-se de que eu disse que uma segurança muito simples é um sistema de segurança robusto, e essas são coisas que você precisará examinar uma a uma para ver como resolvê-las. Mas agora, vamos voltar aqui e dizer plug-ins, adicionar novos. Queremos ter certeza de que os e-mails serão enviados. Então, SMTP, este é um plugin gratuito. WP mail SMTP por WPForms instalado agora. Nossos e-mails foram enviados para verificar se está funcionando, mas eu só quero ter certeza , mas isso é só por segurança. Bem-vindo à configuração SMTP do WP Mail. Vamos voltar ao painel. Não precisamos usar o assistente de configuração porque o que queremos é vir aqui. Eles são válidos se você os deixar como padrão. Loja online, esse é o nome do remetente. Quando as pessoas receberem seu e-mail, seus clientes, ele será lido na loja virtual ou na marca que você deu ao seu site, loja virtual. Você também pode alterá-lo para seu nome. Ken. Forçar a partir do nome. Se outros plug-ins tiverem definido um nome diferente, você poderá forçar todo o site a usar esse nome de remetente. Precisamos verificar isso para garantir que até mesmo as mensagens devolvidas não sejam perdidas E agora, aqui no remetente, vamos usar SMTP e vamos usar detalhes do nosso host É por isso que abrimos isso. Esse é o e-mail que estamos usando, então vamos gerenciá-lo. E isso é algo com o qual você também pode pedir ajuda ao seu host. Agora vamos gerar uma senha aqui. Então, primeiro de tudo, deixe-me selecionar o domínio. Tudo bem, já está selecionado. Gerar. Agora, vou escolher essa senha, copiá-la. Vou colocá-lo em algum lugar no meu bloco de notas. Vou colocá-lo em um bloco de notas em algum lugar para que eu possa pegá-lo de lá. E isso é tudo. Portanto, atualize as configurações de e-mail. Agora nós demos isso. Qual deles usamos? Era o VFXPod Então, demos a isso uma senha, o que é muito importante. Conecte dispositivos. Vamos para Conectar dispositivos. Precisamos desses detalhes. Então, voltando aqui, host SMTP será esse o nome de domínio que você usou Vamos colocar isso aí mesmo. Vamos usar SSL porque temos um certificado SSL. Isso é 465 automaticamente. Em seguida, o nome de usuário SMTP aqui, o e-mail que usamos e a senha é a senha que acabamos de colocar em nosso bloco de notas Então, vou colar isso lá. E agora vou salvar as configurações. Tudo bem. Agora, com isso, vamos ver se vai funcionar se nossos e-mails estão realmente funcionando. Ferramentas, acho que em Ferramentas enviamos um e-mail de teste, sim. Então, deixe-me enviar um e-mail de teste para nosso e-mail de administrador. Sucesso. O e-mail de teste foi enviado com sucesso. Verifique sua caixa de entrada para ter certeza de que foi entregue. Então, agora nossos e-mails estão funcionando. Mas há uma coisa que eu preciso que você tenha em mente. Usamos um formulador. Então, se formos ao formulador para ver nosso formulário de contato, quero mostrar como editar o comportamento de e-mail de seus formulários Quando o formulário é enviado, o que acontece? Então, vamos às notificações por e-mail. 50. Notificações por e-mail do Forminator: As notificações por e-mail que temos. Agora, essa é a configuração desse formulário específico, esse formulário de contato. Se você tiver outro formulário e outro formulário, precisará acessar cada um dos formulários para definir essas configurações. Então, notificações por e-mail, se abrirmos isso, quando o usuário enviar o formulário, vamos para o front-end muito rapidamente Entre em contato, deixe-me fechar esses outros. Quando o usuário preenche seu nome, endereço de e-mail, digita algo e envia a mensagem, o que deve acontecer? Este e-mail será enviado ao administrador porque ele enviou este formulário para ser enviado a você. Portanto, ele é rotulado como e-mail do administrador. Este é apenas um rótulo para você. Esse é apenas um rótulo para o painel para ajudar você a saber qual e-mail é esse, porque o segundo e-mail que enviaremos será enviado para o cliente. E-mail do cliente. Assunto, podemos definir o assunto como Agora, ok, deixe-me encerrar isso porque não quero confundir você por enquanto Então, voltando aqui, vamos criar o e-mail que o usuário receberá quando enviar este formulário para você. Mas agora vamos trabalhar no que você verá na sua caixa de entrada. Isso é o que você verá. Você verá que tem um novo formulário de envio de site. Todos os campos, isso é apenas um espaço reservado para todos esses três campos e os detalhes que eles contêm, os valores que foram inseridos pelo usuário Você também pode decidir algo diferente, talvez entrar. Você pode dizer que, se disser inserir formulários, pode dizer que pode ser nome muito específico, o nome que eles compartilharam. Você pode dizer o texto. Este é um detalhe da área de texto, o que eles digitaram aqui. E o endereço IP deles e todas essas outras coisas, mas você não precisa de todas elas. Mas, para resumir, todos esses campos significam todos esses três campos e todos os dados que eles tinham Tudo bem, obrigado. Livre-se disso. Esta mensagem foi enviada do URL do site apenas significa que mostrará a exportação de VF, e eu mostrarei exatamente o que quero dizer Agora, quando chegamos ao assunto, também temos alguns outros espaços reservados, como você pode ver, nome aqui significa qualquer nome que eles compartilharam aqui Se eles colocarem Kennedy como eu, em seu e-mail, assunto será o novo ID de envio do formulário de inscrição, o ID desse formulário para o nome do formulário, o nome que você deu ao formulário e nós demos a ele o nome formulário de contato, como você pode ver aqui Portanto, você precisa ter nomes descritivos para cada formulário criado Quando virmos o formulário de contato em nosso e-mail para formulário de contato, saberemos que foi enviado na página de contato. Se tivermos outro formulário em outra página e ele tiver um nome diferente, será esse outro formulário. Você também pode alterar os destinatários aqui. Você pode inserir mais destinatários. Você pode fornecer seu próprio e-mail pessoal, talvez mouse em protonmil.com Você também receberá uma cópia do mesmo e-mail como notificação. Agora, para o usuário, é praticamente o mesmo. Isso é o que o cliente receberá. Este é apenas um rótulo para você saber qual é essa condição. Mas agora o que eles verão é o assunto. Esse é o assunto. Eles verão isso como uma cópia do formulário que você enviou. E aqui, você pode digitar qualquer coisa. Aqui estão os detalhes que você enviou por meio do formulário de contato em nosso site. Tudo bem Digite, basta dizer todos os campos do formulário. Obrigado por entrar em contato conosco. Entraremos em contato com vocês em breve, destinatários. Então, aqui a pessoa a receber é o e-mail que ela enviou neste campo, e-mail, endereço de e-mail. Então, adicione essa atualização. Agora, deixe-me enviar este Ken Kyoko, deixe-me fornecer esse e-mail e, em seguida, apenas um e-mail de teste Enviar mensagem. Tudo bem. E você sempre pode acessar as cores personalizadas em quatro Mintor para alterar isso Agora, se voltarmos ao nosso e-mail aqui e se eu atualizar, vamos ver se recebo, estamos desconectados Então, retrocedendo, e se eu abrir esse e-mail, verifique o e-mail. Exatamente. Então, primeiro de tudo, esse é o e-mail de teste que enviamos com SMTP Congresso, o e-mail foi enviado com sucesso e, agora, se acessarmos este formulário, você terá um novo formulário no site. Vamos voltar ao nosso site, e esses são todos os campos. Se voltarmos aqui, você terá um novo formulário para o site, todos os campos. Ele extrairá todos os campos que foram preenchidos e os mostrará aqui. Essa mensagem foi enviada do URL do site. URL do site Deixe-me verificar se recebi o mesmo e-mail na minha caixa de entrada Como você pode ver, eu também recebi da Online Store uma cópia do formulário que você enviou. E se eu voltar aqui, feche o e-mail do cliente, uma cópia do formulário que você enviou. Se eu abri-lo, aqui estão os detalhes que você enviou por meio do formulário em nosso site. Aqui estão os detalhes de exatamente o que dissemos em todos os campos. Porque dissemos , envie para o e-mail que foi inserido no campo de endereço de e-mail. Então, é assim que você garante que seus e-mails sejam enviados para as pessoas que precisam vê-los. Isso também se aplicará a todas as suas transações com Wocomers. Quando as pessoas fazem pagamentos ou as transações falham, você recebe todas essas notificações. Acho que é um bom lugar para acabar com isso. Deixe-me ver onde estamos agora. Tudo bem, sim Então, agora terminamos com a capacidade de entrega de e-mails. Vamos ter uma conversa rápida sobre SEO. Te vejo em breve. 51. Otimização para motores de busca (SEO): Vamos falar sobre otimização de mecanismos de pesquisa. Há várias coisas que precisamos fazer para tornar nosso site visível para mecanismos de pesquisa como Google e Bing. No momento, se você lançar seu site, ele ficará invisível para todos os mecanismos de pesquisa. Então, deixe-me fechar essas outras áreas. Deixe-me fechar isso. Atualize isso. E uma das razões pelas quais não seremos visíveis para os mecanismos de pesquisa é algo que fizemos deliberadamente Você se lembrará de algumas lições atrás, acessamos as configurações, lemos e desencorajamos os mecanismos de pesquisa de indexar nosso site porque ele estava Agora estamos prontos para lançar nosso site. Então, primeiro de tudo, vamos desencorajar Não, vamos incentivar os mecanismos de pesquisa a indexar este site Lá vamos nós. Agora, como você pode ver, nossa loja ainda está chegando em breve. Então, se formos até aqui, quando estivermos prontos para lançar o site, poderemos entrar no ar. Então, vamos ao vivo. Mas antes de irmos ao ar, você terá que, antes de tudo, fazer todo o SEO. Eu só quero te mostrar como ir ao vivo. Não queria esquecer que a loja ainda está chegando em breve. Então, depois de fazer a parte de SEO, você pode ir ao ar. Então, deixe-me salvar as alterações, supondo que meu site agora esteja otimizado para mecanismos de pesquisa Agora, SEO é um tópico inteiro por si só e deve ser um curso inteiro por si só. E o bom é que eu já publiquei uma aula sobre SEO, WordPress SEO para iniciantes. Eu o publiquei no Skillshare, onde também tenho outros incríveis de Wordpress e elementares Você pode ir e conferir agora mesmo. É um curso completo passo a passo sobre como otimizar seu site, todas as diferentes partes que você precisa examinar e configurar para garantir que você não se perca na página 500 dos resultados de pesquisa do Google. Então, sem dizer isso, não vamos continuar falando sobre SEO. Confira esse curso ou simplesmente acesse o YouTube e procure mais cursos ou tutoriais de SEO Tenho algumas considerações finais que quero compartilhar com vocês na próxima lição, então vamos encerrá-las. vejo em breve. Não vá a lugar nenhum. 52. Considerações finais: E isso é um embrulho. Parabéns. Agora você tem um site de comércio eletrônico totalmente funcional construído com Wordpress, elementor, WooCommers e outras ferramentas do Wordpress, ferramentas gratuitas Espero que esta aula tenha lhe dado a confiança necessária para projetar, criar e lançar seu próprio site de comércio eletrônico em 2025 E se esse não era seu objetivo, espero que a aula tenha lhe dado a confiança necessária para se tornar um melhor web designer do Wordpress. Agora, quais são os próximos passos? Bem, primeiro de tudo, eu realmente adoraria ver o que você foi capaz de construir. Vá até a guia Projetos e Recursos logo abaixo deste player de vídeo e clique no botão Enviar projeto. Você pode fazer uma captura de tela da sua página de destino, da sua página inicial, da página sua loja ou de uma única página de produto e enviá-la aqui mesmo no Skillshare Deixe que outros alunos vejam, deixe seu professor ver e vamos comemorar seu sucesso juntos. E, como sempre, se você gostou dessa aula e a achou benéfica, significaria muito para mim se você pudesse dedicar menos de um minuto para deixar uma avaliação e me contar como foi. Ajude outros alunos em potencial saber se essa aula é adequada para eles. Ajude-me a saber se estou causando impacto com minhas aulas ou se devo melhorar alguma coisa. Você levará literalmente menos de um minuto, vá até a guia de avaliações logo abaixo deste reprodutor de vídeo e deixe sua avaliação lá, e eu realmente agradecerei isso. Agora, se você está planejando lançar seu site, eu recomendo aprender sobre SEO. E, como mencionei, eu já tenho um curso inteiro sobre WordPress SEO Então não deixe de conferir meu perfil. Desça e procure uma classe o nome WordPresSEO simplificada para iniciantes, e tenho certeza de que você a achará muito útil antes do lançamento Sempre, meu nome é Ken, e é um prazer ter tido a oportunidade de ensinar como criar este site, e mal posso esperar para ver o que você poderá criar. Até a próxima vez, seja criativo. Te vejo em breve.