Edição de Imagens do Revolution Sliders

O nosso sistema de site administrável utiliza um novo sistema para exibir as imagens em slider (apresentação com imagens passando), vamos ver então como você pode fazer para editar estes slides, o sistema utilizado é o Slider Revolution, o mesmo pode gerenciar várias apresentações diferentes, mas normalmente é utilizado e criado apenas uma, dentro de cada apresentação cada página da apresentação é denomidada um slide, dentro de cada slide você pode adicionar várias camadas com texto ou imagens, vamos explanar sobre a edição de apenas uma imagem mas a lógica é a mesma para outras, com esta rápida explicação, vamos ao passo a passo:
  • Após acessar o painel administrativo do site, no menu da esquerda vá em Slider Revolution;
  • Será exibido um quadro com o fundo do slider atual provavelmente com o nome homepage, como na imagem abaixo:
  • Slider Homepage
  • Clique no botão editar (um lapis);
  • Com a página de edição carregada role a página um pouco para baixo até que o editor do slider irá aparecer;
  • Esta página tem várias opções, tome cuidado para saber exatamento quais opções você alterou a fim de poder voltar, recomendamos que você faça alguma alteração, salve e visualize o slider, se não obteve o resultado desejado ou não visualizou qualquer mudança retorne esta configuração para seu estado anterior;
  • Abaixo da visualização do slider você poderá ver as linhas das camadas que compõem o Slider, e as suas linhas do tempo, assim podemos definir quando cada objeto irá aparecer e desaparecer, ou em que lugar ele estará em determinado momento;
  • Slider Homepage
  • Vamos ver então quais são as modificações mais comuns a serem realizadas no Slider:
  • Vamos alterar a imagem de fundo do slide, para isso em Slider Main Background na guia source;
    • Clique então em Change Image, escolha a imagem que você quer usar na biblioteca de imagens, caso ela não esteja na biblioteca envie como uma imagem normal;
    • Slider Fundo
    • A imagem será exibida abaixo, você pode usar as configurações de posicionamento para ajustar alguns detalhes de posicionamento;
    • Lembre-se que esta imagem será exibida em diversos tipos de tela, por isso ela deve ter uma resolução razoavel, ao mesmo tempo imagens muito grandes irão causar lentidão no site o tamanho recomendado da imagem é de 1920x700;
  •  Vamos agora editar um texto do slider:
    • Rolando a página até a exibição do slider, clique em um texto que você deseja editar;
    • Neste caso vamos clicar no texto Estamos conectados com você! conforme a imagem abaixo:
    •  Edição Texto
    •  Após o texto estar marcado vamos clicar em editar na barra superior, veja a imagem abaixo:
    • Edição Texto
    • Será exibido então o código que contém o texto, esta área exige um pouco de atenção, não será exibido apenas o texto, mas uns códigos de formatação do mesmo veja:
    • Edição Texto
    • Para editar apenas o texto edite apenas os dois trechos "Estamos conectados e "com você!
    • Não remova os códigos que iniciam e terminam com < >;
    • Se você quiser remover o simbolo de infinito que aparece somente na exibição do slider entre as palavras conectados e com, remova este código: <i class='icon-infinity'></i>
    • Se você quiser deixar o texto em somente uma linha remova o código <br /> ou se quiser adicionar mais linhas adicione este código onde quiser que ocorra a quebra de linha;
    • Vamos editar o texto abaixo deste texto principal para demonstrar a edição de formatação, pois este texto principal utiliza a formatação via código html como foi possível perceber;
    • Clique no texto com clique duplo para já exibir a opção de edição ou como anteriormente clique no botão de edição (lapis);
    • Edição Texto
    • Perceba que agora o único código existente é o <br /> que define uma nova linha;
    • Edição Texto
    • Utilize as ferramentas acima do editor do texto para formatar a exibição do mesmo:
    • Edição Texto
    • Pressione Enter para aplicar os valores ajustados ou clique no botão de confirmar:
    • Edição Texto
  • Vamos agora editar uma das imagens do slider, você pode replicar este procedimento para outras imagens;Para visualizar as modificações do Slider recomendamos que você abra uma outra guia do navegador com o site em sua visualização normal e acesse a página onde o slider está postado, pois embora exista uma pré visualização ao se clicar na lupa da barra mostrada na barra acima, esta visuação não é idêntica a exibida aos visitantes.
    • Para iniciar clique na imagem que você deseja editar:
    • Edição imagens
    • Com a imagem desejada selecionada clique no botão editar caso queira alterar a imagem:
    • Edição Texto
    • Escolha a imagem que você deseja adicionar e clique em Insert;
    • Você pode ajustar o tamanho da imagem  e movimentar ela para ajustar o posicionamento da imagem dentro do slider;
    • Caso queira você pode deletar esta imagem clicando no icone de uma lixeira:
    • Edição imagens
    • Após realizar as modificações desejadas salve as mesmas clicando no botão Save Slide:
    • Edição Sliders
  • Você pode organizar e ajustar o tempo de exibição de cada camada no gerenciador de camadas, logo abaixo do editor do slider:
  • Linha do tempo
  • Repita estes passos para cada ítem que você deseja editar ou alterar, veja que estes sliders iniciais já vem com várias camadas, você pode um slider com apenas a imagem de fundo ou com alguma imagem ou texto apenas na frente, o importante é ter um conteúdo atraente para o visitante.
  • 0 Usuários acharam útil
Esta resposta lhe foi útil?

Artigos Relacionados

Widget Facebook Members - Site v2

A relevância das redes sociais e atualmente do Facebook como fonte de divulgação é...

Acesso ao sistema de administração

Nesta série de tutoriais buscaremos lhe mostrar como usar da melhor forma o nosso sistema de site...

Edição de Páginas

Após estarmos logados no sistema administrativo do site vamos editar as suas páginas, neste...

Edição de Posts (Artigos)

Como você já deve ter percebido, no sistema existe uma divisão entre Páginas e Posts, páginas são...

Mudança do Cabeçalho (imagem do topo) - Sites v2

Esta é uma das mudanças que mais diferencia o site, mas abordaremos aqui apenas a parte do...

Powered by WHMCompleteSolution