Elementor TURORIAL: Como Criar Conteiner de Compra Segura (pagamentos) PROFISSIONAL

eu tava aqui editando esse site que eu criei há pouco tempo e eu queria esse bloco aqui de compras Segura bem versátil bem profissional diferente do que tem por aí as pessoas simplesmente colocam imagem Mas e se você não quiser o PayPal ou não quiser ouvir ou quiser aumentar ou diminuir o tamanho bom eu vou te mostrar passo a passo como fazer isso aqui de forma profissional utilizando o elemento seja muito bem vindo esse vídeo Meu nome é Isaac eu trabalho curte pra ela já faz bastante tempo e eu faço isso aqui né eu ajudo

as pessoas a desenvolver soluções para problemas específicos problemas genéricos seja eles quais forem tá E hoje eu vou te ensinar a criar esse bloco simplesmente esse bloco aqui de compra segura eu tô aqui com o Comics e o elemento não toca o elemento pro Mas isso é outra questão Então essas imagens já estão em webp e otimizadas elas são minúsculas não pesam em nada o seu site mas antes da gente vir passo a passo vou pedir para você já se inscrever ativar o Sininho entrar no grupo telegram que eu posto os vídeos lá assim que

eu coloco aqui no YouTube e você não pede nenhum Tá bom então vamos lá passo a passo Olha só tô aqui com a criação só que é claro né eu vou criar uma página nova eu vou vir aqui a nova página Você quer aprender a criar esse site tá eu ensino aula 627 bloco cartões né ou compra segura alguma coisa assim eu vou vir aqui ó eu vou copiar toda essa parte e vou colar aqui você vai entender o que eu tô falando tá você quer aprender a criar tudo isso aqui eu ensino tá eu

fiz um vídeo aqui passo a passo onde eu ensino a criar tudo isso aqui eu queria que a página eu vou excluir tá você contém e agora eu vou colocar essa parte Lembrando que eu vou deixar para você olha só eu utilizei o Photoshop e eu recortei cada imagem específica e eu coloquei cara tamanho específico e já utilizei vou deixar Prontinho para você só baixar e utilizar aqui nessa aula tá eu acho que isso já vai um like Se valer deixa lá para mim tá eu vou ficar muito feliz com isso eu vou colocar aqui

um container Lembrando que você tem que estar com os containers ativado nas configurações do elemento tá basicamente eu preciso de algumas informações primeira que era largura inteira 100%. eu vou te mostrar que você pode ser maleável que isso aqui se você quiser tá ok altura mínimo não vou colocar vai depender do conteúdo e aqui os itens ele tem que ser em linha porque porque os itens ficam um do lado do outro então precisa sem linha porque esses aqui são independentes é tanto que se eu não quiser o PayPal por exemplo meu site eu não trabalho

com PayPal eu posso tirar somente PayPal é por isso que isso aqui é um pouco mais avançado do que simplesmente colar uma imagem porque se você pesquisar você tem vários aqui ó só que vem do jeito que já tá feito se você tá aqui não tem um mercado pago como que eu vou fazer ah utilizo mais menos O Elo então não tem como fazer tá eu peguei as imagens mais utilizadas e coloquei aqui para a gente já ter um desempenho melhor tá bom então vamos lá aqui os itens em linha e aqui eu vou deixar

eles espaço entre para ele ficar sempre afastado o máximo Um item do outro e ali ainda itens no centro tá bom E aqui eu vou deixar o GAP em 5 que é para eles não Encostar um no outro com cinco pixels de espaço tá bom E vou colocar para envolver porque eu preciso caso ele fique grande demais tá se você não colocar isso aqui ele não quebra a linha Tá bom eu vou te mostrar agorinha e aqui no estilo Por enquanto nada aqui eu vou zerar e aqui eu vou colocar 20 tá bater um packzinho

interno vou quebrar aqui o vínculo vou colocar 25 porque eu quero um pé de maior em cima e vou colocar 20 de superior na margem porque porque eu quero que ele não colhe no item Acima tá bom e pronto Por enquanto é isso agora eu vou fazer o que eu vou pegar um outro contente ou perdão vou pegar aqui uma imagem tá vou pegar uma imagem e vou colocar completo porque completo porque o tamanho da imagem é exatamente o tamanho que eu vou utilizar um pouquinho menor mas é maleável tá bom deixa completo vai fazer

muito sentido e aqui estão as imagens Olha só eu fiz várias né inclusive com garantia SSL mas eu vou pegar um aqui avisa e já coloquei ó para você ter ideia Visa ele tem um CAD tamanho tá 83 por 52 é o tamanho específico dele tá então completo ele já tá em 83 e eu posso fazer o quê duplicar se eu quiser aqui eu vou duplicando e vou colocando quantos eu quiser por exemplo trabalho só com esses aqui eu venho em segundo aqui ó clico e vou trocar a segunda Mastercard eu coloco o terceiro aqui

é o quarto existe aqui o botão agora um coraçãozinho escrito Valeu se você quiser ajudar de financeiramente É assim que você faz aqui no YouTube Tá bom é Maria Express e o quinto eu vou colocar o que PayPal né Não sei se eu coloquei não vou colocar esse aqui compra segura tá que fala do SSL tudo mais Olha aí já tá lado a lado um do outro tá já com os tamanhos corretos Tá ok Por enquanto é isso E aí que que você vai fazer agora você pode perceber que no modelo tem essa borda tem

esse lança aqui interessante aqui em cima como que eu vou fazer primeiro eu vou botar a borda aqui não container Tá eu vou colocar o nome desse container cartões tá cartões opa compra segura E dentro dele tem as imagens e dentro dele vai ter também Opa perdão aqui nesse bloco de container container contém compra Segura Eu gosto de renomear porque aí eu não me perco tá compro segura pronto esse container eu vou vir aqui no estilo dela e vou pintar o fundo eu quero pintar o fundo de branco tá bom e vou vir aqui A

engorda e vou colocar aqui tipo de bordas Opa sólido não tracejada você põe que você achar melhor a largura é um pixel 4 pixels de arredondamento e a cor da borda eu já deixei salvo aqui ó bcb5b5 tá bom colei pronto tá aí a minha borda já tá bacaninha podia parar por aqui já estava excelente né porém eu não quero vamos lá eu vim invadir esse vídeo só para trazer uma dica muito boa para você eu tenho certeza se vai gostar Arrocha tá com a promoção muito interessante agora de black friday com plano de 11,99

por mês né Tem LED Speed e tem a segurança do closet tem SSL ilimitado domínio grátis e-mail grátis e a otimização para o WordPress você pode colocar aí até sem sites e o primeiro domínio você ganha durante um ano e se você adicionar o carrinho eu vou te mostrar como você pode ter um maior desconto eu sugiro pelo menos 12 meses para você ganhar o domínio e se você colocar no cupom Mesaque e aplicar você vai ter um desconto tá ok então não esquece link na descrição cupom a Mesaque pra ver ter mais desconto vamos

voltar pro vídeo aqui na verdade Já tá feito mesmo eu preciso agora colocar o quê essa parte aqui de compra segura em cima né Você pode perceber que tá menorzinho também né mas espaçado aqui tá maior mais colado tudo isso é maleável você pode mexer que que você vai fazer que você vai vir aqui vai colocar um outro container aqui dentro pode botar aqui embaixo ó aí você arrasta ele aqui de cima dentro do container compra segura como um elemento de imagem por exemplo tá E nesse contexto eu vou colocar o nome contém o título

você vai fazer o que você vai vir aqui vai colocar vertical vai colocar 100% aqui também se pode ser maleável nesse aqui também mas nesse caso aqui dessa forma que vai ficar perfeito e você vai colocar também aqui ó no centro no centro e zero e não vou colocar envolver tá bom E aqui no avançado eu vou colocar zero e zero e vou deixar dessa forma assim o que que eu vou fazer aqui agora eu vou colocar um título arrastar aqui para dentro desse contente e vou escrever o que eu quiser é colocar aqui compra

segura ou SSL ou você está seguro né compra garantida o que você quiser tá bom eu vou colocar comodive que não é um título nesse caso no centro e eu vou vir aqui ó no estilo eu vou botar a cor do texto dessa forma mesmo aqui na tipografia para você saber já é padrão do site Mas eu vou colocar para você entender eu coloquei a Pops 14 aqui 500 tá transformação no mexi estilo no mexi decoração também não altura da Linha eu vou deixar em um porque ela vive né e espaço entre letras e eu

vou estar zero para ela ficar um pouquinho mais aberta Tá ok e tá feito basicamente tá feito e agora eu vou fazer o quê vou vir aqui no avançado vou zerar e vou zerar o pad e a margem e agora vou descer aqui ó em borda Lembrando que eu tô no título tá não tô no container não vou mexer nele mais não compra segura eu vou aqui no título compra segura desse aqui em borda eu vou colocar o mesmo que eu coloquei lá pontilhado um pixel e a mesma cor a mesma cor arredondamento voltar só

dois tá ok olha o jeito que ficou opa não é pontilhada tracejada tá pronto fiz isso agora no layout porque eu preciso que ele tem um padzinho né tá colado então o que que eu vou fazer eu vou colocar um pézinho em cima de dois pixels embaixo de dois na direita 10 e na esquerda 10 e eu olho já tá bom ó tá legal vou colocar mais um em cima e mais um embaixo três em cima três embaixo e ver se tá bom tá ótimo para mim já tá ótimo que que eu vou fazer eu

vou vir aqui na borda tá e eu posso até deixar um pouquinho mais largo vou deixar aqui ó 14 14 na esquerda na direita deixa aqui para Borda de novo quebra o vínculo aqui da largura da da borda e eu não quero em cima e não quero embaixo tá então põe zero Olha como ficou perfeito e eu também tenho que vir aqui ó no estilo ou para estilo não no fundo né aqui em avançado Desce aqui para o fundo do lado da borda aqui que nós acabamos de fazer eu vim aqui e coloca o branco

eu preciso pintar de branco senão ele não vai chapar lá em cima Pronto agora vem aqui no layout e vou botar um menos 40 e eu olho ó passou um pouco né olha lá passou um pouco eu vou deixar ele menos 36 ficou perfeito para mim basicamente tá feito o que que você acha Eu vim aqui vou salvar como rascunho Olha aí praticamente está feito vamos ver aqui em mobile antes da gente fazer as modificações necessárias tá vendo Esquece isso aqui tá da esquerda é só aqui na direita nós vamos focar aqui nós teremos que

diminuir o tamanho né para caber tudo e uma linha só porém por isso que ele quebra para duas linhas se você vir aqui ó nesse item tá na container compra segura você vem aqui no layout se você tirar o GAP né envolver ele para de quebrar botar aqui ó se envolver tá vendo aí fica um do lado do outro mas olha só como é que fica esquisito tem que ter se envolver aqui tá deixa como padrão Aí aqui dentro nós temos os itens se você quer que eles fiquem na lateral você vem aqui largura e

você diminui o tamanho dele o que que eu vou fazer vou voltar aqui no computador se eu quiser o tamanho dele como todo eu venho aqui ó container compra segura e vem aqui faço isso ó por exemplo quero deixar em 80% né quer deixar ele no meio aí eu venho aqui avançado deixo ele no centro olha só Olha só como ficou legal não quero deixar no canto vem aqui coloca no canto olha só que legal tá E agora tem que alinhar esses itens né que eu vou fazer pegar esse vidro aqui vou vir no avançado

e vem aqui a largura tá lembrando que eu tô no computador eu coloco personalizar em Pixel eu coloco 60 é um tamanho legal eu copio né Aí vem aqui ó um seguro Ctrl e vou clicando em todos que eu quero colar Cola aqui o estilo só que esse último aqui ele é parece que é o menor mas ele não é menor ele tá na mesma largura você vem aqui no avançado e você vai aumentando ele tanto que você conseguir tá É lógico do jeito que ele não fique estúpido né ó 120 120 para mim ficou

perfeito Olha aí tá bom e tá maleável Tá OK e eu posso vir aqui aumentar compra segura posso vir aqui no layout e diminuir ou aumentar e eu vou ajustando conforme eu vou fazendo eu vou deixar em 100% que é o que e aqui eu posso também fazer o quê aumentar somente esse compra segura botar em 150 ó porque ele chama mais atenção tá você põe do jeito que você achar melhor eu vou vir aqui no item 60 eu vou botar aqui 80 vamos ver se eu consigo 80 copia aí vou colar nos outros cola

o estilo e esse último aqui eu vou aumentar ele o máximo que eu consegui 160 já tá bom Então é isso espero que você tenha gostado que realmente te ajude que realmente faça você ter uma página de single de produto bem mais profissional e mais maleável para você trabalhar forte abraço não esquece acesse o link da loja que é parceiro aqui do canal que é a melhor hospedagem custo-benefício que eu já testei tem servidores Light Speed você ganha um domínio por ano SSL limitada e gratuito muitos muitos fatores positivos né muitos pontos positivos que faz

ela ser um dos melhores cursos benefícios o melhor que eu conheço e também o link vai estar na descrição e use o cupom Mesaque porque você tem mais 10% de desconto uhu Tá certo então que Deus abençoe sua vida sua família seus projetos eu espero no próximo vídeo tchau tchau [Música]