Como alterar a cor do rodapé no tema Amazonas com CSS Avançado - Nuvemshop

🚀 Me contrate para montar a sua Loja na Nuvemshop
loja.planweb.c...
🎁 Use o cupom: OFF10 e ganhe desconto
➡️ Playlist dos vídeos sobre Nuvemshop e e-commerce
• Como fazer uma loja vi...
Nesse vídeo eu ensino como alterar as cores do rodapé da loja virtual Nuvemshop com tema Amazonas.
Alguns temas tem a opção de alterar essa cor diretamente no painel, na parte de cores da sua marca, em personalização layout.
Mas o tema Amazonas são poucas as opções de personalizações de cores, daí quando necessário mudar as cores, precisa recorrer ao CSS Avançado para aplicar os ajustes desejados.
Nesse vídeo vou ensinar exatamente isso, como identificar o seletor de um elemento da sua página, as propriedades CSS que definem as cores do texto, do fundo e dos ícones, e outras dicas mais.
-----------------------------------------------------------------------------
QUER CRIAR UMA LOJA VIRTUAL AGORA?
Se você gosta de vender e quer ter um e-commerce para vender seus produtos na internet, criar uma loja virtual com a Nuvemshop é a melhor opção e muito rápido.
É só acessar o link abaixo e criar sua loja agora
loja.planweb.c...
-----------------------------------------------------------------------------
Para que o KZbin entenda que esse conteúdo é autentico, que te ajuda, e que você quer continuar assistindo meus vídeos:
☑️Inscreva-se no Canal
👍Deixe seu like
✏️Deixe seu comentário
❤Compartilhe esse vídeo: • Como alterar a cor do ...
ME ENCONTRE AQUI TAMBÉM:
👍 Facebook: planwebin...
💻 Loja: loja.planweb.c...
📲 Instagram: / planwebinterativa
👉 Whatsapp: planweb.com.br...
#nuvemshop #lojavirtual #css

[@marcostomazelli3481]

Jackson, como fazemos para alterar a cor de algo somente no mobile ou somente em Desktop? É possível?

[@JacksonJorge]

Sim, é possível, para isso utiliza as Media Queries onde você define que determinado trecho do CSS será aplicado apenas quando uma condição for satisfeita... Na prática seria o seguinte... @media(max-width: 767px){ footer{ background: red; } } Dessa forma eu defini que o rodapé será vermelho apenas em dispositivos com a largura de tela máxima de 767px, ou seja, dispositivos mobile. E assim dentro desse @media você pode incluir todos os CSS que são aplicados apenas para o mobile... Se quiser criar CSS apenas para o DESKTOP basta inverter deixando a media query assim: @media(min-width: 768px){ footer{ background: blue; } } Agora nesse trecho de cima colocamos o rodapé azul para os dispositivos com largura de 768px ou maior. Para aprender mais sobre Media Queries tem o link abaixo. developer.mozilla.org/pt-BR/docs/Web/CSS/Media_Queries/Using_media_queries Espero ter ajudado!

[@marcostomazelli3481]

@@JacksonJorge Muito obrigado pela resposta!! Vou testar e te falo se deu certo :)

[@eduardacandida5297]

@@marcostomazelli3481 oiii vc conseguiu? tentei seguir o que falou aí mas não deu certo 😢

[@marcostomazelli3481]

@@eduardacandida5297 Ainda não testei, vou tentar entre hoje e amanhã, ai eu te aviso!

[@fernandobrito7981]

olá não deu certo aqui!

[@camilaramalho4751]

Para mim não aparece a edição avançada do CSS

[@myhousetech]

boa tarde como eu coloco um " X " na variaçoes indisponiveis de um produto ? na nuvemshop

[@JacksonJorge]

Esse vídeo creio que te ajude. kzbin.info/www/bejne/gGOTXmOCpt11mLM

[@Bradok_oficial]

Me ajuda ai mestre,,, fiz todos os passos... Só oque nao consigo mudar de jeito nenhum são os ícones telefone, whatsapp...

[@Bradok_oficial]

Mesmo vc explicando em video.. por aqui não consegui.. pode me enviar esses códigos

[@lovingtoy]

Me sentindo a programadora kkkkk

[@lovingtoy]

Sobre os banners como colocar eles por trás do cabeçalho?

[@iolandaaguiar1412]

Menino do céu ! Você é absolutamente necessário. Valeu! Sucesso em dobro pra voce.

[@JacksonJorge]

Que bom que ajudou, obrigado

[@Ŧlเ]

O meu não tem a,hover

[@nenellockdown3098]

Comigo não funcionou

[@rayaneoliveira8872]

Oiii tô fazendo igual você falou mas não tá dando certo

[@JacksonJorge]

olá, dispomos da hora técnica para auxiliar nessa demanda. Deixo o link para falar com minha equipe. planweb.com.br/whats

[@fernandaleal8254]

eu fiz mas mudou só no celular, não mudou no desktop

[@JacksonJorge]

Segue as orientações no vídeo e tenta inspecionar corretamente os elementos desabilitando a visualização em formato mobile... Se ainda não conseguir, daí a única forma de ajudarmos é entrando em contato com minha equipe e contratar uma hora de consultoria para te ajudarmos nisso. Segue o link do whats caso tenha interesse... planweb.com.br/whats

[@goldsports755]

NÃO CONSEGUI NO MEU SITE.. PODE ME AJUDAR POR FAVOR

[@JacksonJorge]

olá, Dispomos da consultoria para te auxiliar nesse processo. Deixo aqui o link para entrar em contato com minha equipe e ter as informações do serviço. planweb.com.br/whats

[@eusousandrasantos]

JA ESTAVA PROCURANDO ALGUEM PRA PAGAR, PRA ARRUMAR O MEU SITE, MAIS GRAÇAS A SEUS VIDEOS CONSEGUI.

[@JacksonJorge]

Fico feliz em ter ajudado.

[@TheJosielymp]

fui colocar em pratica hoje nao funcionou

[@olimpiocarvalho9923]

Parabéns cara explica muito bem e sem limitar o que está passando

[@JacksonJorge]

que bom ter ajudado.

[@vivojesus90]

Montei minha loja sozinha só com as suas dicas. Como eu nunca fiz nada parecido , foi muito árduo o processo, mas achei seu canal e fui salva! Vou maratonar agora o de anúncios! Vc é necessário, parabéns!!!!

[@TheJosielymp]

Verdade

[@JacksonJorge]

Fico muito feliz em saber disso e mais motivado em trazer cada vez mais conteúdo e experiência para vocês. Desejo todo sucesso com sua loja!

[@LeonardoPDia]

Muito boa a aula! Só não estou conseguindo mudar a cor dos icones, parece que a função fill não está funcionando para selecionar a cor do icone, sabe o que pode ser? Fazendo a alteração inspecionando o site a cor vai certinho, porém ao adicionar no css não aplica. Vaaleu ! Meu tema é amazonas também

[@JacksonJorge]

Utilize fill e color... Coloque a flag !important e se mesmo assim não funcionar, coloque o css em códigos externos 》código de rastreamento

[@augustobarbosa4480]

A cor não é alterada por que, por algum motivo a nuvemshop não deixa alterar a cor da propriedade fill. É necessário filtrar a cor. No meu caso eu fiz um filtro para os ícones ficar branco. Segue o código: .contact-item path { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%); } Se você deseja outra cor, acesso o site: angel-rs.github.io/css-color-filter-generator/ Coloque a cor desejada e clique em "Obter filtro" Vai ser gerado um código nesse mesmo formato: "filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);" Porém, com as porcentagem da sua cor. Copia o código e cola do mesmo jeito que coloquei no exemplo acima. Lembrando que o código da cor precisa estar dentro da class que nesse caso é ".contact-item path". Qualquer dúvida é só falar.

[@LeonardoPDia]

@@augustobarbosa4480 Valeu mano, consegui aqui já, adicionei no codigo externo o css e inseri no

[@augustobarbosa4480]

@@LeonardoPDia Maravilha! TMJ

[@dielenexplica6840]

Olá, seus vídeos são excelente. VocÊ poderia ensinar como colocar animação nas imagens, dos produtos quando passa o mause? EX: camiseta - frente, passa o mause na imagem, CAMISETA -COSTAS?

[@ismileisabella]

Achei ótima a explicação, compreendi. Meu tema é Amazonas. Consegui alterar a cor das letras, mas o fundo cinza e os ícones não modificam de jeito nenhum! =/ Vim olhar os comentários e vi que várias pessoas que também não conseguiram!

[@herus2]

O meu não consegui alterar nada.. rsrs eu tentei alterar 2 coisas, mas não consegui. eu tenho uma noção, e fiz passo a passo, mas não alterou nada do que eu queria.

[@cyntiaprucho]

ei tudo bem? estou usado o amazoas, porem o icone do whats app, nao consigo alterar de jeito nenhum. fiz igual vc ensiou. oq sera?

[@vitrinedaduda61]

EU ESTOU NA LUTA PARA MUDAR A DESCRIÇÃO DOS PRODUTOS. NO MEU CASO APARECE 2 LINHAS NAS DESCRIÇÕES, JÁ TENTEI MUDAR PARA 4 LINHAS E QUANDO COPIO O CÓDIGO NÃO VAI.

[@vitoravelino8617]

Vídeo muito bom jackson. Mas no meu quando vou mudar esses ícones do WhatsApp, por exemplo, a cor não muda. Mas seguindo os passos. Foi a única coisa que não consigo mudar

[@AndreFelipe-xn9fr]

fiz exatamente oq vc fez no vídeo, mas as cores dos ícones não estão mudando

[@JacksonJorge]

Se o seu tema for diferente do meu, não pode fazer exatamente o que fiz, precisa utilizar o método para encontrar o seletor correto e montar seu código. Se for igual, daí teoricamente era para funcionar, mas sem ver e analisar a loja fica impossível te ajudar mais do que a forma que tenho feito, daí somente entrando em contato em agendando uma consultoria para fazermos juntos. Caso tenha interesse, chama aí no planweb.com.br/whats que minha equipe já lhe atende

[@augustobarbosa4480]

A cor não é alterada por que, por algum motivo a nuvemshop não deixa alterar a cor da propriedade fill. É necessário filtrar a cor. No meu caso eu fiz um filtro para os ícones ficar branco. Segue o código: .contact-item path { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%); } Se você deseja outra cor, acesso o site: angel-rs.github.io/css-color-filter-generator/ Coloque a cor desejada e clique em "Obter filtro" Vai ser gerado um código nesse mesmo formato: "filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(93deg) brightness(103%) contrast(103%);" Porém, com as porcentagem da sua cor. Copia o código e cola do mesmo jeito que coloquei no exemplo acima. Lembrando que o código da cor precisa estar dentro da class que nesse caso é ".contact-item path". Qualquer dúvida é só falar.

[@larissaviana2930]

Fiz desse jeitinho, meu tema também é o amazona e não funcionou. Tem alguma sugestão?

[@rokiler2715]

tem como eu mudar o link de um botão q aparece, ou eu consigo remover esse botão. qualquer um dos dois me salvaria

[@temdetudo9789]

bom conteudo gostei, tenho uma duvida espero que vc me responda. Tem como colocar varias cores de fundo no site ( Background ) exemplo: Uma parte do site é branca descendo para baixo é azul, seria possivel fazer isso? me responde pfv. Obg

[@JacksonJorge]

Depende do tema que você está utilizando, dá para fazer definindo background-color nas seções, porém, em alguns temas, as seções tem margens laterais ou largura limitada, daí as cores não preenchem toda a largura da tela e fica estranho... Mas minha dica é entrar no Nuvemshopeiros que lá tem alguns CSS personalizados para alguns temas, além da mentoria e grupo de suporte que pode te ajudar nisso... planweb.com.br/nuvemshopeiros

[@julianamarques4782]

Jackson, é possível alterar a cor do botão de comprar no tema Amazonas, mas sem ter relação com as cores da loja? Minha loja é azul e o checkout também fica azul. Notei que isso me faz perder vendas, um vez que os clientes estão acostumados com checkout verde.

[@JacksonJorge]

Olá... Daria para criar um CSS para mudar essa cor... Deixo o link aqui para caso queira ter mais informações com minha equipe. planweb.com.br/whats

[@WisdomTimes]

Rapaz ...gratidão 🙏 clareou a ideia aqui ! ....te desejo sucesso meu amigo !!

[@JacksonJorge]

Que bom que clareou... Sucesso para você tbm amigo... tmj

[@TheJosielymp]

ah ta....descobri que tem que ter o plano influência para ter acesso ao codigo, poxa que pena :( , meu plano é o básico

[@JacksonJorge]

Oi Josy, a partir do plano Impulso (R$ 49,90) já é possível.

[@globetradelimited-l7x]

Top meu irmão, obrigado

[@mavericktec]

Estou com dificuldade pra deixar 2 produto um do lado do outro no layout Amazonas, fica,mas só aparece a metade do outro ,ae tenho que ficar passando pro lado

[@JacksonJorge]

vc pode usar o css para essa função... qq coisa chama minha equipe no link que deixo aqui. planweb.com.br/whats

[@clickbee2183]

Muito bom, me sinto meio T.I , amei aprender sobre isso e me ajudou a configurar o layout do meu site, ainda em construção... Valew!

[@JacksonJorge]

show. Sucesso pra vc.

[@gabrielalazarini3583]

Só pra agradecer mais uma das duas mil dicas que eu sempre ponho em prática! Fiz isso com a cor do botão comprar e deu super certo! Obrigada por compartilhar tanto com a gente!

[@JacksonJorge]

Fico feliz em ajudar.

[@CarlosRoberto-vs9qd]

show, muito bom mesmo!!!

[@JacksonJorge]

Que bom que gostou, obrigado pelo feedback

[@renataveras9716]

O meu plano é o influência e não funciona....

[@JacksonJorge]

Renata, funciona em qualquer plano, só precisa ver se o seletor CSS está correto, se o tema for diferente do que utilizei no vídeo, não adianta copiar o mesmo código, tem que utilizar o método para montar o seu código próprio para o seu tema

[@larissaviana2930]

@@JacksonJorge oii, o meu também não vai, como eu sei se o seletor CSS tá certo?

[@TheJosielymp]

O Jackson, isso tbm se aplica naquela faixa cinza ?? logo abaixo do banner onde mostra os links de exemplo frete grátis, parcelamento, pois queria q ele ficasse mais estreito pq no modo mobile ele fica MT largo e eu acho estranho pois fica mais largo que o banner😒

[@JacksonJorge]

Isso mesmo Josy, pode utilizar o mesmo princípio, porém, precisará utilizar outras propriedades do CSS como por exemplo a "height" que define a altura de um elemento, mas daí vai inspecionando e testando até ficar como deseja...

[@TheJosielymp]

@@JacksonJorge eu vi um site do mesmo template que o meu com essa faixa cinza menor, mais eu não vi esse altura e largura no inspecionar dessa Barra cinza...queria tanto diminuir o meu😣