Containers do Elementor para iniciantes: crie uma seção de precificação moderna do zero | Ken Mbesa | Skillshare

Velocidade de reprodução


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Containers do Elementor para iniciantes: crie uma seção de precificação moderna do zero

teacher avatar Ken Mbesa, Web Designer | 3D Artist

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Assista a este curso e milhares de outros

Tenha acesso ilimitado a todos os cursos
Oferecidos por líderes do setor e profissionais do mercado
Os temas incluem ilustração, design, fotografia e muito mais

Aulas neste curso

    • 1.

      Introdução

      1:21

    • 2.

      Demonstração de projeto

      0:34

    • 3.

      Instale o Astra e o Elementor

      2:15

    • 4.

      A seção de precificação parte 1

      11:26

    • 5.

      A seção de precificação parte 2

      9:17

    • 6.

      A seção de precificação parte 3

      11:09

    • 7.

      Considerações finais

      1:27

  • --
  • Nível iniciante
  • Nível intermediário
  • Nível avançado
  • Todos os níveis

Gerado pela comunidade

O nível é determinado pela opinião da maioria dos estudantes que avaliaram este curso. Mostramos a recomendação do professor até que sejam coletadas as respostas de pelo menos 5 estudantes.

11

Estudantes

--

Sobre este curso

Quer entender como o sistema de contêineres do Elementor funciona?

Neste curso do Skillshare para iniciantes, vamos criar uma seção de precificação moderna e elegante do zero, usando apenas a versão gratuita do Elementor. para

Não se trata apenas de criar uma tabela de preços. É sobre aprender a estruturar layouts usando contêineres, a nova maneira como o Elementor lida com colunas e linhas. Quer você esteja mudando do sistema de layout antigo do Elementor Sections e Seções Internas ou seja novo no Elementor, este curso lhe dará a confiança para criar designs mais limpos e flexíveis usando contêineres flexbox.

O que você vai aprender:

  • Como usar contêineres Flexbox no Elementor (Grátis)

  • Criando contêineres aninhados para controle avançado do layout

  • Alinhando títulos, descrições e botões como um profissional

  • Dicas de espaçamento e estilo para um visual limpo e moderno

  • Como importar e personalizar modelos pré-fabricados

Ao final deste curso, você terá:

  • Uma seção de precificação totalmente funcional que você pode reutilizar em projetos de clientes ou em seu próprio site

  • Um conhecimento prático do sistema de contêineres do Elementor e como pensar em layouts flexíveis

  • Um projeto finalizado que você pode adicionar ao seu portfólio online para mostrar suas habilidades como designer de UI/UX

Animado para começar?

Vamos passar para a aula 2...

Conheça seu professor

Teacher Profile Image

Ken Mbesa

Web Designer | 3D Artist

Professor

My name is Ken.

I'm a web designer, creative educator, and digital entrepreneur with over a decade of experience in visual design (Web Design, Graphic Design, and Video Editing).

Over the years, I've helped thousands of everyday creatives, small business owners, and aspiring freelancers take control of their digital presence by teaching practical, no-fluff web design skills using tools like WordPress, Elementor, Forminator, and WooCommerce, with no coding required.

My goal is to keep things beginner-friendly, practical, and focused on helping you get real-world results. If you're building your first website or launching a fully functional online store, I'll walk you through the process step-by-step with clarity and confidence.

Beyond web design, I'm a... Visualizar o perfil completo

Level: Beginner

Nota do curso

As expectativas foram atingidas?
    Superou!
  • 0%
  • Sim
  • 0%
  • Um pouco
  • 0%
  • Não
  • 0%

Por que fazer parte da Skillshare?

Faça cursos premiados Skillshare Original

Cada curso possui aulas curtas e projetos práticos

Sua assinatura apoia os professores da Skillshare

Aprenda em qualquer lugar

Faça cursos em qualquer lugar com o aplicativo da Skillshare. Assista no avião, no metrô ou em qualquer lugar que funcione melhor para você, por streaming ou download.

Transcrições

1. Introdução: E, bem-vindo de volta a outra incrível classe elemental minha, Ken Sou web designer e instrutor de wordpress e, nesta aula, quero mostrar como criar uma seção de preços moderna com o Elementor Vamos usar a versão gratuita do Elementor. Agora, se você é novo no elementor, este projeto é a maneira perfeita de se familiarizar com os contêineres Flexbox Os contêineres Flexbox são o novo sistema de layout substitui seções e colunas Examinaremos o layout passo a passo , desde a compreensão da estrutura de nossos preços como uma coleção de contêineres e elementos até a adição e o estilo de todo o conteúdo E a melhor parte é que você não precisará um elementor pro ou de nenhum plug-in pago, sua criatividade e das ferramentas gratuitas já incorporadas ao Wordpress e a um elementor E ao final desta aula, você não só terá uma seção de preços limpa e apresentável, mas também entenderá como contêineres flexbox funcionam e como usá-los para criar layouts flexíveis e modernos em Agora, na próxima lição, quero mostrar a vocês uma demonstração do que vamos construir. Então, vamos direto ao assunto. Te vejo em breve. 2. Demonstração de projeto: Então é exatamente isso que vamos construir. Se eu passar o mouse sobre qualquer uma das mesas aqui, você verá aquela bela sombra projetada e, se eu passar o mouse sobre os botões, você notará que eles têm esse efeito animado Isso é chamado de balançar, e veremos como adicionar isso. A lista aqui é separada por essa linha tracejada. Basicamente, é isso que vamos criar. Na próxima lição, vamos preparar nosso ambiente. Te vejo em breve. 3. Instale o Astra e o Elementor: Agora, deixe-me mudar para o meu site Wordpress. Esta é uma nova instalação do Wordpress. Minha suposição é que você já instalou o WordPress. Então, a primeira coisa que quero fazer é instalar meu tema, porque todo site Wordpress precisa ter um tema. Então, vou para os temas de aparência e o tema ativo é 2025, mas eu quero instalar o Astra, então vou dizer que adicione o tema e aqui está o Astra Eu direi instalar e ativar. E lá vamos nós. Então, agora Astra é nosso tema ativo Deixe-me fechar isso. Não queremos usar seus modelos, fechar isso e aquilo. A próxima coisa que eu quero fazer é instalar o Elementor porque você vai criar a tabela de preços com o elementor Então, vamos aos plug-ins. Primeiro de tudo, basta clicar em Plugins instalados para ver o que temos aqui. Temos esses dois que vêm com todas as instalações do WordPress. Vou selecionar todos esses plug-ins e dizer desativar, aplicar Selecionar todos eles, excluir, aplicar porque não quero usar nenhum deles. Tudo bem, então deixe-me dizer que adicione um plugin. Aqui, vou digitar elementor E aqui está uma instalação do elementor Lá vamos nós. Então, agora eu vou dizer ativar. E agora o elementor está ativo em nosso site. Agora, talvez você precise passar por um assistente de configuração. Às vezes, se você nunca instalou o WordPress antes, talvez precise passar por um determinado assistente de configuração que foi introduzido, acho que em 2023. Se você foi redirecionado para um assistente de configuração, passe por esse assistente de configuração e conclua a configuração de um elementor 4. A seção de precificação parte 1: Agora que instalamos nosso tema e nosso plug-in elementor, é hora de criar nossa tabela de preços Então, eu quero ir direto para as páginas. E temos essas duas páginas padrão aqui. Agora, uma tabela de preços geralmente é colocada em uma página de preços. Então, vamos adicionar uma página chamada página de preços. Eu direi Adicionar página. E eu lhe darei o nome de preço. E vou dizer agora, lembre-se, instalamos o Elementor e o Astra Então, aqui temos algumas configurações que agora são possíveis porque temos o elementor e o Astra instalados E modelo, queremos usar elemento ou largura total. Vamos mudar para as configurações do Astra aqui. Para o layout do contêiner, adoro usar com largura total. Eles permanecem inalterados. Deixe-o como padrão. Para a barra lateral, eu gosto de usar nenhuma barra lateral E para esses elementos, eu quero desativar o cabeçalho Astra, Astra foo, e o banner do Astra publicar Essas são as configurações básicas que eu sempre defino para cada página elementar que estou prestes a editar com o Elementor Então edite com o Elementor agora. E aqui estamos. Agora, vou pular isso porque não quero me conectar à minha conta elemental, pois isso é apenas um exemplo Então pule. Agora temos uma página em branco na qual podemos adicionar o que quisermos. Então, vou clicar em Adicionar novo contêiner e vou usar um Flexbox Eu vou com este contêiner de direção única para baixo. É esse recipiente rosa de ponta a ponta. Quero que observemos isso por um momento. Então, esses são três contêineres. Vamos criar três contêineres, e cada contêiner tem um elemento de cabeçalho, um elemento de editor de texto. Este é um contêiner com três contêineres dispostos lado a lado para criar esses três bits de texto, o símbolo do dólar, o valor e o mês. São três colunas. Vamos ver como fazer isso. Este é um único divisor. Essa é uma lista de ícones, e essa lista de ícones está no mesmo contêiner desse botão, mas veremos como fazer tudo isso. Só quero que tenhamos um mapa mental do que estamos construindo. Então, voltando aqui, queremos começar criando esses três contêineres. E, como você pode ver, os três contêineres não estão tocando nas bordas da tela Eles estão ocupando cerca de 80% da largura dessa borda até essa borda Eles estão ocupando cerca de 80% da largura disponível. Então, o que queremos fazer é adicionar um contêiner que contenha as tabelas de preços, e esse contêiner terá 80% de largura. Deixe-me mostrar o que quero dizer. Então, voltando aqui, vamos adicionar um contêiner. Vou adicionar um recipiente e colocá-lo lá. Portanto, esse recipiente externo rosa deve ocupar 100%, então mude a largura para porcentagem e diga 100%. E agora, o recipiente que colocamos dentro dele, esse recipiente preto, não o rosa. Este recipiente acinzentado deve ocupar 80%. Mas agora ele está alinhado à esquerda do contêiner externo, então selecionarei o contêiner externo e alinharei os itens ao centro Veja o que acontece com isso quando eu clico em Alinhar itens. Agora está alinhado no centro. Agora, o que acabamos de criar é o contêiner contendo essas três colunas. Vamos agora criar as três colunas. Aqui, no contêiner interno, quero adicionar mais um contêiner. E eu vou vincular à direita e duplicar esse contêiner, o contêiner interno, o link direito e duplicá-lo novamente Agora temos três contêineres dentro desse contêiner. E esse contêiner está, é claro, dentro desse contêiner. Então, com esse contêiner selecionado, vou até a direção e mudarei de cima para baixo, porque agora, como você pode ver, sua direção é de cima para baixo. Em outras palavras, o conteúdo dentro do próprio contêiner é empilhado de cima para baixo É por isso que esses três são um, dois, três. Mas se mudarmos para a linha horizontal, tudo dentro do contêiner agora está organizado da esquerda para a direita, em vez de de cima para baixo. Então, agora temos três colunas. Vou publicar que vou colocar um texto lá e, novamente, ir para lá e ir para lá. Selecione este, selecione isso, dois, selecione esses três. Publique isso, visualize as alterações. Pelo menos agora temos três colunas. Então, agora vamos continuar e criá-los. Agora, selecionarei essa primeira coluna aqui, coluna número um, e vou para estilo, fundo, escolho esse pincel, seleciono a cor, e vou escolher uma amarelada, cremosa e esbranquiçada Escolha a cor que quiser, talvez em algum lugar lá. Deixe-me escolher para ver que temos o básico para pequenos projetos pessoais. Então, agora selecionando o texto, o título que colocamos aqui, vou mudar isso para básico. Selecione o contêiner em si mais uma vez. Vou até a borda, vou torná-la sólida e darei a ela uma largura de borda de um. Digamos que publique por enquanto e dê uma olhada no que temos em pré-visualização. Isso é o que temos. Vamos dar alguns cantos arredondados. Então, enquanto ainda estiver selecionado, quero ir até o raio da borda e atribuir a ele um raio de borda de 20 Agora tem aqueles cantos arredondados, publique aí está. Então, voltando aqui, deixe-me dizer mais, e vou acrescentar, como você pode ver, temos essa lista. Então, vamos começar com essa lista. Vou digitar aqui a lista de ícones. Então, vou descartar essa lista de ícones assim que o destaque rosa aparecer. Lá vamos nós. Também vou adicionar um botão. Então, adicione um botão logo ali na caixa logo abaixo. Lá vamos nós. Então, enquanto ainda estiver selecionado, posso ir para o centro de estilo e posição e selecionar essa lista também. Centro de alinhamento de estilo. Eu posso selecionar esse centro de alinhamento de estilo de texto. Agora, lembre-se, temos esse texto, e eu digo que são três colunas. Então, o que queremos fazer é selecionar essa duplicação com o botão direito do mouse e eu quero alterá-la para $5 Certo, li, duplicado, certo, vazamento, duplicado. Vamos selecionar o primeiro e alterá-lo para o sinal de $1, selecionar o último e alterá-lo para a barra do mês Agora, esses são três elementos. O que precisamos, deixe-me primeiro publicá-lo e depois pré-visualizá-lo. Isso é o que temos. Então, vou dizer mais aqui e, em seguida, adicionar um contêiner logo abaixo do texto básico. Como temos três elementos, podemos arrastá-los e soltá-los no contêiner. Também vou arrastar o preço, colocá-lo lá e, em seguida, o mês logo abaixo do preço. Não, ainda não está dentro da caixa. Quero ter certeza de que está dentro desse contêiner. Então deixe-me arrastar o mês Tudo bem, deixe-me soltá-lo no meio e depois arrastá-lo para cima e colocá-lo no meio. Por que sou incapaz de fazer tudo bem. Então, agora eu sou capaz de levar isso até o fim. Agora, esses três elementos estão dentro de um contêiner. Então, se eu selecionar o contêiner e mudar a direção aqui, agora eles estão dispostos horizontalmente Agora, enquanto esse contêiner ainda está selecionado, vou justificar o conteúdo para o centro dessa forma E agora eu posso escolher qualquer um deles individualmente e redimensioná-los. Então, se eu for aqui para estilizar a tipografia, posso aumentar o tamanho dos $5 individualmente, Então publique isso. Isso é o que nós 5. A seção de precificação parte 2: Como você pode ver, não temos espaçamento abaixo aqui e aqui em cima Então, selecionando o contêiner que contém tudo aqui, vou para Avançado e, sem quebrar esse link, vou dizer que o preenchimento será 30 Isso é o espaçamento da borda até o conteúdo interno. E se eu disser 50. Sim, 50 está bem. Então, agora aqui temos 50 na lateral, temos 50 aqui em cima, 50. Tudo bem Agora, com isso, a próxima coisa que quero fazer é selecionar esse contêiner e alinhar os itens horizontalmente em uma Basta dar uma olhada nisso quando eu seleciono os itens de alinhamento. Agora, tudo está organizado corretamente. Selecione isso, vá para tipografia de estilo, peso 900 preto. Selecione o mês, vá para estilo, tipografia. Na verdade, vou reduzir o tamanho 18, selecionar o símbolo, símbolo da moeda , estilo tipográfico Acho que esse tamanho está bom. Agora, quero ir para a margem avançada, à direita, e reduzir a margem à direita para aproximá-la do valor. Então, 20 negativos parecem funcionar. Também vou selecionar o valor. Vá para a margem avançada, reduza a margem direita para empurrá-la para a direita Assim, para que fiquem juntos. Agora, enquanto isso ainda está selecionado, posso ir para o estilo Color do texto. Eu posso dar esse 209-20-9209. Selecione esse texto. Estilize a cor do texto, pode dar a ele 29, copiar corretamente. Vou selecionar isso também, o estilo do símbolo. Venha aqui. Cole esse código. Agora, eu esqueci de adicionar esse divisor. Então, vamos voltar aqui. Além disso, vamos adicionar um divisor. Vamos soltá-lo ali mesmo, desse jeito, fora desse contêiner. E aqui, digamos, ele deve ocupar 80% da largura, e vamos alinhá-lo ao centro dessa forma Vamos alterá-la para uma linha pontilhada ou tracejada. Vou mudar para linha tracejada. Vou selecionar essa lista de ícones, vá para o ícone. Na verdade, vamos voltar ao conteúdo, listar o item número um, excluí-lo e mudar esse nome para o que temos aqui para até cinco usuários. Acho que recebi essa mensagem. Não quero perder tempo digitando. Então, vou copiá-lo de onde eu o recebi. Eu o encontrei, copie isso. Vou colá-lo aqui. Liste o item número dois, exclua o ícone. Eu não quero o ícone. Copie isso, coloque aqui. Agora, vou acelerar essa parte. Basta adicionar todos os itens e remover o ícone se você não precisar dele. Vou deletar isso. Então, como eu disse, vou adiantar essa parte e nos vemos assim que terminar . Cole isso aí. Copie isso, duplique isso, cole isso lá, publique a próxima coisa eu quero fazer é selecionar enquanto isso ainda está selecionado, quero ir para o estilo e quero dizer espaço entre eles Quero que espaçemos um pouco a quantidade, talvez até dez. Tudo bem, a seguir, vamos até o botão, e eu vou até o conteúdo e digo, o que temos aqui? Até agora. Sim. Então, no conteúdo enquanto o botão está selecionado, agora, vamos até aqui, é aqui que você adiciona o link. Então, vamos supor que esse seja o link. Você vai colocá-lo ali mesmo. E se você quiser abrir em uma nova guia, você pode abrir o link em uma nova janela. Isso o abrirá em uma nova guia, feche isso. Vamos entrar no estilo. E primeiro de tudo, quero quebrar esse preenchimento porque quero dar a ele um preenchimento melhor à esquerda, 50, direita, 50, superior, digamos 20 e inferior 20 Agora, digamos 15. 15. Para o raio da garrafa, digamos dez Sim, sem mais nem menos. Publique. E agora, você notará aqui que esse espaçamento é maior do que esse espaçamento Vamos reduzir o espaçamento aqui. Vou selecionar esse contêiner. Não sei por que não consigo selecioná-lo. Tudo bem, deixe-me selecionar esse contêiner, indo para Avançado, depois quebre essa margem padrão reduza a margem inferior, talvez até aquele ponto. Como você pode ver agora, o espaço entre o cinco e o divisor e o espaço entre aqui e aqui é quase o mesmo. Então publique isso. E vamos dar uma olhada no que temos até agora. Acho que agora estamos chegando a algum lugar. A próxima coisa que queremos fazer é antes de tudo, mudar isso. Então, vou selecionar esse básico, voltar ao estilo, à tipografia Eu quero mudar isso para 900 preto. Vamos para a fonte, a cor do texto. Vamos mudar isso para 29 para qualquer cor que você quiser. 29 29, 29 é a mesma cor que usamos para isso. E eu quero selecionar esse contêiner para reduzir um pouco esse espaçamento Então, espaçamento superior. Talvez até aquele lugar também. E eu também quero reduzir esse acolchoamento na lateral. Lembre-se de que selecionamos esse contêiner e colocamos um preenchimento de 50 em toda a volta Agora, vamos quebrar esse link. E para a esquerda e para a direita, vamos fazer dez e dez. A parte superior inferior é de 50 cada. Publique isso. E agora vamos pré-visualizar as mudanças. Agora está muito melhor. Tudo bem Então, agora, pelo menos agora, estamos chegando a algum lugar. A próxima coisa que quero que façamos é que esses dois sejam espaços reservados para as colunas Agora, o que eu quero fazer é clicar com o botão direito do mouse e duplicá-lo, clicar com o botão direito do mouse e duplicá-lo novamente E agora podemos remover esses dois porque eles eram apenas espaços reservados para duas outras colunas E como temos isso, vou apenas adicionar o preço desses outros. Então copie isso, selecione isso, vá aqui e altere isso para aquilo. E eu vou acelerar essa parte. E agora, o último aqui e ali vamos nós. Então, terminei de adicionar os diferentes recursos e benefícios de cada plano. Eu só vou dizer publicar. E agora vamos analisar as mudanças. E agora, isso é o que temos agora. 6. A seção de precificação parte 3: Quero que o tornemos um pouco mais apresentável. Vamos adicionar um pouco de espaçamento aqui na parte superior para que fique centralizado em nossa tela Então, vou selecionar o contêiner. Avançado, vou quebrar a margem e dar a ela uma margem superior de 50. E eu vou publicar isso. Vamos pré-visualizar a mudança. Sim, acho que é melhor. E agora, na verdade, enquanto esse contêiner ainda estiver selecionado, vou para o layout. Não, vamos selecionar esse recipiente interno que contém tudo dentro. Foi 80%. Quero que talvez 70% publiquem isso. Então, agora, há algo que eu quero que você note aqui. Aqui, todos os nossos botões estão na parte inferior. Essa é a referência que estamos analisando. Portanto, nossos botões estão alinhados muito bem em cada caixa, cada um em cada caixa E aqui mesmo no que criamos, nosso botão está subindo para se aproximar da lista de ícones. Então, como podemos empurrá-los todos para o fundo? Vamos voltar aqui. Agora, lembre-se, adicionamos esse contêiner aqui e adicionamos esses três elementos, e pudemos organizá-los dentro do contêiner. Podemos fazer o mesmo aqui e espaçar esses dois itens. Então eu vou dizer mais, depois contêiner. Vou soltá-lo ali mesmo. Está tudo bem. E com ele solto ali mesmo, posso arrastá-lo para o contêiner e também para o botão. Agora, os dois estão dentro do contêiner. Vou selecionar o contêiner em si, vá para Avançado. E aqui, temos tamanho. Nós vamos dizer cresça. Em outras palavras, ocupe qualquer espaço disponível. Qualquer espaço disponível que não esteja em uso, preencha-o. Então cresça, isso fará com o contêiner cresça para ocupar qualquer espaço disponível. Agora que ele cresceu, tudo o que precisamos fazer enquanto ainda está selecionado é voltar ao layout e justificar o conteúdo para indicar o espaço entre eles Isso vai apertar o botão. Lembre-se de que tínhamos um acolchoamento neste recipiente externo, um acolchoamento superior e inferior de 50 É por isso que isso vai até essa parte. Então, com isso feito, vou voltar aqui arrastar outro contêiner aqui. Arraste esses dois para o contêiner. E como já tínhamos cabeçalhos para isso, vou selecioná-lo, copiar, selecionar esse outro contêiner, clicar com o botão direito do mouse e colar o estilo Quaisquer estilos que aplicarmos a isso serão aplicados a isso, e eu farei o mesmo finalmente. Isso é um título, contêiner. Solte lá, arraste isso para lá, arraste isso para lá. Estilo correto de vazamento, cópia, vazamento correto e colagem. Publique isso. E antes de analisarmos, vou selecionar o botão. Eu vou para o Botão Normal. Dê isso, vamos dar uma cor azul ou qualquer cor que você quiser, cor da sua marca, talvez vermelho. Na verdade, deixe-me selecionar isso mais uma vez. Então, enquanto ainda estiver selecionado, vou para Hover E no Hover, a cor de fundo deve ser 29 29, 29. No Hover, é essa cor. Agora, enquanto ainda está em Hover, vamos para Hover Animation e vou selecionar Bob Esse é o que eu gosto. Esse é o Bob. E agora que o botão está atualizado, vou escrever Leak Copy Certo, vazamento, estilo de pasta, certo, vazamento, estilo de pasta Mas agora eu não gosto dessa cor vermelha. É muito gritante. Vou reverter isso, então vou selecionar isso. Ou, na verdade, vou selecionar isso. Então, normalmente, eu quero copiar essa cor vermelha, passar o mouse e colar lá E quando é normal, é quando vai ser 29 29, 29. No Hover, é vermelho. Sim. Então copie o estilo Paste. Publique isso, visualize as alterações. Lá vamos nós. Então, acho que devemos reduzir o tamanho dessa divisória, então vou selecioná-la e torná-la talvez 50%, cópia vazada à direita, vazamento à direita, estilo de colar, vazamento certo , estilo Publique isso. Não sei se ainda resta alguma coisa. Sim, acho que falta mais uma coisa. Precisamos adicionar alguns efeitos de foco para que, quando alguém passar o cursor do mouse sobre ele, tenha alguma sombra projetada Então, selecionando este primeiro, vá para o layout. Agora, vamos ao estilo, sombra da caixa de borda ao passar o mouse Eu quero dar a ele uma sombra de caixa. Exatamente desse jeito. Agora podemos mudar essa escuridão. Eu quero que seja menos escuro. Então, se eu usar essa transparência, posso reduzir a intensidade da sombra. E agora que eu gosto dessa sombra projetada, vazamento certo, cópia, vazamento certo, estilo de colar, vazamento certo, estilo de colar, publique E agora vamos pré-visualizar as mudanças. Lá vamos nós. Então, agora, se eu superar isso, lá vamos nós. Tudo bem Então, finalmente, deixe-me mudar esses três, esse padrão. Empreendimento. E acho que vou clicar com o botão direito nesta cópia. Não, na verdade, deixe-me clicar com o botão direito do mouse nessa duplicata e, em seguida, vou arrastá-la logo abaixo do básico E acho que diz para pequenos projetos pessoais. Projetos ou projetos pessoais. E eu vou falar sobre estilo, tipografia. Vou aumentar o espaçamento entre letras , mas reduzir o tamanho da fonte E eu vou para a margem avançada superior, reduzi-la até talvez esse ponto, ir para a margem inferior avançada básica. Até aquele lugar. Então, agora vou selecionar isso, clique com botão direito do mouse em copiar, clique com o botão direito do mouse no texto aqui, cole, clique com o botão direito do mouse nesta pasta. E por isso, acho que diz jovens projetos de startups. Projetos de startups para jovens. E, finalmente, projetos de nível empresarial. Publique isso. Algo mais? Sim, isso é $19 E isso deve custar 49 dólares para publicar. E vamos analisar as mudanças. Agora, mais uma coisa que percebi que esquecemos, mas vamos primeiro dar uma olhada Eu realmente gosto disso. Mas mais uma coisa que esquecemos de acrescentar são essas pequenas linhas aqui Então, esses são apenas para adicionar um pouco de tempero ao que já temos Então, selecionando a lista de ícones, vou até o divisor e digo não, e como você pode ver, eles são muito longos. Então, talvez os coloquemos naquele local. Vou mudar isso para pontilhado ou, digamos, tracejado. E, sim, vou deixar isso assim, certo, vazar, copiar, certo, vazar, colar estilo, certo, curtir esse estilo de colar e publicar Vamos dar uma olhada nisso. E lá vamos nós. Então, basicamente, acho que esse é um bom lugar para acabar com isso. Foi um exemplo rápido de como criar uma lista de preços, mas, o mais importante, como trabalhar com contêineres no elemental porque depois de dominar os contêineres no elementor, você pode projetar praticamente qualquer coisa que possa imaginar Então eu acho que esse é um bom lugar para acabar com isso. Se você gostou, se achou útil, não se esqueça de curtir. Não se esqueça de me seguir para ver mais tutoriais no futuro Então, até a próxima vez , seja criativo. Paz. 7. Considerações finais: Acabei de criar uma seção de preços moderna e limpa usando apenas a versão gratuita do elementor e, ao longo do caminho, você também aprendeu a trabalhar confiança com contêineres, contêineres flexbox Agora, esse layout pode parecer simples, mas as habilidades que você acabou de praticar, como trabalhar com contêineres aninhados, gerenciar espaçamento, preenchimento, margens, elementos de estilo, são a base de todos os excelentes designs de elementor , e agora você sabe como fazer tudo e agora você E agora é a sua vez. Eu adoraria ver o que você conseguiu criar. Acesse a guia de projetos e recursos logo abaixo deste player de vídeo e faça o upload do seu projeto. Basta fazer uma captura de tela da sua seção de preços e enviá-la ou compartilhar um link para um site ativo onde podemos acessar e dar uma olhada na sua seção de preços Eu verifico todos os projetos e adoraria ver o que você conseguiu criar. E se você gosta desta aula, eu realmente agradeceria se você pudesse deixar uma breve crítica. Isso não apenas me ajuda a entender o impacto que minhas aulas estão tendo, mas também ajuda outros alunos descobrir minhas aulas no Skillshare Então, reserve um momento e uma breve avaliação e me diga o que você achou da aula. Mais uma vez, obrigado por se juntar a mim, e nos vemos na próxima aula. Paz.