Crie um site de downloads digitais com o Elementor (plugins gratuitos)

1. Introdução: Bem-vindo de volta a outra aula incrível comigo, Can Besser. É sempre um prazer tê-lo aqui. Se você está assistindo meus óculos, então você sabe, eu gosto de ensinar as pessoas a projetar páginas de destino incríveis com Elementor e WordPress. Agora, nesta aula, vou ensiná-lo a projetar um site de downloads digitais onde você pode vender seus produtos digitais. Por produtos digitais, quero dizer coisas como modelos de logotipo, sua música, se você vende instrumentais, se você é um produtor musical, ou se você projeta modelos de interface do usuário usando Figma e Sketch, e você quer ser capaz de venda-os em seu próprio site. Se você já visitou um mercado como graphic river, free peak ou Creative Market, então, você sabe, uma espécie de negócio de downloads digitais. Estou falando de uma plataforma onde um visitante pode vir e explorar sua biblioteca de produtos digitais em sua loja digital. Selecione um produto digital para ver mais detalhes e, em seguida, faça o download desse produto digital. Esse é o tipo de negócio que estou falando. Se você está no setor criativo e seu trabalho envolve a criação de conteúdo digital. Por exemplo, fontes, modelos de design gráfico, como folhetos e modelos de logotipo, modelo UI UX, como modelos de figma ou esboço. Nesta aula, você aprenderá como configurar uma plataforma para a qual você pode vender esses modelos. Ao contrário de minhas outras classes elementares onde me concentrei principalmente em como usar o Elementor para criar uma única landing page sem entrar em detalhes sobre como um site funciona. Nesta classe, criaremos um site de várias páginas completo que está funcionando e tem o potencial de começar a ganhar nova renda passiva mesmo enquanto você estiver dormindo. Isso se você estiver disposto a se comprometer com isso. Então, se você está sonhando em possuir uma plataforma online onde as pessoas podem vir e baixar produtos digitais, onde você pode fazer o upload dos modelos para criar. Então este é o sistema que vamos aprender. Então, espero que esteja tão animado quanto eu. Quero mostrar o que estaremos construindo e depois não começamos, então siga-me. E lá temos isso. Agora que tivemos uma visão geral do site de downloads digitais será criado. E porque essa classe foi projetada para acomodar pessoas em todos os níveis de experiência no WordPress, incluindo iniciantes. Começaremos analisando o que é um CMS sem perder mais tempo. Vamos começar. 2. O que é um CMS: Um sistema de gerenciamento de conteúdo, ou um CMS, é um aplicativo que permite criar, publicar e modificar conteúdo digital. Com um CMS, você pode criar um site totalmente funcional em minutos e começar imediatamente a vender produtos e serviços para clientes on-line. Para usar um CMS, você não precisa saber codificar porque o aplicativo fornece ferramentas para manipular seu conteúdo visualmente. Se você souber como apontar e clicar em ícones em uma tela de computador, você pode usar um CMS. Qualquer pessoa pode usar um CMS. Então, vamos dar uma olhada em alguns dos exemplos do CMS mais popular em breve. Mas como funciona um CMS? Para entender como um CMS funciona, temos que vê-lo como duas partes que trabalham juntas para produzir uma experiência deliciosa para o usuário. E essas duas partes incluem um aplicativo de gerenciamento de conteúdo ou um CMA, que é basicamente a interface gráfica de usuário front-end ou frontal com a qual você interage criar e edite o conteúdo do seu site. Isso é representado por um painel que fornece várias ferramentas e utilitários que você pode selecionar e fazer coisas diferentes em seu conteúdo. A outra parte é o aplicativo de entrega de conteúdo ou o C, D, a. Este é o lado back-end do CMS, que é responsável pela entrega do conteúdo você criou com um CMA para o seu site visitantes. Para ilustrar como esses dois componentes se relacionam. Vamos pensar em um CMS como um restaurante por um momento. Se um CMS é um restaurante, o CMA é como a cozinha. Ele fornece a cozinha onde necessário para cozinhar a comida que os clientes serão servidos. Ou seja, em um CMS, o CMA é a parte que lhe dá as ferramentas para criar uma publicação, o conteúdo digital que será servido aos visitantes, como artigos de postagem de blog, produtos exibido em seu site quando você está criando-os. É o CMA que fornece as ferramentas para criar essas peças. Por outro lado, enquanto ainda está no exemplo do restaurante, o CDA é como o garçom um restaurante que recebe pedidos de refeições, vai à cozinha para pegar a comida e serve aos clientes. Então, voltando ao nosso site, ou seja, que o CDA é a parte do CMS que serve as páginas solicitadas pelos visitantes do seu site. Então, quando eles solicitam a página inicial, eles clicam em um botão que deveria ser redirecionado para outra parte do site. É o CDA responsável por entregar a página que eles solicitaram. Existem duas maneiras pelas quais você pode usar um CMS, e isso é determinado pela forma como o CMS é instalado. Você pode usar um CMS como um CMS local ou um CMS baseado em nuvem. Se você baixar e instalar o CMS em um servidor fornecido por um host da Web ou em um servidor criado localmente em sua máquina. O CMS diz ser uma instalação no local. Porque ele está instalado em um servidor sobre o qual você tem controle. Você pode fazer alterações diretas no núcleo do aplicativo para atender às necessidades específicas do projeto do site. Por exemplo, você pode acessar e editar o código-fonte do WordPress para personalizar como você constrói seu site. Quanto ao baseado em nuvem, o CMS, um vendedor do serviço CMS, fornece um ambiente hospedado na nuvem no qual você pode criar e gerenciar seu site. Por exemplo, pense em semanas. Eles fornecem um ambiente no qual você pode criar um site, mas gerenciam a plataforma de semanas principais que está alimentando seu site. Com esse tipo de instalação, você não tem a liberdade de editar o CMS em si. O núcleo. Por exemplo, você pode criar um site em semanas, mas não pode editar o núcleo da plataforma de semanas em si porque apenas a equipe de desenvolvedores de semanas internas tem acesso ao código-fonte. Você e outros usuários podem usar as ferramentas fornecidas na plataforma WIX para criar sites. Mas a equipe da semana cuida das funcionalidades traseiras e traseiras para você. Exemplos tão populares de CMS locais incluem Drupal, Joomla e o WordPress, wordpress.org. Alguns exemplos comuns de instalações CMS baseadas em nuvem incluem semanas, Shopify e a plataforma WordPress.com. Embora cada CMS seja exclusivo até certo ponto, quase todos os CMS compartilham certos recursos cruciais. Vamos dar uma olhada em alguns deles. Número 1, um CMS fornece as ferramentas para publicar diferentes tipos de conteúdo digital. Muitas pessoas optam por usar um CMS porque ele permite que eles montem conteúdo com alguns cliques e publique-os como postagens de blog ou produtos em tempo real sem a necessidade de codificar. Número 2. Um CMS fornece maneiras de revisar seu conteúdo publicado. Como proprietário de um site, você sempre desejará editar ou atualizar algum conteúdo que você já publicou. Um CMS confiável deve permitir que você faça alterações conforme quiser e também acompanhar essas alterações para que você possa reverter para versões anteriores do seu trabalho, caso você cometa erros enquanto você está editando. Um CMS fornece uma maneira fácil de indexar, pesquisar e recuperar conteúdo. Isso simplesmente significa que um CMS deve permitir você ou seus usuários acessem o conteúdo em seu site facilmente através da pesquisa, fornecendo uma maneira agrupar conteúdo por categorias ou agrupamentos predefinidos. Por exemplo, modelos de folhetos, modelos de revistas. Quando um usuário digita modelos de revista, ele deve ser capaz de obter uma lista ou uma galeria de resultados relacionados à revista na tela. Isso é o que queremos dizer com indexação, busca e recuperação de conteúdo. Então, agora que você entende o que é um sistema de gerenciamento de conteúdo, vamos dar uma olhada no sistema de gerenciamento de conteúdo mais famoso e popular do mundo , WordPress. Vamos fazer isso na próxima lição. 3. Introdução do Wordpress online: O primeiro passo na configuração um ambiente de desenvolvimento WordPress online é obter uma hospedagem na web confiável. Um host da web basicamente armazena seu site em um computador conectado à Internet 24, 7, 365 dias por ano. Isso garante que suas páginas da Web estejam disponíveis para os visitantes quando eles as solicitam enquanto navegam em seu site. Então, vamos escolher um bom site para o seu negócio. Tendo projetado sites WordPress há anos, me deparei muitos hosts da web e alguns dos fatores cruciais que aprendi a considerar ao procurar um bom host da web incluem, existem serviços de hospedagem eram amigáveis à imprensa porque existem hosts da web por aí que oferecem serviços específicos do WordPress. Quais tecnologias de segurança eles usam para manter seu site seguro? Eles fornecem um suporte técnico confiável 24, 7? Eles oferecerão velocidades de carregamento rápidas para o seu site? Esses são alguns dos poucos, como você precisa considerar ao procurar um host da web. E com esses fatores em mente, alguns dos hosts da Web WordPress mais populares que são conhecidos por seus excelentes serviços amigáveis para WordPress consistentemente incluem hospedagem TMD, site ground , anfitrião de sonhos, bluehost. Essas empresas fornecem serviços específicos do WordPress como parte de suas ofertas de produtos. E estes são apenas quatro dos mais famosos hosts web amigáveis do WordPress no mercado. Você pode obter bons hosts da web para seu negócio de downloads digitais em seu próprio país. Mas no caso de você querer economizar tempo e dor de ter que fazer o Google em todos os lugares para obter os melhores serviços de hospedagem na web que os quatro que já mencionei, esse é o terreno do site de hospedagem TMD, dream host e Bluehost, o muito popular entre os usos do WordPress e você pode considerar usá-los. Então é isso para a hospedagem na web e o nome de domínio. Agora é hora de configurar um ambiente de desenvolvimento WordPress online. Então, vamos mergulhar diretamente. 4. Demonstração - como configurar um WordPress Envir online: Bem-vindo a esta lição. Na última lição, falamos sobre os dois ambientes WordPress diferentes que podemos configurar para começar a criar sites. Nesta lição, vamos configurar um ambiente WordPress online. E também analisamos alguns fatores que você precisa considerar quando está procurando por um host da web. Então, agora nesta classe, suponho que você já tenha decidido qual host da web usaremos para os propósitos das minhas demonstrações, estou usando esses hosts da web. Então, vou fazer login para ter acesso ao meu cPanel. Portanto, faça login no seu host para ter acesso ao seu cPanel. Dentro do painel dos meus hosts da Web, tenho essa opção de login do cPanel. Procure a opção de login do cPanel onde quer que esteja no painel. Então, dentro do meu cPanel, vou rolar todo o caminho até a parte inferior e procurar aplicativos subscapularis, o instalador, clicarei em Wordpress. E porque você clicou no WordPress, você será levado diretamente para a landing page do WordPress dentro de cálculo. E como já tenho duas instalações do WordPress no trigo, tenho que usar o site ao vivo. Tenho uma lista das instalações atuais aqui. Quando eu instalar outra cópia do WordPress, ela será listada abaixo desses dois aqui. Então, esta será a lista de todas as suas instalações do WordPress. Então, a próxima coisa que precisamos fazer agora é sístole. Agora. Agora vamos entrar nessa página onde podemos preencher todos os detalhes sobre nosso novo site. Então, para o protocolo, clicarei no menu suspenso e selecionarei HTTPS. Certifique-se de que seja https, www dot, para que seja www pontue seu domínio. Deixe o diretório em branco aqui, e esta é a versão do WordPress que queremos instalar. Então, é 5.8.1. Então, dê a você um site e um nome, e vamos dar uma descrição. Tudo bem, então aqui você pode fornecer os detalhes do administrador. Estas serão suas credenciais de login do WordPress. Então, sempre que você quiser fazer login no seu WordPress para acessar o painel do WordPress. Esses são os detalhes que você usará. Portanto, certifique-se de que é uma senha forte. Deixe-me esconder isso e definir minha senha. Então eu sugiro que você deixe o e-mail padrão que está no campo de entrada aqui. Em seguida, eles não são obrigatórios. Sim, e é isso. Terminamos. E aqui, digite o e-mail para o qual você deseja que nos encaminhe para enviar uma notificação quando seu site for criado. Assim que este site tiver sido criado, assim que esta instalação do WordPress estiver concluída e a notificação será enviada para este e-mail. Então, vou colocar meu e-mail e dizer instalar. Não diga isso. Devemos dizer de três a quatro minutos. Tudo bem. E agora parabéns, o software foi instalado com sucesso. E este é o link direto para a página principal, para a página principal do domínio. Então deixe-me clicar e ver onde temos. Então esse é o nosso site no momento. E este é o link para o nosso painel. É o mesmo domínio, mas com um administrador de hífen WP. Então esse é o link para o painel. Se eu clicar nisso, você será levado para o painel. E wallah, lá temos isso. Configuramos um ambiente on-line que estamos pressionados e agora nosso site está ativo. Se, com razão abrir o link em nova guia e ir para essa guia, isso é o que temos. Então, agora a próxima coisa que queremos fazer é ver como instalar um tema WordPress. O que é um tema WordPress? Vejo você em breve. 5. Demonstração - como configurar um ambiente de WordPress local: Neste tutorial, vou mostrar como configurar uma instalação local do WordPress e usaremos o XAMPP. Mas antes de tudo, o que é o XAMPP? Know zap é um ambiente de desenvolvimento totalmente gratuito e de código aberto que permite aos usuários do WordPress criar e hospedar sites localmente em suas máquinas sem a necessidade de conexão com a Internet. Isso significa que podemos continuar interagindo com sites que você criou sem a necessidade de conexão com a Internet. Na íntegra. Xampp significa X significa Apache, MySQL ou MySQL multiplataforma , imperador PHP. De acordo com o WordPress, no contexto de uma rede, um host local é um computador específico no qual você está trabalhando agora. Então, se você estiver em um escritório agora, o computador que você está usando o host local de Israel. Se você estiver trabalhando em casa, seu computador em casa é seu host local. Se você tem um computador favorito, é um cyber cafe, esse computador também pode ser seu host local. Você pode ter o XAMPP em qualquer uma dessas máquinas e instalar o WordPress lá e começar a criar sites a partir daí. Então, vamos ver como configurar um host local usando o XAMPP. Então, aqui estamos na página de download oficial do XAMPP. E o URL é www dot Apache friends.org slash index.html. E você notará que temos versões diferentes do XAMPP criativo para diferentes sistemas operacionais. Como estou usando o Windows, vou seguir em frente e clicar em XAMPP para Windows. O download deve começar automaticamente, mas não vou baixá-lo porque já havia baixado o, como você pode ver aqui no meu desktop, eu já o tenho. A próxima coisa que queremos fazer é ir para a página de download do WordPress, que é o download da barra do WordPress.org. Role para baixo e clique neste botão aqui para baixar a versão mais recente do Wordpress. E eu já tenho uma cópia dele. Já o baixei e extraí. Está na minha área de trabalho, como você pode ver aqui. Então baixe esse WordPress e extraído para um lugar onde você possa recuperá-lo. Então, agora que você tem esses dois, vamos começar instalando o XAMPP. Então, vou clicar duas vezes nisso. E você receberá este aviso de aviso. Vá em frente e diga, sim, continue com a instalação. Em seguida, siga as instruções. Deve ser muito fácil. Objetivo não complicado o caminho até o final e instalou o XAMPP em seu padrão. Veja a direita, desculpe, já tenho uma cópia dela no meu sistema, então não vou instalá-lo. Então, depois de instalar o XAMPP e entrar seu painel de controle e olhar para a lista de todos os programas que você tem, você instalou em sua máquina, você deve encontrar o módulo Bitnami WordPress bem ali e XAMPP na pasta. Deixe-me ir em frente e fechar isso. E dentro de sua unidade C ou main dry, você encontrará uma pasta chamada SAM que deve informar que você instalou o XAMPP com sucesso em sua máquina. E antes de passarmos para a pasta WordPress, vamos garantir que nosso servidor esteja em execução. Então, vou abrir o XAMPP no menu Iniciar. Vou colocá-lo aqui em foco. E você notará que ele tem muitos botões aqui. Mas estamos interessados em apenas dois botões. Apache, MySQL. Então clique em Iniciar em ambos e você notará que o status mudou. Agora, o MySQL está sendo executado e o Apache está sendo executado. Mysql é o banco de dados e o Apache é um servidor. Então vou em frente e minimizarei isso. E vamos passar para o próximo passo. A próxima coisa que queremos fazer é escolher a pasta do WordPress que você acabou de extrair. E poderíamos abri-la por um segundo. Você notará que ele tem muitas páginas da Web aqui em várias outras pastas com mais arquivos que permitirão que você navegue em suas páginas em seu site local. Então agora que confirmamos que tudo o que você precisa está lá dentro. Copie isso. E então abriremos o Windows Explorer e entrar em C, abrir a pasta Zoom que acabamos de olhar e procurar esta pasta, documentos HT. É aqui que todos os seus sites WordPress serão instalados. É aqui que você terá todos os seus sites WordPress instalados localmente. Então, se o colarmos aqui. Acho que já havia colado uma cópia dela, então já tenho uma cópia dela aqui, mas basicamente basta colar essa pasta do WordPress nessas pastas HT docs que está dentro da pasta do exame, dentro da unidade C. E depois de colá-lo lá, renomeie-o para o nome do seu site. Então, minha web me deixou chamá-la de minha substituição na web. Agora que instalamos o XAMPP em nosso sistema e ele está sendo executado como você pode ver por esse status aqui. E já baixamos uma cópia do WordPress e criamos um site a partir dele, e nomeamos minha web dentro da pasta XAMPP. Agora podemos acessar o painel do site WordPress, o painel desses sites. Então, vamos para o anfitrião local. Minha web, o nome do seu site ou o nome que você deu à sua pasta, e será redirecionado para esta página onde começaremos com a instalação do WordPress. Então, antes de ir além disso, abra uma nova guia e vá para localhost, PHP, meu administrador. E a razão pela qual estamos entrando aqui é porque nosso site ainda não tem um banco de dados. Então, vamos criar um banco de dados. Em seguida, voltaremos a esta página e continuaremos instalando todo o resto. Então, dentro do PHP, meu administrador, vá em frente e bata nisso uma base. E vamos dar um nome a ele. Então meu, quando eu marquei o B ou algo desse tipo, basta dar qualquer nome, realmente não importa. Então esse era o meu banco de dados da web e você o encontrará listado aqui. Aqui está meu banco de dados de sublinhado da web. Então agora podemos voltar a esta página e clicar em, vamos para o nome do banco de dados, dar esse novo nome, acabamos de nomeá-lo. Então, é meu banco de dados de sublinhado da web. Para o nome de usuário, vamos dar rotas a ele. E para a senha, deixe-a em branco. Em seguida, clique em Enviar. Tudo bem, sparky, você passou por esta parte da instalação. Então, em seguida, vamos executar a instalação. Então, aqui, forneceremos informações básicas sobre nosso site WordPress e definiremos as credenciais de registro. Então, o site é minha web. E então vamos apenas usar o administrador para o nome de usuário. Use uma boa senha forte. Mas, por enquanto, para fins ilustrativos, vou apenas com educado. Em seguida, confirmarei o uso de uma senha fraca. Meu e-mail, P em k.com. E vou aquecer o WordPress instalado. Vamos dar um momento. Então lá vamos nós. Success WordPress foi instalado. Obrigado e divirta-se. Vamos fazer login com as credenciais que acabamos de criar, admin. Nossa senha me deixou revelar que este era o meu passe, se eu me lembro corretamente, qual era minha senha para luz ou direita. Então, lá temos isso. Então, em resumo, ou uma recapitulação rápida, sempre que você quiser criar um novo site localmente em sua máquina, tudo o que você precisa fazer é copiar essa pasta, colá-lo aqui, dar um nome a ela. Outro site, copie esta pasta, coloque-a aqui, dê outro nome, e assim por diante. Certifique-se de que é a pasta original que você baixou, a que você baixou e extraiu. Então você pode ter 50, 7000 sites aqui. E quando você quiser entrar no painel, antes de tudo, certifique-se de que seu XAMPP, seu XAMPP, deixe-me apenas trazer isso para o foco. O Apache e o MySQL estão sendo executados. Enquanto esses dois estiverem em execução, você poderá abrir seu navegador assim e ir diretamente para o host local, o host local e o nome do seu site. E é assim que fazer isso, pessoal. Espero que você tenha achado isso útil. Se você gostou deste vídeo, por favor, me dê um polegar para cima. Sempre damos a motivação para continuar. 6. O que é um tema do WordPress: Um tema WordPress é uma coleção de arquivos que determinam como qualquer site WordPress ficará e se comportará quando os usuários estão interagindo com ele. Portanto, esses arquivos podem incluir código PHP, HTML e CSS, imagens, plugins e modelos de página da Web. Ao fazer alterações nessa coleção de arquivos, você pode alterar a aparência e o design do seu site WordPress para que ele pareça e funcione exatamente como você deseja. Por exemplo, ajustando alguns de seus temas, configurações de aparência, você pode alterar como os artigos seriam exibidos em seu blog, como seus produtos aparecerão em sua loja de comércio eletrônico, como seus menus serão apresentados em todo o site e como links ou se comportam quando clicados. Sempre que você instala o WordPress, ele vem pré-carregado com o tema padrão do WordPress, tipicamente nomeado após o ano em que igual é lançado. Por exemplo, o tema WordPress 2020 ou a dor do WordPress 2021. Você sempre pode mudar para um novo tema, se quiser. E veremos como fazer isso nesta classe. Existem três tipos de temas do WordPress quando se trata de quanto custa obtê-los. Existem temas gratuitos. Isso significa que eles são livres para usar completamente. Você não precisa pagar nenhum dinheiro para usá-los. Existem temas freemium, o que significa que eles são gratuitos, mas com recursos premium adicionais que você precisa pagar para ter acesso. E então temos temas premium que só estão disponíveis para você se você comprá-los, você só pode usá-los. Se você os comprou. Como usuário do WordPress, você pode encontrar facilmente qualquer alma, milhares de temas gratuitos listados no repositório de temas do WordPress ou diretório de temas. Se você quiser temas premium, você pode comprá-los um mercado digital, como o Creative Market, ou pagar a um desenvolvedor para criar um para você. Como você pode saber se um tema WordPress é bom para o seu projeto? Agora, embora não haja realmente um tamanho adequado para todas as respostas a essa pergunta, geralmente, qualquer tema WordPress bem projetado deve ter algumas características comuns de um bom tema. Em outras palavras, o tema deve parecer apresentável e incrível em todos os tamanhos de tela. Ele deve ter uma aparência consistente em todos os principais navegadores. Isso significa que você deve trabalhar bem com o Chrome, Firefox , Safari, Internet Explorer e outros. Ele deve ser mantido ativamente e atualizado regularmente. Ele deve estar ao vivo e , portanto, rápido para carregar. Ou seja, se estiver bem escrito, deve ter um código limpo e bem escrito. Você deve ter documentação extensa e bem escrita disponível on-line. Você deve ter o apoio de um atendimento ao cliente confiável e suporte para todos os usuários. Deve ser amigável para SEO. Os dois temas do WordPress que uso em praticamente todos os meus projetos de web design são. Número um, Astra. Astra é um tema WordPress gratuito e multiuso muito popular tema WordPress gratuito e multiuso que fornece toneladas de belos modelos pré-fabricados que são totalmente editáveis com qualquer uma das populares página de arrastar e soltar construtores, como Elementor, Beaver Builder, dV e assim por diante. Os recursos oferecidos na versão gratuita são suficientes para a maioria dos projetos de sites nos quais você pode querer trabalhar. Na verdade, usaremos o astro para nosso projeto de negócios de downloads digitais. O outro tema que eu gosto de usar em muitos dos meus projetos, iz dV. Dv não é apenas um dos temas WordPress mais populares no mercado hoje, também tem um incrível construtor de páginas visuais que permite editar todos os aspectos da equipe e projetar qualquer tipo de site que você deseja sem nenhuma habilidade de codificação. Portanto, se você deseja começar a projetar do zero ou de um modelo pronto, dv fornecerá a capacidade de fazê-lo sem problemas. Como mencionei, cada nova instalação do WordPress vem com um tema padrão para controlar a aparência do seu site. Wordpress lhe dá a liberdade de mudar para um tema diferente simplesmente instalando um novo através do recurso de aparência do WordPress no painel. Então, vamos instalar e ativar nosso tema na próxima lição. 7. Demonstração - como instalar um tema do WordPress: Então, bem-vindo de volta. Na última lição, analisamos o que um tema WordPress é fácil. Então, nesta lição, vamos mudar do tema padrão do WordPress para alcançar chamado astro. Então, sempre em mais tempo, vamos direto aos temas de aparência. E, como mencionei na última lição, cada nova instalação do WordPress vem com um tema padrão. E o tema geralmente é nomeado após o ano em que é lançado. Então, agora estamos no ano de 2021. A equipe ativa em cada nova instalação do WordPress é 2021. E temos esses outros dois, 2019 e 2020. Queremos dizer Adicionar novo. E o tema que queremos usar para esta aula e o PMI recomendado para a maioria dos projetos é o Astra. Agora, caso você não consiga ver o Astra aqui, você pode digitar o Astra nesta barra de pesquisa, Astra. Deixe-me digitar corretamente. Astra. E lá está ele. E podemos ir em frente e instalá-lo ou andar. Então, agora que está instalado, vamos ativar. E agora Astra é nosso tema ativo. E é assim que instalar um tema WordPress. E eu quero apenas tomar um momento e clicar nos detalhes do tema apenas para que possamos ver por que Astra é uma equipe incrível e por que eu recomendo a quem quiser criar um site no WordPress. Se você ler esta descrição aqui, verá por que o Astra é um dos melhores temas do WordPress no mercado hoje, e é gratuito para você instalar e começar a usar hoje mesmo. O bom é que é um tipo de tema WordPress multiuso porque você pode usá-lo para suas postagens de blog, portfólios pessoais, sites de negócios, até lojas WooCommerce. Mas definitivamente existem muitos outros temas incríveis do WordPress por aí. Definitivamente você deve verificá-los. Só estou mostrando o que venho usando e porque tem funcionado para mim, acho que deveria contar a mais pessoas sobre isso. Então, voltando para dentro, agora que instalamos e ativamos nosso tema, agora é hora de ver o que é um plugin WordPress porque usaremos o Elementor e outros plug-ins para construir um site para estender o poder do WordPress à medida que construímos nosso negócio de downloads digitais, presumo que nem todos que participam dessa aula usaram eram urgentes. Então, temos que começar com o que é um plugin? Vamos ver isso na próxima lição. Vejo você em breve. 8. O que é um WordPress: No momento da gravação desta lição, há mais de 58 mil plugins WordPress disponíveis para você usar em seu site. Mas o que é um plugin? Um plugging é um aplicativo ou software de terceiros que pode ser instalado no seu WordPress CMS para adicionar novos recursos ao seu site WordPress. É como um pequeno software projetado para se conectar a um software maior para adicionar recursos ao software maior, que neste caso e é wordpress. Com plugins, você pode adicionar recursos incríveis ao seu negócio de downloads digitais para atender melhor seus clientes. O fato de sermos pressionados é de código aberto e sua arquitetura permite integração com software de terceiros, é a principal razão pela qual os plugins são tão populares entre os usuários do wordpress. Então, agora que você sabe o que é um plugin, vamos ver como instalar e ativar um plug-in instalando e ativando o Elementor. Faremos isso na próxima lição. Vejo você em breve. 9. Como atualizar o novo assistente de configuração do elemento central: Bem-vindo de volta. Agora, esta lição é uma nota rápida ou uma rápida atualização do processo de instalação do Elementor. Se você estiver fazendo esta aula em maio de 2022 e depois, notará que a ativação do Elementor agora tem um assistente de configuração que é composto de várias etapas que você precisa seguir para configurar as partes básicas do seu site. Enquanto eu estava criando essa classe há vários meses, Elementor não tinha esse assistente de configuração. Então, eu só quero que passemos por esse assistente de configuração. Mas tudo o mais que você está aprendendo nesta aula não muda. Ainda é o mesmo processo durante todo o processo. A única adição é o assistente de configuração. Então, como você pode ver agora, eu tenho uma nova instalação do WordPress e estamos na versão 6. E o que eu quero fazer é ir para Plugins, Add New. Assim, podemos adicionar o Elementor e passar por esse processo. Vou procurar a instalação do Elementor agora. E agora, quando eu clicar em Ativar serei redirecionado para esse assistente de configuração. E podemos passar por isso juntos. Então, aqui estamos nós. Vou diminuir um pouco o zoom para que possamos ver mais detalhes. Tudo bem, então agora você notará que a primeira coisa que o Elemental quer que façamos agora é criar uma conta para tirar o máximo proveito do Elementor. Então, esses são alguns dos benefícios de se inscrever em uma conta no Elementor. Mas o problema é que você não precisa ter uma conta Elementor para usar o Elementor. Então eu vou em frente e pular essa parte. O segundo passo é aceitar, continuar com o tema sagrado que Elementor fez para nós. Isso é feito pela Elementor, mas estamos usando o Tema Astra, então vamos em frente e pulamos. Astra é um tema mais poderoso. O terceiro passo é dar um nome ao nosso site. Enquanto você estava instalando seu WordPress. Você deu um nome ao site. Esse é o nome que vai aparecer aqui. Mas isso nos dá a oportunidade mudar o nome para qualquer outro nome que quisermos. Meu site e, em seguida, vamos clicar em Avançar. E se você tiver um logotipo para o seu site e quiser adicioná-lo com antecedência. Você pode simplesmente ir em frente e abrir a biblioteca de mídia e selecioná-la na biblioteca de mídia ou carregá-la do seu computador. Mas não vamos fazer isso agora. Então, vou manter esse passo. E é claro que podemos adicionar o logotipo mais tarde e eu vou te mostrar como fazer isso. Vamos clicar em Ignorar. E agora chegamos à última etapa em que temos duas opções. Podemos começar a editar nossa página inicial a partir de uma tela em branco com o editor Elementor. Ou podemos navegar a partir de centenas de modelos ou importar nossos próprios modelos, se os tivermos. Mas eu vou em frente e pularei. Isso. Será redirecionado para a tela onde agora podemos começar a construir um site. E aqui vamos nós. Então, basicamente isso é tudo que eu queria mostrar a você. É uma nova atualização. Não estava lá há alguns meses. Agora, está lá. Mas todo o resto nas próximas aulas continua o mesmo. O processo ainda permanece o mesmo para criar uma página de destino. Então, sem perder mais tempo, vamos para a próxima lição. Vou até este menu de hambúrguer e clicar em Sair para o painel. Vamos sair desta página. Agora estamos dentro do painel e estamos prontos para começar a criar o site. 10. Demonstração - como instalar um plugin WordPress: Bem-vindo de volta. Na última lição, vimos o que um plugging iz. Então, agora vamos ver como instalar e ativar um plugin do WordPress. Então, como usaremos o Elementor como nosso construtor de páginas, vamos em frente e instalar o Elementor. Então, irei em frente e clique em plug-in para iniciantes será levado ao menor de todos os plugins que temos atualmente. E como esta é uma nova instalação do WordPress, tenho que usar plugins padrão aqui, me livrar deles selecionando-os. Em seguida, neste menu suspenso, selecionando, Excluir e aplicar. Tudo bem, então nos livramos deles. E também quero me livrar dessas notificações astrais aqui. Então, vamos fechar isso e agora temos uma ardósia limpa. Vamos clicar em Adicionar novo para que possamos acessar o repositório de plugins do WordPress. E aqui eu quero procurar por Elementor. Elementor. Tudo bem, então deve ser o primeiro resultado aqui, e é por elementary.com. E você notará que existem muitos outros plug-ins aqui que têm o nome Elementor neles. E esses são plugins desenvolvidos por desenvolvedores de plugins terceirizados porque próprio Elementor é um projeto de código aberto. Isso significa que você pode, você pode estender o poder do plugin da mesma forma que o elemental foi criado para estender o poder do WordPress porque o WordPress é de código aberto. Então, esses caras aqui criaram plug-ins, widgets, elementos que podem ser adicionados ao elementor e tornar seu processo de design Reacher. Então, vou em frente e clique em Instalar agora. Substitua, então eu vou ativar. E agora está ativo. E é assim que instalar e ativar um plugging do WordPress. Na próxima lição, vamos ter uma visão geral rápida do espaço de trabalho elementar para que você possa se familiarizar com as ferramentas e recursos com os quais trabalhará para que você se sinta confortável à medida que construímos o negócio de downloads digitais. Vejo você em breve. 11. Visão geral do espaço de trabalho de Elementor: Bem-vindo de volta e bem-vindo a esta lição. Na última lição, vimos como instalar e ativar um plugin do WordPress. Instalamos o Elementor e como usaremos o elementar para construir uma página da Web, vamos ter uma visão geral rápida do espaço de trabalho elementar para que possamos nos familiarizar com ele. Então, com nossos gastos mais tempo, vamos entrar nas páginas e adicionar novas. Mas antes de adicionarmos mu, digamos que as páginas. Então clique em Páginas. E como esta é uma nova instalação do WordPress, temos essas duas páginas padrão. Quero excluí-los, então selecionarei os dois. E neste menu suspenso, vá para o lixo e aplique isso. Agora vamos criar uma nova página para que possamos abrir em um mentor e dar uma volta. Então, vamos dar um nome à nossa página. Vamos chamá-lo de homepage. Casa. E no lado direito da tela, você notará que temos essas configurações aqui. Em Configurações. Vá para o modelo e selecione Elementor largura total. Chegue dando um nome. Então, vamos publicar isso. Vamos entrar na edição com o Elementor. Então, aqui estamos no front-end da página que acabamos de criar. E este é o espaço de trabalho elementar. Sempre que você estiver construindo uma página da Web ou um cabeçalho. É assim que o espaço de trabalho elementar ficará. Bem aqui. Esta é a nossa página e arrastará elementos e ferramentas do lado esquerdo para a nossa página e quaisquer alterações que fizermos aqui, poderemos vê-los entrar em vigor em tempo real e poderemos clique em Visualizar alterações e veja a página da Web sem essas configurações, sem esses blocos. Então, poderemos ver isso. Agora a partir do topo, aqui, temos este menu de hambúrgueres. Se você clicar nele, temos algumas configurações gerais para a página da Web no site, mas não vamos aprofundar isso por enquanto. Só saiba que temos algumas configurações lá. E antes de chegarmos a este ícone aqui, nesta área do meio, temos os diferentes elementos que serão arrastando e soltando no espaço para construir a página da Web. Então, se eu pudesse entrar em colapso este painel básico ali mesmo e depois recolher esse painel profissional. Vamos colapsar todos os painéis. Elemental fornece esses painéis e aninhados dentro dos painéis são os diferentes elementos que podemos arrastar para construir nossas páginas da web. Por exemplo, se eu arrastar esse elemento de imagem e soltá-lo lá, agora temos elementos de imagem e você notará que essa área mudou porque o elemento ativo atualmente selecionado em a página aqui é a imagem e é por isso que ela diz Editar imagem aqui. Essas são as configurações que podemos alterar para alterar a aparência da imagem. E há mais painéis aqui para modificar as configurações da imagem. Então, deixe-me excluir isso. Vamos arrastar outra coisa aqui, como o editor de texto. E agora aqui estão as configurações do editor de texto, e aqui em cima diz editor de texto. Então, qualquer elemento selecionado ativamente aqui é aquele que aparece aqui. E você pode definir as diferentes configurações para o elemento. E agora, porque temos um elemento ativo e suas configurações que estão aparecendo aqui, se quiséssemos adicionar outros elementos à página? Não podemos ver os elementos. Então, tudo o que precisamos fazer é clicar neste pequeno ícone aqui e isso revelará os elementos novamente. Então, colapsando que agora que vimos que o painel básico contém elementos gratuitos que a maioria dos sites precisa. Botões, texto, imagens, vídeos, divisores. Vamos colapsar isso. Se entrarmos no painel Pro, você notará que temos elementos profissionais. Podemos usar esses elementos, a menos que tenhamos Pro elementar. Então, se tentarmos arrastar os elementos para lá, esse pop-up nos impede e diz que precisamos da versão pro. Então, deixe-me fechar isso e recolher o painel Pro, expandindo o painel geral, temos mais coisas gratuitas aqui para que possamos arrastar e soltar um depoimento lá dentro. Deixe-me fechar isso, então basicamente esta é a parte do elementar com a qual estaremos interagindo na maior parte do tempo porque estaremos arrastando elementos e, em seguida, modificando suas configurações. Então, a próxima coisa aqui no rodapé, temos o botão de atualização. À medida que fazemos alterações no site. Exemplo, deixe-me arrastar um botão para lá. Se você quiser salvar as alterações que fizemos até agora, bem, precisamos fazer é clicar em Atualizar. E agora nossas configurações foram salvas. Se sairmos dessa área, quando voltarmos, ainda poderemos continuar de onde entramos para ver as alterações sem esse bloco de configurações. Vá em frente e clique em Visualizar alterações. E ele abre a página que estamos construindo e podemos ver como ela se parece. Também temos o ícone do modo responsivo aqui. Quando chegar a hora de tornar a página da Web responsiva para diferentes tamanhos de tela, podemos clicar nesse modo responsivo. Isso trará essa barra aqui que tem pontos de interrupção. E aqui temos os tamanhos do dispositivo, temos o tablet e a tela do celular. E na classe será capaz de usar esse ícone de modo responsivo e configurações para garantir que nosso site fique incrível em todos os tamanhos de tela. Deixe-me sair de lá. Vou clicar nisso para me livrar dessa barra. Em seguida, temos o ícone de histórico aqui. Se clicarmos nisso, veremos cada movimento que fizemos desde que começamos a editar a página e poderemos voltar a um ponto específico no tempo. Então, por exemplo, volte ao ponto no tempo em que a imagem foi adicionada. Então, clicar que tudo o resto que veio depois que a imagem foi adicionada agora está desfeito. Portanto, esse é um ótimo recurso no sentido de que, se você fez alguma alteração e não gosta da aparência das coisas, você pode voltar às configurações que você teve um momento atrás que pareciam melhores. Então temos o navegador aqui. Então, clicar que traz esse tipo de esboço e você pode ter uma visão panorâmica do seu site. Então, se tivermos muitos elementos aqui, até o fundo, e você quer ter uma ideia de onde você está, uma visão panorâmica de onde você está. Este navegador nos ajudará. Então, vamos duplicar isso algumas vezes. Duplique isso. Clique com o botão direito que foi replicado Agora temos três seções e, se as expandirmos, cada seção tem uma coluna, essa coluna que mantém uma imagem. E dessa forma, podemos pular rapidamente para diferentes seções, editar essas seções específicas. Aqui, temos mais configurações sobre essa página da Web específica. E veremos como usar todas essas configurações. Então, se eu pudesse sair daqui, deixe-me excluí-los. Deixe-me excluir isso. E isso é apenas uma visão geral rápida do Elementor. Claro, vamos entender como usar as diferentes ferramentas e painéis aqui à medida que construímos nossas páginas, aprenderemos fazendo. Então. Isso era apenas para familiarizá-lo com o espaço de trabalho com o qual você estará interagindo com nossos gastos mais tempo. Agora é hora de começar a criar sua landing page de downloads digitais. Vejo você na próxima lição. 12. Crie as páginas web: Bem-vindo de volta. Agora, nas lições anteriores, estamos analisando tanto um CMS, o que somos impressões em como o WordPress funciona. Então, agora com essa compreensão bastante sólida desses conceitos, é hora de sujar nossas mãos. Sam, para começar a construir nosso site. Então, sem perder mais tempo, vamos entrar nas páginas. E como esta é uma nova instalação do WordPress, ainda não tenho nenhuma página da Web criada, então vou adicionar novas. Então, esta será nossa página inicial. Então, vou clicar em Publicar ou montar em Agora que está publicado. Podemos ver a página, mas eu só quero voltar para dentro nossas páginas menos e criar o resto das páginas, então podemos visualizá-las à medida que as construímos. Então, voltando lá, direi Adicionar novo para que possamos criar mais alguns. Vou chamar isso de downloads. É aqui que vamos exibir todos os nossos produtos digitais e eles são publicados. Vou repetir mais duas vezes para a página do blog e a página Contato, adicionarei novo. E essa é a página do blog publicada publicada. E, finalmente, vamos criar a página de contato e publicar essa substituição. Então, vamos voltar aqui. E agora temos quatro páginas da Web prontas para serem preenchidas com conteúdo. Vamos seguir em frente e criar nosso menu de navegação. E usaremos essas páginas da Web como nossos itens de menu. Itens de menu como esses. Então, vamos em frente e crie um novo menu WordPress. Na próxima lição, verei você em breve. 13. Crie um menu do WordPress Nav: Bem-vindo de volta. Na lição anterior, criamos nossos sites, páginas da Web. Agora é hora de criar nosso menu de navegação no site. O menu que estará no topo, assim. E assim usaremos nossas páginas da Web como nossos itens de menu. Então, entrando nos menus de aparência. A primeira coisa que você notará é que nós criamos seu primeiro menu abaixo, porque ainda não temos um menu. Assim, podemos dar um nome ao nosso menu. E vamos torná-lo nosso menu principal. Em seguida, clicarei em Criar menu ou pedalar. Então, nosso menu agora está criado. E como você pode ver aqui, podemos adicionar itens de menu da coluna à esquerda. Esta coluna aqui. E se eu recolher essas páginas painel, você notará que também temos postagens, links personalizados, categorias. Portanto, esses são todos tipos diferentes de conteúdo que você pode usar como itens de menu no seu menu. Mas queremos usar nossas páginas da Web como itens de menu, páginas da Web que criamos. Então, selecionarei todos eles. E depois adicionarei ao menu. E agora eles foram adicionados ao nosso menu. Deixe-me arrastar este item inicial para ser os primeiros downloads e, em seguida, contato do Blog será o último item em nosso menu de navegação. Vou salvar o menu. E agora nosso menu está salvo e atualizado. Então, a próxima coisa que queremos fazer, agora que temos nosso menu de navegação é projetado no front-end no site real para que as pessoas possam ver e interagir com ele assim. Então, vamos fazer isso na próxima lição. Vejo você em breve. 14. Design a barra de navegação com Elementor: Bem-vindo a esta lição. Então, para projetar a barra de navegação, precisaremos instalar outro plugin que seja uma extensão do Elementor. E é chamado de plug-in do construtor de rodapé de cabeçalho para Elementor. Então, vamos entrar. Plugins, Adicionar novo. Então, vamos em frente e digite Construtor de rodapé de cabeçalho. E aqui temos isso. Então, vamos instalar o construtor de cabeçalho ou rodapé Elementor por força de brainstorm. Sim, então vamos em frente e ativá-lo. E agora está ativo. Então, para acessá-lo e usá-lo, vamos em Aparência. E você notará que agora é um dos itens do menu aqui. Então, vamos clicar em Elementor, cabeçalho e rodapé construtor. E assim que criarmos nossos cabeçalhos e rodapés, estarão listados aqui, mas por enquanto não temos nenhum. Então, digamos Adicionar novo. E eu quero pular isso. Tudo bem, então vamos dar um nome à nossa barra de navegação. Então agora bar, esse seria um bom nome. E sob o tipo de modelo, digamos que seja um cabeçalho. E digamos exibir em todo o site. E no caso de você ter pessoas sob você, você é o valor do anúncio, e você tem pessoas trabalhando no site também. Você pode dar a eles papéis diferentes. Você pode decidir quem pode editar essa barra de navegação e quem não pode editar. Então, digamos que todos sejam permitidos. E então, na extrema direita aqui sob o modelo, vamos selecionar Elementor largura total porque queremos que a barra de navegação funcione todo o caminho da esquerda para a direita da tela. E na barra lateral de configurações do Astro. Vamos selecionar nenhuma barra lateral porque não queremos barras laterais. Para o layout de conteúdo. Digamos que largura total, barra esticada. E vamos desativar o cabeçalho primário, o cabeçalho móvel, o título e o rodapé, porque não queremos usar os cabeçalhos e rodapés padrão do Astra. Queremos construir o nosso próprio, que é o que estamos tentando fazer agora. Então, com essas configurações, digamos Publicar. E então digamos Editar com Elementor. Então, agora podemos ir para o front-end e começar a construir a barra de navegação visualmente. Então, aqui estamos no front-end. Queremos projetar a barra de navegação visualmente. Então, vou clicar nesse botão de mais e escolherei uma seção de coluna tripla aqui. A coluna tripla aqui será de tal forma que nesta coluna temos o logotipo. Então, deixe-me adicionar um elemento de imagem, clicar no sinal de mais e arrastar os elementos de uma imagem para lá. E eu vou clicar aqui para que possamos selecionar a imagem do logotipo. E como ainda não tenho nenhuma imagem carregada, teremos que entrar, fazer upload de arquivos e selecionar arquivos. Então, prepararei essa pasta chamada recursos do projeto e você a encontrará na descrição abaixo. Ele tem tudo o que precisamos para este projeto, incluindo o logotipo. Então, aqui temos logotipos. Deixe-me arrastar, pegar os dois logotipos. Um é como se estivesse escuro porque precisaremos de um para o rodapé, mas para o cabeçalho enfrenta o que estamos usando. Então, selecionando-o, insira mídia. E agora o logotipo parece incrível. Então deixe-me arrastar isso para aumentar um pouco o tamanho. E parece bom. Então, a próxima coisa, irei para esta coluna aqui e clique no sinal de mais. E aqui vou digitar nav. E teremos essas opções de navegação aqui. O que nos interessa é o HF ser chefe de comida ou construtor nav bar. Então, deixe-me arrastá-lo para essa coluna. E no momento em que você o deixa lá, os quatro itens de menu que criamos anteriormente, ou seja, as páginas da Web recriadas aparecem aqui em cima. Quero mostrar algo muito rapidamente. Então, deixe-me clicar nisso e sair do painel. E você vai se lembrar que passamos pelos menus de Aparência. E criamos esse menu e adicionamos esses quatro itens de menu ao menu e tornamos nosso menu principal. Então, agora voltando para dentro do construtor de rodapé do cabeçalho elementar e clicar em Editar com Elementor em nossa barra de navegação. Esse é o mesmo menu que estamos vendo aqui. Então, deixe-me selecionar isso. Lembre-se de que chamamos o menu, e isso é o que temos aqui. Então, vamos em frente e estilizar a napa na próxima lição, verei você em breve. 15. Estilo o bar Elementor: Então, agora é hora de estilizar nossa barra de navegação e especificamente este menu. Porque, por exemplo, quando passamos o mouse sobre os itens do menu, você notará que há verde, mas nosso tema é amarelo e preto, então temos que fazer algo a respeito deles. Então, selecionando o menu para torná-lo ativo aqui, vou entrar no estilo. E se eu pudesse entrar em colapso este menu principal por um segundo, observe que temos três itens principais, três menus suspensos principais. E assim, quando expandimos o menu principal, podemos seguir em frente e selecionar tipografia. Deixe-me rolar para cima e vamos mudar a fonte para Montserrat. Gosto de Montserrat. Entre. E acho que parece melhor. Vou clicar em qualquer lugar fora da caixa para me livrar dela. Então, em algum lugar lá. E ao passar o mouse, você notará que a cor aqui é verde, a cor do texto é verde. Queremos mudar isso para este amarelo. Então deixe-me ver se consigo pegar um belo amarelo aqui. Lá nós o temos. Então, precisamos agir. Ele também precisa ter essa cor amarela. Então, selecionarei este amarelo e copiarei. Em seguida, entre ativo e cole-o lá. Então agora está amarelo em pairar. E quando ativo também é amarelo. Então, deixe-me atualizar isso. E vamos visualizar as alterações. Então, lá temos isso. Então, vamos clicar em Home. E agora que está ativo, como você pode ver, é amarelo. Então é assim que criar a barra de navegação. Um pouco mais tarde, quando criarmos a funcionalidade de pesquisa para o site, adicionaremos a barra de pesquisa aqui, mas não se preocupe com isso por enquanto. A próxima coisa que queremos fazer é projetar a pasta para que depois do tau possa criar o conteúdo principal da página da Web. Então, entrando aqui, deixe-me atualizar esta barra de navegação para que possamos dizer as mudanças. Então, vamos em frente e criar uma pasta na próxima lição, verei você em breve. Apenas 16. Design o rodapé: Bem-vindo de volta. Então, vamos continuar. Já criamos os selos navbar para criar a pasta, para criar a foto fará exatamente a mesma coisa que fizemos com a barra de navegação. Então, agora que temos nossa barra de navegação salva, clicarei neste menu de hambúrguer e Sair to Dashboard. E vou aparecer no cabeçalho Elementor e colocar um construtor mais uma vez. E, claro, você pode ver nossa barra de navegação listada aqui agora. Então, direi adicionar novo. Desta vez, é um tipo de pasta que o curso de modelo é para exibição em todo o site. Podemos editar todas as funções. Todos, qualquer pessoa em qualquer linha. O modelo é Elementor largura total, sem barra lateral aqui. Layout de conteúdo para trigo esticado. Em seguida, vamos desativar esses padrões. Por favor, as seções de enquete aqui. E então vamos dizer Editar com Elementor ou montar. E agora que estamos editando a pasta, claro que agora a barra de navegação não é editável porque está aparecendo porque faz parte da página da Web. Mas não estamos na área onde estamos editando o napa, então não podemos selecioná-los e começar a arrastá-lo, você simplesmente não pode fazer isso. Somente a pasta agora é editável. E então eu vou clicar no sinal de mais aqui e adicionar, digamos que adicione isso por enquanto. E eu vou arrastar esses pontos ruins demais para algum lugar. Clique neste sinal de e vamos adicionar nosso logotipo aqui. Vou clicar nisso. E desta vez eu quero escolher essas luzes, logotipo, inserir mídia. E é claro que agora você não pode ver a primeira metade do logotipo porque ele é largo. Então, queremos dar a essa pasta uma cor de fundo. Então, clicando nessa seção do meio aqui. E indo para estilo de fundo, tipo de fundo. Clique nesta caixa aqui e vamos dar uma cor escura. Talvez em algum lugar lá, uma cor que corresponda a esses cinza escuro. Isso não é preto puro. Por, é claro, você pode dar qualquer cor que quiser. Agora que temos isso, vamos dar a esse logotipo algum espaço na parte superior e na parte inferior. Portanto, enquanto isso ainda estiver selecionado, basta clicar com o botão direito do mouse e editar a seção novamente. Vou para o Advanced, e irei para o preenchimento, removerei esses links e darei um preenchimento superior de 50 e um preenchimento inferior ou 50.000, certo? Então agora temos um bom quarto na parte superior e inferior. Em seguida, vamos adicionar algum texto aqui, algum texto descritivo. Então eu vou arrastar essas roupas de cama para lá. E vamos dizer algo como downloads gratuitos para, tudo bem, E enquanto ainda estamos aqui, vamos ao estilo da cor do texto. Vamos arrastar isso até lá. Clique em qualquer lugar fora dessa caixa para se livrar dela e clique em Topografia para que possamos mudar a família de fontes para Montserrat assim. E eu quero mudar a tipografia. peso mudará o peso da fonte para algo como oitocentos. Oitocentos. Parece bom. E vamos voltar ao conteúdo. E vamos colocá-lo no meio, assim. Chegue. Em seguida. Vamos clicar neste pequeno ícone aqui para abrir os elementos. E vamos arrastar algum editor de texto para lá. E enquanto ainda estiver ativo, vamos entrar no estilo, mudar essa cor para branco. E vamos colocá-lo no meio assim. Agora pense que talvez vamos adicionar alguns ícones de mídia social aqui. Então, vamos adicionar clique nisso. E então, aqui, digite as mídias sociais. Vamos arrastar isso para lá. Incrível. Mas agora há dois grandes, vamos reduzir o tamanho enquanto ele ainda estiver selecionado. Vamos para o tamanho do estilo. Acho que gosto desse ponto ali mesmo, e quero, quero empurrá-lo para a esquerda. Então, vamos ao conteúdo e empurrá-lo para a esquerda assim. Atualize isso. E à direita, vamos adicionar talvez uma lista de links. Então vou entrar aqui e clicar nisso para abrir os elementos novamente. E aqui, vou digitar menos. Sim, digamos que eu possa listar e vamos arrastar a lista de ícones lá. E, por padrão, ele tem três itens. Então, vamos começar com o primeiro item aqui e renomeá-lo pode ser algo como uma categoria de produtos digitais, como logotipos. Certo? Número dois, digamos que algo mentira. Revistas. Digamos que também vendemos modelos Elementor e podemos continuar adicionando mais elementos aqui, pois dizemos algo como gradientes. Atualize isso. E agora vamos entrar aqui e estilete. Em estilo, vamos soletrar textos primeiro. Agora vamos dizer que essa cor é branca. Vamos colapsar isso por um segundo. Entre no ícone e mude a cor para amarela. Copiamos um ainda o temos na minha área de transferência. Mas você pode selecionar manualmente. Mas você pode apenas ajustar manualmente. Então, lá temos isso. É amarelo no estado normal, mas no pairar queremos que seja branco. Então, no entanto, está mudando para colarinho branco. Digamos que no Hoover, os textos que você muda esse amarelo. Então, ao passar o mouse, ele muda para esse amarelo. Incrível. Enquanto ainda estiver selecionado, vamos alinhá-lo à direita, assim. E vamos puxar isso até o fim. E vamos atualizar isso. Visualize as alterações. Perfeito. Este é um rodapé muito simples. Claro, podemos fazer muito melhor, e isso depende de você. O ponto principal aqui é entender como juntar o sistema, mas finalizar tudo e fazer tudo parece super incrível. Tudo depende de você em sua criatividade. Mas é claro que podemos melhorar isso um pouco. Quero empurrar isso porque vejo esses textos parecem estar muito próximos desse logotipo. Primeiro de tudo, quero arrastar isso para a esquerda, para a direita assim. E arraste isso um pouco. Mas eu quero selecionar essa coluna aqui especificamente. Ao entrar na margem avançada, vamos remover essa margem. E para a margem esquerda, vamos aumentá-la para algo como jogar qualquer, Vamos tentar isso. Atualize, essa visualização muda. Sim, acho que agora está parecendo muito melhor, centralizado e tudo parece estar posicionado corretamente. É assim que criar nossa pasta e napa, a próxima coisa que queremos criar nosso conteúdo principal, como nessas páginas. E queremos começar com a seção de heróis. A seção de herói E, a área que você vê no momento em que você abrir uma landing page como esta, tem algum texto e imagem, não terá nossa barra de pesquisa na seção de heróis. Então, vamos em frente e criar a seção de heróis na próxima lição, verei você em breve. 17. Design a seção de heróis: Bem, bem-vindo de volta. Então, agora que temos nossa barra de navegação e rodapé prontos, é hora de começar a criar o conteúdo principal das páginas da Web e começaremos com a página inicial. Então, não vou para esse menu de hambúrguer novamente e sair para o painel. E vamos entrar nas páginas. E agora, como mencionamos, queremos começar com a página inicial, então edite. Tudo bem, então pulando para o lado direito, aqui em Configurações, vá para o modelo. E vamos selecionar Elementor largura total. E então vamos clicar no ícone do Astra aqui para alterar algumas configurações do Astro. E assim como fizemos com a barra de navegação e o rodapé, queremos dizer que não há barra lateral. Layout de conteúdo Elementor, largura total, layout de conteúdo para largura esticada. E não queremos usar os padrões, os cabeçalhos primários e todos esses outros elementos que vêm com o Astra. Queremos criar o nosso próprio com a Elementor. Então é por isso que estamos desativando todos esses. E digamos Atualizar. E agora que está atualizado, vamos em frente e clique em editar com Elementor porque vamos projetá-lo visualmente na fronteira. Perfeito. Então, agora você notará que temos espaço entre a Napa e a pasta. E podemos começar a preencher a página com os diferentes tipos de elementos que queremos. E apenas mudando para um desses sites de referência aqui, estamos começando com a seção de heróis, que, deixe-me ir para a página inicial do Creative Market por um segundo. Então, você notará aqui no Creative Market que eles têm esse bom texto que resume o que a página inteira e todo o negócio é. E eles têm uma imagem como exemplo de parte do conteúdo que você pode encontrar no site. Então, vamos criar essas seções de heróis muito rapidamente. E parece praticamente o mesmo que a seção gráfica do herói da página de empréstimos do rio. Então, voltando para a nossa página do projeto, direi Adicionar novo. E, claro, precisamos de duas colunas. Nesta coluna. Vamos seguir em frente e adicionar. Vamos clicar no ícone de mais ali e arrastar um cabeçalho de texto para lá. Digamos algo como downloads ilimitados. Assim. Vamos entrar no estilo e mudar a cor ali para algo como 40. 40, 40. Sim. E enquanto ainda estiver selecionado, vamos em frente e mudar a família de fontes para Montserrat. E eu quero dar a ele um peso de fonte de 800. E eu quero aumentar, vamos avançar e aumentar o tamanho, o tamanho da fonte, até esse ponto. Em seguida, vamos clicar neste ícone aqui para abrir os elementos e arrastar um editor de texto para lá. E, claro, você pode personalizar esses textos para ler o que quiser dizer. Então por certo, então deixe-me remover esta última frase ali mesmo. Atualize isso. Vamos seguir em frente e adicionar um botão. Então, arrastarei um botão logo abaixo desse texto. E aqui, clicarei neste botão mais para adicionar um elemento de imagem. Clicar aqui dentro é ir em frente e procurar uma boa imagem para ter como nossa imagem de seção de heróis. Então eu acho que podemos ir com algo assim. Abra essa mídia de inserção. E já está começando a tomar forma. Mas é claro, assim como fizemos com o Napa, vamos em frente e mudar essa cor verde para combinar com o tema do nosso site. Então, selecionando esse estilo de botão. Vou para a cor abaixo do botão. Cor. E vamos dar isso 404040. E o próprio Hoover, quem queria ser isso? Amarelo? Eu ainda o tenho na minha área de transferência. Então, no entanto, é amarelo, estado normal, é preto. Mas agora queremos mudar o que os textos dizem. Então, enquanto ainda estiver ativo, vamos entrar no conteúdo e selecionar a área de texto aqui e dizer explodir downloads. Sim. E podemos ir em frente e adicionar um ícone logo antes dele. Então eu ainda estava no botão Conteúdo. Vamos selecionar a biblioteca de ícones. E digamos, Sim, algo assim. Acho que gosto disso. Insira isso. E agora temos esse lindo ícone logo antes do texto. E notei que não mudamos o texto para Montserrat, então selecionarei o botão novamente. Entre no estilo, tipografia, família da fonte, Montserrat para uniformidade. Assim mesmo. E também quer aumentar um pouco o preenchimento. Então, enquanto ainda estamos sob estilo, vou rolar para baixo e ir para o preenchimento. Remova esse link e isso destruirá o botão por um segundo. Mas o que queremos fazer é dar um preenchimento de 45 à esquerda. Isso é para 50. 45. E à direita, 45. Para o topo. Vamos dar um 20. E o fundo também. Certo, então agora temos um bom preenchimento ao redor que diz atualizar isso. E vamos reconstruir as mudanças. Precisamos de algum espaçamento aqui acima do título. Então, vamos entrar aqui e selecionar a coluna em si. E em Avançado, vamos dar-lhe o preenchimento superior. Vamos remover o link no preenchimento. Vamos dar a ele um preenchimento superior de 16. Atualize isso. E vamos visualizar as alterações. Incrível. Então, vamos selecionar a imagem e vamos dar a ela alguns cantos arredondados apenas para que ela não tenha essas arestas afiadas assim. Então, enquanto ele estiver selecionado, vou para o estilo border-radius. Vamos dar algo como 20. Atualize isso. E vamos visualizar as alterações. Sim, parece muito melhor. Então acho que agora a seção de heróis está pronta. Lembre-se que o objetivo aqui não é criar um site muito bonito no momento, estamos tentando entender como criar o sistema em si que permite que um cliente venha ao site, explore os produtos que temos. Clique em um produto, abra a descrição da página única do produto , onde eles têm todas as informações sobre esse produto específico e podem comprar ou baixar. Isso é o que realmente queremos entender. Então, vamos em frente e crie os produtos que serão exibidos abaixo da seção de heróis. E faremos isso na próxima lição. Então, vejo você em breve. 18. Crie suas categorias de produtos: Bem-vindo de volta. Nossa seção de heróis agora está pronta. Vamos sair para o painel. Então, clicando no menu hambúrguer Sair to Dashboard E vamos nos certificar de que saímos completamente do, tudo bem, então agora que estamos dentro do painel, queremos entender como estaremos trabalhando com nossos produtos à medida que progredirmos. Mas agora, minha suposição é que você estará vendendo diferentes tipos de produtos digitais. Por exemplo, se você é um designer gráfico, talvez queira vender logotipos, modelos de folhetos, modelos de pôster, modelo de perfil da empresa. Você pode estar vendendo elementos de web design e elementos de design gráfico. Portanto, essas são maneiras diferentes de categorizar os diferentes produtos digitais que você pode vender. Então, como você faz isso? Porque se pudéssemos pular rapidamente dentro do Creative Market, por exemplo, como já vimos, eles categorizam seus produtos em modelos Canva, modelos , modelos do Instagram em todas essas categorias. Então, voltando à nossa página aqui, vamos entrar nas postagens. Vou clicar em postagens. Estamos criando nossos produtos digitais como postagens. E à medida que avançamos, você entenderá que o WordPress permite que você crie diferentes tipos de conteúdo de diferentes tipos de maneiras. Em uma das maneiras de criar conteúdo para o seu site é criá-lo como uma postagem. Portanto, seu produto digital pode ser criado como uma postagem. Se você publicar artigos, você os publicará como postagens do WordPress. Você pode criar um podcast e publicar episódios de podcasts como postagens do WordPress. Então, neste momento, queremos publicar nossos produtos digitais como postagens do WordPress. E você entenderá por que isso é muito poderoso, porque é isso que nos permitirá abrir o post no front-end com Elementor e projetá-lo visualmente uma maneira bonita para crie uma boa página única, o script mostrou uma boa exibição de produtos digitais e tudo mais. Então, antes de criarmos qualquer produto digital aqui, queremos criar as categorias. Então clique em categorias. E, claro, vou fazer minhas próprias categorias. Agora, por padrão, sempre há uma categoria não categorizada. Todo conteúdo que não tem uma categoria entra na categoria não categorizada. Você não pode excluir essa categoria. Então, vamos criar o nosso próprio. Então, vou começar com logotipos. Pressione Enter revistas. Vou dizer Elementor. Digamos que essas sejam as três categorias de produtos que eu quero vender neste site. Mas é claro que você terá suas próprias categorias. Agora que temos nossas categorias definidas e podemos adicionar mais, estamos prontos para começar a criar nossos produtos digitais. Então, vamos criar nossos primeiros produtos digitais. Na próxima lição, verei você em breve. 19. Crie uma única página de descrição do produto: Bem-vindo de volta. Agora é hora de criar seu primeiro produto digital. E, como mencionei na última lição, vamos criar seus produtos digitais como postagens do WordPress. Então, para criar seus primeiros produtos digitais, enquanto ainda estamos em postagens, digamos Adicionar novo ou certo, então vamos dar um nome a ele. Algo como eu quero criar um produto que vá para a categoria Elementor. Lembre-se de que uma das categorias que criamos foi Elementor. Então, tenho alguns modelos elementares que já preparei com antecedência. E eu quero criar produtos para essa categoria para começar. Então, digamos fisiculturista, modelos. Modelo. E, claro, como de costume, vou começar entrando nas configurações do Astro e definindo isso como nenhuma barra lateral. Layout de conteúdo, largura total esticada e, em seguida, desative esses cinco itens ali e, em seguida, o rodapé. E então vamos entrar nas configurações em que os procedimentos em Modelo alteram os padrões, modelos para Elementor largura total e publicados lá. Vamos publicar isso. E nossa ortografia aqui está errada, então deixe-me corrigir a atualização deles. E com essas configurações, vamos avançar e projetá-lo no front-end usando a substituição do Elementor. Então, aqui estamos nós. Vamos projetá-lo aqui. E apenas para mostrar o equivalente ao que estamos projetando em uma plataforma diferente. Vamos para o Creative Market. E vamos abrir um dos produtos. Vou clicar neste pacote de fontes para abri-lo. E agora esta é a única página do produto que estamos projetando. Estamos projetando uma página que tenha todos os detalhes sobre esse produto específico em que você clicou. Normalmente, você encontrará na maioria dos sites que há uma imagem do produto em si. E, no lado direito, normalmente você descobrirá que tem o botão de pagamento e uma breve descrição do tipo de produto que é. E abaixo, provavelmente amostras do que se eles estão indo para dentro do rio gráfico. Vamos abrir um dos produtos aqui. Vamos entrar. Deixe-me abrir este produto. A mesma coisa, um rio gráfico. Temos essa imagem. Em seguida, temos o botão Adicionar ao carrinho e o botão Comprar agora, uma breve descrição do produto M abaixo aqui. Agora temos todas as descrições e links para links importantes relacionados a esses produtos. Então, o que estamos tentando fazer é alcançar a mesma coisa. Se eu pudesse começar criando uma coluna dupla. Aqui, vamos adicionar um elemento de imagem. E vamos clicar aqui para selecionar uma imagem. E como não temos uma imagem de produto aqui, vamos fazer o upload dos produtos da pasta. Lembre-se, mencionei que você pode encontrar essa pasta de ativos do projeto na descrição abaixo. Faça o download. Você encontrará todas essas imagens lá. E as imagens que preciso agora são 12. Vamos fazer upload de todas as imagens porque as usaremos no futuro. Assim. Também gostou dessa imagem. Insira mídia. E é assim que parece. Então deixe-me aumentar um pouco o tamanho. E deste lado, vou clicar no sinal de mais aqui e arrastar. Vamos escrever o título primeiro. E para o título, vamos dar ao produto o nome lhe demos no backend, que era modelo de fisiculturista ou RI. E vamos fazer disso um. Atualize isso. Então deixe-me clicar nisso. Você notará que temos um todo o caminho para procurar ódio e esses são títulos, níveis de cabeçalho. Um é o maior cabeçalho em HTML, enquanto o HCX é o menor e menos importante na hierarquia, uma regra geral é ter um H1 em cada página da Web. E esse é preciso ter a palavra-chave dessa página da Web em particular para se classificar em mecanismos de busca como Google e Bing. Como esta é uma página do produto, precisamos ter esse modelo de fisiculturista como um que diga aos mecanismos de busca que esta página é sobre isso. E enquanto isso ainda estiver selecionado, vou entrar no estilo para mudar a cor. Vou dar-lhe que 40, 40, 40. Vamos mudar a família de fontes para Montserrat. E vamos dar a ele um peso de fonte de 800. Eu quero selecionar esta coluna aqui, apenas para que possamos adicionar algum preenchimento na parte superior e empurrar esses títulos de modelo de construtor de corpo para baixo. Então, enquanto a coluna ainda estiver selecionada, entrarei no avançado. Remova esse link ali e dê a ele uma margem superior do preenchimento superior de 50. Tudo bem, então isso é um bom espaçamento lá em cima. E agora clique nisso e vamos arrastar breve descrição aqui logo abaixo desse texto. E clique nesse ícone aqui para abrir os elementos. E vamos arrastar um botão logo abaixo. Por enquanto, este é um botão de suporte de lugar substituirá este botão pelo botão de download ou compra real. Então, estamos apenas deixando lá por enquanto. Então, isso desaparecerá em algum momento em lições futuras. Então, vamos alterar esse texto para download. Dê a ele um D maiúsculo, atualize isso. E agora observe que a imagem e o texto estão muito próximos, então precisamos de algum espaço entre essas duas colunas, selecionando a seção que está segurando as duas colunas. Queremos dizer em Layout, lacuna de colunas, Digamos amplo, Digamos mais amplo. Atualize isso. E vamos visualizar as alterações ou escrever super incrível, agora está começando a tomar forma. Vamos mudar esse verde para rimar com o resto do site. Então, selecionando esse botão ali. Vamos entrar no estilo. Vamos dar essa cor amarela. Atualize isso agora para obter consistência, sempre, sempre que você estiver usando qualquer amarelo aqui, certifique-se de que seja o mesmo amarelo. Então, basta copiar o código em algum lugar e em qualquer lugar que você queira colocar o amarelo, use esse mesmo código. Então, neste momento, é assim que parece ao passar o mouse. Queremos que seja preto. Então, vamos entrar na cor do mouse. É assim que ficaríamos. Enquanto ainda estamos aqui. Vamos para o preenchimento e separar isso. Então vamos dar um preenchimento à esquerda de 45. 45. E isso é 450 novamente. 45. Acho que talvez vamos dar a isso um 15. 15. O gosto que eles são agora. E vamos selecionar a imagem. Gosto de ter cantos arredondados. Então vou selecionar a imagem, coincidir Estilo e descer o raio da borda e dar-lhe um raio de borda de 20. Sim, eu gosto muito disso. Atualize isso. E vamos visualizar as alterações. Ou certo, está começando a tomar forma. Então, se, por exemplo, sua empresa estiver vendendo e-books ou cursos, claro que essa será a imagem de seus cursos. Você precisa torná-lo atraente e bonito. A próxima coisa que queremos fazer é adicionar alguma descrição abaixo aqui. Então, vamos criar um, vamos torná-la uma coluna dupla novamente, e vamos dar um select essa seção em si, vá para Avançado, quebre esse link de margem aqui. E vamos dar uma margem máxima de 50 para que possamos separá-la desta outra seção. Então, vamos dar um 50. E agora há essa sala entre eles. Então, aqui, vamos clicar no sinal de mais lá e arrastá-lo para lá. E eu quero selecionar isso e quero mudar isso para. Modelos, este schon. Então esta é a descrição. Claro, vamos mudar essa cor para a cor que gostamos para obter consistência, clicando em qualquer lugar lá fora para se livrar disso. E então vá para a topografia, família da fonte, mude-a para Monterrey. E vamos dar talvez esse tamanho. Vamos arrastar isso até provavelmente esse ponto e você verá o porquê em breve. Então, selecionando isso novamente, quero dar a ele um peso de fonte de 800. E, em seguida, logo abaixo dele. Vamos em frente. Vamos clicar nisso para abrir elementos e vamos adicionar alguma descrição aqui. Vou copiar tudo isso e duplicá-lo bem ali. Assim como um exemplo de sua descrição do produto, mas ele precisa ser detalhado. Deixe-me apenas atualizar isso. Então é isso que você fornece aqui. Tudo bem, a próxima coisa que queremos fazer é copiar este botão. Copie isso. Clique em qualquer lugar neste editor de texto e cole. Vamos atualizar isso e visualizar as alterações. Vamos rolar para baixo. Então é isso que temos, mas aqui, não há espaço entre esses elementos. Então, vamos aumentar esse espaçamento abaixo. Então essa é esta seção. Selecionarei a seção, vou para a margem inferior e darei talvez algo como 90. Então, agora aumentamos o espaçamento de 90 pixels na parte inferior desta seção, logo antes de onde ela se encontra com uma pasta. Então, vamos visualizar as alterações. Tudo bem, então agora temos essa boa lacuna ali. Mas não terminamos. Precisamos adicionar mais alguns itens lá. Quando precisamos adicionar itens provavelmente relacionados, como produtos relacionados e algumas descrições de produtos aqui. Então, voltando aqui, gostaria de entrar aqui e clicar no sinal de mais aqui. Vou digitar list. Arraste essa lista de ícones lá dentro. E para aumentar o espaçamento entre essas duas colunas aqui, selecionarei a seção em si. Vá para Layout. Espaço de colunas mais amplo. Preciso deles muito amplos. E agora é aqui que fornecemos a descrição do produto em resumo, por exemplo, coisas como tamanho do arquivo, digamos algo como formatos JSON de 2,52,5 MB ou RI. Vamos ver quais outras coisas gostaríamos. Algo como? Vamos duplicar isso, vamos adicionar outra descrição. Então, isso pode ser versão ou escrever algo desse tipo. E, claro, vamos dizer a esses botões para serem consistentes com um site. E eu não gosto dessa cor amarela. É cremoso 2. Queremos o botão preto, mas amarelo próprio paira. Então, vamos trocá-los. Quero copiar esse amarelo entrando aqui no estado do mouse, colá-lo lá e depois voltar ao normal e mudar isso para assim. Isso é muito melhor. Vamos deixar isso amarelo, e vamos deixar isso como preto. Então, selecionando este de novo. Vamos seguir em frente e dizer estilo. Para o ícone. Vamos mudar isso para o amarelo. Acabamos de copiar. Colado assim. Deixe-me dar-lhe uma cor de pairar. Tudo bem. Vamos para os textos. Também dê esse efeito de paira. Agora faça o mesmo amarelo para consistência. Então, vamos revisar as alterações. O único produto aqui está tomando forma. Temos uma imagem. O cliente pode ler a breve descrição do que você quiser dizer a eles aqui e fazer a compra. Lembre-se de que dissemos que vamos substituir esse botão pelo botão compra ou comprar agora ou adicionar ao carrinho. Se forem produtos gratuitos, teremos um botão de download aqui. E, claro, aqui, o cliente pode ler mais detalhes sobre o produto em si e ter uma rápida visão geral dos dados importantes sobre esse produto aqui. E eles podem ir em frente e baixá-lo ou mais uma vez. Por isso, queremos tornar o mais fácil possível para o cliente comprar. É por isso que temos esses botões por toda parte. Não queremos que eles tenham que rolar até o topo para procurar o botão de download. Então, se eles rolaram até algum ponto em que não conseguem ver o botão de download, você precisa ter outro botão Download ou por botão. E temos a pasta. Depois de criarmos mais produtos terão produtos relacionados logo abaixo deste botão Download. Não teremos isso agora. Mas é assim que criar a única página do produto. Agora, tudo o que precisamos fazer para ter produtos para exibir em um site é criar mais produtos como esses. Então, quero criar mais produtos digitais como esse. Digamos como fazer isso na próxima lição. 20. Crie um modelo de página de descrição de produtos: Bem-vindo de volta. Na última lição, vimos como projetar essa única página de descrição do produto. Agora, tudo o que precisamos fazer para ter produtos para exibir em um site é criar mais produtos como esses. Então, quero criar mais produtos digitais como esse no back-end. Então, voltando aqui, vou dizer que o menu de hambúrguer Sair to Dashboard. E nosso legado completamente daqui. Então nosso corpo constrói um modelo, está pronto. Agora, tudo o que precisamos fazer é criar muitos outros produtos aqui. Haverá listado aqui e poderemos exibi-los no front-end. Deixe-me apenas clicar. Será capaz de listá-los abaixo da seção de heróis aqui. Então, voltando aqui, vou dizer Adicionar novo e vou repetir o mesmo processo que fiz para o modelo de fisiculturista. Então, direi Adicionar novo. E vou chamar esses produtos algo como modelo de garçom. Vou entrar nas configurações, modelo, Elementor, largura total e entrarei nas configurações do Astro. Mais uma vez, sem barra lateral. Largura total esticada. Estes, Abel, todos esses, todo o caminho até o título. E o rodapé publicou isso. Um agora publicado, vamos avançar e projetá-lo no front-end com o Elementor. Tudo bem, então aqui estamos nós. Se eu pudesse abrir uma nova guia e entrar no painel, quero mostrar algo muito rapidamente. Vamos entrar no post. E agora temos dois produtos. Claro. Aqui estamos tentando projetar o modelo de garçom, certo? Mas já criamos isso. Então, se abrirmos com Elementor, direi Editar com Elementor. E aqui temos o único produto que já criamos. Nós gostamos de como parece. E este novo produto parecerá exatamente o mesmo que este outro produto, apenas que os detalhes serão diferentes, a imagem será diferente, mas o layout permanecerá o mesmo. Então, realmente não devemos perder tempo reconstruindo o que já construímos. Existe uma maneira de reutilizar o que já criamos? Bem aqui em outra página. Sim, isso é muito possível. E é isso que vamos fazer. Mas antes de fazermos isso, vamos aguçar esta página um pouco. Vamos reduzir esse ritmo aqui selecionando esta seção. Vá para dentro avançado. Lembre-se de que adicionamos alguma margem superior. Queremos reduzir isso a algo como Swanee, assim. E vamos atualizar isso e visualizar as alterações. Agora, isso é mais parecido com isso, mas eu quero aumentar o espaçamento aqui em cima porque parece estar muito perto do topo. Então, selecionarei esta seção avançada, removerei esse link e darei talvez uma margem superior de 30. Em algum lugar lá. Atualize isso. E vamos visualizar as alterações. Gosto de onde ele está localizado agora. Portanto, há espaçamento entre essa parte e essa parte, então ela parece uniformemente espaçada. Muito mais apresentável. Agora que estamos satisfeitos com o modelo em si, vamos voltar para dentro dessa página onde ele está localizado. E enquanto estamos aqui dentro, clique neste ícone de seta aqui para Salvar. E clique em Salvar como modelo. Vamos dar a ele um nome como uma única página de produto. Em seguida, acerta, Enter ou clique em Salvar. Agora temos isso aqui. Está disponível para usarmos em qualquer outra página que quisermos. Então deixe-me agora fechar o espaço porque já terminamos com este modelo de fisiculturista. Só queríamos dizer isso. Vou fechá-lo. Vou fechar essa página de visualização. Feche isso. Deixe-me fechar todas essas outras páginas. E agora ficamos com esta página onde estamos criando o segundo modelo, que é o modelo ponderado. Então, se eu puder atualizar a página pressionando Control R. para atualizar a página. Agora, com uma atualização de página, vou clicar neste pequeno ícone aqui para adicionar o modelo. E essa janela aparecerá. Vou abrir meus modelos e agora você descobrirá que a única página do produto que acabamos de salvar já está disponível. Então clique em, Inserir e diga Sim. Tudo bem. Então, agora preenchemos nossos segundos produtos digitais com o modelo que podemos editar. E podemos reutilizar o mesmo modelo ao criar mais produtos digitais. Então, deixe-me atualizar isso. E deixe-me mudar isso para garçom igual. Então modelo de garçom. Então mude isso para modelo ponderado também. Atualize isso. E eu vou clicar na imagem em si. Selecione a imagem. E vamos selecionar essa segunda imagem para representar esse produto em particular. Portanto, este é um modelo elementar para esse site. Vamos atualizar isso. E vamos visualizar as alterações. E lá temos isso. Nosso segundo produto digital está pronto. Então, voltando para dentro do nosso editor aqui, agora que estamos satisfeitos com essa página em particular, vamos para este menu de hambúrgueres Sair to Dashboard. Agora, saia completamente daqui. E agora temos esses dois modelos. Então agora vou repetir a mesma coisa para mais alguns produtos, cerca de seis ou sete deles. Portanto, temos um número substancial de produtos com os quais trabalhar. E como esse é o mesmo trabalho repetitivo, vou avançar rapidamente esta seção e espero que você também demore algum tempo para criar mais produtos digitais usando o modelo que acabamos de salvar. Então, vejo você depois criar todos os produtos digitais. Então, aqui estamos nós. Acabarei de criar seis produtos da mesma forma que criamos o primeiro para a. Agora que temos esses seis produtos digitais, vamos para o front-end e ver o que temos. Então, vou para dentro das páginas. E queremos ver como é nossa página inicial porque as próximas lições, veremos como exibir esses produtos provavelmente. Então, apenas mudando rapidamente para o Creative Market, queríamos exibir esses produtos dessa maneira. Então, como fazemos isso? Vamos ver como fazer isso na próxima lição, verei você em breve. 21. Exibindo produtos digitais em uma categoria: Bem-vindo de volta. Na última lição, criamos nossos produtos digitais. Nesta lição, queremos ver como exibi-los no front-end para que os clientes possam explorá-los. Então, como fazemos isso? Como exibimos nossos produtos de forma apresentável como esta? Vamos seguir em frente e fazer isso. Então, voltando para dentro do nosso painel, vamos entrar aqui. Vamos antes de tudo, ver a página. Então, vou clicar com o botão direito do mouse e abrir o link em uma nova guia para que possamos ver o que temos atualmente. É assim que a página se parece. Não temos nada depois que a seção herói é a pasta. E queremos algo assim ou algo assim. O que temos no porco gratuito ou o que temos no mercado Envato. Então, voltando para dentro, queremos vir e dizer Editar com Elementor. Porque lembre-se que criamos esta página com o Elementor. Assim, podemos vir aqui e dizer Editar com Elementor. E isso abrirá o editor Elementor. Tudo bem, então aqui estamos nós. Agora podemos começar a adicionar conteúdo logo abaixo da seção de heróis. Então, vamos começar adicionando uma seção de largura total, coluna única. E vamos adicionar alguma margem na parte superior para separá-lo da seção de heróis. Então, clicando nisso, vou entrar avançado. Remova esse link e dê a ele uma margem superior de 50 ou direita. Então agora temos esse espaço agradável e uma dica rápida que acabei de lembrar de mencionar aqui, quando você passa o mouse sobre esta coluna ou esta seção ou qualquer outro elemento que você possa editar aqui. Ele precisa mostrar um pop-up rápido que tenha alguns atalhos rápidos. E você faz isso entrando neste menu de hambúrguer, preferências do usuário. Editando alças. Altere isso para sim e diga Atualizar. E vou te mostrar o que isso faz. Então, agora, quando você passa o mouse sobre essa coluna, ela traz essas outras opções que podem permitir que você execute ações rapidamente. Por exemplo, se eu quiser duplicá-los, tudo o que preciso fazer é clicar lá. E agora temos duas colunas. Quero duplicar esta seção. Tudo o que preciso fazer é clicar nisso, e lá temos isso. Então, agora, enquanto estamos aqui dentro, deixe-me excluir essa coluna porque precisamos apenas de uma. Vou clicar no sinal de mais lá. E aqui, vou procurar por ganância. E não temos uma ganância e queremos exibir nossos produtos como uma ganância. Se você olhar para isso, isso parece uma ganância. Então, voltando aqui, precisamos de um plugin que amplie o poder do Elementor. Lembre-se, mencionei anteriormente que temos plugins que estendem o poder do Elementor. Então, outro plugin que faz isso é complementos essenciais para o Elementor, nos dará a opção de adicionar uma ganância. Então, vamos voltar para dentro do nosso painel. Plugins, adicione novo. E aqui eu quero digitar complementos essenciais para o Elementor. Qualquer um deve ser o primeiro. Então, vou instalar agora. Vamos prosseguir e ativá-lo. Vamos selecionar Avançado e selecionar Avançar. Basicamente, o que isso é, se você selecionar Básico, você terá menos desses recursos ativados. Mas se você selecionar avançado, você terá mais recursos que queremos habilitados, sendo um deles ganância, a opção de grade. Então, queremos a opção avançada aqui, diga a seguir, e isso é o que eu quis dizer. Então, ao escolher o básico, você teria muito poucos deles selecionados. Até agora que tínhamos selecionado avançado, temos mais desses recursos verificados e um deles é post greet, que é o que estávamos procurando. Então vou dizer em seguida, seguida, em seguida, Dani roubou todas essas outras coisas. Em seguida, termine. Então, agora que temos complementos essenciais para o elementar instalado, vamos para o front-end. E antes de tudo, deixe-me atualizar essa página. E então eu pressionarei Control R para atualizar a página para que possamos ter acesso a complementos essenciais para o Elementor. E agora que complementos essenciais para elementais estão instalados, deixe-me colapsar isso e todos esses outros painéis aqui. E agora você notará complementos essenciais é um dos, um dos painéis aqui. Então, vou digitar a ganância. E desta vez ele trará a postagem, nós, arrastarei esses gradientes de postagem para a única coluna aqui. E a queda momentânea. Mostraremos os produtos que acabamos de criar. Vamos atualizar isso. E agora a próxima coisa que queremos fazer é trabalhar nesta tela. Como fazemos com que pareça apresentável assim? Então, voltando aqui, vamos selecionar essa ganância. E enquanto isso é selecionado e é o elemento ativo aqui, agora podemos começar a fazer alterações em como o Luke exibe. Então, antes de tudo, vamos recolher essa consulta. E você notará que temos três painéis aqui. Portanto, o primeiro painel é sobre onde os dados estão vindo. Então lembre-se de que tínhamos categorias por padrão. Ele está exibindo os produtos que estão na categoria não categorizada. Então, se voltarmos aqui e olharmos para as categorias de postagens. Lembre-se de que criamos essas três categorias e depois tínhamos a categoria sem categoria. E se entrarmos em todos os posts, lembre-se, enquanto estávamos criando esses produtos, não lhes damos uma categoria de produto, então todos eles automaticamente forma justa na categoria não categorizada. Então, agora, quando vamos para o front-end, por isso que, por padrão, eles são exibidos aqui. Então, o que precisamos fazer é porque estes são produtos elementares e temos uma categoria elementor, podemos voltar para todas as postagens. E agora podemos definir a categoria para cada produto. Vou mostrar dois métodos e como definir a categoria. Então, o primeiro método está entrando em edição em qualquer um dos produtos. E aqui no lado direito , nas configurações, logo abaixo do modelo. Lembre-se que dissemos o modelo para Elementor largura total, alguns painéis abaixo das categorias de facilidade do modelo. Se você clicar nisso, ele revelará todas as categorias disponíveis. Desmarque o não categorizado e defina-o como Elementor porque este é um modelo elementar. Atualize isso. E agora vamos sair daqui. E agora você notará que ele foi alterado para a categoria Elementor. O segundo método está fazendo isso aqui com o método de edição rápida. Edição rápida. Quando você clica nisso, ele exibirá todas as opções que você pode editar. Então, uma delas será as categorias. Então, desmarque isso e marque Elementor e atualize. E vamos repetir isso para o resto. Então, vou editar rapidamente esse Elementor e verificar isso. Atualize isso. E agora todos eles estão na categoria Elementor. Então, agora voltando para nossa página aqui, primeiro atualizarei e depois atualizarei a página pressionando Control R. Então, agora com uma atualização de página, vamos selecionar a grade novamente clicando em em qualquer lugar dentro dele. E agora dentro das categorias, vamos digitar Elementor. E agora ele trará esse elementar ali mesmo. Então, agora temos muita certeza de que todos esses são modelos elementares. Eles não são modelos em nenhuma outra categoria. Então, a próxima coisa que queremos fazer é entrar nas configurações de layout. E não precisamos de todos esses detalhes. Então, vamos fazer uma mudança nisso. Primeiro de tudo, atualizarei esta página ou à direita. E não quero mostrar a data, o nome do autor, um avatar. Então isso se livra de todas essas coisas abaixo do botão Leia mais. Quero mostrar o botão Leia mais, mas precisava dizer Exibir modelo. E também não quero mostrar o trecho. Esses detalhes estarão disponíveis quando eles clicarem neles. Abra a página única, a única página do produto que criamos anteriormente. Então, vamos atualizar essa página. E agora precisamos ter uma imagem para cada produto que criamos. Então, como obtemos as imagens aqui? Vamos voltar à nossa lista de produtos. A menos que entre em cada produto e defina uma imagem em destaque. Então, por exemplo, modelo de saúde vital. Então, antes de tudo, quero ver qual produto esse era. Então, vou ver isso em uma nova guia. E é essa ou essa senhora. Então, entraremos e editaremos essa página. E, em configurações, vou rolar até a imagem em destaque e clicar em Definir imagem em destaque. E, uh, então eu acho que era essa senhora, aquela imagem deste aqui Set Featured Image. E lá temos isso. Atualize isso. Vamos voltar. Vamos clicar com o botão direito do mouse e ver qual produto esse era esse cara aqui. Então, eu só quero editar isso. Em configurações. Vamos rolar todo o caminho até Imagem em destaque. Clique nisso. E foi esse cara aqui. Vou repetir o mesmo para o resto dos produtos, definindo a imagem em destaque. Então deixe-me avançar rapidamente esta seção. E agora acabei de definir a imagem em destaque para todos esses produtos. Vamos até o front-end e atualizar esta página caso você não tenha salvo suas alterações, atualize pressione Control R. Tudo bem, então aqui estamos nós. As coisas estão começando a ficar melhores agora no dia. Vamos seguir em frente e selecionar a grade. E com ele selecionado, vamos recolher a consulta e expandir as configurações de layout. Precisamos ter três colunas. Eu prefiro três colunas. E vamos voltar à consulta e dizer que precisamos de seis produtos por página por enquanto. Vamos mudar isso em breve, mas digamos que seis produtos por página em exibição. Então agora temos uma grade de seis produtos. E agora vamos recolher a consulta e expandir as configurações de layout. Agora temos três colunas, seis produtos. Vamos mudá-los para h3. As etiquetas de título serão odiadas três, porque o que queremos fazer é adicionar um H2. Antes disso. Primeiro atualizarei isso. E vamos clicar nisso e arrastar um título para lá. Vamos colocá-lo no meio. E deixe-me chamá-lo de modelos elementares porque esta é uma categoria de modelos, elementos MAR de modelos. Claro, vamos estilizar isso. Vou mudar a família de fontes para Montserrat. Vou reduzir um pouco o tamanho e aumentar o caminho da fonte para 800. Atualize isso. E agora vamos visualizar as alterações no estado. Vamos rolar para baixo e ver o que temos. Pelo menos parece muito melhor do que o que tínhamos. E, claro, vamos fazer com que pareça muito mais apresentável à medida que progredirmos. Estamos apenas começando agora. Então, voltando para dentro, enquanto isso ainda estiver selecionado, queremos entrar no estilo. E agora deixe-me colapsar o estilo Post Greed por um momento para que você possa ver todos os painéis que temos. Então, temos o estilo de miniatura. Então, essa imagem, meta style, significa os elementos que aquecemos que estamos aqui. Meta posição, calótipo, epigrafia e espaçamento. Vamos começar com o estilo do botão Leia mais. Este ano. Queremos mudá-lo para branco. Mas agora o plano de fundo precisa ser 40, 40, 40. Como de costume. E então vamos remover isso. Vamos dar um preenchimento esquerdo de 20, preenchimento direito de 20, 10. E então vamos dar-lhe um raio de borda de cinco. Vamos fazer disso uma atualização yum isso. Mas agora vamos reduzir isso para cinco. Acolchoamento superior e inferior. Ou faça um pagamento que. Vamos recolher o estilo do botão Leia mais e abrir o estilo de miniatura. Vamos dar-lhe um raio de borda de 20. Assim. Para o estilo GREP post. Vamos também dar a ele um raio de borda de 20 porque agora, no momento em que você vê, ele ainda sai da imagem que tem um canto arredondado. Então, vamos também dar a isso um Tony. E agora isso está escondido. Atualize isso. Em seguida, vamos colapsar isso e vamos entrar em topografia e espaçamento. E vamos alinhar o texto ao centro. Vamos remover esse link. E para a margem inferior, vamos aumentar um pouco para que possamos espaçá-lo, talvez 10. Vamos colapsar o espaçamento de cores e tipografia e voltar para dentro do estilo do botão Leia mais para que possamos empurrá-lo para o meio. Então, vamos quebrar o link na margem e vamos aumentar a margem esquerda até o centro. Use seu olho para julgar onde está o ponto do meio. Acho que esse é um bom local. Atualize isso. E, em seguida, vamos visualizar as alterações. Tudo bem, agora nossos produtos estão devidamente exibidos, mas precisamos fazer algo sobre o botão. Empurre para isso para a direita. Então, onde está? Vamos atualizar isso em exibição das alterações. Tudo bem, estamos quase lá, então vamos aumentar muito mais. Digamos que um 100. Então aqui, bem, estamos na página de edição. Parece desalinhado, mas na página real, vamos visualizar. Agora é quase provavelmente uma linha. Eu acho que por enquanto isso é quase satisfatório, mas vamos seguir em frente e dar talvez um 110. Então, nas minhas tentativas de colocá-lo no meio, fui em frente e dei a ele uma margem de 100 à direita e um 100 à esquerda. Mas, por enquanto, vamos visualizar as alterações. E vejo que precisamos fazer algo sobre o preenchimento deste lado. Então, vamos voltar aqui. Poderíamos reduzir a margem à direita. Agora vamos aumentar a margem à direita um pouco. Talvez um ou cinco. Atualize isso. E vamos visualizar as alterações ou passeios. E agora acho que está no meio. Não sei quais valores funcionarão para você aqui, mas esses são os valores que estão funcionando para mim. Então vá em frente e tente valores diferentes até acertar. Tudo bem, então lá temos isso. Lembre-se que dizemos que a DC não se trata criar um site muito bonito por enquanto. Trata-se de mostrar a você como criar o sistema em si. Tenho certeza de que todos que estão participando dessa aula agora vamos criar um site com aparência diferente, mas o sistema subjacente será o mesmo. O sistema que permite exibir produtos dessa maneira, mas você venderá seus produtos de forma diferente, sua página e as cores que você usará. Tudo isso será diferente. Portanto, nosso objetivo aqui é aprender a criar corretamente um sistema que dê ao cliente uma boa jornada do cliente. Eles chegam ao seu site, exploram seus produtos e, quando clicam no produto, por exemplo, se eu clicar nisso, vamos ver Onde serão levados para esta página. Criamos essa página anteriormente e agora podemos ler detalhes sobre este produto. E se gostarmos do produto, podemos ir em frente e baixá-lo. Então, esse é o tipo de sistema em que estamos nos concentrando e tentaremos construir. Então, é assim que exibir os produtos em sua página da Web. Em seguida, queremos ver como adicionar outra categoria da mesma forma que adicionamos o elemento da categoria de modelos. Vamos fazer isso na próxima lição. Vejo você em breve. 22. Exibindo uma categoria de produtos digitais adicionais adicionais: Bem-vindo de volta. Na lição anterior, exibimos a categoria de modelos elementares. Então, agora queremos adicionar outra categoria, e escolhi a categoria de revistas. Então, antes de criarmos, vamos selecionar isso. Quero fazer uma pequena alteração nisso. Quero exibir apenas quatro colunas, que possamos ter uma linha. Então, enquanto isso estiver selecionado, vamos entrar nas configurações de layout, digamos para. Então, vamos antes de tudo dizer mostrar para produtos. Então, agora apenas quatro produtos serão mostrados. E vamos recolher o ângulo de consulta dentro das configurações de layout, como digamos, quatro colunas que exibirão todas elas em uma linha. Então, deixe-me apenas atualizar isso. Não se deixe enganar por um relógio vendo aqui. Se visualizarmos as alterações no front-end, será uma linha. Tudo bem, então lá temos isso, apenas uma linha de quatro colunas. Então, agora queremos adicionar outra linha de outra categoria. Então, apenas para corrigir o local, vamos atualizar a página. E lá temos isso. Então, uma coisa legal sobre o Elementor, como mostrei um pouco antes, é que você pode duplicar elementos, para que possamos duplicar essa linha assim. E agora temos duas linhas. Então, se eu atualizar isso e visualizar as alterações, agora temos duas linhas. Então, tudo o que precisamos fazer é alterar os detalhes dessa área específica. Então, vamos mudar isso para revistas, modelos de revistas. E agora tudo o que precisamos fazer é alterar a origem desses dados. Então, alteramos a categoria da qual os dados estão sendo retirados. Então, vamos fechar o Elementor porque estes não são modelos elementares e vamos selecionar a revista. Então digitando revista, ele exibirá revistas. E, claro, como ainda não temos nenhuma revista, dirá que nenhuma postagem foi encontrada porque lembre-se criamos esses produtos digitais sob o modelo elementar. Então, voltando para dentro do painel, precisamos ir para as postagens e adicionar novas. Assim, podemos criar alguns modelos de revistas como produtos digitais e, em seguida, poderemos exibi-los no front-end. Então, vamos, por exemplo, começar com, vamos entrar antes de darmos um nome, vamos entrar nessa imagem em destaque. E vamos dar uma olhada em alguns dos modelos de revistas que temos. Quero fazer upload de alguns modelos de revistas que criei anteriormente. Então, vou importar todas essas imagens e você as encontrará na descrição abaixo na pasta. À medida que a carga restante. Vamos em frente e escolher este. Vou definir isso como a imagem em destaque. E vejo que o nome é massa corporal. Então defina a imagem em destaque. Vou chamar isso de massa corporal. Modelo de massa corporal. Bem, vamos chamá-lo de Magazine. E, claro, agora em configurações, vamos dizer padrões, modelo, Elementor largura total. Vamos rolar para baixo e categorizá-lo como revistas. E aqui em cima nas configurações do Astra. Vamos mudar isso para nenhuma barra lateral. Estiramento de largura total. Vamos ser capazes disso. E agora estamos prontos para ir. Vamos publicar isso. Então agora vamos para o front-end. Tudo bem, e agora estamos no front-end dos produtos da revista. Então, o que precisamos fazer é usar o modelo que usamos anteriormente para os modelos elementares. Então, vamos entrar, adicionar modelo. Vamos para meus modelos e insira isso. Tudo bem, então lá temos isso. É claro que a primeira coisa que precisamos fazer é selecionar a imagem e alterá-la para a imagem do produto atual. E é isso. Então, vamos inserir mídia e essa é a imagem do nosso produto. Vamos torná-lo um pouco menor até esse ponto. E vamos mudar o nome. Acho que era revista de massa corporal. Provavelmente isso. Selecionarei isso e, em seguida, substituirei isso. E lá temos isso. Vamos visualizar as alterações. Tudo bem, então é assim que parece. Claro, você pode fazer com que eles pareçam muito mais bonitos do que ele agora. Então vá em frente e deixe você muito mais agradável de se olhar. Então, voltando aqui, vou clicar nesse menu de hambúrguer e sair do painel. Agora saia completamente de lá. E agora a revista body mass é um dos produtos digitais. Então vou repetir isso para talvez mais alguns produtos, da mesma forma que fizemos com os elementos são modelos. Então, vou adicionar Mu. Antes de dar um nome, vou entrar em Configurações e depois alterar o modelo para o elemento 0 4 sem, isso não é um modelo elementar, é uma revista. E vamos seguir em frente e selecionar uma imagem para ela. Vamos escolher o código da revista Pantheon, definir a imagem em destaque. Então isso é fraude. Revista Code Pantheon. E então, dentro das configurações do Astro, não se esqueça de dizer que não há barra lateral. Para largura esticada estes cinco Abel. E depois a pasta e, em seguida, publique isso. E então poderíamos ir para o front-end. Tudo bem, então vamos fazer o que acabamos de fazer com os outros produtos. Coincidir Adicionar modelo, Adicionar modelo, meus modelos, inserir esse modelo. E lá temos isso. Então, selecionando a imagem. Vamos seguir em frente e definir nossa imagem em destaque. Companheiro. Insira mídia. Acho que foi até esse ponto. Atualize isso por que não o empurramos até lá e deixamos isso um pouco. Então, vou fazer isso maior. Selecione esta coluna aqui. Vá para avançado, apesar deste, 150, como se estivessem até esse ponto e digamos atualizar. Vamos visualizar a substituição das alterações. Mas agora precisamos mudar esse nome da fisiculturista revista Pantheon código de fisiculturista. Então vamos atualizar isso. E vamos visualizar as alterações. Tudo bem, então há nossos produtos digitais, há nosso modelo de revista parecendo bem semelhante ao resto. E agora vamos voltar para dentro aqui. E como temos nossas alterações salvas, Sair para o painel. E farei isso mais algumas vezes e criarei mais alguns produtos digitais. Mas, para evitar torná-los monótonos demais, vou avançar rapidamente esta seção. Então, vejo você depois de criar os produtos. Então agora acabei de criar esses produtos digitais de revistas. Temos cinco deles. Então eu quero mudar para o front-end e ver o que temos ou como eles olham no momento. Então, vá até a nossa página inicial e atualizando a página pressionando Control R. Então, vamos rolar para baixo. E aqui temos nosso novo modelo de revista de categoria. Mas é claro, como você pode ver, os botões parecem um pouco estranhos. Então, vamos voltar e alinhá-los corretamente. Então Edite com Elementor aqui. Então, vamos rolar para baixo. Vamos começar com isso. Então, selecionando isso, Vamos entrar no estilo, estilo botão Leia mais. E vamos reduzir a margem do lado esquerdo para talvez 50. Vamos atualizar isso. Vamos fazer o mesmo para esta seção. Selecione isso, entre no estilo. Leia mais estilo de botão. Vamos dar a isso uma atualização de 50 ou escrever isso. E vamos visualizar as alterações. Certo? Então, vamos empurrá-lo ligeiramente para a direita. Então, talvez 60, 65 ou 70. Agora vamos dizer que 60. Vamos selecionar isso. Estilo do site indo. Botão Leia mais 16. Atualize isso. E vamos visualizar as alterações. Certo, então eles parecem incríveis no momento. Então, do topo, temos a barra de navegação. Então temos nossa seção de heróis. Então aqui estão nossos produtos em diferentes categorias. E temos nosso rodapé. Mas vamos aumentar o espaçamento aqui abaixo desta seção. Então selecione a seção entrando em avançado. E vamos dar uma margem inferior de 90 como a outra. Então agora temos um espaço de 90 pixels entre esta seção aqui e o rodapé. Então atualize isso. E vamos visualizar as alterações. Então, rolando para baixo. Incrível. Então agora temos esse bom espaçamento lá embaixo, mas ainda não terminamos com esta página. Em uma lição posterior, adicionaremos um formulário de inscrição em algum lugar aqui nesta página para que possamos capturar e-mails de usuários para poder manter contato com eles, informá-los sobre novos envios e tal tipos de coisas. Então, por enquanto, é assim que criar e exibir os diferentes produtos como categorias de produtos na página de destino. Acho que acabamos com isso por enquanto. A próxima coisa que queremos fazer é criar a página de downloads. Então deixe-me rolar para fora. Queremos criar essa página de downloads e é aí que agora todos os produtos serão exibidos. Então, vamos criar a página de downloads na próxima lição. Vejo você em breve. 23. Configure a página Elementor como página de casa: Bem-vindo de volta. Agora, já criamos nossa landing page ou nossa página inicial. Mas agora, se você olhar para o URL na barra de endereços aqui, você notará que ele tem essa extensão inicial. E caso eu tenha esquecido de mencioná-lo, usei meu nome de domínio para criar esse site de demonstração. Mas você notará que estamos na página inicial. Mas ele tem essas extensões após o domínio. Então, o que queremos é não ter essas casas para que seja poeira www pontilhe seu website.com ou pontue qualquer extensão, mas sem cortar nada. Então, apenas para mostrar exatamente o que quero dizer, se eu pudesse simplesmente pular para pic.com grátis na página de destino, o URL é grátis PQ.com, não é grátis pic.com slash home. Como definimos isso no WordPress? Porque o que acontece é se não definirmos uma página inicial por padrão, deixe-me, deixe-me, por exemplo, remover essa casa e, em seguida, pressionar Enter. Ele será levado para uma página estranha que tenha a página de curtir WordPress padrão. Isso não parece bom. Queremos que as pessoas sejam levadas para a página que projetamos com o Elementor. Então, como fazemos isso? Então, pulando dentro do nosso painel, vamos entrar em Configurações e clicar em leitura. Uma das opções aqui será sua página inicial exibida. E, por padrão, ele será definido para suas últimas postagens. Então, altere isso para uma página estática. E a partir deste menu suspenso aqui, obteremos uma lista de todas as páginas que criamos e podemos definir a página inicial como nossa página inicial. Agora, com isso dito e as configurações salvas, vamos voltar ao front-end. Basta selecionar isso e agora vamos pressionar Enter. Lá, nós o temos. Agora, quando as pessoas digitarem nosso URL base, será levado para a página inicial que projetamos com o Elementor. Então é assim que configurá-lo. Na próxima lição, quero mostrar como definir os links de parâmetros e quais são os links primários. Vamos descobrir. 24. 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. 25. Crie a página de downloads: Bem-vindo de volta. Na última lição, vimos como criar e exibir nossos produtos em categorias em nossa página inicial como esta. Então, agora nesta lição, queremos ver como exibir nossos produtos na página de downloads. E a página de downloads é a página que exibirá todos os diferentes tipos de produtos que temos. Então você pode pensar neles como a biblioteca. Então, a landing page aqui dá aos visitantes uma prévia do que eles devem esperar. E quando eles clicam na página de downloads, você deve encontrar todos os nossos produtos. Então, vamos clicar em baixar e ver como a página se parece no momento. Então é assim que nossa página se parece. Este é um modelo padrão do WordPress. Então, o que precisamos fazer é editar esta página da Web com o Elementor. Então, precisamos construí-lo visualmente com o Elementor. Então, temos um atalho aqui, edite a página, podemos clicar nisso. As páginas do painel, os downloads e, em seguida, Editar. E aqui estamos nós. Então, a primeira coisa que precisamos fazer é entrar nas configurações do Astro para que ele já esteja ativo. E na barra lateral, digamos que nenhum layout de conteúdo da barra lateral para largura. Vamos esses Abel, estes cinco e depois o sexto aqui. E atualize isso. Vamos também garantir que dentro das configurações, nosso modelo esteja definido como placa de largura total Elementor que também. E agora que nossa página está atualizada, vamos editar com o Elementor. E aqui temos isso. Então, o que queremos fazer nesta página é exibido os produtos como uma galeria filtrável. E vou te mostrar como fazer isso. Então, o que precisamos fazer é selecionar uma seção de coluna única de largura total. Assim. Vamos selecionar a seção. E por dentro avançado. Remova esse link lá em cima e vamos dar a ele uma margem superior de 50. Ou certo. Clique no sinal de mais lá. Vamos arrastar um título para dentro. E vamos mudar isso para algo como o Explorer downloads enquanto ele ainda estiver selecionado. Vá para dentro do estilo. Vamos mudar a cor para como coincidir topografia, mudar a família de fontes para Montserrat. Clique lá fora para se livrar disso. E então, enquanto ainda somos insights, eu epigrafia, vamos mudar o peso da fonte para 800. E vamos aumentar o tamanho dessa fonte para talvez esse ponto. Em algum lugar lá fora. Clique em algum lugar fora, entre no conteúdo e vamos colocá-lo no meio. Então logo abaixo. Selecione isso. Vamos clicar nesse pequeno ícone e vamos arrastar alguns textos logo abaixo do cabeçalho. E isso pode ser algo como certo. E então vamos entrar no estilo e empurrá-lo para o centro. E agora temos uma breve descrição do que estamos prestes a colocar abaixo aqui. Então, a próxima coisa que queremos fazer agora é adicionar nossa galeria filtrável abaixo deste título, este texto. Então, vamos em frente e clique neste pequeno ícone aqui para abrir os elementos. E eu quero digitar a galeria filtrável de filtro. É um dos elementos trazidos por complementos essenciais para o Elementor. Então, vamos arrastá-lo e soltá-lo logo abaixo quando essa linha azul aparecer. E lá temos isso. Então, é claro que esses são detentores de lugar. Agora cabe a nós editá-los e transformá-los em produtos. Então, antes de tudo, vamos atualizar isso. E vamos visualizar as alterações. Então é assim que nossa página será . Quando alguém clica. Ícone de zoom aqui. É suposto trazer a imagem para que eles possam ter um pouco de visão do produto e eles possam percorrer todos os diferentes produtos. Vamos escapar disso. E quando eles clicarem neste ícone de link aqui, será levado para o produto de página única desses produtos específicos. Então, vamos ver como fazer isso. E antes de adicionarmos os produtos em si, vamos adicionar alguma margem logo abaixo aqui para ter um bom espaçamento entre os dois elementos. Então, vamos entrar aqui. Selecione uma seção que contém todo esse conteúdo. E agora queremos adicionar alguma margem abaixo dela enquanto ela ainda estiver selecionada. Fundo de margem avançada. Vamos dar 90 dias. Esse espaçamento de 90 pixels entre esta seção e o rodapé. Então, vamos atualizar isso e visualizar as alterações. Tudo bem, então eu gosto de como parece. Vamos voltar e editar os produtos. Voltando aqui, selecionarei em qualquer lugar aqui dentro. E agora a eliminação ativa é uma galeria filtrável. Então, deixe-me recolher as configurações primeiro. E você notará que temos cerca de quatro painéis. Então, vamos começar com as configurações. Configurações internas. Isso determina quantos itens você deseja mostrar. Então, atualmente, está definido como seis. Podemos defini-lo para 12, por exemplo, digamos 12. Podemos defini-lo para 12, mas é claro que teremos que criar 12 produtos para poder mostrá-los. Então, atualmente, eles têm seis espaços reservados verão como criar todos esses produtos. Em seguida, vamos recolher as configurações e entrar nos controles filtráveis. Então, agora os controles filtráveis são nossas categorias. Então lembre-se de que tínhamos um logotipo, categoria , categoria elementar e categoria de revistas. Então eles vão até aqui e são nossos controles para determinar o que está em vista, o que é visível no momento. Então, sob controles filtráveis, vamos aqui para o item da galeria. Clique nisso e vamos alterar esse item da galeria para elementor. Tudo bem, então vamos clicar nisso para colapsá-lo e vamos duplicá-lo. Então, agora temos dois controles filtráveis. Vamos clicar nisso e dar outro logotipo de categoria. Vamos colapsar isso. E agora você notará que temos duas categorias aqui em cima. Vamos adicionar mais uma revistas que e vamos visualizar as alterações. Certo, então lá temos isso. Agora, como mencionei, quando você clica em qualquer um desses itens, os produtos que estão nessa categoria ficarão visíveis aqui e os outros ficarão ocultos. Então, quando clicamos em Elementor, somente os produtos que estão na categoria elementar aparecerão quando você clicar no logotipo. O mesmo caso se aplica quando clicamos em todos, então todos os produtos em todas as categorias ficarão visíveis. Então, vamos agora criar os produtos. Então, irei em frente e colapso controles filtráveis e expandirei os itens da galeria. Esses são nossos produtos e fora. E, como você pode ver, temos seis espaços reservados que agora podemos editar com nosso próprio conteúdo. O primeiro item aqui, você notará que temos o nome de controle. Isso é para perguntar qual controle filtrável está controlando esse item. E então nossos controles são essas categorias que acabamos de criar aqui. Nos controles filtráveis. Esses são nossos controles. Então deixe-me colapsar isso, digamos colapso elementar, que itens da galeria. O primeiro item será um modelo elementar. Então, vou clicar nisso. É controlado pelo controle Elementor. E é chamado de modelo de fisiculturista. Lembra-se disso? E eu vou rolar para baixo e você verá onde podemos mudar a imagem. Então clique lá. E acredito que essa foi a imagem. Escolha essa imagem e insira mídia. E lá temos isso. Há nosso produto. Então, vou repetir o mesmo para todos os produtos. Vou colapsar este modelo de fisiculturista e expandir o segundo produto, que também é um modelo elementar. Então, o controle é Elementor. O nome é, vou inventar um nome para que possamos dizer tempo. Tínhamos um modelo de garçom, a propósito, modelo de garçom. E você pode alterar essa breve descrição que está aparecendo aqui. Vamos rolar aqui para baixo e alterar essa miniatura. Então, vamos dar essa imagem aqui. Insira mídia. E há nosso segundo produto. Vamos para os terceiros produtos. Vou rolar para cima e me lembrar disso. Agora, para que esse link funcione, é aqui que você adiciona o link, então baixe ou algo desse tipo. E agora, quando alguém clicar nesse link, ele será levado para esse URL. E se você quiser que este link abra em uma guia diferente, clique nesta roda dentada aqui e diga abra uma nova janela. Vamos atualizar isso. E vamos visualizar as alterações. Então, lá temos isso. Quando alguém clica neste link, observe o URL que acabamos de adicionar há um momento. Ele abrirá em uma nova guia. Uma página ainda está intacta. E isso é porque dizemos abrir nova janela. Se desmarcarmos isso e atualizamos isso e visualizamos as alterações. Se clicarmos nisso, ele carrega na mesma página e perdemos tudo em que estávamos trabalhando. Então, vamos voltar aqui e vamos criar um terceiro produto. Vou rolar para cima e colapsar o segundo produto. Expanda o produto PRD. Ainda é um produto elementar. Então, vou rolar para baixo e mudar a miniatura. Então, vamos selecionar isso. Tudo bem, Awesome. Agora vou em frente e criarei mais três produtos aqui e adicionarei mais alguns depois disso. E como esse é o mesmo trabalho repetitivo que já fizemos aqui, vou avançar rapidamente esta seção. Reserve um momento e crie todos esses outros produtos. E vamos nos encontrar depois que terminarmos isso. Então, vamos. E então aqui estamos nós. Estou de volta. Acabei de criar mais alguns produtos aqui. Como você pode ver, temos revistas e logotipos adicionados, para que possamos ter alguns itens nessas categorias. Então eu repeti a mesma coisa que fizemos para esses dois produtos. Acabei de entrar. Por exemplo, esse logotipo, logotipo simples. Aloquei os logotipos do nome de controle porque controles filtráveis. Um dos controles lá é logotipos, então é suposto ser logotipos. O nome nos controles filtráveis deve ser o mesmo que o nome que você dá o controle aqui. Então, sob logotipo simples, nome do controle é logotipos. E eu dei um nome, alguma descrição, e selecionei uma imagem para ele. Se eu tivesse um link, eu o adicionaria aqui. Então eu fiz exatamente esse mesmo método para todos esses produtos diferentes aqui. E isso é o que você vê aqui. Então, vamos atualizar isso e visualizar as alterações. Tudo bem, então aqui estamos na página. Deixe-me rolar para baixo para que possamos ver o que temos. E a página está linda. Gosto da aparência porque o usuário pode chegar à página, ter uma visão geral dos diferentes produtos que temos. E eles podem visualizá-los por categoria. Então, se eles quiserem ver apenas modelos elementares, eles podem clicar nele e os produtos serão filtrados por essa categoria. Então, se eles quiserem ver apenas logotipos, eles verão apenas os produtos de logotipo que você tem revistas também. Eu não mudei essa categoria aqui. Isto é, este é um elemento, um modelo. Mas você obtém a broca. Então outra coisa que queremos voltar para dentro de tudo, vemos todos os produtos de todas as categorias que dissemos aqui. E, claro, voltando aqui, colapsando isso e expandindo controles filtráveis. Lembre-se de que sempre podemos duplicar essas categorias aqui e adicionar e adicionar novas. Então, digamos gradientes. E vamos atualizar isso. Então, agora poderemos recolher os controles filtráveis, entrar em itens da galeria, duplicar qualquer um dos produtos aqui. E agora use gradientes como um dos controles lá. E quando alguém clica em gradientes, ele verá produtos somente da categoria gradientes. E você pode arrastar esses produtos e reorganizá-los exatamente da maneira que quiser em sua página que você não precise se ater à forma como eles estão organizados aqui. E à medida que os reorganizamos, a mudança está entrando em vigor em tempo real. Então, se quisermos mover isso para o terceiro lugar aqui, você pode simplesmente vir aqui e arrastar o primeiro logotipo para o terceiro slot. E lá está ele. Então, vamos atualizar isso. E vamos rever as alterações mais uma vez. Agora que temos os produtos aqui e eles são exibidos corretamente. Como os vinculamos às páginas únicas de descrição do produto que criamos para eles? Por exemplo, tínhamos um modelo de garçom. Então, quando clicamos neste link, devemos ser levados para a forma como a página de descrição do modelo. Então, como chegamos lá e de qual página estou falando? Então, deixe-me primeiro abrir as postagens. E vamos chamar para baixo para o modelo de garçom. Vou clicar com o botão direito do mouse em Exibir e abrir o link em nova guia. E vamos para essa guia. Então é aqui que esse link deve nos levar. Então, o que precisamos é isso vinculado a esse modelo. Então, o que precisamos fazer é copiar esse link assim. Entre nesta página aqui. E como esse é o nosso modelo, o modelo para o qual queremos vincular, é o modelo ponderado. Vamos procurá-lo. É isso. Então, vamos expandi-lo e rolar para baixo. Logo abaixo da imagem em que tínhamos esse link. Remova isso e cole nosso link lá. Digamos que abra em uma nova janela e atualize isso. Então, agora, se visualizarmos as alterações, se rolarmos para baixo para esperar um modelo e clicar no link. Agora, ele abrirá em uma nova guia. E isso nos levará para a página que tem mais detalhes sobre o modelo ponderado. Então, espero que agora você esteja começando a conectar os pontos e ver como a jornada do cliente está se moldando. Então vamos para a página inicial, role para baixo. Podemos ver produtos em diferentes categorias, certo? E quando entramos na página de downloads, podemos ver mais produtos e as diferentes categorias de produtos disponíveis nesta página, disponíveis neste site. E podemos ir em frente e selecionar um produto para ver mais. Leia mais sobre o produto e, se gostarmos, podemos ir em frente e terminar de comprá-lo. Então faça o download. Então essa é a jornada do cliente e é assim que criar essa galeria filtrável em particular. Então, selecionando esta galeria filtrável mais uma vez. E vamos rolar para baixo, vamos crescer para fora e entrar no conteúdo. Vamos recolher a galeria e entrar nas configurações. E, como mencionei anteriormente, podemos determinar quantos produtos queremos exibir a qualquer momento. Então, no momento, dissemos para 12. É por isso que agora podemos ver 12 produtos. Então, podemos dizer, por exemplo, um produto. Então, se você disser uma rolagem para baixo, apenas a ajuda é visível. Digamos que seis. E agora apenas seis produtos são visíveis. Então, como você vê o resto dos produtos? Vamos recolher as configurações e descer até o botão Carregar mais. Vamos clicar no botão Carregar mais e vamos alterá-lo para sim. Então agora temos muito mais botão aqui abaixo da galeria. Vamos atualizar isso. E podemos definir quantas mais imagens queremos exibir toda vez que clicamos em Carregar mais. Então, toda vez que clicarmos em Carregar mais, ele carregará mais seis. E podemos alterar o número dois, talvez um 0, 10, e ele carregará mais dez modelos. Também podemos alterar o texto em si para ver mais. E vamos atualizar isso. E quando não há mais imagens e alguém clica no botão e não há mais imagens. Esta é a mensagem que todos recebem. E também podemos alterar o tamanho do botão. Temos tanto controle sobre isso. Também podemos entrar no estilo, estilo geral colapsado, ir para o botão Carregar mais, rolar para baixo. E aqui podemos mudar sua cor. Por exemplo, podemos dar essa cor amarela, se quisermos. Mas eu prefiro tê-lo como essa cor. E ao passar o mouse agora ele pode ter essa cor amarela assim. Então também podemos aumentar o espaçamento entre ele e as imagens aqui arrastando-o até ficarmos satisfeitos. Gosto de onde ele está localizado agora. Então, vamos atualizar isso e visualizar as alterações. Tudo bem, então vamos rolar para baixo enquanto vemos nossos produtos. E aqui está nosso botão Carregar mais. Lembre-se da última configuração que dissemos era ter apenas seis produtos exibidos em uma determinada cidade. Mas se clicarmos em Exibir mais, como você pode ver, ele será carregado mais seis. Se dissermos Exibir mais, ele é carregado mais um. Então, agora não está mais visível porque não há mais produtos para visualizar. E isso é, é assim que criar a página de downloads adicionando uma galeria filtrável para comer. E na Galeria de Desfoque de Filtro, podemos adicionar diferentes categorias de produtos. E os usuários podem visualizar os diferentes produtos acordo com as categorias que você atribuiu a eles. E eles podem selecionar um produto e visualizar sua imagem, ou acessar esse produto e ver mais detalhes antes de decidir se querem comprá-lo. Então, assim. Na próxima lição, veremos como criar a página de contato. E para ser mais específico, queremos ver como usar como criar um formulário WordPress para que os usuários possam nos enviar um e-mail com perguntas ou comentários sobre nossos serviços. Como recebemos e capturamos e-mails e mensagens de usuários em nosso site? Vamos ver como fazer isso na próxima lição. Vejo você em breve. 26. Crie a página de contato: Bem-vindo de volta. Na última lição, projetamos a página de downloads e vimos como criar essa galeria filtrável. Agora queremos ver como criar a página de contato. Então deixe-me abri-la para ver o que temos. Como de costume, temos o modelo normal do WordPress. Então, queremos ver como criar um formulário que os usuários possam sentir e enviar um e-mail para nós com feedback ou uma pergunta ou comentário sobre nossos serviços. Comece a projetar esta página de contato. Podemos entrar no painel e clicar em Editar em páginas. Ou podemos usar esse atalho, clique em Editar página. E iremos diretamente para a página de edição aqui. Então, como de costume, em Configurações, vamos para o modelo e vamos mudar isso para a largura total do Elementor. E vamos entrar nas configurações do Astros. Barra lateral, sem barra lateral. Layout de conteúdo, largura total esticada. Vamos desabilitar tudo isso para lá e, em seguida, a pasta. E vamos atualizar isso. Agora que está atualizado, vamos editar com o Elementor. E aqui temos isso. Normalmente, em uma página de contato, o que você tem é seu número de telefone, ícones de mídia social e um formulário com diferentes campos, como e-mail e sua mensagem. Então, como fazemos isso? Vamos seguir em frente e pegar uma seção de coluna dupla. E, como de costume, vamos dar uma margem máxima de 50. Então, vamos remover esse link. Vamos manter fora de 50 para que tenhamos algum espaçamento aqui em cima. E então aqui, o que queremos fazer é adicionar um código curto. Então, vamos selecionar esse ícone lá para expor os elementos e digitar código curto. Tudo bem, então vamos arrastar o código curto para lá. E no momento em que o liberamos, observe agora aqui que inserimos seu código. Então, precisamos pegar um código de nosso back-end, nosso painel. E esse código é o que será o nosso formulário. Então, vamos seguir em frente e pegar esse código curto no back-end. Mas não temos um código curto. Por quê? Porque eles nem têm o formulário em si. Não criamos um formulário. Então, vamos começar criando um formulário. Mas ainda não podemos criar um formulário. Por que não temos o plugin. Então, vamos começar instalando o plugin que criará nosso formulário. Então, vamos para Plugins, Adicionar Novo. Agora, existem muitos plug-ins de forma no mercado, mas o que eu realmente amo é chamado de formulador. Nem sei se eles têm um programa de afiliados. Eu não os comercializo. Eu adoro falar sobre produtos que são usados lá para mim é gratuito e muito poderoso. Então, vamos seguir em frente e digitar o formulador. E é o primeiro do WPA AMU dev. Então, instale-o agora ou pedale. Vamos ativar. Perfeito. E agora é um dos nossos plugins instalados. Então, para acessá-lo, vamos rolar todo o caminho para baixo neste menu à esquerda. E deve estar em algum lugar quase na parte inferior. Passe o mouse sobre, basta clicar no formulador. E esta é a landing page para onde nos direcionamos. Então, vou fechar essas mensagens estão aqui em cima. E isso é, basicamente, onde você obtém um resumo de todas as formas de missões, pólos de missões, questionário de missões, porque você pode criar formulários, enquetes e questionários, e muitas outras coisas. Então, não vou me aprofundar no formulador e no que ele pode fazer. Vamos seguir em frente e criar um formulário. E o formulário que queremos, podemos começar com uma ardósia em branco e criar o formulário. Nosso, é nosso eu mesmo ou podemos usar modelos pré-fabricados. Portanto, temos um formulário de inscrição, login, inscrição no boletim informativo Fale Conosco . Precisamos de um formulário Fale conosco. Então, vamos clicar nisso e dizer Continuar. E vamos dar um nome a ele. Formulário de contato. Digamos que crie. E lá temos isso. Então aqui está o nosso formulário. Aqui está o nome que lhe demos, formulário de contato e sempre podemos alterá-lo daqui. Assim, podemos alterá-lo para entrar em contato conosco. E se clicarmos neste ícone de roda dentada aqui, você notará que o primeiro item aqui é copiar código curto. E este é um código curto que será copiado para levar para o front-end, mas chegaremos a isso. Vamos, vamos explorar o que temos em nosso formulário. Então aqui está o formulário. O formulário em si tem o primeiro nome, e-mail, número de telefone e mensagem. E se eu visualizar isso, é exatamente assim que o formulário se parece. O primeiro nome, endereço de e-mail, número de telefone, mensagem e, em seguida, enviar mensagem. Então, FirstName, mensagem de número de telefone por e-mail e, em seguida, enviar mensagem botão. E podemos reorganizar isso. Podemos pegar isso e arrastá-lo e soltá-lo ao lado de quando a linha azul aparecer no lado direito, soltá-la lá, e agora eles estarão em uma linha. Então, vamos visualizar isso. E agora é assim que eles se parecem. E podemos obter o excesso de leitura, por exemplo, se você não quiser o número de telefone, podemos simplesmente excluir esse campo. E agora ficamos com o primeiro nome e endereço de e-mail. Vamos visualizar isso. E é isso que temos. Então, vamos publicar nosso formulário. E agora, porque é publicado, a primeira coisa que recebemos é esse pop-up com nosso código curto. Então, vamos copiar esse código curto e receberemos essa mensagem. Este código curto com este número 392 é o mesmo código curto que podemos acessar clicando neste código aqui e clicando em Copiar código curto é o mesmo código curto. Agora, se trocarmos o front-end onde estamos editando nosso contato, lembre-se de que deixamos cair esse pequeno elemento de código aqui e fomos apresentados com esse campo. Agora podemos colar esse código curto lá e depois aplicar. Tudo bem, então vamos em frente e clique em Atualizar. E vamos visualizar as alterações. Perfeito, então é assim que nosso formulário parece no momento. Vamos adicionar alguma margem logo abaixo dela. Então, selecionando esta seção, entrando avançado, vamos dar um 90 abaixo. E agora temos esse espaço aqui embaixo. Vamos atualizar isso e visualizar as alterações. Sim, parece tudo bem. Agora, é claro, precisamos mudar essa cor para combinar com o tema do site. Então, vamos em frente e edite a cor de fundo do botão. Mas agora não podemos editar mal aqui dentro e um mentor porque o formulário não foi criado com Elementor. Lembre-se do que acabamos de fazer é colar o código curto aqui. Nós o criamos usando quatro minutos. Então, o que precisamos fazer é ir sob campos, aparecer, Há aparência. Então clique em aparência. E é aqui que podemos editar como o formulário faz loops. Então, antes de tudo, o estilo de design aqui pode ser alterado de padrões, que é o que temos aqui. Dois planos, sem bordas. Então, livre-se dessas bordas afiadas. E este é o que eu gosto, então vou atualizar isso. Mas também há mais alguns dependendo do seu gosto. Então, rolando para baixo sob as cores, é aqui que podemos alterar as cores de diferentes elementos em nosso formulário, incluindo o botão. Então, vamos voltar aqui sob as cores. Vamos escolher Personalizado, e isso revelará mais opções. E esses são os diferentes elementos que compõem os formulários com os quais alimentamos formulados. Portanto, o último item aqui na lista é o botão enviar. E, como você pode ver, a cor está atualmente em azul. Então, vamos clicar nisso. E aqui vamos mudar isso para 40, 40, 40. E ao passar o mouse, queremos dar esse amarelo. Então deixe-me arrastar isso e tentar dar um amarelo. Sim, acho que gosto disso. Vou apenas copiar esse amarelo. E o foco interno colado lá dentro. Porque, no foco, queremos que ele ainda seja amarelo. Pressione Enter. Então, no entanto, é amarelo e desfocado quando está ativo, é amarelo. E vamos atualizar isso. E agora que está atualizado, vamos entrar na nossa página Elementor, selecionar o elemento de código curto e aplicar. Assim, podemos aplicar essas novas mudanças de cor. E, em seguida, vamos visualizar as alterações. Tudo bem, então eu gosto do que estou vendo. Então, agora, passando o mouse, o botão é amarelo no estado normal, rima com o resto do site. Então, vamos adicionar alguma mensagem aqui apenas para conversar com os visitantes. Então, vamos arrastar isso e dizer. Então. Indo para dentro, está entrando em estilo, cor, tipografia interna. Vamos em frente e mudar isso para Montserrat. E vamos mudar o peso da fonte para 800. E eu gosto muito. Então, vamos torná-lo grande aqui, assim. E, em seguida, vamos clicar neste ícone para exibir os elementos. E vamos arrastar algum texto para lá. Tudo bem, então algo desse tipo. Agora vamos aumentar o espaçamento entre esses dois. Então, selecionando esta seção e entrando em colunas de layout mais amplas. E então abaixo aqui, podemos adicionar um número de telefone para que possamos duplicar isso. Então, vou apenas selecionar isso. E, em seguida, vamos arrastá-lo para baixo deste texto. E enquanto ainda estiver selecionado, vamos entrar aqui e reduzir o tamanho. Vamos dar essa cor amarela. Mas lembre-se, use o mesmo tom de amarelo ou qualquer cor que você esteja usando. Use o mesmo código de cores. Não apenas arraste os amarelos por aí assim. É bom garantir que você esteja usando cores de marca específicas para sua marca ou para a direita, então atualize isso. Talvez possamos adicionar um e-mail. Então eu vou clicar nisso, talvez arrastar outros textos aqui. E então esse pode ser o endereço de e-mail. Atualize isso. E agora vamos visualizar as alterações. E essa é nossa página de contato. Deixe-me rolar para baixo. Vamos diminuir o espaçamento entre esses dois. Então, vamos diminuir o espaçamento aqui. Voltando aqui, selecionarei o texto aqui e removerei essa margem aqui. E para a margem inferior, vamos começar a reduzi-la manualmente assim até ficarmos satisfeitos. Então atualize isso. Vamos visualizar as alterações. Então isso parece muito melhor. Uma boa página Fale Conosco. E, claro, é redundante adicionar ícones de mídia social aqui porque já os temos no rodapé. Portanto, a página Fale Conosco tem todos os detalhes que um cliente precisaria para entrar em contato conosco. É assim que projetar a página Fale Conosco. Na próxima lição, eu queria falar sobre a página do blog. Então, vamos fazer isso em breve. 27. Exercício: crie a página do blog: Olá, e seja bem-vindo de volta a outra lição incrível. Na última lição, criamos esta página Fale Conosco. Agora é hora de falar sobre esta página do blog. Como exibimos nossa postagem no blog? E agora, como de costume, nosso blog agora tem o modelo padrão do WordPress. Então, precisamos projetá-lo com Elementor. Mas como projetamos isso? Então você deve ter notado, eu passei dos downloads para a página de contato e pulei a página do blog. Então isso foi intencional. Eu queria te dar uma oportunidade neste momento de fazer algo por conta própria, para projetar esta página do blog. Lembre-se de como criamos nossos produtos digitais? Esses produtos digitais, entramos nossas postagens e dizemos Adicionar novo. E aqui daremos um produto e nome e definiremos todas as configurações no lado direito, depois vamos em frente e editaremos no front-end com o Elementor. É assim que criamos nossos produtos digitais. E lembre-se que dissemos, criar um produto digital é o mesmo que criar uma postagem no blog ou criar um podcast. E todos esses tipos diferentes de conteúdo são criados como postagens do WordPress. Então adicione novo. E lembre-se que também criamos categorias para os diferentes produtos. Então, agora, se adicionarmos artigos como postagens de blog, artigos como posts do WordPress, aqui, também precisamos dar categorias a eles. Então, se escrevermos um artigo sobre inteligência artificial, podemos ter uma categoria sobre inteligência artificial. Então esse é o método para criar a postagem do blog. Agora, para exibi-los no front-end. Lembre-se da mesma forma que exibimos esses produtos aqui nesta página. Criamos essa ganância e, em seguida, desativamos alguns dos itens, como metadados , autor e trecho. Você terá que se certificar de que as informações que desativamos da grade desses produtos estejam visíveis, ativadas na postagem do blog. Então esse é um desafio rápido para você assumir. Sei que parece um pouco complicado agora, mas agora acredito que você ganhou mais confiança depois de assistir a todas essas lições. E você sempre pode voltar para a lição em que criamos essa grade e ver como fazer isso porque é o mesmo método. Espero que você goste desse desafio. Deixe-me saber o que você pensa sobre isso. Se você tiver algum problema ou problema, deixe-me saber o que você pensa na discussão. Vamos manter a discussão em andamento. Então é assim que você vai criar uma página de blog. E depois de terminar a página do blog, agora é hora de falar sobre como incorporar um botão de download real que pode realmente baixar um produto. Vamos ver que nas próximas lições, verei você em breve. 28. Explorando o Plugin EDD: E bem-vindo de volta. Espero que você tenha tomado algum tempo para criar a página do blog. E acima de tudo, espero que você tenha gostado do desafio. Vimos como criar a página de contato e todas essas outras páginas. Então, neste momento, queremos trabalhar no sistema de pagamento. Queremos adicionar um botão de pagamento a esses produtos, mas para isso, precisamos instalar um plugin de terceiros chamado Easy digital downloads. Então, vamos entrar em nosso painel. E vamos diretamente dentro de plugins, adicione mu. E aqui, procurarei por downloads digitais fáceis. Você deve ser o primeiro produto com downloads digitais facilmente com mais de 50000 instalações. Vou instalar agora. Vamos ativar. Tudo bem, então agora está ativado. E para acessá-lo, vamos para dentro dos downloads. E é claro que ainda não temos nenhum produto digital criado, que é o que estamos prestes a fazer. Mas antes de fazermos isso, quero entrar nas configurações. Como você pode ver, temos muitas opções diferentes, incluindo adicionar novas. Podemos criar categorias para os diferentes produtos que farão isso. Tags, histórico de pagamentos, clientes, códigos de desconto. Podemos visualizar relatórios. Quero que entendamos as configurações para ter uma visão geral das diferentes configurações. Então, aqui estamos nós. Como você pode ver, por padrão, no momento em que instalamos downloads fáceis de instalar, o plugin também gerou algumas páginas padrão que ele precisa para permitir que os clientes façam pagamentos, e isso é a página de checkout, essa página de confirmação de compra. transação falhou se um cliente estiver tentando pagar e o pagamento falhar, serão mostrados essa página e o histórico de compras. E, claro, todas essas outras configurações. Temos configurações de moeda. E você pode ir em frente e selecionar o tipo de moeda em que deseja aceitar pagamentos. Em seguida, entrando nos pagamentos, temos diferentes tipos de pagamentos, stripe, PayPal, Amazon e todos esses outros. Até temos pagamentos de teste. Você pode fazer seus testes antes que ele vá ao vivo. Abaixo dos pagamentos, temos configurações diferentes aninhadas com a guia. E-mails. Temos um modelo de e-mail diferente e podemos editar os recibos de compra, novas notificações de venda, todos esses são diferentes tipos de e-mails que podemos configurar, mas este é um curso completo por conta própria. Não podemos cobrir tudo sobre como gerenciar seus produtos digitais neste curso. E também podemos alterar alguns dos estilos dos elementos no front-end, como o estilo de botão padrão. Podemos alterá-lo de botão para texto sem formatação e você verá o botão no front-end. Podemos alterar a cor do botão se você quiser. E, claro, muitas outras configurações aninhadas aqui. Mas é claro, como eu mencionei, não vamos entrar em todos esses. Agora que temos algumas informações básicas sobre produtos de downloads digitais, na próxima lição, vamos ver como usar o plugin para gerenciar esses produtos que criamos como posts do WordPress. Então, vamos fazer isso na próxima lição. Vejo você em breve. 29. Conexão o plugin EDD ao PayPal: Downloads digitais fáceis tornaram muito simples a conexão à sua conta do PayPal. Então, se pudéssemos simplesmente despejar dentro da guia PayPal aqui, tudo o que precisamos fazer é clicar neste botão que está convenientemente colocado aqui. Então, vou em frente e clique nisso. E esses pop-up aparecerão aqui, tentando nos conectar ao papel. Então você definitivamente precisa ter uma conta paypal. E, claro, se você não tiver uma conta do PayPal, é aqui que você criará uma nova conta. Então, vou importar o e-mail que usei para o meu PayPal. E então aqueça em seguida. M porque eu já tenho uma conta. Como você pode ver, a mensagem diz que fui redirecionado para a página de login. Então, vou seguir em frente e entrar na minha conta do PayPal. E as duas contas serão integradas. Então, vamos seguir em frente e dizer concordar e conectá-lo. É isso. Agora, integramos com sucesso PayPal com downloads digitais fáceis. E aqui estamos nós. Voila. Então, agora nosso plugin de downloads digitais está pronto para aceitar pagamentos no site. 30. Como gerenciar produtos digitais usando o EDD: Bem-vindo de volta. Agora que tivemos uma visão geral do plugin de downloads digitais fáceis, vamos em frente e usá-lo para gerenciar nossos produtos digitais. Então, entrando em downloads, clicarei em Adicionar novo. E, como de costume, precisamos dar um nome a esses downloads. E o nome deve ser o nome do produto que deveria representar na lista de produtos para os quais criamos poderia apenas clicar com o botão direito do mouse todas as postagens e abrir este link em uma nova guia para que possamos dê uma olhada nisso. Deixe-me abri-la. Esses produtos têm nomes, por exemplo, o modelo de fisiculturista. Então, o que eu preciso fazer é copiar o modelo de fisiculturista. E então vamos voltar para dentro de nossos produtos. E vamos colar o nome lá. Porque agora estamos criando um botão de download para esses produtos. Então, voltando aqui, então, para a descrição, o que precisamos fazer é entrar aqui e vamos clicar com o botão direito do mouse e abrir o link em novas guias ou podemos ver o front-end. E agora essa descrição precisa ser tirada desta única página de descrição do produto. Então, vamos presumir que aqui você teria alguma descrição do seu produto. Essa é a mesma descrição. Nós colocaríamos o pico de sua cópia e colocamos aqui. Então cole-o lá. E isso será muito útil para os mecanismos de busca porque Embora seja isso que os clientes verão em sua página, o que aparecerá nos resultados dos mecanismos de busca é essa descrição que está no botão de downloads digitais fáceis que você está criando. Então esse texto é esse texto aqui. Então, rolando para baixo. Claro que agora aqui podemos definir o preço. Vou deixá-lo em 0 porque este é um download gratuito. E abaixo, temos mais algumas configurações aqui, podemos definir o nome desse arquivo de download. Então, vamos dar o mesmo nome porque eu suponho que você tenha feito seu modelo o mesmo. Então modelo de fisiculturista, MM, o URL do produto quando o cliente paga, este é o URL que ele obterá para acessar o produto. Então, mostrarei como criar esse link. Mas só para explorar essas outras áreas aqui, como você pode ver no lado direito, temos uma área para categorias. Podemos adicionar uma nova categoria aqui ou clicar aqui. E lembre-se de como criamos categorias para nossas postagens. Então, precisamos criar a mesma categoria. Então, entrando na guia de postagens, dentro das categorias, tínhamos Elementor, logotipos e revistas. Então, precisamos das mesmas categorias. Então, em vez de sair desta página e entrar aqui, vamos criar as categorias. Bem, ainda estamos aqui. Adicione novo. Vamos dar um nome Elementor. E vamos pressionar Enter e verificar isso. Vamos criar outro. Pressione Enter e verifique as revistas de logotipo que ele entraria. Agora, como este é um modelo elementar, vamos desmarcar e verificar a categoria Elementor. Então vamos publicá-lo ou montar. Então, agora nosso botão está publicado. Então, o que precisamos fazer é rolar para baixo. E no lado direito aqui abaixo, Adicionar ao carrinho dias um código curto de compra. Copie esse link na caixa. E vamos entrar em nossos produtos aqui em posts. Então, todas as postagens. E vamos crescer todo o caminho para baixo, o modelo de fisiculturista e editar com Elementor. Então, vou clicar com o botão direito do mouse e abrir o link em nova guia. E aqui estamos nós. Então lembre-se em lições anteriores que mencionei que esse botão mudaria com o tempo de substituí-lo. Então, vou selecioná-lo e excluí-lo. Aqui dentro, vou digitar código curto. Código curto. Arraste alguns elementos de código curtos ali para esse local. E lembre-se desse código curto que acabamos de copiar daqui. Volte aqui e cole-o lá. E agora temos nosso botão de compra. Atualize isso. E vamos visualizar as alterações ou pedalar. Então, lá temos isso. Então, podemos fazer o mesmo por essa parte. Exclua isso, e eu posso duplicar isso, arrastá-lo e soltá-lo. A atualização que Vamos ser realmente muda. E lá temos isso. Portanto, se eu clicar em Comprar, ele adicionará o produto a um carrinho. E agora podemos verificar. Então, se eu clicar em Checkout será levado para a página de checkout. E nosso produto está listado lá com um preço e o total exigirá pagar. E logo abaixo, havia três campos de entrada onde deveríamos nos sentir em nossos detalhes. Então, vou usar alguns detalhes falsos aqui. E clique em Download gratuito e a compra está confirmada. Então, agora, aqui estão os detalhes do nosso produto e podemos clicar nos produtos para baixá-lo. Mas agora, quando clico nele, veja o que acontece. Levaria para as espadas, desculpe, este arquivo não pôde ser baixado. Então, qual é o problema? Porque não dissemos ao WordPress onde obter esses produtos. Lembre-se de que tínhamos esse campo em que deveríamos inserir o URL para o banho do produto. O motivo. Então, vamos ver como adicionar o link do produto na próxima lição, verei você em breve. Certo. 31. Como adicionar um link direto a um produto digital a um de download: E bem-vindo de volta. Então é hora de adicionar o link que permitirá que os clientes baixem os produtos. Então, para fazer isso, precisaremos ter uma conta do Dropbox. E a razão é que você não quer armazenar seus produtos digitais em seu servidor WordPress, porque isso realmente diminuirá seu site. Em circunstâncias normais ao adicionar imagens ao seu site, você as adiciona à biblioteca. Nós os adicionaríamos aqui, e podemos fazer isso. Mas o problema é que diminuirá seu site porque agora você está começando a adicionar arquivos para download que provavelmente são maiores do que as imagens ao seu site. E o WordPress precisa carregar todos esses materiais. Portanto, essa é a razão pela qual precisamos uma plataforma de armazenamento de terceiros da qual só precisamos escolher o link. E eu prefiro o Dropbox. Então, eu já abri minha conta do Dropbox aqui. E estou dentro de uma pasta onde tenho alguns modelos elementares. E a maneira de obter o link é antes de tudo, feche seus produtos. Por exemplo, se for um modelo de logotipo em cada formato de linha, por exemplo, formato Adobe Illustrator ou formato Photoshop. Ou se for um modelo elementar no formato JSON, certifique-se de ter esse produto e, em seguida, compacte-o. Então, seja qual for o produto digital que você está vendendo, você precisa tê-lo compactado. Uma vez compactado, vou arrastar este produto minha pasta do Dropbox. Vamos supor que esta seja uma pasta que você alocou para esses tipos de produtos e modelos de mentores. Então, vou deixá-lo lá dentro. Dê um momento para fazer o upload. E agora ele é carregado. Então, digamos, por exemplo, este é o produto que eu quero colocar nessa página. Então, vou copiar o link. E agora o link é copiado, como você pode ver nesta mensagem aqui. Volte aqui, digital e vamos editar esses produtos digitais. E eu vou rolar para baixo até onde precisamos do link. Colarei o link lá. E então vamos até o início do link. Substitua o WWW por DL para download. E depois do Dropbox, substitua-o pelo conteúdo do usuário. Então, agora é D2L Dropbox, user contents.com e, em seguida, seu produto que converte esse link em um link de download direto sem o DL e o conteúdo do usuário. O link padrão basicamente abre esse produto no Dropbox. Mas o que precisamos é que quando alguém clica no link, você só quer um pop-up perguntando se deseja baixar o produto. Então, com nosso link pronto, vamos seguir em frente e clicar em Atualizar. Tudo bem, lembre-se de que estamos usando esses produtos link aqui. Então deixe-me copiá-lo para ter certeza de que estamos usando o caminho certo. Estes são modelos de fisiculturista. Então, vamos entrar aqui e dizer Editar com Elementor. E vamos mudar para essa guia. Tudo bem, então aqui está nosso botão. Só quero ter certeza de que é o mesmo botão. Então cole isso lá. Sim, ainda o mesmo botão. Vamos atualizar isso. Vamos clicar em Atualizar aqui. Em seguida, vamos visualizar as alterações. Então, desta vez, quando você clica em Compra gratuita adicionada ao carrinho, então finalize a compra. Vamos seguir em frente e ver se podemos baixar nosso produto. Tudo bem, vamos com as credenciais padrão aqui. E aqui estão os detalhes do nosso produto. Então, vamos clicar no link. E agora ele nos apresenta essa opção aqui. Então posso dizer Salvar arquivo. O arquivo começa a ser baixado aqui. E podemos ir em frente e abri-lo. Então é assim que adicionar o link. Tudo o que você precisa fazer é basicamente adicionar seus produtos e garantir que eles estejam compactados. Adicione seus produtos ao Dropbox e, em seguida, vá para seu produto específico e copie o link. Depois de copiar o link, entre em seu produto, colado lá e, em seguida, substitua o WWW por df para download. Depois do Dropbox, conteúdo do usuário, conteúdo do usuário. E agora o link está pronto. Em seguida, pegue o código curto e coloque-o no front-end da sua página aqui. E agora seu botão está pronto. Então, com isso, é assim que adicionar o botão de compra aos seus produtos. E isso marca o fim desta lição. Espero que você tenha gostado. Vejo você na próxima lição. 32. Como adicionar uma forma de inscrição CTA à página home: Bem-vindo a esta lição. Estamos quase acabando com um site, mas há mais algumas coisas que precisamos fazer para melhorar a experiência do usuário em nosso site. E um desses seres é que precisamos adicionar um formulário de inscrição para capturar e-mails dos usuários para que possamos manter contato com eles. Lembre-se que mencionei que adicionaríamos um formulário de inscrição aqui na página inicial ou na landing page. Então, agora vamos seguir em frente e fazer isso. Como de costume, vou em frente e clicar em editar com o Elementor para que possamos responder ao modo de edição. E aqui estamos rolando para baixo. Então, eu quero colocar esse formulário entre essas duas categorias de modelos. Então isso está em algum lugar aqui. Vou clicar em Mais. Então, podemos adicioná-lo aqui. E vou em frente e clique em mais e adicionarei essa seção de largura total. E vamos separá-lo desta seção aqui. Então, vamos selecionar isso indo para dentro avançado, remover esse link e vamos dar a ele uma margem de 50 na parte superior. Então, lá temos isso. Enquanto a sessão ainda estiver selecionada, vamos entrar no estilo e vamos dar a ela uma imagem de fundo. Então, imagem de fundo, selecione esse ícone de pincel. E aqui, desta vez não estamos dando uma cor de fundo, estamos apenas dando uma imagem. Então, selecionarei uma imagem aqui. Claro, você precisa procurar uma boa imagem que represente os produtos que estão vendendo. Acho que vou usar isso. Insira mídia. Certo? Enquanto ainda estamos aqui. Para a posição, digamos que o centro, os anexos centrais, role, repita, digamos que não repita. E para o tamanho, digamos que capa. Vamos tentar o cliente. Vamos apenas ir com 100% para que ele preencha toda a seção da esquerda para a direita. E agora, é claro, precisamos adicionar algum conteúdo aqui para aumentar sua altura. A altura desta seção será determinada pelo conteúdo interno. Então, antes de tudo, vamos duplicar essa coluna. Agora temos duas colunas, e eu vou arrastar isso um pouco, redimensioná-lo. E aqui eu quero adicionar um código curto. Então, vou arrastar esse código curto para lá. E agora, claro, agora temos que pegar um código curto do back-end. Lembre-se de como criamos o contato na página de contato, estamos usando o formulador para criar outro formulário que trará para esta página. Então, vamos voltar ao back-end e criar um formulário usando fórmulas. Mas antes disso, clique em Atualizar. Certo, então vamos visualizar isso por enquanto. Rolando para baixo. Então, é aqui que nosso formulário estará. Então, vamos entrar no painel, rolar para baixo. Abra o coordenador UP. E como seria de esperar, já temos um formulário, nosso formulário Fale conosco. Agora queremos criar um novo. Então, vou em frente e clique em Criar. Nisto, quero um formulário de inscrição no boletim informativo. Então, clicarei nisso e direi Continuar. Vamos chamá-lo, inscreva-se. Crie isso. E, por padrão, ele já está preenchido com dois campos, nome e endereço de e-mail e, em seguida, o botão de inscrição. Então, vamos em frente e visualize isso antes de publicá-lo. Tudo bem, para que os usuários possam inserir seu primeiro nome e endereço de e-mail e, em seguida, assinar nossa lista de discussão. E podemos enviá-los por e-mail com qualquer informação que considerarmos importante para eles. Então, porque estamos satisfeitos com nosso formulário, vamos publicá-lo. Tudo bem, vou em frente e copiarei esse código curto. E vamos no front-end. E aqui dentro. Enquanto isso estiver selecionado, vamos colá-lo lá. Certo, então já está começando a aparecer. Vamos clicar em Atualizar e alterações de privilégios. Então, é só para ver o que precisamos melhorar. Então, rolando para baixo, é assim que parece. Mas agora, como o plano de fundo é um pouco, BZ não conseguiu distinguir o formulário do plano de fundo. Então, vamos fazer algo sobre isso. Então, saltando para dentro aqui, vou selecionar esta seção e entrar no estilo recolhido de fundo, entrar na sobreposição de fundo. Porque queremos adicionar uma sobreposição. Clique nesse tipo de plano de fundo. Vamos dar uma cor, talvez preta. E isso simplesmente escureceria em segundo plano para que o formulário fique mais visível. Também podemos aumentar a opacidade, talvez até esse ponto. Vamos atualizar isso e visualizar as alterações. Rolando para baixo. Certo? Então, agora o formulário está mais visível desta vez. Vamos adicionar algum texto descritivo ao lado esquerdo. Então, selecionarei isso para adicionar um cabeçalho de texto. Então, talvez aqui possamos dizer que modelos gratuitos sentem diretamente na sua caixa de entrada. Claro, vamos mudar a cor lá, dar um branco por enquanto. E então vamos mudar a família de fontes para Montserrat. E eu quero dar a ele um peso de fonte de 800 e aumentar o tamanho um pouco. Talvez até esse ponto. Vou clicar neste ícone novamente para expor os elementos e arrastarei algum texto para lá, algum texto descritivo. E aqui podemos dizer aos usuários o que eles, que ação eles precisam tomar para obter esses modelos gratuitos. Então, tudo bem, então isso faz sentido. Isso é atraente o suficiente porque lembre-se do que estamos criando é um call to action. Um CTA, queremos que clientes ou potenciais clientes tomem medidas. E a ação é fácil enviar o e-mail deles para nós, mas eles não podem nos dar o e-mail se não tivermos nada valioso para lhes dar. Então, acho que essa é uma boa maneira de capturar e-mails dos usuários. Então agora vamos adicionar alguma margem no topo aqui, assim como temos um bom espaçamento abaixo. Então, selecionando a seção, entrarei no preenchimento avançado. Vamos dar talvez um 50. Vamos atualizar e visualizar as alterações. Mas antes de privilegiar as mudanças, deixe-me selecionar isso, entrar no estilo e vamos mudar a cor para branco. E, em seguida, atualize isso. Tudo bem, vamos visualizar as alterações. Incrível. Eu gosto de um call to action, mas é claro que precisamos fazer algo sobre essa cor azul aqui. Então, vamos fazer algo sobre isso. Saltando dentro do painel. Vá para dentro da aparência. Como de costume. Primeiro de tudo, vamos escolher o design plano. E então vamos entrar em Cores, Personalizado, rolar para baixo até o botão. E vamos dar essa cor amarela. Agora lembre-se, você precisa usar o mesmo tom consistente de amarelo. Mas, por enquanto, vou arrastá-los para encontrar um belo amarelo com o qual possamos trabalhar por enquanto. Então eu acho que isso é satisfatório. Ao passar o mouse. Queremos que seja branco. E em foco. Talvez branco também. Por enquanto. Por ser branco, é x não pode ser esposas. Vamos fazer com que ele não passe o mouse. Disse deve ser preto porque o fundo do botão será branco. Então, vamos atualizar isso. E vamos visualizar as alterações. Então é assim que parece agora. Com essas mudanças, vamos para o front-end. Vamos selecionar o formulário em si e clicar em Aplicar. Ou vá lá, temos isso. Então, vamos visualizar as alterações. Rolando para baixo ou para a direita. Então eu acho que isso parece apresentável. Podemos trabalhar com isso. Claro, você pode fazer muito melhor. Definitivamente. Mais duas coisas. Eu quero fazer, nossa mudança, essa cor da fonte aqui, como você pode ver, parece um pouco cinza. Não é o branco afiado. Portanto, as cores do rótulo precisam ser brancas. Vamos ver como fazer isso. E eu também quero equilibrar esses preenchimentos no topo aqui com o preenchimento na parte inferior, como você pode ver, esses pequenos espaçamentos aqui e aqui em cima. Portanto, precisamos ter certeza de que isso está alinhado corretamente. Então, voltando para dentro, vou selecionar uma seção e vamos dar a ela um preenchimento inferior de talvez, vamos tentar 10, e vamos tentar 15. Então isso deve aumentar o espaçamento abaixo aqui. Atualize isso. Vamos visualizar as alterações. Como agora parece muito melhor. Então, vamos fazer algo sobre esses rótulos voltando ao nosso editor de formuladores, vamos avançar e expandir os conceitos básicos de campo. E sob o básico de preenchimento, temos o rótulo. Então selecione o rótulo lá e dê a ele talvez essa cor amarela. Precisa empurrar isso para cima. E então vamos procurar isso ainda. Acho que vou com isso. E copiarei esse código no caso de precisar usá-lo novamente, atualizá-lo. Podemos deixar o asterisco como rosa. Este é o asterisco. Parece vermelho. Não posso dizer que é rosa. E agora, porque temos essas mudanças, vamos para dentro da nossa vista, nosso espaço de trabalho Elementor. Vamos selecionar o formulário e aplicar as alterações porque já as atualizamos aqui. Role para baixo. Vamos visualizar as alterações. Tudo bem, então nosso telefone parece muito melhor agora. Então, com esse tempo agora, para passar para a próxima coisa importante que precisamos fazer antes de terminarmos nosso site. E isso é para tornar o site responsivo em diferentes dispositivos, tamanhos de tela diferentes. Vamos ver como fazer o site parecer apresentável em smartphones, tablets, porque ele já fica bem no desktop. Faremos isso na próxima lição. Vejo você em breve. 33. Tornar o Navbar responsivo: Bem-vindo de volta. Agora estamos quase acabando com nosso site de downloads digitais. Agora queremos tornar as páginas da Web responsivas em diferentes tamanhos de dispositivos. E então o que queremos fazer é começar de cima, descendo, tornando cada elemento responsivo e com boa aparência nos diferentes tamanhos de dispositivos. E usaremos essa página inicial como exemplo. E então você usará esses mesmos princípios e habilidades para tornar o resto das páginas responsivas. Então, sem mais tempo do Western, vamos começar com a barra de navegação e torná-la responsiva. Então, entrando aqui e passando o mouse sobre isso, clicarei em nav para que possamos entrar no modo de edição de navegação ou entrar aqui estamos. Então agora temos nossa barra de navegação editável. O que queremos fazer é clicar neste ícone de modo responsivo aqui, e isso revela essa barra responsiva. O que queremos fazer é pular para dentro da visualização móvel, móvel. E é assim que o menu ficará. Então, normalmente, o que queremos é ter nosso logotipo de um lado e nosso menu de hambúrguer do outro lado. Então, agora, porque esses dois elementos estão dentro da mesma seção, que é essa seção azul. No momento, o logotipo nas telas móveis está ocupando 100% da largura. Queremos que ele ocupe talvez metade da semana, e este menu de hambúrgueres ocupará a outra metade. Então, o que fazemos é selecionar essa coluna. Ele está segurando o logotipo e sob layouts, largura da coluna, vamos dar 50% a ele. E agora, como você pode ver no contorno, ele está ocupando 50% da largura da seção. E você vai notar que eu tenho essa coluna extra no meio aqui. Devemos ter uma barra de pesquisa aqui, mas falaremos sobre a barra de pesquisa e a funcionalidade de pesquisa na próxima lição. Então, por enquanto, eu só quero me livrar de v. Então agora ficamos com duas colunas em apenas para ter certeza, deixe-me voltar para o modo desktop. E essas são as duas colunas que ficam com. Então, arraste isso antes de tudo para redimensionar um logotipo e selecionar o menu. Vou entrar no layout e empurrá-lo para o lado direito. Assim. Como nos livramos da coluna extra que estava no meio aqui, tivemos que fazer esses ajustes. Agora, voltando a vista móvel do lado leste, temos essas duas colunas. Isso já é 50%. Vamos selecionar isso. E, em Largura da coluna Layout, vamos também dar 50% a ela. Tudo bem, então agora ambos estão na mesma linha. Mas o que queremos fazer é selecionar esse menu e, em Layout, rolar para baixo e procurar responsivo. E vamos empurrá-lo para o lado direito. Agora está na extrema direita da tela. Vamos atualizar isso e vamos visualizar as alterações. Ou certo. Então agora não temos mais nada que possamos ver aqui porque estamos, agora estamos visualizando o menu para ver o que parece nas telas móveis, vamos apertar Control Shift I no teclado. Control Shift I para abrir as DevTools. E agora que trouxemos o DevTools, vamos clicar neste ícone de modo responsivo aqui que mudará para o modo responsivo. E agora, como você pode ver aqui, temos diferentes opções para imitar dispositivos reais. Por exemplo, neste menu suspenso, temos diferentes tipos de telefones. Galaxy, iPhone 11, 12, todos esses tipos de dispositivos. Então, neste momento, é assim que o site se parece no Galaxy S 20, linux. E se clicarmos no menu suspenso, é assim que o menu suspenso se parece. Claro, você pode fazer muito mais para melhorar esse menu, mas vou deixá-lo assim. Acho que estou satisfeito com a aparência. Então, clicarei nisso para sair do modo responsivo e, em seguida, clicarei nele para fechar o DevTools. Vamos voltar aqui e vamos ver o que parece no tablet. Então é assim que o site se parece no tablet. E acho que também gosto disso. Então e na área de trabalho, é assim que parece. Então, voltando para dentro do nosso painel, agora que estamos satisfeitos com nossa barra de navegação responsiva. Vamos entrar em páginas, todas as páginas. Assim, podemos visualizar a barra de navegação em uma página da Web real. Então, vamos ver a página inicial. Vou clicar com o botão direito do mouse em Exibir e abrir o link em nova guia. Vamos mudar essa guia e agora pressionar Control Shift I. Assim, podemos abrir o DevTools e entrar no modo de design responsivo. E agora, com nosso conteúdo, é assim que nosso menu se parece. Acho que gosto da aparência do cardápio e da barra de navegação Luke. Então, na próxima lição, vamos tornar o resto da página responsivo porque, como você pode ver, ela não parece muito responsiva aqui. Você precisa fazer algum trabalho nisso. Então, vamos ver como tornar o conteúdo da página real responsivo. Na próxima lição, verei você em breve. 34. Tornar a página home: Bem-vindo de volta. Na última lição, tornamos a barra de navegação responsiva em diferentes tamanhos de dispositivos. Desta vez, queremos tornar o conteúdo principal da página da Web responsivo em diferentes dispositivos também. Então, deixe-me sair desse modo de design responsivo clicando nele. E então deixe-me fechar o DevTools. Então vamos editar com Elementor ou andar. Então, aqui estamos nós. Como de costume. Vamos começar clicando no ícone do modo responsivo lá embaixo. E agora ele revela essa barra. Vamos começar com uma tela móvel. Então clique nisso. Aqui estamos nós. Então, vou começar selecionando a coluna que está segurando o bloco de texto. Então deixe-me voltar para o modo desktop. Esta coluna que está mantendo esses blocos de texto é a mesma coluna aqui. Então, selecionando-o, quero entrar avançado. Vamos dar um preenchimento de 20. Isso traz espaçamento uniforme em todo o conteúdo das bordas. E, claro, precisamos reduzir o tamanho dessa fonte, selecionar a fonte aqui, downloads ilimitados, entrar na topografia, pegar isso e começar a arrastar. Acho que gosto desse tamanho. Vou voltar para dentro do conteúdo e ir para o alinhamento, alinhá-lo no centro, assim. Atualize isso. Claro, vamos clicar no botão. E enquanto ainda estiver selecionado, vá para Alinhamento e alinhe seu centro. Atualize isso. Então, vamos dar uma olhada na aparência da seção de heróis. Pré-visualize as alterações. Obviamente, ele abrirá a página no modo desktop. Control shift I para abrir ferramentas da web e entrar no modo de design. Então acho que gosto da seção de heróis agora, parece muito melhor. Podemos aumentar o preenchimento na imagem, na imagem da seção do herói. Então, voltando aqui, vamos selecionar a coluna que contém a imagem. Entre no preenchimento avançado sem quebrar esse link. E agora temos esse bom espaçamento da borda. Atualize isso. E vamos visualizar as alterações. Substituir. Então, lá temos isso. Mas agora isso também deve estar alinhado ao centro. Então, vou selecionar isso. Vá para dentro do estilo. Alinhe-o ao centro assim. Em seguida, vamos passar para os modelos e ver como eles se parecem. Então, antes de tudo, atualizando isso e visualizando as alterações. Vamos rolar para baixo. Precisamos fazer alguns ajustes no botão. Vamos fazer algo sobre isso. Tudo bem, e depois o rodapé. Então, voltando aqui, primeiro quero selecionar a seção que está mantendo esses modelos avançados. Vamos também dar esse preenchimento de 20, assim. Então, vamos rolar para baixo e ver o que a outra categoria instalou. Ou RI. Então, vamos visualizar as alterações. Tudo bem, então vamos fazer algo sobre esses botões. Então, voltando aqui, bem, os modelos elementares, ganância ainda estão selecionados. Vou entrar no estilo. Leia mais estilo de botão. E eu quero quebrar esse preenchimento. E vamos definir as configurações para visualização móvel. Então, aqui queremos dizer talvez, talvez digamos que a esquerda 20 e a direita 20, cinco primeiros e os cinco inferiores. E vamos atualizar isso. Vamos visualizar as alterações. Então, rolando para baixo. Então, precisamos empurrá-lo para a direita um pouco. Então, vamos para dentro da margem. Então, vamos dar talvez uma margem esquerda de 70. Atualize isso. E vamos visualizar as alterações. Parece que o valor de 70 pixels está empurrando-o para fora do carrinho. Então, obviamente, precisamos fazer algo sobre a margem certa. Vamos tentar dar algo como 90. 90. E vamos fazer da margem esquerda um 90 também . E vamos atualizá-los. Vamos visualizar as alterações. Rolando para baixo. Estamos quase lá agora olhando para a posição do botão em relação ao texto aqui em cima, o botão está no meio, mas precisamos aumentar o preenchimento no próprio texto. Então, vamos entrar aqui. Vamos ver se podemos aumentar o preenchimento no lado esquerdo, talvez 25. Vamos atualizar isso e visualizar as alterações. E lembre-se, isso é apenas imitar dispositivos. No final, você terá que testar o site em um dispositivo real. Então, se você tiver um smartphone, você pode abrir o site em seu smartphone e ver como ele se parece. Porque essa é a melhor maneira de testá-lo. Mas, dito isso, acho que por enquanto, estou satisfeito com isso. Vá por isso, basta voltar para este lugar e ver com quais valores você vai acabar. Tudo bem, agora botões do modelo elementar estão alinhados corretamente. Então, para os modelos de revista, não precisamos descobrir como tentar posicionar o botão novamente, tudo o que precisamos fazer é copiar o estilo no elemento dos modelos porque tudo sobre essas duas grades é o mesmo quando se trata de estilo. Então, vamos voltar aqui. Então, clicando em qualquer lugar dentro dessa grade que esteja segurando os modelos elementares, eu copiarei. Em seguida, vou rolar para baixo e selecionar essa grade que mantém os modelos de revista selecionados em qualquer lugar, clique com o modelos de revista selecionados em qualquer lugar, botão direito do mouse e cole o estilo. Então, agora, como você pode ver, os botões foram empurrados para o meio. E eu quero selecionar a coluna que os está segurando. E lembre-se que esta outra coluna aqui tinha um preenchimento de 20. É por isso que eles parecem ter o espaçamento aqui. Então vou entrar aqui, selecionar esta coluna indo para dentro avançado, dê-lhe um preenchimento de 20 ou direito. Então, vamos atualizar essa substituição. Então, como você pode ver, ainda precisamos fazer algum trabalho nesses botões. Então vou deixar isso para você, tomar algum tempo e posicionar tudo corretamente. Mas, basicamente, é assim que posicionar tudo corretamente no conteúdo principal. Então, a próxima coisa que queremos tornar responsivo é, tudo bem, vamos fazer algo sobre o preenchimento sobre isso. Vamos entrar aqui. Vou rolar para cima. Selecione esta coluna que está segurando. Agora vamos selecionar a seção em si. Vá para dentro avançado e vamos manter tudo com um preenchimento de 20. Então, agora todo o conteúdo tem um espaçamento de 20 em torno dele a partir da borda. Gosto disso. Então, vamos atualizar isso. E a próxima coisa que vamos fazer é o rodapé. Então, na próxima lição, vamos fazer a comida ou responder à medida que nos dirigimos para a conclusão desta aula. Então, vejo você em breve. 35. Tornar o rodapé: Bem-vindo de volta. Então, nas duas últimas lições, tornamos o navbar responsivo e o conteúdo principal do corpo responsivo agora para tornar a comida responsiva sem perder tempo. Vamos entrar na pasta Elementor. Então, aqui estamos nós. Vamos clicar no modo responsivo. E vamos começar com telas móveis. O logotipo parece estar bem, mas o que queremos fazer é selecionar a seção em si. E como você pode ver, estou obstruído pela barra de navegação aqui para que eu possa selecionar a seção. Então, tudo o que preciso fazer é clicar Control I para abrir o navegador. E agora posso selecionar a seção em si. Então, antes de tudo, o que eu quero fazer é entrar avançado e dar-lhe esse preenchimento de 20 todo o round. Assim. E eu gosto do logotipo no meio assim. Vamos seguir em frente e colocar os ícones sociais no meio também. Vamos reduzir o tamanho desse título. Então, entrar no estilo. Então, pode estar em uma linha como essa. E, finalmente, vamos em frente e selecione o, selecione os Links rápidos. E entrar no estilo. Vamos colocá-los no meio assim e atualizar. É assim que a foto parece. Então, voltando para dentro de nossas páginas, quero ir em frente e abrir nossa página inicial para que possamos vê-la de cima para baixo e vê-la agora no modo responsivo. Então clique com o botão direito do mouse em Exibir, abra o link em nova E vamos para essa guia. Tudo bem, então eu vou pressionar Control I para que possamos mudar para o DevTools e , em seguida, modo responsivo. Então, clicando nisso. Então, rolando para baixo. Em, é assim que nossa página da Web se parece em smartphones. Aproveite seu tempo para apimentá-lo e certifique-se de que ele fique super incrível. Como ele se parece em outros dispositivos como o iPad? Então é assim que parece no iPad. Vamos fazer algo sobre as bordas aqui. Como você pode ver, precisamos de algum preenchimento nas bordas, mas, de outra forma, tudo o resto parece estar certo no alvo. Então, como já estamos editando o rodapé, vou mudar para a área do rodapé e clicar em tablet. E é assim que parece no tablet. Deixe-me fechar isso. Então, selecionando a seção em si novamente. Então, mais uma vez, preciso abrir o navegador, selecionar uma seção no modo tablet. Também queremos dar-lhe um preenchimento de 20 em toda a rodada. Tudo bem, como você pode ver agora temos esse espaçamento por toda parte, o que parece incrível. E agora vou mudar para esta guia e fechar isso. Vamos sair do modo responsivo e fechar isso. Então vamos editar com o Elementor. Então, vamos mudar para o modo responsivo e vamos diretamente dentro do modo tablet. Então, mais uma vez, não consigo selecionar esta seção. Então Control I. E agora selecionando a seção de heróis, porque é a seção mais alta, vou entrar avançado e um preenchimento de 20 em toda a rodada. Vamos mover isso em C. Então, sim, acho que parece bom agora, mas precisamos reduzir o tamanho deste título aqui. Então, selecionando isso, entrarei na topografia e reduzirei esse tamanho assim. Então vamos escolher esta seção avançada. Vamos dar mais 20. Assim. Vamos fazer o mesmo para esta seção, avançado. O mesmo para esta seção finalmente. E vamos atualizar lá. Visualize as alterações. Tudo bem, então é assim que parece no modo desktop. Pressionando Control Shift I para abrir as DevTools, entrar no modo responsivo. E agora vamos vê-lo em um iPad. Portanto, ele está atualmente configurado para iPad. Vamos começar a rolar. E também parece incrível no tablet. Mas agora, é claro, você precisará fazer algo sobre esses botões aqui e ver se podemos alinhá-los corretamente. Claro, eu suponho que você irá frente e usará as mesmas habilidades que usou para tornar a landing page responsiva e tornar a outra página responsiva também. Mas como já fizemos a barra de navegação responsiva, você não precisa fazer isso em todas as páginas porque ela já é responsiva em todas as páginas. Então, o que resta é o conteúdo principal do corpo em todas essas outras páginas. Até agora você tem um negócio de downloads digitais totalmente funcional. Agora você pode fazer upload seus modelos de produtos digitais e contar às pessoas sobre eles. As pessoas podem acessar seu site, explorar esses produtos, esses modelos e baixar os que desejam usar. Conforme concluímos na próxima e última lição, quero falar sobre a funcionalidade de pesquisa porque ainda não tocamos nisso. E é importante tê-lo em qualquer site que tenha produtos que as pessoas possam vir em busca. Então, vamos fazer isso na próxima lição. Vejo você em breve.