e aí o olá pessoal tudo bem sejam bem-vindos a mais um tutorial aqui na bioderol esse vídeo eu vou ensinar a você adicionar um banner rotativo dentro do seu site o banner rotativo ele vem para ajudar aquelas pessoas que querem mostrar ali o seu serviço seu produto adicionando textos e botões nas imagens que fica passando de uma página para outra nós vamos adicionar as elemento que nós vamos clicar em adicionar elementos e lá embaixo vai ter banner rotativo nós temos 4 modelos e vai inspirar você a fazer o seu jeito aí no seu site você

pode utilizar exatamente o mesmo modelo e apenas mudar os textos mudar ali as ações do botão ou então você pode mudar a cor mudar as imagens também eu vou selecionar o modelo e arrastar ele para dentro do painel é um detalhe muito comum que acontece é que os usuários eles não arrastão e solta dentro do painel apenas clicam no banner rotativo e não acontece nada né geralmente vem um grupo haridady banner transparente vazio então primeiro você seleciona o seu painel e com o painel selecionado você arrasta dessa forma que eu estou fazendo e você vai

ver essa miniatura que se movimentando para dentro do painel quando você faz esse movimento de arraste solta esse banner rotativo aparece no painel e você escolheu e nós vamos puxar ele para dentro do site e aqui nesse momento você vai colocar ele aonde você acha que vai ficar melhor para o seu site ou para o seu blog o banner rotativo é muito usado também em blogs para colocar notícias mais lidas imagens de alguns artigos a linha interessante e geralmente o mundo leia mais que direciona para o artigo outro detalhe que é bem importante é você

trabalhar o conteúdo dentro das linhas pontilhadas do painel são essas linhas aqui porque essas linhas pontilhadas ela separam o conteúdo muitas vezes alguns computadores e monitores eles são maiores ou menores e isso pode cortar o conteúdo dependendo do modelo do computador então para garantir que o conteúdo vai aparecer independente do modelo é sempre bom trabalhar o conteúdo dentro das linhas pontilhadas e aí que eu vou fazer com banner rotativo eu vou diminuir ele é um pouquinho e colocar ele aqui dentro das linhas pontilhadas para que não tem esse problema bom então o banner rotativo ele

é um grupo de páginas onde cada página você vai colocar uma imagem no texto um botão com uma ação cada e você vai trabalhar da melhor forma para o seu negócio se você quiser editar o grupo como um todo você vai clicar aqui em grupo e já vai aparecer se menu bem aqui em cima aonde você pode excluir esse banner rotativo como um todo ocultar esse elemento duplicar ele ir para próxima página para visualizar os outros modelos aqui de página você também pode adicionar mais uma página o grupo então quê que seria isso você quer

ter quatro páginas ou três páginas mostrando ali os seus produtos ou então você trabalha com 10 serviços diferentes então você precisa ter dez páginas para cada página contar um pouquinho da sua história então aqui no caso você adiciona a página ah e tem como também deixar esse elemento o banner rotativo centralizado editar o elemento e salvar esse elemento quando selecionamos a página que começa com página zero página um página dois cada página quando você clica dentro dela aparece aqui também uma linha pontilhada que mostra que nós temos uma caixa com imagem texto botão se eu

clicar na caixa eu consigo também fazer as mesmas configurações do grupo que a excluí ocultar duplicar centralizar e estar elemento e é na parte de editar elemento que nós vamos trabalhar cores a imagem de background as configurações raio borda e tudo mais essas são configurações ali padrões que você vai encontrar em praticamente todos os elementos da o doce sabe o dele e você também pode adicionar textos colocar ação e botão clicar no botão adicionar um link aqui se eu estivesse falando de um blog por exemplo e ali tem uma notícia que eu acho muito interessante

e eu quero que ela fique destacada no meu blog eu posso vir aqui na web adicionar o link dessa notícia e selecionar posso até mudar o texto para leia mais saiba mais clique agora e na hora que a pessoa clicar ela já vai direto para aquele link que você colocou assim fica o número de páginas se você tiver mais informações para passar ali para o leitor você adiciona a páginas e se você não tiver tanta informação assim você vai vir aqui e vai excluir diminuindo o número de páginas do grupo do banner rotativo muitas pessoas

um dúvida e como que faz para esse banner aparecer no mobile eu vou mostrar para vocês aqui uma dica que é bem interessante eu vou adicionar uma página o e nossa página eu vou colocar aqui uma imagem debate grau porque muitos usuários usam banner rotativo apenas com a imagem de background ou então coloca a imagem de um produto a imagem de um serviço e apenas a imagem não coloca mais nenhum elemento dentro do slider bom e isso quando vai no mobile o slide ele fica no tamanho muito pequeno aonde usuário não conseguem aumentar só eu

vou mostrar aqui uma forma de vocês conseguiram aumentar o slide utilizando essa estratégia aqui para vocês aproveitarem o slider apenas com a imagem de background eu gostaria que uma imagem é legal eu coloquei uma imagem aqui e eu vou mostrar para vocês como que fica essas páginas nos celular e quando eu venho aqui pro celular e eu quero editar esses slides para ver como que vai ficar experiência não responsivo eu clico aqui nele eu tenho as opções de ir para a próxima página e tem a opção aqui da página que eu adicionei um background e

olha como que fica estranho porque eu não consigo aumentar essa background aqui sendo assim a minha imagem está tão legal tão bonita não aparece o como que você resolve isso voltamos aqui no desktop e eu vou adicionar um elemento dentro dele e qual elemento eu vou adicionar eu vou adicionar uma caixa que fica transparente o ou seja é invisível o meu usuário não vai visualizar essa caixa eu vou tirar a borda dela e também eu vou colocar uma cor transparente para garantir que vai ficar invisível então ela tem uma caixa aqui eu vou deixar ela

aqui dentro não preciso fazer mais nada quando eu passo mouse eu percebo que tem um elemento aqui pelo pontilhado que fica em torno da caixa e agora eu vou voltar no celular e eu tenho um elemento aqui dentro que é uma caixa então vou editar esse elemento e em tamanhos e a altura mínima da caixa eu vou aumentar ela tô fazendo com que a imagem que eu coloquei apareça então lógico que vai aparecer proporcionalmente para um celular mas olha a diferença né antes você não conseguia nem aumentar a sua imagem e agora você consegue então

essa é uma forma de você colocar imagens dos seus produtos serviços a imagem que você desejar de background e fazer aqui no celular fazer com que ela fique grande e visível para as pessoas que acessarem o site e quando eu volto para o meu banner rotativo ele vai aparecer exatamente como está no desktop com as imagens com o texto e também com o botão oi e aí o texto tanto texto quanto o botão você pode clicar nos elementos e editando o tamanho dele nesse caso você edita essas camadas de espaçamento aqui em avançado e aí

você pode deixar o texto maior ou menor e conforme você foi mudando também vai mudando a imagem de fundo voltei para o desktop eu vou salvar essa informação para que eu não perca ela e vou também publicar o meu site oi e agora eu vou acessar a minha página que eu chamei ela de banner rotativo ir para página do website tô mostrando para vocês o site publicado no computador então esse é o boné rotativo é assim que aparece essa seta aqui seu clicar nela eu vou para próxima página e aí eu posso ir clicando até

e mostrando todas as páginas que eu coloquei se você tiver apenas uma ou duas páginas é isso que vai mostrar se você tiver mais página vai mostrar todas as páginas então sai clicando aqui nessa seta que vai mostrar todas as páginas esse os seus links aqui de cada banner tiver um relacionamento para uma página para um blog para um vídeo para o que você quiser a pessoa vai clicar nesse botão que será direcionada e com esse tutorial você aprendeu como adicionar um banner rotativo e configurar uma imagem de background no mobile e obrigada por assistir

qualquer dúvida acesse o nosso suporte acesse também a nossa central de ajuda tem muito conteúdo lá para ajudar você obrigada e até uma próxima tchau