Se inscreva para receber meu conteúdo com dicas e seja notificado sobre os novos vídeos do canal. Inscritos aqui, tem prioridade e atenção.
Quer ser mestre em Wix?
{msg}
Como criar o efeito de desfoque ou vidro no Wix
Efeito de Desfoque o Blur Effects agora está melhorado e espero muito que vocês gostem.
Transcrição do vídeo
Fala galera, tudo bem com vocês?
00:00:00
Bom, se você está ligado aqui no canal,
00:00:03
você sabe que eu fiz há um tempo atrás um
00:00:05
vídeo explicando para vocês como você faz
00:00:08
um efeito Blur effect dentro do editor
00:00:11
da wix, né? Eu utilizo o editor x, mas
00:00:14
funciona em qualquer editor, tá bom?
00:00:16
Então, Ago. Mesmo
00:00:19
efeito, o mesmo efeito, igualzinho só que
00:00:22
100 vezes melhor, né? Personalizável,
00:00:25
ali, dá pra você customizar tudo e muito
00:00:28
mais fácil para vocês conseguirem
00:00:31
aplicar. Porque eu vi naquele vídeo
00:00:32
depois de eu ter postado que ele estava
00:00:34
um pouco complexo de entender, tá bom,
00:00:37
confesso. É, porém, agora ficou muito,
00:00:40
muito, muito mais simples, tá? Então
00:00:42
vem comigo aqui para você ver como ficou
00:00:46
esse efeito e aplicar no seu site também
00:00:48
que eu tenho certeza que vai ficar muito
00:00:51
massa, já dá um gosto ter aqui no vídeo
00:00:52
que eu tenho certeza que você vai gostar
00:00:55
desse material e se você
00:00:57
gosta, né, desse tipo de conteúdo, de
00:00:59
fazer coisas diferentes. Né? Coisas que
00:01:02
não são nativas do editor EEE
00:01:04
quer que eu traga mais desse tipo de
00:01:07
coisa aqui dentro do canal? É, comenta aí
00:01:09
embaixo também, tá bom, não se esquece de
00:01:11
se inscrever, tá? Para ajudar, a gente
00:01:14
está com um desafio de quando a gente
00:01:16
chegar a 500 inscritos aqui no canal.
00:01:18
É, eu vou ensinar para vocês como fazer
00:01:21
aí Oo famoso é
00:01:24
clone da Netflix? Está? Que também é que
00:01:26
tem aqui no canal? Caso você não tenha
00:01:29
visto beleza aqui dentro do
00:01:31
editor, o que que a gente vai fazer? Tá?
00:01:34
Estou mostrando aqui já para vocês o
00:01:36
efeito final, né? É que
00:01:37
ficou o blue FCT 2.0.
00:01:40
É, vou tirar ele aqui. Eu não vou
00:01:44
mostrar ele aqui só para não atrapalhar,
00:01:47
tá? Vou fazer do zero para vocês
00:01:49
terem a mesma experiência que eu, caso
00:01:52
você não saiba e não tem essa visão
00:01:54
toda que eu estou tendo tá aqui. Por
00:01:57
exemplo, é, vocês precisam ativar Oo
00:01:59
Velo tá dentro do site de vocês.
00:02:02
Para isso, você vá aqui, vai aqui no menu
00:02:06
em avançado e clica em ativar modo
00:02:08
avançado, beleza?Fazendo isso, ele
00:02:11
vai aparecer todo esse menu aqui na
00:02:14
lateral. O que são mais opções? As
00:02:16
opções estão relacionada ao vello, né? Ao
00:02:19
ambiente dele tá o minimizar aqui. E
00:02:21
o que que a gente vai fazer, né? Nessa
00:02:24
guia, onde tem esses, essas ravinhas
00:02:27
aqui não sei se é chaves.
00:02:29
Não sei. Onde? Onde tem essa opção
00:02:33
aqui, ó público e back end, tá? Você vai
00:02:36
clicar aqui aqui aonde vai estar todos os
00:02:38
códigos do nosso site, o que que a gente
00:02:41
vai fazer aqui? A gente precisa criar um
00:02:43
arquivo aqui em constam elements, mas
00:02:46
você não vai ter essa pasta que
00:02:49
provavelmente tá para você ter essa
00:02:50
pasta, você vai vim aqui nesse maisinho.
00:02:53
No menu em inserção e social
00:02:56
e você vai pegar aqui o elemento
00:03:00
customizado personalizado, quer dizer, tá
00:03:01
e vai arrastar aqui pra sua tela.
00:03:05
Como eu disse, ele funciona também no
00:03:08
editor wix normal, tá? Porém, pode
00:03:11
ser que seja um pouco diferente esse
00:03:13
menu, mas tem esse elemento lá também,
00:03:15
tá? É elemento personalizado clicou,
00:03:17
arrastou pra tela é a mesma coisa nos
00:03:19
próximos passos também segue a mesma
00:03:22
regra e o que que a gente vai fazer aqui?
00:03:24
Você vai clicar aqui em escolher fonte e
00:03:27
aqui pra você vai ter essa opção arquivo
00:03:30
do Velo, só que aqui embaixo você quando
00:03:32
você clicar aqui em selecionar em um dos
00:03:35
arquivos, né você?Vai ter a
00:03:37
opção apenas criar um novo arquivo, né?
00:03:40
Algo assim como eu já tenho alguns
00:03:43
arquivos, ele não está aparecendo pra mim
00:03:45
essa opção. Então você clica nessa opção
00:03:47
criar um novo arquivo e ele vai
00:03:50
selecionar automaticamente já nomear aqui
00:03:51
a tag que a gente precisa fazer também é
00:03:54
um pouco mais pra frente, tá? Fez fazendo
00:03:57
isso, né? Você vai voltar aqui na
00:03:59
abinha? É público e back end e
00:04:02
vai vim aqui e vai ver que a pasta custam
00:04:05
elements. Foi criada também dentro do seu
00:04:08
projeto tá você vai abrir ela e vai ter
00:04:10
um arquivo lá que é o arquivo que é o
00:04:13
Wick, criou por prodão tá? Porém, a gente
00:04:15
não vai, não vai utilizar, ele pode
00:04:18
ignorar que que você vai fazer, você vai
00:04:20
criar um novo arquivo. Lembra que
00:04:22
é novo arquivo ponto GESE, não a
00:04:24
opção abaixo, que é só novo arquivo, tá?
00:04:27
E ele vai estar aqui, ó, nomeado como new
00:04:31
fiel, a gente vai nomear ele aqui.
00:04:33
Renomear, né? Como Blur
00:04:35
effect? Porém, esse nome aqui é
00:04:38
o nome que você preferir, tá bom?
00:04:42
Vou pagar aqui todo esse código
00:04:48
padrão que a wix deixa e você vai aqui na
00:04:51
descrição desse vídeo, aproveitando já se
00:04:54
inscrevendo no canal e dando gostei no
00:04:56
vídeo também. Você vai pegar esse código
00:04:59
que eu deixei para vocês, tá,
00:05:02
gente? Código, eu sei que quando fala em
00:05:05
programação é um negócio complexo. Ah,
00:05:07
não consigo fazer e tudo mais, você não
00:05:10
vai precisar mexer nesse código, tá bom? a
00:05:12
não ser que você entenda, aí você pode
00:05:15
personalizar e deixar esse elemento ainda
00:05:16
melhor, mas fica tranquilo, a gente não
00:05:18
vai programar aqui, tá? Eu só quero que
00:05:21
você pegue o código, copia ele e
00:05:23
depois traga aqui para o editor colando
00:05:26
a. Ele aqui. É da mesma forma que eu
00:05:28
fiz, tá bom? Só isso, só isso,
00:05:31
mas nada mais nada e nada fechou.
00:05:34
Vou fechar a telinha aqui, ó pra vocês
00:05:37
não brigarem comigo, né? Eu sei que aqui
00:05:39
no canal eu tento sempre trazer esse
00:05:42
conteúdo um pouco mais complexo, né?
00:05:44
Principalmente que envolve programação,
00:05:46
mas dessa vez, o que simplificar? No
00:05:48
outro já foi um vídeo complexo, esse aqui
00:05:51
é para ser um vídeo fácil.
00:05:53
O que é que a gente vai fazer aqui agora?
00:05:57
Tá como? O nosso arquivo criado?Eu vou
00:05:58
vim aqui no elemento customizado,
00:06:01
né? Personalizado? Aliás, eu vou escolher
00:06:03
a fonte tá selecionando o arquivo do
00:06:06
Velo e vou colocar aqui o nosso
00:06:09
arquivo tá? E que que eu vou colocar
00:06:12
aqui? O nome da tag Blur?
00:06:14
Traço efect esse aqui
00:06:17
já precisa ser exatamente desse jeito que
00:06:20
eu falei, tá bom, Blur? Traço
00:06:23
effect tá dessa mesma forma, não
00:06:26
pode ser diferente e ele vai.
00:06:29
De ficar transparente aqui já tá?
00:06:33
Então se ficou transparente, é porque
00:06:36
você está fazendo o caminho correto.
00:06:38
É uma coisa importante de
00:06:42
é da gente ter atenção aqui
00:06:45
para esse elemento personalizado
00:06:49
funcionar. O seu site precisa ser um site
00:06:50
premium, beleza e
00:06:53
precisa ter o seu domínio conectado.
00:06:55
Ele não vai funcionar se for um site
00:06:58
gratuito da wix fechou,
00:07:00
então vamos lá. Ah, mas Wellington ficou
00:07:03
transparente, não era para ficar com o
00:07:06
efeito aqui, né não?Está
00:07:08
bom, ainda é precisa ter. É com
00:07:11
precisamos configurar algumas coisas e o
00:07:13
que que a gente precisa fazer? A gente
00:07:16
precisa definir alguns atributos que eu
00:07:17
coloquei justamente para que a gente
00:07:20
pudesse personalizar e deixar esse
00:07:22
efeito com a nossa cara. Tá bom, vou
00:07:24
definir aqui os atributos e o primeiro
00:07:27
deles que a gente vai criar é o Collor.
00:07:30
Esse atributo color ele vai definir a
00:07:34
cor do do, do, do, do background, do
00:07:37
Blair ali tá bom e você vai ver já já.
00:07:39
Mas como é, eu encontro, eu sei como
00:07:43
eu vou colocar essa cor, tá? Eu gosto de
00:07:46
utilizar ORGB, porém você pode
00:07:48
utilizar Rex hs LO que você
00:07:51
preferir. Wellington, você tá falando
00:07:54
inglês comigo, beleza? Bom, vou
00:07:56
simplificar, vamos aqui, ó, no editor de
00:07:59
tema do seu site, você pode vir aqui em
00:08:01
qualquer uma das cores e clicar no
00:08:04
lapisinho, no editor x ou no editor wix.
00:08:05
Quando ele aparecer, o seletor de cor
00:08:09
você vai ter as 3 opções, Rex RGB e
00:08:11
hsb. Fechou,
00:08:14
é aqui que você vai saber a cor que
00:08:17
você está utilizando. Tá que você quer
00:08:20
utilizar, aliás?E aí depois
00:08:23
eu mostro, vou mostrar pra vocês como
00:08:26
você coloca lá, eu vou colocar aqui, ó,
00:08:27
um amarelo, tá? Vou colocar aqui um
00:08:30
amarelão. Ó, coloquei um
00:08:32
amarelão, vou aqui em RGBE.
00:08:35
Voltei aqui, ó, a cor dele, ó
00:08:38
2552 21 e 0
00:08:39
éa cor amarela,
00:08:41
fechou super simples, tá?
00:08:45
Vou cancelar aqui só Pra Ele não aplicar
00:08:48
esse efeito lembra. 2552 21
00:08:50
e 0. Vouvoltar lá no
00:08:53
meu é. Elemento
00:08:55
personalizado, definindo o atributo
00:08:58
e definiu o atributo. Collor.
00:09:01
Tudo minúsculo, tá bom, vou colocar aqui
00:09:05
RGB.
00:09:08
Eu vou colocar ó
00:09:12
2552.
00:09:14
númum
00:09:17
ero que não est
00:09:21
ava lá no setor de cores, a gente
00:09:21
vai definir agora qual é a Opacidade desse background do do Blair? Tá, por
00:09:21
? E que para ele ter
00:09:21
um efeito legal eu preciso mostrar o que está atrás
00:09:23
dele, néaí fica aqu
00:09:26
góci
00:09:28
ele é tipo um vidro assim, né? Fica o n
00:09:33
e
00:09:37
o bem massa, tá?Então eu vou colocar aqui
00:09:41
0.2, tá esse essa
00:09:44
Opacidade, esse número que você vai
00:09:46
colocar aqui, entre 0 e
00:09:48
1 e não mais do que isso, tá
00:09:50
entre 0 e 1, então vou colocar
00:09:53
0.2 beleza,
00:09:55
ó, já apareceu a corzinha ali com
00:09:57
transparência legal, tá funcionando,
00:10:00
se fez isso aí pra você também, tá no
00:10:02
caminho correto. Outro atributo que a
00:10:05
gente vai definir é o border,
00:10:07
tá esse border, ele vai.
00:10:10
Vai colocar uma bordinha nas laterais ali
00:10:15
do nosso elemento. Eu vou colocar é
00:10:17
definir ele como um.
00:10:19
Vou colocar aqui também é o
00:10:22
atributo border.
00:10:24
Locate. Esse border
00:10:28
locate ele serve pra gente definir
00:10:30
se a gente quer que essa borda apareça só
00:10:33
em cima, só dos lados ou
00:10:35
embaixo, né? Pode ser que é
00:10:38
seja útil pra você. Foi útil pra mim. Um
00:10:40
dos projetos que eu fiz, então é eu
00:10:43
coloquei também essa opção pra ser
00:10:46
customizada, tá como eu
00:10:48
não vou utilizar dentro
00:10:51
desse dessa demonstração que eu vou
00:10:53
está aplicando aqui para vocês, eu só vou
00:10:56
colocar um espaço aqui. Dentro desse
00:10:59
atributo?
00:11:01
E vou também aqui definir o border.
00:11:04
Collor tá esse border Collor.
00:11:08
A gente também vai usar ORGB entre
00:11:11
parênteses e aqui eu vou falar que a
00:11:14
minha borda é uma cor branca, então vou
00:11:16
colocar aqui
00:11:18
25525-5255
00:11:19
de novo e vou colocar como transparência,
00:11:22
né? Um, né? Opacidade um que no caso é
00:11:25
sem transparência e vou definir.
00:11:28
Pronto, ó, está vendo, ó. Já apareceu a
00:11:32
bordinha ali. Vou definir o
00:11:34
atributo também. Border
00:11:36
radios, tá da mesma forminha que
00:11:39
você que eu escrevi aqui, você vai
00:11:42
escrever aí também no seu e vai funcionar
00:11:44
super bem, tá esse border radio? Eu vou
00:11:47
colocar como 16, tá, que no
00:11:50
caso é os cantinhos aqui do nosso
00:11:53
elemento, ó, está vendo, ele vai ficar
00:11:55
redondinho, bem bonitinho. Posso
00:11:57
definir que também posso não, né? Preciso
00:11:59
definir que também o atributo Blur,
00:12:02
que no caso é o atributo principal. Do
00:12:05
efeito que a gente está querendo é
00:12:08
utilizar, eu vou colocar esse valor como
00:12:10
7 e ele já vai mostrar aqui pra gente.
00:12:12
O efeito é aplicado aqui na nossa
00:12:15
tela. Só deixa eu ajustar
00:12:18
um pouquinho aqui deste do
00:12:21
elemento, tá? Vou dar uma aqui uma
00:12:24
ajustadinha para ficar bonitinho.
00:12:26
Bom, dei só uma ajustadinha aqui no
00:12:29
elemento para ele ficar maior, mais
00:12:31
centralizado aqui na tela tá coisa
00:12:32
básica, você vai fazer isso aí no teu
00:12:35
editor? Tranquilo. Qualquer um dos
00:12:36
editores vai funcionar. E o que que vai
00:12:38
acontecer, ó? Agora eu vou publicar aqui
00:12:41
o site.
00:12:42
E aí ele já vai aparecer pra gente aqui.
00:12:47
O efeito aplicado ó bem legal. Show
00:12:49
de bola, Hein? Ficou muito massa.
00:12:52
Beleza, se eu quiser aqui agora também
00:12:55
posso colocar esse texto a parte de
00:12:58
trás, o que fica bem interessante, ó, e
00:13:01
aí, você tem total
00:13:03
Liberdade para fazer o que decidir
00:13:06
aí no teu site, entendeu? Isso
00:13:09
fica muito massa, um efeito muito legal
00:13:12
de estar utilizando. Ó, pode ver que já
00:13:13
ficou 11 texto ali desfocado, né? Ficou bastante desfocado. Então eu posso vim aqui e diminuir
00:13:15
um
00:13:16
,
00:13:17
poucoo Blur tá, vou colocar aqui 3.
00:13:23
Óleo já atualizou, ficou menos desfocado,
00:13:26
tá vendo? Não gosto desse amarelo, tá?
00:13:28
Então eu vou mudar aqui pra pra uma cor
00:13:31
mais escura, um cinza, né? Um preto eu
00:13:34
vou colocar aqui 000, tá?
00:13:36
Ponto 2 show de bola. Ele vai mudar aqui
00:13:41
pra um preto, tá vendo, ó e também
00:13:43
aqui a borda. Eu não gosto dela sem
00:13:46
Opacidade, né? Eu gosto dela um pouquinho
00:13:48
Clarinha mesmo bem pequenininha, ali e
00:13:51
tal, então vou colocar aqui 0.2
00:13:53
também, tá?
00:13:56
Que vai fazer só um detalhinho ali nas
00:14:01
bordas, tá?
00:14:04
Vou publicar.
00:14:07
E aí tá? Nosso efeito tá
00:14:19
desfoc. No texto des. Focando lá ao
00:14:21
fundo Superinteressante, super massa,
00:14:24
bem fácil de utilizar, é só você seguir o
00:14:27
que eu fiz aqui que você vai conseguir
00:14:30
aplicar no teu site de uma forma bem
00:14:32
fácil, você pode personalizar qualquer um
00:14:35
desses atributos, testar e fazer aí. De
00:14:37
acordo com o que você espera que fique no
00:14:40
seu projeto. Tá uma coisa Super
00:14:42
interessante de fazer, é deixar esse Blur
00:14:45
aqui, né? Esse elemento redondo, o que eu
00:14:47
posso fazer colocando aqui um número
00:14:50
super alto aqui no but the rainweid, né?
00:14:52
Não sou muito bom de inglês, então coloca
00:14:56
aqui, ó super alto, aqui, ó, nesse
00:14:58
elemento, ó e deixa ele redondinho que
00:15:00
pode ter. Aí pode ser um efeito muito
00:15:03
massa de fazer aí dentro do seu site,
00:15:05
tá bom?Galera, espero
00:15:08
que vocês tenham gostado desse vídeo,
00:15:11
desse conteúdo. Espero que eu tenha
00:15:13
alcançado o meu objetivo de trazer esse
00:15:15
feito de uma forma mais simples para
00:15:17
vocês e também melhor, né? Com mais
00:15:19
customizada, eu achei muito interessante
00:15:22
e tem me ajudado em alguns projetos que
00:15:25
eu faço aqui, algumas coisinhas. É,
00:15:27
eu espero que ajude vocês também é?
00:15:30
Fica à vontade para se inscrever aqui no
00:15:33
canal para curtir esse vídeo para
00:15:35
comentar aqui também, para dar novas
00:15:38
ideias. Tá coisas interessantes que às
00:15:40
vezes eu não penso, né? Em tudo não
00:15:42
sei qual é a necessidade de vocês, mas
00:15:45
tragam aqui nos comentários que podem ter
00:15:47
certeza que eu vou amar e ter o maior
00:15:50
prazer de trazer o conteúdo aqui dentro
00:15:52
do canal. Calma, calma, calma, que esse
00:15:54
vídeo ainda não acabou, eu tenho uma
00:15:57
notícia muito importante para te dar. Se
00:15:59
você trabalha com a wixelancer ou tem
00:16:01
uma agência e casts se especializar, quer
00:16:04
ter um conhecimento melhor sobre a
00:16:07
plataforma para desenvolver projetos
00:16:09
ainda melhores ou quer se tornar um
00:16:11
freelancer da área? Ser um web design,
00:16:14
criar sites, criar aplicações web. Essa
00:16:17
notícia é para você. Eu estou falando
00:16:20
aqui da wix pro, uma plataforma de
00:16:22
treinamentos especializada no universowix
00:16:25
. com. Nela você vai encontrar tudo o que
00:16:28
precisa para se tornar um profissional do
00:16:30
absoluto zero. Ao avançado, com
00:16:32
diversos vídeos materiais de apoio,
00:16:35
tutoriais completo, webners,
00:16:38
Lives e tudo o que você precisa de saber
00:16:40
sobre este universo. Eu deixei um link
00:16:43
aqui na descrição desse vídeo para você
00:16:45
se cadastrar e garantir o acesso
00:16:47
antecipado, se cadastrando, você também
00:16:50
irá garantir benefícios exclusivos e
00:16:52
também ficará sabendo em primeira mão
00:16:54
sobre o lançamento oficial da plataforma.
00:16:56
Então agora mesmo vá que a
00:16:59
descrição acesse o link wix pronto
00:17:02
expert e se cadastre te vejo lá.
00:17:04