Crie uma loja de comércio eletrônico com o Elementor (plugins gratuitos)

1. Introdução: E bem-vindo de volta a outra aula incrível comigo, Ken Visa. É sempre um prazer tê-lo aqui hoje com uma nova classe incrível só para você. Eu tenho ensinado elementar nos últimos 1,5 anos aqui no Skillshare. E hoje resultado com uma aula muito especial para quem quer construir uma loja de comércio eletrônico ou uma loja online usando o WordPress, tenho várias aulas ensinando aos alunos como usar o elementary para crie páginas da Web e sites totalmente funcionais a partir do zero. Essa aula é um pouco diferente porque, ao contrário das outras aulas em que eu ensino a criar páginas da web e sites do zero. Vou mostrar a você como economizar tempo usando modelos pré-fabricados. Isso mesmo. Você me ouviu. Belos modelos pré-fabricados que já foram projetados por designers muito qualificados. E tudo o que você precisa fazer é substituir o conteúdo do espaço reservado pelo seu próprio conteúdo. Isso permite que você economize tempo quando não quiser começar a criar seu site do zero. Se você criar, construir ou fabricar produtos físicos e tiver uma loja física, agora é hora de mover sua loja para o espaço online onde você pode alcançar mais clientes. Assim, você pode administrar sua loja física enquanto, ao mesmo tempo, a executa online e vende para pessoas que adoram comprar coisas online. Então, esta aula mostrará como fazer isso. E estou muito animado para trazê-lo para você. Então esse é o site será projetado hoje. E quando terminarmos a aula, você terá uma loja de comércio eletrônico totalmente funcional construída com o WooCommerce. Se você está tão animado quanto eu, vamos começar. 2. Instale o tema Astra: Aqui estamos no painel. Como você pode ver, esta é uma nova instalação do WordPress, WordPress 5.9 para a primeira coisa que precisamos fazer fácil instalar o Tema Astra. Então, vamos para Temas de Aparência. Claro, temos as equipes padrão que vêm com cada nova instalação do WordPress, mas não estamos interessados na lista três, se quisermos adicionar novo, serão redirecionados para o tema WordPress repositório. E aqui temos muitos temas de terceiros que você pode instalar e começar a usar imediatamente. Mas o que estamos interessados, como mencionado, é Astra. Então, vou clicar em Instalar. Tudo bem, então agora que está instalado, vamos ativá-lo. Agora, o novo tema está ativado. É o tema ativo em nosso site. E você notará que aqui em cima temos esse pop-up. Temos esta notificação aqui que diz obrigado por instalar o Astra deed. Você sabe, o aster vem com milhares de modelos iniciados prontos para usar. E nesta classe estaremos instalando esse plug-in chamado plugin de modelos iniciais, porque estaremos explorando diferentes tipos de modelos que estão disponíveis para facilitar nosso trabalho. Se você é o tipo de pessoa que quer aprender a criar sites ou páginas da Web com o Elementor do zero, a partir de uma lista em branco. Você pode ir em frente e assistir a qualquer uma das minhas outras classes elementares aqui mesmo no Skillshare. Tenho um grande número deles mostrando como criar uma landing page do zero adicionando elemento por elemento até que você tenha uma página inteira. Mas neste caso ou para essa classe que usaremos, veremos como facilitar nosso trabalho usando modelos pré-fabricados gratuitos. Eles são incríveis e você verá por que agora que temos nosso Tema Astra instalado. Na próxima lição, veremos como instalar este plugin e como começar a usar os modelos. Vejo você em breve. 3. Instale o plugin de modelos Starter: Estamos de volta. Agora. O Astra é o tema ativo e queremos começar a instalar os modelos iniciados conectando para poder começar a usar o modelo inicial. Então, vamos clicar em Começar será redirecionado para um assistente de configuração, o que nos ajudará a configurar tudo como queríamos escrever. Então você pode tirar um momento e assistir este vídeo para ouvir esse cara, da equipe The Astor. Mas vou seguir em frente e clicar em criar seu site agora para que possamos começar imediatamente. Como você pode ver, temos três tipos diferentes de construtores, três construtores diferentes de arrastar e soltar aqui. Mas o que estamos interessados é elementar. Então vou escolher Elementor. Ao clicar em Elementor serão mostrados os modelos que podemos editar com o Elementor. Então, como você pode ver, eles são agrupados em diferentes categorias aqui, dependendo do que você deseja construir. Mas, claro, estamos interessados em uma loja de comércio eletrônico ou em loja de comércio eletrônico. Então, vou clicar em qualquer uma dessas categorias aqui. Por exemplo, a loja esportiva será apresentada com diferentes tipos de lojas de comércio eletrônico. roupas esportivas loja de marcas, loja de calçados reciclados. Muitos modelos que podemos usar. Mas no exemplo que mostrei na introdução da aula, uso esse modelo aqui, a loja de cosméticos. Então, vou clicar nisso para escolhê-lo. O próximo passo que precisamos dar aqui é adicionar um logotipo ao nosso site. Escolha um logotipo para o seu site. Você pode atualizá-lo a qualquer momento mais tarde e mostrarei como atualizar o logotipo mais tarde. Então, vamos em frente e clique em Carregar arquivo aqui. Vamos fazer upload de arquivos. Então, selecionarei meu logotipo do meu computador. Como você pode ver, tenho vários logotipos que aparecem, Meu nome. Claro que você usará o logotipo da sua própria empresa. Vou clicar nisso e dizer Abrir. Vou dizer Select. E como você pode ver, o logotipo já está aparecendo aqui. As cores realmente não correspondem ao plano de fundo. E isso é muito deliberado porque eu queria mostrar em uma próxima lição como mudar esse logotipo para um logotipo diferente que corresponda ao plano de fundo. Então, vamos deixar isso lá e dizer Continue. Aqui, podemos escolher as cores que queremos que a equipe tenha em geral. Ou, e é claro que podemos atualizá-los a qualquer momento mais tarde. Por padrão, essas são as cores escolhidas. Vou deixá-los por padrão porque, como mencionei, podemos alterá-los mais tarde e veremos como fazer isso. E nossa fonte padrão é o monitoramento. Vou deixar isso e dizer Continue. Basicamente, este é um fórum de inscrição da equipe de asterisco, onde você não parece estar recebendo boletins informativos sobre o mais recente que está acontecendo com o Tema Astra. Do Tema Astra. Então vou em frente e preencherei meu nome. Então Ken, meu e-mail, eu sou um especialista, mas é claro que você vai se inscrever talvez como iniciante ou algo assim. Vou dizer especialista porque sou especialista construindo um site para mim. Não quero verificar isso porque já me inscrevi no boletim informativo algum momento atrás. Se você quiser compartilhar dados não confidenciais com o Tema Astra, você pode deixar isso marcado, mas você precisa importar o conteúdo de demonstração que você viu no próprio modelo. Então deixe esses outros. Bate-papo. Vou dizer que envie e construa meu site. Levará alguns minutos para construir. Parabéns, o modelo agora está instalado e pronto para ser personalizado para parecer exatamente do jeito que você queria. Você pode ir em frente e assistir esse cara e ouvir o que ele tem a dizer. A próxima coisa que precisamos fazer, podemos clicar em visualizar seu site e você será redirecionado para uma nova guia onde poderá ver seu site WordPress. Lá nós o temos. É assim que o site se parece. Claro, veremos como personalizá-lo. Para sair deste lugar, clique neste botão Sair para o painel aqui à direita, no canto superior direito. Clique nisso. Agora, aqui estamos no painel. Os caras estão nos pedindo para dar-lhes uma classificação, mas eu já os classifiquei, então vou remover isso. Pular para a guia onde abrimos o site. Aqui estamos nós. Deixe-me rolar e mostrar o que temos. É assim que o modelo se parece. Veremos como personalizar tudo para adicionar seu próprio conteúdo e torná-lo seu próprio site. Em outras palavras, veremos como personalizar o site ao seu gosto. Abra a página nítida. Estamos. As outras páginas estão funcionando corretamente. Na próxima lição, vamos ver como começar a personalizar o site para funcionar exatamente da maneira que você deseja. 4. Instalando o WooCommerce: Bem-vindo de volta. Agora que temos nossa equipe do WordPress é informada e já selecionamos o modelo com o qual queremos trabalhar. É hora de instalar meios de pagamento para o nosso site. Cada loja de comércio eletrônico construída com o WordPress usa um plugin para aceitar pagamentos no site. E há vários logins de pagamento na plataforma WooCommerce. E um dos melhores do mundo é o WooCommerce. Você deve ter ouvido falar. Então, vamos em frente e instalar o WooCommerce em um site e integrar pagamentos para que possamos permitir que os clientes façam pagamentos em nosso site e subprodutos. Entrando no painel, vou para plugins. Já temos o WooCommerce instalado. É um dos plugins que foi instalado enquanto não estávamos instalando o modelo e ele já está ativo. Então, se clicarmos, o WooCommerce faz será redirecionado para este assistente de configuração, onde agora podemos conectar nosso WooCommerce ao site. Então, vamos em frente e insira nosso endereço e todos esses detalhes. Vou desmarcar isso porque não quero receber essas informações. Vá em frente e selecione seu país. Quero dizer, Quênia. Nairóbi. Nairobi County, no Quênia. Então vou em frente e direi Continue. Não, obrigado. E, claro, em qual indústria a loja opera? Saúde e beleza. Continuar? Sim, eu vendo produtos físicos. Eu direi continuar. Quantos produtos vendem de forma confiável? Talvez 11.100. E minha venda em qualquer outro lugar atualmente? Não. Não estou montando uma loja para nossos clientes, então direi Continue. Aqui temos extensões gratuitas adicionais que você pode opcionalmente escolher instalar. Eu não quero escolher nenhum desses, então vou desmarcá-los e dizer Continue. Já temos este Tema Astra instalado, então vou clicar em continuar com meu tema ativo. Esses são os temas que vêm com o WooCommerce. Eles são fornecidos pelo WooCommerce, mas eu queria continuar com o Tema Astra. Portanto, o continuum será redirecionado para a página inicial do WooCommerce dentro do nosso painel, como você pode ver aqui à esquerda. E, claro, aqui está uma dica de ferramenta rápida para nos dizer um pouco mais sobre o que esperar do WooCommerce. Só vou clicar em Avançar ou talvez apenas fechar isso. Vamos seguir em frente e configurar pagamentos. Gateways de pagamento adicionais. Precisamos de pagamentos do PayPal para permitir que os clientes paguem com a configuração de células do PayPal. No momento, estamos instalando o plugin de pagamentos do PayPal que as pessoas são extensão de pagamentos. E não é debatido. Em seguida, vamos configurar a conta de pagamentos do PayPal. Vamos configurar. Tudo bem, agora, como você pode ver, em WooCommerce, estamos dentro das configurações. É para lá que fomos redirecionados. Estávamos aqui, agora fomos levados para este lugar. E, claro, por padrão, já ativamos os pagamentos do PayPal e agora podemos aceitar com segurança todos os principais cartões de crédito e débito com a força da Rede PayPal. Então, a próxima coisa que precisamos fazer é ativar o PayPal. Em outras palavras, precisamos conectar esses plugins do PayPal à nossa conta do PayPal. Portanto, você precisará ter uma conta do PayPal para se conectar para que o dinheiro seja enviado para essa conta do PayPal. E é aí que você pode aumentar seu dinheiro. Então eu preciso fazer login. Vou seguir em frente e inserir minha senha. Permita que o PayPal conecte sua conta ao WooCommerce. Desenvolvedores. Concorde e conecte-se. Obrigado por se inscrever. Agora você tem uma conta e integrou com sucesso PayPal com desenvolvedores do WooCommerce. Então, em outras palavras, as pessoas podem fazer o pagamento em nossa loja de comércio eletrônico e o dinheiro será enviado para o papel de onde podemos retirá-lo. Então, vamos voltar aos desenvolvedores do WooCommerce. Isso está em nosso painel. Como você pode ver, essas ações conseguiram recuperar todas essas informações do papel. Antigamente, eu costumava entrar no papel e pegar esses IDs e chaves dentro do papel e vinha colá-los aqui. Mas, como você pode ver, eles melhoraram o processo. São apenas alguns cliques e as informações aparecem automaticamente aqui. Agora que isso está feito, vamos seguir em frente e dizer Salvar alterações. Agora vamos dizer que habilite o gateway PayPal. E é claro que existem várias outras configurações aqui que você pode editar, mas eu não vou alterá-las. Então, vamos voltar para dentro da guia Geral. Aqui, podemos definir nossas linhas de endereço e detalhes de envio. Locais de venda. Então, você vende para todos os países locais de envio? Para onde você envia esses detalhes? E qual é a sua moeda agora está mostrando xelins do Quênia porque quero dizer Quênia. E se você alterar alguma coisa aqui, você pode, se quiser habilitar impostos e cálculos, você pode seguir em frente e fazer isso e clicar em Salvar alterações. Mas é claro que não mudei nada, então não vou atualizar isso. E você pode ir em frente e conferir mais tutoriais sobre como configurar o WooCommerce em qualquer site WordPress. Existem muitos tutoriais no YouTube que mostram exatamente como fazer isso. Se fôssemos fazer isso agora, isso tornaria essa classe muito longa e não queremos fazer isso porque, como você pode ver, temos muitas outras configurações aqui para configurar. Vamos seguir em frente e clicar em pagamentos. Agora, como você pode ver, temos uma lista de maneiras diferentes de aceitar dinheiro. E como terminamos de configurar a extensão do PayPal, ela agora está ativada, o que significa que você a configurou corretamente. Então vá em frente e verifique se ele está ativado. E se quisermos fazer alterações nele, você sempre pode clicar em Gerenciar. Você será levado para esta página que já vimos. Então, agora que configuramos o WooCommerce, é hora de começarmos a personalizar a aparência dos sites usando os vários personalizados como temos e o construtor de páginas Elementor. 5. Personalize o Header: Certo, agora é hora de começar a personalizar nossa landing page e o resto das páginas. Então, para começar, vamos começar com o Navbar aqui. A primeira coisa que queremos fazer é mudar esse logotipo porque, como você pode ver agora, isso não está visível. Então, vou em frente e clique em Personalizar. Essa é uma das áreas em que podemos personalizar a landing page. Então, vamos em frente e edite o cabeçalho. Este é o cabeçalho onde o logotipo e a barra de navegação estão localizados. Então, para fazer isso, entraremos no construtor de cabeçalho ou podemos ir diretamente e clicar em qualquer elemento aqui quando esse ícone aparecer. Mas vou entrar em construtores de cabeçalhos. Você notará que temos essa representação do design aqui em baixo. Então, o logotipo do título do site, aqui está um logotipo. O menu principal, aqui está. E o ícone do carrinho ou a funcionalidade do cartão, que está bem aqui. Então você notará que essa imagem é executada até o topo atrás da barra de navegação e do local. Isso significa que esse cabeçalho é transparente. Se tivesse uma cor de fundo, não veríamos essa imagem ir até o topo. Então você notará aqui que temos a opção de cabeçalho transparente personalizada. E se lermos esse aviso aqui, o cabeçalho desta página é definido a partir desse cabeçalho transparente. Porque se eu pudesse simplesmente pular para outra página, você notará que o cabeçalho aqui tem um logotipo escuro porque tem um fundo branco. Este não é um plano de fundo transparente. Então, algumas partes do site precisarão ter um logotipo escuro em parte na landing page ou em qualquer página em que a imagem seja executada até o topo. Ele tem um cabeçalho transparente. E isso significa que precisamos ter um local brilhante, como a vida do logotipo branco. Neste caso. Aqui podemos editar a imagem nesta página, o logotipo nessas páginas de fundo branco. E se quisermos editar o logotipo no fundo transparente, temos que clicar nessa opção. Então, voltaremos a isso em breve. Primeiro, quero entrar pela opção de cabeçalho transparente personalizada. Então, aqui podemos escolher em quais telas queremos que essas configurações tenham um efeito. Assim, podemos escolher desktop, celular ou desktop e celular ao mesmo tempo. Então, como você pode ver, temos duas opções do logotipo. Logotipo e escreveu um logotipo. E vamos ver o que acontece quando mudamos o logotipo da retina. Tenho um logotipo branco em algum lugar aqui. Escolha Imagem. Agora você notará que o logotipo ainda é o logotipo escuro que tínhamos. E isso basicamente nos diz que o logotipo que está sendo exibido aqui, atualmente em nosso site é o local normal que eles escreveram um logotipo é exatamente o mesmo logotipo que o logotipo normal, mas é o dobro do tamanho do logotipo normal. Portanto, se este for um, um 100 por 100 pixels, isso deve ser de 200 por 200 pixels, e geralmente é o dobro do tamanho do logotipo normal porque é a opção exibida em dispositivos high-end , como como MacBook Pros e iPhones. É assim que o WordPress o configurou. Agora, para mudar isso para branco, precisamos mudar o logotipo normal para branco também. Vou clicar nisso. Mas lembre-se que dissemos que o logotipo da retina deve ter o dobro do tamanho do logotipo normal, mas para fins ilustrativos, usarei o mesmo logotipo. Lá nós o temos. Podemos ir em frente e ajustar a largura do logotipo puxando esta barra aqui. Deixe-me torná-lo um pouco maior. 384. E direi Publicar. Agora parece muito melhor. Vamos entrar na guia de design e ver o que podemos mudar. Assim, podemos alterar o plano de fundo nesta área aqui. Ao clicar nisso. Como você pode ver, agora não é mais transparente, mas queremos deixá-lo transparente. Então, não vamos alterar a publicação deles. Agora, eu quero entrar nessa área e recarregar esta página, atualizar. Você notará que o logotipo ainda permanece como o logotipo escuro porque o único logotipo que alteramos foi o logotipo dentro do cabeçalho transparente. Então, se clicarmos em Título e logotipo do site aqui. Você notará que o logotipo aqui ainda é esse logotipo. Temos nosso logotipo normal, mas não mudamos nosso logotipo retina. Então, se alguém visualizar nosso site em um Mac Pro ou iPhone, ele verá esse logotipo de cosméticos. Então, precisamos alterá-los para o dobro do tamanho do logotipo normal que usamos. Mas, para fins ilustrativos, ainda usarei o mesmo logotipo. Lá nós o temos. Então deixe-me clicar em Publicar, e eu queria mostrar algo muito rapidamente. Se pudermos mudar para esta página, deixe-me atualizar isso. Nosso logotipo funciona. Tudo bem, então é assim que alterar o logotipo do site do padrão para um novo logotipo personalizado. Claro, aqui podemos editar o ícone do carrinho. Se clicarmos no carro, podemos entrar no design. Também podemos decidir se você deseja exibir o total do carrinho. Agora ele mostra o total do carrinho. Você também pode exibir o título do cartão. Assim mesmo. Também podemos editar o menu primário, que é nosso menu. Podemos clicar aqui para configurar o menu. Clicando que podemos escolher qual menu queremos mostrar. Então, atualmente, temos três menus diferentes. Mas queríamos exibir o menu principal. Claro. Deixe-me ver como esse outro menu se parece. Esse é um menu de contato, menu de link rápido. Então, vamos voltar ao menu principal. Agora que estamos satisfeitos com nossas mudanças, continuarei publicada. Deixe-me fechar o personalizador para que possamos ver nosso novo cabeçalho de landing page. É assim que parece. Acho que gosto de como parece. Então, a próxima coisa que queremos fazer é editar o resto da página com o Elementor porque temos duas maneiras de editar esta página. Usando o personalizador e usando o Elementor porque diferentes partes da página de destino foram criadas usando as Configurações do tema Astra ou o construtor Elementor. Então, estávamos editando o cabeçalho dentro do personalizador porque ele foi criado usando as configurações de PM do asterisco. Mas as partes internas do corpo principal da página da Web são criadas usando o Elementor. Então, na próxima lição, veremos como editar os elementos nesta página com o Elementor. Então, vejo você na próxima lição. 6. Personalize a seção de heróis: Estamos de volta. Agora é hora de editar esta página. E, claro, como mencionei na lição anterior, diferentes partes da página são criadas usando diferentes ferramentas ou configurações. E acabamos de ver como editar o cabeçalho usando o personalizador porque é isso que foi usado para construir o cabeçalho. Mas o resto do corpo aqui foi criado usando o Elementor. Então, para editá-lo, precisaremos editá-lo com elementar. Então vou subir aqui e clicar em editar com o Elementor. Tudo bem, então aqui estamos nós. Vou me livrar desse navegador. E começaremos olhando para a primeira seção aqui. E se quisermos alterar a imagem de fundo? O que precisamos fazer é selecionar a seção que está segurando a imagem, porque essa imagem é usada como plano de fundo, podemos ter uma cor para o plano de fundo em vez de uma imagem. Depois de selecionar esta seção, essa área muda para abrir as configurações dessa seção específica. Você pode dizer pela seção de edição de palavras aqui. Então, entrando no estilo, você notará que temos abaixo da guia de fundo aqui. Se expandirmos, você notará, sob o fundo, temos a imagem, a imagem do tipo de fundo. Eu já havia carregado essas duas imagens como outros planos de fundo possíveis. Vamos ver se podemos trabalhar com isso. Selecionarei isso e direi Inserir mídia. Imediatamente, ele muda para esse novo plano de fundo, é claro, você precisa preparar uma boa imagem para o seu plano de fundo, caso queira usar uma imagem diferente. E sugiro que você faça 1920 por 1080 pixels. Então, vamos voltar aqui e ver o tamanho 1920 por 1080 pixels. Em outras palavras, torne-o HD. Certo? Então, agora é que podemos ir em frente e colapsar o fundo e podemos brincar com o fundo sobrepondo a escuridão da sobreposição que está no topo da imagem. E deixe-me mostrar como isso parece. Deixe-me mostrar a intensidade. Você pode torná-lo mais escuro ou mais leve. Também podemos entrar aqui e mudar a cor em si. Então, se você quisesse ter alguma cor avermelhada ou azulada, em vez de preto, sempre podemos dar essa sobreposição azul. É isso. Deixe-me colapsar o fundo. E acho que está tudo bem. Então, deixe-me atualizar. E então vamos visualizar a página. Então é assim que a página parece agora. É claro que não é a página mais bonita, mas, como você pode ver, temos muita flexibilidade no que podemos fazer para melhorá-la. Você notará que quando começarmos a rolar, a imagem permanece em um só lugar. Se você quisesse rolar junto com todo o resto nessa seção, tudo o que precisamos fazer é entrar aqui em segundo plano, em segundo plano. Sob anexo. Agora ele disse para corrigir, podemos mudá-lo para rolar. Quando rolamos agora, ele sobe junto com o resto da seção. Atualize isso. Vamos visualizar as alterações. Certo? Então, a próxima coisa que queremos fazer é editar esse botão, caso você queira editar a cor do botão. Selecione o botão em si, e isso mudará para o botão de edição. E essas são as configurações do botão. Vamos entrar no estilo. Podemos mudar a cor de fundo para qualquer cor que quisermos, ou esta é a cor do texto. Vamos mudá-lo de volta para branco. Queremos alterar o tipo de fundo. Como você pode ver, o plano de fundo mudou. Você pode dar, digamos, uma cor vermelha, por exemplo. mouse, vamos dar algo como vamos deixá-lo no branco em pairar. Atualize isso. Agora, o que ainda estava editando o botão? Ele precisa apontar para uma página específica. Precisamos dar um link. Então, adicionamos isso na guia do botão. O link pode dar algo como Agora sempre que alguém clicar nesse botão, será levado para, como você pode ver aqui em baixo, quando eu passar o mouse sobre isso, haverá no meu website.com, o mesmo URL que aparece. Se quiséssemos abrir em uma nova guia. Deixe-me atualizar isso e mostrar mudanças muito complicadas. Aqui vamos nós. Então, quando passarmos o mouse sobre o botão, você notará que o URL que aponta para aparecer aqui. Se clicarmos nisso, ele começará a abrir. Ele abrirá o link na mesma página. Deixe-me voltar. E se quiséssemos abrir em uma nova guia? O que podemos fazer o botão de bem-estar fácil ainda está selecionado. Mx, o link que temos esta roda dentada, clique nele e diga abrir em nova janela. Em seguida, atualize isso. Vamos visualizar as alterações. Agora, sempre que alguém clicar nesse botão, ele será aberto em uma nova guia e esta página permanecerá intacta para que você possa continuar navegando na página de descanso. Então, vamos clicar nisso. E agora abrimos uma nova guia, nossas páginas ainda estão lá. Claro, também podemos editar esse texto aqui selecionando em qualquer lugar dentro desse elemento. Vamos entrar no estilo. Vamos colapsar isso. Expanda o conteúdo. A cor do título pode ser alterada para qualquer cor que quisermos. Digamos que você leia. Claro, lembre-se que estou insistindo que este não é o site mais bonito por isso é para fins ilustrativos. Digamos que queremos torná-lo azul claro assim. Queremos alterar a cor da fonte da descrição. Você pode alterá-lo para qualquer cor que quisermos. Basta deixá-lo em amarelo, branco. Vamos atualizar isso. Sempre que quiséssemos alterar ou editar qualquer elemento na página da Web, basta clicar dentro dele. Então, se quisermos alterar ou editar isso, vamos clicar dentro dele. E agora é o que estamos editando aqui. Para alterar a aparência em si, precisamos entrar na guia de estilo. Lá, podemos alterar a cor do texto. Pode ser digamos, um amarelo. Agora vamos visualizar as alterações. Assim. Sempre podemos ajustar a altura da seção do herói. Então, enquanto ainda estiver selecionado, podemos entrar no layout. Em layout, deixe-me colapsar isso no layout, temos essa altura mínima. E você vai notar que a barra inferior aqui sobe e desce enquanto ele move isso. Podemos definir a altura mínima. Eu gosto de configurá-lo talvez para algo como 60 para que ele preencha toda a tela, mesmo que você tenha uma tela alta. Mas eu quero deixá-lo aos 60. Deixe-me atualizar isso. Vamos visualizar as alterações. Se eu rolar. Observe que parte da seção de heróis vai além do tamanho da nossa tela. E, claro, existem muitas configurações que você pode ajustar para ajustar a aparência da seção de heróis. Acabamos de tocar em alguns, mas você pode ir em frente e brincar com todas essas outras configurações para personalizar a seção de heróis e fazer com que pareça exatamente como você queria. Portanto, cabe a você entender como cada configuração afeta a seção de heróis. Como mencionei, se você quiser aprender a aprofundar todas essas configurações, você pode assistir a qualquer uma das minhas aulas onde eu mostro como criar uma landing page ou uma página da Web ou um site com Elementor do zero de uma ardósia em branco aqui. Lembre-se de que estamos apenas personalizando um modelo pré-fabricado para facilitar as coisas para nós. Agora terminamos de editar a seção de heróis. A próxima coisa que queremos fazer é editar essa área interna do corpo. E é isso que faremos na próxima lição. Vejo você em breve. 7. Personalizando a seção do corpo: Estamos de volta. Eu fui em frente e fiz algumas mudanças na seção de heróis. Eu mudei essa cor da fonte para branco. E isso também, e altere a sobreposição de fundo para preto apenas para melhorar a aparência geral da seção de heróis. Mas é claro, acredito que você já descobriu quais cores você quer usar e as aplicou em sua seção de heróis. Então, a próxima coisa que queremos fazer é pular diretamente dentro do nosso editor e dar uma olhada neles. Como você pode ver, temos duas linhas de produtos. E quando você clica no produto, isso leva você à descrição do produto ou a esse produto específico. Vamos pular dentro do nosso editor Elementor. Você notará que não temos nenhum produto aparecendo aqui. No entanto. Na página real. Os produtos estão aparecendo. O que está acontecendo. Estamos usando algo chamado código curto. O Wordpress usa códigos de acesso para extrair dados de diferentes partes do site. Então, se eu clicar nessa caixa, embora esteja vazia, ela realmente tem conteúdo. É apenas retirar esse conteúdo dinamicamente do WooCommerce armazenado que temos em nosso painel. Como clicamos nesse elemento específico, essa área mudou para editar o atalho porque é um código curto. Agora estamos editando o código curto. E aqui diz: Digite seu código curto. É assim que o código curto parece. Então, aqui está como ele vai. Depois de criar seus produtos usando o WooCommerce no back-end no painel. Woocommerce fornece uma maneira de exibir esses produtos em sua página. Se eu remover isso e deixar os produtos. É um código curto. É por isso que agora os produtos estão aparecendo aqui em nosso editor. E se eu atualizar essas alterações de visualização, os produtos estarão lá, é claro, Definitivamente. Mas agora a razão pela qual temos, temos esses detalhes extras aqui, porque o WooCommerce fornece coisas que chamamos de atributos. Essas são apenas maneiras de ser mais específico sobre o que você deseja exibir. Então, aqui o que estamos fazendo é basicamente se eu removê-los, estava dizendo à Elementor para exibir os produtos que criamos com WooCommerce com esse código curto. Isso é o que estamos dizendo. E então, adicionando esses atributos, queremos dizer mostrar oito produtos. Então esse é o limite com um sinal de igual. Em seguida, o número de produtos que você deseja mostrar. É por isso que estamos exibindo apenas oito. E o número de colunas é quatro. É por isso que temos quatro colunas é então deixe-me mudar isso para três colunas para que possamos ver o que acontece. Agora está mostrando três colunas. Isso significa que teremos uma linha extra com dois produtos aqui em baixo porque ainda temos produtos. Mas se guardarmos seis produtos como limite , teríamos duas linhas de três colunas. Assim, porque temos exatamente seis produtos. Deixe-me atualizar isso. Vamos visualizar as alterações. Rolando para baixo. Agora estamos mostrando três colunas de seis produtos. Podemos brincar com esses números como quisermos. Também podemos dizer, hey, podemos dizer apenas um produto e só exibirá um produto. Não se preocupe, mostrarei como criar produtos WooCommerce do zero no back-end, no painel em uma lição posterior. Então, agora, estamos apenas vendo como exibi-los. Você aprenderá a criar seus produtos. Porque, claro, você não pode construir seu negócio com esses produtos inventados aqui. Eu já tinha ido em frente e abri a documentação oficial do WooCommerce sobre códigos curtos. Então, aqui estamos nós. Como usar códigos de acesso. Você pode ir em frente e ler mais sobre como usar códigos de acesso do WooCommerce. Mas o que eu queria mostrar agora é essa parte aqui, o código curto dos produtos. O código curto dos produtos é um dos nossos códigos de acesso mais robustos dentro qual pode substituir várias outras strings usadas em versões anteriores do Google Commerce. Aqui estão os atributos de exibição. Horas falando sobre. Os limites mostram o número de produtos a serem exibidos, e é isso que temos aqui. Limite procura. Em seguida, vamos ver colunas, o número de colunas para exibir o padrão é quatro. Então, neste momento, estamos mostrando três colunas. E, como você pode ver, esses dois não são os únicos atributos que podemos usar para serem muito específicos sobre os produtos que queremos exibir em nossa página. Então, leve algum tempo e estude como usar esses atributos. Se você quiser ter mais controle sobre o que aparece na sua página. Mas isso é basicamente como fazer isso. Essa é a essência disso. A próxima coisa, é claro, é editar esses textos selecionando esses textos. Isso muda automaticamente para editar cabeçalho porque este é um cabeçalho. E somos capazes de mudar o que diz. Melhores produtos da cidade. E, claro, se quisermos que este seja um link, podemos adicionar o URL do link aqui. Então, vou adicionar um espaço reservado em vez disso. Se você quiser que o link seja aberto em uma nova guia, basta clicar nessa roda dentada e verificar abrir em nova guia. E agora, quando alguém passa o mouse sobre ele, ele muda para esse símbolo de link. Claro, se quisermos mudar a aparência, entramos no estilo e podemos fazer as mudanças aqui. Então, digamos que o mudemos para algo assim, alcance cor rosada e avermelhada. O mesmo se aplica a esse elemento. Selecionando-o. Podemos mudar o que diz no título e na descrição. Incrível. Você também pode ir em frente e mudar isso. Portanto, esse é o título e a descrição. E também podemos adicionar um link. Entrando no estilo, podemos mudar a aparência. Então, recolhendo essa imagem porque eles não têm uma imagem para isso, se adicionarmos uma imagem , será sobre esses produtos que não queremos fazer isso, mas podemos querer mudar a cor agora. Para o título. Pode mudá-lo talvez para alguma cor acinzentada em vez de preto escuro. Altere a tipografia se quisermos. Então eu poderia querer mudá-los para REO trocado, trocar cerca de dois meses. Agora está de volta para Montserrat. Atualize isso. Então, rolando para baixo. Primeiro de tudo, vamos salvar e visualizar as alterações. É assim que parece. A próxima coisa que queremos ver com facilidade, esta seção. Vamos rolar para baixo. A seção é dividida em duas colunas. Esta coluna com a imagem e esta coluna com o bloco de texto. E uma dica rápida que esqueci de mostrar é quando você passa o mouse sobre esses ícones de edição bem aqui nos cantos ou nas colunas. Ou mesmo este ícone aqui em cima. É suposto abrir algumas configurações extras sem clicar em qualquer lugar. Isso vem dentro. Uma maneira muito útil de trazer isso é entrar neste menu de hambúrguer, entrar nas preferências do usuário, e verificar as alças de edição. Agora, quando passarmos o mouse sobre isso, ele abrirá essas configurações extras ele abrirá essas configurações extras para ajudá-lo a fazer seu trabalho muito mais rápido. Agora, se quisermos duplicar uma coluna ou precisamos fazer é clicar nessa coluna em vez de clicar com o botão direito do mouse. Deixe-me, e entrando, duplicar. Deixe-me apenas remover isso. Atualize que, basicamente, editar esta seção ainda é o mesmo que estamos fazendo com esses blocos de textos aqui. Da seção de heróis descendo os textos, Ele ainda é o mesmo elemento. É um cabeçalho. Assim como esses cabeçalhos. Se você quiser replicar o que já fizemos para economizar tempo, podemos clicar com o botão direito do mouse em Copiar. Vá para o mesmo tipo de elemento que ainda é um Título. Clique com o botão direito e cole estilo. E ele copiará todos os estilos que aplicamos a outros elementos semelhantes neste novo, nesses outros elementos semelhantes. Porque isso é. 8. Personalize a seção CTA: Então, aqui estamos prestes a ver como criar um formulário no back-end usando formulários WP, perdendo qualquer tempo, vamos pular dentro do painel. E, claro, você notará que um dos recursos que temos aqui é o WP forms. Este é um dos plugins que foram instalados enquanto instalávamos os modelos pré-fabricados . Então, se eu clicar em formulários WP ou em todos os formulários, deixe-me clicar em formulários WP. Por padrão, temos esses dois formulários. Você notará que temos uma pequena coluna de código aqui, e cada formulário tem um código curto. Este é o código curto que representa esse formulário. Então, sempre que o código curto aparece em qualquer lugar no front-end, esse código curto está dizendo ao WordPress hey, display, o formulário de inscrição. O mesmo caso se aplica a este formulário aqui. Assim, podemos adicionar um novo formulário, será tomado pelo processo de adição de um novo formulário. Mas eu tenho um único problema com esse plugin de formulário específico. Ou seja, a maioria dos recursos que você precisará para poder se beneficiar de um plug-in estrangeiro, nosso prêmio, você tem que pagar pelo plugin para aproveitar esses recursos, mas vou mostrar-lhe um opção. Então, vamos sair daqui e quero mostrar o que exatamente eu quero dizer. Então, vamos editar o formulário de inscrição. Atualmente, este é o WP forms ideate Indo para o front-end e selecionando isso. Isso é exatamente esse formulário. É um formulário de inscrição. Tudo bem. Vamos para Editar. Posso mostrar exatamente o que quero dizer e depois dar-lhe uma solução. Este é o formulário que temos. Este é o campo que temos no formulário e insira seu endereço de e-mail e , em seguida, o botão de inscrição. Isso é exatamente o que temos aqui. O problema que eu estava falando E. Então, por exemplo, se você quiser ir ao marketing, só temos a opção de nos conectar, a ferramentas de marketing nessa área. E para usar esses outros, precisamos estar na versão paga deste plugin para conectar este formulário ao Mailchimp para que, quando as pessoas se inscreverem, elas sejam enviadas para nossa conta do Mailchimp, MailChimp lista de discussão. Precisamos estar na versão pro para poder aceitar pagamentos usando nosso formulário, precisamos atualizar para uma versão paga. Isso é o que eu quis dizer com a maioria dos recursos que você gostaria de ter para se beneficiar de um Plug-in de formulário. Nosso prêmio aqui. Há um plugin gratuito muito bom que tem todos esses recursos oferecidos gratuitamente. Então, o que precisamos fazer é entrar nos plugins, os plugins instalados removerão formulários WP, o ativá-lo. Então eu vou apenas excluí-lo. Tudo bem, então vamos para Adicionar novo. E agora dentro do repositório de plugins, vamos procurar formar a natureza tem mais de 200 mil instalações ativas e se desenvolvida por uma empresa WordPress muito renomada chamada WP e MU Dev. Gostei desses caras e gosto recomendar produtos que gostei de usar. Não tenho afiliação a esses caras. Eu só gosto dos produtos deles. Então, vamos instalar para mim a natureza agora . Vamos ativá-lo. Tudo bem, então agora nós o temos como um dos plugins instalados e rolando para baixo. Para mim, nenhum dos dois deve estar na parte inferior desta lista aqui. Então, vamos para dentro. Acabei de clicar para mim mais tarde. Este é o nosso painel. Deixe-me fechar este anúncio aqui porque não estamos procurando a versão premium dele. E, claro, aqui, aqui estará um resumo de todas as suas formas de menções, todo o número de envios que as pessoas concluíram nos fóruns que você tem em sua página puxa menções aumentar os envios porque temos, porque este plugin permite que você crie formulários, enquetes e questionários. Então, vamos criar um formulário e serão apresentados com esta lista de modelos pré-fabricados. O que precisamos é de uma inscrição no boletim informativo. Vamos continuar. Vamos dar um nome a ele. Formulário de inscrição e clique em Criar. Aqui estamos nós. Esses são os campos que estão disponíveis para nós. Primeironomeie um endereço de e-mail e, em seguida, temos o botão de inscrição e temos os campos de inserção. Aqui, se clicarmos nisso, podemos ter a opção de adicionar mais campos. E você notará que temos uma opção de stripe e uma opção PayPal aqui. Basicamente, podemos adicionar pagamento ao nosso fórum gratuitamente. Lembre-se, no outro plug-in, tivemos que ter a assinatura premium para poder ter o pagamento em nosso formulário. Este é apenas um exemplo do que é possível com este plugin. Mas não vou adicionar nenhum campo aqui. Porque o que estamos fazendo é um formulário de inscrição, não um pagamento para ele. Então eu quero remover o primeiro nome porque esse não é um campo que precisamos. Só precisamos de um endereço de e-mail. Então exclua isso. E agora vamos visualizar o formulário em si. Então é assim que parece. Endereço de e-mail, botão de inscrição. Vamos fechar isso e vamos publicá-lo. Agora que o formulário está pronto, recebemos o código curto para exibi-lo. Então, vamos em frente e copiar isso. Ele foi copiado com sucesso. Outra maneira de copiar esse código curto é ir, deixe-me fechar isso é ir até aqui para o nome do formulário. Clique nesta roda dentada e copie o código curto. E foi copiado com sucesso no front-end. Destaque isso. Remova os códigos de acesso do WP Forms e cole a nova formulação de um código curto de formulário. Imediatamente isso mudará para o novo formulário que criamos. Vamos atualizar isso e vamos visualizar as alterações. Rolando para baixo. Lá nós o temos. Forma agradável e simples criada com um bom e poderoso lugging. Lembre-se que mencionei alguns outros recursos quais você precisa pagar. Na outra forma, o plugin está se integrando a serviços de listas de discussão de terceiros, como o Mailchimp. Ou se você quiser fazer suas campanhas de marketing por meio uma lista de discussão para que esse formulário envie as pessoas que estão configurando suas listas de discussão em um serviço de terceiros, você precisa pagar por isso. Mas com o formulador, você não precisa. Agora que criamos este formulário, se entrarmos em integrações, você notará que pode enviar esses dados de formulários para qualquer dos aplicativos de terceiros conectados, conectar-se a mais aplicativos em a página de integrações. Então, por enquanto, não estamos conectados a nenhum aplicativo de terceiros. Mas se clicarmos na página de integrações ou ir diretamente para essas áreas de integrações porque é aí que seremos líderes. Agora é onde estamos. Formulado se integra com seus aplicativos de terceiros favoritos. Você pode conectar os aplicativos disponíveis por meio da API aqui e ativá-los para coletar dados na etapa de integração de seus telefones. Então, veja todas essas opções que temos aqui. Tivemos que pagar para poder conectar nosso formulário ao MailChimp no outro plug-in. Mas aqui, você pode ir em frente e conectar a API, e isso é tudo gratuito. Podemos nos conectar ao HubSpot, Slack, Trello, campanha ativa, Planilhas Google. Tudo isso é fornecido gratuitamente para nós. Podemos até nos conectar ao zap aqui gratuitamente. É por isso que eu amo por mim mais tarde. Eu uso esse plug-in para criar meus formulários em todos os sites que eu crio porque eles dizem que se estiver funcionando, ele não precisa ser consertado. Então, para mim, isso está funcionando. Não preciso procurar outros plugins estrangeiros, que precisaremos que eu tenha uma associação premium para acessar os serviços que são muito cruciais para qualquer forma. Então essa é apenas minha opinião sobre isso. Sinta-se à vontade para pagar por qualquer plug-in que você acha que tem tudo o que você precisa. Mas se você está procurando algo que seja gratuito, mas poderoso, este é o caminho a percorrer. Se você quiser aprender mais sobre formação e quão benéfico será para você, especialmente como iniciante. Vá em frente e procure um belo tutorial no YouTube. Eu recomendo que você vá para o WP MU Dev Channel, o WPA MU dev, os desenvolvedores do plugin. Então eu recomendo que você vá lá e procure formulado. Por enquanto. É assim que criar um formulário e exibi-lo na seção de call to action em sua landing page. Na próxima lição, vamos ver como editar o rodapé. Vejo você em breve. 9. Personalize o Rodapé: Bem-vindo de volta. Então agora é hora de personalizar o rodapé. A personalização do rodapé acontecerá dentro da área Personalizar de nossas configurações porque o rodapé é criado usando as configurações do Astra, não o construtor Elementor. Esse é o mesmo caso com o cabeçalho. Lembre-se de que usamos a área Personalizar para personalizar nosso cabeçalho porque ele foi criado usando as configurações de asterisco. Indo para dentro personalize, rolando para baixo até o rodapé. Você notará que um dos itens do menu aqui é para o construtor. Então, vamos seguir em frente e clicar nisso. Isso imediatamente traz uma representação do rodapé. Então você notará que temos esse widget aqui. Esse é esse widget, o widget do logotipo, esse é este aqui. E esses links rápidos widget, então temos os ícones sociais aqui e, em seguida, a área de direitos autorais. Então, antes de tudo, digamos que você não precisa dos ícones das mídias sociais. Na parte inferior aqui, você nem precisa deles em sua foto. Você pode simplesmente ir em frente e removê-los. E agora ficamos com duas colunas. E queremos ter apenas uma coluna e tê-las no meio. Podemos ir em frente e clicar nesta roda dentada. Em seguida, escolha uma coluna. Clicando em copyright. Pode ir em frente e selecionar o alinhamento lá, centro, e isso empurra tudo para o meio. Vamos publicar isso. Gostei do jeito que parece. E, claro, enquanto ainda estávamos editando os textos de direitos autorais, é claro que podemos mudar isso para me deixar arrastar isso. Você pode basicamente digitar o que quiser se não quiser usar um código curto. Então, se eu, por exemplo, gato que você pode dizer copyright, tente precisar de 25. Isso é o que aparecerá. Ou se você quiser usar os códigos curtos. Isso será automaticamente puxando o ano para você sem que você precise necessariamente alterá-lo manualmente. E também está puxando o título do site automaticamente dos arquivos do sistema. Portanto, caso você altere o nome do seu site no painel, o nome do site na foto mudará automaticamente, você não precise fazer isso manualmente ou sozinho. Mas se você não se importa de fazer isso sozinho, você sempre pode vir aqui e removê-los e apenas digitar meu website.com. E essa não é a ortografia do site. Tudo bem, então é isso. E, claro, agora para editar qualquer widget aqui, você só precisa clicar no widget em si e suas configurações aparecerão. Bem-vindo a isso. Tudo bem, vigiado. Podemos ir em frente e alterar esses detalhes. E as opções de menu de seleção aqui são esse menu específico que você deseja extrair da sua lista de menus. Então, voltando para dentro do painel, menus de aparência. Na área de menus do nosso painel, temos uma lista de menus e você notará que temos contato, menu primário e menu de link rápido. Esses são os três menus que temos no momento. E podemos criar um novo menu. Mas antes de fazermos isso, se voltarmos aqui, você notará que isso tem os mesmos itens, contato, menu principal e link rápido. Este aqui é o menu Links rápidos. Este é o Menu Contato. E aqui em cima temos o menu principal. Porque esses são os três menus que temos. Digamos que quiséssemos exibir um menu diferente aqui. Tudo o que precisamos fazer é criar um novo menu. Vamos dar um nome a ele. Menu de rodapé. Vamos torná-lo um menu secundário. Vamos fazer dele um menu de rodapé. Vamos criar um menu. Agora temos isso como um menu. E o que precisamos fazer é adicionar itens de menu da coluna à esquerda. Aqui podemos adicionar todos os itens que quisermos a essa coluna. Então, digamos que queremos adicionar um link para o carrinho, um link para minha conta e um link para a loja. Vamos adicioná-los ao menu. E agora temos esses três itens de menu. Vamos salvar o menu. O menu do rodapé foi atualizado dentro desta área. Primeiro de tudo, vamos publicar as alterações que fizemos antes de atualizarmos a página. Agora está publicado. Deixe-me atualizar esta página. Vamos rolar para baixo. Agora, entrando no construtor de rodapé. Lembre-se de que temos esse widget aqui. Então, clicando nisso, se eu clicar nele e selecionar menu, agora temos o menu de rodapé, pois é uma das opções. Então, clique em Menu de rodapé. Agora isso muda para os novos itens que acabamos de criar. E é claro que podemos mudar o título desses dois, algo como um menu especial. É isso. Então publicou essa substituição. Então você pode fazer o mesmo com este menu. Quando se trata do logotipo, podemos clicar nessa roda dentada lá ou apenas clicar neste item Editar que aparece aqui. Pode ir em frente e mudar, substituir esta imagem. Rolando para baixo para procurar o logotipo. Adicione dois widgets e o logotipo mudará para o logotipo que ele adicionou. E se você quiser que esse logotipo leve a algum lugar quando alguém clicar nele, você sempre pode adicionar um link aqui. Mas vou colocar um espaço reservado ali e publicar isso. É assim que editar o rodapé da landing page e essencialmente o rodapé de todo o site. Agora acho que acabamos com a landing page. A próxima coisa que eu queria mostrar a vocês é agora que vimos como exibir os produtos. Como criamos um produto usando o WooCommerce no back-end. Vamos ver como fazer isso na próxima lição. 10. Crie um novo produto com o Plugin de WooCommerce: Bem-vindo de volta. Agora, ele começou a criar um produto ou alguns produtos usando o plugin WooCommerce. Então, estamos aqui dentro do painel porque já instalamos o WooCommerce enquanto instalávamos o modelo pré-fabricado. Nós o temos aqui. Abaixo do WooCommerce, temos produtos. Isso faz parte do plugin WooCommerce. Vamos clicar em produtos. Portanto, esses são os produtos que temos atualmente. Esses são, é claro, os espaços reservados que acompanharam o modelo pré-fabricado. O que queremos fazer é adicionar um novo produto. Então clique em Adicionar novo. E vamos dar um nome ao nosso produto. Produtos, produto um. Vamos dar uma descrição. Deixe-me pegar uma descrição muito rapidamente de um desses produtos, Lorem Ipsum. Portanto, observe que a opção de pagamento do PayPal está aparecendo aqui porque já resolvemos a integração do PayPal WooCommerce. Vamos colar essa descrição lá. Agora, esta descrição aqui é o que aparece aqui em baixo. Então esta descrição é o que precisamos colar aqui. Então deixe-me adicionar uma palavra, resumo para que possamos distingui-los quando tivermos nosso produto pronto. Então, muito rapidamente, antes de fazermos outras alterações, quero publicar isso. O que queríamos fazer a seguir é adicionar uma imagem do produto. Vou fazer upload de arquivos, selecionar arquivos. Entre na minha página de downloads. Eu baixei dois produtos que podemos usar como produtos de amostra. Então, aqui estamos nós. Deixe-me mudar esse nome por um segundo. Nome1, nome2. Deixe-me fazer upload desses dois produtos. Certo, então agora que temos essa imagem selecionada, vou em frente e adicionarei à galeria. Agora nossa imagem do produto está definida. Vamos dizer Atualizar. Vamos visualizar as alterações. Espere, onde está a imagem do nosso produto? Fora? Dissemos que a galeria de produtos, que deveria definir a imagem do produto. Portanto, esta galeria é apenas para o caso de você ter imagens diferentes do mesmo produto. Talvez se você tirou fotos do mesmo produto de ângulos diferentes e quiser poder mostrar todos esses ângulos diferentes. Você pode adicionar quantas imagens quiser, a galeria. Mas queremos definir a imagem do produto, certo? Então vou em frente e escolherei isso rapidamente. Lá nós o temos. Então, vamos atualizar isso. E, em seguida, vamos visualizar as alterações. Existem nossos produtos. Lembre-se, este resumo aqui é o que adicionamos aqui, descrição curta do produto e, em seguida, a descrição completa do produto sobe aqui logo abaixo do nome do produto. Isso é o que aparece aqui em baixo. Então eles deixaram muito espaço aqui, para que você possa adicionar quantas informações quiser, mesmo que isso signifique cinco parágrafos descrevendo o que é o produto. Porque adicionamos uma galeria de imagens e só temos uma imagem na galeria. Só está mostrando essa imagem, mas vamos supor, por exemplo. Essa também é uma das imagens na galeria. Adicione-o à galeria. Agora temos duas imagens de galeria de produtos. Atualize isso. Vamos visualizar as alterações. Certo? Então, lá estamos nós. Podemos ir, podemos percorrer as imagens como quisermos. E também podemos visualizar uma versão isolada da imagem. Deixe-me fechar essa parte. E agora observe que não temos preços ou opções de pagamento aqui. E isso é porque essa é a próxima coisa que precisamos fazer. Voltando para dentro do nosso painel. Primeiro de tudo, não podemos ter nosso produto na categoria sem categoria. Então, vamos dar uma categoria. Digamos que, por exemplo, coma um creme facial. Vamos dar um preço. O preço regular é talvez 249, mas agora temos um preço especial com desconto. Digamos que ele agora é 130. Claro que não é um produto virtual e não pode ser baixado. Inventário. Claro que o produto está em estoque. Envio. Você pode ir em frente e definir suas dimensões de peso. Produtos vinculados. Então, caso tenhamos outros produtos que queremos exibir aqui, podemos ir em frente e adicioná-los. Por exemplo, deixe-me ir até a página da loja. E se tivermos produtos relacionados a isso, eles aparecerão quando esse produto estiver em exibição. Por exemplo, óleo corporal de cacau e hidratante diário como exemplo. Então, vou digitar cacau e vendas diárias de aplicativos. Então o cacau está procurando. Digamos que queremos fazer um hidratante diário de venda cruzada. Deixe-me salvar isso por um segundo para que possamos ver o que realmente está acontecendo no front-end. Tudo bem, então vamos visualizar as alterações. Agora temos preços. Com um desconto. Temos uma opção de adicionar ao carrinho. Também podemos escolher a quantidade desses produtos que queremos. Digamos que queremos unidades ou esses produtos. Agora, você também pode gostar do óleo corporal de cacau. Esta é uma venda de aplicativos ou produtos relacionados, que não é necessariamente o mesmo que esses produtos aqui. Podemos vender isso. Outra coisa que precisamos fazer é remover. Como você percebe agora, temos na galeria, temos essa imagem repetida. Então, como já é uma imagem em destaque, podemos ir em frente e removê-la para que ela não seja repetida porque a imagem do produto em si estará na galeria. Então, se eu atualizar isso, depois de ter removido essas imagens repetidas aqui, visualizando as alterações. Agora temos apenas uma instância dessa imagem e você pode adicionar quantas outras variações quiser. Basicamente, é assim que criar um produto. Então, isso marca o fim da lição. Aprendemos a criar um produto usando o WooCommerce. Nas próximas lições, basicamente usaremos o Elementor para editar essas páginas porque elas são criadas usando o Elementor. Então, vejo você na próxima lição. 11. Ajude-me a ensinar o elemento com 10.000 alunos: Olá meu amigo. Em primeiro lugar, eu só quero agradecer muito por se juntar mim nesta aula e escolher aprender comigo. E também quero dar os parabéns por ter chegado tão longe na aula. O fato de você ter chegado tão longe na classe significa que você está ganhando valor com a classe. E então eu realmente aprecio você e espero que você esteja gostando da aula em si. Dito isso, preciso da sua ajuda. Tenho a missão de ensinar pelo menos 10 mil empreendedores como você a usar o elementary para criar seus próprios sites ou páginas de destino para vender seus produtos. E aqui está como você pode ajudar. Você vê quando um novo aluno entra em uma aula no Skillshare e depois gosta dessa aula e deixa um comentário. Isso ajuda outros alunos saberem o que esperar da turma. E quando uma turma está recebendo muitas avaliações dos alunos, Skillshare diz: “ Ei, você sabe o que? Esta turma está recebendo muito engajamento e muitas avaliações dos alunos. Portanto, deve ser útil. Portanto, deve ser útil. Então, vamos empurrá-lo para cima na biblioteca para torná-lo mais fácil de ser descoberto por novos alunos. Portanto, o algoritmo Skillshare impulsiona essa classe para cima e a torna mais visível, mais detectável para novos alunos. Porque tem recebido críticas positivas. E é aí que você entra. Junte-se a mim nesta missão e me ajudou a ensinar pelo menos 10 mil alunos como usar o Elementor, como construir belas páginas de destino, sites funcionais deixando uma avaliação nesta aula e informando o que esperar dessa aula. Só vai levar cerca de dois minutos e você está pronto. Mas sua avaliação ajudará muito os novos alunos, futuros alunos, a saberem o que esperar da turma. aulas atendem às suas expectativas. Isso superou suas expectativas? Se você tiver alguma dúvida, lembre-se, você sempre pode colocá-la na área de discussão abaixo deste vídeo e eu poderei ajudá-lo. Eu sempre respondo a todas as perguntas ou comentários que os alunos deixam em qualquer uma das minhas aulas. E com isso dito, eu só quero dizer que aproveite a aula e nos vemos na próxima aula. Paz. 12. A página de loja: Bem-vindo de volta. Nesta lição, quero falar sobre a página da loja. Todos os nossos produtos são exibidos aqui para o cliente. Então, precisamos ter uma pequena conversa sobre a página. Agora mesmo. Estamos analisando a classificação padrão, mas temos um menu suspenso que tem algumas opções. Começando de classificar por popularidade. Quantas vezes o produto foi comprado do mais popular para o menos popular. Então, o próximo é classificar por classificação média. Então, é claro, o produto mais bem avaliado virá em primeiro lugar. Em seguida, classificamos por último, e esses são os produtos mais recentes que você adicionou. E, claro, como você pode ver, os dois produtos que acabamos criar apareceram primeiro antes do resto. E você notará que nós criamos isso primeiro e, em seguida, este foi o último que criamos. E é por isso que ele está aparecendo como o último, como o primeiro produto. Nós classificamos por preço de alto, de baixo para alto e de alto para baixo. Claro, isso é autoexplicativo. Então, isso é tudo sobre a página da loja. Claro, não há muito mais a dizer sobre a página. A próxima coisa que queremos fazer é olhar para essas três páginas. E essas páginas são criadas usando o Elementor. Então, precisaremos editá-los com o Elementor. Vamos ver como fazer isso na próxima lição. 13. A página de depoimentos: Vamos agora ver essas páginas do Elementor. Claro, aqui estamos nós. Então esta é a página de depoimentos. Então você notará que , como o abrimos, agora temos a opção de editar com o Elementor. Então, antes de tudo, vamos rolar baixo até o fundo, e é assim que parece. Então você notará aqui que tínhamos um formulário de inscrição de call to action porque nos livramos do outro plug-in. Agora não está aparecendo. Isso significa que precisamos substituir isso pelo formulário formulador que criamos. Vamos clicar em editar com o Elementor. Aqui estamos nós. Então, é claro que isso é como a seção de heróis que editamos na landing page. Se você selecionar esta seção, teremos as mesmas configurações. Podemos aumentar a altura, deixá-la no tamanho padrão. Podemos selecionar esses depoimentos. Este é um título, então é claro que podemos adicionar um link se quisermos liderar em qualquer outro lugar, mas não acho que gostaríamos que ele levasse a qualquer outro lugar porque já estamos aqui na página de depoimentos. E é claro que podemos mudar o que diz. Bem-vindo. Podemos mudar a cor. Basicamente, tudo o que fizemos na seção de heróis e na landing page, podemos fazer aqui. Então lembre-se que este é um depoimento e já vimos como editar um depoimento. Ao selecionar isso, apresentamos as configurações de depoimentos e podemos adicionar um título ao depoimento. Então, essa pessoa está no departamento de marketing. Não é assim que escrever isso, mas não há problema. Podemos adicionar um link. Podemos abri-lo em uma nova guia. Ele diz abrir em uma nova janela, mas isso realmente significa abrir uma nova guia dentro do mesmo navegador. Portanto, não se preocupe com isso. E, claro, entrando no estilo, podemos mudar todos os aspectos dos elementos depoimentos, como o título. Podemos mudar a cor do texto talvez para algo como nicho, cor esverdeada. Estamos apenas brincando com as configurações. Não estamos tentando tornar esses sites incríveis, mas é claro que conto com você para aplicar sua criatividade e tornar seu site o mais atraente possível. Lembre-se, sempre podemos alterar essa sobreposição de fundo, selecionando a seção dentro da sobreposição de fundo, alterá-la para a cor preta. Existem várias outras configurações aqui que você pode experimentar. A semente, a melhor coisa que você pode obter. E é claro que esqueci de mencionar que você sempre pode mudar o plano de fundo como fizemos com a seção de heróis. Eu não tenho uma imagem que eu possa usar aqui, mas é claro, você sabe, você sempre pode ter, é claro, você sabe, você sempre pode usar qualquer imagem que temos. Assim agora. Parece muito melhor. Na verdade. Atualize isso. Vamos visualizar as alterações. É assim que essa página parece cheirar. Vá em frente e agora que você já sabe brincar com o elemento depoimentos. Se você puder ir em frente e fazer as alterações necessárias. Então, todos os seus depoimentos. Então aqui, é claro, o que precisamos fazer é selecionar esse código curto. Agora que está aparecendo, vamos excluir isso. Vamos voltar para dentro da nossa formulação dos formulários. Lembre-se de que criamos o formulário de inscrição. Então clique nesta roda dentada e copie o atalho. O atalho foi copiado com sucesso. Vamos voltar aqui. E vamos colá-lo aqui. Agora está aparecendo. Vamos atualizar isso. Vamos visualizar as alterações. Role para baixo. Agora nosso formulário de inscrição está aparecendo, é visível. Agora você pode estar se perguntando e se eu quisesse mudar a cor desse botão? Isso é algo que esqueci de mencionar quando estávamos criando o formulário em si. Então, voltando para dentro do nosso painel, formulário de inscrição, Vamos editar. Embora o criaremos neste formulário, usamos apenas a guia Campos. Existem várias outras guias abaixo aqui. E essas são as guias pelas quais temos que passar sempre que estamos criando qualquer forma até o fim. E você notará que esses campos, depois Aparência, então o comportamento é a mesma coisa que seguiremos aqui. Assim que terminarmos de criar o formulário, adicionar os campos, a próxima coisa a fazer é mudar a aparência. Então, quando você clica nisso, agora estamos na guia Aparência. E aqui podemos dizer, por exemplo, queremos que seja plano sem as fronteiras. Se formos às cores, podemos escolher o traje, e isso traz mais opções. Uma das opções aqui é o botão Enviar. Aqui podemos mudar a cor para talvez algum tipo de leitura, por exemplo. Mas, claro, sinta-se à vontade para escolher qualquer outra cor que você quiser. Isso é definido para isso. Vamos visualizá-lo antes de salvar. Tudo bem. Vamos atualizar isso. Você também pode alterar os efeitos de passar o mouse. Então, no botão enviar e o botão de envio de cores passar o mouse. Queremos que seja talvez preto. Em foco. Também queremos que seja preto. Atualize isso. Depois de atualizarmos as alterações, podemos entrar aqui e recarregar esta página. Agora, quando passamos o mouse, é preto. É assim que fazer alterações na aparência de todos os seus formulários em formulados. Isso é tudo sobre essa página de depoimentos. E, claro, se abrirmos a página sobre, é praticamente a mesma coisa. Usando elementar, você pode repetir as mesmas etapas com usadas até agora, você deve ter aprendido a brincar com todos esses elementos. Já vimos como trabalhar com todos esses elementos diferentes na landing page. Então, vamos entrar na página de contato. Dentro da página de contato, devemos ter um formulário de formulários WP. Lembre-se de que tínhamos dois formulários antes de excluir esse plugin. E o outro acima de tudo, um formulário de contato. Agora que não temos mais esse plug-in, o que precisamos fazer é entrar nos formulários do terminador. Eu rosa, devemos fazer isso na próxima lição. Então, vejo você em breve. 14. Página “Entre em contato conosco”: Bem-vindo de volta. Então, aqui estamos dentro dos formuladores formuladores estavam no campo dos fóruns. Estamos analisando a lista dos formulários que adicionamos até agora, só temos um. Então, se você tiver dez formulários que você criou com o formulador, serão listados aqui. O que queremos fazer é criar um novo formulário para nossa página de contato. Vamos lá. Deixe-me fechar isso. Quando a página de contato e queremos criar um formulário para substituir a largura desses formulários WP. Então, vamos em frente e clique em Criar. E agora, desta vez, queremos criar um formulário Fale conosco. Então, selecione isso e continue. Formulário de contato, digamos Criar. Por padrão, ele já está pré-preenchido com os campos que precisaremos. Então, por enquanto, eu não acho que precisamos de telefone, mas se você fizer isso, você sempre pode deixá-lo lá. Então, vou remover isso. Excluir. Lembre-se de que se você excluir qualquer campo e mudar de ideia, sempre poderá inseri-lo do campo inserido. Deixe-me fechar isso. Então, aqui estamos nós. Você iniciou o número de telefone do campo. Aqui está o número de telefone. Você sempre pode adicioná-lo de volta, insira. Por padrão, ele exibe as configurações do telefone, um campo que acabamos de adicionar. O que vou fechar isso. E aqui está um telefone que você pode arrastar e colocá-lo onde estava. Você também pode tê-los lado a lado. Quando essa linha azul aparece no lado direito, ou em qualquer lugar que você passe o mouse. Você pode colocar qualquer campo em qualquer lugar que quiser. Se você não quiser usar isso, você também pode usar essa opção em determinados campos. Ervas daninhas o mesmo, mas eu quero me livrar do número de telefone como eu já tinha feito. Agora temos o endereço de e-mail, primeiro nome, então vamos trocá-los assim. E depois a área de texto do campo de mensagem. Vamos visualizar isso antes de publicá-lo. É assim que parece. Se os tivermos empilhados um sobre o outro. Vamos visualizar isso. É assim que parece. Agora que gostaríamos de como parece, vamos publicá-lo. Agora está publicado. Vamos escolher o formulário do formulador código curto, copiado com sucesso. Vai dizer aquela página de contato e editar com o Elementor porque ainda não tínhamos clicado nisso. Edite com Elementor. Certo, então vamos rolar para baixo. Este ponto. Vamos excluir esse código curto lá e colar meu novo atalho que acabamos de criar. Aqui estamos um formulário de inscrição muito bonito. Vamos atualizar as alterações e visualizar a página. Rolando para baixo. É assim que nosso formulário de contato se parece. Voltando aqui. Deixe-me fechar isso e podemos ir para a guia Aparência. Faça-o plano. Você pode alterar a cor do botão de envio para esse vermelho. Ao passar o mouse. Vamos torná-lo preto, sem foco. Vamos também torná-lo preto. Vamos atualizar isso. Vamos visualizar as alterações novamente. Rolando para baixo. Lá vamos nós. Aqui também temos um mapa e podemos aumentar e diminuir o zoom. Apenas no caso de termos um local físico para o qual queremos direcionar as pessoas. E a maneira de fazer isso é vamos rolar para baixo aqui, selecionando esses elementos que estão segurando o mapa. Vamos selecionar esse elemento. Basta clicar com o botão direito aqui e editar Google Maps. Agora, tudo o que você precisa fazer é fornecer um local fazendo uma pesquisa rápida no Google do seu lugar. Em seguida, você pode definir o nível de zoom padrão. E essas outras partes são simples e fáceis de editar para você. Vou em frente e clique em Atualizar. Este é um elemento de mídia social. Quando clicamos nele para editá-lo, é bem simples. Você pode remover qualquer coisa que não quiser. Você pode entrar na guia estilo para editar as cores. Se você quiser que eles o façam. É uma espécie de laranja. Lá nós o temos. Também pode optar por ter suas cores oficiais. Então, se for Facebook, Instagram e Twitter. Mas vamos com a fantasia. Veja o que você pode fazer com todas essas configurações. Você também pode alterar a cor do mouse. Então, agora, quando você passa o mouse, é preto, cor secundária. Vamos ver o que acontece com o vermelho? Essa é uma cor de fundo. Então, vamos clicar nestes dois limpar. Então vamos mudar esses dois, talvez um vermelho. E agora o único ícone mudará a cor para ler. Escreva, atualize isso. Vamos visualizar as alterações. Rolando para baixo. Nossa página de contato. Agora concluído. Cada parte do nosso site agora está completa e personalizada ao nosso gosto. Curso. Reserve algum tempo para fazer tudo o que personalizar seu site até ficar estiver ao seu alcance para personalizar seu site até ficar satisfeito com a aparência dele. 15. Considerações finais: Isso marca o fim da nossa classe. Eu realmente espero que você tenha aprendido algo sobre como criar sites usando o WordPress e, mais especificamente, tenha aprendido a construir uma loja de comércio eletrônico ou comprar com o WordPress. Agora, a próxima coisa que eu recomendo que você aprenda é SEO, otimização de mecanismos de busca. E é basicamente assim que tornar seu site visível para os motores de busca e visível para os usuários pretendidos. Quando as pessoas vão para mecanismos de busca como Google para pesquisar os produtos que você está vendendo. Você adoraria que seu site estivesse entre os primeiros resultados nas páginas de resultados. Então, como você se torna visível para o mecanismo de pesquisa para que ele mostre seu site quando as pessoas pesquisam os produtos que você está vendendo. Já publiquei uma aula sobre otimização de mecanismos de pesquisa, especificamente para o WordPress usa como otimizar seu site WordPress para torná-lo mais visível para os mecanismos de busca. Vá em frente e abra meu perfil no Skillshare. Uma das classes lá é o WordPress SEO simplificado. Veja que ele dura apenas 16 minutos e saiba como tornar seu site visível. Saiba como otimizar seu site para mecanismos de pesquisa. Caso contrário, foi um prazer ensiná-lo a construir uma loja de comércio eletrônico com o WordPress. E espero vê-lo na próxima aula no futuro. Meu nome é Ken Visa. Vejo você na próxima peça.