Slides Responsivos no Drupal [1]
-
[2]
-
[3]
-
[4]
-
[5]
-
[6]
-
[7]
-
[8]
-
[9]
-
[10]
-
[11]
-
[12]
-
[13]
-
[14]
-
[15]
Olá a todos! Hoje vou explicar como fazer o responsivo para blocos com slides no Drupal! =)
Primeiramente, abra a View que deseja, e vamos clonar o bloco que deseja que se torne responsivo. (Imagem 1)
Após clonar o bloco, modifique o nome dele para Bloco Mobile para facilitar a distinção, e depois vá nas opções de estilo da Apresentação de Slides e troque para "1" no campo Itens por Slide. Salve. (imagem 2)
Logo após, vá no painel que o bloco principal está inserido. Existe duas formas de chegar lá:
- Clicando no ícone de configurações no próprio bloco (Imagem 3);
- Indo em Estrutura -> Páginas -> Editar -> Conteúdo (Imagem 4)
Depois disso, clique no ícone de configurações e depois em adicionar conteúdo. (Imagem 5)
Neste caso, eu criei um bloco na View Infraestrutura, então ao adicionar conteúdo, vá em Views -> Infraestrutura -> Seleciona o display "Block Mobile" (Imagem 6) e clica em Continuar e logo após Finalizar.
Na imagem 7, veja que ela vai estar logo abaixo da view. Agora precisamos dar um classe para cada uma. Clique no ícone de configuração -> Propriedades de CSS. (Imagem 8)
No primeiro bloco, colocaremos a classe "desktop" (Imagem 9), que significa que ela será exibida na versão do desktop. E no Bloco Mobile colocaremos a classe "mobile", que irá aparecer em um determinado "breakpoint", que iremos determinar por CSS, no caso, na resolução 768px. Depois clique em Atualizar e Salvar.
Ao voltarmos para a Home, teremos os dois blocos exibidos um em baixo do outro (Imagem 10). Agora é a hora de aplicarmos o CSS.
Em Configurações -> Desenvolvimento -> CSS Injector -> CSS Injector 10, (Imagem 11), que no nosso caso é onde separamos para colocar apenas a parte que faz a responsividade do site, colocaremos o seguinte:
- A classe mobile com o display: none; que fará ela sumir do desktop.
- Criar o breakpoint 768px e inserir a mesma classe mobile, porém com o display: block; para aparecer
e display: none; na classe desktop. (Veja a imagem 12). Após isso, clique em salvar.
Atualize a página com Crtl+F5. Prontinho! Agora, na resolução 768px, será exibida apenas o bloco com 1 slide por vez.(Imagem 13) - Isso é ser responsivo!=)
Até a proxima pessoal!
PS: Qualquer dúvida estou à disposição!
Atenciosamente,
Anna Moreira.
Categoria:
- Front End - UX/UI [16]
