Transcrições
1. Introdução: Bem-vindo de volta a outra aula
incrível do Skillshare comigo, can Besser. É sempre um prazer
tê-lo aqui. Você quer aprender a adicionar vetores
animados ao
seu site assim? Quero mostrar como adicionar arquivos carregados
ao seu site WordPress
com o carregamento do Elementor, o arquivo foi criado pela equipe
do Airbnb e
é de código aberto. E, como você pode ver, o serviço tem sido usado por designers e desenvolvedores de
muitas empresas em todo o mundo. Algumas delas são
as maiores marcas do
setor de tecnologia atualmente. Vamos fazer
tudo isso de graça. Você não terá que pagar
por nenhum plug-in ou qualquer serviço sempre
gastando mais tempo. Vamos prosseguir e começar.
2. Vamos adicionar as imagens animadas: Aqui estamos no meu painel. Esta é uma nova
instalação do WordPress, por isso não tenho nenhum plug-ins instalado, exceto os
que vêm por padrão. Eu vou em frente e selecionarei
os dois marcando esta caixa e excluindo-os. Só não quero
tê-los lá. Então, agora que
temos uma ardósia limpa, clicarei em Adicionar novo. E, claro, preciso
adicionar Elementor. Instale o Elementor. Tenho que mencionar que o
elementary em si tem a opção de adicionar
animações ao seu site, mas isso está disponível na versão
Pro do Elementor. Então, se mudarmos para
o site oficial, como você pode ver aqui em animações
incríveis para o seu
site com muitos widgets. Você precisa se tornar profissional
para
poder usar esse recurso. Como isso está disponível
na versão pro, existe uma maneira de fazê-lo
gratuitamente sem gastar dinheiro? E a resposta é sim. Então, voltando ao
nosso painel, como você pode ver aqui, temos complementos adicionais do
Elementor criados por
desenvolvedores terceirizados. E alguns desses
recursos adicionais que são
gratuitos com esses complementos. Os recursos que são premium ou na versão Pro do
elementary propriamente dito. Então, queremos instalar
complementos premium para o Elementor. E este é o complemento
que nos dará o recurso para adicionar
animações ao nosso site. Agora que temos os
dois instalados, podemos ir em frente e
ativar ambos de
uma só vez entrando nos plugins
instalados. Selecionarei os dois
marcando esta caixa aqui. E então vou em frente e
direi ativar e aplicar. Certo? E agora que temos os dois plugins
instalados e ativados, tenho que mencionar que estou
usando o Tema Astra. Então, se eu entrar na aparência, você notará que meu tema
ativo é Astra. Indo para dentro das páginas. Eu vou em frente e
criarei uma nova página. Vamos chamá-lo de aterrissagem. Então irei aqui
nessas configurações, vou para o modelo
Elementor largura total. Então vou em frente
e publicarei. Provavelmente substituição de estatísticas. Então, vamos para Editar com Elementor porque haverá fazer isso a partir do front-end. Certo? Então, aqui estamos nós. O que queremos fazer é adicionar novo. Quero adicionar uma nova seção. Então, vou adicionar esta seção de coluna
dupla. E nesta coluna aqui, é aqui que estamos
adicionando nossa animação. Então, vou clicar no
sinal de mais aqui. E então vim aqui,
vou digitar Lottie. Você notará que temos
a versão elemental pro
e a versão de
animações de carregamento premium. Então, se clicarmos na versão do
Elementor Pro, não
podemos usá-lo porque,
como você pode ver, o log aqui diz que você
precisa ter a versão pro. Mas o bom é que
fomos parados no plug-in
Elementor Adams premium e ele nos permite adicionar os arquivos de
carregamento usando ele. Ele nos apresentará
as opções premium de edição de
animações Lawdy aqui. E a primeira coisa que
você notará é que temos uma fonte de arquivo. Na fonte do arquivo,
temos duas opções. Podemos fazer upload de nosso próprio arquivo, nossa própria animação se estiver
no formato certo. Ou podemos adicionar um URL externo. Então, vamos com
o URL externo. E isso significa que
precisamos pegar um URL do carregamento de arquivos
e soltá-lo aqui. Entrará no carregamento de arquivos. E aqui, vou
para a barra de pesquisa e digitarei qualquer tipo
de animação que eu preciso. Então, digamos, por
exemplo, nitidez. Em seguida, pressione Enter. Como você pode ver, temos várias opções
aqui para escolher. A maioria deles é gratuita, é
claro que tem que haver
algumas versões premium. Eu vou em frente e selecionarei
talvez este aqui. Então, vou clicar nisso. E isso abrirá esse
pop-up com todos os
detalhes que precisamos. Agora, esse é o URL que
precisamos copiar, então eu vou clicar nele para
copiá-lo e agora ele é copiado. Vou entrar na nossa página
Elementor e colá-la dentro deste campo. Vai levar um momento para aparecer. Lá nós o temos. Agora você
notará que é muito pequeno. A primeira coisa que você precisa fazer é talvez aumentar seu tamanho. Você também pode digitar o tamanho que você precisa diretamente aqui. Digamos que 500. Então
vamos atualizar isso. Visualize as alterações.
Lá temos isso, a animação em nosso site. Assim, você pode ir em frente e adicionar
mais detalhes ao seu site. Então talvez você queira
o caminho para lá. Compras limitadas. Talvez queira alterar
a cor da fonte. Talvez a topografia tenha mudado o tamanho da fonte
Montserrat. Talvez. Selecionarei
a coluna em si. Coluna que está mantendo essa área. Vá para dentro e vá para dentro. Avançado. Desmarque a margem e, em seguida, vamos dar a ela
uma margem superior de 70. Tudo bem, então vamos
clicar neste ícone
aqui para adicionar algum texto. Vamos clicar nele novamente
para adicionar um botão. Vamos mudar o
botão de cor para este amarelo. Então, vou clicar no botão. E, em seguida, no botão, em Estilo, vá para a cor. Este amarelo aqui. Lá nós o temos. Atualize isso. E vamos visualizar as alterações. Talvez você possa dar a essas
fontes cor azul. Vou selecionar essa consistência de cor azul e
marrom. E agora o azul combina
com o azul sobre isso. E então vamos clicar nesta animação de Lawdy
entrando no estilo. Então, como você pode ver, temos
muitas opções diferentes aqui. Também podemos aumentar
a velocidade da animação. A velocidade aumentará em pequenos incrementos
porque, como você pode ver, estamos aumentando em pontos. E também podemos escolher o que
aciona a animação. Talvez ao passar o mouse, quando
alguém paira sobre
ele, é quando ele anima. No pergaminho. Quando alguém
precisa de rolagem, é quando ela
começa a animar. Estilo de insight. Também podemos entrar nos filtros CSS e brincar com essas
configurações aqui. Por exemplo, podemos
aumentar o brilho. Podemos brincar
com o contraste. Também podemos aumentar
e diminuir a saturação das cores. Também podemos brincar com a tonalidade apenas para ver se conseguimos obter as cores da nossa
marca, certo. Tudo bem, vamos atualizar isso. E vamos visualizar as alterações. E lá temos isso. Quando passamos o mouse sobre oito, é quando ele anima. Quando ainda não estamos pairando, não
é animador porque
essa é a configuração que escolhemos. É assim que fazer isso, pessoal. Eu recomendaria que você vá em
frente e brinque com todas as configurações e veja o quão criativo você
pode obter com elas. E isso marca o
fim do nosso tutorial. Espero que você tenha aprendido
algo hoje. E acima de tudo, espero que você faça algo
incrível com isso. Se você gosta da aula, não se esqueça de deixar um comentário. Isso pode ajudar outro
aluno a decidir se é isso que eles estão procurando
antes de realmente assisti-lo. Se você estiver usando o Elementor e
gostaria de aprender a criar páginas da Web incríveis e sites
totalmente funcionais. Confira meu perfil. Você encontrará várias aulas lá onde eu
te ensino a fazer isso. Caso contrário, foi um prazer
ensinar-lhe isso hoje e te vejo
na próxima vez. Paz.
Ken Mbesa, Web Designer | 3D Artist
