Dentro deste tutorial, vamos ver como criar um slider e adicioná-lo a um site web construído no Framework360. Um slider é um conteúdo que geralmente é adicionado na primeira parte da página inicial do site web. O slider é composto por uma imagem, um carrossel de imagens ou um vídeo, e acima do conteúdo multimídia há um título e uma descrição.
Passo 1: Vamos criar nosso slider
Primeiro, vamos criar nosso slider clicando na subopção da barra lateral do Framework360 “Slider” seguindo os seguintes passos:
Site web > Slider
A este ponto, será exibida a tela onde estarão todos os sliders que criamos. Para criar um novo slider, não precisamos fazer nada além de clicar no botão verde no canto superior direito “Adicionar”.
Uma vez dentro da tela de criação do slider, vamos adicionar o título do nosso slider e configurar as várias opções relacionadas ao slider presentes nas seções abaixo da seção dedicada ao título.
Agora vamos analisar as várias seções.
SEÇÃO “OPÇÕES”
Dentro da seção “Opções”, definimos as configurações gerais do nosso slider. Especificamente, na opção “Altura do slider”, definimos a altura que nosso slider deve ter. Na opção “Autoplay”, caso o slider seja composto por um carrossel de imagens, definimos se essas devem ser trocadas automaticamente pelo sistema após um tempo escolhido por nós; não ativando o autoplay, deverá ser o visitante a rolar as imagens inseridas no slider. Na opção “ Loop” podemos decidir se reiniciar o carrossel de imagens uma vez que todas tenham sido visualizadas ou manter a visualização da última imagem. Na seção “Setas” podemos decidir se queremos adicionar setas à direita e à esquerda do slider para que o visitante possa mudar manualmente as imagens. Por fim, clicando no botão “Ordem aleatória” podemos fazer com que as imagens que inserimos sejam exibidas em uma ordem aleatória; caso contrário, a exibição seguirá a ordem de inserção.
SEÇÃO “FUNDO”
Continuando a rolar na página de criação do slider, na seção “Fundo” inserimos a imagem que comporá nosso slider. Nesta seção, na opção “Tamanho”, definimos o tamanho que a imagem carregada dentro do slider deverá ter; geralmente utiliza-se o modo cobertura, que permite cobrir em qualquer tipo de tela a largura total da tela com nossa imagem. Na opção “Repetir” podemos decidir se a imagem deve se repetir mais vezes até cobrir toda a seção; geralmente, colocando o modo de cobertura na opção “Tamanho”, aqui inserimos o modo no-repeat. Na opção “Posição” podemos decidir a posição do slide; geralmente, nesta opção é inserido o modo center-center. Na opção “Anexação” normalmente é deixado o modo padrão. Por fim, nas opções “Imagem Desktop” e “Imagem Móvel” carregamos nossa imagem para visualização respectivamente no PC e no celular. Se não inserirmos a imagem para mobile, o sistema fará visualizar a imagem desktop também para esse posicionamento. Nós recomendamos inserir também uma imagem para visualização móvel com um tamanho quadrado de forma a aliviar o carregamento da página quando o usuário visualizar a página sem uma conexão Wi-Fi.
SEÇÃO “VÍDEO”
Se, em vez disso, quisermos que dentro do nosso slider seja exibido um vídeo e não uma imagem, dentro da seção “Vídeo”, na opção “Vídeo de Fundo”, inserimos o link de um vídeo do YouTube ou Vimeo que será exibido como fundo no nosso slider. Sempre dentro da seção “Vídeo”, na opção “Ao finalizar o vídeo”, definimos se ao final do vídeo deve reiniciar a reprodução do vídeo, ocultar o vídeo ou parar no último quadro. Por fim, na opção “Exibir em” podemos decidir se queremos exibir o vídeo tanto no desktop, tablet e mobile ou ocultar a visualização do vídeo em algum desses posicionamentos.
SEÇÃO “OVERLAY”
Dentro da seção “Overlay”, podemos decidir se aplicamos um gradiente colorido sobre a imagem ou o vídeo que carregamos. Essa escolha pode ser feita através da opção “Gradiente”. Como alternativa, podemos selecionar uma cor através da opção “Cor”, que será sobreposta ao conteúdo carregado. Em seguida, utilizando a opção “Opacidade”, podemos reduzir a opacidade da cor para que a imagem ou o vídeo subjacente sejam visíveis.
SEÇÃO “CONTEÚDO”
Dentro da última seção presente na tela de criação do slider, chamada “Conteúdo”, através do clássico construtor visual do Framework360, adicionamos um título e uma descrição que deverão ser exibidos no nosso slider.
Uma vez concluída a criação do slider, clique no botão verde no canto superior direito “Salvar” para salvar o trabalho.
Passo 2: Adicionamos o slider à página do nosso site web
Depois de criar o nosso slider, como visto no passo anterior, agora precisamos inseri-lo na página do nosso site web onde desejamos que seja exibido. Para fazer isso, devemos ir até a subopção da barra lateral “Páginas” seguindo os seguintes passos:
Site Web > Páginas
Dentro da tela de detalhes “Páginas”, encontraremos a lista das páginas presentes no nosso site web. Neste ponto, clicamos na página onde desejamos inserir o slider e, utilizando o construtor visual, selecionamos o bloco “Slider” e arrastamo-lo para a seção da página web onde queremos que seja exibido, conforme ilustrado na figura seguinte:
Uma vez inserido o bloco, vamos selecionar o slider que criamos.
Por fim, clique no botão no canto superior direito “Salvar” para salvar a inserção do slider.
